@zonos/elements 1.3.5-alpha.0 → 1.3.6

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

@@ -0,0 +1,60 @@
+import { h, Host } from "@stencil/core";
+import { localizationStore } from "../../../store/hello/localization";
+import { zonosStore } from "../../../store/zonosStore";
+import { classes } from "../../../utils/classes";
+import { isDarkColor } from "../../../utils/isDarkColor";
+import { languages } from "../../../../types/ILanguage";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import Globe from "./assets/globe.svg";
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import ZonosIcon from "./assets/zonosIcon.svg";
+export class ZonosCheckoutFooter {
+    constructor() {
+        this.showDialog = false;
+    }
+    handleGlobalClick(e) {
+        if (!this.el.contains(e.target) && this.showDialog) {
+            this.showDialog = false;
+        }
+    }
+    toggleDialog() {
+        this.showDialog = !this.showDialog;
+    }
+    render() {
+        var _a, _b;
+        const primaryColor = (_a = zonosStore.appearance) === null || _a === void 0 ? void 0 : _a.colorPrimary;
+        const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
+        const languageLabel = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.label;
+        return (h(Host, { key: 'cadd2ef8877c716cdeb1f5f40642e41cabc2a55d', class: "zonos--elements" }, h("div", { key: '480995fd1ca7bc41702d15dd40d64e02a9ba09dd', class: "zonos--checkout-footer", "data-theme": footerTheme, style: { '--primary-color': primaryColor } }, h("div", { key: 'b83ebb3203542f7f4a227b50b26010cbeb914294', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: '66ad21d85629d159b4ff3341e82c92d6bd19ceca', class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: "gray-700" }), onClick: () => this.toggleDialog(), variant: "subtle" }, languageLabel), h("div", { key: '1e8dce34f3866570f267233644c6d5549cf02c9b', class: classes([
+                'zonos--checkout-footer-dialog',
+                this.showDialog && 'zonos--checkout-footer-dialog-open',
+            ]) }, h("zonos-language-select", { key: '194aeb20273058577d2cbf3b72eef5f7152129e6', handleOnClose: () => this.toggleDialog() }))), h("div", { key: '56b5f28d98eeb5390b59da3dfbc072f967e945a0', class: "zonos--checkout-footer-icon-wrapper" }, h("zonos-text", { key: 'b098a9c89d4855d388372b20c94ee3582cc4e9df', type: "caption" }, "Powered by"), h("a", { key: '0652328fc74701168e5ddec2e0662208498e4557', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '826323504ca56c3216524d3a9a49f820162aeb85', autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 }))))));
+    }
+    static get is() { return "zonos-checkout-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-checkout-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-checkout-footer.css"]
+        };
+    }
+    static get states() {
+        return {
+            "showDialog": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleGlobalClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -63,9 +63,13 @@
   margin-bottom: var(--amino-space-8);
 }
 :host .zonos--group-btn {
+  position: sticky;
   display: flex;
   justify-content: center;
+  bottom: 0;
+  margin-top: var(--amino-space-12);
+  background: var(--primary-color, var(--amino-gray-0));
 }
 :host .zonos--group-btn zonos-button {
-  width: calc(100% - 10px);
+  width: 100%;
 }

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

@@ -30,12 +30,12 @@ export class ZonosCheckoutPayment {
             return null;
         }
         this.disabled = !((_a = stripeStore.stripePaymentEventData) === null || _a === void 0 ? void 0 : _a.complete);
-        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null)), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        return (h(Host, { class: "zonos--checkout-payment zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Payment method')), this.paymentError && (h("zonos-banner", { class: "zonos--payment-error-banner", intent: "error" }, translate("We couldn't complete your payment. Please verify the payment details and try again."))), h("zonos-payment", null), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
             amount: cartStore.total,
             currency: cartStore.currency,
-        })))));
+        }))))));
     }
     static get is() { return "zonos-checkout-payment"; }
     static get encapsulation() { return "scoped"; }

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-48) var(--amino-space-56);
+  padding: var(--amino-space-48) var(--amino-space-56) var(--amino-space-76);
 }
 :host .zonos--content .zonos--left {
   background-color: var(--primary-color, var(--amino-gray-0));
@@ -63,7 +63,6 @@
 }
 :host .zonos--content .zonos--right {
   background-color: var(--amino-gray-0);
-  padding-bottom: var(--amino-space-80);
 }
 :host .zonos--content .zonos--done {
   width: 100%;
@@ -114,15 +113,6 @@
   right: var(--amino-space-24);
   top: var(--amino-space-24);
 }
