@prosopo/procaptcha-bundle 0.3.1 → 0.3.3

package/dist/cjs/account/dist/extension/ExtensionWeb3.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Extension = require("./Extension.cjs");
+const common = require("@prosopo/common");
+const extensionDapp = require("@polkadot/extension-dapp");
+class ExtensionWeb3 extends Extension.Extension {
+  async getAccount(config) {
+    const { dappName, userAccountAddress: address } = config;
+    if (!address) {
+      throw new common.ProsopoError("WIDGET.NO_ACCOUNTS_FOUND", { context: { error: "No account address provided" } });
+    }
+    const extensions = await extensionDapp.web3Enable(dappName);
+    if (extensions.length === 0) {
+      throw new common.ProsopoError("WIDGET.NO_EXTENSION_FOUND");
+    }
+    for (const extension of extensions) {
+      const accounts = await extension.accounts.get();
+      const account = accounts.find((account2) => account2.address === address);
+      if (account) {
+        return { account, extension };
+      }
+    }
+    throw new common.ProsopoError("WIDGET.ACCOUNT_NOT_FOUND", {
+      context: { error: `No account found matching ${address}` }
+    });
+  }
+}
+exports.ExtensionWeb3 = ExtensionWeb3;

package/dist/cjs/account/dist/index.cjs

@@ -2,5 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Extension = require("./extension/Extension.cjs");
 const ExtensionWeb2 = require("./extension/ExtensionWeb2.cjs");
+const ExtensionWeb3 = require("./extension/ExtensionWeb3.cjs");
 exports.Extension = Extension.Extension;
 exports.ExtensionWeb2 = ExtensionWeb2.ExtensionWeb2;
+exports.ExtensionWeb3 = ExtensionWeb3.ExtensionWeb3;

package/dist/cjs/index.cjs

@@ -3,9 +3,11 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("react/jsx-runtime");
 const types = require("@prosopo/types");
 const procaptchaReact = require("@prosopo/procaptcha-react");
+require("./procaptcha-frictionless/dist/index.cjs");
 require("./procaptcha-pow/dist/index.cjs");
 const util = require("@prosopo/util");
 const client = require("react-dom/client");
+const ProcaptchaFrictionless = require("./procaptcha-frictionless/dist/ProcaptchaFrictionless.cjs");
 const ProcaptchaPoW = require("./procaptcha-pow/dist/components/ProcaptchaPoW.cjs");
 const BUNDLE_NAME = "procaptcha.bundle.js";
 const getProcaptchaScript = () => document.querySelector(`script[src*="${BUNDLE_NAME}"]`);
@@ -32,7 +34,8 @@ const getConfig = (siteKey) => {
       address: siteKey
     },
     serverUrl: process.env.PROSOPO_SERVER_URL || "",
-    mongoAtlasUri: process.env._DEV_ONLY_WATCH_EVENTS === "true" || false
+    mongoAtlasUri: process.env.PROSOPO_MONGO_EVENTS_URI || "",
+    devOnlyWatchEvents: process.env._DEV_ONLY_WATCH_EVENTS === "true" || false
   });
 };
 const getParentForm = (element) => element.closest("form");
@@ -101,10 +104,16 @@ const renderLogic = (elements, config, renderOptions) => {
     if (challengeValidLengthAttribute) {
       config.challengeValidLength = parseInt(challengeValidLengthAttribute);
     }
-    if (renderOptions?.captchaType === "pow") {
-      client.createRoot(element).render(/* @__PURE__ */ jsxRuntime.jsx(ProcaptchaPoW.ProcaptchaPow, { config, callbacks }));
-    } else {
-      client.createRoot(element).render(/* @__PURE__ */ jsxRuntime.jsx(procaptchaReact.Procaptcha, { config, callbacks }));
+    switch (renderOptions?.captchaType) {
+      case "pow":
+        client.createRoot(element).render(/* @__PURE__ */ jsxRuntime.jsx(ProcaptchaPoW.ProcaptchaPow, { config, callbacks }));
+        break;
+      case "frictionless":
+        client.createRoot(element).render(/* @__PURE__ */ jsxRuntime.jsx(ProcaptchaFrictionless.ProcaptchaFrictionless, { config, callbacks }));
+        break;
+      default:
+        client.createRoot(element).render(/* @__PURE__ */ jsxRuntime.jsx(procaptchaReact.Procaptcha, { config, callbacks }));
+        break;
     }
   });
 };
@@ -117,7 +126,7 @@ const implicitRender = () => {
       return;
     }
     const features = Object.values(types.FeaturesEnum);
-    const captchaType = features.find((feature) => feature === util.at(elements, 0).getAttribute("data-captcha-type")) || "image";
+    const captchaType = features.find((feature) => feature === util.at(elements, 0).getAttribute("data-captcha-type")) || "frictionless";
     renderLogic(elements, getConfig(siteKey), { captchaType, siteKey });
   }
 };

package/dist/cjs/procaptcha-frictionless/dist/ProcaptchaFrictionless.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const procaptchaReact = require("@prosopo/procaptcha-react");
+require("../../web-components/dist/index.cjs");
+require("../../procaptcha-pow/dist/index.cjs");
+const botd = require("@fingerprintjs/botd");
+const react = require("react");
+const CaptchaPlaceholder = require("../../web-components/dist/CaptchaPlaceholder.cjs");
+const ProcaptchaPoW = require("../../procaptcha-pow/dist/components/ProcaptchaPoW.cjs");
+const ProcaptchaFrictionless = ({ config, callbacks }) => {
+  const [componentToRender, setComponentToRender] = react.useState(jsxRuntime.jsx(CaptchaPlaceholder.ProcaptchaPlaceholder, { darkMode: config.theme }));
+  react.useEffect(() => {
+    const detectBot = async () => {
+      const botd$1 = await botd.load();
+      const result = botd$1.detect();
+      if (result.bot) {
+        setComponentToRender(jsxRuntime.jsx(procaptchaReact.Procaptcha, { config, callbacks }));
+      } else {
+        setComponentToRender(jsxRuntime.jsx(ProcaptchaPoW.ProcaptchaPow, { config, callbacks }));
+      }
+    };
+    detectBot();
+  }, [config, callbacks]);
+  return componentToRender;
+};
+exports.ProcaptchaFrictionless = ProcaptchaFrictionless;

package/dist/cjs/procaptcha-frictionless/dist/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ProcaptchaFrictionless = require("./ProcaptchaFrictionless.cjs");
+exports.ProcaptchaFrictionless = ProcaptchaFrictionless.ProcaptchaFrictionless;

