@zonos/elements 1.2.2 → 1.2.4-alpha.1

package/dist/components/zonos-cart-subtotal2.js

@@ -12,75 +12,75 @@ const InfoIcon = `<svg viewBox="0 0 17 16" fill="none" xmlns="https://www.w3.org
 </svg>
 `;
 
-const zonosCartSubtotalCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column{padding:var(--amino-space-20) var(--amino-space-8);vertical-align:top}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--title-with-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}:host .zonos--cart-subtotal-title,:host .zonos--cart-subtotal-price{border-bottom:1px solid var(--amino-gray-200)}:host .zonos--cart-duty-tax-price{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;gap:5px}:host .zonos--cart-subtotal-price{text-align:right}";
+const zonosCartSubtotalCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column{padding:var(--amino-space-20) var(--amino-space-8);vertical-align:top}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--title-with-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}:host .zonos--cart-subtotal-title,:host .zonos--cart-subtotal-price{border-bottom:1px solid var(--amino-gray-200)}:host .zonos--cart-duty-tax-price{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;gap:5px}:host .zonos--cart-subtotal-price{text-align:right}";
 
 const ZonosCartSubtotal = /*@__PURE__*/ proxyCustomElement(class ZonosCartSubtotal extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-  }
-  render() {
-    const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
-    const showDutyTaxesInfo = cartStore.step === 'payment' || cartStore.step === 'shipping';
-    const renderShippingInfo = () => {
-      if (!cartStore.selectedShippingOption) {
-        return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Shipping')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('No shipping method selected'))));
-      }
-      return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cartStore.selectedShippingOption.displayName), cartStore.selectedShippingOptionTransitTime && (h("zonos-text", { class: "zonos--caption", type: "caption" }, cartStore.selectedShippingOptionTransitTime, ' ', translate('business days')))));
-    };
-    return (h(Host, { class: "zonos--cart-subtotal zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tr", { class: "zonos--row zonos--cart-subtotal" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Cart subtotal'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
-      amount: cartStore.subtotal,
-      currency: cartStore.currency,
-    })))), h("tr", { class: "zonos--row zonos--cart-shipping" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, renderShippingInfo()), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cartStore.shipping
-      ? formatCurrency({
-        amount: cartStore.shipping,
-        currency: cartStore.currency,
-      })
-      : '-')), showDutyTaxesInfo && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-icon", { content: InfoIcon, size: 16 })), !!cartStore.isSelectedShippingAboveDeminimis && (h("zonos-text", { color: "gray-800", type: "body" }, translate('Order is over the de minimis threshold for both duty and tax')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxFees
-      ? formatCurrency({
-        amount: cartStore.dutiesTaxFees,
-        currency: cartStore.currency,
-      })
-      : '-', cartStore.isSelectedShippingGuarantee && (h("zonos-badge", null, translate('Guaranteed'))))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
-      amount: 
-      // show total without taxes when step is shipping, show total with taxes when step is payment
-      cartStore.step === 'shipping'
-        ? totalWithoutTaxes
-        : cartStore.total,
-      currency: cartStore.currency,
-    })))))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get style() { return zonosCartSubtotalCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
+        const showDutyTaxesInfo = cartStore.step === 'payment' || cartStore.step === 'shipping';
+        const renderShippingInfo = () => {
+            if (!cartStore.selectedShippingOption) {
+                return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Shipping')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('No shipping method selected'))));
+            }
+            return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cartStore.selectedShippingOption.displayName), cartStore.selectedShippingOptionTransitTime && (h("zonos-text", { class: "zonos--caption", type: "caption" }, cartStore.selectedShippingOptionTransitTime, ' ', translate('business days')))));
+        };
+        return (h(Host, { class: "zonos--cart-subtotal zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tr", { class: "zonos--row zonos--cart-subtotal" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Cart subtotal'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+            amount: cartStore.subtotal,
+            currency: cartStore.currency,
+        })))), h("tr", { class: "zonos--row zonos--cart-shipping" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, renderShippingInfo()), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cartStore.shipping
+            ? formatCurrency({
+                amount: cartStore.shipping,
+                currency: cartStore.currency,
+            })
+            : '-')), showDutyTaxesInfo && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-icon", { content: InfoIcon, size: 16 })), !!cartStore.isSelectedShippingAboveDeminimis && (h("zonos-text", { color: "gray-800", type: "body" }, translate('Order is over the de minimis threshold for both duty and tax')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxFees
+            ? formatCurrency({
+                amount: cartStore.dutiesTaxFees,
+                currency: cartStore.currency,
+            })
+            : '-', cartStore.isSelectedShippingGuarantee && (h("zonos-badge", null, translate('Guaranteed'))))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+            amount: 
+            // show total without taxes when step is shipping, show total with taxes when step is payment
+            cartStore.step === 'shipping'
+                ? totalWithoutTaxes
+                : cartStore.total,
+            currency: cartStore.currency,
+        })))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get style() { return zonosCartSubtotalCss; }
 }, [1, "zonos-cart-subtotal"]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-cart-subtotal", "zonos-badge", "zonos-icon", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-cart-subtotal":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosCartSubtotal);
