@zonos/elements 1.3.81 → 1.3.83

package/dist/cjs/{zonos-badge_13.cjs.entry.js → zonos-cart-items_12.cjs.entry.js}

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const zonosStore = require('./zonosStore-a4395972.js');
+const cart = require('./cart-4de3faca.js');
 const classes = require('./classes-b7918f56.js');
-const cart = require('./cart-97e693e4.js');
-const paypal = require('./paypal-16029169.js');
-const createCustomEvent = require('./createCustomEvent-777b3fa7.js');
+const paypal = require('./paypal-370b3a10.js');
+const zonosStore = require('./zonosStore-a4395972.js');
+const createCustomEvent = require('./createCustomEvent-65331eae.js');
 const getBorderRadius = require('./getBorderRadius-5a64574c.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
@@ -16,34 +16,6 @@ const isDarkColor = require('./isDarkColor-5efc8367.js');
 const isColorVariable = require('./isColorVariable-6f5a9608.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
 
-const zonosBadgeCss = ":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 .zonos--badge-content{display:-ms-flexbox;display:flex;gap:8px;font-size:var(--zonos-elements-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--zonos-elements-radius-6);background-color:var(--zonos-elements-gray-100);color:var(--zonos-elements-gray-800);-ms-flex-align:center;align-items:center}:host p{font-weight:600;line-height:16px}:host .icon-right svg{-ms-flex-order:2;order:2}:host .small{padding:2px 8px}:host .rounded{border-radius:20px}:host .bold{background-color:var(--zonos-elements-gray-600);color:var(--zonos-elements-gray-100)}:host .blue{background-color:var(--zonos-elements-blue-100);color:var(--zonos-elements-blue-800)}:host .blue.bold{background-color:var(--zonos-elements-blue-600);color:var(--zonos-elements-blue-100)}:host .green{background-color:var(--zonos-elements-green-100);color:var(--zonos-elements-green-800)}:host .green.bold{background-color:var(--zonos-elements-green-600);color:var(--zonos-elements-green-100)}:host .red{background-color:var(--zonos-elements-red-100);color:var(--zonos-elements-red-800)}:host .red.bold{background-color:var(--zonos-elements-red-600);color:var(--zonos-elements-red-100)}:host .orange{background-color:var(--zonos-elements-orange-100);color:var(--zonos-elements-orange-800);border:1px solid var(--zonos-elements-orange-200)}:host .orange.bold{background-color:var(--zonos-elements-orange-600);color:var(--zonos-elements-orange-100)}:host .purple{background-color:var(--zonos-elements-purple-100);color:var(--zonos-elements-purple-800)}:host .purple.bold{background-color:var(--zonos-elements-purple-600);color:var(--zonos-elements-purple-100)}:host .cyan{background-color:var(--zonos-elements-cyan-100);color:var(--zonos-elements-cyan-800)}:host .cyan.bold{background-color:var(--zonos-elements-cyan-600);color:var(--zonos-elements-cyan-100)}:host .transparent{background-color:transparent;border:1px solid var(--zonos-elements-gray-200);color:var(--zonos-elements-gray-800)}:host .transparent.bold{background-color:var(--zonos-elements-glass-600);color:var(--zonos-elements-gray-100)}";
-const ZonosBadgeStyle0 = zonosBadgeCss;
-
-const ZonosBadge = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.bold = false;
-        this.badgeColor = 'gray';
-        this.icon = undefined;
-        this.iconRight = false;
-        this.size = 'default';
-        this.rounded = false;
-    }
-    render() {
-        return (index.h(index.Host, { key: '4e022b4090de017818c5ba8f86e2d7684a1b8f05', class: classes.classes(['zonos--elements zonos--badge']), style: {
-                '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '8e6a4c0fcf81939d69fd3aec91463ed6c7a2d67d', class: classes.classes([
-                'zonos--badge-content',
-                this.badgeColor,
-                this.rounded && 'rounded',
-                this.iconRight && 'icon-right',
-                this.size,
-                this.bold && 'bold',
-            ]) }, this.icon, index.h("zonos-text", { key: '5824866453d31abef18443179e6bc1692e9e98a3', textColor: `${this.badgeColor}-800` }, index.h("slot", { key: '9bc411177ae04e8fa1061098023860204fa1a5d7' })))));
-    }
-};
-ZonosBadge.style = ZonosBadgeStyle0;
-
 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(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:8px;font-size:var(--zonos-elements-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 .zonos--cart-table td{vertical-align:top}:host .zonos--cart-item-name{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:12px}:host .zonos--cart-item-name .zonos--cart-item-quantity>*{display:inline-block}:host .zonos--cart-item-price zonos-text{white-space:nowrap}:host img{min-width:40px;margin-top:6px}";
 const ZonosCartItemsStyle0 = zonosCartItemsCss;
 
@@ -63,7 +35,7 @@ const ZonosCartItems = class {
                     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", weight: 600 }, item.name), index.h("zonos-text", { class: "zonos--cart-item-quantity", textColor: "gray-700", type: "label" }, cart.translate('Quantity'), ":", ' ', index.h("zonos-text", { type: "label", weight: 600 }, item.quantity))), index.h("td", { class: "zonos--column zonos--cart-item-price" }, index.h("zonos-text", { type: "semiBoldLabel", weight: 600 }, cart.currencyFormat({
+                }, 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("zonos-text", { textColor: "gray-600", type: "caption" }, cart.translate('Quantity'), ": ", item.quantity)), index.h("td", { class: "zonos--column zonos--cart-item-price" }, index.h("zonos-text", { type: "semiBoldLabel", weight: 600 }, cart.currencyFormat({
                 amount: item.amount * rate * item.quantity,
                 currency: cart.cartStore.currency,
             })))));
