@zonos/elements 1.3.241 → 1.3.243

package/dist/cjs/{paypal-ef7e2610.js → paypal-0f4b77fd.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 const zonosStore = require('./zonosStore-37a4b4f4.js');
-const cart = require('./cart-376f0f29.js');
-const localization = require('./localization-08aa03da.js');
+const cart = require('./cart-6d254f1a.js');
+const localization = require('./localization-ec5a6780.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const isDarkColor = require('./isDarkColor-878e600e.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');

package/dist/cjs/{placeTestOrder-427786ae.js → placeTestOrder-6cc9d040.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const cart = require('./cart-376f0f29.js');
-const localization = require('./localization-08aa03da.js');
+const cart = require('./cart-6d254f1a.js');
+const localization = require('./localization-ec5a6780.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 
 const placeTestOrder = async () => {

package/dist/cjs/{renderCheckoutCurrency-9057dec8.js → renderCheckoutCurrency-df60f3a6.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const cart = require('./cart-376f0f29.js');
-const localization = require('./localization-08aa03da.js');
+const cart = require('./cart-6d254f1a.js');
+const localization = require('./localization-ec5a6780.js');
 
 const getDisplayCurrency = () => {
     var _a, _b;

package/dist/cjs/zonos-address-display_9.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const localization = require('./localization-08aa03da.js');
+const localization = require('./localization-ec5a6780.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
-const cart = require('./cart-376f0f29.js');
+const cart = require('./cart-6d254f1a.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
@@ -169,9 +169,9 @@ const ZonosAddressSuggestions = class {
         return segments;
     }
     render() {
-        return (index.h(index.Host, { key: '7ab44ba24fdcc22c2f3dd06985d1d6e8e3c64cbc', class: "zonos--address-suggestions", role: "group", style: {
+        return (index.h(index.Host, { key: '00686fe9c09bb764f18548ea438f9fa39deb5413', class: "zonos--address-suggestions", role: "group", style: {
                 '--zonos--border-radius': getBorderRadius.getBorderRadius(),
-            } }, index.h("ul", { key: 'e23aa07baa70336a9f37752d0de3725580684c88', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (index.h("li", { key: 'd2208ef720bdff1d57937394266046edd7ef9e3b', "aria-selected": false, class: "powered-by option", role: "option" }, index.h("div", { key: '4f834a0f3e8fa8c378e824894a51171543b61339', class: "powered-by-container" }, index.h("zonos-text", { key: '8f92d8f3e4421048881036ba3e43de25e9cfe005', type: "caption" }, "Suggestions powered by"), index.h("zonos-text", { key: 'efe2dcb973a7fd34a76d107dca1f7a6ac4d7112b', type: "semiBoldLabel" }, "Google")), index.h("zonos-button", { key: '8f59caa99bec12c4ac4c42e5b4108443f6e90446', "aria-label": "Clear suggestions", icon: index.h("zonos-icon", { content: RemoveIcon$1 }), noBackground: true, onClick: () => {
+            } }, index.h("ul", { key: '89c0f50ea5bbabdf3efe3e58bd4d7a7c96f33b47', "aria-label": "Suggestions", class: "wrapper", role: "listbox" }, !!this.localSuggestions.length && (index.h("li", { key: 'ad3286076569701e1318c93b7ebc674ad85a7ae6', "aria-selected": false, class: "powered-by option", role: "option" }, index.h("div", { key: 'bdcb8cc865eb77b3a0189c8d88a7698d405c332e', class: "powered-by-container" }, index.h("zonos-text", { key: '1db905ec989aef0f8dd30835657d1dd1b1836fc2', type: "caption" }, "Suggestions powered by"), index.h("zonos-text", { key: '55c36840f1bb850ce135bd238d01b9a3055463d7', type: "semiBoldLabel" }, "Google")), index.h("zonos-button", { key: 'e89402e39549482c41b046fb534e727690e43100', "aria-label": "Clear suggestions", icon: index.h("zonos-icon", { content: RemoveIcon$1 }), noBackground: true, onClick: () => {
                 this.localSuggestions = [];
             } }))), this.localSuggestions.map(suggestion => (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
@@ -1361,10 +1361,10 @@ const ZonosAddress = class {
             this.country = localization.localizationStore.selectedCountryCode;
         }
         // 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: 'dc41846f9f8cb0b10e4148ad5523f26186970888', class: classes.classes([
+        return (index.h(index.Host, { key: '7214ab1c348c1236dfa65f3bb20866fb3262c35d', class: classes.classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, index.h("zonos-text", { key: '38e4bc053824f1f7f6c15bb3ade74b16e0f977e1', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("slot", { key: 'e7b702568f26e4cff082ba88a3f68bc9d32d6bd2', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, index.h("zonos-text", { key: '3ce287d8ffd3f5fdb4745311d17992c0b9ee9678', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), index.h("slot", { key: '0e33486852d6512b054bb480d0295ce97d2667eb', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1388,7 +1388,7 @@ ZonosAddress.style = ZonosCustomAddressStyle0;
 
 const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;
 
-const zonosDialogCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0;top:0;background:var(--zonos-elements-backdrop-color);position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2147483009;background:var(--zonos-elements-gray-0);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10))}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--zonos-elements-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:2147483008;background:var(--zonos-elements-gray-0);max-width:90vw;max-height:90vh;min-height:var(--zonos--min-height, auto);height:var(--zonos--height, auto);width:var(--zonos--width, auto);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));outline:none;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:16px 24px}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--zonos-elements-size-md);height:var(--zonos-elements-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--zonos-elements-radius-10);-ms-flex-item-align:start;align-self:flex-start}:host .zonos--header .zonos--close-button:hover{background:var(--zonos-elements-hover-color)}:host .zonos--body{padding:8px 24px;max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:16px 24px}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:2147483008;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:2147483009;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
+const zonosDialogCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0;top:0;background:var(--zonos-elements-backdrop-color);position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;gap:4px;z-index:2147483009;background:var(--zonos-elements-gray-0);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10))}:host .zonos--loading-text,:host .zonos--loading-title{max-width:100%;padding:0 32px;text-align:center}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--zonos-elements-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:2147483008;background:var(--zonos-elements-gray-0);max-width:90vw;max-height:90vh;min-height:var(--zonos--min-height, auto);height:var(--zonos--height, auto);width:var(--zonos--width, auto);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));outline:none;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:16px 24px}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--zonos-elements-size-md);height:var(--zonos-elements-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--zonos-elements-radius-10);-ms-flex-item-align:start;align-self:flex-start}:host .zonos--header .zonos--close-button:hover{background:var(--zonos-elements-hover-color)}:host .zonos--body{padding:8px 24px;max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:16px 24px}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:2147483008;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:2147483009;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
 const ZonosDialogStyle0 = zonosDialogCss;
 
 const ZonosDialog = class {
@@ -1474,7 +1474,7 @@ const ZonosDialog = class {
         const borderStyle = getBorderRadius.getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (index.h(index.Host, { key: '1b53109e3598536674ab0a2cac4c5fa52c2e501d', class: classes.classes([
+        return (index.h(index.Host, { key: '3764ddd25cf29e7b5ebc420c2fc47de213d2bcd6', class: classes.classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -1486,10 +1486,10 @@ const ZonosDialog = class {
                 '--zonos--height': this.height || 'initial',
                 '--zonos--min-height': this.minHeight || '500px',
                 '--zonos--width': this.width,
-            } }, index.h("div", { key: '3fcaf891d98fad2a7bb0b0eb7285c991a9df7610', class: "zonos--backdrop" }), index.h("div", { key: '16fe5c3ad017d19c52e85cf18eec31fe3960f61d', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, index.h("div", { key: '1fae701967b41b2d96e709078f6958867a7ef1c0', class: "zonos--dialog" }, this.isLoading && (index.h("div", { key: 'ba0bc9a7bf0f8fd097e874b371fc563ee9fab255', class: "zonos--loading" }, index.h("zonos-spinner", { key: 'c4599e9093de3e0ee56f094fc9bbe33d474cf966', size: 30 }))), (this.headerText || !this.noCloseButton) && (index.h("div", { key: '827ff1f3a08f9efe7e1cb10315e62b68ed634087', class: "zonos--header" }, this.headerText && (index.h("h3", { key: 'd6e000b787d758080aa9283f59a3b577ef9d9bde', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { key: '8efcb22ad294f4feab8f1a89e893a4f3d8a48d05', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), index.h("div", { key: '2bf643dcdcd2fdffdaccba0169386cd0a5a4ccd6', class: classes.classes([
+            } }, index.h("div", { key: 'aded0d33e4605a40b107e89fcbc95ef024b187f7', class: "zonos--backdrop" }), index.h("div", { key: '55500b0bb118be90d474fc758f979ac3f317d52e', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, index.h("div", { key: 'a21fa7808c16df11cab8800279774abb38828f1b', class: "zonos--dialog" }, this.isLoading && (index.h("div", { key: 'b8e9229591ad83446400deafdf5bee284091f1d9', class: "zonos--loading" }, index.h("zonos-spinner", { key: 'f284c8604d8710be60a725fa8c23c04f32e44b1f', size: 30 }), this.loadingTitle && (index.h("zonos-text", { key: '16d605c9272d9bdbb2d8b7f2d5685978cc2cf6eb', class: "zonos--loading-title", size: "l", weight: 700 }, this.loadingTitle)), this.loadingText && (index.h("zonos-text", { key: '0e9acec26d8502781ad8c853959740ece8fd2907', class: "zonos--loading-text" }, this.loadingText)))), (this.headerText || !this.noCloseButton) && (index.h("div", { key: '77d2dac98791ddea7e3bc3ab0e740c0b170072d8', class: "zonos--header" }, this.headerText && (index.h("h3", { key: 'f8b07366a4a9d5cd1686d7e3663ce0f6ba401ec7', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (index.h("zonos-button", { key: '8c82dbf7d636715f3a391fe13ced4e3bc0ee079c', class: "zonos--close-button", icon: index.h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), index.h("div", { key: 'd44cbf2cbb551043502e5e0c80048adeffaaf303', class: classes.classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, index.h("slot", { key: '1b8886abbfac00704f004c6ca14d96fdbe87e751' })), index.h("slot", { key: '85c94e23f5686e4f91af598bffb14e38a09855a4', name: "dialog-footer" })))));
+            ]) }, index.h("slot", { key: '508a3fcc6fbfdec55033a584e235ba9fd9e7448f' })), index.h("slot", { key: '1f24ec0974cd1def288b744d6aa68399367aefd8', name: "dialog-footer" })))));
     }
     static get assetsDirs() { return ["assets"]; }
 };
@@ -7519,24 +7519,24 @@ const ZonosStripePhoneInput = class {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (index.h(index.Host, { key: '93c761af05a92758af8d5b76c3c9630a8c45c46a', class: classes.classes([
+        return (index.h(index.Host, { key: '3f073620fb9250208be54ffd6d0dfbc8c5da7d6f', class: classes.classes([
                 'zonos--phone-input zonos--elements',
                 isDark && 'dark',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: '0c814da4f10b83027d2a91429c44aae0b2ae851f', class: classes.classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: 'bdaf73f9a51fa2a39dd9684584ec4f032ea39d00', class: classes.classes([
                 'zonos--label-wrapper',
                 this.disabled && 'disabled',
                 this.isFocused && 'focused',
                 hasContent && 'has-content',
                 this.error && 'has-error',
                 this.inputLabel && 'has-label',
-            ]) }, index.h("select", { key: 'f18e02540fc979f090ec9e8445a9c24a726bd3c5', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, index.h("select", { key: 'ad4477bfc5e1971a5e7a34a5e06b699c6115b3d3', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
             var _a;
             return (index.h("option", { key: option.countryCode, selected: option.countryCode === ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode), value: option.countryCode }, option.displayName, " (+", option.phoneCode, ")"));
-        })), index.h("div", { key: 'c0bc6f60fede12a27057b64c699701dc311a3c2b', class: "zonos--input-group" }, index.h("div", { key: '3329b43c5ff8b267d01dfc6611736f8fda70d30e', class: "zonos--select-wrapper" }, index.h("div", { key: 'f43b2ba959ef2f7e616b3930df5eba5bf73ab0c6', class: "zonos--country-select" }, index.h("div", { key: '357bcd7ec8d96df1e115820f26444422ef683a86', class: "zonos--country-select-content" }, this.selectedCountry && (index.h("div", { key: '050444251b375b60ab7de9cf8220b6270a1e7681', class: "zonos--country-select-selected" }, index.h("div", { key: '37653be1e802cf065827bde91b46a4a650ab153e', class: "zonos--country-flag-wrapper" }, index.h("zonos-country-flag", { key: '2d1cde80d3b5a8248a2b824e5cacb438026d3d6f', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), index.h("div", { key: 'c75d6600d1ba864b7e8e8b3ae60faaa459d7578f', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), index.h("div", { key: 'da61185205072f591ab0f21e1f09e6ba87f3b49d', class: "zonos--select-chevron-wrapper" }, index.h("zonos-icon", { key: '6f9fd827cba11e442ec96d9706efb939aa3164e3', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), index.h("div", { key: '795d59db0eb10fa4ab31b9939a9f0522004c71b1', class: classes.classes([
+        })), index.h("div", { key: '39d6ae20a62bfa7d21a3d4a1143a4b42a87bbc41', class: "zonos--input-group" }, index.h("div", { key: 'dba0974115ce5e4f3f22689f406c3defe2989b29', class: "zonos--select-wrapper" }, index.h("div", { key: '3231072a3dba2d61a5567ad8ceacd871b3b7657c', class: "zonos--country-select" }, index.h("div", { key: '3fd9224b1ef63a6e2e1c11c19a1dddbaa1337ad1', class: "zonos--country-select-content" }, this.selectedCountry && (index.h("div", { key: 'ba2d811521d84bbe3c0a2749307cce90e9347457', class: "zonos--country-select-selected" }, index.h("div", { key: '4b21bf8d586b51f3d0ef9ba881e5a73d4742d440', class: "zonos--country-flag-wrapper" }, index.h("zonos-country-flag", { key: 'ed2fca152a8f1064051758bf624bb02d0af61379', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), index.h("div", { key: 'ee43fea008cfde320a15a151a07f1295dd0d77dd', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), index.h("div", { key: '28961fccf5ad433b3a81fab91773d8d8d4e17b30', class: "zonos--select-chevron-wrapper" }, index.h("zonos-icon", { key: '8233c34fdbf221f2289506b57b3fd429ec048df3', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon$1, iconColor: "gray-800" }))))), index.h("div", { key: '0d947d929218bac9929f411c5989a18ab36054fe', class: classes.classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, index.h("input", Object.assign({ key: '64aa071d2e28691bf12493703b32657c45d9d9ae' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (index.h("div", { key: 'd543673e6cbc526ffcebf6eca0cf8ab2edda644b', class: "zonos--floated-label" }, index.h("label", { key: '432a710de6b9af0c97bc6c50f57079e12806f62d', htmlFor: this.inputId }, this.inputLabel || localization.translate('Phone number'))))))), this.error && (index.h("zonos-text", { key: '719f193ea85683b50d1fa7a7855bae22241b0693', textColor: "red-600" }, this.error))));
+            ]) }, index.h("input", Object.assign({ key: '16956304c84642b82039e0180aea6ce96269799a' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (index.h("div", { key: '57f3d9ad16aee89271c134d409abb6383b225f55', class: "zonos--floated-label" }, index.h("label", { key: 'd2af8c75f82df1b3176f708bea86a18b7ee4840d', htmlFor: this.inputId }, this.inputLabel || localization.translate('Phone number'))))))), this.error && (index.h("zonos-text", { key: '3bb993c5e780f4394d141d7c62bd1f8ea4d1fc70', textColor: "red-600" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -7652,14 +7652,14 @@ const ZonosStripeSelect = class {
         const fontSize = zonosStore.zonosStore.appearance.fontSizeInputValue || 16;
         const hasContent = this.internalValue || this.selectPlaceholder;
         const showClearButton = this.isClearable && this.internalValue && !this.isDisabled;
-        return (index.h(index.Host, { key: 'c43f75cfc3d57e8d31f7ec06fb66eff71a5c87b9', class: classes.classes([
+        return (index.h(index.Host, { key: '61d5f0b2c7fafd2df4ea6beacc8500bad9b64da7', class: classes.classes([
                 'zonos--select zonos--elements',
                 isDark && 'dark',
                 this.isError && 'has-error',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: '818e99e207482930dcccc26e55fcda5a283e366f', class: classes.classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius.getBorderRadius(), '--zonos--font-family': zonosStore.zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, index.h("div", { key: '63198cbb818342d8deecbe1e0c5d9978a51df064', class: classes.classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, index.h("select", Object.assign({ key: 'c67ba73746f8cfd05801033a6620b25c82b86069' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
+            ]) }, index.h("select", Object.assign({ key: '8bbe869f708d9f87f9dc6d66a8f573a795399e23' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes.classes([
                 'zonos--floated-select',
                 !!this.selectLabel && 'has-label',
                 hasContent && 'has-content',
@@ -7669,9 +7669,9 @@ const ZonosStripeSelect = class {
                 this.selectChange.emit(select.value);
                 this.selectedValue = select.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, required: this.required }), index.h("option", { key: 'f7969953300914c34ad3d76c69586e30e12c3117', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || localization.translate('Select')), this.internalOptions.map(option => (index.h("option", { key: option.value, selected: this.internalValue === option.value ||
+            }, required: this.required }), index.h("option", { key: '6ae19c6b12976cd32e6efc9771a000b29945ee71', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || localization.translate('Select')), this.internalOptions.map(option => (index.h("option", { key: option.value, selected: this.internalValue === option.value ||
                 // Sometimes google returns the label not the code for some countries
-                this.internalValue === option.label, value: option.value }, option.label)))), index.h("div", { key: 'c093e68c826469ec22e69f154d5edfb342047d94', class: "zonos--floated-label" }, index.h("label", { key: 'b04836cba30a354efaf1a367cd7f5c629bc5ddc2', htmlFor: this.selectId }, this.selectLabel)), index.h("div", { key: '0a1bf1ce6b64f3a0c37495d8ad716078bceb757b', class: "zonos--actions-wrapper" }, showClearButton && (index.h("button", { key: '3e690372f4df9d21754a2903819b17186d26654f', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, index.h("zonos-icon", { key: '9f761f5e9b416356ec7c4681d144adcf01fb8149', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), index.h("zonos-icon", { key: 'f5594d827dcb7f9812df7479bb8d199e2fcc4a1a', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (index.h("zonos-text", { key: '79dce6ac5a8183ad68eaf1a6e60b15864df65d25', textColor: "red-600" }, this.error))));
+                this.internalValue === option.label, value: option.value }, option.label)))), index.h("div", { key: 'a21b56d32839669a95c3d36f215f85bb94f6bb1a', class: "zonos--floated-label" }, index.h("label", { key: 'fb710c149659ece3d433f57d8d27562395bb2a52', htmlFor: this.selectId }, this.selectLabel)), index.h("div", { key: '0f57b78a3fdafc0ff7bd1a5a2ead9e37be7ee915', class: "zonos--actions-wrapper" }, showClearButton && (index.h("button", { key: 'ffc562b96195b1990a26d4091971ddb2293b6ac7', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, index.h("zonos-icon", { key: 'c3eb42b95f57df3187772d1502e07a7052a72913', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), index.h("zonos-icon", { key: '7a6581602aa531d5d9bdea82c3f50952d901bad4', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (index.h("zonos-text", { key: 'b1a3819c075d5e8f70020274145675c8d19b143a', textColor: "red-600" }, this.error))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
 const throttle = require('./throttle-7dd64984.js');
-const cart = require('./cart-376f0f29.js');
-const localization = require('./localization-08aa03da.js');
+const cart = require('./cart-6d254f1a.js');
+const localization = require('./localization-ec5a6780.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const shouldRenderTaxIdInput = require('./shouldRenderTaxIdInput-eda13ef8.js');
@@ -328,11 +328,11 @@ const ZonosAddress = class {
             this.isAddressFilled = true;
         }
         // 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: '7762b1dbeeff9d45721bf7a2efbe4bf4c2c29551', class: classes.classes([
+        return (index.h(index.Host, { key: 'b02889c4677a27a8c54a411d66fb31e15af78e1a', class: classes.classes([
                 'zonos--address',
                 'zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, this.titleText && (index.h("zonos-text", { key: '5f266b4562eb78eb8f5b1374f195501abc44c9f7', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("slot", { key: 'bfcee78353455a66c6dec12432bfeff69dc9a10b', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), index.h("div", { key: 'd005a517dc93439d13f38750df8e09f884ad898c', class: "zonos--address-component" })));
+            ]) }, this.titleText && (index.h("zonos-text", { key: 'f52beb7ed6699ec1c73ee35a3436798a1fea38c7', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("slot", { key: '7c9602892de932e8a3f90a37b53a936f39082916', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), index.h("div", { key: '8ea6698f5b9d3bb525942c146e2cf67fefad6ad8', class: "zonos--address-component" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -704,7 +704,7 @@ const ZonosLoadingOverlay = class {
         this.size = 40;
     }
     render() {
-        return (index.h(index.Host, { key: 'eee6eb4eb40c18ccdd24d57d98be8b90eadccf23', class: classes.classes(['zonos--elements', this.open && 'zonos--open']) }, index.h("div", { key: '4bca110e058cb5cbf4c86351aa56d251792ab325', class: "zonos--loading-overlay" }, index.h("zonos-spinner", { key: '513b8d669ab13896442c0b1048609a3f3e0ed6f5', size: this.size, spinnerColor: this.spinnerColor }))));
+        return (index.h(index.Host, { key: '13154a3c9250f15d8dca292f0673c6465bfb15e0', class: classes.classes(['zonos--elements', this.open && 'zonos--open']) }, index.h("div", { key: '4470fccd21e58bd7959ef3e20c8775ac637cace0', class: "zonos--loading-overlay" }, index.h("zonos-spinner", { key: '5b32b821cea982866da56176eeaafd5d8958f25d', size: this.size, spinnerColor: this.spinnerColor }))));
     }
 };
 ZonosLoadingOverlay.style = ZonosLoadingOverlayStyle0;

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

@@ -6,10 +6,10 @@ const index = require('./index-69fa8852.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const classes = require('./classes-b7918f56.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
-const cart = require('./cart-376f0f29.js');
-const localization = require('./localization-08aa03da.js');
+const cart = require('./cart-6d254f1a.js');
+const localization = require('./localization-ec5a6780.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
-const paypal = require('./paypal-ef7e2610.js');
+const paypal = require('./paypal-0f4b77fd.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 require('./isDarkColor-878e600e.js');
 
@@ -259,7 +259,7 @@ const ZonosPayment = 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: 'ca6da9e9fadd891c2a748186c30fdfcf8f57ffc5', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '8083de8ff08f5cd7f3ddaf6190844ee11b72ed4a', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: 'cf88a4f5b989e1911b089ce9298945307085455a', class: "zonos--payment-component" }), index.h("div", { key: 'ff768b9ca8dd0a60605196f50bcba3c542cc2206', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: '1fb61e01184d3a0b2dc079ae468e96175d9f6518', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '3860ff7fc2656ff045ce09c0de2e14aa7a22e194', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '3cabad9c095f2eeba8cfc464374ca9abfc2af5ee', class: "zonos--payment-component" }), index.h("div", { key: '9e2b13a0d8131a5513f99e2a6436ca3c5f03d7cf', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -323,7 +323,7 @@ const ZonosPaypalPayment = class {
         this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
     }
     render() {
-        return (index.h(index.Host, { key: '503c2a2f4d6dd0d6c10468f4bbe915610cf7008e', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: 'c1d2c15bf6f096c3666f9d4e8085c5fbe2c637a7', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: '35387382aaa81e3f8e025e8f3503be41b86e2355', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: '34fad15dee67d8b913071a59d35b1c2317d4d3a0', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-376f0f29.js');
-const localization = require('./localization-08aa03da.js');
-const renderCheckoutCurrency = require('./renderCheckoutCurrency-9057dec8.js');
+const cart = require('./cart-6d254f1a.js');
+const localization = require('./localization-ec5a6780.js');
+const renderCheckoutCurrency = require('./renderCheckoutCurrency-df60f3a6.js');
 const cleanHtmlMarkdown = require('./cleanHtmlMarkdown-577d0a77.js');
 const classes = require('./classes-b7918f56.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
-const hasInclusivePrice = require('./hasInclusivePrice-2e306ea5.js');
-const paypal = require('./paypal-ef7e2610.js');
+const hasInclusivePrice = require('./hasInclusivePrice-ac0440e7.js');
+const paypal = require('./paypal-0f4b77fd.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
 const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
 const VarianceTest = require('./VarianceTest-bec00ea8.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const placeTestOrder = require('./placeTestOrder-427786ae.js');
+const placeTestOrder = require('./placeTestOrder-6cc9d040.js');
 const isDarkColor = require('./isDarkColor-878e600e.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 const updateCheckoutSessionAttributes = require('./updateCheckoutSessionAttributes-3a1db9de.js');
@@ -1742,11 +1742,11 @@ const ZonosRestState = class {
     }
     render() {
         const imageUrl = this.getImageRestState();
-        return (index.h(index.Host, { key: '333c158c20af14bcfc310b7fae19cadb9ffaea01', class: classes.classes(['zonos--elements zonos--restState']), style: {
+        return (index.h(index.Host, { key: '2d9be86849c6ff2f039ca21676cbdf912538eb1d', class: classes.classes(['zonos--elements zonos--restState']), style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '0076afaff9200094d45bd4321ea7b1d0a4954a81', class: "zonos--restState-image" }, index.h("img", { key: '4ef3b7ee4f62175e06da9a7d2453603ba6cf9fb8', alt: this.restStateType, onError: () => {
+            } }, index.h("div", { key: 'f538f05fe92eca4ee05daf72ee3387bea337c20c', class: "zonos--restState-image" }, index.h("img", { key: 'cc752b1ed3e9e656810c901df9f8b19462efc978', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), index.h("div", { key: 'b5033ee1f4618732f14a9dd3c05d0271329083df', class: "content" }, index.h("zonos-text", { key: '2f21d52a7bb0b410590cb0768102155843e21038', class: "title", type: "boldSubheader" }, this.restStateTitle), index.h("zonos-text", { key: '48222ff00921961e770d20b817563d9a903a9e98', class: "subtitle" }, this.restStateSubtitle)), index.h("div", { key: 'ac6c100c85bd166945d8394cf61ab6baaa19cb3f', class: "action" }, index.h("slot", { key: 'cec63c8cbac43d402333c7ab6aba0ac3bd9bab36' }))));
+            }, src: imageUrl })), index.h("div", { key: '4729c415dbac98876fcd907437b8df21b925dec5', class: "content" }, index.h("zonos-text", { key: '39313c8c71d228cd1076e809146ad7ac3d877a9a', class: "title", type: "boldSubheader" }, this.restStateTitle), index.h("zonos-text", { key: '69813bd32ae3867ebebcc511655f2052b1175945', class: "subtitle" }, this.restStateSubtitle)), index.h("div", { key: '98b085930fd76e2ff095cc971ae4699041c1a550', class: "action" }, index.h("slot", { key: '188318643319081914ed30aad91de5f15b014953' }))));
     }
     static get assetsDirs() { return ["assets"]; }
 };

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-69fa8852.js');
-const cart = require('./cart-376f0f29.js');
-const paypal = require('./paypal-ef7e2610.js');
-const localization = require('./localization-08aa03da.js');
+const cart = require('./cart-6d254f1a.js');
+const paypal = require('./paypal-0f4b77fd.js');
+const localization = require('./localization-ec5a6780.js');
 const zonosStore = require('./zonosStore-37a4b4f4.js');
 const buildCartItemsByTempCart = require('./buildCartItemsByTempCart-edddbf4b.js');
 const handleFetch = require('./handleFetch-954f30e1.js');
@@ -108,10 +108,23 @@ const isDisabledCountry = (showLog = true) => {
     return false;
 };
 
-const isShippableCountry = (showLog = true) => {
+const isShippableCountry = (showLog = true, 
+/**
+ * If provided, will check if the country is shippable based on the provided country code instead of the Hello selected country code
+ */
+providedCountryCode) => {
+    var _a;
     if (!localization.localizationStore.localizationLoaded) {
         return false;
     }
+    if (providedCountryCode) {
+        const isProvidedCountryCodeShippableCountry = !!((_a = localization.localizationStore.shippingZoneCountries) === null || _a === void 0 ? void 0 : _a[providedCountryCode]) &&
+            !zonosStore.zonosStore.disabledCountries.includes(providedCountryCode);
+        if (showLog && !isProvidedCountryCodeShippableCountry) {
+            VarianceTest.log(`Checkout: ${providedCountryCode} is not a shippable country: ${isProvidedCountryCodeShippableCountry}`);
+        }
+        return isProvidedCountryCodeShippableCountry;
+    }
     // if localization is loaded and the localization is not a shippable country, keep the original click event
     if (!localization.localizationStore.isShippableCountry) {
         if (showLog) {
@@ -122,15 +135,70 @@ const isShippableCountry = (showLog = true) => {
     return true;
 };
 
+const SHIP_TO_COUNTRY_SELECTOR = 'select[name="shippingAddress.countryCode"]';
 /**
- * Watch for changes in domestic checkout step, this is to redirect user to home page and open checkout if user enters the ship to country that's in the shipping zone
+ * Watch for changes in domestic checkout step. Redirects user to home page to open international checkout when user selects a country in the international shipping zone.
  * @note Only works on default bigcommerce checkout page
  */
-const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShippingAddressSessionFound, }) => {
+const watchImmediateBigcommerceDomesticCheckoutRedirect = ({ domesticRedirectedBtnSelector, onInternationalCheckoutSelected, onShippingAddressSessionFound, }) => {
     if (!window.Zonos.isBigCommerce) {
         return;
     }
-    const observer = new MutationObserver(async () => {
+    /**
+     * Keep checking
+     */
+    const handleInternationalCheckoutSelected = async () => {
+        const shipToCountryElement = document.querySelector(SHIP_TO_COUNTRY_SELECTOR);
+        if (!shipToCountryElement) {
+            return false;
+        }
+        const shippingCountry = shipToCountryElement.value;
+        if (!shippingCountry) {
+            // do nothing if shipping country is not found
+            return false;
+        }
+        if (!isShippableCountry(false, shippingCountry)) {
+            // do nothing if shipping country is not shippable
+            return false;
+        }
+        if (onInternationalCheckoutSelected) {
+            await onInternationalCheckoutSelected();
+        }
+        // update the country code in localization store and check if it's shippable
+        localization.localizationStoreUpdateSelectedCountryCode({
+            isInitializing: false,
+            newSelectedCountryCode: shippingCountry,
+        });
+        const shippingAddress = {
+            address1: '',
+            address2: '',
+            city: '',
+            countryCode: shippingCountry,
+            firstName: '',
+            lastName: '',
+            phone: '',
+            postalCode: '',
+            stateOrProvince: '',
+        };
+        // save the shipping address to session storage
+        cart.stripeStoreSaveDomesticShippingSession({
+            address1: shippingAddress.address1,
+            address2: shippingAddress.address2,
+            city: shippingAddress.city,
+            countryCode: shippingAddress.countryCode,
+            firstName: shippingAddress.firstName,
+            lastName: shippingAddress.lastName,
+            phone: shippingAddress.phone,
+            postalCode: shippingAddress.postalCode,
+            state: shippingAddress.stateOrProvince,
+        });
+        // redirect to home page, home page then will open the checkout dialog if having domestic shipping session
+        window.location.href = '/';
+        return true;
+    };
+    let isProcessing = false;
+    let intervalCreated = false;
+    const observer = new MutationObserver(() => {
         const domesticRedirectedButton = document.querySelector(domesticRedirectedBtnSelector);
         const shippingAddressSession = cart.stripeStoreGetDomesticShippingSession();
         // append a hidden button to the body if the shipping address session is found
@@ -145,84 +213,47 @@ const watchBigcommerceDomesticCheckout = ({ domesticRedirectedBtnSelector, onShi
             observer.disconnect();
             return;
         }
-        const shipToCountryElement = document.querySelector('select[name="shippingAddress.countryCode"]');
-        // make sure the continue button is available
-        const shippingContinueBtnEle = document.querySelector('#checkout-shipping-continue');
-        if (!shipToCountryElement || !shippingContinueBtnEle) {
+        const isBigcommerceDomesticCheckoutPage = window.location.pathname.includes('/checkout') &&
+            window.Zonos.isBigCommerce;
+        const shipToCountryElement = document.querySelector(SHIP_TO_COUNTRY_SELECTOR);
+        // Should just disconnect the observer if it's not bigcommerce domestic checkout page
+        if (!isBigcommerceDomesticCheckoutPage) {
+            observer.disconnect();
+            return;
+        }
+        // Shouldn't do anything if it's not bigcommerce domestic checkout page
+        if (!shipToCountryElement) {
             // do nothing if shipping country and the continue button is not found
             return;
         }
-        // disconnect the observer after we found the shipping continue button
+        VarianceTest.log('Domestic checkout found - Listening for shipping country change', 'info', {
+            value: shipToCountryElement.value,
+        });
+        // Should not create a new interval if it's already created
+        if (intervalCreated) {
+            return;
+        }
+        intervalCreated = true;
+        // disconnect the observer after we know that's bigcommerce domestic checkout page
         observer.disconnect();
-        shippingContinueBtnEle.addEventListener('click', async (e) => {
-            var _a, _b;
-            const shippingCountry = shipToCountryElement.value;
-            if (!shippingCountry) {
-                // do nothing if shipping country is not found
+        const interval = setInterval(async () => {
+            if (isProcessing) {
                 return;
             }
-            // update the country code in localization store and check if it's shippable
-            localization.localizationStoreUpdateSelectedCountryCode({
-                isInitializing: false,
-                newSelectedCountryCode: shippingCountry,
-            });
-            // do nothing if the country is still domestic
-            if (!isShippableCountry(false)) {
-                // cleanup the domestic shipping session if it's domestic because we will open the intl checkout after redirecting
-                cart.stripeStoreCleanupDomesticShippingSession();
-                return;
+            isProcessing = true;
+            try {
+                const isInternationalCountrySelected = await handleInternationalCheckoutSelected();
+                // When isInternationalCountrySelected is true, user will be redirected shortly, so we can stop the checking interval here
+                if (isInternationalCountrySelected) {
+                    clearInterval(interval);
+                    return;
+                }
+                isProcessing = false;
             }
-            // get value of shipping address state
-            const shipToFormElement = document.querySelector('form');
-            if (!shipToFormElement) {
-                return;
+            catch (_a) {
+                isProcessing = false;
             }
-            const formData = new FormData(shipToFormElement);
-            const shipAddress1Element = document.querySelector('input#addressLine1Input');
-            const shippingAddress = {
-                address1: (_a = formData.get('shippingAddress.address1')) !== null && _a !== void 0 ? _a : 
-                // in Canada, the address1 is not included in the form, try to get value from input id instead.
-                (shipAddress1Element && shipAddress1Element.value),
-                address2: formData.get('shippingAddress.address2'),
-                city: formData.get('shippingAddress.city'),
-                countryCode: formData.get('shippingAddress.countryCode'),
-                firstName: formData.get('shippingAddress.firstName'),
-                lastName: formData.get('shippingAddress.lastName'),
-                phone: formData.get('shippingAddress.phone'),
-                postalCode: formData.get('shippingAddress.postalCode'),
-                stateOrProvince: (_b = formData.get('shippingAddress.stateOrProvince')) !== null && _b !== void 0 ? _b : formData.get('shippingAddress.stateOrProvinceCode'),
-            };
-            if (Object.values(shippingAddress).some(value => value === undefined || value === null)) {
-                handleFetch.logError('One or more shipping address field is missing', Object.entries(shippingAddress));
-                void handleFetch.sendErrorLog({
-                    endpoint: 'No endpoint, domestic checkout form missing fields',
-                    errors: [
-                        'Bigcommerce: One or more shipping address field is missing in the domestic checkout form',
-                        JSON.stringify(Object.entries(shippingAddress)),
-                    ],
-                    metadata: {
-                        storeId: zonosStore.zonosStore.storeId,
-                    },
-                });
-                return;
-            }
-            // save the shipping address to session storage
-            cart.stripeStoreSaveDomesticShippingSession({
-                address1: shippingAddress.address1,
-                address2: shippingAddress.address2,
-                city: shippingAddress.city,
-                countryCode: shippingAddress.countryCode,
-                firstName: shippingAddress.firstName,
-                lastName: shippingAddress.lastName,
-                phone: shippingAddress.phone,
-                postalCode: shippingAddress.postalCode,
-                state: shippingAddress.stateOrProvince,
-            });
-            e.preventDefault();
-            e.stopPropagation();
-            // redirect to home page, home page then will open the checkout dialog if having domestic shipping session
-            window.location.href = '/';
-        });
+        }, 1000);
     });
     observer.observe(document.body, {
         childList: true,
@@ -516,6 +547,10 @@ const ZonosCheckout = class {
          * Whether or not the fedex shipping dialog should be shown
          */
         this.shouldShowFedexShippingConsentDialog = false;
+        /**
+         * Whether or not the domestic checkout dialog should be shown
+         */
+        this.detectedDomesticCheckoutDialogOpen = false;
         /**
          * Client secret value
          */
@@ -1367,8 +1402,13 @@ const ZonosCheckout = class {
             cart.cartStore.isStagingMode = this.overrideStagingMode;
         }
         // check if bigcommerce, if user enters the shipping address that's in the shipping zone at bigcommerce checkout
-        watchBigcommerceDomesticCheckout({
+        watchImmediateBigcommerceDomesticCheckoutRedirect({
             domesticRedirectedBtnSelector: CheckoutConfig.domesticRedirectedBtnSelector,
+            onInternationalCheckoutSelected: async () => {
+                this.detectedDomesticCheckoutDialogOpen = true;
+                // wait for 2 secs
+                await new Promise(resolve => setTimeout(resolve, 2000));
+            },
             onShippingAddressSessionFound: shippingAddressSession => {
                 // prefilled the default address if shipping address session is found for checkout on open
                 this.defaultAddress = [
@@ -1881,7 +1921,7 @@ const ZonosCheckout = class {
                 this.isMobile && 'mobile',
                 this.isIframed && 'iframed',
                 this.hiddenMode && 'hidden-mode',
-            ]) }, this.preview ? (renderContent()) : (index.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())), index.h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: localization.translate("Don't close"), dialogConfirmBtnText: localization.translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: localization.translate('Would you like to close checkout and return to the site?'), dialogTitle: localization.translate('Are you sure?'), onCancelClicked: () => {
+            ]) }, this.preview ? (renderContent()) : (index.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())), index.h("zonos-dialog", { isLoading: true, loadingText: localization.translate('You will be redirected to international checkout shortly.'), loadingTitle: localization.translate('We detected that you are shipping to an international address.'), noClickOutside: true, noCloseButton: true, open: this.detectedDomesticCheckoutDialogOpen, width: "450px" }), index.h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: localization.translate("Don't close"), dialogConfirmBtnText: localization.translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: localization.translate('Would you like to close checkout and return to the site?'), dialogTitle: localization.translate('Are you sure?'), onCancelClicked: () => {
                 this.confirmDialogOpen = false;
             },
             // Mark user selected confirm to close the dialog