-      }
-      break;
-    case "zonos-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "zonos-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-cart-subtotal", "zonos-badge", "zonos-icon", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-cart-subtotal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCartSubtotal);
+            }
+            break;
+        case "zonos-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosCartSubtotal as Z, defineCustomElement as d };

package/dist/components/zonos-checkout-finish.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosCheckoutFinish extends Components.ZonosCheckoutFinish, HTMLElement {}
 export const ZonosCheckoutFinish: {
-  prototype: ZonosCheckoutFinish;
-  new (): ZonosCheckoutFinish;
+    prototype: ZonosCheckoutFinish;
+    new (): ZonosCheckoutFinish;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/zonos-checkout-finish2.js

@@ -12,113 +12,113 @@ const RemoveIcon = `<svg color="var(--amino-red-800)" fill="none" height="24" vi
 
 const SuccessIcon = `<svg color="var(--amino-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z" data-is-secondary-color="true" fill="var(--amino-blue-100)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M15.707 9.293a1 1 0 0 1 0 1.414l-3.646 3.647a1.5 1.5 0 0 1-2.122 0l-1.646-1.647a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
-const zonosCheckoutFinishCss = ":host{font-family:Inter;display:block}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-bottom:var(--amino-space-24);border-radius:var(--border-radius, 10px);gap:var(--amino-space-24);max-width:360px;width:auto;margin:auto;margin-top:var(--amino-space-24);background-color:var(--amino-gray-50);padding:var(--amino-space-20)}:host zonos-button{width:100%}:host .loading-wrapper{min-height:300px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
+const zonosCheckoutFinishCss = ":host{font-family:var(--font-family, Inter), Inter;display:block}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-bottom:var(--amino-space-24);border-radius:var(--border-radius, 10px);gap:var(--amino-space-24);max-width:360px;width:auto;margin:auto;margin-top:var(--amino-space-24);background-color:var(--amino-gray-50);padding:var(--amino-space-20)}:host zonos-button{width:100%}:host .loading-wrapper{min-height:300px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
 
 const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckoutFinish extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.closeClick = createEvent(this, "closeClick", 7);
-    this.checkPaymentStatus = async () => {
-      this.isLoading = true;
-      const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
-      if (clientSecret || this.storybookForceStatus) {
-        const { error, messages } = await stripeStoreRetrievePayment({
-          clientSecret,
-          storybookForceStatus: this.storybookForceStatus,
-        });
-        this.notificationType = error ? 'error' : 'success';
-        this.notificationMessages = messages || [];
-        this.notificationTitle = error
-          ? translate('Payment failed')
-          : translate("You're all set!");
-        if (error) {
-          submitGtag('zonos-checkout-payment-fail');
-        }
-        else {
-          submitGtag('zonos-checkout-success');
-          const successEvent = new CustomEvent('zonos-checkout-success', {
-            detail: {
-              message: 'Zonos Checkout successfully processed order',
-            },
-          });
-          document.dispatchEvent(successEvent);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.closeClick = createEvent(this, "closeClick", 7);
+        this.checkPaymentStatus = async () => {
+            this.isLoading = true;
+            const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
+            if (clientSecret || this.storybookForceStatus) {
+                const { error, messages } = await stripeStoreRetrievePayment({
+                    clientSecret,
+                    storybookForceStatus: this.storybookForceStatus,
+                });
+                this.notificationType = error ? 'error' : 'success';
+                this.notificationMessages = messages || [];
+                this.notificationTitle = error
+                    ? translate('Payment failed')
+                    : translate("You're all set!");
+                if (error) {
+                    submitGtag('zonos-checkout-payment-fail');
+                }
+                else {
+                    submitGtag('zonos-checkout-success');
+                    const successEvent = new CustomEvent('zonos-checkout-success', {
+                        detail: {
+                            message: 'Zonos Checkout successfully processed order',
+                        },
+                    });
+                    document.dispatchEvent(successEvent);
+                }
+            }
+            stripeStoreReset();
+            this.isLoading = false;
+        };
+        this.closeClickHandler = () => {
+            this.closeClick.emit();
+        };
+        this.borderRadius = 'ROUNDED';
+        this.storybookForceStatus = undefined;
+        this.overrideNotification = undefined;
+        this.isLoading = true;
+        this.notificationType = 'success';
+        this.notificationTitle = '';
+        this.notificationMessages = [];
+    }
+    componentDidLoad() {
+        if (this.overrideNotification) {
+            // just show the notification and don't check any of the payment status
+            this.notificationType = this.overrideNotification.type;
+            this.notificationTitle = this.overrideNotification.title;
+            this.notificationMessages = this.overrideNotification.messages;
+            this.isLoading = false;
+            return;
         }
-      }
-      stripeStoreReset();
-      this.isLoading = false;
-    };
-    this.closeClickHandler = () => {
-      this.closeClick.emit();
-    };
-    this.borderRadius = 'ROUNDED';
-    this.storybookForceStatus = undefined;
-    this.overrideNotification = undefined;
-    this.isLoading = true;
-    this.notificationType = 'success';
-    this.notificationTitle = '';
-    this.notificationMessages = [];
-  }
-  componentDidLoad() {
-    if (this.overrideNotification) {
-      // just show the notification and don't check any of the payment status
-      this.notificationType = this.overrideNotification.type;
-      this.notificationTitle = this.overrideNotification.title;
-      this.notificationMessages = this.overrideNotification.messages;
-      this.isLoading = false;
-      return;
+        void this.checkPaymentStatus();
     }
-    void this.checkPaymentStatus();
-  }
-  render() {
-    return (h(Host, { class: "zonos--checkout-finish zonos--elements", style: {
-        '--border-radius': getBorderRadius(this.borderRadius),
-      } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { color: 'blue-800', content: SuccessIcon, size: 50 })) : (h("zonos-icon", { color: 'red-800', content: RemoveIcon, size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping'))))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get style() { return zonosCheckoutFinishCss; }
+    render() {
+        return (h(Host, { class: "zonos--checkout-finish zonos--elements", style: {
+                '--border-radius': getBorderRadius(this.borderRadius),
+            } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { color: 'blue-800', content: SuccessIcon, size: 50 })) : (h("zonos-icon", { color: 'red-800', content: RemoveIcon, size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping'))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get style() { return zonosCheckoutFinishCss; }
 }, [1, "zonos-checkout-finish", {
-    "borderRadius": [1, "border-radius"],
-    "storybookForceStatus": [1, "storybook-force-status"],
-    "overrideNotification": [16],
-    "isLoading": [32],
-    "notificationType": [32],
-    "notificationTitle": [32],
-    "notificationMessages": [32]
-  }]);
+        "borderRadius": [1, "border-radius"],
+        "storybookForceStatus": [1, "storybook-force-status"],
+        "overrideNotification": [16],
+        "isLoading": [32],
+        "notificationType": [32],
+        "notificationTitle": [32],
+        "notificationMessages": [32]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-checkout-finish", "zonos-button", "zonos-icon", "zonos-spinner", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-checkout-finish":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosCheckoutFinish);
-      }
-      break;
-    case "zonos-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "zonos-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "zonos-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-checkout-finish", "zonos-button", "zonos-icon", "zonos-spinner", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-checkout-finish":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCheckoutFinish);
+            }
+            break;
+        case "zonos-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosCheckoutFinish as Z, defineCustomElement as d };

package/dist/components/zonos-checkout-payment.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosCheckoutPayment extends Components.ZonosCheckoutPayment, HTMLElement {}
 export const ZonosCheckoutPayment: {
-  prototype: ZonosCheckoutPayment;
-  new (): ZonosCheckoutPayment;
+    prototype: ZonosCheckoutPayment;
+    new (): ZonosCheckoutPayment;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/zonos-checkout-payment2.js

@@ -9,94 +9,94 @@ import { d as defineCustomElement$3 } from './zonos-payment2.js';
 import { d as defineCustomElement$2 } from './zonos-spinner2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
-const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:Inter;display:block}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-8)}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-button.sc-zonos-checkout-payment{width:calc(100% - 10px)}";
+const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:var(--font-family, Inter), Inter;display:block}.sc-zonos-checkout-payment-h *.sc-zonos-checkout-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-8)}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-button.sc-zonos-checkout-payment{width:calc(100% - 10px)}";
 
 const ZonosCheckoutPayment = /*@__PURE__*/ proxyCustomElement(class ZonosCheckoutPayment extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.continueClicked = createEvent(this, "continueClicked", 7);
-    /**
-     * handler for continue button click
-     */
-    this.continueClickHandler = () => {
-      this.continueClicked.emit();
-    };
-    this.paymentError = false;
-    this.submitBtnType = undefined;
-    this.continueLoading = false;
-    this.submitBtnColor = undefined;
-    this.disabled = true;
-  }
-  watchFormComplete() {
-    if (!this.disabled) {
-      // submit google tag when the form is complete
-      submitGtag('zonos-checkout-payment-info');
+    constructor() {
+        super();
+        this.__registerHost();
+        this.continueClicked = createEvent(this, "continueClicked", 7);
+        /**
+         * handler for continue button click
+         */
+        this.continueClickHandler = () => {
+            this.continueClicked.emit();
+        };
+        this.paymentError = false;
+        this.submitBtnType = undefined;
+        this.continueLoading = false;
+        this.submitBtnColor = undefined;
+        this.disabled = true;
     }
-  }
-  render() {
-    var _a;
-    if (!stripeStore.stripeElements) {
-      return null;
+    watchFormComplete() {
+        if (!this.disabled) {
+            // submit google tag when the form is complete
+            submitGtag('zonos-checkout-payment-info');
+        }
     }
-    this.disabled = !((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
-    return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null)), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
-      // use primary type when on mobile mode
-      variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
-      amount: cartStore.total,
-      currency: cartStore.currency,
-    })))));
-  }
-  static get watchers() { return {
-    "disabled": ["watchFormComplete"]
-  }; }
-  static get style() { return zonosCheckoutPaymentCss; }
+    render() {
+        var _a;
+        if (!stripeStore.stripeElements) {
+            return null;
+        }
+        this.disabled = !((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
+        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null)), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            // use primary type when on mobile mode
+            variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
+            amount: cartStore.total,
+            currency: cartStore.currency,
+        })))));
+    }
+    static get watchers() { return {
+        "disabled": ["watchFormComplete"]
+    }; }
+    static get style() { return zonosCheckoutPaymentCss; }
 }, [2, "zonos-checkout-payment", {
-    "paymentError": [4, "payment-error"],
-    "submitBtnType": [1, "submit-btn-type"],
-    "continueLoading": [4, "continue-loading"],
-    "submitBtnColor": [1, "submit-btn-color"],
-    "disabled": [32]
-  }, undefined, {
-    "disabled": ["watchFormComplete"]
-  }]);
+        "paymentError": [4, "payment-error"],
+        "submitBtnType": [1, "submit-btn-type"],
+        "continueLoading": [4, "continue-loading"],
+        "submitBtnColor": [1, "submit-btn-color"],
+        "disabled": [32]
+    }, undefined, {
+        "disabled": ["watchFormComplete"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-checkout-payment", "zonos-banner", "zonos-button", "zonos-payment", "zonos-spinner", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-checkout-payment":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosCheckoutPayment);
-      }
-      break;
-    case "zonos-banner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "zonos-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "zonos-payment":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "zonos-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-checkout-payment", "zonos-banner", "zonos-button", "zonos-payment", "zonos-spinner", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-checkout-payment":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCheckoutPayment);
+            }
+            break;
+        case "zonos-banner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "zonos-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "zonos-payment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosCheckoutPayment as Z, defineCustomElement as d };

package/dist/components/zonos-checkout.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosCheckout extends Components.ZonosCheckout, HTMLElement {}
 export const ZonosCheckout: {
-  prototype: ZonosCheckout;
-  new (): ZonosCheckout;
+    prototype: ZonosCheckout;
+    new (): ZonosCheckout;
 };
 /**
  * Used to define this component and all nested components recursively.