@@ -73,7 +45,7 @@ const ZonosCartItems = class {
 };
 ZonosCartItems.style = ZonosCartItemsStyle0;
 
-const ChevronUpIcon$1 = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+const ChevronUpIcon$2 = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_dd_2052_3658)">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7.46967 14.5303C7.76256 14.8232 8.23744 14.8232 8.53033 14.5303L12.5 10.5607L16.4697 14.5303C16.7626 14.8232 17.2374 14.8232 17.5303 14.5303C17.8232 14.2374 17.8232 13.7626 17.5303 13.4697L13.0303 8.96967C12.7374 8.67678 12.2626 8.67678 11.9697 8.96967L7.46967 13.4697C7.17678 13.7626 7.17678 14.2374 7.46967 14.5303Z" fill="currentColor"/>
 </g>
@@ -136,7 +108,7 @@ const ZonosCartRestrictedItems = class {
                 this.internalCollapsed && 'collapsed',
             ]), onClick: () => {
                 this.internalCollapsed = !this.internalCollapsed;
-            } }, index.h("div", { class: "zonos--title-wrapper" }, index.h("zonos-text", { textColor: "red-600", type: "label" }, `${cart.translate(this.internalCollapsed ? 'Show' : 'Hide')} ${restrictedItemTotal} ${cart.translate('restricted items')}`), index.h("zonos-icon", { content: ChevronUpIcon$1, iconColor: "red-600" }))), index.h("zonos-collapse", { collapsed: this.internalCollapsed }, index.h("zonos-banner", { bannerTitle: cart.translate('The following items are unable to be shipped to your country and are not included in your cart total.'), intent: "error" }), index.h("table", { class: "zonos--cart-table" }, index.h("tbody", null, cart.cartStore.restrictedItems.map((item, index$1) => {
+            } }, index.h("div", { class: "zonos--title-wrapper" }, index.h("zonos-text", { textColor: "red-600", type: "label" }, `${cart.translate(this.internalCollapsed ? 'Show' : 'Hide')} ${restrictedItemTotal} ${cart.translate('restricted items')}`), index.h("zonos-icon", { content: ChevronUpIcon$2, iconColor: "red-600" }))), index.h("zonos-collapse", { collapsed: this.internalCollapsed }, index.h("zonos-banner", { bannerTitle: cart.translate('The following items are unable to be shipped to your country and are not included in your cart total.'), intent: "error" }), index.h("table", { class: "zonos--cart-table" }, index.h("tbody", null, cart.cartStore.restrictedItems.map((item, index$1) => {
             var _a, _b;
             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: 
@@ -157,24 +129,61 @@ const ZonosCartRestrictedItems = class {
 };
 ZonosCartRestrictedItems.style = ZonosCartRestrictedItemsStyle0;
 
-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(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:20px 8px;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:8px}:host .zonos--cart-subtotal-title,:host .zonos--cart-subtotal-price{border-bottom:1px solid var(--zonos-elements-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}:host .zonos--cart-subtotal-price zonos-text{white-space:nowrap}:host .zonos--cart-subtotal-price zonos-text,:host .zonos--cart-pay-total zonos-text{white-space:nowrap}";
+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(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:20px 8px;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:8px}:host .zonos--cart-subtotal-title,:host .zonos--cart-subtotal-price,:host .zonos--cart-promo-code-col{border-bottom:1px solid var(--zonos-elements-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}:host .zonos--cart-subtotal-price zonos-text{white-space:nowrap}:host .zonos--cart-subtotal-price zonos-text,:host .zonos--cart-pay-total zonos-text{white-space:nowrap}:host .zonos--cart-promo-code-input-wrapper{display:-ms-flexbox;display:flex;gap:16px;-ms-flex-align:center;align-items:center}:host .zonos--cart-promo-code-input{-ms-flex:1;flex:1}";
 const ZonosCartSubtotalStyle0 = zonosCartSubtotalCss;
 
 const ZonosCartSubtotal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.submitBtnType = undefined;
+        this.submitBtnColor = undefined;
+        this.loading = false;
     }
     render() {
+        var _a, _b, _c, _d, _e;
         const showDutyTaxesInfo = cart.cartStore.step === 'payment' || cart.cartStore.step === 'shipping';
         // Show 0 for subtotal and total when all items are restricted
         const total = cart.cartStoreHasOneEligibleItem() ? cart.cartStore.total : 0;
         const subtotal = cart.cartStoreHasOneEligibleItem() ? cart.cartStore.subtotal : 0;
+        const appliedPromoCode = (_e = (_d = (_c = (_b = (_a = cart.cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(Boolean)) === null || _b === void 0 ? void 0 : _b.landedCost.appliedAdjustments) === null || _c === void 0 ? void 0 : _c.find(x => { var _a; return ((_a = x.adjustment) === null || _a === void 0 ? void 0 : _a.source) === 'PROMO_CODE'; })) === null || _d === void 0 ? void 0 : _d.adjustment) === null || _e === void 0 ? void 0 : _e.name;
+        const applyPromoCode = async () => {
+            // Promo code apply button is clicked
+            cart.cartStore.promoCodeApplied = true;
+            // Reset promo code highlight error state
+            cart.cartStore.promoCodeError = false;
+            this.loading = true;
+            await cart.stripeStoreApplyPromoCode();
+            this.loading = false;
+        };
+        const removePromoCode = async () => {
+            // Reset promo code highlight error state
+            cart.cartStore.promoCodeError = false;
+            this.loading = true;
+            await cart.stripeStoreRemovePromoCode();
+            this.loading = false;
+        };
         const renderShippingInfo = () => {
             if (!cart.cartStore.selectedShippingOption) {
                 return (index.h(index.Fragment, null, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.translate('Shipping')), index.h("zonos-text", { class: "zonos--caption", type: "caption" }, cart.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))));
         };
+        const renderLandedCost = () => {
+            if (cart.cartStore.landedCostMethod === 'DAP') {
+                return (index.h(index.Fragment, null, index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.translate('Duties, taxes, and fees')), cart.cartStore.dutiesTaxesFeesEstimate
+                    ? `${cart.translate('Estimated')} ${cart.currencyFormat({
+                        amount: cart.cartStore.dutiesTaxesFeesEstimate,
+                        currency: cart.cartStore.currency,
+                    })}`
+                    : '-'), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("div", { class: "zonos--cart-duty-tax-price" }, cart.translate('Due at delivery')))));
+            }
+            return (index.h(index.Fragment, null, index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.translate('Duties, taxes, and fees')), index.h("zonos-text", { class: "zonos--caption", type: "caption" }, cart.translate('Nothing due at the door'))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("div", { class: "zonos--cart-duty-tax-price" }, cart.cartStore.dutiesTaxesFees
+                ? cart.currencyFormat({
+                    amount: cart.cartStore.dutiesTaxesFees,
+                    currency: cart.cartStore.currency,
+                })
+                : '-'))));
+        };
         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" }, cart.translate('Cart subtotal'))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("zonos-text", { type: "semiBoldLabel" }, cart.currencyFormat({
             amount: subtotal,
             currency: cart.cartStore.currency,
@@ -183,12 +192,7 @@ const ZonosCartSubtotal = class {
                 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" }, cart.translate('Duties, taxes, and fees')))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("div", { class: "zonos--cart-duty-tax-price" }, cart.cartStore.dutiesTaxFees
-            ? cart.currencyFormat({
-                amount: cart.cartStore.dutiesTaxFees,
-                currency: cart.cartStore.currency,
-            })
-            : '-')))), !!cart.cartStore.adjustmentTotal && (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" }, cart.translate('Discounts')))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("zonos-text", { type: "semiBoldLabel" }, cart.currencyFormat({
+            : '-')), showDutyTaxesInfo && (index.h("tr", { class: "zonos--row zonos--cart-duties" }, index.h("td", { class: "zonos--column" }), renderLandedCost())), cart.cartStore.step !== 'customer-info' && (index.h("tr", { class: "zonos--row zonos--cart-promo-code" }, index.h("td", { class: "zonos--column" }), !!appliedPromoCode ? (index.h(index.Fragment, null, index.h("td", { class: "zonos--column zonos--cart-promo-code-col" }, this.loading ? (index.h("zonos-spinner", { size: 16 })) : (index.h("zonos-badge", { dismissHandler: () => removePromoCode() }, cart.cartStore.promoCode))), index.h("td", { class: "zonos--column zonos--cart-promo-code-col" }))) : (index.h("td", { class: "zonos--column zonos--cart-promo-code-col", colSpan: 2 }, index.h("div", { class: "zonos--cart-promo-code-input-wrapper" }, index.h("zonos-input", { class: "zonos--cart-promo-code-input", inputLabel: cart.translate('Add promotional code'), inputValue: cart.cartStore.promoCode, isError: cart.cartStore.promoCodeError, onInputChange: e => (cart.cartStore.promoCode = e.detail.trim()) }), index.h("zonos-button", { loading: this.loading, onClick: () => applyPromoCode(), variant: "primary" }, cart.translate('Apply'))))))), !!cart.cartStore.adjustmentTotal && (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" }, cart.translate('Discounts')))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("zonos-text", { type: "semiBoldLabel" }, cart.currencyFormat({
             amount: cart.cartStore.adjustmentTotal,
             currency: cart.cartStore.currency,
         }))))), 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" }, cart.translate('Order total'))), index.h("td", { class: "zonos--column" }, index.h("zonos-text", { type: "semiBoldLabel" }, cart.currencyFormat({
