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

package/dist/cjs/zonos-address_4.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3b4816ef.js');
-const cart = require('./cart-b1c89065.js');
+const cart = require('./cart-1b1d39af.js');
 const zonosStore = require('./zonosStore-aee974e0.js');
-const sendErrorLog = require('./sendErrorLog-f7172707.js');
+const sendErrorLog = require('./sendErrorLog-29e50f7e.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-c8cc2bb3.js');
 const isDarkColor = require('./isDarkColor-f5473002.js');
@@ -224,7 +224,7 @@ const ZonosAddress = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: 'be43a9b0929211e2dd8e83950569caa12213ad91', class: "zonos--address zonos--elements" }, index.h("zonos-text", { key: '2a9214eae80832c2f706f3dc2e7c837c9f615dd6', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { key: '70a039b36fe8550680c95338f1b225389f5c7fab', class: "zonos--address-component" }), this.invalidCharacterList && (index.h("zonos-banner", { key: 'a9cf6873645eb0ef68be0595d1f16483fccdf5df', bannerTitle: cart.translate('Please resolve the following errors:'), intent: "error" }, Object.keys(this.invalidCharacterList).map(fieldName => (index.h("zonos-text", null, `- ${cart.translate(mappedFields[fieldName])}: ${cart.translate('only supports Latin characters (A-Z, a-z)')}`)))))));
+        return (index.h(index.Host, { key: 'd5100d824d84c5e5b238f4877d489ca1b3f7b886', class: "zonos--address zonos--elements" }, index.h("zonos-text", { key: '0fd51ddf9b08b4f62aa75a5f2e919d40e52f6fc3', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { key: '3a53ec2a36e96639ec5437b928d4be4b84fb3aff', class: "zonos--address-component" }), this.invalidCharacterList && (index.h("zonos-banner", { key: '1141be407cff5b6741a40a06712a71e881d3a082', bannerTitle: cart.translate('Please resolve the following errors:'), intent: "error" }, Object.keys(this.invalidCharacterList).map(fieldName => (index.h("zonos-text", null, `- ${cart.translate(mappedFields[fieldName])}: ${cart.translate('only supports Latin characters (A-Z, a-z)')}`)))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -272,14 +272,14 @@ const ZonosCheckbox = class {
                     ? 'var(--amino-gray-800)'
                     : 'var(--amino-gray-0)';
         const borderStyle = getBorderRadius.getBorderRadius(this.borderStyle, '4px');
-        return (index.h(index.Host, { key: '47b3b90b44f846e49de755f2c131e79da3f34c0f', class: classes.classes(['zonos--elements zonos--checkbox']), style: {
+        return (index.h(index.Host, { key: '1383262a5cca00ede5154fbdf37bbabb8cbcd501', class: classes.classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, index.h("label", { key: '6c1aac697aee17eb684d8416ae65092e3095fada', class: classes.classes([this.isDisabled && 'disabled']) }, index.h("input", { key: 'f75b6bff9ea136596af3489721096d862ea622c3', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, index.h("label", { key: 'aa01d0b1eebb53587f8d2d344e3b1d01a6a7a683', class: classes.classes([this.isDisabled && 'disabled']) }, index.h("input", { key: '166eef6010570137110f8548c9eb76f32e5616e9', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), index.h("span", { key: '2a2dcd8e798fdd54daf43dedcb42dac3088a6dfc', class: "checkmark-container" }, index.h("svg", { key: 'e74713df9adc970d0a5b8d6374eb63e69c64ff1a', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '3ae1a1a8f74a607ad5d4e4f940b45ac0b242426e', "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 && (index.h("zonos-text", { key: '25ff0a74e7ec6409e41d3f2998648f0c28a28ae0', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), index.h("span", { key: 'd98289266cd4e78dd1e5c9b89019d0dd4927e4d0', class: "checkmark-container" }, index.h("svg", { key: 'e179fe12a77e0c7f1f48bc943ff472d0a75e05d5', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, index.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 && (index.h("zonos-text", { key: 'b83bb5bb1881580be3d0ab3ed83157a0c0ce3f8e', size: this.fontSize }, this.label)))));
     }
 };
 ZonosCheckbox.style = ZonosCheckboxStyle0;
@@ -329,10 +329,10 @@ const ZonosCollapse = class {
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (index.h(index.Host, { key: 'db574e5124dcd54045af65a6f429af3fddc501fd', class: 'zonos--elements zonos--collapse', style: {
+        return (index.h(index.Host, { key: 'ec163c2c73f38e479ba22bb3bea5dbe2f156170b', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, index.h("div", { key: '9f773ededa3fb0b47b2dba74ef701fd8dc3af396' }, index.h("iframe", { key: '50a8449beb6272a854c34b859be04cdeea10f804', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), index.h("slot", { key: '5c0bd94dfe7bbb6a8dc20b1bac69e81ae7f99f76' }))));
+            } }, index.h("div", { key: 'ab8b73ff44968d8e2f3dcf75439b09da36fdfb22' }, index.h("iframe", { key: '0b6d3518382c4c17a6eacb07c1617e84c7301c39', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), index.h("slot", { key: '752d9054dadf8905e22cfcca81bb966c2d3ce8d3' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -373,7 +373,7 @@ const ZonosLinkAuthentication = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: '675de93a982a3cc558b64f24971441c227955e6f', class: "zonos--link-authentication zonos--elements" }, index.h("zonos-text", { key: 'd75a5a301e869325c9a249275ce10d4905c0198c', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { key: 'fbf58d00fa76d7e715f2d1056a298840043e1056', class: "zonos--link-authentication-component" })));
+        return (index.h(index.Host, { key: '97c3c388d1a035e6a46ecdbd3bc66d80a589b19f', class: "zonos--link-authentication zonos--elements" }, index.h("zonos-text", { key: 'e799af821045b2c1792d2971843afa0c7d3ece5b', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { key: 'eaf9be27a11d279c13f261e1312ee8a46e4620f7', class: "zonos--link-authentication-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/zonos-badge_2.cjs.entry.js

@@ -20,16 +20,16 @@ const ZonosBadge = class {
         this.rounded = false;
     }
     render() {
-        return (index.h(index.Host, { key: '9113b76d0368284d8062ba73cb1433ae64648c56', class: classes.classes(['zonos--elements zonos--badge']), style: {
+        return (index.h(index.Host, { key: 'cc521e396f505c1f3a69d40b755585c1e439f120', class: classes.classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '0edaabad09319fa6cc2d5b02c304e5ed77d35eac', class: classes.classes([
+            } }, index.h("div", { key: '132ee2adfd3be7634d71df9ee1bf813fd56fe768', class: classes.classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, index.h("zonos-text", { key: '2d37289c26e12cb074ff7003032a1d417bbf1fdf' }, index.h("slot", { key: '2caa00a312b624d747dbe145b8673ced9118e49e' })))));
+            ]) }, this.icon, index.h("zonos-text", { key: 'ebe7b204422dc3b0d9fe93d3ca9bd75ceddb9f37' }, index.h("slot", { key: 'e58b021307f14226ce15df693bedfa50f79f6d8a' })))));
     }
 };
 ZonosBadge.style = ZonosBadgeStyle0;
@@ -45,10 +45,10 @@ const ZonosTooltip = class {
         this.showTooltip = false;
     }
     render() {
-        return (index.h(index.Host, { key: '5226e33bb8f9280965b254c51235c38e2e5f6ab6', class: "zonos--elements" }, index.h("div", { key: 'fd9bc052cc1081cbd87eaa3f4e6f0f53070c5b53', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '82d9885a2afb7e28707ddf6b24cb7c2dc148ef33' }), index.h("div", { key: 'c59b3beaca558dc95149455c9a15a8ce26bb0d70', class: classes.classes([
+        return (index.h(index.Host, { key: '3b1bc52074428e85d2e3939b0fb6dbf4e8146e1c', class: "zonos--elements" }, index.h("div", { key: 'ded9a789ec041c9bd01c4a225ad0706a097c2215', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '2052001f18e774bf5f364f2f94fb83fbc161e510' }), index.h("div", { key: 'ed207e64c5361aadf6deb25574b736bbbb32cf49', class: classes.classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, index.h("zonos-text", { key: 'f5213ba0f401359e5bccd289df3eae18e7b18a1d', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: '3bfad7df7cf6715230ffc0bc1c0b49b8900955b7', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, index.h("zonos-text", { key: 'c2b064cac7a7851bbb8cd55ec116655160fffe6b', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: 'e03b47929a5b1856b6770e97403c85088d6a6c77', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
 };
 ZonosTooltip.style = ZonosTooltipStyle0;

package/dist/cjs/zonos-button_2.cjs.entry.js

@@ -100,12 +100,12 @@ const ZonosButton = class {
         const spinnerColor = backgroundActualColor && isDarkColor.isDarkColor(backgroundActualColor)
             ? 'white'
             : 'black';
-        return (index.h(index.Host, { key: '104b26d8b3fac6bafce6f5f852775af682d1b3f3', class: classes.classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (index.h(index.Host, { key: '105badc02dbdcd9c782942e2b71719cd0ae7444e', class: classes.classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            }) }, index.h("button", { key: '2ad1b59dd11e4460928b42f33e5d421e90f259d2', class: classes.classes([
+            }) }, index.h("button", { key: 'c817b0eec6a0649e48155f284965412beb89a5f6', class: classes.classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -118,7 +118,7 @@ const ZonosButton = class {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (index.h("div", { key: '2849e63aa713c682e61a4a0c95e9bd5e0f5f8892', class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { key: '7040089b82edd821ae997f39fbbab50c0e523924', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: 'b20b86b70bbb180f45880ffaf1fd13751fc4682f', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (index.h("div", { key: '85d6175e728b87276b95e831560530a3f7424a7c', class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { key: 'c65d771ca5182ac27da1769884dd8a4060037a1b', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: 'e3c6b155c4eb0f22aa9378586563face84ef8c2d', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     get ele() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/zonos-card_2.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-3b4816ef.js');
 const zonosStore = require('./zonosStore-aee974e0.js');
 const classes = require('./classes-b7918f56.js');
-const cart = require('./cart-b1c89065.js');
+const cart = require('./cart-1b1d39af.js');
 const ILanguage = require('./ILanguage-d247b45b.js');
 require('./isDarkColor-f5473002.js');
 require('./getBorderRadius-c8cc2bb3.js');
@@ -24,12 +24,12 @@ const ZonosCard = class {
         this.spacing = '24px';
     }
     render() {
-        return (index.h(index.Host, { key: '0d8b5af14b922c5bb4664a657da1f5f40dbb80c9', style: {
+        return (index.h(index.Host, { key: '49d97d816bec7113ef6654cdf6f54598a17ebc00', style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '4636de2659dac17eddf05aa9ce0e3b1b3091de65', class: classes.classes(['styled-card']), style: { padding: this.spacing } }, this.label && (index.h("header", { key: '591276139b808995cb26b54921bdbb1d55995fbb', class: "card-header", style: { padding: this.spacing } }, index.h("zonos-text", { key: '017ca4195a3d2b9efdc337966203165a1f0f074d', type: "subheader" }, this.label), index.h("h-stack", { key: 'dc3a2c4ad7cb2a053819727fc5bff90d70438a25', spacing: 8 }, this.actions))), index.h("slot", { key: '0f19e23f2744b2ccbfc5ca7d1aefebf7326ab649' }), (this.footerActions || this.footerContent) && (index.h("footer", { key: 'fd0adb2b5146f0542c12b2628f011417911c54ec', class: "card-footer", style: {
+            } }, index.h("div", { key: '6c4e326aa182ab597b099ddaf228b8b83efc471f', class: classes.classes(['styled-card']), style: { padding: this.spacing } }, this.label && (index.h("header", { key: 'eb96bb3be8a7f78cec51f0288ed7d78b4f598659', class: "card-header", style: { padding: this.spacing } }, index.h("zonos-text", { key: '11b6afcf37ec978d154990ab0a6b558d3b203126', type: "subheader" }, this.label), index.h("h-stack", { key: 'ae03b7569dc0f0e28fccd6c225305db778c6a21e', spacing: 8 }, this.actions))), index.h("slot", { key: 'b6224bc4d019e302b36a81c6c3a81e2bca4504b1' }), (this.footerActions || this.footerContent) && (index.h("footer", { key: 'f629f3d4914a92f400e7ccfd347e211bbf11035b', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, index.h("div", { key: '82bc7d63eec3c3d716128740e86879a11befa0aa' }, this.footerContent), index.h("h-stack", { key: '66261eaffa40882c5bd2255649325a16a5f65f7e', spacing: 8 }, this.footerActions))))));
+            } }, index.h("div", { key: '696d8588e5de862f111c09b801d26f2625e4017f' }, this.footerContent), index.h("h-stack", { key: '3b2df392b850b27fcdc6e745a2d5093124562367', spacing: 8 }, this.footerActions))))));
     }
 };
 ZonosCard.style = ZonosCardStyle0;
@@ -55,9 +55,9 @@ const ZonosLanguageSelect = class {
     }
     render() {
         const { selectedLocale } = cart.localizationStore;
-        return (index.h(index.Host, { key: 'c3185eaf7f8e73d1356d6cba5a7c7ba6da9db7f8', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: 'b17a55c8fe256cf1e484834700dec4ea512a0379', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '59c2af417f20ee915dfddaa08c2a9f4288a5d040', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '2cc4a3bed8e5e2c89f8ef624a9a0d2e778da9005', handleOnClose: () => this.handleOnClose(), label: cart.translate('Select a language') }), index.h("div", { key: 'b0bb95a16d56e344833f3d6ec3b23ae6d5b65270', class: "zonos--language-select-content" }, ILanguage.languages.map(language => (index.h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, index.h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, index.h("div", { key: '0d8c6f5902f3f25c2528d88dd76b625807f2bd62', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: 'c82d962040885203b20f384a56990d9515afeba6', handleOnClose: () => this.handleOnClose(), label: cart.translate('Select a language') }), index.h("div", { key: 'ac4a694a903eaa38886d929350b74b0c0114b61d', class: "zonos--language-select-content" }, ILanguage.languages.map(language => (index.h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, index.h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
 };
 ZonosLanguageSelect.style = ZonosLanguageSelectStyle0;

package/dist/cjs/zonos-cart-items_10.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3b4816ef.js');
-const cart = require('./cart-b1c89065.js');
+const cart = require('./cart-1b1d39af.js');
 const zonosStore = require('./zonosStore-aee974e0.js');
-const submitGtag = require('./submitGtag-219f4e54.js');
+const submitGtag = require('./submitGtag-ab287a34.js');
 const getBorderRadius = require('./getBorderRadius-c8cc2bb3.js');
-const sendErrorLog = require('./sendErrorLog-f7172707.js');
+const sendErrorLog = require('./sendErrorLog-29e50f7e.js');
 const classes = require('./classes-b7918f56.js');
 const ILanguage = require('./ILanguage-d247b45b.js');
 const isDarkColor = require('./isDarkColor-f5473002.js');
@@ -262,7 +262,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{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 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-24)}:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper .zonos--checkout-footer-logo{display:-ms-inline-flexbox;display:inline-flex;gap:var(--amino-space-8);-ms-flex-align:center;align-items:center}:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper .zonos--checkout-footer-logo a{line-height:0}:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper a{text-decoration:none}: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;gap:var(--amino-space-4)}:host(.mobile) .zonos--checkout-locale-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.mobile) .zonos--checkout-footer-icon-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 = class {
@@ -295,7 +295,7 @@ const ZonosCheckoutFooter = class {
         return (index.h(index.Host, { key: 'fae1e5cb1250e834ecf3b09f11785ddea61be3b2', class: classes.classes(['zonos--elements', this.isMobile && 'mobile']) }, index.h("div", { key: 'f3d48fcc675458dd38ca48e21f24a003b5ff9b56', class: "zonos--checkout-footer" }, index.h("div", { key: '97daec871630cf2bb33956b668abee2e715eceb5', class: "zonos--checkout-locale-wrapper" }, index.h("zonos-button", { key: 'cd6e12e8d1320e3e6542eef16f15ab27921748c3', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: index.h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), index.h("div", { key: 'bdc6d9311d2d039e87c261ead45474b7bf1fe992', class: classes.classes([
                 'zonos--checkout-footer-dialog',
                 this.showLanguageDialog && 'zonos--checkout-footer-dialog-open',
-            ]) }, index.h("zonos-language-select", { key: '7318bb4137e160e9ed05a423fb80f1806c4f0104', handleOnClose: () => this.toggleLanguageDialog() }))), index.h("div", { key: '55c76c6cf6777407532c00cf167d59e3cefc5eab', class: "zonos--checkout-footer-icon-wrapper" }, index.h("zonos-text", { key: '41a7fae5a1a08d22b91341ccfcc0df9daeeb8f82', textColor: colorDesktop, type: "caption" }, "Powered by"), index.h("a", { key: '394e19392718d2a40a351692fa358f8f86366b46', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: '4d8cadbb7c26e8f7888caad2b158d521ab504590', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 }))))));
+            ]) }, index.h("zonos-language-select", { key: '7318bb4137e160e9ed05a423fb80f1806c4f0104', handleOnClose: () => this.toggleLanguageDialog() }))), index.h("div", { key: '55c76c6cf6777407532c00cf167d59e3cefc5eab', class: "zonos--checkout-footer-icon-wrapper" }, index.h("a", { key: 'e2cf10499ed764fb2e7086761ece106580cd6440', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, index.h("zonos-text", { key: '0fe6c810a6d7f84a781655cefc47ec6cbb5131c9', textColor: colorDesktop }, "Privacy policy")), index.h("div", { key: '50401876a45161e80f593971e602e4c449e78dbe', class: "zonos--checkout-footer-logo" }, index.h("zonos-text", { key: '0f69d9d9955165de13a49ff00a7044090b141800', textColor: colorDesktop }, "Powered by"), index.h("a", { key: '680e6fe4d0a783e2ebc55a51ffb55846ad997249', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: '22aee1eb21306141e620bcc1b0dbf035bd710fba', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -304,47 +304,50 @@ const ZonosCheckoutFooter = class {
 };
 ZonosCheckoutFooter.style = ZonosCheckoutFooterStyle0;
 
-const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-payment-h *.sc-zonos-checkout-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-8)}.sc-zonos-checkout-payment-h zonos-button.sc-zonos-checkout-payment{-webkit-box-shadow:0 0 1px 0 var(--amino-gray-600);box-shadow:0 0 1px 0 var(--amino-gray-600)}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-button.sc-zonos-checkout-payment{width:100%}";
+const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-payment-h *.sc-zonos-checkout-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-8)}.sc-zonos-checkout-payment-h .zonos--error-banner.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-16)}.sc-zonos-checkout-payment-h zonos-button.sc-zonos-checkout-payment{-webkit-box-shadow:0 0 1px 0 var(--amino-gray-600);box-shadow:0 0 1px 0 var(--amino-gray-600)}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-button.sc-zonos-checkout-payment{width:100%}";
 const ZonosCheckoutPaymentStyle0 = zonosCheckoutPaymentCss;
 
 const ZonosCheckoutPayment = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.continueClicked = index.createEvent(this, "continueClicked", 7);
+        this.handleValidate = () => {
+            var _a;
+            return !!((_a = cart.stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
+        };
         /**
          * handler for continue button click
          */
         this.continueClickHandler = () => {
+            if (!this.handleValidate()) {
+                this.showErrorBanner = true;
+                return;
+            }
             this.continueClicked.emit();
+            // submit google tag when the form is complete
+            submitGtag.submitGtag('zonos-checkout-payment-info');
         };
         this.paymentError = false;
         this.submitBtnType = undefined;
         this.continueLoading = false;
         this.submitBtnColor = undefined;
-        this.disabled = true;
-    }
-    watchFormComplete() {
-        if (!this.disabled) {
-            // submit google tag when the form is complete
-            submitGtag.submitGtag('zonos-checkout-payment-info');
-        }
+        this.showErrorBanner = false;
     }
     render() {
-        var _a;
         if (!cart.stripeStore.stripeElements) {
             return null;
         }
-        this.disabled = !((_a = cart.stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
-        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Payment method')), this.paymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, cart.translate("We couldn't complete your payment. Please verify the payment details and try again."))), index.h("zonos-payment", null), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        // start validate on typing after error banner is shown, and hide it if the form is complete
+        if (this.showErrorBanner) {
+            this.showErrorBanner = !this.handleValidate();
+        }
+        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Payment method')), this.showErrorBanner && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, cart.translate('Missing required fields. Make sure all fields are completed.'))), this.paymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, cart.translate("We couldn't complete your payment. Please verify the payment details and try again."))), index.h("zonos-payment", null), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
             amount: cart.cartStore.total,
             currency: cart.cartStore.currency,
         }))))));
     }
-    static get watchers() { return {
-        "disabled": ["watchFormComplete"]
-    }; }
 };
 ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
 
@@ -428,24 +431,24 @@ const ZonosCheckoutProgressTabs = class {
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (index.h(index.Host, { key: '508d496a46dc5c97d68326e079a344f677f9cfc2', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: '8b1ca1b840103589ca7929771a7b828928ef1a64', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, index.h("div", { key: '35892f4230914211d8aecde8bbc99fffebe44f47', class: "zonos--tab-wrapper" }, Object.values(cart.cartStore.tabItems).map((tab, index$1) => {
+            } }, index.h("div", { key: 'b1bd07fcc96bd4e900ba945e9f57b27967d3a458', class: "zonos--tab-wrapper" }, Object.values(cart.cartStore.tabItems).map((tab, index$1) => {
             const isSelected = tab.value === selectedStep;
             return (index.h("button", { class: classes.classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cart.cartStore.step = tab.value) }, index.h("div", { class: "zonos--tab-index" }, index.h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index$1 + 1), index.h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), index.h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, cart.translate(tab.label))));
-        })), index.h("div", { key: '475526f811089f65ecfa1d81348f22e77662e565', class: "zonos--tab-progress" }, index.h("div", { key: 'b45d8170d733043c66e7d6e8f52874f3ccfa0274', class: "zonos--progress-bar-fill" }))));
+        })), index.h("div", { key: 'f5b8b79050e1ebf23355161202a53854a0d9d08d', class: "zonos--tab-progress" }, index.h("div", { key: '5e9b4a726dd0cc6601a0097652b06759a7bba1fe', class: "zonos--progress-bar-fill" }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get ele() { return index.getElement(this); }
 };
 ZonosCheckoutProgressTabs.style = ZonosCheckoutProgressTabsStyle0;
 
-const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--address.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info+.zonos--address.sc-zonos-customer-info{margin-bottom:0}.sc-zonos-customer-info-h zonos-button.sc-zonos-customer-info{-webkit-box-shadow:0 0 1px 0 var(--amino-gray-600);box-shadow:0 0 1px 0 var(--amino-gray-600)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:-5px;padding-top:var(--amino-space-8);margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:100%}";
+const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--address.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info+.zonos--address.sc-zonos-customer-info{margin-bottom:0}.sc-zonos-customer-info-h zonos-button.sc-zonos-customer-info{-webkit-box-shadow:0 0 1px 0 var(--amino-gray-600);box-shadow:0 0 1px 0 var(--amino-gray-600)}.sc-zonos-customer-info-h .zonos--error-banner.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:-5px;padding-top:var(--amino-space-8);margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:100%}";
 const ZonosCustomerInfoStyle0 = zonosCustomerInfoCss;
 
 const ZonosCustomerInfo = class {
@@ -467,49 +470,64 @@ const ZonosCustomerInfo = class {
                 }
                 return;
             }
+            if (!this.handleValidate()) {
+                // scroll to the top zonos-banner
+                setTimeout(() => {
+                    var _a;
+                    (_a = this.el
+                        .querySelector('zonos-banner.zonos--error-banner')) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center',
+                    });
+                }, 50);
+                this.showErrorBanner = true;
+                return;
+            }
+            this.showErrorBanner = false;
             this.continueClicked.emit();
+            // submit google tag when the form is complete
+            submitGtag.submitGtag('zonos-checkout-customer-info');
+            void submitGtag.trackConversionEvent('checkout_customerInfoCompleted');
+        };
+        this.handleValidate = () => {
+            const stripeShippingAddressEventData = cart.stripeStore.stripeAddressEventData;
+            const stripeBillingAddressEventData = cart.stripeStore.stripeBillingAddressEventData;
+            const stripeLinkEventData = cart.stripeStore.stripeLinkEventData;
+            // if the shipping is different from billing, we need to make sure the billing address is valid and disable the button if it's not
+            const isValidBilling = cart.stripeStore.stripeShippingSameAsBilling
+                ? !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete)
+                : !!(stripeBillingAddressEventData === null || stripeBillingAddressEventData === void 0 ? void 0 : stripeBillingAddressEventData.complete);
+            const isValidShipping = !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete);
+            const isValidLink = !!(stripeLinkEventData === null || stripeLinkEventData === void 0 ? void 0 : stripeLinkEventData.complete);
+            if (!isValidBilling || !isValidShipping || !isValidLink) {
+                return false;
+            }
+            return true;
         };
         this.continueLoading = false;
         this.submitBtnType = undefined;
         this.submitBtnColor = undefined;
         this.defaultAddress = null;
-        this.disabled = true;
+        this.showErrorBanner = false;
         this.hasInvalidShippingCharacters = false;
         this.hasInvalidBillingCharacters = false;
     }
-    watchFormComplete() {
-        if (!this.disabled) {
-            // submit google tag when the form is complete
-            submitGtag.submitGtag('zonos-checkout-customer-info');
-            void submitGtag.trackConversionEvent('checkout_customerInfoCompleted');
-        }
-    }
     render() {
         if (!cart.stripeStore.stripeElements) {
             return null;
         }
-        const stripeShippingAddressEventData = cart.stripeStore.stripeAddressEventData;
-        const stripeBillingAddressEventData = cart.stripeStore.stripeBillingAddressEventData;
-        const stripeLinkEventData = cart.stripeStore.stripeLinkEventData;
-        // if the shipping is different from billing, we need to make sure the billing address is valid and disable the button if it's not
-        const isValidBilling = cart.stripeStore.stripeShippingSameAsBilling
-            ? !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete)
-            : !!(stripeBillingAddressEventData === null || stripeBillingAddressEventData === void 0 ? void 0 : stripeBillingAddressEventData.complete);
-        const isValidShipping = !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete);
-        const isValidLink = !!(stripeLinkEventData === null || stripeLinkEventData === void 0 ? void 0 : stripeLinkEventData.complete);
-        // make sure data is valid
-        this.disabled = !isValidBilling || !isValidShipping || !isValidLink;
         const showBilling = !cart.stripeStore.stripeShippingSameAsBilling;
-        return (index.h(index.Host, { class: "zonos--customer-info zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Customer information')), index.h("zonos-link-authentication", { titleText: cart.translate('Contact') }), index.h("zonos-address", { defaultAddress: this.defaultAddress, onInvalidCharacters: e => (this.hasInvalidShippingCharacters = e.detail), titleText: cart.translate('Address'), type: "shipping" }), index.h("zonos-checkbox", { isChecked: cart.stripeStore.stripeShippingSameAsBilling, label: cart.translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        // start validate on typing after error banner is shown, and hide it if the form is complete
+        if (this.showErrorBanner) {
+            this.showErrorBanner = !this.handleValidate();
+        }
+        return (index.h(index.Host, { class: "zonos--customer-info zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Customer information')), this.showErrorBanner && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, cart.translate('Missing required fields. Make sure all fields are completed.'))), index.h("zonos-link-authentication", { titleText: cart.translate('Contact') }), index.h("zonos-address", { defaultAddress: this.defaultAddress, onInvalidCharacters: e => (this.hasInvalidShippingCharacters = e.detail), titleText: cart.translate('Address'), type: "shipping" }), index.h("zonos-checkbox", { isChecked: cart.stripeStore.stripeShippingSameAsBilling, label: cart.translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 cart.stripeStore.stripeShippingSameAsBilling = e.detail;
-            } }), index.h("zonos-collapse", { collapsed: !showBilling }, index.h("zonos-address", { defaultAddress: this.defaultAddress, onInvalidCharacters: e => (this.hasInvalidBillingCharacters = e.detail), titleText: cart.translate('Billing address'), type: "billing" })), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            } }), index.h("zonos-collapse", { collapsed: !showBilling }, index.h("zonos-address", { defaultAddress: this.defaultAddress, onInvalidCharacters: e => (this.hasInvalidBillingCharacters = e.detail), titleText: cart.translate('Billing address'), type: "billing" })), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, cart.translate('Continue to shipping'))))));
     }
     get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "disabled": ["watchFormComplete"]
-    }; }
 };
 ZonosCustomerInfo.style = ZonosCustomerInfoStyle0;
 
@@ -562,7 +580,7 @@ const ZonosDialog = class {
             document.body.style.overflow = 'auto';
         }
         const borderStyle = getBorderRadius.getBorderRadius(this.borderStyle);
-        return (index.h(index.Host, { key: 'b2f500bb70769f6d14d7e4002e5b11fe854e3bd1', class: classes.classes([
+        return (index.h(index.Host, { key: 'cfa43ca3e1e64bbc9fb81dd35f07b5a2a57ef5a7', class: classes.classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -573,10 +591,10 @@ const ZonosDialog = class {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, index.h("div", { key: '9715c4765caee524a8030b2baa9352e44d0eeec0', class: "zonos--backdrop" }), index.h("div", { key: '05357a1ab95c995a35602517555f33e14c712bcc', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, index.h("div", { key: '6acbd0635fcfb95910c20db9d1803a3c2685f4ac', class: "zonos--dialog" }, this.isLoading && (index.h("div", { key: '5a94b2d158ffdd5c1d5b4b6e2d1cca60ff31fb10', class: "zonos--loading" }, index.h("zonos-spinner", { key: '80fe57fea64e1ac4a5eb286fe19c327230748837', size: 30 }))), (this.headerText || !this.noCloseButton) && (index.h("div", { key: '773b53526fc24469e41e927d50a0aadbc8470a4a', class: "zonos--header" }, this.headerText && (index.h("h3", { key: '9e9a754fdc82900b720ac5289b83d0217eb89517', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { key: '4525da6839849fd972f9b470e280f176803921ed', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), index.h("div", { key: '1c9ff5924f0fa9cdb7753fbcf0c2dc51171535b0', class: classes.classes([
+            } }, index.h("div", { key: '967accb9ec4e552bab62bbec21fd0319d68828dc', class: "zonos--backdrop" }), index.h("div", { key: '37041f00cd3a996510f25708460a91baa527ed74', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, index.h("div", { key: '571cfdac8125f10d380e06efc1464ddcaf1f335e', class: "zonos--dialog" }, this.isLoading && (index.h("div", { key: '200e75be392f6e8745ebbf2ddfa74aaf3d027caa', class: "zonos--loading" }, index.h("zonos-spinner", { key: 'a5d5a0d22a5d8ae5a22207716a7904d7031efa8d', size: 30 }))), (this.headerText || !this.noCloseButton) && (index.h("div", { key: '37800b1fd96b0ff6df2724b4d62ea133470fae2c', class: "zonos--header" }, this.headerText && (index.h("h3", { key: 'eb0ef1b8c3d82d889f76b18b15d98a19fa1480a1', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { key: '24b6945af71c51a35a09177e65d0b081abec75cb', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), index.h("div", { key: 'a9d913ce8af53e60ffbf8eeb41b6d4372e0d389e', class: classes.classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, index.h("slot", { key: '96b0c127f550413a5108a6f87a8397a0c6e01e64' })), index.h("slot", { key: 'a5c64424aadb3a56682de39b497ecc0eafdf3de7', name: "dialog-footer" })))));
+            ]) }, index.h("slot", { key: '02c77f819baa6b1a684dfdf02b756ffa1fb55751' })), index.h("slot", { key: '0b469253c01c418d43d0865ae72d065d2a911aeb', name: "dialog-footer" })))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -630,7 +648,7 @@ const ZonosReview = class {
 };
 ZonosReview.style = ZonosReviewStyle0;
 
-const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{-webkit-box-shadow:0 0 1px 0 var(--amino-gray-600);box-shadow:0 0 1px 0 var(--amino-gray-600)}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
+const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h .zonos--error-banner.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{-webkit-box-shadow:0 0 1px 0 var(--amino-gray-600);box-shadow:0 0 1px 0 var(--amino-gray-600)}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
 const ZonosShippingStyle0 = zonosShippingCss;
 
 const ZonosShipping = class {
@@ -654,13 +672,27 @@ const ZonosShipping = class {
                 return;
             }
             this.isSelecting = false;
-            this.disabled = false;
+        };
+        this.handleValidate = () => {
+            return !!this.selectedShippingMethod;
         };
         /**
          * handler for continue button click
          */
         this.continueClickHandler = () => {
+            var _a;
+            // show error banner if the form is not complete
+            if (!this.handleValidate()) {
+                this.showErrorBanner = true;
+                return;
+            }
+            this.showErrorBanner = false;
             this.continueClicked.emit();
+            // submit google tag when the form is complete
+            submitGtag.submitGtag('zonos-checkout-shipping-info');
+            void submitGtag.trackConversionEvent('checkout_shippingInfoCompleted', {
+                serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+            });
         };
         this.initServiceLevels = () => {
             var _a;
@@ -692,37 +724,26 @@ const ZonosShipping = class {
         this.submitBtnType = undefined;
         this.selectedShippingMethod = null;
         this.isSelecting = false;
-        this.disabled = true;
+        this.showErrorBanner = false;
         this.serviceLevels = [];
     }
-    watchFormComplete() {
-        var _a;
-        if (!this.disabled) {
-            // submit google tag when the form is complete
-            submitGtag.submitGtag('zonos-checkout-shipping-info');
-            void submitGtag.trackConversionEvent('checkout_shippingInfoCompleted', {
-                serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
-            });
-        }
-    }
     componentWillLoad() {
         this.initServiceLevels();
         const selectedServiceLevel = this.serviceLevels.find(item => { var _a; return item.value === ((_a = cart.cartStore.selectedShippingOption) === null || _a === void 0 ? void 0 : _a.id); }) || null;
         if (selectedServiceLevel) {
             this.selectedShippingMethod = selectedServiceLevel;
         }
-        // enable continue button if there is a selected shipping option
-        this.disabled = !selectedServiceLevel;
     }
     render() {
-        var _a, _b;
-        return (index.h(index.Host, { key: '0ded6474793fbb142e8e9a3bc10f1b5ae88858a7', class: "zonos--shipping zonos--elements" }, index.h("div", { key: '334d49db61fe69bf43f2bf68828c724cb7c9851e', class: "zonos--group" }, index.h("zonos-text", { key: '57ac7f10aff623a7e9c009bee86a4e88c979417f', class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Shipping information')), index.h("zonos-text", { key: 'bb7679250828b859f90940617dc03c20addb6252', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.translate('Shipping method')), !((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) ? (index.h("zonos-banner", { bannerTitle: cart.translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (index.h("zonos-shipping-rich-radio", { initialSelectedValue: (_b = this.selectedShippingMethod) === null || _b === void 0 ? void 0 : _b.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), index.h("div", { key: 'ace80fcc503601d577fb7751777b00331c027f16', class: "zonos--group-btn" }, index.h("zonos-button", { key: 'd48000ef65953b5f99d95c4b404bb7a47351dbce', backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        var _a, _b, _c;
+        // start validate on typing after error banner is shown, and hide it if the form is complete
+        if (this.showErrorBanner) {
+            this.showErrorBanner = !this.handleValidate();
+        }
+        return (index.h(index.Host, { key: 'c172dbd75de8a0d5d32d7e3e1814a124aaa05c05', class: "zonos--shipping zonos--elements" }, index.h("div", { key: '3dbbfadac7c8fb2bd4f3337206da535add7c4dd5', class: "zonos--group" }, index.h("zonos-text", { key: '93c2e9f56359a0c046e23a0e8c70af9af2dad3f4', class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (index.h("zonos-banner", { key: 'dc0aa4f036719929344071fe68dd8bf98d493642', class: "zonos--error-banner", intent: "error" }, cart.translate('No shipping method selected'))), index.h("zonos-text", { key: '98dd599d8a87e3a350b928a5d0d9300aa197d731', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (index.h("zonos-banner", { bannerTitle: cart.translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (index.h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), index.h("div", { key: 'a59a2833967bde37cd2b31dca4209e8730ec92dc', class: "zonos--group-btn" }, index.h("zonos-button", { key: 'ef100ac737c28901f609b188bfa0b9e58d4363e8', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, cart.translate('Go to payment'))))));
     }
-    static get watchers() { return {
-        "disabled": ["watchFormComplete"]
-    }; }
 };
 ZonosShipping.style = ZonosShippingStyle0;
 

package/dist/cjs/zonos-checkout.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3b4816ef.js');
-const cart = require('./cart-b1c89065.js');
+const cart = require('./cart-1b1d39af.js');
 const zonosStore = require('./zonosStore-aee974e0.js');
-const submitGtag = require('./submitGtag-219f4e54.js');
-const sendErrorLog = require('./sendErrorLog-f7172707.js');
+const submitGtag = require('./submitGtag-ab287a34.js');
+const sendErrorLog = require('./sendErrorLog-29e50f7e.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-c8cc2bb3.js');
 const isDarkColor = require('./isDarkColor-f5473002.js');

package/dist/cjs/zonos-component.cjs.entry.js

@@ -22,7 +22,7 @@ const ZonosComponent = class {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return index.h("div", { key: '4d80a174a7fa12f620fc831eb7fe3f5ad8ad575b' }, "Hello, World! I'm ", this.getText());
+        return index.h("div", { key: '25e0ed1ec26c0b3b3d8539ccb58f914eac9301c8' }, "Hello, World! I'm ", this.getText());
     }
 };
 ZonosComponent.style = ZonosComponentStyle0;

package/dist/cjs/zonos-controller.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3b4816ef.js');
-const cart = require('./cart-b1c89065.js');
+const cart = require('./cart-1b1d39af.js');
 const zonosStore = require('./zonosStore-aee974e0.js');
 require('./isDarkColor-f5473002.js');
 require('./getBorderRadius-c8cc2bb3.js');
@@ -267,7 +267,7 @@ const ZonosController = class {
         zonosStore.zonosStore.organizationName = organizationName;
     }
     render() {
-        return index.h(index.Host, { key: 'e0869cf08934b9d047adef9875c9a5f50d604bdf', class: "zonos--elements" });
+        return index.h(index.Host, { key: 'fb8d58a358b76ed2def980d7cd516266253bbbb4', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;