@zonos/elements 1.3.132 → 1.3.134

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

@@ -56,13 +56,22 @@ export class ZonosCheckoutFinish {
             }
             window.location.href = url;
         };
+        this.isRedirectBehavior = () => {
+            const { successBehavior } = zonosStore.checkoutSettings;
+            return (successBehavior === 'REDIRECT_TO_SUCCESS_PAGE' ||
+                !!cartStore.externalConfirmationPageURL);
+        };
         /**
          * It would make more sense to have keep shopping button if the success behavior is not redirecting to a different page
          */
         this.shouldRenderKeepShoppingButton = () => {
-            const { successBehavior } = zonosStore.checkoutSettings;
-            return (successBehavior === 'ZONOS_SUCCESS_PAGE' ||
-                successBehavior === 'CLOSE_MODAL');
+            return !this.isRedirectBehavior();
+        };
+        /**
+         * Should render close button for redirect behavior when the success behavior is redirecting to a different page
+         */
+        this.shouldRenderCloseButtonForRedirectBehavior = () => {
+            return this.isRedirectBehavior();
         };
         this.handleSuccessBehavior = async () => {
             var _a, _b;
@@ -86,14 +95,20 @@ export class ZonosCheckoutFinish {
                     ];
                     // stop loading spinner to show the redirecting notification
                     this.isLoading = false;
+                    // Make the close button to spin
+                    this.isWaitingToRedirect = true;
                     // override title if notification type is success
                     this.useOverrideSuccessNotification();
                     // attempt to pull order info before redirecting
                     await this.getPullOrder();
                     // If order is still not ready, should not redirect with no order id as merchant would show an error page and customer may think the order was not placed and retry
                     if (!this.order) {
+                        log('=== Order info not found, not redirecting, hide spinner for close button', 'error');
+                        // Allow user to close the modal
+                        this.isWaitingToRedirect = false;
                         return;
                     }
+                    this.isWaitingToRedirect = false;
                     const legacyOrderNumber = ((_b = (_a = this.order.references) === null || _a === void 0 ? void 0 : _a.find(entry => (entry === null || entry === void 0 ? void 0 : entry.key) === 'zonosOrderNumber')) === null || _b === void 0 ? void 0 : _b.value) || null;
                     const queryParams = new URLSearchParams();
                     if (this.order.id) {
@@ -132,6 +147,7 @@ export class ZonosCheckoutFinish {
             const checkoutSessionId = cartStore.checkoutSessionId;
             const maxRetries = parseFloat(new URLSearchParams(window.location.search).get('maxPollingRetries') ||
                 '0') || MAX_RETRIES;
+            log(`=== Polling order (${attempts} attemps)`, 'info');
             if (
             // Order found and was regular checkout user
             (order && !isLegacyCheckout) ||
@@ -303,6 +319,7 @@ export class ZonosCheckoutFinish {
         this.notificationMessages = [];
         this.notificationActionText = translate('Keep shopping');
         this.order = null;
+        this.isWaitingToRedirect = true;
     }
     componentDidLoad() {
         // Reset local storage for placed order info
@@ -324,12 +341,12 @@ export class ZonosCheckoutFinish {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: '09ad6462aeafdfa1be8b0f0e34159aa74934b85c', class: "zonos--checkout-finish zonos--elements", style: {
+        return (h(Host, { key: '9c674bb1bcb7092f95aef959219da8d692bc2e05', class: "zonos--checkout-finish zonos--elements", style: {
                 '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: '81df3ec5804d346938cd0052232446500805e5dd', class: "zonos--finish-details" }, h("div", { key: '49f0b91cd04f2f6e1291de3c542cec6ed1f3c0a9', 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", { key: '398e803727b65d2dd7da40bb37e25702f69009d6', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '75ee45470ceca25057259916c76dd227f62b7276', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: 'cd792a9dd314e291d0957e0859e3b0e088cf1767', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode && cartStore.step === 'finish' && (h("div", { key: 'b54c583f058c23b2b5001179acac0c98780b1ded', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '2405f70c3143725d51d6f6a5e5a440350aeb9b80', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: 'c977d79e45170cce70695006de1274ef7cc39df4', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
+            } }, !this.isLoading && (h("div", { key: '93e895750b6c5999b98d9b935a69e7d0cbc5b299', class: "zonos--finish-details" }, h("div", { key: 'bdbcaaebceca8684b82cac779294ebd4e24ba5be', 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", { key: 'cb2d9fe1fee223009cfa9ed626412f3955e0dbe6', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: 'dbe3e7c64f16be7202768e82f0a822ca700785ef', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), this.shouldRenderCloseButtonForRedirectBehavior() && (h("zonos-button", { key: '236865b9375c9813da53e1fa3ae54e55ceed1b7a', loading: this.isWaitingToRedirect, onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, translate('Close'))), !window.Zonos.isLegacyCheckout &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '8b7f92e8d32ae14bf3470154db960f93b3d812f6', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode && cartStore.step === 'finish' && (h("div", { key: 'cf35bd1f5e8b6318b4dee4d72dd3124ec44e3de1', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '940f58f8983d3f66eda5bc06049047615a153083', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '2423551be1dcdffc987ec19f632a7faec804bc2d', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }
@@ -417,7 +434,8 @@ export class ZonosCheckoutFinish {
             "notificationTitle": {},
             "notificationMessages": {},
             "notificationActionText": {},
-            "order": {}
+            "order": {},
+            "isWaitingToRedirect": {}
         };
     }
     static get events() {

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

@@ -33,10 +33,10 @@ export class ZonosCheckoutFooter {
         const languageLabel = (_a = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _a === void 0 ? void 0 : _a.label;
         // reverse color when on desktop. With the coversheet backdrop, the color should be white
         const colorDesktop = this.dataTheme === 'LIGHT' && !this.mobile ? 'gray-0' : 'gray-1000';
-        return (h(Host, { key: '43ce81796f2534226d03420dbaa8d8d37161f64a', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: 'c20e95a6ad27bccc7b23ae14ce9bea9319327dd4', class: "zonos--checkout-footer" }, h("div", { key: 'fa95241196ab3fff6c6520cbe083199a418f1f6c', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: '7c12428aa768eb81a9ecec798575109be5811a2c', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: '4615354c98cd5617343db83743e4d177d893f712', class: classes([
+        return (h(Host, { key: '348667bda79c9d8c69f1481262f3dd74068b4f16', class: classes(['zonos--elements', this.isMobile && 'mobile']) }, h("div", { key: '8751d01d35e0ca75ab4f3866d2964fbbe9cabd91', class: "zonos--checkout-footer" }, h("div", { key: '0745cc39cb134d0dee746d6e8dbe75192c226e7b', class: "zonos--checkout-locale-wrapper" }, h("zonos-button", { key: 'a1a6ba67ad35c4e3e04959e5895a959c5b3fa4b3', buttonColor: colorDesktop, class: "zonos--checkout-footer-language-button", icon: h("zonos-icon", { "aria-label": "Language select", content: Globe, iconColor: colorDesktop }), onClick: () => this.toggleLanguageDialog(), variant: "subtle" }, languageLabel), h("div", { key: 'e82c276c99eb723af2be002f8f749bf7e6e005c3', class: classes([
                 'zonos--checkout-footer-dialog',
                 this.showLanguageDialog && 'zonos--checkout-footer-dialog-open',
-            ]) }, h("zonos-language-select", { key: '35b0c80d3b20167991391f336d0eda178857047c', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: '333f9da8e9aeb6286e52145630ec7e9ec8aabff6', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: 'b6de914d3f4886151e5b780de7f517e158e83173', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: 'b6aba4130c0f1f22dd6644002f752630d3d8524f', textColor: colorDesktop }, "Privacy policy")), h("div", { key: 'b44e2b03aa2e156076f27737be4d82dd62a98f0b', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: '22cee8f4bdc69c38a9f5ab5affaaf9fd23fe70e3', textColor: colorDesktop }, "Powered by"), h("a", { key: '87fe092647de1fcc9ac6e3bf3ff00b9014f67560', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'b35efd69f13b4623ef40f42b12f83a8a9506f725', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 })))))));
+            ]) }, h("zonos-language-select", { key: '06b1f71758b9a33472abfda47c5fb130b8474179', handleOnClose: () => this.toggleLanguageDialog() }))), h("div", { key: 'b004d2333b89c6e002023a161b24738e0508f631', class: "zonos--checkout-footer-icon-wrapper" }, h("a", { key: 'f2bfc5e8d20756634285e754272422241220c13f', href: "https://zonos.com/docs/legal/zonos-privacy-policy", target: "_blank" }, h("zonos-text", { key: '714bb78e7c7a20db9c94ff04397f16cf947f3dba', textColor: colorDesktop }, "Privacy policy")), h("div", { key: '072d318b06cf86a8d7e75184b2386042ce1a3329', class: "zonos--checkout-footer-logo" }, h("zonos-text", { key: '9c85ede9edd9217cd45bce8277f9ce042dce75ee', textColor: colorDesktop }, "Powered by"), h("a", { key: '2f5a8fbf27c9a3137bba6a2bf52976f4c5bab780', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'e59cc91b07f606e034d0909b50a8ac735c84f38c', autoHeight: true, content: ZonosIcon, iconColor: colorDesktop, size: 108 })))))));
     }
     static get is() { return "zonos-checkout-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,6 +16,7 @@ import { watchBigcommerceDomesticCheckout } from "../../utils/checkout/watchBigc
 import { classes } from "../../utils/classes";
 import { createCustomEvent } from "../../utils/createCustomEvent";
 import { getBorderRadius } from "../../utils/getBorderRadius";
+import { handleFetch } from "../../utils/handleFetch";
 import { getZCountryUrlParam } from "../../utils/hello/getZCountryUrlParam";
 import { isDarkColor } from "../../utils/isDarkColor";
 import { jsonParse } from "../../utils/jsonParse";
@@ -43,6 +44,7 @@ export class ZonosCheckout {
          * Listener for locale change in localization store
          */
         this.onChangeLocaleListener = () => { };
+        this.isRedirectAfterOrder = false;
         this.applyStripeTheme = async () => {
             var _a, _b, _c, _d;
             const theme = ((_a = this.appearanceSettingsOverride) === null || _a === void 0 ? void 0 : _a.theme) || zonosStore.appearance.theme;
@@ -241,6 +243,9 @@ export class ZonosCheckout {
         }
         // apply theme to stripe elements
         await this.applyStripeTheme();
+        this.isRedirectAfterOrder =
+            zonosStore.checkoutSettings.successBehavior ===
+                'REDIRECT_TO_SUCCESS_PAGE' || !!cartStore.externalConfirmationPageURL;
         return true;
     }
     reloadCheckoutSession() {
@@ -271,6 +276,22 @@ export class ZonosCheckout {
     confirmProceedWithOrderDuplication() {
         // Reset the placed order info
         this.placedOrderInfo = null;
+        if (!cartStore.checkoutSessionId) {
+            return;
+        }
+        // Record the order duplication consent so we know user did see the notification and proceed with the order duplication
+        void handleFetch('/api/zonos-elements/update-checkout-session-metadata', {
+            body: {
+                id: cartStore.checkoutSessionId,
+                metadata: [
+                    {
+                        key: 'orderDuplicationConsent',
+                        value: '1',
+                    },
+                ],
+            },
+            method: 'POST',
+        });
     }
     handleCancelOrderDuplication() {
         var _a;
@@ -701,6 +722,15 @@ export class ZonosCheckout {
     handleAddressChange() {
         stripeStoreReset();
     }
+    handleOpenChange() {
+        // disable scroll on the body when dialog is open
+        if (this.open) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = 'auto';
+        }
+    }
     componentWillLoad() {
         void this.init();
         this.isMobile = isCheckoutMobile(this.mobile);
@@ -786,7 +816,7 @@ export class ZonosCheckout {
                 } }), h("zonos-collapse", {
                 // only collapsible on mobile
                 collapsed: this.collapseReviewMobile && this.isMobile
-            }, h("zonos-cart-items", null), this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", { submitBtnColor: submitButtonColor }), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), h("zonos-cart-restricted-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 }))))))), (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
+            }, h("zonos-cart-items", null), this.isMobile && (h("zonos-v-stack", { spacing: 16 }, h("zonos-cart-subtotal", { submitBtnColor: submitButtonColor }), h("zonos-custom-message", { class: "zonos--checkout-default-message", icon: MessageIcon, message: defaultMessage }))))), h("zonos-cart-restricted-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 }))))))), (cartStore.step === 'finish' || cartStore.step === 'error') && (h("div", { class: "zonos--done", "data-theme": rightSideTheme }, h("div", { class: "zonos--header" }, renderLogo(), !this.isRedirectAfterOrder && (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
@@ -1082,6 +1112,9 @@ export class ZonosCheckout {
             }, {
                 "propName": "defaultAddress",
                 "methodName": "handleAddressChange"
+            }, {
+                "propName": "open",
+                "methodName": "handleOpenChange"
             }];
     }
     static get listeners() {

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

@@ -169,13 +169,13 @@ export class ZonosShipping {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { key: '1a4721f877f6ec6a82cf3d280f73d6c0beb093d2', class: "zonos--shipping zonos--elements" }, h("div", { key: '97477ecd56c30af140aa5797dc60ff9c27500f8c', class: "zonos--group" }, h("zonos-text", { key: '3041eae048928c7a48d0449015043f4e3ba84579', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (h("zonos-banner", { key: '045c89abf1610df69d9bdac288d235705a325fa5', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: 'ccb50e1734d2ab81363ace6fd35071ac760d85bf', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !this.serviceLevelsAll.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.'), class: "zonos--shipping-method-error", intent: "error" })) : (h("div", { class: "zonos--shipping-options-wrapper" }, h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
+        return (h(Host, { key: '2a2502057e42ab9599273aa20fecad1e4a624616', class: "zonos--shipping zonos--elements" }, h("div", { key: 'b8e2c23a7092c1bce11497b9e0829fe966a10e0e', class: "zonos--group" }, h("zonos-text", { key: '5ce02ba2ba39c878262e0d3a0f1ac98b6759296d', class: "zonos--title", type: "semiBoldSubheader" }, translate('Delivery options')), this.showErrorBanner && !!this.serviceLevelsAll.length && (h("zonos-banner", { key: '8309265ef50d333aca63e32f41d0ca09a73777f7', class: "zonos--error-banner", intent: "error" }, translate('No shipping method selected'))), h("zonos-text", { key: '55ccd680f24867269ec806e0a2e20c3edb4c70ea', class: "zonos--shipping-method-title", type: "semiBoldLabel" }, translate('Shipping method')), !this.serviceLevelsAll.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.'), class: "zonos--shipping-method-error", intent: "error" })) : (h("div", { class: "zonos--shipping-options-wrapper" }, h("zonos-shipping-rich-radio", { items: defaultShownServiceLevels, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }), !!defaultShownServiceLevels.length &&
             !!this.serviceLevelsDAP.length && (h("button", { class: classes([
                 'zonos--shipping-options-collapse-trigger',
                 this.collapsedDAPOptions && 'collapsed',
             ]), onClick: () => {
                 this.collapsedDAPOptions = !this.collapsedDAPOptions;
-            } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), h("div", { key: 'adf857b2d728ae34da27be04f67547fba42e26c0', class: "zonos--group-btn" }, h("zonos-button", { key: '5d8dec320202c3f43ea598f2183631b04da0dd7f', backgroundColor: this.submitBtnColor, loading: this.continueLoading || this.isSelecting, onClick: () => this.continueClickHandler(), size: "lg",
+            } }, h("div", { class: "zonos--title-wrapper" }, h("zonos-text", { type: "label" }, `${translate(this.collapsedDAPOptions ? 'Show non-prepaid options' : 'Hide non-prepaid options')} `), h("zonos-icon", { content: ChevronUpIcon })))), h("zonos-collapse", { collapsed: this.collapsedDAPOptions }, h("div", { class: "zonos--dap-wrapper" }, h("zonos-banner", { bannerTitle: translate('Duties and taxes will be charged upon delivery.'), intent: "warning" }, translate('You may incur additional fees from the shipping carrier by not prepaying.')), h("zonos-shipping-rich-radio", { items: this.serviceLevelsDAP, onRadioSelected: e => this.handleRadioSelected(e), selectedItem: this.selectedShippingMethod }))))), h("div", { key: '83a39e45d68dc4267efbf5392e3b18b75fd9cfe9', class: "zonos--group-btn" }, h("zonos-button", { key: '8872a09e5562f4165f10137cd549da1180c8d37c', 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-badge/zonos-badge.js

@@ -15,16 +15,16 @@ export class ZonosBadge {
         this.dismissHandler = undefined;
     }
     render() {
-        return (h(Host, { key: 'ef7686107447f0d7b0fb090d1995ea66ab9d9147', class: classes(['zonos--elements zonos--badge']), style: {
+        return (h(Host, { key: 'ece8d31a527ef8fbd014669176c293798948c377', class: classes(['zonos--elements zonos--badge']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '78dd37a1413c192fba84ba17e068cdd07bc54db1', class: classes([
+            } }, h("div", { key: 'ae8c2e468abcf3c9aac336ccc28da4166ebd87f3', 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: '10ee8b496e4db3d9550d9e46859446ba4c91a823', textColor: `${this.badgeColor}-800` }, h("slot", { key: 'c9341850364d8e289d7c3569ebb41e37e2e1d99b' })), this.dismissHandler && (h("zonos-icon", { key: '85f69b0f3c31ce57978a078eb96ee856da1555a2', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
+            ]) }, this.icon, h("zonos-text", { key: 'a1e710722e04c5ca32bc9c2731815da7de450ee0', textColor: `${this.badgeColor}-800` }, h("slot", { key: 'c3a277e50a1619899e76934e2f994c82dae5ddee' })), this.dismissHandler && (h("zonos-icon", { key: 'ee9fe774fdd59d94082bed6eb38d9f96ce33c67c', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,12 +121,12 @@ export class ZonosButton {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'a862db0549563c67361d2f93baf6bed668a9a561', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+        return (h(Host, { key: '8228acc5ae59602336dc70227b3cc8c54e7455ed', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--color': color,
                 '--zonos--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: 'e848c5d69708b8eee9a2be1c1649eb0f9c85dae0', class: classes([
+            }) }, h("button", { key: '0875fde30fd6d60a49a4850fd5d55450549664a7', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -141,7 +141,7 @@ export class ZonosButton {
                 backgroundColor && variant === 'standard' && 'override-background',
             ]), disabled: disabled, style: {
                 justifyContent: this.justifyContent,
-            } }, this.loading && (h("div", { key: '3d6af592a449d698a205bb327ee3f29b57a406ff', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'c4e28edbbed061e57ad6c6f532887b74441e4acc', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'dbbf5f30085d61932505f8724473bb61dd67c7b7', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }, this.loading && (h("div", { key: '15f53929fe9d1bcc49c5b36a29a8c15d8673321f', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: '56c605d60ad2046a5075ab48712d7e0faeb83bc2', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: '1fd882d57cd362e8ccc79e8c21498d290062d31d', 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

@@ -22,16 +22,16 @@ export class ZonosCard {
             customRoundRadius: `${this.borderRadius}px`,
             overrideBorderStyle: 'ROUNDED',
         });
-        return (h(Host, { key: '84d131edbe30a0ce9869351c197c438082bcadac', style: {
+        return (h(Host, { key: '28c01fb7c6cb96ddeae955f2dd8a7820a921f84a', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'c1ab46423b1716badf577b51c1e10a59f6d857c7', class: classes(['styled-card']), style: {
+            } }, h("div", { key: '6b23cbc03edf841f8243d766083265f9da9a207a', class: classes(['styled-card']), style: {
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderRadius,
                 padding: this.spacing,
-            } }, this.label && (h("header", { key: '3f86015a24d5d86f41955c57a96c1051aa8cd0fb', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '697b450d8c77935d602a2c6fc11279c38a558f8e', type: "subheader" }, this.label), h("h-stack", { key: 'ef44ce7c7d1fd3d8f683656c2156f0b24232b6c0', spacing: 8 }, this.actions))), h("slot", { key: '1e5bc6315fcc134e5a7c608547ea2f481ecb91df' }), (this.footerActions || this.footerContent) && (h("footer", { key: 'aabb9ec4c7f1122662ac13655caa4cd3557266cc', class: "card-footer", style: {
+            } }, this.label && (h("header", { key: '1b5d4007d73c1351bd92c8d39ccc3db37718dfdf', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '0fcbf910bd3ff5b37e35ca57202f2aded644c21f', type: "subheader" }, this.label), h("h-stack", { key: '64104e8d79e35adc420a6fa57204d70e8d84606d', spacing: 8 }, this.actions))), h("slot", { key: '64e7072f30efb2c60ac754512a03648125e1388c' }), (this.footerActions || this.footerContent) && (h("footer", { key: '7ab89016f8dbb8f5af65b28e2095163e8f908c86', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: 'c92b803303485ce25b66dad4237411e3c4d5c15c' }, this.footerContent), h("h-stack", { key: '12c395e0b5c537f991d6814352f62d3da15432a1', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: 'd04e37cf5af9dd0e560f687837e0f2a56bd120ed' }, this.footerContent), h("h-stack", { key: '234c78bb23f4124809c86df4c78fb4f5f6832884', spacing: 8 }, this.footerActions))))));
     }
     static get is() { return "zonos-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,14 +36,14 @@ export class ZonosCheckbox {
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'a863e05a6e647b9ea8ef8902a4c618f6998894cd', class: classes(['zonos--elements zonos--checkbox']), style: {
+        return (h(Host, { key: 'a5ac0531735ec33f61886845af2ca061dc08ddd3', class: classes(['zonos--elements zonos--checkbox']), style: {
                 '--zonos--background-color': backgroundColor,
                 '--zonos--border-radius': borderStyle,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--size': `${this.size}px`,
-            } }, h("label", { key: '2b84b59d106661937c10e76ccb1c05f887c657ec', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '1dc2037bf17c37c8f762f2ac28509e3d607c9e61', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+            } }, h("label", { key: 'a43282ec66f0bf45aadea3be194f37dfb71bcae3', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '1249ee568cd5b503bf40ccfbabd698ad8079f1cb', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: '75175e238cbe841c11f43392797a2126d1cd65a8', class: "checkmark-container" }, h("svg", { key: '5e853c2248dd1777f0b4029a1b7beeb0fb8a0e1c', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '367494224e826b903acb560cbb93f532502aa4d2', "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", { key: '573cfdccbd768246996bff4eaed8064b67e90009', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: '65b6fb17e7ebb7160ce891d3f86a8ca0453a2f87', class: "checkmark-container" }, h("svg", { key: '9e58246871517832dfae28a92d9c4177e09eb095', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c11830908d0dbfc929b77025b42a930f243cc587', "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", { key: 'af6464b76512b252b0adf24d04b17884f7af60f4', 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/zonos-checkout-progress-tabs.js

@@ -64,17 +64,17 @@ export class ZonosCheckoutProgressTabs {
                 color: labelSelectedColor,
             })
             : labelSelectedColor;
-        return (h(Host, { key: '2b92000ea02fe5efcd8c8b4cab82253344fb9fba', class: "zonos--elements", style: {
+        return (h(Host, { key: '9470ce01401994f374045f8017403c532032a018', class: "zonos--elements", style: {
                 '--zonos--color': contrastLabelColor,
                 '--zonos--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: '2d10ca52da867104ebec46ea6406fcb1688d96d6', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
+            } }, h("div", { key: '0008a7049833c6a149c236b692bb9bdfb30e2fb9', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
             const isSelected = tab.value === selectedStep;
             return (h("button", { class: classes([
                     'zonos--tab-item',
                     tab.value === selectedStep && 'selected',
                     tab.isDone && 'done',
                 ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cartStore.step = tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1000', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1000' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1000', type: "label" }, translate(tab.label))));
-        })), h("div", { key: 'cb87fe27155f6d6a02ec668d1750a1fd397652a0', class: "zonos--tab-progress" }, h("div", { key: 'd260e03cbb980b35f4c8047233a4e54714a8a756', class: "zonos--progress-bar-fill" }))));
+        })), h("div", { key: 'ebc812e43e69a0e30814ad87697cd189cec773bf', class: "zonos--tab-progress" }, h("div", { key: '8a526bd9f0def3558e8652d408b001fbd0f1b332', class: "zonos--progress-bar-fill" }))));
     }
     static get is() { return "zonos-checkout-progress-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,10 +42,10 @@ export class ZonosCollapse {
             // set overflow to hidden to prevent content from showing when collapsed
             this.el.style.overflow = 'hidden';
         }
-        return (h(Host, { key: '4362f714c77107361d6a12b37611d443b3913360', class: 'zonos--elements zonos--collapse', style: {
+        return (h(Host, { key: '441ae4124bc658957136dae338ab1b22a72f7458', class: 'zonos--elements zonos--collapse', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
                 height: this.getElementHeight(),
-            } }, h("div", { key: '0d66a5810e4d4e5485680eb07dd4201001ddeeb3' }, h("iframe", { key: '8ca06be959cfbb3d791bc93b9db9e6abc820466f', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: 'cd8be075228fdd276b7d2f12929e49847d7a8b2d' }))));
+            } }, h("div", { key: 'a2771dd846a0e3b5e476d7c8a555539da292a6d6' }, h("iframe", { key: 'a4a140435d6bac406c144a01b9cb6702e8e60474', class: "height-change-listener", tabindex: "-1", title: "collapse-height-change-listener" }), h("slot", { key: '4c91a4473d3ea25b7dfd4c54a2dbdbeca4439d12' }))));
     }
     static get is() { return "zonos-collapse"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-confirm-dialog/zonos-confirm-dialog.js

@@ -83,13 +83,13 @@ export class ZonosConfirmDialog {
         const borderStyle = getBorderRadius();
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = getZonosStoreTheme(zonosStore.appearance.theme);
-        return (h(Host, { key: '6fbde5144cb14f8c418f4108037866d8d5b9a403', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
+        return (h(Host, { key: 'b53eb5a4ba60e5ca33e5b9295d8ce19425008b8d', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
                 '--zonos--border-radius': borderStyle,
                 '--zonos--dialog-width': `${this.dialogWidth}px`,
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '972e16777f091277e935ba2cf779b98c03f1b8d9', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: 'a88ae021456007ae9ddfcf6ab778539c1500afa2', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '1613ef615b0dc37e90858b7e91699d62e88abce7', class: "zonos--confirm-dialog", onBlur: () => {
+            } }, h("div", { key: '46c0992f489fb28fad0d66096ec2b1510211610e', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '090956fa755d30988a24ca394b0347dff88863ac', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '57d5f2426877eed074c8f28a5435f0c26eb39d3d', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, h("div", { key: '02d698138743f985dc232f19336b848b68d01fc1', class: "wrapper" }, h("div", { key: '29126adc0d48657e01bc645f2b272ae895adb053', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '2ba6eb8d4669ea346fae88bc60d79feb97aca3c2', class: "content" }, h("div", { key: 'c8b4552f75713f621bb57281b5187d13255b4a7e', class: "title" }, h("zonos-text", { key: '97543734f7870a6aec308bfc0e1b0146f77612be', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '8dec061fd863eedcde33653c2f06ce6bead894e4', class: "subtitle" }, h("zonos-text", { key: '354bd2b34a2f4673dd74569d4bde114535bdcf08', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'b0dd25b3f2848c057ea1d949bb2904fdc0850ca8', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: 'a3c9c2cd7a051aa63126d42e55d4ffbef68ffbaf', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '4a0d517ab5932deb0cb4c78d02e28b7d8307dbe0', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, h("div", { key: '9989ec7f2b2485643cb0f06a4e36bc988b545a20', class: "wrapper" }, h("div", { key: '2f94abade0676cd863477c3b2030c0c04a746fbe', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '8826ac1a2ee3f54d2ae4b093f95137d42391221e', class: "content" }, h("div", { key: '02666146c0099cdc2828e22fcbb33baaf06c9a0f', class: "title" }, h("zonos-text", { key: '858617e7f7a56cbded100e3b27e359968bccd782', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '5a897b7ff97ac9aa0b9118dc8b3aef3a12bf06fd', class: "subtitle" }, h("zonos-text", { key: '0bf9a781fa402b7c2c76005b896e25edf566f033', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: '25bbcb0b33dc39bd892293f41100754b387d3128', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: '23cd44b20343f21c71e0167d0fddb1d2440a6245', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '4ca070aca6b34a7d6841fd034177bc557eadd7f8', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
     }
     static get is() { return "zonos-confirm-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-country-select/zonos-country-select.js

@@ -44,9 +44,9 @@ export class ZonosCountrySelect {
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
         const isEmpty = !filteredCountries.length;
-        return (h(Host, { key: 'd2c7e2e16fc85fc8d606110a225660e8681bb1cd', class: "zonos--elements", style: {
+        return (h(Host, { key: 'ba350a068e05a5f98aba19702aa1fb485cbd7672', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '362b75ddd36ee67c0d9110353636dca3baa33ea3', class: "zonos--country-select" }, h("zonos-v-stack", { key: '5a1129ee4c1b4c4164144c510b6d694e8cbcc51c', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'dc9d35418d2cfe4157cc1f15e2257841495fd94c', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: 'f6cd61f0b9b1bf4c878747c1262e7572589900df', autocomplete: "off", autofocus: "autofocus", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), value: this.inputValue }))), h("div", { key: '418cb6c9e1f69b6d79ea591952ac37d29618915c', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: '32953d9f132413689091bfd5cb08be538f5fb1ec', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: '78c4cfdd6c53c4ea779ee6911402f148a6a0029b', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
+            } }, h("div", { key: 'e997a8d0fa0d25c5f3eb3f5a8bc5cdb154fd788f', class: "zonos--country-select" }, h("zonos-v-stack", { key: '332297ccdf0ea81bdfaee93f448d4dc02fb9f960', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '66e86a39b9c309f63d509c8320e333c5b139ec94', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: '64b67b4b797b6df43a40830b41d33271de437abc', autocomplete: "off", autofocus: "autofocus", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), value: this.inputValue }))), h("div", { key: '10d2f74f30e782e867bb555957c74b52ec651889', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: '875e8b15495df5fafe3b02dd11ab1b5f4b9650e3', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: 'aff0ae431a5350996cffa1188ed5d9338a8ca840', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
                 const country = filteredCountries[index];
                 if (!country) {
                     return null;

package/dist/collection/components/common/zonos-custom-message/zonos-custom-message.js

@@ -8,9 +8,9 @@ export class ZonosCustomMessage {
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: '614049a461ddd3d83ac735f57de933a89d76c0e4', class: "zonos--elements", style: {
+        return (h(Host, { key: '11d2b3542e2637730acd686cb6f1bc53eb388a9a', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: 'a2cd47b27b31a8b9386a69f8a0ebc4e57b9d08b4', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '6336e3d3250f0b242f629c1d3656b46966fc7e8f', class: "zonos--flex-message" }, h("zonos-icon", { key: '6ee749947941aef5f6ed1e2e2b7e37e36c7f4437', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'c2f2981d4e91ee8bf5f981e753269b0e5f6a165e', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: 'a0596fc233b89fba65df031575144b82dbb9a2c5', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: 'eab51ba2e971e8d52abdd72e90d90ad251c034ad', class: "zonos--flex-message" }, h("zonos-icon", { key: '7f0f05190f5453399ab151ecc7bcdabf3e105709', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: '3b750eebd76d5f41874525ffc53ba3ca87244253', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,17 +49,10 @@ export class ZonosDialog {
         this.isMobile = this.isMobileMode();
     }
     render() {
-        // disable scroll on the body when dialog is open
-        if (this.open) {
-            document.body.style.overflow = 'hidden';
-        }
-        else {
-            document.body.style.overflow = 'auto';
-        }
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'ba7a8197ab543be448706f9e9691b57738d0caae', class: classes([
+        return (h(Host, { key: '506cffe43252a55397dc49ff230311ab38b7f049', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -71,10 +64,10 @@ export class ZonosDialog {
                 '--zonos--height': this.height || 'initial',
                 '--zonos--min-height': this.minHeight || '500px',
                 '--zonos--width': this.width,
-            } }, h("div", { key: 'b930321b762118180765fa981ec36331fcf582e3', class: "zonos--backdrop" }), h("div", { key: '9e2c43b255342bf5ba2cce5a3ebd3690a855dea4', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: 'ba38ab19c3af855c46cd50cf1c9aac5279158432', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'a3ee6a94bb75c349b4f724295d514d3fd2c212dd', class: "zonos--loading" }, h("zonos-spinner", { key: '91f094db949bbf1698bebc871f1ae5455f647ead', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '4804b7611ecf1eefb24126c408952941ab535ba4', class: "zonos--header" }, this.headerText && (h("h3", { key: '9e8c592e93d3c144553321f59176a2ba7b29ef95', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '35d49072fdeadf26797f9ef82d63b8448100f833', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: 'f74d2afc8f0296a7ef81e8a3b530fd60d92f3274', class: classes([
+            } }, h("div", { key: '42944e3338f04feca7cbc928bb12ebeba555c6a5', class: "zonos--backdrop" }), h("div", { key: 'b4e17568fbee4cbe15f745bf49efaab8d1be8b6e', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '255c11f4c3dc5d2f28703b35a774f1d63078f0b0', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '48f1d08a3d2bbeb765be73f2c65dd566dbceebe4', class: "zonos--loading" }, h("zonos-spinner", { key: 'e0250720aefea8b5ac13000cd61a980e0e09e42f', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: 'bccb4783b92d4b90ab67faacbc6f888af3f52aa5', class: "zonos--header" }, this.headerText && (h("h3", { key: '79c0da7d43317142d177a03629cb3916d9f7923f', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'c835b4a928867c66aed65e0204503553cfe410eb', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: '2c9612b655676ac82fb6a7cec268dd12ad0bd8f0', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '78138acb4bc703c5248687468621e87262b7cc90' })), h("slot", { key: 'a98f325d222c53ba779075871fcf6aad5542d743', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '035123e25049b21951bcfd0a765dd1eca0c50c99' })), h("slot", { key: '3b40b61cb3a234348689f33ce2376d58fbc2f0e7', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,17 +17,17 @@ export class ZonosInput {
         this.inputChange.emit(newValue);
     }
     render() {
-        return (h(Host, { key: '402137e0e5b191d36b4d51619d29f05ef050f114', class: classes([
+        return (h(Host, { key: '70d14250b09b4c2e8e865c00d10015f6d0f9a8da', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--zonos--border-radius': getBorderRadius(),
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '601de098f0929c7e0e89efc63a0ffd5f9dc14428', class: classes([
+            } }, h("div", { key: '1a7020e339f23c1aba8004b613ac4252a51e0686', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: '151162f4e5052f1cef11efd4666dfa6e89df4b25', class: classes([
+            ]) }, h("input", { key: '6a4ffdb5c8f2d0058bc7ebde5427a749cedd62d1', class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.inputValue && 'has-content',
@@ -35,7 +35,7 @@ export class ZonosInput {
             ]), disabled: this.isDisabled, onInput: e => {
                 const input = e.target;
                 this.inputChange.emit(input.value);
-            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '65f207f694763f7505c75a13a2be5c24d57ec9c1', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '62408e5b16c51f9ccb88066e384391fc7c96f0ec', class: "zonos--floated-label", "data-label": this.inputLabel }))));
     }
     static get is() { return "zonos-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-language-select/zonos-language-select.js

@@ -16,9 +16,9 @@ export class ZonosLanguageSelect {
     }
     render() {
         const { selectedLocale } = localizationStore;
-        return (h(Host, { key: 'eaca22844486965ba2b78c46571cdecd1f3002e7', class: "zonos--elements", style: {
+        return (h(Host, { key: '38bd8435fdeb1a017b9ed7253d599b99f370a0b6', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '2846ee489019e8c83d7b64b8a29dc67353b8f8c0', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '72c36cbf777562c15346c26716e07469a5889f8d', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'd84fda6dc4aceaec2b3b8fda359ca60f78db448a', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
+            } }, h("div", { key: 'c7cffeecf5da28e323f60a5b4e3b292cfbe900bc', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '331f76a0a0a57cbd9dbd282ba854956c183a75dd', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '15743243ddbfb50dd533cf91254d6e41db7597a5', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
     static get is() { return "zonos-language-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class ZonosLink {
         this.linkTitle = undefined;
     }
     render() {
-        return (h(Host, { key: 'bba0da02c0dee468bd0cacd268f339f7ec4f1008', class: "zonos--elements" }, h("a", { key: '19515197e397b2b24237e77d3e89de75382c14e1', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '63d597a3091e954c9302e461030646b38ee2396e' }))));
+        return (h(Host, { key: '9c08d2689b011f162ef47271bd50e9e1fc2d177f', class: "zonos--elements" }, h("a", { key: 'ad0a8003308783081a7070bb9f06cd2387bb3a78', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: 'd54f21f0f36196b9b5a0bf7f63a989e9dd1c411e' }))));
     }
     static get is() { return "zonos-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,11 +10,11 @@ export class ZonosLogo {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (h(Host, { key: 'd914d74b5aee16c30242fe3fad20b917c020b5c5', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: 'ef19703a0588e4010e50c2e4bef5abe9eb48efc7', class: classes(['zonos--elements zonos--logo']), style: {
                 '--zonos--filter-color': filterColor,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--width': this.width,
-            } }, h("img", { key: '39f9bd18354de97a358432e9daf3373dfb6914b6', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: 'b14760baccb072ab399d11432fbc4c3c9c8ee876', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get is() { return "zonos-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-rest-state/zonos-rest-state.js

@@ -14,11 +14,11 @@ export class ZonosRestState {
     }
     render() {
         const imageUrl = this.getImageRestState();
-        return (h(Host, { key: '49903eabc623a041c5ae876f20cc23a037d57302', class: classes(['zonos--elements zonos--restState']), style: {
+        return (h(Host, { key: 'f7c1a1268bff06d00acbc20d0fc0b2a16d01398c', class: classes(['zonos--elements zonos--restState']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'd85f98a9c615057f699c3e6a3894946c28252831', class: "zonos--restState-image" }, h("img", { key: 'e28aa5192809cca36d3f395d743ef5194ec79fdb', alt: this.restStateType, onError: () => {
+            } }, h("div", { key: '0b66ca94e47e24b49af7e92ba5b34f70a9fe7f6b', class: "zonos--restState-image" }, h("img", { key: '22cfd5958bd55f5ebe0373f8afc2c332b66ed57b', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), h("div", { key: '09ca8ea866d82f4929587850e23e349edfbca4c0', class: "content" }, h("zonos-text", { key: 'e6a5d80825a3e73b71a7910a66a8fb9181c2fb46', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: 'a109d7750dfe7e84d0e6e37d6833c288d508ed41', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: 'd130db9c0c743058f5c5e6dc3477e5baf5fef5d5', class: "action" }, h("slot", { key: 'cce93629fbfe6b196a59a20850a7efc5309fd461' }))));
+            }, src: imageUrl })), h("div", { key: '90f11551b07b4cc3597b336b932e9968aac9cb78', class: "content" }, h("zonos-text", { key: '23195baa5b5850adf26c948b1f65aec5a267ab88', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '333cb489d5e0df33062f8c64976c77f6130e36c6', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: 'a1b7b14e0ca75914f4586bce93a93df767bc54e9', class: "action" }, h("slot", { key: '0edd004d97fc997147526ef56b581971eb1309f4' }))));
     }
     static get is() { return "zonos-rest-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-select-dialog-header/zonos-select-dialog-header.js

@@ -8,9 +8,9 @@ export class ZonosSelectDialogHeader {
         this.label = '';
     }
     render() {
-        return (h(Host, { key: 'fbc386d771a9f1ee4b145b54c53a3ce31ac4aae5', class: "zonos--elements", style: {
+        return (h(Host, { key: '82ed89ddf7915df04bad887c887edb2cdd116ff8', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: 'ed5cab44fd2b06a3d700602f4cb501608205e5b6', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'c2345cdad3bd812d7add7029b1f37d2f623de310', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'c43a9009db5e83ea96bc683ff99a36c4fcdef6fc', type: "boldLabel" }, this.label), h("zonos-button", { key: '6884b1569d52688dbc74ee3772755e37eadb1e79', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '8af3df1a34ea6da62be137313e0c42cc90ba704d' }))));
+            } }, h("zonos-v-stack", { key: '6c91fb64db203a773f2fb375059173f2e0a4b7db', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'b26a23574556b119e27bf5fb0cb5308709b0eb73', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '3347503084cae69ccfca1fe5a503174e2acecc3c', type: "boldLabel" }, this.label), h("zonos-button", { key: '66e91d6c0a46407cc88c4d269d880eaa27b650db', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '2db7470d4893918939dd54d2f2e994f49517def9' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,9 +7,9 @@ export class ZonosToggle {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: 'c49d16b02ca854ead2b2652cc1e39a423fd67251', class: classes(['zonos--elements zonos--toggle']), style: {
+        return (h(Host, { key: '4b224821c94249757cbd19e27a75af29c9fbab25', class: classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'cda75445836db4a4d8466e840eac952a18b3ad48', class: "wrapper" }, this.options.map(option => {
+            } }, h("div", { key: 'e8a3a44ccfebef2f06d94938c19aaf640d844d9e', class: "wrapper" }, this.options.map(option => {
             const selected = option.value === this.value;
             return (h("button", { class: classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
                     this.toggleChanged.emit(option.value);