@odus/checkout 0.30.0-beta.4 → 1.0.0

package/dist/elements.es.js

@@ -1,6 +1,6 @@
-import { o as a, I as m, S as y, g as C, e as g, A as E, F as k, j as z, a as c, f as N, J as P, E as S, n as x, P as F, i as R, z as A, p as V, q as M, k as B } from "./shared.js";
-const l = ".form-helper-text{color:#dc2727;font-family:var(--odus-font-family, inherit);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}", h = ".input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;align-items:stretch}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-size:var(--odus-input-font-size, 16px);font-weight:var(--odus-input-font-weight, 400);letter-spacing:var(--odus-input-letter-spacing, .02em);transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px var(--odus-border-color, #e0e0e0),0 2px 4px #00000012,0 1px 1.5px #0000000d;background:var(--odus-color-background, #fff);padding:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:var(--odus-input-line-height, 1.5);z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input[name=cardNumber]{padding-right:100px}.form-input-error{color:#dc2727}.form-input::placeholder{color:var(--odus-input-placeholder-color, #717173);opacity:var(--odus-input-placeholder-opacity, .3)}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}", u = ".input-label{font-family:var(--odus-font-family, inherit);font-size:var(--odus-label-font-size, 14px);font-weight:var(--odus-label-font-weight, 400);color:var(--odus-label-color, var(--odus-color-text, #1a1a1a));letter-spacing:var(--odus-label-letter-spacing, normal);line-height:var(--odus-label-line-height, 1.4);margin-bottom:var(--odus-label-margin-bottom, 6px)}", I = ":host{--odus-font-family: system-ui, sans-serif;--odus-font-size: 16px;--odus-color-error: #dc2727;--odus-color-text: #1a1a1a;--odus-color-background: #ffffff;--odus-border-color: #e0e0e0;--odus-border-radius: 6px;--odus-spacing-sm: 8px;--odus-spacing-md: 16px;--odus-spacing-lg: 24px;--odus-input-height: 44px;--odus-input-padding: 8px 12px;--odus-input-font-size: var(--odus-font-size);--odus-input-font-weight: 400;--odus-input-letter-spacing: .02em;--odus-input-line-height: 1.5;--odus-input-placeholder-color: #717173;--odus-input-placeholder-opacity: .3;--odus-input-focus-shadow: 0 0 0 1px rgba(50, 151, 211, .7), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 0 0 4px rgba(50, 151, 211, .3);--odus-label-font-size: 14px;--odus-label-font-weight: 400;--odus-label-color: var(--odus-color-text);--odus-label-letter-spacing: normal;--odus-label-line-height: 1.4;--odus-label-margin-bottom: 6px;--odus-card-gap: 12px;--odus-button-height: 48px;--odus-button-border-radius: var(--odus-border-radius)}.form-input{opacity:1;font-weight:var(--odus-input-font-weight, 400);letter-spacing:var(--odus-input-letter-spacing, .02em);transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px var(--odus-border-color, #e0e0e0),0 2px 4px #00000012,0 1px 1.5px #0000000d;background:var(--odus-color-background, #fff);padding:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:var(--odus-input-line-height, 1.5);z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input::placeholder{color:var(--odus-input-placeholder-color, #717173);opacity:var(--odus-input-placeholder-opacity, .3)}.form-input:focus{box-shadow:var( --odus-input-focus-shadow, 0 0 0 1px rgba(50, 151, 211, .7), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 0 0 4px rgba(50, 151, 211, .3) );position:relative;z-index:2}.input-label{font-family:var(--odus-font-family, inherit)!important;font-size:var(--odus-label-font-size, 14px)!important;font-weight:var(--odus-label-font-weight, 400)!important;color:var(--odus-label-color, var(--odus-color-text, #1a1a1a))!important;letter-spacing:var(--odus-label-letter-spacing, normal)!important;line-height:var(--odus-label-line-height, 1.4)!important;margin-bottom:var(--odus-label-margin-bottom, 6px)!important}.form-helper-text{font-family:var(--odus-font-family, inherit)!important}";
-class d {
+import { o as a, I as g, S as E, g as z, e as x, A as N, F as V, i as k, a as _, f as P, J as F, p as y, m as w, j as A, E as R, n as C, P as M, l as T, B as I, q as B, r as L, k as j } from "./shared.js";
+const p = ".form-helper-text{color:#dc2727;font-family:var(--odus-font-family, inherit);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}", f = ".input-wrapper{display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;align-items:stretch}.input-wrapper *{box-sizing:border-box}.form-input{opacity:1;font-size:var(--odus-input-font-size, 16px);font-weight:var(--odus-input-font-weight, 400);letter-spacing:var(--odus-input-letter-spacing, .02em);transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px var(--odus-border-color, #e0e0e0),0 2px 4px #00000012,0 1px 1.5px #0000000d;background:var(--odus-color-background, #fff);padding:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:var(--odus-input-line-height, 1.5);z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input[name=cardNumber]{padding-right:100px}.form-input-error{color:#dc2727}.form-input::placeholder{color:var(--odus-input-placeholder-color, #717173);opacity:var(--odus-input-placeholder-opacity, .3)}.form-input:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}", m = ".input-label{font-family:var(--odus-font-family, inherit);font-size:var(--odus-label-font-size, 14px);font-weight:var(--odus-label-font-weight, 400);color:var(--odus-label-color, var(--odus-color-text, #1a1a1a));letter-spacing:var(--odus-label-letter-spacing, normal);line-height:var(--odus-label-line-height, 1.4);margin-bottom:var(--odus-label-margin-bottom, 6px)}", O = ":host{--odus-font-family: system-ui, sans-serif;--odus-font-size: 16px;--odus-color-error: #dc2727;--odus-color-text: #1a1a1a;--odus-color-background: #ffffff;--odus-border-color: #e0e0e0;--odus-border-radius: 6px;--odus-spacing-sm: 8px;--odus-spacing-md: 16px;--odus-spacing-lg: 24px;--odus-input-height: 44px;--odus-input-padding: 8px 12px;--odus-input-font-size: var(--odus-font-size);--odus-input-font-weight: 400;--odus-input-letter-spacing: .02em;--odus-input-line-height: 1.5;--odus-input-placeholder-color: #717173;--odus-input-placeholder-opacity: .3;--odus-input-focus-shadow: 0 0 0 1px rgba(50, 151, 211, .7), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 0 0 4px rgba(50, 151, 211, .3);--odus-label-font-size: 14px;--odus-label-font-weight: 400;--odus-label-color: var(--odus-color-text);--odus-label-letter-spacing: normal;--odus-label-line-height: 1.4;--odus-label-margin-bottom: 6px;--odus-card-gap: 12px;--odus-button-height: 48px;--odus-button-border-radius: var(--odus-border-radius)}.form-input{opacity:1;font-weight:var(--odus-input-font-weight, 400);letter-spacing:var(--odus-input-letter-spacing, .02em);transition:box-shadow .1s ease-in,border-radius .2s ease-in;box-shadow:0 0 0 1px var(--odus-border-color, #e0e0e0),0 2px 4px #00000012,0 1px 1.5px #0000000d;background:var(--odus-color-background, #fff);padding:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:var(--odus-input-line-height, 1.5);z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%}.form-input::placeholder{color:var(--odus-input-placeholder-color, #717173);opacity:var(--odus-input-placeholder-opacity, .3)}.form-input:focus{box-shadow:var( --odus-input-focus-shadow, 0 0 0 1px rgba(50, 151, 211, .7), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 0 0 4px rgba(50, 151, 211, .3) );position:relative;z-index:2}.input-label{font-family:var(--odus-font-family, inherit)!important;font-size:var(--odus-label-font-size, 14px)!important;font-weight:var(--odus-label-font-weight, 400)!important;color:var(--odus-label-color, var(--odus-color-text, #1a1a1a))!important;letter-spacing:var(--odus-label-letter-spacing, normal)!important;line-height:var(--odus-label-line-height, 1.4)!important;margin-bottom:var(--odus-label-margin-bottom, 6px)!important}.form-helper-text{font-family:var(--odus-font-family, inherit)!important}";
+class u {
   shadowRoot = null;
   host = null;
   options = {};
@@ -56,15 +56,15 @@ class d {
   }
   emit(e, t) {
     const r = this.listeners.get(e) ?? [];
-    for (const o of r)
-      o(t);
+    for (const s of r)
+      s(t);
     this.options.callbacks?.[e]?.(t);
   }
   getCss() {
-    return I;
+    return O;
   }
 }
-class L extends d {
+class q extends u {
   _value = "";
   _error = null;
   _input = null;
@@ -72,7 +72,7 @@ class L extends d {
     if (!this.shadowRoot) return;
     this._input?.getElement().remove();
     const { t: e } = a();
-    this._input = new m({
+    this._input = new g({
       name: "billingAddress.city",
       label: e("address.city"),
       error: !1,
@@ -88,7 +88,7 @@ class L extends d {
     }), this.shadowRoot.appendChild(this._input.getElement());
   }
   getCss() {
-    return super.getCss() + [h, u, l].join(`
+    return super.getCss() + [f, m, p].join(`
 `) + `
       :host { display: block; }
       .form-input {
@@ -129,8 +129,8 @@ class L extends d {
     return this._error;
   }
 }
-const v = `.form-select{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 32px 8px 12px;border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%23717173' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.form-select-error{color:#dc2727}.form-select-placeholder{color:#d4d4d5}.form-select option[disabled]{color:#717173;opacity:.5}.form-select:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}`;
-class T extends d {
+const S = `.form-select{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:var(--odus-input-padding, 8px 12px);border:none;outline:none;line-height:1.5;z-index:0;box-sizing:border-box;min-height:0;flex:1;width:100%;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%23717173' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}.form-select-error{color:#dc2727}.form-select-placeholder{color:#d4d4d5}.form-select option[disabled]{color:#717173;opacity:.5}.form-select:focus{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;position:relative;z-index:2}`;
+class D extends u {
   _value = "";
   _error = null;
   _select = null;
@@ -142,13 +142,13 @@ class T extends d {
     if (!this.shadowRoot) return;
     this._select?.getElement().remove(), this.options.initialValue && !this._value && (this._value = String(this.options.initialValue));
     const { t: e, locale: t } = a();
-    this._select = new y({
+    this._select = new E({
       name: "billingAddress.country",
       label: e("address.country"),
       error: !1,
       placeholder: e("address.chooseCountry"),
       value: this._value,
-      options: C(this._allowedCountries, t),
+      options: z(this._allowedCountries, t),
       autocomplete: "country",
       onChange: (r) => {
         this._value = r.target.value, this._error = null, this.emit("change", this._value);
@@ -159,7 +159,7 @@ class T extends d {
     }), this.shadowRoot.appendChild(this._select.getElement());
   }
   getCss() {
-    return super.getCss() + [u, l, v].join(`
+    return super.getCss() + [m, p, S].join(`
 `) + `
       :host { display: block; }
       .form-select {
@@ -200,7 +200,7 @@ class T extends d {
     return this._error;
   }
 }
-class j extends d {
+class J extends u {
   _value = "";
   _error = null;
   _input = null;
@@ -208,7 +208,7 @@ class j extends d {
     if (!this.shadowRoot) return;
     this._input?.getElement().remove();
     const { t: e } = a();
-    this._input = new m({
+    this._input = new g({
       name: "billingAddress.firstName",
       label: e("address.firstName"),
       error: !1,
@@ -224,7 +224,7 @@ class j extends d {
     }), this.shadowRoot.appendChild(this._input.getElement());
   }
   getCss() {
-    return super.getCss() + [h, u, l].join(`
+    return super.getCss() + [f, m, p].join(`
 `) + `
       :host { display: block; }
       .form-input {
@@ -265,7 +265,7 @@ class j extends d {
     return this._error;
   }
 }
-class q extends d {
+class K extends u {
   _value = "";
   _error = null;
   _input = null;
@@ -273,7 +273,7 @@ class q extends d {
     if (!this.shadowRoot) return;
     this._input?.getElement().remove();
     const { t: e } = a();
-    this._input = new m({
+    this._input = new g({
       name: "billingAddress.lastName",
       label: e("address.lastName"),
       error: !1,
@@ -289,7 +289,7 @@ class q extends d {
     }), this.shadowRoot.appendChild(this._input.getElement());
   }
   getCss() {
-    return super.getCss() + [h, u, l].join(`
+    return super.getCss() + [f, m, p].join(`
 `) + `
       :host { display: block; }
       .form-input {
@@ -330,8 +330,8 @@ class q extends d {
     return this._error;
   }
 }
-const b = /* @__PURE__ */ new Set(["US", "CA"]);
-class O extends d {
+const v = /* @__PURE__ */ new Set(["US", "CA"]);
+class Z extends u {
   _value = "";
   _country = "";
   _input = null;
@@ -339,17 +339,17 @@ class O extends d {
   setCountry(e) {
     const t = this._country;
     if (this._country = e, !this.shadowRoot) return;
-    const r = b.has(t), o = b.has(e);
-    if (r && o && t !== e) {
-      const { t: s } = a(), i = e, p = s(i === "US" ? "address.chooseState" : "address.chooseProvince");
-      this._select?.setOptions(g(i), p), this._value = "";
+    const r = v.has(t), s = v.has(e);
+    if (r && s && t !== e) {
+      const { t: o } = a(), i = e, n = o(i === "US" ? "address.chooseState" : "address.chooseProvince");
+      this._select?.setOptions(x(i), n), this._value = "";
       return;
     }
-    r !== o && (this._value = "", this.render());
+    r !== s && (this._value = "", this.render());
   }
   render() {
     if (!this.shadowRoot) return;
-    if (this._input?.getElement().remove(), this._select?.getElement().remove(), this._input = null, this._select = null, b.has(this._country)) {
+    if (this._input?.getElement().remove(), this._select?.getElement().remove(), this._input = null, this._select = null, v.has(this._country)) {
       const t = this._country;
       this._renderSelect(t);
     } else
@@ -357,7 +357,7 @@ class O extends d {
   }
   _renderInput() {
     const { t: e } = a();
-    this._input = new m({
+    this._input = new g({
       name: "billingAddress.state",
       label: e("address.state"),
       error: !1,
@@ -372,24 +372,24 @@ class O extends d {
     }), this.shadowRoot.appendChild(this._input.getElement());
   }
   _renderSelect(e) {
-    const { t } = a(), r = g(e), o = t(e === "US" ? "address.chooseState" : "address.chooseProvince");
-    this._select = new y({
+    const { t } = a(), r = x(e), s = t(e === "US" ? "address.chooseState" : "address.chooseProvince");
+    this._select = new E({
       name: "billingAddress.state",
       label: t("address.state"),
       error: !1,
-      placeholder: o,
+      placeholder: s,
       value: this._value,
       options: r,
       autocomplete: "address-level1",
-      onChange: (s) => {
-        this._value = s.target.value, this.emit("change", this._value);
+      onChange: (o) => {
+        this._value = o.target.value, this.emit("change", this._value);
       }
     }), this._select.addEventListener("blur", () => {
       this.emit("blur", this._value);
     }), this.shadowRoot.appendChild(this._select.getElement());
   }
   getCss() {
-    return super.getCss() + [h, u, l, v].join(`
+    return super.getCss() + [f, m, p, S].join(`
 `) + `
       :host { display: block; }
       .form-input,
@@ -433,7 +433,7 @@ class O extends d {
     return null;
   }
 }
-class D extends d {
+class G extends u {
   _value = "";
   _error = null;
   _input = null;
@@ -441,7 +441,7 @@ class D extends d {
     if (!this.shadowRoot) return;
     this._input?.getElement().remove();
     const { t: e } = a();
-    this._input = new m({
+    this._input = new g({
       name: "billingAddress.street",
       label: e("address.street"),
       error: !1,
@@ -463,7 +463,7 @@ class D extends d {
     }), this.shadowRoot.appendChild(this._input.getElement());
   }
   getCss() {
-    return super.getCss() + [h, u, l].join(`
+    return super.getCss() + [f, m, p].join(`
 `) + `
       :host { display: block; }
       .form-input {
@@ -504,7 +504,7 @@ class D extends d {
     return this._error;
   }
 }
-class Z extends d {
+class U extends u {
   _value = "";
   _error = null;
   _input = null;
@@ -512,7 +512,7 @@ class Z extends d {
     if (!this.shadowRoot) return;
     this._input?.getElement().remove();
     const { t: e } = a();
-    this._input = new m({
+    this._input = new g({
       name: "billingAddress.zipCode",
       label: e("address.zipCode"),
       error: !1,
@@ -528,7 +528,7 @@ class Z extends d {
     }), this.shadowRoot.appendChild(this._input.getElement());
   }
   getCss() {
-    return super.getCss() + [h, u, l].join(`
+    return super.getCss() + [f, m, p].join(`
 `) + `
       :host { display: block; }
       .form-input {
@@ -569,7 +569,7 @@ class Z extends d {
     return this._error;
   }
 }
-const K = "apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;appearance:-apple-pay-button;height:40px;min-height:40px;border-radius:4px;cursor:pointer;display:inline-block;width:100%;box-sizing:border-box}apple-pay-button:hover{filter:brightness(.9)}", Q = {
+const Q = "apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;appearance:-apple-pay-button;height:40px;min-height:40px;border-radius:4px;cursor:pointer;display:inline-block;width:100%;box-sizing:border-box}apple-pay-button:hover{filter:brightness(.9)}", W = {
   name: "odus-elements",
   styles: {
     fontSize: 14,
@@ -594,7 +594,7 @@ const K = "apple-pay-button{-webkit-appearance:-apple-pay-button;-apple-pay-butt
   },
   additionalPaymentMethods: {}
 };
-class U extends d {
+class H extends u {
   _paymentContext = null;
   _applePayData = null;
   _authorized = !1;
@@ -609,29 +609,29 @@ class U extends d {
       paymentId: e,
       checkoutKey: t,
       environment: r,
-      checkoutDetails: o,
-      displayName: s,
+      checkoutDetails: s,
+      displayName: o,
       countries: i,
-      requiredBillingContactFields: p,
-      requiredShippingContactFields: _,
-      onAuthorize: w
+      requiredBillingContactFields: n,
+      requiredShippingContactFields: l,
+      onAuthorize: h
     } = this._paymentContext;
-    i?.length && o?.countryCode && !i.map((f) => f.toUpperCase()).includes(o.countryCode.toUpperCase()) || (this._button = new E({
-      checkoutProfile: Q,
+    i?.length && s?.countryCode && !i.map((b) => b.toUpperCase()).includes(s.countryCode.toUpperCase()) || (this._button = new N({
+      checkoutProfile: W,
       paymentId: e,
       checkoutKey: t,
       environment: r,
-      checkoutDetails: o,
-      displayName: s,
-      requiredBillingContactFields: p,
-      requiredShippingContactFields: _,
-      onSubmit: async ({ applePayData: f }) => {
-        f && (this._applePayData = f, this._authorized = !0, this.emit("change", f), await w(f));
+      checkoutDetails: s,
+      displayName: o,
+      requiredBillingContactFields: n,
+      requiredShippingContactFields: l,
+      onSubmit: async ({ applePayData: b }) => {
+        b && (this._applePayData = b, this._authorized = !0, this.emit("change", b), await h(b));
       }
     }), this.shadowRoot.appendChild(this._button.getElement()));
   }
   getCss() {
-    return super.getCss() + K + `
+    return super.getCss() + Q + `
       :host { display: block; }
       apple-pay-button {
         width: 100%;
@@ -650,7 +650,7 @@ class U extends d {
     return null;
   }
 }
-const G = '.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:18px;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:12px;top:50%;transform:translateY(-50%);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}}.vgs-card-group iframe,.vgs-wrap iframe{width:100%;min-width:0;display:block}.fake-ph{position:absolute;inset:0;display:flex;align-items:center;padding:8px 12px;color:#717173;opacity:.3;font-size:var(--odus-input-font-size, 16px);font-weight:400;letter-spacing:.02em;line-height:1.5;font-family:var(--odus-font-family, inherit);background:#fff;pointer-events:none;user-select:none;white-space:nowrap;z-index:0}@keyframes vgs-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.vgs-field-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#f7f7f7 25%,#fdfdfd,#f7f7f7 75%);background-size:200% 100%;animation:vgs-shimmer 1.5s ease-in-out infinite;pointer-events:none;z-index:11;border-radius:inherit}', J = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvWpIQFjQQCPpaIlJKpegirp5kLkzLB1AxHmnLk73D3TJbAGqr1QmlsWDBtMPMRpdzzUM7ZwX3kzhIuATV4Pe7RKp3nZlVmcrT0YCQXBrTwqZNh775z58GP2kZs+gVfNqBampJPzSB/hB62KkByhECn6grrRjiAVwJyZVEvs/2vrxaEpO+aE16emtX12RgI5JdzdOiNyZEQteU6zRBRJEocPWVxExaOpVVVJ5+UnW0LcalzA+lRGRTrQJ5JguAPiAOzRPTK/lYFFpCAl/F8wtoAVG1c8zO2NcQ0Pko+fmeidRFxJ/did2btV+9Mkze3mBphwFmvnxa35LF+Cs/XJHDwIDAQAB", H = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA8gGPMwBRPuVyJReZGIkWH/+Bf5pnpDN1bSR2cLYLXVT8CaSnTw74qeboSnktgYCi1D9R3Bj2fYzTIwGGZb8KinLdxwbqZmHwrE9cFhCaHbG/E0PbqQGhXP2vbniZTT4M0i0Cbi7ES3Bw5zqNbIZZnX041QEpxLvIyWPKZCX+fBogNMhWfCF779aclChjHkwZMsufThVWE9xklWGxXiytx5aL4I5JPxq0I7cAkZGGs4aF/GxWwPaq7R3wPikJQ0YHnCMfcURzl2Hnw/inqyMy+JB6djTq2/BdzMAhWTh3cDWq9Xu+gEkb/QCd0n1yYIdKuDISlk/AfHdWe34IvzhVyQIDAQAB", W = {
+const Y = '.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:18px;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:12px;top:50%;transform:translateY(-50%);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}}.vgs-card-group iframe,.vgs-wrap iframe{width:100%;min-width:0;display:block}.fake-ph{position:absolute;inset:0;display:flex;align-items:center;padding:8px 12px;color:#717173;opacity:.3;font-size:var(--odus-input-font-size, 16px);font-weight:400;letter-spacing:.02em;line-height:1.5;font-family:var(--odus-font-family, inherit);background:#fff;pointer-events:none;user-select:none;white-space:nowrap;z-index:0}@keyframes vgs-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.vgs-field-skeleton{position:absolute;inset:0;background:linear-gradient(90deg,#f7f7f7 25%,#fdfdfd,#f7f7f7 75%);background-size:200% 100%;animation:vgs-shimmer 1.5s ease-in-out infinite;pointer-events:none;z-index:11;border-radius:inherit}', $ = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvWpIQFjQQCPpaIlJKpegirp5kLkzLB1AxHmnLk73D3TJbAGqr1QmlsWDBtMPMRpdzzUM7ZwX3kzhIuATV4Pe7RKp3nZlVmcrT0YCQXBrTwqZNh775z58GP2kZs+gVfNqBampJPzSB/hB62KkByhECn6grrRjiAVwJyZVEvs/2vrxaEpO+aE16emtX12RgI5JdzdOiNyZEQteU6zRBRJEocPWVxExaOpVVVJ5+UnW0LcalzA+lRGRTrQJ5JguAPiAOzRPTK/lYFFpCAl/F8wtoAVG1c8zO2NcQ0Pko+fmeidRFxJ/did2btV+9Mkze3mBphwFmvnxa35LF+Cs/XJHDwIDAQAB", X = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA8gGPMwBRPuVyJReZGIkWH/+Bf5pnpDN1bSR2cLYLXVT8CaSnTw74qeboSnktgYCi1D9R3Bj2fYzTIwGGZb8KinLdxwbqZmHwrE9cFhCaHbG/E0PbqQGhXP2vbniZTT4M0i0Cbi7ES3Bw5zqNbIZZnX041QEpxLvIyWPKZCX+fBogNMhWfCF779aclChjHkwZMsufThVWE9xklWGxXiytx5aL4I5JPxq0I7cAkZGGs4aF/GxWwPaq7R3wPikJQ0YHnCMfcURzl2Hnw/inqyMy+JB6djTq2/BdzMAhWTh3cDWq9Xu+gEkb/QCd0n1yYIdKuDISlk/AfHdWe34IvzhVyQIDAQAB", c = {
   name: "odus-elements",
   styles: {
     fontSize: 14,
@@ -675,68 +675,347 @@ const G = '.card-element{position:relative;height:38.5px;transition:box-shadow .
   },
   additionalPaymentMethods: {}
 };
-class Y extends d {
+class ee {
   _cardNumber = "";
   _cardExpiry = "";
   _cardCvv = "";
-  _environment = "test";
   _section = null;
-  _focusManager = new k();
+  _focusManager = new V();
   _touchedFields = /* @__PURE__ */ new Set();
   _focusHandlers = [];
-  setEnvironment(e) {
-    this._environment = e;
+  get section() {
+    return this._section;
   }
-  render() {
-    if (!this.shadowRoot) return;
+  renderSection(e, t, r) {
     this._section?.getElement().remove();
-    const { t: e } = a();
-    this._section = new z({
-      checkoutProfile: W,
+    const { t: s } = a();
+    this._section = new k({
+      checkoutProfile: c,
       cardNumber: this._cardNumber,
       cardNumberTouched: !1,
       cardCvv: this._cardCvv,
       cardCvvTouched: !1,
       cardExpiry: this._cardExpiry,
       cardExpiryTouched: !1,
-      translationFunc: e,
-      onChange: (t) => {
-        const r = t.target;
-        if (r.name === "cardNumber")
-          this._cardNumber = r.value;
-        else if (r.name === "cardExpiry") {
-          const o = N.cardExpiry(r.value);
-          this._cardExpiry = o, this._section?.updateCardExpiry(o);
-        } else r.name === "cardCvv" && (this._cardCvv = r.value);
-        this._touchedFields.add(r.name), this._updateFocusManagerState(), this.emit("change", this.getValue());
+      translationFunc: s,
+      onChange: (o) => {
+        const i = o.target;
+        if (i.name === "cardNumber")
+          this._cardNumber = i.value;
+        else if (i.name === "cardExpiry") {
+          const n = P.cardExpiry(i.value);
+          this._cardExpiry = n, this._section?.updateCardExpiry(n);
+        } else i.name === "cardCvv" && (this._cardCvv = i.value);
+        this._touchedFields.add(i.name), this._updateFocusManagerState(), t(this.getValue());
       },
-      onBlur: (t) => {
-        const r = t.target, o = r.name ?? "cardExpiry", s = c();
-        if (this._touchedFields.add(o), r.name === "cardNumber") {
-          const i = s.cardNumber(this._cardNumber);
-          this._section?.updateCardNumber(this._cardNumber, i, !0);
-        } else if (r.name === "cardCvv") {
-          const i = s.cardCvv(this._cardCvv, this._cardNumber);
-          this._section?.updateCardCvv(this._cardCvv, i, !0);
+      onBlur: (o) => {
+        const i = o.target, n = i.name ?? "cardExpiry", l = _();
+        if (this._touchedFields.add(n), i.name === "cardNumber") {
+          const h = l.cardNumber(this._cardNumber);
+          this._section?.updateCardNumber(this._cardNumber, h, !0);
+        } else if (i.name === "cardCvv") {
+          const h = l.cardCvv(this._cardCvv, this._cardNumber);
+          this._section?.updateCardCvv(this._cardCvv, h, !0);
         } else {
-          const i = s.cardExpiry(this._cardExpiry);
-          this._section?.updateCardExpiry(this._cardExpiry, i, !0);
+          const h = l.cardExpiry(this._cardExpiry);
+          this._section?.updateCardExpiry(this._cardExpiry, h, !0);
         }
-        this._updateFocusManagerState(), this.emit("blur", this.getValue());
+        this._updateFocusManagerState(), r(this.getValue());
+      }
+    }), e.appendChild(this._section.getElement()), this._registerFocusFields();
+  }
+  getValue() {
+    return {
+      number: this._cardNumber,
+      expiry: this._cardExpiry,
+      cvv: this._cardCvv
+    };
+  }
+  async getPayload(e) {
+    const t = e === "live" ? X : $, r = new F();
+    r.setPublicKey(t);
+    const s = this._cardNumber.replace(/\s+/g, ""), o = this._cardExpiry.replace(/\s+/g, "").split("/"), i = o[0] ?? "";
+    let n = o[1] ?? "";
+    return n.length === 2 && (n = `20${n}`), {
+      encryptedCardNumber: r.encrypt(s),
+      encryptedCvv: r.encrypt(this._cardCvv),
+      expMonth: i,
+      expYear: n
+    };
+  }
+  isValid() {
+    const e = _(), t = this._cardCvv.length >= 3;
+    return !e.cardNumber(this._cardNumber) && !e.cardExpiry(this._cardExpiry) && t;
+  }
+  getError() {
+    const e = _();
+    return e.cardNumber(this._cardNumber) ?? e.cardExpiry(this._cardExpiry) ?? null;
+  }
+  destroy() {
+    this._cleanupFocusHandlers(), this._section = null;
+  }
+  _registerFocusFields() {
+    if (this._cleanupFocusHandlers(), !this._section) return;
+    const e = this._section.getElement();
+    this._focusManager.registerField("cardNumber", {
+      focus: () => this._section?.focusField("cardNumber")
+    }), this._focusManager.registerField("cardExpiry", {
+      focus: () => this._section?.focusField("cardExpiry")
+    }), this._focusManager.registerField("cardCvv", {
+      focus: () => this._section?.focusField("cardCvv")
+    });
+    const t = ["cardNumber", "cardExpiry", "cardCvv"];
+    for (const r of t) {
+      const s = e.querySelector(`input[name="${r}"]`);
+      if (!s) continue;
+      const o = () => this._focusManager.handleFieldFocus(r);
+      s.addEventListener("focus", o), this._focusHandlers.push(
+        () => s.removeEventListener("focus", o)
+      );
+    }
+  }
+  _cleanupFocusHandlers() {
+    for (const e of this._focusHandlers)
+      e();
+    this._focusHandlers = [];
+  }
+  _updateFocusManagerState() {
+    const e = _(), t = {
+      cardNumber: this._cardNumber,
+      cardExpiry: this._cardExpiry,
+      cardCvv: this._cardCvv,
+      name: "",
+      email: ""
+    }, r = {}, s = e.cardNumber(this._cardNumber), o = e.cardExpiry(this._cardExpiry), i = e.cardCvv(this._cardCvv, this._cardNumber);
+    s && (r.cardNumber = s), o && (r.cardExpiry = o), i && (r.cardCvv = i);
+    const n = {};
+    for (const l of this._touchedFields)
+      n[l] = !0;
+    this._focusManager.handleStateUpdate(t, r, n);
+  }
+}
+class te {
+  _vgsService;
+  _vgsJwt;
+  _vgsState = {};
+  _vgsFieldsValid = !1;
+  _vgsReinitTimer = null;
+  _currentTheme = {};
+  _environment = "test";
+  _section = null;
+  constructor(e, t) {
+    this._vgsJwt = e, this._environment = t, this._vgsService = new y();
+  }
+  get section() {
+    return this._section;
+  }
+  renderSection(e, t) {
+    this._section?.getElement().remove();
+    const { t: r } = a();
+    this._section = new k({
+      checkoutProfile: c,
+      cardNumber: "",
+      cardNumberTouched: !1,
+      cardCvv: "",
+      cardCvvTouched: !1,
+      cardExpiry: "",
+      cardExpiryTouched: !1,
+      translationFunc: r,
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onChange: () => {
+      },
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onBlur: () => {
+      },
+      vgsService: this._vgsService
+    }), e.appendChild(this._section.getElement()), this._onChangeEmit = t;
+  }
+  _onChangeEmit = null;
+  initVgs() {
+    this._vgsService.init(this._environment).then((e) => {
+      this._vgsService.createForm(
+        e,
+        (t) => this._handleStateChange(t)
+      ), this._mountFields();
+    });
+  }
+  async getPayload() {
+    if (!this._vgsJwt)
+      throw new Error("VGS not initialized");
+    const e = await this._vgsService.createCard(this._vgsJwt);
+    return {
+      cardId: e.cardId,
+      expMonth: e.expMonth,
+      expYear: e.expYear,
+      name: e.name
+    };
+  }
+  isValid() {
+    return this._vgsFieldsValid;
+  }
+  getError() {
+    const { t: e } = a();
+    for (const [t, r] of Object.entries(this._vgsState)) {
+      if (!r?.isTouched || r.isFocused || r.isValid)
+        continue;
+      const s = r.errors?.[0];
+      if (!s) continue;
+      const o = w(t, s.code);
+      if (o) return e(o);
+    }
+    return null;
+  }
+  applyTheme(e) {
+    if (this._currentTheme = { ...this._currentTheme, ...e }, !this._section) return;
+    const t = this._buildProfileFromTheme(this._currentTheme), r = this._currentTheme["--odus-border-color"] ?? "#e0e0e0";
+    this._section.updateVgsWrapperStyles(
+      r,
+      t.styles.borderRadius
+    ), this._reinitWithTheme();
+  }
+  destroy() {
+    this._vgsReinitTimer && (clearTimeout(this._vgsReinitTimer), this._vgsReinitTimer = null), this._vgsService.destroy(), this._section = null;
+  }
+  _reinitWithTheme() {
+    this._vgsReinitTimer && clearTimeout(this._vgsReinitTimer), this._vgsReinitTimer = setTimeout(() => {
+      this._vgsReinitTimer = null, this._vgsService.destroy(), this._vgsService = new y(), this.initVgs();
+    }, 300);
+  }
+  _buildProfileFromTheme(e) {
+    const t = e["--odus-input-font-size"] ?? e["--odus-font-size"] ?? `${c.styles.fontSize}px`, r = e["--odus-font-family"] ?? c.styles.fontFamily, s = e["--odus-color-text"] ?? c.styles.textColor, o = e["--odus-border-radius"] ?? `${c.styles.borderRadius}px`;
+    return {
+      ...c,
+      styles: {
+        ...c.styles,
+        fontSize: parseInt(t, 10) || c.styles.fontSize,
+        fontFamily: r,
+        textColor: s,
+        borderRadius: parseInt(o, 10) || c.styles.borderRadius
+      }
+    };
+  }
+  async _mountFields() {
+    if (!this._section) return;
+    const e = Object.keys(this._currentTheme).length > 0 ? this._buildProfileFromTheme(this._currentTheme) : c, t = this._currentTheme["--odus-border-color"] ?? "#e0e0e0";
+    this._section.updateVgsWrapperStyles(
+      t,
+      e.styles.borderRadius
+    );
+    const r = this._section.getVgsContainerIds();
+    for (const n of Object.values(r)) {
+      if (!n) continue;
+      const l = document.getElementById(n);
+      l && l.querySelectorAll("iframe").forEach((h) => h.remove());
+    }
+    const s = await A(e.styles.fontFamily), o = this._section.buildVgsFieldCss(e, s, {
+      borderColor: t,
+      backgroundColor: this._currentTheme["--odus-color-background"],
+      placeholderColor: this._currentTheme["--odus-input-placeholder-color"],
+      placeholderOpacity: this._currentTheme["--odus-input-placeholder-opacity"],
+      padding: this._currentTheme["--odus-input-padding"]
+    }), { t: i } = a();
+    this._vgsService.mountCardFields(
+      {
+        cardNumber: r.cardNumber ? `#${r.cardNumber}` : void 0,
+        cardExpiry: r.cardExpiry ? `#${r.cardExpiry}` : void 0,
+        cardCvv: r.cardCvv ? `#${r.cardCvv}` : void 0
+      },
+      o,
+      {
+        cardNumber: "1234 5678 9012 3456",
+        cardExpiry: i("cardExpiry"),
+        cardCvv: "CVV",
+        cardholderName: i("cardholderName")
+      },
+      (n) => {
+        this._section?.updateVgsCardBrand(n);
       }
-    }), this.shadowRoot.appendChild(this._section.getElement()), this._registerFocusFields();
+    ), this._vgsService.waitForFieldsReady().then(() => {
+      this._section?.hideFakePlaceholders();
+    });
+  }
+  _handleStateChange(e) {
+    this._vgsState = e, this._vgsFieldsValid = Object.values(e).every(
+      (s) => s?.isValid === !0
+    );
+    const { t } = a(), r = this._deriveFieldErrors(t);
+    this._section?.handleVgsStateChange(e, r), this._onChangeEmit?.();
+  }
+  _deriveFieldErrors(e) {
+    const t = {};
+    for (const [r, s] of Object.entries(this._vgsState)) {
+      if (!s?.isTouched || s.isFocused || s.isValid)
+        continue;
+      const o = s.errors?.[0];
+      if (!o) continue;
+      const i = w(r, o.code);
+      i && (t[r] = e(i));
+    }
+    return t;
+  }
+}
+class re extends u {
+  _environment = "test";
+  _isVgsMode = !1;
+  _mountContainer = null;
+  _nativeAdapter = new ee();
+  _vgsAdapter = null;
+  get isVgsMode() {
+    return this._isVgsMode;
+  }
+  setEnvironment(e) {
+    this._environment = e;
+  }
+  setVgsJwt(e) {
+    this._isVgsMode = !0, this._vgsAdapter = new te(e, this._environment), this.isMounted && this._mountContainer && (this.unmount(), this.mount(this._mountContainer));
+  }
+  mount(e) {
+    this.isMounted && this.unmount();
+    const t = typeof e == "string" ? document.querySelector(e) : e;
+    if (!t)
+      throw new Error(
+        `[CardElement] mount target not found: ${String(e)}`
+      );
+    if (this._mountContainer = e, this._isVgsMode) {
+      this.host = document.createElement("div");
+      const r = document.createElement("style");
+      r.textContent = this.getCss(), this.host.appendChild(r), t.appendChild(this.host), this.render(), this._vgsAdapter?.initVgs(), this.emit("ready");
+    } else
+      super.mount(e);
+  }
+  unmount() {
+    this._isVgsMode ? (this.host?.parentElement?.removeChild(this.host), this.host = null, this.shadowRoot = null) : super.unmount();
+  }
+  render() {
+    if (this._isVgsMode) {
+      if (!this.host || !this._vgsAdapter) return;
+      this._vgsAdapter.renderSection(
+        this.host,
+        () => this.emit("change", this.getValue())
+      );
+    } else {
+      if (!this.shadowRoot) return;
+      this._nativeAdapter.renderSection(
+        this.shadowRoot,
+        (e) => this.emit("change", e),
+        (e) => this.emit("blur", e)
+      );
+    }
   }
   focus() {
-    this._section?.focus();
+    (this._isVgsMode ? this._vgsAdapter?.section : this._nativeAdapter.section)?.focus();
   }
   focusField(e) {
-    this._section?.focusField(e);
+    (this._isVgsMode ? this._vgsAdapter?.section : this._nativeAdapter.section)?.focusField(e);
   }
   destroy() {
-    this._cleanupFocusHandlers(), super.destroy();
+    this._nativeAdapter.destroy(), this._vgsAdapter?.destroy(), this._vgsAdapter = null, super.destroy();
+  }
+  setTheme(e) {
+    super.setTheme(e), !(!this._isVgsMode || !this._vgsAdapter) && this._vgsAdapter.applyTheme(e);
   }
   getCss() {
-    return super.getCss() + [h, u, l, G].join(`
+    return super.getCss() + [f, m, p, Y].join(`
 `) + `
       :host { display: block; }
       .card-grid {
@@ -780,73 +1059,24 @@ class Y extends d {
     `;
   }
   getValue() {
-    return {
-      number: this._cardNumber,
-      expiry: this._cardExpiry,
-      cvv: this._cardCvv
-    };
+    return this._isVgsMode ? { number: "", expiry: "", cvv: "" } : this._nativeAdapter.getValue();
   }
-  getPayload() {
-    const e = this._environment === "live" ? H : J, t = new P();
-    t.setPublicKey(e);
-    const r = this._cardNumber.replace(/\s+/g, ""), o = this._cardExpiry.replace(/\s+/g, "").split("/"), s = o[0] ?? "";
-    let i = o[1] ?? "";
-    return i.length === 2 && (i = `20${i}`), {
-      encryptedCardNumber: t.encrypt(r),
-      encryptedCvv: t.encrypt(this._cardCvv),
-      expMonth: s,
-      expYear: i
-    };
+  async getPayload() {
+    if (this._isVgsMode) {
+      if (!this._vgsAdapter)
+        throw new Error("VGS not initialized");
+      return this._vgsAdapter.getPayload();
+    }
+    return this._nativeAdapter.getPayload(this._environment);
   }
   getIsValid() {
-    const e = c(), t = this._cardCvv.length >= 3;
-    return !e.cardNumber(this._cardNumber) && !e.cardExpiry(this._cardExpiry) && t;
+    return this._isVgsMode ? this._vgsAdapter?.isValid() ?? !1 : this._nativeAdapter.isValid();
   }
   getError() {
-    const e = c();
-    return e.cardNumber(this._cardNumber) ?? e.cardExpiry(this._cardExpiry) ?? null;
-  }
-  _registerFocusFields() {
-    if (this._cleanupFocusHandlers(), !this._section) return;
-    const e = this._section.getElement();
-    this._focusManager.registerField("cardNumber", {
-      focus: () => this._section?.focusField("cardNumber")
-    }), this._focusManager.registerField("cardExpiry", {
-      focus: () => this._section?.focusField("cardExpiry")
-    }), this._focusManager.registerField("cardCvv", {
-      focus: () => this._section?.focusField("cardCvv")
-    });
-    const t = ["cardNumber", "cardExpiry", "cardCvv"];
-    for (const r of t) {
-      const o = e.querySelector(`input[name="${r}"]`);
-      if (!o) continue;
-      const s = () => this._focusManager.handleFieldFocus(r);
-      o.addEventListener("focus", s), this._focusHandlers.push(
-        () => o.removeEventListener("focus", s)
-      );
-    }
-  }
-  _cleanupFocusHandlers() {
-    for (const e of this._focusHandlers)
-      e();
-    this._focusHandlers = [];
-  }
-  _updateFocusManagerState() {
-    const e = c(), t = {
-      cardNumber: this._cardNumber,
-      cardExpiry: this._cardExpiry,
-      cardCvv: this._cardCvv,
-      name: "",
-      email: ""
-    }, r = {}, o = e.cardNumber(this._cardNumber), s = e.cardExpiry(this._cardExpiry), i = e.cardCvv(this._cardCvv, this._cardNumber);
-    o && (r.cardNumber = o), s && (r.cardExpiry = s), i && (r.cardCvv = i);
-    const p = {};
-    for (const _ of this._touchedFields)
-      p[_] = !0;
-    this._focusManager.handleStateUpdate(t, r, p);
+    return this._isVgsMode ? this._vgsAdapter?.getError() ?? null : this._nativeAdapter.getError();
   }
 }
-class X extends d {
+class se extends u {
   _value = "";
   _error = null;
   _input = null;
@@ -854,7 +1084,7 @@ class X extends d {
     if (!this.shadowRoot) return;
     this._input?.getElement().remove();
     const { t: e } = a();
-    this._input = new m({
+    this._input = new g({
       name: "billingAddress.cardholderName",
       label: e("cardholderNameLabel"),
       error: !1,
@@ -862,8 +1092,8 @@ class X extends d {
       value: this._value,
       autocomplete: "cc-name",
       onChange: (t) => {
-        const o = t.target.value, s = o.replace(/[^a-zA-Z\s\-'.]/g, "");
-        o !== s && this._input?.setValue(s), this._value = s, this._error = null, this.emit("change", this._value);
+        const s = t.target.value, o = s.replace(/[^a-zA-Z\s\-'.]/g, "");
+        s !== o && this._input?.setValue(o), this._value = o, this._error = null, this.emit("change", this._value);
       }
     }), this._input.addEventListener("blur", () => {
       const { t } = a();
@@ -871,7 +1101,7 @@ class X extends d {
     }), this.shadowRoot.appendChild(this._input.getElement());
   }
   getCss() {
-    return super.getCss() + [h, u, l].join(`
+    return super.getCss() + [f, m, p].join(`
 `) + `
       :host { display: block; }
       .form-input {
@@ -912,7 +1142,7 @@ class X extends d {
     return this._error;
   }
 }
-const $ = {
+const oe = {
   name: "odus-elements",
   styles: {
     fontSize: 14,
@@ -937,7 +1167,7 @@ const $ = {
   },
   additionalPaymentMethods: {}
 };
-class ee extends d {
+class ie extends u {
   _email = "";
   _error = null;
   _field = null;
@@ -945,23 +1175,23 @@ class ee extends d {
     if (!this.shadowRoot) return;
     this._field?.getElement().remove(), this.options.initialValue && !this._email && (this._email = String(this.options.initialValue));
     const { t: e } = a();
-    this._field = new S({
+    this._field = new R({
       value: this._email,
       error: !1,
-      checkoutProfile: $,
+      checkoutProfile: oe,
       translationFunc: e,
       onChange: (t) => {
         const r = t.target;
         this._email = r.value ?? this._field?.getValue() ?? "", this._error = null, this.emit("change", this._email);
       },
       onBlur: () => {
-        const t = c();
+        const t = _();
         this._error = t.email(this._email) ?? null, this._field?.setError(!!this._error, this._error ?? void 0), this.emit("blur", this._email);
       }
     }), this.shadowRoot.appendChild(this._field.getElement());
   }
   getCss() {
-    return super.getCss() + [h, u, l].join(`
+    return super.getCss() + [f, m, p].join(`
 `) + `
       :host { display: block; }
       .form-input {
@@ -996,31 +1226,31 @@ class ee extends d {
     return this._email;
   }
   getIsValid() {
-    return !c().email(this._email);
+    return !_().email(this._email);
   }
   getError() {
     return this._error;
   }
 }
-const te = "@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-family:var(--odus-font-family, inherit);font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}";
-class re extends d {
+const ae = "@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-family:var(--odus-font-family, inherit);font-size:14px;color:#7f1d1d;line-height:1.5;word-break:break-word}";
+class ne extends u {
   _alert = null;
   _message = null;
   render() {
-    this.shadowRoot && (this._alert?.getElement().remove(), this._alert = null, this._message && (this._alert = new x({ message: this._message }), this.shadowRoot.appendChild(this._alert.getElement())));
+    this.shadowRoot && (this._alert?.getElement().remove(), this._alert = null, this._message && (this._alert = new C({ message: this._message }), this.shadowRoot.appendChild(this._alert.getElement())));
   }
   setError(e) {
     if (this._message = e, !this.shadowRoot) {
       this.emit("error", e);
       return;
     }
-    this._alert ? this._alert.setMessage(e) : (this._alert = new x({ message: e }), this.shadowRoot.appendChild(this._alert.getElement())), this.emit("error", e);
+    this._alert ? this._alert.setMessage(e) : (this._alert = new C({ message: e }), this.shadowRoot.appendChild(this._alert.getElement())), this.emit("error", e);
   }
   clearError() {
     this._message = null, this._alert?.getElement().remove(), this._alert = null;
   }
   getCss() {
-    return super.getCss() + te + `
+    return super.getCss() + ae + `
       :host { display: block; }
       .error-alert-icon,
       .error-alert-icon-container {
@@ -1041,7 +1271,7 @@ class re extends d {
     return this._message;
   }
 }
-const oe = ".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}", se = {
+const de = ".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}", le = {
   name: "odus-elements",
   styles: {
     fontSize: 14,
@@ -1066,7 +1296,7 @@ const oe = ".paypal{background-color:#ffc439;color:#253b80;font-weight:700;paddi
   },
   additionalPaymentMethods: {}
 };
-class ie extends d {
+class ue extends u {
   _paymentContext = null;
   _button = null;
   setPaymentContext(e) {
@@ -1075,8 +1305,8 @@ class ie extends d {
   render() {
     if (!this.shadowRoot || (this._button?.getElement().remove(), this._button = null, !this._paymentContext)) return;
     const { onAuthorize: e } = this._paymentContext;
-    this._button = new F({
-      checkoutProfile: se,
+    this._button = new M({
+      checkoutProfile: le,
       onSubmit: async () => {
         this._button?.setSubmitting(!0);
         try {
@@ -1088,7 +1318,7 @@ class ie extends d {
     }), this.shadowRoot.appendChild(this._button.getElement());
   }
   getCss() {
-    return super.getCss() + oe + `
+    return super.getCss() + de + `
       :host { display: block; }
       .paypal {
         width: 100%;
@@ -1110,7 +1340,7 @@ class ie extends d {
     return null;
   }
 }
-const ae = ".country-dial-code-dropdown{position:relative;display:inline-block}.country-dial-code-trigger{display:flex;align-items:center;gap:6px;padding:var(--odus-input-padding, 8px 12px);padding-right:8px;background:#fff;border:none;cursor:pointer;font-weight:400;letter-spacing:.02em;line-height:var(--odus-input-line-height, 1.5);transition:all .1s ease-in;white-space:nowrap;border-right:1px solid #e0e0e0;box-sizing:border-box}.country-dial-code-trigger:hover{background:#f5f5f5}.country-dial-code-trigger:focus{outline:none}.country-dial-code-trigger .country-flag{font-size:14px;line-height:1}.country-dial-code-trigger .country-chevron{color:#717173;flex-shrink:0;transition:transform .15s ease}.country-dial-code-trigger[aria-expanded=true] .country-chevron{transform:rotate(180deg)}.country-dial-code-panel{position:fixed;top:0;left:0;z-index:10000;width:280px;background:#fff;border-radius:8px;box-shadow:0 0 0 1px #0000000d,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:360px;display:flex;flex-direction:column;overflow:hidden}.country-dial-code-panel.hidden{display:none}.country-search-wrapper{padding:12px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.country-search{width:100%;padding:6px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:inherit;font-family:inherit;outline:none;transition:all .1s ease-in;box-sizing:border-box}.country-search:focus{border-color:#3297d3b3;box-shadow:0 0 0 3px #3297d31a}.country-search::placeholder{color:#717173;opacity:.6}.countries-list{overflow-y:auto;flex:1;min-height:0}.countries-list::-webkit-scrollbar{width:8px}.countries-list::-webkit-scrollbar-track{background:#f5f5f5}.countries-list::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:4px}.countries-list::-webkit-scrollbar-thumb:hover{background:#b0b0b0}.country-group-header{padding:8px 16px 4px;font-size:12px;font-weight:600;color:#717173;text-transform:uppercase;letter-spacing:.05em;background:#fafafa;position:sticky;top:0;z-index:1}.country-item{display:flex;align-items:center;gap:12px;padding:10px 16px;width:100%;border:none;background:#fff;cursor:pointer;transition:background .1s ease;text-align:left;font-size:14px;font-family:inherit;color:inherit}.country-item:hover{background:#f5f5f5}.country-item.selected{background:#3297d314;color:#3297d3}.country-item:focus{outline:none;background:#f0f0f0}.country-item .country-flag{font-size:20px;line-height:1;flex-shrink:0}.country-item .country-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.country-item .country-dial-code{color:#717173;font-size:.95em;flex-shrink:0}.country-item.selected .country-dial-code{color:#3297d3cc}.no-results{padding:24px 16px;text-align:center;color:#717173;font-size:14px}.phone-number-field-wrapper{display:flex;width:100%}.phone-number-field-container{display:flex;align-items:center;width:100%;border-radius:inherit;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;position:relative}.phone-number-field-container.focused{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;z-index:2}.phone-number-field-container.error{box-shadow:0 0 0 1px #dc2727,0 2px 4px #dc27271a}.phone-number-field-container.error.focused{box-shadow:0 0 0 1px #dc2727,0 1px 1px #00000012,0 0 0 4px #dc272733}.phone-number-field-container .country-select-wrapper{flex-shrink:0;position:relative;display:flex;align-items:center;gap:4px;padding:var(--odus-input-padding, 8px 12px);padding-right:6px;background:transparent;border-top-left-radius:var(--phone-border-radius, 0px);border-bottom-left-radius:var(--phone-border-radius, 0px);white-space:nowrap}.phone-number-field-container .country-select-wrapper .country-flag{font-size:14px;line-height:1;pointer-events:none}.phone-number-field-container .country-select-wrapper .country-chevron{display:flex;align-items:center;color:#717173;flex-shrink:0;pointer-events:none}.phone-number-field-container .country-select-wrapper .country-select{position:absolute;inset:0;border:none;outline:none;background:transparent;cursor:pointer;opacity:0;width:100%;height:100%}.phone-number-field-container .phone-input-wrapper{flex:1;min-width:0}.phone-number-field-container .phone-input-wrapper .form-input{border:none;box-shadow:none;border-radius:0;border-top-right-radius:var(--phone-border-radius, 0px);border-bottom-right-radius:var(--phone-border-radius, 0px);padding:var(--odus-input-padding, 8px 2px)}.phone-number-field-container .phone-input-wrapper .form-input:focus{box-shadow:none;z-index:auto}", ne = {
+const he = ".country-dial-code-dropdown{position:relative;display:inline-block}.country-dial-code-trigger{display:flex;align-items:center;gap:6px;padding:var(--odus-input-padding, 8px 12px);padding-right:8px;background:#fff;border:none;cursor:pointer;font-weight:400;letter-spacing:.02em;line-height:var(--odus-input-line-height, 1.5);transition:all .1s ease-in;white-space:nowrap;border-right:1px solid #e0e0e0;box-sizing:border-box}.country-dial-code-trigger:hover{background:#f5f5f5}.country-dial-code-trigger:focus{outline:none}.country-dial-code-trigger .country-flag{font-size:14px;line-height:1}.country-dial-code-trigger .country-chevron{color:#717173;flex-shrink:0;transition:transform .15s ease}.country-dial-code-trigger[aria-expanded=true] .country-chevron{transform:rotate(180deg)}.country-dial-code-panel{position:fixed;top:0;left:0;z-index:10000;width:280px;background:#fff;border-radius:8px;box-shadow:0 0 0 1px #0000000d,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;max-height:360px;display:flex;flex-direction:column;overflow:hidden}.country-dial-code-panel.hidden{display:none}.country-search-wrapper{padding:12px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.country-search{width:100%;padding:6px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:inherit;font-family:inherit;outline:none;transition:all .1s ease-in;box-sizing:border-box}.country-search:focus{border-color:#3297d3b3;box-shadow:0 0 0 3px #3297d31a}.country-search::placeholder{color:#717173;opacity:.6}.countries-list{overflow-y:auto;flex:1;min-height:0}.countries-list::-webkit-scrollbar{width:8px}.countries-list::-webkit-scrollbar-track{background:#f5f5f5}.countries-list::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:4px}.countries-list::-webkit-scrollbar-thumb:hover{background:#b0b0b0}.country-group-header{padding:8px 16px 4px;font-size:12px;font-weight:600;color:#717173;text-transform:uppercase;letter-spacing:.05em;background:#fafafa;position:sticky;top:0;z-index:1}.country-item{display:flex;align-items:center;gap:12px;padding:10px 16px;width:100%;border:none;background:#fff;cursor:pointer;transition:background .1s ease;text-align:left;font-size:14px;font-family:inherit;color:inherit}.country-item:hover{background:#f5f5f5}.country-item.selected{background:#3297d314;color:#3297d3}.country-item:focus{outline:none;background:#f0f0f0}.country-item .country-flag{font-size:20px;line-height:1;flex-shrink:0}.country-item .country-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.country-item .country-dial-code{color:#717173;font-size:.95em;flex-shrink:0}.country-item.selected .country-dial-code{color:#3297d3cc}.no-results{padding:24px 16px;text-align:center;color:#717173;font-size:14px}.phone-number-field-wrapper{display:flex;width:100%}.phone-number-field-container{display:flex;align-items:center;width:100%;border-radius:inherit;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;position:relative}.phone-number-field-container.focused{box-shadow:0 0 0 1px #3297d3b3,0 1px 1px #00000012,0 0 0 4px #3297d34d;z-index:2}.phone-number-field-container.error{box-shadow:0 0 0 1px #dc2727,0 2px 4px #dc27271a}.phone-number-field-container.error.focused{box-shadow:0 0 0 1px #dc2727,0 1px 1px #00000012,0 0 0 4px #dc272733}.phone-number-field-container .country-select-wrapper{flex-shrink:0;position:relative;display:flex;align-items:center;gap:4px;padding:var(--odus-input-padding, 8px 12px);padding-right:6px;background:transparent;border-top-left-radius:var(--phone-border-radius, 0px);border-bottom-left-radius:var(--phone-border-radius, 0px);white-space:nowrap}.phone-number-field-container .country-select-wrapper .country-flag{font-size:14px;line-height:1;pointer-events:none}.phone-number-field-container .country-select-wrapper .country-chevron{display:flex;align-items:center;color:#717173;flex-shrink:0;pointer-events:none}.phone-number-field-container .country-select-wrapper .country-select{position:absolute;inset:0;border:none;outline:none;background:transparent;cursor:pointer;opacity:0;width:100%;height:100%}.phone-number-field-container .phone-input-wrapper{flex:1;min-width:0}.phone-number-field-container .phone-input-wrapper .form-input{border:none;box-shadow:none;border-radius:0;border-top-right-radius:var(--phone-border-radius, 0px);border-bottom-right-radius:var(--phone-border-radius, 0px);padding:var(--odus-input-padding, 8px 2px)}.phone-number-field-container .phone-input-wrapper .form-input:focus{box-shadow:none;z-index:auto}", ce = {
   name: "odus-elements",
   styles: {
     fontSize: 14,
@@ -1135,7 +1365,7 @@ const ae = ".country-dial-code-dropdown{position:relative;display:inline-block}.
   },
   additionalPaymentMethods: {}
 };
-class de extends d {
+class pe extends u {
   _phone = "";
   _error = null;
   _field = null;
@@ -1144,28 +1374,28 @@ class de extends d {
     if (!this.shadowRoot) return;
     this._field?.destroy(), this._field?.getElement().remove(), this._field = null, this.options.initialValue && !this._phone && (this._phone = String(this.options.initialValue));
     const e = ++this._renderGeneration;
-    R().then(({ PhoneNumberField: t }) => {
+    T().then(({ PhoneNumberField: t }) => {
       if (!this.shadowRoot || this._renderGeneration !== e) return;
-      const { t: r, locale: o } = a();
+      const { t: r, locale: s } = a();
       this._field = new t({
         value: this._phone,
         error: !1,
-        checkoutProfile: ne,
+        checkoutProfile: ce,
         translationFunc: r,
-        locale: o,
+        locale: s,
         onChange: () => {
           this._phone = this._field?.getValue() ?? "", this._error = null, this.emit("change", this._phone);
         },
         onBlur: () => {
           this._phone = this._field?.getValue() ?? "";
-          const s = c(), i = this._field?.getCountry();
-          this._error = s.phoneNumber(this._phone, i) ?? null, this._field?.setError(!!this._error, this._error ?? void 0), this.emit("blur", this._phone);
+          const o = _(), i = this._field?.getCountry();
+          this._error = o.phoneNumber(this._phone, i) ?? null, this._field?.setError(!!this._error, this._error ?? void 0), this.emit("blur", this._phone);
         }
       }), this.shadowRoot.appendChild(this._field.getElement());
     });
   }
   getCss() {
-    return super.getCss() + [h, u, l, ae].join(`
+    return super.getCss() + [f, m, p, he].join(`
 `) + `
       :host { display: block; }
       .form-input,
@@ -1213,14 +1443,14 @@ class de extends d {
     return this._phone;
   }
   getIsValid() {
-    const e = c(), t = this._field?.getCountry();
+    const e = _(), t = this._field?.getCountry();
     return !e.phoneNumber(this._phone, t);
   }
   getError() {
     return this._error;
   }
 }
-class ue {
+class fe {
   _config;
   _apiService;
   _changeListeners = [];
@@ -1243,21 +1473,21 @@ class ue {
   _error;
   elements;
   constructor(e) {
-    this._config = e, this._callbacks = { ...e.callbacks }, e.locale && A.setLocale(e.locale), this._apiService = new V(
+    this._config = e, this._callbacks = { ...e.callbacks }, e.locale && I.setLocale(e.locale), this._apiService = new B(
       e.apiKey,
       e.environment
     );
     const t = {};
     Object.defineProperty(t, "email", {
-      get: () => (this._email || (this._email = new ee(), this._trackElement(this._email)), this._email),
+      get: () => (this._email || (this._email = new ie(), this._trackElement(this._email)), this._email),
       enumerable: !0
     }), Object.defineProperty(t, "phone", {
-      get: () => (this._phone || (this._phone = new de(), this._trackElement(this._phone)), this._phone),
+      get: () => (this._phone || (this._phone = new pe(), this._trackElement(this._phone)), this._phone),
       enumerable: !0
     });
     const r = {};
     Object.defineProperty(r, "applePay", {
-      get: () => (this._applePay || (this._applePay = new U(), this._trackElement(this._applePay), this._paymentState.paymentId && this._paymentState.checkoutKey && this._applePay.setPaymentContext({
+      get: () => (this._applePay || (this._applePay = new H(), this._trackElement(this._applePay), this._paymentState.paymentId && this._paymentState.checkoutKey && this._applePay.setPaymentContext({
         paymentId: this._paymentState.paymentId,
         checkoutKey: this._paymentState.checkoutKey,
         environment: this._config.environment,
@@ -1267,58 +1497,58 @@ class ue {
       })), this._applePay),
       enumerable: !0
     }), Object.defineProperty(r, "payPal", {
-      get: () => (this._paypal || (this._paypal = new ie(), this._trackElement(this._paypal), this._paymentState.paymentId && this._paymentState.checkoutKey && this._paypal.setPaymentContext({
+      get: () => (this._paypal || (this._paypal = new ue(), this._trackElement(this._paypal), this._paymentState.paymentId && this._paymentState.checkoutKey && this._paypal.setPaymentContext({
         paymentId: this._paymentState.paymentId,
         checkoutKey: this._paymentState.checkoutKey,
         onAuthorize: () => this._executeAuthorization({ formData: null })
       })), this._paypal),
       enumerable: !0
     });
-    const o = {};
-    Object.defineProperty(o, "street", {
-      get: () => (this._addressStreet || (this._addressStreet = new D(), this._trackElement(this._addressStreet)), this._addressStreet),
+    const s = {};
+    Object.defineProperty(s, "street", {
+      get: () => (this._addressStreet || (this._addressStreet = new G(), this._trackElement(this._addressStreet)), this._addressStreet),
       enumerable: !0
-    }), Object.defineProperty(o, "firstName", {
-      get: () => (this._addressFirstName || (this._addressFirstName = new j(), this._trackElement(this._addressFirstName)), this._addressFirstName),
+    }), Object.defineProperty(s, "firstName", {
+      get: () => (this._addressFirstName || (this._addressFirstName = new J(), this._trackElement(this._addressFirstName)), this._addressFirstName),
       enumerable: !0
-    }), Object.defineProperty(o, "lastName", {
-      get: () => (this._addressLastName || (this._addressLastName = new q(), this._trackElement(this._addressLastName)), this._addressLastName),
+    }), Object.defineProperty(s, "lastName", {
+      get: () => (this._addressLastName || (this._addressLastName = new K(), this._trackElement(this._addressLastName)), this._addressLastName),
       enumerable: !0
-    }), Object.defineProperty(o, "city", {
-      get: () => (this._addressCity || (this._addressCity = new L(), this._trackElement(this._addressCity)), this._addressCity),
+    }), Object.defineProperty(s, "city", {
+      get: () => (this._addressCity || (this._addressCity = new q(), this._trackElement(this._addressCity)), this._addressCity),
       enumerable: !0
-    }), Object.defineProperty(o, "state", {
-      get: () => (this._addressState || (this._addressState = new O(), this._trackElement(this._addressState)), this._addressState),
+    }), Object.defineProperty(s, "state", {
+      get: () => (this._addressState || (this._addressState = new Z(), this._trackElement(this._addressState)), this._addressState),
       enumerable: !0
-    }), Object.defineProperty(o, "zipCode", {
-      get: () => (this._addressZipCode || (this._addressZipCode = new Z(), this._trackElement(this._addressZipCode)), this._addressZipCode),
+    }), Object.defineProperty(s, "zipCode", {
+      get: () => (this._addressZipCode || (this._addressZipCode = new U(), this._trackElement(this._addressZipCode)), this._addressZipCode),
       enumerable: !0
-    }), Object.defineProperty(o, "country", {
-      get: () => (this._addressCountry || (this._addressCountry = new T(), this._trackElement(this._addressCountry), this._addressCountry.on("change", (i) => {
+    }), Object.defineProperty(s, "country", {
+      get: () => (this._addressCountry || (this._addressCountry = new D(), this._trackElement(this._addressCountry), this._addressCountry.on("change", (i) => {
         this._addressState?.setCountry(i);
       })), this._addressCountry),
       enumerable: !0
     });
-    const s = { contact: t, express: r };
-    Object.defineProperty(s, "card", {
-      get: () => (this._card || (this._card = new Y(), this._card.setEnvironment(this._config.environment), this._trackElement(this._card)), this._card),
+    const o = { contact: t, express: r };
+    Object.defineProperty(o, "card", {
+      get: () => (this._card || (this._card = new re(), this._card.setEnvironment(this._config.environment), this._trackElement(this._card), this._paymentState.vgsJwt && this._card.setVgsJwt(this._paymentState.vgsJwt)), this._card),
       enumerable: !0
-    }), Object.defineProperty(s, "cardholderName", {
-      get: () => (this._cardholderName || (this._cardholderName = new X(), this._trackElement(this._cardholderName)), this._cardholderName),
+    }), Object.defineProperty(o, "cardholderName", {
+      get: () => (this._cardholderName || (this._cardholderName = new se(), this._trackElement(this._cardholderName)), this._cardholderName),
       enumerable: !0
-    }), Object.defineProperty(s, "address", {
-      get: () => o,
+    }), Object.defineProperty(o, "address", {
+      get: () => s,
       enumerable: !0
-    }), Object.defineProperty(s, "error", {
-      get: () => (this._error || (this._error = new re(), this._trackElement(this._error)), this._error),
+    }), Object.defineProperty(o, "error", {
+      get: () => (this._error || (this._error = new ne(), this._trackElement(this._error)), this._error),
       enumerable: !0
-    }), this.elements = s;
+    }), this.elements = o;
   }
   async associatePayment(e, t) {
     if (!e || !t)
       throw new Error("paymentId and checkoutKey are required");
     this._paymentState.paymentId = e, this._paymentState.checkoutKey = t;
-    const r = await M({
+    const r = await L({
       id: e,
       checkoutKey: t,
       environment: this._config.environment
@@ -1327,13 +1557,13 @@ class ue {
       amount: r.amount,
       currency: r.currency,
       countryCode: r.countryCode
-    }, this._card?.setEnvironment(this._config.environment), this._applePay?.setPaymentContext({
+    }, r.vgsJwt && (this._paymentState.vgsJwt = r.vgsJwt, this._card?.setVgsJwt(r.vgsJwt)), this._card?.setEnvironment(this._config.environment), this._applePay?.setPaymentContext({
       paymentId: e,
       checkoutKey: t,
       environment: this._config.environment,
       checkoutDetails: this._paymentState.checkoutDetails,
       ...this._config.additionalPaymentMethods?.applePay,
-      onAuthorize: (o) => this._executeAuthorization({ formData: null, applePayData: o })
+      onAuthorize: (s) => this._executeAuthorization({ formData: null, applePayData: s })
     }), this._paypal?.setPaymentContext({
       paymentId: e,
       checkoutKey: t,
@@ -1344,12 +1574,10 @@ class ue {
     const e = {}, { t } = a();
     return this._card?.isMounted && !this._card.isValid && (e.card = this._card.error ?? "Card details are invalid"), this._email?.isMounted && !this._email.isValid && (e.email = this._email.error ?? t("validation.emailInvalid")), this._phone?.isMounted && !this._phone.isValid && (e.phone = this._phone.error ?? t("validation.phoneNumberInvalid")), this._addressStreet?.isMounted && !this._addressStreet.isValid && (e["address.street"] = this._addressStreet.error ?? t("validation.streetRequired")), this._addressCity?.isMounted && !this._addressCity.isValid && (e["address.city"] = this._addressCity.error ?? t("validation.cityRequired")), this._addressCountry?.isMounted && !this._addressCountry.isValid && (e["address.country"] = this._addressCountry.error ?? t("validation.countryRequired")), this._addressFirstName?.isMounted && !this._addressFirstName.isValid && (e["address.firstName"] = this._addressFirstName.error ?? t("validation.firstNameRequired")), this._addressLastName?.isMounted && !this._addressLastName.isValid && (e["address.lastName"] = this._addressLastName.error ?? t("validation.lastNameRequired")), this._cardholderName?.isMounted && !this._cardholderName.isValid && (e.cardholderName = this._cardholderName.error ?? t("validation.nameRequired")), this._addressState?.isMounted && !this._addressState.isValid && (e["address.state"] = this._addressState.error ?? t("validation.stateRequired")), this._addressZipCode?.isMounted && !this._addressZipCode.isValid && (e["address.zipCode"] = this._addressZipCode.error ?? t("validation.zipCodeRequired")), this._applePay?.isMounted && !this._applePay.isValid && (e.applePay = "Apple Pay authorization required"), this._paypal?.isMounted && !this._paypal.isValid && (e.paypal = "PayPal authorization required"), { valid: Object.keys(e).length === 0, errors: e };
   }
-  _getPayload() {
+  async _getPayload() {
     if (this._applePay?.isMounted && this._applePay.isValid || this._paypal?.isMounted)
       return null;
-    const e = this._card?.isMounted ? this._card.value : null;
-    if (!e) return null;
-    const t = this._email?.isMounted ? this._email.value : "", r = this._phone?.isMounted ? this._phone.value : void 0, s = this._addressStreet?.isMounted || this._addressCity?.isMounted || this._addressCountry?.isMounted || this._addressFirstName?.isMounted || this._addressLastName?.isMounted || this._cardholderName?.isMounted || this._addressState?.isMounted || this._addressZipCode?.isMounted ? {
+    const e = this._email?.isMounted ? this._email.value : "", t = this._phone?.isMounted ? this._phone.value : void 0, s = this._addressStreet?.isMounted || this._addressCity?.isMounted || this._addressCountry?.isMounted || this._addressFirstName?.isMounted || this._addressLastName?.isMounted || this._cardholderName?.isMounted || this._addressState?.isMounted || this._addressZipCode?.isMounted ? {
       street: this._addressStreet?.isMounted ? this._addressStreet.value : "",
       city: this._addressCity?.isMounted ? this._addressCity.value : "",
       country: this._addressCountry?.isMounted ? this._addressCountry.value : "",
@@ -1357,19 +1585,40 @@ class ue {
       lastName: this._addressLastName?.isMounted ? this._addressLastName.value : "",
       state: this._addressState?.isMounted ? this._addressState.value : "",
       zipCode: this._addressZipCode?.isMounted ? this._addressZipCode.value : ""
-    } : void 0, i = this._cardholderName?.isMounted ? this._cardholderName.value : "", p = [
+    } : void 0, o = this._cardholderName?.isMounted ? this._cardholderName.value : "", i = [
       s?.firstName ?? "",
       s?.lastName ?? ""
-    ].filter(Boolean);
-    return {
-      name: i || p.join(" "),
-      email: t,
-      phoneNumber: r || void 0,
-      cardNumber: e.number,
-      cardExpiry: e.expiry,
-      cardCvv: e.cvv,
+    ].filter(Boolean), n = o || i.join(" ");
+    if (this._card?.isMounted && this._card.isVgsMode)
+      try {
+        const h = await this._card.getPayload();
+        return {
+          name: n,
+          email: e,
+          phoneNumber: t || void 0,
+          cardNumber: "",
+          cardExpiry: "",
+          cardCvv: "",
+          billingAddress: s,
+          vgsCardData: h
+        };
+      } catch {
+        return this._handleAuthorizationError({
+          message: "We couldn't securely process your card details. Please check your card information and try again.",
+          status: 0,
+          statusText: "Card Tokenization Failed"
+        }), null;
+      }
+    const l = this._card?.isMounted ? this._card.value : null;
+    return l ? {
+      name: n,
+      email: e,
+      phoneNumber: t || void 0,
+      cardNumber: l.number,
+      cardExpiry: l.expiry,
+      cardCvv: l.cvv,
       billingAddress: s
-    };
+    } : null;
   }
   async authorize(e) {
     if (!this._paymentState.paymentId || !this._paymentState.checkoutKey)
@@ -1385,7 +1634,7 @@ class ue {
       await this._executeAuthorization({ formData: null });
       return;
     }
-    const t = this._getPayload();
+    const t = await this._getPayload();
     await this._executeAuthorization({
       formData: t,
       applePayData: void 0,
@@ -1396,7 +1645,7 @@ class ue {
     const t = e["--odus-font-family"];
     if (t) {
       this._fontCleanup?.();
-      const { cleanup: r } = B({ fontFamily: t });
+      const { cleanup: r } = j({ fontFamily: t });
       this._fontCleanup = r;
     }
     for (const r of this._allElements())
@@ -1449,17 +1698,19 @@ class ue {
     customCustomerData: r
   }) {
     try {
-      const o = await this._apiService.authorizePayment({
+      const s = await this._apiService.authorizePayment({
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         paymentId: this._paymentState.paymentId,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         checkoutKey: this._paymentState.checkoutKey,
         formData: e,
         returnUrl: this._config.returnUrl,
         applePayData: t,
         customCustomerData: r
       });
-      this._handlePaymentResponse(o);
-    } catch (o) {
-      this._handleAuthorizationError(o);
+      this._handlePaymentResponse(s);
+    } catch (s) {
+      this._handleAuthorizationError(s);
     }
   }
   _handlePaymentResponse(e) {
@@ -1481,20 +1732,20 @@ class ue {
   }
 }
 export {
-  L as AddressCityElement,
-  T as AddressCountryElement,
-  j as AddressFirstNameElement,
-  q as AddressLastNameElement,
-  O as AddressStateElement,
-  D as AddressStreetElement,
-  Z as AddressZipCodeElement,
-  U as ApplePayElement,
-  d as BaseElement,
-  Y as CardElement,
-  X as CardholderElement,
-  ee as EmailElement,
-  re as ErrorElement,
-  ue as OdusElements,
-  ie as PayPalElement,
-  de as PhoneElement
+  q as AddressCityElement,
+  D as AddressCountryElement,
+  J as AddressFirstNameElement,
+  K as AddressLastNameElement,
+  Z as AddressStateElement,
+  G as AddressStreetElement,
+  U as AddressZipCodeElement,
+  H as ApplePayElement,
+  u as BaseElement,
+  re as CardElement,
+  se as CardholderElement,
+  ie as EmailElement,
+  ne as ErrorElement,
+  fe as OdusElements,
+  ue as PayPalElement,
+  pe as PhoneElement
 };