@zonos/elements 1.3.184 → 1.3.186

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-d82f06f2.js';
-import { d as zonosStoreFontFamily } from './zonosStore-d3c5a0a5.js';
+import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
+import { d as zonosStoreFontFamily } from './zonosStore-1ce34e04.js';
 import { c as classes } from './classes-0d95c529.js';
 
 const RemoveLineIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-d82f06f2.js';
-import { d as zonosStoreFontFamily } from './zonosStore-d3c5a0a5.js';
+import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
+import { d as zonosStoreFontFamily } from './zonosStore-1ce34e04.js';
 import { c as classes } from './classes-0d95c529.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/esm/zonos-button_3.entry.js

@@ -1,9 +1,10 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-d82f06f2.js';
-import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-d3c5a0a5.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-a457c60c.js';
+import { z as zonosStore, d as zonosStoreFontFamily } from './zonosStore-1ce34e04.js';
+import { i as inheritAriaAttributes, a as inheritAttributes } from './helpers-2f6955b1.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-ada3ccad.js';
+import { g as getBorderRadius } from './getBorderRadius-a9a48f79.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
-import { i as isDarkColor } from './isDarkColor-446fccb7.js';
+import { i as isDarkColor } from './isDarkColor-62cbddb5.js';
 import { s as styles } from './styles-6fc2fad9.js';
 
 /**
@@ -31,6 +32,10 @@ const ZonosButtonStyle0 = zonosButtonCss;
 const ZonosButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Inherited attributes from the host element
+         */
+        this.inheritedAttributes = {};
         /**
          * Detect if the button has an content
          */
