@prosopo/procaptcha-react 0.3.38 → 0.3.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/cjs/components/Button.cjs +6 -7
  2. package/dist/cjs/components/CaptchaComponent.cjs +4 -5
  3. package/dist/cjs/components/CaptchaWidget.cjs +4 -5
  4. package/dist/cjs/components/Procaptcha.cjs +2 -3
  5. package/dist/cjs/components/ProcaptchaWidget.cjs +13 -19
  6. package/package.json +22 -15
  7. package/dist/cjs/web-components/dist/CaptchaPlaceholder.cjs +0 -37
  8. package/dist/cjs/web-components/dist/Checkbox.cjs +0 -59
  9. package/dist/cjs/web-components/dist/Containers.cjs +0 -42
  10. package/dist/cjs/web-components/dist/LoadingSpinner.cjs +0 -34
  11. package/dist/cjs/web-components/dist/Logo.cjs +0 -16
  12. package/dist/cjs/web-components/dist/LogoWithText.cjs +0 -10
  13. package/dist/cjs/web-components/dist/LogoWithoutText.cjs +0 -10
  14. package/dist/cjs/web-components/dist/WidgetConstants.cjs +0 -18
  15. package/dist/cjs/web-components/dist/index.cjs +0 -25
  16. package/dist/cjs/web-components/dist/theme.cjs +0 -44
package/dist/cjs/components/Button.cjs CHANGED
@@ -1,9 +1,8 @@
1
1
  "use strict";
2
2
  const jsxRuntime = require("@emotion/react/jsx-runtime");
3
- require("../web-components/dist/index.cjs");
3
+ const webComponents = require("@prosopo/web-components");
4
4
  const React = require("react");
5
5
  const index = require("../util/index.cjs");
