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

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-21334303.js');
-const cart = require('./cart-d9e9ecfc.js');
+const zonosStore = require('./zonosStore-bd2a0c59.js');
+const cart = require('./cart-fcddc0e6.js');
 const classes = require('./classes-b7918f56.js');
 const getHasMoreSpaceOnRight = require('./getHasMoreSpaceOnRight-4c94667f.js');
-require('./isDarkColor-a68274cf.js');
-require('./getBorderRadius-9d619bf6.js');
+require('./isDarkColor-7faf0a82.js');
+require('./getBorderRadius-4fa738c3.js');
 
 var root = zonosStore._root;
 
@@ -661,6 +661,8 @@ const ZonosHello = class {
                 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);
@@ -707,6 +709,13 @@ const ZonosHello = class {
     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 = zonosStore.getZonosStoreTheme(this.appearanceSettingsOverride.theme);
+        }
+    }
     render() {
         var _a, _b;
         const isExcludedUrl = (_a = zonosStore.zonosStore.helloSettings.excludedUrlPatterns) === null || _a === void 0 ? void 0 : _a.some(pattern => new RegExp(pattern).test(window.location.href));
@@ -746,6 +755,9 @@ const ZonosHello = class {
                     'zonos--hello-dialog-wrapper-mobile-override',
             ]), style: { height: this.showDialog ? 'fit-content' : '0px' } }, index.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"]
+    }; }
 };
 ZonosHello.style = ZonosHelloStyle0;
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-21334303.js');
+const zonosStore = require('./zonosStore-bd2a0c59.js');
 const isColorVariable = require('./isColorVariable-fff5e469.js');
 
 const zonosIconCss = ":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{display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--width);height:var(--height);fill:var(--color);color:var(--color)}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-21334303.js');
