@zonos/elements 1.3.218 → 1.3.220

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-9a9ae4b9.js');
+const localization = require('./localization-0169b27d.js');
 const handleFetch = require('./handleFetch-45f35cac.js');
-const paypal = require('./paypal-d36b5dd1.js');
+const paypal = require('./paypal-9ee374a0.js');
 require('./VarianceTest-0cb1e118.js');
+require('./translationStore-0c67178f.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">
@@ -183,12 +184,20 @@ const ZonosPayment = class {
         }
     }
     watchInitStripe() {
+        var _a;
         if (!this.stripeElements) {
             return;
         }
         // Create and mount the Authentication Element in ${type} mode
         const paymentElement = cart.stripeStore.stripePaymentElement ||
             this.stripeElements.create('payment', {
+                defaultValues: {
+                    billingDetails: {
+                        address: {
+                            country: (_a = cart.stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country,
+                        },
+                    },
+                },
                 layout: 'tabs',
             });
         const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
@@ -211,7 +220,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: 'c0b27f25785a9f6de2705e16d97f1bf5f7bcb0a4', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '1cfdb16f94a5219882da9da013a6e2de6a6b3c3f', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: 'bb5ac07b4c32f2469f4825426160542d9729d332', class: "zonos--payment-component" }), index.h("div", { key: '34f805b56fa151e8a3102361df9fb8b3e636dc75', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -230,6 +239,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 +271,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: 'bcf11ef0ceab1d847c237ec26ec604440983c16f', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: 'ce5033f39b2e9644e30fc1e0e35f64e5d9b9730d', 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-0169b27d.js');
+const translationStore = require('./translationStore-0c67178f.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: '178654e9b701bb68a4d47495897445cf87806c37', class: "zonos--elements" }, index.h("div", { key: 'eb0f3ced0226513df3911e0664aff10d523fdac7', 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: 'f185f2d707a3b9628896a7e15f2a0ad20da112ec' }, index.h("div", { key: '80c53ad6728b221bedbfaec2ec77fee96029e12b', class: "zonos--hello-dialog-content" }, index.h("zonos-button", { key: '31b71832bee5e4515dbf060746f022d9c91502af', 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: '5f11c3b0355ba0c85cf134522b6e21fd28dfe16c', spacing: 24 }, index.h("zonos-country-flag", { key: '6d6dcad7e3700f67c4261995d867aacb42715404', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), index.h("zonos-v-stack", { key: '7a325a9b94e58dc5f8dba5baba9a00f835466ee2', class: "zonos--hello-dialog-header", spacing: 4 }, index.h("zonos-text", { key: '24e2407475b740b50ca07fe9278363fdefc27d01', type: "boldSubheader" }, welcomeMessage), index.h("zonos-text", { key: '6b38dee6ec6fcf39e02c5225155e2af69c367a39', innerHTML: defaultMessage, textColor: "gray-800" })), index.h("zonos-v-stack", { key: '567d126d05f236fa0aab764d78b1692ebfe82f8b', 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: 'e96943bc58d47531f748217858939ddf2a586441', spacing: "12px" }, index.h("zonos-v-stack", { key: '3e1850a86542ad66c224e4b81f1c5442e7716f6d', 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: '33e41b69e4a5b00623f3e412609e7162cb560c38', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (index.h("div", { key: 'fa17c20b3d893ed9f2249bbceca5237fa48bc64e' }, index.h("zonos-country-select", { key: '15a5924f176c4a805405684c3eda90f47979cf0b', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (index.h("div", { key: 'ab1d061a3c9c68b43c4203fa14af2ffcf7d33e82' }, index.h("zonos-language-select", { key: '97f4c760e65d7af39160a1ff978d8a7b0864a763', 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-0169b27d.js');
+const translationStore = require('./translationStore-0c67178f.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: '52acbcb39e71fb56029f7aa44b62b2189aa27fd7', 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: '9f4566c8f668d633ec5283319d67b8de93703524', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("input", { key: '75973f2c81e28a0007b047375ead0c5e6f055a14', class: classes.classes([
+            ]) }, index.h("input", { key: '72de2d08535a007c0e77a037f9d236f0dc45f56e', 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: 'e4d54ac95efa67ce8c7e56b3a2625e99c417f04d', 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-0169b27d.js');
+const translationStore = require('./translationStore-0c67178f.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: '232674c6f35113c6ad3f1094e6e6d4128b4d4c02', 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: '014d1364e165e4ee4e9cf304791fc10fdfb6d87c', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '65b454467b033cd061ab08693e857eed75c76511', handleOnClose: () => this.handleOnClose(), label: translationStore.translate('Select a language') }), index.h("div", { key: '6ea8fca0b44ada24b9b2b84e22584ba1a7459dc4', 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: 'cc65559ef7867bbd8e7990556b50434faa0a905c', 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: '77c280b12744520b4a172193f88798aa53d33eb7', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, index.h("div", { key: 'eaba9d1e50f71f23e330e989521d2156a617b22d', class: "zonos--select-dialog-header" }, index.h("zonos-text", { key: 'ddddc6b5bca87cf44cbc7428d402f44c67422cb6', type: "boldLabel" }, this.label), index.h("zonos-button", { key: '313e3955ba8bafc9a1b36b4c1c8f99e975fb8dd3', 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: '9af2821c22f3e37d52b6f03bf544fcaca1c0ed7b' }))));
     }
 };
 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: '7c6ecf4d61e7dfb56491e58814478c906423473b', class: "zonos--elements" }, index.h("a", { key: '05bc59fb4940fa48d37a10cfe9df3c495d60785f', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: '07b51a0a95cd5a7b392bb5efef96c8e4dd4bb9b3' }))));
     }
 };
 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: '0f0fe90d3ef58b5a7b934361567e92b03630b46a', 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: 'ec026a1a596d985aa50c18f8ebffc8683e62cc05', 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: '0bed90e63595e6036b9342e15c999bb7e7971240', 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: '00e5c3a220aaeee221c5cc104d2463f5468067cf', 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: '25459f6bc07647962676edd724630cd7726bb680' }, 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: '145634dac24ef37cd206847537bea2f641f3b5a0', class: "zonos--floated-label" }, index.h("label", { key: '70eabcab7a30e851086a2b79107968f9a999c67e', htmlFor: this.inputId }, this.inputLabel))), this.error && (index.h("zonos-text", { key: '55ab6d14b5e6c98c665f41a1c4c1dd70523ee91f', 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: '1b844d11272181b9c81c2bfb03a13a1ad412cb9f', 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: 'f5991e19ea02a82ae1f6e7529bb3bb77e66b7165', 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: 'd96671c8c9b426cbde335b3d8024a56f4e188281', class: "zonos--elements" }, index.h("div", { key: 'de75e111a65033501e9907992df0d9ae8cbf5df5', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("slot", { key: '3d8297ef44c97112e29a62a31b3acf47789726a9' }), index.h("div", { key: 'ee777f084991e28255a2957cf3585110f14c65d5', 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: 'fb22b220feb39c31111d45a393024e7df4d3e314', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), index.h("zonos-text", { key: '6019665e4e0b8eb4390a70b5d90cdcc4f16c6ba3', 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: 'd65f235ba8ffaefff1ec5e5bbd8bba1313e97a83', 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: '31806036975f9640fdccafcc11053596dd17f4ef', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'a3c5a3f592f86cfd9ebb810c72e2e22011ec4758' }))));
     }
 };
 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.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; currencyCode: CurrencyCode; deMinimis: { formula: string; threshold: DeMinimisThreshold; method: IncotermCode; note: string; type: DeMinimisType; }[]; duties: { amount: number; currencyCode: CurrencyCode; }[]; fees: { amount: number; currencyCode: CurrencyCode; }[]; id: string; landedCostGuaranteeCode: LandedCostGuaranteeCode; method: IncotermCode; remittance: { amount: number; description: string; }[]; rootId: 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>