@zonos/elements 1.3.5 → 1.3.6

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

@@ -32,22 +32,23 @@
 }
 
 :host .zonos--country-select {
-  max-height: 60vh;
-}
-:host .zonos--country-select .zonos--country-select-header {
   position: relative;
-  text-align: center;
 }
-:host .zonos--country-select .zonos--country-select-header .zonos--country-select-back {
-  position: absolute;
-  top: -3px;
-  left: 0px;
+:host .zonos--country-select .zonos--country-select-header {
+  position: sticky;
+  top: 0;
+  background: var(--amino-surface-color);
+  z-index: 11;
 }
 :host .zonos--country-select .zonos--country-select-input {
   padding: var(--amino-space-8);
   border-radius: var(--amino-radius-4);
   border: var(--amino-border);
 }
+:host .zonos--country-select .zonos--country-select-content {
+  padding: var(--amino-space-16);
+  padding-top: var(--amino-space-0);
+}
 :host .zonos--country-select .zonos--country-select-country {
   display: flex;
   gap: var(--amino-space-16);
@@ -62,7 +63,7 @@
 :host .zonos--country-select .zonos--country-select-country:hover {
   background: var(--amino-gray-100);
 }
-:host .zonos--country-select .zonos--country-select-country .zonos--hello-country-flag {
+:host .zonos--country-select .zonos--country-select-country .zonos--country-flag {
   border-radius: var(--amino-radius-4);
   width: 24px;
   height: 18px;
@@ -73,7 +74,7 @@
   justify-self: center;
 }
 @media (max-width: 768px) {
-  :host .zonos--country-select .zonos--country-select-country .zonos--hello-country-flag {
+  :host .zonos--country-select .zonos--country-select-country .zonos--country-flag {
     border-radius: var(--amino-radius-4);
     width: 24px;
   }

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

@@ -1,27 +1,25 @@
 import { h, Host } from "@stencil/core";
 import Fuse from "fuse.js";
 import { localizationStore, localizationStoreUpdateSelectedCountryCode, } from "../../store/hello/localization";
-import { translate } from "../../store/translationStore";
 import { zonosStoreFontFamily } from "../../store/zonosStore";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
-import ArrowLeftBlue from "../../common/zonos-country-select/assets/arrowLeftBlue.svg";
+import GreenCheckDuotoneIcon from "./assets/greenCheckDuotone.svg";
 export class ZonosCountrySelect {
     constructor() {
         this.countrySelected = (countryCode) => {
             // mutate the selected country code in store
             void localizationStoreUpdateSelectedCountryCode(countryCode);
-            this.closeCountrySelect();
+            this.handleOnClose();
         };
         this.handleInputChange = (event) => {
             const input = event.target;
             this.inputValue = input.value;
         };
-        this.closeCountrySelect = () => { };
+        this.handleOnClose = () => { };
         this.inputValue = '';
     }
     render() {
-        var _a;
-        const { selectedCountryCode, shippingZoneCountries } = localizationStore;
+        const { shippingZoneCountries } = localizationStore;
         const countries = shippingZoneCountries
             ? Object.values(shippingZoneCountries)
             : [];
@@ -32,11 +30,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: 'ddd9aaea7997423d9e5302158e95fc7614b50138', class: "zonos--elements", style: {
+        return (h(Host, { key: 'fb1115a06814daaf8ebb7d9e282fdd1bd944121f', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'c847863dce4998919ea6ed9fd14490173bc41928', class: "zonos--country-select" }, h("zonos-v-stack", { key: '59601481559a5348d49faa3bb37087464b487d2b' }, h("div", { key: '29ba7a85217df739ac29ede069bbe2dd2b19cfac', class: "zonos--country-select-header" }, h("zonos-button", { key: '02f705c0403182b24e8657791b51c5e67879681d', class: "zonos--country-select-back", color: "blue-600", icon: h("zonos-icon", { color: "blue-600", content: ArrowLeftBlue, size: 18 }), onClick: () => this.closeCountrySelect(), variant: "subtle" }, translate('Back')), h("zonos-text", { key: '1a12fd2978f70e7cff4b8871a90e80e4b511be6a' }, shippingZoneCountries &&
-            selectedCountryCode &&
-            ((_a = shippingZoneCountries[selectedCountryCode]) === null || _a === void 0 ? void 0 : _a.displayName))), h("zonos-v-stack", { key: '8c2f3da67b479d618d6837a5811b6cede4fe4517', spacing: 8 }, h("input", { key: '989879f65463f5c118e5f9906127546436d5f40c', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Enter country", value: this.inputValue }), h("div", { key: 'f6ddf1629ad299053f949b8ff36bc126b622bb91' }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--hello-country-flag", countryCode: country.code }), h("zonos-text", { color: "gray-800" }, country.displayName))))))))));
+            } }, 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 })))))))));
     }
     static get is() { return "zonos-country-select"; }
     static get encapsulation() { return "shadow"; }
