@prosopo/procaptcha-react 2.5.5 → 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prosopo/procaptcha-react",
-	"version": "2.5.5",
+	"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.5",
-		"@prosopo/locale": "2.5.5",
-		"@prosopo/procaptcha": "2.5.5",
-		"@prosopo/procaptcha-common": "2.5.5",
-		"@prosopo/types": "2.5.5",
-		"@prosopo/util": "2.5.5",
-		"@prosopo/widget-skeleton": "2.5.5",
+		"@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,7 +52,7 @@
 		}
 	},
 	"devDependencies": {
-		"@prosopo/config": "2.5.5",
+		"@prosopo/config": "2.6.0",
 		"@vitest/coverage-v8": "3.0.9",
 		"concurrently": "9.0.1",
 		"del-cli": "6.0.0",
@@ -63,7 +65,8 @@
 	},
 	"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"