@zonos/elements 1.2.2 → 1.2.4-alpha.1

package/dist/components/submitGtag.js

@@ -5,15 +5,15 @@ import { a as log } from './localization.js';
  * 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, {});
-  }
+    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 { submitGtag as s };

package/dist/components/zonos-address.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosAddress extends Components.ZonosAddress, HTMLElement {}
 export const ZonosAddress: {
-  prototype: ZonosAddress;
-  new (): ZonosAddress;
+    prototype: ZonosAddress;
+    new (): ZonosAddress;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/zonos-address2.js

@@ -3,102 +3,102 @@ import { s as stripeStore, k as stripeStorePrefetchLandedCost } from './cart.js'
 import { l as logError, b as localizationStore } from './localization.js';
 import { d as defineCustomElement$1 } from './zonos-text2.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}.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 = /*@__PURE__*/ proxyCustomElement(class ZonosAddress extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    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() {
+        super();
+        this.__registerHost();
+        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 this; }
-  static get watchers() { return {
-    "stripe": ["watchInitStripe"]
-  }; }
-  static get style() { return zonosAddressCss; }
+    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 this; }
+    static get watchers() { return {
+        "stripe": ["watchInitStripe"]
+    }; }
+    static get style() { return zonosAddressCss; }
 }, [2, "zonos-address", {
-    "type": [1],
-    "titleText": [1, "title-text"],
-    "defaultAddress": [16],
-    "stripe": [32]
-  }, undefined, {
-    "stripe": ["watchInitStripe"]
-  }]);
+        "type": [1],
+        "titleText": [1, "title-text"],
+        "defaultAddress": [16],
+        "stripe": [32]
+    }, undefined, {
+        "stripe": ["watchInitStripe"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-address", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-address":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosAddress);
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-address", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-address":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosAddress);
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosAddress as Z, defineCustomElement as d };

package/dist/components/zonos-badge.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosBadge extends Components.ZonosBadge, HTMLElement {}
 export const ZonosBadge: {
-  prototype: ZonosBadge;
-  new (): ZonosBadge;
+    prototype: ZonosBadge;
+    new (): ZonosBadge;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/zonos-badge2.js

@@ -1,53 +1,62 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
+import { d as defineCustomElement$1 } from './zonos-text2.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}: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 = /*@__PURE__*/ proxyCustomElement(class ZonosBadge extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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)))));
-  }
-  static get style() { return zonosBadgeCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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)))));
+    }
+    static get style() { return zonosBadgeCss; }
 }, [1, "zonos-badge", {
-    "bold": [4],
-    "color": [1],
-    "icon": [16],
-    "iconRight": [4, "icon-right"],
-    "size": [1],
-    "rounded": [4],
-    "class": [1]
-  }]);
+        "bold": [4],
+        "color": [1],
+        "icon": [16],
+        "iconRight": [4, "icon-right"],
+        "size": [1],
+        "rounded": [4],
+        "class": [1]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-badge"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-badge":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosBadge);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-badge", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosBadge);
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosBadge as Z, defineCustomElement as d };

package/dist/components/zonos-banner.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosBanner extends Components.ZonosBanner, HTMLElement {}
 export const ZonosBanner: {
-  prototype: ZonosBanner;
-  new (): ZonosBanner;
+    prototype: ZonosBanner;
+    new (): ZonosBanner;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/zonos-banner2.js

@@ -1,88 +1,100 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 import { d as defineCustomElement$1 } from './zonos-text2.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}: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 = /*@__PURE__*/ proxyCustomElement(class ZonosBanner extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * 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() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Detect if the button has an content
+         */
+        this.handleSlotChange = () => {
+            this.hasContent = true;
+        };
+        this.bannerTitle = undefined;
+        this.intent = undefined;
+        this.class = '';
+        this.hasContent = false;
     }
-  }
-  static get style() { return zonosBannerCss; }
+    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',
+                })));
+        }
+    }
+    static get style() { return zonosBannerCss; }
 }, [1, "zonos-banner", {
-    "bannerTitle": [1, "banner-title"],
-    "intent": [1],
-    "class": [1],
-    "hasContent": [32]
-  }]);
+        "bannerTitle": [1, "banner-title"],
+        "intent": [1],
+        "class": [1],
+        "hasContent": [32]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-banner", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-banner":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosBanner);
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-banner", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-banner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosBanner);
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosBanner as Z, defineCustomElement as d };

package/dist/components/zonos-button.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ZonosButton extends Components.ZonosButton, HTMLElement {}
 export const ZonosButton: {
-  prototype: ZonosButton;
-  new (): ZonosButton;
+    prototype: ZonosButton;
+    new (): ZonosButton;
 };
 /**
  * Used to define this component and all nested components recursively.