package/dist/cjs/procaptcha-pow/dist/Services/Manager.cjs

@@ -1,29 +1,47 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const types = require("@prosopo/types");
 const Api = require("@polkadot/api/promise/Api");
 require("../../../account/dist/index.cjs");
 const keyring = require("@polkadot/keyring");
-const types = require("@prosopo/types");
 const contract = require("@prosopo/contract");
 const common = require("@prosopo/common");
 const api = require("@prosopo/api");
 const ws = require("@polkadot/rpc-provider/ws");
 const contractInfo = require("@prosopo/captcha-contract/contract-info");
+const procaptchaCommon = require("@prosopo/procaptcha-common");
+const procaptcha = require("@prosopo/procaptcha");
 const SolverService = require("./SolverService.cjs");
 const ExtensionWeb2 = require("../../../account/dist/extension/ExtensionWeb2.cjs");
-const Manager = async (configInput) => {
+const Manager = (configInput, state, onStateUpdate, callbacks) => {
+  const defaultState = () => {
+    return {
+      showModal: false,
+      loading: false,
+      index: 0,
+      challenge: void 0,
+      solutions: void 0,
+      isHuman: false,
+      captchaApi: void 0,
+      account: void 0
+    };
+  };
+  const clearTimeout = () => {
+    window.clearTimeout(state.timeout);
+    updateState({ timeout: void 0 });
+  };
   const getConfig = () => {
-    const config2 = {
+    const config = {
       userAccountAddress: "",
       ...configInput
     };
-    return types.ProcaptchaConfigSchema.parse(config2);
+    return types.ProcaptchaConfigSchema.parse(config);
   };
-  const getNetwork = (config2) => {
-    const network = config2.networks[config2.defaultNetwork];
+  const getNetwork = (config) => {
+    const network = config.networks[config.defaultNetwork];
     if (!network) {
       throw new common.ProsopoEnvError("DEVELOPER.NETWORK_NOT_FOUND", {
-        context: { error: `No network found for environment ${config2.defaultEnvironment}` }
+        context: { error: `No network found for environment ${config.defaultEnvironment}` }
       });
     }
     return network;
@@ -35,25 +53,71 @@ const Manager = async (configInput) => {
     const keyring$1 = new keyring.Keyring({ type, ss58Format: api2.registry.chainSS58 });
     return new contract.ProsopoCaptchaContract(api2, JSON.parse(contractInfo.ContractAbi), network.contract.address, "prosopo", 0, keyring$1.addFromAddress(getConfig().account.address || ""));
   };
-  const config = getConfig();
-  if (!config.web2 && !config.userAccountAddress) {
-    throw new common.ProsopoEnvError("GENERAL.ACCOUNT_NOT_FOUND", {
-      context: { error: "Account address has not been set for web3 mode" }
-    });
-  }
-  const ext = new ExtensionWeb2.ExtensionWeb2();
-  const account = await ext.getAccount(config);
-  const contract$1 = await loadContract();
-  const getRandomProviderResponse = await contract.wrapQuery(contract$1.query.getRandomActiveProvider, contract$1.query)(account.account.address, configInput.account.address || "");
-  const providerUrl = common.trimProviderUrl(getRandomProviderResponse.provider.url.toString());
-  const providerApi = new api.ProviderApi(getNetwork(getConfig()), providerUrl, configInput.account.address || "");
-  const challenge = await providerApi.getPowCaptchaChallenge(account.account.address, configInput.account.address || "");
-  console.log("challenge", challenge);
-  console.log("challenge", challenge.challenge);
-  console.log("challenge", challenge.difficulty);
-  const solution = SolverService.solvePoW(challenge.challenge, challenge.difficulty);
-  console.log("solution", solution);
-  const verifiedSolution = await providerApi.submitPowCaptchaSolution(challenge, account.account.address, configInput.account.address || "", getRandomProviderResponse, solution);
-  return verifiedSolution;
+  const getAccount = () => {
+    if (!state.account) {
+      throw new common.ProsopoEnvError("GENERAL.ACCOUNT_NOT_FOUND", { context: { error: "Account not loaded" } });
+    }
+    const account = state.account;
+    return account;
+  };
+  const getDappAccount = () => {
+    if (!state.dappAccount) {
+      throw new common.ProsopoEnvError("GENERAL.SITE_KEY_MISSING");
+    }
+    const dappAccount = state.dappAccount;
+    return dappAccount;
+  };
+  const getBlockNumber = () => {
+    if (!state.blockNumber) {
+      throw new common.ProsopoContractError("CAPTCHA.INVALID_BLOCK_NO", { context: { error: "Block number not found" } });
+    }
+    const blockNumber = state.blockNumber;
+    return blockNumber;
+  };
+  const updateState = procaptchaCommon.buildUpdateState(state, onStateUpdate);
+  const resetState = () => {
+    clearTimeout();
+    updateState(defaultState());
+  };
+  const start = async () => {
+    if (state.loading) {
+      return;
+    }
+    if (state.isHuman) {
+      return;
+    }
+    resetState();
+    updateState({ loading: true });
+    const config = getConfig();
+    updateState({ dappAccount: config.account.address });
+    await procaptcha.sleep(100);
+    if (!config.web2 && !config.userAccountAddress) {
+      throw new common.ProsopoEnvError("GENERAL.ACCOUNT_NOT_FOUND", {
+        context: { error: "Account address has not been set for web3 mode" }
+      });
+    }
+    const ext = new ExtensionWeb2.ExtensionWeb2();
+    const account = await ext.getAccount(config);
+    const contract$1 = await loadContract();
+    const events = procaptchaCommon.getDefaultEvents(onStateUpdate, state, callbacks);
+    const getRandomProviderResponse = await contract.wrapQuery(contract$1.query.getRandomActiveProvider, contract$1.query)(account.account.address, getDappAccount());
+    const providerUrl = common.trimProviderUrl(getRandomProviderResponse.provider.url.toString());
+    const providerApi = new api.ProviderApi(getNetwork(getConfig()), providerUrl, getDappAccount());
+    const challenge = await providerApi.getPowCaptchaChallenge(account.account.address, getDappAccount());
+    const solution = SolverService.solvePoW(challenge.challenge, challenge.difficulty);
+    await providerApi.submitPowCaptchaSolution(challenge, getAccount().account.address, getDappAccount(), getRandomProviderResponse, solution);
+    if (state.isHuman) {
+      events.onHuman({
+        providerUrl,
+        [types.ApiParams.user]: getAccount().account.address,
+        [types.ApiParams.dapp]: getDappAccount(),
+        [types.ApiParams.challengeId]: challenge.challenge,
+        [types.ApiParams.blockNumber]: getBlockNumber()
+      });
+    }
+  };
+  return {
+    start
+  };
 };
 exports.Manager = Manager;

package/dist/cjs/procaptcha-pow/dist/components/Captcha.cjs

@@ -2,77 +2,40 @@
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 require("../../../web-components/dist/index.cjs");
 const Manager = require("../Services/Manager.cjs");
-const react = require("@emotion/react");
-const react$1 = require("react");
+const procaptchaCommon = require("@prosopo/procaptcha-common");
+const react = require("react");
 const theme = require("../../../web-components/dist/theme.cjs");
+const Containers = require("../../../web-components/dist/Containers.cjs");
+const WidgetConstants = require("../../../web-components/dist/WidgetConstants.cjs");
 const LoadingSpinner = require("../../../web-components/dist/LoadingSpinner.cjs");
 const Checkbox = require("../../../web-components/dist/Checkbox.cjs");
-const logoStyle = react.css`
-    align-items: center;
-    justify-content: flex-end;
-    display: flex;
-    padding: 8px;
-
-    @media (max-width: 245px) {
-        &:nth-of-type(1),
-        &:nth-of-type(2) {
-            display: none;
-        } /* Both logos hidden */
-    }
-
-    @media (min-width: 245px) and (max-width: 400px) {
-        &:nth-of-type(1) {
-            display: flex;
-        } /* logoWithText */
-        &:nth-of-type(2) {
-            display: none;
-        } /* logoWithoutText */
-    }
-
-    @media (min-width: 401px) {
-        &:nth-of-type(1) {
-            display: none;
-        } /* logoWithText */
-        &:nth-of-type(2) {
-            display: flex;
-        } /* logoWithoutText */
-    }
-`;
+const Logo = require("../../../web-components/dist/Logo.cjs");
 const Procaptcha = (props) => {
-  const [checked, setChecked] = react$1.useState(false);
-  const [loading, setLoading] = react$1.useState(false);
-  const darkMode = props.config.theme;
-  const styleWidth = { maxWidth: "400px", minWidth: "200px", margin: "8px" };
-  const themeColor = darkMode ? "light" : "dark";
-  const theme$1 = react$1.useMemo(() => darkMode === "light" ? theme.lightTheme : theme.darkTheme, [darkMode]);
-  const handlePowCaptcha = async () => {
-    setLoading(true);
-    Manager.Manager(props.config).then((verified) => {
-      if (verified.verified) {
-        console.log("verified");
-        setChecked(true);
-      }
-      setLoading(false);
-    });
-  };
-  return jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: jsxRuntime.jsxs("div", { style: styleWidth, "data-cy": "button-human", children: [" ", jsxRuntime.jsxs("div", { style: {
-    padding: "8px",
+  const config = props.config;
+  const themeColor = config.theme === "light" ? "light" : "dark";
+  const theme$1 = props.config.theme === "light" ? theme.lightTheme : theme.darkTheme;
+  const callbacks = props.callbacks || {};
+  const [state, _updateState] = procaptchaCommon.useProcaptcha(react.useState, react.useRef);
+  const updateState = procaptchaCommon.buildUpdateState(state, _updateState);
+  const manager = Manager.Manager(config, state, updateState, callbacks);
+  return jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: jsxRuntime.jsx(Containers.ContainerDiv, { children: jsxRuntime.jsx(Containers.WidthBasedStylesDiv, { children: jsxRuntime.jsxs("div", { style: WidgetConstants.WIDGET_DIMENSIONS, "data-cy": "button-human", children: [" ", jsxRuntime.jsxs("div", { style: {
+    padding: "2px",
     border: "1px solid",
     backgroundColor: theme$1.palette.background.default,
     borderColor: theme$1.palette.grey[300],
-    borderRadius: "8px",
+    borderRadius: "4px",
     display: "flex",
-    justifyContent: "space-between",
     alignItems: "center",
-    flexWrap: "wrap"
-  }, children: [jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: jsxRuntime.jsxs("div", { style: {
+    flexWrap: "wrap",
+    justifyContent: "space-between",
+    minHeight: `${WidgetConstants.WIDGET_INNER_HEIGHT}px`,
+    overflow: "hidden"
+  }, children: [jsxRuntime.jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: jsxRuntime.jsx("div", { style: {
     display: "flex",
     justifyContent: "flex-start",
     alignItems: "center",
     flexWrap: "wrap"
-  }, children: [jsxRuntime.jsx("div", { style: {
-    height: "50px",
-    width: "50px",
+  }, children: jsxRuntime.jsx("div", { style: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -80,14 +43,6 @@ const Procaptcha = (props) => {
     verticalAlign: "middle"
   }, children: jsxRuntime.jsx("div", { style: {
     display: "flex"
-  }, children: jsxRuntime.jsx("div", { style: { flex: 1 }, children: loading ? jsxRuntime.jsx(LoadingSpinner.LoadingSpinner, { themeColor }) : jsxRuntime.jsx(Checkbox.Checkbox, { checked, onChange: handlePowCaptcha, themeColor: props.config.theme || "light" }) }) }) }), jsxRuntime.jsx("div", { style: { padding: 1 }, children: jsxRuntime.jsx("span", { style: { color: theme$1.palette.background.contrastText, paddingLeft: "4px" }, children: "I am a human" }) })] }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("a", { href: "https://www.prosopo.io/#features?ref=accounts.prosopo.io&utm_campaign=widget&utm_medium=checkbox", target: "_blank", "aria-label": "Visit prosopo.io to learn more about the service and its accessibility options.", children: jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { css: logoStyle, dangerouslySetInnerHTML: {
-    __html: darkMode === "light" ? logoWithoutTextBlack : logoWithoutTextWhite
-  } }), jsxRuntime.jsx("div", { css: logoStyle, dangerouslySetInnerHTML: {
-    __html: darkMode === "light" ? logoWithTextBlack : logoWithTextWhite
-  } })] }) }) }) })] })] }) }) });
+  }, children: jsxRuntime.jsx("div", { style: { flex: 1 }, children: state.loading ? jsxRuntime.jsx(LoadingSpinner.LoadingSpinner, { themeColor }) : jsxRuntime.jsx(Checkbox.Checkbox, { checked: state.isHuman, onChange: manager.start, themeColor, labelText: "I am human" }) }) }) }) }) }), jsxRuntime.jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: jsxRuntime.jsx("a", { href: WidgetConstants.WIDGET_URL, target: "_blank", "aria-label": WidgetConstants.WIDGET_URL_TEXT, children: jsxRuntime.jsx("div", { style: { flex: 1 }, children: jsxRuntime.jsx(Logo, { themeColor }) }) }) })] })] }) }) }) }) });
 };
