@zonos/elements 1.2.3 → 1.2.4-alpha.10

package/dist/cjs/zonos-cart-items_10.cjs.entry.js

@@ -2,49 +2,49 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9542d2e7.js');
-const cart = require('./cart-55512e32.js');
-const localization = require('./localization-d7fe7290.js');
-const getBorderRadius = require('./getBorderRadius-fdd605c6.js');
-const submitGtag = require('./submitGtag-d65003f9.js');
+const index = require('./index-0dcccc22.js');
+const cart = require('./cart-90f7c8c0.js');
+const localization = require('./localization-9caf3397.js');
+const getBorderRadius = require('./getBorderRadius-bf4a4276.js');
+const submitGtag = require('./submitGtag-b141b45d.js');
+const zonosStore = require('./zonosStore-b43ef5db.js');
 const classes = require('./classes-b7918f56.js');
-const zonosStore = require('./zonosStore-a430ec5b.js');
-require('./isDarkColor-f3446afd.js');
+require('./isDarkColor-ff6ff183.js');
 
 const formatCurrency = ({ amount, currency, showCurrencyText, }) => showCurrencyText
-  ? `${new Intl.NumberFormat('en-US', {
-    currency,
-    style: 'currency',
-  }).format(amount)} ${currency}`
-  : new Intl.NumberFormat('en-US', {
-    currency,
-    style: 'currency',
-  }).format(amount);
+    ? `${new Intl.NumberFormat('en-US', {
+        currency,
+        style: 'currency',
+    }).format(amount)} ${currency}`
+    : new Intl.NumberFormat('en-US', {
+        currency,
+        style: 'currency',
+    }).format(amount);
 
-const zonosCartItemsCss = ":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-8);font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host img{min-width:40px}";
+const zonosCartItemsCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}: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-8);font-size:var(--amino-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host img{min-width:40px}";
 
 const ZonosCartItems = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.errorImages = [];
-  }
-  render() {
-    var _a;
-    const emptyItemImg = index.getAssetPath('./assets/empty-item.jpeg');
-    const rate = ((_a = cart.cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
-    return (index.h(index.Host, { class: "zonos--cart-items zonos--elements" }, index.h("table", { class: "zonos--cart-table" }, index.h("tbody", null, cart.cartStore.items.map(item => {
-      const itemImg = item.imageUrl;
-      return (index.h("tr", { class: "zonos--cart-item" }, index.h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (index.h("img", { alt: item.name, onError: () => {
-          this.errorImages = [...this.errorImages, itemImg];
-        }, src: item.imageUrl, style: {
-          'min-width': '40px',
-        }, width: 40 })) : (index.h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), index.h("td", { class: "zonos--column zonos--cart-item-name" }, index.h("zonos-text", { type: "label" }, item.name)), index.h("td", { class: "zonos--column zonos--cart-item-price" }, index.h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
-        amount: item.amount * item.quantity * rate,
-        currency: cart.cartStore.currency,
-      })))));
-    })))));
-  }
-  static get assetsDirs() { return ["assets"]; }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.errorImages = [];
+    }
+    render() {
+        var _a;
+        const emptyItemImg = index.getAssetPath('./assets/empty-item.jpeg');
+        const rate = ((_a = cart.cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
+        return (index.h(index.Host, { class: "zonos--cart-items zonos--elements" }, index.h("table", { class: "zonos--cart-table" }, index.h("tbody", null, cart.cartStore.items.map(item => {
+            const itemImg = item.imageUrl;
+            return (index.h("tr", { class: "zonos--cart-item" }, index.h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (index.h("img", { alt: item.name, onError: () => {
+                    this.errorImages = [...this.errorImages, itemImg];
+                }, src: item.imageUrl, style: {
+                    'min-width': '40px',
+                }, width: 40 })) : (index.h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), index.h("td", { class: "zonos--column zonos--cart-item-name" }, index.h("zonos-text", { type: "label" }, item.name)), index.h("td", { class: "zonos--column zonos--cart-item-price" }, index.h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+                amount: item.amount * item.quantity * rate,
+                currency: cart.cartStore.currency,
+            })))));
+        })))));
+    }
+    static get assetsDirs() { return ["assets"]; }
 };
 ZonosCartItems.style = zonosCartItemsCss;
 