-:host .zonos--footer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  position: absolute;
-  bottom: var(--amino-space-32);
-  right: var(--amino-space-56);
-  gap: var(--amino-space-8);
-}
 :host .zonos--wrapper {
   overflow: auto;
   max-height: 100%;
@@ -168,9 +158,17 @@
 :host(.mobile) .zonos--content .zonos--left,
 :host(.mobile) .zonos--content .zonos--right {
   padding: var(--amino-space-12);
+  padding-bottom: var(--amino-space-76);
+}
+@media (max-width: 768px) {
+  :host(.mobile) .zonos--content .zonos--left,
+  :host(.mobile) .zonos--content .zonos--right {
+    padding-bottom: var(--amino-space-0);
+  }
 }
 :host(.mobile) .zonos--content .zonos--left {
   order: 2;
+  border-right: none;
 }
 :host(.mobile) .zonos--content .zonos--right {
   order: 1;
@@ -179,14 +177,21 @@
 :host(.mobile) .zonos--content .zonos--right .zonos--wrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--amino-space-16);
-  margin-top: var(--amino-space-24);
   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);
 }
+: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);
+}
+:host(.mobile) .zonos--content zonos-checkout-footer {
+  order: 3;
+}
 :host(.mobile) .zonos--content .zonos--wrapper {
   max-height: 100%;
 }
@@ -198,14 +203,4 @@
 }
 :host(.mobile) .zonos--cart-subtotal {
   margin: 0;
-}
-:host(.mobile) .zonos--footer {
-  bottom: 0;
-  left: 0;
-  padding: var(--amino-space-12);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--amino-gray-0);
 }

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

@@ -21,11 +21,12 @@ import RemoveIcon from "./assets/RemoveIcon.svg";
 export class ZonosCheckout {
     constructor() {
         this.applyStripeTheme = async () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const theme = ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) || zonosStore.appearance.theme;
             await initStripeElements({
                 overrideBorderRaidus: (_b = this.appearanceSettingsOverride) === null || _b === void 0 ? void 0 : _b.style,
                 overridePrimaryColor: (_c = this.appearanceSettingsOverride) === null || _c === void 0 ? void 0 : _c.colorPrimary,
+                overrideSecondaryColor: (_d = this.appearanceSettingsOverride) === null || _d === void 0 ? void 0 : _d.colorSecondary,
                 // only override theme or theme from appearance if it's mobile
                 overrideTheme: this.isMobile ? theme : undefined,
             });
@@ -349,32 +350,27 @@ export class ZonosCheckout {
         // only use submit button color if it's on desktop
         const submitButtonColor = !this.isMobile ? colorSecondary : undefined;
         const { customMessages } = localizationStore;
-        const defaultMessage = ((_a = customMessages.find(x => x.pageName === 'checkout_default')) === null || _a === void 0 ? void 0 : _a.message) ||
-            'Know about duties and taxes before you buy. Shop with confidence!';
+        const defaultMessage = (_a = customMessages.find(x => x.pageName === 'checkout_default')) === null || _a === void 0 ? void 0 : _a.message;
         const localePageEnum = this.getCurrentLocalePageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === localePageEnum);
         const renderLogo = () => (h("div", { class: "zonos--logo" }, logoUrl && (h("img", { alt: `${zonosStore.organizationName} logo`, src: logoUrl, width: 100 }))));
-        const renderTopHeader = () => (h("zonos-v-stack", null, renderLogo(), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), h("div", null, h("zonos-button", { class: "zonos--back-button", icon: h("zonos-icon", { content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, translate('Back')))));
-        const renderFooter = () => hasFooter && (h("div", { class: "zonos--footer", "data-theme": rightSideTheme }, h("zonos-text", { type: "hintText" }, translate('Powered by')), h("zonos-logo", { theme: rightSideTheme, width: "100px" })));
+        const renderTopHeader = () => (h("zonos-v-stack", null, renderLogo(), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message }))), h("div", null, h("zonos-button", { class: "zonos--back-button", icon: h("zonos-icon", { "aria-label": "Back to previous step", content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, translate('Back')))));
         const renderContent = () => {
-            var _a;
-            const submitBtnType = this.isMobile ? 'primary' : undefined;
-            const reviewElementSize = (_a = this.zonosReviewRef) === null || _a === void 0 ? void 0 : _a.scrollHeight;
             return (h("div", { class: 'zonos--content', style: {
                     '--border-radius': getBorderRadius(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, submitBtnType: submitBtnType })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor, submitBtnType: submitBtnType })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleCheckoutPaymentContinue(), paymentError: this.paymentError, submitBtnColor: submitButtonColor, submitBtnType: submitBtnType }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), !this.isMobile && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() })), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-collapse", { collapseSize: reviewElementSize,
