@prosopo/procaptcha-react 0.2.40 → 0.2.41
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.
- package/dist/cjs/components/Modal.cjs +27 -3
- package/dist/components/Button.d.ts +10 -0
- package/dist/components/Button.d.ts.map +1 -0
- package/dist/components/Button.js +55 -65
- package/dist/components/Button.js.map +1 -0
- package/dist/components/CaptchaComponent.d.ts +14 -0
- package/dist/components/CaptchaComponent.d.ts.map +1 -0
- package/dist/components/CaptchaComponent.js +59 -156
- package/dist/components/CaptchaComponent.js.map +1 -0
- package/dist/components/CaptchaPlaceholder.d.ts +6 -0
- package/dist/components/CaptchaPlaceholder.d.ts.map +1 -0
- package/dist/components/CaptchaPlaceholder.js +42 -97
- package/dist/components/CaptchaPlaceholder.js.map +1 -0
- package/dist/components/CaptchaWidget.d.ts +9 -0
- package/dist/components/CaptchaWidget.d.ts.map +1 -0
- package/dist/components/CaptchaWidget.js +66 -144
- package/dist/components/CaptchaWidget.js.map +1 -0
- package/dist/components/Checkbox.d.ts +9 -0
- package/dist/components/Checkbox.d.ts.map +1 -0
- package/dist/components/Checkbox.js +31 -45
- package/dist/components/Checkbox.js.map +1 -0
- package/dist/components/ExtensionAccountSelect.d.ts +7 -0
- package/dist/components/ExtensionAccountSelect.d.ts.map +1 -0
- package/dist/components/ExtensionAccountSelect.js +30 -47
- package/dist/components/ExtensionAccountSelect.js.map +1 -0
- package/dist/components/LoadingSpinner.d.ts +6 -0
- package/dist/components/LoadingSpinner.d.ts.map +1 -0
- package/dist/components/LoadingSpinner.js +10 -12
- package/dist/components/LoadingSpinner.js.map +1 -0
- package/dist/components/Modal.d.ts +8 -0
- package/dist/components/Modal.d.ts.map +1 -0
- package/dist/components/Modal.js +36 -16
- package/dist/components/Modal.js.map +1 -0
- package/dist/components/Procaptcha.d.ts +6 -0
- package/dist/components/Procaptcha.d.ts.map +1 -0
- package/dist/components/Procaptcha.js +7 -8
- package/dist/components/Procaptcha.js.map +1 -0
- package/dist/components/ProcaptchaWidget.d.ts +8 -0
- package/dist/components/ProcaptchaWidget.d.ts.map +1 -0
- package/dist/components/ProcaptchaWidget.js +130 -221
- package/dist/components/ProcaptchaWidget.js.map +1 -0
- package/dist/components/collector.d.ts +8 -0
- package/dist/components/collector.d.ts.map +1 -0
- package/dist/components/collector.js +23 -24
- package/dist/components/collector.js.map +1 -0
- package/dist/components/index.d.ts +7 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +7 -11
- package/dist/components/index.js.map +1 -0
- package/dist/components/theme.d.ts +51 -0
- package/dist/components/theme.d.ts.map +1 -0
- package/dist/components/theme.js +35 -38
- package/dist/components/theme.js.map +1 -0
- package/dist/index.d.ts +3 -42
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +3 -12
- package/dist/index.js.map +1 -0
- package/dist/util/index.d.ts +9 -0
- package/dist/util/index.d.ts.map +1 -0
- package/dist/util/index.js +7 -12
- package/dist/util/index.js.map +1 -0
- package/package.json +7 -7
- package/dist/cjs/style/Modal.css +0 -41
- package/dist/style/Modal.css +0 -41
- package/public/style/Modal.css +0 -41
- package/vite.config.ts +0 -22
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CaptchaPlaceholder.js","sourceRoot":"","sources":["../../src/components/CaptchaPlaceholder.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BpB,CAAA;AAID,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC7D,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAA;IAC/B,MAAM,UAAU,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,CAAA;IAC1E,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAA;IAC9C,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IACxF,OAAO,CACH,wBACI,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,YAClE,eAAK,KAAK,EAAE,UAAU,aAAW,cAAc,aAC1C,GAAG,EACJ,eACI,KAAK,EAAE;4BACH,OAAO,EAAE,KAAK;4BACd,MAAM,EAAE,WAAW;4BACnB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;4BACjD,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;4BACpC,YAAY,EAAE,KAAK;4BACnB,OAAO,EAAE,MAAM;4BACf,cAAc,EAAE,eAAe;4BAC/B,UAAU,EAAE,QAAQ;4BACpB,QAAQ,EAAE,MAAM;yBACnB,aAED,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,YACpD,cACI,KAAK,EAAE;wCACH,OAAO,EAAE,MAAM;wCACf,cAAc,EAAE,YAAY;wCAC5B,UAAU,EAAE,QAAQ;wCACpB,QAAQ,EAAE,MAAM;qCACnB,YAED,cACI,KAAK,EAAE;4CACH,MAAM,EAAE,MAAM;4CACd,KAAK,EAAE,MAAM;4CACb,OAAO,EAAE,MAAM;4CACf,UAAU,EAAE,QAAQ;4CACpB,cAAc,EAAE,QAAQ;4CACxB,aAAa,EAAE,QAAQ;4CACvB,aAAa,EAAE,QAAQ;yCAC1B,YAED,cACI,KAAK,EAAE;gDACH,OAAO,EAAE,MAAM;6CAClB,YAED,cAAK,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACnB,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,GAAI,GACxC,GACJ,GACJ,GACJ,GACJ,EACN,wBACI,YACI,IAAI,EAAC,kGAA0G,EAC/G,MAAM,EAAC,QAAQ,gBACJ,iFAAiF,YAE5F,wBACI,0BACI,cACI,GAAG,EAAE,SAAS,EACd,uBAAuB,EAAE;wDACrB,MAAM,EACF,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB;qDACzE,GACH,EACF,cACI,GAAG,EAAE,SAAS,EACd,uBAAuB,EAAE;wDACrB,MAAM,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB;qDACvE,GACH,IACA,GACJ,GACN,GACF,IACJ,IACJ,GACJ,GACJ,CACT,CAAA;AACL,CAAC,CAAA;AAED,MAAM,iBAAiB,GACnB,olHAAolH,CAAA;AAExlH,MAAM,iBAAiB,GACnB,ilHAAilH,CAAA;AAErlH,MAAM,oBAAoB,GACtB,+uCAA+uC,CAAA;AAEnvC,MAAM,oBAAoB,GACtB,2vCAA2vC,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { CaptchaResponseCaptcha } from '@prosopo/procaptcha';
|
|
2
|
+
export interface CaptchaWidgetProps {
|
|
3
|
+
challenge: CaptchaResponseCaptcha;
|
|
4
|
+
solution: string[];
|
|
5
|
+
onClick: (hash: string) => void;
|
|
6
|
+
themeColor: 'light' | 'dark';
|
|
7
|
+
}
|
|
8
|
+
export declare const CaptchaWidget: ({ challenge, solution, onClick, themeColor }: CaptchaWidgetProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
9
|
+
//# sourceMappingURL=CaptchaWidget.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CaptchaWidget.d.ts","sourceRoot":"","sources":["../../src/components/CaptchaWidget.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AAK5D,MAAM,WAAW,kBAAkB;IAC/B,SAAS,EAAE,sBAAsB,CAAA;IACjC,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;CAC/B;AASD,eAAO,MAAM,aAAa,iDAAkD,kBAAkB,qDAuH7F,CAAA"}
|
|
@@ -1,148 +1,70 @@
|
|
|
1
|
-
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import { ProsopoDatasetError } from
|
|
3
|
-
import {
|
|
4
|
-
import { useMemo } from
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { ProsopoDatasetError } from '@prosopo/common';
|
|
3
|
+
import { darkTheme, lightTheme } from './theme.js';
|
|
4
|
+
import { useMemo } from 'react';
|
|
5
5
|
const getHash = (item) => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
return item.hash;
|
|
10
|
-
};
|
|
11
|
-
const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
|
|
12
|
-
const items = challenge.captcha.items;
|
|
13
|
-
const theme = useMemo(() => themeColor === "light" ? lightTheme : darkTheme, [themeColor]);
|
|
14
|
-
const isTouchDevice = "ontouchstart" in window;
|
|
15
|
-
return /* @__PURE__ */ jsx(
|
|
16
|
-
"div",
|
|
17
|
-
{
|
|
18
|
-
style: {
|
|
19
|
-
paddingRight: 0.5,
|
|
20
|
-
paddingBottom: 0.5,
|
|
21
|
-
// expand to full height / width of parent
|
|
22
|
-
width: "100%",
|
|
23
|
-
height: "100%",
|
|
24
|
-
// display children in flex, spreading them evenly and wrapping when row length exceeded
|
|
25
|
-
display: "flex",
|
|
26
|
-
flexDirection: "row",
|
|
27
|
-
flexWrap: "wrap"
|
|
28
|
-
},
|
|
29
|
-
children: items.map((item, index) => {
|
|
30
|
-
const hash = getHash(item);
|
|
31
|
-
return /* @__PURE__ */ jsx(
|
|
32
|
-
"div",
|
|
33
|
-
{
|
|
34
|
-
style: {
|
|
35
|
-
paddingTop: "4px",
|
|
36
|
-
paddingLeft: "4px",
|
|
37
|
-
// enable the items in the grid to grow in width to use up excess space
|
|
38
|
-
flexGrow: 1,
|
|
39
|
-
// make the width of each item 1/3rd of the width overall, i.e. 3 columns
|
|
40
|
-
flexBasis: "33.3333%",
|
|
41
|
-
// include the padding / margin / border in the width
|
|
42
|
-
boxSizing: "border-box"
|
|
43
|
-
},
|
|
44
|
-
children: /* @__PURE__ */ jsxs(
|
|
45
|
-
"div",
|
|
46
|
-
{
|
|
47
|
-
style: { cursor: "pointer", height: "100%", width: "100%" },
|
|
48
|
-
onClick: isTouchDevice ? void 0 : () => onClick(hash),
|
|
49
|
-
onTouchStart: isTouchDevice ? () => onClick(hash) : void 0,
|
|
50
|
-
children: [
|
|
51
|
-
/* @__PURE__ */ jsx("div", { style: { border: 1, borderColor: theme.palette.grey[300] }, children: /* @__PURE__ */ jsx(
|
|
52
|
-
"img",
|
|
53
|
-
{
|
|
54
|
-
style: {
|
|
55
|
-
width: "100%",
|
|
56
|
-
// image should be full width / height of the item
|
|
57
|
-
backgroundColor: theme.palette.grey[300],
|
|
58
|
-
// colour of the bands when letterboxing and image
|
|
59
|
-
opacity: solution.includes(hash) && isTouchDevice ? "50%" : "100%",
|
|
60
|
-
// iphone workaround
|
|
61
|
-
display: "block",
|
|
62
|
-
// removes whitespace below imgs
|
|
63
|
-
objectFit: "contain",
|
|
64
|
-
// contain the entire image in the img tag
|
|
65
|
-
aspectRatio: "1/1",
|
|
66
|
-
// force AR to be 1, letterboxing images with different aspect ratios
|
|
67
|
-
height: "auto"
|
|
68
|
-
// make the img tag responsive to its container
|
|
69
|
-
},
|
|
70
|
-
src: item.data,
|
|
71
|
-
alt: `Captcha image ${index + 1}`
|
|
72
|
-
}
|
|
73
|
-
) }),
|
|
74
|
-
/* @__PURE__ */ jsx(
|
|
75
|
-
"div",
|
|
76
|
-
{
|
|
77
|
-
style: {
|
|
78
|
-
// relative to where the element _should_ be positioned
|
|
79
|
-
position: "relative",
|
|
80
|
-
// make the overlay the full height/width of an item
|
|
81
|
-
width: "100%",
|
|
82
|
-
height: "100%",
|
|
83
|
-
// shift it up 100% to overlay the item element
|
|
84
|
-
top: "-100%",
|
|
85
|
-
visibility: solution.includes(hash) ? "visible" : "hidden",
|
|
86
|
-
// transition on opacity upon (de)selection
|
|
87
|
-
transition: "opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
88
|
-
opacity: 1
|
|
89
|
-
},
|
|
90
|
-
children: /* @__PURE__ */ jsx(
|
|
91
|
-
"div",
|
|
92
|
-
{
|
|
93
|
-
style: {
|
|
94
|
-
// make the overlay absolute positioned compare to its container
|
|
95
|
-
position: "absolute",
|
|
96
|
-
// spread across 100% width/height of the item box
|
|
97
|
-
top: 0,
|
|
98
|
-
left: 0,
|
|
99
|
-
bottom: 0,
|
|
100
|
-
right: 0,
|
|
101
|
-
height: "100%",
|
|
102
|
-
width: "100%",
|
|
103
|
-
// display overlays in center
|
|
104
|
-
display: "flex",
|
|
105
|
-
alignItems: "center",
|
|
106
|
-
justifyContent: "center",
|
|
107
|
-
// make bg half opacity, i.e. shadowing the item's img
|
|
108
|
-
backgroundColor: "rgba(0,0,0,0.5)"
|
|
109
|
-
},
|
|
110
|
-
children: /* @__PURE__ */ jsx(
|
|
111
|
-
"svg",
|
|
112
|
-
{
|
|
113
|
-
style: {
|
|
114
|
-
backgroundColor: "transparent",
|
|
115
|
-
// img must be displayed as block otherwise gets a bottom whitespace border
|
|
116
|
-
display: "block",
|
|
117
|
-
// how big the overlay icon is
|
|
118
|
-
width: "35%",
|
|
119
|
-
height: "35%",
|
|
120
|
-
transition: "fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
|
|
121
|
-
userSelect: "none",
|
|
122
|
-
fill: "currentcolor"
|
|
123
|
-
},
|
|
124
|
-
focusable: "false",
|
|
125
|
-
color: "#fff",
|
|
126
|
-
"aria-hidden": "true",
|
|
127
|
-
viewBox: "0 0 24 24",
|
|
128
|
-
"data-testid": "CheckIcon",
|
|
129
|
-
children: /* @__PURE__ */ jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
|
|
130
|
-
}
|
|
131
|
-
)
|
|
132
|
-
}
|
|
133
|
-
)
|
|
134
|
-
}
|
|
135
|
-
)
|
|
136
|
-
]
|
|
137
|
-
}
|
|
138
|
-
)
|
|
139
|
-
},
|
|
140
|
-
index
|
|
141
|
-
);
|
|
142
|
-
})
|
|
6
|
+
if (!item.hash) {
|
|
7
|
+
throw new ProsopoDatasetError('CAPTCHA.MISSING_ITEM_HASH', { context: { item } });
|
|
143
8
|
}
|
|
144
|
-
|
|
9
|
+
return item.hash;
|
|
145
10
|
};
|
|
146
|
-
export {
|
|
147
|
-
|
|
11
|
+
export const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
|
|
12
|
+
const items = challenge.captcha.items;
|
|
13
|
+
const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor]);
|
|
14
|
+
const isTouchDevice = 'ontouchstart' in window;
|
|
15
|
+
return (_jsx("div", { style: {
|
|
16
|
+
paddingRight: 0.5,
|
|
17
|
+
paddingBottom: 0.5,
|
|
18
|
+
width: '100%',
|
|
19
|
+
height: '100%',
|
|
20
|
+
display: 'flex',
|
|
21
|
+
flexDirection: 'row',
|
|
22
|
+
flexWrap: 'wrap',
|
|
23
|
+
}, children: items.map((item, index) => {
|
|
24
|
+
const hash = getHash(item);
|
|
25
|
+
return (_jsx("div", { style: {
|
|
26
|
+
paddingTop: '4px',
|
|
27
|
+
paddingLeft: '4px',
|
|
28
|
+
flexGrow: 1,
|
|
29
|
+
flexBasis: '33.3333%',
|
|
30
|
+
boxSizing: 'border-box',
|
|
31
|
+
}, children: _jsxs("div", { style: { cursor: 'pointer', height: '100%', width: '100%' }, onClick: isTouchDevice ? undefined : () => onClick(hash), onTouchStart: isTouchDevice ? () => onClick(hash) : undefined, children: [_jsx("div", { style: { border: 1, borderColor: theme.palette.grey[300] }, children: _jsx("img", { style: {
|
|
32
|
+
width: '100%',
|
|
33
|
+
backgroundColor: theme.palette.grey[300],
|
|
34
|
+
opacity: solution.includes(hash) && isTouchDevice ? '50%' : '100%',
|
|
35
|
+
display: 'block',
|
|
36
|
+
objectFit: 'contain',
|
|
37
|
+
aspectRatio: '1/1',
|
|
38
|
+
height: 'auto',
|
|
39
|
+
}, src: item.data, alt: `Captcha image ${index + 1}` }) }), _jsx("div", { style: {
|
|
40
|
+
position: 'relative',
|
|
41
|
+
width: '100%',
|
|
42
|
+
height: '100%',
|
|
43
|
+
top: '-100%',
|
|
44
|
+
visibility: solution.includes(hash) ? 'visible' : 'hidden',
|
|
45
|
+
transition: 'opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
|
|
46
|
+
opacity: 1,
|
|
47
|
+
}, children: _jsx("div", { style: {
|
|
48
|
+
position: 'absolute',
|
|
49
|
+
top: 0,
|
|
50
|
+
left: 0,
|
|
51
|
+
bottom: 0,
|
|
52
|
+
right: 0,
|
|
53
|
+
height: '100%',
|
|
54
|
+
width: '100%',
|
|
55
|
+
display: 'flex',
|
|
56
|
+
alignItems: 'center',
|
|
57
|
+
justifyContent: 'center',
|
|
58
|
+
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
59
|
+
}, children: _jsx("svg", { style: {
|
|
60
|
+
backgroundColor: 'transparent',
|
|
61
|
+
display: 'block',
|
|
62
|
+
width: '35%',
|
|
63
|
+
height: '35%',
|
|
64
|
+
transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
|
|
65
|
+
userSelect: 'none',
|
|
66
|
+
fill: 'currentcolor',
|
|
67
|
+
}, focusable: "false", color: "#fff", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "CheckIcon", children: _jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) }) }) })] }) }, index));
|
|
68
|
+
}) }));
|
|
148
69
|
};
|
|
70
|
+
//# sourceMappingURL=CaptchaWidget.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CaptchaWidget.js","sourceRoot":"","sources":["../../src/components/CaptchaWidget.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React, { ButtonHTMLAttributes } from 'react';
|
|
2
|
+
interface CheckboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
|
+
themeColor: 'light' | 'dark';
|
|
4
|
+
checked: boolean;
|
|
5
|
+
onChange: () => void;
|
|
6
|
+
}
|
|
7
|
+
declare const Checkbox: React.FC<CheckboxProps>;
|
|
8
|
+
export default Checkbox;
|
|
9
|
+
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAoC,MAAM,OAAO,CAAA;AAErF,UAAU,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACnE,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACvB;AAyBD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8BrC,CAAA;AACD,eAAe,QAAQ,CAAA"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import { css } from
|
|
3
|
-
import {
|
|
4
|
-
import { useMemo, useState } from
|
|
5
|
-
const checkboxBefore = css`{
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { css } from '@emotion/react';
|
|
3
|
+
import { darkTheme, lightTheme } from './theme.js';
|
|
4
|
+
import { useMemo, useState } from 'react';
|
|
5
|
+
const checkboxBefore = css `{
|
|
6
6
|
&:before {
|
|
7
7
|
content: '""';
|
|
8
8
|
position: absolute;
|
|
@@ -11,47 +11,33 @@ const checkboxBefore = css`{
|
|
|
11
11
|
}
|
|
12
12
|
}`;
|
|
13
13
|
const baseStyle = {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
14
|
+
width: '2.2em',
|
|
15
|
+
height: '2.2em',
|
|
16
|
+
top: 'auto',
|
|
17
|
+
left: 'auto',
|
|
18
|
+
opacity: '1',
|
|
19
|
+
borderRadius: '12.5%',
|
|
20
|
+
appearance: 'none',
|
|
21
|
+
cursor: 'pointer',
|
|
22
|
+
margin: '0',
|
|
23
|
+
borderStyle: 'solid',
|
|
24
|
+
borderWidth: '1px',
|
|
25
25
|
};
|
|
26
26
|
const Checkbox = ({ themeColor, onChange, checked }) => {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
};
|
|
32
|
-
const [hover, setHover] = useState(false);
|
|
33
|
-
const checkboxStyle = useMemo(() => {
|
|
34
|
-
return {
|
|
35
|
-
...checkboxStyleBase,
|
|
36
|
-
borderColor: hover ? theme.palette.background.contrastText : theme.palette.grey[400],
|
|
37
|
-
appearance: checked ? "auto" : "none"
|
|
27
|
+
const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor]);
|
|
28
|
+
const checkboxStyleBase = {
|
|
29
|
+
...baseStyle,
|
|
30
|
+
border: `1px solid ${theme.palette.background.contrastText}`,
|
|
38
31
|
};
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
"aria-haspopup": "true",
|
|
49
|
-
onChange,
|
|
50
|
-
checked,
|
|
51
|
-
style: checkboxStyle
|
|
52
|
-
}
|
|
53
|
-
);
|
|
54
|
-
};
|
|
55
|
-
export {
|
|
56
|
-
Checkbox as default
|
|
32
|
+
const [hover, setHover] = useState(false);
|
|
33
|
+
const checkboxStyle = useMemo(() => {
|
|
34
|
+
return {
|
|
35
|
+
...checkboxStyleBase,
|
|
36
|
+
borderColor: hover ? theme.palette.background.contrastText : theme.palette.grey[400],
|
|
37
|
+
appearance: checked ? 'auto' : 'none',
|
|
38
|
+
};
|
|
39
|
+
}, [hover, theme, checked]);
|
|
40
|
+
return (_jsx("input", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), css: checkboxBefore, type: 'checkbox', "aria-live": 'assertive', "aria-haspopup": 'true', onChange: onChange, checked: checked, style: checkboxStyle }));
|
|
57
41
|
};
|
|
42
|
+
export default Checkbox;
|
|
43
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAc,EAAuC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAQrF,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;EAOxB,CAAA;AAEF,MAAM,SAAS,GAAkB;IAC7B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;IACf,GAAG,EAAE,MAAM;IACX,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,GAAG;IACZ,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,GAAG;IACX,WAAW,EAAE,OAAO;IACpB,WAAW,EAAE,KAAK;CACrB,CAAA;AAED,MAAM,QAAQ,GAA4B,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAiB,EAAE,EAAE;IAC3F,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAC5F,MAAM,iBAAiB,GAAkB;QACrC,GAAG,SAAS;QACZ,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY,EAAE;KAC/D,CAAA;IAED,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEzC,MAAM,aAAa,GAAkB,OAAO,CAAC,GAAG,EAAE;QAC9C,OAAO;YACH,GAAG,iBAAiB;YACpB,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;YACpF,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACxC,CAAA;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAA;IAE3B,OAAO,CACH,gBACI,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAClC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EACnC,GAAG,EAAE,cAAc,EACnB,IAAI,EAAE,UAAU,eACL,WAAW,mBACP,MAAM,EACrB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,aAAa,GACtB,CACL,CAAA;AACL,CAAC,CAAA;AACD,eAAe,QAAQ,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const ExtensionAccountSelect: ({ value, dappName, onChange, }: {
|
|
2
|
+
value?: string | undefined;
|
|
3
|
+
dappName: string;
|
|
4
|
+
onChange: (value: string) => void;
|
|
5
|
+
}) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default ExtensionAccountSelect;
|
|
7
|
+
//# sourceMappingURL=ExtensionAccountSelect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExtensionAccountSelect.d.ts","sourceRoot":"","sources":["../../src/components/ExtensionAccountSelect.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,sBAAsB;;cAMrB,MAAM;sBACE,MAAM,KAAK,IAAI;sDAsCpC,CAAA;AAED,eAAe,sBAAsB,CAAA"}
|
|
@@ -1,48 +1,31 @@
|
|
|
1
|
-
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { useTranslation } from
|
|
4
|
-
import {
|
|
5
|
-
const ExtensionAccountSelect = ({
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
const account2 = accounts.find((a) => a.address === value2) || null;
|
|
30
|
-
if (account2) {
|
|
31
|
-
console.log("Selected account:", value2);
|
|
32
|
-
onChange(account2.address);
|
|
33
|
-
} else {
|
|
34
|
-
console.log("Deselected account");
|
|
35
|
-
onChange("");
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
value: accounts.length > 0 && account ? account.address : void 0,
|
|
39
|
-
style: { width: "550px" },
|
|
40
|
-
children: accounts.map(({ address, meta: { name } }) => /* @__PURE__ */ jsx("option", { value: address, children: name }))
|
|
41
|
-
}
|
|
42
|
-
)
|
|
43
|
-
);
|
|
44
|
-
};
|
|
45
|
-
export {
|
|
46
|
-
ExtensionAccountSelect,
|
|
47
|
-
ExtensionAccountSelect as default
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
import { useTranslation } from '@prosopo/common';
|
|
4
|
+
import { web3AccountsSubscribe, web3Enable } from '@polkadot/extension-dapp';
|
|
5
|
+
export const ExtensionAccountSelect = ({ value, dappName, onChange, }) => {
|
|
6
|
+
const { t } = useTranslation();
|
|
7
|
+
const [accounts, setAccounts] = useState([]);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
const prom = web3Enable(dappName).then(() => {
|
|
10
|
+
return web3AccountsSubscribe(setAccounts);
|
|
11
|
+
});
|
|
12
|
+
return () => {
|
|
13
|
+
prom.then((unsub) => unsub());
|
|
14
|
+
};
|
|
15
|
+
}, []);
|
|
16
|
+
const account = accounts.find((a) => a.address === value) || null;
|
|
17
|
+
return (_jsx("select", { id: "select-account", onChange: (e) => {
|
|
18
|
+
const value = e.target.value;
|
|
19
|
+
const account = accounts.find((a) => a.address === value) || null;
|
|
20
|
+
if (account) {
|
|
21
|
+
console.log('Selected account:', value);
|
|
22
|
+
onChange(account.address);
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
console.log('Deselected account');
|
|
26
|
+
onChange('');
|
|
27
|
+
}
|
|
28
|
+
}, value: accounts.length > 0 && account ? account.address : undefined, style: { width: '550px' }, children: accounts.map(({ address, meta: { name } }) => (_jsx("option", { value: address, children: name }))) }));
|
|
48
29
|
};
|
|
30
|
+
export default ExtensionAccountSelect;
|
|
31
|
+
//# sourceMappingURL=ExtensionAccountSelect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExtensionAccountSelect.js","sourceRoot":"","sources":["../../src/components/ExtensionAccountSelect.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE5E,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,QAAQ,GAKX,EAAE,EAAE;IACD,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA4B,EAAE,CAAC,CAAA;IACvE,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,IAAI,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YACxC,OAAO,qBAAqB,CAAC,WAAW,CAAC,CAAA;QAC7C,CAAC,CAAC,CAAA;QACF,OAAO,GAAG,EAAE;YACR,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,CAAA;QACjC,CAAC,CAAA;IACL,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,OAAO,GAAmC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,KAAK,CAAC,IAAI,IAAI,CAAA;IAEjG,OAAO,CAEH,iBACI,EAAE,EAAC,gBAAgB,EACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACZ,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;YAC5B,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,KAAK,KAAK,CAAC,IAAI,IAAI,CAAA;YACjE,IAAI,OAAO,EAAE;gBACT,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAA;gBACvC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;aAC5B;iBAAM;gBACH,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAA;gBACjC,QAAQ,CAAC,EAAE,CAAC,CAAA;aACf;QACL,CAAC,EACD,KAAK,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACnE,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,YAExB,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,CAC3C,iBAAQ,KAAK,EAAE,OAAO,YAAG,IAAI,GAAU,CAC1C,CAAC,GACG,CACZ,CAAA;AACL,CAAC,CAAA;AAED,eAAe,sBAAsB,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export interface LoadingSpinnerComponentProps {
|
|
2
|
+
themeColor: 'light' | 'dark';
|
|
3
|
+
}
|
|
4
|
+
export declare const LoadingSpinner: ({ themeColor }: LoadingSpinnerComponentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
5
|
+
export default LoadingSpinner;
|
|
6
|
+
//# sourceMappingURL=LoadingSpinner.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../src/components/LoadingSpinner.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,4BAA4B;IACzC,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;CAC/B;AAED,eAAO,MAAM,cAAc,mBAAoB,4BAA4B,qDAqB1E,CAAA;AAED,eAAe,cAAc,CAAA"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { useMemo } from
|
|
4
|
-
import styled from
|
|
5
|
-
const LoadingSpinner = ({ themeColor }) => {
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { darkTheme, lightTheme } from './theme.js';
|
|
3
|
+
import { useMemo } from 'react';
|
|
4
|
+
import styled from '@emotion/styled';
|
|
5
|
+
export const LoadingSpinner = ({ themeColor }) => {
|
|
6
|
+
const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor]);
|
|
7
|
+
const StyledDiv = styled.div `
|
|
8
8
|
width: 2em;
|
|
9
9
|
height: 2em;
|
|
10
10
|
border: 4px solid ${theme.palette.background.contrastText};
|
|
@@ -22,9 +22,7 @@ const LoadingSpinner = ({ themeColor }) => {
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
`;
|
|
25
|
-
|
|
26
|
-
};
|
|
27
|
-
export {
|
|
28
|
-
LoadingSpinner,
|
|
29
|
-
LoadingSpinner as default
|
|
25
|
+
return _jsx(StyledDiv, {});
|
|
30
26
|
};
|
|
27
|
+
export default LoadingSpinner;
|
|
28
|
+
//# sourceMappingURL=LoadingSpinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../src/components/LoadingSpinner.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAMpC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,UAAU,EAAgC,EAAE,EAAE;IAC3E,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAC5F,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;4BAGJ,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY;;;;;;;;;;;;;;KAc5D,CAAA;IACD,OAAO,KAAC,SAAS,KAAa,CAAA;AAClC,CAAC,CAAA;AAED,eAAe,cAAc,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type ModalProps = {
|
|
3
|
+
show: boolean;
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
};
|
|
6
|
+
declare const ModalComponent: React.MemoExoticComponent<(props: ModalProps, nextProps: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
|
|
7
|
+
export default ModalComponent;
|
|
8
|
+
//# sourceMappingURL=Modal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,KAAK,UAAU,GAAG;IACd,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,CAAA;AAED,QAAA,MAAM,cAAc,oCAAsB,UAAU,aAAa,UAAU,sDA2CzE,CAAA;AAEF,eAAe,cAAc,CAAA"}
|
package/dist/components/Modal.js
CHANGED
|
@@ -1,18 +1,38 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import React from "react";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import React from 'react';
|
|
4
3
|
const ModalComponent = React.memo((props, nextProps) => {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
4
|
+
const { show, children } = props;
|
|
5
|
+
console.log('rendering modal with show: ', show);
|
|
6
|
+
const display = show ? 'block' : 'none';
|
|
7
|
+
const ModalOuterDivCss = {
|
|
8
|
+
position: 'fixed',
|
|
9
|
+
zIndex: 2147483646,
|
|
10
|
+
inset: 0,
|
|
11
|
+
display,
|
|
12
|
+
};
|
|
13
|
+
const ModalBackgroundCSS = {
|
|
14
|
+
position: 'fixed',
|
|
15
|
+
display: 'flex',
|
|
16
|
+
alignItems: 'center',
|
|
17
|
+
justifyContent: 'center',
|
|
18
|
+
right: 0,
|
|
19
|
+
bottom: 0,
|
|
20
|
+
top: 0,
|
|
21
|
+
left: 0,
|
|
22
|
+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
23
|
+
zIndex: -1,
|
|
24
|
+
};
|
|
25
|
+
const ModalInnerDivCSS = {
|
|
26
|
+
position: 'absolute',
|
|
27
|
+
top: '50%',
|
|
28
|
+
left: '50%',
|
|
29
|
+
transform: 'translate(-50%, -50%)',
|
|
30
|
+
width: '400px',
|
|
31
|
+
backgroundColor: 'rgb(255, 255, 255)',
|
|
32
|
+
border: 'none',
|
|
33
|
+
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,',
|
|
34
|
+
};
|
|
35
|
+
return (_jsxs("div", { className: "modalOuter", style: ModalOuterDivCss, children: [_jsx("div", { className: "modalBackground", style: ModalBackgroundCSS }), _jsx("div", { className: "modalInner", style: ModalInnerDivCSS, children: children })] }));
|
|
15
36
|
});
|
|
16
|
-
export
|
|
17
|
-
|
|
18
|
-
};
|
|
37
|
+
export default ModalComponent;
|
|
38
|
+
//# sourceMappingURL=Modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAM5C,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,KAAiB,EAAE,SAAqB,EAAE,EAAE;IAC3E,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAChC,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,IAAI,CAAC,CAAA;IAChD,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAA;IACvC,MAAM,gBAAgB,GAAkB;QACpC,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,UAAU;QAClB,KAAK,EAAE,CAAC;QACR,OAAO;KACV,CAAA;IAED,MAAM,kBAAkB,GAAkB;QACtC,QAAQ,EAAE,OAAO;QACjB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,eAAe,EAAE,oBAAoB;QACrC,MAAM,EAAE,CAAC,CAAC;KACb,CAAA;IACD,MAAM,gBAAgB,GAAkB;QACpC,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,uBAAuB;QAClC,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,oBAAoB;QACrC,MAAM,EAAE,MAAM;QACd,SAAS,EACL,qHAAqH;KAC5H,CAAA;IAED,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,gBAAgB,aAC/C,cAAK,SAAS,EAAC,iBAAiB,EAAC,KAAK,EAAE,kBAAkB,GAAQ,EAClE,cAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,gBAAgB,YAC9C,QAAQ,GACP,IACJ,CACT,CAAA;AACL,CAAC,CAAC,CAAA;AAEF,eAAe,cAAc,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const ProcaptchaWidget: import("react").LazyExoticComponent<(props: import("./ProcaptchaWidget.js").ProcaptchaProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
|
|
3
|
+
type ProcaptchaProps = React.ComponentProps<typeof ProcaptchaWidget>;
|
|
4
|
+
declare const Procaptcha: (props: ProcaptchaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
5
|
+
export default Procaptcha;
|
|
6
|
+
//# sourceMappingURL=Procaptcha.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Procaptcha.d.ts","sourceRoot":"","sources":["../../src/components/Procaptcha.tsx"],"names":[],"mappings":";AAGA,QAAA,MAAM,gBAAgB,mJAAoD,CAAA;AAC1E,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEpE,QAAA,MAAM,UAAU,UAAW,eAAe,qDAIzC,CAAA;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
-
import { ProcaptchaPlaceholder } from
|
|
3
|
-
import {
|
|
4
|
-
const ProcaptchaWidget = lazy(async () => import(
|
|
5
|
-
const Procaptcha = (props) =>
|
|
6
|
-
export
|
|
7
|
-
|
|
8
|
-
};
|
|
1
|
+
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
import { ProcaptchaPlaceholder } from './CaptchaPlaceholder.js';
|
|
3
|
+
import { Suspense, lazy } from 'react';
|
|
4
|
+
const ProcaptchaWidget = lazy(async () => import('./ProcaptchaWidget.js'));
|
|
5
|
+
const Procaptcha = (props) => (_jsx(Suspense, { fallback: _jsx(ProcaptchaPlaceholder, { darkMode: props.config.theme }), children: _jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks }) }));
|
|
6
|
+
export default Procaptcha;
|
|
7
|
+
//# sourceMappingURL=Procaptcha.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Procaptcha.js","sourceRoot":"","sources":["../../src/components/Procaptcha.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,CAAA;AAG1E,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,CAC3C,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,qBAAqB,IAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,GAAI,YACvE,KAAC,gBAAgB,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAqB,GAChF,CACd,CAAA;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ProcaptchaCallbacks, ProcaptchaConfigOptional } from '@prosopo/procaptcha';
|
|
2
|
+
export interface ProcaptchaProps {
|
|
3
|
+
config: ProcaptchaConfigOptional;
|
|
4
|
+
callbacks?: Partial<ProcaptchaCallbacks>;
|
|
5
|
+
}
|
|
6
|
+
declare const ProcaptchaWidget: (props: ProcaptchaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
7
|
+
export default ProcaptchaWidget;
|
|
8
|
+
//# sourceMappingURL=ProcaptchaWidget.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProcaptchaWidget.d.ts","sourceRoot":"","sources":["../../src/components/ProcaptchaWidget.tsx"],"names":[],"mappings":"AAcA,OAAO,EAIH,mBAAmB,EACnB,wBAAwB,EAK3B,MAAM,qBAAqB,CAAA;AA6C5B,MAAM,WAAW,eAAe;IAE5B,MAAM,EAAE,wBAAwB,CAAA;IAEhC,SAAS,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CAC3C;AA0ED,QAAA,MAAM,gBAAgB,UAAW,eAAe,qDAsI/C,CAAA;AAcD,eAAe,gBAAgB,CAAA"}
|