@zonos/elements 1.3.23 → 1.3.25-alpha.0

package/dist/collection/components/common/zonos-rest-state/zonos-rest-state.js

@@ -0,0 +1,102 @@
+import { getAssetPath, h, Host } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+export class ZonosRestState {
+    constructor() {
+        this.getImageRestState = () => {
+            const imageSrc = getAssetPath(`./assets/${this.restStateType}.png`);
+            return imageSrc;
+        };
+        this.restStateSubtitle = undefined;
+        this.restStateTitle = undefined;
+        this.restStateType = undefined;
+        this.isErrorImageLoad = false;
+    }
+    render() {
+        const imageUrl = this.getImageRestState();
+        return (h(Host, { key: '1bfff1095ec5c517b04106972431ac2e7f6355d9', class: classes(['zonos--elements zonos--restState']), style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: 'e4c9b3b63f73c8c9ed04e196369a888fdbece30a', class: "zonos--restState-image" }, h("img", { key: 'e7444fae5141035f415ae0255ce5ff1446910fa4', alt: this.restStateType, onError: () => {
+                this.isErrorImageLoad = true;
+            }, src: imageUrl })), h("div", { key: '2f1d1ac03dcf47d7fd7bc7014a8c4af0486d3a80', class: "content" }, h("zonos-text", { key: 'bf9fe66af7349c07c6fba5dd4e749a808b051fcc', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '2b9fc699b05557487ad8534f34857febb0defda8', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: 'fe7c44da5367b5b52abbbee2631a955544f41042', class: "action" }, h("slot", { key: '395e78af0e2dff6f0a98e7ac005509c3abb965fd' }))));
+    }
+    static get is() { return "zonos-rest-state"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-rest-state.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-rest-state.css"]
+        };
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "restStateSubtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The subtitle of the rest state"
+                },
+                "attribute": "rest-state-subtitle",
+                "reflect": false
+            },
+            "restStateTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the rest state"
+                },
+                "attribute": "rest-state-title",
+                "reflect": false
+            },
+            "restStateType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RestStateType",
+                    "resolved": "\"Boxes\" | \"Earth\" | \"EmptyBox\" | \"Lock\" | \"PigBank\" | \"Scribble\" | \"Search\" | \"Settings\" | \"ShoppingCart\" | \"SpilledCup\" | \"Switch\" | \"TaxId\" | \"Truck\" | \"Warning\"",
+                    "references": {
+                        "RestStateType": {
+                            "location": "import",
+                            "path": "src/components/utils/restStateType",
+                            "id": "src/components/utils/restStateType.ts::RestStateType"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of rest state"
+                },
+                "attribute": "rest-state-type",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isErrorImageLoad": {}
+        };
+    }
+}

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

