@odus/checkout 0.6.2 → 0.8.0

package/dist/checkout.es.js

@@ -1,10 +1,10 @@
-const I = (o) => o === "test" ? "https://sandbox-api.odus.com" : o === "live" ? "https://api.odus.com" : "http://localhost:3000";
-class H {
+const N = (n) => n === "test" ? "https://sandbox-api.odus.com" : n === "live" ? "https://api.odus.com" : "http://localhost:3000";
+class O {
   apiKey;
   baseUrl;
   browserInfo;
   constructor(e, t, i) {
-    this.apiKey = e, this.baseUrl = I(t), this.browserInfo = i || { userAgent: navigator.userAgent };
+    this.apiKey = e, this.baseUrl = N(t), this.browserInfo = i || { userAgent: navigator.userAgent };
   }
   async fetchApi({
     endpoint: e,
@@ -24,17 +24,17 @@ class H {
         body: i ? JSON.stringify(i) : void 0
       });
       if (!s.ok) {
-        let n;
+        let o;
         try {
-          n = await s.json();
+          o = await s.json();
         } catch (c) {
           console.log("error", c);
         }
         throw {
-          message: n?.message[0] || `API request failed: ${s.status} ${s.statusText}`,
+          message: o?.message[0] || `API request failed: ${s.status} ${s.statusText}`,
           status: s.status,
           statusText: s.statusText,
-          details: n
+          details: o
         };
       }
       return s.json();
@@ -57,7 +57,7 @@ class H {
   }) {
     let s = {};
     if (a && i) {
-      const n = i.cardExpiry.replace(/\s+/g, "").split("/"), l = n[0], c = n[1];
+      const o = i.cardExpiry.replace(/\s+/g, "").split("/"), l = o[0], c = o[1];
       s = {
         paymentMethodData: {
           type: "card",
@@ -96,12 +96,12 @@ class H {
     });
   }
 }
-const K = async ({
-  id: o,
+const q = async ({
+  id: n,
   apiKey: e,
   environment: t
 }) => {
-  const i = I(t), a = await fetch(`${i}/checkout-profiles/${o}`, {
+  const i = N(t), a = await fetch(`${i}/checkout-profiles/${n}`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
@@ -112,7 +112,7 @@ const K = async ({
     throw new Error(`HTTP error! Status: ${a.status}`);
   return await a.json();
 };
-class j {
+class K {
   events = /* @__PURE__ */ new Map();
   /**
    * Subscribe to an event
@@ -150,13 +150,13 @@ class j {
     return this.events.get(e)?.size || 0;
   }
 }
-const U = new j();
-class q {
+const j = new K();
+class U {
   state;
   initialState;
   eventBus;
   stateChangedEvent = "state-changed";
-  constructor(e, t = U) {
+  constructor(e, t = j) {
     this.initialState = { ...e }, this.state = { ...e }, this.eventBus = t;
   }
   /**
@@ -196,11 +196,11 @@ class q {
     return this.state[e];
   }
 }
-function k(o) {
-  return new q(o);
+function k(n) {
+  return new U(n);
 }
 function _({
-  apiKey: o,
+  apiKey: n,
   profileId: e,
   environment: t
 }) {
@@ -211,8 +211,8 @@ function _({
   }), a = async () => {
     try {
       i.setState({ isLoading: !0 });
-      const r = await K({
-        apiKey: o,
+      const r = await q({
+        apiKey: n,
         id: e,
         environment: t
       });
@@ -234,13 +234,13 @@ function _({
     reload: a
   };
 }
-const N = {
-  cardNumber: (o) => (o.replace(/\s/g, "").match(/.{1,4}/g) || []).join(" "),
-  cardExpiry: (o) => {
-    const t = o.replace(/\D/g, "").slice(0, 4);
+const z = {
+  cardNumber: (n) => (n.replace(/\s/g, "").match(/.{1,4}/g) || []).join(" "),
+  cardExpiry: (n) => {
+    const t = n.replace(/\D/g, "").slice(0, 4);
     return t.length > 2 ? `${t.slice(0, 2)} / ${t.slice(2, 4)}` : t;
   }
-}, $ = {
+}, R = {
   "gmail.com": [
     "gmal.com",
     "gmil.com",
@@ -312,63 +312,63 @@ const N = {
   "comcast.net": ["comcast.com", "comcat.net", "comcst.net", "comcastnet", "comcast.nt", "comcas.net"],
   "verizon.net": ["verizon.com", "verizon.nt", "verizonnet", "verizn.net", "verizon.ne", "verzon.net"],
   "att.net": ["att.com", "at.net", "att.nt", "attnet", "att.ne", "attt.net"]
-}, G = (o) => {
-  if (!o || o.includes("."))
+}, G = (n) => {
+  if (!n || n.includes("."))
     return null;
   const e = ["com", "net", "org", "edu", "gov", "io", "co"];
   for (const t of e) {
-    if (o === "companycok" && t === "co")
+    if (n === "companycok" && t === "co")
       return "company.co";
-    if (o.endsWith(t) && !o.includes(".")) {
-      const i = o.length - t.length;
-      return `${o.substring(0, i)}.${t}`;
+    if (n.endsWith(t) && !n.includes(".")) {
+      const i = n.length - t.length;
+      return `${n.substring(0, i)}.${t}`;
     }
   }
   return null;
-}, Y = (o, e) => {
-  if (o.length === 0) return e.length;
-  if (e.length === 0) return o.length;
-  const t = e.length + 1, i = o.length + 1, a = Array.from(
+}, Y = (n, e) => {
+  if (n.length === 0) return e.length;
+  if (e.length === 0) return n.length;
+  const t = e.length + 1, i = n.length + 1, a = Array.from(
     { length: t },
-    (r, s) => Array.from({ length: i }, (n, l) => s === 0 ? l : l === 0 ? s : 0)
+    (r, s) => Array.from({ length: i }, (o, l) => s === 0 ? l : l === 0 ? s : 0)
   );
   for (let r = 1; r < t; r++)
     for (let s = 1; s < i; s++) {
-      const n = o[s - 1] === e[r - 1] ? 0 : 1;
+      const o = n[s - 1] === e[r - 1] ? 0 : 1;
       a[r][s] = Math.min(
         a[r - 1][s] + 1,
         // deletion
         a[r][s - 1] + 1,
         // insertion
-        a[r - 1][s - 1] + n
+        a[r - 1][s - 1] + o
         // substitution
       );
     }
-  return a[e.length][o.length];
-}, Z = (o) => {
+  return a[e.length][n.length];
+}, Z = (n) => {
   let t = null, i = 3;
-  const a = o.toLowerCase();
-  for (const r of Object.keys($)) {
+  const a = n.toLowerCase();
+  for (const r of Object.keys(R)) {
     const s = Y(a, r);
     s <= 2 && s < i && (i = s, t = r);
   }
   return t;
 }, J = () => {
-  const { t: o } = z();
+  const { t: n } = P();
   return {
     validateEmail: (t) => {
       const i = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
       if (!t)
         return {
           isValid: !1,
-          message: o("validation.emailInvalid"),
+          message: n("validation.emailInvalid"),
           suggestion: null
         };
       const a = t.indexOf("@");
       if (a === -1)
         return {
           isValid: !1,
-          message: o("validation.emailInvalid"),
+          message: n("validation.emailInvalid"),
           suggestion: null
         };
       const r = t.substring(0, a), s = t.substring(a + 1);
@@ -377,16 +377,16 @@ const N = {
         if (l)
           return {
             isValid: !1,
-            message: o("validation.emailSuggestion", {
+            message: n("validation.emailSuggestion", {
               email: `${r}@${l}`
             }),
             suggestion: `${r}@${l}`
           };
-        for (const c of Object.keys($))
+        for (const c of Object.keys(R))
           if (c.replace(/\./g, "") === s)
             return {
               isValid: !1,
-              message: o("validation.emailSuggestion", {
+              message: n("validation.emailSuggestion", {
                 email: `${r}@${c}`
               }),
               suggestion: `${r}@${c}`
@@ -395,15 +395,15 @@ const N = {
       if (!i.test(t))
         return {
           isValid: !1,
-          message: o("validation.emailInvalid"),
+          message: n("validation.emailInvalid"),
           suggestion: null
         };
-      const n = Z(s);
-      if (n && n !== s) {
-        const l = `${r}@${n}`;
+      const o = Z(s);
+      if (o && o !== s) {
+        const l = `${r}@${o}`;
         return {
           isValid: !1,
-          message: o("validation.emailSuggestion", { email: l }),
+          message: n("validation.emailSuggestion", { email: l }),
           suggestion: l
         };
       }
@@ -415,7 +415,7 @@ const N = {
     }
   };
 }, W = () => {
-  const { t: o } = z(), { validateEmail: e } = J();
+  const { t: n } = P(), { validateEmail: e } = J();
   return {
     email: (t) => {
       const i = e(t);
@@ -423,21 +423,21 @@ const N = {
     },
     name: (t) => {
       if (!t.trim())
-        return o("validation.nameRequired");
+        return n("validation.nameRequired");
     },
     cardExpiry: (t) => {
       const i = t.replace(/\s/g, ""), [a, r] = i.split("/").map((u) => u.trim());
       if (!a || !r || a.length !== 2 || r.length !== 2)
-        return o("validation.cardExpiryFormat");
-      const s = /* @__PURE__ */ new Date(), n = s.getFullYear() % 100, l = s.getMonth() + 1, c = parseInt(a, 10), d = parseInt(r, 10);
+        return n("validation.cardExpiryFormat");
+      const s = /* @__PURE__ */ new Date(), o = s.getFullYear() % 100, l = s.getMonth() + 1, c = parseInt(a, 10), d = parseInt(r, 10);
       if (c < 1 || c > 12)
-        return o("validation.cardExpiryFormat");
-      if (d < n || d === n && c < l)
-        return o("validation.cardExpiryInvalid");
+        return n("validation.cardExpiryFormat");
+      if (d < o || d === o && c < l)
+        return n("validation.cardExpiryInvalid");
     }
   };
 }, X = () => {
-  const o = W(), e = k({
+  const n = W(), e = k({
     formData: {
       name: "",
       email: "",
@@ -451,7 +451,7 @@ const N = {
     },
     isValid: !1
   }), t = (l, c) => {
-    const d = o[l];
+    const d = n[l];
     return d?.(c);
   }, i = (l) => {
     const c = {};
@@ -465,30 +465,30 @@ const N = {
   }, r = (l, c) => {
     const d = e.getState();
     let u = c;
-    l in N && (u = N[l](c));
-    const p = {
+    l in z && (u = z[l](c));
+    const f = {
       ...d.formData,
       [l]: u
     }, g = { ...d.errors };
     if (d.touched[l]) {
-      const m = t(l, u);
-      m ? g[l] = m : delete g[l];
+      const x = t(l, u);
+      x ? g[l] = x : delete g[l];
     }
     e.setState({
-      formData: p,
+      formData: f,
       errors: g,
-      isValid: a(p)
+      isValid: a(f)
     });
   }, s = (l, c) => {
     const d = e.getState(), u = {
       ...d.touched,
       [l]: !0
-    }, p = t(l, c), g = { ...d.errors };
-    p ? g[l] = p : delete g[l], e.setState({
+    }, f = t(l, c), g = { ...d.errors };
+    f ? g[l] = f : delete g[l], e.setState({
       touched: u,
       errors: g
     });
-  }, n = (l) => {
+  }, o = (l) => {
     const d = {
       ...e.getState().formData,
       ...l
@@ -503,28 +503,28 @@ const N = {
     subscribe: e.subscribe.bind(e),
     handleChange: r,
     handleBlur: s,
-    setFormData: n,
+    setFormData: o,
     reset: e.resetState.bind(e)
   };
 }, Q = async ({
-  props: o,
+  props: n,
   apiKey: e,
   environment: t
 }) => {
-  const i = I(t), a = await fetch(`${i}/checkout/init`, {
+  const i = N(t), a = await fetch(`${i}/checkout/init`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
       Authorization: `Bearer ${e}`
     },
-    body: JSON.stringify(o)
+    body: JSON.stringify(n)
   });
   if (!a.ok)
     throw new Error(`HTTP error! Status: ${a.status}`);
   return await a.json();
 };
 function ee({
-  apiKey: o,
+  apiKey: n,
   checkoutProfile: e,
   inputStyles: t,
   setFormData: i,
@@ -540,18 +540,17 @@ function ee({
     isCvvFocused: !1,
     possibleCardType: "unknown"
   });
-  let n = null;
+  let o = null;
   const l = async () => {
     try {
-      console.log("[IframeConfig] Generating iframe configuration...");
       const m = await Q({
         props: {
           payment: r
         },
-        apiKey: o,
+        apiKey: n,
         environment: a
       });
-      m && (console.log("[IframeConfig] Iframe config generated successfully."), s.setState({
+      m && (s.setState({
         iframeConfig: {
           ...m,
           origin: globalThis.location.origin
@@ -562,16 +561,16 @@ function ee({
     }
   }, c = () => {
     const m = s.getState();
-    if (console.log("[IframeConfig] createTokenExIframe started."), !m.iframeConfig || !e) {
+    if (!m.iframeConfig || !e) {
       console.error(
         "[IframeConfig] Missing iframe config or checkout profile."
       );
       return;
     }
-    const b = document.getElementById("card-element"), S = document.getElementById("card-cvv-element");
-    if (!b || !S)
+    const C = document.getElementById("card-element"), w = document.getElementById("card-cvv-element");
+    if (!C || !w)
       throw new Error("Card elements not found in DOM");
-    console.log("[IframeConfig] Creating TokenEx.Iframe instance."), n = new globalThis.TokenEx.Iframe("card-element", {
+    o = new globalThis.TokenEx.Iframe("card-element", {
       ...m.iframeConfig,
       placeholder: "1234 1234 1234 1234",
       cvvPlaceholder: "CVC",
@@ -595,39 +594,36 @@ function ee({
           base: `${t.base}; border-radius: 0px 0px ${e.styles.borderRadius}px 0px`
         }
       }
-    }), n.on("load", () => {
-      console.log("[IframeConfig] Iframe loaded event received."), s.setState({ loadingIframe: !1 });
-    }), n.on("autoCompleteValues", function(x) {
-      const { nameOnCard: C, cardExp: v } = x;
+    }), o.on("load", () => {
+      s.setState({ loadingIframe: !1 });
+    }), o.on("autoCompleteValues", function(y) {
+      const { nameOnCard: M, cardExp: b } = y;
       i({
-        name: C,
-        cardExpiry: v
+        name: M,
+        cardExpiry: b
       });
-    }), n.on("validate", function(x) {
-      const { isValid: C, isCvvValid: v } = x;
-      console.log(
-        `[IframeConfig] Validation event: isCardValid=${C}, isCvvValid=${v}`
-      ), s.setState({
-        isCcValid: C,
-        isCvvValid: v
+    }), o.on("validate", function(y) {
+      const { isValid: M, isCvvValid: b } = y;
+      s.setState({
+        isCcValid: M,
+        isCvvValid: b
       });
-    }), n.on("focus", function() {
+    }), o.on("focus", function() {
       s.setState({ isFocused: !0 });
-    }), n.on("blur", function() {
+    }), o.on("blur", function() {
       s.setState({ isFocused: !1 });
-    }), n.on("cvvFocus", function() {
+    }), o.on("cvvFocus", function() {
       s.setState({ isCvvFocused: !0 });
-    }), n.on("cvvBlur", function() {
+    }), o.on("cvvBlur", function() {
       s.setState({ isCvvFocused: !1 });
-    }), n.on(
+    }), o.on(
       "cardTypeChange",
-      function({ possibleCardType: x }) {
-        s.setState({ possibleCardType: x });
+      function({ possibleCardType: y }) {
+        s.setState({ possibleCardType: y });
       }
-    ), n.load();
+    ), o.load();
   }, d = () => {
-    const m = s.getState();
-    if (console.log("[IframeConfig] initializeIframe started."), !m.iframeConfig || !e) {
+    if (!s.getState().iframeConfig || !e) {
       console.error(
         "[IframeConfig] Missing iframe config or checkout profile for initialization."
       );
@@ -638,25 +634,41 @@ function ee({
       return;
     }
     try {
-      console.log("[IframeConfig] Creating TokenEx iframe..."), c(), console.log("[IframeConfig] TokenEx iframe created successfully");
-    } catch (b) {
-      console.error("Failed to create TokenEx iframe:", b);
+      c();
+    } catch (C) {
+      console.error("Failed to create TokenEx iframe:", C);
     }
   }, u = async () => {
-    o && (console.log("[IframeConfig] Manual initialization triggered."), await l());
-  }, p = () => {
-    n && (n.remove(), n = null);
+    n && await l();
+  }, f = () => {
+    o && (o.remove(), o = null);
   }, g = async (m) => {
-    n && (n.on("tokenize", async function(b) {
-      await m(b);
-    }), n.tokenize());
+    o && (o.on("tokenize", async function(C) {
+      await m(C);
+    }), o.tokenize());
+  }, x = () => {
+    if (o)
+      try {
+        o.focus();
+      } catch (m) {
+        console.error("Failed to focus card number iframe:", m);
+      }
+  }, I = () => {
+    if (o)
+      try {
+        o.cvvFocus();
+      } catch (m) {
+        console.error("Failed to focus CVV iframe:", m);
+      }
   };
   return {
     getState: s.getState.bind(s),
     subscribe: s.subscribe.bind(s),
     tokenize: g,
-    cleanup: p,
-    initialize: u
+    cleanup: f,
+    initialize: u,
+    focusCardNumber: x,
+    focusCvv: I
   };
 }
 const te = "E-Mail", ie = "Name des/der Karteninhaber/in", ae = "Kartendaten", re = "Vollständiger Name", se = "MM / JJ", oe = "Das Fenster nicht schließen", ne = { pay: "ZAHLEN", submit: "ABSENDEN", getPlan: "MEINEN PLAN ERHALTEN", donate: "spenden", book: "jetzt buchen", order: "jetzt bestellen" }, le = { emailSuggestion: "Meinten Sie {{email}}?", emailInvalid: "Ihre E-Mail-Adresse ist nicht korrekt", cardExpiryInvalid: "Das Ablaufdatum Ihrer Karte liegt in der Vergangenheit", cardExpiryFormat: "Das Ablaufdatum Ihrer Karte ist unvollständig", cardSecurityFormat: "Der Sicherheitscode Ihrer Karte ist unvollständig", nameRequired: "Gib deinen Namen genau so ein, wie er auf deiner Karte steht", cardNumberInvalid: "Die Kartennummer ist unvollständig" }, ce = {
@@ -668,42 +680,42 @@ const te = "E-Mail", ie = "Name des/der Karteninhaber/in", ae = "Kartendaten", r
   loading: oe,
   buttonTexts: ne,
   validation: le
-}, de = "Email", he = "Cardholder name", me = "Card information", ue = "Full name on card", pe = "MM / YY", ge = "Do not close the window", fe = { pay: "PAY", submit: "SUBMIT", getPlan: "GET MY PLAN", donate: "DONATE", book: "BOOK NOW", order: "ORDER NOW" }, ye = { emailSuggestion: "Did you mean {{email}}?", emailInvalid: "Your email is not correct", cardExpiryInvalid: "Your card's expiration date is in the past", cardExpiryFormat: "Your card’s expiration date is incomplete", cardSecurityFormat: "Your card’s security code is incomplete", nameRequired: "Please enter the name as it appears on your card", cardNumberInvalid: "Your card number is invalid" }, ve = {
+}, de = "Email", he = "Cardholder name", me = "Card information", ue = "Full name on card", pe = "MM / YY", fe = "Do not close the window", ge = { pay: "PAY", submit: "SUBMIT", getPlan: "GET MY PLAN", donate: "DONATE", book: "BOOK NOW", order: "ORDER NOW" }, ye = { emailSuggestion: "Did you mean {{email}}?", emailInvalid: "Your email is not correct", cardExpiryInvalid: "Your card's expiration date is in the past", cardExpiryFormat: "Your card’s expiration date is incomplete", cardSecurityFormat: "Your card’s security code is incomplete", nameRequired: "Please enter the name as it appears on your card", cardNumberInvalid: "Your card number is invalid" }, ve = {
   email: de,
   cardholderNameLabel: he,
   cardInformation: me,
   cardholderNamePlaceholder: ue,
   cardExpiry: pe,
-  loading: ge,
-  buttonTexts: fe,
+  loading: fe,
+  buttonTexts: ge,
   validation: ye
-}, Ee = "Correo electrónico", Ce = "Nombre del titular de la tarjeta", be = "Información de la tarjeta", xe = "Nombre completo en la tarjeta", Se = "MM / AA", Fe = "Por favor, no cierre esta ventana", we = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTENER MI PLAN", donate: "DONAR", book: "RESERVAR AHORA", order: "ORDENAR AHORA" }, Le = { emailSuggestion: "¿Quisiste decir {{email}}?", emailInvalid: "Su correo electrónico no es válido", cardExpiryInvalid: "La fecha de vencimiento de la tarjeta ya pasó", cardExpiryFormat: "La fecha de vencimiento de su tarjeta está incompleta", cardSecurityFormat: "El código de seguridad de su tarjeta está incompleto", nameRequired: "Por favor, ingrese el nombre tal como aparece en su tarjeta", cardNumberInvalid: "Su número de tarjeta no es válido" }, Me = {
+}, Ee = "Correo electrónico", Ce = "Nombre del titular de la tarjeta", be = "Información de la tarjeta", Se = "Nombre completo en la tarjeta", xe = "MM / AA", Fe = "Por favor, no cierre esta ventana", we = { pay: "PAGAR", submit: "ENVIAR", getPlan: "OBTENER MI PLAN", donate: "DONAR", book: "RESERVAR AHORA", order: "ORDENAR AHORA" }, Me = { emailSuggestion: "¿Quisiste decir {{email}}?", emailInvalid: "Su correo electrónico no es válido", cardExpiryInvalid: "La fecha de vencimiento de la tarjeta ya pasó", cardExpiryFormat: "La fecha de vencimiento de su tarjeta está incompleta", cardSecurityFormat: "El código de seguridad de su tarjeta está incompleto", nameRequired: "Por favor, ingrese el nombre tal como aparece en su tarjeta", cardNumberInvalid: "Su número de tarjeta no es válido" }, Le = {
   email: Ee,
   cardholderNameLabel: Ce,
   cardInformation: be,
-  cardholderNamePlaceholder: xe,
-  cardExpiry: Se,
+  cardholderNamePlaceholder: Se,
+  cardExpiry: xe,
   loading: Fe,
   buttonTexts: we,
-  validation: Le
-}, ke = "E-mail", Te = "Nom du titulaire de la carte", Ie = "Informations de la carte", ze = "Nom complet figurant sur la carte", Pe = "MM / AA", Ne = "Veuillez ne pas fermer cette fenêtre", Ae = { pay: "PAYER", submit: "ENVOYER", getPlan: "OBTENIR MON PLAN", donate: "FAIRE UN DON", book: "RÉSERVER MAINTENANT", order: "COMMANDER MAINTENANT" }, De = { emailSuggestion: "Vouliez-vous dire {{email}}?", emailInvalid: "Votre adresse e-mail n’est pas valide", cardExpiryInvalid: "La date d'expiration de votre carte est dans le passé", cardExpiryFormat: "La date d’expiration de votre carte est incomplète", cardSecurityFormat: "Le code de sécurité de votre carte est incomplet", nameRequired: "Veuillez saisir le nom tel qu’il figure sur votre carte", cardNumberInvalid: "Votre numéro de carte est invalide" }, Ve = {
-  email: ke,
-  cardholderNameLabel: Te,
+  validation: Me
+}, Te = "E-mail", ke = "Nom du titulaire de la carte", Ie = "Informations de la carte", Ne = "Nom complet figurant sur la carte", Pe = "MM / AA", Ve = "Veuillez ne pas fermer cette fenêtre", ze = { pay: "PAYER", submit: "ENVOYER", getPlan: "OBTENIR MON PLAN", donate: "FAIRE UN DON", book: "RÉSERVER MAINTENANT", order: "COMMANDER MAINTENANT" }, Ae = { emailSuggestion: "Vouliez-vous dire {{email}}?", emailInvalid: "Votre adresse e-mail n’est pas valide", cardExpiryInvalid: "La date d'expiration de votre carte est dans le passé", cardExpiryFormat: "La date d’expiration de votre carte est incomplète", cardSecurityFormat: "Le code de sécurité de votre carte est incomplet", nameRequired: "Veuillez saisir le nom tel qu’il figure sur votre carte", cardNumberInvalid: "Votre numéro de carte est invalide" }, De = {
+  email: Te,
+  cardholderNameLabel: ke,
   cardInformation: Ie,
-  cardholderNamePlaceholder: ze,
+  cardholderNamePlaceholder: Ne,
   cardExpiry: Pe,
-  loading: Ne,
-  buttonTexts: Ae,
-  validation: De
-}, $e = "Email", Re = "Nome del titolare della carta", Be = "Informazioni sulla carta", Oe = "Nome completo sulla carta", He = "MM / AA", Ke = "Non chiudere la finestra", je = { pay: "PAGA", submit: "INVIA", getPlan: "OTTIENI IL MIO PIANO", donate: "DONARE", book: "PRENOTA ORA", order: "ORDINA ORA" }, Ue = { emailSuggestion: "Intendevi {{email}}?", emailInvalid: "La tua email non è corretta", cardExpiryInvalid: "La data di scadenza della tua carta è nel passato", cardExpiryFormat: "La data di scadenza della tua carta è incompleta", cardSecurityFormat: "Il codice di sicurezza della tua carta è incompleto", nameRequired: "Inserisci il nome come appare sulla tua carta", cardNumberInvalid: "Il numero della tua carta non è valido" }, qe = {
+  loading: Ve,
+  buttonTexts: ze,
+  validation: Ae
+}, $e = "Email", Re = "Nome del titolare della carta", Be = "Informazioni sulla carta", He = "Nome completo sulla carta", Oe = "MM / AA", qe = "Non chiudere la finestra", Ke = { pay: "PAGA", submit: "INVIA", getPlan: "OTTIENI IL MIO PIANO", donate: "DONARE", book: "PRENOTA ORA", order: "ORDINA ORA" }, je = { emailSuggestion: "Intendevi {{email}}?", emailInvalid: "La tua email non è corretta", cardExpiryInvalid: "La data di scadenza della tua carta è nel passato", cardExpiryFormat: "La data di scadenza della tua carta è incompleta", cardSecurityFormat: "Il codice di sicurezza della tua carta è incompleto", nameRequired: "Inserisci il nome come appare sulla tua carta", cardNumberInvalid: "Il numero della tua carta non è valido" }, Ue = {
   email: $e,
   cardholderNameLabel: Re,
   cardInformation: Be,
-  cardholderNamePlaceholder: Oe,
-  cardExpiry: He,
-  loading: Ke,
-  buttonTexts: je,
-  validation: Ue
+  cardholderNamePlaceholder: He,
+  cardExpiry: Oe,
+  loading: qe,
+  buttonTexts: Ke,
+  validation: je
 }, _e = "Adres e-mail", Ge = "Imię i nazwisko posiadacza karty", Ye = "Informacje o karcie", Ze = "Imię i nazwisko na karcie", Je = "MM / RR", We = "Proszę nie zamykać tego okna", Xe = { pay: "ZAPŁAĆ", submit: "WYŚLIJ", getPlan: "POBIERZ MÓJ PLAN", donate: "PRZEKAŻ DAROWIZNĘ", book: "ZAREZERWUJ TERAZ", order: "ZAMÓW TERAZ" }, Qe = { emailSuggestion: "Czy chodziło Ci o {{email}}?", emailInvalid: "Państwa adres e-mail jest nieprawidłowy", cardExpiryInvalid: "Data ważności Państwa karty jest w przeszłości", cardExpiryFormat: "Data ważności Państwa karty jest niekompletna", cardSecurityFormat: "Kod zabezpieczający Państwa karty jest niekompletny", nameRequired: "Proszę wpisać imię i nazwisko tak, jak widnieje na karcie", cardNumberInvalid: "Numer Państwa karty jest nieprawidłowy" }, et = {
   email: _e,
   cardholderNameLabel: Ge,
@@ -722,24 +734,24 @@ const te = "E-Mail", ie = "Name des/der Karteninhaber/in", ae = "Kartendaten", r
   loading: ot,
   buttonTexts: nt,
   validation: lt
-}, dt = "E-posta", ht = "Kart sahibinin adı", mt = "Kart bilgileri", ut = "Kart üzerindeki tam ad", pt = "AA / YY", gt = "Lütfen pencereyi kapatmayın", ft = { pay: "ÖDE", submit: "GÖNDER", getPlan: "PLANIMI AL", donate: "BAĞIŞ YAP", book: "ŞİMDİ REZERVASYON YAP", order: "ŞİMDİ SİPARİŞ VER" }, yt = { emailSuggestion: "{{email}} demek mi istediniz?", emailInvalid: "E-posta adresiniz geçerli değil", cardExpiryInvalid: "Kartınızın son kullanma tarihi geçmiş", cardExpiryFormat: "Kartınızın son kullanma tarihi eksik", cardSecurityFormat: "Kartınızın güvenlik kodu eksik", nameRequired: "Lütfen kart üzerindeki ismi girin", cardNumberInvalid: "Kart numaranız geçersiz" }, vt = {
+}, dt = "E-posta", ht = "Kart sahibinin adı", mt = "Kart bilgileri", ut = "Kart üzerindeki tam ad", pt = "AA / YY", ft = "Lütfen pencereyi kapatmayın", gt = { pay: "ÖDE", submit: "GÖNDER", getPlan: "PLANIMI AL", donate: "BAĞIŞ YAP", book: "ŞİMDİ REZERVASYON YAP", order: "ŞİMDİ SİPARİŞ VER" }, yt = { emailSuggestion: "{{email}} demek mi istediniz?", emailInvalid: "E-posta adresiniz geçerli değil", cardExpiryInvalid: "Kartınızın son kullanma tarihi geçmiş", cardExpiryFormat: "Kartınızın son kullanma tarihi eksik", cardSecurityFormat: "Kartınızın güvenlik kodu eksik", nameRequired: "Lütfen kart üzerindeki ismi girin", cardNumberInvalid: "Kart numaranız geçersiz" }, vt = {
   email: dt,
   cardholderNameLabel: ht,
   cardInformation: mt,
   cardholderNamePlaceholder: ut,
   cardExpiry: pt,
-  loading: gt,
-  buttonTexts: ft,
+  loading: ft,
+  buttonTexts: gt,
   validation: yt
 }, A = {
   en: ve,
   de: ce,
-  es: Me,
-  fr: Ve,
+  es: Le,
+  fr: De,
   pl: et,
   pt: ct,
   tr: vt,
-  it: qe
+  it: Ue
   // Add other locales here
 };
 class Et {
@@ -790,10 +802,10 @@ const D = [
   "it",
   "tr"
 ], Ct = "en";
-function bt(o) {
+function bt(n) {
   const e = new Et(), i = (() => {
-    const n = navigator?.language?.split("-")[0]?.toLowerCase();
-    return D.includes(n) ? n : Ct;
+    const o = navigator?.language?.split("-")[0]?.toLowerCase();
+    return D.includes(o) ? o : Ct;
   })();
   e.setLocale(i);
   const a = k({
@@ -802,58 +814,58 @@ function bt(o) {
   });
   return {
     store: a,
-    translate: (n, l) => a.getState().translationService.translate(n, l),
-    setLocale: (n) => {
-      D.includes(n) && (a.getState().translationService.setLocale(n), a.setState({ locale: n }));
+    translate: (o, l) => a.getState().translationService.translate(o, l),
+    setLocale: (o) => {
+      D.includes(o) && (a.getState().translationService.setLocale(o), a.setState({ locale: o }));
     },
     getLocale: () => a.getValue("locale"),
     subscribe: a.subscribe.bind(a)
   };
 }
-const xt = bt(), z = () => {
-  const { translate: o, getLocale: e, setLocale: t, subscribe: i } = xt;
+const St = bt(), P = () => {
+  const { translate: n, getLocale: e, setLocale: t, subscribe: i } = St;
   return {
-    t: o,
-    translate: o,
+    t: n,
+    translate: n,
     locale: e(),
     setLocale: t,
     subscribe: i
   };
-}, St = ({ fontFamily: o }) => {
-  if (!o)
+}, xt = ({ fontFamily: n }) => {
+  if (!n)
     return { cleanup: () => {
     } };
-  const e = o.replace(/\s+/g, "+"), t = `https://fonts.googleapis.com/css2?family=${e}:wght@400;700&display=swap`, i = [...document.head.querySelectorAll("link")].filter(
-    (n) => n.href.includes("fonts.googleapis.com/css2") && n.rel === "stylesheet"
+  const e = n.replace(/\s+/g, "+"), t = `https://fonts.googleapis.com/css2?family=${e}:wght@400;700&display=swap`, i = [...document.head.querySelectorAll("link")].filter(
+    (o) => o.href.includes("fonts.googleapis.com/css2") && o.rel === "stylesheet"
   ), a = document.createElement("link");
   a.rel = "stylesheet", a.href = t;
   const r = i.find(
-    (n) => n.href.includes(`family=${e}`)
+    (o) => o.href.includes(`family=${e}`)
   );
   if (r)
     r.href = t;
   else if (i.length > 0) {
-    const n = i.at(
+    const o = i.at(
       -1
     );
-    n?.nextSibling ? document.head.insertBefore(a, n.nextSibling) : document.head.appendChild(a);
+    o?.nextSibling ? document.head.insertBefore(a, o.nextSibling) : document.head.appendChild(a);
   } else
     document.head.appendChild(a);
   return { cleanup: () => {
     document.head.contains(a) && document.head.removeChild(a);
   } };
 }, Ft = ({
-  scriptSrc: o,
+  scriptSrc: n,
   async: e = !0
 }) => {
-  if (!o)
+  if (!n)
     return {
       cleanup: () => {
       },
       isLoaded: Promise.resolve(!1)
     };
   if ([...document.head.querySelectorAll("script")].filter(
-    (s) => s.src === o
+    (s) => s.src === n
   ).length > 0)
     return {
       cleanup: () => {
@@ -861,10 +873,10 @@ const xt = bt(), z = () => {
       isLoaded: Promise.resolve(!0)
     };
   const i = document.createElement("script");
-  i.src = o, i.async = e;
-  const a = new Promise((s, n) => {
+  i.src = n, i.async = e;
+  const a = new Promise((s, o) => {
     i.onload = () => s(!0), i.onerror = () => {
-      console.error(`Failed to load script: ${o}`), n(new Error(`Failed to load script: ${o}`));
+      console.error(`Failed to load script: ${n}`), o(new Error(`Failed to load script: ${n}`));
     };
   });
   return document.head.appendChild(i), {
@@ -873,12 +885,117 @@ const xt = bt(), z = () => {
     },
     isLoaded: a
   };
-}, M = (o) => Object.entries(o).map(([e, t]) => {
+};
+class wt {
+  // The sequence of fields to focus in order
+  focusSequence = [
+    "cardNumber",
+    "cardExpiry",
+    "cardCvv",
+    "name"
+  ];
+  // Track the current focus index
+  currentFocusIndex = 0;
+  // Map of field names to their focus functions
+  fields = {
+    email: null,
+    cardNumber: null,
+    cardExpiry: null,
+    cardCvv: null,
+    name: null
+  };
+  // Track the validation state of each field
+  fieldValidState = {
+    email: !1,
+    cardNumber: !1,
+    cardExpiry: !1,
+    cardCvv: !1,
+    name: !1
+  };
+  // Track if field was previously valid (to detect transitions)
+  previousFieldValidState = {
+    email: !1,
+    cardNumber: !1,
+    cardExpiry: !1,
+    cardCvv: !1,
+    name: !1
+  };
+  /**
+   * Register a field with the focus manager
+   */
+  registerField(e, t) {
+    this.fields[e] = t;
+  }
+  /**
+   * Handle field focus events
+   */
+  handleFieldFocus(e) {
+    const t = this.focusSequence.findIndex(
+      (i) => i === e
+    );
+    t >= 0 && (this.currentFocusIndex = t);
+  }
+  /**
+   * Update the validation state of fields based on form and iframe state
+   */
+  handleStateUpdate(e, t, i, a) {
+    Object.assign(this.previousFieldValidState, this.fieldValidState);
+    const r = !!e.email && !t.email && !!i.email;
+    this.fieldValidState.email = r;
+    const s = !!a.isCcValid;
+    this.fieldValidState.cardNumber = s;
+    const o = !!e.cardExpiry && !t.cardExpiry && !!i.cardExpiry;
+    this.fieldValidState.cardExpiry = o;
+    const l = !!a.isCvvValid;
+    this.fieldValidState.cardCvv = l;
+    const c = !!e.name && !t.name && !!i.name;
+    this.fieldValidState.name = c, this.checkForValidTransitions();
+  }
+  /**
+   * Check if any fields have transitioned from invalid to valid and progress focus if needed
+   */
+  checkForValidTransitions() {
+    const e = this.focusSequence[this.currentFocusIndex];
+    e && this.fieldValidState[e] && !this.previousFieldValidState[e] && this.focusNextField();
+  }
+  /**
+   * Focus the next field in sequence
+   */
+  focusNextField() {
+    this.currentFocusIndex = Math.min(
+      this.currentFocusIndex + 1,
+      this.focusSequence.length - 1
+    ), this.applyFocusToCurrentField();
+  }
+  /**
+   * Focus a specific field by its index in the sequence
+   */
+  focusFieldByIndex(e) {
+    e >= 0 && e < this.focusSequence.length && (this.currentFocusIndex = e, this.applyFocusToCurrentField());
+  }
+  /**
+   * Apply focus to the current field based on focus index
+   */
+  applyFocusToCurrentField() {
+    const e = this.focusSequence[this.currentFocusIndex], t = this.fields[e];
+    t && setTimeout(() => {
+      t.focus();
+    }, 0);
+  }
+  /**
+   * Focus the card number field (first field)
+   * Used for setting initial focus on page load
+   */
+  focusCardNumberField() {
+    this.currentFocusIndex = 0, this.applyFocusToCurrentField();
+  }
+}
+const T = (n) => Object.entries(n).map(([e, t]) => {
   const i = e.replace(/([A-Z])/g, "-$1").toLowerCase(), a = typeof t == "number" ? `${t}px` : t;
   return `${i}: ${a}`;
 }).join("; ");
-function wt(o) {
-  if (!o)
+function Mt(n) {
+  if (!n)
     return {
       formContainerStyle: {},
       baseStyles: {},
@@ -898,28 +1015,28 @@ function wt(o) {
     display: "block",
     border: "none",
     outline: "none",
-    fontSize: `${o.styles.fontSize}px`,
+    fontSize: `${n.styles.fontSize}px`,
     lineHeight: 30,
     boxSizing: "border-box",
     padding: "0px 12px",
     height: 36,
     width: "100%",
-    fontFamily: `${o.styles.fontFamily}, sans-serif`
+    fontFamily: `${n.styles.fontFamily}, sans-serif`
   }, t = {
     color: "#717173",
     opacity: "0.3",
-    fontFamily: `${o.styles.fontFamily}, sans-serif`
+    fontFamily: `${n.styles.fontFamily}, sans-serif`
   }, i = {
     color: "#dc2727"
   }, a = {
     outline: "none"
   }, r = {
-    fontFamily: `${o.styles.fontFamily}, sans-serif`
+    fontFamily: `${n.styles.fontFamily}, sans-serif`
   }, s = {
-    base: M(e),
-    error: M(i),
-    focus: M(a),
-    placeholder: M(t)
+    base: T(e),
+    error: T(i),
+    focus: T(a),
+    placeholder: T(t)
   };
   return {
     formContainerStyle: r,
@@ -1139,7 +1256,7 @@ class Lt extends h {
     return this.messageComponent.setText(e), this;
   }
 }
-class V extends h {
+class $ extends h {
   titleElement;
   constructor(e = {}) {
     super("div", ["blur-bg"]);
@@ -1168,7 +1285,7 @@ class E extends h {
     return this.span && this.span.classList.add("form-helper-text-hidden"), this;
   }
 }
-class Mt extends h {
+class Tt extends h {
   constructor(e) {
     super("label", ["input-label"], {
       for: e.id
@@ -1177,12 +1294,12 @@ class Mt extends h {
     t.style.fontFamily = "inherit", t.style.color = e.styles.color, t.style.fontSize = `${e.styles.fontSize}px`;
   }
 }
-class P extends h {
+class V extends h {
   inputElement;
   helperText = null;
   constructor(e) {
     if (super("div", ["input-wrapper"]), e.label && e.styles) {
-      const i = new Mt({
+      const i = new Tt({
         styles: {
           color: e.styles.color,
           fontSize: e.styles.fontSize
@@ -1223,6 +1340,12 @@ class P extends h {
   addEventListener(e, t, i) {
     return this.inputElement.getElement().addEventListener(e, t, i), this;
   }
+  /**
+   * Focus the input element
+   */
+  focus() {
+    this.inputElement.getElement().focus();
+  }
 }
 class kt {
   input;
@@ -1233,29 +1356,30 @@ class kt {
       onBlur: a,
       error: r,
       errorMsg: s,
-      checkoutProfile: n,
+      checkoutProfile: o,
       translationFunc: l,
       autocomplete: c = "cc-name"
     } = e;
-    this.input = new P({
+    this.input = new V({
       name: "name",
       label: l("cardholderNameLabel"),
-      error: r,
+      // Always hide error initially - we'll show it only on blur if needed
+      error: !1,
       errorMsg: s,
       styles: {
-        color: n.styles.textColor,
-        borderRadius: `${n.styles.borderRadius}px`,
-        fontSize: n.styles.fontSize,
-        fontFamily: n.styles.fontFamily
+        color: o.styles.textColor,
+        borderRadius: `${o.styles.borderRadius}px`,
+        fontSize: o.styles.fontSize,
+        fontFamily: o.styles.fontFamily
       },
       placeholder: l("cardholderNamePlaceholder"),
       value: t,
       autocomplete: c,
       onChange: (d) => {
-        this.trim(), i(d);
+        this.input.setError(!1), this.trim(), i(d);
       }
     }), this.input.addEventListener("blur", (d) => {
-      a(d);
+      r && this.input.setError(r, s), a(d);
     });
   }
   getValue() {
@@ -1269,7 +1393,7 @@ class kt {
     return this.setValue(e), this;
   }
   setError(e, t) {
-    return this.input.setError(e, t), this;
+    return document.activeElement !== this.input.getElement().querySelector("input") ? this.input.setError(e, t) : this.input.setError(!1), this;
   }
   getElement() {
     return this.input.getElement();
@@ -1277,8 +1401,11 @@ class kt {
   appendTo(e) {
     return this.input.appendTo(e), this;
   }
+  focus() {
+    this.input.focus();
+  }
 }
-class Tt extends h {
+class It extends h {
   constructor(e) {
     super("div", []);
     const t = document.createElement("div");
@@ -1295,22 +1422,22 @@ class Tt extends h {
     return t && (e ? t.classList.add("loading") : t.classList.remove("loading")), this;
   }
 }
-const It = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%23306FC5;'%20d='M512,402.281c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.997,0,402.281V109.717%20c0-16.715,13.55-30.266,30.265-30.266h451.47c16.716,0,30.265,13.551,30.265,30.266V402.281L512,402.281z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.281V109.717%20c0-16.715,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.001,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.997,21.517,402.281z'/%3e%3cg%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='74.59,220.748%2089.888,220.748%2082.241,201.278%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='155.946,286.107%20155.946,295.148%20181.675,295.148%20181.675,304.885%20155.946,304.885%20155.946,315.318%20184.455,315.318%20197.666,300.712%20185.151,286.107%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='356.898,201.278%20348.553,220.748%20364.548,220.748%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='230.348,320.875%20230.348,281.241%20212.268,300.712%20'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M264.42,292.368c-0.696-4.172-3.48-6.261-7.654-6.261h-14.599v12.516h15.299%20C261.637,298.624,264.42,296.539,264.42,292.368z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M313.09,297.236c1.391-0.697,2.089-2.785,2.089-4.867c0.696-2.779-0.698-4.172-2.089-4.868%20c-1.387-0.696-3.476-0.696-5.559-0.696h-13.91v11.127h13.909C309.613,297.932,311.702,297.932,313.09,297.236z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M413.217,183.198v8.344l-4.169-8.344H376.37v8.344l-4.174-8.344h-44.502%20c-7.648,0-13.909,1.392-19.469,4.173v-4.173h-31.289v0.696v3.477c-3.476-2.78-7.648-4.173-13.211-4.173h-111.95l-7.652,17.384%20l-7.647-17.384h-25.031h-10.431v8.344l-3.477-8.344h-0.696H66.942l-13.909,32.68L37.042,251.34l-0.294,0.697h0.294h35.463h0.444%20l0.252-0.697l4.174-10.428h9.039l4.172,11.125h40.326v-0.697v-7.647l3.479,8.343h20.163l3.475-8.343v7.647v0.697h15.993h79.965%20h0.696v-18.08h1.394c1.389,0,1.389,0,1.389,2.087v15.297h50.065v-4.172c4.172,2.089,10.426,4.172,18.771,4.172h20.863l4.172-11.123%20h9.732l4.172,11.123h40.328v-6.952v-3.476l6.261,10.428h1.387h0.698h30.595v-68.143h-31.291l0,0H413.217z%20M177.501,241.609h-6.955%20h-4.171v-4.169v-34.076l-0.696,1.595v-0.019l-16.176,36.669h-0.512h-3.719h-6.017l-16.687-38.245v38.245h-23.64l-4.867-10.43%20H70.417l-4.868,10.43H53.326l20.57-48.675h17.382l19.469,46.587v-46.587h4.171h14.251l0.328,0.697h0.024l8.773,19.094l6.3,14.306%20l0.223-0.721l13.906-33.375H177.5v48.674H177.501L177.501,241.609z%20M225.481,203.364h-27.119v9.039h26.423v9.734h-26.423v9.738%20h27.119v10.427h-38.939v-49.367h38.939V203.364L225.481,203.364z%20M275.076,221.294c0.018,0.016,0.041,0.027,0.063,0.042%20c0.263,0.278,0.488,0.557,0.68,0.824c1.332,1.746,2.409,4.343,2.463,8.151c0.004,0.066,0.007,0.131,0.011,0.197%20c0,0.038,0.007,0.071,0.007,0.11c0,0.022-0.002,0.039-0.002,0.06c0.016,0.383,0.026,0.774,0.026,1.197v9.735h-10.428v-5.565%20c0-2.781,0-6.954-2.089-9.735c-0.657-0.657-1.322-1.09-2.046-1.398c-1.042-0.675-3.017-0.686-6.295-0.686h-12.52v17.384h-11.818%20v-48.675h26.425c6.254,0,10.428,0,13.906,2.086c3.407,2.046,5.465,5.439,5.543,10.812c-0.161,7.4-4.911,11.46-8.326,12.829%20C270.676,218.662,272.996,219.129,275.076,221.294z%20M298.491,241.609h-11.822v-48.675h11.822V241.609z%20M434.083,241.609h-15.3%20l-22.25-36.855v30.595l-0.073-0.072v6.362h-11.747v-0.029h-11.822l-4.172-10.43H344.38l-4.172,11.123h-13.211%20c-5.559,0-12.517-1.389-16.687-5.561c-4.172-4.172-6.256-9.735-6.256-18.773c0-6.953,1.389-13.911,6.256-19.472%20c3.474-4.175,9.735-5.562,17.382-5.562h11.128v10.429h-11.128c-4.172,0-6.254,0.693-9.041,2.783%20c-2.082,2.085-3.474,6.256-3.474,11.123c0,5.564,0.696,9.04,3.474,11.821c2.091,2.089,4.87,2.785,8.346,2.785h4.867l15.991-38.243%20h6.957h10.428l19.472,46.587v-2.376v-15.705v-1.389v-27.116h17.382l20.161,34.07v-34.07h11.826v47.977h0.002L434.083,241.609%20L434.083,241.609z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M265.161,213.207c0.203-0.217,0.387-0.463,0.543-0.745c0.63-0.997,1.352-2.793,0.963-5.244%20c-0.016-0.225-0.057-0.433-0.105-0.634c-0.013-0.056-0.011-0.105-0.026-0.161l-0.007,0.001c-0.346-1.191-1.229-1.923-2.11-2.367%20c-1.394-0.693-3.48-0.693-5.565-0.693h-13.909v11.127h13.909c2.085,0,4.172,0,5.565-0.697c0.209-0.106,0.395-0.25,0.574-0.413%20l0.002,0.009C264.996,213.389,265.067,213.315,265.161,213.207z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M475.105,311.144c0-4.867-1.389-9.736-3.474-13.212v-31.289h-0.032v-2.089c0,0-29.145,0-33.483,0%20c-4.336,0-9.598,4.171-9.598,4.171v-4.171h-31.984c-4.87,0-11.124,1.392-13.909,4.171v-4.171h-57.016v2.089v2.081%20c-4.169-3.474-11.824-4.171-15.298-4.171h-37.549v2.089v2.081c-3.476-3.474-11.824-4.171-15.998-4.171H215.05l-9.737,10.431%20l-9.04-10.431h-2.911h-4.737h-54.93v2.089v5.493v62.651h61.19l10.054-10.057l8.715,10.057h0.698h35.258h1.598h0.696h0.692v-6.953%20v-9.039h3.479c4.863,0,11.124,0,15.991-2.089v17.382v1.394h31.291v-1.394V317.4h1.387c2.089,0,2.089,0,2.089,2.086v14.6v1.394%20h94.563c6.263,0,12.517-1.394,15.993-4.175v2.781v1.394h29.902c6.254,0,12.517-0.695,16.689-3.478%20c6.402-3.841,10.437-10.64,11.037-18.749c0.028-0.24,0.063-0.48,0.085-0.721l-0.041-0.039%20C475.087,312.043,475.105,311.598,475.105,311.144z%20M256.076,306.973h-13.91v2.081v4.174v4.173v7.649h-22.855l-13.302-15.299%20l-0.046,0.051l-0.65-0.748l-15.297,15.996h-44.501v-48.673h45.197l12.348,13.525l2.596,2.832l0.352-0.365l14.604-15.991h36.852%20c7.152,0,15.161,1.765,18.196,9.042c0.365,1.441,0.577,3.043,0.577,4.863C276.237,304.189,266.502,306.973,256.076,306.973z%20M325.609,306.276c1.389,2.081,2.085,4.867,2.085,9.041v9.732h-11.819v-6.256c0-2.786,0-7.65-2.089-9.739%20c-1.387-2.081-4.172-2.081-8.341-2.081H292.93v18.077h-11.82v-49.369h26.421c5.559,0,10.426,0,13.909,2.084%20c3.474,2.088,6.254,5.565,6.254,11.128c0,7.647-4.865,11.819-8.343,13.212C322.829,303.49,324.914,304.885,325.609,306.276z%20M373.589,286.107h-27.122v9.04h26.424v9.737h-26.424v9.736h27.122v10.429H334.65V275.68h38.939V286.107z%20M402.791,325.05h-22.252%20v-10.429h22.252c2.082,0,3.476,0,4.87-1.392c0.696-0.697,1.387-2.085,1.387-3.477c0-1.394-0.691-2.778-1.387-3.475%20c-0.698-0.695-2.091-1.391-4.176-1.391c-11.126-0.696-24.337,0-24.337-15.296c0-6.954,4.172-14.604,16.689-14.604h22.945v11.819%20h-21.554c-2.085,0-3.478,0-4.87,0.696c-1.387,0.697-1.387,2.089-1.387,3.478c0,2.087,1.387,2.783,2.778,3.473%20c1.394,0.697,2.783,0.697,4.172,0.697h6.259c6.259,0,10.43,1.391,13.211,4.173c2.087,2.087,3.478,5.564,3.478,10.43%20C420.869,320.179,414.611,325.05,402.791,325.05z%20M462.59,320.179c-2.778,2.785-7.648,4.871-14.604,4.871H425.74v-10.429h22.245%20c2.087,0,3.481,0,4.87-1.392c0.693-0.697,1.391-2.085,1.391-3.477c0-1.394-0.698-2.778-1.391-3.475%20c-0.696-0.695-2.085-1.391-4.172-1.391c-11.122-0.696-24.337,0-24.337-15.295c0-6.609,3.781-12.579,13.106-14.352%20c1.115-0.154,2.293-0.253,3.583-0.253h22.948v11.819h-15.3h-5.561h-0.696c-2.087,0-3.476,0-4.865,0.696%20c-0.7,0.697-1.396,2.089-1.396,3.478c0,2.087,0.696,2.783,2.785,3.473c1.389,0.697,2.78,0.697,4.172,0.697h0.691h5.565%20c3.039,0,5.337,0.375,7.44,1.114c1.926,0.697,8.302,3.549,9.728,10.994c0.124,0.78,0.215,1.594,0.215,2.495%20C466.761,313.925,465.37,317.401,462.59,320.179z'/%3e%3c/g%3e%3c/svg%3e", zt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%2334495E;'%20d='M512,402.282c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.996,0,402.282V109.717%20c0-16.716,13.55-30.266,30.265-30.266h451.469c16.716,0,30.265,13.551,30.265,30.266L512,402.282L512,402.282z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.282V109.717%20c0-16.716,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.003,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.996,21.517,402.282z'/%3e%3cpath%20style='fill:%23F26E21;'%20d='M309.389,255.801c0.041-9.636-3.572-19.286-10.843-26.558c-7.287-7.287-16.961-10.897-26.617-10.839%20c-0.046,0-0.091-0.003-0.139-0.003c-20.968,0-37.6,16.628-37.6,37.602c0,20.767,16.837,37.599,37.6,37.599%20c20.974,0,37.604-16.631,37.604-37.599C309.394,255.934,309.389,255.869,309.389,255.801z'/%3e%3cg%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M227.198,271.909c-5.62,5.626-10.807,7.824-16.394,7.943c-13.611-0.122-23.618-10.202-23.618-24.573%20c0-7.234,2.739-13.163,7.078-18.228l0,0c4.069-3.863,9.311-6.359,15.339-6.359c6.507,0,11.571,2.169,17.352,7.954v-16.631%20c-5.78-2.891-10.846-4.338-17.352-4.338c-9.192,0.657-17.859,4.371-24.507,10.203l0,0c-1.916,1.724-3.752,3.627-5.309,5.805%20c-4.856,6.294-7.791,14.001-7.791,22.32c0,20.967,16.637,36.875,37.606,36.875c0.102,0,0.203-0.009,0.302-0.01%20c0.141,0.002,0.28,0.01,0.42,0.01c5.784,0,10.85-1.443,17.357-4.336L227.198,271.909c-0.244,0.244,0.242,0.471,0,0.702V271.909z'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='356.863,228.033%20356.863,228.033%20340.487,268.295%20321.685,220.566%20306.502,220.566%20336.148,293.601%20344.102,293.601%20375.196,220.566%20360.013,220.566%20'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='380.983,252.384%20380.983,291.435%20420.033,291.435%20420.753,291.435%20420.753,279.861%20408.461,279.861%20395.445,279.861%20395.445,266.848%20395.445,260.342%20420.033,260.342%20420.033,248.045%20395.445,248.045%20395.445,232.861%20420.753,232.861%20420.753,220.566%20380.983,220.566%20'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M54.135,220.566H33.884v70.869h20.25c10.845,0,18.798-2.895,25.306-7.957%20c7.953-6.508,13.017-16.629,13.017-27.474C92.458,235.028,77.27,220.566,54.135,220.566z%20M70.765,274.08%20c-4.339,3.614-10.124,5.781-18.802,5.781h-4.339V232.86h3.615c8.678,0,14.463,1.446,18.803,5.783%20c5.061,4.336,7.955,10.848,7.955,17.358C78.72,262.509,75.828,269.737,70.765,274.08z'/%3e%3crect%20x='98.97'%20y='220.56'%20style='fill:%23E7E8E3;'%20width='13.739'%20height='70.867'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M147.415,248.045c-8.676-2.892-10.848-5.063-10.848-8.677c0-4.339,4.339-7.954,10.124-7.954%20c4.339,0,7.954,1.447,11.57,5.786l7.233-9.4c-5.787-5.064-13.015-7.953-20.97-7.953c-12.296,0-22.42,8.678-22.42,20.244%20c0,10.126,4.343,14.464,17.357,19.526c5.785,2.166,7.955,2.892,9.404,4.338c2.887,1.444,4.336,4.339,4.336,7.228%20c0,5.786-4.336,10.126-10.848,10.126c-6.514,0-12.294-3.615-15.187-9.401l-8.678,8.678c6.511,9.4,14.465,13.738,24.589,13.738%20c14.461,0,24.58-9.4,24.58-23.141C167.659,258.893,163.324,253.831,147.415,248.045z'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M459.804,261.783c10.843-2.166,16.63-9.4,16.63-20.244c0-13.014-9.402-20.973-25.308-20.973h-20.972%20v70.869h13.739V263.23h2.172l19.519,28.205h16.634L459.804,261.783z%20M448.23,253.105h-4.336v-21.691h4.336%20c8.678,0,13.742,3.614,13.742,10.85C461.972,249.492,456.909,253.105,448.23,253.105z'/%3e%3c/g%3e%3c/svg%3e", Pt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='800px'%20width='800px'%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20291.791%20291.791'%20xml:space='preserve'%3e%3cg%3e%3cpath%20style='fill:%23E2574C;'%20d='M182.298,145.895c0,50.366-40.801,91.176-91.149,91.176S0,196.252,0,145.895%20s40.811-91.176,91.149-91.176S182.298,95.538,182.298,145.895z'/%3e%3cpath%20style='fill:%23F4B459;'%20d='M200.616,54.719c-20.442,0-39.261,6.811-54.469,18.181l0.073,0.009%20c2.991,2.89,6.291,4.924,8.835,8.251l-18.965,0.301c-2.972,3-5.68,6.264-8.233,9.656H161.3c2.544,3.054,4.896,5.708,7.03,9.081%20h-46.536c-1.705,2.936-3.282,5.954-4.659,9.09h56.493c1.477,3.127,2.799,5.489,3.921,8.799h-63.76%20c-1.012,3.146-1.878,6.364-2.535,9.646h68.966c0.675,3.155,1.194,6.072,1.55,9.045h-71.884c-0.301,3-0.456,6.045-0.456,9.118%20h72.859c0,3.228-0.228,6.218-0.556,9.118h-71.847c0.31,3.091,0.766,6.127,1.368,9.118h68.856c-0.711,2.954-1.532,5.926-2.562,9.008%20h-63.969c0.966,3.118,2.143,6.145,3.428,9.099h56.621c-1.568,3.319-3.346,5.972-5.306,9.081h-46.691%20c1.842,3.191,3.875,6.236,6.081,9.154l33.589,0.501c-2.863,3.437-6.537,5.507-9.884,8.516c0.182,0.146-5.352-0.018-16.248-0.191%20c16.576,17.105,39.744,27.772,65.446,27.772c50.357,0,91.176-40.82,91.176-91.176S250.981,54.719,200.616,54.719z'/%3e%3c/g%3e%3c/svg%3e", Nt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%20-140%20780%20780'%20enable-background='new%200%200%20780%20500'%20version='1.1'%20xml:space='preserve'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40%20C0,17.909,17.909,0,40,0z'%20fill='%230E4595'/%3e%3cpath%20d='m293.2%20348.73l33.361-195.76h53.36l-33.385%20195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725%200-89.865%2026.55-90.18%2064.603-0.299%2028.13%2026.514%2043.822%2046.752%2053.186%2020.771%209.595%2027.752%2015.714%2027.654%2024.283-0.131%2013.121-16.586%2019.116-31.922%2019.116-21.357%200-32.703-2.967-50.227-10.276l-6.876-3.11-7.489%2043.823c12.463%205.464%2035.51%2010.198%2059.438%2010.443%2056.09%200%2092.5-26.246%2092.916-66.882%200.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268%200-8.137%209.668-16.839%2030.557-16.839%2017.449-0.27%2030.09%203.535%2039.938%207.5l4.781%202.26%207.232-42.429m137.31-4.223h-41.232c-12.773%200-22.332%203.487-27.941%2016.234l-79.244%20179.4h56.031s9.16-24.123%2011.232-29.418c6.125%200%2060.555%200.084%2068.338%200.084%201.596%206.853%206.49%2029.334%206.49%2029.334h49.514l-43.188-195.64zm-65.418%20126.41c4.412-11.279%2021.26-54.723%2021.26-54.723-0.316%200.522%204.379-11.334%207.074-18.684l3.605%2016.879s10.219%2046.729%2012.354%2056.528h-44.293zm-363.3-126.41l-52.24%20133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766%20171.2%2056.456-0.064%2084.004-195.39h-56.521'%20fill='%23ffffff'/%3e%3cpath%20d='m146.92%20152.96h-86.041l-0.681%204.073c66.938%2016.204%20111.23%2055.363%20129.62%20102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527'%20fill='%23F2AE14'/%3e%3c/svg%3e", w = [
+const Nt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%23306FC5;'%20d='M512,402.281c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.997,0,402.281V109.717%20c0-16.715,13.55-30.266,30.265-30.266h451.47c16.716,0,30.265,13.551,30.265,30.266V402.281L512,402.281z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.281V109.717%20c0-16.715,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.001,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.997,21.517,402.281z'/%3e%3cg%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='74.59,220.748%2089.888,220.748%2082.241,201.278%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='155.946,286.107%20155.946,295.148%20181.675,295.148%20181.675,304.885%20155.946,304.885%20155.946,315.318%20184.455,315.318%20197.666,300.712%20185.151,286.107%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='356.898,201.278%20348.553,220.748%20364.548,220.748%20'/%3e%3cpolygon%20style='fill:%23FFFFFF;'%20points='230.348,320.875%20230.348,281.241%20212.268,300.712%20'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M264.42,292.368c-0.696-4.172-3.48-6.261-7.654-6.261h-14.599v12.516h15.299%20C261.637,298.624,264.42,296.539,264.42,292.368z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M313.09,297.236c1.391-0.697,2.089-2.785,2.089-4.867c0.696-2.779-0.698-4.172-2.089-4.868%20c-1.387-0.696-3.476-0.696-5.559-0.696h-13.91v11.127h13.909C309.613,297.932,311.702,297.932,313.09,297.236z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M413.217,183.198v8.344l-4.169-8.344H376.37v8.344l-4.174-8.344h-44.502%20c-7.648,0-13.909,1.392-19.469,4.173v-4.173h-31.289v0.696v3.477c-3.476-2.78-7.648-4.173-13.211-4.173h-111.95l-7.652,17.384%20l-7.647-17.384h-25.031h-10.431v8.344l-3.477-8.344h-0.696H66.942l-13.909,32.68L37.042,251.34l-0.294,0.697h0.294h35.463h0.444%20l0.252-0.697l4.174-10.428h9.039l4.172,11.125h40.326v-0.697v-7.647l3.479,8.343h20.163l3.475-8.343v7.647v0.697h15.993h79.965%20h0.696v-18.08h1.394c1.389,0,1.389,0,1.389,2.087v15.297h50.065v-4.172c4.172,2.089,10.426,4.172,18.771,4.172h20.863l4.172-11.123%20h9.732l4.172,11.123h40.328v-6.952v-3.476l6.261,10.428h1.387h0.698h30.595v-68.143h-31.291l0,0H413.217z%20M177.501,241.609h-6.955%20h-4.171v-4.169v-34.076l-0.696,1.595v-0.019l-16.176,36.669h-0.512h-3.719h-6.017l-16.687-38.245v38.245h-23.64l-4.867-10.43%20H70.417l-4.868,10.43H53.326l20.57-48.675h17.382l19.469,46.587v-46.587h4.171h14.251l0.328,0.697h0.024l8.773,19.094l6.3,14.306%20l0.223-0.721l13.906-33.375H177.5v48.674H177.501L177.501,241.609z%20M225.481,203.364h-27.119v9.039h26.423v9.734h-26.423v9.738%20h27.119v10.427h-38.939v-49.367h38.939V203.364L225.481,203.364z%20M275.076,221.294c0.018,0.016,0.041,0.027,0.063,0.042%20c0.263,0.278,0.488,0.557,0.68,0.824c1.332,1.746,2.409,4.343,2.463,8.151c0.004,0.066,0.007,0.131,0.011,0.197%20c0,0.038,0.007,0.071,0.007,0.11c0,0.022-0.002,0.039-0.002,0.06c0.016,0.383,0.026,0.774,0.026,1.197v9.735h-10.428v-5.565%20c0-2.781,0-6.954-2.089-9.735c-0.657-0.657-1.322-1.09-2.046-1.398c-1.042-0.675-3.017-0.686-6.295-0.686h-12.52v17.384h-11.818%20v-48.675h26.425c6.254,0,10.428,0,13.906,2.086c3.407,2.046,5.465,5.439,5.543,10.812c-0.161,7.4-4.911,11.46-8.326,12.829%20C270.676,218.662,272.996,219.129,275.076,221.294z%20M298.491,241.609h-11.822v-48.675h11.822V241.609z%20M434.083,241.609h-15.3%20l-22.25-36.855v30.595l-0.073-0.072v6.362h-11.747v-0.029h-11.822l-4.172-10.43H344.38l-4.172,11.123h-13.211%20c-5.559,0-12.517-1.389-16.687-5.561c-4.172-4.172-6.256-9.735-6.256-18.773c0-6.953,1.389-13.911,6.256-19.472%20c3.474-4.175,9.735-5.562,17.382-5.562h11.128v10.429h-11.128c-4.172,0-6.254,0.693-9.041,2.783%20c-2.082,2.085-3.474,6.256-3.474,11.123c0,5.564,0.696,9.04,3.474,11.821c2.091,2.089,4.87,2.785,8.346,2.785h4.867l15.991-38.243%20h6.957h10.428l19.472,46.587v-2.376v-15.705v-1.389v-27.116h17.382l20.161,34.07v-34.07h11.826v47.977h0.002L434.083,241.609%20L434.083,241.609z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M265.161,213.207c0.203-0.217,0.387-0.463,0.543-0.745c0.63-0.997,1.352-2.793,0.963-5.244%20c-0.016-0.225-0.057-0.433-0.105-0.634c-0.013-0.056-0.011-0.105-0.026-0.161l-0.007,0.001c-0.346-1.191-1.229-1.923-2.11-2.367%20c-1.394-0.693-3.48-0.693-5.565-0.693h-13.909v11.127h13.909c2.085,0,4.172,0,5.565-0.697c0.209-0.106,0.395-0.25,0.574-0.413%20l0.002,0.009C264.996,213.389,265.067,213.315,265.161,213.207z'/%3e%3cpath%20style='fill:%23FFFFFF;'%20d='M475.105,311.144c0-4.867-1.389-9.736-3.474-13.212v-31.289h-0.032v-2.089c0,0-29.145,0-33.483,0%20c-4.336,0-9.598,4.171-9.598,4.171v-4.171h-31.984c-4.87,0-11.124,1.392-13.909,4.171v-4.171h-57.016v2.089v2.081%20c-4.169-3.474-11.824-4.171-15.298-4.171h-37.549v2.089v2.081c-3.476-3.474-11.824-4.171-15.998-4.171H215.05l-9.737,10.431%20l-9.04-10.431h-2.911h-4.737h-54.93v2.089v5.493v62.651h61.19l10.054-10.057l8.715,10.057h0.698h35.258h1.598h0.696h0.692v-6.953%20v-9.039h3.479c4.863,0,11.124,0,15.991-2.089v17.382v1.394h31.291v-1.394V317.4h1.387c2.089,0,2.089,0,2.089,2.086v14.6v1.394%20h94.563c6.263,0,12.517-1.394,15.993-4.175v2.781v1.394h29.902c6.254,0,12.517-0.695,16.689-3.478%20c6.402-3.841,10.437-10.64,11.037-18.749c0.028-0.24,0.063-0.48,0.085-0.721l-0.041-0.039%20C475.087,312.043,475.105,311.598,475.105,311.144z%20M256.076,306.973h-13.91v2.081v4.174v4.173v7.649h-22.855l-13.302-15.299%20l-0.046,0.051l-0.65-0.748l-15.297,15.996h-44.501v-48.673h45.197l12.348,13.525l2.596,2.832l0.352-0.365l14.604-15.991h36.852%20c7.152,0,15.161,1.765,18.196,9.042c0.365,1.441,0.577,3.043,0.577,4.863C276.237,304.189,266.502,306.973,256.076,306.973z%20M325.609,306.276c1.389,2.081,2.085,4.867,2.085,9.041v9.732h-11.819v-6.256c0-2.786,0-7.65-2.089-9.739%20c-1.387-2.081-4.172-2.081-8.341-2.081H292.93v18.077h-11.82v-49.369h26.421c5.559,0,10.426,0,13.909,2.084%20c3.474,2.088,6.254,5.565,6.254,11.128c0,7.647-4.865,11.819-8.343,13.212C322.829,303.49,324.914,304.885,325.609,306.276z%20M373.589,286.107h-27.122v9.04h26.424v9.737h-26.424v9.736h27.122v10.429H334.65V275.68h38.939V286.107z%20M402.791,325.05h-22.252%20v-10.429h22.252c2.082,0,3.476,0,4.87-1.392c0.696-0.697,1.387-2.085,1.387-3.477c0-1.394-0.691-2.778-1.387-3.475%20c-0.698-0.695-2.091-1.391-4.176-1.391c-11.126-0.696-24.337,0-24.337-15.296c0-6.954,4.172-14.604,16.689-14.604h22.945v11.819%20h-21.554c-2.085,0-3.478,0-4.87,0.696c-1.387,0.697-1.387,2.089-1.387,3.478c0,2.087,1.387,2.783,2.778,3.473%20c1.394,0.697,2.783,0.697,4.172,0.697h6.259c6.259,0,10.43,1.391,13.211,4.173c2.087,2.087,3.478,5.564,3.478,10.43%20C420.869,320.179,414.611,325.05,402.791,325.05z%20M462.59,320.179c-2.778,2.785-7.648,4.871-14.604,4.871H425.74v-10.429h22.245%20c2.087,0,3.481,0,4.87-1.392c0.693-0.697,1.391-2.085,1.391-3.477c0-1.394-0.698-2.778-1.391-3.475%20c-0.696-0.695-2.085-1.391-4.172-1.391c-11.122-0.696-24.337,0-24.337-15.295c0-6.609,3.781-12.579,13.106-14.352%20c1.115-0.154,2.293-0.253,3.583-0.253h22.948v11.819h-15.3h-5.561h-0.696c-2.087,0-3.476,0-4.865,0.696%20c-0.7,0.697-1.396,2.089-1.396,3.478c0,2.087,0.696,2.783,2.785,3.473c1.389,0.697,2.78,0.697,4.172,0.697h0.691h5.565%20c3.039,0,5.337,0.375,7.44,1.114c1.926,0.697,8.302,3.549,9.728,10.994c0.124,0.78,0.215,1.594,0.215,2.495%20C466.761,313.925,465.37,317.401,462.59,320.179z'/%3e%3c/g%3e%3c/svg%3e", Pt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='30px'%20width='30px'%20version='1.1'%20id='Capa_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20512%20512'%20xml:space='preserve'%3e%3cpath%20style='fill:%2334495E;'%20d='M512,402.282c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.996,0,402.282V109.717%20c0-16.716,13.55-30.266,30.265-30.266h451.469c16.716,0,30.265,13.551,30.265,30.266L512,402.282L512,402.282z'/%3e%3cpath%20style='opacity:0.15;fill:%23202121;enable-background:new%20;'%20d='M21.517,402.282V109.717%20c0-16.716,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.003,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52%20C35.07,432.549,21.517,418.996,21.517,402.282z'/%3e%3cpath%20style='fill:%23F26E21;'%20d='M309.389,255.801c0.041-9.636-3.572-19.286-10.843-26.558c-7.287-7.287-16.961-10.897-26.617-10.839%20c-0.046,0-0.091-0.003-0.139-0.003c-20.968,0-37.6,16.628-37.6,37.602c0,20.767,16.837,37.599,37.6,37.599%20c20.974,0,37.604-16.631,37.604-37.599C309.394,255.934,309.389,255.869,309.389,255.801z'/%3e%3cg%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M227.198,271.909c-5.62,5.626-10.807,7.824-16.394,7.943c-13.611-0.122-23.618-10.202-23.618-24.573%20c0-7.234,2.739-13.163,7.078-18.228l0,0c4.069-3.863,9.311-6.359,15.339-6.359c6.507,0,11.571,2.169,17.352,7.954v-16.631%20c-5.78-2.891-10.846-4.338-17.352-4.338c-9.192,0.657-17.859,4.371-24.507,10.203l0,0c-1.916,1.724-3.752,3.627-5.309,5.805%20c-4.856,6.294-7.791,14.001-7.791,22.32c0,20.967,16.637,36.875,37.606,36.875c0.102,0,0.203-0.009,0.302-0.01%20c0.141,0.002,0.28,0.01,0.42,0.01c5.784,0,10.85-1.443,17.357-4.336L227.198,271.909c-0.244,0.244,0.242,0.471,0,0.702V271.909z'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='356.863,228.033%20356.863,228.033%20340.487,268.295%20321.685,220.566%20306.502,220.566%20336.148,293.601%20344.102,293.601%20375.196,220.566%20360.013,220.566%20'/%3e%3cpolygon%20style='fill:%23E7E8E3;'%20points='380.983,252.384%20380.983,291.435%20420.033,291.435%20420.753,291.435%20420.753,279.861%20408.461,279.861%20395.445,279.861%20395.445,266.848%20395.445,260.342%20420.033,260.342%20420.033,248.045%20395.445,248.045%20395.445,232.861%20420.753,232.861%20420.753,220.566%20380.983,220.566%20'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M54.135,220.566H33.884v70.869h20.25c10.845,0,18.798-2.895,25.306-7.957%20c7.953-6.508,13.017-16.629,13.017-27.474C92.458,235.028,77.27,220.566,54.135,220.566z%20M70.765,274.08%20c-4.339,3.614-10.124,5.781-18.802,5.781h-4.339V232.86h3.615c8.678,0,14.463,1.446,18.803,5.783%20c5.061,4.336,7.955,10.848,7.955,17.358C78.72,262.509,75.828,269.737,70.765,274.08z'/%3e%3crect%20x='98.97'%20y='220.56'%20style='fill:%23E7E8E3;'%20width='13.739'%20height='70.867'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M147.415,248.045c-8.676-2.892-10.848-5.063-10.848-8.677c0-4.339,4.339-7.954,10.124-7.954%20c4.339,0,7.954,1.447,11.57,5.786l7.233-9.4c-5.787-5.064-13.015-7.953-20.97-7.953c-12.296,0-22.42,8.678-22.42,20.244%20c0,10.126,4.343,14.464,17.357,19.526c5.785,2.166,7.955,2.892,9.404,4.338c2.887,1.444,4.336,4.339,4.336,7.228%20c0,5.786-4.336,10.126-10.848,10.126c-6.514,0-12.294-3.615-15.187-9.401l-8.678,8.678c6.511,9.4,14.465,13.738,24.589,13.738%20c14.461,0,24.58-9.4,24.58-23.141C167.659,258.893,163.324,253.831,147.415,248.045z'/%3e%3cpath%20style='fill:%23E7E8E3;'%20d='M459.804,261.783c10.843-2.166,16.63-9.4,16.63-20.244c0-13.014-9.402-20.973-25.308-20.973h-20.972%20v70.869h13.739V263.23h2.172l19.519,28.205h16.634L459.804,261.783z%20M448.23,253.105h-4.336v-21.691h4.336%20c8.678,0,13.742,3.614,13.742,10.85C461.972,249.492,456.909,253.105,448.23,253.105z'/%3e%3c/g%3e%3c/svg%3e", Vt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='iso-8859-1'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20height='800px'%20width='800px'%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%20291.791%20291.791'%20xml:space='preserve'%3e%3cg%3e%3cpath%20style='fill:%23E2574C;'%20d='M182.298,145.895c0,50.366-40.801,91.176-91.149,91.176S0,196.252,0,145.895%20s40.811-91.176,91.149-91.176S182.298,95.538,182.298,145.895z'/%3e%3cpath%20style='fill:%23F4B459;'%20d='M200.616,54.719c-20.442,0-39.261,6.811-54.469,18.181l0.073,0.009%20c2.991,2.89,6.291,4.924,8.835,8.251l-18.965,0.301c-2.972,3-5.68,6.264-8.233,9.656H161.3c2.544,3.054,4.896,5.708,7.03,9.081%20h-46.536c-1.705,2.936-3.282,5.954-4.659,9.09h56.493c1.477,3.127,2.799,5.489,3.921,8.799h-63.76%20c-1.012,3.146-1.878,6.364-2.535,9.646h68.966c0.675,3.155,1.194,6.072,1.55,9.045h-71.884c-0.301,3-0.456,6.045-0.456,9.118%20h72.859c0,3.228-0.228,6.218-0.556,9.118h-71.847c0.31,3.091,0.766,6.127,1.368,9.118h68.856c-0.711,2.954-1.532,5.926-2.562,9.008%20h-63.969c0.966,3.118,2.143,6.145,3.428,9.099h56.621c-1.568,3.319-3.346,5.972-5.306,9.081h-46.691%20c1.842,3.191,3.875,6.236,6.081,9.154l33.589,0.501c-2.863,3.437-6.537,5.507-9.884,8.516c0.182,0.146-5.352-0.018-16.248-0.191%20c16.576,17.105,39.744,27.772,65.446,27.772c50.357,0,91.176-40.82,91.176-91.176S250.981,54.719,200.616,54.719z'/%3e%3c/g%3e%3c/svg%3e", zt = "data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%20-140%20780%20780'%20enable-background='new%200%200%20780%20500'%20version='1.1'%20xml:space='preserve'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40%20C0,17.909,17.909,0,40,0z'%20fill='%230E4595'/%3e%3cpath%20d='m293.2%20348.73l33.361-195.76h53.36l-33.385%20195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725%200-89.865%2026.55-90.18%2064.603-0.299%2028.13%2026.514%2043.822%2046.752%2053.186%2020.771%209.595%2027.752%2015.714%2027.654%2024.283-0.131%2013.121-16.586%2019.116-31.922%2019.116-21.357%200-32.703-2.967-50.227-10.276l-6.876-3.11-7.489%2043.823c12.463%205.464%2035.51%2010.198%2059.438%2010.443%2056.09%200%2092.5-26.246%2092.916-66.882%200.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268%200-8.137%209.668-16.839%2030.557-16.839%2017.449-0.27%2030.09%203.535%2039.938%207.5l4.781%202.26%207.232-42.429m137.31-4.223h-41.232c-12.773%200-22.332%203.487-27.941%2016.234l-79.244%20179.4h56.031s9.16-24.123%2011.232-29.418c6.125%200%2060.555%200.084%2068.338%200.084%201.596%206.853%206.49%2029.334%206.49%2029.334h49.514l-43.188-195.64zm-65.418%20126.41c4.412-11.279%2021.26-54.723%2021.26-54.723-0.316%200.522%204.379-11.334%207.074-18.684l3.605%2016.879s10.219%2046.729%2012.354%2056.528h-44.293zm-363.3-126.41l-52.24%20133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766%20171.2%2056.456-0.064%2084.004-195.39h-56.521'%20fill='%23ffffff'/%3e%3cpath%20d='m146.92%20152.96h-86.041l-0.681%204.073c66.938%2016.204%20111.23%2055.363%20129.62%20102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527'%20fill='%23F2AE14'/%3e%3c/svg%3e", L = [
   {
     type: "visa",
-    imgSrc: Nt
+    imgSrc: zt
   },
   {
     type: "masterCard",
-    imgSrc: Pt
+    imgSrc: Vt
   },
   {
     type: "americanExpress",
-    imgSrc: It
+    imgSrc: Nt
   },
   {
     type: "discover",
-    imgSrc: zt
+    imgSrc: Pt
   }
 ];
 class At extends h {
@@ -1325,11 +1452,11 @@ class At extends h {
     a.id = "card-element", a.className = `card-element ${e.isFocused ? "card-element-focus" : ""}`, a.style.zIndex = e.isFocused ? "2" : "0";
     const r = document.createElement("div");
     if (r.className = "cards-position", e.cardType === "unknown")
-      w.forEach((s) => {
+      L.forEach((s) => {
         r.appendChild(this.createCardIcon(s));
       });
     else {
-      const s = w.find((n) => n.type === e.cardType);
+      const s = L.find((o) => o.type === e.cardType);
       s && r.appendChild(this.createCardIcon(s));
     }
     a.appendChild(r), i.appendChild(a), this.getElement().appendChild(i);
@@ -1360,12 +1487,12 @@ class At extends h {
     const i = this.getElement().querySelector(".cards-position");
     if (i)
       if (i.innerHTML = "", this.cardType === "unknown")
-        w.forEach((a) => {
+        L.forEach((a) => {
           i.appendChild(this.createCardIcon(a));
         });
       else {
-        const a = w.find((r) => r.type === this.cardType);
-        a ? i.appendChild(this.createCardIcon(a)) : w.forEach((r) => {
+        const a = L.find((r) => r.type === this.cardType);
+        a ? i.appendChild(this.createCardIcon(a)) : L.forEach((r) => {
           i.appendChild(this.createCardIcon(r));
         });
       }
@@ -1385,40 +1512,43 @@ class Dt extends h {
       isFocused: a,
       isCvvFocused: r,
       isCcValid: s,
-      isCvvValid: n,
+      isCvvValid: o,
       isCcTouched: l,
       isCvvTouched: c,
       cardType: d,
       cardExpiry: u,
-      cardExpiryError: p,
+      cardExpiryError: f,
       cardExpiryTouched: g,
-      onChange: m,
-      onBlur: b,
-      translationFunc: S,
-      cardExpiryAutocomplete: x = "cc-exp"
-    } = e, C = document.createElement("div");
+      onChange: x,
+      onBlur: I,
+      translationFunc: m,
+      cardExpiryAutocomplete: C = "cc-exp"
+    } = e, w = document.createElement("div");
     this.cardNumber = new At({
       styles: {
         color: t.styles.textColor,
         fontSize: t.styles.fontSize,
         borderRadius: t.styles.borderRadius
       },
-      label: S("cardInformation"),
+      label: m("cardInformation"),
       isLoading: i,
       isFocused: a,
       cardType: d
-    }), C.appendChild(this.cardNumber.getElement());
-    const v = document.createElement("div");
-    v.className = "card-details", this.cardExpiry = new P({
+    }), w.appendChild(this.cardNumber.getElement());
+    const y = document.createElement("div");
+    y.className = "card-details", this.cardExpiry = new V({
       name: "cardExpiry",
       type: "tel",
-      placeholder: S("cardExpiry"),
-      error: !!(p && g),
-      errorMsg: p,
+      placeholder: m("cardExpiry"),
+      // Always hide error initially
+      error: !1,
+      errorMsg: f,
       value: u,
-      autocomplete: x,
-      onChange: (f) => {
-        this.trimCardExpiry(), m(f);
+      autocomplete: C,
+      onChange: (p) => {
+        this.cardExpiry.setError(!1);
+        const S = this.validationMessages.get("cardExpiry");
+        S && (S.getElement().remove(), this.validationMessages.delete("cardExpiry"), this.updateErrorContainerHeight()), this.trimCardExpiry(), x(p);
       },
       styles: {
         color: t.styles.textColor,
@@ -1426,44 +1556,46 @@ class Dt extends h {
         fontSize: t.styles.fontSize,
         fontFamily: t.styles.fontFamily
       }
-    }), this.cardExpiry.addEventListener("blur", b), this.cardExpiry.addEventListener("keydown", (f) => {
-      const L = f, B = [
+    }), this.cardExpiry.addEventListener("blur", (p) => {
+      f && g && this.cardExpiry.setError(!0, f), I(p);
+    }), this.cardExpiry.addEventListener("keydown", (p) => {
+      const S = p, B = [
         "Backspace",
         "Delete",
         "ArrowLeft",
         "ArrowRight",
         "Tab"
-      ], O = this.cardExpiry.getValue().replace(/\D/g, "");
-      B.includes(L.key) || (!/^\d$/.test(L.key) || O.length >= 4 && !L.isComposing) && L.preventDefault();
+      ], H = this.cardExpiry.getValue().replace(/\D/g, "");
+      B.includes(S.key) || (!/^\d$/.test(S.key) || H.length >= 4 && !S.isComposing) && S.preventDefault();
     });
-    const R = this.cardExpiry.getElement();
-    R.style.height = "38.5px";
-    const T = document.createElement("div");
-    T.className = "input-wrapper", this.cardCvv = new Tt({
+    const M = this.cardExpiry.getElement();
+    M.style.height = "38.5px";
+    const b = document.createElement("div");
+    b.className = "input-wrapper", this.cardCvv = new It({
       styles: {
         borderRadius: typeof t.styles.borderRadius == "number" ? t.styles.borderRadius : 0
       },
       isLoading: i,
       isFocused: r
-    }), T.appendChild(this.cardCvv.getElement()), v.appendChild(this.cardExpiry.getElement()), v.appendChild(T), C.appendChild(v);
-    const y = document.createElement("div");
-    if (y.className = "error-messages-container", y.style.width = "100%", y.style.transition = "height 0.3s ease-in-out, opacity 0.3s ease-in-out", y.style.overflow = "hidden", y.style.height = "0px", y.style.opacity = "0", this.getElement().appendChild(C), this.getElement().appendChild(y), (a || l) && !s) {
-      const f = new E({
-        text: S("validation.cardNumberInvalid")
+    }), b.appendChild(this.cardCvv.getElement()), y.appendChild(this.cardExpiry.getElement()), y.appendChild(b), w.appendChild(y);
+    const v = document.createElement("div");
+    if (v.className = "error-messages-container", v.style.width = "100%", v.style.transition = "height 0.3s ease-in-out, opacity 0.3s ease-in-out", v.style.overflow = "hidden", v.style.height = "0px", v.style.opacity = "0", this.getElement().appendChild(w), this.getElement().appendChild(v), (a || l) && !s) {
+      const p = new E({
+        text: m("validation.cardNumberInvalid")
       });
-      this.validationMessages.set("cardNumber", f), y.appendChild(f.getElement());
+      this.validationMessages.set("cardNumber", p), v.appendChild(p.getElement());
     }
-    if ((r || c) && !n) {
-      const f = new E({
-        text: S("validation.cardSecurityFormat")
+    if ((r || c) && !o) {
+      const p = new E({
+        text: m("validation.cardSecurityFormat")
       });
-      this.validationMessages.set("cardCvv", f), y.appendChild(f.getElement());
+      this.validationMessages.set("cardCvv", p), v.appendChild(p.getElement());
     }
-    if (p && g) {
-      const f = new E({
-        text: p
+    if (f && g) {
+      const p = new E({
+        text: f
       });
-      this.validationMessages.set("cardExpiry", f), y.appendChild(f.getElement());
+      this.validationMessages.set("cardExpiry", p), v.appendChild(p.getElement());
     }
     setTimeout(() => this.updateErrorContainerHeight(), 0);
   }
@@ -1474,20 +1606,22 @@ class Dt extends h {
     this.cardExpiry.setValue(e);
     const a = this.getElement().querySelector(
       ".error-messages-container"
-    );
-    if (t && i)
+    ), r = this.cardExpiry.getElement().querySelector("input"), s = document.activeElement === r;
+    if (t && i && !s)
       if (this.cardExpiry.setError(!1), this.validationMessages.has("cardExpiry"))
         this.validationMessages.get("cardExpiry")?.setText(t);
       else {
-        const r = new E({
+        const l = new E({
           text: t
         });
-        this.validationMessages.set("cardExpiry", r), a.appendChild(r.getElement()), setTimeout(() => this.updateErrorContainerHeight(), 0);
+        this.validationMessages.set("cardExpiry", l), a.appendChild(l.getElement()), setTimeout(() => this.updateErrorContainerHeight(), 0);
       }
-    else {
-      this.cardExpiry.setError(!1);
-      const r = this.validationMessages.get("cardExpiry");
-      r && (r.getElement().remove(), this.validationMessages.delete("cardExpiry"), this.updateErrorContainerHeight());
+    else if (this.cardExpiry.setError(!1), s) {
+      const l = this.validationMessages.get("cardExpiry");
+      l && (l.getElement().remove(), this.validationMessages.delete("cardExpiry"), this.updateErrorContainerHeight());
+    } else if (!t) {
+      const l = this.validationMessages.get("cardExpiry");
+      l && (l.getElement().remove(), this.validationMessages.delete("cardExpiry"), this.updateErrorContainerHeight());
     }
     return this;
   }
@@ -1502,17 +1636,21 @@ class Dt extends h {
     this.cardNumber.setFocused(e);
     const r = this.getElement().querySelector(
       ".error-messages-container"
-    );
-    if (!e && a && !(t !== !1)) {
+    ), s = t !== !1;
+    if (e) {
+      const o = this.validationMessages.get("cardNumber");
+      return o && (o.getElement().remove(), this.validationMessages.delete("cardNumber"), this.updateErrorContainerHeight()), this;
+    }
+    if (!e && a && !s) {
       if (!this.validationMessages.has("cardNumber")) {
-        const n = new E({
+        const o = new E({
           text: i("validation.cardNumberInvalid")
         });
-        this.validationMessages.set("cardNumber", n), r.appendChild(n.getElement()), setTimeout(() => this.updateErrorContainerHeight(), 0);
+        this.validationMessages.set("cardNumber", o), r.appendChild(o.getElement()), setTimeout(() => this.updateErrorContainerHeight(), 0);
       }
     } else {
-      const n = this.validationMessages.get("cardNumber");
-      n && (n.getElement().remove(), this.validationMessages.delete("cardNumber"), this.updateErrorContainerHeight());
+      const o = this.validationMessages.get("cardNumber");
+      o && (o.getElement().remove(), this.validationMessages.delete("cardNumber"), this.updateErrorContainerHeight());
     }
     return this;
   }
@@ -1523,14 +1661,14 @@ class Dt extends h {
     );
     if (!e && a && !(t !== !1)) {
       if (!this.validationMessages.has("cardCvv")) {
-        const n = new E({
+        const o = new E({
           text: i("validation.cardSecurityFormat")
         });
-        this.validationMessages.set("cardCvv", n), r.appendChild(n.getElement()), setTimeout(() => this.updateErrorContainerHeight(), 0);
+        this.validationMessages.set("cardCvv", o), r.appendChild(o.getElement()), setTimeout(() => this.updateErrorContainerHeight(), 0);
       }
     } else {
-      const n = this.validationMessages.get("cardCvv");
-      n && (n.getElement().remove(), this.validationMessages.delete("cardCvv"), this.updateErrorContainerHeight());
+      const o = this.validationMessages.get("cardCvv");
+      o && (o.getElement().remove(), this.validationMessages.delete("cardCvv"), this.updateErrorContainerHeight());
     }
     return this;
   }
@@ -1555,8 +1693,26 @@ class Dt extends h {
         e.style.overflow = i, e.style.height = t, e.offsetHeight, e.style.height = a + 4 + "px", e.style.opacity = "1";
       }
   }
+  /**
+   * Focus a specific field in the card section
+   * @param field The field to focus: 'cardNumber', 'cardExpiry', or 'cardCvv'
+   */
+  focusField(e) {
+    switch (e) {
+      case "cardExpiry":
+        this.cardExpiry.focus();
+        break;
+    }
+  }
+  /**
+   * Focus implementation for the Focusable interface
+   * By default, focus on the card expiry field since it's a regular input we can directly control
+   */
+  focus() {
+    this.focusField("cardExpiry");
+  }
 }
-class Vt {
+class $t {
   input;
   constructor(e) {
     const {
@@ -1565,30 +1721,33 @@ class Vt {
       onBlur: a,
       error: r,
       errorMsg: s,
-      checkoutProfile: n,
+      checkoutProfile: o,
       translationFunc: l,
       autocomplete: c = "email"
     } = e;
-    this.input = new P({
+    this.input = new V({
       name: "email",
       label: l("email"),
-      error: r,
+      // Always hide error initially - we'll show it only on blur if needed
+      error: !1,
       errorMsg: s,
       styles: {
-        color: n.styles.textColor,
-        borderRadius: `${n.styles.borderRadius}px`,
-        fontSize: n.styles.fontSize,
-        fontFamily: n.styles.fontFamily
+        color: o.styles.textColor,
+        borderRadius: `${o.styles.borderRadius}px`,
+        fontSize: o.styles.fontSize,
+        fontFamily: o.styles.fontFamily
       },
       placeholder: l("email"),
       type: "email",
       value: t,
       autocomplete: c,
-      // Wrap the original onChange to apply trim before calling it
+      // Wrap the original onChange to apply trim and hide errors during typing
       onChange: (d) => {
-        this.trim(), i(d);
+        this.input.setError(!1), this.trim(), i(d);
       }
-    }), this.input.addEventListener("blur", a);
+    }), this.input.addEventListener("blur", (d) => {
+      r && this.input.setError(r, s), a(d);
+    });
   }
   getValue() {
     return this.input.getValue();
@@ -1601,7 +1760,7 @@ class Vt {
     return this.setValue(e), this;
   }
   setError(e, t) {
-    return this.input.setError(e, t), this;
+    return document.activeElement !== this.input.getElement().querySelector("input") ? this.input.setError(e, t) : this.input.setError(!1), this;
   }
   getElement() {
     return this.input.getElement();
@@ -1609,9 +1768,12 @@ class Vt {
   appendTo(e) {
     return this.input.appendTo(e), this;
   }
+  focus() {
+    this.input.focus();
+  }
 }
-const $t = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='101px'%20height='32'%20viewBox='0%200%20101%2032'%20preserveAspectRatio='xMinYMin%20meet'%3e%3cpath%20fill='%23003087'%20d='M%2012.237%202.8%20L%204.437%202.8%20C%203.937%202.8%203.437%203.2%203.337%203.7%20L%200.237%2023.7%20C%200.137%2024.1%200.437%2024.4%200.837%2024.4%20L%204.537%2024.4%20C%205.037%2024.4%205.537%2024%205.637%2023.5%20L%206.437%2018.1%20C%206.537%2017.6%206.937%2017.2%207.537%2017.2%20L%2010.037%2017.2%20C%2015.137%2017.2%2018.137%2014.7%2018.937%209.8%20C%2019.237%207.7%2018.937%206%2017.937%204.8%20C%2016.837%203.5%2014.837%202.8%2012.237%202.8%20Z%20M%2013.137%2010.1%20C%2012.737%2012.9%2010.537%2012.9%208.537%2012.9%20L%207.337%2012.9%20L%208.137%207.7%20C%208.137%207.4%208.437%207.2%208.737%207.2%20L%209.237%207.2%20C%2010.637%207.2%2011.937%207.2%2012.637%208%20C%2013.137%208.4%2013.337%209.1%2013.137%2010.1%20Z'/%3e%3cpath%20fill='%23003087'%20d='M%2035.437%2010%20L%2031.737%2010%20C%2031.437%2010%2031.137%2010.2%2031.137%2010.5%20L%2030.937%2011.5%20L%2030.637%2011.1%20C%2029.837%209.9%2028.037%209.5%2026.237%209.5%20C%2022.137%209.5%2018.637%2012.6%2017.937%2017%20C%2017.537%2019.2%2018.037%2021.3%2019.337%2022.7%20C%2020.437%2024%2022.137%2024.6%2024.037%2024.6%20C%2027.337%2024.6%2029.237%2022.5%2029.237%2022.5%20L%2029.037%2023.5%20C%2028.937%2023.9%2029.237%2024.3%2029.637%2024.3%20L%2033.037%2024.3%20C%2033.537%2024.3%2034.037%2023.9%2034.137%2023.4%20L%2036.137%2010.6%20C%2036.237%2010.4%2035.837%2010%2035.437%2010%20Z%20M%2030.337%2017.2%20C%2029.937%2019.3%2028.337%2020.8%2026.137%2020.8%20C%2025.037%2020.8%2024.237%2020.5%2023.637%2019.8%20C%2023.037%2019.1%2022.837%2018.2%2023.037%2017.2%20C%2023.337%2015.1%2025.137%2013.6%2027.237%2013.6%20C%2028.337%2013.6%2029.137%2014%2029.737%2014.6%20C%2030.237%2015.3%2030.437%2016.2%2030.337%2017.2%20Z'/%3e%3cpath%20fill='%23003087'%20d='M%2055.337%2010%20L%2051.637%2010%20C%2051.237%2010%2050.937%2010.2%2050.737%2010.5%20L%2045.537%2018.1%20L%2043.337%2010.8%20C%2043.237%2010.3%2042.737%2010%2042.337%2010%20L%2038.637%2010%20C%2038.237%2010%2037.837%2010.4%2038.037%2010.9%20L%2042.137%2023%20L%2038.237%2028.4%20C%2037.937%2028.8%2038.237%2029.4%2038.737%2029.4%20L%2042.437%2029.4%20C%2042.837%2029.4%2043.137%2029.2%2043.337%2028.9%20L%2055.837%2010.9%20C%2056.137%2010.6%2055.837%2010%2055.337%2010%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2067.737%202.8%20L%2059.937%202.8%20C%2059.437%202.8%2058.937%203.2%2058.837%203.7%20L%2055.737%2023.6%20C%2055.637%2024%2055.937%2024.3%2056.337%2024.3%20L%2060.337%2024.3%20C%2060.737%2024.3%2061.037%2024%2061.037%2023.7%20L%2061.937%2018%20C%2062.037%2017.5%2062.437%2017.1%2063.037%2017.1%20L%2065.537%2017.1%20C%2070.637%2017.1%2073.637%2014.6%2074.437%209.7%20C%2074.737%207.6%2074.437%205.9%2073.437%204.7%20C%2072.237%203.5%2070.337%202.8%2067.737%202.8%20Z%20M%2068.637%2010.1%20C%2068.237%2012.9%2066.037%2012.9%2064.037%2012.9%20L%2062.837%2012.9%20L%2063.637%207.7%20C%2063.637%207.4%2063.937%207.2%2064.237%207.2%20L%2064.737%207.2%20C%2066.137%207.2%2067.437%207.2%2068.137%208%20C%2068.637%208.4%2068.737%209.1%2068.637%2010.1%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2090.937%2010%20L%2087.237%2010%20C%2086.937%2010%2086.637%2010.2%2086.637%2010.5%20L%2086.437%2011.5%20L%2086.137%2011.1%20C%2085.337%209.9%2083.537%209.5%2081.737%209.5%20C%2077.637%209.5%2074.137%2012.6%2073.437%2017%20C%2073.037%2019.2%2073.537%2021.3%2074.837%2022.7%20C%2075.937%2024%2077.637%2024.6%2079.537%2024.6%20C%2082.837%2024.6%2084.737%2022.5%2084.737%2022.5%20L%2084.537%2023.5%20C%2084.437%2023.9%2084.737%2024.3%2085.137%2024.3%20L%2088.537%2024.3%20C%2089.037%2024.3%2089.537%2023.9%2089.637%2023.4%20L%2091.637%2010.6%20C%2091.637%2010.4%2091.337%2010%2090.937%2010%20Z%20M%2085.737%2017.2%20C%2085.337%2019.3%2083.737%2020.8%2081.537%2020.8%20C%2080.437%2020.8%2079.637%2020.5%2079.037%2019.8%20C%2078.437%2019.1%2078.237%2018.2%2078.437%2017.2%20C%2078.737%2015.1%2080.537%2013.6%2082.637%2013.6%20C%2083.737%2013.6%2084.537%2014%2085.137%2014.6%20C%2085.737%2015.3%2085.937%2016.2%2085.737%2017.2%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2095.337%203.3%20L%2092.137%2023.6%20C%2092.037%2024%2092.337%2024.3%2092.737%2024.3%20L%2095.937%2024.3%20C%2096.437%2024.3%2096.937%2023.9%2097.037%2023.4%20L%20100.237%203.5%20C%20100.337%203.1%20100.037%202.8%2099.637%202.8%20L%2096.037%202.8%20C%2095.637%202.8%2095.437%203%2095.337%203.3%20Z'/%3e%3c/svg%3e";
-class Rt extends h {
+const Rt = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='101px'%20height='32'%20viewBox='0%200%20101%2032'%20preserveAspectRatio='xMinYMin%20meet'%3e%3cpath%20fill='%23003087'%20d='M%2012.237%202.8%20L%204.437%202.8%20C%203.937%202.8%203.437%203.2%203.337%203.7%20L%200.237%2023.7%20C%200.137%2024.1%200.437%2024.4%200.837%2024.4%20L%204.537%2024.4%20C%205.037%2024.4%205.537%2024%205.637%2023.5%20L%206.437%2018.1%20C%206.537%2017.6%206.937%2017.2%207.537%2017.2%20L%2010.037%2017.2%20C%2015.137%2017.2%2018.137%2014.7%2018.937%209.8%20C%2019.237%207.7%2018.937%206%2017.937%204.8%20C%2016.837%203.5%2014.837%202.8%2012.237%202.8%20Z%20M%2013.137%2010.1%20C%2012.737%2012.9%2010.537%2012.9%208.537%2012.9%20L%207.337%2012.9%20L%208.137%207.7%20C%208.137%207.4%208.437%207.2%208.737%207.2%20L%209.237%207.2%20C%2010.637%207.2%2011.937%207.2%2012.637%208%20C%2013.137%208.4%2013.337%209.1%2013.137%2010.1%20Z'/%3e%3cpath%20fill='%23003087'%20d='M%2035.437%2010%20L%2031.737%2010%20C%2031.437%2010%2031.137%2010.2%2031.137%2010.5%20L%2030.937%2011.5%20L%2030.637%2011.1%20C%2029.837%209.9%2028.037%209.5%2026.237%209.5%20C%2022.137%209.5%2018.637%2012.6%2017.937%2017%20C%2017.537%2019.2%2018.037%2021.3%2019.337%2022.7%20C%2020.437%2024%2022.137%2024.6%2024.037%2024.6%20C%2027.337%2024.6%2029.237%2022.5%2029.237%2022.5%20L%2029.037%2023.5%20C%2028.937%2023.9%2029.237%2024.3%2029.637%2024.3%20L%2033.037%2024.3%20C%2033.537%2024.3%2034.037%2023.9%2034.137%2023.4%20L%2036.137%2010.6%20C%2036.237%2010.4%2035.837%2010%2035.437%2010%20Z%20M%2030.337%2017.2%20C%2029.937%2019.3%2028.337%2020.8%2026.137%2020.8%20C%2025.037%2020.8%2024.237%2020.5%2023.637%2019.8%20C%2023.037%2019.1%2022.837%2018.2%2023.037%2017.2%20C%2023.337%2015.1%2025.137%2013.6%2027.237%2013.6%20C%2028.337%2013.6%2029.137%2014%2029.737%2014.6%20C%2030.237%2015.3%2030.437%2016.2%2030.337%2017.2%20Z'/%3e%3cpath%20fill='%23003087'%20d='M%2055.337%2010%20L%2051.637%2010%20C%2051.237%2010%2050.937%2010.2%2050.737%2010.5%20L%2045.537%2018.1%20L%2043.337%2010.8%20C%2043.237%2010.3%2042.737%2010%2042.337%2010%20L%2038.637%2010%20C%2038.237%2010%2037.837%2010.4%2038.037%2010.9%20L%2042.137%2023%20L%2038.237%2028.4%20C%2037.937%2028.8%2038.237%2029.4%2038.737%2029.4%20L%2042.437%2029.4%20C%2042.837%2029.4%2043.137%2029.2%2043.337%2028.9%20L%2055.837%2010.9%20C%2056.137%2010.6%2055.837%2010%2055.337%2010%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2067.737%202.8%20L%2059.937%202.8%20C%2059.437%202.8%2058.937%203.2%2058.837%203.7%20L%2055.737%2023.6%20C%2055.637%2024%2055.937%2024.3%2056.337%2024.3%20L%2060.337%2024.3%20C%2060.737%2024.3%2061.037%2024%2061.037%2023.7%20L%2061.937%2018%20C%2062.037%2017.5%2062.437%2017.1%2063.037%2017.1%20L%2065.537%2017.1%20C%2070.637%2017.1%2073.637%2014.6%2074.437%209.7%20C%2074.737%207.6%2074.437%205.9%2073.437%204.7%20C%2072.237%203.5%2070.337%202.8%2067.737%202.8%20Z%20M%2068.637%2010.1%20C%2068.237%2012.9%2066.037%2012.9%2064.037%2012.9%20L%2062.837%2012.9%20L%2063.637%207.7%20C%2063.637%207.4%2063.937%207.2%2064.237%207.2%20L%2064.737%207.2%20C%2066.137%207.2%2067.437%207.2%2068.137%208%20C%2068.637%208.4%2068.737%209.1%2068.637%2010.1%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2090.937%2010%20L%2087.237%2010%20C%2086.937%2010%2086.637%2010.2%2086.637%2010.5%20L%2086.437%2011.5%20L%2086.137%2011.1%20C%2085.337%209.9%2083.537%209.5%2081.737%209.5%20C%2077.637%209.5%2074.137%2012.6%2073.437%2017%20C%2073.037%2019.2%2073.537%2021.3%2074.837%2022.7%20C%2075.937%2024%2077.637%2024.6%2079.537%2024.6%20C%2082.837%2024.6%2084.737%2022.5%2084.737%2022.5%20L%2084.537%2023.5%20C%2084.437%2023.9%2084.737%2024.3%2085.137%2024.3%20L%2088.537%2024.3%20C%2089.037%2024.3%2089.537%2023.9%2089.637%2023.4%20L%2091.637%2010.6%20C%2091.637%2010.4%2091.337%2010%2090.937%2010%20Z%20M%2085.737%2017.2%20C%2085.337%2019.3%2083.737%2020.8%2081.537%2020.8%20C%2080.437%2020.8%2079.637%2020.5%2079.037%2019.8%20C%2078.437%2019.1%2078.237%2018.2%2078.437%2017.2%20C%2078.737%2015.1%2080.537%2013.6%2082.637%2013.6%20C%2083.737%2013.6%2084.537%2014%2085.137%2014.6%20C%2085.737%2015.3%2085.937%2016.2%2085.737%2017.2%20Z'/%3e%3cpath%20fill='%23009cde'%20d='M%2095.337%203.3%20L%2092.137%2023.6%20C%2092.037%2024%2092.337%2024.3%2092.737%2024.3%20L%2095.937%2024.3%20C%2096.437%2024.3%2096.937%2023.9%2097.037%2023.4%20L%20100.237%203.5%20C%20100.337%203.1%20100.037%202.8%2099.637%202.8%20L%2096.037%202.8%20C%2095.637%202.8%2095.437%203%2095.337%203.3%20Z'/%3e%3c/svg%3e";
+class Bt extends h {
   formData;
   onSubmit;
   isSubmitting = !1;
@@ -1622,7 +1784,7 @@ class Rt extends h {
     const a = document.createElement("div");
     a.className = "paypal-icon-container";
     const r = document.createElement("img");
-    r.src = $t, r.style.width = "69px", r.style.height = "22px", r.style.maxWidth = "100%", r.style.display = "block", r.style.height = "auto", a.appendChild(r), this.getElement().appendChild(a), i && this.getElement().addEventListener("click", () => this.handleSubmit());
+    r.src = Rt, r.style.width = "69px", r.style.height = "22px", r.style.maxWidth = "100%", r.style.display = "block", r.style.height = "auto", a.appendChild(r), this.getElement().appendChild(a), i && this.getElement().addEventListener("click", () => this.handleSubmit());
   }
   async handleSubmit() {
     if (!(!this.onSubmit || this.isSubmitting)) {
@@ -1643,7 +1805,7 @@ class Rt extends h {
     return this.isSubmitting = e, this.getElement().style.opacity = e ? "0.7" : "1", this;
   }
 }
-class Bt extends h {
+class Ht extends h {
   paymentMethods;
   constructor(e) {
     const {
@@ -1657,26 +1819,24 @@ class Bt extends h {
       return;
     }
     if (r === void 0) {
-      console.log(
-        "[PaymentMethods] No supportedPaymentMethods provided, hiding payment methods"
-      ), this.getElement().style.display = "none";
+      this.getElement().style.display = "none";
       return;
     }
     const s = Object.entries(
       t.additionalPaymentMethods
-    ).filter(([n, l]) => {
-      const c = l.enabled, d = r ? r[n] === !0 : !0;
+    ).filter(([o, l]) => {
+      const c = l.enabled, d = r ? r[o] === !0 : !0;
       return c && d;
-    }).sort((n, l) => n[1].order - l[1].order);
+    }).sort((o, l) => o[1].order - l[1].order);
     if (s.length === 0) {
       this.getElement().style.display = "none";
       return;
     }
-    for (const [n] of s)
-      switch (n) {
+    for (const [o] of s)
+      switch (o) {
         case "paypal": {
           if (a) {
-            const l = new Rt({
+            const l = new Bt({
               checkoutProfile: t,
               formData: i,
               onSubmit: a
@@ -1698,7 +1858,7 @@ class Bt extends h {
         //   break;
         default:
           console.warn(
-            `[PaymentMethods] Unsupported payment method: ${n}`
+            `[PaymentMethods] Unsupported payment method: ${o}`
           );
           break;
       }
@@ -1712,7 +1872,7 @@ class Bt extends h {
   }
 }
 const Ot = 17;
-class Ht extends h {
+class qt extends h {
   styles;
   isHovered = !1;
   constructor(e) {
@@ -1739,7 +1899,7 @@ class Kt {
   button;
   constructor(e) {
     const { disabled: t, checkoutProfile: i, translationFunc: a } = e;
-    this.button = new Ht({
+    this.button = new qt({
       text: a(
         `buttonTexts.${i?.layout.actionButton.translationKey}`
       ),
@@ -1767,7 +1927,7 @@ class Kt {
   }
 }
 const jt = "https://test-htp.tokenex.com/Iframe/Iframe-v3.min.js", Ut = "https://htp.tokenex.com/iframe/iframe-v3.min.js";
-class qt extends h {
+class _t extends h {
   options;
   isSubmitting = !1;
   scriptCleanup;
@@ -1781,17 +1941,23 @@ class qt extends h {
   paymentMethods;
   spinner;
   alert;
+  // Focus management
+  focusManager = new wt();
+  // Event handler references
+  emailFocusHandler;
+  cardExpiryFocusHandler;
+  nameFocusHandler;
   // factories
   formManager = X();
   checkoutProfile;
-  translation = z();
+  translation = P();
   iframeHook;
   constructor(e) {
     super("form", ["form-container"]), this.options = e, this.checkoutProfile = _({
       apiKey: e.apiKey,
       profileId: e.profileId,
       environment: e.environment
-    }), e.locale && this.translation.setLocale(e.locale), this.getElement().addEventListener("submit", this.handleSubmit), this.getElement().addEventListener("keydown", this.handleKeyDown), this.formManager.subscribe(this.handleFormStateChange), this.checkoutProfile.subscribe(this.handleProfileStateChange), this.initializeForm(), this.appendTo(e.container);
+    }), e.locale && this.translation.setLocale(e.locale), this.localTouchedFields = /* @__PURE__ */ new Set(), this.getElement().addEventListener("submit", this.handleSubmit), this.getElement().addEventListener("keydown", this.handleKeyDown), this.formManager.subscribe(this.handleFormStateChange), this.checkoutProfile.subscribe(this.handleProfileStateChange), this.initializeForm(), this.appendTo(e.container);
   }
   _getFormStateData() {
     const e = this.formManager.getFormState();
@@ -1806,22 +1972,25 @@ class qt extends h {
     };
   }
   handleFormStateChange = () => {
-    this.updateFormUI();
+    const { formData: e, errors: t, touched: i } = this.formManager.getFormState(), a = this.iframeHook?.getState() || {};
+    Object.keys(i).forEach((r) => {
+      i[r] && this.localTouchedFields.add(r);
+    }), this.focusManager.handleStateUpdate(e, t, i, a), this.updateFormUI();
   };
   handleProfileStateChange = (e) => {
     if (!e.isLoading)
       if (e.checkoutProfile)
         try {
-          if (console.log("[Form] Profile loaded, starting render."), e.checkoutProfile.styles?.fontFamily)
+          if (e.checkoutProfile.styles?.fontFamily)
             try {
-              const { cleanup: t } = St({
+              const { cleanup: t } = xt({
                 fontFamily: e.checkoutProfile.styles.fontFamily
               });
               this.fontCleanup = t;
             } catch (t) {
               console.error("Error loading Google Font:", t);
             }
-          this.renderFormComponents(), console.log("[Form] Initializing TokenEx iframe..."), this.initializeTokenExIframe().catch((t) => {
+          this.renderFormComponents(), this.initializeTokenExIframe().catch((t) => {
             console.error("Error initializing TokenEx iframe:", t);
           });
         } catch (t) {
@@ -1835,7 +2004,6 @@ class qt extends h {
     e.fontFamily && (this.getElement().style.fontFamily = e.fontFamily);
   }
   initializeTokenExIframe = async () => {
-    console.log("[Form] initializeTokenExIframe started.");
     const e = this.checkoutProfile.getState();
     if (!e.checkoutProfile) {
       console.error("Cannot initialize iframe: No checkout profile available");
@@ -1843,15 +2011,13 @@ class qt extends h {
     }
     if (!this.iframeHook)
       try {
-        if (await this.tokenExScriptPromise, console.log(
-          "[Form] TokenEx script is loaded, proceeding with iframe initialization."
-        ), !("TokenEx" in globalThis)) {
+        if (await this.tokenExScriptPromise, !("TokenEx" in globalThis)) {
           console.error(
             "[Form] TokenEx script loaded but TokenEx is not available in globalThis."
           );
           return;
         }
-        const { inputStyles: t, formContainerStyle: i } = wt(
+        const { inputStyles: t, formContainerStyle: i } = Mt(
           e.checkoutProfile
         );
         this.applyFormContainerStyles(i);
@@ -1871,7 +2037,7 @@ class qt extends h {
           },
           environment: this.options.environment,
           paymentId: this.options.paymentId || ""
-        }), this.iframeHook?.subscribe(this.handleIframeStateChange), console.log("[Form] Calling iframeHook.initialize()."), await this.iframeHook?.initialize(), console.log("[Form] iframeHook.initialize() finished.");
+        }), this.iframeHook?.subscribe(this.handleIframeStateChange), await this.iframeHook?.initialize();
       } catch (t) {
         throw console.error("Failed to initialize payment form:", t), t;
       }
@@ -1881,10 +2047,10 @@ class qt extends h {
   isCvvTouched = !1;
   handleIframeStateChange = (e) => {
     if (e.iframeConfig?.supportedPaymentMethods && this.paymentMethods) {
-      const t = this.checkoutProfile.getState();
-      t.checkoutProfile && (this.element.removeChild(this.paymentMethods.getElement()), this.createPaymentMethods(t.checkoutProfile, !0));
+      const r = this.checkoutProfile.getState();
+      r.checkoutProfile && (this.element.removeChild(this.paymentMethods.getElement()), this.createPaymentMethods(r.checkoutProfile, !0));
     }
-    this.cardSection && (e.isFocused && (this.isCcTouched = !0), e.isCvvFocused && (this.isCvvTouched = !0), this.cardSection.updateCardNumberValidation(
+    this.cardSection && (e.isFocused && (this.isCcTouched = !0, this.handleFieldFocus("cardNumber")), e.isCvvFocused && (this.isCvvTouched = !0, this.handleFieldFocus("cardCvv")), this.cardSection.updateCardNumberValidation(
       e.isFocused,
       e.isCcValid,
       this.translation.t,
@@ -1895,6 +2061,8 @@ class qt extends h {
       this.translation.t,
       this.isCvvTouched
     ), this.cardSection.updateCardType(e.possibleCardType), this.cardSection.setLoading(e.loadingIframe)), e.loadingIframe || this.setLoadingState(!1), this.submitButton && this.submitButton.setDisabled(this.isFormDisabled());
+    const { formData: t, errors: i, touched: a } = this.formManager.getFormState();
+    this.focusManager.handleStateUpdate(t, i, a, e);
   };
   createCardSection = (e) => {
     if (!this.cardSection)
@@ -1926,20 +2094,28 @@ class qt extends h {
           onChange: this.handleChange,
           onBlur: this.handleBlur,
           translationFunc: this.translation.t
+        });
+        const s = this.cardSection.getElement().querySelector('input[name="cardExpiry"]');
+        s && (this.cardExpiryFocusHandler = () => this.handleFieldFocus("cardExpiry"), s.addEventListener(
+          "focus",
+          this.cardExpiryFocusHandler
+        )), this.focusManager.registerField("cardExpiry", {
+          focus: () => this.cardSection?.focusField("cardExpiry")
+        }), this.focusManager.registerField("cardNumber", {
+          focus: () => this.iframeHook?.focusCardNumber()
+        }), this.focusManager.registerField("cardCvv", {
+          focus: () => this.iframeHook?.focusCvv()
         }), this.element.appendChild(this.cardSection.getElement());
       } catch (t) {
         console.error("Error creating card section:", t), this.setErrorMessage("Card section temporarily unavailable");
       }
   };
   initializeForm() {
-    console.log("[Form] initializeForm started."), this.setLoadingState(!0), this.options.errorMsg && this.setErrorMessage(this.options.errorMsg);
-    const e = this.options.environment === "test" ? jt : Ut;
-    console.log("[Form] Appending TokenEx script.");
-    const { cleanup: t, isLoaded: i } = Ft({
+    this.setLoadingState(!0), this.options.errorMsg && this.setErrorMessage(this.options.errorMsg);
+    const e = this.options.environment === "test" ? jt : Ut, { cleanup: t, isLoaded: i } = Ft({
       scriptSrc: e
     });
     this.scriptCleanup = t, this.tokenExScriptPromise = i, i.then(() => {
-      console.log("[Form] TokenEx script loaded successfully.");
     }).catch(() => {
       this.setLoadingState(!1), this.setErrorMessage(
         "Failed to load payment system. Please try again later."
@@ -1947,37 +2123,35 @@ class qt extends h {
     });
   }
   renderFormComponents() {
-    if (console.log("[Form] renderFormComponents started."), this.emailField) {
-      console.log("[Form] Components already rendered, skipping.");
+    if (this.emailField)
       return;
-    }
     const e = this.checkoutProfile.getState();
     if (!e.checkoutProfile) {
       this.setErrorMessage("Failed to load checkout configuration");
       return;
     }
     try {
-      console.log("[Form] Creating payment methods."), this.createPaymentMethods(e.checkoutProfile);
+      this.createPaymentMethods(e.checkoutProfile);
     } catch (t) {
       console.error("Failed to create payment methods:", t);
     }
     try {
-      console.log("[Form] Creating email field."), this.createEmailField(e.checkoutProfile);
+      this.createEmailField(e.checkoutProfile);
     } catch (t) {
       console.error("Failed to create email field:", t);
     }
     try {
-      console.log("[Form] Creating card section."), this.createCardSection(e.checkoutProfile);
+      this.createCardSection(e.checkoutProfile);
     } catch (t) {
       console.error("Failed to create card section:", t);
     }
     try {
-      console.log("[Form] Creating cardholder section."), this.createCardholderSection(e.checkoutProfile);
+      this.createCardholderSection(e.checkoutProfile);
     } catch (t) {
       console.error("Failed to create cardholder section:", t);
     }
     try {
-      console.log("[Form] Creating submit button."), this.createSubmitButton(e.checkoutProfile);
+      this.createSubmitButton(e.checkoutProfile);
     } catch (t) {
       console.error("Failed to create submit button:", t);
     }
@@ -1987,7 +2161,7 @@ class qt extends h {
       if (!e?.additionalPaymentMethods)
         return;
       const i = this.iframeHook?.getState().iframeConfig?.supportedPaymentMethods, { formData: a } = this._getFormStateData();
-      this.paymentMethods = new Bt({
+      this.paymentMethods = new Ht({
         checkoutProfile: e,
         formData: a,
         supportedPaymentMethods: i,
@@ -2005,7 +2179,7 @@ class qt extends h {
   createEmailField(e) {
     try {
       const { formData: t, errors: i, touched: a } = this._getFormStateData();
-      this.emailField = new Vt({
+      this.emailField = new $t({
         value: t.email,
         onChange: this.handleChange,
         onBlur: this.handleBlur,
@@ -2013,7 +2187,7 @@ class qt extends h {
         errorMsg: i.email,
         checkoutProfile: e,
         translationFunc: this.translation.t
-      }), this.element.appendChild(this.emailField.getElement());
+      }), this.emailFocusHandler = () => this.handleFieldFocus("email"), this.emailField.getElement().addEventListener("focus", this.emailFocusHandler, !0), this.focusManager.registerField("email", this.emailField), this.element.appendChild(this.emailField.getElement());
     } catch (t) {
       throw console.error("Error creating email field:", t), t;
     }
@@ -2029,7 +2203,9 @@ class qt extends h {
         errorMsg: i.name,
         checkoutProfile: e,
         translationFunc: this.translation.t
-      }), this.element.appendChild(this.cardholderSection.getElement());
+      });
+      const r = this.cardholderSection.getElement().querySelector('input[name="name"]');
+      r && (this.nameFocusHandler = () => this.handleFieldFocus("name"), r.addEventListener("focus", this.nameFocusHandler)), this.focusManager.registerField("name", this.cardholderSection), this.element.appendChild(this.cardholderSection.getElement());
     } catch (t) {
       throw console.error("Error creating cardholder section:", t), t;
     }
@@ -2045,13 +2221,24 @@ class qt extends h {
       throw console.error("Error creating submit button:", t), t;
     }
   }
+  // Track locally touched fields to avoid redundant state checks
+  localTouchedFields = /* @__PURE__ */ new Set();
   handleChange = (e) => {
-    const t = e.target, { name: i, value: a } = t;
-    this.formManager.handleChange(i, a);
+    const t = e.target, { name: i, value: a } = t, r = i;
+    this.formManager.handleChange(r, a), this.localTouchedFields.has(r) || (this.localTouchedFields.add(r), this.formManager.handleBlur(r, a));
+    const { formData: s, errors: o, touched: l } = this.formManager.getFormState(), c = this.iframeHook?.getState() || {};
+    this.focusManager.handleStateUpdate(s, o, l, c);
   };
   handleBlur = (e) => {
-    const t = e.target, { name: i, value: a } = t;
-    this.formManager.handleBlur(i, a);
+    const t = e.target, { name: i, value: a } = t, r = i;
+    this.localTouchedFields.add(r), this.formManager.handleBlur(r, a);
+    const { formData: s, errors: o, touched: l } = this.formManager.getFormState(), c = this.iframeHook?.getState() || {};
+    l[r] || this.focusManager.handleStateUpdate(
+      s,
+      o,
+      l,
+      c
+    );
   };
   updateFormUI() {
     const e = this.formManager.getFormState();
@@ -2086,10 +2273,10 @@ class qt extends h {
       this.options.onLoadingStateChange(e);
       return;
     }
-    e ? (this.hideSpinner(), this.spinner = new V(), this.element.appendChild(this.spinner.getElement())) : this.hideSpinner();
+    e ? (this.hideSpinner(), this.spinner = new $(), this.element.appendChild(this.spinner.getElement())) : this.hideSpinner();
   }
   showSpinner(e) {
-    this.hideSpinner(), this.spinner = new V({ text: e }), this.element.appendChild(this.spinner.getElement());
+    this.hideSpinner(), this.spinner = new $({ text: e }), this.element.appendChild(this.spinner.getElement());
   }
   hideSpinner() {
     this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0);
@@ -2143,13 +2330,34 @@ class qt extends h {
    * Clean up resources when the form is destroyed
    */
   destroy() {
-    this.scriptCleanup && (this.scriptCleanup(), this.scriptCleanup = void 0), this.fontCleanup && (this.fontCleanup(), this.fontCleanup = void 0), this.iframeHook && this.iframeHook.cleanup(), this.getElement().removeEventListener("submit", this.handleSubmit), this.getElement().removeEventListener("keydown", this.handleKeyDown), this.getElement().removeEventListener("keydown", this.handleKeyDown), this.emailField && (this.emailField.getElement().remove(), this.emailField = void 0), this.cardSection && (this.cardSection.getElement().remove(), this.cardSection = void 0), this.cardholderSection && (this.cardholderSection.getElement().remove(), this.cardholderSection = void 0), this.submitButton && (this.submitButton.getElement().remove(), this.submitButton = void 0), this.paymentMethods && (this.paymentMethods.getElement().remove(), this.paymentMethods = void 0), this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0), this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.getElement().remove();
+    if (this.scriptCleanup && (this.scriptCleanup(), this.scriptCleanup = void 0), this.fontCleanup && (this.fontCleanup(), this.fontCleanup = void 0), this.iframeHook && this.iframeHook.cleanup(), this.localTouchedFields.clear(), this.getElement().removeEventListener("submit", this.handleSubmit), this.getElement().removeEventListener("keydown", this.handleKeyDown), this.getElement().removeEventListener("keydown", this.handleKeyDown), this.emailField) {
+      const e = this.emailField.getElement().querySelector('input[name="email"]');
+      e && this.emailFocusHandler && e.removeEventListener("focus", this.emailFocusHandler), this.emailField.getElement().remove(), this.emailField = void 0;
+    }
+    if (this.cardSection) {
+      const e = this.cardSection.getElement().querySelector('input[name="cardExpiry"]');
+      e && this.cardExpiryFocusHandler && e.removeEventListener(
+        "focus",
+        this.cardExpiryFocusHandler
+      ), this.cardSection.getElement().remove(), this.cardSection = void 0;
+    }
+    if (this.cardholderSection) {
+      const e = this.cardholderSection.getElement().querySelector('input[name="name"]');
+      e && this.nameFocusHandler && e.removeEventListener("focus", this.nameFocusHandler), this.cardholderSection.getElement().remove(), this.cardholderSection = void 0;
+    }
+    this.submitButton && (this.submitButton.getElement().remove(), this.submitButton = void 0), this.paymentMethods && (this.paymentMethods.getElement().remove(), this.paymentMethods = void 0), this.spinner && (this.spinner.getElement().remove(), this.spinner = void 0), this.alert && (this.alert.getElement().remove(), this.alert = void 0), this.getElement().remove();
   }
   handleKeyDown = (e) => {
     e.key === "Enter" && !this.isFormDisabled() && (e.target instanceof HTMLTextAreaElement || (e.preventDefault(), this.handleSubmit(e)));
   };
+  /**
+   * Handle focus events on form fields and update focus manager
+   */
+  handleFieldFocus = (e) => {
+    this.focusManager.handleFieldFocus(e);
+  };
 }
-class _t {
+class Gt {
   container = null;
   options;
   onSubmit;
@@ -2164,7 +2372,7 @@ class _t {
     this.container && this.form && (this.form && e.errorMsg && !this.options.disableErrorMessages ? this.form.setErrorMessage(e.errorMsg) : this.renderForm(e.errorMsg));
   }
   renderForm(e) {
-    this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new qt({
+    this.container && (this.form && (this.form.destroy(), this.form = null), this.form = new _t({
       apiKey: this.options.apiKey,
       onSubmit: this.onSubmit,
       locale: this.options.locale,
@@ -2180,7 +2388,7 @@ class _t {
     this.form && (this.form.destroy(), this.form = null);
   }
 }
-class Gt {
+class Yt {
   state;
   listeners = /* @__PURE__ */ new Set();
   constructor(e) {
@@ -2202,20 +2410,20 @@ class Gt {
     this.listeners.forEach((t) => t(e));
   }
 }
-const Yt = "en";
-class Zt {
+const Zt = "en";
+class Jt {
   config;
   apiService;
   formManager;
   stateManager;
   constructor(e) {
-    this.config = this.validateConfig(e), this.apiService = new H(
+    this.config = this.validateConfig(e), this.apiService = new O(
       this.config.apiKey,
       this.config.environment
-    ), this.stateManager = new Gt({
+    ), this.stateManager = new Yt({
       mounted: !1,
       form: null
-    }), this.formManager = new _t(
+    }), this.formManager = new Gt(
       {
         locale: this.config.locale,
         apiKey: this.config.apiKey,
@@ -2240,7 +2448,7 @@ class Zt {
       paymentId: e.paymentId,
       returnUrl: e.returnUrl,
       environment: e.environment,
-      locale: e.locale || Yt,
+      locale: e.locale || Zt,
       disableErrorMessages: e.disableErrorMessages ?? !1,
       manualActionHandling: e.manualActionHandling ?? !1,
       callbacks: {
@@ -2303,14 +2511,14 @@ class Zt {
     t && this.formManager.update({ errorMsg: e.details?.message });
   }
 }
-typeof globalThis < "u" && (globalThis.OdusCheckout = Zt);
+typeof globalThis < "u" && (globalThis.OdusCheckout = Jt);
 export {
-  Zt as OdusCheckout,
+  Jt as OdusCheckout,
   ce as deLocale,
   ve as enLocale,
-  Me as esLocale,
-  Ve as frLocale,
-  qe as itLocale,
+  Le as esLocale,
+  De as frLocale,
+  Ue as itLocale,
   et as plLocale,
   ct as ptLocale,
   vt as trLocale