@zonos/elements 1.3.84 → 1.3.85

package/dist/esm/{paypal-a45fb0bb.js → paypal-a562a640.js}

@@ -1,5 +1,5 @@
 import { z as zonosStore, c as createStore } from './zonosStore-0dc7a947.js';
-import { d as cartStore, r as stripeStoreHandleInventoryCheck, t as translate, q as cartStoreNextStep, h as cartStoreClearCheckoutInterval } from './cart-40e0d619.js';
+import { d as cartStore, r as stripeStoreHandleInventoryCheck, t as translate, q as cartStoreNextStep, h as cartStoreClearCheckoutInterval } from './cart-6c44367a.js';
 import { h as handleFetch, l as log, a as logError, j as jsonParse } from './handleFetch-0133265e.js';
 import { t as tinycolor } from './isDarkColor-b3afa948.js';
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-86b8247e.js';
-import { j as stripeStore, l as localizationStore, D as DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT, t as translate } from './cart-40e0d619.js';
+import { j as stripeStore, l as localizationStore, D as DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT, t as translate } from './cart-6c44367a.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
 import { a as logError } from './handleFetch-0133265e.js';
 import { i as isTextContainsNonLatinChars, c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';

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

@@ -1,9 +1,9 @@
 import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-86b8247e.js';
-import { d as cartStore, t as translate, F as currencyFormat, G as cartStoreHasOneEligibleItem, H as stripeStoreApplyPromoCode, I as stripeStoreRemovePromoCode, v as stripeStoreReset, j as stripeStore, J as stripeStoreRetrievePayment, K as stripeStoreMessageBasedOnStatus, L as stripeStoreResetPromoCode, l as localizationStore, M as stripeStoreTranslateAddressToLatin, N as cartStoreUpdateSelectedShippingOption, O as cartStoreGetShippingTransitInfo, P as sortServiceLevelOptionsByAmount } from './cart-40e0d619.js';
+import { d as cartStore, t as translate, F as currencyFormat, G as cartStoreHasOneEligibleItem, H as stripeStoreApplyPromoCode, I as stripeStoreRemovePromoCode, v as stripeStoreReset, j as stripeStore, J as stripeStoreRetrievePayment, K as stripeStoreMessageBasedOnStatus, L as stripeStoreResetPromoCode, l as localizationStore, M as stripeStoreTranslateAddressToLatin, N as cartStoreUpdateSelectedShippingOption, O as cartStoreGetShippingTransitInfo, P as sortServiceLevelOptionsByAmount } from './cart-6c44367a.js';
 import { c as classes } from './classes-0d95c529.js';
-import { s as submitGtag, a as paypalStore, b as paypalStoreReset, c as paypalStoreHasPaypalEnabled, i as isContrastColor } from './paypal-a45fb0bb.js';
+import { s as submitGtag, a as paypalStore, b as paypalStoreReset, c as paypalStoreHasPaypalEnabled, i as isContrastColor } from './paypal-a562a640.js';
 import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-0dc7a947.js';
-import { t as trackConversionEvent, c as createCustomEvent, g as getIsTestMode } from './createCustomEvent-1f615c82.js';
+import { t as trackConversionEvent, c as createCustomEvent, g as getIsTestMode } from './createCustomEvent-ec15a4a7.js';
 import { g as getBorderRadius } from './getBorderRadius-cff1e39b.js';
 import { h as handleFetch, s as sendErrorLog } from './handleFetch-0133265e.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
@@ -27,11 +27,13 @@ const ZonosCartItems = class {
         const nonRestrictedItems = cartStore.items.filter(item => !item.isRestricted);
         return (h(Host, { key: '7bdf8d1972edb2d11669441b3d8ec6643fca1f4b', class: "zonos--cart-items zonos--elements" }, h("table", { key: '1c2fe6d444ea93e40b981a8935d16192bf61928c', class: "zonos--cart-table" }, h("tbody", { key: '84279bea6821077bf117a7a13ca497155276c622' }, nonRestrictedItems.map(item => {
             const itemImg = item.imageUrl;
+            // Split the name by <br> tag
+            const namesWithNewLine = item.name.split(/<br\s*\/*>/);
             return (h("tr", { class: "zonos--cart-item" }, h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];
                 }, src: item.imageUrl, style: {
                     'min-width': '40px',
-                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, item.name), h("zonos-text", { textColor: "gray-600", type: "caption" }, translate('Quantity'), ": ", item.quantity)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel", weight: 600 }, currencyFormat({
+                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("div", null, namesWithNewLine.map(name => (h("zonos-text", { type: "label" }, name)))), h("zonos-text", { textColor: "gray-600", type: "caption" }, translate('Quantity'), ": ", item.quantity)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel", weight: 600 }, currencyFormat({
                 amount: item.amount * rate * item.quantity,
                 currency: cartStore.currency,
             })))));
@@ -536,6 +538,7 @@ const ZonosCheckoutPayment = class {
         this.showErrorBanner = false;
     }
     render() {
+        var _a;
         if (!stripeStore.stripeElements) {
             return null;
         }
@@ -545,16 +548,24 @@ const ZonosCheckoutPayment = class {
         }
         const isTestMode = getIsTestMode();
         const hasPaypalEnabled = paypalStoreHasPaypalEnabled();
-        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.'))), stripeStore.hasPaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, 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" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        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.'))), stripeStore.hasPaymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, 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: () => {
+                if (!hasPaypalEnabled) {
+                    return;
+                }
+                this.continueClickHandler();
+            }, size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Pay [orderTotal]', {
             orderTotal: currencyFormat({
                 amount: cartStore.total,
                 currency: cartStore.currency,
             }),
-        })), hasPaypalEnabled && (h("zonos-text", { type: "smallHeader" }, translate('or'))), h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
+        }))), h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
                 this.paypalSessionDone.emit(orderId);
-            }, onPaypalSessionFail: () => this.paypalSessionFailed.emit() })), 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))))));
+            }, 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))))));
     }
 };
 ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
@@ -572,9 +583,14 @@ const getContrastColor = ({ backgroundColor, color, }) => {
     if (isDarkColor(color)) {
         return '#ffffff';
     }
-    else {
-        return tinycolor(color).darken(25).toHexString();
-    }
+    const newDarkerColor = tinycolor(color).darken(25).toHexString();
+    const newLigherColor = tinycolor(color).lighten(25).toHexString();
+    // get readibility of the color
+    const isNewColorContrastEnough = isContrastColor({
+        backgroundColor1: backgroundColor,
+        backgroundColor2: newDarkerColor,
+    });
+    return isNewColorContrastEnough ? newDarkerColor : newLigherColor;
 };
 
 const TabCheckmark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -1065,7 +1081,7 @@ const ChevronUpIcon = `<svg width="25" height="24" viewBox="0 0 25 24" fill="non
 </svg>
 `;
 
-const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:-16px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:20px;overflow:auto;padding:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px;-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h .zonos--error-banner.sc-zonos-shipping{margin-bottom:16px}.sc-zonos-shipping-h .zonos--shipping-method-error.sc-zonos-shipping{margin-top:24px}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{-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-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:12px;background:var(--primary-color, var(--zonos-elements-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h .zonos--shipping-options-wrapper.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:24px;-ms-flex-align:center;align-items:center;background:var(--zonos-elements-gray-0);width:100%;border:none;cursor:pointer;position:-webkit-sticky;position:sticky;top:0;z-index:1;-webkit-transition:0.5s all ease;transition:0.5s all ease}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping zonos-icon.sc-zonos-shipping{-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.collapsed.sc-zonos-shipping{margin-bottom:0}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.collapsed.sc-zonos-shipping zonos-icon.sc-zonos-shipping{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping::before,.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping::after{content:\"\";display:block;width:80%;height:1px;background-color:var(--zonos-elements-border-color);-ms-flex-negative:1;flex-shrink:1}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping .zonos--title-wrapper.sc-zonos-shipping{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;gap:8px;-ms-flex-align:center;align-items:center}.sc-zonos-shipping-h .zonos--dap-wrapper.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}";
+const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:-16px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:20px;overflow:auto;padding:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px;-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h .zonos--error-banner.sc-zonos-shipping{margin-bottom:16px}.sc-zonos-shipping-h .zonos--shipping-method-error.sc-zonos-shipping{margin-top:24px}.sc-zonos-shipping-h zonos-button.sc-zonos-shipping{-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-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;z-index:1;margin-top:12px;background:var(--primary-color, var(--zonos-elements-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h .zonos--shipping-options-wrapper.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:24px;-ms-flex-align:center;align-items:center;background:transparent;width:100%;border:none;cursor:pointer;position:-webkit-sticky;position:sticky;top:0;z-index:1;-webkit-transition:0.5s all ease;transition:0.5s all ease}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping zonos-icon.sc-zonos-shipping{-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.collapsed.sc-zonos-shipping{margin-bottom:0}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.collapsed.sc-zonos-shipping zonos-icon.sc-zonos-shipping{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping::before,.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping::after{content:\"\";display:block;width:80%;height:1px;background-color:var(--zonos-elements-border-color);-ms-flex-negative:1;flex-shrink:1}.sc-zonos-shipping-h .zonos--shipping-options-collapse-trigger.sc-zonos-shipping .zonos--title-wrapper.sc-zonos-shipping{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;gap:8px;-ms-flex-align:center;align-items:center}.sc-zonos-shipping-h .zonos--dap-wrapper.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:24px}";
 const ZonosShippingStyle0 = zonosShippingCss;
 
 const ZonosShipping = class {
@@ -1208,12 +1224,13 @@ const ZonosShipping = class {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: 'e376545666893a373bca1591083a868892804fb1', class: "zonos--shipping zonos--elements" }, h("div", { key: 'f8901d3d8fbeb6a285a7a33b9cea940476413c68', class: "zonos--group" }, h("zonos-text", { key: '83e02010c5e11647064ebf28468def163dd3395a', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!allServiceLevels.length && (h("zonos-banner", { key: 'e65f0ce2e968612bd7c1efeca8309e69a03a8c65', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'cdae794614c6879477e96de435d5c4e59f469fe9', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !allServiceLevels.length ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), class: "zonos--shipping-method-error", intent: "error" })) : (h("div", { class: "zonos--shipping-options-wrapper" }, h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !defaultShownServiceLevels.length && (h("button", { class: classes([
+        return (h(Host, { key: 'e376545666893a373bca1591083a868892804fb1', class: "zonos--shipping zonos--elements" }, h("div", { key: 'f8901d3d8fbeb6a285a7a33b9cea940476413c68', class: "zonos--group" }, h("zonos-text", { key: '83e02010c5e11647064ebf28468def163dd3395a', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!allServiceLevels.length && (h("zonos-banner", { key: 'e65f0ce2e968612bd7c1efeca8309e69a03a8c65', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'cdae794614c6879477e96de435d5c4e59f469fe9', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !allServiceLevels.length ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), class: "zonos--shipping-method-error", intent: "error" })) : (h("div", { class: "zonos--shipping-options-wrapper" }, h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), (!!this.serviceLevelsDAP.length ||
+            !defaultShownServiceLevels.length) && (h("button", { class: classes([
                 'zonos--shipping-options-collapse-trigger',
                 this.collapsedDAPOptions && 'collapsed',
             ]), onClick: () => {
                 this.collapsedDAPOptions = !this.collapsedDAPOptions;
-            } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non prepaid methods' : 'Hide non prepaid methods')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), h("div", { key: 'e6ec0a7cc6d2e4930fbca92337670962d2d0cff8', class: "zonos--group-btn" }, h("zonos-button", { key: '8586e3fd283e11c1928ccd17e4ef59bf191138e7', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+            } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), h("div", { key: 'fdc7807bc26ec718cb51e23dbb9e4ccf286e6d91', class: "zonos--group-btn" }, h("zonos-button", { key: '7f1f43317f4734333df48bd244d0bf44f4cd252e', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, F as Fragment } from './index-86b8247e.js';
-import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as cartStore, e as cartStoreUpdateItems, f as cartStoreReset, g as cartStoreResetTabItems, h as cartStoreClearCheckoutInterval, j as stripeStore, k as stripeStoreInitCheckoutSession, m as cartStoreStartCheckoutInterval, n as cartStoreUpdateToErrorState, t as translate, D as DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT, o as cartStoreSetCheckoutSession, p as stripeStorePrefetchLandedCost, q as cartStoreNextStep, r as stripeStoreHandleInventoryCheck, u as stripeStoreConfirmPayment, v as stripeStoreReset, w as localizationStoreOnUpdate } from './cart-40e0d619.js';
-import { s as submitGtag, p as paypalInitScript } from './paypal-a45fb0bb.js';
+import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as cartStore, e as cartStoreUpdateItems, f as cartStoreReset, g as cartStoreResetTabItems, h as cartStoreClearCheckoutInterval, j as stripeStore, k as stripeStoreInitCheckoutSession, m as cartStoreStartCheckoutInterval, n as cartStoreUpdateToErrorState, t as translate, D as DEFAULT_COUNTRY_CODE_LEGACY_CHECKOUT, o as cartStoreSetCheckoutSession, p as stripeStorePrefetchLandedCost, q as cartStoreNextStep, r as stripeStoreHandleInventoryCheck, u as stripeStoreConfirmPayment, v as stripeStoreReset, w as localizationStoreOnUpdate } from './cart-6c44367a.js';
+import { s as submitGtag, p as paypalInitScript } from './paypal-a562a640.js';
 import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-0dc7a947.js';
-import { t as trackConversionEvent, c as createCustomEvent, g as getIsTestMode } from './createCustomEvent-1f615c82.js';
+import { t as trackConversionEvent, c as createCustomEvent, g as getIsTestMode } from './createCustomEvent-ec15a4a7.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile-8846dccb.js';
 import { l as log, a as logError, s as sendErrorLog, b as allLogs } from './handleFetch-0133265e.js';
 import { c as classes } from './classes-0d95c529.js';

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-86b8247e.js';
-import { x as isValidSelector, j as stripeStore, y as initLocalizationStore, d as cartStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-40e0d619.js';
+import { x as isValidSelector, j as stripeStore, y as initLocalizationStore, d as cartStore, a as localizationStoreUpdateSelectedCountryCode } from './cart-6c44367a.js';
 import { z as zonosStore, b as zonosStoreInitSetting, d as zonosStoreFontFamily } from './zonosStore-0dc7a947.js';
 import { h as handleFetch, a as logError, l as log } from './handleFetch-0133265e.js';
 import './isDarkColor-b3afa948.js';

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-86b8247e.js';
-import { l as localizationStore } from './cart-40e0d619.js';
+import { l as localizationStore } from './cart-6c44367a.js';
 import { d as zonosStoreFontFamily } from './zonosStore-0dc7a947.js';
 import { c as classes } from './classes-0d95c529.js';
 import './handleFetch-0133265e.js';

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, d as getElement } from './index-86b8247e.js';
-import { a as localizationStoreUpdateSelectedCountryCode, t as translate, l as localizationStore } from './cart-40e0d619.js';
+import { a as localizationStoreUpdateSelectedCountryCode, t as translate, l as localizationStore } from './cart-6c44367a.js';
 import { d as zonosStoreFontFamily } from './zonosStore-0dc7a947.js';
 import { f as formatStringWithLinks } from './formatStringWithLinks-9e819405.js';
 import { i as isDarkColor } from './isDarkColor-b3afa948.js';

package/dist/esm/zonos-hello-dialog.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host } from './index-86b8247e.js';
-import { t as translate, l as localizationStore, F as currencyFormat } from './cart-40e0d619.js';
+import { t as translate, l as localizationStore, F as currencyFormat } from './cart-6c44367a.js';
 import { z as zonosStore } from './zonosStore-0dc7a947.js';
 import { c as classes } from './classes-0d95c529.js';
 import { f as formatStringWithLinks } from './formatStringWithLinks-9e819405.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-86b8247e.js';
 import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1, z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-0dc7a947.js';
-import { l as localizationStore, x as isValidSelector, t as translate, z as getZCountryUrlParam, A as setZCountryUrlParam, B as currencyDisplay, C as currencyConvertAndFormat, E as currencyConvert, F as currencyFormat } from './cart-40e0d619.js';
+import { l as localizationStore, x as isValidSelector, t as translate, z as getZCountryUrlParam, A as setZCountryUrlParam, B as currencyDisplay, C as currencyConvertAndFormat, E as currencyConvert, F as currencyFormat } from './cart-6c44367a.js';
 import { c as classes } from './classes-0d95c529.js';
 import { h as handleFetch, a as logError, l as log } from './handleFetch-0133265e.js';
 import { g as getHasMoreSpaceOnRight } from './getHasMoreSpaceOnRight-70eb913a.js';

package/dist/esm/zonos-language-select_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-86b8247e.js';
-import { Q as localizationStoreUpdateSelectedLocale, t as translate, l as localizationStore } from './cart-40e0d619.js';
+import { Q as localizationStoreUpdateSelectedLocale, t as translate, l as localizationStore } from './cart-6c44367a.js';
 import { d as zonosStoreFontFamily } from './zonosStore-0dc7a947.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
 import './handleFetch-0133265e.js';

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

@@ -1,9 +1,9 @@
 import { r as registerInstance, h, H as Host, d as getElement, c as createEvent } from './index-86b8247e.js';
 import { d as zonosStoreFontFamily } from './zonosStore-0dc7a947.js';
 import { c as classes } from './classes-0d95c529.js';
-import { j as stripeStore } from './cart-40e0d619.js';
+import { j as stripeStore } from './cart-6c44367a.js';
 import { a as logError, l as log } from './handleFetch-0133265e.js';
-import { d as paypalStoreInitButtons } from './paypal-a45fb0bb.js';
+import { d as paypalStoreInitButtons } from './paypal-a562a640.js';
 import './isDarkColor-b3afa948.js';
 import './getBorderRadius-cff1e39b.js';
 
@@ -87,7 +87,7 @@ const ZonosPayment = class {
         // Create and mount the Authentication Element in ${type} mode
         const paymentElement = stripeStore.stripePaymentElement ||
             this.stripeElements.create('payment', {
-                layout: 'accordion',
+                layout: 'tabs',
             });
         const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
         if (!paymentElementContainer) {
@@ -106,7 +106,7 @@ const ZonosPayment = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'c461a967d00b2d96fa70aaaf1651b435cdcd84bd', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '44da1d89ce19f7174cad1214ab9463f0b1174c0d', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'b9e3491b48d9ede19a5cdef639bd47e6bf0ba742', class: "zonos--payment-component" }), h("div", { key: '578516ce1ca1dc01eebb2268bb5449613e14298f', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: 'cf616ec959fd1b7396ed86b23561f459e0da8722', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'e5564db71ba2c0d67d372cb1804d6d462cdf1b33', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '3ea47f2c0a541590210d181bc73ecb3fb27e7783', class: "zonos--payment-component" }), h("div", { key: 'd3a46a127448568caf4309806e88556594075c12', class: "zonos--payment-paypal-container" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {