@zonos/elements 1.3.15 → 1.3.16-alpha.0

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

@@ -32,9 +32,9 @@
 }
 
 :host {
-  border-radius: var(--amino-radius-10);
+  border-radius: var(--zonos-elements-radius-10);
   padding: 16px;
-  background: var(--amino-gray-100);
+  background: var(--zonos-elements-gray-100);
 }
 :host .zonos--container {
   display: grid;
@@ -57,21 +57,21 @@
 }
 
 :host(.info) {
-  background-color: var(--amino-blue-100);
-  border: 1px solid var(--amino-blue-200);
+  background-color: var(--zonos-elements-blue-100);
+  border: 1px solid var(--zonos-elements-blue-200);
 }
 
 :host(.success) {
-  background-color: var(--amino-green-100);
-  border: 1px solid var(--amino-green-200);
+  background-color: var(--zonos-elements-green-100);
+  border: 1px solid var(--zonos-elements-green-200);
 }
 
 :host(.error) {
-  background-color: var(--amino-red-100);
-  border: 1px solid var(--amino-red-200);
+  background-color: var(--zonos-elements-red-100);
+  border: 1px solid var(--zonos-elements-red-200);
 }
 
 :host(.warning) {
-  background-color: var(--amino-orange-100);
-  border: 1px solid var(--amino-orange-200);
+  background-color: var(--zonos-elements-orange-100);
+  border: 1px solid var(--zonos-elements-orange-200);
 }

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

