@zonos/elements 1.3.218 → 1.3.220

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

@@ -1,12 +1,13 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-55a03023.js';
 import { d as debounce_1 } from './debounce-c34d1270.js';
 import { d as isObject_1, z as zonosStore, f as zonosStoreFontFamily } from './zonosStore-c456b933.js';
-import { c as stripeStore, t as trackConversionEvent, G as extractName, q as stripeStorePrefetchLandedCost, e as cartStore } from './cart-bb0ee971.js';
-import { s as storageStore, n as storageStoreOnChange, o as getFallbackDefaultCountryCode, t as translate, l as localizationStore } from './localization-d8326254.js';
+import { c as stripeStore, t as trackConversionEvent, J as extractName, A as stripeStoreOnChange, q as stripeStorePrefetchLandedCost, e as cartStore } from './cart-b2dd578c.js';
+import { s as storageStore, n as getFallbackDefaultCountryCode, o as storageStoreOnChange, l as localizationStore } from './localization-d7125e4e.js';
+import { t as translate } from './translationStore-13502f49.js';
 import { b as logError, l as log, i as isCheckoutMobile } from './handleFetch-99218189.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 { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-50d72254.js';
 import { g as getBorderRadius } from './getBorderRadius-87593ff4.js';
 import { R as RemoveIcon$2 } from './RemoveIcon-9dc5dd1a.js';
 import { i as isDarkColor } from './isDarkColor-1f58b6be.js';
