@prosopo/procaptcha-react 0.3.1 → 0.3.3

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/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,9 +1,11 @@
 "use strict";
 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("./ProcaptchaWidget.cjs"))));
+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 }) });
 module.exports = Procaptcha;

package/dist/cjs/components/ProcaptchaWidget.cjs

@@ -2,260 +2,121 @@
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 require("../web-components/dist/index.cjs");
 const procaptcha = require("@prosopo/procaptcha");
-const react = require("@emotion/react");
+const procaptchaCommon = require("@prosopo/procaptcha-common");
 const React = require("react");
 const CaptchaComponent = require("./CaptchaComponent.cjs");
 const collector = require("./collector.cjs");
 const Modal = require("./Modal.cjs");
 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 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 useRefAsState = (defaultValue) => {
-  const ref = React.useRef(defaultValue);
-  const setter = (value2) => {
-    ref.current = value2;
-  };
-  const value = ref.current;
-  return [value, setter];
-};
-const useProcaptcha = () => {
-  const [isHuman, setIsHuman] = React.useState(false);
-  const [index, setIndex] = React.useState(0);
-  const [solutions, setSolutions] = React.useState([]);
-  const [captchaApi, setCaptchaApi] = useRefAsState(void 0);
-  const [showModal, setShowModal] = React.useState(false);
-  const [challenge, setChallenge] = React.useState(void 0);
-  const [loading, setLoading] = React.useState(false);
-  const [account, setAccount] = React.useState(void 0);
-  const [dappAccount, setDappAccount] = React.useState(void 0);
-  const [submission, setSubmission] = useRefAsState(void 0);
-  const [timeout, setTimeout] = useRefAsState(void 0);
-  const [blockNumber, setBlockNumber] = useRefAsState(void 0);
-  const [successfullChallengeTimeout, setSuccessfullChallengeTimeout] = useRefAsState(
-    void 0
-  );
-  const [sendData, setSendData] = React.useState(false);
-  return [
-    // the state
-    {
-      isHuman,
-      index,
-      solutions,
-      captchaApi,
-      showModal,
-      challenge,
-      loading,
-      account,
-      dappAccount,
-      submission,
-      timeout,
-      blockNumber,
-      successfullChallengeTimeout,
-      sendData
-    },
-    // and method to update the state
-    (nextState) => {
-      if (nextState.account !== void 0)
-        setAccount(nextState.account);
-      if (nextState.isHuman !== void 0)
-        setIsHuman(nextState.isHuman);
-      if (nextState.index !== void 0)
-        setIndex(nextState.index);
-      if (nextState.solutions !== void 0)
-        setSolutions(nextState.solutions.slice());
-      if (nextState.captchaApi !== void 0)
-        setCaptchaApi(nextState.captchaApi);
-      if (nextState.showModal !== void 0)
-        setShowModal(nextState.showModal);
-      if (nextState.challenge !== void 0)
-        setChallenge(nextState.challenge);
-      if (nextState.loading !== void 0)
-        setLoading(nextState.loading);
-      if (nextState.showModal !== void 0)
-        setShowModal(nextState.showModal);
-      if (nextState.dappAccount !== void 0)
-        setDappAccount(nextState.dappAccount);
-      if (nextState.submission !== void 0)
-        setSubmission(nextState.submission);
-      if (nextState.timeout !== void 0)
-        setTimeout(nextState.timeout);
-      if (nextState.successfullChallengeTimeout !== void 0)
-        setSuccessfullChallengeTimeout(nextState.timeout);
-      if (nextState.blockNumber !== void 0)
-        setBlockNumber(nextState.blockNumber);
-      if (nextState.sendData !== void 0)
-        setSendData(nextState.sendData);
-    }
-  ];
-};
+const Logo = require("../web-components/dist/Logo.cjs");
 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 [state, updateState] = procaptchaCommon.useProcaptcha(React.useState, React.useRef);
   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: [
+  const theme$1 = props.config.theme === "light" ? theme.lightTheme : theme.darkTheme;
+  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.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/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 = 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.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 = 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.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.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;