@dynamic-labs/sdk-react-core 0.16.0

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

@@ -0,0 +1,122 @@
+import { __awaiter } from '../../../../_virtual/_tslib.es.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { ethers } from 'ethers';
+import { DynamicError } from '@dynamic-labs/multi-wallet';
+import { Typography } from '../../components/Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import { getChainIcon } from '../../shared/utils/functions/chain/getChainIcon.es.js';
+import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.es.js';
+import '../../utils/constants/colors.es.js';
+import { usePreventPageScroll } from '../../shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.es.js';
+import '@dynamic-labs/iconic';
+import '../../context/ViewContext/ViewContext.es.js';
+import { ReactComponent as SvgClose } from '../../shared/assets/close.es.js';
+import { ReactComponent as SvgSignCircle } from '../../shared/assets/sign-circle.es.js';
+import { authModalZIndex } from '../../shared/consts/index.es.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.es.js';
+import '../../components/ShadowDOM/ShadowDOM.es.js';
+import '../../context/ThemeContext/ThemeContext.es.js';
+import { Icon } from '../../components/Icon/Icon.es.js';
+import { Portal } from '../../components/Portal/Portal.es.js';
+import 'react-dom';
+import '../../config/ApiEndpoint.es.js';
+import '../../context/ErrorContext/ErrorContext.es.js';
+import { useFetchCurrency } from '../../widgets/DynamicWidget/hooks/useFetchCurrency/useFetchCurrency.es.js';
+import { transactionErrorMessage } from './helpers/transactionErrorMessage.es.js';
+import '../../context/MockContext/MockContext.es.js';
+import '../../context/CaptchaContext/CaptchaContext.es.js';
+import { usePromise } from '../../utils/hooks/usePromise/usePromise.es.js';
+import { useMutation } from '../../utils/hooks/useMutation/useMutation.es.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import { Button } from '../../components/Button/Button.es.js';
+import { IconButton } from '../../components/IconButton/IconButton.es.js';
+import { ModalHeader } from '../../components/ModalHeader/ModalHeader.es.js';
+import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.es.js';
+import { IconWithSpinner } from '../../components/IconWithSpinner/IconWithSpinner.es.js';
+import { AppOriginTile } from '../../components/AppOriginTile/AppOriginTile.es.js';
+import { AnimatePresence } from '../../components/AnimatePresence/AnimatePresence.es.js';
+import { VerticalDrawerAnimation } from '../../components/AnimatePresence/animations/VerticalDrawerAnimation/VerticalDrawerAnimation.es.js';
+import { ErrorContainer } from '../../components/ErrorContainer/ErrorContainer.es.js';
+
+const digitsLimitSub = 1e8;
+const TransactionConfirmationModal = ({ title, appOrigin, handler, onReject, onTransactionResponseSuccess, appLogoUrl, appName, transaction, buttonText = 'Send', provider, }) => {
+    usePreventPageScroll(true);
+    const { primaryWallet } = useInternalDynamicContext();
+    const didConfirmRef = useRef(false);
+    const [show, setShow] = useState(true);
+    const { from, to, value } = transaction;
+    if (!primaryWallet) {
+        throw new DynamicError('Primary wallet is not available, transaction cannot be displayed');
+    }
+    const [currencySymbol] = useFetchCurrency(primaryWallet.connector);
+    const { isLoading, mutate: sendTransaction, data: transactionResponse, error: transactionError, } = useMutation(() => handler(transaction), {
+        onSuccess: () => {
+            didConfirmRef.current = true;
+            setShow(false);
+        },
+    });
+    const handleOnReject = useCallback(() => {
+        didConfirmRef.current = false;
+        setShow(false);
+    }, [setShow]);
+    const handleOnModalUnmount = useCallback(() => {
+        if (transactionResponse) {
+            return onTransactionResponseSuccess(transactionResponse);
+        }
+        onReject(transactionError || new Error('user rejected transaction'));
+    }, [
+        transactionResponse,
+        transactionError,
+        onTransactionResponseSuccess,
+        onReject,
+    ]);
+    const { data: effectiveValue, isLoading: isEffectiveValueLoading } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
+        const val = yield value;
+        return val ? ethers.BigNumber.from(val) : undefined;
+    }));
+    const { data: effectiveGasPrice, isLoading: isEffectiveGasPriceLoading } = usePromise(() => __awaiter(void 0, void 0, void 0, function* () {
+        const gasPrice = yield provider.getGasPrice();
+        const estimatedGas = yield provider.estimateGas(transaction);
+        return gasPrice && estimatedGas
+            ? ethers.BigNumber.from(gasPrice).mul(estimatedGas)
+            : undefined;
+    }));
+    const { data: effectiveToAddress, isLoading: isEffectiveToAddressLoading } = usePromise(() => to);
+    const { data: effectiveFromAddress, isLoading: isEffectiveFromAddressLoading, } = usePromise(() => from);
+    const total = useMemo(() => {
+        if (effectiveGasPrice !== undefined && effectiveValue !== undefined) {
+            return effectiveGasPrice.add(effectiveValue);
+        }
+        return effectiveValue || effectiveGasPrice;
+    }, [effectiveGasPrice, effectiveValue]);
+    const isLoadingTransaction = useMemo(() => isEffectiveValueLoading ||
+        isEffectiveGasPriceLoading ||
+        isEffectiveToAddressLoading ||
+        isEffectiveFromAddressLoading, [
+        isEffectiveValueLoading,
+        isEffectiveGasPriceLoading,
+        isEffectiveToAddressLoading,
+        isEffectiveFromAddressLoading,
+    ]);
+    const ChainIcon = getChainIcon('evm');
+    const formatValue = (value, sub) => {
+        if (!sub) {
+            return ethers.utils.formatEther(value);
+        }
+        return ethers.utils.formatEther(value.sub(value.mod(sub)));
+    };
+    const closeButton = (jsx(IconButton, Object.assign({ type: 'button', onClick: handleOnReject, "data-testid": 'close', disabled: isLoading }, { children: jsx(SvgClose, {}) })));
+    return (jsx(Portal, Object.assign({ handleClose: handleOnReject, isShown: show, zIndex: authModalZIndex, withBackdrop: true, elementId: 'dynamic-send-transaction', transitionEvents: {
+            onUnmount: handleOnModalUnmount,
+        } }, { children: jsxs("div", Object.assign({ className: 'transaction-confirmation' }, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, Object.assign({ color: 'brand-primary' }, { children: jsx(SvgSignCircle, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerAnimation, {}) }, { children: transactionError && (jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsx(ErrorContainer, { children: transactionErrorMessage(transactionError) }) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-info' }, { children: [jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "From (You)" })), isEffectiveFromAddressLoading && jsx(CoinCell, { children: "--" }), !isEffectiveFromAddressLoading && effectiveFromAddress && (jsx(CoinCell, { children: shortenWalletAddress(effectiveFromAddress, 4, 4) })), !isEffectiveFromAddressLoading && !effectiveFromAddress && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "To" })), isEffectiveToAddressLoading && jsx(CoinCell, { children: "--" }), !isEffectiveToAddressLoading && !effectiveToAddress && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" }))), !isEffectiveToAddressLoading && effectiveToAddress && (jsx(CoinCell, { children: shortenWalletAddress(effectiveToAddress, 4, 4) }))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "Amount" })), isEffectiveValueLoading && (jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsx(ChainIcon, {}) }, { children: "--" }))), !isEffectiveValueLoading && effectiveValue && (jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsx(ChainIcon, {}), dataTestId: 'transaction-amount', title: formatValue(effectiveValue) }, { children: formatValue(effectiveValue, digitsLimitSub) }))), !isEffectiveValueLoading && !effectiveValue && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "Gas (estimated)" })), isEffectiveGasPriceLoading && jsx(CoinCell, { children: "--" }), !isEffectiveGasPriceLoading && !effectiveGasPrice && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" }))), !isEffectiveGasPriceLoading && effectiveGasPrice && (jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsx(ChainIcon, {}), dataTestId: 'transaction-gas-free', title: formatValue(effectiveGasPrice) }, { children: formatValue(effectiveGasPrice, digitsLimitSub) })))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-confirmation__transaction-row__title' }, { children: "Total" })), total && (jsx(CoinCell, Object.assign({ symbol: currencySymbol, icon: jsx(ChainIcon, {}), dataTestId: 'transaction-total', title: formatValue(total) }, { children: formatValue(total, digitsLimitSub) }))), !total && (jsx(CoinCell, Object.assign({ color: 'secondary', weight: 'regular' }, { children: "N/A" })))] }))] }))] })), jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [jsx(Button, Object.assign({ buttonVariant: 'secondary', onClick: handleOnReject, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" })), jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: () => sendTransaction(), expanded: true, buttonRounded: 'default', loading: isLoading, disabled: isLoadingTransaction }, { children: buttonText }))] })), jsx(PoweredByDynamic, {})] }))] })) })));
+};
+const CoinCell = ({ children, symbol, icon, color = 'primary', weight = 'medium', dataTestId, title, }) => (jsxs("div", Object.assign({ "data-testid": dataTestId, style: {
+        alignItems: 'center',
+        display: 'flex',
+        gap: '0.25rem',
+        minWidth: 0,
+    } }, { children: [jsx(Typography, Object.assign({ title: title, color: color, variant: 'body_normal', weight: weight, truncate: true }, { children: children })), symbol && (jsx(Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular' }, { children: symbol }))), icon && jsx(Icon, Object.assign({ size: 'small' }, { children: icon }))] })));
+
+export { TransactionConfirmationModal };

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.types.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+import { ethers } from 'ethers';
+export type TransactionConfirmationModalProps = {
+    appLogoUrl?: string;
+    appName?: string;
+    appOrigin: string;
+    buttonText?: ReactNode;
+    handler: (transaction: ethers.utils.Deferrable<ethers.providers.TransactionRequest>) => Promise<ethers.providers.TransactionResponse>;
+    onReject: (error: unknown) => void;
+    onTransactionResponseSuccess: (transactionResponse: ethers.providers.TransactionResponse) => void;
+    provider: ethers.providers.Web3Provider;
+    title: ReactNode;
+    transaction: ethers.utils.Deferrable<ethers.providers.TransactionRequest>;
+};
+export type TransactionConfirmationModalComponent = FC<TransactionConfirmationModalProps>;

package/src/lib/modals/TransactionConfirmationModal/helpers/transactionErrorMessage.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const errorCodesMapping = {
+    INSUFFICIENT_FUNDS: 'Insufficient funds for this transaction.',
+};
+const transactionErrorMessage = (error) => {
+    const { code } = error;
+    const defaultMessage = 'Something went wrong.';
+    if (!code)
+        return defaultMessage;
+    return errorCodesMapping[code] || defaultMessage;
+};
+
+exports.transactionErrorMessage = transactionErrorMessage;

package/src/lib/modals/TransactionConfirmationModal/helpers/transactionErrorMessage.d.ts

@@ -0,0 +1,3 @@
+export declare const transactionErrorMessage: (error: Error & {
+    code?: string;
+}) => string;

package/src/lib/modals/TransactionConfirmationModal/helpers/transactionErrorMessage.es.js

@@ -0,0 +1,12 @@
+const errorCodesMapping = {
+    INSUFFICIENT_FUNDS: 'Insufficient funds for this transaction.',
+};
+const transactionErrorMessage = (error) => {
+    const { code } = error;
+    const defaultMessage = 'Something went wrong.';
+    if (!code)
+        return defaultMessage;
+    return errorCodesMapping[code] || defaultMessage;
+};
+
+export { transactionErrorMessage };

package/src/lib/modals/TransactionConfirmationModal/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './SignMessageConfirmationModal';
+export * from './TransactionConfirmationModal';

package/src/lib/shared/assets/add-wallet.cjs.js

@@ -0,0 +1,58 @@
+'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 _path, _path2, _path3;
+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 SvgAddWallet = function SvgAddWallet(_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",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26ZM5 15c-2.21 0-4 1.79-4 4 0 .75.21 1.46.58 2.06A3.97 3.97 0 0 0 5 23c1.46 0 2.73-.78 3.42-1.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4Zm1.49 4.73h-.74v.78c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-.78h-.74c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h.74v-.71c0-.41.34-.75.75-.75s.75.34.75.75v.71h.74a.749.749 0 1 1 0 1.5Z",
+    fill: "currentColor"
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    opacity: 0.4,
+    d: "M22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12Z",
+    fill: "currentColor"
+  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3",
+    fill: "currentColor"
+  })));
+};
+
+exports.ReactComponent = SvgAddWallet;

package/src/lib/shared/assets/add-wallet.es.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+var _path, _path2, _path3;
+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 SvgAddWallet = function SvgAddWallet(_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",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M17.75 7.05C17.51 7.01 17.26 7 17 7H7c-.28 0-.55.02-.81.06.14-.28.34-.54.58-.78l3.25-3.26a3.525 3.525 0 0 1 4.96 0l1.75 1.77c.64.63.98 1.43 1.02 2.26ZM5 15c-2.21 0-4 1.79-4 4 0 .75.21 1.46.58 2.06A3.97 3.97 0 0 0 5 23c1.46 0 2.73-.78 3.42-1.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4Zm1.49 4.73h-.74v.78c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-.78h-.74c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h.74v-.71c0-.41.34-.75.75-.75s.75.34.75.75v.71h.74a.749.749 0 1 1 0 1.5Z",
+    fill: "currentColor"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    opacity: 0.4,
+    d: "M22 12v5c0 3-2 5-5 5H7.63c.31-.26.58-.58.79-.94.37-.6.58-1.31.58-2.06 0-2.21-1.79-4-4-4-1.2 0-2.27.53-3 1.36V12c0-2.72 1.64-4.62 4.19-4.94.26-.04.53-.06.81-.06h10c.26 0 .51.01.75.05C20.33 7.35 22 9.26 22 12Z",
+    fill: "currentColor"
+  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
+    d: "M22 12.5h-3c-1.1 0-2 .9-2 2s.9 2 2 2h3",
+    fill: "currentColor"
+  })));
+};
+
+export { SvgAddWallet as ReactComponent };

package/src/lib/shared/assets/add.cjs.js

@@ -0,0 +1,55 @@
+'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 _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 SvgAdd = function SvgAdd(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 10,
+    height: 10,
+    viewBox: "0 0 10 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M5 1v4m0 0v4m0-4h4M5 5H1",
+    stroke: "currentColor",
+    strokeOpacity: 0.65,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+};
+
+exports.ReactComponent = SvgAdd;

package/src/lib/shared/assets/add.es.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+var _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 SvgAdd = function SvgAdd(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 10,
+    height: 10,
+    viewBox: "0 0 10 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M5 1v4m0 0v4m0-4h4M5 5H1",
+    stroke: "currentColor",
+    strokeOpacity: 0.65,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })));
+};
+
+export { SvgAdd as ReactComponent };

