@prosopo/procaptcha-react 0.2.38 → 0.2.40

package/dist/components/ProcaptchaWidget.js

@@ -1,14 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Manager, } from '@prosopo/procaptcha';
-import { LoadingSpinner } from './LoadingSpinner.js';
-import { css } from '@emotion/react';
-import { darkTheme, lightTheme } from './theme.js';
-import { useMemo, useRef, useState } from 'react';
-import CaptchaComponent from './CaptchaComponent.js';
-import Checkbox from './Checkbox.js';
-import Collector from './collector.js';
-import Modal from './Modal.js';
-const logoStyle = css `
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { Manager } from "@prosopo/procaptcha";
+import { LoadingSpinner } from "./LoadingSpinner.js";
+import { css } from "@emotion/react";
+import { lightTheme, darkTheme } from "./theme.js";
+import { useRef, useState, useMemo } from "react";
+import CaptchaComponent from "./CaptchaComponent.js";
+import Checkbox from "./Checkbox.js";
+import Collector from "./collector.js";
+import ModalComponent from "./Modal.js";
+const logoStyle = css`
     align-items: center;
     justify-content: flex-end;
     display: flex;
@@ -40,131 +40,222 @@ const logoStyle = css `
     }
 `;
 const useRefAsState = (defaultValue) => {
-    const ref = useRef(defaultValue);
-    const setter = (value) => {
-        ref.current = value;
-    };
-    const value = ref.current;
-    return [value, setter];
+  const ref = useRef(defaultValue);
+  const setter = (value2) => {
+    ref.current = value2;
+  };
+  const value = ref.current;
+  return [value, setter];
 };
 const useProcaptcha = () => {
-    const [isHuman, setIsHuman] = useState(false);
-    const [index, setIndex] = useState(0);
-    const [solutions, setSolutions] = useState([]);
-    const [captchaApi, setCaptchaApi] = useRefAsState(undefined);
-    const [showModal, setShowModal] = useState(false);
-    const [challenge, setChallenge] = useState(undefined);
-    const [loading, setLoading] = useState(false);
-    const [account, setAccount] = useState(undefined);
-    const [dappAccount, setDappAccount] = useState(undefined);
-    const [submission, setSubmission] = useRefAsState(undefined);
-    const [timeout, setTimeout] = useRefAsState(undefined);
-    const [blockNumber, setBlockNumber] = useRefAsState(undefined);
-    const [successfullChallengeTimeout, setSuccessfullChallengeTimeout] = useRefAsState(undefined);
-    const [sendData, setSendData] = useState(false);
-    return [
-        {
-            isHuman,
-            index,
-            solutions,
-            captchaApi,
-            showModal,
-            challenge,
-            loading,
-            account,
-            dappAccount,
-            submission,
-            timeout,
-            blockNumber,
-            successfullChallengeTimeout,
-            sendData,
-        },
-        (nextState) => {
-            if (nextState.account !== undefined)
-                setAccount(nextState.account);
-            if (nextState.isHuman !== undefined)
-                setIsHuman(nextState.isHuman);
-            if (nextState.index !== undefined)
-                setIndex(nextState.index);
-            if (nextState.solutions !== undefined)
-                setSolutions(nextState.solutions.slice());
-            if (nextState.captchaApi !== undefined)
-                setCaptchaApi(nextState.captchaApi);
-            if (nextState.showModal !== undefined)
-                setShowModal(nextState.showModal);
-            if (nextState.challenge !== undefined)
-                setChallenge(nextState.challenge);
-            if (nextState.loading !== undefined)
-                setLoading(nextState.loading);
-            if (nextState.showModal !== undefined)
-                setShowModal(nextState.showModal);
-            if (nextState.dappAccount !== undefined)
-                setDappAccount(nextState.dappAccount);
-            if (nextState.submission !== undefined)
-                setSubmission(nextState.submission);
-            if (nextState.timeout !== undefined)
-                setTimeout(nextState.timeout);
-            if (nextState.successfullChallengeTimeout !== undefined)
-                setSuccessfullChallengeTimeout(nextState.timeout);
-            if (nextState.blockNumber !== undefined)
-                setBlockNumber(nextState.blockNumber);
-            if (nextState.sendData !== undefined)
-                setSendData(nextState.sendData);
-        },
-    ];
+  const [isHuman, setIsHuman] = useState(false);
+  const [index, setIndex] = useState(0);
+  const [solutions, setSolutions] = useState([]);
+  const [captchaApi, setCaptchaApi] = useRefAsState(void 0);
+  const [showModal, setShowModal] = useState(false);
+  const [challenge, setChallenge] = useState(void 0);
+  const [loading, setLoading] = useState(false);
+  const [account, setAccount] = useState(void 0);
+  const [dappAccount, setDappAccount] = 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] = 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 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 = Manager(config, state, updateState, callbacks);
-    const styleWidth = { maxWidth: '400px', minWidth: '200px', margin: '8px' };
-    const themeColor = props.config.theme === 'light' ? 'light' : 'dark';
-    const theme = useMemo(() => (props.config.theme === 'light' ? lightTheme : darkTheme), [props.config.theme]);
-    console.log('theme', theme);
-    console.log('showModal', state.showModal);
-    return (_jsxs("div", { children: [_jsxs("div", { style: { maxWidth: '100%', maxHeight: '100%', overflowX: 'auto' }, children: [_jsx(Modal, { show: state.showModal, children: state.challenge ? (_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' })) : (_jsx("div", { children: "No challenge set." })) }), _jsxs("div", { style: styleWidth, "data-cy": 'button-human', children: [' ', _jsxs("div", { style: {
-                                    padding: '8px',
-                                    border: '1px solid',
-                                    backgroundColor: theme.palette.background.default,
-                                    borderColor: theme.palette.grey[300],
-                                    borderRadius: '8px',
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    alignItems: 'center',
-                                    flexWrap: 'wrap',
-                                }, children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsxs("div", { style: {
-                                                display: 'flex',
-                                                justifyContent: 'flex-start',
-                                                alignItems: 'center',
-                                                flexWrap: 'wrap',
-                                            }, children: [_jsxs("div", { style: {
-                                                        height: '50px',
-                                                        width: '50px',
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        justifyContent: 'center',
-                                                        flexDirection: 'column',
-                                                        verticalAlign: 'middle',
-                                                    }, children: [_jsx("div", { style: {
-                                                                display: !state.loading ? 'flex' : 'none',
-                                                            }, children: _jsx(Checkbox, { themeColor: themeColor, onChange: manager.start, checked: state.isHuman }) }), _jsx("div", { style: {
-                                                                display: state.loading ? 'flex' : 'none',
-                                                            }, children: _jsx("div", { style: { flex: 1 }, children: _jsx(LoadingSpinner, { themeColor: themeColor }) }) })] }), _jsx("div", { style: { padding: 1 }, children: _jsx("span", { style: { color: theme.palette.background.contrastText, paddingLeft: '4px' }, children: "I am a human" }) })] }) }), _jsx("div", { children: _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: _jsx("div", { children: _jsxs("div", { children: [_jsx("div", { css: logoStyle, dangerouslySetInnerHTML: {
-                                                                __html: props.config.theme === 'light'
-                                                                    ? logoWithoutTextBlack
-                                                                    : logoWithoutTextWhite,
-                                                            } }), _jsx("div", { css: logoStyle, dangerouslySetInnerHTML: {
-                                                                __html: props.config.theme === 'light'
-                                                                    ? logoWithTextBlack
-                                                                    : logoWithTextWhite,
-                                                            } })] }) }) }) })] })] })] }), config.devOnlyWatchEvents && (_jsx(Collector, { onProcessData: manager.exportData, sendData: state.showModal }))] }));
+  console.log("config", props.config);
+  const config = props.config;
+  const callbacks = props.callbacks || {};
+  const [state, updateState] = useProcaptcha();
+  console.log("state", state);
+  const manager = Manager(config, state, updateState, callbacks);
+  const styleWidth = { maxWidth: "400px", minWidth: "200px", margin: "8px" };
+  const themeColor = props.config.theme === "light" ? "light" : "dark";
+  const theme = useMemo(() => props.config.theme === "light" ? lightTheme : darkTheme, [props.config.theme]);
+  console.log("theme", theme);
+  console.log("showModal", state.showModal);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: [
+      /* @__PURE__ */ jsx(ModalComponent, { show: state.showModal, children: state.challenge ? /* @__PURE__ */ 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__ */ jsx("div", { children: "No challenge set." }) }),
+      /* @__PURE__ */ jsxs("div", { style: styleWidth, "data-cy": "button-human", children: [
+        " ",
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "8px",
+              border: "1px solid",
+              backgroundColor: theme.palette.background.default,
+              borderColor: theme.palette.grey[300],
+              borderRadius: "8px",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "flex-start",
+                    alignItems: "center",
+                    flexWrap: "wrap"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          height: "50px",
+                          width: "50px",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexDirection: "column",
+                          verticalAlign: "middle"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                display: !state.loading ? "flex" : "none"
+                              },
+                              children: /* @__PURE__ */ jsx(
+                                Checkbox,
+                                {
+                                  themeColor,
+                                  onChange: manager.start,
+                                  checked: state.isHuman
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                display: state.loading ? "flex" : "none"
+                              },
+                              children: /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(LoadingSpinner, { themeColor }) })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { style: { padding: 1 }, children: /* @__PURE__ */ jsx("span", { style: { color: theme.palette.background.contrastText, paddingLeft: "4px" }, children: "I am a human" }) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ 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__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        css: logoStyle,
+                        dangerouslySetInnerHTML: {
+                          __html: props.config.theme === "light" ? logoWithoutTextBlack : logoWithoutTextWhite
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        css: logoStyle,
+                        dangerouslySetInnerHTML: {
+                          __html: props.config.theme === "light" ? logoWithTextBlack : logoWithTextWhite
+                        }
+                      }
+                    )
+                  ] }) })
+                }
+              ) })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    config.devOnlyWatchEvents && /* @__PURE__ */ jsx(Collector, { onProcessData: manager.exportData, sendData: state.showModal })
+  ] });
 };
 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>';
