@zonos/elements 1.3.124 → 1.3.126

package/dist/cjs/zonos-text.cjs.entry.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d56e0a8b.js');
 const zonosStore = require('./zonosStore-e12d459c.js');
 const classes = require('./classes-b7918f56.js');
-const isColorVariable = require('./isColorVariable-6f5a9608.js');
+const isColorVariable = require('./isColorVariable-525dbfa7.js');
+const styles = require('./styles-d1e64fb9.js');
 
 const textOptions = {
     pageHeader: {
@@ -107,7 +108,7 @@ const textOptions = {
     },
 };
 
-const zonosTextCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{color:var(--color)}:host(.zonos--text-size-3xl)>*,:host(.zonos--text-size-3xl){font-size:var(--zonos-elements-font-size-3xl)}:host(.zonos--text-size-2xl)>*,:host(.zonos--text-size-2xl){font-size:var(--zonos-elements-font-size-2xl)}:host(.zonos--text-size-xl)>*,:host(.zonos--text-size-xl){font-size:var(--zonos-elements-font-size-xl)}:host(.zonos--text-size-l)>*,:host(.zonos--text-size-l){font-size:var(--zonos-elements-font-size-l)}:host(.zonos--text-size-base)>*,:host(.zonos--text-size-base){font-size:var(--zonos-elements-font-size-base)}:host(.zonos--text-size-s)>*,:host(.zonos--text-size-s){font-size:var(--zonos-elements-font-size-s)}:host(.zonos--text-size-xs)>*,:host(.zonos--text-size-xs){font-size:var(--zonos-elements-font-size-xs)}:host(.zonos--text-weight-900)>*,:host(.zonos--text-weight-900){font-weight:900}:host(.zonos--text-weight-700)>*,:host(.zonos--text-weight-700){font-weight:700}:host(.zonos--text-weight-600)>*,:host(.zonos--text-weight-600){font-weight:600}:host(.zonos--text-weight-500)>*,:host(.zonos--text-weight-500){font-weight:500}:host(.zonos--text-weight-400)>*,:host(.zonos--text-weight-400){font-weight:400}";
+const zonosTextCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{color:var(--zonos--color)}:host(.zonos--text-size-3xl)>*,:host(.zonos--text-size-3xl){font-size:var(--zonos-elements-font-size-3xl)}:host(.zonos--text-size-2xl)>*,:host(.zonos--text-size-2xl){font-size:var(--zonos-elements-font-size-2xl)}:host(.zonos--text-size-xl)>*,:host(.zonos--text-size-xl){font-size:var(--zonos-elements-font-size-xl)}:host(.zonos--text-size-l)>*,:host(.zonos--text-size-l){font-size:var(--zonos-elements-font-size-l)}:host(.zonos--text-size-base)>*,:host(.zonos--text-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){font-size:var(--zonos-elements-font-size-s)}:host(.zonos--text-size-xs)>*,:host(.zonos--text-size-xs){font-size:var(--zonos-elements-font-size-xs)}:host(.zonos--text-weight-900)>*,:host(.zonos--text-weight-900){font-weight:900}:host(.zonos--text-weight-700)>*,:host(.zonos--text-weight-700){font-weight:700}:host(.zonos--text-weight-600)>*,:host(.zonos--text-weight-600){font-weight:600}:host(.zonos--text-weight-500)>*,:host(.zonos--text-weight-500){font-weight:500}:host(.zonos--text-weight-400)>*,:host(.zonos--text-weight-400){font-weight:400}";
 const ZonosTextStyle0 = zonosTextCss;
 
 const ZonosText = class {
@@ -152,10 +153,13 @@ const ZonosText = class {
                 'zonos--elements',
                 `zonos--text-size-${textSize}`,
                 `zonos--text-weight-${textWeight}`,
-            ]), style: {
-                '--color': actualTextColor,
-                '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, renderText()));
+            ]), style: styles.styles({
+                '--zonos--color': actualTextColor,
+                '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
+                '--zonos--font-size-base': zonosStore.zonosStore.appearance.fontSize
+                    ? `${zonosStore.zonosStore.appearance.fontSize}px`
+                    : undefined,
+            }) }, renderText()));
     }
 };
 ZonosText.style = ZonosTextStyle0;

package/dist/cjs/zonos-toggle.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-d56e0a8b.js');
 const zonosStore = require('./zonosStore-e12d459c.js');
 const classes = require('./classes-b7918f56.js');
 
