@sakaniui/react 0.3.24 → 0.3.26

package/README.md

@@ -2,7 +2,7 @@
 
 An open-source, token-driven React component library for SaaS products — **1,500+ accessible components and variants**, built 1:1 from a Figma design system and now spanning **1,500+ components and variants** across light and dark modes.
 
-**[Live Storybook →](https://main--6a5a658b3681fcc010430db5.chromatic.com)** · **[Figma file →](https://www.figma.com/design/Fd3uY263mEQKnaTEfrzQxh/)**
+**[Live Storybook →](https://main--6a5a658b3681fcc010430db5.chromatic.com)** · **[Figma file →](https://www.figma.com/community/file/1661001585975776295/sakani-design-system-v1-8)**
 
 ![npm](https://img.shields.io/npm/v/@sakaniui/react) ![License](https://img.shields.io/badge/license-MIT-blue) ![React](https://img.shields.io/badge/React-19-61dafb) ![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6) ![Storybook](https://img.shields.io/badge/Storybook-10-ff4785)
 

package/dist/{TopBar-BumNewSt.js → TopBar-CwxSs2uQ.js}

@@ -3001,50 +3001,73 @@ var J = {
 	arrow: "_arrow_on2nb_9",
 	"page--active": "_page--active_on2nb_26",
 	ellipsis: "_ellipsis_on2nb_40"
-};
-//#endregion
-//#region src/components/Pagination/Pagination.tsx
-function yn(e, t, n) {
-	let r = t, i = Math.min(t + n, e), a = /* @__PURE__ */ new Set([1, e]);
-	for (let e = r; e <= i; e++) a.add(e);
-	let o = Array.from(a).sort((e, t) => e - t), s = [];
-	return o.forEach((e, t) => {
-		t > 0 && e - o[t - 1] > 1 && s.push("ellipsis"), s.push(e);
-	}), s;
+}, yn = (e, t) => Array.from({ length: t - e + 1 }, (t, n) => e + n);
+function bn(e, t, n) {
+	let r = n * 2 + 5;
+	if (e <= r) return yn(1, e);
+	let i = r - 2, a = n * 2 + 1;
+	if (t <= i) return [
+		...yn(1, i),
+		"end-ellipsis",
+		e
+	];
+	let o = i + 1 + Math.floor((t - i - 1) / a) * a, s = o + a - 1;
+	return s <= e - 3 ? [
+		1,
+		"start-ellipsis",
+		...yn(o, s),
+		"end-ellipsis",
+		e
+	] : [
+		1,
+		"start-ellipsis",
+		...yn(e - i + 1, e)
+	];
 }
-var bn = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: o }) => {
-	let s = yn(e, t, r);
-	return /* @__PURE__ */ a("nav", {
-		className: [vn.pagination, o ?? ""].filter(Boolean).join(" "),
+var xn = ({ total: t, page: n, onPageChange: r, siblings: o = 1, className: s }) => {
+	let c = e.useRef(null);
+	if (t < 1) return null;
+	let l = Math.min(Math.max(n, 1), t), u = Math.max(0, o), d = bn(t, l, u), m = c.current;
+	if (m && m.total === t && m.siblings === u) {
+		let e = m.tokens, n = e.includes(l), r = l === 1 && e[1] === "start-ellipsis" || l === t && e[e.length - 2] === "end-ellipsis";
+		n && !r && (d = e);
+	}
+	return c.current = {
+		total: t,
+		siblings: u,
+		tokens: d
+	}, /* @__PURE__ */ a("nav", {
+		className: [vn.pagination, s ?? ""].filter(Boolean).join(" "),
 		"aria-label": "Pagination",
 		children: [
 			/* @__PURE__ */ i("button", {
 				type: "button",
 				className: vn.arrow,
-				disabled: t <= 1,
-				onClick: () => n(t - 1),
+				disabled: l <= 1,
+				onClick: () => r(l - 1),
 				"aria-label": "Previous page",
 				children: /* @__PURE__ */ i(f, {
 					size: 16,
 					strokeWidth: A(16)
 				})
 			}),
-			s.map((e, r) => e === "ellipsis" ? /* @__PURE__ */ i("span", {
+			d.map((e) => typeof e == "number" ? /* @__PURE__ */ i("button", {
+				type: "button",
+				className: [vn.page, e === l ? vn["page--active"] : ""].filter(Boolean).join(" "),
+				"aria-current": e === l ? "page" : void 0,
+				"aria-label": `Page ${e}`,
+				onClick: () => e !== l && r(e),
+				children: e
+			}, e) : /* @__PURE__ */ i("span", {
 				className: vn.ellipsis,
 				"aria-hidden": "true",
 				children: "…"
-			}, `e${r}`) : /* @__PURE__ */ i("button", {
-				type: "button",
-				className: [vn.page, e === t ? vn["page--active"] : ""].filter(Boolean).join(" "),
-				"aria-current": e === t ? "page" : void 0,
-				onClick: () => n(e),
-				children: e
 			}, e)),
 			/* @__PURE__ */ i("button", {
 				type: "button",
 				className: vn.arrow,
-				disabled: t >= e,
-				onClick: () => n(t + 1),
+				disabled: l >= t,
+				onClick: () => r(l + 1),
 				"aria-label": "Next page",
 				children: /* @__PURE__ */ i(p, {
 					size: 16,
@@ -3053,14 +3076,14 @@ var bn = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: o })
 			})
 		]
 	});
-}, xn = {
+}, Sn = {
 	track: "_track_1br5v_2",
 	segment: "_segment_1br5v_12",
 	"segment--active": "_segment--active_1br5v_38",
 	thumb: "_thumb_1br5v_44",
 	"thumb--animated": "_thumb--animated_1br5v_62",
 	"track--fullWidth": "_track--fullWidth_1br5v_68"
-}, Sn = ({ options: t, value: n, defaultValue: r, onChange: o, fullWidth: s, className: c }) => {
+}, Cn = ({ options: t, value: n, defaultValue: r, onChange: o, fullWidth: s, className: c }) => {
 	let l = n !== void 0, [u, d] = e.useState(r ?? t[0]?.value), f = l ? n : u, p = (e) => {
 		l || d(e), o?.(e);
 	}, m = e.useRef(null), h = e.useRef({}), [g, _] = e.useState(null), [v, y] = e.useState(!1);
@@ -3081,13 +3104,13 @@ var bn = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: o })
 		ref: m,
 		role: "tablist",
 		className: [
-			xn.track,
-			s ? xn["track--fullWidth"] : "",
+			Sn.track,
+			s ? Sn["track--fullWidth"] : "",
 			c ?? ""
 		].filter(Boolean).join(" "),
 		children: [g && /* @__PURE__ */ i("span", {
 			"aria-hidden": "true",
-			className: [xn.thumb, v ? xn["thumb--animated"] : ""].filter(Boolean).join(" "),
+			className: [Sn.thumb, v ? Sn["thumb--animated"] : ""].filter(Boolean).join(" "),
 			style: {
 				transform: `translateX(${g.left}px)`,
 				width: g.width
@@ -3101,7 +3124,7 @@ var bn = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: o })
 				role: "tab",
 				type: "button",
 				"aria-selected": t,
-				className: [xn.segment, t ? xn["segment--active"] : ""].filter(Boolean).join(" "),
+				className: [Sn.segment, t ? Sn["segment--active"] : ""].filter(Boolean).join(" "),
 				onClick: () => p(e.value),
 				children: e.label
 			}, e.value);
@@ -3137,7 +3160,7 @@ var bn = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: o })
 	option__check: "_option__check_1b512_179",
 	optionHighlight: "_optionHighlight_1b512_151",
 	"optionHighlight--animated": "_optionHighlight--animated_1b512_201"
-}, Cn = ({ label: t, description: n, error: r, size: o = "md", placeholder: s = "Select an option", options: c, value: l, defaultValue: u, onChange: d, disabled: f, id: p, className: m }) => {
+}, wn = ({ label: t, description: n, error: r, size: o = "md", placeholder: s = "Select an option", options: c, value: l, defaultValue: u, onChange: d, disabled: f, id: p, className: m }) => {
 	let h = e.useId(), g = `${p ?? h}-trigger`, _ = `${p ?? h}-panel`, v = !!r, [y, b] = e.useState(u), x = l === void 0 ? y : l, S = c.find((e) => e.value === x), [C, w] = e.useState(!1), [T, E] = e.useState(!1), [D, O] = e.useState(0), ee = e.useRef(null), te = e.useRef(null), k = e.useRef(null), ne = e.useRef({}), [re, ie] = e.useState(null), [ae, oe] = e.useState(!1);
 	e.useLayoutEffect(() => {
 		let e = ne.current[D];
@@ -3343,27 +3366,27 @@ var bn = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: o })
 			})
 		]
 	});