@@ -8,9 +8,9 @@ export class ZonosSelectDialogHeader {
         this.label = '';
     }
     render() {
-        return (h(Host, { key: '6bbc81e8045153c49da17c4b999bc1992aa9f01d', class: "zonos--elements", style: {
+        return (h(Host, { key: 'aee08db0e889bd5a5b9084180f6ee038c120a3b2', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: 'c0184343c6cefd3c996695964800d242d1673ee1', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'ae13d39c8a0917df33aec34a10853892d9470a9c', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '32e9af076b72f63cb1ec0c92b7e77d3196572106', type: "boldLabel" }, this.label), h("zonos-button", { key: 'eb4d2f0cef4a2b0eafe628c19d0fcbac4f3493e6', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '98a6f0e4f44e74208b5e446ad8066b74b1f7beaa' }))));
+            } }, h("zonos-v-stack", { key: '565a273f0037418387c0868c74943c3325ab6c35', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '0d994f27c948e49c092d016a0f1d6e453f80f00a', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'ee7bb796e921b2a14fa6201c8f17d0dfd9f3a3c2', type: "boldLabel" }, this.label), h("zonos-button", { key: '0e3a6c9c2cc4b67a51015b2fb7345c47a0e5ef23', 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: 'ad9fb089fa4a571a5443431c0d686b4804d25b0a' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,10 +7,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: 'dd98e35a2295dd72209775ce1e63d6f653913466', class: "zonos--elements" }, h("div", { key: '4bee5ca82e3a493826b723f620baa6d7cf7af63a', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '1320496e6caed5f16d940f0e5119d5f19186f565' }), h("div", { key: '2a9b891c672d03cdbe8babf59312942e101704a7', class: classes([
+        return (h(Host, { key: '62f307eee14511a4d37aecd927a25f797e206d8f', class: "zonos--elements" }, h("div", { key: '8bcdbbbd4d9fffe487c975d2f42bc0e7ecc0d7a5', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '53413e70a522d44f044bf08154c933e8d2b6863e' }), h("div", { key: 'b3ff18f30520346abe71df2987763d08ccc21c3c', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '0146fad3f70fa07e9eb644b26d6dd65963a70c3d', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '36e76d4624927255679107ee47022b7314479441', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '72567e2ace426b1d45e46a7bb68aa17076fcf7d3', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '183b70f17a065b3eb3eef65df38bee2092c91582', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get is() { return "zonos-tooltip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,9 +7,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '3d0753111d525b29e1f36684c89b7216ee0b323f', style: {
+        return (h(Host, { key: '9b7115624d2e27b1c6da58ac16f6059d5cad71a9', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '95b732681743abc1b08b1b8bc722855c3c8e967a', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'b93347c5fb986a70f9f1d67ce2216bba84db7ba4' }))));
+            } }, h("div", { key: 'bd3ccd8700897292fd1a9ad40825c851a484fcf2', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '1c6fe3e6dc8eda9461eb90180535c9bd563a1840' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/component-template/zonos-component/zonos-component.js

@@ -10,7 +10,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: 'b51f2edddb50f8f6a868da28c73218fe6955d2e5' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'b2d57ce9356cd0d1454c7ef195fe0ac21f694b7b' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,490 +31,6 @@
   -webkit-font-smoothing: antialiased;
 }
 
-[data-theme=LIGHT] {
-  color-scheme: light;
-}
-
-:root,
-[data-theme=LIGHT] {
-  --zonos-elements-transition: all 0.2s ease-in-out 0s, visibility 0s;
-  --zonos-elements-type-scale-base: 16px;
-  --zonos-elements-glass-0: #10111600;
-  --zonos-elements-glass-50: #1011160a;
-  --zonos-elements-glass-100: #10111614;
-  --zonos-elements-glass-200: #10111626;
-  --zonos-elements-glass-300: #1011163d;
-  --zonos-elements-glass-400: #10111656;
-  --zonos-elements-glass-500: #10111670;
-  --zonos-elements-glass-600: #1011169b;
-  --zonos-elements-glass-700: #101116ad;
-  --zonos-elements-glass-800: #101116bc;
-  --zonos-elements-glass-900: #101116c6;
-  --zonos-elements-glass-1000: #101116dd;
-  --zonos-elements-glass-1100: #101116ef;
-  --zonos-elements-glass-1200: #101116f5;
-  --zonos-elements-gray-0: #ffffff;
-  --zonos-elements-gray-50: #f6f6f8;
-  --zonos-elements-gray-100: #ebebf0;
-  --zonos-elements-gray-200: #d9dae3;
-  --zonos-elements-gray-300: #bfc0ce;
-  --zonos-elements-gray-400: #a7a9b9;
-  --zonos-elements-gray-500: #888d9f;
-  --zonos-elements-gray-600: #676c7e;
-  --zonos-elements-gray-700: #575c6b;
-  --zonos-elements-gray-800: #484c5b;
-  --zonos-elements-gray-900: #383a48;
-  --zonos-elements-gray-1000: #2a2c37;
-  --zonos-elements-gray-1100: #1a1c23;
-  --zonos-elements-gray-1200: #101116;
-  --zonos-elements-blue-100: #e7f6fe;
-  --zonos-elements-blue-200: #c9e6fd;
-  --zonos-elements-blue-300: #a3cbfa;
-  --zonos-elements-blue-400: #7fa9f5;
-  --zonos-elements-blue-500: #5a80f1;
-  --zonos-elements-blue-600: #445eee;
-  --zonos-elements-blue-700: #3843c2;
-  --zonos-elements-blue-800: #2e3d94;
-  --zonos-elements-blue-900: #212f68;
-  --zonos-elements-blue-1000: #152141;
-  --zonos-elements-cyan-100: #d6fffe;
-  --zonos-elements-cyan-200: #c0f2f2;
-  --zonos-elements-cyan-300: #9be7e9;
-  --zonos-elements-cyan-400: #66d5db;
-  --zonos-elements-cyan-500: #3ec4d0;
-  --zonos-elements-cyan-600: #2ca0af;
-  --zonos-elements-cyan-700: #29818e;
-  --zonos-elements-cyan-800: #25646f;
-  --zonos-elements-cyan-900: #1d464e;
-  --zonos-elements-cyan-1000: #152d32;
-  --zonos-elements-red-100: #ffeceb;
-  --zonos-elements-red-200: #fdd0ce;
-  --zonos-elements-red-300: #faa9a9;
-  --zonos-elements-red-400: #f37c82;
-  --zonos-elements-red-500: #eb5c6c;
-  --zonos-elements-red-600: #de314f;
-  --zonos-elements-red-700: #bc2442;
-  --zonos-elements-red-800: #922033;
-  --zonos-elements-red-900: #6c1b26;
-  --zonos-elements-red-1000: #481419;
-  --zonos-elements-orange-100: #fff1e0;
-  --zonos-elements-orange-200: #fcdab8;
-  --zonos-elements-orange-300: #f5c193;
-  --zonos-elements-orange-400: #f7a464;
-  --zonos-elements-orange-500: #f47a34;
-  --zonos-elements-orange-600: #e5591a;
-  --zonos-elements-orange-700: #bd3c1c;
-  --zonos-elements-orange-800: #94301c;
-  --zonos-elements-orange-900: #6b2a1a;
-  --zonos-elements-orange-1000: #401d12;
-  --zonos-elements-green-100: #defde8;
-  --zonos-elements-green-200: #aff8c3;
-  --zonos-elements-green-300: #81ef98;
-  --zonos-elements-green-400: #57db6c;
-  --zonos-elements-green-500: #39c049;
-  --zonos-elements-green-600: #2ca03f;
-  --zonos-elements-green-700: #288129;
-  --zonos-elements-green-800: #246627;
-  --zonos-elements-green-900: #1d4920;
-  --zonos-elements-green-1000: #153219;
-  --zonos-elements-purple-100: #edebff;
-  --zonos-elements-purple-200: #dcd2fe;
-  --zonos-elements-purple-300: #ceb5fd;
-  --zonos-elements-purple-400: #c699fa;
-  --zonos-elements-purple-500: #b25cf5;
-  --zonos-elements-purple-600: #ab26ed;
-  --zonos-elements-purple-700: #901cca;
-  --zonos-elements-purple-800: #6e1e99;
-  --zonos-elements-purple-900: #471d68;
-  --zonos-elements-purple-1000: #2c1844;
-  --zonos-elements-transparent-white: #ffffffbb;
-  --zonos-elements-transparent-black: #101116bb;
-  --zonos-elements-transparent-gray-600: #6a6d771f;
-  --zonos-elements-v3-shadow-base: 0px 1px 3px 0px rgba(10, 10, 11, 0.1),
-    0px 1px 2px rgba(10, 10, 11, 0.06), 0px 0px 0px 1px rgba(110, 110, 120, 0.1);
-  --zonos-elements-v3-shadow-medium: 0px 2px 4px 0px rgba(10, 10, 11, 0.06),
-    0px 4px 6px rgba(10, 10, 11, 0.1), 0px 0px 0px 1px rgba(110, 110, 120, 0.1);
-  --zonos-elements-v3-shadow-large: 0px 4px 6px 0px rgba(10, 10, 11, 0.05),
-    0px 10px 15px rgba(10, 10, 11, 0.1),
-    0px 0px 0px 1px rgba(110, 110, 120, 0.1);
-  --zonos-elements-v3-shadow-xl: 0px 10px 10px 0px rgba(12, 12, 13, 0.04),
-    0px 20px 25px rgba(10, 10, 11, 0.1),
-    0px 0px 0px 1px rgba(110, 110, 120, 0.1);
-  --zonos-elements-v3-shadow-xxl: 0px 32px 50px 0px rgba(10, 10, 11, 0.24),
-    0px 0px 0px 1px rgba(110, 110, 120, 0.1);
-  --zonos-elements-v3-shadow-inset: 0px 2px 4px rgba(0, 0, 0, 0.04),
-    0px 1px 0px 0px rgba(255, 255, 255, 1),
-    inset 0px 0px 8px rgba(0, 0, 0, 0.02),
-    inset 0px 0px 0px 0.5px rgba(0, 0, 0, 0.06),
-    inset 0px 2px 4px rgba(0, 0, 0, 0.04), inset 0px 1px 1px rgba(0, 0, 0, 0.04);
-  --zonos-elements-shadow-button-primary: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 1px 3px 0px rgba(68, 94, 238, 0.4);
-  --zonos-elements-shadow-button-success: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 1px 3px 0px rgba(43, 156, 77, 0.4);
-  --zonos-elements-shadow-button-danger: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 1px 3px 0px rgba(217, 33, 65, 0.4);
-  --zonos-elements-shadow-button-warning: 0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 1px 3px 0px rgba(229, 89, 26, 0.4);
-  --zonos-elements-button-focus-ring: 0 0 0 2px var(--zonos-elements-blue-600);
-  --zonos-elements-shadow-button-standard: 0px 1px 3px 0px
-      rgba(110, 110, 120, 0.12),
-    0px -1px 1px 1px rgba(0, 0, 0, 0.08) inset,
-    0px 0px 0px 1px rgba(106, 109, 119, 0.12) inset;
-  --zonos-elements-shadow-button-disabled: 0px 1px 3px 0px rgba(16, 17, 22, 0.2),
-    0px -1px 1px 1px rgba(0, 0, 0, 0.08) inset;
-  --zonos-elements-shadow-select-base: 0px 1px 3px 0px rgba(110, 110, 120, 0.12),
-    0px -1px 1px 1px rgba(0, 0, 0, 0.08) inset,
-    0px 0px 0px 1px rgba(106, 109, 119, 0.12) inset;
-  --zonos-elements-shadow-select-active: 0px 1px 3px 0px rgba(68, 94, 238, 0.4),
-    0px 0px 0px 1px #445eee inset,
-    0px -1px 1px 1px rgba(68, 94, 238, 0.12) inset;
-  --zonos-elements-shadow-select-error: 0px 1px 3px 0px rgba(221, 49, 78, 0.4),
-    0px 0px 0px 1px #dd314e inset,
-    0px -1px 1px 1px rgba(221, 49, 78, 0.12) inset;
-  --zonos-elements-opacity-disabled: 0.6;
-  --zonos-elements-border: 1px solid var(--zonos-elements-border-color);
-  --zonos-elements-border-blue: 1px solid var(--zonos-elements-blue-500);
-  --zonos-elements-border-red: 1px solid var(--zonos-elements-red-400);
-  --zonos-elements-border-cyan: 1px solid var(--zonos-elements-cyan-400);
-  --zonos-elements-border-orange: 1px solid var(--zonos-elements-orange-400);
-  --zonos-elements-border-green: 1px solid var(--zonos-elements-green-400);
-  --zonos-elements-border-purple: 1px solid var(--zonos-elements-purple-400);
-  --zonos-elements-border-amber: 1px solid var(--zonos-elements-amber-400);
-  --zonos-elements-border-transparent: 1px solid transparent;
-  --zonos-elements-border-subtle: 1px solid var(--zonos-elements-gray-100);
-  --zonos-elements-sidebar-color: var(--zonos-elements-gray-0);
-  --zonos-elements-header-color: var(--zonos-elements-gray-0);
-  --zonos-elements-danger: var(--zonos-elements-red-600);
-  --zonos-elements-danger-dark: var(--zonos-elements-red-700);
-  --zonos-elements-error: var(--zonos-elements-red-600);
-  --zonos-elements-primary: var(--zonos-elements-blue-600);
-  --zonos-elements-primary-light: var(--zonos-elements-blue-500);
-  --zonos-elements-primary-dark: var(--zonos-elements-blue-800);
-  --zonos-elements-success: var(--zonos-elements-green-600);
-  --zonos-elements-success-dark: var(--zonos-elements-green-700);
-  --zonos-elements-warning: var(--zonos-elements-orange-600);
-  --zonos-elements-warning-dark: var(--zonos-elements-orange-600);
-  --zonos-elements-glow-error: 0 0 0 1px var(--zonos-elements-red-600);
-  --zonos-elements-glow-blue: 0 0 0 1px var(--zonos-elements-primary);
-  --zonos-elements-glow-cyan: 0 0 0 1px var(--zonos-elements-cyan-600);
-  --zonos-elements-glow-red: 0 0 0 1px var(--zonos-elements-red-600);
-  --zonos-elements-glow-orange: 0 0 0 1px var(--zonos-elements-orange-600);
-  --zonos-elements-glow-green: 0 0 0 1px var(--zonos-elements-green-600);
-  --zonos-elements-glow-purple: 0 0 0 1px var(--zonos-elements-purple-600);
-  --zonos-elements-page-background: var(--zonos-elements-gray-0);
-  --zonos-elements-border-color: var(--zonos-elements-gray-200);
-  --zonos-elements-hover-color: var(--zonos-elements-gray-50);
-  --zonos-elements-text-color: var(--zonos-elements-gray-1200);
-  --zonos-elements-text-color-secondary: var(--zonos-elements-gray-800);
-  --zonos-elements-focus-button-standard: 0px 0px 0px 1px
-      var(--zonos-elements-transparent-gray-600) inset,
-    var(--zonos-elements-button-focus-ring);
-  --zonos-elements-focus-button: 0px 0px 0px 1px var(--zonos-elements-gray-0)
-      inset,
-    var(--zonos-elements-button-focus-ring);
-  --zonos-elements-surface-color: var(--zonos-elements-gray-0);
-  --zonos-elements-surface-color-secondary: var(--zonos-elements-gray-50);
-  --zonos-elements-backdrop-color: #000000;
-  --zonos-elements-raised-surface-color: var(--zonos-elements-gray-0);
-  --zonos-elements-raised-color-secondary: var(--zonos-elements-gray-50);
-  --zonos-elements-button-primary-hover: linear-gradient(
-    180deg,
-    #445eee 0%,
-    #364bd4 100%
-  );
-  --zonos-elements-button-success-hover: linear-gradient(
-    180deg,
-    #2b9c4d 0%,
-    #298549 100%
-  );
-  --zonos-elements-button-danger-hover: linear-gradient(
-    180deg,
-    #d92141 0%,
-    #b4223d 100%
-  );
-  --zonos-elements-button-warning-hover: linear-gradient(
-    180deg,
-    #e5591a 0%,
-    #b6471b 100%
-  );
-  --zonos-elements-button-standard-hover: linear-gradient(
-    180deg,
-    #fff 0%,
-    #eaebed 100%
-  );
-  --zonos-elements-spinner-track-black: rgba(0, 0, 0, 0.3);
-  --zonos-elements-spinner-stroke-black: #0c0c0c;
-  --zonos-elements-spinner-track-white: rgba(255, 255, 255, 0.3);
-  --zonos-elements-spinner-stroke-white: #ffffff;
-  --zonos-elements-appbar-height: 55px;
-  --zonos-elements-sidebar-width: 232px;
-  --zonos-elements-elevation-0: 0;
-  --zonos-elements-elevation-100: 100;
-  --zonos-elements-elevation-200: 200;
-  --zonos-elements-elevation-300: 300;
-  --zonos-elements-elevation-400: 400;
-  --zonos-elements-elevation-500: 500;
-  --zonos-elements-dialog-elevation: var(--zonos-elements-elevation-400);
-  --zonos-elements-toast-elevation: var(--zonos-elements-elevation-500);
-  --zonos-elements-appbar-elevation: var(--zonos-elements-elevation-500);
-  --zonos-elements-size-xl: 56px;
-  --zonos-elements-size-lg: 48px;
-  --zonos-elements-size-md: 40px;
-  --zonos-elements-size-sm: 32px;
-  --zonos-elements-radius-4: 4px;
-  --zonos-elements-radius-6: 6px;
-  --zonos-elements-radius-8: 8px;
-  --zonos-elements-radius-10: 10px;
-  --zonos-elements-radius-12: 12px;
-  --zonos-elements-font-size-3xl: 30px;
-  --zonos-elements-font-size-2xl: 24px;
-  --zonos-elements-font-size-xl: 20px;
-  --zonos-elements-font-size-l: 18px;
-  --zonos-elements-font-size-base-docs: 16px;
-  --zonos-elements-font-size-base: 13px;
-  --zonos-elements-font-size-s: 12px;
-  --zonos-elements-font-size-xs: 11px;
-  --zonos-elements-line-height-3xl: 48px;
-  --zonos-elements-line-height-2xl: 40px;
-  --zonos-elements-line-height-xl: 32px;
-  --zonos-elements-line-height-l: 24px;
-  --zonos-elements-line-height-base: 24px;
-  --zonos-elements-line-height-s: 16px;
-  --zonos-elements-line-height-xs: 12px;
-  --zonos-elements-font-sans: "Inter", -apple-system, BlinkMacSystemFont,
-    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif;
-  --zonos-elements-font-mono: Operator Mono, MonoLisa, Dank Mono, Menlo, Monaco,
-    Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
-    Courier New, monospace;
-  --zonos-elements-font-harmonized-codes: "Fira Code",
-    var(--zonos-elements-font-sans);
-  --zonos-elements-input-background: inherit;
-}
-
-/* Night theme */
-[data-theme=DARK] {
-  color-scheme: dark;
-  --zonos-elements-glass-0: #ffffff00;
-  --zonos-elements-glass-50: #ffffff0a;
-  --zonos-elements-glass-100: #ffffff21;
-  --zonos-elements-glass-200: #ffffff26;
-  --zonos-elements-glass-300: #ffffff44;
-  --zonos-elements-glass-400: #ffffff51;
-  --zonos-elements-glass-500: #ffffff63;
-  --zonos-elements-glass-600: #ffffff8e;
-  --zonos-elements-glass-700: #ffffffa8;
-  --zonos-elements-glass-800: #ffffffc1;
-  --zonos-elements-glass-900: #ffffffd8;
-  --zonos-elements-glass-1000: #ffffffea;
-  --zonos-elements-glass-1100: #fffffff4;
-  --zonos-elements-glass-1200: #fffffffa;
-  --zonos-elements-gray-0: #101116;
-  --zonos-elements-gray-50: #1a1c23;
-  --zonos-elements-gray-100: #2a2c37;
-  --zonos-elements-gray-200: #383a48;
-  --zonos-elements-gray-300: #484c5b;
-  --zonos-elements-gray-400: #575c6b;
-  --zonos-elements-gray-500: #676c7e;
-  --zonos-elements-gray-600: #888d9f;
-  --zonos-elements-gray-700: #a7a9b9;
-  --zonos-elements-gray-800: #bfc0ce;
-  --zonos-elements-gray-900: #d9dae3;
-  --zonos-elements-gray-1000: #ebebf0;
-  --zonos-elements-gray-1100: #f6f6f8;
-  --zonos-elements-gray-1200: #ffffff;
-  --zonos-elements-blue-100: #152141;
-  --zonos-elements-blue-200: #212f68;
-  --zonos-elements-blue-300: #2e3d94;
-  --zonos-elements-blue-400: #3843c2;
-  --zonos-elements-blue-500: #445eee;
-  --zonos-elements-blue-600: #5a80f1;
-  --zonos-elements-blue-700: #7fa9f5;
-  --zonos-elements-blue-800: #a8cefa;
-  --zonos-elements-blue-900: #c9e6fd;
-  --zonos-elements-blue-1000: #e7f6fe;
-  --zonos-elements-cyan-100: #152d32;
-  --zonos-elements-cyan-200: #1d464e;
-  --zonos-elements-cyan-300: #25646f;
-  --zonos-elements-cyan-400: #29818e;
-  --zonos-elements-cyan-500: #2ca0af;
-  --zonos-elements-cyan-600: #3ec4d0;
-  --zonos-elements-cyan-700: #66d5db;
-  --zonos-elements-cyan-800: #9be7e9;
-  --zonos-elements-cyan-900: #c0f2f2;
-  --zonos-elements-cyan-1000: #d6fffe;
-  --zonos-elements-red-100: #481419;
-  --zonos-elements-red-200: #6c1b26;
-  --zonos-elements-red-300: #922033;
-  --zonos-elements-red-400: #bc2442;
-  --zonos-elements-red-500: #de314f;
-  --zonos-elements-red-600: #eb5c6c;
-  --zonos-elements-red-700: #f37c82;
-  --zonos-elements-red-800: #faa9a9;
-  --zonos-elements-red-900: #fdd0ce;
-  --zonos-elements-red-1000: #ffeceb;
-  --zonos-elements-orange-100: #401d12;
-  --zonos-elements-orange-200: #6b2a1a;
-  --zonos-elements-orange-300: #94301c;
-  --zonos-elements-orange-400: #bd3c1c;
-  --zonos-elements-orange-500: #e5591a;
-  --zonos-elements-orange-600: #f47a34;
-  --zonos-elements-orange-700: #f7a464;
-  --zonos-elements-orange-800: #f5c193;
-  --zonos-elements-orange-900: #fcdab8;
-  --zonos-elements-orange-1000: #fff1e0;
-  --zonos-elements-green-100: #153219;
-  --zonos-elements-green-200: #1d4920;
-  --zonos-elements-green-300: #246627;
-  --zonos-elements-green-400: #288129;
-  --zonos-elements-green-500: #2ca03f;
-  --zonos-elements-green-600: #39c049;
-  --zonos-elements-green-700: #57db6c;
-  --zonos-elements-green-800: #81ef98;
-  --zonos-elements-green-900: #aff8c3;
-  --zonos-elements-green-1000: #defde8;
-  --zonos-elements-purple-100: #2c1844;
-  --zonos-elements-purple-200: #471d68;
-  --zonos-elements-purple-300: #6e1e99;
-  --zonos-elements-purple-400: #901cca;
-  --zonos-elements-purple-500: #ab26ed;
-  --zonos-elements-purple-600: #b25cf5;
-  --zonos-elements-purple-700: #c699fa;
-  --zonos-elements-purple-800: #ceb5fd;
-  --zonos-elements-purple-900: #dcd2fe;
-  --zonos-elements-purple-1000: #edebff;
-  --zonos-elements-transparent-white: #101116bb;
-  --zonos-elements-transparent-black: #ffffffbb;
-  --zonos-elements-transparent-gray-600: #94969e1f;
-  --zonos-elements-v3-shadow-base: 0px 1px 4px 0px rgba(0, 0, 0, 0.7),
-    0px 1px 3px rgba(0, 0, 0, 0.6), 0px 0px 0px 1px rgba(255, 255, 255, 0.12);
-  --zonos-elements-v3-shadow-medium: 0px 2px 4px 0px rgba(0, 0, 0, 0.6),
-    0px 4px 6px rgba(0, 0, 0, 0.7), 0px 0px 0px 1px rgba(255, 255, 255, 0.12);
-  --zonos-elements-v3-shadow-large: 0px 4px 6px 0px rgba(0, 0, 0, 0.6),
-    0px 10px 15px rgba(0, 0, 0, 0.7), 0px 0px 0px 1px rgba(255, 255, 255, 0.12);
-  --zonos-elements-v3-shadow-xl: 0px 10px 10px 0px rgba(0, 0, 0, 0.6),
-    0px 20px 25px rgba(0, 0, 0, 0.7), 0px 0px 0px 1px rgba(255, 255, 255, 0.12);
-  --zonos-elements-v3-shadow-xxl: 0px 32px 50px 0px rgba(0, 0, 0, 0.7),
-    0px 0px 0px 1px rgba(255, 255, 255, 0.12);
-  --zonos-elements-v3-shadow-inset: 0px 2px 4px rgba(0, 0, 0, 0.24),
-    0px 1px 0px rgba(17, 17, 20, 1), inset 0px 0px 8px rgba(0, 0, 0, 0.16),
-    inset 0px 0px 0px 0.5px rgba(0, 0, 0, 0.24),
-    inset 0px 2px 4px rgba(0, 0, 0, 0.24), inset 0px 1px 1px rgba(0, 0, 0, 0.24),
-    0px 0px 6px rgba(255, 255, 255, 0.08),
-    0px 0px 0px 1px rgba(255, 255, 255, 0.12);
-  --zonos-elements-shadow-button-primary: 0px 0px 0px 1px #000,
-    0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 0px 0px 1px rgba(255, 255, 255, 0.08) inset,
-    0px 1px 3px 0px rgba(95, 146, 246, 0.4);
-  --zonos-elements-shadow-button-success: 0px 0px 0px 1px #000,
-    0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 0px 0px 1px rgba(255, 255, 255, 0.08) inset,
-    0px 1px 3px 0px rgba(86, 199, 111, 0.6);
-  --zonos-elements-shadow-button-danger: 0px 0px 0px 1px #000,
-    0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 0px 0px 1px rgba(255, 255, 255, 0.08) inset,
-    0px 1px 3px 0px rgba(249, 92, 103, 0.6);
-  --zonos-elements-shadow-button-warning: 0px 0px 0px 1px #000,
-    0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 0px 0px 1px rgba(255, 255, 255, 0.08) inset,
-    0px 1px 3px 0px rgba(248, 140, 83, 0.6);
-  --zonos-elements-button-focus-ring: 0 0 0 2px var(--zonos-elements-blue-600);
-  --zonos-elements-shadow-button-standard: 0px 0px 0px 1px #000,
-    0px -1px 1px 0px rgba(0, 0, 0, 0.4) inset,
-    0px 0px 2px 1px rgba(255, 255, 255, 0.08) inset,
-    0px 1px 3px 0px rgba(0, 0, 0, 0.8),
-    0px 0px 0px 1px rgba(148, 150, 158, 0.12) inset;
-  --zonos-elements-shadow-button-disabled: 0px 0px 0px 1px #000,
-    0px -1px 1px 0px rgba(0, 0, 0, 0.2) inset,
-    0px 0px 0px 1px rgba(255, 255, 255, 0.08) inset,
-    0px 1px 3px 0px rgba(255, 255, 255, 0);
-  --zonos-elements-shadow-select-base: 0px 0px 0px 1px #000,
-    0px -1px 1px 0px rgba(0, 0, 0, 0.4) inset,
-    0px 0px 2px 1px rgba(255, 255, 255, 0.08) inset,
-    0px 1px 3px 0px rgba(0, 0, 0, 0.8),
-    0px 0px 0px 1px rgba(148, 150, 158, 0.12) inset;
-  --zonos-elements-shadow-select-active: 0px 0px 0px 1px #000,
-    0px -1px 1px 1px rgba(114, 146, 243, 0.24) inset,
-    0px 0px 0px 1px #7292f3 inset, 0px 1px 3px 0px rgba(114, 146, 243, 0.4);
-  --zonos-elements-shadow-select-error: 0px 0px 0px 1px #000,
-    0px -1px 1px 1px rgba(235, 92, 108, 0.24) inset,
-    0px 0px 0px 1px #eb5c6c inset, 0px 1px 3px 0px rgba(235, 92, 108, 0.6);
-  --zonos-elements-border: 1px solid var(--zonos-elements-border-color);
-  --zonos-elements-border-blue: 1px solid var(--zonos-elements-blue-500);
-  --zonos-elements-border-red: 1px solid var(--zonos-elements-red-400);
-  --zonos-elements-border-cyan: 1px solid var(--zonos-elements-cyan-400);
-  --zonos-elements-border-orange: 1px solid var(--zonos-elements-orange-400);
-  --zonos-elements-border-green: 1px solid var(--zonos-elements-green-400);
-  --zonos-elements-border-purple: 1px solid var(--zonos-elements-purple-400);
-  --zonos-elements-border-amber: 1px solid var(--zonos-elements-amber-400);
-  --zonos-elements-border-transparent: 1px solid transparent;
-  --zonos-elements-border-subtle: 1px solid var(--zonos-elements-gray-100);
-  --zonos-elements-sidebar-color: var(--zonos-elements-gray-0);
-  --zonos-elements-header-color: var(--zonos-elements-gray-0);
-  --zonos-elements-danger: var(--zonos-elements-red-600);
-  --zonos-elements-danger-dark: var(--zonos-elements-red-700);
-  --zonos-elements-error: var(--zonos-elements-red-600);
-  --zonos-elements-primary: var(--zonos-elements-blue-600);
-  --zonos-elements-primary-light: var(--zonos-elements-blue-500);
-  --zonos-elements-primary-dark: var(--zonos-elements-blue-800);
-  --zonos-elements-success: var(--zonos-elements-green-600);
-  --zonos-elements-success-dark: var(--zonos-elements-green-700);
-  --zonos-elements-warning: var(--zonos-elements-orange-600);
-  --zonos-elements-warning-dark: var(--zonos-elements-orange-600);
-  --zonos-elements-glow-error: 0 0 0 1px var(--zonos-elements-red-600);
-  --zonos-elements-glow-blue: 0 0 0 1px var(--zonos-elements-primary);
-  --zonos-elements-glow-cyan: 0 0 0 1px var(--zonos-elements-cyan-600);
-  --zonos-elements-glow-red: 0 0 0 1px var(--zonos-elements-red-600);
-  --zonos-elements-glow-orange: 0 0 0 1px var(--zonos-elements-orange-600);
-  --zonos-elements-glow-green: 0 0 0 1px var(--zonos-elements-green-600);
-  --zonos-elements-glow-purple: 0 0 0 1px var(--zonos-elements-purple-600);
-  --zonos-elements-page-background: var(--zonos-elements-gray-0);
-  --zonos-elements-border-color: var(--zonos-elements-gray-200);
-  --zonos-elements-hover-color: var(--zonos-elements-gray-50);
-  --zonos-elements-text-color: var(--zonos-elements-gray-1200);
-  --zonos-elements-text-color-secondary: var(--zonos-elements-gray-800);
-  --zonos-elements-focus-button-standard: 0px 0px 0px 1px
-      var(--zonos-elements-transparent-gray-600) inset,
-    var(--zonos-elements-button-focus-ring);
-  --zonos-elements-focus-button: 0px 0px 0px 1px var(--zonos-elements-gray-0)
-      inset,
-    var(--zonos-elements-button-focus-ring);
-  --zonos-elements-surface-color: var(--zonos-elements-gray-50);
-  --zonos-elements-surface-color-secondary: var(--zonos-elements-gray-100);
-  --zonos-elements-backdrop-color: #000000;
-  --zonos-elements-raised-surface-color: #2c2e3899;
-  --zonos-elements-raised-color-secondary: var(--zonos-elements-gray-0);
-  --zonos-elements-button-primary-hover: linear-gradient(
-    180deg,
-    #5a80f1 0%,
-    #7fa9f5 100%
-  );
-  --zonos-elements-button-success-hover: linear-gradient(
-    180deg,
-    #39c049 0%,
-    #57db6c 100%
-  );
-  --zonos-elements-button-danger-hover: linear-gradient(
-    180deg,
-    #e9495c 0%,
-    #f37c82 100%
-  );
-  --zonos-elements-button-warning-hover: linear-gradient(
-    180deg,
-    #f47a34 0%,
-    #f7a464 100%
-  );
-  --zonos-elements-button-standard-hover: linear-gradient(
-    180deg,
-    #2c2e3800,
-    #2c2e38e5
-  );
-  --zonos-elements-spinner-track-black: rgba(255, 255, 255, 0.3);
-  --zonos-elements-spinner-stroke-black: #ffffff;
-  --zonos-elements-spinner-track-white: rgba(0, 0, 0, 0.3);
-  --zonos-elements-spinner-stroke-white: #0c0c0c;
-}
-
 :host .zonos--hello-dialog-footer {
   text-align: left;
   display: flex;

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

@@ -18,9 +18,9 @@ export class ZonosHelloDialogFooter {
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
         // Only use gray-0 (white) when the background color is dark (apply inverted color if the element is using dark theme variable)
         const mainColor = primaryColor && isDarkColor(primaryColor) ? 'white' : 'black';
-        return (h(Host, { key: 'a43121c2a6e9410362a570f9270f0b32c587200b', class: "zonos--elements" }, h("div", { key: 'f8bf4003c536abd60a903b808f1cd136bcebbd0a', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: 'f84d021e99271bd6a00da32edd35fdc5e0520c5a', class: "zonos--elements" }, h("div", { key: '96eeeb3df6698a18ae1439c3c35bc2337fe3e83c', class: "zonos--hello-dialog-footer", style: {
                 '--primary-color': primaryColor,
-            } }, h("a", { key: 'a3967d63fee336a53ede4dfe30f270d7c932dfed', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '72e918b1b6800d97df8f73487b7d72f8130312d7', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '9614506f8b3eac485fa19a1743ac6fc0117f9611', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '2e72f28b9b08d9a729340f6c0999bf48381bfe00', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'd4832d123d553b71eacda5f6ec66d0a36e1018d3', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: 'bb17cee42a3cb6d88e1b064649184c686ef41201', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '9183c662eb9d2dbb63b5149c338d013439767634', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: 'dd5bed89a4a2ae9386fa39fe15362c42fa7535ee', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'cbe6cb613fb2ca39f772363f8276cbc8c9e28b70', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'e05876aa9b1e56f945f810b82163335cd14202d1', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     static get is() { return "zonos-hello-dialog-footer"; }
     static get encapsulation() { return "shadow"; }