@evervault/js 2.20.0 → 2.23.0
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/evervault-js.js +340 -14
- package/dist/evervault-js.umd.cjs +1 -1
- package/dist/evervault.d.ts +399 -558
- package/package.json +4 -4
package/dist/evervault-js.js
CHANGED
|
@@ -1,27 +1,353 @@
|
|
|
1
|
+
//#region ../themes/presetConfig.ts
|
|
2
|
+
var e = {
|
|
3
|
+
primary: "--ev-color-primary",
|
|
4
|
+
greyTone: "--ev-grey-tone",
|
|
5
|
+
roundness: "--ev-roundness",
|
|
6
|
+
font: "--ev-font-family"
|
|
7
|
+
};
|
|
8
|
+
function t(t, n) {
|
|
9
|
+
if (!n) return t;
|
|
10
|
+
let { selectors: r } = n, i = { ...t[":root"] };
|
|
11
|
+
for (let [t, r] of Object.entries(e)) {
|
|
12
|
+
let e = n[t];
|
|
13
|
+
e && (i[r] = e);
|
|
14
|
+
}
|
|
15
|
+
return {
|
|
16
|
+
...t,
|
|
17
|
+
...r ?? {},
|
|
18
|
+
":root": {
|
|
19
|
+
...i,
|
|
20
|
+
...r?.[":root"] ?? {}
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
function n(t, n) {
|
|
25
|
+
let r = typeof t == "function" || t != null && ("styles" in t || "fonts" in t || "fontFaces" in t);
|
|
26
|
+
return r && typeof t == "object" && [...Object.keys(e), "selectors"].some((e) => e in t) && console.warn("Evervault: the first argument looks like a theme but also has preset config keys, which are ignored. Pass the config as the second argument, for example clean(theme, { primary })."), r || t == null ? [t ?? void 0, n] : [void 0, t];
|
|
27
|
+
}
|
|
28
|
+
//#endregion
|
|
29
|
+
//#region ../themes/clean.ts
|
|
30
|
+
function r(e, r) {
|
|
31
|
+
let [i, a] = n(e, r);
|
|
32
|
+
return (e) => ({ styles: {
|
|
33
|
+
...t({
|
|
34
|
+
":root": { "--icon-offset": "1.9rem" },
|
|
35
|
+
body: {
|
|
36
|
+
paddingBottom: 2,
|
|
37
|
+
fontFamily: "var(--ev-font-family, inherit)"
|
|
38
|
+
},
|
|
39
|
+
label: {
|
|
40
|
+
fontSize: 14,
|
|
41
|
+
marginBottom: 4,
|
|
42
|
+
display: "block",
|
|
43
|
+
color: "#0a2540"
|
|
44
|
+
},
|
|
45
|
+
input: {
|
|
46
|
+
height: 40,
|
|
47
|
+
fontSize: 16,
|
|
48
|
+
borderRadius: "var(--ev-roundness, 6px)",
|
|
49
|
+
color: "#0a2540",
|
|
50
|
+
padding: "0 12px",
|
|
51
|
+
backgroundColor: "#fff",
|
|
52
|
+
border: "1px solid #e6ebf1",
|
|
53
|
+
boxShadow: "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
|
|
54
|
+
"&::placeholder": { color: "var(--ev-grey-tone, #717f96)" },
|
|
55
|
+
"&:focus": {
|
|
56
|
+
outline: "none",
|
|
57
|
+
borderColor: "var(--ev-color-primary, #63e)"
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
textarea: {
|
|
61
|
+
height: 40,
|
|
62
|
+
fontSize: 16,
|
|
63
|
+
borderRadius: "var(--ev-roundness, 6px)",
|
|
64
|
+
color: "#0a2540",
|
|
65
|
+
padding: "6px 12px",
|
|
66
|
+
backgroundColor: "#fff",
|
|
67
|
+
border: "1px solid #e6ebf1",
|
|
68
|
+
boxShadow: "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
|
|
69
|
+
"&::placeholder": { color: "var(--ev-grey-tone, #717f96)" },
|
|
70
|
+
"&:focus": {
|
|
71
|
+
outline: "none",
|
|
72
|
+
borderColor: "var(--ev-color-primary, #63e)"
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
select: {
|
|
76
|
+
height: 40,
|
|
77
|
+
fontSize: 16,
|
|
78
|
+
borderRadius: "var(--ev-roundness, 6px)",
|
|
79
|
+
color: "#0a2540",
|
|
80
|
+
padding: "6px 12px",
|
|
81
|
+
backgroundColor: "#fff",
|
|
82
|
+
border: "1px solid #e6ebf1"
|
|
83
|
+
},
|
|
84
|
+
button: {
|
|
85
|
+
fontSize: 16,
|
|
86
|
+
height: 40,
|
|
87
|
+
border: "1px solid #e6ebf1",
|
|
88
|
+
padding: "0 12px"
|
|
89
|
+
},
|
|
90
|
+
".field[ev-valid=false] input": {
|
|
91
|
+
color: "#df1c41",
|
|
92
|
+
borderColor: "#df1c41"
|
|
93
|
+
},
|
|
94
|
+
".error": {
|
|
95
|
+
color: "#df1c41",
|
|
96
|
+
fontSize: "0.75rem",
|
|
97
|
+
padding: "0.25rem 0"
|
|
98
|
+
},
|
|
99
|
+
"[ev-component=card]": { gap: 16 },
|
|
100
|
+
"[ev-component=pin] input": {
|
|
101
|
+
height: 80,
|
|
102
|
+
fontSize: 20,
|
|
103
|
+
caretColor: "transparent"
|
|
104
|
+
},
|
|
105
|
+
"[ev-component=card]:has(.icon)": {
|
|
106
|
+
"& .field[ev-name=number]": { position: "relative" },
|
|
107
|
+
"& .icon": {
|
|
108
|
+
left: 10,
|
|
109
|
+
height: 20,
|
|
110
|
+
position: "absolute",
|
|
111
|
+
top: "var(--icon-offset)"
|
|
112
|
+
},
|
|
113
|
+
"& .field[ev-name=number] input": { paddingLeft: 48 }
|
|
114
|
+
}
|
|
115
|
+
}, a),
|
|
116
|
+
...i ? e.extend(i) : {}
|
|
117
|
+
} });
|
|
118
|
+
}
|
|
119
|
+
//#endregion
|
|
120
|
+
//#region ../themes/material.ts
|
|
121
|
+
function i(e, r) {
|
|
122
|
+
let [i, a] = n(e, r);
|
|
123
|
+
return (e) => ({ styles: {
|
|
124
|
+
...t({
|
|
125
|
+
body: {
|
|
126
|
+
paddingTop: 4,
|
|
127
|
+
fontFamily: "var(--ev-font-family, inherit)"
|
|
128
|
+
},
|
|
129
|
+
".field": { position: "relative" },
|
|
130
|
+
label: {
|
|
131
|
+
top: 10,
|
|
132
|
+
left: 8,
|
|
133
|
+
zIndex: 3,
|
|
134
|
+
fontSize: 14,
|
|
135
|
+
lineHeight: 1,
|
|
136
|
+
height: "20px",
|
|
137
|
+
display: "flex",
|
|
138
|
+
color: "var(--ev-grey-tone, #717f96)",
|
|
139
|
+
padding: "0 4px",
|
|
140
|
+
alignItems: "center",
|
|
141
|
+
position: "absolute",
|
|
142
|
+
pointerEvents: "none",
|
|
143
|
+
transformOrigin: "center left",
|
|
144
|
+
transition: "transform 150ms, background 150ms"
|
|
145
|
+
},
|
|
146
|
+
input: {
|
|
147
|
+
height: 40,
|
|
148
|
+
fontSize: 16,
|
|
149
|
+
borderRadius: "var(--ev-roundness, 6px)",
|
|
150
|
+
color: "#0a2540",
|
|
151
|
+
padding: "0 12px",
|
|
152
|
+
backgroundColor: "#fff",
|
|
153
|
+
border: "1px solid #e6ebf1",
|
|
154
|
+
"&::placeholder": { color: "transparent" },
|
|
155
|
+
"&:focus": {
|
|
156
|
+
outline: "none",
|
|
157
|
+
borderColor: "var(--ev-color-primary, #63e)"
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
textarea: {
|
|
161
|
+
height: 40,
|
|
162
|
+
fontSize: 16,
|
|
163
|
+
borderRadius: "var(--ev-roundness, 6px)",
|
|
164
|
+
color: "#0a2540",
|
|
165
|
+
padding: "6 12px",
|
|
166
|
+
backgroundColor: "#fff",
|
|
167
|
+
border: "1px solid #e6ebf1",
|
|
168
|
+
"&::placeholder": { color: "transparent" },
|
|
169
|
+
"&:focus": {
|
|
170
|
+
outline: "none",
|
|
171
|
+
borderColor: "var(--ev-color-primary, #63e)"
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
".field[ev-valid=false] input": {
|
|
175
|
+
color: "#df1c41",
|
|
176
|
+
borderColor: "#df1c41"
|
|
177
|
+
},
|
|
178
|
+
".field:focus-within label, .field:not([ev-has-value=false]) label": {
|
|
179
|
+
background: "white",
|
|
180
|
+
transform: "translateY(-100%) scale(0.8)"
|
|
181
|
+
},
|
|
182
|
+
".error": {
|
|
183
|
+
color: "#df1c41",
|
|
184
|
+
fontSize: "0.75rem",
|
|
185
|
+
padding: "0.25rem 0"
|
|
186
|
+
},
|
|
187
|
+
".field:not([ev-valid=false]):focus-within label": { color: "var(--ev-color-primary, #63e)" },
|
|
188
|
+
".field[ev-valid=false] label": { color: "#df1c41" },
|
|
189
|
+
".field[ev-has-value=true][ev-valid=true]:not(:focus-within) label": { color: "#0a2540" },
|
|
190
|
+
"[ev-component=card]": { gap: 16 },
|
|
191
|
+
"[ev-component=card]:has(.icon)": {
|
|
192
|
+
"& .icon": {
|
|
193
|
+
left: 10,
|
|
194
|
+
height: 20,
|
|
195
|
+
position: "absolute",
|
|
196
|
+
top: 10,
|
|
197
|
+
opacity: 0
|
|
198
|
+
},
|
|
199
|
+
"& .field[ev-name=number]:focus-within, & .field[ev-name=number]:not([ev-has-value=false])": {
|
|
200
|
+
"& .icon": { opacity: 1 },
|
|
201
|
+
"& input": { paddingLeft: 45 }
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}, a),
|
|
205
|
+
...i ? e.extend(i) : {}
|
|
206
|
+
} });
|
|
207
|
+
}
|
|
208
|
+
//#endregion
|
|
209
|
+
//#region ../themes/minimal.ts
|
|
210
|
+
function a(e, r) {
|
|
211
|
+
let [i, a] = n(e, r);
|
|
212
|
+
return (e) => ({ styles: {
|
|
213
|
+
...t({
|
|
214
|
+
":root": { "--icon-offset": "34px" },
|
|
215
|
+
body: {
|
|
216
|
+
paddingBottom: 2,
|
|
217
|
+
fontFamily: "var(--ev-font-family, inherit)"
|
|
218
|
+
},
|
|
219
|
+
label: {
|
|
220
|
+
fontSize: 14,
|
|
221
|
+
marginBottom: "0.5rem",
|
|
222
|
+
color: "#0a2540",
|
|
223
|
+
display: "none"
|
|
224
|
+
},
|
|
225
|
+
".field:first-child label": { display: "block" },
|
|
226
|
+
"fieldset[ev-valid=false]": { paddingBottom: "1.5rem" },
|
|
227
|
+
input: {
|
|
228
|
+
height: 40,
|
|
229
|
+
fontSize: 16,
|
|
230
|
+
borderRadius: 0,
|
|
231
|
+
color: "#0a2540",
|
|
232
|
+
padding: "0 12px",
|
|
233
|
+
backgroundColor: "#fff",
|
|
234
|
+
border: "1px solid #e6ebf1",
|
|
235
|
+
boxShadow: "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
|
|
236
|
+
"&::placeholder": { color: "var(--ev-grey-tone, #717f96)" },
|
|
237
|
+
"&:focus": {
|
|
238
|
+
outline: "none",
|
|
239
|
+
borderColor: "var(--ev-color-primary, #63e)"
|
|
240
|
+
}
|
|
241
|
+
},
|
|
242
|
+
textarea: {
|
|
243
|
+
height: 40,
|
|
244
|
+
fontSize: 16,
|
|
245
|
+
borderRadius: 0,
|
|
246
|
+
color: "#0a2540",
|
|
247
|
+
padding: "6 12px",
|
|
248
|
+
backgroundColor: "#fff",
|
|
249
|
+
border: "1px solid #e6ebf1",
|
|
250
|
+
boxShadow: "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
|
|
251
|
+
"&::placeholder": { color: "var(--ev-grey-tone, #717f96)" },
|
|
252
|
+
"&:focus": {
|
|
253
|
+
outline: "none",
|
|
254
|
+
borderColor: "var(--ev-color-primary, #63e)"
|
|
255
|
+
}
|
|
256
|
+
},
|
|
257
|
+
".field[ev-valid=false] input": {
|
|
258
|
+
color: "#df1c41",
|
|
259
|
+
borderColor: "#df1c41"
|
|
260
|
+
},
|
|
261
|
+
".error": {
|
|
262
|
+
color: "#df1c41",
|
|
263
|
+
fontSize: "0.75rem",
|
|
264
|
+
padding: "0.25rem 0",
|
|
265
|
+
position: "absolute",
|
|
266
|
+
left: 0,
|
|
267
|
+
bottom: 0,
|
|
268
|
+
display: "none"
|
|
269
|
+
},
|
|
270
|
+
".field[ev-valid=false]": { zIndex: 4 },
|
|
271
|
+
".field:focus-within": { zIndex: 5 },
|
|
272
|
+
"[ev-component=card]": {
|
|
273
|
+
gap: 0,
|
|
274
|
+
"& .field[ev-valid=false]:nth-child(1) .error": { display: "block" },
|
|
275
|
+
"& [ev-valid=true]:nth-child(1) + [ev-valid=false] .error": { display: "block" },
|
|
276
|
+
"& [ev-valid=true]:nth-child(1) + [ev-valid=true]:nth-child(2) + [ev-valid=false] .error": { display: "block" },
|
|
277
|
+
"& [ev-valid=true]:nth-child(1) + [ev-valid=true]:nth-child(2) + [ev-valid=true]:nth-child(3) + [ev-valid=false] .error": { display: "block" },
|
|
278
|
+
"& .field:not(:last-child)": { marginBottom: "-1px" },
|
|
279
|
+
"& .field:first-child": { "& input": {
|
|
280
|
+
borderTopLeftRadius: "var(--ev-roundness, 6px)",
|
|
281
|
+
borderTopRightRadius: "var(--ev-roundness, 6px)"
|
|
282
|
+
} },
|
|
283
|
+
"& .field:last-child": { "& input": {
|
|
284
|
+
borderBottomRightRadius: "var(--ev-roundness, 6px)",
|
|
285
|
+
borderBottomLeftRadius: "var(--ev-roundness, 6px)"
|
|
286
|
+
} }
|
|
287
|
+
},
|
|
288
|
+
"[ev-component=card][ev-fields*=cvc][ev-fields*=expiry]": {
|
|
289
|
+
"& .field[ev-name=expiry]": { "& input": { borderBottomLeftRadius: "var(--ev-roundness, 6px)" } },
|
|
290
|
+
"& .field[ev-name=cvc]": {
|
|
291
|
+
marginLeft: "-1px",
|
|
292
|
+
"& input": { borderBottomLeftRadius: 0 }
|
|
293
|
+
}
|
|
294
|
+
},
|
|
295
|
+
"[ev-component=pin]": {
|
|
296
|
+
gap: 0,
|
|
297
|
+
"& input": { height: 60 },
|
|
298
|
+
"& .field:not(:first-child)": { marginLeft: "-1px" },
|
|
299
|
+
"& .field:first-child input": {
|
|
300
|
+
borderTopLeftRadius: "var(--ev-roundness, 6px)",
|
|
301
|
+
borderBottomLeftRadius: "var(--ev-roundness, 6px)"
|
|
302
|
+
},
|
|
303
|
+
"& .field:last-child input": {
|
|
304
|
+
borderTopRightRadius: "var(--ev-roundness, 6px)",
|
|
305
|
+
borderBottomRightRadius: "var(--ev-roundness, 6px)"
|
|
306
|
+
}
|
|
307
|
+
},
|
|
308
|
+
"[ev-component=card]:has(.icon)": {
|
|
309
|
+
"& .icon": {
|
|
310
|
+
left: 10,
|
|
311
|
+
height: 20,
|
|
312
|
+
position: "absolute",
|
|
313
|
+
top: "var(--icon-offset)"
|
|
314
|
+
},
|
|
315
|
+
"& .field[ev-name=number] input": { paddingLeft: 48 }
|
|
316
|
+
}
|
|
317
|
+
}, a),
|
|
318
|
+
...i ? e.extend(i) : {}
|
|
319
|
+
} });
|
|
320
|
+
}
|
|
321
|
+
//#endregion
|
|
322
|
+
//#region ../themes/cssVar.ts
|
|
323
|
+
function o(e) {
|
|
324
|
+
return typeof window > "u" ? "" : window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
|
|
325
|
+
}
|
|
326
|
+
//#endregion
|
|
1
327
|
//#region src/index.ts
|
|
2
|
-
var
|
|
3
|
-
async function
|
|
4
|
-
return
|
|
5
|
-
let
|
|
6
|
-
if (
|
|
7
|
-
|
|
328
|
+
var s = null;
|
|
329
|
+
async function c() {
|
|
330
|
+
return s || (s = new Promise((e, t) => {
|
|
331
|
+
let n = document.createElement("script");
|
|
332
|
+
if (n.src = "https://js.evervault.com/v2", n.onload = () => e(), n.onerror = () => {
|
|
333
|
+
s = null, t();
|
|
8
334
|
}, !document.head) throw Error("Expected document.head not to be null. Evervault.js requires a <head> element.");
|
|
9
|
-
document.head.appendChild(
|
|
10
|
-
}),
|
|
335
|
+
document.head.appendChild(n);
|
|
336
|
+
}), s);
|
|
11
337
|
}
|
|
12
|
-
async function
|
|
338
|
+
async function l() {
|
|
13
339
|
if (window.Evervault) return window.Evervault;
|
|
14
340
|
try {
|
|
15
|
-
return await
|
|
341
|
+
return await c(), window.Evervault;
|
|
16
342
|
} catch {
|
|
17
343
|
throw Error("Failed to load Evervault.js");
|
|
18
344
|
}
|
|
19
345
|
}
|
|
20
|
-
async function
|
|
21
|
-
return new (await (
|
|
346
|
+
async function u(e, t, n) {
|
|
347
|
+
return new (await (l()))(e, t, n);
|
|
22
348
|
}
|
|
23
349
|
Promise.resolve().then(() => {
|
|
24
|
-
|
|
350
|
+
l();
|
|
25
351
|
});
|
|
26
352
|
//#endregion
|
|
27
|
-
export { r as loadEvervault };
|
|
353
|
+
export { r as clean, o as cssVar, u as loadEvervault, i as material, a as minimal };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Evervault={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=null;
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Evervault={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={primary:`--ev-color-primary`,greyTone:`--ev-grey-tone`,roundness:`--ev-roundness`,font:`--ev-font-family`};function n(e,n){if(!n)return e;let{selectors:r}=n,i={...e[`:root`]};for(let[e,r]of Object.entries(t)){let t=n[e];t&&(i[r]=t)}return{...e,...r??{},":root":{...i,...r?.[`:root`]??{}}}}function r(e,n){let r=typeof e==`function`||e!=null&&(`styles`in e||`fonts`in e||`fontFaces`in e);return r&&typeof e==`object`&&[...Object.keys(t),`selectors`].some(t=>t in e)&&console.warn(`Evervault: the first argument looks like a theme but also has preset config keys, which are ignored. Pass the config as the second argument, for example clean(theme, { primary }).`),r||e==null?[e??void 0,n]:[void 0,e]}function i(e,t){let[i,a]=r(e,t);return e=>({styles:{...n({":root":{"--icon-offset":`1.9rem`},body:{paddingBottom:2,fontFamily:`var(--ev-font-family, inherit)`},label:{fontSize:14,marginBottom:4,display:`block`,color:`#0a2540`},input:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`0 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,boxShadow:`0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)`,"&::placeholder":{color:`var(--ev-grey-tone, #717f96)`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},textarea:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`6px 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,boxShadow:`0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)`,"&::placeholder":{color:`var(--ev-grey-tone, #717f96)`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},select:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`6px 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`},button:{fontSize:16,height:40,border:`1px solid #e6ebf1`,padding:`0 12px`},".field[ev-valid=false] input":{color:`#df1c41`,borderColor:`#df1c41`},".error":{color:`#df1c41`,fontSize:`0.75rem`,padding:`0.25rem 0`},"[ev-component=card]":{gap:16},"[ev-component=pin] input":{height:80,fontSize:20,caretColor:`transparent`},"[ev-component=card]:has(.icon)":{"& .field[ev-name=number]":{position:`relative`},"& .icon":{left:10,height:20,position:`absolute`,top:`var(--icon-offset)`},"& .field[ev-name=number] input":{paddingLeft:48}}},a),...i?e.extend(i):{}}})}function a(e,t){let[i,a]=r(e,t);return e=>({styles:{...n({body:{paddingTop:4,fontFamily:`var(--ev-font-family, inherit)`},".field":{position:`relative`},label:{top:10,left:8,zIndex:3,fontSize:14,lineHeight:1,height:`20px`,display:`flex`,color:`var(--ev-grey-tone, #717f96)`,padding:`0 4px`,alignItems:`center`,position:`absolute`,pointerEvents:`none`,transformOrigin:`center left`,transition:`transform 150ms, background 150ms`},input:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`0 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,"&::placeholder":{color:`transparent`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},textarea:{height:40,fontSize:16,borderRadius:`var(--ev-roundness, 6px)`,color:`#0a2540`,padding:`6 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,"&::placeholder":{color:`transparent`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},".field[ev-valid=false] input":{color:`#df1c41`,borderColor:`#df1c41`},".field:focus-within label, .field:not([ev-has-value=false]) label":{background:`white`,transform:`translateY(-100%) scale(0.8)`},".error":{color:`#df1c41`,fontSize:`0.75rem`,padding:`0.25rem 0`},".field:not([ev-valid=false]):focus-within label":{color:`var(--ev-color-primary, #63e)`},".field[ev-valid=false] label":{color:`#df1c41`},".field[ev-has-value=true][ev-valid=true]:not(:focus-within) label":{color:`#0a2540`},"[ev-component=card]":{gap:16},"[ev-component=card]:has(.icon)":{"& .icon":{left:10,height:20,position:`absolute`,top:10,opacity:0},"& .field[ev-name=number]:focus-within, & .field[ev-name=number]:not([ev-has-value=false])":{"& .icon":{opacity:1},"& input":{paddingLeft:45}}}},a),...i?e.extend(i):{}}})}function o(e,t){let[i,a]=r(e,t);return e=>({styles:{...n({":root":{"--icon-offset":`34px`},body:{paddingBottom:2,fontFamily:`var(--ev-font-family, inherit)`},label:{fontSize:14,marginBottom:`0.5rem`,color:`#0a2540`,display:`none`},".field:first-child label":{display:`block`},"fieldset[ev-valid=false]":{paddingBottom:`1.5rem`},input:{height:40,fontSize:16,borderRadius:0,color:`#0a2540`,padding:`0 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,boxShadow:`0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)`,"&::placeholder":{color:`var(--ev-grey-tone, #717f96)`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},textarea:{height:40,fontSize:16,borderRadius:0,color:`#0a2540`,padding:`6 12px`,backgroundColor:`#fff`,border:`1px solid #e6ebf1`,boxShadow:`0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)`,"&::placeholder":{color:`var(--ev-grey-tone, #717f96)`},"&:focus":{outline:`none`,borderColor:`var(--ev-color-primary, #63e)`}},".field[ev-valid=false] input":{color:`#df1c41`,borderColor:`#df1c41`},".error":{color:`#df1c41`,fontSize:`0.75rem`,padding:`0.25rem 0`,position:`absolute`,left:0,bottom:0,display:`none`},".field[ev-valid=false]":{zIndex:4},".field:focus-within":{zIndex:5},"[ev-component=card]":{gap:0,"& .field[ev-valid=false]:nth-child(1) .error":{display:`block`},"& [ev-valid=true]:nth-child(1) + [ev-valid=false] .error":{display:`block`},"& [ev-valid=true]:nth-child(1) + [ev-valid=true]:nth-child(2) + [ev-valid=false] .error":{display:`block`},"& [ev-valid=true]:nth-child(1) + [ev-valid=true]:nth-child(2) + [ev-valid=true]:nth-child(3) + [ev-valid=false] .error":{display:`block`},"& .field:not(:last-child)":{marginBottom:`-1px`},"& .field:first-child":{"& input":{borderTopLeftRadius:`var(--ev-roundness, 6px)`,borderTopRightRadius:`var(--ev-roundness, 6px)`}},"& .field:last-child":{"& input":{borderBottomRightRadius:`var(--ev-roundness, 6px)`,borderBottomLeftRadius:`var(--ev-roundness, 6px)`}}},"[ev-component=card][ev-fields*=cvc][ev-fields*=expiry]":{"& .field[ev-name=expiry]":{"& input":{borderBottomLeftRadius:`var(--ev-roundness, 6px)`}},"& .field[ev-name=cvc]":{marginLeft:`-1px`,"& input":{borderBottomLeftRadius:0}}},"[ev-component=pin]":{gap:0,"& input":{height:60},"& .field:not(:first-child)":{marginLeft:`-1px`},"& .field:first-child input":{borderTopLeftRadius:`var(--ev-roundness, 6px)`,borderBottomLeftRadius:`var(--ev-roundness, 6px)`},"& .field:last-child input":{borderTopRightRadius:`var(--ev-roundness, 6px)`,borderBottomRightRadius:`var(--ev-roundness, 6px)`}},"[ev-component=card]:has(.icon)":{"& .icon":{left:10,height:20,position:`absolute`,top:`var(--icon-offset)`},"& .field[ev-name=number] input":{paddingLeft:48}}},a),...i?e.extend(i):{}}})}function s(e){return typeof window>`u`?``:window.getComputedStyle(document.documentElement).getPropertyValue(e).trim()}var c=null;async function l(){return c||(c=new Promise((e,t)=>{let n=document.createElement(`script`);if(n.src=`https://js.evervault.com/v2`,n.onload=()=>e(),n.onerror=()=>{c=null,t()},!document.head)throw Error(`Expected document.head not to be null. Evervault.js requires a <head> element.`);document.head.appendChild(n)}),c)}async function u(){if(window.Evervault)return window.Evervault;try{return await l(),window.Evervault}catch{throw Error(`Failed to load Evervault.js`)}}async function d(e,t,n){return new(await(u()))(e,t,n)}Promise.resolve().then(()=>{u()}),e.clean=i,e.cssVar=s,e.loadEvervault=d,e.material=a,e.minimal=o});
|