package/src/lib/shared/assets/arrow-down.cjs.js

@@ -0,0 +1,53 @@
+'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 _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 SvgArrowDown = function SvgArrowDown(_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",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.862 9.529c.26-.26.682-.26.943 0L12 13.724l4.195-4.195a.667.667 0 1 1 .943.942l-4.667 4.667a.667.667 0 0 1-.942 0l-4.667-4.667a.667.667 0 0 1 0-.942Z",
+    fill: "currentColor"
+  })));
+};
+
+exports.ReactComponent = SvgArrowDown;

package/src/lib/shared/assets/arrow-down.es.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+var _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 SvgArrowDown = function SvgArrowDown(_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",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6.862 9.529c.26-.26.682-.26.943 0L12 13.724l4.195-4.195a.667.667 0 1 1 .943.942l-4.667 4.667a.667.667 0 0 1-.942 0l-4.667-4.667a.667.667 0 0 1 0-.942Z",
+    fill: "currentColor"
+  })));
+};
+
+export { SvgArrowDown as ReactComponent };

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

@@ -0,0 +1,53 @@
+'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 _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 SvgArrowRight = function SvgArrowRight(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.862 2.862c.26-.26.682-.26.943 0l4.666 4.667a.667.667 0 0 1 0 .942l-4.666 4.667a.667.667 0 0 1-.943-.943l3.528-3.528H2a.667.667 0 0 1 0-1.334h10.39L8.862 3.805a.667.667 0 0 1 0-.943Z",
+    fill: "currentColor"
+  })));
+};
+
+exports.ReactComponent = SvgArrowRight;

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+var _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 SvgArrowRight = function SvgArrowRight(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.862 2.862c.26-.26.682-.26.943 0l4.666 4.667a.667.667 0 0 1 0 .942l-4.666 4.667a.667.667 0 0 1-.943-.943l3.528-3.528H2a.667.667 0 0 1 0-1.334h10.39L8.862 3.805a.667.667 0 0 1 0-.943Z",
+    fill: "currentColor"
+  })));
+};
+
+export { SvgArrowRight as ReactComponent };

