@primer/react-brand/esm/SectionIntroStacked/SectionIntroStacked.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 { Grid as t } from "../Grid/Grid.js";
import { useAnimation as n } from "../animation/useAnimation.js";
import { Text as r } from "../Text/Text.js";
import { Heading as i, defaultHeadingTag as a } from "../Heading/Heading.js";
import o from "../component-helpers/shared.module.js";
import { Link as s } from "../Link/Link.js";
import { Icon as c } from "../Icon/Icon.js";
import l from "./SectionIntroStacked.module.js";
import u, { forwardRef as d, useCallback as f, useMemo as p } from "react";
import { jsx as m, jsxs as h } from "react/jsx-runtime";
//#region src/SectionIntroStacked/SectionIntroStacked.tsx
var g = ["default", "gridline"], _ = d(({ animate: r, className: i, children: a, style: s, variant: c = "default", ...d }, f) => {
	let { classes: p, styles: g } = n(r), _ = u.Children.toArray(a), v = _.filter((e) => u.isValidElement(e) && e.type === S), y = _.filter((e) => !v.includes(e));
	return /* @__PURE__ */ m("header", {
		ref: f,
		className: e(l.SectionIntroStacked, c === "gridline" && l["SectionIntroStacked--variant-gridline"], c === "gridline" && o.gridline, p, i),
		...d,
		style: {
			...g,
			...s
		},
		children: /* @__PURE__ */ h(t, {
			fullWidth: !0,
			enableGutters: c !== "gridline",
			columnGap: "none",
			children: [/* @__PURE__ */ m(t.Column, {
				span: { large: 6 },
				className: l["SectionIntroStacked-content"],
				children: y
			}), /* @__PURE__ */ m(t.Column, {
				span: { large: 6 },
				start: { large: 7 },
				children: v
			})]
		})
	});
}), v = "3", y = d(({ as: t = a, size: n = v, className: r, children: o, ...s }, c) => {
	let d = p(() => u.Children.toArray(o), [o]), h = f(() => d.some((e) => u.isValidElement(e) && (e.type === "b" || e.type === "em")) ? "muted" : "default", [d]), g = d.length === 1 ? "default" : h();
	return /* @__PURE__ */ m(i, {
		ref: c,
		className: e(l["SectionIntroStacked-heading"], g === "muted" && l["SectionIntroStacked-heading--muted"], r),
		size: n,
		as: t,
		...s,
		children: o
	});
}), b = d(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ m(r, {
	as: "p",
	className: e(l["SectionIntroStacked-description"], t),
	ref: a,
	variant: "muted",
	...i,
	children: n
})), x = d(({ className: t, children: n, variant: r = "accent", size: i = "medium", ...a }, o) => /* @__PURE__ */ m(s, {
	ref: o,
	className: e(l["SectionIntroStacked-link"], t),
	size: i,
	variant: r,
	...a,
	children: n
})), S = ({ animate: t, className: r, children: i, ...a }) => {
	let { classes: o, styles: s } = n(t);
	return /* @__PURE__ */ m("ul", {
		className: e(o, l["SectionIntroStacked-items"], r),
		style: { ...s },
		...a,
		children: i
	});
}, C = ({ className: t, color: n = "green", ...r }) => /* @__PURE__ */ m(c, {
	className: e(l.SectionIntroStackedItem__icon, t),
	hasBackground: !0,
	size: "small",
	color: n,
	...r
}), w = d(({ as: t = "h3", size: n = "subhead-large", className: r, children: a, ...o }, s) => /* @__PURE__ */ m(i, {
	ref: s,
	as: t,
	size: n,
	className: e(l.SectionIntroStackedItem__heading, r),
	...o,
	children: a
})), T = d(({ className: t, children: n, ...i }, a) => /* @__PURE__ */ m(r, {
	as: "p",
	variant: "muted",
	size: "200",
	className: e(l.SectionIntroStackedItem__description, t),
	ref: a,
	...i,
	children: n
})), E = Object.assign(_, {
	Heading: y,
	Description: b,
	Link: x,
	Items: S,
	Item: ({ className: t, children: n, ...i }) => {
		let a = e(l["SectionIntroStackedItem-item"], t), o = p(() => u.Children.toArray(n), [n]);
		if (o.some((e) => u.isValidElement(e) && (e.type === C || e.type === w || e.type === T))) {
			let t = o.find((e) => u.isValidElement(e) && e.type === C), n = o.filter((e) => !(u.isValidElement(e) && e.type === C));
			return /* @__PURE__ */ h("li", {
				className: e(a, !!t && l["SectionIntroStackedItem-item--with-icon"]),
				...i,
				children: [t, /* @__PURE__ */ m("div", {
					className: l.SectionIntroStackedItem__content,
					children: n
				})]
			});
		}
		let s = o.length === 1 ? "default" : o.some((e) => u.isValidElement(e) && (e.type === "b" || e.type === "em")) ? "muted" : "default";
		return /* @__PURE__ */ m("li", {
			className: a,
			...i,
			children: /* @__PURE__ */ m(r, {
				as: "span",
				className: e(l["SectionIntroStackedItem__item-text"], s === "muted" && l["SectionIntroStackedItem__item-text--muted"]),
				size: "350",
				children: n
			})
		});
	},
	ItemIcon: C,
	ItemHeading: w,
	ItemDescription: T
});
//#endregion
export { E as SectionIntroStacked, g as SectionIntroStackedVariants };

//# sourceMappingURL=SectionIntroStacked.js.map