@zonos/elements 1.3.15-alpha.2 → 1.3.15

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

@@ -0,0 +1,193 @@
+import { h, Host, } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
+export class ZonosInput {
+    constructor() {
+        this.inputValue = '';
+        this.inputLabel = undefined;
+        this.inputSize = 'md';
+        this.isDisabled = false;
+        this.isError = false;
+        this.inputPlaceholder = '';
+        this.value = this.inputValue;
+    }
+    onInputValueChange(newValue) {
+        this.value = newValue;
+        this.inputChange.emit(newValue);
+    }
+    render() {
+        return (h(Host, { key: '97f9a886695c81bf72ffa5cc4b7afc26e40a2694', class: classes([
+                'zonos--input zonos--elements',
+                this.inputSize,
+                this.isError && 'has-error',
+            ]), style: {
+                '--border-radius': getBorderRadius(),
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: 'ffc96e546684499a5272dd0f5b4b087b1f717353', class: classes([
+                'zonos--label-wrapper',
+                this.isDisabled && 'disabled',
+            ]) }, h("input", { key: '162556990fe4c93fc9400f7cf947d8fdbeffd2f1', class: classes([
+                'zonos--floated-input',
+                !!this.inputLabel && 'has-label',
+                this.inputValue && 'has-content',
+                this.isError && 'has-error',
+            ]), disabled: this.isDisabled, onInput: e => {
+                const input = e.target;
+                this.inputChange.emit(input.value);
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '9b73d42d50090f1ac761ccf27bd606d474cd8d53', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+    }
+    static get is() { return "zonos-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inputValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the input"
+                },
+                "attribute": "input-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "inputLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input label"
+                },
+                "attribute": "input-label",
+                "reflect": false
+            },
+            "inputSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg' | 'xl'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input size"
+                },
+                "attribute": "input-size",
+                "reflect": false,
+                "defaultValue": "'md'"
+            },
+            "isDisabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the input"
+                },
+                "attribute": "is-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error state of the input"
+                },
+                "attribute": "is-error",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "inputPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for the input"
+                },
+                "attribute": "input-placeholder",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "value": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "inputChange",
+                "name": "inputChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to emit when input value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "inputValue",
+                "methodName": "onInputValueChange"
+            }];
+    }
+}

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

@@ -37,13 +37,13 @@
 :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);
