@zonos/elements 1.3.15-alpha.3 → 1.3.16-alpha.0

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

@@ -32,8 +32,8 @@
 }
 
 :host .zonos--custom-message {
-  background: var(--amino-gray-50);
-  border-radius: var(--amino-radius-6);
+  background: var(--zonos-elements-gray-50);
+  border-radius: var(--zonos-elements-radius-6);
 }
 :host .zonos--custom-message .zonos--flex-message {
   display: flex;

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

@@ -8,9 +8,9 @@ export class ZonosCustomMessage {
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: '197958ea99ffdb3cfc291144129c20b01fdd8b11', class: "zonos--elements", style: {
+        return (h(Host, { key: 'c2cec226eb9236205d0c4b234bb393e4663d982f', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: 'c8ac70b6c21f6b412653a859661a07a3a07905c6', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '2efe05820fd9e5f23d48a9ac0c167d3ec41b34d1', class: "zonos--flex-message" }, h("zonos-icon", { key: '81577b44466ad6ed48b014fd20b441b3be96a70b', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: '16ba131ca7a8d80c81de6c38f3fbd11d872a8b2a', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: '51814b00b14061891914753a950b6a3dc852c0f0', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '4f7298eb552d9f0e1b6ded333c298df3d4fbbee2', class: "zonos--flex-message" }, h("zonos-icon", { key: '0a1fb171e1365a845e1e0855466058ced6c57f12', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'dd714a4f1fd3e1ebe55586c5c8c6941928eb2862', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,9 +41,9 @@
 :host .zonos--backdrop {
   width: 100vw;
   height: 100vh;
-  left: 0px;
-  top: 0px;
-  background: var(--amino-backdrop-color);
+  left: 0;
+  top: 0;
+  background: var(--zonos-elements-backdrop-color);
   z-index: -999;
   opacity: 0;
   visibility: hidden;
@@ -59,8 +59,8 @@
   align-items: center;
   justify-content: center;
   z-index: 10002;
-  background: white;
-  border-radius: var(--border-radius, var(--amino-radius-10));
+  background: var(--zonos-elements-gray-0);
+  border-radius: var(--border-radius, var(--zonos-elements-radius-10));
 }
 :host .zonos--dialog-layout {
   width: 100vw;
@@ -71,22 +71,22 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--amino-text-color);
+  color: var(--zonos-elements-text-color);
   visibility: hidden;
 }
 :host .zonos--dialog {
   position: relative;
   z-index: 10001;
-  background: var(--amino-gray-0);
+  background: var(--zonos-elements-gray-0);
   max-width: 90vw;
   max-height: 90vh;
   min-height: 500px;
   height: var(--height, auto);
   width: var(--width, auto);
-  border-radius: var(--border-radius, var(--amino-radius-10));
+  border-radius: var(--border-radius, var(--zonos-elements-radius-10));
   outline: none;
-  box-shadow: var(--amino-v3-shadow-xxl);
-  border: var(--amino-border);
+  box-shadow: var(--zonos-elements-v3-shadow-xxl);
+  border: var(--zonos-elements-border);
   display: flex;
   flex-direction: column;
 }
@@ -101,16 +101,16 @@
   flex-grow: 1;
 }
 :host .zonos--header .zonos--close-button {
-  width: var(--amino-size-md);
-  height: var(--amino-size-md);
+  width: var(--zonos-elements-size-md);
+  height: var(--zonos-elements-size-md);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border-radius: var(--amino-radius-10);
+  border-radius: var(--zonos-elements-radius-10);
 }
 :host .zonos--header .zonos--close-button:hover {
-  background: var(--amino-hover-color);
+  background: var(--zonos-elements-hover-color);
 }
 :host .zonos--body {
   padding: 8px 24px;

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

@@ -46,8 +46,10 @@ export class ZonosDialog {
         else {
             document.body.style.overflow = 'auto';
         }
-        const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { key: 'cfa43ca3e1e64bbc9fb81dd35f07b5a2a57ef5a7', class: classes([
+        const borderStyle = getBorderRadius({
+            overrideBorderStyle: this.borderStyle,
+        });
+        return (h(Host, { key: '48eb2701a74a7973d3502fd1fdc65ce85a6d71ed', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -58,10 +60,10 @@ export class ZonosDialog {
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, h("div", { key: '967accb9ec4e552bab62bbec21fd0319d68828dc', class: "zonos--backdrop" }), h("div", { key: '37041f00cd3a996510f25708460a91baa527ed74', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '571cfdac8125f10d380e06efc1464ddcaf1f335e', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '200e75be392f6e8745ebbf2ddfa74aaf3d027caa', class: "zonos--loading" }, h("zonos-spinner", { key: 'a5d5a0d22a5d8ae5a22207716a7904d7031efa8d', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '37800b1fd96b0ff6df2724b4d62ea133470fae2c', class: "zonos--header" }, this.headerText && (h("h3", { key: 'eb0ef1b8c3d82d889f76b18b15d98a19fa1480a1', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '24b6945af71c51a35a09177e65d0b081abec75cb', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'a9d913ce8af53e60ffbf8eeb41b6d4372e0d389e', class: classes([
+            } }, h("div", { key: 'b408d792740d8854bab8ea60bd50ce894a75a836', class: "zonos--backdrop" }), h("div", { key: '04affcf48e0b209fa8dacc74039dad536ed9cd9b', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'c615792a60b2fa51a74af265b7c944a64e9ff18d', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '78d3b571f75c6037fdd694b4621fb9eae48d8ce0', class: "zonos--loading" }, h("zonos-spinner", { key: 'bd96037d5fe1717ebeae5b1ba27b96aa9ec9253d', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: 'cc057cbed99107d7d234d08d38e67cbf0140dc66', class: "zonos--header" }, this.headerText && (h("h3", { key: '587fff6b04981f1c24b44736b3b40044480f68ba', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '9a1944508996cd8ccb87f68ae175564528af3c4c', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'b563c1939c32489b63516cd4dd14df58a32a08cf', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '02c77f819baa6b1a684dfdf02b756ffa1fb55751' })), h("slot", { key: '0b469253c01c418d43d0865ae72d065d2a911aeb', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '39d66d136f630afbac7ced146d3a8ac60d3c9672' })), h("slot", { key: '5bace66c84150024d0203f89fbf8f5c263cb7472', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class ZonosIcon {
             return null;
         }
         const iconColor = isColorVariable(this.iconColor)
-            ? `var(--amino-${this.iconColor})`
+            ? `var(--zonos-elements-${this.iconColor})`
             : this.iconColor;
         this.el.shadowRoot.innerHTML = this.content;
         return (h(Host, { class: "zonos--elements", style: {

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

@@ -0,0 +1,176 @@
+: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 {
+  margin: 1px;
+  /**disabled state */
+}
+:host .zonos--label-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  background: var(--zonos-elements-input-background);
+  border-radius: var(--border-radius);
+  border: var(--zonos-elements-border);
+}
+:host .zonos--label-wrapper:hover {
+  border: 1px solid var(--zonos-elements-gray-300);
+}
+:host .zonos--floated-input {
+  box-sizing: border-box;
+  position: relative;
+  padding: 0 16px;
+  outline: none;
+  transition: var(--zonos-elements-transition);
+  width: 100%;
+  border-radius: var(--border-radius);
+  background: var(--zonos-elements-input-background);
+  border: 0;
+  order: 2;
+  font-weight: 500;
+}
+:host .zonos--floated-input :-internal-autofill-selected {
+  border-radius: var(--zonos-elements-radius-6) 0 0 var(--zonos-elements-radius-6);
+}
+:host .zonos--floated-input :-internal-autofill-selected + label + div {
+  background-color: #e8f0fe;
+}
+:host .zonos--floated-input.has-label {
+  padding: 16px 4px 8px 16px;
+}
+:host .zonos--floated-input.has-label.has-input-prefix {
+  padding-left: 0;
+}
+:host .zonos--floated-input.has-label.has-input-prefix + .zonos--floated-label::before {
+  margin-left: 0;
+}
+:host .zonos--floated-input:not(.has-label)::placeholder {
+  opacity: var(--zonos-elements-opacity-disabled);
+}
+:host .zonos--floated-input::placeholder {
+  transition: var(--zonos-elements-transition);
+  opacity: 0;
+}
+:host .zonos--floated-input:focus {
+  outline: none;
+}
+:host .zonos--floated-input:focus + .zonos--floated-label::after {
+  box-shadow: var(--zonos-elements-glow-blue);
+}
+:host .zonos--floated-input.has-error + .zonos--floated-label::after {
+  box-shadow: var(--zonos-elements-glow-error);
+}
+:host .zonos--floated-input.has-content::placeholder, :host .zonos--floated-input:focus::placeholder {
+  opacity: var(--zonos-elements-opacity-disabled);
+}
+:host .zonos--floated-input.has-content + .zonos--floated-label::before, :host .zonos--floated-input:focus + .zonos--floated-label::before {
+  top: 11px;
+  transform: scale(0.8);
+}
+:host .zonos--floated-input:-webkit-autofill, :host .zonos--floated-input:-moz-autofill {
+  background-color: var(--zonos-elements-input-background);
+  color: var(--zonos-elements-text-color);
+}
+:host .zonos--floated-label {
+  display: block;
+  max-height: 0;
+  pointer-events: none;
+  order: 1;
+}
+:host .zonos--floated-label::before {
+  content: attr(data-label);
+  color: var(--zonos-elements-gray-800);
+  position: absolute;
+  font-size: var(--zonos-elements-font-size-base);
+  line-height: var(--zonos-elements-font-size-base);
+  display: inline-block;
+  filter: blur(0);
+  transform-origin: left top;
+  transition: var(--zonos-elements-transition);
+  margin-left: 16px;
+  top: calc(50% - var(--zonos-elements-font-size-base) / 2);
+  z-index: 1;
+}
+:host .zonos--floated-label::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: var(--border-radius);
+}
+:host .disabled .zonos--floated-label {
+  pointer-events: inherit;
+}
+:host .disabled .zonos--floated-label::after {
+  cursor: not-allowed;
+  z-index: 1;
+}
+
+:host(.sm) {
+  height: calc(var(--zonos-elements-size-sm) - 2px);
+}
+:host(.sm) .zonos--floated-input.has-label {
+  padding-top: 13px;
+  padding-bottom: 0;
+}
+:host(.sm) .zonos--floated-input.has-label:focus + .zonos--floated-label::before, :host(.sm) .zonos--floated-input.has-label.has-content + .zonos--floated-label::before {
+  top: 2px;
+}
+
+:host(.md) {
+  height: calc(var(--zonos-elements-size-md) - 2px);
+}
+:host(.md) .zonos--floated-input.has-label {
+  padding-top: 20px;
+}
+:host(.md) .zonos--floated-input.has-label:focus + .zonos--floated-label::before, :host(.md) .zonos--floated-input.has-label.has-content + .zonos--floated-label::before {
+  top: 6px;
+}
+
+:host(.lg) {
+  height: calc(var(--zonos-elements-size-lg) - 2px);
+}
+:host(.lg) .zonos--floated-input.has-label:focus + .zonos--floated-label::before, :host(.lg) .zonos--floated-input.has-label.has-content + .zonos--floated-label::before {
+  top: 10px;
+}
+
+:host(.xl) {
+  height: calc(var(--zonos-elements-size-xl) - 2px);
+}
+:host(.xl) .zonos--floated-input.has-label {
+  padding-bottom: 2px;
+}

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

@@ -45,14 +45,14 @@
   padding: 8px;
   gap: 4px;
   align-items: center;
-  border-radius: var(--amino-radius-4);
+  border-radius: var(--zonos-elements-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);
+  background: var(--zonos-elements-gray-100);
 }
 @media (max-width: 400px) {
   :host .zonos--language-select .zonos--language-select-content {

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

@@ -47,7 +47,7 @@
   cursor: pointer;
   transition: all 0.3s ease;
   padding: 8px;
-  border-radius: var(--border-radius, var(--amino-radius-6));
+  border-radius: var(--border-radius, var(--zonos-elements-radius-6));
   opacity: 0;
   flex-shrink: 0.0001;
   transform: translateY(100%);
@@ -61,11 +61,11 @@
   flex-grow: 1000;
 }
 :host .zonos--notification-item.success {
-  background-color: var(--amino-green-700);
+  background-color: var(--zonos-elements-green-700);
 }
 :host .zonos--notification-item.error {
-  background-color: var(--amino-red-700);
+  background-color: var(--zonos-elements-red-700);
 }
 :host .zonos--notification-item.warning {
-  background-color: var(--amino-orange-700);
+  background-color: var(--zonos-elements-orange-700);
 }

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

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

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

@@ -37,7 +37,7 @@
 }
 :host input {
   margin: 0;
-  accent-color: var(--selected-border-color, var(--amino-blue-600));
+  accent-color: var(--selected-border-color, var(--zonos-elements-blue-600));
 }
 :host .zonos--shipping-rich-radio-item {
   display: flex;
@@ -46,21 +46,21 @@
   align-items: center;
   gap: 16px;
   cursor: pointer;
-  border: 1px solid var(--amino-gray-200);
+  border: 1px solid var(--zonos-elements-gray-200);
 }
 :host .zonos--shipping-rich-radio-item:first-child {
-  border-top-left-radius: var(--border-radius, var(--amino-radius-10));
-  border-top-right-radius: var(--border-radius, var(--amino-radius-10));
+  border-top-left-radius: var(--border-radius, var(--zonos-elements-radius-10));
+  border-top-right-radius: var(--border-radius, var(--zonos-elements-radius-10));
 }
 :host .zonos--shipping-rich-radio-item:last-child {
-  border-bottom-right-radius: var(--border-radius, var(--amino-radius-10));
-  border-bottom-left-radius: var(--border-radius, var(--amino-radius-10));
+  border-bottom-right-radius: var(--border-radius, var(--zonos-elements-radius-10));
+  border-bottom-left-radius: var(--border-radius, var(--zonos-elements-radius-10));
 }
 :host .zonos--shipping-rich-radio-item:not(:last-child) {
   border-bottom: none;
 }
 :host .zonos--shipping-rich-radio-item.selected {
-  outline: 1px solid var(--selected-border-color, var(--amino-blue-600));
+  outline: 1px solid var(--selected-border-color, var(--zonos-elements-blue-600));
   outline-offset: -1px;
 }
 :host .zonos--shipping-info {