@prosopo/procaptcha-react 2.9.96 → 2.9.97

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 (25) hide show
  1. package/.turbo/turbo-build$colon$cjs.log +18 -33
  2. package/.turbo/turbo-build$colon$tsc.log +21 -21
  3. package/.turbo/turbo-build.log +19 -34
  4. package/CHANGELOG.md +17 -0
  5. package/dist/_virtual/_rolldown/runtime.js +3 -0
  6. package/dist/cjs/_virtual/_rolldown/runtime.cjs +23 -0
  7. package/dist/cjs/components/Button.cjs +68 -78
  8. package/dist/cjs/components/CaptchaComponent.cjs +165 -228
  9. package/dist/cjs/components/CaptchaWidget.cjs +112 -158
  10. package/dist/cjs/components/Modal.cjs +30 -23
  11. package/dist/cjs/components/Procaptcha.cjs +7 -7
  12. package/dist/cjs/components/ProcaptchaWidget.cjs +145 -163
  13. package/dist/cjs/components/index.cjs +6 -9
  14. package/dist/cjs/index.cjs +6 -9
  15. package/dist/cjs/util/index.cjs +17 -15
  16. package/dist/components/Button.js +67 -78
  17. package/dist/components/CaptchaComponent.js +161 -225
  18. package/dist/components/CaptchaWidget.js +111 -157
  19. package/dist/components/Modal.js +24 -21
  20. package/dist/components/Procaptcha.js +6 -6
  21. package/dist/components/ProcaptchaWidget.js +144 -162
  22. package/dist/components/index.js +3 -8
  23. package/dist/index.js +4 -9
  24. package/dist/util/index.js +17 -16
  25. package/package.json +11 -11
