@zonos/elements 1.3.39 → 1.3.41

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

@@ -2,15 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b071017b.js');
-const cart = require('./cart-c7212410.js');
-const zonosStore = require('./zonosStore-4c6c85da.js');
-const submitGtag = require('./submitGtag-7a679d92.js');
+const index = require('./index-d56e0a8b.js');
+const cart = require('./cart-497bb434.js');
+const paypal = require('./paypal-e65a287a.js');
+const zonosStore = require('./zonosStore-56401fdb.js');
+const sendErrorLog = require('./sendErrorLog-c3c315a9.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const logError = require('./logError-4e2f2020.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-074b46ef.js');
-const isDarkColor = require('./isDarkColor-371a3b1a.js');
+const getBorderRadius = require('./getBorderRadius-4413e191.js');
+const isDarkColor = require('./isDarkColor-4eb96a1e.js');
 const RemoveIcon = require('./RemoveIcon-081ac073.js');
 
 /**
@@ -168,7 +169,7 @@ const isShippableCountry = (showLog = true) => {
     }
     // if localization is loaded and the localization is not a shippable country, keep the original click event
     if (!cart.localizationStore.isShippableCountry) {
-        document.dispatchEvent(submitGtag.createCustomEvent('legacyCheckoutError', 'Unable to initiate checkout process in a country where shipping is not available'));
+        document.dispatchEvent(sendErrorLog.createCustomEvent('legacyCheckoutError', 'Unable to initiate checkout process in a country where shipping is not available'));
         if (showLog) {
             logError.log(`Checkout: not shippable country`);
         }
@@ -246,7 +247,7 @@ const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShi
             };
             if (Object.values(shippingAddress).some(value => value === undefined || value === null)) {
                 logError.logError('One or more shipping address field is missing', Object.entries(shippingAddress));
-                void submitGtag.sendErrorLog({
+                void sendErrorLog.sendErrorLog({
                     endpoint: 'No endpoint, domestic checkout form missing fields',
                     errors: [
                         'Bigcommerce: One or more shipping address field is missing in the domestic checkout form',
@@ -288,7 +289,7 @@ const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
 </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(--zonos-elements-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(--zonos-elements-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:32px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--zonos-elements-gray-0));border-right:1px solid var(--zonos-elements-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--zonos-elements-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(--zonos-elements-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;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;position:relative}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 8px 8px}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:24px}.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:24px;top:24px;z-index:2}.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-wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;gap:16px;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--logo-wrapper.sc-zonos-checkout>*.sc-zonos-checkout{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.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:76px;margin-bottom:8px}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--zonos-elements-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:32px}.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:12px;padding-bottom:76px}@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: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:16px}.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(--zonos-elements-border);border-radius:var(--border-radius, var(--zonos-elements-radius-10));background-color:var(--zonos-elements-gray-50);padding:12px;margin-top:32px}.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:8px}.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 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{-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--zonos-elements-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(--zonos-elements-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:32px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--zonos-elements-gray-0));border-right:1px solid var(--zonos-elements-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--zonos-elements-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(--zonos-elements-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;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;position:relative}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 8px 8px}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:24px}.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:24px;top:24px;z-index:2}.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-wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;gap:16px;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--logo-wrapper.sc-zonos-checkout>*.sc-zonos-checkout{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.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:76px;margin-bottom:8px}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--zonos-elements-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:32px}.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:12px;padding-bottom:76px}@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: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:16px}.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(--zonos-elements-border);border-radius:var(--border-radius, var(--zonos-elements-radius-10));background-color:var(--zonos-elements-gray-50);padding:12px;margin-top:32px}.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:8px}.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;
 
 // 90 minutes
@@ -331,7 +332,6 @@ const ZonosCheckout = class {
         this.open = this.forceDialogOpen;
         this.stripe = window.Zonos.stripe;
         this.submitLoading = false;
-        this.paymentError = false;
         this.collapseReviewMobile = true;
         this.isAttachError = false;
         this.isMobile = false;
@@ -341,8 +341,6 @@ const ZonosCheckout = class {
         this.legacyCheckoutHiddenBtnSelector = '#legacy-checkout-hidden-button';
         this.isLegacyCheckout = false;
         this.confirmDialogOpen = false;
-        this.showSessionTimoutScreen = false;
-        this.checkoutTimeoutInterval = null;
         this.inventoryCheckErrorMessage = null;
     }
     /**
@@ -373,7 +371,7 @@ const ZonosCheckout = class {
         }
         // Close the confirm dialog
         this.confirmDialogOpen = false;
-        submitGtag.submitGtag('zonos-checkout-close');
+        paypal.submitGtag('zonos-checkout-close');
         this.open = this.forceDialogOpen || false;
         if (!this.preview && cart.cartStore.step === 'finish') {
             // reset cart store if it's not preview mode and only when checkout is in the finish step.
@@ -384,7 +382,7 @@ const ZonosCheckout = class {
         // reset the tab item, so that user needs to click on Continue button to re-quote the landed cost if needed.
         cart.cartStoreResetTabItems();
         // clear the checkout session timeout timer when checkout dialog close action is triggered
-        this.clearCheckoutTimeoutInterval();
+        cart.cartStoreClearCheckoutInterval();
         /**
          * Trigger callback when the checkout is closed
          */
@@ -417,30 +415,6 @@ const ZonosCheckout = class {
         await this.applyStripeTheme();
         return true;
     }
-    clearCheckoutTimeoutInterval() {
-        if (this.checkoutTimeoutInterval) {
-            clearTimeout(this.checkoutTimeoutInterval);
-            this.checkoutTimeoutInterval = null;
-        }
-    }
-    startCheckoutTimeoutInterval() {
-        // do nothing if in preview mode
-        if (this.preview) {
-            return;
-        }
-        const timeoutQuery = new URLSearchParams(window.location.search).get('zonosCheckoutTimeout');
-        const timeout = 
-        // timeout query is mainly for testing purpose
-        timeoutQuery && !isNaN(parseInt(timeoutQuery, 10))
-            ? parseInt(timeoutQuery, 10)
-            : CHECKOUT_SESSION_TIMEOUT;
-        logError.log(`==START CHECKOUT TIMEOUT - ${timeout}==`);
-        // start a timer to validate the price
-        this.checkoutTimeoutInterval = setTimeout(() => {
-            // Show session timeout alert
-            this.showSessionTimoutScreen = true;
-        }, timeout);
-    }
     reloadCheckoutSession() {
         window.location.reload();
     }
@@ -481,9 +455,12 @@ const ZonosCheckout = class {
                         throw new Error('Error building cart');
                     }
                     // start the timer to validate the price
-                    this.startCheckoutTimeoutInterval();
-                    submitGtag.submitGtag('zonos-checkout-start');
-                    void submitGtag.trackConversionEvent('checkout_open');
+                    cart.cartStoreStartCheckoutInterval({
+                        isPreview: this.preview,
+                        sessionTimeout: CHECKOUT_SESSION_TIMEOUT,
+                    });
+                    paypal.submitGtag('zonos-checkout-start');
+                    void sendErrorLog.trackConversionEvent('checkout_open');
                 }
                 catch (err) {
                     // stop loading
@@ -506,7 +483,7 @@ const ZonosCheckout = class {
             button.setAttribute('data-zonos-checkout-attached', 'true');
             // if this button is the hidden button, trigger the click event
             if (button.matches(this.domesticRedirectedBtnSelector)) {
-                button.dispatchEvent(submitGtag.createCustomEvent('click'));
+                button.dispatchEvent(sendErrorLog.createCustomEvent('click'));
                 // cleanup shipping session after button is clicked
                 cart.stripeStoreCleanupDomesticShippingSession();
                 // remove the button after it's clicked
@@ -515,7 +492,7 @@ const ZonosCheckout = class {
             if (button.matches(this.legacyCheckoutHiddenBtnSelector)) {
                 this.isLegacyCheckout = true;
                 // trigger the click event on the button
-                button.dispatchEvent(submitGtag.createCustomEvent('click'));
+                button.dispatchEvent(sendErrorLog.createCustomEvent('click'));
                 button.remove();
             }
         });
@@ -648,6 +625,10 @@ const ZonosCheckout = class {
         const interval = setInterval(() => {
             if (cart.cartStore.landedCostData || !cart.stripeStore.isFetchingLandedCost) {
                 if (cart.cartStore.landedCostData) {
+                    // start init paypal with the presentment currency when landed cost is fetched
+                    void paypal.paypalInitScript({
+                        currency: cart.cartStore.currency,
+                    });
                     // only go to next step if landed cost data is ready
                     cart.cartStoreNextStep();
                 }
@@ -666,41 +647,31 @@ const ZonosCheckout = class {
     }
     handleInventoryCheckDialogCancel() {
         // reset inventory check message to close the inventory check alert
-        this.inventoryCheckErrorMessage = null;
+        cart.cartStore.inventoryCheckErrorMessage = null;
     }
     handleInventoryCheckDialogConfirm() {
         // reset inventory check message to close the inventory check alert
-        this.inventoryCheckErrorMessage = null;
+        cart.cartStore.inventoryCheckErrorMessage = null;
         // close the dialog
         void this.closeDialogHandler({ confirmed: true });
     }
-    /**
-     * Handle inventory check and returns error message if the callback provided.
-     */
-    async handleInventoryCheck() {
-        const { onInventoryCheck } = zonosStore.zonosStore.checkoutSettings;
-        if (typeof onInventoryCheck !== 'function') {
-            return null;
-        }
-        const message = await onInventoryCheck({ items: cart.cartStore.items });
-        return message;
-    }
-    async handleCheckoutPaymentContinue() {
+    async handleStripePaymentContinue() {
         // reset error state
-        this.paymentError = false;
+        cart.stripeStore.hasPaymentError = false;
         this.submitLoading = true;
         // reset inventory check message
-        this.inventoryCheckErrorMessage = null;
+        cart.cartStore.inventoryCheckErrorMessage = null;
         try {
             // check inventory before proceeding to payment
-            this.inventoryCheckErrorMessage = await this.handleInventoryCheck();
+            cart.cartStore.inventoryCheckErrorMessage =
+                await cart.stripeStoreHandleInventoryCheck();
         }
         catch (err) {
             // If user provide callback and it throw an exception, default to this message and stop the payment.
-            this.inventoryCheckErrorMessage = cart.translate('Unable to check inventory. Please try again.');
+            cart.cartStore.inventoryCheckErrorMessage = cart.translate('Unable to check inventory. Please try again.');
         }
         // Don't proceed to payment if there's an error message
-        if (this.inventoryCheckErrorMessage) {
+        if (cart.cartStore.inventoryCheckErrorMessage) {
             // stop the submit loading state
             this.submitLoading = false;
             return;
@@ -709,11 +680,11 @@ const ZonosCheckout = class {
             await cart.stripeStoreConfirmPayment();
             cart.cartStoreNextStep();
             // clear the checkout session timeout timer when purchase is complete
-            this.clearCheckoutTimeoutInterval();
+            cart.cartStoreClearCheckoutInterval();
         }
         catch (err) {
             logError.logError(err);
-            this.paymentError = true;
+            cart.stripeStore.hasPaymentError = true;
         }
         this.submitLoading = false;
     }
@@ -737,7 +708,7 @@ const ZonosCheckout = class {
         const url = window.location.href;
         // Remove query parameters
         const cleanUrl = url.split('?')[0];
-        const isTestMode = submitGtag.getIsTestMode();
+        const isTestMode = sendErrorLog.getIsTestMode();
         this.open = false;
         // Update the URL without query parameters only if it's not in test mode
         /**
@@ -822,21 +793,23 @@ const ZonosCheckout = class {
                 : logoUrl;
             return (index.h("div", { class: "zonos--logo" }, logo && (index.h("img", { alt: `${zonosStore.zonosStore.organizationName} logo`, src: logo, width: 100 }))));
         };
-        const isTestMode = submitGtag.getIsTestMode();
+        const isTestMode = sendErrorLog.getIsTestMode();
         const renderTopHeader = () => {
             return (index.h("zonos-v-stack", null, index.h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (index.h("zonos-badge", { badgeColor: "orange", size: "small" }, cart.translate('Test mode')))), index.h("zonos-checkout-progress-tabs", { backgroundColor: 
                 // only use different contrast color when the secondary color is too off with the background in mobile
                 this.isMobile ? '--zonos-elements-gray-0' : null }), filteredMessages.map(x => (index.h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
         };
         const renderContent = () => {
-            if (this.showSessionTimoutScreen) {
+            if (cart.cartStore.checkoutSessionTimeoutShow) {
                 return (index.h("zonos-rest-state", { class: "zonos--session-timeout", restStateSubtitle: cart.translate('Your checkout session has expired. Please reload the page to continue.'), restStateTitle: cart.translate('Session timed out'), restStateType: 'Warning' }, index.h("zonos-button", { onClick: () => this.reloadCheckoutSession(), variant: "primary" }, cart.translate('Reload'))));
             }
             return (index.h("div", { class: 'zonos--content', style: {
                     '--border-radius': getBorderRadius.getBorderRadius({ overrideBorderStyle: 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, isMobile: this.isMobile, 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.isLegacyCheckout && (index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon.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, isMobile: this.isMobile, 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: async () => {
+                    await this.handleStripePaymentContinue();
+                }, submitBtnColor: submitButtonColor }))), index.h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isLegacyCheckout && (index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon.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;
@@ -865,9 +838,9 @@ const ZonosCheckout = class {
             // Mark user selected confirm to close the dialog
             onConfirmClicked: () => this.closeDialogHandler({ confirmed: true }) }), index.h("zonos-confirm-dialog", { class: "zonos--inventory-check-failure-dialog", dialogConfirmBtnText: cart.translate('Return to cart'), dialogIntent: "danger",
             // Show dialog if inventory check error message is not null
-            dialogOpen: !!this.inventoryCheckErrorMessage,
+            dialogOpen: !!cart.cartStore.inventoryCheckErrorMessage,
             // If diallog is in open state, the message should not be null
-            dialogSubtitle: this.inventoryCheckErrorMessage, dialogTitle: cart.translate("Couldn't place order"), dialogType: "alert", onCancelClicked: () => {
+            dialogSubtitle: cart.cartStore.inventoryCheckErrorMessage, dialogTitle: cart.translate("Couldn't place order"), dialogType: "alert", onCancelClicked: () => {
                 this.handleInventoryCheckDialogCancel();
             },
             // Mark user selected confirm to close the dialog

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b071017b.js');
+const index = require('./index-d56e0a8b.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: '23fbe02ded67e42f94b5c3641aae55970cef052d' }, "Hello, World! I'm ", this.getText());
+        return index.h("div", { key: 'ece01ba1df61d0c15e60d2cf9fffbf4c01268612' }, "Hello, World! I'm ", this.getText());
     }
 };
 ZonosComponent.style = ZonosComponentStyle0;

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

@@ -2,21 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b071017b.js');
-const cart = require('./cart-c7212410.js');
-const zonosStore = require('./zonosStore-4c6c85da.js');
+const index = require('./index-d56e0a8b.js');
+const cart = require('./cart-497bb434.js');
+const zonosStore = require('./zonosStore-56401fdb.js');
 const logError = require('./logError-4e2f2020.js');
-require('./isDarkColor-371a3b1a.js');
-require('./getBorderRadius-074b46ef.js');
+require('./isDarkColor-4eb96a1e.js');
+require('./getBorderRadius-4413e191.js');
 
 const getZonosSettings = async () => {
     const url = `${"https://v1.route.js.zonos.com"}/api/zonos-elements/zonos-settings`;
-    const { errors, json } = await cart.handleFetch(url);
+    const { errors, json, zonosMode } = await cart.handleFetch(url);
     if (errors.length) {
         logError.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: null, zonosMode };
     }
-    return { errors: [], json };
+    return { errors: [], json, zonosMode };
 };
 
 const injectCheckoutElement = () => {
@@ -126,6 +126,7 @@ const ZonosControllerStyle0 = zonosControllerCss;
 const ZonosController = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.paypalInitEvent = index.createEvent(this, "paypalInitEvent", 7);
         this.stripeInitEvent = index.createEvent(this, "stripeInitEvent", 7);
         this.config = undefined;
         this.zonosApiKey = undefined;
@@ -210,22 +211,22 @@ const ZonosController = class {
         // running with scope async function to avoid blocking the main thread
         (async () => {
             var _a, _b;
-            const { errors, json } = await getZonosSettings();
+            const { errors, json, zonosMode } = await getZonosSettings();
             if (((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.type.toString()) === '403') {
                 logError.log('Failed to load zonos settings. This domain may not have access', 'warn');
                 return;
             }
             // init zonos notification
             this.initZonosNotification();
-            const config = Object.assign(Object.assign({}, this.config), {
-                // override subscription status
-                subscriptionStatus: undefined
-            });
+            // override subscription status
+            const config = Object.assign(Object.assign({}, this.config), { checkoutSettings: this.config.checkoutSettings
+                    ? Object.assign(Object.assign({}, this.config.checkoutSettings), { subscriptionStatus: undefined }) : undefined });
             // load default setting if fail to load user setting
             zonosStore.zonosStoreInitSetting({
                 overrideSettings: config,
                 zonosSettings: json,
             });
+            zonosStore.zonosStore.zonosMode = zonosMode;
             // setup google font after store loaded
             void this.setupGoogleFont();
             if (zonosStore.zonosStore.helloSettings) {
@@ -253,7 +254,6 @@ const ZonosController = class {
             this.stripeInitEvent.emit({
                 publishableKey: publishableKey.token,
             });
-            logError.log('zonos controller loaded');
         })();
     }
     /**
@@ -304,7 +304,7 @@ const ZonosController = class {
         zonosStore.zonosStore.organizationName = organizationName;
     }
     render() {
-        return index.h(index.Host, { key: '209a2ea0249b9561b5ca1f84f7d31b1520ef49fe', class: "zonos--elements" });
+        return index.h(index.Host, { key: '8738fa5324977321764af1c89181550d948955a6', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;

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

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b071017b.js');
-const cart = require('./cart-c7212410.js');
-const zonosStore = require('./zonosStore-4c6c85da.js');
+const index = require('./index-d56e0a8b.js');
+const cart = require('./cart-497bb434.js');
+const zonosStore = require('./zonosStore-56401fdb.js');
 const classes = require('./classes-b7918f56.js');
 require('./logError-4e2f2020.js');
-require('./isDarkColor-371a3b1a.js');
-require('./getBorderRadius-074b46ef.js');
+require('./isDarkColor-4eb96a1e.js');
+require('./getBorderRadius-4413e191.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;

package/dist/cjs/{zonos-country-select_3.cjs.entry.js → zonos-country-select_4.cjs.entry.js}

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b071017b.js');
-const cart = require('./cart-c7212410.js');
-const zonosStore = require('./zonosStore-4c6c85da.js');
+const index = require('./index-d56e0a8b.js');
+const cart = require('./cart-497bb434.js');
+const zonosStore = require('./zonosStore-56401fdb.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
-const isDarkColor = require('./isDarkColor-371a3b1a.js');
+const isDarkColor = require('./isDarkColor-4eb96a1e.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./logError-4e2f2020.js');
-require('./getBorderRadius-074b46ef.js');
+require('./getBorderRadius-4413e191.js');
 
 /**
  * Fuse.js v7.0.0 - Lightweight fuzzy-search (http://fusejs.io)
@@ -1794,7 +1794,7 @@ const GreenCheckDuotoneIcon = `<svg width="16" height="16" viewBox="0 0 16 16" f
 </svg>
 `;
 
-const zonosCountrySelectCss = ":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 .zonos--country-select{position:relative;max-height:500px;overflow-y:auto}:host .zonos--country-select .zonos--country-select-header{position:-webkit-sticky;position:sticky;top:0;background:var(--zonos-elements-surface-color);z-index:11}:host .zonos--country-select .zonos--country-select-input{padding:8px;border-radius:var(--zonos-elements-radius-4);border:var(--zonos-elements-border)}:host .zonos--country-select .zonos--country-select-content{padding:16px;padding-top:0px}:host .zonos--country-select .zonos--country-select-country{display:-ms-flexbox;display:flex;gap:16px;padding:8px;-ms-flex-align:center;align-items:center;border-radius:var(--zonos-elements-radius-4);cursor:pointer;width:100%;border:none;background:none}:host .zonos--country-select .zonos--country-select-country:hover{background:var(--zonos-elements-gray-100)}:host .zonos--country-select .zonos--country-select-country .zonos--country-flag{border-radius:var(--zonos-elements-radius-4);width:24px;height:18px;position:relative;overflow:hidden;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);z-index:10;justify-self:center}@media (max-width: 768px){:host .zonos--country-select .zonos--country-select-country .zonos--country-flag{border-radius:var(--zonos-elements-radius-4);width:24px}}";
+const zonosCountrySelectCss = ":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 .zonos--country-select{position:relative;max-height:500px;overflow-y:auto}:host .zonos--country-select .zonos--country-select-header{position:-webkit-sticky;position:sticky;top:0;background:var(--zonos-elements-surface-color);z-index:11}:host .zonos--country-select .zonos--country-select-input{padding:8px;border-radius:var(--zonos-elements-radius-4);border:var(--zonos-elements-border)}:host .zonos--country-select .zonos--country-select-content{padding:16px;padding-top:0px}:host .zonos--country-select .zonos--country-select-content .no-country{position:absolute;left:17px}:host .zonos--country-select .zonos--country-select-content .zonos--country-filter-content{height:300px;display:block}:host .zonos--country-select .zonos--country-select-country{display:-ms-flexbox;display:flex;gap:16px;padding:8px;-ms-flex-align:center;align-items:center;border-radius:var(--zonos-elements-radius-4);cursor:pointer;width:100%;border:none;background:none}:host .zonos--country-select .zonos--country-select-country:hover{background:var(--zonos-elements-gray-100)}:host .zonos--country-select .zonos--country-select-country .zonos--country-flag{border-radius:var(--zonos-elements-radius-4);width:24px;height:18px;position:relative;overflow:hidden;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);z-index:10;justify-self:center}@media (max-width: 768px){:host .zonos--country-select .zonos--country-select-country .zonos--country-flag{border-radius:var(--zonos-elements-radius-4);width:24px}}";
 const ZonosCountrySelectStyle0 = zonosCountrySelectCss;
 
 const ZonosCountrySelect = class {
@@ -1810,7 +1810,7 @@ const ZonosCountrySelect = class {
             const input = event.target;
             this.inputValue = input.value;
             // query the country list container
-            const countryListSelector = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-select');
+            const countryListSelector = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-filter-content');
             // scroll to top every time the input changes
             if (countryListSelector) {
                 countryListSelector.scrollTop = 0;
@@ -1822,21 +1822,30 @@ const ZonosCountrySelect = class {
     componentDidRender() {
         var _a, _b;
         // focus the input on render
-        (_b = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-select-input')) === null || _b === void 0 ? void 0 : _b.focus();
+        (_b = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-filter-content')) === null || _b === void 0 ? void 0 : _b.focus();
     }
     render() {
         const { helloCountryList } = cart.localizationStore;
         const countries = helloCountryList ? Object.values(helloCountryList) : [];
         const fuse = new Fuse(countries, {
+            includeScore: true,
             keys: ['displayName'],
+            threshold: 0.3,
         });
         const fuseObject = fuse.search(this.inputValue.toLowerCase());
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (index.h(index.Host, { key: '2337dcb4bbca5520cb6a4e9426167916c548ef59', class: "zonos--elements", style: {
+        const isEmpty = !filteredCountries.length;
+        return (index.h(index.Host, { key: '1e17d188428f8caeb495389f7870c3052d3cfb4a', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '7cb0f80536b6e89f23be24cc4860e84bfa7ab362', class: "zonos--country-select" }, index.h("zonos-v-stack", { key: 'fef186dbafd5e4d16e6f1486d3122c1297ef7f2d', class: "zonos--country-select-header", spacing: 8 }, index.h("zonos-select-dialog-header", { key: '19ad548f3ab7aa6afdeaacd48d8b7c5821ba13e1', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, index.h("input", { key: 'f7367680dbde6fb432dc778aed5a94291d1226c4', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), index.h("div", { key: 'e0765ab18a86a913edd7eec82452c0a9e5291f86', class: "zonos--country-select-content" }, filteredCountries.map(country => (index.h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), index.h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === cart.localizationStore.selectedCountryCode && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, index.h("div", { key: '2f6d0f239a4fad7c48349878b53dc8cb426aa022', class: "zonos--country-select" }, index.h("zonos-v-stack", { key: '76ad667603fce800457dae6d8951abe97e5db9d8', class: "zonos--country-select-header", spacing: 8 }, index.h("zonos-select-dialog-header", { key: '091416c3c6b91d3b50dd033d8bca0df79841871b', handleOnClose: () => this.handleOnClose(), label: cart.translate('Select a country') }, index.h("input", { key: '0c5d12e941bf7824594ebdd4b353ba833b6d9418', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: cart.translate('Search countries'), value: this.inputValue }))), index.h("div", { key: '9ff13fd2b3528ddff2bd379baa0b2ec919a6f928', class: "zonos--country-select-content" }, isEmpty && (index.h("zonos-text", { key: '9cf46a7a706d335930eeedcc3663571c5dbaaafc', class: "no-country", textColor: "gray-800" }, cart.translate('No countries found'))), index.h("zonos-virtual-scroll", { key: '297237f0e2179ea95a49ae4872f6cc216026dd47', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index$1 => {
+                const country = filteredCountries[index$1];
+                if (!country) {
+                    return null;
+                }
+                return (index.h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, index.h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), index.h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === cart.localizationStore.selectedCountryCode && (index.h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 }))));
+            } })))));
     }
     get ele() { return index.getElement(this); }
 };
@@ -1853,9 +1862,9 @@ const ZonosCustomMessage = class {
     }
     render() {
         const messageWithLinks = formatStringWithLinks.formatStringWithLinks(this.message);
-        return (index.h(index.Host, { key: '37b59a5aad442e9c20b8ed03672c73c315b45538', class: "zonos--elements", style: {
+        return (index.h(index.Host, { key: 'd6d31b58cf5396c136d81a5969b418c79229c930', class: "zonos--elements", style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, this.message && (index.h("zonos-card", { key: '5de7e44deb7c0544789a9d2b306fc8b2cad338b8', class: "zonos--custom-message", spacing: "12px" }, index.h("div", { key: 'c911e94eb1d7cbaf1db2126d14a6eeed8932ff97', class: "zonos--flex-message" }, index.h("zonos-icon", { key: '35c7f483046b78e9dffe87370d6b2f9435bc0ec1', "aria-label": "Custom message icon", content: this.icon }), index.h("zonos-text", { key: 'fdbc136b2a01fd5df35a3b01aa82bb9d088083e0', innerHTML: messageWithLinks }))))));
+            } }, this.message && (index.h("zonos-card", { key: '4c62131117e23bbe475fb6f59a5e9bba8bc7d552', class: "zonos--custom-message", spacing: "12px" }, index.h("div", { key: '7ec3cbde2204fe0fa3b52844109bf0379677d567', class: "zonos--flex-message" }, index.h("zonos-icon", { key: 'cad94039767bd3d93fe9995aee34e8eb42fb707c', "aria-label": "Custom message icon", content: this.icon }), index.h("zonos-text", { key: 'f5bd77fafded83fefd99c45f0a78cf5c72459e47', innerHTML: messageWithLinks }))))));
     }
 };
 ZonosCustomMessage.style = ZonosCustomMessageStyle0;
@@ -1888,14 +1897,91 @@ const ZonosHelloDialogFooter = class {
         const language = (_b = ILanguage.languages.find(x => x.code === cart.localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
         // Only use gray-0 (white) when the background color is dark (apply inverted color if the element is using dark theme variable)
         const mainColor = primaryColor && isDarkColor.isDarkColor(primaryColor) ? 'white' : 'black';
-        return (index.h(index.Host, { key: '49ed5ba840bd0d1e813b8eb4b89d0508930928a2', class: "zonos--elements" }, index.h("div", { key: 'ae66c6a3e8c824189b4eae2208c873943f8687ca', class: "zonos--hello-dialog-footer", style: {
+        return (index.h(index.Host, { key: 'a9b52a67a2db1967fe6fde4f19dc8d2785469f8a', class: "zonos--elements" }, index.h("div", { key: '1b36f45f0f00fe2b6494fb04373b12b4848b9484', class: "zonos--hello-dialog-footer", style: {
                 '--primary-color': primaryColor,
-            } }, index.h("a", { key: '61226c77fe20c817efd58e12c5d5c16dad6375ac', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: '7dc60e603c7f64fc42359632190249caf0a18317', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), index.h("div", { key: 'a6875d4c4dcf5804570d47409567f87728b8c8b5', class: "zonos--hello-locale-wrapper" }, index.h("zonos-button", { key: '51083ce07a51f62469afce508c79a7ebbf4eeacf', buttonColor: mainColor, icon: index.h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), index.h("zonos-button", { key: '46b826f2fc8f819507db9d432da459124b65cee8', buttonColor: mainColor, icon: index.h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: cart.localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, cart.localizationStore.selectedCountryCode)))));
+            } }, index.h("a", { key: '7ca110d30f9266d021069af41766588ffce3d2ad', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, index.h("zonos-icon", { key: 'f9f4866c18bc75577e5a3961ffdd67f48977fd68', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), index.h("div", { key: '2bacafbd2c2d9c79935b7a2c69ae9fd3e1ede48a', class: "zonos--hello-locale-wrapper" }, index.h("zonos-button", { key: 'a223f6706d319da505e8f013bff6863a433effd3', buttonColor: mainColor, icon: index.h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), index.h("zonos-button", { key: 'aa94f1e06b80f6bec8433c3c8a7b066f0d91df08', buttonColor: mainColor, icon: index.h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: cart.localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, cart.localizationStore.selectedCountryCode)))));
     }
     get ele() { return index.getElement(this); }
 };
 ZonosHelloDialogFooter.style = ZonosHelloDialogFooterStyle0;
 
+const zonosVirtualScrollCss = ".sc-zonos-virtual-scroll-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-virtual-scroll-h *.sc-zonos-virtual-scroll{font-family:var(--font-family, Inter), Inter}.sc-zonos-virtual-scroll-h img.sc-zonos-virtual-scroll{max-width:100%}.sc-zonos-virtual-scroll-h dl.sc-zonos-virtual-scroll,.sc-zonos-virtual-scroll-h dd.sc-zonos-virtual-scroll,.sc-zonos-virtual-scroll-h h1.sc-zonos-virtual-scroll,.sc-zonos-virtual-scroll-h h2.sc-zonos-virtual-scroll,.sc-zonos-virtual-scroll-h h3.sc-zonos-virtual-scroll,.sc-zonos-virtual-scroll-h h4.sc-zonos-virtual-scroll,.sc-zonos-virtual-scroll-h h5.sc-zonos-virtual-scroll,.sc-zonos-virtual-scroll-h h6.sc-zonos-virtual-scroll,.sc-zonos-virtual-scroll-h hr.sc-zonos-virtual-scroll,.sc-zonos-virtual-scroll-h figure.sc-zonos-virtual-scroll,.sc-zonos-virtual-scroll-h p.sc-zonos-virtual-scroll,.sc-zonos-virtual-scroll-h pre.sc-zonos-virtual-scroll{margin:0}.sc-zonos-virtual-scroll-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-virtual-scroll-h{overflow:scroll}.sc-zonos-virtual-scroll-h .scroller.sc-zonos-virtual-scroll{display:inline-block}.sc-zonos-virtual-scroll-h .item-container.sc-zonos-virtual-scroll{position:relative;display:inline-block}.sc-zonos-virtual-scroll-h .item-container.sc-zonos-virtual-scroll .item.sc-zonos-virtual-scroll{position:absolute}";
+const ZonosVirtualScrollStyle0 = zonosVirtualScrollCss;
+
+const ZonosVirtualScroll = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.scrollListener = (_ev) => {
+            this.scrollTop = this.ele.scrollTop;
+        };
+        this.container = undefined;
+        this.renderItem = undefined;
+        this.itemWidth = undefined;
+        this.fallbackItemHeight = undefined;
+        this.itemHeights = undefined;
+        this.scrollTop = 0;
+        this.totalHeight = 1;
+    }
+    updateTotalHeight() {
+        this.totalHeight = this.itemHeights.reduce((acc, height) => acc + (height || this.fallbackItemHeight), 0);
+    }
+    connectedCallback() {
+        this.ele.addEventListener('scroll', this.scrollListener);
+        this.updateTotalHeight();
+    }
+    disconnectedCallback() {
+        this.ele.removeEventListener('scroll', this.scrollListener);
+    }
+    render() {
+        const W = this.ele.clientWidth;
+        const H = this.ele.clientHeight;
+        const heights = this.itemHeights;
+        const fallbackItemHeight = this.fallbackItemHeight;
+        const N = this.itemHeights.length;
+        const scrollTop = this.scrollTop;
+        const children = [];
+        let accHeight = 0;
+        // buffer for pre-rendering for item outside of viewport
+        const buffer = 100;
+        for (let i = 0; i < N; i++) {
+            const itemHeight = heights[i] || fallbackItemHeight;
+            if (scrollTop > accHeight + itemHeight + buffer) {
+                accHeight += itemHeight;
+                continue; // this item is above the viewport
+            }
+            if (scrollTop + H < accHeight - buffer) {
+                break; // this item is below the viewport
+            }
+            const x = 0;
+            const y = accHeight;
+            children.push(index.h("div", { class: "item", style: {
+                    height: `${itemHeight}px`,
+                    transform: `translate(${x}px,${y}px)`,
+                    width: this.itemWidth ? `${this.itemWidth}px` : `${W}px`,
+                } }, this.renderItem(i)));
+            accHeight += itemHeight;
+        }
+        return (index.h(index.Host, { key: '6faa73cacfefee42781f87e6f697980941139d12' }, index.h("div", { key: '5411c13934b8b997f68bc6678e6e1c475d6d453c',
+            // to capture scroll action
+            class: "scroller", style: {
+                height: `${this.totalHeight}px`,
+                width: `${W}px`,
+            } }), index.h("div", { key: '46c402a5a0df3242b9022e16b15d5e348210bc32',
+            // to display items
+            class: "item-container", ref: el => (this.container = el), style: {
+                height: `${this.totalHeight}px`,
+                left: `${-W}px`,
+            } }, children)));
+    }
+    get ele() { return index.getElement(this); }
+    static get watchers() { return {
+        "itemHeights": ["updateTotalHeight"],
+        "fallbackItemHeight": ["updateTotalHeight"]
+    }; }
+};
+ZonosVirtualScroll.style = ZonosVirtualScrollStyle0;
+
 exports.zonos_country_select = ZonosCountrySelect;
 exports.zonos_custom_message = ZonosCustomMessage;
 exports.zonos_hello_dialog_footer = ZonosHelloDialogFooter;
+exports.zonos_virtual_scroll = ZonosVirtualScroll;