-const logoWithTextBlack = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2062.63 468.67" height="35px" width="140px"><defs><style>.cls-1{fill:#1d1d1b;}</style></defs><title>Prosopo Logo Black</title><path class="cls-1" d="M335.55,1825.19A147.75,147.75,0,0,1,483.3,1972.94h50.5c0-109.49-88.76-198.25-198.25-198.25v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M269.36,1891.39A147.74,147.74,0,0,1,417.1,2039.13h50.5c0-109.49-88.75-198.24-198.24-198.24v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M414,2157.17a147.75,147.75,0,0,1-147.74-147.74h-50.5c0,109.49,88.75,198.24,198.24,198.24v-50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M480.17,2091a147.74,147.74,0,0,1-147.74-147.75H281.92c0,109.49,88.76,198.25,198.25,198.25V2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M862.8,2017.5q-27.39,22.86-78.25,22.86h-65v112.19H654.82v-312h134q46.32,0,73.86,24.13t27.55,74.72Q890.2,1994.64,862.8,2017.5ZM813,1905.1q-12.37-10.36-34.7-10.38H719.59v91.87h58.75q22.32,0,34.7-11.22t12.39-35.56Q825.43,1915.48,813,1905.1Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1045.69,1916.42c.78.08,2.51.19,5.19.32v61.81c-3.81-.42-7.2-.71-10.16-.85s-5.36-.21-7.2-.21q-36.4,0-48.89,23.71-7,13.33-7,41.06v110.29H916.89V1921.82h57.58V1962q14-23.07,24.34-31.54,16.94-14.18,44-14.18C1044,1916.32,1044.92,1916.35,1045.69,1916.42Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1265.64,2124.32q-29.21,36.06-88.69,36.06t-88.69-36.06Q1059,2088.26,1059,2037.5q0-49.9,29.22-86.5t88.69-36.59q59.47,0,88.69,36.59t29.21,86.5Q1294.85,2088.26,1265.64,2124.32ZM1217.38,2091q14.17-18.81,14.18-53.48t-14.18-53.37q-14.19-18.7-40.64-18.71T1136,1984.13q-14.29,18.72-14.29,53.37T1136,2091q14.28,18.81,40.75,18.81T1217.38,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1371.81,2078.88q1.92,16.1,8.29,22.87,11.28,12.06,41.7,12.06,17.85,0,28.39-5.29t10.53-15.88a17.12,17.12,0,0,0-8.48-15.45q-8.49-5.28-63.12-18.2-39.33-9.73-55.41-24.35-16.08-14.39-16.09-41.49,0-32,25.14-54.93t70.75-23q43.26,0,70.53,17.25t31.29,59.59H1455q-1.27-11.64-6.58-18.42-10-12.27-34-12.28-19.74,0-28.13,6.14t-8.38,14.4c0,6.91,3,11.93,8.92,15q8.89,4.89,63,16.73,36,8.46,54.05,25.61,17.77,17.35,17.78,43.39,0,34.3-25.56,56t-79,21.7q-54.51,0-80.49-23t-26-58.53Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1745.54,2124.32q-29.22,36.06-88.7,36.06t-88.69-36.06q-29.2-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.7,36.59t29.21,86.5Q1774.75,2088.26,1745.54,2124.32ZM1697.27,2091q14.19-18.81,14.19-53.48t-14.19-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.28,53.37t14.28,53.48q14.3,18.81,40.75,18.81T1697.27,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1992.75,1946.59q28.24,29.84,28.23,87.63,0,61-27.58,92.93t-71.06,32q-27.69,0-46-13.76-10-7.62-19.6-22.23v120.24H1797V1921.82h57.79v34.08q9.79-15,20.88-23.71,20.23-15.43,48.15-15.45Q1964.53,1916.74,1992.75,1946.59Zm-46.3,43.39q-12.3-20.52-39.88-20.53-33.15,0-45.54,31.11-6.43,16.51-6.42,41.92,0,40.21,21.58,56.51,12.82,9.53,30.37,9.53,25.45,0,38.83-19.48t13.36-51.86Q1958.75,2010.51,1946.45,1990Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M2249.14,2124.32q-29.2,36.06-88.69,36.06t-88.69-36.06q-29.22-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.69,36.59t29.22,86.5Q2278.36,2088.26,2249.14,2124.32ZM2200.88,2091q14.19-18.81,14.18-53.48t-14.18-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.29,53.37t14.29,53.48q14.3,18.81,40.75,18.81T2200.88,2091Z" transform="translate(-215.73 -1774.69)"/></svg>';
-const logoWithTextWhite = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2062.63 468.67" height="35px" width="140px"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Prosopo Logo Black</title><path class="cls-1" d="M335.55,1825.19A147.75,147.75,0,0,1,483.3,1972.94h50.5c0-109.49-88.76-198.25-198.25-198.25v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M269.36,1891.39A147.74,147.74,0,0,1,417.1,2039.13h50.5c0-109.49-88.75-198.24-198.24-198.24v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M414,2157.17a147.75,147.75,0,0,1-147.74-147.74h-50.5c0,109.49,88.75,198.24,198.24,198.24v-50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M480.17,2091a147.74,147.74,0,0,1-147.74-147.75H281.92c0,109.49,88.76,198.25,198.25,198.25V2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M862.8,2017.5q-27.39,22.86-78.25,22.86h-65v112.19H654.82v-312h134q46.32,0,73.86,24.13t27.55,74.72Q890.2,1994.64,862.8,2017.5ZM813,1905.1q-12.37-10.36-34.7-10.38H719.59v91.87h58.75q22.32,0,34.7-11.22t12.39-35.56Q825.43,1915.48,813,1905.1Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1045.69,1916.42c.78.08,2.51.19,5.19.32v61.81c-3.81-.42-7.2-.71-10.16-.85s-5.36-.21-7.2-.21q-36.4,0-48.89,23.71-7,13.33-7,41.06v110.29H916.89V1921.82h57.58V1962q14-23.07,24.34-31.54,16.94-14.18,44-14.18C1044,1916.32,1044.92,1916.35,1045.69,1916.42Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1265.64,2124.32q-29.21,36.06-88.69,36.06t-88.69-36.06Q1059,2088.26,1059,2037.5q0-49.9,29.22-86.5t88.69-36.59q59.47,0,88.69,36.59t29.21,86.5Q1294.85,2088.26,1265.64,2124.32ZM1217.38,2091q14.17-18.81,14.18-53.48t-14.18-53.37q-14.19-18.7-40.64-18.71T1136,1984.13q-14.29,18.72-14.29,53.37T1136,2091q14.28,18.81,40.75,18.81T1217.38,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1371.81,2078.88q1.92,16.1,8.29,22.87,11.28,12.06,41.7,12.06,17.85,0,28.39-5.29t10.53-15.88a17.12,17.12,0,0,0-8.48-15.45q-8.49-5.28-63.12-18.2-39.33-9.73-55.41-24.35-16.08-14.39-16.09-41.49,0-32,25.14-54.93t70.75-23q43.26,0,70.53,17.25t31.29,59.59H1455q-1.27-11.64-6.58-18.42-10-12.27-34-12.28-19.74,0-28.13,6.14t-8.38,14.4c0,6.91,3,11.93,8.92,15q8.89,4.89,63,16.73,36,8.46,54.05,25.61,17.77,17.35,17.78,43.39,0,34.3-25.56,56t-79,21.7q-54.51,0-80.49-23t-26-58.53Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1745.54,2124.32q-29.22,36.06-88.7,36.06t-88.69-36.06q-29.2-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.7,36.59t29.21,86.5Q1774.75,2088.26,1745.54,2124.32ZM1697.27,2091q14.19-18.81,14.19-53.48t-14.19-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.28,53.37t14.28,53.48q14.3,18.81,40.75,18.81T1697.27,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1992.75,1946.59q28.24,29.84,28.23,87.63,0,61-27.58,92.93t-71.06,32q-27.69,0-46-13.76-10-7.62-19.6-22.23v120.24H1797V1921.82h57.79v34.08q9.79-15,20.88-23.71,20.23-15.43,48.15-15.45Q1964.53,1916.74,1992.75,1946.59Zm-46.3,43.39q-12.3-20.52-39.88-20.53-33.15,0-45.54,31.11-6.43,16.51-6.42,41.92,0,40.21,21.58,56.51,12.82,9.53,30.37,9.53,25.45,0,38.83-19.48t13.36-51.86Q1958.75,2010.51,1946.45,1990Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M2249.14,2124.32q-29.2,36.06-88.69,36.06t-88.69-36.06q-29.22-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.69,36.59t29.22,86.5Q2278.36,2088.26,2249.14,2124.32ZM2200.88,2091q14.19-18.81,14.18-53.48t-14.18-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.29,53.37t14.29,53.48q14.3,18.81,40.75,18.81T2200.88,2091Z" transform="translate(-215.73 -1774.69)"/></svg>';
-const logoWithoutTextWhite = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 348" height="35px"><path id="Vector" d="M95.7053 40.2707C127.005 40.2707 157.022 52.6841 179.154 74.78C201.286 96.8759 213.719 126.844 213.719 158.093H254.056C254.056 70.7808 183.16 -4.57764e-05 95.7053 -4.57764e-05V40.2707Z" fill="#fff"/><path id="Vector_2" d="M42.8365 93.0614C58.3333 93.0614 73.6784 96.1087 87.9955 102.029C102.313 107.95 115.322 116.628 126.279 127.568C137.237 138.508 145.93 151.496 151.86 165.79C157.79 180.084 160.843 195.404 160.843 210.875H201.179C201.179 123.564 130.291 52.7906 42.8365 52.7906V93.0614Z" fill="#fff"/><path id="Vector_3" d="M158.367 305.005C127.07 305.003 97.056 292.59 74.926 270.496C52.796 248.402 40.3626 218.437 40.3604 187.191H0.0239563C0.0239563 274.503 70.9123 345.276 158.367 345.276V305.005Z" fill="#fff"/><path id="Vector_4" d="M211.219 252.239C195.722 252.239 180.376 249.191 166.059 243.27C151.741 237.349 138.732 228.67 127.774 217.729C116.816 206.788 108.123 193.799 102.194 179.505C96.2637 165.21 93.2121 149.889 93.2132 134.417H52.8687C52.8687 221.729 123.765 292.509 211.219 292.509V252.239Z" fill="#fff"/></g><defs><clipPath id="clip0_1_2"><rect width="254" height="345" fill="white"/></clipPath></defs></svg>';
-const logoWithoutTextBlack = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 348" height="35px"><path id="Vector" d="M95.7053 40.2707C127.005 40.2707 157.022 52.6841 179.154 74.78C201.286 96.8759 213.719 126.844 213.719 158.093H254.056C254.056 70.7808 183.16 -4.57764e-05 95.7053 -4.57764e-05V40.2707Z" fill="#000000"/><path id="Vector_2" d="M42.8365 93.0614C58.3333 93.0614 73.6784 96.1087 87.9955 102.029C102.313 107.95 115.322 116.628 126.279 127.568C137.237 138.508 145.93 151.496 151.86 165.79C157.79 180.084 160.843 195.404 160.843 210.875H201.179C201.179 123.564 130.291 52.7906 42.8365 52.7906V93.0614Z" fill="#000000"/><path id="Vector_3" d="M158.367 305.005C127.07 305.003 97.056 292.59 74.926 270.496C52.796 248.402 40.3626 218.437 40.3604 187.191H0.0239563C0.0239563 274.503 70.9123 345.276 158.367 345.276V305.005Z" fill="#000000"/><path id="Vector_4" d="M211.219 252.239C195.722 252.239 180.376 249.191 166.059 243.27C151.741 237.349 138.732 228.67 127.774 217.729C116.816 206.788 108.123 193.799 102.194 179.505C96.2637 165.21 93.2121 149.889 93.2132 134.417H52.8687C52.8687 221.729 123.765 292.509 211.219 292.509V252.239Z" fill="#000000"/></g><defs><clipPath id="clip0_1_2"><rect width="254" height="345" fill="white"/></clipPath></defs></svg>';
 module.exports = Procaptcha;

