@primer/react-brand/esm/Pillar/Pillar.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 { Text as n } from "../Text/Text.js";
import { Heading as r } from "../Heading/Heading.js";
import { Image as i } from "../Image/Image.js";
import { Link as a } from "../Link/Link.js";
import { Icon as o } from "../Icon/Icon.js";
import s from "./Pillar.module.js";
import c, { forwardRef as l } from "react";
import { jsx as u } from "react/jsx-runtime";
//#region src/Pillar/Pillar.tsx
var d = "green", f = 32, p = l(({ children: n, className: r, animate: i, as: a = "div", align: o = "start", style: l, hasBorder: d = !1, fullWidth: f = !1, ...p }, y) => {
	let { classes: b, styles: x } = t(i), S = c.Children.toArray(n).filter((e) => !!(c.isValidElement(e) && typeof e.type != "string" && (e.type === m || e.type === h || e.type === g || e.type === _ || e.type === v)));
	return /* @__PURE__ */ u(["div", "article"].includes(a) ? a : "div", {
		className: e(s.Pillar, s[`Pillar--align-${o}`], d && s["Pillar--has-border"], !f && s["Pillar--has-max-width"], b, r),
		ref: y,
		...p,
		style: {
			...x,
			...l
		},
		children: S
	});
});
function m({ className: e, ...t }) {
	return /* @__PURE__ */ u("div", {
		className: s.Pillar__image,
		children: /* @__PURE__ */ u(i, {
			className: e,
			...t
		})
	});
}
function h({ icon: t, className: n, hasBackground: r = !0, size: i, ...a }) {
	if (!r) {
		let r = {
			...a,
			className: e(s.Pillar__icon, n)
		}, i;
		return i = c.isValidElement(t) ? t : /* @__PURE__ */ u(t, {}), /* @__PURE__ */ u("span", {
			...r,
			children: i
		});
	}
	return /* @__PURE__ */ u(o, {
		className: e(s.Pillar__icon, s["Pillar__icon--with-background"], n),
		color: d,
		hasBackground: !0,
		icon: t,
		size: i ?? 32,
		...a
	});
}
var g = l(({ children: t, as: n = "h3", size: i = "6", className: a, ...o }, c) => /* @__PURE__ */ u(r, {
	size: i,
	className: e(s.Pillar__heading, s[`Pillar__heading--size-${i}`], a),
	ref: c,
	as: n,
	...o,
	children: t
})), _ = l(({ children: t, className: r, ...i }, a) => /* @__PURE__ */ u(n, {
	variant: "muted",
	ref: a,
	size: "200",
	as: "p",
	className: e(s.Pillar__description, r),
	...i,
	children: t
})), v = l(({ className: t, children: n, href: r, ...i }, o) => /* @__PURE__ */ u(a, {
	variant: "accent",
	href: r,
	ref: o,
	className: e(s.Pillar__link, t),
	...i,
	children: n
})), y = Object.assign(p, {
	Icon: h,
	Image: m,
	Heading: g,
	Description: _,
	Link: v
});
//#endregion
export { y as Pillar, d as defaultPillarIconColor, f as defaultPillarIconSize };

//# sourceMappingURL=Pillar.js.map