@verbb/formie-browser 1.0.11 → 1.0.13

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## Unreleased
 
+## 1.0.13 - 2026-07-09
+
+### Fixed
+- Fix Signature field canvas height preserving the stored PNG aspect ratio when restoring values or resizing, so signatures are not vertically stretched.
+- Fix Date/Time calendar fields not using an existing input value as the Flatpickr default date on init.
+- Fix false unload warnings after front-end form init by resetting dirty state once captcha/token hydration and field modules have settled.
+
+## 1.0.12 - 2026-07-02
+
+### Added
+- Add Opayo **Drop-in Checkout** support to the `opayo` payment module via `sagepayCheckout`, including iframe mount on field init, `tokenise()` on authorize, and merchant session key refresh on tokenisation failure. **Own Form** mode continues to use `sagepayOwnForm`.
+
+### Fixed
+- Hide PayPal buttons after successful authorization so users are not prompted to pay again before submitting the form. Buttons are restored automatically when authorization is cleared after a failed submit.
+
 ## 1.0.11 - 2026-06-26
 
 ### Added

package/dist/chunks/{api-BYe9YPko.js → api-DqpfkZWL.js}

@@ -810,13 +810,26 @@ function Ie(e) {
 					}), t.abort(o.transport.errorMessage));
 				},
 				onAfterStage: async (t, r) => {
-					t.stage !== "dispatch" || !e.onAfterSubmit || await e.onAfterSubmit({
+					if (!(t.stage !== "dispatch" || !e.onAfterSubmit) && !(!(await e.onAfterSubmit({
 						field: n.target,
 						services: s,
 						options: o,
 						provider: o.provider,
 						result: r
-					});
+					}))?.remount || !e.mount)) {
+						if (d && e.unmount) {
+							let t = await m();
+							await e.unmount({
+								api: t,
+								widget: d,
+								field: n.target,
+								services: s,
+								options: o,
+								provider: o.provider
+							});
+						}
+						d = null, await h();
+					}
 				}
 			};
 		}

