@primer/react-brand/esm/EyebrowBanner/EyebrowBanner.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 { BiColorGradients as t, Colors as n } from "../constants.js";
import { Text as r } from "../Text/Text.js";
import { ExpandableArrow as i } from "../ExpandableArrow/ExpandableArrow.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/eyebrow-banner-CPW2Ri4S.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/eyebrow-banner/colors-with-modes-BzV3LYhH.css';/* empty css                                                                                                         */
/* empty css                                                                                                            */
import a from "./EyebrowBanner.module.js";
import o, { forwardRef as s, useCallback as c } from "react";
import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
//#region src/EyebrowBanner/EyebrowBanner.tsx
var f = {
	root: "EyebrowBanner",
	visual: "EyebrowBanner__visual",
	label: "EyebrowBanner__label",
	expandableArrow: "EyebrowBanner__expandableArrow"
}, p = s(({ className: t, children: n, "data-testid": r, href: s, onMouseEnter: p, onMouseLeave: g, onFocus: _, onBlur: y, ...x }, S) => {
	let [C, w] = o.useState(!1), [T, E] = o.useState(!1), D = c((e) => {
		w(!C), p?.(e);
	}, [p, C]), O = c((e) => {
		w(!C), g?.(e);
	}, [g, C]), k = c((e) => {
		E(!T), _?.(e);
	}, [_, T]), A = c((e) => {
		E(!T), y?.(e);
	}, [y, T]), j = o.Children.toArray(n).filter((e) => {
		if (o.isValidElement(e)) return e.type === m;
	}), M = o.Children.toArray(n).filter((e) => {
		if (o.isValidElement(e)) return e.type === h;
	}), N = o.Children.toArray(n).find((e) => {
		if (o.isValidElement(e)) return e.type === v;
	}), P = o.Children.toArray(n).find((e) => {
		if (o.isValidElement(e)) return e.type === b;
	});
	return /* @__PURE__ */ u("a", {
		href: s,
		ref: S,
		className: e(a.EyebrowBanner, t),
		onMouseEnter: D,
		onMouseLeave: O,
		onFocus: k,
		onBlur: A,
		"data-testid": r || f.root,
		...x,
		children: /* @__PURE__ */ d("span", {
			className: a.EyebrowBanner__inner,
			children: [
				N && /* @__PURE__ */ u("span", {
					className: a.EyebrowBanner__leadingVisual,
					children: N
				}),
				/* @__PURE__ */ u("span", {
					className: "visually-hidden",
					children: "\xA0"
				}),
				P && !N && /* @__PURE__ */ u(l, { children: P }),
				/* @__PURE__ */ u("span", {
					className: "visually-hidden",
					children: "\xA0"
				}),
				/* @__PURE__ */ d("span", {
					className: a.EyebrowBanner__headings,
					children: [
						j,
						/* @__PURE__ */ u("span", {
							className: "visually-hidden",
							children: "\xA0"
						}),
						M
					]
				}),
				/* @__PURE__ */ u("span", {
					className: a.EyebrowBanner__trailingVisual,
					children: /* @__PURE__ */ u(i, {
						className: a["EyebrowBanner__trailingVisual-icon"],
						expanded: C || T,
						"data-testid": f.expandableArrow
					})
				})
			]
		})
	});
}), m = s(({ className: t, children: n, ...i }, o) => /* @__PURE__ */ u(r, {
	size: "100",
	variant: "default",
	weight: "medium",
	ref: o,
	className: e(a.EyebrowBanner__heading, t),
	...i,
	children: n
})), h = s(({ className: t, children: n, ...i }, o) => /* @__PURE__ */ u(r, {
	size: "100",
	variant: "muted",
	ref: o,
	className: e(a.EyebrowBanner__subHeading, t),
	...i,
	children: n
})), g = n, _ = g[0], v = s(({ className: t, children: n, "aria-hidden": r, icon: i, color: o = _, hasBackground: s = !1, ...c }, l) => /* @__PURE__ */ u("span", {
	ref: l,
	className: e(a.EyebrowBanner__visual, i && a.EyebrowBanner__icon, i && a[`EyebrowBanner__icon--color-${o}`], s && a["EyebrowBanner__icon--badge"], t),
	"data-testid": f.visual,
	"aria-hidden": r || typeof i != "function",
	...c,
	children: i ? typeof i == "function" ? /* @__PURE__ */ u(i, {}) : i : n
})), y = [...t, ...n], b = s(({ className: t, children: n, color: r, ...i }, o) => /* @__PURE__ */ u("span", {
	ref: o,
	className: e(a.EyebrowBanner__leadingLabel, r && a[`EyebrowBanner__leadingLabel--color-${r}`], t),
	"data-testid": f.label,
	...i,
	children: n
})), x = Object.assign(p, {
	Visual: v,
	Label: b,
	Heading: m,
	SubHeading: h,
	testIds: f
});
//#endregion
export { x as EyebrowBanner, g as EyebrowBannerIconColors, y as EyebrowBannerLabelColors, _ as defaultEyebrowBannerIconColor };

//# sourceMappingURL=EyebrowBanner.js.map