@prosopo/procaptcha-react 2.5.3 → 2.6.1

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# @prosopo/procaptcha-react
+
+## 2.6.1
+
+### Patch Changes
+
+- Updated dependencies [52feffc]
+  - @prosopo/types@2.6.1
+  - @prosopo/procaptcha@2.6.1
+  - @prosopo/procaptcha-common@2.6.1
+
+## 2.6.0
+
+### Minor Changes
+
+- a0bfc8a: bump all pkg versions since independent versioning applied
+
+### Patch Changes
+
+- Updated dependencies [a0bfc8a]
+  - @prosopo/common@2.6.0
+  - @prosopo/locale@2.6.0
+  - @prosopo/procaptcha@2.6.0
+  - @prosopo/procaptcha-common@2.6.0
+  - @prosopo/types@2.6.0
+  - @prosopo/util@2.6.0
+  - @prosopo/widget-skeleton@2.6.0

package/dist/cjs/components/Button.cjs

@@ -0,0 +1,77 @@
+"use strict";
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const widgetSkeleton = require("@prosopo/widget-skeleton");
+const React = require("react");
+const index = require("../util/index.cjs");
+const buttonStyleBase = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative",
+  boxSizing: "border-box",
+  outline: "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",
+  backgroundColor: "#ffffff"
+};
+const Button = ({
+  themeColor,
+  buttonType,
+  text,
+  onClick
+}) => {
+  const theme = React.useMemo(
+    () => themeColor === "light" ? widgetSkeleton.lightTheme : widgetSkeleton.darkTheme,
+    [themeColor]
+  );
+  const [hover, setHover] = React.useState(false);
+  const buttonStyle = React.useMemo(() => {
+    const baseStyle = {
+      ...buttonStyleBase,
+      border: `1px solid ${theme.palette.grey[500]}`,
+      boxShadow: `0px 1px 3px 0px ${theme.palette.grey[500]}`,
+      fontFamily: theme.font.fontFamily,
+      width: "100%",
+      color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText
+    };
+    if (buttonType === "cancel") {
+      return {
+        ...baseStyle,
+        backgroundColor: hover ? theme.palette.grey[600] : "transparent"
+      };
+    }
+    return {
+      ...baseStyle,
+      backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default
+    };
+  }, [buttonType, hover, theme]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...index({ dev: { cy: `button-${buttonType}` } }),
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      style: buttonStyle,
+      onClick: (e) => {
+        e.preventDefault();
+        onClick();
+      },
+      "aria-label": text,
+      children: text
+    }
+  );
+};
+module.exports = Button;

package/dist/cjs/components/CaptchaComponent.cjs

@@ -0,0 +1,230 @@
+"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 and wrapping when row length exceeded
+                      display: "flex",
+                      flexDirection: "row",
+                      flexWrap: "wrap",
+                      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"
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+};
+module.exports = CaptchaComponent;

package/dist/cjs/components/CaptchaWidget.cjs

@@ -0,0 +1,141 @@
+"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;
+};
+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: () => onClick(hash),
+            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}`
+                }
+              ),
+              /* @__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.includes(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);
+      })
+    }
+  );
+};
+exports.CaptchaWidget = CaptchaWidget;

package/dist/cjs/components/Modal.cjs

@@ -0,0 +1,43 @@
+"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`
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	max-width: 500px;
+	background-color: transparent;
+	border: none;
+	border-radius: 4px;
+	z-index: 2147483647;
+	align-self: center;
+	box-shadow: 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;
+	box-sizing: border-box; /* Ensures border is part of width */
+	/* iOS only */
+    @supports (-webkit-touch-callout: none) { 
+		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
+  );
+});
+module.exports = ModalComponent;

package/dist/cjs/components/Procaptcha.cjs

@@ -0,0 +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;

package/dist/cjs/components/ProcaptchaWidget.cjs

