@zonos/elements 1.3.125 → 1.3.126

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout-payment/zonos-checkout-payment.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%;
@@ -84,7 +84,7 @@
   gap: 12px;
   bottom: 0;
   padding-top: 12px;
-  background: var(--primary-color, var(--zonos-elements-gray-0));
+  background: var(--zonos--primary-color, var(--zonos-elements-gray-0));
 }
 :host .zonos--group-btn zonos-text {
   text-align: center;

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.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%;
@@ -53,7 +53,7 @@
   display: flex;
   height: 100%;
   overflow: hidden;
-  border-radius: var(--border-radius, var(--zonos-elements-radius-10));
+  border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-10));
 }
 :host .zonos--content .zonos--left,
 :host .zonos--content .zonos--right {
@@ -61,7 +61,7 @@
   padding: 32px;
 }
 :host .zonos--content .zonos--left {
-  background-color: var(--primary-color, var(--zonos-elements-gray-0));
+  background-color: var(--zonos--primary-color, var(--zonos-elements-gray-0));
   border-right: 1px solid var(--zonos-elements-gray-200);
 }
 :host .zonos--content .zonos--right {
@@ -197,7 +197,7 @@
   display: flex;
   flex-direction: column;
   border: var(--zonos-elements-border);
-  border-radius: var(--border-radius, var(--zonos-elements-radius-10));
+  border-radius: var(--zonos--border-radius, var(--zonos-elements-radius-10));
   background-color: var(--zonos-elements-gray-50);
   padding: 12px;
   margin-top: 32px;

package/dist/collection/components/checkout/zonos-checkout/zonos-checkout.js

@@ -24,6 +24,7 @@ import { logError } from "../../utils/logging/logError";
 import { sendErrorLog } from "../../utils/logging/sendErrorLog";
 import { sendLoadCheckoutFacadeLog } from "../../utils/logging/sendLoadCheckoutFacadeLog";
 import { mergeConfig } from "../../utils/mergeConfig";
+import { styles } from "../../utils/styles";
 import { submitGtag } from "../../utils/submitGtag";
 import { setupCartData } from "../../../scripts/cart/_setupCartData";
 import { checkoutHiddenBtnSelector, domesticRedirectedBtnSelector, } from "../../../types/checkout/CheckoutConfig";
@@ -697,10 +698,14 @@ export class ZonosCheckout {
                 return (h("zonos-rest-state", { class: "zonos--session-timeout", restStateSubtitle: translate('Your checkout session has expired. Please reload the page to continue.'), restStateTitle: translate('Session timed out'), restStateType: 'Warning' }, h("zonos-button", { onClick: () => this.reloadCheckoutSession(), variant: "primary" }, translate('Reload'))));
             }
             return (h("div", { class: 'zonos--content', style: {
-                    '--border-radius': getBorderRadius({ overrideBorderStyle: style }),
-                } }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: {
-                    '--primary-color': !this.isMobile ? colorPrimary : '',
-                } }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: async () => {
+                    '--zonos--border-radius': getBorderRadius({
+                        overrideBorderStyle: style,
+                    }),
+                } }, cartStore.step !== 'finish' && cartStore.step !== 'error' && (h(Fragment, null, h("div", { class: "zonos--left", "data-theme": leftSideTheme, style: styles({
+                    '--zonos--primary-color': !this.isMobile
+                        ? colorPrimary
+                        : undefined,
+                }) }, !this.isMobile && renderTopHeader(), cartStore.step === 'customer-info' && (h("zonos-customer-info", { continueLoading: this.submitLoading, defaultAddress: this.defaultAddress, isMobile: this.isMobile, onContinueClicked: () => this.handleCustomerInfoContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'shipping' && (h("zonos-shipping", { continueLoading: this.submitLoading, onContinueClicked: () => this.handleShippingContinue(), submitBtnColor: submitButtonColor })), cartStore.step === 'payment' && (h("zonos-checkout-payment", { continueLoading: this.submitLoading, onContinueClicked: async () => {
                     await this.handleStripePaymentContinue();
                 }, submitBtnColor: submitButtonColor }))), h("div", { class: "zonos--right", "data-theme": rightSideTheme }, this.isMobile && renderTopHeader(), h("div", { class: "zonos--right-actions" }, window.Zonos.showBaseForeign && (h("zonos-currency-toggle", null)), !this.isLegacyCheckout && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { "aria-label": "Close checkout dialog", content: RemoveIcon }), noBackground: true, onClick: () => this.closeDialogHandler() }))), h("div", { class: "flex--wrapper" }, h("div", { class: "zonos--wrapper" }, h("zonos-review", { collapsed: this.collapseReviewMobile, mobile: this.isMobile, onClick: () => {
                     // do nothing if it's not mobile

package/dist/collection/components/checkout/zonos-checkout/zonos-customer-info/zonos-customer-info.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 @@
   bottom: -5px;
   padding-top: 8px;
   margin-top: 12px;
-  background: var(--primary-color, var(--zonos-elements-gray-0));
+  background: var(--zonos--primary-color, var(--zonos-elements-gray-0));
 }
 :host .zonos--group-btn zonos-button {
   width: 100%;

package/dist/collection/components/checkout/zonos-checkout/zonos-review/zonos-review.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/checkout/zonos-checkout/zonos-shipping/zonos-shipping.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%;
@@ -79,7 +79,7 @@
   bottom: 0;
   z-index: 1;
   margin-top: 12px;
-  background: var(--primary-color, var(--zonos-elements-gray-0));
+  background: var(--zonos--primary-color, var(--zonos-elements-gray-0));
 }
 :host .zonos--group-btn zonos-button {
   width: 100%;

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

@@ -15,16 +15,16 @@ export class ZonosBadge {
         this.dismissHandler = undefined;
     }
     render() {
-        return (h(Host, { key: '250028cd50c23400b88ae1cbfa17836ade3d501b', class: classes(['zonos--elements zonos--badge']), style: {
-                '--font-family': zonosStoreFontFamily(),
-            } }, h("div", { key: '9d2f93b0fb791c6b3390d669473261183b5662dd', class: classes([
+        return (h(Host, { key: 'ef7686107447f0d7b0fb090d1995ea66ab9d9147', class: classes(['zonos--elements zonos--badge']), style: {
+                '--zonos--font-family': zonosStoreFontFamily(),
+            } }, h("div", { key: '78dd37a1413c192fba84ba17e068cdd07bc54db1', class: classes([
                 'zonos--badge-content',
                 this.badgeColor,
                 this.rounded && 'rounded',
                 this.iconRight && 'icon-right',
                 this.size,
                 this.bold && 'bold',
-            ]) }, this.icon, h("zonos-text", { key: 'b612923e4e26d250a6f9d604e68d7d5a69f99701', textColor: `${this.badgeColor}-800` }, h("slot", { key: '71369a45f9e31e9f08cbd54a4e97d310d213a768' })), this.dismissHandler && (h("zonos-icon", { key: '256f64f95a466be5cc7d1606666067fc06dbd061', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
+            ]) }, this.icon, h("zonos-text", { key: '10ee8b496e4db3d9550d9e46859446ba4c91a823', textColor: `${this.badgeColor}-800` }, h("slot", { key: 'c9341850364d8e289d7c3569ebb41e37e2e1d99b' })), this.dismissHandler && (h("zonos-icon", { key: '85f69b0f3c31ce57978a078eb96ee856da1555a2', "aria-label": "Remove action", class: "zonos--badge-dismiss", content: RemoveLineIcon, onClick: () => { var _a; return (_a = this.dismissHandler) === null || _a === void 0 ? void 0 : _a.call(this); } })))));
     }
     static get is() { return "zonos-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,31 +29,31 @@ export class ZonosBanner {
         switch (this.intent) {
             case 'error':
                 return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
+                        '--zonos--font-family': font,
                     } }, renderContent({
                     color: 'red',
                 })));
             case 'info':
                 return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
+                        '--zonos--font-family': font,
                     } }, renderContent({
                     color: 'blue',
                 })));
             case 'success':
                 return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
+                        '--zonos--font-family': font,
                     } }, renderContent({
                     color: 'green',
                 })));
             case 'warning':
                 return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
+                        '--zonos--font-family': font,
                     } }, renderContent({
                     color: 'orange',
                 })));
             default:
                 return (h(Host, { class: baseClass, style: {
-                        '--font-family': font,
+                        '--zonos--font-family': font,
                     } }, renderContent({
                     color: 'gray',
                 })));

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