@zonos/elements 1.3.11-alpha.1 → 1.3.11-alpha.3

package/dist/components/zonos-checkout.js

@@ -1,9 +1,9 @@
 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, s as stripeStore, k as stripeStoreInitCheckoutSession, m as cartStoreUpdateToErrorState, t as translate, n as stripeStorePrefetchLandedCost, o as cartStoreNextStep, p as stripeStoreConfirmPayment, q as stripeStoreReset } from './stripe.js';
-import { z as zonosStore, m as mergeConfig } from './zonosStore.js';
+import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
-import { s as sendErrorLog, d as defineCustomElement$l } from './zonos-checkout-finish2.js';
+import { c as createCustomEvent, s as sendErrorLog, d as defineCustomElement$l } from './zonos-checkout-finish2.js';
 import { c as classes } from './classes.js';
 import { g as getBorderRadius } from './getBorderRadius.js';
 import { i as isDarkColor } from './isDarkColor.js';
@@ -36,12 +36,162 @@ import { d as defineCustomElement$4 } from './zonos-text2.js';
 import { d as defineCustomElement$3 } from './zonos-tooltip2.js';
 import { d as defineCustomElement$2 } from './zonos-v-stack2.js';
 
+/**
+ * This is just function to make the key typesafe to enter
+ * @returns
+ */
+const objAttribute = ({ key, value, }) => value
+    ? {
+        key,
+        value,
+    }
+    : null;
+/**
+ * Map legacy item attribute to dgs item attributes
+ * @ref https://github.com/Zonos/ShippingQuoteService/blob/f8bd4f1ff41cb34b49b9f3f435576ec28dedf906/src/main/java/com/iglobal/services/shippingquote/dto/ShippingQuoteRequestDto.java#L412
+ */
+const getAttributes = (item) => {
+    return [
+        objAttribute({
+            key: 'brand',
+            value: item.itemBrand,
+        }),
+        objAttribute({
+            key: 'material',
+            value: item.itemMaterial,
+        }),
+        objAttribute({
+            key: 'category',
+            value: item.itemCategory,
+        }),
+        objAttribute({
+            key: 'color',
+            value: item.itemColor,
+        }),
+        objAttribute({
+            key: 'customization',
+            value: item.itemCustomization,
+        }),
+        objAttribute({
+            key: 'descriptionDetailed',
+            value: item.itemDescriptionDetailed,
+        }),
+        objAttribute({
+            key: 'fabricContent',
+            value: item.itemFabricContent,
+        }),
+        objAttribute({
+            key: 'ltlClass',
+            value: item.itemLtlClass,
+        }),
+        objAttribute({
+            key: 'pickingLocation',
+            value: item.itemPickingLocation,
+        }),
+        objAttribute({
+            key: 'shipFromLocation',
+            value: item.itemShipFromLocation,
+        }),
+        objAttribute({
+            key: 'size',
+            value: item.itemSize,
+        }),
+        objAttribute({
+            key: 'status',
+            value: item.status,
+        }),
+    ].filter(Boolean);
+};
+
+/**
+ * Map legacy weight units with dgs
+ * @ref https://github.com/Zonos/ShippingQuoteService/blob/f8bd4f1ff41cb34b49b9f3f435576ec28dedf906/src/main/java/com/iglobal/services/shippingquote/dto/ShippingQuoteRequestDto.java#L483
+ */
+const getItemWeightUnit = (weightUnit) => {
+    if (!weightUnit) {
+        return 'POUND';
+    }
+    switch (weightUnit.toUpperCase()) {
+        case 'KG':
+            return 'KILOGRAM';
+        case 'OZ':
+            return 'OUNCE';
+        case 'G':
+            return 'GRAM';
+        default:
+            return 'POUND';
+    }
+};
+/**
+ * Mapping legacy measurement with dgs
+ * @ref https://github.com/Zonos/ShippingQuoteService/blob/f8bd4f1ff41cb34b49b9f3f435576ec28dedf906/src/main/java/com/iglobal/services/shippingquote/dto/ShippingQuoteRequestDto.java#L441
+ */
+const getMeasurements = (item) => {
+    if (!item) {
+        return [];
+    }
+    const measurements = [];
+    if (item.length) {
+        measurements.push({
+            type: 'LENGTH',
+            unitOfMeasure: 'INCH',
+            value: item.length,
+        });
+    }
+    if (item.width) {
+        measurements.push({
+            type: 'WIDTH',
+            unitOfMeasure: 'INCH',
+            value: item.width,
+        });
+    }
+    if (item.weight) {
+        measurements.push({
+            type: 'WEIGHT',
+            unitOfMeasure: getItemWeightUnit(item.weightUnits),
+            value: item.weight,
+        });
+    }
+    if (item.height) {
+        measurements.push({
+            type: 'HEIGHT',
+            unitOfMeasure: 'INCH',
+            value: item.height,
+        });
+    }
+    return measurements;
+};
+
+/**
+ * Map the items from tempCart like how we do it in dgs
+ * @ref https://github.com/Zonos/ShippingQuoteService/blob/f8bd4f1ff41cb34b49b9f3f435576ec28dedf906/src/main/java/com/iglobal/services/shippingquote/dto/ShippingQuoteRequestDto.java#L393
+ */
+const buildCartItemsByTempCart = (tempCartData) => {
+    var _a;
+    const tempCartItems = ((_a = tempCartData === null || tempCartData === void 0 ? void 0 : tempCartData.items) === null || _a === void 0 ? void 0 : _a.map(item => ({
+        amount: item.unitPrice || 0,
+        attributes: getAttributes(item),
+        countryOfOrigin: item.countryOfOrigin || undefined,
+        currencyCode: 'USD',
+        description: item.itemDescriptionLong || '',
+        imageUrl: item.imageURL || '',
+        itemType: 'PHYSICAL_GOOD',
+        measurements: getMeasurements(item),
+        name: item.description || '',
+        productId: item.productId || '',
+        quantity: item.quantity || 0,
+        sku: item.sku || '',
+    }))) || [];
+    return tempCartItems;
+};
+
 const isShippableCountry = (showLog = true) => {
     if (!localizationStore.localizationLoaded) {
         return false;
     }
     // if localization is loaded and the localization is not a shippable country, keep the original click event
     if (!localizationStore.isShippableCountry) {
+        document.dispatchEvent(createCustomEvent('legacyCheckoutError', 'Unable to initiate checkout process in a country where shipping is not available'));
         if (showLog) {
             log(`Checkout: not shippable country`);
         }
@@ -208,6 +358,8 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         this.zonosReviewRef = undefined;
         this.storybookPaymentStatusOverride = undefined;
         this.domesticRedirectedBtnSelector = '#zonos--domestic-redirected-checkout-button';
+        this.legacyCheckoutHiddenBtnSelector = '#legacy-checkout-hidden-button';
+        this.isLegacyCheckout = false;
     }
     /**
      * Init cart info handler event
@@ -230,7 +382,12 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         cartStore.step = 'customer-info';
     }
     async buildCartAndInit() {
-        if (zonosStore.checkoutSettings.buildCartDetail) {
+        // if tempCartUUID is provided, use it instead of buildCartDetail
+        if (window.Zonos.tempCartData) {
+            const tempCartData = buildCartItemsByTempCart(window.Zonos.tempCartData);
+            await cartStoreUpdateItems(tempCartData);
+        }
+        else if (zonosStore.checkoutSettings.buildCartDetail) {
             log('build cart detail');
             const cartItems = await zonosStore.checkoutSettings.buildCartDetail();
             await cartStoreUpdateItems(cartItems);
@@ -297,12 +454,18 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
             button.setAttribute('data-zonos-checkout-attached', 'true');
             // if this button is the hidden button, trigger the click event
             if (button.matches(this.domesticRedirectedBtnSelector)) {
-                button.dispatchEvent(new CustomEvent('click'));
+                button.dispatchEvent(createCustomEvent('click'));
                 // cleanup shipping session after button is clicked
                 stripeStoreCleanupDomesticShippingSession();
                 // remove the button after it's clicked
                 button.remove();
             }
+            if (button.matches(this.legacyCheckoutHiddenBtnSelector)) {
+                this.isLegacyCheckout = true;
+                // trigger the click event on the button
+                button.dispatchEvent(createCustomEvent('click'));
+                button.remove();
+            }
         });
     }
     appearanceSettingsOverrideChanged() {
@@ -312,6 +475,45 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         // apply theme to stripe elements
         void this.applyStripeTheme();
     }
+    /**
+     * Set default address from query param if it's valid
+     */
+    useLegacyQueryParam() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const legacyShippingInfo = {
+            country: urlParams.get('country'),
+            customerAddress1: urlParams.get('customerAddress1'),
+            customerAddress2: urlParams.get('customerAddress2'),
+            customerCity: urlParams.get('customerCity'),
+            customerEmail: urlParams.get('customerEmail'),
+            customerName: urlParams.get('customerName'),
+            customerPhone: urlParams.get('customerPhone'),
+            customerState: urlParams.get('customerState'),
+            customerZip: urlParams.get('customerZip'),
+        };
+        // if one of the value is null, no need to preset the default address
+        if (!legacyShippingInfo.customerAddress1 ||
+            !legacyShippingInfo.customerCity ||
+            !legacyShippingInfo.customerName ||
+            !legacyShippingInfo.customerPhone ||
+            !legacyShippingInfo.customerState ||
+            !legacyShippingInfo.customerZip ||
+            !legacyShippingInfo.country) {
+            return;
+        }
+        this.defaultAddress = {
+            address: {
+                city: legacyShippingInfo.customerCity,
+                country: legacyShippingInfo.country,
+                line1: legacyShippingInfo.customerAddress1,
+                line2: legacyShippingInfo.customerAddress2 || '',
+                postal_code: legacyShippingInfo.customerZip,
+                state: legacyShippingInfo.customerState,
+            },
+            name: legacyShippingInfo.customerName,
+            phone: legacyShippingInfo.customerPhone,
+        };
+    }
     /**
      * Setup all of the event listeners for the component on first load
      */
