@zonos/elements 1.3.5 → 1.3.7-alpha.0

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

@@ -2,15 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3ead02fe.js');
-const cart = require('./cart-c1b0915c.js');
-const localization = require('./localization-d43e1540.js');
-const zonosStore = require('./zonosStore-b88b5671.js');
+const index = require('./index-72767498.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-cd7ef574.js');
-const isDarkColor = require('./isDarkColor-5eda1323.js');
-const submitGtag = require('./submitGtag-bd6e9b42.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>`;
 
@@ -21,7 +20,7 @@ const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
 
 const RemoveIcon = `<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="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" data-is-secondary-color="true" fill="var(--amino-gray-200)" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
-const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-h *.sc-zonos-checkout{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--amino-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:var(--amino-space-48) var(--amino-space-56)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-gray-0);padding-bottom:var(--amino-space-80)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--back-button.sc-zonos-checkout{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:var(--amino-space-24);top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;position:absolute;bottom:var(--amino-space-32);right:var(--amino-space-56);gap:var(--amino-space-8)}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:var(--amino-space-12)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:var(--amino-space-16)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border:var(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:var(--amino-space-12);margin-top:var(--amino-space-32)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--review.sc-zonos-checkout{margin-bottom:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--cart-items.sc-zonos-checkout{margin-top:var(--amino-space-8)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}.mobile.sc-zonos-checkout-h .zonos--footer.sc-zonos-checkout{bottom:0;left:0;padding:var(--amino-space-12);position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-gray-0)}";
+const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-h *.sc-zonos-checkout{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--amino-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:var(--amino-space-48) var(--amino-space-56) var(--amino-space-76)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-gray-0)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--back-button.sc-zonos-checkout{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:var(--amino-space-24);top:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:var(--amino-space-12);padding-bottom:var(--amino-space-76)}@media (max-width: 768px){.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding-bottom:var(--amino-space-0)}}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2;border-right:none}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:var(--amino-space-16)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border:var(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:var(--amino-space-12);margin-top:var(--amino-space-32)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--review.sc-zonos-checkout{margin-bottom:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--cart-items.sc-zonos-checkout{margin-top:var(--amino-space-8)}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout zonos-checkout-footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}";
 const ZonosCheckoutStyle0 = zonosCheckoutCss;
 
 const ZonosCheckout = class {
@@ -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,19 +355,18 @@ 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", { content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, localization.translate('Back')))));
-        const renderFooter = () => hasFooter && (index.h("div", { class: "zonos--footer", "data-theme": rightSideTheme }, index.h("zonos-text", { type: "hintText" }, localization.translate('Powered by')), index.h("zonos-logo", { theme: rightSideTheme, width: "100px" })));
+        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),
                 } }, cart.cartStore.step !== 'finish' && cart.cartStore.step !== 'error' && (index.h(index.Fragment, null, index.h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
                     '--primary-color': !this.isMobile ? colorPrimary : '',
-                } }, !this.isMobile && renderTopHeader(), cart.cartStore.step === 'customer-info' && (index.h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'shipping' && (index.h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'payment' && (index.h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), index.h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isMobile && (index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), index.h("div", { class: "flex--wrapper" }, index.h("div", { class: "zonos--wrapper" }, index.h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
+                } }, !this.isMobile && renderTopHeader(), cart.cartStore.step === 'customer-info' && (index.h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'shipping' && (index.h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cart.cartStore.step === 'payment' && (index.h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), index.h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isMobile && (index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), index.h("div", { class: "flex--wrapper" }, index.h("div", { class: "zonos--wrapper" }, index.h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile
                     if (!this.isMobile) {
                         return;
@@ -377,8 +375,8 @@ const ZonosCheckout = class {
                 } }), index.h("zonos-collapse", {
                 // only collapse on mobile
                 collapsed: this.collapseReviewMobile && this.isMobile
-            }, index.h("zonos-cart-items", null))), index.h("zonos-v-stack", { spacing: 16 }, index.h("zonos-cart-subtotal", null), index.h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))), !this.isMobile && renderFooter()), this.isMobile && renderFooter())), (cart.cartStore.step === 'finish' || cart.cartStore.step === 'error') && (index.h("div", { class: "zonos--done", "data-theme": rightSideTheme }, index.h("div", { class: "zonos--header" }, renderLogo(), index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), index.h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cart.cartStore.step === 'error' && !!cart.cartStore.error
-                    ? Object.assign(Object.assign({}, cart.cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride })))));
+            }, index.h("zonos-cart-items", null))), index.h("zonos-v-stack", { spacing: 16 }, index.h("zonos-cart-subtotal", null), index.h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage })))))), (cart.cartStore.step === 'finish' || cart.cartStore.step === 'error') && (index.h("div", { class: "zonos--done", "data-theme": rightSideTheme }, index.h("div", { class: "zonos--header" }, renderLogo(), index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), index.h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cart.cartStore.step === 'error' && !!cart.cartStore.error
+                    ? Object.assign(Object.assign({}, cart.cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride }))), index.h("zonos-checkout-footer", null)));
         };
         return (index.h(index.Host, { class: classes.classes([
                 'zonos--checkout zonos--elements',

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3ead02fe.js');
+const index = require('./index-72767498.js');
 
 function format(first, middle, last) {
     return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
@@ -22,7 +22,7 @@ const ZonosComponent = class {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return index.h("div", { key: 'a61bec010f8c7a8b9979d4c5ec4a84153b780a7e' }, "Hello, World! I'm ", this.getText());
+        return index.h("div", { key: 'cf376a9b1970bd04cdadf820112c081666c8bef2' }, "Hello, World! I'm ", this.getText());
     }
 };
 ZonosComponent.style = ZonosComponentStyle0;

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

@@ -2,18 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3ead02fe.js');
-const cart = require('./cart-c1b0915c.js');
-const localization = require('./localization-d43e1540.js');
-const zonosStore = require('./zonosStore-b88b5671.js');
-require('./isDarkColor-5eda1323.js');
-require('./getBorderRadius-cd7ef574.js');
+const index = require('./index-72767498.js');
+const cart = require('./cart-ecc80eb0.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
+require('./isDarkColor-924e6a7a.js');
+require('./getBorderRadius-834c321d.js');
 
 const getZonosSettings = async () => {
     const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/zonos-settings`;
-    const { errors, json } = await localization.handleFetch(url);
+    const { errors, json } = await cart.handleFetch(url);
     if (errors.length) {
-        localization.logError(`Error occurred when getting zonos settings. If this is not an unauthorized error, it will use user settings or default settings`);
+        cart.logError(`Error occurred when getting zonos settings. If this is not an unauthorized error, it will use user settings or default settings`);
         return { errors, json: null };
     }
     return { errors: [], json };
@@ -33,8 +32,8 @@ const initCheckout = (config) => {
         return;
     }
     // check if checkout button anchor selector user pass in is valid
-    if (!localization.isValidSelector(config.placeOrderButtonSelector)) {
-        localization.logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
+    if (!cart.isValidSelector(config.placeOrderButtonSelector)) {
+        cart.logError(`Selector checkoutButtonAnchor "${config.placeOrderButtonSelector}" is not a valid selector`);
         return;
     }
     injectCheckoutElement();
@@ -51,12 +50,12 @@ const injectHelloComponent = (triggerAnchorElement) => {
 const initHello = async (helloSettings) => {
     const { anchorElementSelector } = helloSettings;
     // check if checkout button anchor selector user pass in is valid to setup hello
-    if (!anchorElementSelector || !localization.isValidSelector(anchorElementSelector)) {
-        localization.logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
+    if (!anchorElementSelector || !cart.isValidSelector(anchorElementSelector)) {
+        cart.logError(`Selector anchorElementSelector "${helloSettings.anchorElementSelector}" is not a valid selector.`);
         return;
     }
     const triggerElement = document.querySelector(anchorElementSelector);
-    localization.log('Hello init complete');
+    cart.log('Hello init complete');
     injectHelloComponent(triggerElement);
 };
 
@@ -76,12 +75,12 @@ const ZonosController = class {
     async initCheckoutElement(stripe) {
         if (!stripe) {
             // eslint-disable-next-line no-console
-            localization.log('Stripe is not loaded yet - cannot init checkout element', 'warn');
+            cart.log('Stripe is not loaded yet - cannot init checkout element', 'warn');
             return;
         }
         cart.stripeStore.stripe = stripe;
         void initCheckout(zonosStore.zonosStore.checkoutSettings);
-        localization.log('init checkout element');
+        cart.log('init checkout element');
     }
     /**
      * Init zonos notification
@@ -106,13 +105,13 @@ const ZonosController = class {
                 // Do nothing if font is Inter, since we already inject it on start
                 return;
             }
-            localization.log(`[FONT] Just applied Inter , but no need to inject since we already inject Inter on start`, 'warn');
+            cart.log(`[FONT] Just applied Inter , but no need to inject since we already inject Inter on start`, 'warn');
             zonosStore.zonosStore.appearance = Object.assign(Object.assign({}, zonosStore.zonosStore.appearance), { fontFamily: overrideFont });
         }
         const routeUrl = "https://v1.route.js.zonos.com";
-        const { errors, json } = await localization.handleFetch(`${routeUrl}/api/zonos-elements/get-font-detail?family=${fontSelected}`);
+        const { errors, json } = await cart.handleFetch(`${routeUrl}/api/zonos-elements/get-font-detail?family=${fontSelected}`);
         if (errors.length > 0 || !json) {
-            localization.log(`Failed to load font ${fontSelected}`, 'warn');
+            cart.log(`Failed to load font ${fontSelected}`, 'warn');
             return;
         }
         const fontUrl = json.fontUrl;
@@ -121,7 +120,7 @@ const ZonosController = class {
             return;
         }
         // apply override font
-        localization.log(`[FONT] ${overrideFont} font override applied`);
+        cart.log(`[FONT] ${overrideFont} font override applied`);
         zonosStore.zonosStore.appearance = Object.assign(Object.assign({}, zonosStore.zonosStore.appearance), { fontFamily: overrideFont });
     }
     async componentWillLoad() {
@@ -131,7 +130,7 @@ const ZonosController = class {
             var _a, _b;
             const { errors, json } = await getZonosSettings();
             if (((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type.toString()) === '403') {
-                localization.log('Failed to load zonos settings. This domain may not have access', 'warn');
+                cart.log('Failed to load zonos settings. This domain may not have access', 'warn');
                 return;
             }
             // init zonos notification
@@ -147,28 +146,28 @@ const ZonosController = class {
                 void initHello(zonosStore.zonosStore.helloSettings);
             }
             // init localization store
-            await localization.initLocalizationStore();
+            await cart.initLocalizationStore();
             // checkout init
             const publishableKey = ((_b = json === null || json === void 0 ? void 0 : json.checkoutSettings) === null || _b === void 0 ? void 0 : _b.externalServiceTokens.find(item => item.type === 'STRIPE_PUBLISHABLE_TOKEN')) || null;
             if (!publishableKey || !this.stripeInitEvent) {
-                localization.log('Checkout failed to load -- missing publishable key', 'warn');
+                cart.log('Checkout failed to load -- missing publishable key', 'warn');
                 return;
             }
             if (zonosStore.zonosStore.checkoutSettings.subscriptionStatus === 'INACTIVE') {
-                localization.log('=== Checkout subscription is "INACTIVE" - Cancel initializing for Checkout ===', 'warn');
-                localization.log('zonos controller loaded');
+                cart.log('=== Checkout subscription is "INACTIVE" - Cancel initializing for Checkout ===', 'warn');
+                cart.log('zonos controller loaded');
                 return;
             }
             if (zonosStore.zonosStore.checkoutSettings.visibilityStatus === 'DISABLED') {
-                localization.log('=== Checkout is disabled by store owner ===', 'warn');
-                localization.log('zonos controller loaded');
+                cart.log('=== Checkout is disabled by store owner ===', 'warn');
+                cart.log('zonos controller loaded');
                 return;
             }
             // send publishable key out to load stripe
             this.stripeInitEvent.emit({
                 publishableKey: publishableKey.token,
             });
-            localization.log('zonos controller loaded');
+            cart.log('zonos controller loaded');
         })();
     }
     /**
@@ -177,7 +176,7 @@ const ZonosController = class {
     async showNotification(notification) {
         const notificationElement = document.querySelector('zonos-notification');
         if (!notificationElement) {
-            localization.log('Failed to show notification - zonos-notification not found', 'warn');
+            cart.log('Failed to show notification - zonos-notification not found', 'warn');
             return;
         }
         void notificationElement.showNotification(notification);
@@ -196,7 +195,7 @@ const ZonosController = class {
      * Override country code for storybook
      */
     async overrideCountry(countryCode) {
-        void localization.localizationStoreUpdateSelectedCountryCode(countryCode);
+        void cart.localizationStoreUpdateSelectedCountryCode(countryCode);
     }
     /**
      * Get appearance from setting
@@ -211,7 +210,7 @@ const ZonosController = class {
         zonosStore.zonosStore.organizationName = organizationName;
     }
     render() {
-        return index.h(index.Host, { key: 'ff6eb2466864a217c485484d381e6f2531631e49', class: "zonos--elements" });
+        return index.h(index.Host, { key: '5650218b8eef4246ff1b131fcd1a06319800c2e3', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;

package/dist/cjs/zonos-country-flag.cjs.entry.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72767498.js');
+const cart = require('./cart-ecc80eb0.js');
+const zonosStore = require('./zonosStore-49d4c92a.js');
+const classes = require('./classes-b7918f56.js');
+require('./isDarkColor-924e6a7a.js');
+require('./getBorderRadius-834c321d.js');
+
+const zonosCountryFlagCss = ":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 .flag-container{position:relative;overflow:hidden;width:100%;height:100%}:host .flag-icon{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}";
+const ZonosCountryFlagStyle0 = zonosCountryFlagCss;
+
+const FLAG_URL = "https://zonos-store-assets.s3.amazonaws.com/images/elements-flags";
+const ZonosCountryFlag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.countryCode = cart.localizationStore.selectedCountryCode;
+        this.size = undefined;
+    }
+    render() {
+        if (!this.el.shadowRoot || !this.countryCode) {
+            return null;
+        }
+        const flagUrl = `${FLAG_URL}/${this.countryCode}.svg`;
+        const font = zonosStore.zonosStoreFontFamily();
+        return (index.h(index.Host, { class: "zonos--elements", style: this.size
+                ? {
+                    '--font-family': font,
+                    height: `${this.size}px`,
+                    width: `${this.size}px`,
+                }
+                : {
+                    '--font-family': font,
+                } }, index.h("div", { class: classes.classes([`flag-container`]) }, index.h("div", { class: "flag-icon", style: { backgroundImage: `url(${flagUrl})` } }))));
+    }
+    get el() { return index.getElement(this); }
+};
+ZonosCountryFlag.style = ZonosCountryFlagStyle0;
+
+exports.zonos_country_flag = ZonosCountryFlag;