@zonos/elements 1.3.281 → 1.3.283

package/dist/esm/{zonos-address-display_8.entry.js → zonos-address-completion-dialog_7.entry.js}

@@ -1,11 +1,12 @@
-import { r as registerInstance, h, a as Host, d as createEvent, g as getElement } from './index-cfd394c8.js';
-import { t as translate, l as localizationStore, s as storageStore, y as storageStoreOnChange } from './localization-6d36209f.js';
-import { i as isTextContainsNonLatinChars, c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
-import { V as extractName, b as stripeStore, u as stripeStorePrefetchLandedCost, t as trackConversionEvent } from './cart-c66ec17e.js';
+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-754e7e8b.js';
+import { z as zonosStore, f as zonosStoreFontFamily } from './zonosStore-b7d3f9b0.js';
+import { M as MIN_POSTAL_CODE_LENGTH } from './getMissingRequiredShippingFields-ebdccdcf.js';
 import { c as classes } from './classes-0d95c529.js';
+import { U as extractName, b as stripeStore, u as stripeStorePrefetchLandedCost, t as trackConversionEvent } from './cart-93c36159.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 { z as zonosStore, f as zonosStoreFontFamily } from './zonosStore-b7d3f9b0.js';
-import { R as RemoveIcon$2 } from './RemoveIcon-9dc5dd1a.js';
 import { t as throttle_1 } from './throttle-44bfb6b5.js';
 import { i as isCheckoutMobile } from './handleFetch-a844cac1.js';
 import { a as shouldRenderTaxIdInput, s as shouldRenderShortAddressCodeInput } from './shouldRenderTaxIdInput-ef7b5860.js';
@@ -16,31 +17,132 @@ import { i as isDarkColor } from './isDarkColor-039ef212.js';
 import './debounce-c8d67b17.js';
 import './ShortAddressCode-7620e622.js';
 
-const zonosAddressDisplayCss = ":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--title{margin-bottom:12px}:host .zonos--address-group{display:-ms-flexbox;display:flex;gap:4px;-ms-flex-direction:column;flex-direction:column}:host .zonos--address-line{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .zonos--address-line zonos-text+zonos-text::before{content:\", \";color:var(--zonos-elements-gray-1000);margin-right:4px}:host .zonos--country-flag{width:20px;height:14px;border-radius:2px;margin:1px;position:relative;overflow:hidden;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);margin-right:8px;z-index:10;justify-self:center}";
-const ZonosAddressDisplayStyle0 = zonosAddressDisplayCss;
+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}";
+const ZonosAddressCompletionDialogStyle0 = zonosAddressCompletionDialogCss;
 
-const ZonosAddressDisplay = class {
+const ZonosAddressCompletionDialog = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.closeCompletionDialog = createEvent(this, "closeCompletionDialog", 7);
+        this.completionSubmit = createEvent(this, "completionSubmit", 7);
+        /**
+         * Whether or not the continue button is loading
+         */
+        this.continueLoading = false;
+        /**
+         * Whether or not the dialog is open
+         */
+        this.dialogOpen = false;
+        /**
+         * Whether or not the dialog is rendered in mobile mode
+         */
+        this.isMobile = false;
+        /**
+         * The Zonos-required fields still missing from the selected address
+         */
+        this.missingFields = [];
+        /**
+         * Local values for the captured fields, keyed by the missing field key
+         */
+        this.values = {};
+        /**
+         * Whether to show validation errors (after a submit attempt with empty fields)
+         */
+        this.showError = false;
+        this.isFieldMissing = (key) => this.missingFields.some(field => field.key === key);
+        /**
+         * A captured field is valid when it has a value. Postal code additionally enforces the same
+         * minimum length as the landed-cost readiness / detection check, so the dialog can't emit a
+         * too-short postal code that would still be considered "missing" downstream.
+         */
+        this.isFieldValid = (key) => {
+            var _a, _b, _c;
+            if (key === 'postal_code') {
+                return (((_b = (_a = this.values.postal_code) === null || _a === void 0 ? void 0 : _a.trim().length) !== null && _b !== void 0 ? _b : 0) >= MIN_POSTAL_CODE_LENGTH);
+            }
+            return !!((_c = this.values[key]) === null || _c === void 0 ? void 0 : _c.trim());
+        };
+        this.getFieldError = (key) => this.showError && !this.isFieldValid(key);
+        this.updateValue = (key, value) => {
+            this.values = Object.assign(Object.assign({}, this.values), { [key]: value });
+            // Once the customer starts fixing the fields, re-evaluate whether errors remain
+            if (this.showError) {
+                this.showError = !this.isComplete();
+            }
+        };
+        this.isComplete = () => this.missingFields.every(field => {
+            // A missing last name also requires a first name (both are edited together).
+            if (field.key === 'lastName') {
+                return this.isFieldValid('firstName') && this.isFieldValid('lastName');
+            }
+            return this.isFieldValid(field.key);
+        });
+        this.submitHandler = () => {
+            if (!this.isComplete()) {
+                this.showError = true;
+                return;
+            }
+            this.completionSubmit.emit(this.values);
+        };
+        this.renderInput = ({ key, label, }) => (h("zonos-input", { class: `zonos--completion-input zonos--completion-${key}`, inputLabel: label, inputValue: this.values[key] || '', isError: this.getFieldError(key), onInputChange: (event) => this.updateValue(key, event.detail) }));
+        this.renderField = (key, label) => {
+            if (!this.isFieldMissing(key)) {
+                return null;
+            }
+            return this.renderInput({ key, label });
+        };
+        /**
+         * When the last name is missing, render both first and last name inputs so the customer can
+         * correct the full name together (Link's single name input often yields only a first name).
+         */
+        this.renderNameFields = () => {
+            if (!this.isFieldMissing('lastName')) {
+                return null;
+            }
+            return (h("div", { class: "zonos--completion-name-row" }, this.renderInput({
+                key: 'firstName',
+                label: translate('First name'),
+            }), this.renderInput({
+                key: 'lastName',
+                label: translate('Last name'),
+            })));
+        };
     }
