@prosopo/procaptcha-react 2.9.96 → 2.9.98

package/dist/cjs/components/CaptchaWidget.cjs

@@ -1,161 +1,107 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const common = require("@prosopo/common");
-const widgetSkeleton = require("@prosopo/widget-skeleton");
-const React = require("react");
-const getHash = (item) => {
-  if (!item.hash) {
-    throw new common.ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", {
-      context: { item }
-    });
-  }
-  return item.hash;
+let _prosopo_common = require("@prosopo/common");
+let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/CaptchaWidget.tsx
+var getHash = (item) => {
+	if (!item.hash) throw new _prosopo_common.ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", { context: { item } });
+	return item.hash;
 };
-const CaptchaWidget = ({
-  challenge,
-  solution,
-  onClick,
-  themeColor
-}) => {
-  const items = challenge.items;
-  const theme = React.useMemo(
-    () => themeColor === "light" ? widgetSkeleton.lightTheme : widgetSkeleton.darkTheme,
-    [themeColor]
-  );
-  const fullSpacing = `${theme.spacing.unit}px`;
-  const halfSpacing = `${theme.spacing.half}px`;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        // expand to full height / width of parent
-        width: "100%",
-        height: "100%",
-        // display children in flex, spreading them evenly and wrapping when row length exceeded
-        display: "flex",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        justifyContent: "space-between",
-        paddingBottom: fullSpacing,
-        paddingTop: fullSpacing,
-        gap: "10px"
-      },
-      children: items.map((item, index) => {
-        const hash = getHash(item);
-        const imageStyle = {
-          // enable the items in the grid to grow in width to use up excess space
-          flexGrow: 1,
-          // make the width of each item 1/3rd of the width overall, i.e. 3 columns
-          flexBasis: "calc(33.333% - 10px)",
-          // include the padding / margin / border in the width
-          boxSizing: "border-box"
-        };
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { style: imageStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              position: "relative",
-              cursor: "pointer",
-              height: "100%",
-              width: "100%",
-              padding: 0,
-              margin: 0
-            },
-            onClick: (e) => {
-              if (!e.isTrusted) {
-                return;
-              }
-              if ("touches" in e && e.touches.length > 0 && e.touches[0]) {
-                onClick(hash, e.touches[0].clientX, e.touches[0].clientY);
-                return;
-              }
-              if ("clientX" in e && "clientY" in e) {
-                onClick(hash, e.clientX, e.clientY);
-                return;
-              }
-              onClick(hash, 0, 0);
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
-                {
-                  style: {
-                    width: "100%",
-                    // image should be full width / height of the item
-                    display: "block",
-                    // removes whitespace below imgs
-                    objectFit: "cover",
-                    // contain the entire image in the img tag
-                    aspectRatio: "1/1",
-                    // force AR to be 1, letterboxing images with different aspect ratios
-                    height: "auto",
-                    // make the img tag responsive to its container
-                    overflow: "hidden",
-                    borderStyle: "solid",
-                    borderWidth: "1px",
-                    borderColor: theme.palette.grey[300]
-                  },
-                  src: item.data,
-                  alt: `Captcha image ${index + 1}`,
-                  onError: (e) => {
-                    const target = e.currentTarget;
-                    target._retryCount = (target._retryCount || 0) + 1;
-                    if (target._retryCount <= 3) {
-                      target.src = `${item.data}?retry=${Date.now()}`;
-                    }
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    bottom: 0,
-                    right: 0,
-                    height: "100%",
-                    width: "100%",
-                    // display overlays in center
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    // make bg half opacity, i.e. shadowing the item's img
-                    backgroundColor: "rgba(0,0,0,0.5)",
-                    visibility: solution.some((s) => s[0] === hash) ? "visible" : "hidden"
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "svg",
-                    {
-                      style: {
-                        backgroundColor: "transparent",
-                        // img must be displayed as block otherwise gets a bottom whitespace border
-                        display: "block",
-                        // how big the overlay icon is
-                        width: "35%",
-                        height: "35%",
-                        transition: "fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-                        userSelect: "none",
-                        fill: "currentcolor"
-                      },
-                      focusable: "false",
-                      color: "#fff",
-                      "aria-hidden": "true",
-                      viewBox: "0 0 24 24",
-                      "data-testid": "CheckIcon",
-                      "aria-label": "Check icon",
-                      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ) }, item.hash);
-      })
-    }
-  );
+var CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
+	const items = challenge.items;
+	const theme = (0, react.useMemo)(() => themeColor === "light" ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme, [themeColor]);
+	const fullSpacing = `${theme.spacing.unit}px`;
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+		style: {
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			flexDirection: "row",
+			flexWrap: "wrap",
+			justifyContent: "space-between",
+			paddingBottom: fullSpacing,
+			paddingTop: fullSpacing,
+			gap: "10px"
+		},
+		children: items.map((item, index) => {
+			const hash = getHash(item);
+			return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+				style: {
+					flexGrow: 1,
+					flexBasis: "calc(33.333% - 10px)",
+					boxSizing: "border-box"
+				},
+				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+					style: {
+						position: "relative",
+						cursor: "pointer",
+						height: "100%",
+						width: "100%",
+						padding: 0,
+						margin: 0
+					},
+					onClick: (e) => {
+						if (!e.isTrusted) return;
+						onClick(hash, e.clientX, e.clientY);
+					},
+					children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("img", {
+						style: {
+							width: "100%",
+							display: "block",
+							objectFit: "cover",
+							aspectRatio: "1/1",
+							height: "auto",
+							overflow: "hidden",
+							borderStyle: "solid",
+							borderWidth: "1px",
+							borderColor: theme.palette.grey[300]
+						},
+						src: item.data,
+						alt: `Captcha image ${index + 1}`,
+						onError: (e) => {
+							const target = e.currentTarget;
+							const retryCount = Number(target.dataset.retryCount ?? "0") + 1;
+							target.dataset.retryCount = String(retryCount);
+							if (retryCount <= 3) target.src = `${item.data}?retry=${Date.now()}`;
+						}
+					}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+						style: {
+							position: "absolute",
+							top: 0,
+							left: 0,
+							bottom: 0,
+							right: 0,
+							height: "100%",
+							width: "100%",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							backgroundColor: "rgba(0,0,0,0.5)",
+							visibility: solution.some((s) => s[0] === hash) ? "visible" : "hidden"
+						},
+						children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("svg", {
+							style: {
+								backgroundColor: "transparent",
+								display: "block",
+								width: "35%",
+								height: "35%",
+								transition: "fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+								userSelect: "none",
+								fill: "currentcolor"
+							},
+							focusable: "false",
+							color: "#fff",
+							"aria-hidden": "true",
+							viewBox: "0 0 24 24",
+							"data-testid": "CheckIcon",
+							"aria-label": "Check icon",
+							children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
+						})
+					})]
+				})
+			}, item.hash);
+		})
+	});
 };
