@dynamic-labs/sdk-react-core 2.1.0-alpha.1 → 2.1.0-alpha.10

package/CHANGELOG.md

@@ -1,4 +1,83 @@
 
+## [2.1.0-alpha.10](https://github.com/dynamic-labs/DynamicAuth/compare/v2.1.0-alpha.9...v2.1.0-alpha.10) (2024-04-30)
+
+
+### Features
+
+* bump @coinbase/wallet-sdk to latest beta ([#5388](https://github.com/dynamic-labs/DynamicAuth/issues/5388)) ([9225546](https://github.com/dynamic-labs/DynamicAuth/commit/922554630ccf2ef98bc297521309918f922bc671))
+
+## [2.1.0-alpha.9](https://github.com/dynamic-labs/DynamicAuth/compare/v2.1.0-alpha.8...v2.1.0-alpha.9) (2024-04-30)
+
+
+### Features
+
+* headless create embedded wallet with optional passkey data parameter ([#5487](https://github.com/dynamic-labs/DynamicAuth/issues/5487)) ([891c3d7](https://github.com/dynamic-labs/DynamicAuth/commit/891c3d77a02a019140bcb8dd03b62b1afd69710e))
+
+## [2.1.0-alpha.8](https://github.com/dynamic-labs/DynamicAuth/compare/v2.1.0-alpha.7...v2.1.0-alpha.8) (2024-04-26)
+
+
+### Bug Fixes
+
+* display wallet tabs when linking a wallet ([#5491](https://github.com/dynamic-labs/DynamicAuth/issues/5491)) ([10fd6b4](https://github.com/dynamic-labs/DynamicAuth/commit/10fd6b4d9aec7596338c50e17f79f6be534cf2c1))
+* ensure zerodev viem client handles eth_accounts call ([#5477](https://github.com/dynamic-labs/DynamicAuth/issues/5477)) ([1132e1e](https://github.com/dynamic-labs/DynamicAuth/commit/1132e1e8655b58e81cb56789453ba56a059f52ec))
+* network with keplr ([#5485](https://github.com/dynamic-labs/DynamicAuth/issues/5485)) ([b86f2fc](https://github.com/dynamic-labs/DynamicAuth/commit/b86f2fce491f9752e80a86643916da9ac7fb9276))
+* refetch nameservice data and display properly ([#5476](https://github.com/dynamic-labs/DynamicAuth/issues/5476)) ([2aee798](https://github.com/dynamic-labs/DynamicAuth/commit/2aee798846f69496201bec7aa52e7ec1f370b7c3))
+* use embeddedWallet create response authToken in embeddedWalletCreated ([#5478](https://github.com/dynamic-labs/DynamicAuth/issues/5478)) ([51772da](https://github.com/dynamic-labs/DynamicAuth/commit/51772daf557a72984c757efd8301e2b510dc37f1))
+
+## [2.1.0-alpha.7](https://github.com/dynamic-labs/DynamicAuth/compare/v2.1.0-alpha.6...v2.1.0-alpha.7) (2024-04-25)
+
+
+### Bug Fixes
+
+* restore embedded wallet session iframe element conflict ([#5474](https://github.com/dynamic-labs/DynamicAuth/issues/5474)) ([c157477](https://github.com/dynamic-labs/DynamicAuth/commit/c157477ea126b3130b13b711796bdd06215e7af1))
+
+## [2.1.0-alpha.6](https://github.com/dynamic-labs/DynamicAuth/compare/v2.1.0-alpha.5...v2.1.0-alpha.6) (2024-04-24)
+
+
+### Bug Fixes
+
+* embedded wallets headless session control fixes ([#5469](https://github.com/dynamic-labs/DynamicAuth/issues/5469)) ([92e6c35](https://github.com/dynamic-labs/DynamicAuth/commit/92e6c359d2710fd4f5f5a6fedc4acf6c4bab78ba))
+
+## [2.1.0-alpha.5](https://github.com/dynamic-labs/DynamicAuth/compare/v2.1.0-alpha.4...v2.1.0-alpha.5) (2024-04-23)
+
+
+### Bug Fixes
+
+* get embedded wallet checking the wrong chain enum ([#5458](https://github.com/dynamic-labs/DynamicAuth/issues/5458)) ([ed1c523](https://github.com/dynamic-labs/DynamicAuth/commit/ed1c523ca14cd4d21c00181ab40802f876c02b80))
+
+## [2.1.0-alpha.4](https://github.com/dynamic-labs/DynamicAuth/compare/v2.1.0-alpha.3...v2.1.0-alpha.4) (2024-04-23)
+
+
+### Features
+
+* add email and sms to client auth module ([#5436](https://github.com/dynamic-labs/DynamicAuth/issues/5436)) ([5420476](https://github.com/dynamic-labs/DynamicAuth/commit/5420476d1ba38fd4f987f28e9aefbfb3e61ea2bf))
+* headless create passkeys for embedded wallets ([#5395](https://github.com/dynamic-labs/DynamicAuth/issues/5395)) ([0b64099](https://github.com/dynamic-labs/DynamicAuth/commit/0b6409968457f65886248f0a0879e39ec3803fd0))
+
+
+### Bug Fixes
+
+* prevent wagmi from reconnect when DynamicContextProvider rerender ([#5446](https://github.com/dynamic-labs/DynamicAuth/issues/5446)) ([33337af](https://github.com/dynamic-labs/DynamicAuth/commit/33337af76786963cb3db7fa7c58c1292c529d0ac))
+
+## [2.1.0-alpha.3](https://github.com/dynamic-labs/DynamicAuth/compare/v2.1.0-alpha.2...v2.1.0-alpha.3) (2024-04-23)
+
+
+### Features
+
+* add merge user accounts flow ([#5429](https://github.com/dynamic-labs/DynamicAuth/issues/5429)) ([41d4239](https://github.com/dynamic-labs/DynamicAuth/commit/41d423906625e28004ba8f20baf57847ed8bf5d0))
+
+
+### Bug Fixes
+
+* disconnect wallet on lock in connect-only ([#5422](https://github.com/dynamic-labs/DynamicAuth/issues/5422)) ([a26f9fe](https://github.com/dynamic-labs/DynamicAuth/commit/a26f9fe93cf8568f1482e10b831de98c77fb2a2d))
+* useReactiveProxy to stop proxing when it finds a reactive value ([#5428](https://github.com/dynamic-labs/DynamicAuth/issues/5428)) ([838dce9](https://github.com/dynamic-labs/DynamicAuth/commit/838dce9ee953361e41772239a91adb1dd8d40234))
+
+## [2.1.0-alpha.2](https://github.com/dynamic-labs/DynamicAuth/compare/v2.1.0-alpha.1...v2.1.0-alpha.2) (2024-04-19)
+
+
+### Bug Fixes
+
+* buffer polyfill for utils package ([#5404](https://github.com/dynamic-labs/DynamicAuth/issues/5404)) ([bd40441](https://github.com/dynamic-labs/DynamicAuth/commit/bd404414a2e51d79fad86d7603dae89628c225b9))
+
 ## [2.1.0-alpha.1](https://github.com/dynamic-labs/DynamicAuth/compare/v2.1.0-alpha.0...v2.1.0-alpha.1) (2024-04-18)
 
 

package/package.cjs

@@ -3,9 +3,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "2.1.0-alpha.1";
+var version = "2.1.0-alpha.10";
 var dependencies = {
-	"@dynamic-labs/sdk-api-core": "0.0.422",
+	"@dynamic-labs/sdk-api-core": "0.0.432",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	formik: "2.2.9",

package/package.js

@@ -1,7 +1,7 @@
 'use client'
-var version = "2.1.0-alpha.1";
+var version = "2.1.0-alpha.10";
 var dependencies = {
-	"@dynamic-labs/sdk-api-core": "0.0.422",
+	"@dynamic-labs/sdk-api-core": "0.0.432",
 	"@hcaptcha/react-hcaptcha": "1.4.4",
 	"country-list": "2.3.0",
 	formik: "2.2.9",

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "2.1.0-alpha.1",
+  "version": "2.1.0-alpha.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
     "directory": "packages/sdk-react-core"
   },
   "dependencies": {
-    "@dynamic-labs/sdk-api-core": "0.0.422",
+    "@dynamic-labs/sdk-api-core": "0.0.432",
     "@hcaptcha/react-hcaptcha": "1.4.4",
     "country-list": "2.3.0",
     "formik": "2.2.9",
@@ -17,18 +17,17 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/ethereum": "2.1.0-alpha.1",
-    "@dynamic-labs/iconic": "2.1.0-alpha.1",
-    "@dynamic-labs/logger": "2.1.0-alpha.1",
-    "@dynamic-labs/multi-wallet": "2.1.0-alpha.1",
-    "@dynamic-labs/rpc-provider-ethereum": "2.1.0-alpha.1",
-    "@dynamic-labs/rpc-provider-solana": "2.1.0-alpha.1",
-    "@dynamic-labs/rpc-providers": "2.1.0-alpha.1",
-    "@dynamic-labs/types": "2.1.0-alpha.1",
-    "@dynamic-labs/utils": "2.1.0-alpha.1",
-    "@dynamic-labs/viem-utils": "2.1.0-alpha.1",
-    "@dynamic-labs/wallet-book": "2.1.0-alpha.1",
-    "@dynamic-labs/wallet-connector-core": "2.1.0-alpha.1",
+    "@dynamic-labs/iconic": "2.1.0-alpha.10",
+    "@dynamic-labs/logger": "2.1.0-alpha.10",
+    "@dynamic-labs/multi-wallet": "2.1.0-alpha.10",
+    "@dynamic-labs/rpc-provider-ethereum": "2.1.0-alpha.10",
+    "@dynamic-labs/rpc-provider-solana": "2.1.0-alpha.10",
+    "@dynamic-labs/rpc-providers": "2.1.0-alpha.10",
+    "@dynamic-labs/types": "2.1.0-alpha.10",
+    "@dynamic-labs/utils": "2.1.0-alpha.10",
+    "@dynamic-labs/viem-utils": "2.1.0-alpha.10",
+    "@dynamic-labs/wallet-book": "2.1.0-alpha.10",
+    "@dynamic-labs/wallet-connector-core": "2.1.0-alpha.10",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

package/src/index.cjs

@@ -8,6 +8,9 @@ var version = require('./version.cjs');
 var data = require('./lib/views/WalletList/data.cjs');
 var getAuthToken = require('./lib/utils/functions/getAuthToken/getAuthToken.cjs');
 var DynamicContext = require('./lib/context/DynamicContext/DynamicContext.cjs');
+var ErrorBoundary = require('./lib/context/ErrorBoundary/ErrorBoundary.cjs');
+var ErrorBoundaryExclude = require('./lib/context/ErrorBoundary/ErrorBoundaryExclude.cjs');
+var ErrorBoundaryInclude = require('./lib/context/ErrorBoundary/ErrorBoundaryInclude.cjs');
 var useDynamicContext = require('./lib/context/DynamicContext/useDynamicContext/useDynamicContext.cjs');
 require('react');
 var useDynamicScopes = require('./lib/utils/hooks/useDynamicScopes/useDynamicScopes.cjs');
@@ -61,7 +64,6 @@ require('react-international-phone');
 var mergeNetworks = require('./lib/utils/functions/mergeNetworks/mergeNetworks.cjs');
 var createWalletClientFromWallet = require('./lib/utils/functions/createWalletClientFromWallet/createWalletClientFromWallet.cjs');
 var useEmbeddedWallet = require('./lib/utils/hooks/useEmbeddedWallet/useEmbeddedWallet.cjs');
-var useSecureEnclaveEmbeddedWallet = require('./lib/utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/useSecureEnclaveEmbeddedWallet.cjs');
 require('./lib/context/WalletContext/WalletContext.cjs');
 require('./lib/context/ErrorContext/ErrorContext.cjs');
 require('./lib/context/ThemeContext/ThemeContext.cjs');
@@ -150,6 +152,9 @@ exports.getWallets = data.getWallets;
 exports.getAuthToken = getAuthToken.getAuthToken;
 exports.DynamicContext = DynamicContext.DynamicContext;
 exports.DynamicContextProvider = DynamicContext.DynamicContextProvider;
+exports.ErrorBoundary = ErrorBoundary.ErrorBoundary;
+exports.ErrorBoundaryExclude = ErrorBoundaryExclude.ErrorBoundaryExclude;
+exports.ErrorBoundaryInclude = ErrorBoundaryInclude.ErrorBoundaryInclude;
 exports.useDynamicContext = useDynamicContext.useDynamicContext;
 exports.useDynamicScopes = useDynamicScopes.useDynamicScopes;
 exports.useUserWallets = UserWalletsContext.useUserWallets;
@@ -189,7 +194,6 @@ exports.ArrowIcon = stroke.ReactComponent;
 exports.mergeNetworks = mergeNetworks.mergeNetworks;
 exports.createWalletClientFromWallet = createWalletClientFromWallet.createWalletClientFromWallet;
 exports.useEmbeddedWallet = useEmbeddedWallet.useEmbeddedWallet;
-exports.useSecureEnclaveEmbeddedWallet = useSecureEnclaveEmbeddedWallet.useSecureEnclaveEmbeddedWallet;
 exports.useIsLoggedIn = useIsLoggedIn.useIsLoggedIn;
 exports.useOtpVerificationRequest = useOtpVerificationRequest.useOtpVerificationRequest;
 exports.usePasskeyRecovery = usePasskeyRecovery.usePasskeyRecovery;

package/src/index.d.ts

@@ -3,6 +3,7 @@ export { VERSION } from './version';
 export { getWallets } from './lib/views/WalletList/data';
 export { getAuthToken } from './lib/utils/functions/getAuthToken';
 export { DynamicContextProvider, DynamicContext, } from './lib/context/DynamicContext';
+export { ErrorBoundary, ErrorBoundaryInclude, ErrorBoundaryExclude, } from './lib/context/ErrorBoundary';
 export type { DynamicContextProps } from './lib/context/DynamicContext';
 export { useDynamicContext } from './lib/context/DynamicContext/useDynamicContext';
 export { useDynamicScopes } from './lib/utils/hooks/useDynamicScopes';
@@ -105,7 +106,7 @@ export { FilterAndSortWallets, FilterBridgeChainsName, FilterChain, FilterWallet
 export { 
 /** @deprecated */
 DynamicWidgetContextProvider, } from './lib/widgets/DynamicWidget/context';
-export { useWalletItemActions, useAuthenticateConnectedUser, useSocialAccounts, useEmbeddedWallet, useEmbeddedWalletAuthenticator, usePasskeyRecovery, useEmbeddedReveal, useIsLoggedIn, useDynamicModals, useMfa, useSecureEnclaveEmbeddedWallet, } from './lib/utils/hooks';
+export { useWalletItemActions, useAuthenticateConnectedUser, useSocialAccounts, useEmbeddedWallet, useEmbeddedWalletAuthenticator, usePasskeyRecovery, useEmbeddedReveal, useIsLoggedIn, useDynamicModals, useMfa, } from './lib/utils/hooks';
 export { useUserUpdateRequest, useWalletConnectorEvent, } from './lib/utils/hooks';
 export { type VerifyOtp, useOtpVerificationRequest, } from './lib/utils/hooks/authenticationHooks/';
 export type { UpdateUserFieldsArg } from './lib/utils/hooks/';

package/src/index.js

@@ -4,6 +4,9 @@ export { VERSION } from './version.js';
 export { getWallets } from './lib/views/WalletList/data.js';
 export { getAuthToken } from './lib/utils/functions/getAuthToken/getAuthToken.js';
 export { DynamicContext, DynamicContextProvider } from './lib/context/DynamicContext/DynamicContext.js';
+export { ErrorBoundary } from './lib/context/ErrorBoundary/ErrorBoundary.js';
+export { ErrorBoundaryExclude } from './lib/context/ErrorBoundary/ErrorBoundaryExclude.js';
+export { ErrorBoundaryInclude } from './lib/context/ErrorBoundary/ErrorBoundaryInclude.js';
 export { useDynamicContext } from './lib/context/DynamicContext/useDynamicContext/useDynamicContext.js';
 import 'react';
 export { useDynamicScopes } from './lib/utils/hooks/useDynamicScopes/useDynamicScopes.js';
@@ -57,7 +60,6 @@ import 'react-international-phone';
 export { mergeNetworks } from './lib/utils/functions/mergeNetworks/mergeNetworks.js';
 export { createWalletClientFromWallet } from './lib/utils/functions/createWalletClientFromWallet/createWalletClientFromWallet.js';
 export { useEmbeddedWallet } from './lib/utils/hooks/useEmbeddedWallet/useEmbeddedWallet.js';
-export { useSecureEnclaveEmbeddedWallet } from './lib/utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/useSecureEnclaveEmbeddedWallet.js';
 import './lib/context/WalletContext/WalletContext.js';
 import './lib/context/ErrorContext/ErrorContext.js';
 import './lib/context/ThemeContext/ThemeContext.js';

package/src/lib/Main.cjs

@@ -23,6 +23,8 @@ var localStorage = require('./shared/utils/classes/storage/localStorage.cjs');
 var usePreventPageScroll = require('./shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs');
 var index$1 = require('./shared/consts/index.cjs');
 require('./context/DynamicContext/DynamicContext.cjs');
+require('./context/ErrorBoundary/ErrorBoundaryBase.cjs');
+require('./context/ErrorBoundary/ErrorBoundaryContext.cjs');
 var dynamicEvents = require('./events/dynamicEvents.cjs');
 require('./context/CaptchaContext/CaptchaContext.cjs');
 require('./context/ErrorContext/ErrorContext.cjs');
@@ -105,8 +107,13 @@ const Main = () => {
     usePreventPageScroll.usePreventPageScroll(showAuthFlow);
     const userWallets = UserWalletsContext.useUserWallets();
     const handleClose = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         if (viewsToDisableCloseOnOverlayClick.includes(view.type))
             return;
+        if ((_a = view.events) === null || _a === void 0 ? void 0 : _a.onClose) {
+            view.events.onClose();
+            return;
+        }
         if ((view.type === 'network-not-supported' ||
             view.type === 'network-not-supported-manual') &&
             userWallets.length === 1) {

package/src/lib/Main.js

@@ -19,6 +19,8 @@ import { LocalStorage } from './shared/utils/classes/storage/localStorage.js';
 import { usePreventPageScroll } from './shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.js';
 import { authModalZIndex } from './shared/consts/index.js';
 import './context/DynamicContext/DynamicContext.js';
+import './context/ErrorBoundary/ErrorBoundaryBase.js';
+import './context/ErrorBoundary/ErrorBoundaryContext.js';
 import { dynamicEvents } from './events/dynamicEvents.js';
 import './context/CaptchaContext/CaptchaContext.js';
 import './context/ErrorContext/ErrorContext.js';
@@ -101,8 +103,13 @@ const Main = () => {
     usePreventPageScroll(showAuthFlow);
     const userWallets = useUserWallets();
     const handleClose = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         if (viewsToDisableCloseOnOverlayClick.includes(view.type))
             return;
+        if ((_a = view.events) === null || _a === void 0 ? void 0 : _a.onClose) {
+            view.events.onClose();
+            return;
+        }
         if ((view.type === 'network-not-supported' ||
             view.type === 'network-not-supported-manual') &&
             userWallets.length === 1) {

package/src/lib/components/Alert/Alert.cjs

@@ -24,10 +24,10 @@ var classNames = require('../../utils/functions/classNames/classNames.cjs');
 const errorIconMap = {
     error: jsxRuntime.jsx(error.ReactComponent, {}),
 };
-const Alert = ({ children, icon, variant = 'error', contentDataTestId, }) => (jsxRuntime.jsxs("div", { className: classNames.classNames('alert', {
+const Alert = ({ children, icon, variant = 'error', contentDataTestId, className = '', }) => (jsxRuntime.jsxs("div", { className: classNames.classNames('alert', {
         'alert--error': variant === 'error',
         'alert--info': variant === 'info',
         'alert--warning': variant === 'warning',
-    }), children: [icon && (jsxRuntime.jsx(Icon.Icon, { size: 'small', className: 'alert__icon', children: typeof icon === 'string' ? errorIconMap[icon] : icon })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', "data-testid": contentDataTestId, children: children })] }));
+    }, className), children: [icon && (jsxRuntime.jsx(Icon.Icon, { size: 'small', className: 'alert__icon', children: typeof icon === 'string' ? errorIconMap[icon] : icon })), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', "data-testid": contentDataTestId, children: children })] }));
 
 exports.Alert = Alert;

package/src/lib/components/Alert/Alert.js

@@ -20,10 +20,10 @@ import { classNames } from '../../utils/functions/classNames/classNames.js';
 const errorIconMap = {
     error: jsx(SvgError, {}),
 };
-const Alert = ({ children, icon, variant = 'error', contentDataTestId, }) => (jsxs("div", { className: classNames('alert', {
+const Alert = ({ children, icon, variant = 'error', contentDataTestId, className = '', }) => (jsxs("div", { className: classNames('alert', {
         'alert--error': variant === 'error',
         'alert--info': variant === 'info',
         'alert--warning': variant === 'warning',
-    }), children: [icon && (jsx(Icon, { size: 'small', className: 'alert__icon', children: typeof icon === 'string' ? errorIconMap[icon] : icon })), jsx(Typography, { variant: 'body_small', "data-testid": contentDataTestId, children: children })] }));
+    }, className), children: [icon && (jsx(Icon, { size: 'small', className: 'alert__icon', children: typeof icon === 'string' ? errorIconMap[icon] : icon })), jsx(Typography, { variant: 'body_small', "data-testid": contentDataTestId, children: children })] }));
 
 export { Alert };

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

@@ -5,5 +5,6 @@ export type AlertProps = {
     contentDataTestId?: string;
     icon?: ReactElement | AlertIcons;
     variant?: 'error' | 'warning' | 'info';
+    className?: string;
 } & CopyKey;
 export type AlertComponent = FC<PropsWithChildren<AlertProps>>;

package/src/lib/components/EmailForm/EmailForm.cjs

@@ -96,7 +96,7 @@ const EmailForm = ({ isLoading, onSubmit, isEmailInvalid = false, currentEmail,
         }
         onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(emailInput);
     });
-    return (jsxRuntime.jsxs("form", { className: classNames.classNames('login-with-email-form', className), style: style, "data-testid": 'email-form', onSubmit: (e) => handleSubmit(e), children: [jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, copykey: 'dyn_login.email_form.email_field.label', label: t('dyn_login.email_form.email_field.label'), error: invalidEmail, message: invalidEmail && t('dyn_login.helper.email_form.invalid_email'), suffix: jsxRuntime.jsx(InlineSubmitButton.InlineSubmitButton, { disabled: isLoading || isDisabled, highlighted: emailInput.length > 0, isFocused: isFocused, isHovered: isHovered, emailSubmitButtonInsideInput: emailSubmitButtonInsideInput }), disabled: isLoading || isDisabled, type: 'email', onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) }), !emailSubmitButtonInsideInput && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'submit_button', buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading || emailInput.length < 3 || isDisabled, buttonVariant: 'brand-primary', buttonPadding: 'login-screen-height', expanded: true, copykey: buttonCopyKey, typographyProps: {
+    return (jsxRuntime.jsxs("form", { className: classNames.classNames('login-with-email-form', className), style: style, "data-testid": 'email-form', onSubmit: (e) => handleSubmit(e), children: [jsxRuntime.jsx(Input.Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, copykey: 'dyn_login.email_form.email_field.label', label: t('dyn_login.email_form.email_field.label'), error: invalidEmail, message: invalidEmail && t('dyn_login.helper.email_form.invalid_email'), suffix: jsxRuntime.jsx(InlineSubmitButton.InlineSubmitButton, { disabled: isLoading || isDisabled, highlighted: emailInput.length > 0, isFocused: isFocused, isHovered: isHovered, emailSubmitButtonInsideInput: emailSubmitButtonInsideInput }), disabled: isLoading || isDisabled, type: 'email', onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), autoComplete: 'email' }), !emailSubmitButtonInsideInput && (jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'submit_button', buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading || emailInput.length < 3 || isDisabled, buttonVariant: 'brand-primary', buttonPadding: 'login-screen-height', expanded: true, copykey: buttonCopyKey, typographyProps: {
                     color: 'inherit',
                 }, children: t(buttonCopyKey) }))] }));
 };

package/src/lib/components/EmailForm/EmailForm.js

@@ -92,7 +92,7 @@ const EmailForm = ({ isLoading, onSubmit, isEmailInvalid = false, currentEmail,
         }
         onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(emailInput);
     });
-    return (jsxs("form", { className: classNames('login-with-email-form', className), style: style, "data-testid": 'email-form', onSubmit: (e) => handleSubmit(e), children: [jsx(Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, copykey: 'dyn_login.email_form.email_field.label', label: t('dyn_login.email_form.email_field.label'), error: invalidEmail, message: invalidEmail && t('dyn_login.helper.email_form.invalid_email'), suffix: jsx(InlineSubmitButton, { disabled: isLoading || isDisabled, highlighted: emailInput.length > 0, isFocused: isFocused, isHovered: isHovered, emailSubmitButtonInsideInput: emailSubmitButtonInsideInput }), disabled: isLoading || isDisabled, type: 'email', onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) }), !emailSubmitButtonInsideInput && (jsx(TypographyButton, { dataTestId: 'submit_button', buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading || emailInput.length < 3 || isDisabled, buttonVariant: 'brand-primary', buttonPadding: 'login-screen-height', expanded: true, copykey: buttonCopyKey, typographyProps: {
+    return (jsxs("form", { className: classNames('login-with-email-form', className), style: style, "data-testid": 'email-form', onSubmit: (e) => handleSubmit(e), children: [jsx(Input, { id: 'email_field', value: emailInput, onChange: handleEmailOnChangeEvent, copykey: 'dyn_login.email_form.email_field.label', label: t('dyn_login.email_form.email_field.label'), error: invalidEmail, message: invalidEmail && t('dyn_login.helper.email_form.invalid_email'), suffix: jsx(InlineSubmitButton, { disabled: isLoading || isDisabled, highlighted: emailInput.length > 0, isFocused: isFocused, isHovered: isHovered, emailSubmitButtonInsideInput: emailSubmitButtonInsideInput }), disabled: isLoading || isDisabled, type: 'email', onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), autoComplete: 'email' }), !emailSubmitButtonInsideInput && (jsx(TypographyButton, { dataTestId: 'submit_button', buttonClassName: 'login-with-email-form__button', type: 'submit', loading: isLoading, disabled: isLoading || emailInput.length < 3 || isDisabled, buttonVariant: 'brand-primary', buttonPadding: 'login-screen-height', expanded: true, copykey: buttonCopyKey, typographyProps: {
                     color: 'inherit',
                 }, children: t(buttonCopyKey) }))] }));
 };

package/src/lib/components/PhoneNumberField/PhoneNumberField.cjs

@@ -98,7 +98,7 @@ const PhoneNumberField = ({ isLoading, disabled, error, label, onUpdate, appendR
                     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
                 }, ref: anchorRef, children: [jsxRuntime.jsxs("div", { className: classNames.classNames('phone-number-field__fields__country-code', {
                             'phone-number-field__fields__country-code--disabled': isLoading || disabled,
-                        }), onClick: openDropdown, "data-testid": 'country-code', children: [jsxRuntime.jsx(reactInternationalPhone.FlagImage, { iso2: currentCountry.iso2, size: '24px', className: 'phone-number-field__fields__country-code__flag' }), jsxRuntime.jsx(Typography.Typography, { className: 'phone-number-field__fields__country-code__plus', variant: 'body_normal', weight: 'regular', style: { fontSize: countryFontSize }, color: 'primary', children: "+" }), jsxRuntime.jsx(Input.Input, { label: '', id: 'country_code_field', value: countryInput, onChange: handleCountryInput, disabled: isLoading || disabled, containerClassName: 'phone-number-field__fields__country-code__container', className: 'phone-number-field__fields__country-code__container__input', onBlur: onBlurCountry, ref: countryInputRef, onKeyDown: handleCountryKeyDown, onFocus: onFocusCountry, style: { fontSize: countryFontSize }, "data-testid": 'country-code-input', inputMode: 'numeric' }), jsxRuntime.jsx(Icon.Icon, { className: 'phone-number-field__fields__country-code__chevron', children: jsxRuntime.jsx(chevronDown.ReactComponent, {}) })] }), jsxRuntime.jsx(Input.Input, { label: '', id: 'phoneNumber', value: formattedPhone, onChange: handlePhoneInput, disabled: isLoading || disabled, containerClassName: 'phone-number-field__fields__phone-number', className: 'phone-number-field__fields__phone-number__input', ref: inputRef, error: Boolean(invalidNumberMessage || error), inputMode: 'numeric', "data-testid": 'phone_number_input' }), !hasInput && (jsxRuntime.jsx(Typography.Typography, { className: 'phone-number-field__fields__placeholder', variant: 'body_normal', weight: 'regular', copykey: 'dyn_collect_user_data.fields.phone_number.label', children: label !== null && label !== void 0 ? label : t('dyn_collect_user_data.fields.phone_number.label') })), appendRight] }), jsxRuntime.jsx(MenuList.MenuList, { isOpen: countryDropdownOpen, onClickClose: closeDropdown, popperProps: {
+                        }), onClick: openDropdown, "data-testid": 'country-code', children: [jsxRuntime.jsx(reactInternationalPhone.FlagImage, { iso2: currentCountry.iso2, size: '24px', className: 'phone-number-field__fields__country-code__flag' }), jsxRuntime.jsx(Typography.Typography, { className: 'phone-number-field__fields__country-code__plus', variant: 'body_normal', weight: 'regular', style: { fontSize: countryFontSize }, color: 'primary', children: "+" }), jsxRuntime.jsx(Input.Input, { label: '', id: 'country_code_field', value: countryInput, onChange: handleCountryInput, disabled: isLoading || disabled, containerClassName: 'phone-number-field__fields__country-code__container', className: 'phone-number-field__fields__country-code__container__input', onBlur: onBlurCountry, ref: countryInputRef, onKeyDown: handleCountryKeyDown, onFocus: onFocusCountry, style: { fontSize: countryFontSize }, "data-testid": 'country-code-input', inputMode: 'numeric', autoComplete: 'tel-country-code' }), jsxRuntime.jsx(Icon.Icon, { className: 'phone-number-field__fields__country-code__chevron', children: jsxRuntime.jsx(chevronDown.ReactComponent, {}) })] }), jsxRuntime.jsx(Input.Input, { label: '', id: 'phoneNumber', value: formattedPhone, onChange: handlePhoneInput, disabled: isLoading || disabled, containerClassName: 'phone-number-field__fields__phone-number', className: 'phone-number-field__fields__phone-number__input', ref: inputRef, error: Boolean(invalidNumberMessage || error), inputMode: 'numeric', "data-testid": 'phone_number_input', autoComplete: 'tel-national' }), !hasInput && (jsxRuntime.jsx(Typography.Typography, { className: 'phone-number-field__fields__placeholder', variant: 'body_normal', weight: 'regular', copykey: 'dyn_collect_user_data.fields.phone_number.label', children: label !== null && label !== void 0 ? label : t('dyn_collect_user_data.fields.phone_number.label') })), appendRight] }), jsxRuntime.jsx(MenuList.MenuList, { isOpen: countryDropdownOpen, onClickClose: closeDropdown, popperProps: {
                     anchorOrigin: 'bottom-left',
                     anchorRef,
                 }, mobileTitle: 'Select country', dropdownClassName: 'phone-number-field__dropdown', children: jsxRuntime.jsx("div", { className: 'phone-number-field__dropdown__items', ref: onMenuDisplayToggle, children: filteredCountries.map((countryData) => {

package/src/lib/components/PhoneNumberField/PhoneNumberField.js

@@ -94,7 +94,7 @@ const PhoneNumberField = ({ isLoading, disabled, error, label, onUpdate, appendR
                     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
                 }, ref: anchorRef, children: [jsxs("div", { className: classNames('phone-number-field__fields__country-code', {
                             'phone-number-field__fields__country-code--disabled': isLoading || disabled,
-                        }), onClick: openDropdown, "data-testid": 'country-code', children: [jsx(FlagImage, { iso2: currentCountry.iso2, size: '24px', className: 'phone-number-field__fields__country-code__flag' }), jsx(Typography, { className: 'phone-number-field__fields__country-code__plus', variant: 'body_normal', weight: 'regular', style: { fontSize: countryFontSize }, color: 'primary', children: "+" }), jsx(Input, { label: '', id: 'country_code_field', value: countryInput, onChange: handleCountryInput, disabled: isLoading || disabled, containerClassName: 'phone-number-field__fields__country-code__container', className: 'phone-number-field__fields__country-code__container__input', onBlur: onBlurCountry, ref: countryInputRef, onKeyDown: handleCountryKeyDown, onFocus: onFocusCountry, style: { fontSize: countryFontSize }, "data-testid": 'country-code-input', inputMode: 'numeric' }), jsx(Icon, { className: 'phone-number-field__fields__country-code__chevron', children: jsx(SvgChevronDown, {}) })] }), jsx(Input, { label: '', id: 'phoneNumber', value: formattedPhone, onChange: handlePhoneInput, disabled: isLoading || disabled, containerClassName: 'phone-number-field__fields__phone-number', className: 'phone-number-field__fields__phone-number__input', ref: inputRef, error: Boolean(invalidNumberMessage || error), inputMode: 'numeric', "data-testid": 'phone_number_input' }), !hasInput && (jsx(Typography, { className: 'phone-number-field__fields__placeholder', variant: 'body_normal', weight: 'regular', copykey: 'dyn_collect_user_data.fields.phone_number.label', children: label !== null && label !== void 0 ? label : t('dyn_collect_user_data.fields.phone_number.label') })), appendRight] }), jsx(MenuList, { isOpen: countryDropdownOpen, onClickClose: closeDropdown, popperProps: {
+                        }), onClick: openDropdown, "data-testid": 'country-code', children: [jsx(FlagImage, { iso2: currentCountry.iso2, size: '24px', className: 'phone-number-field__fields__country-code__flag' }), jsx(Typography, { className: 'phone-number-field__fields__country-code__plus', variant: 'body_normal', weight: 'regular', style: { fontSize: countryFontSize }, color: 'primary', children: "+" }), jsx(Input, { label: '', id: 'country_code_field', value: countryInput, onChange: handleCountryInput, disabled: isLoading || disabled, containerClassName: 'phone-number-field__fields__country-code__container', className: 'phone-number-field__fields__country-code__container__input', onBlur: onBlurCountry, ref: countryInputRef, onKeyDown: handleCountryKeyDown, onFocus: onFocusCountry, style: { fontSize: countryFontSize }, "data-testid": 'country-code-input', inputMode: 'numeric', autoComplete: 'tel-country-code' }), jsx(Icon, { className: 'phone-number-field__fields__country-code__chevron', children: jsx(SvgChevronDown, {}) })] }), jsx(Input, { label: '', id: 'phoneNumber', value: formattedPhone, onChange: handlePhoneInput, disabled: isLoading || disabled, containerClassName: 'phone-number-field__fields__phone-number', className: 'phone-number-field__fields__phone-number__input', ref: inputRef, error: Boolean(invalidNumberMessage || error), inputMode: 'numeric', "data-testid": 'phone_number_input', autoComplete: 'tel-national' }), !hasInput && (jsx(Typography, { className: 'phone-number-field__fields__placeholder', variant: 'body_normal', weight: 'regular', copykey: 'dyn_collect_user_data.fields.phone_number.label', children: label !== null && label !== void 0 ? label : t('dyn_collect_user_data.fields.phone_number.label') })), appendRight] }), jsx(MenuList, { isOpen: countryDropdownOpen, onClickClose: closeDropdown, popperProps: {
                     anchorOrigin: 'bottom-left',
                     anchorRef,
                 }, mobileTitle: 'Select country', dropdownClassName: 'phone-number-field__dropdown', children: jsx("div", { className: 'phone-number-field__dropdown__items', ref: onMenuDisplayToggle, children: filteredCountries.map((countryData) => {

package/src/lib/components/Portal/Portal.cjs

@@ -106,7 +106,8 @@ const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, wh
                 style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'portal__backdrop' })), jsxRuntime.jsx("div", { style: { zIndex }, children: children })] }));
 };
 const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
-    const modalRootElementRef = useElementById.useElementById(elementId);
+    const { createRootElement } = useElementById.useElementById();
+    const modalRootElementRef = createRootElement(elementId);
     return reactDom.createPortal(jsxRuntime.jsx(ShadowDOM.ShadowDOM, { zIndex: zIndex, dataTestId: 'dynamic-modal-shadow', children: jsxRuntime.jsx(OpacityTransition.OpacityTransition, Object.assign({ isShown: isShown }, transitionEvents, { children: jsxRuntime.jsx(ModalComponent, { handleClose: handleClose, withBackdrop: withBackdrop, whiteList: (node) => modalRootElementRef.current.contains(node), children: children }) })) }), modalRootElementRef.current);
 };
 

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

@@ -98,7 +98,8 @@ const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, wh
                 style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'portal__backdrop' })), jsx("div", { style: { zIndex }, children: children })] }));
 };
 const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
-    const modalRootElementRef = useElementById(elementId);
+    const { createRootElement } = useElementById();
+    const modalRootElementRef = createRootElement(elementId);
     return createPortal(jsx(ShadowDOM, { zIndex: zIndex, dataTestId: 'dynamic-modal-shadow', children: jsx(OpacityTransition, Object.assign({ isShown: isShown }, transitionEvents, { children: jsx(ModalComponent, { handleClose: handleClose, withBackdrop: withBackdrop, whiteList: (node) => modalRootElementRef.current.contains(node), children: children }) })) }), modalRootElementRef.current);
 };
 

package/src/lib/components/RadioButton/RadioButton.cjs

@@ -0,0 +1,14 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs');
+
+const RadioButton = ({ children, checked, value, name, disabled = false, className = '', onChange, }) => {
+    const radioId = `${name}_${value}`;
+    return (jsxRuntime.jsxs("div", { className: classNames.classNames('radio-button', className), children: [jsxRuntime.jsx("input", { type: 'radio', id: radioId, name: name, value: value, disabled: disabled, defaultChecked: checked, onChange: onChange }), jsxRuntime.jsx("label", { htmlFor: radioId, children: children })] }));
+};
+
+exports.RadioButton = RadioButton;

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

@@ -0,0 +1,5 @@
+import { ComponentPropsWithoutRef, FC } from 'react';
+export type RadioButtonProps = ComponentPropsWithoutRef<'input'> & {
+    className?: string;
+};
+export declare const RadioButton: FC<RadioButtonProps>;

package/src/lib/components/RadioButton/RadioButton.js

@@ -0,0 +1,10 @@
+'use client'
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.js';
+
+const RadioButton = ({ children, checked, value, name, disabled = false, className = '', onChange, }) => {
+    const radioId = `${name}_${value}`;
+    return (jsxs("div", { className: classNames('radio-button', className), children: [jsx("input", { type: 'radio', id: radioId, name: name, value: value, disabled: disabled, defaultChecked: checked, onChange: onChange }), jsx("label", { htmlFor: radioId, children: children })] }));
+};
+
+export { RadioButton };

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

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

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

@@ -79,7 +79,8 @@ require('../../views/TransactionConfirmationView/helpers/transactionErrorMessage
 require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 
 const Tooltip = ({ children, content, className, as: Tag = 'span', copykey, }) => {
-    const portalRoot = useElementById.useElementById('dynamic-tooltips');
+    const { createRootElement } = useElementById.useElementById();
+    const portalRoot = createRootElement('dynamic-tooltips');
     const [vector, setVector] = React.useState([0, 0]);
     const childrenRef = React.useRef(null);
     const [visible, setVisible] = React.useState(false);

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

@@ -75,7 +75,8 @@ import '../../views/TransactionConfirmationView/helpers/transactionErrorMessage.
 import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 
 const Tooltip = ({ children, content, className, as: Tag = 'span', copykey, }) => {
-    const portalRoot = useElementById('dynamic-tooltips');
+    const { createRootElement } = useElementById();
+    const portalRoot = createRootElement('dynamic-tooltips');
     const [vector, setVector] = useState([0, 0]);
     const childrenRef = useRef(null);
     const [visible, setVisible] = useState(false);

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

@@ -77,7 +77,7 @@ require('../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Se
 require('@hcaptcha/react-hcaptcha');
 require('../../../../views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.cjs');
 
-const UserProfileField = ({ name, label, value, copykey, }) => {
+const UserProfileField = ({ name, label, value, copykey, autoComplete, }) => {
     var _a, _b;
     const { user } = useInternalDynamicContext.useInternalDynamicContext();
     const { t } = reactI18next.useTranslation();

package/src/lib/components/UserProfile/parts/UserProfileField/UserProfileField.d.ts

@@ -5,5 +5,6 @@ export type UserProfileFieldProps = {
     label?: string;
     name: string;
     value?: string | boolean | null;
+    autoComplete?: string;
 } & CopyKey;
-export declare const UserProfileField: ({ name, label, value, copykey, }: UserProfileFieldProps) => JSX.Element;
+export declare const UserProfileField: ({ name, label, value, copykey, autoComplete, }: UserProfileFieldProps) => JSX.Element;

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

@@ -73,7 +73,7 @@ import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/Sec
 import '@hcaptcha/react-hcaptcha';
 import '../../../../views/LoginView/sections/PhoneNumberSignInSection/PhoneNumberSignInSection.js';
 
-const UserProfileField = ({ name, label, value, copykey, }) => {
+const UserProfileField = ({ name, label, value, copykey, autoComplete, }) => {
     var _a, _b;
     const { user } = useInternalDynamicContext();
     const { t } = useTranslation();

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

@@ -42,6 +42,7 @@ export * from './Portal';
 export * from './PoweredByDynamic';
 export * from './QRCode';
 export * from './QrCodeWrapper';
+export * from './RadioButton';
 export * from './RenderView';
 export * from './SandboxIndicatorWrapper';
 export * from './SecureEmbeddedWalletCard';