@zonos/elements 1.3.15-alpha.3 → 1.3.15

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.js

@@ -1,25 +1,60 @@
 import { h, Host, } from "@stencil/core";
-import { stripeStore, } from "../../../store/checkout/stripe";
+import { stripeStore, stripeStoreTranslateAddressToLatin, } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
+import { getZonosStoreTheme, zonosStore, } from "../../../store/zonosStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
+import { containsNonLatinChars } from "../../../utils/containsNonLatinChars";
 import { submitGtag } from "../../../utils/submitGtag";
 export class ZonosCustomerInfo {
     constructor() {
         /**
-         * handler for continue button click
+         * Handler for invalid characters in the address
          */
-        this.continueClickHandler = () => {
-            if (this.hasInvalidBillingCharacters || this.hasInvalidShippingCharacters) {
-                // if the address contains invalid characters, scroll to the nearest zonos-banner
-                const banner = this.el.querySelector('zonos-address zonos-banner');
-                if (banner) {
-                    banner.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'center',
-                    });
-                }
+        this.handleInvalidCharacters = async () => {
+            // Do nothing if the allowed character sets is ALL
+            if (zonosStore.checkoutSettings.allowedCharacterSets === 'ALL') {
+                return { hasInvalidCharacters: false };
+            }
+            // Check if the address contains Non-Latin characters
+            this.invalidShippingCharacterList = stripeStore.stripeAddressEventData
+                ? this.checkInvalidCharacters(stripeStore.stripeAddressEventData)
+                : null;
+            // if the shipping is the same as billing, we don't need to check the billing address
+            this.invalidBillingCharacterList = !stripeStore.stripeShippingSameAsBilling
+                ? this.checkInvalidCharacters(stripeStore.stripeBillingAddressEventData)
+                : null;
+            const hasInvalidCharacters = !!this.invalidShippingCharacterList || !!this.invalidBillingCharacterList;
+            // send data to our api to translate the invalid characters
+            if (hasInvalidCharacters) {
+                // open the dialog
+                this.openAddressValidationDialog = true;
+                this.isValidatingAddress = true;
+                await stripeStoreTranslateAddressToLatin({
+                    addressInvalidCharactersList: this.invalidShippingCharacterList,
+                    billingAddressInvalidCharactersList: this.invalidBillingCharacterList,
+                });
+                this.isValidatingAddress = false;
+            }
+            return { hasInvalidCharacters };
+        };
+        this.transformTranslatedAddressToStripeEvent = ({ submitData, type, }) => {
+            let stripeEventDataObj = type === 'shippingAddress'
+                ? stripeStore.stripeAddressEventData
+                : stripeStore.stripeBillingAddressEventData;
+            const submitDataByKey = submitData[type];
+            // this should never happen as they can only go to this step if the address is complete
+            if (!stripeEventDataObj || !submitDataByKey) {
                 return;
             }
+            // overwrite the address object with the new data
+            stripeEventDataObj = Object.assign(Object.assign({}, stripeEventDataObj), { complete: true, value: Object.assign(Object.assign({}, stripeEventDataObj === null || stripeEventDataObj === void 0 ? void 0 : stripeEventDataObj.value), { address: Object.assign(Object.assign({}, stripeEventDataObj === null || stripeEventDataObj === void 0 ? void 0 : stripeEventDataObj.value.address), { city: submitDataByKey.city ||
+                            (stripeEventDataObj === null || stripeEventDataObj === void 0 ? void 0 : stripeEventDataObj.value.address.city) ||
+                            '', line1: submitDataByKey.line1, line2: submitDataByKey.line2, postal_code: submitDataByKey.postal_code, state: submitDataByKey.state }), firstName: submitDataByKey.name.split(' ')[0], lastName: submitDataByKey.name.split(' ')[1], name: submitDataByKey.name }) });
+        };
+        /**
+         * handler for continue button click
+         */
+        this.continueClickHandler = async () => {
             if (!this.handleValidate()) {
                 // scroll to the top zonos-banner
                 setTimeout(() => {
@@ -34,6 +69,11 @@ export class ZonosCustomerInfo {
                 return;
             }
             this.showErrorBanner = false;
+            // check if the address contains invalid characters
+            const { hasInvalidCharacters } = await this.handleInvalidCharacters();
+            if (hasInvalidCharacters) {
+                return;
+            }
             this.continueClicked.emit();
             // submit google tag when the form is complete
             submitGtag('zonos-checkout-customer-info');
@@ -54,28 +94,83 @@ export class ZonosCustomerInfo {
             }
             return true;
         };
+        this.prepareAddressObject = (stripeAddressEventData) => {
+            var _a;
+            const addressValue = stripeAddressEventData.value;
+            return {
+                city: addressValue.address.city || '',
+                country: addressValue.address.country,
+                email: ((_a = stripeStore.stripeLinkEventData) === null || _a === void 0 ? void 0 : _a.value.email) || '',
+                line1: addressValue.address.line1 || '',
+                line2: addressValue.address.line2 || '',
+                name: addressValue.name || '',
+                phone: addressValue.phone || '',
+                postal_code: addressValue.address.postal_code || '',
+                state: addressValue.address.state || '',
+            };
+        };
         this.continueLoading = false;
         this.submitBtnType = undefined;
         this.submitBtnColor = undefined;
+        this.isMobile = false;
         this.defaultAddress = null;
         this.showErrorBanner = false;
-        this.hasInvalidShippingCharacters = false;
-        this.hasInvalidBillingCharacters = false;
+        this.isValidatingAddress = false;
+        this.invalidShippingCharacterList = null;
+        this.invalidBillingCharacterList = null;
+        this.openAddressValidationDialog = false;
+    }
+    checkInvalidCharacters(address) {
+        if (!address) {
+            return null;
+        }
+        // Do nothing if the allowed character sets is ALL or the address is incomplete
+        if (!address.complete ||
+            zonosStore.checkoutSettings.allowedCharacterSets === 'ALL') {
+            return null;
+        }
+        const { address: addressValue, firstName, lastName, name } = address.value;
+        const { city, country, line1, line2, postal_code, state } = addressValue;
+        const invalidList = containsNonLatinChars({
+            city,
+            country,
+            line1,
+            line2: line2 || '',
+            name: name || `${firstName} ${lastName}`,
+            postal_code,
+            state,
+        });
+        if (!Object.keys(invalidList).length) {
+            return null;
+        }
+        return invalidList;
     }
     render() {
+        var _a;
         if (!stripeStore.stripeElements) {
             return null;
         }
         const showBilling = !stripeStore.stripeShippingSameAsBilling;
+        // Get theme for the update dialog, inherit from the theme, no from this component theme
+        const theme = getZonosStoreTheme(zonosStore.appearance.theme);
         // start validate on typing after error banner is shown, and hide it if the form is complete
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, onInvalidCharacters: e => (this.hasInvalidShippingCharacters = e.detail), titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.email, titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 stripeStore.stripeShippingSameAsBilling = e.detail;
-            } }), h("zonos-collapse", { collapsed: !showBilling }, h("zonos-address", { defaultAddress: this.defaultAddress, onInvalidCharacters: e => (this.hasInvalidBillingCharacters = e.detail), titleText: translate('Billing address'), type: "billing" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            } }), h("zonos-collapse", { collapsed: !showBilling }, h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Billing address'), type: "billing" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
-            variant: this.submitBtnType }, translate('Continue to shipping'))))));
+            variant: this.submitBtnType }, translate('Continue to shipping')))), stripeStore.stripeAddressEventData && (h("zonos-address-update-dialog", { billingAddress: !stripeStore.stripeShippingSameAsBilling &&
+                stripeStore.stripeBillingAddressEventData
+                ? this.prepareAddressObject(stripeStore.stripeBillingAddressEventData)
+                : null, "data-theme": theme, dialogLoading: this.isValidatingAddress, dialogOpen: this.openAddressValidationDialog, isMobile: this.isMobile, onCloseDialog: () => (this.openAddressValidationDialog = false), onContinueClicked: e => {
+                const submitData = e.detail;
+                this.transformTranslatedAddressToStripeEvent({
+                    submitData,
+                    type: 'shippingAddress',
+                });
+            }, shippingAddress: this.prepareAddressObject(stripeStore.stripeAddressEventData), translatedBillingAddress: stripeStore.translatedAddress.billingAddress, translatedShippingAddress: stripeStore.translatedAddress.address }))));
     }
     static get is() { return "zonos-customer-info"; }
     static get encapsulation() { return "scoped"; }