package/dist/cjs/procaptcha-pow/dist/components/ProcaptchaPoW.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-require("../../../web-components/dist/index.cjs");
 const react = require("react");
+require("../../../web-components/dist/index.cjs");
 const CaptchaPlaceholder = require("../../../web-components/dist/CaptchaPlaceholder.cjs");
 const _interopNamespaceDefaultOnly = (e) => Object.freeze(Object.defineProperty({ __proto__: null, default: e }, Symbol.toStringTag, { value: "Module" }));
 const ProcaptchaWidget = react.lazy(async () => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("./Captcha.cjs"))));

package/dist/cjs/web-components/dist/CaptchaPlaceholder.cjs

@@ -1,64 +1,30 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Containers = require("./Containers.cjs");
 const LoadingSpinner = require("./LoadingSpinner.cjs");
-const react = require("@emotion/react");
+const WidgetConstants = require("./WidgetConstants.cjs");
 const theme = require("./theme.cjs");
-const react$1 = require("react");
-const logoStyle = react.css`
-    align-items: center;
-    justify-content: flex-end;
-    display: flex;
-    padding: 8px;
-
-    @media (max-width: 245px) {
-        &:nth-of-type(1),
-        &:nth-of-type(2) {
-            display: none;
-        } /* Both logos hidden */
-    }
-
-    @media (min-width: 245px) and (max-width: 400px) {
-        &:nth-of-type(1) {
-            display: flex;
-        } /* logoWithText */
-        &:nth-of-type(2) {
-            display: none;
-        } /* logoWithoutText */
-    }
-
-    @media (min-width: 401px) {
-        &:nth-of-type(1) {
-            display: none;
-        } /* logoWithText */
-        &:nth-of-type(2) {
-            display: flex;
-        } /* logoWithoutText */
-    }
-`;
+const Logo = require("./Logo.cjs");
 const ProcaptchaPlaceholder = (props) => {
-  const darkMode = props.darkMode;
-  const styleWidth = { maxWidth: "400px", minWidth: "200px", margin: "8px" };
-  const themeColor = darkMode ? "light" : "dark";
-  const theme$1 = react$1.useMemo(() => darkMode === "light" ? theme.lightTheme : theme.darkTheme, [darkMode]);
-  return jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: jsxRuntime.jsxs("div", { style: styleWidth, "data-cy": "button-human", children: [" ", jsxRuntime.jsxs("div", { style: {
-    padding: "8px",
+  const themeColor = props.darkMode === "light" ? "light" : "dark";
+  const theme$1 = props.darkMode === "light" ? theme.lightTheme : theme.darkTheme;
+  return jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: jsxRuntime.jsx(Containers.ContainerDiv, { children: jsxRuntime.jsx(Containers.WidthBasedStylesDiv, { children: jsxRuntime.jsxs("div", { style: WidgetConstants.WIDGET_DIMENSIONS, "data-cy": "button-human", children: [" ", jsxRuntime.jsxs("div", { style: {
+    padding: "2px",
     border: "1px solid",
     backgroundColor: theme$1.palette.background.default,
     borderColor: theme$1.palette.grey[300],
     borderRadius: "8px",
     display: "flex",
-    justifyContent: "space-between",
     alignItems: "center",
-    flexWrap: "wrap"
+    flexWrap: "wrap",
+    justifyContent: "space-between",
+    minHeight: `${WidgetConstants.WIDGET_INNER_HEIGHT}px`,
+    overflow: "hidden"
   }, children: [jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: jsxRuntime.jsx("div", { style: {
-    display: "flex",
-    justifyContent: "flex-start",
     alignItems: "center",
-    flexWrap: "wrap"
+    flex: 1
   }, children: jsxRuntime.jsx("div", { style: {
-    height: "50px",
-    width: "50px",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -66,14 +32,6 @@ const ProcaptchaPlaceholder = (props) => {
     verticalAlign: "middle"
   }, children: jsxRuntime.jsx("div", { style: {
     display: "flex"
-  }, children: jsxRuntime.jsx("div", { style: { flex: 1 }, children: jsxRuntime.jsx(LoadingSpinner.LoadingSpinner, { themeColor }) }) }) }) }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("a", { href: "https://www.prosopo.io/#features?ref=accounts.prosopo.io&utm_campaign=widget&utm_medium=checkbox", target: "_blank", "aria-label": "Visit prosopo.io to learn more about the service and its accessibility options.", children: jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { css: logoStyle, dangerouslySetInnerHTML: {
-    __html: darkMode === "light" ? logoWithoutTextBlack : logoWithoutTextWhite
-  } }), jsxRuntime.jsx("div", { css: logoStyle, dangerouslySetInnerHTML: {
-    __html: darkMode === "light" ? logoWithTextBlack : logoWithTextWhite
-  } })] }) }) }) })] })] }) }) });
+  }, children: jsxRuntime.jsx("div", { style: { display: "inline-flex" }, children: jsxRuntime.jsx(LoadingSpinner.LoadingSpinner, { themeColor }) }) }) }) }) }), jsxRuntime.jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: jsxRuntime.jsx("a", { href: WidgetConstants.WIDGET_URL, target: "_blank", "aria-label": WidgetConstants.WIDGET_URL_TEXT, children: jsxRuntime.jsx("div", { style: { flex: 1 }, children: jsxRuntime.jsx(Logo, { themeColor }) }) }) })] })] }) }) }) }) });
 };
