@zonos/elements 1.1.2 → 1.2.1

package/dist/zonos-elements/zonos-shipping-rich-radio.entry.js

@@ -1,50 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-d1aa9293.js';
-import { z as zonosStore } from './zonosStore-1c9c7d76.js';
-import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-e8ad5967.js';
-import { i as isColorVariable } from './isColorVariable-4cda28c9.js';
-
-const zonosShippingRichRadioCss = ":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-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--amino-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--amino-space-16);-ms-flex-align:center;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";
-
-const ZonosShippingRichRadio = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.radioSelected = createEvent(this, "radioSelected", 7);
-    this.handleRichRadioSelect = (item) => {
-      var _a;
-      this.selectedItem = item;
-      (_a = this.radioSelected) === null || _a === void 0 ? void 0 : _a.emit(item);
-    };
-    this.getRadioItemStyleVariables = () => {
-      const usedColor = this.borderColor || zonosStore.appearance.colorSecondary;
-      const secondaryColor = isColorVariable(usedColor)
-        ? `var(--amino-${usedColor})`
-        : usedColor;
-      return {
-        '--border-radius': getBorderRadius(this.borderStyle),
-        '--selected-border-color': secondaryColor || 'unset',
-      };
-    };
-    this.items = undefined;
-    this.borderColor = undefined;
-    this.borderStyle = undefined;
-    this.theme = undefined;
-    this.selectedItem = null;
-  }
-  render() {
-    var _a;
-    return (h(Host, { class: "zonos--shipping-rich-radio zonos--elements", "data-theme": this.theme, style: this.getRadioItemStyleVariables() }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => {
-      var _a;
-      const selected = ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value) === item.value;
-      return (h("div", { "aria-hidden": "true", class: classes([
-          'zonos--shipping-rich-radio-item',
-          selected && 'selected',
-        ]), onClick: () => this.handleRichRadioSelect(item) }, h("input", { checked: selected, class: "zonos--shipping-rich-radio-input", name: "zonos--shipping-rich-radio", type: "radio", value: item.value }), h("div", { class: "zonos--shipping-info" }, h("div", { class: "zonos--shipping-detail" }, h("zonos-text", { class: "zonos--shipping-label", type: "label" }, item.label), (item.sublabel || item.caption) && (h("div", { class: "zonos--sub-detail" }, item.sublabel && (h("zonos-text", { color: "gray-800" }, item.sublabel)), item.caption && (h("zonos-text", { color: "gray-400" }, item.caption))))), h("zonos-text", { type: "semiBoldLabel" }, item.price))));
-    })));
-  }
-};
-ZonosShippingRichRadio.style = zonosShippingRichRadioCss;
-
-export { ZonosShippingRichRadio as zonos_shipping_rich_radio };
-
-//# sourceMappingURL=zonos-shipping-rich-radio.entry.js.map

package/dist/zonos-elements/zonos-shipping-rich-radio.entry.js.map

