themelia-react-ui 2.0.0 → 2.0.2

package/dist/{header-2ycNqGOR.js → header-CGXuhcRm.js}

@@ -1,40 +1,43 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-Cospvlj1.js";
-import { a as n, s as r } from "./typography-CAr3dQhX.js";
-import { t as i } from "./button-BS3KDg00.js";
-import { t as a } from "./structure-hzCW-XsV.js";
-import { a as o, d as s, g as c, i as l, o as u, r as d, s as f, t as p } from "./dropdown-menu-CURh59jb.js";
-import { n as m } from "./action-menu-BTpyPWJ2.js";
-import { t as h } from "./initials-format-CDoQEOd_.js";
-import { i as g, n as _, s as v } from "./avatar-djdaaQ_s.js";
-import { t as y } from "./badge-0tATj-tW.js";
-import { t as b } from "./separator-Do5GWDYi.js";
-import { c as x, o as S, t as C } from "./popover-Dcv_9jxr.js";
-import { t as w } from "./breadcrumbs-BG_FfMK4.js";
-import { C as T } from "./sidebar-Crc9M9JV.js";
-import { d as E, t as D } from "./hooks-DQ5SPwZw.js";
-import * as O from "react";
-import { forwardRef as k, useEffect as A, useState as j } from "react";
-import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
-import { Bell as F, ChevronsUpDown as I, LogOut as L, Search as R, Settings as z, User as B } from "lucide-react";
+import { t } from "./utils-BRhFDwuU.js";
+import { n } from "./buttons-DPZekJFu.js";
+import { c as r, o as i } from "./typography-UTnveOEy.js";
+import { t as a } from "./structure-BmisBK-3.js";
+import { t as o } from "./tone-recipes-BPsRAvhu.js";
+import "./surface-recipes-BKRVW8Os.js";
+import { i as s } from "./popover.recipes-D3j8R8Yp.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-Cl4X7L5S.js";
+import { n as g } from "./action-menu-CllU52Mm.js";
+import { t as _ } from "./initials-format-CDoQEOd_.js";
+import { i as v, n as y, s as b } from "./avatar-DAPlDvhJ.js";
+import { t as x } from "./badge-HpFqoqSY.js";
+import { t as S } from "./separator-BDV-Y648.js";
+import { c as C, o as w, t as T } from "./popover-7_m66eYW.js";
+import { t as E } from "./breadcrumbs-C-oqs1sQ.js";
+import { C as D } from "./sidebar-CPx_7YBa.js";
+import { d as O, t as k } from "./hooks-Dkz0K2WT.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";
 //#region src/components/layout/header/partials/header-breadcrumbs.tsx
