@zonos/elements 1.3.5-alpha.0 → 1.3.6

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: '7ddd949ab91ed0c61ee34ce6ee80da54b3ba3664', 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: '1a8d98f7d836f253a21654c84ab0251969362e2f', 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.css

@@ -47,62 +47,68 @@
 :host circle.track {
   stroke: var(--amino-gray-200);
 }
-:host.black {
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+:host circle:not(.track) {
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+:host(.black) circle {
   stroke: var(--amino-spinner-stroke-black);
 }
-:host.black circle.track {
+:host(.black) circle.track {
   stroke: var(--amino-spinner-track-black);
 }
-:host.white {
+
+:host(.white) circle {
   stroke: var(--amino-spinner-stroke-white);
 }
-:host.white circle.track {
+:host(.white) circle.track {
   stroke: var(--amino-spinner-track-white);
 }
-:host.info {
+
+:host(.info) circle {
   stroke: var(--amino-blue-600);
 }
-:host.info circle.track {
+:host(.info) circle.track {
   stroke: var(--amino-blue-100);
 }
-:host.success {
+
+:host(.success) circle {
   stroke: var(--amino-green-600);
 }
-:host.success circle.track {
+:host(.success) circle.track {
   stroke: var(--amino-green-100);
 }
-:host.danger {
+
+:host(.danger) circle {
   stroke: var(--amino-red-600);
 }
-:host.danger circle.track {
+:host(.danger) circle.track {
   stroke: var(--amino-red-100);
 }
-:host.warning {
+
+:host(.warning) circle {
   stroke: var(--amino-orange-600);
 }
-:host.warning circle.track {
+:host(.warning) circle.track {
   stroke: var(--amino-orange-100);
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
-:host circle:not(.track) {
-  stroke-linecap: round;
-  animation: dash 1.5s ease-in-out infinite;
 }

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);
+}