6
- const theme = require("../web-components/dist/theme.cjs");
7
6
  const buttonStyleBase = {
8
7
  display: "inline-flex",
9
8
  alignItems: "center",
@@ -32,25 +31,25 @@ const buttonStyleBase = {
32
31
  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"
33
32
  };
34
33
  const Button = ({ themeColor, buttonType, text, onClick }) => {
35
- const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
34
+ const theme = React.useMemo(() => themeColor === "light" ? webComponents.lightTheme : webComponents.darkTheme, [themeColor]);
36
35
  const [hover, setHover] = React.useState(false);
37
36
  const buttonStyle = React.useMemo(() => {
38
37
  const baseStyle = {
39
38
  ...buttonStyleBase,
40
- color: hover ? theme$1.palette.primary.contrastText : theme$1.palette.background.contrastText
39
+ color: hover ? theme.palette.primary.contrastText : theme.palette.background.contrastText
41
40
  };
42
41
  if (buttonType === "cancel") {
43
42
  return {
44
43
  ...baseStyle,
45
- backgroundColor: hover ? theme$1.palette.grey[600] : "transparent"
44
+ backgroundColor: hover ? theme.palette.grey[600] : "transparent"
46
45
  };
47
46
  } else {
48
47
  return {
49
48
  ...baseStyle,
50
- backgroundColor: hover ? theme$1.palette.primary.main : theme$1.palette.background.default
49
+ backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default
51
50
  };
52
51
  }
53
- }, [buttonType, hover, theme$1]);
52
+ }, [buttonType, hover, theme]);
54
53
  return /* @__PURE__ */ jsxRuntime.jsx(
55
54
  "button",
56
55
  {
package/dist/cjs/components/CaptchaComponent.cjs CHANGED
@@ -3,11 +3,10 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
3
3
  const CaptchaWidget = require("./CaptchaWidget.cjs");
4
4
  const React = require("react");
5
5
  const util = require("@prosopo/util");
6
- require("../web-components/dist/index.cjs");
6
+ const webComponents = require("@prosopo/web-components");
7
7
  const common = require("@prosopo/common");
8
8
  const Button = require("./Button.cjs");
9
9
  const index = require("../util/index.cjs");
10
- const theme = require("../web-components/dist/theme.cjs");
11
10
  const CaptchaComponent = ({
12
11
  challenge,
13
12
  index: index$1,
@@ -21,7 +20,7 @@ const CaptchaComponent = ({
21
20
  const { t } = common.useTranslation();
22
21
  const captcha = challenge.captchas ? util.at(challenge.captchas, index$1) : null;
23
22
  const solution = solutions ? util.at(solutions, index$1) : [];
24
- const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
23
+ const theme = React.useMemo(() => themeColor === "light" ? webComponents.lightTheme : webComponents.darkTheme, [themeColor]);
25
24
  return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(
26
25
  "div",
27
26
  {
@@ -39,7 +38,7 @@ const CaptchaComponent = ({
39
38
  "div",
40
39
  {
41
40
  style: {
42
- backgroundColor: theme$1.palette.background.default,
41
+ backgroundColor: theme.palette.background.default,
43
42
  display: "flex",
44
43
  flexDirection: "column",
45
44
  minWidth: "300px"
@@ -52,7 +51,7 @@ const CaptchaComponent = ({
52
51
  display: "flex",
53
52
  alignItems: "center",
54
53
  width: "100%",
55
- backgroundColor: theme$1.palette.primary.main,
54
+ backgroundColor: theme.palette.primary.main,
56
55
  padding: "24px 16px"
57
56
  },
58
57
  children: [
package/dist/cjs/components/CaptchaWidget.cjs CHANGED
@@ -2,9 +2,8 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("@emotion/react/jsx-runtime");
4
4
  const common = require("@prosopo/common");
5
- require("../web-components/dist/index.cjs");
5
+ const webComponents = require("@prosopo/web-components");
6
6
  const React = require("react");
7
- const theme = require("../web-components/dist/theme.cjs");
8
7
  const getHash = (item) => {
9
8
  if (!item.hash) {
10
9
  throw new common.ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", { context: { item } });
@@ -13,7 +12,7 @@ const getHash = (item) => {
13
12
  };
14
13
  const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
15
14
  const items = challenge.captcha.items;
16
- const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
15
+ const theme = React.useMemo(() => themeColor === "light" ? webComponents.lightTheme : webComponents.darkTheme, [themeColor]);
17
16
  const isTouchDevice = "ontouchstart" in window;
18
17
  return /* @__PURE__ */ jsxRuntime.jsx(
19
18
  "div",
@@ -51,13 +50,13 @@ const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
51
50
  onClick: isTouchDevice ? void 0 : () => onClick(hash),
52
51
  onTouchStart: isTouchDevice ? () => onClick(hash) : void 0,
53
52
  children: [
54
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { border: 1, borderColor: theme$1.palette.grey[300] }, children: /* @__PURE__ */ jsxRuntime.jsx(
53
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { border: 1, borderColor: theme.palette.grey[300] }, children: /* @__PURE__ */ jsxRuntime.jsx(
55
54
  "img",
56
55
  {
57
56
  style: {
58
57
  width: "100%",
59
58
  // image should be full width / height of the item
60
- backgroundColor: theme$1.palette.grey[300],
59
+ backgroundColor: theme.palette.grey[300],
61
60
  // colour of the bands when letterboxing and image
62
61
  opacity: solution.includes(hash) && isTouchDevice ? "50%" : "100%",
63
62
  // iphone workaround
package/dist/cjs/components/Procaptcha.cjs CHANGED
@@ -1,11 +1,10 @@
1
1
  "use strict";
2
2
  const jsxRuntime = require("@emotion/react/jsx-runtime");
3
3
  const React = require("react");
4
- require("../web-components/dist/index.cjs");
5
- const CaptchaPlaceholder = require("../web-components/dist/CaptchaPlaceholder.cjs");
4
+ const webComponents = require("@prosopo/web-components");
6
5
  const _interopNamespaceDefaultOnly = (e) => Object.freeze(Object.defineProperty({ __proto__: null, default: e }, Symbol.toStringTag, { value: "Module" }));
7
6
  const ProcaptchaWidget = React.lazy(
8
7
  async () => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("./ProcaptchaWidget.cjs")))
9
8
  );
10
- const Procaptcha = (props) => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(CaptchaPlaceholder.ProcaptchaPlaceholder, { darkMode: props.config.theme }), children: /* @__PURE__ */ jsxRuntime.jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks }) });
9
+ const Procaptcha = (props) => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(webComponents.ProcaptchaPlaceholder, { darkMode: props.config.theme }), children: /* @__PURE__ */ jsxRuntime.jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks }) });
11
10
  module.exports = Procaptcha;
package/dist/cjs/components/ProcaptchaWidget.cjs CHANGED
@@ -1,25 +1,19 @@
1
1
  "use strict";
2
2
  const jsxRuntime = require("@emotion/react/jsx-runtime");
3
- require("../web-components/dist/index.cjs");
3
+ const webComponents = require("@prosopo/web-components");
4
4
  const procaptcha = require("@prosopo/procaptcha");
5
5
  const procaptchaCommon = require("@prosopo/procaptcha-common");
6
6
  const React = require("react");
7
7
  const CaptchaComponent = require("./CaptchaComponent.cjs");
8
8
  const collector = require("./collector.cjs");
9
9
  const Modal = require("./Modal.cjs");
10
- const theme = require("../web-components/dist/theme.cjs");
11
- const Containers = require("../web-components/dist/Containers.cjs");
12
- const WidgetConstants = require("../web-components/dist/WidgetConstants.cjs");
13
- const Checkbox = require("../web-components/dist/Checkbox.cjs");
14
- const LoadingSpinner = require("../web-components/dist/LoadingSpinner.cjs");
15
- const Logo = require("../web-components/dist/Logo.cjs");
16
10
  const ProcaptchaWidget = (props) => {
17
11
  const config = props.config;
18
12
  const callbacks = props.callbacks || {};
19
13
  const [state, updateState] = procaptchaCommon.useProcaptcha(React.useState, React.useRef);
20
14
  const manager = procaptcha.Manager(config, state, updateState, callbacks);
21
15
  const themeColor = props.config.theme === "light" ? "light" : "dark";
22
- const theme$1 = props.config.theme === "light" ? theme.lightTheme : theme.darkTheme;
16
+ const theme = props.config.theme === "light" ? webComponents.lightTheme : webComponents.darkTheme;
23
17
  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: [
24
18
  /* @__PURE__ */ jsxRuntime.jsx(Modal, { show: state.showModal, children: state.challenge ? /* @__PURE__ */ jsxRuntime.jsx(
25
19
  CaptchaComponent,
@@ -34,23 +28,23 @@ const ProcaptchaWidget = (props) => {
34
28
  themeColor: config.theme ?? "light"
35
29
  }
36
30
  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: "No challenge set." }) }),
37
- /* @__PURE__ */ jsxRuntime.jsxs(Containers.ContainerDiv, { children: [
38
- /* @__PURE__ */ jsxRuntime.jsx(Containers.WidthBasedStylesDiv, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: WidgetConstants.WIDGET_DIMENSIONS, "data-cy": "button-human", children: [
31
+ /* @__PURE__ */ jsxRuntime.jsxs(webComponents.ContainerDiv, { children: [
32
+ /* @__PURE__ */ jsxRuntime.jsx(webComponents.WidthBasedStylesDiv, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: webComponents.WIDGET_DIMENSIONS, "data-cy": "button-human", children: [
39
33
  " ",
40
34
  /* @__PURE__ */ jsxRuntime.jsxs(
41
35
  "div",
42
36
  {
43
37
  style: {
44
- padding: WidgetConstants.WIDGET_PADDING,
45
- border: WidgetConstants.WIDGET_BORDER,
46
- backgroundColor: theme$1.palette.background.default,
47
- borderColor: theme$1.palette.grey[300],
48
- borderRadius: WidgetConstants.WIDGET_BORDER_RADIUS,
38
+ padding: webComponents.WIDGET_PADDING,
39
+ border: webComponents.WIDGET_BORDER,
40
+ backgroundColor: theme.palette.background.default,
41
+ borderColor: theme.palette.grey[300],
42
+ borderRadius: webComponents.WIDGET_BORDER_RADIUS,
49
43
  display: "flex",
50
44
  alignItems: "center",
51
45
  flexWrap: "wrap",
52
46
  justifyContent: "space-between",
53
- minHeight: `${WidgetConstants.WIDGET_INNER_HEIGHT}px`,
47
+ minHeight: `${webComponents.WIDGET_INNER_HEIGHT}px`,
54
48
  overflow: "hidden"
55
49
  },
56
50
  children: [
@@ -79,7 +73,7 @@ const ProcaptchaWidget = (props) => {
79
73
  display: !state.loading ? "flex" : "none"
80
74
  },
81
75
  children: /* @__PURE__ */ jsxRuntime.jsx(
82
- Checkbox.Checkbox,
76
+ webComponents.Checkbox,
83
77
  {
84
78
  themeColor,
85
79
  onChange: manager.start,
@@ -95,7 +89,7 @@ const ProcaptchaWidget = (props) => {
95
89
  style: {
96
90
  display: state.loading ? "flex" : "none"
97
91
  },
98
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner.LoadingSpinner, { themeColor }) })
92
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex" }, children: /* @__PURE__ */ jsxRuntime.jsx(webComponents.LoadingSpinner, { themeColor }) })
99
93
  }
100
94
  )
101
95
  ]
@@ -103,7 +97,7 @@ const ProcaptchaWidget = (props) => {
103
97
  )
104
98
  }
105
99
  ) }),
106
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: WidgetConstants.WIDGET_URL, target: "_blank", "aria-label": WidgetConstants.WIDGET_URL_TEXT, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Logo, { themeColor }) }) }) })
100
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: webComponents.WIDGET_URL, target: "_blank", "aria-label": webComponents.WIDGET_URL_TEXT, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(webComponents.Logo, { themeColor }) }) }) })
107
101
  ]
108
102
  }
109
103
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prosopo/procaptcha-react",
3
- "version": "0.3.38",
3
+ "version": "0.3.40",
4
4
  "author": "PROSOPO LIMITED <info@prosopo.io>",
5
5
  "license": "Apache-2.0",
6
6
  "main": "./dist/index.js",
@@ -23,7 +23,7 @@
23
23
  "clean": "tsc --build --clean",
24
24
  "build": "tsc --build --verbose tsconfig.json",
25
25
  "build:cjs": "npx vite --config vite.cjs.config.ts build",
26
- "eslint": "npx eslint . --no-error-on-unmatched-pattern --ignore-path ../../.eslintignore",
26
+ "eslint": "npx eslint . --no-error-on-unmatched-pattern --ignore-path ../../.eslintignore --quiet",
27
27
  "eslint:fix": "npm run eslint -- --fix",
28
28
  "prettier": "npx prettier . --check --no-error-on-unmatched-pattern --ignore-path ../../.eslintignore",
29
29
  "prettier:fix": "npm run prettier -- --write",
@@ -35,22 +35,29 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@emotion/react": "^11.11.4",
38
- "@emotion/styled": "^11.11.0",
39
- "@polkadot/extension-dapp": "0.46.6",
40
- "@polkadot/extension-inject": "0.46.6",
41
- "@prosopo/api": "0.3.38",
42
- "@prosopo/common": "0.3.38",
43
- "@prosopo/procaptcha": "0.3.38",
44
- "@prosopo/types": "0.3.38",
45
- "@prosopo/util": "0.3.38",
46
- "@prosopo/web-components": "0.3.38",
47
- "react": "^18.2.0",
48
- "react-dom": "^18.2.0"
38
+ "@prosopo/common": "0.3.40",
39
+ "@prosopo/procaptcha": "0.3.40",
40
+ "@prosopo/procaptcha-common": "0.3.40",
41
+ "@prosopo/types": "0.3.40",
42
+ "@prosopo/util": "0.3.40",
43
+ "@prosopo/web-components": "0.3.40",
44
+ "react": "^18.3.1"
45
+ },
46
+ "overrides": {
47
+ "@polkadot/extension-inject": {
48
+ "@polkadot/api": {
49
+ "version": "10.13.1"
50
+ }
51
+ },
52
+ "@polkadot/extension-dapp": {
53
+ "@polkadot/api": {
54
+ "version": "10.13.1"
55
+ }
56
+ }
49
57
  },
50
58
  "devDependencies": {
51
59
  "tslib": "2.6.2",
52
- "typescript": "5.1.6",
53
- "vite-plugin-dts": "^3.7.3"
60
+ "typescript": "5.1.6"
54
61
  },
55
62
  "repository": {
56
63
  "type": "git",
package/dist/cjs/web-components/dist/CaptchaPlaceholder.cjs DELETED
@@ -1,37 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const jsxRuntime = require("@emotion/react/jsx-runtime");
4
- const Containers = require("./Containers.cjs");
5
- const LoadingSpinner = require("./LoadingSpinner.cjs");
6
- const WidgetConstants = require("./WidgetConstants.cjs");
7
- const theme = require("./theme.cjs");
8
- const Logo = require("./Logo.cjs");
9
- const ProcaptchaPlaceholder = (props) => {
10
- const themeColor = props.darkMode === "light" ? "light" : "dark";
11
- const theme$1 = props.darkMode === "light" ? theme.lightTheme : theme.darkTheme;
12
- return jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { style: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: jsxRuntime.jsx(Containers.ContainerDiv, { children: jsxRuntime.jsx(Containers.WidthBasedStylesDiv, { children: jsxRuntime.jsxs("div", { style: WidgetConstants.WIDGET_DIMENSIONS, "data-cy": "button-human", children: [" ", jsxRuntime.jsxs("div", { style: {
13
- padding: WidgetConstants.WIDGET_PADDING,
14
- border: WidgetConstants.WIDGET_BORDER,
15
- backgroundColor: theme$1.palette.background.default,
16
- borderColor: theme$1.palette.grey[300],
17
- borderRadius: WidgetConstants.WIDGET_BORDER_RADIUS,
18
- display: "flex",
19
- alignItems: "center",
20
- flexWrap: "wrap",
21
- justifyContent: "space-between",
22
- minHeight: `${WidgetConstants.WIDGET_INNER_HEIGHT}px`,
23
- overflow: "hidden"
24
- }, children: [jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: jsxRuntime.jsx("div", { style: {
25
- alignItems: "center",
26
- flex: 1
27
- }, children: jsxRuntime.jsx("div", { style: {
28
- display: "flex",
29
- alignItems: "center",
30
- justifyContent: "center",
31
- flexDirection: "column",
32
- verticalAlign: "middle"
33
- }, children: jsxRuntime.jsx("div", { style: {
34
- display: "flex"
35
- }, children: jsxRuntime.jsx("div", { style: { display: "inline-flex" }, children: jsxRuntime.jsx(LoadingSpinner.LoadingSpinner, { themeColor }) }) }) }) }) }), jsxRuntime.jsx("div", { style: { display: "inline-flex", flexDirection: "column" }, children: jsxRuntime.jsx("a", { href: WidgetConstants.WIDGET_URL, target: "_blank", "aria-label": WidgetConstants.WIDGET_URL_TEXT, children: jsxRuntime.jsx("div", { style: { flex: 1 }, children: jsxRuntime.jsx(Logo, { themeColor }) }) }) })] })] }) }) }) }) });
36
- };
37
- exports.ProcaptchaPlaceholder = ProcaptchaPlaceholder;
package/dist/cjs/web-components/dist/Checkbox.cjs DELETED
@@ -1,59 +0,0 @@
1
- "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const jsxRuntime = require("@emotion/react/jsx-runtime");
4
- const react = require("@emotion/react");
5
- const theme = require("./theme.cjs");
6
- const React = require("react");
7
- const checkboxBefore = react.css`{
8
- &:before {
9
- content: '""';
10
- position: absolute;
11
- height: 100%;
12
- width: 100%;
13
- }
14
- }`;
15
- const baseStyle = {
16
- width: "28px",
17
- height: "28px",
18
- top: "auto",
19
- left: "auto",
20
- opacity: "1",
21
- borderRadius: "12.5%",
22
- appearance: "none",
23
- cursor: "pointer",
24
- margin: "0",
25
- borderStyle: "solid",
26
- borderWidth: "1px"
27
- };
28
- const ID_LETTERS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
29
- const generateRandomId = () => {
30
- return Array.from({ length: 8 }, () => ID_LETTERS[Math.floor(Math.random() * ID_LETTERS.length)]).join("");
31
- };
32
- const Checkbox = ({ themeColor, onChange, checked, labelText }) => {
33
- const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
34
- const checkboxStyleBase = {
35
- ...baseStyle,
36
- border: `1px solid ${theme$1.palette.background.contrastText}`
37
- };
38
- const [hover, setHover] = React.useState(false);
39
- const checkboxStyle = React.useMemo(() => {
40
- return {
41
- ...checkboxStyleBase,
42
- borderColor: hover ? theme$1.palette.background.contrastText : theme$1.palette.grey[400],
43
- appearance: checked ? "auto" : "none",
44
- flex: 1,
45
- margin: "15px"
46
- };
47
- }, [hover, theme$1, checked]);
48
- const id = generateRandomId();
49
- return jsxRuntime.jsxs("span", { style: { display: "inline-flex" }, children: [jsxRuntime.jsx("input", { name: id, id, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), css: checkboxBefore, type: "checkbox", "aria-live": "assertive", "aria-haspopup": "true", onChange, checked, style: checkboxStyle }), jsxRuntime.jsx("label", { css: {
50
- color: theme$1.palette.background.contrastText,
51
- position: "relative",
52
- display: "flex",
53
- cursor: "pointer",
54
- userSelect: "none",
55
- top: "18px"
56
- }, htmlFor: id, children: labelText })] });
57
- };
58
- exports.Checkbox = Checkbox;
59
- exports.default = Checkbox;
package/dist/cjs/web-components/dist/Containers.cjs DELETED
@@ -1,42 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const WidgetConstants = require("./WidgetConstants.cjs");
4
- const styled = require("@emotion/styled");
5
- const ContainerDiv = styled.div`
6
- container-type: inline-size;
7
- `;
8
- const WidthBasedStylesDiv = styled.div`
9
- max-width: 100%;
10
- max-height: 100%;
11
- overflow: hidden;
12
- height: ${WidgetConstants.WIDGET_OUTER_HEIGHT}px;
13
- @container (max-width: 243px) {
14
- #logo-without-text {
15
- display: none;
16
- }
17
-
18
- #logo-with-text {
19
- display: none;
20
- }
21
- }
22
- @container (min-width: 244px) and (max-width: 339px) {
23
- #logo-without-text {
24
- display: inherit;
25
- }
26
-
27
- #logo-with-text {
28
- display: none;
29
- }
30
- }
31
- @container (min-width: 340px) {
32
- #logo-without-text {
33
- display: none;
34
- }
35
-
36
- #logo-with-text {
37
- display: inherit;
38
- }
39
- }
40
- `;
41
- exports.ContainerDiv = ContainerDiv;
42
- exports.WidthBasedStylesDiv = WidthBasedStylesDiv;
package/dist/cjs/web-components/dist/LoadingSpinner.cjs DELETED
@@ -1,34 +0,0 @@
1
- "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const jsxRuntime = require("@emotion/react/jsx-runtime");
4
- const theme = require("./theme.cjs");
5
- const React = require("react");
6
- const styled = require("@emotion/styled");
7
- const LoadingSpinner = ({ themeColor }) => {
8
- const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
9
- const StyledDiv = styled.div`
10
- margin-top: 0;
11
- margin-left: 15px;
12
- margin-right: 15px;
13
- width: 2em;
14
- height: 2em;
15
- border: 4px solid ${theme$1.palette.background.contrastText};
16
- border-bottom-color: transparent;
17
- border-radius: 50%;
18
- display: inherit;
19
- box-sizing: border-box;
20
- animation: rotation 1s linear infinite;
21
-
22
- @keyframes rotation {
23
- 0% {
24
- transform: rotate(0deg);
25
- }
26
- 100% {
27
- transform: rotate(360deg);
28
- }
29
- }
30
- `;
31
- return jsxRuntime.jsx(StyledDiv, {});
32
- };
33
- exports.LoadingSpinner = LoadingSpinner;
34
- exports.default = LoadingSpinner;
package/dist/cjs/web-components/dist/Logo.cjs DELETED
@@ -1,16 +0,0 @@
1
- "use strict";
2
- const jsxRuntime = require("@emotion/react/jsx-runtime");
3
- const LogoWithText = require("./LogoWithText.cjs");
4
- const LogoWithoutText = require("./LogoWithoutText.cjs");
5
- const styled = require("@emotion/styled");
6
- const LogoContainer = styled.div`
7
- padding: 8px;
8
- flex: 1 1 0;
9
- `;
10
- const LogoInnerContainer = styled.div`
11
- padding: 8px;
12
- `;
13
- const Logo = ({ themeColor }) => {
14
- return jsxRuntime.jsx(LogoContainer, { children: jsxRuntime.jsxs(LogoInnerContainer, { children: [jsxRuntime.jsx(LogoWithoutText.LogoWithoutText, { themeColor }), jsxRuntime.jsx(LogoWithText.LogoWithText, { themeColor })] }) });
15
- };
16
- module.exports = Logo;
package/dist/cjs/web-components/dist/LogoWithText.cjs DELETED
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const jsxRuntime = require("@emotion/react/jsx-runtime");
4
- const React = require("react");
5
- const LogoWithText = ({ themeColor }) => {
6
- const fill = React.useMemo(() => themeColor === "light" ? "#1d1d1b" : "#fff", [themeColor]);
7
- return jsxRuntime.jsxs("svg", { className: "logo", id: "logo-with-text", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2062.63 468.67", height: "35px", width: "140px", style: { fill }, children: [jsxRuntime.jsx("title", { children: "Prosopo Logo With Text" }), jsxRuntime.jsx("path", { d: "M335.55,1825.19A147.75,147.75,0,0,1,483.3,1972.94h50.5c0-109.49-88.76-198.25-198.25-198.25v50.5Z", transform: "translate(-215.73 -1774.69)" }), jsxRuntime.jsx("path", { d: "M269.36,1891.39A147.74,147.74,0,0,1,417.1,2039.13h50.5c0-109.49-88.75-198.24-198.24-198.24v50.5Z", transform: "translate(-215.73 -1774.69)" }), jsxRuntime.jsx("path", { d: "M414,2157.17a147.75,147.75,0,0,1-147.74-147.74h-50.5c0,109.49,88.75,198.24,198.24,198.24v-50.5Z", transform: "translate(-215.73 -1774.69)" }), jsxRuntime.jsx("path", { d: "M480.17,2091a147.74,147.74,0,0,1-147.74-147.75H281.92c0,109.49,88.76,198.25,198.25,198.25V2091Z", transform: "translate(-215.73 -1774.69)" }), jsxRuntime.jsx("path", { d: "M862.8,2017.5q-27.39,22.86-78.25,22.86h-65v112.19H654.82v-312h134q46.32,0,73.86,24.13t27.55,74.72Q890.2,1994.64,862.8,2017.5ZM813,1905.1q-12.37-10.36-34.7-10.38H719.59v91.87h58.75q22.32,0,34.7-11.22t12.39-35.56Q825.43,1915.48,813,1905.1Z", transform: "translate(-215.73 -1774.69)" }), jsxRuntime.jsx("path", { d: "M1045.69,1916.42c.78.08,2.51.19,5.19.32v61.81c-3.81-.42-7.2-.71-10.16-.85s-5.36-.21-7.2-.21q-36.4,0-48.89,23.71-7,13.33-7,41.06v110.29H916.89V1921.82h57.58V1962q14-23.07,24.34-31.54,16.94-14.18,44-14.18C1044,1916.32,1044.92,1916.35,1045.69,1916.42Z", transform: "translate(-215.73 -1774.69)" }), jsxRuntime.jsx("path", { d: "M1265.64,2124.32q-29.21,36.06-88.69,36.06t-88.69-36.06Q1059,2088.26,1059,2037.5q0-49.9,29.22-86.5t88.69-36.59q59.47,0,88.69,36.59t29.21,86.5Q1294.85,2088.26,1265.64,2124.32ZM1217.38,2091q14.17-18.81,14.18-53.48t-14.18-53.37q-14.19-18.7-40.64-18.71T1136,1984.13q-14.29,18.72-14.29,53.37T1136,2091q14.28,18.81,40.75,18.81T1217.38,2091Z", transform: "translate(-215.73 -1774.69)" }), jsxRuntime.jsx("path", { d: "M1371.81,2078.88q1.92,16.1,8.29,22.87,11.28,12.06,41.7,12.06,17.85,0,28.39-5.29t10.53-15.88a17.12,17.12,0,0,0-8.48-15.45q-8.49-5.28-63.12-18.2-39.33-9.73-55.41-24.35-16.08-14.39-16.09-41.49,0-32,25.14-54.93t70.75-23q43.26,0,70.53,17.25t31.29,59.59H1455q-1.27-11.64-6.58-18.42-10-12.27-34-12.28-19.74,0-28.13,6.14t-8.38,14.4c0,6.91,3,11.93,8.92,15q8.89,4.89,63,16.73,36,8.46,54.05,25.61,17.77,17.35,17.78,43.39,0,34.3-25.56,56t-79,21.7q-54.51,0-80.49-23t-26-58.53Z", transform: "translate(-215.73 -1774.69)" }), jsxRuntime.jsx("path", { d: "M1745.54,2124.32q-29.22,36.06-88.7,36.06t-88.69-36.06q-29.2-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.7,36.59t29.21,86.5Q1774.75,2088.26,1745.54,2124.32ZM1697.27,2091q14.19-18.81,14.19-53.48t-14.19-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.28,53.37t14.28,53.48q14.3,18.81,40.75,18.81T1697.27,2091Z", transform: "translate(-215.73 -1774.69)" }), jsxRuntime.jsx("path", { d: "M1992.75,1946.59q28.24,29.84,28.23,87.63,0,61-27.58,92.93t-71.06,32q-27.69,0-46-13.76-10-7.62-19.6-22.23v120.24H1797V1921.82h57.79v34.08q9.79-15,20.88-23.71,20.23-15.43,48.15-15.45Q1964.53,1916.74,1992.75,1946.59Zm-46.3,43.39q-12.3-20.52-39.88-20.53-33.15,0-45.54,31.11-6.43,16.51-6.42,41.92,0,40.21,21.58,56.51,12.82,9.53,30.37,9.53,25.45,0,38.83-19.48t13.36-51.86Q1958.75,2010.51,1946.45,1990Z", transform: "translate(-215.73 -1774.69)" }), jsxRuntime.jsx("path", { d: "M2249.14,2124.32q-29.2,36.06-88.69,36.06t-88.69-36.06q-29.22-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.69,36.59t29.22,86.5Q2278.36,2088.26,2249.14,2124.32ZM2200.88,2091q14.19-18.81,14.18-53.48t-14.18-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.29,53.37t14.29,53.48q14.3,18.81,40.75,18.81T2200.88,2091Z", transform: "translate(-215.73 -1774.69)" })] });
8
- };
9
- exports.LogoWithText = LogoWithText;
10
- exports.default = LogoWithText;
package/dist/cjs/web-components/dist/LogoWithoutText.cjs DELETED
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const jsxRuntime = require("@emotion/react/jsx-runtime");
4
- const React = require("react");
5
- const LogoWithoutText = ({ themeColor }) => {
6
- const fill = React.useMemo(() => themeColor === "light" ? "#1d1d1b" : "#fff", [themeColor]);
7
- return jsxRuntime.jsxs("svg", { className: "logo", id: "logo-without-text", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 260 348", height: "35px", style: { fill }, children: [jsxRuntime.jsx("title", { children: "Prosopo Logo Without Text" }), jsxRuntime.jsx("path", { d: "M95.7053 40.2707C127.005 40.2707 157.022 52.6841 179.154 74.78C201.286 96.8759 213.719 126.844 213.719 158.093H254.056C254.056 70.7808 183.16 -4.57764e-05 95.7053 -4.57764e-05V40.2707Z" }), jsxRuntime.jsx("path", { d: "M42.8365 93.0614C58.3333 93.0614 73.6784 96.1087 87.9955 102.029C102.313 107.95 115.322 116.628 126.279 127.568C137.237 138.508 145.93 151.496 151.86 165.79C157.79 180.084 160.843 195.404 160.843 210.875H201.179C201.179 123.564 130.291 52.7906 42.8365 52.7906V93.0614Z" }), jsxRuntime.jsx("path", { d: "M158.367 305.005C127.07 305.003 97.056 292.59 74.926 270.496C52.796 248.402 40.3626 218.437 40.3604 187.191H0.0239563C0.0239563 274.503 70.9123 345.276 158.367 345.276V305.005Z" }), jsxRuntime.jsx("path", { d: "M211.219 252.239C195.722 252.239 180.376 249.191 166.059 243.27C151.741 237.349 138.732 228.67 127.774 217.729C116.816 206.788 108.123 193.799 102.194 179.505C96.2637 165.21 93.2121 149.889 93.2132 134.417H52.8687C52.8687 221.729 123.765 292.509 211.219 292.509V252.239Z" })] });
8
- };
9
- exports.LogoWithoutText = LogoWithoutText;
10
- exports.default = LogoWithoutText;
package/dist/cjs/web-components/dist/WidgetConstants.cjs DELETED
@@ -1,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const WIDGET_URL = "https://prosopo.io/?ref=accounts.prosopo.io&amp;utm_campaign=widget&amp;utm_medium=checkbox#features";
4
- const WIDGET_URL_TEXT = "Visit prosopo.io to learn more about the service and its accessibility options.";
5
- const WIDGET_INNER_HEIGHT = 74;
6
- const WIDGET_OUTER_HEIGHT = 80;
7
- const WIDGET_DIMENSIONS = { maxWidth: "400px", minWidth: "200px", minHeight: `${WIDGET_OUTER_HEIGHT}px` };
8
- const WIDGET_BORDER_RADIUS = "8px";
9
- const WIDGET_PADDING = "2px";
10
- const WIDGET_BORDER = "1px solid";
11
- exports.WIDGET_BORDER = WIDGET_BORDER;
12
- exports.WIDGET_BORDER_RADIUS = WIDGET_BORDER_RADIUS;
13
- exports.WIDGET_DIMENSIONS = WIDGET_DIMENSIONS;
14
- exports.WIDGET_INNER_HEIGHT = WIDGET_INNER_HEIGHT;
15
- exports.WIDGET_OUTER_HEIGHT = WIDGET_OUTER_HEIGHT;
16
- exports.WIDGET_PADDING = WIDGET_PADDING;
17
- exports.WIDGET_URL = WIDGET_URL;
18
- exports.WIDGET_URL_TEXT = WIDGET_URL_TEXT;
package/dist/cjs/web-components/dist/index.cjs DELETED
@@ -1,25 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const CaptchaPlaceholder = require("./CaptchaPlaceholder.cjs");
4
- const LoadingSpinner = require("./LoadingSpinner.cjs");
5
- const theme = require("./theme.cjs");
6
- const Checkbox = require("./Checkbox.cjs");
7
- const Logo = require("./Logo.cjs");
8
- const Containers = require("./Containers.cjs");
9
- const WidgetConstants = require("./WidgetConstants.cjs");
10
- exports.ProcaptchaPlaceholder = CaptchaPlaceholder.ProcaptchaPlaceholder;
11
- exports.LoadingSpinner = LoadingSpinner.LoadingSpinner;
12
- exports.darkTheme = theme.darkTheme;
13
- exports.lightTheme = theme.lightTheme;
14
- exports.Checkbox = Checkbox.Checkbox;
15
- exports.Logo = Logo;
16
- exports.ContainerDiv = Containers.ContainerDiv;
17
- exports.WidthBasedStylesDiv = Containers.WidthBasedStylesDiv;
18
- exports.WIDGET_BORDER = WidgetConstants.WIDGET_BORDER;
19
- exports.WIDGET_BORDER_RADIUS = WidgetConstants.WIDGET_BORDER_RADIUS;
20
- exports.WIDGET_DIMENSIONS = WidgetConstants.WIDGET_DIMENSIONS;
21
- exports.WIDGET_INNER_HEIGHT = WidgetConstants.WIDGET_INNER_HEIGHT;
22
- exports.WIDGET_OUTER_HEIGHT = WidgetConstants.WIDGET_OUTER_HEIGHT;
23
- exports.WIDGET_PADDING = WidgetConstants.WIDGET_PADDING;
24
- exports.WIDGET_URL = WidgetConstants.WIDGET_URL;
25
- exports.WIDGET_URL_TEXT = WidgetConstants.WIDGET_URL_TEXT;
package/dist/cjs/web-components/dist/theme.cjs DELETED
@@ -1,44 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const grey = {
4
- 0: "#fff",
5
- 100: "#f5f5f5",
6
- 200: "#eeeeee",
7
- 300: "#e0e0e0",
8
- 400: "#bdbdbd",
9
- 500: "#9e9e9e",
10
- 600: "#757575",
11
- 700: "#616161",
12
- 800: "#424242",
13
- 900: "#212121"
14
- };
15
- const lightTheme = {
16
- palette: {
17
- mode: "light",
18
- primary: {
19
- main: "#487DFA",
20
- contrastText: "#fff"
21
- },
22
- background: {
23
- default: "#fff",
24
- contrastText: "#000"
25
- },
26
- grey
27
- }
28
- };
29
- const darkTheme = {
30
- palette: {
31
- mode: "dark",
32
- primary: {
33
- main: "#487DFA",
34
- contrastText: "#fff"
35
- },
36
- background: {
37
- default: "#303030",
38
- contrastText: "#fff"
39
- },
40
- grey
41
- }
42
- };
43
- exports.darkTheme = darkTheme;
44
- exports.lightTheme = lightTheme;