@zonos/elements 1.3.142 → 1.3.144

package/dist/esm/zonos-cart-items_13.entry.js

@@ -1,16 +1,17 @@
-import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-986b5ff2.js';
-import { e as cartStore, J as currencyFormat, q as translate, K as cartStoreHasOneEligibleItem, L as stripeStoreApplyPromoCode, M as stripeStoreRemovePromoCode, f as stripeStore, A as stripeStoreReset, d as stripeStoreRetrievePayment, t as trackConversionEvent, N as stripeStoreResetPromoCode, O as stripeStoreMessageBasedOnStatus, l as localizationStore, P as stripeStoreTranslateAddressToLatin, Q as cartStoreUpdateSelectedShippingOption, R as cartStoreGetShippingTransitInfo, S as sortServiceLevelOptionsByAmount } from './cart-cf87ec6f.js';
+import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-d82f06f2.js';
+import { e as cartStore, J as currencyFormat, q as translate, K as cartStoreHasOneEligibleItem, L as stripeStoreApplyPromoCode, M as stripeStoreRemovePromoCode, f as stripeStore, A as stripeStoreReset, d as stripeStoreRetrievePayment, t as trackConversionEvent, N as stripeStoreResetPromoCode, O as stripeStoreMessageBasedOnStatus, l as localizationStore, w as cartStoreNextStep, P as stripeStoreTranslateAddressToLatin, Q as cartStoreUpdateSelectedShippingOption, R as cartStoreGetShippingTransitInfo, S as sortServiceLevelOptionsByAmount } from './cart-3427ee25.js';
 import { c as classes } from './classes-0d95c529.js';
