@web3auth/modal 10.0.0-alpha.2 → 10.0.0-beta.1

package/dist/lib.cjs/packages/modal/src/ui/components/ExternalWallets.js

@@ -1,274 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var noModal = require('@web3auth/no-modal');
-var Bowser = require('bowser');
-var React = require('react');
-var reactI18next = require('react-i18next');
-var interfaces = require('../interfaces.js');
-var localeImport = require('../localeImport.js');
-var ExternalWalletButton = require('./ExternalWallet/ExternalWalletButton.js');
-var ExternalWalletDetails = require('./ExternalWallet/ExternalWalletDetails.js');
-var ExternalWalletHeader = require('./ExternalWallet/ExternalWalletHeader.js');
-var Loader = require('./Loader.js');
-
-function formatIOSMobile(params) {
-  const encodedUri = encodeURIComponent(params.uri);
-  if (params.link.startsWith("http")) return `${params.link}/wc?uri=${encodedUri}`;
-  if (params.link) return `${params.link}wc?uri=${encodedUri}`;
-  return "";
-}
-function ExternalWallets(props) {
-  const {
-    hideExternalWallets,
-    handleExternalWalletClick,
-    closeModal,
-    config = {},
-    walletConnectUri,
-    showBackButton,
-    modalStatus,
-    chainNamespaces,
-    walletRegistry
-  } = props;
-  const [externalButtons, setExternalButtons] = React.useState([]);
-  const [totalExternalWallets, setTotalExternalWallets] = React.useState(0);
-  const [selectedButton, setSelectedButton] = React.useState(null);
-  const [walletSearch, setWalletSearch] = React.useState("");
-  const [t] = reactI18next.useTranslation(undefined, {
-    i18n: localeImport
-  });
-  const walletDiscoverySupported = React.useMemo(() => {
-    const supported = walletRegistry && Object.keys(walletRegistry.default).length > 0 && Object.keys(walletRegistry.others).length > 0;
-    return supported;
-  }, [walletRegistry]);
-  const deviceDetails = React.useMemo(() => {
-    const browser = Bowser.getParser(window.navigator.userAgent);
-    return {
-      platform: browser.getPlatformType(),
-      os: browser.getOSName(),
-      browser: browser.getBrowserName().toLowerCase()
-    };
-  }, []);
-  const handleWalletSearch = e => {
-    setWalletSearch(e.target.value);
-  };
-  const adapterVisibilityMap = React.useMemo(() => {
-    const canShowMap = {};
-    Object.keys(config).forEach(adapter => {
-      const adapterConfig = config[adapter];
-      if (!adapterConfig.showOnModal) {
-        canShowMap[adapter] = false;
-        return;
-      }
-      if (deviceDetails.platform === "desktop" && adapterConfig.showOnDesktop) {
-        canShowMap[adapter] = true;
-        return;
-      }
-      if ((deviceDetails.platform === "mobile" || deviceDetails.platform === "tablet") && adapterConfig.showOnMobile) {
-        canShowMap[adapter] = true;
-        return;
-      }
-      canShowMap[adapter] = false;
-    });
-    noModal.log.debug("adapter visibility map", canShowMap);
-    return canShowMap;
-  }, [config, deviceDetails.platform]);
-  React.useEffect(() => {
-    var _config$WALLET_CONNEC;
-    noModal.log.debug("loaded external wallets", config, walletConnectUri);
-    const wcAvailable = (((_config$WALLET_CONNEC = config[noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2]) === null || _config$WALLET_CONNEC === void 0 ? void 0 : _config$WALLET_CONNEC.showOnModal) || false) !== false;
-    if (wcAvailable && !walletConnectUri) {
-      handleExternalWalletClick({
-        connector: noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2
-      });
-    }
-  }, [config, handleExternalWalletClick, walletConnectUri]);
-  React.useEffect(() => {
-    if (walletDiscoverySupported) {
-      const isWalletConnectAdapterIncluded = Object.keys(config).some(adapter => adapter === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2);
-      const defaultButtonKeys = new Set(Object.keys(walletRegistry.default));
-      const generateWalletButtons = wallets => {
-        return Object.keys(wallets).reduce((acc, wallet) => {
-          var _walletRegistryItem$c, _walletRegistryItem$i, _config$wallet, _walletRegistryItem$w;
-          if (adapterVisibilityMap[wallet] === false) return acc;
-          const walletRegistryItem = wallets[wallet];
-          let href = "";
-          if (deviceDetails.platform === Bowser.PLATFORMS_MAP.mobile) {
-            var _walletRegistryItem$m, _walletRegistryItem$m2;
-            const universalLink = walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$m = walletRegistryItem.mobile) === null || _walletRegistryItem$m === void 0 ? void 0 : _walletRegistryItem$m.universal;
-            const deepLink = walletRegistryItem === null || walletRegistryItem === void 0 || (_walletRegistryItem$m2 = walletRegistryItem.mobile) === null || _walletRegistryItem$m2 === void 0 ? void 0 : _walletRegistryItem$m2.native;
-            href = universalLink || deepLink;
-          }
-          const registryNamespaces = new Set((_walletRegistryItem$c = walletRegistryItem.chains) === null || _walletRegistryItem$c === void 0 ? void 0 : _walletRegistryItem$c.map(chain => chain.split(":")[0]));
-          const injectedChainNamespaces = new Set((_walletRegistryItem$i = walletRegistryItem.injected) === null || _walletRegistryItem$i === void 0 ? void 0 : _walletRegistryItem$i.map(injected => injected.namespace));
-          const availableChainNamespaces = chainNamespaces.filter(x => registryNamespaces.has(x) || injectedChainNamespaces.has(x));
-          const button = {
-            name: wallet,
-            displayName: walletRegistryItem.name,
-            href,
-            hasInjectedWallet: ((_config$wallet = config[wallet]) === null || _config$wallet === void 0 ? void 0 : _config$wallet.isInjected) || false,
-            hasWalletConnect: isWalletConnectAdapterIncluded && ((_walletRegistryItem$w = walletRegistryItem.walletConnect) === null || _walletRegistryItem$w === void 0 || (_walletRegistryItem$w = _walletRegistryItem$w.sdks) === null || _walletRegistryItem$w === void 0 ? void 0 : _walletRegistryItem$w.includes("sign_v2")),
-            hasInstallLinks: Object.keys(walletRegistryItem.app || {}).length > 0,
-            walletRegistryItem,
-            imgExtension: walletRegistryItem.imgExtension || "svg",
-            chainNamespaces: availableChainNamespaces
-          };
-          // const isBrowserExtensionAvailable = walletRegistryItem.app?.chrome || walletRegistryItem.app?.firefox || walletRegistryItem.app?.edge;
-          if (!button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks) return acc;
-          if (availableChainNamespaces.length === 0) return acc;
-          acc.push(button);
-          return acc;
-        }, []);
-      };
-      // Generate buttons for default and other wallets
-      const defaultButtons = generateWalletButtons(walletRegistry.default);
-      const otherButtons = generateWalletButtons(walletRegistry.others);
-      // Generate custom adapter buttons
-      const customAdapterButtons = Object.keys(config).reduce((acc, adapter) => {
-        if (![noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2].includes(adapter) && !config[adapter].isInjected && adapterVisibilityMap[adapter]) {
-          noModal.log.debug("custom adapter", adapter, config[adapter]);
-          acc.push({
-            name: adapter,
-            displayName: config[adapter].label || adapter,
-            hasInjectedWallet: false,
-            hasWalletConnect: false,
-            hasInstallLinks: false
-          });
-        }
-        return acc;
-      }, []);
-      const allButtons = [...defaultButtons, ...otherButtons];
-      // Filter and set external buttons based on search input
-      if (walletSearch) {
-        const filteredList = allButtons.concat(customAdapterButtons).filter(button => button.name.toLowerCase().includes(walletSearch.toLowerCase()));
-        noModal.log.debug("filteredLists", filteredList);
-        setExternalButtons(filteredList);
-      } else {
-        const sortedButtons = [...allButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customAdapterButtons, ...allButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))];
-        setExternalButtons(sortedButtons);
-      }
-      setTotalExternalWallets(allButtons.length + customAdapterButtons.length);
-      noModal.log.debug("external buttons", allButtons);
-    } else {
-      const buttons = Object.keys(config).reduce((acc, adapter) => {
-        noModal.log.debug("external buttons", adapter, adapterVisibilityMap[adapter]);
-        if (![noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2].includes(adapter) && adapterVisibilityMap[adapter]) {
-          acc.push({
-            name: adapter,
-            displayName: config[adapter].label || adapter,
-            hasInjectedWallet: config[adapter].isInjected,
-            hasWalletConnect: false,
-            hasInstallLinks: false
-          });
-        }
-        return acc;
-      }, []);
-      setExternalButtons(buttons);
-      setTotalExternalWallets(buttons.length);
-    }
-  }, [config, deviceDetails, adapterVisibilityMap, walletRegistry, walletSearch, chainNamespaces, walletDiscoverySupported]);
-  const handleWalletClick = button => {
-    var _button$chainNamespac;
-    // if has injected wallet and single chain namespace, connect to injected wallet
-    const isInjectedConnectorAndSingleChainNamespace = button.hasInjectedWallet && ((_button$chainNamespac = button.chainNamespaces) === null || _button$chainNamespac === void 0 ? void 0 : _button$chainNamespac.length) === 1;
-    // if doesn't have wallet connect & doesn't have install links, must be a custom connector
-    const isCustomConnector = !button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks;
-    if (isInjectedConnectorAndSingleChainNamespace || isCustomConnector) {
-      handleExternalWalletClick({
-        connector: button.name
-      });
-    } else {
-      setSelectedButton(button);
-    }
-  };
-  return jsxRuntime.jsx("div", {
-    className: `w3ajs-external-wallet w3a-group ${totalExternalWallets === 0 ? "w3a-group-loader-height" : ""}`,
-    children: jsxRuntime.jsx("div", {
-      className: "w3a-external-container w3ajs-external-container",
-      children: totalExternalWallets === 0 ? jsxRuntime.jsx(Loader, {
-        modalStatus: interfaces.MODAL_STATUS.CONNECTING,
-        canEmit: false
-      }) : modalStatus === interfaces.MODAL_STATUS.INITIALIZED && (
-      // All wallets
-      !selectedButton ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(ExternalWalletHeader, {
-          disableBackButton: !showBackButton,
-          title: t("modal.external.connect-wallet"),
-          goBack: hideExternalWallets,
-          closeModal: closeModal
-        }), totalExternalWallets > 15 && jsxRuntime.jsx("div", {
-          className: "w3a--py-4",
-          children: jsxRuntime.jsx("input", {
-            className: "w3a--w-full w3a-text-field",
-            name: "passwordless-input",
-            required: true,
-            value: walletSearch,
-            placeholder: t("modal.external.search-wallet", {
-              count: totalExternalWallets
-            }),
-            onFocus: e => {
-              e.target.placeholder = "";
-            },
-            onBlur: e => {
-              e.target.placeholder = t("modal.external.search-wallet", {
-                count: totalExternalWallets
-              });
-            },
-            onChange: e => handleWalletSearch(e)
-          })
-        }), externalButtons.length === 0 ? jsxRuntime.jsx("div", {
-          className: "w3a--w-full w3a--text-center w3a--text-app-gray-400 dark:w3a--text-app-gray-500 w3a--py-6 w3a--flex w3a--justify-center w3a--items-center",
-          children: t("modal.external.no-wallets-found")
-        }) : jsxRuntime.jsx("div", {
-          className: `w3a-adapter-list-container ${totalExternalWallets < 15 ? "w3a--py-4" : ""}`,
-          children: jsxRuntime.jsxs("ul", {
-            className: "w3a-adapter-list w3ajs-wallet-adapters",
-            children: [externalButtons.map(button => {
-              return jsxRuntime.jsxs("li", {
-                className: "w3a-adapter-item w3a-adapter-item--full",
-                children: [deviceDetails.platform === "desktop" && jsxRuntime.jsx(ExternalWalletButton, {
-                  button: button,
-                  handleWalletClick: handleWalletClick
-                }), deviceDetails.platform !== "desktop" && (button.href && button.hasWalletConnect && !button.hasInjectedWallet ? jsxRuntime.jsx("a", {
-                  href: button.href ? formatIOSMobile({
-                    uri: walletConnectUri,
-                    link: button.href
-                  }) : walletConnectUri,
-                  target: "_blank",
-                  className: "w3a--w-full",
-                  rel: "noreferrer noopener",
-                  children: jsxRuntime.jsx(ExternalWalletButton, {
-                    button: button,
-                    handleWalletClick: handleWalletClick
-                  })
-                }) : jsxRuntime.jsx(ExternalWalletButton, {
-                  button: button,
-                  handleWalletClick: handleWalletClick
-                }))]
-              }, button.name + button.displayName);
-            }), totalExternalWallets > 10 && !walletSearch && jsxRuntime.jsxs("li", {
-              className: "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-0.5 w3a--my-4 w3a--w-full w3a--mx-auto w3a-adapter-item--full",
-              children: [jsxRuntime.jsx("p", {
-                className: "w3a--text-xs w3a--text-app-gray-500 dark:w3a--text-app-gray-400",
-                children: t("modal.external.search-text")
-              }), jsxRuntime.jsx("p", {
-                className: "w3a--text-xs w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white",
-                children: t("modal.external.search-subtext")
-              })]
-            })]
-          })
-        })]
-      }) :
-      // Wallet Detail
-      jsxRuntime.jsx(ExternalWalletDetails, {
-        connectButton: selectedButton,
-        goBack: () => setSelectedButton(null),
-        walletConnectUri: walletConnectUri,
-        closeModal: closeModal,
-        handleExternalWalletClick: handleExternalWalletClick
-      }))
-    })
-  });
-}
-
-module.exports = ExternalWallets;