@@ -1 +0,0 @@
-{"file":"zonos-shipping-rich-radio.entry.esm.js","mappings":";;;;;;AAAA,MAAM,yBAAyB,GAAG,26CAA26C;;MC6Bh8C,sBAAsB;;;;IA+BzB,0BAAqB,GAAG,CAAC,IAA2B;;MAC1D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;MACzB,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC,CAAC;IAEM,+BAA0B,GAAG;MACnC,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,IAAI,UAAU,CAAC,UAAU,CAAC,cAAc,CAAC;MAC3E,MAAM,cAAc,GAAG,eAAe,CAAC,SAAS,CAAC;UAC7C,eAAe,SAAS,GAAG;UAC3B,SAAS,CAAC;MAEd,OAAO;QACL,iBAAiB,EAAE,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;QACpD,yBAAyB,EAAE,cAAc,IAAI,OAAO;OACrD,CAAC;KACH,CAAC;;;;;wBAtBoD,IAAI;;EAwB1D,MAAM;;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAC,4CAA4C,gBACtC,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,0BAA0B,EAAE,IAEvC,MAAA,IAAI,CAAC,KAAK,0CAAE,GAAG,CAAC,IAAI;;MACnB,MAAM,QAAQ,GAAG,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,MAAK,IAAI,CAAC,KAAK,CAAC;MACzD,QACE,0BACc,MAAM,EAClB,KAAK,EAAE,OAAO,CAAC;UACb,iCAAiC;UACjC,QAAQ,IAAI,UAAU;SACvB,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAE/C,aACE,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAC,4BAA4B,EACjC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACF,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,wBAAwB,IACjC,kBAAY,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,IACnD,IAAI,CAAC,KAAK,CACA,EACZ,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,MAC7B,WAAK,KAAK,EAAC,mBAAmB,IAC3B,IAAI,CAAC,QAAQ,KACZ,kBAAY,KAAK,EAAC,UAAU,IACzB,IAAI,CAAC,QAAQ,CACH,CACd,EACA,IAAI,CAAC,OAAO,KACX,kBAAY,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,OAAO,CAAc,CACzD,CACG,CACP,CACG,EACN,kBAAY,IAAI,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAc,CACtD,CACF,EACN;KACH,CAAC,CACG,EACP;GACH;;;;;;","names":[],"sources":["src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.scss?tag=zonos-shipping-rich-radio&encapsulation=shadow","src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx"],"sourcesContent":["$selected-border-color: var(--selected-border-color, $amino-blue-600);\n$border-radius: var(--border-radius, $amino-radius-10);\n:host {\n  display: flex;\n  flex-direction: column;\n  input {\n    margin: 0;\n    accent-color: $selected-border-color;\n  }\n  .zonos--shipping-rich-radio-item {\n    display: flex;\n    flex: 1;\n    padding: $amino-space-16;\n    align-items: center;\n    gap: $amino-space-16;\n    cursor: pointer;\n    border: 1px solid $amino-gray-200;\n    &:first-child {\n      border-top-left-radius: $border-radius;\n      border-top-right-radius: $border-radius;\n    }\n    &:last-child {\n      border-bottom-left-radius: $border-radius;\n      border-bottom-right-radius: $border-radius;\n    }\n\n    &.selected {\n      border-color: $selected-border-color;\n    }\n  }\n  .zonos--shipping-info {\n    display: flex;\n    align-items: center;\n    flex: 1;\n  }\n  .zonos--shipping-detail {\n    flex: 1;\n  }\n  .zonos--sub-detail {\n    display: inline-flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { isColorVariable } from 'src/components/utils/isColorVariable';\nimport type { Color, ElementsUiStyle, ElementsUiTheme } from 'src/types';\n\nexport type ShippingRichRadioItem = {\n  caption?: string;\n  label: string;\n  price: string;\n  sublabel?: string;\n  value: string | number;\n};\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-shipping-rich-radio.scss',\n  tag: 'zonos-shipping-rich-radio',\n})\nexport class ZonosShippingRichRadio {\n  /**\n   * List of items to display\n   */\n  @Prop() items!: ShippingRichRadioItem[];\n\n  /**\n   * Override border color of the radio item\n   */\n  @Prop() borderColor?: Color | (string & { _placeholder?: never });\n\n  /**\n   * Override border color of the radio item\n   */\n  @Prop() borderStyle?: ElementsUiStyle;\n\n  /**\n   * Theme of the radio item\n   */\n  @Prop() theme?: ElementsUiTheme;\n  /**\n   * Selected item\n   * @default {null|firstItem}\n   */\n  @State() selectedItem: ShippingRichRadioItem | null = null;\n\n  /**\n   * Event emitted when an item is selected\n   */\n  @Event() radioSelected?: EventEmitter<ShippingRichRadioItem>;\n\n  private handleRichRadioSelect = (item: ShippingRichRadioItem) => {\n    this.selectedItem = item;\n    this.radioSelected?.emit(item);\n  };\n\n  private getRadioItemStyleVariables = () => {\n    const usedColor = this.borderColor || zonosStore.appearance.colorSecondary;\n    const secondaryColor = isColorVariable(usedColor)\n      ? `var(--amino-${usedColor})`\n      : usedColor;\n\n    return {\n      '--border-radius': getBorderRadius(this.borderStyle),\n      '--selected-border-color': secondaryColor || 'unset',\n    };\n  };\n\n  render() {\n    return (\n      <Host\n        class=\"zonos--shipping-rich-radio zonos--elements\"\n        data-theme={this.theme}\n        style={this.getRadioItemStyleVariables()}\n      >\n        {this.items?.map(item => {\n          const selected = this.selectedItem?.value === item.value;\n          return (\n            <div\n              aria-hidden=\"true\"\n              class={classes([\n                'zonos--shipping-rich-radio-item',\n                selected && 'selected',\n              ])}\n              onClick={() => this.handleRichRadioSelect(item)}\n            >\n              <input\n                checked={selected}\n                class=\"zonos--shipping-rich-radio-input\"\n                name=\"zonos--shipping-rich-radio\"\n                type=\"radio\"\n                value={item.value}\n              />\n              <div class=\"zonos--shipping-info\">\n                <div class=\"zonos--shipping-detail\">\n                  <zonos-text class=\"zonos--shipping-label\" type=\"label\">\n                    {item.label}\n                  </zonos-text>\n                  {(item.sublabel || item.caption) && (\n                    <div class=\"zonos--sub-detail\">\n                      {item.sublabel && (\n                        <zonos-text color=\"gray-800\">\n                          {item.sublabel}\n                        </zonos-text>\n                      )}\n                      {item.caption && (\n                        <zonos-text color=\"gray-400\">{item.caption}</zonos-text>\n                      )}\n                    </div>\n                  )}\n                </div>\n                <zonos-text type=\"semiBoldLabel\">{item.price}</zonos-text>\n              </div>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/zonos-elements/zonos-shipping-rich-radio.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./index-87193773.system.js","./zonosStore-e5c545ea.system.js","./classes-ce25a814.system.js","./getBorderRadius-b59c3ada.system.js","./isColorVariable-be454101.system.js"],(function(e){"use strict";var i,o,s,t,r,a,n,l;return{setters:[function(e){i=e.r;o=e.c;s=e.h;t=e.H},function(e){r=e.z},function(e){a=e.c},function(e){n=e.g},function(e){l=e.i}],execute:function(){var d=":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-direction:column;flex-direction:column}:host input{margin:0;accent-color:var(--selected-border-color, var(--amino-blue-600))}:host .zonos--shipping-rich-radio-item{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--amino-space-16);-ms-flex-align:center;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1}:host .zonos--shipping-detail{-ms-flex:1;flex:1}:host .zonos--sub-detail{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}";var c=e("zonos_shipping_rich_radio",function(){function e(e){var s=this;i(this,e);this.radioSelected=o(this,"radioSelected",7);this.handleRichRadioSelect=function(e){var i;s.selectedItem=e;(i=s.radioSelected)===null||i===void 0?void 0:i.emit(e)};this.getRadioItemStyleVariables=function(){var e=s.borderColor||r.appearance.colorSecondary;var i=l(e)?"var(--amino-".concat(e,")"):e;return{"--border-radius":n(s.borderStyle),"--selected-border-color":i||"unset"}};this.items=undefined;this.borderColor=undefined;this.borderStyle=undefined;this.theme=undefined;this.selectedItem=null}e.prototype.render=function(){var e=this;var i;return s(t,{class:"zonos--shipping-rich-radio zonos--elements","data-theme":this.theme,style:this.getRadioItemStyleVariables()},(i=this.items)===null||i===void 0?void 0:i.map((function(i){var o;var t=((o=e.selectedItem)===null||o===void 0?void 0:o.value)===i.value;return s("div",{"aria-hidden":"true",class:a(["zonos--shipping-rich-radio-item",t&&"selected"]),onClick:function(){return e.handleRichRadioSelect(i)}},s("input",{checked:t,class:"zonos--shipping-rich-radio-input",name:"zonos--shipping-rich-radio",type:"radio",value:i.value}),s("div",{class:"zonos--shipping-info"},s("div",{class:"zonos--shipping-detail"},s("zonos-text",{class:"zonos--shipping-label",type:"label"},i.label),(i.sublabel||i.caption)&&s("div",{class:"zonos--sub-detail"},i.sublabel&&s("zonos-text",{color:"gray-800"},i.sublabel),i.caption&&s("zonos-text",{color:"gray-400"},i.caption))),s("zonos-text",{type:"semiBoldLabel"},i.price)))})))};return e}());c.style=d}}}));
-//# sourceMappingURL=zonos-shipping-rich-radio.system.entry.js.map