-import { s as submitGtag, b as paypalStore, c as paypalStoreReset, i as isContrastColor } from './paypal-b7124cc4.js';
-import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-708637e7.js';
-import { c as createCustomEvent, g as getIsTestMode } from './createCustomEvent-31a792d3.js';
-import { g as getBorderRadius } from './getBorderRadius-4aca63d4.js';
-import { h as handleFetch, l as log, s as sendErrorLog, j as jsonParse, b as allLogs } from './handleFetch-badf4543.js';
+import { s as submitGtag, c as paypalStoreReset, b as paypalStore, i as isContrastColor } from './paypal-4e2f9753.js';
+import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-44efd080.js';
+import { h as handleFetch, l as log, s as sendErrorLog, j as jsonParse, g as getIsTestMode, d as allLogs, b as logError, a as getIsStagingMode } from './handleFetch-b4633675.js';
+import { c as createCustomEvent } from './createCustomEvent-58159025.js';
+import { g as getBorderRadius } from './getBorderRadius-b32d4218.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
-import { i as isDarkColor, t as tinycolor } from './isDarkColor-4915739f.js';
+import { i as isDarkColor, t as tinycolor } from './isDarkColor-10f38df6.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
 import { c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
+import { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-915ef042.js';
 
 const getDisplayCurrency = () => {
     var _a, _b;
@@ -1524,6 +1525,20 @@ const ZonosCheckoutFinish = class {
             stripeStoreReset();
             cartStore.checkoutSessionId = null;
         };
+        this.checkStagingOrderStatus = async () => {
+            this.notificationType = 'success';
+            this.notificationTitle = translate("You're all set!");
+            this.notificationMessages =
+                stripeStoreMessageBasedOnStatus('succeeded').messages;
+            // override title if notification type is success
+            this.useOverrideSuccessNotification();
+            await this.handleSuccessBehavior();
+            // reset promo when checkout is finished
+            stripeStoreResetPromoCode();
+            stripeStoreReset();
+            paypalStoreReset();
+            cartStore.checkoutSessionId = null;
+        };
         this.checkPaypalPaymentStatus = async () => {
             // render error message if there's an error
             if (paypalStore.paypalErrorMessage) {
@@ -1590,7 +1605,10 @@ const ZonosCheckoutFinish = class {
             this.isLoading = false;
             return;
         }
-        if (paypalStore.orderIdCreated) {
+        if (cartStore.isStagingMode) {
+            void this.checkStagingOrderStatus();
+        }
+        else if (paypalStore.orderIdCreated) {
             void this.checkPaypalPaymentStatus();
         }
         else {
@@ -1599,17 +1617,22 @@ const ZonosCheckoutFinish = class {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: '7e1b8c53a085ae60d8189aef087a9c458c3dccd0', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '6ad050e91df2b56c55e142cc69d0b582c0c8469a', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: 'b31bed34ca67255cdc6ef6b546f5d6a880e4b309', class: "zonos--finish-details" }, h("div", { key: 'e3cb21607b8f1256b3096fe4f21a806a74174f66', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: 'fac1d2134f1c032cefeb9d36c5c4677767ed0972', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '94b8da1ca6a391295c22d285e65530f5dfe97a41', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '4ebf2bb81ceb0d27b4fd582400606b238a3dfbae',
+            } }, !this.isLoading && (h("div", { key: '8e47016dc83cbe1af79f384285c606fcb737e475', class: "zonos--finish-details" }, h("div", { key: 'd1c14e8db7aa70d04b77b10bb0d8b1e3de5529e3', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: 'd26717fe5d844f2fe6a87b05a566ef0da2d740f7', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '7845c4ff7872884d8e5b8b275eb8a76efa855e52', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '891901ad2c4fb7c2025ad47417425cd239e36cf1',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '6548724f163ad59fc3cb502c24d82ae7585c6b7f', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '550bd94f93b842d71c23bd158362b711797dd4a1', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (h("div", { key: 'f9aeb5d59dc4b0f163868e5a2358a69a0884bb56', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '98ae907d33624e54f84f88519abacd1ea178554c', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '506eeb9eabe16fed59b98b9eef49552542272233', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
+            this.notificationType === 'success' && (h("div", { key: '8fdaa205f4517e0a9a6c5482e80d6dbccba6a585', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '41b524fc8dea752a6f4745191970ac665e7b9fa8', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '70297a07cc8d3c11545776d600d8a1a2a3c2a744', onClick: () => {
+                const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
+                this.redirectToUrl(isZonosDashboard
+                    ? '/orders/all'
+                    : 'https://dashboard.zonos.com/orders/all');
+            }, size: "lg", variant: "primary" }, "View order in Dashboard")))))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -1669,6 +1692,44 @@ const ZonosCheckoutFooter = class {
 };
 ZonosCheckoutFooter.style = ZonosCheckoutFooterStyle0;
 
+const placeTestOrder = async () => {
+    var _a, _b;
+    const shipToPartyId = (_a = cartStore.partiesData.find(party => party.type === 'DESTINATION')) === null || _a === void 0 ? void 0 : _a.id;
+    const billToPartyId = (_b = cartStore.partiesData.find(party => party.type === 'PAYOR')) === null || _b === void 0 ? void 0 : _b.id;
+    const checkoutSessionId = cartStore.checkoutSessionId;
+    if (!checkoutSessionId || !billToPartyId || !shipToPartyId) {
+        logError('Missing required data', {
+            billToPartyId,
+            checkoutSessionId,
+            shipToPartyId,
+        });
+        return {
+            errors: ['Missing required data'],
+            json: null,
+        };
+    }
+    const payload = {
+        billToPartyId,
+        checkoutSessionId,
+        shipToPartyId,
+    };
+    const { errors, json } = await handleFetch('/api/zonos-elements/place-test-order', {
+        body: payload,
+        method: 'POST',
+    });
+    if (errors.length || !json) {
+        logError('Error occurs when placing test order', errors);
+        return {
+            errors: errors.map(error => error.message),
+            json: null,
+        };
+    }
+    return {
+        errors: [],
+        json,
+    };
+};
+
 const CheckmarkLineIcon = `<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M15.342 10.21a.75.75 0 0 0-1.184-.92l-2.978 3.829-1.4-1.4a.75.75 0 1 0-1.06 1.061l1.8 1.8a1 1 0 0 0 1.496-.093l3.326-4.277Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>`;
 
 const RemoveLineIcon = `<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M14.475 10.586a.75.75 0 1 0-1.06-1.06L12 10.938l-1.414-1.414a.75.75 0 0 0-1.06 1.06L10.938 12l-1.414 1.414a.75.75 0 1 0 1.06 1.06L12 13.062l1.414 1.414a.75.75 0 0 0 1.06-1.06L13.062 12l1.414-1.414Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>`;
@@ -1706,11 +1767,31 @@ const ZonosCheckoutPayment = class {
                 type: 'success',
             });
         };
+        this.placeTestOrder = async () => {
+            this.internalContinueLoading = true;
+            const { errors } = await placeTestOrder();
+            if (errors.length) {
+                this.stagingOrderCreateErrorMessage =
+                    errors[0] || 'Failed to create staging order. Please try again.';
+                this.internalContinueLoading = false;
+                return;
+            }
+            this.internalContinueLoading = false;
+            // continue to the next step
+            cartStoreNextStep();
+        };
         this.submitBtnType = undefined;
         this.continueLoading = false;
         this.submitBtnColor = undefined;
+        this.isMobile = false;
+        this.overridePrimaryColor = undefined;
         this.showErrorBanner = false;
         this.hasStripePaymentError = false;
+        this.stagingOrderCreateErrorMessage = '';
+        this.internalContinueLoading = this.continueLoading;
+    }
+    continueLoadingWatcher() {
+        this.internalContinueLoading = this.continueLoading;
     }
     stripePaymentErrorWatcher() {
         if (this.hasStripePaymentError) {
@@ -1734,25 +1815,43 @@ const ZonosCheckoutPayment = class {
             this.showErrorBanner = !this.handleValidate();
         }
         const isTestMode = getIsTestMode();
+        const isStagingMode = cartStore.isStagingMode || getIsStagingMode();
         const isPaypalTabSelected = ((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.value.type) === 'external_paypal';
-        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), this.hasStripePaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, stripeStore.customErrorMessage ||
-            translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypalStore.paypalErrorMessage && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypalStore.paypalErrorMessage)), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, !isPaypalTabSelected && (h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => {
-                this.continueClickHandler();
-            }, size: "lg",
-            // use primary type when on mobile mode
-            variant: this.submitBtnType }, translate('Pay [orderTotal]', {
-            orderTotal: renderCheckoutCurrency({
-                amount: cartStore.total,
-                isForeign: true,
-            }),
-        }))), h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
-                this.paypalSessionDone.emit(orderId);
-            }, onPaypalSessionFail: () => this.paypalSessionFailed.emit(), style: {
-                display: isPaypalTabSelected ? 'block' : 'none',
-            } })), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null))))));
+        const renderPayment = () => {
+            if (isStagingMode) {
+                const { colorPrimary } = zonosStore.appearance;
+                const themeBasedColor = colorPrimary && isDarkColor(colorPrimary) ? 'DARK' : 'LIGHT';
+                // If in mobile, use the theme from the store since the UI is solely by theme
+                const theme = this.isMobile
+                    ? zonosStore.appearance.theme
+                    : themeBasedColor;
+                return (h(Fragment, null, this.stagingOrderCreateErrorMessage && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, this.stagingOrderCreateErrorMessage)), h("zonos-empty-state-payment", { emptyStateText: translate('No payment method needed for staging'), theme: theme }), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.internalContinueLoading, onClick: () => {
+                        void this.placeTestOrder();
+                    }, size: "lg",
+                    // use primary type when on mobile mode
+                    variant: this.submitBtnType }, translate('Place test order')))));
+            }
+            return (h(Fragment, null, this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), this.hasStripePaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, stripeStore.customErrorMessage ||
+                translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypalStore.paypalErrorMessage && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypalStore.paypalErrorMessage)), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, !isPaypalTabSelected && (h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => {
+                    this.continueClickHandler();
+                }, size: "lg",
+                // use primary type when on mobile mode
+                variant: this.submitBtnType }, translate('Pay [orderTotal]', {
+                orderTotal: renderCheckoutCurrency({
+                    amount: cartStore.total,
+                    isForeign: true,
+                }),
+            }))), h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
+                    this.paypalSessionDone.emit(orderId);
+                }, onPaypalSessionFail: () => this.paypalSessionFailed.emit(), style: {
+                    display: isPaypalTabSelected ? 'block' : 'none',
+                } })), isTestMode && (h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, h("zonos-v-stack", { spacing: 16 }, h("div", null, h("zonos-text", { type: "semiBoldLabel" }, translate('Test cards')), h("zonos-text", { textColor: "gray-700" }, translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), h("zonos-button", { icon: h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, translate('Success'), " (****4242)"), h("zonos-button", { icon: h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, translate('Failure'), " (****0002)")), h("zonos-notification", null)))));
+        };
+        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), renderPayment())));
     }
     get ele() { return getElement(this); }
     static get watchers() { return {
+        "continueLoading": ["continueLoadingWatcher"],
         "hasStripePaymentError": ["stripePaymentErrorWatcher"]
     }; }
 };
