@zonos/elements 1.2.3 → 1.2.4-alpha.2

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

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

package/dist/components/zonos-icon2.js

@@ -1,48 +1,50 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as zonosStoreFontFamily } from './zonosStore.js';
 
-const zonosIconCss = ":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 svg{width:var(--width);height:var(--height);fill:var(--color);color:var(--color)}";
+const zonosIconCss = ":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 svg{width:var(--width);height:var(--height);fill:var(--color);color:var(--color)}";
 
 const ZonosIcon = /*@__PURE__*/ proxyCustomElement(class ZonosIcon extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.autoHeight = false;
-    this.color = 'gray-1200';
-    this.content = undefined;
-    this.size = 24;
-  }
-  render() {
-    if (!this.content || !this.el.shadowRoot) {
-      return null;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.autoHeight = false;
+        this.color = 'gray-1200';
+        this.content = undefined;
+        this.size = 24;
     }
-    this.el.shadowRoot.innerHTML = this.content;
-    return (h(Host, { class: "zonos--elements", style: {
-        '--color': `var(--amino-${this.color})`,
-        '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
-        '--width': `${this.size}px`,
-      } }));
-  }
-  get el() { return this; }
-  static get style() { return zonosIconCss; }
+    render() {
+        if (!this.content || !this.el.shadowRoot) {
+            return null;
+        }
+        this.el.shadowRoot.innerHTML = this.content;
+        return (h(Host, { class: "zonos--elements", style: {
+                '--color': `var(--amino-${this.color})`,
+                '--font-family': zonosStoreFontFamily(),
+                '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
+                '--width': `${this.size}px`,
+            } }));
+    }
+    get el() { return this; }
+    static get style() { return zonosIconCss; }
 }, [1, "zonos-icon", {
-    "autoHeight": [4, "auto-height"],
-    "color": [1],
-    "content": [1],
-    "size": [2]
-  }]);
+        "autoHeight": [4, "auto-height"],
+        "color": [1],
+        "content": [1],
+        "size": [2]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-icon":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosIcon);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosIcon);
+            }
+            break;
+    } });
 }
 
 export { ZonosIcon as Z, defineCustomElement as d };

package/dist/components/zonos-link-authentication.d.ts

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

package/dist/components/zonos-link-authentication2.js

@@ -2,72 +2,72 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { s as stripeStore, k as stripeStorePrefetchLandedCost } from './cart.js';
 import { d as defineCustomElement$1 } from './zonos-text2.js';
 
-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}.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 = /*@__PURE__*/ proxyCustomElement(class ZonosLinkAuthentication extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.titleText = undefined;
-    this.stripe = stripeStore.stripe;
-  }
-  watchInitStripe() {
-    if (!this.stripe || !stripeStore.stripeElements) {
-      return;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.titleText = undefined;
+        this.stripe = stripeStore.stripe;
     }
-    // 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;
+    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;
     }
-    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 this; }
-  static get watchers() { return {
-    "stripe": ["watchInitStripe"]
-  }; }
-  static get style() { return zonosLinkAuthenticationCss; }
+    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 this; }
+    static get watchers() { return {
+        "stripe": ["watchInitStripe"]
+    }; }
+    static get style() { return zonosLinkAuthenticationCss; }
 }, [2, "zonos-link-authentication", {
-    "titleText": [1, "title-text"],
-    "stripe": [32]
-  }, undefined, {
-    "stripe": ["watchInitStripe"]
-  }]);
+        "titleText": [1, "title-text"],
+        "stripe": [32]
+    }, undefined, {
+        "stripe": ["watchInitStripe"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-link-authentication", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-link-authentication":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosLinkAuthentication);
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-link-authentication", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-link-authentication":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosLinkAuthentication);
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosLinkAuthentication as Z, defineCustomElement as d };

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

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

package/dist/components/zonos-logo2.js