-const logoWithTextBlack = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2062.63 468.67" height="35px" width="140px"><defs><style>.cls-1{fill:#1d1d1b;}</style></defs><title>Prosopo Logo Black</title><path class="cls-1" d="M335.55,1825.19A147.75,147.75,0,0,1,483.3,1972.94h50.5c0-109.49-88.76-198.25-198.25-198.25v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M269.36,1891.39A147.74,147.74,0,0,1,417.1,2039.13h50.5c0-109.49-88.75-198.24-198.24-198.24v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M414,2157.17a147.75,147.75,0,0,1-147.74-147.74h-50.5c0,109.49,88.75,198.24,198.24,198.24v-50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M480.17,2091a147.74,147.74,0,0,1-147.74-147.75H281.92c0,109.49,88.76,198.25,198.25,198.25V2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M862.8,2017.5q-27.39,22.86-78.25,22.86h-65v112.19H654.82v-312h134q46.32,0,73.86,24.13t27.55,74.72Q890.2,1994.64,862.8,2017.5ZM813,1905.1q-12.37-10.36-34.7-10.38H719.59v91.87h58.75q22.32,0,34.7-11.22t12.39-35.56Q825.43,1915.48,813,1905.1Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1045.69,1916.42c.78.08,2.51.19,5.19.32v61.81c-3.81-.42-7.2-.71-10.16-.85s-5.36-.21-7.2-.21q-36.4,0-48.89,23.71-7,13.33-7,41.06v110.29H916.89V1921.82h57.58V1962q14-23.07,24.34-31.54,16.94-14.18,44-14.18C1044,1916.32,1044.92,1916.35,1045.69,1916.42Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1265.64,2124.32q-29.21,36.06-88.69,36.06t-88.69-36.06Q1059,2088.26,1059,2037.5q0-49.9,29.22-86.5t88.69-36.59q59.47,0,88.69,36.59t29.21,86.5Q1294.85,2088.26,1265.64,2124.32ZM1217.38,2091q14.17-18.81,14.18-53.48t-14.18-53.37q-14.19-18.7-40.64-18.71T1136,1984.13q-14.29,18.72-14.29,53.37T1136,2091q14.28,18.81,40.75,18.81T1217.38,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1371.81,2078.88q1.92,16.1,8.29,22.87,11.28,12.06,41.7,12.06,17.85,0,28.39-5.29t10.53-15.88a17.12,17.12,0,0,0-8.48-15.45q-8.49-5.28-63.12-18.2-39.33-9.73-55.41-24.35-16.08-14.39-16.09-41.49,0-32,25.14-54.93t70.75-23q43.26,0,70.53,17.25t31.29,59.59H1455q-1.27-11.64-6.58-18.42-10-12.27-34-12.28-19.74,0-28.13,6.14t-8.38,14.4c0,6.91,3,11.93,8.92,15q8.89,4.89,63,16.73,36,8.46,54.05,25.61,17.77,17.35,17.78,43.39,0,34.3-25.56,56t-79,21.7q-54.51,0-80.49-23t-26-58.53Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1745.54,2124.32q-29.22,36.06-88.7,36.06t-88.69-36.06q-29.2-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.7,36.59t29.21,86.5Q1774.75,2088.26,1745.54,2124.32ZM1697.27,2091q14.19-18.81,14.19-53.48t-14.19-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.28,53.37t14.28,53.48q14.3,18.81,40.75,18.81T1697.27,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1992.75,1946.59q28.24,29.84,28.23,87.63,0,61-27.58,92.93t-71.06,32q-27.69,0-46-13.76-10-7.62-19.6-22.23v120.24H1797V1921.82h57.79v34.08q9.79-15,20.88-23.71,20.23-15.43,48.15-15.45Q1964.53,1916.74,1992.75,1946.59Zm-46.3,43.39q-12.3-20.52-39.88-20.53-33.15,0-45.54,31.11-6.43,16.51-6.42,41.92,0,40.21,21.58,56.51,12.82,9.53,30.37,9.53,25.45,0,38.83-19.48t13.36-51.86Q1958.75,2010.51,1946.45,1990Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M2249.14,2124.32q-29.2,36.06-88.69,36.06t-88.69-36.06q-29.22-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.69,36.59t29.22,86.5Q2278.36,2088.26,2249.14,2124.32ZM2200.88,2091q14.19-18.81,14.18-53.48t-14.18-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.29,53.37t14.29,53.48q14.3,18.81,40.75,18.81T2200.88,2091Z" transform="translate(-215.73 -1774.69)"/></svg>';
-const logoWithTextWhite = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2062.63 468.67" height="35px" width="140px"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Prosopo Logo Black</title><path class="cls-1" d="M335.55,1825.19A147.75,147.75,0,0,1,483.3,1972.94h50.5c0-109.49-88.76-198.25-198.25-198.25v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M269.36,1891.39A147.74,147.74,0,0,1,417.1,2039.13h50.5c0-109.49-88.75-198.24-198.24-198.24v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M414,2157.17a147.75,147.75,0,0,1-147.74-147.74h-50.5c0,109.49,88.75,198.24,198.24,198.24v-50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M480.17,2091a147.74,147.74,0,0,1-147.74-147.75H281.92c0,109.49,88.76,198.25,198.25,198.25V2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M862.8,2017.5q-27.39,22.86-78.25,22.86h-65v112.19H654.82v-312h134q46.32,0,73.86,24.13t27.55,74.72Q890.2,1994.64,862.8,2017.5ZM813,1905.1q-12.37-10.36-34.7-10.38H719.59v91.87h58.75q22.32,0,34.7-11.22t12.39-35.56Q825.43,1915.48,813,1905.1Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1045.69,1916.42c.78.08,2.51.19,5.19.32v61.81c-3.81-.42-7.2-.71-10.16-.85s-5.36-.21-7.2-.21q-36.4,0-48.89,23.71-7,13.33-7,41.06v110.29H916.89V1921.82h57.58V1962q14-23.07,24.34-31.54,16.94-14.18,44-14.18C1044,1916.32,1044.92,1916.35,1045.69,1916.42Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1265.64,2124.32q-29.21,36.06-88.69,36.06t-88.69-36.06Q1059,2088.26,1059,2037.5q0-49.9,29.22-86.5t88.69-36.59q59.47,0,88.69,36.59t29.21,86.5Q1294.85,2088.26,1265.64,2124.32ZM1217.38,2091q14.17-18.81,14.18-53.48t-14.18-53.37q-14.19-18.7-40.64-18.71T1136,1984.13q-14.29,18.72-14.29,53.37T1136,2091q14.28,18.81,40.75,18.81T1217.38,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1371.81,2078.88q1.92,16.1,8.29,22.87,11.28,12.06,41.7,12.06,17.85,0,28.39-5.29t10.53-15.88a17.12,17.12,0,0,0-8.48-15.45q-8.49-5.28-63.12-18.2-39.33-9.73-55.41-24.35-16.08-14.39-16.09-41.49,0-32,25.14-54.93t70.75-23q43.26,0,70.53,17.25t31.29,59.59H1455q-1.27-11.64-6.58-18.42-10-12.27-34-12.28-19.74,0-28.13,6.14t-8.38,14.4c0,6.91,3,11.93,8.92,15q8.89,4.89,63,16.73,36,8.46,54.05,25.61,17.77,17.35,17.78,43.39,0,34.3-25.56,56t-79,21.7q-54.51,0-80.49-23t-26-58.53Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1745.54,2124.32q-29.22,36.06-88.7,36.06t-88.69-36.06q-29.2-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.7,36.59t29.21,86.5Q1774.75,2088.26,1745.54,2124.32ZM1697.27,2091q14.19-18.81,14.19-53.48t-14.19-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.28,53.37t14.28,53.48q14.3,18.81,40.75,18.81T1697.27,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1992.75,1946.59q28.24,29.84,28.23,87.63,0,61-27.58,92.93t-71.06,32q-27.69,0-46-13.76-10-7.62-19.6-22.23v120.24H1797V1921.82h57.79v34.08q9.79-15,20.88-23.71,20.23-15.43,48.15-15.45Q1964.53,1916.74,1992.75,1946.59Zm-46.3,43.39q-12.3-20.52-39.88-20.53-33.15,0-45.54,31.11-6.43,16.51-6.42,41.92,0,40.21,21.58,56.51,12.82,9.53,30.37,9.53,25.45,0,38.83-19.48t13.36-51.86Q1958.75,2010.51,1946.45,1990Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M2249.14,2124.32q-29.2,36.06-88.69,36.06t-88.69-36.06q-29.22-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.69,36.59t29.22,86.5Q2278.36,2088.26,2249.14,2124.32ZM2200.88,2091q14.19-18.81,14.18-53.48t-14.18-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.29,53.37t14.29,53.48q14.3,18.81,40.75,18.81T2200.88,2091Z" transform="translate(-215.73 -1774.69)"/></svg>';
-const logoWithoutTextWhite = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 348" height="35px"><path id="Vector" d="M95.7053 40.2707C127.005 40.2707 157.022 52.6841 179.154 74.78C201.286 96.8759 213.719 126.844 213.719 158.093H254.056C254.056 70.7808 183.16 -4.57764e-05 95.7053 -4.57764e-05V40.2707Z" fill="#fff"/><path id="Vector_2" d="M42.8365 93.0614C58.3333 93.0614 73.6784 96.1087 87.9955 102.029C102.313 107.95 115.322 116.628 126.279 127.568C137.237 138.508 145.93 151.496 151.86 165.79C157.79 180.084 160.843 195.404 160.843 210.875H201.179C201.179 123.564 130.291 52.7906 42.8365 52.7906V93.0614Z" fill="#fff"/><path id="Vector_3" d="M158.367 305.005C127.07 305.003 97.056 292.59 74.926 270.496C52.796 248.402 40.3626 218.437 40.3604 187.191H0.0239563C0.0239563 274.503 70.9123 345.276 158.367 345.276V305.005Z" fill="#fff"/><path id="Vector_4" d="M211.219 252.239C195.722 252.239 180.376 249.191 166.059 243.27C151.741 237.349 138.732 228.67 127.774 217.729C116.816 206.788 108.123 193.799 102.194 179.505C96.2637 165.21 93.2121 149.889 93.2132 134.417H52.8687C52.8687 221.729 123.765 292.509 211.219 292.509V252.239Z" fill="#fff"/></g><defs><clipPath id="clip0_1_2"><rect width="254" height="345" fill="white"/></clipPath></defs></svg>';
-const logoWithoutTextBlack = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 348" height="35px"><path id="Vector" d="M95.7053 40.2707C127.005 40.2707 157.022 52.6841 179.154 74.78C201.286 96.8759 213.719 126.844 213.719 158.093H254.056C254.056 70.7808 183.16 -4.57764e-05 95.7053 -4.57764e-05V40.2707Z" fill="#000000"/><path id="Vector_2" d="M42.8365 93.0614C58.3333 93.0614 73.6784 96.1087 87.9955 102.029C102.313 107.95 115.322 116.628 126.279 127.568C137.237 138.508 145.93 151.496 151.86 165.79C157.79 180.084 160.843 195.404 160.843 210.875H201.179C201.179 123.564 130.291 52.7906 42.8365 52.7906V93.0614Z" fill="#000000"/><path id="Vector_3" d="M158.367 305.005C127.07 305.003 97.056 292.59 74.926 270.496C52.796 248.402 40.3626 218.437 40.3604 187.191H0.0239563C0.0239563 274.503 70.9123 345.276 158.367 345.276V305.005Z" fill="#000000"/><path id="Vector_4" d="M211.219 252.239C195.722 252.239 180.376 249.191 166.059 243.27C151.741 237.349 138.732 228.67 127.774 217.729C116.816 206.788 108.123 193.799 102.194 179.505C96.2637 165.21 93.2121 149.889 93.2132 134.417H52.8687C52.8687 221.729 123.765 292.509 211.219 292.509V252.239Z" fill="#000000"/></g><defs><clipPath id="clip0_1_2"><rect width="254" height="345" fill="white"/></clipPath></defs></svg>';
 exports.ProcaptchaPlaceholder = ProcaptchaPlaceholder;