@@ -2030,7 +2129,7 @@ const ZonosCurrencyToggle = class {
     static get assetsDirs() { return ["assets"]; }
 };
 
-const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:20px}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:32px}.sc-zonos-customer-info-h .zonos--address.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info+.zonos--address.sc-zonos-customer-info{margin-bottom:0}.sc-zonos-customer-info-h zonos-button.sc-zonos-customer-info{-webkit-box-shadow:0 0 1px 0 var(--zonos-elements-gray-600);box-shadow:0 0 1px 0 var(--zonos-elements-gray-600)}.sc-zonos-customer-info-h .zonos--error-banner.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:20px;overflow:auto;padding:5px;-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:-5px;padding-top:8px;margin-top:12px;background:var(--zonos--primary-color, var(--zonos-elements-gray-0))}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:100%}";
+const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:20px}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:32px}.sc-zonos-customer-info-h .zonos--address.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info+.zonos--address.sc-zonos-customer-info{margin-bottom:0}.sc-zonos-customer-info-h zonos-button.sc-zonos-customer-info{-webkit-box-shadow:0 0 1px 0 var(--zonos-elements-gray-600);box-shadow:0 0 1px 0 var(--zonos-elements-gray-600)}.sc-zonos-customer-info-h .zonos--error-banner.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--tax-id-input.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:20px;overflow:auto;padding:5px;-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:-5px;padding-top:8px;margin-top:12px;background:var(--zonos--primary-color, var(--zonos-elements-gray-0))}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:100%}";
 const ZonosCustomerInfoStyle0 = zonosCustomerInfoCss;
 
 const ZonosCustomerInfo = class {
@@ -2196,6 +2295,26 @@ const ZonosCustomerInfo = class {
         }
         return invalidList;
     }