+const zonosStore = require('./zonosStore-bd2a0c59.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosLogoCss = ":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{display:-ms-inline-flexbox;display:inline-flex}:host img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-21334303.js');
+const zonosStore = require('./zonosStore-bd2a0c59.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosNotificationCss = ":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{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999;bottom:var(--amino-space-24);gap:var(--amino-space-8);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:var(--amino-space-8);border-radius:var(--border-radius, var(--amino-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--amino-green-700)}:host .zonos--notification-item.error{background-color:var(--amino-red-700)}:host .zonos--notification-item.warning{background-color:var(--amino-orange-700)}";

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

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const cart = require('./cart-d9e9ecfc.js');
-require('./zonosStore-21334303.js');
-require('./isDarkColor-a68274cf.js');
-require('./getBorderRadius-9d619bf6.js');
+const cart = require('./cart-fcddc0e6.js');
+require('./zonosStore-bd2a0c59.js');
+require('./isDarkColor-7faf0a82.js');
+require('./getBorderRadius-4fa738c3.js');
 
 const zonosPaymentCss = ".sc-zonos-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-payment-h *.sc-zonos-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-payment-h img.sc-zonos-payment{max-width:100%}.sc-zonos-payment-h dl.sc-zonos-payment,.sc-zonos-payment-h dd.sc-zonos-payment,.sc-zonos-payment-h h1.sc-zonos-payment,.sc-zonos-payment-h h2.sc-zonos-payment,.sc-zonos-payment-h h3.sc-zonos-payment,.sc-zonos-payment-h h4.sc-zonos-payment,.sc-zonos-payment-h h5.sc-zonos-payment,.sc-zonos-payment-h h6.sc-zonos-payment,.sc-zonos-payment-h hr.sc-zonos-payment,.sc-zonos-payment-h figure.sc-zonos-payment,.sc-zonos-payment-h p.sc-zonos-payment,.sc-zonos-payment-h pre.sc-zonos-payment{margin:0}.sc-zonos-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-payment-h .zonos--title.sc-zonos-payment{margin-bottom:var(--amino-space-16)}";
 const ZonosPaymentStyle0 = zonosPaymentCss;

package/dist/cjs/zonos-select-dialog-header_2.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-21334303.js');
+const zonosStore = require('./zonosStore-bd2a0c59.js');
 const classes = require('./classes-b7918f56.js');
 
 const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;

package/dist/cjs/zonos-shipping-rich-radio.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-21334303.js');
+const zonosStore = require('./zonosStore-bd2a0c59.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-9d619bf6.js');
+const getBorderRadius = require('./getBorderRadius-4fa738c3.js');
 const isColorVariable = require('./isColorVariable-fff5e469.js');
 
 const zonosShippingRichRadioCss = ":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{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--amino-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--amino-space-16);-ms-flex-align:center;align-items:center;gap:var(--amino-space-16);cursor:pointer;border:1px solid var(--amino-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--border-radius, var(--amino-radius-10));border-top-right-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--border-radius, var(--amino-radius-10));border-bottom-left-radius:var(--border-radius, var(--amino-radius-10))}:host .zonos--shipping-rich-radio-item:not(:last-child){border-bottom:none}:host .zonos--shipping-rich-radio-item.selected{outline:1px solid var(--selected-border-color, var(--amino-blue-600));outline-offset:-1px}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";
@@ -47,7 +47,7 @@ const ZonosShippingRichRadio = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '3633e3be9f679c54647d475c9d1831428410302b', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStore.zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+        return (index.h(index.Host, { key: 'a1c2ace211e4d0b9d63a784028cc725bab7229e7', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStore.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 (index.h("div", { "aria-hidden": "true", class: classes.classes([

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-564fe383.js');
-const zonosStore = require('./zonosStore-21334303.js');
+const zonosStore = require('./zonosStore-bd2a0c59.js');
 const classes = require('./classes-b7918f56.js');
 const isColorVariable = require('./isColorVariable-fff5e469.js');
 

package/dist/cjs/{zonosStore-21334303.js → zonosStore-bd2a0c59.js}

@@ -2833,6 +2833,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
  */
@@ -2843,9 +2854,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);
@@ -2866,6 +2883,7 @@ exports._baseGetTag = _baseGetTag;
 exports._root = _root;
 exports.commonjsGlobal = commonjsGlobal;
 exports.createStore = createStore;
+exports.getZonosStoreTheme = getZonosStoreTheme;
 exports.isObjectLike_1 = isObjectLike_1;
 exports.isObject_1 = isObject_1;
 exports.mergeConfig = mergeConfig;

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

@@ -4,6 +4,7 @@ import { stripeStore, stripeStoreReset, stripeStoreRetrievePayment, } from "../.
 import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
+import { createCustomEvent } from "../../../utils/createCustomEvent";
 import { getBorderRadius } from "../../../utils/getBorderRadius";
 import { handleFetch } from "../../../utils/handleFetch";
 import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
@@ -101,10 +102,8 @@ export class ZonosCheckoutFinish {
                     void trackConversionEvent('checkout_paymentInfoCompleted', {
                         paymentMethod,
                     });
-                    const successEvent = new CustomEvent('zonos-checkout-success', {
-                        detail: {
-                            message: 'Zonos Checkout successfully processed order',
-                        },
+                    const successEvent = createCustomEvent('zonos-checkout-success', {
+                        message: 'Zonos Checkout successfully processed order',
                     });
                     document.dispatchEvent(successEvent);
                 }
@@ -154,7 +153,7 @@ export class ZonosCheckoutFinish {
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { key: 'd3e8a30ddfffe0cee18ff29edf839775f7a9d8ec', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '8c2087b3a0578cbbd7979fff5e6b696a4325e548', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius(this.borderRadius),
             } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h(Fragment, null, h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
     }

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

@@ -3,12 +3,14 @@ import { cartStore, cartStoreNextStep, cartStoreReset, cartStoreUpdateItems, car
 import { initStripeElements, stripeStore, stripeStoreCleanupDomesticShippingSession, stripeStoreConfirmPayment, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, } from "../../store/checkout/stripe";
 import { localizationStore } from "../../store/hello/localization";
 import { translate } from "../../store/translationStore";
-import { zonosStore, } from "../../store/zonosStore";
+import { getZonosStoreTheme, zonosStore, } from "../../store/zonosStore";
+import { buildCartItemsByTempCart } from "../../utils/api/buildCartItemsByTempCart";
 import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { isShippableCountry } from "../../utils/checkout/isShippableCountry";
 import { watchBigcommerceDomesticCheckout } from "../../utils/checkout/watchBigcommerceDomesticCheckout";
 import { classes } from "../../utils/classes";
+import { createCustomEvent } from "../../utils/createCustomEvent";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 import { isDarkColor } from "../../utils/isDarkColor";
 import { log } from "../../utils/logging/log";
@@ -60,6 +62,8 @@ export class ZonosCheckout {
         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
@@ -82,7 +86,12 @@ export class ZonosCheckout {
         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);
@@ -149,12 +158,18 @@ export class ZonosCheckout {
             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() {
@@ -164,6 +179,45 @@ export class ZonosCheckout {
         // 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
      */
@@ -189,6 +243,12 @@ export class ZonosCheckout {
                 };
             },
         });
+        /**
+         * 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) {
@@ -307,6 +367,12 @@ export class ZonosCheckout {
         }
         // 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
@@ -329,9 +395,18 @@ export class ZonosCheckout {
         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
@@ -364,15 +439,17 @@ export class ZonosCheckout {
         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;
@@ -395,7 +472,7 @@ export class ZonosCheckout {
                 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 is() { return "zonos-checkout"; }
     static get encapsulation() { return "scoped"; }
@@ -526,7 +603,9 @@ export class ZonosCheckout {
             "isMobile": {},
             "zonosReviewRef": {},
             "storybookPaymentStatusOverride": {},
-            "domesticRedirectedBtnSelector": {}
+            "domesticRedirectedBtnSelector": {},
+            "legacyCheckoutHiddenBtnSelector": {},
+            "isLegacyCheckout": {}
         };
     }
     static get methods() {
@@ -604,6 +683,9 @@ export class ZonosCheckout {
             }, {
                 "propName": "mobile",
                 "methodName": "handleMobileChange"
+            }, {
+                "propName": "appearanceSettingsOverride",
+                "methodName": "handleAppearanceSettingsOverrideChange"
             }];
     }
     static get listeners() {

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

@@ -38,7 +38,7 @@
   z-index: 1;
 }
 :host .zonos--total-pay {
-  margin: var(--amino-space-8) 0 var(--amino-space-32);
+  margin: var(--amino-space-8) 0 var(--amino-space-24);
 }
 
 :host(.mobile) {

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

@@ -85,7 +85,7 @@ export class ZonosShipping {
     }
     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/collection/components/common/zonos-button/zonos-button.js

@@ -60,7 +60,7 @@ export class ZonosButton {
         // only set theme for button to change text color if variant is standard and override background is set
         const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
         const borderStyle = getBorderRadius(this.borderStyle);
-        const spinnerColor = buttonTheme === 'LIGHT' ? 'black' : 'white';
+        const spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
         return (h(Host, { key: '75f5e6900c6e0eb468ea639460d55f251b580200', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,

package/dist/collection/components/common/zonos-checkbox/zonos-checkbox.js

@@ -27,14 +27,14 @@ export class ZonosCheckbox {
                     ? 'var(--amino-gray-800)'
                     : 'var(--amino-gray-0)';
         const borderStyle = getBorderRadius(this.borderStyle, '4px');
-        return (h(Host, { key: '20c925f03d3659edde22d4e075aab5ac7323efc1', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: '2ae2a0d33d34aafe96cc91e1cd7c7ee530dede4b', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: 'c2a0fd9fa8f3aebed3bc996647bfb88299822257', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'c3293e1ac102b874eccd2ef9494f94c5da3e28e1', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: 'b9630027581a9f20374c2dfe88faa94cb50203c9', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'd1b2411d9f906692f18514a15df1bb290f662164', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '8d0a39007516ee7f9700f40f3fab20f21161a045', class: "checkmark-container" }, h("svg", { key: 'ee310e0aa1d06f7c81272cac5991dc5c34e19655', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '44611f270e104bc421f50aaccbce1b059e8aa15f', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: '8fc3cda232615f446aff5db71cd992de5327b8e7', class: "checkmark-container" }, h("svg", { key: '5b91a7a26abfd80850eb3c2bb2e045ef73abfd7a', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2046a40a75da63ac288c5def90d82ab0d0e0523c', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -178,8 +178,8 @@ export class ZonosCheckbox {
                     "references": {
                         "ElementsUiStyle": {
                             "location": "import",
-                            "path": "src/types",
-                            "id": "src/types/index.ts::ElementsUiStyle"
+                            "path": "src/types/generated/graphql.customer.types",
+                            "id": "src/types/generated/graphql.customer.types.ts::ElementsUiStyle"
                         }
                     }
                 },

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.css

@@ -71,6 +71,7 @@
   align-items: center;
   background: transparent;
   border: 0;
+  cursor: pointer;
 }
 :host .zonos--tab-item.done .zonos--tab-index-done-icon {
   top: 0;

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { cartStore, } from "../../store/checkout/cart";
+import { translate } from "../../store/translationStore";
 import { zonosStore } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 import { getContrastColor } from "../../utils/getContrastColor";
@@ -62,17 +63,17 @@ export class ZonosCheckoutProgressTabs {
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (h(Host, { key: '1fd6d6cb0f4e819f7e0a204fdc1bccbd2753154c', class: "zonos--elements", "data-theme": zonosStore.appearance.theme, style: {
+        return (h(Host, { key: 'e79dc4967096d3b6f0ac25d58f02e77f773c8e95', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: 'e7b0c9e9376461461286856553381d20bdd50bb6', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            } }, h("div", { key: '20e500d31c28ee0705c1999e0f258b679af9d73a', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
             const isSelected = tab.value === selectedStep;
             return (h("button", { class: classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
-                ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cartStore.step = tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, tab.label)));
-        })), h("div", { key: 'e924379e523d61952e3db826daeb080917c5b468', class: "zonos--tab-progress" }, h("div", { key: '80d193a8f2099a6eb552c1c016be545b9120c6d1', class: "zonos--progress-bar-fill" }))));
+                ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cartStore.step = tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, translate(tab.label))));
+        })), h("div", { key: '129502b873f339192ef5f4c67ac8c06d533ccfca', class: "zonos--tab-progress" }, h("div", { key: '728a074d6a411b400be30929bf9a5fdc8431745d', class: "zonos--progress-bar-fill" }))));
     }
     static get is() { return "zonos-checkout-progress-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-dialog/zonos-dialog.js

@@ -47,7 +47,7 @@ export class ZonosDialog {
             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',
@@ -58,10 +58,10 @@ export class ZonosDialog {
                 '--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 is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -227,8 +227,8 @@ export class ZonosDialog {
                     "references": {
                         "ElementsUiStyle": {
                             "location": "import",
-                            "path": "src/types",
-                            "id": "src/types/index.ts::ElementsUiStyle"
+                            "path": "src/types/generated/graphql.customer.types",
+                            "id": "src/types/generated/graphql.customer.types.ts::ElementsUiStyle"
                         }
                     }
                 },

package/dist/collection/components/common/zonos-icon/zonos-icon.js

@@ -67,8 +67,8 @@ export class ZonosIcon {
                     "references": {
                         "Color": {
                             "location": "import",
-                            "path": "src/types",
-                            "id": "src/types/index.ts::Color"
+                            "path": "src/types/styles/Color",
+                            "id": "src/types/styles/Color.ts::Color"
                         }
                     }
                 },