-    render() {
+    /**
+     * The dialog stays mounted, so clear any previously-entered values whenever it opens.
+     * Without this, values typed for one address could be reapplied to a different address
+     * the next time the dialog opens.
+     */
+    // Only reset on open, not on `shippingAddress`: the parent rebuilds that prop object on
+    // every render, and watching it would wipe in-progress input while the dialog is open.
+    async watchDialogOpen(isOpen) {
         var _a;
-        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];
-        const renderEnteredInfoText = ({ bold, content, }) => {
-            const textColor = isTextContainsNonLatinChars(content)
-                ? 'red-600'
-                : 'gray-1000';
-            return (h("zonos-text", { textColor: textColor, type: bold ? 'boldLabel' : 'body' }, content));
-        };
-        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,
-        }))))));
+        if (isOpen) {
+            // Wait for shippingAddress prop to be updated before resetting the values
+            await new Promise(resolve => setTimeout(resolve, 100));
+            // When the last name is missing we also let the customer edit the first name, so prefill
+            // it from the current (often first-name-only) address value.
+            const { firstName } = extractName({ name: (_a = this.shippingAddress) === null || _a === void 0 ? void 0 : _a.name });
+            this.values = this.isFieldMissing('lastName') ? { firstName } : {};
+            this.showError = false;
+        }
     }
