import { t as e } from "./utils-CHlhTiFC.js";
import { t } from "./dist-C2Jrcfwk.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-primary-transparent text-primary-black dark:text-primary-white",
			white: "bg-primary-white dark:bg-primary-gray-700 text-primary-black dark:text-primary-white",
			gray: "bg-primary-gray-200 dark:bg-primary-gray-600 text-primary-black dark:text-primary-white",
			"dark-gray": "bg-primary-gray-600 dark:bg-primary-gray-300 text-primary-white dark:text-primary-black",
			black: "bg-primary-gray-700 dark:bg-primary-gray-100 text-primary-white dark:text-primary-black",
			blue: "bg-primary-blue-600 dark:bg-primary-blue-500 text-primary-white",
			azure: "bg-accent-azure",
			yellow: "bg-accent-yellow",
			red: "bg-accent-red text-primary-white",
			green: "bg-accent-green",
			custom: "bg-custom-color-600 text-custom-foreground"
		},
		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