@zonos/elements 1.3.282 → 1.3.284

package/dist/cjs/zonos-address-completion-dialog_7.cjs.entry.js

@@ -3,22 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const localization = require('./localization-491121ad.js');
-const zonosStore = require('./zonosStore-fee716c9.js');
-const getMissingRequiredShippingFields = require('./getMissingRequiredShippingFields-7cd21100.js');
+const localization = require('./localization-fb2ece37.js');
+const zonosStore = require('./zonosStore-0af0b937.js');
+const getMissingRequiredShippingFields = require('./getMissingRequiredShippingFields-124b3f20.js');
 const classes = require('./classes-b7918f56.js');
-const cart = require('./cart-dc31b242.js');
+const cart = require('./cart-94908542.js');
 const RemoveIcon$1 = require('./RemoveIcon-081ac073.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
-const getBorderRadius = require('./getBorderRadius-4da24d7c.js');
-const throttle = require('./throttle-34f7abf1.js');
+const getBorderRadius = require('./getBorderRadius-97fd5e02.js');
+const throttle = require('./throttle-366c204b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-7d19556c.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const TaxId = require('./TaxId-cd9d490e.js');
 const helpers = require('./helpers-5bdbb68c.js');
-const isDarkColor = require('./isDarkColor-ebc74b4d.js');
-require('./debounce-9a712c79.js');
+const isDarkColor = require('./isDarkColor-a6e6fd5e.js');
+require('./debounce-7ca3c878.js');
 require('./ShortAddressCode-bec338b0.js');
 
 const zonosAddressCompletionDialogCss = ":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 .zonos--body{padding:0 24px;position:relative}:host .zonos--dialog-header{margin-bottom:24px;position:-webkit-sticky;position:sticky;padding-top:24px;top:0;z-index:11;background:var(--zonos-elements-gray-0)}:host .zonos--dialog-title{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;margin-bottom:12px}:host .zonos--group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-bottom:5px;gap:20px;-ms-scroll-chaining:chained;overscroll-behavior:auto}:host .zonos--selected-address{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:8px}:host .zonos--completion-fields{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:16px}:host .zonos--completion-name-row{display:-ms-flexbox;display:flex;gap:8px}:host .zonos--completion-name-row zonos-input{-ms-flex:1;flex:1}:host .zonos--group-btn{position:-webkit-sticky;position:sticky;padding:24px 0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:end;background:var(--zonos-elements-gray-0);z-index:11}:host .zonos--group-btn .zonos--button-wrapper{display:-ms-flexbox;display:flex;gap:8px}:host(.mobile) .zonos--completion-name-row{-ms-flex-direction:column;flex-direction:column}:host(.mobile) .zonos--button-wrapper{-ms-flex-direction:column;flex-direction:column;width:100%}:host(.mobile) .zonos--button-wrapper zonos-button{width:100%}:host(.mobile) .zonos--button-wrapper .zonos--cancel-btn{-ms-flex-order:2;order:2}:host(.mobile) .zonos--button-wrapper .zonos--submit-btn{-ms-flex-order:1;order:1}";
@@ -272,9 +272,9 @@ const ZonosAddressSuggestions = class {
         return segments;
     }
     render() {
-        return (index.h(index.Host, { key: '20e095515d18016bd1f538bd345ed58aafe8518f', class: "zonos--address-suggestions", role: "group", style: {
+        return (index.h(index.Host, { key: '9de4179f1bd0057ac71d6b9ed646c034035382f7', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius(),
-            } }, index.h("ul", { key: 'f43e0820d29fc5ef96ab42402e370dc6ce381e66', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (index.h("li", { key: 'd8ff4f7b53ea5fac8f42f1c13b2255ca2ea5d5e8', "aria-selected": false, class: "powered-by option", role: "option" }, index.h("div", { key: '2431de3e4e5241e5d74f552051a5d3d4954624a5', class: "powered-by-container" }, index.h("zonos-text", { key: '48de6d435ffef45f60ebb4ef6c4b2eaf5bdee821', type: "caption" }, "Suggestions powered by"), index.h("zonos-text", { key: 'b0e8f2986d4f85daa2fd53b7ea812d296d28a164', type: "semiBoldLabel" }, "Google")), index.h("zonos-button", { key: 'e62245b99bcdc192a4ee98511c8a4a0efad6ea92', "aria-label": "Clear suggestions", icon: index.h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => {
+            } }, index.h("ul", { key: '62fa5ed92fafcdd641f9a7eb36e36e62309c9f52', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (index.h("li", { key: '27c61b5693720d0b33a75385841476787f92b884', "aria-selected": false, class: "powered-by option", role: "option" }, index.h("div", { key: 'fea9f2e8f65cd50fdf28fc45e18beb8976320f0d', class: "powered-by-container" }, index.h("zonos-text", { key: '1fec46f543e3673433b6924f7dca1cbd84e0ef16', type: "caption" }, "Suggestions powered by"), index.h("zonos-text", { key: '7b3fd93c18d4320522d61e07278f5388d14c8bbb', type: "semiBoldLabel" }, "Google")), index.h("zonos-button", { key: '61a8362ab0514a78dd71eaa9bd638dc8b50e2a9c', "aria-label": "Clear suggestions", icon: index.h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => {
                 this.localSuggestions = [];
             } }))), this.localSuggestions.map(suggestion => (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
@@ -500,6 +500,30 @@ const isValidZip = ({ countryFields, zip, }) => {
     return countryFields.zipRequired && !!zip;
 };
 
+const hasCountries = (countries) => !!countries && Object.keys(countries).length > 0;
+/**
+ * Builds the country options for an address form's country dropdown.
+ *
+ * Shipping addresses are restricted to the merchant's shipping zone, since we
+ * can only fulfill orders to those countries. Billing addresses are not — a
+ * shopper's card can be billed to any country, so restricting the billing
+ * country prevents them from checking out at all (05CHECK-915).
+ *
+ * When the full country list is unavailable we fall back to the shipping zone
+ * so the dropdown is never empty.
+ */
+const getAddressCountryOptions = ({ allCountries, shippingZoneCountries, type, }) => {
+    const countries = type === 'billing' && hasCountries(allCountries)
+        ? allCountries
+        : shippingZoneCountries;
+    return Object.values(countries || {})
+        .map(country => ({
+        label: country.displayName,
+        value: country.code,
+    }))
+        .sort((a, b) => a.label.localeCompare(b.label));
+};
+
 const mergeAddress = ({ addresses, delimiter = ' ', }) => {
     // Remove duplicate addresses
     const addressSet = new Set(addresses.filter(Boolean));
@@ -564,14 +588,6 @@ const ZonosAddress = class {
          * Whether to start google place suggestions
          */
         this.startGooglePlaceSuggestions = false;
-        /**
-         * List of countries to show in the address element
-         */
-        this.shipToCountries = null;
-        /**
-         * Shipping zones from localization
-         */
-        this.shippingZones = null;
         this.city = '';
         this.country = '';
         this.firstName = '';
@@ -611,6 +627,14 @@ const ZonosAddress = class {
          * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
          */
         this.isAutoCompleteAdjusted = false;
+        /**
+         * Memoized country options, keyed on the store references they derive from.
+         * `render()` runs on every keystroke, and rebuilding the list each time would
+         * re-sort ~244 countries and hand `zonos-stripe-select` a new array identity,
+         * re-rendering it needlessly. `@stencil/store` replaces these references
+         * wholesale rather than mutating them, so reference equality is a safe key.
+         */
+        this.countryOptionsCache = null;
         // Create a single throttled instance that persists
         this.throttledGetAddressSuggestions = throttle.throttle_1(() => {
             if (zonosStore.zonosStore.checkoutAddressService) {
@@ -762,6 +786,28 @@ const ZonosAddress = class {
             this.onStoreCheckoutSessionIdChangedSubscription = localization.storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
         };
     }
+    getCountryOptions() {
+        const { allCountries, shippingZoneCountries } = localization.localizationStore;
+        const cache = this.countryOptionsCache;
+        if (cache &&
+            cache.allCountries === allCountries &&
+            cache.shippingZoneCountries === shippingZoneCountries &&
+            cache.type === this.type) {
+            return cache.options;
+        }
+        const options = getAddressCountryOptions({
+            allCountries,
+            shippingZoneCountries,
+            type: this.type,
+        });
+        this.countryOptionsCache = {
+            allCountries,
+            options,
+            shippingZoneCountries,
+            type: this.type,
+        };
+        return options;
+    }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
             return {
@@ -1188,24 +1234,19 @@ const ZonosAddress = class {
         this.initAddressSuggestions();
         this.initDefaultCustomAddressForm();
     }
-    shippingZonesChanged() {
-        this.shippingZones = localization.localizationStore.shippingZoneCountries;
-        this.shipToCountries = Object.values(this.shippingZones || {})
-            .map(country => ({
-            label: country.displayName,
-            value: country.code,
-        }))
-            .sort((a, b) => {
-            return a.label.localeCompare(b.label);
-        });
-    }
     renderCustomAddressForm() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        const _t = this.getCustomAddressErrors(), { showError } = _t, customAddressErrors = __rest(_t, ["showError"]);
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        const _s = this.getCustomAddressErrors(), { showError } = _s, customAddressErrors = __rest(_s, ["showError"]);
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
         const countryCode = stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country;
-        const firstCountry = (_a = this.shipToCountries) === null || _a === void 0 ? void 0 : _a[0];
-        const stateOptions = Object.entries(((_b = this.countryField) === null || _b === void 0 ? void 0 : _b.regions) || {})
+        /**
+         * Billing addresses are not limited to the shipping zone: a shopper's card
+         * can be billed to any country, so restricting it would block them from
+         * checking out entirely (05CHECK-915).
+         */
+        const countryOptions = this.getCountryOptions();
+        const firstCountry = countryOptions[0];
+        const stateOptions = Object.entries(((_a = this.countryField) === null || _a === void 0 ? void 0 : _a.regions) || {})
             .map(([label, region]) => ({
             label,
             value: region.interpayCode,
@@ -1239,7 +1280,7 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.lastName = event.detail;
-            }, required: true }), index.h("zonos-stripe-select", { "aria-required": "true", autoComplete: "shipping country", class: "zonos--custom-address-form-input", name: `${this.type}-country`, onSelectChange: (event) => {
+            }, required: true }), index.h("zonos-stripe-select", { "aria-required": "true", autoComplete: `${this.type} country`, class: "zonos--custom-address-form-input", name: `${this.type}-country`, onSelectChange: (event) => {
                 this.countryChanged(event.detail);
                 // revalidate the postal code since with empty value so it would reset the customAddressErrors
                 this.validate({
@@ -1268,9 +1309,9 @@ const ZonosAddress = class {
                 this.city = '';
                 this.state = '';
                 this.postalCode = '';
-            }, options: this.shipToCountries || [], required: true, selectLabel: localization.translate('Country'), selectedValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
+            }, options: countryOptions, required: true, selectLabel: localization.translate('Country'), selectedValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
                 localization.localizationStore.selectedCountryCode ||
-                (firstCountry === null || firstCountry === void 0 ? void 0 : firstCountry.value), title: `${this.type} country` }), index.h("div", { class: "zonos--custom-address-form-line1-wrapper" }, index.h("zonos-stripe-input", { "aria-autocomplete": "list", "aria-controls": "autocomplete-search", "aria-required": "true", autoComplete: "shipping address-line1", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.line1 : undefined, inputLabel: localization.translate('Address line 1'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line1, name: "address-line1", onInputChange: (event) => {
+                (firstCountry === null || firstCountry === void 0 ? void 0 : firstCountry.value), title: `${this.type} country` }), index.h("div", { class: "zonos--custom-address-form-line1-wrapper" }, index.h("zonos-stripe-input", { "aria-autocomplete": "list", "aria-controls": "autocomplete-search", "aria-required": "true", autoComplete: `${this.type} address-line1`, class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.line1 : undefined, inputLabel: localization.translate('Address line 1'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line1, name: "address-line1", onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1301,9 +1342,9 @@ const ZonosAddress = class {
             }, suggestions: this.addressSuggestions, type: this.type })), index.h("div", { "aria-label": "Additional address details", class: classes.classes([
                 'zonos--custom-address-form-additional-fields',
                 countryCode && this.isAddressLine1Entered ? 'zonos--show' : '',
-            ]), role: "group" }, index.h("zonos-stripe-input", { "aria-required": "false", autoComplete: "shipping address-line2", class: "zonos--custom-address-form-input", inputLabel: localization.translate(((_c = this.countryField) === null || _c === void 0 ? void 0 : _c.address2Label) || 'Address line 2'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line2) || '', onInputChange: (event) => {
+            ]), role: "group" }, index.h("zonos-stripe-input", { "aria-required": "false", autoComplete: `${this.type} address-line2`, class: "zonos--custom-address-form-input", inputLabel: localization.translate(((_b = this.countryField) === null || _b === void 0 ? void 0 : _b.address2Label) || 'Address line 2'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line2) || '', onInputChange: (event) => {
                 this.line2 = event.detail;
-            } }), ((_d = this.countryField) === null || _d === void 0 ? void 0 : _d.cityShow) && (index.h("zonos-stripe-input", { "aria-required": ((_e = this.countryField) === null || _e === void 0 ? void 0 : _e.cityRequired) ? 'true' : 'false', autoComplete: "shipping address-level2", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.city : undefined, inputLabel: localization.translate(((_f = this.countryField) === null || _f === void 0 ? void 0 : _f.cityLabel) || 'City'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.city) || '', name: "locality", onInputChange: (event) => {
+            } }), ((_c = this.countryField) === null || _c === void 0 ? void 0 : _c.cityShow) && (index.h("zonos-stripe-input", { "aria-required": ((_d = this.countryField) === null || _d === void 0 ? void 0 : _d.cityRequired) ? 'true' : 'false', autoComplete: `${this.type} address-level2`, class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.city : undefined, inputLabel: localization.translate(((_e = this.countryField) === null || _e === void 0 ? void 0 : _e.cityLabel) || 'City'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.city) || '', name: "locality", onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1317,7 +1358,7 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.city = event.detail;
-            }, required: (_g = this.countryField) === null || _g === void 0 ? void 0 : _g.cityRequired })), index.h("div", { class: "zonos--custom-address-form-state-zip-wrapper" }, ((_h = this.countryField) === null || _h === void 0 ? void 0 : _h.stateShow) && (index.h("zonos-stripe-select", { "aria-required": ((_j = this.countryField) === null || _j === void 0 ? void 0 : _j.stateRequired) ? 'true' : 'false', autoComplete: "shipping address-level1", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.state : undefined, isError: showError && !!customAddressErrors.state, name: `${this.type}-state`, onSelectChange: (event) => {
+            }, required: (_f = this.countryField) === null || _f === void 0 ? void 0 : _f.cityRequired })), index.h("div", { class: "zonos--custom-address-form-state-zip-wrapper" }, ((_g = this.countryField) === null || _g === void 0 ? void 0 : _g.stateShow) && (index.h("zonos-stripe-select", { "aria-required": ((_h = this.countryField) === null || _h === void 0 ? void 0 : _h.stateRequired) ? 'true' : 'false', autoComplete: `${this.type} address-level1`, class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.state : undefined, isError: showError && !!customAddressErrors.state, name: `${this.type}-state`, onSelectChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1331,9 +1372,9 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.state = event.detail;
-            }, options: stateOptions, required: (_k = this.countryField) === null || _k === void 0 ? void 0 : _k.stateRequired, selectLabel: localization.translate(((_l = this.countryField) === null || _l === void 0 ? void 0 : _l.stateLabel) || 'State'), selectedValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.state, title: `${this.type} state` })), ((_m = this.countryField) === null || _m === void 0 ? void 0 : _m.zipShow) && (index.h("zonos-stripe-input", { "aria-describedby": ((_o = this.countryField) === null || _o === void 0 ? void 0 : _o.zipFormat)
+            }, options: stateOptions, required: (_j = this.countryField) === null || _j === void 0 ? void 0 : _j.stateRequired, selectLabel: localization.translate(((_k = this.countryField) === null || _k === void 0 ? void 0 : _k.stateLabel) || 'State'), selectedValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.state, title: `${this.type} state` })), ((_l = this.countryField) === null || _l === void 0 ? void 0 : _l.zipShow) && (index.h("zonos-stripe-input", { "aria-describedby": ((_m = this.countryField) === null || _m === void 0 ? void 0 : _m.zipFormat)
                 ? `zip-format-${this.type}`
-                : undefined, "aria-required": ((_p = this.countryField) === null || _p === void 0 ? void 0 : _p.zipRequired) ? 'true' : 'false', autoComplete: "shipping postal-code", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.postalCode : undefined, inputLabel: localization.translate(((_q = this.countryField) === null || _q === void 0 ? void 0 : _q.zipLabel) || 'Zip'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.postal_code) || '', name: "postalCode", onInputChange: (event) => {
+                : undefined, "aria-required": ((_o = this.countryField) === null || _o === void 0 ? void 0 : _o.zipRequired) ? 'true' : 'false', autoComplete: `${this.type} postal-code`, class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.postalCode : undefined, inputLabel: localization.translate(((_p = this.countryField) === null || _p === void 0 ? void 0 : _p.zipLabel) || 'Zip'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.postal_code) || '', name: "postalCode", onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1347,7 +1388,7 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.postalCode = event.detail;
-            }, required: (_r = this.countryField) === null || _r === void 0 ? void 0 : _r.zipRequired, title: `${this.type} zip code` }))), index.h("zonos-stripe-phone-input", { autoComplete: "shipping tel", class: "zonos--custom-address-form-input", countryCode: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country, countryOptions: (_s = zonosStore.zonosStore.genericSettings) === null || _s === void 0 ? void 0 : _s.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: localization.translate('Phone number'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone) || '', onInputValueChange: event => {
+            }, required: (_q = this.countryField) === null || _q === void 0 ? void 0 : _q.zipRequired, title: `${this.type} zip code` }))), index.h("zonos-stripe-phone-input", { autoComplete: `${this.type} tel`, class: "zonos--custom-address-form-input", countryCode: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country, countryOptions: (_r = zonosStore.zonosStore.genericSettings) === null || _r === void 0 ? void 0 : _r.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: localization.translate('Phone number'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone) || '', onInputValueChange: event => {
                 const { isEmpty, phoneNumber, valid, wrongFormat } = event.detail;
                 // Validate the phone number
                 this.validate({
@@ -1388,14 +1429,6 @@ const ZonosAddress = class {
     }
     componentDidLoad() {
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
-        this.shipToCountries = Object.values(localization.localizationStore.shippingZoneCountries || {})
-            .map(country => ({
-            label: country.displayName,
-            value: country.code,
-        }))
-            .sort((a, b) => {
-            return a.label.localeCompare(b.label);
-        });
         this.isDirtyAddress =
             !!stripeAddressEventData &&
                 stripeAddressEventData.value.address.line1.length > 0;
@@ -1408,7 +1441,6 @@ const ZonosAddress = class {
     }
     render() {
         var _a;
-        this.shippingZones = localization.localizationStore.shippingZoneCountries;
         this.addressService = zonosStore.zonosStore.checkoutAddressService;
         if ((_a = cart.stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) {
             this.isAddressFilled = true;
@@ -1418,10 +1450,10 @@ const ZonosAddress = class {
             this.country = localization.localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: '1e90973654268e1af1e98bf606f71d55c63f5656', class: classes.classes([
+        return (index.h(index.Host, { key: 'b4e39a6e92e646f98c0061bf3de8e028c9285556', class: classes.classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, index.h("zonos-text", { key: 'f986a00640502fb262cc424e57f5edb1f4cdbb9c', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("slot", { key: '57ae4b8393e350b99112e6a7800a97d6a524d57c', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
+            ]) }, index.h("zonos-text", { key: '28d21737c78a1b8125c5170c67f214e3f39939ff', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("slot", { key: '97357f001b27197b8648d6158b786b153c31a7ba', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1437,8 +1469,7 @@ const ZonosAddress = class {
         "phone": ["formFieldsChanged"],
         "postalCode": ["formFieldsChanged"],
         "state": ["formFieldsChanged"],
-        "addressService": ["shouldEnabledCustomAddressChanged"],
-        "shippingZones": ["shippingZonesChanged"]
+        "addressService": ["shouldEnabledCustomAddressChanged"]
     }; }
 };
 ZonosAddress.style = ZonosCustomAddressStyle0;
@@ -7336,6 +7367,15 @@ const ZonosStripePhoneInput = class {
             this.updatePhoneFormatter();
         };
     }
+    onCountryCodeChange() {
+        /**
+         * Re-derive the dial code when the address country changes, otherwise a
+         * shopper who changes country keeps the previous country's dial code — for
+         * example a US billing address on a Mexico shipment would send a US phone
+         * number prefixed with +52 (05CHECK-915).
+         */
+        this.initPhoneNumberValue();
+    }
     onCountryOptionsChange() {
         // Re-initialize the phone number value when the country options change
         this.initPhoneNumberValue();
@@ -7415,27 +7455,28 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (index.h(index.Host, { key: 'd89450cd871f6220d00b325157e8b9213f1eede6', class: classes.classes([
+        return (index.h(index.Host, { key: 'e2a1fc4c2e5f57dc1ae904b70b5f7f421297ae0c', class: classes.classes([
                 'zonos--phone-input zonos--elements',
                 isDark && 'dark',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: '7ec4d175288776584c2938ecb97ec3ddf862e782', class: classes.classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: '61a2ee1f566234692a80fe68fbc4d171f36263dc', class: classes.classes([
                 'zonos--label-wrapper',
                 this.disabled && 'disabled',
                 this.isFocused && 'focused',
                 hasContent && 'has-content',
                 this.error && 'has-error',
                 this.inputLabel && 'has-label',
-            ]) }, index.h("select", { key: 'e4366c1c6ab1a2368a29948f1766978aa8fa580d', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, index.h("select", { key: '32602cf340a06a26c483f049595cdd812826275e', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
             var _a;
             return (index.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, ")"));
-        })), index.h("div", { key: 'f24b7bd87a8113d5cd240f3c11f5304a277c4f88', class: "zonos--input-group" }, index.h("div", { key: '3eafacfbe41af7221e9d40646849d6e5d48b1640', class: "zonos--select-wrapper" }, index.h("div", { key: 'cf11e4657375cf81e3c8cfce697c5bd171b93391', class: "zonos--country-select" }, index.h("div", { key: '503b7b08f66b5b875a3adb6b22a3011e19fe610e', class: "zonos--country-select-content" }, this.selectedCountry && (index.h("div", { key: 'f99b75f25ae1cbb9d05b308b5d4687a650ee7d4c', class: "zonos--country-select-selected" }, index.h("div", { key: '030899619207c8e809ffed56761372b0d83e50d0', class: "zonos--country-flag-wrapper" }, index.h("zonos-country-flag", { key: 'd3661dc8f66fb21d16e5ef686652ef8a966e0a88', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), index.h("div", { key: '23bff50c220aa53dc0182d8ccc0b213b47930cd3', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), index.h("div", { key: 'aa4cd5be6353f36ea3efd0d7fb7f1816c34ae48b', class: "zonos--select-chevron-wrapper" }, index.h("zonos-icon", { key: '3ff4a4fc0e0c6d1d8d293a5b09138d1aae445050', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), index.h("div", { key: '7f60b7f27c0f2d4ecba6ab9fa36fc0c438b8a16d', class: classes.classes([
+        })), index.h("div", { key: '1a36aa363a853c420303241e75d89e5aa298dee9', class: "zonos--input-group" }, index.h("div", { key: '7f4d30619c8f69b98422bfcab964113d598d45fa', class: "zonos--select-wrapper" }, index.h("div", { key: '44d0f28dde38fc09ce612ad4cb78f9d1fbdbe951', class: "zonos--country-select" }, index.h("div", { key: 'c438e242374e303688150aec2c8eae51b6e1427d', class: "zonos--country-select-content" }, this.selectedCountry && (index.h("div", { key: '2aaec2a6315d2ee84244c4458efce6d27c8598ad', class: "zonos--country-select-selected" }, index.h("div", { key: '819a8b6fd270e43992c19a4b96a4ce5335ae166f', class: "zonos--country-flag-wrapper" }, index.h("zonos-country-flag", { key: '090e6ce55541db022a55497b1b3a6fa7ff2b5406', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), index.h("div", { key: '021bc4bf590fb6dca736478cc8f9914ce764c1ab', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), index.h("div", { key: 'f7256f51c803d1b5aedb3b5d646a777cb553aa9d', class: "zonos--select-chevron-wrapper" }, index.h("zonos-icon", { key: 'a018c3fffc1c029df874d9be3c938307b4609d82', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), index.h("div", { key: 'dd20516acf7d5cab10fe91ff4a6f59cc91600732', class: classes.classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, index.h("input", Object.assign({ key: 'b821664395945a074682793137940507ece7126b' }, 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 && (index.h("div", { key: 'e2ccfc80835f3a20fe973c0e1a11314212ab0c00', class: "zonos--floated-label" }, index.h("label", { key: 'b7d96e8332fb7c3cd4f084f76bf472107ae1e73b', htmlFor: this.inputId }, this.inputLabel || localization.translate('Phone number'))))))), this.error && (index.h("zonos-text", { key: '0aae60a88c79d3fade222efccd1049a4b130fbbc', textColor: "red-600" }, this.error))));
+            ]) }, index.h("input", Object.assign({ key: 'ed8b536ba7aac9bae8012692ceb9f8573640c5d6' }, 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 && (index.h("div", { key: 'be2ae82b335dd291d53f48a73f9b23744392daf6', class: "zonos--floated-label" }, index.h("label", { key: '1894a34c3a5ea09b2b45e8dfc9103d944ac69118', htmlFor: this.inputId }, this.inputLabel || localization.translate('Phone number'))))))), this.error && (index.h("zonos-text", { key: 'ae0ab1f97abbecf8dda4eced5aa139d8c51decaf', textColor: "red-600" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "countryCode": ["onCountryCodeChange"],
         "countryOptions": ["onCountryOptionsChange"],
         "selectedCountry": ["onSelectedCountryChange"],
         "inputValue": ["onPhoneNumberChange"]

package/dist/cjs/zonos-address-display_2.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const localization = require('./localization-491121ad.js');
+const localization = require('./localization-fb2ece37.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
-const zonosStore = require('./zonosStore-fee716c9.js');
+const zonosStore = require('./zonosStore-0af0b937.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-4da24d7c.js');
+const getBorderRadius = require('./getBorderRadius-97fd5e02.js');
 require('./handleFetch-954f30e1.js');
 require('./VarianceTest-bec00ea8.js');
 
@@ -19,9 +19,16 @@ const ZonosAddressDisplay = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        var _a;
+        var _a, _b;
         const { city, country, email, line1, line2, name, phone, postal_code, state, } = this.currentAddress;
-        const shippingZoneCountry = (_a = localization.localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[country];
+        /**
+         * Look the country up in the full country list first, since a billing
+         * address can be in a country the merchant does not ship to and would
+         * otherwise render without a country line (05CHECK-915). The shipping zone
+         * is a subset of all countries, so this is also correct for shipping.
+         */
+        const displayCountry = ((_a = localization.localizationStore.allCountries) === null || _a === void 0 ? void 0 : _a[country]) ||
+            ((_b = localization.localizationStore.shippingZoneCountries) === null || _b === void 0 ? void 0 : _b[country]);
         const renderEnteredInfoText = ({ bold, content, }) => {
             const textColor = containsNonLatinChars.isTextContainsNonLatinChars(content)
                 ? 'red-600'
@@ -30,8 +37,8 @@ const ZonosAddressDisplay = class {
         };
         return (index.h(index.Host, { class: "zonos--address-form zonos--elements" }, index.h("div", { class: "zonos--title" }, index.h("zonos-text", { textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
             ? localization.translate('Shipping')
-            : localization.translate('Billing'))), index.h("div", { class: "zonos--address-group" }, name && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), index.h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), shippingZoneCountry && (index.h("div", { class: "zonos--address-line" }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: shippingZoneCountry.code }), ' ', renderEnteredInfoText({
-            content: shippingZoneCountry.displayName,
+            : localization.translate('Billing'))), index.h("div", { class: "zonos--address-group" }, name && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), index.h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), displayCountry && (index.h("div", { class: "zonos--address-line" }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: displayCountry.code }), ' ', renderEnteredInfoText({
+            content: displayCountry.displayName,
         }))))));
     }
 };
@@ -125,7 +132,7 @@ const ZonosDialog = class {
         const borderStyle = getBorderRadius.getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (index.h(index.Host, { key: '93de5ea91ebef1927a2d7dc91a00f87277755ac7', class: classes.classes([
+        return (index.h(index.Host, { key: '73740b7d8c127367bbc2c621d036288920b3801d', class: classes.classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -137,10 +144,10 @@ const ZonosDialog = class {
                 '--zonos--height': this.height || 'initial',
                 '--zonos--min-height': this.minHeight || '500px',
                 '--zonos--width': this.width,
-            } }, index.h("div", { key: '86330a3de751f262a3f0f80fbeb436bb6e2b206f', class: "zonos--backdrop" }), index.h("div", { key: 'a6702c9a9b5bba9f3523503cd85ba6e6ae77fc9d', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, index.h("div", { key: '2c4d6e9170fbe80a2ea249d3f40cbc72e5df05d3', class: "zonos--dialog" }, this.isLoading && (index.h("div", { key: 'e83dcb53e9cd7504d588b124c6468535e81ce71d', class: "zonos--loading" }, index.h("zonos-spinner", { key: '5e8b3451b5358c76c2fdf47a0ad5eecc8394d012', size: 30 }), this.loadingTitle && (index.h("zonos-text", { key: '671203125d8fd7e8cb811b61b7190f826221507a', class: "zonos--loading-title", size: "l", weight: 700 }, this.loadingTitle)), this.loadingText && (index.h("zonos-text", { key: '791a95ed2bdad0c3bfb136c9e42d7d8e920110d9', class: "zonos--loading-text" }, this.loadingText)))), (this.headerText || !this.noCloseButton) && (index.h("div", { key: '8d4f7a2e12cd56d6341cf5aa17be1a7f151ca45b', class: "zonos--header" }, this.headerText && (index.h("h3", { key: '4bdd26b40a2209ccf44d85440cfbf173724f9aaa', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { key: 'c8f5d7eaff8c9ba94d60d587b5601472e80ea79a', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), index.h("div", { key: 'e5d91fb3bb3546e559566f8782aa9d939d0f1d04', class: classes.classes([
+            } }, index.h("div", { key: '441c6b5c503a431909f52699ee60992609dea232', class: "zonos--backdrop" }), index.h("div", { key: '94fb4689581ae2d781cae264740bbf9dbd42deac', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, index.h("div", { key: 'ba788097f52ca80229d16ce910071b56647061f9', class: "zonos--dialog" }, this.isLoading && (index.h("div", { key: '47bfe052272192a74aeed3a5ddbed802ae27bc16', class: "zonos--loading" }, index.h("zonos-spinner", { key: '49168e9057d08233654abfa0ca36138d205ca283', size: 30 }), this.loadingTitle && (index.h("zonos-text", { key: 'ed89b9b21e30b0e670b296306ed9b797f2baa75e', class: "zonos--loading-title", size: "l", weight: 700 }, this.loadingTitle)), this.loadingText && (index.h("zonos-text", { key: '7770dbdcf4e1fb630e0ed6c08dc4830edf00d1f0', class: "zonos--loading-text" }, this.loadingText)))), (this.headerText || !this.noCloseButton) && (index.h("div", { key: 'c171e207af502ef02de35803c480d927edea3ce4', class: "zonos--header" }, this.headerText && (index.h("h3", { key: '03999b1441d3a0dc983fed2e64680211f4a59793', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { key: 'e2954d9326195df3029c0771481881e6485fae05', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), index.h("div", { key: 'ba456d3747bd51ada021ed909a41e5768ceed4ab', class: classes.classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, index.h("slot", { key: '2da7a3c7a978bb520c255a0043f96bf15b2dd006' })), index.h("slot", { key: '38ec2165a11c9cc2b121122124482590f9cd31e9', name: "dialog-footer" })))));
+            ]) }, index.h("slot", { key: '81e4de1e59970996607f7d0f2f2aef7937f82c43' })), index.h("slot", { key: '3fcd369711a347b9e2d2840fc708e928e17d5da1', name: "dialog-footer" })))));
     }
     static get assetsDirs() { return ["assets"]; }
 };

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

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const throttle = require('./throttle-34f7abf1.js');
-const cart = require('./cart-dc31b242.js');
-const localization = require('./localization-491121ad.js');
-const zonosStore = require('./zonosStore-fee716c9.js');
+const throttle = require('./throttle-366c204b.js');
+const cart = require('./cart-94908542.js');
+const localization = require('./localization-fb2ece37.js');
+const zonosStore = require('./zonosStore-0af0b937.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-7d19556c.js');
 const classes = require('./classes-b7918f56.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const TaxId = require('./TaxId-cd9d490e.js');
-const getBorderRadius = require('./getBorderRadius-4da24d7c.js');
-require('./debounce-9a712c79.js');
-require('./isDarkColor-ebc74b4d.js');
+const getBorderRadius = require('./getBorderRadius-97fd5e02.js');
+require('./debounce-7ca3c878.js');
+require('./isDarkColor-a6e6fd5e.js');
 require('./ShortAddressCode-bec338b0.js');
 
 /**
@@ -419,11 +419,11 @@ const ZonosAddress = class {
             this.isAddressFilled = true;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: '195940efdd29696d99b1ab6524a53e6a03776c6a', class: classes.classes([
+        return (index.h(index.Host, { key: '9b7a5340b839d63c64da03639bdfda5a11a5c25e', class: classes.classes([
                 'zonos--address',
                 'zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, this.titleText && (index.h("zonos-text", { key: '968d5990fce9c1eb22cd10b58744e6d00f2e622d', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("slot", { key: 'ae6dd70dcaa5ecd3465c065736e0f31fb40e72d3', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), index.h("div", { key: '0bf3075670d3fcd945f9ddcbe096399e2dc213ed', class: "zonos--address-component" })));
+            ]) }, this.titleText && (index.h("zonos-text", { key: '23739f6a48e5698372df2d53098dea6ad1c0559a', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("slot", { key: 'dea4b437eedaad2af2f6bbe3a1e2ae4f0706aa13', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), index.h("div", { key: 'b4be684977a632371b9b6ff4587ccdd7bacc8c67', class: "zonos--address-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -555,13 +555,13 @@ const ZonosConfirmDialog = class {
         const borderStyle = getBorderRadius.getBorderRadius();
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = zonosStore.getZonosStoreTheme(zonosStore.zonosStore.appearance.theme);
-        return (index.h(index.Host, { key: 'dc074c5b88b642e06edd8942408a3aeed05e5cdb', class: classes.classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
+        return (index.h(index.Host, { key: '9ad8aff8631692fa53ef172869d98e9fbfbdc059', class: classes.classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
                 '--zonos--border-radius': borderStyle,
                 '--zonos--dialog-width': `${this.dialogWidth}px`,
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '119a9c201e44a670fb1df61f6663d96f7148ecc6', class: "zonos--backdrop", tabIndex: -1 }), index.h("div", { key: '9534a92f69dd3d692c1a2fd86fa1cf148f68cdfa', class: classes.classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, index.h("div", { key: 'e79aaf3a80b57634f78575b15a75d7b549ed20ee', class: "zonos--confirm-dialog", onBlur: () => {
+            } }, index.h("div", { key: '6d7c55b90bfb05890d876a0243558eb9a2e7a772', class: "zonos--backdrop", tabIndex: -1 }), index.h("div", { key: 'abf306ddd70cefd64aa6804aeccf700506c175d7', class: classes.classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, index.h("div", { key: 'dc7e9e6d501872597928603ded57d82c15c26710', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, index.h("div", { key: '44367b178f46c66dfb236485e05f6832ae63a63b', class: "wrapper" }, index.h("div", { key: '42d10d17180ec7364710682c27d6cd4fef0b8abe', class: "icon-wrapper" }, this.renderIcon()), index.h("div", { key: 'b5f7563fb43e1b147db669e1df71f4fafb5284df', class: "content" }, index.h("div", { key: '38b78e383833b5e49908c8e95c35b9ad23c0f956', class: "title" }, index.h("zonos-text", { key: '726f5308881671e7e17bd0591521485bd7142c1e', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (index.h("div", { key: '58d663842d51a512b3c8799a907bd1ed58e4fb31', class: "subtitle" }, index.h("zonos-text", { key: '4411400d8906a22fd5f31652a1eeb314cae8ad68', textColor: "gray-800" }, this.dialogSubtitle)))), index.h("div", { key: 'df0452b2af633dd558858db824336fd5925aef50', class: "footer" }, this.dialogType === 'confirm' && (index.h("zonos-button", { key: '50f88e85e18129ef4ee209615b951683c5ff6fa8', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || localization.translate('Cancel'))), index.h("zonos-button", { key: '314b8be8954241b8c261c62d5a4bbe8155cc6914', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, index.h("div", { key: '5c1fa9ec8b59cba68ccbc5dc36e66e2fdefdeae5', class: "wrapper" }, index.h("div", { key: '0ce48c41c78e393a181fd5e9beeac90622b5c620', class: "icon-wrapper" }, this.renderIcon()), index.h("div", { key: 'b42157f8e76de8a60190e384d7d53a36d8051c67', class: "content" }, index.h("div", { key: 'bd8eb897f15a6d095df8fbd1803f62a11b9d5d7b', class: "title" }, index.h("zonos-text", { key: 'd1c06b89d4917b2366f881dda7da9e1369722126', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (index.h("div", { key: '4f1269aaab5ad3965d6ddfc0949341d4f202f296', class: "subtitle" }, index.h("zonos-text", { key: 'f784b5dd86ff684e790f27a586e3eeb4ac683884', textColor: "gray-800" }, this.dialogSubtitle)))), index.h("div", { key: 'e0403a968aee6ff878c9e916e9ff216e2052ab0c', class: "footer" }, this.dialogType === 'confirm' && (index.h("zonos-button", { key: '66e34a9d61f677786bfe286f377854c9ebc780ed', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || localization.translate('Cancel'))), index.h("zonos-button", { key: '3652507591e3055856a044e191525ea36b6042ca', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -795,7 +795,7 @@ const ZonosLoadingOverlay = class {
         this.size = 40;
     }
     render() {
-        return (index.h(index.Host, { key: 'e284a5ada0945f1895dbd9b40039e9d2ef600111', class: classes.classes(['zonos--elements', this.open && 'zonos--open']) }, index.h("div", { key: 'fb68155fe133ba8cd1d923a0fbb37a382ecabc34', class: "zonos--loading-overlay" }, index.h("zonos-spinner", { key: '50dc3d4b1f53173240d23ffeac966f7463546fde', size: this.size, spinnerColor: this.spinnerColor }))));
+        return (index.h(index.Host, { key: '8cafd99b309b04da5cf1b26b0f0804f4699c06b2', class: classes.classes(['zonos--elements', this.open && 'zonos--open']) }, index.h("div", { key: '9ce7ac9b7e6956a5f76fc2105fa7f5d05299fd36', class: "zonos--loading-overlay" }, index.h("zonos-spinner", { key: '4be3a8d471e3aead2e4194c4ecbf66878a7a3f17', size: this.size, spinnerColor: this.spinnerColor }))));
     }
 };
 ZonosLoadingOverlay.style = ZonosLoadingOverlayStyle0;

package/dist/cjs/zonos-airwallex-payment.cjs.entry.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const collect = require('./collect-463ab3d7.js');
-const cart = require('./cart-dc31b242.js');
-const localization = require('./localization-491121ad.js');
-const zonosStore = require('./zonosStore-fee716c9.js');
+const collect = require('./collect-0c05e2b4.js');
+const cart = require('./cart-94908542.js');
+const localization = require('./localization-fb2ece37.js');
+const zonosStore = require('./zonosStore-0af0b937.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
-require('./isDarkColor-ebc74b4d.js');
-require('./getBorderRadius-4da24d7c.js');
+require('./isDarkColor-a6e6fd5e.js');
+require('./getBorderRadius-97fd5e02.js');
 require('./TaxId-cd9d490e.js');
 
 const zonosAirwallexPaymentCss = ".sc-zonos-airwallex-payment-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-airwallex-payment-h *.sc-zonos-airwallex-payment{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-airwallex-payment-h img.sc-zonos-airwallex-payment{max-width:100%}.sc-zonos-airwallex-payment-h dl.sc-zonos-airwallex-payment,.sc-zonos-airwallex-payment-h dd.sc-zonos-airwallex-payment,.sc-zonos-airwallex-payment-h h1.sc-zonos-airwallex-payment,.sc-zonos-airwallex-payment-h h2.sc-zonos-airwallex-payment,.sc-zonos-airwallex-payment-h h3.sc-zonos-airwallex-payment,.sc-zonos-airwallex-payment-h h4.sc-zonos-airwallex-payment,.sc-zonos-airwallex-payment-h h5.sc-zonos-airwallex-payment,.sc-zonos-airwallex-payment-h h6.sc-zonos-airwallex-payment,.sc-zonos-airwallex-payment-h hr.sc-zonos-airwallex-payment,.sc-zonos-airwallex-payment-h figure.sc-zonos-airwallex-payment,.sc-zonos-airwallex-payment-h p.sc-zonos-airwallex-payment,.sc-zonos-airwallex-payment-h pre.sc-zonos-airwallex-payment{margin:0}.sc-zonos-airwallex-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-airwallex-payment-h{display:block}.sc-zonos-airwallex-payment-h .zonos--payment-error-banner.sc-zonos-airwallex-payment{margin-bottom:16px}.sc-zonos-airwallex-payment-h .zonos--airwallex-payment-component.sc-zonos-airwallex-payment{margin-bottom:4px;min-height:40px}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const zonosStore = require('./zonosStore-fee716c9.js');
+const zonosStore = require('./zonosStore-0af0b937.js');
 const classes = require('./classes-b7918f56.js');
 require('./VarianceTest-bec00ea8.js');
 
@@ -50,16 +50,16 @@ const ZonosBadge = class {
         this.loading = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'c8d29084d1a10f985bcb52409881fff004a73118', class: classes.classes(['zonos--elements zonos--badge']), style: {
+        return (index.h(index.Host, { key: '95c8a620e803b4ea84d7789ff746d1edc1252389', class: classes.classes(['zonos--elements zonos--badge']), style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '28cd3711c8e8d6b362c56589553401707456fdc6', class: classes.classes([
+            } }, index.h("div", { key: '000fb2efaa9cffa4635e89e700013bcc1f9fd63c', class: classes.classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, index.h("zonos-text", { key: '9dcb72621037e37fc11d5cabe915f6dad9798c2a', textColor: `${this.badgeColor}-800` }, index.h("slot", { key: '7599b4c4689100dc637a3842287a93a42b4edd41' })), this.dismissHandler && (index.h("zonos-icon", { key: '861156179b8c8a8d8db1b4ee72717581d2eb7222', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
+            ]) }, this.icon, index.h("zonos-text", { key: '8c84abeb697dd20f6c1acbd2f512a5bac2c45883', textColor: `${this.badgeColor}-800` }, index.h("slot", { key: 'b5bc9ed235747f2986fd7a1c94cbede4b8ffc715' })), this.dismissHandler && (index.h("zonos-icon", { key: '629b306370ba2fab2e43b625fce19e44be2a91a7', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
     }
 };
 ZonosBadge.style = ZonosBadgeStyle0;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b1f95d96.js');
-const zonosStore = require('./zonosStore-fee716c9.js');
+const zonosStore = require('./zonosStore-0af0b937.js');
 const classes = require('./classes-b7918f56.js');
 require('./VarianceTest-bec00ea8.js');