@zonos/elements 1.3.125 → 1.3.127

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.css

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;
@@ -85,7 +85,7 @@
   top: 50%;
 }
 :host .zonos--tab-item.selected zonos-text {
-  color: var(--color);
+  color: var(--zonos--color);
 }
 :host .zonos--tab-progress {
   width: 100%;
@@ -99,8 +99,8 @@
 }
 :host .zonos--tab-progress .zonos--progress-bar-fill {
   border-radius: 10px;
-  background-color: var(--color);
+  background-color: var(--zonos--color);
   height: 100%;
-  width: var(--progress-percent);
+  width: var(--zonos--progress-percent);
   transition: width 0.5s ease-in-out;
 }

package/dist/collection/components/common/zonos-checkout-progress-tabs/zonos-checkout-progress-tabs.js

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

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;

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

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

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;
@@ -62,8 +62,8 @@
   background: var(--zonos-elements-gray-0);
   max-width: 90vw;
   max-height: 90vh;
-  width: var(--dialog-width);
-  border-radius: var(--border-radius, 10px);
+  width: var(--zonos--dialog-width);
+  border-radius: var(--zonos--border-radius, 10px);
   outline: none;
   box-shadow: var(--zonos-elements-v3-shadow-xxl);
   border: var(--zonos-elements-border);

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

@@ -83,13 +83,13 @@ export class ZonosConfirmDialog {
         const borderStyle = getBorderRadius();
         // Get theme for the update dialog, inherit from the theme, no from this component theme
         const theme = getZonosStoreTheme(zonosStore.appearance.theme);
-        return (h(Host, { key: 'ba14f47b129207062edf7eca1f9fc5b71d689e4a', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
-                '--border-radius': borderStyle,
-                '--dialog-width': `${this.dialogWidth}px`,
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'b9eb2237cc834e23ce3b60bf2f99ad5c4d0b4ebf', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: '45b67c5a79955b579f0488f239f79a78d448482f', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '8aae5e6df9242f84fc225e687563db7aabc1751b', class: "zonos--confirm-dialog", onBlur: () => {
+        return (h(Host, { key: '6fbde5144cb14f8c418f4108037866d8d5b9a403', class: classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
+                '--zonos--border-radius': borderStyle,
+                '--zonos--dialog-width': `${this.dialogWidth}px`,
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '972e16777f091277e935ba2cf779b98c03f1b8d9', class: "zonos--backdrop", tabIndex: -1 }), h("div", { key: 'a88ae021456007ae9ddfcf6ab778539c1500afa2', "aria-hidden": "true", class: classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, h("div", { key: '1613ef615b0dc37e90858b7e91699d62e88abce7', class: "zonos--confirm-dialog", onBlur: () => {
                 this.focusDialog();
-            } }, h("div", { key: '7a1eb45d4e015a9cd1ebb7acc9fe28917153bd53', class: "wrapper" }, h("div", { key: 'd145883d1ff60117e800e4238e3f011e43173246', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '9a93b028b1d282f1d6fde264773a0f4a4d62326c', class: "content" }, h("div", { key: '92573585e3689e4fffa60d904199999e0bfa8216', class: "title" }, h("zonos-text", { key: 'eaf1f349f478f577edc6884cf9824b74d86dcbb7', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: 'aa3df64ec40031fd7599972a454cab232f57c7b9', class: "subtitle" }, h("zonos-text", { key: 'ea802033d7faf3bcd2a9c682dcdcd6588d3c9970', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'fb814639b9bbf9f284cf2def17d75ead8270c06f', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: 'fa1597ca8c4cd999c23229d0097e5c264844b8d1', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '78be0072def6bfa88a7482d3f7bbd5df53450f3d', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
+            } }, h("div", { key: '02d698138743f985dc232f19336b848b68d01fc1', class: "wrapper" }, h("div", { key: '29126adc0d48657e01bc645f2b272ae895adb053', class: "icon-wrapper" }, this.renderIcon()), h("div", { key: '2ba6eb8d4669ea346fae88bc60d79feb97aca3c2', class: "content" }, h("div", { key: 'c8b4552f75713f621bb57281b5187d13255b4a7e', class: "title" }, h("zonos-text", { key: '97543734f7870a6aec308bfc0e1b0146f77612be', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (h("div", { key: '8dec061fd863eedcde33653c2f06ce6bead894e4', class: "subtitle" }, h("zonos-text", { key: '354bd2b34a2f4673dd74569d4bde114535bdcf08', textColor: "gray-800" }, this.dialogSubtitle)))), h("div", { key: 'b0dd25b3f2848c057ea1d949bb2904fdc0850ca8', class: "footer" }, this.dialogType === 'confirm' && (h("zonos-button", { key: 'a3c9c2cd7a051aa63126d42e55d4ffbef68ffbaf', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translate('Cancel'))), h("zonos-button", { key: '4a0d517ab5932deb0cb4c78d02e28b7d8307dbe0', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
     }
     static get is() { return "zonos-confirm-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;

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

@@ -16,12 +16,12 @@ export class ZonosCountryFlag {
         const font = zonosStoreFontFamily();
         return (h(Host, { class: "zonos--elements", style: this.size
                 ? {
-                    '--font-family': font,
+                    '--zonos--font-family': font,
                     height: `${this.size}px`,
                     width: `${this.size}px`,
                 }
                 : {
-                    '--font-family': font,
+                    '--zonos--font-family': font,
                 } }, h("div", { class: classes([`flag-container`]) }, h("div", { class: "flag-icon", style: { backgroundImage: `url(${flagUrl})` } }))));
     }
     static get is() { return "zonos-country-flag"; }

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;

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

@@ -44,9 +44,9 @@ export class ZonosCountrySelect {
             ? fuseObject.map(country => country.item)
             : countries.sort((a, b) => a.displayName.localeCompare(b.displayName));
         const isEmpty = !filteredCountries.length;
-        return (h(Host, { key: '24c9ba5c24b2e02cb6c3859f5c238b62802632e2', class: "zonos--elements", style: {
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'e5e3a5b00ae72bfc4b4f24a15931070fc0a1544a', class: "zonos--country-select" }, h("zonos-v-stack", { key: '95e5dc40ea4df2428374c605c5260cb25a035b96', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'fe10347233450a3ac609d3a9126c2b61c37aa3a0', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: '327b31df73b687089ad233c93da1befa23bf915d', autocomplete: "off", autofocus: "autofocus", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), value: this.inputValue }))), h("div", { key: '96040b624228b7405cca923ca86ca8a16ae7fd10', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: 'c9e87b914cb9700ae1b849b8ada1100844ed5d7b', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: '733fac45be882421b39570153d61fc2abbacc361', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
+        return (h(Host, { key: 'd2c7e2e16fc85fc8d606110a225660e8681bb1cd', class: "zonos--elements", style: {
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '362b75ddd36ee67c0d9110353636dca3baa33ea3', class: "zonos--country-select" }, h("zonos-v-stack", { key: '5a1129ee4c1b4c4164144c510b6d694e8cbcc51c', class: "zonos--country-select-header", spacing: 8 }, h("zonos-select-dialog-header", { key: 'dc9d35418d2cfe4157cc1f15e2257841495fd94c', handleOnClose: () => this.handleOnClose(), label: translate('Select a country') }, h("input", { key: 'f6cd61f0b9b1bf4c878747c1262e7572589900df', autocomplete: "off", autofocus: "autofocus", class: "zonos--country-select-input", onInput: this.handleInputChange, placeholder: translate('Search countries'), value: this.inputValue }))), h("div", { key: '418cb6c9e1f69b6d79ea591952ac37d29618915c', class: "zonos--country-select-content" }, isEmpty && (h("zonos-text", { key: '32953d9f132413689091bfd5cb08be538f5fb1ec', class: "no-country", textColor: "gray-800" }, translate('No countries found'))), h("zonos-virtual-scroll", { key: '78c4cfdd6c53c4ea779ee6911402f148a6a0029b', class: "zonos--country-filter-content", fallbackItemHeight: 34, itemHeights: filteredCountries.map(() => 34), renderItem: index => {
                 const country = filteredCountries[index];
                 if (!country) {
                     return null;

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;

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: {
-                '--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 }))))));
+        return (h(Host, { key: '614049a461ddd3d83ac735f57de933a89d76c0e4', class: "zonos--elements", style: {
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, this.message && (h("zonos-card", { key: 'a2cd47b27b31a8b9386a69f8a0ebc4e57b9d08b4', class: "zonos--custom-message", spacing: "12px" }, h("div", { key: '6336e3d3250f0b242f629c1d3656b46966fc7e8f', class: "zonos--flex-message" }, h("zonos-icon", { key: '6ee749947941aef5f6ed1e2e2b7e37e36c7f4437', "aria-label": "Custom message icon", content: this.icon }), h("zonos-text", { key: 'c2f2981d4e91ee8bf5f981e753269b0e5f6a165e', innerHTML: messageWithLinks }))))));
     }
     static get is() { return "zonos-custom-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;
@@ -57,7 +57,7 @@
   justify-content: center;
   z-index: 2147483009;
   background: var(--zonos-elements-gray-0);
-  border-radius: var(--border-radius, var(--zonos-elements-radius-10));
+  border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-10));
 }
 :host .zonos--dialog-layout {
   width: 100vw;
@@ -77,10 +77,10 @@
   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));
+  min-height: var(--zonos--min-height, auto);
+  height: var(--zonos--height, auto);
+  width: var(--zonos--width, auto);
+  border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-10));
   outline: none;
   box-shadow: var(--zonos-elements-v3-shadow-xxl);
   border: var(--zonos-elements-border);

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

@@ -59,22 +59,22 @@ export class ZonosDialog {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: '018771d0e01311ae520abcf33fbd64316794b202', class: classes([
+        return (h(Host, { key: 'ba7a8197ab543be448706f9e9691b57738d0caae', class: classes([
                 'zonos--elements',
                 this.open && 'open',
                 this.isLoading && 'is-loading',
                 this.noBorder && 'no-border',
                 this.isMobile && 'mobile',
             ]), style: {
-                '--border-radius': borderStyle,
-                '--font-family': zonosStoreFontFamily(),
-                '--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([
+                '--zonos--border-radius': borderStyle,
+                '--zonos--font-family': zonosStoreFontFamily(),
+                '--zonos--height': this.height || 'initial',
+                '--zonos--min-height': this.minHeight || '500px',
+                '--zonos--width': this.width,
+            } }, h("div", { key: 'b930321b762118180765fa981ec36331fcf582e3', class: "zonos--backdrop" }), h("div", { key: '9e2c43b255342bf5ba2cce5a3ebd3690a855dea4', class: "zonos--dialog-layout", inert: !this.open, onClick: this.clickOutsideDialogHandler }, h("div", { key: 'ba38ab19c3af855c46cd50cf1c9aac5279158432', class: "zonos--dialog" }, this.isLoading && (h("div", { key: 'a3ee6a94bb75c349b4f724295d514d3fd2c212dd', class: "zonos--loading" }, h("zonos-spinner", { key: '91f094db949bbf1698bebc871f1ae5455f647ead', size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { key: '4804b7611ecf1eefb24126c408952941ab535ba4', class: "zonos--header" }, this.headerText && (h("h3", { key: '9e8c592e93d3c144553321f59176a2ba7b29ef95', class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { key: '35d49072fdeadf26797f9ef82d63b8448100f833', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close dialog", content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler, variant: "subtle" })))), h("div", { key: 'f74d2afc8f0296a7ef81e8a3b530fd60d92f3274', class: classes([
                 'zonos--body',
                 this.noBodyPadding && 'zonos--no-body-padding',
-            ]) }, h("slot", { key: 'd64b381cb91afde4ddbde58348a62612d9871c8e' })), h("slot", { key: '4ddd73bfe41ecd1c90b18f82a8d8f12a1eacf144', name: "dialog-footer" })))));
+            ]) }, h("slot", { key: '78138acb4bc703c5248687468621e87262b7cc90' })), h("slot", { key: 'a98f325d222c53ba779075871fcf6aad5542d743', name: "dialog-footer" })))));
     }
     static get is() { return "zonos-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;
@@ -35,8 +35,8 @@
   display: inline-flex;
 }
 :host svg {
-  width: var(--width);
-  height: var(--height);
-  fill: var(--color);
-  color: var(--color);
+  width: var(--zonos--width);
+  height: var(--zonos--height);
+  fill: var(--zonos--color);
+  color: var(--zonos--color);
 }

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

@@ -17,10 +17,10 @@ export class ZonosIcon {
             : this.iconColor;
         this.el.shadowRoot.innerHTML = this.content;
         return (h(Host, { class: "zonos--elements", style: {
-                '--color': iconColor,
-                '--font-family': zonosStoreFontFamily(),
-                '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
-                '--width': `${this.size}px`,
+                '--zonos--color': iconColor,
+                '--zonos--font-family': zonosStoreFontFamily(),
+                '--zonos--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
+                '--zonos--width': `${this.size}px`,
             } }));
     }
     static get is() { return "zonos-icon"; }

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;
@@ -42,7 +42,7 @@
   height: 100%;
   width: 100%;
   background: var(--zonos-elements-input-background);
-  border-radius: var(--border-radius);
+  border-radius: var(--zonos--border-radius);
   border: var(--zonos-elements-border);
 }
 :host .zonos--label-wrapper:hover {
@@ -55,7 +55,7 @@
   outline: none;
   transition: var(--zonos-elements-transition);
   width: 100%;
-  border-radius: var(--border-radius);
+  border-radius: var(--zonos--border-radius);
   background: var(--zonos-elements-input-background);
   border: 0;
   order: 2;
@@ -130,7 +130,7 @@
   right: 0;
   top: 0;
   bottom: 0;
-  border-radius: var(--border-radius);
+  border-radius: var(--zonos--border-radius);
 }
 :host .disabled .zonos--floated-label {
   pointer-events: inherit;

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: '402137e0e5b191d36b4d51619d29f05ef050f114', 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([
+                '--zonos--border-radius': getBorderRadius(),
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '601de098f0929c7e0e89efc63a0ffd5f9dc14428', class: classes([
                 'zonos--label-wrapper',
                 this.isDisabled && 'disabled',
-            ]) }, h("input", { key: '71659072bd58942efebb88be65ced18ad29be8ab', class: classes([
+            ]) }, h("input", { key: '151162f4e5052f1cef11efd4666dfa6e89df4b25', 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: '65f207f694763f7505c75a13a2be5c24d57ec9c1', 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.css

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;

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: {
-                '--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 })))))))));
+        return (h(Host, { key: 'eaca22844486965ba2b78c46571cdecd1f3002e7', class: "zonos--elements", style: {
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '2846ee489019e8c83d7b64b8a29dc67353b8f8c0', class: "zonos--language-select" }, h("zonos-select-dialog-header", { key: '72c36cbf777562c15346c26716e07469a5889f8d', handleOnClose: () => this.handleOnClose(), label: translate('Select a language') }), h("div", { key: 'd84fda6dc4aceaec2b3b8fda359ca60f78db448a', class: "zonos--language-select-content" }, languages.map(language => (h("button", { class: "zonos--language-select-button", onClick: () => this.languageSelected(language.code) }, h("zonos-text", { textColor: "gray-800" }, language.translatedLabel), language.code === selectedLocale && (h("zonos-icon", { content: GreenCheckDuotoneIcon, size: 16 })))))))));
     }
     static get is() { return "zonos-language-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;
@@ -35,6 +35,6 @@
   display: inline-flex;
 }
 :host img {
-  filter: var(--filter-color);
-  width: var(--width);
+  filter: var(--zonos--filter-color);
+  width: var(--zonos--width);
 }

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: {
-                '--filter-color': filterColor,
-                '--font-family': zonosStoreFontFamily(),
-                '--width': this.width,
-            } }, h("img", { key: '9202f0619fa3874a19ca3050477719b19592d82a', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+        return (h(Host, { key: 'd914d74b5aee16c30242fe3fad20b917c020b5c5', class: classes(['zonos--elements zonos--logo']), style: {
+                '--zonos--filter-color': filterColor,
+                '--zonos--font-family': zonosStoreFontFamily(),
+                '--zonos--width': this.width,
+            } }, h("img", { key: '39f9bd18354de97a358432e9daf3373dfb6914b6', alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
     }
     static get is() { return "zonos-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;
@@ -47,7 +47,7 @@
   cursor: pointer;
   transition: all 0.3s ease;
   padding: 8px;
-  border-radius: var(--border-radius, var(--zonos-elements-radius-6));
+  border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-6));
   opacity: 0;
   flex-shrink: 0.0001;
   transform: translateY(100%);

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

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
 export class ZonosNotification {
     constructor() {
         this.notificationArray = [];
@@ -45,9 +46,10 @@ export class ZonosNotification {
         }, 300);
     }
     render() {
-        return (h(Host, { key: '17c08c90c6c1dfade4e43451c196127a0f53429e', class: classes(['zonos--elements zonos--notification']), style: {
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '6624419d86a5c7518539069dbc5c9d7c08262c75', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
+        return (h(Host, { key: '6a790a39afc037ae56f8a53dc89c3fa899b2d659', class: classes(['zonos--elements zonos--notification']), style: {
+                '--zonos--border-radius': getBorderRadius(),
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '32245a784f2322fb69a65b491648a30a84b0b3d3', class: "zonos--notification-items" }, this.notificationArray.map(notification => {
             return (h("div", { "aria-hidden": "true", class: classes([
                     'zonos--notification-item',
                     notification.type,

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

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;

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: {
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '3c9bb31ade1e3343901fbb22bef5a123b3332a77', class: "zonos--restState-image" }, h("img", { key: '00417c062265b35f8603d90520f5efe677b76b19', alt: this.restStateType, onError: () => {
+        return (h(Host, { key: '49903eabc623a041c5ae876f20cc23a037d57302', class: classes(['zonos--elements zonos--restState']), style: {
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: 'd85f98a9c615057f699c3e6a3894946c28252831', class: "zonos--restState-image" }, h("img", { key: 'e28aa5192809cca36d3f395d743ef5194ec79fdb', alt: this.restStateType, onError: () => {
                 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: '09ca8ea866d82f4929587850e23e349edfbca4c0', class: "content" }, h("zonos-text", { key: 'e6a5d80825a3e73b71a7910a66a8fb9181c2fb46', class: "title", type: "boldSubheader" }, this.restStateTitle), h("zonos-text", { key: 'a109d7750dfe7e84d0e6e37d6833c288d508ed41', class: "subtitle" }, this.restStateSubtitle)), h("div", { key: 'd130db9c0c743058f5c5e6dc3477e5baf5fef5d5', class: "action" }, h("slot", { key: 'cce93629fbfe6b196a59a20850a7efc5309fd461' }))));
     }
     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.css

@@ -1,10 +1,10 @@
 :host {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   display: block;
   white-space: normal;
 }
 :host * {
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
 }
 :host img {
   max-width: 100%;

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: {
-                '--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' }))));
+        return (h(Host, { key: 'fbc386d771a9f1ee4b145b54c53a3ce31ac4aae5', class: "zonos--elements", style: {
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("zonos-v-stack", { key: 'ed5cab44fd2b06a3d700602f4cb501608205e5b6', class: "zonos--select-dialog-header-wrapper", spacing: 8 }, h("div", { key: 'c2345cdad3bd812d7add7029b1f37d2f623de310', class: "zonos--select-dialog-header" }, h("zonos-text", { key: 'c43a9009db5e83ea96bc683ff99a36c4fcdef6fc', type: "boldLabel" }, this.label), h("zonos-button", { key: '6884b1569d52688dbc74ee3772755e37eadb1e79', class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close select dialog", content: RemoveIcon, size: 20 }), noBackground: true, onClick: () => this.handleOnClose() })), h("slot", { key: '8af3df1a34ea6da62be137313e0c42cc90ba704d' }))));
     }
     static get is() { return "zonos-select-dialog-header"; }
     static get encapsulation() { return "shadow"; }