@zonos/elements 1.3.15-alpha.3 → 1.3.16-alpha.0

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

@@ -48,7 +48,7 @@
   width: 10px;
 }
 :host .zonos--group::-webkit-scrollbar-track {
-  background: var(--amino-gray-50);
+  background: var(--zonos-elements-gray-50);
 }
 :host .zonos--group::-webkit-scrollbar-thumb {
   border-radius: 10px;
@@ -66,7 +66,7 @@
   margin-bottom: 16px;
 }
 :host zonos-button {
-  box-shadow: 0 0 1px 0 var(--amino-gray-600);
+  box-shadow: 0 0 1px 0 var(--zonos-elements-gray-600);
 }
 :host .zonos--group-btn {
   position: sticky;
@@ -74,7 +74,7 @@
   justify-content: center;
   bottom: 0;
   margin-top: 12px;
-  background: var(--primary-color, var(--amino-gray-0));
+  background: var(--primary-color, var(--zonos-elements-gray-0));
 }
 :host .zonos--group-btn zonos-button {
   width: 100%;

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

@@ -35,7 +35,7 @@
   width: 10px;
 }
 :host *::-webkit-scrollbar-track {
-  background: var(--amino-gray-50);
+  background: var(--zonos-elements-gray-50);
 }
 :host *::-webkit-scrollbar-thumb {
   border-radius: 10px;
@@ -50,7 +50,7 @@
   display: flex;
   height: 100%;
   overflow: hidden;
-  border-radius: var(--border-radius, var(--amino-radius-10));
+  border-radius: var(--border-radius, var(--zonos-elements-radius-10));
 }
 :host .zonos--content .zonos--left,
 :host .zonos--content .zonos--right {
@@ -58,11 +58,11 @@
   padding: 32px;
 }
 :host .zonos--content .zonos--left {
-  background-color: var(--primary-color, var(--amino-gray-0));
-  border-right: 1px solid var(--amino-gray-200);
+  background-color: var(--primary-color, var(--zonos-elements-gray-0));
+  border-right: 1px solid var(--zonos-elements-gray-200);
 }
 :host .zonos--content .zonos--right {
-  background-color: var(--amino-gray-0);
+  background-color: var(--zonos-elements-gray-0);
 }
 :host .zonos--content .zonos--done {
   width: 100%;
@@ -70,7 +70,7 @@
   height: 100%;
   overflow: auto;
   flex-direction: column;
-  background-color: var(--amino-gray-0);
+  background-color: var(--zonos-elements-gray-0);
   align-items: center;
   justify-content: center;
   padding: 24px;
@@ -135,7 +135,7 @@
   margin: auto;
 }
 :host(.preview) .zonos--content {
-  border: var(--amino-border);
+  border: var(--zonos-elements-border);
 }
 :host(.preview) .zonos--content .zonos--done {
   padding: 32px;
@@ -175,9 +175,9 @@
 :host(.mobile) .zonos--content .zonos--right .zonos--wrapper {
   display: flex;
   flex-direction: column;
-  border: var(--amino-border);
-  border-radius: var(--border-radius, var(--amino-radius-10));
-  background-color: var(--amino-gray-50);
+  border: var(--zonos-elements-border);
+  border-radius: var(--border-radius, var(--zonos-elements-radius-10));
+  background-color: var(--zonos-elements-gray-50);
   padding: 12px;
   margin-top: 32px;
 }

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,
                 };
@@ -451,14 +453,14 @@ export class ZonosCheckout {
         const renderTopHeader = () => {
             return (h("zonos-v-stack", null, renderLogo(), h("zonos-checkout-progress-tabs", { backgroundColor: 
                 // only use different contrast color when the secondary color is too off with the background in mobile
-                this.isMobile ? '--amino-gray-0' : null }), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
+                this.isMobile ? '--zonos-elements-gray-0' : null }), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))));
         };
         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

