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

package/CHANGELOG.md

@@ -1,4 +1,6 @@
 
+## [0.19.0-alpha.19](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.18...v0.19.0-alpha.19) (2023-10-20)
+
 ## [0.19.0-alpha.18](https://github.com/dynamic-labs/DynamicAuth/compare/v0.19.0-alpha.17...v0.19.0-alpha.18) (2023-10-20)
 
 

package/package.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "0.19.0-alpha.18";
+var version = "0.19.0-alpha.19";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.34",
 	"@dynamic-labs/sdk-api": "0.0.291",

package/package.js

@@ -1,4 +1,4 @@
-var version = "0.19.0-alpha.18";
+var version = "0.19.0-alpha.19";
 var dependencies = {
 	"@dynamic-labs/iconic": "0.1.34",
 	"@dynamic-labs/sdk-api": "0.0.291",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "0.19.0-alpha.18",
+  "version": "0.19.0-alpha.19",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -17,13 +17,13 @@
     "react-focus-lock": "2.9.2",
     "react-i18next": "^13.2.0",
     "yup": "0.32.11",
-    "@dynamic-labs/logger": "0.19.0-alpha.18",
-    "@dynamic-labs/multi-wallet": "0.19.0-alpha.18",
-    "@dynamic-labs/rpc-providers": "0.19.0-alpha.18",
-    "@dynamic-labs/types": "0.19.0-alpha.18",
-    "@dynamic-labs/utils": "0.19.0-alpha.18",
-    "@dynamic-labs/wallet-book": "0.19.0-alpha.18",
-    "@dynamic-labs/wallet-connector-core": "0.19.0-alpha.18",
+    "@dynamic-labs/logger": "0.19.0-alpha.19",
+    "@dynamic-labs/multi-wallet": "0.19.0-alpha.19",
+    "@dynamic-labs/rpc-providers": "0.19.0-alpha.19",
+    "@dynamic-labs/types": "0.19.0-alpha.19",
+    "@dynamic-labs/utils": "0.19.0-alpha.19",
+    "@dynamic-labs/wallet-book": "0.19.0-alpha.19",
+    "@dynamic-labs/wallet-connector-core": "0.19.0-alpha.19",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -47,12 +47,15 @@ var localStorage = require('./lib/shared/utils/classes/storage/localStorage.cjs'
 var PhantomLedgerIcon = require('./lib/shared/assets/wallets/PhantomLedgerIcon/PhantomLedgerIcon.cjs');
 var stroke = require('./lib/shared/assets/stroke.cjs');
 var arrowRight = require('./lib/shared/assets/arrow-right.cjs');
+var arrowRightCircle = require('./lib/shared/assets/arrow-right-circle.cjs');
+var arrowLeft = require('./lib/shared/assets/arrow-left.cjs');
 var arrowDown = require('./lib/shared/assets/arrow-down.cjs');
 var close = require('./lib/shared/assets/close.cjs');
 var chevronLeft = require('./lib/shared/assets/chevron-left.cjs');
 var error = require('./lib/shared/assets/error.cjs');
 var check = require('./lib/shared/assets/check.cjs');
 var checkCircle = require('./lib/shared/assets/check-circle.cjs');
+var checkConnection = require('./lib/shared/assets/check-connection.cjs');
 var walletConnectLogo = require('./lib/shared/assets/wallet-connect-logo.cjs');
 var spinner = require('./lib/shared/assets/spinner.cjs');
 var copy = require('./lib/shared/assets/copy.cjs');
@@ -214,12 +217,15 @@ exports.LocalStorage = localStorage.LocalStorage;
 exports.PhantomLedgerIcon = PhantomLedgerIcon.PhantomLedgerIcon;
 exports.ArrowIcon = stroke.ReactComponent;
 exports.ArrowRightIcon = arrowRight.ReactComponent;
+exports.ArrowRightWithCircleIcon = arrowRightCircle.ReactComponent;
+exports.ArrowLeftIcon = arrowLeft.ReactComponent;
 exports.ArrowDownIcon = arrowDown.ReactComponent;
 exports.CloseIcon = close.ReactComponent;
 exports.ChevronLeftIcon = chevronLeft.ReactComponent;
 exports.ErrorIcon = error.ReactComponent;
 exports.CheckIcon = check.ReactComponent;
 exports.CheckCircleIcon = checkCircle.ReactComponent;
+exports.CheckConnectionIcon = checkConnection.ReactComponent;
 exports.WalletConnectLogo = walletConnectLogo.ReactComponent;
 exports.SpinnerIcon = spinner.ReactComponent;
 exports.CopyIcon = copy.ReactComponent;

package/src/index.js

@@ -43,12 +43,15 @@ export { LocalStorage } from './lib/shared/utils/classes/storage/localStorage.js
 export { PhantomLedgerIcon } from './lib/shared/assets/wallets/PhantomLedgerIcon/PhantomLedgerIcon.js';
 export { ReactComponent as ArrowIcon } from './lib/shared/assets/stroke.js';
 export { ReactComponent as ArrowRightIcon } from './lib/shared/assets/arrow-right.js';
+export { ReactComponent as ArrowRightWithCircleIcon } from './lib/shared/assets/arrow-right-circle.js';
+export { ReactComponent as ArrowLeftIcon } from './lib/shared/assets/arrow-left.js';
 export { ReactComponent as ArrowDownIcon } from './lib/shared/assets/arrow-down.js';
 export { ReactComponent as CloseIcon } from './lib/shared/assets/close.js';
 export { ReactComponent as ChevronLeftIcon } from './lib/shared/assets/chevron-left.js';
 export { ReactComponent as ErrorIcon } from './lib/shared/assets/error.js';
 export { ReactComponent as CheckIcon } from './lib/shared/assets/check.js';
 export { ReactComponent as CheckCircleIcon } from './lib/shared/assets/check-circle.js';
+export { ReactComponent as CheckConnectionIcon } from './lib/shared/assets/check-connection.js';
 export { ReactComponent as WalletConnectLogo } from './lib/shared/assets/wallet-connect-logo.js';
 export { ReactComponent as SpinnerIcon } from './lib/shared/assets/spinner.js';
 export { ReactComponent as CopyIcon } from './lib/shared/assets/copy.js';

package/src/lib/components/Button/Button.cjs

@@ -9,7 +9,7 @@ var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var spinner = require('../Spinner/spinner.cjs');
 var Typography = require('../Typography/Typography.cjs');
 
-const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant = 'primary', buttonRounded, children, feedback, expanded, dataTestId, disabled = false, loading = false, onClick, type, startSlot, endSlot, typographyProps = {
+const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant = 'primary', children, feedback, expanded, dataTestId, disabled = false, loading = false, onClick, type, startSlot, endSlot, typographyProps = {
     variant: 'button_primary',
 }, }) => {
     const [internalButtonLoading, setInternalButtonLoading] = React.useState(false);
@@ -25,15 +25,10 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
         none: 'button--padding-none',
         small: 'button--padding-small',
     };
-    const buttonRoundedClassNameMap = {
-        default: 'button--rounded',
-        medium: 'button--rounded--medium',
-        small: 'button--rounded--small',
-    };
     const buttonEffectiveClassName = classNames.classNames('button', {
         'button--expanded': Boolean(expanded),
         'button--loading': Boolean(loading),
-    }, buttonPadding ? buttonPaddingClassNameMap[buttonPadding] : '', buttonVariant ? buttonVariantClassNameMap[buttonVariant] : '', buttonRounded ? buttonRoundedClassNameMap[buttonRounded] : '', buttonClassName);
+    }, buttonPadding ? buttonPaddingClassNameMap[buttonPadding] : '', buttonVariant ? buttonVariantClassNameMap[buttonVariant] : '', buttonClassName);
     const handleClick = (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
         if (onClick) {
             const onClickResult = onClick(e);

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

@@ -2,11 +2,9 @@ import { ButtonHTMLAttributes, FC, MouseEventHandler, ReactNode } from 'react';
 import { TypographyProps } from '../Typography/Typography.types';
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 type ButtonPadding = 'small' | 'medium' | 'large' | 'none';
-type ButtonRounded = 'default' | 'medium' | 'small';
 export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
     buttonClassName?: string;
     buttonPadding?: ButtonPadding;
-    buttonRounded?: ButtonRounded;
     buttonVariant?: ButtonVariant;
     dataTestId?: string;
     disabled?: boolean;

package/src/lib/components/Button/Button.js

@@ -5,7 +5,7 @@ import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Spinner } from '../Spinner/spinner.js';
 import { Typography } from '../Typography/Typography.js';
 
-const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant = 'primary', buttonRounded, children, feedback, expanded, dataTestId, disabled = false, loading = false, onClick, type, startSlot, endSlot, typographyProps = {
+const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant = 'primary', children, feedback, expanded, dataTestId, disabled = false, loading = false, onClick, type, startSlot, endSlot, typographyProps = {
     variant: 'button_primary',
 }, }) => {
     const [internalButtonLoading, setInternalButtonLoading] = useState(false);
@@ -21,15 +21,10 @@ const Button = ({ buttonClassName = '', buttonPadding = 'medium', buttonVariant
         none: 'button--padding-none',
         small: 'button--padding-small',
     };
-    const buttonRoundedClassNameMap = {
-        default: 'button--rounded',
-        medium: 'button--rounded--medium',
-        small: 'button--rounded--small',
-    };
     const buttonEffectiveClassName = classNames('button', {
         'button--expanded': Boolean(expanded),
         'button--loading': Boolean(loading),
-    }, buttonPadding ? buttonPaddingClassNameMap[buttonPadding] : '', buttonVariant ? buttonVariantClassNameMap[buttonVariant] : '', buttonRounded ? buttonRoundedClassNameMap[buttonRounded] : '', buttonClassName);
+    }, buttonPadding ? buttonPaddingClassNameMap[buttonPadding] : '', buttonVariant ? buttonVariantClassNameMap[buttonVariant] : '', buttonClassName);
     const handleClick = (e) => __awaiter(void 0, void 0, void 0, function* () {
         if (onClick) {
             const onClickResult = onClick(e);

package/src/lib/components/CopyButton/CopyButton.cjs

@@ -7,12 +7,10 @@ var React = require('react');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var TextButton = require('../TextButton/TextButton.cjs');
 var Tooltip = require('../Tooltip/Tooltip.cjs');
-var Typography = require('../Typography/Typography.cjs');
 
 const CopyButton = ({ children, className = '', textToCopy, onClick, }) => {
     const [hover, setHover] = React.useState(false);
     const [copied, setCopied] = React.useState(false);
-    const CopyTooltip = (jsxRuntime.jsx(Typography.Typography, { variant: 'numbers_small', color: 'tooltip', children: copied ? 'Copied' : 'Copy' }));
     React.useEffect(() => {
         const timeout = setTimeout(() => {
             /* istanbul ignore else */
@@ -27,7 +25,7 @@ const CopyButton = ({ children, className = '', textToCopy, onClick, }) => {
         setCopied(true);
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (jsxRuntime.jsx(TextButton.TextButton, { className: classNames.classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: jsxRuntime.jsx(Tooltip.Tooltip, { content: CopyTooltip, children: children }) }));
+    return (jsxRuntime.jsx(TextButton.TextButton, { className: classNames.classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: jsxRuntime.jsx(Tooltip.Tooltip, { className: 'copy-button__tooltip', content: copied ? 'Copied' : 'Copy', children: children }) }));
 };
 
 exports.CopyButton = CopyButton;

package/src/lib/components/CopyButton/CopyButton.js

@@ -3,12 +3,10 @@ import { useState, useEffect } from 'react';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { TextButton } from '../TextButton/TextButton.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
-import { Typography } from '../Typography/Typography.js';
 
 const CopyButton = ({ children, className = '', textToCopy, onClick, }) => {
     const [hover, setHover] = useState(false);
     const [copied, setCopied] = useState(false);
-    const CopyTooltip = (jsx(Typography, { variant: 'numbers_small', color: 'tooltip', children: copied ? 'Copied' : 'Copy' }));
     useEffect(() => {
         const timeout = setTimeout(() => {
             /* istanbul ignore else */
@@ -23,7 +21,7 @@ const CopyButton = ({ children, className = '', textToCopy, onClick, }) => {
         setCopied(true);
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
-    return (jsx(TextButton, { className: classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: jsx(Tooltip, { content: CopyTooltip, children: children }) }));
+    return (jsx(TextButton, { className: classNames('copy-button__container', className), onClick: () => copyToClipboard(), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: jsx(Tooltip, { className: 'copy-button__tooltip', content: copied ? 'Copied' : 'Copy', children: children }) }));
 };
 
 export { CopyButton };

package/src/lib/components/DynamicFooter/DynamicFooter.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
+
+const DynamicFooter = () => (jsxRuntime.jsx("div", { className: 'dynamic-footer', children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) }));
+
+exports.DynamicFooter = DynamicFooter;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DynamicFooter: () => JSX.Element;

package/src/lib/components/DynamicFooter/DynamicFooter.js

@@ -0,0 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
+
+const DynamicFooter = () => (jsx("div", { className: 'dynamic-footer', children: jsx(PoweredByDynamic, {}) }));
+
+export { DynamicFooter };

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

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

package/src/lib/components/LogoutButton/LogoutButton.cjs

@@ -35,7 +35,7 @@ const LogoutButton = ({ buttonClassName = '', isTextButton = false, }) => {
             setLoading(false);
         }
     });
-    return (jsxRuntime.jsx(Button.Button, { buttonClassName: buttonClassName, buttonVariant: 'tertiary', buttonRounded: 'small', buttonPadding: isTextButton ? 'none' : 'medium', loading: loading, disabled: loading, onClick: onLogOutClick, typographyProps: isTextButton
+    return (jsxRuntime.jsx(Button.Button, { buttonClassName: buttonClassName, buttonVariant: 'tertiary', buttonPadding: isTextButton ? 'none' : 'medium', loading: loading, disabled: loading, onClick: onLogOutClick, typographyProps: isTextButton
             ? { color: 'secondary', variant: 'button_tertiary' }
             : { color: 'primary', variant: 'button_secondary' }, dataTestId: 'logout-button', startSlot: isTextButton ? jsxRuntime.jsx(logout.ReactComponent, {}) : undefined, expanded: !isTextButton, type: 'button', children: "Log out" }));
 };

package/src/lib/components/LogoutButton/LogoutButton.js

@@ -31,7 +31,7 @@ const LogoutButton = ({ buttonClassName = '', isTextButton = false, }) => {
             setLoading(false);
         }
     });
-    return (jsx(Button, { buttonClassName: buttonClassName, buttonVariant: 'tertiary', buttonRounded: 'small', buttonPadding: isTextButton ? 'none' : 'medium', loading: loading, disabled: loading, onClick: onLogOutClick, typographyProps: isTextButton
+    return (jsx(Button, { buttonClassName: buttonClassName, buttonVariant: 'tertiary', buttonPadding: isTextButton ? 'none' : 'medium', loading: loading, disabled: loading, onClick: onLogOutClick, typographyProps: isTextButton
             ? { color: 'secondary', variant: 'button_tertiary' }
             : { color: 'primary', variant: 'button_secondary' }, dataTestId: 'logout-button', startSlot: isTextButton ? jsx(SvgLogout, {}) : undefined, expanded: !isTextButton, type: 'button', children: "Log out" }));
 };

package/src/lib/components/ModalHeader/ModalHeader.cjs

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
 
-const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, style, }) => (jsxRuntime.jsxs("div", { className: classNames.classNames('modal-header', {
-        'modal-header--absolute': positionAbsolute,
+const ModalHeader = ({ alignContent, children, leading, displayLeading = true, trailing, displayTrailing = true, style, displayBorder, }) => (jsxRuntime.jsxs("div", { className: classNames.classNames('modal-header', {
         'modal-header--align-content-bottom': alignContent === 'bottom',
-    }), style: style, children: [jsxRuntime.jsx("div", { className: 'modal-header__leading', children: leading }), children, jsxRuntime.jsx("div", { className: 'modal-header__trailing', children: trailing })] }));
+        'modal-header--border': displayBorder,
+    }), style: style, children: [displayLeading && jsxRuntime.jsx("div", { className: 'modal-header__leading', children: leading }), children, displayTrailing && (jsxRuntime.jsx("div", { className: 'modal-header__trailing', children: trailing }))] }));
 
 exports.ModalHeader = ModalHeader;

package/src/lib/components/ModalHeader/ModalHeader.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
 
-const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, style, }) => (jsxs("div", { className: classNames('modal-header', {
-        'modal-header--absolute': positionAbsolute,
+const ModalHeader = ({ alignContent, children, leading, displayLeading = true, trailing, displayTrailing = true, style, displayBorder, }) => (jsxs("div", { className: classNames('modal-header', {
         'modal-header--align-content-bottom': alignContent === 'bottom',
-    }), style: style, children: [jsx("div", { className: 'modal-header__leading', children: leading }), children, jsx("div", { className: 'modal-header__trailing', children: trailing })] }));
+        'modal-header--border': displayBorder,
+    }), style: style, children: [displayLeading && jsx("div", { className: 'modal-header__leading', children: leading }), children, displayTrailing && (jsx("div", { className: 'modal-header__trailing', children: trailing }))] }));
 
 export { ModalHeader };

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

@@ -3,8 +3,11 @@ export type ModalHeaderProps = {
     alignContent?: 'bottom';
     children?: ReactNode;
     leading?: ReactElement | ReactElement[];
+    displayLeading?: boolean;
     positionAbsolute?: boolean;
     trailing?: ReactNode;
+    displayTrailing?: boolean;
     style?: CSSProperties;
+    displayBorder?: boolean;
 };
 export type ModalHeaderComponent = (props: ModalHeaderProps) => ReactElement;

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

@@ -10,7 +10,6 @@ require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
-var close = require('../../shared/assets/close.cjs');
 var chevronLeft = require('../../shared/assets/chevron-left.cjs');
 var check = require('../../shared/assets/check.cjs');
 var pencilAltIcon = require('../../shared/assets/pencil-alt-icon.cjs');
@@ -25,6 +24,7 @@ require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var Icon = require('../Icon/Icon.cjs');
 require('react-dom');
 require('react-focus-lock');
@@ -60,7 +60,6 @@ require('formik');
 require('yup');
 var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
 var IconButton = require('../IconButton/IconButton.cjs');
-var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
 require('../Alert/Alert.cjs');
 var PinField = require('../PinField/PinField.cjs');
 var ModalHeaderBanner = require('../ModalHeaderBanner/ModalHeaderBanner.cjs');
@@ -70,14 +69,17 @@ require('../Popper/PopperContext/PopperContext.cjs');
 require('../InlineWidget/InlineWidget.cjs');
 require('../MenuList/Dropdown/Dropdown.cjs');
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, successBannerText, }) => {
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, successBannerText, }) => {
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
-    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickClose, type: 'button', "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const EmailIcon = React.useMemo(() => {
         const EmailIcon = (props) => (jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(signInWithEmail.ReactComponent, Object.assign({}, props, { "data-testid": 'sign-in-with-email-icon' })) }));
         return EmailIcon;
     }, []);
-    return (jsxRuntime.jsxs("div", { className: 'otp-verification-view', children: [successBannerText && (jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'notice', message: successBannerText, disableTruncate: true })), jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, trailing: onClickClose && closeButton, children: jsxRuntime.jsxs("div", { className: 'otp-verification-view__status-header', children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: EmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: EmailIcon, iconSize: 80, isSpinning: isLoading, treatAsFunctionComponent: true }))] }) }), jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid ? 'Verification code confirmed' : 'Confirm verification code' }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Hang tight while we get things ready for you" })), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail.shortenEmail(email) }), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) }) }))] })] }))] }), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsx("div", { className: 'otp-verification-view__footer', children: displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, children: jsxRuntime.jsx("div", { className: 'otp-verification-view__status-header', children: jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid
+                            ? 'Verification code confirmed'
+                            : 'Confirm verification code' }) }) }), successBannerText && (jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'notice', message: successBannerText, disableTruncate: true })), jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsxs("div", { className: classNames.classNames('otp-verification-view', {
+                    'otp-verification-view--message': Boolean(successBannerText || error),
+                }), children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: EmailIcon, iconSize: 96, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: EmailIcon, iconSize: 96, isSpinning: isLoading, className: 'otp-verification-view__icon-with-spinner', treatAsFunctionComponent: true })), jsxRuntime.jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Hang tight while we get things ready for you" })), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxRuntime.jsxs("div", { className: 'otp-verification-view__email-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail.shortenEmail(email) }), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsxRuntime.jsx(Icon.Icon, { color: 'text-tertiary', children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) }) }))] })] }))] }), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange })] })] }));
 };
 
 exports.OTPVerificationView = OTPVerificationView;

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