-                // only collapse on mobile
-                collapsed: this.collapseReviewMobile && this.isMobile }, 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, 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.isMobile && (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;
                     }
-                    this.collapseReviewMobile =
-                        !this.collapseReviewMobile;
-                }, ref: el => (this.zonosReviewRef = el) }), h("zonos-cart-items", null))), h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))), !this.isMobile && renderFooter()), this.isMobile && renderFooter())), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
-                    ? Object.assign(Object.assign({}, cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride })))));
+                    this.collapseReviewMobile = !this.collapseReviewMobile;
+                } }), h("zonos-collapse", {
+                // only collapse on mobile
+                collapsed: this.collapseReviewMobile && this.isMobile
+            }, h("zonos-cart-items", null))), h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", null), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage })))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.handleFinishClick(), theme: rightSideTheme })), h("zonos-checkout-finish", { borderRadius: style, onCloseClick: () => this.handleFinishClick(), overrideNotification: cartStore.step === 'error' && !!cartStore.error
+                    ? Object.assign(Object.assign({}, cartStore.error), { type: 'error' }) : undefined, storybookForceStatus: this.storybookPaymentStatusOverride }))), h("zonos-checkout-footer", null)));
         };
         return (h(Host, { class: classes([
                 'zonos--checkout zonos--elements',

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

@@ -42,6 +42,15 @@
 :host .zonos--link-authentication {
   margin-bottom: var(--amino-space-32);
 }
+:host .zonos--address {
+  margin-bottom: var(--amino-space-16);
+}
+:host .zonos--checkbox {
+  margin-bottom: var(--amino-space-16);
+}
+:host .zonos--checkbox + .zonos--address {
+  margin-bottom: 0;
+}
 :host .zonos--group {
   margin-bottom: var(--amino-space-20);
   overflow: auto;
@@ -63,9 +72,13 @@
   background: #d6d6d6;
 }
 :host .zonos--group-btn {
+  position: sticky;
   display: flex;
   justify-content: center;
+  bottom: 0;
+  margin-top: var(--amino-space-12);
+  background: var(--primary-color, var(--amino-gray-0));
 }
 :host .zonos--group-btn zonos-button {
-  width: calc(100% - 10px);
+  width: 100%;
 }

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

@@ -23,17 +23,25 @@ export class ZonosCustomerInfo {
         }
     }
     render() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (!stripeStore.stripeElements) {
             return null;
         }
+        // if the shipping is different from billing, we need to make sure the billing address is valid and disable the button if it's not
+        const isValidBilling = stripeStore.stripeShippingSameAsBilling
+            ? !!((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete)
+            : !!((_b = stripeStore.stripeBillingAddressEventData) === null || _b === void 0 ? void 0 : _b.complete);
         // make sure data is valid
         this.disabled =
-            !((_a = stripeStore.stripeAddressEventData) === null || _a === void 0 ? void 0 : _a.complete) ||
-                !((_b = stripeStore.stripeLinkEventData) === null || _b === void 0 ? void 0 : _b.complete);
-        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')), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+            !isValidBilling ||
+                !((_c = stripeStore.stripeAddressEventData) === null || _c === void 0 ? void 0 : _c.complete) ||
+                !((_d = stripeStore.stripeLinkEventData) === null || _d === void 0 ? void 0 : _d.complete);
+        const showBilling = !stripeStore.stripeShippingSameAsBilling;
+        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')), h("zonos-link-authentication", { titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { 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, titleText: translate('Billing address'), type: "billing" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, 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'))))));
     }
     static get is() { return "zonos-customer-info"; }
     static get encapsulation() { return "scoped"; }

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

