@zonos/elements 1.3.124 → 1.3.126

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(--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

@@ -1,7 +1,8 @@
 import { h, Host } from "@stencil/core";
-import { zonosStoreFontFamily } from "../../store/zonosStore";
+import { zonosStore, zonosStoreFontFamily, } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 import { isColorVariable } from "../../utils/isColorVariable";
+import { styles } from "../../utils/styles";
 import { textOptions, } from "../../../types/styles/Text";
 export class ZonosText {
     constructor() {
@@ -44,10 +45,13 @@ export class ZonosText {
                 'zonos--elements',
                 `zonos--text-size-${textSize}`,
                 `zonos--text-weight-${textWeight}`,
-            ]), style: {
-                '--color': actualTextColor,
-                '--font-family': zonosStoreFontFamily(),
-            } }, renderText()));
+            ]), style: styles({
+                '--zonos--color': actualTextColor,
+                '--zonos--font-family': zonosStoreFontFamily(),
+                '--zonos--font-size-base': zonosStore.appearance.fontSize
+                    ? `${zonosStore.appearance.fontSize}px`
+                    : undefined,
+            }) }, renderText()));
     }
     static get is() { return "zonos-text"; }
     static get encapsulation() { return "shadow"; }

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%;

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

@@ -7,9 +7,9 @@ export class ZonosToggle {
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '20b8a280c9f318de47df0904742350f678445173', class: classes(['zonos--elements zonos--toggle']), style: {
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: 'e2e5e213922b637fda1e420f500d7e5e1c211ebb', class: "wrapper" }, this.options.map(option => {
+        return (h(Host, { key: 'c49d16b02ca854ead2b2652cc1e39a423fd67251', class: classes(['zonos--elements zonos--toggle']), style: {
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: 'cda75445836db4a4d8466e840eac952a18b3ad48', class: "wrapper" }, this.options.map(option => {
             const selected = option.value === this.value;
             return (h("button", { class: classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
                     this.toggleChanged.emit(option.value);

package/dist/collection/components/common/zonos-tooltip/zonos-tooltip.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-v-stack/zonos-v-stack.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-v-stack/zonos-v-stack.js

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

package/dist/collection/components/common/zonos-virtual-scroll/zonos-virtual-scroll.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/component-template/zonos-component/zonos-component.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/hello/zonos-hello/zonos-hello.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/hello/zonos-hello/zonos-hello.js

@@ -451,7 +451,7 @@ export class ZonosHello {
                 "mutable": false,
                 "complexType": {
                     "original": "Partial<AppearanceConfig>",
-                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
+                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; fontSize?: number | undefined; fontSizeInputLabel?: number | undefined; fontSizeInputValue?: number | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
                     "references": {
                         "Partial": {
                             "location": "global",

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-dialog-footer/zonos-hello-dialog-footer.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,7 +35,7 @@
   text-align: left;
   display: flex;
   justify-content: space-between;
-  background: var(--primary-color, var(--zonos-elements-surface-color-secondary));
+  background: var(--zonos--primary-color, var(--zonos-elements-surface-color-secondary));
   border-top: var(--zonos-elements-border);
   padding: 12px;
   align-items: center;

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

@@ -18,9 +18,9 @@ export class ZonosHelloDialogFooter {
         const language = (_b = languages.find(x => x.code === localizationStore.selectedLocale)) === null || _b === void 0 ? void 0 : _b.translatedLabel;
         // Only use gray-0 (white) when the background color is dark (apply inverted color if the element is using dark theme variable)
         const mainColor = primaryColor && isDarkColor(primaryColor) ? 'white' : 'black';
-        return (h(Host, { key: 'a9b52a67a2db1967fe6fde4f19dc8d2785469f8a', class: "zonos--elements" }, h("div", { key: '1b36f45f0f00fe2b6494fb04373b12b4848b9484', class: "zonos--hello-dialog-footer", style: {
-                '--primary-color': primaryColor,
-            } }, h("a", { key: '7ca110d30f9266d021069af41766588ffce3d2ad', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'f9f4866c18bc75577e5a3961ffdd67f48977fd68', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '2bacafbd2c2d9c79935b7a2c69ae9fd3e1ede48a', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: 'a223f6706d319da505e8f013bff6863a433effd3', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: 'aa94f1e06b80f6bec8433c3c8a7b066f0d91df08', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
+        return (h(Host, { key: 'a9b52a67a2db1967fe6fde4f19dc8d2785469f8a', class: "zonos--elements" }, h("div", { key: '83ab5c0ef0cd0d3e59d5197d8d16e5cf8b6f9c54', class: "zonos--hello-dialog-footer", style: {
+                '--zonos--primary-color': primaryColor,
+            } }, h("a", { key: 'a87d05b7a59adc9362012ea8b19df45afc5f6b33', href: "https://zonos.com", target: "_blank", title: "Zonos website" }, h("zonos-icon", { key: 'b3ff790f651daa228b67354c972577093b731f2c', "aria-label": "Zonos Logo", autoHeight: true, content: ZonosIcon, iconColor: mainColor, size: 108 })), h("div", { key: '45c168a25c0d7d03d4fe70b05b7306cf7b784cd6', class: "zonos--hello-locale-wrapper" }, h("zonos-button", { key: '7263a0906b4e226c31ba6fdfa0c66c41c557d318', buttonColor: mainColor, icon: h("zonos-icon", { "aria-label": "Open language select", content: Globe, iconColor: mainColor }), onClick: () => this.setShowLanguageSelect(true), variant: "subtle" }, language), h("zonos-button", { key: '2f1789e1f8ac23b81b4c07c47a50a44b18baccfe', buttonColor: mainColor, icon: h("zonos-country-flag", { "aria-label": "Open country select", class: "zonos--footer-country-flag", countryCode: localizationStore.selectedCountryCode }), onClick: () => this.setShowCountrySelect(true), variant: "subtle" }, localizationStore.selectedCountryCode)))));
     }
     static get is() { return "zonos-hello-dialog-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -41,7 +41,7 @@ export class ZonosHelloDialogFooter {
                 "mutable": false,
                 "complexType": {
                     "original": "Partial<AppearanceConfig>",
-                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
+                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; fontSize?: number | undefined; fontSizeInputLabel?: number | undefined; fontSizeInputValue?: number | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
                     "references": {
                         "Partial": {
                             "location": "global",

package/dist/collection/components/hello/zonos-hello-dialog/zonos-hello-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%;

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

@@ -348,7 +348,7 @@ export class ZonosHelloDialog {
                 "mutable": false,
                 "complexType": {
                     "original": "Partial<AppearanceConfig>",
-                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
+                    "resolved": "undefined | { colorPrimary?: string | undefined; colorSecondary?: string | undefined; fontFamily?: string | undefined; fontSize?: number | undefined; fontSizeInputLabel?: number | undefined; fontSizeInputValue?: number | undefined; logoUrl?: string | undefined; style?: ElementsUiStyle | undefined; theme?: ElementsUiTheme | undefined; zonosAttribution?: ZonosAttribution | null | undefined; }",
                     "references": {
                         "Partial": {
                             "location": "global",

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