@primer/react-brand/esm/Hero/Hero.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 { AnimationProvider as n } from "../animation/AnimationProvider/AnimationProvider.js";
import { Stack as r } from "../Stack/Stack.js";
import { Box as ee } from "../Box/Box.js";
import { HeroContext as i, heroMediaInlinePositions as a } from "./HeroContext.js";
import o from "./Hero.module.js";
import { HeroLabel as s } from "./sub-components/HeroLabel.js";
import { HeroHeading as c } from "./sub-components/HeroHeading.js";
import { HeroDescription as l } from "./sub-components/HeroDescription.js";
import { HeroImage as u } from "./sub-components/HeroImage.js";
import { HeroVideo as d } from "./sub-components/HeroVideo.js";
import { HeroEyebrow as f } from "./sub-components/HeroEyebrow.js";
import { HeroPrimaryAction as p } from "./sub-components/HeroPrimaryAction.js";
import { HeroSecondaryAction as m } from "./sub-components/HeroSecondaryAction.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/hero/base-BDi-g8vJ.css';/* empty css                                                                                     */
import h, { Fragment as te, forwardRef as g, useMemo as ne } from "react";
import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
//#region src/Hero/Hero.tsx
var b = {
	root: "Hero",
	get video() {
		return `${this.root}-video`;
	},
	get grid() {
		return `${this.root}-grid`;
	},
	get imageWrapper() {
		return `${this.root}-imageWrapper`;
	}
}, x = g(({ className: g, align: x = "start", children: S, imageContainerClassName: C, imageContainerStyle: w, imageContainerRef: T, imageBackgroundColor: E, variant: D = "default", trailingComponent: O, enableAnimation: k = !1, "data-testid": A, ...j }, re) => {
	let { HeroActions: M, HeroChildren: N, HeroImageChild: P, HeroVideoChild: F, HeroHeaderChildren: ie, HeroDescriptionChild: I } = ne(() => {
		let e = h.Children.toArray(S).reduce((e, t) => (h.isValidElement(t) && (t.type === p || t.type === m ? e.HeroActions.push(t) : t.type === u ? e.HeroImageChild = t : t.type === d ? e.HeroVideoChild = t : (e.HeroChildren.push(t), t.type === s || t.type === f || t.type === c ? e.HeroHeaderChildren.push(t) : t.type === l && (e.HeroDescriptionChild = t))), e), {
			HeroActions: [],
			HeroChildren: [],
			HeroImageChild: void 0,
			HeroVideoChild: void 0,
			HeroHeaderChildren: [],
			HeroDescriptionChild: void 0
		});
		return e.HeroImageChild && e.HeroVideoChild && (e.HeroVideoChild = void 0), e;
	}, [S]), L = P?.props.position || F?.props.position, R = D === "gridline-expressive" && L?.startsWith("inline-") ? (process.env.NODE_ENV !== "production" && console.warn(`Hero: "gridline-expressive" variant does not support "${L}" position. Defaulting to "block-end".`), "block-end") : L || "block-end", z = P?.props.enableBorder ?? F?.props.enableBorder ?? !0, B = a.includes(R), V = B ? R : void 0, H = P || F, U = D === "gridline", W = D === "gridline-expressive", G = R === "block-end" || R === "block-end-padded", K = R === "block-end-padded", q = (U || W) && k ? n : te, J = (U || W) && k ? {
		autoStaggerChildren: !1,
		animationTrigger: "immediate"
	} : {}, Y = (U || W) && G, X = U && B, ae = P ? o["Hero--layout-image"] : o["Hero--layout-default"], Z = R === "inline-start" || R === "inline-start-padded", Q = (e) => O && /* @__PURE__ */ v(ee, {
		animate: e ? {
			variant: "slide-in-up",
			delay: 1e3,
			duration: 1e3
		} : void 0,
		children: /* @__PURE__ */ v("div", {
			className: o["Hero-trailing"],
			children: /* @__PURE__ */ v(O, {})
		})
	}), $ = () => M.length > 0 && /* @__PURE__ */ v("div", {
		className: o["Hero-actions"],
		children: M
	});
	return /* @__PURE__ */ v(q, {
		...J,
		children: /* @__PURE__ */ v(i.Provider, {
			value: {
				imagePosition: R,
				variant: D,
				align: x,
				hasInlineMedia: B,
				enableAnimation: k
			},
			children: /* @__PURE__ */ y("section", {
				className: e(o.Hero, o[`Hero--variant-${D}`], !B && o[`Hero--align-${x}`], ae, (P || F) && o[`Hero--image-pos-${R}`], (P || F) && B && o["Hero--image-pos-inline"], X && o["Hero--variant-inline-gridline"], g),
				ref: re,
				"aria-labelledby": "hero-section-brand-heading",
				"data-testid": A || b.root,
				...j,
				children: [/* @__PURE__ */ v(t, {
					fullWidth: !Y && !X,
					"data-testid": b.grid,
					className: e(o["Hero-grid"], o[`Hero-grid--${R}`], Y && !W && o["Hero-grid--contained"], X && o["Hero-grid--bordered-inline"], W && o["Hero-grid--expressive"]),
					children: W ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(t.Column, {
						span: {
							medium: 12,
							large: I ? 7 : 6
						},
						className: o["Hero-expressive-header-column"],
						children: /* @__PURE__ */ v(r, {
							direction: "vertical",
							gap: "none",
							padding: "none",
							alignItems: "flex-start",
							children: ie
						})
					}), /* @__PURE__ */ v(t.Column, {
						span: {
							medium: 12,
							large: I ? 5 : 6
						},
						className: o["Hero-expressive-body-column"],
						children: /* @__PURE__ */ y(r, {
							direction: "vertical",
							gap: "none",
							padding: "none",
							alignItems: "flex-start",
							children: [
								I,
								$(),
								Q(k)
							]
						})
					})] }) : /* @__PURE__ */ y(_, { children: [
						Z && H && !Y && /* @__PURE__ */ v(t.Column, {
							ref: T,
							span: { large: 6 },
							className: e(E && o[`Hero-imageContainer--bg-${E}`], X && V?.includes("padded") && o["Hero-imageContainer--inline-bg-padded"], X && o["Hero-imageContainer--inline-bordered"]),
							children: /* @__PURE__ */ v("div", {
								className: e(o["Hero-mediaContainer"], C),
								style: w,
								children: H
							})
						}),
						/* @__PURE__ */ v(t.Column, {
							span: { large: H && B ? 6 : 12 },
							children: /* @__PURE__ */ y(r, {
								className: e(X && o["Hero-text-column--inline-gridline"], X && o["Hero-contentColumn--bordered-inline"]),
								direction: "vertical",
								gap: "none",
								padding: "none",
								alignItems: B || x === "start" ? "flex-start" : "center",
								justifyContent: B ? void 0 : x === "start" ? "flex-start" : "center",
								children: [
									N,
									$(),
									Q(U && k)
								]
							})
						}),
						!Z && H && !Y && /* @__PURE__ */ v(t.Column, {
							ref: T,
							span: { large: B ? 6 : 12 },
							className: e(E && o[`Hero-imageContainer--bg-${E}`], X && V?.includes("padded") && o["Hero-imageContainer--inline-bg-padded"], X && o["Hero-imageContainer--inline-bordered"]),
							children: /* @__PURE__ */ v("div", {
								className: e(o["Hero-mediaContainer"], C),
								style: w,
								children: H
							})
						})
					] })
				}), H && Y && /* @__PURE__ */ v("div", {
					ref: T,
					"data-testid": b.imageWrapper,
					className: e(o["Hero-imageWrapper"], K && o["Hero-imageWrapper--block-end-padded"], C, E && o[`Hero-imageWrapper--bg-${E}`]),
					style: w,
					children: /* @__PURE__ */ v("div", {
						className: e(o["Hero-imageWrapper-inner"], K && o["Hero-imageWrapper-inner--padded"], z && o["Hero-imageWrapper-inner--with-gridline"]),
						children: H
					})
				})]
			})
		})
	});
}), S = Object.assign(x, {
	Heading: c,
	Description: l,
	PrimaryAction: p,
	SecondaryAction: m,
	Image: u,
	Video: d,
	Label: s,
	Eyebrow: f,
	testIds: b
});
//#endregion
export { S as Hero };

//# sourceMappingURL=Hero.js.map