@prosopo/procaptcha-react 0.2.29 → 0.2.32

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@prosopo/procaptcha-react",
-    "version": "0.2.29",
+    "version": "0.2.32",
     "author": "PROSOPO LIMITED <info@prosopo.io>",
     "license": "Apache-2.0",
     "main": "./dist/index.js",
@@ -35,17 +35,15 @@
     "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
-        "@mui/icons-material": "^5.14.3",
-        "@mui/material": "^5.14.5",
         "@polkadot/extension-dapp": "0.46.6",
         "@polkadot/extension-inject": "0.46.6",
-        "@polkadot/types": "10.11.1",
-        "@prosopo/common": "0.2.29",
-        "@prosopo/procaptcha": "0.2.29",
-        "i18next": "^21.9.2",
+        "@prosopo/api": "0.2.32",
+        "@prosopo/common": "0.2.32",
+        "@prosopo/procaptcha": "0.2.32",
+        "@prosopo/types": "0.2.32",
+        "@prosopo/util": "0.2.32",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "zod": "^3.22.3"
+        "react-dom": "^18.2.0"
     },
     "devDependencies": {
         "tslib": "2.6.2",

package/dist/cjs/components/Button.cjs

@@ -1,68 +0,0 @@
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const theme = require("./theme.cjs");
-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$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
-  const [hover, setHover] = React.useState(false);
-  const buttonStyle = React.useMemo(() => {
-    const baseStyle = {
-      ...buttonStyleBase,
-      color: hover ? theme$1.palette.primary.contrastText : theme$1.palette.background.contrastText
-    };
-    if (buttonType === "cancel") {
-      return {
-        ...baseStyle,
-        backgroundColor: hover ? theme$1.palette.grey[600] : "transparent"
-      };
-    } else {
-      return {
-        ...baseStyle,
-        backgroundColor: hover ? theme$1.palette.primary.main : theme$1.palette.background.default
-      };
-    }
-  }, [buttonType, hover, theme$1]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      ...index({ dev: { cy: `button-${buttonType}` } }),
-      onMouseEnter: () => setHover(true),
-      onMouseLeave: () => setHover(false),
-      style: buttonStyle,
-      onClick: (e) => {
-        e.preventDefault();
-        onClick();
-      },
-      children: text
-    }
-  );
-};
-module.exports = Button;

package/dist/cjs/components/Checkbox.cjs

@@ -1,56 +0,0 @@
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("@emotion/react");
-const theme = require("./theme.cjs");
-const React = require("react");
-const checkboxBefore = react.css`{
-  &:before {
-    content: '""';
-    position: absolute;
-    height: 100%;
-    width: 100%;
-  }
-}`;
-const baseStyle = {
-  width: "2.2em",
-  height: "2.2em",
-  top: "auto",
-  left: "auto",
-  opacity: "1",
-  borderRadius: "12.5%",
-  appearance: "none",
-  cursor: "pointer",
-  margin: "0",
-  borderStyle: "solid",
-  borderWidth: "1px"
-};
-const Checkbox = ({ themeColor, onChange, checked }) => {
-  const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
-  const checkboxStyleBase = {
-    ...baseStyle,
-    border: `1px solid ${theme$1.palette.background.contrastText}`
-  };
-  const [hover, setHover] = React.useState(false);
-  const checkboxStyle = React.useMemo(() => {
-    return {
-      ...checkboxStyleBase,
-      borderColor: hover ? theme$1.palette.background.contrastText : theme$1.palette.grey[400],
-      appearance: checked ? "auto" : "none"
-    };
-  }, [hover, theme$1, checked]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      onMouseEnter: () => setHover(true),
-      onMouseLeave: () => setHover(false),
-      css: checkboxBefore,
-      type: "checkbox",
-      "aria-live": "assertive",
-      "aria-haspopup": "true",
-      onChange,
-      checked,
-      style: checkboxStyle
-    }
-  );
-};
-module.exports = Checkbox;

package/dist/cjs/components/LoadingSpinner.cjs

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const theme = require("./theme.cjs");
-const React = require("react");
-const styled = require("@emotion/styled");
-const LoadingSpinner = ({ themeColor }) => {
-  const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
-  const StyledDiv = styled.div`
-        width: 2em;
-        height: 2em;
-        border: 4px solid ${theme$1.palette.background.contrastText};
-        border-bottom-color: transparent;
-        border-radius: 50%;
-        display: inherit;
-        box-sizing: border-box;
-        animation: rotation 1s linear infinite;
-        @keyframes rotation {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-    `;
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledDiv, {});
-};
-exports.LoadingSpinner = LoadingSpinner;
-exports.default = LoadingSpinner;

package/dist/cjs/components/Modal.cjs

@@ -1,35 +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;
-  console.log("rendering modal with show: ", show);
-  const display = show ? "flex" : "none";
-  const ModalOuterDivCss = {
-    overflow: "auto",
-    width: "100%",
-    maxHeight: "100%",
-    position: "fixed",
-    top: "0",
-    left: "0",
-    height: "100%",
-    background: "rgba(0, 0, 0, 0.6)",
-    zIndex: "2147483646",
-    transition: "all 0.5s",
-    display
-  };
-  const ModalInnerDivCSS = {
-    maxWidth: "500px",
-    margin: "auto",
-    position: "fixed",
-    background: "white",
-    height: "auto",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    zIndex: "2147483647",
-    transition: "all 0.5s"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: ModalOuterDivCss, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: ModalInnerDivCSS, children }) });
-});
-module.exports = ModalComponent;

package/dist/cjs/components/collector.cjs

@@ -1,25 +0,0 @@
-"use strict";
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
-const procaptcha = require("@prosopo/procaptcha");
-const Collector = ({ onProcessData, sendData }) => {
-  const [mouseEvents, setStoredMouseEvents] = React.useState([]);
-  const [touchEvents, setStoredTouchEvents] = React.useState([]);
-  const [keyboardEvents, setStoredKeyboardEvents] = React.useState([]);
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (ref && ref.current) {
-      procaptcha.startCollector(setStoredMouseEvents, setStoredTouchEvents, setStoredKeyboardEvents, ref.current);
-    }
-  }, []);
-  React.useEffect(() => {
-    const userEvents = {
-      mouseEvents,
-      touchEvents,
-      keyboardEvents
-    };
-    onProcessData(userEvents);
-  }, [sendData]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref });
-};
-module.exports = Collector;