@zonos/elements 1.3.218 → 1.3.219

package/dist/cjs/zonos-empty-state-payment_4.cjs.entry.js

@@ -6,11 +6,12 @@ const index = require('./index-1c710d00.js');
 const zonosStore = require('./zonosStore-f8ee56aa.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-1b5e33cf.js');
-const cart = require('./cart-c54d05ce.js');
-const localization = require('./localization-ab7e1902.js');
+const cart = require('./cart-9a2b32e4.js');
+const localization = require('./localization-b12edb2a.js');
 const handleFetch = require('./handleFetch-45f35cac.js');
-const paypal = require('./paypal-d36b5dd1.js');
+const paypal = require('./paypal-e80871d0.js');
 require('./VarianceTest-0cb1e118.js');
+require('./translationStore-20a6d8bf.js');
 require('./isDarkColor-428965f4.js');
 
 const PaymentEmptyStateDarkIcon = `<svg width="536" height="200" viewBox="0 0 536 200" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -211,7 +212,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: '7210a20afba18d167a6e7d875ba23daa0db774e4', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '4f043b3149cca48d2f4463a826541ebe35d0b6ca', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '15721e208e90b969c075877680a02dca5bb81689', class: "zonos--payment-component" }), index.h("div", { key: '36d5767821464db479feff18e6368e862550c777', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: '1828cd97531009303635ded8725233c07e45fba3', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '899f8ef9f1e008a8d613e54fd1196c1bab7cefdc', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '9e9b67bd29a4caf71a6f34fba03c67cbff03b0c7', class: "zonos--payment-component" }), index.h("div", { key: '1aeb4114ca6eac6541e0bafe72077093bdfb777e', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -230,6 +231,7 @@ const ZonosPaypalPayment = class {
         index.registerInstance(this, hostRef);
         this.paypalSessionDone = index.createEvent(this, "paypalSessionDone", 7);
         this.paypalSessionFail = index.createEvent(this, "paypalSessionFail", 7);
+        this.storeUnsubscribeList = [];
     }
     async loadPaypal() {
         if (!window.Zonos.paypal) {
@@ -261,12 +263,20 @@ const ZonosPaypalPayment = class {
             await paypalButton.render(container);
         });
     }
+    componentWillLoad() {
+        this.storeUnsubscribeList = [
+            paypal.paypalStoreOnChange('paypal', this.loadPaypal.bind(this)),
+        ];
+    }
     componentDidLoad() {
         // @Watch doesn't get trigger on initial load
         void this.loadPaypal();
     }
+    disconnectedCallback() {
+        this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
+    }
     render() {
-        return (index.h(index.Host, { key: 'e8c839cc9d0286f5ae4643243b14fa66f9584833', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: 'cac06948de1ccca97ba65eca10b3e5d9f3a9a362', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: 'af7d707c64d3f1b637d5d296d46e59023fff0744', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: '5a387dc0c7ae0ef6492b5f68b548989dd9832380', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1c710d00.js');
-const localization = require('./localization-ab7e1902.js');
+const localization = require('./localization-b12edb2a.js');
+const translationStore = require('./translationStore-20a6d8bf.js');
 const zonosStore = require('./zonosStore-f8ee56aa.js');
 const classes = require('./classes-b7918f56.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
@@ -138,7 +139,7 @@ const ZonosHelloDialog = class {
             // For GB, if the store doesn't allow low value orders, we would like to tell shopper that duties will always apply as there would be a custom message saying "Orders to United Kingdom must be over .* to ship."
             if (!(countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.allowLowValueOrders) &&
                 (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.countryCode) === 'GB') {
-                return localization.translate('Duties will apply to all orders.');
+                return translationStore.translate('Duties will apply to all orders.');
             }
             // Our Robby API spells deminimis wrong here
             const dutyDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.dutyDeminimus)
@@ -146,17 +147,17 @@ const ZonosHelloDialog = class {
                 : null;
             // If deminimis is undefined or null, assume it's $0
             return dutyDeminimis
-                ? localization.translate('Spend up to [threshold] duty free.', {
+                ? translationStore.translate('Spend up to [threshold] duty free.', {
                     threshold: dutyDeminimis,
                 })
-                : localization.translate('Duties will apply to all orders.');
+                : translationStore.translate('Duties will apply to all orders.');
         };
         this.getTaxMessage = () => {
             const { countryLandedCost } = localization.localizationStore;
             // For GB, if the store doesn't allow low value orders, we would like to tell shopper that taxes will always apply as there would be a custom message saying "Orders to United Kingdom must be over .* to ship."
             if (!(countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.allowLowValueOrders) &&
                 (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.countryCode) === 'GB') {
-                return localization.translate('Taxes will apply to all orders.');
+                return translationStore.translate('Taxes will apply to all orders.');
             }
             // Our Robby API spells deminimis wrong here
             const taxDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.vatTaxDeminimus)
@@ -164,35 +165,35 @@ const ZonosHelloDialog = class {
                 : null;
             return taxDeminimis &&
                 !this.isNoThresholdCountry(countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.countryCode)
-                ? localization.translate('Spend up to [threshold] tax free.', {
+                ? translationStore.translate('Spend up to [threshold] tax free.', {
                     threshold: taxDeminimis,
                 })
-                : localization.translate('Taxes will apply to all orders.');
+                : translationStore.translate('Taxes will apply to all orders.');
         };
         this.getEuDutyTaxMessage = (landedCost) => {
             return [
-                `${localization.translate('Due to the IOSS tax law, all orders will be assessed at [percentage] VAT regardless of order total.', {
+                `${translationStore.translate('Due to the IOSS tax law, all orders will be assessed at [percentage] VAT regardless of order total.', {
                     percentage: `${landedCost.vatTaxRate * 100}%`,
                 })} ${wrapStringWithLink({
                     href: 'https://zonos.com/docs/global-ecommerce/landed-cost/tax-remittance/european-ioss',
-                    text: localization.translate('Learn more.'),
+                    text: translationStore.translate('Learn more.'),
                 })}`,
             ];
         };
         this.getUkDutyTaxMessage = (landedCost) => {
             if (landedCost.allowLowValueOrders) {
                 return [
-                    `${localization.translate('Due to the UK tax law, all orders will be assessed at [percentage] VAT regardless of order total.', {
+                    `${translationStore.translate('Due to the UK tax law, all orders will be assessed at [percentage] VAT regardless of order total.', {
                         percentage: `${landedCost.vatTaxRate * 100}%`,
                     })} ${wrapStringWithLink({
                         href: 'https://zonos.com/docs/global-ecommerce/landed-cost/tax-remittance/european-ioss',
-                        text: localization.translate('Learn more.'),
+                        text: translationStore.translate('Learn more.'),
                     })}`,
                 ];
             }
             const dutyDeminimis = landedCost.dutyDeminimus;
             return [
-                localization.translate('Orders to [countryName] must be over [threshold] to ship.', {
+                translationStore.translate('Orders to [countryName] must be over [threshold] to ship.', {
                     countryName: 'United Kingdom',
                     threshold: localization.currencyFormat({ amount: dutyDeminimis }),
                 }),
@@ -203,11 +204,11 @@ const ZonosHelloDialog = class {
                 return [];
             }
             return [
-                `${localization.translate('Due to the Australia tax law, all orders will be assessed at [percentage] GST regardless of order total.', {
+                `${translationStore.translate('Due to the Australia tax law, all orders will be assessed at [percentage] GST regardless of order total.', {
                     percentage: `${landedCost.vatTaxRate * 100}%`,
                 })} ${wrapStringWithLink({
                     href: 'https://zonos.com/docs/global-ecommerce/landed-cost/tax-remittance/australia-gst',
-                    text: localization.translate('Learn more.'),
+                    text: translationStore.translate('Learn more.'),
                 })}`,
             ];
         };
@@ -216,11 +217,11 @@ const ZonosHelloDialog = class {
                 return null;
             }
             return [
-                `${localization.translate('Due to the New Zealand tax law, all orders will be assessed at [percentage] GST regardless of order total.', {
+                `${translationStore.translate('Due to the New Zealand tax law, all orders will be assessed at [percentage] GST regardless of order total.', {
                     percentage: `${landedCost.vatTaxRate * 100}%`,
                 })} ${wrapStringWithLink({
                     href: 'https://zonos.com/docs/guides/country-guides/new-zealand/new-zealand-import-taxes',
-                    text: localization.translate('Learn more.'),
+                    text: translationStore.translate('Learn more.'),
                 })}`,
             ];
         };
@@ -229,11 +230,11 @@ const ZonosHelloDialog = class {
                 return null;
             }
             return [
-                `${localization.translate('Due to the VOEC tax law, all orders will be assessed at [percentage] VAT regardless of order total.', {
+                `${translationStore.translate('Due to the VOEC tax law, all orders will be assessed at [percentage] VAT regardless of order total.', {
                     percentage: `${landedCost.vatTaxRate * 100}%`,
                 })} ${wrapStringWithLink({
                     href: 'https://zonos.com/docs/guides/country-guides/norway-voec-scheme',
-                    text: localization.translate('Learn more.'),
+                    text: translationStore.translate('Learn more.'),
                 })}`,
             ];
         };
@@ -242,11 +243,11 @@ const ZonosHelloDialog = class {
                 return null;
             }
             return [
-                `${localization.translate('Due to the Singapore tax law, all orders will be assessed at [percentage] GST regardless of order total.', {
+                `${translationStore.translate('Due to the Singapore tax law, all orders will be assessed at [percentage] GST regardless of order total.', {
                     percentage: `${landedCost.vatTaxRate * 100}%`,
                 })} ${wrapStringWithLink({
                     href: 'https://zonos.com/docs/global-ecommerce/landed-cost/tax-remittance/singapore-gst-settings',
-                    text: localization.translate('Learn more.'),
+                    text: translationStore.translate('Learn more.'),
                 })}`,
             ];
         };
@@ -258,28 +259,28 @@ const ZonosHelloDialog = class {
             if (setting.duty.status === 'INCLUDED' &&
                 setting.tax.status === 'INCLUDED' &&
                 setting.fee.status === 'INCLUDED') {
-                return localization.translate('Product prices already include duties, taxes, and fees. No additional duties, taxes, or fees will be added at checkout, with rare exceptions.');
+                return translationStore.translate('Product prices already include duties, taxes, and fees. No additional duties, taxes, or fees will be added at checkout, with rare exceptions.');
             }
             if (setting.duty.status === 'INCLUDED' &&
                 setting.tax.status === 'INCLUDED') {
-                return localization.translate('Product prices already include duties and taxes. No additional duties or taxes will be added at checkout, with rare exceptions.');
+                return translationStore.translate('Product prices already include duties and taxes. No additional duties or taxes will be added at checkout, with rare exceptions.');
             }
             if (setting.duty.status === 'INCLUDED' &&
                 setting.fee.status === 'INCLUDED') {
-                return localization.translate('Product prices already include duties and fees. No additional duties or fees will be added at checkout, with rare exceptions.');
+                return translationStore.translate('Product prices already include duties and fees. No additional duties or fees will be added at checkout, with rare exceptions.');
             }
             if (setting.tax.status === 'INCLUDED' &&
                 setting.fee.status === 'INCLUDED') {
-                return localization.translate('Product prices already include taxes and fees. No additional taxes or fees will be added at checkout, with rare exceptions.');
+                return translationStore.translate('Product prices already include taxes and fees. No additional taxes or fees will be added at checkout, with rare exceptions.');
             }
             if (setting.duty.status === 'INCLUDED') {
-                return localization.translate('Product prices already include duties. No additional duties will be added at checkout, with rare exceptions.');
+                return translationStore.translate('Product prices already include duties. No additional duties will be added at checkout, with rare exceptions.');
             }
             if (setting.tax.status === 'INCLUDED') {
-                return localization.translate('Product prices already include taxes. No additional taxes will be added at checkout, with rare exceptions.');
+                return translationStore.translate('Product prices already include taxes. No additional taxes will be added at checkout, with rare exceptions.');
             }
             if (setting.fee.status === 'INCLUDED') {
-                return localization.translate('Product prices already include fees. No additional fees will be added at checkout, with rare exceptions.');
+                return translationStore.translate('Product prices already include fees. No additional fees will be added at checkout, with rare exceptions.');
             }
             return null;
         };
@@ -339,26 +340,26 @@ const ZonosHelloDialog = class {
             (this.dialogRef && getHasMoreSpaceOnRight.getHasMoreSpaceOnRight(this.dialogRef));
         const animateFromBottom = this.dialogRef && getHasMoreSpaceAbove(this.dialogRef);
         const { customMessages } = localization.localizationStore;
-        const welcomeMessage = localization.translate('Welcome to [storeName]', {
+        const welcomeMessage = translationStore.translate('Welcome to [storeName]', {
             storeName: zonosStore.zonosStore.organizationName,
         });
         const defaultMessageStr = ((_a = customMessages.find(x => x.pageName === 'hello_default')) === null || _a === void 0 ? void 0 : _a.message) ||
-            localization.translate('Know about duties and taxes before you buy. Shop with confidence!');
+            translationStore.translate('Know about duties and taxes before you buy. Shop with confidence!');
         const defaultMessage = formatStringWithLinks.formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (index.h(index.Host, { key: '048945538b24e429425ba47f0964a2c16a8c2d3d', class: "zonos--elements" }, index.h("div", { key: '539cb35da5f85ec64a166757eb09389262232d3e', class: classes.classes([
+        return (index.h(index.Host, { key: 'cb93edb34ae6e427ca22018f78bd9f83bed8fb6c', class: "zonos--elements" }, index.h("div", { key: '36f0560ccc1b49c412077203eca49c8d8fbde0c1', 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: 'ef1ad9355d3244d96971217311f1c674adeb6ee3' }, index.h("div", { key: '463e7752c0a1c11c6c86bf0dd8031b81511c0c14', class: "zonos--hello-dialog-content" }, index.h("zonos-button", { key: '89c1ae9d62c5b6c21472597c1afc5733a1cb8512', 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: '2657decc4b955f00eeb360018791e18a7a4ac70a', spacing: 24 }, index.h("zonos-country-flag", { key: '57e9c4bdfc7a14e0268097a5c0c79ef508011347', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), index.h("zonos-v-stack", { key: 'cda79b1e8487d72ed6ca33e2298731953ad9620e', class: "zonos--hello-dialog-header", spacing: 4 }, index.h("zonos-text", { key: '17d98d8f62d953c2b41ee46678ae4bea26b09ca5', type: "boldSubheader" }, welcomeMessage), index.h("zonos-text", { key: '856cebfb2d0d34a52d23f3eb8ccc7a64ef16e822', innerHTML: defaultMessage, textColor: "gray-800" })), index.h("zonos-v-stack", { key: '905f5e46a8eba8d9ff69af0ee5f51dadd168878e', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (index.h("div", { key: 'f5561b5699dc9ab8871e5c55002907f31551f06d' }, index.h("div", { key: '4f9d3e67db0d77c9cf945a02b3e7e5f7f4e8a2ef', class: "zonos--hello-dialog-content" }, index.h("zonos-button", { key: '47cc0055cd7077e5d8482446785e75addd50cc55', 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: '757fe60f5af6721f9b0e23e8182c5283c5e891b0', spacing: 24 }, index.h("zonos-country-flag", { key: '26dbfbceb8e3d16cc07debcb92d8759c8beb47da', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), index.h("zonos-v-stack", { key: 'fc41d363ac000d991a55cb5643d3db5bf65e86a7', class: "zonos--hello-dialog-header", spacing: 4 }, index.h("zonos-text", { key: 'ed02015e70e28bab9584f0cffae0401189537379', type: "boldSubheader" }, welcomeMessage), index.h("zonos-text", { key: '7c12a8d379e4c8bf2235b06d1d020bdad7f63a6c', innerHTML: defaultMessage, textColor: "gray-800" })), index.h("zonos-v-stack", { key: '120bd4591063877c10663559e2186875adeed017', 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: '600e71f5ccd6f2f86d5fe00833f480b5059fa145', spacing: "12px" }, index.h("zonos-v-stack", { key: '75cc0236d7f59ef08e7700ef326c079b2eb273a2', 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, dutyDeMinimisMessage && (index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Duty de minimis icon", content: ImportIcon }), index.h("zonos-text", { "aria-label": "Duty de minimis message" }, dutyDeMinimisMessage))), taxDeMinimisMessage && (index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Tax de minimis icon", content: MoneyIcon }), index.h("zonos-text", { "aria-label": "Tax de minimis message" }, 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 icon", content: BagIcon }), index.h("zonos-text", { "aria-label": `Additional information for buying goods from selected country message`, innerHTML: info })))))), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), index.h("zonos-hello-dialog-footer", { key: '70c60065a548ab2e178df64062991b8160d62f55', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (index.h("div", { key: '14da13080459253ab355f60f67216f99741b69a2' }, index.h("zonos-country-select", { key: 'e18e90eb0e68450ceb833aa999f24108fd154eb8', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (index.h("div", { key: '56255cb5629ee7600378d13ee700adf1d3c73f51' }, index.h("zonos-language-select", { key: '3d74f4c28c067ea9f94da2d3274abf4d750bcab7', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), index.h("zonos-card", { key: '2d47773d1db35acf323f1a92808535c909e245ca', spacing: "12px" }, index.h("zonos-v-stack", { key: '9bd445564c4d13d03772a5289a758fc19c9853a5', 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, dutyDeMinimisMessage && (index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Duty de minimis icon", content: ImportIcon }), index.h("zonos-text", { "aria-label": "Duty de minimis message" }, dutyDeMinimisMessage))), taxDeMinimisMessage && (index.h("div", { class: "zonos--flex-message" }, index.h("zonos-icon", { "aria-label": "Tax de minimis icon", content: MoneyIcon }), index.h("zonos-text", { "aria-label": "Tax de minimis message" }, 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 icon", content: BagIcon }), index.h("zonos-text", { "aria-label": `Additional information for buying goods from selected country message`, innerHTML: info })))))), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), index.h("zonos-hello-dialog-footer", { key: '6ea82d255084e05957e6d82e6305b945388998ad', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (index.h("div", { key: '1b007ad4dadcb7b6f25e96a14e00dc8dcf4b9d5a' }, index.h("zonos-country-select", { key: 'f442a030a5abbb707fdddbc51a1126cd1fb3ef99', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (index.h("div", { key: 'aba190f3fafb298bc063f2ba05dfe74af7cc97ae' }, index.h("zonos-language-select", { key: '105c6c35f630d2c7b551518665f433a90d13c488', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

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

@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1c710d00.js');
 const debounce = require('./debounce-465a4328.js');
-const localization = require('./localization-ab7e1902.js');
+const localization = require('./localization-b12edb2a.js');
+const translationStore = require('./translationStore-20a6d8bf.js');
 const zonosStore = require('./zonosStore-f8ee56aa.js');
 const classes = require('./classes-b7918f56.js');
 const handleFetch = require('./handleFetch-45f35cac.js');
@@ -156,20 +157,20 @@ const ZonosHello = class {
             const isRestrictionPage = zonosStore.zonosStore.currentHelloPage === 'productDetail' ||
                 zonosStore.zonosStore.currentHelloPage === 'productList';
             if (isRestrictionPage && this.allRestrictedItems.length) {
-                const clickMessage = localization.translate('click to learn more');
+                const clickMessage = translationStore.translate('click to learn more');
                 const restrictMessage = zonosStore.zonosStore.currentHelloPage === 'productDetail'
-                    ? localization.translate('Restricted item')
-                    : localization.translate('Restricted items found');
+                    ? translationStore.translate('Restricted item')
+                    : translationStore.translate('Restricted items found');
                 return `${restrictMessage} - ${clickMessage}`;
             }
             switch (zonosStore.zonosStore.currentHelloPage) {
                 case 'cart':
-                    return localization.translate(`Prepay duties and taxes at checkout`);
+                    return translationStore.translate(`Prepay duties and taxes at checkout`);
                 case 'productList':
                 case 'productDetail':
-                    return localization.translate(`See duty and tax thresholds`);
+                    return translationStore.translate(`See duty and tax thresholds`);
                 default:
-                    return localization.translate('Welcome to [storeName]', {
+                    return translationStore.translate('Welcome to [storeName]', {
                         storeName: organizationName,
                     });
             }

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

@@ -42,17 +42,17 @@ const ZonosInput = class {
         this.inputChange.emit(newValue);
     }
     render() {
-        return (index.h(index.Host, { key: '87c0f3819db82f5b731ec02f1dda30888131989a', class: classes.classes([
+        return (index.h(index.Host, { key: 'a239adc57fc0cd31bff05447fe10d0ad1e825007', class: classes.classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius(),
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '0eb35699b27eb262797a599441877b5600d989f0', class: classes.classes([
+            } }, index.h("div", { key: 'd2f1086b2139b9c7af5ae2882e0dfb0db65028dc', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("input", { key: '75973f2c81e28a0007b047375ead0c5e6f055a14', class: classes.classes([
+            ]) }, index.h("input", { key: '8e48977b401aed6b36079f732adbc6493bb05804', class: classes.classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.inputValue && 'has-content',
@@ -60,7 +60,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: '23ee9731bfef0417522714dc48a97949eecad145', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), index.h("label", { key: '23ece9b49c1d718340a6f0bb59b93ad2dfe34828', 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,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1c710d00.js');
-const localization = require('./localization-ab7e1902.js');
+const localization = require('./localization-b12edb2a.js');
+const translationStore = require('./translationStore-20a6d8bf.js');
 const zonosStore = require('./zonosStore-f8ee56aa.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./handleFetch-45f35cac.js');
@@ -34,9 +35,9 @@ const ZonosLanguageSelect = class {
     }
     render() {
         const { selectedLocale } = localization.localizationStore;
-        return (index.h(index.Host, { key: 'cc711dba7371852eab6e20994389ae3b95bb3be7', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: '74b0315ab257fff13cf23057f485c0dcfb7edd1b', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '47135e2b7363a3179139a7b8e23cb22435ce3299', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '3bf830e585fa6478f560c57dfa978721af47ad19', handleOnClose: () => this.handleOnClose(), label: localization.translate('Select a language') }), index.h("div", { key: 'f693b231755087ec849f5a759b2dc43e2695b24f', 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: 'cc220539afcb6b883eec939edfb6933bf9fb08a0', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '297b34a17100fb10b2fd95b44bc5c9cadad960ab', handleOnClose: () => this.handleOnClose(), label: translationStore.translate('Select a language') }), index.h("div", { key: '2b85c2aeba8ddcb5a7725089daaf9b0cea025d76', 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;
@@ -60,9 +61,9 @@ const ZonosSelectDialogHeader = class {
         this.label = '';
     }
     render() {
-        return (index.h(index.Host, { key: '184508c2af24eedda1e4a59db89f787cd71a345f', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: '999f6edfe39142a7539164d2c046aa44945ff23f', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("zonos-v-stack", { key: '28bd290a2307c13e93036ee988f71bba87e76b19', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: '49c2a1c0c44d9950907f47d90c9a34a83e5158da', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: '244ef10f5ee38d4a056ad6c076185d42ca3cd174', type: "boldLabel" }, this.label), index.h("zonos-button", { key: 'dab99b609f1a3250f73e2f25b837c9300a964090', 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: 'b2fdb25cdc7c6382ec8d171aa14f1f4b7f33a4e8' }))));
+            } }, index.h("zonos-v-stack", { key: '1213364336cd7f809f4f2539835f86b2b6b30273', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: 'af342994ec6e54a08ccee92443977c06e5e6bd65', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: '81c1a17bb93b0e4ba7a9874d34f6ce2fdcf3321e', type: "boldLabel" }, this.label), index.h("zonos-button", { key: 'e321c6d3a6020d4c3ccdac84bbf1025e5ef490c1', 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: 'f3583feb7eba033767769e1b06c24961d2e4f56a' }))));
     }
 };
 ZonosSelectDialogHeader.style = ZonosSelectDialogHeaderStyle0;

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

@@ -16,7 +16,7 @@ const ZonosLink = class {
         this.href = '';
     }
     render() {
-        return (index.h(index.Host, { key: '41f0a757a334338631250764599ac99e28c41ed2', class: "zonos--elements" }, index.h("a", { key: 'b6e84f40141e8de85d005c05426f885f242ffc53', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: 'dd5ed33f163d7958fb7806992e003d2279ee1f5b' }))));
+        return (index.h(index.Host, { key: 'd39155a476f2043e12e6869abdec2bde6872951a', class: "zonos--elements" }, index.h("a", { key: '8fe2d59047850181984a00747ddc341ef88cb302', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: '4eef2f735b77fce6f254e44ca0d4aded68863468' }))));
     }
 };
 ZonosLink.style = ZonosLinkStyle0;

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

@@ -26,11 +26,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: 'c41a277084d4880e1f452a1f7ca097ad3507059f', class: classes.classes(['zonos--elements zonos--logo']), style: {
+        return (index.h(index.Host, { key: '0b8e78167613096d36d1f500e21284194246974e', class: classes.classes(['zonos--elements zonos--logo']), style: {
                 '--zonos--filter-color': filterColor,
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 '--zonos--width': this.width,
-            } }, index.h("img", { key: '01361446c08074a8f8b4cac206a999e381d5d903', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
+            } }, index.h("img", { key: 'd657a31c178c580a90e268ebc4b06fb4d0e15eae', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
 };

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

@@ -72,9 +72,12 @@ const ZonosStripeInput = class {
     render() {
         const primaryColor = this.overridePrimaryColor || zonosStore.zonosStore.appearance.colorPrimary;
         const secondaryColor = this.overrideSecondaryColor || zonosStore.zonosStore.appearance.colorSecondary;
-        const isDark = primaryColor && isDarkColor.isDarkColor(primaryColor);
+        // Always use theme from appearance settings if it's collect
+        const isDark = window.Zonos.isCollect
+            ? zonosStore.zonosStore.appearance.theme === 'DARK'
+            : primaryColor && isDarkColor.isDarkColor(primaryColor);
         const fontSize = zonosStore.zonosStore.appearance.fontSizeInputValue || 16;
-        return (index.h(index.Host, { key: 'ce50e8c3f41abc7f7605a4423dc21c5fce755c9a', class: classes.classes([
+        return (index.h(index.Host, { key: '351f86f2aa5ab9ee9fcb2b1919443a8b3d57a4c2', class: classes.classes([
                 'zonos--input zonos--elements',
                 isDark && 'dark',
                 (this.isError || !!this.error) && 'has-error',
@@ -83,10 +86,10 @@ const ZonosStripeInput = class {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 '--zonos--font-size': `${fontSize}px`,
                 '--zonos--primary-color': secondaryColor,
-            } }, index.h("div", { key: '8953c4cf31d9de771ef8f6351476d5db9de5655a', class: classes.classes([
+            } }, index.h("div", { key: 'fb0b3e3d5feb11a458a6d4f3509ff812600b5935', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("input", Object.assign({ key: 'c66c0e5787191ab6bb804755da7477e222b3ff40' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
+            ]) }, index.h("input", Object.assign({ key: '499164e3c30a1a72032dd815899c380f328cc431' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.internalValue && 'has-content',
@@ -96,7 +99,7 @@ const ZonosStripeInput = class {
                 this.inputChange.emit(input.value);
                 this.el.inputValue = input.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), index.h("div", { key: '17c7fa7ef87bf765203cadb3ff24ead25ac45332', class: "zonos--floated-label" }, index.h("label", { key: '4d7c8e503bd0dc0081b13a36c2a1c5f976ee93e3', htmlFor: this.inputId }, this.inputLabel))), this.error && (index.h("zonos-text", { key: '1352d1d09b05a25ced56d31b16cf1f203b0eaaec', textColor: "red-600", type: "caption" }, this.error))));
+            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), index.h("div", { key: '27b56860180c0758d51b6f73e0336bdecf4d85e6', class: "zonos--floated-label" }, index.h("label", { key: '8119e9b68b052f9eaea762da61007a6eb4c29bd4', htmlFor: this.inputId }, this.inputLabel))), this.error && (index.h("zonos-text", { key: 'c141d6887bdfc3ac6fa580fcc47de25a9b99853b', textColor: "red-600", type: "caption" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -109,7 +109,7 @@ const textOptions = {
     },
 };
 
-const zonosTextCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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{color:var(--zonos--color)}:host(.zonos--text-size-3xl)>*,:host(.zonos--text-size-3xl){font-size:var(--zonos--font-size-3xl, var(--zonos-elements-font-size-3xl))}:host(.zonos--text-size-2xl)>*,:host(.zonos--text-size-2xl){font-size:var(--zonos--font-size-2xl, var(--zonos-elements-font-size-2xl))}:host(.zonos--text-size-xl)>*,:host(.zonos--text-size-xl){font-size:var(--zonos--font-size-xl, var(--zonos-elements-font-size-xl))}:host(.zonos--text-size-l)>*,:host(.zonos--text-size-l){font-size:var(--zonos--font-size-l, var(--zonos-elements-font-size-l))}:host(.zonos--text-size-base)>*,:host(.zonos--text-size-base){font-size:var(--zonos--font-size-base, var(--zonos-elements-font-size-base))}:host(.zonos--text-size-s)>*,:host(.zonos--text-size-s){font-size:var(--zonos--font-size-s, var(--zonos-elements-font-size-s))}:host(.zonos--text-size-xs)>*,:host(.zonos--text-size-xs){font-size:var(--zonos--font-size-xs, var(--zonos-elements-font-size-xs))}:host(.zonos--text-weight-900)>*,:host(.zonos--text-weight-900){font-weight:900}:host(.zonos--text-weight-700)>*,:host(.zonos--text-weight-700){font-weight:700}:host(.zonos--text-weight-600)>*,:host(.zonos--text-weight-600){font-weight:600}:host(.zonos--text-weight-500)>*,:host(.zonos--text-weight-500){font-weight:500}:host(.zonos--text-weight-400)>*,:host(.zonos--text-weight-400){font-weight:400}";
+const zonosTextCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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{color:var(--zonos--color)}:host(.zonos--text-size-3xl)>*,:host(.zonos--text-size-3xl){font-size:var(--zonos--font-size-3xl, var(--zonos-elements-font-size-3xl))}:host(.zonos--text-size-2xl)>*,:host(.zonos--text-size-2xl){font-size:var(--zonos--font-size-2xl, var(--zonos-elements-font-size-2xl));line-height:32px}:host(.zonos--text-size-xl)>*,:host(.zonos--text-size-xl){font-size:var(--zonos--font-size-xl, var(--zonos-elements-font-size-xl))}:host(.zonos--text-size-l)>*,:host(.zonos--text-size-l){font-size:var(--zonos--font-size-l, var(--zonos-elements-font-size-l))}:host(.zonos--text-size-base)>*,:host(.zonos--text-size-base){font-size:var(--zonos--font-size-base, var(--zonos-elements-font-size-base))}:host(.zonos--text-size-s)>*,:host(.zonos--text-size-s){font-size:var(--zonos--font-size-s, var(--zonos-elements-font-size-s))}:host(.zonos--text-size-xs)>*,:host(.zonos--text-size-xs){font-size:var(--zonos--font-size-xs, var(--zonos-elements-font-size-xs))}:host(.zonos--text-weight-900)>*,:host(.zonos--text-weight-900){font-weight:900}:host(.zonos--text-weight-700)>*,:host(.zonos--text-weight-700){font-weight:700}:host(.zonos--text-weight-600)>*,:host(.zonos--text-weight-600){font-weight:600}:host(.zonos--text-weight-500)>*,:host(.zonos--text-weight-500){font-weight:500}:host(.zonos--text-weight-400)>*,:host(.zonos--text-weight-400){font-weight:400}";
 const ZonosTextStyle0 = zonosTextCss;
 
 const ZonosText = class {

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

@@ -20,9 +20,9 @@ const ZonosToggle = class {
         this.options = [];
     }
     render() {
-        return (index.h(index.Host, { key: '9a526e8fee8e4c5af558442c82f7acbc634706c3', class: classes.classes(['zonos--elements zonos--toggle']), style: {
+        return (index.h(index.Host, { key: '1490dbdc9cc90d4d51ccc9e665fb5ee00455bf0e', class: classes.classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '97ca281e8e782c3b08231c6ba705325bbf16d402', class: "wrapper" }, this.options.map(option => {
+            } }, index.h("div", { key: 'af24e513fc988893be3dba1a08044d69c9493522', class: "wrapper" }, this.options.map(option => {
             const selected = option.value === this.value;
             return (index.h("button", { class: classes.classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
                     this.toggleChanged.emit(option.value);

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

@@ -22,10 +22,10 @@ const ZonosTooltip = class {
         this.showTooltip = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'd984faacc8d79f2001c84fb69c30f3665dca44aa', class: "zonos--elements" }, index.h("div", { key: '327f9d077f2400f05ff3c4337b566c461a2d05cf', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '24315359176ca625f18a856d781624850d05de17' }), index.h("div", { key: '296041bbebddd0250c6d5d9649e6502571a08533', class: classes.classes([
+        return (index.h(index.Host, { key: '10a391b40266e3f80d94f0870754fc1a5aaa1822', class: "zonos--elements" }, index.h("div", { key: '31236e53e67d2199204894d02590bfa5e54eaf8e', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '37a6de3ef4e6fdd64ecb3f3bdcc21f0dd091e4da' }), index.h("div", { key: 'ecd0222cd1a712790b8864d265919278493e8252', class: classes.classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, index.h("zonos-text", { key: '5a2828baf420acb666eb1f0029c8d0b9eadd55ce', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: '1bd8bf5085edfdc3d42db03e460062bf744c174b', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, index.h("zonos-text", { key: 'afb6494edf8cbe4e3257a27cdc815b91995704e7', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: '8d7c0ce999a9ee7fe49dd506497343734c99f76e', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
 };
 ZonosTooltip.style = ZonosTooltipStyle0;

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

@@ -20,9 +20,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: '558218f6135d5fcc9f3649b76c568a9f514aa8e8', style: {
+        return (index.h(index.Host, { key: 'dc01f22fed27bc4804c12c0a0236bddf2ad95c51', style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '86af63aa01214db20cc094ddcbfd05b3ee28f1ed', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '4786fb44cbf865a548c900b752f9b13709f1f935' }))));
+            } }, index.h("div", { key: '460e86adabb0c867eab109806968fa1a72c2e58f', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '5ea93490a795258d57d15f45cda39da6b244314a' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

package/dist/collection/collection-manifest.json

@@ -19,6 +19,14 @@
     "components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.js",
     "components/checkout/zonos-checkout/zonos-review/zonos-review.js",
     "components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js",
+    "components/checkout/zonos-collect/zonos-collect.js",
+    "components/checkout/zonos-collect/zonos-collect-cart-items/zonos-collect-cart-items.js",
+    "components/checkout/zonos-collect/zonos-collect-finish/zonos-collect-finish.js",
+    "components/checkout/zonos-collect/zonos-collect-footer/zonos-collect-footer.js",
+    "components/checkout/zonos-collect/zonos-collect-order-details/zonos-collect-order-details.js",
+    "components/checkout/zonos-collect/zonos-collect-payment/zonos-collect-payment.js",
+    "components/checkout/zonos-collect/zonos-collect-review/zonos-collect-review.js",
+    "components/checkout/zonos-collect/zonos-collect-subtotal/zonos-collect-subtotal.js",
     "components/common/zonos-badge/zonos-badge.js",
     "components/common/zonos-button/zonos-button.js",
     "components/common/zonos-card/zonos-card.js",
@@ -30,6 +38,7 @@
     "components/common/zonos-country-select/zonos-country-select.js",
     "components/common/zonos-custom-message/zonos-custom-message.js",
     "components/common/zonos-dialog/zonos-dialog.js",
+    "components/common/zonos-h-stack/zonos-h-stack.js",
     "components/common/zonos-icon/zonos-icon.js",
     "components/common/zonos-input/zonos-input.js",
     "components/common/zonos-language-select/zonos-language-select.js",
@@ -38,6 +47,7 @@
     "components/common/zonos-logo/zonos-logo.js",
     "components/common/zonos-rest-state/zonos-rest-state.js",
     "components/common/zonos-select-dialog-header/zonos-select-dialog-header.js",
+    "components/common/zonos-skeleton/zonos-skeleton.js",
     "components/common/zonos-stripe-input/zonos-stripe-input.js",
     "components/common/zonos-stripe-phone-input/zonos-stripe-phone-input.js",
     "components/common/zonos-stripe-select/zonos-stripe-select.js",

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

@@ -129,6 +129,9 @@ export class ZonosCheckoutPayment {
         if (!stripeStore.stripeElements) {
             return null;
         }
+        if (!stripeStore.clientSecret && !cartStore.isStagingMode) {
+            return null;
+        }
         // start validate on typing after error banner is shown, and hide it if the form is complete
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();

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

@@ -498,7 +498,7 @@ export class ZonosCheckout {
             const cartIdResult = await zonosStore.checkoutSettings.createCartId();
             let cartId;
             if (typeof cartIdResult === 'object') {
-                log('object detected, use cartId and prefill address from createCartId');
+                log('object detected, use cartId and prefill address from createCartId', 'info', cartIdResult);
                 cartId = cartIdResult.cartId;
                 // set prefill address if provided in createCartId callback result
                 this.useShippingDataFromCreateCartId(cartIdResult.shippingData);
@@ -1798,7 +1798,7 @@ export class ZonosCheckout {
                     "signature": "(session: CheckoutSessionDetailsFragment) => Promise<void>",
                     "parameters": [{
                             "name": "session",
-                            "type": "{ cartId: string | null; clientSecret: string; customerProfile: { email: string | null; locations: { administrativeArea: string; countryCode: CountryCode; email: string | null; line1: string; line2: string | null; locality: string; name: string | null; phone: string | null; postalCode: string; }[] | null; name: string | null; } | null; customerSessionClientSecret: string | null; id: string; landedCost: { amountSubtotals: { discounts: number | null; duties: number; fees: number; items: number; landedCostTotal: number; shipping: number; taxes: number; } | null; id: string; landedCostGuaranteeCode: LandedCostGuaranteeCode; method: IncotermCode; shipmentRating: { displayName: string; }; } | null; metadata: ({ key: string; value: string; } | null)[] | null; organizationId: string; subtotals: { adjustments: number; duties: number; exchangeRate: { id: string; rate: number; sourceCurrencyCode: CurrencyCode; targetCurrencyCode: CurrencyCode; type: ExchangeRateType; }; fees: number; items: number; landedCostTotal: number; presentmentCurrencyCode: CurrencyCode; shipping: number; taxes: number; total: number; }; varianceTestResults: { selectedVariantKey: string; testKey: string; }[] | null; }",
+                            "type": "{ cartId: string | null; clientSecret: string; completedAt: string | null; customerProfile: { email: string | null; locations: { administrativeArea: string; countryCode: CountryCode; email: string | null; line1: string; line2: string | null; locality: string; name: string | null; phone: string | null; postalCode: string; }[] | null; name: string | null; } | null; customerSessionClientSecret: string | null; id: string; landedCost: { amountSubtotals: { discounts: number | null; duties: number; fees: number; items: number; landedCostTotal: number; shipping: number; taxes: number; } | null; appliedAdjustments: { adjustment: { name: string | null; source: AdjustmentSource | null; } | null; amount: number; item: { amount: number; } | null; type: LandedCostAdjustmentType | null; }[] | null; deMinimis: { type: DeMinimisType; threshold: DeMinimisThreshold; method: IncotermCode; note: string; formula: string; }[]; duties: { amount: number; currencyCode: CurrencyCode; }[]; fees: { amount: number; currencyCode: CurrencyCode; }[]; rootId: string; landedCostGuaranteeCode: LandedCostGuaranteeCode; method: IncotermCode; remittance: { amount: number; description: string; }[]; id: string; shipmentRating: { amount: number; currencyCode: CurrencyCode; displayName: string; id: string; shippingProfile: { transitTime: { guaranteedDelivery: string | null; max: number | null; min: number | null; type: TransitTypeCode | null; } | null; } | null; }; taxes: { amount: number; currencyCode: CurrencyCode; }[]; } | null; metadata: ({ key: string; value: string; } | null)[] | null; organizationId: string; subtotals: { adjustments: number; duties: number; exchangeRate: { id: string; rate: number; sourceCurrencyCode: CurrencyCode; targetCurrencyCode: CurrencyCode; type: ExchangeRateType; }; fees: number; items: number; landedCostTotal: number; presentmentCurrencyCode: CurrencyCode; shipping: number; taxes: number; total: number; }; varianceTestResults: { selectedVariantKey: string; testKey: string; }[] | null; }",
                             "docs": ""
                         }],
                     "references": {

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

@@ -49,7 +49,11 @@ export class ZonosShipping {
             // update the address async if we already got landed cost data
             await stripeStoreAsyncAddressUpdate();
             // save selected shipping option to store
-            await cartStoreUpdateSelectedShippingOption(selectedShippingOption, e.detail.landedCostId);
+            await cartStoreUpdateSelectedShippingOption({
+                applySubtotalsOnly: false,
+                landedCostId: e.detail.landedCostId,
+                selectedShippingOption,
+            });
             this.isSelecting = false;
         };
         this.handleValidate = () => {

package/dist/collection/components/checkout/zonos-collect/assets/ChevronDownIcon.svg

@@ -0,0 +1 @@
+<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>