import {
  firstChild,
  pxToRems
} from "./chunk-FCZJILMW.js";
import {
  bp
} from "./chunk-JSGRNWSB.js";
import {
  __spreadValues
} from "./chunk-CIGAQ47A.js";

// src/styles/type.tsx
import { css, useTheme } from "@emotion/react";
import styled from "@emotion/styled";
import { jsx } from "@emotion/react/jsx-runtime";
var defaultHeadingSizes = {
  h1: {
    size: 32,
    sizeSm: 21
  },
  h2: {
    size: 24,
    sizeSm: 18
  },
  h3: {
    size: 21,
    sizeSm: 18
  },
  h4: {
    size: 14,
    sizeSm: 14
  }
};
var defaultHeadingMargins = {
  h1: {
    mt: 24,
    mb: 24,
    mtSm: 24,
    mbSm: 24
  },
  h2: {
    mt: 24,
    mb: 24,
    mtSm: 24,
    mbSm: 24
  },
  h3: {
    mt: 24,
    mb: 24,
    mtSm: 24,
    mbSm: 24
  },
  h4: {
    mt: 16,
    mb: 16,
    mtSm: 16,
    mbSm: 16
  }
};
var baseHeading = ({ mt, mb, mtSm, mbSm, theme }) => css`
  line-height: 1.214em;

  margin-bottom: ${mb}px;
  margin-top: ${mt}px;

  ${bp.sm(`
    margin-top: ${mtSm}px;
    margin-bottom: ${mbSm}px;
  `)}
`;
var firstChildStyles = firstChild(`margin-top: 0;`);
var headings = {
  h1: styled.h1`
    ${(props) => baseHeading(props)}
    ${firstChildStyles}

    font-size: ${pxToRems(defaultHeadingSizes.h1.size)};
    font-weight: ${({ light }) => light ? 400 : 800}};
    ${bp.sm(`
      font-size: ${pxToRems(defaultHeadingSizes.h1.sizeSm)};
    `)}
  `,
  h2: styled.h2`
    ${(props) => baseHeading(props)}
    ${firstChildStyles}

    font-size: ${pxToRems(defaultHeadingSizes.h2.size)};
    font-weight: ${({ light }) => light ? 400 : 700}};
    ${bp.sm(`
      font-size: ${pxToRems(defaultHeadingSizes.h2.sizeSm)};
    `)}
  `,
  h3: styled.h3`
    ${(props) => baseHeading(props)}
    ${firstChildStyles}

    font-size: ${pxToRems(defaultHeadingSizes.h3.size)};
    font-weight: ${({ light }) => light ? 400 : 700}};
    ${bp.sm(`
      font-size: ${pxToRems(defaultHeadingSizes.h3.sizeSm)};
    `)}
  `,
  h4: styled.h4`
    ${(props) => baseHeading(props)}
    ${firstChildStyles}

    font-size: ${pxToRems(defaultHeadingSizes.h4.size)};
    font-weight: ${({ light }) => light ? 400 : 600}};
    ${bp.sm(`
      font-size: ${pxToRems(defaultHeadingSizes.h4.sizeSm)};
    `)}
  `
};
function Heading({
  children,
  type = "h2",
  id,
  mt = defaultHeadingMargins[type].mt,
  mb = defaultHeadingMargins[type].mb,
  mtSm = defaultHeadingMargins[type].mtSm,
  mbSm = defaultHeadingMargins[type].mbSm,
  m0 = false,
  light = false
}) {
  const StyledHeading = headings[type];
  const theme = useTheme();
  const heading = /* @__PURE__ */ jsx(
    StyledHeading,
    {
      id,
      mt: m0 ? 0 : mt,
      mb: m0 ? 0 : mb,
      mtSm: m0 ? 0 : mtSm,
      mbSm: m0 ? 0 : mbSm,
      light,
      theme,
      children: id ? /* @__PURE__ */ jsx("a", { href: `#${id}`, css: { color: "inherit" }, children }) : children
    }
  );
  return heading;
}
function headingWithDefaults(defaultProps) {
  return (props) => /* @__PURE__ */ jsx(Heading, __spreadValues(__spreadValues({}, defaultProps), props));
}

export {
  headings,
  Heading,
  headingWithDefaults
};