@@ -0,0 +1,126 @@
+"use strict";
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const locale = require("@prosopo/locale");
+const procaptcha = require("@prosopo/procaptcha");
+const procaptchaCommon = require("@prosopo/procaptcha-common");
+const types = require("@prosopo/types");
+const widgetSkeleton = require("@prosopo/widget-skeleton");
+const React = require("react");
+const CaptchaComponent = require("./CaptchaComponent.cjs");
+const Modal = require("./Modal.cjs");
+const PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
+const ProcaptchaWidget = (props) => {
+  const { t } = locale.useTranslation();
+  const config = types.ProcaptchaConfigSchema.parse(props.config);
+  const frictionlessState = props.frictionlessState;
+  const i18n = props.i18n;
+  const callbacks = props.callbacks || {};
+  const [state, updateState] = procaptchaCommon.useProcaptcha(React.useState, React.useRef);
+  const [loading, setLoading] = React.useState(false);
+  const manager = procaptcha.Manager(
+    config,
+    state,
+    updateState,
+    callbacks,
+    frictionlessState
+  );
+  const theme = "light" === props.config.theme ? widgetSkeleton.lightTheme : widgetSkeleton.darkTheme;
+  React.useEffect(() => {
+    if (config.language) {
+      if (i18n) {
+        if (i18n.language !== config.language) {
+          i18n.changeLanguage(config.language).then((r) => r);
+        }
+      } else {
+        locale.loadI18next(false).then((i18n2) => {
+          if (i18n2.language !== config.language)
+            i18n2.changeLanguage(config.language).then((r) => r);
+        });
+      }
+    }
+  }, [i18n, config.language]);
+  React.useEffect(() => {
+    if (state.error) {
+      setLoading(false);
+      if (state.error.key === "CAPTCHA.NO_SESSION_FOUND" && frictionlessState) {
+        setTimeout(() => {
+          frictionlessState.restart();
+        }, 3e3);
+      }
+    }
+  }, [state.error, frictionlessState]);
+  React.useEffect(() => {
+    const handleExecuteEvent = (event) => {
+      updateState({
+        showModal: true
+      });
+      if (!state.challenge && manager.start) {
+        console.log("No challenge set, attempting to start verification");
+        try {
+          manager.start();
+        } catch (error) {
+          console.error("Error starting verification:", error);
+        }
+      }
+    };
+    document.addEventListener(PROCAPTCHA_EXECUTE_EVENT, handleExecuteEvent);
+    return () => {
+      document.removeEventListener(
+        PROCAPTCHA_EXECUTE_EVENT,
+        handleExecuteEvent
+      );
+    };
+  }, [manager, state.challenge, updateState]);
+  if (config.mode === "invisible") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Modal, { show: state.showModal, 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,
+        onReload: manager.reload,
+        themeColor: config.theme ?? "light"
+      }
+    ) : null });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "image-captcha", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Modal, { show: state.showModal, 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,
+        onReload: manager.reload,
+        themeColor: config.theme ?? "light"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "No challenge set." }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      procaptchaCommon.Checkbox,
+      {
+        theme,
+        onChange: async () => {
+          if (loading) {
+            return;
+          }
+          setLoading(true);
+          await manager.start();
+          setLoading(false);
+        },
+        checked: state.isHuman,
+        labelText: t("WIDGET.I_AM_HUMAN"),
+        error: state.error?.message,
+        "aria-label": "human checkbox",
+        loading
+      }
+    )
+  ] });
+};
+module.exports = ProcaptchaWidget;

package/dist/cjs/components/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const CaptchaWidget = require("./CaptchaWidget.cjs");
+require("./CaptchaComponent.cjs");
+const ProcaptchaWidget = require("./ProcaptchaWidget.cjs");
+const Procaptcha = require("./Procaptcha.cjs");
+exports.CaptchaWidget = CaptchaWidget.CaptchaWidget;
+exports.ProcaptchaWidget = ProcaptchaWidget;
+exports.Procaptcha = Procaptcha;

package/dist/cjs/index.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./components/index.cjs");
+require("./util/index.cjs");
+const ProcaptchaWidget = require("./components/ProcaptchaWidget.cjs");
+const Procaptcha = require("./components/Procaptcha.cjs");
+const CaptchaWidget = require("./components/CaptchaWidget.cjs");
+exports.ProcaptchaWidget = ProcaptchaWidget;
+exports.Procaptcha = Procaptcha;
+exports.CaptchaWidget = CaptchaWidget.CaptchaWidget;

package/dist/cjs/util/index.cjs