@@ -1,12 +1,10 @@
 import { FC, MouseEventHandler } from 'react';
 type OtpVerificationLayoutProps = {
-    displayPoweredByDynamic?: boolean;
     email: string;
     error?: Error;
     isLoading: boolean;
     isValid: boolean;
     onClickBack?: MouseEventHandler<HTMLButtonElement>;
-    onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onClickEditEmail?: MouseEventHandler<HTMLButtonElement>;
     onPinChange?: (value: string) => void;
     onPinComplete: (value: string) => void;

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

@@ -6,7 +6,6 @@ import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
-import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
 import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
 import { ReactComponent as SvgPencilAltIcon } from '../../shared/assets/pencil-alt-icon.js';
@@ -21,6 +20,7 @@ import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import '../ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Icon } from '../Icon/Icon.js';
 import 'react-dom';
 import 'react-focus-lock';
@@ -56,7 +56,6 @@ import 'formik';
 import 'yup';
 import { ModalHeader } from '../ModalHeader/ModalHeader.js';
 import { IconButton } from '../IconButton/IconButton.js';
-import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
 import '../Alert/Alert.js';
 import { PinField } from '../PinField/PinField.js';
 import { ModalHeaderBanner } from '../ModalHeaderBanner/ModalHeaderBanner.js';
@@ -66,14 +65,17 @@ import '../Popper/PopperContext/PopperContext.js';
 import '../InlineWidget/InlineWidget.js';
 import '../MenuList/Dropdown/Dropdown.js';
 
-const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, onClickClose, displayPoweredByDynamic = false, successBannerText, }) => {
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, onPinChange, successBannerText, }) => {
     const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
-    const closeButton = (jsx(IconButton, { onClick: onClickClose, type: 'button', "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
     const EmailIcon = useMemo(() => {
         const EmailIcon = (props) => (jsx(Icon, { color: 'brand-primary', children: jsx(SvgSignInWithEmail, Object.assign({}, props, { "data-testid": 'sign-in-with-email-icon' })) }));
         return EmailIcon;
     }, []);
-    return (jsxs("div", { className: 'otp-verification-view', children: [successBannerText && (jsx(ModalHeaderBanner, { type: 'notice', message: successBannerText, disableTruncate: true })), jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, trailing: onClickClose && closeButton, children: jsxs("div", { className: 'otp-verification-view__status-header', children: [isValid && (jsx(IconWithStatus, { Icon: EmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: EmailIcon, iconSize: 80, isSpinning: isLoading, treatAsFunctionComponent: true }))] }) }), jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid ? 'Verification code confirmed' : 'Confirm verification code' }), jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Hang tight while we get things ready for you" })), !isValid && (jsxs(Fragment, { children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxs("div", { className: 'otp-verification-view__email-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail(email) }), onClickEditEmail && (jsx(IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsx(Icon, { color: 'text-tertiary', children: jsx(SvgPencilAltIcon, {}) }) }))] })] }))] }), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsx("div", { className: 'otp-verification-view__footer', children: displayPoweredByDynamic && jsx(PoweredByDynamic, {}) })] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { alignContent: 'bottom', leading: onClickBack && backButton, children: jsx("div", { className: 'otp-verification-view__status-header', children: jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title', children: isValid
+                            ? 'Verification code confirmed'
+                            : 'Confirm verification code' }) }) }), successBannerText && (jsx(ModalHeaderBanner, { type: 'notice', message: successBannerText, disableTruncate: true })), jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxs("div", { className: classNames('otp-verification-view', {
+                    'otp-verification-view--message': Boolean(successBannerText || error),
+                }), children: [isValid && (jsx(IconWithStatus, { Icon: EmailIcon, iconSize: 96, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: EmailIcon, iconSize: 96, isSpinning: isLoading, className: 'otp-verification-view__icon-with-spinner', treatAsFunctionComponent: true })), jsxs("div", { className: 'otp-verification-view__body', children: [isValid && (jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "Hang tight while we get things ready for you" })), !isValid && (jsxs(Fragment, { children: [jsx(Typography, { variant: 'body_normal', weight: 'regular', color: 'secondary', children: "We\u2019ve sent a verification code to" }), jsxs("div", { className: 'otp-verification-view__email-container', children: [jsx(Typography, { variant: 'body_normal', weight: 'bold', color: 'secondary', children: shortenEmail(email) }), onClickEditEmail && (jsx(IconButton, { onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button', children: jsx(Icon, { color: 'text-tertiary', children: jsx(SvgPencilAltIcon, {}) }) }))] })] }))] }), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange })] })] }));
 };
 
 export { OTPVerificationView };

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

@@ -21,7 +21,7 @@ const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, clas
     if (((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.displayDynamicMessaging) === false) {
         return null;
     }
-    const content = (jsxRuntime.jsxs("a", { target: '_blank', href: URL, className: classNames.classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer', children: [jsxRuntime.jsx(Typography.Typography, { 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 content = (jsxRuntime.jsxs("a", { target: '_blank', href: URL, className: classNames.classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer', children: [jsxRuntime.jsx(Typography.Typography, { as: 'span', color: 'tertiary', 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) })] }));
     if (asFooter)
         return jsxRuntime.jsx(DynamicWidgetFooter.DynamicWidgetFooter, { children: content });
     return content;

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

@@ -17,7 +17,7 @@ const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, clas
     if (((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.displayDynamicMessaging) === false) {
         return null;
     }
-    const content = (jsxs("a", { target: '_blank', href: URL, className: classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer', children: [jsx(Typography, { 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 content = (jsxs("a", { target: '_blank', href: URL, className: classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer', children: [jsx(Typography, { as: 'span', color: 'tertiary', weight: 'regular', variant: 'body_mini', className: classNames('powered-by-dynamic__text', classNameText), children: "Powered by" }), jsx(SvgDynamicLogo, { className: classNames('powered-by-dynamic__logo', classNameLogo) })] }));
     if (asFooter)
         return jsx(DynamicWidgetFooter, { children: content });
     return content;

package/src/lib/components/SelectNetworkButton/SelectNetworkButton.cjs

@@ -7,7 +7,7 @@ var Button = require('../Button/Button.cjs');
 
 const SelectNetworkButton = ({ networkId, networkName, networkIconUrl, onClick, }) => {
     const networkImage = (jsxRuntime.jsx("img", { alt: networkName, className: 'select-network-button__icon', src: networkIconUrl }));
-    return (jsxRuntime.jsxs(Button.Button, { dataTestId: 'SelectNetworkButton', onClick: () => onClick(networkId), buttonRounded: 'default', expanded: true, className: 'select-network-button', children: ["Select", networkImage, networkName, " network"] }));
+    return (jsxRuntime.jsxs(Button.Button, { dataTestId: 'SelectNetworkButton', onClick: () => onClick(networkId), expanded: true, className: 'select-network-button', children: ["Select", networkImage, networkName, " network"] }));
 };
 
 exports.SelectNetworkButton = SelectNetworkButton;

package/src/lib/components/SelectNetworkButton/SelectNetworkButton.js

@@ -3,7 +3,7 @@ import { Button } from '../Button/Button.js';
 
 const SelectNetworkButton = ({ networkId, networkName, networkIconUrl, onClick, }) => {
     const networkImage = (jsx("img", { alt: networkName, className: 'select-network-button__icon', src: networkIconUrl }));
-    return (jsxs(Button, { dataTestId: 'SelectNetworkButton', onClick: () => onClick(networkId), buttonRounded: 'default', expanded: true, className: 'select-network-button', children: ["Select", networkImage, networkName, " network"] }));
+    return (jsxs(Button, { dataTestId: 'SelectNetworkButton', onClick: () => onClick(networkId), expanded: true, className: 'select-network-button', children: ["Select", networkImage, networkName, " network"] }));
 };
 
 export { SelectNetworkButton };

package/src/lib/components/SelectWalletChainLayout/SelectWalletChainLayout.cjs

@@ -5,8 +5,7 @@ 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 }), jsxRuntime.jsxs("div", { className: 'select-wallet-chain-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title', children: "Select Chain" }), jsxRuntime.jsx(Typography.Typography, { 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", { className: 'select-wallet-chain-layout__list', children: children })] }), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'select-wallet-chain-layout__powered-by' })] }));
+const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxRuntime.jsxs("div", { className: 'select-wallet-chain-layout__container', children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 96 }), jsxRuntime.jsxs("div", { className: 'select-wallet-chain-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { 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", { className: 'select-wallet-chain-layout__list', children: children })] })] }));
 
 exports.SelectWalletChainLayout = SelectWalletChainLayout;

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

@@ -1,8 +1,7 @@
 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 }), jsxs("div", { className: 'select-wallet-chain-layout__body', children: [jsx(Typography, { className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title', children: "Select Chain" }), jsx(Typography, { 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", { className: 'select-wallet-chain-layout__list', children: children })] }), jsx(PoweredByDynamic, { classNameRoot: 'select-wallet-chain-layout__powered-by' })] }));
+const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxs("div", { className: 'select-wallet-chain-layout__container', children: [jsx(IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 96 }), jsxs("div", { className: 'select-wallet-chain-layout__body', children: [jsx(Typography, { 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", { className: 'select-wallet-chain-layout__list', children: children })] })] }));
 
 export { SelectWalletChainLayout };

package/src/lib/components/SendBalanceForm/SendBalanceForm.cjs

@@ -75,7 +75,7 @@ const SendBalanceForm = ({ initialValues, onSubmit, balance, decimals = 18, }) =
     }, [balance, decimals]);
     return (jsxRuntime.jsx(formik.Formik, { initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false, children: ({ errors, touched }) => (jsxRuntime.jsxs(formik.Form, { className: 'send-balance-form', children: [jsxRuntime.jsx(formik.Field, { variant: 'regular', className: 'send-balance-form__field', name: 'amount', label: 'Amount', placeholder: 'Select amount', as: Input.Input, error: errors['amount'], message: touched['amount'] &&
                         getDisplayErrorMessage(errors, 'amount', decimals) }), jsxRuntime.jsx(formik.Field, { variant: 'regular', className: 'send-balance-form__field', placeholder: 'Enter wallet address...', label: 'Recipient', id: 'recipient', name: 'recipient', as: Input.Input, error: errors['recipient'], message: touched['recipient'] &&
-                        getDisplayErrorMessage(errors, 'recipient') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default', buttonClassName: 'send-balance-form__button', children: "Send now" })] })) }));
+                        getDisplayErrorMessage(errors, 'recipient') }), jsxRuntime.jsx(Button.Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonClassName: 'send-balance-form__button', children: "Send now" })] })) }));
 };
 
 exports.SendBalanceForm = SendBalanceForm;

package/src/lib/components/SendBalanceForm/SendBalanceForm.js

@@ -71,7 +71,7 @@ const SendBalanceForm = ({ initialValues, onSubmit, balance, decimals = 18, }) =
     }, [balance, decimals]);
     return (jsx(Formik, { initialValues: initialValues || sendBalanceFormInitialValues, validationSchema: sendBalanceFormValidationSchema, onSubmit: (values) => onSubmit(values), validateOnChange: false, validateOnBlur: false, children: ({ errors, touched }) => (jsxs(Form, { className: 'send-balance-form', children: [jsx(Field, { variant: 'regular', className: 'send-balance-form__field', name: 'amount', label: 'Amount', placeholder: 'Select amount', as: Input, error: errors['amount'], message: touched['amount'] &&
                         getDisplayErrorMessage(errors, 'amount', decimals) }), jsx(Field, { variant: 'regular', className: 'send-balance-form__field', placeholder: 'Enter wallet address...', label: 'Recipient', id: 'recipient', name: 'recipient', as: Input, error: errors['recipient'], message: touched['recipient'] &&
-                        getDisplayErrorMessage(errors, 'recipient') }), jsx(Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonRounded: 'default', buttonClassName: 'send-balance-form__button', children: "Send now" })] })) }));
+                        getDisplayErrorMessage(errors, 'recipient') }), jsx(Button, { dataTestId: 'sendBalanceFormSubmitButton', expanded: true, type: 'submit', buttonVariant: 'primary', buttonPadding: 'large', buttonClassName: 'send-balance-form__button', children: "Send now" })] })) }));
 };
 
 export { SendBalanceForm };

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

@@ -76,7 +76,7 @@ const Tooltip = ({ children, content, className, as: Tag = 'span', }) => {
             const childrenBounding = childrenRef.current.getBoundingClientRect();
             setVector([
                 childrenBounding.left + childrenBounding.width / 2,
-                childrenBounding.top - 4, //add 4px margin over the children
+                childrenBounding.top - 6, //add 6px margin over the children
             ]);
         }
     }, []);

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

@@ -72,7 +72,7 @@ const Tooltip = ({ children, content, className, as: Tag = 'span', }) => {
             const childrenBounding = childrenRef.current.getBoundingClientRect();
             setVector([
                 childrenBounding.left + childrenBounding.width / 2,
-                childrenBounding.top - 4, //add 4px margin over the children
+                childrenBounding.top - 6, //add 6px margin over the children
             ]);
         }
     }, []);

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

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