"use client";
import { applyTypography } from "../../../styles/typography.js";
import { typographyStyles } from "../typographyStyles.js";
import { getPropDefaultsBase } from "./getPropDefaults.js";
import { select } from "../../../utils/emotion.js";
import styled from "@emotion/styled";
import { jsx } from "@emotion/react/jsx-runtime";
//#region src/components/typography/base/Headline.tsx
const headlineElements = [
	"h1",
	"h2",
	"h3",
	"h4",
	"h5",
	"h6"
];
function HeadlineString(props) {
	const { children, ...rest } = getPropDefaults(props);
	return /* @__PURE__ */ jsx(StyledHeadline, {
		...rest,
		children
	});
}
function getPropDefaults(props) {
	return getPropDefaultsBase(props, { as: props.heading || "h1" });
}
const StyledHeadline = styled.span`
  ${({ theme, size, colorProp }) => applyTypography(theme, "Headline", size, colorProp)}
  ${typographyStyles}
`;
function headlineSelector(heading) {
	return `${heading}${select(StyledHeadline)}`;
}
const ALL_HEADLINE_SELECTORS = headlineElements.map(headlineSelector).join(",");
//#endregion
export { ALL_HEADLINE_SELECTORS, HeadlineString, StyledHeadline, getPropDefaults, headlineElements, headlineSelector };
