@zonos/elements 1.3.15-alpha.2 → 1.3.15

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.css

@@ -55,7 +55,7 @@
 :host .zonos--content .zonos--left,
 :host .zonos--content .zonos--right {
   flex: 1;
-  padding: var(--amino-space-32);
+  padding: 32px;
 }
 :host .zonos--content .zonos--left {
   background-color: var(--primary-color, var(--amino-gray-0));
@@ -73,7 +73,7 @@
   background-color: var(--amino-gray-0);
   align-items: center;
   justify-content: center;
-  padding: var(--amino-space-24);
+  padding: 24px;
   padding-bottom: 50px;
 }
 :host .zonos--content .zonos--done .zonos--header {
@@ -97,18 +97,18 @@
   flex-direction: column;
 }
 :host .zonos--left .zonos--wrapper {
-  padding: 0 var(--amino-space-8) var(--amino-space-8);
+  padding: 0 8px 8px;
 }
 :host .zonos--left .zonos--payment-error-banner {
-  margin-top: var(--amino-space-24);
+  margin-top: 24px;
 }
 :host .zonos--right {
   position: relative;
 }
 :host .zonos--right .zonos--close-button {
   position: absolute;
-  right: var(--amino-space-24);
-  top: var(--amino-space-24);
+  right: 24px;
+  top: 24px;
   z-index: 2;
 }
 :host .zonos--wrapper {
@@ -126,8 +126,8 @@
   align-items: center;
 }
 :host .zonos--checkout-default-message {
-  margin-left: var(--amino-space-76);
-  margin-bottom: var(--amino-space-8);
+  margin-left: 76px;
+  margin-bottom: 8px;
 }
 
 :host(.preview) {
@@ -138,7 +138,7 @@
   border: var(--amino-border);
 }
 :host(.preview) .zonos--content .zonos--done {
-  padding: var(--amino-space-32);
+  padding: 32px;
 }
 
 :host(.mobile) {
@@ -155,13 +155,13 @@
 }
 :host(.mobile) .zonos--content .zonos--left,
 :host(.mobile) .zonos--content .zonos--right {
-  padding: var(--amino-space-12);
-  padding-bottom: var(--amino-space-76);
+  padding: 12px;
+  padding-bottom: 76px;
 }
 @media (max-width: 768px) {
   :host(.mobile) .zonos--content .zonos--left,
   :host(.mobile) .zonos--content .zonos--right {
-    padding-bottom: var(--amino-space-0);
+    padding-bottom: 0px;
   }
 }
 :host(.mobile) .zonos--content .zonos--left {
@@ -170,7 +170,7 @@
 }
 :host(.mobile) .zonos--content .zonos--right {
   order: 1;
-  padding-top: var(--amino-space-16);
+  padding-top: 16px;
 }
 :host(.mobile) .zonos--content .zonos--right .zonos--wrapper {
   display: flex;
@@ -178,14 +178,14 @@
   border: var(--amino-border);
   border-radius: var(--border-radius, var(--amino-radius-10));
   background-color: var(--amino-gray-50);
-  padding: var(--amino-space-12);
-  margin-top: var(--amino-space-32);
+  padding: 12px;
+  margin-top: 32px;
 }
 :host(.mobile) .zonos--content .zonos--right .zonos--review {
   margin-bottom: 0;
 }
 :host(.mobile) .zonos--content .zonos--right .zonos--cart-items {
-  margin-top: var(--amino-space-8);
+  margin-top: 8px;
 }
 :host(.mobile) .zonos--content zonos-checkout-footer {
   order: 3;

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

@@ -217,6 +217,7 @@ export class ZonosCheckout {
                 postal_code: legacyShippingInfo.customerZip,
                 state: legacyShippingInfo.customerState,
             },
+            email: legacyShippingInfo.customerEmail || '',
             name: legacyShippingInfo.customerName,
             phone: legacyShippingInfo.customerPhone,
         };
