@evervault/js 2.22.0 → 2.23.0

package/dist/evervault-js.js

@@ -1,27 +1,353 @@
+//#region ../themes/presetConfig.ts
+var e = {
+	primary: "--ev-color-primary",
+	greyTone: "--ev-grey-tone",
+	roundness: "--ev-roundness",
+	font: "--ev-font-family"
+};
+function t(t, n) {
+	if (!n) return t;
+	let { selectors: r } = n, i = { ...t[":root"] };
+	for (let [t, r] of Object.entries(e)) {
+		let e = n[t];
+		e && (i[r] = e);
+	}
+	return {
+		...t,
+		...r ?? {},
+		":root": {
+			...i,
+			...r?.[":root"] ?? {}
+		}
+	};
+}
+function n(t, n) {
+	let r = typeof t == "function" || t != null && ("styles" in t || "fonts" in t || "fontFaces" in t);
+	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];
+}
+//#endregion
+//#region ../themes/clean.ts
+function r(e, r) {
+	let [i, a] = n(e, r);
+	return (e) => ({ styles: {
+		...t({
+			":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) : {}
+	} });
+}
+//#endregion
+//#region ../themes/material.ts
+function i(e, r) {
+	let [i, a] = n(e, r);
+	return (e) => ({ styles: {
+		...t({
+			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) : {}
+	} });
+}
+//#endregion
+//#region ../themes/minimal.ts
+function a(e, r) {
+	let [i, a] = n(e, r);
+	return (e) => ({ styles: {
+		...t({
+			":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) : {}
+	} });
+}
+//#endregion
+//#region ../themes/cssVar.ts
+function o(e) {
+	return typeof window > "u" ? "" : window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
+}
+//#endregion
 //#region src/index.ts
-var e = null;
-async function t() {
-	return e || (e = new Promise((t, n) => {
-		let r = document.createElement("script");
-		if (r.src = "https://js.evervault.com/v2", r.onload = () => t(), r.onerror = () => {
-			e = null, n();
+var s = null;
+async function c() {
+	return s || (s = new Promise((e, t) => {
+		let n = document.createElement("script");
+		if (n.src = "https://js.evervault.com/v2", n.onload = () => e(), n.onerror = () => {
+			s = null, t();
 		}, !document.head) throw Error("Expected document.head not to be null. Evervault.js requires a <head> element.");
-		document.head.appendChild(r);
-	}), e);
+		document.head.appendChild(n);
+	}), s);
 }
-async function n() {
+async function l() {
 	if (window.Evervault) return window.Evervault;
 	try {
-		return await t(), window.Evervault;
+		return await c(), window.Evervault;
 	} catch {
 		throw Error("Failed to load Evervault.js");
 	}
 }
-async function r(e, t, r) {
-	return new (await (n()))(e, t, r);
+async function u(e, t, n) {
+	return new (await (l()))(e, t, n);
 }
 Promise.resolve().then(() => {
-	n();
+	l();
 });
 //#endregion
-export { r as loadEvervault };
+export { r as clean, o as cssVar, u as loadEvervault, i as material, a as minimal };

package/dist/evervault-js.umd.cjs

@@ -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});
+(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});

package/dist/evervault.d.ts

@@ -1,5 +1,18 @@
 import { nodeEvents } from 'node:events';
 
+declare interface AgentToolsConfig {
+    enabled: boolean;
+    namePrefix?: string;
+    productName?: string;
+    exposeTo?: string[];
+}
+
+declare interface AgentToolsFrameConfig {
+    namePrefix: string;
+    productName: string;
+    exposeTo: string[];
+}
+
 declare class ApplePayButton {
     #private;
     client: EvervaultClient;
@@ -242,43 +255,17 @@ declare interface CageKey {
 
 declare class Card {
     #private;
-    values: CardPayload;
     constructor(client: EvervaultClient, options?: CardOptions);
-    get config(): {
-        theme: ThemeDefinition | undefined;
-        config: {
-            icons: boolean | Partial< CardIcons> | undefined;
-            autoFocus: boolean | undefined;
-            translations: Partial< CardTranslations> | undefined;
-            hiddenFields: string;
-            fields: CardField[] | undefined;
-            acceptedBrands: CardBrandName[] | undefined;
-            customBrands: CustomBrand[] | undefined;
-            defaultValues: {
-                name?: string;
-            } | undefined;
-            autoComplete: {
-                name?: boolean;
-                number?: boolean;
-                expiry?: boolean;
-                cvc?: boolean;
-            } | undefined;
-            autoProgress: boolean | undefined;
-            redactCVC: boolean | undefined;
-            allow3DigitAmexCVC: boolean | undefined;
-            validation: {
-                name?: {
-                    regex?: RegExp;
-                };
-                cvc?: {
-                    optional?: boolean;
-                };
-            } | undefined;
-        };
+    get values(): CardPayload;
+    get config(): CardHostConfiguration & {
+        config: CardFrameConfig;
     };
     mount(selector: SelectorType): this;
+    preload(selector: SelectorType): this;
+    show(): this;
     update(options?: CardOptions): this;
     unmount(): this;
+    destroy(): this;
     on<T extends keyof CardEvents>(event: T, callback: CardEvents[T]): () => void;
     validate(): this;
 }
@@ -327,6 +314,43 @@ extends TranslationsObject {
     errors?: E;
 }
 
+declare interface CardFrameConfig {
+    icons?: boolean | Partial<CardIcons>;
+    autoFocus?: boolean;
+    hiddenFields?: string; // deprecated, sent comma-joined
+    // A field list from `ui.card()`, or the node tree a declared card renders.
+    fields?: CardField[] | CardSpecNode[];
+    acceptedBrands?: CardBrandName[];
+    customBrands?: CustomBrand[];
+    translations?: Partial<CardTranslations>;
+    autoProgress?: boolean;
+    redactCVC?: boolean;
+    allow3DigitAmexCVC?: boolean;
+    defaultValues?: {
+        name?: string;
+    };
+    autoComplete?: {
+        name?: boolean;
+        number?: boolean;
+        expiry?: boolean;
+        cvc?: boolean;
+    };
+    validation?: {
+        name?: {
+            regex?: RegExp;
+        };
+        cvc?: {
+            optional?: boolean;
+        };
+    };
+    agentTools?: AgentToolsFrameConfig;
+}
+
+declare interface CardHostConfiguration {
+    theme?: ThemeDefinition;
+    config?: CardFrameConfig;
+}
+
 declare type CardIcons = Record<CardBrandName | "default", string>;
 
 declare interface CardOptions {
@@ -359,6 +383,7 @@ declare interface CardOptions {
             optional?: boolean;
         };
     };
+    agentTools?: AgentToolsConfig;
 }
 
 declare interface CardPayload {
@@ -381,6 +406,15 @@ declare interface CardPayload {
     }>;
 }
 
+declare interface CardSpecNode {
+    type: CardSpecNodeType;
+    id: string;
+    props: Record<string, string>;
+    children?: CardSpecNode[];
+}
+
+declare type CardSpecNodeType = "row" | CardField;
+
 declare interface CardTranslations extends TranslationsObject {
     number: CardFieldTranslations<{
         invalid?: string;
@@ -390,112 +424,9 @@ declare interface CardTranslations extends TranslationsObject {
     cvc: CardFieldTranslations<{ invalid?: string }>;
 }
 
-declare function clean(extended?: ThemeDefinition): ThemeDefinition {
-    return (utils) => ({
-        styles: {
-            ":root": {
-                "--icon-offset": "1.9rem",
-            },
-            body: {
-                paddingBottom: 2,
-            },
-            label: {
-                fontSize: 14,
-                marginBottom: 4,
-                display: "block",
-                color: "#0a2540",
-            },
-            input: {
-                height: 40,
-                fontSize: 16,
-                borderRadius: 6,
-                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: "#717f96",
-                },
-
-                "&:focus": {
-                    outline: "none",
-                    borderColor: "#63e",
-                },
-            },
-            textarea: {
-                height: 40,
-                fontSize: 16,
-                borderRadius: 6,
-                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: "#717f96",
-                },
-
-                "&:focus": {
-                    outline: "none",
-                    borderColor: "#63e",
-                },
-            },
-            select: {
-                height: 40,
-                fontSize: 16,
-                borderRadius: 6,
-                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,
-                },
-            },
-            ...(extended ? utils.extend(extended) : {}),
-        },
-    });
-}
+export declare function clean(config?: PresetConfig): ThemeDefinition;
+
+export declare function clean(extended?: ThemeDefinition, config?: PresetConfig): ThemeDefinition;
 
 declare type ColorScheme =
 | "normal"
@@ -556,6 +487,8 @@ PaymentTransactionDetails,
 "type"
 > & { type?: "payment" };
 
+export declare function cssVar(name: string): string;
+
 declare interface CustomBrand {
     name: string;
     isLocal: true;
@@ -1687,313 +1620,13 @@ declare type JssValue =
 
 export declare function loadEvervault(team: string, app: string, config?: CustomConfig): Promise<EvervaultInstance>;
 
-declare function material(extended?: ThemeDefinition): ThemeDefinition {
-    return (utils) => ({
-        styles: {
-            body: {
-                paddingTop: 4,
-            },
-
-            ".field": {
-                position: "relative",
-            },
-
-            label: {
-                top: 10,
-                left: 8,
-                zIndex: 3,
-                fontSize: 14,
-                lineHeight: 1,
-                height: "20px",
-                display: "flex",
-                color: "#717f96",
-                padding: "0 4px",
-                alignItems: "center",
-                position: "absolute",
-                pointerEvents: "none",
-                transformOrigin: "center left",
-                transition: "transform 150ms, background 150ms",
-            },
-
-            input: {
-                height: 40,
-                fontSize: 16,
-                borderRadius: 6,
-                color: "#0a2540",
-                padding: "0 12px",
-                backgroundColor: "#fff",
-                border: "1px solid #e6ebf1",
-
-                "&::placeholder": {
-                    color: "transparent",
-                },
-
-                "&:focus": {
-                    outline: "none",
-                    borderColor: "#63e",
-                },
-            },
-
-            textarea: {
-                height: 40,
-                fontSize: 16,
-                borderRadius: 6,
-                color: "#0a2540",
-                padding: "6 12px",
-                backgroundColor: "#fff",
-                border: "1px solid #e6ebf1",
-
-                "&::placeholder": {
-                    color: "transparent",
-                },
-
-                "&:focus": {
-                    outline: "none",
-                    borderColor: "#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: "#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,
-                    },
-                },
-            },
-            ...(extended ? utils.extend(extended) : {}),
-        },
-    });
-}
+export declare function material(config?: PresetConfig): ThemeDefinition;
 
-declare function minimal(extended?: ThemeDefinition): ThemeDefinition {
-    return (utils) => ({
-        styles: {
-            ":root": {
-                "--icon-offset": "34px",
-            },
-
-            body: {
-                paddingBottom: 2,
-            },
-
-            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: "#717f96",
-                },
-
-                "&:focus": {
-                    outline: "none",
-                    borderColor: "#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: "#717f96",
-                },
-
-                "&:focus": {
-                    outline: "none",
-                    borderColor: "#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: 6,
-                        borderTopRightRadius: 6,
-                    },
-                },
-
-                "& .field:last-child": {
-                    "& input": {
-                        borderBottomRightRadius: 6,
-                        borderBottomLeftRadius: 6,
-                    },
-                },
-            },
-
-            "[ev-component=card][ev-fields*=cvc][ev-fields*=expiry]": {
-                "& .field[ev-name=expiry]": {
-                    "& input": {
-                        borderBottomLeftRadius: 6,
-                    },
-                },
-
-                "& .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: 6,
-                    borderBottomLeftRadius: 6,
-                },
-
-                "& .field:last-child input": {
-                    borderTopRightRadius: 6,
-                    borderBottomRightRadius: 6,
-                },
-            },
-            "[ev-component=card]:has(.icon)": {
-                "& .icon": {
-                    left: 10,
-                    height: 20,
-                    position: "absolute",
-                    top: "var(--icon-offset)",
-                },
-                "& .field[ev-name=number] input": {
-                    paddingLeft: 48,
-                },
-            },
-            ...(extended ? utils.extend(extended) : {}),
-        },
-    });
-}
+export declare function material(extended?: ThemeDefinition, config?: PresetConfig): ThemeDefinition;
+
+export declare function minimal(config?: PresetConfig): ThemeDefinition;
+
+export declare function minimal(extended?: ThemeDefinition, config?: PresetConfig): ThemeDefinition;
 
 declare interface MinimalObservable<T> {
     subscribe(nextOrObserver: ((value: T) => void) | {next: (value: T) => void}): {
@@ -3128,6 +2761,14 @@ declare interface PinPayload {
     value: string | null;
 }
 
+export declare interface PresetConfig {
+    primary?: string;
+    greyTone?: string;
+    roundness?: string;
+    font?: string;
+    selectors?: ThemeStyles;
+}
+
 declare interface Properties<TLength = (string & {}) | 0, TTime = string & {}>
 extends StandardProperties<TLength, TTime>,
 VendorProperties<TLength, TTime>,
@@ -4932,6 +4573,7 @@ declare class RevealCopyButton {
 
 declare interface RevealCopyButtonEvents {
     copy: () => void;
+    error: () => void;
 }
 
 declare interface RevealCopyButtonOptions {
@@ -4976,6 +4618,11 @@ declare class RevealText {
     constructor(reveal: Reveal, client: EvervaultClient, path: string, options?: RevealTextOptions);
     mount(selector: SelectorType): this;
     unmount(): this;
+    on<T extends keyof RevealTextEvents>(event: T, callback: RevealTextEvents[T]): () => void;
+}
+
+declare interface RevealTextEvents {
+    error: () => void;
 }
 
 declare interface RevealTextOptions {
@@ -11929,7 +11576,7 @@ declare interface SwipedCard {
     bin: string | null;
 }
 
-declare type ThemeDefinition = ThemeObject | ThemeFunction;
+export declare type ThemeDefinition = ThemeObject | ThemeFunction;
 
 declare interface ThemeFontFace {
     fontFamily: string;
@@ -11951,7 +11598,9 @@ declare namespace themes {
     export {
         clean,
         material,
-        minimal
+        minimal,
+        PresetConfig,
+        cssVar
     }
 }
 
@@ -12049,6 +11698,7 @@ declare class UIComponents {
      * @deprecated Use `applePay` instead.
      */
     applePayButton(tx: Transaction, opts: ApplePayButtonOptions): ApplePayButton;
+    mountElements(): void;
 }
 
 declare interface VendorLonghandProperties<TLength = (string & {}) | 0, TTime = string & {}> {
@@ -42124,6 +41774,99 @@ declare global {
 
 
 
+declare module "@vitest/expect" {
+	interface MatcherState {
+		environment: string;
+		snapshotState: SnapshotState;
+		task?: Readonly<Test>;
+	}
+	interface ExpectPollOptions {
+		interval?: number;
+		timeout?: number;
+		message?: string;
+	}
+	interface ExpectStatic {
+		assert: Chai.AssertStatic;
+		unreachable: (message?: string) => never;
+		soft: <T>(actual: T, message?: string) => Assertion<T>;
+		poll: <T>(actual: () => T, options?: ExpectPollOptions) => PromisifyAssertion<Awaited<T>>;
+		addEqualityTesters: (testers: Array<Tester>) => void;
+		assertions: (expected: number) => void;
+		hasAssertions: () => void;
+		addSnapshotSerializer: (plugin: Plugin) => void;
+	}
+	interface Assertion<T> {
+		matchSnapshot: SnapshotMatcher<T>;
+		toMatchSnapshot: SnapshotMatcher<T>;
+		toMatchInlineSnapshot: InlineSnapshotMatcher<T>;
+		/**
+		* Checks that an error thrown by a function matches a previously recorded snapshot.
+		*
+		* @param hint - Optional custom error message.
+		*
+		* @example
+		* expect(functionWithError).toThrowErrorMatchingSnapshot();
+		*/
+		toThrowErrorMatchingSnapshot: (hint?: string) => void;
+		/**
+		* Checks that an error thrown by a function matches an inline snapshot within the test file.
+		* Useful for keeping snapshots close to the test code.
+		*
+		* @param snapshot - Optional inline snapshot string to match.
+		* @param hint - Optional custom error message.
+		*
+		* @example
+		* const throwError = () => { throw new Error('Error occurred') };
+		* expect(throwError).toThrowErrorMatchingInlineSnapshot(`"Error occurred"`);
+		*/
+		toThrowErrorMatchingInlineSnapshot: (snapshot?: string, hint?: string) => void;
+		/**
+		* Compares the received value to a snapshot saved in a specified file.
+		* Useful for cases where snapshot content is large or needs to be shared across tests.
+		*
+		* @param filepath - Path to the snapshot file.
+		* @param hint - Optional custom error message.
+		*
+		* @example
+		* await expect(largeData).toMatchFileSnapshot('path/to/snapshot.json');
+		*/
+		toMatchFileSnapshot: (filepath: string, hint?: string) => Promise<void>;
+	}
+}
+
+
+
+
+declare module "@vitest/runner" {
+	interface TestContext {
+		/**
+		* `expect` instance bound to the current test.
+		*
+		* This API is useful for running snapshot tests concurrently because global expect cannot track them.
+		*/
+		readonly expect: ExpectStatic;
+		/** @internal */
+		_local: boolean;
+	}
+	interface TaskMeta {
+		typecheck?: boolean;
+		benchmark?: boolean;
+	}
+	interface File {
+		prepareDuration?: number;
+		environmentLoad?: number;
+	}
+	interface TaskBase {
+		logs?: UserConsoleLog[];
+	}
+	interface TaskResult {
+		benchmark?: BenchmarkResult;
+	}
+}
+
+
+
+
 declare namespace Emitter {
   /**
    * Returns a union of all event types, both public and reserved, for the given emitter.
@@ -42253,99 +41996,6 @@ declare namespace EventMap {
 
 
 
-declare module "@vitest/expect" {
-	interface MatcherState {
-		environment: string;
-		snapshotState: SnapshotState;
-		task?: Readonly<Test>;
-	}
-	interface ExpectPollOptions {
-		interval?: number;
-		timeout?: number;
-		message?: string;
-	}
-	interface ExpectStatic {
-		assert: Chai.AssertStatic;
-		unreachable: (message?: string) => never;
-		soft: <T>(actual: T, message?: string) => Assertion<T>;
-		poll: <T>(actual: () => T, options?: ExpectPollOptions) => PromisifyAssertion<Awaited<T>>;
-		addEqualityTesters: (testers: Array<Tester>) => void;
-		assertions: (expected: number) => void;
-		hasAssertions: () => void;
-		addSnapshotSerializer: (plugin: Plugin) => void;
-	}
-	interface Assertion<T> {
-		matchSnapshot: SnapshotMatcher<T>;
-		toMatchSnapshot: SnapshotMatcher<T>;
-		toMatchInlineSnapshot: InlineSnapshotMatcher<T>;
-		/**
-		* Checks that an error thrown by a function matches a previously recorded snapshot.
-		*
-		* @param hint - Optional custom error message.
-		*
-		* @example
-		* expect(functionWithError).toThrowErrorMatchingSnapshot();
-		*/
-		toThrowErrorMatchingSnapshot: (hint?: string) => void;
-		/**
-		* Checks that an error thrown by a function matches an inline snapshot within the test file.
-		* Useful for keeping snapshots close to the test code.
-		*
-		* @param snapshot - Optional inline snapshot string to match.
-		* @param hint - Optional custom error message.
-		*
-		* @example
-		* const throwError = () => { throw new Error('Error occurred') };
-		* expect(throwError).toThrowErrorMatchingInlineSnapshot(`"Error occurred"`);
-		*/
-		toThrowErrorMatchingInlineSnapshot: (snapshot?: string, hint?: string) => void;
-		/**
-		* Compares the received value to a snapshot saved in a specified file.
-		* Useful for cases where snapshot content is large or needs to be shared across tests.
-		*
-		* @param filepath - Path to the snapshot file.
-		* @param hint - Optional custom error message.
-		*
-		* @example
-		* await expect(largeData).toMatchFileSnapshot('path/to/snapshot.json');
-		*/
-		toMatchFileSnapshot: (filepath: string, hint?: string) => Promise<void>;
-	}
-}
-
-
-
-
-declare module "@vitest/runner" {
-	interface TestContext {
-		/**
-		* `expect` instance bound to the current test.
-		*
-		* This API is useful for running snapshot tests concurrently because global expect cannot track them.
-		*/
-		readonly expect: ExpectStatic;
-		/** @internal */
-		_local: boolean;
-	}
-	interface TaskMeta {
-		typecheck?: boolean;
-		benchmark?: boolean;
-	}
-	interface File {
-		prepareDuration?: number;
-		environmentLoad?: number;
-	}
-	interface TaskBase {
-		logs?: UserConsoleLog[];
-	}
-	interface TaskResult {
-		benchmark?: BenchmarkResult;
-	}
-}
-
-
-
-
 
 declare namespace buildConnector {
   export type BuildOptions = (ConnectionOptions | TcpNetConnectOpts | IpcNetConnectOpts) & {

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@evervault/js",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "description": "Evervault.js loader for client-side browser applications",
   "license": "MIT",
   "type": "module",
@@ -20,10 +20,10 @@
     "typescript": "5.6.3",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.2",
-    "@evervault/browser": "2.65.0",
-    "tsconfig": "0.1.0",
+    "themes": "0.1.24",
     "types": "0.23.1",
-    "themes": "0.1.24"
+    "@evervault/browser": "2.69.0",
+    "tsconfig": "0.1.0"
   },
   "scripts": {
     "build": "vite build",