@@ -1,45 +1,47 @@
 import { proxyCustomElement, HTMLElement, h, Host, getAssetPath } from '@stencil/core/internal/client';
+import { d as zonosStoreFontFamily } from './zonosStore.js';
 import { c as classes } from './classes.js';
 
-const zonosLogoCss = ":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 img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";
+const zonosLogoCss = ":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 img{-webkit-filter:var(--filter-color);filter:var(--filter-color);width:var(--width)}";
 
 const ZonosLogo = /*@__PURE__*/ proxyCustomElement(class ZonosLogo extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.theme = 'LIGHT';
-    this.width = 'auto';
-    this.class = '';
-  }
-  render() {
-    const filterColor = this.theme === 'DARK'
-      ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
-      : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
-    return (h(Host, { class: classes(['zonos--elements zonos--logo', this.class]), style: {
-        '--filter-color': filterColor,
-        '--width': this.width,
-      } }, h("img", { alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  static get style() { return zonosLogoCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.theme = 'LIGHT';
+        this.width = 'auto';
+        this.class = '';
+    }
+    render() {
+        const filterColor = this.theme === 'DARK'
+            ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'
+            : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';
+        return (h(Host, { class: classes(['zonos--elements zonos--logo', this.class]), style: {
+                '--filter-color': filterColor,
+                '--font-family': zonosStoreFontFamily(),
+                '--width': this.width,
+            } }, h("img", { alt: "Zonos Logo", src: getAssetPath('./assets/ZonosLogo.png') })));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    static get style() { return zonosLogoCss; }
 }, [1, "zonos-logo", {
-    "theme": [1],
-    "width": [1],
-    "class": [1]
-  }]);
+        "theme": [1],
+        "width": [1],
+        "class": [1]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-logo"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-logo":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosLogo);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-logo"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-logo":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosLogo);
+            }
+            break;
+    } });
 }
 
 export { ZonosLogo as Z, defineCustomElement as d };

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

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

package/dist/components/zonos-notification2.js

@@ -1,90 +1,93 @@
 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 zonosNotificationCss = ":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-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999;bottom:var(--amino-space-24);gap:var(--amino-space-8);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:var(--amino-space-8);border-radius:var(--border-radius, var(--amino-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--amino-green-700)}:host .zonos--notification-item.error{background-color:var(--amino-red-700)}:host .zonos--notification-item.warning{background-color:var(--amino-orange-700)}";
+const zonosNotificationCss = ":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-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .zonos--notification-items{position:fixed;z-index:9999999;bottom:var(--amino-space-24);gap:var(--amino-space-8);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}:host .zonos--notification-item{cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;padding:var(--amino-space-8);border-radius:var(--border-radius, var(--amino-radius-6));opacity:0;-ms-flex-negative:0.0001;flex-shrink:0.0001;-webkit-transform:translateY(100%);transform:translateY(100%)}:host .zonos--notification-item+:host .zonos--notification-item{margin-top:8px}:host .zonos--notification-item.show{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-ms-flex-positive:1000;flex-grow:1000}:host .zonos--notification-item.success{background-color:var(--amino-green-700)}:host .zonos--notification-item.error{background-color:var(--amino-red-700)}:host .zonos--notification-item.warning{background-color:var(--amino-orange-700)}";
 
 const ZonosNotification = /*@__PURE__*/ proxyCustomElement(class ZonosNotification extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.class = '';
-    this.notificationArray = [];
-  }
-  /**
-   * Show a notification
-   */
-  async showNotification(notification) {
-    // random generate id
-    const id = `id-${Math.random().toString(36).substring(2, 9)}`;
-    const notificationItem = Object.assign(Object.assign({}, notification), { id, timeout: notification.timeout || 5000, transitionClass: '', type: notification.type || 'success' });
-    this.notificationArray = [...this.notificationArray, notificationItem];
-    setTimeout(() => {
-      this.updateTransitionClass({
-        id,
-        transitionClass: 'show',
-      });
-    }, 50);
-    setTimeout(() => {
-      this.removeNotification(id);
-    }, notificationItem.timeout);
-  }
-  updateTransitionClass({ id, transitionClass, }) {
-    this.notificationArray = this.notificationArray.map(notification => {
-      if (notification.id === id) {
-        return Object.assign(Object.assign({}, notification), { transitionClass });
-      }
-      return notification;
-    });
-  }
-  /**
-   * Remove a notification
-   */
-  removeNotification(id) {
-    // add hide class before removing the item 100ms to trigger animation
-    this.updateTransitionClass({
-      id,
-      transitionClass: '',
-    });
-    setTimeout(() => {
-      this.notificationArray = this.notificationArray.filter(notification => notification.id !== id);
-    }, 300);
-  }
-  render() {
-    return (h(Host, { class: classes(['zonos--elements zonos--notification', this.class]) }, h("div", { class: "zonos--notification-items" }, this.notificationArray.map(notification => {
-      return (h("div", { "aria-hidden": "true", class: classes([
-          'zonos--notification-item',
-          notification.type,
-          notification.transitionClass,
-        ]), key: notification.id, onClick: () => {
-          this.removeNotification(notification.id);
-        } }, h("zonos-text", { color: "gray-0" }, notification.message)));
-    }))));
-  }
-  static get style() { return zonosNotificationCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.class = '';
+        this.notificationArray = [];
+    }
+    /**
+     * Show a notification
+     */
+    async showNotification(notification) {
+        // random generate id
+        const id = `id-${Math.random().toString(36).substring(2, 9)}`;
+        const notificationItem = Object.assign(Object.assign({}, notification), { id, timeout: notification.timeout || 5000, transitionClass: '', type: notification.type || 'success' });
+        this.notificationArray = [...this.notificationArray, notificationItem];
+        setTimeout(() => {
+            this.updateTransitionClass({
+                id,
+                transitionClass: 'show',
+            });
+        }, 50);
+        setTimeout(() => {
+            this.removeNotification(id);
+        }, notificationItem.timeout);
+    }
+    updateTransitionClass({ id, transitionClass, }) {
+        this.notificationArray = this.notificationArray.map(notification => {
+            if (notification.id === id) {
+                return Object.assign(Object.assign({}, notification), { transitionClass });
+            }
+            return notification;
+        });
+    }
+    /**
+     * Remove a notification
+     */
+    removeNotification(id) {
+        // add hide class before removing the item 100ms to trigger animation
+        this.updateTransitionClass({
+            id,
+            transitionClass: '',
+        });
+        setTimeout(() => {
+            this.notificationArray = this.notificationArray.filter(notification => notification.id !== id);
+        }, 300);
+    }
+    render() {
+        return (h(Host, { class: classes(['zonos--elements zonos--notification', this.class]), style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { class: "zonos--notification-items" }, this.notificationArray.map(notification => {
+            return (h("div", { "aria-hidden": "true", class: classes([
+                    'zonos--notification-item',
+                    notification.type,
+                    notification.transitionClass,
+                ]), key: notification.id, onClick: () => {
+                    this.removeNotification(notification.id);
+                } }, h("zonos-text", { color: "gray-0" }, notification.message)));
+        }))));
+    }
+    static get style() { return zonosNotificationCss; }
 }, [1, "zonos-notification", {
-    "class": [1],
-    "notificationArray": [32],
-    "showNotification": [64]
-  }]);
+        "class": [1],
+        "notificationArray": [32],
+        "showNotification": [64]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["zonos-notification", "zonos-text"];
-  components.forEach(tagName => { switch (tagName) {
-    case "zonos-notification":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ZonosNotification);
-      }
-      break;
-    case "zonos-text":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zonos-notification", "zonos-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zonos-notification":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZonosNotification);
+            }
+            break;
+        case "zonos-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { ZonosNotification as Z, defineCustomElement as d };

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

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