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

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import * as n from "react";
import { jsx as r } from "react/jsx-runtime";
//#region src/components/ui/card-page-wide.tsx
var i = t("flex flex-col items-stretch w-full", {
	variants: { imageWidth: {
		zero: "[&_.card-img]:hidden [&_.card-content]:w-full",
		xs: "[&_.card-img]:w-1/4 [&_.card-content]:w-3/4",
		sm: "[&_.card-img]:w-1/3 [&_.card-content]:w-2/3",
		base: "[&_.card-img]:w-1/2 [&_.card-content]:w-1/2",
		lg: "[&_.card-img]:w-2/3 [&_.card-content]:w-1/3",
		xl: "[&_.card-img]:w-3/4 [&_.card-content]:w-1/4"
	} },
	defaultVariants: { imageWidth: "base" }
}), a = n.forwardRef(({ className: t, border: n, imageWidth: a, ...o }, s) => /* @__PURE__ */ r("div", {
	ref: s,
	className: e(i({ imageWidth: a }), n === !1 ? "" : "border-foreground border-t-2", t),
	...o
}));
a.displayName = "PageWideCard";
var o = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
	ref: i,
	...n,
	className: e("card-content flex flex-col justify-between pl-4 rtl:pr-4 rtl:pl-0", t)
}));
o.displayName = "PageWideCardContent";
var s = n.forwardRef(({ ...e }, t) => /* @__PURE__ */ r("div", {
	ref: t,
	...e
}));
s.displayName = "PageWideCardHeader";
var c = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
	ref: i,
	...n,
	className: e("flex flex-row items-stretch gap-6", t)
}));
c.displayName = "PageWideCardContainer";
var l = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
	ref: i,
	className: e("flex flex-wrap gap-4 pt-4 pb-2 text-content-primary", t),
	...n
}));
l.displayName = "PageWideCardFooter";
var u = n.forwardRef(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ r("div", {
	ref: a,
	className: e("mt-0 mb-0 flex w-full gap-2 pt-4 pr-6 pb-4 pl-6 font-body font-bold text-content-primary text-xs uppercase leading-xs md:mb-0 rtl:pl-6 [dir-rtl]:pr-6", n),
	...i,
	children: t
}));
u.displayName = "PageWideCardTag";
var d = n.forwardRef(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ r("div", {
	ref: a,
	className: e("m-0 flex gap-2 pt-12 pr-0 pb-8 pl-0 font-body font-normal text-content-primary text-h4-xs md:text-h4-sm lg:text-h4", n),
	...i,
	children: t
}));
d.displayName = "PageWideCardTitle";
var f = n.forwardRef(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ r("div", {
	ref: a,
	className: e("mt-0 flex flex-col gap-2 pt-0 pr-0 pb-6 pl-0 font-body text-content-primary text-p-xs md:text-p-sm lg:text-p", n),
	...i,
	children: t
}));
f.displayName = "PageWideCardDescription";
var p = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("img", {
	ref: i,
	alt: "card",
	...n,
	className: e("card-img object-cover", t)
}));
p.displayName = "PageWideCardImage";
//#endregion
export { a as PageWideCard, c as PageWideCardContainer, o as PageWideCardContent, f as PageWideCardDescription, l as PageWideCardFooter, s as PageWideCardHeader, p as PageWideCardImage, u as PageWideCardTag, d as PageWideCardTitle };

//# sourceMappingURL=PageWideCard.js.map