package/dist/zonos-elements/zonos-shipping-rich-radio.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["zonosShippingRichRadioCss","ZonosShippingRichRadio","exports","this","handleRichRadioSelect","item","_this","selectedItem","_a","radioSelected","emit","getRadioItemStyleVariables","usedColor","borderColor","zonosStore","appearance","colorSecondary","secondaryColor","isColorVariable","concat","getBorderRadius","borderStyle","class_1","prototype","render","h","Host","class","theme","style","items","map","selected","value","classes","onClick","checked","name","type","label","sublabel","caption","color","price"],"sources":["src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.scss?tag=zonos-shipping-rich-radio&encapsulation=shadow","src/components/common/zonos-shipping-rich-radio/zonos-shipping-rich-radio.tsx"],"sourcesContent":["$selected-border-color: var(--selected-border-color, $amino-blue-600);\n$border-radius: var(--border-radius, $amino-radius-10);\n:host {\n  display: flex;\n  flex-direction: column;\n  input {\n    margin: 0;\n    accent-color: $selected-border-color;\n  }\n  .zonos--shipping-rich-radio-item {\n    display: flex;\n    flex: 1;\n    padding: $amino-space-16;\n    align-items: center;\n    gap: $amino-space-16;\n    cursor: pointer;\n    border: 1px solid $amino-gray-200;\n    &:first-child {\n      border-top-left-radius: $border-radius;\n      border-top-right-radius: $border-radius;\n    }\n    &:last-child {\n      border-bottom-left-radius: $border-radius;\n      border-bottom-right-radius: $border-radius;\n    }\n\n    &.selected {\n      border-color: $selected-border-color;\n    }\n  }\n  .zonos--shipping-info {\n    display: flex;\n    align-items: center;\n    flex: 1;\n  }\n  .zonos--shipping-detail {\n    flex: 1;\n  }\n  .zonos--sub-detail {\n    display: inline-flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n}\n","import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { isColorVariable } from 'src/components/utils/isColorVariable';\nimport type { Color, ElementsUiStyle, ElementsUiTheme } from 'src/types';\n\nexport type ShippingRichRadioItem = {\n  caption?: string;\n  label: string;\n  price: string;\n  sublabel?: string;\n  value: string | number;\n};\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-shipping-rich-radio.scss',\n  tag: 'zonos-shipping-rich-radio',\n})\nexport class ZonosShippingRichRadio {\n  /**\n   * List of items to display\n   */\n  @Prop() items!: ShippingRichRadioItem[];\n\n  /**\n   * Override border color of the radio item\n   */\n  @Prop() borderColor?: Color | (string & { _placeholder?: never });\n\n  /**\n   * Override border color of the radio item\n   */\n  @Prop() borderStyle?: ElementsUiStyle;\n\n  /**\n   * Theme of the radio item\n   */\n  @Prop() theme?: ElementsUiTheme;\n  /**\n   * Selected item\n   * @default {null|firstItem}\n   */\n  @State() selectedItem: ShippingRichRadioItem | null = null;\n\n  /**\n   * Event emitted when an item is selected\n   */\n  @Event() radioSelected?: EventEmitter<ShippingRichRadioItem>;\n\n  private handleRichRadioSelect = (item: ShippingRichRadioItem) => {\n    this.selectedItem = item;\n    this.radioSelected?.emit(item);\n  };\n\n  private getRadioItemStyleVariables = () => {\n    const usedColor = this.borderColor || zonosStore.appearance.colorSecondary;\n    const secondaryColor = isColorVariable(usedColor)\n      ? `var(--amino-${usedColor})`\n      : usedColor;\n\n    return {\n      '--border-radius': getBorderRadius(this.borderStyle),\n      '--selected-border-color': secondaryColor || 'unset',\n    };\n  };\n\n  render() {\n    return (\n      <Host\n        class=\"zonos--shipping-rich-radio zonos--elements\"\n        data-theme={this.theme}\n        style={this.getRadioItemStyleVariables()}\n      >\n        {this.items?.map(item => {\n          const selected = this.selectedItem?.value === item.value;\n          return (\n            <div\n              aria-hidden=\"true\"\n              class={classes([\n                'zonos--shipping-rich-radio-item',\n                selected && 'selected',\n              ])}\n              onClick={() => this.handleRichRadioSelect(item)}\n            >\n              <input\n                checked={selected}\n                class=\"zonos--shipping-rich-radio-input\"\n                name=\"zonos--shipping-rich-radio\"\n                type=\"radio\"\n                value={item.value}\n              />\n              <div class=\"zonos--shipping-info\">\n                <div class=\"zonos--shipping-detail\">\n                  <zonos-text class=\"zonos--shipping-label\" type=\"label\">\n                    {item.label}\n                  </zonos-text>\n                  {(item.sublabel || item.caption) && (\n                    <div class=\"zonos--sub-detail\">\n                      {item.sublabel && (\n                        <zonos-text color=\"gray-800\">\n                          {item.sublabel}\n                        </zonos-text>\n                      )}\n                      {item.caption && (\n                        <zonos-text color=\"gray-400\">{item.caption}</zonos-text>\n                      )}\n                    </div>\n                  )}\n                </div>\n                <zonos-text type=\"semiBoldLabel\">{item.price}</zonos-text>\n              </div>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"iYAAA,IAAMA,EAA4B,46C,IC6BrBC,EAAsBC,EAAA,uC,gFA+BzBC,KAAAC,sBAAwB,SAACC,G,MAC/BC,EAAKC,aAAeF,GACpBG,EAAAF,EAAKG,iBAAa,MAAAD,SAAA,SAAAA,EAAEE,KAAKL,E,EAGnBF,KAAAQ,2BAA6B,WACnC,IAAMC,EAAYN,EAAKO,aAAeC,EAAWC,WAAWC,eAC5D,IAAMC,EAAiBC,EAAgBN,GACnC,eAAAO,OAAeP,EAAS,KACxBA,EAEJ,MAAO,CACL,kBAAmBQ,EAAgBd,EAAKe,aACxC,0BAA2BJ,GAAkB,Q,oHApBK,I,CAwBtDK,EAAAC,UAAAC,OAAA,eAAAlB,EAAAH,K,MACE,OACEsB,EAACC,EAAI,CACHC,MAAM,6CAA4C,aACtCxB,KAAKyB,MACjBC,MAAO1B,KAAKQ,+BAEXH,EAAAL,KAAK2B,SAAK,MAAAtB,SAAA,SAAAA,EAAEuB,KAAI,SAAA1B,G,MACf,IAAM2B,IAAWxB,EAAAF,EAAKC,gBAAY,MAAAC,SAAA,SAAAA,EAAEyB,SAAU5B,EAAK4B,MACnD,OACER,EAAA,qBACc,OACZE,MAAOO,EAAQ,CACb,kCACAF,GAAY,aAEdG,QAAS,WAAM,OAAA7B,EAAKF,sBAAsBC,EAA3B,GAEfoB,EAAA,SACEW,QAASJ,EACTL,MAAM,mCACNU,KAAK,6BACLC,KAAK,QACLL,MAAO5B,EAAK4B,QAEdR,EAAA,OAAKE,MAAM,wBACTF,EAAA,OAAKE,MAAM,0BACTF,EAAA,cAAYE,MAAM,wBAAwBW,KAAK,SAC5CjC,EAAKkC,QAENlC,EAAKmC,UAAYnC,EAAKoC,UACtBhB,EAAA,OAAKE,MAAM,qBACRtB,EAAKmC,UACJf,EAAA,cAAYiB,MAAM,YACfrC,EAAKmC,UAGTnC,EAAKoC,SACJhB,EAAA,cAAYiB,MAAM,YAAYrC,EAAKoC,WAK3ChB,EAAA,cAAYa,KAAK,iBAAiBjC,EAAKsC,Q,eA3FpB,I"}

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

@@ -1,156 +0,0 @@
-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

@@ -1 +0,0 @@
-{"file":"zonos-text.entry.esm.js","mappings":";;;AAAO,MAAM,WAAW,GAAG;EACzB,UAAU,EAAE;IACV,KAAK,EAAE,qCAAqC;IAC5C,IAAI,EAAE,KAAK;IACX,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,GAAG;GACZ;EACD,mBAAmB,EAAE;IACnB,KAAK,EAAE,kDAAkD;IACzD,IAAI,EAAE,KAAK;IACX,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,GAAG;GACZ;;EAED,MAAM,EAAE;IACN,KAAK,EAAE,+BAA+B;IACtC,IAAI,EAAE,KAAK;IACX,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,GAAG;GACZ;;EAED,iBAAiB,EAAE;IACjB,KAAK,EAAE,2CAA2C;IAClD,IAAI,EAAE,KAAK;IACX,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,GAAG;GACZ;EACD,KAAK,EAAE;IACL,KAAK,EAAE,8BAA8B;IACrC,IAAI,EAAE,IAAI;IACV,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,GAAG;GACZ;;EAED,aAAa,EAAE;IACb,KAAK,EAAE,sCAAsC;IAC7C,IAAI,EAAE,GAAG;IACT,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,GAAG;GACZ;EACD,iBAAiB,EAAE;IACjB,KAAK,EAAE,gDAAgD;IACvD,IAAI,EAAE,GAAG;IACT,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,GAAG;GACZ;EACD,SAAS,EAAE;IACT,KAAK,EAAE,iCAAiC;IACxC,IAAI,EAAE,GAAG;IACT,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,GAAG;GACZ;;EAED,SAAS,EAAE;IACT,KAAK,EAAE,oCAAoC;IAC3C,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,GAAG;GACZ;EACD,aAAa,EAAE;IACb,KAAK,EAAE,yCAAyC;IAChD,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,GAAG;GACZ;;EAED,KAAK,EAAE;IACL,KAAK,EAAE,+BAA+B;IACtC,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,GAAG;GACZ;;EAED,IAAI,EAAE;IACJ,KAAK,EAAE,8BAA8B;IACrC,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,GAAG;GACZ;EACD,WAAW,EAAE;IACX,KAAK,EAAE,kCAAkC;IACzC,IAAI,EAAE,GAAG;IACT,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,GAAG;GACZ;;EAED,OAAO,EAAE;IACP,KAAK,EAAE,6BAA6B;IACpC,IAAI,EAAE,GAAG;IACT,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,GAAG;GACZ;EACD,QAAQ,EAAE;IACR,KAAK,EAAE,iCAAiC;IACxC,IAAI,EAAE,IAAI;IACV,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,GAAG;GACZ;CACO;;AClGV,MAAM,YAAY,GAAG,s0CAAs0C;;MCgB90C,SAAS;;;iBAII,EAAE;iBAIH,WAAW;;gBAUb,MAAM;;;iBAeD,KAAK;;EAE/B,kBAAkB;IAChB,UAAU,CAAC;MACT,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACnB,EAAE,GAAG,CAAC,CAAC;GACT;EAED,MAAM;IACJ,MAAM,EACJ,IAAI,EAAE,WAAW,EACjB,GAAG,EAAE,UAAU,EACf,MAAM,EAAE,aAAa,GACtB,GAAG,WAAW,CAAC,IAAI,CAAC;IACrB,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAErD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,WAAW,CAAC;IAClD,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,IAAI,MAAM,IAAI,aAAa,CAAC;IAC1D,MAAM,OAAO,GAAG,GAAG,IAAI,UAAU,CAAC;IAElC,MAAM,UAAU,GAAG;MACjB,QAAQ,OAAO;QACb,KAAK,IAAI;UACP,QACE,cACE,eAAa,CACV,EACL;QACJ,KAAK,IAAI;UACP,QACE,cACE,eAAa,CACV,EACL;QACJ,KAAK,IAAI;UACP,QACE,cACE,eAAa,CACV,EACL;QACJ,KAAK,IAAI;UACP,QACE,cACE,eAAa,CACV,EACL;QACJ,KAAK,MAAM,CAAC;QACZ;UACE,QACE,gBACE,eAAa,CACR,EACP;OACL;KACF,CAAC;IAEF,QACE,EAAC,IAAI,IACH,KAAK,EAAE,OAAO,CAAC;QACb,oBAAoB,QAAQ,EAAE;QAC9B,sBAAsB,UAAU,EAAE;QAClC,IAAI,CAAC,KAAK;OACX,CAAC,EACF,KAAK,EAAE;QACL,SAAS,EAAE,IAAI,CAAC,KAAK,GAAG,eAAe,IAAI,CAAC,KAAK,GAAG,GAAG,EAAE;OAC1D,IAEA,UAAU,EAAE,CACR,EACP;GACH;;;;;;","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

@@ -1,2 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}