@zonos/elements 1.3.81 → 1.3.83

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

@@ -52,28 +52,29 @@ export class ZonosCheckoutProgressTabs {
     render() {
         const selectedStep = cartStore.step;
         const labelSelectedColor = this.tabColor || zonosStore.appearance.colorSecondary;
+        const backgroundColor = this.backgroundColor || zonosStore.appearance.colorPrimary || '';
         // If the background color and the tab color are not contrat enough, increase the contrast of the label color
-        const contrastLabelColor = this.backgroundColor && labelSelectedColor
+        const contrastLabelColor = backgroundColor && labelSelectedColor
             ? getContrastColor({
-                backgroundColor: isColorVariable(this.backgroundColor)
+                backgroundColor: isColorVariable(backgroundColor)
                     ? window
                         .getComputedStyle(this.ele)
-                        .getPropertyValue(`--zonos-elements-${this.backgroundColor.replace('--zonos-elements-', '')}`)
-                    : this.backgroundColor,
+                        .getPropertyValue(`--zonos-elements-${backgroundColor.replace('--zonos-elements-', '')}`)
+                    : backgroundColor,
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (h(Host, { key: '472a2f3201149fbc99057c8c5c39f002e792c37b', class: "zonos--elements", style: {
+        return (h(Host, { key: 'f7310a3631e3a1061d8f08af0fc7337fb0a6be26', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: 'bc90b6d7e6e8d9ef943473f6599588e326992814', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            } }, h("div", { key: 'fafce1662609cf7c966d9062ef55594d43e58643', 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: '3e6ac1dd03568f4bebe55449742c98fee8dca57f', class: "zonos--tab-progress" }, h("div", { key: '5590853db6942aedf74542ebd76b2696df8aa99f', class: "zonos--progress-bar-fill" }))));
+        })), h("div", { key: '3d2a5c5289a694bf6ec8e93ba15ee4f79123d149', class: "zonos--tab-progress" }, h("div", { key: '7d6ea3e0c81cdb354ccf31748bf88d1937037c52', 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: '7cc2167ab3dab1a975d141f3c58d3c5982c1645a', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: 'ee7ff46100d39b9baaf4eec60f9ae0a170ed793e', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '1b791702f95066643ac82402a9fcff19b0fcc706' }, h("iframe", { key: '08f678a4ce92f5600c584e329e3039bc4588ff3a', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '83119f9ba9764c46fa7d1dd7b4c0b08c49033607' }))));
+            } }, h("div", { key: '8d59ba91560d35c13ce202370119c02f4af08431' }, h("iframe", { key: '4a7acd6d26f8ed38a405b03e987f3a011c52b94a', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'dca0ec42b16a23f36724b6b8f2a730999a9b1367' }))));
     }
     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: 'ca8b99331f1241efe183dec928bd98cf5768e2e8', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
