@verbb/formie-vue 1.0.13 → 1.0.14

package/dist/index.js

@@ -1,29 +1,29 @@
-import { FORMIE_HTML_EVENT_NAMES as e, createFormieClient as t } from "@verbb/formie-browser";
-import { computed as n, defineComponent as r, h as i, inject as a, onBeforeUnmount as o, onMounted as s, provide as c, ref as l, shallowRef as u, watch as d } from "vue";
-import { FRONTEND_CLIENT_EVENT_NAMES as f, compositePartDefinitions as p, createFrontendFormInstance as m, createGraphqlFrontendTransport as h, createRepeaterRowValue as g, createRestFrontendTransport as _, isCompositeField as v, isFileField as y, isKnownFrontendFieldType as b, isRepeatableField as x, loadFrontendEnvelope as S, loadGraphqlFrontendEnvelope as ee, repeaterRowDefinitions as te } from "@verbb/formie-core";
+import { FORMIE_HTML_EVENT_NAMES as e, createFormieClient as t, mountClientRenderedModules as n } from "@verbb/formie-browser";
+import { computed as r, defineComponent as i, h as a, inject as o, onBeforeUnmount as s, onMounted as c, provide as l, ref as u, shallowRef as d, watch as f } from "vue";
+import { CLIENT_FORM_EVENT_NAMES as p, clientActionAllowed as m, compositePartDefinitions as h, createClientFormInstance as g, createGraphqlClientTransport as _, createRepeaterRowValue as v, createRestClientTransport as y, getClientErrorAriaLive as b, getClientFieldErrorId as x, isCompositeField as S, isFileField as C, isKnownClientFieldType as w, isRepeatableField as ee, loadClientFormBootstrap as te, loadGraphqlClientFormBootstrap as ne, repeaterRowDefinitions as T } from "@verbb/formie-core";
 //#region src/stable.ts
