@zonos/elements 1.3.201 → 1.3.203

package/dist/esm/{paypal-6d4667d1.js → paypal-2e0ffb07.js}

@@ -1,7 +1,8 @@
-import { z as zonosStore, c as createStore } from './zonosStore-cdabc848.js';
-import { t as trackConversionEvent, F as validateCheckoutSession, f as stripeStore, e as cartStore, z as stripeStoreHandleInventoryCheck, r as translate, x as cartStoreNextStep, k as cartStoreClearCheckoutInterval } from './cart-f79c8021.js';
+import { z as zonosStore, c as createStore } from './zonosStore-d10a829f.js';
+import { t as trackConversionEvent, z as validateCheckoutSession, d as stripeStore, e as cartStore, v as stripeStoreHandleInventoryCheck, r as cartStoreNextStep, j as cartStoreClearCheckoutInterval } from './cart-db61eb95.js';
+import { t as translate, s as storageStore } from './localization-bf7224aa.js';
 import { h as handleFetch, l as log, b as logError, j as jsonParse } from './handleFetch-621e45bc.js';
-import { t as tinycolor } from './isDarkColor-4c7b2ffc.js';
+import { t as tinycolor } from './isDarkColor-31dd7dff.js';
 
 /*!
  * paypal-js v8.1.0 (2024-06-07T16:55:00.122Z)
@@ -444,7 +445,7 @@ const paypalStoreInitButtons = (props) => {
         log('Paypal is not available');
         return null;
     }
-    const checkoutSessionId = cartStore.checkoutSessionId;
+    const checkoutSessionId = storageStore.checkoutSessionId;
     if (!checkoutSessionId) {
         log('Paypal is not available due to checkoutSessionId is not available');
         return null;

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

@@ -1,15 +1,17 @@
 import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-a457c60c.js';
-import { e as cartStore, f as stripeStore, t as trackConversionEvent, V as getFallbackDefaultCountryCode, r as translate, l as localizationStore } from './cart-f79c8021.js';
-import { z as zonosStore, d as zonosStoreFontFamily, f as isObject_1 } from './zonosStore-cdabc848.js';
+import { d as stripeStore, t as trackConversionEvent, e as cartStore } from './cart-db61eb95.js';
+import { n as storageStoreOnChange, s as storageStore, o as getFallbackDefaultCountryCode, t as translate, l as localizationStore } from './localization-bf7224aa.js';
+import { z as zonosStore, d as zonosStoreFontFamily, f as isObject_1 } from './zonosStore-d10a829f.js';
 import { b as logError, l as log, i as isCheckoutMobile } from './handleFetch-621e45bc.js';
 import { s as shouldRenderTaxIdInput, i as isTextContainsNonLatinChars, c as containsNonLatinChars } from './shouldRenderTaxIdInput-8bc112bb.js';
 import { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-50d72254.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-413e97eb.js';
+import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
 import { R as RemoveIcon$2 } from './RemoveIcon-9dc5dd1a.js';
-import { i as isDarkColor } from './isDarkColor-4c7b2ffc.js';
-import { d as debounce_1 } from './debounce-a2121722.js';
+import { i as isDarkColor } from './isDarkColor-31dd7dff.js';
+import { d as debounce_1 } from './debounce-3a9f27a0.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './helpers-2f6955b1.js';
+import './VarianceTest-fef2d958.js';
 
 const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h .zonos--company-name-input.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
 const ZonosAddressStyle0 = zonosAddressCss;
@@ -19,6 +21,7 @@ const ZonosAddress$1 = class {
         registerInstance(this, hostRef);
         this.invalidCharacters = createEvent(this, "invalidCharacters", 7);
         this.taxIdChanged = createEvent(this, "taxIdChanged", 7);
+        this.onStoreCheckoutSessionIdChangedSubscription = () => { };
         /**
          * Google autocomplete overlay is conflict with our button, this is to adjust z index of the autocomplete
          */
