@zonos/elements 1.3.18-alpha.0 → 1.3.18-alpha.2

package/dist/components/zonos-dialog2.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$1 } from './zonos-spinner2.js';
 
 const RemoveIcon = `<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#C5C6CA" fill-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" clip-rule="evenodd"/><path fill="#4D505A" fill-rule="evenodd" d="M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`;
 
-const zonosDialogCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0;top:0;background:var(--zonos-elements-backdrop-color);z-index:-999;opacity:0;visibility:hidden;position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:10002;background:var(--zonos-elements-gray-0);border-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--zonos-elements-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:10001;background:var(--zonos-elements-gray-0);max-width:90vw;max-height:90vh;min-height:500px;height:var(--height, auto);width:var(--width, auto);border-radius:var(--border-radius, var(--zonos-elements-radius-10));outline:none;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:16px 24px}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--zonos-elements-size-md);height:var(--zonos-elements-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--zonos-elements-radius-10)}:host .zonos--header .zonos--close-button:hover{background:var(--zonos-elements-hover-color)}:host .zonos--body{padding:8px 24px;max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:16px 24px}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:10001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:10002;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
+const zonosDialogCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--backdrop,:host .zonos--dialog-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:0.3s all ease;transition:0.3s all ease}:host .zonos--backdrop{width:100vw;height:100vh;left:0;top:0;background:var(--zonos-elements-backdrop-color);position:fixed}:host .zonos--loading{position:absolute;left:0;right:0;bottom:0;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:10002;background:var(--zonos-elements-gray-0);border-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--dialog-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--zonos-elements-text-color);visibility:hidden}:host .zonos--dialog{position:relative;z-index:10001;background:var(--zonos-elements-gray-0);max-width:90vw;max-height:90vh;min-height:var(--min-height, auto);height:var(--height, auto);width:var(--width, auto);border-radius:var(--border-radius, var(--zonos-elements-radius-10));outline:none;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:16px 24px}:host .zonos--header .-zonos-stencil-library--header-text{-ms-flex-positive:1;flex-grow:1}:host .zonos--header .zonos--close-button{width:var(--zonos-elements-size-md);height:var(--zonos-elements-size-md);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;border-radius:var(--zonos-elements-radius-10)}:host .zonos--header .zonos--close-button:hover{background:var(--zonos-elements-hover-color)}:host .zonos--body{padding:8px 24px;max-height:100%;height:100%;overflow:auto}:host .zonos--body.zonos--no-body-padding{padding:0}:host .zonos--footer{padding:16px 24px}:host(.open) .zonos--dialog-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:10001;opacity:0.65}:host(.open) .zonos--dialog-layout{opacity:1;z-index:10002;-webkit-transform:scale(1);transform:scale(1)}:host(.no-border) .zonos--dialog{border:none}:host(.mobile) .zonos--dialog{max-width:100vw;max-height:100vh;height:100%;width:100%;border-radius:0;-webkit-box-shadow:none;box-shadow:none;border:none}";
 const ZonosDialogStyle0 = zonosDialogCss;
 
 const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends HTMLElement {
@@ -21,6 +21,10 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
             return this.mobile || window.innerWidth <= 768;
         };
         this.closeButtonHandler = () => {
+            // Only do the action if the dialog is open
+            if (!this.open) {
+                return;
+            }
             this.closeDialog.emit();
         };
         this.clickOutsideDialogHandler = (event) => {
@@ -32,6 +36,7 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
         this.headerText = '';
         this.width = '460px';
         this.height = undefined;
+        this.minHeight = undefined;
         this.noHeader = false;
         this.noBodyPadding = false;
         this.noBorder = false;
@@ -45,6 +50,11 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
     handleWindowResize() {
         this.isMobile = this.isMobileMode();
     }
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.closeButtonHandler();
+        }
+    }
     componentDidLoad() {
         this.isMobile = this.isMobileMode();
     }