@@ -389,6 +393,8 @@ const ZonosCheckoutFinish = class {
                 // wait this to finish before resetting store and checkout session id
                 await this.getPullOrder();
             }
+            // reset promo when checkout is finished
+            cart.stripeStoreResetPromoCode();
             this.isLoading = false;
             cart.stripeStoreReset();
             paypal.paypalStoreReset();
@@ -427,11 +433,11 @@ const ZonosCheckoutFinish = class {
         var _a, _b;
         const orderId = ((_a = this.order) === null || _a === void 0 ? void 0 : _a.accountOrderNumber) || getGraphQlShortId((_b = this.order) === null || _b === void 0 ? void 0 : _b.id);
         const isTestMode = createCustomEvent.getIsTestMode();
-        return (index.h(index.Host, { key: 'fabd14b9a81a86771e54be97d957783b7348f1d1', class: "zonos--checkout-finish zonos--elements", style: {
+        return (index.h(index.Host, { key: '9939772d4ce4213978ae6b02b4cd5345d15dbdfd', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius.getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (index.h("div", { key: '540c20d55e11a942e69326c970d402bc3c6c080b', class: "loading-wrapper" }, index.h("zonos-spinner", { key: 'db6f50490b64099c5224f741f726c352739557d4' }))), !this.isLoading && (index.h("div", { key: '33720a72e039b16f6b8983472868a57e96fdca11', class: "zonos--finish-details" }, index.h("div", { key: 'de92dd2f629e63001438a46da6c331b46349d9e7', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: '98c1b679814b67bf75a4594c749e7596a2c03d17', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), orderId && (index.h("div", { key: '82bf5d17c9d93919b7a2c8b02564f99471cbdc37', class: "zonos--order-number" }, "Order #", orderId)), index.h("zonos-text", { key: '93006790ec06f8b9e3ab6e86c41627d9e10de0a0', textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), index.h("zonos-button", { key: '09ac3086c6c0252589d1ca92cb09f8af7fb3e1aa', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText)), isTestMode && cart.cartStore.step === 'finish' && (index.h("div", { key: '5ed5f468a66d30556bb4e5191dfda7c1294ac541', class: "zonos--finish-button-wrapper" }, index.h("zonos-button", { key: 'c9616613528a299618e99b09d70c236f59f90e14', backgroundColor: "gray-0", buttonColor: "gray-1200", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), index.h("zonos-button", { key: 'c9cf9f5a5d59f5df8c076488c538efd6d3e63674', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
+            } }, this.isLoading && (index.h("div", { key: '491d4d0ba3dc487d448606009a30a5ce8d3bb86e', class: "loading-wrapper" }, index.h("zonos-spinner", { key: '3179aeb472d3e70628d3f1e3e2b76ed3d622145d' }))), !this.isLoading && (index.h("div", { key: '6044c9d1ac7599d9168f944dcf82028669fd1f37', class: "zonos--finish-details" }, index.h("div", { key: 'd22ec981a73db08e4871c8babe29f9a09a5bc29d', class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { key: 'bfef33fd319456253e07c3ef3f81da1b85414df9', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), orderId && (index.h("div", { key: 'f056c93644d1f9defa263f59111874f154293b51', class: "zonos--order-number" }, "Order #", orderId)), index.h("zonos-text", { key: '69d38c4640943a5cfdcef5ea6951ddec9c7b8a84', textColor: "gray-600" }, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), index.h("zonos-button", { key: 'fbb2d1cc0baab99a3312f2077c28cb9d51b4eb44', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText)), isTestMode && cart.cartStore.step === 'finish' && (index.h("div", { key: '7b63fd838f850ce6a5acf4970fa66657ca05e235', class: "zonos--finish-button-wrapper" }, index.h("zonos-button", { key: '85035826e36d52ccf8c77aa6ba6e27173fccdaa6', backgroundColor: "gray-0", buttonColor: "gray-1200", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), index.h("zonos-button", { key: 'd3848fdbdf1380dce49fcbc2b2903d99ce65247d', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -629,28 +635,29 @@ const ZonosCheckoutProgressTabs = class {
     render() {
         const selectedStep = cart.cartStore.step;
         const labelSelectedColor = this.tabColor || zonosStore.zonosStore.appearance.colorSecondary;
+        const backgroundColor = this.backgroundColor || zonosStore.zonosStore.appearance.colorPrimary || '';
         // If the background color and the tab color are not contrat enough, increase the contrast of the label color
-        const contrastLabelColor = this.backgroundColor && labelSelectedColor
+        const contrastLabelColor = backgroundColor && labelSelectedColor
             ? getContrastColor({
-                backgroundColor: isColorVariable.isColorVariable(this.backgroundColor)
+                backgroundColor: isColorVariable.isColorVariable(backgroundColor)
                     ? window
                         .getComputedStyle(this.ele)
-                        .getPropertyValue(`--zonos-elements-${this.backgroundColor.replace('--zonos-elements-', '')}`)
-                    : this.backgroundColor,
+                        .getPropertyValue(`--zonos-elements-${backgroundColor.replace('--zonos-elements-', '')}`)
+                    : backgroundColor,
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (index.h(index.Host, { key: '472a2f3201149fbc99057c8c5c39f002e792c37b', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: 'f7310a3631e3a1061d8f08af0fc7337fb0a6be26', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, index.h("div", { key: 'bc90b6d7e6e8d9ef943473f6599588e326992814', class: "zonos--tab-wrapper" }, Object.values(cart.cartStore.tabItems).map((tab, index$1) => {
+            } }, index.h("div", { key: 'fafce1662609cf7c966d9062ef55594d43e58643', class: "zonos--tab-wrapper" }, Object.values(cart.cartStore.tabItems).map((tab, index$1) => {
             const isSelected = tab.value === selectedStep;
             return (index.h("button", { class: classes.classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cart.cartStore.step = tab.value) }, index.h("div", { class: "zonos--tab-index" }, index.h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index$1 + 1), index.h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), index.h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, cart.translate(tab.label))));
-        })), index.h("div", { key: '3e6ac1dd03568f4bebe55449742c98fee8dca57f', class: "zonos--tab-progress" }, index.h("div", { key: '5590853db6942aedf74542ebd76b2696df8aa99f', class: "zonos--progress-bar-fill" }))));
+        })), index.h("div", { key: '3d2a5c5289a694bf6ec8e93ba15ee4f79123d149', class: "zonos--tab-progress" }, index.h("div", { key: '7d6ea3e0c81cdb354ccf31748bf88d1937037c52', class: "zonos--progress-bar-fill" }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get ele() { return index.getElement(this); }
@@ -751,12 +758,12 @@ const ZonosConfirmDialog = class {
         const borderStyle = getBorderRadius.getBorderRadius();
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = zonosStore.getZonosStoreTheme(zonosStore.zonosStore.appearance.theme);
-        return (index.h(index.Host, { key: 'ca8b99331f1241efe183dec928bd98cf5768e2e8', class: classes.classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
+        return (index.h(index.Host, { key: '77cc26ec971a528d2f5115168c716de59440e5e3', class: classes.classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
                 '--border-radius': borderStyle,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '5f4e7750eeb7d86c229d0eb3880b642cf1f891f0', class: "zonos--backdrop", tabIndex: -1 }), index.h("div", { key: '962772361ce8d2c888db656d7c691cfcc2443040', "aria-hidden": "true", class: classes.classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, index.h("div", { key: '4935ea105fdfdea6c525449c4a460686347a6939', class: "zonos--confirm-dialog", onBlur: () => {
+            } }, index.h("div", { key: '6120bd47e631be5d2300a8a996fef355f6b1b269', class: "zonos--backdrop", tabIndex: -1 }), index.h("div", { key: '5cf784224ade84189f87059a6923ed6e31c01903', "aria-hidden": "true", class: classes.classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, index.h("div", { key: '506707fbae72411df534b98dd9a6d1ed4b15787b', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, index.h("div", { key: '0483bd8c2c9adba0ed521c04ab0ccfd806002a51', class: "wrapper" }, index.h("div", { key: 'dccd091571b48c2df046a86f4982496012951f08', class: "icon-wrapper" }, this.renderIcon()), index.h("div", { key: 'f6a0177b886aae16754a262326261d1a87f75dce', class: "content" }, index.h("div", { key: 'dc44e700a8d826d521fea7be527806faef1b1432', class: "title" }, index.h("zonos-text", { key: 'd42d21532cdcc276a1d1257fc6427d646003bd5d', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (index.h("div", { key: '2bba84f332fce9b2a9702d9c6753e41a0120ead9', class: "subtitle" }, index.h("zonos-text", { key: '6840ddd1b655cf9b9fc974ada6864b9cea74f943', textColor: "gray-800" }, this.dialogSubtitle)))), index.h("div", { key: '3ff328db3a04418d6a1e0cb34af2ab894d4910f9', class: "footer" }, this.dialogType === 'confirm' && (index.h("zonos-button", { key: '7a05213b60700ee83b135309bc615168fae75a40', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || cart.translate('Cancel'))), index.h("zonos-button", { key: '0fac5efc64f803d4f321ad269093119a7ffb3f20', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, index.h("div", { key: '0926f36a825557de771abe24369e4ec4d77a1b41', class: "wrapper" }, index.h("div", { key: 'dc260b08ba1635a2d3bdd3533e9ea49e042db36c', class: "icon-wrapper" }, this.renderIcon()), index.h("div", { key: 'abec0bf3234dc00d331bd364e28cfe47c5e0f93e', class: "content" }, index.h("div", { key: '58547007970d8be7b1fb5c9b4e1f3ed0d4d82420', class: "title" }, index.h("zonos-text", { key: '4759fe0b09f10ba8501d78a70b1e06ee55af12c0', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (index.h("div", { key: 'd0144f944516b491494f0016d5ece673546ee4bf', class: "subtitle" }, index.h("zonos-text", { key: 'aa4b392f133c62a4f2aad40761fae713cc348c55', textColor: "gray-800" }, this.dialogSubtitle)))), index.h("div", { key: 'ed8bfb3286e0109c4cd3cea1635cb701d1aa5a45', class: "footer" }, this.dialogType === 'confirm' && (index.h("zonos-button", { key: '63a79f239cda9b934ff497d449626aa44f4c058a', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || cart.translate('Cancel'))), index.h("zonos-button", { key: '70b1f265a31b1e8645ad1b386193b6785756bb09', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -976,11 +983,11 @@ const ZonosRestState = class {
     }
     render() {
         const imageUrl = this.getImageRestState();
-        return (index.h(index.Host, { key: 'a87be11591bfc71ad5133ceeea1f6b396cd98055', class: classes.classes(['zonos--elements zonos--restState']), style: {
+        return (index.h(index.Host, { key: '662eee60347a898a6dd94e7ca7d580932dfff7d7', class: classes.classes(['zonos--elements zonos--restState']), style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'c317f01e0ac745e6ef91df1247b98c72aa340ce8', class: "zonos--restState-image" }, index.h("img", { key: '34947c09f8bcb76b21a547d8f5e0aa88d957a760', alt: this.restStateType, onError: () => {
+            } }, index.h("div", { key: '92674dbfb60e16c68d24abc0809bfe0fad515739', class: "zonos--restState-image" }, index.h("img", { key: 'cafbc678396b0a1e0d6dc4781d5b43c3ea687c4b', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), index.h("div", { key: '6e5ea4207cafd572ad947e10526d20c38b24764f', class: "content" }, index.h("zonos-text", { key: '2dcb142426419451a0543ef2a110d7e8c713879f', class: "title", type: "boldSubheader" }, this.restStateTitle), index.h("zonos-text", { key: '440fe0d032979b56316cc9dc58c67d2c62795f3a', class: "subtitle" }, this.restStateSubtitle)), index.h("div", { key: '2c9d2542bee1dc37202204529d8dd09b9c0592fa', class: "action" }, index.h("slot", { key: 'a50f0d183dd80a5c8509c8d3b839e342c661a33f' }))));
+            }, src: imageUrl })), index.h("div", { key: 'e05d28dd121469f81ecc962ac7d9f28b8b0764f7', class: "content" }, index.h("zonos-text", { key: 'b1c0d1cb51eca4357240d97f773a8359323a6024', class: "title", type: "boldSubheader" }, this.restStateTitle), index.h("zonos-text", { key: '4cdf80c1578fa29364fddf506c9c58e264d7fb34', class: "subtitle" }, this.restStateSubtitle)), index.h("div", { key: '6ed981023268438ee9ca5e3a330649d13b897156', class: "action" }, index.h("slot", { key: 'bfa3fa672372bfff4b3e270964431aa25dd53f25' }))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -988,7 +995,7 @@ ZonosRestState.style = ZonosRestStateStyle0;
 
 const ChevronDownIcon = `<svg color="var(--zonos-elements-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="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
-const ChevronUpIcon = `<svg color="var(--zonos-elements-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 ChevronUpIcon$1 = `<svg color="var(--zonos-elements-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: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{position:-webkit-sticky;position:sticky;top:0;background-color:var(--zonos-elements-gray-0);z-index:1}:host .zonos--total-pay{margin:8px 0 24px}:host(.mobile){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:24px;-ms-flex-pack:justify;justify-content:space-between;padding:4px 0;margin-bottom:8px;background-color:transparent}:host(.mobile) .zonos--title{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;gap:8px}:host(.mobile) .zonos--total-pay{margin:0}";
 const ZonosReviewStyle0 = zonosReviewCss;
@@ -1021,7 +1028,7 @@ const ZonosReview = class {
             if (!this.collapsed) {
                 return (index.h("zonos-icon", { "aria-label": "Collapse expanded section", content: ChevronDownIcon, iconColor: "gray-1200" }));
             }
-            return (index.h("zonos-icon", { "aria-label": "Expand collapsed section", content: ChevronUpIcon, iconColor: "gray-1200" }));
+            return (index.h("zonos-icon", { "aria-label": "Expand collapsed section", content: ChevronUpIcon$1, iconColor: "gray-1200" }));
         };
         return (index.h(index.Host, { class: classes.classes([
                 'zonos--review zonos--elements',
@@ -1037,17 +1044,32 @@ const ZonosReview = class {
 };
 ZonosReview.style = ZonosReviewStyle0;
 
-/**
- * Sorts service levels with lower cost first
- */
-const sortServiceLevelOptions = (serviceLevels) => {
-    const sortedServiceLevels = serviceLevels.sort((a, b) => {
-        return a.amount - b.amount;
-    });
-    return sortedServiceLevels;
-};
+const ChevronUpIcon = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_2052_3658)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.46967 14.5303C7.76256 14.8232 8.23744 14.8232 8.53033 14.5303L12.5 10.5607L16.4697 14.5303C16.7626 14.8232 17.2374 14.8232 17.5303 14.5303C17.8232 14.2374 17.8232 13.7626 17.5303 13.4697L13.0303 8.96967C12.7374 8.67678 12.2626 8.67678 11.9697 8.96967L7.46967 13.4697C7.17678 13.7626 7.17678 14.2374 7.46967 14.5303Z" fill="currentColor"/>
+</g>
+<defs>
+<filter id="filter0_dd_2052_3658" x="-3.5" y="-2" width="32" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2052_3658"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_2052_3658" result="effect2_dropShadow_2052_3658"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2052_3658" result="shape"/>
+</filter>
+</defs>
+</svg>
+`;
 
-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:24px}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:16px}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:24px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:20px;overflow:auto;padding:5px;-ms-scroll-chaining:none;overscroll-behavior:contain}.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(--zonos-elements-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--error-banner.sc-zonos-shipping{margin-bottom:16px}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{-webkit-box-shadow:0 0 1px 0 var(--zonos-elements-gray-600);box-shadow:0 0 1px 0 var(--zonos-elements-gray-600)}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:12px;background:var(--primary-color, var(--zonos-elements-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:24px}";
+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--shipping-method-title.sc-zonos-shipping{margin-bottom:-16px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:20px;overflow:auto;padding:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px;-ms-scroll-chaining:none;overscroll-behavior:contain}.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(--zonos-elements-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--error-banner.sc-zonos-shipping{margin-bottom:16px}.sc-zonos-shipping-h .zonos--shipping-method-error.sc-zonos-shipping{margin-top:24px}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{-webkit-box-shadow:0 0 1px 0 var(--zonos-elements-gray-600);box-shadow:0 0 1px 0 var(--zonos-elements-gray-600)}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:12px;background:var(--primary-color, var(--zonos-elements-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h .zonos--shipping-options-wrapper.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:24px;-ms-flex-align:center;align-items:center;background:var(--zonos-elements-gray-0);width:100%;border:none;cursor:pointer;position:-webkit-sticky;position:sticky;top:0;z-index:1;-webkit-transition:0.5s all ease;transition:0.5s all ease}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping zonos-icon.sc-zonos-shipping{-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.collapsed.sc-zonos-shipping{margin-bottom:0}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.collapsed.sc-zonos-shipping zonos-icon.sc-zonos-shipping{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping::before,.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping::after{content:\"\";display:block;width:80%;height:1px;background-color:var(--zonos-elements-border-color);-ms-flex-negative:1;flex-shrink:1}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping .zonos--title-wrapper.sc-zonos-shipping{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;gap:8px;-ms-flex-align:center;align-items:center}.sc-zonos-shipping-h .zonos--dap-wrapper.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}";
 const ZonosShippingStyle0 = zonosShippingCss;
 
 const ZonosShipping = class {
@@ -1097,8 +1119,6 @@ const ZonosShipping = class {
             switch (method) {
                 case 'DAP':
                     return cart.translate(` (Duties due at door)`);
-                case 'DDP':
-                    return cart.translate(` (Duties prepaid)`);
                 default:
                     return '';
             }
@@ -1114,10 +1134,11 @@ const ZonosShipping = class {
                 const matchedLandedCosts = (_a = cart.cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.filter(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; });
                 return ((matchedLandedCosts === null || matchedLandedCosts === void 0 ? void 0 : matchedLandedCosts.map(landedCost => {
                     const shippingAmount = landedCost.subtotals.shipping;
-                    return {
+                    const option = {
                         amount: shippingAmount,
                         label: `${item.displayName}${this.getLandedCostMethodLabelSuffix(landedCost.landedCost.method)}`,
                         landedCostId: landedCost.landedCostId,
+                        method: landedCost.landedCost.method,
                         price: cart.currencyFormat({
                             amount: shippingAmount,
                             currency: cart.cartStore.currency,
@@ -1126,28 +1147,50 @@ const ZonosShipping = class {
                         sublabel,
                         value: landedCost.landedCostId,
                     };
+                    return option;
                 })) || []);
             })) || [];
-            // sort service level by price
-            this.serviceLevels = sortServiceLevelOptions(serviceLevels);
+            const serviceLevelsDDP = serviceLevels.filter(item => item.method === 'DDP');
+            const serviceLevelsDAP = serviceLevels.filter(item => item.method === 'DAP');
+            const serviceLevelsOther = serviceLevels.filter(item => item.method !== 'DAP' && item.method !== 'DDP');
+            this.serviceLevelsDDP = cart.sortServiceLevelOptionsByAmount(serviceLevelsDDP);
+            this.serviceLevelsDAP = cart.sortServiceLevelOptionsByAmount(serviceLevelsDAP);
+            this.serviceLevelsOther =
+                cart.sortServiceLevelOptionsByAmount(serviceLevelsOther);
+            const defaultShownServiceLevels = [
+                ...this.serviceLevelsDDP,
+                ...this.serviceLevelsOther,
+            ];
+            // Show DAP by default if there is no DDP
+            if (!defaultShownServiceLevels.length) {
+                this.collapsedDAPOptions = false;
+            }
         };
         this.continueLoading = false;
         this.submitBtnColor = undefined;
         this.submitBtnType = undefined;
         this.selectedShippingMethod = null;
+        this.collapsedDAPOptions = true;
         this.isSelecting = false;
         this.showErrorBanner = false;
-        this.serviceLevels = [];
+        this.serviceLevelsDDP = [];
+        this.serviceLevelsDAP = [];
+        this.serviceLevelsOther = [];
     }
     componentWillLoad() {
         this.initServiceLevels();
-        const selectedServiceLevel = this.serviceLevels.find(item => { var _a; return item.value === ((_a = cart.cartStore.selectedShippingOption) === null || _a === void 0 ? void 0 : _a.id); }) || null;
+        const allServiceLevels = [
+            ...this.serviceLevelsDDP,
+            ...this.serviceLevelsDAP,
+            ...this.serviceLevelsOther,
+        ];
+        const selectedServiceLevel = allServiceLevels.find(item => { var _a; return item.value === ((_a = cart.cartStore.selectedShippingOption) === null || _a === void 0 ? void 0 : _a.id); }) || null;
         if (selectedServiceLevel) {
             // keep the selected shipping method
             this.selectedShippingMethod = selectedServiceLevel;
             return;
         }
-        const firstServiceLevel = this.serviceLevels.find(Boolean);
+        const firstServiceLevel = allServiceLevels.find(Boolean);
         if (firstServiceLevel) {
             // preselect the first shipping method
             void this.handleRadioSelected({
@@ -1156,19 +1199,31 @@ const ZonosShipping = class {
         }
     }
     render() {
-        var _a, _b, _c;
+        const allServiceLevels = [
+            ...this.serviceLevelsDDP,
+            ...this.serviceLevelsDAP,
+            ...this.serviceLevelsOther,
+        ];
+        const defaultShownServiceLevels = [
+            ...this.serviceLevelsDDP,
+            ...this.serviceLevelsOther,
+        ];
         // start validate on typing after error banner is shown, and hide it if the form is complete
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (index.h(index.Host, { key: '00da931b8d40429b7acfdeb2ca06c564e55e4c8b', class: "zonos--shipping zonos--elements" }, index.h("div", { key: 'cc231db53fa9fcccee0348317110eaf58b0367df', class: "zonos--group" }, index.h("zonos-text", { key: '4679617eb68df02dcfa410737931b2a3ec2fe681', class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (index.h("zonos-banner", { key: '2a20b3be92ea8b88004048ef581290bf5a68be2d', class: "zonos--error-banner", intent: "error" }, cart.translate('No shipping method selected'))), index.h("zonos-text", { key: 'c18d78c99e57141d7d0b6057ebba5cbffd07391d', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (index.h("zonos-banner", { bannerTitle: cart.translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (index.h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), index.h("div", { key: 'aed8fdcf2fc7efc99f25419171172e86804a40cf', class: "zonos--group-btn" }, index.h("zonos-button", { key: 'd09b88e2872baf1d97360bcc98889d7d97e93873', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        return (index.h(index.Host, { key: 'e376545666893a373bca1591083a868892804fb1', class: "zonos--shipping zonos--elements" }, index.h("div", { key: 'f8901d3d8fbeb6a285a7a33b9cea940476413c68', class: "zonos--group" }, index.h("zonos-text", { key: '83e02010c5e11647064ebf28468def163dd3395a', class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Delivery options')), this.showErrorBanner && !!allServiceLevels.length && (index.h("zonos-banner", { key: 'e65f0ce2e968612bd7c1efeca8309e69a03a8c65', class: "zonos--error-banner", intent: "error" }, cart.translate('No shipping method selected'))), index.h("zonos-text", { key: 'cdae794614c6879477e96de435d5c4e59f469fe9', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.translate('Shipping method')), !allServiceLevels.length ? (index.h("zonos-banner", { bannerTitle: cart.translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), class: "zonos--shipping-method-error", intent: "error" })) : (index.h("div", { class: "zonos--shipping-options-wrapper" }, index.h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length && (index.h("button", { class: classes.classes([
+                'zonos--shipping-options-collapse-trigger',
+                this.collapsedDAPOptions && 'collapsed',
+            ]), onClick: () => {
+                this.collapsedDAPOptions = !this.collapsedDAPOptions;
+            } }, index.h("div", { class: "zonos--title-wrapper" }, index.h("zonos-text", { type: "label" }, `${cart.translate(this.collapsedDAPOptions ? 'Show non prepaid methods' : 'Hide non prepaid methods')} `), index.h("zonos-icon", { content: ChevronUpIcon })))), index.h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, index.h("div", { class: "zonos--dap-wrapper" }, index.h("zonos-banner", { bannerTitle: cart.translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, cart.translate('You may incur additional fees from the shipping carrier by not prepaying.')), index.h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), index.h("div", { key: '43619b89b2274e38683ade860402ff026ddcdd9a', class: "zonos--group-btn" }, index.h("zonos-button", { key: 'fff71598501c5a83ea415a72f3bc64ee004cbeae', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, cart.translate('Go to payment'))))));
     }
 };
 ZonosShipping.style = ZonosShippingStyle0;
 
-exports.zonos_badge = ZonosBadge;
 exports.zonos_cart_items = ZonosCartItems;
 exports.zonos_cart_restricted_items = ZonosCartRestrictedItems;
 exports.zonos_cart_subtotal = ZonosCartSubtotal;

package/dist/cjs/zonos-checkout.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-97e693e4.js');
-const paypal = require('./paypal-16029169.js');
+const cart = require('./cart-4de3faca.js');
+const paypal = require('./paypal-370b3a10.js');
 const zonosStore = require('./zonosStore-a4395972.js');
-const createCustomEvent = require('./createCustomEvent-777b3fa7.js');
+const createCustomEvent = require('./createCustomEvent-65331eae.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const classes = require('./classes-b7918f56.js');
@@ -180,7 +180,7 @@ const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
 </svg>
 `;
 
-const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-h *.sc-zonos-checkout{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout{-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--zonos-elements-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:32px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--zonos-elements-gray-0));border-right:1px solid var(--zonos-elements-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--zonos-elements-gray-0)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--zonos-elements-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 8px 8px}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:24px}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:24px;top:24px;z-index:2}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo-wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;gap:16px;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--logo-wrapper.sc-zonos-checkout>*.sc-zonos-checkout{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:250px}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:76px;margin-bottom:8px}.zonos--close-button.sc-zonos-checkout{-ms-flex-item-align:start;align-self:flex-start}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--zonos-elements-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:32px}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:12px;padding-bottom:76px}@media (max-width: 768px){.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding-bottom:0}}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2;border-right:none}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:16px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border:var(--zonos-elements-border);border-radius:var(--border-radius, var(--zonos-elements-radius-10));background-color:var(--zonos-elements-gray-50);padding:12px;margin-top:32px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--review.sc-zonos-checkout{margin-bottom:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--cart-items.sc-zonos-checkout{margin-top:8px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout zonos-checkout-footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}";
+const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-h *.sc-zonos-checkout{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout{-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--zonos-elements-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:32px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--zonos-elements-gray-0));border-right:1px solid var(--zonos-elements-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--zonos-elements-gray-0)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--zonos-elements-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 8px 8px}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:24px}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:24px;top:24px;z-index:2}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo-wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;gap:16px;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--logo-wrapper.sc-zonos-checkout>*.sc-zonos-checkout{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout img.sc-zonos-checkout{max-height:72px}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:76px;margin-bottom:8px}.zonos--close-button.sc-zonos-checkout{-ms-flex-item-align:start;align-self:flex-start}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--zonos-elements-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:32px}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:12px;padding-bottom:76px}@media (max-width: 768px){.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding-bottom:0}}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2;border-right:none}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:16px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border:var(--zonos-elements-border);border-radius:var(--border-radius, var(--zonos-elements-radius-10));background-color:var(--zonos-elements-gray-50);padding:12px;margin-top:32px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--review.sc-zonos-checkout{margin-bottom:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--cart-items.sc-zonos-checkout{margin-top:8px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout zonos-checkout-footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}";
 const ZonosCheckoutStyle0 = zonosCheckoutCss;
 
 // 90 minutes
@@ -758,7 +758,7 @@ const ZonosCheckout = class {
                 } }), index.h("zonos-collapse", {
                 // only collapsible on mobile
                 collapsed: this.collapseReviewMobile && this.isMobile
-            }, index.h("zonos-cart-items", null), this.isMobile && (index.h("zonos-v-stack", { spacing: 16 }, index.h("zonos-cart-subtotal", null), index.h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), index.h("zonos-cart-restricted-items", null), !this.isMobile && (index.h("zonos-v-stack", { spacing: 16 }, index.h("zonos-cart-subtotal", null), index.h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))))), (cart.cartStore.step === 'finish' || cart.cartStore.step === 'error') && (index.h("div", { class: "zonos--done", "data-theme": rightSideTheme }, index.h("div", { class: "zonos--header" }, renderLogo(), index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon.RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), index.h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cart.cartStore.step === 'error' && !!cart.cartStore.error
+            }, index.h("zonos-cart-items", null), this.isMobile && (index.h("zonos-v-stack", { spacing: 16 }, index.h("zonos-cart-subtotal", { submitBtnColor: submitButtonColor }), index.h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), index.h("zonos-cart-restricted-items", null), !this.isMobile && (index.h("zonos-v-stack", { spacing: 16 }, index.h("zonos-cart-subtotal", null), index.h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))))), (cart.cartStore.step === 'finish' || cart.cartStore.step === 'error') && (index.h("div", { class: "zonos--done", "data-theme": rightSideTheme }, index.h("div", { class: "zonos--header" }, renderLogo(), index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon.RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), index.h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cart.cartStore.step === 'error' && !!cart.cartStore.error
                     ? Object.assign(Object.assign({}, cart.cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride }))), index.h("zonos-checkout-footer", { "data-theme": rightSideTheme, mobile: this.isMobile,
                 /**
                  * For this component, use slot instead of passing JSX through prop of other component. Because