@zonos/elements 1.3.5 → 1.3.7-alpha.0

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

@@ -5,7 +5,6 @@ import { classes } from "../../utils/classes";
 export class ZonosCard {
     constructor() {
         this.actions = undefined;
-        this.class = undefined;
         this.footerActions = undefined;
         this.footerContent = undefined;
         this.footerHeight = undefined;
@@ -13,9 +12,9 @@ export class ZonosCard {
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { key: 'f2f7929742862b9806ddc568155e7cddf954252e', style: {
+        return (h(Host, { key: '8581e04d45e7061bff02485ad9a9a22920b5fe84', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'ce3568d7ded3cfb9acb0f4ff3d4184a17b88f33b', class: classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: '3cc9f896df1899da73eab80dfbb3aac3a0046956' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
+            } }, h("div", { key: '5e2038438e0885602c2e15808a34d62e86c95035', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: 'b7cbddad1cc08256ae9192349fe5a44302b6d79e' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
             } }, h("div", null, this.footerContent), h("h-stack", { spacing: 8 }, this.footerActions))))));
@@ -54,23 +53,6 @@ export class ZonosCard {
                     "text": "The actions to display in the header of the card"
                 }
             },
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The CSS class to apply to the card element"
-                },
-                "attribute": "class",
-                "reflect": false
-            },
             "footerActions": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -0,0 +1,82 @@