+    isInTaxIdCountry(countryCode) {
+        return countryRequireTaxId.includes(countryCode);
+    }
+    /**
+     * Render tax id input based on ship to country code
+     */
+    renderTaxIdInput(countryCode) {
+        // Don't render tax id input if the country is not provided
+        if (!countryCode) {
+            return null;
+        }
+        const isCountryRequireTaxId = this.isInTaxIdCountry(countryCode);
+        if (!isCountryRequireTaxId) {
+            return null;
+        }
+        const taxIdInputInfo = shipToTaxIdLabels[countryCode];
+        return (h("div", { class: "zonos--tax-id-input" }, h("zonos-stripe-input", { inputLabel: translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: stripeStore.taxId || '', onInputChange: (event) => {
+                stripeStore.taxId = event.detail;
+            } })));
+    }
     render() {
         var _a, _b;
         if (!stripeStore.stripeElements) {
@@ -2220,7 +2339,7 @@ const ZonosCustomerInfo = class {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: (_b = this.defaultAddress) === null || _b === void 0 ? void 0 : _b.email, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: (_b = this.defaultAddress) === null || _b === void 0 ? void 0 : _b.email, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), this.renderTaxIdInput(this.shippingCountry), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 stripeStore.stripeShippingSameAsBilling = e.detail;
             } }), h("zonos-collapse", { collapsed: !showBilling }, h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Billing address'), type: "billing" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode

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

@@ -1,15 +1,15 @@
-import { r as registerInstance, h, H as Host, F as Fragment } from './index-986b5ff2.js';
-import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as stripeStoreRetrievePayment, e as cartStore, f as stripeStore, g as cartStoreUpdateItems, h as cartStoreReset, j as cartStoreResetTabItems, k as cartStoreClearCheckoutInterval, m as stripeStoreInitCheckoutSession, n as cartStoreStartCheckoutInterval, t as trackConversionEvent, o as getCheckoutSessionBody, p as cartStoreUpdateToErrorState, q as translate, r as getZCountryUrlParam, u as cartStoreSetCheckoutSession, v as stripeStorePrefetchLandedCost, w as cartStoreNextStep, x as stripeStoreHandleInventoryCheck, y as stripeStoreConfirmPayment, z as stripeStoreHandleInventoryRefund, A as stripeStoreReset, B as localizationStoreOnUpdate } from './cart-cf87ec6f.js';
-import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalInitScript, b as paypalStore } from './paypal-b7124cc4.js';
-import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-708637e7.js';
-import { h as handleFetch, l as log, a as logError, s as sendErrorLog, g as getElapsedTime, b as allLogs, j as jsonParse } from './handleFetch-badf4543.js';
-import { g as getIsTestMode, c as createCustomEvent } from './createCustomEvent-31a792d3.js';
+import { r as registerInstance, h, H as Host, F as Fragment } from './index-d82f06f2.js';
+import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as stripeStoreRetrievePayment, e as cartStore, f as stripeStore, g as cartStoreUpdateItems, h as cartStoreReset, j as cartStoreResetTabItems, k as cartStoreClearCheckoutInterval, m as stripeStoreInitCheckoutSession, n as cartStoreStartCheckoutInterval, t as trackConversionEvent, o as getCheckoutSessionBody, p as cartStoreUpdateToErrorState, q as translate, r as getZCountryUrlParam, u as cartStoreSetCheckoutSession, v as stripeStorePrefetchLandedCost, w as cartStoreNextStep, x as stripeStoreHandleInventoryCheck, y as stripeStoreConfirmPayment, z as stripeStoreHandleInventoryRefund, A as stripeStoreReset, B as localizationStoreOnUpdate } from './cart-3427ee25.js';
+import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalInitScript, b as paypalStore } from './paypal-4e2f9753.js';
+import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-44efd080.js';
+import { h as handleFetch, l as log, b as logError, s as sendErrorLog, c as getElapsedTime, d as allLogs, g as getIsTestMode, j as jsonParse, a as getIsStagingMode } from './handleFetch-b4633675.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-4aca63d4.js';
-import { i as isDarkColor } from './isDarkColor-4915739f.js';
+import { c as createCustomEvent } from './createCustomEvent-58159025.js';
+import { g as getBorderRadius } from './getBorderRadius-b32d4218.js';
+import { i as isDarkColor } from './isDarkColor-10f38df6.js';
 import { s as styles } from './styles-6fc2fad9.js';
