@zonos/elements 1.3.11-alpha.0 → 1.3.11-alpha.2

package/dist/components/zonos-button2.js

@@ -4,6 +4,7 @@ import { c as classes } from './classes.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { i as isColorVariable } from './isColorVariable.js';
 import { i as isDarkColor } from './isDarkColor.js';
+import { g as getContrastColor } from './getContrastColor.js';
 import { d as defineCustomElement$1 } from './zonos-spinner2.js';
 
 /**
@@ -20,7 +21,20 @@ const getButtonTheme = (overrideBackground) => {
     return buttonTheme;
 };
 
-const zonosButtonCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));margin:1px;}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--amino-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))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-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)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-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)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-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)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-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)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--amino-radius-4);width:24px}";
+/**
+ * Filter out all of the undefined values from the object so we don't have undefined css variable values
+ */
+const styles = (props) => {
+    // loop through the object and filter out all of the underfined values
+    return Object.entries(props).reduce((acc, [key, value]) => {
+        if (value) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+};
+
+const zonosButtonCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex;border-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));margin:1px;}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}@media (max-width: 400px){:host button:not(.only-icon).has-icon{font-size:var(--amino-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))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-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)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-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)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-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)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color);outline:none}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--subtle-hover-color, var(--amino-gray-100))}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-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)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}:host .zonos--footer-country-flag{height:18px;width:18px;position:relative;overflow:hidden;border-radius:30px;-webkit-box-shadow:var(--amino-v3-shadow-medium);box-shadow:var(--amino-v3-shadow-medium);z-index:10;justify-self:center;border-radius:var(--amino-radius-4);width:24px}";
 const ZonosButtonStyle0 = zonosButtonCss;
 
 const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends HTMLElement {
@@ -81,12 +95,23 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
         const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
         const borderStyle = getBorderRadius(this.borderStyle);
         const spinnerColor = buttonTheme === 'LIGHT' ? 'black' : 'white';
-        return (h(Host, { key: 'f3374eedd37ec6293260fba7b19d66aa013d3484', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        return (h(Host, { key: '75f5e6900c6e0eb468ea639460d55f251b580200', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("button", { key: '352ce427591b20b8042dcd19ce159b77c1fc2faf', class: classes([
+                '--subtle-hover-color': this.buttonColor
+                    ? // for the subtle variant, the hover background should contrast with the text color
+                        getContrastColor({
+                            backgroundColor: 'white',
+                            color: isColorVariable(this.buttonColor)
+                                ? window
+                                    .getComputedStyle(this.ele)
+                                    .getPropertyValue(`--amino-${this.buttonColor}`)
+                                : this.buttonColor,
+                        })
+                    : undefined,
+            }) }, h("button", { key: 'fd1323ac24be622182f9b60d8b026fb0ea47fa40', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -99,8 +124,9 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '554cc1fd9bb58d833339ae21e837d586adc248c2', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '92706fef0545ba24e3f943d731bffa1e844ec154', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
+    get ele() { return this; }
     static get watchers() { return {
         "icon": ["iconChangeHandler"]
     }; }

package/dist/components/zonos-card2.js

@@ -19,9 +19,9 @@ const ZonosCard = /*@__PURE__*/ proxyCustomElement(class ZonosCard extends HTMLE
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { key: 'b350f7a592ea35c3b6beaf5eefaa2ab0208975dd', style: {
+        return (h(Host, { key: 'c2f25ffa32920500b63702df35b9e30dcf28b47d', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '125e8b550cd8f371e28a012536722f48402774f2', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: '3cf038c62910ebac736ed1c37ecf1a490c8e1d0e' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
+            } }, h("div", { key: '30515451d4694d3fffffab4c23ac2b0ff0e37710', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: 'a1ced320f20a585c7201fc5c7b0729ce8e91a176' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
             } }, h("div", null, this.footerContent), h("h-stack", { spacing: 8 }, this.footerActions))))));

package/dist/components/zonos-checkbox2.js

@@ -46,14 +46,14 @@ const ZonosCheckbox = /*@__PURE__*/ proxyCustomElement(class ZonosCheckbox exten
                     ? 'var(--amino-gray-800)'
                     : 'var(--amino-gray-0)';
         const borderStyle = getBorderRadius(this.borderStyle, '4px');
-        return (h(Host, { key: '5f8516f5933b739cc3f21d901e50dec1c761fa58', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: '2ae2a0d33d34aafe96cc91e1cd7c7ee530dede4b', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: '6544f51a8c892d616123ab4194d069b055e3dc86', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '958e35bf16be575230748fccdb1a3916942c3a30', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: 'b9630027581a9f20374c2dfe88faa94cb50203c9', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'd1b2411d9f906692f18514a15df1bb290f662164', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '2c55e0a190b092dd083c433c35143e253910f54f', class: "checkmark-container" }, h("svg", { key: '0aa1f705b728055835159a399173a170aee4f7c0', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd526bbafde4d4399be3f3a0a7cc87e92634d9548', "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", { size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: '8fc3cda232615f446aff5db71cd992de5327b8e7', class: "checkmark-container" }, h("svg", { key: '5b91a7a26abfd80850eb3c2bb2e045ef73abfd7a', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2046a40a75da63ac288c5def90d82ab0d0e0523c', "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", { size: this.fontSize }, this.label)))));
     }
     static get style() { return ZonosCheckboxStyle0; }
 }, [1, "zonos-checkbox", {

package/dist/components/zonos-checkout-finish2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { u as handleFetch, q as stripeStoreReset, c as cartStore, s as stripeStore, v as stripeStoreRetrievePayment, t as translate } from './stripe.js';
+import { r as handleFetch, q as stripeStoreReset, c as cartStore, s as stripeStore, u as stripeStoreRetrievePayment, t as translate } from './stripe.js';
 import { z as zonosStore } from './zonosStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
@@ -9,6 +9,16 @@ import { d as defineCustomElement$3 } from './zonos-icon2.js';
 import { d as defineCustomElement$2 } from './zonos-spinner2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
+/**
+ * Strongly typed custom event creation for all available events in zonos-checkout project
+ */
+const createCustomEvent = (eventName, detail) => {
+    // eslint-disable-next-line no-restricted-syntax
+    return new CustomEvent(eventName, {
+        detail,
+    });
+};
+
 const sendErrorLog = async ({ endpoint, errors, metadata }) => {
     const userAgentData = 'userAgentData' in window.navigator
         ? // userAgentData is not yet supported in all browsers
@@ -126,10 +136,8 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
                     void trackConversionEvent('checkout_paymentInfoCompleted', {
                         paymentMethod,
                     });
-                    const successEvent = new CustomEvent('zonos-checkout-success', {
-                        detail: {
-                            message: 'Zonos Checkout successfully processed order',
-                        },
+                    const successEvent = createCustomEvent('zonos-checkout-success', {
+                        message: 'Zonos Checkout successfully processed order',
                     });
                     document.dispatchEvent(successEvent);
                 }
@@ -179,7 +187,7 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { key: 'd3e8a30ddfffe0cee18ff29edf839775f7a9d8ec', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '8c2087b3a0578cbbd7979fff5e6b696a4325e548', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius(this.borderRadius),
             } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h(Fragment, null, h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
     }
@@ -229,4 +237,4 @@ function defineCustomElement() {
     } });
 }
 
-export { ZonosCheckoutFinish as Z, defineCustomElement as d, sendErrorLog as s };
+export { ZonosCheckoutFinish as Z, createCustomEvent as c, defineCustomElement as d, sendErrorLog as s };

package/dist/components/zonos-checkout-footer2.js

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { a as localizationStore } from './stripe.js';
-import { z as zonosStore } from './zonosStore.js';
+import { i as isCheckoutMobile } from './isCheckoutMobile.js';
 import { c as classes } from './classes.js';
-import { i as isDarkColor } from './isDarkColor.js';
 import { l as languages } from './ILanguage.js';
 import { d as defineCustomElement$7 } from './zonos-button2.js';
 import { d as defineCustomElement$6 } from './zonos-icon2.js';
@@ -24,7 +23,7 @@ const ZonosIcon = `<svg width="105" height="29" viewBox="0 0 105 29" fill="none"
 </svg>
 `;
 
-const zonosCheckoutFooterCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--checkout-footer{position:absolute;bottom:0;left:0;right:0;gap:var(--amino-space-16);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--amino-border);padding:var(--amino-space-12);-ms-flex-align:center;align-items:center;background:var(--amino-surface-color-secondary)}:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper a{line-height:0px}:host .zonos--checkout-footer zonos-button button.outline{outline:1px solid var(--amino-gray-800)}:host .zonos--checkout-footer .zonos--checkout-locale-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8);position:relative}@media (max-width: 400px){:host .zonos--checkout-footer .zonos--checkout-locale-wrapper{gap:var(--amino-space-4)}}:host .zonos--checkout-footer .zonos--checkout-footer-dialog{position:absolute;bottom:36px;left:var(--language-dialog-left);background:var(--amino-surface-color);-webkit-box-shadow:var(--amino-v3-shadow-xl);box-shadow:var(--amino-v3-shadow-xl);border-radius:var(--amino-radius-12);width:360px;max-width:100vw;max-height:500px;z-index:10005;overflow:auto;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0;-webkit-transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out, opacity 0.3s ease-out;transition:transform 0.3s ease-out, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar{width:10px}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-track{background:var(--amino-gray-50)}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-thumb:hover{background:#d6d6d6}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-track{border-top-right-radius:var(--amino-radius-12);border-bottom-right-radius:var(--amino-radius-12)}:host .zonos--checkout-footer .zonos--checkout-footer-dialog.zonos--checkout-footer-dialog-open{opacity:1;-webkit-transform:scale(1);transform:scale(1)}@media (max-width: 768px){:host .zonos--checkout-footer{-ms-flex-direction:column;flex-direction:column;gap:var(--amino-space-32);background-color:var(--amino-surface-color);border-top:none;position:relative;padding-top:var(--amino-space-24)}:host .zonos--checkout-footer .zonos--checkout-footer-dialog{position:fixed;left:0;right:0;bottom:0;-webkit-transform-origin:bottom center;transform-origin:bottom center;width:100vw}}";
+const zonosCheckoutFooterCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:absolute;bottom:-50px;left:0;right:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;z-index:2}:host .zonos--checkout-footer{width:calc(90vw - 22px);gap:var(--amino-space-16);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-12);-ms-flex-align:center;align-items:center}:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8)}:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper a{line-height:0}:host .zonos--checkout-footer zonos-button button.outline{outline:1px solid var(--amino-gray-800)}:host .zonos--checkout-footer .zonos--checkout-locale-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--amino-space-8);position:relative}@media (max-width: 400px){:host .zonos--checkout-footer .zonos--checkout-locale-wrapper{gap:var(--amino-space-4)}}:host .zonos--checkout-footer .zonos--checkout-footer-dialog{position:absolute;bottom:36px;left:var(--language-dialog-left);background:var(--amino-surface-color);-webkit-box-shadow:var(--amino-v3-shadow-xl);box-shadow:var(--amino-v3-shadow-xl);border-radius:var(--amino-radius-12);width:360px;max-width:100vw;max-height:500px;z-index:10005;overflow:auto;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0;-webkit-transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out, opacity 0.3s ease-out;transition:transform 0.3s ease-out, opacity 0.3s ease-out, -webkit-transform 0.3s ease-out}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar{width:10px}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-track{background:var(--amino-gray-50)}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-thumb:hover{background:#d6d6d6}:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-track{border-top-right-radius:var(--amino-radius-12);border-bottom-right-radius:var(--amino-radius-12)}:host .zonos--checkout-footer .zonos--checkout-footer-dialog.zonos--checkout-footer-dialog-open{opacity:1;-webkit-transform:scale(1);transform:scale(1)}:host(.mobile){-ms-flex-direction:column;flex-direction:column;gap:var(--amino-space-32);background:var(--amino-gray-0);position:relative;padding-top:var(--amino-space-24);bottom:0}:host(.mobile) .zonos--checkout-footer{-ms-flex-direction:column;flex-direction:column}:host(.mobile) .zonos--checkout-locale-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.mobile) .zonos--checkout-footer-dialog{position:fixed;left:0;right:0;bottom:0;-webkit-transform-origin:bottom center;transform-origin:bottom center;width:100vw}";
 const ZonosCheckoutFooterStyle0 = zonosCheckoutFooterCss;
 
 const ZonosCheckoutFooter = /*@__PURE__*/ proxyCustomElement(class ZonosCheckoutFooter extends HTMLElement {
@@ -32,31 +31,48 @@ const ZonosCheckoutFooter = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.showDialog = false;
+        this.mobile = false;
+        this.dataTheme = undefined;
+        this.showLanguageDialog = false;
+        this.isMobile = false;
     }
     handleGlobalClick(e) {
-        if (!this.el.contains(e.target) && this.showDialog) {
-            this.showDialog = false;
+        if (!this.el.contains(e.target) && this.showLanguageDialog) {
+            this.showLanguageDialog = false;
         }
     }
-    toggleDialog() {
-        this.showDialog = !this.showDialog;
+    toggleLanguageDialog() {
+        this.showLanguageDialog = !this.showLanguageDialog;
+    }
+    handleMobileChange() {
+        this.isMobile = isCheckoutMobile(this.mobile);
+    }
+    componentWillLoad() {
+        this.isMobile = isCheckoutMobile(this.mobile);
     }
     render() {
-        var _a, _b;
-        const primaryColor = (_a = zonosStore.appearance) === null || _a === void 0 ? void 0 : _a.colorPrimary;
-        const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
-        const languageLabel = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.label;
-        return (h(Host, { key: 'cadd2ef8877c716cdeb1f5f40642e41cabc2a55d', class: "zonos--elements" }, h("div", { key: '480995fd1ca7bc41702d15dd40d64e02a9ba09dd', class: "zonos--checkout-footer", "data-theme": footerTheme, style: { '--primary-color': primaryColor } }, h("div", { key: 'b83ebb3203542f7f4a227b50b26010cbeb914294', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: '66ad21d85629d159b4ff3341e82c92d6bd19ceca', class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: "gray-700" }), onClick: () => this.toggleDialog(), variant: "subtle" }, languageLabel), h("div", { key: '1e8dce34f3866570f267233644c6d5549cf02c9b', class: classes([
+        var _a;
+        const languageLabel = (_a = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
+        // reverse color when on desktop. With the coversheet backdrop, the color should be white
+        const colorDesktop = this.dataTheme === 'LIGHT' && !this.mobile ? 'gray-0' : 'gray-1200';
+        return (h(Host, { key: '2ce26e27b7c90b4d37f26197821ed1a39ddb9fae', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: '5f52ec7b5ad1659ceb9d2edb4661e5995b72afaf', class: "zonos--checkout-footer" }, h("div", { key: '5d127f033702bff94cc2db76b4695a03055ec783', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: '701b5014848ea716f7dcc22221b453146af92962', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: 'e2a319113905bd76473aef822780521f2be58405', class: classes([
                 'zonos--checkout-footer-dialog',
-                this.showDialog && 'zonos--checkout-footer-dialog-open',
-            ]) }, h("zonos-language-select", { key: '194aeb20273058577d2cbf3b72eef5f7152129e6', handleOnClose: () => this.toggleDialog() }))), h("div", { key: '56b5f28d98eeb5390b59da3dfbc072f967e945a0', class: "zonos--checkout-footer-icon-wrapper" }, h("zonos-text", { key: 'b098a9c89d4855d388372b20c94ee3582cc4e9df', type: "caption" }, "Powered by"), h("a", { key: '0652328fc74701168e5ddec2e0662208498e4557', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '826323504ca56c3216524d3a9a49f820162aeb85', autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 }))))));
+                this.showLanguageDialog && 'zonos--checkout-footer-dialog-open',
+            ]) }, h("zonos-language-select", { key: '4fb9860a4547541f3947d349ab6056e899335952', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: '0a348521a7ccecc23a7a69019940c2421bb8420c', class: "zonos--checkout-footer-icon-wrapper" }, h("zonos-text", { key: '9adf4c24fcf1b5d0827556e9e68006860b0bb9c4', textColor: colorDesktop, type: "caption" }, "Powered by"), h("a", { key: 'a3f957e10d14d68d3973169470a21fdabb2f7a06', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '49592d8302447d007dc840de18fa78af7898f382', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 }))))));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "mobile": ["handleMobileChange"]
+    }; }
     static get style() { return ZonosCheckoutFooterStyle0; }
 }, [1, "zonos-checkout-footer", {
-        "showDialog": [32]
-    }, [[4, "click", "handleGlobalClick"]]]);
+        "mobile": [4],
+        "dataTheme": [1, "data-theme"],
+        "showLanguageDialog": [32],
+        "isMobile": [32]
+    }, [[4, "click", "handleGlobalClick"]], {
+        "mobile": ["handleMobileChange"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/zonos-checkout-progress-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosCheckoutProgressTabs extends Components.ZonosCheckoutProgressTabs, HTMLElement {}
+export const ZonosCheckoutProgressTabs: {
+    prototype: ZonosCheckoutProgressTabs;
+    new (): ZonosCheckoutProgressTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { Z as ZonosCheckoutProgressTabs$1, d as defineCustomElement$1 } from './zonos-checkout-progress-tabs2.js';
+
+const ZonosCheckoutProgressTabs = ZonosCheckoutProgressTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosCheckoutProgressTabs, defineCustomElement };

package/dist/components/zonos-checkout-progress-tabs2.js

@@ -0,0 +1,122 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as cartStore, t as translate } from './stripe.js';
+import { z as zonosStore } from './zonosStore.js';
+import { c as classes } from './classes.js';
+import { g as getContrastColor } from './getContrastColor.js';
+import { i as isColorVariable } from './isColorVariable.js';
+import { d as defineCustomElement$2 } from './zonos-icon2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const TabCheckmark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.289 7.40424C18.618 7.65585 18.6808 8.12656 18.4291 8.4556L11.9291 16.9556C11.7978 17.1273 11.5988 17.234 11.383 17.2484C11.1673 17.2627 10.9559 17.1832 10.803 17.0303L6.80304 13.0303C6.51015 12.7374 6.51015 12.2626 6.80304 11.9697C7.09594 11.6768 7.57081 11.6768 7.8637 11.9697L11.258 15.3639L17.2376 7.54442C17.4892 7.21539 17.9599 7.15263 18.289 7.40424Z" fill="currentColor"/>
+</svg>
+`;
+
+const zonosCheckoutProgressTabsCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{margin-bottom:var(--amino-space-32)}:host .zonos--tab-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around}:host .zonos--tab-index{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:13px;width:24px;height:24px;font-weight:bold}:host .zonos--tab-index .zonos--tab-index-label,:host .zonos--tab-index .zonos--tab-index-done-icon{position:absolute;top:0;width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:top 0.5s ease-in-out, opacity 0.5s ease-in-out;transition:top 0.5s ease-in-out, opacity 0.5s ease-in-out}:host .zonos--tab-index .zonos--tab-index-done-icon{top:-50%;opacity:0}:host .zonos--tab-item{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;background:transparent;border:0;cursor:pointer}:host .zonos--tab-item.done .zonos--tab-index-done-icon{top:0;opacity:1}:host .zonos--tab-item.done .zonos--tab-index-label{opacity:0;top:50%}:host .zonos--tab-item.selected zonos-text{color:var(--color)}:host .zonos--tab-progress{width:100%;background-color:transparent;border-radius:10px;-webkit-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.4);box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.4);overflow:hidden;position:relative;padding:1px;height:8px}:host .zonos--tab-progress .zonos--progress-bar-fill{border-radius:10px;background-color:var(--color);height:100%;width:var(--progress-percent);-webkit-transition:width 0.5s ease-in-out;transition:width 0.5s ease-in-out}";
+const ZonosCheckoutProgressTabsStyle0 = zonosCheckoutProgressTabsCss;
+
+const ZonosCheckoutProgressTabs = /*@__PURE__*/ proxyCustomElement(class ZonosCheckoutProgressTabs extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * The total number of steps that's done
+         */
+        this.getTotalSuccessStep = () => {
+            // include the finish step
+            const totalSteps = 4;
+            const stepDone = Object.values(cartStore.tabItems).filter(tab => tab.isDone).length + 1;
+            return `${(stepDone / totalSteps) * 100}%`;
+        };
+        this.isTabClickable = (tabValue) => {
+            const currentTab = cartStore.tabItems[tabValue];
+            if (!currentTab) {
+                return false;
+            }
+            // clickable if the tab state is done
+            if (currentTab.isDone) {
+                return true;
+            }
+            // if any of the previous tabs are not done, the tab is not clickable
+            return Object.values(cartStore.tabItems)
+                .slice(0, currentTab.index - 1)
+                .every(tab => tab.isDone);
+        };
+        this.tabColor = null;
+        this.backgroundColor = null;
+    }
+    /**
+     * Set the tab items data. This is to be used in storybook
+     */
+    async setTabItems(tabItems) {
+        cartStore.tabItems = tabItems;
+    }
+    /**
+     * Set selected tab. Only set the tab if it's clickable
+     */
+    async setTabSelected(tabValue) {
+        if (this.isTabClickable(tabValue)) {
+            cartStore.step = tabValue;
+        }
+    }
+    render() {
+        const selectedStep = cartStore.step;
+        const labelSelectedColor = this.tabColor || zonosStore.appearance.colorSecondary;
+        // If the background color and the tab color are not contrat enough, increase the contrast of the label color
+        const contrastLabelColor = this.backgroundColor && labelSelectedColor
+            ? getContrastColor({
+                backgroundColor: isColorVariable(this.backgroundColor)
+                    ? window
+                        .getComputedStyle(this.ele)
+                        .getPropertyValue(`--amino-${this.backgroundColor.replace('--amino-', '')}`)
+                    : this.backgroundColor,
+                color: labelSelectedColor,
+            })
+            : labelSelectedColor;
+        return (h(Host, { key: 'e79dc4967096d3b6f0ac25d58f02e77f773c8e95', class: "zonos--elements", style: {
+                '--color': contrastLabelColor,
+                '--progress-percent': this.getTotalSuccessStep(),
+            } }, h("div", { key: '20e500d31c28ee0705c1999e0f258b679af9d73a', 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: '129502b873f339192ef5f4c67ac8c06d533ccfca', class: "zonos--tab-progress" }, h("div", { key: '728a074d6a411b400be30929bf9a5fdc8431745d', class: "zonos--progress-bar-fill" }))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get ele() { return this; }
+    static get style() { return ZonosCheckoutProgressTabsStyle0; }
+}, [1, "zonos-checkout-progress-tabs", {
+        "tabColor": [1, "tab-color"],
+        "backgroundColor": [1, "background-color"],
+        "setTabItems": [64],
+        "setTabSelected": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-checkout-progress-tabs", "zonos-icon", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-checkout-progress-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCheckoutProgressTabs);
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ZonosCheckoutProgressTabs as Z, defineCustomElement as d };