package/src/lib/shared/assets/check-circle.cjs.js

@@ -0,0 +1,53 @@
+'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 _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 SvgCheckCircle = function SvgCheckCircle(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 2.666a5.333 5.333 0 1 0 0 10.667A5.333 5.333 0 0 0 8 2.666ZM1.333 8a6.667 6.667 0 1 1 13.333 0A6.667 6.667 0 0 1 1.333 8Zm9.138-1.805c.26.26.26.682 0 .943L7.804 9.804a.667.667 0 0 1-.942 0L5.528 8.471a.667.667 0 1 1 .943-.943l.862.862 2.195-2.195c.26-.26.683-.26.943 0Z",
+    fill: "currentColor"
+  })));
+};
+
+exports.ReactComponent = SvgCheckCircle;

package/src/lib/shared/assets/check-circle.es.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+var _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 SvgCheckCircle = function SvgCheckCircle(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 2.666a5.333 5.333 0 1 0 0 10.667A5.333 5.333 0 0 0 8 2.666ZM1.333 8a6.667 6.667 0 1 1 13.333 0A6.667 6.667 0 0 1 1.333 8Zm9.138-1.805c.26.26.26.682 0 .943L7.804 9.804a.667.667 0 0 1-.942 0L5.528 8.471a.667.667 0 1 1 .943-.943l.862.862 2.195-2.195c.26-.26.683-.26.943 0Z",
+    fill: "currentColor"
+  })));
+};
+
+export { SvgCheckCircle as ReactComponent };