@zonos/elements 1.0.16

package/dist/collection/components/common/zonos-icon/zonos-icon.js

@@ -0,0 +1,127 @@
+import { h, Host } from "@stencil/core";
+export class ZonosIcon {
+  constructor() {
+    this.autoHeight = false;
+    this.color = 'gray-1200';
+    this.content = undefined;
+    this.size = 24;
+  }
+  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})`,
+        '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,
+        '--width': `${this.size}px`,
+      } }));
+  }
+  static get is() { return "zonos-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "autoHeight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Determines if the icon should be auto height instead of square"
+        },
+        "attribute": "auto-height",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"blue-100\" | \"blue-200\" | \"blue-300\" | \"blue-400\" | \"blue-500\" | \"blue-600\" | \"blue-700\" | \"blue-800\" | \"blue-900\" | \"blue-1000\" | \"cyan-100\" | \"cyan-200\" | \"cyan-300\" | \"cyan-400\" | \"cyan-500\" | \"cyan-600\" | \"cyan-700\" | \"cyan-800\" | \"cyan-900\" | \"cyan-1000\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-1000\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-1000\" | \"purple-100\" | \"purple-200\" | \"purple-300\" | \"purple-400\" | \"purple-500\" | \"purple-600\" | \"purple-700\" | \"purple-800\" | \"purple-900\" | \"purple-1000\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-1000\" | \"gray-100\" | \"gray-200\" | \"gray-300\" | \"gray-400\" | \"gray-500\" | \"gray-600\" | \"gray-700\" | \"gray-800\" | \"gray-900\" | \"gray-1000\" | \"glass-100\" | \"glass-200\" | \"glass-300\" | \"glass-400\" | \"glass-500\" | \"glass-600\" | \"glass-700\" | \"glass-800\" | \"glass-900\" | \"glass-1000\" | \"gray-0\" | \"gray-50\" | \"glass-0\" | \"glass-50\" | \"gray-1100\" | \"gray-1200\" | \"glass-1100\" | \"glass-1200\"",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "src/types",
+              "id": "src/types/index.ts::Color"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "'gray-1200'"
+            }],
+          "text": "Color of the SVG"
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'gray-1200'"
+      },
+      "content": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "example",
+              "text": "import RemoveIcon from './assets/removeIcon.svg';\n...\n<zonos-icon content={RemoveIcon}></zonos-icon>\n// or\n<zonos-icon content=\"<svg>...</svg>\"></zonos-icon>"
+            }],
+          "text": "The content of the icon (full svg)"
+        },
+        "attribute": "content",
+        "reflect": false
+      },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "24"
+            }],
+          "text": "The size of the icon"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=zonos-icon.js.map

package/dist/collection/components/common/zonos-icon/zonos-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-icon.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-icon/zonos-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASlE,MAAM,OAAO,SAAS;;sBAKU,KAAK;iBAMZ,WAAW;;gBAiBX,EAAE;;EAIzB,MAAM;IACJ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE;MACxC,OAAO,IAAI,CAAC;KACb;IAED,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAE5C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE;QACL,SAAS,EAAE,eAAe,IAAI,CAAC,KAAK,GAAG;QACvC,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE;QAC5D,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;OAC5B,GACK,CACT,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport type { Color } from 'src/types';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-icon.scss',\n  tag: 'zonos-icon',\n})\nexport class ZonosIcon {\n  /**\n   * Determines if the icon should be auto height instead of square\n   * @default false\n   */\n  @Prop() autoHeight: boolean = false;\n\n  /**\n   * Color of the SVG\n   * @default 'gray-1200'\n   */\n  @Prop() color: Color = 'gray-1200';\n\n  /**\n   * The content of the icon (full svg)\n   * @example\n   * import RemoveIcon from './assets/removeIcon.svg';\n   * ...\n   * <zonos-icon content={RemoveIcon}></zonos-icon>\n   * // or\n   * <zonos-icon content=\"<svg>...</svg>\"></zonos-icon>\n   */\n  @Prop() content!: string;\n\n  /**\n   * The size of the icon\n   * @default 24\n   */\n  @Prop() size: number = 24;\n\n  @Element() el!: HTMLZonosIconElement;\n\n  render() {\n    if (!this.content || !this.el.shadowRoot) {\n      return null;\n    }\n\n    this.el.shadowRoot.innerHTML = this.content;\n\n    return (\n      <Host\n        class=\"zonos--elements\"\n        style={{\n          '--color': `var(--amino-${this.color})`,\n          '--height': `${this.autoHeight ? 'auto' : `${this.size}px`}`,\n          '--width': `${this.size}px`,\n        }}\n      ></Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/common/zonos-logo/zonos-logo.css

@@ -0,0 +1,36 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: inline-flex;
+}
+:host img {
+  filter: var(--filter-color);
+  width: var(--width);
+}

package/dist/collection/components/common/zonos-logo/zonos-logo.js

@@ -0,0 +1,96 @@
+import { getAssetPath, h, Host } from "@stencil/core";
+import { classes } from "../../utils/classes";
+export class ZonosLogo {
+  constructor() {
+    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 is() { return "zonos-logo"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-logo.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-logo.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ElementsUiTheme",
+          "resolved": "\"DARK\" | \"LIGHT\" | \"SYSTEM\"",
+          "references": {
+            "ElementsUiTheme": {
+              "location": "import",
+              "path": "src/types",
+              "id": "src/types/index.ts::ElementsUiTheme"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme to change the color of the logo"
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "'LIGHT'"
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The width of the logo"
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "class": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "css class for the component"
+        },
+        "attribute": "class",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+}
+//# sourceMappingURL=zonos-logo.js.map

package/dist/collection/components/common/zonos-logo/zonos-logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-logo.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-logo/zonos-logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AASvD,MAAM,OAAO,SAAS;;iBAIa,OAAO;iBAKhB,MAAM;iBAKN,EAAE;;EAE1B,MAAM;IACJ,MAAM,WAAW,GACf,IAAI,CAAC,KAAK,KAAK,MAAM;MACnB,CAAC,CAAC,0FAA0F;MAC5F,CAAC,CAAC,6FAA6F,CAAC;IAEpG,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,OAAO,CAAC,CAAC,6BAA6B,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAC3D,KAAK,EAAE;QACL,gBAAgB,EAAE,WAAW;QAC7B,SAAS,EAAE,IAAI,CAAC,KAAK;OACtB;MAED,WAAK,GAAG,EAAC,YAAY,EAAC,GAAG,EAAE,YAAY,CAAC,wBAAwB,CAAC,GAAI,CAChE,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, getAssetPath, h, Host, Prop } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { ElementsUiTheme } from 'src/types';\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-logo.scss',\n  tag: 'zonos-logo',\n})\nexport class ZonosLogo {\n  /**\n   * Theme to change the color of the logo\n   */\n  @Prop() theme: ElementsUiTheme = 'LIGHT';\n\n  /**\n   * The width of the logo\n   */\n  @Prop() width: string = 'auto';\n\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n\n  render() {\n    const filterColor =\n      this.theme === 'DARK'\n        ? 'invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)'\n        : 'whiteinvert(0%) sepia(100%) saturate(32%) hue-rotate(92deg) brightness(107%) contrast(107%)';\n\n    return (\n      <Host\n        class={classes(['zonos--elements zonos--logo', this.class])}\n        style={{\n          '--filter-color': filterColor,\n          '--width': this.width,\n        }}\n      >\n        <img alt=\"Zonos Logo\" src={getAssetPath('./assets/ZonosLogo.png')} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/common/zonos-notification/zonos-notification.css

@@ -0,0 +1,67 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: flex;
+  justify-content: center;
+}
+:host .zonos--notification-items {
+  position: fixed;
+  z-index: 9999999;
+  bottom: var(--amino-space-24);
+  gap: var(--amino-space-8);
+  display: inline-flex;
+  flex-direction: column;
+}
+:host .zonos--notification-item {
+  cursor: pointer;
+  transition: all 0.3s ease;
+  padding: var(--amino-space-8);
+  border-radius: var(--border-radius, var(--amino-radius-6));
+  opacity: 0;
+  flex-shrink: 0.0001;
+  transform: translateY(100%);
+}
+:host .zonos--notification-item + :host .zonos--notification-item {
+  margin-top: 8px;
+}
+:host .zonos--notification-item.show {
+  opacity: 1;
+  transform: translateY(0);
+  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);
+}

package/dist/collection/components/common/zonos-notification/zonos-notification.js

@@ -0,0 +1,131 @@
+import { h, Host } from "@stencil/core";
+import { classes } from "../../utils/classes";
+export class ZonosNotification {
+  constructor() {
+    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 is() { return "zonos-notification"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-notification.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-notification.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "class": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom class to add to the notification"
+        },
+        "attribute": "class",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "notificationArray": {}
+    };
+  }
+  static get methods() {
+    return {
+      "showNotification": {
+        "complexType": {
+          "signature": "(notification: NotificationInit) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "NotificationInit": {
+              "location": "local",
+              "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-notification/zonos-notification.tsx",
+              "id": "src/components/common/zonos-notification/zonos-notification.tsx::NotificationInit"
+            },
+            "NotificationItem": {
+              "location": "global",
+              "id": "global::NotificationItem"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Show a notification",
+          "tags": []
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=zonos-notification.js.map

package/dist/collection/components/common/zonos-notification/zonos-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-notification.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-notification/zonos-notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AA0BvD,MAAM,OAAO,iBAAiB;;iBAIZ,EAAE;6BAE+B,EAAE;;EAEnD;;KAEG;EAEH,KAAK,CAAC,gBAAgB,CAAC,YAA8B;IACnD,qBAAqB;IACrB,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAC9D,MAAM,gBAAgB,mCACjB,YAAY,KACf,EAAE,EACF,OAAO,EAAE,YAAY,CAAC,OAAO,IAAI,IAAI,EACrC,eAAe,EAAE,EAAE,EACnB,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,SAAS,GACrC,CAAC;IACF,IAAI,CAAC,iBAAiB,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC;IACvE,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,CAAC,qBAAqB,CAAC;QACzB,EAAE;QACF,eAAe,EAAE,MAAM;OACxB,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;EAC/B,CAAC;EAEO,qBAAqB,CAAC,EAC5B,EAAE,EACF,eAAe,GAIhB;IACC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;MACjE,IAAI,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE;QAC1B,uCACK,YAAY,KACf,eAAe,IACf;OACH;MACD,OAAO,YAAY,CAAC;IACtB,CAAC,CAAC,CAAC;EACL,CAAC;EAED;;KAEG;EACK,kBAAkB,CAAC,EAAU;IACnC,qEAAqE;IACrE,IAAI,CAAC,qBAAqB,CAAC;MACzB,EAAE;MACF,eAAe,EAAE,EAAE;KACpB,CAAC,CAAC;IAEH,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,CACpD,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,CACvC,CAAC;IACJ,CAAC,EAAE,GAAG,CAAC,CAAC;EACV,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,OAAO,CAAC,CAAC,qCAAqC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;MAEnE,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE;QACzC,OAAO,CACL,0BACc,MAAM,EAClB,KAAK,EAAE,OAAO,CAAC;YACb,0BAA0B;YAC1B,YAAY,CAAC,IAAI;YACjB,YAAY,CAAC,eAAe;WAC7B,CAAC,EACF,GAAG,EAAE,YAAY,CAAC,EAAE,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;UAC3C,CAAC;UAED,kBAAY,KAAK,EAAC,QAAQ,IAAE,YAAY,CAAC,OAAO,CAAc,CAC1D,CACP,CAAC;MACJ,CAAC,CAAC,CACE,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Method, Prop, State } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\n\nexport type NotificationInit = {\n  message: string;\n  /**\n   * Time in milliseconds\n   * @default 4000\n   */\n  timeout?: number;\n  /**\n   * Type of notification\n   * @default 'success'\n   */\n  type?: 'error' | 'success' | 'warning';\n};\n\ntype NotificationItem = NotificationInit & {\n  id: string;\n  transitionClass: 'show' | '';\n};\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-notification.scss',\n  tag: 'zonos-notification',\n})\nexport class ZonosNotification {\n  /**\n   * Custom class to add to the notification\n   */\n  @Prop() class = '';\n\n  @State() notificationArray: NotificationItem[] = [];\n\n  /**\n   * Show a notification\n   */\n  @Method()\n  async showNotification(notification: NotificationInit) {\n    // random generate id\n    const id = `id-${Math.random().toString(36).substring(2, 9)}`;\n    const notificationItem: NotificationItem = {\n      ...notification,\n      id,\n      timeout: notification.timeout || 5000,\n      transitionClass: '',\n      type: notification.type || 'success',\n    };\n    this.notificationArray = [...this.notificationArray, notificationItem];\n    setTimeout(() => {\n      this.updateTransitionClass({\n        id,\n        transitionClass: 'show',\n      });\n    }, 50);\n\n    setTimeout(() => {\n      this.removeNotification(id);\n    }, notificationItem.timeout);\n  }\n\n  private updateTransitionClass({\n    id,\n    transitionClass,\n  }: {\n    id: string;\n    transitionClass: 'show' | '';\n  }) {\n    this.notificationArray = this.notificationArray.map(notification => {\n      if (notification.id === id) {\n        return {\n          ...notification,\n          transitionClass,\n        };\n      }\n      return notification;\n    });\n  }\n\n  /**\n   * Remove a notification\n   */\n  private removeNotification(id: string) {\n    // add hide class before removing the item 100ms to trigger animation\n    this.updateTransitionClass({\n      id,\n      transitionClass: '',\n    });\n\n    setTimeout(() => {\n      this.notificationArray = this.notificationArray.filter(\n        notification => notification.id !== id,\n      );\n    }, 300);\n  }\n\n  render() {\n    return (\n      <Host\n        class={classes(['zonos--elements zonos--notification', this.class])}\n      >\n        <div class=\"zonos--notification-items\">\n          {this.notificationArray.map(notification => {\n            return (\n              <div\n                aria-hidden=\"true\"\n                class={classes([\n                  'zonos--notification-item',\n                  notification.type,\n                  notification.transitionClass,\n                ])}\n                key={notification.id}\n                onClick={() => {\n                  this.removeNotification(notification.id);\n                }}\n              >\n                <zonos-text color=\"gray-0\">{notification.message}</zonos-text>\n              </div>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.css

@@ -0,0 +1,70 @@
+: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;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+}
+:host input {
+  margin: 0;
+  accent-color: var(--selected-border-color, var(--amino-blue-600));
+}
+:host .zonos--shipping-rich-radio-item {
+  display: flex;
+  flex: 1;
+  padding: var(--amino-space-16);
+  align-items: center;
+  gap: var(--amino-space-16);
+  cursor: pointer;
+  border: 1px solid var(--amino-gray-200);
+}
+:host .zonos--shipping-rich-radio-item:first-child {
+  border-top-left-radius: var(--border-radius, var(--amino-radius-10));
+  border-top-right-radius: var(--border-radius, var(--amino-radius-10));
+}
+:host .zonos--shipping-rich-radio-item:last-child {
+  border-bottom-left-radius: var(--border-radius, var(--amino-radius-10));
+  border-bottom-right-radius: var(--border-radius, var(--amino-radius-10));
+}
+:host .zonos--shipping-rich-radio-item.selected {
+  border-color: var(--selected-border-color, var(--amino-blue-600));
+}
+:host .zonos--shipping-info {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+:host .zonos--shipping-detail {
+  flex: 1;
+}
+:host .zonos--sub-detail {
+  display: inline-flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}