@zonos/elements 1.3.30 → 1.3.32

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.js

@@ -6,6 +6,7 @@ import { translate } from "../../store/translationStore";
 import { getZonosStoreTheme, zonosStore, } from "../../store/zonosStore";
 import { buildCartItemsByTempCart } from "../../utils/api/buildCartItemsByTempCart";
 import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
+import { getIsTestMode } from "../../utils/checkout/getIsTestMode";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { isShippableCountry } from "../../utils/checkout/isShippableCountry";
 import { watchBigcommerceDomesticCheckout } from "../../utils/checkout/watchBigcommerceDomesticCheckout";
@@ -458,15 +459,18 @@ export class ZonosCheckout {
         const url = window.location.href;
         // Remove query parameters
         const cleanUrl = url.split('?')[0];
-        // Update the URL without query parameters
+        const isTestMode = getIsTestMode();
+        this.open = false;
+        // Update the URL without query parameters only if it's not in test mode
         /**
          * Setting the state to null in window.history.replaceState can cause issues with rendering when using next/link and pressing the back button.
          * @ref https://github.com/vercel/next.js/issues/33233#issuecomment-1052349396
          **/
-        window.history.replaceState(window.history.state, document.title, cleanUrl);
-        this.open = false;
-        // Reload the page
-        window.location.reload();
+        if (!isTestMode) {
+            window.history.replaceState(window.history.state, document.title, cleanUrl);
+            // Reload the page
+            window.location.reload();
+        }
     }
     handleWindowResize() {
         this.isMobile = isCheckoutMobile(this.mobile);
@@ -487,6 +491,9 @@ export class ZonosCheckout {
             this.appearanceSettingsOverride.theme = getZonosStoreTheme(this.appearanceSettingsOverride.theme);
         }
     }