@@ -134,6 +139,12 @@ const ZonosButton = class {
     }
     componentWillLoad() {
         this.iconChangeHandler();
+        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.ele)), inheritAttributes(this.ele, [
+            'tabindex',
+            'title',
+            'data-form-type',
+            'dir',
+        ]));
     }
     render() {
         const { backgroundColor, color, spinnerColor, useDarkHoverSubtle } = this.getButtonStyle();
@@ -144,13 +155,13 @@ const ZonosButton = class {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '71402d1acee8307c6ab3c3fb4b552c2df3800ced', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '88cc4ce2ac8a82e62ac4a5a3828724b92da1db60', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--color': color,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--font-weight': this.bold ? 'bold' : 'normal',
-            }) }, h("button", { key: '7168a567c49b6ea6d77fa1fd329c478f2c7b5512', class: classes([
+            }) }, h("button", Object.assign({ key: '4037731e2337e441a2eeb5e28433ba8426cb75b2' }, this.inheritedAttributes, { class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -165,7 +176,7 @@ const ZonosButton = class {
                 backgroundColor && variant === 'standard' && 'override-background',
             ]), disabled: disabled, style: {
                 justifyContent: this.justifyContent,
-            } }, this.loading && (h("div", { key: 'cc1d53b41d4ae20f7bad93a73b539b7de16ea032', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '83043fb631ff7e246aa69b0d4ef8322439043b4a', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'b1431364d8a5034d98b6bc4e3acfd4631ec93ec7', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }), this.loading && (h("div", { key: '09f824b2106313200deaa1bdcb7afc3e3b161911', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'b094e740a91c49a14a31fc56142dccf1062a584b', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '8bfc81ae6f5f114a0255854aa79db32a5ee39259', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get delegatesFocus() { return true; }
     get ele() { return getElement(this); }

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host } from './index-d82f06f2.js';
-import { d as zonosStoreFontFamily } from './zonosStore-d3c5a0a5.js';
+import { r as registerInstance, h, H as Host } from './index-a457c60c.js';
+import { d as zonosStoreFontFamily } from './zonosStore-1ce34e04.js';
 import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-ada3ccad.js';
+import { g as getBorderRadius } from './getBorderRadius-a9a48f79.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/esm/zonos-cart-items_13.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-d82f06f2.js';
-import { e as cartStore, E as currencyFormat, r as translate, M as cartStoreHasOneEligibleItem, N as stripeStoreApplyPromoCode, O as stripeStoreRemovePromoCode, f as stripeStore, C as stripeStoreReset, d as stripeStoreRetrievePayment, t as trackConversionEvent, P as stripeStoreResetPromoCode, Q as stripeStoreMessageBasedOnStatus, l as localizationStore, x as cartStoreNextStep, R as stripeStoreTranslateAddressToLatin, S as cartStoreUpdateSelectedShippingOption, T as cartStoreGetShippingTransitInfo, U as sortServiceLevelOptionsByAmount } from './cart-3fb04f1f.js';
+import { r as registerInstance, a as getAssetPath, h, H as Host, F as Fragment, c as createEvent, d as getElement } from './index-a457c60c.js';
+import { e as cartStore, E as currencyFormat, r as translate, M as cartStoreHasOneEligibleItem, N as stripeStoreApplyPromoCode, O as stripeStoreRemovePromoCode, f as stripeStore, C as stripeStoreReset, d as stripeStoreRetrievePayment, t as trackConversionEvent, P as stripeStoreResetPromoCode, Q as stripeStoreMessageBasedOnStatus, l as localizationStore, x as cartStoreNextStep, R as stripeStoreTranslateAddressToLatin, S as cartStoreUpdateSelectedShippingOption, T as cartStoreGetShippingTransitInfo, U as sortServiceLevelOptionsByAmount } from './cart-4725a63b.js';
 import { c as classes } from './classes-0d95c529.js';
-import { s as submitGtag, c as paypalStoreReset, b as paypalStore, i as isContrastColor } from './paypal-1f2e863c.js';
-import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-d3c5a0a5.js';
+import { s as submitGtag, c as paypalStoreReset, b as paypalStore, i as isContrastColor } from './paypal-a09943f4.js';
+import { z as zonosStore, g as getZonosStoreTheme, d as zonosStoreFontFamily } from './zonosStore-1ce34e04.js';
 import { h as handleFetch, l as log, s as sendErrorLog, j as jsonParse, g as getIsTestMode, d as allLogs, i as isCheckoutMobile, b as logError, a as getIsStagingMode } from './handleFetch-621e45bc.js';
 import { c as createCustomEvent } from './createCustomEvent-58159025.js';
-import { g as getBorderRadius } from './getBorderRadius-ada3ccad.js';
+import { g as getBorderRadius } from './getBorderRadius-a9a48f79.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
-import { i as isDarkColor, t as tinycolor } from './isDarkColor-446fccb7.js';
+import { i as isDarkColor, t as tinycolor } from './isDarkColor-62cbddb5.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
 import { c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
 import { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-915ef042.js';
@@ -2237,13 +2237,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) {
         registerInstance(this, hostRef);
         this.continueClicked = createEvent(this, "continueClicked", 7);
+        this.testContinueClicked = createEvent(this, "testContinueClicked", 7);
         /**
          * Handler for invalid characters in the address
          */
@@ -2300,6 +2301,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: stripeStore.stripeBillingAddressEventData,
+                sameAsBilling: stripeStore.stripeShippingSameAsBilling,
+                shippingAddress: stripeStore.stripeAddressEventData,
+            });
             if (!this.handleValidate()) {
                 // scroll to the top zonos-banner
                 setTimeout(() => {
@@ -2319,25 +2326,77 @@ const ZonosCustomerInfo = class {
             if (hasInvalidCharacters) {
                 return;
             }
-            this.continueClicked.emit();
+            this.continueClicked.emit({
+                billingAddress: stripeStore.stripeBillingAddressEventData,
+                sameAsBilling: stripeStore.stripeShippingSameAsBilling,
+                shippingAddress: 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 = stripeStore.stripeShippingSameAsBilling || type === 'shipping';
+            const customAddressErrors = useShippingAddressErrors
+                ? stripeStore.customAddressErrors
+                : 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) {
+                stripeStore.customAddressErrors = Object.assign(Object.assign({}, customAddressErrors), { showError: hasError });
+            }
+            else {
+                stripeStore.customBillingAddressErrors = Object.assign(Object.assign({}, customAddressErrors), { showError: hasError });
+            }
+            return {
+                isValid: !hasError,
+            };
         };
         this.handleValidate = () => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const stripeShippingAddressEventData = stripeStore.stripeAddressEventData;
             const stripeBillingAddressEventData = stripeStore.stripeBillingAddressEventData;
             const stripeLinkEventData = 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 = stripeStore.stripeShippingSameAsBilling
+            const isValidStripeBilling = 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 = stripeStore.stripeAddressElement) === null || _a === void 0 ? void 0 : _a.getValue());
             void ((_b = 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.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.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;
             }
+            log('==> isValidBilling', 'info', isValidBilling, {
+                address: stripeStore.stripeBillingAddressEventData,
+                errors: stripeStore.customBillingAddressErrors,
+            });
+            log('==> isValidShipping', 'info', isValidShipping, {
+                address: stripeStore.stripeAddressEventData,
+                errors: stripeStore.customAddressErrors,
+            });
+            log('==> isValidLink', 'info', isValidLink);
             // validate tax id input if it's required for specific countries, optional otherwise
             const { error, valid } = taxIdValidationResult({
                 shippingCountry: this.shippingCountry,
@@ -2373,11 +2432,35 @@ const ZonosCustomerInfo = class {
                 state: addressValue.address.state || '',
             };
         };
+        this.renderAddressComponent = (type) => {
+            var _a, _b;
+            if (!localizationStore.selectedCountryCode) {
+                void 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 (localizationStore.selectedCountryCode &&
+                this.shouldEnabledCustomAddress &&
+                ((_b = (_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.countryCustomAddressEnabled) === null || _b === void 0 ? void 0 : _b.includes(localizationStore.selectedCountryCode))) {
+                return (h("zonos-custom-address", { defaultAddress: defaultAddress, titleText: translate('Address'), type: type }));
+            }
+            // Render Stripe address component by default
+            return (h("zonos-address", { defaultAddress: defaultAddress, titleText: 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;
@@ -2386,8 +2469,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;
@@ -2434,7 +2524,7 @@ const ZonosCustomerInfo = class {
             } }), this.taxIdErrorMessage && (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 (!stripeStore.stripeElements) {
             return null;
         }
@@ -2450,20 +2540,19 @@ const ZonosCustomerInfo = class {
             this.shippingCountry =
                 stripeStore.stripeAddressEventData.value.address.country;
         }
+        this.shouldEnabledCustomAddress =
+            this.shouldUseCustomAddressFormOverride ||
+                !!((_b = zonosStore.genericSettings) === null || _b === void 0 ? void 0 : _b.shouldEnabledCustomAddress);
         const showBilling = !stripeStore.stripeShippingSameAsBilling;
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = getZonosStoreTheme(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 = 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 = 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 (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: defaultEmail, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), this.renderTaxIdInput(this.shippingCountry), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: 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 = 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 = stripeStore.customerProfile) === null || _g === void 0 ? void 0 : _g.email);
+        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: defaultEmail, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), this.renderAddressComponent('shipping'), this.renderTaxIdInput(this.shippingCountry), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 stripeStore.stripeShippingSameAsBilling = e.detail;
-            } }), h("zonos-collapse", { collapsed: !showBilling }, h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Billing address'), type: "billing" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, bold: true, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            } }), h("zonos-collapse", { collapsed: !showBilling }, this.renderAddressComponent('billing')), h("div", { class: "zonos--group-btn" }, 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 }, translate('Continue to shipping')))), stripeStore.stripeAddressEventData && (h("zonos-address-update-dialog", { billingAddress: !stripeStore.stripeShippingSameAsBilling &&
                 stripeStore.stripeBillingAddressEventData
@@ -2481,6 +2570,9 @@ const ZonosCustomerInfo = class {
             }, shippingAddress: this.prepareAddressObject(stripeStore.stripeAddressEventData), translatedBillingAddress: stripeStore.translatedAddress.billingAddress, translatedShippingAddress: stripeStore.translatedAddress.address }))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "showErrorBanner": ["watchShowErrorBanner"]
+    }; }
 };
 ZonosCustomerInfo.style = ZonosCustomerInfoStyle0;
 

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

@@ -1,12 +1,12 @@
-import { r as registerInstance, h, H as Host, F as Fragment } from './index-d82f06f2.js';
-import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as stripeStoreRetrievePayment, e as cartStore, f as stripeStore, g as cartStoreUpdateItems, h as cartStoreReset, j as cartStoreResetTabItems, k as cartStoreClearCheckoutInterval, m as stripeStoreInitCheckoutSession, n as stripeStoreGetPaymentIntent, o as cartStoreStartCheckoutInterval, t as trackConversionEvent, p as getCheckoutSessionBody, q as cartStoreUpdateToErrorState, r as translate, u as getZCountryUrlParam, v as cartStoreSetCheckoutSession, w as stripeStorePrefetchLandedCost, x as cartStoreNextStep, y as stripeStoreUpdateCheckoutSessionBaseCurrency, z as stripeStoreHandleInventoryCheck, A as stripeStoreConfirmPayment, B as stripeStoreHandleInventoryRefund, C as stripeStoreReset, D as localizationStoreOnUpdate, E as currencyFormat } from './cart-3fb04f1f.js';
-import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalInitScript, b as paypalStore } from './paypal-1f2e863c.js';
-import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-d3c5a0a5.js';
+import { r as registerInstance, h, H as Host, F as Fragment } from './index-a457c60c.js';
+import { l as localizationStore, s as stripeStoreGetDomesticShippingSession, a as localizationStoreUpdateSelectedCountryCode, b as stripeStoreCleanupDomesticShippingSession, c as stripeStoreSaveDomesticShippingSession, i as initStripeElements, d as stripeStoreRetrievePayment, e as cartStore, f as stripeStore, g as cartStoreUpdateItems, h as cartStoreReset, j as cartStoreResetTabItems, k as cartStoreClearCheckoutInterval, m as stripeStoreInitCheckoutSession, n as stripeStoreGetPaymentIntent, o as cartStoreStartCheckoutInterval, t as trackConversionEvent, p as getCheckoutSessionBody, q as cartStoreUpdateToErrorState, r as translate, u as getZCountryUrlParam, v as cartStoreSetCheckoutSession, w as stripeStorePrefetchLandedCost, x as cartStoreNextStep, y as stripeStoreUpdateCheckoutSessionBaseCurrency, z as stripeStoreHandleInventoryCheck, A as stripeStoreConfirmPayment, B as stripeStoreHandleInventoryRefund, C as stripeStoreReset, D as localizationStoreOnUpdate, E as currencyFormat } from './cart-4725a63b.js';
+import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalInitScript, b as paypalStore } from './paypal-a09943f4.js';
+import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-1ce34e04.js';
 import { h as handleFetch, l as log, b as logError, s as sendErrorLog, c as getElapsedTime, d as allLogs, e as getAdditionalLogMetadata, g as getIsTestMode, j as jsonParse, a as getIsStagingMode, i as isCheckoutMobile } from './handleFetch-621e45bc.js';
 import { c as classes } from './classes-0d95c529.js';
 import { c as createCustomEvent } from './createCustomEvent-58159025.js';
-import { g as getBorderRadius } from './getBorderRadius-ada3ccad.js';
-import { i as isDarkColor } from './isDarkColor-446fccb7.js';
+import { g as getBorderRadius } from './getBorderRadius-a9a48f79.js';
+import { i as isDarkColor } from './isDarkColor-62cbddb5.js';
 import { s as styles } from './styles-6fc2fad9.js';
 import { _ as _getIsValidCartId, c as checkoutHiddenBtnSelector, d as domesticRedirectedBtnSelector } from './CheckoutConfig-5479d192.js';
 import { R as RemoveIcon } from './RemoveIcon-9dc5dd1a.js';
@@ -304,7 +304,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
@@ -468,6 +468,7 @@ const ZonosCheckout = class {
         };
         this.appearanceSettingsOverride = undefined;
         this.preview = false;
+        this.hiddenMode = false;
         this.mobile = false;
         this.overrideStagingMode = undefined;
         this.defaultAddress = [];
@@ -1442,6 +1443,7 @@ const ZonosCheckout = class {
                 this.preview && 'preview',
                 this.isMobile && 'mobile',
                 this.isIframed && 'iframed',
+                this.hiddenMode && 'hidden-mode',
             ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: translate("Don't close"), dialogConfirmBtnText: translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translate('Would you like to close checkout and return to the site?'), dialogTitle: translate('Are you sure?'), onCancelClicked: () => {
                 this.confirmDialogOpen = false;
             },

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-d82f06f2.js';
-import { d as zonosStoreFontFamily } from './zonosStore-d3c5a0a5.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-a457c60c.js';
+import { d as zonosStoreFontFamily } from './zonosStore-1ce34e04.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/esm/zonos-component.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-d82f06f2.js';
+import { r as registerInstance, h } from './index-a457c60c.js';
 
 function format(first, middle, last) {
     return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
@@ -18,7 +18,7 @@ const ZonosComponent = class {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: '63b0c771133fd495f36e2c67601d64d6e56f5f2b' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'c35d0331d2d3724792e82b1d0a22d096fbbcddb7' }, "Hello, World! I'm ", this.getText());
     }
 };
 ZonosComponent.style = ZonosComponentStyle0;