@depay/widgets 6.30.2 → 7.0.0

package/dist/umd/index.js

@@ -1,14 +1,13 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@depay/react-dialog-stack'), require('@depay/web3-wallets'), require('react-dom'), require('@depay/react-shadow-dom'), require('ethers'), require('@depay/web3-constants'), require('decimal.js'), require('@depay/web3-exchanges'), require('@depay/web3-tokens'), require('@depay/local-currency'), require('@depay/web3-client'), require('@depay/web3-blockchains'), require('@depay/web3-payments'), require('react-rangeslider'), require('@depay/react-token-image')) :
-  typeof define === 'function' && define.amd ? define(['react', '@depay/react-dialog-stack', '@depay/web3-wallets', 'react-dom', '@depay/react-shadow-dom', 'ethers', '@depay/web3-constants', 'decimal.js', '@depay/web3-exchanges', '@depay/web3-tokens', '@depay/local-currency', '@depay/web3-client', '@depay/web3-blockchains', '@depay/web3-payments', 'react-rangeslider', '@depay/react-token-image'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DePayWidgets = factory(global.React, global.ReactDialogStack, global.Web3Wallets, global.ReactDOM, global.ReactShadowDOM, global.ethers, global.Web3Constants, global.Decimal, global.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Blockchains, global.Web3Payments, global.ReactRangeslider, global.ReactTokenImage));
-})(this, (function (React, reactDialogStack, web3Wallets, ReactDOM, reactShadowDom, ethers, web3Constants, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Blockchains, web3Payments, Slider, reactTokenImage) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('@depay/react-dialog-stack'), require('@depay/web3-wallets'), require('react-dom'), require('@depay/react-shadow-dom'), require('ethers'), require('@depay/web3-constants'), require('decimal.js'), require('@depay/web3-exchanges'), require('@depay/web3-tokens'), require('@depay/local-currency'), require('@depay/web3-client'), require('@depay/web3-blockchains'), require('@depay/web3-payments'), require('@depay/react-token-image')) :
+  typeof define === 'function' && define.amd ? define(['react', '@depay/react-dialog-stack', '@depay/web3-wallets', 'react-dom', '@depay/react-shadow-dom', 'ethers', '@depay/web3-constants', 'decimal.js', '@depay/web3-exchanges', '@depay/web3-tokens', '@depay/local-currency', '@depay/web3-client', '@depay/web3-blockchains', '@depay/web3-payments', '@depay/react-token-image'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DePayWidgets = factory(global.React, global.ReactDialogStack, global.Web3Wallets, global.ReactDOM, global.ReactShadowDOM, global.ethers, global.Web3Constants, global.Decimal, global.Web3Exchanges, global.Web3Tokens, global.LocalCurrency, global.Web3Client, global.Web3Blockchains, global.Web3Payments, global.ReactTokenImage));
+})(this, (function (React, reactDialogStack, web3Wallets, ReactDOM, reactShadowDom, ethers, web3Constants, decimal_js, web3Exchanges, web3Tokens, localCurrency, web3Client, web3Blockchains, web3Payments, reactTokenImage) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
-  var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
 
   function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -77,7 +76,7 @@
   module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
   });
 
-  var regeneratorRuntime = createCommonjsModule(function (module) {
+  var regeneratorRuntime$1 = createCommonjsModule(function (module) {
   var _typeof = _typeof_1["default"];
 
   function _regeneratorRuntime() {
@@ -433,7 +432,21 @@
   module.exports = _regeneratorRuntime, module.exports.__esModule = true, module.exports["default"] = module.exports;
   });
 
-  var regenerator = regeneratorRuntime();
+  // TODO(Babel 8): Remove this file.
+
+  var runtime = regeneratorRuntime$1();
+  var regenerator = runtime;
+
+  // Copied from https://github.com/facebook/regenerator/blob/main/packages/runtime/runtime.js#L736=
+  try {
+    regeneratorRuntime = runtime;
+  } catch (accidentalStrictMode) {
+    if (typeof globalThis === "object") {
+      globalThis.regeneratorRuntime = runtime;
+    } else {
+      Function("r", "regeneratorRuntime = r")(runtime);
+    }
+  }
 
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
@@ -708,34 +721,36 @@
         navigate = _useContext.navigate;
 
     var wallet = web3Wallets.getWallet();
-    React.useEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
-      var accounts;
-      return regenerator.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              if (!wallet) {
-                _context.next = 5;
-                break;
-              }
+    React.useEffect(function () {
+      _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+        var accounts;
+        return regenerator.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!wallet) {
+                  _context.next = 5;
+                  break;
+                }
 
-              _context.next = 3;
-              return wallet.accounts();
+                _context.next = 3;
+                return wallet.accounts();
 
-            case 3:
-              accounts = _context.sent;
+              case 3:
+                accounts = _context.sent;
 
-              if (accounts == undefined || accounts.length == 0) {
-                navigate('ConnectingWallet');
-              }
+                if (accounts == undefined || accounts.length == 0) {
+                  navigate('ConnectingWallet');
+                }
 
-            case 5:
-            case "end":
-              return _context.stop();
+              case 5:
+              case "end":
+                return _context.stop();
+            }
           }
-        }
-      }, _callee);
-    })), [wallet]);
+        }, _callee);
+      }))();
+    }, [wallet]);
 
     var connect = function connect(walletClass) {
       var wallet = new walletClass();
@@ -869,40 +884,42 @@
         setWallet(wallet);
       }
     }, []);
