@zonos/elements 1.3.11-alpha.0 → 1.3.11-alpha.2

package/dist/components/zonos-checkout.js

@@ -1,23 +1,24 @@
 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, r as cartStorePreviousStep } from './stripe.js';
-import { z as zonosStore, m as mergeConfig } from './zonosStore.js';
+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, 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$k } 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';
 import { s as submitGtag } from './submitGtag.js';
-import { d as defineCustomElement$s } from './zonos-address2.js';
-import { d as defineCustomElement$r } from './zonos-badge2.js';
-import { d as defineCustomElement$q } from './zonos-banner2.js';
-import { d as defineCustomElement$p } from './zonos-button2.js';
-import { d as defineCustomElement$o } from './zonos-card2.js';
-import { d as defineCustomElement$n } from './zonos-cart-items2.js';
-import { d as defineCustomElement$m } from './zonos-cart-subtotal2.js';
-import { d as defineCustomElement$l } from './zonos-checkbox2.js';
-import { d as defineCustomElement$j } from './zonos-checkout-footer2.js';
-import { d as defineCustomElement$i } from './zonos-checkout-payment2.js';
+import { d as defineCustomElement$t } from './zonos-address2.js';
+import { d as defineCustomElement$s } from './zonos-badge2.js';
+import { d as defineCustomElement$r } from './zonos-banner2.js';
+import { d as defineCustomElement$q } from './zonos-button2.js';
+import { d as defineCustomElement$p } from './zonos-card2.js';
+import { d as defineCustomElement$o } from './zonos-cart-items2.js';
+import { d as defineCustomElement$n } from './zonos-cart-subtotal2.js';
+import { d as defineCustomElement$m } from './zonos-checkbox2.js';
+import { d as defineCustomElement$k } from './zonos-checkout-footer2.js';
+import { d as defineCustomElement$j } from './zonos-checkout-payment2.js';
+import { d as defineCustomElement$i } from './zonos-checkout-progress-tabs2.js';
 import { d as defineCustomElement$h } from './zonos-collapse2.js';
 import { d as defineCustomElement$g } from './zonos-custom-message2.js';
 import { d as defineCustomElement$f } from './zonos-customer-info2.js';
@@ -35,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`);
         }
@@ -155,8 +306,6 @@ const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShi
     });
 };
 
-const LeftArrow = `<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M9.707 16.707a1 1 0 0 1-1.414 0l-3.647-3.646a1.5 1.5 0 0 1 0-2.122l3.647-3.646a1 1 0 0 1 1.414 1.414L7.414 11H19a1 1 0 1 1 0 2H7.414l2.293 2.293a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
-
 const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="https://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4.5C2.25 3.25736 3.25736 2.25 4.5 2.25H13.5C14.7426 2.25 15.75 3.25736 15.75 4.5V10.5C15.75 11.7426 14.7426 12.75 13.5 12.75H8.25C8.01393 12.75 7.79164 12.8611 7.65 13.05L6.3 14.85C5.87508 15.4166 5.2082 15.75 4.5 15.75C3.25736 15.75 2.25 14.7426 2.25 13.5V4.5ZM4.5 3.75C4.08579 3.75 3.75 4.08579 3.75 4.5V13.5C3.75 13.9142 4.08579 14.25 4.5 14.25C4.73607 14.25 4.95836 14.1389 5.1 13.95L6.45 12.15C6.87492 11.5834 7.5418 11.25 8.25 11.25H13.5C13.9142 11.25 14.25 10.9142 14.25 10.5V4.5C14.25 4.08579 13.9142 3.75 13.5 3.75H4.5ZM5.25 6C5.25 5.58579 5.58579 5.25 6 5.25H12C12.4142 5.25 12.75 5.58579 12.75 6C12.75 6.41421 12.4142 6.75 12 6.75H6C5.58579 6.75 5.25 6.41421 5.25 6ZM5.25 9C5.25 8.58579 5.58579 8.25 6 8.25H8.25C8.66421 8.25 9 8.58579 9 9C9 9.41421 8.66421 9.75 8.25 9.75H6C5.58579 9.75 5.25 9.41421 5.25 9Z" fill="#4D505A"/>
 </svg>
