@undp/design-system-react/dist/header-jMcxUrTI.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./createLucideIcon-JAvQ_M0R.js";
import { t as n } from "./x-CXpb8l-i.js";
import r from "react";
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
var s = t("menu", [
	["path", {
		d: "M4 12h16",
		key: "1lakjw"
	}],
	["path", {
		d: "M4 18h16",
		key: "19g7jn"
	}],
	["path", {
		d: "M4 6h16",
		key: "1o0s65"
	}]
]);
//#endregion
//#region src/components/ui/header.tsx
function c({ className: t, children: n, ...r }) {
	return /* @__PURE__ */ a("header", {
		...r,
		className: e("relative top-0 left-0 z-10 box-border flex h-18.75 w-full max-w-full items-center justify-between gap-4 bg-surface-2xs px-6 py-0 shadow-header md:h-header", t),
		children: n
	});
}
function l({ className: t, siteName: n, siteSubName: r, hyperlink: i, logoLocale: s, ...c }) {
	return /* @__PURE__ */ a("div", {
		...c,
		className: e("flex items-center", t),
		children: /* @__PURE__ */ o("a", {
			href: i || "./",
			style: { textDecoration: "none" },
			className: "logo-sub-head flex items-center gap-6",
			children: [/* @__PURE__ */ a("img", {
				src: `https://cdn.jsdelivr.net/npm/@undp/design-system-assets/images/${s === "es" || s === "fr" ? "pnud" : "undp"}-logo-blue.svg`,
				alt: "UNDP Logo",
				className: "z-100 h-20.5 w-10 md:h-30.5 md:w-15"
			}), /* @__PURE__ */ o("div", { children: [r ? /* @__PURE__ */ a("div", {
				className: "mx-0 mt-0 mb-[4.8px] inline-block border-b border-b-primary-gray-500 pb-px font-semibold text-primary-gray-600 text-xs uppercase leading-base no-underline",
				children: r
			}) : null, /* @__PURE__ */ a("div", {
				className: "m-0 p-0 font-semibold text-base text-content-primary leading-base no-underline lg:text-xl",
				children: n
			})] })]
		})
	});
}
function u({ className: t, children: c, ...l }) {
	let [u, d] = r.useState(!1);
	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("div", {
		...l,
		className: e("hidden grow justify-between gap-8 text-sm uppercase md:flex", t),
		children: c
	}), /* @__PURE__ */ o("div", {
		...l,
		className: e("flex grow justify-end gap-8 md:hidden", t),
		children: [/* @__PURE__ */ a("button", {
			type: "button",
			onClick: () => {
				d(!u);
			},
			children: a(u ? n : s, { className: "h-6 w-6 stroke-secondary" })
		}), u ? /* @__PURE__ */ a("div", {
			onClick: (e) => {
				e.target.closest("a") && d(!1);
			},
			onKeyDown: () => {},
			className: "absolute top-full left-0 m-0 box-border h-[calc(100vh-75px)] w-full overflow-y-auto bg-surface/80 p-[5.625rem_1.5rem_3.75rem] backdrop-blur-frosted",
			children: c
		}) : null]
	})] });
}
function d({ className: t, children: n, align: r = "center", ...i }) {
	return /* @__PURE__ */ a("div", {
		...i,
		className: e("grid grow items-center gap-4 font-medium text-content-primary tracking-[0.42px] md:flex md:gap-8 [&>a:hover]:text-secondary [&>a]:font-bold [&>a]:text-base [&>a]:text-content-primary [&>a]:uppercase [&>a]:no-underline md:[&>a]:font-medium md:[&>a]:text-sm", r === "end" ? "md:justify-end" : "md:justify-center", t),
		children: n
	});
}
function f({ className: t, children: n, ...r }) {
	return /* @__PURE__ */ a("div", {
		...r,
		className: e("mt-6 flex items-center gap-8 md:mt-0 md:justify-center", t),
		children: n
	});
}
//#endregion
export { d as a, u as i, f as n, l as r, c as t };

//# sourceMappingURL=header-jMcxUrTI.js.map