@zonos/elements 1.3.7-alpha.0 → 1.3.7-alpha.1

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

@@ -0,0 +1,97 @@
+import { h, Host } from "@stencil/core";
+export class ZonosLink {
+    constructor() {
+        this.href = '';
+        this.rel = undefined;
+        this.target = undefined;
+        this.linkTitle = undefined;
+    }
+    render() {
+        return (h(Host, { key: '99bf9ff46cf84f424739b76d3da8a8c770c0a88f', class: "zonos--elements" }, h("a", { key: 'bd3553a33f27b4815a7b0573a34862093242b456', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: 'ad80829c1ca5cd9b0e2dd62542025eeecf436196' }))));
+    }
+    static get is() { return "zonos-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The href for the link"
+                },
+                "attribute": "href",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The rel attribute for the link"
+                },
+                "attribute": "rel",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The target attribute for the link"
+                },
+                "attribute": "target",
+                "reflect": false
+            },
+            "linkTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The title attribute for the link"
+                },
+                "attribute": "link-title",
+                "reflect": false
+            }
+        };
+    }
+}

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

@@ -11,16 +11,16 @@ export class ZonosBadge {
         this.rounded = false;
     }
     render() {
-        return (h(Host, { key: '0f502b63322730f508fd7c92f231573b1dfbfd6b', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '1cece57ce37e04873f625d05ad5a0bea6368b46b', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '4ee3f0b623067625ddd79336a1854f5ab796b3b1', class: classes([
+            } }, h("div", { key: '8caf3f2ffb7deda215c44ad0c6c0892936d526c2', class: classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: 'e5bdf974408416811f7666fc453ca47db58fa43f' }, h("slot", { key: 'd953b60fefe2c25aea529b9de41938cfd96a285b' })))));
+            ]) }, this.icon, h("zonos-text", { key: 'fb8ac7f09675f9cfd829ecea54c61f5c699caa00' }, h("slot", { key: '978bc876e427d932662a0100043e04b105e9df8d' })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,6 +33,7 @@
 
 :host {
   display: inline-flex;
+  border-radius: var(--border-radius, var(--amino-radius-10));
 }
 :host .zonos--spinner-wrapper {
   position: absolute;
@@ -69,6 +70,7 @@
   white-space: nowrap;
   padding: var(--amino-space-8) var(--amino-space-24);
   color: var(--color, var(--amino-gray-1200));
+  margin: 1px;
   /** Button size */
 }
 :host button.sm.no-background, :host button.md.no-background, :host button.lg.no-background {

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

@@ -58,13 +58,13 @@ export class ZonosButton {
         // only set theme for button to change text color if variant is standard and override background is set
         const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
         const borderStyle = getBorderRadius(this.borderStyle);
-        const spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
-        return (h(Host, { key: '817142c1d229333aee0b38864788346d2749d3d1', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        const spinnerColor = buttonTheme === 'LIGHT' ? 'black' : 'white';
+        return (h(Host, { key: 'f3374eedd37ec6293260fba7b19d66aa013d3484', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("button", { key: '04bff1f932154f54b4af51b2fac053d40efc354f', class: classes([
+            } }, h("button", { key: '352ce427591b20b8042dcd19ce159b77c1fc2faf', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -77,7 +77,7 @@ export class ZonosButton {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'fd9bd0e9f89c3c9ab6dc9d0ac7a123542a1f5023', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '554cc1fd9bb58d833339ae21e837d586adc248c2', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,9 +12,9 @@ export class ZonosCard {
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { key: '8581e04d45e7061bff02485ad9a9a22920b5fe84', style: {
+        return (h(Host, { key: 'b350f7a592ea35c3b6beaf5eefaa2ab0208975dd', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '5e2038438e0885602c2e15808a34d62e86c95035', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: 'b7cbddad1cc08256ae9192349fe5a44302b6d79e' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
+            } }, h("div", { key: '125e8b550cd8f371e28a012536722f48402774f2', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: '3cf038c62910ebac736ed1c37ecf1a490c8e1d0e' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
             } }, h("div", null, this.footerContent), h("h-stack", { spacing: 8 }, this.footerActions))))));

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

@@ -27,14 +27,14 @@ export class ZonosCheckbox {
                     ? 'var(--amino-gray-800)'
                     : 'var(--amino-gray-0)';
         const borderStyle = getBorderRadius(this.borderStyle, '4px');
-        return (h(Host, { key: '86ab50028bec3f6a230b3a9492d06c1b2ce250fe', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: '5f8516f5933b739cc3f21d901e50dec1c761fa58', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: '88e87bb45739707a4e3da6d378ba491899dad76c', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'c877ba4a2bd43aa67c394136ef4b3c71096e75aa', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: '6544f51a8c892d616123ab4194d069b055e3dc86', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '958e35bf16be575230748fccdb1a3916942c3a30', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '0f40603a3cf90c38f37b05d7bfd8ed54623b07f4', class: "checkmark-container" }, h("svg", { key: '67945bb82cc05997bb40aeef14c5c0fd452a68af', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ac2d1db7ba5c1578dbe59f4ca9755a409ab24546', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: '2c55e0a190b092dd083c433c35143e253910f54f', class: "checkmark-container" }, h("svg", { key: '0aa1f705b728055835159a399173a170aee4f7c0', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd526bbafde4d4399be3f3a0a7cc87e92634d9548', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,6 +6,7 @@ export class ZonosCollapse {
         this.collapsed = false;
         this.collapseSize = 0;
         this.height = this.el.scrollHeight;
+        this.iframe = null;
     }
     getElementHeight() {
         const fullHeight = `${this.height}px`;
@@ -17,12 +18,17 @@ export class ZonosCollapse {
     }
     componentDidRender() {
         var _a, _b, _c;
-        (_c = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
-            this.height = this.el.scrollHeight;
+        this.iframe =
+            ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('iframe')) || null;
+        (_c = (_b = this.iframe) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.addEventListener('resize', () => {
+            if (!this.iframe) {
+                // this should never happen since it's inside of resize callback
+                return;
+            }
+            this.height = parseFloat(getComputedStyle(this.iframe).height);
         });
     }
     render() {
-        this.height = this.el.scrollHeight;
         if (!this.collapsed) {
             // wait for the collapse animation to finish, then set overflow to visible
             setTimeout(() => {
@@ -36,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: 'cbec79617b603172a6c3c41d29ee093f61eead92', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: '7ac8b898feadfb4424b3b48a98135cb18994f4e0', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '6e72b98c155ee436bbaabce3d7b58294bb6ccc7a' }, h("iframe", { key: 'ef3306219530d635fa320099727a3574d5800285', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'a66b3d6d08a12f0c184a5c4294afdb2c340fe95d' }))));
+            } }, h("div", { key: '4a527ec319b59041196284d4d9a8f22b943a74e6' }, h("iframe", { key: '2fb51c16e13ca90561b1b1e6cab89d87e4a37a47', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '6d7849f6c35be611446b0da36d657396e5ca3122' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }
@@ -95,7 +101,8 @@ export class ZonosCollapse {
     }
     static get states() {
         return {
-            "height": {}
+            "height": {},
+            "iframe": {}
         };
     }
     static get elementRef() { return "el"; }

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

@@ -18,6 +18,11 @@ export class ZonosCountrySelect {
         this.handleOnClose = () => { };
         this.inputValue = '';
     }
+    componentDidRender() {
+        var _a, _b;
+        // focus the input on render
+        (_b = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-select-input')) === null || _b === void 0 ? void 0 : _b.focus();
+    }
     render() {
         const { shippingZoneCountries } = localizationStore;
         const countries = shippingZoneCountries
@@ -30,9 +35,9 @@ export class ZonosCountrySelect {
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: 'fb1115a06814daaf8ebb7d9e282fdd1bd944121f', class: "zonos--elements", style: {
+        return (h(Host, { key: '2b8e15643f92ac489706aff7623b1d1efdebce70', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'eb9eb7dba8f170c6190fd29e670b002ecb39a849', class: "zonos--country-select" }, h("zonos-v-stack", { key: '4667474f03efbad9fbb0ea4153d16b49a7f2803f', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'c2777f838d9d376878e1218868ed8df0d28dc5f2', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '1e41b3888bce97a94ff88c4b3b3389cc8d4de096', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'ba89ae931e2a0e564112d9989d8074674906a297', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { color: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: '06b0c7765d8144ca102c9033e74cf1edb14743ac', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'f2af99575f518acb753448f7cb1f7aecd790de9d', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '296b92c476439aace00f6817b452a3fd3e1d353d', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: 'd988b856392f88a66bcc3016ccf55107bda4a411', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '4376bec824141dd7d2dbfb84f465ac4a48e1d050', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     static get is() { return "zonos-country-select"; }
     static get encapsulation() { return "shadow"; }
@@ -74,4 +79,5 @@ export class ZonosCountrySelect {
             "inputValue": {}
         };
     }
+    static get elementRef() { return "ele"; }
 }

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

@@ -1,14 +1,16 @@
 import { h, Host } from "@stencil/core";
 import { zonosStoreFontFamily } from "../../store/zonosStore";
+import { formatStringWithLinks } from "../../utils/formatStringWithLinks";
 export class ZonosCustomMessage {
     constructor() {
         this.icon = '';
         this.message = '';
     }
     render() {
-        return (h(Host, { key: '6c16aa29406415995c2289c2fe3d22dbe08fbd23', class: "zonos--elements", style: {
+        const messageWithLinks = formatStringWithLinks(this.message);
+        return (h(Host, { key: '73091a3267f0989e8820800054aebc75168dc5d6', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Custom message", content: this.icon }), h("zonos-text", null, this.message))))));
+            } }, this.message && (h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class ZonosDialog {
             document.body.style.overflow = 'auto';
         }
         const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { key: 'dd232b16db7f6a6216f91af19c8b735b7eb528c7', class: classes([
+        return (h(Host, { key: '3927d9cf0ebbd8b497a0ec42328c4392925d198a', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -59,10 +59,10 @@ export class ZonosDialog {
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, h("div", { key: '23751fcbfe7a51856589d45feb59ed51ca3f86fa', class: "zonos--backdrop" }), h("div", { key: '3f5af0c470ad69e68b978753ece8d2687c99ab7c', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'e137a76e1a3e2cfc6403628fe804eb23d1bb1282', class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: '46e89cdfaffd1190f4916206deb452002f40f24f', class: classes([
+            } }, h("div", { key: 'df93af61bfd856db3a572cdb98f60a8dd5c5bb7d', class: "zonos--backdrop" }), h("div", { key: 'f306feb4858dff642fbfd731e5aad849a8f29941', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'b914ea2e54fb2af825008ae28e235c461dce67e9', class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: '19219c0c8d167bbacec992ba10b1fe0f31a8b8f6', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: 'e8acb4a5e48ad4a0aeb057799f5abeb56eb8d1ea' })), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
+            ]) }, h("slot", { key: '38f9b83418dacd47cc2395f253a32ff0a6723d54' })), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
     }
     static get is() { return "zonos-dialog"; }
     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: 'c90288e341c50d113cc63d09e864ddfa346d55a1', class: "zonos--elements", style: {
+        return (h(Host, { key: 'd12676d6438941bb8d987826f68c1b72a7e02ccd', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '4dabc3c9ab177e5545942c725490af64cb9608c3', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '95f111f3774a568ea44204858fe503fa7c1915f3', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'c2634e3b006f3d14c67ee78c0c9befdb21cecc72', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { color: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, h("div", { key: '259eaa6a8ae682cc96c98eaaab574757285188b9', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '88bff024a5f678b00bf4edd7b2497177a986af4c', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'be1d87991dec9ac2a3b530a0cf9129b9e191781b', 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-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: '5e97dd0219dde036eef02757f055354390b18c3d', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: 'b93db6ec62ecaacb3ded0ab07dd2f38ed488f8d1', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: '44c720d0a7bf3cf5a6bd783f21c8493d3a53ec70', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '026162477b24250e4204318fa3018b1cfd383ab5', 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-select-dialog-header/zonos-select-dialog-header.js

@@ -8,9 +8,9 @@ export class ZonosSelectDialogHeader {
         this.label = '';
     }
     render() {
-        return (h(Host, { key: '737dcae414b2538bf4c0b5c932a78acb9eeb1e93', class: "zonos--elements", style: {
+        return (h(Host, { key: 'd0882c22934d6f9635bd0b31af5703283cd0a1be', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '8cfde0f03e03ad011c8f8f4517c3b47ba8c03746', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '5c5044ad46e156ad4cde26df0bb57c6690a11e42', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'a10b9b48834c6eabd9d20f44b8c8dc4927d53bd1', type: "boldLabel" }, this.label), h("zonos-button", { key: '50d74c5e97f2c224a437fde48b6d2a30b14fc1fe', 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: 'd875d9cfddaf37f1ca0a2bb01a3ba3da10c2fda0' }))));
+            } }, h("zonos-v-stack", { key: '2e227c5bdeeeb0fa772847267007df5aea2e0824', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'c43b72c938069ff1a99a985b3b388a785f94d100', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'b1008e43ca022ca1e1b63a60ab5c347d1228396e', type: "boldLabel" }, this.label), h("zonos-button", { key: '4722586c58eac765ded4a7baeeca8eb58d44dd0a', 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: '36babf745ea5de00c82823520134b1dfcfc9d16d' }))));
     }
     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

@@ -34,7 +34,7 @@ export class ZonosShippingRichRadio {
             return (h("div", { "aria-hidden": "true", class: classes([
                     'zonos--shipping-rich-radio-item',
                     selected && 'selected',
-                ]), onClick: () => this.handleRichRadioSelect(item) }, h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), h("div", { class: "zonos--shipping-info" }, h("div", { class: "zonos--shipping-detail" }, h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (h("div", { class: "zonos--sub-detail" }, item.sublabel && (h("zonos-text", { textColor: "gray-800" }, item.sublabel)), item.caption && (h("zonos-text", { textColor: "gray-400" }, item.caption))))), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
+                ]), onClick: () => this.handleRichRadioSelect(item) }, h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), h("div", { class: "zonos--shipping-info" }, h("div", { class: "zonos--shipping-detail" }, h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (h("div", { class: "zonos--sub-detail" }, item.sublabel && (h("zonos-text", { textColor: "gray-800" }, item.sublabel)), item.caption && (h("zonos-text", { textColor: "gray-600" }, item.caption))))), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
         })));
     }
     static get is() { return "zonos-shipping-rich-radio"; }

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: '684561bebf9385c7e6bcca7de37e7ee5084c9692', class: "zonos--elements" }, h("div", { key: 'c116738f39d25b856b268ece410a33f91046c739', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '4073ed0766b4efaa0c25fa7febdbad4c42714dca' }), h("div", { key: '8c6b180577830aaaceb629819535dd930fc49e02', class: classes([
+        return (h(Host, { key: '4864150b0af4119fc7d87aec5af3c258fb27802d', class: "zonos--elements" }, h("div", { key: 'c11d3da431f9c4507bc58ec38d0b1ef21c99b584', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '0a92efb2e6c17f67c2feacbd17bbddd4fb63f7da' }), h("div", { key: '0ea54bfaf54a2f170044d77c2b555e5da37af8ae', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '7c018a9d5a7db939b59624dcc77029a5a8d621af', color: "gray-0", size: "s", type: "boldLabel" }, this.label), h("zonos-text", { key: 'c1f09eaf9cb1084ecf47334903b9ca8b944502b7', color: "gray-0", size: "xs" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '73c55a7318eb36760d2779691f9ea79d2c5bf8c7', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '1f4106f67fc468121d7fb7fbc0ee69363bb26186', 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: 'a26c7c4898b81deb569731adb63505ded3155fdf', style: {
+        return (h(Host, { key: 'a5d1a84d5b25d1a49abec676731eaf76f703e998', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'd4af21dc024bbd12b5240dff4f2689416ad4d808', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '298de42d875520fad5a720eedcf2b8664b39ae85' }))));
+            } }, h("div", { key: '456c8e1865a752dd258989888c45dfbdfd2c4f66', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '2d3260c6b74d3def822acb98733f70a97a79f3fa' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

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: 'cf376a9b1970bd04cdadf820112c081666c8bef2' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '3b7429a0c03b00f0a80e15a94bebd08aedaafe51' }, "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

@@ -101,7 +101,6 @@ export class ZonosHello {
         this.reloadHelloData = async () => {
             await this.handleItemRestrictions();
             this.triggerShowPeekMessage();
-            void this.displayCurrency();
         };
         this.handleProductCountChange = debounce(() => {
             const { productTitleElementSelector } = zonosStore.helloSettings;
@@ -124,6 +123,14 @@ export class ZonosHello {
                 subtree: true,
             });
         };
+        this.watchPriceChange = () => {
+            const observer = new MutationObserver(() => void this.displayCurrency());
+            observer.observe(document.body, {
+                attributes: true,
+                childList: true,
+                subtree: true,
+            });
+        };
         this.updateHelloOnPageChange = () => {
             // If the product count changes on the same url (loading more products), update the peek message and item restrictions
             this.watchProductCountChange();
@@ -195,6 +202,7 @@ export class ZonosHello {
             if (zonosStore.loadedConfig) {
                 this.helloRef.setAttribute('data-zonos-hello-loaded', '');
                 this.updateHelloOnPageChange();
+                this.watchPriceChange();
                 clearInterval(initInterval);
             }
         }, 100);
@@ -216,21 +224,28 @@ export class ZonosHello {
      * @returns string
      */
     async convertAndFormat(value) {
-        currencyConvertAndFormat(value);
+        return currencyConvertAndFormat(value);
     }
     /**
      * This method will convert the currency and return the converted value
      * @returns number
      */
     async convert(value) {
-        currencyConvert(value);
+        return currencyConvert(value);
     }
     /**
      * This method will format the currency and return the formatted string
      * @returns number
      */
     async format(value) {
-        currencyFormat(value);
+        return currencyFormat(value);
+    }
+    /**
+     * This method show the hello dialog
+     * @returns void
+     */
+    async openHelloDialog(value) {
+        this.changeShowDialog(value);
     }
     handleResize() {
         debounce(this.render.bind(this), RESIZE_DEBOUNCE_DELAY_MS);
@@ -267,7 +282,7 @@ export class ZonosHello {
                 !!this.allRestrictedItems.length &&
                     'zonos--hello-has-restrictions',
             ]), onClick: () => {
-                this.changeShowDialog(!this.showDialog);
+                void this.changeShowDialog(!this.showDialog);
             }, onMouseEnter: () => this.enableShowPeekMessage(), onMouseLeave: () => (this.showPeekMessage = false), ref: el => el && (this.helloRef = el) }, h("zonos-text", { class: "zonos--hello-message" }, this.peekMessage), selectedCountryCode && (h("div", { class: "zonos--hello-country-flag-wrapper" }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: selectedCountryCode })))), h("div", { class: classes([
                 'zonos--hello-dialog-wrapper',
                 this.mobileLocationOverride &&
@@ -397,7 +412,7 @@ export class ZonosHello {
             },
             "convertAndFormat": {
                 "complexType": {
-                    "signature": "(value: number) => Promise<void>",
+                    "signature": "(value: number) => Promise<string>",
                     "parameters": [{
                             "name": "value",
                             "type": "number",
@@ -409,7 +424,7 @@ export class ZonosHello {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<string>"
                 },
                 "docs": {
                     "text": "This method will call convert and format, and return the converted and formatted string",
@@ -421,7 +436,7 @@ export class ZonosHello {
             },
             "convert": {
                 "complexType": {
-                    "signature": "(value: number) => Promise<void>",
+                    "signature": "(value: number) => Promise<number>",
                     "parameters": [{
                             "name": "value",
                             "type": "number",
@@ -433,7 +448,7 @@ export class ZonosHello {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<number>"
                 },
                 "docs": {
                     "text": "This method will convert the currency and return the converted value",
@@ -445,7 +460,7 @@ export class ZonosHello {
             },
             "format": {
                 "complexType": {
-                    "signature": "(value: number) => Promise<void>",
+                    "signature": "(value: number) => Promise<string>",
                     "parameters": [{
                             "name": "value",
                             "type": "number",
@@ -457,7 +472,7 @@ export class ZonosHello {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<string>"
                 },
                 "docs": {
                     "text": "This method will format the currency and return the formatted string",
@@ -466,6 +481,30 @@ export class ZonosHello {
                             "text": "number"
                         }]
                 }
+            },
+            "openHelloDialog": {
+                "complexType": {
+                    "signature": "(value: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method show the hello dialog",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "void"
+                        }]
+                }
             }
         };
     }

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

@@ -17,9 +17,9 @@ export class ZonosHelloDialogFooter {
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
-        return (h(Host, { key: 'a3a6ab0e4af4981cc83802be1433c3c41da58c19', class: "zonos--elements" }, h("div", { key: 'fdea45d1b4d83055a3d17918a5ae78f43a7e0042', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (h(Host, { key: 'f97688788d9f6d1a640f054a2a22dbae6955b83c', class: "zonos--elements" }, h("div", { key: '3539323f9044acef3890fc072bdd981e2495fc18', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
                 '--primary-color': (_c = this.appearanceSettings) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-            } }, h("a", { key: '4d4e995052049238d4c522ff8501dddbe25e29d5', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '4ca16c024473660f74cfc7a3d506b8ba4ebf7362', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: 'dd1da686f8345431c3805898f374e5fb22e27289', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'd5c34c75c5006710ff6d0426d43f07a5ade41827', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '43759ce87473b10e078f14dce529db502a5edd4d', buttonColor: "gray-1200", 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: '5e30052240f87211c6f0092ef6a27c217f3ecefb', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'c60142bcd26086c2944ac3464885ca1f96e5cfbe', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: '67297b4c557ee5b49a4406a459588f2924183195', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '9348bff826187730f36d191f7e01f516f2b9785c', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'ecf1a8639e8e92a07a0e774abb560de53c19587c', buttonColor: "gray-1200", 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"; }