haze-ui 1.26.0 → 1.28.0

package/dist/components/DataTable/summary.js

@@ -0,0 +1,17 @@
+"use client";
+//#region src/lib/components/DataTable/summary.ts
+function e(e, t) {
+	return e.map((e) => e.getValue(t)).filter((e) => typeof e == "number");
+}
+function t(t, n) {
+	return e(t, n).reduce((e, t) => e + t, 0);
+}
+function n(n, r) {
+	let i = e(n, r);
+	if (i.length !== 0) return t(n, r) / i.length;
+}
+function r(e) {
+	return e.length;
+}
+//#endregion
+export { n as dataTableAvg, r as dataTableCount, t as dataTableSum };

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,22 +1,40 @@
 "use client";
-import e from "./DateRangePickerCore.js";
-import { jsx as t } from "react/jsx-runtime";
-import { useControl as n } from "react-use-control";
+import { useStrings as e } from "../LocaleProvider/useStrings.js";
+import t from "./DateRangePickerCore.js";
+import { commonRangePresets as n } from "./presets.js";
+import { jsx as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
 //#region src/lib/components/DateRangePicker/DateRangePicker.tsx
-function r({ startDate: r, endDate: i, onStartChange: a, onEndChange: o, separator: s, className: c }) {
-	let [l, u] = n(r, ""), [d, f] = n(i, "");
-	return /* @__PURE__ */ t(e, {
-		startDate: l,
-		endDate: d,
+function a(e, t) {
+	if (e === void 0) return;
+	let r = e === "common" ? ["common"] : e, i = [];
+	for (let e of r) e === "common" ? i.push(...n(t)) : i.push(e);
+	return i;
+}
+function o({ startDate: n, endDate: o, onStartChange: s, onEndChange: c, separator: l, months: u, disabledDate: d, presets: f, className: p }) {
+	let [m, h] = i(n, ""), [g, _] = i(o, ""), v = e("dateRangePicker");
+	return /* @__PURE__ */ r(t, {
+		startDate: m,
+		endDate: g,
 		onStartChange: (e) => {
-			u(e), a?.(e);
+			h(e), s?.(e);
 		},
 		onEndChange: (e) => {
-			f(e), o?.(e);
+			_(e), c?.(e);
 		},
-		separator: s,
-		className: c
+		separator: l,
+		months: u,
+		disabledDate: d,
+		presets: a(f, {
+			today: v.presetToday,
+			yesterday: v.presetYesterday,
+			last7Days: v.presetLast7Days,
+			last30Days: v.presetLast30Days,
+			thisMonth: v.presetThisMonth,
+			lastMonth: v.presetLastMonth
+		}),
+		className: p
 	});
 }
 //#endregion
-export { r as default };
+export { o as default };

package/dist/components/DateRangePicker/DateRangePickerCore.js

@@ -2,35 +2,67 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import n from "../Calendar/Calendar.js";
 /* empty css                              */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/lib/components/DateRangePicker/DateRangePickerCore.tsx
-var i = "haze-DateRangePickerCore__container", a = "haze-DateRangePickerCore__input", o = "haze-DateRangePickerCore__sep";
-function s({ startDate: s, endDate: c, onStartChange: l, onEndChange: u, separator: d = "–", className: f }) {
-	let p = t("dateRangePicker");
-	return /* @__PURE__ */ r("div", {
-		className: e([i, f]),
-		children: [
-			/* @__PURE__ */ n("input", {
-				type: "date",
-				"aria-label": p.startDate,
-				value: s,
-				onChange: (e) => l(e.target.value),
-				className: e([a])
-			}),
-			/* @__PURE__ */ n("span", {
-				className: e([o]),
-				children: d
-			}),
-			/* @__PURE__ */ n("input", {
-				type: "date",
-				"aria-label": p.endDate,
-				value: c,
-				onChange: (e) => u(e.target.value),
-				className: e([a])
-			})
-		]
+var o = "haze-DateRangePickerCore__container", s = "haze-DateRangePickerCore__stackedContainer", c = "haze-DateRangePickerCore__inputsRow", l = "haze-DateRangePickerCore__panel", u = "haze-DateRangePickerCore__input", d = "haze-DateRangePickerCore__sep", f = "haze-DateRangePickerCore__presetList", p = "haze-DateRangePickerCore__presetRow";
+function m({ startDate: m, endDate: h, onStartChange: g, onEndChange: _, separator: v = "–", months: y = 1, disabledDate: b, presets: x, className: S }) {
+	let C = t("dateRangePicker"), w = (e) => {
+		!m || h ? (g(e), _("")) : e < m ? g(e) : _(e);
+	}, T = x !== void 0 && x.length > 0, E = /* @__PURE__ */ a(r, { children: [
+		/* @__PURE__ */ i("input", {
+			type: "date",
+			"aria-label": C.startDate,
+			value: m,
+			onChange: (e) => g(e.target.value),
+			className: e([u])
+		}),
+		/* @__PURE__ */ i("span", {
+			className: e([d]),
+			children: v
+		}),
+		/* @__PURE__ */ i("input", {
+			type: "date",
+			"aria-label": C.endDate,
+			value: h,
+			onChange: (e) => _(e.target.value),
+			className: e([u])
+		})
+	] });
+	return y !== 2 && !T ? /* @__PURE__ */ i("div", {
+		className: e([o, S]),
+		children: E
+	}) : /* @__PURE__ */ a("div", {
+		className: e([
+			o,
+			s,
+			S
+		]),
+		children: [/* @__PURE__ */ i("div", {
+			className: e([c]),
+			children: E
+		}), /* @__PURE__ */ a("div", {
+			className: e([l]),
+			children: [T && /* @__PURE__ */ i("div", {
+				className: e([f]),
+				children: x.map((t) => /* @__PURE__ */ i("button", {
+					type: "button",
+					onClick: () => {
+						g(t.range[0]), _(t.range[1]);
+					},
+					className: e([p]),
+					children: t.label
+				}, `${t.label}:${t.range.join("~")}`))
+			}), y === 2 && /* @__PURE__ */ i(n, {
+				months: 2,
+				rangeStart: m,
+				rangeEnd: h,
+				disabledDate: b,
+				onSelect: w
+			})]
+		})]
 	});
 }
 //#endregion
-export { s as default };
+export { m as default };

package/dist/components/DateRangePicker/presets.js

@@ -0,0 +1,43 @@
+"use client";
+import { addMonths as e, formatDate as t, getDaysInMonth as n } from "../Calendar/date.js";
+//#region src/lib/components/DateRangePicker/presets.ts
+function r(e, t) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t);
+}
+function i(e) {
+	return t(e.getFullYear(), e.getMonth(), e.getDate());
+}
+function a(e, r) {
+	return [t(e, r, 1), t(e, r, n(e, r))];
+}
+function o(t, n = /* @__PURE__ */ new Date()) {
+	let o = (e) => i(r(n, e)), s = a(n.getFullYear(), n.getMonth()), c = e(n.getFullYear(), n.getMonth(), -1), l = a(c.year, c.month);
+	return [
+		{
+			label: t.today,
+			range: [o(0), o(0)]
+		},
+		{
+			label: t.yesterday,
+			range: [o(-1), o(-1)]
+		},
+		{
+			label: t.last7Days,
+			range: [o(-6), o(0)]
+		},
+		{
+			label: t.last30Days,
+			range: [o(-29), o(0)]
+		},
+		{
+			label: t.thisMonth,
+			range: s
+		},
+		{
+			label: t.lastMonth,
+			range: l
+		}
+	];
+}
+//#endregion
+export { o as commonRangePresets };

package/dist/components/Datepicker/Datepicker.js

@@ -3,19 +3,24 @@ import e from "./DatepickerCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/Datepicker/Datepicker.tsx
-function r({ value: r, open: i, min: a, max: o, locale: s, weekStartsOn: c, placeholder: l, className: u }) {
-	let [d, f] = n(r, ""), [p, m] = n(i, !1);
+function r({ value: r, open: i, picker: a, min: o, max: s, disabledDate: c, presets: l, showTime: u, locale: d, weekStartsOn: f, placeholder: p, className: m, ref: h }) {
+	let [g, _] = n(r, ""), [v, y] = n(i, !1);
 	return /* @__PURE__ */ t(e, {
-		value: d,
-		onChange: f,
-		open: p,
-		onOpenChange: m,
-		min: a,
-		max: o,
-		locale: s,
-		weekStartsOn: c,
-		placeholder: l,
-		className: u
+		ref: h,
+		value: g,
+		onChange: _,
+		open: v,
+		onOpenChange: y,
+		picker: a,
+		min: o,
+		max: s,
+		disabledDate: c,
+		presets: l,
+		showTime: u,
+		locale: d,
+		weekStartsOn: f,
+		placeholder: p,
+		className: m
 	});
 }
 //#endregion

package/dist/components/Datepicker/DatepickerCore.js

@@ -1,54 +1,88 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
-import r from "../Calendar/Calendar.js";
+import { mergeRefs as t } from "../../utils/refs.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { FloatingPanel as r, useFloating as i } from "../../utils/floating.js";
+import a from "../Calendar/Calendar.js";
+import { formatDateTimeValue as o, splitDateTimeValue as s } from "./datetime.js";
 /* empty css                         */
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useCallback as o, useId as s, useRef as c } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as u, useId as d, useRef as f, useState as p } from "react";
 //#region src/lib/components/Datepicker/DatepickerCore.tsx
-var l = "haze-DatepickerCore__wrapper", u = "haze-DatepickerCore__input", d = "haze-DatepickerCore__dropdown";
-function f({ value: f, onChange: p, open: m, onOpenChange: h, min: g, max: _, locale: v, weekStartsOn: y, placeholder: b = "Select date", className: x }) {
-	let S = c(null), C = c(null), w = s(), T = o((e) => h(typeof e == "function" ? e(m) : e), [h, m]), E = n({
-		open: m,
-		setOpen: T,
-		triggerRef: S,
-		panelRef: C,
+var m = "haze-DatepickerCore__wrapper", h = "haze-DatepickerCore__input", g = "haze-DatepickerCore__dropdown", _ = "haze-DatepickerCore__presetList", v = "haze-DatepickerCore__presetRow", y = "haze-DatepickerCore__timeRow", b = "haze-DatepickerCore__timeLabel", x = "haze-DatepickerCore__timeInput";
+function S({ value: S, onChange: C, open: w, onOpenChange: T, picker: E, min: D, max: O, disabledDate: k, presets: A, showTime: j, locale: M, weekStartsOn: N, placeholder: P = "Select date", className: F, ref: I }) {
+	let L = n("datepicker"), R = f(null), z = u((e) => t(R, I)(e), [R, I]), B = f(null), V = d(), [H, U] = p("00:00"), W = j === !0 && (E ?? "date") === "date", G = W ? s(S) : null, K = W ? G?.date ?? "" : S, q = G?.time ?? H, J = u((e) => T(typeof e == "function" ? e(w) : e), [T, w]), Y = i({
+		open: w,
+		setOpen: J,
+		triggerRef: R,
+		panelRef: B,
 		animated: !0
 	});
-	return /* @__PURE__ */ a("div", {
-		className: e([l, x]),
-		children: [/* @__PURE__ */ i("input", {
-			ref: S,
+	return /* @__PURE__ */ l("div", {
+		className: e([m, F]),
+		children: [/* @__PURE__ */ c("input", {
+			ref: z,
 			readOnly: !0,
-			style: E.triggerStyle,
-			className: u,
-			value: f,
-			placeholder: b,
+			style: Y.triggerStyle,
+			className: h,
+			value: S,
+			placeholder: P,
 			role: "combobox",
 			"aria-haspopup": "dialog",
-			"aria-expanded": m,
-			"aria-controls": w,
-			onPointerDown: E.onTriggerPointerDown,
-			onClick: E.onTriggerClick
-		}), /* @__PURE__ */ i(t, {
-			ref: C,
-			behavior: E,
+			"aria-expanded": w,
+			"aria-controls": V,
+			onPointerDown: Y.onTriggerPointerDown,
+			onClick: Y.onTriggerClick
+		}), /* @__PURE__ */ l(r, {
+			ref: B,
+			behavior: Y,
 			placement: "bottom",
-			visualClass: d,
-			id: w,
-			children: /* @__PURE__ */ i(r, {
-				value: f,
-				min: g,
-				max: _,
-				locale: v,
-				weekStartsOn: y,
-				onSelect: (e) => {
-					p(e), h(!1);
-				}
-			})
+			visualClass: g,
+			id: V,
+			children: [
+				A && A.length > 0 && /* @__PURE__ */ c("div", {
+					className: e([_]),
+					children: A.map((t) => /* @__PURE__ */ c("button", {
+						type: "button",
+						onClick: () => {
+							C(t.value), T(!1);
+						},
+						className: e([v]),
+						children: t.label
+					}, `${t.label}:${t.value}`))
+				}),
+				/* @__PURE__ */ c(a, {
+					picker: E,
+					value: K,
+					min: D,
+					max: O,
+					disabledDate: k,
+					locale: M,
+					weekStartsOn: N,
+					onSelect: (e) => {
+						W ? C(o(e, q)) : (C(e), T(!1));
+					}
+				}),
+				W && /* @__PURE__ */ l("div", {
+					className: e([y]),
+					children: [/* @__PURE__ */ c("span", {
+						className: e([b]),
+						children: L.time
+					}), /* @__PURE__ */ c("input", {
+						type: "time",
+						"aria-label": L.time,
+						value: q,
+						onChange: (e) => {
+							let t = e.target.value || "00:00";
+							U(t), G?.date && C(o(G.date, t));
+						},
+						className: e([x])
+					})]
+				})
+			]
 		})]
 	});
 }
 //#endregion
-export { f as default };
+export { S as default };

package/dist/components/Datepicker/datetime.js

@@ -0,0 +1,23 @@
+"use client";
+import { parseCivilDate as e } from "../Calendar/date.js";
+//#region src/lib/components/Datepicker/datetime.ts
+var t = /^(\d{4}-\d{2}-\d{2}) (2[0-3]|[01]\d):([0-5]\d)$/;
+function n(n) {
+	let r = t.exec(n);
+	if (r) {
+		let t = r[1];
+		return e(t) ? {
+			date: t,
+			time: `${r[2]}:${r[3]}`
+		} : null;
+	}
+	return e(n) ? {
+		date: n,
+		time: null
+	} : null;
+}
+function r(e, t) {
+	return `${e} ${t}`;
+}
+//#endregion
+export { r as formatDateTimeValue, n as splitDateTimeValue };

package/dist/components/Descriptions/Descriptions.js

@@ -0,0 +1,46 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                       */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/Descriptions/Descriptions.tsx
+var r = "haze-Descriptions__root", i = "haze-Descriptions__titleStyle", a = "haze-Descriptions__listDefault", o = "haze-Descriptions__listBordered", s = "haze-Descriptions__group", c = "haze-Descriptions__labelCell", l = "haze-Descriptions__valueCell", u = "haze-Descriptions__labelCellBordered", d = "haze-Descriptions__valueCellBordered", f = "haze-Descriptions__sizeSm", p = "haze-Descriptions__sizeMd";
+function m({ items: m, columns: h = 3, bordered: g = !1, size: _ = "md", title: v, className: y, style: b, ...x }) {
+	let S = Math.max(1, Math.floor(h)), C = _ === "sm" ? f : p;
+	return /* @__PURE__ */ n("div", {
+		style: b,
+		...x,
+		className: e([r, y]),
+		children: [v && /* @__PURE__ */ t("div", {
+			className: e([i]),
+			children: v
+		}), /* @__PURE__ */ t("dl", {
+			style: { gridTemplateColumns: `repeat(${S}, auto minmax(0, 1fr))` },
+			className: e([g ? o : a]),
+			children: m.map(({ key: r, label: i, children: a, span: o = 1 }) => {
+				let f = Math.min(Math.max(o, 1), S);
+				return /* @__PURE__ */ n("div", {
+					className: e([s]),
+					children: [/* @__PURE__ */ t("dt", {
+						className: e([
+							c,
+							C,
+							g && u
+						]),
+						children: i
+					}), /* @__PURE__ */ t("dd", {
+						style: { gridColumn: `span ${f * 2 - 1}` },
+						className: e([
+							l,
+							C,
+							g && d
+						]),
+						children: a
+					})]
+				}, r);
+			})
+		})]
+	});
+}
+//#endregion
+export { m as default };

package/dist/components/Descriptions/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./Descriptions.js";
+export { e as Descriptions };

package/dist/components/Dialog/Dialog.js

@@ -1,52 +1,76 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { useFocusScope as t } from "../../utils/focus-scope.js";
-import { whenExitSettles as n } from "../../utils/presence.js";
+import { whenExitSettles as t } from "../../utils/presence.js";
+import { useFocusScope as n } from "../../utils/focus-scope.js";
+import { useViewTransitionFlip as r } from "../../utils/view-transition.js";
 /* empty css                 */
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useCallback as a, useEffect as o, useId as s, useRef as c } from "react";
-import { useControl as l } from "react-use-control";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as o, useEffect as s, useId as c, useImperativeHandle as l, useRef as u } from "react";
+import { useControl as d } from "react-use-control";
 //#region src/lib/components/Dialog/Dialog.tsx
-var u = "haze-Dialog__overlay", d = "haze-Dialog__titleText";
-function f({ open: f, onClose: p, title: m, className: h, children: g }) {
-	let [_, v] = l(f, !1), y = c(null), b = t({
-		enabled: _,
+var f = "haze-Dialog__overlay", p = "haze-Dialog__titleText";
+function m({ open: m, onClose: h, title: g, viewTransition: _ = !1, classNames: v, className: y, children: b, ref: x }) {
+	let [S, C] = d(m, !1), w = r(_, C), T = u(null);
+	s(() => {
+		if (!S) return;
+		let e = document.activeElement;
+		T.current = e instanceof HTMLElement ? e : null;
+	}, [S]);
+	let E = u(null), D = n({
+		enabled: S,
 		trapped: !1
-	}), x = `haze-dialog-title-${s()}`, S = a((e) => {
-		y.current = e, b(e);
-	}, [b]);
-	return o(() => {
-		let e = y.current;
+	}), O = `haze-dialog-title-${c()}`;
+	l(x, () => ({
+		open: () => {
+			w(!0);
+		},
+		close: () => {
+			w(!1);
+		},
+		focusTrigger: () => {
+			let e = T.current;
+			e?.isConnected && e.focus();
+		}
+	}), [w]);
+	let k = o((e) => {
+		E.current = e, D(e);
+	}, [D]);
+	return s(() => {
+		let e = E.current;
 		if (e) {
-			if (_ && !e.open) e.showModal();
-			else if (!_ && e.open) {
-				let t = n(e), r = () => {
+			if (S && !e.open) e.showModal();
+			else if (!S && e.open) {
+				let n = t(e), r = () => {
 					e.getAttribute("data-state") === "closed" && e.close();
 				};
-				t ? t.then(r) : r();
+				n ? n.then(r) : r();
 			}
 		}
-	}, [_]), /* @__PURE__ */ i("dialog", {
-		ref: S,
-		"data-state": _ ? "open" : "closed",
-		"aria-labelledby": m === void 0 ? void 0 : x,
+	}, [S]), /* @__PURE__ */ a("dialog", {
+		ref: k,
+		"data-state": S ? "open" : "closed",
+		"aria-labelledby": g === void 0 ? void 0 : O,
 		onClose: () => {
-			v(!1), p?.();
+			C(!1), h?.();
 		},
 		onCancel: (e) => {
-			e.preventDefault(), v(!1);
+			e.preventDefault(), w(!1);
 		},
 		onClick: (e) => {
-			e.target === y.current && v(!1);
+			e.target === E.current && w(!1);
 		},
-		className: e([u, h]),
-		children: [m !== void 0 && /* @__PURE__ */ r("h2", {
-			id: x,
-			className: e([d]),
-			children: m
-		}), g]
+		className: e([
+			f,
+			y,
+			v?.root
+		]),
+		children: [g !== void 0 && /* @__PURE__ */ i("h2", {
+			id: O,
+			className: e([p, v?.header]),
+			children: g
+		}), b]
 	});
 }
 //#endregion
-export { f as default };
+export { m as default };

package/dist/components/DiffViewer/DiffViewer.js

@@ -1,12 +1,13 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                     */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useMemo as r } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useMemo as i } from "react";
 //#region src/lib/components/DiffViewer/DiffViewer.tsx
-var i = "haze-DiffViewer__wrapper", a = "haze-DiffViewer__header", o = "haze-DiffViewer__body", s = "haze-DiffViewer__line", c = "haze-DiffViewer__lineNum", l = "haze-DiffViewer__lineContent", u = "haze-DiffViewer__added", d = "haze-DiffViewer__removed", f = "haze-DiffViewer__addedPrefix", p = "haze-DiffViewer__removedPrefix";
-function m(e, t) {
+var a = "haze-DiffViewer__wrapper", o = "haze-DiffViewer__header", s = "haze-DiffViewer__body", c = "haze-DiffViewer__line", l = "haze-DiffViewer__lineNum", u = "haze-DiffViewer__lineContent", d = "haze-DiffViewer__added", f = "haze-DiffViewer__removed", p = "haze-DiffViewer__addedPrefix", m = "haze-DiffViewer__removedPrefix";
+function h(e, t) {
 	let n = e.split("\n"), r = t.split("\n"), i = [], a = 0, o = 0;
 	for (; a < n.length || o < r.length;) {
 		let e = n[a], t = r[o];
@@ -35,42 +36,42 @@ function m(e, t) {
 	}
 	return i;
 }
-function h({ oldValue: s, newValue: h, className: _ }) {
-	let v = r(() => m(s, h), [s, h]);
-	return /* @__PURE__ */ n("div", {
-		className: e([i, _]),
-		children: [/* @__PURE__ */ t("div", {
-			className: e([a]),
-			children: "Diff"
-		}), /* @__PURE__ */ t("div", {
+function g({ oldValue: c, newValue: g, className: v }) {
+	let y = t("diffViewer"), b = i(() => h(c, g), [c, g]);
+	return /* @__PURE__ */ r("div", {
+		className: e([a, v]),
+		children: [/* @__PURE__ */ n("div", {
 			className: e([o]),
-			children: v.map((r, i) => /* @__PURE__ */ n("div", {
+			children: y.header
+		}), /* @__PURE__ */ n("div", {
+			className: e([s]),
+			children: b.map((t, i) => /* @__PURE__ */ r("div", {
 				className: e([
-					g,
-					r.type === "added" && u,
-					r.type === "removed" && d
+					_,
+					t.type === "added" && d,
+					t.type === "removed" && f
 				]),
 				children: [
-					/* @__PURE__ */ t("span", {
-						className: e([c]),
-						children: r.oldLine ?? ""
-					}),
-					/* @__PURE__ */ t("span", {
-						className: e([c]),
-						children: r.newLine ?? ""
+					/* @__PURE__ */ n("span", {
+						className: e([l]),
+						children: t.oldLine ?? ""
 					}),
 					/* @__PURE__ */ n("span", {
 						className: e([l]),
+						children: t.newLine ?? ""
+					}),
+					/* @__PURE__ */ r("span", {
+						className: e([u]),
 						children: [
-							r.type === "added" && /* @__PURE__ */ t("span", {
-								className: e([f]),
+							t.type === "added" && /* @__PURE__ */ n("span", {
+								className: e([p]),
 								children: "+ "
 							}),
-							r.type === "removed" && /* @__PURE__ */ t("span", {
-								className: e([p]),
+							t.type === "removed" && /* @__PURE__ */ n("span", {
+								className: e([m]),
 								children: "- "
 							}),
-							r.content
+							t.content
 						]
 					})
 				]
@@ -78,6 +79,6 @@ function h({ oldValue: s, newValue: h, className: _ }) {
 		})]
 	});
 }
-var g = s;
+var _ = c;
 //#endregion
-export { h as default };
+export { g as default };