themelia-ui 3.0.0 → 3.2.0

package/dist/navigation-Bgu7Vc0M.js

@@ -0,0 +1,622 @@
+import "#core.css";
+import { t as e } from "./cvm-DtsCA8iZ.js";
+import { a as t, c as n, o as r, s as i } from "./typography-DmeR05Er.js";
+import { t as a } from "./cx--CBrhWH0.js";
+import { c as o } from "./buttons-BX2JfL5X.js";
+import { a as s, g as c, r as l, t as u } from "./dropdown-menu-Br8kvjrF.js";
+import { t as d } from "./strings-Co9_qArR.js";
+import { t as f } from "./badge-VlJVZjdm.js";
+import { d as p, m, v as h } from "./display-a7AoX_u7.js";
+import { i as g, t as _ } from "./observers-CKohiJqU.js";
+import { n as v, t as y } from "./scroll-edges-CWjEJktN.js";
+import { r as b } from "./choice-inputs-NwRxvmZN.js";
+import { n as x, r as S } from "./navigation-B4eUU9E8.js";
+import { CheckIcon as C, ChevronLeftIcon as w, ChevronRightIcon as T, GlobeIcon as E } from "lucide-react";
+import * as D from "react";
+import { useId as O, useRef as k } from "react";
+import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
+import "#css/navigation.css";
+//#region src/components/base/navigation/navigation.strings.ts
+var N = {
+	label: "Pagination",
+	previous: "Previous",
+	next: "Next",
+	morePages: "More pages",
+	page: (e) => `Page ${e}`
+}, P = { label: "Breadcrumb" }, F = { label: "Language" }, I = {
+	previous: "Scroll tabs backward",
+	next: "Scroll tabs forward"
+}, L = {
+	tabs: "navigation__tabs___MoJyv",
+	tabRail: "navigation__tabRail___fkXu3",
+	tabScroll: "navigation__tabScroll___6MKV9",
+	tabList: "navigation__tabList___6fCJE",
+	tabListEnclosed: "navigation__tabListEnclosed___RpZu7",
+	tabsPill: "navigation__tabsPill___Ug0fU",
+	tab: "navigation__tab___o1EUP",
+	tabPanel: "navigation__tabPanel___aUaAn",
+	breadcrumb: "navigation__breadcrumb___eRfAg",
+	breadcrumbItem: "navigation__breadcrumbItem___shfye",
+	breadcrumbLink: "navigation__breadcrumbLink___zHDIh",
+	breadcrumbCurrent: "navigation__breadcrumbCurrent___9BQhW",
+	breadcrumbSeparator: "navigation__breadcrumbSeparator___2Okqy",
+	pagination: "navigation__pagination___QauKM",
+	paginationArrowWord: "navigation__paginationArrowWord___rmxzx",
+	paginationEllipsis: "navigation__paginationEllipsis___MEC8A",
+	pageHeading: "navigation__pageHeading___R7jSV",
+	pageHeadingCrumbs: "navigation__pageHeadingCrumbs___0JeR1",
+	pageHeadingRow: "navigation__pageHeadingRow___1SVff",
+	pageHeadingLeading: "navigation__pageHeadingLeading___Ydk6o",
+	pageHeadingMain: "navigation__pageHeadingMain___c9iIe",
+	pageHeadingGrid: "navigation__pageHeadingGrid___D0Ddi",
+	pageHeadingPrefix: "navigation__pageHeadingPrefix___Ef0P3",
+	pageHeadingBlock: "navigation__pageHeadingBlock___Wpd1x",
+	pageHeadingHeadline: "navigation__pageHeadingHeadline___8cftu",
+	pageHeadingActions: "navigation__pageHeadingActions___xyJOE",
+	pageHeadingTitleRow: "navigation__pageHeadingTitleRow___77qXV",
+	pageHeadingTitle: "navigation__pageHeadingTitle___wqE4c",
+	pageHeadingBadges: "navigation__pageHeadingBadges___ByzY3",
+	pageHeadingDescription: "navigation__pageHeadingDescription___cCQrC",
+	pageHeadingChildren: "navigation__pageHeadingChildren___0CTs2",
+	pageHeadingSeparator: "navigation__pageHeadingSeparator___yGoaX",
+	tabBar: "navigation__tabBar___WTgSO",
+	tabBarWrap: "navigation__tabBarWrap___kohcY"
+}, R = D.createContext(null);
+function z(e) {
+	let t = D.useContext(R);
+	if (!t) throw Error(`<${e}> must be used within <Tabs>`);
+	return t;
+}
+function B({ value: e, defaultValue: t = "", onValueChange: n, className: r, children: i, ...o }) {
+	let [s, c] = D.useState(t), l = e !== void 0, u = l ? e : s, d = D.useId(), f = D.useCallback((e) => {
+		l || c(e), n?.(e);
+	}, [l, n]), [p, m] = D.useState(() => /* @__PURE__ */ new Set()), h = D.useCallback((e) => (m((t) => {
+		let n = new Set(t);
+		return n.add(e), n;
+	}), () => m((t) => {
+		let n = new Set(t);
+		return n.delete(e), n;
+	})), []), g = D.useMemo(() => ({
+		value: u,
+		setValue: f,
+		id: d,
+		panels: p,
+		registerPanel: h
+	}), [
+		u,
+		f,
+		d,
+		p,
+		h
+	]);
+	return /* @__PURE__ */ j(R.Provider, {
+		value: g,
+		children: /* @__PURE__ */ j("div", {
+			"data-slot": "tabs",
+			className: a("tabs--component", L.tabs, r),
+			...o,
+			children: i
+		})
+	});
+}
+var V = e(L.tabList, {
+	variants: { variant: {
+		underline: void 0,
+		enclosed: L.tabListEnclosed,
+		pill: L.tabsPill
+	} },
+	defaultVariants: { variant: "underline" }
+});
+function H({ variant: e = "underline", label: t, edgeFade: n = !1, strings: r, className: i, children: s, ref: c, onKeyDown: l, onScroll: u, id: f, ...p }) {
+	let h = D.useRef(null), v = D.useRef(null), b = D.useId(), x = f ?? b, { value: S } = z("TabList"), C = d(I, r), [E, O] = D.useState({
+		overflow: !1,
+		previous: !1,
+		next: !1
+	});
+	D.useImperativeHandle(c, () => h.current);
+	let k = D.useCallback(() => {
+		let e = h.current, t = v.current;
+		if (!e || !t) return;
+		let n = getComputedStyle(e), r = t.clientWidth - (parseFloat(n.marginLeft) || 0) - (parseFloat(n.marginRight) || 0), i = e.scrollWidth > r + 1, { start: a, end: o } = y(e), s = {
+			overflow: i,
+			previous: a,
+			next: o
+		};
+		O((e) => e.overflow === s.overflow && e.previous === s.previous && e.next === s.next ? e : s);
+	}, []), A = D.useCallback(() => {
+		let e = h.current, t = e?.querySelector("[role=\"tab\"][aria-selected=\"true\"]");
+		if (!e || !t) return;
+		let r = e.getBoundingClientRect(), i = t.getBoundingClientRect(), a = getComputedStyle(e), o = n && parseFloat(a.scrollPaddingInlineStart) || 0, s = r.left + (parseFloat(a.paddingLeft) || 0) + o, c = r.right - (parseFloat(a.paddingRight) || 0) - o;
+		i.left < s ? e.scrollLeft += i.left - s : i.right > c && (e.scrollLeft += i.right - c), k();
+	}, [n, k]);
+	D.useEffect(() => {
+		let e = h.current, t = v.current;
+		if (!e || !t) return;
+		let n = () => {
+			k(), A();
+		}, r = g([
+			t,
+			e,
+			...e.children
+		], n);
+		return n(), r;
+	}, [
+		s,
+		k,
+		A
+	]), D.useEffect(A, [
+		S,
+		E.overflow,
+		A
+	]);
+	let N = (e) => {
+		let t = h.current;
+		if (!t) return;
+		let n = getComputedStyle(t).direction === "rtl" ? -1 : 1;
+		t.scrollBy({
+			left: e * n * t.clientWidth * .75,
+			behavior: _("(prefers-reduced-motion: reduce)") ? "instant" : "smooth"
+		});
+	};
+	return /* @__PURE__ */ M("div", {
+		ref: v,
+		className: a("tabs--rail", L.tabRail),
+		children: [
+			E.overflow && /* @__PURE__ */ j(o, {
+				iconOnly: !0,
+				tone: "neutral",
+				appearance: "ghost",
+				className: L.tabScroll,
+				"aria-label": C.previous,
+				"aria-controls": x,
+				disabled: !E.previous,
+				onClick: () => N(-1),
+				children: /* @__PURE__ */ j(w, {})
+			}),
+			/* @__PURE__ */ j(m, {
+				ref: h,
+				id: x,
+				tabIndex: -1,
+				role: "tablist",
+				"aria-label": t,
+				"data-slot": "tab-list",
+				"data-fade-start": n && E.overflow && E.previous ? "" : void 0,
+				"data-fade-end": n && E.overflow && E.next ? "" : void 0,
+				className: a("tabs--list", V({ variant: e }), i),
+				onKeyDown: (e) => {
+					if (l?.(e), e.defaultPrevented || ![
+						"ArrowLeft",
+						"ArrowRight",
+						"Home",
+						"End"
+					].includes(e.key)) return;
+					let t = [...h.current?.querySelectorAll("[role=\"tab\"]:not(:disabled)") ?? []];
+					if (t.length === 0) return;
+					let n = t.indexOf(document.activeElement), r = n, i = getComputedStyle(e.currentTarget).direction === "rtl";
+					e.key === (i ? "ArrowRight" : "ArrowLeft") ? r = n <= 0 ? t.length - 1 : n - 1 : e.key === (i ? "ArrowLeft" : "ArrowRight") ? r = n === t.length - 1 ? 0 : n + 1 : e.key === "Home" ? r = 0 : e.key === "End" && (r = t.length - 1), e.preventDefault(), t[r]?.focus({ preventScroll: !0 }), t[r]?.click();
+				},
+				onScroll: (e) => {
+					k(), u?.(e);
+				},
+				...p,
+				children: s
+			}),
+			E.overflow && /* @__PURE__ */ j(o, {
+				iconOnly: !0,
+				tone: "neutral",
+				appearance: "ghost",
+				className: L.tabScroll,
+				"aria-label": C.next,
+				"aria-controls": x,
+				disabled: !E.next,
+				onClick: () => N(1),
+				children: /* @__PURE__ */ j(T, {})
+			})
+		]
+	});
+}
+function U({ value: e, className: t, onClick: r, ...i }) {
+	let { value: o, setValue: s, id: c, panels: l } = z("Tab"), u = o === e, d = u && l.has(e) ? `${c}-panel-${e}` : void 0;
+	return /* @__PURE__ */ j("button", {
+		type: "button",
+		role: "tab",
+		id: `${c}-tab-${e}`,
+		"aria-selected": u,
+		"aria-controls": d,
+		tabIndex: u ? 0 : -1,
+		"data-slot": "tab",
+		className: a("tabs--tab", L.tab, n({
+			size: "sm",
+			weight: "medium"
+		}), t),
+		onClick: (t) => {
+			r?.(t), t.defaultPrevented || s(e);
+		},
+		...i
+	});
+}
+function W({ value: e, className: t, children: n, ...r }) {
+	let { value: i, id: o, registerPanel: s } = z("TabPanel");
+	return D.useEffect(() => s(e), [s, e]), i === e ? /* @__PURE__ */ j("div", {
+		role: "tabpanel",
+		id: `${o}-panel-${e}`,
+		"aria-labelledby": `${o}-tab-${e}`,
+		tabIndex: 0,
+		"data-slot": "tab-panel",
+		className: a("tabs--panel", L.tabPanel, t),
+		...r,
+		children: n
+	}) : null;
+}
+//#endregion
+//#region src/components/base/navigation/breadcrumbs.tsx
+function G({ items: e, separator: t, label: n, strings: r, className: o, ...s }) {
+	let c = d(P, r);
+	return /* @__PURE__ */ j("nav", {
+		"aria-label": n ?? c.label,
+		"data-slot": "breadcrumbs",
+		className: a("breadcrumbs--component", o),
+		...s,
+		children: /* @__PURE__ */ j("ol", {
+			className: L.breadcrumb,
+			children: e.map((n, r) => {
+				let o = r === e.length - 1, s = o ? /* @__PURE__ */ j(i, {
+					tag: "span",
+					size: "sm",
+					weight: "medium",
+					className: L.breadcrumbCurrent,
+					"aria-current": "page",
+					children: n.label
+				}) : n.render ? D.cloneElement(n.render, {
+					className: a(L.breadcrumbLink, n.render.props.className),
+					children: n.label,
+					"data-hit-area": ""
+				}) : /* @__PURE__ */ j("a", {
+					href: n.href,
+					"data-hit-area": !0,
+					className: L.breadcrumbLink,
+					children: /* @__PURE__ */ j(i, {
+						tag: "span",
+						size: "sm",
+						type: "inherit",
+						children: n.label
+					})
+				});
+				return /* @__PURE__ */ M("li", {
+					className: L.breadcrumbItem,
+					children: [s, !o && /* @__PURE__ */ j("span", {
+						className: L.breadcrumbSeparator,
+						"aria-hidden": !0,
+						children: t ?? /* @__PURE__ */ j(T, {})
+					})]
+				}, r);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/base/navigation/pagination.range.ts
+function K(e, t, n = 1) {
+	if (t <= n * 2 + 5) return Array.from({ length: t }, (e, t) => t + 1);
+	let r = Math.max(e - n, 1), i = Math.min(e + n, t), a = r > 2, o = i < t - 1, s = [1];
+	a && s.push(null);
+	for (let e = Math.max(r, 2); e <= Math.min(i, t - 1); e++) s.push(e);
+	return o && s.push(null), s.push(t), s;
+}
+//#endregion
+//#region src/components/base/navigation/pagination.tsx
+function q({ page: e, total: t, onPageChange: n, disabled: r = !1, siblings: i = 1, labels: s = "responsive", numbers: c = !0, pageHref: l, renderLink: u, strings: d, className: f, ...m }) {
+	let h = {
+		...N,
+		...d
+	}, g = c ? K(e, t, i) : [], _ = (e, { label: t, current: i, disabled: a, children: s, ...c }) => {
+		let d = r || a, f = (t) => {
+			if (d) return t.preventDefault();
+			n(e);
+		}, p = i ? "page" : void 0;
+		if (l && !d) {
+			let n = S(u)({
+				href: l(e),
+				"aria-label": t,
+				"aria-current": p,
+				onClick: f,
+				children: s
+			});
+			return /* @__PURE__ */ j(o, {
+				"aria-label": t,
+				"aria-current": p,
+				render: n,
+				...c,
+				children: s
+			});
+		}
+		return /* @__PURE__ */ j(o, {
+			"aria-label": t,
+			"aria-current": p,
+			disabled: r || void 0,
+			"aria-disabled": !r && !!a || void 0,
+			onClick: f,
+			...c,
+			children: s
+		});
+	}, v = s !== "icon", y = (e) => s === "responsive" ? /* @__PURE__ */ j("span", {
+		className: L.paginationArrowWord,
+		children: e
+	}) : e;
+	return /* @__PURE__ */ j("nav", {
+		"aria-label": h.label,
+		"data-slot": "pagination",
+		className: a("pagination--component", f),
+		...m,
+		children: /* @__PURE__ */ M("div", {
+			className: L.pagination,
+			"data-labels": s,
+			children: [
+				_(e - 1, {
+					label: h.previous,
+					disabled: e <= 1,
+					tone: "neutral",
+					appearance: "ghost",
+					iconOnly: !v,
+					children: /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(w, {}), v && y(h.previous)] })
+				}),
+				g.map((t, n) => t === null ? /* @__PURE__ */ M(D.Fragment, { children: [/* @__PURE__ */ j("span", {
+					className: L.paginationEllipsis,
+					"aria-hidden": !0,
+					children: "…"
+				}), /* @__PURE__ */ j(p, { children: h.morePages })] }, `gap-${n}`) : /* @__PURE__ */ j(D.Fragment, { children: _(t, {
+					label: h.page(t),
+					current: t === e,
+					tone: "secondary",
+					appearance: t === e ? "outline" : "ghost",
+					iconOnly: !0,
+					children: t
+				}) }, t)),
+				_(e + 1, {
+					label: h.next,
+					disabled: e >= t,
+					tone: "neutral",
+					appearance: "ghost",
+					iconOnly: !v,
+					children: /* @__PURE__ */ M(A, { children: [v && y(h.next), /* @__PURE__ */ j(T, {})] })
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/base/navigation/page-heading.tsx
+var J = (e) => typeof e == "string" || typeof e == "number";
+function Y({ eyebrow: e, title: n, description: o, level: s = 1, badge: c, badges: l, breadcrumbs: u, leading: d, beforeTitle: p, titlePrefix: m, titleSuffix: g, afterDescription: _, actions: v, children: y, withSeparator: b = !1, className: x, contentClassName: S, titleRowClassName: C, actionsClassName: w, ...T }) {
+	let E = l ?? (c ? [c] : []);
+	return /* @__PURE__ */ M("header", {
+		"data-slot": "page-heading",
+		className: a("page-heading--component", L.pageHeading, x),
+		...T,
+		children: [
+			!!u && /* @__PURE__ */ j("div", {
+				className: L.pageHeadingCrumbs,
+				children: u
+			}),
+			/* @__PURE__ */ M("div", {
+				className: L.pageHeadingRow,
+				children: [d != null && /* @__PURE__ */ j("div", {
+					className: L.pageHeadingLeading,
+					children: d
+				}), /* @__PURE__ */ M("div", {
+					className: a(L.pageHeadingMain, S),
+					children: [
+						e != null && (J(e) ? /* @__PURE__ */ j(t, {
+							className: "page-heading--eyebrow",
+							children: e
+						}) : e),
+						p,
+						/* @__PURE__ */ M("div", {
+							"data-has-prefix": m ? "" : void 0,
+							className: a(L.pageHeadingGrid, C),
+							children: [
+								!!m && /* @__PURE__ */ j("span", {
+									className: L.pageHeadingPrefix,
+									children: m
+								}),
+								/* @__PURE__ */ M("div", {
+									className: L.pageHeadingHeadline,
+									children: [/* @__PURE__ */ M("div", {
+										className: L.pageHeadingTitleRow,
+										children: [
+											J(n) ? /* @__PURE__ */ j(r, {
+												level: s,
+												className: L.pageHeadingTitle,
+												children: n
+											}) : n,
+											E.length > 0 && /* @__PURE__ */ j("div", {
+												className: L.pageHeadingBadges,
+												children: E.map((e, t) => /* @__PURE__ */ j(f, {
+													tone: e.tone ?? "neutral",
+													children: e.label
+												}, e.key ?? t))
+											}),
+											g
+										]
+									}), !!v && /* @__PURE__ */ j("div", {
+										className: a(L.pageHeadingActions, w),
+										children: v
+									})]
+								}),
+								(o != null || _ != null) && /* @__PURE__ */ M("div", {
+									className: L.pageHeadingBlock,
+									children: [o != null && (J(o) ? /* @__PURE__ */ j(i, {
+										type: "secondary",
+										className: L.pageHeadingDescription,
+										children: o
+									}) : o), _]
+								})
+							]
+						})
+					]
+				})]
+			}),
+			!!y && /* @__PURE__ */ j("div", {
+				className: L.pageHeadingChildren,
+				children: y
+			}),
+			!!b && /* @__PURE__ */ j(h, { className: L.pageHeadingSeparator })
+		]
+	});
+}
+//#endregion
+//#region src/components/base/navigation/navigation-tabs.strings.ts
+var X = { label: "Sections" }, Z = { label: "Sections" };
+//#endregion
+//#region src/components/base/navigation/navigation-tabs.tsx
+function Q({ items: e, currentPath: t = "/", renderLink: r, variant: i = "underline", strings: o, className: s, ...c }) {
+	let l = {
+		...X,
+		...o
+	}, u = x(t, e.map((e) => e.href)), d = k(null), f = v(d, [e]);
+	return /* @__PURE__ */ j("nav", {
+		"aria-label": l.label,
+		"data-fade-start": f.start || void 0,
+		"data-fade-end": f.end || void 0,
+		className: a("navigation-tabs--component", L.tabBarWrap, s),
+		...c,
+		children: /* @__PURE__ */ j("div", {
+			ref: d,
+			className: a(L.tabBar, i === "pill" && L.tabsPill),
+			children: e.map((e) => {
+				let t = !!u && e.href === u, i = /* @__PURE__ */ M(A, { children: [
+					e.icon,
+					e.label,
+					e.badge
+				] }), o = {
+					className: a(L.tab, n({
+						size: "sm",
+						weight: "medium"
+					})),
+					"data-active": t || void 0,
+					"aria-current": t ? "page" : void 0,
+					"aria-disabled": e.disabled || void 0
+				};
+				return r ? /* @__PURE__ */ j("span", {
+					style: { display: "contents" },
+					children: r({
+						href: e.href,
+						children: i,
+						active: t,
+						disabled: e.disabled,
+						...o
+					})
+				}, e.href) : /* @__PURE__ */ j("a", {
+					href: e.disabled ? void 0 : e.href,
+					...o,
+					children: i
+				}, e.href);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/base/navigation/overflow-tab-bar.tsx
+function $({ items: e, value: t, onValueChange: n, strings: r, className: i, ...o }) {
+	let s = {
+		...Z,
+		...r
+	}, c = a("overflow-tab-bar--component", i);
+	if (e.length > 0 && e.every((e) => e.href)) {
+		let r = new Map(e.map((e) => [e.href, e.id])), i = e.find((e) => e.id === t)?.href;
+		return /* @__PURE__ */ j(Q, {
+			...o,
+			className: c,
+			items: e.map((e) => ({
+				label: e.label,
+				href: e.href,
+				icon: e.icon,
+				badge: e.badge,
+				disabled: e.disabled
+			})),
+			currentPath: i ?? "",
+			variant: "pill",
+			strings: { label: s.label },
+			renderLink: ({ href: e, children: t, active: i, disabled: a, external: o, ...s }) => /* @__PURE__ */ j("a", {
+				...s,
+				href: a ? void 0 : e,
+				onClick: () => {
+					let t = e ? r.get(e) : void 0;
+					t && n?.(t);
+				},
+				children: t
+			})
+		});
+	}
+	let l = e.some((e) => e.id === t), u = e.find((e) => !e.disabled)?.id;
+	return /* @__PURE__ */ j(B, {
+		...o,
+		value: t ?? "",
+		onValueChange: (e) => n?.(e),
+		className: c,
+		children: /* @__PURE__ */ j(H, {
+			label: s.label,
+			variant: "pill",
+			edgeFade: !0,
+			children: e.map((e) => /* @__PURE__ */ M(U, {
+				value: e.id,
+				disabled: e.disabled,
+				"data-tab-id": e.id,
+				...!l && e.id === u ? { tabIndex: 0 } : null,
+				children: [
+					e.icon,
+					e.label,
+					e.badge
+				]
+			}, e.id))
+		})
+	});
+}
+//#endregion
+//#region src/components/base/navigation/language-switcher.tsx
+function ee({ locales: e, value: t, onSelect: n, variant: r = "menu", label: i, strings: f, className: p, ...m }) {
+	let h = d(F, f), g = e.find((e) => e.value === t), _ = O(), v = O();
+	return r === "pills" ? /* @__PURE__ */ j("div", {
+		className: a("language-switcher--component", p),
+		...m,
+		children: /* @__PURE__ */ j(b, {
+			"aria-label": i ?? h.label,
+			value: t ?? null,
+			onValueChange: (e) => e && n?.(e),
+			options: e.map((e) => ({
+				value: e.value,
+				label: /* @__PURE__ */ j("span", {
+					lang: e.value,
+					children: e.label
+				})
+			}))
+		})
+	}) : /* @__PURE__ */ M("div", {
+		className: a("language-switcher--component", p),
+		...m,
+		children: [/* @__PURE__ */ j("span", {
+			id: _,
+			hidden: !0,
+			children: i ?? h.label
+		}), /* @__PURE__ */ M(u, { children: [/* @__PURE__ */ j(c, { render: /* @__PURE__ */ M(o, {
+			tone: "neutral",
+			appearance: "ghost",
+			"aria-labelledby": g ? `${_} ${v}` : i ? void 0 : _,
+			children: [/* @__PURE__ */ j(E, {}), g ? /* @__PURE__ */ j("span", {
+				id: v,
+				lang: g.value,
+				children: g.label
+			}) : i]
+		}) }), /* @__PURE__ */ j(l, {
+			align: "end",
+			children: e.map((e) => /* @__PURE__ */ j(s, {
+				lang: e.value,
+				onClick: () => n?.(e.value),
+				trailing: e.value === t ? /* @__PURE__ */ j(C, { "aria-hidden": !0 }) : void 0,
+				children: e.label
+			}, e.value))
+		})] })]
+	});
+}
+//#endregion
+export { Z as a, K as c, H as d, W as f, I as g, N as h, X as i, G as l, P as m, $ as n, Y as o, B as p, Q as r, q as s, ee as t, U as u };