@zonos/elements 1.3.20 → 1.3.22

package/dist/cjs/{zonosStore-1063de5e.js → zonosStore-768d6ca0.js}

@@ -2759,7 +2759,7 @@ const mergeConfig = (defaultObj, fetchedObj, ...overrideObj) => {
     return merge_1.apply(null, overrideArgs);
 };
 
-const { reset, state: zonosStore } = createStore(() => ({
+const { dispose: zonosStoreDispose, reset, state: zonosStore, } = createStore(() => ({
     appearance: {
         colorPrimary: 'white',
         fontFamily: 'Inter',
@@ -2878,6 +2878,7 @@ const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
     zonosStore.storeId = ((_d = (_c = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _c === void 0 ? void 0 : _c.references) === null || _d === void 0 ? void 0 : _d.storeId) || null;
     zonosStore.currencyConverter = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.currencyConverter;
     zonosStore.onCountryChange = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.onCountryChange;
+    zonosStore.overrideCurrencyFormat = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.overrideCurrencyFormat;
 };
 const zonosStoreFontFamily = () => {
     const fontFamily = zonosStore.appearance.fontFamily || 'Inter';

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

@@ -48,6 +48,13 @@
 :host .zonos--cart-table .zonos--column:first-child {
   width: 60px;
 }
+:host .zonos--cart-table td {
+  vertical-align: top;
+}
+:host .zonos--cart-item-price zonos-text {
+  white-space: nowrap;
+}
 :host img {
   min-width: 40px;
+  margin-top: 6px;
 }

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

@@ -1,6 +1,6 @@
 import { getAssetPath, h, Host } from "@stencil/core";
 import { cartStore } from "../../../store/checkout/cart";
-import { formatCurrency } from "../../../utils/formatCurrency";
+import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 export class ZonosCartItems {
     constructor() {
         this.errorImages = [];
@@ -10,14 +10,14 @@ export class ZonosCartItems {
         const emptyItemImg = getAssetPath('./assets/empty-item.jpeg');
         const rate = ((_a = cartStore.exchangeRate) === null || _a === void 0 ? void 0 : _a.rate) || 1;
         const nonRestrictedItems = cartStore.items.filter(item => !item.isRestricted);
-        return (h(Host, { key: '2dc2189f79fe59260a9fcd8a61142ab628ff7f57', class: "zonos--cart-items zonos--elements" }, h("table", { key: 'd354007fffb5afa397038f319571e83c3fb3ad65', class: "zonos--cart-table" }, h("tbody", { key: '5f31a21b612495ee583650cbd71614cc10a799cc' }, nonRestrictedItems.map(item => {
+        return (h(Host, { key: '054ea5ed2f86b2d802dd89fe77e010cb2a1a574d', class: "zonos--cart-items zonos--elements" }, h("table", { key: '6fcd4c1f30ba1d438a7ef8831ae6475171aa2f79', class: "zonos--cart-table" }, h("tbody", { key: 'd82fea259e5f70e43979512e86759b167c7cece8' }, nonRestrictedItems.map(item => {
             const itemImg = item.imageUrl;
             return (h("tr", { class: "zonos--cart-item" }, h("td", { class: "zonos--column zonos--cart-item-image" }, itemImg && !this.errorImages.includes(itemImg) ? (h("img", { alt: item.name, onError: () => {
                     this.errorImages = [...this.errorImages, itemImg];
                 }, src: item.imageUrl, style: {
                     'min-width': '40px',
-                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, item.name)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
-                amount: item.amount * item.quantity * rate,
+                }, width: 40 })) : (h("img", { alt: item.name, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, item.name)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
+                amount: item.amount * rate * item.quantity,
                 currency: cartStore.currency,
             })))));
         })))));

package/dist/collection/components/checkout/zonos-checkout/zonos-cart-restricted-items/zonos-cart-restricted-items.js

@@ -2,7 +2,7 @@ import { getAssetPath, h, Host } from "@stencil/core";
 import { cartStore, cartStoreHasOneEligibleItem, } from "../../../store/checkout/cart";
 import { translate } from "../../../store/translationStore";
 import { classes } from "../../../utils/classes";
-import { formatCurrency } from "../../../utils/formatCurrency";
+import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import ChevronUpIcon from "./assets/ChevronUpIcon.svg";
 export class ZonosCartRestrictedItems {
@@ -50,7 +50,7 @@ export class ZonosCartRestrictedItems {
                     this.errorImages = [...this.errorImages, itemImg];
                 }, src: itemImg, style: {
                     'min-width': '40px',
-                }, width: 40 })) : (h("img", { alt: item.name || `Restricted item ${index + 1}`, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, ((_b = item.matchedItem) === null || _b === void 0 ? void 0 : _b.name) || item.name), h("zonos-text", { type: "caption" }, item.restriction.reason)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+                }, width: 40 })) : (h("img", { alt: item.name || `Restricted item ${index + 1}`, src: emptyItemImg, width: 40 }))), h("td", { class: "zonos--column zonos--cart-item-name" }, h("zonos-text", { type: "label" }, ((_b = item.matchedItem) === null || _b === void 0 ? void 0 : _b.name) || item.name), h("zonos-text", { type: "caption" }, item.restriction.reason)), h("td", { class: "zonos--column zonos--cart-item-price" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
                 amount: item.amount * item.quantity * rate,
                 currency: cartStore.currency,
             })))));

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

@@ -65,4 +65,11 @@
 }
 :host .zonos--cart-subtotal-price {
   text-align: right;
+}
+:host .zonos--cart-subtotal-price zonos-text {
+  white-space: nowrap;
+}
+:host .zonos--cart-subtotal-price zonos-text,
+:host .zonos--cart-pay-total zonos-text {
+  white-space: nowrap;
 }

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

@@ -1,7 +1,7 @@
 import { Fragment, h, Host } from "@stencil/core";
 import { cartStore, cartStoreHasOneEligibleItem, } from "../../../store/checkout/cart";
 import { translate } from "../../../store/translationStore";
-import { formatCurrency } from "../../../utils/formatCurrency";
+import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 // 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 InfoIcon from "./assets/InfoIcon.svg";
@@ -17,20 +17,20 @@ export class ZonosCartSubtotal {
             }
             return (h(Fragment, null, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, cartStore.selectedShippingOption.displayName), cartStore.selectedShippingOptionTransitTime && (h("zonos-text", { class: "zonos--caption", type: "caption" }, cartStore.selectedShippingOptionTransitTime, ' ', translate('business days')))));
         };
-        return (h(Host, { class: "zonos--cart-subtotal zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tr", { class: "zonos--row zonos--cart-subtotal" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Cart subtotal'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, formatCurrency({
+        return (h(Host, { class: "zonos--cart-subtotal zonos--elements" }, h("table", { class: "zonos--cart-table" }, h("tr", { class: "zonos--row zonos--cart-subtotal" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("zonos-text", { type: "semiBoldLabel" }, translate('Cart subtotal'))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("zonos-text", { type: "semiBoldLabel" }, currencyFormat({
             amount: subtotal,
             currency: cartStore.currency,
         })))), h("tr", { class: "zonos--row zonos--cart-shipping" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, renderShippingInfo()), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, cartStore.shipping
-            ? formatCurrency({
+            ? currencyFormat({
                 amount: cartStore.shipping,
                 currency: cartStore.currency,
             })
             : '-')), showDutyTaxesInfo && (h("tr", { class: "zonos--row zonos--cart-duties" }, h("td", { class: "zonos--column" }), h("td", { class: "zonos--column zonos--cart-subtotal-title" }, h("div", { class: "zonos--title-with-icon" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, translate('Duties, taxes, and fees')), h("zonos-tooltip", { label: translate('Nothing due at the door') }, h("zonos-icon", { "aria-label": "Learn more about duties, taxes, and fees", content: InfoIcon, size: 16 }))), !!cartStore.isSelectedShippingAboveDeminimis && (h("zonos-text", { textColor: "gray-800", type: "body" }, translate('Order is over the de minimis threshold for both duty and tax')))), h("td", { class: "zonos--column zonos--cart-subtotal-price" }, h("div", { class: "zonos--cart-duty-tax-price" }, cartStore.dutiesTaxFees
-            ? formatCurrency({
+            ? currencyFormat({
                 amount: cartStore.dutiesTaxFees,
                 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({
+            : '-', 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" }, currencyFormat({
             amount: total,
             currency: cartStore.currency,
         })))))));

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

@@ -2,7 +2,7 @@ import { h, Host, } from "@stencil/core";
 import { cartStore } from "../../../store/checkout/cart";
 import { stripeStore } from "../../../store/checkout/stripe";
 import { translate } from "../../../store/translationStore";
-import { formatCurrency } from "../../../utils/formatCurrency";
+import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 import { submitGtag } from "../../../utils/submitGtag";
 export class ZonosCheckoutPayment {
     constructor() {
@@ -38,7 +38,7 @@ export class ZonosCheckoutPayment {
         }
         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.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), 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, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
-            variant: this.submitBtnType }, "Pay", ' ', formatCurrency({
+            variant: this.submitBtnType }, "Pay", ' ', currencyFormat({
             amount: cartStore.total,
             currency: cartStore.currency,
         }))))));

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

@@ -119,9 +119,13 @@ export class ZonosCheckout {
             const tempCartData = buildCartItemsByTempCart(window.Zonos.tempCartData);
             await cartStoreUpdateItems(tempCartData);
         }
-        else if (zonosStore.checkoutSettings.buildCartDetail) {
+        else if (zonosStore.checkoutSettings.buildCartDetail &&
+            localizationStore.selectedCountryCode) {
             log('build cart detail');
-            const cartItems = await zonosStore.checkoutSettings.buildCartDetail();
+            const cartItems = await zonosStore.checkoutSettings.buildCartDetail({
+                countryCode: localizationStore.selectedCountryCode,
+                currencyCode: localizationStore.targetCurrency,
+            });
             await cartStoreUpdateItems(cartItems);
         }
         // if client secret doesn't exist, request a new one.

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

@@ -4,7 +4,7 @@ import { translate } from "../../../store/translationStore";
 import { zonosStore } from "../../../store/zonosStore";
 import { isCheckoutMobile } from "../../../utils/checkout/isCheckoutMobile";
 import { classes } from "../../../utils/classes";
-import { formatCurrency } from "../../../utils/formatCurrency";
+import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 /** 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 ChevronDownIcon from "./assets/ChevronDownIcon.svg";
@@ -42,7 +42,7 @@ export class ZonosReview {
         return (h(Host, { class: classes([
                 '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({
+            ]) }, 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 }, currencyFormat({
             amount: total,
             currency: cartStore.currency,
         })))));

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

@@ -3,7 +3,7 @@ import { cartStore, cartStoreGetShippingTransitInfo, cartStoreUpdateSelectedShip
 import { translate } from "../../../store/translationStore";
 import { trackConversionEvent } from "../../../utils/api/trackConversionEvent";
 import { sortServiceLevelOptions } from "../../../utils/checkout/sortServiceLevelOptions";
-import { formatCurrency } from "../../../utils/formatCurrency";
+import { currencyFormat } from "../../../utils/hello/currencyConversion/currencyFormat";
 import { submitGtag } from "../../../utils/submitGtag";
 export class ZonosShipping {
     constructor() {
@@ -67,7 +67,7 @@ export class ZonosShipping {
                     amount: shippingAmount,
                     caption,
                     label: item.displayName,
-                    price: formatCurrency({
+                    price: currencyFormat({
                         amount: shippingAmount,
                         currency: cartStore.currency,
                     }),
@@ -108,7 +108,7 @@ export class ZonosShipping {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: '7d55ffefe3cb926587a9b2d6617d732b52cf1a82', class: "zonos--shipping zonos--elements" }, h("div", { key: 'dfe3d7d7e0be1857a428c7c3dff5a60f45e2c843', class: "zonos--group" }, h("zonos-text", { key: 'dccf7b24862e88ee3ab8914b04a4ee02f02324fb', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: 'c343522911e886a2365b795a9b95b17acbfa59c8', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '83c873c95e5b7466cfba997a4385ea55771f2571', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: 'c7dd64a8d84fa04629010d20010e89ea51c3b634', class: "zonos--group-btn" }, h("zonos-button", { key: '8d5ec0f9896be564ab659affd578939eff1c62dc', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+        return (h(Host, { key: '11734c7c14a3a63e733a7fa4f2e202bf3b069fd4', class: "zonos--shipping zonos--elements" }, h("div", { key: 'ac22237e620e0b65c9b3920d57373207f991d926', class: "zonos--group" }, h("zonos-text", { key: 'ee4c12ab90bcd029027284d00ab304ea4dd5a71a', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!((_a = this.serviceLevels) === null || _a === void 0 ? void 0 : _a.length) && (h("zonos-banner", { key: '4b641aaf9270a8bf022d66878096768fe2956e4a', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '6b29f4338c0920040599cdf01154b43d274ecfed', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !((_b = this.serviceLevels) === null || _b === void 0 ? void 0 : _b.length) ? (h("zonos-banner", { bannerTitle: translate('No shipping methods found - please review and update your address details by selecting the "Customer" tab above. If you continue to encounter issues, contact our support team for assistance.'), intent: "error" })) : (h("zonos-shipping-rich-radio", { initialSelectedValue: (_c = this.selectedShippingMethod) === null || _c === void 0 ? void 0 : _c.value, items: this.serviceLevels, onRadioSelected: e => this.handleRadioSelected(e) })), h("div", { key: '7b649c6c3da3c8023edc177077679bc2f397a91f', class: "zonos--group-btn" }, h("zonos-button", { key: '18181ad177d5beb7cdd8a3d0e437b332dd20f669', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
             variant: this.submitBtnType }, translate('Go to payment'))))));
     }

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

@@ -240,10 +240,15 @@
   outline: none;
 }
 :host button:not(.override-background).subtle:not([disabled]):hover {
-  background: var(--zonos-elements-gray-500);
-  color: var(--zonos-elements-gray-0);
+  background: var(--zonos-elements-gray-900);
 }
 :host button:not(.override-background).subtle:not([disabled]):active {
+  background: var(--zonos-elements-gray-800);
+}
+:host button:not(.override-background).subtle:not([disabled]).dark-hover-subtle:hover {
+  background: var(--zonos-elements-gray-100);
+}
+:host button:not(.override-background).subtle:not([disabled]).dark-hover-subtle:active {
   background: var(--zonos-elements-gray-200);
 }
 :host button:not(.override-background).subtle:focus {

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

@@ -5,6 +5,7 @@ import { getBorderRadius } from "../../utils/getBorderRadius";
 import { getButtonTheme } from "../../utils/getButtonTheme";
 import { isColorVariable } from "../../utils/isColorVariable";
 import { isDarkColor } from "../../utils/isDarkColor";
+import { isElementUsingDarkTheme } from "../../utils/isElementUsingDarkTheme";
 import { styles } from "../../utils/styles";
 export class ZonosButton {
     constructor() {
@@ -15,6 +16,69 @@ export class ZonosButton {
             this.hasContent = true;
         };
         this.getColorVarProperty = (color) => color.replace('var(', '').replace(')', '');
+        this.getButtonStyle = () => {
+            /**
+             * If the parent component pass in the variant prop with `undefined` value, it would not re-assign the `undefined` value with the default value.
+             * So need to re-assign the variant prop with the default value if the value is `undefined` here.
+             */
+            const variant = this.variant || 'standard';
+            // use the variable if it's a color variable, otherwise use the color
+            const color = this.buttonColor && isColorVariable(this.buttonColor)
+                ? `var(--zonos-elements-${this.buttonColor})`
+                : this.buttonColor;
+            const actualTextColor = window
+                .getComputedStyle(this.ele)
+                .getPropertyValue(this.getColorVarProperty(color || '')) ||
+                color ||
+                '';
+            /**
+             * Determine if the button should use dark hover subtle
+             * If variable = LIGHT && text color = LIGHT, use white hover subtle
+             * If variable = LIGHT && text color = DARK, use dark hover subtle
+             * If variable = DARK && text color = LIGHT, use dark hover subtle (invert hover color)
+             * If variable = DARK && text color = DARK, use white hover subtle (invert hover color)
+             */
+            const isLightVariable = !isElementUsingDarkTheme(this.ele);
+            const isTextLight = !isDarkColor(actualTextColor);
+            const useDarkHoverSubtle = (isLightVariable && !isTextLight) || (!isLightVariable && isTextLight);
+            switch (variant) {
+                case 'subtle': {
+                    // Background color is not used for subtle variant
+                    return {
+                        color,
+                        useDarkHoverSubtle,
+                    };
+                }
+                default: {
+                    // use the variable if it's a color variable, otherwise use the color
+                    const backgroundColor = this.backgroundColor && isColorVariable(this.backgroundColor)
+                        ? `var(--zonos-elements-${this.backgroundColor})`
+                        : this.backgroundColor;
+                    // use override background if it exists, otherwise use color from setting
+                    const overrideBackground = backgroundColor || zonosStore.appearance.colorSecondary;
+                    const backgroundActualColor = overrideBackground &&
+                        isColorVariable(this.getColorVarProperty(overrideBackground))
+                        ? window
+                            .getComputedStyle(this.ele)
+                            .getPropertyValue(this.getColorVarProperty(overrideBackground))
+                        : overrideBackground;
+                    // set contrast color if background color is dark for all variants except subtle
+                    const contrastColor = this.variant !== 'subtle' &&
+                        backgroundActualColor &&
+                        isDarkColor(backgroundActualColor)
+                        ? 'white'
+                        : color;
+                    return {
+                        backgroundColor: overrideBackground,
+                        color: contrastColor,
+                        spinnerColor: backgroundActualColor && isDarkColor(backgroundActualColor)
+                            ? 'white'
+                            : 'black',
+                        useDarkHoverSubtle,
+                    };
+                }
+            }
+        };
         this.buttonColor = undefined;
         this.backgroundColor = undefined;
         this.borderStyle = undefined;
@@ -48,48 +112,20 @@ export class ZonosButton {
         this.iconChangeHandler();
     }
     render() {
+        const { backgroundColor, color, spinnerColor, useDarkHoverSubtle } = this.getButtonStyle();
         const disabled = this.loading || this.isDisabled;
-        /**
-         * If the parent component pass in the variant prop with `undefined` value, it would not re-assign the `undefined` value with the default value.
-         * So need to re-assign the variant prop with the default value if the value is `undefined` here.
-         */
         const variant = this.variant || 'standard';
-        // use the variable if it's a color variable, otherwise use the color
-        const backgroundColor = this.backgroundColor && isColorVariable(this.backgroundColor)
-            ? `var(--zonos-elements-${this.backgroundColor})`
-            : this.backgroundColor;
-        // use override background if it exists, otherwise use color from setting
-        const overrideBackground = 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;
+        // // only set theme for button to change text color if variant is standard and override background is set
+        const buttonTheme = variant === 'standard' ? getButtonTheme(backgroundColor) : undefined;
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        const backgroundActualColor = overrideBackground &&
-            isColorVariable(this.getColorVarProperty(overrideBackground))
-            ? window
-                .getComputedStyle(this.ele)
-                .getPropertyValue(this.getColorVarProperty(overrideBackground))
-            : overrideBackground;
-        // use the variable if it's a color variable, otherwise use the color
-        const color = this.buttonColor && isColorVariable(this.buttonColor)
-            ? `var(--zonos-elements-${this.buttonColor})`
-            : this.buttonColor;
-        // set contrast color if background color is dark for all variants except subtle
-        const contrastColor = this.variant !== 'subtle' &&
-            backgroundActualColor &&
-            isDarkColor(backgroundActualColor)
-            ? 'white'
-            : color;
-        const spinnerColor = backgroundActualColor && isDarkColor(backgroundActualColor)
-            ? 'white'
-            : 'black';
-        return (h(Host, { key: '00d085d600a759366f4a2de8617d81831c0ce16b', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
-                '--background-color': overrideBackground,
+        return (h(Host, { key: 'a07724884592f96388174eb751bc3349391e2bf6', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+                '--background-color': backgroundColor,
                 '--border-radius': borderStyle,
-                '--color': contrastColor,
+                '--color': color,
                 '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'b79ffdb0212630598e95f07059bb3b41049cff47', class: classes([
+            }) }, h("button", { key: 'd34d62c7582abdb6aee6a1ec7fefb89bcc7a31ac', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -97,13 +133,12 @@ export class ZonosButton {
                 this.noPaddingRight && 'no-padding-right',
                 this.iconRight && 'icon-right',
                 this.withBoxShadow && 'with-box-shadow',
+                useDarkHoverSubtle && 'dark-hover-subtle',
                 variant,
                 this.size,
                 // only override background if variant is set to standard
-                overrideBackground &&
-                    variant === 'standard' &&
-                    'override-background',
-            ]), disabled: disabled }, this.loading && (h("div", { key: '4462430185736b45b11bd18f08d1e3c6177f192f', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'c866ff989b95929e8d6a44d950dc943531f1dc0c', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'a57d0b3924eef51bf3938261c8d823e9d8aa0206', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+                backgroundColor && variant === 'standard' && 'override-background',
+            ]), disabled: disabled }, this.loading && (h("div", { key: 'aaa929d205d5a4cec679f3ee7ef6097801dc69d0', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '372b0a8504ecb0af54c7f68a67d6ad400bb13173', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '0eefacfb7af58abf8049fd72180ba82f09ef9a34', 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-text/zonos-text.js

@@ -9,7 +9,6 @@ export class ZonosText {
         this.size = undefined;
         this.type = 'body';
         this.weight = undefined;
-        this.content = undefined;
         this.ready = false;
     }
     componentDidRender() {
@@ -157,23 +156,6 @@ export class ZonosText {
                 },
                 "attribute": "weight",
                 "reflect": false
-            },
-            "content": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The tag to use for the text"
-                },
-                "attribute": "content",
-                "reflect": false
             }
         };
     }

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

@@ -15,7 +15,6 @@ import { getProductsOnPage } from "../../utils/hello/getProductsOnPage";
 import { getZCountryUrlParam } from "../../utils/hello/getZCountryUrlParam";
 import { setZCountryUrlParam } from "../../utils/hello/setZCountryUrlParam";
 import { log } from "../../utils/logging/log";
-import { logError } from "../../utils/logging/logError";
 import { mergeConfig } from "../../utils/mergeConfig";
 const PEEK_MESSAGE_CLOSE_DELAY_MS = 3000;
 const RESIZE_DEBOUNCE_DELAY_MS = 500;
@@ -215,8 +214,12 @@ export class ZonosHello {
      * @returns void
      */
     async displayCurrency() {
+        if (zonosStore.helloSettings.currencyBehavior === 'DISABLED') {
+            // do nothing if currency behavior is disabled
+            return;
+        }
         if (!localizationStore.exchangeRate) {
-            logError('Could not display currency. Exchange rate and format data is not available.');
+            log('Could not display currency. Exchange rate and format data is not available.', 'warn');
             return;
         }
         currencyDisplay();
@@ -240,7 +243,7 @@ export class ZonosHello {
      * @returns number
      */
     async format(value) {
-        return currencyFormat(value);
+        return currencyFormat({ amount: value });
     }
     /**
      * This method show the hello dialog

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { localizationStore } from "../../../store/hello/localization";
 import { isDarkColor } from "../../../utils/isDarkColor";
+// import { isElementUsingDarkTheme } from 'src/components/utils/isElementUsingDarkTheme';
 import { languages } from "../../../../types/ILanguage";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import Globe from "./assets/globe.svg";
@@ -13,13 +14,14 @@ export class ZonosHelloDialogFooter {
         this.setShowLanguageSelect = () => { };
     }
     render() {
-        var _a, _b, _c;
+        var _a, _b;
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
-        const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
-        return (h(Host, { key: '714c0ccdaab553158a4990e24e471e0a0be64655', class: "zonos--elements" }, h("div", { key: '4c177b9120aee7ccdc242bb656399e1597b35f28', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
-                '--primary-color': (_c = this.appearanceSettings) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-            } }, h("a", { key: 'cb2b3ffb8a637825c76d4b33d71fa38d20a19220', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'affb176b938a399d51ccb6ae4fb5906e31ea2ff0', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: '4aa0ce039d196d804b26df7e2b8608252da2a478', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '088259ecd3d2271fb9a4042126886c7f4fe3a9ba', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'e20dcd573266b53341e9f21bab3b34672d4d96a1', buttonColor: "gray-1200", icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+        // Only use gray-0 (white) when the background color is dark (apply inverted color if the element is using dark theme variable)
+        const mainColor = primaryColor && isDarkColor(primaryColor) ? 'white' : 'black';
+        return (h(Host, { key: '056e6cead0dd21acc085689ea850ba4a53f67bf9', class: "zonos--elements" }, h("div", { key: '00f61e795abc81d6e2f0be7e64eeae298248b34e', class: "zonos--hello-dialog-footer", style: {
+                '--primary-color': primaryColor,
+            } }, h("a", { key: '79235722e7f4caaeac2d2a400665603e07b14614', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '7a92af7024dfc3e21de1a0789623b1c1fdb8a33e', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '04d44adc9941688bc7ae7bef0ea8c9d26a33a401', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'b9f3debc0c965f1ebd8745cb020c10f6e8c17285', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'cc3ec6a8ece0ed8e94a85ec3a7a38c3c87fbf95e', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     static get is() { return "zonos-hello-dialog-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -100,4 +102,5 @@ export class ZonosHelloDialogFooter {
             }
         };
     }
+    static get elementRef() { return "ele"; }
 }

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog.js

@@ -48,7 +48,7 @@ export class ZonosHelloDialog {
             const { countryLandedCost } = localizationStore;
             // Our Robby API spells deminimis wrong here
             const dutyDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.dutyDeminimus)
-                ? currencyFormat(countryLandedCost.dutyDeminimus)
+                ? currencyFormat({ amount: countryLandedCost.dutyDeminimus })
                 : null;
             // If deminimis is undefined or null, assume it's $0
             return dutyDeminimis
@@ -59,7 +59,7 @@ export class ZonosHelloDialog {
             const { countryLandedCost } = localizationStore;
             // Our Robby API spells deminimis wrong here
             const taxDeminimis = (countryLandedCost === null || countryLandedCost === void 0 ? void 0 : countryLandedCost.vatTaxDeminimus)
-                ? currencyFormat(countryLandedCost.vatTaxDeminimus)
+                ? currencyFormat({ amount: countryLandedCost.vatTaxDeminimus })
                 : null;
             return taxDeminimis
                 ? `${translate('Spend')} ${taxDeminimis} ${translate('tax free')}`
@@ -73,19 +73,19 @@ export class ZonosHelloDialog {
             const dutyDeminimis = landedCost.dutyDeminimus;
             return translate('Orders to ${countryName} must be over ${threshold} to ship.', {
                 countryName: 'United Kingdom',
-                threshold: currencyFormat(dutyDeminimis),
+                threshold: currencyFormat({ amount: dutyDeminimis }),
             });
         };
         this.getAustraliaDutyTaxMessage = (landedCost) => {
             return translate('${percentage} GST due on any order above ${threshold}.', {
                 percentage: `${landedCost.vatTaxRate * 100}%`,
-                threshold: currencyFormat(landedCost.vatTaxDeminimus),
+                threshold: currencyFormat({ amount: landedCost.vatTaxDeminimus }),
             });
         };
         this.getNewZealandDutyTaxMessge = (landedCost) => {
             return translate('${percentage} GST due on any order above ${threshold} along with an import entry transaction fee and MPI levy.', {
                 percentage: `${landedCost.vatTaxRate * 100}%`,
-                threshold: currencyFormat(landedCost.vatTaxDeminimus),
+                threshold: currencyFormat({ amount: landedCost.vatTaxDeminimus }),
             });
         };
         /**
@@ -149,17 +149,17 @@ export class ZonosHelloDialog {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: 'e6432c897bf4f7c60e69f3e4e4c356be11e61842', class: "zonos--elements" }, h("div", { key: 'd18df4158ffb6be5037251a9a665739fee6a0755', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: 'ec64ed364328acba99227ccb40371ff6b7e0c1e2', class: "zonos--elements" }, h("div", { key: '441d4a9ae4274b0fffbd22771b8f1ffe3839230a', "aria-hidden": "true", class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '1266216272683cb9f7086190686551df57ad8741' }, h("div", { key: 'ab2cb53cd0cc4c33002ae19925e8c32ebf94e426', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '9d973abe25de4a7e18f3bf588b6f0247b8edc96d', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: 'cb8eb025500c0a4eed79e690e67edc418dc6c1e1', spacing: 24 }, h("zonos-country-flag", { key: '3ceddaa0d44d9c0779124a7ea199cf12a763d82c', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'd49da8684213be9ceb686428343247d0387e61e5', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '1edc2747b7760479916276ddcaf3461cc5678461', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'fbb00b765b4a29230db98253c72c320e02a5fccf', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '0614fbd574c7832e6dee73b3e26c659c2679b714', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '9d53c5dd06b5f1b1a0800bfdaee9615e851b3338' }, h("div", { key: '43b424d7d115ead896f0ce743d60db1775468ada', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '2dacf61dfd6976de8a37f63697a927b00c70500c', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: '75d1b83b6e7bcefe592bd90e1fbcfd97154f0b4c', spacing: 24 }, h("zonos-country-flag", { key: '051019e1d01cc12d38d82c5c1d2765b280cf87e4', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '4dd4f2bb7b8f88fcdb8c27ebaca86bbaa4f8459a', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '33a2430d344b0613fda2597e5e8d52e852398a3c', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: '5e0785c9e190be41d5c1b22736a73031de0f0a8b', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '460c1914c7f91ad7d3495e77f2f0de412e0d2f78', spacing: 8 }, this.restrictedItems.map(item => {
             var _a;
             return item && (h("zonos-banner", { bannerTitle: item.name, intent: "error" }, (_a = item.itemRestrictions) === null || _a === void 0 ? void 0 : _a.map(x => (h("zonos-text", { textColor: "red-800" }, x === null || x === void 0 ? void 0 : x.note)))));
-        }), h("zonos-card", { key: '05ec570de14760e8a07d9bfa7a0fca6def3bfe4b', spacing: "12px" }, h("zonos-v-stack", { key: '9b5c301c737c784bd4e7738080fe90dfc0c82bb5', spacing: 12 }, h("div", { key: '5c3691d22fefcab028c4836d2ce774609789e9f3', class: "zonos--flex-message" }, h("zonos-icon", { key: '9a498a80b3c3652f9aec2e409d30acd09b983397', "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", { key: 'c7b0323a0f4704a5ee29b4275cab60e7390f1f9a' }, dutyDeMinimisMessage)), h("div", { key: '5910f4b782a28777fb6fa41ae9399dfae3a8cee8', class: "zonos--flex-message" }, h("zonos-icon", { key: 'ed57f0c4e985332568c0197506ba6b07c2da5b34', "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", { key: '72727be7a47c98b2b6105532d3370fbc05bfca3e' }, taxDeMinimisMessage)), additionalInformation && (h("div", { key: 'f802df72c31a9031ae737a2d2b461482354d21d8', class: "zonos--flex-message" }, h("zonos-icon", { key: '66ac284793d67089e46671aff79691f025abbc31', "aria-label": "Low value order shipping restriction", content: BagIcon }), h("zonos-text", { key: '9931ab1b57336d4d4326d8f52975566638340e01' }, additionalInformation))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '81576154c1db509ea3a9f8dfbe0dfb811f49b495', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'e9109f275db0fbd9baca229af1004de0497753d8' }, h("zonos-country-select", { key: '8ac0328e65ae7346ebe024e7bd735afdd506d120', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '5ea929a6f391b6f00d0da0e462239bff5f0550d2' }, h("zonos-language-select", { key: 'f59d0da0cb849f1bfe77184d10a713ef6b25f225', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: '290e82532fc85421c08c0049755f2d03de5f4848', spacing: "12px" }, h("zonos-v-stack", { key: 'de37e3b7c156a952ff4906463f4e57c0e384af18', spacing: 12 }, h("div", { key: '3ce588bffccb7c41d5043d813fb6b9b0043d4fab', class: "zonos--flex-message" }, h("zonos-icon", { key: '3c955c3aa1a27566e503188a4a4f495c2daed5b1', "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", { key: '8b283197b31e82a8c15eff248e1ab55b28eba3d2' }, dutyDeMinimisMessage)), h("div", { key: '720af84433106750661c5d2e847c58ba673ee71c', class: "zonos--flex-message" }, h("zonos-icon", { key: '036e93ccbdafd6c6e911cc978f331c84ee542c73', "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", { key: 'ca33772a3fce849a35536502d95ca81d3e9b29cb' }, taxDeMinimisMessage)), additionalInformation && (h("div", { key: '254ac11735d2e3f5b3804d58c22847414df19753', class: "zonos--flex-message" }, h("zonos-icon", { key: '28d85fa72b8d0754ba5f1633f17bd0caf78abe36', "aria-label": "Low value order shipping restriction", content: BagIcon }), h("zonos-text", { key: '6ff2d5231f7fd942c0ff7b3391589984f5d0e7d2' }, additionalInformation))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '4d6593ce36f883bb538970008aa75ba3338654e5', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '66362e6aac0c8d9b5fe922c3af4d74642ff6fe8a' }, h("zonos-country-select", { key: '53fc96743eb427f76e6c658b1b3541f43afab25a', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'e4cc485d4574d11b5759e485be18e3e2cb0af966' }, h("zonos-language-select", { key: '579c3018f84fedf257253b6db0b0c172908662e2', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/main/zonos-controller.js

@@ -199,7 +199,7 @@ export class ZonosController {
                 "mutable": false,
                 "complexType": {
                     "original": "LoadZonosParamsConfig",
-                    "resolved": "{ appearance?: Partial<AppearanceConfig> | undefined; checkoutSettings?: Partial<CheckoutConfig> | undefined; currencyConverter?: CurrencyConverter | undefined; helloSettings?: Partial<HelloConfig> | undefined; onCountryChange?: ((props: { countryCode: CountryCode; currencyCode: CurrencyCode; }) => void) | undefined; }",
+                    "resolved": "{ appearance?: Partial<AppearanceConfig> | undefined; checkoutSettings?: Partial<CheckoutConfig> | undefined; currencyConverter?: CurrencyConverter | undefined; helloSettings?: Partial<HelloConfig> | undefined; overrideCurrencyFormat?: { currencyDisplay?: \"symbol\" | \"name\" | \"code\" | \"narrowSymbol\" | undefined; } | ((params: { amount: number; countryCode: CurrencyCode; }) => string) | undefined; onCountryChange?: ((props: { countryCode: CountryCode; currencyCode: CurrencyCode; }) => void) | undefined; }",
                     "references": {
                         "LoadZonosParamsConfig": {
                             "location": "import",
@@ -332,7 +332,7 @@ export class ZonosController {
                     "signature": "(config: LoadZonosParamsConfig) => Promise<void>",
                     "parameters": [{
                             "name": "config",
-                            "type": "{ appearance?: Partial<AppearanceConfig> | undefined; checkoutSettings?: Partial<CheckoutConfig> | undefined; currencyConverter?: CurrencyConverter | undefined; helloSettings?: Partial<HelloConfig> | undefined; onCountryChange?: ((props: { countryCode: CountryCode; currencyCode: CurrencyCode; }) => void) | undefined; }",
+                            "type": "{ appearance?: Partial<AppearanceConfig> | undefined; checkoutSettings?: Partial<CheckoutConfig> | undefined; currencyConverter?: CurrencyConverter | undefined; helloSettings?: Partial<HelloConfig> | undefined; overrideCurrencyFormat?: { currencyDisplay?: \"symbol\" | \"name\" | \"code\" | \"narrowSymbol\" | undefined; } | ((params: { amount: number; countryCode: CurrencyCode; }) => string) | undefined; onCountryChange?: ((props: { countryCode: CountryCode; currencyCode: CurrencyCode; }) => void) | undefined; }",
                             "docs": "config that need to override the default setting"
                         }],
                     "references": {

package/dist/collection/components/store/hello/localization.js

@@ -14,7 +14,7 @@ import { getCurrencyCode } from "../../utils/hello/currencyConversion/getCurrenc
 import { setZCountryUrlParam } from "../../utils/hello/setZCountryUrlParam";
 import { log } from "../../utils/logging/log";
 import { logError } from "../../utils/logging/logError";
-const { onChange: localizationStoreOnUpdate, state: localizationStore } = createStore({
+const { dispose: localizationDispose, onChange: localizationStoreOnUpdate, state: localizationStore, } = createStore({
     countryLandedCost: null,
     customMessages: [],
     exchangeRate: null,
@@ -181,4 +181,4 @@ const localizationStoreUpdateSelectedLocale = (newSelectedLocale) => {
     translationStoreUpdateLanguage(newSelectedLocale);
     void updateCheckoutSessionLanguage();
 };
-export { initLocalizationStore, localizationStore, localizationStoreOnUpdate, localizationStoreUpdateSelectedCountryCode, localizationStoreUpdateSelectedLocale, };
+export { initLocalizationStore, localizationDispose, localizationStore, localizationStoreOnUpdate, localizationStoreUpdateSelectedCountryCode, localizationStoreUpdateSelectedLocale, };