@@ -337,6 +539,12 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
                 };
             },
         });
+        /**
+         * When temp cart data is available, set default address if exist
+         */
+        if (window.Zonos.tempCartData) {
+            this.useLegacyQueryParam();
+        }
         const hideInternationalOrderInterval = setInterval(() => {
             const internationalSelector = window.Zonos.internationalHideSelector;
             if (!internationalSelector) {
@@ -455,6 +663,12 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         }
         // reset cart store
         cartStoreReset();
+        // redirect to vendor store url if this is legacy checkout.
+        if (this.isLegacyCheckout && window.Zonos.tempCartData) {
+            const contShoppingUrl = window.Zonos.tempCartData.contShoppingURL;
+            window.location.href = contShoppingUrl;
+            return;
+        }
         // reset url
         const url = window.location.href;
         // Remove query parameters
@@ -477,9 +691,18 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         void this.applyStripeTheme();
         log(`mobile: ${this.isMobile}`);
     }
+    handleAppearanceSettingsOverrideChange() {
+        var _a;
+        if ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) {
+            // update theme to browser preference theme if appearance theme is system
+            this.appearanceSettingsOverride.theme = getZonosStoreTheme(this.appearanceSettingsOverride.theme);
+        }
+    }
     componentWillLoad() {
         void this.init();
         this.isMobile = isCheckoutMobile(this.mobile);
+        // update theme to browser preference theme if appearance theme is system
+        this.handleAppearanceSettingsOverrideChange();
         log(`mobile: ${this.isMobile}`);
     }
     // do clean up when component is unmounted
