@zonos/elements 1.3.4 → 1.3.5

package/dist/cjs/{cart-f31374d4.js → cart-c1b0915c.js}

@@ -56,6 +56,7 @@ const triggerBuildLandedCost = async (buildLandedCost) => {
 };
 
 const calculateLandedCost = async (abortController) => {
+    var _a;
     // If buildLandedCost callback is supplied, use that instead of our regular request to '/calculate-landed-cost'
     const buildLandedCost = zonosStore.zonosStore.checkoutSettings.buildLandedCost;
     if (buildLandedCost) {
@@ -70,7 +71,11 @@ const calculateLandedCost = async (abortController) => {
         signal: abortController === null || abortController === void 0 ? void 0 : abortController.signal,
     });
     if (errors.length || !json) {
-        throw new Error('Failed to calculate landed cost');
+        const isAbortedRequest = ((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.message) === 'The user aborted a request.';
+        const errorMessage = isAbortedRequest
+            ? 'The landed cost calculation request was aborted to initiate a new one.'
+            : 'Failed to calculate landed cost';
+        throw new Error(errorMessage);
     }
     return json;
 };
@@ -127,8 +132,9 @@ const { onChange: onChange$1, reset: reset$1, state: stripeStore, } = zonosStore
     stripePaymentElement: null,
     stripePaymentEventData: null,
 }));
