@zonos/elements 1.3.281 → 1.3.282

package/dist/esm/zonos-address-display_2.entry.js

@@ -0,0 +1,145 @@
+import { r as registerInstance, h, a as Host, d as createEvent } from './index-cfd394c8.js';
+import { t as translate, l as localizationStore } from './localization-0953a048.js';
+import { i as isTextContainsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
+import { f as zonosStoreFontFamily } from './zonosStore-b7d3f9b0.js';
+import { c as classes } from './classes-0d95c529.js';
+import { g as getBorderRadius } from './getBorderRadius-dc982fe6.js';
+import './handleFetch-a844cac1.js';
+import './VarianceTest-572cecf5.js';
+
+const zonosAddressDisplayCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--title{margin-bottom:12px}:host .zonos--address-group{display:-ms-flexbox;display:flex;gap:4px;-ms-flex-direction:column;flex-direction:column}:host .zonos--address-line{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .zonos--address-line zonos-text+zonos-text::before{content:\", \";color:var(--zonos-elements-gray-1000);margin-right:4px}:host .zonos--country-flag{width:20px;height:14px;border-radius:2px;margin:1px;position:relative;overflow:hidden;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);margin-right:8px;z-index:10;justify-self:center}";
+const ZonosAddressDisplayStyle0 = zonosAddressDisplayCss;
+
+const ZonosAddressDisplay = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        var _a;
+        const { city, country, email, line1, line2, name, phone, postal_code, state, } = this.currentAddress;
+        const shippingZoneCountry = (_a = localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[country];
+        const renderEnteredInfoText = ({ bold, content, }) => {
+            const textColor = isTextContainsNonLatinChars(content)
+                ? 'red-600'
+                : 'gray-1000';
+            return (h("zonos-text", { textColor: textColor, type: bold ? 'boldLabel' : 'body' }, content));
+        };
+        return (h(Host, { class: "zonos--address-form zonos--elements" }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: "gray-700", type: "smallHeader" }, this.addressType === 'shipping'
+            ? translate('Shipping')
+            : translate('Billing'))), h("div", { class: "zonos--address-group" }, name && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ bold: true, content: name }))), email && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: email }))), phone && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: phone }))), line1 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line1 }))), line2 && (h("div", { class: "zonos--address-line" }, renderEnteredInfoText({ content: line2 }))), h("div", { class: "zonos--address-line" }, city && renderEnteredInfoText({ content: city }), state && renderEnteredInfoText({ content: state }), postal_code && renderEnteredInfoText({ content: postal_code })), shippingZoneCountry && (h("div", { class: "zonos--address-line" }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: shippingZoneCountry.code }), ' ', renderEnteredInfoText({
+            content: shippingZoneCountry.displayName,
+        }))))));
+    }
+};
+ZonosAddressDisplay.style = ZonosAddressDisplayStyle0;
+
+const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;
+
+const zonosDialogCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0;top:0;background:var(--zonos-elements-backdrop-color);position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;gap:4px;z-index:2147483009;background:var(--zonos-elements-gray-0);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10))}:host .zonos--loading-text,:host .zonos--loading-title{max-width:100%;padding:0 32px;text-align:center}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--zonos-elements-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:2147483008;background:var(--zonos-elements-gray-0);max-width:90vw;max-height:90vh;min-height:var(--zonos--min-height, auto);height:var(--zonos--height, auto);width:var(--zonos--width, auto);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));outline:none;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:16px 24px}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--zonos-elements-size-md);height:var(--zonos-elements-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--zonos-elements-radius-10);-ms-flex-item-align:start;align-self:flex-start}:host .zonos--header .zonos--close-button:hover{background:var(--zonos-elements-hover-color)}:host .zonos--body{padding:8px 24px;max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:16px 24px}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:2147483008;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:2147483009;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
+const ZonosDialogStyle0 = zonosDialogCss;
+
+const ZonosDialog = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closeDialog = createEvent(this, "closeDialog", 3);
+        /**
+         * Whether or not the dialog is open
+         * @default false
+         */
+        this.open = false;
+        /**
+         * The header text for the dialog
+         */
+        this.headerText = '';
+        /**
+         * The width of the dialog
+         * @default 460px
+         */
+        this.width = '460px';
+        /**
+         * Whether or not to show the header
+         * @default false
+         */
+        this.noHeader = false;
+        /**
+         * Whether or not to have body padding
+         * @default false
+         */
+        this.noBodyPadding = false;
+        /**
+         * Whether or not to have body padding
+         * @default false
+         */
+        this.noBorder = false;
+        /**
+         * Whether or not to show the close button
+         * @default false
+         */
+        this.noCloseButton = false;
+        /**
+         * Whether or not to close the dialog when clicking outside of it
+         * @default false
+         */
+        this.noClickOutside = false;
+        /**
+         * Flag to determine if the checkout is on mobile
+         */
+        this.mobile = false;
+        /**
+         * Load loading spinner for the dialog or not
+         */
+        this.isLoading = true;
+        this.isMobile = false;
+        this.isMobileMode = () => {
+            return this.mobile || window.innerWidth <= 768;
+        };
+        this.closeButtonHandler = () => {
+            // Only do the action if the dialog is open
+            if (!this.open) {
+                return;
+            }
+            this.closeDialog.emit();
+        };
+        this.clickOutsideDialogHandler = (event) => {
+            if (event.target === event.currentTarget && !this.noClickOutside) {
+                this.closeDialog.emit();
+            }
+        };
+    }
+    handleWindowResize() {
+        this.isMobile = this.isMobileMode();
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.closeButtonHandler();
+        }
+    }
+    componentDidLoad() {
+        this.isMobile = this.isMobileMode();
+    }
+    render() {
+        const borderStyle = getBorderRadius({
+            overrideBorderStyle: this.borderStyle,
+        });
+        return (h(Host, { key: '93de5ea91ebef1927a2d7dc91a00f87277755ac7', class: classes([
+                'zonos--elements',
+                this.open && 'open',
+                this.isLoading && 'is-loading',
+                this.noBorder && 'no-border',
+                this.isMobile && 'mobile',
+            ]), style: {
+                '--zonos--border-radius': borderStyle,
+                '--zonos--font-family': zonosStoreFontFamily(),
+                '--zonos--height': this.height || 'initial',
+                '--zonos--min-height': this.minHeight || '500px',
+                '--zonos--width': this.width,
+            } }, h("div", { key: '86330a3de751f262a3f0f80fbeb436bb6e2b206f', class: "zonos--backdrop" }), h("div", { key: 'a6702c9a9b5bba9f3523503cd85ba6e6ae77fc9d', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '2c4d6e9170fbe80a2ea249d3f40cbc72e5df05d3', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'e83dcb53e9cd7504d588b124c6468535e81ce71d', class: "zonos--loading" }, h("zonos-spinner", { key: '5e8b3451b5358c76c2fdf47a0ad5eecc8394d012', size: 30 }), this.loadingTitle && (h("zonos-text", { key: '671203125d8fd7e8cb811b61b7190f826221507a', class: "zonos--loading-title", size: "l", weight: 700 }, this.loadingTitle)), this.loadingText && (h("zonos-text", { key: '791a95ed2bdad0c3bfb136c9e42d7d8e920110d9', class: "zonos--loading-text" }, this.loadingText)))), (this.headerText || !this.noCloseButton) && (h("div", { key: '8d4f7a2e12cd56d6341cf5aa17be1a7f151ca45b', class: "zonos--header" }, this.headerText && (h("h3", { key: '4bdd26b40a2209ccf44d85440cfbf173724f9aaa', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'c8f5d7eaff8c9ba94d60d587b5601472e80ea79a', 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: 'e5d91fb3bb3546e559566f8782aa9d939d0f1d04', class: classes([
+                'zonos--body',
+                this.noBodyPadding && 'zonos--no-body-padding',
+            ]) }, h("slot", { key: '2da7a3c7a978bb520c255a0043f96bf15b2dd006' })), h("slot", { key: '38ec2165a11c9cc2b121122124482590f9cd31e9', name: "dialog-footer" })))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+};
+ZonosDialog.style = ZonosDialogStyle0;
+
+export { ZonosAddressDisplay as zonos_address_display, ZonosDialog as zonos_dialog };

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, d as createEvent, h, a as Host, g as getElement } from './index-cfd394c8.js';
 import { t as throttle_1 } from './throttle-44bfb6b5.js';
-import { b as stripeStore, t as trackConversionEvent, V as extractName, H as stripeStoreOnChange, u as stripeStorePrefetchLandedCost, d as cartStore } from './cart-c66ec17e.js';
-import { s as storageStore, z as getFallbackDefaultCountryCode, t as translate, y as storageStoreOnChange, l as localizationStore } from './localization-6d36209f.js';
+import { U as extractName, b as stripeStore, t as trackConversionEvent, H as stripeStoreOnChange, u as stripeStorePrefetchLandedCost, d as cartStore } from './cart-5282f6c1.js';
+import { s as storageStore, z as getFallbackDefaultCountryCode, t as translate, y as storageStoreOnChange, l as localizationStore } from './localization-0953a048.js';
 import { z as zonosStore, g as getZonosStoreTheme, f as zonosStoreFontFamily } from './zonosStore-b7d3f9b0.js';
 import { l as logError, i as isCheckoutMobile, s as sendErrorLog } from './handleFetch-a844cac1.js';
 import { a as shouldRenderTaxIdInput, s as shouldRenderShortAddressCodeInput } from './shouldRenderTaxIdInput-ef7b5860.js';
@@ -13,6 +13,63 @@ import './debounce-c8d67b17.js';
 import './isDarkColor-039ef212.js';
 import './ShortAddressCode-7620e622.js';
 
+/**
+ * Map a Stripe address change event value into a Stripe `ContactOption`, used to
+ * pre-seed the address element's saved-address (contacts) list on remount.
+ */
+const mapAddressEventToContact = (value) => {
+    const { firstName, lastName } = extractName({
+        firstName: value.firstName,
+        lastName: value.lastName,
+        name: value.name,
+    });
+    return {
+        address: {
+            city: value.address.city,
+            country: value.address.country,
+            line1: value.address.line1,
+            line2: value.address.line2 || undefined,
+            postal_code: value.address.postal_code,
+            state: value.address.state,
+        },
+        name: (value.name || `${firstName} ${lastName}`).trim(),
+        phone: value.phone || undefined,
+    };
+};
+/**
+ * Build a dedupe key for a contact so we don't add a duplicate saved address. Compared
+ * case- and whitespace-insensitively on the distinguishing fields.
+ */
+const getContactDedupKey = (contact) => {
+    var _a, _b, _c;
+    return [
+        contact.name,
+        (_a = contact.address) === null || _a === void 0 ? void 0 : _a.line1,
+        (_b = contact.address) === null || _b === void 0 ? void 0 : _b.postal_code,
+        (_c = contact.address) === null || _c === void 0 ? void 0 : _c.country,
+    ]
+        .map(value => (value || '').trim().toLowerCase())
+        .join('|');
+};
+/**
+ * Prepend the currently selected address (from the latest Stripe address event) to the
+ * list of default saved addresses so it stays selected when the address element is
+ * remounted (e.g. navigating between the customer and shipping steps). Avoids adding a
+ * duplicate contact when the current address already exists in the list.
+ */
+const buildAddressContacts = ({ currentEvent, defaultAddress, }) => {
+    if (!currentEvent) {
+        return defaultAddress;
+    }
+    const currentContact = mapAddressEventToContact(currentEvent.value);
+    const currentKey = getContactDedupKey(currentContact);
+    const alreadyExists = defaultAddress.some(contact => getContactDedupKey(contact) === currentKey);
+    if (alreadyExists) {
+        return defaultAddress;
+    }
+    return [currentContact, ...defaultAddress];
+};
+
 const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h .zonos--company-name-input.sc-zonos-address,.sc-zonos-address-h .zonos--tax-id-input.sc-zonos-address,.sc-zonos-address-h .zonos--short-address-code-input.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
 const ZonosAddressStyle0 = zonosAddressCss;
 
@@ -140,10 +197,14 @@ const ZonosAddress = class {
         log(`Stripe country code: ${defaultAddressCountry}`, 'info');
         const addressElement = stripeElements.create('address', {
             allowedCountries: checkoutAllCountries ? [] : allowedCountries,
-            // only show the default address if stripeAddressEventData is not provided
-            contacts: defaultAddress.length && !stripeAddressEventData
-                ? this.defaultAddress
-                : [],
+            // Prepend the currently selected address so it stays selected across remounts
+            // (customer <-> shipping step navigation), de-duped against the default addresses.
+            // Contacts are computed once here at create() time and never mutated afterwards—
+            // mutating the contacts value after a remount breaks the element's onChange events.
+            contacts: buildAddressContacts({
+                currentEvent: stripeAddressEventData,
+                defaultAddress,
+            }),
             defaultValues: {
                 address: Object.assign(Object.assign({}, stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address), { country: defaultAddressCountry }),
                 firstName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName,
@@ -354,11 +415,11 @@ const ZonosAddress = 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: '9e66c8b7ba80d28aa430d6f5397d5eca16596e1a', class: classes([
+        return (h(Host, { key: '195940efdd29696d99b1ab6524a53e6a03776c6a', class: classes([
                 'zonos--address',
                 'zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, this.titleText && (h("zonos-text", { key: 'a731814dbada28f16699efe8bc23a18c7b6e04ff', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: '138f499157a6628970042d14d89c3420936a5811', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), h("div", { key: '51451d40580d128e3c38ab5f3f2cd471c21aaf01', class: "zonos--address-component" })));
+            ]) }, this.titleText && (h("zonos-text", { key: '968d5990fce9c1eb22cd10b58744e6d00f2e622d', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: 'ae6dd70dcaa5ecd3465c065736e0f31fb40e72d3', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), h("div", { key: '0bf3075670d3fcd945f9ddcbe096399e2dc213ed', class: "zonos--address-component" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -490,13 +551,13 @@ const ZonosConfirmDialog = class {
         const borderStyle = getBorderRadius();
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = getZonosStoreTheme(zonosStore.appearance.theme);
-        return (h(Host, { key: 'a91852d7fabd934497c5a87ad42b206dcee15ae7', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
+        return (h(Host, { key: 'dc074c5b88b642e06edd8942408a3aeed05e5cdb', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
                 '--zonos--border-radius': borderStyle,
                 '--zonos--dialog-width': `${this.dialogWidth}px`,
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '3074b85548fd1dc5023611423c52fbbd77a3e959', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: 'f326b54e65bddf562d4b9649b8964831d0545db6', class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '0ab0ae9fecdca87acb7adc33c14408978a40a009', class: "zonos--confirm-dialog", onBlur: () => {
+            } }, h("div", { key: '119a9c201e44a670fb1df61f6663d96f7148ecc6', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '9534a92f69dd3d692c1a2fd86fa1cf148f68cdfa', class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: 'e79aaf3a80b57634f78575b15a75d7b549ed20ee', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, h("div", { key: 'd168c39fa5a31a107cbe4ff325cf4184ee8b2ad3', class: "wrapper" }, h("div", { key: 'c7cdca4f45e22e36393616fa3970556477902ead', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '1dcf75c8657a414662271a4c93b0698bd174b010', class: "content" }, h("div", { key: '191344284e3173b22a37c3383c49cb51e0fb54a5', class: "title" }, h("zonos-text", { key: '539b24aa36afa5a6fe046ac37eda57ccc1170124', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '53d54141bdcc1f0df661df450f5393e657410025', class: "subtitle" }, h("zonos-text", { key: '0a8b74eceb87355ad6869e1338a708bb0182cab8', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '68fd8147f7834074392be28f0053cf2f802faf69', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: 'a8be0abcfc980ec720d64ec0dc5cdacf5d19dadb', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: 'c72ea83faa9cd24c5e6f5894045e07d4639a5fc4', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, h("div", { key: '44367b178f46c66dfb236485e05f6832ae63a63b', class: "wrapper" }, h("div", { key: '42d10d17180ec7364710682c27d6cd4fef0b8abe', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: 'b5f7563fb43e1b147db669e1df71f4fafb5284df', class: "content" }, h("div", { key: '38b78e383833b5e49908c8e95c35b9ad23c0f956', class: "title" }, h("zonos-text", { key: '726f5308881671e7e17bd0591521485bd7142c1e', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '58d663842d51a512b3c8799a907bd1ed58e4fb31', class: "subtitle" }, h("zonos-text", { key: '4411400d8906a22fd5f31652a1eeb314cae8ad68', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'df0452b2af633dd558858db824336fd5925aef50', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: '50f88e85e18129ef4ee209615b951683c5ff6fa8', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '314b8be8954241b8c261c62d5a4bbe8155cc6914', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -730,7 +791,7 @@ const ZonosLoadingOverlay = class {
         this.size = 40;
     }
     render() {
-        return (h(Host, { key: 'e9d9db9623f268cc66c39130607819fa8abede22', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: 'e766d339b90425e7379de4b773ae8f1da98992cb', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: '32a61d38a106367bd4d54cffd8aba2e6c4b1e933', size: this.size, spinnerColor: this.spinnerColor }))));
+        return (h(Host, { key: 'e284a5ada0945f1895dbd9b40039e9d2ef600111', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: 'fb68155fe133ba8cd1d923a0fbb37a382ecabc34', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: '50dc3d4b1f53173240d23ffeac966f7463546fde', size: this.size, spinnerColor: this.spinnerColor }))));
     }
 };
 ZonosLoadingOverlay.style = ZonosLoadingOverlayStyle0;

package/dist/esm/zonos-airwallex-payment.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, d as createEvent, h, a as Host, g as getElement } from './index-cfd394c8.js';
-import { b as airwallexStore, c as collectStore, f as airwallexStoreInitSdk, l as createElement, m as airwallexStoreGetLocale, n as airwallexStoreOnChange } from './collect-915fd59d.js';
-import { d as cartStore } from './cart-c66ec17e.js';
-import { e as localizationStoreOnChange, t as translate, l as localizationStore } from './localization-6d36209f.js';
+import { b as airwallexStore, c as collectStore, f as airwallexStoreInitSdk, l as createElement, m as airwallexStoreGetLocale, n as airwallexStoreOnChange } from './collect-fdbab973.js';
+import { d as cartStore } from './cart-5282f6c1.js';
+import { e as localizationStoreOnChange, t as translate, l as localizationStore } from './localization-0953a048.js';
 import { z as zonosStore } from './zonosStore-b7d3f9b0.js';
 import { l as log } from './VarianceTest-572cecf5.js';
 import { l as logError } from './handleFetch-a844cac1.js';

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

@@ -46,16 +46,16 @@ const ZonosBadge = class {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '91ff0cbf64075ac1cb47691dd114b4205253b8e9', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: 'c8d29084d1a10f985bcb52409881fff004a73118', class: classes(['zonos--elements zonos--badge']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '129b78caecaab54f8eb0dcb42fb2e398c2cfe2e6', class: classes([
+            } }, h("div", { key: '28cd3711c8e8d6b362c56589553401707456fdc6', 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: '69b9ef2d3d15e6753625aea7c96fe492583e50fe', textColor: `${this.badgeColor}-800` }, h("slot", { key: '7237a96503ebdd708a03f3571dc5f68abe6af496' })), this.dismissHandler && (h("zonos-icon", { key: '021350687aa80ccae8c32b2f4b7af5acc4469608', "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: '9dcb72621037e37fc11d5cabe915f6dad9798c2a', textColor: `${this.badgeColor}-800` }, h("slot", { key: '7599b4c4689100dc637a3842287a93a42b4edd41' })), this.dismissHandler && (h("zonos-icon", { key: '861156179b8c8a8d8db1b4ee72717581d2eb7222', "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-button_3.entry.js

@@ -207,13 +207,13 @@ const ZonosButton = class {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'd07f698c62e64fe404dc346e17aa4ebb23af635a', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '6e6b961c9215370bdbfce09715d1a16d878d2d85', 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: '721b3b8c4dbc0666de04510c091b7be558a7ede3' }, this.inheritedAttributes, { class: classes([
+            }) }, h("button", Object.assign({ key: '3941358241e37fb19b2ace0fa0d892002c6967f0' }, 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: 'c60e5e9d71ddf3750fbbcb911badca7885710518', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '3c863893cf81663c5a13dfdbd44b27828f01de31', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '7856e2a360552702a19ca58a0de763763c158749', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }), this.loading && (h("div", { key: '769b699dd66e0e5f960efe018b0be7fed2a2ecd3', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'e7be35423da99ccc0bf9ba2269f030f0c2ea9223', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'cacea287ce83b46f57aae7753805d8bf4e580f82', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get delegatesFocus() { return true; }
     get ele() { return getElement(this); }

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

@@ -2,10 +2,10 @@ import { r as registerInstance, h, a as Host, g as getElement, d as createEvent
 import { f as zonosStoreFontFamily } from './zonosStore-b7d3f9b0.js';
 import { c as classes } from './classes-0d95c529.js';
 import { g as getBorderRadius } from './getBorderRadius-dc982fe6.js';
-import { b as stripeStore, t as trackConversionEvent } from './cart-c66ec17e.js';
-import { s as storageStore } from './localization-6d36209f.js';
+import { b as stripeStore, t as trackConversionEvent } from './cart-5282f6c1.js';
+import { s as storageStore } from './localization-0953a048.js';
 import { l as logError } from './handleFetch-a844cac1.js';
-import { d as paypalStoreInitButtons, e as paypalStoreOnChange } from './paypal-cae1d404.js';
+import { d as paypalStoreInitButtons, e as paypalStoreOnChange } from './paypal-7c82eac4.js';
 import { l as log } from './VarianceTest-572cecf5.js';
 import './isDarkColor-039ef212.js';
 import './TaxId-63a14057.js';
@@ -36,16 +36,16 @@ const ZonosCard = class {
             customRoundRadius: `${this.borderRadius}px`,
             overrideBorderStyle: 'ROUNDED',
         });
-        return (h(Host, { key: '9abda7f00c442317f63521444b6eeb21f294d2bb', style: {
+        return (h(Host, { key: '2e397f11a2f497f2bafcf5f6a0f5922e66488845', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '2e1f1e4b59ce9ce87c7a22e58f0ae6c5dd0f0388', class: classes(['styled-card']), style: {
+            } }, h("div", { key: '300923b5b9b7db94cad3e47060174245ea61b75e', class: classes(['styled-card']), style: {
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderRadius,
                 padding: this.spacing,
-            } }, this.label && (h("header", { key: '215b106d17a37b8eb28e5ae730f0ff5401c02331', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '31363bdd23ac0ad625c6442fcf7110e559fa0201', type: "subheader" }, this.label), h("h-stack", { key: '10b338eaf67a92b84d7a9434f52e4c111a15f561', spacing: 8 }, this.actions))), h("slot", { key: 'afd067cc47d74d109f4fb4768fc8e0dfa4d88e70' }), (this.footerActions || this.footerContent) && (h("footer", { key: '17ee21b433ca723724c74e379b03b9c63a7b53eb', class: "card-footer", style: {
+            } }, this.label && (h("header", { key: '021cc3d1e0b79ab31c19212891d17fbaf5a5b77a', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '82f3d6ea4a52d822801d80b2a3c9cf35ed574464', type: "subheader" }, this.label), h("h-stack", { key: 'c272945368a1074513bcc06b7c306ca5c62ae8e9', spacing: 8 }, this.actions))), h("slot", { key: 'f1c1a3360eb8331e4f4ab69aec8c1dbd7dca2119' }), (this.footerActions || this.footerContent) && (h("footer", { key: '13f8e6d12545203c8a8a9ec5056e38df691eb907', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: 'fd2680f6ba67a7afcb8001ba2d9e0eff49b74675' }, this.footerContent), h("h-stack", { key: 'f7c716b48b470082b5196ddaeac189e476a4c3fd', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: 'aad83f26fe6816d98edd96ffc28c24b82085a5e9' }, this.footerContent), h("h-stack", { key: 'fd6bf6f1069f9e85d7b17fb944d26dd5fc7e0151', spacing: 8 }, this.footerActions))))));
     }
 };
 ZonosCard.style = ZonosCardStyle0;
@@ -258,7 +258,7 @@ const ZonosPayment = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'd349d019e557fd0070a9470d3bb81a0e563fea49', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '59429c85323dc6ffb1a5a7bc1f8a825318cc2da7', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'a5af87c08e853790ae41f65d9514e35f094f2bf0', class: "zonos--payment-component" }), h("div", { key: '9314981cd377b893c569824068988aa1990b882e', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: '8ccf61c2c78fac6b3d981b18dedae1e32921eb14', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '5ae4d0452d284b793ac179254b1891c183d63f03', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '251e74ccefed8ee31135cc29cdd71497f7cb1a8a', class: "zonos--payment-component" }), h("div", { key: 'b32c007382c63482f3e7f9af7c60afaaf8b4dbb9', class: "zonos--payment-paypal-container" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -322,7 +322,7 @@ const ZonosPaypalPayment = class {
         this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
     }
     render() {
-        return (h(Host, { key: '283f26fced92fbc16064967cf6d0cf8e7a8d34d4', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '31f4639edea489f91bb43c4c00b9019f949acaa4', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: 'd652adf83bc2620a8c21a7b2e6d8c0c419be8a1b', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: 'd6fdb79be6b31b5a2fb5ad6cc11c6001d4ac31e9', class: "zonos--payment-paypal-container" })));
     }
     get el() { return getElement(this); }
 };