import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { typography } from "./typographyStyles.js";
/** @internal */ function getComponent(as, type) {
    if (as) {
        return as;
    }
    switch(type){
        case "headline-1":
            return "h1";
        case "headline-2":
            return "h2";
        case "headline-3":
            return "h3";
        case "headline-4":
            return "h4";
        case "headline-5":
            return "h5";
        case "headline-6":
        case "subtitle-1":
        case "subtitle-2":
            return "h6";
        case "body-1":
        case "body-2":
            return "p";
        case "caption":
            return "caption";
        default:
            return "span";
    }
}
/**
 * **Server Component**
 *
 * Render text with one of the material design typography styles applied and
 * optional styles like font-weight, font-style, text color, etc.
 *
 * @example
 * All Example
 * ```tsx
 * import { Typography } from "@react-md/core":
 *
 * export function Example() {
 *   return (
 *    <>
 *      <Typography type="headline-1">Headline 1</Typography>
 *      <Typography type="headline-2">Headline 2</Typography>
 *      <Typography type="headline-3">Headline 3</Typography>
 *      <Typography type="headline-4">Headline 4</Typography>
 *      <Typography type="headline-5">Headline 5</Typography>
 *      <Typography type="headline-6">Headline 6</Typography>
 *      <Typography type="subtitle-1">Subtitle 1</Typography>
 *      <Typography type="subtitle-2">Subtitle 2</Typography>
 *      <Typography>
 *        A paragraph of text.
 *      </Typography>
 *      <Typography type="body-1">
 *        A paragraph of text.
 *      </Typography>
 *      <Typography type="body-2">
 *        Another paragraph of text.
 *      </Typography>
 *      <Typography type="caption" component="h5">
 *        Caption text
 *      </Typography>
 *      <Typography type="overline" component="h5">
 *        Overline text
 *      </Typography>
 *    </>
 *   ):
 * }
 * ```
 */ export const Typography = /*#__PURE__*/ forwardRef(function Typography(props, ref) {
    const { as, type = "body-1", className, margin, fontStyle, fontWeight, textAlign, textColor, textDecoration, textTransform, textOverflow, children, ...remaining } = props;
    const Component = getComponent(as, type);
    return /*#__PURE__*/ _jsx(Component, {
        ...remaining,
        ref: ref,
        className: typography({
            type,
            margin,
            fontStyle,
            fontWeight,
            textAlign,
            textColor,
            textDecoration,
            textTransform,
            textOverflow,
            className
        }),
        children: children
    });
});

//# sourceMappingURL=Typography.js.map