@@ -512,15 +735,17 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         const localePageEnum = this.getCurrentLocalePageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === localePageEnum);
         const renderLogo = () => (h("div", { class: "zonos--logo" }, logoUrl && (h("img", { alt: `${zonosStore.organizationName} logo`, src: logoUrl, width: 100 }))));
-        const renderTopHeader = () => (h("zonos-v-stack", null, renderLogo(), h("zonos-checkout-progress-tabs", { backgroundColor: 
-            // only use different contrast color when the secondary color is too off with the background in mobile
-            this.isMobile ? '--amino-gray-0' : null }), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
+        const renderTopHeader = () => {
+            return (h("zonos-v-stack", null, renderLogo(), h("zonos-checkout-progress-tabs", { backgroundColor: 
+                // only use different contrast color when the secondary color is too off with the background in mobile
+                this.isMobile ? '--amino-gray-0' : null }), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
+        };
         const renderContent = () => {
             return (h("div", { class: 'zonos--content', style: {
                     '--border-radius': getBorderRadius(style),
                 } }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
                     '--primary-color': !this.isMobile ? colorPrimary : '',
-                } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() }), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
+                } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isLegacyCheckout && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile
                     if (!this.isMobile) {
                         return;
@@ -543,11 +768,11 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
                 hasFooter && 'has-footer',
                 this.preview && 'preview',
                 this.isMobile && 'mobile',
-            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent()))));
+            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent()))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {
-        "appearanceSettingsOverride": ["appearanceSettingsOverrideChanged"],
+        "appearanceSettingsOverride": ["appearanceSettingsOverrideChanged", "handleAppearanceSettingsOverrideChange"],
         "mobile": ["handleMobileChange"]
     }; }
     static get style() { return ZonosCheckoutStyle0; }