@@ -15,8 +15,8 @@ export class ZonosBanner {
     }
     render() {
         const renderContent = ({ color }) => {
-            const primaryColor = `var(--amino-${color}-800)`;
-            const secondaryColor = `var(--amino-${color}-300)`;
+            const primaryColor = `var(--zonos-elements-${color}-800)`;
+            const secondaryColor = `var(--zonos-elements-${color}-300)`;
             const [header, content] = [
                 this.bannerTitle,
                 h("slot", { onSlotchange: this.handleSlotChange }),

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

@@ -33,7 +33,7 @@
 
 :host {
   display: inline-flex;
-  border-radius: var(--border-radius, var(--amino-radius-10));
+  border-radius: var(--border-radius, var(--zonos-elements-radius-10));
 }
 :host .zonos--spinner-wrapper {
   position: absolute;
@@ -43,9 +43,9 @@
   bottom: 0;
   display: flex;
   align-items: center;
-  background-color: var(--amino-surface-color);
+  background-color: var(--zonos-elements-surface-color);
   justify-content: center;
-  border-radius: var(--amino-radius-10);
+  border-radius: var(--zonos-elements-radius-10);
   gap: 8px;
 }
 :host button {
@@ -57,11 +57,11 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  background-color: var(--amino-surface-color);
+  background-color: var(--zonos-elements-surface-color);
   border: none;
-  outline: 1px solid var(--amino-surface-color);
-  border-radius: var(--border-radius, var(--amino-radius-10));
-  transition: var(--amino-transition);
+  outline: 1px solid var(--zonos-elements-surface-color);
+  border-radius: var(--border-radius, var(--zonos-elements-radius-10));
+  transition: var(--zonos-elements-transition);
   font-weight: 500;
   user-select: none;
   font-family: var(--font-family, Inter), Inter;
@@ -69,7 +69,7 @@
   cursor: pointer;
   white-space: nowrap;
   padding: 8px 24px;
-  color: var(--color, var(--amino-gray-1200));
+  color: var(--color, var(--zonos-elements-gray-1200));
   margin: 1px;
   /** Button size */
 }
@@ -85,33 +85,33 @@
 }
 :host button[disabled] {
   cursor: not-allowed;
-  background-color: var(--background-color, var(--amino-gray-200));
+  background-color: var(--background-color, var(--zonos-elements-gray-200));
 }
 :host button[disabled] .zonos--spinner-wrapper {
-  background-color: var(--background-color, var(--amino-gray-200));
+  background-color: var(--background-color, var(--zonos-elements-gray-200));
 }
 :host button:active {
   transform: scale(0.99);
 }
 :host button.sm {
-  height: var(--amino-size-sm);
-  line-height: var(--amino-size-sm);
+  height: var(--zonos-elements-size-sm);
+  line-height: var(--zonos-elements-size-sm);
   padding: 4px 8px;
 }
 :host button.sm:not(.has-content).has-icon {
   padding: 0 4px;
 }
 :host button.md {
-  height: var(--amino-size-md);
-  line-height: var(--amino-size-md);
+  height: var(--zonos-elements-size-md);
+  line-height: var(--zonos-elements-size-md);
   padding: 8px 16px;
 }
 :host button.md:not(.has-content).has-icon {
   padding: 0 8px;
 }
 :host button.lg {
-  height: var(--amino-size-lg);
-  line-height: var(--amino-size-lg);
+  height: var(--zonos-elements-size-lg);
+  line-height: var(--zonos-elements-size-lg);
   padding: 12px 24px;
 }
 :host button.lg:not(.has-content).has-icon {
@@ -122,13 +122,13 @@
 }
 @media (max-width: 400px) {
   :host button:not(.only-icon).has-icon {
-    font-size: var(--amino-font-size-s);
+    font-size: var(--zonos-elements-font-size-s);
   }
 }
 :host button.override-background {
-  background-color: var(--background-color, var(--amino-gray-0));
-  color: var(--color, var(--amino-gray-1200));
-  outline: 1px solid var(--background-color, var(--amino-gray-0));
+  background-color: var(--background-color, var(--zonos-elements-gray-0));
+  color: var(--color, var(--zonos-elements-gray-1200));
+  outline: 1px solid var(--background-color, var(--zonos-elements-gray-0));
 }
 :host button.override-background:disabled {
   opacity: 0.8;
@@ -140,87 +140,87 @@
   /** Button variant */
 }
 :host button:not(.override-background).primary {
-  background: var(--amino-blue-600);
-  outline: 1px solid var(--amino-blue-600);
-  color: var(--amino-gray-0);
+  background: var(--zonos-elements-blue-600);
+  outline: 1px solid var(--zonos-elements-blue-600);
+  color: var(--zonos-elements-gray-0);
 }
 :host button:not(.override-background).primary:not([disabled]):hover {
-  background-image: var(--amino-button-primary-hover);
+  background-image: var(--zonos-elements-button-primary-hover);
 }
 :host button:not(.override-background).primary:not([disabled]):active {
-  background: var(--amino-blue-700);
+  background: var(--zonos-elements-blue-700);
 }
 :host button:not(.override-background).primary:not([disabled]):focus {
-  box-shadow: var(--amino-focus-button);
+  box-shadow: var(--zonos-elements-focus-button);
 }
 :host button:not(.override-background).primary[disabled] {
-  background: var(--amino-blue-400);
+  background: var(--zonos-elements-blue-400);
 }
 :host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper {
-  background-color: var(--amino-blue-400);
+  background-color: var(--zonos-elements-blue-400);
 }
 :host button:not(.override-background).primary .zonos--spinner-wrapper {
-  background-color: var(--amino-blue-600);
+  background-color: var(--zonos-elements-blue-600);
 }
 :host button:not(.override-background).success {
-  background: var(--amino-green-600);
-  outline: 1px solid var(--amino-green-600);
-  color: var(--amino-gray-0);
+  background: var(--zonos-elements-green-600);
+  outline: 1px solid var(--zonos-elements-green-600);
+  color: var(--zonos-elements-gray-0);
 }
 :host button:not(.override-background).success:not([disabled]):hover {
-  background-image: var(--amino-button-success-hover);
+  background-image: var(--zonos-elements-button-success-hover);
 }
 :host button:not(.override-background).success:not([disabled]):active {
-  background: var(--amino-green-700);
+  background: var(--zonos-elements-green-700);
 }
 :host button:not(.override-background).success:not([disabled]):focus {
-  box-shadow: var(--amino-focus-button);
+  box-shadow: var(--zonos-elements-focus-button);
 }
 :host button:not(.override-background).success[disabled] {
-  background: var(--amino-green-400);
+  background: var(--zonos-elements-green-400);
 }
 :host button:not(.override-background).success[disabled] .zonos--spinner-wrapper {
-  background-color: var(--amino-green-400);
+  background-color: var(--zonos-elements-green-400);
 }
 :host button:not(.override-background).danger {
-  background: var(--amino-red-600);
-  outline: 1px solid var(--amino-red-600);
-  color: var(--amino-gray-0);
+  background: var(--zonos-elements-red-600);
+  outline: 1px solid var(--zonos-elements-red-600);
+  color: var(--zonos-elements-gray-0);
 }
 :host button:not(.override-background).danger:not([disabled]):hover {
-  background-image: var(--amino-button-danger-hover);
+  background-image: var(--zonos-elements-button-danger-hover);
 }
 :host button:not(.override-background).danger:not([disabled]):active {
-  background: var(--amino-red-700);
+  background: var(--zonos-elements-red-700);
 }
 :host button:not(.override-background).danger:not([disabled]):focus {
-  box-shadow: var(--amino-focus-button);
+  box-shadow: var(--zonos-elements-focus-button);
 }
 :host button:not(.override-background).danger[disabled] {
-  background: var(--amino-red-400);
+  background: var(--zonos-elements-red-400);
 }
 :host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper {
-  background-color: var(--amino-red-400);
+  background-color: var(--zonos-elements-red-400);
 }
 :host button:not(.override-background).warning {
-  background: var(--amino-orange-600);
-  outline: 1px solid var(--amino-orange-600);
-  color: var(--amino-gray-0);
+  background: var(--zonos-elements-orange-600);
+  outline: 1px solid var(--zonos-elements-orange-600);
+  color: var(--zonos-elements-gray-0);
 }
 :host button:not(.override-background).warning:not([disabled]):hover {
-  background-image: var(--amino-button-warning-hover);
+  background-image: var(--zonos-elements-button-warning-hover);
 }
 :host button:not(.override-background).warning:not([disabled]):active {
-  background: var(--amino-orange-700);
+  background: var(--zonos-elements-orange-700);
 }
 :host button:not(.override-background).warning:not([disabled]):focus {
-  box-shadow: var(--amino-focus-button);
+  box-shadow: var(--zonos-elements-focus-button);
 }
 :host button:not(.override-background).warning[disabled] {
-  background: var(--amino-orange-400);
+  background: var(--zonos-elements-orange-400);
 }
 :host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper {
-  background-color: var(--amino-orange-400);
+  background-color: var(--zonos-elements-orange-400);
 }
 :host button:not(.override-background).subtle {
   background: transparent;
@@ -228,30 +228,30 @@
   outline: none;
 }
 :host button:not(.override-background).subtle:not([disabled]):hover {
-  background: var(--amino-gray-500);
-  color: var(--amino-gray-0);
+  background: var(--zonos-elements-gray-500);
+  color: var(--zonos-elements-gray-0);
 }
 :host button:not(.override-background).subtle:not([disabled]):active {
-  background: var(--amino-gray-200);
+  background: var(--zonos-elements-gray-200);
 }
 :host button:not(.override-background).subtle:focus {
-  box-shadow: var(--amino-button-focus-ring);
+  box-shadow: var(--zonos-elements-button-focus-ring);
 }
 :host button:not(.override-background).subtle[disabled] .content {
   opacity: 0.6;
 }
 :host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper {
-  background-color: var(--amino-gray-0);
+  background-color: var(--zonos-elements-gray-0);
 }
 :host button:not(.override-background).outline {
   background: transparent;
-  outline: 1px solid var(--amino-gray-700);
+  outline: 1px solid var(--zonos-elements-gray-700);
 }
 :host button:not(.override-background).outline:not([disabled]):hover {
-  background-color: var(--amino-gray-100);
+  background-color: var(--zonos-elements-gray-100);
 }
 :host button:not(.override-background).outline:not([disabled]):active {
-  background: var(--amino-gray-200);
+  background: var(--zonos-elements-gray-200);
 }
 :host .zonos--footer-country-flag {
   height: 18px;
@@ -259,9 +259,9 @@
   position: relative;
   overflow: hidden;
   border-radius: 30px;
-  box-shadow: var(--amino-v3-shadow-medium);
+  box-shadow: var(--zonos-elements-v3-shadow-medium);
   z-index: 10;
   justify-self: center;
-  border-radius: var(--amino-radius-4);
+  border-radius: var(--zonos-elements-radius-4);
   width: 24px;
 }

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

@@ -64,7 +64,7 @@ export class ZonosButton {
             : overrideBackground;
         // use the variable if it's a color variable, otherwise use the color
         const color = this.buttonColor && isColorVariable(this.buttonColor)
-            ? `var(--amino-${this.buttonColor})`
+            ? `var(--zonos-elements-${this.buttonColor})`
             : this.buttonColor;
         // set contrast color if background color is dark for all variants except subtle
         const contrastColor = this.variant !== 'subtle' &&
@@ -75,12 +75,12 @@ export class ZonosButton {
         const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
             ? 'white'
             : 'black';
-        return (h(Host, { key: '10bfc0423b83cc231fb22fdc430a1e5de66705fc', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: 'f5fd039f9ceeacae2448a09228bacc1bd6476be7', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': contrastColor,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: '1feab99eec063d35c53ed8c308ac7675988e565c', class: classes([
+            }) }, h("button", { key: 'bcd3c7bf52464dd1e7485cdac6b0e3defbf63af3', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -93,7 +93,7 @@ export class ZonosButton {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { key: '4c7ad847266e626638762aeecfec011fbac3189b', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'd433f729bb10922694c27314a31d5159095ef4a9', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '06f32dc6cb7e10b1acbbde8bf1a0f663ea458608', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { key: 'ea73d8c4b4973f3a8ed6e5b85c2236c0f20b4c6f', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'cdbe444e0aee0e64facd757a1b5ebd74208359e0', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'e7a46cced38d7916873e5dea8aff4c33e137cdf6', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,8 +32,8 @@
 }
 
 :host .styled-card {
-  border: var(--amino-border);
-  border-radius: var(--amino-radius-6);
+  border: var(--zonos-elements-border);
+  border-radius: var(--zonos-elements-radius-6);
   padding: var(--spacing, 24px);
   text-align: left;
 }
@@ -47,7 +47,7 @@
   display: flex;
   align-items: center;
   margin-bottom: var(--spacing, 24px);
-  border-bottom: var(--amino-border);
+  border-bottom: var(--zonos-elements-border);
   height: 65px;
   line-height: 65px;
   user-select: none;
@@ -62,10 +62,10 @@
   justify-content: space-between;
   margin: calc(var(--spacing, 24px) * -1);
   padding: var(--spacing, 24px);
-  border-top: var(--amino-border);
-  background: var(--amino-surface-color-secondary);
+  border-top: var(--zonos-elements-border);
+  background: var(--zonos-elements-surface-color-secondary);
   margin-top: var(--spacing, 24px);
-  border-bottom-left-radius: var(--amino-radius-8);
-  border-bottom-right-radius: var(--amino-radius-8);
+  border-bottom-left-radius: var(--zonos-elements-radius-8);
+  border-bottom-right-radius: var(--zonos-elements-radius-8);
   height: var(--footerHeight);
 }

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

@@ -61,9 +61,9 @@
   height: var(--size);
   width: var(--size);
   background-color: transparent;
-  border: 1.5px solid var(--amino-gray-400);
+  border: 1.5px solid var(--zonos-elements-gray-400);
   position: relative;
-  border-radius: var(--border-radius, var(--amino-radius-4));
+  border-radius: var(--border-radius, var(--zonos-elements-radius-4));
 }
 :host .checkmark {
   opacity: 0;
@@ -76,7 +76,7 @@
   transition: 0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transform: scale(0.4);
   background-color: var(--background-color);
-  border-radius: var(--border-radius, var(--amino-radius-4));
+  border-radius: var(--border-radius, var(--zonos-elements-radius-4));
 }
 :host input[type=checkbox]:checked ~ .checkmark-container .checkmark {
   opacity: 1;

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

@@ -23,27 +23,27 @@ export class ZonosCheckbox {
     render() {
         const isBackgroundVariable = colorPrefixes.includes(this.backgroundColor);
         const backgroundColor = isBackgroundVariable
-            ? `var(--amino-${this.backgroundColor}-600)`
+            ? `var(--zonos-elements-${this.backgroundColor}-600)`
             : this.backgroundColor;
         const checkmarkColor = isBackgroundVariable
             ? // use lighter color if the color is amino variable
-                `var(--amino-${this.backgroundColor}-200)`
+                `var(--zonos-elements-${this.backgroundColor}-200)`
             : // if it's not an amino variable, use white if the background is dark, and dark if the background is light
                 !isDarkColor(backgroundColor)
-                    ? 'var(--amino-gray-800)'
-                    : 'var(--amino-gray-0)';
+                    ? 'var(--zonos-elements-gray-800)'
+                    : 'var(--zonos-elements-gray-0)';
         const borderStyle = getBorderRadius({
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '8a3d5f66a7fb956dcb063f1b375bfb80856a80c4', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: 'be29586ffd5ae5227614622cfb402686ff5e0583', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: '95dc70a3821652e588706b570b40272a5f124b7f', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'ef61adbd2246fbb934a17b31ea62cd5ce4ff88f7', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: '091c2388668a94962d7b2bde4496856805f675e8', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'c0f66d11f63591b03631cb1c970c0db201d435e2', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '0587bf8dc5ee1477d91360e20d521efd9853c554', class: "checkmark-container" }, h("svg", { key: '3b7abf05f170aa2c4a31f76763c79ce975a543bc', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7d16a3850fbdca9fd3af7fa1f64a1715497b9c7b', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '305600e6860aeba8dfa0f3019d51d1bf91498310', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: 'ab6c4847d006a812829bd8e871520455da91c7b0', class: "checkmark-container" }, h("svg", { key: '617693bef302910db463cdf95b10700b72ea8d44', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '410728b7d5edf27966e660e598f166ce8292015e', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '1b9a21e7ef15ad34684453bc25cb3744ba183cd0', size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js

@@ -58,22 +58,22 @@ export class ZonosCheckoutProgressTabs {
                 backgroundColor: isColorVariable(this.backgroundColor)
                     ? window
                         .getComputedStyle(this.ele)
-                        .getPropertyValue(`--amino-${this.backgroundColor.replace('--amino-', '')}`)
+                        .getPropertyValue(`--zonos-elements-${this.backgroundColor.replace('--zonos-elements-', '')}`)
                     : this.backgroundColor,
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (h(Host, { key: '97800b058d8cb5617f8604c9c5702e2f8e8d943b', class: "zonos--elements", style: {
+        return (h(Host, { key: '5079903c5c31395bc5c92a4542d1f7ae78dc34b2', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: 'ceea1729e3b2776700ef8eb0c20cecd65005fa75', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            } }, h("div", { key: 'fabfe8836c827910907c4bceb6f99d65492b440b', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
             const isSelected = tab.value === selectedStep;
             return (h("button", { class: classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cartStore.step = tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, translate(tab.label))));
-        })), h("div", { key: '793ff1a1712c7fcdd309b58ce69f90e8ff14bfa7', class: "zonos--tab-progress" }, h("div", { key: '8fd846cade13695c42d8006427c4d7fd667edc37', class: "zonos--progress-bar-fill" }))));
+        })), h("div", { key: 'cfb1c57fadb793f5db34d02e48f3fe4c3a93a043', class: "zonos--tab-progress" }, h("div", { key: 'd02dd1cc3a5e5b7bc8395038e1cd75cb07104072', class: "zonos--progress-bar-fill" }))));
     }
     static get is() { return "zonos-checkout-progress-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,13 +37,13 @@
 :host .zonos--country-select .zonos--country-select-header {
   position: sticky;
   top: 0;
-  background: var(--amino-surface-color);
+  background: var(--zonos-elements-surface-color);
   z-index: 11;
 }
 :host .zonos--country-select .zonos--country-select-input {
   padding: 8px;
-  border-radius: var(--amino-radius-4);
-  border: var(--amino-border);
+  border-radius: var(--zonos-elements-radius-4);
+  border: var(--zonos-elements-border);
 }
 :host .zonos--country-select .zonos--country-select-content {
   padding: 16px;
@@ -54,28 +54,28 @@
   gap: 16px;
   padding: 8px;
   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--country-select .zonos--country-select-country:hover {
-  background: var(--amino-gray-100);
+  background: var(--zonos-elements-gray-100);
 }
 :host .zonos--country-select .zonos--country-select-country .zonos--country-flag {
-  border-radius: var(--amino-radius-4);
+  border-radius: var(--zonos-elements-radius-4);
   width: 24px;
   height: 18px;
   position: relative;
   overflow: hidden;
-  box-shadow: var(--amino-v3-shadow-medium);
+  box-shadow: var(--zonos-elements-v3-shadow-medium);
   z-index: 10;
   justify-self: center;
 }
 @media (max-width: 768px) {
   :host .zonos--country-select .zonos--country-select-country .zonos--country-flag {
-    border-radius: var(--amino-radius-4);
+    border-radius: var(--zonos-elements-radius-4);
     width: 24px;
   }
 }

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-dialog/zonos-dialog.css

@@ -43,7 +43,7 @@
   height: 100vh;
   left: 0;
   top: 0;
-  background: var(--amino-backdrop-color);
+  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: var(--amino-gray-0);
-  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-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: {