@zonos/elements 1.3.281 → 1.3.282

package/dist/esm/{paypal-cae1d404.js → paypal-7c82eac4.js}

@@ -1,6 +1,6 @@
 import { z as zonosStore, c as createStore } from './zonosStore-b7d3f9b0.js';
-import { t as trackConversionEvent, w as isPolicyConsentRequired, E as policyConsentStore, A as validateCheckoutSession, b as stripeStore, d as cartStore, l as stripeStoreHandleInventoryCheck, y as storeCreditStoreApplyCredit, J as stripeStoreRecordPolicyConsent, z as storeCreditStoreCoversFullAmount, B as storeCreditStoreCreateOrder, v as cartStoreNextStep, h as cartStoreClearCheckoutInterval, I as storeCreditStoreGetEffectiveAmount } from './cart-c66ec17e.js';
-import { t as translate, s as storageStore } from './localization-6d36209f.js';
+import { t as trackConversionEvent, w as isPolicyConsentRequired, E as policyConsentStore, A as validateCheckoutSession, b as stripeStore, d as cartStore, l as stripeStoreHandleInventoryCheck, y as storeCreditStoreApplyCredit, J as stripeStoreRecordPolicyConsent, z as storeCreditStoreCoversFullAmount, B as storeCreditStoreCreateOrder, v as cartStoreNextStep, h as cartStoreClearCheckoutInterval, I as storeCreditStoreGetEffectiveAmount } from './cart-5282f6c1.js';
+import { t as translate, s as storageStore } from './localization-0953a048.js';
 import { h as handleFetch, g as getIsTestMode, l as logError, j as jsonParse } from './handleFetch-a844cac1.js';
 import { i as isContrastColor } from './isContrastColor-089de6ac.js';
 import { l as log } from './VarianceTest-572cecf5.js';

package/dist/esm/{placeTestOrder-955269d2.js → placeTestOrder-6a746207.js}

@@ -1,5 +1,5 @@
-import { d as cartStore } from './cart-c66ec17e.js';
-import { s as storageStore } from './localization-6d36209f.js';
+import { d as cartStore } from './cart-5282f6c1.js';
+import { s as storageStore } from './localization-0953a048.js';
 import { l as logError, h as handleFetch } from './handleFetch-a844cac1.js';
 
 const placeTestOrder = async () => {

package/dist/esm/{renderCheckoutCurrency-951386a5.js → renderCheckoutCurrency-44f897a1.js}

@@ -1,5 +1,5 @@
-import { d as cartStore } from './cart-c66ec17e.js';
-import { w as applyInclusiveEffectiveRate, h as currencyFormat } from './localization-6d36209f.js';
+import { d as cartStore } from './cart-5282f6c1.js';
+import { w as applyInclusiveEffectiveRate, h as currencyFormat } from './localization-0953a048.js';
 
 const getDisplayCurrency = () => {
     var _a, _b;

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-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 { 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 { 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({
@@ -1312,10 +1414,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: '1e90973654268e1af1e98bf606f71d55c63f5656', 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: 'f986a00640502fb262cc424e57f5edb1f4cdbb9c', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: '57ae4b8393e350b99112e6a7800a97d6a524d57c', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1337,115 +1439,6 @@ const ZonosAddress = class {
 };
 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
@@ -7418,24 +7411,24 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (h(Host, { key: 'e1bde9efe262f4605448b6ae6f9e18070090e6c8', class: classes([
+        return (h(Host, { key: 'd89450cd871f6220d00b325157e8b9213f1eede6', 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: '7ec4d175288776584c2938ecb97ec3ddf862e782', 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: 'e4366c1c6ab1a2368a29948f1766978aa8fa580d', 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: '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([
                 '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: '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))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7581,4 +7574,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 };