@evervault/js 2.22.0 → 2.24.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.
@@ -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-layout=auto][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 e = null;
3
- async function t() {
4
- return e || (e = new Promise((t, n) => {
5
- let r = document.createElement("script");
6
- if (r.src = "https://js.evervault.com/v2", r.onload = () => t(), r.onerror = () => {
7
- e = null, n();
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(r);
10
- }), e);
335
+ document.head.appendChild(n);
336
+ }), s);
11
337
  }
12
- async function n() {
338
+ async function l() {
13
339
  if (window.Evervault) return window.Evervault;
14
340
  try {
15
- return await t(), window.Evervault;
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 r(e, t, r) {
21
- return new (await (n()))(e, t, r);
346
+ async function u(e, t, n) {
347
+ return new (await (l()))(e, t, n);
22
348
  }
23
349
  Promise.resolve().then(() => {
24
- n();
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;async function n(){return t||(t=new Promise((e,n)=>{let r=document.createElement(`script`);if(r.src=`https://js.evervault.com/v2`,r.onload=()=>e(),r.onerror=()=>{t=null,n()},!document.head)throw Error(`Expected document.head not to be null. Evervault.js requires a <head> element.`);document.head.appendChild(r)}),t)}async function r(){if(window.Evervault)return window.Evervault;try{return await n(),window.Evervault}catch{throw Error(`Failed to load Evervault.js`)}}async function i(e,t,n){return new(await(r()))(e,t,n)}Promise.resolve().then(()=>{r()}),e.loadEvervault=i});
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-layout=auto][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});
@@ -1,5 +1,18 @@
1
1
  import { nodeEvents } from 'node:events';
2
2
 
3
+ declare interface AgentToolsConfig {
4
+ enabled: boolean;
5
+ namePrefix?: string;
6
+ productName?: string;
7
+ exposeTo?: string[];
8
+ }
9
+
10
+ declare interface AgentToolsFrameConfig {
11
+ namePrefix: string;
12
+ productName: string;
13
+ exposeTo: string[];
14
+ }
15
+
3
16
  declare class ApplePayButton {
4
17
  #private;
5
18
  client: EvervaultClient;
@@ -242,43 +255,17 @@ declare interface CageKey {
242
255
 
243
256
  declare class Card {
244
257
  #private;
245
- values: CardPayload;
246
258
  constructor(client: EvervaultClient, options?: CardOptions);
247
- get config(): {
248
- theme: ThemeDefinition | undefined;
249
- config: {
250
- icons: boolean | Partial< CardIcons> | undefined;
251
- autoFocus: boolean | undefined;
252
- translations: Partial< CardTranslations> | undefined;
253
- hiddenFields: string;
254
- fields: CardField[] | undefined;
255
- acceptedBrands: CardBrandName[] | undefined;
256
- customBrands: CustomBrand[] | undefined;
257
- defaultValues: {
258
- name?: string;
259
- } | undefined;
260
- autoComplete: {
261
- name?: boolean;
262
- number?: boolean;
263
- expiry?: boolean;
264
- cvc?: boolean;
265
- } | undefined;
266
- autoProgress: boolean | undefined;
267
- redactCVC: boolean | undefined;
268
- allow3DigitAmexCVC: boolean | undefined;
269
- validation: {
270
- name?: {
271
- regex?: RegExp;
272
- };
273
- cvc?: {
274
- optional?: boolean;
275
- };
276
- } | undefined;
277
- };
259
+ get values(): CardPayload;
260
+ get config(): CardHostConfiguration & {
261
+ config: CardFrameConfig;
278
262
  };
279
263
  mount(selector: SelectorType): this;
264
+ preload(selector: SelectorType): this;
265
+ show(): this;
280
266
  update(options?: CardOptions): this;
281
267
  unmount(): this;
268
+ destroy(): this;
282
269
  on<T extends keyof CardEvents>(event: T, callback: CardEvents[T]): () => void;
283
270
  validate(): this;
284
271
  }
@@ -300,6 +287,12 @@ declare type CardBrandName =
300
287
  | "uatp"
301
288
  | "rupay";
302
289
 
290
+ declare interface CardDefaultValues {
291
+ name?: string;
292
+ // Each <ev-field> by its name.
293
+ fields?: Record<string, string>;
294
+ }
295
+
303
296
  declare interface CardEvents {
304
297
  ready: () => void;
305
298
  error: () => void;
@@ -320,6 +313,16 @@ declare interface CardExpiry {
320
313
 
321
314
  declare type CardField = "name" | "number" | "expiry" | "cvc";
322
315
 
316
+ declare interface CardFieldMap<T> {
317
+ name?: T;
318
+ number?: T;
319
+ expiry?: T;
320
+ expiryMonth?: T;
321
+ expiryYear?: T;
322
+ cvc?: T;
323
+ fields?: T | Record<string, T>;
324
+ }
325
+
323
326
  declare interface CardFieldTranslations<E extends TranslationsObject>
324
327
  extends TranslationsObject {
325
328
  label?: string;
@@ -327,8 +330,36 @@ extends TranslationsObject {
327
330
  errors?: E;
328
331
  }
329
332
 
333
+ declare interface CardFrameConfig {
334
+ icons?: boolean | Partial<CardIcons>;
335
+ autoFocus?: boolean;
336
+ hiddenFields?: string; // deprecated, sent comma-joined
337
+ // A field list from `ui.card()`, or the node tree a declared card renders.
338
+ fields?: CardField[] | CardSpecNode[];
339
+ acceptedBrands?: CardBrandName[];
340
+ customBrands?: CustomBrand[];
341
+ translations?: Partial<CardTranslations>;
342
+ autoProgress?: boolean | CardFieldMap<boolean>;
343
+ redactCVC?: boolean;
344
+ allow3DigitAmexCVC?: boolean;
345
+ defaultValues?: CardDefaultValues;
346
+ autoComplete?: boolean | CardFieldMap<boolean>;
347
+ validation?: CardValidation;
348
+ agentTools?: AgentToolsFrameConfig;
349
+ }
350
+
351
+ declare interface CardHostConfiguration {
352
+ theme?: ThemeDefinition;
353
+ config?: CardFrameConfig;
354
+ }
355
+
330
356
  declare type CardIcons = Record<CardBrandName | "default", string>;
331
357
 
358
+ declare interface CardLabelTranslations extends TranslationsObject {
359
+ label?: string;
360
+ placeholder?: string;
361
+ }
362
+
332
363
  declare interface CardOptions {
333
364
  colorScheme?: ColorScheme;
334
365
  icons?: boolean | Partial<CardIcons>;
@@ -339,26 +370,13 @@ declare interface CardOptions {
339
370
  acceptedBrands?: CardBrandName[];
340
371
  customBrands?: CustomBrand[];
341
372
  translations?: Partial<CardTranslations>;
342
- autoProgress?: boolean;
373
+ autoProgress?: boolean | CardFieldMap<boolean>;
343
374
  redactCVC?: boolean;
344
375
  allow3DigitAmexCVC?: boolean;
345
- defaultValues?: {
346
- name?: string;
347
- };
348
- autoComplete?: {
349
- name?: boolean;
350
- number?: boolean;
351
- expiry?: boolean;
352
- cvc?: boolean;
353
- };
354
- validation?: {
355
- name?: {
356
- regex?: RegExp;
357
- };
358
- cvc?: {
359
- optional?: boolean;
360
- };
361
- };
376
+ defaultValues?: CardDefaultValues;
377
+ autoComplete?: boolean | CardFieldMap<boolean>;
378
+ validation?: CardValidation;
379
+ agentTools?: AgentToolsConfig;
362
380
  }
363
381
 
364
382
  declare interface CardPayload {
@@ -372,131 +390,58 @@ declare interface CardPayload {
372
390
  expiry: CardExpiry;
373
391
  cvc: string | null;
374
392
  };
393
+ // Each value encrypted; null when empty or invalid.
394
+ fields: Record<string, string | null>;
375
395
  isValid: boolean;
376
396
  isComplete: boolean;
377
397
  errors: null | Partial<{
378
398
  number?: string;
379
399
  cvc?: string;
380
400
  expiry?: string;
401
+ fields?: Record<string, string>;
381
402
  }>;
382
403
  }
383
404
 
405
+ declare interface CardSpecNode {
406
+ type: CardSpecNodeType;
407
+ id: string;
408
+ props: Record<string, string>;
409
+ children?: CardSpecNode[];
410
+ }
411
+
412
+ declare type CardSpecNodeType = "row" | CardField | ExpiryHalf | "field";
413
+
384
414
  declare interface CardTranslations extends TranslationsObject {
385
415
  number: CardFieldTranslations<{
386
416
  invalid?: string;
387
417
  unsupportedBrand?: string;
388
418
  }>;
389
419
  expiry: CardFieldTranslations<{ invalid?: string }>;
420
+ // The halves of a split expiry; an invalid date is reported as `expiry`.
421
+ expiryMonth?: CardLabelTranslations;
422
+ expiryYear?: CardLabelTranslations;
390
423
  cvc: CardFieldTranslations<{ invalid?: string }>;
424
+ // For an <ev-field> without an `errormessage`.
425
+ field?: { errors?: { required?: string; invalid?: string } };
426
+ // Each <ev-field> by its name, ahead of `field`.
427
+ fields?: Record<string, CustomFieldTranslations>;
391
428
  }
392
429
 
393
- declare function clean(extended?: ThemeDefinition): ThemeDefinition {
394
- return (utils) => ({
395
- styles: {
396
- ":root": {
397
- "--icon-offset": "1.9rem",
398
- },
399
- body: {
400
- paddingBottom: 2,
401
- },
402
- label: {
403
- fontSize: 14,
404
- marginBottom: 4,
405
- display: "block",
406
- color: "#0a2540",
407
- },
408
- input: {
409
- height: 40,
410
- fontSize: 16,
411
- borderRadius: 6,
412
- color: "#0a2540",
413
- padding: "0 12px",
414
- backgroundColor: "#fff",
415
- border: "1px solid #e6ebf1",
416
- boxShadow:
417
- "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
418
-
419
- "&::placeholder": {
420
- color: "#717f96",
421
- },
422
-
423
- "&:focus": {
424
- outline: "none",
425
- borderColor: "#63e",
426
- },
427
- },
428
- textarea: {
429
- height: 40,
430
- fontSize: 16,
431
- borderRadius: 6,
432
- color: "#0a2540",
433
- padding: "6px 12px",
434
- backgroundColor: "#fff",
435
- border: "1px solid #e6ebf1",
436
-
437
- boxShadow:
438
- "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
439
-
440
- "&::placeholder": {
441
- color: "#717f96",
442
- },
443
-
444
- "&:focus": {
445
- outline: "none",
446
- borderColor: "#63e",
447
- },
448
- },
449
- select: {
450
- height: 40,
451
- fontSize: 16,
452
- borderRadius: 6,
453
- color: "#0a2540",
454
- padding: "6px 12px",
455
- backgroundColor: "#fff",
456
- border: "1px solid #e6ebf1",
457
- },
458
- button: {
459
- fontSize: 16,
460
- height: 40,
461
- border: "1px solid #e6ebf1",
462
- padding: "0 12px",
463
- },
464
- ".field[ev-valid=false] input": {
465
- color: "#df1c41",
466
- borderColor: "#df1c41",
467
- },
468
- ".error": {
469
- color: "#df1c41",
470
- fontSize: "0.75rem",
471
- padding: "0.25rem 0",
472
- },
473
- "[ev-component=card]": {
474
- gap: 16,
475
- },
476
- "[ev-component=pin] input": {
477
- height: 80,
478
- fontSize: 20,
479
- caretColor: "transparent",
480
- },
481
- "[ev-component=card]:has(.icon)": {
482
- "& .field[ev-name=number]": {
483
- position: "relative",
484
- },
485
- "& .icon": {
486
- left: 10,
487
- height: 20,
488
- position: "absolute",
489
- top: "var(--icon-offset)",
490
- },
491
- "& .field[ev-name=number] input": {
492
- paddingLeft: 48,
493
- },
494
- },
495
- ...(extended ? utils.extend(extended) : {}),
496
- },
497
- });
430
+ declare interface CardValidation {
431
+ name?: {
432
+ regex?: RegExp;
433
+ };
434
+ cvc?: {
435
+ optional?: boolean;
436
+ };
437
+ // Each <ev-field> by its name.
438
+ fields?: Record<string, CustomFieldValidation>;
498
439
  }
499
440
 
441
+ export declare function clean(config?: PresetConfig): ThemeDefinition;
442
+
443
+ export declare function clean(extended?: ThemeDefinition, config?: PresetConfig): ThemeDefinition;
444
+
500
445
  declare type ColorScheme =
501
446
  | "normal"
502
447
  | ColorSchemeValue
@@ -556,6 +501,8 @@ PaymentTransactionDetails,
556
501
  "type"
557
502
  > & { type?: "payment" };
558
503
 
504
+ export declare function cssVar(name: string): string;
505
+
559
506
  declare interface CustomBrand {
560
507
  name: string;
561
508
  isLocal: true;
@@ -577,6 +524,27 @@ declare interface CustomConfig {
577
524
  appKey?: CageKey;
578
525
  }
579
526
 
527
+ declare interface CustomFieldTarget {
528
+ field: "field";
529
+ name: string;
530
+ }
531
+
532
+ declare interface CustomFieldTranslations extends TranslationsObject {
533
+ label?: string;
534
+ placeholder?: string;
535
+ errors?: { required?: string; invalid?: string };
536
+ }
537
+
538
+ declare interface CustomFieldValidation {
539
+ required?: boolean;
540
+ pattern?: string;
541
+ minLength?: number;
542
+ maxLength?: number;
543
+ min?: string;
544
+ max?: string;
545
+ step?: string;
546
+ }
547
+
580
548
  declare interface CustomStyles {
581
549
  cardNumberText?: CSSStyleDeclaration;
582
550
  cardNumberLabel?: CSSStyleDeclaration;
@@ -1322,10 +1290,11 @@ declare interface EvervaultRequestProps {
1322
1290
  url?: string;
1323
1291
  }
1324
1292
 
1325
- declare interface FieldEvent {
1326
- field: CardField;
1293
+ declare type ExpiryHalf = "expiryMonth" | "expiryYear";
1294
+
1295
+ declare type FieldEvent = ({ field: CardField } | CustomFieldTarget) & {
1327
1296
  data: CardPayload;
1328
- }
1297
+ };
1329
1298
 
1330
1299
  declare class Form {
1331
1300
  #private;
@@ -1487,6 +1456,7 @@ declare interface GooglePayEvents {
1487
1456
  success: () => void;
1488
1457
  error: (error: string) => void;
1489
1458
  cancel: () => void;
1459
+ unavailable: () => void;
1490
1460
  }
1491
1461
 
1492
1462
  declare interface GooglePayOptions {
@@ -1687,313 +1657,13 @@ declare type JssValue =
1687
1657
 
1688
1658
  export declare function loadEvervault(team: string, app: string, config?: CustomConfig): Promise<EvervaultInstance>;
1689
1659
 
1690
- declare function material(extended?: ThemeDefinition): ThemeDefinition {
1691
- return (utils) => ({
1692
- styles: {
1693
- body: {
1694
- paddingTop: 4,
1695
- },
1696
-
1697
- ".field": {
1698
- position: "relative",
1699
- },
1700
-
1701
- label: {
1702
- top: 10,
1703
- left: 8,
1704
- zIndex: 3,
1705
- fontSize: 14,
1706
- lineHeight: 1,
1707
- height: "20px",
1708
- display: "flex",
1709
- color: "#717f96",
1710
- padding: "0 4px",
1711
- alignItems: "center",
1712
- position: "absolute",
1713
- pointerEvents: "none",
1714
- transformOrigin: "center left",
1715
- transition: "transform 150ms, background 150ms",
1716
- },
1717
-
1718
- input: {
1719
- height: 40,
1720
- fontSize: 16,
1721
- borderRadius: 6,
1722
- color: "#0a2540",
1723
- padding: "0 12px",
1724
- backgroundColor: "#fff",
1725
- border: "1px solid #e6ebf1",
1726
-
1727
- "&::placeholder": {
1728
- color: "transparent",
1729
- },
1730
-
1731
- "&:focus": {
1732
- outline: "none",
1733
- borderColor: "#63e",
1734
- },
1735
- },
1736
-
1737
- textarea: {
1738
- height: 40,
1739
- fontSize: 16,
1740
- borderRadius: 6,
1741
- color: "#0a2540",
1742
- padding: "6 12px",
1743
- backgroundColor: "#fff",
1744
- border: "1px solid #e6ebf1",
1745
-
1746
- "&::placeholder": {
1747
- color: "transparent",
1748
- },
1749
-
1750
- "&:focus": {
1751
- outline: "none",
1752
- borderColor: "#63e",
1753
- },
1754
- },
1755
-
1756
- ".field[ev-valid=false] input": {
1757
- color: "#df1c41",
1758
- borderColor: "#df1c41",
1759
- },
1760
-
1761
- ".field:focus-within label, .field:not([ev-has-value=false]) label": {
1762
- background: "white",
1763
- transform: "translateY(-100%) scale(0.8)",
1764
- },
1765
-
1766
- ".error": {
1767
- color: "#df1c41",
1768
- fontSize: "0.75rem",
1769
- padding: "0.25rem 0",
1770
- },
1771
-
1772
- ".field:not([ev-valid=false]):focus-within label": {
1773
- color: "#63e",
1774
- },
1775
-
1776
- ".field[ev-valid=false] label": {
1777
- color: "#df1c41",
1778
- },
1779
-
1780
- ".field[ev-has-value=true][ev-valid=true]:not(:focus-within) label": {
1781
- color: "#0a2540",
1782
- },
1783
-
1784
- "[ev-component=card]": {
1785
- gap: 16,
1786
- },
1787
-
1788
- "[ev-component=card]:has(.icon)": {
1789
- "& .icon": {
1790
- left: 10,
1791
- height: 20,
1792
- position: "absolute",
1793
- top: 10,
1794
- opacity: 0,
1795
- },
1796
-
1797
- "& .field[ev-name=number]:focus-within, & .field[ev-name=number]:not([ev-has-value=false])":
1798
- {
1799
- "& .icon": {
1800
- opacity: 1,
1801
- },
1802
- "& input": {
1803
- paddingLeft: 45,
1804
- },
1805
- },
1806
- },
1807
- ...(extended ? utils.extend(extended) : {}),
1808
- },
1809
- });
1810
- }
1660
+ export declare function material(config?: PresetConfig): ThemeDefinition;
1811
1661
 
1812
- declare function minimal(extended?: ThemeDefinition): ThemeDefinition {
1813
- return (utils) => ({
1814
- styles: {
1815
- ":root": {
1816
- "--icon-offset": "34px",
1817
- },
1818
-
1819
- body: {
1820
- paddingBottom: 2,
1821
- },
1822
-
1823
- label: {
1824
- fontSize: 14,
1825
- marginBottom: "0.5rem",
1826
- color: "#0a2540",
1827
- display: "none",
1828
- },
1829
-
1830
- ".field:first-child label": {
1831
- display: "block",
1832
- },
1833
-
1834
- "fieldset[ev-valid=false]": {
1835
- paddingBottom: "1.5rem",
1836
- },
1837
-
1838
- input: {
1839
- height: 40,
1840
- fontSize: 16,
1841
- borderRadius: 0,
1842
- color: "#0a2540",
1843
- padding: "0 12px",
1844
- backgroundColor: "#fff",
1845
- border: "1px solid #e6ebf1",
1846
-
1847
- boxShadow:
1848
- "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
1849
-
1850
- "&::placeholder": {
1851
- color: "#717f96",
1852
- },
1853
-
1854
- "&:focus": {
1855
- outline: "none",
1856
- borderColor: "#63e",
1857
- },
1858
- },
1859
-
1860
- textarea: {
1861
- height: 40,
1862
- fontSize: 16,
1863
- borderRadius: 0,
1864
- color: "#0a2540",
1865
- padding: "6 12px",
1866
- backgroundColor: "#fff",
1867
- border: "1px solid #e6ebf1",
1868
-
1869
- boxShadow:
1870
- "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)",
1871
-
1872
- "&::placeholder": {
1873
- color: "#717f96",
1874
- },
1875
-
1876
- "&:focus": {
1877
- outline: "none",
1878
- borderColor: "#63e",
1879
- },
1880
- },
1881
-
1882
- ".field[ev-valid=false] input": {
1883
- color: "#df1c41",
1884
- borderColor: "#df1c41",
1885
- },
1886
-
1887
- ".error": {
1888
- color: "#df1c41",
1889
- fontSize: "0.75rem",
1890
- padding: "0.25rem 0",
1891
- position: "absolute",
1892
- left: 0,
1893
- bottom: 0,
1894
- display: "none",
1895
- },
1896
-
1897
- ".field[ev-valid=false]": {
1898
- zIndex: 4,
1899
- },
1900
-
1901
- ".field:focus-within": {
1902
- zIndex: 5,
1903
- },
1904
-
1905
- "[ev-component=card]": {
1906
- gap: 0,
1907
-
1908
- "& .field[ev-valid=false]:nth-child(1) .error": {
1909
- display: "block",
1910
- },
1911
-
1912
- "& [ev-valid=true]:nth-child(1) + [ev-valid=false] .error": {
1913
- display: "block",
1914
- },
1915
-
1916
- "& [ev-valid=true]:nth-child(1) + [ev-valid=true]:nth-child(2) + [ev-valid=false] .error":
1917
- {
1918
- display: "block",
1919
- },
1920
-
1921
- "& [ev-valid=true]:nth-child(1) + [ev-valid=true]:nth-child(2) + [ev-valid=true]:nth-child(3) + [ev-valid=false] .error":
1922
- {
1923
- display: "block",
1924
- },
1925
-
1926
- "& .field:not(:last-child)": {
1927
- marginBottom: "-1px",
1928
- },
1929
-
1930
- "& .field:first-child": {
1931
- "& input": {
1932
- borderTopLeftRadius: 6,
1933
- borderTopRightRadius: 6,
1934
- },
1935
- },
1936
-
1937
- "& .field:last-child": {
1938
- "& input": {
1939
- borderBottomRightRadius: 6,
1940
- borderBottomLeftRadius: 6,
1941
- },
1942
- },
1943
- },
1944
-
1945
- "[ev-component=card][ev-fields*=cvc][ev-fields*=expiry]": {
1946
- "& .field[ev-name=expiry]": {
1947
- "& input": {
1948
- borderBottomLeftRadius: 6,
1949
- },
1950
- },
1951
-
1952
- "& .field[ev-name=cvc]": {
1953
- marginLeft: "-1px",
1954
-
1955
- "& input": {
1956
- borderBottomLeftRadius: 0,
1957
- },
1958
- },
1959
- },
1960
-
1961
- "[ev-component=pin]": {
1962
- gap: 0,
1963
-
1964
- "& input": {
1965
- height: 60,
1966
- },
1967
-
1968
- "& .field:not(:first-child)": {
1969
- marginLeft: "-1px",
1970
- },
1971
-
1972
- "& .field:first-child input": {
1973
- borderTopLeftRadius: 6,
1974
- borderBottomLeftRadius: 6,
1975
- },
1976
-
1977
- "& .field:last-child input": {
1978
- borderTopRightRadius: 6,
1979
- borderBottomRightRadius: 6,
1980
- },
1981
- },
1982
- "[ev-component=card]:has(.icon)": {
1983
- "& .icon": {
1984
- left: 10,
1985
- height: 20,
1986
- position: "absolute",
1987
- top: "var(--icon-offset)",
1988
- },
1989
- "& .field[ev-name=number] input": {
1990
- paddingLeft: 48,
1991
- },
1992
- },
1993
- ...(extended ? utils.extend(extended) : {}),
1994
- },
1995
- });
1996
- }
1662
+ export declare function material(extended?: ThemeDefinition, config?: PresetConfig): ThemeDefinition;
1663
+
1664
+ export declare function minimal(config?: PresetConfig): ThemeDefinition;
1665
+
1666
+ export declare function minimal(extended?: ThemeDefinition, config?: PresetConfig): ThemeDefinition;
1997
1667
 
1998
1668
  declare interface MinimalObservable<T> {
1999
1669
  subscribe(nextOrObserver: ((value: T) => void) | {next: (value: T) => void}): {
@@ -3128,6 +2798,14 @@ declare interface PinPayload {
3128
2798
  value: string | null;
3129
2799
  }
3130
2800
 
2801
+ export declare interface PresetConfig {
2802
+ primary?: string;
2803
+ greyTone?: string;
2804
+ roundness?: string;
2805
+ font?: string;
2806
+ selectors?: ThemeStyles;
2807
+ }
2808
+
3131
2809
  declare interface Properties<TLength = (string & {}) | 0, TTime = string & {}>
3132
2810
  extends StandardProperties<TLength, TTime>,
3133
2811
  VendorProperties<TLength, TTime>,
@@ -4932,6 +4610,7 @@ declare class RevealCopyButton {
4932
4610
 
4933
4611
  declare interface RevealCopyButtonEvents {
4934
4612
  copy: () => void;
4613
+ error: () => void;
4935
4614
  }
4936
4615
 
4937
4616
  declare interface RevealCopyButtonOptions {
@@ -4976,6 +4655,11 @@ declare class RevealText {
4976
4655
  constructor(reveal: Reveal, client: EvervaultClient, path: string, options?: RevealTextOptions);
4977
4656
  mount(selector: SelectorType): this;
4978
4657
  unmount(): this;
4658
+ on<T extends keyof RevealTextEvents>(event: T, callback: RevealTextEvents[T]): () => void;
4659
+ }
4660
+
4661
+ declare interface RevealTextEvents {
4662
+ error: () => void;
4979
4663
  }
4980
4664
 
4981
4665
  declare interface RevealTextOptions {
@@ -11929,7 +11613,7 @@ declare interface SwipedCard {
11929
11613
  bin: string | null;
11930
11614
  }
11931
11615
 
11932
- declare type ThemeDefinition = ThemeObject | ThemeFunction;
11616
+ export declare type ThemeDefinition = ThemeObject | ThemeFunction;
11933
11617
 
11934
11618
  declare interface ThemeFontFace {
11935
11619
  fontFamily: string;
@@ -11951,7 +11635,9 @@ declare namespace themes {
11951
11635
  export {
11952
11636
  clean,
11953
11637
  material,
11954
- minimal
11638
+ minimal,
11639
+ PresetConfig,
11640
+ cssVar
11955
11641
  }
11956
11642
  }
11957
11643
 
@@ -12049,6 +11735,7 @@ declare class UIComponents {
12049
11735
  * @deprecated Use `applePay` instead.
12050
11736
  */
12051
11737
  applePayButton(tx: Transaction, opts: ApplePayButtonOptions): ApplePayButton;
11738
+ mountElements(): void;
12052
11739
  }
12053
11740
 
12054
11741
  declare interface VendorLonghandProperties<TLength = (string & {}) | 0, TTime = string & {}> {
@@ -42124,6 +41811,99 @@ declare global {
42124
41811
 
42125
41812
 
42126
41813
 
41814
+ declare module "@vitest/expect" {
41815
+ interface MatcherState {
41816
+ environment: string;
41817
+ snapshotState: SnapshotState;
41818
+ task?: Readonly<Test>;
41819
+ }
41820
+ interface ExpectPollOptions {
41821
+ interval?: number;
41822
+ timeout?: number;
41823
+ message?: string;
41824
+ }
41825
+ interface ExpectStatic {
41826
+ assert: Chai.AssertStatic;
41827
+ unreachable: (message?: string) => never;
41828
+ soft: <T>(actual: T, message?: string) => Assertion<T>;
41829
+ poll: <T>(actual: () => T, options?: ExpectPollOptions) => PromisifyAssertion<Awaited<T>>;
41830
+ addEqualityTesters: (testers: Array<Tester>) => void;
41831
+ assertions: (expected: number) => void;
41832
+ hasAssertions: () => void;
41833
+ addSnapshotSerializer: (plugin: Plugin) => void;
41834
+ }
41835
+ interface Assertion<T> {
41836
+ matchSnapshot: SnapshotMatcher<T>;
41837
+ toMatchSnapshot: SnapshotMatcher<T>;
41838
+ toMatchInlineSnapshot: InlineSnapshotMatcher<T>;
41839
+ /**
41840
+ * Checks that an error thrown by a function matches a previously recorded snapshot.
41841
+ *
41842
+ * @param hint - Optional custom error message.
41843
+ *
41844
+ * @example
41845
+ * expect(functionWithError).toThrowErrorMatchingSnapshot();
41846
+ */
41847
+ toThrowErrorMatchingSnapshot: (hint?: string) => void;
41848
+ /**
41849
+ * Checks that an error thrown by a function matches an inline snapshot within the test file.
41850
+ * Useful for keeping snapshots close to the test code.
41851
+ *
41852
+ * @param snapshot - Optional inline snapshot string to match.
41853
+ * @param hint - Optional custom error message.
41854
+ *
41855
+ * @example
41856
+ * const throwError = () => { throw new Error('Error occurred') };
41857
+ * expect(throwError).toThrowErrorMatchingInlineSnapshot(`"Error occurred"`);
41858
+ */
41859
+ toThrowErrorMatchingInlineSnapshot: (snapshot?: string, hint?: string) => void;
41860
+ /**
41861
+ * Compares the received value to a snapshot saved in a specified file.
41862
+ * Useful for cases where snapshot content is large or needs to be shared across tests.
41863
+ *
41864
+ * @param filepath - Path to the snapshot file.
41865
+ * @param hint - Optional custom error message.
41866
+ *
41867
+ * @example
41868
+ * await expect(largeData).toMatchFileSnapshot('path/to/snapshot.json');
41869
+ */
41870
+ toMatchFileSnapshot: (filepath: string, hint?: string) => Promise<void>;
41871
+ }
41872
+ }
41873
+
41874
+
41875
+
41876
+
41877
+ declare module "@vitest/runner" {
41878
+ interface TestContext {
41879
+ /**
41880
+ * `expect` instance bound to the current test.
41881
+ *
41882
+ * This API is useful for running snapshot tests concurrently because global expect cannot track them.
41883
+ */
41884
+ readonly expect: ExpectStatic;
41885
+ /** @internal */
41886
+ _local: boolean;
41887
+ }
41888
+ interface TaskMeta {
41889
+ typecheck?: boolean;
41890
+ benchmark?: boolean;
41891
+ }
41892
+ interface File {
41893
+ prepareDuration?: number;
41894
+ environmentLoad?: number;
41895
+ }
41896
+ interface TaskBase {
41897
+ logs?: UserConsoleLog[];
41898
+ }
41899
+ interface TaskResult {
41900
+ benchmark?: BenchmarkResult;
41901
+ }
41902
+ }
41903
+
41904
+
41905
+
41906
+
42127
41907
  declare namespace Emitter {
42128
41908
  /**
42129
41909
  * Returns a union of all event types, both public and reserved, for the given emitter.
@@ -42253,99 +42033,6 @@ declare namespace EventMap {
42253
42033
 
42254
42034
 
42255
42035
 
42256
- declare module "@vitest/expect" {
42257
- interface MatcherState {
42258
- environment: string;
42259
- snapshotState: SnapshotState;
42260
- task?: Readonly<Test>;
42261
- }
42262
- interface ExpectPollOptions {
42263
- interval?: number;
42264
- timeout?: number;
42265
- message?: string;
42266
- }
42267
- interface ExpectStatic {
42268
- assert: Chai.AssertStatic;
42269
- unreachable: (message?: string) => never;
42270
- soft: <T>(actual: T, message?: string) => Assertion<T>;
42271
- poll: <T>(actual: () => T, options?: ExpectPollOptions) => PromisifyAssertion<Awaited<T>>;
42272
- addEqualityTesters: (testers: Array<Tester>) => void;
42273
- assertions: (expected: number) => void;
42274
- hasAssertions: () => void;
42275
- addSnapshotSerializer: (plugin: Plugin) => void;
42276
- }
42277
- interface Assertion<T> {
42278
- matchSnapshot: SnapshotMatcher<T>;
42279
- toMatchSnapshot: SnapshotMatcher<T>;
42280
- toMatchInlineSnapshot: InlineSnapshotMatcher<T>;
42281
- /**
42282
- * Checks that an error thrown by a function matches a previously recorded snapshot.
42283
- *
42284
- * @param hint - Optional custom error message.
42285
- *
42286
- * @example
42287
- * expect(functionWithError).toThrowErrorMatchingSnapshot();
42288
- */
42289
- toThrowErrorMatchingSnapshot: (hint?: string) => void;
42290
- /**
42291
- * Checks that an error thrown by a function matches an inline snapshot within the test file.
42292
- * Useful for keeping snapshots close to the test code.
42293
- *
42294
- * @param snapshot - Optional inline snapshot string to match.
42295
- * @param hint - Optional custom error message.
42296
- *
42297
- * @example
42298
- * const throwError = () => { throw new Error('Error occurred') };
42299
- * expect(throwError).toThrowErrorMatchingInlineSnapshot(`"Error occurred"`);
42300
- */
42301
- toThrowErrorMatchingInlineSnapshot: (snapshot?: string, hint?: string) => void;
42302
- /**
42303
- * Compares the received value to a snapshot saved in a specified file.
42304
- * Useful for cases where snapshot content is large or needs to be shared across tests.
42305
- *
42306
- * @param filepath - Path to the snapshot file.
42307
- * @param hint - Optional custom error message.
42308
- *
42309
- * @example
42310
- * await expect(largeData).toMatchFileSnapshot('path/to/snapshot.json');
42311
- */
42312
- toMatchFileSnapshot: (filepath: string, hint?: string) => Promise<void>;
42313
- }
42314
- }
42315
-
42316
-
42317
-
42318
-
42319
- declare module "@vitest/runner" {
42320
- interface TestContext {
42321
- /**
42322
- * `expect` instance bound to the current test.
42323
- *
42324
- * This API is useful for running snapshot tests concurrently because global expect cannot track them.
42325
- */
42326
- readonly expect: ExpectStatic;
42327
- /** @internal */
42328
- _local: boolean;
42329
- }
42330
- interface TaskMeta {
42331
- typecheck?: boolean;
42332
- benchmark?: boolean;
42333
- }
42334
- interface File {
42335
- prepareDuration?: number;
42336
- environmentLoad?: number;
42337
- }
42338
- interface TaskBase {
42339
- logs?: UserConsoleLog[];
42340
- }
42341
- interface TaskResult {
42342
- benchmark?: BenchmarkResult;
42343
- }
42344
- }
42345
-
42346
-
42347
-
42348
-
42349
42036
 
42350
42037
  declare namespace buildConnector {
42351
42038
  export type BuildOptions = (ConnectionOptions | TcpNetConnectOpts | IpcNetConnectOpts) & {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "private": false,
3
3
  "name": "@evervault/js",
4
- "version": "2.22.0",
4
+ "version": "2.24.0",
5
5
  "description": "Evervault.js loader for client-side browser applications",
6
6
  "license": "MIT",
7
7
  "type": "module",
@@ -20,10 +20,10 @@
20
20
  "typescript": "5.6.3",
21
21
  "vite": "^8.1.4",
22
22
  "vite-plugin-dts": "^5.0.2",
23
- "@evervault/browser": "2.65.0",
23
+ "themes": "0.1.24",
24
+ "@evervault/browser": "2.71.0",
24
25
  "tsconfig": "0.1.0",
25
- "types": "0.23.1",
26
- "themes": "0.1.24"
26
+ "types": "0.23.1"
27
27
  },
28
28
  "scripts": {
29
29
  "build": "vite build",