@@ -241,6 +242,7 @@ export class ZonosCheckout {
                         postal_code: shippingAddressSession.postalCode,
                         state: shippingAddressSession.state,
                     },
+                    email: '',
                     name: `${shippingAddressSession.firstName} ${shippingAddressSession.lastName}`,
                     phone: shippingAddressSession.phone,
                 };
@@ -455,10 +457,10 @@ export class ZonosCheckout {
         };
         const renderContent = () => {
             return (h("div", { class: 'zonos--content', style: {
-                    '--border-radius': getBorderRadius(style),
+                    '--border-radius': getBorderRadius({ overrideBorderStyle: style }),
                 } }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
                     '--primary-color': !this.isMobile ? colorPrimary : '',
-                } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, 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, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !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: () => {
+                } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, 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, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !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
                     if (!this.isMobile) {
                         return;
@@ -481,7 +483,7 @@ export class ZonosCheckout {
                 hasFooter && 'has-footer',
                 this.preview && 'preview',
                 this.isMobile && 'mobile',
-            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent()))));
+            ]) }, 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()))));
     }
     static get is() { return "zonos-checkout"; }
     static get encapsulation() { return "scoped"; }
@@ -564,7 +566,7 @@ export class ZonosCheckout {
                 "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",

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

@@ -37,16 +37,16 @@
   flex-direction: column;
 }
 :host .zonos--title {
-  margin-bottom: var(--amino-space-20);
+  margin-bottom: 20px;
 }
 :host .zonos--link-authentication {
-  margin-bottom: var(--amino-space-32);
+  margin-bottom: 32px;
 }
 :host .zonos--address {
-  margin-bottom: var(--amino-space-16);
+  margin-bottom: 16px;
 }
 :host .zonos--checkbox {
-  margin-bottom: var(--amino-space-16);
+  margin-bottom: 16px;
 }
 :host .zonos--checkbox + .zonos--address {
   margin-bottom: 0;
@@ -55,10 +55,10 @@
   box-shadow: 0 0 1px 0 var(--amino-gray-600);
 }
 :host .zonos--error-banner {
-  margin-bottom: var(--amino-space-16);
+  margin-bottom: 16px;
 }
 :host .zonos--group {
-  margin-bottom: var(--amino-space-20);
+  margin-bottom: 20px;
   overflow: auto;
   padding: 5px;
 }
@@ -82,8 +82,8 @@
   display: flex;
   justify-content: center;
   bottom: -5px;
-  padding-top: var(--amino-space-8);
-  margin-top: var(--amino-space-12);
+  padding-top: 8px;
+  margin-top: 12px;
   background: var(--primary-color, var(--amino-gray-0));
 }
 :host .zonos--group-btn zonos-button {

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-review/zonos-review.css

@@ -38,22 +38,22 @@
   z-index: 1;
 }
 :host .zonos--total-pay {
-  margin: var(--amino-space-8) 0 var(--amino-space-24);
+  margin: 8px 0 24px;
 }
 
 :host(.mobile) {
   display: flex;
   flex-direction: row;
-  gap: var(--amino-space-24);
+  gap: 24px;
   justify-content: space-between;
-  padding: var(--amino-space-4) 0;
-  margin-bottom: var(--amino-space-8);
+  padding: 4px 0;
+  margin-bottom: 8px;
   background-color: transparent;
 }
 :host(.mobile) .zonos--title {
   display: flex;
   align-self: center;
-  gap: var(--amino-space-8);
+  gap: 8px;
 }
 :host(.mobile) .zonos--total-pay {
   margin: 0;

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

@@ -37,16 +37,16 @@
   flex-direction: column;
 }
 :host .zonos--title {
-  margin-bottom: var(--amino-space-24);
+  margin-bottom: 24px;
 }
 :host .zonos--shipping-method-title {
-  margin-bottom: var(--amino-space-16);
+  margin-bottom: 16px;
 }
 :host .zonos-shipping-rich-radio {
-  margin-bottom: var(--amino-space-24);
+  margin-bottom: 24px;
 }
 :host .zonos--group {
-  margin-bottom: var(--amino-space-20);
+  margin-bottom: 20px;
   overflow: auto;
   padding: 5px;
 }
