themelia-react-ui 2.0.5 → 3.0.0

package/dist/{header-DMMxG__r.js → header-Cq3G0ZRP.js}

@@ -1,44 +1,44 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-B6kKb8jB.js";
-import { n } from "./buttons-BedGfygC.js";
-import { c as r, o as i } from "./typography-BQnine1k.js";
-import { t as a } from "./structure-DuxKl954.js";
+import { t } from "./utils-BVbAG2J6.js";
+import { c as n, o as r } from "./typography-C0dELqYV.js";
+import { n as i } from "./buttons-pZVgPTZn.js";
+import { t as a } from "./structure-DElaQwwN.js";
 import { t as o } from "./tone-recipes-BPsRAvhu.js";
-import "./surface-recipes-BKRVW8Os.js";
-import { i as s } from "./popover.recipes-DdiEp0rd.js";
-import { a as c, d as l, g as u, i as d, o as f, r as p, s as m, t as h } from "./dropdown-menu-CLs8Lihj.js";
-import { n as g } from "./action-menu-Dr8K-ghE.js";
+import "./surface-recipes-DV6rrOFq.js";
+import { i as s } from "./popover.recipes-BqkdvlZn.js";
+import { a as c, d as l, g as u, i as d, o as f, r as p, s as m, t as h } from "./dropdown-menu-B8hjvbkS.js";
+import { n as g } from "./action-menu-D5343RwT.js";
 import { t as _ } from "./initials-format-CDoQEOd_.js";
-import { i as v, n as y, s as b } from "./avatar-CeZaFmNH.js";
-import { t as x } from "./separator-Ct_WSWTJ.js";
-import { c as S, o as C, t as w } from "./popover-B85RenIl.js";
-import { t as T } from "./breadcrumbs-J-K2kl4c.js";
-import { w as E } from "./sidebar-f9gRWXIR.js";
-import { f as D, t as O } from "./hooks-DB6CJ4MR.js";
-import { n as k } from "./header.recipes-BigdJjw1.js";
-import * as A from "react";
-import { forwardRef as j, useEffect as M, useState as N } from "react";
-import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
-import { Bell as L, ChevronsUpDown as R, LogOut as z, Search as B, Settings as V, User as H } from "lucide-react";
+import { i as v, n as y, s as b } from "./avatar-Ca3Ihrq4.js";
+import { t as x } from "./separator-DaDe26sf.js";
+import { c as S, o as C, t as w } from "./popover-BpMxbqEK.js";
+import { t as T } from "./breadcrumbs-CQ9JSlez.js";
+import { O as E, w as D } from "./sidebar-C-iQ_TJP.js";
+import { m as O, t as k } from "./hooks-DHfeSMAO.js";
+import { n as A } from "./header.recipes-BigdJjw1.js";
+import * as j from "react";
+import { forwardRef as M, useEffect as N, useState as P } from "react";
+import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";
+import { Bell as R, ChevronsUpDown as z, LogOut as B, Search as V, Settings as H, User as U } from "lucide-react";
 //#region src/components/layout/header/partials/header-breadcrumbs.tsx
