@zonos/elements 1.2.3 → 1.2.4-alpha.10

package/dist/esm/submitGtag-521826a2.js

@@ -0,0 +1,24 @@
+import { z as zonosStore } from './zonosStore-61e74f58.js';
+import { l as log } from './localization-a51ccbc2.js';
+
+const checkoutBreakpoint = 890;
+const isCheckoutMobile = (isMobile) => {
+    return isMobile || window.innerWidth < checkoutBreakpoint;
+};
+
+/**
+ * Submit a gtag event if the gtag function is available.
+ */
+const submitGtag = (event) => {
+    const googleAnalyticSetting = zonosStore.checkoutSettings.analyticsProviders.find(item => item.type === 'GOOGLE_ANALYTICS');
+    // only submit if googleAnalytic in checkout setting is on.
+    if (!googleAnalyticSetting || (googleAnalyticSetting === null || googleAnalyticSetting === void 0 ? void 0 : googleAnalyticSetting.status) === 'DISABLED') {
+        return;
+    }
+    if (typeof window.gtag === 'function') {
+        log('Zonos submits gtag event', 'log', event);
+        window.gtag('event', event, {});
+    }
+};
+
+export { isCheckoutMobile as i, submitGtag as s };

package/dist/esm/zonos-address_2.entry.js

@@ -1,123 +1,123 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-d1aa9293.js';
-import { s as stripeStore, m as stripeStorePrefetchLandedCost } from './cart-17650017.js';
-import { b as logError, a as localizationStore } from './localization-f3828793.js';
-import './zonosStore-05a62104.js';
-import './isDarkColor-6fbb9b14.js';
-import './getBorderRadius-45764ad7.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-36ff6342.js';
+import { s as stripeStore, m as stripeStorePrefetchLandedCost } from './cart-b439be00.js';
+import { b as logError, a as localizationStore } from './localization-a51ccbc2.js';
+import './zonosStore-61e74f58.js';
+import './isDarkColor-416d6047.js';
+import './getBorderRadius-178a0a05.js';
 
-const zonosAddressCss = ".sc-zonos-address-h{font-family:Inter;display:block}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}";
+const zonosAddressCss = ".sc-zonos-address-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-address-h *.sc-zonos-address{font-family:var(--font-family, Inter), Inter}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}";
 
 const ZonosAddress = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.type = undefined;
