@primer/react-brand/esm/FAQ/FAQ.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 { Heading as n } from "../Heading/Heading.js";
import { AccordionContent as r, AccordionHeading as i, AccordionRoot as a } from "../Accordion/Accordion.js";
import { isFragmentElement as o } from "../utils/isFragmentElement.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/faq-s_zeJJpd.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes-Dc8Ya1HV.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/faq/base-BIIAD0RC.css';/* empty css                                                                                    */
/* empty css                                                                                                 */
/* empty css                                                                                   */
import s from "./FAQ.module.js";
import c, { forwardRef as l } from "react";
import { jsx as u } from "react/jsx-runtime";
//#region src/FAQ/FAQ.tsx
var d = l(({ children: n, style: r, animate: i, className: l, variant: d = "default", ...m }, h) => {
	let { classes: g, styles: _ } = t(i), v = c.Children.toArray(n).filter((e) => !!(c.isValidElement(e) && typeof e.type != "string" && (o(e) || e.type === f || e.type === p || e.type === a))), y = c.Children.toArray(n).some((e) => c.isValidElement(e) && typeof e.type != "string" && e.type === p);
	return /* @__PURE__ */ u("section", {
		ref: h,
		className: e(s.FAQ, s[`FAQ--variant-${d}`], g, l),
		style: {
			..._,
			...r
		},
		...m,
		children: c.Children.toArray(v).map((e, t) => {
			if (c.isValidElement(e) && e.type === f) {
				let n = c.cloneElement(e, {
					align: y ? "start" : e.props.align,
					size: y ? "3" : e.props.size,
					weight: y ? "medium" : e.props.weight
				});
				return d === "gridline" ? /* @__PURE__ */ u("div", {
					className: s[`FAQ__heading-wrapper--${d}`],
					children: n
				}, e.key ?? t) : n;
			}
			let n = e;
			return d === "gridline" ? /* @__PURE__ */ u("div", {
				className: s[`FAQ__content-wrapper--${d}`],
				children: n
			}, t) : n;
		})
	});
}), f = l(({ children: t, className: r, size: i = "3", align: a = "center", as: o, ...c }, l) => /* @__PURE__ */ u(n, {
	as: o || (i === "3" ? "h3" : "h2"),
	size: i,
	className: e(s.FAQ__heading, s[`FAQ__heading--${a}`], r),
	ref: l,
	...c,
	children: t
}));
function p({ children: t, className: r, as: i = "h3", size: a = "subhead-medium", font: o = "monospace", weight: c = "medium", ...l }) {
	return /* @__PURE__ */ u(n, {
		as: i,
		className: e(s.FAQ__subheading, r),
		weight: c,
		size: a,
		font: o,
		...l,
		children: t
	});
}
var m = Object.assign(d, {
	Subheading: p,
	Heading: f,
	Item: a,
	Question: i,
	Answer: r
});
//#endregion
export { m as FAQ };

//# sourceMappingURL=FAQ.js.map