+    handleAddressChange() {
+        stripeStoreReset();
+    }
     componentWillLoad() {
         void this.init();
         this.isMobile = isCheckoutMobile(this.mobile);
@@ -537,8 +544,9 @@ export class ZonosCheckout {
                 : logoUrl;
             return (h("div", { class: "zonos--logo" }, logo && (h("img", { alt: `${zonosStore.organizationName} logo`, src: logo, width: 100 }))));
         };
+        const isTestMode = getIsTestMode();
         const renderTopHeader = () => {
-            return (h("zonos-v-stack", null, renderLogo(), h("zonos-checkout-progress-tabs", { backgroundColor: 
+            return (h("zonos-v-stack", null, h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (h("zonos-badge", { badgeColor: "orange", size: "small" }, translate('Test mode')))), h("zonos-checkout-progress-tabs", { backgroundColor: 
                 // only use different contrast color when the secondary color is too off with the background in mobile
                 this.isMobile ? '--zonos-elements-gray-0' : null }), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
         };
@@ -803,6 +811,9 @@ export class ZonosCheckout {
             }, {
                 "propName": "appearanceSettingsOverride",
                 "methodName": "handleAppearanceSettingsOverrideChange"
+            }, {
+                "propName": "defaultAddress",
+                "methodName": "handleAddressChange"
             }];
     }
     static get listeners() {

package/dist/collection/components/checkout/zonos-checkout/zonos-review/zonos-review.js

@@ -42,7 +42,9 @@ export class ZonosReview {
         return (h(Host, { class: classes([
                 'zonos--review zonos--elements',
                 this.isMobile && 'mobile',
-            ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, currencyFormat({
+            ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: titleTextColor, type: titleTextType }, translate('Pay [organizationName]', {
+            organizationName: zonosStore.organizationName,
+        })), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, currencyFormat({
             amount: total,
             currency: cartStore.currency,
         })))));

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js

@@ -108,7 +108,7 @@ export class ZonosShipping {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: '11734c7c14a3a63e733a7fa4f2e202bf3b069fd4', class: "zonos--shipping zonos--elements" }, h("div", { key: 'ac22237e620e0b65c9b3920d57373207f991d926', class: "zonos--group" }, h("zonos-text", { key: 'ee4c12ab90bcd029027284d00ab304ea4dd5a71a', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: '4b641aaf9270a8bf022d66878096768fe2956e4a', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '6b29f4338c0920040599cdf01154b43d274ecfed', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: '7b649c6c3da3c8023edc177077679bc2f397a91f', class: "zonos--group-btn" }, h("zonos-button", { key: '18181ad177d5beb7cdd8a3d0e437b332dd20f669', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        return (h(Host, { key: 'a00e5aa3844a5df009db0b2364d56700f37c2d20', class: "zonos--shipping zonos--elements" }, h("div", { key: 'b9037a08517557f2a5eb7d85fde9d8b551c196a5', class: "zonos--group" }, h("zonos-text", { key: '68fa391e9df29791eacff17af55d319bd5faafcf', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: '9bf0e9b1131c4412e5883c1706ae3152e7cdb13b', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '32dcef256412bb41d6a05b579d0d2ce38b8bdf6a', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: '47dda4f3f44377fba5ae58dd704e9858b6b9c606', class: "zonos--group-btn" }, h("zonos-button", { key: 'ca4dca0f3f14926af5864fb935cb758f54238a00', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }

package/dist/collection/components/common/zonos-badge/zonos-badge.css

@@ -89,6 +89,7 @@
 :host .orange {
   background-color: var(--zonos-elements-orange-100);
   color: var(--zonos-elements-orange-800);
+  border: 1px solid var(--zonos-elements-orange-200);
 }
 :host .orange.bold {
   background-color: var(--zonos-elements-orange-600);
@@ -109,4 +110,13 @@
 :host .cyan.bold {
   background-color: var(--zonos-elements-cyan-600);
   color: var(--zonos-elements-cyan-100);
+}
+:host .transparent {
+  background-color: transparent;
+  border: 1px solid var(--zonos-elements-gray-200);
+  color: var(--zonos-elements-gray-800);
+}
+:host .transparent.bold {
+  background-color: var(--zonos-elements-glass-600);
+  color: var(--zonos-elements-gray-100);
 }

package/dist/collection/components/common/zonos-badge/zonos-badge.js

@@ -11,16 +11,16 @@ export class ZonosBadge {
         this.rounded = false;
     }
     render() {
-        return (h(Host, { key: '6abf1f29bb6368710b45414baca9643421de2643', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '4e022b4090de017818c5ba8f86e2d7684a1b8f05', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'fb0b246a59f0350313673d4430ac4f2bcd9d6b80', class: classes([
+            } }, h("div", { key: '8e6a4c0fcf81939d69fd3aec91463ed6c7a2d67d', 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: '2d6024af48ce0e082d3a1332794978cfd42793d6' }, h("slot", { key: '9cb7e771b0a949b912c6fa5946018cbf072ed018' })))));
+            ]) }, this.icon, h("zonos-text", { key: '5824866453d31abef18443179e6bc1692e9e98a3', textColor: `${this.badgeColor}-800` }, h("slot", { key: '9bc411177ae04e8fa1061098023860204fa1a5d7' })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -61,8 +61,8 @@ export class ZonosBadge {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ColorPrefix",
-                    "resolved": "\"blue\" | \"cyan\" | \"glass\" | \"gray\" | \"green\" | \"orange\" | \"purple\" | \"red\"",
+                    "original": "ColorPrefix | 'transparent'",
+                    "resolved": "\"blue\" | \"cyan\" | \"glass\" | \"gray\" | \"green\" | \"orange\" | \"purple\" | \"red\" | \"transparent\"",
                     "references": {
                         "ColorPrefix": {
                             "location": "import",
@@ -78,7 +78,7 @@ export class ZonosBadge {
                             "name": "default",
                             "text": "24"
                         }],
-                    "text": "The size of the badge"
+                    "text": "The color of the badge"
                 },
                 "attribute": "badge-color",
                 "reflect": false,

package/dist/collection/components/common/zonos-button/zonos-button.js

@@ -92,6 +92,7 @@ export class ZonosButton {
         this.noPaddingLeft = false;
         this.noPaddingRight = false;
         this.loading = false;
+        this.justifyContent = 'center';
         this.theme = undefined;
         this.hasIcon = !!this.icon;
         this.hasContent = false;
@@ -120,12 +121,12 @@ export class ZonosButton {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'a07724884592f96388174eb751bc3349391e2bf6', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '51f49811674e7ef1efe49389afc3fc70e4f5a46c', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'd34d62c7582abdb6aee6a1ec7fefb89bcc7a31ac', class: classes([
+            }) }, h("button", { key: 'f11f4f6877a0947df57dbe5baf658b69d91fff4d', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -138,7 +139,9 @@ export class ZonosButton {
                 this.size,
                 // only override background if variant is set to standard
                 backgroundColor && variant === 'standard' && 'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { key: 'aaa929d205d5a4cec679f3ee7ef6097801dc69d0', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '372b0a8504ecb0af54c7f68a67d6ad400bb13173', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '0eefacfb7af58abf8049fd72180ba82f09ef9a34', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled, style: {
+                justifyContent: this.justifyContent,
+            } }, this.loading && (h("div", { key: '35f474efa80cde690afd876863d25f3b46198ecf', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '7476edf05b7d85d5f2f6900a7ad97c49d2216dd8', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'a4e8bfc0aef84561416ddc5f38602ed346db6f4b', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }
@@ -196,7 +199,7 @@ export class ZonosButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The color of the button text and svg\n**NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded"
+                    "text": "The color of the button\n**NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded"
                 },
                 "attribute": "background-color",
                 "reflect": false
@@ -440,6 +443,27 @@ export class ZonosButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "justifyContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'center' | 'flex-end' | 'flex-start'",
+                    "resolved": "\"center\" | \"flex-end\" | \"flex-start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'center'"
+                        }],
+                    "text": "The content alignment within the button"
+                },
+                "attribute": "justify-content",
+                "reflect": false,
+                "defaultValue": "'center'"
+            },
             "theme": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/common/zonos-card/zonos-card.css

@@ -33,9 +33,11 @@
 
 :host .styled-card {
   border: var(--zonos-elements-border);
-  border-radius: var(--zonos-elements-radius-6);
+  border-radius: var(--border-radius, var(--zonos-elements-radius-6));
   padding: var(--spacing, 24px);
   text-align: left;
+  background-color: var(--background-color);
+  overflow: hidden;
 }
 :host .styled-card hr {
   margin-left: calc(var(--spacing, 24px) * -1);

package/dist/collection/components/common/zonos-card/zonos-card.js

@@ -2,9 +2,12 @@ import { h } from "@stencil/core";
 import { Host } from "@stencil/core/internal";
 import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
 export class ZonosCard {
     constructor() {
         this.actions = undefined;
+        this.backgroundColor = undefined;
+        this.borderRadius = 6;
         this.footerActions = undefined;
         this.footerContent = undefined;
         this.footerHeight = undefined;
@@ -12,12 +15,23 @@ export class ZonosCard {
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { key: '0e52ca31db6c2f956da1910d6e0a222b588c1bcc', style: {
+        const backgroundColor = this.backgroundColor
+            ? `var(--zonos-elements-${this.backgroundColor})`
+            : 'transparent';
+        const borderRadius = getBorderRadius({
+            customRoundRadius: `${this.borderRadius}px`,
+            overrideBorderStyle: 'ROUNDED',
+        });
+        return (h(Host, { key: 'e239a3af7d0bb71537ef94a13672ffa906adedd9', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '69f391d821f88cbee4b0c586a8323b1dd68d7fd3', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { key: '4568a1d7c354830e6e65e31b20b38140aaab9d01', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: 'e0a6b7a3776916f8208c27373878041807d91960', type: "subheader" }, this.label), h("h-stack", { key: 'c5f8d01b2f477b16ab9387081987eae64b156e76', spacing: 8 }, this.actions))), h("slot", { key: '6001acfaae8ba37456a7c23bae5c44a91da074f9' }), (this.footerActions || this.footerContent) && (h("footer", { key: '78b926a323a5f1375c8120d5aa8b1ab2a4f3fa4a', class: "card-footer", style: {
+            } }, h("div", { key: '41efc14a60719dbf847be74385d8d1c4065cee84', class: classes(['styled-card']), style: {
+                '--background-color': backgroundColor,
+                '--border-radius': borderRadius,
+                padding: this.spacing,
+            } }, this.label && (h("header", { key: '012234fa59c5c50cf78ff7a4b2dc0efaecd3cc20', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '133ae9f43b50edca812aa0aab203febbffc07318', type: "subheader" }, this.label), h("h-stack", { key: '542c1e7b4d1f1e0751231cff9cb4ae5df3a82fa6', spacing: 8 }, this.actions))), h("slot", { key: '307ff202ce1c090f37b3f377a3f64efbea7a2e67' }), (this.footerActions || this.footerContent) && (h("footer", { key: '6641fba300b6acf06a650a73393612e774e79f1a', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: '2bd0c86b75096c2ee786d4a9b16a3d6e385fbbf1' }, this.footerContent), h("h-stack", { key: '7a3f840ac9678a905338a99b8327115bc8199789', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: '40676761caaa588d4a503fe791e296829636e717' }, this.footerContent), h("h-stack", { key: 'f4f61d848c4b2e9c070b006146a88841a2f6f45f', spacing: 8 }, this.footerActions))))));
     }
     static get is() { return "zonos-card"; }
     static get encapsulation() { return "shadow"; }
@@ -53,6 +67,50 @@ export class ZonosCard {
                     "text": "The actions to display in the header of the card"
                 }
             },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "Color | undefined",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "src/types",
+                            "id": "src/types/index.ts::Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The background color of the card"
+                },
+                "attribute": "background-color",
+                "reflect": false
+            },
+            "borderRadius": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "6"
+                        }],
+                    "text": "The border radius of the card"
+                },
+                "attribute": "border-radius",
+                "reflect": false,
+                "defaultValue": "6"
+            },
             "footerActions": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/common/zonos-checkbox/zonos-checkbox.js

@@ -36,14 +36,14 @@ export class ZonosCheckbox {
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '8a1adb8ba23d34a7730e5b5a81bc6b5ada58cb83', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: 'bf51dd642e88096e874d78023a29dd68239e8d3a', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: 'e954bcef9e021bfbb98031f030542a89d8faf0f3', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '17788f6c205a139dde1b42cc91579d0975233e77', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: '3598c9f21285304499aaafbab5226d619ecf4e69', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '277507f643404e6e44191c2d715b70f38fc6af85', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '589486a19b7b0b42ce8eabd2230a8b4620ca3216', class: "checkmark-container" }, h("svg", { key: 'd56ce06c20e0c3460b6222d323d0a17059147157', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5e6af8d520bcb7c3b0fe2891ce0c2e783976b501', "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: '18c5a586756ddc0808c05f305c89dbb07f1b7d16', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: '3f0fd0d458e8cf660fa883ceaa241e3397829548', class: "checkmark-container" }, h("svg", { key: '0d654744bea5b5696ddcf3778a155fb622022f1e', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cc19837ee088feb7053fdaeaea0d1213cbc60775', "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: 'cb85d59651f67a33126d37c3ebfb1e8a91b457fe', size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js

@@ -63,17 +63,17 @@ export class ZonosCheckoutProgressTabs {
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (h(Host, { key: '1c51be111b22f45ad33d430dc4d0a250f8e4d911', class: "zonos--elements", style: {
+        return (h(Host, { key: '472a2f3201149fbc99057c8c5c39f002e792c37b', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: '01e24d42123318aa23982e742b5f2053f5b5392d', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            } }, h("div", { key: 'bc90b6d7e6e8d9ef943473f6599588e326992814', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
             const isSelected = tab.value === selectedStep;
             return (h("button", { class: classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cartStore.step = tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, translate(tab.label))));
-        })), h("div", { key: '55832cb123f7efa019ccddfe6bd82938d9f02206', class: "zonos--tab-progress" }, h("div", { key: '15fd9749c64530f09854a297cbc35fe97d3398e3', class: "zonos--progress-bar-fill" }))));
+        })), h("div", { key: '3e6ac1dd03568f4bebe55449742c98fee8dca57f', class: "zonos--tab-progress" }, h("div", { key: '5590853db6942aedf74542ebd76b2696df8aa99f', class: "zonos--progress-bar-fill" }))));
     }
     static get is() { return "zonos-checkout-progress-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-collapse/zonos-collapse.js

@@ -42,10 +42,10 @@ export class ZonosCollapse {
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (h(Host, { key: 'c268257dcef8e8def5e34bf5b3ea432136c06d6a', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: '7cc2167ab3dab1a975d141f3c58d3c5982c1645a', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: 'ea4abe6a03ffed6f4fd1248e668d123c1a8cef77' }, h("iframe", { key: 'dc010404892272fece7a913149e75171bb6e786c', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'c9dc7dd83363211d249ee417111f3a36057f0af0' }))));
+            } }, h("div", { key: '1b791702f95066643ac82402a9fcff19b0fcc706' }, h("iframe", { key: '08f678a4ce92f5600c584e329e3039bc4588ff3a', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '83119f9ba9764c46fa7d1dd7b4c0b08c49033607' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-confirm-dialog/zonos-confirm-dialog.js

@@ -82,12 +82,12 @@ export class ZonosConfirmDialog {
         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: '4e762dd84a3a04a61e855cdb8dc019d1138b5b64', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
+        return (h(Host, { key: 'ca8b99331f1241efe183dec928bd98cf5768e2e8', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '0fab667a9f930b1418a8c920e5766e03f3c01858', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '914885bd702f46c207c74eb32581eacf2f3817cd', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: 'dcdc0d3896153b47afbe38abc5fd4c491b8aea92', class: "zonos--confirm-dialog", onBlur: () => {
+            } }, h("div", { key: '5f4e7750eeb7d86c229d0eb3880b642cf1f891f0', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '962772361ce8d2c888db656d7c691cfcc2443040', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '4935ea105fdfdea6c525449c4a460686347a6939', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, h("div", { key: 'acf0d24f523eb255de78e76390295ce8ff9562b8', class: "wrapper" }, h("div", { key: '10d665c1f9724c0c22c898d35af1c73ea089ee0e', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '9dd6b11b1dce47f53f39f89a2e337fc8f59aeb9c', class: "content" }, h("div", { key: '959227525b723a7d5083d8ede947772b90c6fd4b', class: "title" }, h("zonos-text", { key: '1f33ee07f6e480692911120a6fc8d071897c9d14', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: 'e8b142d67e72c4eb8613ebfe8961e51a1ea8c0c8', class: "subtitle" }, h("zonos-text", { key: 'a263e3da97c750c3271bf9f5b70515e298f2215f', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '5e8c54999ab9012372dd8510d14e2f1858543e26', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: 'd35774f8d45f9184634bb4a4aa204a35e35a3e54', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '3f98eff1184c61d163a1f9484e69ea0fca02bc1c', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, h("div", { key: '0483bd8c2c9adba0ed521c04ab0ccfd806002a51', class: "wrapper" }, h("div", { key: 'dccd091571b48c2df046a86f4982496012951f08', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: 'f6a0177b886aae16754a262326261d1a87f75dce', class: "content" }, h("div", { key: 'dc44e700a8d826d521fea7be527806faef1b1432', class: "title" }, h("zonos-text", { key: 'd42d21532cdcc276a1d1257fc6427d646003bd5d', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '2bba84f332fce9b2a9702d9c6753e41a0120ead9', class: "subtitle" }, h("zonos-text", { key: '6840ddd1b655cf9b9fc974ada6864b9cea74f943', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '3ff328db3a04418d6a1e0cb34af2ab894d4910f9', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: '7a05213b60700ee83b135309bc615168fae75a40', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '0fac5efc64f803d4f321ad269093119a7ffb3f20', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
     }
     static get is() { return "zonos-confirm-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-country-select/zonos-country-select.js

@@ -35,9 +35,9 @@ export class ZonosCountrySelect {
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: '36b388d67c25bfe93dee6a7fd3c444ce0764c832', class: "zonos--elements", style: {
+        return (h(Host, { key: '58c3b982087e7f62fa914028bfe874273e9e3fde', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '80c2a2b8a38f5183c583a240b4702fe234df58e9', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'fee57e283cc49f7b1d48cb6564003d77a75f02a6', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '030338d8bc4f52c0bf4fbcdef1415321f59de05b', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '855653189b575ad697b9b90cb733ef912e7f2b83', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '353bf39d18d2aad7c2f4096592c6e13572bc5a16', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: '62a5b6611c4ace9413f34a91aa33c60344cb9d51', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'd2133152d1e61b4cd1dfcc42fd67f44cd2585443', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '3fd084f5165387dc1ce567db6579599cbf420916', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '176630bf445f1bb7af90fe7cec5091ea9e615e1f', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '50942a4c1a980bbac701e15060ed49dc9af64f73', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     static get is() { return "zonos-country-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js

@@ -8,9 +8,9 @@ export class ZonosCustomMessage {
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: 'a0c9c81f42cc74f53f497ea37d9f1fcfe2853c25', class: "zonos--elements", style: {
+        return (h(Host, { key: '37b59a5aad442e9c20b8ed03672c73c315b45538', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: '334b1d76339667cd873d966b069429b9a2c08249', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: 'c3a72d8c248acc2ac36b45d5afe0c69428eb1a75', class: "zonos--flex-message" }, h("zonos-icon", { key: 'c8ca45558e2dc0e389a0fb99943b81dfd0328f3e', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: '9a1ce78aba237d325a0b3d1c61b62ca4f3b89c18', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: '5de7e44deb7c0544789a9d2b306fc8b2cad338b8', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: 'c911e94eb1d7cbaf1db2126d14a6eeed8932ff97', class: "zonos--flex-message" }, h("zonos-icon", { key: '35c7f483046b78e9dffe87370d6b2f9435bc0ec1', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'fdbc136b2a01fd5df35a3b01aa82bb9d088083e0', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-dialog/zonos-dialog.js

@@ -59,7 +59,7 @@ export class ZonosDialog {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'fe812c0c5a81b0b09ad6e0b554d036711e12c0ed', class: classes([
+        return (h(Host, { key: '9478fd5dd572bc1a677146025485b74321700fba', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -71,10 +71,10 @@ export class ZonosDialog {
                 '--height': this.height || 'initial',
                 '--min-height': this.minHeight || '500px',
                 '--width': this.width,
-            } }, h("div", { key: 'aaa10008c2eecf00efc29124448d2cbc8567f440', class: "zonos--backdrop" }), h("div", { key: 'b45a8f56ed413a7cb935d84b342d2ac50812ba6b', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '80d2312742cfa766e171f1e3d79aba9df26bcba5', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'f35bfdd001b0687d683b7d416c812035bd1bcb10', class: "zonos--loading" }, h("zonos-spinner", { key: 'df7e9af43340ce3e1ca66126c0d68a6950cad9e7', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '8248f4104881ee8c3d3202b1bbc07f7b969d86f5', class: "zonos--header" }, this.headerText && (h("h3", { key: '88620497b42f82f122b8e1c675490e566da27af6', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '9b17424799dbb772b51a87f246285642ec621f0b', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: '904ba64d8c82826baffed469f5b09ef7189c4aff', class: classes([
+            } }, h("div", { key: '4bc8f62202bbae238d07536f3234bdc00c6d689f', class: "zonos--backdrop" }), h("div", { key: 'da80cf2a9b0a19e4e42062a57fed91ecfe6c0bcf', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '7bbaacf6fbb5ff70db62246254f007006146324e', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'c65e9205d105456072b4c3c7549dce937dd7f8ec', class: "zonos--loading" }, h("zonos-spinner", { key: 'ac3667841a42f0ae55831a449c07bdfadc976971', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '9e2c9ec2c4a9be64169f2f6b6473bc16516fbff1', class: "zonos--header" }, this.headerText && (h("h3", { key: '0b2086b13d7cfc14901527afbb087c40eb76895d', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '2d2b55e65e965071f6422665eaa8be7991450a93', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: 'aedb5b3b307a5a04f9b806c927679d0e0c0de711', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '24f85c3c84100217db0866a10d6f3443b64c39d2' })), h("slot", { key: 'aabf202487d080a8277aeb641b602cf507a39061', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '5f55d5771bc62a54865ee3bf8a25f571bfd7fbd1' })), h("slot", { key: '95053c3ebf850f1f9796163122f9224f4190d1c9', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-input/zonos-input.js

@@ -17,17 +17,17 @@ export class ZonosInput {
         this.inputChange.emit(newValue);
     }
     render() {
-        return (h(Host, { key: 'f2bf9e34ef694f026eceed1327603659bbd4c5a4', class: classes([
+        return (h(Host, { key: 'f4b7ad75b2aebce3bc05a482fe20fee290a3a4e7', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--border-radius': getBorderRadius(),
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '0fe9066fc683f6a683c494209fa29b10c0076dc5', class: classes([
+            } }, h("div", { key: '356e16c11c1cd9edf137f69978ebaa3eb2c28d4e', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: 'f185418ddc6a83e829a9d2dd44a021288f00d4d5', class: classes([
+            ]) }, h("input", { key: '71659072bd58942efebb88be65ced18ad29be8ab', class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.inputValue && 'has-content',
@@ -35,7 +35,7 @@ export class ZonosInput {
             ]), disabled: this.isDisabled, onInput: e => {
                 const input = e.target;
                 this.inputChange.emit(input.value);
-            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '3d4ab801e27af15d819b17db226f0d5f719ac903', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: 'b84c60836fc969c23aedc314c67337e8e87f2ab6', class: "zonos--floated-label", "data-label": this.inputLabel }))));
     }
     static get is() { return "zonos-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-language-select/zonos-language-select.js

@@ -16,9 +16,9 @@ export class ZonosLanguageSelect {
     }
     render() {
         const { selectedLocale } = localizationStore;
-        return (h(Host, { key: '34580123b768ce983c0c9c6fa309bdb1d6756a5a', class: "zonos--elements", style: {
+        return (h(Host, { key: '6682af3d631bac1a8d3783418c30364ff7694792', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '6e86352a45b5d9ad0e5ed5dac330367a49a6c6fe', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'd5b55cbb2858a2c0a6aa6ce0ea0d50eecc7360e8', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'c9aeb075428357c4cb15d9a2b09df7c8d6b01b11', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, h("div", { key: '9f7e60bc5c4e9d1c0cc31afcbbaec444a7da630e', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'f790ef85eeb0bed05773d98793437ab4d6e64c8d', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '7385a1134b21ae4b39947483ee643da021e6c54c', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
     static get is() { return "zonos-language-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-link/zonos-link.js

@@ -7,7 +7,7 @@ export class ZonosLink {
         this.linkTitle = undefined;
     }
     render() {
-        return (h(Host, { key: 'a148ed9b4d285cd39b63da348dcfcc11f4973f04', class: "zonos--elements" }, h("a", { key: '121b299148c4227c0b500ecb6ded03470476aa90', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: 'cf6637f399d3c069bd6ea3d0f3a900fd0740afc5' }))));
+        return (h(Host, { key: 'bba0da02c0dee468bd0cacd268f339f7ec4f1008', class: "zonos--elements" }, h("a", { key: '19515197e397b2b24237e77d3e89de75382c14e1', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '63d597a3091e954c9302e461030646b38ee2396e' }))));
     }
     static get is() { return "zonos-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-logo/zonos-logo.js

@@ -10,11 +10,11 @@ export class ZonosLogo {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (h(Host, { key: 'c790c72d413c586a873c5046a1aee797c1f0af36', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: '08ef20244bc204125a7a308efed42cd7fc86c885', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: '68efd2097a0d8488308de0b50bef30cc67deb6fa', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '9202f0619fa3874a19ca3050477719b19592d82a', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get is() { return "zonos-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-notification/zonos-notification.css

@@ -37,7 +37,7 @@
 }
 :host .zonos--notification-items {
   position: fixed;
-  z-index: 9999999;
+  z-index: 9999999999;
   bottom: 24px;
   gap: 8px;
   display: inline-flex;

package/dist/collection/components/common/zonos-rest-state/zonos-rest-state.js

@@ -14,11 +14,11 @@ export class ZonosRestState {
     }
     render() {
         const imageUrl = this.getImageRestState();
-        return (h(Host, { key: '1bfff1095ec5c517b04106972431ac2e7f6355d9', class: classes(['zonos--elements zonos--restState']), style: {
+        return (h(Host, { key: 'c6b1e581578da852f6ff852c0c8ff48eba97c82b', class: classes(['zonos--elements zonos--restState']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'e4c9b3b63f73c8c9ed04e196369a888fdbece30a', class: "zonos--restState-image" }, h("img", { key: 'e7444fae5141035f415ae0255ce5ff1446910fa4', alt: this.restStateType, onError: () => {
+            } }, h("div", { key: '3c9bb31ade1e3343901fbb22bef5a123b3332a77', class: "zonos--restState-image" }, h("img", { key: '00417c062265b35f8603d90520f5efe677b76b19', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), h("div", { key: '2f1d1ac03dcf47d7fd7bc7014a8c4af0486d3a80', class: "content" }, h("zonos-text", { key: 'bf9fe66af7349c07c6fba5dd4e749a808b051fcc', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '2b9fc699b05557487ad8534f34857febb0defda8', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: 'fe7c44da5367b5b52abbbee2631a955544f41042', class: "action" }, h("slot", { key: '395e78af0e2dff6f0a98e7ac005509c3abb965fd' }))));
+            }, src: imageUrl })), h("div", { key: '503346f06d25e04a1bc1bbfb770359817854cd64', class: "content" }, h("zonos-text", { key: 'eb580484efd22fd93530d43d04889569ced27fba', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '34972cd05b26b01b1e7877a80b79d6729b63b025', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '703bfa3740b94e7d742804cd073347ba5f6a8855', class: "action" }, h("slot", { key: 'd0b330b60ad98bda20d35cc6802412d24ab6c536' }))));
     }
     static get is() { return "zonos-rest-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-select-dialog-header/zonos-select-dialog-header.js

@@ -8,9 +8,9 @@ export class ZonosSelectDialogHeader {
         this.label = '';
     }
     render() {
-        return (h(Host, { key: 'aee08db0e889bd5a5b9084180f6ee038c120a3b2', class: "zonos--elements", style: {
+        return (h(Host, { key: '21cd3c3e35baf172ecad7f47a76810e8f39bdeff', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '565a273f0037418387c0868c74943c3325ab6c35', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '0d994f27c948e49c092d016a0f1d6e453f80f00a', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'ee7bb796e921b2a14fa6201c8f17d0dfd9f3a3c2', type: "boldLabel" }, this.label), h("zonos-button", { key: '0e3a6c9c2cc4b67a51015b2fb7345c47a0e5ef23', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: 'ad9fb089fa4a571a5443431c0d686b4804d25b0a' }))));
+            } }, h("zonos-v-stack", { key: '0470633326b6fca9b45a8be67e0d77819561f634', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '8713cbf368658af22bb88825d32175117d47c95b', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '2f94e9f6139570398897ca55934c5244df7f82e8', type: "boldLabel" }, this.label), h("zonos-button", { key: 'c247dabcc8f487a4cc5a814fb1aa4d9a68fa4ba3', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '26727e634ec09a3b9e3912ada3b920a87a1ba4d0' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }