@primer/react-brand/esm/Heading/Heading.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../node_modules/clsx/dist/clsx.js";
import { useAnimation as t } from "../animation/useAnimation.js";
import n from "./Heading.module.js";
import { forwardRef as r, useMemo as i } from "react";
import { jsx as a } from "react/jsx-runtime";
//#region src/Heading/Heading.tsx
var o = [
	"display",
	"1",
	"2",
	"3",
	"4",
	"5",
	"6",
	"subhead-large",
	"subhead-medium"
], s = [
	"h1",
	"h2",
	"h3",
	"h4",
	"h5",
	"h6"
], c = [
	"heavy",
	"extrabold",
	"bold",
	"semibold",
	"medium",
	"normal",
	"light",
	"extralight"
], l = [
	"condensed",
	"normal",
	"expanded"
], u = [
	"condensed",
	"normal",
	"none"
], d = [
	"mona-sans",
	"hubot-sans",
	"monospace"
], f = s[1], p = d[0], m = {
	h1: o[1],
	h2: o[2],
	h3: o[3],
	h4: o[4],
	h5: o[5],
	h6: o[6]
}, h = r(({ animate: r, className: o, children: c, as: l = f, size: u, letterSpacing: d, weight: p, stretch: h, style: g, font: _ = "mona-sans", textWrap: v = "balance", ...y }, b) => {
	let { classes: x, styles: S } = t(r), C = (e, t) => t ? typeof t == "string" ? n[`Heading--${e}-${t}`] : Object.keys(t).map((r) => n[`Heading-${r}--${e}-${t[r]}`]).join(" ") : null, w = i(() => C("weight", p), [p]), T = i(() => C("stretch", h), [h]), E = i(() => C("letter-spacing", d), [d]), D = e(x, n.Heading, n[`Heading-font--${_}`], !u && n[`Heading--${m[l]}`], u && n[`Heading--${u}`], n[`Heading--textWrap-${v}`], p && w, h && T, E && E, o);
	return s.includes(l) ? /* @__PURE__ */ a(l, {
		ref: b,
		className: D,
		style: {
			...S,
			...g
		},
		...y,
		children: c
	}) : (console.error(`Heading: 'as' prop must be one of ${s.join(", ")}`), null);
});
//#endregion
export { h as Heading, d as HeadingFontVariants, u as HeadingLetterSpacing, o as HeadingSizes, l as HeadingStretch, s as HeadingTags, c as HeadingWeights, m as classMap, p as defaultHeadingFont, f as defaultHeadingTag };

//# sourceMappingURL=Heading.js.map