@primer/react-brand/esm/Section/Section.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 '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/section/section-GXjcxN8l.css';/* empty css                                                                                           */
import t from "./Section.module.js";
import { forwardRef as n, useCallback as r, useMemo as i } from "react";
import { jsx as a } from "react/jsx-runtime";
//#region src/Section/Section.tsx
var o = [
	"none",
	"condensed",
	"normal",
	"spacious"
], s = ["default", "subtle"], c = o[2], l = {
	root: "Section",
	container: "Section__container"
}, u = n(({ as: n = "section", paddingBlockStart: o = c, paddingBlockEnd: u = c, backgroundColor: d, backgroundImageSrc: f, backgroundImagePosition: p = "50%", backgroundImageSize: m = "cover", className: h, children: g, "data-testid": _, fullWidth: v = !1, rounded: y = !1, style: b, ...x }, S) => {
	let C = r((e, n) => typeof e == "string" ? t[`Section--${n}-${e}`] : Object.keys(e).map((r) => t[`Section-${r}--${n}-${e[r]}`]).join(" "), []), w = r((e, t) => t === "background-image-src" ? Array.isArray(e) ? e.map((e) => `url(${e})`).join() : `url(${e})` : t === "background-color" && typeof e == "string" ? s.includes(e) ? `var(--brand-color-canvas-${e})` : e : Array.isArray(e) ? e.join() : e, []), T = r((e, t) => typeof t == "string" || Array.isArray(t) ? { [`--brand-Section-${e}`]: w(t, e) } : {
		[`--brand-Section-narrow-${e}`]: w(t?.narrow, e),
		[`--brand-Section-regular-${e}`]: w(t?.regular, e),
		[`--brand-Section-wide-${e}`]: w(t?.wide, e)
	}, [w]), E = r((e, t, n) => {
		n && Object.assign(e, T(t, n));
	}, [T]), D = i(() => C(o, "paddingBlockStart"), [o, C]), O = i(() => C(u, "paddingBlockEnd"), [u, C]), k = i(() => {
		let e = {};
		return E(e, "background-color", d), E(e, "background-image-src", f), E(e, "background-image-position", p), E(e, "background-image-size", m), e;
	}, [
		E,
		d,
		f,
		p,
		m
	]);
	return /* @__PURE__ */ a(n, {
		ref: S,
		className: e(t.Section, D, O, y && t["Section--rounded"], h),
		"data-testid": _ || l.root,
		style: {
			...k,
			...b
		},
		...x,
		children: /* @__PURE__ */ a("div", {
			className: e(t.Section__container, v && t["Section__container--fullWidth"]),
			"data-testid": l.container,
			children: g
		})
	});
});
//#endregion
export { u as Section, s as SectionBackgroundColors, o as SectionPaddingVariants };

//# sourceMappingURL=Section.js.map