@dynamic-labs/sdk-react-core 0.19.0-alpha.7 → 0.19.0-alpha.9

package/src/lib/components/NetworkPicker/components/EvmNetworkControl/EvmNetworkControl.cjs

@@ -20,6 +20,7 @@ require('ethers');
 require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
+require('../../../../config/ApiEndpoint.cjs');
 require('../../../ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 var Icon = require('../../../Icon/Icon.cjs');
@@ -28,7 +29,6 @@ require('react-focus-lock');
 require('../../../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');

package/src/lib/components/NetworkPicker/components/EvmNetworkControl/EvmNetworkControl.js

@@ -16,6 +16,7 @@ import 'ethers';
 import '../../../../shared/consts/index.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
+import '../../../../config/ApiEndpoint.js';
 import '../../../ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import { Icon } from '../../../Icon/Icon.js';
@@ -24,7 +25,6 @@ import 'react-focus-lock';
 import '../../../Transition/ZoomTransition/ZoomTransition.js';
 import '../../../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../Transition/OpacityTransition/OpacityTransition.js';
-import '../../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../../context/ErrorContext/ErrorContext.js';

package/src/lib/components/NetworkPicker/components/Network/Network.cjs

@@ -20,6 +20,7 @@ require('ethers');
 require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
+require('../../../../config/ApiEndpoint.cjs');
 require('../../../ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
@@ -28,7 +29,6 @@ require('react-focus-lock');
 require('../../../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');

package/src/lib/components/NetworkPicker/components/Network/Network.js

@@ -16,6 +16,7 @@ import 'ethers';
 import '../../../../shared/consts/index.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
+import '../../../../config/ApiEndpoint.js';
 import '../../../ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
@@ -24,7 +25,6 @@ import 'react-focus-lock';
 import '../../../Transition/ZoomTransition/ZoomTransition.js';
 import '../../../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../Transition/OpacityTransition/OpacityTransition.js';
-import '../../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../../context/ErrorContext/ErrorContext.js';

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

@@ -19,6 +19,7 @@ require('../../../../context/ViewContext/ViewContext.cjs');
 require('../../../../shared/consts/index.cjs');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
+require('../../../../config/ApiEndpoint.cjs');
 require('../../../ShadowDOM/ShadowDOM.cjs');
 require('../../../../context/ThemeContext/ThemeContext.cjs');
 var classNames = require('../../../../utils/functions/classNames/classNames.cjs');
@@ -28,7 +29,6 @@ require('react-focus-lock');
 require('../../../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../../Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../../../context/ErrorContext/ErrorContext.cjs');

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

@@ -15,6 +15,7 @@ import '../../../../context/ViewContext/ViewContext.js';
 import '../../../../shared/consts/index.js';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
+import '../../../../config/ApiEndpoint.js';
 import '../../../ShadowDOM/ShadowDOM.js';
 import '../../../../context/ThemeContext/ThemeContext.js';
 import { classNames } from '../../../../utils/functions/classNames/classNames.js';
@@ -24,7 +25,6 @@ import 'react-focus-lock';
 import '../../../Transition/ZoomTransition/ZoomTransition.js';
 import '../../../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../../Transition/OpacityTransition/OpacityTransition.js';
-import '../../../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../../../context/ErrorContext/ErrorContext.js';

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

@@ -23,6 +23,7 @@ require('ethers');
 require('../../shared/consts/index.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
+require('../../config/ApiEndpoint.cjs');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('../../context/ThemeContext/ThemeContext.cjs');
 var Icon = require('../Icon/Icon.cjs');
@@ -31,7 +32,6 @@ require('react-focus-lock');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
 require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../Transition/OpacityTransition/OpacityTransition.cjs');
-require('../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/rpc-providers');
 require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');

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

@@ -19,6 +19,7 @@ import 'ethers';
 import '../../shared/consts/index.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
+import '../../config/ApiEndpoint.js';
 import '../ShadowDOM/ShadowDOM.js';
 import '../../context/ThemeContext/ThemeContext.js';
 import { Icon } from '../Icon/Icon.js';
@@ -27,7 +28,6 @@ import 'react-focus-lock';
 import '../Transition/ZoomTransition/ZoomTransition.js';
 import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../Transition/OpacityTransition/OpacityTransition.js';
-import '../../config/ApiEndpoint.js';
 import '@dynamic-labs/rpc-providers';
 import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';

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

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

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

@@ -14,6 +14,6 @@ export type SendBalancePageLayoutProps = {
     onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onSubmit: (formValues: SendBalanceFormValues) => void;
     walletAddress: string;
-    walletName: string;
+    walletKey: string;
 };
 export declare const SendBalancePageLayout: FC<SendBalancePageLayoutProps>;

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

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

package/src/lib/components/SignMessagePreview/SignMessagePreview.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Typography = require('../Typography/Typography.cjs');
+var isSignTypedData = require('./utils/isSignTypedData/isSignTypedData.cjs');
+var SignTypedDataPreview = require('./components/SignTypedDataPreview/SignTypedDataPreview.cjs');
+
+const SignMessagePreview = ({ message, }) => {
+    const signTypedData = React.useMemo(() => {
+        try {
+            const json = JSON.parse(message);
+            return isSignTypedData.isSignTypedData(json) ? json : undefined;
+        }
+        catch (e) {
+            return undefined;
+        }
+    }, [message]);
+    if (signTypedData) {
+        return (jsxRuntime.jsx(SignTypedDataPreview.SignTypedDataPreview, { currentType: signTypedData.primaryType, types: signTypedData.types, showTypeName: true, data: signTypedData.message }));
+    }
+    return (jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_normal' }, { children: jsxRuntime.jsx("span", { style: { whiteSpace: 'pre-line' }, dangerouslySetInnerHTML: { __html: message } }) })));
+};
+
+exports.SignMessagePreview = SignMessagePreview;

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+type SignMessagePreviewProps = {
+    message: string;
+};
+export declare const SignMessagePreview: FC<SignMessagePreviewProps>;
+export {};

package/src/lib/components/SignMessagePreview/SignMessagePreview.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Typography } from '../Typography/Typography.js';
+import { isSignTypedData } from './utils/isSignTypedData/isSignTypedData.js';
+import { SignTypedDataPreview } from './components/SignTypedDataPreview/SignTypedDataPreview.js';
+
+const SignMessagePreview = ({ message, }) => {
+    const signTypedData = useMemo(() => {
+        try {
+            const json = JSON.parse(message);
+            return isSignTypedData(json) ? json : undefined;
+        }
+        catch (e) {
+            return undefined;
+        }
+    }, [message]);
+    if (signTypedData) {
+        return (jsx(SignTypedDataPreview, { currentType: signTypedData.primaryType, types: signTypedData.types, showTypeName: true, data: signTypedData.message }));
+    }
+    return (jsx(Typography, Object.assign({ color: 'primary', variant: 'body_normal' }, { children: jsx("span", { style: { whiteSpace: 'pre-line' }, dangerouslySetInnerHTML: { __html: message } }) })));
+};
+
+export { SignMessagePreview };

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

@@ -0,0 +1,8 @@
+type Types = Record<string, any>;
+type Message = Record<string, any>;
+export type SignTypedData = {
+    types: Types;
+    message: Message;
+    primaryType: string;
+};
+export {};

package/src/lib/components/SignMessagePreview/components/SignTypedDataPreview/SignTypedDataPreview.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../../../Typography/Typography.cjs');
+var capitalize = require('../../../../shared/utils/functions/capitalize/capitalize.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('react');
+require('@dynamic-labs/wallet-book');
+var shortenWalletAddress = require('../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('../../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../../shared/consts/index.cjs');
+
+const TypeTitle = ({ children }) => (jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', weight: 'medium' }, { children: children })));
+const AttributeName = TypeTitle;
+const AttributeValue = ({ children, title, }) => (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', weight: 'regular', color: 'primary', title: title }, { children: children })));
+const SignTypedDataPreview = ({ currentType, types, showTypeName = false, data }) => {
+    const fields = types[currentType].map((field) => {
+        const { type } = field;
+        const isKnownType = type in types;
+        if (isKnownType) {
+            return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(TypeTitle, { children: capitalize.capitalize(field.name) }), jsxRuntime.jsx("div", Object.assign({ className: 'sign-typed-data-preview--type-container' }, { children: jsxRuntime.jsx(SignTypedDataPreview, { currentType: type, types: types, data: data === null || data === void 0 ? void 0 : data[field.name] }) }))] }, field.name));
+        }
+        const fieldData = data === null || data === void 0 ? void 0 : data[field.name];
+        const fieldType = field.type;
+        return (jsxRuntime.jsxs("div", Object.assign({ className: 'sign-typed-data-preview--attribute-row' }, { children: [jsxRuntime.jsxs(AttributeName, { children: [capitalize.capitalize(field.name), ": "] }), jsxRuntime.jsx(AttributeValue, Object.assign({ title: fieldData }, { children: fieldType === 'address'
+                        ? shortenWalletAddress.shortenWalletAddress(fieldData, 4, 4)
+                        : fieldData }))] }), field.name));
+    });
+    if (showTypeName) {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TypeTitle, { children: currentType }), jsxRuntime.jsx("div", Object.assign({ className: 'sign-typed-data-preview--type-container' }, { children: fields }))] }));
+    }
+    return jsxRuntime.jsx("div", Object.assign({ className: 'sign-typed-data-preview--fields-list' }, { children: fields }));
+};
+
+exports.SignTypedDataPreview = SignTypedDataPreview;