package/dist/cjs/web-components/dist/Checkbox.cjs

@@ -5,16 +5,16 @@ const react = require("@emotion/react");
 const theme = require("./theme.cjs");
 const react$1 = require("react");
 const checkboxBefore = react.css`{
-  &:before {
-    content: '""';
-    position: absolute;
-    height: 100%;
-    width: 100%;
-  }
+    &:before {
+        content: '""';
+        position: absolute;
+        height: 100%;
+        width: 100%;
+    }
 }`;
 const baseStyle = {
-  width: "2.2em",
-  height: "2.2em",
+  width: "28px",
+  height: "28px",
   top: "auto",
   left: "auto",
   opacity: "1",
@@ -25,7 +25,7 @@ const baseStyle = {
   borderStyle: "solid",
   borderWidth: "1px"
 };
-const Checkbox = ({ themeColor, onChange, checked }) => {
+const Checkbox = ({ themeColor, onChange, checked, labelText }) => {
   const theme$1 = react$1.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
   const checkboxStyleBase = {
     ...baseStyle,
@@ -36,10 +36,20 @@ const Checkbox = ({ themeColor, onChange, checked }) => {
     return {
       ...checkboxStyleBase,
       borderColor: hover ? theme$1.palette.background.contrastText : theme$1.palette.grey[400],
-      appearance: checked ? "auto" : "none"
+      appearance: checked ? "auto" : "none",
+      flex: 1,
+      margin: "0 15px"
     };
   }, [hover, theme$1, checked]);
-  return jsxRuntime.jsx("input", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), css: checkboxBefore, type: "checkbox", "aria-live": "assertive", "aria-haspopup": "true", onChange, checked, style: checkboxStyle });
+  const id = react$1.useId();
+  return jsxRuntime.jsxs("span", { style: { display: "inline-flex" }, children: [jsxRuntime.jsx("input", { name: id, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), css: checkboxBefore, type: "checkbox", "aria-live": "assertive", "aria-haspopup": "true", onChange, checked, style: checkboxStyle }), jsxRuntime.jsx("label", { css: {
+    color: theme$1.palette.background.contrastText,
+    position: "relative",
+    display: "flex",
+    cursor: "pointer",
+    userSelect: "none",
+    top: "4px"
+  }, htmlFor: id, children: labelText })] });
 };
 exports.Checkbox = Checkbox;
 exports.default = Checkbox;