-    React.useEffect( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
-      var accounts;
-      return regenerator.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (!wallet) {
-                _context2.next = 5;
-                break;
-              }
+    React.useEffect(function () {
+      _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
+        var accounts;
+        return regenerator.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!wallet) {
+                  _context2.next = 5;
+                  break;
+                }
 
-              _context2.next = 3;
-              return wallet.accounts();
+                _context2.next = 3;
+                return wallet.accounts();
 
-            case 3:
-              accounts = _context2.sent;
+              case 3:
+                accounts = _context2.sent;
 
-              if (accounts instanceof Array && accounts.length > 0) {
-                if (props.resolve) props.resolve({
-                  wallet: wallet,
-                  account: accounts[0],
-                  accounts: accounts
-                });
-              } else {
-                connect(wallet);
-              }
+                if (accounts instanceof Array && accounts.length > 0) {
+                  if (props.resolve) props.resolve({
+                    wallet: wallet,
+                    account: accounts[0],
+                    accounts: accounts
+                  });
+                } else {
+                  connect(wallet);
+                }
 
-            case 5:
-            case "end":
-              return _context2.stop();
+              case 5:
+              case "end":
+                return _context2.stop();
+            }
           }
-        }
-      }, _callee2);
-    })), [wallet]);
+        }, _callee2);
+      }))();
+    }, [wallet]);
     return /*#__PURE__*/React__default["default"].createElement(reactDialogStack.ReactDialogStack, {
       open: open,
       close: close,
@@ -957,11 +974,10 @@
   }
 
   function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
       o.__proto__ = p;
       return o;
     };
-
     return _setPrototypeOf(o, p);
   }
 
@@ -1002,7 +1018,7 @@
   }
 
   function _getPrototypeOf(o) {
-    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
       return o.__proto__ || Object.getPrototypeOf(o);
     };
     return _getPrototypeOf(o);
