@zonos/elements 1.3.10 → 1.3.11-alpha.1

package/dist/cjs/{zonos-cart-items_9.cjs.entry.js → zonos-cart-items_10.cjs.entry.js}

@@ -3,14 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const cart = require('./cart-34d4bf2e.js');
-const zonosStore = require('./zonosStore-d3f0173b.js');
-const submitGtag = require('./submitGtag-1f92afd1.js');
-const getBorderRadius = require('./getBorderRadius-d795f526.js');
+const cart = require('./cart-d9e9ecfc.js');
+const zonosStore = require('./zonosStore-21334303.js');
+const submitGtag = require('./submitGtag-b7ef5d5b.js');
+const getBorderRadius = require('./getBorderRadius-9d619bf6.js');
+const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const classes = require('./classes-b7918f56.js');
-const isDarkColor = require('./isDarkColor-33fb96a7.js');
 const ILanguage = require('./ILanguage-d247b45b.js');
-const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
+const getContrastColor = require('./getContrastColor-af2386af.js');
+const isColorVariable = require('./isColorVariable-fff5e469.js');
+require('./isDarkColor-a68274cf.js');
 
 const formatCurrency = ({ amount, currency, showCurrencyText, }) => showCurrencyText
     ? `${new Intl.NumberFormat('en-US', {
@@ -263,33 +265,45 @@ const ZonosIcon = `<svg width="105" height="29" viewBox="0 0 105 29" fill="none"
 </svg>
 `;
 
-const zonosCheckoutFooterCss = ":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--checkout-footer{position:absolute;bottom:0;left:0;right:0;gap:var(--amino-space-16);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--amino-border);padding:var(--amino-space-12);-ms-flex-align:center;align-items:center;background:var(--amino-surface-color-secondary)}:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper a{line-height:0px}:host .zonos--checkout-footer zonos-button button.outline{outline:1px solid var(--amino-gray-800)}:host .zonos--checkout-footer .zonos--checkout-locale-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8);position:relative}@media (max-width: 400px){:host .zonos--checkout-footer .zonos--checkout-locale-wrapper{gap:var(--amino-space-4)}}:host .zonos--checkout-footer .zonos--checkout-footer-dialog{position:absolute;bottom:36px;left:var(--language-dialog-left);background:var(--amino-surface-color);-webkit-box-shadow:var(--amino-v3-shadow-xl);box-shadow:var(--amino-v3-shadow-xl);border-radius:var(--amino-radius-12);width:360px;max-width:100vw;max-height:500px;z-index:10005;overflow:auto;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0;-webkit-transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out, opacity 0.3s ease-out;transition:transform 0.3s ease-out, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar{width:10px}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-track{background:var(--amino-gray-50)}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-thumb:hover{background:#d6d6d6}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-track{border-top-right-radius:var(--amino-radius-12);border-bottom-right-radius:var(--amino-radius-12)}:host .zonos--checkout-footer .zonos--checkout-footer-dialog.zonos--checkout-footer-dialog-open{opacity:1;-webkit-transform:scale(1);transform:scale(1)}@media (max-width: 768px){:host .zonos--checkout-footer{-ms-flex-direction:column;flex-direction:column;gap:var(--amino-space-32);background-color:var(--amino-surface-color);border-top:none;position:relative;padding-top:var(--amino-space-24)}:host .zonos--checkout-footer .zonos--checkout-footer-dialog{position:fixed;left:0;right:0;bottom:0;-webkit-transform-origin:bottom center;transform-origin:bottom center;width:100vw}}";
+const zonosCheckoutFooterCss = ":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:absolute;bottom:-50px;left:0;right:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;z-index:2}:host .zonos--checkout-footer{width:calc(90vw - 22px);gap:var(--amino-space-16);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-12);-ms-flex-align:center;align-items:center}:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper a{line-height:0}:host .zonos--checkout-footer zonos-button button.outline{outline:1px solid var(--amino-gray-800)}:host .zonos--checkout-footer .zonos--checkout-locale-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8);position:relative}@media (max-width: 400px){:host .zonos--checkout-footer .zonos--checkout-locale-wrapper{gap:var(--amino-space-4)}}:host .zonos--checkout-footer .zonos--checkout-footer-dialog{position:absolute;bottom:36px;left:var(--language-dialog-left);background:var(--amino-surface-color);-webkit-box-shadow:var(--amino-v3-shadow-xl);box-shadow:var(--amino-v3-shadow-xl);border-radius:var(--amino-radius-12);width:360px;max-width:100vw;max-height:500px;z-index:10005;overflow:auto;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0;-webkit-transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out, opacity 0.3s ease-out;transition:transform 0.3s ease-out, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar{width:10px}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-track{background:var(--amino-gray-50)}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-thumb:hover{background:#d6d6d6}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-track{border-top-right-radius:var(--amino-radius-12);border-bottom-right-radius:var(--amino-radius-12)}:host .zonos--checkout-footer .zonos--checkout-footer-dialog.zonos--checkout-footer-dialog-open{opacity:1;-webkit-transform:scale(1);transform:scale(1)}:host(.mobile){-ms-flex-direction:column;flex-direction:column;gap:var(--amino-space-32);background:var(--amino-gray-0);position:relative;padding-top:var(--amino-space-24);bottom:0}:host(.mobile) .zonos--checkout-footer{-ms-flex-direction:column;flex-direction:column}:host(.mobile) .zonos--checkout-locale-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.mobile) .zonos--checkout-footer-dialog{position:fixed;left:0;right:0;bottom:0;-webkit-transform-origin:bottom center;transform-origin:bottom center;width:100vw}";
 const ZonosCheckoutFooterStyle0 = zonosCheckoutFooterCss;
 
 const ZonosCheckoutFooter = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.showDialog = false;
+        this.mobile = false;
+        this.dataTheme = undefined;
+        this.showLanguageDialog = false;
+        this.isMobile = false;
     }
     handleGlobalClick(e) {
-        if (!this.el.contains(e.target) && this.showDialog) {
-            this.showDialog = false;
+        if (!this.el.contains(e.target) && this.showLanguageDialog) {
+            this.showLanguageDialog = false;
         }
     }
-    toggleDialog() {
-        this.showDialog = !this.showDialog;
+    toggleLanguageDialog() {
+        this.showLanguageDialog = !this.showLanguageDialog;
+    }
+    handleMobileChange() {
+        this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
+    }
+    componentWillLoad() {
+        this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
     }
     render() {
-        var _a, _b;
-        const primaryColor = (_a = zonosStore.zonosStore.appearance) === null || _a === void 0 ? void 0 : _a.colorPrimary;
-        const footerTheme = primaryColor && isDarkColor.isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
-        const languageLabel = (_b = ILanguage.languages.find(x => x.code === cart.localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.label;
-        return (index.h(index.Host, { key: 'cadd2ef8877c716cdeb1f5f40642e41cabc2a55d', class: "zonos--elements" }, index.h("div", { key: '480995fd1ca7bc41702d15dd40d64e02a9ba09dd', class: "zonos--checkout-footer", "data-theme": footerTheme, style: { '--primary-color': primaryColor } }, index.h("div", { key: 'b83ebb3203542f7f4a227b50b26010cbeb914294', class: "zonos--checkout-locale-wrapper" }, index.h("zonos-button", { key: '66ad21d85629d159b4ff3341e82c92d6bd19ceca', class: "zonos--checkout-footer-language-button", icon: index.h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: "gray-700" }), onClick: () => this.toggleDialog(), variant: "subtle" }, languageLabel), index.h("div", { key: '1e8dce34f3866570f267233644c6d5549cf02c9b', class: classes.classes([
+        var _a;
+        const languageLabel = (_a = ILanguage.languages.find(x => x.code === cart.localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
+        // reverse color when on desktop. With the coversheet backdrop, the color should be white
+        const colorDesktop = this.dataTheme === 'LIGHT' && !this.mobile ? 'gray-0' : 'gray-1200';
+        return (index.h(index.Host, { key: '2ce26e27b7c90b4d37f26197821ed1a39ddb9fae', class: classes.classes(['zonos--elements', this.isMobile && 'mobile']) }, index.h("div", { key: '5f52ec7b5ad1659ceb9d2edb4661e5995b72afaf', class: "zonos--checkout-footer" }, index.h("div", { key: '5d127f033702bff94cc2db76b4695a03055ec783', class: "zonos--checkout-locale-wrapper" }, index.h("zonos-button", { key: '701b5014848ea716f7dcc22221b453146af92962', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: index.h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), index.h("div", { key: 'e2a319113905bd76473aef822780521f2be58405', class: classes.classes([
                 'zonos--checkout-footer-dialog',
-                this.showDialog && 'zonos--checkout-footer-dialog-open',
-            ]) }, index.h("zonos-language-select", { key: '194aeb20273058577d2cbf3b72eef5f7152129e6', handleOnClose: () => this.toggleDialog() }))), index.h("div", { key: '56b5f28d98eeb5390b59da3dfbc072f967e945a0', class: "zonos--checkout-footer-icon-wrapper" }, index.h("zonos-text", { key: 'b098a9c89d4855d388372b20c94ee3582cc4e9df', type: "caption" }, "Powered by"), index.h("a", { key: '0652328fc74701168e5ddec2e0662208498e4557', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: '826323504ca56c3216524d3a9a49f820162aeb85', autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 }))))));
+                this.showLanguageDialog && 'zonos--checkout-footer-dialog-open',
+            ]) }, index.h("zonos-language-select", { key: '4fb9860a4547541f3947d349ab6056e899335952', handleOnClose: () => this.toggleLanguageDialog() }))), index.h("div", { key: '0a348521a7ccecc23a7a69019940c2421bb8420c', class: "zonos--checkout-footer-icon-wrapper" }, index.h("zonos-text", { key: '9adf4c24fcf1b5d0827556e9e68006860b0bb9c4', textColor: colorDesktop, type: "caption" }, "Powered by"), index.h("a", { key: 'a3f957e10d14d68d3973169470a21fdabb2f7a06', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: '49592d8302447d007dc840de18fa78af7898f382', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 }))))));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "mobile": ["handleMobileChange"]
+    }; }
 };
 ZonosCheckoutFooter.style = ZonosCheckoutFooterStyle0;
 
@@ -337,6 +351,88 @@ const ZonosCheckoutPayment = class {
 };
 ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
 
+const TabCheckmark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.289 7.40424C18.618 7.65585 18.6808 8.12656 18.4291 8.4556L11.9291 16.9556C11.7978 17.1273 11.5988 17.234 11.383 17.2484C11.1673 17.2627 10.9559 17.1832 10.803 17.0303L6.80304 13.0303C6.51015 12.7374 6.51015 12.2626 6.80304 11.9697C7.09594 11.6768 7.57081 11.6768 7.8637 11.9697L11.258 15.3639L17.2376 7.54442C17.4892 7.21539 17.9599 7.15263 18.289 7.40424Z" fill="currentColor"/>
+</svg>
+`;
+
+const zonosCheckoutProgressTabsCss = ":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{margin-bottom:var(--amino-space-32)}:host .zonos--tab-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around}:host .zonos--tab-index{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:13px;width:24px;height:24px;font-weight:bold}:host .zonos--tab-index .zonos--tab-index-label,:host .zonos--tab-index .zonos--tab-index-done-icon{position:absolute;top:0;width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:top 0.5s ease-in-out, opacity 0.5s ease-in-out;transition:top 0.5s ease-in-out, opacity 0.5s ease-in-out}:host .zonos--tab-index .zonos--tab-index-done-icon{top:-50%;opacity:0}:host .zonos--tab-item{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;background:transparent;border:0}:host .zonos--tab-item.done .zonos--tab-index-done-icon{top:0;opacity:1}:host .zonos--tab-item.done .zonos--tab-index-label{opacity:0;top:50%}:host .zonos--tab-item.selected zonos-text{color:var(--color)}:host .zonos--tab-progress{width:100%;background-color:transparent;border-radius:10px;-webkit-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.4);box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.4);overflow:hidden;position:relative;padding:1px;height:8px}:host .zonos--tab-progress .zonos--progress-bar-fill{border-radius:10px;background-color:var(--color);height:100%;width:var(--progress-percent);-webkit-transition:width 0.5s ease-in-out;transition:width 0.5s ease-in-out}";
+const ZonosCheckoutProgressTabsStyle0 = zonosCheckoutProgressTabsCss;
+
+const ZonosCheckoutProgressTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The total number of steps that's done
+         */
+        this.getTotalSuccessStep = () => {
+            // include the finish step
+            const totalSteps = 4;
+            const stepDone = Object.values(cart.cartStore.tabItems).filter(tab => tab.isDone).length + 1;
+            return `${(stepDone / totalSteps) * 100}%`;
+        };
+        this.isTabClickable = (tabValue) => {
+            const currentTab = cart.cartStore.tabItems[tabValue];
+            if (!currentTab) {
+                return false;
+            }
+            // clickable if the tab state is done
+            if (currentTab.isDone) {
+                return true;
+            }
+            // if any of the previous tabs are not done, the tab is not clickable
+            return Object.values(cart.cartStore.tabItems)
+                .slice(0, currentTab.index - 1)
+                .every(tab => tab.isDone);
+        };
+        this.tabColor = null;
+        this.backgroundColor = null;
+    }
+    /**
+     * Set the tab items data. This is to be used in storybook
+     */
+    async setTabItems(tabItems) {
+        cart.cartStore.tabItems = tabItems;
+    }
+    /**
+     * Set selected tab. Only set the tab if it's clickable
+     */
+    async setTabSelected(tabValue) {
+        if (this.isTabClickable(tabValue)) {
+            cart.cartStore.step = tabValue;
+        }
+    }
+    render() {
+        const selectedStep = cart.cartStore.step;
+        const labelSelectedColor = this.tabColor || zonosStore.zonosStore.appearance.colorSecondary;
+        // If the background color and the tab color are not contrat enough, increase the contrast of the label color
+        const contrastLabelColor = this.backgroundColor && labelSelectedColor
+            ? getContrastColor.getContrastColor({
+                backgroundColor: isColorVariable.isColorVariable(this.backgroundColor)
+                    ? window
+                        .getComputedStyle(this.ele)
+                        .getPropertyValue(`--amino-${this.backgroundColor.replace('--amino-', '')}`)
+                    : this.backgroundColor,
+                color: labelSelectedColor,
+            })
+            : labelSelectedColor;
+        return (index.h(index.Host, { key: '1fd6d6cb0f4e819f7e0a204fdc1bccbd2753154c', class: "zonos--elements", "data-theme": zonosStore.zonosStore.appearance.theme, style: {
+                '--color': contrastLabelColor,
+                '--progress-percent': this.getTotalSuccessStep(),
+            } }, index.h("div", { key: 'e7b0c9e9376461461286856553381d20bdd50bb6', 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" }, tab.label)));
+        })), index.h("div", { key: 'e924379e523d61952e3db826daeb080917c5b468', class: "zonos--tab-progress" }, index.h("div", { key: '80d193a8f2099a6eb552c1c016be545b9120c6d1', class: "zonos--progress-bar-fill" }))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get ele() { return index.getElement(this); }
+};
+ZonosCheckoutProgressTabs.style = ZonosCheckoutProgressTabsStyle0;
+
 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--address.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info+.zonos--address.sc-zonos-customer-info{margin-bottom:0}.sc-zonos-customer-info-h zonos-button.sc-zonos-customer-info{-webkit-box-shadow:0 0 1px 0 var(--amino-gray-600);box-shadow:0 0 1px 0 var(--amino-gray-600)}.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{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:-5px;padding-top:var(--amino-space-8);margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:100%}";
 const ZonosCustomerInfoStyle0 = zonosCustomerInfoCss;
 
@@ -407,7 +503,7 @@ ZonosCustomerInfo.style = ZonosCustomerInfoStyle0;
 
 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: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:10002;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:10001;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:10001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:10002;-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:10002;background:white;border-radius:var(--border-radius, var(--amino-radius-10))}: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:10001;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);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:10001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:10002;-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 ZonosDialogStyle0 = zonosDialogCss;
 
 const ZonosDialog = class {
@@ -432,7 +528,6 @@ const ZonosDialog = class {
         this.noHeader = false;
         this.noBodyPadding = false;
         this.noBorder = false;
-        this.footerRightAction = null;
         this.borderStyle = undefined;
         this.noCloseButton = false;
         this.noClickOutside = false;
@@ -455,7 +550,7 @@ const ZonosDialog = class {
             document.body.style.overflow = 'auto';
         }
         const borderStyle = getBorderRadius.getBorderRadius(this.borderStyle);
-        return (index.h(index.Host, { key: '3927d9cf0ebbd8b497a0ec42328c4392925d198a', class: classes.classes([
+        return (index.h(index.Host, { key: '6bda73bd75e6bc31e73ad53849a51752396ee42d', class: classes.classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -466,10 +561,10 @@ const ZonosDialog = class {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, index.h("div", { key: 'df93af61bfd856db3a572cdb98f60a8dd5c5bb7d', class: "zonos--backdrop" }), index.h("div", { key: 'f306feb4858dff642fbfd731e5aad849a8f29941', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, index.h("div", { key: 'b914ea2e54fb2af825008ae28e235c461dce67e9', 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", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), index.h("div", { key: '19219c0c8d167bbacec992ba10b1fe0f31a8b8f6', class: classes.classes([
+            } }, index.h("div", { key: 'cd3ff21820f95faee3f16e23a272e080bd7930c8', class: "zonos--backdrop" }), index.h("div", { key: '85af066de976e3b29505c8804e544ca0a1f8a012', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, index.h("div", { key: '389491715fcb12f9c86b744e2e9c20930a2a9f25', 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", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), index.h("div", { key: 'a28ad12faab02ef30769a3234b24e749b38c46b4', class: classes.classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, index.h("slot", { key: '38f9b83418dacd47cc2395f253a32ff0a6723d54' })), this.footerRightAction && (index.h("div", { class: "zonos--footer" }, index.h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
+            ]) }, index.h("slot", { key: '7da31d739197a17ae94df1909c93f70c1282da95' })), index.h("slot", { key: 'fe02670713895b786dfa6b0c30ad6553c32796cd', name: "dialog-footer" })))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -479,7 +574,7 @@ 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: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(--amino-gray-0);z-index:1}: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);background-color:transparent}: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{position:-webkit-sticky;position:sticky;top:0;background-color:var(--amino-gray-0);z-index:1}:host .zonos--total-pay{margin:var(--amino-space-8) 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);background-color:transparent}: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 ZonosReviewStyle0 = zonosReviewCss;
 
 const ZonosReview = class {
@@ -540,11 +635,13 @@ const ZonosShipping = class {
             if (!selectedShippingOption) {
                 return;
             }
+            this.isSelecting = true;
             // save selected shipping option to store
             const updateStatus = await cart.cartStoreUpdateSelectedShippingOption(selectedShippingOption);
             if (!updateStatus) {
                 return;
             }
+            this.isSelecting = false;
             this.disabled = false;
         };
         /**
@@ -553,11 +650,38 @@ const ZonosShipping = class {
         this.continueClickHandler = () => {
             this.continueClicked.emit();
         };
+        this.initServiceLevels = () => {
+            var _a;
+            this.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
+                        ? `${cart.translate('Expected delivery')} ${expectedDate}`
+                        : '';
+                    const caption = minTransit && maxTransit
+                        ? `(${minTransit}-${maxTransit} ${cart.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,
+                    };
+                })) || [];
+        };
         this.continueLoading = false;
         this.submitBtnColor = undefined;
         this.submitBtnType = undefined;
         this.selectedShippingMethod = null;
+        this.isSelecting = false;
         this.disabled = true;
+        this.serviceLevels = [];
     }
     watchFormComplete() {
         var _a;
@@ -569,30 +693,18 @@ const ZonosShipping = class {
             });
         }
     }
+    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;
+        if (selectedServiceLevel) {
+            this.selectedShippingMethod = selectedServiceLevel;
+        }
+        // enable continue button if there is a selected shipping option
+        this.disabled = !selectedServiceLevel;
+    }
     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
-                ? `${cart.translate('Expected delivery')} ${expectedDate}`
-                : '';
-            const caption = minTransit && maxTransit
-                ? `(${minTransit}-${maxTransit} ${cart.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" }, cart.translate('Shipping information')), index.h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.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("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        var _a, _b;
+        return (index.h(index.Host, { key: 'ab881bdb575ac0177154ffa8a2d84d668151c46d', class: "zonos--shipping zonos--elements" }, index.h("div", { key: 'b8738e0fb5c32b329ae03ccd2cb2d1a178a05aa8', class: "zonos--group" }, index.h("zonos-text", { key: 'd942ab3f4e77631145a0a38dae95999454a92b56', class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Shipping information')), index.h("zonos-text", { key: '6855f44cf3458891776b3c215417bec329de89dc', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.translate('Shipping method')), !((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.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", { initialSelectedValue: (_b = this.selectedShippingMethod) === null || _b === void 0 ? void 0 : _b.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), index.h("div", { key: '9f2c00c948230679d96ac44940c1dee45e751ded', class: "zonos--group-btn" }, index.h("zonos-button", { key: '8bab3848d596fef19bc7245fc87a525cf59a15c5', backgroundColor: this.submitBtnColor, isDisabled: this.disabled, 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'))))));
     }
@@ -607,6 +719,7 @@ exports.zonos_cart_subtotal = ZonosCartSubtotal;
 exports.zonos_checkout_finish = ZonosCheckoutFinish;
 exports.zonos_checkout_footer = ZonosCheckoutFooter;
 exports.zonos_checkout_payment = ZonosCheckoutPayment;
+exports.zonos_checkout_progress_tabs = ZonosCheckoutProgressTabs;
 exports.zonos_customer_info = ZonosCustomerInfo;
 exports.zonos_dialog = ZonosDialog;
 exports.zonos_review = ZonosReview;

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const cart = require('./cart-34d4bf2e.js');
-const zonosStore = require('./zonosStore-d3f0173b.js');
-const submitGtag = require('./submitGtag-1f92afd1.js');
+const cart = require('./cart-d9e9ecfc.js');
+const zonosStore = require('./zonosStore-21334303.js');
+const submitGtag = require('./submitGtag-b7ef5d5b.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-d795f526.js');
-const isDarkColor = require('./isDarkColor-33fb96a7.js');
+const getBorderRadius = require('./getBorderRadius-9d619bf6.js');
+const isDarkColor = require('./isDarkColor-a68274cf.js');
 
 const isShippableCountry = (showLog = true) => {
     if (!cart.localizationStore.localizationLoaded) {
@@ -131,8 +131,6 @@ const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShi
     });
 };
 
-const LeftArrow = `<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M9.707 16.707a1 1 0 0 1-1.414 0l-3.647-3.646a1.5 1.5 0 0 1 0-2.122l3.647-3.646a1 1 0 0 1 1.414 1.414L7.414 11H19a1 1 0 1 1 0 2H7.414l2.293 2.293a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
-
 const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="https://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4.5C2.25 3.25736 3.25736 2.25 4.5 2.25H13.5C14.7426 2.25 15.75 3.25736 15.75 4.5V10.5C15.75 11.7426 14.7426 12.75 13.5 12.75H8.25C8.01393 12.75 7.79164 12.8611 7.65 13.05L6.3 14.85C5.87508 15.4166 5.2082 15.75 4.5 15.75C3.25736 15.75 2.25 14.7426 2.25 13.5V4.5ZM4.5 3.75C4.08579 3.75 3.75 4.08579 3.75 4.5V13.5C3.75 13.9142 4.08579 14.25 4.5 14.25C4.73607 14.25 4.95836 14.1389 5.1 13.95L6.45 12.15C6.87492 11.5834 7.5418 11.25 8.25 11.25H13.5C13.9142 11.25 14.25 10.9142 14.25 10.5V4.5C14.25 4.08579 13.9142 3.75 13.5 3.75H4.5ZM5.25 6C5.25 5.58579 5.58579 5.25 6 5.25H12C12.4142 5.25 12.75 5.58579 12.75 6C12.75 6.41421 12.4142 6.75 12 6.75H6C5.58579 6.75 5.25 6.41421 5.25 6ZM5.25 9C5.25 8.58579 5.58579 8.25 6 8.25H8.25C8.66421 8.25 9 8.58579 9 9C9 9.41421 8.66421 9.75 8.25 9.75H6C5.58579 9.75 5.25 9.41421 5.25 9Z" fill="#4D505A"/>
 </svg>
@@ -140,7 +138,7 @@ const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
 
 const RemoveIcon = `<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-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" data-is-secondary-color="true" fill="var(--amino-gray-200)" fill-rule="evenodd"></path><path clip-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" fill="currentColor" fill-rule="evenodd"></path></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::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--amino-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(--amino-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:var(--amino-space-48) var(--amino-space-56) var(--amino-space-76)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-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(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);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}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--back-button.sc-zonos-checkout{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.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:var(--amino-space-24);top:var(--amino-space-24)}.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.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.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:var(--amino-space-12);padding-bottom:var(--amino-space-76)}@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:var(--amino-space-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:var(--amino-space-16)}.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(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:var(--amino-space-12);margin-top:var(--amino-space-32)}.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:var(--amino-space-8)}.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::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--amino-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(--amino-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:var(--amino-space-32)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-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(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);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}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.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:var(--amino-space-24);top:var(--amino-space-24);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.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.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:var(--amino-space-12);padding-bottom:var(--amino-space-76)}@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:var(--amino-space-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:var(--amino-space-16)}.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(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:var(--amino-space-12);margin-top:var(--amino-space-32)}.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:var(--amino-space-8)}.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;
 
 const ZonosCheckout = class {
@@ -178,7 +176,7 @@ const ZonosCheckout = class {
         this.stripe = window.Zonos.stripe;
         this.submitLoading = false;
         this.paymentError = false;
-        this.collapseReviewMobile = false;
+        this.collapseReviewMobile = true;
         this.isAttachError = false;
         this.isMobile = false;
         this.zonosReviewRef = undefined;
@@ -441,14 +439,6 @@ const ZonosCheckout = class {
         // Reload the page
         window.location.reload();
     }
-    async handleBackClick() {
-        // close the modal if back button is clicked on customer info step
-        if (cart.cartStore.step === 'customer-info') {
-            await this.closeDialogHandler();
-            return;
-        }
-        cart.cartStorePreviousStep();
-    }
     handleWindowResize() {
         this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
         // apply theme to stripe elements
@@ -496,23 +486,31 @@ const ZonosCheckout = class {
         const localePageEnum = this.getCurrentLocalePageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === localePageEnum);
         const renderLogo = () => (index.h("div", { class: "zonos--logo" }, logoUrl && (index.h("img", { alt: `${zonosStore.zonosStore.organizationName} logo`, src: logoUrl, width: 100 }))));
-        const renderTopHeader = () => (index.h("zonos-v-stack", null, renderLogo(), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), index.h("div", null, index.h("zonos-button", { class: "zonos--back-button", icon: index.h("zonos-icon", { "aria-label": "Back to previous step", content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, cart.translate('Back')))));
+        const renderTopHeader = () => (index.h("zonos-v-stack", null, renderLogo(), index.h("zonos-checkout-progress-tabs", { backgroundColor: 
+            // only use different contrast color when the secondary color is too off with the background in mobile
+            this.isMobile ? '--amino-gray-0' : null }), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
         const renderContent = () => {
             return (index.h("div", { class: 'zonos--content', style: {
                     '--border-radius': getBorderRadius.getBorderRadius(style),
                 } }, cart.cartStore.step !== 'finish' && cart.cartStore.step !== 'error' && (index.h(index.Fragment, null, index.h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
                     '--primary-color': !this.isMobile ? colorPrimary : '',
-                } }, !this.isMobile && renderTopHeader(), cart.cartStore.step === 'customer-info' && (index.h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'shipping' && (index.h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'payment' && (index.h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), index.h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isMobile && (index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), index.h("div", { class: "flex--wrapper" }, index.h("div", { class: "zonos--wrapper" }, index.h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
+                } }, !this.isMobile && renderTopHeader(), cart.cartStore.step === 'customer-info' && (index.h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'shipping' && (index.h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'payment' && (index.h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), index.h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() }), index.h("div", { class: "flex--wrapper" }, index.h("div", { class: "zonos--wrapper" }, index.h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile
                     if (!this.isMobile) {
                         return;
                     }
                     this.collapseReviewMobile = !this.collapseReviewMobile;
                 } }), index.h("zonos-collapse", {
-                // only collapse on mobile
+                // only collapsible on mobile
                 collapsed: this.collapseReviewMobile && this.isMobile
-            }, index.h("zonos-cart-items", null))), 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 }), 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", null)));
+            }, 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 }))))), !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 }), 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
+                 * the click outside event will be triggered on and targeted to whichever component that it's attached to.
+                 * Move it into <slot /> would resolve the issue.
+                 */
+                slot: !this.isMobile ? 'dialog-footer' : undefined })));
         };
         return (index.h(index.Host, { class: classes.classes([
                 'zonos--checkout zonos--elements',

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

@@ -22,7 +22,7 @@ const ZonosComponent = class {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return index.h("div", { key: '3b7429a0c03b00f0a80e15a94bebd08aedaafe51' }, "Hello, World! I'm ", this.getText());
+        return index.h("div", { key: '9a5547114b58b739fb5d783f551bc345f067779d' }, "Hello, World! I'm ", this.getText());
     }
 };
 ZonosComponent.style = ZonosComponentStyle0;

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const cart = require('./cart-34d4bf2e.js');
-const zonosStore = require('./zonosStore-d3f0173b.js');
-require('./isDarkColor-33fb96a7.js');
-require('./getBorderRadius-d795f526.js');
+const cart = require('./cart-d9e9ecfc.js');
+const zonosStore = require('./zonosStore-21334303.js');
+require('./isDarkColor-a68274cf.js');
+require('./getBorderRadius-9d619bf6.js');
 
 const getZonosSettings = async () => {
     const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/zonos-settings`;
@@ -229,7 +229,7 @@ const ZonosController = class {
         zonosStore.zonosStore.organizationName = organizationName;
     }
     render() {
-        return index.h(index.Host, { key: '0b734aaa82bd08277fb3a2694197b13242a4d0a6', class: "zonos--elements" });
+        return index.h(index.Host, { key: 'bd56d32009707ec9042ae5f8a87de7a7cedcca73', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;

package/dist/cjs/zonos-country-flag.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const cart = require('./cart-34d4bf2e.js');
-const zonosStore = require('./zonosStore-d3f0173b.js');
+const cart = require('./cart-d9e9ecfc.js');
+const zonosStore = require('./zonosStore-21334303.js');
 const classes = require('./classes-b7918f56.js');
-require('./isDarkColor-33fb96a7.js');
-require('./getBorderRadius-d795f526.js');
+require('./isDarkColor-a68274cf.js');
+require('./getBorderRadius-9d619bf6.js');
 
 const zonosCountryFlagCss = ":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 .flag-container{position:relative;overflow:hidden;width:100%;height:100%}:host .flag-icon{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}";
 const ZonosCountryFlagStyle0 = zonosCountryFlagCss;