package/dist/chunks/{bpoint-C0VOftX9.js → bpoint-Dlq34XH1.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./api-BYe9YPko.js";
+import { t as e } from "./api-DqpfkZWL.js";
 //#region src/js/modules/payments/bpoint.ts
 var t = e({
 	id: "bpoint",

package/dist/chunks/{calculations-DERi2xaC.js → calculations-Dv3hYb8_.js}

@@ -2,7 +2,7 @@ import { t as e } from "./debug-BV0DvdHx.js";
 import { r as t, t as n } from "./field-references.keys-58ZSTrCW.js";
 import { n as r, r as i } from "./field-references.resolver-CHwn0G0L.js";
 import { r as a, t as o } from "./shared-Bx9s0i0P.js";
-import { c as s, i as c, r as l, s as u, t as d } from "./dist-BdUy8m_p.js";
+import { c as s, i as c, r as l, s as u, t as d } from "./dist-D6i-VNgM.js";
 //#region src/js/utils/field-references.row-scope.ts
 var f = new Set([
 	"first",

package/dist/chunks/{conditions-65kBcFWW.js → conditions-CPH1snCx.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./debug-BV0DvdHx.js";
 import { t } from "./field-references.keys-58ZSTrCW.js";
 import { n } from "./shared-Bx9s0i0P.js";
-import { a as r, o as i } from "./dist-BdUy8m_p.js";
+import { a as r, o as i } from "./dist-D6i-VNgM.js";
 //#region src/js/modules/fields/conditions/config.ts
 var a = "[data-formie-conditions]";
 function o(e) {

package/dist/chunks/{date-picker-5CA_-zGb.js → date-picker-F9BUBDSW.js}

@@ -5269,6 +5269,9 @@ function H(e, t) {
 		s.mode = "range";
 		let e = i instanceof HTMLInputElement && i.value ? V(i.value) : null, t = o instanceof HTMLInputElement && o.value ? V(o.value) : null;
 		e && (s.defaultDate = t ? [e, t] : [e]);
+	} else if (e.value) {
+		let t = V(e.value);
+		t && (s.defaultDate = t);
 	}
 	let l = {
 		...s,

package/dist/chunks/{dist-BdUy8m_p.js → dist-D6i-VNgM.js}

@@ -1,4 +1,4 @@
-//#region ../formie-core/dist/index.js
+//#region node_modules/@verbb/formie-core/dist/index.js
 var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, i, o, s) => {
 	if (i && typeof i == "object" || typeof i == "function") for (var c = r(i), l = 0, u = c.length, d; l < u; l++) d = c[l], !a.call(e, d) && d !== o && t(e, d, {
 		get: ((e) => i[e]).bind(null, d),

package/dist/chunks/{eway-CS6Y1Yvo.js → eway-D9_m8ooj.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./api-BYe9YPko.js";
+import { t as e } from "./api-DqpfkZWL.js";
 import { r as t } from "./async-nPFRNQ06.js";
 import { r as n } from "./scripts-CbQ7agX3.js";
 //#region src/js/modules/payments/eway.ts

package/dist/chunks/{go-cardless-BTPD668l.js → go-cardless-DAT3ZaQf.js}

@@ -1,5 +1,5 @@
 import { s as e } from "./event-names-BCI2FLD8.js";
-import { t } from "./api-BYe9YPko.js";
+import { t } from "./api-DqpfkZWL.js";
 //#region src/js/modules/payments/go-cardless.ts
 var n = e("go-cardless", "redirect"), r = t({
 	id: "go-cardless",

package/dist/chunks/{mollie-CXgBwvo6.js → mollie-Bibhl67p.js}

@@ -1,5 +1,5 @@
 import { s as e } from "./event-names-BCI2FLD8.js";
-import { t } from "./api-BYe9YPko.js";
+import { t } from "./api-DqpfkZWL.js";
 //#region src/js/modules/payments/mollie.ts
 var n = e("mollie", "redirect"), r = t({
 	id: "mollie",

package/dist/chunks/{moneris-B6oLu7nj.js → moneris-H2wSqk9h.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./api-BYe9YPko.js";
+import { t as e } from "./api-DqpfkZWL.js";
 //#region src/js/modules/payments/moneris.ts
 var t = {
 	940: "Invalid profile ID (tokenization request).",

package/dist/chunks/opayo-CR0DtsLa.js

@@ -0,0 +1,179 @@
+import { s as e } from "./event-names-BCI2FLD8.js";
+import { t } from "./api-DqpfkZWL.js";
+import { t as n } from "./debug-BV0DvdHx.js";
+import { r } from "./scripts-CbQ7agX3.js";
+import { t as i } from "./styles-BfoIZwJp.js";
+//#endregion
+//#region src/js/modules/payments/opayo.ts
+i("opayo", ["@layer formie-theme{.formie-opayo-drop-in{box-sizing:border-box;width:100%;min-height:10rem}}"]);
+var a = "FORMIE_OPAYO_SCRIPT", o = "https://live.opayo.eu.elavon.com/api/v1/js/sagepay.js", s = "https://sandbox.opayo.eu.elavon.com/api/v1/js/sagepay.js", c = "[data-formie-opayo-drop-in]", l = n("payments", "opayo"), u = e("opayo", "challenge"), d = "formie:payment:opayo:challenge:response";
+function f(e) {
+	return e.checkoutMode === "dropIn";
+}
+async function p(e) {
+	let { form: t, handle: n, sessionToken: r, services: i } = e, a = new FormData();
+	a.append("action", "formie/payment-webhooks/process-callback"), a.append("merchantSessionKey", "true"), a.append("handle", n), a.append("sessionToken", r);
+	try {
+		let e = await fetch(t.action, {
+			method: "POST",
+			body: a
+		});
+		return e.status < 200 || e.status >= 300 ? (i.addError(`${e.status}: ${e.statusText}`), l.warn("Merchant session request failed.", {
+			status: e.status,
+			statusText: e.statusText
+		}), null) : (await e.json()).merchantSessionKey || (i.addError("Unable to get merchant session."), l.warn("merchantSessionKey missing in callback response."), null);
+	} catch {
+		return i.addError("Network error. Please try again."), l.warn("Network error requesting merchant session."), null;
+	}
+}
+function m(e) {
+	return e.id ||= `formie-opayo-drop-in-${Math.random().toString(36).slice(2, 9)}`, e.id;
+}
+var h = t({
+	id: "opayo",
+	defaultRequiredInputSuffixes: ["opayoTokenId"],
+	load: async (e) => {
+		let { provider: t } = e.options, n = t.useSandbox ? s : o;
+		return await r(f(t) ? "sagepayCheckout" : "sagepayOwnForm", {
+			id: a,
+			src: n,
+			timeoutMs: 1e4
+		}), null;
+	},
+	mount: async ({ field: e, services: t, provider: n }) => {
+		if (!f(n)) return null;
+		let r = t.form, i = window.sagepayCheckout, a = e.querySelector(c);
+		if (!r?.action) return t.addError("Form action is missing."), l.warn("Missing form action before drop-in mount."), null;
+		if (!i) return t.addError("Opayo script failed to load."), l.warn("sagepayCheckout global not available."), null;
+		if (!a) return t.addError("Opayo drop-in container is missing."), l.warn("Drop-in container not found in payment field."), null;
+		let o = n.handle || "opayo", s = await p({
+			form: r,
+			handle: o,
+			sessionToken: n.sessionToken || "",
+			services: t
+		});
+		if (!s) return null;
+		let u = m(a), d = {
+			checkout: null,
+			merchantSessionKey: s,
+			pendingAuthorize: null,
+			retriedTokenise: !1
+		};
+		return d.checkout = i({
+			merchantSessionKey: s,
+			containerSelector: `#${u}`,
+			onTokenise: (e) => {
+				let i = d.pendingAuthorize;
+				if (d.pendingAuthorize = null, !i) {
+					l.warn("Drop-in tokenisation completed without a pending authorize step.");
+					return;
+				}
+				if (e.success && e.cardIdentifier) {
+					t.updateInputs("opayoTokenId", e.cardIdentifier), t.updateInputs("opayoSessionKey", d.merchantSessionKey), l.log("Drop-in tokenization succeeded.", { hasCardIdentifier: !!e.cardIdentifier }), i(!0);
+					return;
+				}
+				if (!d.retriedTokenise) {
+					d.retriedTokenise = !0, p({
+						form: r,
+						handle: o,
+						sessionToken: n.sessionToken || "",
+						services: t
+					}).then((n) => {
+						if (!n) {
+							t.addError(e.errors?.[0]?.message || "Tokenization failed."), l.warn("Drop-in tokenization failed after session refresh.", e), i(!1);
+							return;
+						}
+						d.merchantSessionKey = n, d.pendingAuthorize = i, d.checkout.tokenise({ newMerchantSessionKey: n });
+					});
+					return;
+				}
+				t.addError(e.errors?.[0]?.message || "Tokenization failed."), l.warn("Drop-in tokenization failed.", e), i(!1);
+			}
+		}), l.log("Drop-in checkout mounted.", { containerId: u }), d;
+	},
+	unmount: async ({ widget: e }) => {
+		e?.checkout?.destroy?.();
+	},
+	onBeforeAuthorize: async (e) => {
+		let { field: t, services: n, options: r, provider: i, widget: a } = e, o = i.handle || "opayo", s = n.form;
+		if (!s?.action) return n.addError("Form action is missing."), l.warn("Missing form action before authorize."), !1;
+		if (f(i)) return a ? (a.retriedTokenise = !1, new Promise((e) => {
+			a.pendingAuthorize = e, a.checkout.tokenise();
+		})) : (n.addError("Opayo drop-in checkout is not ready."), l.warn("Drop-in authorize requested before widget mount."), !1);
+		let c = window.sagepayOwnForm;
+		if (!c) return n.addError("Opayo script failed to load."), l.warn("sagepayOwnForm global not available."), !1;
+		let u = t.querySelector("[data-opayo-card=\"cardholder-name\"]")?.value ?? "", d = t.querySelector("[data-opayo-card=\"card-number\"]")?.value ?? "", m = t.querySelector("[data-opayo-card=\"expiry-date\"]")?.value ?? "", h = t.querySelector("[data-opayo-card=\"security-code\"]")?.value ?? "";
+		d = d.replace(/[\s/]/g, ""), m = m.replace(/[\s/]/g, "");
+		let g = await p({
+			form: s,
+			handle: o,
+			sessionToken: i.sessionToken || "",
+			services: n
+		});
+		return g ? new Promise((e) => {
+			c({ merchantSessionKey: g }).tokeniseCardDetails({
+				cardDetails: {
+					cardholderName: u,
+					cardNumber: d,
+					expiryDate: m,
+					securityCode: h
+				},
+				onTokenised: (t) => {
+					t.success && t.cardIdentifier ? (n.updateInputs("opayoTokenId", t.cardIdentifier), n.updateInputs("opayoSessionKey", g), l.log("Tokenization succeeded.", { hasCardIdentifier: !!t.cardIdentifier }), e(!0)) : (n.addError(t.errors?.[0]?.message || "Tokenization failed."), l.warn("Tokenization failed.", t), e(!1));
+				}
+			});
+		}) : !1;
+	},
+	setup: async (e) => {
+		let { services: t } = e;
+		e.target;
+		let n = null, r = !1, i = () => {
+			n?.parentNode && n.parentNode.removeChild(n), n = null;
+		}, a = t.events.onForm(u, ((e) => {
+			let a = e.detail?.data;
+			if (!a?.acsUrl || !a?.creq) return;
+			r = !1, l.log("Received payment challenge event.", {
+				hasAcsUrl: !!a.acsUrl,
+				hasCreq: !!a.creq
+			});
+			let o = t.form?.querySelector("input[name*=\"opayoSessionKey\"]")?.value || "", s = document.createElement("div");
+			s.className = "formie-modal", s.id = `formie-opayo-dialog-${Math.random().toString(36).slice(2, 9)}`, s.innerHTML = "\n                <div class=\"formie-modal-backdrop\" data-dialog-close></div>\n                <div class=\"formie-modal-content\">\n                    <div class=\"formie-loading formie-loading-large\" style=\"--formie-loading-width: 3rem; --formie-loading-height: 3rem; top: 50%; margin-top: -1.5rem;\"></div>\n                    <iframe width=\"100%\" height=\"100%\" style=\"width: 100%; height: 100%; position: relative; z-index: 1;\"></iframe>\n                </div>\n            ";
+			let c = s.querySelector("iframe"), u = (e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;"), d = a.returnUrl || a.redirectUrl || "", f = `<form action="${u(a.acsUrl)}" method="post">
+                <input type="hidden" name="creq" value="${u(a.creq || "")}" />
+                <input type="hidden" name="threeDSSessionData" value="${u(a.threeDSSessionData || "")}" />
+                <input type="hidden" name="MD" value="${u(o)}" />
+                <input type="hidden" name="TermUrl" value="${u(d)}" />
+                <input type="hidden" name="ThreeDSNotificationURL" value="${u(d)}" />
+            </form><script>document.forms[0].submit();<\/script>`;
+			i(), document.body.appendChild(s), n = s, c?.contentWindow && (c.contentWindow.document.open(), c.contentWindow.document.write(f), c.contentWindow.document.close());
+		})), o = (e) => {
+			if (e.data?.message === d) {
+				if (!n) {
+					l.log("Ignoring 3DS response without active dialog.");
+					return;
+				}
+				if (r) {
+					l.warn("Ignoring duplicate 3DS response while processing.");
+					return;
+				}
+				if (r = !0, l.log("Received payment challenge response message.", e.data?.value), i(), t.removeError(), e.data?.value?.error) {
+					t.addError(e.data.value.error.message), t.releaseSubmitLoading(), r = !1;
+					return;
+				}
+				t.updateInputs("opayo3DSComplete", e.data.value?.transactionId ?? ""), t.triggerSubmit();
+			}
+		};
+		return window.addEventListener("message", o), { destroy: () => {
+			a(), window.removeEventListener("message", o), i(), r = !1;
+		} };
+	},
+	onAfterSubmit: async ({ services: e }) => {
+		e.updateInputs([
+			"opayoTokenId",
+			"opayoSessionKey",
+			"opayo3DSComplete"
+		], "");
+	}
+});
+//#endregion
+export { h as opayoModule };

package/dist/chunks/{paddle-GRlsm5mm.js → paddle-DkvIxQdG.js}

@@ -1,5 +1,5 @@
 import { s as e } from "./event-names-BCI2FLD8.js";
-import { t } from "./api-BYe9YPko.js";
+import { t } from "./api-DqpfkZWL.js";
 import { r as n } from "./scripts-CbQ7agX3.js";
 //#region src/js/modules/payments/paddle.ts
 var r = "FORMIE_PADDLE_SCRIPT", i = e("paddle", "initialize"), a = t({

package/dist/chunks/{password-validation-T0vDQPCr.js → password-validation-D06uH9va.js}

@@ -1,5 +1,5 @@
 import { c as e, i as t, l as n } from "./shared-Bx9s0i0P.js";
-import { n as r } from "./dist-BdUy8m_p.js";
+import { n as r } from "./dist-D6i-VNgM.js";
 //#region src/js/modules/fields/password-validation.ts
 var i = "input[data-formie-password-input]", a = [
 	"passwordMinLength",

package/dist/chunks/{paypal-CdcZnf6r.js → paypal-CQpAF7Ua.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./api-BYe9YPko.js";
+import { t as e } from "./api-DqpfkZWL.js";
 import { r as t } from "./scripts-CbQ7agX3.js";
 import { t as n } from "./styles-BfoIZwJp.js";
 //#endregion
@@ -11,49 +11,52 @@ function i(e) {
 	return String(n[0]?.id || r[0]?.id || "").trim();
 }
 function a(e, t) {
+	e?.close && e.close(), t.removeAttribute("data-formie-paypal-rendered"), t.innerHTML = "";
+}
+function o(e, t) {
 	return `https://www.paypal.com/sdk/js?${[
 		"intent=authorize",
 		`currency=${encodeURIComponent(t)}`,
 		`client-id=${encodeURIComponent(e)}`
 	].join("&")}`;
 }
-var o = e({
+var s = e({
 	id: "paypal",
 	defaultRequiredInputSuffixes: ["paypalOrderId", "paypalAuthId"],
 	load: async (e) => {
 		let { provider: n } = e.options, i = n.clientId;
 		return i?.trim() ? (await t("paypal", {
 			id: r,
-			src: a(i, n.currency || "AUD")
+			src: o(i, n.currency || "AUD")
 		}), window.paypal) : (console.error("[formie] Missing clientId for PayPal."), null);
 	},
 	mount: async (e) => {
-		let { api: t, field: n, services: r, options: a, provider: o } = e, s = n.querySelector("[data-formie-paypal-button]");
-		if (!s || !t || s.getAttribute("data-formie-paypal-rendered") === "true") return null;
-		s.innerHTML = "";
-		let c = !!o.useSandbox, l = r.resolveCurrency({
-			value: o.currency,
+		let { api: t, field: n, services: r, options: o, provider: s } = e, c = n.querySelector("[data-formie-paypal-button]");
+		if (!c || !t || c.getAttribute("data-formie-paypal-rendered") === "true") return null;
+		c.innerHTML = "";
+		let l = !!s.useSandbox, u = r.resolveCurrency({
+			value: s.currency,
 			defaultCurrency: "AUD"
 		});
-		if (!l.ok) return r.addError("error" in l ? l.error : "Invalid PayPal currency."), null;
-		let u = l.value, d = {
-			layout: o.buttonLayout || "vertical",
-			color: o.buttonColor || "gold",
-			shape: o.buttonShape || "rect",
-			label: o.buttonLabel || "paypal",
-			width: o.buttonWidth || 250,
-			height: o.buttonHeight || 35
+		if (!u.ok) return r.addError("error" in u ? u.error : "Invalid PayPal currency."), null;
+		let d = u.value, f = {
+			layout: s.buttonLayout || "vertical",
+			color: s.buttonColor || "gold",
+			shape: s.buttonShape || "rect",
+			label: s.buttonLabel || "paypal",
+			width: s.buttonWidth || 250,
+			height: s.buttonHeight || 35
 		};
-		d.layout === "horizontal" && (d.tagline = o.buttonTagline ?? !0);
-		let f = {
-			env: c ? "sandbox" : "production",
-			style: d,
+		f.layout === "horizontal" && (f.tagline = s.buttonTagline ?? !0);
+		let p = null, m = {
+			env: l ? "sandbox" : "production",
+			style: f,
 			createOrder: (e, t) => {
 				r.removeError();
 				let n = r.resolveAmount({
-					type: o.amountType,
-					fixed: o.amountFixed,
-					variable: o.amountVariable
+					type: s.amountType,
+					fixed: s.amountFixed,
+					variable: s.amountVariable
 				});
 				if (!n.ok) {
 					let e = "error" in n ? n.error : "Invalid PayPal amount.";
@@ -63,7 +66,7 @@ var o = e({
 					intent: "AUTHORIZE",
 					application_context: { user_action: "CONTINUE" },
 					purchase_units: [{ amount: {
-						currency_code: u,
+						currency_code: d,
 						value: String(n.value)
 					} }]
 				});
@@ -74,22 +77,20 @@ var o = e({
 			onApprove: async (e, t) => {
 				try {
 					let n = i(await t.order.authorize());
-					r.updateInputs("paypalOrderId", e.orderID), r.updateInputs("paypalAuthId", n || ""), n ? r.addSuccess("Payment authorized. Finalize the form to complete payment.") : r.addSuccess("PayPal approval received. Finalizing payment on submit.");
+					r.updateInputs("paypalOrderId", e.orderID), r.updateInputs("paypalAuthId", n || ""), n ? r.addSuccess("Payment authorized. Finalize the form to complete payment.") : r.addSuccess("PayPal approval received. Finalizing payment on submit."), a(p, c);
 				} catch {
 					r.addError("Unable to authorize payment. Please try again.");
 				}
 			}
-		}, p = t.Buttons(f);
-		return s.setAttribute("data-formie-paypal-rendered", "true"), p.render(s);
+		}, h = t.Buttons(m);
+		return c.setAttribute("data-formie-paypal-rendered", "true"), p = h.render(c), p;
 	},
 	unmount: async (e) => {
 		e.widget?.close && e.widget.close();
 		let t = e.field.querySelector("[data-formie-paypal-button]");
 		t && (t.removeAttribute("data-formie-paypal-rendered"), t.innerHTML = "");
 	},
-	onAfterSubmit: async ({ services: e }) => {
-		e.updateInputs(["paypalOrderId", "paypalAuthId"], ""), e.removeSuccess(), e.removeError();
-	}
+	onAfterSubmit: async ({ services: e, result: t }) => (e.updateInputs(["paypalOrderId", "paypalAuthId"], ""), e.removeSuccess(), e.removeError(), !t?.ok || t?.nextPage ? { remount: !0 } : {})
 });
 //#endregion
-export { o as paypalModule };
+export { s as paypalModule };

package/dist/chunks/{payway-CfmYOS__.js → payway-CwDkC7YZ.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./api-BYe9YPko.js";
+import { t as e } from "./api-DqpfkZWL.js";
 import { r as t } from "./scripts-CbQ7agX3.js";
 import { t as n } from "./styles-BfoIZwJp.js";
 //#endregion

package/dist/chunks/{signature-xz4QO7CR.js → signature-IOhuicje.js}

@@ -386,7 +386,7 @@ var s = class e extends a {
 			a.setAttribute("r", s.toString()), a.setAttribute("cx", e.x.toString()), a.setAttribute("cy", e.y.toString()), a.setAttribute("fill", t), o.appendChild(a);
 		}), o.outerHTML;
 	}
-}, c = "@layer formie-theme{[data-formie-field-type=signature] .formie-field-control{transition:border-color .15s,box-shadow .15s,background-color .15s;position:relative}[data-formie-field-type=signature] .formie-field-control:focus-within .formie-signature-canvas{border-color:var(--formie-focus-ring-border-color);box-shadow:var(--formie-shadow-focus)}.formie-field-has-error[data-formie-field-type=signature] .formie-signature-canvas{border-color:var(--formie-color-danger)}.formie-field-has-error[data-formie-field-type=signature] .formie-field-control:focus-within .formie-signature-canvas{box-shadow:var(--formie-shadow-danger-focus)}[data-formie-field-type=signature] .formie-signature-canvas{width:var(--formie-signature-width);height:var(--formie-signature-height);border:var(--formie-signature-border);background:var(--formie-signature-background);border-radius:var(--formie-signature-border-radius);touch-action:none;transition:border-color .15s,box-shadow .15s,background-color .15s;display:block}[data-formie-field-type=signature] .formie-signature-remove-button{top:var(--formie-signature-remove-button-top);right:var(--formie-signature-remove-button-right);transform:var(--formie-signature-remove-button-transform);font-size:0;line-height:0;position:absolute}[data-formie-field-type=signature] .formie-signature-pad{position:relative}[data-formie-field-type=signature] .formie-signature-message{padding:var(--formie-space-3);border:var(--formie-signature-border);border-radius:var(--formie-signature-border-radius);background:var(--formie-signature-background);color:var(--formie-color-text-muted);font-size:var(--formie-font-size-sm);line-height:var(--formie-line-height-base);margin:0}[data-formie-field-type=signature].formie-signature-has-message .formie-signature-canvas{display:none}}", l = "input[data-formie-signature-input]", u = "canvas[data-formie-signature-canvas]", d = "[data-formie-signature-clear]", f = "[data-formie-signature-message]", p = "signature", m = 20, h = 100, g = [
+}, c = "@layer formie-theme{[data-formie-field-type=signature] .formie-field-control{transition:border-color .15s,box-shadow .15s,background-color .15s;position:relative}[data-formie-field-type=signature] .formie-field-control:focus-within .formie-signature-canvas{border-color:var(--formie-focus-ring-border-color);box-shadow:var(--formie-shadow-focus)}.formie-field-has-error[data-formie-field-type=signature] .formie-signature-canvas{border-color:var(--formie-color-danger)}.formie-field-has-error[data-formie-field-type=signature] .formie-field-control:focus-within .formie-signature-canvas{box-shadow:var(--formie-shadow-danger-focus)}[data-formie-field-type=signature] .formie-signature-canvas{width:var(--formie-signature-width);min-height:var(--formie-signature-height);border:var(--formie-signature-border);background:var(--formie-signature-background);border-radius:var(--formie-signature-border-radius);touch-action:none;height:auto;transition:border-color .15s,box-shadow .15s,background-color .15s;display:block}[data-formie-field-type=signature] .formie-signature-remove-button{top:var(--formie-signature-remove-button-top);right:var(--formie-signature-remove-button-right);transform:var(--formie-signature-remove-button-transform);font-size:0;line-height:0;position:absolute}[data-formie-field-type=signature] .formie-signature-pad{position:relative}[data-formie-field-type=signature] .formie-signature-message{padding:var(--formie-space-3);border:var(--formie-signature-border);border-radius:var(--formie-signature-border-radius);background:var(--formie-signature-background);color:var(--formie-color-text-muted);font-size:var(--formie-font-size-sm);line-height:var(--formie-line-height-base);margin:0}[data-formie-field-type=signature].formie-signature-has-message .formie-signature-canvas{display:none}}", l = "input[data-formie-signature-input]", u = "canvas[data-formie-signature-canvas]", d = "[data-formie-signature-clear]", f = "[data-formie-signature-message]", p = "signature", m = 20, h = 100, g = [
 	"hidden",
 	"data-formie-conditionally-hidden",
 	"data-formie-page-hidden",
@@ -436,85 +436,107 @@ function C(e, t) {
 		r && r.drawImage(n, 0, 0, e.width / t, e.height / t);
 	};
 }
-async function w(e, t, n) {
-	if (n) try {
-		await e.fromDataURL(n);
-	} catch {
-		C(t, n);
+function w(e) {
+	return new Promise((t) => {
+		let n = new Image();
+		n.onload = () => {
+			t({
+				width: n.naturalWidth,
+				height: n.naturalHeight
+			});
+		}, n.onerror = () => t(null), n.src = e;
+	});
+}
+async function T(e, t) {
+	let n = await w(t);
+	if (!n?.width || !n?.height) return;
+	let { width: r } = _(e);
+	if (!(r > 0)) return;
+	let i = Math.max(1, Math.round(r * (n.height / n.width)));
+	e.style.height = `${i}px`;
+}
+async function E(e, t, n) {
+	if (n) {
+		await T(t, n);
+		try {
+			await e.fromDataURL(n);
+		} catch {
+			C(t, n);
+		}
 	}
 }
-function T(e, t, r, i, a, o) {
+function D(e, t, r, i, a, o) {
 	let c = b(t);
 	if (!v()) return x(t, i, c.noCanvas), () => {};
-	let l = parseFloat(o.penWeight || "2") || 2, u = i.parentElement instanceof HTMLElement ? i.parentElement : t, d = 0, f = null, y = !1, C = !1, T = new s(i, {
+	let l = parseFloat(o.penWeight || "2") || 2, u = i.parentElement instanceof HTMLElement ? i.parentElement : t, d = 0, f = null, y = !1, C = !1, w = new s(i, {
 		backgroundColor: o.backgroundColor || "rgba(255, 255, 255, 0)",
 		penColor: o.penColor || "#000000",
 		dotSize: l,
 		minWidth: l,
 		maxWidth: l
-	}), E = () => {
+	}), D = () => {
 		f !== null && (window.clearTimeout(f), f = null);
-	}, D = () => {
-		y || (y = !0, C = !1, x(t, i, null), n(t, p, "init", { signature: T }));
 	}, O = () => {
+		y || (y = !0, C = !1, x(t, i, null), n(t, p, "init", { signature: w }));
+	}, k = () => {
 		y || C || (C = !0, x(t, i, c.initFailed));
-	}, k = async () => {
-		let { width: e, height: t } = _(i);
-		if (!(e > 0) || !(t > 0)) return !1;
-		let n = Math.max(window.devicePixelRatio || 1, 1), a = i.getContext("2d");
-		if (!a) return !1;
-		let o = r.value || (T.isEmpty() ? "" : T.toDataURL());
-		return i.width = e * n, i.height = t * n, a.setTransform(1, 0, 0, 1, 0, 0), a.scale(n, n), T.clear(), await w(T, i, o), D(), !0;
-	}, A = () => {
+	}, A = async () => {
+		let e = r.value || (w.isEmpty() ? "" : w.toDataURL());
+		e && await T(i, e);
+		let { width: t, height: n } = _(i);
+		if (!(t > 0) || !(n > 0)) return !1;
+		let a = Math.max(window.devicePixelRatio || 1, 1), o = i.getContext("2d");
+		return o ? (i.width = t * a, i.height = n * a, o.setTransform(1, 0, 0, 1, 0, 0), o.scale(a, a), w.clear(), await E(w, i, e), O(), !0) : !1;
+	}, j = () => {
 		if (!(y || C)) {
 			if (d >= m) {
-				O();
+				k();
 				return;
 			}
-			E(), f = window.setTimeout(() => {
-				f = null, d += 1, j();
+			D(), f = window.setTimeout(() => {
+				f = null, d += 1, M();
 			}, h);
 		}
-	}, j = async () => {
-		if (!await k()) {
-			A();
+	}, M = async () => {
+		if (!await A()) {
+			j();
 			return;
 		}
-		E(), d = 0;
-	}, M = (e = 0) => {
+		D(), d = 0;
+	}, N = (e = 0) => {
 		window.setTimeout(() => {
 			window.requestAnimationFrame(() => {
-				j();
+				M();
 			});
 		}, e);
-	}, N = () => {
-		S(t) && !y && (C = !1), M();
 	}, P = () => {
-		N();
+		S(t) && !y && (C = !1), N();
 	}, F = () => {
-		S(t) && (d = 0, C = !1, M(100));
+		P();
 	}, I = () => {
-		S(t) && (d = 0, C = !1, N());
-	}, L = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => {
-		N();
-	}), R = new MutationObserver(() => {
-		I();
-	}), z = (e) => {
+		S(t) && (d = 0, C = !1, N(100));
+	}, L = () => {
+		S(t) && (d = 0, C = !1, P());
+	}, R = typeof ResizeObserver > "u" ? null : new ResizeObserver(() => {
+		P();
+	}), z = new MutationObserver(() => {
+		L();
+	}), B = (e) => {
 		let t = r.value !== e;
 		r.value = e, t && (r.dispatchEvent(new Event("input", { bubbles: !0 })), r.dispatchEvent(new Event("change", { bubbles: !0 })));
-	}, B = () => {
-		z(T.isEmpty() ? "" : T.toDataURL());
 	}, V = () => {
-		T.clear(), z("");
+		B(w.isEmpty() ? "" : w.toDataURL());
+	}, H = () => {
+		w.clear(), B("");
 	};
-	return T.addEventListener("endStroke", B), window.addEventListener("resize", P), e.addEventListener("formie:page:navigate:after", F), L?.observe(u), R.observe(t, {
+	return w.addEventListener("endStroke", V), window.addEventListener("resize", F), e.addEventListener("formie:page:navigate:after", I), R?.observe(u), z.observe(t, {
 		attributes: !0,
 		attributeFilter: [...g]
-	}), M(), a && a.addEventListener("click", V), () => {
-		E(), T.removeEventListener("endStroke", B), window.removeEventListener("resize", P), e.removeEventListener("formie:page:navigate:after", F), L?.disconnect(), R.disconnect(), a && a.removeEventListener("click", V), T.clear();
+	}), N(), a && a.addEventListener("click", H), () => {
+		D(), w.removeEventListener("endStroke", V), window.removeEventListener("resize", F), e.removeEventListener("formie:page:navigate:after", I), R?.disconnect(), z.disconnect(), a && a.removeEventListener("click", H), w.clear();
 	};
 }
-var E = {
+var O = {
 	id: p,
 	kind: "field",
 	match: (e) => !!e.target.querySelector(u),
@@ -523,7 +545,7 @@ var E = {
 		if (!r) return;
 		let i = t(e).map((e) => {
 			let t = e.querySelector(l), i = e.querySelector(u), a = e.querySelector(d);
-			return !(t instanceof HTMLInputElement) || !(i instanceof HTMLCanvasElement) ? () => {} : T(r, e, t, i, a instanceof HTMLElement ? a : null, n);
+			return !(t instanceof HTMLInputElement) || !(i instanceof HTMLCanvasElement) ? () => {} : D(r, e, t, i, a instanceof HTMLElement ? a : null, n);
 		});
 		return await e.emit("formie:module:signature:init", { count: i.length }), { destroy: () => {
 			i.forEach((e) => {
@@ -533,4 +555,4 @@ var E = {
 	}
 };
 //#endregion
-export { E as signatureModule };
+export { O as signatureModule };

package/dist/chunks/{square-BY--5M-X.js → square-DwdcOI1G.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./api-BYe9YPko.js";
+import { t as e } from "./api-DqpfkZWL.js";
 import { r as t } from "./scripts-CbQ7agX3.js";
 //#region src/js/modules/payments/square.ts
 var n = "FORMIE_SQUARE_SCRIPT", r = e({

package/dist/chunks/{stripe-uusYjWty.js → stripe-DaoG2FT1.js}

@@ -1,5 +1,5 @@
 import { s as e } from "./event-names-BCI2FLD8.js";
-import { t } from "./api-BYe9YPko.js";
+import { t } from "./api-DqpfkZWL.js";
 import { r as n, t as r } from "./theme-classes-Tv7q7ToE.js";
 import { r as i } from "./scripts-CbQ7agX3.js";
 import { t as a } from "./styles-BfoIZwJp.js";