@zonos/elements 1.3.5 → 1.3.7-alpha.0

package/dist/collection/components/common/zonos-language-select/zonos-language-select.css

@@ -0,0 +1,61 @@
+: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 .zonos--language-select {
+  width: 100%;
+}
+:host .zonos--language-select .zonos--language-select-content {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(max-content, 1fr));
+  padding: var(--amino-space-16);
+  padding-top: var(--amino-space-0);
+}
+:host .zonos--language-select .zonos--language-select-content .zonos--language-select-button {
+  display: flex;
+  padding: var(--amino-space-8);
+  gap: var(--amino-space-4);
+  align-items: center;
+  border-radius: var(--amino-radius-4);
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  background: none;
+}
+:host .zonos--language-select .zonos--language-select-content .zonos--language-select-button:hover {
+  background: var(--amino-gray-100);
+}
+@media (max-width: 400px) {
+  :host .zonos--language-select .zonos--language-select-content {
+    grid-template-columns: 1fr 1fr;
+  }
+}

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

@@ -0,0 +1,58 @@
+import { h, Host } from "@stencil/core";
+import { localizationStore, localizationStoreUpdateSelectedLocale, } from "../../store/hello/localization";
+import { translate } from "../../store/translationStore";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
+import { languages } from "../../../types/ILanguage";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import GreenCheckDuotoneIcon from "./assets/greenCheckDuotone.svg";
+export class ZonosLanguageSelect {
+    constructor() {
+        this.languageSelected = (languageCode) => {
+            // mutate the selected language code in store
+            void localizationStoreUpdateSelectedLocale(languageCode);
+            this.handleOnClose();
+        };
+        this.handleOnClose = () => { };
+    }
+    render() {
+        const { selectedLocale } = localizationStore;
+        return (h(Host, { key: 'c90288e341c50d113cc63d09e864ddfa346d55a1', 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 })))))))));
+    }
+    static get is() { return "zonos-language-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-language-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-language-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "handleOnClose": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "() => {}"
+                        }],
+                    "text": "Function to close the language select"
+                },
+                "defaultValue": "() => {}"
+            }
+        };
+    }
+}

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

