@zonos/elements 1.3.11-alpha.0 → 1.3.11-alpha.1

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) var(--amino-space-76);
+  padding: var(--amino-space-32);
 }
 :host .zonos--content .zonos--left {
   background-color: var(--primary-color, var(--amino-gray-0));
@@ -96,9 +96,6 @@
   display: flex;
   flex-direction: column;
 }
-:host .zonos--left .zonos--back-button {
-  margin-bottom: var(--amino-space-24);
-}
 :host .zonos--left .zonos--wrapper {
   padding: 0 var(--amino-space-8) var(--amino-space-8);
 }
@@ -112,6 +109,7 @@
   position: absolute;
   right: var(--amino-space-24);
   top: var(--amino-space-24);
+  z-index: 2;
 }
 :host .zonos--wrapper {
   overflow: auto;

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

@@ -1,5 +1,5 @@
 import { Fragment, h, Host, } from "@stencil/core";
-import { cartStore, cartStoreNextStep, cartStorePreviousStep, cartStoreReset, cartStoreUpdateItems, cartStoreUpdateToErrorState, } from "../../store/checkout/cart";
+import { cartStore, cartStoreNextStep, cartStoreReset, cartStoreUpdateItems, cartStoreUpdateToErrorState, } from "../../store/checkout/cart";
 import { initStripeElements, stripeStore, stripeStoreCleanupDomesticShippingSession, stripeStoreConfirmPayment, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, } from "../../store/checkout/stripe";
 import { localizationStore } from "../../store/hello/localization";
 import { translate } from "../../store/translationStore";
@@ -17,8 +17,6 @@ import { mergeConfig } from "../../utils/mergeConfig";
 import { submitGtag } from "../../utils/submitGtag";
 /** These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
-import LeftArrow from "./assets/LeftArrow.svg";
-// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import MessageIcon from "./assets/MessageIcon.svg";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import RemoveIcon from "./assets/RemoveIcon.svg";
@@ -56,7 +54,7 @@ export class ZonosCheckout {
         this.stripe = window.Zonos.stripe;
         this.submitLoading = false;
         this.paymentError = false;
-        this.collapseReviewMobile = false;
+        this.collapseReviewMobile = true;
         this.isAttachError = false;
         this.isMobile = false;
         this.zonosReviewRef = undefined;
@@ -319,14 +317,6 @@ export class ZonosCheckout {
         // Reload the page
         window.location.reload();
     }
-    async handleBackClick() {
-        // close the modal if back button is clicked on customer info step
-        if (cartStore.step === 'customer-info') {
-            await this.closeDialogHandler();
-            return;
-        }
-        cartStorePreviousStep();
-    }
     handleWindowResize() {
         this.isMobile = isCheckoutMobile(this.mobile);
         // apply theme to stripe elements
@@ -374,23 +364,31 @@ 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", { "aria-label": "Back to previous step", content: LeftArrow }), noBackground: true, noPaddingLeft: true, noPaddingRight: true, onClick: () => this.handleBackClick(), theme: leftSideTheme }, translate('Back')))));
+        const renderTopHeader = () => (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 })))));
         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", { "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, 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(), 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;
                 } }), h("zonos-collapse", {
-                // only collapse on mobile
+                // only collapsible 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)));
+            }, h("zonos-cart-items", null), this.isMobile && (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 && (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", { "data-theme": rightSideTheme, mobile: this.isMobile,
+                /**
+                 * For this component, use slot instead of passing JSX through prop of other component. Because
+                 * the click outside event will be triggered on and targeted to whichever component that it's attached to.
+                 * Move it into <slot /> would resolve the issue.
+                 */
+                slot: !this.isMobile ? 'dialog-footer' : undefined })));
         };
         return (h(Host, { class: classes([
                 'zonos--checkout zonos--elements',

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

@@ -38,7 +38,7 @@
   z-index: 1;
 }
 :host .zonos--total-pay {
-  margin: var(--amino-space-16) 0 var(--amino-space-32);
+  margin: var(--amino-space-8) 0 var(--amino-space-32);
 }
 
 :host(.mobile) {

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

@@ -16,11 +16,13 @@ export class ZonosShipping {
             if (!selectedShippingOption) {
                 return;
             }
+            this.isSelecting = true;
             // save selected shipping option to store
             const updateStatus = await cartStoreUpdateSelectedShippingOption(selectedShippingOption);
             if (!updateStatus) {
                 return;
             }
+            this.isSelecting = false;
             this.disabled = false;
         };
         /**
@@ -29,11 +31,38 @@ export class ZonosShipping {
         this.continueClickHandler = () => {
             this.continueClicked.emit();
         };
+        this.initServiceLevels = () => {
+            var _a;
+            this.serviceLevels =
+                ((_a = cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.flatMap((item) => {
+                    var _a, _b;
+                    const { expectedDate, maxTransit, minTransit } = cartStoreGetShippingTransitInfo(item);
+                    const sublabel = expectedDate
+                        ? `${translate('Expected delivery')} ${expectedDate}`
+                        : '';
+                    const caption = minTransit && maxTransit
+                        ? `(${minTransit}-${maxTransit} ${translate('business days')})`
+                        : '';
+                    const shippingAmount = ((_b = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; })) === null || _b === void 0 ? void 0 : _b.subtotals.shipping) || 0;
+                    return {
+                        caption,
+                        label: item.displayName,
+                        price: formatCurrency({
+                            amount: shippingAmount,
+                            currency: cartStore.currency,
+                        }),
+                        sublabel,
+                        value: item.id,
+                    };
+                })) || [];
+        };
         this.continueLoading = false;
         this.submitBtnColor = undefined;
         this.submitBtnType = undefined;
         this.selectedShippingMethod = null;
+        this.isSelecting = false;
         this.disabled = true;
+        this.serviceLevels = [];
     }
     watchFormComplete() {
         var _a;
@@ -45,30 +74,18 @@ export class ZonosShipping {
             });
         }
     }
+    componentWillLoad() {
+        this.initServiceLevels();
+        const selectedServiceLevel = this.serviceLevels.find(item => { var _a; return item.value === ((_a = cartStore.selectedShippingOption) === null || _a === void 0 ? void 0 : _a.id); }) || null;
+        if (selectedServiceLevel) {
+            this.selectedShippingMethod = selectedServiceLevel;
+        }
+        // enable continue button if there is a selected shipping option
+        this.disabled = !selectedServiceLevel;
+    }
     render() {
-        var _a;
-        const serviceLevels = (_a = cartStore.shippingData) === null || _a === void 0 ? void 0 : _a.flatMap((item) => {
-            var _a, _b;
-            const { expectedDate, maxTransit, minTransit } = cartStoreGetShippingTransitInfo(item);
-            const sublabel = expectedDate
-                ? `${translate('Expected delivery')} ${expectedDate}`
-                : '';
-            const caption = minTransit && maxTransit
-                ? `(${minTransit}-${maxTransit} ${translate('business days')})`
-                : '';
-            const shippingAmount = ((_b = (_a = cartStore.landedCostData) === null || _a === void 0 ? void 0 : _a.find(landedCostItem => { var _a; return ((_a = landedCostItem.landedCost) === null || _a === void 0 ? void 0 : _a.shipmentRating.id) === item.id; })) === null || _b === void 0 ? void 0 : _b.subtotals.shipping) || 0;
-            return {
-                caption,
-                label: item.displayName,
-                price: formatCurrency({
-                    amount: shippingAmount,
-                    currency: cartStore.currency,
-                }),
-                sublabel,
-                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, isDisabled: this.disabled, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
+        var _a, _b;
+        return (h(Host, { key: 'ab881bdb575ac0177154ffa8a2d84d668151c46d', class: "zonos--shipping zonos--elements" }, h("div", { key: 'b8738e0fb5c32b329ae03ccd2cb2d1a178a05aa8', class: "zonos--group" }, h("zonos-text", { key: 'd942ab3f4e77631145a0a38dae95999454a92b56', class: "zonos--title", type: "semiBoldSubheader" }, translate('Shipping information')), h("zonos-text", { key: '6855f44cf3458891776b3c215417bec329de89dc', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.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", { initialSelectedValue: (_b = this.selectedShippingMethod) === null || _b === void 0 ? void 0 : _b.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: '9f2c00c948230679d96ac44940c1dee45e751ded', class: "zonos--group-btn" }, h("zonos-button", { key: '8bab3848d596fef19bc7245fc87a525cf59a15c5', backgroundColor: this.submitBtnColor, isDisabled: this.disabled, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }
@@ -148,7 +165,9 @@ export class ZonosShipping {
     static get states() {
         return {
             "selectedShippingMethod": {},
-            "disabled": {}
+            "isSelecting": {},
+            "disabled": {},
+            "serviceLevels": {}
         };
     }
     static get events() {

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: '99bf9ff46cf84f424739b76d3da8a8c770c0a88f', class: "zonos--elements" }, h("a", { key: 'bd3553a33f27b4815a7b0573a34862093242b456', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: 'ad80829c1ca5cd9b0e2dd62542025eeecf436196' }))));
+        return (h(Host, { key: 'b4def20f1c697c437e98c35e7355e84bfea88be2', class: "zonos--elements" }, h("a", { key: '8bb78fc9f3a38256cc3e7cda104c7eec1c93d185', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '897301f324059f6917a71f9ed444ddae32535485' }))));
     }
     static get is() { return "zonos-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,16 +11,16 @@ export class ZonosBadge {
         this.rounded = false;
     }
     render() {
-        return (h(Host, { key: '1cece57ce37e04873f625d05ad5a0bea6368b46b', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '9e6c4ec2341f5ca076a3c54bcce347db9e83bb38', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '8caf3f2ffb7deda215c44ad0c6c0892936d526c2', class: classes([
+            } }, h("div", { key: 'ad4d88e7ac5b8e8a617bb904faeaad73d426c271', 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: 'fb8ac7f09675f9cfd829ecea54c61f5c699caa00' }, h("slot", { key: '978bc876e427d932662a0100043e04b105e9df8d' })))));
+            ]) }, this.icon, h("zonos-text", { key: 'd0709a3ffbcc65703933273f614bbb71792b8f61' }, h("slot", { key: '997537e7fd4102a35a1e16789fa7b5444ee85a5a' })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -228,7 +228,7 @@
   outline: none;
 }
 :host button:not(.override-background).subtle:not([disabled]):hover {
-  background: var(--amino-gray-100);
+  background: var(--subtle-hover-color, var(--amino-gray-100));
 }
 :host button:not(.override-background).subtle:not([disabled]):active {
   background: var(--amino-gray-200);

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

@@ -1,9 +1,11 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 import { getButtonTheme } from "../../utils/getButtonTheme";
+import { getContrastColor } from "../../utils/getContrastColor";
 import { isColorVariable } from "../../utils/isColorVariable";
+import { styles } from "../../utils/styles";
 export class ZonosButton {
     constructor() {
         /**
@@ -59,12 +61,23 @@ export class ZonosButton {
         const buttonTheme = variant === 'standard' ? getButtonTheme(overrideBackground) : undefined;
         const borderStyle = getBorderRadius(this.borderStyle);
         const spinnerColor = buttonTheme === 'LIGHT' ? 'black' : 'white';
-        return (h(Host, { key: 'f3374eedd37ec6293260fba7b19d66aa013d3484', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        return (h(Host, { key: '75f5e6900c6e0eb468ea639460d55f251b580200', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--background-color': overrideBackground,
                 '--border-radius': borderStyle,
                 '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("button", { key: '352ce427591b20b8042dcd19ce159b77c1fc2faf', class: classes([
+                '--subtle-hover-color': this.buttonColor
+                    ? // for the subtle variant, the hover background should contrast with the text color
+                        getContrastColor({
+                            backgroundColor: 'white',
+                            color: isColorVariable(this.buttonColor)
+                                ? window
+                                    .getComputedStyle(this.ele)
+                                    .getPropertyValue(`--amino-${this.buttonColor}`)
+                                : this.buttonColor,
+                        })
+                    : undefined,
+            }) }, h("button", { key: 'fd1323ac24be622182f9b60d8b026fb0ea47fa40', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -77,7 +90,7 @@ export class ZonosButton {
                 overrideBackground &&
                     variant === 'standard' &&
                     'override-background',
-            ]), 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: '554cc1fd9bb58d833339ae21e837d586adc248c2', 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: '92706fef0545ba24e3f943d731bffa1e844ec154', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }
@@ -385,6 +398,7 @@ export class ZonosButton {
             "hasContent": {}
         };
     }
+    static get elementRef() { return "ele"; }
     static get watchers() {
         return [{
                 "propName": "icon",

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

@@ -12,9 +12,9 @@ export class ZonosCard {
         this.spacing = '24px';
     }
     render() {
-        return (h(Host, { key: 'b350f7a592ea35c3b6beaf5eefaa2ab0208975dd', style: {
+        return (h(Host, { key: 'c2f25ffa32920500b63702df35b9e30dcf28b47d', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '125e8b550cd8f371e28a012536722f48402774f2', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: '3cf038c62910ebac736ed1c37ecf1a490c8e1d0e' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
+            } }, h("div", { key: '30515451d4694d3fffffab4c23ac2b0ff0e37710', class: classes(['styled-card']), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", { key: 'a1ced320f20a585c7201fc5c7b0729ce8e91a176' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
             } }, h("div", null, this.footerContent), h("h-stack", { spacing: 8 }, this.footerActions))))));

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

@@ -27,14 +27,14 @@ export class ZonosCheckbox {
                     ? 'var(--amino-gray-800)'
                     : 'var(--amino-gray-0)';
         const borderStyle = getBorderRadius(this.borderStyle, '4px');
-        return (h(Host, { key: '5f8516f5933b739cc3f21d901e50dec1c761fa58', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: '20c925f03d3659edde22d4e075aab5ac7323efc1', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: '6544f51a8c892d616123ab4194d069b055e3dc86', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '958e35bf16be575230748fccdb1a3916942c3a30', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: 'c2a0fd9fa8f3aebed3bc996647bfb88299822257', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'c3293e1ac102b874eccd2ef9494f94c5da3e28e1', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '2c55e0a190b092dd083c433c35143e253910f54f', class: "checkmark-container" }, h("svg", { key: '0aa1f705b728055835159a399173a170aee4f7c0', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd526bbafde4d4399be3f3a0a7cc87e92634d9548', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: '8d0a39007516ee7f9700f40f3fab20f21161a045', class: "checkmark-container" }, h("svg", { key: 'ee310e0aa1d06f7c81272cac5991dc5c34e19655', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '44611f270e104bc421f50aaccbce1b059e8aa15f', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-checkout-progress-tabs/assets/TabCheckmark.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.289 7.40424C18.618 7.65585 18.6808 8.12656 18.4291 8.4556L11.9291 16.9556C11.7978 17.1273 11.5988 17.234 11.383 17.2484C11.1673 17.2627 10.9559 17.1832 10.803 17.0303L6.80304 13.0303C6.51015 12.7374 6.51015 12.2626 6.80304 11.9697C7.09594 11.6768 7.57081 11.6768 7.8637 11.9697L11.258 15.3639L17.2376 7.54442C17.4892 7.21539 17.9599 7.15263 18.289 7.40424Z" fill="currentColor"/>
+</svg>

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

@@ -0,0 +1,102 @@
+: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 {
+  margin-bottom: var(--amino-space-32);
+}
+:host .zonos--tab-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+:host .zonos--tab-index {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  width: 24px;
+  height: 24px;
+  font-weight: bold;
+}
+:host .zonos--tab-index .zonos--tab-index-label,
+:host .zonos--tab-index .zonos--tab-index-done-icon {
+  position: absolute;
+  top: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;
+}
+:host .zonos--tab-index .zonos--tab-index-done-icon {
+  top: -50%;
+  opacity: 0;
+}
+:host .zonos--tab-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: transparent;
+  border: 0;
+}
+:host .zonos--tab-item.done .zonos--tab-index-done-icon {
+  top: 0;
+  opacity: 1;
+}
+:host .zonos--tab-item.done .zonos--tab-index-label {
+  opacity: 0;
+  top: 50%;
+}
+:host .zonos--tab-item.selected zonos-text {
+  color: var(--color);
+}
+:host .zonos--tab-progress {
+  width: 100%;
+  background-color: transparent;
+  border-radius: 10px;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+  position: relative;
+  padding: 1px;
+  height: 8px;
+}
+:host .zonos--tab-progress .zonos--progress-bar-fill {
+  border-radius: 10px;
+  background-color: var(--color);
+  height: 100%;
+  width: var(--progress-percent);
+  transition: width 0.5s ease-in-out;
+}