package/dist/lib.cjs/packages/modal/src/ui/components/Footer.js

@@ -1,20 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var SelfCustodyViaWeb3Auth = require('./SelfCustodyViaWeb3Auth.js');
-
-function Footer() {
-  return jsxRuntime.jsx("div", {
-    className: "w3a-modal__footer",
-    children: jsxRuntime.jsx("div", {
-      className: "w3a-footer",
-      children: jsxRuntime.jsx("div", {
-        children: jsxRuntime.jsx("div", {
-          children: jsxRuntime.jsx(SelfCustodyViaWeb3Auth, {})
-        })
-      })
-    })
-  });
-}
-
-module.exports = Footer;

package/dist/lib.cjs/packages/modal/src/ui/components/Header.js

@@ -1,81 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var reactI18next = require('react-i18next');
-var interfaces = require('../interfaces.js');
-var localeImport = require('../localeImport.js');
-var Icon = require('./Icon.js');
-
-function Header(props) {
-  const {
-    onClose,
-    appLogo,
-    appName
-  } = props;
-  const [t] = reactI18next.useTranslation(undefined, {
-    i18n: localeImport
-  });
-  const headerLogo = [interfaces.DEFAULT_LOGO_DARK, interfaces.DEFAULT_LOGO_LIGHT].includes(appLogo) ? "" : appLogo;
-  const subtitle = t("modal.header-subtitle-name", {
-    appName
-  });
-  return jsxRuntime.jsxs("div", {
-    className: "w3a-modal__header",
-    children: [jsxRuntime.jsx("div", {
-      className: "w3a-header",
-      children: jsxRuntime.jsxs("div", {
-        children: [headerLogo && jsxRuntime.jsx("div", {
-          className: "w3a-header__logo",
-          children: jsxRuntime.jsx("img", {
-            src: headerLogo,
-            alt: ""
-          })
-        }), jsxRuntime.jsx("div", {
-          className: "w3a-header__title",
-          children: t("modal.header-title")
-        }), jsxRuntime.jsxs("div", {
-          className: "w3a-header__subtitle",
-          children: [subtitle, jsxRuntime.jsxs("div", {
-            className: "w3a--relative w3a--flex w3a--flex-col w3a--items-center w3a--group w3a--cursor-pointer",
-            children: [jsxRuntime.jsx(Icon, {
-              iconName: "information-circle-light",
-              darkIconName: "information-circle"
-            }), jsxRuntime.jsxs("div", {
-              className: "w3a--absolute w3a--top-4 w3a--z-20 w3a--flex-col w3a--items-center w3a--hidden w3a--mb-5 group-hover:w3a--flex",
-              children: [jsxRuntime.jsx("div", {
-                className: "w3a--w-3 w3a--h-3 w3a--ml-[3px] -w3a--mb-2 w3a--rotate-45 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600"
-              }), jsxRuntime.jsxs("div", {
-                className: `w3a--relative w3a--p-4 w3a--w-[270px] w3a--translate-x-[-16px] w3a--text-xs w3a--leading-none w3a--text-app-white w3a--rounded-md w3a--bg-app-gray-50 dark:w3a--bg-app-gray-600 w3a--shadow-lg ${subtitle.length > 34 ? "-w3a--ml-[100px]" : ""}`,
-                children: [jsxRuntime.jsx("div", {
-                  className: "w3a--text-xs w3a--font-medium w3a--mb-1 w3a--text-app-gray-900 dark:w3a--text-app-white",
-                  children: t("modal.header-tooltip-title")
-                }), jsxRuntime.jsx("div", {
-                  className: "w3a--text-xs w3a--text-app-gray-400",
-                  children: t("modal.header-tooltip-desc")
-                })]
-              })]
-            })]
-          })]
-        })]
-      })
-    }), jsxRuntime.jsx("button", {
-      type: "button",
-      onClick: onClose,
-      className: "w3a-header__button w3ajs-close-btn ",
-      children: jsxRuntime.jsx(Icon, {
-        iconName: "x-light",
-        darkIconName: "x-dark"
-      })
-    })]
-  });
-}
-const memoizedHeader = /*#__PURE__*/React.memo(Header, (prevProps, nextProps) => {
-  if (prevProps.appLogo !== nextProps.appLogo) {
-    return true;
-  }
-  return false;
-});
-memoizedHeader.displayName = "Header";
-
-module.exports = memoizedHeader;

