@zonos/elements 1.3.241 → 1.3.243

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -20,9 +20,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: '2046d921010e03f983caf7abbe167e97910e932c', style: {
+        return (index.h(index.Host, { key: 'fc34e62d3d9712120d2356f1bdc8ad42b26d122a', style: {
                 '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'a3d2a596527254b44be7841bf3d1c8a8c0f85af4', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '3b56e670f953ce24f7d4a96789ffdf51ede94b85' }))));
+            } }, index.h("div", { key: 'd246b49b618860f01c3f1b8c439c1be361ca656f', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '043fde36321157373196c9120a774c78a0fc46ce' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

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

@@ -18,7 +18,7 @@ import { getIsTestMode } from "../../utils/checkout/getIsTestMode";
 import { isCheckoutMobile } from "../../utils/checkout/isCheckoutMobile";
 import { isDisabledCountry } from "../../utils/checkout/isDisabledCountry";
 import { isShippableCountry } from "../../utils/checkout/isShippableCountry";
-import { watchBigcommerceDomesticCheckout } from "../../utils/checkout/watchBigcommerceDomesticCheckout";
+import { watchImmediateBigcommerceDomesticCheckoutRedirect } from "../../utils/checkout/watchImmediateBigcommerceDomesticCheckoutRedirect";
 import { classes } from "../../utils/classes";
 import { createCustomEvent } from "../../utils/createCustomEvent";
 import { getBorderRadius } from "../../utils/getBorderRadius";
@@ -134,6 +134,10 @@ export class ZonosCheckout {
          * Whether or not the fedex shipping dialog should be shown
          */
         this.shouldShowFedexShippingConsentDialog = false;
+        /**
+         * Whether or not the domestic checkout dialog should be shown
+         */
+        this.detectedDomesticCheckoutDialogOpen = false;
         /**
          * Client secret value
          */
@@ -987,8 +991,13 @@ export class ZonosCheckout {
             cartStore.isStagingMode = this.overrideStagingMode;
         }
         // check if bigcommerce, if user enters the shipping address that's in the shipping zone at bigcommerce checkout
-        watchBigcommerceDomesticCheckout({
+        watchImmediateBigcommerceDomesticCheckoutRedirect({
             domesticRedirectedBtnSelector: domesticRedirectedBtnSelector,
+            onInternationalCheckoutSelected: async () => {
+                this.detectedDomesticCheckoutDialogOpen = true;
+                // wait for 2 secs
+                await new Promise(resolve => setTimeout(resolve, 2000));
+            },
             onShippingAddressSessionFound: shippingAddressSession => {
                 // prefilled the default address if shipping address session is found for checkout on open
                 this.defaultAddress = [
@@ -1501,7 +1510,7 @@ export class ZonosCheckout {
                 this.isMobile && 'mobile',
                 this.isIframed && 'iframed',
                 this.hiddenMode && 'hidden-mode',
-            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: translate("Don't close"), dialogConfirmBtnText: translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translate('Would you like to close checkout and return to the site?'), dialogTitle: translate('Are you sure?'), onCancelClicked: () => {
+            ]) }, this.preview ? (renderContent()) : (h("zonos-dialog", { borderStyle: style, "data-theme": rightSideTheme, height: "980px", isLoading: dialogLoading, mobile: this.isMobile, noBodyPadding: true, noBorder: true, noClickOutside: true, noCloseButton: true, onCloseDialog: () => this.closeDialogHandler(), open: this.open, width: "1200px" }, renderContent())), h("zonos-dialog", { isLoading: true, loadingText: translate('You will be redirected to international checkout shortly.'), loadingTitle: translate('We detected that you are shipping to an international address.'), noClickOutside: true, noCloseButton: true, open: this.detectedDomesticCheckoutDialogOpen, width: "450px" }), h("zonos-confirm-dialog", { class: "zonos--close-confirm-dialog", dialogCancelBtnText: translate("Don't close"), dialogConfirmBtnText: translate('Close'), dialogIntent: "warn", dialogOpen: this.confirmDialogOpen, dialogSubtitle: translate('Would you like to close checkout and return to the site?'), dialogTitle: translate('Are you sure?'), onCancelClicked: () => {
                 this.confirmDialogOpen = false;
             },
             // Mark user selected confirm to close the dialog
@@ -1737,6 +1746,7 @@ export class ZonosCheckout {
             "inventoryCheckErrorMessage": {},
             "placedOrderInfo": {},
             "shouldShowFedexShippingConsentDialog": {},
+            "detectedDomesticCheckoutDialogOpen": {},
             "clientSecret": {},
             "stripeCustomerSessionClientSecret": {}
         };

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

@@ -55,10 +55,18 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
+  gap: 4px;
   z-index: 2147483009;
   background: var(--zonos-elements-gray-0);
   border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-10));
 }
+:host .zonos--loading-text,
+:host .zonos--loading-title {
+  max-width: 100%;
+  padding: 0 32px;
+  text-align: center;
+}
 :host .zonos--dialog-layout {
   width: 100vw;
   height: 100vh;

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

@@ -86,7 +86,7 @@ export class ZonosDialog {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '1b53109e3598536674ab0a2cac4c5fa52c2e501d', class: classes([
+        return (h(Host, { key: '3764ddd25cf29e7b5ebc420c2fc47de213d2bcd6', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -98,10 +98,10 @@ export class ZonosDialog {
                 '--zonos--height': this.height || 'initial',
                 '--zonos--min-height': this.minHeight || '500px',
                 '--zonos--width': this.width,
-            } }, h("div", { key: '3fcaf891d98fad2a7bb0b0eb7285c991a9df7610', class: "zonos--backdrop" }), h("div", { key: '16fe5c3ad017d19c52e85cf18eec31fe3960f61d', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '1fae701967b41b2d96e709078f6958867a7ef1c0', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'ba0bc9a7bf0f8fd097e874b371fc563ee9fab255', class: "zonos--loading" }, h("zonos-spinner", { key: 'c4599e9093de3e0ee56f094fc9bbe33d474cf966', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '827ff1f3a08f9efe7e1cb10315e62b68ed634087', class: "zonos--header" }, this.headerText && (h("h3", { key: 'd6e000b787d758080aa9283f59a3b577ef9d9bde', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '8efcb22ad294f4feab8f1a89e893a4f3d8a48d05', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), h("div", { key: '2bf643dcdcd2fdffdaccba0169386cd0a5a4ccd6', class: classes([
+            } }, h("div", { key: 'aded0d33e4605a40b107e89fcbc95ef024b187f7', class: "zonos--backdrop" }), h("div", { key: '55500b0bb118be90d474fc758f979ac3f317d52e', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: 'a21fa7808c16df11cab8800279774abb38828f1b', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'b8e9229591ad83446400deafdf5bee284091f1d9', class: "zonos--loading" }, h("zonos-spinner", { key: 'f284c8604d8710be60a725fa8c23c04f32e44b1f', size: 30 }), this.loadingTitle && (h("zonos-text", { key: '16d605c9272d9bdbb2d8b7f2d5685978cc2cf6eb', class: "zonos--loading-title", size: "l", weight: 700 }, this.loadingTitle)), this.loadingText && (h("zonos-text", { key: '0e9acec26d8502781ad8c853959740ece8fd2907', class: "zonos--loading-text" }, this.loadingText)))), (this.headerText || !this.noCloseButton) && (h("div", { key: '77d2dac98791ddea7e3bc3ab0e740c0b170072d8', class: "zonos--header" }, this.headerText && (h("h3", { key: 'f8b07366a4a9d5cd1686d7e3663ce0f6ba401ec7', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '8c82dbf7d636715f3a391fe13ced4e3bc0ee079c', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, title: "Close dialog", variant: "subtle" })))), h("div", { key: 'd44cbf2cbb551043502e5e0c80048adeffaaf303', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '1b8886abbfac00704f004c6ca14d96fdbe87e751' })), h("slot", { key: '85c94e23f5686e4f91af598bffb14e38a09855a4', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '508a3fcc6fbfdec55033a584e235ba9fd9e7448f' })), h("slot", { key: '1f24ec0974cd1def288b744d6aa68399367aefd8', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -245,6 +245,44 @@ export class ZonosDialog {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "loadingTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the loading text"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading-title",
+                "reflect": false
+            },
+            "loadingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text that will be shown while loading"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "loading-text",
+                "reflect": false
+            },
             "noBodyPadding": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/common/zonos-h-stack/zonos-h-stack.js

@@ -10,10 +10,10 @@ export class HStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '8c80b04f02ebafcc0529bbc8a30fb71dae591a81', style: {
+        return (h(Host, { key: '443aa77bfbf4c0c84c33d0ef7652caec001968c3', style: {
                 '--spacing': `${this.spacing}px`,
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("slot", { key: '9840c220581a016349627a61efdf9a4dc3f68bc9' })));
+            } }, h("slot", { key: '3366df34b9f0f3549e556cff1e47878c2f6cd124' })));
     }
     static get is() { return "zonos-h-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,17 +31,17 @@ export class ZonosInput {
         this.inputChange.emit(newValue);
     }
     render() {
-        return (h(Host, { key: 'c0e1dfd6cf7f7f3021d373f72a477317518a1f32', class: classes([
+        return (h(Host, { key: '2058e48c7754e4e1eb0d9e380e332c90eed29ab8', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--zonos--border-radius': getBorderRadius(),
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '632868fc469c71f74696f2817e91b8293dc825a6', class: classes([
+            } }, h("div", { key: '192f4c0397125951a4bad39d844cd62237c56ce7', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: 'af801641f363523c1e32ae96a5d5ddf410f1ef9c', class: classes([
+            ]) }, h("input", { key: 'bde7df1a30edf835435f742770e21b4d594143bf', class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.inputValue && 'has-content',
@@ -49,7 +49,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: '419c140e987039cda4191f5b1bc8393c41b4a680', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: 'd611183e95d828086adac38dc493512f46d22e23', 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

@@ -20,9 +20,9 @@ export class ZonosLanguageSelect {
     }
     render() {
         const { selectedLocale } = localizationStore;
-        return (h(Host, { key: '04271d51489c89ffa0e4fda90ed28392ae725ebe', class: "zonos--elements", style: {
+        return (h(Host, { key: '748efbe1de696c0e1f52cef03d86f211c1e5f505', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'cebffa5e46a4403f6aa4753648ee8097c7b4375d', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '9aa75712883c069a0dc21f0cdd91484211f688d1', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '637cff9d4a5ff4ebac0e42ef4db6b49006e4f77e', 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: '97dd3f26dd5aff625b26a08125737f915bfbd112', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '8c00e1cf6d7addf5b817e07c1fb1b492cfb5775f', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '0260631e4303d5cee5035f31667203e4e3417a76', 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.href = '';
     }
     render() {
-        return (h(Host, { key: '999242ee8fc2e78a52fac1251a2cd554ed2e20ea', class: "zonos--elements" }, h("a", { key: '9ebee9ad8262ebd42f511dda6afadb54a2e7c813', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '1c460154708dfc89d1b5132d3905c107ce333fd8' }))));
+        return (h(Host, { key: 'a6077a6f0105ec4be45de0cb548ef1e32a28deb6', class: "zonos--elements" }, h("a", { key: '7f3ec0258909c2da08f758165a93abd3ab497a42', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, h("slot", { key: '774e15fa5c093041ac06a0a9bcac0446d7ce54fc' }))));
     }
     static get is() { return "zonos-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-loading-overlay/zonos-loading-overlay.js

@@ -13,7 +13,7 @@ export class ZonosLoadingOverlay {
         this.size = 40;
     }
     render() {
-        return (h(Host, { key: 'eee6eb4eb40c18ccdd24d57d98be8b90eadccf23', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: '4bca110e058cb5cbf4c86351aa56d251792ab325', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: '513b8d669ab13896442c0b1048609a3f3e0ed6f5', size: this.size, spinnerColor: this.spinnerColor }))));
+        return (h(Host, { key: '13154a3c9250f15d8dca292f0673c6465bfb15e0', class: classes(['zonos--elements', this.open && 'zonos--open']) }, h("div", { key: '4470fccd21e58bd7959ef3e20c8775ac637cace0', class: "zonos--loading-overlay" }, h("zonos-spinner", { key: '5b32b821cea982866da56176eeaafd5d8958f25d', size: this.size, spinnerColor: this.spinnerColor }))));
     }
     static get is() { return "zonos-loading-overlay"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,11 +16,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: '2277b893624a5e87fcda0f86e96a50d0bc309bac', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: 'f7a7ecb8ea16dfec9df297e35a9618ad56d5e60a', class: classes(['zonos--elements zonos--logo']), style: {
                 '--zonos--filter-color': filterColor,
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--width': this.width,
-            } }, h("img", { key: '3406330adec18a2faea63a91e0113d30d70deff5', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '70ea211dfc9973b17dd4b63763913190e70ca980', 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: '333c158c20af14bcfc310b7fae19cadb9ffaea01', class: classes(['zonos--elements zonos--restState']), style: {
+        return (h(Host, { key: '2d9be86849c6ff2f039ca21676cbdf912538eb1d', class: classes(['zonos--elements zonos--restState']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '0076afaff9200094d45bd4321ea7b1d0a4954a81', class: "zonos--restState-image" }, h("img", { key: '4ef3b7ee4f62175e06da9a7d2453603ba6cf9fb8', alt: this.restStateType, onError: () => {
+            } }, h("div", { key: 'f538f05fe92eca4ee05daf72ee3387bea337c20c', class: "zonos--restState-image" }, h("img", { key: 'cc752b1ed3e9e656810c901df9f8b19462efc978', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), h("div", { key: 'b5033ee1f4618732f14a9dd3c05d0271329083df', class: "content" }, h("zonos-text", { key: '2f21d52a7bb0b410590cb0768102155843e21038', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '48222ff00921961e770d20b817563d9a903a9e98', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: 'ac6c100c85bd166945d8394cf61ab6baaa19cb3f', class: "action" }, h("slot", { key: 'cec63c8cbac43d402333c7ab6aba0ac3bd9bab36' }))));
+            }, src: imageUrl })), h("div", { key: '4729c415dbac98876fcd907437b8df21b925dec5', class: "content" }, h("zonos-text", { key: '39313c8c71d228cd1076e809146ad7ac3d877a9a', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '69813bd32ae3867ebebcc511655f2052b1175945', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '98b085930fd76e2ff095cc971ae4699041c1a550', class: "action" }, h("slot", { key: '188318643319081914ed30aad91de5f15b014953' }))));
     }
     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

@@ -15,9 +15,9 @@ export class ZonosSelectDialogHeader {
         this.label = '';
     }
     render() {
-        return (h(Host, { key: 'f962d21f191040edf5b6e9fe2c4276bca67fde67', class: "zonos--elements", style: {
+        return (h(Host, { key: 'a1b9179c608e89ae29416a7c1cb93a5e15c9b029', class: "zonos--elements", style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '1d55415843a60fe2dfccc5fe4c51cf3024f0de2c', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '0f9e6aad9194160e171b70e835e100ddcda264a5', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '15680cb57b7f8fe3b0f8bb763f437c85ab100d1c', type: "boldLabel" }, this.label), h("zonos-button", { key: '8baa1075d7138c14306dc7a1c666f577bba2d128', 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: '96384e5eb53e731e2061339fd24bcec4194b1274' }))));
+            } }, h("zonos-v-stack", { key: '736354e40352c79c5b1d27207c424fc6ee82f7f4', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '700c0321bb2ea565ff861b833f51f3418ad61e4f', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'a45fb7507453949a1f3c687ae73635bb8b3f9282', type: "boldLabel" }, this.label), h("zonos-button", { key: 'a6b210caedc6248d8ab112bb10d888455d6fc6da', 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: '3bfbcd7c5bab9f11e4ed936dcd3b99da553709a0' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class ZonosSkeleton {
         this.skeletonHeight = '14px';
     }
     render() {
-        return (h(Host, { key: 'dc65462865ede6e9cb5a02f5c4f6bf43c550d0c7', class: classes(['zonos--elements zonos--skeleton']), style: styles({
+        return (h(Host, { key: '096e505180d901c1523567f89cdbcca7869a0895', class: classes(['zonos--elements zonos--skeleton']), style: styles({
                 '--zonos--skeleton-height': this.skeletonHeight,
                 '--zonos--skeleton-width': this.skeletonWidth,
             }) }));

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

@@ -69,7 +69,7 @@ export class ZonosStripeInput {
             ? zonosStore.appearance.theme === 'DARK'
             : primaryColor && isDarkColor(primaryColor);
         const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
-        return (h(Host, { key: '8beb2c15857313a9b2709a7c51e82c25c1d1ba47', class: classes([
+        return (h(Host, { key: 'c97d6030d8c9c3ca051a9eb0dce85676245abeeb', class: classes([
                 'zonos--input zonos--elements',
                 isDark && 'dark',
                 (this.isError || !!this.error) && 'has-error',
@@ -78,10 +78,10 @@ export class ZonosStripeInput {
                 '--zonos--font-family': zonosStoreFontFamily(),
                 '--zonos--font-size': `${fontSize}px`,
                 '--zonos--primary-color': secondaryColor,
-            } }, h("div", { key: '01ca3ae37198c97c33c7af3c9aca688c697d24ad', class: classes([
+            } }, h("div", { key: '2517b55aa12ed4dd4772be3dbd48edf28e393697', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", Object.assign({ key: '2f5ec49912242a06372045abb157524d8e28b2bf' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("input", Object.assign({ key: '7853f3eafc7a926f88b21abfa8f59995b5c35cf3' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.internalValue && 'has-content',
@@ -91,7 +91,7 @@ export class ZonosStripeInput {
                 this.inputChange.emit(input.value);
                 this.el.inputValue = input.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), h("div", { key: '2af905542b374f49eec85a9e626ee44f5818664f', class: "zonos--floated-label" }, h("label", { key: 'c8822e3610c25ec2135a28b9ce655cada68691dc', htmlFor: this.inputId }, this.inputLabel))), this.error && (h("zonos-text", { key: '4915281aa2ec9e3cb58fd159e647f1ee16fb16c6', textColor: "red-600", type: "caption" }, this.error))));
+            }, placeholder: this.inputPlaceholder || '', required: this.required, type: "text", value: this.internalValue })), h("div", { key: '56c6339f420fd38d0c850a6ad10f2349bfe99d21', class: "zonos--floated-label" }, h("label", { key: '7cdd19ca39f09d105786a751fbd3434779c8958b', htmlFor: this.inputId }, this.inputLabel))), this.error && (h("zonos-text", { key: '784a4aca2d02d59c7a59e8579c88cdaba24f64af', textColor: "red-600", type: "caption" }, this.error))));
     }
     static get is() { return "zonos-stripe-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -201,24 +201,24 @@ export class ZonosStripePhoneInput {
                 .filter(Boolean)
                 .sort((a, b) => a.displayName.localeCompare(b.displayName))
             : [];
-        return (h(Host, { key: '93c761af05a92758af8d5b76c3c9630a8c45c46a', class: classes([
+        return (h(Host, { key: '3f073620fb9250208be54ffd6d0dfbc8c5da7d6f', class: classes([
                 'zonos--phone-input zonos--elements',
                 isDark && 'dark',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '0c814da4f10b83027d2a91429c44aae0b2ae851f', class: classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: 'bdaf73f9a51fa2a39dd9684584ec4f032ea39d00', class: classes([
                 'zonos--label-wrapper',
                 this.disabled && 'disabled',
                 this.isFocused && 'focused',
                 hasContent && 'has-content',
                 this.error && 'has-error',
                 this.inputLabel && 'has-label',
-            ]) }, h("select", { key: 'f18e02540fc979f090ec9e8445a9c24a726bd3c5', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
+            ]) }, h("select", { key: 'ad4477bfc5e1971a5e7a34a5e06b699c6115b3d3', class: "zonos--select", disabled: this.disabled, onBlur: this.handleBlur, onChange: this.handleCountryChange, onFocus: this.handleFocus }, countryOptionsList.map(option => {
             var _a;
             return (h("option", { key: option.countryCode, selected: option.countryCode === ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.countryCode), value: option.countryCode }, option.displayName, " (+", option.phoneCode, ")"));
-        })), h("div", { key: 'c0bc6f60fede12a27057b64c699701dc311a3c2b', class: "zonos--input-group" }, h("div", { key: '3329b43c5ff8b267d01dfc6611736f8fda70d30e', class: "zonos--select-wrapper" }, h("div", { key: 'f43b2ba959ef2f7e616b3930df5eba5bf73ab0c6', class: "zonos--country-select" }, h("div", { key: '357bcd7ec8d96df1e115820f26444422ef683a86', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: '050444251b375b60ab7de9cf8220b6270a1e7681', class: "zonos--country-select-selected" }, h("div", { key: '37653be1e802cf065827bde91b46a4a650ab153e', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: '2d1cde80d3b5a8248a2b824e5cacb438026d3d6f', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: 'c75d6600d1ba864b7e8e8b3ae60faaa459d7578f', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: 'da61185205072f591ab0f21e1f09e6ba87f3b49d', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '6f9fd827cba11e442ec96d9706efb939aa3164e3', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))))), h("div", { key: '795d59db0eb10fa4ab31b9939a9f0522004c71b1', class: classes([
+        })), h("div", { key: '39d6ae20a62bfa7d21a3d4a1143a4b42a87bbc41', class: "zonos--input-group" }, h("div", { key: 'dba0974115ce5e4f3f22689f406c3defe2989b29', class: "zonos--select-wrapper" }, h("div", { key: '3231072a3dba2d61a5567ad8ceacd871b3b7657c', class: "zonos--country-select" }, h("div", { key: '3fd9224b1ef63a6e2e1c11c19a1dddbaa1337ad1', class: "zonos--country-select-content" }, this.selectedCountry && (h("div", { key: 'ba2d811521d84bbe3c0a2749307cce90e9347457', class: "zonos--country-select-selected" }, h("div", { key: '4b21bf8d586b51f3d0ef9ba881e5a73d4742d440', class: "zonos--country-flag-wrapper" }, h("zonos-country-flag", { key: 'ed2fca152a8f1064051758bf624bb02d0af61379', class: "zonos--country-flag", countryCode: this.selectedCountry.countryCode })), h("div", { key: 'ee43fea008cfde320a15a151a07f1295dd0d77dd', class: "zonos--country-code" }, "+", this.selectedCountry.phoneCode))), h("div", { key: '28961fccf5ad433b3a81fab91773d8d8d4e17b30', class: "zonos--select-chevron-wrapper" }, h("zonos-icon", { key: '8233c34fdbf221f2289506b57b3fd429ec048df3', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))))), h("div", { key: '0d947d929218bac9929f411c5989a18ab36054fe', class: classes([
                 'zonos--input-container',
                 this.inputLabel && 'has-label',
                 hasContent && 'has-content',
-            ]) }, h("input", Object.assign({ key: '64aa071d2e28691bf12493703b32657c45d9d9ae' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: 'd543673e6cbc526ffcebf6eca0cf8ab2edda644b', class: "zonos--floated-label" }, h("label", { key: '432a710de6b9af0c97bc6c50f57079e12806f62d', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '719f193ea85683b50d1fa7a7855bae22241b0693', textColor: "red-600" }, this.error))));
+            ]) }, h("input", Object.assign({ key: '16956304c84642b82039e0180aea6ce96269799a' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: "zonos--floated-input", disabled: this.disabled, id: this.inputId, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handlePhoneChange, placeholder: ((_a = this.selectedCountry) === null || _a === void 0 ? void 0 : _a.phonePlaceholder) || '', ref: el => (this.inputRef = el), type: "tel" })), this.inputLabel && (h("div", { key: '57f3d9ad16aee89271c134d409abb6383b225f55', class: "zonos--floated-label" }, h("label", { key: 'd2af8c75f82df1b3176f708bea86a18b7ee4840d', htmlFor: this.inputId }, this.inputLabel || translate('Phone number'))))))), this.error && (h("zonos-text", { key: '3bb993c5e780f4394d141d7c62bd1f8ea4d1fc70', textColor: "red-600" }, this.error))));
     }
     static get is() { return "zonos-stripe-phone-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -105,14 +105,14 @@ export class ZonosStripeSelect {
         const fontSize = zonosStore.appearance.fontSizeInputValue || 16;
         const hasContent = this.internalValue || this.selectPlaceholder;
         const showClearButton = this.isClearable && this.internalValue && !this.isDisabled;
-        return (h(Host, { key: 'c43f75cfc3d57e8d31f7ec06fb66eff71a5c87b9', class: classes([
+        return (h(Host, { key: '61d5f0b2c7fafd2df4ea6beacc8500bad9b64da7', class: classes([
                 'zonos--select zonos--elements',
                 isDark && 'dark',
                 this.isError && 'has-error',
-            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '818e99e207482930dcccc26e55fcda5a283e366f', class: classes([
+            ]), "data-theme": isDark ? 'DARK' : 'LIGHT', style: Object.assign({ '--zonos--border-radius': getBorderRadius(), '--zonos--font-family': zonosStoreFontFamily(), '--zonos--font-size': `${fontSize}px`, '--zonos--primary-color': secondaryColor }, (this.minWidth ? { '--zonos--min-width': this.minWidth } : {})) }, h("div", { key: '63198cbb818342d8deecbe1e0c5d9978a51df064', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("select", Object.assign({ key: 'c67ba73746f8cfd05801033a6620b25c82b86069' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
+            ]) }, h("select", Object.assign({ key: '8bbe869f708d9f87f9dc6d66a8f573a795399e23' }, this.inheritedAttributes, { autoComplete: this.autoComplete, class: classes([
                 'zonos--floated-select',
                 !!this.selectLabel && 'has-label',
                 hasContent && 'has-content',
@@ -122,9 +122,9 @@ export class ZonosStripeSelect {
                 this.selectChange.emit(select.value);
                 this.selectedValue = select.value;
                 this.el.dispatchEvent(new Event('change'));
-            }, required: this.required }), h("option", { key: 'f7969953300914c34ad3d76c69586e30e12c3117', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translate('Select')), this.internalOptions.map(option => (h("option", { key: option.value, selected: this.internalValue === option.value ||
+            }, required: this.required }), h("option", { key: '6ae19c6b12976cd32e6efc9771a000b29945ee71', disabled: true, selected: !this.internalValue, value: "" }, this.selectPlaceholder || translate('Select')), this.internalOptions.map(option => (h("option", { key: option.value, selected: this.internalValue === option.value ||
                 // Sometimes google returns the label not the code for some countries
-                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: 'c093e68c826469ec22e69f154d5edfb342047d94', class: "zonos--floated-label" }, h("label", { key: 'b04836cba30a354efaf1a367cd7f5c629bc5ddc2', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '0a1bf1ce6b64f3a0c37495d8ad716078bceb757b', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: '3e690372f4df9d21754a2903819b17186d26654f', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: '9f761f5e9b416356ec7c4681d144adcf01fb8149', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: 'f5594d827dcb7f9812df7479bb8d199e2fcc4a1a', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: '79dce6ac5a8183ad68eaf1a6e60b15864df65d25', textColor: "red-600" }, this.error))));
+                this.internalValue === option.label, value: option.value }, option.label)))), h("div", { key: 'a21b56d32839669a95c3d36f215f85bb94f6bb1a', class: "zonos--floated-label" }, h("label", { key: 'fb710c149659ece3d433f57d8d27562395bb2a52', htmlFor: this.selectId }, this.selectLabel)), h("div", { key: '0f57b78a3fdafc0ff7bd1a5a2ead9e37be7ee915', class: "zonos--actions-wrapper" }, showClearButton && (h("button", { key: 'ffc562b96195b1990a26d4091971ddb2293b6ac7', "aria-label": "Clear selection", class: "zonos--clear-button", onClick: this.handleClear, tabIndex: 0, type: "button" }, h("zonos-icon", { key: 'c3eb42b95f57df3187772d1502e07a7052a72913', class: "zonos--clear-icon", content: RemoveLineIcon, iconColor: "gray-1200" }))), h("zonos-icon", { key: '7a6581602aa531d5d9bdea82c3f50952d901bad4', "aria-label": "Expand collapsed section", class: "zonos--select-chevron", content: ChevronDownIcon, iconColor: "gray-800" }))), this.error && (h("zonos-text", { key: 'b1a3819c075d5e8f70020274145675c8d19b143a', textColor: "red-600" }, this.error))));
     }
     static get is() { return "zonos-stripe-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,9 +9,9 @@ export class ZonosToggle {
         this.options = [];
     }
     render() {
-        return (h(Host, { key: '12d0931ba2738021291cd7a00e7c12df502409cd', class: classes(['zonos--elements zonos--toggle']), style: {
+        return (h(Host, { key: 'e6be1b38ea1fd978a231a1c3dc85a92c1d86a24b', class: classes(['zonos--elements zonos--toggle']), style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '6455e748d3547273d3c8cb7517ee512912d31644', class: "wrapper" }, this.options.map(option => {
+            } }, h("div", { key: 'e9ccac29c3f653e3e9d81d336089d6aaea6bbf6c', 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);

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

@@ -13,10 +13,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: '17ef3ac476981f5b63e5c4f70ef0491220f4b489', class: "zonos--elements" }, h("div", { key: 'd5b1eba844f5bd69077d6f5ba5b01acd7420e8a3', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '332d8fc00f4b949e93b4152e9f77c1c6eb273539' }), h("div", { key: '1248c9a6f49765b1f780daa8548dcc6a76e896d5', class: classes([
+        return (h(Host, { key: '4cadca2c888b6729447e216785957ab580d29831', class: "zonos--elements" }, h("div", { key: '0d5045faa3a01d8fc5fb5c56328bfa68eb4ffab2', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: 'a2610a5b6405067eb50d6ad11385544fd740399a' }), h("div", { key: 'd319ec9d87d7b4b395d0256b3ecfdb3043927d00', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '8f34324ee7d70e06813be72d58b198d50808e9b2', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'ae1a3642318b7d562b58559573592e9aacc50e86', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '769dbf51121fd82d870824d22a15e0f8ba0c4c5f', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'e80b2eab8f30e542ecbc87aac24a256fcd0c8cc0', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get is() { return "zonos-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-v-stack/zonos-v-stack.js

@@ -11,9 +11,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '2046d921010e03f983caf7abbe167e97910e932c', style: {
+        return (h(Host, { key: 'fc34e62d3d9712120d2356f1bdc8ad42b26d122a', style: {
                 '--zonos--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'a3d2a596527254b44be7841bf3d1c8a8c0f85af4', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '3b56e670f953ce24f7d4a96789ffdf51ede94b85' }))));
+            } }, h("div", { key: 'd246b49b618860f01c3f1b8c439c1be361ca656f', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '043fde36321157373196c9120a774c78a0fc46ce' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-virtual-scroll/zonos-virtual-scroll.js

@@ -106,10 +106,10 @@ export class ZonosVirtualScroll {
     render() {
         const { width: containerWidth } = this.containerDimensions;
         const visibleItems = this.getVisibleItems();
-        return (h(Host, { key: 'ff339af0ad6c41cbae2f867d2898a909804a06e7', class: classes(['zonos--virtual-scroll']) }, h("div", { key: 'c9088d67f32f2350e06814aefac55a275d9351b6', class: classes(['scroller']), style: {
+        return (h(Host, { key: 'a5083227ddbd44f3f94f0e4ecd7ebee309526fce', class: classes(['zonos--virtual-scroll']) }, h("div", { key: '45dd1bb2f501ca6a2091c06a68c5f96652bd2976', class: classes(['scroller']), style: {
                 height: `${this.totalHeight}px`,
                 width: `${containerWidth}px`,
-            } }), h("div", { key: '85f6afa13c4c8d9fbe1e688ce5a60d9c540c232f', class: classes(['item-container']), style: {
+            } }), h("div", { key: 'e8c90e99bdc3301c5430a098d4b9f57ec0bc020b', class: classes(['item-container']), style: {
                 height: `${this.totalHeight}px`,
             } }, visibleItems.map(({ element }) => element))));
     }

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

@@ -19,7 +19,7 @@ export class ZonosComponent {
         return format(this.first, this.middle, this.last);
     }
     render() {
-        return h("div", { key: 'a4ab64de2aa643b21c019857749b944a01d83ab8' }, "Hello, World! I'm ", this.getText());
+        return h("div", { key: 'c15c75e21319fb4723d1062aa89c6e08cc2129b3' }, "Hello, World! I'm ", this.getText());
     }
     static get is() { return "zonos-component"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,9 +27,9 @@ export class ZonosHelloDialogFooter {
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
         // 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: 'be1344c05db8a46f066a046369e46823a58385b4', class: "zonos--elements" }, h("div", { key: '3d4a17439fef92f563b5417e6db9561a9797e684', class: "zonos--hello-dialog-footer", style: {
+        return (h(Host, { key: '7480572c4e05bfc177458ab00adb774069f28d52', class: "zonos--elements" }, h("div", { key: 'bd27466c0d82be3c5cde2f89dcc48749e2313090', class: "zonos--hello-dialog-footer", style: {
                 '--zonos--primary-color': primaryColor,
-            } }, h("a", { key: 'b6bc680ca615dbb05239a099e3aff67004296a01', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'e093c21439a68c811ea6fd110e76921f4948870d', "aria-label": "Zonos Logo", autoHeight: true, content: mainColor === 'black' ? ZonosIconLight : ZonosIconDark, iconColor: mainColor, size: 108 })), h("div", { key: '8fd953e369a24c0b8f2b0a063ba8e16cfd733a74', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'c7bb2c5685e225990c67975a6fa191b4d6f4bd14', 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: 'aa89b4bbfd86de52413ff9d3cd74121d210d4f8e', 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)))));
+            } }, h("a", { key: 'f6ca08c3c4f8eef3f4b81a77ba0d5a2e6cea8f62', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'a54d33d548145f0eb542041d3903ea4a257c39bb', "aria-label": "Zonos Logo", autoHeight: true, content: mainColor === 'black' ? ZonosIconLight : ZonosIconDark, iconColor: mainColor, size: 108 })), h("div", { key: '52e06b22daaac439d5ebdcdcf44bd8f85fed4564', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '30b994c3340467a62e72f62bde853b24e3f9e4f1', 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: '26e2b5d8525d57841e2b7c1fefc69c96b21ad199', 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"; }

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

@@ -319,18 +319,18 @@ export class ZonosHelloDialog {
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: '11ed48bbde2bad56be9789726660115cca4c3855', class: "zonos--elements" }, h("div", { key: 'ecd279d309005b8f222e119725f9c60167891021', class: classes([
+        return (h(Host, { key: '9012938ffc3ab002bac78479cbcf4063526cf562', class: "zonos--elements" }, h("div", { key: 'ec6c5429694e4d18abf240c5de950b0da33ca846', 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',
-            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '94d205fc69b6121b1267433c5781408665285be5' }, h("div", { key: '342cafb1e634043b1f6d5f663d4ff7af4c70f8d9', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'cbdb975b86b1ff4268d9fb4d266d2efb389deed7', 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: 'f3247b193b881f12acce10d0dbc05b06d1267921', spacing: 24 }, h("zonos-country-flag", { key: '719c94e322c6b4ec30e3c2aeb1874816dd5052e9', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '45bad14718218a4e89e13cf50cc6c4cf04fb30e1', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: 'e17e42f358d7dd3e85b872e25bfd8429c71cccf6', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'f7dc626a99daa381a029398b0654591a6a7ef4e4', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: 'd3c64e56e515290db8778badf7bbfc575093c3ad', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), inert: !this.isOpen, ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: 'cb64ca4f4474e06f728eec751f3c7c7fae578d26' }, h("div", { key: 'c062c2482ef59df6ef60e7ccfb1716cc0cf2a19d', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: 'c36de505068bd2c4b520a20ca7110a7bd46e749d', 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: '85d246bab229099324507799eb8f771795ea92e0', spacing: 24 }, h("zonos-country-flag", { key: '602b68614bdee4120900ed184941adc4ffa40619', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '3994f7ec81cfe691f6b5f8ce83391922966a7700', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '48c7e9bf22dd30eb089b7b25a99d908dbed5966f', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'd590b3ed499b456134720ef73a965a5a552da80f', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '8bce397c8522031d46b8e6efc38986af5645c3ee', 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: 'f1c9f532220a65b080581b1dcf70507e7ef3159c', spacing: "12px" }, h("zonos-v-stack", { key: '39b12d0cafeb884771c900d25b48338522ebeceb', spacing: 12 }, this.renderHelloMessage(), additionalInformation === null || additionalInformation === void 0 ? void 0 :
-            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country icon", content: BagIcon }), h("zonos-text", { "aria-label": `Additional information for buying goods from selected country message`, innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: 'be2f1edf9a1f1220c0e6c138cafe65eae0fc7ec9', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: '37ca201defd370a60a127dc9fc6058d2724d8473' }, h("zonos-country-select", { key: 'f3c004eb15c75566ab133d4742a70b4191925ede', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'b9b0ac6125fc30f935e3675a8903044e69d5f5c7' }, h("zonos-language-select", { key: 'c4cb6f926840f69cb8e7dd8e10c6435940c4e8c5', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: '0772e7dc4499423f3a379a2cfc0b28dd23ec137e', spacing: "12px" }, h("zonos-v-stack", { key: 'ea421af6bc847eaece471f557d2d0ee1815d14bf', spacing: 12 }, this.renderHelloMessage(), additionalInformation === null || additionalInformation === void 0 ? void 0 :
+            additionalInformation.map(info => (h("div", { class: "zonos--flex-message" }, h("zonos-icon", { "aria-label": "Additional information for buying goods from selected country icon", content: BagIcon }), h("zonos-text", { "aria-label": `Additional information for buying goods from selected country message`, innerHTML: info })))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '6eed9e71407e1351053abd4a2e1b4aae75b12044', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'cb9d77a61c481100fe21714bec8d062ffaa8f974' }, h("zonos-country-select", { key: 'd76ad3cdc005561e19d64502d4c2f02173929c22', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: 'f9bbf877aba822b04676039d07ebb752d07fd362' }, h("zonos-language-select", { key: '3d96dd6902003adf96a2ce73f0405e112a04b380', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get is() { return "zonos-hello-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -328,7 +328,7 @@ export class ZonosController {
         zonosStore.organizationName = organizationName;
     }
     render() {
-        return h(Host, { key: '8ac43cd7dc03d654f554022653f3e852876b954b', class: "zonos--elements" });
+        return h(Host, { key: 'fe248e1e38cd3d98c56f55d39b704f7337c74c29', class: "zonos--elements" });
     }
     static get is() { return "zonos-controller"; }
     static get encapsulation() { return "shadow"; }

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

@@ -52,7 +52,7 @@ export class ZonosPaypalPayment {
         this.storeUnsubscribeList.forEach(unsubscribe => unsubscribe());
     }
     render() {
-        return (h(Host, { key: '503c2a2f4d6dd0d6c10468f4bbe915610cf7008e', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: 'c1d2c15bf6f096c3666f9d4e8085c5fbe2c637a7', class: "zonos--payment-paypal-container" })));
+        return (h(Host, { key: '35387382aaa81e3f8e025e8f3503be41b86e2355', class: "zonos--paypal-payment zonos--elements" }, h("div", { key: '34fad15dee67d8b913071a59d35b1c2317d4d3a0', class: "zonos--payment-paypal-container" })));
     }
     static get is() { return "zonos-paypal-payment"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/store/translationStore/strings.arabic.js

@@ -674,6 +674,9 @@ export const stringsArabic = {
     "We couldn't complete your payment. Please verify the payment details and try again.": {
         value: 'تعذر علينا اكمال الدفع. يرجى التحقق من تفاصيل الدفع وإعادة المحاولة.',
     },
+    'We detected that you are shipping to an international address.': {
+        value: 'لقد اكتشفنا أنك تقوم بالشحن إلى عنوان دولي.',
+    },
     "We've sent an email confirmation of the order details for your review. And our team is carefully preparing your order so it arrives on time.": {
         value: 'لقد أرسلنا إليك تأكيدًا بالبريد الإلكتروني لتفاصيل الطلبية لمراجعتك. ويقوم فريقنا بإعداد طلبيتك بعناية حتى تصل في الوقت المحدد.',
     },
@@ -698,6 +701,9 @@ export const stringsArabic = {
     "You will be redirected back to the merchant's site in a few seconds.": {
         value: 'سيتم إعادة توجيهك إلى موقع التاجر في غضون ثوانٍ قليلة.',
     },
+    'You will be redirected to international checkout shortly.': {
+        value: 'سيتم إعادة توجيهك إلى الخروج الدولي قريبًا.',
+    },
     "You're all set!": {
         value: 'أنت جاهز!',
     },