@zonos/elements 1.3.39 → 1.3.41

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: 'f4b7ad75b2aebce3bc05a482fe20fee290a3a4e7', class: classes([
+        return (h(Host, { key: '66ab3a9ec4ac4f78e448008824471cecd4775e78', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--border-radius': getBorderRadius(),
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '356e16c11c1cd9edf137f69978ebaa3eb2c28d4e', class: classes([
+            } }, h("div", { key: 'cef0295dea117c8bf0b8f3dc090f7c34648b9b31', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: '71659072bd58942efebb88be65ced18ad29be8ab', class: classes([
+            ]) }, h("input", { key: 'a5c9e0791292046e9520bf8d186f6dc76a23ba64', 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: 'b84c60836fc969c23aedc314c67337e8e87f2ab6', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '25f51d372fdb0819fe316bcbfce429d63ded358f', 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: '6682af3d631bac1a8d3783418c30364ff7694792', class: "zonos--elements", style: {
+        return (h(Host, { key: '448f89b5870956b6e9455968134b94c9409a983d', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '9f7e60bc5c4e9d1c0cc31afcbbaec444a7da630e', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'f790ef85eeb0bed05773d98793437ab4d6e64c8d', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '7385a1134b21ae4b39947483ee643da021e6c54c', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, 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 })))))))));
     }
     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: 'bba0da02c0dee468bd0cacd268f339f7ec4f1008', class: "zonos--elements" }, h("a", { key: '19515197e397b2b24237e77d3e89de75382c14e1', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '63d597a3091e954c9302e461030646b38ee2396e' }))));
+        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' }))));
     }
     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: '08ef20244bc204125a7a308efed42cd7fc86c885', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: '8737fef033ef8114ca67be72b2f598897a6929b3', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: '9202f0619fa3874a19ca3050477719b19592d82a', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: 'd5a15f2f8f891f865c7eb46268ae2f113ad1d3b4', 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: 'c6b1e581578da852f6ff852c0c8ff48eba97c82b', class: classes(['zonos--elements zonos--restState']), style: {
+        return (h(Host, { key: 'a87be11591bfc71ad5133ceeea1f6b396cd98055', class: classes(['zonos--elements zonos--restState']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '3c9bb31ade1e3343901fbb22bef5a123b3332a77', class: "zonos--restState-image" }, h("img", { key: '00417c062265b35f8603d90520f5efe677b76b19', alt: this.restStateType, onError: () => {
+            } }, h("div", { key: 'c317f01e0ac745e6ef91df1247b98c72aa340ce8', class: "zonos--restState-image" }, h("img", { key: '34947c09f8bcb76b21a547d8f5e0aa88d957a760', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), h("div", { key: '503346f06d25e04a1bc1bbfb770359817854cd64', class: "content" }, h("zonos-text", { key: 'eb580484efd22fd93530d43d04889569ced27fba', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '34972cd05b26b01b1e7877a80b79d6729b63b025', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '703bfa3740b94e7d742804cd073347ba5f6a8855', class: "action" }, h("slot", { key: 'd0b330b60ad98bda20d35cc6802412d24ab6c536' }))));
+            }, 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' }))));
     }
     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: '21cd3c3e35baf172ecad7f47a76810e8f39bdeff', class: "zonos--elements", style: {
+        return (h(Host, { key: '8ac4e1bcd64f6a2073e1161fec76c9b117345ada', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '0470633326b6fca9b45a8be67e0d77819561f634', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '8713cbf368658af22bb88825d32175117d47c95b', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '2f94e9f6139570398897ca55934c5244df7f82e8', type: "boldLabel" }, this.label), h("zonos-button", { key: 'c247dabcc8f487a4cc5a814fb1aa4d9a68fa4ba3', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '26727e634ec09a3b9e3912ada3b920a87a1ba4d0' }))));
+            } }, 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' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

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: 'a38f8d5dec27abcfc73f341b9451ac29c71f3e1a', class: "zonos--elements" }, h("div", { key: 'dc2d9d599437e79d61ea6a7c4dc1cbba6ab03748', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: 'a0e10b6ea75346cee1b5a42f0c35f9a86ba4f1ee' }), h("div", { key: 'bed28d732fe207e56f03ba50ea835c562c5d08cb', class: classes([
+        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([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '920ef6419d1dedd71e46be23e9a19dc1042925ce', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '259961488d833d3728819f6ba93ea6579b0f3f9d', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, 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)))));
     }
     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: '8cdee94089af0eac57784a7914e169f363472577', style: {
+        return (h(Host, { key: 'e542ff8bbefa3223f157ad4bd6e537af8e5d5a5d', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'd60da826d77b4cf7e5349b75927fc746f0053ddd', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '97b0e8232cbac73938225e1310712c1607997073' }))));
+            } }, h("div", { key: '9bd1cc8fdf94265d7d2767d507af7ad21d77234d', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'c8a294410e4c1348405c53283cf4dba176d5b27b' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,46 @@
+:host {
+  font-family: var(--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  overflow: scroll;
+}
+:host .scroller {
+  display: inline-block;
+}
+:host .item-container {
+  position: relative;
+  display: inline-block;
+}
+:host .item-container .item {
+  position: absolute;
+}

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-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

@@ -93,22 +93,22 @@ export class ZonosController {
         // running with scope async function to avoid blocking the main thread
         (async () => {
             var _a, _b;
-            const { errors, json } = await getZonosSettings();
+            const { errors, json, zonosMode } = await getZonosSettings();
             if (((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type.toString()) === '403') {
                 log('Failed to load zonos settings. This domain may not have access', 'warn');
                 return;
             }
             // init zonos notification
             this.initZonosNotification();
-            const config = Object.assign(Object.assign({}, this.config), {
-                // override subscription status
-                subscriptionStatus: undefined
-            });
+            // override subscription status
+            const config = Object.assign(Object.assign({}, this.config), { checkoutSettings: this.config.checkoutSettings
+                    ? Object.assign(Object.assign({}, this.config.checkoutSettings), { subscriptionStatus: undefined }) : undefined });
             // load default setting if fail to load user setting
             zonosStoreInitSetting({
                 overrideSettings: config,
                 zonosSettings: json,
             });
+            zonosStore.zonosMode = zonosMode;
             // setup google font after store loaded
             void this.setupGoogleFont();
             if (zonosStore.helloSettings) {
@@ -136,7 +136,6 @@ export class ZonosController {
             this.stripeInitEvent.emit({
                 publishableKey: publishableKey.token,
             });
-            log('zonos controller loaded');
         })();
     }
     /**
@@ -187,7 +186,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '209a2ea0249b9561b5ca1f84f7d31b1520ef49fe', class: "zonos--elements" });
+        return h(Host, { key: '8738fa5324977321764af1c89181550d948955a6', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }
@@ -245,6 +244,21 @@ export class ZonosController {
     }
     static get events() {
         return [{
+                "method": "paypalInitEvent",
+                "name": "paypalInitEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted to initialize paypal"
+                },
+                "complexType": {
+                    "original": "{ paypalClientId: string }",
+                    "resolved": "{ paypalClientId: string; }",
+                    "references": {}
+                }
+            }, {
                 "method": "stripeInitEvent",
                 "name": "stripeInitEvent",
                 "bubbles": true,
@@ -279,7 +293,7 @@ export class ZonosController {
                         "Stripe": {
                             "location": "import",
                             "path": "@stripe/stripe-js",
-                            "id": ""
+                            "id": "node_modules::Stripe"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -0,0 +1,37 @@
+:host {
+  font-family: var(--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: inline-flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { h, Host, } from "@stencil/core";
+import { paypalStoreInitButtons } from "../store/checkout/paypal";
+import { log } from "../utils/logging/log";
+/**
+ * This component is a wrapper for the paypal authentication element that would render default style object
+ */
+export class ZonosPaypalPayment {
+    async loadPaypal() {
+        if (!window.Zonos.paypal) {
+            log('Paypal is not available');
+            return;
+        }
+        // Init paypal store buttons
+        const paypalButtons = paypalStoreInitButtons({
+            onPaypalFail: () => {
+                log('onPaypalFail');
+                this.paypalSessionFail.emit();
+            },
+            onPaypalSessionDone: ({ orderId }) => {
+                log('onPaypalSessionDone', 'info', { orderId });
+                this.paypalSessionDone.emit({ orderId });
+            },
+        });
+        if (!(paypalButtons === null || paypalButtons === void 0 ? void 0 : paypalButtons.length)) {
+            log('There are no paypal buttons available');
+            return;
+        }
+        const container = this.el.querySelector('.zonos--payment-paypal-container');
+        if (!container) {
+            log('Cannot find container element for paypal buttons');
+            return;
+        }
+        // render paypal buttons
+        paypalButtons.forEach(async (paypalButton) => {
+            await paypalButton.render(container);
+        });
+    }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        void this.loadPaypal();
+    }
+    render() {
+        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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-paypal-payment.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-paypal-payment.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "paypalSessionDone",
+                "name": "paypalSessionDone",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the paypal session is done"
+                },
+                "complexType": {
+                    "original": "{ orderId: string }",
+                    "resolved": "{ orderId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "paypalSessionFail",
+                "name": "paypalSessionFail",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the paypal session is failed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}