@burdenoff/fe-libs 2026.1018.1 → 2026.1019.2

package/dist/chrome/notificationCenter/NotificationCardItem.js

@@ -1,75 +1,86 @@
-import { PRIORITY_CONFIG as e, TYPE_CONFIG as t, formatRelativeTime as n } from "./constants.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useShellLabel as e } from "../../shared/providers/shell/useShellLabel.js";
+import { PRIORITY_CONFIG as t, TYPE_CONFIG as n, formatRelativeTime as r } from "./constants.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/chrome/notificationCenter/NotificationCardItem.tsx
-var a = ({ notification: a, onMarkAsRead: o, onDelete: s, onRedirect: c }) => {
-	let { id: l, title: u, message: d, type: f, priority: p, appName: m, redirectUrl: h, isRead: g, createdAt: _ } = a, v = e[p] ?? e.MEDIUM, y = t[f] ?? {
+var o = ({ notification: o, onMarkAsRead: s, onDelete: c, onRedirect: l }) => {
+	let u = e(), { id: d, title: f, message: p, type: m, priority: h, appName: g, redirectUrl: _, isRead: v, createdAt: y } = o, b = {
+		URGENT: u("notifications.priority.URGENT", "Urgent"),
+		HIGH: u("notifications.priority.HIGH", "High"),
+		MEDIUM: u("notifications.priority.MEDIUM", "Medium"),
+		LOW: u("notifications.priority.LOW", "Low")
+	}, x = {
+		now: u("notifCommon.inAppJustNow", "Just now"),
+		minutes: u("activityTimeline.minutesAgo", "{{count}}m ago"),
+		hours: u("activityTimeline.hoursAgo", "{{count}}h ago"),
+		days: u("activityTimeline.daysAgo", "{{count}}d ago")
+	}, S = t[h] ?? t.MEDIUM, C = n[m] ?? {
 		icon: "🔔",
-		label: f
+		label: m
 	};
-	return /* @__PURE__ */ i("div", {
-		className: `group relative flex gap-3 p-3 rounded-card border transition-all duration-200 ease-[var(--motion-easing-out)] cursor-pointer hover:border-border-strong ${g ? "bg-bg-surface border-border-subtle hover:bg-bg-sunken" : "bg-[var(--color-accent-soft)] border-border-subtle shadow-elevation-1"}`,
+	return /* @__PURE__ */ a("div", {
+		className: `group relative flex gap-3 p-3 rounded-card border transition-all duration-200 ease-[var(--motion-easing-out)] cursor-pointer hover:border-border-strong ${v ? "bg-bg-surface border-border-subtle hover:bg-bg-sunken" : "bg-[var(--color-accent-soft)] border-border-subtle shadow-elevation-1"}`,
 		onClick: () => {
-			g || o(l), h && c(h);
+			v || s(d), _ && l(_);
 		},
 		role: "button",
 		tabIndex: 0,
 		onKeyDown: (e) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), g || o(l), h && c(h));
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), v || s(d), _ && l(_));
 		},
 		children: [
-			!g && /* @__PURE__ */ r("div", { className: "absolute top-3 left-1.5 size-2 rounded-full bg-action-primary-bg" }),
-			/* @__PURE__ */ r("div", {
+			!v && /* @__PURE__ */ i("div", { className: "absolute top-3 left-1.5 size-2 rounded-full bg-action-primary-bg" }),
+			/* @__PURE__ */ i("div", {
 				className: "flex-shrink-0 mt-0.5 ml-2",
-				children: /* @__PURE__ */ r("span", {
+				children: /* @__PURE__ */ i("span", {
 					className: "text-base",
 					"aria-hidden": "true",
-					children: y.icon
+					children: C.icon
 				})
 			}),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ a("div", {
 				className: "flex-1 min-w-0",
 				children: [
-					/* @__PURE__ */ i("div", {
+					/* @__PURE__ */ a("div", {
 						className: "flex items-start justify-between gap-2",
-						children: [/* @__PURE__ */ r("h4", {
-							className: `text-sm truncate ${g ? "font-normal text-text-secondary" : "font-semibold text-text-primary"}`,
-							children: u
-						}), /* @__PURE__ */ i("div", {
+						children: [/* @__PURE__ */ i("h4", {
+							className: `text-sm truncate ${v ? "font-normal text-text-secondary" : "font-semibold text-text-primary"}`,
+							children: f
+						}), /* @__PURE__ */ a("div", {
 							className: "flex-shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity",
-							children: [!g && /* @__PURE__ */ r("button", {
+							children: [!v && /* @__PURE__ */ i("button", {
 								type: "button",
 								onClick: (e) => {
-									e.stopPropagation(), o(l);
+									e.stopPropagation(), s(d);
 								},
 								className: "p-1 rounded hover:bg-bg-sunken text-text-muted hover:text-text-primary",
-								title: "Mark as read",
-								"aria-label": "Mark as read",
-								children: /* @__PURE__ */ r("svg", {
+								title: u("notifications.markAsRead", "Mark as read"),
+								"aria-label": u("notifications.markAsRead", "Mark as read"),
+								children: /* @__PURE__ */ i("svg", {
 									className: "size-3.5",
 									fill: "none",
 									stroke: "currentColor",
 									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ r("path", {
+									children: /* @__PURE__ */ i("path", {
 										strokeLinecap: "round",
 										strokeLinejoin: "round",
 										strokeWidth: 2,
 										d: "M5 13l4 4L19 7"
 									})
 								})
-							}), /* @__PURE__ */ r("button", {
+							}), /* @__PURE__ */ i("button", {
 								type: "button",
 								onClick: (e) => {
-									e.stopPropagation(), s(l);
+									e.stopPropagation(), c(d);
 								},
 								className: "p-1 rounded hover:bg-bg-sunken text-text-muted hover:text-status-error-text",
-								title: "Dismiss",
-								"aria-label": "Dismiss notification",
-								children: /* @__PURE__ */ r("svg", {
+								title: u("common.dismiss", "Dismiss"),
+								"aria-label": u("notifications.dismissNotification", "Dismiss notification"),
+								children: /* @__PURE__ */ i("svg", {
 									className: "size-3.5",
 									fill: "none",
 									stroke: "currentColor",
 									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ r("path", {
+									children: /* @__PURE__ */ i("path", {
 										strokeLinecap: "round",
 										strokeLinejoin: "round",
 										strokeWidth: 2,
@@ -79,38 +90,38 @@ var a = ({ notification: a, onMarkAsRead: o, onDelete: s, onRedirect: c }) => {
 							})]
 						})]
 					}),
-					/* @__PURE__ */ r("p", {
+					/* @__PURE__ */ i("p", {
 						className: "text-xs text-text-secondary line-clamp-2 mt-0.5",
-						children: d
+						children: p
 					}),
-					/* @__PURE__ */ i("div", {
+					/* @__PURE__ */ a("div", {
 						className: "flex items-center gap-2 mt-1.5 flex-wrap",
 						children: [
-							/* @__PURE__ */ r("span", {
-								className: `inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium rounded ${v.bgColor} ${v.color}`,
-								children: v.label
+							/* @__PURE__ */ i("span", {
+								className: `inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium rounded ${S.bgColor} ${S.color}`,
+								children: b[h] ?? b.MEDIUM
 							}),
-							m && /* @__PURE__ */ r("span", {
+							g && /* @__PURE__ */ i("span", {
 								className: "inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium rounded bg-bg-sunken text-text-muted",
-								children: m
+								children: g
 							}),
-							/* @__PURE__ */ r("span", {
+							/* @__PURE__ */ i("span", {
 								className: "text-[10px] text-text-muted",
-								children: n(_)
+								children: r(y, x)
 							}),
-							h && /* @__PURE__ */ i("button", {
+							_ && /* @__PURE__ */ a("button", {
 								type: "button",
 								onClick: (e) => {
-									e.stopPropagation(), c(h);
+									e.stopPropagation(), l(_);
 								},
 								className: "inline-flex items-center gap-0.5 text-[10px] text-action-primary-bg hover:underline",
-								"aria-label": "Open link",
-								children: ["Open", /* @__PURE__ */ r("svg", {
+								"aria-label": u("notifCommon.openLink", "Open link"),
+								children: [u("devportal.common.open", "Open"), /* @__PURE__ */ i("svg", {
 									className: "size-2.5",
 									fill: "none",
 									stroke: "currentColor",
 									viewBox: "0 0 24 24",
-									children: /* @__PURE__ */ r("path", {
+									children: /* @__PURE__ */ i("path", {
 										strokeLinecap: "round",
 										strokeLinejoin: "round",
 										strokeWidth: 2,
@@ -126,4 +137,4 @@ var a = ({ notification: a, onMarkAsRead: o, onDelete: s, onRedirect: c }) => {
 	});
 };
 //#endregion
-export { a as NotificationCardItem };
+export { o as NotificationCardItem };

package/dist/chrome/notificationCenter/NotificationFilters.js

@@ -1,67 +1,81 @@
-import { FILTER_TABS as e, TYPE_CONFIG as t, TYPE_FILTERS as n } from "./constants.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useShellLabel as e } from "../../shared/providers/shell/useShellLabel.js";
+import { FILTER_TABS as t, TYPE_CONFIG as n, TYPE_FILTERS as r } from "./constants.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/chrome/notificationCenter/NotificationFilters.tsx
-var a = ({ filterTab: a, typeFilter: o, appFilter: s, sortBy: c, appNames: l, onFilterTabChange: u, onTypeFilterChange: d, onAppFilterChange: f, onSortByChange: p }) => /* @__PURE__ */ i("div", {
-	className: "px-4 pt-3 pb-2 space-y-2 border-b border-border-subtle",
-	children: [
-		/* @__PURE__ */ r("div", {
-			className: "flex gap-1",
-			children: e.map((e) => /* @__PURE__ */ r("button", {
-				onClick: () => u(e.value),
-				className: `px-3 py-1 text-xs font-medium rounded-full transition-colors ${a === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:bg-bg-sunken"}`,
-				children: e.label
-			}, e.value))
-		}),
-		/* @__PURE__ */ i("div", {
-			className: "flex flex-wrap items-center gap-1",
-			children: [n.map((e) => /* @__PURE__ */ i("button", {
-				onClick: () => d(e.value),
-				className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${o === e.value ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-muted hover:text-text-secondary hover:bg-bg-sunken"}`,
-				children: [e.value !== "ALL" && t[e.value] && /* @__PURE__ */ r("span", {
-					className: "mr-0.5",
-					children: t[e.value].icon
-				}), e.label]
-			}, e.value)), /* @__PURE__ */ i("select", {
-				value: c,
-				onChange: (e) => p(e.target.value),
-				className: "ml-auto text-[11px] text-text-secondary bg-transparent border-none cursor-pointer scheme-normal dark:scheme-dark focus:outline-none [&_option]:bg-bg-surface [&_option]:text-text-primary",
-				"aria-label": "Sort notifications",
-				children: [
-					/* @__PURE__ */ r("option", {
-						value: "newest",
-						children: "Newest"
-					}),
-					/* @__PURE__ */ r("option", {
-						value: "oldest",
-						children: "Oldest"
-					}),
-					/* @__PURE__ */ r("option", {
-						value: "priority",
-						children: "Priority"
-					})
-				]
-			})]
-		}),
-		l.length > 1 && /* @__PURE__ */ i("div", {
-			className: "flex flex-wrap gap-1",
-			children: [/* @__PURE__ */ r("button", {
-				onClick: () => f("ALL"),
-				className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${s === "ALL" ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-muted hover:text-text-secondary hover:bg-bg-sunken"}`,
-				children: "All Apps"
-			}), l.map(([e, t]) => /* @__PURE__ */ i("button", {
-				onClick: () => f(e),
-				className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${s === e ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-muted hover:text-text-secondary hover:bg-bg-sunken"}`,
-				children: [e, /* @__PURE__ */ i("span", {
-					className: "ml-1 text-text-muted",
+var o = ({ filterTab: o, typeFilter: s, appFilter: c, sortBy: l, appNames: u, onFilterTabChange: d, onTypeFilterChange: f, onAppFilterChange: p, onSortByChange: m }) => {
+	let h = e(), g = {
+		all: h("notifications.filterAll", "All"),
+		unread: h("notifications.filterUnread", "Unread"),
+		read: h("notifications.filterRead", "Read")
+	}, _ = {
+		ALL: h("notifications.filterAll", "All"),
+		SYSTEM: h("notifications.topicType.SYSTEM", "System"),
+		ALERT: h("notifications.topicType.ALERT", "Alert"),
+		TRANSACTIONAL: h("notifications.typeTransactional", "Transactional"),
+		MARKETING: h("notifications.topicType.MARKETING", "Marketing")
+	};
+	return /* @__PURE__ */ a("div", {
+		className: "px-4 pt-3 pb-2 space-y-2 border-b border-border-subtle",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "flex gap-1",
+				children: t.map((e) => /* @__PURE__ */ i("button", {
+					onClick: () => d(e.value),
+					className: `px-3 py-1 text-xs font-medium rounded-full transition-colors ${o === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:bg-bg-sunken"}`,
+					children: g[e.value]
+				}, e.value))
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "flex flex-wrap items-center gap-1",
+				children: [r.map((e) => /* @__PURE__ */ a("button", {
+					onClick: () => f(e.value),
+					className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${s === e.value ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-muted hover:text-text-secondary hover:bg-bg-sunken"}`,
+					children: [e.value !== "ALL" && n[e.value] && /* @__PURE__ */ i("span", {
+						className: "mr-0.5",
+						children: n[e.value].icon
+					}), _[e.value]]
+				}, e.value)), /* @__PURE__ */ a("select", {
+					value: l,
+					onChange: (e) => m(e.target.value),
+					className: "ml-auto text-[11px] text-text-secondary bg-transparent border-none cursor-pointer scheme-normal dark:scheme-dark focus:outline-none [&_option]:bg-bg-surface [&_option]:text-text-primary",
+					"aria-label": h("notifications.sortNotifications", "Sort notifications"),
 					children: [
-						"(",
-						t,
-						")"
+						/* @__PURE__ */ i("option", {
+							value: "newest",
+							children: h("notifications.newest", "Newest")
+						}),
+						/* @__PURE__ */ i("option", {
+							value: "oldest",
+							children: h("notifications.oldest", "Oldest")
+						}),
+						/* @__PURE__ */ i("option", {
+							value: "priority",
+							children: h("notifications.csv.priority", "Priority")
+						})
 					]
 				})]
-			}, e))]
-		})
-	]
-});
+			}),
+			u.length > 1 && /* @__PURE__ */ a("div", {
+				className: "flex flex-wrap gap-1",
+				children: [/* @__PURE__ */ i("button", {
+					onClick: () => p("ALL"),
+					className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${c === "ALL" ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-muted hover:text-text-secondary hover:bg-bg-sunken"}`,
+					children: h("pages.marketplace.allApps", "All Apps")
+				}), u.map(([e, t]) => /* @__PURE__ */ a("button", {
+					onClick: () => p(e),
+					className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${c === e ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-muted hover:text-text-secondary hover:bg-bg-sunken"}`,
+					children: [e, /* @__PURE__ */ a("span", {
+						className: "ml-1 text-text-muted",
+						children: [
+							"(",
+							t,
+							")"
+						]
+					})]
+				}, e))]
+			})
+		]
+	});
+};
 //#endregion
-export { a as NotificationFilters };
+export { o as NotificationFilters };

package/dist/chrome/notificationCenter/NotificationFooter.js

@@ -1,24 +1,24 @@
-import { PushOptInToggle as e } from "./PushOptInToggle.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useShellLabel as e } from "../../shared/providers/shell/useShellLabel.js";
+import { PushOptInToggle as t } from "./PushOptInToggle.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/chrome/notificationCenter/NotificationFooter.tsx
-var r = ({ totalCount: r, onViewAll: i }) => /* @__PURE__ */ n("div", {
-	className: "border-t border-border-subtle",
-	children: [/* @__PURE__ */ t(e, {}), /* @__PURE__ */ n("div", {
-		className: "flex items-center justify-between px-3 pb-3 pt-0",
-		children: [/* @__PURE__ */ n("span", {
-			className: "text-[11px] text-text-muted",
-			children: [
-				r,
-				" notification",
-				r === 1 ? "" : "s"
-			]
-		}), i && /* @__PURE__ */ t("button", {
-			type: "button",
-			onClick: i,
-			className: "text-xs text-action-primary-bg hover:underline font-medium",
-			children: "View All"
+var i = ({ totalCount: i, onViewAll: a }) => {
+	let o = e();
+	return /* @__PURE__ */ r("div", {
+		className: "border-t border-border-subtle",
+		children: [/* @__PURE__ */ n(t, {}), /* @__PURE__ */ r("div", {
+			className: "flex items-center justify-between px-3 pb-3 pt-0",
+			children: [/* @__PURE__ */ n("span", {
+				className: "text-[11px] text-text-muted",
+				children: i === 1 ? o("notifications.countOne", "{{count}} notification", { count: i }) : o("notifications.countMany", "{{count}} notifications", { count: i })
+			}), a && /* @__PURE__ */ n("button", {
+				type: "button",
+				onClick: a,
+				className: "text-xs text-action-primary-bg hover:underline font-medium",
+				children: o("common.viewAll", "View All")
+			})]
 		})]
-	})]
-});
+	});
+};
 //#endregion
-export { r as NotificationFooter };
+export { i as NotificationFooter };

package/dist/chrome/notificationCenter/NotificationHeader.js

@@ -1,75 +1,79 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useShellLabel as e } from "../../shared/providers/shell/useShellLabel.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/chrome/notificationCenter/NotificationHeader.tsx
-var n = ({ isMobile: n, unreadCount: r, onClose: i, onMarkAllAsRead: a }) => /* @__PURE__ */ t("div", {
-	className: "flex items-center justify-between p-4 border-b border-border-subtle",
-	children: [/* @__PURE__ */ t("div", {
-		className: "flex items-center gap-2",
-		children: [
-			n && /* @__PURE__ */ e("button", {
-				type: "button",
-				onClick: i,
-				className: "p-1 rounded-button hover:bg-bg-sunken text-text-primary",
-				"aria-label": "Close",
-				children: /* @__PURE__ */ e("svg", {
-					className: "size-5",
+var r = ({ isMobile: r, unreadCount: i, onClose: a, onMarkAllAsRead: o }) => {
+	let s = e();
+	return /* @__PURE__ */ n("div", {
+		className: "flex items-center justify-between p-4 border-b border-border-subtle",
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex items-center gap-2",
+			children: [
+				r && /* @__PURE__ */ t("button", {
+					type: "button",
+					onClick: a,
+					className: "p-1 rounded-button hover:bg-bg-sunken text-text-primary",
+					"aria-label": s("notifications.close", "Close"),
+					children: /* @__PURE__ */ t("svg", {
+						className: "size-5",
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ t("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M15 19l-7-7 7-7"
+						})
+					})
+				}),
+				/* @__PURE__ */ t("svg", {
+					className: "size-5 text-text-primary",
 					fill: "none",
 					stroke: "currentColor",
 					viewBox: "0 0 24 24",
-					children: /* @__PURE__ */ e("path", {
+					children: /* @__PURE__ */ t("path", {
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
 						strokeWidth: 2,
-						d: "M15 19l-7-7 7-7"
+						d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
 					})
+				}),
+				/* @__PURE__ */ t("h2", {
+					className: "text-sm font-semibold text-text-primary",
+					children: s("notifications.bellLabel", "Notifications")
+				}),
+				i > 0 && /* @__PURE__ */ t("span", {
+					className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold text-action-primary-text bg-action-primary-bg rounded-full",
+					children: i > 9 ? "9+" : i
 				})
-			}),
-			/* @__PURE__ */ e("svg", {
-				className: "size-5 text-text-primary",
-				fill: "none",
-				stroke: "currentColor",
-				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ e("path", {
-					strokeLinecap: "round",
-					strokeLinejoin: "round",
-					strokeWidth: 2,
-					d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-				})
-			}),
-			/* @__PURE__ */ e("h2", {
-				className: "text-sm font-semibold text-text-primary",
-				children: "Notifications"
-			}),
-			r > 0 && /* @__PURE__ */ e("span", {
-				className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold text-action-primary-text bg-action-primary-bg rounded-full",
-				children: r > 9 ? "9+" : r
-			})
-		]
-	}), /* @__PURE__ */ t("div", {
-		className: "flex items-center gap-2",
-		children: [r > 0 && /* @__PURE__ */ e("button", {
-			type: "button",
-			onClick: a,
-			className: "text-xs text-action-primary-bg hover:underline font-medium",
-			children: "Mark all read"
-		}), !n && /* @__PURE__ */ e("button", {
-			type: "button",
-			onClick: i,
-			className: "p-1 rounded-button hover:bg-bg-sunken text-text-muted",
-			"aria-label": "Close panel",
-			children: /* @__PURE__ */ e("svg", {
-				className: "size-4",
-				fill: "none",
-				stroke: "currentColor",
-				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ e("path", {
-					strokeLinecap: "round",
-					strokeLinejoin: "round",
-					strokeWidth: 2,
-					d: "M6 18L18 6M6 6l12 12"
+			]
+		}), /* @__PURE__ */ n("div", {
+			className: "flex items-center gap-2",
+			children: [i > 0 && /* @__PURE__ */ t("button", {
+				type: "button",
+				onClick: o,
+				className: "text-xs text-action-primary-bg hover:underline font-medium",
+				children: s("notifCommon.markAllRead", "Mark all read")
+			}), !r && /* @__PURE__ */ t("button", {
+				type: "button",
+				onClick: a,
+				className: "p-1 rounded-button hover:bg-bg-sunken text-text-muted",
+				"aria-label": s("notifCommon.closePanel", "Close panel"),
+				children: /* @__PURE__ */ t("svg", {
+					className: "size-4",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ t("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M6 18L18 6M6 6l12 12"
+					})
 				})
-			})
+			})]
 		})]
-	})]
-});
+	});
+};
 //#endregion
-export { n as NotificationHeader };
+export { r as NotificationHeader };