@@ -52,7 +52,7 @@
   margin-bottom: 0;
 }
 :host zonos-button {
-  box-shadow: 0 0 1px 0 var(--amino-gray-600);
+  box-shadow: 0 0 1px 0 var(--zonos-elements-gray-600);
 }
 :host .zonos--error-banner {
   margin-bottom: 16px;
@@ -66,7 +66,7 @@
   width: 10px;
 }
 :host .zonos--group::-webkit-scrollbar-track {
-  background: var(--amino-gray-50);
+  background: var(--zonos-elements-gray-50);
 }
 :host .zonos--group::-webkit-scrollbar-thumb {
   border-radius: 10px;
@@ -84,7 +84,7 @@
   bottom: -5px;
   padding-top: 8px;
   margin-top: 12px;
-  background: var(--primary-color, var(--amino-gray-0));
+  background: var(--primary-color, var(--zonos-elements-gray-0));
 }
 :host .zonos--group-btn zonos-button {
   width: 100%;

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/assets/ChevronDownIcon.svg

@@ -1 +1 @@
-<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>
+<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-4.93 4.93a1.1 1.1 0 0 1-1.555 0l-4.93-4.93a1 1 0 0 1 0-1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>

package/dist/collection/components/checkout/zonos-checkout/zonos-review/assets/ChevronUpIcon.svg

@@ -1 +1 @@
-<svg color="var(--amino-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M17.707 14.707a1 1 0 0 1-1.414 0L12 10.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l4.93-4.93a1.1 1.1 0 0 1 1.555 0l4.93 4.93a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>
+<svg color="var(--zonos-elements-gray-400)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M17.707 14.707a1 1 0 0 1-1.414 0L12 10.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l4.93-4.93a1.1 1.1 0 0 1 1.555 0l4.93 4.93a1 1 0 0 1 0 1.414Z" fill="currentColor" fill-rule="evenodd"></path></svg>

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

@@ -34,7 +34,7 @@
 :host {
   position: sticky;
   top: 0;
-  background-color: var(--amino-gray-0);
+  background-color: var(--zonos-elements-gray-0);
   z-index: 1;
 }
 :host .zonos--total-pay {

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

@@ -54,7 +54,7 @@
   width: 10px;
 }
 :host .zonos--group::-webkit-scrollbar-track {
-  background: var(--amino-gray-50);
+  background: var(--zonos-elements-gray-50);
 }
 :host .zonos--group::-webkit-scrollbar-thumb {
   border-radius: 10px;
@@ -69,7 +69,7 @@
   margin-bottom: 16px;
 }
 :host zonos-button {
-  box-shadow: 0 0 1px 0 var(--amino-gray-600);
+  box-shadow: 0 0 1px 0 var(--zonos-elements-gray-600);
 }
 :host .zonos--group-btn {
   position: sticky;
@@ -77,7 +77,7 @@
   justify-content: center;
   bottom: 0;
   margin-top: 12px;
-  background: var(--primary-color, var(--amino-gray-0));
+  background: var(--primary-color, var(--zonos-elements-gray-0));
 }
 :host .zonos--group-btn zonos-button {
   width: 100%;

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

@@ -36,7 +36,7 @@
 }
 :host a {
   padding-bottom: 2px;
-  color: var(--amino-primary);
+  color: var(--zonos-elements-primary);
   box-shadow: none;
   text-decoration: none;
   /* Non standard for webkit */
@@ -45,10 +45,10 @@
   overflow-wrap: break-word;
 }
 :host a:link, :host a:visited {
-  color: var(--amino-primary);
+  color: var(--zonos-elements-primary);
   transition: all 150ms ease-in-out;
 }
 :host a:hover, :host a:active {
-  color: var(--amino-primary);
-  box-shadow: 0 1px 0 var(--amino-primary);
+  color: var(--zonos-elements-primary);
+  box-shadow: 0 1px 0 var(--zonos-elements-primary);
 }

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

@@ -37,12 +37,12 @@
 :host .zonos--badge-content {
   display: flex;
   gap: 8px;
-  font-size: var(--amino-font-size-s);
+  font-size: var(--zonos-elements-font-size-s);
   padding: 4px 8px;
   text-align: center;
-  border-radius: var(--amino-radius-6);
-  background-color: var(--amino-gray-100);
-  color: var(--amino-gray-800);
+  border-radius: var(--zonos-elements-radius-6);
+  background-color: var(--zonos-elements-gray-100);
+  color: var(--zonos-elements-gray-800);
   align-items: center;
 }
 :host p {
@@ -59,54 +59,54 @@
   border-radius: 20px;
 }
 :host .bold {
-  background-color: var(--amino-gray-600);
-  color: var(--amino-gray-100);
+  background-color: var(--zonos-elements-gray-600);
+  color: var(--zonos-elements-gray-100);
 }
 :host .blue {
-  background-color: var(--amino-blue-100);
-  color: var(--amino-blue-800);
+  background-color: var(--zonos-elements-blue-100);
+  color: var(--zonos-elements-blue-800);
 }
 :host .blue.bold {
-  background-color: var(--amino-blue-600);
-  color: var(--amino-blue-100);
+  background-color: var(--zonos-elements-blue-600);
+  color: var(--zonos-elements-blue-100);
 }
 :host .green {
-  background-color: var(--amino-green-100);
-  color: var(--amino-green-800);
+  background-color: var(--zonos-elements-green-100);
+  color: var(--zonos-elements-green-800);
 }
 :host .green.bold {
-  background-color: var(--amino-green-600);
-  color: var(--amino-green-100);
+  background-color: var(--zonos-elements-green-600);
+  color: var(--zonos-elements-green-100);
 }
 :host .red {
-  background-color: var(--amino-red-100);
-  color: var(--amino-red-800);
+  background-color: var(--zonos-elements-red-100);
+  color: var(--zonos-elements-red-800);
 }
 :host .red.bold {
-  background-color: var(--amino-red-600);
-  color: var(--amino-red-100);
+  background-color: var(--zonos-elements-red-600);
+  color: var(--zonos-elements-red-100);
 }
 :host .orange {
-  background-color: var(--amino-orange-100);
-  color: var(--amino-orange-800);
+  background-color: var(--zonos-elements-orange-100);
+  color: var(--zonos-elements-orange-800);
 }
 :host .orange.bold {
-  background-color: var(--amino-orange-600);
-  color: var(--amino-orange-100);
+  background-color: var(--zonos-elements-orange-600);
+  color: var(--zonos-elements-orange-100);
 }
 :host .purple {
-  background-color: var(--amino-purple-100);
-  color: var(--amino-purple-800);
+  background-color: var(--zonos-elements-purple-100);
+  color: var(--zonos-elements-purple-800);
 }
 :host .purple.bold {
-  background-color: var(--amino-purple-600);
-  color: var(--amino-purple-100);
+  background-color: var(--zonos-elements-purple-600);
+  color: var(--zonos-elements-purple-100);
 }
 :host .cyan {
-  background-color: var(--amino-cyan-100);
-  color: var(--amino-cyan-800);
+  background-color: var(--zonos-elements-cyan-100);
+  color: var(--zonos-elements-cyan-800);
 }
 :host .cyan.bold {
-  background-color: var(--amino-cyan-600);
-  color: var(--amino-cyan-100);
+  background-color: var(--zonos-elements-cyan-600);
+  color: var(--zonos-elements-cyan-100);
 }

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"; }