+  padding: 16px;
+  padding-top: 0px;
 }
 :host .zonos--language-select .zonos--language-select-content .zonos--language-select-button {
   display: flex;
-  padding: var(--amino-space-8);
-  gap: var(--amino-space-4);
+  padding: 8px;
+  gap: 4px;
   align-items: center;
   border-radius: var(--amino-radius-4);
   cursor: pointer;

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

@@ -16,9 +16,9 @@ export class ZonosLanguageSelect {
     }
     render() {
         const { selectedLocale } = localizationStore;
-        return (h(Host, { key: 'b17a55c8fe256cf1e484834700dec4ea512a0379', class: "zonos--elements", style: {
+        return (h(Host, { key: 'e1943addb44b8e06d5b4534865f403a721175cdd', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '0d8c6f5902f3f25c2528d88dd76b625807f2bd62', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'c82d962040885203b20f384a56990d9515afeba6', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'ac4a694a903eaa38886d929350b74b0c0114b61d', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, h("div", { key: '888a410d444424f4ffb06dd28e5151bca9269de2', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '59aa5ae5e685f65baa1c7b1a19c1000ab8cdac74', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '854c44fefe28f22fdd37b251d482ca6db46b0895', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "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"; }

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

@@ -10,11 +10,11 @@ export class ZonosLogo {
         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: 'c196e8372ff0f602b135c582a1a4cdf2ba75274d', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: 'c68b772cba1e8562b48a58bace45e0643bd18dcf', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: '668abac552ed1e133f29b0b0aa8f17d158c5441b', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: 'a3a48b9f4dc2401d543afe0d2334b5bd57aad4d6', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get is() { return "zonos-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,15 +38,15 @@
 :host .zonos--notification-items {
   position: fixed;
   z-index: 9999999;
-  bottom: var(--amino-space-24);
-  gap: var(--amino-space-8);
+  bottom: 24px;
+  gap: 8px;
   display: inline-flex;
   flex-direction: column;
 }
 :host .zonos--notification-item {
   cursor: pointer;
   transition: all 0.3s ease;
-  padding: var(--amino-space-8);
+  padding: 8px;
   border-radius: var(--border-radius, var(--amino-radius-6));
   opacity: 0;
   flex-shrink: 0.0001;

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

@@ -45,9 +45,9 @@ export class ZonosNotification {
         }, 300);
     }
     render() {
-        return (h(Host, { key: '3567d975084d41ba075ccf92347adf31e200b41f', class: classes(['zonos--elements zonos--notification']), style: {
+        return (h(Host, { key: '17c08c90c6c1dfade4e43451c196127a0f53429e', class: classes(['zonos--elements zonos--notification']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'c01555f14621f43d515f0593ed5463d4aa9b1309', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
+            } }, h("div", { key: '6624419d86a5c7518539069dbc5c9d7c08262c75', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
             return (h("div", { "aria-hidden": "true", class: classes([
                     'zonos--notification-item',
                     notification.type,

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

@@ -35,7 +35,7 @@
   position: sticky;
   top: 0;
   background: var(--amino-surface-color);
-  padding: var(--amino-space-16);
+  padding: 16px;
 }
 :host .zonos--select-dialog-header-wrapper .zonos--select-dialog-header {
   position: relative;

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: 'c571a648772792abb553c87a9c238e36d2fd63fb', class: "zonos--elements", style: {
+        return (h(Host, { key: '7b7a5a39307cfacdfda4dd622d9b7e052013f80e', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: 'f8d2c7a95bb985e17c7c6fa4fdeb2d6c692dd266', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'dd87a6fd7d2f84e907b99a440e62b1260273ae0d', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'a5573f14f446c343bf7d5ed7f1c4564788435513', type: "boldLabel" }, this.label), h("zonos-button", { key: '3edfd71ce5da3a2366c856ca739aaea928a836de', 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: '155ec43e2791f871a4182edff8a6dd2304951f72' }))));
+            } }, h("zonos-v-stack", { key: '3b4152d041961241d48acfdfefe421b487fc63c1', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '9b72b53159ef2ea9ef3ac2682da24e6b2bc0f71b', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '9aee88932746e76c819d1e40ed45ba3c44a74a0a', type: "boldLabel" }, this.label), h("zonos-button", { key: '5e794ef5039bbff4f8cd52bb942a8f6c655adbe7', 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: 'ee4e5657d5034a4068b52d1f4e3a8971ccbee626' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.css

@@ -42,9 +42,9 @@
 :host .zonos--shipping-rich-radio-item {
   display: flex;
   flex: 1;
-  padding: var(--amino-space-16);
+  padding: 16px;
   align-items: center;
-  gap: var(--amino-space-16);
+  gap: 16px;
   cursor: pointer;
   border: 1px solid var(--amino-gray-200);
 }

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.js

@@ -16,7 +16,9 @@ export class ZonosShippingRichRadio {
                 ? `var(--amino-${usedColor})`
                 : usedColor;
             return {
-                '--border-radius': getBorderRadius(this.borderStyle),
+                '--border-radius': getBorderRadius({
+                    overrideBorderStyle: this.borderStyle,
+                }),
                 '--selected-border-color': secondaryColor || 'unset',
             };
         };
@@ -37,7 +39,7 @@ export class ZonosShippingRichRadio {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a1c2ace211e4d0b9d63a784028cc725bab7229e7', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+        return (h(Host, { key: 'a11e7be647b06e96a356361b6a8674eb6fd5d217', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             var _a;
             const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
             return (h("div", { "aria-hidden": "true", class: classes([

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

@@ -42,6 +42,7 @@ export class ZonosText {
             }
         };
         return (h(Host, { class: classes([
+                'zonos--elements',
                 `zonos--text-size-${textSize}`,
                 `zonos--text-weight-${textWeight}`,
             ]), style: {

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

@@ -39,7 +39,7 @@
   bottom: 100%;
   left: 0;
   width: max-content;
-  padding: var(--amino-space-12);
+  padding: 12px;
   background-color: var(--amino-gray-1200);
   opacity: 0;
   transform: scale(0);

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: '3b1bc52074428e85d2e3939b0fb6dbf4e8146e1c', class: "zonos--elements" }, h("div", { key: 'ded9a789ec041c9bd01c4a225ad0706a097c2215', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '2052001f18e774bf5f364f2f94fb83fbc161e510' }), h("div", { key: 'ed207e64c5361aadf6deb25574b736bbbb32cf49', class: classes([
+        return (h(Host, { key: '39503dadb0422477303a6715a744478d765e6ecf', class: "zonos--elements" }, h("div", { key: '834be19e46353d018bf827327f418d3e82502cf5', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '7c8f731f548d1bcf750615be450d93004e83a369' }), h("div", { key: 'b7f02a3057f2d2f6eeb65715e64783b48cab71ea', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: 'c2b064cac7a7851bbb8cd55ec116655160fffe6b', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'e03b47929a5b1856b6770e97403c85088d6a6c77', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: 'f65ede18a38c299d389403400a4ae00a0387e2cb', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'eb69da57b2e4f0e9be31801101c079618ac30148', 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: '39a71bdb43f87fd7beec0370aa384a94c7603417', style: {
+        return (h(Host, { key: 'd6e16e46c900ee9e15cb1664a1f07133b9e82135', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '37ef89d4d2aecfebbf6a47f1754ce5f45fcd2566', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'd34be5394fef1bf5e7f37cb6dbd468ae48454df8' }))));
+            } }, h("div", { key: 'f634995e617314160ecf5a432958207a43a40201', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'aa7bca0df7412bb0b8913e02ffd3617a511b9c8c' }))));
     }
     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: '25e0ed1ec26c0b3b3d8539ccb58f914eac9301c8' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '589c084e9acc84525aa5db6036d13741ed656e26' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

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

@@ -85,7 +85,7 @@
   border-top-left-radius: 30px;
   border-bottom-left-radius: 30px;
   left: 0;
-  transform: translateX(calc(-100% + var(--amino-space-16)));
+  transform: translateX(calc(-100% + 16px));
   width: fit-content;
   border-top: var(--amino-border);
   border-bottom: var(--amino-border);
@@ -109,7 +109,7 @@
 :host .zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
   max-width: 100vw;
   padding: 0 6px;
-  padding-right: var(--amino-space-16);
+  padding-right: 16px;
   border: var(--amino-border);
 }
 :host .zonos--hello-widget.zonos--hello-show-peek-message:not(.zonos--hello-widget-animate-from-left) {
@@ -127,13 +127,13 @@
   border-left: 0;
 }
 :host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
-  padding-left: var(--amino-space-16);
+  padding-left: 16px;
   padding-right: 6px;
   border-left: none;
 }
 :host .zonos--hello-widget.zonos--hello-widget-animate-from-left > .zonos--hello-message {
   order: 1;
-  transform: translateX(calc(100% - var(--amino-space-16)));
+  transform: translateX(calc(100% - 16px));
   right: 0;
   left: auto;
   border-top-left-radius: 0;
@@ -164,19 +164,19 @@
 @media (max-width: 768px) {
   :host .zonos--hello-widget {
     position: fixed;
-    bottom: var(--amino-space-32);
-    right: var(--amino-space-32);
+    bottom: 32px;
+    right: 32px;
     border-radius: var(--amino-radius-4);
-    padding: var(--amino-space-4);
+    padding: 4px;
     border: 1px solid transparent;
   }
   :host .zonos--hello-widget.zonos--hello-widget-left {
-    left: var(--amino-space-32);
+    left: 32px;
     right: auto;
   }
   :host .zonos--hello-widget.zonos--hello-widget-top {
     bottom: auto;
-    top: var(--amino-space-32);
+    top: 32px;
   }
   :host .zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message > .zonos--hello-message {
     border: none;
@@ -209,8 +209,8 @@
     border-bottom-right-radius: var(--amino-radius-4);
   }
   :host .zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
-    padding-left: var(--amino-space-8);
-    padding-right: var(--amino-space-4);
+    padding-left: 8px;
+    padding-right: 4px;
   }
   :host .zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
     padding: 0 var(--amino-radius-4);
@@ -223,19 +223,19 @@
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget {
   position: fixed;
-  bottom: var(--amino-space-32);
-  right: var(--amino-space-32);
+  bottom: 32px;
+  right: 32px;
   border-radius: var(--amino-radius-4);
-  padding: var(--amino-space-4);
+  padding: 4px;
   border: 1px solid transparent;
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-left {
-  left: var(--amino-space-32);
+  left: 32px;
   right: auto;
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-widget-top {
   bottom: auto;
-  top: var(--amino-space-32);
+  top: 32px;
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-has-restrictions.zonos--hello-show-peek-message > .zonos--hello-message {
   border: none;
@@ -268,8 +268,8 @@
   border-bottom-right-radius: var(--amino-radius-4);
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message.zonos--hello-widget-animate-from-left > .zonos--hello-message {
-  padding-left: var(--amino-space-8);
-  padding-right: var(--amino-space-4);
+  padding-left: 8px;
+  padding-right: 4px;
 }
 :host .zonos--hello-mobile-override.zonos--hello-widget.zonos--hello-show-peek-message > .zonos--hello-message {
   padding: 0 var(--amino-radius-4);

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

@@ -31,9 +31,12 @@
   -webkit-font-smoothing: antialiased;
 }
 
-[data-theme=LIGHT],
-.zonos--elements {
+[data-theme=LIGHT] {
   color-scheme: light;
+}
+
+:root,
+[data-theme=LIGHT] {
   --amino-transition: all 0.2s ease-in-out 0s, visibility 0s;
   --amino-type-scale-base: 16px;
   --amino-glass-0: #10111600;
@@ -168,47 +171,6 @@
     0px 0px 0px 1px #dd314e inset,
     0px -1px 1px 1px rgba(221, 49, 78, 0.12) inset;
   --amino-opacity-disabled: 0.6;
-  --amino-space-negative-80: -5rem;
-  --amino-space-negative-76: -4.75rem;
-  --amino-space-negative-72: -4.5rem;
-  --amino-space-negative-68: -4.25rem;
-  --amino-space-negative-64: -4rem;
-  --amino-space-negative-60: -3.75rem;
-  --amino-space-negative-56: -3.5rem;
-  --amino-space-negative-52: -3.25rem;
-  --amino-space-negative-48: -3rem;
-  --amino-space-negative-44: -2.75rem;
-  --amino-space-negative-40: -2.5rem;
-  --amino-space-negative-36: -2.25rem;
-  --amino-space-negative-32: -2rem;
-  --amino-space-negative-28: -1.75rem;
-  --amino-space-negative-24: -1.5rem;
-  --amino-space-negative-20: -1.25rem;
-  --amino-space-negative-16: -1rem;
-  --amino-space-negative-12: -0.75rem;
-  --amino-space-negative-8: -0.5rem;
-  --amino-space-negative-4: -0.25rem;
-  --amino-space-0: 0;
-  --amino-space-4: 0.25rem;
-  --amino-space-8: 0.5rem;
-  --amino-space-12: 0.75rem;
-  --amino-space-16: 1rem;
-  --amino-space-20: 1.25rem;
-  --amino-space-24: 1.5rem;
-  --amino-space-28: 1.75rem;
-  --amino-space-32: 2rem;
-  --amino-space-36: 2.25rem;
-  --amino-space-40: 2.5rem;
-  --amino-space-44: 2.75rem;
-  --amino-space-48: 3rem;
-  --amino-space-52: 3.25rem;
-  --amino-space-56: 3.5rem;
-  --amino-space-60: 3.75rem;
-  --amino-space-64: 4rem;
-  --amino-space-68: 4.25rem;
-  --amino-space-72: 4.5rem;
-  --amino-space-76: 4.75rem;
-  --amino-space-80: 5rem;
   --amino-border: 1px solid var(--amino-border-color);
   --amino-border-blue: 1px solid var(--amino-blue-500);
   --amino-border-red: 1px solid var(--amino-red-400);
@@ -324,9 +286,7 @@
 }
 
 /* Night theme */
-[data-theme=DARK] .zonos--elements:not([data-theme=LIGHT]),
-.zonos--elements[data-theme=DARK],
-.zonos--elements [data-theme=DARK] {
+[data-theme=DARK] {
   color-scheme: dark;
   --amino-glass-0: #ffffff00;
   --amino-glass-50: #ffffff0a;
@@ -543,9 +503,7 @@
   --amino-spinner-stroke-white: #0c0c0c;
   /* Fix for dark mode surface hover color. Dark mode surfaces have a lighter color than day mode inverted to see shadows better. */
 }
-[data-theme=DARK] .zonos--elements:not([data-theme=LIGHT]) .elevated,
-.zonos--elements[data-theme=DARK] .elevated,
-.zonos--elements [data-theme=DARK] .elevated {
+[data-theme=DARK] .elevated {
   --amino-hover-color: var(--amino-gray-100);
 }
 
@@ -555,7 +513,7 @@
   justify-content: space-between;
   background: var(--primary-color, var(--amino-surface-color-secondary));
   border-top: var(--amino-border);
-  padding: var(--amino-space-12);
+  padding: 12px;
   align-items: center;
 }
 :host .zonos--hello-dialog-footer a {
@@ -567,10 +525,10 @@
 :host .zonos--hello-dialog-footer .zonos--hello-locale-wrapper {
   display: flex;
   align-items: center;
-  gap: var(--amino-space-8);
+  gap: 8px;
 }
 @media (max-width: 400px) {
   :host .zonos--hello-dialog-footer .zonos--hello-locale-wrapper {
-    gap: var(--amino-space-4);
+    gap: 4px;
   }
 }

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

@@ -17,9 +17,9 @@ export class ZonosHelloDialogFooter {
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
-        return (h(Host, { key: '6f6371c5650d77a11d8a2f049859446ffb39e78f', class: "zonos--elements" }, h("div", { key: '47efc7a11c14ac4fc60472baea2d43f132eb2b07', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (h(Host, { key: '73782964897f8b09fd603de0bdbaa8348a4117c7', class: "zonos--elements" }, h("div", { key: 'bbb22af415fd9ba14900eca3e7c1b07d5bb9e831', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
                 '--primary-color': (_c = this.appearanceSettings) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-            } }, h("a", { key: 'a34ae0513d778695aa5cc2051774e0105ec93c4e', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'e3e558d3759a2ccffa44e8b70603ec4860fe219a', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: 'f76d9dff90b3e95db704a43f48abfd12938bdd7c', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'b3430483773438b84a05fc1850c75231f25ecb5c', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '351024225e4fb74e321b64fbdfe5b6b471d71077', buttonColor: "gray-1200", 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: 'c4b098b21f8a6905f87457bfcfb5d1e0dee64470', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '64d86210a96b229ddfa932bb92678ab608eb59b9', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: 'be711084541626184d7c742a8df88c1bf61c30e4', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '2f1370424b58f393a81c2c0b71669d38782cf17e', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '724e7897179be3d852a661a7109a264bb32b01b8', buttonColor: "gray-1200", 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"; }

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

@@ -109,8 +109,8 @@
 }
 :host .zonos--hello-dialog .zonos--close-button {
   position: absolute;
-  right: var(--amino-space-8);
-  top: var(--amino-space-8);
+  right: 8px;
+  top: 8px;
   width: var(--amino-size-md);
   height: var(--amino-size-md);
   display: flex;
@@ -124,7 +124,7 @@
   border-radius: var(--amino-radius-6);
 }
 :host .zonos--hello-dialog .zonos--hello-dialog-content {
-  padding: var(--amino-space-16);
+  padding: 16px;
 }
 :host .zonos--hello-dialog .zonos--hello-dialog-content .zonos--hello-country-flag {
   border-radius: var(--amino-radius-4);
@@ -134,7 +134,7 @@
 :host .zonos--hello-dialog .zonos--flex-message {
   display: flex;
   align-items: center;
-  gap: var(--amino-space-12);
+  gap: 12px;
 }
 :host .zonos--hello-dialog.zonos--hello-dialog-mobile-override {
   position: sticky;