@@ -31,6 +31,12 @@
   -webkit-font-smoothing: antialiased;
 }
 
+:host {
+  position: sticky;
+  top: 0;
+  background-color: var(--amino-gray-0);
+  z-index: 1;
+}
 :host .zonos--total-pay {
   margin: var(--amino-space-16) 0 var(--amino-space-32);
 }
@@ -42,6 +48,7 @@
   justify-content: space-between;
   padding: var(--amino-space-4) 0;
   margin-bottom: var(--amino-space-8);
+  background-color: transparent;
 }
 :host(.mobile) .zonos--title {
   display: flex;

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

@@ -35,14 +35,14 @@ export class ZonosReview {
                 return null;
             }
             if (!this.collapsed) {
-                return (h("zonos-icon", { color: "gray-1200", content: ChevronDownIcon }));
+                return (h("zonos-icon", { "aria-label": "Collapse expanded section", content: ChevronDownIcon, iconColor: "gray-1200" }));
             }
-            return (h("zonos-icon", { color: "gray-1200", content: ChevronUpIcon }));
+            return (h("zonos-icon", { "aria-label": "Expand collapsed section", content: ChevronUpIcon, iconColor: "gray-1200" }));
         };
         return (h(Host, { class: classes([
                 'zonos--review zonos--elements',
                 this.isMobile && 'mobile',
-            ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { color: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, formatCurrency({
+            ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, formatCurrency({
             amount: 
             // show total without taxes when step is shipping, show total with taxes when step is payment
             cartStore.step === 'shipping'

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

@@ -66,11 +66,15 @@
   background: #d6d6d6;
 }
 :host .zonos--group-btn {
+  position: sticky;
   display: flex;
   justify-content: center;
+  bottom: 0;
+  margin-top: var(--amino-space-12);
+  background: var(--primary-color, var(--amino-gray-0));
 }
 :host .zonos--group-btn zonos-button {
-  width: calc(100% - 10px);
+  width: 100%;
 }
 :host zonos-banner {
   margin-top: var(--amino-space-24);

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

@@ -63,9 +63,9 @@ export class ZonosShipping {
                 value: item.id,
             };
         });
-        return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) }))), h("zonos-button", { backgroundColor: this.submitBtnColor, "is-disabled": this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        return (h(Host, { class: "zonos--shipping zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !(serviceLevels === null || serviceLevels === void 0 ? void 0 : serviceLevels.length) ? (h("zonos-banner", { bannerTitle: "No shipping methods found - try editing your address or contacting support if the error persists", intent: "error" })) : (h("zonos-shipping-rich-radio", { items: serviceLevels || [], onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
-            variant: this.submitBtnType }, translate('Go to payment'))));
+            variant: this.submitBtnType }, translate('Go to payment'))))));
     }
     static get is() { return "zonos-shipping"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,24 +4,23 @@ import { classes } from "../../utils/classes";
 export class ZonosBadge {
     constructor() {
         this.bold = false;
-        this.color = 'gray';
+        this.badgeColor = 'gray';
         this.icon = undefined;
         this.iconRight = false;
         this.size = 'default';
         this.rounded = false;
-        this.class = '';
     }
     render() {
-        return (h(Host, { key: '2d111e91f403ef5c03f742f5dabe9491623be91d', class: classes(['zonos--elements zonos--badge', this.class]), style: {
+        return (h(Host, { key: '0f502b63322730f508fd7c92f231573b1dfbfd6b', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'e6debe091b732b857f180cee19bec4be435ea524', class: classes([
+            } }, h("div", { key: '4ee3f0b623067625ddd79336a1854f5ab796b3b1', class: classes([
                 'zonos--badge-content',
-                this.color,
+                this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: 'e92c97d77fa5ce279059953f7d7fbc5a0030aa5d' }, h("slot", { key: 'c93852c3225ba57dd26c26300254f348e349f9ad' })))));
+            ]) }, this.icon, h("zonos-text", { key: 'e5bdf974408416811f7666fc453ca47db58fa43f' }, h("slot", { key: 'd953b60fefe2c25aea529b9de41938cfd96a285b' })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -58,7 +57,7 @@ export class ZonosBadge {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "color": {
+            "badgeColor": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -81,7 +80,7 @@ export class ZonosBadge {
                         }],
                     "text": "The size of the badge"
                 },
-                "attribute": "color",
+                "attribute": "badge-color",
                 "reflect": false,
                 "defaultValue": "'gray'"
             },
@@ -170,24 +169,6 @@ export class ZonosBadge {
                 "attribute": "rounded",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "css class for the component"
-                },
-                "attribute": "class",
-                "reflect": false,
-                "defaultValue": "''"
             }
         };
     }

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

@@ -11,7 +11,6 @@ export class ZonosBanner {
         };
         this.bannerTitle = undefined;
         this.intent = undefined;
-        this.class = '';
         this.hasContent = false;
     }
     render() {
@@ -23,13 +22,9 @@ export class ZonosBanner {
                 h("slot", { onSlotchange: this.handleSlotChange }),
             ].filter(Boolean);
             const textColor = color === 'gray' ? 'gray-1200' : `${color}-800`;
-            return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { color: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { color: textColor }, content)))));
+            return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { textColor: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { textColor: textColor }, content)))));
         };