+    render() {
+        const submitBtnColor = this.submitBtnColor || zonosStore.appearance.colorSecondary;
+        // dialog background is white, so a white button needs an outline to stay visible
+        const submitBtnType = submitBtnColor === '#ffffff'
+            ? 'outline'
+            : this.submitBtnType || 'standard';
+        return (h(Host, { key: '9a89376022ebd8f5793882fb13a3502deca001f8', class: classes([
+                'zonos--address-completion-dialog zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("zonos-dialog", { key: '00ff3912a7bf8d021441440f0de2825b49f7b78e', isLoading: false, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeCompletionDialog.emit(), open: this.dialogOpen, width: "568px" }, h("div", { key: '1ba1cd333bd1f362a77f1f114ac50c309ed5ccd6', class: "zonos--body" }, h("div", { key: 'ccf9f54ff4b26e5443ff5c8276e5c5d36aac332b', class: "zonos--dialog-header" }, h("div", { key: '01e073aa559c4040a6599aefb3bf8cb967928929', class: "zonos--dialog-title" }, h("zonos-text", { key: '8472a72f6274646bb87d150c82722f93c861ae72', type: "title" }, translate('Complete your shipping address')), h("zonos-button", { key: 'e9a6c2cbc3d64bf87e94850c1126119687f75e7d', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon$1 }), noBackground: true, onClick: () => this.closeCompletionDialog.emit(), title: "Close checkout dialog" })), h("zonos-text", { key: 'c9ff785b746810f0c266071ee9a3f433ad645a2b' }, translate('This saved address is missing information required to ship internationally. Please add the details below.'))), h("div", { key: '86e2b0da7dbcd1370b80fc8c53e8a7de4c11ed74', class: "zonos--group" }, h("div", { key: '1542bb7f0b9df16f5ce36d38dc9408a1b3e836a7', class: "zonos--selected-address" }, h("zonos-text", { key: '2572e3e44a9c81f6694e4939de39951ec659c8fa', class: "zonos--selected-label", type: "semiBoldLabel" }, translate('Selected address')), h("zonos-address-display", { key: '8781622b3d057cfbdba59e13d5fabf76f3a7a7dd', addressType: "shipping", currentAddress: this.shippingAddress })), h("div", { key: 'ac3a5f6566c2179045a784b661b7e82c7b371a3f', class: "zonos--completion-fields" }, this.renderNameFields(), this.renderField('state', translate('State/Province')), this.renderField('postal_code', translate('Postal code')))), h("div", { key: '1007d7f6c671fbd94dd3027332d2d7ac1edeef6e', class: "zonos--group-btn" }, h("div", { key: '22fe2c8d03d7b3c680eea2b4afebf1868b5b6c0b', class: "zonos--button-wrapper" }, h("zonos-button", { key: 'dbcf1aa175992bff762ecc36108bf94090b7df0e', class: "zonos--cancel-btn", onClick: () => this.closeCompletionDialog.emit(), variant: "subtle" }, translate('Cancel')), h("zonos-button", { key: '63b0f966565e86ea9bac640b2fa690287c94b11f', backgroundColor: this.submitBtnColor, class: "zonos--submit-btn", loading: this.continueLoading, onClick: () => this.submitHandler(), size: "sm", variant: submitBtnType }, translate('Save and continue'))))))));
+    }
+    static get watchers() { return {
+        "dialogOpen": ["watchDialogOpen"]
+    }; }
 };
-ZonosAddressDisplay.style = ZonosAddressDisplayStyle0;
+ZonosAddressCompletionDialog.style = ZonosAddressCompletionDialogStyle0;
 
 const zonosAddressFormCss = ":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--title{margin-bottom:20px}:host .zonos--address-group{display:-ms-flexbox;display:flex;gap:20px;-ms-flex-direction:column;flex-direction:column;margin:1px}:host .zonos--contact{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;flex-direction:column}:host .zonos--address-row{display:-ms-flexbox;display:flex;gap:8px}:host .zonos--address-row>*{-ms-flex:1;flex:1}:host .zonos--address{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;flex-direction:column}";
 const ZonosAddressFormStyle0 = zonosAddressFormCss;
@@ -72,15 +174,15 @@ const ZonosAddressForm = class {
         const { firstName, lastName } = extractName({
             name,
         });
-        return (h(Host, { key: '45d9837eb2fa1799686031aae55b7a5b56683f44', class: "zonos--address-form zonos--elements" }, h("div", { key: '021635c62ccf3956099fbc4111a7cccacf87e6a1', class: "zonos--title" }, h("zonos-text", { key: 'f8a7f4423c3e1fe85d99f7a4baadfd8ec92c5e91', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
+        return (h(Host, { key: '44edb799473e427b08e17d6d20f08a028a3cc688', class: "zonos--address-form zonos--elements" }, h("div", { key: '99c2d5b58464bebd7bb3e5c2a4ac3aa04d80b47f', class: "zonos--title" }, h("zonos-text", { key: '5a86048c7d768b795db1416182e2b22458924601', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
             ? translate('Shipping')
-            : translate('Billing'))), h("div", { key: '3989feba67adc4921dc27f4b245391c933065d78', class: "zonos--address-group" }, h("div", { key: '909ef4b8f44902a16334051fb8cde1edd4f87f8b', class: "zonos--contact" }, h("zonos-text", { key: '301eb71e15a331a7423d547486b668009ce19bd0', type: "label" }, translate('Contact')), h("zonos-input", { key: '473f22469d0628db079298abb02a18f908225350', class: "zonos--form-email", inputLabel: translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), h("div", { key: 'eaa32450d028bfd8a197a3b1172a1316d6080962', class: "zonos--name zonos--address-row" }, h("zonos-input", { key: '82b3b902539cd2eb67bddfccc9146f91f7061538', class: "zonos--form-first-name", inputLabel: translate('First name'), inputValue: firstName, isError: isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
+            : translate('Billing'))), h("div", { key: 'a907058d970cb6674b403f79c0946e36a0e61f69', class: "zonos--address-group" }, h("div", { key: 'fad2f71614c6963015f95e74e297c58a4adee95b', class: "zonos--contact" }, h("zonos-text", { key: '0c661050b1b95da56af1046fac39c7fa6de18685', type: "label" }, translate('Contact')), h("zonos-input", { key: '3e35a5f9d4bca373ef9403da0de53ea895aca61f', class: "zonos--form-email", inputLabel: translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), h("div", { key: '093cdcc771b4ade381a392a1023d9d037d4e3e35', class: "zonos--name zonos--address-row" }, h("zonos-input", { key: 'e9d957551070a855179b78da655beaf3b4e731e2', class: "zonos--form-first-name", inputLabel: translate('First name'), inputValue: firstName, isError: isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
                 key: 'name',
                 value: `${e.detail} ${lastName}`,
-            }) }), h("zonos-input", { key: 'cf32104d4d575eb9d5843cf5d8701aebb02c4e3c', class: "zonos--form-last-name", inputLabel: translate('Last name'), inputValue: lastName, isError: isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
+            }) }), h("zonos-input", { key: '0b86805e872607d367446f5e6ef074974f9840c2', class: "zonos--form-last-name", inputLabel: translate('Last name'), inputValue: lastName, isError: isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
                 key: 'name',
                 value: `${firstName} ${e.detail}`,
-            }) }))), h("div", { key: 'd570f7e1849bcc9a8e1bc13a15195bb5ee9bf8f2', class: "zonos--address" }, h("zonos-text", { key: 'dec7847247e97ffa3dde6d04a1ccd17347d9e8c1', type: "label" }, translate('Address')), h("zonos-input", { key: '595f540e7feb57dada3ebcf93202a75492ff447f', class: "zonos--form-country", inputLabel: translate('Country'), inputValue: country, isDisabled: true }), h("zonos-input", { key: 'c7fa3e7736ceee4c23195179f9e50b9cd43aa25a', class: "zonos--form-line1", inputLabel: translate('Address line 1'), inputValue: line1, isError: isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), h("zonos-input", { key: 'e455495f96667f7228a5ed51fc67d080df0b7991', class: "zonos--form-line2", inputLabel: translate('Address line 2'), inputValue: line2, isError: isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), h("div", { key: '5312af811975d9a2e2809896d51ce992317af54d', class: "zonos--address-row" }, h("zonos-input", { key: '49537f098a054787550266d6a7698e6fe102cad6', class: "zonos--form-city", inputLabel: translate('City'), inputValue: city, isError: isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), this.currentAddress.state && (h("zonos-input", { key: '06d1c8c2e21300c300ddfbdaa4abaffef006793d', class: "zonos--form-state", inputLabel: translate('State/Province'), inputValue: state, isError: isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) }))), h("zonos-input", { key: '94081e11a3184e86eef1add3eee392c3e3afb11a', class: "zonos--form-postal-code", inputLabel: translate('Postal code'), inputValue: postal_code, isError: isTextContainsNonLatinChars(postal_code), onInputChange: e => this.onInputChange({ key: 'postal_code', value: e.detail }) }), h("zonos-input", { key: '00ce7f0931179ff2c86e2da0fc82eed71cd6af19', class: "zonos--form-phone", inputLabel: translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
+            }) }))), h("div", { key: '6447f55e8d173d18cd46cba829527c4d487631a2', class: "zonos--address" }, h("zonos-text", { key: '18ef146cc44f658524c6535e851281b62249fa26', type: "label" }, translate('Address')), h("zonos-input", { key: '95cfb115c4304e8a142ab2e952fc8c4bfbe39e43', class: "zonos--form-country", inputLabel: translate('Country'), inputValue: country, isDisabled: true }), h("zonos-input", { key: 'e3774713ec0b0e861981aa9f2c62f6749125e174', class: "zonos--form-line1", inputLabel: translate('Address line 1'), inputValue: line1, isError: isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), h("zonos-input", { key: '0d1fce85ad42e42b266ad411d4e3a96e4b8b8bf3', class: "zonos--form-line2", inputLabel: translate('Address line 2'), inputValue: line2, isError: isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), h("div", { key: '5d5e740b711ff65a0366a6c4891f22684f32c74b', class: "zonos--address-row" }, h("zonos-input", { key: '8f124a91865c59096ba5c624ec229a3d1545c985', class: "zonos--form-city", inputLabel: translate('City'), inputValue: city, isError: isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), this.currentAddress.state && (h("zonos-input", { key: '50e852953ba88573929a200bce4c67fab2146245', class: "zonos--form-state", inputLabel: translate('State/Province'), inputValue: state, isError: isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) }))), h("zonos-input", { key: '74c17f1d1a77af3f90100a6832b2c8fe7bdca24e', class: "zonos--form-postal-code", inputLabel: translate('Postal code'), inputValue: postal_code, isError: isTextContainsNonLatinChars(postal_code), onInputChange: e => this.onInputChange({ key: 'postal_code', value: e.detail }) }), h("zonos-input", { key: '20775c4a944fe9305446898109637e5b38229a1d', class: "zonos--form-phone", inputLabel: translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
     }
     static get watchers() { return {
         "translatedAddress": ["watchCurrentAddress"]
@@ -88,7 +190,7 @@ const ZonosAddressForm = class {
 };
 ZonosAddressForm.style = ZonosAddressFormStyle0;
 
-const RemoveIcon$1 = `<svg color="var(--zonos-elements-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--zonos-elements-gray-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
+const RemoveIcon = `<svg color="var(--zonos-elements-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--zonos-elements-gray-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
 const zonosAddressSuggestionsCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:relative}:host .wrapper{position:absolute;margin-top:4px;top:100%;left:0;right:0;z-index:3;max-height:300px;overflow-y:auto;border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));-webkit-box-shadow:var(--zonos-elements-shadow-select-active);box-shadow:var(--zonos-elements-shadow-select-active);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;list-style:none;padding:0;background-color:var(--zonos-elements-surface-color)}:host .wrapper .option{padding:8px;background-color:var(--zonos-elements-surface-color);outline:none;border:none;text-align:left}:host .wrapper .option.last-hovered{background-color:var(--zonos-elements-gray-100)}:host .wrapper .option .highlight{font-weight:600;color:var(--zonos-elements-gray-1000)}:host .wrapper>.powered-by{padding:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}:host .wrapper>.powered-by .powered-by-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:5px;-ms-flex:1;flex:1}:host .wrapper>.suggestion{cursor:pointer}:host .wrapper>.suggestion:hover{background-color:var(--zonos-elements-gray-100)}";
 const ZonosAddressSuggestionsStyle0 = zonosAddressSuggestionsCss;
@@ -166,9 +268,9 @@ const ZonosAddressSuggestions = class {
         return segments;
     }
     render() {
-        return (h(Host, { key: '93cce2d783f3b0eba378027d2450d13451e6ce18', class: "zonos--address-suggestions", role: "group", style: {
+        return (h(Host, { key: '20e095515d18016bd1f538bd345ed58aafe8518f', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, h("ul", { key: 'e577d8dea6fb9a225f8361e5ba48601a74b8614d', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: '8f4c74b030f50ed03133a443e4b9a41869c18571', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '0288a70a89c25ce227e918ad91db0b77efa42a82', class: "powered-by-container" }, h("zonos-text", { key: '2d2fe2711d2b72a4077a417ed37d9b6897184525', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: 'a7ef3f738fc67a03fa2c935c128666945ad838a0', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: 'ebe5ccc2e0315867c4dbe3c030cf4e44312d691c', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon$1 }), noBackground: true, onClick: () => {
+            } }, 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: () => {
                 this.localSuggestions = [];
             } }))), this.localSuggestions.map(suggestion => (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
@@ -351,7 +453,7 @@ const ZonosAddressUpdateDialog = class {
         return (h(Host, { key: '655845cef04f4af526b1a1c4e49243c4f2b4c7f6', class: classes([
                 'zonos--address-update-dialog zonos--elements',
                 this.isMobile && 'mobile',
-            ]) }, h("zonos-dialog", { key: 'eab429bb78ce6f05ba463d8748d7edd5499402fa', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeUpdateDialog.emit(), open: this.dialogOpen, width: "568px" }, h("div", { key: '08f0400e62addfcaffd91bf5200999d29bbd2da9', class: "zonos--body" }, h("div", { key: '8699df5e2f823e19066fbb552ba2a66c127c05e9', class: "zonos--dialog-header" }, h("div", { key: '92e0ff932dcdb0e5b59ea34b688d1ef8e31bfeb3', class: "zonos--dialog-title" }, h("zonos-text", { key: 'aaac3375526bddb319ce7c8f49bde30da7210264', type: "title" }, translate('Update your address')), h("zonos-button", { key: '474cc2421cd3150daa46bfe215da6ae7df9c6087', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon$2 }), noBackground: true, onClick: () => this.closeUpdateDialogHandler(), title: "Close checkout dialog" })), h("zonos-text", { key: '6d019250cce57e8b30dd790a184df7273bdb234f' }, translate('To ensure delivery all address details must be in Latin characters.'))), h("div", { key: '80ee681844f4f4f43fce69d977b634b1fbc3d5f5', class: "zonos--group" }, h("zonos-text", { key: '940e510eceec156a74f32de84cf58ffebd796435', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translate('What you entered')), h("div", { key: 'f626127f5c399c29ab1022deb66aaee8f8a49601', class: "zonos--address-display-group" }, h("zonos-address-display", { key: '9dfcba1037325c3a1f9e82b8e4797e7872dd7e3f', addressType: "shipping", currentAddress: shipping }), billing && (h("zonos-address-display", { key: 'fee8ae2c6786d735133c2a0a42f3e3d40d7f9ea9', addressType: "billing", currentAddress: billing }))), h("div", { key: '5a82195018ff8cdfd1126f4424062a26c25ee757', class: "zonos--address-form-section" }, h("zonos-text", { key: 'f694dfad166697e4c034cea51057133b69b1c144', type: "semiBoldLabel" }, translate('Translated address')), h("zonos-address-form", { key: '4a99c841cf4800de43c612cce3d56d956d02c22f', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
+            ]) }, h("zonos-dialog", { key: 'eab429bb78ce6f05ba463d8748d7edd5499402fa', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeUpdateDialog.emit(), open: this.dialogOpen, width: "568px" }, h("div", { key: '08f0400e62addfcaffd91bf5200999d29bbd2da9', class: "zonos--body" }, h("div", { key: '8699df5e2f823e19066fbb552ba2a66c127c05e9', class: "zonos--dialog-header" }, h("div", { key: '92e0ff932dcdb0e5b59ea34b688d1ef8e31bfeb3', class: "zonos--dialog-title" }, h("zonos-text", { key: 'aaac3375526bddb319ce7c8f49bde30da7210264', type: "title" }, translate('Update your address')), h("zonos-button", { key: '474cc2421cd3150daa46bfe215da6ae7df9c6087', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon$1 }), noBackground: true, onClick: () => this.closeUpdateDialogHandler(), title: "Close checkout dialog" })), h("zonos-text", { key: '6d019250cce57e8b30dd790a184df7273bdb234f' }, translate('To ensure delivery all address details must be in Latin characters.'))), h("div", { key: '80ee681844f4f4f43fce69d977b634b1fbc3d5f5', class: "zonos--group" }, h("zonos-text", { key: '940e510eceec156a74f32de84cf58ffebd796435', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translate('What you entered')), h("div", { key: 'f626127f5c399c29ab1022deb66aaee8f8a49601', class: "zonos--address-display-group" }, h("zonos-address-display", { key: '9dfcba1037325c3a1f9e82b8e4797e7872dd7e3f', addressType: "shipping", currentAddress: shipping }), billing && (h("zonos-address-display", { key: 'fee8ae2c6786d735133c2a0a42f3e3d40d7f9ea9', addressType: "billing", currentAddress: billing }))), h("div", { key: '5a82195018ff8cdfd1126f4424062a26c25ee757', class: "zonos--address-form-section" }, h("zonos-text", { key: 'f694dfad166697e4c034cea51057133b69b1c144', type: "semiBoldLabel" }, translate('Translated address')), h("zonos-address-form", { key: '4a99c841cf4800de43c612cce3d56d956d02c22f', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
                 const address = e.detail;
                 this.translatedShippingAddressState =
                     this.buildTranslateAddressState({
@@ -394,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));
@@ -458,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 = '';
@@ -505,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) {
@@ -656,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 {
@@ -1082,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,
@@ -1133,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({
@@ -1162,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,
@@ -1195,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,
@@ -1211,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,
@@ -1225,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,
@@ -1241,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({
@@ -1282,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;
@@ -1302,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;
@@ -1312,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: 'dae45101b0b661fb0f392507cbc2642c65e72499', class: classes([
+        return (h(Host, { key: '5baf00df63a693613f493a84c906898080dcbfa2', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: '73081aa1f08f5617bc10fcd57f057abd3efd0c35', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: '4cfd89cca3254564b51f45a4a29d1f8a13bf03d1', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: 'f5079e30a1eadceffaac7fef5aa5296b1f9f480b', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: 'fcbd1bac9e06e91c9e4a229d63852df9fea08c58', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1331,121 +1465,11 @@ const ZonosAddress = class {
         "phone": ["formFieldsChanged"],
         "postalCode": ["formFieldsChanged"],
         "state": ["formFieldsChanged"],
-        "addressService": ["shouldEnabledCustomAddressChanged"],
-        "shippingZones": ["shippingZonesChanged"]
+        "addressService": ["shouldEnabledCustomAddressChanged"]
     }; }
 };
 ZonosAddress.style = ZonosCustomAddressStyle0;
 
-const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;
-
-const zonosDialogCss = ":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--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0;top:0;background:var(--zonos-elements-backdrop-color);position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;gap:4px;z-index:2147483009;background:var(--zonos-elements-gray-0);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10))}:host .zonos--loading-text,:host .zonos--loading-title{max-width:100%;padding:0 32px;text-align:center}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--zonos-elements-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:2147483008;background:var(--zonos-elements-gray-0);max-width:90vw;max-height:90vh;min-height:var(--zonos--min-height, auto);height:var(--zonos--height, auto);width:var(--zonos--width, auto);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));outline:none;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:16px 24px}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--zonos-elements-size-md);height:var(--zonos-elements-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--zonos-elements-radius-10);-ms-flex-item-align:start;align-self:flex-start}:host .zonos--header .zonos--close-button:hover{background:var(--zonos-elements-hover-color)}:host .zonos--body{padding:8px 24px;max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:16px 24px}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:2147483008;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:2147483009;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
-const ZonosDialogStyle0 = zonosDialogCss;
-
-const ZonosDialog = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.closeDialog = createEvent(this, "closeDialog", 3);
-        /**
-         * Whether or not the dialog is open
-         * @default false
-         */
-        this.open = false;
-        /**
-         * The header text for the dialog
-         */
-        this.headerText = '';
-        /**
-         * The width of the dialog
-         * @default 460px
-         */
-        this.width = '460px';
-        /**
-         * Whether or not to show the header
-         * @default false
-         */
-        this.noHeader = false;
-        /**
-         * Whether or not to have body padding
-         * @default false
-         */
-        this.noBodyPadding = false;
-        /**
-         * Whether or not to have body padding
-         * @default false
-         */
-        this.noBorder = false;
-        /**
-         * Whether or not to show the close button
-         * @default false
-         */
-        this.noCloseButton = false;
-        /**
-         * Whether or not to close the dialog when clicking outside of it
-         * @default false
-         */
-        this.noClickOutside = false;
-        /**
-         * Flag to determine if the checkout is on mobile
-         */
-        this.mobile = false;
-        /**
-         * Load loading spinner for the dialog or not
-         */
-        this.isLoading = true;
-        this.isMobile = false;
-        this.isMobileMode = () => {
-            return this.mobile || window.innerWidth <= 768;
-        };
-        this.closeButtonHandler = () => {
-            // Only do the action if the dialog is open
-            if (!this.open) {
-                return;
-            }
-            this.closeDialog.emit();
-        };
-        this.clickOutsideDialogHandler = (event) => {
-            if (event.target === event.currentTarget && !this.noClickOutside) {
-                this.closeDialog.emit();
-            }
-        };
-    }
-    handleWindowResize() {
-        this.isMobile = this.isMobileMode();
-    }
-    handleKeyDown(ev) {
-        if (ev.key === 'Escape') {
-            this.closeButtonHandler();
-        }
-    }
-    componentDidLoad() {
-        this.isMobile = this.isMobileMode();
-    }
-    render() {
-        const borderStyle = getBorderRadius({
-            overrideBorderStyle: this.borderStyle,
-        });
-        return (h(Host, { key: '75ec5025b26d1c68daa95198bfe4defa9b4fccbb', class: classes([
-                'zonos--elements',
-                this.open && 'open',
-                this.isLoading && 'is-loading',
-                this.noBorder && 'no-border',
-                this.isMobile && 'mobile',
-            ]), style: {
-                '--zonos--border-radius': borderStyle,
-                '--zonos--font-family': zonosStoreFontFamily(),
-                '--zonos--height': this.height || 'initial',
-                '--zonos--min-height': this.minHeight || '500px',
-                '--zonos--width': this.width,
-            } }, h("div", { key: '5d10176ce2b772fb8fd29f43ff45eb8ec0e4f891', class: "zonos--backdrop" }), h("div", { key: '2aa211aebf328b30d69cc32030964c68d9114380', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: 'ae077f398158ca708065bf3f2cc60c36730e16df', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'b11ef43cb4a663495bfd5dfe636df98fb692f2e3', class: "zonos--loading" }, h("zonos-spinner", { key: 'df7b43c923a59ab16d56c56034f19e2ebf367c68', size: 30 }), this.loadingTitle && (h("zonos-text", { key: 'c2a9c49f41272ae535a2dfc3f6c97d91552729a2', class: "zonos--loading-title", size: "l", weight: 700 }, this.loadingTitle)), this.loadingText && (h("zonos-text", { key: 'c5a4be389ec0c5c8b9e7b126d69f39b334bd9c7c', class: "zonos--loading-text" }, this.loadingText)))), (this.headerText || !this.noCloseButton) && (h("div", { key: '21884f1a119c2b1d241b746ae27f9ebe68795b94', class: "zonos--header" }, this.headerText && (h("h3", { key: '77036606a70a57f250facdd1b95726c35807c151', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '93eafa70b68ebbc0be89b6cec54aadba9bdb91ef', 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: '182ed04b1a14981aa5b679da8a1a556fcc413137', class: classes([
-                'zonos--body',
-                this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '65ad39c50b318b39e585301de2aeea6ef61db487' })), h("slot", { key: 'a60bb6eeee719852350584d6ff983d699f6ae84e', name: "dialog-footer" })))));
-    }
-    static get assetsDirs() { return ["assets"]; }
-};
-ZonosDialog.style = ZonosDialogStyle0;
-
 // This file is a workaround for a bug in web browsers' "native"
 // ES6 importing system which is uncapable of importing "*.json" files.
 // https://github.com/catamphetamine/libphonenumber-js/issues/239
@@ -7339,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();
@@ -7418,27 +7451,28 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (h(Host, { key: 'e1bde9efe262f4605448b6ae6f9e18070090e6c8', class: classes([
+        return (h(Host, { key: '14478c1db0acc4651d9433f71fefa8bd18b28a61', 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: '17b929a5e37d86964c23f2954bf1aed3ca3e0b4f', 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: 'cdc9f75fa9a8fd81ab565614729d33b3b54b1ba9', 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: '75f827c7fa3bec95a441d75b04f815736f63d075', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, h("select", { key: 'a34d728be2b100874a2fb2a91e12b77988602b3a', 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: '7299389121bb37f5444c8feecc349fc7663fd645', class: "zonos--input-group" }, h("div", { key: 'ffd81d520f2ffeeb0473606ffe529704d0539999', class: "zonos--select-wrapper" }, h("div", { key: '66a8c7b1fc41c8ced6ebe2b5d87d93d3fb34283a', class: "zonos--country-select" }, h("div", { key: 'e938804c0e0aa9e52810b8d07cb0d7948c451eb5', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '1883e18a2318bf871e061c744a095dd8e5a905cc', class: "zonos--country-select-selected" }, h("div", { key: 'ae46b163ef58d71398c317ed5ceba1844fc52edc', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: 'f4d18cf60a089675852f8f0fca82055fa879a7b7', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: '1724ccaef84c39504ee9f2fb364d38c2b979185d', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: 'e5c45c7d4ca3fd5244803f083e6fae502e4253fa', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '9cfb2da1d454c6b9e0a64b4327ce515cf6aa72da', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), h("div", { key: '8324ec965cf0b637d4d7151728217407307b8707', class: classes([
+        })), h("div", { key: 'c8d76a0a1e9ca245f03a853440a691e1bb478093', class: "zonos--input-group" }, h("div", { key: '51ccfb533bb4560061c63aaed368fb6488cf9d87', class: "zonos--select-wrapper" }, h("div", { key: 'cd50bc9c8f2fd407f47e5bfd3eba18a3f8fe721f', class: "zonos--country-select" }, h("div", { key: '05581057f31568b3d50b054e9c7fbbad5be7c27a', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '04c5abdc6fdf7e71585896b426ec1ab00dc11f66', class: "zonos--country-select-selected" }, h("div", { key: '6750556068dbad185fadfba36268417974a43865', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: 'a611a41490d68f2763ae43ad0fd5c0c498d16bfe', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: 'eab8a6353cd865cffb1576f14fee6edd5dbd3383', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: 'b3b4b8c407ed68305b467590921bc57925077acd', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '7bc52fdcaf76bf6416d33442e844057b8d6e8121', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), h("div", { key: 'd0ad07b902ef0ff675a515c07ec6597c0d0b0aa2', class: classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, h("input", Object.assign({ key: 'eace24d4a50271012b8bb95609842edcc7f8926f' }, 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: '9c1b5249fa2a9041e8c3ed9adbf3de8af4e1f29f', class: "zonos--floated-label" }, h("label", { key: '6535de344f98dc6148ef17ffdcb6354f1e1014e1', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '0d696d74191e3738ceb94e6adb018589fa4ad9f3', textColor: "red-600" }, this.error))));
+            ]) }, h("input", Object.assign({ key: '5b12c7a228bf9736856c9ebf8ff7898cf0fc1889' }, 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: '04482f4bc210fb7ee6047972043f6b1942b25142', class: "zonos--floated-label" }, h("label", { key: '345c8e9d7ebc4aa8891c86a77a51f9bbd0088044', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: 'cd8805f31cc6b2c9d6052f4c11190dba1f242945', textColor: "red-600" }, this.error))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "countryCode": ["onCountryCodeChange"],
         "countryOptions": ["onCountryOptionsChange"],
         "selectedCountry": ["onSelectedCountryChange"],
         "inputValue": ["onPhoneNumberChange"]
@@ -7581,4 +7615,4 @@ const ZonosStripeSelect = class {
 };
 ZonosStripeSelect.style = ZonosStripeSelectStyle0;
 
-export { ZonosAddressDisplay as zonos_address_display, ZonosAddressForm as zonos_address_form, ZonosAddressSuggestions as zonos_address_suggestions, ZonosAddressUpdateDialog as zonos_address_update_dialog, ZonosAddress as zonos_custom_address, ZonosDialog as zonos_dialog, ZonosStripePhoneInput as zonos_stripe_phone_input, ZonosStripeSelect as zonos_stripe_select };
+export { ZonosAddressCompletionDialog as zonos_address_completion_dialog, ZonosAddressForm as zonos_address_form, ZonosAddressSuggestions as zonos_address_suggestions, ZonosAddressUpdateDialog as zonos_address_update_dialog, ZonosAddress as zonos_custom_address, ZonosStripePhoneInput as zonos_stripe_phone_input, ZonosStripeSelect as zonos_stripe_select };