@zonos/elements 1.3.6 → 1.3.7-alpha.1

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 { h as handleFetch, l as logError, a as localizationStore, i as isValidSelector, t as translate, g as getZCountryUrlParam, s as setZCountryUrlParam, b as log, f as currencyDisplay, j as currencyConvertAndFormat, k as currencyConvert, m as currencyFormat } from './localization.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 { c as localizationStoreUpdateSelectedLocale, t as translate, a as localizationStore } from './localization.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

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as cartStore } from './stripe.js';
-import { t as translate } from './localization.js';
+import { t as translate, c as cartStore } from './stripe.js';
 import { z as zonosStore } from './zonosStore.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
 import { c as classes } from './classes.js';
@@ -36,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) {
@@ -51,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,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as cartStore, m as cartStoreUpdateSelectedShippingOption, n as cartStoreGetShippingTransitInfo } from './stripe.js';
-import { t as translate } from './localization.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';
@@ -9,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 {
@@ -47,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", {

package/dist/components/zonosStore.js

@@ -2821,6 +2821,7 @@ const { reset, state: zonosStore } = createStore(() => ({
         restrictionBehavior: 'DISABLED',
     },
     loadedConfig: false,
+    organizationId: '',
     organizationName: '',
     sourceCurrency: 'USD',
     storeId: null,
@@ -2833,7 +2834,7 @@ let savedZonosSettings = null;
  * Init setting from zonos setting
  */
 const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     reset();
     if (zonosSettings) {
         // save zonos settings to be used later
@@ -2841,16 +2842,17 @@ const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
     }
     zonosStore.appearance = mergeConfig(zonosStore.appearance, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.appearanceSettings) ||
         (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.appearanceSettings) ||
-        null, overrideSettings.appearance);
+        null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.appearance);
     zonosStore.checkoutSettings = mergeConfig(zonosStore.checkoutSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.checkoutSettings) ||
         (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.checkoutSettings) ||
-        null, overrideSettings.checkoutSettings);
-    zonosStore.helloSettings = mergeConfig(zonosStore.helloSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.helloSettings) || (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.helloSettings) || null, overrideSettings.helloSettings);
+        null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.checkoutSettings);
+    zonosStore.helloSettings = mergeConfig(zonosStore.helloSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.helloSettings) || (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.helloSettings) || null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.helloSettings);
     // set flag to true to indicate that config is ready
     zonosStore.loadedConfig = true;
-    zonosStore.organizationName = ((_a = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _a === void 0 ? void 0 : _a.name) || '';
-    zonosStore.storeId = ((_c = (_b = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _b === void 0 ? void 0 : _b.references) === null || _c === void 0 ? void 0 : _c.storeId) || null;
-    zonosStore.currencyConverter = overrideSettings.currencyConverter;
+    zonosStore.organizationId = ((_a = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _a === void 0 ? void 0 : _a.id) || '';
+    zonosStore.organizationName = ((_b = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _b === void 0 ? void 0 : _b.name) || '';
+    zonosStore.storeId = ((_d = (_c = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _c === void 0 ? void 0 : _c.references) === null || _d === void 0 ? void 0 : _d.storeId) || null;
+    zonosStore.currencyConverter = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.currencyConverter;
 };
 const zonosStoreFontFamily = () => {
     const fontFamily = zonosStore.appearance.fontFamily || 'Inter';