@@ -27,6 +30,14 @@ const ZonosAddress$1 = class {
          * Check if the tracking event is sent
          */
         this.trackingSent = false;
+        this.onStoreCheckoutSessionIdChanged = () => {
+            const onCheckoutSessionIdChange = () => {
+                this.checkoutSessionId = storageStore.checkoutSessionId;
+            };
+            // Trigger it once on init because onChange doesn't get triggered on initial load
+            onCheckoutSessionIdChange();
+            this.onStoreCheckoutSessionIdChangedSubscription = storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
+        };
         this.type = undefined;
         this.titleText = undefined;
         this.defaultAddress = [];
@@ -34,7 +45,7 @@ const ZonosAddress$1 = class {
         this.stripe = window.Zonos.stripe;
         this.isDirtyAddress = false;
         this.isAddressFilled = false;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
+        this.checkoutSessionId = storageStore.checkoutSessionId;
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -63,7 +74,7 @@ const ZonosAddress$1 = class {
     }
     isAddressFilledChanged() {
         // Sometimes address elements is loaded with prefilled data before checkout is loaded, need to not send the event if checkout session id is not available, and send the event after checkout is loaded
-        if (!cartStore.checkoutSessionId) {
+        if (!storageStore.checkoutSessionId) {
             return;
         }
         // Only need to track the event if the shipping address is filled
@@ -71,7 +82,7 @@ const ZonosAddress$1 = class {
             !this.trackingSent &&
             this.type === 'shipping') {
             this.trackingSent = true;
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             void trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_customerInfoFilled',
@@ -243,6 +254,8 @@ 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();
     }
     componentDidLoad() {
         const stripeAddressEventData = this.getStripeAddressInstance().stripeAddressEventData;
@@ -251,15 +264,16 @@ const ZonosAddress$1 = class {
                 stripeAddressEventData.value.address.line1.length > 0;
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
+        this.onStoreCheckoutSessionIdChanged();
     }
     render() {
         var _a;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
+        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: 'ebd6b34dfcb486e1746fbc306e2e413d03290d50', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '68e7f0fa37ca7efd4d833b32d4c27cda29521871', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '5e6d4b3798c91def3f3a6ae5ac12f1a2ccca272b', class: "zonos--address-component" })));
+        return (h(Host, { key: '6cb58defa44e55a88bdb8ad3b1b2e96033337fec', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '2708affaeb700f6c256b38285696d3eaffa1d1ea', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '290de47b8579a70f997ead2ab3ada123dfa4d204', class: "zonos--address-component" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -415,9 +429,9 @@ const ZonosAddressSuggestions = class {
         return segments;
     }
     render() {
-        return (h(Host, { key: '88eff73526172a10854d2ae18b5b54afd3fd4b28', class: "zonos--address-suggestions", role: "group", style: {
+        return (h(Host, { key: 'eeb520d24c5cebca1f425c9648a2bdf0269f74c9', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, h("ul", { key: 'f55c95ab39906d2bcb6edc6d5379ec6c70f5277a', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: 'b7ca181e48f18ac7c0d2c8cfc1b05fec6df5827f', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '07577044166b2cbfbec0cf96786266d74dd1c098', class: "powered-by-container" }, h("zonos-text", { key: '3780f4763666ac08cfe7083749b5f781b74e4e66', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: '73c5d1db8a235cae3ebc2af0eba89d91ade8a6a1', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: '6d6058329ced6bae0f04ce4e80da07506f706847', "aria-label": "Clear suggestions", icon: h("zonos-icon", { content: RemoveIcon$1 }), noBackground: true, onClick: () => {
+            } }, h("ul", { key: 'f7ac29ef14417f8c86dbafcf840204f4c964b3ad', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: '13d34e64d8bd7711268a1f5641d0c868a89b949c', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: '00f20bd5568762ee581462826410031273e808da', class: "powered-by-container" }, h("zonos-text", { key: 'fc61a8ec973fc2cdf1e137563617cfed0badbb12', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: '96343fe696ec0d3990ffebaf450306ca91624d04', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: 'e7c6a9e64c8976a3c3a521b0794d2e82c1919ce2', "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
@@ -790,6 +804,7 @@ const ZonosAddress = class {
         registerInstance(this, hostRef);
         this.invalidCharacters = createEvent(this, "invalidCharacters", 7);
         this.addressChange = createEvent(this, "addressChange", 7);
+        this.onStoreCheckoutSessionIdChangedSubscription = () => { };
         /**
          * Whether the suggestion is clicked
          */
@@ -944,6 +959,14 @@ const ZonosAddress = class {
                 stripeStore.customBillingAddressErrors = customErrors;
             }
         };
+        this.onStoreCheckoutSessionIdChanged = () => {
+            const onCheckoutSessionIdChange = () => {
+                this.checkoutSessionId = storageStore.checkoutSessionId;
+            };
+            // Trigger it once on init because onChange doesn't get triggered on initial load
+            onCheckoutSessionIdChange();
+            this.onStoreCheckoutSessionIdChangedSubscription = storageStoreOnChange('checkoutSessionId', onCheckoutSessionIdChange);
+        };
         this.type = undefined;
         this.titleText = undefined;
         this.defaultAddress = [];
@@ -974,7 +997,7 @@ const ZonosAddress = class {
         this.lastNameError = '';
         this.isFirstInitialization = true;
         this.addressService = null;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
+        this.checkoutSessionId = storageStore.checkoutSessionId;
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -1003,7 +1026,7 @@ const ZonosAddress = class {
     }
     isAddressFilledChanged() {
         // Sometimes address elements is loaded with prefilled data before checkout is loaded, need to not send the event if checkout session id is not available, and send the event after checkout is loaded
-        if (!cartStore.checkoutSessionId) {
+        if (!storageStore.checkoutSessionId) {
             return;
         }
         // Only need to track the event if the shipping address is filled
@@ -1011,7 +1034,7 @@ const ZonosAddress = class {
             !this.trackingSent &&
             this.type === 'shipping') {
             this.trackingSent = true;
-            const checkoutSessionId = cartStore.checkoutSessionId;
+            const checkoutSessionId = storageStore.checkoutSessionId;
             void trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_customerInfoFilled',
@@ -1533,6 +1556,8 @@ const ZonosAddress = class {
         // unsubscribe from address suggestions when this component is removed from the DOM
         (_a = this.onAddressSuggestionsUnsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
         (_b = this.onAddressSelectedUnsubscribe) === null || _b === void 0 ? void 0 : _b.call(this);
+        // cleanup checkout session id subscription
+        this.onStoreCheckoutSessionIdChangedSubscription();
     }
     componentWillLoad() {
         if (zonosStore.checkoutAddressService) {
@@ -1555,12 +1580,13 @@ const ZonosAddress = class {
         // @Watch doesn't get trigger on initial load
         this.initAddressSuggestions();
         this.isFirstInitialization = false;
+        // subscribe to checkout session id changes from storage store
+        this.onStoreCheckoutSessionIdChanged();
     }
     render() {
         var _a;
         this.shippingZones = localizationStore.shippingZoneCountries;
         this.addressService = zonosStore.checkoutAddressService;
-        this.checkoutSessionId = cartStore.checkoutSessionId;
         if ((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) {
             this.isAddressFilled = true;
         }
@@ -1569,10 +1595,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: 'bb1f01c899ecdc1ed52eb8be7a680fdbb2ce9a7b', class: classes([
+        return (h(Host, { key: '7a766af62acc47886e716ac3c52c1457eae04545', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: 'f6ad6d23ec141fe192908b639802f69ad565958e', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: '224a78f8d1e02e2b0d7c95eafe9a1d4354fb5f73', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7836,24 +7862,24 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (h(Host, { key: 'c7ca4076eb70b166979d21074d068912af1496c5', class: classes([
+        return (h(Host, { key: '0d4501947787cbafe38acb60fb5ee7519b6d1c73', 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: '5460d79c86d34daf94538f063274c45ae3be2239', 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: 'c3e0f9655a39a5bb3d838634754be2af60a24a10', 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: '290d89088b9a800b31ed19cfe3de6831322a3f5a', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, h("select", { key: '1a58471117f6748d511498e016814bd907e8775f', 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: 'b0271d3453869ed79a36d62f5f6bacb22a509b46', class: "zonos--input-group" }, h("div", { key: '49486c915fa2f65878a6f8ab73c48997e4ba1461', class: "zonos--select-wrapper" }, h("div", { key: '63412e8077e062efef5f42c3a77e583ade435b53', class: "zonos--country-select" }, h("div", { key: '5c073598dfeaa0c8de68f07b1a7789f4a56a24c8', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '8a32922d75343005fde7446736746cd531ff63f8', class: "zonos--country-select-selected" }, h("div", { key: '859cdbc4c1879c38f0c848ff42b38bc5492d3e96', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: '9167a7c586e2d693bfdcad7773df60a324600be7', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: 'b39dcadb22202d866fc8e1217bbe2e17704e2300', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: '4b0a4ce8c94e6e3125cfde55542b38efb6a8a787', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '25322152ca9550a8b2e667f8f993c38a972aa9ce', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), h("div", { key: 'c6a93ba0656e09a154c3d91327f3573e0288234b', class: classes([
+        })), h("div", { key: '9c785521e095aae0cfc8af3ea90e4924c97202ac', class: "zonos--input-group" }, h("div", { key: 'b7fdd9db255ce33f3b6d3a982162c8286963324c', class: "zonos--select-wrapper" }, h("div", { key: '5d378436580df53793b1508af5e34bd43ba33ddf', class: "zonos--country-select" }, h("div", { key: '94628459db88e355b1c62b74cfcb48ec03022d4e', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '96b332ed9c62413887f96f38ce26cb05b81a3132', class: "zonos--country-select-selected" }, h("div", { key: 'b9e5bda55328f57e15afd349789233e3c28d2bf9', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: 'fc595df21c09553dc8ffb7fe79c3043831e65298', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: '6c792c383acf3ccac02be6b954a7eb18bcdda817', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: '970b9f6e18152e04375a248669fd7314088bcd2e', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '1da5919014eee0e34b60d1df08e83d44ad20d5c2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), h("div", { key: '7f0c215ddfb59c8e3c4413e44941a477a8adc6d6', class: classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, h("input", Object.assign({ key: '49246ff464685feaa9414d1e7b36f55b82fff564' }, 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: '653d278b7ffc634bc7892d54c8fcab7b7626f80e', class: "zonos--floated-label" }, h("label", { key: 'c637ddca7164396d57e8a5eaf98b0e523ee27258', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: 'dcc70c068fef73e804eba1f134673168a0bbaf90', textColor: "red-600" }, this.error))));
+            ]) }, 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 && (h("div", { key: 'a108f2796571f9d8a4201d1906b2381b89d14bc2', class: "zonos--floated-label" }, h("label", { key: '50d308311270bbd8635bb7848495ee4aaa2a0cac', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '27b0233f9241ce68348b2efd1c1b525d083363e5', textColor: "red-600" }, this.error))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7944,14 +7970,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: 'f5b178d5cbd48e9aff8701764a1fde4de03a6569', class: classes([
+        return (h(Host, { key: '18d7ba03b9136af8614874b13b9ac3ce85f7c0d0', 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: 'd7b3b8148777aa61f15c1489f44871589aadf00f', 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: '88b8d885c11bc0776bd0c25b5f0a08f91cfb7c72', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("select", Object.assign({ key: '629f7437fa445634db0589f217acb59b59e558d3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("select", Object.assign({ key: 'd972a6a7b91bb51f2d5ed291a686d521c1bf82a3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
                 'zonos--floated-select',
                 !!this.selectLabel && 'has-label',
                 hasContent && 'has-content',
@@ -7961,9 +7987,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: '9b50f769fc79f136b7b77916edd71acdcda199b7', 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: 'b67730b2c3e77ba60221320519f55e67d7d2b127', 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: '0ff44083dee7939d6f7bc2372990ccbef6066fed', class: "zonos--floated-label" }, h("label", { key: '8f9965fa3de61b705fa95e7ddc68013a3027464d', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '09aa1851295b86e30488ca69720d58d1246ad67c', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: '1db5be171f74849cedc3a8804bac23fdfa43aaa5', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: '2ca7e2da61eef16d6feb74c4d6a6198f1762ad16', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: 'c0050a27a619cb9b844282be841a320648f9d008', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: 'c0a3eb551533c4cb24f92ad6fd7a4b44cd24044c', textColor: "red-600" }, this.error))));
+                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: '088c104006e983b5ec1680067af32c0479dde13b', class: "zonos--floated-label" }, h("label", { key: 'faf3bf337253d205265b181d65d8f8024ffd6124', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '7ce8d36b84b08df139877cd2e12a26b8157ce83b', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: 'b0a1af08afd9792ba4e7989361219c5cf7d5d8bc', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: '50ae86d5e9d9722b5546997f9fd52a997cac3add', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: '30034030f97f7ed6b3027cbc5220c73cde4bbbc2', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: 'cd02da8b1a1cb81581ac7285af84193000692eaa', textColor: "red-600" }, this.error))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-cdabc848.js';
+import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
 import { c as classes } from './classes-0d95c529.js';
+import './VarianceTest-fef2d958.js';
 
 const RemoveLineIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8282 5.17184C11.0235 5.3671 11.0235 5.68368 10.8282 5.87894L8.70688 8.00026L10.8282 10.1216C11.0235 10.3168 11.0235 10.6334 10.8282 10.8287C10.6329 11.024 10.3164 11.024 10.1211 10.8287L7.99978 8.70737L5.87846 10.8287C5.68319 11.024 5.36661 11.024 5.17135 10.8287C4.97609 10.6334 4.97609 10.3168 5.17135 10.1216L7.29267 8.00026L5.17135 5.87894C4.97609 5.68368 4.97609 5.3671 5.17135 5.17184C5.36661 4.97658 5.68319 4.97658 5.87846 5.17184L7.99978 7.29316L10.1211 5.17184C10.3164 4.97658 10.6329 4.97658 10.8282 5.17184Z" fill="var(--zonos-elements-gray-800)"/>

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

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-cdabc848.js';
+import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
 import { c as classes } from './classes-0d95c529.js';
+import './VarianceTest-fef2d958.js';
 
 const zonosBannerCss = ":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{border-radius:var(--zonos-elements-radius-10);padding:16px;background:var(--zonos-elements-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:0px;grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:4px}:host(.info){background-color:var(--zonos-elements-blue-100);border:1px solid var(--zonos-elements-blue-200)}:host(.success){background-color:var(--zonos-elements-green-100);border:1px solid var(--zonos-elements-green-200)}:host(.error){background-color:var(--zonos-elements-red-100);border:1px solid var(--zonos-elements-red-200)}:host(.warning){background-color:var(--zonos-elements-orange-100);border:1px solid var(--zonos-elements-orange-200)}";
 const ZonosBannerStyle0 = zonosBannerCss;

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

@@ -1,11 +1,12 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-a457c60c.js';
-import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-cdabc848.js';
+import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './helpers-2f6955b1.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-413e97eb.js';
+import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
-import { i as isDarkColor } from './isDarkColor-4c7b2ffc.js';
+import { i as isDarkColor } from './isDarkColor-31dd7dff.js';
 import { s as styles } from './styles-6fc2fad9.js';
+import './VarianceTest-fef2d958.js';
 
 /**
  * Get theme for button text based on background color

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

@@ -1,7 +1,8 @@
 import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
-import { d as zonosStoreFontFamily } from './zonosStore-cdabc848.js';
+import { d as zonosStoreFontFamily } from './zonosStore-d10a829f.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-413e97eb.js';
+import { g as getBorderRadius } from './getBorderRadius-78b28b4d.js';
+import './VarianceTest-fef2d958.js';
 
 const zonosCardCss = ":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 .styled-card{border:var(--zonos-elements-border);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-6));padding:var(--spacing, 24px);text-align:left;background-color:var(--zonos--background-color);overflow:hidden}:host .styled-card hr{margin-left:calc(var(--spacing, 24px) * -1);margin-right:calc(var(--spacing, 24px) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, 24px);border-bottom:var(--zonos-elements-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);border-top:var(--zonos-elements-border);background:var(--zonos-elements-surface-color-secondary);margin-top:var(--spacing, 24px);border-bottom-left-radius:var(--zonos-elements-radius-8);border-bottom-right-radius:var(--zonos-elements-radius-8);height:var(--footerHeight)}";
 const ZonosCardStyle0 = zonosCardCss;