-}, wn = {
+}, Tn = {
 	sidebar: "_sidebar_m27tb_4",
 	"sidebar--collapsed": "_sidebar--collapsed_m27tb_21"
-}, Tn = ({ collapsed: e = !1, children: t, className: n }) => {
+}, En = ({ collapsed: e = !1, children: t, className: n }) => {
 	let r = Zt();
 	return /* @__PURE__ */ a("nav", {
 		ref: r.ref,
 		...r.groupProps,
 		className: [
-			wn.sidebar,
-			e ? wn["sidebar--collapsed"] : "",
+			Tn.sidebar,
+			e ? Tn["sidebar--collapsed"] : "",
 			n ?? ""
 		].filter(Boolean).join(" "),
 		"data-collapsed": e,
 		children: [r.highlight, t]
 	});
-}, En = { divider: "_divider_18c5j_1" }, Dn = () => /* @__PURE__ */ i("div", {
-	className: En.divider,
+}, Dn = { divider: "_divider_18c5j_1" }, On = () => /* @__PURE__ */ i("div", {
+	className: Dn.divider,
 	role: "separator"
-}), On = { groupLabel: "_groupLabel_62q1j_2" }, kn = ({ children: e }) => /* @__PURE__ */ i("div", {
-	className: On.groupLabel,
+}), kn = { groupLabel: "_groupLabel_62q1j_2" }, An = ({ children: e }) => /* @__PURE__ */ i("div", {
+	className: kn.groupLabel,
 	children: e
 }), X = {
 	header: "_header_1wyz2_2",
@@ -3377,7 +3400,7 @@ var bn = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: o })
 	header__title: "_header__title_1wyz2_65",
 	header__subtitle: "_header__subtitle_1wyz2_66",
 	header__toggle: "_header__toggle_1wyz2_67"
