@zonos/elements 1.3.245 → 1.3.247

package/dist/esm/{shouldRenderTaxIdInput-d45ceeb4.js → shouldRenderTaxIdInput-2572bf77.js}

@@ -1,5 +1,22 @@
+import { c as countryRequireShortAddressCode } from './ShortAddressCode-7620e622.js';
 import { e as euCountryCodes, c as countryRequireTaxId } from './TaxId-50d72254.js';
 
+const isInShortAddressCodeCountry = (countryCode) => {
+    return countryRequireShortAddressCode.includes(countryCode);
+};
+/**
+ * Checks if the short address code input should be rendered based on the country code.
+ */
+const shouldRenderShortAddressCodeInput = ({ countryCode, }) => {
+    // If country require short address code, show the input
+    const isCountryRequireShortAddressCode = isInShortAddressCodeCountry(countryCode);
+    if (isCountryRequireShortAddressCode) {
+        return true;
+    }
+    // If country doesn't require short address code, no need to show the input
+    return false;
+};
+
 const isInTaxIdCountry = (countryCode) => {
     return countryRequireTaxId.includes(countryCode);
 };
@@ -20,4 +37,4 @@ const shouldRenderTaxIdInput = ({ companyName, countryCode, }) => {
     return false;
 };
 
-export { shouldRenderTaxIdInput as s };
+export { shouldRenderTaxIdInput as a, shouldRenderShortAddressCodeInput as s };

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-0bbe9693.js';
-import { t as translate, l as localizationStore, s as storageStore, q as storageStoreOnChange } from './localization-401ec6d4.js';
+import { t as translate, l as localizationStore, s as storageStore, q as storageStoreOnChange } from './localization-853b48a9.js';
 import { i as isTextContainsNonLatinChars, c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
-import { K as extractName, b as stripeStore, q as stripeStorePrefetchLandedCost, t as trackConversionEvent } from './cart-7f4704dc.js';
+import { K as extractName, b as stripeStore, q as stripeStorePrefetchLandedCost, t as trackConversionEvent } from './cart-99ec4a3d.js';
 import { c as classes } from './classes-0d95c529.js';
 import { g as getBorderRadius } from './getBorderRadius-877f6389.js';
 import { z as zonosStore, f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
@@ -9,11 +9,12 @@ import { R as RemoveIcon$2 } from './RemoveIcon-9dc5dd1a.js';
 import { i as isDarkColor } from './isDarkColor-9ddd90cc.js';
 import { t as throttle_1 } from './throttle-ce2432ab.js';
 import { i as isCheckoutMobile } from './handleFetch-a844cac1.js';
-import { s as shouldRenderTaxIdInput } from './shouldRenderTaxIdInput-d45ceeb4.js';
+import { a as shouldRenderTaxIdInput, s as shouldRenderShortAddressCodeInput } from './shouldRenderTaxIdInput-2572bf77.js';
 import { l as log } from './VarianceTest-572cecf5.js';
 import { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-50d72254.js';
 import { i as inheritAriaAttributes, a as inheritAttributes } from './helpers-2f6955b1.js';
 import './debounce-c4785346.js';
+import './ShortAddressCode-7620e622.js';
 
 const zonosAddressDisplayCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--title{margin-bottom:12px}:host .zonos--address-group{display:-ms-flexbox;display:flex;gap:4px;-ms-flex-direction:column;flex-direction:column}:host .zonos--address-line{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .zonos--address-line zonos-text+zonos-text::before{content:\", \";color:var(--zonos-elements-gray-1000);margin-right:4px}:host .zonos--country-flag{width:20px;height:14px;border-radius:2px;margin:1px;position:relative;overflow:hidden;-webkit-box-shadow:var(--zonos-elements-v3-shadow-medium);box-shadow:var(--zonos-elements-v3-shadow-medium);margin-right:8px;z-index:10;justify-self:center}";
 const ZonosAddressDisplayStyle0 = zonosAddressDisplayCss;
@@ -503,6 +504,10 @@ const ZonosAddress = class {
          * Error message for tax id input
          */
         this.taxIdErrorMessage = '';
+        /**
+         * Error message for short address code input
+         */
+        this.shortAddressCodeErrorMessage = '';
         this.stripe = window.Zonos.stripe;
         /**
          * Check if the address is dirty or not to scroll into view. When the component is mounted, if the data is filled with address line 1, it's considered dirty
@@ -833,6 +838,31 @@ const ZonosAddress = class {
                 stripeStore.taxId = event.detail;
             } })));
     }
+    /**
+     * Render short address code input based on ship to country code
+     */
+    renderShortAddressCodeInput() {
+        var _a;
+        // No need to render short address code input for billing address
+        if (this.type === 'billing') {
+            return null;
+        }
+        const countryCode = (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+        // Don't render short address code input if the country is not provided
+        if (!countryCode) {
+            return null;
+        }
+        const shortAddressCodeInputRendered = shouldRenderShortAddressCodeInput({
+            countryCode,
+        });
+        // Don't render short address code input if the country doesn't require short address code
+        if (!shortAddressCodeInputRendered) {
+            return null;
+        }
+        return (h("div", { class: "zonos--short-address-code-input" }, h("zonos-stripe-input", { inputLabel: translate('Short address code'), inputPlaceholder: "RRRD2929", inputValue: stripeStore.shortAddressCode || '', isError: !!this.shortAddressCodeErrorMessage, onInputChange: (event) => {
+                stripeStore.shortAddressCode = event.detail;
+            } }), this.shortAddressCodeErrorMessage && (h("zonos-text", { textColor: "red-600", type: "caption" }, this.shortAddressCodeErrorMessage))));
+    }
     renderCompanyNameInput() {
         // No need to render company name for billing address
         if (this.type === 'billing') {
@@ -1357,10 +1387,10 @@ const ZonosAddress = class {
             this.country = localizationStore.selectedCountryCode;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '7214ab1c348c1236dfa65f3bb20866fb3262c35d', class: classes([
+        return (h(Host, { key: '4a2a2bb06e16eb0470b827efd104c1a7a373e2b5', class: classes([
                 'zonos--address zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, h("zonos-text", { key: '3ce287d8ffd3f5fdb4745311d17992c0b9ee9678', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: '0e33486852d6512b054bb480d0295ce97d2667eb', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderCustomAddressForm()));
+            ]) }, h("zonos-text", { key: '74fd51761c8672e23ada3c5f1bac121cdf559ca6', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("slot", { key: 'e21b18b079f013e1bdaf2ab526c1c7826f2376f0', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), this.renderCustomAddressForm()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,18 +1,19 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-0bbe9693.js';
 import { t as throttle_1 } from './throttle-ce2432ab.js';
-import { b as stripeStore, t as trackConversionEvent, K as extractName, B as stripeStoreOnChange, q as stripeStorePrefetchLandedCost, d as cartStore } from './cart-7f4704dc.js';
-import { s as storageStore, r as getFallbackDefaultCountryCode, t as translate, q as storageStoreOnChange, l as localizationStore } from './localization-401ec6d4.js';
+import { b as stripeStore, t as trackConversionEvent, K as extractName, B as stripeStoreOnChange, q as stripeStorePrefetchLandedCost, d as cartStore } from './cart-99ec4a3d.js';
+import { s as storageStore, r as getFallbackDefaultCountryCode, t as translate, q as storageStoreOnChange, l as localizationStore } from './localization-853b48a9.js';
 import { z as zonosStore, g as getZonosStoreTheme, f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
 import { l as logError, i as isCheckoutMobile, s as sendErrorLog } from './handleFetch-a844cac1.js';
-import { s as shouldRenderTaxIdInput } from './shouldRenderTaxIdInput-d45ceeb4.js';
+import { a as shouldRenderTaxIdInput, s as shouldRenderShortAddressCodeInput } from './shouldRenderTaxIdInput-2572bf77.js';
 import { c as classes } from './classes-0d95c529.js';
 import { l as log } from './VarianceTest-572cecf5.js';
 import { c as countryRequireTaxId, s as shipToTaxIdLabels } from './TaxId-50d72254.js';
 import { g as getBorderRadius } from './getBorderRadius-877f6389.js';
 import './debounce-c4785346.js';
 import './isDarkColor-9ddd90cc.js';
+import './ShortAddressCode-7620e622.js';
 
-const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h .zonos--company-name-input.sc-zonos-address,.sc-zonos-address-h .zonos--tax-id-input.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
+const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h .zonos--company-name-input.sc-zonos-address,.sc-zonos-address-h .zonos--tax-id-input.sc-zonos-address,.sc-zonos-address-h .zonos--short-address-code-input.sc-zonos-address{margin-bottom:16px}.sc-zonos-address-h zonos-banner.sc-zonos-address{margin-top:8px}";
 const ZonosAddressStyle0 = zonosAddressCss;
 
 const ZonosAddress = class {
@@ -33,6 +34,10 @@ const ZonosAddress = class {
          * Error message for tax id input
          */
         this.taxIdErrorMessage = '';
+        /**
+         * Error message for short address code input
+         */
+        this.shortAddressCodeErrorMessage = '';
         this.stripe = window.Zonos.stripe;
         /**
          * Check if the address is dirty or not to scroll into view. When the component is mounted, if the data is filled with address line 1, it's considered dirty
@@ -262,7 +267,32 @@ const ZonosAddress = class {
         return (h("div", { class: "zonos--tax-id-input" }, h("zonos-stripe-input", { inputLabel: translate(taxIdInputInfo.friendlyName), inputPlaceholder: taxIdInputInfo.placeholder, inputValue: stripeStore.taxId || '', isError: !!this.taxIdErrorMessage, onInputChange: (event) => {
                 stripeStore.taxId = event.detail;
                 this.taxIdChanged.emit(event.detail);
-            } }), this.taxIdErrorMessage && (h("zonos-text", { textColor: 'red-600', type: "caption" }, this.taxIdErrorMessage))));
+            } }), this.taxIdErrorMessage && (h("zonos-text", { textColor: "red-600", type: "caption" }, this.taxIdErrorMessage))));
+    }
+    /**
+     * Render short address code input based on ship to country code
+     */
+    renderShortAddressCodeInput() {
+        var _a;
+        // No need to render short address code input for billing address
+        if (this.type === 'billing') {
+            return null;
+        }
+        const countryCode = (_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country;
+        // Don't render short address code input if the country is not provided
+        if (!countryCode) {
+            return null;
+        }
+        const shortAddressCodeInputRendered = shouldRenderShortAddressCodeInput({
+            countryCode,
+        });
+        // Don't render short address code input if the country doesn't require short address code
+        if (!shortAddressCodeInputRendered) {
+            return null;
+        }
+        return (h("div", { class: "zonos--short-address-code-input" }, h("zonos-stripe-input", { inputLabel: translate('Short address code'), inputPlaceholder: "RRRD2929", inputValue: stripeStore.shortAddressCode || '', isError: !!this.shortAddressCodeErrorMessage, onInputChange: (event) => {
+                stripeStore.shortAddressCode = event.detail;
+            } }), this.shortAddressCodeErrorMessage && (h("zonos-text", { textColor: "red-600", type: "caption" }, this.shortAddressCodeErrorMessage))));
     }
     renderCompanyNameInput() {
         // No need to render company name for billing address (only allow for Collect and Invoice)
@@ -324,11 +354,11 @@ const ZonosAddress = class {
             this.isAddressFilled = true;
         }
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: 'b02889c4677a27a8c54a411d66fb31e15af78e1a', class: classes([
+        return (h(Host, { key: '5dc571d7c5e706ae9cb90de70deee22847e5ba7e', class: classes([
                 'zonos--address',
                 'zonos--elements',
                 `zonos--${this.type}-address`,
-            ]) }, this.titleText && (h("zonos-text", { key: 'f52beb7ed6699ec1c73ee35a3436798a1fea38c7', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: '7c9602892de932e8a3f90a37b53a936f39082916', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), h("div", { key: '8ea6698f5b9d3bb525942c146e2cf67fefad6ad8', class: "zonos--address-component" })));
+            ]) }, this.titleText && (h("zonos-text", { key: 'a7c9f730bc9b64aa2c6e8cc24701e638481eac19', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("slot", { key: '3078529c201c7947ffc833485d46184bc79ab1d1', name: "below-title" }), this.renderCompanyNameInput(), this.renderTaxIdInput(), this.renderShortAddressCodeInput(), h("div", { key: 'b4a9850ac30ad9c483e05743ff41b7de9756d826', class: "zonos--address-component" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -2,12 +2,13 @@ import { r as registerInstance, h, H as Host, a as getElement, c as createEvent
 import { f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
 import { c as classes } from './classes-0d95c529.js';
 import { g as getBorderRadius } from './getBorderRadius-877f6389.js';
-import { b as stripeStore, t as trackConversionEvent } from './cart-7f4704dc.js';
-import { s as storageStore } from './localization-401ec6d4.js';
+import { b as stripeStore, t as trackConversionEvent } from './cart-99ec4a3d.js';
+import { s as storageStore } from './localization-853b48a9.js';
 import { l as logError } from './handleFetch-a844cac1.js';
-import { d as paypalStoreInitButtons, e as paypalStoreOnChange } from './paypal-61270b79.js';
+import { d as paypalStoreInitButtons, e as paypalStoreOnChange } from './paypal-56534e48.js';
 import { l as log } from './VarianceTest-572cecf5.js';
 import './isDarkColor-9ddd90cc.js';
+import './isContrastColor-69778cea.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_12.entry.js

@@ -1,25 +1,28 @@
 import { r as registerInstance, d as getAssetPath, h, H as Host, F as Fragment, c as createEvent, a as getElement } from './index-0bbe9693.js';
-import { d as cartStore, E as cartStoreHasOneEligibleItem, F as stripeStoreApplyPromoCode, G as stripeStoreRemovePromoCode, b as stripeStore, y as stripeStoreReset, c as stripeStoreRetrievePayment, t as trackConversionEvent, H as stripeStoreResetPromoCode, I as stripeStoreMessageBasedOnStatus, r as cartStoreNextStep, J as stripeStoreTranslateAddressToLatin, K as extractName, z as cartStoreOnChange, L as stripeStoreAsyncAddressUpdate, D as cartStoreUpdateSelectedShippingOption, M as cartStoreGetShippingTransitInfo, N as cartStoreGetMethod, O as sortServiceLevelOptionsByAmount } from './cart-7f4704dc.js';
-import { t as translate, l as localizationStore, s as storageStore, c as localizationStoreOnChange } from './localization-401ec6d4.js';
-import { r as renderCheckoutCurrency } from './renderCheckoutCurrency-dea06d44.js';
+import { d as cartStore, E as cartStoreHasOneEligibleItem, F as stripeStoreApplyPromoCode, G as stripeStoreRemovePromoCode, b as stripeStore, y as stripeStoreReset, c as stripeStoreRetrievePayment, t as trackConversionEvent, H as stripeStoreResetPromoCode, I as stripeStoreMessageBasedOnStatus, r as cartStoreNextStep, J as stripeStoreTranslateAddressToLatin, K as extractName, z as cartStoreOnChange, L as stripeStoreAsyncAddressUpdate, D as cartStoreUpdateSelectedShippingOption, M as cartStoreGetShippingTransitInfo, N as cartStoreGetMethod, O as sortServiceLevelOptionsByAmount } from './cart-99ec4a3d.js';
+import { t as translate, l as localizationStore, s as storageStore, c as localizationStoreOnChange } from './localization-853b48a9.js';
+import { r as renderCheckoutCurrency } from './renderCheckoutCurrency-1bd40006.js';
 import { c as cleanHtmlMarkdown } from './cleanHtmlMarkdown-b5b18743.js';
 import { c as classes } from './classes-0d95c529.js';
 import { z as zonosStore, h as zonosStoreOnChange, g as getZonosStoreTheme, f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
-import { D as DUTY_KEY, T as TAXES_KEY, h as hasInclusivePrice } from './hasInclusivePrice-3958ed11.js';
-import { s as submitGtag, c as paypalStoreReset, a as paypalStore, i as isContrastColor } from './paypal-61270b79.js';
+import { D as DUTY_KEY, T as TAXES_KEY, h as hasInclusivePrice } from './hasInclusivePrice-6fcc712f.js';
+import { s as submitGtag, c as paypalStoreReset, a as paypalStore } from './paypal-56534e48.js';
 import { h as handleFetch, s as sendErrorLog, j as jsonParse, g as getIsTestMode, i as isCheckoutMobile, a as getIsStagingMode } from './handleFetch-a844cac1.js';
 import { c as createCustomEvent } from './createCustomEvent-58159025.js';
 import { g as getBorderRadius } from './getBorderRadius-877f6389.js';
 import { l as log, b as allLogs } from './VarianceTest-572cecf5.js';
 import { l as languages } from './ILanguage-cd6acb72.js';
-import { p as placeTestOrder } from './placeTestOrder-c2180600.js';
-import { i as isDarkColor, t as tinycolor } from './isDarkColor-9ddd90cc.js';
+import { p as placeTestOrder } from './placeTestOrder-9e0ab5fd.js';
+import { i as isDarkColor } from './isDarkColor-9ddd90cc.js';
+import { g as getContrastColor } from './getContrastColor-28c18704.js';
 import { i as isColorVariable } from './isColorVariable-0a94004f.js';
 import { u as updateCheckoutSessionAttributes } from './updateCheckoutSessionAttributes-047a6cd4.js';
 import { c as containsNonLatinChars } from './containsNonLatinChars-2d8810c3.js';
-import { s as shouldRenderTaxIdInput } from './shouldRenderTaxIdInput-d45ceeb4.js';
+import { s as shouldRenderShortAddressCodeInput, a as shouldRenderTaxIdInput } from './shouldRenderTaxIdInput-2572bf77.js';
 import { e as euCountryCodes } from './TaxId-50d72254.js';
+import './isContrastColor-69778cea.js';
 import './debounce-c4785346.js';
+import './ShortAddressCode-7620e622.js';
 
 const zonosCartItemsCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--cart-table{width:100%;border:none;border-collapse:collapse;overflow:auto;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column{padding:8px;font-size:var(--zonos-elements-font-size-base)}:host .zonos--cart-table .zonos--column:last-child{text-align:right}:host .zonos--cart-table .zonos--column:first-child{width:60px}:host .zonos--cart-table td{vertical-align:top}:host .zonos--cart-item-name{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:12px}:host .zonos--cart-item-name .zonos--cart-item-quantity>*{display:inline-block}:host .zonos--cart-item-price zonos-text{white-space:nowrap}:host img{min-width:40px;margin-top:6px}";
 const ZonosCartItemsStyle0 = zonosCartItemsCss;
@@ -778,7 +781,7 @@ const CheckmarkLineIcon = `<svg color="var(--zonos-elements-gray-1000)" xmlns="h
 
 const RemoveLineIcon = `<svg color="var(--zonos-elements-gray-1000)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="var(--zonos-elements-gray-1000)" d="M14.475 10.586a.75.75 0 1 0-1.06-1.06L12 10.938l-1.414-1.414a.75.75 0 0 0-1.06 1.06L10.938 12l-1.414 1.414a.75.75 0 1 0 1.06 1.06L12 13.062l1.414 1.414a.75.75 0 0 0 1.06-1.06L13.062 12l1.414-1.414Z"/><path fill="var(--zonos-elements-gray-1000)" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-6.5 8a6.5 6.5 0 1 1 13 0 6.5 6.5 0 0 1-13 0Z" clip-rule="evenodd"/></svg>`;
 
-const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-payment-h *.sc-zonos-checkout-payment{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:24px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:20px;overflow:auto;padding:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:8px}.sc-zonos-checkout-payment-h .zonos--error-banner.sc-zonos-checkout-payment{margin-bottom:16px}.sc-zonos-checkout-payment-h zonos-button.sc-zonos-checkout-payment{-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-checkout-payment-h .zonos--pay-in-base-currency-btn.sc-zonos-checkout-payment{-webkit-box-shadow:none;box-shadow:none}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;gap:12px;bottom:-5px;padding-top:12px;background:var(--zonos--primary-color, var(--zonos-elements-gray-0))}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-text.sc-zonos-checkout-payment{text-align:center}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-button.sc-zonos-checkout-payment{width:100%}.sc-zonos-checkout-payment-h .zonos--test-cards.sc-zonos-checkout-payment{margin-top:auto;padding-top:16px}";
+const zonosCheckoutPaymentCss = ".sc-zonos-checkout-payment-h{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-checkout-payment-h *.sc-zonos-checkout-payment{font-family:var(--zonos--font-family, Inter), Inter}.sc-zonos-checkout-payment-h img.sc-zonos-checkout-payment{max-width:100%}.sc-zonos-checkout-payment-h dl.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h dd.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h1.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h2.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h3.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h4.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h5.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h h6.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h hr.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h figure.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h p.sc-zonos-checkout-payment,.sc-zonos-checkout-payment-h pre.sc-zonos-checkout-payment{margin:0}.sc-zonos-checkout-payment-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-checkout-payment-h{overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1}.sc-zonos-checkout-payment-h .zonos--title.sc-zonos-checkout-payment{margin-bottom:24px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment{margin-bottom:20px;overflow:auto;padding:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;-ms-scroll-chaining:none;overscroll-behavior:contain}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar{width:10px}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-track{background:var(--zonos-elements-gray-50)}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb{border-radius:10px;background:#cccccc;border:3px solid transparent;background-clip:content-box}.sc-zonos-checkout-payment-h .zonos--group.sc-zonos-checkout-payment::-webkit-scrollbar-thumb:hover{background:#d6d6d6}.sc-zonos-checkout-payment-h .zonos--payment-error-banner.sc-zonos-checkout-payment{margin-bottom:8px}.sc-zonos-checkout-payment-h .zonos--error-banner.sc-zonos-checkout-payment{margin-bottom:16px}.sc-zonos-checkout-payment-h zonos-button.sc-zonos-checkout-payment{-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-checkout-payment-h .zonos--pay-in-base-currency-btn.sc-zonos-checkout-payment{-webkit-box-shadow:none;box-shadow:none}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment{position:-webkit-sticky;position:sticky;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;gap:12px;bottom:-4px;padding-top:12px;background:var(--zonos--primary-color, var(--zonos-elements-gray-0))}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-text.sc-zonos-checkout-payment{text-align:center}.sc-zonos-checkout-payment-h .zonos--group-btn.sc-zonos-checkout-payment zonos-button.sc-zonos-checkout-payment{width:100%}.sc-zonos-checkout-payment-h .zonos--test-cards.sc-zonos-checkout-payment{margin-top:auto;padding-top:16px}";
 const ZonosCheckoutPaymentStyle0 = zonosCheckoutPaymentCss;
 
 const ZonosCheckoutPayment = class {
@@ -961,29 +964,6 @@ const ZonosCheckoutPayment = class {
 };
 ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
 
-const getContrastColor = ({ backgroundColor, color, }) => {
-    // get readibility of the color
-    const isContrastEnough = isContrastColor({
-        backgroundColor1: backgroundColor,
-        backgroundColor2: color,
-    });
-    if (isContrastEnough) {
-        // no need to change the color if it's already contrast enough
-        return color;
-    }
-    if (isDarkColor(color)) {
-        return '#ffffff';
-    }
-    const newDarkerColor = tinycolor(color).darken(25).toHexString();
-    const newLigherColor = tinycolor(color).lighten(25).toHexString();
-    // get readibility of the color
-    const isNewColorContrastEnough = isContrastColor({
-        backgroundColor1: backgroundColor,
-        backgroundColor2: newDarkerColor,
-    });
-    return isNewColorContrastEnough ? newDarkerColor : newLigherColor;
-};
-
 /**
  * Reset any done tabs after selected tab to undone. This is to force user to go through all tabs again
  */
@@ -1131,6 +1111,43 @@ const ZonosCurrencyToggle = class {
     static get assetsDirs() { return ["assets"]; }
 };
 
+const shortAddressCodeValidationResult = ({ shippingCountry, shortAddressCode, }) => {
+    // Check to see if we are required to collect short address code for the shipping country or not
+    const isShortAddressCodeInputRendered = shouldRenderShortAddressCodeInput({
+        countryCode: shippingCountry,
+    });
+    // If the short address code input is not even rendered, no need to validate anything and allow to proceed. Validate when short address code input is not even rendered would prevent the user from checking out
+    if (!isShortAddressCodeInputRendered) {
+        return {
+            error: null,
+            valid: true,
+        };
+    }
+    /**
+     * If the short address code input is rendered, the input should be filled
+     */
+    if (!shortAddressCode) {
+        return {
+            error: 'Short address code is required.',
+            valid: false,
+        };
+    }
+    if (shippingCountry === 'SA') {
+        const isValid = /^[A-Za-z]{4}\s*[0-9]{4}$/.test(shortAddressCode);
+        if (!isValid) {
+            return {
+                error: 'Invalid short address code format. Must be 4 letters and 4 numbers.',
+                valid: false,
+            };
+        }
+    }
+    //  Other countries doesn't need to validate short address code in the right format
+    return {
+        error: null,
+        valid: true,
+    };
+};
+
 const isTaxIdRequired = (shippingCountry) => {
     const requireTaxIdCountry = [
         'MX',
@@ -1220,7 +1237,7 @@ const taxIdValidationResult = ({ companyName, 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;height:100%}.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;height:100%;-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--error-banner.sc-zonos-customer-info ul.sc-zonos-customer-info{list-style:disc;padding-left:8px}.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 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;height:100%}.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;height:100%;-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--error-banner.sc-zonos-customer-info ul.sc-zonos-customer-info{list-style:disc;padding-left:8px}.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:-4px;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;
 
 /**
@@ -1263,6 +1280,10 @@ const ZonosCustomerInfo = class {
          * Whether or not the tax id input is invalid
          */
         this.taxIdErrorMessage = '';
+        /**
+         * Whether or not the short address code input is invalid
+         */
+        this.shortAddressCodeErrorMessage = '';
         /**
          * Whether or not the shipping address contains invalid characters
          */
@@ -1514,7 +1535,14 @@ const ZonosCustomerInfo = class {
                 shippingCountry: this.shippingCountry,
                 taxId: stripeStore.taxId,
             });
+            const { error: shortAddressCodeError, valid: validShortAddressCode } = shortAddressCodeValidationResult({
+                shippingCountry: this.shippingCountry,
+                shortAddressCode: stripeStore.shortAddressCode,
+            });
             this.taxIdErrorMessage = !validTaxId ? translate(error) : '';
+            this.shortAddressCodeErrorMessage = !validShortAddressCode
+                ? translate(shortAddressCodeError)
+                : '';
             const addressLengthErrorList = this.validateAddressLength({
                 address: stripeStore.stripeAddressEventData,
                 type: 'shipping',
@@ -1531,6 +1559,7 @@ const ZonosCustomerInfo = class {
                 !isValidShipping ||
                 !isValidLink ||
                 !validTaxId ||
+                !validShortAddressCode ||
                 this.exceededCharacterLimitErrorFieldList.length > 0) {
                 return false;
             }
@@ -1611,10 +1640,10 @@ const ZonosCustomerInfo = class {
             }
             // Render custom address component if the custom address form is enabled
             if (this.addressFormRenderType === 'zonos') {
-                return (h("zonos-custom-address", { defaultAddress: defaultAddress, taxIdErrorMessage: this.taxIdErrorMessage, titleText: translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }, this.renderExceededCharacterLimitError(type)));
+                return (h("zonos-custom-address", { defaultAddress: defaultAddress, shortAddressCodeErrorMessage: this.shortAddressCodeErrorMessage, taxIdErrorMessage: this.taxIdErrorMessage, titleText: translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }, this.renderExceededCharacterLimitError(type)));
             }
             // Render Stripe address component by default
-            return (h("zonos-address", { defaultAddress: defaultAddress, taxIdErrorMessage: this.taxIdErrorMessage, titleText: translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }, this.renderExceededCharacterLimitError(type)));
+            return (h("zonos-address", { defaultAddress: defaultAddress, shortAddressCodeErrorMessage: this.shortAddressCodeErrorMessage, taxIdErrorMessage: this.taxIdErrorMessage, titleText: translate(type === 'shipping' ? 'Shipping address' : 'Billing address'), type: type }, this.renderExceededCharacterLimitError(type)));
         };
     }
     watchShowErrorBanner() {
@@ -2063,15 +2092,15 @@ const ZonosShipping = class {
             var _a;
             // Render all service levels for US since domestic shipping doesn't have DDP/DAP
             if (((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.value.address.country) === 'US') {
-                return (h("zonos-shipping-rich-radio", { items: this.serviceLevelsAll, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }));
+                return (h("zonos-shipping-rich-radio", { isMobile: this.isMobile, items: this.serviceLevelsAll, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }));
             }
-            return (h(Fragment, null, h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
+            return (h(Fragment, null, h("zonos-shipping-rich-radio", { isMobile: this.isMobile, items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
                 !!this.serviceLevelsDAP.length && (h("button", { class: classes([
                     'zonos--shipping-options-collapse-trigger',
                     this.collapsedDAPOptions && 'collapsed',
                 ]), onClick: () => {
                     this.collapsedDAPOptions = !this.collapsedDAPOptions;
-                } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod })))));
+                } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { isMobile: this.isMobile, items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod })))));
         };
         return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !this.serviceLevelsAll.length ? (h("zonos-banner", { bannerTitle: cartStore.customQuotingError
                 ? cartStore.customQuotingError

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, F as Fragment, H as Host } from './index-0bbe9693.js';
-import { s as stripeStoreGetDomesticShippingSession, a as stripeStoreSaveDomesticShippingSession, b as stripeStore, i as initStripeElements, c as stripeStoreRetrievePayment, d as cartStore, e as cartStoreUpdateItems, f as cartStoreReset, g as cartStoreResetTabItems, h as cartStoreClearCheckoutInterval, j as stripeStoreInitCheckoutSession, k as stripeStoreGetPaymentIntent, l as cartStoreStartCheckoutInterval, t as trackConversionEvent, m as getCheckoutSessionBody, n as cartStoreUpdateToErrorState, o as stripeStoreCleanupDomesticShippingSession, p as cartStoreSetCheckoutSession, q as stripeStorePrefetchLandedCost, r as cartStoreNextStep, u as stripeStoreUpdateCheckoutSessionBaseCurrency, v as stripeStoreHandleInventoryCheck, w as stripeStoreConfirmPayment, x as stripeStoreHandleInventoryRefund, y as stripeStoreReset, z as cartStoreOnChange } from './cart-7f4704dc.js';
-import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalStore, b as paypalInitScript } from './paypal-61270b79.js';
-import { f as filterValidTests, l as localizationStore, a as localizationStoreUpdateSelectedCountryCode, g as getZCountryUrlParam, s as storageStore, V as VARIANT_TEST_KEY_EXPIRATION, b as storageStoreSetEnabledVariantTestKeys, t as translate, c as localizationStoreOnChange, d as currencyFormat } from './localization-401ec6d4.js';
+import { s as stripeStoreGetDomesticShippingSession, a as stripeStoreSaveDomesticShippingSession, b as stripeStore, i as initStripeElements, c as stripeStoreRetrievePayment, d as cartStore, e as cartStoreUpdateItems, f as cartStoreReset, g as cartStoreResetTabItems, h as cartStoreClearCheckoutInterval, j as stripeStoreInitCheckoutSession, k as stripeStoreGetPaymentIntent, l as cartStoreStartCheckoutInterval, t as trackConversionEvent, m as getCheckoutSessionBody, n as cartStoreUpdateToErrorState, o as stripeStoreCleanupDomesticShippingSession, p as cartStoreSetCheckoutSession, q as stripeStorePrefetchLandedCost, r as cartStoreNextStep, u as stripeStoreUpdateCheckoutSessionBaseCurrency, v as stripeStoreHandleInventoryCheck, w as stripeStoreConfirmPayment, x as stripeStoreHandleInventoryRefund, y as stripeStoreReset, z as cartStoreOnChange } from './cart-99ec4a3d.js';
+import { p as paypalStoreHasPaypalEnabled, s as submitGtag, a as paypalStore, b as paypalInitScript } from './paypal-56534e48.js';
+import { f as filterValidTests, l as localizationStore, a as localizationStoreUpdateSelectedCountryCode, g as getZCountryUrlParam, s as storageStore, V as VARIANT_TEST_KEY_EXPIRATION, b as storageStoreSetEnabledVariantTestKeys, t as translate, c as localizationStoreOnChange, d as currencyFormat } from './localization-853b48a9.js';
 import { z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore-b434e436.js';
 import { b as buildCartItemsByTempCart } from './buildCartItemsByTempCart-a117f75d.js';
 import { h as handleFetch, b as getAdditionalLogMetadata, g as getIsTestMode, l as logError, j as jsonParse, s as sendErrorLog, a as getIsStagingMode, i as isCheckoutMobile } from './handleFetch-a844cac1.js';
@@ -14,6 +14,7 @@ import { g as getBorderRadius } from './getBorderRadius-877f6389.js';
 import { i as isDarkColor } from './isDarkColor-9ddd90cc.js';
 import { s as styles } from './styles-6fc2fad9.js';
 import { R as RemoveIcon } from './RemoveIcon-9dc5dd1a.js';
+import './isContrastColor-69778cea.js';
 import './debounce-c4785346.js';
 
 /**
@@ -131,7 +132,7 @@ providedCountryCode) => {
     return true;
 };
 
-const SHIP_TO_COUNTRY_SELECTOR = 'select[name="shippingAddress.countryCode"]';
+const FALLBACK_SHIP_TO_COUNTRY_SELECTOR = 'select[name="shippingAddress.countryCode"]';
 /**
  * Watch for changes in domestic checkout step. Redirects user to home page to open international checkout when user selects a country in the international shipping zone.
  * @note Only works on default bigcommerce checkout page
@@ -143,12 +144,12 @@ const watchImmediateBigcommerceDomesticCheckoutRedirect = ({ domesticRedirectedB
     /**
      * Keep checking
      */
-    const handleInternationalCheckoutSelected = async () => {
-        const shipToCountryElement = document.querySelector(SHIP_TO_COUNTRY_SELECTOR);
-        if (!shipToCountryElement) {
-            return false;
-        }
-        const shippingCountry = shipToCountryElement.value;
+    const handleInternationalCheckoutSelected = async (overrideShippingCountry) => {
+        var _a;
+        const shipToCountryElement = document.querySelector(((_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.bigcommerceDomesticCheckoutCountrySelector) ||
+            FALLBACK_SHIP_TO_COUNTRY_SELECTOR);
+        const shippingCountry = ((shipToCountryElement === null || shipToCountryElement === void 0 ? void 0 : shipToCountryElement.value) ||
+            overrideShippingCountry);
         if (!shippingCountry) {
             // do nothing if shipping country is not found
             return false;
@@ -195,6 +196,7 @@ const watchImmediateBigcommerceDomesticCheckoutRedirect = ({ domesticRedirectedB
     let isProcessing = false;
     let intervalCreated = false;
     const observer = new MutationObserver(() => {
+        var _a;
         const domesticRedirectedButton = document.querySelector(domesticRedirectedBtnSelector);
         const shippingAddressSession = stripeStoreGetDomesticShippingSession();
         // append a hidden button to the body if the shipping address session is found
@@ -211,7 +213,8 @@ const watchImmediateBigcommerceDomesticCheckoutRedirect = ({ domesticRedirectedB
         }
         const isBigcommerceDomesticCheckoutPage = window.location.pathname.includes('/checkout') &&
             window.Zonos.isBigCommerce;
-        const shipToCountryElement = document.querySelector(SHIP_TO_COUNTRY_SELECTOR);
+        const shipToCountryElement = document.querySelector(((_a = zonosStore.genericSettings) === null || _a === void 0 ? void 0 : _a.bigcommerceDomesticCheckoutCountrySelector) ||
+            FALLBACK_SHIP_TO_COUNTRY_SELECTOR);
         // Should just disconnect the observer if it's not bigcommerce domestic checkout page
         if (!isBigcommerceDomesticCheckoutPage) {
             observer.disconnect();
@@ -250,6 +253,26 @@ const watchImmediateBigcommerceDomesticCheckoutRedirect = ({ domesticRedirectedB
                 isProcessing = false;
             }
         }, 1000);
+        // keep checking for stripe address element to be initialized
+        const stripeBcListenerInterval = setInterval(() => {
+            var _a;
+            if (!window.bcStripeElements) {
+                clearInterval(stripeBcListenerInterval);
+                return;
+            }
+            const addressElement = (_a = window.bcStripeElements) === null || _a === void 0 ? void 0 : _a.getElement('address');
+            if (!addressElement) {
+                return;
+            }
+            clearInterval(stripeBcListenerInterval);
+            addressElement.on('change', event => {
+                const shippingCountry = event.value.address.country;
+                if (shippingCountry) {
+                    void handleInternationalCheckoutSelected(shippingCountry);
+                }
+            });
+            // we want to attacch event to addressElement as soon as it's loaded
+        }, 500);
     });
     observer.observe(document.body, {
         childList: true,
@@ -1889,7 +1912,7 @@ const ZonosCheckout = class {
                     '--zonos--primary-color': !this.isMobile
                         ? colorPrimary
                         : undefined,
-                }) }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.getDefaultAddress(), isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, isMobile: this.isMobile, onContinueClicked: async () => {
+                }) }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.getDefaultAddress(), isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, isMobile: this.isMobile, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, isMobile: this.isMobile, onContinueClicked: async () => {
                     await this.handleStripePaymentContinue();
                 }, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), h("div", { class: "zonos--right-actions" }, window.Zonos.showBaseForeign && (h("zonos-currency-toggle", null)), !this.isLegacyCheckout && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() }))), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile
@@ -1917,7 +1940,7 @@ const ZonosCheckout = class {
                 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-dialog", { isLoading: true, loadingText: translate('You will be redirected to international checkout shortly.'), loadingTitle: translate('We detected that you are shipping to an international address.'), noClickOutside: true, noCloseButton: true, open: this.detectedDomesticCheckoutDialogOpen, width: "450px" }), 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.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, class: "zonos--checkout-dialog", "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-dialog", { isLoading: true, loadingText: translate('You will be redirected to international checkout shortly.'), loadingTitle: translate('We detected that you are shipping to an international address.'), noClickOutside: true, noCloseButton: true, open: this.detectedDomesticCheckoutDialogOpen, width: "450px" }), 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;
             },
             // Mark user selected confirm to close the dialog

package/dist/esm/zonos-collect-cart-items_3.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, d as getAssetPath, h, H as Host } from './index-0bbe9693.js';
-import { d as cartStore } from './cart-7f4704dc.js';
+import { d as cartStore } from './cart-99ec4a3d.js';
 import { c as cleanHtmlMarkdown } from './cleanHtmlMarkdown-b5b18743.js';
 import { f as zonosStoreFontFamily } from './zonosStore-b434e436.js';
 import { c as classes } from './classes-0d95c529.js';
 import { s as styles } from './styles-6fc2fad9.js';
-import './localization-401ec6d4.js';
+import './localization-853b48a9.js';
 import './handleFetch-a844cac1.js';
 import './VarianceTest-572cecf5.js';
 import './isDarkColor-9ddd90cc.js';