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

package/dist/components/zonos-controller.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { o as handleFetch, l as logError, v as isValidSelector, d as log, s as stripeStore, w as initLocalizationStore, x as localizationStoreUpdateSelectedCountryCode } from './stripe.js';
+import { u as handleFetch, l as logError, z as isValidSelector, d as log, s as stripeStore, A as initLocalizationStore, f 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';
@@ -35,13 +35,16 @@ const initCheckout = (config) => {
     injectCheckoutElement();
 };
 
-const injectHelloComponent = (triggerAnchorElement) => {
+const injectHelloComponent = (anchorElementSelector) => {
+    const triggerAnchorElement = document.querySelector(anchorElementSelector);
     // append checkout component if doesn't exist
     const helloElement = document.querySelector('zonos-hello');
     if (!helloElement && triggerAnchorElement) {
         const newHelloElement = document.createElement('zonos-hello');
         triggerAnchorElement.appendChild(newHelloElement);
+        return true;
     }
+    return false;
 };
 const initHello = async (helloSettings) => {
     const { anchorElementSelector } = helloSettings;
@@ -50,9 +53,26 @@ const initHello = async (helloSettings) => {
         logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
         return;
     }
-    const triggerElement = document.querySelector(anchorElementSelector);
     log('Hello init complete');
-    injectHelloComponent(triggerElement);
+    const isHelloInjected = injectHelloComponent(anchorElementSelector);
+    // keep watching for the anchor element to be added to the DOM, then inject hello component
+    if (!isHelloInjected) {
+        const observer = new MutationObserver(() => {
+            const injected = injectHelloComponent(anchorElementSelector);
+            if (injected) {
+                // disconnect observer if hello is successfully injected
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        // kill observer after 5 seconds if the hello still not injected, if the hello still not injected after 10 seconds, it's likely that the selector the user doesn't want to use hello
+        setTimeout(() => {
+            observer.disconnect();
+        }, 5000);
+    }
 };
 
 const zonosControllerCss = ":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{visibility:hidden;opacity:0;height:0}";
@@ -208,7 +228,7 @@ const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '5650218b8eef4246ff1b131fcd1a06319800c2e3', class: "zonos--elements" });
+        return h(Host, { key: 'a220a3ebe75df167eefc892c59efdcaf05a53601', class: "zonos--elements" });
     }
     static get style() { return ZonosControllerStyle0; }
 }, [1, "zonos-controller", {

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { x as localizationStoreUpdateSelectedCountryCode, b as localizationStore } from './stripe.js';
+import { f as localizationStoreUpdateSelectedCountryCode, b as localizationStore } from './stripe.js';
 import { a as zonosStoreFontFamily } from './zonosStore.js';
 import { d as defineCustomElement$7 } from './zonos-button2.js';
 import { d as defineCustomElement$6 } from './zonos-country-flag2.js';
@@ -1814,6 +1814,11 @@ const ZonosCountrySelect = /*@__PURE__*/ proxyCustomElement(class ZonosCountrySe
         this.handleOnClose = () => { };
         this.inputValue = '';
     }
+    componentDidRender() {
+        var _a, _b;
+        // focus the input on render
+        (_b = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-select-input')) === null || _b === void 0 ? void 0 : _b.focus();
+    }
     render() {
         const { shippingZoneCountries } = localizationStore;
         const countries = shippingZoneCountries
@@ -1826,10 +1831,11 @@ 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: 'fb1115a06814daaf8ebb7d9e282fdd1bd944121f', class: "zonos--elements", style: {
+        return (h(Host, { key: '2b8e15643f92ac489706aff7623b1d1efdebce70', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'eb9eb7dba8f170c6190fd29e670b002ecb39a849', class: "zonos--country-select" }, h("zonos-v-stack", { key: '4667474f03efbad9fbb0ea4153d16b49a7f2803f', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'c2777f838d9d376878e1218868ed8df0d28dc5f2', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '1e41b3888bce97a94ff88c4b3b3389cc8d4de096', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'ba89ae931e2a0e564112d9989d8074674906a297', 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", { color: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, 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 })))))))));
     }
+    get ele() { return this; }
     static get style() { return ZonosCountrySelectStyle0; }
 }, [1, "zonos-country-select", {
         "handleOnClose": [16],

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

@@ -4,6 +4,20 @@ import { d as defineCustomElement$3 } from './zonos-card2.js';
 import { d as defineCustomElement$2 } from './zonos-icon2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
+const formatStringWithLinks = (str) => {
+    // Match Markdown-style links or standalone URLs not in Markdown format
+    const linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s\)]+)\)|(https?:\/\/[^\s]+)/g;
+    const messageWithLinks = str.replace(linkRegex, (_match, text, markdownUrl, url) => {
+        if (markdownUrl) {
+            return `<zonos-link href="${markdownUrl}" target="_blank" rel="noopener noreferrer">${text}</zonos-link>`;
+        }
+        else {
+            return `<zonos-link href="${url}" target="_blank" rel="noopener noreferrer">${url}</zonos-link>`;
+        }
+    });
+    return messageWithLinks;
+};
+
 const zonosCustomMessageCss = ":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--custom-message{background:var(--amino-gray-50);border-radius:var(--amino-radius-6)}:host .zonos--custom-message .zonos--flex-message{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}";
 const ZonosCustomMessageStyle0 = zonosCustomMessageCss;
 
@@ -16,9 +30,10 @@ const ZonosCustomMessage = /*@__PURE__*/ proxyCustomElement(class ZonosCustomMes
         this.message = '';
     }
     render() {
-        return (h(Host, { key: '6c16aa29406415995c2289c2fe3d22dbe08fbd23', class: "zonos--elements", style: {
+        const messageWithLinks = formatStringWithLinks(this.message);
+        return (h(Host, { key: '73091a3267f0989e8820800054aebc75168dc5d6', 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", content: this.icon }), h("zonos-text", null, this.message))))));
+            } }, 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 }))))));
     }
     static get style() { return ZonosCustomMessageStyle0; }
 }, [1, "zonos-custom-message", {
@@ -54,4 +69,4 @@ function defineCustomElement() {
     } });
 }
 
-export { ZonosCustomMessage as Z, defineCustomElement as d };
+export { ZonosCustomMessage as Z, defineCustomElement as d, formatStringWithLinks as f };

package/dist/components/zonos-customer-info2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as stripeStore, t as translate } from './stripe.js';
+import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { s as submitGtag } from './submitGtag.js';
 import { d as defineCustomElement$7 } from './zonos-address2.js';
 import { d as defineCustomElement$6 } from './zonos-button2.js';
@@ -9,7 +10,7 @@ import { d as defineCustomElement$3 } from './zonos-link-authentication2.js';
 import { d as defineCustomElement$2 } from './zonos-spinner2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
-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--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 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;
 
 const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerInfo extends HTMLElement {
@@ -33,6 +34,7 @@ const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerIn
         if (!this.disabled) {
             // submit google tag when the form is complete
             submitGtag('zonos-checkout-customer-info');
+            void trackConversionEvent('checkout_customerInfoCompleted');
         }
     }
     render() {

package/dist/components/zonos-dialog2.js

@@ -58,7 +58,7 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
             document.body.style.overflow = 'auto';
         }
         const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { key: 'dd232b16db7f6a6216f91af19c8b735b7eb528c7', class: classes([
+        return (h(Host, { key: '3927d9cf0ebbd8b497a0ec42328c4392925d198a', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -69,10 +69,10 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, h("div", { key: '23751fcbfe7a51856589d45feb59ed51ca3f86fa', class: "zonos--backdrop" }), h("div", { key: '3f5af0c470ad69e68b978753ece8d2687c99ab7c', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'e137a76e1a3e2cfc6403628fe804eb23d1bb1282', 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: '46e89cdfaffd1190f4916206deb452002f40f24f', class: classes([
+            } }, 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([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: 'e8acb4a5e48ad4a0aeb057799f5abeb56eb8d1ea' })), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
+            ]) }, h("slot", { key: '38f9b83418dacd47cc2395f253a32ff0a6723d54' })), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return ZonosDialogStyle0; }

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: 'a3a6ab0e4af4981cc83802be1433c3c41da58c19', class: "zonos--elements" }, h("div", { key: 'fdea45d1b4d83055a3d17918a5ae78f43a7e0042', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (h(Host, { key: 'f97688788d9f6d1a640f054a2a22dbae6955b83c', class: "zonos--elements" }, h("div", { key: '3539323f9044acef3890fc072bdd981e2495fc18', 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: '4d4e995052049238d4c522ff8501dddbe25e29d5', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '4ca16c024473660f74cfc7a3d506b8ba4ebf7362', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: 'dd1da686f8345431c3805898f374e5fb22e27289', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'd5c34c75c5006710ff6d0426d43f07a5ade41827', 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: '43759ce87473b10e078f14dce529db502a5edd4d', 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: '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)))));
     }
     static get style() { return ZonosHelloDialogFooterStyle0; }
 }, [1, "zonos-hello-dialog-footer", {

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

@@ -1,13 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { D as currencyFormat, b as localizationStore, t as translate } from './stripe.js';
+import { G as currencyFormat, b 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';
 import { d as defineCustomElement$d } from './zonos-banner2.js';
 import { d as defineCustomElement$c } from './zonos-button2.js';
 import { d as defineCustomElement$b } from './zonos-card2.js';
 import { d as defineCustomElement$a } from './zonos-country-flag2.js';
 import { d as defineCustomElement$9 } from './zonos-country-select2.js';
-import { d as defineCustomElement$8 } from './zonos-custom-message2.js';
 import { d as defineCustomElement$7 } from './zonos-hello-dialog-footer2.js';
 import { d as defineCustomElement$6 } from './zonos-icon2.js';
 import { d as defineCustomElement$5 } from './zonos-language-select2.js';
@@ -131,18 +131,19 @@ const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog
         const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
         const { customMessages } = localizationStore;
         const welcomeMessage = `${translate('Welcome to')} ${zonosStore.organizationName}!`;
-        const defaultMessage = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
+        const defaultMessageStr = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
             translate('Know about duties and taxes before you buy. Shop with confidence!');
+        const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '303f914b4511500edcd8d041ccfd52f0c48a7a85', class: "zonos--elements" }, h("div", { key: 'f52025ee53c0cdbbf20ecbb874e5639194b6507b', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: 'd5ac86955cf9f9a22e47fe2154dee6e10f6a9361', class: "zonos--elements" }, h("div", { key: 'd34dd3f937330cd5fdd2d7a11dc321c215983146', "aria-hidden": "true", class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", null, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { textColor: "gray-800" }, defaultMessage)), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", null, h("div", { class: "zonos--hello-dialog-content" }, h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { spacing: 24 }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { type: "boldSubheader" }, welcomeMessage), h("zonos-text", { innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
         }), h("zonos-card", { spacing: "12px" }, h("zonos-v-stack", { spacing: 12 }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: BagIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", null, h("zonos-country-select", { handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", null, h("zonos-language-select", { handleOnClose: () => this.setShowLanguageSelect(false) }))))));

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 { o as handleFetch, l as logError, b as localizationStore, v as isValidSelector, t as translate, y as getZCountryUrlParam, z as setZCountryUrlParam, d as log, A as currencyDisplay, B as currencyConvertAndFormat, C as currencyConvert, D as currencyFormat } from './stripe.js';
+import { u as handleFetch, l as logError, b as localizationStore, z as isValidSelector, t as translate, B as getZCountryUrlParam, C as setZCountryUrlParam, d as log, D as currencyDisplay, E as currencyConvertAndFormat, F as currencyConvert, G 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';
@@ -568,7 +568,6 @@ const ZonosHello$1 = /*@__PURE__*/ proxyCustomElement(class ZonosHello extends H
         this.reloadHelloData = async () => {
             await this.handleItemRestrictions();
             this.triggerShowPeekMessage();
-            void this.displayCurrency();
         };
         this.handleProductCountChange = debounce_1(() => {
             const { productTitleElementSelector } = zonosStore.helloSettings;
@@ -591,6 +590,14 @@ const ZonosHello$1 = /*@__PURE__*/ proxyCustomElement(class ZonosHello extends H
                 subtree: true,
             });
         };
+        this.watchPriceChange = () => {
+            const observer = new MutationObserver(() => void this.displayCurrency());
+            observer.observe(document.body, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+            });
+        };
         this.updateHelloOnPageChange = () => {
             // If the product count changes on the same url (loading more products), update the peek message and item restrictions
             this.watchProductCountChange();
@@ -662,6 +669,7 @@ const ZonosHello$1 = /*@__PURE__*/ proxyCustomElement(class ZonosHello extends H
             if (zonosStore.loadedConfig) {
                 this.helloRef.setAttribute('data-zonos-hello-loaded', '');
                 this.updateHelloOnPageChange();
+                this.watchPriceChange();
                 clearInterval(initInterval);
             }
         }, 100);
@@ -683,21 +691,28 @@ const ZonosHello$1 = /*@__PURE__*/ proxyCustomElement(class ZonosHello extends H
      * @returns string
      */
     async convertAndFormat(value) {
-        currencyConvertAndFormat(value);
+        return currencyConvertAndFormat(value);
     }
     /**
      * This method will convert the currency and return the converted value
      * @returns number
      */
     async convert(value) {
-        currencyConvert(value);
+        return currencyConvert(value);
     }
     /**
      * This method will format the currency and return the formatted string
      * @returns number
      */
     async format(value) {
-        currencyFormat(value);
+        return currencyFormat(value);
+    }
+    /**
+     * This method show the hello dialog
+     * @returns void
+     */
+    async openHelloDialog(value) {
+        this.changeShowDialog(value);
     }
     handleResize() {
         debounce_1(this.render.bind(this), RESIZE_DEBOUNCE_DELAY_MS);
@@ -734,7 +749,7 @@ const ZonosHello$1 = /*@__PURE__*/ proxyCustomElement(class ZonosHello extends H
                 !!this.allRestrictedItems.length &&
                     'zonos--hello-has-restrictions',
             ]), onClick: () => {
-                this.changeShowDialog(!this.showDialog);
+                void this.changeShowDialog(!this.showDialog);
             }, onMouseEnter: () => this.enableShowPeekMessage(), onMouseLeave: () => (this.showPeekMessage = false), ref: el => el && (this.helloRef = el) }, h("zonos-text", { class: "zonos--hello-message" }, this.peekMessage), selectedCountryCode && (h("div", { class: "zonos--hello-country-flag-wrapper" }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode })))), h("div", { class: classes([
                 'zonos--hello-dialog-wrapper',
                 this.mobileLocationOverride &&
@@ -757,7 +772,8 @@ const ZonosHello$1 = /*@__PURE__*/ proxyCustomElement(class ZonosHello extends H
         "displayCurrency": [64],
         "convertAndFormat": [64],
         "convert": [64],
-        "format": [64]
+        "format": [64],
+        "openHelloDialog": [64]
     }, [[9, "resize", "handleResize"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { q as localizationStoreUpdateSelectedLocale, t as translate, b as localizationStore } from './stripe.js';
+import { w as localizationStoreUpdateSelectedLocale, t as translate, b 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: 'c90288e341c50d113cc63d09e864ddfa346d55a1', class: "zonos--elements", style: {
+        return (h(Host, { key: 'd12676d6438941bb8d987826f68c1b72a7e02ccd', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '4dabc3c9ab177e5545942c725490af64cb9608c3', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '95f111f3774a568ea44204858fe503fa7c1915f3', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'c2634e3b006f3d14c67ee78c0c9befdb21cecc72', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { color: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, 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 })))))))));
     }
     static get style() { return ZonosLanguageSelectStyle0; }
 }, [1, "zonos-language-select", {

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

@@ -39,7 +39,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: 'aec893e026a60bcbf81e93a3c63a842f97437dcc', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '93c2c462d3a108364d2dfbc4aeab058f87bcc7b3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '0098e20d87cce7547fc1abf26859c0d3765407cd', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: '62b8e4a5c1902cb2c8fe032d7c43ba68742e8c0a', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: 'b86acc15bfc6eba0c7174c1e229205b34747f57d', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'f0734254d41ff9f221f97143e0df1f28017b9a61', class: "zonos--link-authentication-component" })));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosLink extends Components.ZonosLink, HTMLElement {}
+export const ZonosLink: {
+    prototype: ZonosLink;
+    new (): ZonosLink;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-link.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const zonosLinkCss = ":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:inline-block}:host a{padding-bottom:2px;color:var(--amino-primary);-webkit-box-shadow:none;box-shadow:none;text-decoration:none;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word}:host a:link,:host a:visited{color:var(--amino-primary);-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}:host a:hover,:host a:active{color:var(--amino-primary);-webkit-box-shadow:0 1px 0 var(--amino-primary);box-shadow:0 1px 0 var(--amino-primary)}";
+const ZonosLinkStyle0 = zonosLinkCss;
+
+const ZonosLink$1 = /*@__PURE__*/ proxyCustomElement(class ZonosLink extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.href = '';
+        this.rel = undefined;
+        this.target = undefined;
+        this.linkTitle = undefined;
+    }
+    render() {
+        return (h(Host, { key: '99bf9ff46cf84f424739b76d3da8a8c770c0a88f', class: "zonos--elements" }, h("a", { key: 'bd3553a33f27b4815a7b0573a34862093242b456', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: 'ad80829c1ca5cd9b0e2dd62542025eeecf436196' }))));
+    }
+    static get style() { return ZonosLinkStyle0; }
+}, [1, "zonos-link", {
+        "href": [1],
+        "rel": [1],
+        "target": [1],
+        "linkTitle": [1, "link-title"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-link":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosLink$1);
+            }
+            break;
+    } });
+}
+
+const ZonosLink = ZonosLink$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosLink, defineCustomElement };

package/dist/components/zonos-logo.js

@@ -17,11 +17,11 @@ const ZonosLogo$1 = /*@__PURE__*/ proxyCustomElement(class ZonosLogo extends HTM
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (h(Host, { key: '5e97dd0219dde036eef02757f055354390b18c3d', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: 'b93db6ec62ecaacb3ded0ab07dd2f38ed488f8d1', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: '44c720d0a7bf3cf5a6bd783f21c8493d3a53ec70', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '026162477b24250e4204318fa3018b1cfd383ab5', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return ZonosLogoStyle0; }

package/dist/components/zonos-payment2.js

@@ -40,7 +40,7 @@ const ZonosPayment = /*@__PURE__*/ proxyCustomElement(class ZonosPayment extends
     }
     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: 'd5b7717fa4b80da99ae6ba2d7cccbe318e091f8f', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '37bd2c2dcc59613857b9fd22d864c0d11b2a7319', class: "zonos--payment-component" })));
+        return (h(Host, { key: 'de560f2de1e48fce2cf11f0fc3e2ef36938e719f', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'b6a60c127e67e3d03408d960ad56f712a5677683', class: "zonos--payment-component" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/zonos-review2.js

@@ -35,7 +35,6 @@ const ZonosReview = /*@__PURE__*/ proxyCustomElement(class ZonosReview extends H
             ? 'boldSubheader'
             : 'secondaryPageHeader';
         const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';
-        const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
         const renderCollapseIcon = () => {
             // only display the collapse icon if the component is being rendered with mobile styles
             if (!this.isMobile) {
@@ -50,11 +49,7 @@ const ZonosReview = /*@__PURE__*/ proxyCustomElement(class ZonosReview extends H
                 'zonos--review zonos--elements',
                 this.isMobile && 'mobile',
             ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, formatCurrency({
-            amount: 
-            // show total without taxes when step is shipping, show total with taxes when step is payment
-            cartStore.step === 'shipping'
-                ? totalWithoutTaxes
-                : cartStore.total,
+            amount: cartStore.total,
             currency: cartStore.currency,
         })))));
     }

package/dist/components/zonos-select-dialog-header2.js

@@ -20,9 +20,9 @@ const ZonosSelectDialogHeader = /*@__PURE__*/ proxyCustomElement(class ZonosSele
         this.label = '';
     }
     render() {
-        return (h(Host, { key: '737dcae414b2538bf4c0b5c932a78acb9eeb1e93', class: "zonos--elements", style: {
+        return (h(Host, { key: 'd0882c22934d6f9635bd0b31af5703283cd0a1be', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '8cfde0f03e03ad011c8f8f4517c3b47ba8c03746', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '5c5044ad46e156ad4cde26df0bb57c6690a11e42', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'a10b9b48834c6eabd9d20f44b8c8dc4927d53bd1', type: "boldLabel" }, this.label), h("zonos-button", { key: '50d74c5e97f2c224a437fde48b6d2a30b14fc1fe', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: 'd875d9cfddaf37f1ca0a2bb01a3ba3da10c2fda0' }))));
+            } }, h("zonos-v-stack", { key: '2e227c5bdeeeb0fa772847267007df5aea2e0824', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'c43b72c938069ff1a99a985b3b388a785f94d100', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'b1008e43ca022ca1e1b63a60ab5c347d1228396e', type: "boldLabel" }, this.label), h("zonos-button", { key: '4722586c58eac765ded4a7baeeca8eb58d44dd0a', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '36babf745ea5de00c82823520134b1dfcfc9d16d' }))));
     }
     static get style() { return ZonosSelectDialogHeaderStyle0; }
 }, [1, "zonos-select-dialog-header", {

package/dist/components/zonos-shipping-rich-radio2.js

@@ -43,7 +43,7 @@ const ZonosShippingRichRadio = /*@__PURE__*/ proxyCustomElement(class ZonosShipp
             return (h("div", { "aria-hidden": "true", class: classes([
                     'zonos--shipping-rich-radio-item',
                     selected && 'selected',
-                ]), onClick: () => this.handleRichRadioSelect(item) }, h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), h("div", { class: "zonos--shipping-info" }, h("div", { class: "zonos--shipping-detail" }, h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (h("div", { class: "zonos--sub-detail" }, item.sublabel && (h("zonos-text", { textColor: "gray-800" }, item.sublabel)), item.caption && (h("zonos-text", { textColor: "gray-400" }, item.caption))))), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
+                ]), onClick: () => this.handleRichRadioSelect(item) }, h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), h("div", { class: "zonos--shipping-info" }, h("div", { class: "zonos--shipping-detail" }, h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (h("div", { class: "zonos--sub-detail" }, item.sublabel && (h("zonos-text", { textColor: "gray-800" }, item.sublabel)), item.caption && (h("zonos-text", { textColor: "gray-600" }, item.caption))))), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
         })));
     }
     static get style() { return ZonosShippingRichRadioStyle0; }