-}, An = ({ type: e = "brand", title: t, subtitle: n, logo: r, collapsed: o, onToggle: s, toggleIcon: c = T }) => /* @__PURE__ */ a("div", {
+}, jn = ({ type: e = "brand", title: t, subtitle: n, logo: r, collapsed: o, onToggle: s, toggleIcon: c = T }) => /* @__PURE__ */ a("div", {
 	className: [X.header, o ? X["header--collapsed"] : ""].filter(Boolean).join(" "),
 	children: [
 		r && (o && e === "brand-toggle" && s ? /* @__PURE__ */ i("button", {
@@ -3440,7 +3463,7 @@ var bn = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: o })
 	"item--collapsed": "_item--collapsed_1ukig_98",
 	item__label: "_item__label_1ukig_137",
 	"item__label--collapsed": "_item__label--collapsed_1ukig_146"
-}, jn = ({ icon: e, label: t, active: n, activeIndicator: o = !0, disabled: s, badge: c, hasSubmenu: l, collapsed: u, onClick: d, href: f, nativeTooltip: m = !0 }) => {
+}, Mn = ({ icon: e, label: t, active: n, activeIndicator: o = !0, disabled: s, badge: c, hasSubmenu: l, collapsed: u, onClick: d, href: f, nativeTooltip: m = !0 }) => {
 	let h = n && o, g = n && !o, _ = [
 		Z.item,
 		h ? Z["item--active"] : "",
@@ -3494,26 +3517,26 @@ var bn = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: o })
 		...y,
 		children: v
 	});
-}, Mn = {
+}, Nn = {
 	subItem: "_subItem_1sz05_2",
 	"subItem--disabled": "_subItem--disabled_1sz05_26",
 	"subItem--active": "_subItem--active_1sz05_27",
 	subItem__dot: "_subItem__dot_1sz05_31",
 	subItem__label: "_subItem__label_1sz05_41"
-}, Nn = ({ label: e, active: t, disabled: n, onClick: o, href: s }) => {
+}, Pn = ({ label: e, active: t, disabled: n, onClick: o, href: s }) => {
 	let c = {
 		className: [
-			Mn.subItem,
-			t ? Mn["subItem--active"] : "",
-			n ? Mn["subItem--disabled"] : ""
+			Nn.subItem,
+			t ? Nn["subItem--active"] : "",
+			n ? Nn["subItem--disabled"] : ""
 		].filter(Boolean).join(" "),
 		"data-hover-item": "",
 		"aria-current": t ? "page" : void 0
 	}, l = /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("span", {
-		className: Mn.subItem__dot,
+		className: Nn.subItem__dot,
 		"aria-hidden": "true"
 	}), /* @__PURE__ */ i("span", {
-		className: Mn.subItem__label,
+		className: Nn.subItem__label,
 		children: e
 	})] });
 	return s && !n ? /* @__PURE__ */ i("a", {
@@ -3527,41 +3550,41 @@ var bn = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: o })
 		...c,
 		children: l
 	});
