themelia-react-ui 2.0.4 → 2.0.6

package/dist/{header-BA697l4a.js → header-ZIIsRKxP.js}

@@ -1,73 +1,73 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-CF3c95Io.js";
-import { n } from "./buttons-BbfzgczK.js";
-import { c as r, o as i } from "./typography-CSyJrh28.js";
-import { t as a } from "./structure-C0V0_Fyf.js";
+import { t } from "./utils-DhuoqFy4.js";
+import { n } from "./buttons-DeW0bQeK.js";
+import { c as r, o as i } from "./typography-C7-YMW1S.js";
+import { t as a } from "./structure-DZJ2wbAU.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-CjY8Vt7W.js";
-import { n as g } from "./action-menu-CHgs8vmj.js";
+import "./surface-recipes-C8mNycaY.js";
+import { i as s } from "./popover.recipes-DJ0AkUan.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-C08iIugv.js";
+import { n as g } from "./action-menu-C0gjzLyE.js";
 import { t as _ } from "./initials-format-CDoQEOd_.js";
-import { i as v, n as y, s as b } from "./avatar-DWO_HHhB.js";
-import { t as x } from "./badge-DErMA7ul.js";
-import { t as S } from "./separator-GNfPG-90.js";
-import { c as C, o as w, t as T } from "./popover-uwzX2vo7.js";
-import { t as E } from "./breadcrumbs-B-WFKecD.js";
-import { C as D } from "./sidebar-D2iSnGJ7.js";
-import { d as O, t as k } from "./hooks-BQ-L7Uu2.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-B9Jnp-T-.js";
+import { t as x } from "./separator-DM6gs2vu.js";
+import { c as S, o as C, t as w } from "./popover-k8TdUcAt.js";
+import { t as T } from "./breadcrumbs-Bp9Ke7kd.js";
+import { O as E, w as D } from "./sidebar-CmD6a-HK.js";
+import { f as O, t as k } from "./hooks-BitHSh-Y.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 = O({ 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(D, { className: "size-action-xs [&_svg]:size-icon" })
-		}), !!l && /* @__PURE__ */ I(P, { children: [!!r && /* @__PURE__ */ F(S, {
+			children: d
+		}), !!u && /* @__PURE__ */ L(F, { children: [f && /* @__PURE__ */ I(x, {
 			orientation: "vertical",
-			className: "h-icon shrink-0"
-		}), /* @__PURE__ */ F("div", {
+			className: "h-icon shrink-0 data-[orientation=vertical]:self-center"
+		}), /* @__PURE__ */ I("div", {
 			className: "flex min-w-0 flex-1 items-center overflow-hidden",
-			children: /* @__PURE__ */ F(E, {
-				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]]:shrink", "[&_[data-slot=breadcrumb-link]]:truncate [&_[data-slot=breadcrumb-page]]:truncate")
+				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")
 			})
 		})] })]
 	});
 }
 //#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) {
