@zonos/elements 1.3.40 → 1.3.42

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

@@ -0,0 +1,177 @@
+import { h, Host } from "@stencil/core";
+/**
+ * The idea is from
+ * @ref https://github.com/beenotung/stencil-virtual-scroll/blob/master/src/components/virtual-scroll-list/virtual-scroll-list.scss
+ * @ref https://github.dev/ionic-team/ionic-framework/blob/v6.7.5/core/src/components/virtual-scroll/virtual-scroll.tsx
+ */
+export class ZonosVirtualScroll {
+    constructor() {
+        this.scrollListener = (_ev) => {
+            this.scrollTop = this.ele.scrollTop;
+        };
+        this.container = undefined;
+        this.renderItem = undefined;
+        this.itemWidth = undefined;
+        this.fallbackItemHeight = undefined;
+        this.itemHeights = undefined;
+        this.scrollTop = 0;
+        this.totalHeight = 1;
+    }
+    updateTotalHeight() {
+        this.totalHeight = this.itemHeights.reduce((acc, height) => acc + (height || this.fallbackItemHeight), 0);
+    }
+    connectedCallback() {
+        this.ele.addEventListener('scroll', this.scrollListener);
+        this.updateTotalHeight();
+    }
+    disconnectedCallback() {
+        this.ele.removeEventListener('scroll', this.scrollListener);
+    }
+    render() {
+        const W = this.ele.clientWidth;
+        const H = this.ele.clientHeight;
+        const heights = this.itemHeights;
+        const fallbackItemHeight = this.fallbackItemHeight;
+        const N = this.itemHeights.length;
+        const scrollTop = this.scrollTop;
+        const children = [];
+        let accHeight = 0;
+        // buffer for pre-rendering for item outside of viewport
+        const buffer = 100;
+        for (let i = 0; i < N; i++) {
+            const itemHeight = heights[i] || fallbackItemHeight;
+            if (scrollTop > accHeight + itemHeight + buffer) {
+                accHeight += itemHeight;
+                continue; // this item is above the viewport
+            }
+            if (scrollTop + H < accHeight - buffer) {
+                break; // this item is below the viewport
+            }
+            const x = 0;
+            const y = accHeight;
+            children.push(h("div", { class: "item", style: {
+                    height: `${itemHeight}px`,
+                    transform: `translate(${x}px,${y}px)`,
+                    width: this.itemWidth ? `${this.itemWidth}px` : `${W}px`,
+                } }, this.renderItem(i)));
+            accHeight += itemHeight;
+        }
+        return (h(Host, { key: '6faa73cacfefee42781f87e6f697980941139d12' }, h("div", { key: '5411c13934b8b997f68bc6678e6e1c475d6d453c',
+            // to capture scroll action
+            class: "scroller", style: {
+                height: `${this.totalHeight}px`,
+                width: `${W}px`,
+            } }), h("div", { key: '46c402a5a0df3242b9022e16b15d5e348210bc32',
+            // to display items
+            class: "item-container", ref: el => (this.container = el), style: {
+                height: `${this.totalHeight}px`,
+                left: `${-W}px`,
+            } }, children)));
+    }
+    static get is() { return "zonos-virtual-scroll"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-virtual-scroll.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-virtual-scroll.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "renderItem": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(\n    itemIndex: number,\n  ) =>\n    | HTMLElement\n    | Promise<HTMLElement>\n    | HTMLElement[]\n    | Promise<HTMLElement[]>\n    | Promise<HTMLElement>[]",
+                    "resolved": "(itemIndex: number) => HTMLElement | HTMLElement[] | Promise<HTMLElement> | Promise<HTMLElement[]> | Promise<HTMLElement>[]",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        },
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render item"
+                }
+            },
+            "itemWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of each item"
+                },
+                "attribute": "item-width",
+                "reflect": false
+            },
+            "fallbackItemHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height that is used as a fallback if height is not provided"
+                },
+                "attribute": "fallback-item-height",
+                "reflect": false
+            },
+            "itemHeights": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heights list of each item"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "container": {},
+            "scrollTop": {},
+            "totalHeight": {}
+        };
+    }
+    static get elementRef() { return "ele"; }
+    static get watchers() {
+        return [{
+                "propName": "itemHeights",
+                "methodName": "updateTotalHeight"
+            }, {
+                "propName": "fallbackItemHeight",
+                "methodName": "updateTotalHeight"
+            }];
+    }
+}

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: '23fbe02ded67e42f94b5c3641aae55970cef052d' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'ece01ba1df61d0c15e60d2cf9fffbf4c01268612' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

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