@@ -0,0 +1,18 @@
+"use strict";
+function renameKeysForDataAttr(data = {}) {
+  return Object.keys(data).reduce(
+    // biome-ignore lint/performance/noAccumulatingSpread: TODO fix
+    (prev, curr) => ({ ...prev, [`data-${curr}`]: data[curr] }),
+    {}
+  );
+}
+function addDataAttr({
+  general,
+  dev
+}) {
+  return {
+    ...renameKeysForDataAttr(general),
+    ...process.env.NODE_ENV !== "production" ? renameKeysForDataAttr(dev) : {}
+  };
+}
+module.exports = addDataAttr;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,KAAK,oBAAoB,EAIzB,MAAM,OAAO,CAAC;AAGf,UAAU,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACpE,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,UAAU,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACb;AAgCD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+CjC,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,KAAK,oBAAoB,EAIzB,MAAM,OAAO,CAAC;AAGf,UAAU,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACpE,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;IAC7B,UAAU,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACb;AA4BD,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmDjC,CAAC;AACF,eAAe,MAAM,CAAC"}

package/dist/components/Button.js

@@ -9,7 +9,6 @@ const buttonStyleBase = {
     position: "relative",
     boxSizing: "border-box",
     outline: "0px",
-    border: "0px",
     margin: "0px",
     cursor: "pointer",
     userSelect: "none",
@@ -25,9 +24,7 @@ const buttonStyleBase = {
     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]);
