ReactMaterial3/dist/react-you-ui3.mjs

import { jsx as h } from "react/jsx-runtime";
import { useMemo as d } from "react";
/* empty css                 */
const v = ({ children: s, variant: r = "span", className: a, color: t = "", align: i, style: n, noWrap: l, id: y, size: m = "auto", htmlFor: f }) => {
  const o = d(() => t === "primary" ? "var(--md-sys-color-primary)" : t === "secondary" ? "var(--md-sys-color-secondary)" : t === "tertiary" ? "var(--md-sys-color-tertiary)" : t === "error" ? "var(--md-sys-color-error)" : t === "on-primary" ? "var(--md-sys-color-on-primary)" : t === "on-secondary" ? "var(--md-sys-color-on-secondary)" : t === "on-tertiary" ? "var(--md-sys-color-on-tertiary)" : t === "on-error" ? "var(--md-sys-color-on-error)" : t === "on-surface" ? "var(--md-sys-color-on-surface)" : t === "scrim" ? "var(--md-sys-color-scrim)" : t === "outline" ? "var(--md-sys-color-outline)" : t === "outline-variant" ? "var(--md-sys-color-outline-variant)" : t, [t]), e = d(() => {
    if (m === "auto")
      return {
        h1: "large",
        h2: "large",
        h3: "medium",
        h4: "medium",
        h5: "small",
        h6: "small",
        p: "large",
        span: "large",
        label: "large"
      }[r];
    if (m === "small") return "small";
    if (m === "medium") return "medium";
    if (m === "large") return "large";
  }, [m]);
  return r === "h1" ? /* @__PURE__ */ h(
    "h1",
    {
      className: a,
      style: {
        color: o,
        fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
        fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
        lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
        fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
        textAlign: i,
        whiteSpace: l ? "nowrap" : "normal",
        ...n
      },
      id: y,
      children: s
    }
  ) : r === "h2" ? /* @__PURE__ */ h(
    "h2",
    {
      className: a,
      style: {
        color: o,
        fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
        fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
        lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
        fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
        textAlign: i,
        whiteSpace: l ? "nowrap" : "normal",
        ...n
      },
      id: y,
      children: s
    }
  ) : r === "h3" ? /* @__PURE__ */ h(
    "h3",
    {
      className: a,
      style: {
        color: o,
        fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
        fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
        lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
        fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
        textAlign: i,
        whiteSpace: l ? "nowrap" : "normal",
        ...n
      },
      id: y,
      children: s
    }
  ) : r === "h4" ? /* @__PURE__ */ h(
    "h4",
    {
      className: a,
      style: {
        color: o,
        fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
        fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
        lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
        fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
        textAlign: i,
        whiteSpace: l ? "nowrap" : "normal",
        ...n
      },
      id: y,
      children: s
    }
  ) : r === "h5" ? /* @__PURE__ */ h(
    "h5",
    {
      className: a,
      style: {
        color: o,
        fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
        fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
        lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
        fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
        textAlign: i,
        whiteSpace: l ? "nowrap" : "normal",
        ...n
      },
      id: y,
      children: s
    }
  ) : r === "h6" ? /* @__PURE__ */ h(
    "h6",
    {
      className: a,
      style: {
        color: o,
        fontWeight: `var(--md-sys-typescale-headline-${e}-weight)`,
        fontSize: `var(--md-sys-typescale-headline-${e}-size)`,
        lineHeight: `var(--md-sys-typescale-headline-${e}-line-height)`,
        fontFamily: `var(--md-sys-typescale-headline-${e}-font)`,
        textAlign: i,
        whiteSpace: l ? "nowrap" : "normal",
        ...n
      },
      id: y,
      children: s
    }
  ) : r === "p" ? /* @__PURE__ */ h(
    "p",
    {
      className: a,
      style: {
        color: o,
        fontWeight: `var(--md-sys-typescale-body-${e}-weight)`,
        fontSize: `var(--md-sys-typescale-body-${e}-size)`,
        lineHeight: `var(--md-sys-typescale-body-${e}-line-height)`,
        fontFamily: `var(--md-sys-typescale-body-${e}-font)`,
        textAlign: i,
        whiteSpace: l ? "nowrap" : "normal",
        ...n
      },
      id: y,
      children: s
    }
  ) : r === "span" ? /* @__PURE__ */ h(
    "span",
    {
      className: a,
      style: {
        color: o,
        fontWeight: `var(--md-sys-typescale-body-${e}-weight)`,
        fontSize: `var(--md-sys-typescale-body-${e}-size)`,
        lineHeight: `var(--md-sys-typescale-body-${e}-line-height)`,
        fontFamily: `var(--md-sys-typescale-body-${e}-font)`,
        textAlign: i,
        whiteSpace: l ? "nowrap" : "normal",
        ...n
      },
      id: y,
      children: s
    }
  ) : r === "label" ? /* @__PURE__ */ h(
    "label",
    {
      htmlFor: f,
      className: a,
      style: {
        color: o,
        fontWeight: `var(--md-sys-typescale-label-${e}-weight)`,
        fontSize: `var(--md-sys-typescale-label-${e}-size)`,
        lineHeight: `var(--md-sys-typescale-label-${e}-line-height)`,
        fontFamily: `var(--md-sys-typescale-label-${e}-font)`,
        textAlign: i,
        whiteSpace: l ? "nowrap" : "normal",
        ...n
      },
      id: y,
      children: s
    }
  ) : null;
};
export {
  v as Typography
};