@@ -59,7 +69,7 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '48eb2701a74a7973d3502fd1fdc65ce85a6d71ed', class: classes([
+        return (h(Host, { key: 'b27bdee33f67e2209dfbd9621b95633f4af726b2', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -69,11 +79,12 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
                 '--border-radius': borderStyle,
                 '--font-family': zonosStoreFontFamily(),
                 '--height': this.height || 'initial',
+                '--min-height': this.minHeight || '500px',
                 '--width': this.width,
-            } }, h("div", { key: 'b408d792740d8854bab8ea60bd50ce894a75a836', class: "zonos--backdrop" }), h("div", { key: '04affcf48e0b209fa8dacc74039dad536ed9cd9b', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: 'c615792a60b2fa51a74af265b7c944a64e9ff18d', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '78d3b571f75c6037fdd694b4621fb9eae48d8ce0', class: "zonos--loading" }, h("zonos-spinner", { key: 'bd96037d5fe1717ebeae5b1ba27b96aa9ec9253d', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: 'cc057cbed99107d7d234d08d38e67cbf0140dc66', class: "zonos--header" }, this.headerText && (h("h3", { key: '587fff6b04981f1c24b44736b3b40044480f68ba', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '9a1944508996cd8ccb87f68ae175564528af3c4c', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { key: 'b563c1939c32489b63516cd4dd14df58a32a08cf', class: classes([
+            } }, h("div", { key: 'ca94e3347d10460973663685d9b8c0048418cb86', class: "zonos--backdrop" }), h("div", { key: 'e766937dc1899141ed7beb07e9f13a60066880a1', "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { key: '41c43bb5cf011a3a810c6116c4300ad7a713c787', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '5ca28c9f3b1f6f0742484ef5414ba60f16e1faa7', class: "zonos--loading" }, h("zonos-spinner", { key: 'e0131cd9fd3fa7a9c502e7a55b75b8c76be86fc3', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '2ef2237cb4518980eb3a5c97cc1a1ea2c87444be', class: "zonos--header" }, this.headerText && (h("h3", { key: '751e1be4417cc733dffa8a683d3f4c8774ee83f5', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '720f9250c88e0097d839276ab0d2319e31fc170b', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: 'd64547b7d802a4b14e64454ae329dbb6d88f1cfd', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: '39d66d136f630afbac7ced146d3a8ac60d3c9672' })), h("slot", { key: '5bace66c84150024d0203f89fbf8f5c263cb7472', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '96d1683414cc4a947a36c6ae28e5afb781be4dae' })), h("slot", { key: '06b8ff1ad17f74e28fc4980fbc4594dde5e4573f', name: "dialog-footer" })))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return ZonosDialogStyle0; }
@@ -82,6 +93,7 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
         "headerText": [1, "header-text"],
         "width": [1],
         "height": [1],
+        "minHeight": [1, "min-height"],
         "noHeader": [4, "no-header"],
         "noBodyPadding": [4, "no-body-padding"],
         "noBorder": [4, "no-border"],
@@ -91,7 +103,7 @@ const ZonosDialog = /*@__PURE__*/ proxyCustomElement(class ZonosDialog extends H
         "mobile": [4],
         "isLoading": [4, "is-loading"],
         "isMobile": [32]
-    }, [[9, "resize", "handleWindowResize"]]]);
+    }, [[9, "resize", "handleWindowResize"], [4, "keydown", "handleKeyDown"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -36,9 +36,9 @@ const ZonosHelloDialogFooter = /*@__PURE__*/ proxyCustomElement(class ZonosHello
         const primaryColor = (_a = this.appearanceSettings) === null || _a === void 0 ? void 0 : _a.colorPrimary;
         const footerTheme = primaryColor && isDarkColor(primaryColor) ? 'DARK' : 'LIGHT';
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
-        return (h(Host, { key: '73782964897f8b09fd603de0bdbaa8348a4117c7', class: "zonos--elements" }, h("div", { key: 'bbb22af415fd9ba14900eca3e7c1b07d5bb9e831', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
+        return (h(Host, { key: '714c0ccdaab553158a4990e24e471e0a0be64655', class: "zonos--elements" }, h("div", { key: '4c177b9120aee7ccdc242bb656399e1597b35f28', class: "zonos--hello-dialog-footer", "data-theme": footerTheme, style: {
                 '--primary-color': (_c = this.appearanceSettings) === null || _c === void 0 ? void 0 : _c.colorPrimary,
-            } }, h("a", { key: 'c4b098b21f8a6905f87457bfcfb5d1e0dee64470', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: '64d86210a96b229ddfa932bb92678ab608eb59b9', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: 'be711084541626184d7c742a8df88c1bf61c30e4', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '2f1370424b58f393a81c2c0b71669d38782cf17e', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '724e7897179be3d852a661a7109a264bb32b01b8', buttonColor: "gray-1200", icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+            } }, h("a", { key: 'cb2b3ffb8a637825c76d4b33d71fa38d20a19220', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'affb176b938a399d51ccb6ae4fb5906e31ea2ff0', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: "gray-1200", size: 108 })), h("div", { key: '4aa0ce039d196d804b26df7e2b8608252da2a478', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '088259ecd3d2271fb9a4042126886c7f4fe3a9ba', buttonColor: "gray-1200", icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: "gray-1200" }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'e20dcd573266b53341e9f21bab3b34672d4d96a1', buttonColor: "gray-1200", icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     static get style() { return ZonosHelloDialogFooterStyle0; }
 }, [1, "zonos-hello-dialog-footer", {

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { H as currencyFormat, a as localizationStore } from './stripe.js';
+import { I as currencyFormat, a as localizationStore } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { z as zonosStore } from './zonosStore.js';
 import { c as classes } from './classes.js';
@@ -193,17 +193,17 @@ const ZonosHelloDialog = /*@__PURE__*/ proxyCustomElement(class ZonosHelloDialog
         const defaultMessage = formatStringWithLinks(defaultMessageStr);
         const currentPage = this.getCurrentPageEnum();
         const filteredMessages = customMessages.filter(x => x.pageName === currentPage);
-        return (h(Host, { key: 'e54181bd2c3eb1c77d5dad36c5426f4e9ddee766', class: "zonos--elements" }, h("div", { key: '3960f91898ed2409018cbac487491f38ab0b0c5e', "aria-hidden": "true", class: classes([
+        return (h(Host, { key: 'e6432c897bf4f7c60e69f3e4e4c356be11e61842', class: "zonos--elements" }, h("div", { key: 'd18df4158ffb6be5037251a9a665739fee6a0755', "aria-hidden": "true", class: classes([
                 'zonos--hello-dialog',
                 animateLeft && 'zonos--hello-dialog-animate-from-left',
                 animateFromBottom && 'zonos--hello-dialog-animate-from-bottom',
                 !!this.mobileLocationOverride &&
                     'zonos--hello-dialog-mobile-override',
                 this.isOpen && 'zonos--hello-dialog-open',
-            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '69c9b9ebe1cdde7a43773eeabfa07e9bb842df14' }, h("div", { key: 'fcad53ed6962a775ec1cb325636db397f34f62b2', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '018c3ce79334f35d6f7c04143b2a1f14c068405f', 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: '38e19b5e803f0fcd89adf54e95f40549c93ea511', spacing: 24 }, h("zonos-country-flag", { key: '01ea29a0de53d00c9eb49e29fb8680da92656db4', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: '7a1dd895a58fdf4e008164828e6ee7bae96723ab', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: 'a1c334ba3f4e7a15de6f14d17440faae44a26498', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'dad722c938d002eaa223ef847c86bafbe1815bdc', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '1b1d7d1e3ee671fecba8ec2731ffb0f4356af1e7', spacing: 8 }, this.restrictedItems.map(item => {
+            ]), ref: el => el && (this.dialogRef = el) }, !this.showCountrySelect && !this.showLanguageSelect && (h("div", { key: '1266216272683cb9f7086190686551df57ad8741' }, h("div", { key: 'ab2cb53cd0cc4c33002ae19925e8c32ebf94e426', class: "zonos--hello-dialog-content" }, h("zonos-button", { key: '9d973abe25de4a7e18f3bf588b6f0247b8edc96d', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close Zonos Hello dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.setIsOpen(false) }), h("zonos-v-stack", { key: 'cb8eb025500c0a4eed79e690e67edc418dc6c1e1', spacing: 24 }, h("zonos-country-flag", { key: '3ceddaa0d44d9c0779124a7ea199cf12a763d82c', class: "zonos--hello-country-flag", countryCode: selectedCountryCode }), h("zonos-v-stack", { key: 'd49da8684213be9ceb686428343247d0387e61e5', class: "zonos--hello-dialog-header", spacing: 4 }, h("zonos-text", { key: '1edc2747b7760479916276ddcaf3461cc5678461', type: "boldSubheader" }, welcomeMessage), h("zonos-text", { key: 'fbb00b765b4a29230db98253c72c320e02a5fccf', innerHTML: defaultMessage, textColor: "gray-800" })), h("zonos-v-stack", { key: '0614fbd574c7832e6dee73b3e26c659c2679b714', spacing: 8 }, this.restrictedItems.map(item => {
             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: '0bef1474f44e1a60c48845562f455bfb214bcc80', spacing: "12px" }, h("zonos-v-stack", { key: '5d65f0de1641b30119463da8b42622805fef4f9b', spacing: 12 }, h("div", { key: 'f752d5a9738490220fd4c98615bc7416d38cc2d1', class: "zonos--flex-message" }, h("zonos-icon", { key: '7a9ac42800b0d35a18cc13bd611d79acd20244cf', "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", { key: '3d31748fcd4c718326ff62ea2e97088d8ab1ed3e' }, dutyDeMinimisMessage)), h("div", { key: '699d72e9efc630452bf947be8f0e44ca09819cfe', class: "zonos--flex-message" }, h("zonos-icon", { key: 'e997263930e53e22c3a4e8dd5f20e1ee3cd695e4', "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", { key: 'e1c2a5ee2718a5446a63c2b8d547848e262817f0' }, taxDeMinimisMessage)), additionalInformation && (h("div", { key: '8522ab846d9733fb8ffd3b9873e8b9650aa63b58', class: "zonos--flex-message" }, h("zonos-icon", { key: '20cb281304b9839fe7f30685949af2aa3af9721d', "aria-label": "Low value order shipping restriction", content: BagIcon }), h("zonos-text", { key: '9347d34c8fbfd9bf04ba2b6d79186263b524c2a8' }, additionalInformation))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: 'a6980cae6e361ae1f5b00ec4827127422adee301', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'be7793fb262c395ae96fa6acfe0c14fbf062b1c9' }, h("zonos-country-select", { key: '2224aade7391512826b4b9c46bd826f013945f83', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '006ac0317c9a7911c1e48f7c30f66b3e8882f6d6' }, h("zonos-language-select", { key: '1577f733b5556e7683b6c74dc111e99c77ba0649', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
+        }), h("zonos-card", { key: '05ec570de14760e8a07d9bfa7a0fca6def3bfe4b', spacing: "12px" }, h("zonos-v-stack", { key: '9b5c301c737c784bd4e7738080fe90dfc0c82bb5', spacing: 12 }, h("div", { key: '5c3691d22fefcab028c4836d2ce774609789e9f3', class: "zonos--flex-message" }, h("zonos-icon", { key: '9a498a80b3c3652f9aec2e409d30acd09b983397', "aria-label": "Duty de minimis", content: ImportIcon }), h("zonos-text", { key: 'c7b0323a0f4704a5ee29b4275cab60e7390f1f9a' }, dutyDeMinimisMessage)), h("div", { key: '5910f4b782a28777fb6fa41ae9399dfae3a8cee8', class: "zonos--flex-message" }, h("zonos-icon", { key: 'ed57f0c4e985332568c0197506ba6b07c2da5b34', "aria-label": "Tax de minimis", content: MoneyIcon }), h("zonos-text", { key: '72727be7a47c98b2b6105532d3370fbc05bfca3e' }, taxDeMinimisMessage)), additionalInformation && (h("div", { key: 'f802df72c31a9031ae737a2d2b461482354d21d8', class: "zonos--flex-message" }, h("zonos-icon", { key: '66ac284793d67089e46671aff79691f025abbc31', "aria-label": "Low value order shipping restriction", content: BagIcon }), h("zonos-text", { key: '9931ab1b57336d4d4326d8f52975566638340e01' }, additionalInformation))))), filteredMessages.map(x => (h("zonos-custom-message", { icon: MessageIcon, message: x.message })))))), h("zonos-hello-dialog-footer", { key: '81576154c1db509ea3a9f8dfbe0dfb811f49b495', appearanceSettings: this.appearanceSettings, setShowCountrySelect: value => this.setShowCountrySelect(value), setShowLanguageSelect: value => this.setShowLanguageSelect(value) }))), this.showCountrySelect && (h("div", { key: 'e9109f275db0fbd9baca229af1004de0497753d8' }, h("zonos-country-select", { key: '8ac0328e65ae7346ebe024e7bd735afdd506d120', handleOnClose: () => this.setShowCountrySelect(false) }))), this.showLanguageSelect && (h("div", { key: '5ea929a6f391b6f00d0da0e462239bff5f0550d2' }, h("zonos-language-select", { key: 'f59d0da0cb849f1bfe77184d10a713ef6b25f225', handleOnClose: () => this.setShowLanguageSelect(false) }))))));
     }
     static get assetsDirs() { return ["assets"]; }
     static get watchers() { return {

package/dist/components/zonos-hello.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as _root, e as _baseGetTag, i as isObjectLike_1, f as isObject_1, z as zonosStore, g as getZonosStoreTheme, m as mergeConfig } from './zonosStore.js';
-import { u as handleFetch, l as logError, a as localizationStore, A as isValidSelector, C as getZCountryUrlParam, D as setZCountryUrlParam, b as log, E as currencyDisplay, F as currencyConvertAndFormat, G as currencyConvert, H as currencyFormat } from './stripe.js';
+import { v as handleFetch, l as logError, a as localizationStore, B as isValidSelector, D as getZCountryUrlParam, E as setZCountryUrlParam, d as log, F as currencyDisplay, G as currencyConvertAndFormat, H as currencyConvert, I as currencyFormat } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { c as classes } from './classes.js';
 import { g as getHasMoreSpaceOnRight, d as defineCustomElement$9 } from './zonos-hello-dialog2.js';

package/dist/components/zonos-input2.js

@@ -25,17 +25,17 @@ const ZonosInput = /*@__PURE__*/ proxyCustomElement(class ZonosInput extends HTM
         this.inputChange.emit(newValue);
     }
     render() {
-        return (h(Host, { key: '97f9a886695c81bf72ffa5cc4b7afc26e40a2694', class: classes([
+        return (h(Host, { key: 'c032eae81e9183b73ed9f12ca3397786e499d8a7', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--border-radius': getBorderRadius(),
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'ffc96e546684499a5272dd0f5b4b087b1f717353', class: classes([
+            } }, h("div", { key: '54177758c126bf8d4043cc5e3dd92f0aa6e2c838', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: '162556990fe4c93fc9400f7cf947d8fdbeffd2f1', class: classes([
+            ]) }, h("input", { key: '10f853e84c278aa9d9a050548801ea366583836d', class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.inputValue && 'has-content',
@@ -43,7 +43,7 @@ const ZonosInput = /*@__PURE__*/ proxyCustomElement(class ZonosInput extends HTM
             ]), 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: '9b73d42d50090f1ac761ccf27bd606d474cd8d53', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '0f9a9fcb308f4117ec0f08a07d4de8d6f5c4fb03', class: "zonos--floated-label", "data-label": this.inputLabel }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/zonos-language-select2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { x as localizationStoreUpdateSelectedLocale, a as localizationStore } from './stripe.js';
+import { y as localizationStoreUpdateSelectedLocale, a as localizationStore } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { a as zonosStoreFontFamily } from './zonosStore.js';
 import { l as languages } from './ILanguage.js';
@@ -33,9 +33,9 @@ const ZonosLanguageSelect = /*@__PURE__*/ proxyCustomElement(class ZonosLanguage
     }
     render() {
         const { selectedLocale } = localizationStore;
-        return (h(Host, { key: 'e1943addb44b8e06d5b4534865f403a721175cdd', class: "zonos--elements", style: {
+        return (h(Host, { key: 'e719b6e5e5d52ec572525ba02c78989bfe6c6b91', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '888a410d444424f4ffb06dd28e5151bca9269de2', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '59aa5ae5e685f65baa1c7b1a19c1000ab8cdac74', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '854c44fefe28f22fdd37b251d482ca6db46b0895', 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: '5a2d7fe751fe92455f7e56bf02360ef9992baffb', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'b37d91ffc91949aac8dda2d2ec94acbdfadfcdf4', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '881a00e8bd3e4358a5c1784bd957a81917863134', 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 style() { return ZonosLanguageSelectStyle0; }
 }, [1, "zonos-language-select", {

package/dist/components/zonos-link-authentication2.js

@@ -44,7 +44,7 @@ const ZonosLinkAuthentication = /*@__PURE__*/ proxyCustomElement(class ZonosLink
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '4a7b9eb534e938f791f70e04756aa9fb1c39f2c7', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: 'cc4fe49ed6d4bd7cec502ef739b9e835e9e26584', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'f04a438d04e6ccd608d7ff61ac300fb09da4f0ce', class: "zonos--link-authentication-component" })));
+        return (h(Host, { key: '1a206ef754ae3df55e57f7b8f587bde7d04c20d3', class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { key: '7f938c30d9ee5d404df05db96b814a48786c9c83', class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { key: 'fddc855fd5eabf43a4d99532516053f0da71ae20', class: "zonos--link-authentication-component" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/zonos-logo.js

@@ -17,11 +17,11 @@ const ZonosLogo$1 = /*@__PURE__*/ proxyCustomElement(class ZonosLogo extends HTM
         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: 'c68b772cba1e8562b48a58bace45e0643bd18dcf', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: 'c790c72d413c586a873c5046a1aee797c1f0af36', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: 'a3a48b9f4dc2401d543afe0d2334b5bd57aad4d6', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: '68efd2097a0d8488308de0b50bef30cc67deb6fa', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
     static get style() { return ZonosLogoStyle0; }

package/dist/components/zonos-payment2.js

@@ -39,7 +39,7 @@ const ZonosPayment = /*@__PURE__*/ proxyCustomElement(class ZonosPayment extends
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (h(Host, { key: '7967dfeb2c8661201aed74d3d9f4be1df9eb993d', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: '2a3b744c1935f471897ab492efa7d3788907b126', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: '7d643ec935dc15339c79237572bd067efa8f23ea', class: "zonos--payment-component" })));
+        return (h(Host, { key: 'fa213e672515b2aa3e389f0e7f918350a076e493', class: "zonos--payment zonos--elements" }, this.titleText && (h("zonos-text", { key: 'ed1fa911c3765962f7a3a7ce606a334541ca0a9a', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), h("div", { key: 'afeb5892da35ae3fef9659d05a0bb77924acb7f0', class: "zonos--payment-component" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/zonos-review2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as cartStore } from './stripe.js';
+import { b as cartStoreHasOneEligibleItem, c as cartStore } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { z as zonosStore } from './zonosStore.js';
 import { i as isCheckoutMobile } from './isCheckoutMobile.js';
@@ -31,6 +31,7 @@ const ZonosReview = /*@__PURE__*/ proxyCustomElement(class ZonosReview extends H
         this.isMobile = isCheckoutMobile(this.mobile);
     }
     render() {
+        const total = cartStoreHasOneEligibleItem() ? cartStore.total : 0;
         const titleTextType = this.isMobile ? 'boldSubheader' : 'semiBoldLabel';
         const totalTextType = this.isMobile
             ? 'boldSubheader'
@@ -50,7 +51,7 @@ const ZonosReview = /*@__PURE__*/ proxyCustomElement(class ZonosReview extends H
                 'zonos--review zonos--elements',
                 this.isMobile && 'mobile',
             ]) }, h("div", { class: "zonos--title" }, h("zonos-text", { textColor: titleTextColor, type: titleTextType }, translate('Pay'), " ", zonosStore.organizationName), renderCollapseIcon()), h("div", { class: "zonos--total-pay" }, h("zonos-text", { type: totalTextType }, formatCurrency({
-            amount: cartStore.total,
+            amount: total,
             currency: cartStore.currency,
         })))));
     }

package/dist/components/zonos-select-dialog-header2.js

@@ -20,9 +20,9 @@ const ZonosSelectDialogHeader = /*@__PURE__*/ proxyCustomElement(class ZonosSele
         this.label = '';
     }
     render() {
-        return (h(Host, { key: '7b7a5a39307cfacdfda4dd622d9b7e052013f80e', class: "zonos--elements", style: {
+        return (h(Host, { key: '6bbc81e8045153c49da17c4b999bc1992aa9f01d', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '3b4152d041961241d48acfdfefe421b487fc63c1', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '9b72b53159ef2ea9ef3ac2682da24e6b2bc0f71b', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '9aee88932746e76c819d1e40ed45ba3c44a74a0a', type: "boldLabel" }, this.label), h("zonos-button", { key: '5e794ef5039bbff4f8cd52bb942a8f6c655adbe7', 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: 'ee4e5657d5034a4068b52d1f4e3a8971ccbee626' }))));
+            } }, h("zonos-v-stack", { key: 'c0184343c6cefd3c996695964800d242d1673ee1', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'ae13d39c8a0917df33aec34a10853892d9470a9c', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '32e9af076b72f63cb1ec0c92b7e77d3196572106', type: "boldLabel" }, this.label), h("zonos-button", { key: 'eb4d2f0cef4a2b0eafe628c19d0fcbac4f3493e6', 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: '98a6f0e4f44e74208b5e446ad8066b74b1f7beaa' }))));
     }
     static get style() { return ZonosSelectDialogHeaderStyle0; }
 }, [1, "zonos-select-dialog-header", {

package/dist/components/zonos-shipping2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as cartStore, y as cartStoreUpdateSelectedShippingOption, z as cartStoreGetShippingTransitInfo } from './stripe.js';
+import { c as cartStore, z as cartStoreUpdateSelectedShippingOption, A as cartStoreGetShippingTransitInfo } from './stripe.js';
 import { a as translate } from './translationStore.js';
 import { t as trackConversionEvent } from './trackConversionEvent.js';
 import { f as formatCurrency } from './formatCurrency.js';

package/dist/components/zonos-tooltip2.js

@@ -15,10 +15,10 @@ const ZonosTooltip = /*@__PURE__*/ proxyCustomElement(class ZonosTooltip extends
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: '39503dadb0422477303a6715a744478d765e6ecf', class: "zonos--elements" }, h("div", { key: '834be19e46353d018bf827327f418d3e82502cf5', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '7c8f731f548d1bcf750615be450d93004e83a369' }), h("div", { key: 'b7f02a3057f2d2f6eeb65715e64783b48cab71ea', class: classes([
+        return (h(Host, { key: 'dd98e35a2295dd72209775ce1e63d6f653913466', class: "zonos--elements" }, h("div", { key: '4bee5ca82e3a493826b723f620baa6d7cf7af63a', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '1320496e6caed5f16d940f0e5119d5f19186f565' }), h("div", { key: '2a9b891c672d03cdbe8babf59312942e101704a7', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: 'f65ede18a38c299d389403400a4ae00a0387e2cb', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'eb69da57b2e4f0e9be31801101c079618ac30148', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '0146fad3f70fa07e9eb644b26d6dd65963a70c3d', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '36e76d4624927255679107ee47022b7314479441', size: "xs", textColor: "gray-0" }, this.subtitle)))));
     }
     static get style() { return ZonosTooltipStyle0; }
 }, [1, "zonos-tooltip", {

package/dist/components/zonos-v-stack2.js

@@ -13,9 +13,9 @@ const VStack = /*@__PURE__*/ proxyCustomElement(class VStack extends HTMLElement
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: 'd6e16e46c900ee9e15cb1664a1f07133b9e82135', style: {
+        return (h(Host, { key: '3d0753111d525b29e1f36684c89b7216ee0b323f', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'f634995e617314160ecf5a432958207a43a40201', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'aa7bca0df7412bb0b8913e02ffd3617a511b9c8c' }))));
+            } }, h("div", { key: '95b732681743abc1b08b1b8bc722855c3c8e967a', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'b93347c5fb986a70f9f1d67ce2216bba84db7ba4' }))));
     }
     static get style() { return ZonosVStackStyle0; }
 }, [1, "zonos-v-stack", {

package/dist/components/zonosStore.js

@@ -2871,6 +2871,7 @@ const zonosStoreInitSetting = ({ overrideSettings, zonosSettings, }) => {
     zonosStore.organizationName = ((_b = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _b === void 0 ? void 0 : _b.name) || '';
     zonosStore.storeId = ((_d = (_c = zonosSettings === null || zonosSettings === void 0 ? void 0 : zonosSettings.organization) === null || _c === void 0 ? void 0 : _c.references) === null || _d === void 0 ? void 0 : _d.storeId) || null;
     zonosStore.currencyConverter = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.currencyConverter;
+    zonosStore.onCountryChange = overrideSettings === null || overrideSettings === void 0 ? void 0 : overrideSettings.onCountryChange;
 };
 const zonosStoreFontFamily = () => {
     const fontFamily = zonosStore.appearance.fontFamily || 'Inter';