@zonos/elements 1.3.6 → 1.3.7-alpha.1

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

@@ -7,7 +7,6 @@ import { formatCurrency } from "../../../utils/formatCurrency";
 import InfoIcon from "./assets/InfoIcon.svg";
 export class ZonosCartSubtotal {
     render() {
-        const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
         const showDutyTaxesInfo = cartStore.step === 'payment' || cartStore.step === 'shipping';
         const renderShippingInfo = () => {
             if (!cartStore.selectedShippingOption) {
@@ -29,11 +28,7 @@ export class ZonosCartSubtotal {
                 currency: cartStore.currency,
             })
             : '-', cartStore.isSelectedShippingGuarantee && (h("zonos-badge", null, translate('Guaranteed'))))))), h("tr", { class: "zonos--row zonos--cart-pay-total" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Order total'))), h("td", { class: "zonos--column" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
-            amount: 
-            // show total without taxes when step is shipping, show total with taxes when step is payment
-            cartStore.step === 'shipping'
-                ? totalWithoutTaxes
-                : cartStore.total,
+            amount: cartStore.total,
             currency: cartStore.currency,
         })))))));
     }

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

@@ -3,8 +3,10 @@ import { cartStore } from "../../../store/checkout/cart";
 import { stripeStore, stripeStoreReset, stripeStoreRetrievePayment, } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
+import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
 import { getBorderRadius } from "../../../utils/getBorderRadius";
 import { handleFetch } from "../../../utils/handleFetch";
+import { sendErrorLog } from "../../../utils/logging/sendErrorLog";
 import { submitGtag } from "../../../utils/submitGtag";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import RemoveIcon from "./assets/RemoveIcon.svg";
