@zonos/elements 1.3.40 → 1.3.42

package/dist/cjs/zonos-link.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef8b2c76.js');
+const index = require('./index-d56e0a8b.js');
 
 const zonosLinkCss = ":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{display:inline-block}:host a{padding-bottom:2px;color:var(--zonos-elements-primary);-webkit-box-shadow:none;box-shadow:none;text-decoration:none;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word}:host a:link,:host a:visited{color:var(--zonos-elements-primary);-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out}:host a:hover,:host a:active{color:var(--zonos-elements-primary);-webkit-box-shadow:0 1px 0 var(--zonos-elements-primary);box-shadow:0 1px 0 var(--zonos-elements-primary)}";
 const ZonosLinkStyle0 = zonosLinkCss;
@@ -16,7 +16,7 @@ const ZonosLink = class {
         this.linkTitle = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'bba0da02c0dee468bd0cacd268f339f7ec4f1008', class: "zonos--elements" }, index.h("a", { key: '19515197e397b2b24237e77d3e89de75382c14e1', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: '63d597a3091e954c9302e461030646b38ee2396e' }))));
+        return (index.h(index.Host, { key: 'a5913bea95608f1f1a95186664d2032a4aff66ec', class: "zonos--elements" }, index.h("a", { key: 'dffb72ba6d1820669b1dbd9e841a242cbe58d860', href: this.href, rel: this.rel, target: this.target, title: this.linkTitle }, index.h("slot", { key: '774219d208dce4b32dcc715b827b1d85fc5dfe5e' }))));
     }
 };
 ZonosLink.style = ZonosLinkStyle0;

