@zonos/elements 1.3.282 → 1.3.284

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

@@ -1,20 +1,20 @@
 import { r as registerInstance, d as createEvent, h, a as Host, g as getElement } from './index-cfd394c8.js';
-import { t as translate, s as storageStore, y as storageStoreOnChange, l as localizationStore } from './localization-0953a048.js';
-import { z as zonosStore, f as zonosStoreFontFamily } from './zonosStore-b7d3f9b0.js';
-import { M as MIN_POSTAL_CODE_LENGTH } from './getMissingRequiredShippingFields-bdeecbff.js';
+import { t as translate, s as storageStore, A as storageStoreOnChange, l as localizationStore } from './localization-36a4dc22.js';
+import { z as zonosStore, f as zonosStoreFontFamily } from './zonosStore-eca1e364.js';
+import { M as MIN_POSTAL_CODE_LENGTH } from './getMissingRequiredShippingFields-719b206f.js';
 import { c as classes } from './classes-0d95c529.js';
-import { U as extractName, b as stripeStore, u as stripeStorePrefetchLandedCost, t as trackConversionEvent } from './cart-5282f6c1.js';
+import { U as extractName, b as stripeStore, u as stripeStorePrefetchLandedCost, t as trackConversionEvent } from './cart-2e407f7b.js';
 import { R as RemoveIcon$1 } from './RemoveIcon-9dc5dd1a.js';
 import { i as isTextContainsNonLatinChars, c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
-import { g as getBorderRadius } from './getBorderRadius-dc982fe6.js';
-import { t as throttle_1 } from './throttle-44bfb6b5.js';
+import { g as getBorderRadius } from './getBorderRadius-1f7be586.js';
+import { t as throttle_1 } from './throttle-c4c24e86.js';
 import { i as isCheckoutMobile } from './handleFetch-a844cac1.js';
 import { a as shouldRenderTaxIdInput, s as shouldRenderShortAddressCodeInput } from './shouldRenderTaxIdInput-ef7b5860.js';
 import { l as log } from './VarianceTest-572cecf5.js';
 import { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-63a14057.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './helpers-2f6955b1.js';
-import { i as isDarkColor } from './isDarkColor-039ef212.js';
-import './debounce-c8d67b17.js';
+import { i as isDarkColor } from './isDarkColor-939d8e9c.js';
+import './debounce-84ade9c2.js';
 import './ShortAddressCode-7620e622.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}";
@@ -268,9 +268,9 @@ const ZonosAddressSuggestions = class {
         return segments;
     }
     render() {
-        return (h(Host, { key: '20e095515d18016bd1f538bd345ed58aafe8518f', class: "zonos--address-suggestions", role: "group", style: {
+        return (h(Host, { key: '9de4179f1bd0057ac71d6b9ed646c034035382f7', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, h("ul", { key: 'f43e0820d29fc5ef96ab42402e370dc6ce381e66', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: 'd8ff4f7b53ea5fac8f42f1c13b2255ca2ea5d5e8', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '2431de3e4e5241e5d74f552051a5d3d4954624a5', class: "powered-by-container" }, h("zonos-text", { key: '48de6d435ffef45f60ebb4ef6c4b2eaf5bdee821', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: 'b0e8f2986d4f85daa2fd53b7ea812d296d28a164', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: 'e62245b99bcdc192a4ee98511c8a4a0efad6ea92', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => {
+            } }, h("ul", { key: '62fa5ed92fafcdd641f9a7eb36e36e62309c9f52', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: '27c61b5693720d0b33a75385841476787f92b884', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: 'fea9f2e8f65cd50fdf28fc45e18beb8976320f0d', class: "powered-by-container" }, h("zonos-text", { key: '1fec46f543e3673433b6924f7dca1cbd84e0ef16', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: '7b3fd93c18d4320522d61e07278f5388d14c8bbb', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: '61a8362ab0514a78dd71eaa9bd638dc8b50e2a9c', "aria-label": "Clear suggestions", icon: 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
@@ -496,6 +496,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));
@@ -560,14 +584,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 = '';
@@ -607,6 +623,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_1(() => {
             if (zonosStore.checkoutAddressService) {
@@ -758,6 +782,28 @@ const ZonosAddress = class {
             this.onStoreCheckoutSessionIdChangedSubscription = storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
         };
     }
+    getCountryOptions() {
+        const { allCountries, shippingZoneCountries } = 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 {
@@ -1184,24 +1230,19 @@ const ZonosAddress = class {
         this.initAddressSuggestions();
         this.initDefaultCustomAddressForm();
     }
-    shippingZonesChanged() {
-        this.shippingZones = 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,
@@ -1235,7 +1276,7 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.lastName = event.detail;
-            }, required: true }), h("zonos-stripe-select", { "aria-required": "true", autoComplete: "shipping country", class: "zonos--custom-address-form-input", name: `${this.type}-country`, onSelectChange: (event) => {
+            }, required: true }), 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({
@@ -1264,9 +1305,9 @@ const ZonosAddress = class {
                 this.city = '';
                 this.state = '';
                 this.postalCode = '';
-            }, options: this.shipToCountries || [], required: true, selectLabel: translate('Country'), selectedValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
+            }, options: countryOptions, required: true, selectLabel: translate('Country'), selectedValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
                 localizationStore.selectedCountryCode ||
-                (firstCountry === null || firstCountry === void 0 ? void 0 : firstCountry.value), title: `${this.type} country` }), h("div", { class: "zonos--custom-address-form-line1-wrapper" }, 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: 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` }), h("div", { class: "zonos--custom-address-form-line1-wrapper" }, 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: 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,
@@ -1297,9 +1338,9 @@ const ZonosAddress = class {
             }, suggestions: this.addressSuggestions, type: this.type })), h("div", { "aria-label": "Additional address details", class: classes([
                 'zonos--custom-address-form-additional-fields',
                 countryCode && this.isAddressLine1Entered ? 'zonos--show' : '',
-            ]), role: "group" }, h("zonos-stripe-input", { "aria-required": "false", autoComplete: "shipping address-line2", class: "zonos--custom-address-form-input", inputLabel: 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" }, h("zonos-stripe-input", { "aria-required": "false", autoComplete: `${this.type} address-line2`, class: "zonos--custom-address-form-input", inputLabel: 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) && (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: 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) && (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: 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,
@@ -1313,7 +1354,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 })), h("div", { class: "zonos--custom-address-form-state-zip-wrapper" }, ((_h = this.countryField) === null || _h === void 0 ? void 0 : _h.stateShow) && (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 })), h("div", { class: "zonos--custom-address-form-state-zip-wrapper" }, ((_g = this.countryField) === null || _g === void 0 ? void 0 : _g.stateShow) && (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,
@@ -1327,9 +1368,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: 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) && (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: 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) && (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: 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: 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,
@@ -1343,7 +1384,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` }))), 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.genericSettings) === null || _s === void 0 ? void 0 : _s.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: 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` }))), 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.genericSettings) === null || _r === void 0 ? void 0 : _r.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: 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({
@@ -1384,14 +1425,6 @@ const ZonosAddress = class {
     }
     componentDidLoad() {
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
-        this.shipToCountries = Object.values(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;
@@ -1404,7 +1437,6 @@ const ZonosAddress = class {
     }
     render() {
         var _a;
-        this.shippingZones = localizationStore.shippingZoneCountries;
         this.addressService = zonosStore.checkoutAddressService;
         if ((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) {
             this.isAddressFilled = true;
@@ -1414,10 +1446,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: '1e90973654268e1af1e98bf606f71d55c63f5656', class: classes([
+        return (h(Host, { key: 'b4e39a6e92e646f98c0061bf3de8e028c9285556', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: 'f986a00640502fb262cc424e57f5edb1f4cdbb9c', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: '57ae4b8393e350b99112e6a7800a97d6a524d57c', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: '28d21737c78a1b8125c5170c67f214e3f39939ff', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: '97357f001b27197b8648d6158b786b153c31a7ba', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1433,8 +1465,7 @@ const ZonosAddress = class {
         "phone": ["formFieldsChanged"],
         "postalCode": ["formFieldsChanged"],
         "state": ["formFieldsChanged"],
-        "addressService": ["shouldEnabledCustomAddressChanged"],
-        "shippingZones": ["shippingZonesChanged"]
+        "addressService": ["shouldEnabledCustomAddressChanged"]
     }; }
 };
 ZonosAddress.style = ZonosCustomAddressStyle0;
@@ -7332,6 +7363,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();
@@ -7411,27 +7451,28 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (h(Host, { key: 'd89450cd871f6220d00b325157e8b9213f1eede6', class: classes([
+        return (h(Host, { key: 'e2a1fc4c2e5f57dc1ae904b70b5f7f421297ae0c', 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: '7ec4d175288776584c2938ecb97ec3ddf862e782', 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: '61a2ee1f566234692a80fe68fbc4d171f36263dc', 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: 'e4366c1c6ab1a2368a29948f1766978aa8fa580d', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, 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 (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: 'f24b7bd87a8113d5cd240f3c11f5304a277c4f88', class: "zonos--input-group" }, h("div", { key: '3eafacfbe41af7221e9d40646849d6e5d48b1640', class: "zonos--select-wrapper" }, h("div", { key: 'cf11e4657375cf81e3c8cfce697c5bd171b93391', class: "zonos--country-select" }, h("div", { key: '503b7b08f66b5b875a3adb6b22a3011e19fe610e', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: 'f99b75f25ae1cbb9d05b308b5d4687a650ee7d4c', class: "zonos--country-select-selected" }, h("div", { key: '030899619207c8e809ffed56761372b0d83e50d0', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: 'd3661dc8f66fb21d16e5ef686652ef8a966e0a88', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: '23bff50c220aa53dc0182d8ccc0b213b47930cd3', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: 'aa4cd5be6353f36ea3efd0d7fb7f1816c34ae48b', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '3ff4a4fc0e0c6d1d8d293a5b09138d1aae445050', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), h("div", { key: '7f60b7f27c0f2d4ecba6ab9fa36fc0c438b8a16d', class: classes([
+        })), h("div", { key: '1a36aa363a853c420303241e75d89e5aa298dee9', class: "zonos--input-group" }, h("div", { key: '7f4d30619c8f69b98422bfcab964113d598d45fa', class: "zonos--select-wrapper" }, h("div", { key: '44d0f28dde38fc09ce612ad4cb78f9d1fbdbe951', class: "zonos--country-select" }, h("div", { key: 'c438e242374e303688150aec2c8eae51b6e1427d', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '2aaec2a6315d2ee84244c4458efce6d27c8598ad', class: "zonos--country-select-selected" }, h("div", { key: '819a8b6fd270e43992c19a4b96a4ce5335ae166f', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: '090e6ce55541db022a55497b1b3a6fa7ff2b5406', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: '021bc4bf590fb6dca736478cc8f9914ce764c1ab', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: 'f7256f51c803d1b5aedb3b5d646a777cb553aa9d', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: 'a018c3fffc1c029df874d9be3c938307b4609d82', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), h("div", { key: 'dd20516acf7d5cab10fe91ff4a6f59cc91600732', class: classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, 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 && (h("div", { key: 'e2ccfc80835f3a20fe973c0e1a11314212ab0c00', class: "zonos--floated-label" }, h("label", { key: 'b7d96e8332fb7c3cd4f084f76bf472107ae1e73b', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '0aae60a88c79d3fade222efccd1049a4b130fbbc', textColor: "red-600" }, this.error))));
+            ]) }, 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 && (h("div", { key: 'be2ae82b335dd291d53f48a73f9b23744392daf6', class: "zonos--floated-label" }, h("label", { key: '1894a34c3a5ea09b2b45e8dfc9103d944ac69118', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: 'ae0ab1f97abbecf8dda4eced5aa139d8c51decaf', textColor: "red-600" }, this.error))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "countryCode": ["onCountryCodeChange"],
         "countryOptions": ["onCountryOptionsChange"],
         "selectedCountry": ["onSelectedCountryChange"],
         "inputValue": ["onPhoneNumberChange"]

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

@@ -1,9 +1,9 @@
 import { r as registerInstance, h, a as Host, d as createEvent } from './index-cfd394c8.js';
-import { t as translate, l as localizationStore } from './localization-0953a048.js';
+import { t as translate, l as localizationStore } from './localization-36a4dc22.js';
 import { i as isTextContainsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
-import { f as zonosStoreFontFamily } from './zonosStore-b7d3f9b0.js';
+import { f as zonosStoreFontFamily } from './zonosStore-eca1e364.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-dc982fe6.js';
+import { g as getBorderRadius } from './getBorderRadius-1f7be586.js';
 import './handleFetch-a844cac1.js';
 import './VarianceTest-572cecf5.js';
 
@@ -15,9 +15,16 @@ const ZonosAddressDisplay = class {
         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 = 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 = localizationStore.allCountries) === null || _a === void 0 ? void 0 : _a[country]) ||
+            ((_b = localizationStore.shippingZoneCountries) === null || _b === void 0 ? void 0 : _b[country]);
         const renderEnteredInfoText = ({ bold, content, }) => {
             const textColor = isTextContainsNonLatinChars(content)
                 ? 'red-600'
@@ -26,8 +33,8 @@ const ZonosAddressDisplay = class {
         };
         return (h(Host, { class: "zonos--address-form zonos--elements" }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
             ? translate('Shipping')
-            : translate('Billing'))), h("div", { class: "zonos--address-group" }, name && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), shippingZoneCountry && (h("div", { class: "zonos--address-line" }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: shippingZoneCountry.code }), ' ', renderEnteredInfoText({
-            content: shippingZoneCountry.displayName,
+            : translate('Billing'))), h("div", { class: "zonos--address-group" }, name && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), displayCountry && (h("div", { class: "zonos--address-line" }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: displayCountry.code }), ' ', renderEnteredInfoText({
+            content: displayCountry.displayName,
         }))))));
     }
 };
@@ -121,7 +128,7 @@ const ZonosDialog = class {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '93de5ea91ebef1927a2d7dc91a00f87277755ac7', class: classes([
+        return (h(Host, { key: '73740b7d8c127367bbc2c621d036288920b3801d', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -133,10 +140,10 @@ const ZonosDialog = class {
                 '--zonos--height': this.height || 'initial',
                 '--zonos--min-height': this.minHeight || '500px',
                 '--zonos--width': this.width,
-            } }, h("div", { key: '86330a3de751f262a3f0f80fbeb436bb6e2b206f', class: "zonos--backdrop" }), h("div", { key: 'a6702c9a9b5bba9f3523503cd85ba6e6ae77fc9d', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '2c4d6e9170fbe80a2ea249d3f40cbc72e5df05d3', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'e83dcb53e9cd7504d588b124c6468535e81ce71d', class: "zonos--loading" }, h("zonos-spinner", { key: '5e8b3451b5358c76c2fdf47a0ad5eecc8394d012', size: 30 }), this.loadingTitle && (h("zonos-text", { key: '671203125d8fd7e8cb811b61b7190f826221507a', class: "zonos--loading-title", size: "l", weight: 700 }, this.loadingTitle)), this.loadingText && (h("zonos-text", { key: '791a95ed2bdad0c3bfb136c9e42d7d8e920110d9', class: "zonos--loading-text" }, this.loadingText)))), (this.headerText || !this.noCloseButton) && (h("div", { key: '8d4f7a2e12cd56d6341cf5aa17be1a7f151ca45b', class: "zonos--header" }, this.headerText && (h("h3", { key: '4bdd26b40a2209ccf44d85440cfbf173724f9aaa', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'c8f5d7eaff8c9ba94d60d587b5601472e80ea79a', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), h("div", { key: 'e5d91fb3bb3546e559566f8782aa9d939d0f1d04', class: classes([
+            } }, h("div", { key: '441c6b5c503a431909f52699ee60992609dea232', class: "zonos--backdrop" }), h("div", { key: '94fb4689581ae2d781cae264740bbf9dbd42deac', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: 'ba788097f52ca80229d16ce910071b56647061f9', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '47bfe052272192a74aeed3a5ddbed802ae27bc16', class: "zonos--loading" }, h("zonos-spinner", { key: '49168e9057d08233654abfa0ca36138d205ca283', size: 30 }), this.loadingTitle && (h("zonos-text", { key: 'ed89b9b21e30b0e670b296306ed9b797f2baa75e', class: "zonos--loading-title", size: "l", weight: 700 }, this.loadingTitle)), this.loadingText && (h("zonos-text", { key: '7770dbdcf4e1fb630e0ed6c08dc4830edf00d1f0', class: "zonos--loading-text" }, this.loadingText)))), (this.headerText || !this.noCloseButton) && (h("div", { key: 'c171e207af502ef02de35803c480d927edea3ce4', class: "zonos--header" }, this.headerText && (h("h3", { key: '03999b1441d3a0dc983fed2e64680211f4a59793', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'e2954d9326195df3029c0771481881e6485fae05', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), h("div", { key: 'ba456d3747bd51ada021ed909a41e5768ceed4ab', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '2da7a3c7a978bb520c255a0043f96bf15b2dd006' })), h("slot", { key: '38ec2165a11c9cc2b121122124482590f9cd31e9', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '81e4de1e59970996607f7d0f2f2aef7937f82c43' })), h("slot", { key: '3fcd369711a347b9e2d2840fc708e928e17d5da1', name: "dialog-footer" })))));
     }
     static get assetsDirs() { return ["assets"]; }
 };

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

@@ -1,16 +1,16 @@
 import { r as registerInstance, d as createEvent, h, a as Host, g as getElement } from './index-cfd394c8.js';
-import { t as throttle_1 } from './throttle-44bfb6b5.js';
-import { U as extractName, b as stripeStore, t as trackConversionEvent, H as stripeStoreOnChange, u as stripeStorePrefetchLandedCost, d as cartStore } from './cart-5282f6c1.js';
-import { s as storageStore, z as getFallbackDefaultCountryCode, t as translate, y as storageStoreOnChange, l as localizationStore } from './localization-0953a048.js';
-import { z as zonosStore, g as getZonosStoreTheme, f as zonosStoreFontFamily } from './zonosStore-b7d3f9b0.js';
+import { t as throttle_1 } from './throttle-c4c24e86.js';
+import { U as extractName, b as stripeStore, t as trackConversionEvent, H as stripeStoreOnChange, u as stripeStorePrefetchLandedCost, d as cartStore } from './cart-2e407f7b.js';
+import { s as storageStore, B as getFallbackDefaultCountryCode, t as translate, A as storageStoreOnChange, l as localizationStore } from './localization-36a4dc22.js';
+import { z as zonosStore, g as getZonosStoreTheme, f as zonosStoreFontFamily } from './zonosStore-eca1e364.js';
 import { l as logError, i as isCheckoutMobile, s as sendErrorLog } from './handleFetch-a844cac1.js';
 import { a as shouldRenderTaxIdInput, s as shouldRenderShortAddressCodeInput } from './shouldRenderTaxIdInput-ef7b5860.js';
 import { c as classes } from './classes-0d95c529.js';
 import { l as log } from './VarianceTest-572cecf5.js';
 import { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-63a14057.js';
-import { g as getBorderRadius } from './getBorderRadius-dc982fe6.js';
-import './debounce-c8d67b17.js';
-import './isDarkColor-039ef212.js';
+import { g as getBorderRadius } from './getBorderRadius-1f7be586.js';
+import './debounce-84ade9c2.js';
+import './isDarkColor-939d8e9c.js';
 import './ShortAddressCode-7620e622.js';
 
 /**
@@ -415,11 +415,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 (h(Host, { key: '195940efdd29696d99b1ab6524a53e6a03776c6a', class: classes([
+        return (h(Host, { key: '9b7a5340b839d63c64da03639bdfda5a11a5c25e', class: classes([
                 'zonos--address',
                 'zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, this.titleText && (h("zonos-text", { key: '968d5990fce9c1eb22cd10b58744e6d00f2e622d', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: 'ae6dd70dcaa5ecd3465c065736e0f31fb40e72d3', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), h("div", { key: '0bf3075670d3fcd945f9ddcbe096399e2dc213ed', class: "zonos--address-component" })));
+            ]) }, this.titleText && (h("zonos-text", { key: '23739f6a48e5698372df2d53098dea6ad1c0559a', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: 'dea4b437eedaad2af2f6bbe3a1e2ae4f0706aa13', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), h("div", { key: 'b4be684977a632371b9b6ff4587ccdd7bacc8c67', class: "zonos--address-component" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -551,13 +551,13 @@ const ZonosConfirmDialog = class {
         const borderStyle = getBorderRadius();
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = getZonosStoreTheme(zonosStore.appearance.theme);
-        return (h(Host, { key: 'dc074c5b88b642e06edd8942408a3aeed05e5cdb', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
+        return (h(Host, { key: '9ad8aff8631692fa53ef172869d98e9fbfbdc059', class: 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': zonosStoreFontFamily(),
-            } }, h("div", { key: '119a9c201e44a670fb1df61f6663d96f7148ecc6', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '9534a92f69dd3d692c1a2fd86fa1cf148f68cdfa', class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: 'e79aaf3a80b57634f78575b15a75d7b549ed20ee', class: "zonos--confirm-dialog", onBlur: () => {
+            } }, h("div", { key: '6d7c55b90bfb05890d876a0243558eb9a2e7a772', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: 'abf306ddd70cefd64aa6804aeccf700506c175d7', class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: 'dc7e9e6d501872597928603ded57d82c15c26710', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, h("div", { key: '44367b178f46c66dfb236485e05f6832ae63a63b', class: "wrapper" }, h("div", { key: '42d10d17180ec7364710682c27d6cd4fef0b8abe', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: 'b5f7563fb43e1b147db669e1df71f4fafb5284df', class: "content" }, h("div", { key: '38b78e383833b5e49908c8e95c35b9ad23c0f956', class: "title" }, h("zonos-text", { key: '726f5308881671e7e17bd0591521485bd7142c1e', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '58d663842d51a512b3c8799a907bd1ed58e4fb31', class: "subtitle" }, h("zonos-text", { key: '4411400d8906a22fd5f31652a1eeb314cae8ad68', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'df0452b2af633dd558858db824336fd5925aef50', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: '50f88e85e18129ef4ee209615b951683c5ff6fa8', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '314b8be8954241b8c261c62d5a4bbe8155cc6914', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, h("div", { key: '5c1fa9ec8b59cba68ccbc5dc36e66e2fdefdeae5', class: "wrapper" }, h("div", { key: '0ce48c41c78e393a181fd5e9beeac90622b5c620', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: 'b42157f8e76de8a60190e384d7d53a36d8051c67', class: "content" }, h("div", { key: 'bd8eb897f15a6d095df8fbd1803f62a11b9d5d7b', class: "title" }, h("zonos-text", { key: 'd1c06b89d4917b2366f881dda7da9e1369722126', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '4f1269aaab5ad3965d6ddfc0949341d4f202f296', class: "subtitle" }, h("zonos-text", { key: 'f784b5dd86ff684e790f27a586e3eeb4ac683884', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'e0403a968aee6ff878c9e916e9ff216e2052ab0c', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: '66e34a9d61f677786bfe286f377854c9ebc780ed', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), 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 getElement(this); }
@@ -791,7 +791,7 @@ const ZonosLoadingOverlay = class {
         this.size = 40;
     }
     render() {
-        return (h(Host, { key: 'e284a5ada0945f1895dbd9b40039e9d2ef600111', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: 'fb68155fe133ba8cd1d923a0fbb37a382ecabc34', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: '50dc3d4b1f53173240d23ffeac966f7463546fde', size: this.size, spinnerColor: this.spinnerColor }))));
+        return (h(Host, { key: '8cafd99b309b04da5cf1b26b0f0804f4699c06b2', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: '9ce7ac9b7e6956a5f76fc2105fa7f5d05299fd36', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: '4be3a8d471e3aead2e4194c4ecbf66878a7a3f17', size: this.size, spinnerColor: this.spinnerColor }))));
     }
 };
 ZonosLoadingOverlay.style = ZonosLoadingOverlayStyle0;

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

@@ -1,12 +1,12 @@
 import { r as registerInstance, d as createEvent, h, a as Host, g as getElement } from './index-cfd394c8.js';
-import { b as airwallexStore, c as collectStore, f as airwallexStoreInitSdk, l as createElement, m as airwallexStoreGetLocale, n as airwallexStoreOnChange } from './collect-fdbab973.js';
-import { d as cartStore } from './cart-5282f6c1.js';
-import { e as localizationStoreOnChange, t as translate, l as localizationStore } from './localization-0953a048.js';
-import { z as zonosStore } from './zonosStore-b7d3f9b0.js';
+import { b as airwallexStore, c as collectStore, f as airwallexStoreInitSdk, l as createElement, m as airwallexStoreGetLocale, n as airwallexStoreOnChange } from './collect-19428e18.js';
+import { d as cartStore } from './cart-2e407f7b.js';
+import { e as localizationStoreOnChange, t as translate, l as localizationStore } from './localization-36a4dc22.js';
+import { z as zonosStore } from './zonosStore-eca1e364.js';
 import { l as log } from './VarianceTest-572cecf5.js';
 import { l as logError } from './handleFetch-a844cac1.js';
-import './isDarkColor-039ef212.js';
-import './getBorderRadius-dc982fe6.js';
+import './isDarkColor-939d8e9c.js';
+import './getBorderRadius-1f7be586.js';
 import './TaxId-63a14057.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/esm/zonos-badge.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, a as Host } from './index-cfd394c8.js';
-import { f as zonosStoreFontFamily } from './zonosStore-b7d3f9b0.js';
+import { f as zonosStoreFontFamily } from './zonosStore-eca1e364.js';
 import { c as classes } from './classes-0d95c529.js';
 import './VarianceTest-572cecf5.js';
 
@@ -46,16 +46,16 @@ const ZonosBadge = class {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: 'c8d29084d1a10f985bcb52409881fff004a73118', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '95c8a620e803b4ea84d7789ff746d1edc1252389', class: classes(['zonos--elements zonos--badge']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '28cd3711c8e8d6b362c56589553401707456fdc6', class: classes([
+            } }, h("div", { key: '000fb2efaa9cffa4635e89e700013bcc1f9fd63c', class: classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: '9dcb72621037e37fc11d5cabe915f6dad9798c2a', textColor: `${this.badgeColor}-800` }, h("slot", { key: '7599b4c4689100dc637a3842287a93a42b4edd41' })), this.dismissHandler && (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, h("zonos-text", { key: '8c84abeb697dd20f6c1acbd2f512a5bac2c45883', textColor: `${this.badgeColor}-800` }, h("slot", { key: 'b5bc9ed235747f2986fd7a1c94cbede4b8ffc715' })), this.dismissHandler && (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/esm/zonos-banner.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, a as Host } from './index-cfd394c8.js';
-import { f as zonosStoreFontFamily } from './zonosStore-b7d3f9b0.js';
+import { f as zonosStoreFontFamily } from './zonosStore-eca1e364.js';
 import { c as classes } from './classes-0d95c529.js';
 import './VarianceTest-572cecf5.js';
 

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

@@ -1,10 +1,10 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-cfd394c8.js';
-import { z as zonosStore, f as zonosStoreFontFamily } from './zonosStore-b7d3f9b0.js';
+import { z as zonosStore, f as zonosStoreFontFamily } from './zonosStore-eca1e364.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-dc982fe6.js';
+import { g as getBorderRadius } from './getBorderRadius-1f7be586.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
-import { i as isDarkColor } from './isDarkColor-039ef212.js';
+import { i as isDarkColor } from './isDarkColor-939d8e9c.js';
 import { s as styles } from './styles-6fc2fad9.js';
 import './VarianceTest-572cecf5.js';
 
@@ -207,13 +207,13 @@ const ZonosButton = class {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '6e6b961c9215370bdbfce09715d1a16d878d2d85', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: 'df2bfe5807583d29166ccb7f5da28dcf5b41dcd3', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--color': color,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--font-weight': this.bold ? 'bold' : 'normal',
-            }) }, h("button", Object.assign({ key: '3941358241e37fb19b2ace0fa0d892002c6967f0' }, this.inheritedAttributes, { class: classes([
+            }) }, h("button", Object.assign({ key: '18c6ba3797948296d847a8deed8784ee34b93113' }, this.inheritedAttributes, { class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -228,7 +228,7 @@ const ZonosButton = class {
                 backgroundColor && variant === 'standard' && 'override-background',
             ]), disabled: disabled, style: {
                 justifyContent: this.justifyContent,
-            } }), this.loading && (h("div", { key: '769b699dd66e0e5f960efe018b0be7fed2a2ecd3', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'e7be35423da99ccc0bf9ba2269f030f0c2ea9223', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'cacea287ce83b46f57aae7753805d8bf4e580f82', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }), this.loading && (h("div", { key: 'b468795b69f4e20f7d0ca2c915b95080a53092e4', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '368ea5d9cdb641140d78e55ac1874cbfd6b48db0', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '41ecf6db38ca534ed99fd8c2f6020bbfe99cddc9', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get delegatesFocus() { return true; }
     get ele() { return getElement(this); }