@prosopo/procaptcha-react 0.2.29 → 0.2.32

package/dist/cjs/components/Procaptcha.cjs

@@ -2,14 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const procaptcha = require("@prosopo/procaptcha");
-const LoadingSpinner = require("./LoadingSpinner.cjs");
+const material = require("@mui/material");
 const react = require("@emotion/react");
 const theme = require("./theme.cjs");
-const React = require("react");
+const react$1 = 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;
@@ -42,7 +39,7 @@ const logoStyle = react.css`
     }
 `;
 const useRefAsState = (defaultValue) => {
-  const ref = React.useRef(defaultValue);
+  const ref = react$1.useRef(defaultValue);
   const setter = (value2) => {
     ref.current = value2;
   };
@@ -50,22 +47,21 @@ const useRefAsState = (defaultValue) => {
   return [value, setter];
 };
 const useProcaptcha = () => {
-  const [isHuman, setIsHuman] = React.useState(false);
-  const [index, setIndex] = React.useState(0);
-  const [solutions, setSolutions] = React.useState([]);
+  const [isHuman, setIsHuman] = react$1.useState(false);
+  const [index, setIndex] = react$1.useState(0);
+  const [solutions, setSolutions] = react$1.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 [showModal, setShowModal] = react$1.useState(false);
+  const [challenge, setChallenge] = react$1.useState(void 0);
+  const [loading, setLoading] = react$1.useState(false);
+  const [account, setAccount] = react$1.useState(void 0);
+  const [dappAccount, setDappAccount] = react$1.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
     {
@@ -81,8 +77,7 @@ const useProcaptcha = () => {
       submission,
       timeout,
       blockNumber,
-      successfullChallengeTimeout,
-      sendData
+      successfullChallengeTimeout
     },
     // and method to update the state
     (nextState) => {
@@ -114,8 +109,6 @@ const useProcaptcha = () => {
         setSuccessfullChallengeTimeout(nextState.timeout);
       if (nextState.blockNumber !== void 0)
         setBlockNumber(nextState.blockNumber);
-      if (nextState.sendData !== void 0)
-        setSendData(nextState.sendData);
     }
   ];
 };
@@ -126,133 +119,134 @@ const Procaptcha = (props) => {
   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,
+  const configSx = { maxWidth: "400px", minWidth: "200px" };
+  const theme$1 = react$1.useMemo(() => props.config.theme === "light" ? theme.lightTheme : theme.darkTheme, [props.config.theme]);
+  return /* @__PURE__ */ jsxRuntime.jsx(material.ThemeProvider, { theme: theme$1, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.Backdrop, { open: state.showModal, sx: { zIndex: 2147483647 }, 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(material.Alert, { children: "No challenge set." }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { p: 0, sx: [...Array.isArray(configSx) ? configSx : [configSx]], "data-cy": "button-human", children: [
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        material.Box,
         {
-          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: [
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              padding: "8px",
-              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"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          p: 1,
+          border: 1,
+          bgcolor: theme$1.palette.background.default,
+          borderColor: theme$1.palette.grey[300],
+          borderRadius: 2,
+          sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            flexWrap: "wrap"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Box,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "flex-start",
+                  alignItems: "center",
+                  flexWrap: "wrap"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    material.Box,
+                    {
+                      sx: {
+                        height: "50px",
+                        width: "50px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexDirection: "column"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          material.Box,
+                          {
+                            sx: {
+                              display: !state.loading ? "block" : "none"
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              material.Checkbox,
+                              {
+                                onChange: manager.start,
+                                checked: state.isHuman,
+                                inputProps: { "aria-label": "controlled" },
+                                sx: {
+                                  "& .MuiSvgIcon-root": { fontSize: 32, position: "relative" },
+                                  "& .PrivateSwitchBase-input": {
+                                    width: "1.4em",
+                                    height: "1.4em",
+                                    top: "auto",
+                                    left: "auto",
+                                    opacity: "1",
+                                    "&::before": {
+                                      content: '""',
+                                      position: "absolute",
+                                      height: "100%",
+                                      width: "100%"
+                                    }
+                                  }
+                                }
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          material.Box,
+                          {
+                            sx: {
+                              display: state.loading ? "block" : "none"
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { pt: "5px", children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: "24px", disableShrink: true }) })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Box, { p: 1, children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: theme$1.palette.primary.contrastText, children: "I am a human" }) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Link, { href: "https://prosopo.io", target: "_blank", children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  style: {
-                    display: "flex",
-                    justifyContent: "flex-start",
-                    alignItems: "center",
-                    flexWrap: "wrap"
-                  },
-                  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" }) })
-                  ]
+                  css: logoStyle,
+                  dangerouslySetInnerHTML: {
+                    __html: props.config.theme === "light" ? logoWithoutTextBlack : logoWithoutTextWhite
+                  }
                 }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                "a",
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  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
-                        }
-                      }
-                    )
-                  ] }) })
+                  css: logoStyle,
+                  dangerouslySetInnerHTML: {
+                    __html: props.config.theme === "light" ? logoWithTextBlack : logoWithTextWhite
+                  }
                 }
-              ) })
-            ]
-          }
-        )
-      ] })
-    ] }),
-    config.devOnlyWatchEvents && /* @__PURE__ */ jsxRuntime.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>';