-export default ProcaptchaWidget;
-//# sourceMappingURL=ProcaptchaWidget.js.map
+export {
+  ProcaptchaWidget as default
+};

package/dist/components/collector.js

@@ -1,25 +1,26 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { startCollector } from '@prosopo/procaptcha';
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { startCollector } from "@prosopo/procaptcha";
 const Collector = ({ onProcessData, sendData }) => {
-    const [mouseEvents, setStoredMouseEvents] = useState([]);
-    const [touchEvents, setStoredTouchEvents] = useState([]);
-    const [keyboardEvents, setStoredKeyboardEvents] = useState([]);
-    const ref = useRef(null);
-    useEffect(() => {
-        if (ref && ref.current) {
-            startCollector(setStoredMouseEvents, setStoredTouchEvents, setStoredKeyboardEvents, ref.current);
-        }
-    }, []);
-    useEffect(() => {
-        const userEvents = {
-            mouseEvents,
-            touchEvents,
-            keyboardEvents,
-        };
-        onProcessData(userEvents);
-    }, [sendData]);
-    return _jsx("div", { ref: ref });
+  const [mouseEvents, setStoredMouseEvents] = useState([]);
+  const [touchEvents, setStoredTouchEvents] = useState([]);
+  const [keyboardEvents, setStoredKeyboardEvents] = useState([]);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref && ref.current) {
+      startCollector(setStoredMouseEvents, setStoredTouchEvents, setStoredKeyboardEvents, ref.current);
+    }
+  }, []);
+  useEffect(() => {
+    const userEvents = {
+      mouseEvents,
+      touchEvents,
+      keyboardEvents
+    };
+    onProcessData(userEvents);
+  }, [sendData]);
+  return /* @__PURE__ */ jsx("div", { ref });
+};
+export {
+  Collector as default
 };
