@zonos/elements 1.3.15-alpha.3 → 1.3.15

package/dist/components/zonos-badge2.js

@@ -19,16 +19,16 @@ const ZonosBadge = /*@__PURE__*/ proxyCustomElement(class ZonosBadge extends HTM
         this.rounded = false;
     }
     render() {
-        return (h(Host, { key: 'cc521e396f505c1f3a69d40b755585c1e439f120', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: 'c68ba6ef2bcb35c94ecf2b11379be748aa998198', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '132ee2adfd3be7634d71df9ee1bf813fd56fe768', class: classes([
+            } }, h("div", { key: '7f200effb42296a21829c292101ef3300b041327', class: classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: 'ebe7b204422dc3b0d9fe93d3ca9bd75ceddb9f37' }, h("slot", { key: 'e58b021307f14226ce15df693bedfa50f79f6d8a' })))));
+            ]) }, this.icon, h("zonos-text", { key: '4358e95cb29ec6a82e32213b268612aadf8772c6' }, h("slot", { key: 'ab76831e3691a896179e06896d33ed771e4bbdf9' })))));
     }
     static get style() { return ZonosBadgeStyle0; }
 }, [1, "zonos-badge", {

package/dist/components/zonos-button2.js

@@ -33,7 +33,7 @@ const styles = (props) => {
     }, {});
 };
 
