@zonos/elements 1.3.84 → 1.3.85

package/dist/cjs/index.cjs.js

@@ -97,7 +97,7 @@ const getZonosQaUrl = () => {
         return null;
     }
     const qaUrl = extractZonosQaUrl(window.location.href);
-    const cdnUrl = "https://v1.3.84.js.zonos.com";
+    const cdnUrl = "https://v1.3.85.js.zonos.com";
     // when the qaUrl is not set and the built URL is from the test domain, use the test domain for testing
     if (!qaUrl &&
         (cdnUrl.includes('test.') ||
@@ -281,10 +281,10 @@ const zonosLoadUrl = (() => {
     }
     return null;
 })();
-const ZONOS_URL = "https://v1.3.84.js.zonos.com";
-const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.84";
-const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.84";
-const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.84";
+const ZONOS_URL = "https://v1.3.85.js.zonos.com";
+const JS_DELIVR_ZONOS_URL = zonosLoadUrl || "https://cdn.jsdelivr.net/npm/@zonos/elements@1.3.85";
+const UNPKG_ZONOS_URL = "https://unpkg.com/@zonos/elements@1.3.85";
+const CDNJS_ZONOS_URL = "https://cdnjs.cloudflare.com/ajax/libs/zonos-elements/1.3.85";
 const INTER_FONT_URL = 'https://rsms.me';
 const GOOGLE_FONT_URL = 'https://fonts.googleapis.com';
 const INTER_FONT_REGEX = /^https:\/\/rsms\.me\/inter\/inter\.css(.*)$/;
@@ -299,7 +299,7 @@ Zonos.zonosConversionTest = typeof window !== 'undefined' &&
     !!window.location.search.match(/\?.*(&*)zonosConversionTest/);
 Zonos._paypalMockResponse = null;
 Zonos.isBigCommerce = false;
-Zonos.releaseDate = "1728756182320";
+Zonos.releaseDate = "1728761799096";
 Zonos.isLegacyCheckout = false;
 /**
  * By default, the package will load from npm
@@ -307,7 +307,7 @@ Zonos.isLegacyCheckout = false;
 Zonos.isNpm = true;
 Zonos.zonosQaUrl = null;
 Zonos.zonosQaUrlApi = null;
-Zonos.version = `v${"1.3.84"}`;
+Zonos.version = `v${"1.3.85"}`;
 Zonos.modeAlerted = false;
 Zonos.cartData = null;
 Zonos.paypal = null;

package/dist/cjs/{paypal-078f3cef.js → paypal-1fe5ed0c.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const zonosStore = require('./zonosStore-a4395972.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-fc426d98.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const isDarkColor = require('./isDarkColor-5efc8367.js');
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-fc426d98.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-fc426d98.js');
 const classes = require('./classes-b7918f56.js');
-const paypal = require('./paypal-078f3cef.js');
+const paypal = require('./paypal-1fe5ed0c.js');
 const zonosStore = require('./zonosStore-a4395972.js');
-const createCustomEvent = require('./createCustomEvent-8d9cf9ac.js');
+const createCustomEvent = require('./createCustomEvent-354c8e63.js');
 const getBorderRadius = require('./getBorderRadius-5a64574c.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
@@ -31,11 +31,13 @@ const ZonosCartItems = class {
         const nonRestrictedItems = cart.cartStore.items.filter(item => !item.isRestricted);
         return (index.h(index.Host, { key: '7bdf8d1972edb2d11669441b3d8ec6643fca1f4b', class: "zonos--cart-items zonos--elements" }, index.h("table", { key: '1c2fe6d444ea93e40b981a8935d16192bf61928c', class: "zonos--cart-table" }, index.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 (index.h("tr", { class: "zonos--cart-item" }, index.h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (index.h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];
                 }, src: item.imageUrl, style: {
                     'min-width': '40px',
-                }, width: 40 })) : (index.h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), index.h("td", { class: "zonos--column zonos--cart-item-name" }, index.h("zonos-text", { type: "label" }, item.name), index.h("zonos-text", { textColor: "gray-600", type: "caption" }, cart.translate('Quantity'), ": ", item.quantity)), index.h("td", { class: "zonos--column zonos--cart-item-price" }, index.h("zonos-text", { type: "semiBoldLabel", weight: 600 }, cart.currencyFormat({
+                }, width: 40 })) : (index.h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), index.h("td", { class: "zonos--column zonos--cart-item-name" }, index.h("div", null, namesWithNewLine.map(name => (index.h("zonos-text", { type: "label" }, name)))), index.h("zonos-text", { textColor: "gray-600", type: "caption" }, cart.translate('Quantity'), ": ", item.quantity)), index.h("td", { class: "zonos--column zonos--cart-item-price" }, index.h("zonos-text", { type: "semiBoldLabel", weight: 600 }, cart.currencyFormat({
                 amount: item.amount * rate * item.quantity,
                 currency: cart.cartStore.currency,
             })))));
@@ -540,6 +542,7 @@ const ZonosCheckoutPayment = class {
         this.showErrorBanner = false;
     }
     render() {
+        var _a;
         if (!cart.stripeStore.stripeElements) {
             return null;
         }
@@ -549,16 +552,24 @@ const ZonosCheckoutPayment = class {
         }
         const isTestMode = createCustomEvent.getIsTestMode();
         const hasPaypalEnabled = paypal.paypalStoreHasPaypalEnabled();
-        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Payment method')), this.showErrorBanner && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, cart.translate('Missing required fields. Make sure all fields are completed.'))), cart.stripeStore.hasPaymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, cart.translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypal.paypalStore.paypalErrorMessage && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypal.paypalStore.paypalErrorMessage)), index.h("zonos-payment", null), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        const isPaypalTabSelected = ((_a = cart.stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.value.type) === 'external_paypal';
+        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Payment method')), this.showErrorBanner && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, cart.translate('Missing required fields. Make sure all fields are completed.'))), cart.stripeStore.hasPaymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, cart.translate("We couldn't complete your payment. Please verify the payment details and try again."))), paypal.paypalStore.paypalErrorMessage && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, paypal.paypalStore.paypalErrorMessage)), index.h("zonos-payment", null), index.h("div", { class: "zonos--group-btn" }, !isPaypalTabSelected && (index.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 }, cart.translate('Pay [orderTotal]', {
             orderTotal: cart.currencyFormat({
                 amount: cart.cartStore.total,
                 currency: cart.cartStore.currency,
             }),
-        })), hasPaypalEnabled && (index.h("zonos-text", { type: "smallHeader" }, cart.translate('or'))), index.h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
+        }))), index.h("zonos-paypal-payment", { onPaypalSessionDone: ({ detail: { orderId } }) => {
                 this.paypalSessionDone.emit(orderId);
-            }, onPaypalSessionFail: () => this.paypalSessionFailed.emit() })), isTestMode && (index.h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, index.h("zonos-v-stack", { spacing: 16 }, index.h("div", null, index.h("zonos-text", { type: "semiBoldLabel" }, cart.translate('Test cards')), index.h("zonos-text", { textColor: "gray-700" }, cart.translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), index.h("zonos-button", { icon: index.h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, cart.translate('Success'), " (****4242)"), index.h("zonos-button", { icon: index.h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, cart.translate('Failure'), " (****0002)")), index.h("zonos-notification", null))))));
+            }, onPaypalSessionFail: () => this.paypalSessionFailed.emit(), style: {
+                display: isPaypalTabSelected ? 'block' : 'none',
+            } })), isTestMode && (index.h("zonos-card", { backgroundColor: "gray-100", borderRadius: 12, class: "zonos--test-cards" }, index.h("zonos-v-stack", { spacing: 16 }, index.h("div", null, index.h("zonos-text", { type: "semiBoldLabel" }, cart.translate('Test cards')), index.h("zonos-text", { textColor: "gray-700" }, cart.translate('Click to copy the card number. Use any future expiration date and three number CVC.'))), index.h("zonos-button", { icon: index.h("zonos-icon", { content: CheckmarkLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4242424242424242') }, cart.translate('Success'), " (****4242)"), index.h("zonos-button", { icon: index.h("zonos-icon", { content: RemoveLineIcon }), justifyContent: "flex-start", onClick: () => this.copyCardToClipboard('4000000000000002') }, cart.translate('Failure'), " (****0002)")), index.h("zonos-notification", null))))));
     }
 };
 ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
@@ -576,9 +587,14 @@ const getContrastColor = ({ backgroundColor, color, }) => {
     if (isDarkColor.isDarkColor(color)) {
         return '#ffffff';
     }
-    else {
-        return isDarkColor.tinycolor(color).darken(25).toHexString();
-    }
+    const newDarkerColor = isDarkColor.tinycolor(color).darken(25).toHexString();
+    const newLigherColor = isDarkColor.tinycolor(color).lighten(25).toHexString();
+    // get readibility of the color
+    const isNewColorContrastEnough = paypal.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">
@@ -1069,7 +1085,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 {
@@ -1212,12 +1228,13 @@ const ZonosShipping = class {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (index.h(index.Host, { key: 'e376545666893a373bca1591083a868892804fb1', class: "zonos--shipping zonos--elements" }, index.h("div", { key: 'f8901d3d8fbeb6a285a7a33b9cea940476413c68', class: "zonos--group" }, index.h("zonos-text", { key: '83e02010c5e11647064ebf28468def163dd3395a', class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Delivery options')), this.showErrorBanner && !!allServiceLevels.length && (index.h("zonos-banner", { key: 'e65f0ce2e968612bd7c1efeca8309e69a03a8c65', class: "zonos--error-banner", intent: "error" }, cart.translate('No shipping method selected'))), index.h("zonos-text", { key: 'cdae794614c6879477e96de435d5c4e59f469fe9', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.translate('Shipping method')), !allServiceLevels.length ? (index.h("zonos-banner", { bannerTitle: cart.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" })) : (index.h("div", { class: "zonos--shipping-options-wrapper" }, index.h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !defaultShownServiceLevels.length && (index.h("button", { class: classes.classes([
+        return (index.h(index.Host, { key: 'e376545666893a373bca1591083a868892804fb1', class: "zonos--shipping zonos--elements" }, index.h("div", { key: 'f8901d3d8fbeb6a285a7a33b9cea940476413c68', class: "zonos--group" }, index.h("zonos-text", { key: '83e02010c5e11647064ebf28468def163dd3395a', class: "zonos--title", type: "semiBoldSubheader" }, cart.translate('Delivery options')), this.showErrorBanner && !!allServiceLevels.length && (index.h("zonos-banner", { key: 'e65f0ce2e968612bd7c1efeca8309e69a03a8c65', class: "zonos--error-banner", intent: "error" }, cart.translate('No shipping method selected'))), index.h("zonos-text", { key: 'cdae794614c6879477e96de435d5c4e59f469fe9', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, cart.translate('Shipping method')), !allServiceLevels.length ? (index.h("zonos-banner", { bannerTitle: cart.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" })) : (index.h("div", { class: "zonos--shipping-options-wrapper" }, index.h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), (!!this.serviceLevelsDAP.length ||
+            !defaultShownServiceLevels.length) && (index.h("button", { class: classes.classes([
                 'zonos--shipping-options-collapse-trigger',
                 this.collapsedDAPOptions && 'collapsed',
             ]), onClick: () => {
                 this.collapsedDAPOptions = !this.collapsedDAPOptions;
-            } }, index.h("div", { class: "zonos--title-wrapper" }, index.h("zonos-text", { type: "label" }, `${cart.translate(this.collapsedDAPOptions ? 'Show non prepaid methods' : 'Hide non prepaid methods')} `), index.h("zonos-icon", { content: ChevronUpIcon })))), index.h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, index.h("div", { class: "zonos--dap-wrapper" }, index.h("zonos-banner", { bannerTitle: cart.translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, cart.translate('You may incur additional fees from the shipping carrier by not prepaying.')), index.h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), index.h("div", { key: 'e6ec0a7cc6d2e4930fbca92337670962d2d0cff8', class: "zonos--group-btn" }, index.h("zonos-button", { key: '8586e3fd283e11c1928ccd17e4ef59bf191138e7', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+            } }, index.h("div", { class: "zonos--title-wrapper" }, index.h("zonos-text", { type: "label" }, `${cart.translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), index.h("zonos-icon", { content: ChevronUpIcon })))), index.h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, index.h("div", { class: "zonos--dap-wrapper" }, index.h("zonos-banner", { bannerTitle: cart.translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, cart.translate('You may incur additional fees from the shipping carrier by not prepaying.')), index.h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), index.h("div", { key: 'fdc7807bc26ec718cb51e23dbb9e4ccf286e6d91', class: "zonos--group-btn" }, index.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 }, cart.translate('Go to payment'))))));
     }

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-a06f18e2.js');
-const paypal = require('./paypal-078f3cef.js');
+const cart = require('./cart-fc426d98.js');
+const paypal = require('./paypal-1fe5ed0c.js');
 const zonosStore = require('./zonosStore-a4395972.js');
-const createCustomEvent = require('./createCustomEvent-8d9cf9ac.js');
+const createCustomEvent = require('./createCustomEvent-354c8e63.js');
 const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const classes = require('./classes-b7918f56.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-fc426d98.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 require('./isDarkColor-5efc8367.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-fc426d98.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const classes = require('./classes-b7918f56.js');
 require('./handleFetch-45e76490.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-fc426d98.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');
 const isDarkColor = require('./isDarkColor-5efc8367.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-fc426d98.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const classes = require('./classes-b7918f56.js');
 const formatStringWithLinks = require('./formatStringWithLinks-52341fc7.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
 const zonosStore = require('./zonosStore-a4395972.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-fc426d98.js');
 const classes = require('./classes-b7918f56.js');
 const handleFetch = require('./handleFetch-45e76490.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d56e0a8b.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-fc426d98.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const ILanguage = require('./ILanguage-98b04442.js');
 require('./handleFetch-45e76490.js');

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d56e0a8b.js');
 const zonosStore = require('./zonosStore-a4395972.js');
 const classes = require('./classes-b7918f56.js');
-const cart = require('./cart-a06f18e2.js');
+const cart = require('./cart-fc426d98.js');
 const handleFetch = require('./handleFetch-45e76490.js');
-const paypal = require('./paypal-078f3cef.js');
+const paypal = require('./paypal-1fe5ed0c.js');
 require('./isDarkColor-5efc8367.js');
 require('./getBorderRadius-5a64574c.js');
 
@@ -91,7 +91,7 @@ const ZonosPayment = class {
         // Create and mount the Authentication Element in ${type} mode
         const paymentElement = cart.stripeStore.stripePaymentElement ||
             this.stripeElements.create('payment', {
-                layout: 'accordion',
+                layout: 'tabs',
             });
         const paymentElementContainer = this.el.querySelector('.zonos--payment-component');
         if (!paymentElementContainer) {
@@ -110,7 +110,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 (index.h(index.Host, { key: 'c461a967d00b2d96fa70aaaf1651b435cdcd84bd', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '44da1d89ce19f7174cad1214ab9463f0b1174c0d', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: 'b9e3491b48d9ede19a5cdef639bd47e6bf0ba742', class: "zonos--payment-component" }), index.h("div", { key: '578516ce1ca1dc01eebb2268bb5449613e14298f', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: 'cf616ec959fd1b7396ed86b23561f459e0da8722', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: 'e5564db71ba2c0d67d372cb1804d6d462cdf1b33', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '3ea47f2c0a541590210d181bc73ecb3fb27e7783', class: "zonos--payment-component" }), index.h("div", { key: 'd3a46a127448568caf4309806e88556594075c12', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.js

@@ -13,11 +13,13 @@ export class ZonosCartItems {
         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,
             })))));

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.js

@@ -42,6 +42,7 @@ export class ZonosCheckoutPayment {
         this.showErrorBanner = false;
     }
     render() {
+        var _a;
         if (!stripeStore.stripeElements) {
             return null;
         }
@@ -51,16 +52,24 @@ export class ZonosCheckoutPayment {
         }
         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))))));
     }
     static get is() { return "zonos-checkout-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.css

@@ -77,6 +77,7 @@
   display: flex;
   justify-content: center;
   bottom: 0;
+  z-index: 1;
   margin-top: 12px;
   background: var(--primary-color, var(--zonos-elements-gray-0));
 }
@@ -93,7 +94,7 @@
   flex-direction: row;
   gap: 24px;
   align-items: center;
-  background: var(--zonos-elements-gray-0);
+  background: transparent;
   width: 100%;
   border: none;
   cursor: pointer;

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js

@@ -146,12 +146,13 @@ export class ZonosShipping {
         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/collection/components/store/checkout/stripe.js

@@ -66,6 +66,7 @@ const getStripeOptions = ({ clientSecret, overrideBorderRadius, overridePrimaryC
             }),
         },
         clientSecret,
+        externalPaymentMethodTypes: ['external_paypal'],
         locale: localizationStore.selectedLocale,
     };
 };

package/dist/collection/components/store/hello/localization.js

@@ -210,7 +210,7 @@ const initLocalizationStore = async () => {
     if (!localizationStore.selectedCountryCode &&
         devSites.some(site => window.location.origin.includes(site))) {
         // update selected country code in store
-        localizationStoreUpdateSelectedCountryCode('US');
+        localizationStoreUpdateSelectedCountryCode('CA');
     }
     localizationStore.localizationLoaded = true;
 };

package/dist/collection/components/store/translationStore/strings.arabic.js

@@ -137,8 +137,8 @@ export const stringsArabic = {
     Hide: {
         value: 'اخفِ',
     },
-    'Hide non prepaid methods': {
-        value: 'إخفاء الطرق غير المدفوعة مسبقًا',
+    'Hide non-prepaid options': {
+        value: 'إخفاء الخيارات غير المدفوعة مسبقًا',
     },
     'Invalid promo code': {
         value: 'رمز ترويجي غير صالح',
@@ -284,8 +284,8 @@ export const stringsArabic = {
     Show: {
         value: 'عرض',
     },
-    'Show non prepaid methods': {
-        value: 'عرض طرق غير مدفوعة مسبقًا',
+    'Show non-prepaid options': {
+        value: 'عرض الخيارات غير المدفوعة مسبقًا',
     },
     'Something went wrong.': {
         value: 'حدث خطأ ما.',
@@ -386,9 +386,6 @@ export const stringsArabic = {
     days: {
         value: 'أيام',
     },
-    or: {
-        value: 'أو',
-    },
     'restricted items': {
         value: 'عناصر مقيدة',
     },

package/dist/collection/components/store/translationStore/strings.base.js

@@ -137,8 +137,8 @@ export const stringsBase = {
     Hide: {
         value: 'Hide',
     },
-    'Hide non prepaid methods': {
-        value: 'Hide non prepaid methods',
+    'Hide non-prepaid options': {
+        value: 'Hide non-prepaid options',
     },
     'Invalid promo code': {
         value: 'Invalid promo code',
@@ -284,8 +284,8 @@ export const stringsBase = {
     Show: {
         value: 'Show',
     },
-    'Show non prepaid methods': {
-        value: 'Show non prepaid methods',
+    'Show non-prepaid options': {
+        value: 'Show non-prepaid options',
     },
     'Something went wrong.': {
         value: 'Something went wrong.',
@@ -386,9 +386,6 @@ export const stringsBase = {
     days: {
         value: 'days',
     },
-    or: {
-        value: 'or',
-    },
     'restricted items': {
         value: 'restricted items',
     },

package/dist/collection/components/store/translationStore/strings.chinese.js

@@ -137,8 +137,8 @@ export const stringsChinese = {
     Hide: {
         value: '隐藏',
     },
-    'Hide non prepaid methods': {
-        value: '隐藏非预付费方法',
+    'Hide non-prepaid options': {
+        value: '隐藏非预付选项',
     },
     'Invalid promo code': {
         value: '无效的促销代码',
@@ -284,8 +284,8 @@ export const stringsChinese = {
     Show: {
         value: '显示',
     },
-    'Show non prepaid methods': {
-        value: '显示非预付费方法',
+    'Show non-prepaid options': {
+        value: '显示非预付选项',
     },
     'Something went wrong.': {
         value: '出了些问题。',
@@ -386,9 +386,6 @@ export const stringsChinese = {
     days: {
         value: '天',
     },
-    or: {
-        value: '或',
-    },
     'restricted items': {
         value: '限制物品',
     },

package/dist/collection/components/store/translationStore/strings.danish.js

@@ -137,8 +137,8 @@ export const stringsDanish = {
     Hide: {
         value: 'Skjul',
     },
-    'Hide non prepaid methods': {
-        value: 'Skjul ikke-forudbetalte metoder',
+    'Hide non-prepaid options': {
+        value: 'Skjul ikke-forudbetalte muligheder',
     },
     'Invalid promo code': {
         value: 'Ugyldig kampagnekode',
@@ -284,8 +284,8 @@ export const stringsDanish = {
     Show: {
         value: 'Vis',
     },
-    'Show non prepaid methods': {
-        value: 'Vis ikke forudbetalte metoder',
+    'Show non-prepaid options': {
+        value: 'Vis ikke-forudbetalte muligheder',
     },
     'Something went wrong.': {
         value: 'Noget gik galt.',
@@ -386,9 +386,6 @@ export const stringsDanish = {
     days: {
         value: 'dage',
     },
-    or: {
-        value: 'eller',
-    },
     'restricted items': {
         value: 'begrænsede genstande',
     },

package/dist/collection/components/store/translationStore/strings.dutch.js

@@ -137,8 +137,8 @@ export const stringsDutch = {
     Hide: {
         value: 'Verbergen',
     },
-    'Hide non prepaid methods': {
-        value: 'Verberg niet-voorafbetaalde methoden',
+    'Hide non-prepaid options': {
+        value: 'Verberg niet-vooruitbetaalde opties',
     },
     'Invalid promo code': {
         value: 'Ongeldige promotiecode',
@@ -284,8 +284,8 @@ export const stringsDutch = {
     Show: {
         value: 'Tonen',
     },
-    'Show non prepaid methods': {
-        value: 'Toon niet-vooruitbetaalde methoden',
+    'Show non-prepaid options': {
+        value: 'Toon niet-vooruitbetaalde opties',
     },
     'Something went wrong.': {
         value: 'Er is iets misgegaan.',
@@ -386,9 +386,6 @@ export const stringsDutch = {
     days: {
         value: 'dagen',
     },
-    or: {
-        value: 'of',
-    },
     'restricted items': {
         value: 'beperkte items',
     },