@@ -5,17 +5,16 @@ export class ZonosLogo {
     constructor() {
         this.theme = 'LIGHT';
         this.width = 'auto';
-        this.class = '';
     }
     render() {
         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: '25b7723a73f8f8c7a28e8b2730b88f18d4f11fb7', class: classes(['zonos--elements zonos--logo', this.class]), style: {
+        return (h(Host, { key: '5e97dd0219dde036eef02757f055354390b18c3d', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: 'e7f15f665c2d3c579e8727f1dceefea0fd438d5d', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '44c720d0a7bf3cf5a6bd783f21c8493d3a53ec70', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get is() { return "zonos-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -73,24 +72,6 @@ export class ZonosLogo {
                 "attribute": "width",
                 "reflect": false,
                 "defaultValue": "'auto'"
-            },
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "css class for the component"
-                },
-                "attribute": "class",
-                "reflect": false,
-                "defaultValue": "''"
             }
         };
     }

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

@@ -3,7 +3,6 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 export class ZonosNotification {
     constructor() {
-        this.class = '';
         this.notificationArray = [];
     }
     /**
@@ -46,16 +45,16 @@ export class ZonosNotification {
         }, 300);
     }
     render() {
-        return (h(Host, { key: '0846607651bce1e7acfc92cc775f86ce399dc789', class: classes(['zonos--elements zonos--notification', this.class]), style: {
+        return (h(Host, { key: '3567d975084d41ba075ccf92347adf31e200b41f', class: classes(['zonos--elements zonos--notification']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '1a4dd6b138b21b8a626d3df3a9c353590d51fd8c', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
+            } }, h("div", { key: 'c01555f14621f43d515f0593ed5463d4aa9b1309', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
             return (h("div", { "aria-hidden": "true", class: classes([
                     'zonos--notification-item',
                     notification.type,
                     notification.transitionClass,
                 ]), key: notification.id, onClick: () => {
                     this.removeNotification(notification.id);
-                } }, h("zonos-text", { color: "gray-0" }, notification.message)));
+                } }, h("zonos-text", { textColor: "gray-0" }, notification.message)));
         }))));
     }
     static get is() { return "zonos-notification"; }
@@ -70,28 +69,6 @@ export class ZonosNotification {
             "$": ["zonos-notification.css"]
         };
     }
-    static get properties() {
-        return {
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom class to add to the notification"
-                },
-                "attribute": "class",
-                "reflect": false,
-                "defaultValue": "''"
-            }
-        };
-    }
     static get states() {
         return {
             "notificationArray": {}

package/dist/collection/components/common/zonos-select-dialog-header/assets/removeIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>

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

@@ -0,0 +1,45 @@
+: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 .zonos--select-dialog-header-wrapper {
+  position: sticky;
+  top: 0;
+  background: var(--amino-surface-color);
+  padding: var(--amino-space-16);
+}
+:host .zonos--select-dialog-header-wrapper .zonos--select-dialog-header {
+  position: relative;
+  justify-content: space-between;
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,68 @@
+import { h, Host } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveIcon from "./assets/removeIcon.svg";
+export class ZonosSelectDialogHeader {
+    constructor() {
+        this.handleOnClose = () => { };
+        this.label = '';
+    }
+    render() {
+        return (h(Host, { key: '737dcae414b2538bf4c0b5c932a78acb9eeb1e93', 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' }))));
+    }
+    static get is() { return "zonos-select-dialog-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-select-dialog-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-select-dialog-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "handleOnClose": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "() => {}"
+                        }],
+                    "text": "Callback to do something on close"
+                },
+                "defaultValue": "() => {}"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the select dialog"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}

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", { color: "gray-800" }, item.sublabel)), item.caption && (h("zonos-text", { color: "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-400" }, item.caption))))), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
         })));
     }
     static get is() { return "zonos-shipping-rich-radio"; }

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

@@ -3,13 +3,13 @@ import { classes } from "../../utils/classes";
 export class ZonosSpinner {
     constructor() {
         this.size = 32;
-        this.color = undefined;
+        this.spinnerColor = undefined;
     }
     render() {
         if (!this.el.shadowRoot) {
             return null;
         }
-        return (h(Host, { class: classes(['zonos--elements', this.color]), style: {
+        return (h(Host, { class: classes(['zonos--elements', this.spinnerColor]), style: {
                 '--size': `${this.size}px`,
             } }, h("svg", { viewBox: "0 0 50 50" }, h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
     }
@@ -48,7 +48,7 @@ export class ZonosSpinner {
                 "reflect": false,
                 "defaultValue": "32"
             },
-            "color": {
+            "spinnerColor": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -68,7 +68,7 @@ export class ZonosSpinner {
                     "tags": [],
                     "text": "Color of the spinner"
                 },
-                "attribute": "color",
+                "attribute": "spinner-color",
                 "reflect": false
             }
         };

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

@@ -4,8 +4,7 @@ import { classes } from "../../utils/classes";
 import { textOptions, } from "../../../types/styles/Text";
 export class ZonosText {
     constructor() {
-        this.class = '';
-        this.color = 'gray-1200';
+        this.textColor = 'gray-1200';
         this.size = undefined;
         this.type = 'body';
         this.weight = undefined;
@@ -41,9 +40,8 @@ export class ZonosText {
         return (h(Host, { class: classes([
                 `zonos--text-size-${textSize}`,
                 `zonos--text-weight-${textWeight}`,
-                this.class,
             ]), style: {
-                '--color': this.color ? `var(--amino-${this.color})` : '',
+                '--color': this.textColor ? `var(--amino-${this.textColor})` : '',
                 '--font-family': zonosStoreFontFamily(),
             } }, renderText()));
     }
@@ -61,25 +59,7 @@ export class ZonosText {
     }
     static get properties() {
         return {
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "css class for the component"
-                },
-                "attribute": "class",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "color": {
+            "textColor": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -99,7 +79,7 @@ export class ZonosText {
                     "tags": [],
                     "text": "The icon element to display"
                 },
-                "attribute": "color",
+                "attribute": "text-color",
                 "reflect": false,
                 "defaultValue": "'gray-1200'"
             },

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

@@ -0,0 +1,55 @@
+: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 .zonos--tooltip {
+  position: relative;
+}
+:host .zonos--tooltip .zonos--tooltip-content {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  width: max-content;
+  padding: var(--amino-space-12);
+  background-color: var(--amino-gray-1200);
+  opacity: 0;
+  transform: scale(0);
+  transition: all 0.2s ease-in-out;
+  transform-origin: bottom left;
+  border-radius: var(--amino-radius-4);
+  z-index: 100;
+  box-shadow: var(--amino-v3-shadow-large);
+}
+:host .zonos--tooltip .zonos--tooltip-content.zonos--show-tooltip {
+  opacity: 1;
+  transform: scale(1);
+}

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

@@ -0,0 +1,72 @@
+import { h, Host } from "@stencil/core";
+import { classes } from "../../utils/classes";
+export class ZonosTooltip {
+    constructor() {
+        this.label = '';
+        this.subtitle = '';
+        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([
+                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)))));
+    }
+    static get is() { return "zonos-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the tooltip"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The subtitle of the tooltip"
+                },
+                "attribute": "subtitle",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showTooltip": {}
+        };
+    }
+}

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

@@ -5,12 +5,11 @@ import { classes } from "../../utils/classes";
 export class VStack {
     constructor() {
         this.spacing = 24;
-        this.class = '';
     }
     render() {
-        return (h(Host, { key: '2bd82aba32704cc02da767522c39853c6e223297', style: {
+        return (h(Host, { key: 'a26c7c4898b81deb569731adb63505ded3155fdf', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '22afa237aa1ac8a5ab61adcfa7a0ccabad316b28', class: classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '5f2645af6b1f4178cb87248e03e9bb3d1c8201ee' }))));
+            } }, h("div", { key: 'd4af21dc024bbd12b5240dff4f2689416ad4d808', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '298de42d875520fad5a720eedcf2b8664b39ae85' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }
@@ -52,24 +51,6 @@ export class VStack {
                 "attribute": "spacing",
                 "reflect": false,
                 "defaultValue": "24"
-            },
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The CSS class to apply to the stack element"
-                },
-                "attribute": "class",
-                "reflect": false,
-                "defaultValue": "''"
             }
         };
     }

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" color="var(--amino-gray-1200)" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12ZM11.4709 5.80634C11.7686 5.53723 11.9541 5.5 12 5.5C12.0459 5.5 12.2314 5.53723 12.5291 5.80634C12.8115 6.06164 13.1289 6.46913 13.4271 7.03651C13.9505 8.03191 14.3838 9.46098 14.48 11.25H9.51996C9.61624 9.46098 10.0495 8.03191 10.5729 7.03651C10.8711 6.46913 11.1885 6.06164 11.4709 5.80634ZM8.01802 11.25C8.11591 9.23031 8.60319 7.55958 9.24516 6.33849C9.29983 6.23451 9.35585 6.13335 9.41312 6.03514C7.32916 6.94017 5.81218 8.90533 5.5428 11.25H8.01802ZM5.5428 12.75H8.01802C8.11591 14.7697 8.60319 16.4404 9.24516 17.6615C9.29983 17.7655 9.35585 17.8666 9.41312 17.9649C7.32916 17.0598 5.81218 15.0947 5.5428 12.75ZM9.51996 12.75H14.48C14.3838 14.539 13.9505 15.9681 13.4271 16.9635C13.1289 17.5309 12.8115 17.9384 12.5291 18.1937C12.2314 18.4628 12.0459 18.5 12 18.5C11.9541 18.5 11.7686 18.4628 11.4709 18.1937C11.1885 17.9384 10.8711 17.5309 10.5729 16.9635C10.0495 15.9681 9.61624 14.539 9.51996 12.75ZM15.982 12.75C15.8841 14.7697 15.3968 16.4404 14.7548 17.6615C14.7002 17.7655 14.6441 17.8666 14.5869 17.9649C16.6708 17.0598 18.1878 15.0947 18.4572 12.75H15.982ZM18.4572 11.25C18.1878 8.90533 16.6708 6.94017 14.5869 6.03514C14.6441 6.13335 14.7002 6.23451 14.7548 6.33849C15.3968 7.55958 15.8841 9.23031 15.982 11.25H18.4572Z" fill="currentColor"/>
+</svg>

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

@@ -523,4 +523,14 @@
 }
 :host .zonos--hello-dialog-footer zonos-button button.outline {
   outline: 1px solid var(--amino-gray-800);
+}
+:host .zonos--hello-dialog-footer .zonos--hello-locale-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--amino-space-8);
+}
+@media (max-width: 400px) {
+  :host .zonos--hello-dialog-footer .zonos--hello-locale-wrapper {
+    gap: var(--amino-space-4);
+  }
 }