+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__ */ F("header", {
+	return /* @__PURE__ */ I("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__ */ 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 transition-[width,height] ease-linear", 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,35 +91,35 @@ 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",
 	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: i, shortcutModifier: a, enableShortcut: o = !0, strings: s, className: c, iconClassName: l, shortcutSlot: u }) {
+	let d = e(q, s), [f, p] = P(!1);
+	N(() => {
+		a === void 0 && p(Y());
 	}, [a]);
 	let m = (a ?? (f ? "meta" : "control")) === "meta";
 	k({
@@ -127,28 +127,28 @@ function Y({ onOpen: i, shortcutModifier: a, enableShortcut: o = !0, strings: s,
 		enabled: o,
 		onTrigger: i
 	});
-	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"),
+	let h = m ? d.shortcutMac : d.shortcutPc, g = 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 lg:inline-flex"),
 		children: m ? d.shortcutMac : d.shortcutPc
 	});
-	return /* @__PURE__ */ I(n, {
+	return /* @__PURE__ */ L(n, {
 		"data-component": "header-search",
 		"data-slot": "header-search-trigger",
 		type: "button",
 		"aria-label": d.placeholder,
 		tone: "secondary",
 		buttonStyle: "outline",
-		size: "sm",
+		size: "md",
 		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),
+		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, {
+			/* @__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__ */ F(r, {
+			/* @__PURE__ */ I(r, {
 				tag: "span",
 				size: "inherit",
 				type: "secondary",
@@ -162,8 +162,8 @@ function Y({ onOpen: i, shortcutModifier: a, enableShortcut: o = !0, strings: s,
 }
 //#endregion
 //#region src/components/layout/header/partials/header-global-search-trigger.tsx
-function X({ onOpen: e, onOpenChange: t, ...n }) {
-	return /* @__PURE__ */ F(Y, {
+function Z({ onOpen: e, onOpenChange: t, ...n }) {
+	return /* @__PURE__ */ I(X, {
 		...n,
 		onOpen: () => {
 			e?.(), t?.(!0);
@@ -172,37 +172,37 @@ function X({ onOpen: e, onOpenChange: t, ...n }) {
 }
 //#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: i, active: a = !1, disabled: o = !1, badge: s, onClick: c, className: l, iconClassName: u }, d) => /* @__PURE__ */ L(n, {
 	ref: d,
 	"data-component": "header-tool-button",
 	"data-slot": "header-tool-button",
 	type: "button",
 	tone: "secondary",
 	buttonStyle: "ghost",
-	size: "sm",
+	size: "md",
 	iconOnly: !0,
 	"aria-label": e,
 	"aria-pressed": a || void 0,
 	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", a && "bg-accent text-accent-foreground", l),
+	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(i, {
 			"data-slot": "header-tool-icon",
 			className: t("header-tool-button--icon size-icon", u),
 			"aria-hidden": "true"
 		}),
-		!!s && /* @__PURE__ */ F(r, {
+		!!s && /* @__PURE__ */ I(r, {
 			tag: "span",
 			size: "xs",
 			weight: "medium",
 			lineHeight: "none",
 			"data-slot": "header-tool-badge",
-			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",
+			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(r, {
 			tag: "span",
 			size: "inherit",
 			className: "sr-only",
@@ -210,17 +210,17 @@ 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(w, {
+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(C, {
+		children: [/* @__PURE__ */ I(S, {
 			asChild: !0,
-			children: /* @__PURE__ */ F(Z, {
+			children: /* @__PURE__ */ I(Q, {
 				label: e,
 				icon: n,
 				active: o ?? r,
@@ -228,7 +228,7 @@ function Q({ label: e, icon: n, open: r, defaultOpen: i, onOpenChange: a, active
 				badge: l,
 				className: m
 			})
-		}), /* @__PURE__ */ F(T, {
+		}), /* @__PURE__ */ I(w, {
 			"data-component": "header-tool-popover",
 			"data-slot": "header-tool-popover-content",
 			align: u,
@@ -241,58 +241,58 @@ 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 = [
+function ee({ 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(J, m), T = _(i.name, { strategy: "first-words" }), E = a && !!i.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
 		}] : []
-	], D = C?.(i) ?? /* @__PURE__ */ I(n, {
+	], O = C?.(i) ?? /* @__PURE__ */ L(n, {
 		"data-component": "header-user-menu",
 		"data-slot": "header-user-menu-trigger",
 		type: "button",
 		"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),
+		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, {
 				"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, {
+				children: [!!i.avatar && /* @__PURE__ */ I(b, {
 					src: i.avatar,
 					alt: i.name
-				}), /* @__PURE__ */ F(v, {
+				}), /* @__PURE__ */ I(v, {
 					className: "rounded-full bg-muted text-xs font-semibold 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(r, {
 					type: "inherit",
 					weight: "medium",
 					lineHeight: "tight",
 					className: "truncate",
 					children: i.name
-				}), !!a && !!i.email && /* @__PURE__ */ F(r, {
+				}), E && /* @__PURE__ */ I(r, {
 					size: "xs",
 					type: "secondary",
 					lineHeight: "tight",
@@ -300,137 +300,141 @@ function $({ user: i, showEmail: a = !0, customContent: o, onProfile: s, onSetti
 					children: i.email
 				})]
 			}),
-			/* @__PURE__ */ F(R, {
+			/* @__PURE__ */ I(z, {
 				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__ */ I(h, { children: [/* @__PURE__ */ F(u, { render: D }), /* @__PURE__ */ F(p, {
+	}), k = t("header-user-menu--content w-(--anchor-width) min-w-56 rounded-surface", S);
+	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: O,
+		className: k,
 		align: d,
 		side: f,
 		children: o
-	})] }) : /* @__PURE__ */ F(g, {
-		actions: E,
+	})] }) : /* @__PURE__ */ I(g, {
+		actions: D,
 		align: d,
 		side: f,
-		contentClassName: O,
+		contentClassName: k,
 		width: "w-auto",
 		closeOnSelect: !0,
-		renderTrigger: D
+		renderTrigger: O
 	});
 }
 //#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: 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, {
+function ne({ 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: D }) {
+	let k = e(K, w), A = O({ renderLink: x }), j = g > 99 ? "99+" : String(g);
+	return /* @__PURE__ */ L(h, { children: [/* @__PURE__ */ I(u, { render: /* @__PURE__ */ L(n, {
 		"data-component": "header-notifications",
 		"data-slot": "header-notifications-trigger",
 		tone: "secondary",
 		buttonStyle: "ghost",
-		size: "sm",
+		size: "md",
 		iconOnly: !0,
-		"aria-label": A.triggerLabel,
-		className: t("header-notifications--component header-notifications--trigger relative", E),
-		children: [/* @__PURE__ */ F(L, {
+		"aria-label": k.triggerLabel,
+		className: t("header-notifications--component header-notifications--trigger relative", T),
+		children: [/* @__PURE__ */ I(R, {
 			className: "size-icon",
 			"aria-hidden": "true"
-		}), 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: M
+		}), g > 0 && /* @__PURE__ */ I(r, {
+			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
 		})]
-	}) }), /* @__PURE__ */ I(p, {
+	}) }), /* @__PURE__ */ L(p, {
 		"data-component": "header-notifications-content",
 		"data-slot": "header-notifications-content",
-		className: t("header-notifications--content", s.lg, D),
-		align: C,
-		side: w,
-		children: [/* @__PURE__ */ I(d, { children: [
-			/* @__PURE__ */ I(f, {
+		className: t("header-notifications--content", s.lg, E),
+		align: S,
+		side: C,
+		children: [/* @__PURE__ */ L(d, { children: [
+			/* @__PURE__ */ L(f, {
 				"aria-hidden": !1,
 				className: "header-notifications--label flex items-center justify-between gap-space-lg text-inherit",
-				children: [/* @__PURE__ */ F(i, {
+				children: [/* @__PURE__ */ I(i, {
 					className: "text-inherit",
-					children: A.heading
-				}), g > 0 && !!v && /* @__PURE__ */ F(n, {
+					children: k.heading
+				}), g > 0 && !!v && /* @__PURE__ */ I(n, {
 					type: "button",
 					tone: "secondary",
 					buttonStyle: "ghost",
 					size: "sm",
 					onClick: v,
 					className: "shrink-0",
-					children: A.markAllRead
+					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(r, {
 					type: "secondary",
-					children: A.empty
+					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: j,
-					renderNotification: k
+					renderLink: A,
+					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) => j({
+			render: (e) => A({
 				...e,
 				href: b,
 				children: e.children
 			}),
-			children: A.viewAll
-		}) : /* @__PURE__ */ F(c, {
+			children: k.viewAll
+		}) : /* @__PURE__ */ I(c, {
 			onClick: y,
-			children: A.viewAll
+			children: k.viewAll
 		})] })]
 	})] });
 }
-function ne({ notification: e, onClick: n, renderLink: i, renderNotification: s }) {
+function re({ notification: e, onClick: n, 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(r, {
 					type: "inherit",
 					weight: "medium",
 					children: e.title
 				}),
-				!!e.description && /* @__PURE__ */ F(r, {
+				!!e.description && /* @__PURE__ */ I(r, {
 					size: "xs",
 					type: "secondary",
 					children: e.description
 				}),
-				!!e.time && /* @__PURE__ */ F(r, {
+				!!e.time && /* @__PURE__ */ I(r, {
 					size: "xs",
 					type: "secondary",
 					children: e.time
@@ -438,7 +442,7 @@ 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),
@@ -448,13 +452,13 @@ function ne({ notification: e, onClick: n, renderLink: i, renderNotification: s
 			children: t.children
 		}),
 		children: l
-	}) : /* @__PURE__ */ F(c, {
+	}) : /* @__PURE__ */ I(c, {
 		onClick: () => n?.(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-BA697l4a.js.map
+//# sourceMappingURL=header-ZIIsRKxP.js.map