@odus/checkout 0.25.0 → 0.26.0-beta.1

package/dist/elements.es.js

@@ -0,0 +1,1496 @@
+import { l as a, I as m, S as y, g as C, b as g, A as E, F as k, i as z, a as c, f as N, J as S, E as P, k as x, P as F, h as R, w as A, m as V, n as M, j as B } from "./Alert-CeFsv_tJ.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;flex-grow:1;flex-basis: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, 500);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: 500;--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, 500)!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 {
+  shadowRoot = null;
+  host = null;
+  options = {};
+  listeners = /* @__PURE__ */ new Map();
+  get isMounted() {
+    return this.host !== null;
+  }
+  mount(e) {
+    this.isMounted && this.unmount();
+    const t = typeof e == "string" ? document.querySelector(e) : e;
+    if (!t)
+      throw new Error(
+        `[BaseElement] mount target not found: ${String(e)}`
+      );
+    this.host = document.createElement("div"), this.shadowRoot = this.host.attachShadow({ mode: "open" });
+    const r = document.createElement("style");
+    r.textContent = this.getCss(), this.shadowRoot.appendChild(r), t.appendChild(this.host), this.render(), this.emit("ready");
+  }
+  unmount() {
+    this.host?.parentElement?.removeChild(this.host), this.host = null, this.shadowRoot = null;
+  }
+  destroy() {
+    this.unmount(), this.listeners.clear();
+  }
+  on(e, t) {
+    const r = this.listeners.get(e) ?? [];
+    return r.push(t), this.listeners.set(e, r), this;
+  }
+  update(e) {
+    if (this.options = { ...this.options, ...e }, this.shadowRoot) {
+      const t = this.shadowRoot.querySelector("style");
+      t && (t.textContent = this.getCss()), this.render();
+    }
+  }
+  setTheme(e) {
+    if (this.host)
+      for (const [t, r] of Object.entries(e))
+        this.host.style.setProperty(t, r);
+  }
+  resetTheme(e) {
+    if (this.host)
+      for (const t of Object.keys(e))
+        this.host.style.removeProperty(t);
+  }
+  get value() {
+    return this.getValue();
+  }
+  get isValid() {
+    return this.getIsValid();
+  }
+  get error() {
+    return this.getError();
+  }
+  emit(e, t) {
+    const r = this.listeners.get(e) ?? [];
+    for (const o of r)
+      o(t);
+    this.options.callbacks?.[e]?.(t);
+  }
+  getCss() {
+    return I;
+  }
+}
+class L extends d {
+  _value = "";
+  _error = null;
+  _input = null;
+  render() {
+    if (!this.shadowRoot) return;
+    this._input?.getElement().remove();
+    const { t: e } = a();
+    this._input = new m({
+      name: "billingAddress.city",
+      label: e("address.city"),
+      error: !1,
+      placeholder: e("address.city"),
+      value: this._value,
+      autocomplete: "address-level2",
+      onChange: (t) => {
+        this._value = t.target.value, this._error = null, this.emit("change", this._value);
+      }
+    }), this._input.addEventListener("blur", () => {
+      const { t } = a();
+      this._error = this._value.trim() ? null : t("validation.cityRequired"), this._input?.setError(!!this._error, this._error ?? void 0), this.emit("blur", this._value);
+    }), this.shadowRoot.appendChild(this._input.getElement());
+  }
+  getCss() {
+    return super.getCss() + [h, u, l].join(`
+`) + `
+      :host { display: block; }
+      .form-input {
+        color: var(--odus-color-text, #1a1a1a) !important;
+        font-family: var(--odus-font-family, system-ui, sans-serif) !important;
+        font-size: var(--odus-input-font-size, 16px) !important;
+        background: var(--odus-color-background, #ffffff) !important;
+        border-radius: var(--odus-border-radius, 6px) !important;
+        box-shadow:
+          0 0 0 1px var(--odus-border-color, #e0e0e0),
+          0 2px 4px 0 rgba(0, 0, 0, 0.07),
+          0 1px 1.5px 0 rgba(0, 0, 0, 0.05) !important;
+      }
+      .form-input:focus {
+        box-shadow: var(
+          --odus-input-focus-shadow,
+          0 0 0 1px rgba(50, 151, 211, 0.7),
+          0 1px 1px 0 rgba(0, 0, 0, 0.07),
+          0 0 0 4px rgba(50, 151, 211, 0.3)
+        ) !important;
+        outline: none !important;
+      }
+      .form-input-error {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+      .form-helper-text {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+    `;
+  }
+  getValue() {
+    return this._value;
+  }
+  getIsValid() {
+    return !!this._value.trim();
+  }
+  getError() {
+    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='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23717173' d='M6 8.5L1.5 4h9L6 8.5z'/%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 {
+  _value = "";
+  _error = null;
+  _select = null;
+  _allowedCountries;
+  setCountries(e) {
+    this._allowedCountries = e.length > 0 ? e : void 0, this._value && this._allowedCountries && !this._allowedCountries.includes(this._value) && (this._value = "", this._error = null, this.emit("change", this._value)), this.shadowRoot && this.render();
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    this._select?.getElement().remove(), this.options.initialValue && !this._value && (this._value = String(this.options.initialValue));
+    const { t: e } = a();
+    this._select = new y({
+      name: "billingAddress.country",
+      label: e("address.country"),
+      error: !1,
+      placeholder: e("address.chooseCountry"),
+      value: this._value,
+      options: C(this._allowedCountries),
+      autocomplete: "country",
+      onChange: (t) => {
+        this._value = t.target.value, this._error = null, this.emit("change", this._value);
+      }
+    }), this._select.addEventListener("blur", () => {
+      const { t } = a();
+      this._error = this._value ? null : t("validation.countryRequired"), this._select?.setError(!!this._error, this._error ?? void 0), this.emit("blur", this._value);
+    }), this.shadowRoot.appendChild(this._select.getElement());
+  }
+  getCss() {
+    return super.getCss() + [u, l, v].join(`
+`) + `
+      :host { display: block; }
+      .form-select {
+        color: var(--odus-color-text, #1a1a1a) !important;
+        font-family: var(--odus-font-family, system-ui, sans-serif) !important;
+        font-size: var(--odus-input-font-size, 16px) !important;
+        background: var(--odus-color-background, #ffffff) !important;
+        border-radius: var(--odus-border-radius, 6px) !important;
+        box-shadow:
+          0 0 0 1px var(--odus-border-color, #e0e0e0),
+          0 2px 4px 0 rgba(0, 0, 0, 0.07),
+          0 1px 1.5px 0 rgba(0, 0, 0, 0.05) !important;
+      }
+      .form-select:focus {
+        box-shadow: var(
+          --odus-input-focus-shadow,
+          0 0 0 1px rgba(50, 151, 211, 0.7),
+          0 1px 1px 0 rgba(0, 0, 0, 0.07),
+          0 0 0 4px rgba(50, 151, 211, 0.3)
+        ) !important;
+        outline: none !important;
+      }
+      .form-select-error {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+      .form-helper-text {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+    `;
+  }
+  getValue() {
+    return this._value;
+  }
+  getIsValid() {
+    return !!this._value;
+  }
+  getError() {
+    return this._error;
+  }
+}
+class j extends d {
+  _value = "";
+  _error = null;
+  _input = null;
+  render() {
+    if (!this.shadowRoot) return;
+    this._input?.getElement().remove();
+    const { t: e } = a();
+    this._input = new m({
+      name: "billingAddress.firstName",
+      label: e("address.firstName"),
+      error: !1,
+      placeholder: e("address.firstName"),
+      value: this._value,
+      autocomplete: "given-name",
+      onChange: (t) => {
+        this._value = t.target.value, this._error = null, this.emit("change", this._value);
+      }
+    }), this._input.addEventListener("blur", () => {
+      const { t } = a();
+      this._error = this._value.trim() ? null : t("validation.firstNameRequired"), this._input?.setError(!!this._error, this._error ?? void 0), this.emit("blur", this._value);
+    }), this.shadowRoot.appendChild(this._input.getElement());
+  }
+  getCss() {
+    return super.getCss() + [h, u, l].join(`
+`) + `
+      :host { display: block; }
+      .form-input {
+        color: var(--odus-color-text, #1a1a1a) !important;
+        font-family: var(--odus-font-family, system-ui, sans-serif) !important;
+        font-size: var(--odus-input-font-size, 16px) !important;
+        background: var(--odus-color-background, #ffffff) !important;
+        border-radius: var(--odus-border-radius, 6px) !important;
+        box-shadow:
+          0 0 0 1px var(--odus-border-color, #e0e0e0),
+          0 2px 4px 0 rgba(0, 0, 0, 0.07),
+          0 1px 1.5px 0 rgba(0, 0, 0, 0.05) !important;
+      }
+      .form-input:focus {
+        box-shadow: var(
+          --odus-input-focus-shadow,
+          0 0 0 1px rgba(50, 151, 211, 0.7),
+          0 1px 1px 0 rgba(0, 0, 0, 0.07),
+          0 0 0 4px rgba(50, 151, 211, 0.3)
+        ) !important;
+        outline: none !important;
+      }
+      .form-input-error {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+      .form-helper-text {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+    `;
+  }
+  getValue() {
+    return this._value;
+  }
+  getIsValid() {
+    return !!this._value.trim();
+  }
+  getError() {
+    return this._error;
+  }
+}
+class q extends d {
+  _value = "";
+  _error = null;
+  _input = null;
+  render() {
+    if (!this.shadowRoot) return;
+    this._input?.getElement().remove();
+    const { t: e } = a();
+    this._input = new m({
+      name: "billingAddress.lastName",
+      label: e("address.lastName"),
+      error: !1,
+      placeholder: e("address.lastName"),
+      value: this._value,
+      autocomplete: "family-name",
+      onChange: (t) => {
+        this._value = t.target.value, this._error = null, this.emit("change", this._value);
+      }
+    }), this._input.addEventListener("blur", () => {
+      const { t } = a();
+      this._error = this._value.trim() ? null : t("validation.lastNameRequired"), this._input?.setError(!!this._error, this._error ?? void 0), this.emit("blur", this._value);
+    }), this.shadowRoot.appendChild(this._input.getElement());
+  }
+  getCss() {
+    return super.getCss() + [h, u, l].join(`
+`) + `
+      :host { display: block; }
+      .form-input {
+        color: var(--odus-color-text, #1a1a1a) !important;
+        font-family: var(--odus-font-family, system-ui, sans-serif) !important;
+        font-size: var(--odus-input-font-size, 16px) !important;
+        background: var(--odus-color-background, #ffffff) !important;
+        border-radius: var(--odus-border-radius, 6px) !important;
+        box-shadow:
+          0 0 0 1px var(--odus-border-color, #e0e0e0),
+          0 2px 4px 0 rgba(0, 0, 0, 0.07),
+          0 1px 1.5px 0 rgba(0, 0, 0, 0.05) !important;
+      }
+      .form-input:focus {
+        box-shadow: var(
+          --odus-input-focus-shadow,
+          0 0 0 1px rgba(50, 151, 211, 0.7),
+          0 1px 1px 0 rgba(0, 0, 0, 0.07),
+          0 0 0 4px rgba(50, 151, 211, 0.3)
+        ) !important;
+        outline: none !important;
+      }
+      .form-input-error {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+      .form-helper-text {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+    `;
+  }
+  getValue() {
+    return this._value;
+  }
+  getIsValid() {
+    return !!this._value.trim();
+  }
+  getError() {
+    return this._error;
+  }
+}
+const b = /* @__PURE__ */ new Set(["US", "CA"]);
+class D extends d {
+  _value = "";
+  _country = "";
+  _input = null;
+  _select = null;
+  _allowedStates;
+  setStates(e) {
+    this._allowedStates = e.length > 0 ? e : void 0, this._value && this._allowedStates && !this._allowedStates.includes(this._value) && (this._value = "", this.emit("change", this._value)), this.shadowRoot && this.render();
+  }
+  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(this._allowedStates, i),
+        p
+      ), this._value = "";
+      return;
+    }
+    r !== o && (this._value = "", this.render());
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    this._input?.getElement().remove(), this._select?.getElement().remove(), this._input = null, this._select = null;
+    const e = b.has(this._country);
+    if (this._allowedStates || e) {
+      const t = e ? this._country : "US";
+      this._renderSelect(t);
+    } else
+      this._renderInput();
+  }
+  _renderInput() {
+    const { t: e } = a();
+    this._input = new m({
+      name: "billingAddress.state",
+      label: e("address.state"),
+      error: !1,
+      placeholder: e("address.state"),
+      value: this._value,
+      autocomplete: "address-level1",
+      onChange: (t) => {
+        this._value = t.target.value, this.emit("change", this._value);
+      }
+    }), this._input.addEventListener("blur", () => {
+      this.emit("blur", this._value);
+    }), this.shadowRoot.appendChild(this._input.getElement());
+  }
+  _renderSelect(e) {
+    const { t } = a(), r = g(this._allowedStates, e), o = t(e === "US" ? "address.chooseState" : "address.chooseProvince");
+    this._select = new y({
+      name: "billingAddress.state",
+      label: t("address.state"),
+      error: !1,
+      placeholder: o,
+      value: this._value,
+      options: r,
+      autocomplete: "address-level1",
+      onChange: (s) => {
+        this._value = s.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(`
+`) + `
+      :host { display: block; }
+      .form-input,
+      .form-select {
+        color: var(--odus-color-text, #1a1a1a) !important;
+        font-family: var(--odus-font-family, system-ui, sans-serif) !important;
+        font-size: var(--odus-input-font-size, 16px) !important;
+        background: var(--odus-color-background, #ffffff) !important;
+        border-radius: var(--odus-border-radius, 6px) !important;
+        box-shadow:
+          0 0 0 1px var(--odus-border-color, #e0e0e0),
+          0 2px 4px 0 rgba(0, 0, 0, 0.07),
+          0 1px 1.5px 0 rgba(0, 0, 0, 0.05) !important;
+      }
+      .form-input:focus,
+      .form-select:focus {
+        box-shadow: var(
+          --odus-input-focus-shadow,
+          0 0 0 1px rgba(50, 151, 211, 0.7),
+          0 1px 1px 0 rgba(0, 0, 0, 0.07),
+          0 0 0 4px rgba(50, 151, 211, 0.3)
+        ) !important;
+        outline: none !important;
+      }
+      .form-input-error,
+      .form-select-error {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+      .form-helper-text {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+    `;
+  }
+  getValue() {
+    return this._value;
+  }
+  getIsValid() {
+    return !0;
+  }
+  getError() {
+    return null;
+  }
+}
+class O extends d {
+  _value = "";
+  _error = null;
+  _input = null;
+  render() {
+    if (!this.shadowRoot) return;
+    this._input?.getElement().remove();
+    const { t: e } = a();
+    this._input = new m({
+      name: "billingAddress.street",
+      label: e("address.street"),
+      error: !1,
+      placeholder: e("address.street"),
+      value: this._value,
+      autocomplete: "street-address",
+      onChange: (t) => {
+        this._value = t.target.value, this._error = null, this.emit("change", this._value);
+      }
+    }), this._input.addEventListener("blur", () => {
+      const { t } = a();
+      this._error = this._value.trim() ? null : t("validation.streetRequired"), this._input?.setError(!!this._error, this._error ?? void 0), this.emit("blur", this._value);
+    }), this.shadowRoot.appendChild(this._input.getElement());
+  }
+  getCss() {
+    return super.getCss() + [h, u, l].join(`
+`) + `
+      :host { display: block; }
+      .form-input {
+        color: var(--odus-color-text, #1a1a1a) !important;
+        font-family: var(--odus-font-family, system-ui, sans-serif) !important;
+        font-size: var(--odus-input-font-size, 16px) !important;
+        background: var(--odus-color-background, #ffffff) !important;
+        border-radius: var(--odus-border-radius, 6px) !important;
+        box-shadow:
+          0 0 0 1px var(--odus-border-color, #e0e0e0),
+          0 2px 4px 0 rgba(0, 0, 0, 0.07),
+          0 1px 1.5px 0 rgba(0, 0, 0, 0.05) !important;
+      }
+      .form-input:focus {
+        box-shadow: var(
+          --odus-input-focus-shadow,
+          0 0 0 1px rgba(50, 151, 211, 0.7),
+          0 1px 1px 0 rgba(0, 0, 0, 0.07),
+          0 0 0 4px rgba(50, 151, 211, 0.3)
+        ) !important;
+        outline: none !important;
+      }
+      .form-input-error {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+      .form-helper-text {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+    `;
+  }
+  getValue() {
+    return this._value;
+  }
+  getIsValid() {
+    return !!this._value.trim();
+  }
+  getError() {
+    return this._error;
+  }
+}
+class Z extends d {
+  _value = "";
+  _error = null;
+  _input = null;
+  render() {
+    if (!this.shadowRoot) return;
+    this._input?.getElement().remove();
+    const { t: e } = a();
+    this._input = new m({
+      name: "billingAddress.zipCode",
+      label: e("address.zipCode"),
+      error: !1,
+      placeholder: e("address.zipCode"),
+      value: this._value,
+      autocomplete: "postal-code",
+      onChange: (t) => {
+        this._value = t.target.value, this._error = null, this.emit("change", this._value);
+      }
+    }), this._input.addEventListener("blur", () => {
+      const { t } = a();
+      this._error = this._value.trim() ? null : t("validation.zipCodeRequired"), this._input?.setError(!!this._error, this._error ?? void 0), this.emit("blur", this._value);
+    }), this.shadowRoot.appendChild(this._input.getElement());
+  }
+  getCss() {
+    return super.getCss() + [h, u, l].join(`
+`) + `
+      :host { display: block; }
+      .form-input {
+        color: var(--odus-color-text, #1a1a1a) !important;
+        font-family: var(--odus-font-family, system-ui, sans-serif) !important;
+        font-size: var(--odus-input-font-size, 16px) !important;
+        background: var(--odus-color-background, #ffffff) !important;
+        border-radius: var(--odus-border-radius, 6px) !important;
+        box-shadow:
+          0 0 0 1px var(--odus-border-color, #e0e0e0),
+          0 2px 4px 0 rgba(0, 0, 0, 0.07),
+          0 1px 1.5px 0 rgba(0, 0, 0, 0.05) !important;
+      }
+      .form-input:focus {
+        box-shadow: var(
+          --odus-input-focus-shadow,
+          0 0 0 1px rgba(50, 151, 211, 0.7),
+          0 1px 1px 0 rgba(0, 0, 0, 0.07),
+          0 0 0 4px rgba(50, 151, 211, 0.3)
+        ) !important;
+        outline: none !important;
+      }
+      .form-input-error {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+      .form-helper-text {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+    `;
+  }
+  getValue() {
+    return this._value;
+  }
+  getIsValid() {
+    return !!this._value.trim();
+  }
+  getError() {
+    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)}", U = {
+  name: "odus-elements",
+  styles: {
+    fontSize: 14,
+    textColor: "#000000",
+    buttonColor: "#0070f3",
+    borderRadius: 4,
+    fontFamily: "system-ui",
+    buttonTextColor: "#ffffff",
+    buttonFontSize: 16
+  },
+  layout: {
+    actionButton: { translationKey: null },
+    billingFields: {
+      street: { enabled: !1 },
+      city: { enabled: !1 },
+      state: { enabled: !1 },
+      zipCode: { enabled: !1 },
+      firstName: { enabled: !1 },
+      lastName: { enabled: !1 },
+      country: { enabled: !1 }
+    }
+  },
+  additionalPaymentMethods: {}
+};
+class Q extends d {
+  _paymentContext = null;
+  _applePayData = null;
+  _authorized = !1;
+  _button = null;
+  setPaymentContext(e) {
+    this._paymentContext = e, this.isMounted && this.render();
+  }
+  render() {
+    if (!this.shadowRoot || (this._button?.getElement().remove(), this._button = null, !this._paymentContext))
+      return;
+    const {
+      paymentId: e,
+      checkoutKey: t,
+      environment: r,
+      checkoutDetails: o,
+      displayName: s,
+      countries: i,
+      requiredBillingContactFields: p,
+      requiredShippingContactFields: _,
+      onAuthorize: w
+    } = this._paymentContext;
+    i?.length && o?.countryCode && !i.map((f) => f.toUpperCase()).includes(o.countryCode.toUpperCase()) || (this._button = new E({
+      checkoutProfile: U,
+      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));
+      }
+    }), this.shadowRoot.appendChild(this._button.getElement()));
+  }
+  getCss() {
+    return super.getCss() + K + `
+      :host { display: block; }
+      apple-pay-button {
+        width: 100%;
+        height: var(--odus-button-height, 48px);
+        border-radius: var(--odus-button-border-radius, 6px);
+      }
+    `;
+  }
+  getValue() {
+    return this._applePayData;
+  }
+  getIsValid() {
+    return this._authorized;
+  }
+  getError() {
+    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}}', 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 = {
+  name: "odus-elements",
+  styles: {
+    fontSize: 14,
+    textColor: "#000000",
+    buttonColor: "#0070f3",
+    borderRadius: 4,
+    fontFamily: "system-ui",
+    buttonTextColor: "#ffffff",
+    buttonFontSize: 16
+  },
+  layout: {
+    actionButton: { translationKey: null },
+    billingFields: {
+      street: { enabled: !0 },
+      city: { enabled: !0 },
+      state: { enabled: !0 },
+      zipCode: { enabled: !0 },
+      firstName: { enabled: !0 },
+      lastName: { enabled: !0 },
+      country: { enabled: !0 }
+    }
+  },
+  additionalPaymentMethods: {}
+};
+class Y extends d {
+  _cardNumber = "";
+  _cardExpiry = "";
+  _cardCvv = "";
+  _environment = "test";
+  _section = null;
+  _focusManager = new k();
+  _touchedFields = /* @__PURE__ */ new Set();
+  _focusHandlers = [];
+  setEnvironment(e) {
+    this._environment = e;
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    this._section?.getElement().remove();
+    const { t: e } = a();
+    this._section = new z({
+      checkoutProfile: W,
+      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());
+      },
+      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);
+        } else {
+          const i = s.cardExpiry(this._cardExpiry);
+          this._section?.updateCardExpiry(this._cardExpiry, i, !0);
+        }
+        this._updateFocusManagerState(), this.emit("blur", this.getValue());
+      }
+    }), this.shadowRoot.appendChild(this._section.getElement()), this._registerFocusFields();
+  }
+  focus() {
+    this._section?.focus();
+  }
+  focusField(e) {
+    this._section?.focusField(e);
+  }
+  destroy() {
+    this._cleanupFocusHandlers(), super.destroy();
+  }
+  getCss() {
+    return super.getCss() + [h, u, l, G].join(`
+`) + `
+      :host { display: block; }
+      .card-grid {
+        display: flex;
+        flex-direction: column;
+        gap: var(--odus-card-gap, 12px);
+      }
+      .card-details {
+        display: flex;
+        gap: var(--odus-card-gap, 12px);
+      }
+      .form-input,
+      .form-select {
+        color: var(--odus-color-text, #1a1a1a) !important;
+        font-family: var(--odus-font-family, system-ui, sans-serif) !important;
+        font-size: var(--odus-input-font-size, 16px) !important;
+        background: var(--odus-color-background, #ffffff) !important;
+        border-radius: var(--odus-border-radius, 6px) !important;
+        box-shadow:
+          0 0 0 1px var(--odus-border-color, #e0e0e0),
+          0 2px 4px 0 rgba(0, 0, 0, 0.07),
+          0 1px 1.5px 0 rgba(0, 0, 0, 0.05) !important;
+      }
+      .form-input:focus,
+      .form-select:focus {
+        box-shadow: var(
+          --odus-input-focus-shadow,
+          0 0 0 1px rgba(50, 151, 211, 0.7),
+          0 1px 1px 0 rgba(0, 0, 0, 0.07),
+          0 0 0 4px rgba(50, 151, 211, 0.3)
+        ) !important;
+        outline: none !important;
+      }
+      .form-input-error,
+      .form-select-error {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+      .form-helper-text {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+    `;
+  }
+  getValue() {
+    return {
+      number: this._cardNumber,
+      expiry: this._cardExpiry,
+      cvv: this._cardCvv
+    };
+  }
+  getPayload() {
+    const e = this._environment === "live" ? H : J, t = new S();
+    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
+    };
+  }
+  getIsValid() {
+    const e = c(), t = this._cardCvv.length >= 3;
+    return !e.cardNumber(this._cardNumber) && !e.cardExpiry(this._cardExpiry) && t;
+  }
+  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);
+  }
+}
+class X extends d {
+  _value = "";
+  _error = null;
+  _input = null;
+  render() {
+    if (!this.shadowRoot) return;
+    this._input?.getElement().remove();
+    const { t: e } = a();
+    this._input = new m({
+      name: "billingAddress.cardholderName",
+      label: e("cardholderNameLabel"),
+      error: !1,
+      placeholder: e("cardholderNamePlaceholder"),
+      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);
+      }
+    }), this._input.addEventListener("blur", () => {
+      const { t } = a();
+      this._error = this._value.trim() ? null : t("validation.nameRequired"), this._input?.setError(!!this._error, this._error ?? void 0), this.emit("blur", this._value);
+    }), this.shadowRoot.appendChild(this._input.getElement());
+  }
+  getCss() {
+    return super.getCss() + [h, u, l].join(`
+`) + `
+      :host { display: block; }
+      .form-input {
+        color: var(--odus-color-text, #1a1a1a) !important;
+        font-family: var(--odus-font-family, system-ui, sans-serif) !important;
+        font-size: var(--odus-input-font-size, 16px) !important;
+        background: var(--odus-color-background, #ffffff) !important;
+        border-radius: var(--odus-border-radius, 6px) !important;
+        box-shadow:
+          0 0 0 1px var(--odus-border-color, #e0e0e0),
+          0 2px 4px 0 rgba(0, 0, 0, 0.07),
+          0 1px 1.5px 0 rgba(0, 0, 0, 0.05) !important;
+      }
+      .form-input:focus {
+        box-shadow: var(
+          --odus-input-focus-shadow,
+          0 0 0 1px rgba(50, 151, 211, 0.7),
+          0 1px 1px 0 rgba(0, 0, 0, 0.07),
+          0 0 0 4px rgba(50, 151, 211, 0.3)
+        ) !important;
+        outline: none !important;
+      }
+      .form-input-error {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+      .form-helper-text {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+    `;
+  }
+  getValue() {
+    return this._value;
+  }
+  getIsValid() {
+    return !!this._value.trim();
+  }
+  getError() {
+    return this._error;
+  }
+}
+const $ = {
+  name: "odus-elements",
+  styles: {
+    fontSize: 14,
+    textColor: "#000000",
+    buttonColor: "#0070f3",
+    borderRadius: 4,
+    fontFamily: "system-ui",
+    buttonTextColor: "#ffffff",
+    buttonFontSize: 16
+  },
+  layout: {
+    actionButton: { translationKey: null },
+    billingFields: {
+      street: { enabled: !1 },
+      city: { enabled: !1 },
+      state: { enabled: !1 },
+      zipCode: { enabled: !1 },
+      firstName: { enabled: !1 },
+      lastName: { enabled: !1 },
+      country: { enabled: !1 }
+    }
+  },
+  additionalPaymentMethods: {}
+};
+class ee extends d {
+  _email = "";
+  _error = null;
+  _field = null;
+  render() {
+    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 P({
+      value: this._email,
+      error: !1,
+      checkoutProfile: $,
+      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();
+        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(`
+`) + `
+      :host { display: block; }
+      .form-input {
+        color: var(--odus-color-text, #1a1a1a) !important;
+        font-family: var(--odus-font-family, system-ui, sans-serif) !important;
+        font-size: var(--odus-input-font-size, 16px) !important;
+        background: var(--odus-color-background, #ffffff) !important;
+        border-radius: var(--odus-border-radius, 6px) !important;
+        box-shadow:
+          0 0 0 1px var(--odus-border-color, #e0e0e0),
+          0 2px 4px 0 rgba(0, 0, 0, 0.07),
+          0 1px 1.5px 0 rgba(0, 0, 0, 0.05) !important;
+      }
+      .form-input:focus {
+        box-shadow: var(
+          --odus-input-focus-shadow,
+          0 0 0 1px rgba(50, 151, 211, 0.7),
+          0 1px 1px 0 rgba(0, 0, 0, 0.07),
+          0 0 0 4px rgba(50, 151, 211, 0.3)
+        ) !important;
+        outline: none !important;
+      }
+      .form-input-error {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+      .form-helper-text {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+    `;
+  }
+  getValue() {
+    return this._email;
+  }
+  getIsValid() {
+    return !c().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 {
+  _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())));
+  }
+  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);
+  }
+  clearError() {
+    this._message = null, this._alert?.getElement().remove(), this._alert = null;
+  }
+  getCss() {
+    return super.getCss() + te + `
+      :host { display: block; }
+      .error-alert-icon,
+      .error-alert-icon-container {
+        color: var(--odus-color-error, #e53e3e) !important;
+      }
+      .error-alert-message {
+        color: var(--odus-color-text, #1a1a1a) !important;
+      }
+    `;
+  }
+  getValue() {
+    return null;
+  }
+  getIsValid() {
+    return !0;
+  }
+  getError() {
+    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 = {
+  name: "odus-elements",
+  styles: {
+    fontSize: 14,
+    textColor: "#000000",
+    buttonColor: "#0070f3",
+    borderRadius: 4,
+    fontFamily: "system-ui",
+    buttonTextColor: "#ffffff",
+    buttonFontSize: 16
+  },
+  layout: {
+    actionButton: { translationKey: null },
+    billingFields: {
+      street: { enabled: !1 },
+      city: { enabled: !1 },
+      state: { enabled: !1 },
+      zipCode: { enabled: !1 },
+      firstName: { enabled: !1 },
+      lastName: { enabled: !1 },
+      country: { enabled: !1 }
+    }
+  },
+  additionalPaymentMethods: {}
+};
+class ie extends d {
+  _paymentContext = null;
+  _button = null;
+  setPaymentContext(e) {
+    this._paymentContext = e, this.isMounted && this.render();
+  }
+  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,
+      onSubmit: async () => {
+        this._button?.setSubmitting(!0);
+        try {
+          await e();
+        } finally {
+          this._button?.setSubmitting(!1);
+        }
+      }
+    }), this.shadowRoot.appendChild(this._button.getElement());
+  }
+  getCss() {
+    return super.getCss() + oe + `
+      :host { display: block; }
+      .paypal {
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: var(--odus-button-border-radius, 6px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    `;
+  }
+  getValue() {
+    return null;
+  }
+  getIsValid() {
+    return !0;
+  }
+  getError() {
+    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:8px 8px 8px 12px;background:#fff;border:none;cursor:pointer;font-weight:400;letter-spacing:.02em;line-height:1.5;transition:all .1s ease-in;white-space:nowrap;border-right:1px solid #e0e0e0}.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:absolute;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:stretch;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-dial-code-dropdown{flex-shrink:0}.phone-number-field-container .country-dial-code-trigger{height:100%;border:none;box-shadow:none;border-radius:0;border-top-left-radius:var(--phone-border-radius, 0px);border-bottom-left-radius:var(--phone-border-radius, 0px)}.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);height:100%;padding:8px 12px}.phone-number-field-container .phone-input-wrapper .form-input:focus{box-shadow:none;z-index:auto}", ne = {
+  name: "odus-elements",
+  styles: {
+    fontSize: 14,
+    textColor: "#000000",
+    buttonColor: "#0070f3",
+    borderRadius: 4,
+    fontFamily: "system-ui",
+    buttonTextColor: "#ffffff",
+    buttonFontSize: 16
+  },
+  layout: {
+    actionButton: { translationKey: null },
+    billingFields: {
+      street: { enabled: !1 },
+      city: { enabled: !1 },
+      state: { enabled: !1 },
+      zipCode: { enabled: !1 },
+      firstName: { enabled: !1 },
+      lastName: { enabled: !1 },
+      country: { enabled: !1 }
+    }
+  },
+  additionalPaymentMethods: {}
+};
+class de extends d {
+  _phone = "";
+  _error = null;
+  _field = null;
+  render() {
+    if (!this.shadowRoot) return;
+    this._field?.destroy(), this._field?.getElement().remove(), this.options.initialValue && !this._phone && (this._phone = String(this.options.initialValue));
+    const { t: e } = a();
+    this._field = new R({
+      value: this._phone,
+      error: !1,
+      checkoutProfile: ne,
+      translationFunc: e,
+      panelContainer: this.shadowRoot ?? void 0,
+      onChange: () => {
+        this._phone = this._field?.getValue() ?? "", this._error = null, this.emit("change", this._phone);
+      },
+      onBlur: () => {
+        this._phone = this._field?.getValue() ?? "";
+        const t = c(), r = this._field?.getCountry();
+        this._error = t.phoneNumber(this._phone, r) ?? 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(`
+`) + `
+      :host { display: block; }
+      .form-input,
+      .country-dial-code-trigger {
+        color: var(--odus-color-text, #1a1a1a) !important;
+        font-family: var(--odus-font-family, system-ui, sans-serif) !important;
+        font-size: var(--odus-input-font-size, 16px) !important;
+        background: var(--odus-color-background, #ffffff) !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+      }
+      .phone-number-field-container {
+        min-height: calc(var(--odus-input-font-size, 16px) * 1.5 + 16px);
+        box-shadow:
+          0 0 0 1px var(--odus-border-color, #e0e0e0),
+          0 2px 4px 0 rgba(0, 0, 0, 0.07),
+          0 1px 1.5px 0 rgba(0, 0, 0, 0.05) !important;
+        border-radius: var(--odus-border-radius, 6px) !important;
+        overflow: hidden;
+      }
+      .phone-number-field-container:focus-within {
+        box-shadow: var(
+          --odus-input-focus-shadow,
+          0 0 0 1px rgba(50, 151, 211, 0.7),
+          0 1px 1px 0 rgba(0, 0, 0, 0.07),
+          0 0 0 4px rgba(50, 151, 211, 0.3)
+        ) !important;
+      }
+      .phone-number-field-container.error {
+        box-shadow: 0 0 0 1px var(--odus-color-error, #dc2727) !important;
+      }
+      .form-input:focus {
+        box-shadow: none !important;
+        outline: none !important;
+      }
+      .form-input-error {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+      .form-helper-text {
+        color: var(--odus-color-error, #dc2727) !important;
+      }
+    `;
+  }
+  getValue() {
+    return this._phone;
+  }
+  getIsValid() {
+    const e = c(), t = this._field?.getCountry();
+    return !e.phoneNumber(this._phone, t);
+  }
+  getError() {
+    return this._error;
+  }
+}
+class ue {
+  _config;
+  _apiService;
+  _changeListeners = [];
+  _paymentState = {};
+  _fontCleanup;
+  _card;
+  _email;
+  _phone;
+  _addressStreet;
+  _addressFirstName;
+  _addressLastName;
+  _cardholderName;
+  _addressCity;
+  _addressState;
+  _addressZipCode;
+  _addressCountry;
+  _applePay;
+  _paypal;
+  _error;
+  elements;
+  constructor(e) {
+    this._config = e, e.locale && A.setLocale(e.locale), this._apiService = new V(
+      e.apiKey,
+      e.environment
+    );
+    const t = {};
+    Object.defineProperty(t, "email", {
+      get: () => (this._email || (this._email = new ee(), 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),
+      enumerable: !0
+    });
+    const r = {};
+    Object.defineProperty(r, "applePay", {
+      get: () => (this._applePay || (this._applePay = new Q(), 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,
+        checkoutDetails: this._paymentState.checkoutDetails,
+        ...this._config.additionalPaymentMethods?.applePay,
+        onAuthorize: (i) => this._executeAuthorization({ formData: null, applePayData: i })
+      })), 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({
+        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 O(), 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),
+      enumerable: !0
+    }), Object.defineProperty(o, "lastName", {
+      get: () => (this._addressLastName || (this._addressLastName = new q(), 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),
+      enumerable: !0
+    }), Object.defineProperty(o, "state", {
+      get: () => (this._addressState || (this._addressState = new D(), 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),
+      enumerable: !0
+    }), Object.defineProperty(o, "country", {
+      get: () => (this._addressCountry || (this._addressCountry = new T(), 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),
+      enumerable: !0
+    }), Object.defineProperty(s, "cardholderName", {
+      get: () => (this._cardholderName || (this._cardholderName = new X(), this._trackElement(this._cardholderName)), this._cardholderName),
+      enumerable: !0
+    }), Object.defineProperty(s, "address", {
+      get: () => o,
+      enumerable: !0
+    }), Object.defineProperty(s, "error", {
+      get: () => (this._error || (this._error = new re(), this._trackElement(this._error)), this._error),
+      enumerable: !0
+    }), this.elements = s;
+  }
+  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({
+      id: e,
+      checkoutKey: t,
+      environment: this._config.environment
+    });
+    this._paymentState.checkoutDetails = {
+      amount: r.amount,
+      currency: r.currency,
+      countryCode: r.countryCode
+    }, 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 })
+    }), this._paypal?.setPaymentContext({
+      paymentId: e,
+      checkoutKey: t,
+      onAuthorize: () => this._executeAuthorization({ formData: null })
+    });
+  }
+  validate() {
+    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() {
+    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 ? {
+      street: this._addressStreet?.isMounted ? this._addressStreet.value : "",
+      city: this._addressCity?.isMounted ? this._addressCity.value : "",
+      country: this._addressCountry?.isMounted ? this._addressCountry.value : "",
+      firstName: this._addressFirstName?.isMounted ? this._addressFirstName.value : "",
+      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 = [
+      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,
+      billingAddress: s
+    };
+  }
+  async authorize(e) {
+    if (!this._paymentState.paymentId || !this._paymentState.checkoutKey)
+      throw new Error("Call associatePayment() before authorize()");
+    if (this._applePay?.isMounted && this._applePay.isValid) {
+      await this._executeAuthorization({
+        formData: null,
+        applePayData: this._applePay.value
+      });
+      return;
+    }
+    if (this._paypal?.isMounted) {
+      await this._executeAuthorization({ formData: null });
+      return;
+    }
+    const t = this._getPayload();
+    await this._executeAuthorization({
+      formData: t,
+      applePayData: void 0,
+      customCustomerData: e?.customerData
+    });
+  }
+  applyTheme(e) {
+    const t = e["--odus-font-family"];
+    if (t) {
+      this._fontCleanup?.();
+      const { cleanup: r } = B({ fontFamily: t });
+      this._fontCleanup = r;
+    }
+    for (const r of this._allElements())
+      r.setTheme(e);
+  }
+  resetTheme(e) {
+    "--odus-font-family" in e && (this._fontCleanup?.(), this._fontCleanup = void 0);
+    for (const t of this._allElements())
+      t.resetTheme(e);
+  }
+  get isValid() {
+    return this.validate().valid;
+  }
+  onChange(e) {
+    this._changeListeners.push(e);
+  }
+  destroy() {
+    this._fontCleanup?.(), this._card?.destroy(), this._email?.destroy(), this._phone?.destroy(), this._addressStreet?.destroy(), this._addressFirstName?.destroy(), this._addressLastName?.destroy(), this._cardholderName?.destroy(), this._addressCity?.destroy(), this._addressState?.destroy(), this._addressZipCode?.destroy(), this._addressCountry?.destroy(), this._applePay?.destroy(), this._paypal?.destroy(), this._error?.destroy(), this._changeListeners.length = 0;
+  }
+  _trackElement(e) {
+    e.on("change", () => {
+      for (const t of this._changeListeners)
+        t();
+    });
+  }
+  _allElements() {
+    return [
+      this._card,
+      this._email,
+      this._phone,
+      this._addressStreet,
+      this._addressFirstName,
+      this._addressLastName,
+      this._cardholderName,
+      this._addressCity,
+      this._addressState,
+      this._addressZipCode,
+      this._addressCountry,
+      this._applePay,
+      this._paypal,
+      this._error
+    ].filter((e) => e !== void 0);
+  }
+  async _executeAuthorization({
+    formData: e,
+    applePayData: t,
+    customCustomerData: r
+  }) {
+    try {
+      const o = await this._apiService.authorizePayment({
+        paymentId: this._paymentState.paymentId,
+        checkoutKey: this._paymentState.checkoutKey,
+        formData: e,
+        returnUrl: this._config.returnUrl,
+        applePayData: t,
+        customCustomerData: r
+      });
+      this._handlePaymentResponse(o);
+    } catch (o) {
+      this._handleAuthorizationError(o);
+    }
+  }
+  _handlePaymentResponse(e) {
+    if (e.latestTransaction.status === "authorized") {
+      this._config.callbacks?.onPaymentSucceeded?.(
+        e.latestTransaction.status
+      );
+      return;
+    }
+    if (e.latestTransaction.status === "failed") {
+      this._config.callbacks?.onPaymentFailed?.(
+        e.latestTransaction.status
+      );
+      return;
+    }
+    e.status === "requires_action" && this._config.callbacks?.onActionRequired?.(e.action.redirectUrl);
+  }
+  _handleAuthorizationError(e) {
+    const t = e.details?.message ?? "Payment failed";
+    this._config.callbacks?.onPaymentFailed?.(t), this._error?.isMounted && this._error.setError(t);
+  }
+}
+export {
+  L as AddressCityElement,
+  T as AddressCountryElement,
+  j as AddressFirstNameElement,
+  q as AddressLastNameElement,
+  D as AddressStateElement,
+  O as AddressStreetElement,
+  Z as AddressZipCodeElement,
+  Q 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
+};