import {
  select
} from "./chunk-YMNSXZ5D.js";
import {
  colors
} from "./chunk-2VBDEO6M.js";
import {
  getTypographyString
} from "./chunk-E4EXM4SY.js";

// src/styles/fonts/typography/Display.tsx
import styled from "@emotion/styled";
import { jsx } from "@emotion/react/jsx-runtime";
var ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
var Display = ({
  children,
  color,
  size = "Medium" /* Medium */,
  element = "h1"
}) => {
  return /* @__PURE__ */ jsx(StyledDisplay, { as: element, size, color, children });
};
var StyledDisplay = styled.span`
  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
  ${({ theme, size }) => {
  return size ? getTypographyString(theme.typography[theme.app].Display[size]) : "";
}}
`;
function displaySelector(element) {
  return `${element}${select(StyledDisplay)}`;
}

export {
  ELEMENTS,
  Display,
  displaySelector
};