@@ -567,11 +792,13 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         "zonosReviewRef": [32],
         "storybookPaymentStatusOverride": [32],
         "domesticRedirectedBtnSelector": [32],
+        "legacyCheckoutHiddenBtnSelector": [32],
+        "isLegacyCheckout": [32],
         "closeDialogHandler": [64],
         "init": [64],
         "setToFinishStep": [64]
     }, [[16, "zonos--init-cart-info", "initCartInfoHandler"], [9, "resize", "handleWindowResize"]], {
-        "appearanceSettingsOverride": ["appearanceSettingsOverrideChanged"],
+        "appearanceSettingsOverride": ["appearanceSettingsOverrideChanged", "handleAppearanceSettingsOverrideChange"],
         "mobile": ["handleMobileChange"]
     }]);
 function defineCustomElement$1() {

package/dist/components/zonos-dialog2.js

@@ -57,7 +57,7 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
             document.body.style.overflow = 'auto';
         }
         const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { key: '6bda73bd75e6bc31e73ad53849a51752396ee42d', class: classes([
+        return (h(Host, { key: 'f0aee4766d2c62f3f4feff18c99dba62ea97ca06', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -68,10 +68,10 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, h("div", { key: 'cd3ff21820f95faee3f16e23a272e080bd7930c8', class: "zonos--backdrop" }), h("div", { key: '85af066de976e3b29505c8804e544ca0a1f8a012', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '389491715fcb12f9c86b744e2e9c20930a2a9f25', class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'a28ad12faab02ef30769a3234b24e749b38c46b4', class: classes([
+            } }, h("div", { key: '42e8afd7ddc94ab9ec4951f4221e32729256694e', class: "zonos--backdrop" }), h("div", { key: '035c21c65ae5cabc12b41b6ad1684fa4dbc5b92e', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'b9a3299c9fb920f9af5783506b0489122b2eae11', class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'f5e5a75782ca6acd4a2c004756b800f3c2558129', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '7da31d739197a17ae94df1909c93f70c1282da95' })), h("slot", { key: 'fe02670713895b786dfa6b0c30ad6553c32796cd', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '3fe4ec47852e99f1dc5b6a7a84a8b918594b8b7f' })), h("slot", { key: '5515f4109274b178249c05c6e6c91fdc30ce528a', name: "dialog-footer" })))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return ZonosDialogStyle0; }

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

@@ -136,7 +136,7 @@ const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: 'a9e9d5946604f86ea0680af79ece9e079d4d00d7', class: "zonos--elements" }, h("div", { key: '47ed38de794c10b5689778257d134006c109c101', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: 'dcd4c055999375785e289cc273c37e50c358d594', class: "zonos--elements" }, h("div", { key: 'a8921afb921ee0b4c0adb31dca0da646c91bdecc', "aria-hidden": "true", class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',

package/dist/components/zonos-hello.js

@@ -1,5 +1,5 @@
 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, m as mergeConfig } from './zonosStore.js';
+import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1, z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore.js';
 import { r as handleFetch, l as logError, a as localizationStore, y as isValidSelector, t as translate, A as getZCountryUrlParam, B as setZCountryUrlParam, b as log, C as currencyDisplay, D as currencyConvertAndFormat, E as currencyConvert, F as currencyFormat } from './stripe.js';
 import { c as classes } from './classes.js';
 import { g as getHasMoreSpaceOnRight, d as defineCustomElement$9 } from './zonos-hello-dialog2.js';
@@ -670,6 +670,8 @@ const ZonosHello$1 = /*@__PURE__*/ proxyCustomElement(class ZonosHello extends H
                 this.helloRef.setAttribute('data-zonos-hello-loaded', '');
                 this.updateHelloOnPageChange();
                 this.watchPriceChange();
+                // update theme to browser preference theme if appearance theme is system
+                this.handleAppearanceSettingsOverrideChange();
                 clearInterval(initInterval);
             }
         }, 100);
@@ -716,6 +718,13 @@ const ZonosHello$1 = /*@__PURE__*/ proxyCustomElement(class ZonosHello extends H
     handleResize() {
         debounce_1(this.render.bind(this), RESIZE_DEBOUNCE_DELAY_MS);
     }
+    handleAppearanceSettingsOverrideChange() {
+        var _a;
+        if ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) {
+            // update theme to browser preference theme if appearance theme is system
+            this.appearanceSettingsOverride.theme = getZonosStoreTheme(this.appearanceSettingsOverride.theme);
+        }
+    }
     render() {
         var _a, _b;
         const isExcludedUrl = (_a = zonosStore.helloSettings.excludedUrlPatterns) === null || _a === void 0 ? void 0 : _a.some(pattern => new RegExp(pattern).test(window.location.href));
@@ -755,6 +764,9 @@ const ZonosHello$1 = /*@__PURE__*/ proxyCustomElement(class ZonosHello extends H
                     'zonos--hello-dialog-wrapper-mobile-override',
             ]), style: { height: this.showDialog ? 'fit-content' : '0px' } }, h("zonos-hello-dialog", { animateFromLeftOverride: this.animateFromLeftOverride, appearanceSettings: appearanceSettings, isOpen: this.showDialog, mobileLocationOverride: this.mobileLocationOverride, restrictedItems: restrictedItemsOnPage, setIsOpen: this.changeShowDialog }))))));
     }
