import { BodyString } from "./base/Body.js";
import { BodyStrongString } from "./base/BodyStrong.js";
import { BtnString } from "./base/Btn.js";
import { CodeString } from "./base/Code.js";
import { DisplayString } from "./base/Display.js";
import { HeadlineString } from "./base/Headline.js";
import { LabelString } from "./base/Label.js";
import { LabelModerateString } from "./base/LabelModerate.js";
import { LabelStrongString } from "./base/LabelStrong.js";
import { OverlineString } from "./base/Overline.js";
import { TitleString } from "./base/Title.js";
import React from "react";
//#region src/components/typography/renderTypography.tsx
const typographyMap = {
	Display: DisplayString,
	Headline: HeadlineString,
	Title: TitleString,
	Body: BodyString,
	"Body Strong": BodyStrongString,
	Label: LabelString,
	"Label Moderate": LabelModerateString,
	"Label Strong": LabelStrongString,
	Overline: OverlineString,
	Code: CodeString,
	"Code Strong": CodeString,
	Btn: BtnString
};
const renderTypography = (typographyType, typographyProps) => {
	/** props type is too wide, causing issues with overlapping different props types (e.g. `tag`), so
	* we have to cast this to a generic ElementType to pass createElement types. We still have type
	* saftey for specific component prop types via renderTypography args. */
	const TypographyComponent = typographyMap[typographyType];
	const { children } = typographyProps;
	return React.createElement(TypographyComponent, typographyProps, children);
};
//#endregion
export { renderTypography, typographyMap };
