@zonos/elements 1.3.124 → 1.3.126

package/dist/collection/components/common/zonos-button/zonos-button.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%;
@@ -33,7 +33,7 @@
 
 :host {
   display: inline-flex;
-  border-radius: var(--border-radius, var(--zonos-elements-radius-10));
+  border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-10));
 }
 :host .zonos--spinner-wrapper {
   position: absolute;
@@ -60,16 +60,16 @@
   background-color: var(--zonos-elements-surface-color);
   border: none;
   outline: 1px solid var(--zonos-elements-surface-color);
-  border-radius: var(--border-radius, var(--zonos-elements-radius-10));
+  border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-10));
   transition: var(--zonos-elements-transition);
   font-weight: 500;
   user-select: none;
-  font-family: var(--font-family, Inter), Inter;
+  font-family: var(--zonos--font-family, Inter), Inter;
   letter-spacing: normal;
   cursor: pointer;
   white-space: nowrap;
   padding: 8px 24px;
-  color: var(--color, var(--zonos-elements-gray-1000));
+  color: var(--zonos--color, var(--zonos-elements-gray-1000));
   margin: 1px;
   /** Button size */
 }
@@ -97,10 +97,10 @@
 }
 :host button[disabled] {
   cursor: not-allowed;
-  background-color: var(--background-color, var(--zonos-elements-gray-200));
+  background-color: var(--zonos--background-color, var(--zonos-elements-gray-200));
 }
 :host button[disabled] .zonos--spinner-wrapper {
-  background-color: var(--background-color, var(--zonos-elements-gray-200));
+  background-color: var(--zonos--background-color, var(--zonos-elements-gray-200));
 }
 :host button:active {
   transform: scale(0.99);
@@ -138,9 +138,9 @@
   }
 }
 :host button.override-background {
-  background-color: var(--background-color, var(--zonos-elements-gray-0));
-  color: var(--color, var(--zonos-elements-gray-1000));
-  outline: 1px solid var(--background-color, var(--zonos-elements-gray-0));
+  background-color: var(--zonos--background-color, var(--zonos-elements-gray-0));
+  color: var(--zonos--color, var(--zonos-elements-gray-1000));
+  outline: 1px solid var(--zonos--background-color, var(--zonos-elements-gray-0));
 }
 :host button.override-background:disabled {
   opacity: 0.8;
@@ -236,7 +236,7 @@
 }
 :host button:not(.override-background).subtle {
   background: transparent;
-  color: var(--color);
+  color: var(--zonos--color, var(--zonos-elements-gray-1000));
   outline: none;
 }
 :host button:not(.override-background).subtle:not([disabled]):hover {

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

@@ -121,12 +121,12 @@ export class ZonosButton {
         const borderStyle = getBorderRadius({
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'd35c2874d343aa93b38cb40cbe8cdeb5c77bb97c', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
-                '--background-color': backgroundColor,
-                '--border-radius': borderStyle,
-                '--color': color,
-                '--font-family': zonosStoreFontFamily(),
-            }) }, h("button", { key: '9a964a9eb765152075c6a08008341d177e4d2879', class: classes([
+        return (h(Host, { key: 'a862db0549563c67361d2f93baf6bed668a9a561', class: classes(['zonos--elements']), "data-theme": this.theme || buttonTheme, disabled: disabled, style: styles({
+                '--zonos--background-color': backgroundColor,
+                '--zonos--border-radius': borderStyle,
+                '--zonos--color': color,
+                '--zonos--font-family': zonosStoreFontFamily(),
+            }) }, h("button", { key: 'e848c5d69708b8eee9a2be1c1649eb0f9c85dae0', class: classes([
                 this.hasIcon && 'has-icon',
                 this.hasContent && 'has-content',
                 this.noBackground && 'no-background',
@@ -141,7 +141,7 @@ export class ZonosButton {
                 backgroundColor && variant === 'standard' && 'override-background',
             ]), disabled: disabled, style: {
                 justifyContent: this.justifyContent,
-            } }, this.loading && (h("div", { key: 'bcc0ae7d419ae25477b65d4e9c26b62f7f1e1a1f', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'dcd083f67544bd05b0ca866ff19a44fc33c77715', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'c32fab50c66737462c6a2743100cd43156edab27', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+            } }, this.loading && (h("div", { key: '3d6af592a449d698a205bb327ee3f29b57a406ff', class: "zonos--spinner-wrapper" }, h("zonos-spinner", { key: 'c4e28edbbed061e57ad6c6f532887b74441e4acc', size: 16, spinnerColor: spinnerColor }))), !this.loading && !this.iconRight && this.icon, h("slot", { key: 'dbbf5f30085d61932505f8724473bb61dd67c7b7', onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
     }
     static get is() { return "zonos-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-card/zonos-card.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%;
@@ -33,10 +33,10 @@
 
 :host .styled-card {
   border: var(--zonos-elements-border);
-  border-radius: var(--border-radius, var(--zonos-elements-radius-6));
+  border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-6));
   padding: var(--spacing, 24px);
   text-align: left;
-  background-color: var(--background-color);
+  background-color: var(--zonos--background-color);
   overflow: hidden;
 }
 :host .styled-card hr {

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

@@ -22,16 +22,16 @@ export class ZonosCard {
             customRoundRadius: `${this.borderRadius}px`,
             overrideBorderStyle: 'ROUNDED',
         });
-        return (h(Host, { key: '0feaf20ca1bb493792614216aeace549a3bad708', style: {
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '9a05937c24886d73e52ef2f6bf722869247e133c', class: classes(['styled-card']), style: {
-                '--background-color': backgroundColor,
-                '--border-radius': borderRadius,
+        return (h(Host, { key: '84d131edbe30a0ce9869351c197c438082bcadac', style: {
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: 'c1ab46423b1716badf577b51c1e10a59f6d857c7', class: classes(['styled-card']), style: {
+                '--zonos--background-color': backgroundColor,
+                '--zonos--border-radius': borderRadius,
                 padding: this.spacing,
-            } }, this.label && (h("header", { key: '862b765cabe5ab5c897db18654b0be0c8ed492f3', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: 'e637d00494ba2ca7d081bd2eebcb825afc4ffa90', type: "subheader" }, this.label), h("h-stack", { key: '5174ef0a9f588d9862aca3375a3ad3269cbc0051', spacing: 8 }, this.actions))), h("slot", { key: 'b260fa53b675b0465d32deba0daaa13a0eb85ac1' }), (this.footerActions || this.footerContent) && (h("footer", { key: '0681bfa581ef37bf0a102eb1dfe9f6fd4c0d88f4', class: "card-footer", style: {
+            } }, this.label && (h("header", { key: '3f86015a24d5d86f41955c57a96c1051aa8cd0fb', class: "card-header", style: { padding: this.spacing } }, h("zonos-text", { key: '697b450d8c77935d602a2c6fc11279c38a558f8e', type: "subheader" }, this.label), h("h-stack", { key: 'ef44ce7c7d1fd3d8f683656c2156f0b24232b6c0', spacing: 8 }, this.actions))), h("slot", { key: '1e5bc6315fcc134e5a7c608547ea2f481ecb91df' }), (this.footerActions || this.footerContent) && (h("footer", { key: 'aabb9ec4c7f1122662ac13655caa4cd3557266cc', class: "card-footer", style: {
                 height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
                 padding: this.spacing,
-            } }, h("div", { key: '65271d4dd4e32a64467be17d10202cad1f302fe4' }, this.footerContent), h("h-stack", { key: 'fd1ded15a0caae9a2f781fc0f6fbf59e7768ef37', spacing: 8 }, this.footerActions))))));
+            } }, h("div", { key: 'c92b803303485ce25b66dad4237411e3c4d5c15c' }, this.footerContent), h("h-stack", { key: '12c395e0b5c537f991d6814352f62d3da15432a1', spacing: 8 }, this.footerActions))))));
     }
     static get is() { return "zonos-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/common/zonos-checkbox/zonos-checkbox.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%;
@@ -58,12 +58,12 @@
   opacity: 0;
 }
 :host .checkmark-container {
-  height: var(--size);
-  width: var(--size);
+  height: var(--zonos--size);
+  width: var(--zonos--size);
   background-color: transparent;
   border: 1.5px solid var(--zonos-elements-gray-400);
   position: relative;
-  border-radius: var(--border-radius, var(--zonos-elements-radius-4));
+  border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-4));
 }
 :host .checkmark {
   opacity: 0;
@@ -75,8 +75,8 @@
   width: calc(100% + 3px);
   transition: 0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
   transform: scale(0.4);
-  background-color: var(--background-color);
-  border-radius: var(--border-radius, var(--zonos-elements-radius-4));
+  background-color: var(--zonos--background-color);
+  border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-4));
 }
 :host input[type=checkbox]:checked ~ .checkmark-container .checkmark {
   opacity: 1;

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

@@ -36,14 +36,14 @@ export class ZonosCheckbox {
             customRoundRadius: '4px',
             overrideBorderStyle: this.borderStyle,
         });
-        return (h(Host, { key: 'be29586ffd5ae5227614622cfb402686ff5e0583', class: classes(['zonos--elements zonos--checkbox']), style: {
-                '--background-color': backgroundColor,
-                '--border-radius': borderStyle,
-                '--font-family': zonosStoreFontFamily(),
-                '--size': `${this.size}px`,
-            } }, h("label", { key: '091c2388668a94962d7b2bde4496856805f675e8', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: 'c0f66d11f63591b03631cb1c970c0db201d435e2', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
+        return (h(Host, { key: 'a863e05a6e647b9ea8ef8902a4c618f6998894cd', class: classes(['zonos--elements zonos--checkbox']), style: {
+                '--zonos--background-color': backgroundColor,
+                '--zonos--border-radius': borderStyle,
+                '--zonos--font-family': zonosStoreFontFamily(),
+                '--zonos--size': `${this.size}px`,
+            } }, h("label", { key: '2b84b59d106661937c10e76ccb1c05f887c657ec', class: classes([this.isDisabled && 'disabled']) }, h("input", { key: '1dc2037bf17c37c8f762f2ac28509e3d607c9e61', checked: this.isChecked, disabled: this.isDisabled, hidden: true, onChange: e => {
                 this.checkboxSelected.emit(e.target.checked);
-            }, type: "checkbox" }), h("span", { key: 'ab6c4847d006a812829bd8e871520455da91c7b0', class: "checkmark-container" }, h("svg", { key: '617693bef302910db463cdf95b10700b72ea8d44', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '410728b7d5edf27966e660e598f166ce8292015e', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '1b9a21e7ef15ad34684453bc25cb3744ba183cd0', size: this.fontSize }, this.label)))));
+            }, type: "checkbox" }), h("span", { key: '75175e238cbe841c11f43392797a2126d1cd65a8', class: "checkmark-container" }, h("svg", { key: '5e853c2248dd1777f0b4029a1b7beeb0fb8a0e1c', class: "checkmark", color: checkmarkColor, fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '367494224e826b903acb560cbb93f532502aa4d2', "clip-rule": "evenodd", d: "M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z", fill: "currentColor", "fill-rule": "evenodd" }))), this.label && (h("zonos-text", { key: '573cfdccbd768246996bff4eaed8064b67e90009', size: this.fontSize }, this.label)))));
     }
     static get is() { return "zonos-checkbox"; }
     static get encapsulation() { return "shadow"; }

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;