-    this.titleText = undefined;
-    this.defaultAddress = null;
-    this.stripe = window.Zonos.stripe;
-  }
-  async watchInitStripe() {
-    var _a, _b;
-    this.stripe = window.Zonos.stripe;
-    if (!this.stripe || !stripeStore.stripeElements) {
-      logError("Stripe is not initialized. Couldn't load stripe element.");
-      return;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.type = undefined;
+        this.titleText = undefined;
+        this.defaultAddress = null;
+        this.stripe = window.Zonos.stripe;
     }
-    const phone = (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.phone;
-    if (!phone) {
-      // remove phone from default address if it's not provided, stripe
-      // will throw error if key phone exist and its value is empty or 'undefined'.
-      (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
+    async watchInitStripe() {
+        var _a, _b;
+        this.stripe = window.Zonos.stripe;
+        if (!this.stripe || !stripeStore.stripeElements) {
+            logError("Stripe is not initialized. Couldn't load stripe element.");
+            return;
+        }
+        const phone = (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.phone;
+        if (!phone) {
+            // remove phone from default address if it's not provided, stripe
+            // will throw error if key phone exist and its value is empty or 'undefined'.
+            (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
+        }
+        const shippableCountries = localizationStore.shippingZoneCountries;
+        const addressElement = stripeStore.stripeAddressElement ||
+            stripeStore.stripeElements.create('address', {
+                allowedCountries: shippableCountries
+                    ? Object.values(shippableCountries).map(country => country.code)
+                    : [],
+                contacts: this.defaultAddress ? [this.defaultAddress] : undefined,
+                defaultValues: {
+                    address: {
+                        country: localizationStore.selectedCountryCode || 'AL',
+                    },
+                },
+                display: {
+                    name: 'split',
+                },
+                fields: {
+                    phone: 'always',
+                },
+                mode: this.type,
+                validation: {
+                    phone: {
+                        required: 'always',
+                    },
+                },
+            });
+        addressElement.mount(this.el.querySelector('.zonos--address-component'));
+        addressElement.on('change', event => {
+            const eventValue = event.value;
+            stripeStore.stripeAddressEventData = Object.assign(Object.assign({}, event), { elementMode: 'shipping', elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) });
+            // run prefetch landed cost when address is changed
+            void stripeStorePrefetchLandedCost();
+        });
+        stripeStore.stripeAddressElement = addressElement;
     }
-    const shippableCountries = localizationStore.shippingZoneCountries;
-    const addressElement = stripeStore.stripeAddressElement ||
-      stripeStore.stripeElements.create('address', {
-        allowedCountries: shippableCountries
-          ? Object.values(shippableCountries).map(country => country.code)
-          : [],
-        contacts: this.defaultAddress ? [this.defaultAddress] : undefined,
-        defaultValues: {
-          address: {
-            country: localizationStore.selectedCountryCode || 'AL',
-          },
-        },
-        display: {
-          name: 'split',
-        },
-        fields: {
-          phone: 'always',
-        },
-        mode: this.type,
-        validation: {
-          phone: {
-            required: 'always',
-          },
-        },
-      });
-    addressElement.mount(this.el.querySelector('.zonos--address-component'));
-    addressElement.on('change', event => {
-      const eventValue = event.value;
-      stripeStore.stripeAddressEventData = Object.assign(Object.assign({}, event), { elementMode: 'shipping', elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) });
-      // run prefetch landed cost when address is changed
-      void stripeStorePrefetchLandedCost();
-    });
-    stripeStore.stripeAddressElement = addressElement;
-  }
-  componentDidLoad() {
-    // @Watch doesn't get trigger on initial load
-    void this.watchInitStripe();
-  }
-  render() {
-    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-    return (h(Host, { class: "zonos--address zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--address-component" })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "stripe": ["watchInitStripe"]
-  }; }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        void this.watchInitStripe();
+    }
+    render() {
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (h(Host, { class: "zonos--address zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--address-component" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "stripe": ["watchInitStripe"]
+    }; }
 };
 ZonosAddress.style = zonosAddressCss;
 
-const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:Inter;display:block}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";
+const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}.sc-zonos-link-authentication-h *.sc-zonos-link-authentication{font-family:var(--font-family, Inter), Inter}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";
 
 const ZonosLinkAuthentication = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.titleText = undefined;
-    this.stripe = stripeStore.stripe;
-  }
-  watchInitStripe() {
-    if (!this.stripe || !stripeStore.stripeElements) {
-      return;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.titleText = undefined;
+        this.stripe = stripeStore.stripe;
+    }
+    watchInitStripe() {
+        if (!this.stripe || !stripeStore.stripeElements) {
+            return;
+        }
+        // Create and mount the Authentication Element in ${type} mode
+        const linkAuthenticationElement = stripeStore.stripeLinkElement ||
+            stripeStore.stripeElements.create('linkAuthentication');
+        const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
+        if (!linkAuthenticationElementContainer) {
+            // eslint-disable-next-line no-console
+            console.error('Cannot find container element for linkAuthenticationElement');
+            return;
+        }
+        linkAuthenticationElement.mount(linkAuthenticationElementContainer);
+        linkAuthenticationElement.on('change', event => {
+            stripeStore.stripeLinkEventData = event;
+            // run prefetch landed cost when address is changed
+            void stripeStorePrefetchLandedCost();
+        });
+        stripeStore.stripeLinkElement = linkAuthenticationElement;
+    }
+    componentDidLoad() {
+        // @Watch doesn't get trigger on initial load
+        this.watchInitStripe();
     }
-    // Create and mount the Authentication Element in ${type} mode
-    const linkAuthenticationElement = stripeStore.stripeLinkElement ||
-      stripeStore.stripeElements.create('linkAuthentication');
-    const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
-    if (!linkAuthenticationElementContainer) {
-      // eslint-disable-next-line no-console
-      console.error('Cannot find container element for linkAuthenticationElement');
-      return;
+    render() {
+        // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
+        return (h(Host, { class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--link-authentication-component" })));
     }
-    linkAuthenticationElement.mount(linkAuthenticationElementContainer);
-    linkAuthenticationElement.on('change', event => {
-      stripeStore.stripeLinkEventData = event;
-      // run prefetch landed cost when address is changed
-      void stripeStorePrefetchLandedCost();
-    });
-    stripeStore.stripeLinkElement = linkAuthenticationElement;
-  }
-  componentDidLoad() {
-    // @Watch doesn't get trigger on initial load
-    this.watchInitStripe();
-  }
-  render() {
-    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-    return (h(Host, { class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--link-authentication-component" })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "stripe": ["watchInitStripe"]
-  }; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "stripe": ["watchInitStripe"]
+    }; }
 };
 ZonosLinkAuthentication.style = zonosLinkAuthenticationCss;
 

package/dist/esm/zonos-badge.entry.js

@@ -1,29 +1,32 @@
-import { r as registerInstance, h, H as Host } from './index-d1aa9293.js';
+import { r as registerInstance, h, H as Host } from './index-36ff6342.js';
+import { e as zonosStoreFontFamily } from './zonosStore-61e74f58.js';
 import { c as classes } from './classes-0d95c529.js';
 
-const zonosBadgeCss = ":host{font-family:Inter;display:block}: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 .zonos--badge-content{display:-ms-flexbox;display:flex;gap:var(--amino-space-8);font-size:var(--amino-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--amino-radius-6);background-color:var(--amino-gray-100);color:var(--amino-gray-800);-ms-flex-align:center;align-items:center}:host p{font-weight:600;line-height:16px}:host .icon-right svg{-ms-flex-order:2;order:2}:host .small{padding:2px 8px}:host .rounded{border-radius:20px}:host .bold{background-color:var(--amino-gray-600);color:var(--amino-gray-100)}:host .blue{background-color:var(--amino-blue-100);color:var(--amino-blue-800)}:host .blue.bold{background-color:var(--amino-blue-600);color:var(--amino-blue-100)}:host .green{background-color:var(--amino-green-100);color:var(--amino-green-800)}:host .green.bold{background-color:var(--amino-green-600);color:var(--amino-green-100)}:host .red{background-color:var(--amino-red-100);color:var(--amino-red-800)}:host .red.bold{background-color:var(--amino-red-600);color:var(--amino-red-100)}:host .orange{background-color:var(--amino-orange-100);color:var(--amino-orange-800)}:host .orange.bold{background-color:var(--amino-orange-600);color:var(--amino-orange-100)}:host .purple{background-color:var(--amino-purple-100);color:var(--amino-purple-800)}:host .purple.bold{background-color:var(--amino-purple-600);color:var(--amino-purple-100)}:host .cyan{background-color:var(--amino-cyan-100);color:var(--amino-cyan-800)}:host .cyan.bold{background-color:var(--amino-cyan-600);color:var(--amino-cyan-100)}";
+const zonosBadgeCss = ":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 .zonos--badge-content{display:-ms-flexbox;display:flex;gap:var(--amino-space-8);font-size:var(--amino-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--amino-radius-6);background-color:var(--amino-gray-100);color:var(--amino-gray-800);-ms-flex-align:center;align-items:center}:host p{font-weight:600;line-height:16px}:host .icon-right svg{-ms-flex-order:2;order:2}:host .small{padding:2px 8px}:host .rounded{border-radius:20px}:host .bold{background-color:var(--amino-gray-600);color:var(--amino-gray-100)}:host .blue{background-color:var(--amino-blue-100);color:var(--amino-blue-800)}:host .blue.bold{background-color:var(--amino-blue-600);color:var(--amino-blue-100)}:host .green{background-color:var(--amino-green-100);color:var(--amino-green-800)}:host .green.bold{background-color:var(--amino-green-600);color:var(--amino-green-100)}:host .red{background-color:var(--amino-red-100);color:var(--amino-red-800)}:host .red.bold{background-color:var(--amino-red-600);color:var(--amino-red-100)}:host .orange{background-color:var(--amino-orange-100);color:var(--amino-orange-800)}:host .orange.bold{background-color:var(--amino-orange-600);color:var(--amino-orange-100)}:host .purple{background-color:var(--amino-purple-100);color:var(--amino-purple-800)}:host .purple.bold{background-color:var(--amino-purple-600);color:var(--amino-purple-100)}:host .cyan{background-color:var(--amino-cyan-100);color:var(--amino-cyan-800)}:host .cyan.bold{background-color:var(--amino-cyan-600);color:var(--amino-cyan-100)}";
 
 const ZonosBadge = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.bold = false;
-    this.color = 'gray';
-    this.icon = undefined;
-    this.iconRight = false;
-    this.size = 'default';
-    this.rounded = false;
-    this.class = '';
-  }
-  render() {
-    return (h(Host, { class: classes(['zonos--elements zonos--badge', this.class]) }, h("div", { class: classes([
-        'zonos--badge-content',
-        this.color,
-        this.rounded && 'rounded',
-        this.iconRight && 'icon-right',
-        this.size,
-        this.bold && 'bold',
-      ]) }, this.icon, h("p", null, h("slot", null)))));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bold = false;
+        this.color = 'gray';
+        this.icon = undefined;
+        this.iconRight = false;
+        this.size = 'default';
+        this.rounded = false;
+        this.class = '';
+    }
+    render() {
+        return (h(Host, { class: classes(['zonos--elements zonos--badge', this.class]), style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { class: classes([
+                'zonos--badge-content',
+                this.color,
+                this.rounded && 'rounded',
+                this.iconRight && 'icon-right',
+                this.size,
+                this.bold && 'bold',
+            ]) }, this.icon, h("zonos-text", null, h("slot", null)))));
+    }
 };
 ZonosBadge.style = zonosBadgeCss;
 

package/dist/esm/zonos-banner.entry.js

@@ -1,61 +1,73 @@
-import { r as registerInstance, h, H as Host } from './index-d1aa9293.js';
+import { r as registerInstance, h, H as Host } from './index-36ff6342.js';
+import { e as zonosStoreFontFamily } from './zonosStore-61e74f58.js';
 import { c as classes } from './classes-0d95c529.js';
 
-const zonosBannerCss = ":host{font-family:Inter;display:block}: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{border-radius:var(--amino-radius-10);padding:var(--amino-space-16);background:var(--amino-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:var(--amino-space-0);grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:var(--amino-space-4)}:host(.info){background-color:var(--amino-blue-100);border:1px solid var(--amino-blue-200)}:host(.success){background-color:var(--amino-green-100);border:1px solid var(--amino-green-200)}:host(.error){background-color:var(--amino-red-100);border:1px solid var(--amino-red-200)}:host(.warning){background-color:var(--amino-orange-100);border:1px solid var(--amino-orange-200)}";
+const zonosBannerCss = ":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{border-radius:var(--amino-radius-10);padding:var(--amino-space-16);background:var(--amino-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:var(--amino-space-0);grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:var(--amino-space-4)}:host(.info){background-color:var(--amino-blue-100);border:1px solid var(--amino-blue-200)}:host(.success){background-color:var(--amino-green-100);border:1px solid var(--amino-green-200)}:host(.error){background-color:var(--amino-red-100);border:1px solid var(--amino-red-200)}:host(.warning){background-color:var(--amino-orange-100);border:1px solid var(--amino-orange-200)}";
 
 const ZonosBanner = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Detect if the button has an content
-     */
-    this.handleSlotChange = () => {
-      this.hasContent = true;
-    };
-    this.bannerTitle = undefined;
-    this.intent = undefined;
-    this.class = '';
-    this.hasContent = false;
-  }
-  render() {
-    const renderContent = ({ color }) => {
-      const primaryColor = `var(--amino-${color}-800)`;
-      const secondaryColor = `var(--amino-${color}-300)`;
-      const [header, content] = [
-        this.bannerTitle,
-        h("slot", { onSlotchange: this.handleSlotChange }),
-      ].filter(Boolean);
-      const textColor = color === 'gray' ? 'gray-1200' : `${color}-800`;
-      return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { color: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { color: textColor }, content)))));
-    };
-    const baseClass = classes([
-      'zonos--elements zonos--banner',
-      this.class,
-      this.intent,
-    ]);
-    switch (this.intent) {
-      case 'error':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'red',
-        })));
-      case 'info':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'blue',
-        })));
-      case 'success':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'green',
-        })));
-      case 'warning':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'orange',
-        })));
-      default:
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'gray',
-        })));
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Detect if the button has an content
+         */
+        this.handleSlotChange = () => {
+            this.hasContent = true;
+        };
+        this.bannerTitle = undefined;
+        this.intent = undefined;
+        this.class = '';
+        this.hasContent = false;
+    }
+    render() {
+        const renderContent = ({ color }) => {
+            const primaryColor = `var(--amino-${color}-800)`;
+            const secondaryColor = `var(--amino-${color}-300)`;
+            const [header, content] = [
+                this.bannerTitle,
+                h("slot", { onSlotchange: this.handleSlotChange }),
+            ].filter(Boolean);
+            const textColor = color === 'gray' ? 'gray-1200' : `${color}-800`;
+            return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { color: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { color: textColor }, content)))));
+        };
+        const baseClass = classes([
+            'zonos--elements zonos--banner',
+            this.class,
+            this.intent,
+        ]);
+        const font = zonosStoreFontFamily();
+        switch (this.intent) {
+            case 'error':
+                return (h(Host, { class: baseClass, style: {
+                        '--font-family': font,
+                    } }, renderContent({
+                    color: 'red',
+                })));
+            case 'info':
+                return (h(Host, { class: baseClass, style: {
+                        '--font-family': font,
+                    } }, renderContent({
+                    color: 'blue',
+                })));
+            case 'success':
+                return (h(Host, { class: baseClass, style: {
+                        '--font-family': font,
+                    } }, renderContent({
+                    color: 'green',
+                })));
+            case 'warning':
+                return (h(Host, { class: baseClass, style: {
+                        '--font-family': font,
+                    } }, renderContent({
+                    color: 'orange',
+                })));
+            default:
+                return (h(Host, { class: baseClass, style: {
+                        '--font-family': font,
+                    } }, renderContent({
+                    color: 'gray',
+                })));
+        }
     }
-  }
 };
 ZonosBanner.style = zonosBannerCss;