@primer/react-brand/esm/BreakoutBanner/BreakoutBanner.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 { Stack as t } from "../Stack/Stack.js";
import { Text as n } from "../Text/Text.js";
import { Heading as r } from "../Heading/Heading.js";
import { Link as i } from "../Link/Link.js";
import a from "./BreakoutBanner.module.js";
import o, { forwardRef as s, useCallback as c, useMemo as l } from "react";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
//#region src/BreakoutBanner/BreakoutBanner.tsx
var f = ["default", "subtle"], p = s(({ align: t = "start", backgroundColor: n = "subtle", backgroundImageSrc: r, backgroundImagePosition: i = "center", backgroundImageSize: s = "cover", className: p, children: m, style: h, leadingVisual: _, ...v }, y) => {
	let b = c((e, t) => t === "background-image-src" ? `url(${e})` : t === "background-color" && typeof e == "string" && f.includes(e) ? `var(--brand-color-canvas-${e})` : e, []), x = c((e, t) => typeof t == "string" || Array.isArray(t) ? { [`--brand-BreakoutBanner-${e}`]: b(t, e) } : {
		[`--brand-BreakoutBanner-narrow-${e}`]: b(t?.narrow, e),
		[`--brand-BreakoutBanner-regular-${e}`]: b(t?.regular, e),
		[`--brand-BreakoutBanner-wide-${e}`]: b(t?.wide, e)
	}, [b]), S = l(() => {
		let e = {}, t = (t, n) => {
			n && Object.assign(e, x(t, n));
		};
		return t("background-color", n), t("background-image-src", r), t("background-image-position", i), t("background-image-size", s), e;
	}, [
		n,
		r,
		i,
		s,
		x
	]);
	return !l(() => o.Children.toArray(m).some((e) => o.isValidElement(e) && e.type === g), [m]) && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("The `BreakoutBanner` component expects a `BreakoutBanner.Heading` element to be specified."), /* @__PURE__ */ u("div", {
		ref: y,
		className: e(a.BreakoutBanner, p),
		style: {
			...S,
			...h
		},
		...v,
		children: /* @__PURE__ */ u("div", {
			className: e(a["BreakoutBanner-container"]),
			children: /* @__PURE__ */ d("div", {
				className: e(a["BreakoutBanner-content"], t === "center" && a["BreakoutBanner-content--center"]),
				children: [_ && /* @__PURE__ */ u("div", {
					className: e(a["BreakoutBanner-leadingVisual"]),
					children: typeof _ == "function" ? /* @__PURE__ */ u(_, {}) : _
				}), m]
			})
		})
	});
}), m = "h3", h = "4", g = s(({ as: t = m, size: n = h, className: i, children: o, ...s }, c) => /* @__PURE__ */ u(r, {
	ref: c,
	className: e(a.BreakoutBanner__heading, i),
	size: n,
	as: t,
	...s,
	children: o
})), _ = s(({ className: t, children: r, ...i }, o) => /* @__PURE__ */ u(n, {
	ref: o,
	as: "p",
	variant: "muted",
	className: e(a["BreakoutBanner-description"], t),
	...i,
	children: r
})), v = s(({ className: n, direction: r, gap: s, padding: c, children: l, ...d }, f) => {
	let p = o.Children.toArray(l).map((e, t) => o.isValidElement(e) && e.type === i ? o.cloneElement(e, {
		size: e.props.size || "medium",
		variant: e.props.variant || "accent",
		arrowDirection: e.props.arrowDirection || (t === 0 ? "end" : "none"),
		...e.props
	}) : null).filter(Boolean).slice(0, 2), m = r === "vertical" ? {
		gap: "condensed",
		direction: "vertical",
		alignItems: "flex-start"
	} : {
		gap: s || {
			narrow: "normal",
			regular: "spacious"
		},
		direction: r || {
			narrow: "vertical",
			regular: "horizontal"
		}
	};
	return /* @__PURE__ */ u(t, {
		padding: c || "none",
		className: e(a["BreakoutBanner-linkGroup"], n),
		ref: f,
		...m,
		...d,
		children: p
	});
}), y = Object.assign(p, {
	Heading: g,
	Description: _,
	LinkGroup: v
});
//#endregion
export { y as BreakoutBanner, f as BreakoutBannerBackgroundColors };

//# sourceMappingURL=BreakoutBanner.js.map