-const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryColor, overrideTheme, }) => {
+const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryColor, overrideSecondaryColor, overrideTheme, }) => {
     const primaryColor = overridePrimaryColor || zonosStore.zonosStore.appearance.colorPrimary;
+    const secondaryColor = overrideSecondaryColor || zonosStore.zonosStore.appearance.colorSecondary;
     const themeBasedColor = primaryColor && isDarkColor.isDarkColor(primaryColor) ? 'night' : 'flat';
     // if overrideTheme is provided, use it. Otherwise, use theme based on primary color
     const theme = overrideTheme === 'DARK' ? 'night' : 'flat';
@@ -138,10 +144,12 @@ const getStripeOptions = ({ clientSecret, overrideBorderRaidus, overridePrimaryC
             rules: Object.assign({}, addressRuleStyle({ theme: 'LIGHT' })),
             // get contrast theme color base on primary color
             theme: overrideTheme ? theme : themeBasedColor,
-            variables: Object.assign({}, defaultVariable({
+            variables: Object.assign(Object.assign({}, defaultVariable({
                 borderStyle: overrideBorderRaidus,
                 theme: 'LIGHT',
-            })),
+            })), { 
+                // use the button background color for input glow color
+                colorPrimary: secondaryColor }),
         },
         clientSecret,
         locale: localization.localizationStore.selectedLocale,
@@ -159,6 +167,7 @@ const initStripeElements = async (props) => {
             clientSecret,
             overrideBorderRaidus: props === null || props === void 0 ? void 0 : props.overrideBorderRaidus,
             overridePrimaryColor: props === null || props === void 0 ? void 0 : props.overridePrimaryColor,
+            overrideSecondaryColor: props === null || props === void 0 ? void 0 : props.overrideSecondaryColor,
             overrideTheme: props === null || props === void 0 ? void 0 : props.overrideTheme,
         });
         // compare with the previous options to see if we need to update
@@ -481,6 +490,8 @@ const cartStoreReset = () => {
     reset();
 };
 const cartStoreUpdateToErrorState = ({ messages, title, }) => {
+    cartStoreReset();
+    stripeStoreReset();
     cartStore.step = 'error';
     cartStore.error = {
         messages,

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const cart = require('./cart-f31374d4.js');
+const cart = require('./cart-c1b0915c.js');
 require('./zonosStore-b88b5671.js');
 require('./index-3ead02fe.js');
 require('./localization-d43e1540.js');

package/dist/cjs/isCheckoutMobile-f491ca7c.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const checkoutBreakpoint = 890;
+const isCheckoutMobile = (isMobile) => {
+    return isMobile || window.innerWidth < checkoutBreakpoint;
+};
+
+exports.isCheckoutMobile = isCheckoutMobile;

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ const index = require('./index-3ead02fe.js');
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return undefined;
-  return index.bootstrapLazy([["zonos-text.cjs",[[1,"zonos-text",{"class":[1],"color":[1],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["zonos-checkout.cjs",[[2,"zonos-checkout",{"appearanceSettingsOverride":[16],"preview":[4],"mobile":[4],"defaultAddress":[16],"forceDialogOpen":[4,"force-dialog-open"],"open":[32],"stripe":[32],"submitLoading":[32],"paymentError":[32],"collapseReviewMobile":[32],"isAttachError":[32],"isMobile":[32],"zonosReviewRef":[32],"storybookPaymentStatusOverride":[32],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged"],"mobile":["handleMobileChange"]}]]],["zonos-hello.cjs",[[1,"zonos-hello",{"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettingsOverride":[16],"showPeekMessage":[32],"zonosStoreHelloSettings":[32],"showDialog":[32],"peekMessage":[32],"initialUrl":[32],"allRestrictedItems":[32],"allFoundProducts":[32],"productsOnPage":[32],"displayCurrency":[64],"convertAndFormat":[64],"convert":[64],"format":[64]},[[9,"resize","handleResize"]]]]],["zonos-controller.cjs",[[1,"zonos-controller",{"config":[16],"zonosApiKey":[1,"zonos-api-key"],"initCheckoutElement":[64],"setupGoogleFont":[64],"showNotification":[64],"overrideConfig":[64],"overrideCountry":[64],"getAppearanceSetting":[64],"updateOrganizationName":[64]}]]],["zonos-component.cjs",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-country-flag_4.cjs",[[1,"zonos-country-select",{"closeCountrySelect":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}],[1,"zonos-country-flag",{"class":[1],"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-hello-dialog.cjs",[[1,"zonos-hello-dialog",{"isOpen":[4,"is-open"],"setIsOpen":[16],"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettings":[16],"restrictedItems":[16],"welcomeMessage":[32],"showCountrySelect":[32]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification.cjs",[[1,"zonos-notification",{"class":[1],"notificationArray":[32],"showNotification":[64]}]]],["zonos-badge.cjs",[[1,"zonos-badge",{"bold":[4],"color":[1],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4],"class":[1]}]]],["zonos-payment.cjs",[[2,"zonos-payment",{"titleText":[1,"title-text"],"stripe":[32],"stripeElements":[32]},null,{"stripeElements":["watchInitStripe"],"stripe":["watchInitStripe"]}]]],["zonos-shipping-rich-radio.cjs",[[1,"zonos-shipping-rich-radio",{"items":[16],"borderColor":[1,"border-color"],"borderStyle":[1,"border-style"],"theme":[1],"selectedItem":[32]}]]],["zonos-address_2.cjs",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32]},null,{"stripe":["watchInitStripe"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}]]],["zonos-banner.cjs",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"class":[1],"hasContent":[32]}]]],["zonos-card_2.cjs",[[1,"zonos-card",{"actions":[16],"class":[1],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}],[1,"zonos-v-stack",{"spacing":[2],"class":[1]}]]],["zonos-icon.cjs",[[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"color":[1],"content":[1],"size":[2]}]]],["zonos-button_2.cjs",[[1,"zonos-button",{"class":[1],"color":[1],"backgroundColor":[1,"background-color"],"borderStyle":[1,"border-style"],"isDisabled":[4,"is-disabled"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"variant":[1],"noBackground":[4,"no-background"],"noPaddingLeft":[4,"no-padding-left"],"noPaddingRight":[4,"no-padding-right"],"loading":[4],"theme":[1],"hasIcon":[32],"hasContent":[32]},[[2,"click","clickHandler"]],{"icon":["iconChangeHandler"]}],[1,"zonos-spinner",{"size":[2],"color":[1]}]]],["zonos-cart-items_10.cjs",[[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[1,"zonos-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32],"order":[32]}],[1,"zonos-cart-subtotal"],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"footerRightAction":[16],"borderStyle":[1,"border-style"],"noCloseButton":[4,"no-close-button"],"noClickOutside":[4,"no-click-outside"],"mobile":[4],"isLoading":[4,"is-loading"],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32]}],[1,"zonos-logo",{"theme":[1],"width":[1],"class":[1]}]]]], options);
+  return index.bootstrapLazy([["zonos-text.cjs",[[1,"zonos-text",{"class":[1],"color":[1],"size":[1],"type":[1],"weight":[2],"content":[1],"ready":[32]}]]],["zonos-checkout.cjs",[[2,"zonos-checkout",{"appearanceSettingsOverride":[16],"preview":[4],"mobile":[4],"defaultAddress":[16],"forceDialogOpen":[4,"force-dialog-open"],"open":[32],"stripe":[32],"submitLoading":[32],"paymentError":[32],"collapseReviewMobile":[32],"isAttachError":[32],"isMobile":[32],"zonosReviewRef":[32],"storybookPaymentStatusOverride":[32],"closeDialogHandler":[64],"init":[64],"setToFinishStep":[64]},[[16,"zonos--init-cart-info","initCartInfoHandler"],[9,"resize","handleWindowResize"]],{"appearanceSettingsOverride":["appearanceSettingsOverrideChanged"],"mobile":["handleMobileChange"]}]]],["zonos-hello.cjs",[[1,"zonos-hello",{"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettingsOverride":[16],"showPeekMessage":[32],"zonosStoreHelloSettings":[32],"showDialog":[32],"peekMessage":[32],"initialUrl":[32],"allRestrictedItems":[32],"allFoundProducts":[32],"productsOnPage":[32],"displayCurrency":[64],"convertAndFormat":[64],"convert":[64],"format":[64]},[[9,"resize","handleResize"]]]]],["zonos-controller.cjs",[[1,"zonos-controller",{"config":[16],"zonosApiKey":[1,"zonos-api-key"],"initCheckoutElement":[64],"setupGoogleFont":[64],"showNotification":[64],"overrideConfig":[64],"overrideCountry":[64],"getAppearanceSetting":[64],"updateOrganizationName":[64]}]]],["zonos-component.cjs",[[1,"zonos-component",{"first":[1],"middle":[1],"last":[1]}]]],["zonos-country-flag_4.cjs",[[1,"zonos-country-select",{"closeCountrySelect":[16],"inputValue":[32]}],[1,"zonos-hello-dialog-footer",{"appearanceSettings":[16],"setShowCountrySelect":[16]}],[1,"zonos-custom-message",{"icon":[1],"message":[1]}],[1,"zonos-country-flag",{"class":[1],"countryCode":[1,"country-code"],"size":[2]}]]],["zonos-hello-dialog.cjs",[[1,"zonos-hello-dialog",{"isOpen":[4,"is-open"],"setIsOpen":[16],"mobileLocationOverride":[1,"mobile-location-override"],"animateFromLeftOverride":[4,"animate-from-left-override"],"appearanceSettings":[16],"restrictedItems":[16],"welcomeMessage":[32],"showCountrySelect":[32]},[[4,"click","globalClickHandler"]],{"isOpen":["isOpenHandler"]}]]],["zonos-notification.cjs",[[1,"zonos-notification",{"class":[1],"notificationArray":[32],"showNotification":[64]}]]],["zonos-badge.cjs",[[1,"zonos-badge",{"bold":[4],"color":[1],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"rounded":[4],"class":[1]}]]],["zonos-payment.cjs",[[2,"zonos-payment",{"titleText":[1,"title-text"],"stripe":[32],"stripeElements":[32]},null,{"stripeElements":["watchInitStripe"],"stripe":["watchInitStripe"]}]]],["zonos-shipping-rich-radio.cjs",[[1,"zonos-shipping-rich-radio",{"items":[16],"borderColor":[1,"border-color"],"borderStyle":[1,"border-style"],"theme":[1],"selectedItem":[32]}]]],["zonos-address_2.cjs",[[2,"zonos-address",{"type":[1],"titleText":[1,"title-text"],"defaultAddress":[16],"stripe":[32],"isDirtyAddress":[32]},null,{"stripe":["watchInitStripe"]}],[2,"zonos-link-authentication",{"titleText":[1,"title-text"],"stripe":[32]},null,{"stripe":["watchInitStripe"]}]]],["zonos-banner.cjs",[[1,"zonos-banner",{"bannerTitle":[1,"banner-title"],"intent":[1],"class":[1],"hasContent":[32]}]]],["zonos-card_2.cjs",[[1,"zonos-card",{"actions":[16],"class":[1],"footerActions":[16],"footerContent":[16],"footerHeight":[2,"footer-height"],"label":[16],"spacing":[1]}],[1,"zonos-v-stack",{"spacing":[2],"class":[1]}]]],["zonos-icon.cjs",[[1,"zonos-icon",{"autoHeight":[4,"auto-height"],"color":[1],"content":[1],"size":[2]}]]],["zonos-button_2.cjs",[[1,"zonos-button",{"class":[1],"color":[1],"backgroundColor":[1,"background-color"],"borderStyle":[1,"border-style"],"isDisabled":[4,"is-disabled"],"icon":[16],"iconRight":[4,"icon-right"],"size":[1],"variant":[1],"noBackground":[4,"no-background"],"noPaddingLeft":[4,"no-padding-left"],"noPaddingRight":[4,"no-padding-right"],"loading":[4],"theme":[1],"hasIcon":[32],"hasContent":[32]},[[2,"click","clickHandler"]],{"icon":["iconChangeHandler"]}],[1,"zonos-spinner",{"size":[2],"color":[1]}]]],["zonos-cart-items_10.cjs",[[2,"zonos-checkout-payment",{"paymentError":[4,"payment-error"],"submitBtnType":[1,"submit-btn-type"],"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-customer-info",{"continueLoading":[4,"continue-loading"],"submitBtnType":[1,"submit-btn-type"],"submitBtnColor":[1,"submit-btn-color"],"defaultAddress":[16],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[2,"zonos-shipping",{"continueLoading":[4,"continue-loading"],"submitBtnColor":[1,"submit-btn-color"],"submitBtnType":[1,"submit-btn-type"],"selectedShippingMethod":[32],"disabled":[32]},null,{"disabled":["watchFormComplete"]}],[1,"zonos-checkout-finish",{"borderRadius":[1,"border-radius"],"storybookForceStatus":[1,"storybook-force-status"],"overrideNotification":[16],"isLoading":[32],"notificationType":[32],"notificationTitle":[32],"notificationMessages":[32],"order":[32]}],[1,"zonos-cart-subtotal"],[1,"zonos-dialog",{"open":[4],"headerText":[1,"header-text"],"width":[1],"height":[1],"noHeader":[4,"no-header"],"noBodyPadding":[4,"no-body-padding"],"noBorder":[4,"no-border"],"footerRightAction":[16],"borderStyle":[1,"border-style"],"noCloseButton":[4,"no-close-button"],"noClickOutside":[4,"no-click-outside"],"mobile":[4],"isLoading":[4,"is-loading"],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-review",{"mobile":[4],"collapsed":[4],"isMobile":[32]},[[9,"resize","handleWindowResize"]]],[1,"zonos-cart-items",{"errorImages":[32]}],[1,"zonos-collapse",{"collapsed":[4],"collapseSize":[2,"collapse-size"],"height":[32]}],[1,"zonos-logo",{"theme":[1],"width":[1],"class":[1]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{submitGtag-42f29b3a.js → submitGtag-bd6e9b42.js}

@@ -3,11 +3,6 @@
 const zonosStore = require('./zonosStore-b88b5671.js');
 const localization = require('./localization-d43e1540.js');
 
-const checkoutBreakpoint = 890;
-const isCheckoutMobile = (isMobile) => {
-    return isMobile || window.innerWidth < checkoutBreakpoint;
-};
-
 /**
  * Submit a gtag event if the gtag function is available.
  */
@@ -23,5 +18,4 @@ const submitGtag = (event) => {
     }
 };
 
-exports.isCheckoutMobile = isCheckoutMobile;
 exports.submitGtag = submitGtag;

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3ead02fe.js');
-const cart = require('./cart-f31374d4.js');
+const cart = require('./cart-c1b0915c.js');
 const localization = require('./localization-d43e1540.js');
+const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 require('./zonosStore-b88b5671.js');
 require('./isDarkColor-5eda1323.js');
 require('./getBorderRadius-cd7ef574.js');
@@ -19,9 +20,11 @@ const ZonosAddress = class {
         this.titleText = undefined;
         this.defaultAddress = null;
         this.stripe = window.Zonos.stripe;
+        this.isDirtyAddress = !!cart.stripeStore.stripeAddressEventData &&
+            cart.stripeStore.stripeAddressEventData.value.address.line1.length > 0;
     }
     async watchInitStripe() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g;
         this.stripe = window.Zonos.stripe;
         if (!this.stripe || !cart.stripeStore.stripeElements) {
             localization.logError("Stripe is not initialized. Couldn't load stripe element.");
@@ -34,46 +37,73 @@ const ZonosAddress = class {
             (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
         }
         const shippableCountries = localization.localizationStore.shippingZoneCountries;
-        const addressElement = cart.stripeStore.stripeAddressElement ||
-            cart.stripeStore.stripeElements.create('address', {
-                allowedCountries: shippableCountries
-                    ? Object.values(shippableCountries).map(country => country.code)
-                    : [],
-                contacts: this.defaultAddress ? [this.defaultAddress] : undefined,
-                defaultValues: {
-                    address: {
-                        country: localization.localizationStore.selectedCountryCode || 'AL',
-                    },
+        const addressElement = cart.stripeStore.stripeElements.create('address', {
+            allowedCountries: shippableCountries
+                ? Object.values(shippableCountries).map(country => country.code)
+                : [],
+            autocomplete: {
+                mode: 'automatic',
+            },
+            contacts: this.defaultAddress ? [this.defaultAddress] : [],
+            defaultValues: {
+                address: Object.assign(Object.assign({}, (_c = cart.stripeStore.stripeAddressEventData) === null || _c === void 0 ? void 0 : _c.value.address), { country: ((_d = cart.stripeStore.stripeAddressEventData) === null || _d === void 0 ? void 0 : _d.value.address.country) ||
+                        localization.localizationStore.selectedCountryCode ||
+                        'AL' }),
+                firstName: (_e = cart.stripeStore.stripeAddressEventData) === null || _e === void 0 ? void 0 : _e.value.firstName,
+                lastName: (_f = cart.stripeStore.stripeAddressEventData) === null || _f === void 0 ? void 0 : _f.value.lastName,
+                phone: (_g = cart.stripeStore.stripeAddressEventData) === null || _g === void 0 ? void 0 : _g.value.phone,
+            },
+            display: {
+                name: 'split',
+            },
+            fields: {
+                phone: 'always',
+            },
+            mode: this.type,
+            validation: {
+                phone: {
+                    required: 'always',
                 },
-                display: {
-                    name: 'split',
-                },
-                fields: {
-                    phone: 'always',
-                },
-                mode: this.type,
-                validation: {
-                    phone: {
-                        required: 'always',
-                    },
-                },
-            });
+            },
+        });
         addressElement.mount(this.el.querySelector('.zonos--address-component'));
         addressElement.on('change', event => {
             const eventValue = event.value;
+            if (!this.isDirtyAddress && eventValue.address.line1.length >= 3) {
+                this.isDirtyAddress = true;
+                // stripe element started with just address line 1, so scroll bar is not yet available. Wait for a moment before scrolling
+                setTimeout(() => {
+                    // scroll directly into view if it's mobile
+                    if (isCheckoutMobile.isCheckoutMobile()) {
+                        this.el.scrollIntoView({ behavior: 'smooth', block: 'end' });
+                    }
+                    else {
+                        // scroll into the end of the page so the address placeholder won't be hidden
+                        const yOffset = 100;
+                        const parentWrapper = this.el.closest('.zonos--group');
+                        const y = this.el.getBoundingClientRect().top + yOffset;
+                        parentWrapper === null || parentWrapper === void 0 ? void 0 : parentWrapper.scrollTo({ behavior: 'smooth', top: y });
+                    }
+                }, 400);
+            }
             cart.stripeStore.stripeAddressEventData = Object.assign(Object.assign({}, event), { elementMode: 'shipping', elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) });
             // run prefetch landed cost when address is changed
             void cart.stripeStorePrefetchLandedCost();
         });
         cart.stripeStore.stripeAddressElement = addressElement;
     }
+    disconnectedCallback() {
+        var _a;
+        // destroy the stripe element when this component is removed from the DOM, so that we can re-create the new one with previous value
+        (_a = cart.stripeStore.stripeAddressElement) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
     componentDidLoad() {
         // @Watch doesn't get trigger on initial load
         void this.watchInitStripe();
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: '47fa225123b7c944732b018fbb374bcb6da0f4ca', class: "zonos--address zonos--elements" }, index.h("zonos-text", { key: '4d0d9d4f9c09d6b2f29bc6a44164a0ef8db0acc9', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { key: 'd279ba97287890e489230f9e449a344db76556f2', class: "zonos--address-component" })));
+        return (index.h(index.Host, { key: '41014c1af1c8f8f5bb37caf358a6cec124e66f30', class: "zonos--address zonos--elements" }, index.h("zonos-text", { key: '5d8dcc4b44f7fe7b089b630ec6ca7b2177fef371', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { key: 'da0fe9760d7ca8dbc089481ac1dcb7c0a7c6553f', class: "zonos--address-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -118,7 +148,7 @@ const ZonosLinkAuthentication = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: '48ec92ca8a1500c3b8e85222c3df069c32074e72', class: "zonos--link-authentication zonos--elements" }, index.h("zonos-text", { key: '9060fab8ab9f88157ee6951af830e106e6ff9509', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { key: 'dac7e96170d15faa8c1013fb298ae86e2ce99f0b', class: "zonos--link-authentication-component" })));
+        return (index.h(index.Host, { key: '5d02895b441a5713b83e7b3c4b784ab4b6743f54', class: "zonos--link-authentication zonos--elements" }, index.h("zonos-text", { key: '5bd33edd16f1511111bfcb497e0767f938172b05', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("div", { key: 'd5a90ce88adaed9f2369af4692506d5d072c021d', class: "zonos--link-authentication-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -23,7 +23,7 @@ const getButtonTheme = (overrideBackground) => {
     return buttonTheme;
 };
 
-const zonosButtonCss = ":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 .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--amino-gray-200)}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-200)}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";
+const zonosButtonCss = ":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 .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{width:100%;position:relative;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family, Inter), Inter;letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--background-color, var(--amino-gray-200))}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--background-color, var(--amino-gray-200))}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";
 const ZonosButtonStyle0 = zonosButtonCss;
 
 const ZonosButton = class {
@@ -69,35 +69,39 @@ const ZonosButton = class {
     }
     render() {
         const disabled = this.loading || this.isDisabled;
+        /**
+         * If the parent component pass in the variant prop with `undefined` value, it would not re-assign the `undefined` value with the default value.
+         * So need to re-assign the variant prop with the default value if the value is `undefined` here.
+         */
+        const variant = this.variant || 'standard';
         const color = this.color && isColorVariable.isColorVariable(this.color)
             ? `var(--amino-${this.color})`
             : this.color;
         // use override background if it exists, otherwise use color from setting
         const overrideBackground = this.backgroundColor || zonosStore.zonosStore.appearance.colorSecondary;
         // only set theme for button to change text color if variant is standard and override background is set
-        const buttonTheme = this.variant === 'standard'
-            ? getButtonTheme(overrideBackground)
-            : undefined;
+        const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
         const borderStyle = getBorderRadius.getBorderRadius(this.borderStyle);
-        return (index.h(index.Host, { key: 'af41b1035e5ea776d47580647a65997bb41730e3', class: classes.classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        const spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
+        return (index.h(index.Host, { key: 'e1ad2eb31ad09c8671debc2e32d83af21085b912', class: classes.classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("button", { key: 'af3fdc9aa0440cf5a7e49c4c0c76826d7a700d32', class: classes.classes([
+            } }, index.h("button", { key: '0a087bf98251899711a71d69a89473479fc78c4f', class: classes.classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
                 this.noPaddingLeft && 'no-padding-left',
                 this.noPaddingRight && 'no-padding-right',
                 this.iconRight && 'icon-right',
-                this.variant,
+                variant,
                 this.size,
                 // only override background if variant is set to standard
-                this.backgroundColor &&
-                    this.variant === 'standard' &&
+                overrideBackground &&
+                    variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (index.h("div", { class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: '32b6a079ba98ab9d62b5df34ddc15e4ac7a87a8e', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (index.h("div", { class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { color: spinnerColor, size: 16 }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: 'd80e58786f16bff52592a759679290a3a5ed0954', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get watchers() { return {
         "icon": ["iconChangeHandler"]
@@ -105,7 +109,7 @@ const ZonosButton = class {
 };
 ZonosButton.style = ZonosButtonStyle0;
 
-const zonosSpinnerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:relative;overflow:hidden;width:var(--size);height:var(--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--size);height:var(--size);stroke:var(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}:host.black{stroke:var(--amino-spinner-stroke-black)}:host.black circle.track{stroke:var(--amino-spinner-track-black)}:host.white{stroke:var(--amino-spinner-stroke-white)}:host.white circle.track{stroke:var(--amino-spinner-track-white)}:host.info{stroke:var(--amino-blue-600)}:host.info circle.track{stroke:var(--amino-blue-100)}:host.success{stroke:var(--amino-green-600)}:host.success circle.track{stroke:var(--amino-green-100)}:host.danger{stroke:var(--amino-red-600)}:host.danger circle.track{stroke:var(--amino-red-100)}:host.warning{stroke:var(--amino-orange-600)}:host.warning circle.track{stroke:var(--amino-orange-100)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}";
+const zonosSpinnerCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:relative;overflow:hidden;width:var(--size);height:var(--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--size);height:var(--size);stroke:var(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}:host(.black) circle{stroke:var(--amino-spinner-stroke-black)}:host(.black) circle.track{stroke:var(--amino-spinner-track-black)}:host(.white) circle{stroke:var(--amino-spinner-stroke-white)}:host(.white) circle.track{stroke:var(--amino-spinner-track-white)}:host(.info) circle{stroke:var(--amino-blue-600)}:host(.info) circle.track{stroke:var(--amino-blue-100)}:host(.success) circle{stroke:var(--amino-green-600)}:host(.success) circle.track{stroke:var(--amino-green-100)}:host(.danger) circle{stroke:var(--amino-red-600)}:host(.danger) circle.track{stroke:var(--amino-red-100)}:host(.warning) circle{stroke:var(--amino-orange-600)}:host(.warning) circle.track{stroke:var(--amino-orange-100)}";
 const ZonosSpinnerStyle0 = zonosSpinnerCss;
 
 const ZonosSpinner = class {

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

@@ -41,9 +41,9 @@ const VStack = class {
         this.class = '';
     }
     render() {
-        return (index.h(index.Host, { key: 'd363ffeb2bbae49e7318b26ab56b4b8871844daf', style: {
+        return (index.h(index.Host, { key: '2bd82aba32704cc02da767522c39853c6e223297', style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '5d9fa5ae9ffca787ca42f38e4ec75fedc24823f9', class: classes.classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'e1d6fef3378b92c18c2c43ec8616e8c733a4290c' }))));
+            } }, index.h("div", { key: '22afa237aa1ac8a5ab61adcfa7a0ccabad316b28', class: classes.classes(['vstack', this.class]), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '5f2645af6b1f4178cb87248e03e9bb3d1c8201ee' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

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

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3ead02fe.js');
-const cart = require('./cart-f31374d4.js');
+const cart = require('./cart-c1b0915c.js');
 const localization = require('./localization-d43e1540.js');
 const zonosStore = require('./zonosStore-b88b5671.js');
 const getBorderRadius = require('./getBorderRadius-cd7ef574.js');
-const submitGtag = require('./submitGtag-42f29b3a.js');
+const submitGtag = require('./submitGtag-bd6e9b42.js');
 const classes = require('./classes-b7918f56.js');
+const isCheckoutMobile = require('./isCheckoutMobile-f491ca7c.js');
 require('./isDarkColor-5eda1323.js');
 
 const formatCurrency = ({ amount, currency, showCurrencyText, }) => showCurrencyText
@@ -239,7 +240,7 @@ const ZonosCheckoutFinish = class {
 };
 ZonosCheckoutFinish.style = ZonosCheckoutFinishStyle0;
 
-const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-payment-h *.sc-zonos-checkout-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-8)}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-button.sc-zonos-checkout-payment{width:calc(100% - 10px)}";
+const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-payment-h *.sc-zonos-checkout-payment{font-family:var(--font-family, Inter), Inter}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-24)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:var(--amino-space-8)}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-button.sc-zonos-checkout-payment{width:100%}";
 const ZonosCheckoutPaymentStyle0 = zonosCheckoutPaymentCss;
 
 const ZonosCheckoutPayment = class {
@@ -270,12 +271,12 @@ const ZonosCheckoutPayment = class {
             return null;
         }
         this.disabled = !((_a = cart.stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
-        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Payment method')), this.paymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, localization.translate("We couldn't complete your payment. Please verify the payment details and try again."))), index.h("zonos-payment", null)), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        return (index.h(index.Host, { class: "zonos--checkout-payment zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Payment method')), this.paymentError && (index.h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, localization.translate("We couldn't complete your payment. Please verify the payment details and try again."))), index.h("zonos-payment", null), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
             amount: cart.cartStore.total,
             currency: cart.cartStore.currency,
-        })))));
+        }))))));
     }
     static get watchers() { return {
         "disabled": ["watchFormComplete"]
@@ -318,7 +319,7 @@ const ZonosCollapse = class {
 };
 ZonosCollapse.style = ZonosCollapseStyle0;
 
-const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:calc(100% - 10px)}";
+const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--font-family, Inter), Inter}.sc-zonos-customer-info-h img.sc-zonos-customer-info{max-width:100%}.sc-zonos-customer-info-h dl.sc-zonos-customer-info,.sc-zonos-customer-info-h dd.sc-zonos-customer-info,.sc-zonos-customer-info-h h1.sc-zonos-customer-info,.sc-zonos-customer-info-h h2.sc-zonos-customer-info,.sc-zonos-customer-info-h h3.sc-zonos-customer-info,.sc-zonos-customer-info-h h4.sc-zonos-customer-info,.sc-zonos-customer-info-h h5.sc-zonos-customer-info,.sc-zonos-customer-info-h h6.sc-zonos-customer-info,.sc-zonos-customer-info-h hr.sc-zonos-customer-info,.sc-zonos-customer-info-h figure.sc-zonos-customer-info,.sc-zonos-customer-info-h p.sc-zonos-customer-info,.sc-zonos-customer-info-h pre.sc-zonos-customer-info{margin:0}.sc-zonos-customer-info-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-customer-info-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-customer-info-h .zonos--title.sc-zonos-customer-info{margin-bottom:var(--amino-space-20)}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:var(--amino-space-32)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar{width:10px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:100%}";
 const ZonosCustomerInfoStyle0 = zonosCustomerInfoCss;
 
 const ZonosCustomerInfo = class {
@@ -352,9 +353,9 @@ const ZonosCustomerInfo = class {
         this.disabled =
             !((_a = cart.stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) ||
                 !((_b = cart.stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
-        return (index.h(index.Host, { class: "zonos--customer-info zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Customer information')), index.h("zonos-link-authentication", { titleText: localization.translate('Contact') }), index.h("zonos-address", { defaultAddress: this.defaultAddress, titleText: localization.translate('Address'), type: "shipping" })), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        return (index.h(index.Host, { class: "zonos--customer-info zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Customer information')), index.h("zonos-link-authentication", { titleText: localization.translate('Contact') }), index.h("zonos-address", { defaultAddress: this.defaultAddress, titleText: localization.translate('Address'), type: "shipping" }), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
-            variant: this.submitBtnType }, localization.translate('Continue to shipping')))));
+            variant: this.submitBtnType }, localization.translate('Continue to shipping'))))));
     }
     static get watchers() { return {
         "disabled": ["watchFormComplete"]
@@ -412,7 +413,7 @@ const ZonosDialog = class {
             document.body.style.overflow = 'auto';
         }
         const borderStyle = getBorderRadius.getBorderRadius(this.borderStyle);
-        return (index.h(index.Host, { key: '5a331d58bfd2a0414e9577c4f515cfcd0c630ad5', class: classes.classes([
+        return (index.h(index.Host, { key: 'deb6bd5cdd044f1ca4e2b04484b0b54a40574b4f', class: classes.classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -423,10 +424,10 @@ const ZonosDialog = class {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, index.h("div", { key: '74e3ed8fcdf55e3ae11d6be9c1e18691f1115bb9', class: "zonos--backdrop" }), index.h("div", { key: 'dae7aa8261feeb43d62550832b6b91437da07f9d', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, index.h("div", { key: 'ea919a80d1c0589908af64d48845c5263d1b18f4', class: "zonos--dialog" }, this.isLoading && (index.h("div", { class: "zonos--loading" }, index.h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (index.h("div", { class: "zonos--header" }, this.headerText && (index.h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), index.h("div", { key: '77de036f1fd7ea16936a5521a646df427115e99b', class: classes.classes([
+            } }, index.h("div", { key: '10ed0a3736547ef162a2b439bb81ddffc0bc920d', class: "zonos--backdrop" }), index.h("div", { key: '895ed2094a0b0863ba13fdbc46a8d9071f1330b8', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, index.h("div", { key: '8d83b4cc34a360f7e943776869fc5388576fb0f7', class: "zonos--dialog" }, this.isLoading && (index.h("div", { class: "zonos--loading" }, index.h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (index.h("div", { class: "zonos--header" }, this.headerText && (index.h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { class: "zonos--close-button", icon: index.h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), index.h("div", { key: '4c04cafeda45b8e4b6abc622e140c71507449f57', class: classes.classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, index.h("slot", { key: '9da41cdcfe580bb41b672f8185552e29b269e5dd' })), this.footerRightAction && (index.h("div", { class: "zonos--footer" }, index.h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
+            ]) }, index.h("slot", { key: '524448bf4beb9024750c94d280c874f032de7902' })), this.footerRightAction && (index.h("div", { class: "zonos--footer" }, index.h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -446,11 +447,11 @@ const ZonosLogo = class {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (index.h(index.Host, { key: '7ddd949ab91ed0c61ee34ce6ee80da54b3ba3664', class: classes.classes(['zonos--elements zonos--logo', this.class]), style: {
+        return (index.h(index.Host, { key: '25b7723a73f8f8c7a28e8b2730b88f18d4f11fb7', class: classes.classes(['zonos--elements zonos--logo', this.class]), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, index.h("img", { key: '1a8d98f7d836f253a21654c84ab0251969362e2f', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
+            } }, index.h("img", { key: 'e7f15f665c2d3c579e8727f1dceefea0fd438d5d', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -460,7 +461,7 @@ const ChevronDownIcon = `<svg color="var(--amino-gray-400)" fill="none" height="
 
 const ChevronUpIcon = `<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M17.707 14.707a1 1 0 0 1-1.414 0L12 10.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l4.93-4.93a1.1 1.1 0 0 1 1.555 0l4.93 4.93a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>`;
 
-const zonosReviewCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--total-pay{margin:var(--amino-space-16) 0 var(--amino-space-32)}:host(.mobile){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:var(--amino-space-24);-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-4) 0;margin-bottom:var(--amino-space-8)}:host(.mobile) .zonos--title{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;gap:var(--amino-space-8)}:host(.mobile) .zonos--total-pay{margin:0}";
+const zonosReviewCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:-webkit-sticky;position:sticky;top:0;background-color:var(--amino-gray-0);z-index:1}:host .zonos--total-pay{margin:var(--amino-space-16) 0 var(--amino-space-32)}:host(.mobile){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:var(--amino-space-24);-ms-flex-pack:justify;justify-content:space-between;padding:var(--amino-space-4) 0;margin-bottom:var(--amino-space-8);background-color:transparent}:host(.mobile) .zonos--title{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;gap:var(--amino-space-8)}:host(.mobile) .zonos--total-pay{margin:0}";
 const ZonosReviewStyle0 = zonosReviewCss;
 
 const ZonosReview = class {
@@ -471,10 +472,10 @@ const ZonosReview = class {
         this.isMobile = false;
     }
     handleWindowResize() {
-        this.isMobile = submitGtag.isCheckoutMobile(this.mobile);
+        this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
     }
     componentWillLoad() {
-        this.isMobile = submitGtag.isCheckoutMobile(this.mobile);
+        this.isMobile = isCheckoutMobile.isCheckoutMobile(this.mobile);
     }
     render() {
         const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';
@@ -509,7 +510,7 @@ const ZonosReview = class {
 };
 ZonosReview.style = ZonosReviewStyle0;
 
-const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:calc(100% - 10px)}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
+const zonosShippingCss = ".sc-zonos-shipping-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-shipping-h *.sc-zonos-shipping{font-family:var(--font-family, Inter), Inter}.sc-zonos-shipping-h img.sc-zonos-shipping{max-width:100%}.sc-zonos-shipping-h dl.sc-zonos-shipping,.sc-zonos-shipping-h dd.sc-zonos-shipping,.sc-zonos-shipping-h h1.sc-zonos-shipping,.sc-zonos-shipping-h h2.sc-zonos-shipping,.sc-zonos-shipping-h h3.sc-zonos-shipping,.sc-zonos-shipping-h h4.sc-zonos-shipping,.sc-zonos-shipping-h h5.sc-zonos-shipping,.sc-zonos-shipping-h h6.sc-zonos-shipping,.sc-zonos-shipping-h hr.sc-zonos-shipping,.sc-zonos-shipping-h figure.sc-zonos-shipping,.sc-zonos-shipping-h p.sc-zonos-shipping,.sc-zonos-shipping-h pre.sc-zonos-shipping{margin:0}.sc-zonos-shipping-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-shipping-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.sc-zonos-shipping-h .zonos--title.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--shipping-method-title.sc-zonos-shipping{margin-bottom:var(--amino-space-16)}.sc-zonos-shipping-h .zonos-shipping-rich-radio.sc-zonos-shipping{margin-bottom:var(--amino-space-24)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping{margin-bottom:var(--amino-space-20);overflow:auto;padding:5px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar{width:10px}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-track{background:var(--amino-gray-50)}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-shipping-h .zonos--group.sc-zonos-shipping::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;bottom:0;margin-top:var(--amino-space-12);background:var(--primary-color, var(--amino-gray-0))}.sc-zonos-shipping-h .zonos--group-btn.sc-zonos-shipping zonos-button.sc-zonos-shipping{width:100%}.sc-zonos-shipping-h zonos-banner.sc-zonos-shipping{margin-top:var(--amino-space-24)}";
 const ZonosShippingStyle0 = zonosShippingCss;
 
 const ZonosShipping = class {
@@ -574,9 +575,9 @@ const ZonosShipping = class {
                 value: item.id,
             };
         });
-        return (index.h(index.Host, { class: "zonos--shipping zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Shipping information')), index.h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, localization.translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (index.h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (index.h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) }))), index.h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        return (index.h(index.Host, { class: "zonos--shipping zonos--elements" }, index.h("div", { class: "zonos--group" }, index.h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, localization.translate('Shipping information')), index.h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, localization.translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (index.h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (index.h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) })), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
-            variant: this.submitBtnType }, localization.translate('Go to payment'))));
+            variant: this.submitBtnType }, localization.translate('Go to payment'))))));
     }
     static get watchers() { return {
         "disabled": ["watchFormComplete"]