@zonos/elements 1.3.15-alpha.3 → 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,29 +228,30 @@
   outline: none;
 }
 :host button:not(.override-background).subtle:not([disabled]):hover {
-  background: var(--amino-gray-500);
+  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;
@@ -258,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

@@ -52,26 +52,35 @@ export class ZonosButton {
          * So need to re-assign the variant prop with the default value if the value is `undefined` here.
          */
         const variant = this.variant || 'standard';
-        const color = this.buttonColor && isColorVariable(this.buttonColor)
-            ? `var(--amino-${this.buttonColor})`
-            : this.buttonColor;
         // use override background if it exists, otherwise use color from setting
         const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
         // only set theme for button to change text color if variant is standard and override background is set
         const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
-        const borderStyle = getBorderRadius(this.borderStyle);
+        const borderStyle = getBorderRadius({
+            overrideBorderStyle: this.borderStyle,
+        });
         const backgroundActualColor = isColorVariable(overrideBackground) && overrideBackground
             ? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
             : overrideBackground;
+        // use the variable if it's a color variable, otherwise use the color
+        const color = this.buttonColor && isColorVariable(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' &&
+            backgroundActualColor &&
+            isDarkColor(backgroundActualColor)
+            ? 'white'
+            : color;
         const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
             ? 'white'
             : 'black';
-        return (h(Host, { key: '105badc02dbdcd9c782942e2b71719cd0ae7444e', 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': color,
+                '--color': contrastColor,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'c817b0eec6a0649e48155f284965412beb89a5f6', class: classes([
+            }) }, h("button", { key: 'bcd3c7bf52464dd1e7485cdac6b0e3defbf63af3', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -84,7 +93,7 @@ export class ZonosButton {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { key: '85d6175e728b87276b95e831560530a3f7424a7c', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'c65d771ca5182ac27da1769884dd8a4060037a1b', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'e3c6b155c4eb0f22aa9378586563face84ef8c2d', 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-card/zonos-card.js

@@ -12,12 +12,12 @@ export class ZonosCard {
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { key: '49d97d816bec7113ef6654cdf6f54598a17ebc00', style: {
+        return (h(Host, { key: '206169280db67be5e74382c5beccfad87ec9068a', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '6c4e326aa182ab597b099ddaf228b8b83efc471f', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { key: 'eb96bb3be8a7f78cec51f0288ed7d78b4f598659', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '11b6afcf37ec978d154990ab0a6b558d3b203126', type: "subheader" }, this.label), h("h-stack", { key: 'ae03b7569dc0f0e28fccd6c225305db778c6a21e', spacing: 8 }, this.actions))), h("slot", { key: 'b6224bc4d019e302b36a81c6c3a81e2bca4504b1' }), (this.footerActions || this.footerContent) && (h("footer", { key: 'f629f3d4914a92f400e7ccfd347e211bbf11035b', class: "card-footer", style: {
+            } }, h("div", { key: '4a1c7eab9b5420295ce3ec30cfd59985be35d912', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { key: '75454e5d9eacdfdf842a9a220deab467625e497b', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: 'bc9c7d3500cef41237dbe53f27ab398103be55dd', type: "subheader" }, this.label), h("h-stack", { key: '29d68a483bfc61ddfb9deeb63272a8221759513c', spacing: 8 }, this.actions))), h("slot", { key: '0ad416c6cdb0b1fc2c922b8569cf35a4009263cc' }), (this.footerActions || this.footerContent) && (h("footer", { key: '469110ce0f0f81cbee4ef67e79d3be17933bcf2e', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: '696d8588e5de862f111c09b801d26f2625e4017f' }, this.footerContent), h("h-stack", { key: '3b2df392b850b27fcdc6e745a2d5093124562367', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: '9044d9f3c81935119f668deb188f16cb1cb243bb' }, this.footerContent), h("h-stack", { key: '3f258ed6b07b8973b0bf753c7ab6427d67bf210c', spacing: 8 }, this.footerActions))))));
     }
     static get is() { return "zonos-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,6 +33,7 @@
 
 :host {
   display: inline-flex;
+  cursor: pointer;
 }
 :host label {
   display: inline-flex;
@@ -60,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;
@@ -75,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

@@ -14,27 +14,36 @@ export class ZonosCheckbox {
         this.fontSize = 'base';
         this.borderStyle = undefined;
     }
+    onClick() {
+        if (this.isDisabled) {
+            return;
+        }
+        this.checkboxSelected.emit(!this.isChecked);
+    }
     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)';
-        const borderStyle = getBorderRadius(this.borderStyle, '4px');
-        return (h(Host, { key: '1383262a5cca00ede5154fbdf37bbabb8cbcd501', class: classes(['zonos--elements zonos--checkbox']), style: {
+                    ? 'var(--zonos-elements-gray-800)'
+                    : 'var(--zonos-elements-gray-0)';
+        const borderStyle = getBorderRadius({
+            customRoundRadius: '4px',
+            overrideBorderStyle: this.borderStyle,
+        });
+        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: 'aa01d0b1eebb53587f8d2d344e3b1d01a6a7a683', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '166eef6010570137110f8548c9eb76f32e5616e9', 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: 'd98289266cd4e78dd1e5c9b89019d0dd4927e4d0', class: "checkmark-container" }, h("svg", { key: 'e179fe12a77e0c7f1f48bc943ff472d0a75e05d5', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '147acf112b6d28fa30af8e8c7fe8d7f998a507ab', "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: 'b83bb5bb1881580be3d0ab3ed83157a0c0ce3f8e', 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"; }
@@ -215,4 +224,13 @@ export class ZonosCheckbox {
                 }
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
 }

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: '8b1ca1b840103589ca7929771a7b828928ef1a64', class: "zonos--elements", style: {
+        return (h(Host, { key: '5079903c5c31395bc5c92a4542d1f7ae78dc34b2', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: 'b1bd07fcc96bd4e900ba945e9f57b27967d3a458', 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: 'f5b8b79050e1ebf23355161202a53854a0d9d08d', class: "zonos--tab-progress" }, h("div", { key: '5e9b4a726dd0cc6601a0097652b06759a7bba1fe', 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-collapse/zonos-collapse.js

@@ -42,10 +42,10 @@ export class ZonosCollapse {
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (h(Host, { key: 'ec163c2c73f38e479ba22bb3bea5dbe2f156170b', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: '514e75d41d29d70b4ca60230288ae183200b1e12', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: 'ab8b73ff44968d8e2f3dcf75439b09da36fdfb22' }, h("iframe", { key: '0b6d3518382c4c17a6eacb07c1617e84c7301c39', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '752d9054dadf8905e22cfcca81bb966c2d3ce8d3' }))));
+            } }, h("div", { key: '068aee1d13bde4c83ea8582b34844da7452c907c' }, h("iframe", { key: 'b22fd8ad898a098c244cb817dc6951854505efca', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'b54783376005085e379c7b8d43218ead1bf8e8ac' }))));
     }
     static get is() { return "zonos-collapse"; }
     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-country-select/zonos-country-select.js

@@ -35,9 +35,9 @@ export class ZonosCountrySelect {
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: '4ac4ac37704300786a6a4b3668b1608cf9c2fd96', class: "zonos--elements", style: {
+        return (h(Host, { key: '1b37f326e23e3afaba1428cc23add2e5c425f0b9', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'aecc099069d42c73703f510b7021d1a0b988b810', class: "zonos--country-select" }, h("zonos-v-stack", { key: '358b01905c26ea03eef9c8a1551d1faa5c13b763', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'a22baac4b445d2dee08be2cb9c31714b226d9327', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '71515910f8bb3ef512c76a71246272f49506ee63', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '44d417c7859f4263c8286e60a2cc9bfbe7a6698d', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: '966ab933f1bcd754e64fc43dc2013f6cde0f043b', class: "zonos--country-select" }, h("zonos-v-stack", { key: '77d6412871658e9fc8e59df130d3b95df68c5e0b', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '17d0413090d9637aa17234d19a3549b9828a3a86', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '08aa6bd77273095d0b1753c6b423a283b638cc69', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'e1e770226aa2ad9c74681d8291797ff676217f09', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     static get is() { return "zonos-country-select"; }
     static get encapsulation() { return "shadow"; }