@zonos/elements 1.3.201 → 1.3.202

package/dist/esm/{paypal-6d4667d1.js → paypal-932fd3dd.js}

@@ -1,7 +1,8 @@
-import { z as zonosStore, c as createStore } from './zonosStore-cdabc848.js';
-import { t as trackConversionEvent, F as validateCheckoutSession, f as stripeStore, e as cartStore, z as stripeStoreHandleInventoryCheck, r as translate, x as cartStoreNextStep, k as cartStoreClearCheckoutInterval } from './cart-f79c8021.js';
+import { z as zonosStore, c as createStore } from './zonosStore-d10a829f.js';
+import { t as trackConversionEvent, z as validateCheckoutSession, d as stripeStore, e as cartStore, v as stripeStoreHandleInventoryCheck, r as cartStoreNextStep, j as cartStoreClearCheckoutInterval } from './cart-b7c15b61.js';
+import { t as translate, s as storageStore } from './localization-bf7224aa.js';
 import { h as handleFetch, l as log, b as logError, j as jsonParse } from './handleFetch-621e45bc.js';
-import { t as tinycolor } from './isDarkColor-4c7b2ffc.js';
+import { t as tinycolor } from './isDarkColor-31dd7dff.js';
 
 /*!
  * paypal-js v8.1.0 (2024-06-07T16:55:00.122Z)
@@ -444,7 +445,7 @@ const paypalStoreInitButtons = (props) => {
         log('Paypal is not available');
         return null;
     }
-    const checkoutSessionId = cartStore.checkoutSessionId;
+    const checkoutSessionId = storageStore.checkoutSessionId;
     if (!checkoutSessionId) {
         log('Paypal is not available due to checkoutSessionId is not available');
         return null;

package/dist/esm/zonos-address_11.entry.js

@@ -1,15 +1,17 @@
 import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-a457c60c.js';
-import { e as cartStore, f as stripeStore, t as trackConversionEvent, V as getFallbackDefaultCountryCode, r as translate, l as localizationStore } from './cart-f79c8021.js';
-import { z as zonosStore, d as zonosStoreFontFamily, f as isObject_1 } from './zonosStore-cdabc848.js';
+import { d as stripeStore, t as trackConversionEvent, e as cartStore } from './cart-b7c15b61.js';
+import { n as storageStoreOnChange, s as storageStore, o as getFallbackDefaultCountryCode, t as translate, l as localizationStore } from './localization-bf7224aa.js';
+import { z as zonosStore, d as zonosStoreFontFamily, f as isObject_1 } from './zonosStore-d10a829f.js';
 import { b as logError, l as log, i as isCheckoutMobile } from './handleFetch-621e45bc.js';
 import { s as shouldRenderTaxIdInput, i as isTextContainsNonLatinChars, c as containsNonLatinChars } from './shouldRenderTaxIdInput-8bc112bb.js';
 import { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-50d72254.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-413e97eb.js';
+import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
 import { R as RemoveIcon$2 } from './RemoveIcon-9dc5dd1a.js';
-import { i as isDarkColor } from './isDarkColor-4c7b2ffc.js';
-import { d as debounce_1 } from './debounce-a2121722.js';
+import { i as isDarkColor } from './isDarkColor-31dd7dff.js';
+import { d as debounce_1 } from './debounce-3a9f27a0.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './helpers-2f6955b1.js';
+import './VarianceTest-fef2d958.js';
 
 const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h .zonos--company-name-input.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
 const ZonosAddressStyle0 = zonosAddressCss;
@@ -19,6 +21,7 @@ const ZonosAddress$1 = class {
         registerInstance(this, hostRef);
         this.invalidCharacters = createEvent(this, "invalidCharacters", 7);
         this.taxIdChanged = createEvent(this, "taxIdChanged", 7);
+        this.onStoreCheckoutSessionIdChangedSubscription = () => { };
         /**
          * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
          */