@@ -35,6 +32,10 @@ const Button = ({ themeColor, buttonType, text, onClick, }) => {
     const buttonStyle = useMemo(() => {
         const baseStyle = {
             ...buttonStyleBase,
+            border: `1px solid ${theme.palette.grey[500]}`,
+            boxShadow: `0px 1px 3px 0px ${theme.palette.grey[500]}`,
+            fontFamily: theme.font.fontFamily,
+            width: "100%",
             color: hover
                 ? theme.palette.primary.contrastText
                 : theme.palette.background.contrastText,

package/dist/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAGN,OAAO,EACP,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAS3C,MAAM,eAAe,GAAkB;IACtC,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,EACT,+MAA+M;IAChN,KAAK,EAAE,cAAc;IACrB,eAAe,EAAE,SAAS;IAC1B,SAAS,EACR,+GAA+G;CAChH,CAAC;AAEF,MAAM,MAAM,GAA0B,CAAC,EACtC,UAAU,EACV,UAAU,EACV,IAAI,EACJ,OAAO,GACM,EAAE,EAAE;IACjB,MAAM,KAAK,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,EACvD,CAAC,UAAU,CAAC,CACZ,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,MAAM,SAAS,GAAG;YACjB,GAAG,eAAe;YAClB,KAAK,EAAE,KAAK;gBACX,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY;gBACpC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY;SACxC,CAAC;QACF,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;YAC7B,OAAO;gBACN,GAAG,SAAS;gBACZ,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa;aAChE,CAAC;QACH,CAAC;QACD,OAAO;YACN,GAAG,SAAS;YACZ,eAAe,EAAE,KAAK;gBACrB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;gBAC5B,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;SACnC,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAE/B,OAAO,CACN,oBACK,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;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO,EAAE,CAAC;QACX,CAAC,gBACW,IAAI,YAEf,IAAI,GACG,CACT,CAAC;AACH,CAAC,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CaptchaComponent.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAQ1D,MAAM,WAAW,qBAAqB;IACrC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,gBAAgB,gGAUnB,qBAAqB,qDA0KvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CaptchaComponent.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaComponent.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAQ1D,MAAM,WAAW,qBAAqB;IACrC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,gBAAgB,gGAUnB,qBAAqB,qDAsLvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/CaptchaComponent.js

@@ -12,12 +12,12 @@ 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]);
+    const doubleSpacing = `${theme.spacing.unit * 2}px`;
     const fullSpacing = `${theme.spacing.unit}px`;
     const halfSpacing = `${theme.spacing.half}px`;
     return (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx("div", { style: {
                 overflowX: "auto",
                 overflowY: "auto",
-                width: "100%",
                 maxWidth: "500px",
                 maxHeight: "100%",
                 display: "flex",
@@ -34,6 +34,9 @@ const CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onC
                     display: "flex",
                     flexDirection: "column",
                     minWidth: "300px",
+                    marginLeft: fullSpacing,
+                    marginRight: fullSpacing,
+                    justifyContent: "center",
                 }, children: [_jsx("div", { style: {
                             display: "flex",
                             alignItems: "center",
@@ -42,37 +45,45 @@ const CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onC
                                 backgroundColor: theme.palette.primary.main,
                                 width: "100%",
                                 marginTop: fullSpacing,
-                                marginLeft: fullSpacing,
-                                marginRight: fullSpacing,
                             }, children: _jsxs("div", { style: {
-                                    paddingLeft: `${theme.spacing.half}px`,
-                                    paddingRight: `${theme.spacing.half}px`,
+                                    padding: `${theme.spacing.half}px`,
+                                    fontFamily: theme.font.fontFamily,
                                 }, children: [_jsxs("p", { style: {
                                             color: "#ffffff",
                                             fontWeight: 700,
                                             lineHeight: 1.5,
-                                        }, children: [t("WIDGET.SELECT_ALL"), ":", "\u00A0", _jsx("span", { children: `${t(at(challenge.captchas, index).target)} ` })] }), _jsx("p", { style: {
+                                        }, children: [t("WIDGET.SELECT_ALL"), ":", "\u00A0", _jsx("span", { children: `${at(challenge.captchas, index).target} ` })] }), _jsx("p", { style: {
                                             color: "#ffffff",
                                             fontWeight: 500,
                                             lineHeight: 0.8,
                                             fontSize: "0.8rem",
-                                        }, children: t("WIDGET.IF_NONE_CLICK_NEXT") })] }) }) }), _jsx("div", { ...addDataAttr({ dev: { cy: `captcha-${index}` } }), style: {
-                            paddingRight: halfSpacing,
-                            paddingLeft: halfSpacing,
-                        }, children: captcha && (_jsx(CaptchaWidget, { challenge: captcha, solution: solution, onClick: onClick, themeColor: themeColor })) }), _jsx("div", { style: {
+                                        }, children: t("WIDGET.IF_NONE_CLICK_NEXT") })] }) }) }), _jsx("div", { ...addDataAttr({ dev: { cy: `captcha-${index}` } }), style: { overflow: "hidden" }, children: captcha && (_jsx(CaptchaWidget, { challenge: captcha, solution: solution, onClick: onClick, themeColor: themeColor })) }), _jsx("div", { style: {
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "space-between",
                             lineHeight: 1.75,
-                            padding: fullSpacing,
-                            paddingBottom: halfSpacing,
-                            paddingTop: halfSpacing,
+                            padding: `${fullSpacing} 0 ${doubleSpacing} 0`,
                         }, children: _jsxs("div", { style: {
-                                display: "grid",
-                                gridAutoFlow: "column",
-                                gridTemplateColumns: "repeat(3, minmax(0, 1fr)",
                                 width: "100%",
-                            }, children: [_jsx("div", { style: { justifySelf: "left" }, children: _jsx(Button, { themeColor: themeColor, buttonType: "cancel", onClick: onCancel, text: t("WIDGET.CANCEL"), "aria-label": t("WIDGET.CANCEL") }) }), _jsx("div", { style: { justifySelf: "center" }, children: _jsx(ReloadButton, { themeColor: themeColor, onReload: onReload }) }), _jsx("div", { style: { justifySelf: "right" }, children: _jsx(Button, { themeColor: themeColor, buttonType: "next", text: index < challenge.captchas.length - 1
+                                height: "100%",
+                                display: "flex",
+                                flexDirection: "row",
+                                flexWrap: "wrap",
+                                justifyContent: "space-between",
+                                gap: "10px",
+                            }, children: [_jsx("div", { style: {
+                                        position: "relative",
+                                        flexGrow: 1,
+                                        flexBasis: "calc(33.333% - 10px)",
+                                    }, children: _jsx(Button, { themeColor: themeColor, buttonType: "cancel", onClick: onCancel, text: t("WIDGET.CANCEL"), "aria-label": t("WIDGET.CANCEL") }) }), _jsx("div", { style: {
+                                        position: "relative",
+                                        flexGrow: 1,
+                                        flexBasis: "calc(33.333% - 10px)",
+                                    }, children: _jsx(ReloadButton, { themeColor: themeColor, onReload: onReload }) }), _jsx("div", { style: {
+                                        position: "relative",
+                                        flexGrow: 1,
+                                        flexBasis: "calc(33.333% - 10px)",
+                                    }, children: _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, "aria-label": index < challenge.captchas.length - 1
                                             ? t("WIDGET.NEXT")

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/CaptchaWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaptchaWidget.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaWidget.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAK9C,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;CAC7B;AAYD,eAAO,MAAM,aAAa,kDAKvB,kBAAkB,qDAgHpB,CAAC"}
+{"version":3,"file":"CaptchaWidget.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaWidget.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAK9C,MAAM,WAAW,kBAAkB;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,UAAU,EAAE,OAAO,GAAG,MAAM,CAAC;CAC7B;AAYD,eAAO,MAAM,aAAa,kDAKvB,kBAAkB,qDA+GpB,CAAC"}

package/dist/components/CaptchaWidget.js

@@ -22,34 +22,33 @@ export const CaptchaWidget = ({ challenge, solution, onClick, themeColor, }) =>
             flexDirection: "row",
             flexWrap: "wrap",
             justifyContent: "space-between",
-            paddingBottom: halfSpacing,
-            paddingRight: halfSpacing,
+            paddingBottom: fullSpacing,
+            paddingTop: fullSpacing,
+            gap: "10px",
         }, children: items.map((item, index) => {
             const hash = getHash(item);
             const imageStyle = {
                 flexGrow: 1,
-                flexBasis: "33.3333%",
+                flexBasis: "calc(33.333% - 10px)",
                 boxSizing: "border-box",
-                paddingLeft: halfSpacing,
-                paddingTop: halfSpacing,
             };
             return (_jsx("div", { style: imageStyle, children: _jsxs("div", { style: {
                         position: "relative",
                         cursor: "pointer",
                         height: "100%",
                         width: "100%",
-                        border: 1,
                         padding: 0,
                         margin: 0,
-                        borderStyle: "solid",
-                        borderColor: theme.palette.grey[300],
                     }, onClick: () => onClick(hash), children: [_jsx("img", { style: {
                                 width: "100%",
-                                backgroundColor: theme.palette.grey[300],
                                 display: "block",
-                                objectFit: "contain",
+                                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}` }), _jsx("div", { style: {
                                 position: "absolute",
                                 top: 0,

package/dist/components/CaptchaWidget.js.map

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

package/dist/components/Modal.d.ts

@@ -3,6 +3,6 @@ type ModalProps = {
     show: boolean;
     children: React.ReactNode;
 };
-declare const ModalComponent: React.MemoExoticComponent<(props: ModalProps, nextProps: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+declare const ModalComponent: React.MemoExoticComponent<(props: ModalProps) => React.ReactPortal>;
 export default ModalComponent;
 //# sourceMappingURL=Modal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,KAAK,UAAU,GAAG;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,cAAc,oCACX,UAAU,aAAa,UAAU,sDA2CzC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAeA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,KAAK,UAAU,GAAG;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAuBF,QAAA,MAAM,cAAc,oCAAsB,UAAU,uBAqBlD,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/dist/components/Modal.js

@@ -1,37 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
 import React from "react";
-const ModalComponent = React.memo((props, nextProps) => {
+import { createPortal } from "react-dom";
+const ModalInnerDivCSS = css `
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	max-width: 500px;
+	background-color: transparent;
+	border: none;
+	border-radius: 4px;
+	z-index: 2147483647;
+	align-self: center;
+	box-shadow: 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;
+	box-sizing: border-box; /* Ensures border is part of width */
+	/* iOS only */
+    @supports (-webkit-touch-callout: none) { 
+		transform: translate(-50%, -100%);
+    }
+`;
+const ModalComponent = React.memo((props) => {
     const { show, children } = props;
-    const display = show ? "block" : "none";
+    const display = show ? "flex" : "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: "inherit",
-        backgroundColor: "transparent",
-        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,",
+        minHeight: "100vh",
     };
-    return (_jsxs("div", { className: "prosopo-modalOuter", style: ModalOuterDivCss, children: [_jsx("div", { className: "prosopo-modalBackground", style: ModalBackgroundCSS }), _jsx("div", { className: "prosopo-modalInner", style: ModalInnerDivCSS, children: children })] }));
+    return createPortal(_jsx("div", { className: "prosopo-modalOuter", style: ModalOuterDivCss, children: _jsx("div", { className: "prosopo-modalInner", css: ModalInnerDivCSS, children: children }) }), document.body);
 });
 export default ModalComponent;
 //# sourceMappingURL=Modal.js.map

package/dist/components/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":";AAaA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAMlD,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAChC,CAAC,KAAiB,EAAE,SAAqB,EAAE,EAAE;IAC5C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;IACxC,MAAM,gBAAgB,GAAkB;QACvC,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,UAAU;QAClB,KAAK,EAAE,CAAC;QACR,OAAO;KACP,CAAC;IAEF,MAAM,kBAAkB,GAAkB;QACzC,QAAQ,EAAE,OAAO;QACjB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,eAAe,EAAE,oBAAoB;QACrC,MAAM,EAAE,CAAC,CAAC;KACV,CAAC;IACF,MAAM,gBAAgB,GAAkB;QACvC,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,uBAAuB;QAClC,KAAK,EAAE,SAAS;QAChB,eAAe,EAAE,aAAa;QAC9B,MAAM,EAAE,MAAM;QACd,SAAS,EACR,qHAAqH;KACtH,CAAC;IAEF,OAAO,CACN,eAAK,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,gBAAgB,aAC1D,cAAK,SAAS,EAAC,yBAAyB,EAAC,KAAK,EAAE,kBAAkB,GAAI,EACtE,cAAK,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,gBAAgB,YACzD,QAAQ,GACJ,IACD,CACN,CAAC;AACH,CAAC,CACD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAMzC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC;AAEF,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAAiB,EAAE,EAAE;IACvD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IACvC,MAAM,gBAAgB,GAAkB;QACvC,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,UAAU;QAClB,KAAK,EAAE,CAAC;QACR,OAAO;QACP,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,SAAS,EAAE,OAAO;KAClB,CAAC;IAEF,OAAO,YAAY,CAClB,cAAK,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,gBAAgB,YAC1D,cAAK,SAAS,EAAC,oBAAoB,EAAC,GAAG,EAAE,gBAAgB,YACvD,QAAQ,GACJ,GACD,EACN,QAAQ,CAAC,IAAI,CACb,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/dist/components/Procaptcha.d.ts

@@ -1,7 +1,13 @@
-import type { ProcaptchaCallbacks } from "@prosopo/types";
+import type { Ti18n } from "@prosopo/locale";
+import type { FrictionlessState, ProcaptchaCallbacks, ProcaptchaClientConfigInput } from "@prosopo/types";
 import { type LazyExoticComponent } from "react";
 import type { ReactElement } from "react";
-declare const ProcaptchaWidget: LazyExoticComponent<(props: any, callbacks: ProcaptchaCallbacks) => ReactElement>;
+declare const ProcaptchaWidget: LazyExoticComponent<(props: {
+    config: ProcaptchaClientConfigInput;
+    callbacks: ProcaptchaCallbacks;
+    frictionlessState?: FrictionlessState;
+    i18n: Ti18n;
+}) => ReactElement>;
 type ProcaptchaProps = React.ComponentProps<typeof ProcaptchaWidget>;
 declare const Procaptcha: (props: ProcaptchaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Procaptcha;

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

@@ -1 +1 @@
-{"version":3,"file":"Procaptcha.d.ts","sourceRoot":"","sources":["../../src/components/Procaptcha.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,KAAK,mBAAmB,EAAkB,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,QAAA,MAAM,gBAAgB,EAAE,mBAAmB,CAE1C,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,mBAAmB,KAAK,YAAY,CACR,CAAC;AACtD,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAErE,QAAA,MAAM,UAAU,UAAW,eAAe,qDAQzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Procaptcha.d.ts","sourceRoot":"","sources":["../../src/components/Procaptcha.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,KAAK,EACX,iBAAiB,EACjB,mBAAmB,EACnB,2BAA2B,EAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,KAAK,mBAAmB,EAAkB,MAAM,OAAO,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,QAAA,MAAM,gBAAgB,EAAE,mBAAmB,CAC1C,CAAC,KAAK,EAAE;IACP,MAAM,EAAE,2BAA2B,CAAC;IACpC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,IAAI,EAAE,KAAK,CAAC;CACZ,KAAK,YAAY,CACkC,CAAC;AACtD,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAErE,QAAA,MAAM,UAAU,UAAW,eAAe,qDAIzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Procaptcha.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Suspense, lazy } from "react";
 const ProcaptchaWidget = lazy(async () => import("./ProcaptchaWidget.js"));
-const Procaptcha = (props) => (_jsx(Suspense, { children: _jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks, frictionlessState: props.frictionlessState }) }));
+const Procaptcha = (props) => (_jsx(Suspense, { children: _jsx(ProcaptchaWidget, { ...props }) }));
 export default Procaptcha;
 //# sourceMappingURL=Procaptcha.js.map

package/dist/components/Procaptcha.js.map

@@ -1 +1 @@
-{"version":3,"file":"Procaptcha.js","sourceRoot":"","sources":["../../src/components/Procaptcha.tsx"],"names":[],"mappings":";AAeA,OAAO,EAA4B,QAAQ,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAIjE,MAAM,gBAAgB,GAGlB,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,CAAC;AAGtD,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,CAC9C,KAAC,QAAQ,cACR,KAAC,gBAAgB,IAChB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,GACzC,GACQ,CACX,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Procaptcha.js","sourceRoot":"","sources":["../../src/components/Procaptcha.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAA4B,QAAQ,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAIjE,MAAM,gBAAgB,GAOlB,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,CAAC;AAGtD,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,CAC9C,KAAC,QAAQ,cACR,KAAC,gBAAgB,OAAK,KAAK,GAAI,GACrB,CACX,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prosopo/procaptcha-react",
-	"version": "2.5.3",
+	"version": "2.6.1",
 	"author": "PROSOPO LIMITED <info@prosopo.io>",
 	"license": "Apache-2.0",
 	"main": "./dist/index.js",
@@ -24,15 +24,17 @@
 		"build": "tsc --build --verbose",
 		"build:cjs": "npx vite --config vite.cjs.config.ts build"
 	},
-	"browserslist": ["> 0.5%, last 2 versions, not dead"],
+	"browserslist": [
+		"> 0.5%, last 2 versions, not dead"
+	],
 	"dependencies": {
-		"@prosopo/common": "2.5.3",
-		"@prosopo/locale": "2.5.3",
-		"@prosopo/procaptcha": "2.5.3",
-		"@prosopo/procaptcha-common": "2.5.3",
-		"@prosopo/types": "2.5.3",
-		"@prosopo/util": "2.5.3",
-		"@prosopo/widget-skeleton": "2.5.3",
+		"@prosopo/common": "2.6.0",
+		"@prosopo/locale": "2.6.0",
+		"@prosopo/procaptcha": "2.6.1",
+		"@prosopo/procaptcha-common": "2.6.1",
+		"@prosopo/types": "2.6.1",
+		"@prosopo/util": "2.6.0",
+		"@prosopo/widget-skeleton": "2.6.0",
 		"csstype": "3.1.3",
 		"express": "4.21.2",
 		"react": "18.3.1"
@@ -50,20 +52,21 @@
 		}
 	},
 	"devDependencies": {
-		"@prosopo/config": "2.5.3",
-		"@vitest/coverage-v8": "2.1.1",
+		"@prosopo/config": "2.6.0",
+		"@vitest/coverage-v8": "3.0.9",
 		"concurrently": "9.0.1",
 		"del-cli": "6.0.0",
 		"npm-run-all": "2.1.0",
 		"tslib": "2.7.0",
 		"tsx": "4.19.1",
 		"typescript": "5.6.2",
-		"vite": "5.4.6",
-		"vitest": "2.1.1"
+		"vite": "6.2.3",
+		"vitest": "3.0.9"
 	},
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/prosopo/captcha.git"
+		"url": "git+https://github.com/prosopo/captcha.git",
+		"directory": "packages/procaptcha-react"
 	},
 	"bugs": {
 		"url": "https://github.com/prosopo/captcha/issues"