package/dist/lib.cjs/packages/modal/src/ui/components/Icon.js

@@ -1,73 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var arrowLeftDark = require('../assets/arrow-left-dark.svg.js');
-var arrowLeftLight = require('../assets/arrow-left-light.svg.js');
-var xDark = require('../assets/x-dark.svg.js');
-var xLight = require('../assets/x-light.svg.js');
-
-const icons = {
-  "arrow-left": {
-    image: "https://images.web3auth.io/circle-arrow-left.svg"
-  },
-  close: {
-    image: "https://images.web3auth.io/close.svg"
-  },
-  "expand-light": {
-    image: "https://images.web3auth.io/expand-light.svg"
-  },
-  expand: {
-    image: "https://images.web3auth.io/expand.svg"
-  },
-  connected: {
-    image: "https://images.web3auth.io/connected.svg"
-  },
-  "information-circle-light": {
-    image: "https://images.web3auth.io/information-circle-light.svg"
-  },
-  "information-circle": {
-    image: "https://images.web3auth.io/information-circle.svg"
-  },
-  "arrow-left-light": {
-    image: arrowLeftLight
-  },
-  "x-light": {
-    image: xLight
-  },
-  "arrow-left-dark": {
-    image: arrowLeftDark
-  },
-  "x-dark": {
-    image: xDark
-  }
-};
-function Icon(props) {
-  const {
-    iconName,
-    iconTitle = "",
-    height = "auto",
-    width = "auto",
-    darkIconName = ""
-  } = props;
-  const h = height === "auto" ? "w3a--h-auto" : `w3a--h-[${height}px]`;
-  const w = width === "auto" ? "w3a--w-auto" : `w3a--w-[${width}px]`;
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [icons[iconName] && jsxRuntime.jsx("img", {
-      className: `${iconTitle ? "w3a--cursor-pointer" : ""} dark:w3a--hidden w3a--block ${h} ${w}`,
-      height: height,
-      width: width,
-      src: icons[iconName].image,
-      alt: iconName,
-      title: iconTitle
-    }), icons[darkIconName] && jsxRuntime.jsx("img", {
-      className: `${iconTitle ? "w3a--cursor-pointer" : ""} w3a--hidden dark:w3a--block ${h} ${w}`,
-      height: height,
-      width: width,
-      src: icons[darkIconName].image,
-      alt: darkIconName,
-      title: iconTitle
-    })]
-  });
-}
-
-module.exports = Icon;

