@zonos/elements 1.3.80 → 1.3.82

package/dist/cjs/zonos-hello-dialog.cjs.entry.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-977c9d4c.js');
+const cart = require('./cart-ba540c8e.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const classes = require('./classes-b7918f56.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');
-require('./handleFetch-661a8225.js');
+require('./handleFetch-45e76490.js');
 require('./isDarkColor-5efc8367.js');
 require('./getBorderRadius-5a64574c.js');
 
@@ -272,18 +272,18 @@ const ZonosHelloDialog = class {
         const defaultMessage = formatStringWithLinks.formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (index.h(index.Host, { key: 'df052224c778ebfceeef7c827fa3da0e8a2f3dc9', class: "zonos--elements" }, index.h("div", { key: '0ecff6a07d24a72fb4f200cce82ab09e40b48baf', class: classes.classes([
+        return (index.h(index.Host, { key: '7ff123654399aee05fd295c108e01d924a8964e5', class: "zonos--elements" }, index.h("div", { key: '316720cc18d1b9fbbf86cbfcde1f25106b1197e8', class: classes.classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (index.h("div", { key: 'b2939d49930c8a34288a884582eb849a492080ff' }, index.h("div", { key: 'f1a22291d7865d57d37cbcd3c8f70c4aea57ed39', class: "zonos--hello-dialog-content" }, index.h("zonos-button", { key: 'ee3794826efc9fed856f0a320cf6428a428b4ea4', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), index.h("zonos-v-stack", { key: '3d2ff0b68268c97e385eb3cf7fcc34454d2ed3b5', spacing: 24 }, index.h("zonos-country-flag", { key: 'e09645ac583e59354d11b3c194d4d3f6d4780c55', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), index.h("zonos-v-stack", { key: '42017a698c1678b90c8c7bbece5d623d0800e37b', class: "zonos--hello-dialog-header", spacing: 4 }, index.h("zonos-text", { key: 'ac30b7683dcc65773159832eadad8542d1d1bda8', type: "boldSubheader" }, welcomeMessage), index.h("zonos-text", { key: '58cc0e8c51774c339b0fc735e4e98917ed614c8a', innerHTML: defaultMessage, textColor: "gray-800" })), index.h("zonos-v-stack", { key: '0b3a3b2bf981ed72654506cc31f07edf6268b0a4', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (index.h("div", { key: '29a0018c2c8eb7fdde938e432ea783517d364ea8' }, index.h("div", { key: 'a882452996503ddb4feb3e431eaf9cc14dc2ff34', class: "zonos--hello-dialog-content" }, index.h("zonos-button", { key: '2c656e792daa59c0ce5770d71a779de270a8adc8', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), index.h("zonos-v-stack", { key: '1dd3473645c5581fee41da086a478b6eb6f3104e', spacing: 24 }, index.h("zonos-country-flag", { key: '57bdcb6b5e2044b65868a53e91220b7eea5c389e', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), index.h("zonos-v-stack", { key: '8f01898edbd5c30771a2c8d12e0919f6b41cc96c', class: "zonos--hello-dialog-header", spacing: 4 }, index.h("zonos-text", { key: '75728fcc40efe82ff58e767b3c3c9f60f96f37b2', type: "boldSubheader" }, welcomeMessage), index.h("zonos-text", { key: 'b82ebf2adacbb72637064b04957846ee79f10bd5', innerHTML: defaultMessage, textColor: "gray-800" })), index.h("zonos-v-stack", { key: '7a0ae96961883e1a55248d4163da3bed2e76d077', spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (index.h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (index.h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-        }), index.h("zonos-card", { key: '196a593b167fc979bf0a2bef7f266ad3778f6ca0', spacing: "12px" }, index.h("zonos-v-stack", { key: '94925c753ddfdd1a659580f7f78f8d6626cdcdaa', spacing: 12 }, hasInclusivePrices ? (index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), index.h("zonos-text", null, inclusivePriceMessage))) : (index.h(index.Fragment, null, index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Duty de minimis", content: ImportIcon }), index.h("zonos-text", null, dutyDeMinimisMessage)), index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), index.h("zonos-text", null, taxDeMinimisMessage)))), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), index.h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), index.h("zonos-hello-dialog-footer", { key: '540006185ce1d28d610052801dcf9281773c5504', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (index.h("div", { key: '886c371fdfa8c9c15188ef9d6cbb637162fb0d27' }, index.h("zonos-country-select", { key: '1365bee67831b64637e5c481f239c557f2649694', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (index.h("div", { key: '44929f0c23627970b1706f6e8c76e51022201379' }, index.h("zonos-language-select", { key: '86b9f68c84da77f9e1af51dcb7d512eb6b289a27', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), index.h("zonos-card", { key: 'd6a1f8270f3b6c69febc04224e6a0fa7ada5e07a', spacing: "12px" }, index.h("zonos-v-stack", { key: '209eac48b847c3ac4c7e8eb9df35c95416d89536', spacing: 12 }, hasInclusivePrices ? (index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Duty de minimis", content: InclusivePricingIcon }), index.h("zonos-text", null, inclusivePriceMessage))) : (index.h(index.Fragment, null, index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Duty de minimis", content: ImportIcon }), index.h("zonos-text", null, dutyDeMinimisMessage)), index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Tax de minimis", content: MoneyIcon }), index.h("zonos-text", null, taxDeMinimisMessage)))), additionalInformation === null || additionalInformation === void 0 ? void 0 :
+            additionalInformation.map(info => (index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country", content: BagIcon }), index.h("zonos-text", { innerHTML: info })))))), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), index.h("zonos-hello-dialog-footer", { key: 'e9444ec1c3c3616712faeba92734b4275d373da1', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (index.h("div", { key: 'a612e3daa6de5e5f73422ed8ebed8b3a682c3c46' }, index.h("zonos-country-select", { key: 'b45c18d7feaf95e74da6e0540ea28325a24d287b', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (index.h("div", { key: 'e50779d3c0e3c83587ae445e9ded8e108f893e31' }, index.h("zonos-language-select", { key: 'b502cef6095a0e9a57b3c81fa354ca3614060878', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
 const zonosStore = require('./zonosStore-a4395972.js');
-const cart = require('./cart-977c9d4c.js');
+const cart = require('./cart-ba540c8e.js');
 const classes = require('./classes-b7918f56.js');
-const handleFetch = require('./handleFetch-661a8225.js');
+const handleFetch = require('./handleFetch-45e76490.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');
 require('./isDarkColor-5efc8367.js');
 require('./getBorderRadius-5a64574c.js');

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

@@ -27,17 +27,17 @@ const ZonosInput = class {
         this.inputChange.emit(newValue);
     }
     render() {
-        return (index.h(index.Host, { key: '66ab3a9ec4ac4f78e448008824471cecd4775e78', class: classes.classes([
+        return (index.h(index.Host, { key: '1ad1bc4853aa4f4c251e1ab8ac45be8d1e3e98b6', class: classes.classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--border-radius': getBorderRadius.getBorderRadius(),
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'cef0295dea117c8bf0b8f3dc090f7c34648b9b31', class: classes.classes([
+            } }, index.h("div", { key: 'd2fe3cd5800983913523ab6fce01b19d57c94d9c', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("input", { key: 'a5c9e0791292046e9520bf8d186f6dc76a23ba64', class: classes.classes([
+            ]) }, index.h("input", { key: 'e0493952e9171c24164f847be23a4462572df336', class: classes.classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.inputValue && 'has-content',
@@ -45,7 +45,7 @@ const ZonosInput = class {
             ]), disabled: this.isDisabled, onInput: e => {
                 const input = e.target;
                 this.inputChange.emit(input.value);
-            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), index.h("label", { key: '25f51d372fdb0819fe316bcbfce429d63ded358f', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), index.h("label", { key: 'f9733fa1eafc29354d3d6b045a05542927f3a5e1', class: "zonos--floated-label", "data-label": this.inputLabel }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/zonos-language-select_2.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-977c9d4c.js');
+const cart = require('./cart-ba540c8e.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-require('./handleFetch-661a8225.js');
+require('./handleFetch-45e76490.js');
 require('./isDarkColor-5efc8367.js');
 require('./getBorderRadius-5a64574c.js');
 
@@ -31,9 +31,9 @@ const ZonosLanguageSelect = class {
     }
     render() {
         const { selectedLocale } = cart.localizationStore;
-        return (index.h(index.Host, { key: '448f89b5870956b6e9455968134b94c9409a983d', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: 'bea77d8916a999eade4d1201adbf37803b65901a', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '23841aa801d68da4b537cfaab5ea89405ec66a9f', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '5fc1b45aa0cb27c94163c2dace5ce4ad63215dfc', handleOnClose: () => this.handleOnClose(), label: cart.translate('Select a language') }), index.h("div", { key: '7030fb276a05eea0e7333add3219b5316495662c', 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: '7c16efd7518f5952dac402c1fc2993e110d78fef', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '52c7626a8378bd7c956a3fa9d339a263f686f80a', handleOnClose: () => this.handleOnClose(), label: cart.translate('Select a language') }), index.h("div", { key: '6c00ad9b3270ae435ee32600651600a0a237ff07', 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;
@@ -50,9 +50,9 @@ const ZonosSelectDialogHeader = class {
         this.label = '';
     }
     render() {
-        return (index.h(index.Host, { key: '8ac4e1bcd64f6a2073e1161fec76c9b117345ada', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: 'a1b2433a81210b6a0a78be3cb027f885cd870d2c', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("zonos-v-stack", { key: 'fe4a184a8bed7aceb4c3f8d341fed50380587c77', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: '2176069a11ba20c7408ef898044f2ba68eea4a80', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: '45b9d890484881a15c4fa7a7e4028f9887cc942e', type: "boldLabel" }, this.label), index.h("zonos-button", { key: '65f0d9ea7b6dee35d23aa6fca19fd686190b667f', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), index.h("slot", { key: '758fce95d668ad755745687d3fcf1a6a307061bc' }))));
+            } }, index.h("zonos-v-stack", { key: 'a9e61575c6c6c34c6097dd937dea7c199130f7f0', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: '266b89174f64825bec793bd30d44c1f75f220b1f', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: '7fd1f62f22610a2601497e897e98d5f5e0437601', type: "boldLabel" }, this.label), index.h("zonos-button", { key: 'afa95565fae19d97e038885f5244ee292f960a69', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), index.h("slot", { key: 'c28af84460321290623f17120ef1583aaf898105' }))));
     }
 };
 ZonosSelectDialogHeader.style = ZonosSelectDialogHeaderStyle0;

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

@@ -16,7 +16,7 @@ const ZonosLink = class {
         this.linkTitle = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'a5913bea95608f1f1a95186664d2032a4aff66ec', class: "zonos--elements" }, index.h("a", { key: 'dffb72ba6d1820669b1dbd9e841a242cbe58d860', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: '774219d208dce4b32dcc715b827b1d85fc5dfe5e' }))));
+        return (index.h(index.Host, { key: '86fc4a9a03329f66e7f635669ca95d1372a62446', class: "zonos--elements" }, index.h("a", { key: 'ff257fcff1ffcc7e7c659969df96e551afb7146c', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: 'f5906c958642d7e5f4e7bb913febf778995a7dc6' }))));
     }
 };
 ZonosLink.style = ZonosLinkStyle0;

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

@@ -19,11 +19,11 @@ const ZonosLogo = class {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (index.h(index.Host, { key: '8737fef033ef8114ca67be72b2f598897a6929b3', class: classes.classes(['zonos--elements zonos--logo']), style: {
+        return (index.h(index.Host, { key: 'f20974d5ff501108c4a52d01773ab20219c8d389', class: classes.classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, index.h("img", { key: 'd5a15f2f8f891f865c7eb46268ae2f113ad1d3b4', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
+            } }, index.h("img", { key: 'd7acc90de67c51594abd44903c9fcb0b3e10a8bc', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
 };

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d56e0a8b.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const classes = require('./classes-b7918f56.js');
-const cart = require('./cart-977c9d4c.js');
-const handleFetch = require('./handleFetch-661a8225.js');
-const paypal = require('./paypal-3008c89e.js');
+const cart = require('./cart-ba540c8e.js');
+const handleFetch = require('./handleFetch-45e76490.js');
+const paypal = require('./paypal-6bbe55a7.js');
 require('./isDarkColor-5efc8367.js');
 require('./getBorderRadius-5a64574c.js');
 
@@ -110,7 +110,7 @@ const ZonosPayment = 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: 'ab601d9a0cc6fe2fee19f45d6321dcc81b418cff', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '27857c99c59e4913fa403ef5b23b5b7d7f32bd45', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '329b5a5617f0c5942b209df1ccf3bfcb4ddabb0c', class: "zonos--payment-component" }), index.h("div", { key: '7abb08922e9f607314713fc9fa762a3bb8a35b13', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: 'c461a967d00b2d96fa70aaaf1651b435cdcd84bd', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '44da1d89ce19f7174cad1214ab9463f0b1174c0d', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: 'b9e3491b48d9ede19a5cdef639bd47e6bf0ba742', class: "zonos--payment-component" }), index.h("div", { key: '578516ce1ca1dc01eebb2268bb5449613e14298f', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -164,7 +164,7 @@ const ZonosPaypalPayment = class {
         void this.loadPaypal();
     }
     render() {
-        return (index.h(index.Host, { key: 'a09fe5b66b1ac971c10529ecb6213479f2870f08', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: '6ba337785b8a90965e0cba05fd62681bc92633fe', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: '6bfc962de500edbb105b7eb899711e48def78167', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: '92d1b1c416f5e233c54e50d47129be375ef0a68b', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -16,10 +16,10 @@ const ZonosTooltip = class {
         this.showTooltip = false;
     }
     render() {
-        return (index.h(index.Host, { key: '24f3b1f73cc320540ab3700213004c267ea04658', class: "zonos--elements" }, index.h("div", { key: '7f52acf90cb5b9f1fd5efdc4fedc4d61a893a646', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '1871529e8b75c44a71bf1f5bc9e60b81bbc598d2' }), index.h("div", { key: 'c0b9c9c1b3fef5f766d2bad4c5bea48f3d6bbb6f', class: classes.classes([
+        return (index.h(index.Host, { key: '091516a0a68f8b4ab2580a8118900c34b39e931c', class: "zonos--elements" }, index.h("div", { key: '77769b18201f87d601d5bdb860a4bc8c84bb4e90', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '139c1de415b94e12b8d575e3662cba9faf56cb2f' }), index.h("div", { key: '60c38adf74e9b776001844c2205ac87a4562b525', class: classes.classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, index.h("zonos-text", { key: '3b106cb439877dffa101f15fb01aff980a64c7cb', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: 'c0005051e6e1b614b7739718e1a262f6043d56f5', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, index.h("zonos-text", { key: 'bb87c44ee7831c24b47c43b17d2b04c79112e900', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: '5d114d284a15a1661e926bfe5fae9251513c7370', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
 };
 ZonosTooltip.style = ZonosTooltipStyle0;

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -15,9 +15,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: 'e542ff8bbefa3223f157ad4bd6e537af8e5d5a5d', style: {
+        return (index.h(index.Host, { key: 'fca41f57f80879bf7cb32fa7858777a26a36755d', style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '9bd1cc8fdf94265d7d2767d507af7ad21d77234d', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'c8a294410e4c1348405c53283cf4dba176d5b27b' }))));
+            } }, index.h("div", { key: '8b608328327817a540c56dca58ad32ebe622d48e', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'c29eeb4c2d0f781bdca44d355d2da75e15576d86' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.js

@@ -17,7 +17,7 @@ export class ZonosCartItems {
                     this.errorImages = [...this.errorImages, itemImg];
                 }, src: item.imageUrl, style: {
                     'min-width': '40px',
-                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label", weight: 600 }, item.name), h("zonos-text", { class: "zonos--cart-item-quantity", textColor: "gray-700", type: "label" }, translate('Quantity'), ":", ' ', h("zonos-text", { type: "label", weight: 600 }, item.quantity))), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel", weight: 600 }, currencyFormat({
+                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, item.name), h("zonos-text", { textColor: "gray-600", type: "caption" }, translate('Quantity'), ": ", item.quantity)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel", weight: 600 }, currencyFormat({
                 amount: item.amount * rate * item.quantity,
                 currency: cartStore.currency,
             })))));

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-subtotal/zonos-cart-subtotal.css

@@ -54,7 +54,8 @@
   gap: 8px;
 }
 :host .zonos--cart-subtotal-title,
-:host .zonos--cart-subtotal-price {
+:host .zonos--cart-subtotal-price,
+:host .zonos--cart-promo-code-col {
   border-bottom: 1px solid var(--zonos-elements-gray-200);
 }
 :host .zonos--cart-duty-tax-price {
@@ -72,4 +73,12 @@
 :host .zonos--cart-subtotal-price zonos-text,
 :host .zonos--cart-pay-total zonos-text {
   white-space: nowrap;
+}
+:host .zonos--cart-promo-code-input-wrapper {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+:host .zonos--cart-promo-code-input {
+  flex: 1;
 }

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-subtotal/zonos-cart-subtotal.js

@@ -1,13 +1,37 @@
 import { Fragment, h, Host } from "@stencil/core";
 import { cartStore, cartStoreHasOneEligibleItem, } from "../../../store/checkout/cart";
+import { stripeStoreApplyPromoCode, stripeStoreRemovePromoCode, } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
 import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 export class ZonosCartSubtotal {
+    constructor() {
+        this.submitBtnType = undefined;
+        this.submitBtnColor = undefined;
+        this.loading = false;
+    }
     render() {
+        var _a, _b, _c, _d, _e;
         const showDutyTaxesInfo = cartStore.step === 'payment' || cartStore.step === 'shipping';
         // Show 0 for subtotal and total when all items are restricted
         const total = cartStoreHasOneEligibleItem() ? cartStore.total : 0;
         const subtotal = cartStoreHasOneEligibleItem() ? cartStore.subtotal : 0;
+        const appliedPromoCode = (_e = (_d = (_c = (_b = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(Boolean)) === null || _b === void 0 ? void 0 : _b.landedCost.appliedAdjustments) === null || _c === void 0 ? void 0 : _c.find(x => { var _a; return ((_a = x.adjustment) === null || _a === void 0 ? void 0 : _a.source) === 'PROMO_CODE'; })) === null || _d === void 0 ? void 0 : _d.adjustment) === null || _e === void 0 ? void 0 : _e.name;
+        const applyPromoCode = async () => {
+            // Promo code apply button is clicked
+            cartStore.promoCodeApplied = true;
+            // Reset promo code highlight error state
+            cartStore.promoCodeError = false;
+            this.loading = true;
+            await stripeStoreApplyPromoCode();
+            this.loading = false;
+        };
+        const removePromoCode = async () => {
+            // Reset promo code highlight error state
+            cartStore.promoCodeError = false;
+            this.loading = true;
+            await stripeStoreRemovePromoCode();
+            this.loading = false;
+        };
         const renderShippingInfo = () => {
             if (!cartStore.selectedShippingOption) {
                 return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Shipping')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('No shipping method selected'))));
@@ -27,7 +51,7 @@ export class ZonosCartSubtotal {
                 amount: cartStore.dutiesTaxFees,
                 currency: cartStore.currency,
             })
-            : '-')))), !!cartStore.adjustmentTotal && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Discounts')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
+            : '-')))), cartStore.step !== 'customer-info' && (h("tr", { class: "zonos--row zonos--cart-promo-code" }, h("td", { class: "zonos--column" }), !!appliedPromoCode ? (h(Fragment, null, h("td", { class: "zonos--column zonos--cart-promo-code-col" }, this.loading ? (h("zonos-spinner", { size: 16 })) : (h("zonos-badge", { dismissHandler: () => removePromoCode() }, cartStore.promoCode))), h("td", { class: "zonos--column zonos--cart-promo-code-col" }))) : (h("td", { class: "zonos--column zonos--cart-promo-code-col", colSpan: 2 }, h("div", { class: "zonos--cart-promo-code-input-wrapper" }, h("zonos-input", { class: "zonos--cart-promo-code-input", inputLabel: translate('Add promotional code'), inputValue: cartStore.promoCode, isError: cartStore.promoCodeError, onInputChange: e => (cartStore.promoCode = e.detail.trim()) }), h("zonos-button", { loading: this.loading, onClick: () => applyPromoCode(), variant: "primary" }, translate('Apply'))))))), !!cartStore.adjustmentTotal && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Discounts')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
             amount: cartStore.adjustmentTotal,
             currency: cartStore.currency,
         }))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
@@ -48,4 +72,52 @@ export class ZonosCartSubtotal {
         };
     }
     static get assetsDirs() { return ["assets"]; }
+    static get properties() {
+        return {
+            "submitBtnType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLZonosButtonElement['variant']",
+                    "resolved": "\"danger\" | \"outline\" | \"primary\" | \"standard\" | \"subtle\" | \"success\" | \"warning\" | undefined",
+                    "references": {
+                        "HTMLZonosButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLZonosButtonElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button type of the submit button"
+                },
+                "attribute": "submit-btn-type",
+                "reflect": false
+            },
+            "submitBtnColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Button color of the submit button"
+                },
+                "attribute": "submit-btn-color",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "loading": {}
+        };
+    }
 }

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-finish/zonos-checkout-finish.js

@@ -1,7 +1,7 @@
 import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore } from "../../../store/checkout/cart";
 import { paypalStore, paypalStoreReset, } from "../../../store/checkout/paypal";
-import { stripeStore, stripeStoreMessageBasedOnStatus, stripeStoreReset, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
+import { stripeStore, stripeStoreMessageBasedOnStatus, stripeStoreReset, stripeStoreResetPromoCode, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
@@ -195,6 +195,8 @@ export class ZonosCheckoutFinish {
                 // wait this to finish before resetting store and checkout session id
                 await this.getPullOrder();
             }
+            // reset promo when checkout is finished
+            stripeStoreResetPromoCode();
             this.isLoading = false;
             stripeStoreReset();
             paypalStoreReset();
@@ -233,11 +235,11 @@ export class ZonosCheckoutFinish {
         var _a, _b;
         const orderId = ((_a = this.order) === null || _a === void 0 ? void 0 : _a.accountOrderNumber) || getGraphQlShortId((_b = this.order) === null || _b === void 0 ? void 0 : _b.id);
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: 'fabd14b9a81a86771e54be97d957783b7348f1d1', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '9939772d4ce4213978ae6b02b4cd5345d15dbdfd', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, this.isLoading && (h("div", { key: '540c20d55e11a942e69326c970d402bc3c6c080b', class: "loading-wrapper" }, h("zonos-spinner", { key: 'db6f50490b64099c5224f741f726c352739557d4' }))), !this.isLoading && (h("div", { key: '33720a72e039b16f6b8983472868a57e96fdca11', class: "zonos--finish-details" }, h("div", { key: 'de92dd2f629e63001438a46da6c331b46349d9e7', 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: '98c1b679814b67bf75a4594c749e7596a2c03d17', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), orderId && (h("div", { key: '82bf5d17c9d93919b7a2c8b02564f99471cbdc37', class: "zonos--order-number" }, "Order #", orderId)), h("zonos-text", { key: '93006790ec06f8b9e3ab6e86c41627d9e10de0a0', textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: '09ac3086c6c0252589d1ca92cb09f8af7fb3e1aa', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText)), isTestMode && cartStore.step === 'finish' && (h("div", { key: '5ed5f468a66d30556bb4e5191dfda7c1294ac541', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'c9616613528a299618e99b09d70c236f59f90e14', backgroundColor: "gray-0", buttonColor: "gray-1200", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'c9cf9f5a5d59f5df8c076488c538efd6d3e63674', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
+            } }, this.isLoading && (h("div", { key: '491d4d0ba3dc487d448606009a30a5ce8d3bb86e', class: "loading-wrapper" }, h("zonos-spinner", { key: '3179aeb472d3e70628d3f1e3e2b76ed3d622145d' }))), !this.isLoading && (h("div", { key: '6044c9d1ac7599d9168f944dcf82028669fd1f37', class: "zonos--finish-details" }, h("div", { key: 'd22ec981a73db08e4871c8babe29f9a09a5bc29d', 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: 'bfef33fd319456253e07c3ef3f81da1b85414df9', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), orderId && (h("div", { key: 'f056c93644d1f9defa263f59111874f154293b51', class: "zonos--order-number" }, "Order #", orderId)), h("zonos-text", { key: '69d38c4640943a5cfdcef5ea6951ddec9c7b8a84', textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { key: 'fbb2d1cc0baab99a3312f2077c28cb9d51b4eb44', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText)), isTestMode && cartStore.step === 'finish' && (h("div", { key: '7b63fd838f850ce6a5acf4970fa66657ca05e235', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '85035826e36d52ccf8c77aa6ba6e27173fccdaa6', backgroundColor: "gray-0", buttonColor: "gray-1200", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'd3848fdbdf1380dce49fcbc2b2903d99ce65247d', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,8 +16,9 @@ import { classes } from "../../utils/classes";
 import { createCustomEvent } from "../../utils/createCustomEvent";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 import { isDarkColor } from "../../utils/isDarkColor";
-import { log } from "../../utils/logging/log";
+import { allLogs, log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
+import { sendErrorLog } from "../../utils/logging/sendErrorLog";
 import { mergeConfig } from "../../utils/mergeConfig";
 import { submitGtag } from "../../utils/submitGtag";
 import { setupCartData } from "../../../scripts/cart/_setupCartData";
@@ -196,6 +197,7 @@ export class ZonosCheckout {
                 button,
             });
             button.addEventListener('click', async (e) => {
+                var _a;
                 if (!isShippableCountry() || isDisabledCountry()) {
                     return;
                 }
@@ -228,6 +230,17 @@ export class ZonosCheckout {
                         ],
                         title: translate('Error creating Checkout'),
                     });
+                    // We want to log the error anytime we fail to create a checkout session
+                    void sendErrorLog({
+                        endpoint: 'Error creating Checkout',
+                        errors: [err instanceof Error ? err.toString() : 'Unknown error'],
+                        metadata: {
+                            allLogs,
+                            cartId: window.Zonos.cartId,
+                            href: window.location.href,
+                            storeBaseUrl: (_a = window.Zonos.cartData) === null || _a === void 0 ? void 0 : _a.storeBaseUrl,
+                        },
+                    });
                 }
             }, {
                 // Trigger this event before any other event
@@ -589,7 +602,7 @@ export class ZonosCheckout {
                 } }), h("zonos-collapse", {
                 // only collapsible on mobile
                 collapsed: this.collapseReviewMobile && this.isMobile
-            }, h("zonos-cart-items", null), this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), h("zonos-cart-restricted-items", null), !this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
+            }, h("zonos-cart-items", null), this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", { submitBtnColor: submitButtonColor }), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), h("zonos-cart-restricted-items", null), !this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
                     ? Object.assign(Object.assign({}, cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride }))), h("zonos-checkout-footer", { "data-theme": rightSideTheme, mobile: this.isMobile,
                 /**
                  * For this component, use slot instead of passing JSX through prop of other component. Because

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js

@@ -2,7 +2,6 @@ import { h, Host, } from "@stencil/core";
 import { cartStore, cartStoreGetShippingTransitInfo, cartStoreUpdateSelectedShippingOption, } from "../../../store/checkout/cart";
 import { translate } from "../../../store/translationStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
-import { sortServiceLevelOptions } from "../../../utils/checkout/sortServiceLevelOptions";
 import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 import { submitGtag } from "../../../utils/submitGtag";
 export class ZonosShipping {
@@ -81,8 +80,7 @@ export class ZonosShipping {
                     };
                 })) || []);
             })) || [];
-            // sort service level by price
-            this.serviceLevels = sortServiceLevelOptions(serviceLevels);
+            this.serviceLevels = serviceLevels;
         };
         this.continueLoading = false;
         this.submitBtnColor = undefined;
@@ -101,12 +99,13 @@ export class ZonosShipping {
             return;
         }
         const firstServiceLevel = this.serviceLevels.find(Boolean);
-        if (firstServiceLevel) {
-            // preselect the first shipping method
-            void this.handleRadioSelected({
-                detail: firstServiceLevel,
-            });
+        if (!firstServiceLevel) {
+            return;
         }
+        // preselect the first shipping method
+        void this.handleRadioSelected({
+            detail: firstServiceLevel,
+        });
     }
     render() {
         var _a, _b, _c;
@@ -114,7 +113,7 @@ export class ZonosShipping {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: '00da931b8d40429b7acfdeb2ca06c564e55e4c8b', class: "zonos--shipping zonos--elements" }, h("div", { key: 'cc231db53fa9fcccee0348317110eaf58b0367df', class: "zonos--group" }, h("zonos-text", { key: '4679617eb68df02dcfa410737931b2a3ec2fe681', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: '2a20b3be92ea8b88004048ef581290bf5a68be2d', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'c18d78c99e57141d7d0b6057ebba5cbffd07391d', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: 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" })) : (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) })), h("div", { key: 'aed8fdcf2fc7efc99f25419171172e86804a40cf', class: "zonos--group-btn" }, h("zonos-button", { key: 'd09b88e2872baf1d97360bcc98889d7d97e93873', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        return (h(Host, { key: '8b65a52f870ea2274ebca2a007d3dd15d019bc40', class: "zonos--shipping zonos--elements" }, h("div", { key: '0c0d7b7d156ee6a7a1914bbcfb4f835efb8900ba', class: "zonos--group" }, h("zonos-text", { key: '3a761f88410f83eb3b4fdf91351c3ab7fcb65548', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: '717aa9228e46f55ad6df5788abca033830431576', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'ece89e491a72c39eea128aaf6cbefe71242ef651', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: 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" })) : (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) })), h("div", { key: 'f5f64b048cbf2faf582d3167c7cc2e6f1722323a', class: "zonos--group-btn" }, h("zonos-button", { key: '994b883f870cbad249bc311bf25c2d2e946a3ccb', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }

package/dist/collection/components/common/zonos-badge/assets/RemoveLineIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8282 5.17184C11.0235 5.3671 11.0235 5.68368 10.8282 5.87894L8.70688 8.00026L10.8282 10.1216C11.0235 10.3168 11.0235 10.6334 10.8282 10.8287C10.6329 11.024 10.3164 11.024 10.1211 10.8287L7.99978 8.70737L5.87846 10.8287C5.68319 11.024 5.36661 11.024 5.17135 10.8287C4.97609 10.6334 4.97609 10.3168 5.17135 10.1216L7.29267 8.00026L5.17135 5.87894C4.97609 5.68368 4.97609 5.3671 5.17135 5.17184C5.36661 4.97658 5.68319 4.97658 5.87846 5.17184L7.99978 7.29316L10.1211 5.17184C10.3164 4.97658 10.6329 4.97658 10.8282 5.17184Z" fill="var(--zonos-elements-gray-800)"/>
+</svg>

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

@@ -119,4 +119,7 @@
 :host .transparent.bold {
   background-color: var(--zonos-elements-glass-600);
   color: var(--zonos-elements-gray-100);
+}
+:host .zonos--badge-dismiss {
+  cursor: pointer;
 }

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

@@ -1,6 +1,8 @@
 import { h, Host } from "@stencil/core";
 import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveLineIcon from "./assets/RemoveLineIcon.svg";
 export class ZonosBadge {
     constructor() {
         this.bold = false;
@@ -9,18 +11,20 @@ export class ZonosBadge {
         this.iconRight = false;
         this.size = 'default';
         this.rounded = false;
+        this.loading = false;
+        this.dismissHandler = undefined;
     }
     render() {
-        return (h(Host, { key: '4e022b4090de017818c5ba8f86e2d7684a1b8f05', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '9704ae6d10af4b720e1edf9ccc0263d4463e64f2', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '8e6a4c0fcf81939d69fd3aec91463ed6c7a2d67d', class: classes([
+            } }, h("div", { key: 'e395b7477591edff91059aefc4d3858f45d61098', 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: '5824866453d31abef18443179e6bc1692e9e98a3', textColor: `${this.badgeColor}-800` }, h("slot", { key: '9bc411177ae04e8fa1061098023860204fa1a5d7' })))));
+            ]) }, this.icon, h("zonos-text", { key: '92eeb162849c9036bb102012e14fb6476b34b411', textColor: `${this.badgeColor}-800` }, h("slot", { key: '3a52067262d1ba34eb5952dc2f2eaeeb1daa624c' })), this.dismissHandler && (h("zonos-icon", { key: '7bb94d2b2204c81e7c21e31fe2769de2e0f0c19b', "aria-label": "Remove promo code", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -169,6 +173,42 @@ export class ZonosBadge {
                 "attribute": "rounded",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether or not the badge is loading"
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dismissHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "(() => void) | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback for when the badge is dismissed. Also determines if dismiss icon shown."
+                }
             }
         };
     }