@prosopo/procaptcha-react 2.9.96 → 2.9.98

package/dist/cjs/components/CaptchaComponent.cjs

@@ -1,229 +1,165 @@
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const locale = require("@prosopo/locale");
-const procaptchaCommon = require("@prosopo/procaptcha-common");
-const util = require("@prosopo/util");
-const widgetSkeleton = require("@prosopo/widget-skeleton");
-const React = require("react");
-const index = require("../util/index.cjs");
-const Button = require("./Button.cjs");
-const CaptchaWidget = require("./CaptchaWidget.cjs");
-const CaptchaComponent = ({
-  challenge,
-  index: index$1,
-  solutions,
-  onSubmit,
-  onCancel,
-  onClick,
-  onNext,
-  onReload,
-  themeColor
-}) => {
-  const { t } = locale.useTranslation();
-  const captcha = challenge.captchas ? util.at(challenge.captchas, index$1) : null;
-  const solution = solutions ? util.at(solutions, index$1) : [];
-  const theme = React.useMemo(
-    () => themeColor === "light" ? widgetSkeleton.lightTheme : widgetSkeleton.darkTheme,
-    [themeColor]
-  );
-  const doubleSpacing = `${theme.spacing.unit * 2}px`;
-  const fullSpacing = `${theme.spacing.unit}px`;
-  const halfSpacing = `${theme.spacing.half}px`;
-  return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        // introduce scroll bars when screen < minWidth of children
-        overflowX: "auto",
-        overflowY: "auto",
-        maxWidth: "500px",
-        maxHeight: "100%",
-        display: "flex",
-        flexDirection: "column",
-        border: "1px solid #dddddd",
-        boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px",
-        borderRadius: "4px",
-        backgroundColor: theme.palette.background.default,
-        userSelect: "none",
-        touchAction: "none",
-        overscrollBehavior: "none"
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          style: {
-            backgroundColor: theme.palette.background.default,
-            display: "flex",
-            flexDirection: "column",
-            minWidth: "300px",
-            marginLeft: fullSpacing,
-            marginRight: fullSpacing,
-            justifyContent: "center"
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  width: "100%"
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    style: {
-                      backgroundColor: theme.palette.primary.main,
-                      width: "100%",
-                      marginTop: fullSpacing
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        style: {
-                          padding: `${theme.spacing.half}px`,
-                          fontFamily: theme.font.fontFamily
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs(
-                            "p",
-                            {
-                              style: {
-                                color: "#ffffff",
-                                fontWeight: 700,
-                                lineHeight: 1.5
-                              },
-                              children: [
-                                t("WIDGET.SELECT_ALL"),
-                                ":",
-                                " ",
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${util.at(challenge.captchas, index$1).target} ` })
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "p",
-                            {
-                              style: {
-                                color: "#ffffff",
-                                fontWeight: 500,
-                                lineHeight: 0.8,
-                                fontSize: "0.8rem"
-                              },
-                              children: t("WIDGET.IF_NONE_CLICK_NEXT")
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                ...index({ dev: { cy: `captcha-${index$1}` } }),
-                style: { overflow: "hidden" },
-                children: captcha && /* @__PURE__ */ jsxRuntime.jsx(
-                  CaptchaWidget.CaptchaWidget,
-                  {
-                    challenge: captcha,
-                    solution,
-                    onClick,
-                    themeColor
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  lineHeight: 1.75,
-                  padding: `${fullSpacing} 0 ${doubleSpacing} 0`
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    style: {
-                      // expand to full height / width of parent
-                      width: "100%",
-                      height: "100%",
-                      // display children in flex, spreading them evenly
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      gap: "10px"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          style: {
-                            position: "relative",
-                            flexGrow: 1,
-                            // make the width of each item 1/3rd of the width overall, i.e. 3 columns
-                            flexBasis: "calc(33.333% - 10px)"
-                          },
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            Button,
-                            {
-                              themeColor,
-                              buttonType: "cancel",
-                              onClick: onCancel,
-                              text: t("WIDGET.CANCEL"),
-                              "aria-label": t("WIDGET.CANCEL")
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          style: {
-                            position: "relative",
-                            flexGrow: 1,
-                            // make the width of each item 1/3rd of the width overall, i.e. 3 columns
-                            flexBasis: "calc(33.333% - 10px)"
-                          },
-                          children: /* @__PURE__ */ jsxRuntime.jsx(procaptchaCommon.ReloadButton, { themeColor, onReload })
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          style: {
-                            position: "relative",
-                            flexGrow: 1,
-                            // make the width of each item 1/3rd of the width overall, i.e. 3 columns
-                            flexBasis: "calc(33.333% - 10px)"
-                          },
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            Button,
-                            {
-                              themeColor,
-                              buttonType: "next",
-                              text: index$1 < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
-                              onClick: index$1 < challenge.captchas.length - 1 ? onNext : onSubmit,
-                              "aria-label": index$1 < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
-                              "data-cy": "button-next"
-                            }
-                          )
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  ) });
+const require_CaptchaWidget = require("./CaptchaWidget.cjs");
+const require_index = require("../util/index.cjs");
+const require_Button = require("./Button.cjs");
+let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let _prosopo_locale = require("@prosopo/locale");
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+let _prosopo_util = require("@prosopo/util");
+//#region src/components/CaptchaComponent.tsx
+var CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onClick, onNext, onReload, themeColor }) => {
+	const { t } = (0, _prosopo_locale.useTranslation)();
+	const captcha = (0, _prosopo_util.at)(challenge.captchas, index, { noWrap: true });
+	const solution = (0, _prosopo_util.at)(solutions, index, { noWrap: true });
+	const theme = (0, react.useMemo)(() => themeColor === "light" ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme, [themeColor]);
+	const doubleSpacing = `${theme.spacing.unit * 2}px`;
+	const fullSpacing = `${theme.spacing.unit}px`;
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react.Suspense, {
+		fallback: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: "Loading..." }),
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+			style: {
+				overflowX: "auto",
+				overflowY: "auto",
+				maxWidth: "500px",
+				maxHeight: "100%",
+				display: "flex",
+				flexDirection: "column",
+				border: "1px solid #dddddd",
+				boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px",
+				borderRadius: "4px",
+				backgroundColor: theme.palette.background.default,
+				userSelect: "none",
+				touchAction: "none",
+				overscrollBehavior: "none"
+			},
+			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+				style: {
+					backgroundColor: theme.palette.background.default,
+					display: "flex",
+					flexDirection: "column",
+					minWidth: "300px",
+					marginLeft: fullSpacing,
+					marginRight: fullSpacing,
+					justifyContent: "center"
+				},
+				children: [
+					/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							width: "100%"
+						},
+						children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+							style: {
+								backgroundColor: theme.palette.primary.main,
+								width: "100%",
+								marginTop: fullSpacing
+							},
+							children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+								style: {
+									padding: `${theme.spacing.half}px`,
+									fontFamily: theme.font.fontFamily
+								},
+								children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("p", {
+									style: {
+										color: "#ffffff",
+										fontWeight: 700,
+										lineHeight: 1.5
+									},
+									children: [
+										t("WIDGET.SELECT_ALL"),
+										":",
+										"\xA0",
+										/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: `${captcha.target} ` })
+									]
+								}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("p", {
+									style: {
+										color: "#ffffff",
+										fontWeight: 500,
+										lineHeight: .8,
+										fontSize: "0.8rem"
+									},
+									children: t("WIDGET.IF_NONE_CLICK_NEXT")
+								})]
+							})
+						})
+					}),
+					/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+						...require_index.default({ dev: { cy: `captcha-${index}` } }),
+						style: { overflow: "hidden" },
+						children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_CaptchaWidget.CaptchaWidget, {
+							challenge: captcha,
+							solution,
+							onClick,
+							themeColor
+						})
+					}),
+					/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							lineHeight: 1.75,
+							padding: `${fullSpacing} 0 ${doubleSpacing} 0`
+						},
+						children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+							style: {
+								width: "100%",
+								height: "100%",
+								display: "flex",
+								flexDirection: "row",
+								justifyContent: "space-between",
+								gap: "10px"
+							},
+							children: [
+								/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+									style: {
+										position: "relative",
+										flexGrow: 1,
+										flexBasis: "calc(33.333% - 10px)"
+									},
+									children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Button.default, {
+										themeColor,
+										buttonType: "cancel",
+										onClick: onCancel,
+										text: t("WIDGET.CANCEL"),
+										"aria-label": t("WIDGET.CANCEL")
+									})
+								}),
+								/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+									style: {
+										position: "relative",
+										flexGrow: 1,
+										flexBasis: "calc(33.333% - 10px)"
+									},
+									children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_prosopo_procaptcha_common.ReloadButton, {
+										themeColor,
+										onReload
+									})
+								}),
+								/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+									style: {
+										position: "relative",
+										flexGrow: 1,
+										flexBasis: "calc(33.333% - 10px)"
+									},
+									children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Button.default, {
+										themeColor,
+										buttonType: "next",
+										text: index < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
+										onClick: index < challenge.captchas.length - 1 ? onNext : onSubmit,
+										"aria-label": index < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
+										"data-cy": "button-next"
+									})
+								})
+							]
+						})
+					})
+				]
+			})
+		})
+	});
 };
-module.exports = CaptchaComponent;
+//#endregion
+exports.default = CaptchaComponent;