@zonos/elements 1.3.5 → 1.3.7-alpha.0

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

@@ -0,0 +1,126 @@
+:host {
+  font-family: var(--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host .zonos--checkout-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  gap: var(--amino-space-16);
+  display: flex;
+  justify-content: space-between;
+  border-top: var(--amino-border);
+  padding: var(--amino-space-12);
+  align-items: center;
+  background: var(--amino-surface-color-secondary);
+}
+:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--amino-space-8);
+}
+:host .zonos--checkout-footer .zonos--checkout-footer-icon-wrapper a {
+  line-height: 0px;
+}
+:host .zonos--checkout-footer zonos-button button.outline {
+  outline: 1px solid var(--amino-gray-800);
+}
+:host .zonos--checkout-footer .zonos--checkout-locale-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--amino-space-8);
+  position: relative;
+}
+@media (max-width: 400px) {
+  :host .zonos--checkout-footer .zonos--checkout-locale-wrapper {
+    gap: var(--amino-space-4);
+  }
+}
+:host .zonos--checkout-footer .zonos--checkout-footer-dialog {
+  position: absolute;
+  bottom: 36px;
+  left: var(--language-dialog-left);
+  background: var(--amino-surface-color);
+  box-shadow: var(--amino-v3-shadow-xl);
+  border-radius: var(--amino-radius-12);
+  width: 360px;
+  max-width: 100vw;
+  max-height: 500px;
+  z-index: 10005;
+  overflow: auto;
+  transform: scale(0);
+  transform-origin: bottom left;
+  opacity: 0;
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+}
+:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar {
+  width: 10px;
+}
+:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-track {
+  background: var(--amino-gray-50);
+}
+:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: #cccccc;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-thumb:hover {
+  background: #d6d6d6;
+}
+:host .zonos--checkout-footer .zonos--checkout-footer-dialog::-webkit-scrollbar-track {
+  border-top-right-radius: var(--amino-radius-12);
+  border-bottom-right-radius: var(--amino-radius-12);
+}
+:host .zonos--checkout-footer .zonos--checkout-footer-dialog.zonos--checkout-footer-dialog-open {
+  opacity: 1;
+  transform: scale(1);
+}
+@media (max-width: 768px) {
+  :host .zonos--checkout-footer {
+    flex-direction: column;
+    gap: var(--amino-space-32);
+    background-color: var(--amino-surface-color);
+    border-top: none;
+    position: relative;
+    padding-top: var(--amino-space-24);
+  }
+  :host .zonos--checkout-footer .zonos--checkout-footer-dialog {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transform-origin: bottom center;
+    width: 100vw;
+  }
+}

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

@@ -30,7 +30,7 @@ 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,

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;
@@ -191,6 +189,9 @@
 :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%;
 }
@@ -202,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

@@ -354,14 +354,13 @@ export class ZonosCheckout {
         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 = () => {
             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 })), 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", { 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, 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;
@@ -370,8 +369,8 @@ export class ZonosCheckout {
                 } }), 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 }))), !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 })))));
+            }, 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;
@@ -66,7 +75,8 @@
   position: sticky;
   display: flex;
   justify-content: center;
-  bottom: 0;
+  bottom: -5px;
+  padding-top: var(--amino-space-8);
   margin-top: var(--amino-space-12);
   background: var(--primary-color, var(--amino-gray-0));
 }

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

@@ -23,15 +23,23 @@ 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'))))));
     }

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

@@ -63,7 +63,7 @@ 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("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--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'))))));
     }

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

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

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

@@ -12,8 +12,7 @@ export class ZonosButton {
         this.handleSlotChange = () => {
             this.hasContent = true;
         };
-        this.class = '';
-        this.color = undefined;
+        this.buttonColor = undefined;
         this.backgroundColor = undefined;
         this.borderStyle = undefined;
         this.isDisabled = false;
@@ -51,21 +50,21 @@ export class ZonosButton {
          * So need to re-assign the variant prop with the default value if the value is `undefined` here.
          */
         const variant = this.variant || 'standard';
-        const color = this.color && isColorVariable(this.color)
-            ? `var(--amino-${this.color})`
-            : this.color;
+        const color = this.buttonColor && isColorVariable(this.buttonColor)
+            ? `var(--amino-${this.buttonColor})`
+            : this.buttonColor;
         // use override background if it exists, otherwise use color from setting
         const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
         // only set theme for button to change text color if variant is standard and override background is set
         const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
         const borderStyle = getBorderRadius(this.borderStyle);
         const spinnerColor = buttonTheme === 'LIGHT' ? 'white' : 'black';
-        return (h(Host, { key: 'e1ad2eb31ad09c8671debc2e32d83af21085b912', class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        return (h(Host, { key: '817142c1d229333aee0b38864788346d2749d3d1', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("button", { key: '0a087bf98251899711a71d69a89473479fc78c4f', class: classes([
+            } }, h("button", { key: '04bff1f932154f54b4af51b2fac053d40efc354f', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -78,7 +77,7 @@ export class ZonosButton {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { color: spinnerColor, size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'd80e58786f16bff52592a759679290a3a5ed0954', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'fd9bd0e9f89c3c9ab6dc9d0ac7a123542a1f5023', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }
@@ -94,25 +93,7 @@ export class ZonosButton {
     }
     static get properties() {
         return {
-            "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": "''"
-            },
-            "color": {
+            "buttonColor": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -132,7 +113,7 @@ export class ZonosButton {
                     "tags": [],
                     "text": "The color of the button text and svg"
                 },
-                "attribute": "color",
+                "attribute": "button-color",
                 "reflect": false
             },
             "backgroundColor": {