-import { c as checkoutHiddenBtnSelector, s as setupCartData, d as domesticRedirectedBtnSelector } from './CheckoutConfig-262008fe.js';
+import { c as checkoutHiddenBtnSelector, s as setupCartData, d as domesticRedirectedBtnSelector } from './CheckoutConfig-573bd959.js';
 import { R as RemoveIcon } from './RemoveIcon-9dc5dd1a.js';
 
 /**
@@ -369,6 +369,7 @@ const ZonosCheckout = class {
         this.appearanceSettingsOverride = undefined;
         this.preview = false;
         this.mobile = false;
+        this.overrideStagingMode = undefined;
         this.defaultAddress = null;
         this.forceDialogOpen = false;
         this.defaultAddressParams = null;
@@ -386,6 +387,7 @@ const ZonosCheckout = class {
         this.isCartExpired = false;
         this.inventoryCheckErrorMessage = null;
         this.placedOrderInfo = null;
+        this.clientSecret = stripeStore.clientSecret;
     }
     /**
      * Init cart info handler event
@@ -442,7 +444,7 @@ const ZonosCheckout = class {
             const isExpired = this.handleCartExpiredCheck();
             if (isExpired) {
                 // Do not proceed if the cart is expired
-                return;
+                return false;
             }
             const { adjustments, cartItems } = buildCartItemsByTempCart(window.Zonos.cartData);
             await cartStoreUpdateItems({ adjustments, cartItems });
@@ -456,13 +458,13 @@ const ZonosCheckout = class {
             const cartData = cartResult === null || cartResult === void 0 ? void 0 : cartResult.cartData;
             if (!cartData) {
                 logError('Failed to build cart, please try again.');
-                return;
+                return false;
             }
             window.Zonos.cartData = cartData;
             const isExpired = this.handleCartExpiredCheck();
             if (isExpired) {
                 // Do not proceed if the cart is expired
-                return;
+                return false;
             }
             const { adjustments, cartItems } = buildCartItemsByTempCart(cartData);
             await cartStoreUpdateItems({ adjustments, cartItems });
@@ -754,12 +756,21 @@ const ZonosCheckout = class {
             phone,
         };
     }
+    overrideStagingModeChanged() {
+        cartStore.isStagingMode = !!this.overrideStagingMode;
+    }
     /**
      * Setup all of the event listeners for the component on first load
      */
     async init() {
         stripeStore.stripe = window.Zonos.stripe;
         this.stripe = window.Zonos.stripe;
+        // Set staging mode on init
+        cartStore.isStagingMode = getIsStagingMode();
+        // Override staging mode if it's provided
+        if (typeof this.overrideStagingMode !== 'undefined') {
+            cartStore.isStagingMode = this.overrideStagingMode;
+        }
         // check if bigcommerce, if user enters the shipping address that's in the shipping zone at bigcommerce checkout
         watchBigcommerceDomesticCheckout({
             domesticRedirectedBtnSelector: domesticRedirectedBtnSelector,
@@ -998,6 +1009,10 @@ const ZonosCheckout = class {
     handleAddressChange() {
         stripeStoreReset();
     }
+    handleClientSecretChange() {
+        // apply theme to stripe elements
+        void this.applyStripeTheme();
+    }
     handleOpenChange() {
         const overflowAttrKey = 'data-zonos-overflow-origin';
         const body = document.body;
@@ -1062,6 +1077,8 @@ const ZonosCheckout = class {
     }
     render() {
         var _a, _b, _c, _d;
+        // Set client secret so that we can add this to @Watch listener
+        this.clientSecret = stripeStore.clientSecret;
         const dialogLoading = 
         // if it's last step, don't need to check stripe elements
         (cartStore.step !== 'finish' &&
@@ -1095,7 +1112,8 @@ const ZonosCheckout = class {
             const zonosQaUrl = urlParams.get('zonosQaUrl');
             const zonosDebug = urlParams.get('zonosDebug');
             const zonosE2ETest = urlParams.get('zonosE2ETest');
-            return (h("zonos-v-stack", null, h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (h("zonos-badge", { badgeColor: "orange", size: "small" }, translate('Test mode'))), zonosDebug === '1' && (h("zonos-badge", { badgeColor: "cyan", size: "small" }, "debug")), zonosQaUrl && (h("zonos-badge", { badgeColor: "purple", size: "small" }, zonosQaUrl)), zonosE2ETest && (h("zonos-badge", { badgeColor: "gray", size: "small" }, "E2E Test"))), h("zonos-checkout-progress-tabs", { backgroundColor: 
+            const zonosStagingMode = this.overrideStagingMode || getIsStagingMode();
+            return (h("zonos-v-stack", null, h("div", { class: "zonos--logo-wrapper" }, renderLogo(), isTestMode && (h("zonos-badge", { badgeColor: "orange", size: "small" }, translate('Test mode'))), zonosStagingMode && (h("zonos-badge", { badgeColor: "red", size: "small" }, translate('Staging mode'))), zonosDebug === '1' && (h("zonos-badge", { badgeColor: "cyan", size: "small" }, "debug")), zonosQaUrl && (h("zonos-badge", { badgeColor: "purple", size: "small" }, zonosQaUrl)), zonosE2ETest && (h("zonos-badge", { badgeColor: "gray", size: "small" }, "E2E Test"))), 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 => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
         };
@@ -1111,7 +1129,7 @@ const ZonosCheckout = class {
                     '--zonos--primary-color': !this.isMobile
                         ? colorPrimary
                         : undefined,
-                }) }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress || this.defaultAddressParams, isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: async () => {
+                }) }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress || this.defaultAddressParams, isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, isMobile: this.isMobile, onContinueClicked: async () => {
                     await this.handleStripePaymentContinue();
                 }, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), h("div", { class: "zonos--right-actions" }, window.Zonos.showBaseForeign && (h("zonos-currency-toggle", null)), !this.isLegacyCheckout && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() }))), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile
@@ -1178,8 +1196,10 @@ const ZonosCheckout = class {
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
         "appearanceSettingsOverride": ["appearanceSettingsOverrideChanged", "handleAppearanceSettingsOverrideChange"],
+        "overrideStagingMode": ["overrideStagingModeChanged"],
         "mobile": ["handleMobileChange"],
         "defaultAddress": ["handleAddressChange"],
+        "clientSecret": ["handleClientSecretChange"],
         "open": ["handleOpenChange"]
     }; }
 };

package/dist/esm/zonos-collapse.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-986b5ff2.js';
-import { d as zonosStoreFontFamily } from './zonosStore-708637e7.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-d82f06f2.js';
+import { d as zonosStoreFontFamily } from './zonosStore-44efd080.js';
 
 const zonosCollapseCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";
 const ZonosCollapseStyle0 = zonosCollapseCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-986b5ff2.js';
+import { r as registerInstance, h } from './index-d82f06f2.js';
 
 function format(first, middle, last) {
     return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
@@ -18,7 +18,7 @@ const ZonosComponent = class {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '564c34a7a93a16b8e619a0e140f8d99fabc91c34' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '63b0c771133fd495f36e2c67601d64d6e56f5f2b' }, "Hello, World! I'm ", this.getText());
     }
 };
 ZonosComponent.style = ZonosComponentStyle0;

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-986b5ff2.js';
-import { D as isValidSelector, f as stripeStore, E as initLocalizationStore, e as cartStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-cf87ec6f.js';
-import { z as zonosStore, b as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore-708637e7.js';
-import { h as handleFetch, a as logError, l as log } from './handleFetch-badf4543.js';
-import './isDarkColor-4915739f.js';
-import './getBorderRadius-4aca63d4.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-d82f06f2.js';
+import { D as isValidSelector, f as stripeStore, E as initLocalizationStore, e as cartStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-3427ee25.js';
+import { z as zonosStore, b as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore-44efd080.js';
+import { h as handleFetch, b as logError, l as log } from './handleFetch-b4633675.js';
+import './isDarkColor-10f38df6.js';
+import './getBorderRadius-b32d4218.js';
 
 const getZonosSettings = async () => {
     const { errors, json, zonosMode } = await handleFetch('/api/zonos-elements/zonos-settings');
@@ -321,7 +321,7 @@ const ZonosController = class {
      */
     async reset() {
         cartStore.checkoutSessionId = null;
-        stripeStore.clientSecret = null;
+        stripeStore.clientSecret = '';
     }
     /**
      * Override the setting
@@ -353,7 +353,7 @@ const ZonosController = class {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '7cdde4733b47d96c6539a6bd9c78f150de8a6eb4', class: "zonos--elements" });
+        return h(Host, { key: 'ab190aefdb7b90e03ec8f4f2da73a05c3416c776', class: "zonos--elements" });
     }
 };
 ZonosController.style = ZonosControllerStyle0;

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-986b5ff2.js';
-import { l as localizationStore } from './cart-cf87ec6f.js';
-import { d as zonosStoreFontFamily } from './zonosStore-708637e7.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-d82f06f2.js';
+import { l as localizationStore } from './cart-3427ee25.js';
+import { d as zonosStoreFontFamily } from './zonosStore-44efd080.js';
 import { c as classes } from './classes-0d95c529.js';
-import './handleFetch-badf4543.js';
-import './isDarkColor-4915739f.js';
-import './getBorderRadius-4aca63d4.js';
+import './handleFetch-b4633675.js';
+import './isDarkColor-10f38df6.js';
+import './getBorderRadius-b32d4218.js';
 
 const zonosCountryFlagCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{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/esm/zonos-country-select_4.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-986b5ff2.js';
-import { a as localizationStoreUpdateSelectedCountryCode, q as translate, l as localizationStore } from './cart-cf87ec6f.js';
-import { d as zonosStoreFontFamily } from './zonosStore-708637e7.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-d82f06f2.js';
+import { a as localizationStoreUpdateSelectedCountryCode, q as translate, l as localizationStore } from './cart-3427ee25.js';
+import { d as zonosStoreFontFamily } from './zonosStore-44efd080.js';
 import { f as formatStringWithLinks } from './formatStringWithLinks-9e819405.js';
-import { i as isDarkColor } from './isDarkColor-4915739f.js';
+import { i as isDarkColor } from './isDarkColor-10f38df6.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
-import './handleFetch-badf4543.js';
-import './getBorderRadius-4aca63d4.js';
+import './handleFetch-b4633675.js';
+import './getBorderRadius-b32d4218.js';
 
 /**
  * Fuse.js v7.0.0 - Lightweight fuzzy-search (http://fusejs.io)
@@ -1893,9 +1893,9 @@ const ZonosHelloDialogFooter = class {
         const language = (_b = languages.find(x => x.code === 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(primaryColor) ? 'white' : 'black';
-        return (h(Host, { key: '458b65efb2fc1e6cf5f7c5588601add4af010de6', class: "zonos--elements" }, h("div", { key: 'ee8eb8cf4a3e0a5583f5fb15842a86adb443e421', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: 'f84d021e99271bd6a00da32edd35fdc5e0520c5a', class: "zonos--elements" }, h("div", { key: 'db35a5022b1ef1a70e3cace021fcc14d6e8ea987', class: "zonos--hello-dialog-footer", style: {
                 '--zonos--primary-color': primaryColor,
-            } }, h("a", { key: 'fa6ab85dae56620a30275dd25c10011bf129545e', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '413b1d69091e5bf4ba639ea66e4930acc0636074', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: 'be2881c022690d5a6bcb9c38a50287a427f4fc32', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '79480397f8c59a435b1f9a4604441500991741a3', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'c23ae8fa589d754ca93680006d6a45af2b440db6', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: 'bbbc50bf395e2658239e2a1a0342122b04e43a5f', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '3c80a7ba8dd9509d45bde7de20e7689f632aedc8', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: 'add64f376e48cc71f6b5672aafe7b1ef62ab2354', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'a0a5059ad4a48b2cc3ea05696aa79ffce33b4bf2', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '2608dba553f846c5016e8395dbce079beda0aa5a', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     get ele() { return getElement(this); }
 };
@@ -1957,12 +1957,12 @@ const ZonosVirtualScroll = class {
                 } }, this.renderItem(i)));
             accHeight += itemHeight;
         }
-        return (h(Host, { key: 'c09f341c0436d53ad245f0dc4ed54d5ead9a0e39' }, h("div", { key: 'e7f9cbb0dd33d0fab1bffd01672e9f5a3bc11f04',
+        return (h(Host, { key: '0f132a5b60586fb22d1d5536aa7abef6199e0748' }, h("div", { key: 'a947229cd3d53b79312855cf8ddf8c9985035e1e',
             // to capture scroll action
             class: "scroller", style: {
                 height: `${this.totalHeight}px`,
                 width: `${W}px`,
-            } }), h("div", { key: '93071acbc731dda4e9a1f453aa76526cd1639191',
+            } }), h("div", { key: '63013fe7bc53d76152fda74e7b6ef054e7c3a9ef',
             // to display items
             class: "item-container", ref: el => (this.container = el), style: {
                 height: `${this.totalHeight}px`,