@zonos/elements 1.3.18-alpha.2 → 1.3.18-alpha.4

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: 'c68ba6ef2bcb35c94ecf2b11379be748aa998198', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '6abf1f29bb6368710b45414baca9643421de2643', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '7f200effb42296a21829c292101ef3300b041327', class: classes([
+            } }, h("div", { key: 'fb0b246a59f0350313673d4430ac4f2bcd9d6b80', 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: '4358e95cb29ec6a82e32213b268612aadf8772c6' }, h("slot", { key: 'ab76831e3691a896179e06896d33ed771e4bbdf9' })))));
+            ]) }, this.icon, h("zonos-text", { key: '2d6024af48ce0e082d3a1332794978cfd42793d6' }, h("slot", { key: '9cb7e771b0a949b912c6fa5946018cbf072ed018' })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -84,12 +84,12 @@ export class ZonosButton {
         const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
             ? 'white'
             : 'black';
-        return (h(Host, { key: '6e361b1a80fd43a72a99a8201ca5d7cb86404656', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '00d085d600a759366f4a2de8617d81831c0ce16b', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': contrastColor,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'fd4335b2d9bfe74b509f1355fa620dc4c53f58c6', class: classes([
+            }) }, h("button", { key: 'b79ffdb0212630598e95f07059bb3b41049cff47', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -103,7 +103,7 @@ export class ZonosButton {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { key: '7b37a1d30604de0d9e1f5d07bf6034724dcd8875', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'e4e3cbda9ae02c2ac9a7c17767bda93076ea67ad', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'e9b7287f2c4d9143f04103fe43d3f4dfd669341e', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { key: '4462430185736b45b11bd18f08d1e3c6177f192f', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'c866ff989b95929e8d6a44d950dc943531f1dc0c', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'a57d0b3924eef51bf3938261c8d823e9d8aa0206', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,12 +12,12 @@ export class ZonosCard {
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { key: '206169280db67be5e74382c5beccfad87ec9068a', style: {
+        return (h(Host, { key: '0e52ca31db6c2f956da1910d6e0a222b588c1bcc', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '4a1c7eab9b5420295ce3ec30cfd59985be35d912', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { key: '75454e5d9eacdfdf842a9a220deab467625e497b', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: 'bc9c7d3500cef41237dbe53f27ab398103be55dd', type: "subheader" }, this.label), h("h-stack", { key: '29d68a483bfc61ddfb9deeb63272a8221759513c', spacing: 8 }, this.actions))), h("slot", { key: '0ad416c6cdb0b1fc2c922b8569cf35a4009263cc' }), (this.footerActions || this.footerContent) && (h("footer", { key: '469110ce0f0f81cbee4ef67e79d3be17933bcf2e', class: "card-footer", style: {
+            } }, 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: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: '9044d9f3c81935119f668deb188f16cb1cb243bb' }, this.footerContent), h("h-stack", { key: '3f258ed6b07b8973b0bf753c7ab6427d67bf210c', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: '2bd0c86b75096c2ee786d4a9b16a3d6e385fbbf1' }, this.footerContent), h("h-stack", { key: '7a3f840ac9678a905338a99b8327115bc8199789', spacing: 8 }, this.footerActions))))));
     }
     static get is() { return "zonos-card"; }
     static get encapsulation() { return "shadow"; }

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: 'be29586ffd5ae5227614622cfb402686ff5e0583', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: '8a1adb8ba23d34a7730e5b5a81bc6b5ada58cb83', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: '091c2388668a94962d7b2bde4496856805f675e8', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'c0f66d11f63591b03631cb1c970c0db201d435e2', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: 'e954bcef9e021bfbb98031f030542a89d8faf0f3', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '17788f6c205a139dde1b42cc91579d0975233e77', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: 'ab6c4847d006a812829bd8e871520455da91c7b0', class: "checkmark-container" }, h("svg", { key: '617693bef302910db463cdf95b10700b72ea8d44', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '410728b7d5edf27966e660e598f166ce8292015e', "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: '1b9a21e7ef15ad34684453bc25cb3744ba183cd0', size: this.fontSize }, this.label)))));
+            }, 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)))));
     }
     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: '5079903c5c31395bc5c92a4542d1f7ae78dc34b2', class: "zonos--elements", style: {
+        return (h(Host, { key: '1c51be111b22f45ad33d430dc4d0a250f8e4d911', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: 'fabfe8836c827910907c4bceb6f99d65492b440b', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            } }, h("div", { key: '01e24d42123318aa23982e742b5f2053f5b5392d', 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: 'cfb1c57fadb793f5db34d02e48f3fe4c3a93a043', class: "zonos--tab-progress" }, h("div", { key: 'd02dd1cc3a5e5b7bc8395038e1cd75cb07104072', class: "zonos--progress-bar-fill" }))));
+        })), h("div", { key: '55832cb123f7efa019ccddfe6bd82938d9f02206', class: "zonos--tab-progress" }, h("div", { key: '15fd9749c64530f09854a297cbc35fe97d3398e3', 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: '514e75d41d29d70b4ca60230288ae183200b1e12', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: 'c268257dcef8e8def5e34bf5b3ea432136c06d6a', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '068aee1d13bde4c83ea8582b34844da7452c907c' }, h("iframe", { key: 'b22fd8ad898a098c244cb817dc6951854505efca', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'b54783376005085e379c7b8d43218ead1bf8e8ac' }))));
+            } }, h("div", { key: 'ea4abe6a03ffed6f4fd1248e668d123c1a8cef77' }, h("iframe", { key: 'dc010404892272fece7a913149e75171bb6e786c', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'c9dc7dd83363211d249ee417111f3a36057f0af0' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,12 +81,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: '9adab1c77e8087cfbb92a52e66d12f1b1917bf7e', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-theme": theme, style: {
+        return (h(Host, { key: 'e52030ffc052c699daa87c5b62ee8b44ddad7f7f', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-theme": theme, style: {
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'c5b40120ff7b3c4684eb65fb5ef6f8ffa157f98f', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: 'c7cf4d2839cb42a064b4303bdefdfe4fed116b2a', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '30256495401f4967371e923055dfe9efed8cb6b7', class: "zonos--confirm-dialog", onBlur: () => {
+            } }, h("div", { key: 'a34d31946f198b2593f142b582aec18f69fe74c5', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '2f3dfa27dfbfbc4080eb710dd3db530521b63d36', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '8f61424a8899c81f9510deda0adc3ff3e2da102b', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, h("div", { key: '6121ab29b80d233f9ca47aaf66725fe91ae6827c', class: "wrapper" }, h("div", { key: '8fbb75eca3ee163b57c60159d5c5374382f3fa33', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '56376add713778af1df087c0f9f4b8d90065caa2', class: "content" }, h("div", { key: '4f31ad7d42127c5350a64b86ae12fde42a350422', class: "title" }, h("zonos-text", { key: '7a5dc82d3f2250c1b3a3403e116736cedcf63f51', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '87b04af2b1984a8cf205b6fa0acf0320f56342e7', class: "subtitle" }, h("zonos-text", { key: '53d0157655b1d8193a0f698e41442b676d9e0ca6', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '4b410f4a4079a25549bef228c3b9a81a64fe20e2', class: "footer" }, h("zonos-button", { key: '5a8ffb99756bd142605c564df381bfb9e72d5d78', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText), h("zonos-button", { key: '61c2b8272202f316ec09441ab64428c557073c9d', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, h("div", { key: '2fca3f071d7f9d2af628d909770bb12a3acabfe2', class: "wrapper" }, h("div", { key: 'fed312e492a9fcac175a9cac7501255aeb975c10', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '131651e201a8d6b2ee9e0c82bd1990bc9a8dc702', class: "content" }, h("div", { key: 'a42e1a9271bdfb9fba133e9af330bdb8b16be230', class: "title" }, h("zonos-text", { key: '91461b9e572e3eb0e6e8616612cce56cf723678f', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: 'fde989f7ef37692173c1476b5cfd98f6cc71bb6e', class: "subtitle" }, h("zonos-text", { key: '2e273099ff036b1aa62bba923fff696d1d291867', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '3b7f50adf490388feb759f2e09a626ece5f29c20', class: "footer" }, h("zonos-button", { key: '9686f10d831470273543cf3b5217a8e59bb5160a', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText), h("zonos-button", { key: '3781a86d62efe11e8dc08886e3b4ad885c64776a', 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: '67675ff9b37f110026ced223509104eb8ad805c0', class: "zonos--elements", style: {
+        return (h(Host, { key: '36b388d67c25bfe93dee6a7fd3c444ce0764c832', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '83d69dde89f0fafadf344ca0be017f43c468f154', class: "zonos--country-select" }, h("zonos-v-stack", { key: '8262345817217ba3f27ecf433ff56712b8018ae7', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '80ef94a9a2b1d7bdd835a9b31b09663f28b0532a', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: 'd3151d1287ee98b697e35f1f755694b250f089a3', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'f98ff12368e49125f7fc2409f84bcbaef2143809', 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: '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 })))))))));
     }
     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: '7d3c45852c97272a3606321dad09c6433dfc664c', class: "zonos--elements", style: {
+        return (h(Host, { key: 'a0c9c81f42cc74f53f497ea37d9f1fcfe2853c25', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: '53b64b2faea9d06fd66365f80efe3b9d26aab5b6', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '2bfc437f100084a1e661bf823e20be72a0ab616d', class: "zonos--flex-message" }, h("zonos-icon", { key: '5c0f5da248ddb25a69a3db46b85e8e0e4d481101', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'aabbcc00b1b50d29a3e6f48938b50c7b64d250dc', innerHTML: messageWithLinks }))))));
+            } }, 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 }))))));
     }
     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: 'b27bdee33f67e2209dfbd9621b95633f4af726b2', class: classes([
+        return (h(Host, { key: 'fe812c0c5a81b0b09ad6e0b554d036711e12c0ed', 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: 'ca94e3347d10460973663685d9b8c0048418cb86', class: "zonos--backdrop" }), h("div", { key: 'e766937dc1899141ed7beb07e9f13a60066880a1', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '41c43bb5cf011a3a810c6116c4300ad7a713c787', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '5ca28c9f3b1f6f0742484ef5414ba60f16e1faa7', class: "zonos--loading" }, h("zonos-spinner", { key: 'e0131cd9fd3fa7a9c502e7a55b75b8c76be86fc3', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '2ef2237cb4518980eb3a5c97cc1a1ea2c87444be', class: "zonos--header" }, this.headerText && (h("h3", { key: '751e1be4417cc733dffa8a683d3f4c8774ee83f5', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '720f9250c88e0097d839276ab0d2319e31fc170b', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: 'd64547b7d802a4b14e64454ae329dbb6d88f1cfd', class: classes([
+            } }, 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([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '96d1683414cc4a947a36c6ae28e5afb781be4dae' })), h("slot", { key: '06b8ff1ad17f74e28fc4980fbc4594dde5e4573f', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '24f85c3c84100217db0866a10d6f3443b64c39d2' })), h("slot", { key: 'aabf202487d080a8277aeb641b602cf507a39061', 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: 'c032eae81e9183b73ed9f12ca3397786e499d8a7', class: classes([
+        return (h(Host, { key: 'f2bf9e34ef694f026eceed1327603659bbd4c5a4', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--border-radius': getBorderRadius(),
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '54177758c126bf8d4043cc5e3dd92f0aa6e2c838', class: classes([
+            } }, h("div", { key: '0fe9066fc683f6a683c494209fa29b10c0076dc5', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: '10f853e84c278aa9d9a050548801ea366583836d', class: classes([
+            ]) }, h("input", { key: 'f185418ddc6a83e829a9d2dd44a021288f00d4d5', 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: '0f9a9fcb308f4117ec0f08a07d4de8d6f5c4fb03', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '3d4ab801e27af15d819b17db226f0d5f719ac903', 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: 'e719b6e5e5d52ec572525ba02c78989bfe6c6b91', class: "zonos--elements", style: {
+        return (h(Host, { key: '34580123b768ce983c0c9c6fa309bdb1d6756a5a', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '5a2d7fe751fe92455f7e56bf02360ef9992baffb', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'b37d91ffc91949aac8dda2d2ec94acbdfadfcdf4', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '881a00e8bd3e4358a5c1784bd957a81917863134', 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: '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 })))))))));
     }
     static get is() { return "zonos-language-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/{component-template/zonos-link → zonos-link}/zonos-link.js

@@ -7,7 +7,7 @@ export class ZonosLink {
         this.linkTitle = undefined;
     }
     render() {
-        return (h(Host, { key: '595aa56bf6c9503434d265b62a85a5fcbf0e7bec', class: "zonos--elements" }, h("a", { key: '3e355af783529c0fa77ff2c351476c92ec128ec3', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '45607e8fa7448a96f6914270baaeab2f0d03944e' }))));
+        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' }))));
     }
     static get is() { return "zonos-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/main/zonos-controller.js

@@ -65,7 +65,29 @@ export class ZonosController {
         log(`[FONT] ${overrideFont} font override applied`);
         zonosStore.appearance = Object.assign(Object.assign({}, zonosStore.appearance), { fontFamily: overrideFont });
     }
+    handleLocationChange() {
+        // re-inject hello component if the location changes
+        void initHello(zonosStore.helloSettings);
+    }
+    /**
+     * Init history listener to know when the location changes to re-inject hello component
+     */
+    initHistoryListener() {
+        const oldPushState = history.pushState;
+        history.pushState = function pushState() {
+            window.dispatchEvent(new window.Event('pushstate'));
+            window.dispatchEvent(new window.Event('locationchange'));
+            return oldPushState.apply(this, arguments);
+        };
+        const oldReplaceState = history.replaceState;
+        history.replaceState = function replaceState() {
+            window.dispatchEvent(new window.Event('replacestate'));
+            window.dispatchEvent(new window.Event('locationchange'));
+            return oldReplaceState.apply(this, arguments);
+        };
+    }
     async componentWillLoad() {
+        this.initHistoryListener();
         zonosStore.zonosApiKey = this.zonosApiKey;
         // running with scope async function to avoid blocking the main thread
         (async () => {
@@ -77,9 +99,13 @@ export class ZonosController {
             }
             // init zonos notification
             this.initZonosNotification();
+            const config = Object.assign(Object.assign({}, this.config), {
+                // override subscription status
+                subscriptionStatus: undefined
+            });
             // load default setting if fail to load user setting
             zonosStoreInitSetting({
-                overrideSettings: this.config,
+                overrideSettings: config,
                 zonosSettings: json,
             });
             // setup google font after store loaded
@@ -152,7 +178,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '129317aa410d96319846670a1aaae29490993b19', class: "zonos--elements" });
+        return h(Host, { key: '5085618e4664aa12a2d48d289ae5b2c3ac15d83b', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }
@@ -177,8 +203,8 @@ export class ZonosController {
                     "references": {
                         "LoadZonosParamsConfig": {
                             "location": "import",
-                            "path": "src/scripts/zonosBase",
-                            "id": "src/scripts/zonosBase.ts::LoadZonosParamsConfig"
+                            "path": "src/scripts/_zonosBase",
+                            "id": "src/scripts/_zonosBase.ts::LoadZonosParamsConfig"
                         }
                     }
                 },
@@ -316,8 +342,8 @@ export class ZonosController {
                         },
                         "LoadZonosParamsConfig": {
                             "location": "import",
-                            "path": "src/scripts/zonosBase",
-                            "id": "src/scripts/zonosBase.ts::LoadZonosParamsConfig"
+                            "path": "src/scripts/_zonosBase",
+                            "id": "src/scripts/_zonosBase.ts::LoadZonosParamsConfig"
                         }
                     },
                     "return": "Promise<void>"
@@ -401,4 +427,13 @@ export class ZonosController {
             }
         };
     }
+    static get listeners() {
+        return [{
+                "name": "locationchange",
+                "method": "handleLocationChange",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/stripe/zonos-address/zonos-address.js

@@ -135,7 +135,7 @@ export class ZonosAddress {
     }
     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: '77cf6085adb67da95283000b857a9252215c71cd', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '30aff37f04ef04ce4c062d52c78286b362469894', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '599e73e5d3f88cba12a7fc72abc3e575eb3eb777', class: "zonos--address-component" })));
+        return (h(Host, { key: '9ef595622320579d43ac54bdfdf0e8a24ab5132b', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '82925c3c426f384a266cfe62c2899d1ec30d0920', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'bb3b99783a75434a5a7cc6856ccf9218f1cfd212', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }
@@ -189,10 +189,10 @@ export class ZonosAddress {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "StripeContactOption | null",
+                    "original": "ContactOption | null",
                     "resolved": "ContactOption | null",
                     "references": {
-                        "StripeContactOption": {
+                        "ContactOption": {
                             "location": "import",
                             "path": "@stripe/stripe-js",
                             "id": ""

package/dist/collection/components/utils/hello/setZCountryUrlParam.js

@@ -5,5 +5,9 @@ export const setZCountryUrlParam = (selectedCountryCode) => {
     const urlSearchParams = new URLSearchParams(window.location.search);
     urlSearchParams.set('zCountry', selectedCountryCode);
     const newUrl = `${window.location.pathname}?${urlSearchParams.toString()}`;
-    window.history.replaceState({}, '', newUrl);
+    /**
+     * 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, newUrl);
 };

package/dist/collection/environment.js

@@ -181,12 +181,10 @@ export const getReplaceEnv = (props) => Object.keys(env).reduce((prev, curr) =>
     const foundOverride = !!override && currEnv in override;
     // return the override value if it's found
     if (foundOverride) {
-        // @ts-expect-error
         prev[`process.env.${currEnv}`] = `"${override[currEnv]}"`;
         return prev;
     }
     if (currEnv) {
-        // @ts-expect-error
         prev[`process.env.${currEnv}`] = `"${env[currEnv] || ''}"`;
     }
     return prev;

package/dist/collection/index.js

@@ -1 +1,2 @@
+export { Zonos } from './scripts';
 export * from './types';

package/dist/collection/scripts/_extractZonosQaUrl.js

@@ -0,0 +1,26 @@
+/**
+ * Extracts the zonosQaUrl from the url
+ *
+ * @param url - url to extract zonosQaUrl from
+ *
+ * **NOTE**: value of zonosQaUrl param should be without protocol, allowed characters are: a-z, A-Z, 0-9, -, _
+ * @example
+ * valid: https://www.zonos.com/?zonosQaUrl=some-feature-v988
+ * invalid: https://www.zonos.com/?zonosQaUrl=https://zonos-something
+ */
+export const extractZonosQaUrl = (url) => {
+    if (!url) {
+        return null;
+    }
+    // get params from url
+    const param = new URL(url).searchParams;
+    const zonosQaUrl = param.get('zonosQaUrl');
+    if (!zonosQaUrl) {
+        return null;
+    }
+    const hasInvalidCharacters = /[^a-zA-Z0-9-_]+/.test(zonosQaUrl);
+    if (!!hasInvalidCharacters) {
+        return null;
+    }
+    return zonosQaUrl;
+};

package/dist/collection/scripts/_getZonosQaUrl.js

@@ -0,0 +1,44 @@
+import { log } from "../components/utils/logging/log";
+import { extractZonosQaUrl } from "./_extractZonosQaUrl";
+/**
+ * Get the Zonos QA URL and return it. Will remove `zonosQaUrl` from the url query if it doesn't exists.
+ */
+export const getZonosQaUrl = () => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    const qaUrl = extractZonosQaUrl(window.location.href);
+    if (!qaUrl) {
+        return null;
+    }
+    // If the qaUrl, use the dev-elements domain to forward the request to the dev server to quickly debug the issue
+    if (qaUrl === 'dev-elements') {
+        return 'https://dev.elements.zonos.com';
+    }
+    const suffixDomain = 'preview.js.zonos.com';
+    const fullUrl = `https://${qaUrl}.${suffixDomain}`;
+    log(`[ZONOS-WARNING] using '${fullUrl}' for loading script`, 'warn');
+    // request to the url and check if the request has an error
+    void fetch(fullUrl)
+        .then(() => {
+        // cleanup checkout session to avoid using the prod session in preview domain
+        window.sessionStorage.removeItem('zonos--checkout-session-id');
+        window.sessionStorage.removeItem('zonos--client-secret');
+    })
+        .catch(() => {
+        alert(`[ZONOS-WARNING] '${fullUrl}' IS NO LONGER AVAILABLE. REMOVING zonosQaUrl PARAM AND RELOADING THE PAGE`);
+        // remove the zonosQaUrl param from url
+        const urlSearchParams = new URLSearchParams(window.location.search);
+        urlSearchParams.delete('zonosQaUrl');
+        const { pathname } = window.location;
+        const newUrl = `${pathname}?${urlSearchParams.toString()}`;
+        /**
+         * 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, '', newUrl);
+        window.location.reload();
+        return null;
+    });
+    return fullUrl;
+};

package/dist/collection/scripts/{loadStripe.js → _loadStripe.js}

@@ -1,5 +1,5 @@
 // Execute our own script injection after a tick to give users time to do their
-import { initStripe, zonosStripeLoadScript, } from "./stripe";
+import { initStripe, zonosStripeLoadScript, } from "./_stripe";
 // own script injection.
 const stripePromise = Promise.resolve().then(() => zonosStripeLoadScript(null));
 let loadCalled = false;

package/dist/collection/scripts/{zonosBase.js → _zonosBase.js}

@@ -1,12 +1,16 @@
 var _a;
 import { log } from "../components/utils/logging/log";
 import { logError } from "../components/utils/logging/logError";
-import { checkIfLoadVersionDomain } from "./checkIfLoadVersionDomain";
-import { zonosLoadStripe } from "./loadStripe";
+import { checkIfLoadVersionDomain } from "./_checkIfLoadVersionDomain";
+import { getZonosQaUrl } from "./_getZonosQaUrl";
+import { zonosLoadStripe } from "./_loadStripe";
 /**
  * Get the load version and url based on the loadScriptSrc, if the domain that used to load `zonos.js` is in white listed domains, use currentLoadScriptUrl as the load url instead, if zonosQaUrl exists, it would also fall under the white listed domain
  */
 const zonosLoadUrl = (() => {
+    if (typeof document === 'undefined') {
+        return null;
+    }
     const scriptExist = document.querySelector(`script[src*="/zonos.js"]`);
     const { currentLoadScriptUrl, isWhiteListed } = checkIfLoadVersionDomain({
         loadScriptSrc: scriptExist === null || scriptExist === void 0 ? void 0 : scriptExist.src,
@@ -26,9 +30,15 @@ export class Zonos {
 _a = Zonos;
 Zonos.doneInit = false;
 // if query 'zonosDebug=1' param from url, debug mode is on
-Zonos.debug = !!window.location.search.match(/\?.*(&*)zonosDebug=1/);
-Zonos.zonosConversionTest = !!window.location.search.match(/\?.*(&*)zonosConversionTest/);
+Zonos.debug = typeof window !== 'undefined' &&
+    !!window.location.search.match(/\?.*(&*)zonosDebug=1/);
+Zonos.zonosConversionTest = typeof window !== 'undefined' &&
+    !!window.location.search.match(/\?.*(&*)zonosConversionTest/);
 Zonos.isBigCommerce = false;
+/**
+ * By default, the package will load from npm
+ */
+Zonos.isNpm = true;
 Zonos.internationalHideSelector = '';
 Zonos.zonosQaUrl = null;
 Zonos.version = `v${process.env.NEXT_PUBLIC_ZONOS_PACKAGE_VERSION}`;
@@ -265,20 +275,33 @@ Zonos.injectScript = ({ fallBackDomain, isModule, scriptDomain, theRestUrl, }) =
     };
     headOrBody.appendChild(script);
 };
+/**
+ * We now support loading Zonos via npm. For clients using npm, `zonosBase` will always load from the server side. Therefore, the `zonosLoadUrl` defined earlier won't work since it lacks access to client-side APIs such as `window` and `document`.
+ */
+Zonos.getZonosUrl = () => {
+    // To ensure that sites using zonos-elements load the script from a specific domain when using npm, we need to check for zonosQaUrl and use it if available. Otherwise it will always load from the compiled versioned domain
+    if (_a.isNpm) {
+        const zonosQaUrl = getZonosQaUrl();
+        // Default to hard coded domain if zonosQaUrl is not available
+        return zonosQaUrl || ZONOS_URL;
+    }
+    return ZONOS_URL;
+};
 Zonos.injectZonosCdn = () => {
+    const ZONOS_LOAD_URL = _a.getZonosUrl();
     // init zonos elements when the zonosKey is valid
     // inject esmodule cdn for zonos elements
     _a.injectScript({
         fallBackDomain: JS_DELIVR_ZONOS_URL,
         isModule: true,
-        scriptDomain: ZONOS_URL,
+        scriptDomain: ZONOS_LOAD_URL,
         theRestUrl: 'dist/zonos-elements/zonos-elements.esm.js',
     });
     // inject non module cdn for zonos elements
     _a.injectScript({
         fallBackDomain: JS_DELIVR_ZONOS_URL,
         isModule: false,
-        scriptDomain: ZONOS_URL,
+        scriptDomain: ZONOS_LOAD_URL,
         theRestUrl: 'dist/zonos-elements/zonos-elements.js',
     });
     log('Zonos cdn script injected!');

package/dist/collection/scripts/index.js

@@ -0,0 +1,2 @@
+import { Zonos } from "./_zonosBase";
+export { Zonos };

package/dist/collection/types/generated/graphql.customer.types.js

@@ -1257,6 +1257,7 @@ export const invoiceCarrier = {
     Apc: 'APC',
     Asendia: 'ASENDIA',
     BoxC: 'BOX_C',
+    BroadReach: 'BROAD_REACH',
     Dhl: 'DHL',
     DhlEcom: 'DHL_ECOM',
     Epost: 'EPOST',

package/dist/collection/types/generated/graphql.frontend.types.js

@@ -43,6 +43,7 @@ export const featureAudienceNameEnum = {
     I18nSales: 'i18n_sales',
     ItHead: 'it_head',
     NewCheckoutMerchant: 'new_checkout_merchant',
+    NewPayoutReportMerchant: 'new_payout_report_merchant',
     Onboarding: 'onboarding',
     PrincipalEngineer: 'principal_engineer',
     ProServeHead: 'pro_serve_head',