@prosopo/procaptcha-react 0.2.41 → 0.3.2

package/README.md

@@ -19,7 +19,7 @@ See the [client example](https://github.com/prosopo/client-example) for a minima
 in a frontend app.
 
 ```jsx
-<Procaptcha config={config} callbacks={{ onAccountNotFound, onError, onHuman, onExpired }} />
+<Procaptcha config={config} callbacks={{ onError, onHuman, onExpired }} />
 ```
 
 ### Callbacks
@@ -34,7 +34,6 @@ The captcha event callbacks are defined as follows:
  */
 export interface ProcaptchaEvents {
     onError: (error: Error) => void
-    onAccountNotFound: (address: string) => void
     onHuman: (output: ProcaptchaOutput) => void
     onExtensionNotFound: () => void
     onExpired: () => void
@@ -60,11 +59,6 @@ object contains the following fields:
 The `onError` callback is called when an error occurs during the captcha process. The `Error` object is a standard
 JavaScript error.
 
-### onAccountNotFound
-
-The `onAccountNotFound` callback is called when the user's account is not found in the Procaptcha config in
-the [`userAccountAddress`](https://github.com/prosopo/captcha/blob/0bb4850adfe2b995dc16f7dd18e6ea844a0b6997/packages/types/src/config/config.ts#L116) field.
-
 ### onExpired
 
 The `onExpired` callback is called when the captcha challenge has expired. This can occur if the user takes too long to
@@ -83,7 +77,7 @@ our [React Demo](https://github.com/prosopo/captcha/blob/main/demos/client-examp
 The Procaptcha component is called as follows:
 
 ```tsx
-<Procaptcha config={config} callbacks={{ onAccountNotFound, onError, onHuman, onExpired }} />
+<Procaptcha config={config} callbacks={{ onError, onHuman, onExpired }} />
 ```
 
 A config object is required and must contain your SITE_KEY. The callbacks are optional and can be used to handle the
@@ -91,7 +85,7 @@ various Procaptcha events. The following config demonstrates the `PROSOPO_SITE_K
 environment variables.
 
 ```tsx
-const config: ProcaptchaConfigOptional = {
+const config: ProcaptchaClientConfigInput = {
     account: {
         address: process.env.PROSOPO_SITE_KEY || undefined,
     },

package/dist/cjs/components/Button.cjs

@@ -1,8 +1,9 @@
 "use strict";
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const theme = require("./theme.cjs");
+require("../web-components/dist/index.cjs");
 const React = require("react");
 const index = require("../util/index.cjs");
+const theme = require("../web-components/dist/theme.cjs");
 const buttonStyleBase = {
   display: "inline-flex",
   alignItems: "center",

package/dist/cjs/components/CaptchaComponent.cjs

@@ -3,10 +3,11 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const CaptchaWidget = require("./CaptchaWidget.cjs");
 const React = require("react");
 const util = require("@prosopo/util");
-const theme = require("./theme.cjs");
+require("../web-components/dist/index.cjs");
 const common = require("@prosopo/common");
 const Button = require("./Button.cjs");
 const index = require("../util/index.cjs");
+const theme = require("../web-components/dist/theme.cjs");
 const CaptchaComponent = ({
   challenge,
   index: index$1,

package/dist/cjs/components/CaptchaWidget.cjs

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const common = require("@prosopo/common");
-const theme = require("./theme.cjs");
+require("../web-components/dist/index.cjs");
 const React = require("react");
+const theme = require("../web-components/dist/theme.cjs");
 const getHash = (item) => {
   if (!item.hash) {
     throw new common.ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", { context: { item } });

package/dist/cjs/components/ExtensionAccountSelect.cjs

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const common = require("@prosopo/common");
@@ -45,4 +45,3 @@ const ExtensionAccountSelect = ({
   );
 };
 exports.ExtensionAccountSelect = ExtensionAccountSelect;
-exports.default = ExtensionAccountSelect;

package/dist/cjs/components/Modal.cjs

@@ -3,7 +3,6 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const ModalComponent = React.memo((props, nextProps) => {
   const { show, children } = props;
-  console.log("rendering modal with show: ", show);
   const display = show ? "block" : "none";
   const ModalOuterDivCss = {
     position: "fixed",

package/dist/cjs/components/Procaptcha.cjs

@@ -1,7 +1,8 @@
 "use strict";
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const CaptchaPlaceholder = require("./CaptchaPlaceholder.cjs");
+require("../web-components/dist/index.cjs");
 const React = require("react");
+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("./ProcaptchaWidget.cjs"))));
 const Procaptcha = (props) => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(CaptchaPlaceholder.ProcaptchaPlaceholder, { darkMode: props.config.theme }), children: /* @__PURE__ */ jsxRuntime.jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks }) });

package/dist/cjs/components/ProcaptchaWidget.cjs

@@ -1,45 +1,17 @@
 "use strict";
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+require("../web-components/dist/index.cjs");
 const procaptcha = require("@prosopo/procaptcha");
-const LoadingSpinner = require("./LoadingSpinner.cjs");
-const react = require("@emotion/react");
-const theme = require("./theme.cjs");
 const React = require("react");
 const CaptchaComponent = require("./CaptchaComponent.cjs");
-const Checkbox = require("./Checkbox.cjs");
 const collector = require("./collector.cjs");
 const Modal = require("./Modal.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 theme = require("../web-components/dist/theme.cjs");
+const Containers = require("../web-components/dist/Containers.cjs");
+const WidgetConstants = require("../web-components/dist/WidgetConstants.cjs");
+const Checkbox = require("../web-components/dist/Checkbox.cjs");
+const LoadingSpinner = require("../web-components/dist/LoadingSpinner.cjs");
+const Logo = require("../web-components/dist/Logo.cjs");
 const useRefAsState = (defaultValue) => {
   const ref = React.useRef(defaultValue);
   const setter = (value2) => {
@@ -119,142 +91,109 @@ const useProcaptcha = () => {
   ];
 };
 const ProcaptchaWidget = (props) => {
-  console.log("config", props.config);
   const config = props.config;
   const callbacks = props.callbacks || {};
   const [state, updateState] = useProcaptcha();
-  console.log("state", state);
   const manager = procaptcha.Manager(config, state, updateState, callbacks);
-  const styleWidth = { maxWidth: "400px", minWidth: "200px", margin: "8px" };
   const themeColor = props.config.theme === "light" ? "light" : "dark";
   const theme$1 = React.useMemo(() => props.config.theme === "light" ? theme.lightTheme : theme.darkTheme, [props.config.theme]);
-  console.log("theme", theme$1);
-  console.log("showModal", state.showModal);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Modal, { show: state.showModal, children: state.challenge ? /* @__PURE__ */ jsxRuntime.jsx(
-        CaptchaComponent,
-        {
-          challenge: state.challenge,
-          index: state.index,
-          solutions: state.solutions,
-          onSubmit: manager.submit,
-          onCancel: manager.cancel,
-          onClick: manager.select,
-          onNext: manager.nextRound,
-          themeColor: config.theme ?? "light"
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "No challenge set." }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styleWidth, "data-cy": "button-human", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Modal, { show: state.showModal, children: state.challenge ? /* @__PURE__ */ jsxRuntime.jsx(
+      CaptchaComponent,
+      {
+        challenge: state.challenge,
+        index: state.index,
+        solutions: state.solutions,
+        onSubmit: manager.submit,
+        onCancel: manager.cancel,
+        onClick: manager.select,
+        onNext: manager.nextRound,
+        themeColor: config.theme ?? "light"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "No challenge set." }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Containers.ContainerDiv, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Containers.WidthBasedStylesDiv, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: WidgetConstants.WIDGET_DIMENSIONS, "data-cy": "button-human", children: [
         " ",
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             style: {
-              padding: "8px",
+              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: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   style: {
-                    display: "flex",
-                    justifyContent: "flex-start",
                     alignItems: "center",
-                    flexWrap: "wrap"
+                    flex: 1
                   },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        style: {
-                          height: "50px",
-                          width: "50px",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          flexDirection: "column",
-                          verticalAlign: "middle"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "div",
-                            {
-                              style: {
-                                display: !state.loading ? "flex" : "none"
-                              },
-                              children: /* @__PURE__ */ jsxRuntime.jsx(
-                                Checkbox,
-                                {
-                                  themeColor,
-                                  onChange: manager.start,
-                                  checked: state.isHuman
-                                }
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "div",
-                            {
-                              style: {
-                                display: state.loading ? "flex" : "none"
-                              },
-                              children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner.LoadingSpinner, { themeColor }) })
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: theme$1.palette.background.contrastText, paddingLeft: "4px" }, children: "I am a human" }) })
-                  ]
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexDirection: "column",
+                        verticalAlign: "middle"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            style: {
+                              display: !state.loading ? "flex" : "none"
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              Checkbox.Checkbox,
+                              {
+                                themeColor,
+                                onChange: manager.start,
+                                checked: state.isHuman,
+                                labelText: "I am human"
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            style: {
+                              display: state.loading ? "flex" : "none"
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner.LoadingSpinner, { themeColor }) })
+                          }
+                        )
+                      ]
+                    }
+                  )
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ 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: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        css: logoStyle,
-                        dangerouslySetInnerHTML: {
-                          __html: props.config.theme === "light" ? logoWithoutTextBlack : logoWithoutTextWhite
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        css: logoStyle,
-                        dangerouslySetInnerHTML: {
-                          __html: props.config.theme === "light" ? logoWithTextBlack : logoWithTextWhite
-                        }
-                      }
-                    )
-                  ] }) })
-                }
-              ) })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: WidgetConstants.WIDGET_URL, target: "_blank", "aria-label": WidgetConstants.WIDGET_URL_TEXT, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Logo, { themeColor }) }) }) })
             ]
           }
         )
-      ] })
-    ] }),
-    config.devOnlyWatchEvents && /* @__PURE__ */ jsxRuntime.jsx(collector, { onProcessData: manager.exportData, sendData: state.showModal })
-  ] });
+      ] }) }),
+      config.devOnlyWatchEvents && /* @__PURE__ */ jsxRuntime.jsx(
+        collector,
+        {
+          onProcessData: manager.exportData,
+          sendData: state.sendData,
+          account: state.account
+        }
+      )
+    ] })
+  ] }) });
 };
-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 = ProcaptchaWidget;

package/dist/cjs/components/collector.cjs

@@ -2,7 +2,7 @@
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const procaptcha = require("@prosopo/procaptcha");
-const Collector = ({ onProcessData, sendData }) => {
+const Collector = ({ onProcessData, sendData, account }) => {
   const [mouseEvents, setStoredMouseEvents] = React.useState([]);
   const [touchEvents, setStoredTouchEvents] = React.useState([]);
   const [keyboardEvents, setStoredKeyboardEvents] = React.useState([]);
@@ -18,8 +18,9 @@ const Collector = ({ onProcessData, sendData }) => {
       touchEvents,
       keyboardEvents
     };
-    onProcessData(userEvents);
-  }, [sendData]);
+    if (account)
+      onProcessData(userEvents);
+  }, [sendData, account]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref });
 };
 module.exports = Collector;