-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:8px}: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:8px 24px;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: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);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);padding:12px 24px}:host button.lg:not(.has-content).has-icon{padding:0 16px}:host button:not(.only-icon).has-icon{gap:8px}@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-500)}: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 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:8px}: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:8px 24px;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: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);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);padding:12px 24px}:host button.lg:not(.has-content).has-icon{padding:0 16px}:host button:not(.only-icon).has-icon{gap:8px}@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-500);color:var(--amino-gray-0)}: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 {
@@ -85,26 +85,35 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
          * 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(--amino-${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: '10bfc0423b83cc231fb22fdc430a1e5de66705fc', 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: '1feab99eec063d35c53ed8c308ac7675988e565c', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -117,7 +126,7 @@ const ZonosButton = /*@__PURE__*/ proxyCustomElement(class ZonosButton extends H
                 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: '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)));
     }
     get ele() { return this; }
     static get watchers() { return {

package/dist/components/zonos-card2.js

@@ -19,12 +19,12 @@ const ZonosCard = /*@__PURE__*/ proxyCustomElement(class ZonosCard extends HTMLE
         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 style() { return ZonosCardStyle0; }
 }, [1, "zonos-card", {

package/dist/components/zonos-cart-items2.js

@@ -17,7 +17,7 @@ const ZonosCartItems = /*@__PURE__*/ proxyCustomElement(class ZonosCartItems ext
         var _a;
         const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
         const rate = ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
-        return (h(Host, { key: '945bd402bb5f8a73bc02dc8f30d187c43b78050e', class: "zonos--cart-items zonos--elements" }, h("table", { key: '600b545e20eb81d7e744c2bf66a9cec2eb68c8e7', class: "zonos--cart-table" }, h("tbody", { key: 'cd12a4372e97b8018af37433e6b2daba5403e621' }, cartStore.items.map(item => {
+        return (h(Host, { key: 'e2d53d541a342f816efe95f3a0b5551ea7f95e38', class: "zonos--cart-items zonos--elements" }, h("table", { key: 'f2dbf582004f7db5947e55b5b93f1437dc9d2a95', class: "zonos--cart-table" }, h("tbody", { key: 'a9948cbeb5ad9886d582e518d3bbe0ab9c5dda9d' }, cartStore.items.map(item => {
             const itemImg = item.imageUrl;
             return (h("tr", { class: "zonos--cart-item" }, h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];

package/dist/components/zonos-cart-subtotal2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { t as translate, c as cartStore } from './stripe.js';
+import { c as cartStore } from './stripe.js';
+import { a as translate } from './translationStore.js';
 import { f as formatCurrency } from './formatCurrency.js';
 import { d as defineCustomElement$4 } from './zonos-badge2.js';
 import { d as defineCustomElement$3 } from './zonos-icon2.js';

package/dist/components/zonos-checkbox2.js

@@ -16,7 +16,7 @@ const colorPrefixes = [
     'glass',
 ];
 
-const zonosCheckboxCss = ":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}:host label{display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:8px;-ms-flex-align:center;align-items:center}:host label.disabled{cursor:not-allowed;opacity:0.6}:host input[type=checkbox]{opacity:0;position:absolute;left:0;width:0;height:0;top:0;z-index:-99999}:host svg{opacity:0}:host .checkmark-container{height:var(--size);width:var(--size);background-color:transparent;border:1.5px solid var(--amino-gray-400);position:relative;border-radius:var(--border-radius, var(--amino-radius-4))}:host .checkmark{opacity:0;position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;width:calc(100% + 3px);-webkit-transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:scale(0.4);transform:scale(0.4);background-color:var(--background-color);border-radius:var(--border-radius, var(--amino-radius-4))}:host input[type=checkbox]:checked~.checkmark-container .checkmark{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
+const zonosCheckboxCss = ":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;cursor:pointer}:host label{display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:8px;-ms-flex-align:center;align-items:center}:host label.disabled{cursor:not-allowed;opacity:0.6}:host input[type=checkbox]{opacity:0;position:absolute;left:0;width:0;height:0;top:0;z-index:-99999}:host svg{opacity:0}:host .checkmark-container{height:var(--size);width:var(--size);background-color:transparent;border:1.5px solid var(--amino-gray-400);position:relative;border-radius:var(--border-radius, var(--amino-radius-4))}:host .checkmark{opacity:0;position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;width:calc(100% + 3px);-webkit-transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:scale(0.4);transform:scale(0.4);background-color:var(--background-color);border-radius:var(--border-radius, var(--amino-radius-4))}:host input[type=checkbox]:checked~.checkmark-container .checkmark{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
 const ZonosCheckboxStyle0 = zonosCheckboxCss;
 
 const ZonosCheckbox = /*@__PURE__*/ proxyCustomElement(class ZonosCheckbox extends HTMLElement {
@@ -33,6 +33,12 @@ const ZonosCheckbox = /*@__PURE__*/ proxyCustomElement(class ZonosCheckbox exten
         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
@@ -45,15 +51,18 @@ const ZonosCheckbox = /*@__PURE__*/ proxyCustomElement(class ZonosCheckbox exten
                 !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: {
+        const borderStyle = getBorderRadius({
+            customRoundRadius: '4px',
+            overrideBorderStyle: this.borderStyle,
+        });
+        return (h(Host, { key: '8a3d5f66a7fb956dcb063f1b375bfb80856a80c4', 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: '95dc70a3821652e588706b570b40272a5f124b7f', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'ef61adbd2246fbb934a17b31ea62cd5ce4ff88f7', 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: '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)))));
     }
     static get style() { return ZonosCheckboxStyle0; }
 }, [1, "zonos-checkbox", {
@@ -64,7 +73,7 @@ const ZonosCheckbox = /*@__PURE__*/ proxyCustomElement(class ZonosCheckbox exten
         "size": [2],
         "fontSize": [1, "font-size"],
         "borderStyle": [1, "border-style"]
-    }]);
+    }, [[1, "click", "onClick"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { h as handleFetch, u as stripeStoreReset, c as cartStore, s as stripeStore, v as stripeStoreRetrievePayment, t as translate } from './stripe.js';
+import { t as handleFetch, r as stripeStoreReset, c as cartStore, s as stripeStore, u as stripeStoreRetrievePayment } from './stripe.js';
+import { a as translate } from './translationStore.js';
 import { z as zonosStore } from './zonosStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
-import { s as sendErrorLog } from './sendErrorLog.js';
 import { s as submitGtag } from './submitGtag.js';
 import { d as defineCustomElement$4 } from './zonos-button2.js';
 import { d as defineCustomElement$3 } from './zonos-icon2.js';
@@ -20,6 +20,24 @@ const createCustomEvent = (eventName, detail) => {
     });
 };
 
+const sendErrorLog = async ({ endpoint, errors, metadata }) => {
+    const userAgentData = 'userAgentData' in window.navigator
+        ? // userAgentData is not yet supported in all browsers
+            window.navigator.userAgentData
+        : null;
+    const errorObject = {
+        endpoint,
+        errors,
+        metadata: Object.assign({ href: window.location.href, userAgent: userAgentData && userAgentData.brands.length > 0
+                ? userAgentData
+                : window.navigator.userAgent }, metadata),
+    };
+    void handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/log-error`, {
+        body: errorObject,
+        method: 'POST',
+    });
+};
+
 const RemoveIcon = `<svg color="var(--amino-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--amino-red-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
 const SuccessIcon = `<svg color="var(--amino-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z" data-is-secondary-color="true" fill="var(--amino-blue-100)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M15.707 9.293a1 1 0 0 1 0 1.414l-3.646 3.647a1.5 1.5 0 0 1-2.122 0l-1.646-1.647a1 1 0 1 1 1.414-1.414L11 12.586l3.293-3.293a1 1 0 0 1 1.414 0Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
@@ -170,9 +188,11 @@ const ZonosCheckoutFinish = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { key: '8c2087b3a0578cbbd7979fff5e6b696a4325e548', class: "zonos--checkout-finish zonos--elements", style: {
-                '--border-radius': getBorderRadius(this.borderRadius),
-            } }, this.isLoading && (h("div", { key: 'dd86d26aee1eb604b8e9b2e7328706db43c80467', class: "loading-wrapper" }, h("zonos-spinner", { key: 'a2f07a512a1d45df0be48461b0e989681b6cb78d' }))), !this.isLoading && (h(Fragment, null, h("div", { key: 'f147c24eefb4aa36ed556c581c2f64a096dbe17b', 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", { key: '33a02654ede8a7ef7d884b0138c6e2c96406372f', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: 'c179ac24421803973ae8509a338cc34a4c80ac54' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '488594968d4e957856218b0f804ed9b9947102aa', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
+        return (h(Host, { key: 'fffe0cbefd173f892f3a0359ac45a8b97392172e', class: "zonos--checkout-finish zonos--elements", style: {
+                '--border-radius': getBorderRadius({
+                    overrideBorderStyle: this.borderRadius,
+                }),
+            } }, this.isLoading && (h("div", { key: 'b0a8c67102f0eb841d114e8cd1cd7e44fe895df4', class: "loading-wrapper" }, h("zonos-spinner", { key: 'e45f13d061cd94f777abfef5f12a8dc9a927c9e1' }))), !this.isLoading && (h(Fragment, null, h("div", { key: '81ca150772d4f6b38563bb46d5c76ebc51f9628c', 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", { key: 'c88feb2cc5956087fc91c5a00edb4e142efbfee0', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '621b100ed02aa5dc37f1da5be90c8f14568a21f3' }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '9fff5bc809f97f8126a8117b2896f984e07fc1be', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return ZonosCheckoutFinishStyle0; }
@@ -220,4 +240,4 @@ function defineCustomElement() {
     } });
 }
 
-export { ZonosCheckoutFinish as Z, createCustomEvent as c, defineCustomElement as d };
+export { ZonosCheckoutFinish as Z, createCustomEvent as c, defineCustomElement as d, sendErrorLog as s };

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

@@ -55,10 +55,10 @@ const ZonosCheckoutFooter = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout
         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: 'fae1e5cb1250e834ecf3b09f11785ddea61be3b2', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: 'f3d48fcc675458dd38ca48e21f24a003b5ff9b56', class: "zonos--checkout-footer" }, h("div", { key: '97daec871630cf2bb33956b668abee2e715eceb5', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: 'cd6e12e8d1320e3e6542eef16f15ab27921748c3', 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: 'bdc6d9311d2d039e87c261ead45474b7bf1fe992', class: classes([
+        return (h(Host, { key: 'c66117f4ec54d24eba7e22271294aeb08746a9e1', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: 'a7b49ac9b5d52c2289c46c6b24c6082e68db64b5', class: "zonos--checkout-footer" }, h("div", { key: 'b2c4beb76236c9fe2eb58d0a27ecddf266c7a103', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: 'b981389f14c0b5696208dbb7ad3fabf0687a168f', 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: 'c0d5b4ab335af157789395632cf4278f55ace3fb', class: classes([
                 'zonos--checkout-footer-dialog',
                 this.showLanguageDialog && 'zonos--checkout-footer-dialog-open',
-            ]) }, h("zonos-language-select", { key: '7318bb4137e160e9ed05a423fb80f1806c4f0104', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: '55c76c6cf6777407532c00cf167d59e3cefc5eab', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: 'e2cf10499ed764fb2e7086761ece106580cd6440', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: '0fe6c810a6d7f84a781655cefc47ec6cbb5131c9', textColor: colorDesktop }, "Privacy policy")), h("div", { key: '50401876a45161e80f593971e602e4c449e78dbe', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: '0f69d9d9955165de13a49ff00a7044090b141800', textColor: colorDesktop }, "Powered by"), h("a", { key: '680e6fe4d0a783e2ebc55a51ffb55846ad997249', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '22aee1eb21306141e620bcc1b0dbf035bd710fba', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 })))))));
+            ]) }, h("zonos-language-select", { key: 'd1442fb364997399f35d657e9f5823da34872c71', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: 'ff8ee730b995a5d8a7b9a3939b96444958390ca5', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: 'b2e896b9b37b1b0ba2bbb77034c7b0f6cf5c16a7', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: 'd1fe8d2bc28f3606b2f766659d52496ad4603c17', textColor: colorDesktop }, "Privacy policy")), h("div", { key: '4875d6ad0e0efc60f299a2db427608bf23b062f6', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: '13e2c1634ba3d8070f9ff14205fa3c3e9f8f5843', textColor: colorDesktop }, "Powered by"), h("a", { key: 'e00bec78174a8de0963c1a5caf721fd352dc9490', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '5910c724a05c686a7642385955a3faa042efe654', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 })))))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore, t as translate, c as cartStore } from './stripe.js';
+import { s as stripeStore, c as cartStore } from './stripe.js';
+import { a as translate } from './translationStore.js';
 import { f as formatCurrency } from './formatCurrency.js';
 import { s as submitGtag } from './submitGtag.js';
 import { d as defineCustomElement$5 } from './zonos-banner2.js';

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as cartStore, t as translate } from './stripe.js';
+import { c as cartStore } from './stripe.js';
+import { a as translate } from './translationStore.js';
 import { z as zonosStore } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { t as tinycolor, i as isDarkColor } from './isDarkColor.js';
@@ -89,17 +90,17 @@ const ZonosCheckoutProgressTabs = /*@__PURE__*/ proxyCustomElement(class ZonosCh
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (h(Host, { key: '8b1ca1b840103589ca7929771a7b828928ef1a64', class: "zonos--elements", style: {
+        return (h(Host, { key: '97800b058d8cb5617f8604c9c5702e2f8e8d943b', 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: 'ceea1729e3b2776700ef8eb0c20cecd65005fa75', 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: '793ff1a1712c7fcdd309b58ce69f90e8ff14bfa7', class: "zonos--tab-progress" }, h("div", { key: '8fd846cade13695c42d8006427c4d7fd667edc37', class: "zonos--progress-bar-fill" }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get ele() { return this; }

package/dist/components/zonos-checkout.js

@@ -1,30 +1,35 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { a as localizationStore, b as log, d as stripeStoreGetDomesticShippingSession, e as localizationStoreUpdateSelectedCountryCode, f as stripeStoreCleanupDomesticShippingSession, l as logError, g as stripeStoreSaveDomesticShippingSession, i as initStripeElements, c as cartStore, j as cartStoreUpdateItems, k as cartStoreReset, m as cartStoreResetTabItems, s as stripeStore, n as stripeStoreInitCheckoutSession, o as cartStoreUpdateToErrorState, t as translate, p as stripeStorePrefetchLandedCost, q as cartStoreNextStep, r as stripeStoreConfirmPayment, u as stripeStoreReset } from './stripe.js';
+import { a as localizationStore, b as log, d as stripeStoreGetDomesticShippingSession, e as localizationStoreUpdateSelectedCountryCode, f as stripeStoreCleanupDomesticShippingSession, l as logError, g as stripeStoreSaveDomesticShippingSession, i as initStripeElements, c as cartStore, h as cartStoreUpdateItems, j as cartStoreReset, k as cartStoreResetTabItems, s as stripeStore, m as stripeStoreInitCheckoutSession, n as cartStoreUpdateToErrorState, o as stripeStorePrefetchLandedCost, p as cartStoreNextStep, q as stripeStoreConfirmPayment, r as stripeStoreReset } from './stripe.js';
+import { a as translate } from './translationStore.js';
 import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
-import { c as createCustomEvent, d as defineCustomElement$l } from './zonos-checkout-finish2.js';
-import { s as sendErrorLog } from './sendErrorLog.js';
+import { c as createCustomEvent, s as sendErrorLog, d as defineCustomElement$n } from './zonos-checkout-finish2.js';
 import { c as classes } from './classes.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { i as isDarkColor } from './isDarkColor.js';
 import { s as submitGtag } from './submitGtag.js';
-import { d as defineCustomElement$t } from './zonos-address2.js';
-import { d as defineCustomElement$s } from './zonos-badge2.js';
-import { d as defineCustomElement$r } from './zonos-banner2.js';
-import { d as defineCustomElement$q } from './zonos-button2.js';
-import { d as defineCustomElement$p } from './zonos-card2.js';
-import { d as defineCustomElement$o } from './zonos-cart-items2.js';
-import { d as defineCustomElement$n } from './zonos-cart-subtotal2.js';
-import { d as defineCustomElement$m } from './zonos-checkbox2.js';
-import { d as defineCustomElement$k } from './zonos-checkout-footer2.js';
-import { d as defineCustomElement$j } from './zonos-checkout-payment2.js';
-import { d as defineCustomElement$i } from './zonos-checkout-progress-tabs2.js';
-import { d as defineCustomElement$h } from './zonos-collapse2.js';
-import { d as defineCustomElement$g } from './zonos-custom-message2.js';
-import { d as defineCustomElement$f } from './zonos-customer-info2.js';
-import { d as defineCustomElement$e } from './zonos-dialog2.js';
-import { d as defineCustomElement$d } from './zonos-icon2.js';
+import { R as RemoveIcon, d as defineCustomElement$v } from './zonos-address-update-dialog2.js';
+import { d as defineCustomElement$y } from './zonos-address2.js';
+import { d as defineCustomElement$x } from './zonos-address-display2.js';
+import { d as defineCustomElement$w } from './zonos-address-form2.js';
+import { d as defineCustomElement$u } from './zonos-badge2.js';
+import { d as defineCustomElement$t } from './zonos-banner2.js';
+import { d as defineCustomElement$s } from './zonos-button2.js';
+import { d as defineCustomElement$r } from './zonos-card2.js';
+import { d as defineCustomElement$q } from './zonos-cart-items2.js';
+import { d as defineCustomElement$p } from './zonos-cart-subtotal2.js';
+import { d as defineCustomElement$o } from './zonos-checkbox2.js';
+import { d as defineCustomElement$m } from './zonos-checkout-footer2.js';
+import { d as defineCustomElement$l } from './zonos-checkout-payment2.js';
+import { d as defineCustomElement$k } from './zonos-checkout-progress-tabs2.js';
+import { d as defineCustomElement$j } from './zonos-collapse2.js';
+import { d as defineCustomElement$i } from './zonos-country-flag2.js';
+import { d as defineCustomElement$h } from './zonos-custom-message2.js';
+import { d as defineCustomElement$g } from './zonos-customer-info2.js';
+import { d as defineCustomElement$f } from './zonos-dialog2.js';
+import { d as defineCustomElement$e } from './zonos-icon2.js';
+import { d as defineCustomElement$d } from './zonos-input2.js';
 import { d as defineCustomElement$c } from './zonos-language-select2.js';
 import { d as defineCustomElement$b } from './zonos-link-authentication2.js';
 import { d as defineCustomElement$a } from './zonos-payment2.js';
@@ -312,8 +317,6 @@ const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
 </svg>
 `;
 
-const RemoveIcon = `<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--amino-gray-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
-
 const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-h *.sc-zonos-checkout{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--amino-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:32px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-gray-0)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 8px 8px}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:24px}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:24px;top:24px;z-index:2}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:76px;margin-bottom:8px}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:32px}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:12px;padding-bottom:76px}@media (max-width: 768px){.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding-bottom:0px}}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2;border-right:none}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:16px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border:var(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:12px;margin-top:32px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--review.sc-zonos-checkout{margin-bottom:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--cart-items.sc-zonos-checkout{margin-top:8px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout zonos-checkout-footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}";
 const ZonosCheckoutStyle0 = zonosCheckoutCss;
 
@@ -514,6 +517,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
                 postal_code: legacyShippingInfo.customerZip,
                 state: legacyShippingInfo.customerState,
             },
+            email: legacyShippingInfo.customerEmail || '',
             name: legacyShippingInfo.customerName,
             phone: legacyShippingInfo.customerPhone,
         };
@@ -538,6 +542,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
                         postal_code: shippingAddressSession.postalCode,
                         state: shippingAddressSession.state,
                     },
+                    email: '',
                     name: `${shippingAddressSession.firstName} ${shippingAddressSession.lastName}`,
                     phone: shippingAddressSession.phone,
                 };
@@ -752,10 +757,10 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         };
         const renderContent = () => {
             return (h("div", { class: 'zonos--content', style: {
-                    '--border-radius': getBorderRadius(style),
+                    '--border-radius': getBorderRadius({ overrideBorderStyle: style }),
                 } }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
                     '--primary-color': !this.isMobile ? colorPrimary : '',
-                } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isLegacyCheckout && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
+                } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isLegacyCheckout && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile
                     if (!this.isMobile) {
                         return;
@@ -778,7 +783,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
                 hasFooter && 'has-footer',
                 this.preview && 'preview',
                 this.isMobile && 'mobile',
-            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent()))));
+            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent()))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
@@ -815,7 +820,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zonos-checkout", "zonos-address", "zonos-badge", "zonos-banner", "zonos-button", "zonos-card", "zonos-cart-items", "zonos-cart-subtotal", "zonos-checkbox", "zonos-checkout-finish", "zonos-checkout-footer", "zonos-checkout-payment", "zonos-checkout-progress-tabs", "zonos-collapse", "zonos-custom-message", "zonos-customer-info", "zonos-dialog", "zonos-icon", "zonos-language-select", "zonos-link-authentication", "zonos-payment", "zonos-review", "zonos-select-dialog-header", "zonos-shipping", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text", "zonos-tooltip", "zonos-v-stack"];
+    const components = ["zonos-checkout", "zonos-address", "zonos-address-display", "zonos-address-form", "zonos-address-update-dialog", "zonos-badge", "zonos-banner", "zonos-button", "zonos-card", "zonos-cart-items", "zonos-cart-subtotal", "zonos-checkbox", "zonos-checkout-finish", "zonos-checkout-footer", "zonos-checkout-payment", "zonos-checkout-progress-tabs", "zonos-collapse", "zonos-country-flag", "zonos-custom-message", "zonos-customer-info", "zonos-dialog", "zonos-icon", "zonos-input", "zonos-language-select", "zonos-link-authentication", "zonos-payment", "zonos-review", "zonos-select-dialog-header", "zonos-shipping", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text", "zonos-tooltip", "zonos-v-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "zonos-checkout":
             if (!customElements.get(tagName)) {
@@ -824,85 +829,110 @@ function defineCustomElement$1() {
             break;
         case "zonos-address":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$y();
+            }
+            break;
+        case "zonos-address-display":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$x();
+            }
+            break;
+        case "zonos-address-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$w();
+            }
+            break;
+        case "zonos-address-update-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$v();
             }
             break;
         case "zonos-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$u();
             }
             break;
         case "zonos-banner":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$t();
             }
             break;
         case "zonos-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$s();
             }
             break;
         case "zonos-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$r();
             }
             break;
         case "zonos-cart-items":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$q();
             }
             break;
         case "zonos-cart-subtotal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$p();
             }
             break;
         case "zonos-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$o();
             }
             break;
         case "zonos-checkout-finish":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$n();
             }
             break;
         case "zonos-checkout-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$m();
             }
             break;
         case "zonos-checkout-payment":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$l();
             }
             break;
         case "zonos-checkout-progress-tabs":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$k();
             }
             break;
         case "zonos-collapse":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$j();
+            }
+            break;
+        case "zonos-country-flag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
             }
             break;
         case "zonos-custom-message":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "zonos-customer-info":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "zonos-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "zonos-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }