@dynamic-labs/sdk-react-core 1.0.0-alpha.0 → 1.0.0-alpha.10

package/src/lib/modals/SignMessageConfirmationModal/getProperErrorMessage.js

@@ -1,16 +1,26 @@
-const errorMap = {
-    0: 'The operation either timed out or was not allowed.',
+const TurnkeyErrorMap = {
+    0: 'Operation was canceled.',
     16: 'Invalid Passkey signature. Select the passkey for this account and device.',
+    3: 'You reached the limit of passkeys for this account.',
 };
-const getProperErrorMessage = (signMessageError) => {
+const DOMExceptionErrorMap = {
+    NotAllowedError: 'Request Cancelled. Select a device or password manager to set up a passkey.',
+};
+const getProperErrorMessage = (originalError) => {
     var _a;
-    let error = signMessageError.reason || 'Something went wrong';
-    // turnkey request errors
-    if (((_a = signMessageError === null || signMessageError === void 0 ? void 0 : signMessageError.cause) === null || _a === void 0 ? void 0 : _a.code) !== undefined &&
-        errorMap[signMessageError.cause.code] !== undefined) {
-        error = errorMap[signMessageError.cause.code];
+    if ('reason' in originalError) {
+        return originalError.reason;
+    }
+    if (originalError instanceof DOMException) {
+        return DOMExceptionErrorMap[originalError.name] || 'Something went wrong';
+    }
+    if ('cause' in originalError && ((_a = originalError === null || originalError === void 0 ? void 0 : originalError.cause) === null || _a === void 0 ? void 0 : _a.code) !== undefined) {
+        return TurnkeyErrorMap[originalError.cause.code];
+    }
+    if ('code' in originalError && originalError.code) {
+        return TurnkeyErrorMap[originalError.code];
     }
-    return error;
+    return 'Something went wrong';
 };
 
 export { getProperErrorMessage };

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs

@@ -4,63 +4,65 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var viem = require('viem');
+require('@dynamic-labs/utils');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/ViewContext/ViewContext.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('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
-require('viem');
 var usePreventPageScroll = require('../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs');
 var index = require('../../shared/consts/index.cjs');
-require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
 var isMagicConnector = require('../../utils/functions/isMagicConnector/isMagicConnector.cjs');
 var sendTransactionWithAutoNonce = require('../../utils/functions/sendTransactionWithAutoNonce/sendTransactionWithAutoNonce.cjs');
-require('../../components/ShadowDOM/ShadowDOM.cjs');
-require('../../context/ThemeContext/ThemeContext.cjs');
-var Portal = require('../../components/Portal/Portal.cjs');
-require('react-dom');
-require('../../config/ApiEndpoint.cjs');
-require('@dynamic-labs/rpc-providers');
-require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
-require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../config/ApiEndpoint.cjs');
+require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('react-dom');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('@dynamic-labs/types');
+var useTransactionWithGasPrice = require('../../utils/hooks/useTransactionWithGasPrice/useTransactionWithGasPrice.cjs');
+require('yup');
 require('react-i18next');
+require('../../context/MockContext/MockContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWalletConnectorOptions/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/OverlayCard/OverlayCard.context.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
-require('../../context/MockContext/MockContext.cjs');
 require('../../context/QrCodeContext/QrCodeContext.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 require('qrcode');
 require('../../context/LoadingContext/LoadingContext.cjs');
+require('i18next');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
-require('yup');
 require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
-require('@dynamic-labs/types');
-require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
-require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('formik');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
 var TransactionConfirmationView = require('../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
-var useTransactionWithGasPrice = require('../../utils/hooks/useTransactionWithGasPrice/useTransactionWithGasPrice.cjs');
-require('../../components/Popper/Popper/Popper.cjs');
-require('../../components/Popper/PopperContext/PopperContext.cjs');
-var Modal = require('../../components/Modal/Modal.cjs');
-var ModalCard = require('../../components/ModalCard/ModalCard.cjs');
+require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
+var Modal = require('../../components/Modal/Modal.cjs');
+var ModalCard = require('../../components/ModalCard/ModalCard.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
+var Portal = require('../../components/Portal/Portal.cjs');
 
 const TransactionConfirmationModal = ({ title, handler, onReject, onTransactionResponseSuccess, transaction, provider, walletConnector, }) => {
     usePreventPageScroll.usePreventPageScroll(true);
@@ -80,7 +82,8 @@ const TransactionConfirmationModal = ({ title, handler, onReject, onTransactionR
         if (transactionResponseRef.current) {
             return onTransactionResponseSuccess(transactionResponseRef.current);
         }
-        onReject(errorRef.current || new Error('user rejected transaction'));
+        return onReject(errorRef.current ||
+            new viem.TransactionExecutionError(new viem.BaseError('user rejected transaction'), Object.assign({}, transactionWithGasPrice)));
     }, [onTransactionResponseSuccess, onReject]);
     return (jsxRuntime.jsx(Portal.Portal, { handleClose: closeModal, isShown: show, zIndex: index.authModalZIndex, withBackdrop: true, elementId: 'dynamic-send-transaction', transitionEvents: {
             onUnmount: handleOnModalUnmount,

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.js

@@ -1,62 +1,64 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback } from 'react';
+import { TransactionExecutionError, BaseError } from 'viem';
+import '@dynamic-labs/utils';
+import '../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/ViewContext/ViewContext.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 '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
-import 'viem';
 import { usePreventPageScroll } from '../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.js';
 import { authModalZIndex } from '../../shared/consts/index.js';
-import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
 import { isMagicConnector } from '../../utils/functions/isMagicConnector/isMagicConnector.js';
 import { sendTransactionWithAutoNonce } from '../../utils/functions/sendTransactionWithAutoNonce/sendTransactionWithAutoNonce.js';
-import '../../components/ShadowDOM/ShadowDOM.js';
-import '../../context/ThemeContext/ThemeContext.js';
-import { Portal } from '../../components/Portal/Portal.js';
-import 'react-dom';
-import '../../config/ApiEndpoint.js';
-import '@dynamic-labs/rpc-providers';
-import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
-import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../config/ApiEndpoint.js';
+import '../../context/EmailVerificationContext/EmailVerificationContext.js';
+import 'react-dom';
+import '../../context/ThemeContext/ThemeContext.js';
+import '@dynamic-labs/types';
+import { useTransactionWithGasPrice } from '../../utils/hooks/useTransactionWithGasPrice/useTransactionWithGasPrice.js';
+import 'yup';
 import 'react-i18next';
+import '../../context/MockContext/MockContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWalletConnectorOptions/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/OverlayCard/OverlayCard.context.js';
 import '../../context/FooterAnimationContext/index.js';
-import '../../context/MockContext/MockContext.js';
 import '../../context/QrCodeContext/QrCodeContext.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
-import '../../context/CaptchaContext/CaptchaContext.js';
-import '../../context/EmailVerificationContext/EmailVerificationContext.js';
 import 'qrcode';
 import '../../context/LoadingContext/LoadingContext.js';
+import 'i18next';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
-import 'yup';
 import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
-import '@dynamic-labs/types';
-import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
-import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import 'formik';
 import '../../components/IconButton/IconButton.js';
 import '../../components/Alert/Alert.js';
 import { TransactionConfirmationView } from '../../views/TransactionConfirmationView/TransactionConfirmationView.js';
-import { useTransactionWithGasPrice } from '../../utils/hooks/useTransactionWithGasPrice/useTransactionWithGasPrice.js';
-import '../../components/Popper/Popper/Popper.js';
-import '../../components/Popper/PopperContext/PopperContext.js';
-import { Modal } from '../../components/Modal/Modal.js';
-import { ModalCard } from '../../components/ModalCard/ModalCard.js';
+import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
+import { Modal } from '../../components/Modal/Modal.js';
+import { ModalCard } from '../../components/ModalCard/ModalCard.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
+import { Portal } from '../../components/Portal/Portal.js';
 
 const TransactionConfirmationModal = ({ title, handler, onReject, onTransactionResponseSuccess, transaction, provider, walletConnector, }) => {
     usePreventPageScroll(true);
@@ -76,7 +78,8 @@ const TransactionConfirmationModal = ({ title, handler, onReject, onTransactionR
         if (transactionResponseRef.current) {
             return onTransactionResponseSuccess(transactionResponseRef.current);
         }
-        onReject(errorRef.current || new Error('user rejected transaction'));
+        return onReject(errorRef.current ||
+            new TransactionExecutionError(new BaseError('user rejected transaction'), Object.assign({}, transactionWithGasPrice)));
     }, [onTransactionResponseSuccess, onReject]);
     return (jsx(Portal, { handleClose: closeModal, isShown: show, zIndex: authModalZIndex, withBackdrop: true, elementId: 'dynamic-send-transaction', transitionEvents: {
             onUnmount: handleOnModalUnmount,

package/src/lib/modals/UserFieldEditorModal/UserFieldEditorModal.cjs

@@ -5,59 +5,62 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+require('@dynamic-labs/utils');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/ViewContext/ViewContext.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('@dynamic-labs/wallet-book');
-require('@dynamic-labs/utils');
 require('../../utils/constants/colors.cjs');
 require('../../shared/utils/classes/storage/localStorage.cjs');
 require('viem');
 var index = require('../../shared/consts/index.cjs');
-require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/multi-wallet');
-require('../../components/ShadowDOM/ShadowDOM.cjs');
-require('../../context/ThemeContext/ThemeContext.cjs');
-var Portal = require('../../components/Portal/Portal.cjs');
-require('react-dom');
-require('../../config/ApiEndpoint.cjs');
-require('@dynamic-labs/rpc-providers');
-require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
-require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../config/ApiEndpoint.cjs');
+require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
+require('react-dom');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('@dynamic-labs/types');
+require('yup');
 require('react-i18next');
+require('../../context/MockContext/MockContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
+require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWalletConnectorOptions/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../components/ShadowDOM/ShadowDOM.cjs');
 require('../../components/OverlayCard/OverlayCard.context.cjs');
 require('../../context/FooterAnimationContext/index.cjs');
-require('../../context/MockContext/MockContext.cjs');
 require('../../context/QrCodeContext/QrCodeContext.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
-require('../../context/CaptchaContext/CaptchaContext.cjs');
-require('../../context/EmailVerificationContext/EmailVerificationContext.cjs');
 require('qrcode');
 require('../../context/LoadingContext/LoadingContext.cjs');
+require('i18next');
 require('../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
-require('yup');
 require('../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs');
-require('@dynamic-labs/types');
-require('../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.cjs');
-require('../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('formik');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/Alert/Alert.cjs');
+require('@dynamic-labs/viem-utils');
+require('../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
 var UserFieldEditorView = require('../../views/UserFieldEditorView/UserFieldEditorView.cjs');
-require('../../components/Popper/Popper/Popper.cjs');
-require('../../components/Popper/PopperContext/PopperContext.cjs');
-var Modal = require('../../components/Modal/Modal.cjs');
-var ModalCard = require('../../components/ModalCard/ModalCard.cjs');
 require('../../components/InlineWidget/InlineWidget.cjs');
 require('../../components/MenuList/Dropdown/Dropdown.cjs');
+var Modal = require('../../components/Modal/Modal.cjs');
+var ModalCard = require('../../components/ModalCard/ModalCard.cjs');
+require('../../components/Popper/Popper/Popper.cjs');
+require('../../components/Popper/PopperContext/PopperContext.cjs');
+var Portal = require('../../components/Portal/Portal.cjs');
 
 const UserFieldEditorModal = (_a) => {
     var { onCancel, onSubmit, fields } = _a, textOptions = _tslib.__rest(_a, ["onCancel", "onSubmit", "fields"]);

package/src/lib/modals/UserFieldEditorModal/UserFieldEditorModal.js

@@ -1,59 +1,62 @@
 import { __rest, __awaiter } from '../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback } from 'react';
+import '@dynamic-labs/utils';
+import '../../context/DynamicContext/DynamicContext.js';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/CaptchaContext/CaptchaContext.js';
+import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/ViewContext/ViewContext.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 '@dynamic-labs/wallet-book';
-import '@dynamic-labs/utils';
 import '../../utils/constants/colors.js';
 import '../../shared/utils/classes/storage/localStorage.js';
 import 'viem';
 import { authModalZIndex } from '../../shared/consts/index.js';
-import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/multi-wallet';
-import '../../components/ShadowDOM/ShadowDOM.js';
-import '../../context/ThemeContext/ThemeContext.js';
-import { Portal } from '../../components/Portal/Portal.js';
-import 'react-dom';
-import '../../config/ApiEndpoint.js';
-import '@dynamic-labs/rpc-providers';
-import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
-import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../config/ApiEndpoint.js';
+import '../../context/EmailVerificationContext/EmailVerificationContext.js';
+import 'react-dom';
+import '../../context/ThemeContext/ThemeContext.js';
+import '@dynamic-labs/types';
+import 'yup';
 import 'react-i18next';
+import '../../context/MockContext/MockContext.js';
+import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
+import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWalletConnectorOptions/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../components/ShadowDOM/ShadowDOM.js';
 import '../../components/OverlayCard/OverlayCard.context.js';
 import '../../context/FooterAnimationContext/index.js';
-import '../../context/MockContext/MockContext.js';
 import '../../context/QrCodeContext/QrCodeContext.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
-import '../../context/CaptchaContext/CaptchaContext.js';
-import '../../context/EmailVerificationContext/EmailVerificationContext.js';
 import 'qrcode';
 import '../../context/LoadingContext/LoadingContext.js';
+import 'i18next';
 import '../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
-import 'yup';
 import '../../components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js';
-import '@dynamic-labs/types';
-import '../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser.js';
-import '../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import 'formik';
 import '../../components/IconButton/IconButton.js';
 import '../../components/Alert/Alert.js';
+import '@dynamic-labs/viem-utils';
+import '../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
 import { UserFieldEditorView } from '../../views/UserFieldEditorView/UserFieldEditorView.js';
-import '../../components/Popper/Popper/Popper.js';
-import '../../components/Popper/PopperContext/PopperContext.js';
-import { Modal } from '../../components/Modal/Modal.js';
-import { ModalCard } from '../../components/ModalCard/ModalCard.js';
 import '../../components/InlineWidget/InlineWidget.js';
 import '../../components/MenuList/Dropdown/Dropdown.js';
+import { Modal } from '../../components/Modal/Modal.js';
+import { ModalCard } from '../../components/ModalCard/ModalCard.js';
+import '../../components/Popper/Popper/Popper.js';
+import '../../components/Popper/PopperContext/PopperContext.js';
+import { Portal } from '../../components/Portal/Portal.js';
 
 const UserFieldEditorModal = (_a) => {
     var { onCancel, onSubmit, fields } = _a, textOptions = __rest(_a, ["onCancel", "onSubmit", "fields"]);

package/src/lib/shared/assets/arrow-right-background.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _rect, _path;
+var _excluded = ["title", "titleId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgArrowRightBackground = function SvgArrowRightBackground(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 25,
+    height: 24,
+    viewBox: "0 0 25 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, _rect || (_rect = /*#__PURE__*/React__namespace.createElement("rect", {
+    x: 0.5,
+    width: 24,
+    height: 24,
+    rx: 12,
+    fill: "var(--icon-background, var(--dynamic-hover))"
+  })), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.22 7.47a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1 0 1.06l-3.75 3.75a.75.75 0 1 1-1.06-1.06l2.47-2.47H7.5a.75.75 0 0 1 0-1.5h8.19l-2.47-2.47a.75.75 0 0 1 0-1.06Z",
+    fill: "var(--icon-arrow, var(--dynamic-text-secondary))"
+  })));
+};
+
+exports.ReactComponent = SvgArrowRightBackground;

package/src/lib/shared/assets/arrow-right-background.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+var _rect, _path;
+var _excluded = ["title", "titleId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var SvgArrowRightBackground = function SvgArrowRightBackground(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 25,
+    height: 24,
+    viewBox: "0 0 25 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, _rect || (_rect = /*#__PURE__*/React.createElement("rect", {
+    x: 0.5,
+    width: 24,
+    height: 24,
+    rx: 12,
+    fill: "var(--icon-background, var(--dynamic-hover))"
+  })), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.22 7.47a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1 0 1.06l-3.75 3.75a.75.75 0 1 1-1.06-1.06l2.47-2.47H7.5a.75.75 0 0 1 0-1.5h8.19l-2.47-2.47a.75.75 0 0 1 0-1.06Z",
+    fill: "var(--icon-arrow, var(--dynamic-text-secondary))"
+  })));
+};
+
+export { SvgArrowRightBackground as ReactComponent };

package/src/lib/shared/assets/{arrow-right-circle.cjs → circle-locker.cjs}

@@ -29,14 +29,14 @@ var _excluded = ["title", "titleId"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var SvgArrowRightCircle = function SvgArrowRightCircle(_ref) {
+var SvgCircleLocker = function SvgCircleLocker(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
+    width: 65,
+    height: 64,
+    viewBox: "0 0 65 64",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-labelledby": titleId
@@ -45,9 +45,9 @@ var SvgArrowRightCircle = function SvgArrowRightCircle(_ref) {
   }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm10.293-3.707a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L13.586 13H8a1 1 0 1 1 0-2h5.586l-1.293-1.293a1 1 0 0 1 0-1.414Z",
-    fill: "currentColor"
+    d: "M32.5 64c17.673 0 32-14.327 32-32 0-17.673-14.327-32-32-32C14.827 0 .5 14.327.5 32c0 17.673 14.327 32 32 32Zm-7.618-39.89v-4.037a8.074 8.074 0 0 1 16.147 0v4.036a13.436 13.436 0 0 1 5.383 10.766c0 7.431-6.025 13.456-13.456 13.456-7.432 0-13.456-6.025-13.456-13.456 0-4.402 2.114-8.31 5.382-10.765Zm13.147-1.702v-2.335a5.074 5.074 0 0 0-10.147 0v2.336a13.416 13.416 0 0 1 5.074-.99c1.795 0 3.507.352 5.073.99ZM34.5 35.663a3.5 3.5 0 1 0-3 0V38.5a1.5 1.5 0 0 0 3 0v-2.837Z",
+    fill: "#4779FF"
   })));
 };
 
-exports.ReactComponent = SvgArrowRightCircle;
+exports.ReactComponent = SvgCircleLocker;

package/src/lib/shared/assets/{arrow-right-circle.js → circle-locker.js}

@@ -5,14 +5,14 @@ var _excluded = ["title", "titleId"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var SvgArrowRightCircle = function SvgArrowRightCircle(_ref) {
+var SvgCircleLocker = function SvgCircleLocker(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
+    width: 65,
+    height: 64,
+    viewBox: "0 0 65 64",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-labelledby": titleId
@@ -21,9 +21,9 @@ var SvgArrowRightCircle = function SvgArrowRightCircle(_ref) {
   }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm10.293-3.707a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L13.586 13H8a1 1 0 1 1 0-2h5.586l-1.293-1.293a1 1 0 0 1 0-1.414Z",
-    fill: "currentColor"
+    d: "M32.5 64c17.673 0 32-14.327 32-32 0-17.673-14.327-32-32-32C14.827 0 .5 14.327.5 32c0 17.673 14.327 32 32 32Zm-7.618-39.89v-4.037a8.074 8.074 0 0 1 16.147 0v4.036a13.436 13.436 0 0 1 5.383 10.766c0 7.431-6.025 13.456-13.456 13.456-7.432 0-13.456-6.025-13.456-13.456 0-4.402 2.114-8.31 5.382-10.765Zm13.147-1.702v-2.335a5.074 5.074 0 0 0-10.147 0v2.336a13.416 13.416 0 0 1 5.074-.99c1.795 0 3.507.352 5.073.99ZM34.5 35.663a3.5 3.5 0 1 0-3 0V38.5a1.5 1.5 0 0 0 3 0v-2.837Z",
+    fill: "#4779FF"
   })));
 };
 
-export { SvgArrowRightCircle as ReactComponent };
+export { SvgCircleLocker as ReactComponent };