@@ -52,7 +48,7 @@ export class ZonosCountrySelect {
     }
     static get properties() {
         return {
-            "closeCountrySelect": {
+            "handleOnClose": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {

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

@@ -6,9 +6,9 @@ export class ZonosCustomMessage {
         this.message = '';
     }
     render() {
-        return (h(Host, { key: 'eb6b2a907ef77d5e2da0d9cb1bee4b77f814e5cb', class: "zonos--elements", style: {
+        return (h(Host, { key: '6c16aa29406415995c2289c2fe3d22dbe08fbd23', 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", { 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", content: this.icon }), h("zonos-text", null, this.message))))));
     }
     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: 'deb6bd5cdd044f1ca4e2b04484b0b54a40574b4f', class: classes([
+        return (h(Host, { key: 'dd232b16db7f6a6216f91af19c8b735b7eb528c7', 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: '10ed0a3736547ef162a2b439bb81ddffc0bc920d', class: "zonos--backdrop" }), h("div", { key: '895ed2094a0b0863ba13fdbc46a8d9071f1330b8', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '8d83b4cc34a360f7e943776869fc5388576fb0f7', 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", { content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: '4c04cafeda45b8e4b6abc622e140c71507449f57', class: classes([
+            } }, 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([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '524448bf4beb9024750c94d280c874f032de7902' })), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
+            ]) }, h("slot", { key: 'e8acb4a5e48ad4a0aeb057799f5abeb56eb8d1ea' })), 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-icon/zonos-icon.js

@@ -3,7 +3,7 @@ import { zonosStoreFontFamily } from "../../store/zonosStore";
 export class ZonosIcon {
     constructor() {
         this.autoHeight = false;
-        this.color = 'gray-1200';
+        this.iconColor = 'gray-1200';
         this.content = undefined;
         this.size = 24;
     }
@@ -13,7 +13,7 @@ export class ZonosIcon {
         }
         this.el.shadowRoot.innerHTML = this.content;
         return (h(Host, { class: "zonos--elements", style: {
-                '--color': `var(--amino-${this.color})`,
+                '--color': `var(--amino-${this.iconColor})`,
                 '--font-family': zonosStoreFontFamily(),
                 '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
                 '--width': `${this.size}px`,
@@ -54,7 +54,7 @@ export class ZonosIcon {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "color": {
+            "iconColor": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -77,7 +77,7 @@ export class ZonosIcon {
                         }],
                     "text": "Color of the SVG"
                 },
-                "attribute": "color",
+                "attribute": "icon-color",
                 "reflect": false,
                 "defaultValue": "'gray-1200'"
             },

package/dist/collection/components/common/zonos-language-select/assets/greenCheckDuotone.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99996 2.6665C5.05444 2.6665 2.66663 5.05432 2.66663 7.99984C2.66663 10.9454 5.05444 13.3332 7.99996 13.3332C10.9455 13.3332 13.3333 10.9454 13.3333 7.99984C13.3333 5.05432 10.9455 2.6665 7.99996 2.6665Z" fill="#AFF8C3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1403 6.10535C10.3582 6.27488 10.3975 6.58902 10.228 6.80699L8.01055 9.65797C7.76436 9.97449 7.29646 10.0036 7.01291 9.72008L5.81307 8.52024C5.61781 8.32498 5.61781 8.0084 5.81307 7.81314C6.00833 7.61787 6.32492 7.61787 6.52018 7.81314L7.45301 8.74597L9.43862 6.19305C9.60815 5.97508 9.92229 5.93581 10.1403 6.10535Z" fill="#246627"/>
+</svg>

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'"
             },