package/dist/lib.cjs/packages/modal/src/ui/components/Image.js

@@ -1,51 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var ThemeContext = require('../context/ThemeContext.js');
-
-function Image(props) {
-  const {
-    hoverImageId,
-    darkHoverImageId,
-    imageId,
-    darkImageId,
-    isButton = false,
-    height = "auto",
-    width = "auto",
-    fallbackImageId,
-    extension = "svg"
-  } = props;
-  const {
-    isDark
-  } = React.useContext(ThemeContext.ThemedContext);
-  const imgName = isDark && darkImageId ? darkImageId : imageId;
-  const hoverImgName = isDark && darkHoverImageId ? darkHoverImageId : hoverImageId;
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx("img", {
-      src: `https://images.web3auth.io/${imgName}.${extension}`,
-      height: height,
-      width: width,
-      alt: imageId,
-      className: "image-icon w3a--object-contain w3a--rounded",
-      onError: ({
-        currentTarget
-      }) => {
-        if (fallbackImageId) {
-          // eslint-disable-next-line no-param-reassign
-          currentTarget.onerror = null; // prevents looping
-          // eslint-disable-next-line no-param-reassign
-          currentTarget.src = `https://images.web3auth.io/${fallbackImageId}.svg`;
-        }
-      }
-    }), isButton ? jsxRuntime.jsx("img", {
-      src: `https://images.web3auth.io/${hoverImgName}.${extension}`,
-      height: height,
-      width: width,
-      alt: hoverImageId,
-      className: "hover-icon w3a--object-contain w3a--rounded"
-    }) : null]
-  });
-}
-
-module.exports = Image;

