@zonos/elements 1.3.6 → 1.3.7-alpha.0

package/dist/cjs/{getBorderRadius-b252096d.js → getBorderRadius-834c321d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-5d94dabb.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
 
 /**
  * Get the border radius for the elements based on the style

package/dist/cjs/{isDarkColor-168002d6.js → isDarkColor-924e6a7a.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-5d94dabb.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
 
 var tinycolor$1 = {exports: {}};
 

package/dist/cjs/{submitGtag-792fe45d.js → submitGtag-907e71d3.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const zonosStore = require('./zonosStore-5d94dabb.js');
-const localization = require('./localization-2c9f5765.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
+const cart = require('./cart-ecc80eb0.js');
 
 /**
  * Submit a gtag event if the gtag function is available.
@@ -13,7 +13,7 @@ const submitGtag = (event) => {
         return;
     }
     if (typeof window.gtag === 'function') {
-        localization.log('Zonos submits gtag event', 'log', event);
+        cart.log('Zonos submits gtag event', 'log', event);
         window.gtag('event', event, {});
     }
 };

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

@@ -3,13 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const cart = require('./cart-b8bbf22d.js');
-const localization = require('./localization-2c9f5765.js');
+const cart = require('./cart-ecc80eb0.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
-const zonosStore = require('./zonosStore-5d94dabb.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-b252096d.js');
-const isDarkColor = require('./isDarkColor-168002d6.js');
+const getBorderRadius = require('./getBorderRadius-834c321d.js');
+const isDarkColor = require('./isDarkColor-924e6a7a.js');
 
 const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}";
 const ZonosAddressStyle0 = zonosAddressCss;
@@ -61,7 +60,7 @@ const ZonosAddress = class {
         this.stripe = window.Zonos.stripe;
         const { stripeAddressEventData, stripeElements } = this.getStripeAddressInstance();
         if (!this.stripe || !stripeElements) {
-            localization.logError("Stripe is not initialized. Couldn't load stripe element.");
+            cart.logError("Stripe is not initialized. Couldn't load stripe element.");
             return;
         }
         const phone = (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.phone;
@@ -70,7 +69,7 @@ const ZonosAddress = class {
             // will throw error if key phone exist and its value is empty or 'undefined'.
             (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
         }
-        const shippableCountries = localization.localizationStore.shippingZoneCountries;
+        const shippableCountries = cart.localizationStore.shippingZoneCountries;
         const shippingZone = shippableCountries
             ? Object.values(shippableCountries).map(country => country.code)
             : [];
@@ -79,7 +78,7 @@ const ZonosAddress = class {
             contacts: this.defaultAddress ? [this.defaultAddress] : [],
             defaultValues: {
                 address: Object.assign(Object.assign({}, stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address), { country: (stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.address.country) ||
-                        localization.localizationStore.selectedCountryCode ||
+                        cart.localizationStore.selectedCountryCode ||
                         'AL' }),
                 firstName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.firstName,
                 lastName: stripeAddressEventData === null || stripeAddressEventData === void 0 ? void 0 : stripeAddressEventData.value.lastName,
@@ -229,10 +228,23 @@ const ZonosCollapse = class {
     }
     render() {
         this.height = this.el.scrollHeight;
-        return (index.h(index.Host, { key: '372c80d0d5b8d2c693b2c74bd6652430c8e4a5bb', class: 'zonos--elements zonos--collapse', style: {
+        if (!this.collapsed) {
+            // wait for the collapse animation to finish, then set overflow to visible
+            setTimeout(() => {
+                // if the element collapsed state is still not changed, set overflow to visible
+                if (!this.collapsed) {
+                    this.el.style.overflow = 'visible';
+                }
+            }, 300);
+        }
+        else {
+            // set overflow to hidden to prevent content from showing when collapsed
+            this.el.style.overflow = 'hidden';
+        }
+        return (index.h(index.Host, { key: 'cbec79617b603172a6c3c41d29ee093f61eead92', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, index.h("div", { key: 'babd12279d1ac54092a1cff83e8e5b8ed5e81008' }, index.h("iframe", { key: '6d3a7845d560ba587829ba68033cd92ec8d2af5b', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), index.h("slot", { key: 'f295e17fd3178eb44dc7c0c51f87a80694fd04d7' }))));
+            } }, index.h("div", { key: '6e72b98c155ee436bbaabce3d7b58294bb6ccc7a' }, index.h("iframe", { key: 'ef3306219530d635fa320099727a3574d5800285', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), index.h("slot", { key: 'a66b3d6d08a12f0c184a5c4294afdb2c340fe95d' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const zonosStore = require('./zonosStore-5d94dabb.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosBadgeCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--badge-content{display:-ms-flexbox;display:flex;gap:var(--amino-space-8);font-size:var(--amino-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--amino-radius-6);background-color:var(--amino-gray-100);color:var(--amino-gray-800);-ms-flex-align:center;align-items:center}:host p{font-weight:600;line-height:16px}:host .icon-right svg{-ms-flex-order:2;order:2}:host .small{padding:2px 8px}:host .rounded{border-radius:20px}:host .bold{background-color:var(--amino-gray-600);color:var(--amino-gray-100)}:host .blue{background-color:var(--amino-blue-100);color:var(--amino-blue-800)}:host .blue.bold{background-color:var(--amino-blue-600);color:var(--amino-blue-100)}:host .green{background-color:var(--amino-green-100);color:var(--amino-green-800)}:host .green.bold{background-color:var(--amino-green-600);color:var(--amino-green-100)}:host .red{background-color:var(--amino-red-100);color:var(--amino-red-800)}:host .red.bold{background-color:var(--amino-red-600);color:var(--amino-red-100)}:host .orange{background-color:var(--amino-orange-100);color:var(--amino-orange-800)}:host .orange.bold{background-color:var(--amino-orange-600);color:var(--amino-orange-100)}:host .purple{background-color:var(--amino-purple-100);color:var(--amino-purple-800)}:host .purple.bold{background-color:var(--amino-purple-600);color:var(--amino-purple-100)}:host .cyan{background-color:var(--amino-cyan-100);color:var(--amino-cyan-800)}:host .cyan.bold{background-color:var(--amino-cyan-600);color:var(--amino-cyan-100)}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const zonosStore = require('./zonosStore-5d94dabb.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosBannerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{border-radius:var(--amino-radius-10);padding:var(--amino-space-16);background:var(--amino-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:var(--amino-space-0);grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:var(--amino-space-4)}:host(.info){background-color:var(--amino-blue-100);border:1px solid var(--amino-blue-200)}:host(.success){background-color:var(--amino-green-100);border:1px solid var(--amino-green-200)}:host(.error){background-color:var(--amino-red-100);border:1px solid var(--amino-red-200)}:host(.warning){background-color:var(--amino-orange-100);border:1px solid var(--amino-orange-200)}";

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const zonosStore = require('./zonosStore-5d94dabb.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-b252096d.js');
+const getBorderRadius = require('./getBorderRadius-834c321d.js');
 const isColorVariable = require('./isColorVariable-41cacd82.js');
-const isDarkColor = require('./isDarkColor-168002d6.js');
+const isDarkColor = require('./isDarkColor-924e6a7a.js');
 
 /**
  * Get theme for button text based on background color

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

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const zonosStore = require('./zonosStore-5d94dabb.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
 const classes = require('./classes-b7918f56.js');
-const localization = require('./localization-2c9f5765.js');
+const cart = require('./cart-ecc80eb0.js');
 const ILanguage = require('./ILanguage-d247b45b.js');
+require('./isDarkColor-924e6a7a.js');
+require('./getBorderRadius-834c321d.js');
 
 const zonosCardCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .styled-card{border:var(--amino-border);border-radius:var(--amino-radius-6);padding:var(--spacing, var(--amino-space-24));text-align:left}:host .styled-card hr{margin-left:calc(var(--spacing, var(--amino-space-24)) * -1);margin-right:calc(var(--spacing, var(--amino-space-24)) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, var(--amino-space-24));border-bottom:var(--amino-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, var(--amino-space-24)) * -1);padding:var(--spacing, var(--amino-space-24));border-top:var(--amino-border);background:var(--amino-surface-color-secondary);margin-top:var(--spacing, var(--amino-space-24));border-bottom-left-radius:var(--amino-radius-8);border-bottom-right-radius:var(--amino-radius-8);height:var(--footerHeight)}";
 const ZonosCardStyle0 = zonosCardCss;
@@ -46,16 +48,16 @@ const ZonosLanguageSelect = class {
         index.registerInstance(this, hostRef);
         this.languageSelected = (languageCode) => {
             // mutate the selected language code in store
-            void localization.localizationStoreUpdateSelectedLocale(languageCode);
+            void cart.localizationStoreUpdateSelectedLocale(languageCode);
             this.handleOnClose();
         };
         this.handleOnClose = () => { };
     }
     render() {
-        const { selectedLocale } = localization.localizationStore;
+        const { selectedLocale } = cart.localizationStore;
         return (index.h(index.Host, { key: 'c90288e341c50d113cc63d09e864ddfa346d55a1', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '4dabc3c9ab177e5545942c725490af64cb9608c3', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '95f111f3774a568ea44204858fe503fa7c1915f3', handleOnClose: () => this.handleOnClose(), label: localization.translate('Select a language') }), index.h("div", { key: 'c2634e3b006f3d14c67ee78c0c9befdb21cecc72', 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", { color: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, index.h("div", { key: '4dabc3c9ab177e5545942c725490af64cb9608c3', class: "zonos--language-select" }, index.h("zonos-select-dialog-header", { key: '95f111f3774a568ea44204858fe503fa7c1915f3', handleOnClose: () => this.handleOnClose(), label: cart.translate('Select a language') }), index.h("div", { key: 'c2634e3b006f3d14c67ee78c0c9befdb21cecc72', 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", { color: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
 };
 ZonosLanguageSelect.style = ZonosLanguageSelectStyle0;

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

@@ -3,13 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const cart = require('./cart-b8bbf22d.js');
-const localization = require('./localization-2c9f5765.js');
-const zonosStore = require('./zonosStore-5d94dabb.js');
-const getBorderRadius = require('./getBorderRadius-b252096d.js');
-const submitGtag = require('./submitGtag-792fe45d.js');
+const cart = require('./cart-ecc80eb0.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
+const getBorderRadius = require('./getBorderRadius-834c321d.js');
+const submitGtag = require('./submitGtag-907e71d3.js');
 const classes = require('./classes-b7918f56.js');
-const isDarkColor = require('./isDarkColor-168002d6.js');
+const isDarkColor = require('./isDarkColor-924e6a7a.js');
 const ILanguage = require('./ILanguage-d247b45b.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 
@@ -69,11 +68,11 @@ const ZonosCartSubtotal = class {
         const showDutyTaxesInfo = cart.cartStore.step === 'payment' || cart.cartStore.step === 'shipping';
         const renderShippingInfo = () => {
             if (!cart.cartStore.selectedShippingOption) {
-                return (index.h(index.Fragment, null, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, localization.translate('Shipping')), index.h("zonos-text", { class: "zonos--caption", type: "caption" }, localization.translate('No shipping method selected'))));
+                return (index.h(index.Fragment, null, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.translate('Shipping')), index.h("zonos-text", { class: "zonos--caption", type: "caption" }, cart.translate('No shipping method selected'))));
             }
-            return (index.h(index.Fragment, null, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.cartStore.selectedShippingOption.displayName), cart.cartStore.selectedShippingOptionTransitTime && (index.h("zonos-text", { class: "zonos--caption", type: "caption" }, cart.cartStore.selectedShippingOptionTransitTime, ' ', localization.translate('business days')))));
+            return (index.h(index.Fragment, null, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.cartStore.selectedShippingOption.displayName), cart.cartStore.selectedShippingOptionTransitTime && (index.h("zonos-text", { class: "zonos--caption", type: "caption" }, cart.cartStore.selectedShippingOptionTransitTime, ' ', cart.translate('business days')))));
         };
-        return (index.h(index.Host, { class: "zonos--cart-subtotal zonos--elements" }, index.h("table", { class: "zonos--cart-table" }, index.h("tr", { class: "zonos--row zonos--cart-subtotal" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("zonos-text", { type: "semiBoldLabel" }, localization.translate('Cart subtotal'))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+        return (index.h(index.Host, { class: "zonos--cart-subtotal zonos--elements" }, index.h("table", { class: "zonos--cart-table" }, index.h("tr", { class: "zonos--row zonos--cart-subtotal" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("zonos-text", { type: "semiBoldLabel" }, cart.translate('Cart subtotal'))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
             amount: cart.cartStore.subtotal,
             currency: cart.cartStore.currency,
         })))), index.h("tr", { class: "zonos--row zonos--cart-shipping" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, renderShippingInfo()), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cart.cartStore.shipping
@@ -81,12 +80,12 @@ const ZonosCartSubtotal = class {
                 amount: cart.cartStore.shipping,
                 currency: cart.cartStore.currency,
             })
-            : '-')), showDutyTaxesInfo && (index.h("tr", { class: "zonos--row zonos--cart-duties" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("div", { class: "zonos--title-with-icon" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, localization.translate('Duties, taxes, and fees')), index.h("zonos-tooltip", { label: localization.translate('Nothing due at the door') }, index.h("zonos-icon", { "aria-label": "Learn more about duties, taxes, and fees", content: InfoIcon, size: 16 }))), !!cart.cartStore.isSelectedShippingAboveDeminimis && (index.h("zonos-text", { textColor: "gray-800", type: "body" }, localization.translate('Order is over the de minimis threshold for both duty and tax')))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("div", { class: "zonos--cart-duty-tax-price" }, cart.cartStore.dutiesTaxFees
+            : '-')), showDutyTaxesInfo && (index.h("tr", { class: "zonos--row zonos--cart-duties" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column zonos--cart-subtotal-title" }, index.h("div", { class: "zonos--title-with-icon" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.translate('Duties, taxes, and fees')), index.h("zonos-tooltip", { label: cart.translate('Nothing due at the door') }, index.h("zonos-icon", { "aria-label": "Learn more about duties, taxes, and fees", content: InfoIcon, size: 16 }))), !!cart.cartStore.isSelectedShippingAboveDeminimis && (index.h("zonos-text", { textColor: "gray-800", type: "body" }, cart.translate('Order is over the de minimis threshold for both duty and tax')))), index.h("td", { class: "zonos--column zonos--cart-subtotal-price" }, index.h("div", { class: "zonos--cart-duty-tax-price" }, cart.cartStore.dutiesTaxFees
             ? formatCurrency({
                 amount: cart.cartStore.dutiesTaxFees,
                 currency: cart.cartStore.currency,
             })
-            : '-', cart.cartStore.isSelectedShippingGuarantee && (index.h("zonos-badge", null, localization.translate('Guaranteed'))))))), index.h("tr", { class: "zonos--row zonos--cart-pay-total" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, localization.translate('Order total'))), index.h("td", { class: "zonos--column" }, index.h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+            : '-', cart.cartStore.isSelectedShippingGuarantee && (index.h("zonos-badge", null, cart.translate('Guaranteed'))))))), index.h("tr", { class: "zonos--row zonos--cart-pay-total" }, index.h("td", { class: "zonos--column" }), index.h("td", { class: "zonos--column" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cart.translate('Order total'))), index.h("td", { class: "zonos--column" }, index.h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
             amount: 
             // show total without taxes when step is shipping, show total with taxes when step is payment
             cart.cartStore.step === 'shipping'
@@ -114,7 +113,7 @@ const ZonosCheckoutFinish = class {
             var _a, _b;
             const baseUrl = "https://v1.route.js.zonos.com";
             const checkoutSessionId = cart.cartStore.checkoutSessionId;
-            const { errors, json } = await localization.handleFetch(`${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}`);
+            const { errors, json } = await cart.handleFetch(`${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}`);
             if (errors.length || !(json === null || json === void 0 ? void 0 : json.id)) {
                 return null;
             }
@@ -135,6 +134,11 @@ const ZonosCheckoutFinish = class {
                 case 'CLOSE_MODAL':
                     this.closeClickHandler();
                     break;
+                case 'ZONOS_SUCCESS_PAGE':
+                default:
+                    // Do nothing, display Zonos success page
+                    this.isLoading = false;
+                    break;
             }
         };
         // TODO: This method of pulling orders is temporary. Once we have a working event registry system, we will rely on that to tell us when the order is ready to trigger onOrderSuccess
@@ -143,7 +147,6 @@ const ZonosCheckoutFinish = class {
             if (order) {
                 this.order = order;
                 this.handleSuccessBehavior(order.id);
-                this.isLoading = false;
             }
             else if (!order && attempts < 5) {
                 // Wait for 1 second before the next attempt
@@ -162,7 +165,7 @@ const ZonosCheckoutFinish = class {
                         storeId: zonosStore.zonosStore.storeId,
                     },
                 };
-                void localization.handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/log-error`, {
+                void cart.handleFetch(`${"https://v1.route.js.zonos.com"}/api/zonos-elements/log-error`, {
                     body: errorObject,
                     method: 'POST',
                 });
@@ -179,8 +182,8 @@ const ZonosCheckoutFinish = class {
                 this.notificationType = error ? 'error' : 'success';
                 this.notificationMessages = messages || [];
                 this.notificationTitle = error
-                    ? localization.translate('Payment failed')
-                    : localization.translate("You're all set!");
+                    ? cart.translate('Payment failed')
+                    : cart.translate("You're all set!");
                 if (error) {
                     submitGtag.submitGtag('zonos-checkout-payment-fail');
                 }
@@ -195,12 +198,17 @@ const ZonosCheckoutFinish = class {
                 }
                 // Attempt to pull the order details from the graph every second on 5 attempts
                 if (this.notificationType === 'success') {
-                    this.isLoading = true;
                     void this.getPullOrder();
                 }
+                else {
+                    this.isLoading = false;
+                }
+            }
+            else {
+                this.isLoading = false;
             }
             cart.stripeStoreReset();
-            this.isLoading = false;
+            cart.cartStore.checkoutSessionId = null;
         };
         this.closeClickHandler = () => {
             this.closeClick.emit();
@@ -233,9 +241,9 @@ const ZonosCheckoutFinish = class {
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (index.h(index.Host, { key: '9a09eb68e5e6d256f72798bb5119ad1ff467fd70', class: "zonos--checkout-finish zonos--elements", style: {
+        return (index.h(index.Host, { key: '08886ec74e789091534c8bd6561a8349a5a6966c', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius.getBorderRadius(this.borderRadius),
-            } }, this.isLoading && (index.h("div", { class: "loading-wrapper" }, index.h("zonos-spinner", null))), !this.isLoading && (index.h(index.Fragment, null, index.h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon$1, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", null, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), index.h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, localization.translate('Keep shopping')))))));
+            } }, this.isLoading && (index.h("div", { class: "loading-wrapper" }, index.h("zonos-spinner", null))), !this.isLoading && (index.h(index.Fragment, null, index.h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (index.h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (index.h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon$1, iconColor: 'red-800', size: 50 })), index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), index.h("zonos-text", null, this.notificationMessages.map(message => (index.h(index.Fragment, null, message, index.h("br", null))))), index.h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, cart.translate('Keep shopping')))))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -273,7 +281,7 @@ const ZonosCheckoutFooter = class {
         var _a, _b;
         const primaryColor = (_a = zonosStore.zonosStore.appearance) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor.isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
-        const languageLabel = (_b = ILanguage.languages.find(x => x.code === localization.localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.label;
+        const languageLabel = (_b = ILanguage.languages.find(x => x.code === cart.localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.label;
         return (index.h(index.Host, { key: 'cadd2ef8877c716cdeb1f5f40642e41cabc2a55d', class: "zonos--elements" }, index.h("div", { key: '480995fd1ca7bc41702d15dd40d64e02a9ba09dd', class: "zonos--checkout-footer", "data-theme": footerTheme, style: { '--primary-color': primaryColor } }, index.h("div", { key: 'b83ebb3203542f7f4a227b50b26010cbeb914294', class: "zonos--checkout-locale-wrapper" }, index.h("zonos-button", { key: '66ad21d85629d159b4ff3341e82c92d6bd19ceca', class: "zonos--checkout-footer-language-button", icon: index.h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: "gray-700" }), onClick: () => this.toggleDialog(), variant: "subtle" }, languageLabel), index.h("div", { key: '1e8dce34f3866570f267233644c6d5549cf02c9b', class: classes.classes([
                 'zonos--checkout-footer-dialog',
                 this.showDialog && 'zonos--checkout-footer-dialog-open',
@@ -314,7 +322,7 @@ const ZonosCheckoutPayment = class {
             return null;
         }
         this.disabled = !((_a = cart.stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
-        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Payment method')), this.paymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, localization.translate("We couldn't complete your payment. Please verify the payment details and try again."))), index.h("zonos-payment", null), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Payment method')), this.paymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, cart.translate("We couldn't complete your payment. Please verify the payment details and try again."))), index.h("zonos-payment", null), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
             amount: cart.cartStore.total,
@@ -327,7 +335,7 @@ const ZonosCheckoutPayment = class {
 };
 ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
 
-const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--address.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info+.zonos--address.sc-zonos-customer-info{margin-bottom:0}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:100%}";
+const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--address.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info{margin-bottom:var(--amino-space-16)}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info+.zonos--address.sc-zonos-customer-info{margin-bottom:0}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:-5px;padding-top:var(--amino-space-8);margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:100%}";
 const ZonosCustomerInfoStyle0 = zonosCustomerInfoCss;
 
 const ZonosCustomerInfo = class {
@@ -367,11 +375,11 @@ const ZonosCustomerInfo = class {
                 !((_c = cart.stripeStore.stripeAddressEventData) === null || _c === void 0 ? void 0 : _c.complete) ||
                 !((_d = cart.stripeStore.stripeLinkEventData) === null || _d === void 0 ? void 0 : _d.complete);
         const showBilling = !cart.stripeStore.stripeShippingSameAsBilling;
-        return (index.h(index.Host, { class: "zonos--customer-info zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Customer information')), index.h("zonos-link-authentication", { titleText: localization.translate('Contact') }), index.h("zonos-address", { defaultAddress: this.defaultAddress, titleText: localization.translate('Address'), type: "shipping" }), index.h("zonos-checkbox", { isChecked: cart.stripeStore.stripeShippingSameAsBilling, label: localization.translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        return (index.h(index.Host, { class: "zonos--customer-info zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Customer information')), index.h("zonos-link-authentication", { titleText: cart.translate('Contact') }), index.h("zonos-address", { defaultAddress: this.defaultAddress, titleText: cart.translate('Address'), type: "shipping" }), index.h("zonos-checkbox", { isChecked: cart.stripeStore.stripeShippingSameAsBilling, label: cart.translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 cart.stripeStore.stripeShippingSameAsBilling = e.detail;
-            } }), index.h("zonos-collapse", { collapsed: !showBilling }, index.h("zonos-address", { defaultAddress: this.defaultAddress, titleText: localization.translate('Billing address'), type: "billing" })), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            } }), index.h("zonos-collapse", { collapsed: !showBilling }, index.h("zonos-address", { defaultAddress: this.defaultAddress, titleText: cart.translate('Billing address'), type: "billing" })), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
-            variant: this.submitBtnType }, localization.translate('Continue to shipping'))))));
+            variant: this.submitBtnType }, cart.translate('Continue to shipping'))))));
     }
     static get watchers() { return {
         "disabled": ["watchFormComplete"]
@@ -489,7 +497,7 @@ const ZonosReview = class {
         return (index.h(index.Host, { class: classes.classes([
                 'zonos--review zonos--elements',
                 this.isMobile && 'mobile',
-            ]) }, index.h("div", { class: "zonos--title" }, index.h("zonos-text", { textColor: titleTextColor, type: titleTextType }, localization.translate('Pay'), " ", zonosStore.zonosStore.organizationName), renderCollapseIcon()), index.h("div", { class: "zonos--total-pay" }, index.h("zonos-text", { type: totalTextType }, formatCurrency({
+            ]) }, index.h("div", { class: "zonos--title" }, index.h("zonos-text", { textColor: titleTextColor, type: titleTextType }, cart.translate('Pay'), " ", zonosStore.zonosStore.organizationName), renderCollapseIcon()), index.h("div", { class: "zonos--total-pay" }, index.h("zonos-text", { type: totalTextType }, formatCurrency({
             amount: 
             // show total without taxes when step is shipping, show total with taxes when step is payment
             cart.cartStore.step === 'shipping'
@@ -550,10 +558,10 @@ const ZonosShipping = class {
             var _a, _b;
             const { expectedDate, maxTransit, minTransit } = cart.cartStoreGetShippingTransitInfo(item);
             const sublabel = expectedDate
-                ? `${localization.translate('Expected delivery')} ${expectedDate}`
+                ? `${cart.translate('Expected delivery')} ${expectedDate}`
                 : '';
             const caption = minTransit && maxTransit
-                ? `(${minTransit}-${maxTransit} ${localization.translate('business days')})`
+                ? `(${minTransit}-${maxTransit} ${cart.translate('business days')})`
                 : '';
             const shippingAmount = ((_b = (_a = cart.cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; })) === null || _b === void 0 ? void 0 : _b.subtotals.shipping) || 0;
             return {
@@ -567,9 +575,9 @@ const ZonosShipping = class {
                 value: item.id,
             };
         });
-        return (index.h(index.Host, { class: "zonos--shipping zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Shipping information')), index.h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, localization.translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (index.h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (index.h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) })), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        return (index.h(index.Host, { class: "zonos--shipping zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Shipping information')), index.h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (index.h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (index.h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) })), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
-            variant: this.submitBtnType }, localization.translate('Go to payment'))))));
+            variant: this.submitBtnType }, cart.translate('Go to payment'))))));
     }
     static get watchers() { return {
         "disabled": ["watchFormComplete"]

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

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-72767498.js');
-const cart = require('./cart-b8bbf22d.js');
-const localization = require('./localization-2c9f5765.js');
-const zonosStore = require('./zonosStore-5d94dabb.js');
+const cart = require('./cart-ecc80eb0.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-b252096d.js');
-const isDarkColor = require('./isDarkColor-168002d6.js');
-const submitGtag = require('./submitGtag-792fe45d.js');
+const getBorderRadius = require('./getBorderRadius-834c321d.js');
+const isDarkColor = require('./isDarkColor-924e6a7a.js');
+const submitGtag = require('./submitGtag-907e71d3.js');
 
 const LeftArrow = `<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M9.707 16.707a1 1 0 0 1-1.414 0l-3.647-3.646a1.5 1.5 0 0 1 0-2.122l3.647-3.646a1 1 0 0 1 1.414 1.414L7.414 11H19a1 1 0 1 1 0 2H7.414l2.293 2.293a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
@@ -39,13 +38,13 @@ const ZonosCheckout = class {
             });
         };
         this.isShippableCountry = (showLog = true) => {
-            if (!localization.localizationStore.localizationLoaded) {
+            if (!cart.localizationStore.localizationLoaded) {
                 return false;
             }
             // if localization is loaded and the localization is not a shippable country, keep the original click event
-            if (!localization.localizationStore.isShippableCountry) {
+            if (!cart.localizationStore.isShippableCountry) {
                 if (showLog) {
-                    localization.log(`Checkout: not shippable country`);
+                    cart.log(`Checkout: not shippable country`);
                 }
                 return false;
             }
@@ -100,14 +99,14 @@ const ZonosCheckout = class {
     }
     async buildCartAndInit() {
         if (zonosStore.zonosStore.checkoutSettings.buildCartDetail) {
-            localization.log('build cart detail');
+            cart.log('build cart detail');
             const cartItems = await zonosStore.zonosStore.checkoutSettings.buildCartDetail();
             await cart.cartStoreUpdateItems(cartItems);
         }
         // if client secret doesn't exist, request a new one.
         if (!cart.stripeStore.clientSecret) {
             const success = await cart.stripeStoreInitCheckoutSession();
-            localization.log(`stripeStoreInitCheckoutSession: ${success}`);
+            cart.log(`stripeStoreInitCheckoutSession: ${success}`);
             if (!success) {
                 return false;
             }
@@ -137,7 +136,7 @@ const ZonosCheckout = class {
                 }
                 e.preventDefault();
                 e.stopPropagation();
-                localization.log('zonos checkout button clicked');
+                cart.log('zonos checkout button clicked');
                 // start loading
                 cart.stripeStore.isFetchingSession = true;
                 this.open = true;
@@ -154,9 +153,9 @@ const ZonosCheckout = class {
                     cart.stripeStore.isFetchingSession = false;
                     cart.cartStoreUpdateToErrorState({
                         messages: [
-                            localization.translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),
+                            cart.translate("There's been an error creating your checkout session. Please reload and try again or contact support if the error persists"),
                         ],
-                        title: localization.translate('Error creating Checkout'),
+                        title: cart.translate('Error creating Checkout'),
                     });
                 }
             });
@@ -211,14 +210,14 @@ const ZonosCheckout = class {
             cart.stripeStore.stripe = window.Zonos.stripe;
             this.stripe = window.Zonos.stripe;
             if (!this.stripe) {
-                localization.log('waiting for stripe to be loaded');
+                cart.log('waiting for stripe to be loaded');
                 return;
             }
             if (this.storybookPaymentStatusOverride) {
                 clearInterval(interval);
                 return;
             }
-            localization.log('init checkout');
+            cart.log('init checkout');
             if (this.preview || this.forceDialogOpen) {
                 void this.buildCartAndInit();
             }
@@ -318,18 +317,18 @@ const ZonosCheckout = class {
         this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
         // apply theme to stripe elements
         void this.applyStripeTheme();
-        localization.log(`mobile: ${this.isMobile}`);
+        cart.log(`mobile: ${this.isMobile}`);
     }
     handleMobileChange() {
         this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
         // apply theme to stripe elements
         void this.applyStripeTheme();
-        localization.log(`mobile: ${this.isMobile}`);
+        cart.log(`mobile: ${this.isMobile}`);
     }
     componentWillLoad() {
         void this.init();
         this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
-        localization.log(`mobile: ${this.isMobile}`);
+        cart.log(`mobile: ${this.isMobile}`);
     }
     // do clean up when component is unmounted
     disconnectedCallback() {
@@ -356,12 +355,12 @@ const ZonosCheckout = class {
             : themePrimaryColorBased;
         // only use submit button color if it's on desktop
         const submitButtonColor = !this.isMobile ? colorSecondary : undefined;
-        const { customMessages } = localization.localizationStore;
+        const { customMessages } = cart.localizationStore;
         const defaultMessage = (_a = customMessages.find(x => x.pageName === 'checkout_default')) === null || _a === void 0 ? void 0 : _a.message;
         const localePageEnum = this.getCurrentLocalePageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === localePageEnum);
         const renderLogo = () => (index.h("div", { class: "zonos--logo" }, logoUrl && (index.h("img", { alt: `${zonosStore.zonosStore.organizationName} logo`, src: logoUrl, width: 100 }))));
-        const renderTopHeader = () => (index.h("zonos-v-stack", null, renderLogo(), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), index.h("div", null, index.h("zonos-button", { class: "zonos--back-button", icon: index.h("zonos-icon", { "aria-label": "Back to previous step", content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, localization.translate('Back')))));
+        const renderTopHeader = () => (index.h("zonos-v-stack", null, renderLogo(), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), index.h("div", null, index.h("zonos-button", { class: "zonos--back-button", icon: index.h("zonos-icon", { "aria-label": "Back to previous step", content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, cart.translate('Back')))));
         const renderContent = () => {
             return (index.h("div", { class: 'zonos--content', style: {
                     '--border-radius': getBorderRadius.getBorderRadius(style),