package/src/lib/components/SignMessagePreview/components/SignTypedDataPreview/SignTypedDataPreview.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { SignTypedData } from '../../SignMessagePreview.types';
+export declare const SignTypedDataPreview: FC<{
+    types: SignTypedData['types'];
+    currentType: string;
+    data: SignTypedData['message'];
+    showTypeName?: boolean;
+}>;

package/src/lib/components/SignMessagePreview/components/SignTypedDataPreview/SignTypedDataPreview.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Typography } from '../../../Typography/Typography.js';
+import { capitalize } from '../../../../shared/utils/functions/capitalize/capitalize.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../../../context/ViewContext/ViewContext.js';
+import 'react';
+import '@dynamic-labs/wallet-book';
+import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import '../../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../../shared/consts/index.js';
+
+const TypeTitle = ({ children }) => (jsx(Typography, Object.assign({ color: 'secondary', weight: 'medium' }, { children: children })));
+const AttributeName = TypeTitle;
+const AttributeValue = ({ children, title, }) => (jsx(Typography, Object.assign({ as: 'span', weight: 'regular', color: 'primary', title: title }, { children: children })));
+const SignTypedDataPreview = ({ currentType, types, showTypeName = false, data }) => {
+    const fields = types[currentType].map((field) => {
+        const { type } = field;
+        const isKnownType = type in types;
+        if (isKnownType) {
+            return (jsxs("div", { children: [jsx(TypeTitle, { children: capitalize(field.name) }), jsx("div", Object.assign({ className: 'sign-typed-data-preview--type-container' }, { children: jsx(SignTypedDataPreview, { currentType: type, types: types, data: data === null || data === void 0 ? void 0 : data[field.name] }) }))] }, field.name));
+        }
+        const fieldData = data === null || data === void 0 ? void 0 : data[field.name];
+        const fieldType = field.type;
+        return (jsxs("div", Object.assign({ className: 'sign-typed-data-preview--attribute-row' }, { children: [jsxs(AttributeName, { children: [capitalize(field.name), ": "] }), jsx(AttributeValue, Object.assign({ title: fieldData }, { children: fieldType === 'address'
+                        ? shortenWalletAddress(fieldData, 4, 4)
+                        : fieldData }))] }), field.name));
+    });
+    if (showTypeName) {
+        return (jsxs(Fragment, { children: [jsx(TypeTitle, { children: currentType }), jsx("div", Object.assign({ className: 'sign-typed-data-preview--type-container' }, { children: fields }))] }));
+    }
+    return jsx("div", Object.assign({ className: 'sign-typed-data-preview--fields-list' }, { children: fields }));
+};
+
+export { SignTypedDataPreview };

