@prosopo/procaptcha-bundle 0.3.1 → 0.3.2

package/dist/bundle/procaptcha.bundle.js

@@ -1,4 +1,4 @@
-import { m as a, k as d } from "./index-DUjgpJkc.js";
+import { O as a, M as d } from "./index-D_tmH38V.js";
 export {
   a as default,
   d as render

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;
     }
   });
 };

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/components/Captcha.cjs

@@ -2,49 +2,19 @@
 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 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 [checked, setChecked] = react.useState(false);
+  const [loading, setLoading] = react.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 theme$1 = react.useMemo(() => darkMode === "light" ? theme.lightTheme : theme.darkTheme, [darkMode]);
   const handlePowCaptcha = async () => {
     setLoading(true);
     Manager.Manager(props.config).then((verified) => {
@@ -55,24 +25,24 @@ const Procaptcha = (props) => {
       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",
+  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 +50,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: loading ? jsxRuntime.jsx(LoadingSpinner.LoadingSpinner, { themeColor }) : jsxRuntime.jsx(Checkbox.Checkbox, { checked, onChange: handlePowCaptcha, 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/web-components/dist/CaptchaPlaceholder.cjs

@@ -1,64 +1,32 @@
 "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 react = require("react");
+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 = react.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.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 +34,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;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const WidgetConstants = require("./WidgetConstants.cjs");
+const styled = require("@emotion/styled");
+const ContainerDiv = styled.div`
+    container-type: inline-size;
+`;
+const WidthBasedStylesDiv = styled.div`
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    height: ${WidgetConstants.WIDGET_OUTER_HEIGHT}px;
+    @container (max-width: 243px) {
+        #logo-without-text {
+            display: none;
+        }
+
+        #logo-with-text {
+            display: none;
+        }
+    }
+    @container (min-width: 244px) and (max-width: 339px) {
+        #logo-without-text {
+            display: inherit;
+        }
+
+        #logo-with-text {
+            display: none;
+        }
+    }
+    @container (min-width: 340px) {
+        #logo-without-text {
+            display: none;
+        }
+
+        #logo-with-text {
+            display: inherit;
+        }
+    }
+`;
+exports.ContainerDiv = ContainerDiv;
+exports.WidthBasedStylesDiv = WidthBasedStylesDiv;

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

@@ -7,6 +7,9 @@ const styled = require("@emotion/styled");
 const LoadingSpinner = ({ themeColor }) => {
   const theme$1 = react.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
   const StyledDiv = styled.div`
+        margin-top: 0;
+        margin-left: 15px;
+        margin-right: 15px;
         width: 2em;
         height: 2em;
         border: 4px solid ${theme$1.palette.background.contrastText};
@@ -15,6 +18,7 @@ const LoadingSpinner = ({ themeColor }) => {
         display: inherit;
         box-sizing: border-box;
         animation: rotation 1s linear infinite;
+
         @keyframes rotation {
             0% {
                 transform: rotate(0deg);

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

@@ -0,0 +1,16 @@
+"use strict";
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const LogoWithText = require("./LogoWithText.cjs");
+const LogoWithoutText = require("./LogoWithoutText.cjs");
+const styled = require("@emotion/styled");
+const LogoContainer = styled.div`
+    padding: 8px;
+    flex: 1 1 0;
+`;
+const LogoInnerContainer = styled.div`
+    padding: 8px;
+`;
+const Logo = ({ themeColor }) => {
+  return jsxRuntime.jsx(LogoContainer, { children: jsxRuntime.jsxs(LogoInnerContainer, { children: [jsxRuntime.jsx(LogoWithoutText.LogoWithoutText, { themeColor }), jsxRuntime.jsx(LogoWithText.LogoWithText, { themeColor })] }) });
+};
+module.exports = Logo;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const LogoWithText = ({ themeColor }) => {
+  const fill = react.useMemo(() => themeColor === "light" ? "#1d1d1b" : "#fff", [themeColor]);
+  return jsxRuntime.jsxs("svg", { className: "logo", id: "logo-with-text", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2062.63 468.67", height: "35px", width: "140px", style: { fill }, children: [jsxRuntime.jsx("title", { children: "Prosopo Logo With Text" }), jsxRuntime.jsx("path", { 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)" }), jsxRuntime.jsx("path", { 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)" }), jsxRuntime.jsx("path", { 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)" }), jsxRuntime.jsx("path", { 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)" }), jsxRuntime.jsx("path", { 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)" }), jsxRuntime.jsx("path", { 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)" }), jsxRuntime.jsx("path", { 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)" }), jsxRuntime.jsx("path", { 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)" }), jsxRuntime.jsx("path", { 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)" }), jsxRuntime.jsx("path", { 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)" }), jsxRuntime.jsx("path", { 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)" })] });
+};
+exports.LogoWithText = LogoWithText;
+exports.default = LogoWithText;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const LogoWithoutText = ({ themeColor }) => {
+  const fill = react.useMemo(() => themeColor === "light" ? "#1d1d1b" : "#fff", [themeColor]);
+  return jsxRuntime.jsxs("svg", { className: "logo", id: "logo-without-text", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 260 348", height: "35px", style: { fill }, children: [jsxRuntime.jsx("title", { children: "Prosopo Logo Without Text" }), jsxRuntime.jsx("path", { 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" }), jsxRuntime.jsx("path", { 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" }), jsxRuntime.jsx("path", { 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" }), jsxRuntime.jsx("path", { 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" })] });
+};
+exports.LogoWithoutText = LogoWithoutText;
+exports.default = LogoWithoutText;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const WIDGET_URL = "https://prosopo.io/?ref=accounts.prosopo.io&utm_campaign=widget&utm_medium=checkbox#features";
+const WIDGET_URL_TEXT = "Visit prosopo.io to learn more about the service and its accessibility options.";
+const WIDGET_INNER_HEIGHT = 74;
+const WIDGET_OUTER_HEIGHT = 80;
+const WIDGET_DIMENSIONS = { maxWidth: "400px", minWidth: "200px", minHeight: `${WIDGET_OUTER_HEIGHT}px` };
+exports.WIDGET_DIMENSIONS = WIDGET_DIMENSIONS;
+exports.WIDGET_INNER_HEIGHT = WIDGET_INNER_HEIGHT;
+exports.WIDGET_OUTER_HEIGHT = WIDGET_OUTER_HEIGHT;
+exports.WIDGET_URL = WIDGET_URL;
+exports.WIDGET_URL_TEXT = WIDGET_URL_TEXT;

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

@@ -4,8 +4,19 @@ const CaptchaPlaceholder = require("./CaptchaPlaceholder.cjs");
 const LoadingSpinner = require("./LoadingSpinner.cjs");
 const theme = require("./theme.cjs");
 const Checkbox = require("./Checkbox.cjs");
+const Logo = require("./Logo.cjs");
+const Containers = require("./Containers.cjs");
+const WidgetConstants = require("./WidgetConstants.cjs");
 exports.ProcaptchaPlaceholder = CaptchaPlaceholder.ProcaptchaPlaceholder;
 exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
 exports.darkTheme = theme.darkTheme;
 exports.lightTheme = theme.lightTheme;
 exports.Checkbox = Checkbox.Checkbox;
+exports.Logo = Logo;
+exports.ContainerDiv = Containers.ContainerDiv;
+exports.WidthBasedStylesDiv = Containers.WidthBasedStylesDiv;
+exports.WIDGET_DIMENSIONS = WidgetConstants.WIDGET_DIMENSIONS;
+exports.WIDGET_INNER_HEIGHT = WidgetConstants.WIDGET_INNER_HEIGHT;
+exports.WIDGET_OUTER_HEIGHT = WidgetConstants.WIDGET_OUTER_HEIGHT;
+exports.WIDGET_URL = WidgetConstants.WIDGET_URL;
+exports.WIDGET_URL_TEXT = WidgetConstants.WIDGET_URL_TEXT;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAGH,QAAQ,EAMX,MAAM,gBAAgB,CAAA;AAMvB,UAAU,uBAAuB;IAC7B,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAsJD,eAAO,MAAM,MAAM,cAAe,MAAM,iBAAiB,uBAAuB,SAU/E,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,EAAE,MAAM,IAAI,QAQ3C;AAGD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,UAAU,EAAE;YAAE,KAAK,EAAE,OAAO,KAAK,CAAC;YAAC,MAAM,EAAE,OAAO,MAAM,CAAA;SAAE,CAAA;KAC7D;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAGH,QAAQ,EAMX,MAAM,gBAAgB,CAAA;AAOvB,UAAU,uBAAuB;IAC7B,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,QAAQ,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC5B;AA6JD,eAAO,MAAM,MAAM,cAAe,MAAM,iBAAiB,uBAAuB,SAU/E,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,EAAE,MAAM,IAAI,QAQ3C;AAGD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,UAAU,EAAE;YAAE,KAAK,EAAE,OAAO,KAAK,CAAC;YAAC,MAAM,EAAE,OAAO,MAAM,CAAA;SAAE,CAAA;KAC7D;CACJ"}

package/dist/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ApiParams, EnvironmentTypesSchema, FeaturesEnum, NetworkNamesSchema, ProcaptchaConfigSchema, } from '@prosopo/types';
 import { Procaptcha } from '@prosopo/procaptcha-react';
+import { ProcaptchaFrictionless } from '@prosopo/procaptcha-frictionless';
 import { ProcaptchaPow } from '@prosopo/procaptcha-pow';
 import { at } from '@prosopo/util';
 import { createRoot } from 'react-dom/client';
@@ -33,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');
@@ -102,11 +104,16 @@ const renderLogic = (elements, config, renderOptions) => {
         if (challengeValidLengthAttribute) {
             config.challengeValidLength = parseInt(challengeValidLengthAttribute);
         }
-        if (renderOptions?.captchaType === 'pow') {
-            createRoot(element).render(_jsx(ProcaptchaPow, { config: config, callbacks: callbacks }));
-        }
-        else {
-            createRoot(element).render(_jsx(Procaptcha, { config: config, callbacks: callbacks }));
+        switch (renderOptions?.captchaType) {
+            case 'pow':
+                createRoot(element).render(_jsx(ProcaptchaPow, { config: config, callbacks: callbacks }));
+                break;
+            case 'frictionless':
+                createRoot(element).render(_jsx(ProcaptchaFrictionless, { config: config, callbacks: callbacks }));
+                break;
+            default:
+                createRoot(element).render(_jsx(Procaptcha, { config: config, callbacks: callbacks }));
+                break;
         }
     });
 };