-const zonosToggleCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .wrapper{position:relative;border-radius:6px;background-color:var(--zonos-elements-gray-50);display:-ms-flexbox;display:flex}:host .zonos--toggle-selected-slider{z-index:1;position:absolute;background-color:var(--zonos-elements-raised-surface-color);height:100%;-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard);border-radius:6px;-webkit-animation:translate 0.3s ease-in-out;animation:translate 0.3s ease-in-out}:host .zonos--option{background:transparent;border:0;z-index:2;cursor:pointer;padding:4px 12px;border-radius:6px;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);font-size:var(--zonos-elements-font-size-base);font-weight:500;color:var(--zonos-elements-text-color-secondary)}:host .zonos--option:focus{outline:none}:host .zonos--option:hover:not(.selected){color:var(--zonos-elements-text-color)}:host .zonos--option.selected{color:var(--zonos-elements-text-color);background-color:var(--zonos-elements-raised-surface-color);height:100%;-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard);border-radius:6px;-webkit-animation:translate 0.3s ease-in-out;animation:translate 0.3s ease-in-out}";
+const zonosToggleCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .wrapper{position:relative;border-radius:6px;background-color:var(--zonos-elements-gray-50);display:-ms-flexbox;display:flex}:host .zonos--toggle-selected-slider{z-index:1;position:absolute;background-color:var(--zonos-elements-raised-surface-color);height:100%;-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard);border-radius:6px;-webkit-animation:translate 0.3s ease-in-out;animation:translate 0.3s ease-in-out}:host .zonos--option{background:transparent;border:0;z-index:2;cursor:pointer;padding:4px 12px;border-radius:6px;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);font-size:var(--zonos-elements-font-size-base);font-weight:500;color:var(--zonos-elements-text-color-secondary)}:host .zonos--option:focus{outline:none}:host .zonos--option:hover:not(.selected){color:var(--zonos-elements-text-color)}:host .zonos--option.selected{color:var(--zonos-elements-text-color);background-color:var(--zonos-elements-raised-surface-color);height:100%;-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard);border-radius:6px;-webkit-animation:translate 0.3s ease-in-out;animation:translate 0.3s ease-in-out}";
 const ZonosToggleStyle0 = zonosToggleCss;
 
 const ZonosToggle = class {
@@ -17,9 +17,9 @@ const ZonosToggle = class {
         this.value = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '20b8a280c9f318de47df0904742350f678445173', class: classes.classes(['zonos--elements zonos--toggle']), style: {
-                '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'e2e5e213922b637fda1e420f500d7e5e1c211ebb', class: "wrapper" }, this.options.map(option => {
+        return (index.h(index.Host, { key: 'c49d16b02ca854ead2b2652cc1e39a423fd67251', class: classes.classes(['zonos--elements zonos--toggle']), style: {
+                '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("div", { key: 'cda75445836db4a4d8466e840eac952a18b3ad48', class: "wrapper" }, this.options.map(option => {
             const selected = option.value === this.value;
             return (index.h("button", { class: classes.classes(['zonos--option', selected && 'selected']), key: option.value, onClick: () => {
                     this.toggleChanged.emit(option.value);

package/dist/cjs/zonos-tooltip.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d56e0a8b.js');
 const classes = require('./classes-b7918f56.js');
 
-const zonosTooltipCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--tooltip{position:relative}:host .zonos--tooltip .zonos--tooltip-content{position:absolute;bottom:100%;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:12px;background-color:var(--zonos-elements-gray-1000);opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:var(--zonos-elements-radius-4);z-index:100;-webkit-box-shadow:var(--zonos-elements-v3-shadow-large);box-shadow:var(--zonos-elements-v3-shadow-large)}:host .zonos--tooltip .zonos--tooltip-content.zonos--show-tooltip{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
+const zonosTooltipCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .zonos--tooltip{position:relative}:host .zonos--tooltip .zonos--tooltip-content{position:absolute;bottom:100%;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:12px;background-color:var(--zonos-elements-gray-1000);opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:var(--zonos-elements-radius-4);z-index:100;-webkit-box-shadow:var(--zonos-elements-v3-shadow-large);box-shadow:var(--zonos-elements-v3-shadow-large)}:host .zonos--tooltip .zonos--tooltip-content.zonos--show-tooltip{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";
 const ZonosTooltipStyle0 = zonosTooltipCss;
 
 const ZonosTooltip = class {

package/dist/cjs/zonos-v-stack.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-d56e0a8b.js');
 const zonosStore = require('./zonosStore-e12d459c.js');
 const classes = require('./classes-b7918f56.js');
 
-const zonosVStackCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
+const zonosVStackCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host .vstack{display:grid;grid-auto-columns:minmax(0, 1fr);grid-row-gap:var(--spacing, 24px);grid-auto-flow:row}";
 const ZonosVStackStyle0 = zonosVStackCss;
 
 const VStack = class {
@@ -15,9 +15,9 @@ const VStack = class {
         this.spacing = 24;
     }
     render() {
-        return (index.h(index.Host, { key: 'e542ff8bbefa3223f157ad4bd6e537af8e5d5a5d', style: {
-                '--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: '9bd1cc8fdf94265d7d2767d507af7ad21d77234d', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'c8a294410e4c1348405c53283cf4dba176d5b27b' }))));
+        return (index.h(index.Host, { key: '1c12857cdab3dcbfae5135d40cbf276451bbcf81', style: {
+                '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
+            } }, index.h("div", { key: '8c88f2390c758ed9961daf1d9f5cadb3bd67b928', class: classes.classes(['vstack']), style: { 'grid-row-gap': `${this.spacing}px` } }, index.h("slot", { key: 'fa31c9a430b53b837d840827097a56acbd033b8e' }))));
     }
 };
 VStack.style = ZonosVStackStyle0;

package/dist/collection/components/checkout/zonos-checkout/zonos-address-update-dialog/zonos-address-display/zonos-address-display.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-address-update-dialog/zonos-address-form/zonos-address-form.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-address-update-dialog/zonos-address-update-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/checkout/zonos-checkout/zonos-cart-items/zonos-cart-items.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-cart-restricted-items/zonos-cart-restricted-items.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-cart-subtotal/zonos-cart-subtotal.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-checkout-finish/zonos-checkout-finish.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%;
@@ -41,7 +41,7 @@
   justify-content: center;
   align-items: center;
   margin-bottom: 24px;
-  border-radius: var(--border-radius, 10px);
+  border-radius: var(--zonos--border-radius, 10px);
   gap: 24px;
   margin-top: 24px;
   background-color: var(--zonos-elements-gray-50);

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

@@ -327,12 +327,12 @@ export class ZonosCheckoutFinish {
     }
     render() {
         const isTestMode = getIsTestMode();
-        return (h(Host, { key: 'be6d82d3f5d2b75cb3ca7676d4e9dc96958b55f9', class: "zonos--checkout-finish zonos--elements", style: {
-                '--border-radius': getBorderRadius({
+        return (h(Host, { key: 'e9e088880a1b13f821dfdb7804b2e27efae5298c', class: "zonos--checkout-finish zonos--elements", style: {
+                '--zonos--border-radius': getBorderRadius({
                     overrideBorderStyle: this.borderRadius,
                 }),
-            } }, !this.isLoading && (h("div", { key: '1e9ae0e3e835e824d3269b76f38601f1f4a4462b', class: "zonos--finish-details" }, h("div", { key: '54766c1ee7a8a81616ca1bf0e1da778250a21cec', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '310f5df77e5788f287d2815dde6d4a8af0b47370', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: 'b6725d31f0613d773e08fa451e74f32aa6708e6b', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), !window.Zonos.isLegacyCheckout &&
-            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '057ce352ad5202e120aa470875d32fca75e22487', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode && cartStore.step === 'finish' && (h("div", { key: '95acf45bb6433d04bf8fb5e36cd7a34b097b4bf9', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '0a7dc7709b0226cd9011ccbdff2820aecf3aa0f6', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '21e38b16330e375e19eb2d70f442316e89daf56f', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
+            } }, !this.isLoading && (h("div", { key: 'a1ec6900c645aedfd4f4662fa5251b5b9adebadf', class: "zonos--finish-details" }, h("div", { key: '6e08efc67a101ca4af34c67d853709d1f4f0f436', class: "zonos--group" }, this.notificationType === 'success' ? (h("zonos-icon", { "aria-label": "Order success", content: SuccessIcon, iconColor: 'blue-800', size: 50 })) : (h("zonos-icon", { "aria-label": "Order failed", content: RemoveIcon, iconColor: 'red-800', size: 50 })), h("zonos-text", { key: '049e7cbaef783b113daaf449b842bb27e1cd9fd4', class: "zonos--title", type: "semiBoldSubheader" }, this.notificationTitle), h("zonos-text", { key: '9ff5e5794bd0762341ef27cfca03bb52829c3463', class: "zonos--subtitle", textColor: "gray-600" }, this.notificationMessages.map(message => (h(Fragment, null, message, h("br", null))))), !window.Zonos.isLegacyCheckout &&
+            this.shouldRenderKeepShoppingButton() && (h("zonos-button", { key: '0546063749a2b2c96762488e03507bfa31643b33', onClick: () => this.closeClickHandler(), size: "md", variant: "primary" }, this.notificationActionText))), isTestMode && cartStore.step === 'finish' && (h("div", { key: 'ef75fac530f2a3cf69ccd28c2d48f93771b8459e', class: "zonos--finish-button-wrapper" }, h("zonos-button", { key: '5e8dd1c3e34c1e97b14e9f6225817005b79bd679', backgroundColor: "gray-0", buttonColor: "gray-1000", onClick: () => this.closeClickHandler(), size: "lg", variant: "outline" }, "New test cart"), h("zonos-button", { key: '40c1c75fb3afae2c20ce8b018285f5cc21abbb96', onClick: () => this.redirectToUrl(`/orders/all`), size: "lg", variant: "primary" }, "View order in Dashboard")))))));
     }
     static get is() { return "zonos-checkout-finish"; }
     static get encapsulation() { return "shadow"; }

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

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
@@ -778,7 +783,7 @@ export class ZonosCheckout {
                 "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/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-customer-info/zonos-customer-info.js

@@ -82,6 +82,7 @@ export class ZonosCustomerInfo {
             void trackConversionEvent('checkout_customerInfoCompleted');
         };
         this.handleValidate = () => {
+            var _a, _b;
             const stripeShippingAddressEventData = stripeStore.stripeAddressEventData;
             const stripeBillingAddressEventData = stripeStore.stripeBillingAddressEventData;
             const stripeLinkEventData = stripeStore.stripeLinkEventData;
@@ -91,11 +92,26 @@ export class ZonosCustomerInfo {
                 : !!(stripeBillingAddressEventData === null || stripeBillingAddressEventData === void 0 ? void 0 : stripeBillingAddressEventData.complete);
             const isValidShipping = !!(stripeShippingAddressEventData === null || stripeShippingAddressEventData === void 0 ? void 0 : stripeShippingAddressEventData.complete);
             const isValidLink = !!(stripeLinkEventData === null || stripeLinkEventData === void 0 ? void 0 : stripeLinkEventData.complete);
+            // display errors on fields that are invalid
+            void ((_a = stripeStore.stripeAddressElement) === null || _a === void 0 ? void 0 : _a.getValue());
+            void ((_b = stripeStore.stripeBillingAddressElement) === null || _b === void 0 ? void 0 : _b.getValue());
+            if (!isValidLink && (stripeLinkEventData === null || stripeLinkEventData === void 0 ? void 0 : stripeLinkEventData.empty)) {
+                this.isEmailError = true;
+            }
             if (!isValidBilling || !isValidShipping || !isValidLink) {
                 return false;
             }
             return true;
         };
+        this.handleEmailValidation = () => {
+            var _a;
+            if (!this.isEmailError) {
+                return;
+            }
+            if (!((_a = stripeStore.stripeLinkEventData) === null || _a === void 0 ? void 0 : _a.empty)) {
+                this.isEmailError = false;
+            }
+        };
         this.prepareAddressObject = (stripeAddressEventData) => {
             var _a;
             const addressValue = stripeAddressEventData.value;
@@ -123,6 +139,7 @@ export class ZonosCustomerInfo {
         this.invalidShippingCharacterList = null;
         this.invalidBillingCharacterList = null;
         this.openAddressValidationDialog = false;
+        this.isEmailError = false;
     }
     checkInvalidCharacters(address) {
         if (!address) {
@@ -173,7 +190,7 @@ export class ZonosCustomerInfo {
         if (this.showErrorBanner) {
             this.showErrorBanner = !this.handleValidate();
         }
-        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: (_b = this.defaultAddress) === null || _b === void 0 ? void 0 : _b.email, titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
+        return (h(Host, { class: "zonos--customer-info zonos--elements" }, h("div", { class: "zonos--group" }, h("zonos-text", { class: "zonos--title", type: "semiBoldSubheader" }, translate('Customer information')), this.showErrorBanner && (h("zonos-banner", { class: "zonos--error-banner", intent: "error" }, translate('Missing required fields. Make sure all fields are completed.'))), h("zonos-link-authentication", { defaultEmail: (_b = this.defaultAddress) === null || _b === void 0 ? void 0 : _b.email, isEmailError: this.isEmailError, onLinkAuthenticationChange: this.handleEmailValidation, titleText: translate('Contact') }), h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Address'), type: "shipping" }), h("zonos-checkbox", { class: "zonos--shipping-same-as-billing-cbx", isChecked: stripeStore.stripeShippingSameAsBilling, label: translate('Shipping address same as billing'), onCheckboxSelected: e => {
                 stripeStore.stripeShippingSameAsBilling = e.detail;
             } }), h("zonos-collapse", { collapsed: !showBilling }, h("zonos-address", { defaultAddress: this.defaultAddress, titleText: translate('Billing address'), type: "billing" })), h("div", { class: "zonos--group-btn" }, h("zonos-button", { backgroundColor: this.submitBtnColor, loading: this.continueLoading, onClick: () => this.continueClickHandler(), size: "lg",
             // use primary type when on mobile mode
@@ -313,7 +330,8 @@ export class ZonosCustomerInfo {
             "isValidatingAddress": {},
             "invalidShippingCharacterList": {},
             "invalidBillingCharacterList": {},
-            "openAddressValidationDialog": {}
+            "openAddressValidationDialog": {},
+            "isEmailError": {}
         };
     }
     static get events() {

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',
                 })));