@prosopo/procaptcha-react 2.1.1 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prosopo/procaptcha-react",
-	"version": "2.1.1",
+	"version": "2.1.2",
 	"author": "PROSOPO LIMITED <info@prosopo.io>",
 	"license": "Apache-2.0",
 	"main": "./dist/index.js",
@@ -26,13 +26,13 @@
 	},
 	"browserslist": ["> 0.5%, last 2 versions, not dead"],
 	"dependencies": {
-		"@prosopo/common": "2.1.1",
-		"@prosopo/locale-browser": "2.1.1",
-		"@prosopo/procaptcha": "2.1.1",
-		"@prosopo/procaptcha-common": "2.1.1",
-		"@prosopo/types": "2.1.1",
-		"@prosopo/util": "2.1.1",
-		"@prosopo/web-components": "2.1.1",
+		"@prosopo/common": "2.1.2",
+		"@prosopo/locale-browser": "2.1.2",
+		"@prosopo/procaptcha": "2.1.2",
+		"@prosopo/procaptcha-common": "2.1.2",
+		"@prosopo/types": "2.1.2",
+		"@prosopo/util": "2.1.2",
+		"@prosopo/web-components": "2.1.2",
 		"csstype": "3.1.3",
 		"react": "18.3.1"
 	},
@@ -49,7 +49,7 @@
 		}
 	},
 	"devDependencies": {
-		"@prosopo/config": "2.1.1",
+		"@prosopo/config": "2.1.2",
 		"@vitest/coverage-v8": "2.1.1",
 		"concurrently": "9.0.1",
 		"npm-run-all": "4.1.5",

package/dist/cjs/components/Button.cjs

@@ -1,76 +0,0 @@
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const webComponents = require("@prosopo/web-components");
-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",
-  border: "0px",
-  margin: "0px",
-  cursor: "pointer",
-  userSelect: "none",
-  verticalAlign: "middle",
-  appearance: void 0,
-  textDecoration: "none",
-  fontWeight: "500",
-  fontSize: "0.875rem",
-  lineHeight: "1.75",
-  letterSpacing: "0.02857em",
-  textTransform: "uppercase",
-  minWidth: "64px",
-  padding: "6px 16px",
-  borderRadius: "4px",
-  transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-  color: "rgb(0, 0, 0)",
-  backgroundColor: "#ffffff",
-  boxShadow: "rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px"
-};
-const Button = ({
-  themeColor,
-  buttonType,
-  text,
-  onClick
-}) => {
-  const theme = React.useMemo(
-    () => themeColor === "light" ? webComponents.lightTheme : webComponents.darkTheme,
-    [themeColor]
-  );
-  const [hover, setHover] = React.useState(false);
-  const buttonStyle = React.useMemo(() => {
-    const baseStyle = {
-      ...buttonStyleBase,
-      color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText
-    };
-    if (buttonType === "cancel") {
-      return {
-        ...baseStyle,
-        backgroundColor: hover ? theme.palette.grey[600] : "transparent"
-      };
-    }
-    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

@@ -1,185 +0,0 @@
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const localeBrowser = require("@prosopo/locale-browser");
-const util = require("@prosopo/util");
-const webComponents = require("@prosopo/web-components");
-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,
-  themeColor
-}) => {
-  const { t } = localeBrowser.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" ? webComponents.lightTheme : webComponents.darkTheme,
-    [themeColor]
-  );
-  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",
-        width: "100%",
-        maxWidth: "500px",
-        maxHeight: "100%",
-        display: "flex",
-        flexDirection: "column",
-        border: "1px solid #dddddd",
-        boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px",
-        borderRadius: "4px",
-        padding: `${theme.spacing.unit}px`,
-        backgroundColor: theme.palette.background.default
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          style: {
-            backgroundColor: theme.palette.background.default,
-            display: "flex",
-            flexDirection: "column",
-            minWidth: "300px"
-          },
-          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%"
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        style: {
-                          paddingLeft: `${theme.spacing.half}px`,
-                          paddingRight: `${theme.spacing.half}px`
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs(
-                            "p",
-                            {
-                              style: {
-                                color: "#ffffff",
-                                fontWeight: 700,
-                                lineHeight: 1.5
-                              },
-                              children: [
-                                t("WIDGET.SELECT_ALL"),
-                                ":",
-                                " ",
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${t(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}` } }), children: captcha && /* @__PURE__ */ jsxRuntime.jsx(
-              CaptchaWidget.CaptchaWidget,
-              {
-                challenge: captcha,
-                solution,
-                onClick,
-                themeColor
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  width: "100%"
-                },
-                ...index({ dev: { cy: "dots-captcha" } })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  padding: `0 ${theme.spacing}px`,
-                  display: "flex",
-                  width: "100%"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                style: {
-                  padding: `0 ${theme.spacing}px`,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  lineHeight: 1.75
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Button,
-                    {
-                      themeColor,
-                      buttonType: "cancel",
-                      onClick: onCancel,
-                      text: t("WIDGET.CANCEL"),
-                      "aria-label": t("WIDGET.CANCEL")
-                    }
-                  ),
-                  /* @__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

@@ -1,186 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const common = require("@prosopo/common");
-const webComponents = require("@prosopo/web-components");
-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" ? webComponents.lightTheme : webComponents.darkTheme,
-    [themeColor]
-  );
-  const isTouchDevice = "ontouchstart" in window;
-  const fullSpacing = `${theme.spacing.unit}px`;
-  const halfSpacing = `${theme.spacing.half}px`;
-  const paddingForImageColumns = {
-    0: {
-      paddingLeft: 0,
-      paddingRight: halfSpacing,
-      paddingTop: halfSpacing,
-      paddingBottom: halfSpacing
-    },
-    1: {
-      paddingLeft: halfSpacing,
-      paddingRight: halfSpacing,
-      paddingTop: halfSpacing,
-      paddingBottom: halfSpacing
-    },
-    2: {
-      paddingLeft: halfSpacing,
-      paddingRight: 0,
-      paddingTop: halfSpacing,
-      paddingBottom: halfSpacing
-    }
-  };
-  const paddingForImageRows = {
-    0: { paddingTop: fullSpacing },
-    2: { paddingBottom: fullSpacing }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        paddingRight: 0.5,
-        paddingBottom: 0.5,
-        // 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"
-      },
-      children: items.map((item, index) => {
-        const hash = getHash(item);
-        const imageStyle = {
-          ...paddingForImageColumns[index % 3],
-          ...paddingForImageRows[Math.floor(index / 3)],
-          // 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: "33.3333%",
-          // include the padding / margin / border in the width
-          boxSizing: "border-box"
-        };
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { style: imageStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              cursor: "pointer",
-              height: "100%",
-              width: "100%",
-              border: 1,
-              borderStyle: "solid",
-              borderColor: theme.palette.grey[300]
-            },
-            onClick: isTouchDevice ? void 0 : () => onClick(hash),
-            onTouchStart: isTouchDevice ? () => onClick(hash) : void 0,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
-                {
-                  style: {
-                    width: "100%",
-                    // image should be full width / height of the item
-                    backgroundColor: theme.palette.grey[300],
-                    // colour of the bands when letterboxing and image
-                    opacity: solution.includes(hash) && isTouchDevice ? "50%" : "100%",
-                    // iphone workaround
-                    display: "block",
-                    // removes whitespace below imgs
-                    objectFit: "contain",
-                    // 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
-                  },
-                  src: item.data,
-                  alt: `Captcha image ${index + 1}`
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  style: {
-                    // relative to where the element _should_ be positioned
-                    position: "relative",
-                    // make the overlay the full height/width of an item
-                    width: "100%",
-                    height: "100%",
-                    // shift it up 100% to overlay the item element
-                    top: "-100%",
-                    visibility: solution.includes(hash) ? "visible" : "hidden",
-                    // transition on opacity upon (de)selection
-                    transition: "opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-                    opacity: 1
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      style: {
-                        // make the overlay absolute positioned compare to its container
-                        position: "absolute",
-                        // spread across 100% width/height of the item box
-                        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)"
-                      },
-                      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

@@ -1,42 +0,0 @@
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
-const ModalComponent = React.memo(
-  (props, nextProps) => {
-    const { show, children } = props;
-    const display = show ? "block" : "none";
-    const ModalOuterDivCss = {
-      position: "fixed",
-      zIndex: 2147483646,
-      inset: 0,
-      display
-    };
-    const ModalBackgroundCSS = {
-      position: "fixed",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      right: 0,
-      bottom: 0,
-      top: 0,
-      left: 0,
-      backgroundColor: "rgba(0, 0, 0, 0.5)",
-      zIndex: -1
-    };
-    const ModalInnerDivCSS = {
-      position: "absolute",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      width: "400px",
-      backgroundColor: "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,"
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "prosopo-modalOuter", style: ModalOuterDivCss, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prosopo-modalBackground", style: ModalBackgroundCSS }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prosopo-modalInner", style: ModalInnerDivCSS, children })
-    ] });
-  }
-);
-module.exports = ModalComponent;

package/dist/cjs/components/Procaptcha.cjs

@@ -1,20 +0,0 @@
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const webComponents = require("@prosopo/web-components");
-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,
-  {
-    fallback: /* @__PURE__ */ jsxRuntime.jsx(
-      webComponents.ProcaptchaPlaceholder,
-      {
-        config: props.config,
-        callbacks: props.callbacks
-      }
-    ),
-    children: /* @__PURE__ */ jsxRuntime.jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks })
-  }
-);
-module.exports = Procaptcha;