@zonos/elements 1.3.184 → 1.3.186

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

@@ -1,762 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-d82f06f2.js';
-import { e as cartStore, f as stripeStore, t as trackConversionEvent, V as getFallbackDefaultCountryCode, r as translate, l as localizationStore } from './cart-3fb04f1f.js';
-import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-d3c5a0a5.js';
-import { b as logError, l as log, i as isCheckoutMobile } from './handleFetch-621e45bc.js';
-import { i as isTextContainsNonLatinChars, c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
-import { c as classes } from './classes-0d95c529.js';
-import { R as RemoveIcon$1 } from './RemoveIcon-9dc5dd1a.js';
-import { g as getBorderRadius } from './getBorderRadius-ada3ccad.js';
-import { i as isDarkColor } from './isDarkColor-446fccb7.js';
-
-const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h .zonos--company-name-input.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
-const ZonosAddressStyle0 = zonosAddressCss;
-
-const ZonosAddress = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.invalidCharacters = createEvent(this, "invalidCharacters", 7);
-        /**
-         * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
-         */
-        this.isAutoCompleteAdjusted = false;
-        /**
-         * Check if the tracking event is sent
-         */
-        this.trackingSent = false;
-        this.type = undefined;
-        this.titleText = undefined;
-        this.defaultAddress = [];
-        this.stripe = window.Zonos.stripe;
-        this.isDirtyAddress = false;
-        this.isAddressFilled = false;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
-    }
-    getStripeAddressInstance() {
-        if (this.type === 'billing') {
-            return {
-                stripeAddressElement: stripeStore.stripeBillingAddressElement,
-                stripeAddressEventData: stripeStore.stripeBillingAddressEventData,
-                stripeElements: stripeStore.stripeElementsForBillingAddress,
-            };
-        }
-        return {
-            stripeAddressElement: stripeStore.stripeAddressElement,
-            stripeAddressEventData: stripeStore.stripeAddressEventData,
-            stripeElements: stripeStore.stripeElements,
-        };
-    }
-    updateAddressEventData({ event, type, }) {
-        switch (type) {
-            case 'billing':
-                stripeStore.stripeBillingAddressEventData = event;
-                break;
-            default: {
-                stripeStore.stripeAddressEventData = event;
-                break;
-            }
-        }
-    }
-    isAddressFilledChanged() {
-        // Sometimes address elements is loaded with prefilled data before checkout is loaded, need to not send the event if checkout session id is not available, and send the event after checkout is loaded
-        if (!cartStore.checkoutSessionId) {
-            return;
-        }
-        // Only need to track the event if the shipping address is filled
-        if (this.isAddressFilled &&
-            !this.trackingSent &&
-            this.type === 'shipping') {
-            this.trackingSent = true;
-            const checkoutSessionId = cartStore.checkoutSessionId;
-            void trackConversionEvent({
-                checkoutSessionId,
-                eventName: 'checkout_customerInfoFilled',
-            });
-        }
-    }
-    updateAddressElement({ stripeAddressElement, type, }) {
-        if (type === 'shipping') {
-            stripeStore.stripeAddressElement = stripeAddressElement;
-            return;
-        }
-        stripeStore.stripeBillingAddressElement = stripeAddressElement;
-    }
-    async watchInitStripe() {
-        this.stripe = window.Zonos.stripe;
-        const { stripeAddressEventData, stripeElements } = this.getStripeAddressInstance();
-        if (!this.stripe || !stripeElements) {
-            logError("Stripe is not initialized. Couldn't load stripe element.");
-            return;
-        }
-        // remove phone from default address if it's not provided, stripe
-        // will throw error if key phone exist and its value is empty or 'undefined'.
-        const defaultAddress = this.defaultAddress.map(address => (Object.assign(Object.assign({}, address), { name: address.name, phone: address.phone || undefined })));
-        const shippableCountries = localizationStore.shippingZoneCountries;
-        const shippingZone = shippableCountries
-            ? Object.values(shippableCountries).map(country => country.code)
-            : [];
-        // Show all countries in checkout if the query param is present
-        const checkoutAllCountries = new URLSearchParams(window.location.search).has('zonosCheckoutAllCountries');
-        const allowedCountries = this.type === 'shipping' ? shippingZone : [];
-        const defaultAddressCountry = (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
-            getFallbackDefaultCountryCode(allowedCountries);
-        log(`Stripe country code: ${defaultAddressCountry}`, 'info');
-        const addressElement = stripeElements.create('address', {
-            allowedCountries: checkoutAllCountries ? [] : allowedCountries,
-            // only show the default address if stripeAddressEventData is not provided
-            contacts: defaultAddress.length && !stripeAddressEventData
-                ? this.defaultAddress
-                : [],
-            defaultValues: {
-                address: Object.assign(Object.assign({}, stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address), { country: defaultAddressCountry }),
-                firstName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName,
-                lastName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName,
-                phone: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone,
-            },
-            display: {
-                name: 'split',
-            },
-            fields: {
-                phone: 'always',
-            },
-            mode: this.type,
-            validation: {
-                phone: {
-                    required: 'always',
-                },
-            },
-        });
-        addressElement.mount(this.el.querySelector('.zonos--address-component'));
-        addressElement.on('change', event => {
-            const eventValue = event.value;
-            if (!this.isDirtyAddress && eventValue.address.line1.length >= 3) {
-                this.isDirtyAddress = true;
-                // stripe element started with just address line 1, so scroll bar is not yet available. Wait for a moment before scrolling
-                setTimeout(() => {
-                    if (!this.isAutoCompleteAdjusted) {
-                        const googleAutoComplete = this.el.querySelector('iframe[src*="autocomplete-suggestions"]');
-                        if (googleAutoComplete) {
-                            googleAutoComplete.style.zIndex = '2';
-                        }
-                        this.isAutoCompleteAdjusted = true;
-                    }
-                    // scroll directly into view if it's mobile
-                    if (isCheckoutMobile()) {
-                        this.el.scrollIntoView({ behavior: 'smooth', block: 'end' });
-                    }
-                    else {
-                        // scroll into the end of the page so the address placeholder won't be hidden
-                        const yOffset = this.type === 'shipping' ? 100 : 600;
-                        const parentWrapper = this.el.closest('.zonos--group');
-                        const y = this.el.getBoundingClientRect().top + yOffset;
-                        parentWrapper === null || parentWrapper === void 0 ? void 0 : parentWrapper.scrollTo({ behavior: 'smooth', top: y });
-                    }
-                }, 600);
-            }
-            this.updateAddressEventData({
-                event: Object.assign(Object.assign({}, event), { elementMode: this.type, elementType: 'address', value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ')[1] }) }),
-                type: this.type,
-            });
-        });
-        this.updateAddressElement({
-            stripeAddressElement: addressElement,
-            type: this.type,
-        });
-    }
-    defaultAddressChanged(newAddress, oldAddress) {
-        // check if stringified json of oldAddress is different from newAddress
-        const oldAddressString = JSON.stringify(oldAddress);
-        const newAddressString = JSON.stringify(newAddress);
-        // No need to reset address element if the default address is the same
-        if (oldAddressString === newAddressString) {
-            return;
-        }
-        log('Reset address element when default address property is changed', 'info', {
-            defaultAddress: this.defaultAddress,
-        });
-        const stripeElement = this.getStripeAddressInstance().stripeAddressElement;
-        stripeElement === null || stripeElement === void 0 ? void 0 : stripeElement.clear();
-        stripeElement === null || stripeElement === void 0 ? void 0 : stripeElement.destroy();
-        // Reset stripe address event data
-        if (this.type === 'shipping') {
-            stripeStore.stripeAddressEventData = null;
-        }
-        else {
-            stripeStore.stripeBillingAddressEventData = null;
-        }
-        void this.watchInitStripe();
-    }
-    renderCompanyNameInput() {
-        var _a;
-        // No need to render company name for billing address
-        if (this.type === 'billing') {
-            return null;
-        }
-        // No need to render company name if it's not enabled
-        if (!((_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.companyNameInputEnabled)) {
-            // Clear the company name when it's not enabled
-            stripeStore.companyName = '';
-            return null;
-        }
-        return (h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: translate('Company name (optional)'), inputValue: stripeStore.companyName, onInputChange: (event) => {
-                stripeStore.companyName = event.detail;
-            } }));
-    }
-    disconnectedCallback() {
-        // destroy the stripe element when this component is removed from the DOM, so that we can re-create the new one with previous value
-        const stripeElement = this.getStripeAddressInstance().stripeAddressElement;
-        stripeElement === null || stripeElement === void 0 ? void 0 : stripeElement.destroy();
-    }
-    componentDidLoad() {
-        const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
-        this.isDirtyAddress =
-            !!stripeAddressEventData &&
-                stripeAddressEventData.value.address.line1.length > 0;
-        // @Watch doesn't get trigger on initial load
-        void this.watchInitStripe();
-    }
-    render() {
-        var _a;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
-        if ((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) {
-            this.isAddressFilled = true;
-        }
-        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'f31fc745e5c024dd2b594a26a0a81ebe3a5f8060', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '7b51df49edb4d7abbff9733b1e220771caca7f12', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), h("div", { key: '781cd2076d8319979bb5ed2ea3bb24dfa97f7010', class: "zonos--address-component" })));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "checkoutSessionId": ["isAddressFilledChanged"],
-        "isAddressFilled": ["isAddressFilledChanged"],
-        "stripe": ["watchInitStripe"],
-        "defaultAddress": ["defaultAddressChanged"]
-    }; }
-};
-ZonosAddress.style = ZonosAddressStyle0;
-
-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 ZonosAddressDisplay = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.currentAddress = undefined;
-        this.addressType = undefined;
-    }
-    render() {
-        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,
-        }))))));
-    }
-};
-ZonosAddressDisplay.style = ZonosAddressDisplayStyle0;
-
-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;
-
-const ZonosAddressForm = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.addressChange = createEvent(this, "addressChange", 7);
-        this.onInputChange = ({ key, value, }) => {
-            this.addressChange.emit(Object.assign(Object.assign({}, this.localAddress), { [key]: value }));
-        };
-        this.currentAddress = undefined;
-        this.translatedAddress = undefined;
-        this.addressType = undefined;
-        this.localAddress = this.currentAddress;
-    }
-    watchCurrentAddress() {
-        var _a, _b, _c, _d, _e, _f;
-        const { city, line1, line2, name, postal_code, state } = this.currentAddress;
-        // Update the local address when the current address changes
-        // If translated address is available, use that instead
-        this.localAddress = Object.assign(Object.assign({}, this.currentAddress), { city: ((_a = this.translatedAddress.city) === null || _a === void 0 ? void 0 : _a[city]) || city, line1: ((_b = this.translatedAddress.line1) === null || _b === void 0 ? void 0 : _b[line1]) || line1, line2: ((_c = this.translatedAddress.line2) === null || _c === void 0 ? void 0 : _c[line2]) || line2, name: ((_d = this.translatedAddress.name) === null || _d === void 0 ? void 0 : _d[name]) || name, postal_code: ((_e = this.translatedAddress.postal_code) === null || _e === void 0 ? void 0 : _e[postal_code]) || postal_code, state: ((_f = this.translatedAddress.state) === null || _f === void 0 ? void 0 : _f[state]) || state });
-    }
-    componentWillLoad() {
-        this.watchCurrentAddress();
-    }
-    render() {
-        const { city, country, line1, line2, name, phone, postal_code, state } = this.localAddress;
-        const firstName = name.split(' ')[0] || '';
-        // get the rest of the name if it exists
-        const lastName = name.split(' ').slice(1).join(' ') || '';
-        return (h(Host, { key: '8b578737e33203a23563be7e9be0778deec99bbf', class: "zonos--address-form zonos--elements" }, h("div", { key: '793675a1348547bf3f781788956befe325191011', class: "zonos--title" }, h("zonos-text", { key: '13de35cb0a7c98a48342e3fb86ae3ade9f5b88d9', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
-            ? translate('Shipping')
-            : translate('Billing'))), h("div", { key: '2c5de5b5283fb99ee5f8b61d7a217177986fc2db', class: "zonos--address-group" }, h("div", { key: '23bf3c893071000d5995a5f175867bab11929193', class: "zonos--contact" }, h("zonos-text", { key: '7cdfe2a84ebad89ba5b16498d75def99cf392384', type: "label" }, translate('Contact')), h("zonos-input", { key: '1c39c38767fd306c5eb1164cdc989b8291209cf0', class: "zonos--form-email", inputLabel: translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), h("div", { key: 'cbdf61217125e22b1a6cec9a340ef0aca2c75670', class: "zonos--name zonos--address-row" }, h("zonos-input", { key: '360c99e7b2c6caa64580d5768b5bb53368927275', 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: '8ce5fa5c15c6f7928339ea10009ce0e68954a91f', 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: '7b4fa2d3baa6cb257e7688e5ba6777123898b3fd', class: "zonos--address" }, h("zonos-text", { key: '9d5782331b2642755a755aeb7f98c9f4d87f9a20', type: "label" }, translate('Address')), h("zonos-input", { key: 'a622025924ca86bdbf1d3c04b79e6dee172b4c42', class: "zonos--form-country", inputLabel: translate('Country'), inputValue: country, isDisabled: true }), h("zonos-input", { key: 'f99b3a74db09ab5730878e80705b9aeac76bf800', 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: '5d16aefa45a78045c87d166aaaec0255606e455e', 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: 'dc166be9381142835d72e731cb38a718522a068a', class: "zonos--address-row" }, h("zonos-input", { key: '4f1a98f9d10ce0cff3ef18a3037a12382552b31d', class: "zonos--form-city", inputLabel: translate('City'), inputValue: city, isError: isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), h("zonos-input", { key: 'd4f97900b5fe2e1619950a52d1d1f716a8bc19ff', 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: 'cf1eb0ca5cd15c8412a2e1246aaf2e39361dc733', 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: '7421c82847eded6bdbcce49ef8196124d8e50c1d', 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"]
-    }; }
-};
-ZonosAddressForm.style = ZonosAddressFormStyle0;
-
-const zonosAddressUpdateDialogCss = ":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:32px;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{overflow:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:8px;-ms-scroll-chaining:none;overscroll-behavior:contain}:host .zonos--group::-webkit-scrollbar{width:10px}:host .zonos--group::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}:host .zonos--group::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}:host .zonos--group::-webkit-scrollbar-thumb:hover{background:#d6d6d6}:host .zonos--address-display-group{display:-ms-flexbox;display:flex;gap:8px;margin-bottom:20px}:host .zonos--address-display-group zonos-address-display{-ms-flex:1;flex:1}:host .zonos--what-you-entered{margin-bottom:8px}:host .zonos--address-form-section{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}: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--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--update-btn{-ms-flex-order:1;order:1}";
-const ZonosAddressUpdateDialogStyle0 = zonosAddressUpdateDialogCss;
-
-const ZonosAddressUpdateDialog = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.closeUpdateDialog = createEvent(this, "closeUpdateDialog", 7);
-        this.continueClicked = createEvent(this, "continueClicked", 7);
-        /**
-         * handler for close button click
-         */
-        this.closeUpdateDialogHandler = () => {
-            this.closeUpdateDialog.emit();
-        };
-        /**
-         * Extract value from translated object
-         */
-        this.getTranslatedAddress = ({ currentAddress, translatedAddress, }) => {
-            var _a, _b, _c, _d, _e, _f;
-            const { city, line1, line2, name, postal_code, state } = currentAddress;
-            return {
-                city: ((_a = translatedAddress.city) === null || _a === void 0 ? void 0 : _a[city]) || city,
-                line1: ((_b = translatedAddress.line1) === null || _b === void 0 ? void 0 : _b[line1]) || line1,
-                line2: ((_c = translatedAddress.line2) === null || _c === void 0 ? void 0 : _c[line2]) || line2,
-                name: ((_d = translatedAddress.name) === null || _d === void 0 ? void 0 : _d[name]) || name,
-                postal_code: ((_e = translatedAddress.postal_code) === null || _e === void 0 ? void 0 : _e[postal_code]) || postal_code,
-                state: ((_f = translatedAddress.state) === null || _f === void 0 ? void 0 : _f[state]) || state,
-            };
-        };
-        /**
-         * handler for continue button click
-         */
-        this.continueClickHandler = async () => {
-            var _a, _b, _c;
-            // set spinner for the continue button
-            this.continueLoading = true;
-            const translatedBillingAddress = this.billingAddress
-                ? this.getTranslatedAddress({
-                    currentAddress: this.billingAddress,
-                    translatedAddress: this.translatedBillingAddressState,
-                })
-                : null;
-            const translatedShippingAddress = this.getTranslatedAddress({
-                currentAddress: this.shippingAddress,
-                translatedAddress: this.translatedShippingAddressState,
-            });
-            // check to see if there are still non-latin characters in the translated address
-            const shippingNonlatinChars = containsNonLatinChars(Object.assign(Object.assign({}, translatedShippingAddress), { country: this.shippingAddress.country }));
-            // get list of non-latin characters field in the billing address
-            const billingNonLatinChars = translatedBillingAddress &&
-                this.billingAddress &&
-                containsNonLatinChars(Object.assign(Object.assign({}, translatedBillingAddress), { country: this.billingAddress.country }));
-            const shippingHasNonLatinChars = !!Object.keys(shippingNonlatinChars)
-                .length;
-            const billingHasNonLatinChars = !!billingNonLatinChars && !!Object.keys(billingNonLatinChars).length;
-            // if there are non-latin characters in the translated address, scroll to the error input so user can see and fix it
-            if (shippingHasNonLatinChars || billingHasNonLatinChars) {
-                // get scroll top of the first input has "has-error" class
-                const addressForms = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('zonos-address-form');
-                const shippingAddressForm = addressForms === null || addressForms === void 0 ? void 0 : addressForms[0];
-                const billingAddressForm = addressForms === null || addressForms === void 0 ? void 0 : addressForms[1];
-                const errorInput = ((_b = shippingAddressForm === null || shippingAddressForm === void 0 ? void 0 : shippingAddressForm.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.has-error')) ||
-                    ((_c = billingAddressForm === null || billingAddressForm === void 0 ? void 0 : billingAddressForm.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.has-error'));
-                // scroll to the first error input
-                if (errorInput) {
-                    errorInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                }
-                this.continueLoading = false;
-                return;
-            }
-            // Submit the translated address to the parent component
-            this.continueClicked.emit({
-                billingAddress: translatedBillingAddress,
-                shippingAddress: translatedShippingAddress,
-            });
-        };
-        /**
-         * This function builds a state object for a translated address.
-         * It takes the current and translated address as input and returns an object where each field is an object itself.
-         * The key of each field's object is the current address's field value and the value is the corresponding translated address's field value.
-         *
-         * @param {Object} params - The parameters for the function.
-         * @param {EnteredInfo} params.currentAddress - The current address information.
-         * @param {EnteredInfo} params.translatedAddress - The translated address information.
-         *
-         */
-        this.buildTranslateAddressState = ({ currentAddress, translatedAddress, }) => {
-            const { city, line1, line2, name, postal_code, state } = currentAddress;
-            return {
-                city: {
-                    [city]: translatedAddress.city,
-                },
-                line1: {
-                    [line1]: translatedAddress.line1,
-                },
-                line2: {
-                    [line2]: translatedAddress.line2,
-                },
-                name: {
-                    [name]: translatedAddress.name,
-                },
-                postal_code: {
-                    [postal_code]: translatedAddress.postal_code,
-                },
-                state: {
-                    [state]: translatedAddress.state,
-                },
-            };
-        };
-        this.continueLoading = false;
-        this.dialogLoading = undefined;
-        this.dialogOpen = false;
-        this.submitBtnType = undefined;
-        this.submitBtnColor = undefined;
-        this.isMobile = false;
-        this.shippingAddress = undefined;
-        this.billingAddress = undefined;
-        this.translatedShippingAddress = undefined;
-        this.translatedBillingAddress = undefined;
-        this.showErrorBanner = false;
-        this.translatedShippingAddressState = {};
-        this.translatedBillingAddressState = {};
-    }
-    watchTranslatedShippingAddress() {
-        this.translatedShippingAddressState = this.translatedShippingAddress;
-    }
-    watchTranslatedBillingAddress() {
-        this.translatedBillingAddressState = this.translatedBillingAddress;
-    }
-    componentWillLoad() {
-        // update the state with the initial props
-        this.watchTranslatedBillingAddress();
-        this.watchTranslatedShippingAddress();
-    }
-    render() {
-        // dialog background white, so when the button background is also white, we need to change the button type to outline so it's visible
-        const submitBtnColor = this.submitBtnColor || zonosStore.appearance.colorSecondary;
-        const submitBtnType = submitBtnColor === '#ffffff'
-            ? 'outline'
-            : this.submitBtnType || 'standard';
-        const billing = this.billingAddress;
-        const shipping = this.shippingAddress;
-        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: '66abf7b74045e68e84e631298504236d32ca9c4e', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon$1 }), noBackground: true, onClick: () => this.closeUpdateDialogHandler() })), h("zonos-text", { key: 'ffb3d8f169867d5f6dff269e1becd99c98c5a7da' }, translate('To ensure delivery all address details must be in Latin characters.'))), h("div", { key: '2cb61f06ce174e2317870decfdd337c67c5cf128', class: "zonos--group" }, h("zonos-text", { key: 'a616c540984120b468e52bccfb380ea3974ced22', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translate('What you entered')), h("div", { key: '6ac8f9c14472370c501af1b0d50bd8f8746b7694', class: "zonos--address-display-group" }, h("zonos-address-display", { key: 'ea2c67a7bba51c99f80be968e448beeffcf1f863', addressType: "shipping", currentAddress: shipping }), billing && (h("zonos-address-display", { key: '7ea1683dc04a292810e04ed6550d86086f25186f', addressType: "billing", currentAddress: billing }))), h("div", { key: '4d1cd9096943518b8b4e267608a5e1542befb6a9', class: "zonos--address-form-section" }, h("zonos-text", { key: 'e4184a2cc618d26d43979fa8cfe06070cf8b5af8', type: "semiBoldLabel" }, translate('Translated address')), h("zonos-address-form", { key: 'c55d9d3c658565ceb7c7b879f444e3937b9f7ad6', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
-                const address = e.detail;
-                this.translatedShippingAddressState =
-                    this.buildTranslateAddressState({
-                        currentAddress: shipping,
-                        translatedAddress: address,
-                    });
-            }, translatedAddress: this.translatedShippingAddressState }), billing && (h("zonos-address-form", { key: 'c3facc295b1322bb00baa6081f343dcea4f10777', addressType: "billing", class: "zonos--billing-address-form", currentAddress: billing, onAddressChange: e => {
-                const address = e.detail;
-                this.translatedBillingAddressState =
-                    this.buildTranslateAddressState({
-                        currentAddress: billing,
-                        translatedAddress: address,
-                    });
-            }, translatedAddress: this.translatedBillingAddressState })))), h("div", { key: '1c89c9604ba0dece40275fcfac97e7f93706b430', class: "zonos--group-btn" }, h("div", { key: 'e47d393940b094b4e123864e4070daa87f0616f0', class: "zonos--button-wrapper" }, h("zonos-button", { key: '216b7afe268a4acd6bb8a76b7f5a32dc09bdd4f6', class: "zonos--cancel-btn", onClick: () => this.closeUpdateDialogHandler(), variant: "subtle" }, translate('Cancel')), h("zonos-button", { key: 'acbacb92cedb325b46843d8f3aff13f4e7c86ab5', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, translate('Update address'))))))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "translatedShippingAddress": ["watchTranslatedShippingAddress"],
-        "translatedBillingAddress": ["watchTranslatedBillingAddress"]
-    }; }
-};
-ZonosAddressUpdateDialog.style = ZonosAddressUpdateDialogStyle0;
-
-const colorPrefixes = [
-    'blue',
-    'cyan',
-    'green',
-    'orange',
-    'purple',
-    'red',
-    'gray',
-    'glass',
-];
-
-const zonosCheckboxCss = ":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{display:-ms-inline-flexbox;display:inline-flex;cursor:pointer}:host label{display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:8px;-ms-flex-align:center;align-items:center}:host label.disabled{cursor:not-allowed;opacity:0.6}:host input[type=checkbox]{opacity:0;position:absolute;left:0;width:0;height:0;top:0;z-index:-99999}:host svg{opacity:0}:host .checkmark-container{height:var(--zonos--size);width:var(--zonos--size);background-color:transparent;border:1.5px solid var(--zonos-elements-gray-400);position:relative;border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-4))}:host .checkmark{opacity:0;position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;width:calc(100% + 3px);-webkit-transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:scale(0.4);transform:scale(0.4);background-color:var(--zonos--background-color);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-4))}:host input[type=checkbox]:checked~.checkmark-container .checkmark{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
-const ZonosCheckboxStyle0 = zonosCheckboxCss;
-
-const ZonosCheckbox = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.checkboxSelected = createEvent(this, "checkboxSelected", 7);
-        this.backgroundColor = 'blue';
-        this.label = undefined;
-        this.isChecked = false;
-        this.isDisabled = false;
-        this.size = 12;
-        this.fontSize = 'base';
-        this.borderStyle = undefined;
-    }
-    onClick() {
-        if (this.isDisabled) {
-            return;
-        }
-        this.checkboxSelected.emit(!this.isChecked);
-    }
-    render() {
-        const isBackgroundVariable = colorPrefixes.includes(this.backgroundColor);
-        const backgroundColor = isBackgroundVariable
-            ? `var(--zonos-elements-${this.backgroundColor}-600)`
-            : this.backgroundColor;
-        const checkmarkColor = isBackgroundVariable
-            ? // use lighter color if the color is amino variable
-                `var(--zonos-elements-${this.backgroundColor}-200)`
-            : // if it's not an amino variable, use white if the background is dark, and dark if the background is light
-                !isDarkColor(backgroundColor)
-                    ? 'var(--zonos-elements-gray-800)'
-                    : 'var(--zonos-elements-gray-0)';
-        const borderStyle = getBorderRadius({
-            customRoundRadius: '4px',
-            overrideBorderStyle: this.borderStyle,
-        });
-        return (h(Host, { key: '7a2972128b04d5dffe09f60b5292d90f7201066a', class: classes(['zonos--elements zonos--checkbox']), style: {
-                '--zonos--background-color': backgroundColor,
-                '--zonos--border-radius': borderStyle,
-                '--zonos--font-family': zonosStoreFontFamily(),
-                '--zonos--size': `${this.size}px`,
-            } }, h("label", { key: 'b18d0f091b783555b4b3a1fc2b5d5cb1c62a9d41', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'f3b86525ef7988d6df87f9147f5aa22b447c1303', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
-                this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '2007c2fbc4d8437f75b9a3d7a4e65d394922abf4', class: "checkmark-container" }, h("svg", { key: '481b9272c99cf464d8d88ab24a8dba35de921abf', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ab7690fba113135175248c8926907312dfe478d5', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '99689099e7469f2ff928619daa2fcee0ce35a418', size: this.fontSize }, this.label)))));
-    }
-};
-ZonosCheckbox.style = ZonosCheckboxStyle0;
-
-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;z-index:2147483009;background:var(--zonos-elements-gray-0);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10))}: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);
-        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();
-            }
-        };
-        this.open = false;
-        this.headerText = '';
-        this.width = '460px';
-        this.height = undefined;
-        this.minHeight = undefined;
-        this.noHeader = false;
-        this.noBodyPadding = false;
-        this.noBorder = false;
-        this.borderStyle = undefined;
-        this.noCloseButton = false;
-        this.noClickOutside = false;
-        this.mobile = false;
-        this.isLoading = true;
-        this.isMobile = false;
-    }
-    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: 'a9932187bccf8e7fa505c7e07175d03541d66852', 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: '0298cf365a50e3544656a6d27ae59e922b9e3aed', class: "zonos--backdrop" }), h("div", { key: '9fce580a07147d51f17c898a22204c3d9ce6ac7b', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: 'b168439cd985cc5c0166a653db206688504cf7dd', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'e0b6215f3c7bc939721669069bc294e08558d8b5', class: "zonos--loading" }, h("zonos-spinner", { key: '687bcd6d2695933de828484c34aff1230bf71d49', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '04a57a4add896e3d96faca8b77321bba5f00b889', class: "zonos--header" }, this.headerText && (h("h3", { key: 'd084cb3aedcb7e5bb8fd82012b57f441d7dce4a2', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '7b73bd57b8651fd3f3ebd29e3c252bd83d9375ee', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: '7af04c281b6410b87bfe53913e74fa215f6de24b', class: classes([
-                'zonos--body',
-                this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '8c6ce4437d2bc98f9eccea0280cee31794883b77' })), h("slot", { key: '11f97e705b3cc1bad11c037ede940d2f392d67e7', name: "dialog-footer" })))));
-    }
-    static get assetsDirs() { return ["assets"]; }
-};
-ZonosDialog.style = ZonosDialogStyle0;
-
-const validateEmailValue = (value) => {
-    const emailRegex = /^[a-zA-Z0-9.%_+-]*@[a-zA-Z0-9][a-zA-Z0-9.-]*\.[a-zA-Z0-9]{2,}$/;
-    return emailRegex.test(value);
-};
-
-const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:16px}.sc-zonos-link-authentication-h .zonos--input-invalid.sc-zonos-link-authentication{border:2px solid var(--zonos-elements-red-600);border-radius:var(--zonos--border-radius)}";
-const ZonosLinkAuthenticationStyle0 = zonosLinkAuthenticationCss;
-
-const ZonosLinkAuthentication = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.linkAuthenticationChange = createEvent(this, "linkAuthenticationChange", 7);
-        this.setCustomEmailInputToLinkEvent = (emailValue) => {
-            // check if the email is valid
-            const isValid = validateEmailValue(emailValue);
-            const simulateLinkEvent = {
-                complete: !!isValid,
-                elementType: 'linkAuthentication',
-                empty: !emailValue,
-                value: {
-                    email: emailValue,
-                },
-            };
-            stripeStore.stripeLinkEventData = simulateLinkEvent;
-        };
-        this.handleNormalEmailInput = (event) => {
-            var _a;
-            const inputValue = event.detail;
-            this.setCustomEmailInputToLinkEvent(inputValue);
-            (_a = this.linkAuthenticationChange) === null || _a === void 0 ? void 0 : _a.emit();
-        };
-        this.titleText = undefined;
-        this.defaultEmail = null;
-        this.isEmailError = false;
-        this.stripe = stripeStore.stripe;
-        this.isStagingMode = cartStore.isStagingMode;
-        this.clientSecret = stripeStore.clientSecret;
-    }
-    watchIsStagingMode() {
-        // Wait for the DOM to be ready before re-initializing Link element
-        setTimeout(() => {
-            this.watchInitStripe();
-        }, 0);
-    }
-    watchInitStripe() {
-        if (!this.stripe || !stripeStore.stripeElements) {
-            return;
-        }
-        // No need to initialize link if this is staging mode since we will render the email input field
-        if (cartStore.isStagingMode || !this.clientSecret) {
-            return;
-        }
-        const defaultValues = this.defaultEmail
-            ? {
-                email: this.defaultEmail,
-            }
-            : undefined;
-        // Create and mount the Authentication Element in ${type} mode
-        const linkAuthenticationElement = stripeStore.stripeLinkElement ||
-            stripeStore.stripeElements.create('linkAuthentication', {
-                defaultValues: defaultValues,
-            });
-        const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
-        if (!linkAuthenticationElementContainer) {
-            logError('Cannot find container element for linkAuthenticationElement');
-            return;
-        }
-        linkAuthenticationElement.mount(linkAuthenticationElementContainer);
-        linkAuthenticationElement.on('change', event => {
-            var _a;
-            stripeStore.stripeLinkEventData = event;
-            (_a = this.linkAuthenticationChange) === null || _a === void 0 ? void 0 : _a.emit();
-        });
-        stripeStore.stripeLinkElement = linkAuthenticationElement;
-    }
-    watchDefaultEmail(newDefaultEmail, oldDefaultEmail) {
-        var _a, _b;
-        log('Default email is changed', 'info', {
-            newDefaultEmail,
-            oldDefaultEmail,
-        });
-        if (oldDefaultEmail === newDefaultEmail) {
-            return;
-        }
-        if (!newDefaultEmail) {
-            stripeStore.stripeLinkEventData = null;
-        }
-        // Only set value for Stripe input input to stripeLinkEventData when checkout is in staging mode
-        if (cartStore.isStagingMode) {
-            this.setCustomEmailInputToLinkEvent(newDefaultEmail || '');
-            return;
-        }
-        (_a = stripeStore.stripeLinkElement) === null || _a === void 0 ? void 0 : _a.clear();
-        (_b = stripeStore.stripeLinkElement) === null || _b === void 0 ? void 0 : _b.destroy();
-        stripeStore.stripeLinkElement = null;
-        stripeStore.stripeLinkEventData = null;
-        log('Reset stripe link element when default email is changed', 'info', {
-            defaultEmail: newDefaultEmail,
-        });
-        setTimeout(() => {
-            void this.watchInitStripe();
-        }, 5);
-    }
-    componentDidLoad() {
-        // @Watch doesn't get trigger on initial load
-        this.watchInitStripe();
-        if (!this.defaultEmail) {
-            return;
-        }
-        // set default email value to stripeLinkEventData if default email is provided
-        this.setCustomEmailInputToLinkEvent(this.defaultEmail);
-    }
-    render() {
-        this.isStagingMode = cartStore.isStagingMode;
-        this.clientSecret = stripeStore.clientSecret;
-        const renderEmailAddress = () => {
-            var _a;
-            if (cartStore.isStagingMode) {
-                return (h("zonos-stripe-input", { inputLabel: translate('Email'), inputValue: this.defaultEmail ||
-                        ((_a = stripeStore.stripeLinkEventData) === null || _a === void 0 ? void 0 : _a.value.email) ||
-                        '', isError: this.isEmailError, onBlur: () => {
-                        var _a;
-                        const emailValue = ((_a = stripeStore.stripeLinkEventData) === null || _a === void 0 ? void 0 : _a.value.email) || '';
-                        if (!emailValue) {
-                            return;
-                        }
-                        // check if the email is valid
-                        const isValid = validateEmailValue(emailValue);
-                        this.isEmailError = !isValid;
-                    }, onInputChange: this.handleNormalEmailInput }));
-            }
-            return (h("div", { class: `zonos--link-authentication-component ${this.isEmailError && 'zonos--input-invalid'}` }));
-        };
-        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { class: "zonos--link-authentication zonos--elements", style: {
-                '--zonos--border-radius': getBorderRadius(),
-            } }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), renderEmailAddress(), this.isEmailError && (h("zonos-text", { textColor: "red-600" }, translate('Please enter a valid email address.')))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "isStagingMode": ["watchIsStagingMode"],
-        "stripe": ["watchInitStripe"],
-        "clientSecret": ["watchInitStripe"],
-        "defaultEmail": ["watchDefaultEmail"]
-    }; }
-};
-ZonosLinkAuthentication.style = ZonosLinkAuthenticationStyle0;
-
-export { ZonosAddress as zonos_address, ZonosAddressDisplay as zonos_address_display, ZonosAddressForm as zonos_address_form, ZonosAddressUpdateDialog as zonos_address_update_dialog, ZonosCheckbox as zonos_checkbox, ZonosDialog as zonos_dialog, ZonosLinkAuthentication as zonos_link_authentication };