package/src/lib/components/SignMessagePreview/components/SignTypedDataPreview/index.d.ts

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

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

@@ -0,0 +1 @@
+export * from './SignTypedDataPreview';

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

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

package/src/lib/components/SignMessagePreview/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './isSignTypedData';

package/src/lib/components/SignMessagePreview/utils/isSignTypedData/index.d.ts

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

package/src/lib/components/SignMessagePreview/utils/isSignTypedData/isSignTypedData.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isSignTypedData = (data) => {
+    if (typeof data !== 'object' || data === null) {
+        return false;
+    }
+    const { types, message, primaryType } = data;
+    return (typeof types === 'object' &&
+        types !== null &&
+        typeof message === 'object' &&
+        message !== null &&
+        typeof primaryType === 'string');
+};
+
+exports.isSignTypedData = isSignTypedData;

package/src/lib/components/SignMessagePreview/utils/isSignTypedData/isSignTypedData.d.ts

@@ -0,0 +1,2 @@
+import { SignTypedData } from '../../SignMessagePreview.types';
+export declare const isSignTypedData: (data: SignTypedData | unknown) => data is SignTypedData;

package/src/lib/components/SignMessagePreview/utils/isSignTypedData/isSignTypedData.js

@@ -0,0 +1,13 @@
+const isSignTypedData = (data) => {
+    if (typeof data !== 'object' || data === null) {
+        return false;
+    }
+    const { types, message, primaryType } = data;
+    return (typeof types === 'object' &&
+        types !== null &&
+        typeof message === 'object' &&
+        message !== null &&
+        typeof primaryType === 'string');
+};
+
+export { isSignTypedData };

