@odus/checkout 0.30.0-beta.1 → 0.30.0-beta.3

package/dist/checkout.es.js

@@ -1,6 +1,6 @@
-import { l as pe, c as de, a as ge, f as U, d as fe, C as P, I as ce, g as ye, S as H, b as Z, H as be, V as J, e as k, A as ve, P as Se, E as Ee, h as Ce, i as Fe, j as Me, k as Ne, m as we, n as Pe, F as ke, o as Ae, p as De } from "./shared.js";
-import { q as Tt, r as Vt, s as _t, t as Bt, u as Ot, v as Rt, w as Ut, x as Ht } from "./shared.js";
-const C = {
+import { l as fe, c as me, a as ye, f as q, d as be, C as A, I as pe, b as P, g as ve, S as _, e as ee, H as Se, V as te, h as D, A as Ce, P as Ee, E as Fe, i as Me, j as Ne, k as we, m as Pe, n as ke, o as Ae, F as xe, p as De, q as Ie } from "./shared.js";
+import { r as _t, s as Rt, t as Bt, u as Ut, v as Ot, w as Ht, x as zt, y as $t } from "./shared.js";
+const F = {
   // Checkout lifecycle events
   CHECKOUT_INITIALIZED: "checkout.initialized",
   CHECKOUT_MOUNTED: "checkout.mounted",
@@ -16,11 +16,11 @@ const C = {
   PAYMENT_AUTHORIZED: "payment.authorized",
   PAYMENT_FAILED: "payment.failed",
   PAYMENT_ACTION_REQUIRED: "payment.action_required"
-}, X = {
+}, se = {
   PAYMENT_AUTHORIZATION_TIME: "payment.authorization_time",
   CHECKOUT_LOAD_TIME: "checkout.load_time",
   FORM_RENDER_TIME: "form.render_time"
-}, Ie = /^\s*at (?:(.+?) ?\()?((?:file|https?|chrome-extension|webpack-internal):\/\/.+?):(\d+):(\d+)\)?\s*$/, xe = /^([^@]+)@((?:file|https?|chrome-extension|webpack-internal):\/\/[^\s:]+):(\d+):(\d+)$/, Le = /^(?:([^@]+)@)?((?:file|https?):\/\/[^\s:]+):(\d+):(\d+)$/, q = (i) => {
+}, Te = /^\s*at (?:(.+?) ?\()?((?:file|https?|chrome-extension|webpack-internal):\/\/.+?):(\d+):(\d+)\)?\s*$/, Le = /^([^@]+)@((?:file|https?|chrome-extension|webpack-internal):\/\/[^\s:]+):(\d+):(\d+)$/, Ve = /^(?:([^@]+)@)?((?:file|https?):\/\/[^\s:]+):(\d+):(\d+)$/, Z = (i) => {
   if (!i)
     return [];
   const e = [], t = i.split(`
@@ -29,7 +29,7 @@ const C = {
     const a = s.trim();
     if (!a)
       continue;
-    let n = Ie.exec(a);
+    let n = Te.exec(a);
     if (n) {
       e.push({
         function: n[1] || "(anonymous)",
@@ -39,7 +39,7 @@ const C = {
       });
       continue;
     }
-    n = xe.exec(a) ?? Le.exec(a), n && e.push({
+    n = Le.exec(a) ?? Ve.exec(a), n && e.push({
       function: n[1] || "(anonymous)",
       filename: n[2],
       lineno: parseInt(n[3], 10),
@@ -47,9 +47,9 @@ const C = {
     });
   }
   return e;
-}, Te = "@odus/telemetry", Ve = "0.0.1";
-let B, O, Y;
-const _e = () => {
+}, _e = "@odus/telemetry", Re = "0.0.1";
+let z, $, X;
+const Be = () => {
   if (typeof navigator > "u")
     return {};
   const i = navigator.userAgent;
@@ -66,34 +66,34 @@ const _e = () => {
     viewportHeight: String(window.innerHeight),
     userAgent: i
   };
-}, Be = () => typeof window > "u" ? {} : { url: window.location.href }, Oe = (i) => {
-  B = void 0, Y = void 0, O = i.sessionTracking?.session ? { id: i.sessionTracking.session.id } : void 0;
-}, Re = (i) => {
-  B = i;
-}, Ue = () => {
-  B = void 0;
+}, Ue = () => typeof window > "u" ? {} : { url: window.location.href }, Oe = (i) => {
+  z = void 0, X = void 0, $ = i.sessionTracking?.session ? { id: i.sessionTracking.session.id } : void 0;
 }, He = (i) => {
-  O = i;
-}, ze = (i) => {
-  Y = i;
-}, $e = () => O?.id, je = (i) => ({
-  sdk: { name: Te, version: Ve },
+  z = i;
+}, ze = () => {
+  z = void 0;
+}, $e = (i) => {
+  $ = i;
+}, Ke = (i) => {
+  X = i;
+}, qe = () => $?.id, je = (i) => ({
+  sdk: { name: _e, version: Re },
   app: i.app,
-  user: B,
-  session: O,
-  page: Be(),
-  browser: _e(),
-  view: Y
-}), Ke = 30, qe = 250, We = 6e4;
-let A = [], w = null, G = 0, L = null, T = null;
-const Ye = (i) => {
-  if (w)
+  user: z,
+  session: $,
+  page: Ue(),
+  browser: Be(),
+  view: X
+}), We = 30, Ye = 250, Ge = 6e4;
+let I = [], k = null, Q = 0, R = null, B = null;
+const Ze = (i) => {
+  if (k)
     return;
-  const e = i.batching?.sendTimeout ?? qe;
-  w = setTimeout(() => {
-    R(i);
+  const e = i.batching?.sendTimeout ?? Ye;
+  k = setTimeout(() => {
+    K(i);
   }, e);
-}, Ge = (i, e) => {
+}, Je = (i, e) => {
   const t = {
     meta: je(e)
   };
@@ -113,8 +113,8 @@ const Ye = (i) => {
         break;
     }
   return t;
-}, Ze = (i, e, t = !1) => {
-  const s = JSON.stringify(i), a = $e(), n = {
+}, Xe = (i, e, t = !1) => {
+  const s = JSON.stringify(i), a = qe(), n = {
     "Content-Type": "application/json"
   };
   if (a && (n["x-faro-session-id"] = a), t && typeof navigator < "u" && navigator.sendBeacon) {
@@ -122,7 +122,7 @@ const Ye = (i) => {
     navigator.sendBeacon(e, o);
     return;
   }
-  const r = s.length < We;
+  const r = s.length < Ge;
   fetch(e, {
     method: "POST",
     headers: n,
@@ -131,220 +131,220 @@ const Ye = (i) => {
   }).then((o) => {
     if (o.status === 429) {
       const d = o.headers.get("Retry-After"), c = d ? parseInt(d, 10) * 1e3 : 3e4;
-      G = Date.now() + c;
+      Q = Date.now() + c;
     }
   }).catch(() => {
   });
-}, R = (i, e = !1) => {
-  if (w && (clearTimeout(w), w = null), A.length === 0)
+}, K = (i, e = !1) => {
+  if (k && (clearTimeout(k), k = null), I.length === 0)
     return;
-  if (Date.now() < G) {
-    A = [];
+  if (Date.now() < Q) {
+    I = [];
     return;
   }
-  const t = A;
-  A = [];
+  const t = I;
+  I = [];
   try {
-    let s = Ge(t, i);
+    let s = Je(t, i);
     if (i.beforeSend) {
       const a = i.beforeSend(s);
       if (!a)
         return;
       s = a;
     }
-    Ze(s, i.url, e);
+    Xe(s, i.url, e);
   } catch {
   }
-}, N = (i, e) => {
-  A.push(i);
-  const t = e.batching?.itemLimit ?? Ke;
-  if (A.length >= t) {
-    R(e);
+}, w = (i, e) => {
+  I.push(i);
+  const t = e.batching?.itemLimit ?? We;
+  if (I.length >= t) {
+    K(e);
     return;
   }
-  Ye(e);
-}, Je = (i) => {
-  if (A = [], G = 0, w && (clearTimeout(w), w = null), typeof document > "u")
+  Ze(e);
+}, Qe = (i) => {
+  if (I = [], Q = 0, k && (clearTimeout(k), k = null), typeof document > "u")
     return;
-  L && document.removeEventListener("visibilitychange", L), T && window.removeEventListener("pagehide", T);
-  const e = () => R(i, !0);
-  L = () => {
+  R && document.removeEventListener("visibilitychange", R), B && window.removeEventListener("pagehide", B);
+  const e = () => K(i, !0);
+  R = () => {
     document.visibilityState === "hidden" && e();
-  }, T = e, document.addEventListener("visibilitychange", L), window.addEventListener("pagehide", T);
-}, Q = () => (/* @__PURE__ */ new Date()).toISOString();
-let ee = null, te = null;
-const Xe = (i) => {
-  typeof window > "u" || (ee = (e) => {
+  }, B = e, document.addEventListener("visibilitychange", R), window.addEventListener("pagehide", B);
+}, ne = () => (/* @__PURE__ */ new Date()).toISOString();
+let ie = null, ae = null;
+const et = (i) => {
+  typeof window > "u" || (ie = (e) => {
     const t = e.error instanceof Error ? e.error : new Error(e.message);
-    N({
+    w({
       type: "exception",
       payload: {
         type: t.name,
         value: t.message,
-        timestamp: Q(),
-        stacktrace: t.stack ? { frames: q(t.stack) } : void 0
+        timestamp: ne(),
+        stacktrace: t.stack ? { frames: Z(t.stack) } : void 0
       }
     }, i);
-  }, te = (e) => {
+  }, ae = (e) => {
     const t = e.reason, s = t instanceof Error ? t : new Error(String(t));
-    N({
+    w({
       type: "exception",
       payload: {
         type: s.name,
         value: s.message,
-        timestamp: Q(),
-        stacktrace: s.stack ? { frames: q(s.stack) } : void 0,
+        timestamp: ne(),
+        stacktrace: s.stack ? { frames: Z(s.stack) } : void 0,
         context: { source: "unhandledrejection" }
       }
     }, i);
-  }, window.addEventListener("error", ee), window.addEventListener("unhandledrejection", te));
-}, se = "odus_telemetry_session_id", z = () => {
+  }, window.addEventListener("error", ie), window.addEventListener("unhandledrejection", ae));
+}, re = "odus_telemetry_session_id", j = () => {
   const i = new Uint8Array(16);
   return crypto.getRandomValues(i), Array.from(i, (e) => e.toString(16).padStart(2, "0")).join("");
-}, Qe = (i) => {
+}, tt = (i) => {
   if (i)
     return i;
   if (typeof sessionStorage > "u")
-    return z();
+    return j();
   try {
-    const e = sessionStorage.getItem(se);
+    const e = sessionStorage.getItem(re);
     if (e)
       return e;
-    const t = z();
-    return sessionStorage.setItem(se, t), t;
+    const t = j();
+    return sessionStorage.setItem(re, t), t;
   } catch {
-    return z();
+    return j();
   }
-}, et = (i) => {
+}, st = (i) => {
   if (!i.sessionTracking?.enabled)
     return;
-  const e = Qe(i.sessionTracking.session?.id);
-  He({ id: e });
-}, $ = () => (/* @__PURE__ */ new Date()).toISOString(), j = (i, e) => {
+  const e = tt(i.sessionTracking.session?.id);
+  $e({ id: e });
+}, W = () => (/* @__PURE__ */ new Date()).toISOString(), Y = (i, e) => {
   if (typeof PerformanceObserver > "u" || !PerformanceObserver.supportedEntryTypes?.includes(i))
     return;
   new PerformanceObserver((s) => {
     for (const a of s.getEntries())
       e(a);
   }).observe({ type: i, buffered: !0 });
-}, tt = (i) => {
+}, nt = (i) => {
   if (typeof window > "u")
     return;
-  j("largest-contentful-paint", (t) => {
-    N({
+  Y("largest-contentful-paint", (t) => {
+    w({
       type: "measurement",
       payload: {
         type: "web-vitals",
         values: { lcp: t.startTime },
-        timestamp: $()
+        timestamp: W()
       }
     }, i);
   });
   let e = 0;
-  j("layout-shift", (t) => {
+  Y("layout-shift", (t) => {
     const s = t;
-    s.hadRecentInput || (e += s.value, N({
+    s.hadRecentInput || (e += s.value, w({
       type: "measurement",
       payload: {
         type: "web-vitals",
         values: { cls: e },
-        timestamp: $()
+        timestamp: W()
       }
     }, i));
-  }), j("event", (t) => {
+  }), Y("event", (t) => {
     const s = t;
-    s.duration > 0 && N({
+    s.duration > 0 && w({
       type: "measurement",
       payload: {
         type: "web-vitals",
         values: { inp: s.duration },
-        timestamp: $()
+        timestamp: W()
       }
     }, i);
   });
-}, _ = {
+}, H = {
   INFO: "info",
   WARN: "warn",
   ERROR: "error"
-}, V = () => (/* @__PURE__ */ new Date()).toISOString(), st = (i) => {
-  Oe(i), Je(i);
+}, U = () => (/* @__PURE__ */ new Date()).toISOString(), it = (i) => {
+  Oe(i), Qe(i);
   const e = i.instrumentations ?? {
     errors: !0,
     webVitals: !0,
     session: !0
   };
-  return e.session !== !1 && et(i), e.errors !== !1 && Xe(i), e.webVitals !== !1 && tt(i), {
+  return e.session !== !1 && st(i), e.errors !== !1 && et(i), e.webVitals !== !1 && nt(i), {
     pushError(t, s) {
-      N({
+      w({
         type: "exception",
         payload: {
           type: t.name,
           value: t.message,
-          timestamp: V(),
-          stacktrace: t.stack ? { frames: q(t.stack) } : void 0,
+          timestamp: U(),
+          stacktrace: t.stack ? { frames: Z(t.stack) } : void 0,
           context: s?.context
         }
       }, i);
     },
     pushEvent(t, s) {
-      N({
+      w({
         type: "event",
         payload: {
           name: t,
-          timestamp: V(),
+          timestamp: U(),
           attributes: s
         }
       }, i);
     },
     pushMeasurement(t) {
-      N({
+      w({
         type: "measurement",
         payload: {
           type: t.type,
           values: t.values,
-          timestamp: V(),
+          timestamp: U(),
           context: t.context
         }
       }, i);
     },
     pushLog(t, s) {
-      N({
+      w({
         type: "log",
         payload: {
           message: t.join(" "),
-          level: s?.level ?? _.INFO,
-          timestamp: V(),
+          level: s?.level ?? H.INFO,
+          timestamp: U(),
           context: s?.context
         }
       }, i);
     },
     setUser(t) {
-      Re(t);
+      He(t);
     },
     resetUser() {
-      Ue();
+      ze();
     },
     setView(t) {
-      ze(t);
+      Ke(t);
     },
     flush() {
-      R(i);
+      K(i);
     }
   };
-}, nt = (i) => i === "test" ? "https://sandbox-analytics.odus.com/collect" : "https://analytics.odus.com/collect", it = () => {
+}, at = (i) => i === "test" ? "https://sandbox-analytics.odus.com/collect" : "https://analytics.odus.com/collect", rt = () => {
   if (typeof window > "u")
     return !1;
   const i = window.location.hostname;
   return i === "localhost" || i === "127.0.0.1" || i === "0.0.0.0" || i === "::1" || i === "[::1]" || i.endsWith(".localhost");
 };
-let E = null;
-const at = (i) => {
-  if (E)
-    return E;
-  if (it())
+let C = null;
+const ot = (i) => {
+  if (C)
+    return C;
+  if (rt())
     return null;
-  const e = nt(i.environment);
-  return E = st({
+  const e = at(i.environment);
+  return C = it({
     url: e,
     app: {
       name: "odus-checkout",
@@ -375,13 +375,13 @@ const at = (i) => {
         }
       return t;
     }
-  }), E;
-}, rt = (i, e) => {
-  E && E.pushError(i, { context: e });
-}, F = (i, e) => {
-  E && E.pushEvent(i, e);
-}, ne = (i, e, t, s) => {
-  E && E.pushMeasurement({
+  }), C;
+}, lt = (i, e) => {
+  C && C.pushError(i, { context: e });
+}, M = (i, e) => {
+  C && C.pushEvent(i, e);
+}, oe = (i, e, t, s) => {
+  C && C.pushMeasurement({
     type: i,
     values: { [i]: e },
     context: {
@@ -389,25 +389,25 @@ const at = (i) => {
       ...s
     }
   });
-}, It = (i, e = "info", t) => {
-  if (!E) return;
+}, Tt = (i, e = "info", t) => {
+  if (!C) return;
   const s = {
-    info: _.INFO,
-    warn: _.WARN,
-    error: _.ERROR
+    info: H.INFO,
+    warn: H.WARN,
+    error: H.ERROR
   };
-  E.pushLog([i], {
+  C.pushLog([i], {
     level: s[e],
     context: t
   });
-}, ie = {
+}, le = {
   test: "tntwpdhfwng",
   live: "TBD"
-}, ae = {
+}, de = {
   test: "sandbox",
   live: "live"
 };
-class I {
+class L {
   vgsForm = null;
   fields = [];
   readyResolve;
@@ -419,18 +419,18 @@ class I {
     });
   }
   async init(e) {
-    return this.environment = e, await pe({
-      vaultId: ie[e],
-      environment: ae[e],
-      version: "3.2.2"
+    return this.environment = e, await fe({
+      vaultId: le[e],
+      environment: de[e],
+      version: "3.3.0"
     });
   }
   createForm(e, t) {
     if (!this.environment)
       throw new Error("VGS not initialized — call init() first");
     return this.vgsForm = e.create(
-      ie[this.environment],
-      ae[this.environment],
+      le[this.environment],
+      de[this.environment],
       t
     ), this.readyResolve?.(), this.vgsForm;
   }
@@ -479,10 +479,10 @@ class I {
             luhn: !0
           }
         ],
-        css: t
+        css: t.cardNumber
       });
       n.on("update", (r) => {
-        a && a(I.mapCardType(r.cardType));
+        a && a(L.mapCardType(r.cardType));
       }), this.fields.push(n);
     }
     if (e.cardExpiry) {
@@ -492,7 +492,13 @@ class I {
           placeholder: s.cardExpiry,
           autoComplete: "cc-exp",
           validations: ["required", "validCardExpirationDate"],
-          css: t
+          serializers: [
+            {
+              name: "separate",
+              options: { monthName: "month", yearName: "year" }
+            }
+          ],
+          css: t.cardExpiry
         }
       );
       this.fields.push(n);
@@ -502,7 +508,7 @@ class I {
         placeholder: s.cardCvv,
         autoComplete: "cc-csc",
         validations: ["required", "validCardSecurityCode"],
-        css: t
+        css: t.cardCvv
       });
       this.fields.push(n);
     }
@@ -513,7 +519,7 @@ class I {
           placeholder: s.cardholderName,
           autoComplete: "cc-name",
           validations: ["required"],
-          css: t
+          css: t.cardholderName
         }
       );
       this.fields.push(n);
@@ -543,7 +549,7 @@ class I {
             this.patchCard(e, o.id).then(s).catch(a);
             return;
           }
-          s(I.extractCardResult(o));
+          s(L.extractCardResult(o));
         },
         (n) => {
           a(n);
@@ -586,11 +592,11 @@ class I {
             n(new Error("Card update failed: no card ID returned"));
             return;
           }
-          const c = I.extractCardResult(d), p = o.included?.find(
+          const c = L.extractCardResult(d), u = o.included?.find(
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (b) => b.type === "card_updates"
+            (S) => S.type === "card_updates"
           );
-          p?.attributes?.updated_values?.length && (c.updatedValues = p.attributes.updated_values), a(c);
+          u?.attributes?.updated_values?.length && (c.updatedValues = u.attributes.updated_values), a(c);
         },
         (r) => {
           n(r);
@@ -627,7 +633,7 @@ class I {
     }[e] ?? "unknown" : "unknown";
   }
 }
-function K(i) {
+function G(i) {
   return {
     name: "Custom Appearance",
     additionalPaymentMethods: i.additionalPaymentMethods || {},
@@ -663,7 +669,7 @@ function K(i) {
         state: {
           enabled: i.layout?.billingFields?.state?.enabled ?? !1,
           label: i.layout?.billingFields?.state?.label,
-          options: i.layout?.billingFields?.state?.options
+          hiddenForCountries: i.layout?.billingFields?.state?.hiddenForCountries
         },
         zipCode: {
           enabled: i.layout?.billingFields?.zipCode?.enabled ?? !1,
@@ -703,7 +709,7 @@ function K(i) {
         state: {
           enabled: i.layout.shippingFields.state?.enabled ?? !1,
           label: i.layout.shippingFields.state?.label,
-          options: i.layout.shippingFields.state?.options
+          hiddenForCountries: i.layout.shippingFields.state?.hiddenForCountries
         },
         zipCode: {
           enabled: i.layout.shippingFields.zipCode?.enabled ?? !1,
@@ -727,16 +733,16 @@ function K(i) {
     }
   };
 }
-function ot({
+function dt({
   appearance: i
 }) {
-  const e = de({
+  const e = me({
     checkoutProfile: void 0,
     isLoading: !0,
     error: null
   });
   if (i) {
-    const s = K(i);
+    const s = G(i);
     return Promise.resolve().then(() => {
       e.setState({
         checkoutProfile: s,
@@ -747,7 +753,7 @@ function ot({
       getState: e.getState.bind(e),
       subscribe: e.subscribe.bind(e),
       updateProfile: (a) => {
-        const n = K(a);
+        const n = G(a);
         e.setState({
           checkoutProfile: n,
           isLoading: !1,
@@ -796,7 +802,7 @@ function ot({
     getState: e.getState.bind(e),
     subscribe: e.subscribe.bind(e),
     updateProfile: (s) => {
-      const a = K(s);
+      const a = G(s);
       e.setState({
         checkoutProfile: a,
         isLoading: !1,
@@ -807,8 +813,8 @@ function ot({
     }
   };
 }
-const lt = () => {
-  const i = ge(), e = de({
+const ct = () => {
+  const i = ye(), e = me({
     formData: {
       name: "",
       email: "",
@@ -825,204 +831,223 @@ const lt = () => {
       cardCvv: !1
     },
     isValid: !1
-  }), t = (l, g, m, u) => {
+  }), t = (l, p, y, m) => {
     if (l === "cardCvv")
-      return i.cardCvv(g, m);
-    if (l === "phoneNumber" && u)
-      return i.phoneNumber(g, u);
-    const f = i[l];
-    return f?.(g);
+      return i.cardCvv(p, y);
+    if (l === "phoneNumber" && m)
+      return i.phoneNumber(p, m);
+    const g = i[l];
+    return g?.(p);
   }, s = (l) => {
-    const g = {};
-    return Object.keys(l).forEach((u) => {
-      const f = l[u];
-      if (f === void 0) return;
+    const p = {};
+    return Object.keys(l).forEach((m) => {
+      const g = l[m];
+      if (g === void 0) return;
       let h;
-      u === "cardCvv" ? h = t(u, f, l.cardNumber) : u === "phoneNumber" ? h = t(
-        u,
-        f,
+      m === "cardCvv" ? h = t(m, g, l.cardNumber) : m === "phoneNumber" ? h = t(
+        m,
+        g,
         void 0,
         l.phoneCountryCode
-      ) : h = t(u, f), h && (g[u] = h);
+      ) : h = t(m, g), h && (p[m] = h);
     }), [
       "billingAddress",
       "shippingAddress"
-    ].forEach((u) => {
-      const f = l[u];
-      if (f && typeof f == "object") {
+    ].forEach((m) => {
+      const g = l[m];
+      if (g && typeof g == "object") {
         const h = {};
-        Object.keys(f).forEach(
-          (y) => {
-            const v = f[y];
-            if (v === void 0) return;
-            const S = i[y];
-            if (S) {
-              const M = S(v);
-              M && (h[y] = M);
+        Object.keys(g).forEach(
+          (b) => {
+            const f = g[b];
+            if (f === void 0) return;
+            const v = i[b];
+            if (v) {
+              const E = b === "state" ? i.state(f, g.country) : v(
+                f
+              );
+              E && (h[b] = E);
             }
           }
-        ), Object.keys(h).length > 0 && (g[u] = h);
+        ), Object.keys(h).length > 0 && (p[m] = h);
       }
-    }), g;
+    }), p;
   }, a = (l) => {
-    const g = s(l);
-    return Object.keys(g).length === 0;
+    const p = s(l);
+    return Object.keys(p).length === 0;
   }, n = "billingAddress.", r = "shippingAddress.", o = (l) => l.startsWith(n) ? {
     parent: "billingAddress",
     field: l.slice(n.length)
   } : l.startsWith(r) ? {
     parent: "shippingAddress",
     field: l.slice(r.length)
-  } : null, d = (l, g, m, u) => {
-    const f = { ...l };
-    if (u)
-      f[g] = {
-        ...f[g],
-        [m]: u
+  } : null, d = (l, p, y, m) => {
+    const g = { ...l };
+    if (m)
+      g[p] = {
+        ...g[p],
+        [y]: m
       };
     else {
       const h = {
-        ...f[g]
+        ...g[p]
       };
-      delete h[m], Object.keys(h).length === 0 ? delete f[g] : f[g] = h;
+      delete h[y], Object.keys(h).length === 0 ? delete g[p] : g[p] = h;
     }
-    return f;
-  }, c = (l, g) => {
-    const m = e.getState();
-    let u = g;
-    const f = o(l);
-    if (!f && l in U)
+    return g;
+  }, c = (l, p) => {
+    const y = e.getState();
+    let m = p;
+    const g = o(l);
+    if (!g && l in q)
       if (l === "cardCvv") {
-        const S = fe(m.formData.cardNumber) === "amex" ? 4 : 3;
-        u = U.cardCvv(g, S);
+        const v = be(y.formData.cardNumber) === "amex" ? 4 : 3;
+        m = q.cardCvv(p, v);
       } else
-        u = U[l](g);
+        m = q[l](p);
     let h;
-    if (f) {
-      const { parent: v, field: S } = f;
+    if (g) {
+      const { parent: f, field: v } = g;
       h = {
-        ...m.formData,
-        [v]: {
-          ...m.formData[v] ?? {},
-          [S]: u
+        ...y.formData,
+        [f]: {
+          ...y.formData[f] ?? {},
+          [v]: m
         }
       };
     } else
       h = {
-        ...m.formData,
-        [l]: u
+        ...y.formData,
+        [l]: m
       };
-    let y = { ...m.errors };
+    let b = { ...y.errors };
     if (l === "phoneCountryCode" && h.phoneNumber) {
-      const v = t(
+      const f = t(
         "phoneNumber",
         h.phoneNumber,
         void 0,
-        u
+        m
       );
-      v ? y.phoneNumber = v : delete y.phoneNumber;
+      f ? b.phoneNumber = f : delete b.phoneNumber;
     }
-    if (m.touched[l])
-      if (f) {
-        const { parent: v, field: S } = f, M = i[S], x = M ? M(
-          u
-        ) : void 0;
-        y = d(y, v, S, x);
+    if (y.touched[l])
+      if (g) {
+        const { parent: f, field: v } = g, E = h[f];
+        let N;
+        if (v === "state")
+          N = i.state(m, E?.country);
+        else {
+          const x = i[v];
+          N = x ? x(
+            m
+          ) : void 0;
+        }
+        b = d(b, f, v, N);
       } else {
-        let v;
-        l === "cardCvv" ? v = t(l, u, h.cardNumber) : l === "phoneNumber" ? v = t(
+        let f;
+        l === "cardCvv" ? f = t(l, m, h.cardNumber) : l === "phoneNumber" ? f = t(
           l,
-          u,
+          m,
           void 0,
           h.phoneCountryCode
-        ) : v = t(l, u), v ? y[l] = v : delete y[l];
+        ) : f = t(l, m), f ? b[l] = f : delete b[l];
       }
     e.setState({
       formData: h,
-      errors: y,
+      errors: b,
       isValid: a(h)
     });
-  }, p = (l, g) => {
-    const m = e.getState(), u = o(l);
-    if (u) {
-      const { parent: v, field: S } = u, M = {
-        ...m.formData,
-        [v]: {
-          ...m.formData[v] ?? {},
-          [S]: g
+  }, u = (l, p) => {
+    const y = e.getState(), m = o(l);
+    if (m) {
+      const { parent: f, field: v } = m, E = {
+        ...y.formData,
+        [f]: {
+          ...y.formData[f] ?? {},
+          [v]: p
         }
-      }, x = i[S], ue = x ? x(g) : void 0, me = d(m.errors, v, S, ue);
+      };
+      let N;
+      if (v === "state") {
+        const V = E[f];
+        N = i.state(p, V?.country);
+      } else {
+        const V = i[v];
+        N = V ? V(p) : void 0;
+      }
+      const x = d(y.errors, f, v, N);
       e.setState({
-        formData: M,
+        formData: E,
         touched: {
-          ...m.touched,
+          ...y.touched,
           [l]: !0
         },
-        errors: me,
-        isValid: a(M)
+        errors: x,
+        isValid: a(E)
       });
       return;
     }
-    const f = {
-      ...m.touched,
+    const g = {
+      ...y.touched,
       [l]: !0
     };
     let h;
-    l === "cardCvv" ? h = t(l, g, m.formData.cardNumber) : l === "phoneNumber" ? h = t(
+    l === "cardCvv" ? h = t(l, p, y.formData.cardNumber) : l === "phoneNumber" ? h = t(
       l,
-      g,
+      p,
       void 0,
-      m.formData.phoneCountryCode
-    ) : h = t(l, g);
-    const y = { ...m.errors };
-    h ? y[l] = h : delete y[l], e.setState({
-      touched: f,
-      errors: y
+      y.formData.phoneCountryCode
+    ) : h = t(l, p);
+    const b = { ...y.errors };
+    h ? b[l] = h : delete b[l], e.setState({
+      touched: g,
+      errors: b
     });
-  }, b = (l) => {
-    const m = {
+  }, S = (l) => {
+    const y = {
       ...e.getState().formData,
       ...l
     };
     e.setState({
-      formData: m,
-      isValid: a(m)
+      formData: y,
+      isValid: a(y)
     });
   };
   return {
     getFormState: e.getState.bind(e),
     subscribe: e.subscribe.bind(e),
     handleChange: c,
-    handleBlur: p,
-    setFormData: b,
+    handleBlur: u,
+    setFormData: S,
     reset: e.resetState.bind(e)
   };
-}, dt = "https://fonts.googleapis.com/css2", ct = /src:\s*url\(([^)]+\.woff2[^)]*)\)/, ht = /\/\*\s*latin\s*\*\/\s*@font-face\s*\{[^}]*src:\s*url\(([^)]+\.woff2[^)]*)\)[^}]*\}/;
-async function ut(i) {
+}, ht = "https://fonts.googleapis.com/css2", ut = /src:\s*url\(([^)]+\.woff2[^)]*)\)/, mt = /\/\*\s*latin\s*\*\/\s*@font-face\s*\{[^}]*src:\s*url\(([^)]+\.woff2[^)]*)\)[^}]*\}/;
+async function pt(i) {
   if (!i) return null;
-  const e = i.trim().replace(/\s+/g, "+"), t = `${dt}?family=${e}:wght@400;700&display=swap`;
+  const e = i.trim().replace(/\s+/g, "+"), t = `${ht}?family=${e}:wght@400;700&display=swap`;
   try {
     const s = await fetch(t);
     if (!s.ok) return null;
-    const a = await s.text(), n = ht.exec(a);
+    const a = await s.text(), n = mt.exec(a);
     if (n?.[1]) return n[1];
-    const r = ct.exec(a);
+    const r = ut.exec(a);
     return r?.[1] ? r[1] : null;
   } catch {
     return null;
   }
 }
-function mt(i) {
+function gt(i) {
   if (!i) return !1;
   const { billingFields: e, shippingFields: t } = i, s = e && Object.values(e).some((n) => n?.enabled), a = t && Object.values(t).some((n) => n?.enabled);
   return !!(s || a);
 }
-function W(i) {
+function J(i) {
   if (!i) return !1;
   const { billingFields: e, shippingFields: t } = i, s = e?.firstName?.enabled && e?.lastName?.enabled, a = t?.firstName?.enabled && t?.lastName?.enabled;
   return !!(s || a);
 }
-class re extends P {
+const O = /* @__PURE__ */ new Set(["US", "CA"]);
+class ce extends A {
   inputs = /* @__PURE__ */ new Map();
   type;
   onChange;
@@ -1030,8 +1055,11 @@ class re extends P {
   fieldsContainer;
   translationFunc;
   locale;
-  stateOptions;
   grouped;
+  currentCountry = "";
+  stateRow = null;
+  stateFieldConfig;
+  stateStyles;
   constructor(e) {
     super("div", ["address-section"]), this.type = e.type, this.onChange = e.onChange, this.onBlur = e.onBlur, this.translationFunc = e.translationFunc, this.locale = e.locale, this.grouped = e.grouped ?? !0;
     const { title: t, checkoutProfile: s, fieldsConfig: a, values: n, errors: r, touched: o } = e;
@@ -1064,112 +1092,113 @@ class re extends P {
     t.street?.enabled && d.push({ kind: "street" });
     const c = [];
     t.firstName?.enabled && c.push("firstName"), t.lastName?.enabled && c.push("lastName"), c.length > 0 && d.push({ kind: "name", fields: c }), t.country?.enabled && d.push({ kind: "country" });
-    const p = [];
-    t.city?.enabled && p.push("city"), t.zipCode?.enabled && p.push("zipCode"), p.length > 0 && d.push({ kind: "cityZip", fields: p }), t.state?.enabled && d.push({ kind: "state" });
-    const b = d.length;
-    d.forEach((l, g) => {
-      const m = g === 0, u = g === b - 1, f = (h, y) => ({
+    const u = [];
+    t.city?.enabled && u.push("city"), t.zipCode?.enabled && u.push("zipCode"), u.length > 0 && d.push({ kind: "cityZip", fields: u }), t.state?.enabled && d.push({ kind: "state" });
+    const S = d.length;
+    d.forEach((l, p) => {
+      const y = p === 0, m = p === S - 1, g = (h, b) => ({
         ...o,
         borderRadius: this.borderRadius(
           r,
-          m && h,
-          m && y,
-          u && y,
-          u && h
+          y && h,
+          y && b,
+          m && b,
+          m && h
         )
       });
       if (l.kind === "street") {
-        const h = this.createRow(["full"]), y = this.createInput(
+        const h = this.createRow(["full"]), b = this.createInput(
           "street",
           t.street?.label ?? this.translationFunc("address.addressLine1"),
           s.street,
           a.street,
           n.street,
-          f(!0, !0),
+          g(!0, !0),
           "street-address"
         );
-        this.inputs.set("street", y), h.appendChild(y.getElement()), this.fieldsContainer.appendChild(h);
+        this.inputs.set("street", b), h.appendChild(b.getElement()), this.fieldsContainer.appendChild(h);
         return;
       }
       if (l.kind === "name") {
-        const h = this.createRow(l.fields.map(() => "half")), y = l.fields.length === 1;
+        const h = this.createRow(l.fields.map(() => "half")), b = l.fields.length === 1;
         if (l.fields.includes("firstName")) {
-          const v = y || l.fields[l.fields.length - 1] === "firstName", S = this.createInput(
+          const f = b || l.fields[l.fields.length - 1] === "firstName", v = this.createInput(
             "firstName",
             t.firstName?.label ?? this.translationFunc("address.firstName"),
             s.firstName,
             a.firstName,
             n.firstName,
-            f(!0, v),
+            g(!0, f),
             "given-name"
           );
-          this.inputs.set("firstName", S), h.appendChild(S.getElement());
+          this.inputs.set("firstName", v), h.appendChild(v.getElement());
         }
         if (l.fields.includes("lastName")) {
-          const v = y || l.fields[0] === "lastName", S = this.createInput(
+          const f = b || l.fields[0] === "lastName", v = this.createInput(
             "lastName",
             t.lastName?.label ?? this.translationFunc("address.lastName"),
             s.lastName,
             a.lastName,
             n.lastName,
-            f(v, !0),
+            g(f, !0),
             "family-name"
           );
-          this.inputs.set("lastName", S), h.appendChild(S.getElement());
+          this.inputs.set("lastName", v), h.appendChild(v.getElement());
         }
         this.fieldsContainer.appendChild(h);
         return;
       }
       if (l.kind === "country") {
-        const h = this.createRow(["full"]), y = this.createCountrySelect(
+        const h = this.createRow(["full"]), b = this.createCountrySelect(
           s.country,
           a.country,
           n.country,
-          f(!0, !0),
+          g(!0, !0),
           t.country?.options,
           t.country?.label
         );
-        this.inputs.set("country", y), h.appendChild(y.getElement()), this.fieldsContainer.appendChild(h);
+        this.inputs.set("country", b), h.appendChild(b.getElement()), this.fieldsContainer.appendChild(h);
         return;
       }
       if (l.kind === "cityZip") {
-        const h = this.createRow(l.fields.map(() => "half")), y = l.fields.length === 1;
+        const h = this.createRow(l.fields.map(() => "half")), b = l.fields.length === 1;
         if (l.fields.includes("city")) {
-          const v = y || l.fields[l.fields.length - 1] === "city", S = this.createInput(
+          const f = b || l.fields[l.fields.length - 1] === "city", v = this.createInput(
             "city",
             t.city?.label ?? this.translationFunc("address.townCity"),
             s.city,
             a.city,
             n.city,
-            f(!0, v),
+            g(!0, f),
             "address-level2"
           );
-          this.inputs.set("city", S), h.appendChild(S.getElement());
+          this.inputs.set("city", v), h.appendChild(v.getElement());
         }
         if (l.fields.includes("zipCode")) {
-          const v = y || l.fields[0] === "zipCode", S = this.createInput(
+          const f = b || l.fields[0] === "zipCode", v = this.createInput(
             "zipCode",
             t.zipCode?.label ?? this.translationFunc("address.postalCode"),
             s.zipCode,
             a.zipCode,
             n.zipCode,
-            f(v, !0),
+            g(f, !0),
             "postal-code"
           );
-          this.inputs.set("zipCode", S), h.appendChild(S.getElement());
+          this.inputs.set("zipCode", v), h.appendChild(v.getElement());
         }
         this.fieldsContainer.appendChild(h);
         return;
       }
       if (l.kind === "state") {
         const h = this.createRow(["full"]);
-        if (this.stateOptions = t.state?.options, t.state?.options && t.state.options.length > 0) {
+        if (this.stateFieldConfig = t.state, this.stateRow = h, this.stateStyles = g(!0, !0), this.currentCountry = s.country, t.state?.hiddenForCountries?.includes(
+          s.country
+        ) && (h.style.display = "none"), O.has(s.country)) {
           const v = this.createStateSelect(
             s.state,
             a.state,
             n.state,
-            f(!0, !0),
-            t.state?.options,
+            this.stateStyles,
             s.country,
             t.state?.label
           );
@@ -1177,11 +1206,11 @@ class re extends P {
         } else {
           const v = this.createInput(
             "state",
-            t.state?.label ?? this.translationFunc("address.chooseState"),
+            t.state?.label ?? this.translationFunc("address.state"),
             s.state,
             a.state,
             n.state,
-            f(!0, !0),
+            this.stateStyles,
             "address-level1"
           );
           this.inputs.set("state", v), h.appendChild(v.getElement());
@@ -1195,7 +1224,7 @@ class re extends P {
     return t.className = `address-row address-row-${e.length === 1 ? "single" : "double"}`, t;
   }
   createInput(e, t, s, a, n, r, o) {
-    const d = `${this.type}Address.${e}`, c = new ce({
+    const d = `${this.type}Address.${e}`, c = new pe({
       name: d,
       error: !1,
       errorMsg: void 0,
@@ -1203,37 +1232,38 @@ class re extends P {
       ...this.grouped ? { placeholder: t } : {
         label: t,
         placeholder: (() => {
-          const p = `address.placeholder.${e}`, b = this.translationFunc(p);
-          return b !== p ? b : t;
+          const u = `address.placeholder.${e}`, S = this.translationFunc(u);
+          return S !== u ? S : t;
         })()
       },
       value: s,
       autocomplete: o,
-      onChange: (p) => {
-        c.setError(!1);
-        const b = new Event("input", { bubbles: !0 });
-        Object.defineProperty(b, "target", {
-          writable: !1,
-          value: {
-            name: d,
-            value: p.target.value
-          }
-        }), this.onChange(b);
+      onChange: (u) => {
+        c.setError(!1), this.onChange(
+          P({
+            type: "input",
+            target: {
+              name: d,
+              value: u.target.value
+            }
+          })
+        );
       }
     });
-    return c.addEventListener("blur", (p) => {
-      const b = new Event("blur", { bubbles: !0 });
-      Object.defineProperty(b, "target", {
-        writable: !1,
-        value: {
-          name: d,
-          value: p.target.value
-        }
-      }), this.onBlur(b);
+    return c.addEventListener("blur", (u) => {
+      this.onBlur(
+        P({
+          type: "blur",
+          target: {
+            name: d,
+            value: u.target.value
+          }
+        })
+      );
     }), c;
   }
   createCountrySelect(e, t, s, a, n, r) {
-    const o = `${this.type}Address.country`, d = ye(n, this.locale), c = new H({
+    const o = `${this.type}Address.country`, d = ve(n, this.locale), c = new _({
       name: o,
       error: !1,
       errorMsg: void 0,
@@ -1245,70 +1275,126 @@ class re extends P {
       value: e,
       options: d,
       autocomplete: "country",
-      onChange: (p) => {
+      onChange: (u) => {
         c.setError(!1);
-        const b = p.target.value;
-        this.updateStateOptionsForCountry(b);
-        const l = new Event("change", { bubbles: !0 });
-        Object.defineProperty(l, "target", {
-          writable: !1,
-          value: {
-            name: o,
-            value: b
-          }
-        }), this.onChange(l);
+        const S = u.target.value;
+        this.onChange(
+          P({
+            type: "change",
+            target: { name: o, value: S }
+          })
+        ), this.handleCountryChange(S);
       }
     });
-    return c.addEventListener("blur", (p) => {
-      const b = new Event("blur", { bubbles: !0 });
-      Object.defineProperty(b, "target", {
-        writable: !1,
-        value: {
-          name: o,
-          value: p.target.value
-        }
-      }), this.onBlur(b);
+    return c.addEventListener("blur", (u) => {
+      this.onBlur(
+        P({
+          type: "blur",
+          target: {
+            name: o,
+            value: u.target.value
+          }
+        })
+      );
     }), c;
   }
-  updateStateOptionsForCountry(e) {
+  handleCountryChange(e) {
+    const t = this.currentCountry;
+    if (this.currentCountry = e, !this.stateRow || !this.stateFieldConfig?.enabled) return;
+    const s = this.stateFieldConfig.hiddenForCountries?.includes(t), a = this.stateFieldConfig.hiddenForCountries?.includes(e);
+    if (a && !s) {
+      this.stateRow.style.display = "none", this.clearStateValue();
+      return;
+    }
+    if (!a && s && (this.stateRow.style.display = ""), a) return;
+    const n = this.inputs.get("state") instanceof _, r = O.has(e);
+    if (n && r) {
+      const o = this.inputs.get("state");
+      if (o instanceof _) {
+        const d = e === "CA" ? "CA" : "US", c = ee(d), u = d === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState");
+        o.setOptions(c, u);
+      }
+      this.clearStateValue();
+      return;
+    }
+    if (n !== r) {
+      this.rebuildStateField(e), this.clearStateValue();
+      return;
+    }
+    !n && !r && t !== e && this.clearStateValue();
+  }
+  rebuildStateField(e) {
+    if (!this.stateRow || !this.stateStyles) return;
     const t = this.inputs.get("state");
-    if (!(t instanceof H)) return;
-    const s = e === "CA" ? "CA" : "US", a = Z(this.stateOptions, s), n = s === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState");
-    t.setOptions(a, n);
+    if (t && (t.getElement().remove(), this.inputs.delete("state")), O.has(e)) {
+      const a = this.createStateSelect(
+        "",
+        void 0,
+        void 0,
+        this.stateStyles,
+        e,
+        this.stateFieldConfig?.label
+      );
+      this.inputs.set("state", a), this.stateRow.appendChild(a.getElement());
+    } else {
+      const a = this.createInput(
+        "state",
+        this.stateFieldConfig?.label ?? this.translationFunc("address.state"),
+        "",
+        void 0,
+        void 0,
+        this.stateStyles,
+        "address-level1"
+      );
+      this.inputs.set("state", a), this.stateRow.appendChild(a.getElement());
+    }
   }
-  createStateSelect(e, t, s, a, n, r, o) {
-    const d = `${this.type}Address.state`, c = r === "CA" ? "CA" : "US", p = Z(n, c), b = c === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState"), l = new H({
-      name: d,
+  clearStateValue() {
+    const e = this.inputs.get("state");
+    e && e.setValue("");
+    const t = `${this.type}Address.state`;
+    this.onChange(
+      P({
+        type: "input",
+        target: { name: t, value: "" },
+        detail: { programmatic: !0 }
+      })
+    );
+  }
+  createStateSelect(e, t, s, a, n, r) {
+    const o = `${this.type}Address.state`, d = n === "CA" ? "CA" : "US", c = ee(d), u = d === "CA" ? this.translationFunc("address.chooseProvince") : this.translationFunc("address.chooseState"), S = new _({
+      name: o,
       error: !1,
       errorMsg: void 0,
       styles: a,
-      placeholder: b,
-      ...!this.grouped && { label: o ?? b },
+      placeholder: u,
+      ...!this.grouped && { label: r ?? u },
       value: e,
-      options: p,
+      options: c,
       autocomplete: "address-level1",
-      onChange: (g) => {
-        l.setError(!1);
-        const m = new Event("change", { bubbles: !0 });
-        Object.defineProperty(m, "target", {
-          writable: !1,
-          value: {
-            name: d,
-            value: g.target.value
-          }
-        }), this.onChange(m);
+      onChange: (l) => {
+        S.setError(!1), this.onChange(
+          P({
+            type: "change",
+            target: {
+              name: o,
+              value: l.target.value
+            }
+          })
+        );
       }
     });
-    return l.addEventListener("blur", (g) => {
-      const m = new Event("blur", { bubbles: !0 });
-      Object.defineProperty(m, "target", {
-        writable: !1,
-        value: {
-          name: d,
-          value: g.target.value
-        }
-      }), this.onBlur(m);
-    }), l;
+    return S.addEventListener("blur", (l) => {
+      this.onBlur(
+        P({
+          type: "blur",
+          target: {
+            name: o,
+            value: l.target.value
+          }
+        })
+      );
+    }), S;
   }
   createUngroupedFields(e, t, s, a, n) {
     const r = e.styles.borderRadius, o = {
@@ -1316,21 +1402,21 @@ class re extends P {
       fontSize: e.styles.fontSize,
       fontFamily: e.styles.fontFamily,
       borderRadius: `${r}px`
-    }, d = (c, p, b) => {
+    }, d = (c, u, S) => {
       if (!t[c]?.enabled) return;
-      const l = t[c]?.label ?? this.translationFunc(p), g = this.createRow(["full"]), m = this.createInput(
+      const l = t[c]?.label ?? this.translationFunc(u), p = this.createRow(["full"]), y = this.createInput(
         c,
         l,
         s[c],
         a[c],
         n[c],
         o,
-        b
+        S
       );
-      this.inputs.set(c, m), g.appendChild(m.getElement()), this.fieldsContainer.appendChild(g);
+      this.inputs.set(c, y), p.appendChild(y.getElement()), this.fieldsContainer.appendChild(p);
     };
     if (d("firstName", "address.firstName", "given-name"), d("lastName", "address.lastName", "family-name"), d("street", "address.addressLine1", "street-address"), d("city", "address.townCity", "address-level2"), t.country?.enabled) {
-      const c = t.country?.label ?? this.translationFunc("address.chooseCountry"), p = this.createRow(["full"]), b = this.createCountrySelect(
+      const c = t.country?.label ?? this.translationFunc("address.chooseCountry"), u = this.createRow(["full"]), S = this.createCountrySelect(
         s.country,
         a.country,
         n.country,
@@ -1338,33 +1424,36 @@ class re extends P {
         t.country?.options,
         c
       );
-      this.inputs.set("country", b), p.appendChild(b.getElement()), this.fieldsContainer.appendChild(p);
+      this.inputs.set("country", S), u.appendChild(S.getElement()), this.fieldsContainer.appendChild(u);
     }
     if (t.state?.enabled) {
-      this.stateOptions = t.state?.options;
-      const c = this.createRow(["full"]), p = t.state?.options && t.state.options.length > 0, b = t.state?.label ?? this.translationFunc("address.chooseState");
-      if (p) {
-        const l = this.createStateSelect(
+      this.stateFieldConfig = t.state;
+      const c = this.createRow(["full"]);
+      this.stateRow = c, this.stateStyles = o, this.currentCountry = s.country, t.state?.hiddenForCountries?.includes(
+        s.country
+      ) && (c.style.display = "none");
+      const S = O.has(s.country), l = t.state?.label ?? this.translationFunc("address.state");
+      if (S) {
+        const p = this.createStateSelect(
           s.state,
           a.state,
           n.state,
           o,
-          t.state?.options,
           s.country,
-          b
+          l
         );
-        this.inputs.set("state", l), c.appendChild(l.getElement());
+        this.inputs.set("state", p), c.appendChild(p.getElement());
       } else {
-        const l = this.createInput(
+        const p = this.createInput(
           "state",
-          b,
+          l,
           s.state,
           a.state,
           n.state,
           o,
           "address-level1"
         );
-        this.inputs.set("state", l), c.appendChild(l.getElement());
+        this.inputs.set("state", p), c.appendChild(p.getElement());
       }
       this.fieldsContainer.appendChild(c);
     }
@@ -1401,12 +1490,11 @@ class re extends P {
   }
   updateField(e, t, s, a) {
     const n = this.inputs.get(e);
-    if (n) {
-      const o = n.getElement().querySelector("input") || n.getElement().querySelector("select"), d = n.getValue();
-      !(document.activeElement === o) && !(t === "" && d !== "") && this.setValue(e, t);
-    }
-    const r = !!(a && s);
-    this.setError(e, r, s);
+    if (!n) return;
+    const r = n.getElement().querySelector("input") || n.getElement().querySelector("select"), o = n.getValue();
+    !(document.activeElement === r) && !(t === "" && o !== "") && this.setValue(e, t);
+    const u = !!(a && s);
+    this.setError(e, u, s);
   }
   updateAllFields(e, t, s) {
     Object.keys(e).forEach((a) => {
@@ -1423,13 +1511,14 @@ class re extends P {
     e && e.focus();
   }
 }
-class pt {
+class ft {
   input = null;
   isVgsMode;
   vgsWrapper = null;
   vgsContainer = null;
   vgsHelperText = null;
   wrapperElement;
+  _vgsFieldsReady = !1;
   constructor(e) {
     const {
       value: t,
@@ -1455,12 +1544,12 @@ class pt {
     const s = e.styles.borderRadius, a = document.createElement("div");
     a.style.marginBottom = "4px";
     const n = document.createElement("label");
-    n.className = "input-label", n.textContent = t("cardholderNameLabel"), n.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(n), this.wrapperElement.appendChild(a), this.vgsWrapper = document.createElement("div"), this.vgsWrapper.className = "vgs-wrap", this.vgsWrapper.style.position = "relative", this.vgsWrapper.style.borderRadius = `${s}px`, this.vgsWrapper.style.height = "38.5px", this.vgsWrapper.style.width = "100%", this.vgsWrapper.style.overflow = "hidden", this.vgsWrapper.style.background = "#fff", this.vgsWrapper.style.boxShadow = "none";
+    n.className = "input-label", n.textContent = t("cardholderNameLabel"), n.style.fontFamily = `"${e.styles.fontFamily}", sans-serif`, a.appendChild(n), this.wrapperElement.appendChild(a), this.vgsWrapper = document.createElement("div"), this.vgsWrapper.className = "vgs-wrap", this.vgsWrapper.style.position = "relative", this.vgsWrapper.style.borderRadius = `${s}px`, this.vgsWrapper.style.height = "38.5px", this.vgsWrapper.style.width = "100%", this.vgsWrapper.style.overflow = "hidden";
     const r = document.createElement("div");
-    r.className = "vgs-field-skeleton", this.vgsWrapper.appendChild(r), this.vgsContainer = document.createElement("div"), this.vgsContainer.id = `vgs-cc-name-${Date.now()}`, this.vgsContainer.style.position = "relative", this.vgsContainer.style.zIndex = "1", this.vgsContainer.style.width = "100%", this.vgsContainer.style.height = "100%", this.vgsWrapper.appendChild(this.vgsContainer), this.wrapperElement.appendChild(this.vgsWrapper), this.vgsHelperText = new be({ visible: !1 }), this.wrapperElement.appendChild(this.vgsHelperText.getElement());
+    r.className = "vgs-field-skeleton", this.vgsWrapper.appendChild(r), this.vgsContainer = document.createElement("div"), this.vgsContainer.id = `vgs-cc-name-${Date.now()}`, this.vgsContainer.style.position = "relative", this.vgsContainer.style.zIndex = "1", this.vgsContainer.style.width = "100%", this.vgsContainer.style.height = "100%", this.vgsWrapper.appendChild(this.vgsContainer), this.wrapperElement.appendChild(this.vgsWrapper), this.vgsHelperText = new Se({ visible: !1 }), this.wrapperElement.appendChild(this.vgsHelperText.getElement());
   }
   buildNativeLayout(e, t, s, a, n, r, o) {
-    this.input = new ce({
+    this.input = new pe({
       name: "name",
       label: r("cardholderNameLabel"),
       error: !1,
@@ -1475,8 +1564,8 @@ class pt {
       value: e,
       autocomplete: o,
       onChange: (d) => {
-        const p = d.target.value, b = p.replace(/[^a-zA-Z\s\-'.]/g, "");
-        p !== b && this.input?.setValue(b), this.input?.setError(!1), this.trim(), t(d);
+        const u = d.target.value, S = u.replace(/[^a-zA-Z\s\-'.]/g, "");
+        u !== S && this.input?.setValue(S), this.input?.setError(!1), this.trim(), t(d);
       }
     }), this.input.addEventListener("blur", (d) => {
       s(d);
@@ -1487,16 +1576,16 @@ class pt {
   }
   handleVgsStateChange(e, t) {
     if (!this.isVgsMode || !this.vgsWrapper) return;
-    const a = !!e[J.CARDHOLDER]?.isFocused;
-    if (this.vgsWrapper.classList.toggle("vgs-wrap-focused", a), !t || !this.vgsHelperText) return;
-    const n = t[J.CARDHOLDER];
-    n ? (this.vgsHelperText.setText(n), this.vgsHelperText.toggleVisibility(!0)) : this.vgsHelperText.toggleVisibility(!1);
+    const s = e[te.CARDHOLDER]?.isFocused;
+    if (this._vgsFieldsReady && (this.vgsWrapper.style.boxShadow = s ? "0 0 0 1px rgba(50, 151, 211, 0.7), 0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 4px rgba(50, 151, 211, 0.3)" : "0 0 0 1px #e0e0e0, 0 2px 4px 0 rgba(0,0,0,0.07), 0 1px 1.5px 0 rgba(0,0,0,0.05)"), !t || !this.vgsHelperText) return;
+    const a = t[te.CARDHOLDER];
+    a ? (this.vgsHelperText.setText(a), this.vgsHelperText.toggleVisibility(!0)) : this.vgsHelperText.toggleVisibility(!1);
   }
   hideFakePlaceholder() {
     if (!this.vgsWrapper) return;
-    this.vgsWrapper.style.boxShadow = "";
+    this._vgsFieldsReady = !0, this.vgsWrapper.style.overflow = "visible", this.vgsWrapper.style.transition = "box-shadow 0.1s ease-in", this.vgsWrapper.style.boxShadow = "0 0 0 1px #e0e0e0, 0 2px 4px 0 rgba(0,0,0,0.07), 0 1px 1.5px 0 rgba(0,0,0,0.05)";
     const e = this.vgsWrapper.querySelector(".vgs-field-skeleton");
-    e && e.remove();
+    e && e.remove(), this.vgsContainer?.querySelectorAll("iframe").forEach((t) => t.style.height = "38.5px");
   }
   getValue() {
     return this.isVgsMode ? "" : this.input?.getValue() ?? "";
@@ -1524,7 +1613,7 @@ class pt {
     this.isVgsMode || this.input?.focus();
   }
 }
-class he extends P {
+class ge extends A {
   constructor() {
     super("div", ["skeleton-container"]), this.createSkeletonElements();
   }
@@ -1532,23 +1621,23 @@ class he extends P {
     this.appendChild(this.createPaymentMethodSkeleton()), this.appendChild(this.createPaymentSeparatorSkeleton());
   }
   createPaymentMethodSkeleton() {
-    const e = k.createDiv(["skeleton-field"]), t = k.createDiv([
+    const e = D.createDiv(["skeleton-field"]), t = D.createDiv([
       "skeleton",
       "skeleton-payment-method"
     ]);
     return e.appendChild(t), e;
   }
   createPaymentSeparatorSkeleton() {
-    const e = k.createDiv([
+    const e = D.createDiv([
       "payment-separator_container"
-    ]), t = k.createDiv(["payment-separator__line"]), s = k.createDiv([
+    ]), t = D.createDiv(["payment-separator__line"]), s = D.createDiv([
       "skeleton",
       "skeleton-separator-text"
-    ]), a = k.createDiv(["payment-separator__line"]);
+    ]), a = D.createDiv(["payment-separator__line"]);
     return e.appendChild(t), e.appendChild(s), e.appendChild(a), e;
   }
 }
-class gt extends P {
+class yt extends A {
   constructor(e) {
     const { translationFunc: t, checkoutProfile: s } = e;
     super("div", ["payment-separator"]);
@@ -1560,7 +1649,7 @@ class gt extends P {
     o.className = "payment-separator__line", a.appendChild(n), a.appendChild(r), a.appendChild(o);
   }
 }
-class ft extends P {
+class bt extends A {
   paymentMethods;
   paymentSeparator;
   skeleton;
@@ -1574,8 +1663,8 @@ class ft extends P {
       translationFunc: o,
       paymentId: d,
       checkoutKey: c,
-      checkoutDetails: p,
-      environment: b,
+      checkoutDetails: u,
+      environment: S,
       countryCode: l
     } = e;
     if (super("div", ["payment-methods"]), this.paymentMethods = /* @__PURE__ */ new Map(), !t?.additionalPaymentMethods) {
@@ -1586,44 +1675,44 @@ class ft extends P {
       this.renderSkeleton();
       return;
     }
-    const g = Object.entries(
+    const p = Object.entries(
       t.additionalPaymentMethods
-    ).filter(([m, u]) => {
-      const f = u.enabled, h = r ? r[m] === !0 : !0, y = !u.countries || l && u.countries.includes(l);
-      return f && h && y;
-    }).sort((m, u) => m[1].order - u[1].order);
-    if (g.length === 0) {
+    ).filter(([y, m]) => {
+      const g = m.enabled, h = r ? r[y] === !0 : !0, b = !m.countries || l && m.countries.includes(l);
+      return g && h && b;
+    }).sort((y, m) => y[1].order - m[1].order);
+    if (p.length === 0) {
       this.getElement().style.display = "none";
       return;
     }
-    for (const [m] of g)
-      switch (m) {
+    for (const [y] of p)
+      switch (y) {
         case "paypal": {
           if (a) {
-            const u = new Se({
+            const m = new Ee({
               checkoutProfile: t,
               formData: s,
               onSubmit: a
             });
-            this.paymentMethods.set("paypal", u), u.appendTo(this.getElement());
+            this.paymentMethods.set("paypal", m), m.appendTo(this.getElement());
           }
           break;
         }
         case "applePay": {
           if (n && d && c) {
-            const u = t.appearance?.additionalPaymentMethods?.applePay, f = new ve({
+            const m = t.appearance?.additionalPaymentMethods?.applePay, g = new Ce({
               checkoutProfile: t,
               formData: s,
               onSubmit: n,
               paymentId: d,
               checkoutKey: c,
-              checkoutDetails: p,
-              environment: b,
-              displayName: u?.displayName,
-              requiredBillingContactFields: u?.requiredBillingContactFields,
-              requiredShippingContactFields: u?.requiredShippingContactFields
+              checkoutDetails: u,
+              environment: S,
+              displayName: m?.displayName,
+              requiredBillingContactFields: m?.requiredBillingContactFields,
+              requiredShippingContactFields: m?.requiredShippingContactFields
             });
-            this.paymentMethods.set("applePay", f), f.appendTo(this.getElement());
+            this.paymentMethods.set("applePay", g), g.appendTo(this.getElement());
           }
           break;
         }
@@ -1635,17 +1724,17 @@ class ft extends P {
         //   break;
         default:
           console.warn(
-            `[PaymentMethods] Unsupported payment method: ${m}`
+            `[PaymentMethods] Unsupported payment method: ${y}`
           );
           break;
       }
-    this.paymentMethods.size > 0 && (this.paymentSeparator = new gt({
+    this.paymentMethods.size > 0 && (this.paymentSeparator = new yt({
       translationFunc: o,
       checkoutProfile: t
     }), this.getElement().appendChild(this.paymentSeparator.getElement()));
   }
   renderSkeleton() {
-    this.skeleton = new he(), this.getElement().appendChild(this.skeleton.getElement());
+    this.skeleton = new ge(), this.getElement().appendChild(this.skeleton.getElement());
   }
   updateFormData(e) {
     const t = this.paymentMethods.get("paypal");
@@ -1657,8 +1746,8 @@ class ft extends P {
     return this.paymentMethods.size > 0 && this.getElement().style.display !== "none";
   }
 }
-const yt = 17;
-class bt extends P {
+const vt = 17;
+class St extends A {
   styles;
   isHovered = !1;
   constructor(e) {
@@ -1668,7 +1757,7 @@ class bt extends P {
   }
   applyStyles() {
     const e = this.getElement();
-    e.style.backgroundColor = this.isHovered ? `color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)` : this.styles.backgroundColor, e.disabled ? (e.style.color = "rgb(150, 150, 150)", e.style.backgroundColor = "rgb(200, 200, 200)") : e.style.color = this.styles.color, e.style.borderRadius = this.styles.borderRadius === yt ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
+    e.style.backgroundColor = this.isHovered ? `color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)` : this.styles.backgroundColor, e.disabled ? (e.style.color = "rgb(150, 150, 150)", e.style.backgroundColor = "rgb(200, 200, 200)") : e.style.color = this.styles.color, e.style.borderRadius = this.styles.borderRadius === vt ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
   }
   handleMouseEnter() {
     this.isHovered = !0, this.applyStyles();
@@ -1680,11 +1769,11 @@ class bt extends P {
     return this.getElement().disabled = e, e ? (this.addClass("disabled"), this.removeClass("valid")) : (this.removeClass("disabled"), this.addClass("valid")), this.applyStyles(), this;
   }
 }
-class vt {
+class Ct {
   button;
   constructor(e) {
     const { disabled: t, checkoutProfile: s, translationFunc: a } = e;
-    this.button = new bt({
+    this.button = new St({
       text: a(
         `buttonTexts.${s?.layout.actionButton.translationKey}`
       ),
@@ -1711,7 +1800,7 @@ class vt {
     return this.button.appendTo(e), this;
   }
 }
-class St {
+class Et {
   formElement;
   focusManager;
   translationFunc;
@@ -1757,7 +1846,7 @@ class St {
         (a) => a.enabled
       ))
         return;
-      this.paymentMethods = new ft({
+      this.paymentMethods = new bt({
         checkoutProfile: e,
         formData: t,
         supportedPaymentMethods: this.supportedPaymentMethods,
@@ -1784,7 +1873,7 @@ class St {
       ) || e.layout.shippingFields && Object.values(e.layout.shippingFields).some(
         (r) => r?.enabled
       );
-      this.emailField = new Ee({
+      this.emailField = new Fe({
         value: t.email,
         onChange: this.onChange,
         onBlur: this.onBlur,
@@ -1802,7 +1891,7 @@ class St {
   }
   createPhoneNumberField(e, t, s, a) {
     const n = document.createElement("div");
-    this.phonePlaceholder = n, this.formElement.appendChild(n), Ce().then(({ PhoneNumberField: r }) => {
+    this.phonePlaceholder = n, this.formElement.appendChild(n), Me().then(({ PhoneNumberField: r }) => {
       n.isConnected && (this.phoneNumberField = new r({
         value: t.phoneNumber ?? "",
         onChange: this.onChange,
@@ -1829,7 +1918,7 @@ class St {
         this.cardSectionSkeleton = this.buildCardSkeleton(e), this.formElement.appendChild(this.cardSectionSkeleton);
         return;
       }
-      if (this.cardSection = new Fe({
+      if (this.cardSection = new Ne({
         checkoutProfile: e,
         cardNumber: t.cardNumber,
         cardNumberError: s.cardNumber,
@@ -1843,13 +1932,12 @@ class St {
         onChange: this.onChange,
         onBlur: this.onBlur,
         onCardBrandChange: () => {
-          if (t.cardCvv) {
-            const n = new Event("blur", { bubbles: !0 });
-            Object.defineProperty(n, "target", {
-              writable: !1,
-              value: { name: "cardCvv", value: t.cardCvv }
-            }), this.onBlur(n);
-          }
+          t.cardCvv && this.onBlur(
+            P({
+              type: "blur",
+              target: { name: "cardCvv", value: t.cardCvv }
+            })
+          );
         },
         translationFunc: this.translationFunc,
         vgsService: this.vgsService,
@@ -1885,7 +1973,7 @@ class St {
         this.cardholderSectionSkeleton = this.buildCardholderSkeleton(e), this.formElement.appendChild(this.cardholderSectionSkeleton);
         return;
       }
-      if (this.cardholderSection = new pt({
+      if (this.cardholderSection = new ft({
         value: t.name,
         onChange: this.onChange,
         onBlur: this.onBlur,
@@ -1918,7 +2006,7 @@ class St {
         zipCode: "",
         country: ""
       };
-      this.billingAddressSection = new re({
+      this.billingAddressSection = new ce({
         type: "billing",
         title: this.translationFunc("address.billingTitle"),
         checkoutProfile: e,
@@ -1951,7 +2039,7 @@ class St {
         zipCode: "",
         country: ""
       };
-      this.shippingAddressSection = new re({
+      this.shippingAddressSection = new ce({
         type: "shipping",
         title: this.translationFunc("address.shippingTitle"),
         checkoutProfile: e,
@@ -1971,7 +2059,7 @@ class St {
   }
   createSubmitButton(e, t) {
     try {
-      this.submitButton = new vt({
+      this.submitButton = new Ct({
         disabled: t,
         checkoutProfile: e,
         translationFunc: this.translationFunc
@@ -2040,8 +2128,8 @@ class St {
     d.style.display = "flex", d.style.gap = "8px";
     const c = document.createElement("div");
     c.style.position = "relative", c.style.flex = "1", c.style.height = "38.5px", c.style.overflow = "hidden", c.style.borderRadius = `${t}px`, c.appendChild(this.createSkeletonDiv()), d.appendChild(c);
-    const p = document.createElement("div");
-    return p.style.position = "relative", p.style.flex = "1", p.style.height = "38.5px", p.style.overflow = "hidden", p.style.borderRadius = `${t}px`, p.appendChild(this.createSkeletonDiv()), d.appendChild(p), r.appendChild(d), s.appendChild(r), s;
+    const u = document.createElement("div");
+    return u.style.position = "relative", u.style.flex = "1", u.style.height = "38.5px", u.style.overflow = "hidden", u.style.borderRadius = `${t}px`, u.appendChild(this.createSkeletonDiv()), d.appendChild(u), r.appendChild(d), s.appendChild(r), s;
   }
   createSkeletonDiv() {
     const e = document.createElement("div");
@@ -2058,7 +2146,7 @@ class St {
   async mountVgsFields(e) {
     if (!this.vgsService || !this.cardSection) return;
     await this.vgsService.whenReady();
-    const t = this.cardSection.getVgsContainerIds(), s = this.cardholderSection?.getVgsContainerId(), a = await ut(
+    const t = this.cardSection.getVgsContainerIds(), s = this.cardholderSection?.getVgsContainerId(), a = await pt(
       e.styles.fontFamily
     ), n = this.cardSection.buildVgsFieldCss(
       e,
@@ -2118,7 +2206,7 @@ class St {
     this.billingAddressSection && (this.billingAddressSection.getElement().remove(), this.billingAddressSection = void 0), this.shippingAddressSection && (this.shippingAddressSection.getElement().remove(), this.shippingAddressSection = void 0), this.submitButton && (this.submitButton.getElement().remove(), this.submitButton = void 0), this.paymentMethods && (this.paymentMethods.getElement().remove(), this.paymentMethods = void 0);
   }
 }
-class Et {
+class Ft {
   formManager;
   focusManager;
   onFormSubmit;
@@ -2129,9 +2217,9 @@ class Et {
   }
   handleChange = (e) => {
     const t = e.target, { name: s, value: a } = t, n = s;
-    this.formManager.handleChange(n, a), this.localTouchedFields.has(n) || (this.localTouchedFields.add(n), this.formManager.handleBlur(n, a));
-    const { formData: r, errors: o, touched: d } = this.formManager.getFormState();
-    this.focusManager.handleStateUpdate(r, o, d);
+    this.formManager.handleChange(n, a), e instanceof CustomEvent && e.detail?.programmatic ? this.localTouchedFields.delete(n) : this.localTouchedFields.has(n) || (this.localTouchedFields.add(n), this.formManager.handleBlur(n, a));
+    const { formData: o, errors: d, touched: c } = this.formManager.getFormState();
+    this.focusManager.handleStateUpdate(o, d, c);
   };
   handleBlur = (e) => {
     const t = e.target, { name: s, value: a } = t, n = s;
@@ -2159,7 +2247,7 @@ class Et {
     this.localTouchedFields.clear();
   }
 }
-class Ct {
+class Mt {
   formManager;
   checkoutProfile;
   formElement;
@@ -2183,7 +2271,7 @@ class Ct {
         try {
           if (e.checkoutProfile.styles?.fontFamily)
             try {
-              const { cleanup: t } = Me({
+              const { cleanup: t } = we({
                 fontFamily: e.checkoutProfile.styles.fontFamily
               });
               this.fontCleanup = t, this.formElement.style.fontFamily = e.checkoutProfile.styles.fontFamily;
@@ -2200,15 +2288,17 @@ class Ct {
   };
   isFormDisabled() {
     const e = this.formManager.getFormState(), t = this.checkoutProfile.getState(), s = Object.keys(e.errors).filter(
-      (y) => y !== "billingAddress" && y !== "shippingAddress"
-    ).length > 0, a = e.errors.billingAddress, n = a && typeof a == "object" ? Object.keys(a).length > 0 : !1, r = e.errors.shippingAddress, o = r && typeof r == "object" ? Object.keys(r).length > 0 : !1, d = s || n || o, p = W(
+      (f) => f !== "billingAddress" && f !== "shippingAddress"
+    ).length > 0, a = e.errors.billingAddress, n = a && typeof a == "object" ? Object.keys(a).length > 0 : !1, r = e.errors.shippingAddress, o = r && typeof r == "object" ? Object.keys(r).length > 0 : !1, d = s || n || o, u = J(
       t.checkoutProfile?.layout
-    ) ? !!(e.formData.billingAddress?.firstName || e.formData.billingAddress?.lastName || e.formData.shippingAddress?.firstName || e.formData.shippingAddress?.lastName) : !!e.formData.name, l = t.checkoutProfile?.layout.phoneNumber?.enabled ?? !1 ? !!e.formData.phoneNumber : !0, { billingFields: g, shippingFields: m } = t.checkoutProfile?.layout ?? {}, u = (y, v) => !y || Object.entries(y).every(
-      ([S, M]) => !M?.enabled || !!v?.[S]?.trim()
-    ), f = !this.isVgsMode || Object.values(this.vgsFieldsState).every(
-      (y) => y?.isValid === !0
-    ), h = this.isVgsMode ? !!e.formData.email && l && f && u(g, e.formData.billingAddress) && u(m, e.formData.shippingAddress) : !!e.formData.email && l && p && !!e.formData.cardNumber && !!e.formData.cardCvv && !!e.formData.cardExpiry && u(g, e.formData.billingAddress) && u(m, e.formData.shippingAddress);
-    return d || !h || this.isSubmitting;
+    ) ? !!(e.formData.billingAddress?.firstName || e.formData.billingAddress?.lastName || e.formData.shippingAddress?.firstName || e.formData.shippingAddress?.lastName) : !!e.formData.name, l = t.checkoutProfile?.layout.phoneNumber?.enabled ?? !1 ? !!e.formData.phoneNumber : !0, { billingFields: p, shippingFields: y } = t.checkoutProfile?.layout ?? {}, m = /* @__PURE__ */ new Set(["US", "CA"]), g = (f, v) => {
+      if (!f) return !0;
+      const E = v?.country ?? "";
+      return Object.entries(f).every(([N, x]) => !x?.enabled || N === "state" && (!m.has(E) || x.hiddenForCountries?.includes(E)) ? !0 : !!v?.[N]?.trim());
+    }, h = !this.isVgsMode || Object.values(this.vgsFieldsState).every(
+      (f) => f?.isValid === !0
+    ), b = this.isVgsMode ? !!e.formData.email && l && h && g(p, e.formData.billingAddress) && g(y, e.formData.shippingAddress) : !!e.formData.email && l && u && !!e.formData.cardNumber && !!e.formData.cardCvv && !!e.formData.cardExpiry && g(p, e.formData.billingAddress) && g(y, e.formData.shippingAddress);
+    return d || !b || this.isSubmitting;
   }
   setSubmitting(e) {
     this.isSubmitting = e;
@@ -2226,7 +2316,7 @@ class Ct {
         continue;
       const n = a.errors?.[0];
       if (!n) continue;
-      const r = Ne(s, n.code);
+      const r = Pe(s, n.code);
       r && (t[s] = e(r));
     }
     return t;
@@ -2238,18 +2328,18 @@ class Ct {
     this.fontCleanup && (this.fontCleanup(), this.fontCleanup = void 0);
   }
 }
-class Ft extends P {
+class Nt extends A {
   titleElement;
   constructor(e = {}) {
     super("div", ["blur-bg"]);
-    const t = k.createDiv(["loader"]);
-    this.titleElement = new P("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
+    const t = D.createDiv(["loader"]);
+    this.titleElement = new A("h3", ["title"]), this.titleElement.setText(e.text || ""), this.appendChild(t), this.appendChild(this.titleElement);
   }
   setText(e) {
     return this.titleElement.setText(e), this;
   }
 }
-const oe = {
+const he = {
   street: "",
   firstName: "",
   lastName: "",
@@ -2257,7 +2347,7 @@ const oe = {
   city: "",
   zipCode: "",
   country: ""
-}, le = (i, e) => {
+}, ue = (i, e) => {
   const t = {}, s = `${e}.`;
   return Object.keys(i).forEach((a) => {
     if (a.startsWith(s)) {
@@ -2266,7 +2356,7 @@ const oe = {
     }
   }), t;
 };
-class Mt {
+class wt {
   formElement;
   componentManager;
   onLoadingStateChange;
@@ -2300,13 +2390,13 @@ class Mt {
       !!(e.errors.name && e.touched.name),
       e.errors.name
     ), this.componentManager.updateBillingAddressSection(
-      e.formData.billingAddress ?? oe,
+      e.formData.billingAddress ?? he,
       e.errors.billingAddress ?? {},
-      le(e.touched, "billingAddress")
+      ue(e.touched, "billingAddress")
     ), this.componentManager.updateShippingAddressSection(
-      e.formData.shippingAddress ?? oe,
+      e.formData.shippingAddress ?? he,
       e.errors.shippingAddress ?? {},
-      le(e.touched, "shippingAddress")
+      ue(e.touched, "shippingAddress")
     ), this.componentManager.updateSubmitButton(t);
   }
   setLoadingState(e) {
@@ -2314,10 +2404,10 @@ class Mt {
       this.onLoadingStateChange(e);
       return;
     }
-    e ? (this.hideSkeleton(), this.formSkeleton = new he(), this.formElement.appendChild(this.formSkeleton.getElement())) : this.hideSkeleton();
+    e ? (this.hideSkeleton(), this.formSkeleton = new ge(), this.formElement.appendChild(this.formSkeleton.getElement())) : this.hideSkeleton();
   }
   showSpinner(e) {
-    this.hideSpinner(), this.spinner = new Ft({ text: e }), this.formElement.appendChild(this.spinner.getElement());
+    this.hideSpinner(), this.spinner = new Nt({ text: e }), this.formElement.appendChild(this.spinner.getElement());
   }
   hideSpinner() {
     this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);
@@ -2326,7 +2416,7 @@ class Mt {
     this.formSkeleton && (this.formSkeleton.getElement().remove(), this.formSkeleton = void 0);
   }
   setErrorMessage(e) {
-    this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new we({ message: e }), this.formElement.insertBefore(
+    this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.alert = new ke({ message: e }), this.formElement.insertBefore(
       this.alert.getElement(),
       this.formElement.firstChild
     );
@@ -2338,7 +2428,7 @@ class Mt {
     this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0), this.formSkeleton && (this.formSkeleton.getElement().remove(), this.formSkeleton = void 0), this.alert && (this.alert.getElement().remove(), this.alert = void 0);
   }
 }
-const D = (i) => ({
+const T = (i) => ({
   street: "",
   firstName: "",
   lastName: "",
@@ -2348,12 +2438,12 @@ const D = (i) => ({
   country: "",
   ...i
 });
-class Nt extends P {
+class Pt extends A {
   options;
-  formManager = lt();
+  formManager = ct();
   checkoutProfile;
-  translation = Pe();
-  focusManager = new ke();
+  translation = Ae();
+  focusManager = new xe();
   // Managers
   componentManager;
   eventHandler;
@@ -2364,9 +2454,9 @@ class Nt extends P {
   vgsJwt;
   vgsCardResult;
   constructor(e) {
-    super("form", ["form-container"]), this.options = e, this.vgsJwt = e.vgsJwt, this.vgsJwt && (this.vgsService = new I()), this.checkoutProfile = ot({
+    super("form", ["form-container"]), this.options = e, this.vgsJwt = e.vgsJwt, this.vgsJwt && (this.vgsService = new L()), this.checkoutProfile = dt({
       appearance: e.appearance
-    }), e.locale && this.translation.setLocale(e.locale), this.componentManager = new St({
+    }), e.locale && this.translation.setLocale(e.locale), this.componentManager = new Et({
       formElement: this.element,
       focusManager: this.focusManager,
       translationFunc: this.translation.t,
@@ -2383,11 +2473,11 @@ class Nt extends P {
       environment: e.environment,
       vgsService: this.vgsService,
       onVgsStateChange: (t) => this.handleVgsStateChange(t)
-    }), this.uiManager = new Mt({
+    }), this.uiManager = new wt({
       formElement: this.element,
       componentManager: this.componentManager,
       onLoadingStateChange: e.onLoadingStateChange
-    }), this.stateCoordinator = new Ct({
+    }), this.stateCoordinator = new Mt({
       formManager: this.formManager,
       checkoutProfile: this.checkoutProfile,
       componentManager: this.componentManager,
@@ -2397,7 +2487,7 @@ class Nt extends P {
       onError: (t) => this.uiManager.setErrorMessage(t),
       onLoadingChange: (t) => this.uiManager.setLoadingState(t),
       getInitialFormData: () => this._getFormStateData().formData
-    }), this.vgsService && this.stateCoordinator.setVgsMode(!0), this.eventHandler = new Et({
+    }), this.vgsService && this.stateCoordinator.setVgsMode(!0), this.eventHandler = new Ft({
       formManager: this.formManager,
       focusManager: this.focusManager,
       onFormSubmit: async () => this.handleSubmit(),
@@ -2422,12 +2512,12 @@ class Nt extends P {
       },
       ...e.initialValues.name && { name: e.initialValues.name },
       ...e.initialValues.billingAddress && {
-        billingAddress: D(
+        billingAddress: T(
           e.initialValues.billingAddress
         )
       },
       ...e.initialValues.shippingAddress && {
-        shippingAddress: D(
+        shippingAddress: T(
           e.initialValues.shippingAddress
         )
       }
@@ -2444,10 +2534,10 @@ class Nt extends P {
         cardNumber: "",
         cardCvv: "",
         ...t?.billingAddress && {
-          billingAddress: D(t.billingAddress)
+          billingAddress: T(t.billingAddress)
         },
         ...t?.shippingAddress && {
-          shippingAddress: D(t.shippingAddress)
+          shippingAddress: T(t.shippingAddress)
         }
       },
       errors: e.errors || {},
@@ -2474,11 +2564,11 @@ class Nt extends P {
       phoneNumber: "",
       phoneCountryCode: e.checkoutProfile.layout.phoneNumber.defaultCountry?.toUpperCase() || "US"
     }), e.checkoutProfile.layout.billingFields && this.formManager.getFormState().formData.billingAddress === void 0 && this.formManager.setFormData({
-      billingAddress: D()
+      billingAddress: T()
     }), e.checkoutProfile.layout.shippingFields && this.formManager.getFormState().formData.shippingAddress === void 0 && this.formManager.setFormData({
-      shippingAddress: D()
+      shippingAddress: T()
     });
-    const { formData: t, errors: s, touched: a } = this._getFormStateData(), n = mt(
+    const { formData: t, errors: s, touched: a } = this._getFormStateData(), n = gt(
       e.checkoutProfile.layout
     );
     try {
@@ -2542,7 +2632,7 @@ class Nt extends P {
     } catch (o) {
       console.error("Failed to create card section:", o);
     }
-    if (!W(
+    if (!J(
       e.checkoutProfile.layout
     ))
       try {
@@ -2580,7 +2670,7 @@ class Nt extends P {
    */
   inferCardholderName() {
     const e = this.checkoutProfile.getState();
-    if (!e.checkoutProfile || !W(
+    if (!e.checkoutProfile || !J(
       e.checkoutProfile.layout
     )) return;
     const { formData: s } = this._getFormStateData(), a = s.billingAddress ?? s.shippingAddress;
@@ -2688,7 +2778,7 @@ class Nt extends P {
     ), this.componentManager.cleanup(), this.uiManager.cleanup(), this.getElement().remove();
   }
   associatePayment(e, t, s, a, n) {
-    this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = a, this.componentManager.setCheckoutDetailsLoaded(!0), n && !this.vgsService && (this.vgsJwt = n, this.vgsService = new I(), this.componentManager.setVgsService(this.vgsService), this.stateCoordinator.setVgsMode(!0), this.vgsService.init(this.options.environment).then((o) => {
+    this.options.paymentId = e, this.options.checkoutKey = t, this.options.supportedPaymentMethods = s, this.options.checkoutDetails = a, this.componentManager.setCheckoutDetailsLoaded(!0), n && !this.vgsService && (this.vgsJwt = n, this.vgsService = new L(), this.componentManager.setVgsService(this.vgsService), this.stateCoordinator.setVgsMode(!0), this.vgsService.init(this.options.environment).then((o) => {
       this.vgsService?.createForm(
         o,
         (d) => this.handleVgsStateChange(d)
@@ -2713,7 +2803,7 @@ class Nt extends P {
     }
   }
 }
-class wt {
+class kt {
   container = null;
   options;
   onSubmit;
@@ -2737,7 +2827,7 @@ class wt {
     }
   }
   renderForm(e) {
-    this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new Nt({
+    this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new Pt({
       apiKey: this.options.apiKey,
       onSubmit: this.onSubmit,
       locale: this.options.locale,
@@ -2774,7 +2864,7 @@ class wt {
     );
   }
 }
-class Pt {
+class At {
   state;
   listeners = /* @__PURE__ */ new Set();
   constructor(e) {
@@ -2796,8 +2886,8 @@ class Pt {
     this.listeners.forEach((t) => t(e));
   }
 }
-const kt = "en";
-class At {
+const xt = "en";
+class Dt {
   config;
   paymentState;
   apiService;
@@ -2805,18 +2895,18 @@ class At {
   stateManager;
   sessionId;
   constructor(e) {
-    this.config = this.validateConfig(e), this.paymentState = {}, this.sessionId = crypto.randomUUID(), at({
+    this.config = this.validateConfig(e), this.paymentState = {}, this.sessionId = crypto.randomUUID(), ot({
       environment: this.config.environment,
       sessionId: this.sessionId
-    }), F(C.CHECKOUT_INITIALIZED, {
+    }), M(F.CHECKOUT_INITIALIZED, {
       environment: this.config.environment
-    }), this.apiService = new Ae(
+    }), this.apiService = new De(
       this.config.apiKey,
       this.config.environment
-    ), this.stateManager = new Pt({
+    ), this.stateManager = new At({
       mounted: !1,
       form: null
-    }), this.formManager = new wt(
+    }), this.formManager = new kt(
       {
         locale: this.config.locale,
         apiKey: this.config.apiKey,
@@ -2838,7 +2928,7 @@ class At {
       apiKey: e.apiKey,
       returnUrl: e.returnUrl,
       environment: e.environment,
-      locale: e.locale || kt,
+      locale: e.locale || xt,
       disableErrorMessages: e.disableErrorMessages ?? !1,
       manualActionHandling: e.manualActionHandling ?? !1,
       appearance: e.appearance,
@@ -2859,7 +2949,7 @@ class At {
     return t.appendChild(s), this.stateManager.updateState({
       form: s,
       mounted: !0
-    }), this.formManager.mount(s), F(C.CHECKOUT_MOUNTED, {
+    }), this.formManager.mount(s), M(F.CHECKOUT_MOUNTED, {
       container_id: e
     }), this;
   }
@@ -2871,7 +2961,7 @@ class At {
       t && t.remove(), this.stateManager.updateState({
         form: null,
         mounted: !1
-      }), F(C.CHECKOUT_UNMOUNTED);
+      }), M(F.CHECKOUT_UNMOUNTED);
     });
   }
   async handleSubmit({
@@ -2883,7 +2973,7 @@ class At {
         "Payment must be associated before submitting. Call associatePayment() first."
       );
     const s = this.getPaymentMethod(e, t);
-    F(C.PAYMENT_SUBMIT_STARTED, {
+    M(F.PAYMENT_SUBMIT_STARTED, {
       payment_id: this.paymentState.paymentId,
       payment_method: s
     });
@@ -2896,8 +2986,8 @@ class At {
         returnUrl: this.config.returnUrl,
         applePayData: t
       }), r = performance.now() - a;
-      ne(
-        X.PAYMENT_AUTHORIZATION_TIME,
+      oe(
+        se.PAYMENT_AUTHORIZATION_TIME,
         r,
         "ms",
         {
@@ -2905,14 +2995,14 @@ class At {
           payment_method: s,
           status: "success"
         }
-      ), F(C.PAYMENT_SUBMIT_SUCCESS, {
+      ), M(F.PAYMENT_SUBMIT_SUCCESS, {
         payment_id: this.paymentState.paymentId,
         payment_method: s
       }), this.handlePaymentResponse(n);
     } catch (n) {
       const r = performance.now() - a;
-      ne(
-        X.PAYMENT_AUTHORIZATION_TIME,
+      oe(
+        se.PAYMENT_AUTHORIZATION_TIME,
         r,
         "ms",
         {
@@ -2920,7 +3010,7 @@ class At {
           payment_method: s,
           status: "failed"
         }
-      ), F(C.PAYMENT_SUBMIT_FAILED, {
+      ), M(F.PAYMENT_SUBMIT_FAILED, {
         payment_id: this.paymentState.paymentId,
         payment_method: s,
         error_message: n.details?.message ?? "Unknown error"
@@ -2928,17 +3018,17 @@ class At {
     }
   }
   handlePaymentResponse(e) {
-    if (e.latestTransaction.status === "authorized" && (F(C.PAYMENT_AUTHORIZED, {
+    if (e.latestTransaction.status === "authorized" && (M(F.PAYMENT_AUTHORIZED, {
       payment_id: this.paymentState.paymentId ?? "",
       status: e.latestTransaction.status
     }), this.config.callbacks.onPaymentSucceeded?.(
       e.latestTransaction.status
-    )), e.latestTransaction.status === "failed" && (F(C.PAYMENT_FAILED, {
+    )), e.latestTransaction.status === "failed" && (M(F.PAYMENT_FAILED, {
       payment_id: this.paymentState.paymentId ?? "",
       status: e.latestTransaction.status
     }), this.config.callbacks.onPaymentFailed?.(e.latestTransaction.status)), e.status === "requires_action") {
       const { redirectUrl: t } = e.action;
-      F(C.PAYMENT_ACTION_REQUIRED, {
+      M(F.PAYMENT_ACTION_REQUIRED, {
         payment_id: this.paymentState.paymentId ?? "",
         status: e.status
       }), this.config.manualActionHandling ? this.config.callbacks.onActionRequired?.(t) : globalThis.location.href = t;
@@ -2978,7 +3068,7 @@ class At {
       throw new Error("paymentId and checkoutKey are required");
     this.paymentState.paymentId = e, this.paymentState.checkoutKey = t;
     try {
-      const s = await De({
+      const s = await Ie({
         id: e,
         checkoutKey: t,
         environment: this.config.environment
@@ -3008,35 +3098,35 @@ class At {
         a,
         this.paymentState.checkoutDetails,
         s.vgsJwt
-      ), F(C.PAYMENT_ASSOCIATED, {
+      ), M(F.PAYMENT_ASSOCIATED, {
         payment_id: e,
         currency: s.currency,
         country_code: s.countryCode
       });
     } catch (s) {
-      throw F(C.PAYMENT_ASSOCIATION_FAILED, {
+      throw M(F.PAYMENT_ASSOCIATION_FAILED, {
         payment_id: e,
         error_message: s instanceof Error ? s.message : "Unknown error"
-      }), rt(
+      }), lt(
         s instanceof Error ? s : new Error("Failed to associate payment"),
         { payment_id: e }
       ), s;
     }
   }
 }
-typeof globalThis < "u" && (globalThis.OdusCheckout = At);
+typeof globalThis < "u" && (globalThis.OdusCheckout = Dt);
 export {
-  At as OdusCheckout,
-  Tt as deLocale,
-  Vt as enLocale,
-  _t as esLocale,
-  Bt as frLocale,
+  Dt as OdusCheckout,
+  _t as deLocale,
+  Rt as enLocale,
+  Bt as esLocale,
+  Ut as frLocale,
   Ot as itLocale,
-  Rt as plLocale,
-  Ut as ptLocale,
-  rt as pushError,
-  F as pushEvent,
-  It as pushLog,
-  ne as pushMeasurement,
-  Ht as trLocale
+  Ht as plLocale,
+  zt as ptLocale,
+  lt as pushError,
+  M as pushEvent,
+  Tt as pushLog,
+  oe as pushMeasurement,
+  $t as trLocale
 };