package/dist/components/zonos-shipping2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as cartStore, r as cartStoreUpdateSelectedShippingOption, u as cartStoreGetShippingTransitInfo, t as translate } from './stripe.js';
+import { c as cartStore, x as cartStoreUpdateSelectedShippingOption, y as cartStoreGetShippingTransitInfo, t as translate } from './stripe.js';
+import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { f as formatCurrency } from './formatCurrency.js';
 import { s as submitGtag } from './submitGtag.js';
 import { d as defineCustomElement$5 } from './zonos-banner2.js';
@@ -8,7 +9,7 @@ import { d as defineCustomElement$3 } from './zonos-shipping-rich-radio2.js';
 import { d as defineCustomElement$2 } from './zonos-spinner2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
-const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
+const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{-webkit-box-shadow:0 0 1px 0 var(--amino-gray-600);box-shadow:0 0 1px 0 var(--amino-gray-600)}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
 const ZonosShippingStyle0 = zonosShippingCss;
 
 const ZonosShipping = /*@__PURE__*/ proxyCustomElement(class ZonosShipping extends HTMLElement {
@@ -46,9 +47,13 @@ const ZonosShipping = /*@__PURE__*/ proxyCustomElement(class ZonosShipping exten
         this.disabled = true;
     }
     watchFormComplete() {
+        var _a;
         if (!this.disabled) {
             // submit google tag when the form is complete
             submitGtag('zonos-checkout-shipping-info');
+            void trackConversionEvent('checkout_shippingInfoCompleted', {
+                serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+            });
         }
     }
     render() {

package/dist/components/zonos-tooltip2.js

@@ -15,10 +15,10 @@ const ZonosTooltip = /*@__PURE__*/ proxyCustomElement(class ZonosTooltip extends
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: '684561bebf9385c7e6bcca7de37e7ee5084c9692', class: "zonos--elements" }, h("div", { key: 'c116738f39d25b856b268ece410a33f91046c739', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '4073ed0766b4efaa0c25fa7febdbad4c42714dca' }), h("div", { key: '8c6b180577830aaaceb629819535dd930fc49e02', class: classes([
+        return (h(Host, { key: '4864150b0af4119fc7d87aec5af3c258fb27802d', class: "zonos--elements" }, h("div", { key: 'c11d3da431f9c4507bc58ec38d0b1ef21c99b584', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '0a92efb2e6c17f67c2feacbd17bbddd4fb63f7da' }), h("div", { key: '0ea54bfaf54a2f170044d77c2b555e5da37af8ae', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '7c018a9d5a7db939b59624dcc77029a5a8d621af', color: "gray-0", size: "s", type: "boldLabel" }, this.label), h("zonos-text", { key: 'c1f09eaf9cb1084ecf47334903b9ca8b944502b7', color: "gray-0", size: "xs" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '73c55a7318eb36760d2779691f9ea79d2c5bf8c7', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '1f4106f67fc468121d7fb7fbc0ee69363bb26186', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get style() { return ZonosTooltipStyle0; }
 }, [1, "zonos-tooltip", {

package/dist/components/zonos-v-stack2.js

@@ -13,9 +13,9 @@ const VStack = /*@__PURE__*/ proxyCustomElement(class VStack extends HTMLElement
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: 'a26c7c4898b81deb569731adb63505ded3155fdf', style: {
+        return (h(Host, { key: 'a5d1a84d5b25d1a49abec676731eaf76f703e998', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'd4af21dc024bbd12b5240dff4f2689416ad4d808', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '298de42d875520fad5a720eedcf2b8664b39ae85' }))));
+            } }, h("div", { key: '456c8e1865a752dd258989888c45dfbdfd2c4f66', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '2d3260c6b74d3def822acb98733f70a97a79f3fa' }))));
     }
     static get style() { return ZonosVStackStyle0; }
 }, [1, "zonos-v-stack", {