@zonos/elements 1.3.217 → 1.3.219

package/dist/cjs/{updateCheckoutSessionAttributes-8db49644.js → updateCheckoutSessionAttributes-c0853fdd.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const debounce = require('./debounce-465a4328.js');
-const handleFetch = require('./handleFetch-0313ebba.js');
+const handleFetch = require('./handleFetch-45f35cac.js');
 
 const attributesToUpdate = {};
 // Store debounced functions per session to ensure proper debouncing

package/dist/cjs/zonos-address_11.cjs.entry.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1c710d00.js');
 const debounce$1 = require('./debounce-465a4328.js');
 const zonosStore = require('./zonosStore-f8ee56aa.js');
-const cart = require('./cart-54ff39d6.js');
-const localization = require('./localization-721a5ec3.js');
-const handleFetch = require('./handleFetch-0313ebba.js');
+const cart = require('./cart-9a2b32e4.js');
+const localization = require('./localization-b12edb2a.js');
+const translationStore = require('./translationStore-20a6d8bf.js');
+const handleFetch = require('./handleFetch-45f35cac.js');
 const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-9b8a8de1.js');
-const TaxId = require('./TaxId-12acedde.js');
 const classes = require('./classes-b7918f56.js');
+const TaxId = require('./TaxId-12acedde.js');
 const getBorderRadius = require('./getBorderRadius-1b5e33cf.js');
 const RemoveIcon$2 = require('./RemoveIcon-081ac073.js');
 const isDarkColor = require('./isDarkColor-428965f4.js');
@@ -95,7 +96,7 @@ const ZonosAddress$1 = class {
         index.registerInstance(this, hostRef);
         this.invalidCharacters = index.createEvent(this, "invalidCharacters", 7);
         this.taxIdChanged = index.createEvent(this, "taxIdChanged", 7);
-        this.onStoreCheckoutSessionIdChangedSubscription = () => { };
+        this.storeUnsubscribeList = [];
         /**
          * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
          */
@@ -131,14 +132,6 @@ const ZonosAddress$1 = class {
          */
         this.trackingSent = false;
         this.prefetchLandedCost = throttle_1(cart.stripeStorePrefetchLandedCost, 1000);
-        this.onStoreCheckoutSessionIdChanged = () => {
-            const onCheckoutSessionIdChange = () => {
-                this.checkoutSessionId = localization.storageStore.checkoutSessionId;
-            };
-            // Trigger it once on init because onChange doesn't get triggered on initial load
-            onCheckoutSessionIdChange();
-            this.onStoreCheckoutSessionIdChangedSubscription = localization.storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
-        };
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -342,22 +335,24 @@ const ZonosAddress$1 = class {
             return null;
         }
         const taxIdInputInfo = TaxId.shipToTaxIdLabels[countryCode];
-        return (index.h("div", { class: "zonos--tax-id-input" }, index.h("zonos-stripe-input", { inputLabel: localization.translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: cart.stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
+        return (index.h("div", { class: "zonos--tax-id-input" }, index.h("zonos-stripe-input", { inputLabel: translationStore.translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: cart.stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
                 cart.stripeStore.taxId = event.detail;
                 this.taxIdChanged.emit(event.detail);
             } }), this.taxIdErrorMessage && (index.h("zonos-text", { textColor: 'red-600', type: "caption" }, this.taxIdErrorMessage))));
     }
     renderCompanyNameInput() {
-        // No need to render company name for billing address
-        if (this.type === 'billing') {
+        // 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
-        const isCompanyNameEnabled = zonosStore.zonosStore.checkoutSettings.companyFieldsStatus === 'ENABLED';
+        // only render the company input if the setting is enabled or the cart is collect
+        const isCompanyNameEnabled = zonosStore.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 (index.h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: localization.translate('Company name (optional)'), inputValue: cart.stripeStore.companyName, onInputChange: (event) => {
+        return (index.h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: translationStore.translate('Company name (optional)'), inputValue: cart.stripeStore.companyName, onInputChange: (event) => {
                 cart.stripeStore.companyName = event.detail;
             } }));
     }
@@ -365,8 +360,11 @@ const ZonosAddress$1 = class {
         // 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();
-        // cleanup checkout session id subscription
-        this.onStoreCheckoutSessionIdChangedSubscription();
+        // unsubscribe from store subscriptions
+        try {
+            this.storeUnsubscribeList.forEach(subscription => subscription());
+        }
+        catch (_a) { }
     }
     componentDidLoad() {
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
@@ -375,7 +373,22 @@ const ZonosAddress$1 = class {
                 stripeAddressEventData.value.address.line1.length > 0;
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
-        this.onStoreCheckoutSessionIdChanged();
+        this.checkoutSessionId = localization.storageStore.checkoutSessionId;
+        this.storeUnsubscribeList = [
+            localization.storageStoreOnChange('checkoutSessionId', () => {
+                this.checkoutSessionId = localization.storageStore.checkoutSessionId;
+            }),
+            cart.stripeStoreOnChange('stripeElements', () => {
+                if (this.type === 'shipping') {
+                    void this.watchInitStripe();
+                }
+            }),
+            cart.stripeStoreOnChange('stripeElementsForBillingAddress', () => {
+                if (this.type === 'billing') {
+                    void this.watchInitStripe();
+                }
+            }),
+        ];
     }
     render() {
         var _a;
@@ -384,7 +397,11 @@ const ZonosAddress$1 = class {
             this.isAddressFilled = true;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: '13b9fdc214b7ffeacaa180f1ba0d49032b417b6f', class: "zonos--address zonos--elements" }, index.h("zonos-text", { key: '7a6ec3c462293e85926b0f379860d8d4edfe6120', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), index.h("div", { key: '36c094186e6ce2ce1d1c4e8f56823fd032b3ad9e', class: "zonos--address-component" })));
+        return (index.h(index.Host, { key: 'ef89e6e083ce9c9bed0bed4653cbc40d451456c0', class: classes.classes([
+                'zonos--address',
+                'zonos--elements',
+                `zonos--${this.type}-address`,
+            ]) }, this.titleText && (index.h("zonos-text", { key: '62e73e9284617c5e4f78f25f7160bb4e23246554', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), this.renderCompanyNameInput(), this.renderTaxIdInput(), index.h("div", { key: 'b268422f6e4aa09e74ebac9d3a4c0d7a6594e95e', class: "zonos--address-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -414,8 +431,8 @@ const ZonosAddressDisplay = class {
             return (index.h("zonos-text", { textColor: textColor, type: bold ? 'boldLabel' : 'body' }, content));
         };
         return (index.h(index.Host, { class: "zonos--address-form zonos--elements" }, index.h("div", { class: "zonos--title" }, index.h("zonos-text", { textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
-            ? localization.translate('Shipping')
-            : localization.translate('Billing'))), index.h("div", { class: "zonos--address-group" }, name && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), index.h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), shippingZoneCountry && (index.h("div", { class: "zonos--address-line" }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: shippingZoneCountry.code }), ' ', renderEnteredInfoText({
+            ? translationStore.translate('Shipping')
+            : translationStore.translate('Billing'))), index.h("div", { class: "zonos--address-group" }, name && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (index.h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), index.h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), shippingZoneCountry && (index.h("div", { class: "zonos--address-line" }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: shippingZoneCountry.code }), ' ', renderEnteredInfoText({
             content: shippingZoneCountry.displayName,
         }))))));
     }
@@ -453,14 +470,14 @@ const ZonosAddressForm = class {
             name,
         });
         return (index.h(index.Host, { key: '22d085e462e69a4100a8cb1763367f53b933ed1d', class: "zonos--address-form zonos--elements" }, index.h("div", { key: '17d6c92370343ffbd1b4a85b3c49055a5a7f9d72', class: "zonos--title" }, index.h("zonos-text", { key: 'a4cb01bd8fed154567e0b7ade87777a1552ea815', textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
-            ? localization.translate('Shipping')
-            : localization.translate('Billing'))), index.h("div", { key: '4a1dddabc011e465d295b5c2994fda3a2531c96e', class: "zonos--address-group" }, index.h("div", { key: '60df882b5717b2f557a5051f492b2c838f938cd9', class: "zonos--contact" }, index.h("zonos-text", { key: '90b6613ccf1b2a445baae5f700f392d195924688', type: "label" }, localization.translate('Contact')), index.h("zonos-input", { key: '125815769a366e113b61d5581578ef6ecbdffa79', class: "zonos--form-email", inputLabel: localization.translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), index.h("div", { key: 'd0d331fb33f40243ce23824db5ba9551fd5636f8', class: "zonos--name zonos--address-row" }, index.h("zonos-input", { key: '46323db8f305e491215df03ef2092e76eec38355', class: "zonos--form-first-name", inputLabel: localization.translate('First name'), inputValue: firstName, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
+            ? translationStore.translate('Shipping')
+            : translationStore.translate('Billing'))), index.h("div", { key: '4a1dddabc011e465d295b5c2994fda3a2531c96e', class: "zonos--address-group" }, index.h("div", { key: '60df882b5717b2f557a5051f492b2c838f938cd9', class: "zonos--contact" }, index.h("zonos-text", { key: '90b6613ccf1b2a445baae5f700f392d195924688', type: "label" }, translationStore.translate('Contact')), index.h("zonos-input", { key: '125815769a366e113b61d5581578ef6ecbdffa79', class: "zonos--form-email", inputLabel: translationStore.translate('Email'), inputValue: this.currentAddress.email, isDisabled: true }), index.h("div", { key: 'd0d331fb33f40243ce23824db5ba9551fd5636f8', class: "zonos--name zonos--address-row" }, index.h("zonos-input", { key: '46323db8f305e491215df03ef2092e76eec38355', class: "zonos--form-first-name", inputLabel: translationStore.translate('First name'), inputValue: firstName, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(firstName), onInputChange: e => this.onInputChange({
                 key: 'name',
                 value: `${e.detail} ${lastName}`,
-            }) }), index.h("zonos-input", { key: '3c055ee2f1fcaf93ebcbd8f11ad6609cd33e9e14', class: "zonos--form-last-name", inputLabel: localization.translate('Last name'), inputValue: lastName, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
+            }) }), index.h("zonos-input", { key: '3c055ee2f1fcaf93ebcbd8f11ad6609cd33e9e14', class: "zonos--form-last-name", inputLabel: translationStore.translate('Last name'), inputValue: lastName, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(lastName), onInputChange: e => this.onInputChange({
                 key: 'name',
                 value: `${firstName} ${e.detail}`,
-            }) }))), index.h("div", { key: 'ce30f816d03b497eb4491d2554eb63c0aabf110c', class: "zonos--address" }, index.h("zonos-text", { key: '304867c5354ac55071c88944a63bba88ea3fb86f', type: "label" }, localization.translate('Address')), index.h("zonos-input", { key: 'f0efe937603a38761643af1486b53359a19593e5', class: "zonos--form-country", inputLabel: localization.translate('Country'), inputValue: country, isDisabled: true }), index.h("zonos-input", { key: '8360a4ae65c8963e886a3fb8322e0e539d121142', class: "zonos--form-line1", inputLabel: localization.translate('Address line 1'), inputValue: line1, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), index.h("zonos-input", { key: '2c9374917b705c2c9306d3d4d7fc4b4043c2b73b', class: "zonos--form-line2", inputLabel: localization.translate('Address line 2'), inputValue: line2, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), index.h("div", { key: 'fd067074070cadba3d895503f35c344ff817fec2', class: "zonos--address-row" }, index.h("zonos-input", { key: 'a565bee68e2498403df2801eb90005e8cb2d6f44', class: "zonos--form-city", inputLabel: localization.translate('City'), inputValue: city, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), index.h("zonos-input", { key: '89bae75b691aacdd62b624f65eee303bfb3fc811', class: "zonos--form-state", inputLabel: localization.translate('State/Province'), inputValue: state, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) })), index.h("zonos-input", { key: '9a851b9f449ed135859b7b828bf362168caf76fb', class: "zonos--form-postal-code", inputLabel: localization.translate('Postal code'), inputValue: postal_code, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(postal_code), onInputChange: e => this.onInputChange({ key: 'postal_code', value: e.detail }) }), index.h("zonos-input", { key: 'a51b8ba1e22d5a12eac9021abe83fdc20f8eb1a6', class: "zonos--form-phone", inputLabel: localization.translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
+            }) }))), index.h("div", { key: 'ce30f816d03b497eb4491d2554eb63c0aabf110c', class: "zonos--address" }, index.h("zonos-text", { key: '304867c5354ac55071c88944a63bba88ea3fb86f', type: "label" }, translationStore.translate('Address')), index.h("zonos-input", { key: 'f0efe937603a38761643af1486b53359a19593e5', class: "zonos--form-country", inputLabel: translationStore.translate('Country'), inputValue: country, isDisabled: true }), index.h("zonos-input", { key: '8360a4ae65c8963e886a3fb8322e0e539d121142', class: "zonos--form-line1", inputLabel: translationStore.translate('Address line 1'), inputValue: line1, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(line1), onInputChange: e => this.onInputChange({ key: 'line1', value: e.detail }) }), index.h("zonos-input", { key: '2c9374917b705c2c9306d3d4d7fc4b4043c2b73b', class: "zonos--form-line2", inputLabel: translationStore.translate('Address line 2'), inputValue: line2, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(line2), onInputChange: e => this.onInputChange({ key: 'line2', value: e.detail }) }), index.h("div", { key: 'fd067074070cadba3d895503f35c344ff817fec2', class: "zonos--address-row" }, index.h("zonos-input", { key: 'a565bee68e2498403df2801eb90005e8cb2d6f44', class: "zonos--form-city", inputLabel: translationStore.translate('City'), inputValue: city, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(city), onInputChange: e => this.onInputChange({ key: 'city', value: e.detail }) }), index.h("zonos-input", { key: '89bae75b691aacdd62b624f65eee303bfb3fc811', class: "zonos--form-state", inputLabel: translationStore.translate('State/Province'), inputValue: state, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(state), onInputChange: e => this.onInputChange({ key: 'state', value: e.detail }) })), index.h("zonos-input", { key: '9a851b9f449ed135859b7b828bf362168caf76fb', class: "zonos--form-postal-code", inputLabel: translationStore.translate('Postal code'), inputValue: postal_code, isError: shouldRenderTaxIdInput.isTextContainsNonLatinChars(postal_code), onInputChange: e => this.onInputChange({ key: 'postal_code', value: e.detail }) }), index.h("zonos-input", { key: 'a51b8ba1e22d5a12eac9021abe83fdc20f8eb1a6', class: "zonos--form-phone", inputLabel: translationStore.translate('Phone number'), inputValue: phone, onInputChange: e => this.onInputChange({ key: 'phone', value: e.detail }) })))));
     }
     static get watchers() { return {
         "translatedAddress": ["watchCurrentAddress"]
@@ -546,9 +563,9 @@ const ZonosAddressSuggestions = class {
         return segments;
     }
     render() {
-        return (index.h(index.Host, { key: 'eeb520d24c5cebca1f425c9648a2bdf0269f74c9', class: "zonos--address-suggestions", role: "group", style: {
+        return (index.h(index.Host, { key: '3f22f5bcf968d02e34fe46101b8ea4cf4e89051f', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius(),
-            } }, index.h("ul", { key: 'f7ac29ef14417f8c86dbafcf840204f4c964b3ad', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (index.h("li", { key: '13d34e64d8bd7711268a1f5641d0c868a89b949c', "aria-selected": false, class: "powered-by option", role: "option" }, index.h("div", { key: '00f20bd5568762ee581462826410031273e808da', class: "powered-by-container" }, index.h("zonos-text", { key: 'fc61a8ec973fc2cdf1e137563617cfed0badbb12', type: "caption" }, "Suggestions powered by"), index.h("zonos-text", { key: '96343fe696ec0d3990ffebaf450306ca91624d04', type: "semiBoldLabel" }, "Google")), index.h("zonos-button", { key: 'e7c6a9e64c8976a3c3a521b0794d2e82c1919ce2', "aria-label": "Clear suggestions", icon: index.h("zonos-icon", { content: RemoveIcon$1 }), noBackground: true, onClick: () => {
+            } }, index.h("ul", { key: 'fc77bda0480b2b2ef0d2b89cc36413d56f84f90b', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (index.h("li", { key: '0981dd0c7e522605417fb72c61d88bde629fada4', "aria-selected": false, class: "powered-by option", role: "option" }, index.h("div", { key: 'c307293f2d06cb7ea0e9c8d6ee0dd9b017ff2e5e', class: "powered-by-container" }, index.h("zonos-text", { key: 'a0776ea17615339f10ea7d623a40d9de90fcdbb4', type: "caption" }, "Suggestions powered by"), index.h("zonos-text", { key: '6ffdc7d0475a8718372c760b51f2128b0b81e78e', type: "semiBoldLabel" }, "Google")), index.h("zonos-button", { key: '6c168c20f1906ba4658998c7bd1e0b0eba860da1', "aria-label": "Clear suggestions", icon: index.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
@@ -731,7 +748,7 @@ const ZonosAddressUpdateDialog = class {
         return (index.h(index.Host, { key: '655845cef04f4af526b1a1c4e49243c4f2b4c7f6', class: classes.classes([
                 'zonos--address-update-dialog zonos--elements',
                 this.isMobile && 'mobile',
-            ]) }, index.h("zonos-dialog", { key: 'eab429bb78ce6f05ba463d8748d7edd5499402fa', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeUpdateDialog.emit(), open: this.dialogOpen, width: "568px" }, index.h("div", { key: '08f0400e62addfcaffd91bf5200999d29bbd2da9', class: "zonos--body" }, index.h("div", { key: '8699df5e2f823e19066fbb552ba2a66c127c05e9', class: "zonos--dialog-header" }, index.h("div", { key: '92e0ff932dcdb0e5b59ea34b688d1ef8e31bfeb3', class: "zonos--dialog-title" }, index.h("zonos-text", { key: 'aaac3375526bddb319ce7c8f49bde30da7210264', type: "title" }, localization.translate('Update your address')), index.h("zonos-button", { key: '474cc2421cd3150daa46bfe215da6ae7df9c6087', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon$2.RemoveIcon }), noBackground: true, onClick: () => this.closeUpdateDialogHandler(), title: "Close checkout dialog" })), index.h("zonos-text", { key: '6d019250cce57e8b30dd790a184df7273bdb234f' }, localization.translate('To ensure delivery all address details must be in Latin characters.'))), index.h("div", { key: '80ee681844f4f4f43fce69d977b634b1fbc3d5f5', class: "zonos--group" }, index.h("zonos-text", { key: '940e510eceec156a74f32de84cf58ffebd796435', class: "zonos--what-you-entered", type: "semiBoldLabel" }, localization.translate('What you entered')), index.h("div", { key: 'f626127f5c399c29ab1022deb66aaee8f8a49601', class: "zonos--address-display-group" }, index.h("zonos-address-display", { key: '9dfcba1037325c3a1f9e82b8e4797e7872dd7e3f', addressType: "shipping", currentAddress: shipping }), billing && (index.h("zonos-address-display", { key: 'fee8ae2c6786d735133c2a0a42f3e3d40d7f9ea9', addressType: "billing", currentAddress: billing }))), index.h("div", { key: '5a82195018ff8cdfd1126f4424062a26c25ee757', class: "zonos--address-form-section" }, index.h("zonos-text", { key: 'f694dfad166697e4c034cea51057133b69b1c144', type: "semiBoldLabel" }, localization.translate('Translated address')), index.h("zonos-address-form", { key: '4a99c841cf4800de43c612cce3d56d956d02c22f', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
+            ]) }, index.h("zonos-dialog", { key: 'eab429bb78ce6f05ba463d8748d7edd5499402fa', isLoading: this.dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeUpdateDialog.emit(), open: this.dialogOpen, width: "568px" }, index.h("div", { key: '08f0400e62addfcaffd91bf5200999d29bbd2da9', class: "zonos--body" }, index.h("div", { key: '8699df5e2f823e19066fbb552ba2a66c127c05e9', class: "zonos--dialog-header" }, index.h("div", { key: '92e0ff932dcdb0e5b59ea34b688d1ef8e31bfeb3', class: "zonos--dialog-title" }, index.h("zonos-text", { key: 'aaac3375526bddb319ce7c8f49bde30da7210264', type: "title" }, translationStore.translate('Update your address')), index.h("zonos-button", { key: '474cc2421cd3150daa46bfe215da6ae7df9c6087', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon$2.RemoveIcon }), noBackground: true, onClick: () => this.closeUpdateDialogHandler(), title: "Close checkout dialog" })), index.h("zonos-text", { key: '6d019250cce57e8b30dd790a184df7273bdb234f' }, translationStore.translate('To ensure delivery all address details must be in Latin characters.'))), index.h("div", { key: '80ee681844f4f4f43fce69d977b634b1fbc3d5f5', class: "zonos--group" }, index.h("zonos-text", { key: '940e510eceec156a74f32de84cf58ffebd796435', class: "zonos--what-you-entered", type: "semiBoldLabel" }, translationStore.translate('What you entered')), index.h("div", { key: 'f626127f5c399c29ab1022deb66aaee8f8a49601', class: "zonos--address-display-group" }, index.h("zonos-address-display", { key: '9dfcba1037325c3a1f9e82b8e4797e7872dd7e3f', addressType: "shipping", currentAddress: shipping }), billing && (index.h("zonos-address-display", { key: 'fee8ae2c6786d735133c2a0a42f3e3d40d7f9ea9', addressType: "billing", currentAddress: billing }))), index.h("div", { key: '5a82195018ff8cdfd1126f4424062a26c25ee757', class: "zonos--address-form-section" }, index.h("zonos-text", { key: 'f694dfad166697e4c034cea51057133b69b1c144', type: "semiBoldLabel" }, translationStore.translate('Translated address')), index.h("zonos-address-form", { key: '4a99c841cf4800de43c612cce3d56d956d02c22f', addressType: "shipping", class: "zonos--shipping-address-form", currentAddress: shipping, onAddressChange: e => {
                 const address = e.detail;
                 this.translatedShippingAddressState =
                     this.buildTranslateAddressState({
@@ -745,7 +762,7 @@ const ZonosAddressUpdateDialog = class {
                         currentAddress: billing,
                         translatedAddress: address,
                     });
-            }, translatedAddress: this.translatedBillingAddressState })))), index.h("div", { key: '918c3271579c3fc7a7efff0473b0ccf48fb575a2', class: "zonos--group-btn" }, index.h("div", { key: 'f73be0c1124d3a4d340bc6e8512f6be8356c655d', class: "zonos--button-wrapper" }, index.h("zonos-button", { key: '172a6cc0a7b75afb400802ef6b87faae6e7e2483', class: "zonos--cancel-btn", onClick: () => this.closeUpdateDialogHandler(), variant: "subtle" }, localization.translate('Cancel')), index.h("zonos-button", { key: '8fd08bc79b60eb9a0064c06ff9d840b1ecb09123', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, localization.translate('Update address'))))))));
+            }, translatedAddress: this.translatedBillingAddressState })))), index.h("div", { key: '918c3271579c3fc7a7efff0473b0ccf48fb575a2', class: "zonos--group-btn" }, index.h("div", { key: 'f73be0c1124d3a4d340bc6e8512f6be8356c655d', class: "zonos--button-wrapper" }, index.h("zonos-button", { key: '172a6cc0a7b75afb400802ef6b87faae6e7e2483', class: "zonos--cancel-btn", onClick: () => this.closeUpdateDialogHandler(), variant: "subtle" }, translationStore.translate('Cancel')), index.h("zonos-button", { key: '8fd08bc79b60eb9a0064c06ff9d840b1ecb09123', backgroundColor: this.submitBtnColor, class: "zonos--update-btn", loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "sm", variant: submitBtnType }, translationStore.translate('Update address'))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -818,14 +835,14 @@ const ZonosCheckbox = class {
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (index.h(index.Host, { key: '177059d9f1ad06324719d97e02a48bb582fcc3d4', class: classes.classes(['zonos--elements zonos--checkbox']), style: {
+        return (index.h(index.Host, { key: 'ed6ed1ac5c6074f98774ada05250e1d983780a70', class: classes.classes(['zonos--elements zonos--checkbox']), style: {
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 '--zonos--size': `${this.size}px`,
-            } }, index.h("label", { key: '15c39a6c58b9d70e5174bb4d51ab6b8b8a48cabc', class: classes.classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, index.h("input", { key: '1a6c85de7ca83822cc8e648a84f49580f520429a', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
+            } }, index.h("label", { key: 'f46fe447e995ca0df8f82046d2a37f31b62df3e2', class: classes.classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, index.h("input", { key: '8708ce90dc7451b5961dff73bf4b5dbedb3c7644', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), index.h("span", { key: '8b498b0a271f07de4e2481a173aecb732a935c5b', class: "checkmark-container" }, index.h("svg", { key: '5d98f7b34f424942dfbd1071f82a5c4f481ac5a9', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'ed79a224a05fa5bfa5f08f71e374d595e7e4c480', "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 && (index.h("zonos-text", { key: '6af368e40ed1a260f76aa014591e472004978d0c', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), index.h("span", { key: '22b016bfadb12f57d9bd955b2d0e0179d927c8d3', class: "checkmark-container" }, index.h("svg", { key: '9a973d0b7179afee009660bc9d92b7b76799b716', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '147c9637eb74a77b65e53d56a9a3ab9551f7dd5e', "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 && (index.h("zonos-text", { key: '766b3ecb99db3d3b04669141515feed892103211', size: this.fontSize }, this.label)))));
     }
 };
 ZonosCheckbox.style = ZonosCheckboxStyle0;
@@ -1019,7 +1036,7 @@ const ZonosAddress = class {
                         (((_b = this.countryField) === null || _b === void 0 ? void 0 : _b.cityRequired) && !!(value === null || value === void 0 ? void 0 : value.trim()));
                     customErrors.city = '';
                     if (!isValid) {
-                        customErrors.city = localization.translate('The field is incomplete');
+                        customErrors.city = translationStore.translate('The field is incomplete');
                     }
                     break;
                 }
@@ -1028,7 +1045,7 @@ const ZonosAddress = class {
                         (((_d = this.countryField) === null || _d === void 0 ? void 0 : _d.stateRequired) && !!(value === null || value === void 0 ? void 0 : value.trim()));
                     customErrors.state = '';
                     if (!isValid) {
-                        customErrors.state = localization.translate('The field is incomplete');
+                        customErrors.state = translationStore.translate('The field is incomplete');
                     }
                     break;
                 }
@@ -1039,7 +1056,7 @@ const ZonosAddress = class {
                     });
                     customErrors.postalCode = '';
                     if (!isValid) {
-                        customErrors.postalCode = localization.translate('Your [zipLabel] is invalid', {
+                        customErrors.postalCode = translationStore.translate('Your [zipLabel] is invalid', {
                             zipLabel: ((_e = this.countryField) === null || _e === void 0 ? void 0 : _e.zipLabel) || 'ZIP',
                         });
                     }
@@ -1049,7 +1066,7 @@ const ZonosAddress = class {
                     const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
                     customErrors.firstName = '';
                     if (!isValid) {
-                        customErrors.firstName = localization.translate('Please provide your first name.');
+                        customErrors.firstName = translationStore.translate('Please provide your first name.');
                     }
                     break;
                 }
@@ -1057,7 +1074,7 @@ const ZonosAddress = class {
                     const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
                     customErrors.lastName = '';
                     if (!isValid) {
-                        customErrors.lastName = localization.translate('Please provide your last name.');
+                        customErrors.lastName = translationStore.translate('Please provide your last name.');
                     }
                     break;
                 }
@@ -1065,7 +1082,7 @@ const ZonosAddress = class {
                     const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
                     customErrors.line1 = '';
                     if (!isValid) {
-                        customErrors.line1 = localization.translate('The field is incomplete');
+                        customErrors.line1 = translationStore.translate('The field is incomplete');
                     }
                     break;
                 }
@@ -1075,17 +1092,17 @@ const ZonosAddress = class {
                         const isValid = !!(value === null || value === void 0 ? void 0 : value.trim());
                         customErrors.phone = '';
                         if (!isValid) {
-                            customErrors.phone = localization.translate('Please provide a mobile phone number.');
+                            customErrors.phone = translationStore.translate('Please provide a mobile phone number.');
                         }
                     }
                     else {
                         customErrors.phone = '';
                         // If the phone number is empty, set the error message
                         if (phoneValidateInfo.isEmpty) {
-                            customErrors.phone = localization.translate('Please provide a mobile phone number.');
+                            customErrors.phone = translationStore.translate('Please provide a mobile phone number.');
                         }
                         else if (phoneValidateInfo.wrongFormat) {
-                            customErrors.phone = localization.translate('Your mobile phone number is incomplete.');
+                            customErrors.phone = translationStore.translate('Your mobile phone number is incomplete.');
                         }
                     }
                     break;
@@ -1210,7 +1227,7 @@ const ZonosAddress = class {
             return null;
         }
         const taxIdInputInfo = TaxId.shipToTaxIdLabels[countryCode];
-        return (index.h("div", { class: "zonos--tax-id-input" }, index.h("zonos-stripe-input", { error: this.taxIdErrorMessage, inputLabel: localization.translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: cart.stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
+        return (index.h("div", { class: "zonos--tax-id-input" }, index.h("zonos-stripe-input", { error: this.taxIdErrorMessage, inputLabel: translationStore.translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: cart.stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
                 cart.stripeStore.taxId = event.detail;
             } })));
     }
@@ -1224,7 +1241,7 @@ const ZonosAddress = class {
         if (!isCompanyNameEnabled) {
             return null;
         }
-        return (index.h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: localization.translate('Company name (optional)'), inputValue: cart.stripeStore.companyName, onInputChange: (event) => {
+        return (index.h("zonos-stripe-input", { class: "zonos--company-name-input", inputLabel: translationStore.translate('Company name (optional)'), inputValue: cart.stripeStore.companyName, onInputChange: (event) => {
                 cart.stripeStore.companyName = event.detail;
             } }));
     }
@@ -1531,7 +1548,7 @@ const ZonosAddress = class {
             value: region.interpayCode,
         }))
             .sort((a, b) => a.label.localeCompare(b.label));
-        return (index.h("div", { "aria-label": `${this.type} address form`, class: "zonos--custom-address-form", role: "form" }, index.h("zonos-stripe-input", { "aria-required": "true", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.firstName : undefined, inputLabel: localization.translate('First name'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName, onInputChange: (event) => {
+        return (index.h("div", { "aria-label": `${this.type} address form`, class: "zonos--custom-address-form", role: "form" }, index.h("zonos-stripe-input", { "aria-required": "true", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.firstName : undefined, inputLabel: translationStore.translate('First name'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName, onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1545,7 +1562,7 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.firstName = event.detail;
-            }, required: true }), index.h("zonos-stripe-input", { "aria-required": "true", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.lastName : undefined, inputLabel: localization.translate('Last name'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName, onInputChange: (event) => {
+            }, required: true }), index.h("zonos-stripe-input", { "aria-required": "true", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.lastName : undefined, inputLabel: translationStore.translate('Last name'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName, onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1588,9 +1605,9 @@ const ZonosAddress = class {
                 this.city = '';
                 this.state = '';
                 this.postalCode = '';
-            }, options: this.shipToCountries || [], required: true, selectLabel: localization.translate('Country'), selectedValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
+            }, options: this.shipToCountries || [], required: true, selectLabel: translationStore.translate('Country'), selectedValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
                 localization.localizationStore.selectedCountryCode ||
-                (firstCountry === null || firstCountry === void 0 ? void 0 : firstCountry.value), title: `${this.type} country` }), index.h("div", { class: "zonos--custom-address-form-line1-wrapper" }, index.h("zonos-stripe-input", { "aria-autocomplete": "list", "aria-controls": "autocomplete-search", "aria-required": "true", autoComplete: "shipping address-line1", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.line1 : undefined, inputLabel: localization.translate('Address line 1'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line1, name: "address-line1", onInputChange: (event) => {
+                (firstCountry === null || firstCountry === void 0 ? void 0 : firstCountry.value), title: `${this.type} country` }), index.h("div", { class: "zonos--custom-address-form-line1-wrapper" }, index.h("zonos-stripe-input", { "aria-autocomplete": "list", "aria-controls": "autocomplete-search", "aria-required": "true", autoComplete: "shipping address-line1", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.line1 : undefined, inputLabel: translationStore.translate('Address line 1'), inputValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line1, name: "address-line1", onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1621,9 +1638,9 @@ const ZonosAddress = class {
             }, suggestions: this.addressSuggestions, type: this.type })), index.h("div", { "aria-label": "Additional address details", class: classes.classes([
                 'zonos--custom-address-form-additional-fields',
                 countryCode && this.isAddressLine1Entered ? 'zonos--show' : '',
-            ]), role: "group" }, index.h("zonos-stripe-input", { "aria-required": "false", autoComplete: "shipping address-line2", class: "zonos--custom-address-form-input", inputLabel: localization.translate(((_c = this.countryField) === null || _c === void 0 ? void 0 : _c.address2Label) || 'Address line 2'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line2) || '', onInputChange: (event) => {
+            ]), role: "group" }, index.h("zonos-stripe-input", { "aria-required": "false", autoComplete: "shipping address-line2", class: "zonos--custom-address-form-input", inputLabel: translationStore.translate(((_c = this.countryField) === null || _c === void 0 ? void 0 : _c.address2Label) || 'Address line 2'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.line2) || '', onInputChange: (event) => {
                 this.line2 = event.detail;
-            } }), ((_d = this.countryField) === null || _d === void 0 ? void 0 : _d.cityShow) && (index.h("zonos-stripe-input", { "aria-required": ((_e = this.countryField) === null || _e === void 0 ? void 0 : _e.cityRequired) ? 'true' : 'false', autoComplete: "shipping address-level2", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.city : undefined, inputLabel: localization.translate(((_f = this.countryField) === null || _f === void 0 ? void 0 : _f.cityLabel) || 'City'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.city) || '', name: "locality", onInputChange: (event) => {
+            } }), ((_d = this.countryField) === null || _d === void 0 ? void 0 : _d.cityShow) && (index.h("zonos-stripe-input", { "aria-required": ((_e = this.countryField) === null || _e === void 0 ? void 0 : _e.cityRequired) ? 'true' : 'false', autoComplete: "shipping address-level2", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.city : undefined, inputLabel: translationStore.translate(((_f = this.countryField) === null || _f === void 0 ? void 0 : _f.cityLabel) || 'City'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.city) || '', name: "locality", onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1651,9 +1668,9 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.state = event.detail;
-            }, options: stateOptions, required: (_k = this.countryField) === null || _k === void 0 ? void 0 : _k.stateRequired, selectLabel: localization.translate(((_l = this.countryField) === null || _l === void 0 ? void 0 : _l.stateLabel) || 'State'), selectedValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.state, title: `${this.type} state` })), ((_m = this.countryField) === null || _m === void 0 ? void 0 : _m.zipShow) && (index.h("zonos-stripe-input", { "aria-describedby": ((_o = this.countryField) === null || _o === void 0 ? void 0 : _o.zipFormat)
+            }, options: stateOptions, required: (_k = this.countryField) === null || _k === void 0 ? void 0 : _k.stateRequired, selectLabel: translationStore.translate(((_l = this.countryField) === null || _l === void 0 ? void 0 : _l.stateLabel) || 'State'), selectedValue: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.state, title: `${this.type} state` })), ((_m = this.countryField) === null || _m === void 0 ? void 0 : _m.zipShow) && (index.h("zonos-stripe-input", { "aria-describedby": ((_o = this.countryField) === null || _o === void 0 ? void 0 : _o.zipFormat)
                 ? `zip-format-${this.type}`
-                : undefined, "aria-required": ((_p = this.countryField) === null || _p === void 0 ? void 0 : _p.zipRequired) ? 'true' : 'false', autoComplete: "shipping postal-code", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.postalCode : undefined, inputLabel: localization.translate(((_q = this.countryField) === null || _q === void 0 ? void 0 : _q.zipLabel) || 'Zip'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.postal_code) || '', name: "postalCode", onInputChange: (event) => {
+                : undefined, "aria-required": ((_p = this.countryField) === null || _p === void 0 ? void 0 : _p.zipRequired) ? 'true' : 'false', autoComplete: "shipping postal-code", class: "zonos--custom-address-form-input", error: showError ? customAddressErrors.postalCode : undefined, inputLabel: translationStore.translate(((_q = this.countryField) === null || _q === void 0 ? void 0 : _q.zipLabel) || 'Zip'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.postal_code) || '', name: "postalCode", onInputChange: (event) => {
                 this.validate({
                     type: this.type,
                     value: event.detail,
@@ -1667,7 +1684,7 @@ const ZonosAddress = class {
                  * Therefore, we must update the value after validation to ensure correct error state
                  */
                 this.postalCode = event.detail;
-            }, required: (_r = this.countryField) === null || _r === void 0 ? void 0 : _r.zipRequired, title: `${this.type} zip code` }))), index.h("zonos-stripe-phone-input", { autoComplete: "shipping tel", class: "zonos--custom-address-form-input", countryCode: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country, countryOptions: (_s = zonosStore.zonosStore.genericSettings) === null || _s === void 0 ? void 0 : _s.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: localization.translate('Phone number'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone) || '', onInputValueChange: event => {
+            }, required: (_r = this.countryField) === null || _r === void 0 ? void 0 : _r.zipRequired, title: `${this.type} zip code` }))), index.h("zonos-stripe-phone-input", { autoComplete: "shipping tel", class: "zonos--custom-address-form-input", countryCode: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country, countryOptions: (_s = zonosStore.zonosStore.genericSettings) === null || _s === void 0 ? void 0 : _s.countryFields, error: showError ? customAddressErrors.phone : undefined, inputLabel: translationStore.translate('Phone number'), inputValue: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.phone) || '', onInputValueChange: event => {
                 const { isEmpty, phoneNumber, valid, wrongFormat } = event.detail;
                 // Validate the phone number
                 this.validate({
@@ -1738,10 +1755,10 @@ const ZonosAddress = class {
             this.country = localization.localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: '9e1d9e1ed3fca30876ba8310510873a5b10c6552', class: classes.classes([
+        return (index.h(index.Host, { key: '29e26b9b269ea277ae508671f0c63483910ad50b', class: classes.classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, index.h("zonos-text", { key: '2356d42946b3ed93c4670fb876101a1371ac5c14', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, index.h("zonos-text", { key: 'db6f6cb94da02e5f2c9aca8112ab20e11148281e', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1851,7 +1868,7 @@ const ZonosDialog = class {
         const borderStyle = getBorderRadius.getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (index.h(index.Host, { key: 'a9932187bccf8e7fa505c7e07175d03541d66852', class: classes.classes([
+        return (index.h(index.Host, { key: 'ba80fedf4f3e98c4de3d81a36104de00366cbb1a', class: classes.classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -1863,10 +1880,10 @@ const ZonosDialog = class {
                 '--zonos--height': this.height || 'initial',
                 '--zonos--min-height': this.minHeight || '500px',
                 '--zonos--width': this.width,
-            } }, index.h("div", { key: '0298cf365a50e3544656a6d27ae59e922b9e3aed', class: "zonos--backdrop" }), index.h("div", { key: '9fce580a07147d51f17c898a22204c3d9ce6ac7b', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, index.h("div", { key: 'b168439cd985cc5c0166a653db206688504cf7dd', class: "zonos--dialog" }, this.isLoading && (index.h("div", { key: 'e0b6215f3c7bc939721669069bc294e08558d8b5', class: "zonos--loading" }, index.h("zonos-spinner", { key: '687bcd6d2695933de828484c34aff1230bf71d49', size: 30 }))), (this.headerText || !this.noCloseButton) && (index.h("div", { key: '04a57a4add896e3d96faca8b77321bba5f00b889', class: "zonos--header" }, this.headerText && (index.h("h3", { key: 'd084cb3aedcb7e5bb8fd82012b57f441d7dce4a2', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { key: 'c62701d002586d92f80d1d30644ae3948afc18f6', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), index.h("div", { key: 'a8aa531565e52672573785a613ab87a970189616', class: classes.classes([
+            } }, index.h("div", { key: '7e61114b6ceb1b39a4f0bb1a0719851d4035bfd3', class: "zonos--backdrop" }), index.h("div", { key: '459a309060ff4ef98cc0eb2a80363394218f07b7', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, index.h("div", { key: '3c4299b298ed8eb163ac5a70153347741032726f', class: "zonos--dialog" }, this.isLoading && (index.h("div", { key: '0cfd40a79ed8916a47eaaa914ef1ccdd623e8efc', class: "zonos--loading" }, index.h("zonos-spinner", { key: 'ca3aeb6aa6586a01763b6170814e30a325428508', size: 30 }))), (this.headerText || !this.noCloseButton) && (index.h("div", { key: '61824114fbb326d323ea2dda14ed28209567d4d6', class: "zonos--header" }, this.headerText && (index.h("h3", { key: '9c4916f1787d0157f130aeb0ca29e2e871d1dfc6', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { key: 'e80895fa1d8ea6d945cebb97392c5fb4b6df7c7b', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), index.h("div", { key: '5cfd70cd4c22b44494c4e62ed6c7af0f3a81f955', class: classes.classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, index.h("slot", { key: 'ede82b27d9e73f27ad0212203e0483a8294f72e5' })), index.h("slot", { key: '084c3a055462fbf8f25e336891e0dbb5faed7ed7', name: "dialog-footer" })))));
+            ]) }, index.h("slot", { key: 'c5e818b28959cd89c466cc355cba40e56b49be7f' })), index.h("slot", { key: '4ded95d727eea855fa7af8a1c34fb0de9dfb7fca', name: "dialog-footer" })))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -1884,6 +1901,7 @@ const ZonosLinkAuthentication = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.linkAuthenticationChange = index.createEvent(this, "linkAuthenticationChange", 7);
+        this.storeUnsubscribeList = [];
         /**
          * Default email for stripe
          */
@@ -1980,7 +1998,19 @@ const ZonosLinkAuthentication = class {
             void this.watchInitStripe();
         }, 5);
     }
+    disconnectedCallback() {
+        // unsubscribe from store subscriptions
+        try {
+            this.storeUnsubscribeList.forEach(subscription => subscription());
+        }
+        catch (_a) { }
+    }
     componentDidLoad() {
+        this.storeUnsubscribeList = [
+            cart.stripeStoreOnChange('stripeElements', () => {
+                void this.watchInitStripe();
+            }),
+        ];
         // @Watch doesn't get trigger on initial load
         this.watchInitStripe();
         if (!this.defaultEmail) {
@@ -1995,7 +2025,7 @@ const ZonosLinkAuthentication = class {
         const renderEmailAddress = () => {
             var _a;
             if (cart.cartStore.isStagingMode) {
-                return (index.h("zonos-stripe-input", { inputLabel: localization.translate('Email'), inputValue: this.defaultEmail ||
+                return (index.h("zonos-stripe-input", { inputLabel: translationStore.translate('Email'), inputValue: this.defaultEmail ||
                         ((_a = cart.stripeStore.stripeLinkEventData) === null || _a === void 0 ? void 0 : _a.value.email) ||
                         '', isError: this.isEmailError, onBlur: () => {
                         var _a;
@@ -2013,7 +2043,7 @@ const ZonosLinkAuthentication = class {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
         return (index.h(index.Host, { class: "zonos--link-authentication zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius(),
-            } }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), renderEmailAddress(), this.isEmailError && (index.h("zonos-text", { textColor: "red-600" }, localization.translate('Please enter a valid email address.')))));
+            } }, this.titleText && (index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), renderEmailAddress(), this.isEmailError && (index.h("zonos-text", { textColor: "red-600" }, translationStore.translate('Please enter a valid email address.')))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -8049,24 +8079,24 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (index.h(index.Host, { key: '0d4501947787cbafe38acb60fb5ee7519b6d1c73', class: classes.classes([
+        return (index.h(index.Host, { key: 'f357f000b98bfd0e23731df7d253ffc47f404c30', class: classes.classes([
                 'zonos--phone-input zonos--elements',
                 isDark && 'dark',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: 'c3e0f9655a39a5bb3d838634754be2af60a24a10', class: classes.classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: 'cd201f36c0dddac8669ec8272f0fe7ee49b5b0a2', class: classes.classes([
                 'zonos--label-wrapper',
                 this.disabled && 'disabled',
                 this.isFocused && 'focused',
                 hasContent && 'has-content',
                 this.error && 'has-error',
                 this.inputLabel && 'has-label',
-            ]) }, index.h("select", { key: '1a58471117f6748d511498e016814bd907e8775f', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, index.h("select", { key: '4ce5b03c7d4ac4736af7b11f1823d48c53556558', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
             var _a;
             return (index.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, ")"));
-        })), index.h("div", { key: '9c785521e095aae0cfc8af3ea90e4924c97202ac', class: "zonos--input-group" }, index.h("div", { key: 'b7fdd9db255ce33f3b6d3a982162c8286963324c', class: "zonos--select-wrapper" }, index.h("div", { key: '5d378436580df53793b1508af5e34bd43ba33ddf', class: "zonos--country-select" }, index.h("div", { key: '94628459db88e355b1c62b74cfcb48ec03022d4e', class: "zonos--country-select-content" }, this.selectedCountry && (index.h("div", { key: '96b332ed9c62413887f96f38ce26cb05b81a3132', class: "zonos--country-select-selected" }, index.h("div", { key: 'b9e5bda55328f57e15afd349789233e3c28d2bf9', class: "zonos--country-flag-wrapper" }, index.h("zonos-country-flag", { key: 'fc595df21c09553dc8ffb7fe79c3043831e65298', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), index.h("div", { key: '6c792c383acf3ccac02be6b954a7eb18bcdda817', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), index.h("div", { key: '970b9f6e18152e04375a248669fd7314088bcd2e', class: "zonos--select-chevron-wrapper" }, index.h("zonos-icon", { key: '1da5919014eee0e34b60d1df08e83d44ad20d5c2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), index.h("div", { key: '7f0c215ddfb59c8e3c4413e44941a477a8adc6d6', class: classes.classes([
+        })), index.h("div", { key: 'efca78810bebc70a51f49c6f1720168717253b74', class: "zonos--input-group" }, index.h("div", { key: 'c785838e12d00237cb9a0fff97e1c2b0e2faf692', class: "zonos--select-wrapper" }, index.h("div", { key: '30d97ae277344d381a2fdf3fedf1f006ce66f801', class: "zonos--country-select" }, index.h("div", { key: '44d4488d45067e11acb2d8279cdb12eeffddd5c0', class: "zonos--country-select-content" }, this.selectedCountry && (index.h("div", { key: 'bbeadca415fb4aab84b8fddf92e143df70700444', class: "zonos--country-select-selected" }, index.h("div", { key: '2aed839d75ebde1c9423e9075ed84e005e8697c3', class: "zonos--country-flag-wrapper" }, index.h("zonos-country-flag", { key: 'c1117e4b9d58cb1010b95c0aeb8b7fe102b13a2c', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), index.h("div", { key: '63609f20f44a7d8171ece2afc9995c21b1eda697', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), index.h("div", { key: 'e0c46b926f5cda986793d8e60f49625219a21354', class: "zonos--select-chevron-wrapper" }, index.h("zonos-icon", { key: '3e2ceaf3df3e6767ad25551ae090dcc9288000c2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), index.h("div", { key: '10751ee273ad5d6531afc7fb700718605e32cbcd', class: classes.classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, index.h("input", Object.assign({ key: 'e3ce0b598baf78452eddaab38c80bb4f0c548a5a' }, 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 && (index.h("div", { key: 'a108f2796571f9d8a4201d1906b2381b89d14bc2', class: "zonos--floated-label" }, index.h("label", { key: '50d308311270bbd8635bb7848495ee4aaa2a0cac', htmlFor: this.inputId }, this.inputLabel || localization.translate('Phone number'))))))), this.error && (index.h("zonos-text", { key: '27b0233f9241ce68348b2efd1c1b525d083363e5', textColor: "red-600" }, this.error))));
+            ]) }, index.h("input", Object.assign({ key: '506609e5191068451bc47968a232846df4c17724' }, 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 && (index.h("div", { key: '35f9894f905c8617564d3fc11f78cd3fbfef7a3c', class: "zonos--floated-label" }, index.h("label", { key: '9c768de7833455c630803f1ef1b4d7babc4f3cae', htmlFor: this.inputId }, this.inputLabel || translationStore.translate('Phone number'))))))), this.error && (index.h("zonos-text", { key: 'dd78d93a0ca2ae1384059cb08b839a1573a03e29', textColor: "red-600" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -8182,14 +8212,14 @@ const ZonosStripeSelect = class {
         const fontSize = zonosStore.zonosStore.appearance.fontSizeInputValue || 16;
         const hasContent = this.internalValue || this.selectPlaceholder;
         const showClearButton = this.isClearable && this.internalValue && !this.isDisabled;
-        return (index.h(index.Host, { key: '18d7ba03b9136af8614874b13b9ac3ce85f7c0d0', class: classes.classes([
+        return (index.h(index.Host, { key: 'bbc6df8df4a9cce0ad94cc48a99cba74ac116873', class: classes.classes([
                 'zonos--select zonos--elements',
                 isDark && 'dark',
                 this.isError && 'has-error',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: '88b8d885c11bc0776bd0c25b5f0a08f91cfb7c72', class: classes.classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: '757ff4b0b9be9206d03a917a07cc2af6f43152f5', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("select", Object.assign({ key: 'd972a6a7b91bb51f2d5ed291a686d521c1bf82a3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
+            ]) }, index.h("select", Object.assign({ key: '1a6cc4dcb3bc97879fb6a78c8323c9d32c0bac6d' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
                 'zonos--floated-select',
                 !!this.selectLabel && 'has-label',
                 hasContent && 'has-content',
@@ -8199,9 +8229,9 @@ const ZonosStripeSelect = class {
                 this.selectChange.emit(select.value);
                 this.selectedValue = select.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, required: this.required }), index.h("option", { key: 'b67730b2c3e77ba60221320519f55e67d7d2b127', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || localization.translate('Select')), this.internalOptions.map(option => (index.h("option", { key: option.value, selected: this.internalValue === option.value ||
+            }, required: this.required }), index.h("option", { key: '1f19c659824019af0a922c8f2ccde33364e0d566', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translationStore.translate('Select')), this.internalOptions.map(option => (index.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)))), index.h("div", { key: '088c104006e983b5ec1680067af32c0479dde13b', class: "zonos--floated-label" }, index.h("label", { key: 'faf3bf337253d205265b181d65d8f8024ffd6124', htmlFor: this.selectId }, this.selectLabel)), index.h("div", { key: '7ce8d36b84b08df139877cd2e12a26b8157ce83b', class: "zonos--actions-wrapper" }, showClearButton && (index.h("button", { key: 'b0a1af08afd9792ba4e7989361219c5cf7d5d8bc', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, index.h("zonos-icon", { key: '50ae86d5e9d9722b5546997f9fd52a997cac3add', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), index.h("zonos-icon", { key: '30034030f97f7ed6b3027cbc5220c73cde4bbbc2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (index.h("zonos-text", { key: 'cd02da8b1a1cb81581ac7285af84193000692eaa', textColor: "red-600" }, this.error))));
+                this.internalValue === option.label, value: option.value }, option.label)))), index.h("div", { key: '88d5729ef8d458d4a925eecb691fafaeaca51dff', class: "zonos--floated-label" }, index.h("label", { key: '9c8a9f0777649765a725a275c24385742017ea9d', htmlFor: this.selectId }, this.selectLabel)), index.h("div", { key: 'cfbf4de8d163b8151a3715847c0de73cb44a3104', class: "zonos--actions-wrapper" }, showClearButton && (index.h("button", { key: 'b39e96fc0667d2526efbe3af89473801c0c33b89', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, index.h("zonos-icon", { key: '6f8e626dbcbb17ac103ed9bd9998b3cc6e063d8d', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), index.h("zonos-icon", { key: '13f3cb171d1e4cc0678204a7fdeabcb801b9ef70', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (index.h("zonos-text", { key: '45c44644373adf202f88629171fdf9d32e6c2871', textColor: "red-600" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/zonos-badge.cjs.entry.js

@@ -50,16 +50,16 @@ const ZonosBadge = class {
         this.loading = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'd8a6a11f10c36a272ecdb52c54919f9ad45e1a9a', class: classes.classes(['zonos--elements zonos--badge']), style: {
+        return (index.h(index.Host, { key: '1da500c8477b6f425f2a7ac11a66f598dceba5d0', class: classes.classes(['zonos--elements zonos--badge']), style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'c7573446a478f9b9e45a4787593ba9ecaf595fdc', class: classes.classes([
+            } }, index.h("div", { key: 'b3692740733f6d0745164763b334d8ca06a25220', class: classes.classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, index.h("zonos-text", { key: '578f7cf2f27be3306fc7c776dc82a7a324a8b3ca', textColor: `${this.badgeColor}-800` }, index.h("slot", { key: '0b59f674e40454dcf07bea704f38c9df7d68cb43' })), this.dismissHandler && (index.h("zonos-icon", { key: 'ff4e2ee7511940df9ec27830e406502d7acf5209', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
+            ]) }, this.icon, index.h("zonos-text", { key: '4db8c88a1f0623f3dd575529b787eff8e5fcc8da', textColor: `${this.badgeColor}-800` }, index.h("slot", { key: 'bd288d8425236a176b33f71710ee7ecaf952a0e9' })), this.dismissHandler && (index.h("zonos-icon", { key: '095187937379f1df13b2ff09178ed0b7847fc2ee', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
     }
 };
 ZonosBadge.style = ZonosBadgeStyle0;