@odus/checkout 0.12.0 → 0.13.0

package/dist/checkout.es.js

@@ -152,13 +152,13 @@ class K {
     return this.events.get(e)?.size || 0;
   }
 }
-const j = new K();
-class q {
+const q = new K();
+class j {
   state;
   initialState;
   eventBus;
   stateChangedEvent = "state-changed";
-  constructor(e, t = j) {
+  constructor(e, t = q) {
     this.initialState = { ...e }, this.state = { ...e }, this.eventBus = t;
   }
   /**
@@ -199,7 +199,7 @@ class q {
   }
 }
 function T(o) {
-  return new q(o);
+  return new j(o);
 }
 function U({
   apiKey: o,
@@ -468,7 +468,7 @@ const V = {
     const h = e.getState();
     let d = c;
     l in V && (d = V[l](c));
-    const f = {
+    const p = {
       ...h.formData,
       [l]: d
     }, g = { ...h.errors };
@@ -477,16 +477,16 @@ const V = {
       F ? g[l] = F : delete g[l];
     }
     e.setState({
-      formData: f,
+      formData: p,
       errors: g,
-      isValid: a(f)
+      isValid: a(p)
     });
   }, s = (l, c) => {
     const h = e.getState(), d = {
       ...h.touched,
       [l]: !0
-    }, f = t(l, c), g = { ...h.errors };
-    f ? g[l] = f : delete g[l], e.setState({
+    }, p = t(l, c), g = { ...h.errors };
+    p ? g[l] = p : delete g[l], e.setState({
       touched: d,
       errors: g
     });
@@ -545,25 +545,25 @@ function Q({
   let n = null;
   const l = async () => {
     try {
-      const p = await X({
+      const f = await X({
         props: {
           payment: r
         },
         apiKey: o,
         environment: a
       });
-      p && (s.setState({
+      f && (s.setState({
         iframeConfig: {
-          ...p,
+          ...f,
           origin: globalThis.location.origin
         }
       }), h());
-    } catch (p) {
-      throw console.error("Failed to generate iframe config:", p), p;
+    } catch (f) {
+      throw console.error("Failed to generate iframe config:", f), f;
     }
   }, c = () => {
-    const p = s.getState();
-    if (!p.iframeConfig || !e) {
+    const f = s.getState();
+    if (!f.iframeConfig || !e) {
       console.error(
         "[IframeConfig] Missing iframe config or checkout profile."
       );
@@ -573,12 +573,12 @@ function Q({
     if (!b || !k)
       throw new Error("Card elements not found in DOM");
     n = new globalThis.TokenEx.Iframe("card-element", {
-      ...p.iframeConfig,
+      ...f.iframeConfig,
       placeholder: "1234 1234 1234 1234",
       cvvPlaceholder: "CVC",
       cvv: !0,
       cvvContainerID: "card-cvv-element",
-      enableValidateOnBlur: !1,
+      enableValidateOnBlur: !0,
       enableValidateOnKeyUp: !0,
       enableValidateOnCvvKeyUp: !0,
       enablePrettyFormat: !0,
@@ -642,32 +642,32 @@ function Q({
     }
   }, d = async () => {
     o && await l();
-  }, f = () => {
+  }, p = () => {
     n && (n.remove(), n = null);
-  }, g = async (p) => {
+  }, g = async (f) => {
     n && (n.on("tokenize", async function(b) {
-      await p(b);
+      await f(b);
     }), n.tokenize());
   }, F = () => {
     if (n)
       try {
         n.focus();
-      } catch (p) {
-        console.error("Failed to focus card number iframe:", p);
+      } catch (f) {
+        console.error("Failed to focus card number iframe:", f);
       }
   }, I = () => {
     if (n)
       try {
         n.cvvFocus();
-      } catch (p) {
-        console.error("Failed to focus CVV iframe:", p);
+      } catch (f) {
+        console.error("Failed to focus CVV iframe:", f);
       }
   };
   return {
     getState: s.getState.bind(s),
     subscribe: s.subscribe.bind(s),
     tokenize: g,
-    cleanup: f,
+    cleanup: p,
     initialize: d,
     focusCardNumber: F,
     focusCvv: I
@@ -713,7 +713,7 @@ const ee = "E-Mail", te = "Name des/der Karteninhaber/in", ie = "Kartendaten", a
   "pay-with-card": "ou payez avec une carte",
   buttonTexts: ze,
   validation: Ve
-}, Ae = "Email", $e = "Nome del titolare della carta", Re = "Informazioni sulla carta", Be = "Nome completo sulla carta", He = "MM / AA", Oe = "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", "invalid-checkout": "Impossibile inizializzare il checkout" }, qe = {
+}, Ae = "Email", $e = "Nome del titolare della carta", Re = "Informazioni sulla carta", Be = "Nome completo sulla carta", He = "MM / AA", Oe = "Non chiudere la finestra", Ke = { pay: "PAGA", submit: "INVIA", getPlan: "OTTIENI IL MIO PIANO", donate: "DONARE", book: "PRENOTA ORA", order: "ORDINA ORA" }, qe = { 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", "invalid-checkout": "Impossibile inizializzare il checkout" }, je = {
   email: Ae,
   cardholderNameLabel: $e,
   cardInformation: Re,
@@ -722,7 +722,7 @@ const ee = "E-Mail", te = "Name des/der Karteninhaber/in", ie = "Kartendaten", a
   loading: Oe,
   "pay-with-card": "o paga con carta",
   buttonTexts: Ke,
-  validation: je
+  validation: qe
 }, Ue = "Adres e-mail", _e = "Imię i nazwisko posiadacza karty", Ge = "Informacje o karcie", Ye = "Imię i nazwisko na karcie", Ze = "MM / RR", Je = "Proszę nie zamykać tego okna", We = { pay: "ZAPŁAĆ", submit: "WYŚLIJ", getPlan: "POBIERZ MÓJ PLAN", donate: "PRZEKAŻ DAROWIZNĘ", book: "ZAREZERWUJ TERAZ", order: "ZAMÓW TERAZ" }, Xe = { 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", "invalid-checkout": "Nie udało się zainicjować procesu płatności" }, Qe = {
   email: Ue,
   cardholderNameLabel: _e,
@@ -761,7 +761,7 @@ const ee = "E-Mail", te = "Name des/der Karteninhaber/in", ie = "Kartendaten", a
   pl: Qe,
   pt: lt,
   tr: yt,
-  it: qe
+  it: je
   // Add other locales here
 };
 class vt {
@@ -999,6 +999,23 @@ class Ft {
   focusCardNumberField() {
     this.currentFocusIndex = 0, this.applyFocusToCurrentField();
   }
+  /**
+   * Focus a specific field by name
+   * Used for manual focus control (e.g., Tab key navigation)
+   */
+  focusField(e) {
+    const t = this.focusSequence.findIndex(
+      (i) => i === e
+    );
+    if (t >= 0)
+      this.currentFocusIndex = t, this.applyFocusToCurrentField();
+    else if (this.fields[e]) {
+      const i = this.fields[e];
+      i && setTimeout(() => {
+        i.focus();
+      }, 0);
+    }
+  }
 }
 const L = (o) => Object.entries(o).map(([e, t]) => {
   const i = e.replace(/([A-Z])/g, "-$1").toLowerCase(), a = typeof t == "number" ? `${t}px` : t;
@@ -1307,12 +1324,6 @@ class Mt extends m {
     const r = u.createDiv(["skeleton-field"]), s = u.createDiv(["skeleton", "skeleton-label"]), n = u.createDiv(["skeleton", "skeleton-input"]);
     return r.appendChild(s), r.appendChild(n), e.appendChild(t), e.appendChild(r), e;
   }
-  createSubmitButtonSkeleton() {
-    return u.createDiv([
-      "skeleton",
-      "skeleton-submit-button"
-    ]);
-  }
 }
 class Lt extends m {
   titleElement;
@@ -1575,11 +1586,11 @@ class $t extends m {
       isCvvTouched: c,
       cardType: h,
       cardExpiry: d,
-      cardExpiryError: f,
+      cardExpiryError: p,
       cardExpiryTouched: g,
       onChange: F,
       onBlur: I,
-      translationFunc: p,
+      translationFunc: f,
       cardExpiryAutocomplete: b = "cc-exp"
     } = e, k = document.createElement("div");
     this.cardNumber = new At({
@@ -1588,7 +1599,7 @@ class $t extends m {
         fontSize: t.styles.fontSize,
         borderRadius: t.styles.borderRadius
       },
-      label: p("cardInformation"),
+      label: f("cardInformation"),
       isLoading: i,
       isFocused: a,
       cardType: h
@@ -1597,10 +1608,10 @@ class $t extends m {
     v.className = "card-details", this.cardExpiry = new z({
       name: "cardExpiry",
       type: "tel",
-      placeholder: p("cardExpiry"),
+      placeholder: f("cardExpiry"),
       // Always hide error initially
       error: !1,
-      errorMsg: f,
+      errorMsg: p,
       value: d,
       autocomplete: b,
       onChange: (y) => {
@@ -1615,7 +1626,7 @@ class $t extends m {
         fontFamily: t.styles.fontFamily
       }
     }), this.cardExpiry.addEventListener("blur", (y) => {
-      this.trimCardExpiry(), f && g && this.cardExpiry.setError(!0, f), I(y);
+      this.trimCardExpiry(), p && g && this.cardExpiry.setError(!0, p), I(y);
     }), this.cardExpiry.addEventListener("keydown", (y) => {
       const x = y, R = [
         "Backspace",
@@ -1639,19 +1650,19 @@ class $t extends m {
     const E = document.createElement("div");
     if (E.className = "error-messages-container", E.style.width = "100%", E.style.transition = "height 0.3s ease-in-out, opacity 0.3s ease-in-out", E.style.overflow = "hidden", E.style.height = "0px", E.style.opacity = "0", this.getElement().appendChild(k), this.getElement().appendChild(E), (a || l) && !s) {
       const y = new C({
-        text: p("validation.cardNumberInvalid")
+        text: f("validation.cardNumberInvalid")
       });
       this.validationMessages.set("cardNumber", y), E.appendChild(y.getElement());
     }
     if ((r || c) && !n) {
       const y = new C({
-        text: p("validation.cardSecurityFormat")
+        text: f("validation.cardSecurityFormat")
       });
       this.validationMessages.set("cardCvv", y), E.appendChild(y.getElement());
     }
-    if (f && g) {
+    if (p && g) {
       const y = new C({
-        text: f
+        text: p
       });
       this.validationMessages.set("cardExpiry", y), E.appendChild(y.getElement());
     }
@@ -1666,16 +1677,16 @@ class $t extends m {
     if (a.test(r)) {
       const d = r.match(a);
       if (d && d.length === 3) {
-        const f = d[1], g = d[2].slice(2);
-        r = `${f} / ${g}`;
+        const p = d[1], g = d[2].slice(2);
+        r = `${p} / ${g}`;
       }
     }
     const s = /^(\d{2})\/(\d{2})$/;
     if (s.test(r)) {
       const d = r.match(s);
       if (d && d.length === 3) {
-        const f = d[1], g = d[2];
-        r = `${f} / ${g}`;
+        const p = d[1], g = d[2];
+        r = `${p} / ${g}`;
       }
     }
     this.cardExpiry.setValue(r);
@@ -1810,34 +1821,38 @@ class Rt {
       value: t,
       onChange: i,
       onBlur: a,
-      error: r,
-      errorMsg: s,
-      checkoutProfile: n,
-      translationFunc: l,
-      autocomplete: c = "email"
+      onTab: r,
+      error: s,
+      errorMsg: n,
+      checkoutProfile: l,
+      translationFunc: c,
+      autocomplete: h = "email"
     } = e;
     this.input = new z({
       name: "email",
-      label: l("email"),
+      label: c("email"),
       // Always hide error initially - we'll show it only on blur if needed
       error: !1,
-      errorMsg: s,
+      errorMsg: n,
       styles: {
-        color: n.styles.textColor,
-        borderRadius: `${n.styles.borderRadius}px`,
-        fontSize: n.styles.fontSize,
-        fontFamily: n.styles.fontFamily
+        color: l.styles.textColor,
+        borderRadius: `${l.styles.borderRadius}px`,
+        fontSize: l.styles.fontSize,
+        fontFamily: l.styles.fontFamily
       },
-      placeholder: l("email"),
+      placeholder: c("email"),
       type: "email",
       value: t,
-      autocomplete: c,
+      autocomplete: h,
       // Wrap the original onChange to apply trim and hide errors during typing
-      onChange: (h) => {
-        this.input.setError(!1), this.trim(), i(h);
+      onChange: (d) => {
+        this.input.setError(!1), this.trim(), i(d);
       }
-    }), this.input.addEventListener("blur", (h) => {
-      r && this.input.setError(r, s), a(h);
+    }), this.input.addEventListener("blur", (d) => {
+      s && this.input.setError(s, n), a(d);
+    }), r && this.input.addEventListener("keydown", (d) => {
+      const p = d;
+      p.key === "Tab" && !p.shiftKey && (p.preventDefault(), r());
     });
   }
   getValue() {
@@ -1980,8 +1995,8 @@ class Kt extends m {
     return this.paymentMethods.size > 0 && this.getElement().style.display !== "none";
   }
 }
-const jt = 17;
-class qt extends m {
+const qt = 17;
+class jt extends m {
   styles;
   isHovered = !1;
   constructor(e) {
@@ -1992,7 +2007,7 @@ class qt extends m {
   }
   applyStyles() {
     const e = this.getElement();
-    e.style.backgroundColor = this.isHovered ? `color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)` : this.styles.backgroundColor, e.disabled ? (e.style.color = "rgb(150, 150, 150)", e.style.backgroundColor = "rgb(200, 200, 200)") : e.style.color = this.styles.color, e.style.borderRadius = this.styles.borderRadius === jt ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
+    e.style.backgroundColor = this.isHovered ? `color-mix(in srgb, ${this.styles.backgroundColor} 80%, transparent)` : this.styles.backgroundColor, e.disabled ? (e.style.color = "rgb(150, 150, 150)", e.style.backgroundColor = "rgb(200, 200, 200)") : e.style.color = this.styles.color, e.style.borderRadius = this.styles.borderRadius === qt ? "100vmax" : `${this.styles.borderRadius}px`, e.style.fontSize = `${this.styles.fontSize}px`, e.style.fontFamily = `${this.styles.fontFamily}, sans-serif`;
   }
   handleMouseEnter() {
     this.isHovered = !0, this.applyStyles();
@@ -2008,7 +2023,7 @@ class Ut {
   button;
   constructor(e) {
     const { disabled: t, checkoutProfile: i, translationFunc: a } = e;
-    this.button = new qt({
+    this.button = new jt({
       text: a(
         `buttonTexts.${i?.layout.actionButton.translationKey}`
       ),
@@ -2296,6 +2311,7 @@ class Yt extends m {
         value: t.email,
         onChange: this.handleChange,
         onBlur: this.handleBlur,
+        onTab: () => this.focusManager.focusField("cardNumber"),
         error: !!(i.email && a.email),
         errorMsg: i.email,
         checkoutProfile: e,
@@ -2431,11 +2447,9 @@ class Yt extends m {
         formData: null,
         tokenexData: null
         // No tokenization for PayPal
-      }), this.hideSpinner(), this.isSubmitting = !1, this.updateFormUI();
+      });
     } catch {
-      this.setErrorMessage("PayPal processing failed. Please try again.");
-    } finally {
-      this.hideSpinner(), this.isSubmitting = !1, this.updateFormUI();
+      this.setErrorMessage("PayPal processing failed. Please try again."), this.hideSpinner(), this.isSubmitting = !1, this.updateFormUI();
     }
   };
   // Public methods
@@ -2640,7 +2654,7 @@ export {
   ye as enLocale,
   we as esLocale,
   De as frLocale,
-  qe as itLocale,
+  je as itLocale,
   Qe as plLocale,
   lt as ptLocale,
   yt as trLocale

package/dist/index.css

@@ -1 +1 @@
-.form-container{display:flex;flex-direction:column;gap:24px;padding:4px;position:relative;min-height:340px;max-width:100%;text-align:left}.form-container>*{font-family:inherit}.card-details{display:flex}.error-messages-container>*{display:none}.error-messages-container>*:first-child{display:block}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-alert{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;animation:slideIn .3s ease-out}.error-alert-content{display:flex;align-items:flex-start;gap:12px}.error-alert-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#fee2e2;border-radius:50%;color:#dc2626}.error-alert-icon{color:#dc2626}.error-alert-text-container{flex:1;min-width:0}.error-alert-title{margin:0 0 4px;font-size:14px;font-weight:600;color:#991b1b;line-height:1.4}.error-alert-message{margin:0;font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}.skeleton-container{display:flex;flex-direction:column;gap:24px;padding:4px;position:relative;max-width:100%;text-align:left;position:absolute;inset:0;height:100%;width:100%;background:#fff;z-index:9999}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;border-radius:8px;animation:shimmer 1.5s ease-in-out infinite;position:relative;overflow:hidden}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-field{display:flex;flex-direction:column;gap:8px}.skeleton-label{height:16px;width:80px;border-radius:4px}.skeleton-input,.skeleton-payment-method{height:35px;width:100%;border-radius:8px}.skeleton-card-row{display:flex;gap:12px}.skeleton-card-row .skeleton-field{flex:1}.skeleton-submit-button{height:35px;width:100%;border-radius:8px}.skeleton-separator-text{height:14px;width:100px;border-radius:4px}.payment-separator_container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}@media only screen and (max-width: 600px){.skeleton-container{gap:20px;min-height:320px}}.blur-bg{position:absolute;inset:0;height:100%;width:100%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(3.5px);z-index:9999}.loader{width:64px;height:64px;border:6px solid transparent;border-top:6px solid #4f81ff;border-right:6px solid #36d1dc;border-radius:50%;animation:spin 1s ease-in-out infinite,glow 1.5s ease-in-out infinite alternate;box-shadow:0 0 #4f81ff00}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glow{0%{box-shadow:0 0 #4f81ff00}to{box-shadow:0 0 20px #4f81ff99}}.title{margin-top:20px;font-size:18px;color:#4f4f4f;animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;flex-grow:1;flex-basis:0;box-sizing:border-box;align-items:stretch}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-weight:400;letter-spacing:.02em;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;padding:8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box;min-height:0;flex:1}.form-input-error{color:#dc2727}.form-input::placeholder{color:#717173;opacity:.3}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;z-index:2}.form-helper-text{color:#dc2727;font-size:12px;font-weight:500;margin-top:4px;display:block;overflow:hidden;max-height:100px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out}.form-helper-text-hidden{max-height:0;opacity:0;margin-top:0;overflow:hidden}.input-label{margin-bottom:6px}.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box}.card-element iframe{width:100%;min-width:0;display:block}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:16px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:20px;top:8px;display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;background-color:#fff;border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.paypal{background-color:#ffc439;color:#253b80;font-weight:700;padding:8px 16px;box-shadow:0 2px 4px #0000001a;text-transform:none;cursor:pointer;border-radius:4px}.paypal:hover{background-color:#ffc439;filter:brightness(.95)}.paypal-icon-container{display:flex;align-items:center;justify-content:center}.paypal-icon-container img{width:69px;height:22px}.payment-separator{width:100%;display:flex;align-items:center;justify-content:space-between;margin:12px 0 -16px}.payment-separator__line{height:1.3px;flex-grow:1;background:#9f9f9f}.payment-separator__text{font-size:14px;color:#0d0d0d;padding:0 16px;margin:0;font-weight:400}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.5;text-align:center;cursor:pointer;transition:all .2s ease;font-weight:700;border:none;outline:none;white-space:nowrap;height:min-content;width:100%}.disabled{pointer-events:none}.valid{outline:none;overflow:hidden;transition:all .3s ease}.valid:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s;animation:glowSlide 6s infinite}@keyframes glowSlide{0%{left:-100%}50%{left:100%}to{left:100%}}.valid:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.1) 75%,transparent 100%);transform:translate(-100%);animation:smoothGlow 7s infinite}@keyframes smoothGlow{0%{transform:translate(-100%)}to{transform:translate(100%)}}
+.form-container{display:flex;flex-direction:column;gap:24px;padding:4px;position:relative;min-height:340px;max-width:100%;text-align:left}.form-container>*{font-family:inherit}.card-details{display:flex}.error-messages-container>*{display:none}.error-messages-container>*:first-child{display:block}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-alert{background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;animation:slideIn .3s ease-out}.error-alert-content{display:flex;align-items:flex-start;gap:12px}.error-alert-icon-container{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:#fee2e2;border-radius:50%;color:#dc2626}.error-alert-icon{color:#dc2626}.error-alert-text-container{flex:1;min-width:0}.error-alert-title{margin:0 0 4px;font-size:14px;font-weight:600;color:#991b1b;line-height:1.4}.error-alert-message{margin:0;font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}.skeleton-container{display:flex;flex-direction:column;gap:24px;padding:4px;position:relative;max-width:100%;text-align:left;position:absolute;inset:0;height:100%;width:100%;background:#fff;z-index:9999}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;border-radius:8px;animation:shimmer 1.5s ease-in-out infinite;position:relative;overflow:hidden}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-field{display:flex;flex-direction:column;gap:8px}.skeleton-label{height:16px;width:80px;border-radius:4px}.skeleton-input,.skeleton-payment-method{height:35px;width:100%;border-radius:8px}.skeleton-card-row{display:flex;gap:12px}.skeleton-card-row .skeleton-field{flex:1}.skeleton-submit-button{height:35px;width:100%;border-radius:8px}.skeleton-separator-text{height:14px;width:100px;border-radius:4px}.payment-separator_container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}@media only screen and (max-width: 600px){.skeleton-container{gap:20px;min-height:320px}}.blur-bg{position:absolute;inset:0;height:100%;width:100%;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(3.5px);z-index:9999}.loader{width:64px;height:64px;border-radius:50%;background:conic-gradient(from 270deg,#134e4a 0deg,#0f766e 90deg,#0d9488 180deg,#5eaba3 240deg,rgba(13,148,136,.2) 300deg,transparent 330deg);animation:spin 1s linear infinite;position:relative}.loader:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}@keyframes spin{to{transform:rotate(360deg)}}.title{margin-top:20px;font-size:18px;color:#4f4f4f;animation:fadeIn 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;flex-grow:1;flex-basis:0;box-sizing:border-box;align-items:stretch}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-weight:400;letter-spacing:.02em;transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;background:#fff;padding:8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box;min-height:0;flex:1}.form-input-error{color:#dc2727}.form-input::placeholder{color:#717173;opacity:.3}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;z-index:2}.form-helper-text{color:#dc2727;font-size:12px;font-weight:500;margin-top:4px;display:block;overflow:hidden;max-height:100px;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,margin .3s ease-in-out}.form-helper-text-hidden{max-height:0;opacity:0;margin-top:0;overflow:hidden}.input-label{margin-bottom:6px}.card-element{position:relative;height:38.5px;transition:box-shadow .1s ease-in;box-shadow:0 0 0 1px #e0e0e0,0 2px 4px #00000012,0 1px 1.5px #0000000d;padding:0;border:none;background:#fff;border-radius:inherit;box-sizing:border-box}.card-element iframe{width:100%;min-width:0;display:block}.card-element-focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d}.card-icon{width:16px;transition:opacity .6s ease-in;opacity:1}.card-icon img{max-width:100%;display:block;height:auto}.cards-position{position:absolute;z-index:10;right:20px;top:8px;display:flex;align-items:center;gap:8px;pointer-events:none}.loading{position:relative}.loading:after{content:"";position:absolute;inset:0;height:100%;width:100%;background-color:#fff;border-radius:inherit}@media only screen and (min-width: 600px){.card-icon{width:20px}}.paypal{background-color:#ffc439;color:#253b80;font-weight:700;padding:8px 16px;box-shadow:0 2px 4px #0000001a;text-transform:none;cursor:pointer;border-radius:4px}.paypal:hover{background-color:#ffc439;filter:brightness(.95)}.paypal-icon-container{display:flex;align-items:center;justify-content:center}.paypal-icon-container img{width:69px;height:22px}.payment-separator{width:100%;display:flex;align-items:center;justify-content:space-between;margin:12px 0 -16px}.payment-separator__line{height:1.3px;flex-grow:1;background:#9f9f9f}.payment-separator__text{font-size:14px;color:#0d0d0d;padding:0 16px;margin:0;font-weight:400}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.5;text-align:center;cursor:pointer;transition:all .2s ease;font-weight:700;border:none;outline:none;white-space:nowrap;height:min-content;width:100%}.disabled{pointer-events:none}.valid{outline:none;overflow:hidden;transition:all .3s ease}.valid:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s;animation:glowSlide 6s infinite}@keyframes glowSlide{0%{left:-100%}50%{left:100%}to{left:100%}}.valid:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 25%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.1) 75%,transparent 100%);transform:translate(-100%);animation:smoothGlow 7s infinite}@keyframes smoothGlow{0%{transform:translate(-100%)}to{transform:translate(100%)}}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odus/checkout",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "displayName": "Odus Checkout SDK",
   "keywords": [
     "odus",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odus/checkout",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "displayName": "Odus Checkout SDK",
   "keywords": [
     "odus",