-function C(e, t) {
+function E(e, t) {
 	if (e == null) return String(e);
 	if (typeof e == "string") return JSON.stringify(e);
 	if (typeof e == "number" || typeof e == "boolean") return String(e);
 	if (typeof e == "function") return "[function]";
 	if (typeof File < "u" && e instanceof File) return `[file:${e.name}:${e.size}:${e.type}]`;
 	if (typeof Blob < "u" && e instanceof Blob) return `[blob:${e.size}:${e.type}]`;
-	if (Array.isArray(e)) return `[${e.map((e) => C(e, t)).join(",")}]`;
+	if (Array.isArray(e)) return `[${e.map((e) => E(e, t)).join(",")}]`;
 	if (typeof e == "object") {
 		if (t.has(e)) return "[circular]";
 		t.add(e);
-		let n = Object.entries(e).sort(([e], [t]) => e.localeCompare(t)).map(([e, n]) => `${JSON.stringify(e)}:${C(n, t)}`);
+		let n = Object.entries(e).sort(([e], [t]) => e.localeCompare(t)).map(([e, n]) => `${JSON.stringify(e)}:${E(n, t)}`);
 		return t.delete(e), `{${n.join(",")}}`;
 	}
 	return JSON.stringify(String(e));
 }
-function w(e) {
-	return C(e, /* @__PURE__ */ new WeakSet());
+function D(e) {
+	return E(e, /* @__PURE__ */ new WeakSet());
 }
 //#endregion
 //#region src/definition-form.ts
-var T = Symbol("formie-definition-context"), E = {
+var O = Symbol("formie-definition-context"), k = {
 	field: {
 		type: Object,
 		required: !0
@@ -40,6 +40,14 @@ var T = Symbol("formie-definition-context"), E = {
 		type: String,
 		required: !0
 	},
+	errorId: {
+		type: String,
+		default: ""
+	},
+	errorAriaLive: {
+		type: String,
+		default: "polite"
+	},
 	disabled: {
 		type: Boolean,
 		default: !1
@@ -53,64 +61,80 @@ var T = Symbol("formie-definition-context"), E = {
 		required: !0
 	}
 };
-function D() {
-	let e = a(T);
+function A() {
+	let e = o(O);
 	if (!e) throw Error("Formie definition composables must be used within a client-rendered <FormieForm>.");
 	return e;
 }
-function O(e) {
+function j(e) {
 	return "definition" in e;
 }
-async function k(e) {
-	return O(e) ? e.definition : e.transport === "graphql" ? ee({
+async function re(e) {
+	return j(e) ? e.definition : e.transport === "graphql" ? ne({
 		endpoint: e.endpoint,
+		profile: e.profile,
 		formHandle: e.formHandle,
-		siteId: e.siteId
-	}) : S({
+		siteId: e.siteId,
+		query: e.query
+	}) : te({
 		endpoint: e.endpoint,
+		profile: e.profile,
 		formHandle: e.formHandle,
-		siteId: e.siteId
+		siteId: e.siteId,
+		query: e.query
 	});
 }
-function ne(e) {
-	let t = O(e) ? e.transport : {
+function ie(e) {
+	let t = j(e) ? e.transport : {
 		type: e.transport,
 		endpoint: e.endpoint,
+		profile: e.profile,
 		formHandle: e.formHandle,
-		siteId: e.siteId
+		siteId: e.siteId,
+		query: e.query
 	};
-	return t.type === "graphql" ? h(t) : _(t);
+	return t.type === "graphql" ? _(t) : y(t);
 }
-function re(e) {
+function ae(e) {
 	return e.pages.flatMap((e) => e.rows).flatMap((e) => e.fields);
 }
-function A(e) {
-	if (b(e.type)) return e.type;
+function M(e) {
+	if (w(e.type)) return e.type;
 	let t = typeof e.input.fieldKind == "string" ? e.input.fieldKind : null;
 	return t === "text" ? "single-line-text" : t === "textarea" ? "multi-line-text" : t === "boolean" ? "agree" : t === "file" ? "file" : e.type;
 }
-function ie(e, t, n) {
+function N(e, t, n) {
 	let r = new Set(e.moduleRefs || []);
-	return t.modules.find((e) => r.has(e.id) && e.capability === n) || null;
+	return t.modules.entries.find((e) => r.has(e.key) && e.moduleId === n) || null;
 }
-function j(e, t, n, r) {
+function P(e, t, n, r) {
 	if (!n) return null;
-	let a = e.slots.value[t];
-	return a ? i(a, {
+	let i = e.slots.value[t];
+	return i ? a(i, {
 		slotKey: t,
 		attributes: r
 	}, { default: () => [n] }) : n;
 }
-var M = r({
+var F = i({
 	name: "FormieVueDefaultErrorSummary",
-	props: { errors: {
-		type: Array,
-		required: !0
-	} },
+	props: {
+		errors: {
+			type: Array,
+			required: !0
+		},
+		errorId: {
+			type: String,
+			required: !0
+		},
+		errorAriaLive: {
+			type: String,
+			required: !0
+		}
+	},
 	setup(e) {
-		return () => e.errors.length === 0 ? null : i("div", { class: "formie-vue-errors" }, [i("ul", null, e.errors.map((e, t) => i("li", { key: `${e}:${t}` }, e)))]);
+		return () => e.errors.length === 0 ? null : a("div", { class: "formie-vue-errors" }, [a("ul", null, e.errors.map((e, t) => a("li", { key: `${e}:${t}` }, e)))]);
 	}
-}), N = r({
+}), I = i({
 	name: "FormieVueDefaultField",
 	props: {
 		field: {
@@ -120,27 +144,63 @@ var M = r({
 		errors: {
 			type: Array,
 			required: !0
+		},
+		errorId: {
+			type: String,
+			required: !0
+		},
+		errorAriaLive: {
+			type: String,
+			required: !0
 		}
 	},
 	setup(e, t) {
-		let n = D();
+		let n = A();
 		return () => {
 			let r = t.slots.default?.() || [];
-			return i("div", {
+			return a("div", {
 				class: "formie-vue-field",
-				"data-field-type": e.field.type
+				"data-formie-field-uid": e.field.uid,
+				"data-formie-field-handle": e.field.handle,
+				"data-formie-field-type": e.field.type
 			}, [
-				e.field.label ? j(n, "label", i("label", { class: "formie-vue-label" }, e.field.label), { class: "formie-vue-label" }) : null,
-				e.field.instructions ? j(n, "instructions", i("div", {
+				e.field.label ? P(n, "label", a("label", { class: "formie-vue-label" }, e.field.label), { class: "formie-vue-label" }) : null,
+				e.field.instructions ? P(n, "instructions", a("div", {
 					class: "formie-vue-description",
 					innerHTML: e.field.instructions
 				}), { class: "formie-vue-description" }) : null,
-				j(n, "input", i("div", { class: "formie-vue-input" }, r), { class: "formie-vue-input" }),
-				e.errors.length > 0 ? j(n, "errors", i("ul", { class: "formie-vue-field-errors" }, e.errors.map((e, t) => i("li", { key: `${e}:${t}` }, e))), { class: "formie-vue-field-errors" }) : null
+				P(n, "input", a("div", { class: "formie-vue-input" }, r), { class: "formie-vue-input" }),
+				P(n, "errors", a("ul", {
+					id: e.errorId,
+					class: "formie-vue-field-errors",
+					style: e.errors.length === 0 ? { position: "absolute" } : void 0,
+					"data-formie-field-errors": !0,
+					"aria-live": e.errorAriaLive === "off" ? void 0 : e.errorAriaLive,
+					"aria-atomic": e.errorAriaLive === "off" ? void 0 : "true"
+				}, e.errors.map((e, t) => a("li", { key: `${e}:${t}` }, e))), {
+					id: e.errorId,
+					class: "formie-vue-field-errors",
+					style: e.errors.length === 0 ? { position: "absolute" } : void 0,
+					"data-formie-field-errors": !0,
+					"aria-live": e.errorAriaLive === "off" ? void 0 : e.errorAriaLive,
+					"aria-atomic": e.errorAriaLive === "off" ? void 0 : "true"
+				})
 			]);
 		};
 	}
-}), P = r({
+}), L = i({ setup(e, { slots: t }) {
+	let r = A(), i = u(null), o = !1, l;
+	return c(async () => {
+		let e = r.instance.value;
+		e.setBrowserModuleGuard(() => {
+			throw Error("Form features are still loading.");
+		});
+		let t = await n(i.value, e);
+		o ? t.destroy() : l = t;
+	}), s(() => {
+		o = !0, l?.destroy();
+	}), () => a("div", { ref: i }, t.default?.());
+} }), R = i({
 	name: "FormieVueDefaultForm",
 	props: {
 		definition: {
@@ -165,16 +225,18 @@ var M = r({
 		}
 	},
 	setup(e, t) {
-		return () => i("form", {
+		return () => a("form", {
 			class: e.className,
-			onSubmit: (t) => {
-				t.preventDefault(), e.onSubmit();
+			onSubmit: async (t) => {
+				t.preventDefault();
+				let n = t.currentTarget;
+				await e.onSubmit(), requestAnimationFrame(() => n.querySelector("[aria-invalid=\"true\"]")?.focus());
 			},
 			"data-formie-definition": e.definition.handle,
 			"data-formie-render-id": e.session.tokens.render
 		}, t.slots.default?.() || []);
 	}
-}), F = r({
+}), z = i({
 	name: "FormieVueDefaultPage",
 	props: {
 		page: {
@@ -187,56 +249,51 @@ var M = r({
 		}
 	},
 	setup(e, t) {
-		return () => i("section", {
+		return () => a("section", {
 			"data-page-id": e.page.id,
 			class: "formie-vue-page"
 		}, t.slots.default?.() || []);
 	}
-}), I = r({
+}), B = i({
 	name: "FormieVueSignatureFieldInput",
-	props: E,
+	props: k,
 	setup(e) {
-		let t = D(), r = l(null), a = u(null), c = l(null), f = n(() => ie(e.field, t.state.value?.definition || { modules: [] }, "draw-signature")?.config), p = n(() => {
-			let e = f.value?.options;
-			return typeof e?.backgroundColor == "string" ? e.backgroundColor : "#ffffff";
-		}), m = n(() => {
-			let e = f.value?.options;
-			return typeof e?.penColor == "string" ? e.penColor : "#000000";
-		}), h = n(() => {
-			let e = f.value?.options;
-			return Number(e?.penWeight ?? 2) || 2;
-		}), g = n(() => typeof e.value == "string" ? e.value : ""), _ = !1, v = () => void 0, y = () => void 0;
-		return s(() => {
+		let t = A(), n = u(null), i = d(null), o = u(null), l = r(() => N(e.field, t.state.value?.definition || { modules: {
+			contractVersion: 2,
+			surface: "client-rendered",
+			entries: []
+		} }, "formie:signature")?.config), p = r(() => typeof l.value?.backgroundColor == "string" ? l.value.backgroundColor : "#ffffff"), m = r(() => typeof l.value?.penColor == "string" ? l.value.penColor : "#000000"), h = r(() => Number(l.value?.penWeight ?? 2) || 2), g = r(() => typeof e.value == "string" ? e.value : ""), _ = !1, v = () => void 0, y = () => void 0;
+		return c(() => {
 			(async () => {
 				try {
-					let t = r.value;
+					let t = n.value;
 					if (!t) return;
-					let { default: n } = await import("./signature_pad-D-mX46zR.js");
+					let { default: r } = await import("./signature_pad-dbpVgfTh.js");
 					if (_) return;
-					let i = new n(t, {
+					let a = new r(t, {
 						backgroundColor: p.value,
 						penColor: m.value,
 						minWidth: h.value,
 						maxWidth: h.value
-					}), o = () => {
+					}), s = () => {
 						let e = typeof window > "u" ? 1 : Math.max(window.devicePixelRatio || 1, 1), n = Math.max(1, Math.floor(t.clientWidth || 480)), r = t.getContext("2d");
-						t.width = n * e, t.height = 192 * e, t.style.height = "192px", r && (r.setTransform(1, 0, 0, 1, 0, 0), r.scale(e, e)), i.clear();
-					}, s = () => {
-						e.setValue(i.isEmpty() ? "" : i.toDataURL());
+						t.width = n * e, t.height = 192 * e, t.style.height = "192px", r && (r.setTransform(1, 0, 0, 1, 0, 0), r.scale(e, e)), a.clear();
+					}, c = () => {
+						e.setValue(a.isEmpty() ? "" : a.toDataURL());
 					};
-					o(), i.addEventListener?.("endStroke", s), v = () => {
-						i.removeEventListener?.("endStroke", s);
-					}, typeof window < "u" && (window.addEventListener("resize", o), y = () => {
-						window.removeEventListener("resize", o);
-					}), a.value = i, c.value = null;
+					s(), a.addEventListener?.("endStroke", c), v = () => {
+						a.removeEventListener?.("endStroke", c);
+					}, typeof window < "u" && (window.addEventListener("resize", s), y = () => {
+						window.removeEventListener("resize", s);
+					}), i.value = a, o.value = null;
 				} catch (e) {
-					_ || (c.value = e.message || "Unable to load signature support.");
+					_ || (o.value = e.message || "Unable to load signature support.");
 				}
 			})();
-		}), o(() => {
-			_ = !0, v(), y(), a.value = null;
-		}), d(g, (e) => {
-			let t = a.value;
+		}), s(() => {
+			_ = !0, v(), y(), i.value = null;
+		}), f(g, (e) => {
+			let t = i.value;
 			if (t) {
 				if (!e) {
 					t.isEmpty() || t.clear();
@@ -246,50 +303,50 @@ var M = r({
 					t.fromDataURL(e);
 				} catch {}
 			}
-		}, { immediate: !0 }), () => i("div", { class: "formie-vue-signature" }, [
-			i("canvas", {
+		}, { immediate: !0 }), () => a("div", { class: "formie-vue-signature" }, [
+			a("canvas", {
 				key: "canvas",
-				ref: r,
+				ref: n,
 				"data-formie-signature-canvas": !0,
 				style: e.disabled ? { pointerEvents: "none" } : void 0
 			}),
-			i("button", {
+			a("button", {
 				key: "clear",
 				type: "button",
 				disabled: e.disabled,
 				"data-formie-signature-clear": !0,
 				onClick: () => {
-					a.value?.clear(), e.setValue("");
+					i.value?.clear(), e.setValue("");
 				}
 			}, "Clear"),
-			c.value ? i("div", {
+			o.value ? a("div", {
 				key: "error",
 				class: "formie-vue-unsupported"
-			}, c.value) : null
+			}, o.value) : null
 		]);
 	}
-}), L = r({
+}), V = i({
 	name: "FormieVueCompositeFieldInput",
-	props: E,
+	props: k,
 	setup(e) {
-		let t = D();
+		let t = A();
 		return () => {
 			let n = t.state.value;
 			if (!n) return null;
-			let r = p(e.field), a = e.value && typeof e.value == "object" ? e.value : {};
-			return r.length === 0 ? i("div", { class: "formie-vue-unsupported" }, `Unsupported field type: ${e.field.type}`) : i("div", { class: "formie-vue-name-grid" }, r.filter((e) => e.meta?.hidden !== !0).map((t) => {
+			let r = h(e.field), i = e.value && typeof e.value == "object" ? e.value : {};
+			return r.length === 0 ? a("div", { class: "formie-vue-unsupported" }, `Unsupported field type: ${e.field.type}`) : a("div", { class: "formie-vue-name-grid" }, r.filter((e) => e.meta?.hidden !== !0).map((t) => {
 				let r = `${e.errorKey}.${t.handle}`;
-				return i(z, {
+				return a(U, {
 					key: `${e.field.id}:${t.handle}`,
 					field: t,
-					value: a[t.handle],
+					value: i[t.handle],
 					errors: n.errors.fields[r] || [],
 					errorKey: r,
 					disabled: e.disabled || t.meta?.disabled === !0,
 					hidden: !1,
 					setValue(n) {
 						e.setValue({
-							...a,
+							...i,
 							[t.handle]: n
 						});
 					}
@@ -297,78 +354,83 @@ var M = r({
 			}));
 		};
 	}
-}), R = r({
+}), H = i({
 	name: "FormieVueFileFieldInput",
-	props: E,
+	props: k,
 	setup(e) {
 		return () => {
-			let t = e.field.input, n = Array.isArray(e.value) ? e.value : [], r = t.multiple === !0, a = n.map((e, t) => e && typeof e == "object" && "name" in e && typeof e.name == "string" ? e.name : e && typeof e == "object" && "filename" in e && typeof e.filename == "string" ? e.filename : e && typeof e == "object" && "assetId" in e && typeof e.assetId == "number" ? `Asset #${e.assetId}` : `File ${t + 1}`);
-			return i("div", { class: "formie-vue-file" }, [i("input", {
+			let t = e.field.input, n = Array.isArray(e.value) ? e.value : [], r = t.multiple === !0, i = n.map((e, t) => e && typeof e == "object" && "name" in e && typeof e.name == "string" ? e.name : e && typeof e == "object" && "filename" in e && typeof e.filename == "string" ? e.filename : e && typeof e == "object" && "assetId" in e && typeof e.assetId == "number" ? `Asset #${e.assetId}` : `File ${t + 1}`);
+			return a("div", { class: "formie-vue-file" }, [a("input", {
 				key: "input",
 				type: "file",
+				...q(e.errors, e.errorId),
 				disabled: e.disabled,
 				multiple: r,
 				onChange: (t) => {
 					let n = t.target;
 					e.setValue(Array.from(n.files || []));
 				}
-			}), a.length > 0 ? i("ul", {
+			}), i.length > 0 ? a("ul", {
 				key: "summary",
 				class: "formie-vue-field-errors"
-			}, a.map((e, t) => i("li", { key: `${e}:${t}` }, e))) : null]);
+			}, i.map((e, t) => a("li", { key: `${e}:${t}` }, e))) : null]);
 		};
 	}
-}), z = r({
+}), U = i({
 	name: "FormieVueConfigFieldNode",
-	props: E,
+	props: k,
 	setup(e) {
-		let t = D();
+		let t = A();
 		return () => {
 			let n = t.state.value;
 			if (!n) return null;
 			let r = n.fieldStates[e.field.id]?.hidden === !0;
 			if (r) return null;
-			let a = A(e.field), o = t.fieldComponents.value[e.field.type] || t.fieldComponents.value[a] || W;
-			return i(t.components.value.Field || N, {
+			let i = M(e.field), o = t.fieldComponents.value[e.field.type] || t.fieldComponents.value[i] || oe, s = t.components.value.Field || I, c = x(n.session, e.errorKey), l = b(n.definition);
+			return a(s, {
 				field: e.field,
-				errors: e.errors
-			}, { default: () => [i(o, {
+				errors: e.errors,
+				errorId: c,
+				errorAriaLive: l
+			}, { default: () => [a(o, {
 				field: e.field,
 				value: e.value,
 				errors: e.errors,
 				errorKey: e.errorKey,
+				errorId: c,
+				errorAriaLive: l,
 				disabled: e.disabled,
 				hidden: r,
 				setValue: e.setValue
 			})] });
 		};
 	}
-}), B = r({
+}), W = i({
 	name: "FormieVueConfigField",
 	props: { field: {
 		type: Object,
 		required: !0
 	} },
 	setup(e) {
-		let t = D();
+		let t = A();
 		return () => {
 			let n = t.state.value, r = t.instance.value;
 			if (!n || !r) return null;
-			let a = n.fieldStates[e.field.id];
-			return i(z, {
+			let i = n.fieldStates[e.field.id];
+			return a(U, {
 				field: e.field,
 				value: n.values[e.field.id],
 				errors: n.errors.fields[e.field.id] || [],
 				errorKey: e.field.id,
-				disabled: a?.disabled === !0,
-				hidden: a?.hidden === !0,
+				disabled: i?.disabled === !0,
+				hidden: i?.hidden === !0,
 				setValue(t) {
 					r.setValue(e.field.id, t);
 				}
 			});
 		};
 	}
-}), V = r({
+}), G = i({
 	name: "FormieVueConfigRow",
 	props: {
 		row: {
@@ -397,23 +459,23 @@ var M = r({
 		}
 	},
 	setup(e) {
-		let t = D();
+		let t = A();
 		return () => {
 			let n = t.state.value;
-			return n ? i("div", { class: "formie-vue-row" }, e.row.fields.map((t, r) => {
-				if (!e.values || !e.setFieldValue) return i(B, {
+			return n ? a("div", { class: "formie-vue-row" }, e.row.fields.map((t, r) => {
+				if (!e.values || !e.setFieldValue) return a(W, {
 					key: t.id || `${e.rowIndex}:${r}`,
 					field: t
 				});
-				let a = `${e.errorPrefix}.${t.handle}`;
-				return i(z, {
+				let i = `${e.errorPrefix}.${t.handle}`;
+				return a(U, {
 					key: t.id || `${e.rowIndex}:${r}`,
 					field: t,
 					value: e.values[t.handle],
-					errors: n.errors.fields[a] || [],
-					errorKey: a,
-					disabled: e.disabled === !0 || n.fieldStates[t.id]?.disabled === !0,
-					hidden: n.fieldStates[t.id]?.hidden === !0,
+					errors: n.errors.fields[i] || [],
+					errorKey: i,
+					disabled: e.disabled === !0 || n.fieldStates[i]?.disabled === !0,
+					hidden: n.fieldStates[i]?.hidden === !0,
 					setValue(n) {
 						e.setFieldValue?.(t, n);
 					}
@@ -421,26 +483,26 @@ var M = r({
 			})) : null;
 		};
 	}
-}), H = r({
+}), K = i({
 	name: "FormieVueRepeaterFieldInput",
-	props: E,
+	props: k,
 	setup(e) {
-		let t = D();
+		let t = A();
 		return () => {
 			let n = t.state.value;
 			if (!n) return null;
-			let r = te(e.field), a = Array.isArray(e.value) ? e.value : [], o = e.field.input, s = Number(o.minRows ?? 0) || 0, c = Number(o.maxRows ?? 0) || 0, l = !e.disabled && (c <= 0 || a.length < c);
-			return r.length === 0 ? i("div", { class: "formie-vue-unsupported" }, "Unsupported repeater field.") : i("div", {
+			let r = T(e.field), i = Array.isArray(e.value) ? e.value : [], o = e.field.input, s = Number(o.minRows ?? 0) || 0, c = Number(o.maxRows ?? 0) || 0, l = !e.disabled && (c <= 0 || i.length < c);
+			return r.length === 0 ? a("div", { class: "formie-vue-unsupported" }, "Unsupported repeater field.") : a("div", {
 				class: "formie-vue-repeater",
 				"data-formie-repeater-container": !0
 			}, [
-				...a.map((t, n) => {
+				...i.map((t, n) => {
 					let o = `${e.field.id}:${n}`;
-					return i("div", {
+					return a("div", {
 						key: o,
 						class: "formie-vue-repeater-item",
 						"data-formie-repeater-item": !0
-					}, [...r.map((r, s) => i(V, {
+					}, [...r.map((r, s) => a(G, {
 						key: `${o}:${s}`,
 						row: r,
 						rowIndex: s,
@@ -448,82 +510,95 @@ var M = r({
 						errorPrefix: `${e.errorKey}.${n}`,
 						disabled: e.disabled,
 						setFieldValue(t, r) {
-							let i = a.map((e, i) => i === n ? {
+							let a = i.map((e, i) => i === n ? {
 								...e,
 								[t.handle]: r
 							} : e);
-							e.setValue(i);
+							e.setValue(a);
 						}
-					})), i("button", {
+					})), a("button", {
 						key: "remove",
 						type: "button",
-						disabled: e.disabled || s > 0 && a.length <= s,
+						disabled: e.disabled || s > 0 && i.length <= s,
 						"data-formie-repeater-remove": !0,
 						onClick: () => {
-							e.setValue(a.filter((e, t) => t !== n));
+							e.setValue(i.filter((e, t) => t !== n));
 						}
 					}, "Remove")]);
 				}),
-				i("button", {
+				a("button", {
 					key: "add",
 					type: "button",
 					disabled: !l,
 					"data-formie-repeater-add": e.field.handle,
 					onClick: () => {
-						e.setValue([...a, g(e.field)]);
+						e.setValue([...i, v(e.field)]);
 					}
 				}, String(o.addLabel ?? "Add another row")),
-				n.errors.fields[e.errorKey] && n.errors.fields[e.errorKey].length > 0 ? i("ul", {
+				n.errors.fields[e.errorKey] && n.errors.fields[e.errorKey].length > 0 ? a("ul", {
 					key: "errors",
 					class: "formie-vue-field-errors"
-				}, n.errors.fields[e.errorKey].map((e, t) => i("li", { key: `${e}:${t}` }, e))) : null
+				}, n.errors.fields[e.errorKey].map((e, t) => a("li", { key: `${e}:${t}` }, e))) : null
 			]);
 		};
 	}
 });
-function U(e, t, n, r) {
-	let a = e.input;
-	if (e.type === "multi-line-text") return i("textarea", {
+function q(e, t) {
+	return e.length > 0 ? {
+		"aria-invalid": "true",
+		"aria-errormessage": t,
+		"aria-describedby": t
+	} : {};
+}
+function J(e, t, n, r, i = [], o = "") {
+	let s = e.input;
+	if (e.type === "multi-line-text") return a("textarea", {
+		"aria-label": e.label || e.handle,
+		...q(i, o),
 		value: typeof t == "string" ? t : "",
 		disabled: n,
-		placeholder: typeof a.placeholder == "string" ? a.placeholder : void 0,
+		placeholder: typeof s.placeholder == "string" ? s.placeholder : void 0,
 		onInput: (e) => {
 			let t = e.target;
 			r(t.value);
 		}
 	});
 	if (e.type === "dropdown") {
-		let o = Array.isArray(a.options) ? a.options : [], s = a.multiple === !0;
-		return i("select", {
-			value: s ? void 0 : typeof t == "string" ? t : "",
+		let c = Array.isArray(s.options) ? s.options : [], l = s.multiple === !0;
+		return a("select", {
+			"aria-label": e.label || e.handle,
+			...q(i, o),
+			value: l ? void 0 : typeof t == "string" ? t : "",
 			disabled: n,
-			multiple: s,
+			multiple: l,
 			onChange: (e) => {
 				let t = e.target;
-				if (s) {
+				if (l) {
 					r(Array.from(t.selectedOptions).map((e) => e.value));
 					return;
 				}
 				r(t.value);
 			}
-		}, o.map((t) => {
+		}, c.map((t) => {
 			let n = String(t.value ?? "");
-			return i("option", {
+			return a("option", {
 				key: `${e.id}:${n}`,
 				value: n,
 				disabled: t.disabled === !0
 			}, String(t.label ?? n));
 		}));
 	}
-	let o = typeof a.inputType == "string" ? a.inputType : e.type === "email" ? "email" : e.type === "phone" ? "tel" : e.type === "number" ? "number" : "text";
-	return i("input", {
-		type: o,
+	let c = typeof s.inputType == "string" ? s.inputType : e.type === "email" ? "email" : e.type === "phone" ? "tel" : e.type === "number" ? "number" : "text";
+	return a("input", {
+		"aria-label": e.label || e.handle,
+		...q(i, o),
+		type: c,
 		value: typeof t == "string" || typeof t == "number" ? String(t) : "",
 		disabled: n,
-		placeholder: typeof a.placeholder == "string" ? a.placeholder : void 0,
+		placeholder: typeof s.placeholder == "string" ? s.placeholder : void 0,
 		onInput: (e) => {
 			let t = e.target;
-			if (o === "number") {
+			if (c === "number") {
 				let e = t.valueAsNumber;
 				r(Number.isFinite(e) ? e : "");
 				return;
@@ -532,134 +607,140 @@ function U(e, t, n, r) {
 		}
 	});
 }
-var W = r({
+var oe = i({
 	name: "FormieVueDefaultFieldInput",
-	props: E,
+	props: k,
 	setup(e) {
 		return () => {
-			let t = e.field.input, n = A(e.field);
-			if (v(e.field)) return i(L, e);
-			if (x(e.field)) return i(H, e);
-			if (y(e.field)) return i(R, e);
-			if (n === "signature") return i(I, e);
-			if (n === "multi-line-text" || n === "dropdown") return U(e.field, e.value, e.disabled, e.setValue);
-			if (n === "radio") return i("div", { class: "formie-vue-choices" }, (Array.isArray(t.options) ? t.options : []).map((t) => {
-				let n = String(t.value ?? ""), r = e.disabled || t.disabled === !0;
-				return i("label", { key: `${e.field.id}:${n}` }, [i("input", {
-					key: "input",
-					type: "radio",
-					checked: e.value === n,
-					disabled: r,
-					onChange: () => {
-						e.setValue(n);
-					}
-				}), i("span", { key: "label" }, String(t.label ?? n))]);
-			}));
+			let t = e.field.input, n = M(e.field);
+			if (S(e.field)) return a(V, e);
+			if (ee(e.field)) return a(K, e);
+			if (C(e.field)) return a(H, e);
+			if (n === "signature") return a(B, e);
+			if (n === "multi-line-text" || n === "dropdown") return J(e.field, e.value, e.disabled, e.setValue, e.errors, e.errorId);
+			if (n === "radio") {
+				let n = Array.isArray(t.options) ? t.options : [];
+				return a("div", { class: "formie-vue-choices" }, n.map((t) => {
+					let n = String(t.value ?? ""), r = e.disabled || t.disabled === !0;
+					return a("label", { key: `${e.field.id}:${n}` }, [a("input", {
+						key: "input",
+						type: "radio",
+						...q(e.errors, e.errorId),
+						checked: e.value === n,
+						disabled: r,
+						onChange: () => {
+							e.setValue(n);
+						}
+					}), a("span", { key: "label" }, String(t.label ?? n))]);
+				}));
+			}
 			if (n === "checkboxes") {
 				let n = Array.isArray(t.options) ? t.options : [], r = Array.isArray(e.value) ? e.value.map((e) => String(e)) : [];
-				return i("div", { class: "formie-vue-choices" }, n.map((t) => {
-					let n = String(t.value ?? ""), a = r.includes(n), o = e.disabled || t.disabled === !0;
-					return i("label", { key: `${e.field.id}:${n}` }, [i("input", {
+				return a("div", { class: "formie-vue-choices" }, n.map((t) => {
+					let n = String(t.value ?? ""), i = r.includes(n), o = e.disabled || t.disabled === !0;
+					return a("label", { key: `${e.field.id}:${n}` }, [a("input", {
 						key: "input",
 						type: "checkbox",
-						checked: a,
+						...q(e.errors, e.errorId),
+						checked: i,
 						disabled: o,
 						onChange: () => {
-							let t = a ? r.filter((e) => e !== n) : [...r, n];
+							let t = i ? r.filter((e) => e !== n) : [...r, n];
 							e.setValue(t);
 						}
-					}), i("span", { key: "label" }, String(t.label ?? n))]);
+					}), a("span", { key: "label" }, String(t.label ?? n))]);
 				}));
 			}
 			if (n === "agree") {
 				let n = typeof t.descriptionHtml == "string" ? t.descriptionHtml : null;
-				return i("label", { class: "formie-vue-boolean" }, [i("input", {
+				return a("label", { class: "formie-vue-boolean" }, [a("input", {
 					key: "input",
 					type: "checkbox",
+					...q(e.errors, e.errorId),
 					checked: e.value === !0,
 					disabled: e.disabled,
 					onChange: (t) => {
 						let n = t.target;
 						e.setValue(n.checked);
 					}
-				}), n ? i("span", {
+				}), n ? a("span", {
 					key: "description",
 					innerHTML: n
-				}) : i("span", { key: "description" }, e.field.label)]);
+				}) : a("span", { key: "description" }, e.field.label)]);
 			}
-			return b(n) ? U(e.field, e.value, e.disabled, e.setValue) : i("div", { class: "formie-vue-unsupported" }, `Unsupported field type: ${String(e.field.meta?.fieldType ?? e.field.type)}`);
+			return w(n) ? J(e.field, e.value, e.disabled, e.setValue, e.errors, e.errorId) : a("div", { class: "formie-vue-unsupported" }, `Unsupported field type: ${String(e.field.meta?.fieldType ?? e.field.type)}`);
 		};
 	}
-}), G = r({
+}), se = i({
 	name: "FormieVueConfigPageActions",
 	setup() {
-		let e = D();
+		let e = A();
 		return () => {
 			let t = e.state.value, n = e.instance.value;
 			if (!t || !n) return null;
 			let r = t.definition.pages.find((e) => e.id === t.currentPageId);
 			if (!r) return null;
-			let a = [];
+			let i = [];
 			return r.actions.secondary.forEach((e) => {
-				a.push(i("button", {
+				i.push(a("button", {
 					key: e.type,
 					type: "button",
 					onClick: () => {
 						n.submit(e.type);
 					}
 				}, e.label));
-			}), a.push(i("button", {
+			}), i.push(a("button", {
 				key: r.actions.primary.type,
-				type: "submit"
-			}, r.actions.primary.label)), i("div", { class: "formie-page-actions" }, a);
+				type: "submit",
+				disabled: !m(t)
+			}, r.actions.primary.label)), a("div", { class: "formie-page-actions" }, i);
 		};
 	}
-}), K = r({
+}), ce = i({
 	name: "FormieVueConfigRenderer",
 	props: { className: {
 		type: String,
 		default: void 0
 	} },
 	setup(e) {
-		let t = D();
+		let t = A();
 		return () => {
 			let n = t.instance.value, r = t.state.value;
 			if (!n || !r) return null;
-			let a = t.components.value.Form || P, o = t.components.value.Page || F, s = t.components.value.ErrorSummary || M, c = r.definition.pages.find((e) => e.id === r.currentPageId && r.pageStates[e.id]?.hidden !== !0) || r.definition.pages.find((e) => r.pageStates[e.id]?.hidden !== !0) || r.definition.pages[0], l = r.lastSubmitResult?.messages.error, u = !!l && !r.errors.form.includes(l);
-			return c ? i(a, {
+			let i = t.components.value.Form || R, o = t.components.value.Page || z, s = t.components.value.ErrorSummary || F, c = r.definition.pages.find((e) => e.id === r.currentPageId && r.pageStates[e.id]?.hidden !== !0) || r.definition.pages.find((e) => r.pageStates[e.id]?.hidden !== !0) || r.definition.pages[0], l = r.lastSubmitResult?.messages.error, u = !!l && !r.errors.form.includes(l);
+			return c ? a(i, {
 				definition: r.definition,
 				session: r.session,
 				state: r,
 				className: e.className,
-				onSubmit: () => {
-					n.submit();
-				}
+				onSubmit: () => n.submit()
 			}, { default: () => [
-				i(s, {
+				a(s, {
 					key: "errors",
 					errors: r.errors.form
 				}),
-				r.lastSubmitResult?.messages.notice ? i("div", {
+				r.lastSubmitResult?.messages.notice ? a("div", {
 					key: "notice",
-					class: "formie-vue-notice"
-				}, r.lastSubmitResult.messages.notice) : null,
-				u ? i("div", {
+					class: "formie-vue-notice",
+					innerHTML: r.lastSubmitResult.messages.notice
+				}) : null,
+				u ? a("div", {
 					key: "error",
 					class: "formie-vue-error"
 				}, l) : null,
-				i(o, {
+				r.lastSubmitResult?.completion?.behavior === "message" && r.lastSubmitResult.completion.hideForm ? null : a(o, {
 					key: c.id,
 					page: c,
 					state: r
-				}, { default: () => [...c.rows.map((e, t) => i(V, {
+				}, { default: () => [...c.rows.map((e, t) => a(G, {
 					key: `${c.id}:${t}`,
 					row: e,
 					rowIndex: t
-				})), i(G, { key: "actions" })] })
+				})), a(se, { key: "actions" })] })
 			] }) : null;
 		};
 	}
-}), q = {
+}), le = {
 	source: {
 		type: Object,
 		required: !0
@@ -721,12 +802,12 @@ var W = r({
 		default: void 0
 	}
 };
-function J(e, t, ...n) {
+function Y(e, t, ...n) {
 	e?.(...n), t && t !== e && t(...n);
 }
-var Y = r({
+var ue = i({
 	name: "FormieVueDefinitionFormView",
-	props: q,
+	props: le,
 	emits: [
 		"mount",
 		"ready",
@@ -740,44 +821,44 @@ var Y = r({
 		"event"
 	],
 	setup(e, { emit: t }) {
-		let r = u(null), a = u(null), o = l(null), s = {
-			instance: r,
-			state: a,
-			components: n(() => e.components || {}),
-			fieldComponents: n(() => e.fieldComponents || {}),
-			slots: n(() => e.slots || {})
-		}, p = n(() => w(e.source));
-		return c(T, s), d(p, (n, i, s) => {
+		let n = d(null), i = d(null), o = u(null), s = {
+			instance: n,
+			state: i,
+			components: r(() => e.components || {}),
+			fieldComponents: r(() => e.fieldComponents || {}),
+			slots: r(() => e.slots || {})
+		}, c = r(() => D(e.source));
+		return l(O, s), f(c, (r, a, s) => {
 			let c = !1, l = () => void 0;
 			(async () => {
 				try {
-					let n = m({
-						envelope: await k(e.source),
-						transport: ne(e.source)
+					let r = await re(e.source), a = ie(e.source), s = g({
+						envelope: r,
+						transport: a
 					});
 					if (c) {
-						await n.destroy();
+						await s.destroy();
 						return;
 					}
-					o.value = null, r.value = n, a.value = n.getState(), e.onMount?.(n), e.onReady?.(n), t("mount", n), t("ready", n);
-					let i = [
-						n.subscribe((e) => {
-							a.value = e;
+					o.value = null, n.value = s, i.value = s.getState(), e.onMount?.(s), e.onReady?.(s), t("mount", s), t("ready", s);
+					let u = [
+						s.subscribe((e) => {
+							i.value = e;
 						}),
-						n.on("formie:submit:result", (n) => {
+						s.on("formie:submit:result", (n) => {
 							let r = n;
-							J(e.onSubmitResult, e.onResult, r), t("result", r), t("submit-result", r), r.success ? (J(e.onSubmitSuccess, e.onSuccess, r), t("success", r), t("submit-success", r)) : (J(e.onSubmitError, e.onError, r), t("error", r), t("submit-error", r));
+							Y(e.onSubmitResult, e.onResult, r), t("result", r), t("submit-result", r), r.success ? (Y(e.onSubmitSuccess, e.onSuccess, r), t("success", r), t("submit-success", r)) : (Y(e.onSubmitError, e.onError, r), t("error", r), t("submit-error", r));
 						}),
-						...f.map((r) => n.on(r, (n) => {
+						...p.map((n) => s.on(n, (r) => {
 							let i = {
-								name: r,
-								payload: n
+								name: n,
+								payload: r
 							};
 							e.onEvent?.(i), t("event", i);
 						}))
 					];
 					l = () => {
-						i.forEach((e) => e()), n.destroy(), r.value === n && (r.value = null, a.value = null), e.onUnmount?.(), t("unmount");
+						u.forEach((e) => e()), s.destroy(), n.value === s && (n.value = null, i.value = null), e.onUnmount?.(), t("unmount");
 					};
 				} catch (e) {
 					c || (o.value = e);
@@ -785,66 +866,67 @@ var Y = r({
 			})(), s(() => {
 				c = !0, l();
 			});
-		}, { immediate: !0 }), () => o.value ? i("div", { class: "formie-vue-error" }, o.value.message) : !r.value || !a.value ? i("div", { class: "formie-vue-loading" }, "Loading form...") : i(K, { className: e.className });
+		}, { immediate: !0 }), () => o.value ? a("div", { class: "formie-vue-error" }, o.value.message) : !n.value || !i.value ? a("div", { class: "formie-vue-loading" }, "Loading form...") : a(L, {}, { default: () => a(ce, { className: e.className }) });
 	}
 });
-function ae() {
-	let e = D();
+function de() {
+	let e = A();
 	return {
-		definition: n(() => e.state.value?.definition || null),
-		session: n(() => e.state.value?.session || null),
+		definition: r(() => e.state.value?.definition || null),
+		session: r(() => e.state.value?.session || null),
 		state: e.state,
 		instance: e.instance
 	};
 }
-function oe(e) {
-	let t = D(), r = n(() => {
+function fe(e) {
+	let t = A(), n = r(() => {
 		let n = t.state.value?.definition;
-		return n && re(n).find((t) => t.id === e) || null;
+		return n && ae(n).find((t) => t.id === e) || null;
 	});
 	return {
-		field: r,
-		value: n(() => t.state.value?.values[e]),
-		errors: n(() => t.state.value?.errors.fields[e] || []),
-		hidden: n(() => t.state.value?.fieldStates[e]?.hidden === !0),
-		disabled: n(() => t.state.value?.fieldStates[e]?.disabled === !0),
+		field: n,
+		value: r(() => t.state.value?.values[e]),
+		errors: r(() => t.state.value?.errors.fields[e] || []),
+		hidden: r(() => t.state.value?.fieldStates[e]?.hidden === !0),
+		disabled: r(() => t.state.value?.fieldStates[e]?.disabled === !0),
 		setValue(e) {
-			!r.value || !t.instance.value || t.instance.value.setValue(r.value.id, e);
+			n.value && t.instance.value && t.instance.value.setValue(n.value.id, e);
 		}
 	};
 }
-function se(e) {
-	let t = D();
+function pe(e) {
+	let t = A();
 	return {
-		page: n(() => t.state.value?.definition.pages.find((t) => t.id === e) || null),
-		isCurrent: n(() => t.state.value?.currentPageId === e),
-		hidden: n(() => t.state.value?.pageStates[e]?.hidden === !0)
+		page: r(() => t.state.value?.definition.pages.find((t) => t.id === e) || null),
+		isCurrent: r(() => t.state.value?.currentPageId === e),
+		hidden: r(() => t.state.value?.pageStates[e]?.hidden === !0)
 	};
 }
-function ce() {
-	return D().instance;
+function me() {
+	return A().instance;
 }
-function le(e) {
-	let t = D();
-	return n(() => t.slots.value[e] || null);
+function he(e) {
+	let t = A();
+	return r(() => t.slots.value[e] || null);
 }
 //#endregion
 //#region src/index.ts
 function X(e) {
 	return !!e && "payload" in e;
 }
-function ue(e) {
+function Z(e) {
 	return "success" in e ? e.success : e.ok;
 }
-function Z(e, t, ...n) {
+function Q(e, t, ...n) {
 	e?.(...n), t && t !== e && t(...n);
 }
-function de(e) {
+function ge(e) {
 	let t = e.transport;
 	if (!t && !X(e.source)) throw Error("`transport` is required for <FormieForm>.");
 	return {
 		mode: "server-rendered",
 		transport: t,
+		profile: e.profile,
 		endpoint: e.endpoint,
 		formHandle: e.formHandle,
 		payload: X(e.source) ? e.source.payload : void 0,
@@ -857,7 +939,7 @@ function de(e) {
 		themeConfig: e.themeConfig
 	};
 }
-function fe(e) {
+function _e(e) {
 	if (e.source) return e.source;
 	let t = e.transport, n = e.endpoint, r = e.formHandle;
 	if (t !== "rest" && t !== "graphql") throw Error("Vue client-rendered forms require `transport=\"rest\"` or `transport=\"graphql\"`.");
@@ -866,18 +948,19 @@ function fe(e) {
 		transport: t,
 		endpoint: n,
 		formHandle: r,
-		siteId: e.siteId
+		siteId: e.siteId,
+		profile: e.profile
 	};
 }
-function pe() {
+function ve() {
 	return t();
 }
-function Q() {
+function $() {
 	return t();
 }
-function $(e) {
-	let t = Q(), r = l(null), i = u(null), a = l(null);
-	return d([r, n(() => w(e))], ([n], r, o) => {
+function ye(e) {
+	let t = $(), n = u(null), i = d(null), a = u(null), o = r(() => D(e));
+	return f([n, o], ([n], r, o) => {
 		if (!n) return;
 		let s = !1, c = !1, l = async () => {
 			c || (c = !0, await t.unmount(n));
@@ -900,16 +983,16 @@ function $(e) {
 			s = !0, i.value = null, u.finally(l);
 		});
 	}, { immediate: !0 }), {
-		rootRef: r,
+		rootRef: n,
 		state: {
 			instance: i,
-			isMounted: n(() => !!i.value),
+			isMounted: r(() => !!i.value),
 			error: a
 		},
 		submit: async (e = "submit") => i.value ? i.value.submit(e) : null
 	};
 }
-var me = r({
+var be = i({
 	name: "FormieVueHtmlFormView",
 	props: { options: {
 		type: Object,
@@ -927,44 +1010,48 @@ var me = r({
 		"submit-error",
 		"event"
 	],
-	setup(r, { emit: a }) {
-		let o = l(null), s = t(), c = n(() => de(r.options));
-		return d([o, n(() => w(c.value))], ([t], n, i) => {
+	setup(n, { emit: i }) {
+		let o = u(null), s = t(), c = r(() => ge(n.options)), l = r(() => D(c.value));
+		return f([o, l], ([t], r, a) => {
 			if (!t) return;
 			let o = !1, l = null, u = [], d = Promise.resolve().then(async () => {
-				let n = await s.mount(t, c.value);
+				let r = await s.mount(t, c.value);
 				if (o) {
 					await s.unmount(t);
 					return;
 				}
-				l = n, r.options.onMount?.(n), r.options.onReady?.(n), a("mount", n), a("ready", n), u.push(n.on("formie:submit:result", (e) => {
+				l = r, n.options.onMount?.(r), n.options.onReady?.(r), i("mount", r), i("ready", r), u.push(r.on("formie:submit:result", (e) => {
 					let t = e;
-					Z(r.options.onSubmitResult, r.options.onResult, t), a("result", t), a("submit-result", t), ue(t) ? (Z(r.options.onSubmitSuccess, r.options.onSuccess, t), a("success", t), a("submit-success", t)) : (Z(r.options.onSubmitError, r.options.onError, t), a("error", t), a("submit-error", t));
+					Q(n.options.onSubmitResult, n.options.onResult, t), i("result", t), i("submit-result", t), Z(t) ? (Q(n.options.onSubmitSuccess, n.options.onSuccess, t), i("success", t), i("submit-success", t)) : (Q(n.options.onSubmitError, n.options.onError, t), i("error", t), i("submit-error", t));
 				})), e.forEach((e) => {
-					u.push(n.on(e, (t) => {
-						let n = {
+					u.push(r.on(e, (t) => {
+						let r = {
 							name: e,
 							payload: t
 						};
-						r.options.onEvent?.(n), a("event", n);
+						n.options.onEvent?.(r), i("event", r);
 					}));
 				});
 			});
-			i(() => {
+			a(() => {
 				o = !0, u.forEach((e) => e()), d.finally(async () => {
-					await s.unmount(t), l &&= (r.options.onUnmount?.(), a("unmount"), null);
+					await s.unmount(t), l &&= (n.options.onUnmount?.(), i("unmount"), null);
 				});
 			});
-		}, { immediate: !0 }), () => i("div", {
+		}, { immediate: !0 }), () => a("div", {
 			ref: o,
-			class: r.options.className
+			class: n.options.className
 		});
 	}
-}), he = {
+}), xe = {
 	source: {
 		type: Object,
 		default: void 0
 	},
+	profile: {
+		type: String,
+		default: "same-origin-browser"
+	},
 	transport: {
 		type: String,
 		default: void 0
@@ -1049,11 +1136,15 @@ var me = r({
 		type: Function,
 		default: void 0
 	}
-}, ge = {
+}, Se = {
 	source: {
 		type: Object,
 		default: void 0
 	},
+	profile: {
+		type: String,
+		default: "same-origin-browser"
+	},
 	transport: {
 		type: String,
 		default: void 0
@@ -1126,9 +1217,9 @@ var me = r({
 		type: Function,
 		default: void 0
 	}
-}, _e = r({
+}, Ce = i({
 	name: "FormieVueForm",
-	props: he,
+	props: xe,
 	emits: [
 		"mount",
 		"ready",
@@ -1142,9 +1233,10 @@ var me = r({
 		"event"
 	],
 	setup(e, { emit: t }) {
-		return () => i(me, {
-			options: {
+		return () => {
+			let n = {
 				source: e.source,
+				profile: e.profile,
 				transport: e.transport,
 				endpoint: e.endpoint,
 				formHandle: e.formHandle,
@@ -1166,22 +1258,25 @@ var me = r({
 				onSubmitSuccess: e.onSubmitSuccess,
 				onSubmitError: e.onSubmitError,
 				onEvent: e.onEvent
-			},
-			onMount: (e) => t("mount", e),
-			onReady: (e) => t("ready", e),
-			onUnmount: () => t("unmount"),
-			onResult: (e) => t("result", e),
-			onSuccess: (e) => t("success", e),
-			onError: (e) => t("error", e),
-			onSubmitResult: (e) => t("submit-result", e),
-			onSubmitSuccess: (e) => t("submit-success", e),
-			onSubmitError: (e) => t("submit-error", e),
-			onEvent: (e) => t("event", e)
-		});
+			};
+			return a(be, {
+				options: n,
+				onMount: (e) => t("mount", e),
+				onReady: (e) => t("ready", e),
+				onUnmount: () => t("unmount"),
+				onResult: (e) => t("result", e),
+				onSuccess: (e) => t("success", e),
+				onError: (e) => t("error", e),
+				onSubmitResult: (e) => t("submit-result", e),
+				onSubmitSuccess: (e) => t("submit-success", e),
+				onSubmitError: (e) => t("submit-error", e),
+				onEvent: (e) => t("event", e)
+			});
+		};
 	}
-}), ve = r({
+}), we = i({
 	name: "FormieVueClientForm",
-	props: ge,
+	props: Se,
 	emits: [
 		"mount",
 		"ready",
@@ -1195,9 +1290,10 @@ var me = r({
 		"event"
 	],
 	setup(e, { emit: t }) {
-		return () => i(Y, {
-			source: fe({
+		return () => a(ue, {
+			source: _e({
 				source: e.source,
+				profile: e.profile,
 				transport: e.transport,
 				endpoint: e.endpoint,
 				formHandle: e.formHandle,
@@ -1246,4 +1342,4 @@ var me = r({
 	}
 });
 //#endregion
-export { ve as FormieClientForm, _e as FormieForm, pe as createVueFormieClient, ae as useFormie, Q as useFormieClient, oe as useFormieField, $ as useFormieHtml, ce as useFormieInstance, se as useFormiePage, le as useFormieSlot };
+export { we as FormieClientForm, Ce as FormieForm, ve as createVueFormieClient, de as useFormie, $ as useFormieClient, fe as useFormieField, ye as useFormieHtml, me as useFormieInstance, pe as useFormiePage, he as useFormieSlot };