@prosopo/procaptcha-react 0.2.40 → 0.3.1

package/dist/cjs/components/Button.cjs

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

package/dist/cjs/components/CaptchaComponent.cjs

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

package/dist/cjs/components/CaptchaWidget.cjs

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

package/dist/cjs/components/ExtensionAccountSelect.cjs

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

package/dist/cjs/components/Modal.cjs

@@ -1,17 +1,41 @@
 "use strict";
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-require("../style/Modal.css");
 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",
+    zIndex: 2147483646,
+    inset: 0,
     display
   };
+  const ModalBackgroundCSS = {
+    position: "fixed",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    right: 0,
+    bottom: 0,
+    top: 0,
+    left: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: -1
+  };
+  const ModalInnerDivCSS = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "400px",
+    backgroundColor: "rgb(255, 255, 255)",
+    border: "none",
+    boxShadow: "rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px,"
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modalOuter", style: ModalOuterDivCss, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modalBackground" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modalInner", children })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modalBackground", style: ModalBackgroundCSS }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modalInner", style: ModalInnerDivCSS, children })
   ] });
 });
 module.exports = ModalComponent;

package/dist/cjs/components/Procaptcha.cjs

@@ -1,7 +1,8 @@
 "use strict";
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const CaptchaPlaceholder = require("./CaptchaPlaceholder.cjs");
+require("../web-components/dist/index.cjs");
 const React = require("react");
+const CaptchaPlaceholder = require("../web-components/dist/CaptchaPlaceholder.cjs");
 const _interopNamespaceDefaultOnly = (e) => Object.freeze(Object.defineProperty({ __proto__: null, default: e }, Symbol.toStringTag, { value: "Module" }));
 const ProcaptchaWidget = React.lazy(async () => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("./ProcaptchaWidget.cjs"))));
 const Procaptcha = (props) => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(CaptchaPlaceholder.ProcaptchaPlaceholder, { darkMode: props.config.theme }), children: /* @__PURE__ */ jsxRuntime.jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks }) });

package/dist/cjs/components/ProcaptchaWidget.cjs

@@ -1,14 +1,15 @@
 "use strict";
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+require("../web-components/dist/index.cjs");
 const procaptcha = require("@prosopo/procaptcha");
-const LoadingSpinner = require("./LoadingSpinner.cjs");
 const react = require("@emotion/react");
-const theme = require("./theme.cjs");
 const React = require("react");
 const CaptchaComponent = require("./CaptchaComponent.cjs");
-const Checkbox = require("./Checkbox.cjs");
 const collector = require("./collector.cjs");
 const Modal = require("./Modal.cjs");