package/dist/cjs/components/CaptchaComponent.cjs CHANGED
@@ -1,229 +1,166 @@
1
- "use strict";
2
- const jsxRuntime = require("@emotion/react/jsx-runtime");
3
- const locale = require("@prosopo/locale");
4
- const procaptchaCommon = require("@prosopo/procaptcha-common");
5
- const util = require("@prosopo/util");
6
- const widgetSkeleton = require("@prosopo/widget-skeleton");
7
- const React = require("react");
8
- const index = require("../util/index.cjs");
9
- const Button = require("./Button.cjs");
10
- const CaptchaWidget = require("./CaptchaWidget.cjs");
11
- const CaptchaComponent = ({
12
- challenge,
13
- index: index$1,
14
- solutions,
15
- onSubmit,
16
- onCancel,
17
- onClick,
18
- onNext,
19
- onReload,
20
- themeColor
21
- }) => {
22
- const { t } = locale.useTranslation();
23
- const captcha = challenge.captchas ? util.at(challenge.captchas, index$1) : null;
24
- const solution = solutions ? util.at(solutions, index$1) : [];
25
- const theme = React.useMemo(
26
- () => themeColor === "light" ? widgetSkeleton.lightTheme : widgetSkeleton.darkTheme,
27
- [themeColor]
28
- );
29
- const doubleSpacing = `${theme.spacing.unit * 2}px`;
30
- const fullSpacing = `${theme.spacing.unit}px`;
31
- const halfSpacing = `${theme.spacing.half}px`;
32
- return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(
33
- "div",
34
- {
35
- style: {
36
- // introduce scroll bars when screen < minWidth of children
37
- overflowX: "auto",
38
- overflowY: "auto",
39
- maxWidth: "500px",
40
- maxHeight: "100%",
41
- display: "flex",
42
- flexDirection: "column",
43
- border: "1px solid #dddddd",
44
- boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px",
45
- borderRadius: "4px",
46
- backgroundColor: theme.palette.background.default,
47
- userSelect: "none",
48
- touchAction: "none",
49
- overscrollBehavior: "none"
50
- },
51
- children: /* @__PURE__ */ jsxRuntime.jsxs(
52
- "div",
53
- {
54
- style: {
55
- backgroundColor: theme.palette.background.default,
56
- display: "flex",
57
- flexDirection: "column",
58
- minWidth: "300px",
59
- marginLeft: fullSpacing,
60
- marginRight: fullSpacing,
61
- justifyContent: "center"
62
- },
63
- children: [
64
- /* @__PURE__ */ jsxRuntime.jsx(
65
- "div",
66
- {
67
- style: {
68
- display: "flex",
69
- alignItems: "center",
70
- width: "100%"
71
- },
72
- children: /* @__PURE__ */ jsxRuntime.jsx(
73
- "div",
74
- {
75
- style: {
76
- backgroundColor: theme.palette.primary.main,
77
- width: "100%",
78
- marginTop: fullSpacing
79
- },
80
- children: /* @__PURE__ */ jsxRuntime.jsxs(
81
- "div",
82
- {
83
- style: {
84
- padding: `${theme.spacing.half}px`,
85
- fontFamily: theme.font.fontFamily
86
- },
87
- children: [
88
- /* @__PURE__ */ jsxRuntime.jsxs(
89
- "p",
90
- {
91
- style: {
92
- color: "#ffffff",
93
- fontWeight: 700,
94
- lineHeight: 1.5
95
- },
96
- children: [
97
- t("WIDGET.SELECT_ALL"),
98
- ":",
99
- " ",
100
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${util.at(challenge.captchas, index$1).target} ` })
101
- ]
102
- }
103
- ),
104
- /* @__PURE__ */ jsxRuntime.jsx(
105
- "p",
106
- {
107
- style: {
108
- color: "#ffffff",
109
- fontWeight: 500,
110
- lineHeight: 0.8,
111
- fontSize: "0.8rem"
112
- },
113
- children: t("WIDGET.IF_NONE_CLICK_NEXT")
114
- }
115
- )
116
- ]
117
- }
118
- )
119
- }
120
- )
121
- }
122
- ),
123
- /* @__PURE__ */ jsxRuntime.jsx(
124
- "div",
125
- {
126
- ...index({ dev: { cy: `captcha-${index$1}` } }),
127
- style: { overflow: "hidden" },
128
- children: captcha && /* @__PURE__ */ jsxRuntime.jsx(
129
- CaptchaWidget.CaptchaWidget,
130
- {
131
- challenge: captcha,
132
- solution,
133
- onClick,
134
- themeColor
135
- }
136
- )
137
- }
138
- ),
139
- /* @__PURE__ */ jsxRuntime.jsx(
140
- "div",
141
- {
142
- style: {
143
- display: "flex",
144
- alignItems: "center",
145
- justifyContent: "space-between",
146
- lineHeight: 1.75,
147
- padding: `${fullSpacing} 0 ${doubleSpacing} 0`
148
- },
149
- children: /* @__PURE__ */ jsxRuntime.jsxs(
150
- "div",
151
- {
152
- style: {
153
- // expand to full height / width of parent
154
- width: "100%",
155
- height: "100%",
156
- // display children in flex, spreading them evenly
157
- display: "flex",
158
- flexDirection: "row",
159
- justifyContent: "space-between",
160
- gap: "10px"
161
- },
162
- children: [
163
- /* @__PURE__ */ jsxRuntime.jsx(
164
- "div",
165
- {
166
- style: {
167
- position: "relative",
168
- flexGrow: 1,
169
- // make the width of each item 1/3rd of the width overall, i.e. 3 columns
170
- flexBasis: "calc(33.333% - 10px)"
171
- },
172
- children: /* @__PURE__ */ jsxRuntime.jsx(
173
- Button,
174
- {
175
- themeColor,
176
- buttonType: "cancel",
177
- onClick: onCancel,
178
- text: t("WIDGET.CANCEL"),
179
- "aria-label": t("WIDGET.CANCEL")
180
- }
181
- )
182
- }
183
- ),
184
- /* @__PURE__ */ jsxRuntime.jsx(
185
- "div",
186
- {
187
- style: {
188
- position: "relative",
189
- flexGrow: 1,
190
- // make the width of each item 1/3rd of the width overall, i.e. 3 columns
191
- flexBasis: "calc(33.333% - 10px)"
192
- },
193
- children: /* @__PURE__ */ jsxRuntime.jsx(procaptchaCommon.ReloadButton, { themeColor, onReload })
194
- }
195
- ),
196
- /* @__PURE__ */ jsxRuntime.jsx(
197
- "div",
198
- {
199
- style: {
200
- position: "relative",
201
- flexGrow: 1,
202
- // make the width of each item 1/3rd of the width overall, i.e. 3 columns
203
- flexBasis: "calc(33.333% - 10px)"
204
- },
205
- children: /* @__PURE__ */ jsxRuntime.jsx(
206
- Button,
207
- {
208
- themeColor,
209
- buttonType: "next",
210
- text: index$1 < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
211
- onClick: index$1 < challenge.captchas.length - 1 ? onNext : onSubmit,
212
- "aria-label": index$1 < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
213
- "data-cy": "button-next"
214
- }
215
- )
216
- }
217
- )
218
- ]
219
- }
220
- )
221
- }
222
- )
223
- ]
224
- }
225
- )
226
- }
227
- ) });
1
+ const require_CaptchaWidget = require("./CaptchaWidget.cjs");
2
+ const require_index = require("../util/index.cjs");
3
+ const require_Button = require("./Button.cjs");
4
+ let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
5
+ let react = require("react");
6
+ let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
7
+ let _prosopo_locale = require("@prosopo/locale");
8
+ let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
9
+ let _prosopo_util = require("@prosopo/util");
10
+ //#region src/components/CaptchaComponent.tsx
11
+ var CaptchaComponent = ({ challenge, index, solutions, onSubmit, onCancel, onClick, onNext, onReload, themeColor }) => {
12
+ const { t } = (0, _prosopo_locale.useTranslation)();
13
+ const captcha = challenge.captchas ? (0, _prosopo_util.at)(challenge.captchas, index) : null;
14
+ const solution = solutions ? (0, _prosopo_util.at)(solutions, index) : [];
15
+ const theme = (0, react.useMemo)(() => themeColor === "light" ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme, [themeColor]);
16
+ const doubleSpacing = `${theme.spacing.unit * 2}px`;
17
+ const fullSpacing = `${theme.spacing.unit}px`;
18
+ `${theme.spacing.half}`;
19
+ return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react.Suspense, {
20
+ fallback: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: "Loading..." }),
21
+ children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
22
+ style: {
23
+ overflowX: "auto",
24
+ overflowY: "auto",
25
+ maxWidth: "500px",
26
+ maxHeight: "100%",
27
+ display: "flex",
28
+ flexDirection: "column",
29
+ border: "1px solid #dddddd",
30
+ boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px",
31
+ borderRadius: "4px",
32
+ backgroundColor: theme.palette.background.default,
33
+ userSelect: "none",
34
+ touchAction: "none",
35
+ overscrollBehavior: "none"
36
+ },
37
+ children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
38
+ style: {
39
+ backgroundColor: theme.palette.background.default,
40
+ display: "flex",
41
+ flexDirection: "column",
42
+ minWidth: "300px",
43
+ marginLeft: fullSpacing,
44
+ marginRight: fullSpacing,
45
+ justifyContent: "center"
46
+ },
47
+ children: [
48
+ /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
49
+ style: {
50
+ display: "flex",
51
+ alignItems: "center",
52
+ width: "100%"
53
+ },
54
+ children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
55
+ style: {
56
+ backgroundColor: theme.palette.primary.main,
57
+ width: "100%",
58
+ marginTop: fullSpacing
59
+ },
60
+ children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
61
+ style: {
62
+ padding: `${theme.spacing.half}px`,
63
+ fontFamily: theme.font.fontFamily
64
+ },
65
+ children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("p", {
66
+ style: {
67
+ color: "#ffffff",
68
+ fontWeight: 700,
69
+ lineHeight: 1.5
70
+ },
71
+ children: [
72
+ t("WIDGET.SELECT_ALL"),
73
+ ":",
74
+ "\xA0",
75
+ /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: `${(0, _prosopo_util.at)(challenge.captchas, index).target} ` })
76
+ ]
77
+ }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("p", {
78
+ style: {
79
+ color: "#ffffff",
80
+ fontWeight: 500,
81
+ lineHeight: .8,
82
+ fontSize: "0.8rem"
83
+ },
84
+ children: t("WIDGET.IF_NONE_CLICK_NEXT")
85
+ })]
86
+ })
87
+ })
88
+ }),
89
+ /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
90
+ ...require_index.default({ dev: { cy: `captcha-${index}` } }),
91
+ style: { overflow: "hidden" },
92
+ children: captcha && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_CaptchaWidget.CaptchaWidget, {
93
+ challenge: captcha,
94
+ solution,
95
+ onClick,
96
+ themeColor
97
+ })
98
+ }),
99
+ /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
100
+ style: {
101
+ display: "flex",
102
+ alignItems: "center",
103
+ justifyContent: "space-between",
104
+ lineHeight: 1.75,
105
+ padding: `${fullSpacing} 0 ${doubleSpacing} 0`
106
+ },
107
+ children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
108
+ style: {
109
+ width: "100%",
110
+ height: "100%",
111
+ display: "flex",
112
+ flexDirection: "row",
113
+ justifyContent: "space-between",
114
+ gap: "10px"
115
+ },
116
+ children: [
117
+ /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
118
+ style: {
119
+ position: "relative",
120
+ flexGrow: 1,
121
+ flexBasis: "calc(33.333% - 10px)"
122
+ },
123
+ children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Button.default, {
124
+ themeColor,
125
+ buttonType: "cancel",
126
+ onClick: onCancel,
127
+ text: t("WIDGET.CANCEL"),
128
+ "aria-label": t("WIDGET.CANCEL")
129
+ })
130
+ }),
131
+ /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
132
+ style: {
133
+ position: "relative",
134
+ flexGrow: 1,
135
+ flexBasis: "calc(33.333% - 10px)"
136
+ },
137
+ children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_prosopo_procaptcha_common.ReloadButton, {
138
+ themeColor,
139
+ onReload
140
+ })
141
+ }),
142
+ /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
143
+ style: {
144
+ position: "relative",
145
+ flexGrow: 1,
146
+ flexBasis: "calc(33.333% - 10px)"
147
+ },
148
+ children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Button.default, {
149
+ themeColor,
150
+ buttonType: "next",
151
+ text: index < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
152
+ onClick: index < challenge.captchas.length - 1 ? onNext : onSubmit,
153
+ "aria-label": index < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
154
+ "data-cy": "button-next"
155
+ })
156
+ })
157
+ ]
158
+ })
159
+ })
160
+ ]
161
+ })
162
+ })
163
+ });
228
164
  };
229
- module.exports = CaptchaComponent;
165
+ //#endregion
166
+ exports.default = CaptchaComponent;