@@ -28,19 +30,24 @@ export class ZonosCheckoutFinish {
         this.handleSuccessBehavior = (orderId) => {
             const { successBehavior } = zonosStore.checkoutSettings;
             switch (successBehavior) {
-                case 'REDIRECT_TO_SUCCESS_PAGE':
+                case 'REDIRECT_TO_SUCCESS_PAGE': {
                     const redirectUrl = zonosStore.checkoutSettings.successRedirectUrl;
                     if (redirectUrl) {
+                        // reset store and checkout session id before redirecting
+                        stripeStoreReset();
+                        cartStore.checkoutSessionId = null;
                         window.location.href = `${redirectUrl}?zOrderNumber=${orderId}`;
                     }
                     // If no redirect URL, break and display Zonos success page
                     break;
+                }
                 case 'CLOSE_MODAL':
                     this.closeClickHandler();
                     break;
                 case 'ZONOS_SUCCESS_PAGE':
                 default:
                     // Do nothing, display Zonos success page
+                    this.isLoading = false;
                     break;
             }
         };
@@ -48,9 +55,9 @@ export class ZonosCheckoutFinish {
         this.getPullOrder = async (attempts = 0) => {
             const order = await this.pullOrder();
             if (order) {
+                void trackConversionEvent('checkout_orderCompleted');
                 this.order = order;
                 this.handleSuccessBehavior(order.id);
-                this.isLoading = false;
             }
             else if (!order && attempts < 5) {
                 // Wait for 1 second before the next attempt
@@ -60,18 +67,16 @@ export class ZonosCheckoutFinish {
             else {
                 // Set loading to false to display generic success page and log error
                 this.isLoading = false;
-                const errorObject = {
-                    endpoint: `${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/get-order`,
+                const baseUrl = process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL;
+                const checkoutSessionId = cartStore.checkoutSessionId;
+                void sendErrorLog({
+                    endpoint: `${baseUrl}/api/zonos-elements/get-order?checkoutSessionId=${checkoutSessionId}`,
                     errors: ['Order not found after multiple attempts'],
                     metadata: {
                         checkoutSessionId: cartStore.checkoutSessionId || '',
                         domain: window.location.hostname,
                         storeId: zonosStore.storeId,
                     },
-                };
-                void handleFetch(`${process.env.NEXT_PUBLIC_ZONOS_ROUTE_URL}/api/zonos-elements/log-error`, {
-                    body: errorObject,
-                    method: 'POST',
                 });
             }
         };
@@ -79,7 +84,7 @@ export class ZonosCheckoutFinish {
             this.isLoading = true;
             const clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret') || stripeStore.clientSecret;
             if (clientSecret || this.storybookForceStatus) {
-                const { error, messages } = await stripeStoreRetrievePayment({
+                const { error, messages, paymentMethod } = await stripeStoreRetrievePayment({
                     clientSecret,
                     storybookForceStatus: this.storybookForceStatus,
                 });
@@ -93,6 +98,9 @@ export class ZonosCheckoutFinish {
                 }
                 else {
                     submitGtag('zonos-checkout-success');
+                    void trackConversionEvent('checkout_paymentInfoCompleted', {
+                        paymentMethod,
+                    });
                     const successEvent = new CustomEvent('zonos-checkout-success', {
                         detail: {
                             message: 'Zonos Checkout successfully processed order',
@@ -102,12 +110,18 @@ export class ZonosCheckoutFinish {
                 }
                 // Attempt to pull the order details from the graph every second on 5 attempts
                 if (this.notificationType === 'success') {
-                    this.isLoading = true;
-                    void this.getPullOrder();
+                    // wait this to finish before resetting store and checkout session id
+                    await this.getPullOrder();
+                }
+                else {
+                    this.isLoading = false;
                 }
             }
+            else {
+                this.isLoading = false;
+            }
             stripeStoreReset();
-            this.isLoading = false;
+            cartStore.checkoutSessionId = null;
         };
         this.closeClickHandler = () => {
             this.closeClick.emit();
@@ -140,7 +154,7 @@ export class ZonosCheckoutFinish {
         // const totalItems = this.order?.items?.reduce((acc, item) => {
         //   return acc + item.quantity;
         // }, 0);
-        return (h(Host, { key: '9a09eb68e5e6d256f72798bb5119ad1ff467fd70', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: 'fe08bfd0c0b60f4dce1aa9a6f3ba273dccd70a92', class: "zonos--checkout-finish zonos--elements", style: {
                 '--border-radius': getBorderRadius(this.borderRadius),
             } }, this.isLoading && (h("div", { class: "loading-wrapper" }, h("zonos-spinner", null))), !this.isLoading && (h(Fragment, null, h("div", { class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", null, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), h("zonos-button", { onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Keep shopping')))))));
     }

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

@@ -62,6 +62,9 @@
 :host .zonos--payment-error-banner {
   margin-bottom: var(--amino-space-8);
 }
+:host zonos-button {
+  box-shadow: 0 0 1px 0 var(--amino-gray-600);
+}
 :host .zonos--group-btn {
   position: sticky;
   display: flex;

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

@@ -1,10 +1,13 @@
 import { Fragment, h, Host, } from "@stencil/core";
 import { cartStore, cartStoreNextStep, cartStorePreviousStep, cartStoreReset, cartStoreUpdateItems, cartStoreUpdateToErrorState, } from "../../store/checkout/cart";
-import { initStripeElements, stripeStore, stripeStoreConfirmPayment, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, } from "../../store/checkout/stripe";
+import { initStripeElements, stripeStore, stripeStoreCleanupDomesticShippingSession, stripeStoreConfirmPayment, stripeStoreInitCheckoutSession, stripeStorePrefetchLandedCost, stripeStoreReset, } from "../../store/checkout/stripe";
 import { localizationStore } from "../../store/hello/localization";
 import { translate } from "../../store/translationStore";
 import { zonosStore, } from "../../store/zonosStore";
+import { trackConversionEvent } from "../../utils/api/trackConversionEvent";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
+import { isShippableCountry } from "../../utils/checkout/isShippableCountry";
+import { watchBigcommerceDomesticCheckout } from "../../utils/checkout/watchBigcommerceDomesticCheckout";
 import { classes } from "../../utils/classes";
 import { getBorderRadius } from "../../utils/getBorderRadius";
 import { isDarkColor } from "../../utils/isDarkColor";
@@ -31,19 +34,6 @@ export class ZonosCheckout {
                 overrideTheme: this.isMobile ? theme : undefined,
             });
         };
-        this.isShippableCountry = (showLog = true) => {
-            if (!localizationStore.localizationLoaded) {
-                return false;
-            }
-            // if localization is loaded and the localization is not a shippable country, keep the original click event
-            if (!localizationStore.isShippableCountry) {
-                if (showLog) {
-                    log(`Checkout: not shippable country`);
-                }
-                return false;
-            }
-            return true;
-        };
         this.getCurrentLocalePageEnum = () => {
             switch (cartStore.step) {
                 case 'customer-info':
@@ -70,6 +60,7 @@ export class ZonosCheckout {
         this.isMobile = false;
         this.zonosReviewRef = undefined;
         this.storybookPaymentStatusOverride = undefined;
+        this.domesticRedirectedBtnSelector = '#zonos--domestic-redirected-checkout-button';
     }
     /**
      * Init cart info handler event
@@ -115,7 +106,8 @@ export class ZonosCheckout {
             // do nothing if button element is not found
             return;
         }
-        const buttonAnchorElements = document.querySelectorAll(buttonAnchorSelector);
+        // also attach event to hidden button if user was redirected with shipping address session
+        const buttonAnchorElements = document.querySelectorAll(`${buttonAnchorSelector}, ${this.domesticRedirectedBtnSelector}`);
         // only attach event once, and looping through all of the button elements
         buttonAnchorElements.forEach(button => {
             const isEventAttached = button.getAttribute('data-zonos-checkout-attached');
@@ -125,7 +117,7 @@ export class ZonosCheckout {
             }
             button.addEventListener('click', async (e) => {
                 // do nothing if it's not shippable country
-                if (!this.isShippableCountry()) {
+                if (!isShippableCountry()) {
                     return;
                 }
                 e.preventDefault();
@@ -141,6 +133,7 @@ export class ZonosCheckout {
                         throw new Error('Error building cart');
                     }
                     submitGtag('zonos-checkout-start');
+                    void trackConversionEvent('checkout_open');
                 }
                 catch (err) {
                     // stop loading
@@ -155,6 +148,14 @@ export class ZonosCheckout {
             });
             button.removeAttribute('disabled');
             button.setAttribute('data-zonos-checkout-attached', 'true');
+            // if this button is the hidden button, trigger the click event
+            if (button.matches(this.domesticRedirectedBtnSelector)) {
+                button.dispatchEvent(new CustomEvent('click'));
+                // cleanup shipping session after button is clicked
+                stripeStoreCleanupDomesticShippingSession();
+                // remove the button after it's clicked
+                button.remove();
+            }
         });
     }
     appearanceSettingsOverrideChanged() {
@@ -170,6 +171,25 @@ export class ZonosCheckout {
     async init() {
         stripeStore.stripe = window.Zonos.stripe;
         this.stripe = window.Zonos.stripe;
+        // check if bigcommerce, if user enters the shipping address that's in the shipping zone at bigcommerce checkout
+        watchBigcommerceDomesticCheckout({
+            domesticRedirectedBtnSelector: this.domesticRedirectedBtnSelector,
+            onShippingAddressSessionFound: shippingAddressSession => {
+                // prefilled the default address if shipping address session is found for checkout on open
+                this.defaultAddress = {
+                    address: {
+                        city: shippingAddressSession.city,
+                        country: shippingAddressSession.countryCode,
+                        line1: shippingAddressSession.address1,
+                        line2: shippingAddressSession.address2,
+                        postal_code: shippingAddressSession.postalCode,
+                        state: shippingAddressSession.state,
+                    },
+                    name: `${shippingAddressSession.firstName} ${shippingAddressSession.lastName}`,
+                    phone: shippingAddressSession.phone,
+                };
+            },
+        });
         const hideInternationalOrderInterval = setInterval(() => {
             const internationalSelector = window.Zonos.internationalHideSelector;
             if (!internationalSelector) {
@@ -178,7 +198,7 @@ export class ZonosCheckout {
                 return;
             }
             // hide the selector if it's international
-            const isInternationalOrder = this.isShippableCountry(false);
+            const isInternationalOrder = isShippableCountry(false);
             const selector = document.querySelectorAll(internationalSelector);
             if (!isInternationalOrder) {
                 // show the selector when it's domestic
@@ -507,7 +527,8 @@ export class ZonosCheckout {
             "isAttachError": {},
             "isMobile": {},
             "zonosReviewRef": {},
-            "storybookPaymentStatusOverride": {}
+            "storybookPaymentStatusOverride": {},
+            "domesticRedirectedBtnSelector": {}
         };
     }
     static get methods() {

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

@@ -51,6 +51,9 @@
 :host .zonos--checkbox + .zonos--address {
   margin-bottom: 0;
 }
+:host zonos-button {
+  box-shadow: 0 0 1px 0 var(--amino-gray-600);
+}
 :host .zonos--group {
   margin-bottom: var(--amino-space-20);
   overflow: auto;
@@ -75,7 +78,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

@@ -1,6 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import { stripeStore, } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
+import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
 import { submitGtag } from "../../../utils/submitGtag";
 export class ZonosCustomerInfo {
     constructor() {
@@ -20,6 +21,7 @@ export class ZonosCustomerInfo {
         if (!this.disabled) {
             // submit google tag when the form is complete
             submitGtag('zonos-checkout-customer-info');
+            void trackConversionEvent('checkout_customerInfoCompleted');
         }
     }
     render() {

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

@@ -28,7 +28,6 @@ export class ZonosReview {
             ? 'boldSubheader'
             : 'secondaryPageHeader';
         const titleTextColor = this.isMobile ? 'gray-1200' : 'gray-800';
-        const totalWithoutTaxes = cartStore.total - cartStore.dutiesTaxFees;
         const renderCollapseIcon = () => {
             // only display the collapse icon if the component is being rendered with mobile styles
             if (!this.isMobile) {
@@ -43,11 +42,7 @@ export class ZonosReview {
                 'zonos--review zonos--elements',
                 this.isMobile && 'mobile',
             ]) }, 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'
-                ? totalWithoutTaxes
-                : cartStore.total,
+            amount: cartStore.total,
             currency: cartStore.currency,
         })))));
     }

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

@@ -65,6 +65,9 @@
 :host .zonos--group::-webkit-scrollbar-thumb:hover {
   background: #d6d6d6;
 }
+:host zonos-button {
+  box-shadow: 0 0 1px 0 var(--amino-gray-600);
+}
 :host .zonos--group-btn {
   position: sticky;
   display: flex;

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

@@ -1,6 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import { cartStore, cartStoreGetShippingTransitInfo, cartStoreUpdateSelectedShippingOption, } from "../../../store/checkout/cart";
 import { translate } from "../../../store/translationStore";
+import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
 import { formatCurrency } from "../../../utils/formatCurrency";
 import { submitGtag } from "../../../utils/submitGtag";
 export class ZonosShipping {
@@ -35,9 +36,13 @@ export class ZonosShipping {
         this.disabled = true;
     }
     watchFormComplete() {
+        var _a;
         if (!this.disabled) {
             // submit google tag when the form is complete
             submitGtag('zonos-checkout-shipping-info');
+            void trackConversionEvent('checkout_shippingInfoCompleted', {
+                serviceLevelId: (_a = this.selectedShippingMethod) === null || _a === void 0 ? void 0 : _a.value,
+            });
         }
     }
     render() {

package/dist/collection/components/common/component-template/zonos-link/zonos-link.css

@@ -0,0 +1,54 @@
+: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 {
+  display: inline-block;
+}
+:host a {
+  padding-bottom: 2px;
+  color: var(--amino-primary);
+  box-shadow: none;
+  text-decoration: none;
+  /* Non standard for webkit */
+  word-break: break-word;
+  hyphens: auto;
+  overflow-wrap: break-word;
+}
+:host a:link, :host a:visited {
+  color: var(--amino-primary);
+  transition: all 150ms ease-in-out;
+}
+:host a:hover, :host a:active {
+  color: var(--amino-primary);
+  box-shadow: 0 1px 0 var(--amino-primary);
+}

package/dist/collection/components/common/component-template/zonos-link/zonos-link.js

@@ -0,0 +1,97 @@
+import { h, Host } from "@stencil/core";
+export class ZonosLink {
+    constructor() {
+        this.href = '';
+        this.rel = undefined;
+        this.target = undefined;
+        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' }))));
+    }
+    static get is() { return "zonos-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The href for the link"
+                },
+                "attribute": "href",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The rel attribute for the link"
+                },
+                "attribute": "rel",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The target attribute for the link"
+                },
+                "attribute": "target",
+                "reflect": false
+            },
+            "linkTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The title attribute for the link"
+                },
+                "attribute": "link-title",
+                "reflect": false
+            }
+        };
+    }
+}

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: '0f502b63322730f508fd7c92f231573b1dfbfd6b', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: '1cece57ce37e04873f625d05ad5a0bea6368b46b', class: classes(['zonos--elements zonos--badge']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '4ee3f0b623067625ddd79336a1854f5ab796b3b1', class: classes([
+            } }, h("div", { key: '8caf3f2ffb7deda215c44ad0c6c0892936d526c2', 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: 'e5bdf974408416811f7666fc453ca47db58fa43f' }, h("slot", { key: 'd953b60fefe2c25aea529b9de41938cfd96a285b' })))));
+            ]) }, this.icon, h("zonos-text", { key: 'fb8ac7f09675f9cfd829ecea54c61f5c699caa00' }, h("slot", { key: '978bc876e427d932662a0100043e04b105e9df8d' })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,6 +33,7 @@
 
 :host {
   display: inline-flex;
+  border-radius: var(--border-radius, var(--amino-radius-10));
 }
 :host .zonos--spinner-wrapper {
   position: absolute;
@@ -69,6 +70,7 @@
   white-space: nowrap;
   padding: var(--amino-space-8) var(--amino-space-24);
   color: var(--color, var(--amino-gray-1200));
+  margin: 1px;
   /** Button size */
 }
 :host button.sm.no-background, :host button.md.no-background, :host button.lg.no-background {

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

@@ -58,13 +58,13 @@ export class ZonosButton {
         // 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: '817142c1d229333aee0b38864788346d2749d3d1', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        const spinnerColor = buttonTheme === 'LIGHT' ? 'black' : 'white';
+        return (h(Host, { key: 'f3374eedd37ec6293260fba7b19d66aa013d3484', 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: '04bff1f932154f54b4af51b2fac053d40efc354f', class: classes([
+            } }, h("button", { key: '352ce427591b20b8042dcd19ce159b77c1fc2faf', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -77,7 +77,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: 'fd9bd0e9f89c3c9ab6dc9d0ac7a123542a1f5023', 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: '554cc1fd9bb58d833339ae21e837d586adc248c2', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }

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: '8581e04d45e7061bff02485ad9a9a22920b5fe84', style: {
+        return (h(Host, { key: 'b350f7a592ea35c3b6beaf5eefaa2ab0208975dd', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '5e2038438e0885602c2e15808a34d62e86c95035', 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: 'b7cbddad1cc08256ae9192349fe5a44302b6d79e' }), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
+            } }, 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: {
                 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: '86ab50028bec3f6a230b3a9492d06c1b2ce250fe', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: '5f8516f5933b739cc3f21d901e50dec1c761fa58', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--size': `${this.size}px`,
-            } }, h("label", { key: '88e87bb45739707a4e3da6d378ba491899dad76c', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'c877ba4a2bd43aa67c394136ef4b3c71096e75aa', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: '6544f51a8c892d616123ab4194d069b055e3dc86', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '958e35bf16be575230748fccdb1a3916942c3a30', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '0f40603a3cf90c38f37b05d7bfd8ed54623b07f4', class: "checkmark-container" }, h("svg", { key: '67945bb82cc05997bb40aeef14c5c0fd452a68af', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ac2d1db7ba5c1578dbe59f4ca9755a409ab24546', "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: '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)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }