@zonos/elements 1.3.125 → 1.3.126

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"; }

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.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%;
@@ -37,7 +37,7 @@
 }
 :host input {
   margin: 0;
-  accent-color: var(--selected-border-color, var(--zonos-elements-blue-600));
+  accent-color: var(--zonos--selected-border-color, var(--zonos-elements-blue-600));
 }
 :host .zonos--shipping-rich-radio-item {
   display: flex;
@@ -49,18 +49,18 @@
   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));
+  border-top-left-radius: var(--zonos--border-radius, var(--zonos-elements-radius-10));
+  border-top-right-radius: var(--zonos--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));
+  border-bottom-right-radius: var(--zonos--border-radius, var(--zonos-elements-radius-10));
+  border-bottom-left-radius: var(--zonos--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: 1px solid var(--zonos--selected-border-color, var(--zonos-elements-blue-600));
   outline-offset: -1px;
 }
 :host .zonos--shipping-info {

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.js

@@ -15,10 +15,10 @@ export class ZonosShippingRichRadio {
                 ? `var(--zonos-elements-${usedColor})`
                 : usedColor;
             return {
-                '--border-radius': getBorderRadius({
+                '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderStyle,
                 }),
-                '--selected-border-color': secondaryColor || 'unset',
+                '--zonos--selected-border-color': secondaryColor || 'unset',
             };
         };
         this.items = undefined;
@@ -29,7 +29,7 @@ export class ZonosShippingRichRadio {
     }
     render() {
         var _a;
-        return (h(Host, { key: '74cb16ff6cfde65b626ef902c456b967af649f6d', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
+        return (h(Host, { key: '34abb7026ed7d382870f912b5e5c5631e4f06f76', class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: Object.assign(Object.assign({}, this.getRadioItemStyleVariables()), { '--zonos--font-family': zonosStoreFontFamily() }) }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             var _a;
             const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
             return (h("div", { "aria-hidden": "true", class: classes([

package/dist/collection/components/common/zonos-spinner/zonos-spinner.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%;
@@ -34,13 +34,13 @@
 :host {
   position: relative;
   overflow: hidden;
-  width: var(--size);
-  height: var(--size);
+  width: var(--zonos--size);
+  height: var(--zonos--size);
   display: inline-flex;
 }
 :host svg {
-  width: var(--size);
-  height: var(--size);
+  width: var(--zonos--size);
+  height: var(--zonos--size);
   stroke: var(--zonos-elements-blue-600);
   animation: rotate 2s linear infinite;
 }

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

@@ -10,7 +10,7 @@ export class ZonosSpinner {
             return null;
         }
         return (h(Host, { class: classes(['zonos--elements', this.spinnerColor]), style: {
-                '--size': `${this.size}px`,
+                '--zonos--size': `${this.size}px`,
             } }, h("svg", { viewBox: "0 0 50 50" }, h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
     }
     static get is() { return "zonos-spinner"; }

package/dist/collection/components/common/zonos-text/zonos-text.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%;
@@ -32,7 +32,7 @@
 }
 
 :host {
-  color: var(--color);
+  color: var(--zonos--color);
 }
 
 :host(.zonos--text-size-3xl) > *, :host(.zonos--text-size-3xl) {
@@ -52,7 +52,7 @@
 }
 
 :host(.zonos--text-size-base) > *, :host(.zonos--text-size-base) {
-  font-size: var(--font-size-base, var(--zonos-elements-font-size-base));
+  font-size: var(--zonos--font-size-base, var(--zonos-elements-font-size-base));
 }
 
 :host(.zonos--text-size-s) > *, :host(.zonos--text-size-s) {

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

@@ -46,9 +46,9 @@ export class ZonosText {
                 `zonos--text-size-${textSize}`,
                 `zonos--text-weight-${textWeight}`,
             ]), style: styles({
-                '--color': actualTextColor,
-                '--font-family': zonosStoreFontFamily(),
-                '--font-size-base': zonosStore.appearance.fontSize
+                '--zonos--color': actualTextColor,
+                '--zonos--font-family': zonosStoreFontFamily(),
+                '--zonos--font-size-base': zonosStore.appearance.fontSize
                     ? `${zonosStore.appearance.fontSize}px`
                     : undefined,
             }) }, renderText()));

package/dist/collection/components/common/zonos-toggle/zonos-toggle.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%;