@@ -91,7 +92,7 @@ const ZonosAddress$1 = class {
         registerInstance(this, hostRef);
         this.invalidCharacters = createEvent(this, "invalidCharacters", 7);
         this.taxIdChanged = 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
          */
@@ -127,14 +128,6 @@ const ZonosAddress$1 = class {
          */
         this.trackingSent = false;
         this.prefetchLandedCost = throttle_1(stripeStorePrefetchLandedCost, 1000);
-        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);
-        };
     }
     getStripeAddressInstance() {
         if (this.type === 'billing') {
@@ -344,12 +337,14 @@ const ZonosAddress$1 = class {
             } }), this.taxIdErrorMessage && (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.checkoutSettings.companyFieldsStatus === 'ENABLED';
+        // only render the company input if the setting is enabled or the cart is collect
+        const isCompanyNameEnabled = zonosStore.checkoutSettings.companyFieldsStatus === 'ENABLED' ||
+            !!window.Zonos.isCollect;
+        // No need to render company name for billing address (only allow for Collect)
         if (!isCompanyNameEnabled) {
             return null;
         }
@@ -361,8 +356,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;
@@ -371,7 +369,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 = storageStore.checkoutSessionId;
+        this.storeUnsubscribeList = [
+            storageStoreOnChange('checkoutSessionId', () => {
+                this.checkoutSessionId = storageStore.checkoutSessionId;
+            }),
+            stripeStoreOnChange('stripeElements', () => {
+                if (this.type === 'shipping') {
+                    void this.watchInitStripe();
+                }
+            }),
+            stripeStoreOnChange('stripeElementsForBillingAddress', () => {
+                if (this.type === 'billing') {
+                    void this.watchInitStripe();
+                }
+            }),
+        ];
     }
     render() {
         var _a;
@@ -380,7 +393,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 (h(Host, { key: '13b9fdc214b7ffeacaa180f1ba0d49032b417b6f', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '7a6ec3c462293e85926b0f379860d8d4edfe6120', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '36c094186e6ce2ce1d1c4e8f56823fd032b3ad9e', class: "zonos--address-component" })));
+        return (h(Host, { key: '15928518601e48825589ce4de4580263fec6a745', class: classes([
+                'zonos--address',
+                'zonos--elements',
+                `zonos--${this.type}-address`,
+            ]) }, this.titleText && (h("zonos-text", { key: '2e666ed81597ac95d3de575a2d901d083e9100cc', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '51aa6d2415bf6c7e067d0565b11a0d2c0629200b', class: "zonos--address-component" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -542,9 +559,9 @@ const ZonosAddressSuggestions = class {
         return segments;
     }
     render() {
-        return (h(Host, { key: 'eeb520d24c5cebca1f425c9648a2bdf0269f74c9', class: "zonos--address-suggestions", role: "group", style: {
+        return (h(Host, { key: '8ef1b971b88cd2280c40e69e1f6824f64e618467', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, 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: () => {
+            } }, h("ul", { key: '383e615d02815aad0f06d468dfcfbef3640fd5f5', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (h("li", { key: 'f2e6b766f567b0933263e19666e440cf692f248c', "aria-selected": false, class: "powered-by option", role: "option" }, h("div", { key: 'd629272b98461726f7eda75fde4cf1070946cd70', class: "powered-by-container" }, h("zonos-text", { key: '5b5591b04da2034b783f61394dbdc8f172484972', type: "caption" }, "Suggestions powered by"), h("zonos-text", { key: '45352a7ba4314ee1d68c2a53bb722368182283ee', type: "semiBoldLabel" }, "Google")), h("zonos-button", { key: '506450cf69ef74cde9ed5159633040701994f455', "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
@@ -814,14 +831,14 @@ const ZonosCheckbox = class {
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '177059d9f1ad06324719d97e02a48bb582fcc3d4', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: 'bef392ce775e35da3f0640dcbb8271437995daa7', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--size': `${this.size}px`,
-            } }, h("label", { key: '15c39a6c58b9d70e5174bb4d51ab6b8b8a48cabc', class: classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, h("input", { key: '1a6c85de7ca83822cc8e648a84f49580f520429a', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
+            } }, h("label", { key: '059e2eabc4825738a6607cd307694b252ba55905', class: classes([this.isDisabled && 'disabled']), htmlFor: this.inputId }, h("input", { key: 'a35c086ae478d5ac932608859e6b3250738c870f', checked: this.isChecked, disabled: this.isDisabled, hidden: true, id: this.inputId, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '8b498b0a271f07de4e2481a173aecb732a935c5b', class: "checkmark-container" }, h("svg", { key: '5d98f7b34f424942dfbd1071f82a5c4f481ac5a9', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, 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 && (h("zonos-text", { key: '6af368e40ed1a260f76aa014591e472004978d0c', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: '2482799b470a2ef5050709b6de36469ec8321b04', class: "checkmark-container" }, h("svg", { key: '1034db2d054e98fe06688b602346097b3e7c7d9d', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b926b486910470ea3180a904e8ec5ca2cf8e452f', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '5a31f075fb462c7419597f0d15b5e4a2f4e40148', size: this.fontSize }, this.label)))));
     }
 };
 ZonosCheckbox.style = ZonosCheckboxStyle0;
@@ -1734,10 +1751,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: '9e1d9e1ed3fca30876ba8310510873a5b10c6552', class: classes([
+        return (h(Host, { key: 'dcddfc6f0c63371c49f223f86a6c00df7ab30eed', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: '2356d42946b3ed93c4670fb876101a1371ac5c14', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: '70139b5412028d5dba2cc51ee8e3a81e182fd19a', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1847,7 +1864,7 @@ const ZonosDialog = class {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'a9932187bccf8e7fa505c7e07175d03541d66852', class: classes([
+        return (h(Host, { key: '6e673f681a3111d8e33c8cf4e8ab0c8f27c75d48', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -1859,10 +1876,10 @@ const ZonosDialog = class {
                 '--zonos--height': this.height || 'initial',
                 '--zonos--min-height': this.minHeight || '500px',
                 '--zonos--width': this.width,
-            } }, h("div", { key: '0298cf365a50e3544656a6d27ae59e922b9e3aed', class: "zonos--backdrop" }), h("div", { key: '9fce580a07147d51f17c898a22204c3d9ce6ac7b', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: 'b168439cd985cc5c0166a653db206688504cf7dd', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'e0b6215f3c7bc939721669069bc294e08558d8b5', class: "zonos--loading" }, h("zonos-spinner", { key: '687bcd6d2695933de828484c34aff1230bf71d49', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '04a57a4add896e3d96faca8b77321bba5f00b889', class: "zonos--header" }, this.headerText && (h("h3", { key: 'd084cb3aedcb7e5bb8fd82012b57f441d7dce4a2', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'c62701d002586d92f80d1d30644ae3948afc18f6', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), h("div", { key: 'a8aa531565e52672573785a613ab87a970189616', class: classes([
+            } }, h("div", { key: 'f245de30fb680fd673bd8531f3982b73ed506308', class: "zonos--backdrop" }), h("div", { key: 'ee75ecd48e28f38be08b5db9078c0b3b28b9bd9f', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: 'ce7d2273f358001b5899ba7a6ea8d5bd91ab55cb', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'e2cd0f877ed4f8b78b549a4aaedf1e67a234b0f7', class: "zonos--loading" }, h("zonos-spinner", { key: 'e0507e5fea599494979287fc4f13a7da08be758b', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '8d6cac393a445febf36cc6fb1811c00223518481', class: "zonos--header" }, this.headerText && (h("h3", { key: 'cb634d14db0a14144a370d66e3d5aa9147914038', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'd11ff8473046b201bad444c9b81a0566dd400829', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), h("div", { key: '356588fe85cce5298e4c2e862c31dab3018602a5', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: 'ede82b27d9e73f27ad0212203e0483a8294f72e5' })), h("slot", { key: '084c3a055462fbf8f25e336891e0dbb5faed7ed7', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: 'd525f4fab2449a219d42ccb45b4497076b5973c9' })), h("slot", { key: 'febb4e4ab0cb950b3a346052d60fa70ec8346be4', name: "dialog-footer" })))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -1880,6 +1897,7 @@ const ZonosLinkAuthentication = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.linkAuthenticationChange = createEvent(this, "linkAuthenticationChange", 7);
+        this.storeUnsubscribeList = [];
         /**
          * Default email for stripe
          */
@@ -1914,10 +1932,10 @@ const ZonosLinkAuthentication = class {
     watchIsStagingMode() {
         // Wait for the DOM to be ready before re-initializing Link element
         setTimeout(() => {
-            this.watchInitStripe();
+            void this.watchInitStripe();
         }, 0);
     }
-    watchInitStripe() {
+    async watchInitStripe() {
         if (!this.stripe || !stripeStore.stripeElements) {
             return;
         }
@@ -1976,7 +1994,31 @@ const ZonosLinkAuthentication = class {
             void this.watchInitStripe();
         }, 5);
     }
+    disconnectedCallback() {
+        // unsubscribe from store subscriptions
+        try {
+            this.storeUnsubscribeList.forEach(subscription => subscription());
+        }
+        catch (_a) { }
+    }
     componentDidLoad() {
+        this.storeUnsubscribeList = [
+            stripeStoreOnChange('stripeElements', async () => {
+                // Wait for the stripe elements to be ready with the new client secret
+                await new Promise(resolve => setTimeout(resolve, 1));
+                void this.watchInitStripe();
+            }),
+            stripeStoreOnChange('clientSecret', async () => {
+                // Wait for the stripe elements to be ready with the new client secret
+                await new Promise(resolve => setTimeout(resolve, 1));
+                this.clientSecret = stripeStore.clientSecret;
+            }),
+            stripeStoreOnChange('stripe', async () => {
+                // Wait for the stripe elements to be ready with the new client secret
+                await new Promise(resolve => setTimeout(resolve, 1));
+                this.stripe = stripeStore.stripe;
+            }),
+        ];
         // @Watch doesn't get trigger on initial load
         this.watchInitStripe();
         if (!this.defaultEmail) {
@@ -2009,7 +2051,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 (h(Host, { class: "zonos--link-authentication zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius(),
-            } }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), renderEmailAddress(), this.isEmailError && (h("zonos-text", { textColor: "red-600" }, translate('Please enter a valid email address.')))));
+            } }, this.titleText && (h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), renderEmailAddress(), this.isEmailError && (h("zonos-text", { textColor: "red-600" }, translate('Please enter a valid email address.')))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8045,24 +8087,24 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (h(Host, { key: '0d4501947787cbafe38acb60fb5ee7519b6d1c73', class: classes([
+        return (h(Host, { key: 'ed5b02d0f617b0611ecba382cf8447570c3cee76', 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: 'c3e0f9655a39a5bb3d838634754be2af60a24a10', 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: '8644eb1a24b4a2cdf491a8176f70e2fa35389fa6', 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: '1a58471117f6748d511498e016814bd907e8775f', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, h("select", { key: '747109b80d3d02778ded01392d853a050f675114', 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: '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([
+        })), h("div", { key: '399beecaead5791d81ffd1db679f5b235c056769', class: "zonos--input-group" }, h("div", { key: '599a287f610935762e3229577bf35cfaee8ffe7f', class: "zonos--select-wrapper" }, h("div", { key: 'a1402a12ffa599e4dd42523696121d0a1cec60b6', class: "zonos--country-select" }, h("div", { key: 'a798cf4e8f4f5cfef5554404c578076f507d0dd2', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '6a0313b6cd969a095002b18830fcbbd104e42570', class: "zonos--country-select-selected" }, h("div", { key: 'b6d2403854632f40dfd23d15b1eb8ef5625e1059', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: '60397bbbbc9c6083064de1427cedeb148f36a35d', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: 'effc1b9bc5fa1cd832e686b6e87ccac87e41ffb8', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: '8e5aa3603dc4a869ce7335c2903a15903d5e61d4', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '8b9ea89b5234a345d556d06649add11401baa184', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), h("div", { key: '21514d3e3f66095b79eb53e47fff6a98fbf12fba', class: classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, 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))));
+            ]) }, h("input", Object.assign({ key: '50421e7a8343203ee623a4e61f957abd115d0495' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: '5025154c17fc9145b1b2bf2036ec7796287094ea', class: "zonos--floated-label" }, h("label", { key: '9af81cc3320de319ea84637bbb923c4b81a506d1', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '523df8b2d650663ac43516d8ae9954ffd208c5e8', textColor: "red-600" }, this.error))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8178,14 +8220,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: '18d7ba03b9136af8614874b13b9ac3ce85f7c0d0', class: classes([
+        return (h(Host, { key: 'e781d691f1f1f72ceed06c488af7f427ed4f82d0', 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: '88b8d885c11bc0776bd0c25b5f0a08f91cfb7c72', 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: '4df83fa9bcb12e94e2d4bba3d6f31a4f56006097', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("select", Object.assign({ key: 'd972a6a7b91bb51f2d5ed291a686d521c1bf82a3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("select", Object.assign({ key: '31daa88fdaeb8a35055b97ade6aa10bbd234568a' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
                 'zonos--floated-select',
                 !!this.selectLabel && 'has-label',
                 hasContent && 'has-content',
@@ -8195,9 +8237,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: '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 ||
+            }, required: this.required }), h("option", { key: '4c5c09493d0e9d38bc56860682c092017dc927ff', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translate('Select')), this.internalOptions.map(option => (h("option", { key: option.value, selected: this.internalValue === option.value ||
                 // Sometimes google returns the label not the code for some countries
-                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))));
+                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: 'abe6ea181a207b8b85232226078c92ab1a8b6618', class: "zonos--floated-label" }, h("label", { key: 'c079f2f21289e5ba06906fd7e29b3c8216c6ae01', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '3cad61609828a9b38a4a38625629481c9fb5411e', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: 'f24323bdbd652cff52bec827f3a93a2e343e35c4', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: 'e8fe204b510477855de4dfee29d1200f30c50933', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: 'f071765d705d67b741f9381bbe96e2e8beb0968d', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: '7425ced4032df77a7f1219f9c03caedcd1a55841', textColor: "red-600" }, this.error))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -46,16 +46,16 @@ const ZonosBadge = class {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: 'd8a6a11f10c36a272ecdb52c54919f9ad45e1a9a', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '5213d69a38c0e00d02d4c85d499ee5b5ca5a929c', class: classes(['zonos--elements zonos--badge']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'c7573446a478f9b9e45a4787593ba9ecaf595fdc', class: classes([
+            } }, h("div", { key: '178886813185320c971444c181a4fe0e8b57d7e3', class: classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: '578f7cf2f27be3306fc7c776dc82a7a324a8b3ca', textColor: `${this.badgeColor}-800` }, h("slot", { key: '0b59f674e40454dcf07bea704f38c9df7d68cb43' })), this.dismissHandler && (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, h("zonos-text", { key: '6e75ee5fbbbe62b2d2c875a4866f33060dd9618b', textColor: `${this.badgeColor}-800` }, h("slot", { key: 'b6c1dcd8b29f1c99dc2cbd37d944ad8af3267713' })), this.dismissHandler && (h("zonos-icon", { key: '232d8056ee38962614267def07647c3f52246f0d', "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;

package/dist/esm/{zonos-banner.entry.js → zonos-banner_2.entry.js}

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-55a03023.js';
 import { f as zonosStoreFontFamily } from './zonosStore-c456b933.js';
 import { c as classes } from './classes-0d95c529.js';
+import { g as getBorderRadius } from './getBorderRadius-87593ff4.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)}";
@@ -69,4 +70,42 @@ const ZonosBanner = class {
 };
 ZonosBanner.style = ZonosBannerStyle0;
 
-export { ZonosBanner as zonos_banner };
+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;
+
+const ZonosCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The border radius of the card
+         * @default 6
+         */
+        this.borderRadius = 6;
+        /**
+         * The spacing to apply between elements in the card
+         */
+        this.spacing = '24px';
+    }
+    render() {
+        const backgroundColor = this.backgroundColor
+            ? `var(--zonos-elements-${this.backgroundColor})`
+            : 'transparent';
+        const borderRadius = getBorderRadius({
+            customRoundRadius: `${this.borderRadius}px`,
+            overrideBorderStyle: 'ROUNDED',
+        });
+        return (h(Host, { key: '9423d1472ed313f50c5f4ecc61251025ac6083ed', style: {
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '7d2506d2fa9297dce93676bd09dd854a84f27db3', class: classes(['styled-card']), style: {
+                '--zonos--background-color': backgroundColor,
+                '--zonos--border-radius': borderRadius,
+                padding: this.spacing,
+            } }, this.label && (h("header", { key: '81e381540ecbd5c398e5cabf6626d701569e16e5', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '7929725b31dec41dbab855daa3bd7ae97fb00eb3', type: "subheader" }, this.label), h("h-stack", { key: 'c69fe767e575b3aaf824eb355d7bb35e395ba77a', spacing: 8 }, this.actions))), h("slot", { key: 'ada30bc1760b957a817e0982e46f3def97974297' }), (this.footerActions || this.footerContent) && (h("footer", { key: '854c3d583cb293f5c064af87e839641a5201c900', class: "card-footer", style: {
+                height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
+                padding: this.spacing,
+            } }, h("div", { key: '0a799500938f8d04a8551134b21fe18a05f93de0' }, this.footerContent), h("h-stack", { key: '927b51384452ab01b28da02c9a83256ab7dc6991', spacing: 8 }, this.footerActions))))));
+    }
+};
+ZonosCard.style = ZonosCardStyle0;
+
+export { ZonosBanner as zonos_banner, ZonosCard as zonos_card };

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

@@ -207,13 +207,13 @@ const ZonosButton = class {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '88cc4ce2ac8a82e62ac4a5a3828724b92da1db60', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: 'd44e5db9b123906c2435285d23d0d05b6c15d8b3', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--color': color,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--font-weight': this.bold ? 'bold' : 'normal',
-            }) }, h("button", Object.assign({ key: '4037731e2337e441a2eeb5e28433ba8426cb75b2' }, this.inheritedAttributes, { class: classes([
+            }) }, h("button", Object.assign({ key: 'a937efb3d014fd8f5501fcde7c3c2f0cb33439aa' }, this.inheritedAttributes, { class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -228,7 +228,7 @@ const ZonosButton = class {
                 backgroundColor && variant === 'standard' && 'override-background',
             ]), disabled: disabled, style: {
                 justifyContent: this.justifyContent,
-            } }), this.loading && (h("div", { key: '09f824b2106313200deaa1bdcb7afc3e3b161911', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'b094e740a91c49a14a31fc56142dccf1062a584b', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '8bfc81ae6f5f114a0255854aa79db32a5ee39259', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }), this.loading && (h("div", { key: '09292867f621fd3e04313494809e59254a353403', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '250912ac9cc2ba4d9d5db8fdc67fa6009d5ea7ac', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '0695250725aff37526e6ea4f94456a368b873c59', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get delegatesFocus() { return true; }
     get ele() { return getElement(this); }