@@ -1073,7 +1089,7 @@
   `
   }
 
-  const _jsxFileName = "/home/runner/work/react-dialog/react-dialog/src/components/Dialog.jsx";
+  const _jsxFileName$1 = "/home/runner/work/react-dialog/react-dialog/src/components/Dialog.jsx";
   class Dialog extends React__default["default"].Component {
     constructor(props) {
       super(props);
@@ -1124,10 +1140,10 @@
       const classNames = ['ReactDialog', this.state.open ? 'ReactDialogOpen' : ''];
       const style = ReactDialogStyle({ background: this.props.background });
       return (
-        React__default["default"].createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName, lineNumber: 56}}
-          , React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 57}}, style)
-          , React__default["default"].createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName, lineNumber: 58}}
-            , React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName, lineNumber: 59}} )
+        React__default["default"].createElement('div', { className: classNames.join(' '), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 55}}
+          , React__default["default"].createElement('style', {__self: this, __source: {fileName: _jsxFileName$1, lineNumber: 56}}, style)
+          , React__default["default"].createElement('div', { className: "ReactDialogInner", __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 57}}
+            , React__default["default"].createElement('div', { className: "ReactDialogBackground", onClick: this.onClickBackground.bind(this), __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 58}} )
             , this.props.children
           )
         )
@@ -1135,7 +1151,7 @@
     }
   }
 
-  const _jsxFileName$1 = "/home/runner/work/react-dialog/react-dialog/src/index.jsx";
+  const _jsxFileName = "/home/runner/work/react-dialog/react-dialog/src/index.jsx";
   class ReactDialog extends React__default["default"].Component {
     constructor(props) {
       super(props);
@@ -1164,7 +1180,7 @@
             background: this.props.background,
             close: this.props.close,
             document: _document,
-            open: this.props.open, __self: this, __source: {fileName: _jsxFileName$1, lineNumber: 29}}
+            open: this.props.open, __self: this, __source: {fileName: _jsxFileName, lineNumber: 29}}
           
             , this.props.children
           ),
@@ -1307,7 +1323,7 @@
   });
 
   var FontStyle = (function (style) {
-    return "\n\n    *, div, div * {\n      font-family: ".concat(style.fontFamily, ";\n    }\n\n    .FontSizeS {\n      font-size: 16px;\n    }\n\n    .FontSizeM {\n      font-size: 19px;\n    }\n\n    .FontSizeL {\n      font-size: 23px;\n    }\n\n    .FontSizeXL {\n      font-size: 32px;\n    }\n\n    .FontWeightBold {\n      font-weight: bold;\n    }\n\n    .FontItalic {\n      font-style: italic;\n    }\n  ");
+    return "\n\n    *, div, div * {\n      font-family: ".concat(style.fontFamily, ";\n    }\n\n    .FontSizeS {\n      font-size: 16px;\n    }\n\n    .FontSizeM {\n      font-size: 19px;\n    }\n\n    .FontSizeL {\n      font-size: 23px;\n    }\n\n    .FontSizeXL {\n      font-size: 32px;\n    }\n\n    .FontSizeXXL {\n      font-size: 42px;\n    }\n\n    .FontWeightBold {\n      font-weight: bold;\n    }\n\n    .FontItalic {\n      font-style: italic;\n    }\n  ");
   });
 
   var GraphicStyle = (function () {
@@ -1400,7 +1416,7 @@
       },
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
     }, style);
-    return [ResetStyle(), DialogStyle(), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(), TextButtonStyle(style), ImageStyle(), BlockchainLogoStyle(), SearchStyle(style), TokenImageStyle(), AlertStyle(), TableStyle(), LinkStyle(style), TooltipStyle(style)].join('');
+    return [ResetStyle(), DialogStyle(style), ButtonCircularStyle(), ButtonPrimaryStyle(style), CardStyle(style), PoweredByStyle(style), GraphicStyle(), SkeletonStyle(), TokenAmountStyle(), TextStyle(style), FontStyle(style), IconStyle(style), OpacityStyle(style), PaddingStyle(), HeightStyle(), LoadingTextStyle(style), RangeSliderStyle(style), InputStyle(style), TextButtonStyle(style), ImageStyle(style), BlockchainLogoStyle(style), SearchStyle(style), TokenImageStyle(style), AlertStyle(style), TableStyle(style), LinkStyle(style), TooltipStyle(style)].join('');
   });
 
   var mount = (function (_ref, content) {
@@ -1713,7 +1729,7 @@
         } else {
           Promise.all(props.accept.map(function (configuration) {
             if (web3Constants.CONSTANTS[configuration.blockchain].USD.toLowerCase() == configuration.token.toLowerCase()) {
-              return 1.00 / conversionRate;
+              return 1.00 / conversionRate * amount;
             }
 
             return web3Exchanges.route({
@@ -2674,15 +2690,14 @@
         className: "PaddingLeftM PaddingRightM"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS TextCenter PaddingBottomL"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "FontSizeL"
-      }, /*#__PURE__*/React__default["default"].createElement("input", {
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", {
         max: parseFloat(maxAmount),
         min: min,
         step: step,
-        className: "Input FontSizeXL TextAlignCenter",
+        className: "Input FontSizeXXL TextAlignCenter",
         type: "number",
         name: "amount",
+        autoFocus: true,
         value: parseFloat(inputAmount),
         onChange: function onChange(event) {
           changeAmount(event.target.value);
@@ -2690,18 +2705,7 @@
         onBlur: function onBlur(event) {
           setValidValue(event.target.value);
         }
-      })), /*#__PURE__*/React__default["default"].createElement(Slider__default["default"], {
-        max: parseFloat(maxAmount),
-        min: min,
-        step: step,
-        value: parseFloat(inputAmount),
-        onChange: function onChange(value) {
-          changeAmount(toValidStep(value));
-        },
-        onChangeComplete: function onChangeComplete() {
-          setValidValue(inputAmount);
-        }
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         style: {
           height: '40px'
         }
@@ -3220,6 +3224,7 @@
       return /*#__PURE__*/React__default["default"].createElement(DonationOverviewSkeleton, null);
     }
 
+    var blockchain = web3Blockchains.Blockchain.findByName(payment.blockchain);
     return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -3269,6 +3274,11 @@
       }, /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: payment.route.blockchain,
         address: payment.token
+      }), /*#__PURE__*/React__default["default"].createElement("img", {
+        className: "BlockchainLogo small",
+        src: blockchain.logo,
+        alt: blockchain.label,
+        title: blockchain.label
       })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3926,7 +3936,7 @@
                   throw 'You need to set the blockchain you want to receive the donation on!';
                 }
 
-                if (!['ethereum', 'bsc'].includes(configuration.blockchain)) {
+                if (!['ethereum', 'bsc', 'polygon'].includes(configuration.blockchain)) {
                   throw 'You need to set a supported blockchain!';
                 }
 
@@ -4311,6 +4321,7 @@
       return /*#__PURE__*/React__default["default"].createElement(PaymentOverviewSkeleton, null);
     }
 
+    var blockchain = web3Blockchains.Blockchain.findByName(payment.blockchain);
     return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -4360,6 +4371,11 @@
       }, /*#__PURE__*/React__default["default"].createElement(reactTokenImage.TokenImage, {
         blockchain: payment.blockchain,
         address: payment.token
+      }), /*#__PURE__*/React__default["default"].createElement("img", {
+        className: "BlockchainLogo small",
+        src: blockchain.logo,
+        alt: blockchain.label,
+        title: blockchain.label
       })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -4430,7 +4446,7 @@
                   throw 'You need to set the blockchain your want to receive the payment on!';
                 }
 
-                if (!['ethereum', 'bsc'].includes(configuration.blockchain)) {
+                if (!['ethereum', 'bsc', 'polygon'].includes(configuration.blockchain)) {
                   throw 'You need to set a supported blockchain!';
                 }
 
@@ -4749,6 +4765,7 @@
       });
     }
 
+    var blockchain = web3Blockchains.Blockchain.findByName(payment.blockchain);
     return /*#__PURE__*/React__default["default"].createElement(Dialog$1, {
       header: /*#__PURE__*/React__default["default"].createElement("div", {
         className: "PaddingTopS PaddingLeftM PaddingRightM TextLeft"
@@ -4770,7 +4787,12 @@
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardImage",
         title: payment.name
-      }, tokenImageElement), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, tokenImageElement, /*#__PURE__*/React__default["default"].createElement("img", {
+        className: "BlockchainLogo small",
+        src: blockchain.logo,
+        alt: blockchain.label,
+        title: blockchain.label
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBody"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "CardBodyWrapper"
@@ -5140,7 +5162,7 @@
         navigate = _useContext2.navigate;
 
     var stacked = Object.keys(props.selection).length > 1;
-    var blockchains = [web3Blockchains.Blockchain.findByName('ethereum'), web3Blockchains.Blockchain.findByName('bsc')];
+    var blockchains = [web3Blockchains.Blockchain.findByName('ethereum'), web3Blockchains.Blockchain.findByName('bsc'), web3Blockchains.Blockchain.findByName('polygon')];
 
     var selectBlockchain = function selectBlockchain(blockchain) {
       setSelection(Object.assign(props.selection, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "6.30.2",
+  "version": "7.0.0",
   "description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",
@@ -35,33 +35,32 @@
   "dependencies": {
     "@depay/coinbase-wallet-sdk": "^1.0.5",
     "@depay/local-currency": "^3.2.2",
-    "@depay/react-dialog-stack": "^5.0.1",
-    "@depay/react-shadow-dom": "^4.2.0",
-    "@depay/react-token-image": "^3.0.0",
+    "@depay/react-dialog-stack": "^6.0.0",
+    "@depay/react-shadow-dom": "^5.0.0",
+    "@depay/react-token-image": "^4.0.0",
     "@depay/walletconnect-v1": "^1.1.0",
-    "@depay/web3-assets": "^6.2.1",
-    "@depay/web3-blockchains": "^4.5.0",
+    "@depay/web3-assets": "^6.3.0",
+    "@depay/web3-blockchains": "^4.5.1",
     "@depay/web3-client": "^8.2.1",
     "@depay/web3-constants": "^5.2.1",
-    "@depay/web3-exchanges": "^8.4.0",
-    "@depay/web3-payments": "^10.2.0",
+    "@depay/web3-exchanges": "^9.0.0",
+    "@depay/web3-payments": "^10.3.1",
     "@depay/web3-tokens": "^8.1.0",
     "@depay/web3-wallets": "^11.0.1",
-    "decimal.js": "^10.3.1",
-    "react-rangeslider": "^2.2.0"
+    "decimal.js": "^10.3.1"
   },
   "peerDependencies": {
     "ethers": "^5.6.5",
-    "react": "^17",
-    "react-dom": "^17"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
-    "@cypress/react": "^5.9.1",
-    "@depay/web3-mock": "^11.8.0",
+    "@cypress/react": "^5.12.5",
+    "@depay/web3-mock": "^11.8.1",
     "@peculiar/webcrypto": "^1.3.3",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^17.1.0",
@@ -72,7 +71,7 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "cross-fetch": "^3.1.5",
-    "cypress": "^7.6.0",
+    "cypress": "^9.7.0",
     "eslint": "^7.15.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.22.1",
@@ -81,8 +80,8 @@
     "ethers": "^5.6.5",
     "fetch-mock": "^9.11.0",
     "mock-socket": "^9.0.8",
-    "react": "^17.0.1",
-    "react-dom": "^17",
+    "react": "^18",
+    "react-dom": "^18",
     "regenerator-runtime": "^0.13.7",
     "rollup": "^2.34.2",
     "rollup-plugin-delete": "^2.0.0",