@zonos/elements 1.3.11-alpha.0 → 1.3.11-alpha.1

package/dist/components/zonos-checkout-progress-tabs2.js

@@ -0,0 +1,122 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as cartStore } from './stripe.js';
+import { z as zonosStore } from './zonosStore.js';
+import { c as classes } from './classes.js';
+import { g as getContrastColor } from './getContrastColor.js';
+import { i as isColorVariable } from './isColorVariable.js';
+import { d as defineCustomElement$2 } from './zonos-icon2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckoutProgressTabs extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * The total number of steps that's done
+         */
+        this.getTotalSuccessStep = () => {
+            // include the finish step
+            const totalSteps = 4;
+            const stepDone = Object.values(cartStore.tabItems).filter(tab => tab.isDone).length + 1;
+            return `${(stepDone / totalSteps) * 100}%`;
+        };
+        this.isTabClickable = (tabValue) => {
+            const currentTab = 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(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) {
+        cartStore.tabItems = tabItems;
+    }
+    /**
+     * Set selected tab. Only set the tab if it's clickable
+     */
+    async setTabSelected(tabValue) {
+        if (this.isTabClickable(tabValue)) {
+            cartStore.step = tabValue;
+        }
+    }
+    render() {
+        const selectedStep = cartStore.step;
+        const labelSelectedColor = this.tabColor || 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({
+                backgroundColor: isColorVariable(this.backgroundColor)
+                    ? window
+                        .getComputedStyle(this.ele)
+                        .getPropertyValue(`--amino-${this.backgroundColor.replace('--amino-', '')}`)
+                    : this.backgroundColor,
+                color: labelSelectedColor,
+            })
+            : labelSelectedColor;
+        return (h(Host, { key: '1fd6d6cb0f4e819f7e0a204fdc1bccbd2753154c', class: "zonos--elements", "data-theme": zonosStore.appearance.theme, style: {
+                '--color': contrastLabelColor,
+                '--progress-percent': this.getTotalSuccessStep(),
+            } }, h("div", { key: 'e7b0c9e9376461461286856553381d20bdd50bb6', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            const isSelected = tab.value === selectedStep;
+            return (h("button", { class: classes([
+                    'zonos--tab-item',
+                    tab.value === selectedStep && 'selected',
+                    tab.isDone && 'done',
+                ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cartStore.step = tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, tab.label)));
+        })), h("div", { key: 'e924379e523d61952e3db826daeb080917c5b468', class: "zonos--tab-progress" }, h("div", { key: '80d193a8f2099a6eb552c1c016be545b9120c6d1', class: "zonos--progress-bar-fill" }))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get ele() { return this; }
+    static get style() { return ZonosCheckoutProgressTabsStyle0; }
+}, [1, "zonos-checkout-progress-tabs", {
+        "tabColor": [1, "tab-color"],
+        "backgroundColor": [1, "background-color"],
+        "setTabItems": [64],
+        "setTabSelected": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-checkout-progress-tabs", "zonos-icon", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-checkout-progress-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCheckoutProgressTabs);
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ZonosCheckoutProgressTabs as Z, defineCustomElement as d };

package/dist/components/zonos-checkout.js

@@ -1,23 +1,24 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { a as localizationStore, b as log, d as stripeStoreGetDomesticShippingSession, e as localizationStoreUpdateSelectedCountryCode, f as stripeStoreCleanupDomesticShippingSession, l as logError, g as stripeStoreSaveDomesticShippingSession, i as initStripeElements, c as cartStore, h as cartStoreUpdateItems, j as cartStoreReset, s as stripeStore, k as stripeStoreInitCheckoutSession, m as cartStoreUpdateToErrorState, t as translate, n as stripeStorePrefetchLandedCost, o as cartStoreNextStep, p as stripeStoreConfirmPayment, q as stripeStoreReset, r as cartStorePreviousStep } from './stripe.js';
+import { a as localizationStore, b as log, d as stripeStoreGetDomesticShippingSession, e as localizationStoreUpdateSelectedCountryCode, f as stripeStoreCleanupDomesticShippingSession, l as logError, g as stripeStoreSaveDomesticShippingSession, i as initStripeElements, c as cartStore, h as cartStoreUpdateItems, j as cartStoreReset, s as stripeStore, k as stripeStoreInitCheckoutSession, m as cartStoreUpdateToErrorState, t as translate, n as stripeStorePrefetchLandedCost, o as cartStoreNextStep, p as stripeStoreConfirmPayment, q as stripeStoreReset } from './stripe.js';
 import { z as zonosStore, m as mergeConfig } from './zonosStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
-import { s as sendErrorLog, d as defineCustomElement$k } from './zonos-checkout-finish2.js';
+import { s as sendErrorLog, d as defineCustomElement$l } from './zonos-checkout-finish2.js';
 import { c as classes } from './classes.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { i as isDarkColor } from './isDarkColor.js';
 import { s as submitGtag } from './submitGtag.js';
-import { d as defineCustomElement$s } from './zonos-address2.js';
-import { d as defineCustomElement$r } from './zonos-badge2.js';
-import { d as defineCustomElement$q } from './zonos-banner2.js';
-import { d as defineCustomElement$p } from './zonos-button2.js';
-import { d as defineCustomElement$o } from './zonos-card2.js';
-import { d as defineCustomElement$n } from './zonos-cart-items2.js';
-import { d as defineCustomElement$m } from './zonos-cart-subtotal2.js';
-import { d as defineCustomElement$l } from './zonos-checkbox2.js';
-import { d as defineCustomElement$j } from './zonos-checkout-footer2.js';
-import { d as defineCustomElement$i } from './zonos-checkout-payment2.js';
+import { d as defineCustomElement$t } from './zonos-address2.js';
+import { d as defineCustomElement$s } from './zonos-badge2.js';
+import { d as defineCustomElement$r } from './zonos-banner2.js';
+import { d as defineCustomElement$q } from './zonos-button2.js';
+import { d as defineCustomElement$p } from './zonos-card2.js';
+import { d as defineCustomElement$o } from './zonos-cart-items2.js';
+import { d as defineCustomElement$n } from './zonos-cart-subtotal2.js';
+import { d as defineCustomElement$m } from './zonos-checkbox2.js';
+import { d as defineCustomElement$k } from './zonos-checkout-footer2.js';
+import { d as defineCustomElement$j } from './zonos-checkout-payment2.js';
+import { d as defineCustomElement$i } from './zonos-checkout-progress-tabs2.js';
 import { d as defineCustomElement$h } from './zonos-collapse2.js';
 import { d as defineCustomElement$g } from './zonos-custom-message2.js';
 import { d as defineCustomElement$f } from './zonos-customer-info2.js';
@@ -155,8 +156,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>
@@ -164,7 +163,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$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout extends HTMLElement {
@@ -203,7 +202,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         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;
@@ -466,14 +465,6 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         // Reload the page
         window.location.reload();
     }
-    async handleBackClick() {
-        // close the modal if back button is clicked on customer info step
-        if (cartStore.step === 'customer-info') {
-            await this.closeDialogHandler();
-            return;
-        }
-        cartStorePreviousStep();
-    }
     handleWindowResize() {
         this.isMobile = isCheckoutMobile(this.mobile);
         // apply theme to stripe elements
@@ -521,23 +512,31 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         const localePageEnum = this.getCurrentLocalePageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === localePageEnum);
         const renderLogo = () => (h("div", { class: "zonos--logo" }, logoUrl && (h("img", { alt: `${zonosStore.organizationName} logo`, src: logoUrl, width: 100 }))));
-        const renderTopHeader = () => (h("zonos-v-stack", null, renderLogo(), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), h("div", null, h("zonos-button", { class: "zonos--back-button", icon: h("zonos-icon", { "aria-label": "Back to previous step", content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, translate('Back')))));
+        const renderTopHeader = () => (h("zonos-v-stack", null, renderLogo(), 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 => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
         const renderContent = () => {
             return (h("div", { class: 'zonos--content', style: {
                     '--border-radius': getBorderRadius(style),
                 } }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
                     '--primary-color': !this.isMobile ? colorPrimary : '',
-                } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isMobile && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
+                } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() }), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, 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;
                 } }), h("zonos-collapse", {
-                // only collapse on mobile
+                // only collapsible on mobile
                 collapsed: this.collapseReviewMobile && this.isMobile
-            }, h("zonos-cart-items", null))), h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage })))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
-                    ? Object.assign(Object.assign({}, cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride }))), h("zonos-checkout-footer", null)));
+            }, h("zonos-cart-items", null), this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), !this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
+                    ? Object.assign(Object.assign({}, cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride }))), 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 (h(Host, { class: classes([
                 'zonos--checkout zonos--elements',
@@ -579,7 +578,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zonos-checkout", "zonos-address", "zonos-badge", "zonos-banner", "zonos-button", "zonos-card", "zonos-cart-items", "zonos-cart-subtotal", "zonos-checkbox", "zonos-checkout-finish", "zonos-checkout-footer", "zonos-checkout-payment", "zonos-collapse", "zonos-custom-message", "zonos-customer-info", "zonos-dialog", "zonos-icon", "zonos-language-select", "zonos-link-authentication", "zonos-payment", "zonos-review", "zonos-select-dialog-header", "zonos-shipping", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text", "zonos-tooltip", "zonos-v-stack"];
+    const components = ["zonos-checkout", "zonos-address", "zonos-badge", "zonos-banner", "zonos-button", "zonos-card", "zonos-cart-items", "zonos-cart-subtotal", "zonos-checkbox", "zonos-checkout-finish", "zonos-checkout-footer", "zonos-checkout-payment", "zonos-checkout-progress-tabs", "zonos-collapse", "zonos-custom-message", "zonos-customer-info", "zonos-dialog", "zonos-icon", "zonos-language-select", "zonos-link-authentication", "zonos-payment", "zonos-review", "zonos-select-dialog-header", "zonos-shipping", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text", "zonos-tooltip", "zonos-v-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "zonos-checkout":
             if (!customElements.get(tagName)) {
@@ -588,55 +587,60 @@ function defineCustomElement$1() {
             break;
         case "zonos-address":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "zonos-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "zonos-banner":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "zonos-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "zonos-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "zonos-cart-items":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "zonos-cart-subtotal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "zonos-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "zonos-checkout-finish":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "zonos-checkout-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "zonos-checkout-payment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "zonos-checkout-progress-tabs":
             if (!customElements.get(tagName)) {
                 defineCustomElement$i();
             }

package/dist/components/zonos-collapse2.js

@@ -48,10 +48,10 @@ const ZonosCollapse = /*@__PURE__*/ proxyCustomElement(class ZonosCollapse exten
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (h(Host, { key: '7ac8b898feadfb4424b3b48a98135cb18994f4e0', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: '032f5818dd8394b5111927907c8fa135a55fef5c', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '4a527ec319b59041196284d4d9a8f22b943a74e6' }, h("iframe", { key: '2fb51c16e13ca90561b1b1e6cab89d87e4a37a47', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '6d7849f6c35be611446b0da36d657396e5ca3122' }))));
+            } }, h("div", { key: '5ddbf406c93f37c9e23375f11dd8439934c0d2a5' }, h("iframe", { key: 'b3efa8bc198918dbb3284e8ce658ffca6249eaa8', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'ffcd123c3a046e62855a650da9972cde94a7774c' }))));
     }
     get el() { return this; }
     static get style() { return ZonosCollapseStyle0; }

package/dist/components/zonos-component.js

@@ -20,7 +20,7 @@ const ZonosComponent$1 = /*@__PURE__*/ proxyCustomElement(class ZonosComponent e
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '3b7429a0c03b00f0a80e15a94bebd08aedaafe51' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '9a5547114b58b739fb5d783f551bc345f067779d' }, "Hello, World! I'm ", this.getText());
     }
     static get style() { return ZonosComponentStyle0; }
 }, [1, "zonos-component", {

package/dist/components/zonos-controller.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { u as handleFetch, l as logError, z as isValidSelector, b as log, s as stripeStore, A as initLocalizationStore, e as localizationStoreUpdateSelectedCountryCode } from './stripe.js';
+import { r as handleFetch, l as logError, y as isValidSelector, b as log, s as stripeStore, z as initLocalizationStore, e as localizationStoreUpdateSelectedCountryCode } from './stripe.js';
 import { z as zonosStore, d as zonosStoreInitSetting, a as zonosStoreFontFamily } from './zonosStore.js';
 import { d as defineCustomElement$3 } from './zonos-notification2.js';
 import { d as defineCustomElement$2 } from './zonos-text2.js';
@@ -227,7 +227,7 @@ const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '0b734aaa82bd08277fb3a2694197b13242a4d0a6', class: "zonos--elements" });
+        return h(Host, { key: 'bd56d32009707ec9042ae5f8a87de7a7cedcca73', class: "zonos--elements" });
     }
     static get style() { return ZonosControllerStyle0; }
 }, [1, "zonos-controller", {

package/dist/components/zonos-country-select2.js

@@ -1831,9 +1831,9 @@ const ZonosCountrySelect = /*@__PURE__*/ proxyCustomElement(class ZonosCountrySe
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: '2b8e15643f92ac489706aff7623b1d1efdebce70', class: "zonos--elements", style: {
+        return (h(Host, { key: '0024a7061a593cf3c92fd7f6b5916aaac3a835c9', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '06b0c7765d8144ca102c9033e74cf1edb14743ac', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'f2af99575f518acb753448f7cb1f7aecd790de9d', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '296b92c476439aace00f6817b452a3fd3e1d353d', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: 'd988b856392f88a66bcc3016ccf55107bda4a411', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '4376bec824141dd7d2dbfb84f465ac4a48e1d050', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: 'e6ef5d8cc13e731c94ee5ef037c02eac36d9bce6', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'f698da7688757b6728e99e0cecb21ac4ce586d30', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'd37801e6023262a582d3ecc6e3a39f505f7e82b8', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '6f053c963f5e25b5285a94070336650537bbdad3', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '3d3e180b204bf9fa0893fec7839f1d0d5c4740c1', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     get ele() { return this; }
     static get style() { return ZonosCountrySelectStyle0; }

package/dist/components/zonos-custom-message2.js

@@ -31,7 +31,7 @@ const ZonosCustomMessage = /*@__PURE__*/ proxyCustomElement(class ZonosCustomMes
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: '73091a3267f0989e8820800054aebc75168dc5d6', class: "zonos--elements", style: {
+        return (h(Host, { key: 'b09b7025fb55c4323aaa24ccb7e410d1638bed8a', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
             } }, this.message && (h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { innerHTML: messageWithLinks }))))));
     }

package/dist/components/zonos-dialog2.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$1 } from './zonos-spinner2.js';
 
 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 = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends HTMLElement {
@@ -35,7 +35,6 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
         this.noHeader = false;
         this.noBodyPadding = false;
         this.noBorder = false;
-        this.footerRightAction = null;
         this.borderStyle = undefined;
         this.noCloseButton = false;
         this.noClickOutside = false;
@@ -58,7 +57,7 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
             document.body.style.overflow = 'auto';
         }
         const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { key: '3927d9cf0ebbd8b497a0ec42328c4392925d198a', class: classes([
+        return (h(Host, { key: '6bda73bd75e6bc31e73ad53849a51752396ee42d', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -69,10 +68,10 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, h("div", { key: 'df93af61bfd856db3a572cdb98f60a8dd5c5bb7d', class: "zonos--backdrop" }), h("div", { key: 'f306feb4858dff642fbfd731e5aad849a8f29941', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'b914ea2e54fb2af825008ae28e235c461dce67e9', class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: '19219c0c8d167bbacec992ba10b1fe0f31a8b8f6', class: classes([
+            } }, h("div", { key: 'cd3ff21820f95faee3f16e23a272e080bd7930c8', class: "zonos--backdrop" }), h("div", { key: '85af066de976e3b29505c8804e544ca0a1f8a012', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '389491715fcb12f9c86b744e2e9c20930a2a9f25', class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'a28ad12faab02ef30769a3234b24e749b38c46b4', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '38f9b83418dacd47cc2395f253a32ff0a6723d54' })), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
+            ]) }, h("slot", { key: '7da31d739197a17ae94df1909c93f70c1282da95' })), h("slot", { key: 'fe02670713895b786dfa6b0c30ad6553c32796cd', name: "dialog-footer" })))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return ZonosDialogStyle0; }
@@ -84,7 +83,6 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
         "noHeader": [4, "no-header"],
         "noBodyPadding": [4, "no-body-padding"],
         "noBorder": [4, "no-border"],
-        "footerRightAction": [16],
         "borderStyle": [1, "border-style"],
         "noCloseButton": [4, "no-close-button"],
         "noClickOutside": [4, "no-click-outside"],

package/dist/components/zonos-hello-dialog-footer2.js

@@ -36,9 +36,9 @@ const ZonosHelloDialogFooter = /*@__PURE__*/ proxyCustomElement(class ZonosHello
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
-        return (h(Host, { key: 'f97688788d9f6d1a640f054a2a22dbae6955b83c', class: "zonos--elements" }, h("div", { key: '3539323f9044acef3890fc072bdd981e2495fc18', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (h(Host, { key: 'ae185b9859f64fea077e093af2decc170f24170b', class: "zonos--elements" }, h("div", { key: 'c472973505ab6cde075af193df735d0524fc35a0', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
                 '--primary-color': (_c = this.appearanceSettings) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-            } }, h("a", { key: '5e30052240f87211c6f0092ef6a27c217f3ecefb', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'c60142bcd26086c2944ac3464885ca1f96e5cfbe', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: '67297b4c557ee5b49a4406a459588f2924183195', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '9348bff826187730f36d191f7e01f516f2b9785c', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'ecf1a8639e8e92a07a0e774abb560de53c19587c', buttonColor: "gray-1200", icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: '95cb8c09a3a3f566365f0044d6fcdcf6a82facee', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'e11df129f087f9de259c2f24bd294f8d0a881e0d', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: 'df26ef41d24395a2db6d8e3c9dc83a62e0e707ef', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '9b1797c3fdd17044fecb6ae4526d3c053d1ab59a', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'eac17e7e84dc2a80abfcbaed3753512e6358f8db', buttonColor: "gray-1200", icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     static get style() { return ZonosHelloDialogFooterStyle0; }
 }, [1, "zonos-hello-dialog-footer", {

package/dist/components/zonos-hello-dialog2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { G as currencyFormat, a as localizationStore, t as translate } from './stripe.js';
+import { F as currencyFormat, a as localizationStore, t as translate } from './stripe.js';
 import { z as zonosStore } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { f as formatStringWithLinks, d as defineCustomElement$8 } from './zonos-custom-message2.js';
@@ -136,7 +136,7 @@ const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: 'd5ac86955cf9f9a22e47fe2154dee6e10f6a9361', class: "zonos--elements" }, h("div", { key: 'd34dd3f937330cd5fdd2d7a11dc321c215983146', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: 'a9e9d5946604f86ea0680af79ece9e079d4d00d7', class: "zonos--elements" }, h("div", { key: '47ed38de794c10b5689778257d134006c109c101', "aria-hidden": "true", class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',

package/dist/components/zonos-hello.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1, z as zonosStore, m as mergeConfig } from './zonosStore.js';
-import { u as handleFetch, l as logError, a as localizationStore, z as isValidSelector, t as translate, B as getZCountryUrlParam, C as setZCountryUrlParam, b as log, D as currencyDisplay, E as currencyConvertAndFormat, F as currencyConvert, G as currencyFormat } from './stripe.js';
+import { r as handleFetch, l as logError, a as localizationStore, y as isValidSelector, t as translate, A as getZCountryUrlParam, B as setZCountryUrlParam, b as log, C as currencyDisplay, D as currencyConvertAndFormat, E as currencyConvert, F as currencyFormat } from './stripe.js';
 import { c as classes } from './classes.js';
 import { g as getHasMoreSpaceOnRight, d as defineCustomElement$9 } from './zonos-hello-dialog2.js';
 import { d as defineCustomElement$f } from './zonos-banner2.js';

package/dist/components/zonos-icon2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { a as zonosStoreFontFamily } from './zonosStore.js';
+import { i as isColorVariable } from './isColorVariable.js';
 
 const zonosIconCss = ":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 svg{width:var(--width);height:var(--height);fill:var(--color);color:var(--color)}";
 const ZonosIconStyle0 = zonosIconCss;
@@ -18,9 +19,12 @@ const ZonosIcon = /*@__PURE__*/ proxyCustomElement(class ZonosIcon extends HTMLE
         if (!this.content || !this.el.shadowRoot) {
             return null;
         }
+        const iconColor = isColorVariable(this.iconColor)
+            ? `var(--amino-${this.iconColor})`
+            : this.iconColor;
         this.el.shadowRoot.innerHTML = this.content;
         return (h(Host, { class: "zonos--elements", style: {
-                '--color': `var(--amino-${this.iconColor})`,
+                '--color': iconColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
                 '--width': `${this.size}px`,

package/dist/components/zonos-language-select2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { w as localizationStoreUpdateSelectedLocale, t as translate, a as localizationStore } from './stripe.js';
+import { v as localizationStoreUpdateSelectedLocale, t as translate, a as localizationStore } from './stripe.js';
 import { a as zonosStoreFontFamily } from './zonosStore.js';
 import { l as languages } from './ILanguage.js';
 import { d as defineCustomElement$6 } from './zonos-button2.js';
@@ -32,9 +32,9 @@ const ZonosLanguageSelect = /*@__PURE__*/ proxyCustomElement(class ZonosLanguage
     }
     render() {
         const { selectedLocale } = localizationStore;
-        return (h(Host, { key: 'd12676d6438941bb8d987826f68c1b72a7e02ccd', class: "zonos--elements", style: {
+        return (h(Host, { key: '25e0e2be0bbac853efa9c26c1595a1d57461a1a1', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '259eaa6a8ae682cc96c98eaaab574757285188b9', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '88bff024a5f678b00bf4edd7b2497177a986af4c', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'be1d87991dec9ac2a3b530a0cf9129b9e191781b', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, h("div", { key: 'b9f3a630f945570a9c0058bb0367e810b7650eb0', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'b30a41cc7f4eab57f15b48ffa3f7c0ad1e695e65', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'c6826b80ece54415befc388e57baa02d56472aef', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
     static get style() { return ZonosLanguageSelectStyle0; }
 }, [1, "zonos-language-select", {

package/dist/components/zonos-link-authentication2.js

@@ -38,7 +38,7 @@ const ZonosLinkAuthentication = /*@__PURE__*/ proxyCustomElement(class ZonosLink
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '671681b3ca3e95ab25a70cb44e84db7e2b3903e8', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '8d20c795500e3ce27b92cdeb0446908e550f9f13', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'b8374d7d7a4844b4c2cf6363b8d2d225bb52b21d', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: 'a434761e3f237cd44971e458512c7649f214eb4d', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '0c350ff6dabb1c71376e4e6539a68613d7174189', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'e9cc2bd1e68b64e2fed41851a0d2f2be40583337', class: "zonos--link-authentication-component" })));
     }
     get el() { return this; }
     static get watchers() { return {