+    static get watchers() { return {
+        "appearanceSettingsOverride": ["handleAppearanceSettingsOverrideChange"]
+    }; }
     static get style() { return ZonosHelloStyle0; }
 }, [1, "zonos-hello", {
         "mobileLocationOverride": [1, "mobile-location-override"],
@@ -773,7 +785,9 @@ const ZonosHello$1 = /*@__PURE__*/ proxyCustomElement(class ZonosHello extends H
         "convert": [64],
         "format": [64],
         "openHelloDialog": [64]
-    }, [[9, "resize", "handleResize"]]]);
+    }, [[9, "resize", "handleResize"]], {
+        "appearanceSettingsOverride": ["handleAppearanceSettingsOverrideChange"]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/zonos-review2.js

@@ -11,7 +11,7 @@ const ChevronDownIcon = `<svg color="var(--amino-gray-400)" fill="none" height="
 
 const ChevronUpIcon = `<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M17.707 14.707a1 1 0 0 1-1.414 0L12 10.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l4.93-4.93a1.1 1.1 0 0 1 1.555 0l4.93 4.93a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
-const zonosReviewCss = ":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{position:-webkit-sticky;position:sticky;top:0;background-color:var(--amino-gray-0);z-index:1}:host .zonos--total-pay{margin:var(--amino-space-8) 0 var(--amino-space-32)}:host(.mobile){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:var(--amino-space-24);-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-4) 0;margin-bottom:var(--amino-space-8);background-color:transparent}:host(.mobile) .zonos--title{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;gap:var(--amino-space-8)}:host(.mobile) .zonos--total-pay{margin:0}";
+const zonosReviewCss = ":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{position:-webkit-sticky;position:sticky;top:0;background-color:var(--amino-gray-0);z-index:1}:host .zonos--total-pay{margin:var(--amino-space-8) 0 var(--amino-space-24)}:host(.mobile){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:var(--amino-space-24);-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-4) 0;margin-bottom:var(--amino-space-8);background-color:transparent}:host(.mobile) .zonos--title{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;gap:var(--amino-space-8)}:host(.mobile) .zonos--total-pay{margin:0}";
 const ZonosReviewStyle0 = zonosReviewCss;
 
 const ZonosReview = /*@__PURE__*/ proxyCustomElement(class ZonosReview extends HTMLElement {

package/dist/components/zonos-shipping-rich-radio2.js

@@ -46,7 +46,7 @@ const ZonosShippingRichRadio = /*@__PURE__*/ proxyCustomElement(class ZonosShipp
     }
     render() {
         var _a;
-        return (h(Host, { key: '3633e3be9f679c54647d475c9d1831428410302b', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+        return (h(Host, { key: 'a1c2ace211e4d0b9d63a784028cc725bab7229e7', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             var _a;
             const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
             return (h("div", { "aria-hidden": "true", class: classes([

package/dist/components/zonos-shipping2.js

@@ -96,7 +96,7 @@ const ZonosShipping = /*@__PURE__*/ proxyCustomElement(class ZonosShipping exten
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'ab881bdb575ac0177154ffa8a2d84d668151c46d', class: "zonos--shipping zonos--elements" }, h("div", { key: 'b8738e0fb5c32b329ae03ccd2cb2d1a178a05aa8', class: "zonos--group" }, h("zonos-text", { key: 'd942ab3f4e77631145a0a38dae95999454a92b56', class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { key: '6855f44cf3458891776b3c215417bec329de89dc', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) ? (h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_b = this.selectedShippingMethod) === null || _b === void 0 ? void 0 : _b.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: '9f2c00c948230679d96ac44940c1dee45e751ded', class: "zonos--group-btn" }, h("zonos-button", { key: '8bab3848d596fef19bc7245fc87a525cf59a15c5', backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        return (h(Host, { key: 'ab881bdb575ac0177154ffa8a2d84d668151c46d', class: "zonos--shipping zonos--elements" }, h("div", { key: 'b8738e0fb5c32b329ae03ccd2cb2d1a178a05aa8', class: "zonos--group" }, h("zonos-text", { key: 'd942ab3f4e77631145a0a38dae95999454a92b56', class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { key: '6855f44cf3458891776b3c215417bec329de89dc', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.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.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_b = this.selectedShippingMethod) === null || _b === void 0 ? void 0 : _b.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: 'f6398edeecd18c603680ad6c7c8e1aa5f5cebe4a', class: "zonos--group-btn" }, h("zonos-button", { key: 'a548fb385ed341308ff86e615d9088e7cd4ec34d', backgroundColor: this.submitBtnColor, isDisabled: this.disabled, 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/components/zonosStore.js

@@ -2831,6 +2831,17 @@ const { reset, state: zonosStore } = createStore(() => ({
     zonosApiKey: '',
 }));
 let savedZonosSettings = null;
+/**
+ * Get theme from media query if theme is SYSTEM, otherwise return the theme
+ */
+const getZonosStoreTheme = (theme) => {
+    if (theme === 'SYSTEM') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'DARK'
+            : 'LIGHT';
+    }
+    return theme;
+};
 /**
  * Init setting from zonos setting
  */
@@ -2841,9 +2852,15 @@ const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
         // save zonos settings to be used later
         savedZonosSettings = zonosSettings;
     }
-    zonosStore.appearance = mergeConfig(zonosStore.appearance, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.appearanceSettings) ||
+    const mergedAppearanceConfig = mergeConfig(zonosStore.appearance, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.appearanceSettings) ||
         (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.appearanceSettings) ||
         null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.appearance);
+    // override the theme to user browser preferences if it is set to SYSTEM
+    if (mergedAppearanceConfig.theme === 'SYSTEM') {
+        // update theme to user browser preferences
+        mergedAppearanceConfig.theme = getZonosStoreTheme(mergedAppearanceConfig.theme);
+    }
+    zonosStore.appearance = mergedAppearanceConfig;
     zonosStore.checkoutSettings = mergeConfig(zonosStore.checkoutSettings, (savedZonosSettings === null || savedZonosSettings === void 0 ? void 0 : savedZonosSettings.checkoutSettings) ||
         (zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.checkoutSettings) ||
         null, overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.checkoutSettings);
@@ -2860,4 +2877,4 @@ const zonosStoreFontFamily = () => {
     return fontFamily;
 };
 
-export { _root as _, zonosStoreFontFamily as a, commonjsGlobal as b, createStore as c, zonosStoreInitSetting as d, _baseGetTag as e, isObject_1 as f, isObjectLike_1 as i, mergeConfig as m, zonosStore as z };
+export { _root as _, zonosStoreFontFamily as a, commonjsGlobal as b, createStore as c, zonosStoreInitSetting as d, _baseGetTag as e, isObject_1 as f, getZonosStoreTheme as g, isObjectLike_1 as i, mergeConfig as m, zonosStore as z };