+:host {
+  font-family: var(--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: inline-flex;
+}
+:host label {
+  display: inline-flex;
+  position: relative;
+  gap: var(--amino-space-8);
+  align-items: center;
+}
+:host label.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+:host input[type=checkbox] {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  width: 0;
+  height: 0;
+  top: 0;
+  z-index: -99999;
+}
+:host svg {
+  opacity: 0;
+}
+:host .checkmark-container {
+  height: var(--size);
+  width: var(--size);
+  background-color: transparent;
+  border: 1.5px solid var(--amino-gray-400);
+  position: relative;
+  border-radius: var(--border-radius, var(--amino-radius-4));
+}
+:host .checkmark {
+  opacity: 0;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  right: -1.5px;
+  bottom: -1.5px;
+  transition: 0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transform: scale(0.4);
+  background-color: var(--background-color);
+  border-radius: var(--border-radius, var(--amino-radius-4));
+}
+:host input[type=checkbox]:checked ~ .checkmark-container .checkmark {
+  opacity: 1;
+  transform: scale(1);
+}

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

@@ -0,0 +1,218 @@
+import { h, Host, } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
+import { isDarkColor } from "../../utils/isDarkColor";
+import { colorPrefixes } from "../../../types/styles/Color";
+export class ZonosCheckbox {
+    constructor() {
+        this.backgroundColor = 'blue';
+        this.label = undefined;
+        this.isChecked = false;
+        this.isDisabled = false;
+        this.size = 12;
+        this.fontSize = 'base';
+        this.borderStyle = undefined;
+    }
+    render() {
+        const isBackgroundVariable = colorPrefixes.includes(this.backgroundColor);
+        const backgroundColor = isBackgroundVariable
+            ? `var(--amino-${this.backgroundColor}-600)`
+            : this.backgroundColor;
+        const checkmarkColor = isBackgroundVariable
+            ? // use lighter color if the color is amino variable
+                `var(--amino-${this.backgroundColor}-200)`
+            : // if it's not an amino variable, use white if the background is dark, and dark if the background is light
+                !isDarkColor(backgroundColor)
+                    ? 'var(--amino-gray-800)'
+                    : 'var(--amino-gray-0)';
+        const borderStyle = getBorderRadius(this.borderStyle, '4px');
+        return (h(Host, { key: '86ab50028bec3f6a230b3a9492d06c1b2ce250fe', class: classes(['zonos--elements zonos--checkbox']), style: {
+                '--background-color': backgroundColor,
+                '--border-radius': borderStyle,
+                '--font-family': zonosStoreFontFamily(),
+                '--size': `${this.size}px`,
+            } }, h("label", { key: '88e87bb45739707a4e3da6d378ba491899dad76c', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'c877ba4a2bd43aa67c394136ef4b3c71096e75aa', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+                this.checkboxSelected.emit(e.target.checked);
+            }, type: "checkbox" }), h("span", { key: '0f40603a3cf90c38f37b05d7bfd8ed54623b07f4', class: "checkmark-container" }, h("svg", { key: '67945bb82cc05997bb40aeef14c5c0fd452a68af', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ac2d1db7ba5c1578dbe59f4ca9755a409ab24546', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { size: this.fontSize }, this.label)))));
+    }
+    static get is() { return "zonos-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| CheckboxColorPrefix\n    | (string & { _placeholder?: never })",
+                    "resolved": "\"blue\" | \"cyan\" | \"gray\" | \"green\" | \"orange\" | \"purple\" | \"red\" | string & { _placeholder?: undefined; }",
+                    "references": {
+                        "CheckboxColorPrefix": {
+                            "location": "import",
+                            "path": "src/types/styles/Color",
+                            "id": "src/types/styles/Color.ts::CheckboxColorPrefix"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "background color of the checkbox"
+                },
+                "attribute": "background-color",
+                "reflect": false,
+                "defaultValue": "'blue'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the checkbox"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "isChecked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the checkbox is checked"
+                },
+                "attribute": "is-checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the checkbox is disabled"
+                },
+                "attribute": "is-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "12 | 16 | 24",
+                    "resolved": "12 | 16 | 24",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the checkbox"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "12"
+            },
+            "fontSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Size",
+                    "resolved": "\"2xl\" | \"3xl\" | \"base\" | \"l\" | \"s\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "Size": {
+                            "location": "import",
+                            "path": "src/types/styles/Text",
+                            "id": "src/types/styles/Text.ts::Size"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Font size of the checkbox text"
+                },
+                "attribute": "font-size",
+                "reflect": false,
+                "defaultValue": "'base'"
+            },
+            "borderStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ElementsUiStyle",
+                    "resolved": "\"ROUNDED\" | \"SHARP\" | undefined",
+                    "references": {
+                        "ElementsUiStyle": {
+                            "location": "import",
+                            "path": "src/types",
+                            "id": "src/types/index.ts::ElementsUiStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "ROUNDED"
+                        }],
+                    "text": "The border style of the button"
+                },
+                "attribute": "border-style",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkboxSelected",
+                "name": "checkboxSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when the checkbox is changed"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -23,10 +23,23 @@ export class ZonosCollapse {
     }
     render() {
         this.height = this.el.scrollHeight;
-        return (h(Host, { key: 'fb0d16e7e638d45b3469d7f7d26cd3f3ce9bf318', class: 'zonos--elements zonos--collapse', style: {
+        if (!this.collapsed) {
+            // wait for the collapse animation to finish, then set overflow to visible
+            setTimeout(() => {
+                // if the element collapsed state is still not changed, set overflow to visible
+                if (!this.collapsed) {
+                    this.el.style.overflow = 'visible';
+                }
+            }, 300);
+        }
+        else {
+            // set overflow to hidden to prevent content from showing when collapsed
+            this.el.style.overflow = 'hidden';
+        }
+        return (h(Host, { key: 'cbec79617b603172a6c3c41d29ee093f61eead92', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '9da00237f8f14edd9c5bf4b68da545b8c7ab4786' }, h("iframe", { key: '402e19d6e96d019a4eccd49af6afdac428c9fae9', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'de6751ac4955c073cc34188ebe22fabed38f780d' }))));
+            } }, h("div", { key: '6e72b98c155ee436bbaabce3d7b58294bb6ccc7a' }, h("iframe", { key: 'ef3306219530d635fa320099727a3574d5800285', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'a66b3d6d08a12f0c184a5c4294afdb2c340fe95d' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,6 @@ import { classes } from "../../utils/classes";
 const FLAG_URL = process.env.NEXT_PUBLIC_FLAG_URL;
 export class ZonosCountryFlag {
     constructor() {
-        this.class = '';
         this.countryCode = localizationStore.selectedCountryCode;
         this.size = undefined;
     }
@@ -23,7 +22,7 @@ export class ZonosCountryFlag {
                 }
                 : {
                     '--font-family': font,
-                } }, h("div", { class: classes([`flag-container`, this.class]) }, h("div", { class: "flag-icon", style: { backgroundImage: `url(${flagUrl})` } }))));
+                } }, h("div", { class: classes([`flag-container`]) }, h("div", { class: "flag-icon", style: { backgroundImage: `url(${flagUrl})` } }))));
     }
     static get is() { return "zonos-country-flag"; }
     static get encapsulation() { return "shadow"; }
@@ -39,24 +38,6 @@ export class ZonosCountryFlag {
     }
     static get properties() {
         return {
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The class name for the flag"
-                },
-                "attribute": "class",
-                "reflect": false,
-                "defaultValue": "''"
-            },
             "countryCode": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/common/zonos-country-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-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>