import React from "react";
import { theme } from "../../styles";
import * as styles from "./styles";
export const Text = ({ children, variant = "p", align, color = "--ll-color-on-background", lineClamp, noMargin, lineHeight, weight = "normal", family = "sans-serif", className, textTransform = "none", letterSpacing, fontVariant = "initial", }) => {
    // Component needs to change the HTML element with variant
    const elementType = ["caption1", "caption2", "p"].includes(variant)
        ? "p"
        : variant;
    const TextTag = `${elementType}`;
    const getColor = color in theme ? theme[color] : color;
    return (React.createElement(TextTag, { style: {
            color: `${getColor}`,
            fontVariant: `${fontVariant}`,
            lineHeight: lineHeight || "1.45",
            letterSpacing: `${letterSpacing}`,
            fontWeight: theme[weight],
        }, className: `${className} ${styles.container}`, "data-align": align, "data-variant": variant, "data-texttransform": textTransform, "data-family": family, "data-nomargin": noMargin, "data-lineclamp": lineClamp }, children));
};
//# sourceMappingURL=index.js.map