@@ -27,6 +30,14 @@ const ZonosAddress$1 = class {
          * Check if the tracking event is sent
          */
         this.trackingSent = false;
+        this.onStoreCheckoutSessionIdChanged = () => {
+            const onCheckoutSessionIdChange = () => {
+                this.checkoutSessionId = storageStore.checkoutSessionId;
+            };
+            // Trigger it once on init because onChange doesn't get triggered on initial load
+            onCheckoutSessionIdChange();
+            this.onStoreCheckoutSessionIdChangedSubscription = storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
+        };
         this.type = undefined;
         this.titleText = undefined;
         this.defaultAddress = [];
@@ -34,7 +45,7 @@ const ZonosAddress$1 = class {
         this.stripe = window.Zonos.stripe;
         this.isDirtyAddress = false;
         this.isAddressFilled = false;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
+        this.checkoutSessionId = storageStore.checkoutSessionId;
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -63,7 +74,7 @@ const ZonosAddress$1 = class {
     }
     isAddressFilledChanged() {
         // Sometimes address elements is loaded with prefilled data before checkout is loaded, need to not send the event if checkout session id is not available, and send the event after checkout is loaded
-        if (!cartStore.checkoutSessionId) {
+        if (!storageStore.checkoutSessionId) {
             return;
         }
         // Only need to track the event if the shipping address is filled
@@ -71,7 +82,7 @@ const ZonosAddress$1 = class {
             !this.trackingSent &&
             this.type === 'shipping') {
             this.trackingSent = true;
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             void trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_customerInfoFilled',
@@ -243,6 +254,8 @@ const ZonosAddress$1 = class {
         // destroy the stripe element when this component is removed from the DOM, so that we can re-create the new one with previous value
         const stripeElement = this.getStripeAddressInstance().stripeAddressElement;
         stripeElement === null || stripeElement === void 0 ? void 0 : stripeElement.destroy();
+        // cleanup checkout session id subscription
+        this.onStoreCheckoutSessionIdChangedSubscription();
     }
     componentDidLoad() {
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
@@ -251,15 +264,16 @@ const ZonosAddress$1 = class {
                 stripeAddressEventData.value.address.line1.length > 0;
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
+        this.onStoreCheckoutSessionIdChanged();
     }
     render() {
         var _a;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
+        this.checkoutSessionId = storageStore.checkoutSessionId;
         if ((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) {
             this.isAddressFilled = true;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'ebd6b34dfcb486e1746fbc306e2e413d03290d50', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '68e7f0fa37ca7efd4d833b32d4c27cda29521871', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '5e6d4b3798c91def3f3a6ae5ac12f1a2ccca272b', class: "zonos--address-component" })));
+        return (h(Host, { key: '6cb58defa44e55a88bdb8ad3b1b2e96033337fec', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '2708affaeb700f6c256b38285696d3eaffa1d1ea', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '290de47b8579a70f997ead2ab3ada123dfa4d204', class: "zonos--address-component" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -415,9 +429,9 @@ const ZonosAddressSuggestions = class {
         return segments;
     }
     render() {
-        return (h(Host, { key: '88eff73526172a10854d2ae18b5b54afd3fd4b28', class: "zonos--address-suggestions", role: "group", style: {
+        return (h(Host, { key: 'eeb520d24c5cebca1f425c9648a2bdf0269f74c9', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, h("ul", { key: 'f55c95ab39906d2bcb6edc6d5379ec6c70f5277a', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: 'b7ca181e48f18ac7c0d2c8cfc1b05fec6df5827f', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '07577044166b2cbfbec0cf96786266d74dd1c098', class: "powered-by-container" }, h("zonos-text", { key: '3780f4763666ac08cfe7083749b5f781b74e4e66', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: '73c5d1db8a235cae3ebc2af0eba89d91ade8a6a1', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: '6d6058329ced6bae0f04ce4e80da07506f706847', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon$1 }), noBackground: true, onClick: () => {
+            } }, h("ul", { key: 'f7ac29ef14417f8c86dbafcf840204f4c964b3ad', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: '13d34e64d8bd7711268a1f5641d0c868a89b949c', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '00f20bd5568762ee581462826410031273e808da', class: "powered-by-container" }, h("zonos-text", { key: 'fc61a8ec973fc2cdf1e137563617cfed0badbb12', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: '96343fe696ec0d3990ffebaf450306ca91624d04', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: 'e7c6a9e64c8976a3c3a521b0794d2e82c1919ce2', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon$1 }), noBackground: true, onClick: () => {
                 this.localSuggestions = [];
             } }))), this.localSuggestions.map(suggestion => (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
@@ -790,6 +804,7 @@ const ZonosAddress = class {
         registerInstance(this, hostRef);
         this.invalidCharacters = createEvent(this, "invalidCharacters", 7);
         this.addressChange = createEvent(this, "addressChange", 7);
+        this.onStoreCheckoutSessionIdChangedSubscription = () => { };
         /**
          * Whether the suggestion is clicked
          */
@@ -944,6 +959,14 @@ const ZonosAddress = class {
                 stripeStore.customBillingAddressErrors = customErrors;
             }
         };
+        this.onStoreCheckoutSessionIdChanged = () => {
+            const onCheckoutSessionIdChange = () => {
+                this.checkoutSessionId = storageStore.checkoutSessionId;
+            };
+            // Trigger it once on init because onChange doesn't get triggered on initial load
+            onCheckoutSessionIdChange();
+            this.onStoreCheckoutSessionIdChangedSubscription = storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
+        };
         this.type = undefined;
         this.titleText = undefined;
         this.defaultAddress = [];
@@ -974,7 +997,7 @@ const ZonosAddress = class {
         this.lastNameError = '';
         this.isFirstInitialization = true;
         this.addressService = null;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
+        this.checkoutSessionId = storageStore.checkoutSessionId;
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -1003,7 +1026,7 @@ const ZonosAddress = class {
     }
     isAddressFilledChanged() {
         // Sometimes address elements is loaded with prefilled data before checkout is loaded, need to not send the event if checkout session id is not available, and send the event after checkout is loaded
-        if (!cartStore.checkoutSessionId) {
+        if (!storageStore.checkoutSessionId) {
             return;
         }
         // Only need to track the event if the shipping address is filled
@@ -1011,7 +1034,7 @@ const ZonosAddress = class {
             !this.trackingSent &&
             this.type === 'shipping') {
             this.trackingSent = true;
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             void trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_customerInfoFilled',
@@ -1533,6 +1556,8 @@ const ZonosAddress = class {
         // unsubscribe from address suggestions when this component is removed from the DOM
         (_a = this.onAddressSuggestionsUnsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
         (_b = this.onAddressSelectedUnsubscribe) === null || _b === void 0 ? void 0 : _b.call(this);
+        // cleanup checkout session id subscription
+        this.onStoreCheckoutSessionIdChangedSubscription();
     }
     componentWillLoad() {
         if (zonosStore.checkoutAddressService) {
@@ -1555,12 +1580,13 @@ const ZonosAddress = class {
         // @Watch doesn't get trigger on initial load
         this.initAddressSuggestions();
         this.isFirstInitialization = false;
+        // subscribe to checkout session id changes from storage store
+        this.onStoreCheckoutSessionIdChanged();
     }
     render() {
         var _a;
         this.shippingZones = localizationStore.shippingZoneCountries;
         this.addressService = zonosStore.checkoutAddressService;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
         if ((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) {
             this.isAddressFilled = true;
         }
@@ -1569,10 +1595,10 @@ const ZonosAddress = class {
             this.country = localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'bb1f01c899ecdc1ed52eb8be7a680fdbb2ce9a7b', class: classes([
+        return (h(Host, { key: '7a766af62acc47886e716ac3c52c1457eae04545', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: 'f6ad6d23ec141fe192908b639802f69ad565958e', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: '224a78f8d1e02e2b0d7c95eafe9a1d4354fb5f73', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7836,24 +7862,24 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (h(Host, { key: 'c7ca4076eb70b166979d21074d068912af1496c5', class: classes([
+        return (h(Host, { key: '0d4501947787cbafe38acb60fb5ee7519b6d1c73', class: classes([
                 'zonos--phone-input zonos--elements',
                 isDark && 'dark',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '5460d79c86d34daf94538f063274c45ae3be2239', class: classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: 'c3e0f9655a39a5bb3d838634754be2af60a24a10', class: classes([
                 'zonos--label-wrapper',
                 this.disabled && 'disabled',
                 this.isFocused && 'focused',
                 hasContent && 'has-content',
                 this.error && 'has-error',
                 this.inputLabel && 'has-label',
-            ]) }, h("select", { key: '290d89088b9a800b31ed19cfe3de6831322a3f5a', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, h("select", { key: '1a58471117f6748d511498e016814bd907e8775f', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
             var _a;
             return (h("option", { key: option.countryCode, selected: option.countryCode === ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode), value: option.countryCode }, option.displayName, " (+", option.phoneCode, ")"));
-        })), h("div", { key: 'b0271d3453869ed79a36d62f5f6bacb22a509b46', class: "zonos--input-group" }, h("div", { key: '49486c915fa2f65878a6f8ab73c48997e4ba1461', class: "zonos--select-wrapper" }, h("div", { key: '63412e8077e062efef5f42c3a77e583ade435b53', class: "zonos--country-select" }, h("div", { key: '5c073598dfeaa0c8de68f07b1a7789f4a56a24c8', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '8a32922d75343005fde7446736746cd531ff63f8', class: "zonos--country-select-selected" }, h("div", { key: '859cdbc4c1879c38f0c848ff42b38bc5492d3e96', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: '9167a7c586e2d693bfdcad7773df60a324600be7', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: 'b39dcadb22202d866fc8e1217bbe2e17704e2300', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: '4b0a4ce8c94e6e3125cfde55542b38efb6a8a787', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '25322152ca9550a8b2e667f8f993c38a972aa9ce', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), h("div", { key: 'c6a93ba0656e09a154c3d91327f3573e0288234b', class: classes([
+        })), h("div", { key: '9c785521e095aae0cfc8af3ea90e4924c97202ac', class: "zonos--input-group" }, h("div", { key: 'b7fdd9db255ce33f3b6d3a982162c8286963324c', class: "zonos--select-wrapper" }, h("div", { key: '5d378436580df53793b1508af5e34bd43ba33ddf', class: "zonos--country-select" }, h("div", { key: '94628459db88e355b1c62b74cfcb48ec03022d4e', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '96b332ed9c62413887f96f38ce26cb05b81a3132', class: "zonos--country-select-selected" }, h("div", { key: 'b9e5bda55328f57e15afd349789233e3c28d2bf9', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: 'fc595df21c09553dc8ffb7fe79c3043831e65298', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: '6c792c383acf3ccac02be6b954a7eb18bcdda817', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: '970b9f6e18152e04375a248669fd7314088bcd2e', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '1da5919014eee0e34b60d1df08e83d44ad20d5c2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), h("div", { key: '7f0c215ddfb59c8e3c4413e44941a477a8adc6d6', class: classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, h("input", Object.assign({ key: '49246ff464685feaa9414d1e7b36f55b82fff564' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: '653d278b7ffc634bc7892d54c8fcab7b7626f80e', class: "zonos--floated-label" }, h("label", { key: 'c637ddca7164396d57e8a5eaf98b0e523ee27258', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: 'dcc70c068fef73e804eba1f134673168a0bbaf90', textColor: "red-600" }, this.error))));
+            ]) }, h("input", Object.assign({ key: 'e3ce0b598baf78452eddaab38c80bb4f0c548a5a' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: 'a108f2796571f9d8a4201d1906b2381b89d14bc2', class: "zonos--floated-label" }, h("label", { key: '50d308311270bbd8635bb7848495ee4aaa2a0cac', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '27b0233f9241ce68348b2efd1c1b525d083363e5', textColor: "red-600" }, this.error))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7944,14 +7970,14 @@ const ZonosStripeSelect = class {
         const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
         const hasContent = this.internalValue || this.selectPlaceholder;
         const showClearButton = this.isClearable && this.internalValue && !this.isDisabled;
-        return (h(Host, { key: 'f5b178d5cbd48e9aff8701764a1fde4de03a6569', class: classes([
+        return (h(Host, { key: '18d7ba03b9136af8614874b13b9ac3ce85f7c0d0', class: classes([
                 'zonos--select zonos--elements',
                 isDark && 'dark',
                 this.isError && 'has-error',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: 'd7b3b8148777aa61f15c1489f44871589aadf00f', class: classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '88b8d885c11bc0776bd0c25b5f0a08f91cfb7c72', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("select", Object.assign({ key: '629f7437fa445634db0589f217acb59b59e558d3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("select", Object.assign({ key: 'd972a6a7b91bb51f2d5ed291a686d521c1bf82a3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
                 'zonos--floated-select',
                 !!this.selectLabel && 'has-label',
                 hasContent && 'has-content',
@@ -7961,9 +7987,9 @@ const ZonosStripeSelect = class {
                 this.selectChange.emit(select.value);
                 this.selectedValue = select.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, required: this.required }), h("option", { key: '9b50f769fc79f136b7b77916edd71acdcda199b7', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translate('Select')), this.internalOptions.map(option => (h("option", { key: option.value, selected: this.internalValue === option.value ||
+            }, required: this.required }), h("option", { key: 'b67730b2c3e77ba60221320519f55e67d7d2b127', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translate('Select')), this.internalOptions.map(option => (h("option", { key: option.value, selected: this.internalValue === option.value ||
                 // Sometimes google returns the label not the code for some countries
-                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: '0ff44083dee7939d6f7bc2372990ccbef6066fed', class: "zonos--floated-label" }, h("label", { key: '8f9965fa3de61b705fa95e7ddc68013a3027464d', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '09aa1851295b86e30488ca69720d58d1246ad67c', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: '1db5be171f74849cedc3a8804bac23fdfa43aaa5', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: '2ca7e2da61eef16d6feb74c4d6a6198f1762ad16', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: 'c0050a27a619cb9b844282be841a320648f9d008', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: 'c0a3eb551533c4cb24f92ad6fd7a4b44cd24044c', textColor: "red-600" }, this.error))));
+                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: '088c104006e983b5ec1680067af32c0479dde13b', class: "zonos--floated-label" }, h("label", { key: 'faf3bf337253d205265b181d65d8f8024ffd6124', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '7ce8d36b84b08df139877cd2e12a26b8157ce83b', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: 'b0a1af08afd9792ba4e7989361219c5cf7d5d8bc', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: '50ae86d5e9d9722b5546997f9fd52a997cac3add', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: '30034030f97f7ed6b3027cbc5220c73cde4bbbc2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: 'cd02da8b1a1cb81581ac7285af84193000692eaa', textColor: "red-600" }, this.error))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/zonos-badge.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-cdabc848.js';
+import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
 import { c as classes } from './classes-0d95c529.js';
+import './VarianceTest-fef2d958.js';
 
 const RemoveLineIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8282 5.17184C11.0235 5.3671 11.0235 5.68368 10.8282 5.87894L8.70688 8.00026L10.8282 10.1216C11.0235 10.3168 11.0235 10.6334 10.8282 10.8287C10.6329 11.024 10.3164 11.024 10.1211 10.8287L7.99978 8.70737L5.87846 10.8287C5.68319 11.024 5.36661 11.024 5.17135 10.8287C4.97609 10.6334 4.97609 10.3168 5.17135 10.1216L7.29267 8.00026L5.17135 5.87894C4.97609 5.68368 4.97609 5.3671 5.17135 5.17184C5.36661 4.97658 5.68319 4.97658 5.87846 5.17184L7.99978 7.29316L10.1211 5.17184C10.3164 4.97658 10.6329 4.97658 10.8282 5.17184Z" fill="var(--zonos-elements-gray-800)"/>

package/dist/esm/zonos-banner.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-cdabc848.js';
+import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
 import { c as classes } from './classes-0d95c529.js';
+import './VarianceTest-fef2d958.js';
 
 const zonosBannerCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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{border-radius:var(--zonos-elements-radius-10);padding:16px;background:var(--zonos-elements-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:0px;grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:4px}:host(.info){background-color:var(--zonos-elements-blue-100);border:1px solid var(--zonos-elements-blue-200)}:host(.success){background-color:var(--zonos-elements-green-100);border:1px solid var(--zonos-elements-green-200)}:host(.error){background-color:var(--zonos-elements-red-100);border:1px solid var(--zonos-elements-red-200)}:host(.warning){background-color:var(--zonos-elements-orange-100);border:1px solid var(--zonos-elements-orange-200)}";
 const ZonosBannerStyle0 = zonosBannerCss;

package/dist/esm/zonos-button_3.entry.js

@@ -1,11 +1,12 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-a457c60c.js';
-import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-cdabc848.js';
+import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './helpers-2f6955b1.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-413e97eb.js';
+import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
-import { i as isDarkColor } from './isDarkColor-4c7b2ffc.js';
+import { i as isDarkColor } from './isDarkColor-31dd7dff.js';
 import { s as styles } from './styles-6fc2fad9.js';
+import './VarianceTest-fef2d958.js';
 
 /**
  * Get theme for button text based on background color

package/dist/esm/zonos-card.entry.js

@@ -1,7 +1,8 @@
 import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-cdabc848.js';
+import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-413e97eb.js';
+import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
+import './VarianceTest-fef2d958.js';
 
 const zonosCardCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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 .styled-card{border:var(--zonos-elements-border);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-6));padding:var(--spacing, 24px);text-align:left;background-color:var(--zonos--background-color);overflow:hidden}:host .styled-card hr{margin-left:calc(var(--spacing, 24px) * -1);margin-right:calc(var(--spacing, 24px) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, 24px);border-bottom:var(--zonos-elements-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);border-top:var(--zonos-elements-border);background:var(--zonos-elements-surface-color-secondary);margin-top:var(--spacing, 24px);border-bottom-left-radius:var(--zonos-elements-radius-8);border-bottom-right-radius:var(--zonos-elements-radius-8);height:var(--footerHeight)}";
 const ZonosCardStyle0 = zonosCardCss;

package/dist/esm/{zonos-cart-items_13.entry.js → zonos-cart-items_14.entry.js}

@@ -1,16 +1,18 @@
 import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-a457c60c.js';
-import { e as cartStore, E as currencyFormat, r as translate, M as cartStoreHasOneEligibleItem, N as stripeStoreApplyPromoCode, O as stripeStoreRemovePromoCode, f as stripeStore, C as stripeStoreReset, d as stripeStoreRetrievePayment, t as trackConversionEvent, P as stripeStoreResetPromoCode, Q as stripeStoreMessageBasedOnStatus, l as localizationStore, x as cartStoreNextStep, R as stripeStoreTranslateAddressToLatin, S as cartStoreUpdateSelectedShippingOption, T as cartStoreGetShippingTransitInfo, U as sortServiceLevelOptionsByAmount } from './cart-f79c8021.js';
+import { e as cartStore, A as cartStoreHasOneEligibleItem, B as stripeStoreApplyPromoCode, C as stripeStoreRemovePromoCode, d as stripeStore, y as stripeStoreReset, c as stripeStoreRetrievePayment, t as trackConversionEvent, D as stripeStoreResetPromoCode, E as stripeStoreMessageBasedOnStatus, r as cartStoreNextStep, F as stripeStoreTranslateAddressToLatin, G as cartStoreUpdateSelectedShippingOption, H as cartStoreGetShippingTransitInfo, I as sortServiceLevelOptionsByAmount } from './cart-b7c15b61.js';
+import { d as currencyFormat, t as translate, s as storageStore, l as localizationStore } from './localization-bf7224aa.js';
 import { c as classes } from './classes-0d95c529.js';
-import { s as submitGtag, c as paypalStoreReset, b as paypalStore, i as isContrastColor } from './paypal-6d4667d1.js';
-import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-cdabc848.js';
+import { s as submitGtag, c as paypalStoreReset, b as paypalStore, i as isContrastColor } from './paypal-932fd3dd.js';
+import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
 import { h as handleFetch, l as log, s as sendErrorLog, j as jsonParse, g as getIsTestMode, d as allLogs, i as isCheckoutMobile, b as logError, a as getIsStagingMode } from './handleFetch-621e45bc.js';
 import { c as createCustomEvent } from './createCustomEvent-58159025.js';
-import { g as getBorderRadius } from './getBorderRadius-413e97eb.js';
+import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
-import { i as isDarkColor, t as tinycolor } from './isDarkColor-4c7b2ffc.js';
+import { i as isDarkColor, t as tinycolor } from './isDarkColor-31dd7dff.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
 import { s as shouldRenderTaxIdInput, c as containsNonLatinChars } from './shouldRenderTaxIdInput-8bc112bb.js';
 import { e as euCountryCodes } from './TaxId-50d72254.js';
+import './VarianceTest-fef2d958.js';
 
 const getDisplayCurrency = () => {
     var _a, _b;
@@ -1276,7 +1278,7 @@ const ZonosCheckoutFinish = class {
         this.closeClick = createEvent(this, "closeClick", 7);
         this.pullOrder = async () => {
             var _a, _b;
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             const searchParams = new URLSearchParams();
             searchParams.set('checkoutSessionId', checkoutSessionId || '');
             const { baseUrl, errors, json } = await handleFetch(`/api/zonos-elements/get-order?${searchParams.toString()}`);
@@ -1299,7 +1301,7 @@ const ZonosCheckoutFinish = class {
         this.redirectToUrl = (url) => {
             // reset store and checkout session id before redirecting
             stripeStoreReset();
-            cartStore.checkoutSessionId = null;
+            storageStore.checkoutSessionId = null;
             // If it is iframed, redirect the parent window
             if (window.parent) {
                 window.parent.location.href = url;
@@ -1405,7 +1407,7 @@ const ZonosCheckoutFinish = class {
             const { baseUrl, order } = await this.pullOrder();
             const { isLegacyCheckout } = window.Zonos;
             const foundLegacyOrderNumber = !!((_b = (_a = order === null || order === void 0 ? void 0 : order.references) === null || _a === void 0 ? void 0 : _a.find(entry => (entry === null || entry === void 0 ? void 0 : entry.key) === 'zonosOrderNumber')) === null || _b === void 0 ? void 0 : _b.value);
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             const maxRetries = parseFloat(new URLSearchParams(window.location.search).get('maxPollingRetries') ||
                 '0') || MAX_RETRIES;
             log(`=== Polling order (${attempts} attemps)`, 'info');
@@ -1426,7 +1428,7 @@ const ZonosCheckoutFinish = class {
                         ],
                         metadata: {
                             allLogs,
-                            checkoutSessionId: cartStore.checkoutSessionId || '',
+                            checkoutSessionId: storageStore.checkoutSessionId || '',
                             orderId: order.id,
                             storeId: zonosStore.storeId,
                         },
@@ -1440,7 +1442,7 @@ const ZonosCheckoutFinish = class {
                         errors: [`Order found after ${attempts} attempts`],
                         metadata: {
                             allLogs,
-                            checkoutSessionId: cartStore.checkoutSessionId || '',
+                            checkoutSessionId: storageStore.checkoutSessionId || '',
                             orderId: order.id,
                             storeId: zonosStore.storeId,
                         },
@@ -1459,7 +1461,7 @@ const ZonosCheckoutFinish = class {
                     errors: [`Order not found after ${maxRetries} attempts`],
                     metadata: {
                         allLogs,
-                        checkoutSessionId: cartStore.checkoutSessionId || '',
+                        checkoutSessionId: storageStore.checkoutSessionId || '',
                         storeId: zonosStore.storeId,
                     },
                 });
@@ -1508,7 +1510,7 @@ const ZonosCheckoutFinish = class {
                     void sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
-                            `Payment intent "${paymentIntentId}" status: ${status} - checkout session: ${cartStore.checkoutSessionId}`,
+                            `Payment intent "${paymentIntentId}" status: ${status} - checkout session: ${storageStore.checkoutSessionId}`,
                         ],
                         metadata: {
                             allLogs,
@@ -1520,7 +1522,7 @@ const ZonosCheckoutFinish = class {
                     // Save new order info in case the user reloads before we get order info
                     this.saveOrderIdForDuplicationIssue();
                     submitGtag('zonos-checkout-success');
-                    const checkoutSessionId = cartStore.checkoutSessionId;
+                    const checkoutSessionId = storageStore.checkoutSessionId;
                     void trackConversionEvent({
                         checkoutSessionId,
                         eventName: 'checkout_orderCompleted',
@@ -1538,7 +1540,7 @@ const ZonosCheckoutFinish = class {
             // reset promo when checkout is finished
             stripeStoreResetPromoCode();
             stripeStoreReset();
-            cartStore.checkoutSessionId = null;
+            storageStore.checkoutSessionId = null;
         };
         this.checkStagingOrderStatus = async () => {
             this.notificationType = 'success';
@@ -1552,7 +1554,7 @@ const ZonosCheckoutFinish = class {
             stripeStoreResetPromoCode();
             stripeStoreReset();
             paypalStoreReset();
-            cartStore.checkoutSessionId = null;
+            storageStore.checkoutSessionId = null;
         };
         this.checkPaypalPaymentStatus = async () => {
             // render error message if there's an error
@@ -1567,7 +1569,7 @@ const ZonosCheckoutFinish = class {
             this.isLoading = false;
             if (paypalStore.orderIdCreated) {
                 submitGtag('zonos-checkout-success');
-                const checkoutSessionId = cartStore.checkoutSessionId;
+                const checkoutSessionId = storageStore.checkoutSessionId;
                 void trackConversionEvent({
                     checkoutSessionId,
                     eventName: 'checkout_orderCompleted',
@@ -1585,7 +1587,7 @@ const ZonosCheckoutFinish = class {
             stripeStoreResetPromoCode();
             stripeStoreReset();
             paypalStoreReset();
-            cartStore.checkoutSessionId = null;
+            storageStore.checkoutSessionId = null;
         };
         this.closeClickHandler = () => {
             this.closeClick.emit();
@@ -1596,7 +1598,7 @@ const ZonosCheckoutFinish = class {
             const placedOrderTime = {
                 cartId: window.Zonos.cartId || null,
                 checkoutSessionId: (existingPlacedOrderInfo === null || existingPlacedOrderInfo === void 0 ? void 0 : existingPlacedOrderInfo.checkoutSessionId) ||
-                    cartStore.checkoutSessionId ||
+                    storageStore.checkoutSessionId ||
                     '',
                 orderId: ((_a = this.order) === null || _a === void 0 ? void 0 : _a.id) || null,
                 time: (existingPlacedOrderInfo === null || existingPlacedOrderInfo === void 0 ? void 0 : existingPlacedOrderInfo.time) || Date.now(),
@@ -1638,11 +1640,11 @@ const ZonosCheckoutFinish = class {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: 'e8ae24f1668c71f405bf18de82e7703928b02a78', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '971e0f8daa53ce2f99b2d1d06088fa6a9a37686c', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: '6e92d1870eac3f644c3f26d85e3f0108f3cca097', class: "zonos--finish-details" }, h("div", { key: '6979d24f7570631baccdf844f83a85b6da781da7', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '2b422f086008ca3a9c9634e5cb34a230de51e890', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '9f4207e526d03fae6207eb7124358c418413c378', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: 'f6df9c924b93f9149db88a2963c63799549bdc49',
+            } }, !this.isLoading && (h("div", { key: '284fb3adcb71840ad3f5cd94e169c723e29e3c42', class: "zonos--finish-details" }, h("div", { key: '485b63dae4714360af0ee65314e65de8b54ab311', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: 'c73f31ed5a9690af97e1884d0bbfff93734f266d', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '126118933ea6863384d98bf8f013a4130ab411cd', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '95bdb39e56a16004cc3896531458d0e86fa38bb4',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => {
@@ -1654,9 +1656,9 @@ const ZonosCheckoutFinish = class {
                 }
                 this.closeClickHandler();
             }, size: "md", variant: "primary" }, translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '8ec8365d0f3a541530e85318744fbb4c85dc385e', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '325fd258d5d71668ba190a24ddc0e231b4b75208', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (h("div", { key: '2c91cb3d40eb585513656bcc09dc3144d854af5c', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '883827fbe550c0d9132c27e4a5b984d8d45aa2bc', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'aa3ebf41507ce95dd02778a4b55863b0e880af14', onClick: () => {
+            this.notificationType === 'success' && (h("div", { key: '00116d9f6380fa1f4547eb0cb6d229aca380bffb', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '5c5334198095729ae8e07e4868b6b248f0750ac3', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '76fb0725306246ac9b9c88a41bca1937d65e3f01', onClick: () => {
                 const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
                 this.redirectToUrl(isZonosDashboard
                     ? '/orders/all'
@@ -1725,7 +1727,7 @@ const placeTestOrder = async () => {
     var _a, _b;
     const shipToPartyId = (_a = cartStore.partiesData.find(party => party.type === 'DESTINATION')) === null || _a === void 0 ? void 0 : _a.id;
     const billToPartyId = (_b = cartStore.partiesData.find(party => party.type === 'PAYOR')) === null || _b === void 0 ? void 0 : _b.id;
-    const checkoutSessionId = cartStore.checkoutSessionId;
+    const checkoutSessionId = storageStore.checkoutSessionId;
     if (!checkoutSessionId || !billToPartyId || !shipToPartyId) {
         logError('Missing required data', {
             billToPartyId,
@@ -2489,11 +2491,11 @@ const ZonosCustomerInfo = class {
                 !!((_b = (_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.countryCustomAddressEnabled) === null || _b === void 0 ? void 0 : _b.includes(localizationStore.selectedCountryCode));
             // Should only record the form type used once
             if (type === 'shipping' &&
-                cartStore.checkoutSessionId &&
+                storageStore.checkoutSessionId &&
                 !this.recordedFormTypeUsed) {
                 void handleFetch('/api/zonos-elements/update-checkout-session-metadata', {
                     body: {
-                        id: cartStore.checkoutSessionId,
+                        id: storageStore.checkoutSessionId,
                         metadata: [
                             {
                                 key: 'ZONOS_FORM_TYPE_USING',
@@ -2614,6 +2616,22 @@ const ZonosCustomerInfo = class {
 };
 ZonosCustomerInfo.style = ZonosCustomerInfoStyle0;
 
+const zonosLoadingOverlayCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:fixed;inset:0;z-index:2147483010;pointer-events:none;display:block}:host .zonos--loading-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:var(--zonos-elements-backdrop-color);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s ease, visibility 0.3s ease;transition:opacity 0.3s ease, visibility 0.3s ease;z-index:2147483010}:host(.zonos--open){pointer-events:auto}:host(.zonos--open) .zonos--loading-overlay{opacity:0.65;visibility:visible}";
+const ZonosLoadingOverlayStyle0 = zonosLoadingOverlayCss;
+
+const ZonosLoadingOverlay = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.open = false;
+        this.spinnerColor = undefined;
+        this.size = 40;
+    }
+    render() {
+        return (h(Host, { key: 'eff20c3fe4c4a998748ac07567cc5449efc398cd', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: '1b37bfc1a150720e0f4f84075ac661e5395aee3b', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: '42ac91e723802b23897b6e5cd99e0aea7d964da5', size: this.size, spinnerColor: this.spinnerColor }))));
+    }
+};
+ZonosLoadingOverlay.style = ZonosLoadingOverlayStyle0;
+
 const zonosRestStateCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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{height:100%;width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;gap:20px}:host .zonos--restState-image{width:124px;height:124px;margin-bottom:15px}:host .content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:8px}";
 const ZonosRestStateStyle0 = zonosRestStateCss;
 
@@ -2631,11 +2649,11 @@ const ZonosRestState = class {
     }
     render() {
         const imageUrl = this.getImageRestState();
-        return (h(Host, { key: 'a06221e04e00bf733a37d00fdff2643714208eca', class: classes(['zonos--elements zonos--restState']), style: {
+        return (h(Host, { key: '754bdcff113a9ec5351d1053ddaea5e542111bbc', class: classes(['zonos--elements zonos--restState']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'c889f042cb289876f3e6e002a5527a239ad69791', class: "zonos--restState-image" }, h("img", { key: '21b30e32ac86bd0f5e9f9dded3bcd4f3295c9637', alt: this.restStateType, onError: () => {
+            } }, h("div", { key: '3037acffd2d7da9bac11ada7cd4e06e2ae976f72', class: "zonos--restState-image" }, h("img", { key: 'd462d07f452caaaf87af20e1b2aad6ac45b43107', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), h("div", { key: 'a28cfe4511fb4aa0f0c79b2e6cfaa78b6cbdb2a8', class: "content" }, h("zonos-text", { key: '20aa2a10a7617c96f99a6f653a5c1a8a0de85dbe', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '595b823c2e9c3270f510388b4ccbf544581453a9', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '56a2514a6d170849ed87d1ab680e582a0f6e4b24', class: "action" }, h("slot", { key: 'b0e8f4dd2ff05929f4ffe7461e5dbe9aa4b5bfc5' }))));
+            }, src: imageUrl })), h("div", { key: '9acf78ef8358ad75df01bbbb1ed52b680f896255', class: "content" }, h("zonos-text", { key: '8310474f006a1fc1dcf96bac09c770572b20590a', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '623dc98d57eaae5fb1059c658391300aa41a13fb', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: 'f69613147698a147447a0aac330ad1c67739fed0', class: "action" }, h("slot", { key: '823ff6075ecac4598299c29ab2e44a6d5fb6a5d8' }))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -2765,7 +2783,7 @@ const ZonosShipping = class {
             }
             // submit google tag when the form is complete
             submitGtag('zonos-checkout-shipping-info');
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             void trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_shippingInfoCompleted',
@@ -2914,4 +2932,4 @@ const ZonosShipping = class {
 };
 ZonosShipping.style = ZonosShippingStyle0;
 
-export { ZonosCartItems as zonos_cart_items, ZonosCartRestrictedItems as zonos_cart_restricted_items, ZonosCartSubtotal as zonos_cart_subtotal, ZonosCheckoutFinish as zonos_checkout_finish, ZonosCheckoutFooter as zonos_checkout_footer, ZonosCheckoutPayment as zonos_checkout_payment, ZonosCheckoutProgressTabs as zonos_checkout_progress_tabs, ZonosConfirmDialog as zonos_confirm_dialog, ZonosCurrencyToggle as zonos_currency_toggle, ZonosCustomerInfo as zonos_customer_info, ZonosRestState as zonos_rest_state, ZonosReview as zonos_review, ZonosShipping as zonos_shipping };
+export { ZonosCartItems as zonos_cart_items, ZonosCartRestrictedItems as zonos_cart_restricted_items, ZonosCartSubtotal as zonos_cart_subtotal, ZonosCheckoutFinish as zonos_checkout_finish, ZonosCheckoutFooter as zonos_checkout_footer, ZonosCheckoutPayment as zonos_checkout_payment, ZonosCheckoutProgressTabs as zonos_checkout_progress_tabs, ZonosConfirmDialog as zonos_confirm_dialog, ZonosCurrencyToggle as zonos_currency_toggle, ZonosCustomerInfo as zonos_customer_info, ZonosLoadingOverlay as zonos_loading_overlay, ZonosRestState as zonos_rest_state, ZonosReview as zonos_review, ZonosShipping as zonos_shipping };