-}, Pn = {
+}, Fn = {
 	skeleton: "_skeleton_94hr3_9",
 	"skeleton-shimmer": "_skeleton-shimmer_94hr3_1",
 	"skeleton--text": "_skeleton--text_94hr3_22",
 	"skeleton--rect": "_skeleton--rect_94hr3_29",
 	"skeleton--circle": "_skeleton--circle_94hr3_35"
-}, Fn = ({ variant: e = "text", width: t, height: n, className: r }) => {
+}, In = ({ variant: e = "text", width: t, height: n, className: r }) => {
 	let a = {};
 	return t !== void 0 && (a.width = typeof t == "number" ? `${t}px` : t), n !== void 0 && (a.height = typeof n == "number" ? `${n}px` : n), /* @__PURE__ */ i("span", {
 		"aria-hidden": "true",
 		className: [
-			Pn.skeleton,
-			Pn[`skeleton--${e}`],
+			Fn.skeleton,
+			Fn[`skeleton--${e}`],
 			r ?? ""
 		].filter(Boolean).join(" "),
 		style: a
 	});
-}, In = {
+}, Ln = {
 	field: "_field_drnb1_3",
 	header: "_header_drnb1_4",
 	label: "_label_drnb1_5",
 	value: "_value_drnb1_6",
 	slider: "_slider_drnb1_8"
-}, Ln = e.forwardRef(({ label: t, showValue: n, min: r = 0, max: o = 100, value: s, defaultValue: c, disabled: l, id: u, className: d, onChange: f, ...p }, m) => {
+}, Rn = e.forwardRef(({ label: t, showValue: n, min: r = 0, max: o = 100, value: s, defaultValue: c, disabled: l, id: u, className: d, onChange: f, ...p }, m) => {
 	let h = e.useId(), g = u ?? h, _ = Number(s ?? c ?? r), [v, y] = e.useState(_), b = s === void 0 ? v : Number(s), x = (b - r) / (o - r) * 100;
 	return /* @__PURE__ */ a("div", {
-		className: [In.field, d ?? ""].filter(Boolean).join(" "),
+		className: [Ln.field, d ?? ""].filter(Boolean).join(" "),
 		children: [(t || n) && /* @__PURE__ */ a("div", {
-			className: In.header,
+			className: Ln.header,
 			children: [t && /* @__PURE__ */ i("label", {
 				htmlFor: g,
-				className: In.label,
+				className: Ln.label,
 				children: t
 			}), n && /* @__PURE__ */ i("span", {
-				className: In.value,
+				className: Ln.value,
 				children: b
 			})]
 		}), /* @__PURE__ */ i("input", {
@@ -3576,13 +3599,13 @@ var bn = ({ total: e, page: t, onPageChange: n, siblings: r = 1, className: o })
 			onChange: (e) => {
 				s === void 0 && y(Number(e.target.value)), f?.(e);
 			},
-			className: In.slider,
+			className: Ln.slider,
 			style: { "--pct": `${x}%` },
 			...p
 		})]
 	});
 });
-Ln.displayName = "Slider";
+Rn.displayName = "Slider";
 var Q = {
 	wrap: "_wrap_1hulo_6",
 	"wrap--bordered": "_wrap--bordered_1hulo_20",
@@ -3611,18 +3634,18 @@ var Q = {
 	"bodyRow--dropTarget": "_bodyRow--dropTarget_1hulo_224",
 	dragCell: "_dragCell_1hulo_231",
 	dragHandle: "_dragHandle_1hulo_247"
-}, Rn = 640;
-function zn(t) {
+}, zn = 640;
+function Bn(t) {
 	let [n, r] = e.useState(!1);
 	return e.useEffect(() => {
 		if (t !== "auto") return;
-		let e = window.matchMedia(`(max-width: ${Rn}px)`);
+		let e = window.matchMedia(`(max-width: ${zn}px)`);
 		r(e.matches);
 		let n = (e) => r(e.matches);
 		return e.addEventListener("change", n), () => e.removeEventListener("change", n);
 	}, [t]), t === "default" ? "default" : t === "stacked" || n ? "stacked" : "default";
 }
-var Bn = ({ checked: t, indeterminate: n, onChange: r, label: o }) => {
+var Vn = ({ checked: t, indeterminate: n, onChange: r, label: o }) => {
 	let s = e.useRef(null);
 	return e.useEffect(() => {
 		s.current && (s.current.indeterminate = !!n);
@@ -3653,8 +3676,8 @@ var Bn = ({ checked: t, indeterminate: n, onChange: r, label: o }) => {
 		})]
 	});
 };
-function Vn({ columns: t, rows: n, selectable: r, selectedRows: o, onSelectionChange: s, rowKey: c, reorderable: l, onReorder: u, bordered: d = !0, responsive: f = "auto", className: p }) {
-	let m = zn(f), h = o !== void 0, [g, _] = e.useState([]), v = h ? o : g, y = (e) => {
+function Hn({ columns: t, rows: n, selectable: r, selectedRows: o, onSelectionChange: s, rowKey: c, reorderable: l, onReorder: u, bordered: d = !0, responsive: f = "auto", className: p }) {
+	let m = Bn(f), h = o !== void 0, [g, _] = e.useState([]), v = h ? o : g, y = (e) => {
 		h || _(e), s?.(e);
 	}, x = n.length > 0 && v.length === n.length, S = v.length > 0 && !x, [C, w] = e.useState(null), [T, E] = e.useState(null), D = Zt(), O = () => {
 		if (C === null || T === null || C === T) {
@@ -3681,7 +3704,7 @@ function Vn({ columns: t, rows: n, selectable: r, selectedRows: o, onSelectionCh
 				].filter(Boolean).join(" "),
 				children: [r && /* @__PURE__ */ i("div", {
 					className: Q.card__selectRow,
-					children: /* @__PURE__ */ i(Bn, {
+					children: /* @__PURE__ */ i(Vn, {
 						checked: o,
 						onChange: () => te(n),
 						label: `Select row ${n + 1}`
@@ -3717,7 +3740,7 @@ function Vn({ columns: t, rows: n, selectable: r, selectedRows: o, onSelectionCh
 					}),
 					r && /* @__PURE__ */ i("th", {
 						className: Q.checkCell,
-						children: /* @__PURE__ */ i(Bn, {
+						children: /* @__PURE__ */ i(Vn, {
 							checked: x,
 							indeterminate: S,
 							onChange: ee,
@@ -3770,7 +3793,7 @@ function Vn({ columns: t, rows: n, selectable: r, selectedRows: o, onSelectionCh
 						}),
 						r && /* @__PURE__ */ i("td", {
 							className: Q.checkCell,
-							children: /* @__PURE__ */ i(Bn, {
+							children: /* @__PURE__ */ i(Vn, {
 								checked: o,
 								onChange: () => te(n),
 								label: `Select row ${n + 1}`
@@ -3787,7 +3810,7 @@ function Vn({ columns: t, rows: n, selectable: r, selectedRows: o, onSelectionCh
 		})]
 	});
 }
-var Hn = {
+var Un = {
 	tabs: "_tabs_1122j_3",
 	"tabs--borderless": "_tabs--borderless_1122j_16",
 	"tabs--fill": "_tabs--fill_1122j_21",
@@ -3796,7 +3819,7 @@ var Hn = {
 	"tab--active": "_tab--active_1122j_63",
 	indicator: "_indicator_1122j_74",
 	"indicator--animated": "_indicator--animated_1122j_88"
-}, Un = ({ items: t, value: n, defaultValue: r, onChange: o, bordered: s = !0, fill: c = !1, className: l }) => {
+}, Wn = ({ items: t, value: n, defaultValue: r, onChange: o, bordered: s = !0, fill: c = !1, className: l }) => {
 	let u = n !== void 0, [d, f] = e.useState(r ?? t[0]?.value), p = u ? n : d, m = (e) => {
 		u || f(e), o?.(e);
 	}, h = e.useRef(null), g = e.useRef({}), [_, v] = e.useState(null), [y, b] = e.useState(!1);
@@ -3817,9 +3840,9 @@ var Hn = {
 		ref: h,
 		role: "tablist",
 		className: [
-			Hn.tabs,
-			s ? "" : Hn["tabs--borderless"],
-			c ? Hn["tabs--fill"] : "",
+			Un.tabs,
+			s ? "" : Un["tabs--borderless"],
+			c ? Un["tabs--fill"] : "",
 			l ?? ""
 		].filter(Boolean).join(" "),
 		children: [t.map((e) => {
@@ -3833,9 +3856,9 @@ var Hn = {
 				"aria-selected": t,
 				disabled: e.disabled,
 				className: [
-					Hn.tab,
-					t ? Hn["tab--active"] : "",
-					e.disabled ? Hn["tab--disabled"] : ""
+					Un.tab,
+					t ? Un["tab--active"] : "",
+					e.disabled ? Un["tab--disabled"] : ""
 				].filter(Boolean).join(" "),
 				onClick: () => m(e.value),
 				children: [n && /* @__PURE__ */ i(n, {
@@ -3846,14 +3869,14 @@ var Hn = {
 			}, e.value);
 		}), _ && /* @__PURE__ */ i("span", {
 			"aria-hidden": "true",
-			className: [Hn.indicator, y ? Hn["indicator--animated"] : ""].filter(Boolean).join(" "),
+			className: [Un.indicator, y ? Un["indicator--animated"] : ""].filter(Boolean).join(" "),
 			style: {
 				transform: `translateX(${_.left}px)`,
 				width: _.width
 			}
 		})]
 	});
-}, Wn = {
+}, Gn = {
 	wrapper: "_wrapper_w6wtp_8",
 	bubble: "_bubble_w6wtp_8",
 	bubble__title: "_bubble__title_w6wtp_46",
@@ -3875,7 +3898,7 @@ var Hn = {
 	"caret--center-left": "_caret--center-left_w6wtp_121",
 	"bubble--center-right": "_bubble--center-right_w6wtp_131",
 	"caret--center-right": "_caret--center-right_w6wtp_139"
-}, Gn = ({ title: t, subtitle: n, pointer: r = "top-center", children: o, className: s }) => {
+}, Kn = ({ title: t, subtitle: n, pointer: r = "top-center", children: o, className: s }) => {
 	let [c, l] = e.useState(!1);
 	return e.useEffect(() => {
 		let e = (e) => {
@@ -3883,24 +3906,24 @@ var Hn = {
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}, []), /* @__PURE__ */ a("span", {
-		className: [Wn.wrapper, s ?? ""].filter(Boolean).join(" "),
+		className: [Gn.wrapper, s ?? ""].filter(Boolean).join(" "),
 		"data-dismissed": c || void 0,
 		onMouseLeave: () => l(!1),
 		onBlur: () => l(!1),
 		children: [o, /* @__PURE__ */ a("span", {
 			role: "tooltip",
-			className: [Wn.bubble, Wn[`bubble--${r}`]].join(" "),
+			className: [Gn.bubble, Gn[`bubble--${r}`]].join(" "),
 			children: [
 				/* @__PURE__ */ i("span", {
-					className: Wn.bubble__title,
+					className: Gn.bubble__title,
 					children: t
 				}),
 				n && /* @__PURE__ */ i("span", {
-					className: Wn.bubble__subtitle,
+					className: Gn.bubble__subtitle,
 					children: n
 				}),
 				/* @__PURE__ */ i("span", {
-					className: [Wn.caret, Wn[`caret--${r}`]].join(" "),
+					className: [Gn.caret, Gn[`caret--${r}`]].join(" "),
 					"aria-hidden": "true"
 				})
 			]
@@ -3929,7 +3952,7 @@ var Hn = {
 	"bar__left--search": "_bar__left--search_yqi1k_84",
 	bar__accountChevron: "_bar__accountChevron_yqi1k_98",
 	"bar__accountChevron--open": "_bar__accountChevron--open_yqi1k_104"
-}, Kn = ({ type: e = "search", density: t = "md", left: n, showToggle: s = !0, onToggle: c, toggleIcon: l = w, showActions: u = !0, showHelp: f = !0, hasUnread: p = !1, rightSlot: m, account: g, accountOpen: _ = !1, avatar: v, title: y, subtitle: b, actions: x, className: S }) => {
+}, qn = ({ type: e = "search", density: t = "md", left: n, showToggle: s = !0, onToggle: c, toggleIcon: l = w, showActions: u = !0, showHelp: f = !0, hasUnread: p = !1, rightSlot: m, account: g, accountOpen: _ = !1, avatar: v, title: y, subtitle: b, actions: x, className: S }) => {
 	let C = Zt(), T = Zt(), E = t === "md" ? 20 : 18, D = A(E);
 	return /* @__PURE__ */ i("header", {
 		className: [
@@ -4031,4 +4054,4 @@ var Hn = {
 	});
 };
 //#endregion
-export { Ke as $, Vt as A, St as B, nn as C, Kt as D, Zt as E, At as F, ft as G, yt as H, kt as I, rt as J, ot as K, Ot as L, Lt as M, Ft as N, Gt as O, Nt as P, Je as Q, Dt as R, an as S, Qt as T, _t as U, xt as V, mt as W, $e as X, tt as Y, Ze as Z, gn as _, Ln as a, N as at, cn as b, jn as c, Ce as ct, Dn as d, he as dt, Ge as et, Tn as f, me as ft, _n as g, bn as h, Vn as i, ke as it, zt as j, Ht as k, An as l, be as lt, Sn as m, Gn as n, Be as nt, Fn as o, Oe as ot, Cn as p, A as pt, at as q, Un as r, Re as rt, Nn as s, Te as st, Kn as t, We as tt, kn as u, ye as ut, pn as v, en as w, sn as x, dn as y, wt as z };
+export { Ke as $, Vt as A, St as B, nn as C, Kt as D, Zt as E, At as F, ft as G, yt as H, kt as I, rt as J, ot as K, Ot as L, Lt as M, Ft as N, Gt as O, Nt as P, Je as Q, Dt as R, an as S, Qt as T, _t as U, xt as V, mt as W, $e as X, tt as Y, Ze as Z, gn as _, Rn as a, N as at, cn as b, Mn as c, Ce as ct, On as d, he as dt, Ge as et, En as f, me as ft, _n as g, xn as h, Hn as i, ke as it, zt as j, Ht as k, jn as l, be as lt, Cn as m, Kn as n, Be as nt, In as o, Oe as ot, wn as p, A as pt, at as q, Wn as r, Re as rt, Pn as s, Te as st, qn as t, We as tt, An as u, ye as ut, pn as v, en as w, sn as x, dn as y, wt as z };