-export default Collector;
-//# sourceMappingURL=collector.js.map

package/dist/components/index.js

@@ -1,7 +1,11 @@
-export * from './CaptchaWidget.js';
-export * from './CaptchaComponent.js';
-export { default as ExtensionAccountSelect } from './ExtensionAccountSelect.js';
-export { default as ProcaptchaWidget } from './ProcaptchaWidget.js';
-export { default as Procaptcha } from './Procaptcha.js';
-export * from './Procaptcha.js';
-//# sourceMappingURL=index.js.map
+import { CaptchaWidget } from "./CaptchaWidget.js";
+import "./CaptchaComponent.js";
+import { ExtensionAccountSelect } from "./ExtensionAccountSelect.js";
+import { default as default2 } from "./ProcaptchaWidget.js";
+import { default as default3 } from "./Procaptcha.js";
+export {
+  CaptchaWidget,
+  ExtensionAccountSelect,
+  default3 as Procaptcha,
+  default2 as ProcaptchaWidget
+};

package/dist/components/theme.js

@@ -1,41 +1,44 @@
 const grey = {
-    0: '#fff',
-    100: '#f5f5f5',
-    200: '#eeeeee',
-    300: '#e0e0e0',
-    400: '#bdbdbd',
-    500: '#9e9e9e',
-    600: '#757575',
-    700: '#616161',
-    800: '#424242',
-    900: '#212121',
+  0: "#fff",
+  100: "#f5f5f5",
+  200: "#eeeeee",
+  300: "#e0e0e0",
+  400: "#bdbdbd",
+  500: "#9e9e9e",
+  600: "#757575",
+  700: "#616161",
+  800: "#424242",
+  900: "#212121"
 };
