"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BaseTypography = exports.typographyList = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@emotion/react");
const styled_1 = __importDefault(require("@emotion/styled"));
const utils_1 = require("../../../utils");
const TextStyles_1 = require("../../TextStyles");
exports.typographyList = {
    Headline1: TextStyles_1.headline1,
    Headline2: TextStyles_1.headline2,
    Headline3: TextStyles_1.headline3,
    Headline4: TextStyles_1.headline4,
    Headline5: TextStyles_1.headline5,
    Headline6: TextStyles_1.headline6,
    Title1: TextStyles_1.title1,
    Title2: TextStyles_1.title2,
    Title3: TextStyles_1.title3,
    Title4: TextStyles_1.title4,
    Body1: TextStyles_1.body1,
    Body2: TextStyles_1.body2,
};
const TextElement = styled_1.default.div `
	text-align: ${(props) => props.textAlign};
	white-space: pre-wrap;
	${(props) => exports.typographyList[props.md](props)}

	${(props) => props.sm &&
    (0, utils_1.Smaller)((0, react_2.css) `
			 {
				${exports.typographyList[props.sm](props)}
			}
		`)}
	${(props) => props.lg &&
    (0, utils_1.Larger)((0, react_2.css) `
			 {
				${exports.typographyList[props.lg](props)}
			}
		`)}
`;
/**
 * @param lg - pc size typography
 * @param md - OwnProps 로 분류되어 lg, sm이 공통일 경우 md하나로 사용 가능하다.
 * @param sm - mobile size typography
 */
const BaseTypography = (props) => {
    const { children } = props;
    return react_1.default.createElement(TextElement, Object.assign({}, props), children);
};
exports.BaseTypography = BaseTypography;