package/dist/lib.cjs/packages/modal/src/ui/components/Loader.js

@@ -1,59 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var noModal = require('@web3auth/no-modal');
-var React = require('react');
-var interfaces = require('../interfaces.js');
-var Icon = require('./Icon.js');
-
-const closeIcon = jsxRuntime.jsx(Icon, {
-  iconName: "close"
-});
-function Loader(props) {
-  const {
-    message,
-    modalStatus,
-    label,
-    onClose,
-    canEmit = true
-  } = props;
-  React.useEffect(() => {
-    noModal.log.debug("loader re-rendering");
-    if (modalStatus === interfaces.MODAL_STATUS.CONNECTED && canEmit) {
-      setTimeout(() => {
-        onClose();
-      }, 3000);
-    }
-  }, [canEmit, modalStatus, onClose]);
-  return modalStatus !== interfaces.MODAL_STATUS.INITIALIZED ? jsxRuntime.jsxs("div", {
-    className: "w3ajs-modal-loader w3a-modal__loader",
-    children: [jsxRuntime.jsx("div", {
-      className: "w3a-modal__loader-content",
-      children: jsxRuntime.jsxs("div", {
-        className: "w3a-modal__loader-info",
-        children: [modalStatus === interfaces.MODAL_STATUS.CONNECTING && jsxRuntime.jsx("div", {
-          className: "w3ajs-modal-loader__spinner w3a-spinner",
-          children: jsxRuntime.jsx("div", {
-            className: "w3a-spinner__spinner"
-          })
-        }), jsxRuntime.jsx("div", {
-          className: "w3ajs-modal-loader__label w3a-spinner-label",
-          children: label
-        }), modalStatus === noModal.CONNECTOR_STATUS.CONNECTED && jsxRuntime.jsx("div", {
-          className: "w3ajs-modal-loader__message w3a-spinner-message",
-          children: message
-        }), modalStatus === noModal.CONNECTOR_STATUS.ERRORED && jsxRuntime.jsx("div", {
-          className: "w3ajs-modal-loader__message w3a-spinner-message w3a-spinner-message--error",
-          children: message
-        })]
-      })
-    }), (modalStatus === noModal.CONNECTOR_STATUS.CONNECTED || modalStatus === noModal.CONNECTOR_STATUS.ERRORED) && jsxRuntime.jsx("button", {
-      type: "button",
-      className: "w3a-header__button w3ajs-loader-close-btn",
-      onClick: onClose,
-      children: closeIcon
-    })]
-  }) : null;
-}
-
-module.exports = Loader;