package/dist/cjs/components/theme.cjs

@@ -1,44 +1,29 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const grey = {
-  0: "#fff",
-  100: "#f5f5f5",
-  200: "#eeeeee",
-  300: "#e0e0e0",
-  400: "#bdbdbd",
-  500: "#9e9e9e",
-  600: "#757575",
-  700: "#616161",
-  800: "#424242",
-  900: "#212121"
-};
-const lightTheme = {
+const material = require("@mui/material");
+const lightTheme = material.createTheme({
   palette: {
     mode: "light",
     primary: {
-      main: "#487DFA",
-      contrastText: "#fff"
-    },
-    background: {
-      default: "#fff",
+      main: "#1976d2",
       contrastText: "#000"
     },
-    grey
+    background: {
+      default: "#fff"
+    }
   }
-};
-const darkTheme = {
+});
+const darkTheme = material.createTheme({
   palette: {
     mode: "dark",
     primary: {
-      main: "#487DFA",
+      main: "#1976d2",
       contrastText: "#fff"
     },
     background: {
-      default: "#303030",
-      contrastText: "#fff"
-    },
-    grey
+      default: "#303030"
+    }
   }
-};
+});
 exports.darkTheme = darkTheme;
 exports.lightTheme = lightTheme;

package/dist/components/CaptchaComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaptchaComponent.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAQjD,MAAM,WAAW,qBAAqB;IAClC,SAAS,EAAE,kBAAkB,CAAA;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,EAAE,EAAE,CAAA;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;CAC/B;AAED,QAAA,MAAM,gBAAgB,sFASnB,qBAAqB,qDA4GvB,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"CaptchaComponent.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAQjD,MAAM,WAAW,qBAAqB;IAClC,SAAS,EAAE,kBAAkB,CAAA;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,EAAE,EAAE,CAAA;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;CAC/B;AAED,QAAA,MAAM,gBAAgB,sFASnB,qBAAqB,qDA8GvB,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/components/CaptchaComponent.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { CaptchaWidget } from './CaptchaWidget.js';
+import { Suspense, useMemo } from 'react';
 import { at } from '@prosopo/util';
 import { darkTheme, lightTheme } from './theme.js';
-import { useMemo } from 'react';
 import { useTranslation } from '@prosopo/common';
 import Button from './Button.js';
 import addDataAttr from '../util/index.js';
@@ -11,50 +11,50 @@ const CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onC
     const captcha = challenge.captchas ? at(challenge.captchas, index) : null;
     const solution = solutions ? at(solutions, index) : [];
     const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor]);
