@zonos/elements 1.0.16

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

@@ -0,0 +1,156 @@
+import { r as registerInstance, h, H as Host } from './index-d1aa9293.js';
+import { c as classes } from './classes-0d95c529.js';
+
+const textOptions = {
+  pageHeader: {
+    label: 'Page Header (3XL) · 34px (2.125rem)',
+    size: '3xl',
+    tag: 'h2',
+    weight: 900,
+  },
+  secondaryPageHeader: {
+    label: 'Secondary Page Header (3XL) • 34px, 500 "Medium"',
+    size: '3xl',
+    tag: 'h2',
+    weight: 500,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  header: {
+    label: 'Header (2XL) · 28px (1.75rem)',
+    size: '2xl',
+    tag: 'h3',
+    weight: 700,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  descriptionHeader: {
+    label: 'Description Header (2XL) · 28px (1.75rem)',
+    size: '2xl',
+    tag: 'h3',
+    weight: 700,
+  },
+  title: {
+    label: 'Title (XL) • 22px (1.375rem)',
+    size: 'xl',
+    tag: 'h4',
+    weight: 600,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  boldSubheader: {
+    label: 'Bold Subheader (L) • 18px (1.125rem)',
+    size: 'l',
+    tag: 'h5',
+    weight: 700,
+  },
+  semiBoldSubheader: {
+    label: 'Semi Bold Subheader (L / H4) • 18px (1.125rem)',
+    size: 'l',
+    tag: 'h5',
+    weight: 600,
+  },
+  subheader: {
+    label: 'Subheader (L) • 18px (1.125rem)',
+    size: 'l',
+    tag: 'h5',
+    weight: 500,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  boldLabel: {
+    label: 'Bold Label (Base) • 14px (.875rem)',
+    size: 'base',
+    tag: 'span',
+    weight: 700,
+  },
+  semiBoldLabel: {
+    label: 'Semi Bold Label (Base) • 14px (.875rem)',
+    size: 'base',
+    tag: 'span',
+    weight: 600,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  label: {
+    label: 'Label (Base) • 14px (.875rem)',
+    size: 'base',
+    tag: 'span',
+    weight: 500,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  body: {
+    label: 'Body (Base) • 14px (.875rem)',
+    size: 'base',
+    tag: 'span',
+    weight: 400,
+  },
+  smallHeader: {
+    label: 'Small header (S) • 12px (.75rem)',
+    size: 's',
+    tag: 'span',
+    weight: 600,
+  },
+  // eslint-disable-next-line sort-keys/sort-keys-fix
+  caption: {
+    label: 'Caption (S) • 12px (.75rem)',
+    size: 's',
+    tag: 'span',
+    weight: 400,
+  },
+  hintText: {
+    label: 'Hint text (XS) • 10px (.625rem)',
+    size: 'xs',
+    tag: 'span',
+    weight: 400,
+  },
+};
+
+const zonosTextCss = ":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{color:var(--color)}:host(.zonos--text-size-3xl)>*,:host(.zonos--text-size-3xl){font-size:var(--amino-font-size-3xl)}:host(.zonos--text-size-2xl)>*,:host(.zonos--text-size-2xl){font-size:var(--amino-font-size-2xl)}:host(.zonos--text-size-xl)>*,:host(.zonos--text-size-xl){font-size:var(--amino-font-size-xl)}:host(.zonos--text-size-l)>*,:host(.zonos--text-size-l){font-size:var(--amino-font-size-l)}:host(.zonos--text-size-base)>*,:host(.zonos--text-size-base){font-size:var(--amino-font-size-base)}:host(.zonos--text-size-s)>*,:host(.zonos--text-size-s){font-size:var(--amino-font-size-s)}:host(.zonos--text-size-xs)>*,:host(.zonos--text-size-xs){font-size:var(--amino-font-size-xs)}:host(.zonos--text-weight-900)>*,:host(.zonos--text-weight-900){font-weight:900}:host(.zonos--text-weight-700)>*,:host(.zonos--text-weight-700){font-weight:700}:host(.zonos--text-weight-600)>*,:host(.zonos--text-weight-600){font-weight:600}:host(.zonos--text-weight-500)>*,:host(.zonos--text-weight-500){font-weight:500}:host(.zonos--text-weight-400)>*,:host(.zonos--text-weight-400){font-weight:400}";
+
+const ZonosText = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.class = '';
+    this.color = 'gray-1200';
+    this.size = undefined;
+    this.type = 'body';
+    this.weight = undefined;
+    this.content = undefined;
+    this.ready = false;
+  }
+  componentDidRender() {
+    setTimeout(() => {
+      this.ready = true;
+    }, 100);
+  }
+  render() {
+    const { size: defaultSize, tag: defaultTag, weight: defaultWeight, } = textOptions.body;
+    const { size, tag, weight } = textOptions[this.type];
+    const textSize = this.size || size || defaultSize;
+    const textWeight = this.weight || weight || defaultWeight;
+    const textTag = tag || defaultTag;
+    const renderText = () => {
+      switch (textTag) {
+        case 'h2':
+          return (h("h2", null, h("slot", null)));
+        case 'h3':
+          return (h("h3", null, h("slot", null)));
+        case 'h4':
+          return (h("h4", null, h("slot", null)));
+        case 'h5':
+          return (h("h5", null, h("slot", null)));
+        case 'span':
+        default:
+          return (h("span", null, h("slot", null)));
+      }
+    };
+    return (h(Host, { class: classes([
+        `zonos--text-size-${textSize}`,
+        `zonos--text-weight-${textWeight}`,
+        this.class,
+      ]), style: {
+        '--color': this.color ? `var(--amino-${this.color})` : '',
+      } }, renderText()));
+  }
+};
+ZonosText.style = zonosTextCss;
+
+export { ZonosText as zonos_text };
+
+//# sourceMappingURL=zonos-text.entry.js.map

package/dist/zonos-elements/zonos-text.entry.js.map

@@ -0,0 +1 @@
+{"file":"zonos-text.entry.esm.js","mappings":"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","names":[],"sources":["src/types/styles/Text.ts","src/components/common/zonos-text/zonos-text.scss?tag=zonos-text&encapsulation=shadow","src/components/common/zonos-text/zonos-text.tsx"],"sourcesContent":["export const textOptions = {\n  pageHeader: {\n    label: 'Page Header (3XL) · 34px (2.125rem)',\n    size: '3xl',\n    tag: 'h2',\n    weight: 900,\n  },\n  secondaryPageHeader: {\n    label: 'Secondary Page Header (3XL) • 34px, 500 \"Medium\"',\n    size: '3xl',\n    tag: 'h2',\n    weight: 500,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  header: {\n    label: 'Header (2XL) · 28px (1.75rem)',\n    size: '2xl',\n    tag: 'h3',\n    weight: 700,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  descriptionHeader: {\n    label: 'Description Header (2XL) · 28px (1.75rem)',\n    size: '2xl',\n    tag: 'h3',\n    weight: 700,\n  },\n  title: {\n    label: 'Title (XL) • 22px (1.375rem)',\n    size: 'xl',\n    tag: 'h4',\n    weight: 600,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  boldSubheader: {\n    label: 'Bold Subheader (L) • 18px (1.125rem)',\n    size: 'l',\n    tag: 'h5',\n    weight: 700,\n  },\n  semiBoldSubheader: {\n    label: 'Semi Bold Subheader (L / H4) • 18px (1.125rem)',\n    size: 'l',\n    tag: 'h5',\n    weight: 600,\n  },\n  subheader: {\n    label: 'Subheader (L) • 18px (1.125rem)',\n    size: 'l',\n    tag: 'h5',\n    weight: 500,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  boldLabel: {\n    label: 'Bold Label (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 700,\n  },\n  semiBoldLabel: {\n    label: 'Semi Bold Label (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 600,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  label: {\n    label: 'Label (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 500,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  body: {\n    label: 'Body (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 400,\n  },\n  smallHeader: {\n    label: 'Small header (S) • 12px (.75rem)',\n    size: 's',\n    tag: 'span',\n    weight: 600,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  caption: {\n    label: 'Caption (S) • 12px (.75rem)',\n    size: 's',\n    tag: 'span',\n    weight: 400,\n  },\n  hintText: {\n    label: 'Hint text (XS) • 10px (.625rem)',\n    size: 'xs',\n    tag: 'span',\n    weight: 400,\n  },\n} as const;\n\ntype TextOptions = typeof textOptions;\nexport type Size = TextOptions[keyof TextOptions]['size'];\nexport type Type = keyof TextOptions;\nexport type FontWeight = TextOptions[keyof TextOptions]['weight'] | 800;\n","$color: var(--color);\n\n$sizes: (\n  '3xl': $amino-font-size-3xl,\n  '2xl': $amino-font-size-2xl,\n  'xl': $amino-font-size-xl,\n  'l': $amino-font-size-l,\n  'base': $amino-font-size-base,\n  's': $amino-font-size-s,\n  'xs': $amino-font-size-xs,\n);\n\n$weights: (\n  '900': 900,\n  '700': 700,\n  '600': 600,\n  '500': 500,\n  '400': 400,\n);\n\n:host {\n  color: var(--color);\n}\n\n@each $_size, $_value in $sizes {\n  :host(.zonos--text-size-#{$_size}) {\n    > *,\n    & {\n      font-size: $_value;\n    }\n  }\n}\n@each $_weight, $_value in $weights {\n  :host(.zonos--text-weight-#{$_weight}) {\n    > *,\n    & {\n      font-weight: $_value;\n    }\n  }\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { Color } from 'src/types/styles/Color';\nimport {\n  type FontWeight,\n  type Size,\n  type Type,\n  textOptions,\n} from 'src/types/styles/Text';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-text.scss',\n  tag: 'zonos-text',\n})\nexport class ZonosText {\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n  /**\n   * The icon element to display\n   */\n  @Prop() color: Color = 'gray-1200';\n\n  /**\n   * The size of the text\n   */\n  @Prop() size?: Size;\n\n  /**\n   * Type of the text to display\n   */\n  @Prop() type: Type = 'body';\n\n  /**\n   * The weight of the text\n   */\n  @Prop() weight?: FontWeight;\n\n  /**\n   * The tag to use for the text\n   */\n  @Prop() content?: string;\n\n  /**\n   * Whether or not the component is ready\n   */\n  @State() ready: boolean = false;\n\n  componentDidRender() {\n    setTimeout(() => {\n      this.ready = true;\n    }, 100);\n  }\n\n  render() {\n    const {\n      size: defaultSize,\n      tag: defaultTag,\n      weight: defaultWeight,\n    } = textOptions.body;\n    const { size, tag, weight } = textOptions[this.type];\n\n    const textSize = this.size || size || defaultSize;\n    const textWeight = this.weight || weight || defaultWeight;\n    const textTag = tag || defaultTag;\n\n    const renderText = () => {\n      switch (textTag) {\n        case 'h2':\n          return (\n            <h2>\n              <slot></slot>\n            </h2>\n          );\n        case 'h3':\n          return (\n            <h3>\n              <slot></slot>\n            </h3>\n          );\n        case 'h4':\n          return (\n            <h4>\n              <slot></slot>\n            </h4>\n          );\n        case 'h5':\n          return (\n            <h5>\n              <slot></slot>\n            </h5>\n          );\n        case 'span':\n        default:\n          return (\n            <span>\n              <slot></slot>\n            </span>\n          );\n      }\n    };\n\n    return (\n      <Host\n        class={classes([\n          `zonos--text-size-${textSize}`,\n          `zonos--text-weight-${textWeight}`,\n          this.class,\n        ])}\n        style={{\n          '--color': this.color ? `var(--amino-${this.color})` : '',\n        }}\n      >\n        {renderText()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/zonos-elements/zonos-text.system.entry.js

@@ -0,0 +1,2 @@
+System.register(["./index-87193773.system.js","./classes-ce25a814.system.js"],(function(e){"use strict";var t,s,o,i;return{setters:[function(e){t=e.r;s=e.h;o=e.H},function(e){i=e.c}],execute:function(){var a={pageHeader:{label:"Page Header (3XL) · 34px (2.125rem)",size:"3xl",tag:"h2",weight:900},secondaryPageHeader:{label:'Secondary Page Header (3XL) • 34px, 500 "Medium"',size:"3xl",tag:"h2",weight:500},header:{label:"Header (2XL) · 28px (1.75rem)",size:"2xl",tag:"h3",weight:700},descriptionHeader:{label:"Description Header (2XL) · 28px (1.75rem)",size:"2xl",tag:"h3",weight:700},title:{label:"Title (XL) • 22px (1.375rem)",size:"xl",tag:"h4",weight:600},boldSubheader:{label:"Bold Subheader (L) • 18px (1.125rem)",size:"l",tag:"h5",weight:700},semiBoldSubheader:{label:"Semi Bold Subheader (L / H4) • 18px (1.125rem)",size:"l",tag:"h5",weight:600},subheader:{label:"Subheader (L) • 18px (1.125rem)",size:"l",tag:"h5",weight:500},boldLabel:{label:"Bold Label (Base) • 14px (.875rem)",size:"base",tag:"span",weight:700},semiBoldLabel:{label:"Semi Bold Label (Base) • 14px (.875rem)",size:"base",tag:"span",weight:600},label:{label:"Label (Base) • 14px (.875rem)",size:"base",tag:"span",weight:500},body:{label:"Body (Base) • 14px (.875rem)",size:"base",tag:"span",weight:400},smallHeader:{label:"Small header (S) • 12px (.75rem)",size:"s",tag:"span",weight:600},caption:{label:"Caption (S) • 12px (.75rem)",size:"s",tag:"span",weight:400},hintText:{label:"Hint text (XS) • 10px (.625rem)",size:"xs",tag:"span",weight:400}};var n=":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{color:var(--color)}:host(.zonos--text-size-3xl)>*,:host(.zonos--text-size-3xl){font-size:var(--amino-font-size-3xl)}:host(.zonos--text-size-2xl)>*,:host(.zonos--text-size-2xl){font-size:var(--amino-font-size-2xl)}:host(.zonos--text-size-xl)>*,:host(.zonos--text-size-xl){font-size:var(--amino-font-size-xl)}:host(.zonos--text-size-l)>*,:host(.zonos--text-size-l){font-size:var(--amino-font-size-l)}:host(.zonos--text-size-base)>*,:host(.zonos--text-size-base){font-size:var(--amino-font-size-base)}:host(.zonos--text-size-s)>*,:host(.zonos--text-size-s){font-size:var(--amino-font-size-s)}:host(.zonos--text-size-xs)>*,:host(.zonos--text-size-xs){font-size:var(--amino-font-size-xs)}:host(.zonos--text-weight-900)>*,:host(.zonos--text-weight-900){font-weight:900}:host(.zonos--text-weight-700)>*,:host(.zonos--text-weight-700){font-weight:700}:host(.zonos--text-weight-600)>*,:host(.zonos--text-weight-600){font-weight:600}:host(.zonos--text-weight-500)>*,:host(.zonos--text-weight-500){font-weight:500}:host(.zonos--text-weight-400)>*,:host(.zonos--text-weight-400){font-weight:400}";var h=e("zonos_text",function(){function e(e){t(this,e);this.class="";this.color="gray-1200";this.size=undefined;this.type="body";this.weight=undefined;this.content=undefined;this.ready=false}e.prototype.componentDidRender=function(){var e=this;setTimeout((function(){e.ready=true}),100)};e.prototype.render=function(){var e=a.body,t=e.size,n=e.tag,h=e.weight;var l=a[this.type],r=l.size,z=l.tag,x=l.weight;var g=this.size||r||t;var d=this.weight||x||h;var c=z||n;var u=function(){switch(c){case"h2":return s("h2",null,s("slot",null));case"h3":return s("h3",null,s("slot",null));case"h4":return s("h4",null,s("slot",null));case"h5":return s("h5",null,s("slot",null));case"span":default:return s("span",null,s("slot",null))}};return s(o,{class:i(["zonos--text-size-".concat(g),"zonos--text-weight-".concat(d),this.class]),style:{"--color":this.color?"var(--amino-".concat(this.color,")"):""}},u())};return e}());h.style=n}}}));
+//# sourceMappingURL=zonos-text.system.entry.js.map

package/dist/zonos-elements/zonos-text.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textOptions","pageHeader","label","size","tag","weight","secondaryPageHeader","header","descriptionHeader","title","boldSubheader","semiBoldSubheader","subheader","boldLabel","semiBoldLabel","body","smallHeader","caption","hintText","zonosTextCss","ZonosText","exports","class_1","prototype","componentDidRender","_this","this","setTimeout","ready","render","_a","defaultSize","defaultTag","defaultWeight","_b","type","textSize","textWeight","textTag","renderText","h","Host","class","classes","concat","style","color"],"sources":["src/types/styles/Text.ts","src/components/common/zonos-text/zonos-text.scss?tag=zonos-text&encapsulation=shadow","src/components/common/zonos-text/zonos-text.tsx"],"sourcesContent":["export const textOptions = {\n  pageHeader: {\n    label: 'Page Header (3XL) · 34px (2.125rem)',\n    size: '3xl',\n    tag: 'h2',\n    weight: 900,\n  },\n  secondaryPageHeader: {\n    label: 'Secondary Page Header (3XL) • 34px, 500 \"Medium\"',\n    size: '3xl',\n    tag: 'h2',\n    weight: 500,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  header: {\n    label: 'Header (2XL) · 28px (1.75rem)',\n    size: '2xl',\n    tag: 'h3',\n    weight: 700,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  descriptionHeader: {\n    label: 'Description Header (2XL) · 28px (1.75rem)',\n    size: '2xl',\n    tag: 'h3',\n    weight: 700,\n  },\n  title: {\n    label: 'Title (XL) • 22px (1.375rem)',\n    size: 'xl',\n    tag: 'h4',\n    weight: 600,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  boldSubheader: {\n    label: 'Bold Subheader (L) • 18px (1.125rem)',\n    size: 'l',\n    tag: 'h5',\n    weight: 700,\n  },\n  semiBoldSubheader: {\n    label: 'Semi Bold Subheader (L / H4) • 18px (1.125rem)',\n    size: 'l',\n    tag: 'h5',\n    weight: 600,\n  },\n  subheader: {\n    label: 'Subheader (L) • 18px (1.125rem)',\n    size: 'l',\n    tag: 'h5',\n    weight: 500,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  boldLabel: {\n    label: 'Bold Label (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 700,\n  },\n  semiBoldLabel: {\n    label: 'Semi Bold Label (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 600,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  label: {\n    label: 'Label (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 500,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  body: {\n    label: 'Body (Base) • 14px (.875rem)',\n    size: 'base',\n    tag: 'span',\n    weight: 400,\n  },\n  smallHeader: {\n    label: 'Small header (S) • 12px (.75rem)',\n    size: 's',\n    tag: 'span',\n    weight: 600,\n  },\n  // eslint-disable-next-line sort-keys/sort-keys-fix\n  caption: {\n    label: 'Caption (S) • 12px (.75rem)',\n    size: 's',\n    tag: 'span',\n    weight: 400,\n  },\n  hintText: {\n    label: 'Hint text (XS) • 10px (.625rem)',\n    size: 'xs',\n    tag: 'span',\n    weight: 400,\n  },\n} as const;\n\ntype TextOptions = typeof textOptions;\nexport type Size = TextOptions[keyof TextOptions]['size'];\nexport type Type = keyof TextOptions;\nexport type FontWeight = TextOptions[keyof TextOptions]['weight'] | 800;\n","$color: var(--color);\n\n$sizes: (\n  '3xl': $amino-font-size-3xl,\n  '2xl': $amino-font-size-2xl,\n  'xl': $amino-font-size-xl,\n  'l': $amino-font-size-l,\n  'base': $amino-font-size-base,\n  's': $amino-font-size-s,\n  'xs': $amino-font-size-xs,\n);\n\n$weights: (\n  '900': 900,\n  '700': 700,\n  '600': 600,\n  '500': 500,\n  '400': 400,\n);\n\n:host {\n  color: var(--color);\n}\n\n@each $_size, $_value in $sizes {\n  :host(.zonos--text-size-#{$_size}) {\n    > *,\n    & {\n      font-size: $_value;\n    }\n  }\n}\n@each $_weight, $_value in $weights {\n  :host(.zonos--text-weight-#{$_weight}) {\n    > *,\n    & {\n      font-weight: $_value;\n    }\n  }\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { Color } from 'src/types/styles/Color';\nimport {\n  type FontWeight,\n  type Size,\n  type Type,\n  textOptions,\n} from 'src/types/styles/Text';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-text.scss',\n  tag: 'zonos-text',\n})\nexport class ZonosText {\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n  /**\n   * The icon element to display\n   */\n  @Prop() color: Color = 'gray-1200';\n\n  /**\n   * The size of the text\n   */\n  @Prop() size?: Size;\n\n  /**\n   * Type of the text to display\n   */\n  @Prop() type: Type = 'body';\n\n  /**\n   * The weight of the text\n   */\n  @Prop() weight?: FontWeight;\n\n  /**\n   * The tag to use for the text\n   */\n  @Prop() content?: string;\n\n  /**\n   * Whether or not the component is ready\n   */\n  @State() ready: boolean = false;\n\n  componentDidRender() {\n    setTimeout(() => {\n      this.ready = true;\n    }, 100);\n  }\n\n  render() {\n    const {\n      size: defaultSize,\n      tag: defaultTag,\n      weight: defaultWeight,\n    } = textOptions.body;\n    const { size, tag, weight } = textOptions[this.type];\n\n    const textSize = this.size || size || defaultSize;\n    const textWeight = this.weight || weight || defaultWeight;\n    const textTag = tag || defaultTag;\n\n    const renderText = () => {\n      switch (textTag) {\n        case 'h2':\n          return (\n            <h2>\n              <slot></slot>\n            </h2>\n          );\n        case 'h3':\n          return (\n            <h3>\n              <slot></slot>\n            </h3>\n          );\n        case 'h4':\n          return (\n            <h4>\n              <slot></slot>\n            </h4>\n          );\n        case 'h5':\n          return (\n            <h5>\n              <slot></slot>\n            </h5>\n          );\n        case 'span':\n        default:\n          return (\n            <span>\n              <slot></slot>\n            </span>\n          );\n      }\n    };\n\n    return (\n      <Host\n        class={classes([\n          `zonos--text-size-${textSize}`,\n          `zonos--text-weight-${textWeight}`,\n          this.class,\n        ])}\n        style={{\n          '--color': this.color ? `var(--amino-${this.color})` : '',\n        }}\n      >\n        {renderText()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"0MAAO,IAAMA,EAAc,CACzBC,WAAY,CACVC,MAAO,sCACPC,KAAM,MACNC,IAAK,KACLC,OAAQ,KAEVC,oBAAqB,CACnBJ,MAAO,mDACPC,KAAM,MACNC,IAAK,KACLC,OAAQ,KAGVE,OAAQ,CACNL,MAAO,gCACPC,KAAM,MACNC,IAAK,KACLC,OAAQ,KAGVG,kBAAmB,CACjBN,MAAO,4CACPC,KAAM,MACNC,IAAK,KACLC,OAAQ,KAEVI,MAAO,CACLP,MAAO,+BACPC,KAAM,KACNC,IAAK,KACLC,OAAQ,KAGVK,cAAe,CACbR,MAAO,uCACPC,KAAM,IACNC,IAAK,KACLC,OAAQ,KAEVM,kBAAmB,CACjBT,MAAO,iDACPC,KAAM,IACNC,IAAK,KACLC,OAAQ,KAEVO,UAAW,CACTV,MAAO,kCACPC,KAAM,IACNC,IAAK,KACLC,OAAQ,KAGVQ,UAAW,CACTX,MAAO,qCACPC,KAAM,OACNC,IAAK,OACLC,OAAQ,KAEVS,cAAe,CACbZ,MAAO,0CACPC,KAAM,OACNC,IAAK,OACLC,OAAQ,KAGVH,MAAO,CACLA,MAAO,gCACPC,KAAM,OACNC,IAAK,OACLC,OAAQ,KAGVU,KAAM,CACJb,MAAO,+BACPC,KAAM,OACNC,IAAK,OACLC,OAAQ,KAEVW,YAAa,CACXd,MAAO,mCACPC,KAAM,IACNC,IAAK,OACLC,OAAQ,KAGVY,QAAS,CACPf,MAAO,8BACPC,KAAM,IACNC,IAAK,OACLC,OAAQ,KAEVa,SAAU,CACRhB,MAAO,kCACPC,KAAM,KACNC,IAAK,OACLC,OAAQ,MChGZ,IAAMc,EAAe,u0C,ICgBRC,EAASC,EAAA,wB,mCAII,G,WAID,Y,8BAUF,O,wDAeK,K,CAE1BC,EAAAC,UAAAC,mBAAA,eAAAC,EAAAC,KACEC,YAAW,WACTF,EAAKG,MAAQ,I,GACZ,I,EAGLN,EAAAC,UAAAM,OAAA,WACQ,IAAAC,EAIF9B,EAAYe,KAHRgB,EAAWD,EAAA3B,KACZ6B,EAAUF,EAAA1B,IACP6B,EAAaH,EAAAzB,OAEjB,IAAA6B,EAAwBlC,EAAY0B,KAAKS,MAAvChC,EAAI+B,EAAA/B,KAAEC,EAAG8B,EAAA9B,IAAEC,EAAM6B,EAAA7B,OAEzB,IAAM+B,EAAWV,KAAKvB,MAAQA,GAAQ4B,EACtC,IAAMM,EAAaX,KAAKrB,QAAUA,GAAU4B,EAC5C,IAAMK,EAAUlC,GAAO4B,EAEvB,IAAMO,EAAa,WACjB,OAAQD,GACN,IAAK,KACH,OACEE,EAAA,UACEA,EAAA,cAGN,IAAK,KACH,OACEA,EAAA,UACEA,EAAA,cAGN,IAAK,KACH,OACEA,EAAA,UACEA,EAAA,cAGN,IAAK,KACH,OACEA,EAAA,UACEA,EAAA,cAGN,IAAK,OACL,QACE,OACEA,EAAA,YACEA,EAAA,c,EAMV,OACEA,EAACC,EAAI,CACHC,MAAOC,EAAQ,CACb,oBAAAC,OAAoBR,GACpB,sBAAAQ,OAAsBP,GACtBX,KAAKgB,QAEPG,MAAO,CACL,UAAWnB,KAAKoB,MAAQ,eAAAF,OAAelB,KAAKoB,MAAK,KAAM,KAGxDP,I,WApGa,I"}