@@ -447,12 +447,17 @@ export class ZonosHello {
         return {
             "getCountryList": {
                 "complexType": {
-                    "signature": "() => Promise<import(\"/home/runner/work/zonos-elements/zonos-elements/src/types/ICountryJson\").ICountryJson | null>",
+                    "signature": "() => Promise<ICountryJson | null>",
                     "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "ICountryJson": {
+                            "location": "import",
+                            "path": "src/types/ICountryJson",
+                            "id": "src/types/ICountryJson.ts::ICountryJson"
                         }
                     },
                     "return": "Promise<ICountryJson | null>"

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: '49ed5ba840bd0d1e813b8eb4b89d0508930928a2', class: "zonos--elements" }, h("div", { key: 'ae66c6a3e8c824189b4eae2208c873943f8687ca', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: 'a9b52a67a2db1967fe6fde4f19dc8d2785469f8a', class: "zonos--elements" }, h("div", { key: '1b36f45f0f00fe2b6494fb04373b12b4848b9484', class: "zonos--hello-dialog-footer", style: {
                 '--primary-color': primaryColor,
-            } }, h("a", { key: '61226c77fe20c817efd58e12c5d5c16dad6375ac', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '7dc60e603c7f64fc42359632190249caf0a18317', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: 'a6875d4c4dcf5804570d47409567f87728b8c8b5', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '51083ce07a51f62469afce508c79a7ebbf4eeacf', 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: '46b826f2fc8f819507db9d432da459124b65cee8', 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: '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)))));
     }
     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

@@ -198,18 +198,18 @@ export class ZonosHelloDialog {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '7fa136af625bb72bb9f14ba4f3ff3aa70a95074b', class: "zonos--elements" }, h("div", { key: '94839999d9a9f2ff182f50ba24ad3183c44c6a31', class: classes([
+        return (h(Host, { key: '7dec47839d142b9d3580dffda8b8eea28af9974f', class: "zonos--elements" }, h("div", { key: 'ea71e8885de2be45be5a2dcc9dbe44ef99261102', 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: '7c412fd167248e55b4b285cd77f4cfc85a6a038f' }, h("div", { key: '78d376fffe7289f3a4e144aca964e6a11da45600', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'b1c03836ef2825d4f0cf7c395aab0905008f2d5d', 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: '91249ab433e0c29ca013c8cba607693a7a6bed02', spacing: 24 }, h("zonos-country-flag", { key: 'f11acc0b2f96f3fd0e5af6f4abb34c64bd290dae', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '7322b563606ae3e6f5e0751305ef5779c99f3b36', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: 'cc6b7618a289bb0b001e2f1268b30e2ef18a6e54', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'f60575298db7743c942bfaa922baff1e93ea6774', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '28c6a3bd2b49078ee337ae1e755519de332cda5d', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '2e66e1610e534de2fd4f4f5bce29e899f6c65877' }, h("div", { key: '598ffd431b5fcab10f7a7cb3c453fd959abdd881', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '68998e9634998a6b6d244540776c2bc18fb54c27', 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: '660c8ae672b70185a046280d9e27b3fce8ad3e00', spacing: 24 }, h("zonos-country-flag", { key: '46f9733add5cf8038944e2c7c48a14f6f39f831a', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'e0571eae7cfd1a6555b16dd3ac450a8545095231', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: 'fffa08e2519973aafc2813246b7df2f9e4895a0d', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'ef78eead5a3fd2ce7ad881deb6472ca70e18032d', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: 'cd2632bb7a2655a240715601c32df6c807c283a1', 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: '3fe69193fa354dcd592957333d8ddb484a88f309', spacing: "12px" }, h("zonos-v-stack", { key: '327079d7ead3a16af25b9131e1882f97c6ebe2be', 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: 'ce8ca134e3918406bf69c0ab8dd883fd1af802c2', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '03f07b6d622b1bc0ac918e9c910e5d5d815bd886' }, h("zonos-country-select", { key: 'fcbc3374d29c7b52f5316450956671340e0dd45c', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '32e7c6391b5299fc845f7404745ee768a6f5e7bf' }, h("zonos-language-select", { key: 'b82087d23130629c339f02236d18dab598f33993', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: 'ad5f69b84e2fd80864a6772216aa28b6558f12c4', spacing: "12px" }, h("zonos-v-stack", { key: '86b8c89c17b9b1348bf56c9a6fa2be3de11cb841', 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: '2dc162a5dc40d781009379ef8276ebcd38a26494', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'a86eaaa8536432db2d4e63c3d3b4122349edeba6' }, h("zonos-country-select", { key: '2d0ec209c2500763b1656f07f8685818ee329e1e', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'd1c7f801e301635028dd2f6a478a93d72fc968f7' }, h("zonos-language-select", { key: '95e40b3c1e44d437d466fbc704c7e95ebdf8ec3c', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -186,7 +186,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '4d1ae97e6273df35aeab31462394a189c17090b6', class: "zonos--elements" });
+        return h(Host, { key: '8738fa5324977321764af1c89181550d948955a6', 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: '036a9d43da99e1c08293936d89ca5f97d5acdf10', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: 'f38290dce670024e001d8219d2d8d1e9fde1f9e2', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: 'a09fe5b66b1ac971c10529ecb6213479f2870f08', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '6ba337785b8a90965e0cba05fd62681bc92633fe', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-paypal-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/store/translationStore/strings.arabic.js

@@ -131,6 +131,9 @@ export const stringsArabic = {
     Name: {
         value: 'اسم',
     },
+    'No countries found': {
+        value: 'لم يتم العثور على دول',
+    },
     'No shipping method selected': {
         value: 'لم يتم تحديد طريقة الشحن',
     },

package/dist/collection/components/store/translationStore/strings.base.js

@@ -131,6 +131,9 @@ export const stringsBase = {
     Name: {
         value: 'Name',
     },
+    'No countries found': {
+        value: 'No countries found',
+    },
     'No shipping method selected': {
         value: 'No shipping method selected',
     },

package/dist/collection/components/store/translationStore/strings.chinese.js

@@ -131,6 +131,9 @@ export const stringsChinese = {
     Name: {
         value: '名称',
     },
+    'No countries found': {
+        value: '未找到国家',
+    },
     'No shipping method selected': {
         value: '未选择运输方式',
     },

package/dist/collection/components/store/translationStore/strings.danish.js

@@ -131,6 +131,9 @@ export const stringsDanish = {
     Name: {
         value: 'Navn',
     },
+    'No countries found': {
+        value: 'Ingen lande fundet',
+    },
     'No shipping method selected': {
         value: 'Ingen leveringsmetode valgt',
     },

package/dist/collection/components/store/translationStore/strings.dutch.js

@@ -131,6 +131,9 @@ export const stringsDutch = {
     Name: {
         value: 'Naam',
     },
+    'No countries found': {
+        value: 'Geen landen gevonden',
+    },
     'No shipping method selected': {
         value: 'Geen verzendmethode geselecteerd',
     },

package/dist/collection/components/store/translationStore/strings.french.js

@@ -131,6 +131,9 @@ export const stringsFrench = {
     Name: {
         value: 'Nom',
     },
+    'No countries found': {
+        value: 'Aucun pays trouvé',
+    },
     'No shipping method selected': {
         value: 'Aucune méthode de livraison sélectionnée',
     },

package/dist/collection/components/store/translationStore/strings.german.js

@@ -131,6 +131,9 @@ export const stringsGerman = {
     Name: {
         value: 'Name',
     },
+    'No countries found': {
+        value: 'Keine Länder gefunden',
+    },
     'No shipping method selected': {
         value: 'Keine Versandart ausgewählt',
     },

package/dist/collection/components/store/translationStore/strings.hebrew.js

@@ -131,6 +131,9 @@ export const stringsHebrew = {
     Name: {
         value: 'שם',
     },
+    'No countries found': {
+        value: 'לא נמצאו מדינות',
+    },
     'No shipping method selected': {
         value: 'לא נבחרה שיטת משלוח',
     },

package/dist/collection/components/store/translationStore/strings.indonesian.js

@@ -131,6 +131,9 @@ export const stringsIndonesian = {
     Name: {
         value: 'Nama',
     },
+    'No countries found': {
+        value: 'Tidak ada negara yang ditemukan',
+    },
     'No shipping method selected': {
         value: 'Tidak ada metode pengiriman yang dipilih',
     },

package/dist/collection/components/store/translationStore/strings.italian.js

@@ -131,6 +131,9 @@ export const stringsItalian = {
     Name: {
         value: 'Nome',
     },
+    'No countries found': {
+        value: 'Nessun paese trovato',
+    },
     'No shipping method selected': {
         value: 'Nessun metodo di spedizione selezionato',
     },

package/dist/collection/components/store/translationStore/strings.japanese.js

@@ -131,6 +131,9 @@ export const stringsJapanese = {
     Name: {
         value: '名前',
     },
+    'No countries found': {
+        value: '国が見つかりません',
+    },
     'No shipping method selected': {
         value: '配送方法が選択されていません',
     },

package/dist/collection/components/store/translationStore/strings.korean.js

@@ -131,6 +131,9 @@ export const stringsKorean = {
     Name: {
         value: '이름',
     },
+    'No countries found': {
+        value: '국가를 찾을 수 없습니다',
+    },
     'No shipping method selected': {
         value: '선택된 배송 방법이 없습니다',
     },

package/dist/collection/components/store/translationStore/strings.norwegian.js

@@ -131,6 +131,9 @@ export const stringsNorwegian = {
     Name: {
         value: 'Navn',
     },
+    'No countries found': {
+        value: 'Ingen land funnet',
+    },
     'No shipping method selected': {
         value: 'Ingen fraktmetode valgt',
     },

package/dist/collection/components/store/translationStore/strings.polish.js

@@ -131,6 +131,9 @@ export const stringsPolish = {
     Name: {
         value: 'Nazwa',
     },
+    'No countries found': {
+        value: 'Nie znaleziono krajów',
+    },
     'No shipping method selected': {
         value: 'Nie wybrano metody wysyłki',
     },

package/dist/collection/components/store/translationStore/strings.portuguese.js

@@ -131,6 +131,9 @@ export const stringsPortuguese = {
     Name: {
         value: 'Nome',
     },
+    'No countries found': {
+        value: 'Nenhum país encontrado',
+    },
     'No shipping method selected': {
         value: 'Nenhum método de envio selecionado',
     },

package/dist/collection/components/store/translationStore/strings.russian.js

@@ -131,6 +131,9 @@ export const stringsRussian = {
     Name: {
         value: 'Имя',
     },
+    'No countries found': {
+        value: 'Страны не найдены',
+    },
     'No shipping method selected': {
         value: 'Метод доставки не выбран',
     },

package/dist/collection/components/store/translationStore/strings.spanish.js

@@ -131,6 +131,9 @@ export const stringsSpanish = {
     Name: {
         value: 'Nombre',
     },
+    'No countries found': {
+        value: 'No se encontraron países',
+    },
     'No shipping method selected': {
         value: 'No se ha seleccionado un método de envío',
     },

package/dist/collection/components/store/translationStore/strings.swedish.js

@@ -131,6 +131,9 @@ export const stringsSwedish = {
     Name: {
         value: 'Namn',
     },
+    'No countries found': {
+        value: 'Inga länder hittades',
+    },
     'No shipping method selected': {
         value: 'Ingen fraktmetod vald',
     },

package/dist/collection/components/store/translationStore/strings.turkish.js

@@ -131,6 +131,9 @@ export const stringsTurkish = {
     Name: {
         value: 'Ad',
     },
+    'No countries found': {
+        value: 'Ülke bulunamadı',
+    },
     'No shipping method selected': {
         value: 'Kargo yöntemi seçilmedi',
     },

package/dist/collection/components/store/translationStore/strings.vietnamese.js

@@ -131,6 +131,9 @@ export const stringsVietnamese = {
     Name: {
         value: 'Tên',
     },
+    'No countries found': {
+        value: 'Không tìm thấy quốc gia nào',
+    },
     'No shipping method selected': {
         value: 'Chưa chọn phương thức vận chuyển',
     },

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: 'f19f690b4086d3b9446508c3af12a469b2283d25', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '3c908adcb0afd025fba6898e0fcb066e0884d696', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '42eb32ea6de83b0a24c139f8fc5849551d442174', class: "zonos--address-component" })));
+        return (h(Host, { key: '2cecb49ed22bd0d5ce22c4f2110b37ecf7935cca', class: "zonos--address zonos--elements" }, h("zonos-text", { key: '101635210ab6cb3b9a44b47eec101187d1c3a4ac', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '049f2b86986471d45bd413813307ec489d9f1993', class: "zonos--address-component" })));
     }
     static get is() { return "zonos-address"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/stripe/zonos-link-authentication/zonos-link-authentication.js

@@ -42,7 +42,7 @@ export class ZonosLinkAuthentication {
     }
     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: 'd3b232c0da0ef1f0d018398a36df06383bcdfe87', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '7b6af818ae8628b204c3ea75fc58bee864b84069', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: '068456f666b9d43595cb85c6ef51ab4f1113d268', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: 'f0b26abf99ef99c6665dabdddebc9ff086b6816c', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '898dbdffac06fe2a68af90610a22044bb72391ce', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'e2ec9abb0cf76a39a1262e1366e375dd898450cd', class: "zonos--link-authentication-component" })));
     }
     static get is() { return "zonos-link-authentication"; }
     static get encapsulation() { return "scoped"; }

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

@@ -36,7 +36,7 @@ export class ZonosPayment {
     }
     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: 'a6df9bab4826d7c4e4027bf6b7e58f176cb25ca1', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'a2f3d1288537a8e63c26bef9c87cae7f3a6f94fa', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '4e30103e4b6fa407450afc71474b663377233310', class: "zonos--payment-component" }), h("div", { key: '66a9798018fb25e86933a839014ed0d2ed16d8b3', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: 'ab601d9a0cc6fe2fee19f45d6321dcc81b418cff', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '27857c99c59e4913fa403ef5b23b5b7d7f32bd45', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '329b5a5617f0c5942b209df1ccf3bfcb4ddabb0c', class: "zonos--payment-component" }), h("div", { key: '7abb08922e9f607314713fc9fa762a3bb8a35b13', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/utils/handleFetch.js

@@ -52,12 +52,6 @@ const handleRequest = async (url, options) => {
     const usingZonosPreview = window.Zonos.zonosQaUrl;
     // We only want to alert once if the user is in preview mode and it's also using production environment
     if (!window.Zonos.modeAlerted && zonosMode && usingZonosPreview) {
-        if (zonosMode === 'production') {
-            alert(`Please be aware that you are currently operating in the production environment. Any interactions with the customer store, including payments, will be processed as real transactions!`);
-        }
-        if (zonosMode === 'test') {
-            alert(`For testing payments, you can utilize the test payment information provided at this link: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#web-test-the-integration`);
-        }
         window.Zonos.modeAlerted = true;
     }
     if (response.ok) {

package/dist/collection/components/utils/hello/currencyConversion/defaultCurrencyConverter.js

@@ -40,7 +40,10 @@ const convertCurrency = (element) => {
             });
         // default to the currencyConvertAndFormat if the currencyConverter function does not return a value, or invalid value. This is to make sure we don't break the merchant's price.
         const observedFormattedValue = customizedCurrencyFormat || currencyConvertAndFormat(amount);
-        element.textContent = observedFormattedValue;
+        if (observedFormattedValue !== element.textContent) {
+            // Only set textContent if the value has changed, this is to prevent it redrawing the element if the value is the same
+            element.textContent = observedFormattedValue;
+        }
         // save the new rate to the data-zrate attribute
         element.setAttribute('data-zrate', rate.toString());
         // save the new value to the data-zintl attribute

package/dist/collection/environment.js

@@ -21,6 +21,10 @@ const JS_DELIVR_ZONOS_URL = `https://cdn.jsdelivr.net/npm/@zonos/elements@${pack
  * @example https://unpkg.com/@zonos/elements@1.3.15/dist/scripts/zonos.js
  */
 const UNPKG_ZONOS_URL = `https://unpkg.com/@zonos/elements@${packageVersion}`;
+/**
+ * @example https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.41/dist/scripts/loadZonos.js
+ */
+const CDNJS_ZONOS_URL = `https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/${packageVersion}`;
 const currentBranch = process.env.VERCEL_GIT_COMMIT_REF || process.env.BRANCH_NAME;
 export const formattedUrl = ({ branchName, inCI: _inCI, inVercel: _inVercel, isVercelPreview: _isVercelPreview, packageVersion: _packageVersion, type = 'full', url, }) => {
     if (!url) {
@@ -121,6 +125,7 @@ else {
 const envClient = {
     NEXT_PUBLIC_FLAG_URL: z.string(),
     NEXT_PUBLIC_ZONOS_API_KEY: z.string(),
+    NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: z.string(),
     NEXT_PUBLIC_ZONOS_CDN_URL: z.string(),
     NEXT_PUBLIC_ZONOS_JS_DELIVR_CDN_URL: z.string(),
     NEXT_PUBLIC_ZONOS_PACKAGE_VERSION: z.string(),
@@ -145,6 +150,7 @@ export const env = createEnv({
     runtimeEnvStrict: {
         NEXT_PUBLIC_FLAG_URL: process.env.NEXT_PUBLIC_FLAG_URL,
         NEXT_PUBLIC_ZONOS_API_KEY: process.env.NEXT_PUBLIC_ZONOS_API_KEY,
+        NEXT_PUBLIC_ZONOS_CDNJS_CDN_URL: CDNJS_ZONOS_URL,
         /**
          * Versioning url for production environment
          * @example v1.2.3.js.zonos.com

package/dist/collection/scripts/_getNextFallbackUrl.js

@@ -1,4 +1,4 @@
-export const fallbackList = ['jsdelivr', 'unpkg', 'vercel'];
+export const fallbackList = ['jsdelivr', 'cdnjs', 'unpkg', 'vercel'];
 /**
  * Get the next cdn type in the fallback list
  * @param currentCdnType The current cdn type that want to get the next fallback url

package/dist/collection/scripts/_getZonosQaUrl.js

@@ -4,10 +4,21 @@ 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') {
+    /**
+     * This is flag to force load cdn for testing purpose
+     * When developing, if the script load is from `dev.elements.zonos.com`,
+     * it would load script from that same domain instead of loading from cdn
+     */
+    const shoudForceLoadCdn = window && window.location.href.includes('forceLoadCdn');
+    if (typeof window === 'undefined' || shoudForceLoadCdn) {
         return null;
     }
     const qaUrl = extractZonosQaUrl(window.location.href);
+    const cdnUrl = process.env.NEXT_PUBLIC_ZONOS_CDN_URL;
+    // when the qaUrl is not set and the built URL is from the test domain, use the test domain for testing
+    if (!qaUrl && cdnUrl.includes('test.')) {
+        return cdnUrl;
+    }
     // when local demo app is running, it needs to use the local dev script unless the qaUrl is set
     if (!qaUrl && window.location.hostname === 'dev.demo.elements.zonos.com') {
         return 'https://dev.elements.zonos.com';