@@ -164,7 +313,7 @@ const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
 
 const RemoveIcon = `<svg color="var(--amino-gray-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-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" data-is-secondary-color="true" fill="var(--amino-gray-200)" fill-rule="evenodd"></path><path clip-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" fill="currentColor" fill-rule="evenodd"></path></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(--amino-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(--amino-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:var(--amino-space-48) var(--amino-space-56) var(--amino-space-76)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-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(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);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--back-button.sc-zonos-checkout{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.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:var(--amino-space-24);top:var(--amino-space-24)}.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:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.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:var(--amino-space-12);padding-bottom:var(--amino-space-76)}@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:var(--amino-space-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:var(--amino-space-16)}.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(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:var(--amino-space-12);margin-top:var(--amino-space-32)}.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:var(--amino-space-8)}.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(--amino-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(--amino-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:var(--amino-space-32)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--primary-color, var(--amino-gray-0));border-right:1px solid var(--amino-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--amino-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(--amino-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:var(--amino-space-24);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 var(--amino-space-8) var(--amino-space-8)}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:var(--amino-space-24)}.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:var(--amino-space-24);top:var(--amino-space-24);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:var(--amino-space-76);margin-bottom:var(--amino-space-8)}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--amino-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:var(--amino-space-32)}.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:var(--amino-space-12);padding-bottom:var(--amino-space-76)}@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:var(--amino-space-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:var(--amino-space-16)}.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(--amino-border);border-radius:var(--border-radius, var(--amino-radius-10));background-color:var(--amino-gray-50);padding:var(--amino-space-12);margin-top:var(--amino-space-32)}.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:var(--amino-space-8)}.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 {
@@ -203,12 +352,14 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         this.stripe = window.Zonos.stripe;
         this.submitLoading = false;
         this.paymentError = false;
-        this.collapseReviewMobile = false;
+        this.collapseReviewMobile = true;
         this.isAttachError = false;
         this.isMobile = false;
         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
@@ -231,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);
@@ -298,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() {
@@ -313,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
      */
@@ -338,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) {
@@ -456,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
@@ -466,14 +679,6 @@ const ZonosCheckout$1 = /*@__PURE__*/ proxyCustomElement(class ZonosCheckout ext
         // Reload the page
         window.location.reload();
     }
-    async handleBackClick() {
-        // close the modal if back button is clicked on customer info step
-        if (cartStore.step === 'customer-info') {
-            await this.closeDialogHandler();
-            return;
-        }
-        cartStorePreviousStep();
-    }
     handleWindowResize() {
         this.isMobile = isCheckoutMobile(this.mobile);
         // apply theme to stripe elements
@@ -486,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
@@ -521,34 +735,44 @@ 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(), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), h("div", null, h("zonos-button", { class: "zonos--back-button", icon: h("zonos-icon", { "aria-label": "Back to previous step", content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, translate('Back')))));
+        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(), !this.isMobile && (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;
                     }
                     this.collapseReviewMobile = !this.collapseReviewMobile;
                 } }), h("zonos-collapse", {
-                // only collapse on mobile
+                // only collapsible on mobile
                 collapsed: this.collapseReviewMobile && this.isMobile
-            }, h("zonos-cart-items", null))), 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", null)));
+            }, 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
+                    ? 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
+                 * the click outside event will be triggered on and targeted to whichever component that it's attached to.
+                 * Move it into <slot /> would resolve the issue.
+                 */
+                slot: !this.isMobile ? 'dialog-footer' : undefined })));
         };
         return (h(Host, { class: classes([
                 'zonos--checkout zonos--elements',
                 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; }
@@ -568,18 +792,20 @@ 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() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zonos-checkout", "zonos-address", "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-collapse", "zonos-custom-message", "zonos-customer-info", "zonos-dialog", "zonos-icon", "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-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-custom-message", "zonos-customer-info", "zonos-dialog", "zonos-icon", "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)) {
@@ -588,55 +814,60 @@ function defineCustomElement$1() {
             break;
         case "zonos-address":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "zonos-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "zonos-banner":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "zonos-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "zonos-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "zonos-cart-items":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "zonos-cart-subtotal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "zonos-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "zonos-checkout-finish":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "zonos-checkout-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "zonos-checkout-payment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "zonos-checkout-progress-tabs":
             if (!customElements.get(tagName)) {
                 defineCustomElement$i();
             }

package/dist/components/zonos-collapse2.js

@@ -48,10 +48,10 @@ const ZonosCollapse = /*@__PURE__*/ proxyCustomElement(class ZonosCollapse exten
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (h(Host, { key: '7ac8b898feadfb4424b3b48a98135cb18994f4e0', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: '032f5818dd8394b5111927907c8fa135a55fef5c', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '4a527ec319b59041196284d4d9a8f22b943a74e6' }, h("iframe", { key: '2fb51c16e13ca90561b1b1e6cab89d87e4a37a47', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '6d7849f6c35be611446b0da36d657396e5ca3122' }))));
+            } }, h("div", { key: '5ddbf406c93f37c9e23375f11dd8439934c0d2a5' }, h("iframe", { key: 'b3efa8bc198918dbb3284e8ce658ffca6249eaa8', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'ffcd123c3a046e62855a650da9972cde94a7774c' }))));
     }
     get el() { return this; }
     static get style() { return ZonosCollapseStyle0; }

package/dist/components/zonos-component.js

@@ -20,7 +20,7 @@ const ZonosComponent$1 = /*@__PURE__*/ proxyCustomElement(class ZonosComponent e
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '3b7429a0c03b00f0a80e15a94bebd08aedaafe51' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: '9a5547114b58b739fb5d783f551bc345f067779d' }, "Hello, World! I'm ", this.getText());
     }
     static get style() { return ZonosComponentStyle0; }
 }, [1, "zonos-component", {

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, z as isValidSelector, b as log, s as stripeStore, A as initLocalizationStore, e as localizationStoreUpdateSelectedCountryCode } from './stripe.js';
+import { r as handleFetch, l as logError, y as isValidSelector, b as log, s as stripeStore, z as initLocalizationStore, e 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';
@@ -227,7 +227,7 @@ const ZonosController$1 = /*@__PURE__*/ proxyCustomElement(class ZonosController
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '0b734aaa82bd08277fb3a2694197b13242a4d0a6', class: "zonos--elements" });
+        return h(Host, { key: 'bd56d32009707ec9042ae5f8a87de7a7cedcca73', class: "zonos--elements" });
     }
     static get style() { return ZonosControllerStyle0; }
 }, [1, "zonos-controller", {

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

@@ -1831,9 +1831,9 @@ const ZonosCountrySelect = /*@__PURE__*/ proxyCustomElement(class ZonosCountrySe
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: '2b8e15643f92ac489706aff7623b1d1efdebce70', class: "zonos--elements", style: {
+        return (h(Host, { key: '0024a7061a593cf3c92fd7f6b5916aaac3a835c9', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '06b0c7765d8144ca102c9033e74cf1edb14743ac', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'f2af99575f518acb753448f7cb1f7aecd790de9d', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '296b92c476439aace00f6817b452a3fd3e1d353d', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: 'd988b856392f88a66bcc3016ccf55107bda4a411', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '4376bec824141dd7d2dbfb84f465ac4a48e1d050', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: 'e6ef5d8cc13e731c94ee5ef037c02eac36d9bce6', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'f698da7688757b6728e99e0cecb21ac4ce586d30', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'd37801e6023262a582d3ecc6e3a39f505f7e82b8', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '6f053c963f5e25b5285a94070336650537bbdad3', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '3d3e180b204bf9fa0893fec7839f1d0d5c4740c1', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     get ele() { return this; }
     static get style() { return ZonosCountrySelectStyle0; }

package/dist/components/zonos-custom-message2.js

@@ -31,7 +31,7 @@ const ZonosCustomMessage = /*@__PURE__*/ proxyCustomElement(class ZonosCustomMes
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: '73091a3267f0989e8820800054aebc75168dc5d6', class: "zonos--elements", style: {
+        return (h(Host, { key: 'b09b7025fb55c4323aaa24ccb7e410d1638bed8a', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
             } }, this.message && (h("zonos-card", { class: "zonos--custom-message", spacing: "12px" }, h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { innerHTML: messageWithLinks }))))));
     }