+        return (h(Host, { key: '77cc26ec971a528d2f5115168c716de59440e5e3', 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: '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: () => {
+            } }, h("div", { key: '6120bd47e631be5d2300a8a996fef355f6b1b269', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '5cf784224ade84189f87059a6923ed6e31c01903', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '506707fbae72411df534b98dd9a6d1ed4b15787b', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, 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)))))));
+            } }, h("div", { key: '0926f36a825557de771abe24369e4ec4d77a1b41', class: "wrapper" }, h("div", { key: 'dc260b08ba1635a2d3bdd3533e9ea49e042db36c', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: 'abec0bf3234dc00d331bd364e28cfe47c5e0f93e', class: "content" }, h("div", { key: '58547007970d8be7b1fb5c9b4e1f3ed0d4d82420', class: "title" }, h("zonos-text", { key: '4759fe0b09f10ba8501d78a70b1e06ee55af12c0', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: 'd0144f944516b491494f0016d5ece673546ee4bf', class: "subtitle" }, h("zonos-text", { key: 'aa4b392f133c62a4f2aad40761fae713cc348c55', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'ed8bfb3286e0109c4cd3cea1635cb701d1aa5a45', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: '63a79f239cda9b934ff497d449626aa44f4c058a', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '70b1f265a31b1e8645ad1b386193b6785756bb09', 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

@@ -44,9 +44,9 @@ export class ZonosCountrySelect {
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
         const isEmpty = !filteredCountries.length;
-        return (h(Host, { key: 'd6d6a0736660d0c6e76f749f8ea78a8c95825b88', class: "zonos--elements", style: {
+        return (h(Host, { key: 'f3257748b306e07d0a644fc8d87870e9d5d462b4', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '0bc3773965c49f0ee4da2056b6acc0ae361e227a', class: "zonos--country-select" }, h("zonos-v-stack", { key: '9e00877189dc39b789861c0425702d276cdad410', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '9c098afdf6db8ef8e18dc855e19ab6d45b7db8be', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: '10c59b07a42da02fb348e289dc0211ae33b96638', autocomplete: "off", autofocus: "autofocus", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), value: this.inputValue }))), h("div", { key: 'fec8fb874726377a3c4a03ac5d264fc7d8a94a21', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: '182fb6955798519e63d63121752bc65ac6045770', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: '3ccda154b37344857595d65ce3131ca6d2610a11', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
+            } }, h("div", { key: '1704b9f79ccc13556c23f31354b7095786f21a2a', class: "zonos--country-select" }, h("zonos-v-stack", { key: '5b299d1a7dd781c3f7a09608c91941ec441018b8', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '10505e722658eee0cbb732fb4ee3fc2962b406df', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: 'e50fc2f2e33deb4d9147518867cc095e380df707', autocomplete: "off", autofocus: "autofocus", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), value: this.inputValue }))), h("div", { key: 'dba1d15adead635c53d45575d6b7bb4e10675e70', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: 'cec5fcc95a1ff33f96c219afe121a4f3f92ee713', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: '6fe6e1e53327179664c1e2643a10a37edc27e1cd', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
                 const country = filteredCountries[index];
                 if (!country) {
                     return null;

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: 'd6d31b58cf5396c136d81a5969b418c79229c930', class: "zonos--elements", style: {
+        return (h(Host, { key: 'f2542efde5b2180f518eb0f1a0be8ec2f3deb63d', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: '4c62131117e23bbe475fb6f59a5e9bba8bc7d552', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '7ec3cbde2204fe0fa3b52844109bf0379677d567', class: "zonos--flex-message" }, h("zonos-icon", { key: 'cad94039767bd3d93fe9995aee34e8eb42fb707c', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'f5bd77fafded83fefd99c45f0a78cf5c72459e47', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: '8697b4134a09c6ed259f2570d46789833039ba0f', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: 'ef707a0a88d04dd75c81eac9a27db9ac7218925a', class: "zonos--flex-message" }, h("zonos-icon", { key: 'f6e16706c1da3c01948908c24d1115d5f4ced0fa', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'd9c3c382cce91a122bf4bd0439960fa492ac03e7', 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: '03735385e07c7f6c8a87df42ad95f8c9d9533668', class: classes([
+        return (h(Host, { key: '0ba21daff1a07b91701cec30ff80c0b10a8f5344', 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: 'da5d599e1a247f7e3364e6f5c9b2eae3db9539f5', class: "zonos--backdrop" }), h("div", { key: 'cda1a996d9521c2e0b307f7a03ca3ee3d4915b8d', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '471d8a069d4f580233bdb3e9e971efdb268ef57d', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '57220007aabcaef133c2c0782fa238cc43d63964', class: "zonos--loading" }, h("zonos-spinner", { key: '0298b754341abd61ec07706128d05df5332f915d', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '5103dbc1c7593a8042505f767d8290825f9d10e7', class: "zonos--header" }, this.headerText && (h("h3", { key: 'a2d9cd4c8cb359aa64cf104a172ca960068c20a0', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'de9bf8a949344d19fcb8bfb496719282553be194', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: '1ec2cdca0f186cd0b28602580022ed0cb4b0eec9', class: classes([
+            } }, h("div", { key: '84c2c67ff9b89cf28cd7864a79e76daf9d0c5093', class: "zonos--backdrop" }), h("div", { key: 'c621463f2ca3721aacfdf666b0dd5a4749dd385a', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '61bf1362b55f4a7e515f3ab1b4fd9a0e1e1794b2', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'c84edec7ec322fc6a7eaf17ed54aeffd23dd4480', class: "zonos--loading" }, h("zonos-spinner", { key: '4f8e004e7286d053f195f9eea578dc416ff1d142', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '196316fc1ec1e099b87ea36829d334c45c3a6a24', class: "zonos--header" }, this.headerText && (h("h3", { key: '452ba8e853ffe1fc278e4cb48dbdcc407d5257e6', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '40933095b20bf1a993e142d58df10b50c0359b23', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: '69a696e723483aafa595176dace2ed8bc3274836', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '5071d921f48bf792a951a390d83b121e32771668' })), h("slot", { key: 'c1818ac301afc845f5b14fd0f2ac9a1fd3a27b99', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '53f5ea4e4bab900f4ddf720e3589862a40e3e91f' })), h("slot", { key: '1f7628b5749261e4e5ad703a78b5c9b276ad18e9', 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: '66ab3a9ec4ac4f78e448008824471cecd4775e78', class: classes([
+        return (h(Host, { key: '1ad1bc4853aa4f4c251e1ab8ac45be8d1e3e98b6', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--border-radius': getBorderRadius(),
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'cef0295dea117c8bf0b8f3dc090f7c34648b9b31', class: classes([
+            } }, h("div", { key: 'd2fe3cd5800983913523ab6fce01b19d57c94d9c', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: 'a5c9e0791292046e9520bf8d186f6dc76a23ba64', class: classes([
+            ]) }, h("input", { key: 'e0493952e9171c24164f847be23a4462572df336', 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: '25f51d372fdb0819fe316bcbfce429d63ded358f', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: 'f9733fa1eafc29354d3d6b045a05542927f3a5e1', 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: '448f89b5870956b6e9455968134b94c9409a983d', class: "zonos--elements", style: {
+        return (h(Host, { key: 'bea77d8916a999eade4d1201adbf37803b65901a', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '23841aa801d68da4b537cfaab5ea89405ec66a9f', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '5fc1b45aa0cb27c94163c2dace5ce4ad63215dfc', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '7030fb276a05eea0e7333add3219b5316495662c', 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: '7c16efd7518f5952dac402c1fc2993e110d78fef', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '52c7626a8378bd7c956a3fa9d339a263f686f80a', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '6c00ad9b3270ae435ee32600651600a0a237ff07', 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: 'a5913bea95608f1f1a95186664d2032a4aff66ec', class: "zonos--elements" }, h("a", { key: 'dffb72ba6d1820669b1dbd9e841a242cbe58d860', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '774219d208dce4b32dcc715b827b1d85fc5dfe5e' }))));
+        return (h(Host, { key: '86fc4a9a03329f66e7f635669ca95d1372a62446', class: "zonos--elements" }, h("a", { key: 'ff257fcff1ffcc7e7c659969df96e551afb7146c', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: 'f5906c958642d7e5f4e7bb913febf778995a7dc6' }))));
     }
     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: '8737fef033ef8114ca67be72b2f598897a6929b3', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: 'f20974d5ff501108c4a52d01773ab20219c8d389', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: 'd5a15f2f8f891f865c7eb46268ae2f113ad1d3b4', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: 'd7acc90de67c51594abd44903c9fcb0b3e10a8bc', 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-rest-state/zonos-rest-state.js

@@ -14,11 +14,11 @@ export class ZonosRestState {
     }
     render() {
         const imageUrl = this.getImageRestState();
-        return (h(Host, { key: 'a87be11591bfc71ad5133ceeea1f6b396cd98055', class: classes(['zonos--elements zonos--restState']), style: {
+        return (h(Host, { key: '662eee60347a898a6dd94e7ca7d580932dfff7d7', class: classes(['zonos--elements zonos--restState']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'c317f01e0ac745e6ef91df1247b98c72aa340ce8', class: "zonos--restState-image" }, h("img", { key: '34947c09f8bcb76b21a547d8f5e0aa88d957a760', alt: this.restStateType, onError: () => {
+            } }, h("div", { key: '92674dbfb60e16c68d24abc0809bfe0fad515739', class: "zonos--restState-image" }, h("img", { key: 'cafbc678396b0a1e0d6dc4781d5b43c3ea687c4b', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), h("div", { key: '6e5ea4207cafd572ad947e10526d20c38b24764f', class: "content" }, h("zonos-text", { key: '2dcb142426419451a0543ef2a110d7e8c713879f', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '440fe0d032979b56316cc9dc58c67d2c62795f3a', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '2c9d2542bee1dc37202204529d8dd09b9c0592fa', class: "action" }, h("slot", { key: 'a50f0d183dd80a5c8509c8d3b839e342c661a33f' }))));
+            }, src: imageUrl })), h("div", { key: 'e05d28dd121469f81ecc962ac7d9f28b8b0764f7', class: "content" }, h("zonos-text", { key: 'b1c0d1cb51eca4357240d97f773a8359323a6024', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '4cdf80c1578fa29364fddf506c9c58e264d7fb34', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '6ed981023268438ee9ca5e3a330649d13b897156', class: "action" }, h("slot", { key: 'bfa3fa672372bfff4b3e270964431aa25dd53f25' }))));
     }
     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: '8ac4e1bcd64f6a2073e1161fec76c9b117345ada', class: "zonos--elements", style: {
+        return (h(Host, { key: 'a1b2433a81210b6a0a78be3cb027f885cd870d2c', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: 'fe4a184a8bed7aceb4c3f8d341fed50380587c77', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '2176069a11ba20c7408ef898044f2ba68eea4a80', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '45b9d890484881a15c4fa7a7e4028f9887cc942e', type: "boldLabel" }, this.label), h("zonos-button", { key: '65f0d9ea7b6dee35d23aa6fca19fd686190b667f', 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: '758fce95d668ad755745687d3fcf1a6a307061bc' }))));
+            } }, h("zonos-v-stack", { key: 'a9e61575c6c6c34c6097dd937dea7c199130f7f0', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '266b89174f64825bec793bd30d44c1f75f220b1f', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '7fd1f62f22610a2601497e897e98d5f5e0437601', type: "boldLabel" }, this.label), h("zonos-button", { key: 'afa95565fae19d97e038885f5244ee292f960a69', 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: 'c28af84460321290623f17120ef1583aaf898105' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.js

@@ -7,7 +7,6 @@ export class ZonosShippingRichRadio {
     constructor() {
         this.handleRichRadioSelect = (item) => {
             var _a;
-            this.selectedItem = item;
             (_a = this.radioSelected) === null || _a === void 0 ? void 0 : _a.emit(item);
         };
         this.getRadioItemStyleVariables = () => {
@@ -26,20 +25,11 @@ export class ZonosShippingRichRadio {
         this.borderColor = undefined;
         this.borderStyle = undefined;
         this.theme = undefined;
-        this.initialSelectedValue = undefined;
         this.selectedItem = null;
     }
-    componentWillLoad() {
-        // Set initial selected item
-        if (this.initialSelectedValue) {
-            this.selectedItem =
-                this.items.find(item => item.value === this.initialSelectedValue) ||
-                    null;
-        }
-    }
     render() {
         var _a;
-        return (h(Host, { key: '83ee4ddc5ad32514ca98457812207964cf452217', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+        return (h(Host, { key: '74cb16ff6cfde65b626ef902c456b967af649f6d', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             var _a;
             const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
             return (h("div", { "aria-hidden": "true", class: classes([
@@ -152,30 +142,33 @@ export class ZonosShippingRichRadio {
                 "attribute": "theme",
                 "reflect": false
             },
-            "initialSelectedValue": {
-                "type": "any",
+            "selectedItem": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | number",
-                    "resolved": "number | string | undefined",
-                    "references": {}
+                    "original": "ShippingRichRadioItem | null",
+                    "resolved": "null | { amount: number; caption?: string | undefined; label: string; landedCostId: string; method: IncotermCode; price: string; shipmentRatingId: string; sublabel?: string | undefined; value: string | number; }",
+                    "references": {
+                        "ShippingRichRadioItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx",
+                            "id": "src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx::ShippingRichRadioItem"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Initial selected value"
+                    "tags": [{
+                            "name": "default",
+                            "text": "{null|firstItem}"
+                        }],
+                    "text": "Selected item"
                 },
-                "attribute": "initial-selected-value",
-                "reflect": false
+                "defaultValue": "null"
             }
         };
     }
-    static get states() {
-        return {
-            "selectedItem": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "radioSelected",
@@ -189,7 +182,7 @@ export class ZonosShippingRichRadio {
                 },
                 "complexType": {
                     "original": "ShippingRichRadioItem",
-                    "resolved": "{ amount: number; caption?: string | undefined; label: string; landedCostId: string; price: string; shipmentRatingId: string; sublabel?: string | undefined; value: string | number; }",
+                    "resolved": "{ amount: number; caption?: string | undefined; label: string; landedCostId: string; method: IncotermCode; price: string; shipmentRatingId: string; sublabel?: string | undefined; value: string | number; }",
                     "references": {
                         "ShippingRichRadioItem": {
                             "location": "local",

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

@@ -7,10 +7,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: '24f3b1f73cc320540ab3700213004c267ea04658', class: "zonos--elements" }, h("div", { key: '7f52acf90cb5b9f1fd5efdc4fedc4d61a893a646', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '1871529e8b75c44a71bf1f5bc9e60b81bbc598d2' }), h("div", { key: 'c0b9c9c1b3fef5f766d2bad4c5bea48f3d6bbb6f', class: classes([
+        return (h(Host, { key: '091516a0a68f8b4ab2580a8118900c34b39e931c', class: "zonos--elements" }, h("div", { key: '77769b18201f87d601d5bdb860a4bc8c84bb4e90', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '139c1de415b94e12b8d575e3662cba9faf56cb2f' }), h("div", { key: '60c38adf74e9b776001844c2205ac87a4562b525', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '3b106cb439877dffa101f15fb01aff980a64c7cb', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'c0005051e6e1b614b7739718e1a262f6043d56f5', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: 'bb87c44ee7831c24b47c43b17d2b04c79112e900', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '5d114d284a15a1661e926bfe5fae9251513c7370', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get is() { return "zonos-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js

@@ -7,9 +7,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: 'e542ff8bbefa3223f157ad4bd6e537af8e5d5a5d', style: {
+        return (h(Host, { key: 'fca41f57f80879bf7cb32fa7858777a26a36755d', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '9bd1cc8fdf94265d7d2767d507af7ad21d77234d', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'c8a294410e4c1348405c53283cf4dba176d5b27b' }))));
+            } }, h("div", { key: '8b608328327817a540c56dca58ad32ebe622d48e', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'c29eeb4c2d0f781bdca44d355d2da75e15576d86' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-virtual-scroll/zonos-virtual-scroll.js

@@ -56,12 +56,12 @@ export class ZonosVirtualScroll {
                 } }, this.renderItem(i)));
             accHeight += itemHeight;
         }
-        return (h(Host, { key: '6faa73cacfefee42781f87e6f697980941139d12' }, h("div", { key: '5411c13934b8b997f68bc6678e6e1c475d6d453c',
+        return (h(Host, { key: '1aa49d98976b0856f960a6fc67ee7d04e1dd5317' }, h("div", { key: 'ede653037499e0b925e1cab13a632f8a6da6b9f4',
             // to capture scroll action
             class: "scroller", style: {
                 height: `${this.totalHeight}px`,
                 width: `${W}px`,
-            } }), h("div", { key: '46c402a5a0df3242b9022e16b15d5e348210bc32',
+            } }), h("div", { key: 'da2fb9c529a96b9f31c3604235e3a6913a145743',
             // to display items
             class: "item-container", ref: el => (this.container = el), style: {
                 height: `${this.totalHeight}px`,

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -10,7 +10,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: 'ece01ba1df61d0c15e60d2cf9fffbf4c01268612' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '4781e3197d34a39d600c1eebc8ed97e801791c81' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.js

@@ -18,9 +18,9 @@ export class ZonosHelloDialogFooter {
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
         // Only use gray-0 (white) when the background color is dark (apply inverted color if the element is using dark theme variable)
         const mainColor = primaryColor && isDarkColor(primaryColor) ? 'white' : 'black';
-        return (h(Host, { key: 'a9b52a67a2db1967fe6fde4f19dc8d2785469f8a', class: "zonos--elements" }, h("div", { key: '1b36f45f0f00fe2b6494fb04373b12b4848b9484', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: '3ec3d830c3818a9f3661eefe7da50520919e7800', class: "zonos--elements" }, h("div", { key: 'c67564b69ce94116285cf28b9c4d8158f1d732cc', class: "zonos--hello-dialog-footer", style: {
                 '--primary-color': primaryColor,
-            } }, h("a", { key: '7ca110d30f9266d021069af41766588ffce3d2ad', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'f9f4866c18bc75577e5a3961ffdd67f48977fd68', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '2bacafbd2c2d9c79935b7a2c69ae9fd3e1ede48a', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'a223f6706d319da505e8f013bff6863a433effd3', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'aa94f1e06b80f6bec8433c3c8a7b066f0d91df08', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: 'fcb17ee52dc72b107a0c43c27103bc6ebd400ee1', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'f73ba904c41c936d020d5c61d087deaedf9d4708', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '6b3909844a290b1a76a0f77d2371ba1aba72a536', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'd1cc73adf8c92a97b656b6054613caa71d742afa', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'f9497df1d84e9c18ac02b614c43449f9ffd311ed', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     static get is() { return "zonos-hello-dialog-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -232,18 +232,18 @@ export class ZonosHelloDialog {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: 'df052224c778ebfceeef7c827fa3da0e8a2f3dc9', class: "zonos--elements" }, h("div", { key: '0ecff6a07d24a72fb4f200cce82ab09e40b48baf', class: classes([
+        return (h(Host, { key: '7ff123654399aee05fd295c108e01d924a8964e5', class: "zonos--elements" }, h("div", { key: '316720cc18d1b9fbbf86cbfcde1f25106b1197e8', class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: 'b2939d49930c8a34288a884582eb849a492080ff' }, h("div", { key: 'f1a22291d7865d57d37cbcd3c8f70c4aea57ed39', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'ee3794826efc9fed856f0a320cf6428a428b4ea4', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '3d2ff0b68268c97e385eb3cf7fcc34454d2ed3b5', spacing: 24 }, h("zonos-country-flag", { key: 'e09645ac583e59354d11b3c194d4d3f6d4780c55', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '42017a698c1678b90c8c7bbece5d623d0800e37b', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: 'ac30b7683dcc65773159832eadad8542d1d1bda8', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '58cc0e8c51774c339b0fc735e4e98917ed614c8a', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '0b3a3b2bf981ed72654506cc31f07edf6268b0a4', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '29a0018c2c8eb7fdde938e432ea783517d364ea8' }, h("div", { key: 'a882452996503ddb4feb3e431eaf9cc14dc2ff34', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '2c656e792daa59c0ce5770d71a779de270a8adc8', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '1dd3473645c5581fee41da086a478b6eb6f3104e', spacing: 24 }, h("zonos-country-flag", { key: '57bdcb6b5e2044b65868a53e91220b7eea5c389e', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '8f01898edbd5c30771a2c8d12e0919f6b41cc96c', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '75728fcc40efe82ff58e767b3c3c9f60f96f37b2', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'b82ebf2adacbb72637064b04957846ee79f10bd5', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '7a0ae96961883e1a55248d4163da3bed2e76d077', spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-        }), h("zonos-card", { key: '196a593b167fc979bf0a2bef7f266ad3778f6ca0', spacing: "12px" }, h("zonos-v-stack", { key: '94925c753ddfdd1a659580f7f78f8d6626cdcdaa', spacing: 12 }, hasInclusivePrices ? (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), h("zonos-text", null, inclusivePriceMessage))) : (h(Fragment, null, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '540006185ce1d28d610052801dcf9281773c5504', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '886c371fdfa8c9c15188ef9d6cbb637162fb0d27' }, h("zonos-country-select", { key: '1365bee67831b64637e5c481f239c557f2649694', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '44929f0c23627970b1706f6e8c76e51022201379' }, h("zonos-language-select", { key: '86b9f68c84da77f9e1af51dcb7d512eb6b289a27', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: 'd6a1f8270f3b6c69febc04224e6a0fa7ada5e07a', spacing: "12px" }, h("zonos-v-stack", { key: '209eac48b847c3ac4c7e8eb9df35c95416d89536', spacing: 12 }, hasInclusivePrices ? (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), h("zonos-text", null, inclusivePriceMessage))) : (h(Fragment, null, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", null, dutyDeMinimisMessage)), h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", null, taxDeMinimisMessage)))), additionalInformation === null || additionalInformation === void 0 ? void 0 :
+            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: 'e9444ec1c3c3616712faeba92734b4275d373da1', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'a612e3daa6de5e5f73422ed8ebed8b3a682c3c46' }, h("zonos-country-select", { key: 'b45c18d7feaf95e74da6e0540ea28325a24d287b', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'e50779d3c0e3c83587ae445e9ded8e108f893e31' }, h("zonos-language-select", { key: 'b502cef6095a0e9a57b3c81fa354ca3614060878', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -204,7 +204,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: 'c168f24dcc30dffd48c604f8888b093a7a3f1525', class: "zonos--elements" });
+        return h(Host, { key: '133cc684aab52bfe4be6c4a318b1769928acc7a8', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/paypal/zonos-paypal-payment.js

@@ -41,7 +41,7 @@ export class ZonosPaypalPayment {
         void this.loadPaypal();
     }
     render() {
-        return (h(Host, { key: 'a09fe5b66b1ac971c10529ecb6213479f2870f08', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '6ba337785b8a90965e0cba05fd62681bc92633fe', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: '6bfc962de500edbb105b7eb899711e48def78167', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '92d1b1c416f5e233c54e50d47129be375ef0a68b', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-paypal-payment"; }
     static get encapsulation() { return "scoped"; }