-    return (_jsx("div", { style: {
-            overflowX: 'auto',
-            overflowY: 'auto',
-            width: '100%',
-            maxWidth: '500px',
-            maxHeight: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: _jsxs("div", { style: {
-                backgroundColor: theme.palette.background.default,
+    return (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx("div", { style: {
+                overflowX: 'auto',
+                overflowY: 'auto',
+                width: '100%',
+                maxWidth: '500px',
+                maxHeight: '100%',
                 display: 'flex',
                 flexDirection: 'column',
-                minWidth: '300px',
-            }, children: [_jsxs("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        width: '100%',
-                        backgroundColor: theme.palette.primary.main,
-                        padding: '24px 16px',
-                    }, children: [_jsxs("p", { style: {
-                                color: '#ffffff',
-                                fontWeight: 700,
-                                lineHeight: 1.5,
-                            }, children: [t('WIDGET.SELECT_ALL'), ': '] }), _jsx("p", { style: {
-                                color: '#ffffff',
-                                fontWeight: 700,
-                                textTransform: 'capitalize',
-                                lineHeight: 1.5,
-                            }, children: `${at(challenge.captchas, index).captcha.target}` })] }), _jsx("div", { ...addDataAttr({ dev: { cy: 'captcha-' + index } }), children: captcha && (_jsx(CaptchaWidget, { challenge: captcha, solution: solution, onClick: onClick, themeColor: themeColor })) }), _jsx("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        width: '100%',
-                    }, ...addDataAttr({ dev: { cy: 'dots-captcha' } }) }), _jsx("div", { style: {
-                        padding: '8px 16px',
-                        display: 'flex',
-                        width: '100%',
-                    } }), _jsxs("div", { style: {
-                        padding: '0 16px 16px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        lineHeight: 1.75,
-                    }, children: [_jsx(Button, { themeColor: themeColor, buttonType: "cancel", onClick: onCancel, text: t('WIDGET.CANCEL') }), _jsx(Button, { themeColor: themeColor, buttonType: "next", text: index < challenge.captchas.length - 1 ? t('WIDGET.NEXT') : t('WIDGET.SUBMIT'), onClick: index < challenge.captchas.length - 1 ? onNext : onSubmit })] })] }) }));
+            }, children: _jsxs("div", { style: {
+                    backgroundColor: theme.palette.background.default,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minWidth: '300px',
+                }, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            width: '100%',
+                            backgroundColor: theme.palette.primary.main,
+                            padding: '24px 16px',
+                        }, children: [_jsxs("p", { style: {
+                                    color: '#ffffff',
+                                    fontWeight: 700,
+                                    lineHeight: 1.5,
+                                }, children: [t('WIDGET.SELECT_ALL'), ': '] }), _jsx("p", { style: {
+                                    color: '#ffffff',
+                                    fontWeight: 700,
+                                    textTransform: 'capitalize',
+                                    lineHeight: 1.5,
+                                }, children: `${at(challenge.captchas, index).captcha.target}` })] }), _jsx("div", { ...addDataAttr({ dev: { cy: 'captcha-' + index } }), children: captcha && (_jsx(CaptchaWidget, { challenge: captcha, solution: solution, onClick: onClick, themeColor: themeColor })) }), _jsx("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: '100%',
+                        }, ...addDataAttr({ dev: { cy: 'dots-captcha' } }) }), _jsx("div", { style: {
+                            padding: '8px 16px',
+                            display: 'flex',
+                            width: '100%',
+                        } }), _jsxs("div", { style: {
+                            padding: '0 16px 16px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            lineHeight: 1.75,
+                        }, children: [_jsx(Button, { themeColor: themeColor, buttonType: "cancel", onClick: onCancel, text: t('WIDGET.CANCEL') }), _jsx(Button, { themeColor: themeColor, buttonType: "next", text: index < challenge.captchas.length - 1 ? t('WIDGET.NEXT') : t('WIDGET.SUBMIT'), onClick: index < challenge.captchas.length - 1 ? onNext : onSubmit })] })] }) }) }));
 };
 export default CaptchaComponent;
 //# sourceMappingURL=CaptchaComponent.js.map

package/dist/components/CaptchaComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaptchaComponent.js","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CaptchaComponent.js","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":"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"}

package/dist/components/CaptchaPlaceholder.d.ts

@@ -0,0 +1,6 @@
+type PlaceholderProps = {
+    darkMode: 'light' | 'dark' | undefined;
+};
+export declare const ProcaptchaPlaceholder: (props: PlaceholderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CaptchaPlaceholder.d.ts.map

package/dist/components/CaptchaPlaceholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptchaPlaceholder.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaPlaceholder.tsx"],"names":[],"mappings":"AAmDA,KAAK,gBAAgB,GAAG;IAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;CAAE,CAAA;AAElE,eAAO,MAAM,qBAAqB,UAAW,gBAAgB,qDAqF5D,CAAA"}