package/dist/cjs/zonos-logo.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef8b2c76.js');
-const zonosStore = require('./zonosStore-b6c72408.js');
+const index = require('./index-d56e0a8b.js');
+const zonosStore = require('./zonosStore-56401fdb.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosLogoCss = ":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{display:-ms-inline-flexbox;display:inline-flex}:host img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";
@@ -19,11 +19,11 @@ const ZonosLogo = class {
         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 (index.h(index.Host, { key: '08ef20244bc204125a7a308efed42cd7fc86c885', class: classes.classes(['zonos--elements zonos--logo']), style: {
+        return (index.h(index.Host, { key: '8737fef033ef8114ca67be72b2f598897a6929b3', class: classes.classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStore.zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, index.h("img", { key: '9202f0619fa3874a19ca3050477719b19592d82a', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
+            } }, index.h("img", { key: 'd5a15f2f8f891f865c7eb46268ae2f113ad1d3b4', alt: "Zonos Logo", src: index.getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get assetsDirs() { return ["assets"]; }
 };

package/dist/cjs/zonos-notification_3.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef8b2c76.js');
-const zonosStore = require('./zonosStore-b6c72408.js');
+const index = require('./index-d56e0a8b.js');
+const zonosStore = require('./zonosStore-56401fdb.js');
 const classes = require('./classes-b7918f56.js');
-const cart = require('./cart-775440b7.js');
+const cart = require('./cart-99a1ed87.js');
 const logError = require('./logError-4e2f2020.js');
-const paypal = require('./paypal-25c84e33.js');
-require('./isDarkColor-5f56770b.js');
-require('./getBorderRadius-9ae7890c.js');
+const paypal = require('./paypal-5509a76f.js');
+require('./isDarkColor-4eb96a1e.js');
+require('./getBorderRadius-4413e191.js');
 
 const zonosNotificationCss = ":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{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999999;bottom:24px;gap:8px;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:8px;border-radius:var(--border-radius, var(--zonos-elements-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--zonos-elements-green-700)}:host .zonos--notification-item.error{background-color:var(--zonos-elements-red-700)}:host .zonos--notification-item.warning{background-color:var(--zonos-elements-orange-700)}";
 const ZonosNotificationStyle0 = zonosNotificationCss;
@@ -110,7 +110,7 @@ const ZonosPayment = class {
     }
     render() {
         // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-        return (index.h(index.Host, { key: 'a6df9bab4826d7c4e4027bf6b7e58f176cb25ca1', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: 'a2f3d1288537a8e63c26bef9c87cae7f3a6f94fa', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '4e30103e4b6fa407450afc71474b663377233310', class: "zonos--payment-component" }), index.h("div", { key: '66a9798018fb25e86933a839014ed0d2ed16d8b3', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: 'ab601d9a0cc6fe2fee19f45d6321dcc81b418cff', class: "zonos--payment zonos--elements" }, this.titleText && (index.h("zonos-text", { key: '27857c99c59e4913fa403ef5b23b5b7d7f32bd45', class: "zonos--title", type: "semiBoldLabel" }, this.titleText)), index.h("div", { key: '329b5a5617f0c5942b209df1ccf3bfcb4ddabb0c', class: "zonos--payment-component" }), index.h("div", { key: '7abb08922e9f607314713fc9fa762a3bb8a35b13', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -164,7 +164,7 @@ const ZonosPaypalPayment = class {
         void this.loadPaypal();
     }
     render() {
-        return (index.h(index.Host, { key: '036a9d43da99e1c08293936d89ca5f97d5acdf10', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: 'f38290dce670024e001d8219d2d8d1e9fde1f9e2', class: "zonos--payment-paypal-container" })));
+        return (index.h(index.Host, { key: 'a09fe5b66b1ac971c10529ecb6213479f2870f08', class: "zonos--paypal-payment zonos--elements" }, index.h("div", { key: '6ba337785b8a90965e0cba05fd62681bc92633fe', class: "zonos--payment-paypal-container" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/zonos-shipping-rich-radio.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef8b2c76.js');
-const zonosStore = require('./zonosStore-b6c72408.js');
+const index = require('./index-d56e0a8b.js');
+const zonosStore = require('./zonosStore-56401fdb.js');
 const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-9ae7890c.js');
+const getBorderRadius = require('./getBorderRadius-4413e191.js');
 const isColorVariable = require('./isColorVariable-6f5a9608.js');
 
 const zonosShippingRichRadioCss = ":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{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--zonos-elements-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:16px;-ms-flex-align:center;align-items:center;gap:16px;cursor:pointer;border:1px solid var(--zonos-elements-gray-200)}:host .zonos--shipping-rich-radio-item:first-child{border-top-left-radius:var(--border-radius, var(--zonos-elements-radius-10));border-top-right-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--shipping-rich-radio-item:last-child{border-bottom-right-radius:var(--border-radius, var(--zonos-elements-radius-10));border-bottom-left-radius:var(--border-radius, var(--zonos-elements-radius-10))}:host .zonos--shipping-rich-radio-item:not(:last-child){border-bottom:none}:host .zonos--shipping-rich-radio-item.selected{outline:1px solid var(--selected-border-color, var(--zonos-elements-blue-600));outline-offset:-1px}:host .zonos--shipping-info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";

package/dist/cjs/zonos-text.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef8b2c76.js');
-const zonosStore = require('./zonosStore-b6c72408.js');
+const index = require('./index-d56e0a8b.js');
+const zonosStore = require('./zonosStore-56401fdb.js');
 const classes = require('./classes-b7918f56.js');
 const isColorVariable = require('./isColorVariable-6f5a9608.js');
 

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ef8b2c76.js');
-const zonosStore = require('./zonosStore-b6c72408.js');
+const index = require('./index-d56e0a8b.js');
+const zonosStore = require('./zonosStore-56401fdb.js');
 const classes = require('./classes-b7918f56.js');
 
 const zonosVStackCss = ":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 .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
@@ -15,9 +15,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: '8cdee94089af0eac57784a7914e169f363472577', style: {
+        return (index.h(index.Host, { key: 'e542ff8bbefa3223f157ad4bd6e537af8e5d5a5d', style: {
                 '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'd60da826d77b4cf7e5349b75927fc746f0053ddd', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: '97b0e8232cbac73938225e1310712c1607997073' }))));
+            } }, index.h("div", { key: '9bd1cc8fdf94265d7d2767d507af7ad21d77234d', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'c8a294410e4c1348405c53283cf4dba176d5b27b' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

package/dist/cjs/{zonosStore-b6c72408.js → zonosStore-56401fdb.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-ef8b2c76.js');
+const index = require('./index-d56e0a8b.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/dist/collection/collection-manifest.json

@@ -38,6 +38,7 @@
     "components/common/zonos-text/zonos-text.js",
     "components/common/zonos-tooltip/zonos-tooltip.js",
     "components/common/zonos-v-stack/zonos-v-stack.js",
+    "components/common/zonos-virtual-scroll/zonos-virtual-scroll.js",
     "components/component-template/zonos-component/zonos-component.js",
     "components/hello/zonos-hello/zonos-hello.js",
     "components/hello/zonos-hello-dialog/zonos-hello-dialog.js",

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

@@ -51,6 +51,14 @@
   padding: 16px;
   padding-top: 0px;
 }
+:host .zonos--country-select .zonos--country-select-content .no-country {
+  position: absolute;
+  left: 17px;
+}
+:host .zonos--country-select .zonos--country-select-content .zonos--country-filter-content {
+  height: 300px;
+  display: block;
+}
 :host .zonos--country-select .zonos--country-select-country {
   display: flex;
   gap: 16px;

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

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import Fuse from "fuse.js";
 import { localizationStore, localizationStoreUpdateSelectedCountryCode, } from "../../store/hello/localization";
+import { translate } from "../../store/translationStore";
 import { zonosStoreFontFamily } from "../../store/zonosStore";
 // eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
 import GreenCheckDuotoneIcon from "./assets/greenCheckDuotone.svg";
@@ -16,7 +17,7 @@ export class ZonosCountrySelect {
             const input = event.target;
             this.inputValue = input.value;
             // query the country list container
-            const countryListSelector = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-select');
+            const countryListSelector = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-filter-content');
             // scroll to top every time the input changes
             if (countryListSelector) {
                 countryListSelector.scrollTop = 0;
@@ -28,21 +29,30 @@ export class ZonosCountrySelect {
     componentDidRender() {
         var _a, _b;
         // focus the input on render
-        (_b = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-select-input')) === null || _b === void 0 ? void 0 : _b.focus();
+        (_b = (_a = this.ele.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--country-filter-input')) === null || _b === void 0 ? void 0 : _b.focus();
     }
     render() {
         const { helloCountryList } = localizationStore;
         const countries = helloCountryList ? Object.values(helloCountryList) : [];
         const fuse = new Fuse(countries, {
+            includeScore: true,
             keys: ['displayName'],
+            threshold: 0.3,
         });
         const fuseObject = fuse.search(this.inputValue.toLowerCase());
         const filteredCountries = this.inputValue
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
-        return (h(Host, { key: '2337dcb4bbca5520cb6a4e9426167916c548ef59', class: "zonos--elements", style: {
+        const isEmpty = !filteredCountries.length;
+        return (h(Host, { key: 'd6d6a0736660d0c6e76f749f8ea78a8c95825b88', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '7cb0f80536b6e89f23be24cc4860e84bfa7ab362', class: "zonos--country-select" }, h("zonos-v-stack", { key: 'fef186dbafd5e4d16e6f1486d3122c1297ef7f2d', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '19ad548f3ab7aa6afdeaacd48d8b7c5821ba13e1', handleOnClose: () => this.handleOnClose(), label: "Select a country" }, h("input", { key: 'f7367680dbde6fb432dc778aed5a94291d1226c4', class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: "Search countries", value: this.inputValue }))), h("div", { key: 'e0765ab18a86a913edd7eec82452c0a9e5291f86', class: "zonos--country-select-content" }, filteredCountries.map(country => (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 })))))))));
+            } }, h("div", { key: '0bc3773965c49f0ee4da2056b6acc0ae361e227a', class: "zonos--country-select" }, h("zonos-v-stack", { key: '9e00877189dc39b789861c0425702d276cdad410', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: '9c098afdf6db8ef8e18dc855e19ab6d45b7db8be', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: '10c59b07a42da02fb348e289dc0211ae33b96638', autocomplete: "off", autofocus: "autofocus", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), value: this.inputValue }))), h("div", { key: 'fec8fb874726377a3c4a03ac5d264fc7d8a94a21', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: '182fb6955798519e63d63121752bc65ac6045770', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: '3ccda154b37344857595d65ce3131ca6d2610a11', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
+                const country = filteredCountries[index];
+                if (!country) {
+                    return null;
+                }
+                return (h("button", { class: "zonos--country-select-country", onClick: () => this.countrySelected(country.code) }, h("zonos-country-flag", { class: "zonos--country-flag", countryCode: country.code }), h("zonos-text", { textColor: "gray-800" }, country.displayName), country.code === localizationStore.selectedCountryCode && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 20 }))));
+            } })))));
     }
     static get is() { return "zonos-country-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,9 +8,9 @@ export class ZonosCustomMessage {
     }
     render() {
         const messageWithLinks = formatStringWithLinks(this.message);
-        return (h(Host, { key: '37b59a5aad442e9c20b8ed03672c73c315b45538', class: "zonos--elements", style: {
+        return (h(Host, { key: 'd6d31b58cf5396c136d81a5969b418c79229c930', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, this.message && (h("zonos-card", { key: '5de7e44deb7c0544789a9d2b306fc8b2cad338b8', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: 'c911e94eb1d7cbaf1db2126d14a6eeed8932ff97', class: "zonos--flex-message" }, h("zonos-icon", { key: '35c7f483046b78e9dffe87370d6b2f9435bc0ec1', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'fdbc136b2a01fd5df35a3b01aa82bb9d088083e0', innerHTML: messageWithLinks }))))));
+            } }, this.message && (h("zonos-card", { key: '4c62131117e23bbe475fb6f59a5e9bba8bc7d552', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '7ec3cbde2204fe0fa3b52844109bf0379677d567', class: "zonos--flex-message" }, h("zonos-icon", { key: 'cad94039767bd3d93fe9995aee34e8eb42fb707c', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'f5bd77fafded83fefd99c45f0a78cf5c72459e47', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@ export class ZonosDialog {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '018771d0e01311ae520abcf33fbd64316794b202', class: classes([
+        return (h(Host, { key: '03735385e07c7f6c8a87df42ad95f8c9d9533668', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
@@ -71,10 +71,10 @@ export class ZonosDialog {
                 '--height': this.height || 'initial',
                 '--min-height': this.minHeight || '500px',
                 '--width': this.width,
-            } }, h("div", { key: 'a86c9f8465054fde894bbdd71149e59d97e8cbcf', class: "zonos--backdrop" }), h("div", { key: 'b2f0c86fa0e768474ba4d522f8c2b8157f89cd56', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '26cd8a7b98d38c53dcf4789c8781f0c1ced99633', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '34d0ba841a9af9ca2ff6d21d0471113cc86cdec3', class: "zonos--loading" }, h("zonos-spinner", { key: '0109778b1a9734de0959035e3975414fb1cac1be', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: 'f80a4c337727500ee1ad92c1d80d7b3088eccc0f', class: "zonos--header" }, this.headerText && (h("h3", { key: '92b078fbbcd9ca5f8bf178fc67f2bee817d1e961', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '698e45fffd466f22b6179aa220d35fe39ee5374c', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: 'a4012e5a48d5fbcc77cac038d8a39fe05f332008', class: classes([
+            } }, h("div", { key: 'da5d599e1a247f7e3364e6f5c9b2eae3db9539f5', class: "zonos--backdrop" }), h("div", { key: 'cda1a996d9521c2e0b307f7a03ca3ee3d4915b8d', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: '471d8a069d4f580233bdb3e9e971efdb268ef57d', class: "zonos--dialog" }, this.isLoading && (h("div", { key: '57220007aabcaef133c2c0782fa238cc43d63964', class: "zonos--loading" }, h("zonos-spinner", { key: '0298b754341abd61ec07706128d05df5332f915d', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '5103dbc1c7593a8042505f767d8290825f9d10e7', class: "zonos--header" }, this.headerText && (h("h3", { key: 'a2d9cd4c8cb359aa64cf104a172ca960068c20a0', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: 'de9bf8a949344d19fcb8bfb496719282553be194', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: '1ec2cdca0f186cd0b28602580022ed0cb4b0eec9', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: 'd64b381cb91afde4ddbde58348a62612d9871c8e' })), h("slot", { key: '4ddd73bfe41ecd1c90b18f82a8d8f12a1eacf144', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '5071d921f48bf792a951a390d83b121e32771668' })), h("slot", { key: 'c1818ac301afc845f5b14fd0f2ac9a1fd3a27b99', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,17 +17,17 @@ export class ZonosInput {
         this.inputChange.emit(newValue);
     }
     render() {
-        return (h(Host, { key: 'f4b7ad75b2aebce3bc05a482fe20fee290a3a4e7', class: classes([
+        return (h(Host, { key: '66ab3a9ec4ac4f78e448008824471cecd4775e78', class: classes([
                 'zonos--input zonos--elements',
                 this.inputSize,
                 this.isError && 'has-error',
             ]), style: {
                 '--border-radius': getBorderRadius(),
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '356e16c11c1cd9edf137f69978ebaa3eb2c28d4e', class: classes([
+            } }, h("div", { key: 'cef0295dea117c8bf0b8f3dc090f7c34648b9b31', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: '71659072bd58942efebb88be65ced18ad29be8ab', class: classes([
+            ]) }, h("input", { key: 'a5c9e0791292046e9520bf8d186f6dc76a23ba64', class: classes([
                 'zonos--floated-input',
                 !!this.inputLabel && 'has-label',
                 this.inputValue && 'has-content',
@@ -35,7 +35,7 @@ export class ZonosInput {
             ]), disabled: this.isDisabled, onInput: e => {
                 const input = e.target;
                 this.inputChange.emit(input.value);
-            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: 'b84c60836fc969c23aedc314c67337e8e87f2ab6', class: "zonos--floated-label", "data-label": this.inputLabel }))));
+            }, placeholder: this.inputPlaceholder, type: "text", value: this.value }), h("label", { key: '25f51d372fdb0819fe316bcbfce429d63ded358f', class: "zonos--floated-label", "data-label": this.inputLabel }))));
     }
     static get is() { return "zonos-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,9 +16,9 @@ export class ZonosLanguageSelect {
     }
     render() {
         const { selectedLocale } = localizationStore;
-        return (h(Host, { key: '6682af3d631bac1a8d3783418c30364ff7694792', class: "zonos--elements", style: {
+        return (h(Host, { key: '448f89b5870956b6e9455968134b94c9409a983d', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '9f7e60bc5c4e9d1c0cc31afcbbaec444a7da630e', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: 'f790ef85eeb0bed05773d98793437ab4d6e64c8d', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '7385a1134b21ae4b39947483ee643da021e6c54c', 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: '23841aa801d68da4b537cfaab5ea89405ec66a9f', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '5fc1b45aa0cb27c94163c2dace5ce4ad63215dfc', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: '7030fb276a05eea0e7333add3219b5316495662c', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
     static get is() { return "zonos-language-select"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -10,11 +10,11 @@ export class ZonosLogo {
         const filterColor = this.theme === 'DARK'
             ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
             : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-        return (h(Host, { key: '08ef20244bc204125a7a308efed42cd7fc86c885', class: classes(['zonos--elements zonos--logo']), style: {
+        return (h(Host, { key: '8737fef033ef8114ca67be72b2f598897a6929b3', class: classes(['zonos--elements zonos--logo']), style: {
                 '--filter-color': filterColor,
                 '--font-family': zonosStoreFontFamily(),
                 '--width': this.width,
-            } }, h("img", { key: '9202f0619fa3874a19ca3050477719b19592d82a', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+            } }, h("img", { key: 'd5a15f2f8f891f865c7eb46268ae2f113ad1d3b4', 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: 'c6b1e581578da852f6ff852c0c8ff48eba97c82b', class: classes(['zonos--elements zonos--restState']), style: {
+        return (h(Host, { key: 'a87be11591bfc71ad5133ceeea1f6b396cd98055', class: classes(['zonos--elements zonos--restState']), style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '3c9bb31ade1e3343901fbb22bef5a123b3332a77', class: "zonos--restState-image" }, h("img", { key: '00417c062265b35f8603d90520f5efe677b76b19', alt: this.restStateType, onError: () => {
+            } }, h("div", { key: 'c317f01e0ac745e6ef91df1247b98c72aa340ce8', class: "zonos--restState-image" }, h("img", { key: '34947c09f8bcb76b21a547d8f5e0aa88d957a760', alt: this.restStateType, onError: () => {
                 this.isErrorImageLoad = true;
-            }, src: imageUrl })), h("div", { key: '503346f06d25e04a1bc1bbfb770359817854cd64', class: "content" }, h("zonos-text", { key: 'eb580484efd22fd93530d43d04889569ced27fba', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '34972cd05b26b01b1e7877a80b79d6729b63b025', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '703bfa3740b94e7d742804cd073347ba5f6a8855', class: "action" }, h("slot", { key: 'd0b330b60ad98bda20d35cc6802412d24ab6c536' }))));
+            }, src: imageUrl })), h("div", { key: '6e5ea4207cafd572ad947e10526d20c38b24764f', class: "content" }, h("zonos-text", { key: '2dcb142426419451a0543ef2a110d7e8c713879f', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: '440fe0d032979b56316cc9dc58c67d2c62795f3a', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: '2c9d2542bee1dc37202204529d8dd09b9c0592fa', class: "action" }, h("slot", { key: 'a50f0d183dd80a5c8509c8d3b839e342c661a33f' }))));
     }
     static get is() { return "zonos-rest-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,9 +8,9 @@ export class ZonosSelectDialogHeader {
         this.label = '';
     }
     render() {
-        return (h(Host, { key: '21cd3c3e35baf172ecad7f47a76810e8f39bdeff', class: "zonos--elements", style: {
+        return (h(Host, { key: '8ac4e1bcd64f6a2073e1161fec76c9b117345ada', class: "zonos--elements", style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("zonos-v-stack", { key: '0470633326b6fca9b45a8be67e0d77819561f634', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '8713cbf368658af22bb88825d32175117d47c95b', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '2f94e9f6139570398897ca55934c5244df7f82e8', type: "boldLabel" }, this.label), h("zonos-button", { key: 'c247dabcc8f487a4cc5a814fb1aa4d9a68fa4ba3', 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: '26727e634ec09a3b9e3912ada3b920a87a1ba4d0' }))));
+            } }, h("zonos-v-stack", { key: 'fe4a184a8bed7aceb4c3f8d341fed50380587c77', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: '2176069a11ba20c7408ef898044f2ba68eea4a80', class: "zonos--select-dialog-header" }, h("zonos-text", { key: '45b9d890484881a15c4fa7a7e4028f9887cc942e', type: "boldLabel" }, this.label), h("zonos-button", { key: '65f0d9ea7b6dee35d23aa6fca19fd686190b667f', 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: '758fce95d668ad755745687d3fcf1a6a307061bc' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,10 +7,10 @@ export class ZonosTooltip {
         this.showTooltip = false;
     }
     render() {
-        return (h(Host, { key: 'a38f8d5dec27abcfc73f341b9451ac29c71f3e1a', class: "zonos--elements" }, h("div", { key: 'dc2d9d599437e79d61ea6a7c4dc1cbba6ab03748', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: 'a0e10b6ea75346cee1b5a42f0c35f9a86ba4f1ee' }), h("div", { key: 'bed28d732fe207e56f03ba50ea835c562c5d08cb', class: classes([
+        return (h(Host, { key: '24f3b1f73cc320540ab3700213004c267ea04658', class: "zonos--elements" }, h("div", { key: '7f52acf90cb5b9f1fd5efdc4fedc4d61a893a646', class: "zonos--tooltip", onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("slot", { key: '1871529e8b75c44a71bf1f5bc9e60b81bbc598d2' }), h("div", { key: 'c0b9c9c1b3fef5f766d2bad4c5bea48f3d6bbb6f', class: classes([
                 this.showTooltip && 'zonos--show-tooltip',
                 'zonos--tooltip-content',
-            ]) }, h("zonos-text", { key: '920ef6419d1dedd71e46be23e9a19dc1042925ce', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: '259961488d833d3728819f6ba93ea6579b0f3f9d', size: "xs", textColor: "gray-0" }, this.subtitle)))));
+            ]) }, h("zonos-text", { key: '3b106cb439877dffa101f15fb01aff980a64c7cb', size: "s", textColor: "gray-0", type: "boldLabel" }, this.label), h("zonos-text", { key: 'c0005051e6e1b614b7739718e1a262f6043d56f5', 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

@@ -7,9 +7,9 @@ export class VStack {
         this.spacing = 24;
     }
     render() {
-        return (h(Host, { key: '8cdee94089af0eac57784a7914e169f363472577', style: {
+        return (h(Host, { key: 'e542ff8bbefa3223f157ad4bd6e537af8e5d5a5d', style: {
                 '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'd60da826d77b4cf7e5349b75927fc746f0053ddd', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: '97b0e8232cbac73938225e1310712c1607997073' }))));
+            } }, h("div", { key: '9bd1cc8fdf94265d7d2767d507af7ad21d77234d', class: classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, h("slot", { key: 'c8a294410e4c1348405c53283cf4dba176d5b27b' }))));
     }
     static get is() { return "zonos-v-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,46 @@
+:host {
+  font-family: var(--font-family, Inter), Inter;
+  display: block;
+  white-space: normal;
+}
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  overflow: scroll;
+}
+:host .scroller {
+  display: inline-block;
+}
+:host .item-container {
+  position: relative;
+  display: inline-block;
+}
+:host .item-container .item {
+  position: absolute;
+}