@zonos/elements 1.3.17 → 1.3.18-alpha.1

package/dist/components/zonos-cart-items2.js

@@ -17,7 +17,8 @@ const ZonosCartItems = /*@__PURE__*/ proxyCustomElement(class ZonosCartItems ext
         var _a;
         const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
         const rate = ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
-        return (h(Host, { key: 'e2d53d541a342f816efe95f3a0b5551ea7f95e38', class: "zonos--cart-items zonos--elements" }, h("table", { key: 'f2dbf582004f7db5947e55b5b93f1437dc9d2a95', class: "zonos--cart-table" }, h("tbody", { key: 'a9948cbeb5ad9886d582e518d3bbe0ab9c5dda9d' }, cartStore.items.map(item => {
+        const nonRestrictedItems = cartStore.items.filter(item => !item.isRestricted);
+        return (h(Host, { key: '2dc2189f79fe59260a9fcd8a61142ab628ff7f57', class: "zonos--cart-items zonos--elements" }, h("table", { key: 'd354007fffb5afa397038f319571e83c3fb3ad65', class: "zonos--cart-table" }, h("tbody", { key: '5f31a21b612495ee583650cbd71614cc10a799cc' }, nonRestrictedItems.map(item => {
             const itemImg = item.imageUrl;
             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];

package/dist/components/zonos-cart-restricted-items.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ZonosCartRestrictedItems extends Components.ZonosCartRestrictedItems, HTMLElement {}
+export const ZonosCartRestrictedItems: {
+    prototype: ZonosCartRestrictedItems;
+    new (): ZonosCartRestrictedItems;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/zonos-cart-restricted-items.js

@@ -0,0 +1,6 @@
+import { Z as ZonosCartRestrictedItems$1, d as defineCustomElement$1 } from './zonos-cart-restricted-items2.js';
+
+const ZonosCartRestrictedItems = ZonosCartRestrictedItems$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ZonosCartRestrictedItems, defineCustomElement };

package/dist/components/zonos-cart-restricted-items2.js

@@ -0,0 +1,135 @@
+import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
+import { b as cartStoreHasOneEligibleItem, c as cartStore } from './stripe.js';
+import { a as translate } from './translationStore.js';
+import { c as classes } from './classes.js';
+import { f as formatCurrency } from './formatCurrency.js';
+import { d as defineCustomElement$4 } from './zonos-banner2.js';
+import { d as defineCustomElement$3 } from './zonos-collapse2.js';
+import { d as defineCustomElement$2 } from './zonos-icon2.js';
+import { d as defineCustomElement$1 } from './zonos-text2.js';
+
+const ChevronUpIcon = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_2052_3658)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.46967 14.5303C7.76256 14.8232 8.23744 14.8232 8.53033 14.5303L12.5 10.5607L16.4697 14.5303C16.7626 14.8232 17.2374 14.8232 17.5303 14.5303C17.8232 14.2374 17.8232 13.7626 17.5303 13.4697L13.0303 8.96967C12.7374 8.67678 12.2626 8.67678 11.9697 8.96967L7.46967 13.4697C7.17678 13.7626 7.17678 14.2374 7.46967 14.5303Z" fill="currentColor"/>
+</g>
+<defs>
+<filter id="filter0_dd_2052_3658" x="-3.5" y="-2" width="32" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2052_3658"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_2052_3658" result="effect2_dropShadow_2052_3658"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_2052_3658" result="shape"/>
+</filter>
+</defs>
+</svg>
+`;
+
+const zonosCartRestrictedItemsCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{overflow:auto;position:relative}:host zonos-banner{margin-bottom:12px}:host .zonos--cart-title-collapse-trigger{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;margin-bottom:16px;position:-webkit-sticky;position:sticky;top:0;z-index:1;-webkit-transition:0.5s all ease;transition:0.5s all ease}:host .zonos--cart-title-collapse-trigger zonos-icon{-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}:host .zonos--cart-title-collapse-trigger.collapsed{margin-bottom:0}:host .zonos--cart-title-collapse-trigger.collapsed zonos-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host .zonos--cart-title-collapse-trigger::before,:host .zonos--cart-title-collapse-trigger::after{content:\"\";display:block;width:80%;height:1px;background-color:var(--zonos-elements-border-color);-ms-flex-negative:1;flex-shrink:1}:host .zonos--cart-title-collapse-trigger .zonos--title-wrapper{-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}:host .zonos--cart-table{opacity:0.5;width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:8px;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host img{min-width:40px}:host(.collapsed){-ms-flex-negative:0;flex-shrink:0}";
+const ZonosCartRestrictedItemsStyle0 = zonosCartRestrictedItemsCss;
+
+const ZonosCartRestrictedItems = /*@__PURE__*/ proxyCustomElement(class ZonosCartRestrictedItems extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hide = false;
+        this.errorImages = [];
+        this.internalCollapsed = true;
+        this.firstRender = true;
+    }
+    componentDidLoad() {
+        // Reset if it's first render
+        this.firstRender = true;
+    }
+    render() {
+        var _a;
+        const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
+        const rate = ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
+        const restrictedItemTotal = cartStore.restrictedItems.length;
+        if (this.hide || restrictedItemTotal === 0) {
+            // show nothing if the parent is collapsed or no restricted items
+            return null;
+        }
+        if (this.firstRender) {
+            // Auto expand if all items are restricted
+            this.internalCollapsed = cartStoreHasOneEligibleItem();
+            this.firstRender = false;
+        }
+        return (h(Host, { class: classes([
+                'zonos--cart-restricted-items',
+                'zonos--elements',
+                this.internalCollapsed && 'collapsed',
+            ]) }, h("button", { class: classes([
+                'zonos--cart-title-collapse-trigger',
+                this.internalCollapsed && 'collapsed',
+            ]), onClick: () => {
+                this.internalCollapsed = !this.internalCollapsed;
+            } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { textColor: "red-600", type: "label" }, `${translate(this.internalCollapsed ? 'Show' : 'Hide')} ${restrictedItemTotal} ${translate('restricted items')}`), h("zonos-icon", { content: ChevronUpIcon, iconColor: "red-600" }))), h("zonos-collapse", { collapsed: this.internalCollapsed }, h("zonos-banner", { bannerTitle: translate('The following items are unable to be shipped to your country and are not included in your cart total.'), intent: "error" }), h("table", { class: "zonos--cart-table" }, h("tbody", null, cartStore.restrictedItems.map((item, index) => {
+            var _a, _b;
+            const itemImg = item.imageUrl;
+            return (h("tr", { class: "zonos--cart-item" }, h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (h("img", { alt: 
+                // Use matched item name if available
+                ((_a = item.matchedItem) === null || _a === void 0 ? void 0 : _a.name) ||
+                    item.name ||
+                    `Restricted item ${index + 1}`, onError: () => {
+                    this.errorImages = [...this.errorImages, itemImg];
+                }, src: itemImg, style: {
+                    'min-width': '40px',
+                }, width: 40 })) : (h("img", { alt: item.name || `Restricted item ${index + 1}`, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, ((_b = item.matchedItem) === null || _b === void 0 ? void 0 : _b.name) || item.name), h("zonos-text", { type: "caption" }, item.restriction.reason)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+                amount: item.amount * item.quantity * rate,
+                currency: cartStore.currency,
+            })))));
+        }))))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get style() { return ZonosCartRestrictedItemsStyle0; }
+}, [1, "zonos-cart-restricted-items", {
+        "hide": [4],
+        "errorImages": [32],
+        "internalCollapsed": [32],
+        "firstRender": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-cart-restricted-items", "zonos-banner", "zonos-collapse", "zonos-icon", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-cart-restricted-items":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosCartRestrictedItems);
+            }
+            break;
+        case "zonos-banner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "zonos-collapse":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { ZonosCartRestrictedItems as Z, defineCustomElement as d };

package/dist/components/zonos-cart-subtotal2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { c as cartStore } from './stripe.js';
+import { b as cartStoreHasOneEligibleItem, c as cartStore } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { f as formatCurrency } from './formatCurrency.js';
 import { d as defineCustomElement$4 } from './zonos-badge2.js';
@@ -24,6 +24,9 @@ const ZonosCartSubtotal = /*@__PURE__*/ proxyCustomElement(class ZonosCartSubtot
     }
     render() {
         const showDutyTaxesInfo = cartStore.step === 'payment' || cartStore.step === 'shipping';
+        // Show 0 for subtotal and total when all items are restricted
+        const total = cartStoreHasOneEligibleItem() ? cartStore.total : 0;
+        const subtotal = cartStoreHasOneEligibleItem() ? cartStore.subtotal : 0;
         const renderShippingInfo = () => {
             if (!cartStore.selectedShippingOption) {
                 return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Shipping')), h("zonos-text", { class: "zonos--caption", type: "caption" }, translate('No shipping method selected'))));
@@ -31,7 +34,7 @@ const ZonosCartSubtotal = /*@__PURE__*/ proxyCustomElement(class ZonosCartSubtot
             return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cartStore.selectedShippingOption.displayName), cartStore.selectedShippingOptionTransitTime && (h("zonos-text", { class: "zonos--caption", type: "caption" }, cartStore.selectedShippingOptionTransitTime, ' ', translate('business days')))));
         };
         return (h(Host, { class: "zonos--cart-subtotal zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tr", { class: "zonos--row zonos--cart-subtotal" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Cart subtotal'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
-            amount: cartStore.subtotal,
+            amount: subtotal,
             currency: cartStore.currency,
         })))), h("tr", { class: "zonos--row zonos--cart-shipping" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, renderShippingInfo()), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cartStore.shipping
             ? formatCurrency({
@@ -44,7 +47,7 @@ const ZonosCartSubtotal = /*@__PURE__*/ proxyCustomElement(class ZonosCartSubtot
                 currency: cartStore.currency,
             })
             : '-', cartStore.isSelectedShippingGuarantee && (h("zonos-badge", null, translate('Guaranteed'))))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
-            amount: cartStore.total,
+            amount: total,
             currency: cartStore.currency,
         })))))));
     }

package/dist/components/zonos-checkout-finish2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { u as handleFetch, r as stripeStoreReset, c as cartStore, s as stripeStore, v as stripeStoreRetrievePayment } from './stripe.js';
+import { v as handleFetch, t as stripeStoreReset, c as cartStore, s as stripeStore, w as stripeStoreRetrievePayment } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { z as zonosStore } from './zonosStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';

package/dist/components/zonos-checkout-payment2.js

@@ -9,7 +9,7 @@ import { d as defineCustomElement$3 } from './zonos-payment2.js';
 import { d as defineCustomElement$2 } from './zonos-spinner2.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
-const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-payment-h *.sc-zonos-checkout-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:24px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:20px;overflow:auto;padding:5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:8px}.sc-zonos-checkout-payment-h .zonos--error-banner.sc-zonos-checkout-payment{margin-bottom:16px}.sc-zonos-checkout-payment-h zonos-button.sc-zonos-checkout-payment{-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-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment{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-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-button.sc-zonos-checkout-payment{width:100%}";
+const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-payment-h *.sc-zonos-checkout-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:24px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:20px;overflow:auto;padding:5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:8px}.sc-zonos-checkout-payment-h .zonos--error-banner.sc-zonos-checkout-payment{margin-bottom:16px}.sc-zonos-checkout-payment-h zonos-button.sc-zonos-checkout-payment{-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-checkout-payment-h zonos-button.sc-zonos-checkout-payment{-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-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment{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-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-button.sc-zonos-checkout-payment{width:100%}";
 const ZonosCheckoutPaymentStyle0 = zonosCheckoutPaymentCss;
 
 const ZonosCheckoutPayment = /*@__PURE__*/ proxyCustomElement(class ZonosCheckoutPayment extends HTMLElement {

package/dist/components/zonos-checkout.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { a as localizationStore, b as log, d as stripeStoreGetDomesticShippingSession, e as localizationStoreUpdateSelectedCountryCode, f as stripeStoreCleanupDomesticShippingSession, l as logError, g as stripeStoreSaveDomesticShippingSession, i as initStripeElements, c as cartStore, h as cartStoreUpdateItems, j as cartStoreReset, k as cartStoreResetTabItems, s as stripeStore, m as stripeStoreInitCheckoutSession, n as cartStoreUpdateToErrorState, o as stripeStorePrefetchLandedCost, p as cartStoreNextStep, q as stripeStoreConfirmPayment, r as stripeStoreReset, t as localizationStoreOnUpdate } from './stripe.js';
+import { a as localizationStore, d as log, e as stripeStoreGetDomesticShippingSession, f as localizationStoreUpdateSelectedCountryCode, g as stripeStoreCleanupDomesticShippingSession, l as logError, h as stripeStoreSaveDomesticShippingSession, i as initStripeElements, c as cartStore, j as cartStoreUpdateItems, k as cartStoreReset, m as cartStoreResetTabItems, s as stripeStore, n as stripeStoreInitCheckoutSession, o as cartStoreUpdateToErrorState, p as stripeStorePrefetchLandedCost, q as cartStoreNextStep, r as stripeStoreConfirmPayment, t as stripeStoreReset, u as localizationStoreOnUpdate } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
@@ -9,15 +9,16 @@ import { c as classes } from './classes.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { i as isDarkColor } from './isDarkColor.js';
 import { s as submitGtag } from './submitGtag.js';
-import { R as RemoveIcon, d as defineCustomElement$v } from './zonos-address-update-dialog2.js';
-import { d as defineCustomElement$y } from './zonos-address2.js';
-import { d as defineCustomElement$x } from './zonos-address-display2.js';
-import { d as defineCustomElement$w } from './zonos-address-form2.js';
-import { d as defineCustomElement$u } from './zonos-badge2.js';
-import { d as defineCustomElement$t } from './zonos-banner2.js';
-import { d as defineCustomElement$s } from './zonos-button2.js';
-import { d as defineCustomElement$r } from './zonos-card2.js';
-import { d as defineCustomElement$q } from './zonos-cart-items2.js';
+import { R as RemoveIcon, d as defineCustomElement$w } from './zonos-address-update-dialog2.js';
+import { d as defineCustomElement$z } from './zonos-address2.js';
+import { d as defineCustomElement$y } from './zonos-address-display2.js';
+import { d as defineCustomElement$x } from './zonos-address-form2.js';
+import { d as defineCustomElement$v } from './zonos-badge2.js';
+import { d as defineCustomElement$u } from './zonos-banner2.js';
+import { d as defineCustomElement$t } from './zonos-button2.js';
+import { d as defineCustomElement$s } from './zonos-card2.js';
+import { d as defineCustomElement$r } from './zonos-cart-items2.js';
+import { d as defineCustomElement$q } from './zonos-cart-restricted-items2.js';
 import { d as defineCustomElement$p } from './zonos-cart-subtotal2.js';
 import { d as defineCustomElement$o } from './zonos-checkbox2.js';
 import { d as defineCustomElement$m } from './zonos-checkout-footer2.js';
@@ -317,7 +318,7 @@ const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
 </svg>
 `;
 
-const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-h *.sc-zonos-checkout{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--zonos-elements-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:32px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--zonos-elements-gray-0));border-right:1px solid var(--zonos-elements-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--zonos-elements-gray-0)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--zonos-elements-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 8px 8px}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:24px}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:24px;top:24px;z-index:2}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:76px;margin-bottom:8px}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--zonos-elements-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:32px}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:12px;padding-bottom:76px}@media (max-width: 768px){.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding-bottom:0px}}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2;border-right:none}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:16px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border:var(--zonos-elements-border);border-radius:var(--border-radius, var(--zonos-elements-radius-10));background-color:var(--zonos-elements-gray-50);padding:12px;margin-top:32px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--review.sc-zonos-checkout{margin-bottom:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--cart-items.sc-zonos-checkout{margin-top:8px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout zonos-checkout-footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}";
+const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-h *.sc-zonos-checkout{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--border-radius, var(--zonos-elements-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:32px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--zonos-elements-gray-0));border-right:1px solid var(--zonos-elements-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--zonos-elements-gray-0)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--zonos-elements-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout img.sc-zonos-checkout{width:150px;min-width:150px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 8px 8px}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:24px}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--close-button.sc-zonos-checkout{position:absolute;right:24px;top:24px;z-index:2}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:76px;margin-bottom:8px}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--zonos-elements-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:32px}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:12px;padding-bottom:76px}@media (max-width: 768px){.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding-bottom:0}}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2;border-right:none}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:16px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border:var(--zonos-elements-border);border-radius:var(--border-radius, var(--zonos-elements-radius-10));background-color:var(--zonos-elements-gray-50);padding:12px;margin-top:32px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--review.sc-zonos-checkout{margin-bottom:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--cart-items.sc-zonos-checkout{margin-top:8px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout zonos-checkout-footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}";
 const ZonosCheckoutStyle0 = zonosCheckoutCss;
 
 const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout extends HTMLElement {
@@ -780,7 +781,7 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
                 } }), h("zonos-collapse", {
                 // only collapsible on mobile
                 collapsed: this.collapseReviewMobile && this.isMobile
-            }, h("zonos-cart-items", null), this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), !this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
+            }, h("zonos-cart-items", null), this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), h("zonos-cart-restricted-items", null), !this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
                     ? Object.assign(Object.assign({}, cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride }))), h("zonos-checkout-footer", { "data-theme": rightSideTheme, mobile: this.isMobile,
                 /**
                  * For this component, use slot instead of passing JSX through prop of other component. Because
@@ -831,7 +832,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zonos-checkout", "zonos-address", "zonos-address-display", "zonos-address-form", "zonos-address-update-dialog", "zonos-badge", "zonos-banner", "zonos-button", "zonos-card", "zonos-cart-items", "zonos-cart-subtotal", "zonos-checkbox", "zonos-checkout-finish", "zonos-checkout-footer", "zonos-checkout-payment", "zonos-checkout-progress-tabs", "zonos-collapse", "zonos-country-flag", "zonos-custom-message", "zonos-customer-info", "zonos-dialog", "zonos-icon", "zonos-input", "zonos-language-select", "zonos-link-authentication", "zonos-payment", "zonos-review", "zonos-select-dialog-header", "zonos-shipping", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text", "zonos-tooltip", "zonos-v-stack"];
+    const components = ["zonos-checkout", "zonos-address", "zonos-address-display", "zonos-address-form", "zonos-address-update-dialog", "zonos-badge", "zonos-banner", "zonos-button", "zonos-card", "zonos-cart-items", "zonos-cart-restricted-items", "zonos-cart-subtotal", "zonos-checkbox", "zonos-checkout-finish", "zonos-checkout-footer", "zonos-checkout-payment", "zonos-checkout-progress-tabs", "zonos-collapse", "zonos-country-flag", "zonos-custom-message", "zonos-customer-info", "zonos-dialog", "zonos-icon", "zonos-input", "zonos-language-select", "zonos-link-authentication", "zonos-payment", "zonos-review", "zonos-select-dialog-header", "zonos-shipping", "zonos-shipping-rich-radio", "zonos-spinner", "zonos-text", "zonos-tooltip", "zonos-v-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "zonos-checkout":
             if (!customElements.get(tagName)) {
@@ -840,45 +841,50 @@ function defineCustomElement$1() {
             break;
         case "zonos-address":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$z();
             }
             break;
         case "zonos-address-display":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$y();
             }
             break;
         case "zonos-address-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$x();
             }
             break;
         case "zonos-address-update-dialog":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "zonos-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "zonos-banner":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "zonos-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "zonos-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "zonos-cart-items":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$r();
+            }
+            break;
+        case "zonos-cart-restricted-items":
             if (!customElements.get(tagName)) {
                 defineCustomElement$q();
             }

package/dist/components/zonos-controller.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { u as handleFetch, l as logError, A as isValidSelector, b as log, s as stripeStore, B as initLocalizationStore, e as localizationStoreUpdateSelectedCountryCode } from './stripe.js';
+import { v as handleFetch, l as logError, B as isValidSelector, d as log, s as stripeStore, C as initLocalizationStore, f as localizationStoreUpdateSelectedCountryCode } from './stripe.js';
 import { z as zonosStore, d as zonosStoreInitSetting, a as zonosStoreFontFamily } from './zonosStore.js';
 import { d as defineCustomElement$3 } from './zonos-notification2.js';
 import { d as defineCustomElement$2 } from './zonos-text2.js';

package/dist/components/zonos-country-select2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { e as localizationStoreUpdateSelectedCountryCode, a as localizationStore } from './stripe.js';
+import { f as localizationStoreUpdateSelectedCountryCode, a as localizationStore } from './stripe.js';
 import { a as zonosStoreFontFamily } from './zonosStore.js';
 import { d as defineCustomElement$7 } from './zonos-button2.js';
 import { d as defineCustomElement$6 } from './zonos-country-flag2.js';

package/dist/components/zonos-customer-info2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as stripeStore, w as stripeStoreTranslateAddressToLatin } from './stripe.js';
+import { s as stripeStore, x as stripeStoreTranslateAddressToLatin } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { z as zonosStore, g as getZonosStoreTheme } from './zonosStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
@@ -137,6 +137,8 @@ const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerIn
         this.isMobile = false;
         this.defaultAddress = null;
         this.showErrorBanner = false;
+        this.shippingCountry = '';
+        this.isCheckingForRestrictedItems = false;
         this.isValidatingAddress = false;
         this.invalidShippingCharacterList = null;
         this.invalidBillingCharacterList = null;
@@ -168,10 +170,22 @@ const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerIn
         return invalidList;
     }
     render() {
-        var _a;
+        var _a, _b;
         if (!stripeStore.stripeElements) {
             return null;
         }
+        // init the shipping country when shipping address is available
+        if (!this.shippingCountry && stripeStore.stripeAddressEventData) {
+            this.shippingCountry =
+                (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+        }
+        if (stripeStore.stripeAddressEventData &&
+            this.shippingCountry !==
+                stripeStore.stripeAddressEventData.value.address.country) {
+            // reset the shipping country if it's different from the current shipping address
+            this.shippingCountry =
+                stripeStore.stripeAddressEventData.value.address.country;
+        }
         const showBilling = !stripeStore.stripeShippingSameAsBilling;
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = getZonosStoreTheme(zonosStore.appearance.theme);
@@ -179,7 +193,7 @@ const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerIn
         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: (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.email, 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, 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 => {
                 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
@@ -203,6 +217,8 @@ const ZonosCustomerInfo = /*@__PURE__*/ proxyCustomElement(class ZonosCustomerIn
         "isMobile": [4, "is-mobile"],
         "defaultAddress": [16],
         "showErrorBanner": [32],
+        "shippingCountry": [32],
+        "isCheckingForRestrictedItems": [32],
         "isValidatingAddress": [32],
         "invalidShippingCharacterList": [32],
         "invalidBillingCharacterList": [32],

package/dist/components/zonos-hello-dialog2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { H as currencyFormat, a as localizationStore } from './stripe.js';
+import { I as currencyFormat, a as localizationStore } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { z as zonosStore } from './zonosStore.js';
 import { c as classes } from './classes.js';

package/dist/components/zonos-hello.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 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.js';
-import { u as handleFetch, l as logError, a as localizationStore, A as isValidSelector, C as getZCountryUrlParam, D as setZCountryUrlParam, b as log, E as currencyDisplay, F as currencyConvertAndFormat, G as currencyConvert, H as currencyFormat } from './stripe.js';
+import { v as handleFetch, l as logError, a as localizationStore, B as isValidSelector, D as getZCountryUrlParam, E as setZCountryUrlParam, d as log, F as currencyDisplay, G as currencyConvertAndFormat, H as currencyConvert, I as currencyFormat } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { c as classes } from './classes.js';
 import { g as getHasMoreSpaceOnRight, d as defineCustomElement$9 } from './zonos-hello-dialog2.js';

package/dist/components/zonos-language-select2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { x as localizationStoreUpdateSelectedLocale, a as localizationStore } from './stripe.js';
+import { y as localizationStoreUpdateSelectedLocale, a as localizationStore } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { a as zonosStoreFontFamily } from './zonosStore.js';
 import { l as languages } from './ILanguage.js';

package/dist/components/zonos-review2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as cartStore } from './stripe.js';
+import { b as cartStoreHasOneEligibleItem, c as cartStore } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { z as zonosStore } from './zonosStore.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
@@ -31,6 +31,7 @@ const ZonosReview = /*@__PURE__*/ proxyCustomElement(class ZonosReview extends H
         this.isMobile = isCheckoutMobile(this.mobile);
     }
     render() {
+        const total = cartStoreHasOneEligibleItem() ? cartStore.total : 0;
         const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';
         const totalTextType = this.isMobile
             ? 'boldSubheader'
@@ -50,7 +51,7 @@ const ZonosReview = /*@__PURE__*/ proxyCustomElement(class ZonosReview extends H
                 'zonos--review zonos--elements',
                 this.isMobile && 'mobile',
             ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, formatCurrency({
-            amount: cartStore.total,
+            amount: total,
             currency: cartStore.currency,
         })))));
     }

package/dist/components/zonos-shipping2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as cartStore, y as cartStoreUpdateSelectedShippingOption, z as cartStoreGetShippingTransitInfo } from './stripe.js';
+import { c as cartStore, z as cartStoreUpdateSelectedShippingOption, A as cartStoreGetShippingTransitInfo } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { f as formatCurrency } from './formatCurrency.js';