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

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

@@ -0,0 +1,322 @@
+import { h, Host, } from "@stencil/core";
+import { translate } from "../../store/translationStore";
+import { getZonosStoreTheme, zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ExclamationMarkDuotoneIcon from "./assets/ExclamationMarkDuotoneIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import HelpDuotoneIcon from "./assets/HelpDuotoneIcon.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import WarningDuotoneIcon from "./assets/WarningDuotoneIcon.svg";
+export class ZonosConfirmDialog {
+    constructor() {
+        this.clickOutsideDialogHandler = (event) => {
+            if (event.target === event.currentTarget && !this.noClickOutside) {
+                this.closeDialogHandler();
+            }
+        };
+        this.dialogTitle = translate('Are you sure?');
+        this.dialogIntent = 'info';
+        this.dialogSubtitle = '';
+        this.submitBtnColor = undefined;
+        this.dialogConfirmBtnText = undefined;
+        this.dialogCancelBtnText = undefined;
+        this.isMobile = false;
+        this.dialogOpen = false;
+        this.noClickOutside = false;
+    }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.closeDialogHandler();
+        }
+    }
+    focusDialog() {
+        if (this.dialogOpen) {
+            setTimeout(() => {
+                var _a, _b;
+                // Focus on a non tabable element (tabIndex=-1), so we will be able to tab to other tabable elements
+                (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--backdrop')) === null || _b === void 0 ? void 0 : _b.focus();
+            }, 100);
+        }
+    }
+    confirmDialogHandler() {
+        // Only do the action if the dialog is open
+        if (!this.dialogOpen) {
+            return;
+        }
+        // Emit confirm event
+        this.confirmClicked.emit();
+    }
+    closeDialogHandler() {
+        // Only do the action if the dialog is open
+        if (!this.dialogOpen) {
+            return;
+        }
+        // Emit cancel event
+        this.cancelClicked.emit();
+    }
+    renderIcon() {
+        switch (this.dialogIntent) {
+            case 'info':
+                return (h("zonos-icon", { content: HelpDuotoneIcon, iconColor: 'blue-800' }));
+            case 'danger':
+                return (h("zonos-icon", { content: ExclamationMarkDuotoneIcon, iconColor: 'red-800' }));
+            case 'warn':
+                return (h("zonos-icon", { content: WarningDuotoneIcon, iconColor: 'orange-800' }));
+        }
+    }
+    getButtonConfirmVariant() {
+        switch (this.dialogIntent) {
+            case 'warn':
+                return 'warning';
+            case 'danger':
+                return 'danger';
+            default:
+                return 'primary';
+        }
+    }
+    render() {
+        this.focusDialog();
+        const borderStyle = getBorderRadius();
+        // Get theme for the update dialog, inherit from the theme, no from this component theme
+        const theme = getZonosStoreTheme(zonosStore.appearance.theme);
+        return (h(Host, { key: '9adab1c77e8087cfbb92a52e66d12f1b1917bf7e', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-theme": theme, style: {
+                '--border-radius': borderStyle,
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: 'c5b40120ff7b3c4684eb65fb5ef6f8ffa157f98f', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: 'c7cf4d2839cb42a064b4303bdefdfe4fed116b2a', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '30256495401f4967371e923055dfe9efed8cb6b7', class: "zonos--confirm-dialog", onBlur: () => {
+                this.focusDialog();
+            } }, h("div", { key: '6121ab29b80d233f9ca47aaf66725fe91ae6827c', class: "wrapper" }, h("div", { key: '8fbb75eca3ee163b57c60159d5c5374382f3fa33', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '56376add713778af1df087c0f9f4b8d90065caa2', class: "content" }, h("div", { key: '4f31ad7d42127c5350a64b86ae12fde42a350422', class: "title" }, h("zonos-text", { key: '7a5dc82d3f2250c1b3a3403e116736cedcf63f51', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '87b04af2b1984a8cf205b6fa0acf0320f56342e7', class: "subtitle" }, h("zonos-text", { key: '53d0157655b1d8193a0f698e41442b676d9e0ca6', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '4b410f4a4079a25549bef228c3b9a81a64fe20e2', class: "footer" }, h("zonos-button", { key: '5a8ffb99756bd142605c564df381bfb9e72d5d78', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText), h("zonos-button", { key: '61c2b8272202f316ec09441ab64428c557073c9d', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+    }
+    static get is() { return "zonos-confirm-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-confirm-dialog.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-confirm-dialog.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "dialogTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"Are you sure?\""
+                        }],
+                    "text": "Dialog title text"
+                },
+                "attribute": "dialog-title",
+                "reflect": false,
+                "defaultValue": "translate('Are you sure?')"
+            },
+            "dialogIntent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'info' | 'danger' | 'warn'",
+                    "resolved": "\"danger\" | \"info\" | \"warn\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"info\""
+                        }],
+                    "text": "Dialog intent (for icon and button color)"
+                },
+                "attribute": "dialog-intent",
+                "reflect": false,
+                "defaultValue": "'info'"
+            },
+            "dialogSubtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"\" No subtitle"
+                        }],
+                    "text": "Dialog subtitle text"
+                },
+                "attribute": "dialog-subtitle",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "submitBtnColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Submit button main color"
+                },
+                "attribute": "submit-btn-color",
+                "reflect": false
+            },
+            "dialogConfirmBtnText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Confirm button text"
+                },
+                "attribute": "dialog-confirm-btn-text",
+                "reflect": false
+            },
+            "dialogCancelBtnText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cancel button text"
+                },
+                "attribute": "dialog-cancel-btn-text",
+                "reflect": false
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the dialog is open"
+                },
+                "attribute": "is-mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dialogOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the dialog is open"
+                },
+                "attribute": "dialog-open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noClickOutside": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether or not to close the dialog when clicking outside of it"
+                },
+                "attribute": "no-click-outside",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "confirmClicked",
+                "name": "confirmClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the \"Confirm\" button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "cancelClicked",
+                "name": "cancelClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the \"Cancel\" button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -35,9 +35,9 @@ export class ZonosCountrySelect {
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: '1b37f326e23e3afaba1428cc23add2e5c425f0b9', class: "zonos--elements", style: {
+        return (h(Host, { key: '67675ff9b37f110026ced223509104eb8ad805c0', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '966ab933f1bcd754e64fc43dc2013f6cde0f043b', class: "zonos--country-select" }, h("zonos-v-stack", { key: '77d6412871658e9fc8e59df130d3b95df68c5e0b', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '17d0413090d9637aa17234d19a3549b9828a3a86', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '08aa6bd77273095d0b1753c6b423a283b638cc69', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'e1e770226aa2ad9c74681d8291797ff676217f09', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: '83d69dde89f0fafadf344ca0be017f43c468f154', class: "zonos--country-select" }, h("zonos-v-stack", { key: '8262345817217ba3f27ecf433ff56712b8018ae7', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '80ef94a9a2b1d7bdd835a9b31b09663f28b0532a', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: 'd3151d1287ee98b697e35f1f755694b250f089a3', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'f98ff12368e49125f7fc2409f84bcbaef2143809', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     static get is() { return "zonos-country-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,9 +8,9 @@ export class ZonosCustomMessage {
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: 'c2cec226eb9236205d0c4b234bb393e4663d982f', class: "zonos--elements", style: {
+        return (h(Host, { key: '7d3c45852c97272a3606321dad09c6433dfc664c', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: '51814b00b14061891914753a950b6a3dc852c0f0', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '4f7298eb552d9f0e1b6ded333c298df3d4fbbee2', class: "zonos--flex-message" }, h("zonos-icon", { key: '0a1fb171e1365a845e1e0855466058ced6c57f12', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'dd714a4f1fd3e1ebe55586c5c8c6941928eb2862', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: '53b64b2faea9d06fd66365f80efe3b9d26aab5b6', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '2bfc437f100084a1e661bf823e20be72a0ab616d', class: "zonos--flex-message" }, h("zonos-icon", { key: '5c0f5da248ddb25a69a3db46b85e8e0e4d481101', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'aabbcc00b1b50d29a3e6f48938b50c7b64d250dc', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,9 +44,6 @@
   left: 0;
   top: 0;
   background: var(--zonos-elements-backdrop-color);
-  z-index: -999;
-  opacity: 0;
-  visibility: hidden;
   position: fixed;
 }
 :host .zonos--loading {
@@ -80,7 +77,7 @@
   background: var(--zonos-elements-gray-0);
   max-width: 90vw;
   max-height: 90vh;
-  min-height: 500px;
+  min-height: var(--min-height, auto);
   height: var(--height, auto);
   width: var(--width, auto);
   border-radius: var(--border-radius, var(--zonos-elements-radius-10));

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

@@ -11,6 +11,10 @@ export class ZonosDialog {
             return this.mobile || window.innerWidth <= 768;
         };
         this.closeButtonHandler = () => {
+            // Only do the action if the dialog is open
+            if (!this.open) {
+                return;
+            }
             this.closeDialog.emit();
         };
         this.clickOutsideDialogHandler = (event) => {
@@ -22,6 +26,7 @@ export class ZonosDialog {
         this.headerText = '';
         this.width = '460px';
         this.height = undefined;
+        this.minHeight = undefined;
         this.noHeader = false;
         this.noBodyPadding = false;
         this.noBorder = false;
@@ -35,6 +40,11 @@ export class ZonosDialog {
     handleWindowResize() {
         this.isMobile = this.isMobileMode();
     }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.closeButtonHandler();
+        }
+    }
     componentDidLoad() {
         this.isMobile = this.isMobileMode();
     }
@@ -49,7 +59,7 @@ export class ZonosDialog {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '48eb2701a74a7973d3502fd1fdc65ce85a6d71ed', class: classes([
+        return (h(Host, { key: 'b27bdee33f67e2209dfbd9621b95633f4af726b2', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -59,11 +69,12 @@ export class ZonosDialog {
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
+                '--min-height': this.minHeight || '500px',
                 '--width': this.width,
-            } }, h("div", { key: 'b408d792740d8854bab8ea60bd50ce894a75a836', class: "zonos--backdrop" }), h("div", { key: '04affcf48e0b209fa8dacc74039dad536ed9cd9b', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'c615792a60b2fa51a74af265b7c944a64e9ff18d', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '78d3b571f75c6037fdd694b4621fb9eae48d8ce0', class: "zonos--loading" }, h("zonos-spinner", { key: 'bd96037d5fe1717ebeae5b1ba27b96aa9ec9253d', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: 'cc057cbed99107d7d234d08d38e67cbf0140dc66', class: "zonos--header" }, this.headerText && (h("h3", { key: '587fff6b04981f1c24b44736b3b40044480f68ba', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '9a1944508996cd8ccb87f68ae175564528af3c4c', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'b563c1939c32489b63516cd4dd14df58a32a08cf', class: classes([
+            } }, h("div", { key: 'ca94e3347d10460973663685d9b8c0048418cb86', class: "zonos--backdrop" }), h("div", { key: 'e766937dc1899141ed7beb07e9f13a60066880a1', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '41c43bb5cf011a3a810c6116c4300ad7a713c787', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '5ca28c9f3b1f6f0742484ef5414ba60f16e1faa7', class: "zonos--loading" }, h("zonos-spinner", { key: 'e0131cd9fd3fa7a9c502e7a55b75b8c76be86fc3', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '2ef2237cb4518980eb3a5c97cc1a1ea2c87444be', class: "zonos--header" }, this.headerText && (h("h3", { key: '751e1be4417cc733dffa8a683d3f4c8774ee83f5', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '720f9250c88e0097d839276ab0d2319e31fc170b', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: 'd64547b7d802a4b14e64454ae329dbb6d88f1cfd', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '39d66d136f630afbac7ced146d3a8ac60d3c9672' })), h("slot", { key: '5bace66c84150024d0203f89fbf8f5c263cb7472', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '96d1683414cc4a947a36c6ae28e5afb781be4dae' })), h("slot", { key: '06b8ff1ad17f74e28fc4980fbc4594dde5e4573f', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -152,11 +163,28 @@ export class ZonosDialog {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The height of the dialog (max-wdith still 90vh)"
+                    "text": "The height of the dialog (max-width still 90vh)"
                 },
                 "attribute": "height",
                 "reflect": false
             },
+            "minHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The min height of the dialog"
+                },
+                "attribute": "min-height",
+                "reflect": false
+            },
             "noHeader": {
                 "type": "boolean",
                 "mutable": false,
@@ -356,6 +384,12 @@ export class ZonosDialog {
                 "target": "window",
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }];
     }
 }

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: '97f9a886695c81bf72ffa5cc4b7afc26e40a2694', class: classes([
+        return (h(Host, { key: 'c032eae81e9183b73ed9f12ca3397786e499d8a7', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--border-radius': getBorderRadius(),
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'ffc96e546684499a5272dd0f5b4b087b1f717353', class: classes([
+            } }, h("div", { key: '54177758c126bf8d4043cc5e3dd92f0aa6e2c838', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: '162556990fe4c93fc9400f7cf947d8fdbeffd2f1', class: classes([
+            ]) }, h("input", { key: '10f853e84c278aa9d9a050548801ea366583836d', 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: '9b73d42d50090f1ac761ccf27bd606d474cd8d53', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '0f9a9fcb308f4117ec0f08a07d4de8d6f5c4fb03', 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: 'e1943addb44b8e06d5b4534865f403a721175cdd', class: "zonos--elements", style: {
+        return (h(Host, { key: 'e719b6e5e5d52ec572525ba02c78989bfe6c6b91', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '888a410d444424f4ffb06dd28e5151bca9269de2', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '59aa5ae5e685f65baa1c7b1a19c1000ab8cdac74', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '854c44fefe28f22fdd37b251d482ca6db46b0895', 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: '5a2d7fe751fe92455f7e56bf02360ef9992baffb', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'b37d91ffc91949aac8dda2d2ec94acbdfadfcdf4', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '881a00e8bd3e4358a5c1784bd957a81917863134', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
     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: 'c68b772cba1e8562b48a58bace45e0643bd18dcf', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: 'c790c72d413c586a873c5046a1aee797c1f0af36', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: 'a3a48b9f4dc2401d543afe0d2334b5bd57aad4d6', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '68efd2097a0d8488308de0b50bef30cc67deb6fa', 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: '7b7a5a39307cfacdfda4dd622d9b7e052013f80e', class: "zonos--elements", style: {
+        return (h(Host, { key: '6bbc81e8045153c49da17c4b999bc1992aa9f01d', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '3b4152d041961241d48acfdfefe421b487fc63c1', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '9b72b53159ef2ea9ef3ac2682da24e6b2bc0f71b', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '9aee88932746e76c819d1e40ed45ba3c44a74a0a', type: "boldLabel" }, this.label), h("zonos-button", { key: '5e794ef5039bbff4f8cd52bb942a8f6c655adbe7', 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: 'ee4e5657d5034a4068b52d1f4e3a8971ccbee626' }))));
+            } }, h("zonos-v-stack", { key: 'c0184343c6cefd3c996695964800d242d1673ee1', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'ae13d39c8a0917df33aec34a10853892d9470a9c', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '32e9af076b72f63cb1ec0c92b7e77d3196572106', type: "boldLabel" }, this.label), h("zonos-button", { key: 'eb4d2f0cef4a2b0eafe628c19d0fcbac4f3493e6', 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: '98a6f0e4f44e74208b5e446ad8066b74b1f7beaa' }))));
     }
     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: '39503dadb0422477303a6715a744478d765e6ecf', class: "zonos--elements" }, h("div", { key: '834be19e46353d018bf827327f418d3e82502cf5', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '7c8f731f548d1bcf750615be450d93004e83a369' }), h("div", { key: 'b7f02a3057f2d2f6eeb65715e64783b48cab71ea', class: classes([
+        return (h(Host, { key: 'dd98e35a2295dd72209775ce1e63d6f653913466', class: "zonos--elements" }, h("div", { key: '4bee5ca82e3a493826b723f620baa6d7cf7af63a', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '1320496e6caed5f16d940f0e5119d5f19186f565' }), h("div", { key: '2a9b891c672d03cdbe8babf59312942e101704a7', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: 'f65ede18a38c299d389403400a4ae00a0387e2cb', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'eb69da57b2e4f0e9be31801101c079618ac30148', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '0146fad3f70fa07e9eb644b26d6dd65963a70c3d', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '36e76d4624927255679107ee47022b7314479441', 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: 'd6e16e46c900ee9e15cb1664a1f07133b9e82135', style: {
+        return (h(Host, { key: '3d0753111d525b29e1f36684c89b7216ee0b323f', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'f634995e617314160ecf5a432958207a43a40201', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'aa7bca0df7412bb0b8913e02ffd3617a511b9c8c' }))));
+            } }, h("div", { key: '95b732681743abc1b08b1b8bc722855c3c8e967a', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'b93347c5fb986a70f9f1d67ce2216bba84db7ba4' }))));
     }
     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: '589c084e9acc84525aa5db6036d13741ed656e26' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'b51f2edddb50f8f6a868da28c73218fe6955d2e5' }, "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

@@ -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: '73782964897f8b09fd603de0bdbaa8348a4117c7', class: "zonos--elements" }, h("div", { key: 'bbb22af415fd9ba14900eca3e7c1b07d5bb9e831', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (h(Host, { key: '714c0ccdaab553158a4990e24e471e0a0be64655', class: "zonos--elements" }, h("div", { key: '4c177b9120aee7ccdc242bb656399e1597b35f28', 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: 'c4b098b21f8a6905f87457bfcfb5d1e0dee64470', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '64d86210a96b229ddfa932bb92678ab608eb59b9', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: 'be711084541626184d7c742a8df88c1bf61c30e4', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '2f1370424b58f393a81c2c0b71669d38782cf17e', 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: '724e7897179be3d852a661a7109a264bb32b01b8', 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: 'cb2b3ffb8a637825c76d4b33d71fa38d20a19220', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'affb176b938a399d51ccb6ae4fb5906e31ea2ff0', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: '4aa0ce039d196d804b26df7e2b8608252da2a478', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '088259ecd3d2271fb9a4042126886c7f4fe3a9ba', 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: 'e20dcd573266b53341e9f21bab3b34672d4d96a1', 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"; }