+const theme = require("../web-components/dist/theme.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;
@@ -192,7 +193,7 @@ const ProcaptchaWidget = (props) => {
                                 display: !state.loading ? "flex" : "none"
                               },
                               children: /* @__PURE__ */ jsxRuntime.jsx(
-                                Checkbox,
+                                Checkbox.Checkbox,
                                 {
                                   themeColor,
                                   onChange: manager.start,

package/dist/cjs/index.cjs

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

package/dist/cjs/{components → web-components/dist}/CaptchaPlaceholder.cjs

@@ -41,89 +41,36 @@ const ProcaptchaPlaceholder = (props) => {
   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 /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: /* @__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.jsx(
-            "div",
-            {
-              style: {
-                display: "flex",
-                justifyContent: "flex-start",
-                alignItems: "center",
-                flexWrap: "wrap"
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  style: {
-                    height: "50px",
-                    width: "50px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    flexDirection: "column",
-                    verticalAlign: "middle"
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      style: {
-                        display: "flex"
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, 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: darkMode === "light" ? logoWithoutTextBlack : logoWithoutTextWhite
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    css: logoStyle,
-                    dangerouslySetInnerHTML: {
-                      __html: darkMode === "light" ? logoWithTextBlack : logoWithTextWhite
-                    }
-                  }
-                )
-              ] }) })
-            }
-          ) })
-        ]
-      }
-    )
-  ] }) }) });
+  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",
+    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: [jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: jsxRuntime.jsx("div", { style: {
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    flexWrap: "wrap"
+  }, children: jsxRuntime.jsx("div", { style: {
+    height: "50px",
+    width: "50px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    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
+  } })] }) }) }) })] })] }) }) });
 };
 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 → web-components/dist}/Checkbox.cjs

@@ -1,4 +1,5 @@
 "use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const react = require("@emotion/react");
 const theme = require("./theme.cjs");
@@ -38,19 +39,7 @@ const Checkbox = ({ themeColor, onChange, checked }) => {
       appearance: checked ? "auto" : "none"
     };
   }, [hover, theme$1, checked]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      onMouseEnter: () => setHover(true),
-      onMouseLeave: () => setHover(false),
-      css: checkboxBefore,
-      type: "checkbox",
-      "aria-live": "assertive",
-      "aria-haspopup": "true",
-      onChange,
-      checked,
-      style: checkboxStyle
-    }
-  );
+  return jsxRuntime.jsx("input", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), css: checkboxBefore, type: "checkbox", "aria-live": "assertive", "aria-haspopup": "true", onChange, checked, style: checkboxStyle });
 };
-module.exports = Checkbox;
+exports.Checkbox = Checkbox;
+exports.default = Checkbox;

package/dist/cjs/{components → web-components/dist}/LoadingSpinner.cjs

@@ -24,7 +24,7 @@ const LoadingSpinner = ({ themeColor }) => {
             }
         }
     `;
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledDiv, {});
+  return jsxRuntime.jsx(StyledDiv, {});
 };
 exports.LoadingSpinner = LoadingSpinner;
 exports.default = LoadingSpinner;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const CaptchaPlaceholder = require("./CaptchaPlaceholder.cjs");
+const LoadingSpinner = require("./LoadingSpinner.cjs");
+const theme = require("./theme.cjs");
+const Checkbox = require("./Checkbox.cjs");
+exports.ProcaptchaPlaceholder = CaptchaPlaceholder.ProcaptchaPlaceholder;
+exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
+exports.darkTheme = theme.darkTheme;
+exports.lightTheme = theme.lightTheme;
+exports.Checkbox = Checkbox.Checkbox;

package/dist/components/Button.d.ts

@@ -0,0 +1,10 @@
+import React, { ButtonHTMLAttributes } from 'react';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    themeColor: 'light' | 'dark';
+    buttonType: 'cancel' | 'next';
+    onClick: () => void;
+    text: string;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAoC,MAAM,OAAO,CAAA;AAGrF,UAAU,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACjE,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,UAAU,EAAE,QAAQ,GAAG,MAAM,CAAA;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;CACf;AAgCD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmCjC,CAAA;AACD,eAAe,MAAM,CAAA"}

package/dist/components/Button.js

@@ -1,69 +1,59 @@
-import { jsx } from "@emotion/react/jsx-runtime";
-import { lightTheme, darkTheme } from "./theme.js";
-import { useMemo, useState } from "react";
-import addDataAttr from "../util/index.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { darkTheme, lightTheme } from '@prosopo/web-components';
+import { useMemo, useState } from 'react';
+import addDataAttr from '../util/index.js';
 const buttonStyleBase = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  position: "relative",
-  boxSizing: "border-box",
-  outline: "0px",
-  border: "0px",
-  margin: "0px",
-  cursor: "pointer",
-  userSelect: "none",
-  verticalAlign: "middle",
-  appearance: void 0,
-  textDecoration: "none",
-  fontWeight: "500",
-  fontSize: "0.875rem",
-  lineHeight: "1.75",
-  letterSpacing: "0.02857em",
-  textTransform: "uppercase",
-  minWidth: "64px",
-  padding: "6px 16px",
-  borderRadius: "4px",
-  transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-  color: "rgb(0, 0, 0)",
-  backgroundColor: "#ffffff",
-  boxShadow: "rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px"
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    boxSizing: 'border-box',
+    outline: '0px',
+    border: '0px',
+    margin: '0px',
+    cursor: 'pointer',
+    userSelect: 'none',
+    verticalAlign: 'middle',
+    appearance: undefined,
+    textDecoration: 'none',
+    fontWeight: '500',
+    fontSize: '0.875rem',
+    lineHeight: '1.75',
+    letterSpacing: '0.02857em',
+    textTransform: 'uppercase',
+    minWidth: '64px',
+    padding: '6px 16px',
+    borderRadius: '4px',
+    transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    color: 'rgb(0, 0, 0)',
+    backgroundColor: '#ffffff',
+    boxShadow: 'rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px',
 };
 const Button = ({ themeColor, buttonType, text, onClick }) => {
-  const theme = useMemo(() => themeColor === "light" ? lightTheme : darkTheme, [themeColor]);
-  const [hover, setHover] = useState(false);
-  const buttonStyle = useMemo(() => {
-    const baseStyle = {
-      ...buttonStyleBase,
-      color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText
-    };
-    if (buttonType === "cancel") {
-      return {
-        ...baseStyle,
-        backgroundColor: hover ? theme.palette.grey[600] : "transparent"
-      };
-    } else {
-      return {
-        ...baseStyle,
-        backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default
-      };
-    }
-  }, [buttonType, hover, theme]);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ...addDataAttr({ dev: { cy: `button-${buttonType}` } }),
-      onMouseEnter: () => setHover(true),
-      onMouseLeave: () => setHover(false),
-      style: buttonStyle,
-      onClick: (e) => {
-        e.preventDefault();
-        onClick();
-      },
-      children: text
-    }
-  );
-};
-export {
-  Button as default
+    const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor]);
+    const [hover, setHover] = useState(false);
+    const buttonStyle = useMemo(() => {
+        const baseStyle = {
+            ...buttonStyleBase,
+            color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText,
+        };
+        if (buttonType === 'cancel') {
+            return {
+                ...baseStyle,
+                backgroundColor: hover ? theme.palette.grey[600] : 'transparent',
+            };
+        }
+        else {
+            return {
+                ...baseStyle,
+                backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default,
+            };
+        }
+    }, [buttonType, hover, theme]);
+    return (_jsx("button", { ...addDataAttr({ dev: { cy: `button-${buttonType}` } }), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: buttonStyle, onClick: (e) => {
+            e.preventDefault();
+            onClick();
+        }, children: text }));
 };
+export default Button;
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAc,EAAuC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrF,OAAO,WAAW,MAAM,kBAAkB,CAAA;AAS1C,MAAM,eAAe,GAAkB;IACnC,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,KAAK;IACd,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,SAAS;IACrB,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,WAAW;IAC1B,aAAa,EAAE,WAAW;IAC1B,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,KAAK;IACnB,UAAU,EACN,+MAA+M;IACnN,KAAK,EAAE,cAAc;IACrB,eAAe,EAAE,SAAS;IAC1B,SAAS,EACL,+GAA+G;CACtH,CAAA;AAED,MAAM,MAAM,GAA0B,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAe,EAAE,EAAE;IAC7F,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAC5F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAG;YACd,GAAG,eAAe;YAClB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY;SAC5F,CAAA;QACD,IAAI,UAAU,KAAK,QAAQ,EAAE;YACzB,OAAO;gBACH,GAAG,SAAS;gBACZ,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa;aACnE,CAAA;SACJ;aAAM;YACH,OAAO;gBACH,GAAG,SAAS;gBACZ,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;aACzF,CAAA;SACJ;IACL,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IAE9B,OAAO,CACH,oBACQ,WAAW,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,UAAU,UAAU,EAAE,EAAE,EAAE,CAAC,EACxD,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EACnC,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACX,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,OAAO,EAAE,CAAA;QACb,CAAC,YAEA,IAAI,GACA,CACZ,CAAA;AACL,CAAC,CAAA;AACD,eAAe,MAAM,CAAA"}

package/dist/components/CaptchaComponent.d.ts

@@ -0,0 +1,14 @@
+import { GetCaptchaResponse } from '@prosopo/api';
+export interface CaptchaComponentProps {
+    challenge: GetCaptchaResponse;
+    index: number;
+    solutions: string[][];
+    onSubmit: () => void;
+    onCancel: () => void;
+    onClick: (hash: string) => void;
+    onNext: () => void;
+    themeColor: 'light' | 'dark';
+}
+declare const CaptchaComponent: ({ challenge, index, solutions, onSubmit, onCancel, onClick, onNext, themeColor, }: CaptchaComponentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default CaptchaComponent;
+//# sourceMappingURL=CaptchaComponent.d.ts.map

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

@@ -0,0 +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,qDA8GvB,CAAA;AAED,eAAe,gBAAgB,CAAA"}