@zonos/elements 1.3.183 → 1.3.185

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f90486e.js');
-const zonosStore = require('./zonosStore-3812b318.js');
+const index = require('./index-0993f42d.js');
+const zonosStore = require('./zonosStore-adc42868.js');
 const classes = require('./classes-b7918f56.js');
 
 const RemoveLineIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f90486e.js');
-const zonosStore = require('./zonosStore-3812b318.js');
+const index = require('./index-0993f42d.js');
+const zonosStore = require('./zonosStore-adc42868.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosBannerCss = ":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{border-radius:var(--zonos-elements-radius-10);padding:16px;background:var(--zonos-elements-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:0px;grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:4px}:host(.info){background-color:var(--zonos-elements-blue-100);border:1px solid var(--zonos-elements-blue-200)}:host(.success){background-color:var(--zonos-elements-green-100);border:1px solid var(--zonos-elements-green-200)}:host(.error){background-color:var(--zonos-elements-red-100);border:1px solid var(--zonos-elements-red-200)}:host(.warning){background-color:var(--zonos-elements-orange-100);border:1px solid var(--zonos-elements-orange-200)}";

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f90486e.js');
-const zonosStore = require('./zonosStore-3812b318.js');
+const index = require('./index-0993f42d.js');
+const zonosStore = require('./zonosStore-adc42868.js');
+const helpers = require('./helpers-5bdbb68c.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-94ef609c.js');
+const getBorderRadius = require('./getBorderRadius-87f3b69c.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
-const isDarkColor = require('./isDarkColor-ec4a4e7d.js');
+const isDarkColor = require('./isDarkColor-d0c67c3d.js');
 const styles = require('./styles-d1e64fb9.js');
 
 /**
@@ -35,6 +36,10 @@ const ZonosButtonStyle0 = zonosButtonCss;
 const ZonosButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Inherited attributes from the host element
+         */
+        this.inheritedAttributes = {};
         /**
          * Detect if the button has an content
          */
@@ -138,6 +143,12 @@ const ZonosButton = class {
     }
     componentWillLoad() {
         this.iconChangeHandler();
+        this.inheritedAttributes = Object.assign(Object.assign({}, helpers.inheritAriaAttributes(this.ele)), helpers.inheritAttributes(this.ele, [
+            'tabindex',
+            'title',
+            'data-form-type',
+            'dir',
+        ]));
     }
     render() {
         const { backgroundColor, color, spinnerColor, useDarkHoverSubtle } = this.getButtonStyle();
@@ -148,13 +159,13 @@ const ZonosButton = class {
         const borderStyle = getBorderRadius.getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (index.h(index.Host, { key: '71402d1acee8307c6ab3c3fb4b552c2df3800ced', class: classes.classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles.styles({
+        return (index.h(index.Host, { key: '88cc4ce2ac8a82e62ac4a5a3828724b92da1db60', class: classes.classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles.styles({
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--color': color,
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
                 '--zonos--font-weight': this.bold ? 'bold' : 'normal',
-            }) }, index.h("button", { key: '7168a567c49b6ea6d77fa1fd329c478f2c7b5512', class: classes.classes([
+            }) }, index.h("button", Object.assign({ key: '4037731e2337e441a2eeb5e28433ba8426cb75b2' }, this.inheritedAttributes, { class: classes.classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -169,7 +180,7 @@ const ZonosButton = class {
                 backgroundColor && variant === 'standard' && 'override-background',
             ]), disabled: disabled, style: {
                 justifyContent: this.justifyContent,
-            } }, this.loading && (index.h("div", { key: 'cc1d53b41d4ae20f7bad93a73b539b7de16ea032', class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { key: '83043fb631ff7e246aa69b0d4ef8322439043b4a', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: 'b1431364d8a5034d98b6bc4e3acfd4631ec93ec7', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }), this.loading && (index.h("div", { key: '09f824b2106313200deaa1bdcb7afc3e3b161911', class: "zonos--spinner-wrapper" }, index.h("zonos-spinner", { key: 'b094e740a91c49a14a31fc56142dccf1062a584b', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, index.h("slot", { key: '8bfc81ae6f5f114a0255854aa79db32a5ee39259', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get delegatesFocus() { return true; }
     get ele() { return index.getElement(this); }

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f90486e.js');
-const zonosStore = require('./zonosStore-3812b318.js');
+const index = require('./index-0993f42d.js');
+const zonosStore = require('./zonosStore-adc42868.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-94ef609c.js');
+const getBorderRadius = require('./getBorderRadius-87f3b69c.js');
 
 const zonosCardCss = ":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 .styled-card{border:var(--zonos-elements-border);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-6));padding:var(--spacing, 24px);text-align:left;background-color:var(--zonos--background-color);overflow:hidden}:host .styled-card hr{margin-left:calc(var(--spacing, 24px) * -1);margin-right:calc(var(--spacing, 24px) * -1)}:host .styled-card .card-header{margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-bottom:var(--spacing, 24px);border-bottom:var(--zonos-elements-border);height:65px;line-height:65px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .styled-card .card-header h5{margin-bottom:0;-ms-flex:1;flex:1}:host .styled-card .card-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:calc(var(--spacing, 24px) * -1);padding:var(--spacing, 24px);border-top:var(--zonos-elements-border);background:var(--zonos-elements-surface-color-secondary);margin-top:var(--spacing, 24px);border-bottom-left-radius:var(--zonos-elements-radius-8);border-bottom-right-radius:var(--zonos-elements-radius-8);height:var(--footerHeight)}";
 const ZonosCardStyle0 = zonosCardCss;

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

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f90486e.js');
-const cart = require('./cart-3d0c0f0b.js');
+const index = require('./index-0993f42d.js');
+const cart = require('./cart-f9df3ac8.js');
 const classes = require('./classes-b7918f56.js');
-const paypal = require('./paypal-9eaa9196.js');
-const zonosStore = require('./zonosStore-3812b318.js');
+const paypal = require('./paypal-5e73c8f5.js');
+const zonosStore = require('./zonosStore-adc42868.js');
 const handleFetch = require('./handleFetch-969d05d8.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
-const getBorderRadius = require('./getBorderRadius-94ef609c.js');
+const getBorderRadius = require('./getBorderRadius-87f3b69c.js');
 const ILanguage = require('./ILanguage-98b04442.js');
-const isDarkColor = require('./isDarkColor-ec4a4e7d.js');
+const isDarkColor = require('./isDarkColor-d0c67c3d.js');
 const isColorVariable = require('./isColorVariable-525dbfa7.js');
 const containsNonLatinChars = require('./containsNonLatinChars-2be5129b.js');
 const TaxId = require('./TaxId-4632639d.js');
@@ -2241,13 +2241,14 @@ const taxIdValidationResult = ({ shippingCountry, taxId, }) => {
     };
 };
 
-const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--zonos--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:20px}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:32px}.sc-zonos-customer-info-h .zonos--address.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info+.zonos--address.sc-zonos-customer-info{margin-bottom:0}.sc-zonos-customer-info-h zonos-button.sc-zonos-customer-info{-webkit-box-shadow:0 0 1px 0 var(--zonos-elements-gray-600);box-shadow:0 0 1px 0 var(--zonos-elements-gray-600)}.sc-zonos-customer-info-h .zonos--error-banner.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--tax-id-input.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:20px;overflow:auto;padding:5px;-ms-scroll-chaining:none;overscroll-behavior:contain}.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(--zonos-elements-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:-5px;padding-top:8px;margin-top:12px;background:var(--zonos--primary-color, var(--zonos-elements-gray-0));z-index:1}.sc-zonos-customer-info-h .zonos--group-btn.sc-zonos-customer-info zonos-button.sc-zonos-customer-info{width:100%}";
+const zonosCustomerInfoCss = ".sc-zonos-customer-info-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-customer-info-h *.sc-zonos-customer-info{font-family:var(--zonos--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:20px}.sc-zonos-customer-info-h .zonos--link-authentication.sc-zonos-customer-info{margin-bottom:32px}.sc-zonos-customer-info-h .zonos--address.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--checkbox.sc-zonos-customer-info+.zonos--address.sc-zonos-customer-info{margin-bottom:0}.sc-zonos-customer-info-h zonos-button.sc-zonos-customer-info{-webkit-box-shadow:0 0 1px 0 var(--zonos-elements-gray-600);box-shadow:0 0 1px 0 var(--zonos-elements-gray-600)}.sc-zonos-customer-info-h .zonos--error-banner.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--tax-id-input.sc-zonos-customer-info{margin-bottom:16px}.sc-zonos-customer-info-h .zonos--group.sc-zonos-customer-info{margin-bottom:20px;overflow:auto;padding:5px;-ms-scroll-chaining:none;overscroll-behavior:contain}.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(--zonos-elements-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:-5px;padding-top:8px;margin-top:12px;background:var(--zonos--primary-color, var(--zonos-elements-gray-0));z-index:2}.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 {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.continueClicked = index.createEvent(this, "continueClicked", 7);
+        this.testContinueClicked = index.createEvent(this, "testContinueClicked", 7);
         /**
          * Handler for invalid characters in the address
          */
@@ -2304,6 +2305,12 @@ const ZonosCustomerInfo = class {
          * handler for continue button click
          */
         this.continueClickHandler = async () => {
+            var _a;
+            (_a = this.testContinueClicked) === null || _a === void 0 ? void 0 : _a.emit({
+                billingAddress: cart.stripeStore.stripeBillingAddressEventData,
+                sameAsBilling: cart.stripeStore.stripeShippingSameAsBilling,
+                shippingAddress: cart.stripeStore.stripeAddressEventData,
+            });
             if (!this.handleValidate()) {
                 // scroll to the top zonos-banner
                 setTimeout(() => {
@@ -2323,25 +2330,77 @@ const ZonosCustomerInfo = class {
             if (hasInvalidCharacters) {
                 return;
             }
-            this.continueClicked.emit();
+            this.continueClicked.emit({
+                billingAddress: cart.stripeStore.stripeBillingAddressEventData,
+                sameAsBilling: cart.stripeStore.stripeShippingSameAsBilling,
+                shippingAddress: cart.stripeStore.stripeAddressEventData,
+            });
+        };
+        /**
+         * Validate the custom address form, turn the flag showError to false if the form is valid, or vice versa
+         */
+        this.validateCustomAddressForm = (type) => {
+            const useShippingAddressErrors = cart.stripeStore.stripeShippingSameAsBilling || type === 'shipping';
+            const customAddressErrors = useShippingAddressErrors
+                ? cart.stripeStore.customAddressErrors
+                : cart.stripeStore.customBillingAddressErrors;
+            const { city, firstName, lastName, line1, phone, postalCode, state } = customAddressErrors;
+            // check to see if there is any form error or not.
+            let hasError = false;
+            if (city ||
+                firstName ||
+                lastName ||
+                line1 ||
+                phone ||
+                postalCode ||
+                state) {
+                hasError = true;
+            }
+            // show error if there is any form error
+            if (useShippingAddressErrors) {
+                cart.stripeStore.customAddressErrors = Object.assign(Object.assign({}, customAddressErrors), { showError: hasError });
+            }
+            else {
+                cart.stripeStore.customBillingAddressErrors = Object.assign(Object.assign({}, customAddressErrors), { showError: hasError });
+            }
+            return {
+                isValid: !hasError,
+            };
         };
         this.handleValidate = () => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const stripeShippingAddressEventData = cart.stripeStore.stripeAddressEventData;
             const stripeBillingAddressEventData = cart.stripeStore.stripeBillingAddressEventData;
             const stripeLinkEventData = cart.stripeStore.stripeLinkEventData;
             // if the shipping is different from billing, we need to make sure the billing address is valid and disable the button if it's not
-            const isValidBilling = cart.stripeStore.stripeShippingSameAsBilling
+            const isValidStripeBilling = cart.stripeStore.stripeShippingSameAsBilling
                 ? !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete)
                 : !!(stripeBillingAddressEventData === null || stripeBillingAddressEventData === void 0 ? void 0 : stripeBillingAddressEventData.complete);
-            const isValidShipping = !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete);
+            const isValidStripeShipping = !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete);
             const isValidLink = !!(stripeLinkEventData === null || stripeLinkEventData === void 0 ? void 0 : stripeLinkEventData.complete);
             // display errors on fields that are invalid
             void ((_a = cart.stripeStore.stripeAddressElement) === null || _a === void 0 ? void 0 : _a.getValue());
             void ((_b = cart.stripeStore.stripeBillingAddressElement) === null || _b === void 0 ? void 0 : _b.getValue());
+            // if the custom address form is enabled, use the custom address form validation result, otherwise use the stripe validation result
+            const isValidBilling = ((_c = zonosStore.zonosStore.genericSettings) === null || _c === void 0 ? void 0 : _c.shouldEnabledCustomAddress)
+                ? this.validateCustomAddressForm('billing').isValid
+                : isValidStripeBilling;
+            // if the custom address form is enabled, use the custom address form validation result, otherwise use the stripe validation result
+            const isValidShipping = ((_d = zonosStore.zonosStore.genericSettings) === null || _d === void 0 ? void 0 : _d.shouldEnabledCustomAddress)
+                ? this.validateCustomAddressForm('shipping').isValid
+                : isValidStripeShipping;
             if (!isValidLink && (stripeLinkEventData === null || stripeLinkEventData === void 0 ? void 0 : stripeLinkEventData.empty)) {
                 this.isEmailError = true;
             }
+            handleFetch.log('==> isValidBilling', 'info', isValidBilling, {
+                address: cart.stripeStore.stripeBillingAddressEventData,
+                errors: cart.stripeStore.customBillingAddressErrors,
+            });
+            handleFetch.log('==> isValidShipping', 'info', isValidShipping, {
+                address: cart.stripeStore.stripeAddressEventData,
+                errors: cart.stripeStore.customAddressErrors,
+            });
+            handleFetch.log('==> isValidLink', 'info', isValidLink);
             // validate tax id input if it's required for specific countries, optional otherwise
             const { error, valid } = taxIdValidationResult({
                 shippingCountry: this.shippingCountry,
@@ -2377,11 +2436,35 @@ const ZonosCustomerInfo = class {
                 state: addressValue.address.state || '',
             };
         };
+        this.renderAddressComponent = (type) => {
+            var _a, _b;
+            if (!cart.localizationStore.selectedCountryCode) {
+                void handleFetch.sendErrorLog({
+                    endpoint: 'NO_COUNTRY_SELECTED_WHEN_RENDERING_ADDRESS_COMPONENT',
+                    errors: ['No country selected when rendering address component'],
+                    metadata: {
+                        type,
+                    },
+                    shouldPostReleaseErrorReporting: true,
+                });
+            }
+            // Only use the default address for shipping address
+            const defaultAddress = type === 'shipping' ? this.defaultAddress : [];
+            // Render custom address component if the custom address form is enabled
+            if (cart.localizationStore.selectedCountryCode &&
+                this.shouldEnabledCustomAddress &&
+                ((_b = (_a = zonosStore.zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.countryCustomAddressEnabled) === null || _b === void 0 ? void 0 : _b.includes(cart.localizationStore.selectedCountryCode))) {
+                return (index.h("zonos-custom-address", { defaultAddress: defaultAddress, titleText: cart.translate('Address'), type: type }));
+            }
+            // Render Stripe address component by default
+            return (index.h("zonos-address", { defaultAddress: defaultAddress, titleText: cart.translate('Address'), type: type }));
+        };
         this.continueLoading = false;
         this.submitBtnType = undefined;
         this.submitBtnColor = undefined;
         this.isMobile = false;
         this.defaultAddress = [];
+        this.shouldUseCustomAddressFormOverride = false;
         this.showErrorBanner = false;
         this.shippingCountry = '';
         this.isCheckingForRestrictedItems = false;
@@ -2390,8 +2473,15 @@ const ZonosCustomerInfo = class {
         this.invalidShippingCharacterList = null;
         this.invalidBillingCharacterList = null;
         this.openAddressValidationDialog = false;
+        this.shouldEnabledCustomAddress = false;
         this.isEmailError = false;
     }
+    watchShowErrorBanner() {
+        // start validate on typing after error banner is shown, and hide it if the form is complete
+        if (this.showErrorBanner) {
+            this.showErrorBanner = !this.handleValidate();
+        }
+    }
     checkInvalidCharacters(address) {
         if (!address) {
             return null;
@@ -2438,7 +2528,7 @@ const ZonosCustomerInfo = class {
             } }), this.taxIdErrorMessage && (index.h("zonos-text", { textColor: 'red-600', type: "caption" }, this.taxIdErrorMessage))));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!cart.stripeStore.stripeElements) {
             return null;
         }
@@ -2454,20 +2544,19 @@ const ZonosCustomerInfo = class {
             this.shippingCountry =
                 cart.stripeStore.stripeAddressEventData.value.address.country;
         }
+        this.shouldEnabledCustomAddress =
+            this.shouldUseCustomAddressFormOverride ||
+                !!((_b = zonosStore.zonosStore.genericSettings) === null || _b === void 0 ? void 0 : _b.shouldEnabledCustomAddress);
         const showBilling = !cart.stripeStore.stripeShippingSameAsBilling;
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = zonosStore.getZonosStoreTheme(zonosStore.zonosStore.appearance.theme);
         // Attempt to get the email from email from customer profile's locations, if not provided, just use the email from root customer profile
-        const defaultEmail = ((_b = this.defaultAddress.find(Boolean)) === null || _b === void 0 ? void 0 : _b.email) ||
-            ((_e = (_d = (_c = cart.stripeStore.customerProfile) === null || _c === void 0 ? void 0 : _c.locations) === null || _d === void 0 ? void 0 : _d.find(Boolean)) === null || _e === void 0 ? void 0 : _e.email) ||
-            ((_f = cart.stripeStore.customerProfile) === null || _f === void 0 ? void 0 : _f.email);
-        // start validate on typing after error banner is shown, and hide it if the form is complete
-        if (this.showErrorBanner) {
-            this.showErrorBanner = !this.handleValidate();
-        }
-        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" }, cart.translate('Customer information')), this.showErrorBanner && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, cart.translate('Missing required fields. Make sure all fields are completed.'))), index.h("zonos-link-authentication", { defaultEmail: defaultEmail, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: cart.translate('Contact') }), index.h("zonos-address", { defaultAddress: this.defaultAddress, titleText: cart.translate('Address'), type: "shipping" }), this.renderTaxIdInput(this.shippingCountry), index.h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: cart.stripeStore.stripeShippingSameAsBilling, label: cart.translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        const defaultEmail = ((_c = this.defaultAddress.find(Boolean)) === null || _c === void 0 ? void 0 : _c.email) ||
+            ((_f = (_e = (_d = cart.stripeStore.customerProfile) === null || _d === void 0 ? void 0 : _d.locations) === null || _e === void 0 ? void 0 : _e.find(Boolean)) === null || _f === void 0 ? void 0 : _f.email) ||
+            ((_g = cart.stripeStore.customerProfile) === null || _g === void 0 ? void 0 : _g.email);
+        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" }, cart.translate('Customer information')), this.showErrorBanner && (index.h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, cart.translate('Missing required fields. Make sure all fields are completed.'))), index.h("zonos-link-authentication", { defaultEmail: defaultEmail, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: cart.translate('Contact') }), this.renderAddressComponent('shipping'), this.renderTaxIdInput(this.shippingCountry), index.h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: cart.stripeStore.stripeShippingSameAsBilling, label: cart.translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 cart.stripeStore.stripeShippingSameAsBilling = e.detail;
-            } }), index.h("zonos-collapse", { collapsed: !showBilling }, index.h("zonos-address", { defaultAddress: this.defaultAddress, titleText: cart.translate('Billing address'), type: "billing" })), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            } }), index.h("zonos-collapse", { collapsed: !showBilling }, this.renderAddressComponent('billing')), index.h("div", { class: "zonos--group-btn" }, index.h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, cart.translate('Continue to shipping')))), cart.stripeStore.stripeAddressEventData && (index.h("zonos-address-update-dialog", { billingAddress: !cart.stripeStore.stripeShippingSameAsBilling &&
                 cart.stripeStore.stripeBillingAddressEventData
@@ -2485,6 +2574,9 @@ const ZonosCustomerInfo = class {
             }, shippingAddress: this.prepareAddressObject(cart.stripeStore.stripeAddressEventData), translatedBillingAddress: cart.stripeStore.translatedAddress.billingAddress, translatedShippingAddress: cart.stripeStore.translatedAddress.address }))));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "showErrorBanner": ["watchShowErrorBanner"]
+    }; }
 };
 ZonosCustomerInfo.style = ZonosCustomerInfoStyle0;
 

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

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f90486e.js');
-const cart = require('./cart-3d0c0f0b.js');
-const paypal = require('./paypal-9eaa9196.js');
-const zonosStore = require('./zonosStore-3812b318.js');
+const index = require('./index-0993f42d.js');
+const cart = require('./cart-f9df3ac8.js');
+const paypal = require('./paypal-5e73c8f5.js');
+const zonosStore = require('./zonosStore-adc42868.js');
 const handleFetch = require('./handleFetch-969d05d8.js');
 const classes = require('./classes-b7918f56.js');
 const createCustomEvent = require('./createCustomEvent-7b6fad95.js');
-const getBorderRadius = require('./getBorderRadius-94ef609c.js');
-const isDarkColor = require('./isDarkColor-ec4a4e7d.js');
+const getBorderRadius = require('./getBorderRadius-87f3b69c.js');
+const isDarkColor = require('./isDarkColor-d0c67c3d.js');
 const styles = require('./styles-d1e64fb9.js');
 const CheckoutConfig = require('./CheckoutConfig-f1442a60.js');
 const RemoveIcon = require('./RemoveIcon-081ac073.js');
@@ -308,7 +308,7 @@ const MessageIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none"
 </svg>
 `;
 
-const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-h *.sc-zonos-checkout{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout{-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:32px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--zonos--primary-color, var(--zonos-elements-gray-0));border-right:1px solid var(--zonos-elements-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--zonos-elements-gray-0)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--zonos-elements-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 8px 8px}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:24px}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--right-actions.sc-zonos-checkout{position:absolute;right:24px;top:24px;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo-wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;gap:16px;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--logo-wrapper.sc-zonos-checkout>*.sc-zonos-checkout{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout img.sc-zonos-checkout{max-height:72px}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:76px;margin-bottom:8px}.zonos--close-button.sc-zonos-checkout{-ms-flex-item-align:start;align-self:flex-start}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--zonos-elements-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:32px}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:12px;padding-bottom:76px}@media (max-width: 768px){.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding-bottom:0}}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2;border-right:none}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:16px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border:var(--zonos-elements-border);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));background-color:var(--zonos-elements-gray-50);padding:12px;margin-top:32px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--review.sc-zonos-checkout{margin-bottom:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--cart-items.sc-zonos-checkout{margin-top:8px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout zonos-checkout-footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}.iframed.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{-ms-scroll-chaining:chained;overscroll-behavior:auto}";
+const zonosCheckoutCss = ".sc-zonos-checkout-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-h *.sc-zonos-checkout{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-checkout-h img.sc-zonos-checkout{max-width:100%}.sc-zonos-checkout-h dl.sc-zonos-checkout,.sc-zonos-checkout-h dd.sc-zonos-checkout,.sc-zonos-checkout-h h1.sc-zonos-checkout,.sc-zonos-checkout-h h2.sc-zonos-checkout,.sc-zonos-checkout-h h3.sc-zonos-checkout,.sc-zonos-checkout-h h4.sc-zonos-checkout,.sc-zonos-checkout-h h5.sc-zonos-checkout,.sc-zonos-checkout-h h6.sc-zonos-checkout,.sc-zonos-checkout-h hr.sc-zonos-checkout,.sc-zonos-checkout-h figure.sc-zonos-checkout,.sc-zonos-checkout-h p.sc-zonos-checkout,.sc-zonos-checkout-h pre.sc-zonos-checkout{margin:0}.sc-zonos-checkout-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-h *.sc-zonos-checkout{-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar{width:10px}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-h *.sc-zonos-checkout::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;height:100%;overflow:hidden;border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10))}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex:1;flex:1;padding:32px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{background-color:var(--zonos--primary-color, var(--zonos-elements-gray-0));border-right:1px solid var(--zonos-elements-gray-200)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{background-color:var(--zonos-elements-gray-0)}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:100%;max-height:100%;height:100%;overflow:auto;-ms-flex-direction:column;flex-direction:column;background-color:var(--zonos-elements-gray-0);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:24px;padding-bottom:50px}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--header.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout .zonos--logo.sc-zonos-checkout{margin-bottom:0}.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout zonos-checkout-finish.sc-zonos-checkout{-ms-flex:1;flex:1}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{padding:0 8px 8px}.sc-zonos-checkout-h .zonos--left.sc-zonos-checkout .zonos--payment-error-banner.sc-zonos-checkout{margin-top:24px}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout{position:relative}.sc-zonos-checkout-h .zonos--right.sc-zonos-checkout .zonos--right-actions.sc-zonos-checkout{position:absolute;right:24px;top:24px;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--wrapper.sc-zonos-checkout{overflow:auto;max-height:100%;position:relative}.sc-zonos-checkout-h .flex--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:100%}.sc-zonos-checkout-h .zonos--logo-wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;gap:16px;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--logo-wrapper.sc-zonos-checkout>*.sc-zonos-checkout{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.sc-zonos-checkout-h .zonos--logo.sc-zonos-checkout img.sc-zonos-checkout{max-height:72px}.sc-zonos-checkout-h .zonos--checkout-default-message.sc-zonos-checkout{margin-left:76px;margin-bottom:8px}.zonos--close-button.sc-zonos-checkout{-ms-flex-item-align:start;align-self:flex-start}.preview.sc-zonos-checkout-h{min-width:500px;margin:auto;position:relative}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{border:var(--zonos-elements-border)}.preview.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{padding:32px}.hidden-mode.sc-zonos-checkout-h{height:0;opacity:0;pointer-events:none;position:absolute;visibility:hidden;width:0;z-index:-1}.mobile.sc-zonos-checkout-h{min-width:auto}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:auto;border-radius:0;max-height:100%;height:100%;border:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding:12px;padding-bottom:76px}@media (max-width: 768px){.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout,.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{padding-bottom:0}}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--left.sc-zonos-checkout{-ms-flex-order:2;order:2;border-right:none}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout{-ms-flex-order:1;order:1;padding-top:16px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border:var(--zonos-elements-border);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-10));background-color:var(--zonos-elements-gray-50);padding:12px;margin-top:32px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--review.sc-zonos-checkout{margin-bottom:0}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--right.sc-zonos-checkout .zonos--cart-items.sc-zonos-checkout{margin-top:8px}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout zonos-checkout-footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--wrapper.sc-zonos-checkout{max-height:100%}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--footer.sc-zonos-checkout{-ms-flex-order:3;order:3}.mobile.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout .zonos--done.sc-zonos-checkout{width:auto}.mobile.sc-zonos-checkout-h .zonos--cart-subtotal.sc-zonos-checkout{margin:0}.iframed.sc-zonos-checkout-h .zonos--content.sc-zonos-checkout{-ms-scroll-chaining:chained;overscroll-behavior:auto}";
 const ZonosCheckoutStyle0 = zonosCheckoutCss;
 
 // 90 minutes
@@ -354,6 +354,7 @@ const ZonosCheckout = class {
             const currentTime = new Date().getTime();
             const timeDiff = currentTime - cartCreatedAt;
             const timeDiffInSeconds = Math.floor(timeDiff / 1000);
+            handleFetch.log(`currentTime: ${currentTime} | cartCreatedAt: ${cartCreatedAt}`);
             handleFetch.log(`Cart has been created for ${timeDiffInSeconds / 60} minutes`);
             if (zonosStore.zonosStore.checkoutSettings.defaultCartExpiration) {
                 if (timeDiffInSeconds > zonosStore.zonosStore.checkoutSettings.defaultCartExpiration) {
@@ -471,6 +472,7 @@ const ZonosCheckout = class {
         };
         this.appearanceSettingsOverride = undefined;
         this.preview = false;
+        this.hiddenMode = false;
         this.mobile = false;
         this.overrideStagingMode = undefined;
         this.defaultAddress = [];
@@ -693,14 +695,19 @@ const ZonosCheckout = class {
     }
     attachCheckout() {
         const buttonAnchorSelector = zonosStore.zonosStore.checkoutSettings.placeOrderButtonSelector;
+        const alwaysTriggerInternationalCheckoutSelector = zonosStore.zonosStore.checkoutSettings.alwaysTriggerInternationalCheckoutSelector;
         handleFetch.log(`attach checkout ${buttonAnchorSelector}`);
+        handleFetch.log(`attach checkout to always trigger international checkout selector: ${alwaysTriggerInternationalCheckoutSelector}`);
         // allow to load checkout if cartData is ready (Checkout can be loaded right away if tempCartUUID is in the URL)
-        if (!buttonAnchorSelector && !window.Zonos.cartData) {
+        if (!buttonAnchorSelector &&
+            !alwaysTriggerInternationalCheckoutSelector &&
+            !window.Zonos.cartData) {
             // do nothing if button element is not found
             return;
         }
         const selectors = [
             buttonAnchorSelector,
+            alwaysTriggerInternationalCheckoutSelector,
             // hidden button for domestic redirected
             `#${CheckoutConfig.domesticRedirectedBtnSelector}`,
             // hidden button for legacy checkout facade and when client secret is provided in the query param or session storage when user is redirected from stripe
@@ -722,9 +729,15 @@ const ZonosCheckout = class {
                 var _a;
                 // Start tracking load time
                 const startTime = performance.now();
+                const isAlwaysTriggerInternationalCheckout = alwaysTriggerInternationalCheckoutSelector &&
+                    button.matches(alwaysTriggerInternationalCheckoutSelector);
+                const isAnyImmediateTrigger = button.matches(`#${CheckoutConfig.domesticRedirectedBtnSelector}`) ||
+                    button.matches(`#${CheckoutConfig.checkoutHiddenBtnSelector}`);
                 // Allow no country set for legacy facades. Otherwise enforce it being a shippable country and not disabled.
                 if (!window.Zonos.isLegacyCheckout &&
-                    (!isShippableCountry() || isDisabledCountry())) {
+                    (!isShippableCountry() || isDisabledCountry()) &&
+                    !isAlwaysTriggerInternationalCheckout &&
+                    !isAnyImmediateTrigger) {
                     return;
                 }
                 e.preventDefault();
@@ -827,7 +840,7 @@ const ZonosCheckout = class {
             }
             button.setAttribute('data-zonos-checkout-attached', 'true');
             // if this button is the hidden button, trigger the click event
-            if (button.matches(CheckoutConfig.domesticRedirectedBtnSelector)) {
+            if (button.matches(`#${CheckoutConfig.domesticRedirectedBtnSelector}`)) {
                 button.dispatchEvent(createCustomEvent.createCustomEvent('click'));
                 // cleanup shipping session after button is clicked
                 cart.stripeStoreCleanupDomesticShippingSession();
@@ -1434,6 +1447,7 @@ const ZonosCheckout = class {
                 this.preview && 'preview',
                 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: cart.translate("Don't close"), dialogConfirmBtnText: cart.translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: cart.translate('Would you like to close checkout and return to the site?'), dialogTitle: cart.translate('Are you sure?'), onCancelClicked: () => {
                 this.confirmDialogOpen = false;
             },

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f90486e.js');
-const zonosStore = require('./zonosStore-3812b318.js');
+const index = require('./index-0993f42d.js');
+const zonosStore = require('./zonosStore-adc42868.js');
 
 const zonosCollapseCss = ":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{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;overflow:hidden}:host div{position:relative}:host iframe{width:0;height:100%;position:absolute;top:0;border:0}";
 const ZonosCollapseStyle0 = zonosCollapseCss;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f90486e.js');
+const index = require('./index-0993f42d.js');
 
 function format(first, middle, last) {
     return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
@@ -22,7 +22,7 @@ const ZonosComponent = class {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return index.h("div", { key: '63b0c771133fd495f36e2c67601d64d6e56f5f2b' }, "Hello, World! I'm ", this.getText());
+        return index.h("div", { key: 'c35d0331d2d3724792e82b1d0a22d096fbbcddb7' }, "Hello, World! I'm ", this.getText());
     }
 };
 ZonosComponent.style = ZonosComponentStyle0;