@zonos/elements 1.3.233 → 1.3.234

package/dist/esm/{zonos-address_11.entry.js → zonos-address-display_9.entry.js}

@@ -1,413 +1,19 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-0bbe9693.js';
-import { d as debounce_1 } from './debounce-c4785346.js';
-import { d as isObject_1, z as zonosStore, f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
-import { c as stripeStore, t as trackConversionEvent, K as extractName, B as stripeStoreOnChange, q as stripeStorePrefetchLandedCost, e as cartStore } from './cart-14f305b3.js';
-import { s as storageStore, p as getFallbackDefaultCountryCode, q as storageStoreOnChange, l as localizationStore } from './localization-c5029ffc.js';
-import { t as translate } from './translationStore-690c4e04.js';
-import { l as logError, i as isCheckoutMobile, s as sendErrorLog } from './handleFetch-a844cac1.js';
-import { s as shouldRenderTaxIdInput, i as isTextContainsNonLatinChars, c as containsNonLatinChars } from './shouldRenderTaxIdInput-8bc112bb.js';
+import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-0bbe9693.js';
+import { t as translate, l as localizationStore, s as storageStore, q as storageStoreOnChange } from './localization-04b05867.js';
+import { i as isTextContainsNonLatinChars, c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
+import { K as extractName, c as stripeStore, q as stripeStorePrefetchLandedCost, t as trackConversionEvent } from './cart-66aecbb3.js';
 import { c as classes } from './classes-0d95c529.js';
-import { l as log } from './VarianceTest-572cecf5.js';
-import { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-50d72254.js';
 import { g as getBorderRadius } from './getBorderRadius-877f6389.js';
+import { z as zonosStore, f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
 import { R as RemoveIcon$2 } from './RemoveIcon-9dc5dd1a.js';
 import { i as isDarkColor } from './isDarkColor-9ddd90cc.js';
+import { t as throttle_1 } from './throttle-ce2432ab.js';
+import { i as isCheckoutMobile } from './handleFetch-a844cac1.js';
+import { s as shouldRenderTaxIdInput } from './shouldRenderTaxIdInput-d45ceeb4.js';
+import { l as log } from './VarianceTest-572cecf5.js';
+import { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-50d72254.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './helpers-2f6955b1.js';
-
-var debounce = debounce_1,
-    isObject$1 = isObject_1;
-
-/** Error message constants. */
-var FUNC_ERROR_TEXT = 'Expected a function';
-
-/**
- * Creates a throttled function that only invokes `func` at most once per
- * every `wait` milliseconds. The throttled function comes with a `cancel`
- * method to cancel delayed `func` invocations and a `flush` method to
- * immediately invoke them. Provide `options` to indicate whether `func`
- * should be invoked on the leading and/or trailing edge of the `wait`
- * timeout. The `func` is invoked with the last arguments provided to the
- * throttled function. Subsequent calls to the throttled function return the
- * result of the last `func` invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the throttled function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.throttle` and `_.debounce`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to throttle.
- * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=true]
- *  Specify invoking on the leading edge of the timeout.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new throttled function.
- * @example
- *
- * // Avoid excessively updating the position while scrolling.
- * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
- *
- * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
- * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
- * jQuery(element).on('click', throttled);
- *
- * // Cancel the trailing throttled invocation.
- * jQuery(window).on('popstate', throttled.cancel);
- */
-function throttle(func, wait, options) {
-  var leading = true,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  if (isObject$1(options)) {
-    leading = 'leading' in options ? !!options.leading : leading;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-  return debounce(func, wait, {
-    'leading': leading,
-    'maxWait': wait,
-    'trailing': trailing
-  });
-}
-
-var throttle_1 = throttle;
-
-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,.sc-zonos-address-h .zonos--tax-id-input.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
-const ZonosAddressStyle0 = zonosAddressCss;
-
-const ZonosAddress$1 = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.invalidCharacters = createEvent(this, "invalidCharacters", 7);
-        this.taxIdChanged = createEvent(this, "taxIdChanged", 7);
-        this.storeUnsubscribeList = [];
-        /**
-         * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
-         */
-        this.isAutoCompleteAdjusted = false;
-        /**
-         * Default address for stripe
-         */
-        this.defaultAddress = [];
-        /**
-         * Error message for tax id input
-         */
-        this.taxIdErrorMessage = '';
-        this.stripe = window.Zonos.stripe;
-        /**
-         * Check if the address is dirty or not to scroll into view. When the component is mounted, if the data is filled with address line 1, it's considered dirty
-         */
-        this.isDirtyAddress = false;
-        /**
-         * Local address event for stripe address element
-         */
-        this.isAddressFilled = false;
-        /**
-         * Local checkout session id to check if the address is filled after checkout is loaded
-         */
-        this.checkoutSessionId = storageStore.checkoutSessionId;
-        /**
-         * Track previous country and postal code to detect changes
-         */
-        this.prevCountry = null;
-        this.prevPostalCode = null;
-        /**
-         * Check if the tracking event is sent
-         */
-        this.trackingSent = false;
-        this.prefetchLandedCost = throttle_1(stripeStorePrefetchLandedCost, 1000);
-    }
-    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;
-            }
-        }
-        // Only trigger landed cost prefetch for shipping address
-        if (type === 'shipping') {
-            // if line 1 has something, trigger prefetch
-            if (event.value.address.line1.length) {
-                void this.prefetchLandedCost();
-            }
-        }
-    }
-    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 (!storageStore.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 = storageStore.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'));
-        // Initialize previous values if address data exists
-        if (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address) {
-            this.prevCountry = stripeAddressEventData.value.address.country;
-            this.prevPostalCode = stripeAddressEventData.value.address.postal_code;
-        }
-        addressElement.on('change', event => {
-            const eventValue = event.value;
-            if (!this.isDirtyAddress && eventValue.address.line1.length >= 3) {
-                this.isDirtyAddress = true;
-                if (!this.isAutoCompleteAdjusted) {
-                    const googleAutoComplete = this.el.querySelector('iframe[src*="autocomplete-suggestions"]');
-                    if (googleAutoComplete) {
-                        googleAutoComplete.style.zIndex = '3';
-                    }
-                    this.isAutoCompleteAdjusted = 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);
-            }
-            const { firstName, lastName } = extractName({
-                firstName: eventValue.firstName,
-                lastName: eventValue.lastName,
-                name: eventValue.name,
-            });
-            this.updateAddressEventData({
-                event: Object.assign(Object.assign({}, event), { elementMode: this.type, elementType: 'address', value: Object.assign(Object.assign({}, eventValue), { firstName,
-                        lastName }) }),
-                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();
-    }
-    isInTaxIdCountry(countryCode) {
-        return countryRequireTaxId.includes(countryCode);
-    }
-    /**
-     * Render tax id input based on ship to country code
-     */
-    renderTaxIdInput() {
-        var _a;
-        // No need to render tax id input for billing address
-        if (this.type === 'billing') {
-            return null;
-        }
-        const countryCode = (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
-        // Don't render tax id input if the country is not provided
-        if (!countryCode) {
-            return null;
-        }
-        // This just to type guard the countryCode, if it's able to get to this point it should already be in country that has tax id input
-        if (!this.isInTaxIdCountry(countryCode)) {
-            return null;
-        }
-        const taxIdInputRendered = shouldRenderTaxIdInput({
-            companyName: stripeStore.companyName,
-            countryCode,
-        });
-        // Don't render tax id input if the country doesn't require tax id
-        if (!taxIdInputRendered) {
-            return null;
-        }
-        const taxIdInputInfo = shipToTaxIdLabels[countryCode];
-        return (h("div", { class: "zonos--tax-id-input" }, h("zonos-stripe-input", { inputLabel: translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
-                stripeStore.taxId = event.detail;
-                this.taxIdChanged.emit(event.detail);
-            } }), this.taxIdErrorMessage && (h("zonos-text", { textColor: 'red-600', type: "caption" }, this.taxIdErrorMessage))));
-    }
-    renderCompanyNameInput() {
-        // No need to render company name for billing address (only allow for Collect)
-        if (this.type === 'billing' && !window.Zonos.isCollect) {
-            return null;
-        }
-        // only render the company input if the setting is enabled or the cart is collect
-        const isCompanyNameEnabled = zonosStore.checkoutSettings.companyFieldsStatus === 'ENABLED' ||
-            !!window.Zonos.isCollect;
-        // No need to render company name for billing address (only allow for Collect)
-        if (!isCompanyNameEnabled) {
-            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();
-        // unsubscribe from store subscriptions
-        try {
-            this.storeUnsubscribeList.forEach(subscription => subscription());
-        }
-        catch (_a) { }
-    }
-    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();
-        this.checkoutSessionId = storageStore.checkoutSessionId;
-        this.storeUnsubscribeList = [
-            storageStoreOnChange('checkoutSessionId', () => {
-                this.checkoutSessionId = storageStore.checkoutSessionId;
-            }),
-            stripeStoreOnChange('stripeElements', () => {
-                if (this.type === 'shipping') {
-                    void this.watchInitStripe();
-                }
-            }),
-            stripeStoreOnChange('stripeElementsForBillingAddress', () => {
-                if (this.type === 'billing') {
-                    void this.watchInitStripe();
-                }
-            }),
-        ];
-    }
-    render() {
-        var _a;
-        this.checkoutSessionId = storageStore.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: '15928518601e48825589ce4de4580263fec6a745', class: classes([
-                'zonos--address',
-                'zonos--elements',
-                `zonos--${this.type}-address`,
-            ]) }, this.titleText && (h("zonos-text", { key: '2e666ed81597ac95d3de575a2d901d083e9100cc', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: '8ca6987aa7d70093c078e3afca20ac0b1484bd77', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '23345f2b61e387c57a363be8df8aa54ab6461a88', class: "zonos--address-component" })));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "checkoutSessionId": ["isAddressFilledChanged"],
-        "isAddressFilled": ["isAddressFilledChanged"],
-        "stripe": ["watchInitStripe"],
-        "defaultAddress": ["defaultAddressChanged"]
-    }; }
-};
-ZonosAddress$1.style = ZonosAddressStyle0;
+import './debounce-c4785346.js';
 
 const zonosAddressDisplayCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--title{margin-bottom:12px}:host .zonos--address-group{display:-ms-flexbox;display:flex;gap:4px;-ms-flex-direction:column;flex-direction:column}:host .zonos--address-line{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .zonos--address-line zonos-text+zonos-text::before{content:\", \";color:var(--zonos-elements-gray-1000);margin-right:4px}:host .zonos--country-flag{width:20px;height:14px;border-radius:2px;margin:1px;position:relative;overflow:hidden;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);margin-right:8px;z-index:10;justify-self:center}";
 const ZonosAddressDisplayStyle0 = zonosAddressDisplayCss;
@@ -559,9 +165,9 @@ const ZonosAddressSuggestions = class {
         return segments;
     }
     render() {
-        return (h(Host, { key: '466084b61818244ec8b18aecad34cdf1c3ce07d0', class: "zonos--address-suggestions", role: "group", style: {
+        return (h(Host, { key: '7ab44ba24fdcc22c2f3dd06985d1d6e8e3c64cbc', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, h("ul", { key: '6d683213f5a4ffe06ba1292234753060a75ddf55', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: '10765017862170072ec33afae156f87c63bab39b', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '8660904e473b17ae5643aacab3d0fba3858c6632', class: "powered-by-container" }, h("zonos-text", { key: 'a310c0e5014e061470eee2c1ce17df59d5cb3cbd', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: 'a156fa8d30df760a3c87d6519a630ee5c7224525', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: '634f7ea46f1f210ecd8b11711eb29e100ae95d76', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon$1 }), noBackground: true, onClick: () => {
+            } }, h("ul", { key: 'e23aa07baa70336a9f37752d0de3725580684c88', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: 'd2208ef720bdff1d57937394266046edd7ef9e3b', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '4f834a0f3e8fa8c378e824894a51171543b61339', class: "powered-by-container" }, h("zonos-text", { key: '8f92d8f3e4421048881036ba3e43de25e9cfe005', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: 'efe2dcb973a7fd34a76d107dca1f7a6ac4d7112b', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: '8f59caa99bec12c4ac4c42e5b4108443f6e90446', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon$1 }), noBackground: true, onClick: () => {
                 this.localSuggestions = [];
             } }))), this.localSuggestions.map(suggestion => (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
@@ -831,14 +437,14 @@ const ZonosCheckbox = class {
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'bef392ce775e35da3f0640dcbb8271437995daa7', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: 'c2a9023becafd6d19ad769d449383924c85c641f', 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: '059e2eabc4825738a6607cd307694b252ba55905', class: classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, h("input", { key: 'a35c086ae478d5ac932608859e6b3250738c870f', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
+            } }, h("label", { key: '352e8bda93f1ac9a7a55ba7038e922626c3a9594', class: classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, h("input", { key: '71d664f9d83345ad4c143f71209bdb0a2cb16745', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '2482799b470a2ef5050709b6de36469ec8321b04', class: "checkmark-container" }, h("svg", { key: '1034db2d054e98fe06688b602346097b3e7c7d9d', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b926b486910470ea3180a904e8ec5ca2cf8e452f', "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: '5a31f075fb462c7419597f0d15b5e4a2f4e40148', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: 'c772c4e8dbbbef8035874616a0254fb4114a97c8', class: "checkmark-container" }, h("svg", { key: 'd497191975edeca268cc014431535f4befdd7b2c', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '15b26fdf72a058e81d4472d0c757a725c04e3f47', "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: '2d6015d16eda08dc39eff677f4858d2aed620891', size: this.fontSize }, this.label)))));
     }
 };
 ZonosCheckbox.style = ZonosCheckboxStyle0;
@@ -1751,10 +1357,10 @@ const ZonosAddress = class {
             this.country = localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'fed5a2350a7c3f3d83e21d4538c2ab1fc41fb397', class: classes([
+        return (h(Host, { key: 'dc41846f9f8cb0b10e4148ad5523f26186970888', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: '08a95944a1cc34b50fc7f1c3356e7853a8eb83b0', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: '7275e2aa1fe566e43fb223f68257ec0df9fbf5af', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: '38e4bc053824f1f7f6c15bb3ade74b16e0f977e1', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: 'e7b702568f26e4cff082ba88a3f68bc9d32d6bd2', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1864,7 +1470,7 @@ const ZonosDialog = class {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '6e673f681a3111d8e33c8cf4e8ab0c8f27c75d48', class: classes([
+        return (h(Host, { key: '1b53109e3598536674ab0a2cac4c5fa52c2e501d', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -1876,225 +1482,15 @@ const ZonosDialog = class {
                 '--zonos--height': this.height || 'initial',
                 '--zonos--min-height': this.minHeight || '500px',
                 '--zonos--width': this.width,
-            } }, h("div", { key: 'f245de30fb680fd673bd8531f3982b73ed506308', class: "zonos--backdrop" }), h("div", { key: 'ee75ecd48e28f38be08b5db9078c0b3b28b9bd9f', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: 'ce7d2273f358001b5899ba7a6ea8d5bd91ab55cb', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'e2cd0f877ed4f8b78b549a4aaedf1e67a234b0f7', class: "zonos--loading" }, h("zonos-spinner", { key: 'e0507e5fea599494979287fc4f13a7da08be758b', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '8d6cac393a445febf36cc6fb1811c00223518481', class: "zonos--header" }, this.headerText && (h("h3", { key: 'cb634d14db0a14144a370d66e3d5aa9147914038', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'd11ff8473046b201bad444c9b81a0566dd400829', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), h("div", { key: '356588fe85cce5298e4c2e862c31dab3018602a5', class: classes([
+            } }, h("div", { key: '3fcaf891d98fad2a7bb0b0eb7285c991a9df7610', class: "zonos--backdrop" }), h("div", { key: '16fe5c3ad017d19c52e85cf18eec31fe3960f61d', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '1fae701967b41b2d96e709078f6958867a7ef1c0', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'ba0bc9a7bf0f8fd097e874b371fc563ee9fab255', class: "zonos--loading" }, h("zonos-spinner", { key: 'c4599e9093de3e0ee56f094fc9bbe33d474cf966', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '827ff1f3a08f9efe7e1cb10315e62b68ed634087', class: "zonos--header" }, this.headerText && (h("h3", { key: 'd6e000b787d758080aa9283f59a3b577ef9d9bde', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '8efcb22ad294f4feab8f1a89e893a4f3d8a48d05', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), h("div", { key: '2bf643dcdcd2fdffdaccba0169386cd0a5a4ccd6', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: 'd525f4fab2449a219d42ccb45b4497076b5973c9' })), h("slot", { key: 'febb4e4ab0cb950b3a346052d60fa70ec8346be4', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '1b8886abbfac00704f004c6ca14d96fdbe87e751' })), h("slot", { key: '85c94e23f5686e4f91af598bffb14e38a09855a4', 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 MAX_RETRIES_INITIALIZE_LINK = 51;
-const ZonosLinkAuthentication = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.linkAuthenticationChange = createEvent(this, "linkAuthenticationChange", 7);
-        this.storeUnsubscribeList = [];
-        /**
-         * Default email for stripe
-         */
-        this.defaultEmail = null;
-        /**
-         * Email error text to dispaly
-         */
-        this.isEmailError = false;
-        this.stripe = stripeStore.stripe;
-        this.isStagingMode = cartStore.isStagingMode;
-        this.clientSecret = stripeStore.clientSecret;
-        this.retriesInitializeLink = 0;
-        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();
-        };
-    }
-    watchIsStagingMode() {
-        // Wait for the DOM to be ready before re-initializing Link element
-        setTimeout(() => {
-            void this.watchInitStripe();
-        }, 0);
-    }
-    async 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;
-        try {
-            // 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;
-            this.retriesInitializeLink = 0;
-            // 10 seconds
-            if (this.retriesInitializeLink > 11) {
-                log('Stripe link element initialized', 'info', {
-                    retriesInitializeLink: this.retriesInitializeLink,
-                    stripe: this.stripe,
-                });
-                void sendErrorLog({
-                    endpoint: 'stripe-link-authentication-init-long-running',
-                    errors: [
-                        'Stripe link element initialized after 20 retries - 10 seconds',
-                    ],
-                    metadata: {
-                        retriesInitializeLink: this.retriesInitializeLink,
-                    },
-                });
-            }
-        }
-        catch (error) {
-            if (error instanceof Error) {
-                // Wait for the stripe elements to be ready with the new client secret
-                this.retriesInitializeLink++;
-                if (this.retriesInitializeLink < MAX_RETRIES_INITIALIZE_LINK) {
-                    await new Promise(resolve => setTimeout(resolve, 500));
-                    void this.watchInitStripe();
-                }
-                if (this.retriesInitializeLink === MAX_RETRIES_INITIALIZE_LINK) {
-                    void sendErrorLog({
-                        endpoint: 'stripe-link-authentication-init-error',
-                        errors: [error.message],
-                        metadata: {
-                            retriesInitializeLink: this.retriesInitializeLink,
-                        },
-                    });
-                }
-            }
-        }
-    }
-    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,
-        });
-        void this.watchInitStripe();
-    }
-    disconnectedCallback() {
-        // unsubscribe from store subscriptions
-        try {
-            this.storeUnsubscribeList.forEach(subscription => subscription());
-        }
-        catch (_a) { }
-    }
-    componentDidLoad() {
-        this.storeUnsubscribeList = [
-            stripeStoreOnChange('stripeElements', async () => {
-                void this.watchInitStripe();
-            }),
-            stripeStoreOnChange('clientSecret', async () => {
-                this.clientSecret = stripeStore.clientSecret;
-            }),
-            stripeStoreOnChange('stripe', async () => {
-                this.stripe = stripeStore.stripe;
-            }),
-        ];
-        // @Watch doesn't get trigger on initial load
-        void 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(),
-            } }, this.titleText && (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;
-
 // This file is a workaround for a bug in web browsers' "native"
 // ES6 importing system which is uncapable of importing "*.json" files.
 // https://github.com/catamphetamine/libphonenumber-js/issues/239
@@ -8119,24 +7515,24 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (h(Host, { key: 'ed5b02d0f617b0611ecba382cf8447570c3cee76', class: classes([
+        return (h(Host, { key: '93c761af05a92758af8d5b76c3c9630a8c45c46a', class: classes([
                 'zonos--phone-input zonos--elements',
                 isDark && 'dark',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '8644eb1a24b4a2cdf491a8176f70e2fa35389fa6', class: classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '0c814da4f10b83027d2a91429c44aae0b2ae851f', class: classes([
                 'zonos--label-wrapper',
                 this.disabled && 'disabled',
                 this.isFocused && 'focused',
                 hasContent && 'has-content',
                 this.error && 'has-error',
                 this.inputLabel && 'has-label',
-            ]) }, h("select", { key: '747109b80d3d02778ded01392d853a050f675114', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, h("select", { key: 'f18e02540fc979f090ec9e8445a9c24a726bd3c5', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
             var _a;
             return (h("option", { key: option.countryCode, selected: option.countryCode === ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode), value: option.countryCode }, option.displayName, " (+", option.phoneCode, ")"));
-        })), h("div", { key: '399beecaead5791d81ffd1db679f5b235c056769', class: "zonos--input-group" }, h("div", { key: '599a287f610935762e3229577bf35cfaee8ffe7f', class: "zonos--select-wrapper" }, h("div", { key: 'a1402a12ffa599e4dd42523696121d0a1cec60b6', class: "zonos--country-select" }, h("div", { key: 'a798cf4e8f4f5cfef5554404c578076f507d0dd2', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '6a0313b6cd969a095002b18830fcbbd104e42570', class: "zonos--country-select-selected" }, h("div", { key: 'b6d2403854632f40dfd23d15b1eb8ef5625e1059', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: '60397bbbbc9c6083064de1427cedeb148f36a35d', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: 'effc1b9bc5fa1cd832e686b6e87ccac87e41ffb8', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: '8e5aa3603dc4a869ce7335c2903a15903d5e61d4', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '8b9ea89b5234a345d556d06649add11401baa184', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), h("div", { key: '21514d3e3f66095b79eb53e47fff6a98fbf12fba', class: classes([
+        })), h("div", { key: 'c0bc6f60fede12a27057b64c699701dc311a3c2b', class: "zonos--input-group" }, h("div", { key: '3329b43c5ff8b267d01dfc6611736f8fda70d30e', class: "zonos--select-wrapper" }, h("div", { key: 'f43b2ba959ef2f7e616b3930df5eba5bf73ab0c6', class: "zonos--country-select" }, h("div", { key: '357bcd7ec8d96df1e115820f26444422ef683a86', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '050444251b375b60ab7de9cf8220b6270a1e7681', class: "zonos--country-select-selected" }, h("div", { key: '37653be1e802cf065827bde91b46a4a650ab153e', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: '2d1cde80d3b5a8248a2b824e5cacb438026d3d6f', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: 'c75d6600d1ba864b7e8e8b3ae60faaa459d7578f', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: 'da61185205072f591ab0f21e1f09e6ba87f3b49d', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '6f9fd827cba11e442ec96d9706efb939aa3164e3', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), h("div", { key: '795d59db0eb10fa4ab31b9939a9f0522004c71b1', class: classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, h("input", Object.assign({ key: '50421e7a8343203ee623a4e61f957abd115d0495' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: '5025154c17fc9145b1b2bf2036ec7796287094ea', class: "zonos--floated-label" }, h("label", { key: '9af81cc3320de319ea84637bbb923c4b81a506d1', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '523df8b2d650663ac43516d8ae9954ffd208c5e8', textColor: "red-600" }, this.error))));
+            ]) }, h("input", Object.assign({ key: '64aa071d2e28691bf12493703b32657c45d9d9ae' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: 'd543673e6cbc526ffcebf6eca0cf8ab2edda644b', class: "zonos--floated-label" }, h("label", { key: '432a710de6b9af0c97bc6c50f57079e12806f62d', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '719f193ea85683b50d1fa7a7855bae22241b0693', textColor: "red-600" }, this.error))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8252,14 +7648,14 @@ const ZonosStripeSelect = class {
         const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
         const hasContent = this.internalValue || this.selectPlaceholder;
         const showClearButton = this.isClearable && this.internalValue && !this.isDisabled;
-        return (h(Host, { key: 'e781d691f1f1f72ceed06c488af7f427ed4f82d0', class: classes([
+        return (h(Host, { key: 'c43f75cfc3d57e8d31f7ec06fb66eff71a5c87b9', class: classes([
                 'zonos--select zonos--elements',
                 isDark && 'dark',
                 this.isError && 'has-error',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '4df83fa9bcb12e94e2d4bba3d6f31a4f56006097', class: classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '818e99e207482930dcccc26e55fcda5a283e366f', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("select", Object.assign({ key: '31daa88fdaeb8a35055b97ade6aa10bbd234568a' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("select", Object.assign({ key: 'c67ba73746f8cfd05801033a6620b25c82b86069' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
                 'zonos--floated-select',
                 !!this.selectLabel && 'has-label',
                 hasContent && 'has-content',
@@ -8269,9 +7665,9 @@ const ZonosStripeSelect = class {
                 this.selectChange.emit(select.value);
                 this.selectedValue = select.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, required: this.required }), h("option", { key: '4c5c09493d0e9d38bc56860682c092017dc927ff', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translate('Select')), this.internalOptions.map(option => (h("option", { key: option.value, selected: this.internalValue === option.value ||
+            }, required: this.required }), h("option", { key: 'f7969953300914c34ad3d76c69586e30e12c3117', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translate('Select')), this.internalOptions.map(option => (h("option", { key: option.value, selected: this.internalValue === option.value ||
                 // Sometimes google returns the label not the code for some countries
-                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: 'abe6ea181a207b8b85232226078c92ab1a8b6618', class: "zonos--floated-label" }, h("label", { key: 'c079f2f21289e5ba06906fd7e29b3c8216c6ae01', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '3cad61609828a9b38a4a38625629481c9fb5411e', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: 'f24323bdbd652cff52bec827f3a93a2e343e35c4', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: 'e8fe204b510477855de4dfee29d1200f30c50933', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: 'f071765d705d67b741f9381bbe96e2e8beb0968d', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: '7425ced4032df77a7f1219f9c03caedcd1a55841', textColor: "red-600" }, this.error))));
+                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: 'c093e68c826469ec22e69f154d5edfb342047d94', class: "zonos--floated-label" }, h("label", { key: 'b04836cba30a354efaf1a367cd7f5c629bc5ddc2', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '0a1bf1ce6b64f3a0c37495d8ad716078bceb757b', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: '3e690372f4df9d21754a2903819b17186d26654f', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: '9f761f5e9b416356ec7c4681d144adcf01fb8149', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: 'f5594d827dcb7f9812df7479bb8d199e2fcc4a1a', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: '79dce6ac5a8183ad68eaf1a6e60b15864df65d25', textColor: "red-600" }, this.error))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8282,4 +7678,4 @@ const ZonosStripeSelect = class {
 };
 ZonosStripeSelect.style = ZonosStripeSelectStyle0;
 
-export { ZonosAddress$1 as zonos_address, ZonosAddressDisplay as zonos_address_display, ZonosAddressForm as zonos_address_form, ZonosAddressSuggestions as zonos_address_suggestions, ZonosAddressUpdateDialog as zonos_address_update_dialog, ZonosCheckbox as zonos_checkbox, ZonosAddress as zonos_custom_address, ZonosDialog as zonos_dialog, ZonosLinkAuthentication as zonos_link_authentication, ZonosStripePhoneInput as zonos_stripe_phone_input, ZonosStripeSelect as zonos_stripe_select };
+export { ZonosAddressDisplay as zonos_address_display, ZonosAddressForm as zonos_address_form, ZonosAddressSuggestions as zonos_address_suggestions, ZonosAddressUpdateDialog as zonos_address_update_dialog, ZonosCheckbox as zonos_checkbox, ZonosAddress as zonos_custom_address, ZonosDialog as zonos_dialog, ZonosStripePhoneInput as zonos_stripe_phone_input, ZonosStripeSelect as zonos_stripe_select };