package/dist/cjs/index.cjs

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("./components/index.cjs");
 require("./util/index.cjs");
-const ExtensionAccountSelect = require("./components/ExtensionAccountSelect.cjs");
 const ProcaptchaWidget = require("./components/ProcaptchaWidget.cjs");
 const Procaptcha = require("./components/Procaptcha.cjs");
 const CaptchaWidget = require("./components/CaptchaWidget.cjs");
-exports.ExtensionAccountSelect = ExtensionAccountSelect.ExtensionAccountSelect;
+const ExtensionAccountSelect = require("./components/ExtensionAccountSelect.cjs");
 exports.ProcaptchaWidget = ProcaptchaWidget;
 exports.Procaptcha = Procaptcha;
 exports.CaptchaWidget = CaptchaWidget.CaptchaWidget;
+exports.ExtensionAccountSelect = ExtensionAccountSelect.ExtensionAccountSelect;

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

@@ -0,0 +1,39 @@
+"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 WidgetConstants = require("./WidgetConstants.cjs");
+const theme = require("./theme.cjs");
+const React = require("react");
+const Logo = require("./Logo.cjs");
+const ProcaptchaPlaceholder = (props) => {
+  const darkMode = props.darkMode;
+  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",
+    alignItems: "center",
+    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: {
+    alignItems: "center",
+    flex: 1
+  }, children: jsxRuntime.jsx("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    verticalAlign: "middle"
+  }, children: jsxRuntime.jsx("div", { style: {
+    display: "flex"
+  }, 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 }) }) }) })] })] }) }) }) }) });
+};
+exports.ProcaptchaPlaceholder = ProcaptchaPlaceholder;

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("@emotion/react");
+const theme = require("./theme.cjs");
+const React = require("react");
+const checkboxBefore = react.css`{
+    &:before {
+        content: '""';
+        position: absolute;
+        height: 100%;
+        width: 100%;
+    }
+}`;
+const baseStyle = {
+  width: "28px",
+  height: "28px",
+  top: "auto",
+  left: "auto",
+  opacity: "1",
+  borderRadius: "12.5%",
+  appearance: "none",
+  cursor: "pointer",
+  margin: "0",
+  borderStyle: "solid",
+  borderWidth: "1px"
+};
+const Checkbox = ({ themeColor, onChange, checked, labelText }) => {
+  const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
+  const checkboxStyleBase = {
+    ...baseStyle,
+    border: `1px solid ${theme$1.palette.background.contrastText}`
+  };
+  const [hover, setHover] = React.useState(false);
+  const checkboxStyle = React.useMemo(() => {
+    return {
+      ...checkboxStyleBase,
+      borderColor: hover ? theme$1.palette.background.contrastText : theme$1.palette.grey[400],
+      appearance: checked ? "auto" : "none",
+      flex: 1,
+      margin: "0 15px"
+    };
+  }, [hover, theme$1, checked]);
+  const id = React.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/{components → 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);
@@ -24,7 +28,7 @@ const LoadingSpinner = ({ themeColor }) => {
             }
         }
     `;
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledDiv, {});
+  return jsxRuntime.jsx(StyledDiv, {});
 };
 exports.LoadingSpinner = LoadingSpinner;
 exports.default = LoadingSpinner;

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;