@@ -66,7 +66,7 @@
   background: #d6d6d6;
 }
 :host .zonos--error-banner {
-  margin-bottom: var(--amino-space-16);
+  margin-bottom: 16px;
 }
 :host zonos-button {
   box-shadow: 0 0 1px 0 var(--amino-gray-600);
@@ -76,12 +76,12 @@
   display: flex;
   justify-content: center;
   bottom: 0;
-  margin-top: var(--amino-space-12);
+  margin-top: 12px;
   background: var(--primary-color, var(--amino-gray-0));
 }
 :host .zonos--group-btn zonos-button {
   width: 100%;
 }
 :host zonos-banner {
-  margin-top: var(--amino-space-24);
+  margin-top: 24px;
 }

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.css

@@ -36,7 +36,7 @@
 }
 :host .zonos--badge-content {
   display: flex;
-  gap: var(--amino-space-8);
+  gap: 8px;
   font-size: var(--amino-font-size-s);
   padding: 4px 8px;
   text-align: center;

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-banner/zonos-banner.css

@@ -33,7 +33,7 @@
 
 :host {
   border-radius: var(--amino-radius-10);
-  padding: var(--amino-space-16);
+  padding: 16px;
   background: var(--amino-gray-100);
 }
 :host .zonos--container {
@@ -48,12 +48,12 @@
   justify-self: start;
 }
 :host .zonos--header-wrapper {
-  margin-top: var(--amino-space-0);
+  margin-top: 0px;
   grid-area: header;
 }
 :host .zonos--content-wrapper {
   grid-area: content;
-  margin-top: var(--amino-space-4);
+  margin-top: 4px;
 }
 
 :host(.info) {

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

@@ -46,7 +46,7 @@
   background-color: var(--amino-surface-color);
   justify-content: center;
   border-radius: var(--amino-radius-10);
-  gap: var(--amino-space-8);
+  gap: 8px;
 }
 :host button {
   width: 100%;
@@ -68,7 +68,7 @@
   letter-spacing: normal;
   cursor: pointer;
   white-space: nowrap;
-  padding: var(--amino-space-8) var(--amino-space-24);
+  padding: 8px 24px;
   color: var(--color, var(--amino-gray-1200));
   margin: 1px;
   /** Button size */
@@ -96,29 +96,29 @@
 :host button.sm {
   height: var(--amino-size-sm);
   line-height: var(--amino-size-sm);
-  padding: var(--amino-space-4) var(--amino-space-8);
+  padding: 4px 8px;
 }
 :host button.sm:not(.has-content).has-icon {
-  padding: 0 var(--amino-space-4);
+  padding: 0 4px;
 }
 :host button.md {
   height: var(--amino-size-md);
   line-height: var(--amino-size-md);
-  padding: var(--amino-space-8) var(--amino-space-16);
+  padding: 8px 16px;
 }
 :host button.md:not(.has-content).has-icon {
-  padding: 0 var(--amino-space-8);
+  padding: 0 8px;
 }
 :host button.lg {
   height: var(--amino-size-lg);
   line-height: var(--amino-size-lg);
-  padding: var(--amino-space-12) var(--amino-space-24);
+  padding: 12px 24px;
 }
 :host button.lg:not(.has-content).has-icon {
-  padding: 0 var(--amino-space-16);
+  padding: 0 16px;
 }
 :host button:not(.only-icon).has-icon {
-  gap: var(--amino-space-8);
+  gap: 8px;
 }
 @media (max-width: 400px) {
   :host button:not(.only-icon).has-icon {
@@ -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);