-function V({ breadcrumbs: e = [], homeBreadcrumb: n = null, showSidebarTrigger: r = !0, triggerSlot: i, renderLink: a, className: o }) {
-	let s = E({ renderLink: a }), c = O.useMemo(() => {
+function U({ breadcrumbs: e = [], homeBreadcrumb: n = null, showSidebarTrigger: r = !0, triggerSlot: i, renderLink: a, className: o }) {
+	let s = O({ renderLink: a }), c = A.useMemo(() => {
 		let t = [];
 		return n && t.push(n), t.push(...e), t;
 	}, [n, e]), l = c.length > 0;
-	return /* @__PURE__ */ P("div", {
+	return /* @__PURE__ */ I("div", {
 		className: t("relative flex min-h-action min-w-0 items-center gap-space-lg", o),
-		children: [!!r && /* @__PURE__ */ N("div", {
+		children: [!!r && /* @__PURE__ */ F("div", {
 			className: "relative flex min-h-action shrink-0 items-center justify-center",
-			children: i ?? /* @__PURE__ */ N(T, { className: "size-action-xs [&_svg]:size-icon" })
-		}), !!l && /* @__PURE__ */ P(M, { children: [!!r && /* @__PURE__ */ N(b, {
+			children: i ?? /* @__PURE__ */ F(D, { className: "size-action-xs [&_svg]:size-icon" })
+		}), !!l && /* @__PURE__ */ I(P, { children: [!!r && /* @__PURE__ */ F(S, {
 			orientation: "vertical",
 			className: "h-icon shrink-0"
-		}), /* @__PURE__ */ N("div", {
+		}), /* @__PURE__ */ F("div", {
 			className: "flex min-w-0 flex-1 items-center overflow-hidden",
-			children: /* @__PURE__ */ N(w, {
+			children: /* @__PURE__ */ F(E, {
 				breadcrumbs: c,
 				size: "sm",
 				renderLink: s,
@@ -45,26 +48,26 @@ function V({ breadcrumbs: e = [], homeBreadcrumb: n = null, showSidebarTrigger:
 }
 //#endregion
 //#region src/components/layout/header/header.tsx
-var H = k(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 = E({ renderLink: s });
-	return /* @__PURE__ */ N("header", {
+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 = O({ renderLink: s });
+	return /* @__PURE__ */ F("header", {
 		...m,
 		ref: h,
 		className: t("header--component @container/app-header sticky top-0 z-40 flex min-w-0 min-h-shell-header items-center border-b border-border bg-background px-surface py-space-sm transition-[width,height] ease-linear", c),
-		children: /* @__PURE__ */ P(a, {
+		children: /* @__PURE__ */ I(a, {
 			direction: "horizontal",
 			gap: "xl",
 			align: "center",
 			wrap: !0,
 			className: t("min-w-0 min-h-action flex-1", l),
 			children: [
-				!!o?.brand && /* @__PURE__ */ N("div", {
+				!!o?.brand && /* @__PURE__ */ F("div", {
 					className: "hidden min-w-0 shrink-0 items-center @2xl/app-header:flex",
 					children: o.brand
 				}),
-				!!e && /* @__PURE__ */ N("div", {
+				!!e && /* @__PURE__ */ F("div", {
 					className: "min-w-0 flex-1 basis-32",
-					children: o?.breadcrumbs ?? /* @__PURE__ */ N(V, {
+					children: o?.breadcrumbs ?? /* @__PURE__ */ F(U, {
 						breadcrumbs: n,
 						homeBreadcrumb: r,
 						showSidebarTrigger: i,
@@ -72,15 +75,15 @@ var H = k(function({ showBreadcrumbs: e = !0, breadcrumbs: n = [], homeBreadcrum
 						className: p
 					})
 				}),
-				!!o?.left && /* @__PURE__ */ N("div", {
+				!!o?.left && /* @__PURE__ */ F("div", {
 					className: t("flex min-w-0 items-center", u),
 					children: o.left
 				}),
-				!!o?.center && /* @__PURE__ */ N("div", {
+				!!o?.center && /* @__PURE__ */ F("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__ */ N("div", {
+				!!o?.right && /* @__PURE__ */ F("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
 				})
@@ -88,52 +91,47 @@ var H = k(function({ showBreadcrumbs: e = !0, breadcrumbs: n = [], homeBreadcrum
 		})
 	});
 });
-H.displayName = "Header";
+W.displayName = "Header";
 //#endregion
 //#region src/components/layout/header/header.types.ts
-var U = {
+var G = {
 	triggerLabel: "Notifications",
 	heading: "Notifications",
 	markAllRead: "Mark all as read",
 	empty: "No new notifications",
 	viewAll: "View all notifications"
-}, W = {
+}, K = {
 	placeholder: "Search...",
 	shortcutMac: "⌘K",
 	shortcutPc: "Ctrl+K"
-}, G = {
+}, q = {
 	profile: "Profile",
 	settings: "Settings",
 	logout: "Log out"
 };
 //#endregion
 //#region src/components/layout/header/partials/header-search.tsx
-function K() {
+function J() {
 	if (typeof navigator > "u") return !1;
 	let e = navigator.userAgentData;
 	return e?.platform ? e.platform === "macOS" : /Mac|iPhone|iPad/.test(navigator.platform);
 }
-function q({ onOpen: n, shortcutModifier: a, enableShortcut: o = !0, strings: s, className: c, iconClassName: l, shortcutSlot: u }) {
-	let d = e(W, s), [f, p] = j(!1);
-	A(() => {
-		a === void 0 && p(K());
+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());
 	}, [a]);
 	let m = (a ?? (f ? "meta" : "control")) === "meta";
-	D({
+	k({
 		key: "k",
 		enabled: o,
-		onTrigger: n
+		onTrigger: i
 	});
-	let h = m ? d.shortcutMac : d.shortcutPc, g = u ?? /* @__PURE__ */ N("kbd", {
-		className: "header-search--shortcut hidden h-5 shrink-0 items-center gap-space-sm rounded-inner border border-border/70 bg-background/60 px-space-sm font-mono text-xs text-muted-foreground lg:inline-flex",
-		children: /* @__PURE__ */ N(r, {
-			tag: "span",
-			size: "xs",
-			type: "secondary",
-			children: m ? d.shortcutMac : d.shortcutPc
-		})
+	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
 	});
-	return /* @__PURE__ */ P(i, {
+	return /* @__PURE__ */ I(n, {
 		"data-component": "header-search",
 		"data-slot": "header-search-trigger",
 		type: "button",
@@ -141,16 +139,16 @@ function q({ onOpen: n, shortcutModifier: a, enableShortcut: o = !0, strings: s,
 		tone: "secondary",
 		buttonStyle: "outline",
 		size: "sm",
-		onClick: n,
-		className: t("header-search--component header-search--trigger h-action-sm w-full min-w-0 justify-start gap-space-md rounded-inner border-border/80 bg-muted/40 px-control-sm text-foreground shadow-none transition-[background-color,border-color,color,box-shadow] hover:border-border hover:bg-muted/60 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background dark:border-border/80 dark:bg-muted dark:hover:bg-muted/60 dark:hover:text-foreground", c),
+		onClick: i,
+		className: t("header-search--component header-search--trigger h-action-sm w-full min-w-0 justify-start gap-space-md rounded-inner px-control-sm text-foreground shadow-none transition-[background-color,border-color,color,box-shadow]", c),
 		title: h,
 		children: [
-			/* @__PURE__ */ N(R, {
+			/* @__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__ */ N(r, {
+			/* @__PURE__ */ F(r, {
 				tag: "span",
 				size: "inherit",
 				type: "secondary",
@@ -164,8 +162,8 @@ function q({ onOpen: n, shortcutModifier: a, enableShortcut: o = !0, strings: s,
 }
 //#endregion
 //#region src/components/layout/header/partials/header-global-search-trigger.tsx
-function J({ onOpen: e, onOpenChange: t, ...n }) {
-	return /* @__PURE__ */ N(q, {
+function X({ onOpen: e, onOpenChange: t, ...n }) {
+	return /* @__PURE__ */ F(Y, {
 		...n,
 		onOpen: () => {
 			e?.(), t?.(!0);
@@ -174,7 +172,7 @@ function J({ onOpen: e, onOpenChange: t, ...n }) {
 }
 //#endregion
 //#region src/components/layout/header/partials/header-tool-button.tsx
-var Y = O.forwardRef(({ label: e, icon: n, active: a = !1, disabled: o = !1, badge: s, onClick: c, className: l, iconClassName: u }, d) => /* @__PURE__ */ P(i, {
+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, {
 	ref: d,
 	"data-component": "header-tool-button",
 	"data-slot": "header-tool-button",
@@ -188,14 +186,14 @@ var Y = O.forwardRef(({ label: e, icon: n, active: a = !1, disabled: o = !1, bad
 	title: e,
 	disabled: o,
 	onClick: c,
-	className: t("header-tool-button--component header-tool-button--trigger relative size-action-sm rounded-inner text-foreground transition-[background-color,color,box-shadow] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background", a && "bg-accent text-accent-foreground", l),
+	className: t("header-tool-button--component header-tool-button--trigger relative size-action-sm rounded-inner text-foreground transition-[background-color,color,box-shadow] hover:bg-accent hover:text-accent-foreground", a && "bg-accent text-accent-foreground", l),
 	children: [
-		/* @__PURE__ */ N(n, {
+		/* @__PURE__ */ F(i, {
 			"data-slot": "header-tool-icon",
 			className: t("header-tool-button--icon size-icon", u),
 			"aria-hidden": "true"
 		}),
-		!!s && /* @__PURE__ */ N(r, {
+		!!s && /* @__PURE__ */ F(r, {
 			tag: "span",
 			size: "xs",
 			weight: "medium",
@@ -204,7 +202,7 @@ var Y = O.forwardRef(({ label: e, icon: n, active: a = !1, disabled: o = !1, bad
 			className: "header-tool-button--badge absolute right-space-xs top-space-xs flex min-h-space-lg min-w-space-lg items-center justify-center rounded-full bg-destructive px-space-2xs text-destructive-foreground",
 			children: s
 		}),
-		/* @__PURE__ */ N(r, {
+		/* @__PURE__ */ F(r, {
 			tag: "span",
 			size: "inherit",
 			className: "sr-only",
@@ -212,112 +210,113 @@ var Y = O.forwardRef(({ label: e, icon: n, active: a = !1, disabled: o = !1, bad
 		})
 	]
 }));
-Y.displayName = "HeaderToolButton";
+Z.displayName = "HeaderToolButton";
 //#endregion
 //#region src/components/layout/header/partials/header-tool-popover.tsx
-function X({ label: e, icon: n, open: r, defaultOpen: i, onOpenChange: a, active: o, disabled: s, badge: c, align: l = "end", side: u = "bottom", sideOffset: d = 8, className: f, triggerClassName: p, contentClassName: m, children: h }) {
-	return /* @__PURE__ */ P(S, {
+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(w, {
 		open: r,
 		defaultOpen: i,
 		onOpenChange: a,
-		children: [/* @__PURE__ */ N(x, {
+		children: [/* @__PURE__ */ F(C, {
 			asChild: !0,
-			children: /* @__PURE__ */ N(Y, {
+			children: /* @__PURE__ */ F(Z, {
 				label: e,
 				icon: n,
 				active: o ?? r,
-				disabled: s,
-				badge: c,
-				className: p
+				disabled: c,
+				badge: l,
+				className: m
 			})
-		}), /* @__PURE__ */ N(C, {
+		}), /* @__PURE__ */ F(T, {
 			"data-component": "header-tool-popover",
 			"data-slot": "header-tool-popover-content",
-			align: l,
-			side: u,
-			sideOffset: d,
-			className: t("header-tool-popover--component w-80 max-w-[calc(100vw-2rem)]", f, m),
-			children: h
+			align: u,
+			side: d,
+			sideOffset: f,
+			className: t("header-tool-popover--component", s.lg, p, h),
+			children: g
 		})]
 	});
 }
 //#endregion
 //#region src/components/layout/header/partials/header-user-menu.tsx
-function Z({ user: n, showEmail: a = !0, customContent: o, onProfile: s, onSettings: l, onLogout: u, align: f = "end", side: y = "bottom", strings: b, triggerClassName: x, contentClassName: S, renderTrigger: C }) {
-	let w = e(G, b), T = h(n.name, { strategy: "first-words" }), E = [
+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 = [
 		...s ? [{
 			id: "profile",
 			label: w.profile,
-			icon: B,
+			icon: H,
 			onClick: s
 		}] : [],
-		...l ? [{
+		...c ? [{
 			id: "settings",
 			label: w.settings,
-			icon: z,
-			onClick: l
+			icon: V,
+			onClick: c
 		}] : [],
-		...u ? [{
+		...l ? [{
 			id: "logout",
 			label: w.logout,
-			icon: L,
-			onClick: u,
-			...s || l ? { group: !0 } : null
+			icon: z,
+			onClick: l,
+			...s || c ? { group: !0 } : null
 		}] : []
-	], D = C?.(n) ?? /* @__PURE__ */ P(i, {
+	], D = C?.(i) ?? /* @__PURE__ */ I(n, {
 		"data-component": "header-user-menu",
 		"data-slot": "header-user-menu-trigger",
 		type: "button",
-		"aria-label": n.name,
+		"aria-label": i.name,
 		tone: "secondary",
 		buttonStyle: "ghost",
 		size: "lg",
 		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 max-sm:size-action-lg max-sm:justify-center max-sm:p-0 max-sm:[&_.header-user-menu--identity]:hidden max-sm:[&_.header-user-menu--chevron]:hidden", x),
 		children: [
-			/* @__PURE__ */ P(_, {
+			/* @__PURE__ */ I(y, {
 				"data-slot": "header-user-avatar",
 				className: "header-user-menu--avatar size-avatar-sm overflow-hidden rounded-full ring-1 ring-border",
-				children: [!!n.avatar && /* @__PURE__ */ N(v, {
-					src: n.avatar,
-					alt: n.name
-				}), /* @__PURE__ */ N(g, {
+				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",
 					children: T
 				})]
 			}),
-			/* @__PURE__ */ P("div", {
+			/* @__PURE__ */ I("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__ */ N(r, {
+				children: [/* @__PURE__ */ F(r, {
+					type: "inherit",
 					weight: "medium",
 					lineHeight: "tight",
 					className: "truncate",
-					children: n.name
-				}), !!a && !!n.email && /* @__PURE__ */ N(r, {
+					children: i.name
+				}), !!a && !!i.email && /* @__PURE__ */ F(r, {
 					size: "xs",
 					type: "secondary",
 					lineHeight: "tight",
 					className: "truncate",
-					children: n.email
+					children: i.email
 				})]
 			}),
-			/* @__PURE__ */ N(I, {
+			/* @__PURE__ */ F(R, {
 				className: "header-user-menu--chevron size-icon-sm shrink-0 text-muted-foreground",
 				"aria-hidden": "true"
 			})
 		]
 	}), O = t("header-user-menu--content w-(--anchor-width) min-w-56 rounded-radius", S);
-	return o ? /* @__PURE__ */ P(p, { children: [/* @__PURE__ */ N(c, { render: D }), /* @__PURE__ */ N(d, {
+	return o ? /* @__PURE__ */ I(h, { children: [/* @__PURE__ */ F(u, { render: D }), /* @__PURE__ */ F(p, {
 		"data-component": "header-user-menu-content",
 		"data-slot": "header-user-menu-content",
 		className: O,
-		align: f,
-		side: y,
+		align: d,
+		side: f,
 		children: o
-	})] }) : /* @__PURE__ */ N(m, {
+	})] }) : /* @__PURE__ */ F(g, {
 		actions: E,
-		align: f,
-		side: y,
+		align: d,
+		side: f,
 		contentClassName: O,
 		width: "w-auto",
 		closeOnSelect: !0,
@@ -326,132 +325,136 @@ function Z({ user: n, showEmail: a = !0, customContent: o, onProfile: s, onSetti
 }
 //#endregion
 //#region src/components/layout/header/partials/header-notifications.tsx
-var Q = {
+var ee = {
 	info: "bg-info",
 	success: "bg-success",
 	warning: "bg-warning",
 	destructive: "bg-destructive"
 };
-function $({ notifications: m = [], unreadCount: h = 0, onNotificationClick: g, onMarkAllRead: _, onViewAll: v, viewAllHref: b, renderLink: x, align: S = "end", side: C = "bottom", strings: w, className: T, contentClassName: D, renderNotification: O }) {
-	let k = e(U, w), A = E({ renderLink: x }), j = h > 99 ? "99+" : String(h);
-	return /* @__PURE__ */ P(p, { children: [/* @__PURE__ */ N(c, { render: /* @__PURE__ */ P(i, {
+function te({ notifications: o = [], unreadCount: g = 0, onNotificationClick: _, onMarkAllRead: v, onViewAll: y, viewAllHref: b, renderLink: S, align: C = "end", side: w = "bottom", strings: T, className: E, contentClassName: D, renderNotification: k }) {
+	let A = e(G, T), j = O({ renderLink: S }), M = g > 99 ? "99+" : String(g);
+	return /* @__PURE__ */ I(h, { children: [/* @__PURE__ */ F(u, { render: /* @__PURE__ */ I(n, {
 		"data-component": "header-notifications",
 		"data-slot": "header-notifications-trigger",
 		tone: "secondary",
 		buttonStyle: "ghost",
 		size: "sm",
 		iconOnly: !0,
-		"aria-label": k.triggerLabel,
-		className: t("header-notifications--component header-notifications--trigger relative", T),
-		children: [/* @__PURE__ */ N(F, {
+		"aria-label": A.triggerLabel,
+		className: t("header-notifications--component header-notifications--trigger relative", E),
+		children: [/* @__PURE__ */ F(L, {
 			className: "size-icon",
 			"aria-hidden": "true"
-		}), h > 0 && /* @__PURE__ */ N(y, {
+		}), g > 0 && /* @__PURE__ */ F(x, {
 			tone: "destructive",
 			className: "absolute -right-1 -top-1 flex h-4.5 min-w-4.5 items-center justify-center px-space-xs py-0",
-			children: j
+			children: M
 		})]
-	}) }), /* @__PURE__ */ P(d, {
+	}) }), /* @__PURE__ */ I(p, {
 		"data-component": "header-notifications-content",
 		"data-slot": "header-notifications-content",
-		className: t("header-notifications--content w-80 max-w-[calc(100vw-2rem)]", D),
-		align: S,
-		side: C,
-		children: [/* @__PURE__ */ P(l, { children: [
-			/* @__PURE__ */ P(u, {
+		className: t("header-notifications--content", s.lg, D),
+		align: C,
+		side: w,
+		children: [/* @__PURE__ */ I(d, { children: [
+			/* @__PURE__ */ I(f, {
 				"aria-hidden": !1,
-				className: "header-notifications--label flex items-center justify-between gap-space-lg",
-				children: [/* @__PURE__ */ N(n, { children: k.heading }), h > 0 && !!_ && /* @__PURE__ */ N(i, {
+				className: "header-notifications--label flex items-center justify-between gap-space-lg text-inherit",
+				children: [/* @__PURE__ */ F(i, {
+					className: "text-inherit",
+					children: A.heading
+				}), g > 0 && !!v && /* @__PURE__ */ F(n, {
 					type: "button",
 					tone: "secondary",
 					buttonStyle: "ghost",
 					size: "sm",
-					onClick: _,
+					onClick: v,
 					className: "shrink-0",
-					children: k.markAllRead
+					children: A.markAllRead
 				})]
 			}),
-			/* @__PURE__ */ N(s, {}),
-			m.length === 0 ? /* @__PURE__ */ N("div", {
+			/* @__PURE__ */ F(l, {}),
+			o.length === 0 ? /* @__PURE__ */ F("div", {
 				className: "header-notifications--empty p-surface text-center",
-				children: /* @__PURE__ */ N(r, {
+				children: /* @__PURE__ */ F(r, {
 					type: "secondary",
-					children: k.empty
+					children: A.empty
 				})
-			}) : /* @__PURE__ */ N(a, {
+			}) : /* @__PURE__ */ F(a, {
 				gap: "xs",
 				className: "header-notifications--list",
-				children: m.map((e) => /* @__PURE__ */ N(ee, {
+				children: o.map((e) => /* @__PURE__ */ F(ne, {
 					notification: e,
-					onClick: g,
-					renderLink: A,
-					renderNotification: O
+					onClick: _,
+					renderLink: j,
+					renderNotification: k
 				}, e.id))
 			})
-		] }), !!(v || b) && /* @__PURE__ */ P(M, { children: [/* @__PURE__ */ N(s, {}), b ? /* @__PURE__ */ N(f, {
+		] }), !!(y || b) && /* @__PURE__ */ I(P, { children: [/* @__PURE__ */ F(l, {}), b ? /* @__PURE__ */ F(m, {
 			href: b,
-			render: (e) => A({
+			render: (e) => j({
 				...e,
 				href: b,
 				children: e.children
 			}),
-			children: k.viewAll
-		}) : /* @__PURE__ */ N(o, {
-			onClick: v,
-			children: k.viewAll
+			children: A.viewAll
+		}) : /* @__PURE__ */ F(c, {
+			onClick: y,
+			children: A.viewAll
 		})] })]
 	})] });
 }
-function ee({ notification: e, onClick: n, renderLink: i, renderNotification: s }) {
+function ne({ notification: e, onClick: n, renderLink: i, renderNotification: s }) {
 	if (s) return s(e);
-	let c = /* @__PURE__ */ P(a, {
+	let l = /* @__PURE__ */ I(a, {
 		direction: "horizontal",
 		align: "start",
 		wrap: !1,
 		gap: "sm",
 		className: "header-notifications--item-content",
-		children: [!!e.tone && /* @__PURE__ */ N("span", {
+		children: [!!e.tone && /* @__PURE__ */ F("span", {
 			"aria-hidden": "true",
 			"data-tone": e.tone,
-			className: t("header-notifications--tone mt-space-sm size-2 shrink-0 rounded-full", Q[e.tone])
-		}), /* @__PURE__ */ P(a, {
+			className: t("header-notifications--tone mt-space-sm", o.marker, ee[e.tone])
+		}), /* @__PURE__ */ I(a, {
 			gap: "dense",
 			className: "min-w-0",
 			children: [
-				/* @__PURE__ */ N(r, {
+				/* @__PURE__ */ F(r, {
+					type: "inherit",
 					weight: "medium",
 					children: e.title
 				}),
-				!!e.description && /* @__PURE__ */ N(r, {
+				!!e.description && /* @__PURE__ */ F(r, {
 					size: "xs",
 					type: "secondary",
 					children: e.description
 				}),
-				!!e.time && /* @__PURE__ */ N(r, {
+				!!e.time && /* @__PURE__ */ F(r, {
 					size: "xs",
 					type: "secondary",
 					children: e.time
 				})
 			]
 		})]
-	}), l = t("header-notifications--item items-start", !e.read && "bg-muted text-muted-foreground");
-	return e.href ? /* @__PURE__ */ N(f, {
+	}), u = t("header-notifications--item items-start", !e.read && "bg-muted text-muted-foreground");
+	return e.href ? /* @__PURE__ */ F(m, {
 		href: e.href,
-		className: l,
+		className: u,
 		onClick: () => n?.(e),
 		render: (t) => i({
 			...t,
 			href: e.href,
 			children: t.children
 		}),
-		children: c
-	}) : /* @__PURE__ */ N(o, {
+		children: l
+	}) : /* @__PURE__ */ F(c, {
 		onClick: () => n?.(e),
-		className: l,
-		children: c
+		className: u,
+		children: l
 	});
 }
 //#endregion
-export { J as a, W as c, V as d, Y as i, G as l, Z as n, q as o, X as r, U as s, $ as t, H as u };
+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 };
 
-//# sourceMappingURL=header-2ycNqGOR.js.map
+//# sourceMappingURL=header-CGXuhcRm.js.map