"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_breakpoints = require("./breakpoints.cjs");
const require_styles_utils = require("./utils.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let _emotion_react = require("@emotion/react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/styles/type.tsx
const defaultHeadingSizes = {
	h1: {
		size: 32,
		sizeSm: 21
	},
	h2: {
		size: 24,
		sizeSm: 18
	},
	h3: {
		size: 21,
		sizeSm: 18
	},
	h4: {
		size: 14,
		sizeSm: 14
	}
};
const 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
	}
};
const baseHeading = ({ mt, mb, mtSm, mbSm, theme }) => _emotion_react.css`
  line-height: 1.214em;

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

  ${require_styles_breakpoints.bp.sm(`
    margin-top: ${mtSm}px;
    margin-bottom: ${mbSm}px;
  `)}
`;
const firstChildStyles = require_styles_utils.firstChild(`margin-top: 0;`);
const headings = {
	h1: _emotion_styled.default.h1`
    ${(props) => baseHeading(props)}
    ${firstChildStyles}

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

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

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

    font-size: ${require_styles_utils.pxToRems(defaultHeadingSizes.h4.size)};
    font-weight: ${({ light }) => light ? 400 : 600}};
    ${require_styles_breakpoints.bp.sm(`
      font-size: ${require_styles_utils.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 = (0, _emotion_react.useTheme)();
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledHeading, {
		id,
		mt: m0 ? 0 : mt,
		mb: m0 ? 0 : mb,
		mtSm: m0 ? 0 : mtSm,
		mbSm: m0 ? 0 : mbSm,
		light,
		theme,
		children: id ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("a", {
			href: `#${id}`,
			css: { color: "inherit" },
			children
		}) : children
	});
}
function headingWithDefaults(defaultProps) {
	return (props) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Heading, {
		...defaultProps,
		...props
	});
}
//#endregion
exports.Heading = Heading;
exports.headingWithDefaults = headingWithDefaults;
exports.headings = headings;