@@ -54,44 +54,44 @@ 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;white-space:normal}: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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    const totalWithoutTaxes = cart.cartStore.total - cart.cartStore.dutiesTaxFees;
-    const showDutyTaxesInfo = cart.cartStore.step === 'payment' || cart.cartStore.step === 'shipping';
-    const renderShippingInfo = () => {
-      if (!cart.cartStore.selectedShippingOption) {
-        return (index.h(index.Fragment, null, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, localization.translate('Shipping')), index.h("zonos-text", { class: "zonos--caption", type: "caption" }, localization.translate('No shipping method selected'))));
-      }
-      return (index.h(index.Fragment, null, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.cartStore.selectedShippingOption.displayName), cart.cartStore.selectedShippingOptionTransitTime && (index.h("zonos-text", { class: "zonos--caption", type: "caption" }, cart.cartStore.selectedShippingOptionTransitTime, ' ', localization.translate('business days')))));
-    };
-    return (index.h(index.Host, { class: "zonos--cart-subtotal zonos--elements" }, index.h("table", { class: "zonos--cart-table" }, index.h("tr", { class: "zonos--row zonos--cart-subtotal" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("zonos-text", { type: "semiBoldLabel" }, localization.translate('Cart subtotal'))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
-      amount: cart.cartStore.subtotal,
-      currency: cart.cartStore.currency,
-    })))), index.h("tr", { class: "zonos--row zonos--cart-shipping" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, renderShippingInfo()), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cart.cartStore.shipping
-      ? formatCurrency({
-        amount: cart.cartStore.shipping,
-        currency: cart.cartStore.currency,
-      })
-      : '-')), showDutyTaxesInfo && (index.h("tr", { class: "zonos--row zonos--cart-duties" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("div", { class: "zonos--title-with-icon" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, localization.translate('Duties, taxes, and fees')), index.h("zonos-icon", { content: InfoIcon, size: 16 })), !!cart.cartStore.isSelectedShippingAboveDeminimis && (index.h("zonos-text", { color: "gray-800", type: "body" }, localization.translate('Order is over the de minimis threshold for both duty and tax')))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("div", { class: "zonos--cart-duty-tax-price" }, cart.cartStore.dutiesTaxFees
-      ? formatCurrency({
-        amount: cart.cartStore.dutiesTaxFees,
-        currency: cart.cartStore.currency,
-      })
-      : '-', cart.cartStore.isSelectedShippingGuarantee && (index.h("zonos-badge", null, localization.translate('Guaranteed'))))))), index.h("tr", { class: "zonos--row zonos--cart-pay-total" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, localization.translate('Order total'))), index.h("td", { class: "zonos--column" }, index.h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
-      amount: 
-      // show total without taxes when step is shipping, show total with taxes when step is payment
-      cart.cartStore.step === 'shipping'
-        ? totalWithoutTaxes
-        : cart.cartStore.total,
-      currency: cart.cartStore.currency,
-    })))))));
-  }
-  static get assetsDirs() { return ["assets"]; }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        const totalWithoutTaxes = cart.cartStore.total - cart.cartStore.dutiesTaxFees;
+        const showDutyTaxesInfo = cart.cartStore.step === 'payment' || cart.cartStore.step === 'shipping';
+        const renderShippingInfo = () => {
+            if (!cart.cartStore.selectedShippingOption) {
+                return (index.h(index.Fragment, null, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, localization.translate('Shipping')), index.h("zonos-text", { class: "zonos--caption", type: "caption" }, localization.translate('No shipping method selected'))));
+            }
+            return (index.h(index.Fragment, null, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.cartStore.selectedShippingOption.displayName), cart.cartStore.selectedShippingOptionTransitTime && (index.h("zonos-text", { class: "zonos--caption", type: "caption" }, cart.cartStore.selectedShippingOptionTransitTime, ' ', localization.translate('business days')))));
+        };
+        return (index.h(index.Host, { class: "zonos--cart-subtotal zonos--elements" }, index.h("table", { class: "zonos--cart-table" }, index.h("tr", { class: "zonos--row zonos--cart-subtotal" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("zonos-text", { type: "semiBoldLabel" }, localization.translate('Cart subtotal'))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+            amount: cart.cartStore.subtotal,
+            currency: cart.cartStore.currency,
+        })))), index.h("tr", { class: "zonos--row zonos--cart-shipping" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, renderShippingInfo()), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cart.cartStore.shipping
+            ? formatCurrency({
+                amount: cart.cartStore.shipping,
+                currency: cart.cartStore.currency,
+            })
+            : '-')), showDutyTaxesInfo && (index.h("tr", { class: "zonos--row zonos--cart-duties" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("div", { class: "zonos--title-with-icon" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, localization.translate('Duties, taxes, and fees')), index.h("zonos-icon", { content: InfoIcon, size: 16 })), !!cart.cartStore.isSelectedShippingAboveDeminimis && (index.h("zonos-text", { color: "gray-800", type: "body" }, localization.translate('Order is over the de minimis threshold for both duty and tax')))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("div", { class: "zonos--cart-duty-tax-price" }, cart.cartStore.dutiesTaxFees
+            ? formatCurrency({
+                amount: cart.cartStore.dutiesTaxFees,
+                currency: cart.cartStore.currency,
+            })
+            : '-', cart.cartStore.isSelectedShippingGuarantee && (index.h("zonos-badge", null, localization.translate('Guaranteed'))))))), index.h("tr", { class: "zonos--row zonos--cart-pay-total" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, localization.translate('Order total'))), index.h("td", { class: "zonos--column" }, index.h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+            amount: 
+            // show total without taxes when step is shipping, show total with taxes when step is payment
+            cart.cartStore.step === 'shipping'
+                ? totalWithoutTaxes
+                : cart.cartStore.total,
+            currency: cart.cartStore.currency,
+        })))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
 };
 ZonosCartSubtotal.style = zonosCartSubtotalCss;
 