+//#endregion
 exports.CaptchaWidget = CaptchaWidget;

package/dist/cjs/components/Modal.cjs

@@ -1,9 +1,11 @@
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("@emotion/react");
-const React = require("react");
-const reactDom = require("react-dom");
-const ModalInnerDivCSS = react.css`
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react, 1);
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let _emotion_react = require("@emotion/react");
+let react_dom = require("react-dom");
+//#region src/components/Modal.tsx
+var ModalInnerDivCSS = _emotion_react.css`
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -23,21 +25,26 @@ const ModalInnerDivCSS = react.css`
 		transform: translate(-50%, -100%);
     }
 `;
-const ModalComponent = React.memo((props) => {
-  const { show, children } = props;
-  const display = show ? "flex" : "none";
-  const ModalOuterDivCss = {
-    position: "fixed",
-    zIndex: 2147483646,
-    inset: 0,
-    display,
-    alignItems: "center",
-    justifyContent: "center",
-    minHeight: "100vh"
-  };
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prosopo-modalOuter", style: ModalOuterDivCss, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prosopo-modalInner", css: ModalInnerDivCSS, children }) }),
-    document.body
-  );
+var ModalComponent = react.default.memo((props) => {
+	const { show, children } = props;
+	const ModalOuterDivCss = {
+		position: "fixed",
+		zIndex: 2147483646,
+		inset: 0,
+		display: show ? "flex" : "none",
+		alignItems: "center",
+		justifyContent: "center",
+		minHeight: "100vh"
+	};
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+		className: "prosopo-modalOuter",
+		style: ModalOuterDivCss,
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+			className: "prosopo-modalInner",
+			css: ModalInnerDivCSS,
+			children
+		})
+	}), document.body);
 });
-module.exports = ModalComponent;
+//#endregion
+exports.default = ModalComponent;

package/dist/cjs/components/Procaptcha.cjs

@@ -1,7 +1,7 @@
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
-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, { children: /* @__PURE__ */ jsxRuntime.jsx(ProcaptchaWidget, { ...props }) });
-module.exports = Procaptcha;
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/Procaptcha.tsx
+var ProcaptchaWidget = (0, react.lazy)(async () => Promise.resolve().then(() => require("./ProcaptchaWidget.cjs")));
+var Procaptcha = (props) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react.Suspense, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ProcaptchaWidget, { ...props }) });
+//#endregion
+exports.default = Procaptcha;