@zonos/elements 1.3.246 → 1.3.248

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-ba8f3890.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-ba8f3890.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,14 @@ 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-ba8f3890.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-8d8518c0.js';
 import { l as log } from './VarianceTest-572cecf5.js';
 import './isDarkColor-9ddd90cc.js';
+import './isContrastColor-69778cea.js';
+import './submitGtag-89d6e9cb.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,29 @@
 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-ba8f3890.js';
+import { t as translate, l as localizationStore, s as storageStore, c as localizationStoreOnChange } from './localization-853b48a9.js';
+import { r as renderCheckoutCurrency } from './renderCheckoutCurrency-bd059ecf.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 { c as paypalStoreReset, a as paypalStore } from './paypal-8d8518c0.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 { s as submitGtag } from './submitGtag-89d6e9cb.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-0a74923e.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;
@@ -352,6 +356,56 @@ const ZonosCheckoutFinish = class {
                 order: json,
             };
         };
+        /**
+         * Metadata for purchase event in GA4
+         */
+        this.buildPurchaseMetadata = ({ checkoutSessionId, currency, }) => {
+            var _a, _b, _c, _d, _e, _f;
+            const items = cartStore.items
+                .filter(item => item.amount >= 0)
+                .map(item => ({
+                item_id: item.sku || item.productId || item.name,
+                item_name: item.name,
+                price: item.amount,
+                quantity: item.quantity,
+            }));
+            /**
+             * The value of this parameter should be the sum of all item amounts in the transaction (without shipping and tax).
+             * @ref https://developers.google.com/analytics/devguides/collection/ga4/reference/events?client_type=gtag#parameters_22
+             */
+            const subtotal = ((_a = cartStore.checkoutSession) === null || _a === void 0 ? void 0 : _a.subtotals.items) ||
+                ((_b = this.order) === null || _b === void 0 ? void 0 : _b.amountSubtotals.items);
+            const currencyCode = ((_c = cartStore.checkoutSession) === null || _c === void 0 ? void 0 : _c.subtotals.presentmentCurrencyCode) ||
+                ((_d = this.order) === null || _d === void 0 ? void 0 : _d.currencyCode) ||
+                (currency === null || currency === void 0 ? void 0 : currency.toUpperCase());
+            // Cart subtotal amount, can be different on the final checkout session/payment intent, therefore only use it if the order/checkout session can not be found.
+            const cartSubtotal = items.reduce((acc, item) => acc + item.price * item.quantity, 0);
+            const cartCurrency = (_e = cartStore.items.find(Boolean)) === null || _e === void 0 ? void 0 : _e.currencyCode;
+            const transactionId = ((_f = this.order) === null || _f === void 0 ? void 0 : _f.id) || checkoutSessionId || new Date().getTime().toString();
+            if (currencyCode && subtotal) {
+                return {
+                    currency: currencyCode,
+                    items,
+                    transaction_id: transactionId,
+                    value: subtotal,
+                };
+            }
+            // Use cart currency and subtotal if the order/checkout session can not be found
+            if (cartCurrency && cartSubtotal) {
+                return {
+                    currency: cartCurrency,
+                    items,
+                    transaction_id: transactionId,
+                    value: cartSubtotal,
+                };
+            }
+            return {
+                currency: undefined,
+                items,
+                transaction_id: transactionId,
+                value: undefined,
+            };
+        };
         this.redirectToUrl = (url) => {
             // reset store and checkout session id before redirecting
             stripeStoreReset();
@@ -534,7 +588,7 @@ const ZonosCheckoutFinish = class {
         this.checkStripePaymentStatus = async () => {
             const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
             if (clientSecret || this.storybookForceStatus) {
-                const { error, messages, status } = await stripeStoreRetrievePayment({
+                const { currency, error, messages, status } = await stripeStoreRetrievePayment({
                     clientSecret,
                     storybookForceStatus: this.storybookForceStatus,
                 });
@@ -560,7 +614,12 @@ const ZonosCheckoutFinish = class {
                 window.history.replaceState({}, '', url.toString());
                 // Payment doesn't go through
                 if (error && (messages === null || messages === void 0 ? void 0 : messages.length)) {
-                    submitGtag('zonos-checkout-payment-fail');
+                    submitGtag({
+                        event: 'zonos-checkout-payment-fail',
+                        metadata: {
+                            checkoutSessionId: storageStore.checkoutSessionId,
+                        },
+                    });
                     void sendErrorLog({
                         endpoint: 'Stripe payment failed',
                         errors: [
@@ -575,8 +634,21 @@ const ZonosCheckoutFinish = class {
                 else {
                     // Save new order info in case the user reloads before we get order info
                     this.saveOrderIdForDuplicationIssue();
-                    submitGtag('zonos-checkout-success');
                     const checkoutSessionId = storageStore.checkoutSessionId;
+                    submitGtag({
+                        event: 'zonos-checkout-success',
+                        metadata: this.buildPurchaseMetadata({
+                            checkoutSessionId: checkoutSessionId || '',
+                            currency: currency === null || currency === void 0 ? void 0 : currency.toUpperCase(),
+                        }),
+                    });
+                    submitGtag({
+                        event: 'purchase',
+                        metadata: this.buildPurchaseMetadata({
+                            checkoutSessionId: checkoutSessionId || '',
+                            currency: currency === null || currency === void 0 ? void 0 : currency.toUpperCase(),
+                        }),
+                    });
                     void trackConversionEvent({
                         checkoutSessionId,
                         eventName: 'checkout_orderCompleted',
@@ -622,7 +694,18 @@ const ZonosCheckoutFinish = class {
             // show success message right away when order id is already created
             this.isLoading = false;
             if (paypalStore.orderIdCreated) {
-                submitGtag('zonos-checkout-success');
+                submitGtag({
+                    event: 'zonos-checkout-success',
+                    metadata: this.buildPurchaseMetadata({
+                        checkoutSessionId: storageStore.checkoutSessionId || '',
+                    }),
+                });
+                submitGtag({
+                    event: 'purchase',
+                    metadata: this.buildPurchaseMetadata({
+                        checkoutSessionId: storageStore.checkoutSessionId || '',
+                    }),
+                });
                 const checkoutSessionId = storageStore.checkoutSessionId;
                 void trackConversionEvent({
                     checkoutSessionId,
@@ -684,11 +767,11 @@ const ZonosCheckoutFinish = class {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: '7b18913d8ebe7be5cbe9ee7d520b643c342c409d', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '80a543fca5dbc63dde41806702b2f6dd4fa849ab', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: 'afb522b8b3b769817c00312fc9c14b4c032873ca', class: "zonos--finish-details" }, h("div", { key: 'c8cd43bc5269f7f252abaeb25dc98929f52b89bb', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '1a7ead411d64fc8edf2de0383049bfd60660a315', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '0c63714bbefc4e9beb1d2cf7414e5774bab4eabe', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '06304d9815e2199108dfcb3dade1494f17b76137',
+            } }, !this.isLoading && (h("div", { key: '6cab293041902e156563f37db6f0e77caaeeaaf9', class: "zonos--finish-details" }, h("div", { key: '6bf32844fa9d38eae6e9f337e56b7918e49bf793', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: 'bf13e59b7bc2380609ffba879fa2b1d8c5d9a9e0', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: 'c246affb94a9799e0c556affb73b2ebfb69a9c7f', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '61fa4fa0e09c0ce2905281b2696f42172c7a2bcd',
             // Only show loading spinner if it's not an error notification
             loading: this.isWaitingToRedirect &&
                 this.notificationType !== 'error', onClick: () => {
@@ -700,9 +783,9 @@ const ZonosCheckoutFinish = class {
                 }
                 this.closeClickHandler();
             }, size: "md", variant: "primary" }, translate('Close'))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '9b809e21052fddb2149a2a1d0c22db4b10808403', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '9227d7832ed477be556cb6d59c644a74c293c740', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode &&
             cartStore.step === 'finish' &&
-            this.notificationType === 'success' && (h("div", { key: '4a278c7c4270d265c61b6b36d20864c55e1b42f1', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'fd8a876a0c5b76edd3be2d9b28da9c3963aee714', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '7882981c1fe01ab6f78d8f84bcfc9aab94bffb74', onClick: () => {
+            this.notificationType === 'success' && (h("div", { key: '9107be1ef7895b0a5e3fe0a985036a11de7011d3', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: 'b0de8743bea8dd9ac7099bd5b77811f80d80a380', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'f90749b9af4c17eac554efb6d3d12cc41ac6e3c8', onClick: () => {
                 const isZonosDashboard = window.location.hostname.includes('dashboard.zonos.com');
                 this.redirectToUrl(isZonosDashboard
                     ? '/orders/all'
@@ -820,7 +903,7 @@ const ZonosCheckoutPayment = class {
          * handler for continue button click
          */
         this.continueClickHandler = async ({ currencyCode, }) => {
-            var _a;
+            var _a, _b;
             if (!this.handleValidate()) {
                 this.showErrorBanner = true;
                 // Attempt to submit the form so the missing input error will be shown in Stripe
@@ -835,7 +918,13 @@ const ZonosCheckoutPayment = class {
             }
             stripeStore.checkoutSettlementCurrency = currencyCode;
             // submit google tag when the form is complete
-            submitGtag('zonos-checkout-payment-info');
+            submitGtag({
+                event: 'zonos-checkout-payment-info',
+                metadata: {
+                    checkoutSessionId: storageStore.checkoutSessionId,
+                    paymentMethod: (_b = stripeStore.stripePaymentEventData) === null || _b === void 0 ? void 0 : _b.value.type,
+                },
+            });
             this.continueClicked.emit();
         };
         this.copyCardToClipboard = async (cardNumber) => {
@@ -961,37 +1050,6 @@ const ZonosCheckoutPayment = class {
 };
 ZonosCheckoutPayment.style = ZonosCheckoutPaymentStyle0;
 
-const getContrastColor = ({ backgroundColor, color, }) => {
-    if (backgroundColor === color) {
-        if (isDarkColor(color)) {
-            const ligherColor = tinycolor(color).lighten(40).toHexString();
-            return ligherColor;
-        }
-        const darkerColor = tinycolor(color).darken(40).toHexString();
-        return darkerColor;
-    }
-    // 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
  */
@@ -1139,6 +1197,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',
@@ -1271,6 +1366,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
          */
@@ -1522,7 +1621,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',
@@ -1539,6 +1645,7 @@ const ZonosCustomerInfo = class {
                 !isValidShipping ||
                 !isValidLink ||
                 !validTaxId ||
+                !validShortAddressCode ||
                 this.exceededCharacterLimitErrorFieldList.length > 0) {
                 return false;
             }
@@ -1619,10 +1726,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() {
@@ -1924,20 +2031,26 @@ const ZonosShipping = class {
          * handler for continue button click
          */
         this.continueClickHandler = () => {
-            var _a;
+            var _a, _b;
             // show error banner if the form is not complete
             if (!this.handleValidate()) {
                 this.showErrorBanner = true;
                 return;
             }
             // submit google tag when the form is complete
-            submitGtag('zonos-checkout-shipping-info');
+            submitGtag({
+                event: 'zonos-checkout-shipping-info',
+                metadata: {
+                    checkoutSessionId: storageStore.checkoutSessionId,
+                    serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+                },
+            });
             const checkoutSessionId = storageStore.checkoutSessionId;
             void trackConversionEvent({
                 checkoutSessionId,
                 eventName: 'checkout_shippingInfoCompleted',
                 metadata: {
-                    serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+                    serviceLevelId: (_b = this.selectedShippingMethod) === null || _b === void 0 ? void 0 : _b.value,
                 },
             });
             this.showErrorBanner = false;
@@ -2071,15 +2184,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