@webority/ui-react 0.34.0 → 0.35.0

package/dist/components/AppTabs.js

@@ -0,0 +1,195 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppTooltip.js";
+import r from "./AppIcon.js";
+import i from "./renderIconProp.js";
+import { useCallback as a, useEffect as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/AppTabs.jsx
+var p = ["underline", "pills"], m = ["horizontal", "vertical"], h = [
+	"sm",
+	"md",
+	"lg"
+], g = ["automatic", "manual"], _ = [
+	"success",
+	"warning",
+	"danger",
+	"info"
+], v = 1, y = 28, b = .7;
+function x({ tabs: x, value: S, onChange: C, linkComponent: w, variant: T = "underline", orientation: E = "horizontal", size: D = "md", fitted: O = !1, activation: k = "automatic", ariaLabel: A, className: j = "", style: M, ...N }) {
+	t("AppTabs", N), e("AppTabs", "variant", T, p), e("AppTabs", "orientation", E, m), e("AppTabs", "size", D, h), e("AppTabs", "activation", k, g);
+	for (let t of x) e("AppTabs", "tabs[].tone", t.tone, _);
+	let P = c(null), F = c(null), I = E === "vertical", [L, R] = l(S);
+	o(() => {
+		R(S);
+	}, [S]);
+	let z = x.find((e) => !e.disabled)?.key, B = x.some((e) => e.key === L && !e.disabled) ? L : void 0, V = x.some((e) => e.key === S && !e.disabled) ? S : void 0, H = B ?? V ?? z, U = (e) => {
+		P.current?.querySelector(`[data-key="${CSS.escape(String(e))}"]`)?.focus();
+	}, W = a(() => {
+		let e = P.current, t = F.current;
+		if (!e || !t || I) return;
+		let n = e.scrollWidth - e.clientWidth;
+		t.classList.toggle("is-overflow-start", e.scrollLeft > v), t.classList.toggle("is-overflow-end", n > v && e.scrollLeft < n - v);
+	}, [I]), G = a(() => {
+		let e = P.current;
+		if (!e) return;
+		let t = e.querySelector(".app-tab.active");
+		t ? (I ? (e.style.setProperty("--wui-tab-y", `${t.offsetTop}px`), e.style.setProperty("--wui-tab-h", `${t.offsetHeight}px`)) : (e.style.setProperty("--wui-tab-x", `${t.offsetLeft}px`), e.style.setProperty("--wui-tab-w", `${t.offsetWidth}px`)), e.toggleAttribute("data-active-danger", !!x.find((e) => e.key === S)?.danger)) : e.style.setProperty(I ? "--wui-tab-h" : "--wui-tab-w", "0px"), e.setAttribute("data-wui-tabs", ""), W();
+	}, [
+		I,
+		x,
+		S,
+		W
+	]), K = a(() => {
+		let e = P.current;
+		if (!e || I) return;
+		let t = e.querySelector(".app-tab.active");
+		if (!t) return;
+		let n = y, r = t.offsetLeft, i = r + t.offsetWidth;
+		r - n < e.scrollLeft ? e.scrollLeft = Math.max(0, r - n) : i + n > e.scrollLeft + e.clientWidth && (e.scrollLeft = i + n - e.clientWidth);
+	}, [I]);
+	s(() => {
+		G();
+	}, [G]), s(() => {
+		K();
+	}, [S, K]);
+	let q = c(G);
+	o(() => {
+		q.current = G;
+	}, [G]), o(() => {
+		if (typeof ResizeObserver > "u") return;
+		let e = new ResizeObserver(() => q.current());
+		return P.current && e.observe(P.current), F.current && e.observe(F.current), () => e.disconnect();
+	}, [I]);
+	function J(e) {
+		let t = e.target?.dataset?.key;
+		if (t == null) return;
+		let n = x.findIndex((e) => e.key === t);
+		if (n < 0) return;
+		let r = x.length, i = (e, t) => {
+			for (let n = 1; n <= r; n++) {
+				let i = x[((e + t * n) % r + r) % r];
+				if (!i.disabled) return i;
+			}
+			return null;
+		}, a = I ? "ArrowDown" : "ArrowRight", o = I ? "ArrowUp" : "ArrowLeft", s = null;
+		if (e.key === a ? s = i(n, 1) : e.key === o ? s = i(n, -1) : e.key === "Home" ? s = x.find((e) => !e.disabled) ?? null : e.key === "End" && (s = [...x].reverse().find((e) => !e.disabled) ?? null), !s) return;
+		e.preventDefault(), R(s.key), U(s.key);
+		let c = s.href != null || s.to != null;
+		k === "automatic" && !c && C?.(s.key);
+	}
+	let Y = (e) => {
+		let t = P.current;
+		t && t.scrollBy({ left: e * t.clientWidth * b });
+	}, X = [
+		"app-tabs",
+		T === "pills" ? "app-tabs-pills" : "",
+		I ? "app-tabs-vertical" : "",
+		D === "sm" ? "app-tabs-sm" : "",
+		D === "lg" ? "app-tabs-lg" : "",
+		O ? "app-tabs-fitted" : "",
+		j
+	].filter(Boolean).join(" "), Z = /* @__PURE__ */ f("div", {
+		ref: P,
+		role: "tablist",
+		"aria-orientation": I ? "vertical" : void 0,
+		"aria-label": A,
+		className: X,
+		style: M,
+		...N,
+		onKeyDown: J,
+		onScroll: W,
+		children: [x.map((e) => {
+			let t = e.key === S, r = e.href != null || e.to != null, a = {
+				role: "tab",
+				"data-key": e.key,
+				"aria-selected": t,
+				tabIndex: e.key === H ? 0 : -1,
+				className: `app-tab${t ? " active" : ""}${e.danger ? " danger" : ""}${r && e.disabled ? " disabled" : ""}`
+			}, o = /* @__PURE__ */ f(u, { children: [
+				e.image ? /* @__PURE__ */ d("img", {
+					className: "app-tab-img",
+					src: e.image,
+					alt: e.imageAlt ?? ""
+				}) : i(e.icon, {
+					size: 16,
+					className: "app-tab-icon"
+				}),
+				e.label,
+				e.count != null && /* @__PURE__ */ d("span", {
+					className: `app-tab-count${e.tone ? ` ${e.tone}` : ""}`,
+					children: e.count
+				})
+			] }), s;
+			if (r) {
+				let t = e.to != null && w ? w : "a", n = e.rel ?? (e.target === "_blank" ? "noopener noreferrer" : void 0), r = e.disabled ? { "aria-disabled": !0 } : t === "a" ? {
+					href: e.href ?? e.to,
+					target: e.target,
+					rel: n
+				} : {
+					to: e.to,
+					target: e.target,
+					rel: n
+				}, i = (t) => {
+					if (e.disabled) {
+						t.preventDefault();
+						return;
+					}
+					t.metaKey || t.ctrlKey || t.shiftKey || t.altKey || (R(e.key), C?.(e.key));
+				};
+				s = /* @__PURE__ */ d(t, {
+					...a,
+					...r,
+					onClick: i,
+					children: o
+				}, e.key);
+			} else s = /* @__PURE__ */ d("button", {
+				type: "button",
+				...a,
+				disabled: e.disabled,
+				onClick: () => {
+					e.disabled || (R(e.key), C?.(e.key));
+				},
+				children: o
+			}, e.key);
+			return e.tooltip ? /* @__PURE__ */ d(n, {
+				content: e.tooltip,
+				children: s
+			}, e.key) : s;
+		}), /* @__PURE__ */ d("span", {
+			className: "app-tab-indicator",
+			"aria-hidden": "true"
+		})]
+	});
+	return I ? Z : /* @__PURE__ */ f("div", {
+		ref: F,
+		className: "app-tabs-wrap",
+		children: [
+			/* @__PURE__ */ d("button", {
+				type: "button",
+				className: "app-tabs-scroll-btn prev",
+				"aria-label": "Scroll tabs backward",
+				tabIndex: -1,
+				onClick: () => Y(-1),
+				children: /* @__PURE__ */ d(r, {
+					name: "chevron-left",
+					size: 16
+				})
+			}),
+			Z,
+			/* @__PURE__ */ d("button", {
+				type: "button",
+				className: "app-tabs-scroll-btn next",
+				"aria-label": "Scroll tabs forward",
+				tabIndex: -1,
+				onClick: () => Y(1),
+				children: /* @__PURE__ */ d(r, {
+					name: "chevron-right",
+					size: 16
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { x as default };

package/dist/components/AppTagInput.js

@@ -0,0 +1,63 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppInfoTip.js";
+import r from "./AppRequiredMark.js";
+import i, { readValues as a, writeValues as o } from "./useWuiControl.js";
+import { forwardRef as s, useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import "@webority/ui-elements/elements/taginput";
+//#region src/components/AppTagInput.jsx
+var d = ["sm", "lg"], f = s(function({ values: s, onChange: f, placeholder: p = "Add…", name: m, label: h, error: g, hint: _, required: v = !1, size: y, maxTags: b, allowDuplicates: x = !1, disabled: S = !1, id: C, ariaLabel: w, className: T = "", fieldClassName: E = "", help: D, helpLabel: O = "More information", ...k }, A) {
+	t("AppTagInput", k), e("AppTagInput", "size", y, d);
+	let j = c(), M = C || j, { setRef: N } = i({
+		ref: A,
+		value: s,
+		onChange: f,
+		readValue: a,
+		writeValue: o
+	});
+	return /* @__PURE__ */ u("div", {
+		className: `field${E ? ` ${E}` : ""}`,
+		children: [
+			h && /* @__PURE__ */ u("label", {
+				className: "label",
+				htmlFor: M,
+				children: [
+					h,
+					v && /* @__PURE__ */ l(r, {}),
+					D && /* @__PURE__ */ l(n, {
+						label: O,
+						children: D
+					})
+				]
+			}),
+			/* @__PURE__ */ l("wui-taginput", {
+				"aria-label": w || (typeof h == "string" ? h : void 0),
+				"aria-describedby": g ? `${M}-error` : _ ? `${M}-hint` : void 0,
+				"aria-invalid": g ? "true" : void 0,
+				id: M,
+				ref: N,
+				name: m,
+				placeholder: p,
+				size: y || void 0,
+				"max-tags": b === void 0 ? void 0 : String(b),
+				"allow-duplicates": x ? "" : void 0,
+				disabled: S ? "" : void 0,
+				required: v ? "" : void 0,
+				className: T || void 0,
+				...k
+			}),
+			g ? /* @__PURE__ */ l("div", {
+				className: "field-error",
+				id: `${M}-error`,
+				children: g
+			}) : _ ? /* @__PURE__ */ l("div", {
+				className: "field-hint",
+				id: `${M}-hint`,
+				children: _
+			}) : null
+		]
+	});
+});
+//#endregion
+export { f as default };

package/dist/components/AppTextarea.js

@@ -0,0 +1,81 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppInfoTip.js";
+import n from "./AppRequiredMark.js";
+import { forwardRef as r, useCallback as i, useEffect as a, useId as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import { Form as u } from "react-bootstrap";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/AppTextarea.jsx
+var p = r(function({ label: r, required: p = !1, error: m, hint: h, help: g, helpLabel: _ = "More information", id: v, name: y, rows: b = 4, autoGrow: x = !1, showCount: S = !1, maxLength: C, className: w = "", fieldClassName: T = "", ...E }, D) {
+	e("AppTextarea", E);
+	let O = o(), k = v || O, A = [
+		"textarea",
+		x ? "autosize" : "",
+		m ? "error" : "",
+		w
+	].filter(Boolean).join(" "), j = m && k ? `${k}-error` : void 0, M = h && k ? `${k}-hint` : void 0, N = j || M, P = c(null), F = (e) => {
+		P.current = e, typeof D == "function" ? D(e) : D && (D.current = e);
+	}, I = i(() => {
+		let e = P.current;
+		e && (e.style.height = "auto", e.style.height = `${e.scrollHeight}px`);
+	}, []);
+	s(() => {
+		x && I();
+	}, [
+		x,
+		I,
+		E.value
+	]);
+	let [L, R] = l(() => String(E.value ?? E.defaultValue ?? "").length);
+	a(() => {
+		!S || E.value === void 0 || R(String(E.value ?? "").length);
+	}, [E.value, S]);
+	let z = (e) => {
+		x && I(), S && R(e.target.value.length), E.onInput?.(e);
+	};
+	return /* @__PURE__ */ f(u.Group, {
+		className: `field${T ? ` ${T}` : ""}`,
+		children: [
+			r && /* @__PURE__ */ f(u.Label, {
+				className: "label",
+				htmlFor: k,
+				children: [
+					r,
+					p && /* @__PURE__ */ d(n, {}),
+					g && /* @__PURE__ */ d(t, {
+						label: _,
+						children: g
+					})
+				]
+			}),
+			/* @__PURE__ */ d(u.Control, {
+				as: "textarea",
+				id: k,
+				name: y,
+				rows: b,
+				className: A,
+				"aria-invalid": m ? "true" : "false",
+				"aria-describedby": N,
+				required: p,
+				maxLength: C,
+				...E,
+				ref: F,
+				onInput: z
+			}),
+			m ? /* @__PURE__ */ d("div", {
+				className: "field-error",
+				id: j,
+				children: m
+			}) : h ? /* @__PURE__ */ d("div", {
+				className: "field-hint",
+				id: M,
+				children: h
+			}) : null,
+			S && /* @__PURE__ */ f("div", {
+				className: `field-count${C && L >= C ? " at-limit" : ""}`,
+				children: [L, C ? ` / ${C}` : ""]
+			})
+		]
+	});
+});
+//#endregion
+export { p as default };

package/dist/components/AppThemeToggle.js

@@ -0,0 +1,102 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppActionIcon.js";
+import r from "./AppSegmented.js";
+import { DEFAULT_THEME_EFFECT as i, DEFAULT_THEME_STORAGE_KEY as a, THEME_CHANGE_EVENT as o, THEME_EFFECTS as s, THEME_MODES as c, applyTheme as l, nextTheme as u, readStoredTheme as d, resolveTheme as f, storeTheme as p, transitionTheme as m, watchSystemTheme as h } from "@webority/ui-elements/helpers";
+import { useCallback as g, useEffect as _, useId as v, useState as y } from "react";
+import { jsx as b } from "react/jsx-runtime";
+import { flushSync as x } from "react-dom";
+//#region src/components/AppThemeToggle.jsx
+var S = {
+	light: "sun",
+	dark: "moon",
+	auto: "refresh-cw"
+}, C = ["icon", "segmented"], w = {
+	sm: 16,
+	md: 20,
+	lg: 24,
+	xl: 28
+};
+function T({ variant: T = "icon", effect: E = i, includeAuto: D = !0, storageKey: O = a, duration: k, label: A = "Theme", lightLabel: j = "Light", darkLabel: M = "Dark", autoLabel: N = "System", name: P, size: F = "md", tooltipPlacement: I = "auto", onChange: L, className: R = "", ...z }) {
+	t("AppThemeToggle", z), e("AppThemeToggle", "variant", T, C), e("AppThemeToggle", "effect", E, s), e("AppThemeToggle", "size", F, Object.keys(w));
+	let B = g((e) => e === "auto" && !D ? f(e) : e, [D]), [V, H] = y(() => B(typeof window > "u" ? "auto" : d(O))), U = v(), W = P || U;
+	_(() => {
+		let e = document.documentElement.getAttribute("data-theme");
+		c.includes(e) ? H(B(e)) : l(d(O));
+	}, []), _(() => {
+		let e = (e) => {
+			let t = e.detail?.preference;
+			c.includes(t) && H(B(t));
+		};
+		return document.addEventListener(o, e), () => document.removeEventListener(o, e);
+	}, [B]), _(() => h(() => {
+		document.documentElement.getAttribute("data-theme") === "auto" && l("auto");
+	}), []);
+	let G = g((e, t, n) => {
+		let r = t?.getBoundingClientRect?.() ?? {
+			left: 0,
+			top: 0,
+			width: 0,
+			height: 0
+		}, i = {
+			x: r.left + r.width / 2,
+			y: r.top + r.height / 2
+		};
+		m(() => {
+			l(e), p(e, O), x(() => H(e)), L?.(e);
+		}, {
+			effect: E,
+			to: f(e),
+			origin: i,
+			duration: k,
+			live: n
+		});
+	}, [
+		O,
+		E,
+		k,
+		L
+	]);
+	if (T === "segmented") {
+		let e = [{
+			value: "light",
+			label: j,
+			icon: S.light
+		}, {
+			value: "dark",
+			label: M,
+			icon: S.dark
+		}];
+		return D && e.push({
+			value: "auto",
+			label: N,
+			icon: S.auto
+		}), /* @__PURE__ */ b(r, {
+			options: e,
+			value: V,
+			name: W,
+			label: A,
+			size: F,
+			className: [
+				"wui-theme-toggle",
+				"wui-theme-toggle-segmented",
+				R
+			].filter(Boolean).join(" "),
+			onChange: (e) => {
+				if (e === V) return;
+				let t = document.querySelector(`.segmented-input[name="${CSS.escape(W)}"][value="${e}"]`);
+				G(e, t?.closest(".segmented-option") ?? t, t?.closest(".segmented"));
+			}
+		});
+	}
+	return /* @__PURE__ */ b(n, {
+		icon: S[V],
+		label: `${A}: ${V}`,
+		size: w[F] ?? w.md,
+		tooltipPlacement: I,
+		onClick: (e) => G(u(V, { includeAuto: D }), e.currentTarget, e.currentTarget),
+		className: ["wui-theme-toggle", R].filter(Boolean).join(" ")
+	});
+}
+//#endregion
+export { T as default };

package/dist/components/AppTimePicker.js

@@ -0,0 +1,68 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppInfoTip.js";
+import r from "./AppRequiredMark.js";
+import i from "./useWuiControl.js";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import "@webority/ui-elements/elements/timepicker";
+//#region src/components/AppTimePicker.jsx
+var l = [
+	"sm",
+	"md",
+	"lg"
+], u = ["12", "24"], d = a(function({ value: a, onChange: d, label: f, required: p = !1, hint: m, error: h, help: g, helpLabel: _ = "More information", name: v, min: y, max: b, step: x, format: S = "24", placeholder: C = "Select time", disabled: w, size: T, id: E, ariaLabel: D, className: O = "", fieldClassName: k = "", ...A }, j) {
+	t("AppTimePicker", A), e("AppTimePicker", "size", T, l), e("AppTimePicker", "format", S, u);
+	let M = o(), N = E || v || M, { setRef: P } = i({
+		ref: j,
+		value: a ?? "",
+		onChange: d
+	}), F = !f && !h && !m, I = h ? `${N}-error` : void 0, L = m ? `${N}-hint` : void 0, R = /* @__PURE__ */ s("wui-timepicker", {
+		ref: P,
+		id: N,
+		name: v,
+		min: y,
+		max: b,
+		step: x == null ? void 0 : String(x),
+		format: S,
+		placeholder: C,
+		size: T || void 0,
+		"aria-label": D || (typeof f == "string" ? f : void 0),
+		"aria-describedby": I || L,
+		"aria-invalid": h ? "true" : void 0,
+		disabled: w ? "" : void 0,
+		required: p ? "" : void 0,
+		className: O || void 0,
+		...A
+	});
+	return F ? R : /* @__PURE__ */ c("div", {
+		className: `field${k ? ` ${k}` : ""}`,
+		children: [
+			f && /* @__PURE__ */ c("label", {
+				className: "label",
+				htmlFor: N,
+				children: [
+					f,
+					p && /* @__PURE__ */ s(r, {}),
+					g && /* @__PURE__ */ s(n, {
+						label: _,
+						children: g
+					})
+				]
+			}),
+			R,
+			h && /* @__PURE__ */ s("div", {
+				className: "field-error",
+				id: I,
+				children: h
+			}),
+			!h && m && /* @__PURE__ */ s("div", {
+				className: "field-hint",
+				id: L,
+				children: m
+			})
+		]
+	});
+});
+//#endregion
+export { d as default };

package/dist/components/AppTimeline.js

@@ -0,0 +1,102 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/AppTimeline.jsx
+var a = ["feed", "progress"], o = ["vertical", "horizontal"], s = [
+	"neutral",
+	"success",
+	"warning",
+	"danger",
+	"info"
+], c = {
+	done: "check",
+	current: "clock",
+	"on-hold": "lock",
+	rejected: "x",
+	cancelled: "minus",
+	skipped: "arrow-right",
+	upcoming: null
+};
+function l({ items: l = [], variant: u = "feed", orientation: d = "vertical", size: f, className: p = "", style: m, ...h }) {
+	t("AppTimeline", h), e("AppTimeline", "variant", u, a), e("AppTimeline", "orientation", d, o);
+	for (let t of l) e("AppTimeline", "items[].tone", t.tone, s), u === "progress" && e("AppTimeline", "items[].status", t.status, Object.keys(c));
+	let g = u === "progress", _ = `timeline${g ? " timeline--progress" : ""}${d === "horizontal" ? " timeline--horizontal" : ""}${p ? ` ${p}` : ""}`, v = typeof f == "number" && f > 0 ? f : void 0, y = v ? Math.round(v * .54) : g ? 13 : 12;
+	return /* @__PURE__ */ r("ol", {
+		className: _,
+		style: v ? {
+			...m,
+			"--wui-timeline-dot": `${v}px`
+		} : m,
+		...h,
+		children: l.map((e, t) => {
+			let a = g ? e.status : void 0, o = a ? ` is-${a}` : "", s = e.tone && e.tone !== "neutral" ? ` ${e.tone}` : "", l = g ? e.icon ?? (a ? c[a] : void 0) : e.icon || "circle";
+			return /* @__PURE__ */ i("li", {
+				className: `timeline-item${o}${s}`,
+				children: [/* @__PURE__ */ r("span", {
+					className: "timeline-dot",
+					children: l ? /* @__PURE__ */ r(n, {
+						name: l,
+						size: y
+					}) : null
+				}), /* @__PURE__ */ i("div", {
+					className: "timeline-body",
+					children: [
+						g ? /* @__PURE__ */ i("div", {
+							className: "timeline-head",
+							children: [/* @__PURE__ */ r("div", {
+								className: "timeline-title",
+								children: e.title
+							}), (e.at || e.time) && /* @__PURE__ */ i("span", {
+								className: "timeline-when",
+								children: [e.at && /* @__PURE__ */ r("span", {
+									className: "timeline-at",
+									children: e.at
+								}), e.time && /* @__PURE__ */ r("span", {
+									className: "timeline-time",
+									children: e.time
+								})]
+							})]
+						}) : /* @__PURE__ */ r("div", {
+							className: "timeline-title",
+							children: e.title
+						}),
+						e.description && /* @__PURE__ */ r("div", {
+							className: "timeline-desc",
+							children: e.description
+						}),
+						!g && (e.at || e.time || e.by) && /* @__PURE__ */ i("div", {
+							className: "timeline-meta",
+							children: [(e.at || e.time) && /* @__PURE__ */ i("span", {
+								className: "timeline-when",
+								children: [e.at && /* @__PURE__ */ r("span", {
+									className: "timeline-at",
+									children: e.at
+								}), e.time && /* @__PURE__ */ r("span", {
+									className: "timeline-time",
+									children: e.time
+								})]
+							}), e.by && /* @__PURE__ */ r("span", {
+								className: "timeline-by",
+								children: e.by
+							})]
+						}),
+						g && e.by && /* @__PURE__ */ r("div", {
+							className: "timeline-meta",
+							children: /* @__PURE__ */ r("span", {
+								className: "timeline-by",
+								children: e.by
+							})
+						}),
+						e.note && /* @__PURE__ */ r("p", {
+							className: "timeline-note",
+							children: e.note
+						})
+					]
+				})]
+			}, e.key ?? `${e.at}-${t}`);
+		})
+	});
+}
+//#endregion
+export { l as default };