@undp/design-system-react/dist/Banner.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import n from "react";
import { jsx as r } from "react/jsx-runtime";
//#region src/components/ui/banner.tsx
var i = t("", {
	variants: {
		backgroundColor: {
			transparent: "bg-transparent text-content-primary",
			background: "bg-background text-content-primary",
			"background-soft": "bg-background-soft text-content-primary",
			foreground: "bg-foreground text-content-reverse",
			"foreground-soft": "bg-foreground-soft text-content-reverse",
			primary: "bg-primary text-content-reverse",
			secondary: "bg-secondary text-content-reverse",
			tertiary: "bg-tertiary text-content-reverse",
			quaternary: "bg-quaternary text-content-primary",
			success: "bg-success text-content-reverse",
			warning: "bg-warning text-content-reverse",
			info: "bg-info text-content-reverse",
			error: "bg-error text-content-reverse"
		},
		padding: {
			none: "py-24 px-0",
			"2xs": "py-24 px-1",
			xs: "py-24 px-2",
			sm: "py-24 px-3",
			base: "py-24 px-4",
			lg: "py-24 px-5",
			xl: "py-24 px-6",
			"2xl": "py-24 px-8",
			"3xl": "py-24 px-10"
		}
	},
	defaultVariants: {
		backgroundColor: "transparent",
		padding: "base"
	}
}), a = t("flex flex-row items-stretch flex-wrap w-full", {
	variants: {
		bodyMaxWidth: {
			xs: "max-w-[1024px] mx-auto",
			sm: "max-w-[1272px] mx-auto",
			base: "max-w-[1440px] mx-auto",
			lg: "max-w-[1600px] mx-auto",
			xl: "max-w-[1980px] mx-auto",
			full: "max-w-none"
		},
		bodyGap: {
			none: "gap-0",
			"2xs": "gap-1",
			xs: "gap-2",
			sm: "gap-3",
			base: "gap-4",
			lg: "gap-5",
			xl: "gap-6",
			"2xl": "gap-7",
			"3xl": "gap-8"
		}
	},
	defaultVariants: {
		bodyGap: "base",
		bodyMaxWidth: "full"
	}
}), o = t("w-full", {
	variants: { sidebarWidth: {
		sm: "sm:w-1/4",
		base: "sm:w-1/3",
		lg: "sm:w-1/2",
		full: ""
	} },
	defaultVariants: { sidebarWidth: "base" }
}), s = n.createContext(null), c = n.forwardRef(({ className: t, backgroundColor: a, sidebarWidth: o, bodyGap: c, bodyMaxWidth: l, padding: u, ...d }, f) => {
	let p = n.useMemo(() => ({
		backgroundColor: a,
		sidebarWidth: o,
		bodyGap: c,
		bodyMaxWidth: l,
		padding: u
	}), [
		a,
		o,
		c,
		l,
		u
	]);
	return /* @__PURE__ */ r(s.Provider, {
		value: p,
		children: /* @__PURE__ */ r("div", {
			...d,
			className: e(i({
				backgroundColor: a,
				padding: u
			}), t),
			ref: f
		})
	});
});
c.displayName = "Banner";
var l = n.forwardRef(({ className: t, ...i }, o) => {
	let c = n.useContext(s);
	return /* @__PURE__ */ r("div", {
		...i,
		className: e(a({
			bodyMaxWidth: c?.bodyMaxWidth,
			bodyGap: c?.bodyGap
		}), t),
		ref: o
	});
});
l.displayName = "BannerBody";
var u = n.forwardRef(({ className: t, ...i }, a) => {
	let c = n.useContext(s);
	return /* @__PURE__ */ r("div", {
		...i,
		className: e(o({ sidebarWidth: c?.sidebarWidth }), t),
		ref: a
	});
});
u.displayName = "BannerBodySidebar";
var d = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
	...n,
	className: e("flex-1", t),
	ref: i
}));
d.displayName = "BannerBodyContent";
//#endregion
export { c as Banner, l as BannerBody, d as BannerBodyContent, u as BannerBodySidebar };

//# sourceMappingURL=Banner.js.map