@@ -99,278 +99,323 @@ const RemoveIcon$1 = `<svg color="var(--amino-red-800)" fill="none" height="24"
 
 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;white-space:normal}: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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.closeClick = index.createEvent(this, "closeClick", 7);
-    this.checkPaymentStatus = async () => {
-      this.isLoading = true;
-      const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || cart.stripeStore.clientSecret;
-      if (clientSecret || this.storybookForceStatus) {
-        const { error, messages } = await cart.stripeStoreRetrievePayment({
-          clientSecret,
-          storybookForceStatus: this.storybookForceStatus,
-        });
-        this.notificationType = error ? 'error' : 'success';
-        this.notificationMessages = messages || [];
-        this.notificationTitle = error
-          ? localization.translate('Payment failed')
-          : localization.translate("You're all set!");
-        if (error) {
-          submitGtag.submitGtag('zonos-checkout-payment-fail');
-        }
-        else {
-          submitGtag.submitGtag('zonos-checkout-success');
-          const successEvent = new CustomEvent('zonos-checkout-success', {
-            detail: {
-              message: 'Zonos Checkout successfully processed order',
-            },
-          });
-          document.dispatchEvent(successEvent);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.closeClick = index.createEvent(this, "closeClick", 7);
+        this.pullOrder = async () => {
+            var _a, _b;
+            const baseUrl = "https://v1.route.js.zonos.com";
+            const checkoutSessionId = cart.cartStore.checkoutSessionId;
+            const { errors, json } = await localization.handleFetch(`${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}`);
+            if (errors.length || !(json === null || json === void 0 ? void 0 : json.id)) {
+                return null;
+            }
+            // TODO: This method of triggering /success for BigCommerce is for MVP. Remove when eventRegistry is fixed to handle by webhooks
+            if (window.Zonos.isBigCommerce) {
+                const orderId = json === null || json === void 0 ? void 0 : json.id;
+                const storeHash = (_b = (_a = json === null || json === void 0 ? void 0 : json.metadata) === null || _a === void 0 ? void 0 : _a.find(x => (x === null || x === void 0 ? void 0 : x.key) === 'storeHash')) === null || _b === void 0 ? void 0 : _b.value;
+                if (!orderId || !storeHash) {
+                    return localization.logError('Unable to trigger BigCommerce /success: Missing orderId or storeHash');
+                }
+                void localization.handleFetch(`${baseUrl}/api/bigcommerce/success?orderId=${orderId}&storeHash=${storeHash}`);
+            }
+            return json;
+        };
+        this.getPullOrder = async (attempts = 0) => {
+            const order = await this.pullOrder();
+            if (order) {
+                this.order = order;
+            }
+            else if (!order && attempts < 5) {
+                // Wait for 1 second before the next attempt
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                await this.getPullOrder(attempts + 1);
+            }
+        };
+        this.checkPaymentStatus = async () => {
+            this.isLoading = true;
+            const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || cart.stripeStore.clientSecret;
+            if (clientSecret || this.storybookForceStatus) {
+                const { error, messages } = await cart.stripeStoreRetrievePayment({
+                    clientSecret,
+                    storybookForceStatus: this.storybookForceStatus,
+                });
+                this.notificationType = error ? 'error' : 'success';
+                this.notificationMessages = messages || [];
+                this.notificationTitle = error
+                    ? localization.translate('Payment failed')
+                    : localization.translate("You're all set!");
+                if (error) {
+                    submitGtag.submitGtag('zonos-checkout-payment-fail');
+                }
+                else {
+                    submitGtag.submitGtag('zonos-checkout-success');
+                    const successEvent = new CustomEvent('zonos-checkout-success', {
+                        detail: {
+                            message: 'Zonos Checkout successfully processed order',
+                        },
+                    });
+                    document.dispatchEvent(successEvent);
+                }
+                // Attempt to pull the order details from the graph every second on 5 attempts
+                if (this.notificationType === 'success') {
+                    void this.getPullOrder();
+                }
+            }
+            cart.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 = [];
+        this.order = null;
+    }
+    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;
         }
-      }
-      cart.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();
+    }
+    render() {
+        // TODO: Keeping this code for when we have a UI for order details
+        // const orderTotal = this.order?.amountSubtotals
+        //   ? Object.values(this.order.amountSubtotals).reduce((a, b) => a + b, 0)
+        //   : 0;
+        // const totalItems = this.order?.items?.reduce((acc, item) => {
+        //   return acc + item.quantity;
+        // }, 0);
+        return (index.h(index.Host, { class: "zonos--checkout-finish zonos--elements", style: {
+                '--border-radius': getBorderRadius.getBorderRadius(this.borderRadius),
+            } }, this.isLoading && (index.h("div", { class: "loading-wrapper" }, index.h("zonos-spinner", null))), !this.isLoading && (index.h(index.Fragment, null, index.h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { color: 'blue-800', content: SuccessIcon, size: 50 })) : (index.h("zonos-icon", { color: 'red-800', content: RemoveIcon$1, size: 50 })), index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", null, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), index.h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, localization.translate('Keep shopping')))))));
     }
-    void this.checkPaymentStatus();
-  }
-  render() {
-    return (index.h(index.Host, { class: "zonos--checkout-finish zonos--elements", style: {
-        '--border-radius': getBorderRadius.getBorderRadius(this.borderRadius),
-      } }, this.isLoading && (index.h("div", { class: "loading-wrapper" }, index.h("zonos-spinner", null))), !this.isLoading && (index.h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { color: 'blue-800', content: SuccessIcon, size: 50 })) : (index.h("zonos-icon", { color: 'red-800', content: RemoveIcon$1, size: 50 })), index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", null, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), index.h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, localization.translate('Keep shopping'))))));
-  }
-  static get assetsDirs() { return ["assets"]; }
+    static get assetsDirs() { return ["assets"]; }
 };
 ZonosCheckoutFinish.style = zonosCheckoutFinishCss;
 
-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;white-space:normal}.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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.continueClicked = index.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.submitGtag('zonos-checkout-payment-info');
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.continueClicked = index.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 (!cart.stripeStore.stripeElements) {
-      return null;
+    watchFormComplete() {
+        if (!this.disabled) {
+            // submit google tag when the form is complete
+            submitGtag.submitGtag('zonos-checkout-payment-info');
+        }
+    }
+    render() {
+        var _a;
+        if (!cart.stripeStore.stripeElements) {
+            return null;
+        }
+        this.disabled = !((_a = cart.stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
+        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Payment method')), this.paymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, localization.translate("We couldn't complete your payment. Please verify the payment details and try again."))), index.h("zonos-payment", null)), index.h("div", { class: "zonos--group-btn" }, index.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: cart.cartStore.total,
+            currency: cart.cartStore.currency,
+        })))));
     }
-    this.disabled = !((_a = cart.stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
-    return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Payment method')), this.paymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, localization.translate("We couldn't complete your payment. Please verify the payment details and try again."))), index.h("zonos-payment", null)), index.h("div", { class: "zonos--group-btn" }, index.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: cart.cartStore.total,
-      currency: cart.cartStore.currency,
-    })))));
-  }
-  static get watchers() { return {
-    "disabled": ["watchFormComplete"]
-  }; }
+    static get watchers() { return {
+        "disabled": ["watchFormComplete"]
+    }; }
 };
 ZonosCheckoutPayment.style = zonosCheckoutPaymentCss;
 
-const zonosCollapseCss = ":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{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";
+const zonosCollapseCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}: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{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";
 
 const ZonosCollapse = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.collapsed = false;
-    this.collapseSize = 0;
-    this.height = this.el.scrollHeight;
-  }
-  getElementHeight() {
-    const fullHeight = `${this.height}px`;
-    const collapsedHeight = `${this.collapseSize}px`;
-    return this.collapsed ? collapsedHeight : fullHeight;
-  }
-  componentDidLoad() {
-    this.height = this.el.scrollHeight;
-  }
-  componentDidRender() {
-    var _a, _b, _c;
-    (_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
-      this.height = this.el.scrollHeight;
-    });
-  }
-  render() {
-    this.height = this.el.scrollHeight;
-    return (index.h(index.Host, { class: 'zonos--elements zonos--collapse', style: {
-        height: this.getElementHeight(),
-      } }, index.h("div", null, index.h("iframe", { class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), index.h("slot", null))));
-  }
-  get el() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.collapsed = false;
+        this.collapseSize = 0;
+        this.height = this.el.scrollHeight;
+    }
+    getElementHeight() {
+        const fullHeight = `${this.height}px`;
+        const collapsedHeight = `${this.collapseSize}px`;
+        return this.collapsed ? collapsedHeight : fullHeight;
+    }
+    componentDidLoad() {
+        this.height = this.el.scrollHeight;
+    }
+    componentDidRender() {
+        var _a, _b, _c;
+        (_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
+            this.height = this.el.scrollHeight;
+        });
+    }
+    render() {
+        this.height = this.el.scrollHeight;
+        return (index.h(index.Host, { class: 'zonos--elements zonos--collapse', style: {
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+                height: this.getElementHeight(),
+            } }, index.h("div", null, index.h("iframe", { class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), index.h("slot", null))));
+    }
+    get el() { return index.getElement(this); }
 };
 ZonosCollapse.style = zonosCollapseCss;
 
-const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:Inter;display:block}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:calc(100% - 10px)}";
+const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:calc(100% - 10px)}";
 
 const ZonosCustomerInfo = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.continueClicked = index.createEvent(this, "continueClicked", 7);
-    /**
-     * handler for continue button click
-     */
-    this.continueClickHandler = () => {
-      this.continueClicked.emit();
-    };
-    this.continueLoading = false;
-    this.submitBtnType = undefined;
-    this.submitBtnColor = undefined;
-    this.defaultAddress = null;
-    this.disabled = true;
-  }
-  watchFormComplete() {
-    if (!this.disabled) {
-      // submit google tag when the form is complete
-      submitGtag.submitGtag('zonos-checkout-customer-info');
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.continueClicked = index.createEvent(this, "continueClicked", 7);
+        /**
+         * handler for continue button click
+         */
+        this.continueClickHandler = () => {
+            this.continueClicked.emit();
+        };
+        this.continueLoading = false;
+        this.submitBtnType = undefined;
+        this.submitBtnColor = undefined;
+        this.defaultAddress = null;
+        this.disabled = true;
     }
-  }
-  render() {
-    var _a, _b;
-    if (!cart.stripeStore.stripeElements) {
-      return null;
+    watchFormComplete() {
+        if (!this.disabled) {
+            // submit google tag when the form is complete
+            submitGtag.submitGtag('zonos-checkout-customer-info');
+        }
+    }
+    render() {
+        var _a, _b;
+        if (!cart.stripeStore.stripeElements) {
+            return null;
+        }
+        // make sure data is valid
+        this.disabled =
+            !((_a = cart.stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) ||
+                !((_b = cart.stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
+        return (index.h(index.Host, { class: "zonos--customer-info zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Customer information')), index.h("zonos-link-authentication", { titleText: localization.translate('Contact') }), index.h("zonos-address", { defaultAddress: this.defaultAddress, titleText: localization.translate('Address'), type: "shipping" })), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            // use primary type when on mobile mode
+            variant: this.submitBtnType }, localization.translate('Continue to shipping')))));
     }
-    // make sure data is valid
-    this.disabled =
-      !((_a = cart.stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) ||
-        !((_b = cart.stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
-    return (index.h(index.Host, { class: "zonos--customer-info zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Customer information')), index.h("zonos-link-authentication", { titleText: localization.translate('Contact') }), index.h("zonos-address", { defaultAddress: this.defaultAddress, titleText: localization.translate('Address'), type: "shipping" })), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
-      // use primary type when on mobile mode
-      variant: this.submitBtnType }, localization.translate('Continue to shipping')))));
-  }
-  static get watchers() { return {
-    "disabled": ["watchFormComplete"]
-  }; }
+    static get watchers() { return {
+        "disabled": ["watchFormComplete"]
+    }; }
 };
 ZonosCustomerInfo.style = zonosCustomerInfoCss;
 
 const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;
 
-const zonosDialogCss = ":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--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0px;top:0px;background:var(--amino-backdrop-color);z-index:-999;opacity:0;visibility:hidden;position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:1002;background:white}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--amino-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:1001;background:var(--amino-gray-0);max-width:90vw;max-height:90vh;min-height:500px;height:var(--height, auto);width:var(--width, auto);border-radius:var(--border-radius, var(--amino-radius-10));outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);border:var(--amino-border);overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-16) var(--amino-space-24)}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--amino-size-md);height:var(--amino-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--amino-radius-10)}:host .zonos--header .zonos--close-button:hover{background:var(--amino-hover-color)}:host .zonos--body{padding:var(--amino-space-8) var(--amino-space-24);max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:var(--amino-space-16) var(--amino-space-24)}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:1001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:1002;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
+const zonosDialogCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}: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--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0px;top:0px;background:var(--amino-backdrop-color);z-index:-999;opacity:0;visibility:hidden;position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:1002;background:white}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--amino-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:1001;background:var(--amino-gray-0);max-width:90vw;max-height:90vh;min-height:500px;height:var(--height, auto);width:var(--width, auto);border-radius:var(--border-radius, var(--amino-radius-10));outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);border:var(--amino-border);overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-16) var(--amino-space-24)}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--amino-size-md);height:var(--amino-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--amino-radius-10)}:host .zonos--header .zonos--close-button:hover{background:var(--amino-hover-color)}:host .zonos--body{padding:var(--amino-space-8) var(--amino-space-24);max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:var(--amino-space-16) var(--amino-space-24)}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:1001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:1002;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
 
 const ZonosDialog = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.closeDialog = index.createEvent(this, "closeDialog", 7);
-    this.isMobileMode = () => {
-      return this.mobile || window.innerWidth <= 768;
-    };
-    this.closeButtonHandler = () => {
-      this.closeDialog.emit();
-    };
-    this.clickOutsideDialogHandler = (event) => {
-      if (event.target === event.currentTarget && !this.noClickOutside) {
-        this.closeDialog.emit();
-      }
-    };
-    this.open = false;
-    this.headerText = '';
-    this.width = '460px';
-    this.height = undefined;
-    this.noHeader = false;
-    this.noBodyPadding = false;
-    this.noBorder = false;
-    this.footerRightAction = null;
-    this.borderStyle = undefined;
-    this.noCloseButton = false;
-    this.noClickOutside = false;
-    this.mobile = false;
-    this.isLoading = true;
-    this.isMobile = false;
-  }
-  handleWindowResize() {
-    this.isMobile = this.isMobileMode();
-  }
-  componentDidLoad() {
-    this.isMobile = this.isMobileMode();
-  }
-  render() {
-    // disable scroll on the body when dialog is open
-    if (this.open) {
-      document.body.style.overflow = 'hidden';
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.closeDialog = index.createEvent(this, "closeDialog", 7);
+        this.isMobileMode = () => {
+            return this.mobile || window.innerWidth <= 768;
+        };
+        this.closeButtonHandler = () => {
+            this.closeDialog.emit();
+        };
+        this.clickOutsideDialogHandler = (event) => {
+            if (event.target === event.currentTarget && !this.noClickOutside) {
+                this.closeDialog.emit();
+            }
+        };
+        this.open = false;
+        this.headerText = '';
+        this.width = '460px';
+        this.height = undefined;
+        this.noHeader = false;
+        this.noBodyPadding = false;
+        this.noBorder = false;
+        this.footerRightAction = null;
+        this.borderStyle = undefined;
+        this.noCloseButton = false;
+        this.noClickOutside = false;
+        this.mobile = false;
+        this.isLoading = true;
+        this.isMobile = false;
     }
-    else {
-      document.body.style.overflow = 'auto';
+    handleWindowResize() {
+        this.isMobile = this.isMobileMode();
     }
-    const borderStyle = getBorderRadius.getBorderRadius(this.borderStyle);
-    return (index.h(index.Host, { class: classes.classes([
-        'zonos--elements',
-        this.open && 'open',
-        this.isLoading && 'is-loading',
-        this.noBorder && 'no-border',
-        this.isMobile && 'mobile',
-      ]), style: {
-        '--border-radius': borderStyle,
-        '--height': this.height || 'initial',
-        '--width': this.width,
-      } }, index.h("div", { class: "zonos--backdrop" }), index.h("div", { "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, index.h("div", { class: "zonos--dialog" }, this.isLoading && (index.h("div", { class: "zonos--loading" }, index.h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (index.h("div", { class: "zonos--header" }, this.headerText && (index.h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), index.h("div", { class: classes.classes([
-        'zonos--body',
-        this.noBodyPadding && 'zonos--no-body-padding',
-      ]) }, index.h("slot", null)), this.footerRightAction && (index.h("div", { class: "zonos--footer" }, index.h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
-  }
-  static get assetsDirs() { return ["assets"]; }
+    componentDidLoad() {
+        this.isMobile = this.isMobileMode();
+    }
+    render() {
+        // disable scroll on the body when dialog is open
+        if (this.open) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = 'auto';
+        }
+        const borderStyle = getBorderRadius.getBorderRadius(this.borderStyle);
+        return (index.h(index.Host, { class: classes.classes([
+                'zonos--elements',
+                this.open && 'open',
+                this.isLoading && 'is-loading',
+                this.noBorder && 'no-border',
+                this.isMobile && 'mobile',
+            ]), style: {
+                '--border-radius': borderStyle,
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+                '--height': this.height || 'initial',
+                '--width': this.width,
+            } }, index.h("div", { class: "zonos--backdrop" }), index.h("div", { "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, index.h("div", { class: "zonos--dialog" }, this.isLoading && (index.h("div", { class: "zonos--loading" }, index.h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (index.h("div", { class: "zonos--header" }, this.headerText && (index.h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), index.h("div", { class: classes.classes([
+                'zonos--body',
+                this.noBodyPadding && 'zonos--no-body-padding',
+            ]) }, index.h("slot", null)), this.footerRightAction && (index.h("div", { class: "zonos--footer" }, index.h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
 };
 ZonosDialog.style = zonosDialogCss;
 
-const zonosLogoCss = ":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-inline-flexbox;display:inline-flex}:host img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";
+const zonosLogoCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}: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-inline-flexbox;display:inline-flex}:host img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";
 
 const ZonosLogo = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.theme = 'LIGHT';
-    this.width = 'auto';
-    this.class = '';
-  }
-  render() {
-    const filterColor = this.theme === 'DARK'
-      ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
-      : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-    return (index.h(index.Host, { class: classes.classes(['zonos--elements zonos--logo', this.class]), style: {
-        '--filter-color': filterColor,
-        '--width': this.width,
-      } }, index.h("img", { alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
-  }
-  static get assetsDirs() { return ["assets"]; }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.theme = 'LIGHT';
+        this.width = 'auto';
+        this.class = '';
+    }
+    render() {
+        const filterColor = this.theme === 'DARK'
+            ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
+            : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
+        return (index.h(index.Host, { class: classes.classes(['zonos--elements zonos--logo', this.class]), style: {
+                '--filter-color': filterColor,
+                '--font-family': zonosStore.zonosStoreFontFamily(),
+                '--width': this.width,
+            } }, index.h("img", { alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
+    }
+    static get assetsDirs() { return ["assets"]; }
 };
 ZonosLogo.style = zonosLogoCss;
 
@@ -378,125 +423,125 @@ const ChevronDownIcon = `<svg color="var(--amino-gray-400)" fill="none" height="
 
 const ChevronUpIcon = `<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M17.707 14.707a1 1 0 0 1-1.414 0L12 10.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l4.93-4.93a1.1 1.1 0 0 1 1.555 0l4.93 4.93a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
-const zonosReviewCss = ":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--total-pay{margin:var(--amino-space-16) 0 var(--amino-space-32)}:host(.mobile){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:var(--amino-space-24);-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-4) 0;margin-bottom:var(--amino-space-8)}:host(.mobile) .zonos--title{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;gap:var(--amino-space-8)}:host(.mobile) .zonos--total-pay{margin:0}";
+const zonosReviewCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}: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--total-pay{margin:var(--amino-space-16) 0 var(--amino-space-32)}:host(.mobile){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:var(--amino-space-24);-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-4) 0;margin-bottom:var(--amino-space-8)}:host(.mobile) .zonos--title{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;gap:var(--amino-space-8)}:host(.mobile) .zonos--total-pay{margin:0}";
 
 const ZonosReview = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.mobile = false;
-    this.collapsed = false;
-    this.isMobile = false;
-  }
-  handleWindowResize() {
-    this.isMobile = submitGtag.isCheckoutMobile(this.mobile);
-  }
-  componentWillLoad() {
-    this.isMobile = submitGtag.isCheckoutMobile(this.mobile);
-  }
-  render() {
-    const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';
-    const totalTextType = this.isMobile
-      ? 'boldSubheader'
-      : 'secondaryPageHeader';
-    const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';
-    const totalWithoutTaxes = cart.cartStore.total - cart.cartStore.dutiesTaxFees;
-    const renderCollapseIcon = () => {
-      // only display the collapse icon if the component is being rendered with mobile styles
-      if (!this.isMobile) {
-        return null;
-      }
-      if (!this.collapsed) {
-        return (index.h("zonos-icon", { color: "gray-1200", content: ChevronDownIcon }));
-      }
-      return (index.h("zonos-icon", { color: "gray-1200", content: ChevronUpIcon }));
-    };
-    return (index.h(index.Host, { class: classes.classes([
-        'zonos--review zonos--elements',
-        this.isMobile && 'mobile',
-      ]) }, index.h("div", { class: "zonos--title" }, index.h("zonos-text", { color: titleTextColor, type: titleTextType }, localization.translate('Pay'), " ", zonosStore.zonosStore.organizationName), renderCollapseIcon()), index.h("div", { class: "zonos--total-pay" }, index.h("zonos-text", { type: totalTextType }, formatCurrency({
-      amount: 
-      // show total without taxes when step is shipping, show total with taxes when step is payment
-      cart.cartStore.step === 'shipping'
-        ? totalWithoutTaxes
-        : cart.cartStore.total,
-      currency: cart.cartStore.currency,
-    })))));
-  }
-  static get assetsDirs() { return ["assets"]; }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mobile = false;
+        this.collapsed = false;
+        this.isMobile = false;
+    }
+    handleWindowResize() {
+        this.isMobile = submitGtag.isCheckoutMobile(this.mobile);
+    }
+    componentWillLoad() {
+        this.isMobile = submitGtag.isCheckoutMobile(this.mobile);
+    }
+    render() {
+        const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';
+        const totalTextType = this.isMobile
+            ? 'boldSubheader'
+            : 'secondaryPageHeader';
+        const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';
+        const totalWithoutTaxes = cart.cartStore.total - cart.cartStore.dutiesTaxFees;
+        const renderCollapseIcon = () => {
+            // only display the collapse icon if the component is being rendered with mobile styles
+            if (!this.isMobile) {
+                return null;
+            }
+            if (!this.collapsed) {
+                return (index.h("zonos-icon", { color: "gray-1200", content: ChevronDownIcon }));
+            }
+            return (index.h("zonos-icon", { color: "gray-1200", content: ChevronUpIcon }));
+        };
+        return (index.h(index.Host, { class: classes.classes([
+                'zonos--review zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, index.h("div", { class: "zonos--title" }, index.h("zonos-text", { color: titleTextColor, type: titleTextType }, localization.translate('Pay'), " ", zonosStore.zonosStore.organizationName), renderCollapseIcon()), index.h("div", { class: "zonos--total-pay" }, index.h("zonos-text", { type: totalTextType }, formatCurrency({
+            amount: 
+            // show total without taxes when step is shipping, show total with taxes when step is payment
+            cart.cartStore.step === 'shipping'
+                ? totalWithoutTaxes
+                : cart.cartStore.total,
+            currency: cart.cartStore.currency,
+        })))));
+    }
+    static get assetsDirs() { return ["assets"]; }
 };
 ZonosReview.style = zonosReviewCss;
 
-const zonosShippingCss = ".sc-zonos-shipping-h{font-family:Inter;display:block}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:calc(100% - 10px)}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
+const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:calc(100% - 10px)}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
 
 const ZonosShipping = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.continueClicked = index.createEvent(this, "continueClicked", 7);
-    this.handleRadioSelected = async (e) => {
-      var _a;
-      this.selectedShippingMethod = e.detail;
-      if (!this.selectedShippingMethod) {
-        return;
-      }
-      const selectedShippingOption = ((_a = cart.cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.find(item => { var _a; return item.id === ((_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value); })) || null;
-      if (!selectedShippingOption) {
-        return;
-      }
-      // save selected shipping option to store
-      const updateStatus = await cart.cartStoreUpdateSelectedShippingOption(selectedShippingOption);
-      if (!updateStatus) {
-        return;
-      }
-      this.disabled = false;
-    };
-    /**
-     * handler for continue button click
-     */
-    this.continueClickHandler = () => {
-      this.continueClicked.emit();
-    };
-    this.continueLoading = false;
-    this.submitBtnColor = undefined;
-    this.submitBtnType = undefined;
-    this.selectedShippingMethod = null;
-    this.disabled = true;
-  }
-  watchFormComplete() {
-    if (!this.disabled) {
-      // submit google tag when the form is complete
-      submitGtag.submitGtag('zonos-checkout-shipping-info');
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.continueClicked = index.createEvent(this, "continueClicked", 7);
+        this.handleRadioSelected = async (e) => {
+            var _a;
+            this.selectedShippingMethod = e.detail;
+            if (!this.selectedShippingMethod) {
+                return;
+            }
+            const selectedShippingOption = ((_a = cart.cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.find(item => { var _a; return item.id === ((_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value); })) || null;
+            if (!selectedShippingOption) {
+                return;
+            }
+            // save selected shipping option to store
+            const updateStatus = await cart.cartStoreUpdateSelectedShippingOption(selectedShippingOption);
+            if (!updateStatus) {
+                return;
+            }
+            this.disabled = false;
+        };
+        /**
+         * handler for continue button click
+         */
+        this.continueClickHandler = () => {
+            this.continueClicked.emit();
+        };
+        this.continueLoading = false;
+        this.submitBtnColor = undefined;
+        this.submitBtnType = undefined;
+        this.selectedShippingMethod = null;
+        this.disabled = true;
+    }
+    watchFormComplete() {
+        if (!this.disabled) {
+            // submit google tag when the form is complete
+            submitGtag.submitGtag('zonos-checkout-shipping-info');
+        }
+    }
+    render() {
+        var _a;
+        const serviceLevels = (_a = cart.cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.flatMap((item) => {
+            var _a, _b;
+            const { expectedDate, maxTransit, minTransit } = cart.cartStoreGetShippingTransitInfo(item);
+            const sublabel = expectedDate
+                ? `${localization.translate('Expected delivery')} ${expectedDate}`
+                : '';
+            const caption = minTransit && maxTransit
+                ? `(${minTransit}-${maxTransit} ${localization.translate('business days')})`
+                : '';
+            const shippingAmount = ((_b = (_a = cart.cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; })) === null || _b === void 0 ? void 0 : _b.subtotals.shipping) || 0;
+            return {
+                caption,
+                label: item.displayName,
+                price: formatCurrency({
+                    amount: shippingAmount,
+                    currency: cart.cartStore.currency,
+                }),
+                sublabel,
+                value: item.id,
+            };
+        });
+        return (index.h(index.Host, { class: "zonos--shipping zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Shipping information')), index.h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, localization.translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (index.h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (index.h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) }))), index.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 }, localization.translate('Go to payment'))));
     }
-  }
-  render() {
-    var _a;
-    const serviceLevels = (_a = cart.cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.flatMap((item) => {
-      var _a, _b;
-      const { expectedDate, maxTransit, minTransit } = cart.cartStoreGetShippingTransitInfo(item);
-      const sublabel = expectedDate
-        ? `${localization.translate('Expected delivery')} ${expectedDate}`
-        : '';
-      const caption = minTransit && maxTransit
-        ? `(${minTransit}-${maxTransit} ${localization.translate('business days')})`
-        : '';
-      const shippingAmount = ((_b = (_a = cart.cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; })) === null || _b === void 0 ? void 0 : _b.subtotals.shipping) || 0;
-      return {
-        caption,
-        label: item.displayName,
-        price: formatCurrency({
-          amount: shippingAmount,
-          currency: cart.cartStore.currency,
-        }),
-        sublabel,
-        value: item.id,
-      };
-    });
-    return (index.h(index.Host, { class: "zonos--shipping zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Shipping information')), index.h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, localization.translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (index.h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (index.h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) }))), index.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 }, localization.translate('Go to payment'))));
-  }
-  static get watchers() { return {
-    "disabled": ["watchFormComplete"]
-  }; }
+    static get watchers() { return {
+        "disabled": ["watchFormComplete"]
+    }; }
 };
 ZonosShipping.style = zonosShippingCss;