@zonos/elements 1.3.15-alpha.3 → 1.3.15

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

@@ -0,0 +1,631 @@
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-e063389c.js';
+import { k as stripeStore, d as logError, l as localizationStore, t as translate } from './cart-462e89a6.js';
+import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
+import { i as isTextContainsNonLatinChars, c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
+import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-33ff08ff.js';
+import { c as classes } from './classes-0d95c529.js';
+import { R as RemoveIcon$1 } from './RemoveIcon-f6715b36.js';
+import { g as getBorderRadius } from './getBorderRadius-567f1786.js';
+import { i as isDarkColor } from './isDarkColor-7f62035a.js';
+
+const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--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-banner.sc-zonos-address{margin-top:8px}";
+const ZonosAddressStyle0 = zonosAddressCss;
+
+const ZonosAddress = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.invalidCharacters = createEvent(this, "invalidCharacters", 7);
+        this.type = undefined;
+        this.titleText = undefined;
+        this.defaultAddress = null;
+        this.stripe = window.Zonos.stripe;
+        this.isDirtyAddress = false;
+    }
+    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;
+        }
+    }
+    updateAddressElement({ stripeAddressElement, type, }) {
+        if (type === 'shipping') {
+            stripeStore.stripeAddressElement = stripeAddressElement;
+            return;
+        }
+        stripeStore.stripeBillingAddressElement = stripeAddressElement;
+    }
+    async watchInitStripe() {
+        var _a, _b;
+        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;
+        }
+        const phone = (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.phone;
+        if (!phone) {
+            // 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'.
+            (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
+        }
+        const shippableCountries = localizationStore.shippingZoneCountries;
+        const shippingZone = shippableCountries
+            ? Object.values(shippableCountries).map(country => country.code)
+            : [];
+        const addressElement = stripeElements.create('address', {
+            allowedCountries: this.type === 'shipping' ? shippingZone : [],
+            // only show the default address if stripeAddressEventData is not provided
+            contacts: this.defaultAddress && !stripeAddressEventData
+                ? [this.defaultAddress]
+                : [],
+            defaultValues: {
+                address: Object.assign(Object.assign({}, stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address), { country: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
+                        localizationStore.selectedCountryCode ||
+                        'AL' }),
+                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(() => {
+                    // 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,
+        });
+    }
+    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() {
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (h(Host, { key: 'f45a7bbe9d6b5ffac15671a862b3ad4f2eb4a87b', class: "zonos--address zonos--elements" }, h("zonos-text", { key: 'a9119e6e0c4e5c81a7d17ebe4d6bec925404a3dd', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '7dc12043c6e75ebabd646490c390bafdc2cd4a1d', class: "zonos--address-component" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "stripe": ["watchInitStripe"]
+    }; }
+};
+ZonosAddress.style = ZonosAddressStyle0;
+
+const zonosAddressDisplayCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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(--amino-gray-1200);margin-right:4px}:host .zonos--country-flag{width:20px;height:14px;border-radius:2px;margin:1px;position:relative;overflow:hidden;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-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-1200';
+            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(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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] || '';
+        const lastName = name.split(' ')[1] || '';
+        return (h(Host, { key: '9c1ee87200d1f90e9dfac58c49aabba1777373a9', class: "zonos--address-form zonos--elements" }, h("div", { key: 'eec3416268ff2324fd751408552705086905423d', class: "zonos--title" }, h("zonos-text", { key: 'a4c254f78420dcfc712e1a83b20dd3ac9e64c460', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
+            ? translate('Shipping')
+            : translate('Billing'))), h("div", { key: 'b8109545d282fb8c06a2e791c30088018d6ffec0', class: "zonos--address-group" }, h("div", { key: '833a395984cd75242e5d97697fd6566f11932d1b', class: "zonos--contact" }, h("zonos-text", { key: 'e60f574e95162aabf6465b878fc9b16c708e8029', type: "label" }, translate('Contact')), h("zonos-input", { key: '24cd24a362a1bbc76d0c91718c48ae32baa20ae6', class: "zonos--form-email", inputLabel: translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), h("div", { key: '84e64ef44eb3b39ac7ab542e07d7a52a95377cae', class: "zonos--name zonos--address-row" }, h("zonos-input", { key: '26621aca0d57a7fee743874b8d11af5f58c91b69', 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: '01e3e5038b4a4311dd5874a1213f936451dc300d', 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: 'eb42dece28082ff16a453110b3208de5b44b9fdb', class: "zonos--address" }, h("zonos-text", { key: '3557122c716533be7b36a8bd395ea616a7061665', type: "label" }, translate('Address')), h("zonos-input", { key: 'bcc7d84d530f2f3a10537117eb6ef143df7cc8e2', class: "zonos--form-country", inputLabel: translate('Country'), inputValue: country, isDisabled: true }), h("zonos-input", { key: '6ce78e25151a129b69b501cf768604134a395e85', 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: '6f7a18010e2d8131327154a31ba58544df56768c', 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: '48afbf7a3cbd26fddfea4f2799005a51b1c3d3c6', class: "zonos--address-row" }, h("zonos-input", { key: '6decf8c430d8d25b2c555b110009da74e0ac9e5f', 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: '065e1be213d3cfec7749ab32890f96b0b484a25a', 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: 'a69244bf84c9fd007c9ad4aad2b6cc6d44420775', 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: '0bcc89de1ecc4aae8a69d74eff42dfd117ada40b', 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(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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(--amino-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}:host .zonos--group::-webkit-scrollbar{width:10px}:host .zonos--group::-webkit-scrollbar-track{background:var(--amino-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(--amino-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.closeDialog = createEvent(this, "closeDialog", 7);
+        this.continueClicked = createEvent(this, "continueClicked", 7);
+        /**
+         * handler for close button click
+         */
+        this.closeDialogHandler = () => {
+            this.closeDialog.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: '03535edacb348258592641baa349e9dcf14bf78c', class: classes([
+                'zonos--address-update-dialog zonos--elements',
+                this.isMobile && 'mobile',
+            ]) }, h("zonos-dialog", { key: 'c16871425dffe955d422ffa5b9aee1ece0da2890', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialog.emit(), open: this.dialogOpen, width: "568px" }, h("div", { key: 'e4fad501f7cfedc5783774d8b1bf785d6947d3c8', class: "zonos--body" }, h("div", { key: '973e7a8097b8c8f60e47e6ad9d8311a64a5a6ff0', class: "zonos--dialog-header" }, h("div", { key: '89c82b6ff3723056d161560da22bd16a992afee7', class: "zonos--dialog-title" }, h("zonos-text", { key: 'bf92ef0b40ea67a492164fedb95dd68b7d023e85', type: "title" }, translate('Update your address')), h("zonos-button", { key: '4e7a1905c976cec396db5c34f633b383bba0d55a', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon$1 }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("zonos-text", { key: '47b42d8cc14c4757e3fc9f2f43eafbd8d9e9df38' }, translate('To ensure delivery all address details must be in Latin characters.'))), h("div", { key: '28d9804f0a18f143ce541c2c511cbfa21a2a416f', class: "zonos--group" }, h("zonos-text", { key: '43ec5a9fc8594d065b256952ca8e9392fba03839', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translate('What you entered')), h("div", { key: 'b7eb7781ce6aefe20f89b4d5fba190f0102eb5d1', class: "zonos--address-display-group" }, h("zonos-address-display", { key: '152c53176a46575677723ca47386e484c659927a', addressType: "shipping", currentAddress: shipping }), billing && (h("zonos-address-display", { key: '6c7ac2b49d121c26ce45f09a1eac9ef456d45910', addressType: "billing", currentAddress: billing }))), h("div", { key: '2bda98bb0ac9bafcb009ff36fb97a9fc62ce7e2d', class: "zonos--address-form-section" }, h("zonos-text", { key: '87d3380072a049ccde71ba1b752aedd36830348b', type: "semiBoldLabel" }, translate('Translated address')), h("zonos-address-form", { key: '2cb36251c6549da05e272183b2c37478b4166fea', 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: '9bf5ebd6fb08851716a72c855451bfeb3ee0ed68', 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: '621df9c8919973b37c62aca5727bde3635086a6b', class: "zonos--group-btn" }, h("div", { key: '95e9fd31418abc8e89ceef24af7cc251ee45ac93', class: "zonos--button-wrapper" }, h("zonos-button", { key: 'bef31fc81e7cc0f2b3f7ab875a29978b07865b6a', class: "zonos--cancel-btn", onClick: () => this.closeDialogHandler(), variant: "subtle" }, translate('Cancel')), h("zonos-button", { key: '9d183153541766b421c3420681c1159ffa599682', 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(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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(--size);width:var(--size);background-color:transparent;border:1.5px solid var(--amino-gray-400);position:relative;border-radius:var(--border-radius, var(--amino-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(--background-color);border-radius:var(--border-radius, var(--amino-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(--amino-${this.backgroundColor}-600)`
+            : this.backgroundColor;
+        const checkmarkColor = isBackgroundVariable
+            ? // use lighter color if the color is amino variable
+                `var(--amino-${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(--amino-gray-800)'
+                    : 'var(--amino-gray-0)';
+        const borderStyle = getBorderRadius({
+            customRoundRadius: '4px',
+            overrideBorderStyle: this.borderStyle,
+        });
+        return (h(Host, { key: '8a3d5f66a7fb956dcb063f1b375bfb80856a80c4', class: classes(['zonos--elements zonos--checkbox']), style: {
+                '--background-color': backgroundColor,
+                '--border-radius': borderStyle,
+                '--font-family': zonosStoreFontFamily(),
+                '--size': `${this.size}px`,
+            } }, h("label", { key: '95dc70a3821652e588706b570b40272a5f124b7f', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'ef61adbd2246fbb934a17b31ea62cd5ce4ff88f7', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+                this.checkboxSelected.emit(e.target.checked);
+            }, type: "checkbox" }), h("span", { key: '0587bf8dc5ee1477d91360e20d521efd9853c554', class: "checkmark-container" }, h("svg", { key: '3b7abf05f170aa2c4a31f76763c79ce975a543bc', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7d16a3850fbdca9fd3af7fa1f64a1715497b9c7b', "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: '305600e6860aeba8dfa0f3019d51d1bf91498310', size: this.fontSize }, this.label)))));
+    }
+};
+ZonosCheckbox.style = ZonosCheckboxStyle0;
+
+const zonosCollapseCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";
+const ZonosCollapseStyle0 = zonosCollapseCss;
+
+const ZonosCollapse = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.collapsed = false;
+        this.collapseSize = 0;
+        this.height = this.el.scrollHeight;
+        this.iframe = null;
+    }
+    getElementHeight() {
+        const fullHeight = `${this.height}px`;
+        const collapsedHeight = `${this.collapseSize}px`;
+        return this.collapsed ? collapsedHeight : fullHeight;
+    }
+    componentDidLoad() {
+        this.height = this.el.scrollHeight;
+    }
+    componentDidRender() {
+        var _a, _b, _c;
+        this.iframe =
+            ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) || null;
+        (_c = (_b = this.iframe) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
+            if (!this.iframe) {
+                // this should never happen since it's inside of resize callback
+                return;
+            }
+            this.height = parseFloat(getComputedStyle(this.iframe).height);
+        });
+    }
+    render() {
+        if (!this.collapsed) {
+            // wait for the collapse animation to finish, then set overflow to visible
+            setTimeout(() => {
+                // if the element collapsed state is still not changed, set overflow to visible
+                if (!this.collapsed) {
+                    this.el.style.overflow = 'visible';
+                }
+            }, 300);
+        }
+        else {
+            // set overflow to hidden to prevent content from showing when collapsed
+            this.el.style.overflow = 'hidden';
+        }
+        return (h(Host, { key: '514e75d41d29d70b4ca60230288ae183200b1e12', class: 'zonos--elements zonos--collapse', style: {
+                '--font-family': zonosStoreFontFamily(),
+                height: this.getElementHeight(),
+            } }, h("div", { key: '068aee1d13bde4c83ea8582b34844da7452c907c' }, h("iframe", { key: 'b22fd8ad898a098c244cb817dc6951854505efca', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'b54783376005085e379c7b8d43218ead1bf8e8ac' }))));
+    }
+    get el() { return getElement(this); }
+};
+ZonosCollapse.style = ZonosCollapseStyle0;
+
+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(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--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(--amino-backdrop-color);z-index:-999;opacity:0;visibility:hidden;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:10002;background:var(--amino-gray-0);border-radius:var(--border-radius, var(--amino-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(--amino-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:10001;background:var(--amino-gray-0);max-width:90vw;max-height:90vh;min-height:500px;height:var(--height, auto);width:var(--width, auto);border-radius:var(--border-radius, var(--amino-radius-10));outline:none;-webkit-box-shadow:var(--amino-v3-shadow-xxl);box-shadow:var(--amino-v3-shadow-xxl);border:var(--amino-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(--amino-size-md);height:var(--amino-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(--amino-radius-10)}:host .zonos--header .zonos--close-button:hover{background:var(--amino-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:10001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:10002;-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", 7);
+        this.isMobileMode = () => {
+            return this.mobile || window.innerWidth <= 768;
+        };
+        this.closeButtonHandler = () => {
+            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.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();
+    }
+    componentDidLoad() {
+        this.isMobile = this.isMobileMode();
+    }
+    render() {
+        // disable scroll on the body when dialog is open
+        if (this.open) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = 'auto';
+        }
+        const borderStyle = getBorderRadius({
+            overrideBorderStyle: this.borderStyle,
+        });
+        return (h(Host, { key: '48eb2701a74a7973d3502fd1fdc65ce85a6d71ed', class: classes([
+                'zonos--elements',
+                this.open && 'open',
+                this.isLoading && 'is-loading',
+                this.noBorder && 'no-border',
+                this.isMobile && 'mobile',
+            ]), style: {
+                '--border-radius': borderStyle,
+                '--font-family': zonosStoreFontFamily(),
+                '--height': this.height || 'initial',
+                '--width': this.width,
+            } }, h("div", { key: 'b408d792740d8854bab8ea60bd50ce894a75a836', class: "zonos--backdrop" }), h("div", { key: '04affcf48e0b209fa8dacc74039dad536ed9cd9b', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'c615792a60b2fa51a74af265b7c944a64e9ff18d', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '78d3b571f75c6037fdd694b4621fb9eae48d8ce0', class: "zonos--loading" }, h("zonos-spinner", { key: 'bd96037d5fe1717ebeae5b1ba27b96aa9ec9253d', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: 'cc057cbed99107d7d234d08d38e67cbf0140dc66', class: "zonos--header" }, this.headerText && (h("h3", { key: '587fff6b04981f1c24b44736b3b40044480f68ba', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '9a1944508996cd8ccb87f68ae175564528af3c4c', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'b563c1939c32489b63516cd4dd14df58a32a08cf', class: classes([
+                'zonos--body',
+                this.noBodyPadding && 'zonos--no-body-padding',
+            ]) }, h("slot", { key: '39d66d136f630afbac7ced146d3a8ac60d3c9672' })), h("slot", { key: '5bace66c84150024d0203f89fbf8f5c263cb7472', name: "dialog-footer" })))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+ZonosDialog.style = ZonosDialogStyle0;
+
+const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--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}";
+const ZonosLinkAuthenticationStyle0 = zonosLinkAuthenticationCss;
+
+const ZonosLinkAuthentication = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.titleText = undefined;
+        this.defaultEmail = null;
+        this.stripe = stripeStore.stripe;
+    }
+    watchInitStripe() {
+        if (!this.stripe || !stripeStore.stripeElements) {
+            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 || undefined,
+            });
+        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 => {
+            stripeStore.stripeLinkEventData = event;
+        });
+        stripeStore.stripeLinkElement = linkAuthenticationElement;
+    }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        this.watchInitStripe();
+    }
+    render() {
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (h(Host, { key: '4a7b9eb534e938f791f70e04756aa9fb1c39f2c7', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: 'cc4fe49ed6d4bd7cec502ef739b9e835e9e26584', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'f04a438d04e6ccd608d7ff61ac300fb09da4f0ce', class: "zonos--link-authentication-component" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "stripe": ["watchInitStripe"]
+    }; }
+};
+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, ZonosCollapse as zonos_collapse, ZonosDialog as zonos_dialog, ZonosLinkAuthentication as zonos_link_authentication };