package/src/lib/components/SocialSignIn/SocialSignIn.cjs

@@ -29,6 +29,7 @@ require('react-dom');
 var Typography = require('../Typography/Typography.cjs');
 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-focus-lock');
 require('../Transition/ZoomTransition/ZoomTransition.cjs');
@@ -58,29 +59,40 @@ require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs'
 require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 
 const MAX_INLINE_ITEMS = 5;
-const SocialSignIn = ({ providers, onClick, isLoading, setSelectedProvider, selectedProvider, testId, }) => {
+const SocialSignIn = ({ providers, onSelectProvider, isLoading, selectedProvider, testId, defaultProvider, numOfItemsToDisplay = 5, }) => {
     const iconThemeVariant = useIconThemeVariant.useIconThemeVariant();
     const [showCard, setShowCard] = React.useState(false);
     const closeCard = () => !isLoading && setShowCard(false);
     const numberOfEnabledSocialProviders = providers.length;
-    const showConnectText = numberOfEnabledSocialProviders === 1;
-    const showCardButton = numberOfEnabledSocialProviders > MAX_INLINE_ITEMS;
-    const socialProvidersToDisplayInline = showCardButton
-        ? providers.slice(0, 4)
-        : providers.slice(0, 5);
-    const numberOfSocialGridItems = numberOfEnabledSocialProviders + (showCardButton ? 1 : 0);
-    const onSelectProvider = (provider) => {
-        onClick(provider);
-        setSelectedProvider(provider);
-    };
+    if (numberOfEnabledSocialProviders === 1) {
+        // set first and only item in providers list as default provider
+        [defaultProvider] = providers;
+    }
+    else {
+        // put default provider at the beggini of the list
+        providers.sort((p1, p2) => (p1 === defaultProvider ? -1 : 0));
+    }
+    const defaultProviderOffset = defaultProvider ? 1 : 0;
+    // display number of items set in prop, with a max limit of MAX_INLINE_ITEMS
+    const numOfInlineItems = Math.min(numOfItemsToDisplay, MAX_INLINE_ITEMS);
+    // show card button if there are more providers than numOfInlineItems items, not counting the default provider
+    const showCardButton = numberOfEnabledSocialProviders - defaultProviderOffset > numOfInlineItems;
+    const cardButtonOffset = showCardButton ? 1 : 0;
+    // get providers to display inline
+    const socialProvidersToDisplayInline = providers.slice(defaultProviderOffset, defaultProviderOffset + numOfInlineItems - cardButtonOffset);
+    const numberOfSocialGridItems = numberOfEnabledSocialProviders + cardButtonOffset;
     const getProviderAsString = (provider) => provider;
     const closeButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: closeCard, type: 'button', id: 'close-button', disabled: isLoading, "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
-    const renderProviderItem = (provider, insideCard = false) => (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: insideCard ? `card-${provider}` : `inline-${provider}`, onClick: () => onSelectProvider(provider), disabled: Boolean(selectedProvider), className: insideCard ? 'social-sign-in--card--tile' : 'social-sign-in--tile' }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: 
+    const renderProviderItem = (provider, fullWidth = false, insideCard = false) => (jsxRuntime.jsxs(IconListTile.IconListTile, Object.assign({ dataTestId: insideCard ? `card-${provider}` : `inline-${provider}`, onClick: () => onSelectProvider(provider), disabled: Boolean(selectedProvider), className: classNames.classNames({
+            'social-sign-in--card--tile': insideCard,
+            'social-sign-in--tile': !insideCard,
+            'social-sign-in--tile__full-width': fullWidth,
+        }) }, { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
-                jsxRuntime.jsx(iconic.SocialIcon, { name: getProviderAsString(provider), variant: iconThemeVariant }), isSpinning: selectedProvider === provider, iconSize: 32 }), !insideCard && showConnectText && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with ", capitalize.capitalize(getProviderAsString(provider))] })))] }), getProviderAsString(provider)));
+                jsxRuntime.jsx(iconic.SocialIcon, { name: getProviderAsString(provider), variant: iconThemeVariant }), isSpinning: selectedProvider === provider, iconSize: 32 }), !insideCard && fullWidth && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with ", capitalize.capitalize(getProviderAsString(provider))] })))] }), getProviderAsString(provider)));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'social-sign-in', style: {
                     '--number-of-social-grid-items': numberOfSocialGridItems,
-                }, "data-testid": testId }, { children: [socialProvidersToDisplayInline.map((provider) => renderProviderItem(provider)), showCardButton && (jsxRuntime.jsx(IconListTile.IconListTile, Object.assign({ dataTestId: 'show-more-options', onClick: () => setShowCard(true) }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary' }, { children: jsxRuntime.jsx(dotsHorizontal.ReactComponent, {}) })) }), 'show-more-options'))] })), jsxRuntime.jsx(OverlayCard.OverlayCard, Object.assign({ isOpen: showCard, onClickOverlay: closeCard }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'social-sign-in--card' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: "Choose a social account" })) })), jsxRuntime.jsx("div", Object.assign({ className: 'social-sign-in--card--body' }, { children: providers.map((provider) => renderProviderItem(provider, true)) }))] })) }))] }));
+                }, "data-testid": testId }, { children: [defaultProvider && renderProviderItem(defaultProvider, true), socialProvidersToDisplayInline.map((provider) => renderProviderItem(provider, socialProvidersToDisplayInline.length < 2)), showCardButton && (jsxRuntime.jsx(IconListTile.IconListTile, Object.assign({ dataTestId: 'show-more-options', onClick: () => setShowCard(true), className: 'social-sign-in--tile' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-primary' }, { children: jsxRuntime.jsx(dotsHorizontal.ReactComponent, {}) })) }), 'show-more-options'))] })), jsxRuntime.jsx(OverlayCard.OverlayCard, Object.assign({ isOpen: showCard, onClickOverlay: closeCard }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'social-sign-in--card' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: "Choose a social account" })) })), jsxRuntime.jsx("div", Object.assign({ className: 'social-sign-in--card--body' }, { children: providers.map((provider) => renderProviderItem(provider, false, true)) }))] })) }))] }));
 };
 
 exports.SocialSignIn = SocialSignIn;

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
-type Props<T> = {
-    providers: T[];
-    onClick: (provider: T) => void;
+import { SocialSignInProviderEnum } from '@dynamic-labs/sdk-api';
+import { SocialSectionProps } from '../../views/LoginView/sections';
+interface Props extends SocialSectionProps {
+    providers: SocialSignInProviderEnum[];
+    onSelectProvider: (provider: SocialSignInProviderEnum) => void;
     isLoading?: boolean;
-    setSelectedProvider: (provider: T) => void;
-    selectedProvider?: T;
+    selectedProvider?: SocialSignInProviderEnum;
     testId?: string;
-};
-export declare const SocialSignIn: <T = number | typeof Symbol.iterator | "toString" | "charAt" | "charCodeAt" | "concat" | "indexOf" | "lastIndexOf" | "localeCompare" | "match" | "replace" | "search" | "slice" | "split" | "substring" | "toLowerCase" | "toLocaleLowerCase" | "toUpperCase" | "toLocaleUpperCase" | "trim" | "length" | "substr" | "valueOf" | "codePointAt" | "includes" | "endsWith" | "normalize" | "repeat" | "startsWith" | "anchor" | "big" | "blink" | "bold" | "fixed" | "fontcolor" | "fontsize" | "italics" | "link" | "small" | "strike" | "sub" | "sup" | "padStart" | "padEnd" | "trimEnd" | "trimStart" | "trimLeft" | "trimRight" | "matchAll" | "at">({ providers, onClick, isLoading, setSelectedProvider, selectedProvider, testId, }: Props<T>) => JSX.Element;
+}
+export declare const SocialSignIn: ({ providers, onSelectProvider, isLoading, selectedProvider, testId, defaultProvider, numOfItemsToDisplay, }: Props) => JSX.Element;
 export {};

package/src/lib/components/SocialSignIn/SocialSignIn.js

@@ -25,6 +25,7 @@ import 'react-dom';
 import { Typography } from '../Typography/Typography.js';
 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-focus-lock';
 import '../Transition/ZoomTransition/ZoomTransition.js';
@@ -54,29 +55,40 @@ import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
 import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 
 const MAX_INLINE_ITEMS = 5;
-const SocialSignIn = ({ providers, onClick, isLoading, setSelectedProvider, selectedProvider, testId, }) => {
+const SocialSignIn = ({ providers, onSelectProvider, isLoading, selectedProvider, testId, defaultProvider, numOfItemsToDisplay = 5, }) => {
     const iconThemeVariant = useIconThemeVariant();
     const [showCard, setShowCard] = useState(false);
     const closeCard = () => !isLoading && setShowCard(false);
     const numberOfEnabledSocialProviders = providers.length;
-    const showConnectText = numberOfEnabledSocialProviders === 1;
-    const showCardButton = numberOfEnabledSocialProviders > MAX_INLINE_ITEMS;
-    const socialProvidersToDisplayInline = showCardButton
-        ? providers.slice(0, 4)
-        : providers.slice(0, 5);
-    const numberOfSocialGridItems = numberOfEnabledSocialProviders + (showCardButton ? 1 : 0);
-    const onSelectProvider = (provider) => {
-        onClick(provider);
-        setSelectedProvider(provider);
-    };
+    if (numberOfEnabledSocialProviders === 1) {
+        // set first and only item in providers list as default provider
+        [defaultProvider] = providers;
+    }
+    else {
+        // put default provider at the beggini of the list
+        providers.sort((p1, p2) => (p1 === defaultProvider ? -1 : 0));
+    }
+    const defaultProviderOffset = defaultProvider ? 1 : 0;
+    // display number of items set in prop, with a max limit of MAX_INLINE_ITEMS
+    const numOfInlineItems = Math.min(numOfItemsToDisplay, MAX_INLINE_ITEMS);
+    // show card button if there are more providers than numOfInlineItems items, not counting the default provider
+    const showCardButton = numberOfEnabledSocialProviders - defaultProviderOffset > numOfInlineItems;
+    const cardButtonOffset = showCardButton ? 1 : 0;
+    // get providers to display inline
+    const socialProvidersToDisplayInline = providers.slice(defaultProviderOffset, defaultProviderOffset + numOfInlineItems - cardButtonOffset);
+    const numberOfSocialGridItems = numberOfEnabledSocialProviders + cardButtonOffset;
     const getProviderAsString = (provider) => provider;
     const closeButton = (jsx(IconButton, Object.assign({ onClick: closeCard, type: 'button', id: 'close-button', disabled: isLoading, "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
-    const renderProviderItem = (provider, insideCard = false) => (jsxs(IconListTile, Object.assign({ dataTestId: insideCard ? `card-${provider}` : `inline-${provider}`, onClick: () => onSelectProvider(provider), disabled: Boolean(selectedProvider), className: insideCard ? 'social-sign-in--card--tile' : 'social-sign-in--tile' }, { children: [jsx(IconWithSpinner, { Icon: 
+    const renderProviderItem = (provider, fullWidth = false, insideCard = false) => (jsxs(IconListTile, Object.assign({ dataTestId: insideCard ? `card-${provider}` : `inline-${provider}`, onClick: () => onSelectProvider(provider), disabled: Boolean(selectedProvider), className: classNames({
+            'social-sign-in--card--tile': insideCard,
+            'social-sign-in--tile': !insideCard,
+            'social-sign-in--tile__full-width': fullWidth,
+        }) }, { children: [jsx(IconWithSpinner, { Icon: 
                 // eslint-disable-next-line react/jsx-wrap-multilines
-                jsx(SocialIcon, { name: getProviderAsString(provider), variant: iconThemeVariant }), isSpinning: selectedProvider === provider, iconSize: 32 }), !insideCard && showConnectText && (jsxs(Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with ", capitalize(getProviderAsString(provider))] })))] }), getProviderAsString(provider)));
+                jsx(SocialIcon, { name: getProviderAsString(provider), variant: iconThemeVariant }), isSpinning: selectedProvider === provider, iconSize: 32 }), !insideCard && fullWidth && (jsxs(Typography, Object.assign({ variant: 'button_primary' }, { children: ["Connect with ", capitalize(getProviderAsString(provider))] })))] }), getProviderAsString(provider)));
     return (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'social-sign-in', style: {
                     '--number-of-social-grid-items': numberOfSocialGridItems,
-                }, "data-testid": testId }, { children: [socialProvidersToDisplayInline.map((provider) => renderProviderItem(provider)), showCardButton && (jsx(IconListTile, Object.assign({ dataTestId: 'show-more-options', onClick: () => setShowCard(true) }, { children: jsx(Icon, Object.assign({ color: 'text-primary' }, { children: jsx(SvgDotsHorizontal, {}) })) }), 'show-more-options'))] })), jsx(OverlayCard, Object.assign({ isOpen: showCard, onClickOverlay: closeCard }, { children: jsxs("div", Object.assign({ className: 'social-sign-in--card' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: "Choose a social account" })) })), jsx("div", Object.assign({ className: 'social-sign-in--card--body' }, { children: providers.map((provider) => renderProviderItem(provider, true)) }))] })) }))] }));
+                }, "data-testid": testId }, { children: [defaultProvider && renderProviderItem(defaultProvider, true), socialProvidersToDisplayInline.map((provider) => renderProviderItem(provider, socialProvidersToDisplayInline.length < 2)), showCardButton && (jsx(IconListTile, Object.assign({ dataTestId: 'show-more-options', onClick: () => setShowCard(true), className: 'social-sign-in--tile' }, { children: jsx(Icon, Object.assign({ color: 'text-primary' }, { children: jsx(SvgDotsHorizontal, {}) })) }), 'show-more-options'))] })), jsx(OverlayCard, Object.assign({ isOpen: showCard, onClickOverlay: closeCard }, { children: jsxs("div", Object.assign({ className: 'social-sign-in--card' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary', as: 'span' }, { children: "Choose a social account" })) })), jsx("div", Object.assign({ className: 'social-sign-in--card--body' }, { children: providers.map((provider) => renderProviderItem(provider, false, true)) }))] })) }))] }));
 };
 
 export { SocialSignIn };