import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const klevuTypographyCss = ":host{--klevu-typography-color:inherit;display:block}span{display:inline-block}.variant-h1{font-size:var(--klevu-typography-font-size, var(--klevu-h1-size));font-weight:var(--klevu-h1-weight);line-height:var(--klevu-h1-line-height);color:var(--klevu-typography-color, var(--klevu-color-neutral-8))}.variant-h2{font-size:var(--klevu-typography-font-size, var(--klevu-h2-size));font-weight:var(--klevu-h2-weight);line-height:var(--klevu-h2-line-height);color:var(--klevu-typography-color, var(--klevu-color-neutral-8))}.variant-h3{font-size:var(--klevu-typography-font-size, var(--klevu-h3-size));font-weight:var(--klevu-h3-weight);line-height:var(--klevu-h3-line-height);color:var(--klevu-typography-color, var(--klevu-color-neutral-8))}.variant-h4{font-size:var(--klevu-typography-font-size, var(--klevu-h4-size));font-weight:var(--klevu-h4-weight);line-height:var(--klevu-h4-line-height);color:var(--klevu-typography-color, var(--klevu-color-neutral-8))}.variant-body-l,.variant-body-l-bold{font-size:var(--klevu-typography-font-size, var(--klevu-body-l-size));line-height:var(--klevu-body-l-line-height);color:var(--klevu-typography-color, var(--klevu-color-neutral-8))}.variant-body-m,.variant-body-m-bold{font-size:var(--klevu-typography-font-size, var(--klevu-body-m-size));line-height:var(--klevu-body-m-line-height);color:var(--klevu-typography-color, var(--klevu-color-neutral-8))}.variant-body-s,.variant-body-s-bold{font-size:var(--klevu-typography-font-size, var(--klevu-body-s-size));line-height:var(--klevu-body-s-line-height);color:var(--klevu-typography-color, var(--klevu-color-neutral-8))}.variant-body-xs,.variant-body-xs-bold{font-size:var(--klevu-typography-font-size, var(--klevu-body-xs-size));line-height:var(--klevu-body-xs-line-height);color:var(--klevu-typography-color, var(--klevu-color-neutral-8))}.variant-body-l,.variant-body-m,.variant-body-s,.variant-body-xs{font-weight:var(--klevu-typography-font-weight, 400)}.variant-body-l-bold,.variant-body-m-bold,.variant-body-s-bold,.variant-body-xs-bold{font-weight:var(--klevu-typography-font-weight, 600)}";

const KlevuTypography = /*@__PURE__*/ proxyCustomElement(class KlevuTypography extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.variant = undefined;
    this.fullWidth = undefined;
  }
  render() {
    let style = {};
    if (this.fullWidth) {
      style.width = "100%";
    }
    return (h("span", { class: `variant-${this.variant}`, style: style }, h("slot", null)));
  }
  static get style() { return klevuTypographyCss; }
}, [4, "klevu-typography", {
    "variant": [1],
    "fullWidth": [4, "full-width"]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["klevu-typography"];
  components.forEach(tagName => { switch (tagName) {
    case "klevu-typography":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, KlevuTypography);
      }
      break;
  } });
}
defineCustomElement();

export { KlevuTypography as K, defineCustomElement as d };

//# sourceMappingURL=klevu-typography2.js.map