-export const lightTheme = {
-    palette: {
-        mode: 'light',
-        primary: {
-            main: '#487DFA',
-            contrastText: '#fff',
-        },
-        background: {
-            default: '#fff',
-            contrastText: '#000',
-        },
-        grey,
+const lightTheme = {
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#487DFA",
+      contrastText: "#fff"
     },
+    background: {
+      default: "#fff",
+      contrastText: "#000"
+    },
+    grey
+  }
 };
-export const darkTheme = {
-    palette: {
-        mode: 'dark',
-        primary: {
-            main: '#487DFA',
-            contrastText: '#fff',
-        },
-        background: {
-            default: '#303030',
-            contrastText: '#fff',
-        },
-        grey,
+const darkTheme = {
+  palette: {
+    mode: "dark",
+    primary: {
+      main: "#487DFA",
+      contrastText: "#fff"
+    },
+    background: {
+      default: "#303030",
+      contrastText: "#fff"
     },
+    grey
+  }
+};
+export {
+  darkTheme,
+  lightTheme
 };
-//# sourceMappingURL=theme.js.map

package/dist/index.d.ts

@@ -1,3 +1,42 @@
-export * from './components/index.js';
-export * from './util/index.js';
-//# sourceMappingURL=index.d.ts.map
+import { CaptchaResponseCaptcha } from '@prosopo/procaptcha';
+import { GetCaptchaResponse } from '@prosopo/api';
+import { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
+import { ProcaptchaCallbacks } from '@prosopo/procaptcha';
+import { ProcaptchaConfigOptional } from '@prosopo/procaptcha';
+
+export declare interface CaptchaComponentProps {
+    challenge: GetCaptchaResponse;
+    index: number;
+    solutions: string[][];
+    onSubmit: () => void;
+    onCancel: () => void;
+    onClick: (hash: string) => void;
+    onNext: () => void;
+    themeColor: 'light' | 'dark';
+}
+
+export declare const CaptchaWidget: ({ challenge, solution, onClick, themeColor }: CaptchaWidgetProps) => JSX_2.Element;
+
+export declare interface CaptchaWidgetProps {
+    challenge: CaptchaResponseCaptcha;
+    solution: string[];
+    onClick: (hash: string) => void;
+    themeColor: 'light' | 'dark';
+}
+
+export declare const ExtensionAccountSelect: ({ value, dappName, onChange, }: {
+    value?: string | undefined;
+    dappName: string;
+    onChange: (value: string) => void;
+}) => JSX_2.Element;
+
+export declare const Procaptcha: (props: ProcaptchaProps) => JSX_2.Element;
+
+declare interface ProcaptchaProps {
+    config: ProcaptchaConfigOptional;
+    callbacks?: Partial<ProcaptchaCallbacks>;
+}
+
+export declare const ProcaptchaWidget: (props: ProcaptchaProps) => JSX_2.Element;
+
+export { }

package/dist/index.js

@@ -1,3 +1,12 @@
-export * from './components/index.js';
-export * from './util/index.js';
-//# sourceMappingURL=index.js.map
+import "./components/index.js";
+import "./util/index.js";
+import { ExtensionAccountSelect } from "./components/ExtensionAccountSelect.js";
+import { default as default2 } from "./components/ProcaptchaWidget.js";
+import { default as default3 } from "./components/Procaptcha.js";
+import { CaptchaWidget } from "./components/CaptchaWidget.js";
+export {
+  CaptchaWidget,
+  ExtensionAccountSelect,
+  default3 as Procaptcha,
+  default2 as ProcaptchaWidget
+};