-function U({ breadcrumbs: e = [], homeBreadcrumb: n = null, showSidebarTrigger: r = !0, triggerSlot: i, renderLink: a, className: o }) {
-	let s = D({ renderLink: a }), c = A.useMemo(() => {
+function W({ breadcrumbs: e = [], homeBreadcrumb: n = null, showSidebarTrigger: r = !0, triggerSlot: i, renderLink: a, className: o }) {
+	let s = O({ renderLink: a }), c = E(), l = j.useMemo(() => {
 		let t = [];
 		return n && t.push(n), t.push(...e), t;
-	}, [n, e]), l = c.length > 0;
-	return /* @__PURE__ */ I("div", {
+	}, [n, e]), u = l.length > 0, d = i ?? (c && /* @__PURE__ */ I(D, {})), f = r && d != null && typeof d != "boolean";
+	return /* @__PURE__ */ L("div", {
 		className: t("relative flex min-h-action min-w-0 items-center gap-space-lg", o),
-		children: [!!r && /* @__PURE__ */ F("div", {
+		children: [f && /* @__PURE__ */ I("div", {
 			className: "relative flex min-h-action shrink-0 items-center justify-center",
-			children: i ?? /* @__PURE__ */ F(E, {})
-		}), !!l && /* @__PURE__ */ I(P, { children: [!!r && /* @__PURE__ */ F(x, {
+			children: d
+		}), !!u && /* @__PURE__ */ L(F, { children: [f && /* @__PURE__ */ I(x, {
 			orientation: "vertical",
 			className: "h-icon shrink-0 data-[orientation=vertical]:self-center"
-		}), /* @__PURE__ */ F("div", {
+		}), /* @__PURE__ */ I("div", {
 			className: "flex min-w-0 flex-1 items-center overflow-hidden",
-			children: /* @__PURE__ */ F(T, {
-				breadcrumbs: c,
+			children: /* @__PURE__ */ I(T, {
+				breadcrumbs: l,
 				size: "sm",
 				renderLink: s,
 				className: t("min-w-0 overflow-hidden", "[&_[data-slot=breadcrumb-list]]:flex-nowrap [&_[data-slot=breadcrumb-list]]:overflow-hidden [&_[data-slot=breadcrumb-list]]:break-normal", "[&_[data-slot=breadcrumb-item]]:min-w-0", "[&_[data-slot=breadcrumb-item]:not(:last-child)]:max-w-max [&_[data-slot=breadcrumb-item]:not(:last-child)]:grow [&_[data-slot=breadcrumb-item]:not(:last-child)]:basis-0", "[&_[data-slot=breadcrumb-link]]:truncate [&_[data-slot=breadcrumb-page]]:truncate")
@@ -48,26 +48,26 @@ function U({ breadcrumbs: e = [], homeBreadcrumb: n = null, showSidebarTrigger:
 }
 //#endregion
 //#region src/components/layout/header/header.tsx
-var W = j(function({ showBreadcrumbs: e = !0, breadcrumbs: n = [], homeBreadcrumb: r = null, showSidebarTrigger: i = !0, slots: o, renderLink: s, className: c, contentClassName: l, leftClassName: u, centerClassName: d, rightClassName: f, breadcrumbsClassName: p, ...m }, h) {
-	let g = D({ renderLink: s });
-	return /* @__PURE__ */ F("header", {
+var G = M(function({ showBreadcrumbs: e = !0, breadcrumbs: n = [], homeBreadcrumb: r = null, showSidebarTrigger: i = !0, slots: o, renderLink: s, className: c, contentClassName: l, leftClassName: u, centerClassName: d, rightClassName: f, breadcrumbsClassName: p, ...m }, h) {
+	let g = O({ renderLink: s });
+	return /* @__PURE__ */ I("header", {
 		...m,
 		ref: h,
-		className: t("header--component @container/app-header box-border sticky top-0 z-40 flex min-w-0 min-h-shell-header items-center border-b border-border bg-background px-surface-lg py-space-sm transition-[width,height] ease-linear", k, c),
-		children: /* @__PURE__ */ I(a, {
+		className: t("header--component @container/app-header box-border sticky top-0 z-40 flex min-w-0 min-h-shell-header items-center border-b border-border bg-background px-surface-lg py-space-sm", A, c),
+		children: /* @__PURE__ */ L(a, {
 			direction: "horizontal",
 			gap: "xl",
 			align: "center",
 			wrap: !0,
 			className: t("min-w-0 min-h-action flex-1", l),
 			children: [
-				!!o?.brand && /* @__PURE__ */ F("div", {
+				!!o?.brand && /* @__PURE__ */ I("div", {
 					className: "hidden min-w-0 shrink-0 items-center @2xl/app-header:flex",
 					children: o.brand
 				}),
-				!!e && /* @__PURE__ */ F("div", {
+				!!e && /* @__PURE__ */ I("div", {
 					className: "min-w-0 flex-1 basis-32",
-					children: o?.breadcrumbs ?? /* @__PURE__ */ F(U, {
+					children: o?.breadcrumbs ?? /* @__PURE__ */ I(W, {
 						breadcrumbs: n,
 						homeBreadcrumb: r,
 						showSidebarTrigger: i,
@@ -75,15 +75,15 @@ var W = j(function({ showBreadcrumbs: e = !0, breadcrumbs: n = [], homeBreadcrum
 						className: p
 					})
 				}),
-				!!o?.left && /* @__PURE__ */ F("div", {
+				!!o?.left && /* @__PURE__ */ I("div", {
 					className: t("flex min-w-0 items-center", u),
 					children: o.left
 				}),
-				!!o?.center && /* @__PURE__ */ F("div", {
+				!!o?.center && /* @__PURE__ */ I("div", {
 					className: t("hidden min-w-0 flex-1 basis-64 items-center justify-center @3xl/app-header:flex [&>*]:min-w-0 [&>*]:max-w-full", d),
 					children: o.center
 				}),
-				!!o?.right && /* @__PURE__ */ F("div", {
+				!!o?.right && /* @__PURE__ */ I("div", {
 					className: t("ms-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-space-md [&>*]:max-w-full", f),
 					children: o.right
 				})
@@ -91,88 +91,95 @@ var W = j(function({ showBreadcrumbs: e = !0, breadcrumbs: n = [], homeBreadcrum
 		})
 	});
 });
-W.displayName = "Header";
+G.displayName = "Header";
 //#endregion
 //#region src/components/layout/header/header.types.ts
-var G = {
+var K = {
 	triggerLabel: "Notifications",
+	triggerLabelUnread: (e, t) => t === "Notifications" ? `${t}, ${e} unread` : `${t} (${e})`,
 	heading: "Notifications",
 	markAllRead: "Mark all as read",
 	empty: "No new notifications",
 	viewAll: "View all notifications"
-}, K = {
+}, q = {
 	placeholder: "Search...",
 	shortcutMac: "⌘K",
 	shortcutPc: "Ctrl+K"
-}, q = {
+}, J = {
 	profile: "Profile",
 	settings: "Settings",
 	logout: "Log out"
 };
 //#endregion
 //#region src/components/layout/header/partials/header-search.tsx
-function J() {
+function Y() {
 	if (typeof navigator > "u") return !1;
 	let e = navigator.userAgentData;
 	return e?.platform ? e.platform === "macOS" : /Mac|iPhone|iPad/.test(navigator.platform);
 }
-function Y({ onOpen: i, shortcutModifier: a, enableShortcut: o = !0, strings: s, className: c, iconClassName: l, shortcutSlot: u }) {
-	let d = e(K, s), [f, p] = N(!1);
-	M(() => {
-		a === void 0 && p(J());
+function X({ onOpen: r, shortcutModifier: a, enableShortcut: o = !0, strings: s, className: c, iconClassName: l, shortcutSlot: u, "aria-expanded": d, "aria-haspopup": f, "aria-controls": p }) {
+	let m = e(q, s), [h, g] = P(!1);
+	N(() => {
+		a === void 0 && g(Y());
 	}, [a]);
-	let m = (a ?? (f ? "meta" : "control")) === "meta";
-	O({
+	let _ = (a ?? (h ? "meta" : "control")) === "meta";
+	k({
 		key: "k",
 		enabled: o,
-		onTrigger: i
+		onTrigger: r,
+		modifier: a ?? "mod"
 	});
-	let h = m ? d.shortcutMac : d.shortcutPc, g = u ?? /* @__PURE__ */ F("kbd", {
-		className: t("header-search--shortcut", "pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-space-2xs rounded-radius-xs bg-muted px-space-xs font-sans text-xs font-medium leading-none text-muted-foreground", "hidden lg:inline-flex"),
-		children: m ? d.shortcutMac : d.shortcutPc
+	let v = _ ? m.shortcutMac : m.shortcutPc, y = u ?? /* @__PURE__ */ I("kbd", {
+		className: t("header-search--shortcut", "box-border pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-space-2xs rounded-radius-xs bg-muted px-space-xs font-sans text-xs font-medium leading-none text-muted-foreground", "hidden @min-[10rem]/header-search:inline-flex"),
+		children: _ ? m.shortcutMac : m.shortcutPc
 	});
-	return /* @__PURE__ */ I(n, {
+	return /* @__PURE__ */ L(i, {
 		"data-component": "header-search",
 		"data-slot": "header-search-trigger",
 		type: "button",
-		"aria-label": d.placeholder,
+		"aria-label": m.placeholder,
+		"aria-expanded": d,
+		"aria-haspopup": f,
+		"aria-controls": p,
 		tone: "secondary",
 		buttonStyle: "outline",
 		size: "md",
-		onClick: i,
+		onClick: r,
 		className: t("header-search--component header-search--trigger h-action w-full min-w-0 justify-start gap-space-md rounded-radius px-control-sm text-foreground shadow-none transition-[background-color,border-color,color,box-shadow]", c),
-		title: h,
-		children: [
-			/* @__PURE__ */ F(B, {
-				"data-slot": "header-search-icon",
-				className: t("header-search--icon size-icon shrink-0 text-muted-foreground", l),
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ F(r, {
+		title: v,
+		children: [/* @__PURE__ */ I(V, {
+			"data-slot": "header-search-icon",
+			className: t("header-search--icon size-icon shrink-0 text-muted-foreground", l),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ L("span", {
+			className: "header-search--label @container/header-search flex min-w-20 flex-1 items-center gap-space-md",
+			children: [/* @__PURE__ */ I(n, {
 				tag: "span",
 				size: "inherit",
 				type: "secondary",
 				"data-slot": "header-search-placeholder",
 				className: "header-search--placeholder min-w-0 flex-1 truncate text-left",
-				children: d.placeholder
-			}),
-			g
-		]
+				children: m.placeholder
+			}), y]
+		})]
 	});
 }
 //#endregion
 //#region src/components/layout/header/partials/header-global-search-trigger.tsx
-function X({ onOpen: e, onOpenChange: t, ...n }) {
-	return /* @__PURE__ */ F(Y, {
-		...n,
+function Z({ onOpen: e, open: t, onOpenChange: n, ...r }) {
+	let i = t !== void 0;
+	return /* @__PURE__ */ I(X, {
+		"aria-haspopup": i ? "dialog" : void 0,
+		"aria-expanded": i ? t : void 0,
+		...r,
 		onOpen: () => {
-			e?.(), t?.(!0);
+			e?.(), n?.(!0);
 		}
 	});
 }
 //#endregion
 //#region src/components/layout/header/partials/header-tool-button.tsx
-var Z = A.forwardRef(({ label: e, icon: i, active: a = !1, disabled: o = !1, badge: s, onClick: c, className: l, iconClassName: u }, d) => /* @__PURE__ */ I(n, {
+var Q = j.forwardRef(({ label: e, icon: r, active: a = !1, disabled: o = !1, badge: s, onClick: c, className: l, iconClassName: u }, d) => /* @__PURE__ */ L(i, {
 	ref: d,
 	"data-component": "header-tool-button",
 	"data-slot": "header-tool-button",
@@ -188,12 +195,12 @@ var Z = A.forwardRef(({ label: e, icon: i, active: a = !1, disabled: o = !1, bad
 	onClick: c,
 	className: t("header-tool-button--component header-tool-button--trigger relative rounded-radius text-foreground transition-[background-color,color,box-shadow] hover:bg-accent hover:text-accent-foreground", a && "bg-accent text-accent-foreground", l),
 	children: [
-		/* @__PURE__ */ F(i, {
+		/* @__PURE__ */ I(r, {
 			"data-slot": "header-tool-icon",
 			className: t("header-tool-button--icon size-icon", u),
 			"aria-hidden": "true"
 		}),
-		!!s && /* @__PURE__ */ F(r, {
+		!!s && /* @__PURE__ */ I(n, {
 			tag: "span",
 			size: "xs",
 			weight: "medium",
@@ -202,7 +209,7 @@ var Z = A.forwardRef(({ label: e, icon: i, active: a = !1, disabled: o = !1, bad
 			className: t("header-tool-button--badge", "pointer-events-none absolute -end-1 -top-1 flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-foreground px-space-xs text-background tabular-nums"),
 			children: s
 		}),
-		/* @__PURE__ */ F(r, {
+		/* @__PURE__ */ I(n, {
 			tag: "span",
 			size: "inherit",
 			className: "sr-only",
@@ -210,25 +217,22 @@ var Z = A.forwardRef(({ label: e, icon: i, active: a = !1, disabled: o = !1, bad
 		})
 	]
 }));
-Z.displayName = "HeaderToolButton";
+Q.displayName = "HeaderToolButton";
 //#endregion
 //#region src/components/layout/header/partials/header-tool-popover.tsx
-function Q({ label: e, icon: n, open: r, defaultOpen: i, onOpenChange: a, active: o, disabled: c, badge: l, align: u = "end", side: d = "bottom", sideOffset: f = 8, className: p, triggerClassName: m, contentClassName: h, children: g }) {
-	return /* @__PURE__ */ I(C, {
+function $({ label: e, icon: n, open: r, defaultOpen: i, onOpenChange: a, active: o, disabled: c, badge: l, align: u = "end", side: d = "bottom", sideOffset: f = 8, className: p, triggerClassName: m, contentClassName: h, children: g }) {
+	return /* @__PURE__ */ L(C, {
 		open: r,
 		defaultOpen: i,
 		onOpenChange: a,
-		children: [/* @__PURE__ */ F(S, {
-			asChild: !0,
-			children: /* @__PURE__ */ F(Z, {
-				label: e,
-				icon: n,
-				active: o ?? r,
-				disabled: c,
-				badge: l,
-				className: m
-			})
-		}), /* @__PURE__ */ F(w, {
+		children: [/* @__PURE__ */ I(S, { render: /* @__PURE__ */ I(Q, {
+			label: e,
+			icon: n,
+			active: o ?? r,
+			disabled: c,
+			badge: l,
+			className: m
+		}) }), /* @__PURE__ */ I(w, {
 			"data-component": "header-tool-popover",
 			"data-slot": "header-tool-popover-content",
 			align: u,
@@ -241,79 +245,80 @@ function Q({ label: e, icon: n, open: r, defaultOpen: i, onOpenChange: a, active
 }
 //#endregion
 //#region src/components/layout/header/partials/header-user-menu.tsx
-function $({ user: i, showEmail: a = !0, customContent: o, onProfile: s, onSettings: c, onLogout: l, align: d = "end", side: f = "bottom", strings: m, triggerClassName: x, contentClassName: S, renderTrigger: C }) {
-	let w = e(q, m), T = _(i.name, { strategy: "first-words" }), E = a && !!i.email, D = [
+function ee({ user: r, showEmail: a = !0, customContent: o, onProfile: s, onSettings: c, onLogout: l, align: d = "end", side: f = "bottom", strings: m, triggerClassName: x, contentClassName: S, renderTrigger: C }) {
+	let w = e(J, m), T = _(r.name, { strategy: "first-words" }), E = a && !!r.email, D = [
 		...s ? [{
 			id: "profile",
 			label: w.profile,
-			icon: H,
+			icon: U,
 			onClick: s
 		}] : [],
 		...c ? [{
 			id: "settings",
 			label: w.settings,
-			icon: V,
+			icon: H,
 			onClick: c
 		}] : [],
 		...l ? [{
 			id: "logout",
 			label: w.logout,
-			icon: z,
+			icon: B,
 			onClick: l,
 			...s || c ? { group: !0 } : null
 		}] : []
-	], O = C?.(i) ?? /* @__PURE__ */ I(n, {
+	], O = C?.(r) ?? /* @__PURE__ */ L(i, {
 		"data-component": "header-user-menu",
 		"data-slot": "header-user-menu-trigger",
 		type: "button",
-		"aria-label": i.name,
+		"aria-label": r.name,
 		tone: "secondary",
 		buttonStyle: "ghost",
 		size: E ? "lg" : "md",
 		className: t("header-user-menu--component header-user-menu--trigger group min-w-0 max-w-56 justify-start gap-space-md text-foreground shadow-none hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent", !E && "h-action", "max-sm:size-action max-sm:justify-center max-sm:p-0 max-sm:[&_.header-user-menu--identity]:hidden max-sm:[&_.header-user-menu--chevron]:hidden", "@max-md:size-action @max-md:justify-center @max-md:p-0 @max-md:[&_.header-user-menu--identity]:hidden @max-md:[&_.header-user-menu--chevron]:hidden", x),
 		children: [
-			/* @__PURE__ */ I(y, {
+			/* @__PURE__ */ L(y, {
+				size: "sm",
 				"data-slot": "header-user-avatar",
-				className: "header-user-menu--avatar size-avatar-sm overflow-hidden rounded-full ring-1 ring-border",
-				children: [!!i.avatar && /* @__PURE__ */ F(b, {
-					src: i.avatar,
-					alt: i.name
-				}), /* @__PURE__ */ F(v, {
-					className: "rounded-full bg-muted text-xs font-semibold text-muted-foreground",
+				className: "header-user-menu--avatar overflow-hidden rounded-full ring-1 ring-border",
+				children: [!!r.avatar && /* @__PURE__ */ I(b, {
+					src: r.avatar,
+					alt: r.name
+				}), /* @__PURE__ */ I(v, {
+					className: "rounded-full bg-muted text-muted-foreground",
 					children: T
 				})]
 			}),
-			/* @__PURE__ */ I("div", {
+			/* @__PURE__ */ L("div", {
 				"data-slot": "header-user-identity",
 				className: "header-user-menu--identity grid min-w-0 flex-1 gap-dense text-start leading-none",
-				children: [/* @__PURE__ */ F(r, {
+				children: [/* @__PURE__ */ I(n, {
 					type: "inherit",
 					weight: "medium",
 					lineHeight: "tight",
 					className: "truncate",
-					children: i.name
-				}), E && /* @__PURE__ */ F(r, {
+					children: r.name
+				}), E && /* @__PURE__ */ I(n, {
 					size: "xs",
 					type: "secondary",
 					lineHeight: "tight",
 					className: "truncate",
-					children: i.email
+					children: r.email
 				})]
 			}),
-			/* @__PURE__ */ F(R, {
+			/* @__PURE__ */ I(z, {
 				className: "header-user-menu--chevron size-icon-sm shrink-0 text-muted-foreground",
 				"aria-hidden": "true"
 			})
 		]
 	}), k = t("header-user-menu--content w-(--anchor-width) min-w-56 rounded-surface", S);
-	return o ? /* @__PURE__ */ I(h, { children: [/* @__PURE__ */ F(u, { render: O }), /* @__PURE__ */ F(p, {
+	return o ? /* @__PURE__ */ L(h, { children: [/* @__PURE__ */ I(u, { render: O }), /* @__PURE__ */ I(p, {
 		"data-component": "header-user-menu-content",
 		"data-slot": "header-user-menu-content",
 		className: k,
 		align: d,
 		side: f,
 		children: o
-	})] }) : /* @__PURE__ */ F(g, {
+	})] }) : /* @__PURE__ */ I(g, {
 		actions: D,
 		align: d,
 		side: f,
@@ -325,76 +330,76 @@ function $({ user: i, showEmail: a = !0, customContent: o, onProfile: s, onSetti
 }
 //#endregion
 //#region src/components/layout/header/partials/header-notifications.tsx
-var ee = {
+var te = {
 	info: "bg-info",
 	success: "bg-success",
 	warning: "bg-warning",
 	destructive: "bg-destructive"
 };
-function te({ notifications: o = [], unreadCount: g = 0, onNotificationClick: _, onMarkAllRead: v, onViewAll: y, viewAllHref: b, renderLink: x, align: S = "end", side: C = "bottom", strings: w, className: T, contentClassName: E, renderNotification: O }) {
-	let k = e(G, w), A = D({ renderLink: x }), j = g > 99 ? "99+" : String(g);
-	return /* @__PURE__ */ I(h, { children: [/* @__PURE__ */ F(u, { render: /* @__PURE__ */ I(n, {
+function ne({ notifications: o = [], unreadCount: g, onNotificationClick: _, onMarkAllRead: v, onViewAll: y, viewAllHref: b, renderLink: x, align: S = "end", side: C = "bottom", strings: w, className: T, contentClassName: E, renderNotification: D }) {
+	let k = e(K, w), A = O({ renderLink: x }), j = g ?? o.filter((e) => !e.read).length, M = j > 99 ? "99+" : String(j), N = j > 0 ? k.triggerLabelUnread(j, k.triggerLabel) : k.triggerLabel;
+	return /* @__PURE__ */ L(h, { children: [/* @__PURE__ */ I(u, { render: /* @__PURE__ */ L(i, {
 		"data-component": "header-notifications",
 		"data-slot": "header-notifications-trigger",
 		tone: "secondary",
 		buttonStyle: "ghost",
 		size: "md",
 		iconOnly: !0,
-		"aria-label": k.triggerLabel,
+		"aria-label": N,
 		className: t("header-notifications--component header-notifications--trigger relative", T),
-		children: [/* @__PURE__ */ F(L, {
+		children: [/* @__PURE__ */ I(R, {
 			className: "size-icon",
 			"aria-hidden": "true"
-		}), g > 0 && /* @__PURE__ */ F(r, {
+		}), j > 0 && /* @__PURE__ */ I(n, {
 			tag: "span",
 			size: "xs",
 			weight: "medium",
 			lineHeight: "none",
 			"data-slot": "header-notifications-badge",
 			className: t("header-notifications--badge", "pointer-events-none absolute -end-1 -top-1 flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-foreground px-space-xs text-background tabular-nums"),
-			children: j
+			children: M
 		})]
-	}) }), /* @__PURE__ */ I(p, {
+	}) }), /* @__PURE__ */ L(p, {
 		"data-component": "header-notifications-content",
 		"data-slot": "header-notifications-content",
 		className: t("header-notifications--content", s.lg, E),
 		align: S,
 		side: C,
-		children: [/* @__PURE__ */ I(d, { children: [
-			/* @__PURE__ */ I(f, {
-				"aria-hidden": !1,
-				className: "header-notifications--label flex items-center justify-between gap-space-lg text-inherit",
-				children: [/* @__PURE__ */ F(i, {
-					className: "text-inherit",
-					children: k.heading
-				}), g > 0 && !!v && /* @__PURE__ */ F(n, {
-					type: "button",
-					tone: "secondary",
-					buttonStyle: "ghost",
-					size: "sm",
+		children: [/* @__PURE__ */ L(d, { children: [
+			/* @__PURE__ */ L("div", {
+				className: "header-notifications--header flex items-center justify-between gap-space-lg",
+				children: [/* @__PURE__ */ I(f, {
+					"aria-hidden": !1,
+					className: "header-notifications--label min-w-0 flex-1 text-inherit",
+					children: /* @__PURE__ */ I(r, {
+						className: "text-inherit",
+						children: k.heading
+					})
+				}), j > 0 && !!v && /* @__PURE__ */ I(c, {
+					closeOnClick: !1,
 					onClick: v,
-					className: "shrink-0",
+					className: "header-notifications--mark-all-read w-auto shrink-0",
 					children: k.markAllRead
 				})]
 			}),
-			/* @__PURE__ */ F(l, {}),
-			o.length === 0 ? /* @__PURE__ */ F("div", {
+			/* @__PURE__ */ I(l, {}),
+			o.length === 0 ? /* @__PURE__ */ I("div", {
 				className: "header-notifications--empty p-surface text-center",
-				children: /* @__PURE__ */ F(r, {
+				children: /* @__PURE__ */ I(n, {
 					type: "secondary",
 					children: k.empty
 				})
-			}) : /* @__PURE__ */ F(a, {
+			}) : /* @__PURE__ */ I(a, {
 				gap: "xs",
 				className: "header-notifications--list",
-				children: o.map((e) => /* @__PURE__ */ F(ne, {
+				children: o.map((e) => /* @__PURE__ */ I(re, {
 					notification: e,
 					onClick: _,
 					renderLink: A,
-					renderNotification: O
+					renderNotification: D
 				}, e.id))
 			})
-		] }), !!(y || b) && /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F(l, {}), b ? /* @__PURE__ */ F(m, {
+		] }), !!(y || b) && /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I(l, {}), b ? /* @__PURE__ */ I(m, {
 			href: b,
 			render: (e) => A({
 				...e,
@@ -402,39 +407,39 @@ function te({ notifications: o = [], unreadCount: g = 0, onNotificationClick: _,
 				children: e.children
 			}),
 			children: k.viewAll
-		}) : /* @__PURE__ */ F(c, {
+		}) : /* @__PURE__ */ I(c, {
 			onClick: y,
 			children: k.viewAll
 		})] })]
 	})] });
 }
-function ne({ notification: e, onClick: n, renderLink: i, renderNotification: s }) {
+function re({ notification: e, onClick: r, renderLink: i, renderNotification: s }) {
 	if (s) return s(e);
-	let l = /* @__PURE__ */ I(a, {
+	let l = /* @__PURE__ */ L(a, {
 		direction: "horizontal",
 		align: "start",
 		wrap: !1,
 		gap: "sm",
 		className: "header-notifications--item-content",
-		children: [!!e.tone && /* @__PURE__ */ F("span", {
+		children: [!!e.tone && /* @__PURE__ */ I("span", {
 			"aria-hidden": "true",
 			"data-tone": e.tone,
-			className: t("header-notifications--tone mt-space-sm", o.marker, ee[e.tone])
-		}), /* @__PURE__ */ I(a, {
+			className: t("header-notifications--tone mt-space-sm", o.marker, te[e.tone])
+		}), /* @__PURE__ */ L(a, {
 			gap: "dense",
 			className: "min-w-0",
 			children: [
-				/* @__PURE__ */ F(r, {
+				/* @__PURE__ */ I(n, {
 					type: "inherit",
 					weight: "medium",
 					children: e.title
 				}),
-				!!e.description && /* @__PURE__ */ F(r, {
+				!!e.description && /* @__PURE__ */ I(n, {
 					size: "xs",
 					type: "secondary",
 					children: e.description
 				}),
-				!!e.time && /* @__PURE__ */ F(r, {
+				!!e.time && /* @__PURE__ */ I(n, {
 					size: "xs",
 					type: "secondary",
 					children: e.time
@@ -442,23 +447,23 @@ function ne({ notification: e, onClick: n, renderLink: i, renderNotification: s
 			]
 		})]
 	}), u = t("header-notifications--item items-start", !e.read && "bg-muted text-muted-foreground");
-	return e.href ? /* @__PURE__ */ F(m, {
+	return e.href ? /* @__PURE__ */ I(m, {
 		href: e.href,
 		className: u,
-		onClick: () => n?.(e),
+		onClick: () => r?.(e),
 		render: (t) => i({
 			...t,
 			href: e.href,
 			children: t.children
 		}),
 		children: l
-	}) : /* @__PURE__ */ F(c, {
-		onClick: () => n?.(e),
+	}) : /* @__PURE__ */ I(c, {
+		onClick: () => r?.(e),
 		className: u,
 		children: l
 	});
 }
 //#endregion
-export { X as a, K as c, U as d, Z as i, q as l, $ as n, Y as o, Q as r, G as s, te as t, W as u };
+export { Z as a, q as c, W as d, Q as i, J as l, ee as n, X as o, $ as r, K as s, ne as t, G as u };
 
-//# sourceMappingURL=header-DMMxG__r.js.map
+//# sourceMappingURL=header-Cq3G0ZRP.js.map