-        const baseClass = classes([
-            'zonos--elements zonos--banner',
-            this.class,
-            this.intent,
-        ]);
+        const baseClass = classes(['zonos--elements zonos--banner', this.intent]);
         const font = zonosStoreFontFamily();
         switch (this.intent) {
             case 'error':
@@ -117,24 +112,6 @@ export class ZonosBanner {
                 },
                 "attribute": "intent",
                 "reflect": false
-            },
-            "class": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "css class for the component"
-                },
-                "attribute": "class",
-                "reflect": false,
-                "defaultValue": "''"
             }
         };
     }

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

@@ -83,10 +83,10 @@
 }
 :host button[disabled] {
   cursor: not-allowed;
-  background-color: var(--amino-gray-200);
+  background-color: var(--background-color, var(--amino-gray-200));
 }
 :host button[disabled] .zonos--spinner-wrapper {
-  background-color: var(--amino-gray-200);
+  background-color: var(--background-color, var(--amino-gray-200));
 }
 :host button:active {
   transform: scale(0.99);
@@ -118,6 +118,11 @@
 :host button:not(.only-icon).has-icon {
   gap: var(--amino-space-8);
 }
+@media (max-width: 400px) {
+  :host button:not(.only-icon).has-icon {
+    font-size: var(--amino-font-size-s);
+  }
+}
 :host button.override-background {
   background-color: var(--background-color, var(--amino-gray-0));
   color: var(--color, var(--amino-gray-1200));
@@ -218,6 +223,7 @@
 :host button:not(.override-background).subtle {
   background: transparent;
   color: var(--color);
+  outline: none;
 }
 :host button:not(.override-background).subtle:not([disabled]):hover {
   background: var(--amino-gray-100);
@@ -243,4 +249,16 @@
 }
 :host button:not(.override-background).outline:not([disabled]):active {
   background: var(--amino-gray-200);
+}
+:host .zonos--footer-country-flag {
+  height: 18px;
+  width: 18px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 30px;
+  box-shadow: var(--amino-v3-shadow-medium);
+  z-index: 10;
+  justify-self: center;
+  border-radius: var(--amino-radius-4);
+  width: 24px;
 }