@@ -148,12 +243,30 @@ export class ZonosCustomerInfo {
                 "attribute": "submit-btn-color",
                 "reflect": false
             },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the dialog is open"
+                },
+                "attribute": "is-mobile",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "defaultAddress": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
                     "original": "ContactOption | null",
-                    "resolved": "null | { address: { city: string; country: string; line1: string; line2?: string | undefined; postal_code: string; state: string; }; name: string; phone?: string | undefined; }",
+                    "resolved": "null | { address: { city: string; country: string; line1: string; line2?: string | undefined; postal_code: string; state: string; }; email: string; name: string; phone?: string | undefined; }",
                     "references": {
                         "ContactOption": {
                             "location": "import",
@@ -175,8 +288,10 @@ export class ZonosCustomerInfo {
     static get states() {
         return {
             "showErrorBanner": {},
-            "hasInvalidShippingCharacters": {},
-            "hasInvalidBillingCharacters": {}
+            "isValidatingAddress": {},
+            "invalidShippingCharacterList": {},
+            "invalidBillingCharacterList": {},
+            "openAddressValidationDialog": {}
         };
     }
     static get events() {

package/dist/collection/components/checkout/zonos-checkout/zonos-shipping/zonos-shipping.js

@@ -91,7 +91,7 @@ export class ZonosShipping {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: 'c172dbd75de8a0d5d32d7e3e1814a124aaa05c05', class: "zonos--shipping zonos--elements" }, h("div", { key: '3dbbfadac7c8fb2bd4f3337206da535add7c4dd5', class: "zonos--group" }, h("zonos-text", { key: '93c2e9f56359a0c046e23a0e8c70af9af2dad3f4', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: 'dc0aa4f036719929344071fe68dd8bf98d493642', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '98dd599d8a87e3a350b928a5d0d9300aa197d731', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: 'a59a2833967bde37cd2b31dca4209e8730ec92dc', class: "zonos--group-btn" }, h("zonos-button", { key: 'ef100ac737c28901f609b188bfa0b9e58d4363e8', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        return (h(Host, { key: '032c917dd5510a6a5801f0bf86a84bcf4096759e', class: "zonos--shipping zonos--elements" }, h("div", { key: 'b5052414ae56dc46908e53a1676acf96701bafa8', class: "zonos--group" }, h("zonos-text", { key: '41bb421c0fc620f8373be5453e872e83ad19150e', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: '4b0119b9c1991ab31c15220ed26f0eac18c7229e', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '61ea64f33b2b4bd54c4f2c4d273bac9e13d67040', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: '1908b7445ef7158402882265af8a357f48096937', class: "zonos--group-btn" }, h("zonos-button", { key: 'b73ca7298b5c020c237703e4ce1f9b877cb96605', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }

package/dist/collection/components/common/component-template/zonos-link/zonos-link.js

@@ -7,7 +7,7 @@ export class ZonosLink {
         this.linkTitle = undefined;
     }
     render() {
-        return (h(Host, { key: 'af4c861f0a7f0a86c60c2ba6fe12a37721d50c1b', class: "zonos--elements" }, h("a", { key: 'b8fc607e0aa5269f2c3c1ccf51e233b52fac6693', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '98ebca9c8962143426fd1c88d9189b92fc402505' }))));
+        return (h(Host, { key: '595aa56bf6c9503434d265b62a85a5fcbf0e7bec', class: "zonos--elements" }, h("a", { key: '3e355af783529c0fa77ff2c351476c92ec128ec3', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '45607e8fa7448a96f6914270baaeab2f0d03944e' }))));
     }
     static get is() { return "zonos-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-badge/zonos-badge.js

@@ -11,16 +11,16 @@ export class ZonosBadge {
         this.rounded = false;
     }
     render() {
-        return (h(Host, { key: 'cc521e396f505c1f3a69d40b755585c1e439f120', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: 'c68ba6ef2bcb35c94ecf2b11379be748aa998198', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '132ee2adfd3be7634d71df9ee1bf813fd56fe768', class: classes([
+            } }, h("div", { key: '7f200effb42296a21829c292101ef3300b041327', class: classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: 'ebe7b204422dc3b0d9fe93d3ca9bd75ceddb9f37' }, h("slot", { key: 'e58b021307f14226ce15df693bedfa50f79f6d8a' })))));
+            ]) }, this.icon, h("zonos-text", { key: '4358e95cb29ec6a82e32213b268612aadf8772c6' }, h("slot", { key: 'ab76831e3691a896179e06896d33ed771e4bbdf9' })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-button/zonos-button.css

@@ -229,6 +229,7 @@
 }
 :host button:not(.override-background).subtle:not([disabled]):hover {
   background: var(--amino-gray-500);
+  color: var(--amino-gray-0);
 }
 :host button:not(.override-background).subtle:not([disabled]):active {
   background: var(--amino-gray-200);

package/dist/collection/components/common/zonos-button/zonos-button.js

@@ -52,26 +52,35 @@ export class ZonosButton {
          * So need to re-assign the variant prop with the default value if the value is `undefined` here.
          */
         const variant = this.variant || 'standard';
-        const color = this.buttonColor && isColorVariable(this.buttonColor)
-            ? `var(--amino-${this.buttonColor})`
-            : this.buttonColor;
         // use override background if it exists, otherwise use color from setting
         const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
         // only set theme for button to change text color if variant is standard and override background is set
         const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
-        const borderStyle = getBorderRadius(this.borderStyle);
+        const borderStyle = getBorderRadius({
+            overrideBorderStyle: this.borderStyle,
+        });
         const backgroundActualColor = isColorVariable(overrideBackground) && overrideBackground
             ? window.getComputedStyle(this.ele).getPropertyValue(overrideBackground)
             : overrideBackground;
+        // use the variable if it's a color variable, otherwise use the color
+        const color = this.buttonColor && isColorVariable(this.buttonColor)
+            ? `var(--amino-${this.buttonColor})`
+            : this.buttonColor;
+        // set contrast color if background color is dark for all variants except subtle
+        const contrastColor = this.variant !== 'subtle' &&
+            backgroundActualColor &&
+            isDarkColor(backgroundActualColor)
+            ? 'white'
+            : color;
         const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
             ? 'white'
             : 'black';
-        return (h(Host, { key: '105badc02dbdcd9c782942e2b71719cd0ae7444e', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '10bfc0423b83cc231fb22fdc430a1e5de66705fc', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
-                '--color': color,
+                '--color': contrastColor,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'c817b0eec6a0649e48155f284965412beb89a5f6', class: classes([
+            }) }, h("button", { key: '1feab99eec063d35c53ed8c308ac7675988e565c', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -84,7 +93,7 @@ export class ZonosButton {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { key: '85d6175e728b87276b95e831560530a3f7424a7c', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'c65d771ca5182ac27da1769884dd8a4060037a1b', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'e3c6b155c4eb0f22aa9378586563face84ef8c2d', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { key: '4c7ad847266e626638762aeecfec011fbac3189b', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'd433f729bb10922694c27314a31d5159095ef4a9', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '06f32dc6cb7e10b1acbbde8bf1a0f663ea458608', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-card/zonos-card.js

@@ -12,12 +12,12 @@ export class ZonosCard {
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { key: '49d97d816bec7113ef6654cdf6f54598a17ebc00', style: {
+        return (h(Host, { key: '206169280db67be5e74382c5beccfad87ec9068a', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '6c4e326aa182ab597b099ddaf228b8b83efc471f', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { key: 'eb96bb3be8a7f78cec51f0288ed7d78b4f598659', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '11b6afcf37ec978d154990ab0a6b558d3b203126', type: "subheader" }, this.label), h("h-stack", { key: 'ae03b7569dc0f0e28fccd6c225305db778c6a21e', spacing: 8 }, this.actions))), h("slot", { key: 'b6224bc4d019e302b36a81c6c3a81e2bca4504b1' }), (this.footerActions || this.footerContent) && (h("footer", { key: 'f629f3d4914a92f400e7ccfd347e211bbf11035b', class: "card-footer", style: {
+            } }, h("div", { key: '4a1c7eab9b5420295ce3ec30cfd59985be35d912', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { key: '75454e5d9eacdfdf842a9a220deab467625e497b', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: 'bc9c7d3500cef41237dbe53f27ab398103be55dd', type: "subheader" }, this.label), h("h-stack", { key: '29d68a483bfc61ddfb9deeb63272a8221759513c', spacing: 8 }, this.actions))), h("slot", { key: '0ad416c6cdb0b1fc2c922b8569cf35a4009263cc' }), (this.footerActions || this.footerContent) && (h("footer", { key: '469110ce0f0f81cbee4ef67e79d3be17933bcf2e', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: '696d8588e5de862f111c09b801d26f2625e4017f' }, this.footerContent), h("h-stack", { key: '3b2df392b850b27fcdc6e745a2d5093124562367', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: '9044d9f3c81935119f668deb188f16cb1cb243bb' }, this.footerContent), h("h-stack", { key: '3f258ed6b07b8973b0bf753c7ab6427d67bf210c', spacing: 8 }, this.footerActions))))));
     }
     static get is() { return "zonos-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-checkbox/zonos-checkbox.css

@@ -33,6 +33,7 @@
 
 :host {
   display: inline-flex;
+  cursor: pointer;
 }
 :host label {
   display: inline-flex;

package/dist/collection/components/common/zonos-checkbox/zonos-checkbox.js

@@ -14,6 +14,12 @@ export class ZonosCheckbox {
         this.fontSize = 'base';
         this.borderStyle = undefined;
     }
+    onClick() {
+        if (this.isDisabled) {
+            return;
+        }
+        this.checkboxSelected.emit(!this.isChecked);
+    }
     render() {
         const isBackgroundVariable = colorPrefixes.includes(this.backgroundColor);
         const backgroundColor = isBackgroundVariable
@@ -26,15 +32,18 @@ export class ZonosCheckbox {
                 !isDarkColor(backgroundColor)
                     ? 'var(--amino-gray-800)'
                     : 'var(--amino-gray-0)';
-        const borderStyle = getBorderRadius(this.borderStyle, '4px');
-        return (h(Host, { key: '1383262a5cca00ede5154fbdf37bbabb8cbcd501', class: classes(['zonos--elements zonos--checkbox']), style: {
+        const borderStyle = getBorderRadius({
+            customRoundRadius: '4px',
+            overrideBorderStyle: this.borderStyle,
+        });
+        return (h(Host, { key: '8a3d5f66a7fb956dcb063f1b375bfb80856a80c4', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: 'aa01d0b1eebb53587f8d2d344e3b1d01a6a7a683', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '166eef6010570137110f8548c9eb76f32e5616e9', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: '95dc70a3821652e588706b570b40272a5f124b7f', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'ef61adbd2246fbb934a17b31ea62cd5ce4ff88f7', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: 'd98289266cd4e78dd1e5c9b89019d0dd4927e4d0', class: "checkmark-container" }, h("svg", { key: 'e179fe12a77e0c7f1f48bc943ff472d0a75e05d5', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '147acf112b6d28fa30af8e8c7fe8d7f998a507ab', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: 'b83bb5bb1881580be3d0ab3ed83157a0c0ce3f8e', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: '0587bf8dc5ee1477d91360e20d521efd9853c554', class: "checkmark-container" }, h("svg", { key: '3b7abf05f170aa2c4a31f76763c79ce975a543bc', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7d16a3850fbdca9fd3af7fa1f64a1715497b9c7b', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '305600e6860aeba8dfa0f3019d51d1bf91498310', size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -215,4 +224,13 @@ export class ZonosCheckbox {
                 }
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
 }

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js

@@ -63,17 +63,17 @@ export class ZonosCheckoutProgressTabs {
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (h(Host, { key: '8b1ca1b840103589ca7929771a7b828928ef1a64', class: "zonos--elements", style: {
+        return (h(Host, { key: '97800b058d8cb5617f8604c9c5702e2f8e8d943b', class: "zonos--elements", style: {
                 '--color': contrastLabelColor,
                 '--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: 'b1bd07fcc96bd4e900ba945e9f57b27967d3a458', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            } }, h("div", { key: 'ceea1729e3b2776700ef8eb0c20cecd65005fa75', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
             const isSelected = tab.value === selectedStep;
             return (h("button", { class: classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cartStore.step = tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, translate(tab.label))));
-        })), h("div", { key: 'f5b8b79050e1ebf23355161202a53854a0d9d08d', class: "zonos--tab-progress" }, h("div", { key: '5e9b4a726dd0cc6601a0097652b06759a7bba1fe', class: "zonos--progress-bar-fill" }))));
+        })), h("div", { key: '793ff1a1712c7fcdd309b58ce69f90e8ff14bfa7', class: "zonos--tab-progress" }, h("div", { key: '8fd846cade13695c42d8006427c4d7fd667edc37', class: "zonos--progress-bar-fill" }))));
     }
     static get is() { return "zonos-checkout-progress-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-collapse/zonos-collapse.js

@@ -42,10 +42,10 @@ export class ZonosCollapse {
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (h(Host, { key: 'ec163c2c73f38e479ba22bb3bea5dbe2f156170b', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: '514e75d41d29d70b4ca60230288ae183200b1e12', class: 'zonos--elements zonos--collapse', style: {
                 '--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: 'ab8b73ff44968d8e2f3dcf75439b09da36fdfb22' }, h("iframe", { key: '0b6d3518382c4c17a6eacb07c1617e84c7301c39', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '752d9054dadf8905e22cfcca81bb966c2d3ce8d3' }))));
+            } }, h("div", { key: '068aee1d13bde4c83ea8582b34844da7452c907c' }, h("iframe", { key: 'b22fd8ad898a098c244cb817dc6951854505efca', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'b54783376005085e379c7b8d43218ead1bf8e8ac' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-country-select/zonos-country-select.js

@@ -35,9 +35,9 @@ export class ZonosCountrySelect {
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: '4ac4ac37704300786a6a4b3668b1608cf9c2fd96', class: "zonos--elements", style: {
+        return (h(Host, { key: '1b37f326e23e3afaba1428cc23add2e5c425f0b9', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'aecc099069d42c73703f510b7021d1a0b988b810', class: "zonos--country-select" }, h("zonos-v-stack", { key: '358b01905c26ea03eef9c8a1551d1faa5c13b763', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'a22baac4b445d2dee08be2cb9c31714b226d9327', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '71515910f8bb3ef512c76a71246272f49506ee63', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: '44d417c7859f4263c8286e60a2cc9bfbe7a6698d', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: '966ab933f1bcd754e64fc43dc2013f6cde0f043b', class: "zonos--country-select" }, h("zonos-v-stack", { key: '77d6412871658e9fc8e59df130d3b95df68c5e0b', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '17d0413090d9637aa17234d19a3549b9828a3a86', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: '08aa6bd77273095d0b1753c6b423a283b638cc69', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'e1e770226aa2ad9c74681d8291797ff676217f09', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
     }
     static get is() { return "zonos-country-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js

@@ -8,9 +8,9 @@ export class ZonosCustomMessage {
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: '197958ea99ffdb3cfc291144129c20b01fdd8b11', class: "zonos--elements", style: {
+        return (h(Host, { key: 'c2cec226eb9236205d0c4b234bb393e4663d982f', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: 'c8ac70b6c21f6b412653a859661a07a3a07905c6', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '2efe05820fd9e5f23d48a9ac0c167d3ec41b34d1', class: "zonos--flex-message" }, h("zonos-icon", { key: '81577b44466ad6ed48b014fd20b441b3be96a70b', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: '16ba131ca7a8d80c81de6c38f3fbd11d872a8b2a', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: '51814b00b14061891914753a950b6a3dc852c0f0', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '4f7298eb552d9f0e1b6ded333c298df3d4fbbee2', class: "zonos--flex-message" }, h("zonos-icon", { key: '0a1fb171e1365a845e1e0855466058ced6c57f12', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'dd714a4f1fd3e1ebe55586c5c8c6941928eb2862', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-dialog/zonos-dialog.css

@@ -41,8 +41,8 @@
 :host .zonos--backdrop {
   width: 100vw;
   height: 100vh;
-  left: 0px;
-  top: 0px;
+  left: 0;
+  top: 0;
   background: var(--amino-backdrop-color);
   z-index: -999;
   opacity: 0;
@@ -59,7 +59,7 @@
   align-items: center;
   justify-content: center;
   z-index: 10002;
-  background: white;
+  background: var(--amino-gray-0);
   border-radius: var(--border-radius, var(--amino-radius-10));
 }
 :host .zonos--dialog-layout {

package/dist/collection/components/common/zonos-dialog/zonos-dialog.js

@@ -46,8 +46,10 @@ export class ZonosDialog {
         else {
             document.body.style.overflow = 'auto';
         }
-        const borderStyle = getBorderRadius(this.borderStyle);
-        return (h(Host, { key: 'cfa43ca3e1e64bbc9fb81dd35f07b5a2a57ef5a7', class: classes([
+        const borderStyle = getBorderRadius({
+            overrideBorderStyle: this.borderStyle,
+        });
+        return (h(Host, { key: '48eb2701a74a7973d3502fd1fdc65ce85a6d71ed', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -58,10 +60,10 @@ export class ZonosDialog {
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
                 '--width': this.width,
-            } }, h("div", { key: '967accb9ec4e552bab62bbec21fd0319d68828dc', class: "zonos--backdrop" }), h("div", { key: '37041f00cd3a996510f25708460a91baa527ed74', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '571cfdac8125f10d380e06efc1464ddcaf1f335e', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '200e75be392f6e8745ebbf2ddfa74aaf3d027caa', class: "zonos--loading" }, h("zonos-spinner", { key: 'a5d5a0d22a5d8ae5a22207716a7904d7031efa8d', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '37800b1fd96b0ff6df2724b4d62ea133470fae2c', class: "zonos--header" }, this.headerText && (h("h3", { key: 'eb0ef1b8c3d82d889f76b18b15d98a19fa1480a1', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '24b6945af71c51a35a09177e65d0b081abec75cb', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'a9d913ce8af53e60ffbf8eeb41b6d4372e0d389e', class: classes([
+            } }, h("div", { key: 'b408d792740d8854bab8ea60bd50ce894a75a836', class: "zonos--backdrop" }), h("div", { key: '04affcf48e0b209fa8dacc74039dad536ed9cd9b', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'c615792a60b2fa51a74af265b7c944a64e9ff18d', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '78d3b571f75c6037fdd694b4621fb9eae48d8ce0', class: "zonos--loading" }, h("zonos-spinner", { key: 'bd96037d5fe1717ebeae5b1ba27b96aa9ec9253d', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: 'cc057cbed99107d7d234d08d38e67cbf0140dc66', class: "zonos--header" }, this.headerText && (h("h3", { key: '587fff6b04981f1c24b44736b3b40044480f68ba', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '9a1944508996cd8ccb87f68ae175564528af3c4c', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'b563c1939c32489b63516cd4dd14df58a32a08cf', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '02c77f819baa6b1a684dfdf02b756ffa1fb55751' })), h("slot", { key: '0b469253c01c418d43d0865ae72d065d2a911aeb', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '39d66d136f630afbac7ced146d3a8ac60d3c9672' })), h("slot", { key: '5bace66c84150024d0203f89fbf8f5c263cb7472', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }