wimui 0.15.0 → 0.16.0

package/dist/components/form/RichTextEditor/RichTextEditor.js

@@ -1,226 +1,26 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
-import { Button as t } from "../Button/Button.js";
-import { FieldTemplate as n } from "../FieldTemplate/FieldTemplate.js";
-import { Input as r } from "../Input/Input.js";
-import { Dialog as i, DialogClose as a, DialogContent as ee, DialogFooter as te, DialogHeader as ne, DialogTitle as re } from "../../overlay/Dialog/Dialog.js";
-import { createLink as ie, getActiveFormats as ae, getEditorRange as oe, removeAllFormatting as se, removeLink as ce, setBlock as o, toggleInline as s, toggleList as c } from "./commands.js";
-import l from "./rich-text-editor.module.js";
-import u from "react";
-import d from "classnames";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import t from "../../../icon/bold.js";
+import n from "../../../icon/eraser.js";
+import r from "../../../icon/italic.js";
+import i from "../../../icon/link.js";
+import a from "../../../icon/list-ordered.js";
+import ee from "../../../icon/list.js";
+import te from "../../../icon/strikethrough.js";
+import ne from "../../../icon/underline.js";
+import re from "../../../icon/unlink.js";
+import { Icon as o } from "../../media/Icon/Icon.js";
+import { Button as s } from "../Button/Button.js";
+import { FieldTemplate as c } from "../FieldTemplate/FieldTemplate.js";
+import { Input as ie } from "../Input/Input.js";
+import { Dialog as ae, DialogClose as oe, DialogContent as se, DialogFooter as ce, DialogHeader as le, DialogTitle as ue } from "../../overlay/Dialog/Dialog.js";
+import { createLink as de, getActiveFormats as fe, getEditorRange as pe, removeAllFormatting as me, removeLink as he, setBlock as l, toggleInline as u, toggleList as ge } from "./commands.js";
+import d from "./rich-text-editor.module.js";
+import f from "react";
+import _e from "classnames";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/form/RichTextEditor/RichTextEditor.tsx
-var le = () => /* @__PURE__ */ p("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2.5",
-	"aria-hidden": "true",
-	children: [/* @__PURE__ */ f("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }), /* @__PURE__ */ f("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })]
-}), ue = () => /* @__PURE__ */ p("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2.5",
-	"aria-hidden": "true",
-	children: [
-		/* @__PURE__ */ f("line", {
-			x1: "19",
-			y1: "4",
-			x2: "10",
-			y2: "4"
-		}),
-		/* @__PURE__ */ f("line", {
-			x1: "14",
-			y1: "20",
-			x2: "5",
-			y2: "20"
-		}),
-		/* @__PURE__ */ f("line", {
-			x1: "15",
-			y1: "4",
-			x2: "9",
-			y2: "20"
-		})
-	]
-}), de = () => /* @__PURE__ */ p("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2.5",
-	"aria-hidden": "true",
-	children: [/* @__PURE__ */ f("path", { d: "M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" }), /* @__PURE__ */ f("line", {
-		x1: "4",
-		y1: "21",
-		x2: "20",
-		y2: "21"
-	})]
-}), fe = () => /* @__PURE__ */ p("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2.5",
-	"aria-hidden": "true",
-	children: [/* @__PURE__ */ f("path", { d: "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" }), /* @__PURE__ */ f("line", {
-		x1: "4",
-		y1: "12",
-		x2: "20",
-		y2: "12"
-	})]
-}), pe = () => /* @__PURE__ */ p("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	"aria-hidden": "true",
-	children: [
-		/* @__PURE__ */ f("line", {
-			x1: "9",
-			y1: "6",
-			x2: "20",
-			y2: "6"
-		}),
-		/* @__PURE__ */ f("line", {
-			x1: "9",
-			y1: "12",
-			x2: "20",
-			y2: "12"
-		}),
-		/* @__PURE__ */ f("line", {
-			x1: "9",
-			y1: "18",
-			x2: "20",
-			y2: "18"
-		}),
-		/* @__PURE__ */ f("circle", {
-			cx: "4",
-			cy: "6",
-			r: "1.5",
-			fill: "currentColor",
-			stroke: "none"
-		}),
-		/* @__PURE__ */ f("circle", {
-			cx: "4",
-			cy: "12",
-			r: "1.5",
-			fill: "currentColor",
-			stroke: "none"
-		}),
-		/* @__PURE__ */ f("circle", {
-			cx: "4",
-			cy: "18",
-			r: "1.5",
-			fill: "currentColor",
-			stroke: "none"
-		})
-	]
-}), me = () => /* @__PURE__ */ p("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	"aria-hidden": "true",
-	children: [
-		/* @__PURE__ */ f("line", {
-			x1: "10",
-			y1: "6",
-			x2: "21",
-			y2: "6"
-		}),
-		/* @__PURE__ */ f("line", {
-			x1: "10",
-			y1: "12",
-			x2: "21",
-			y2: "12"
-		}),
-		/* @__PURE__ */ f("line", {
-			x1: "10",
-			y1: "18",
-			x2: "21",
-			y2: "18"
-		}),
-		/* @__PURE__ */ f("text", {
-			x: "1",
-			y: "8",
-			fontSize: "7",
-			fill: "currentColor",
-			stroke: "none",
-			fontWeight: "bold",
-			children: "1."
-		}),
-		/* @__PURE__ */ f("text", {
-			x: "1",
-			y: "14",
-			fontSize: "7",
-			fill: "currentColor",
-			stroke: "none",
-			fontWeight: "bold",
-			children: "2."
-		}),
-		/* @__PURE__ */ f("text", {
-			x: "1",
-			y: "20",
-			fontSize: "7",
-			fill: "currentColor",
-			stroke: "none",
-			fontWeight: "bold",
-			children: "3."
-		})
-	]
-}), he = () => /* @__PURE__ */ p("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	"aria-hidden": "true",
-	children: [/* @__PURE__ */ f("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }), /* @__PURE__ */ f("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })]
-}), ge = () => /* @__PURE__ */ p("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	"aria-hidden": "true",
-	children: [
-		/* @__PURE__ */ f("path", { d: "M18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.72" }),
-		/* @__PURE__ */ f("path", { d: "M5.17 11.75l-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71" }),
-		/* @__PURE__ */ f("line", {
-			x1: "8",
-			y1: "2",
-			x2: "8",
-			y2: "5"
-		}),
-		/* @__PURE__ */ f("line", {
-			x1: "2",
-			y1: "8",
-			x2: "5",
-			y2: "8"
-		}),
-		/* @__PURE__ */ f("line", {
-			x1: "16",
-			y1: "19",
-			x2: "16",
-			y2: "22"
-		}),
-		/* @__PURE__ */ f("line", {
-			x1: "19",
-			y1: "16",
-			x2: "22",
-			y2: "16"
-		})
-	]
-}), _e = () => /* @__PURE__ */ p("svg", {
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	"aria-hidden": "true",
-	children: [/* @__PURE__ */ f("path", { d: "M20 20H7L3 16l10-10 7 7-3.5 3.5" }), /* @__PURE__ */ f("line", {
-		x1: "6",
-		y1: "7",
-		x2: "17",
-		y2: "18"
-	})]
-}), ve = [
+var ve = [
 	"bold",
 	"italic",
 	"underline",
@@ -237,9 +37,9 @@ var le = () => /* @__PURE__ */ p("svg", {
 	"unlink",
 	"separator",
 	"removeFormat"
-], m = u.memo(({ onClick: e, active: t, disabled: n, title: r, children: i }) => /* @__PURE__ */ f("button", {
+], h = f.memo(({ onClick: e, active: t, disabled: n, title: r, children: i }) => /* @__PURE__ */ p("button", {
 	type: "button",
-	className: d(l.toolbarBtn, t && l.active),
+	className: _e(d.toolbarBtn, t && d.active),
 	onClick: e,
 	disabled: n,
 	title: r,
@@ -248,294 +48,321 @@ var le = () => /* @__PURE__ */ p("svg", {
 	tabIndex: -1,
 	children: i
 }));
-m.displayName = "ToolbarButton";
-var h = ({ value: h, defaultValue: ye = "", onChange: g, placeholder: be, disabled: xe, intent: Se = "default", variant: Ce = "outline", fullWidth: _ = !1, width: v, minHeight: y = 200, label: b, error: x, required: S, layout: we, className: Te, id: Ee, toolbar: De = ve, labels: Oe = {}, "aria-label": ke, "aria-labelledby": C }) => {
-	let { t: w } = e("components"), { bold: T = w("a11y.rte_bold"), italic: E = w("a11y.rte_italic"), underline: D = w("a11y.rte_underline"), strikethrough: O = w("a11y.rte_strikethrough"), h1: k = w("a11y.rte_h1"), h2: A = w("a11y.rte_h2"), h3: j = w("a11y.rte_h3"), ul: M = w("a11y.rte_ul"), ol: Ae = w("a11y.rte_ol"), link: N = w("a11y.rte_link"), unlink: je = w("a11y.rte_unlink"), removeFormat: Me = w("a11y.rte_remove_format"), toolbar: Ne = w("a11y.rte_toolbar"), linkPrompt: Pe = w("a11y.rte_link_prompt"), linkApply: Fe = w("a11y.rte_link_apply"), linkCancel: Ie = w("a11y.rte_link_cancel") } = Oe, P = u.useRef(null), F = u.useRef(!1), I = u.useRef(h ?? ye), [L, Le] = u.useState(/* @__PURE__ */ new Set()), Re = u.useId(), R = Ee || `wim-rte-${Re}`, ze = x ? `${R}-error` : void 0, Be = b ? `${R}-label` : void 0, z = xe, Ve = x ? "danger" : Se, He = typeof v == "string" && [
+h.displayName = "ToolbarButton";
+var g = ({ value: g, defaultValue: ye = "", onChange: _, placeholder: be, disabled: xe, intent: Se = "default", variant: Ce = "outline", fullWidth: v = !1, width: y, minHeight: b = 200, label: x, error: S, required: C, layout: we, className: Te, id: Ee, toolbar: De = ve, labels: Oe = {}, "aria-label": ke, "aria-labelledby": w }) => {
+	let { t: T } = e("components"), { bold: E = T("a11y.rte_bold"), italic: D = T("a11y.rte_italic"), underline: O = T("a11y.rte_underline"), strikethrough: k = T("a11y.rte_strikethrough"), h1: A = T("a11y.rte_h1"), h2: j = T("a11y.rte_h2"), h3: Ae = T("a11y.rte_h3"), ul: je = T("a11y.rte_ul"), ol: Me = T("a11y.rte_ol"), link: M = T("a11y.rte_link"), unlink: Ne = T("a11y.rte_unlink"), removeFormat: Pe = T("a11y.rte_remove_format"), toolbar: Fe = T("a11y.rte_toolbar"), linkPrompt: Ie = T("a11y.rte_link_prompt"), linkApply: Le = T("a11y.rte_link_apply"), linkCancel: Re = T("a11y.rte_link_cancel") } = Oe, N = f.useRef(null), P = f.useRef(!1), F = f.useRef(g ?? ye), [I, ze] = f.useState(/* @__PURE__ */ new Set()), Be = f.useId(), L = Ee || `wim-rte-${Be}`, Ve = S ? `${L}-error` : void 0, He = x ? `${L}-label` : void 0, R = xe, Ue = S ? "danger" : Se, We = typeof y == "string" && [
 		"xs",
 		"sm",
 		"md",
 		"lg",
 		"xl"
-	].includes(v), Ue = v !== void 0 && !He && !_, B = He && !_ ? v : void 0, We = B ? l[`width${B.charAt(0).toUpperCase()}${B.slice(1)}`] : void 0, V = u.useRef(h === void 0 ? ye : h), H = u.useCallback(() => {
-		P.current && Le(ae(P.current));
-	}, []), U = u.useRef([]), W = u.useRef(-1), G = u.useRef(void 0), K = u.useCallback((e) => {
-		let t = U.current, n = W.current;
+	].includes(y), Ge = y !== void 0 && !We && !v, z = We && !v ? y : void 0, Ke = z ? d[`width${z.charAt(0).toUpperCase()}${z.slice(1)}`] : void 0, B = f.useRef(g === void 0 ? ye : g), V = f.useCallback(() => {
+		N.current && ze(fe(N.current));
+	}, []), H = f.useRef([]), U = f.useRef(-1), W = f.useRef(void 0), G = f.useCallback((e) => {
+		let t = H.current, n = U.current;
 		if (t[n] === e) return;
 		let r = [...t.slice(0, n + 1), e];
-		r.length > 100 && (r = r.slice(1)), U.current = r, W.current = r.length - 1;
-	}, []), q = u.useCallback(() => {
-		G.current !== void 0 && (clearTimeout(G.current), G.current = void 0, K(I.current));
-	}, [K]), J = u.useCallback((e) => {
-		q();
-		let t = U.current, n = W.current + e;
-		if (n < 0 || n >= t.length || !P.current) return;
-		W.current = n;
+		r.length > 100 && (r = r.slice(1)), H.current = r, U.current = r.length - 1;
+	}, []), K = f.useCallback(() => {
+		W.current !== void 0 && (clearTimeout(W.current), W.current = void 0, G(F.current));
+	}, [G]), q = f.useCallback((e) => {
+		K();
+		let t = H.current, n = U.current + e;
+		if (n < 0 || n >= t.length || !N.current) return;
+		U.current = n;
 		let r = t[n];
-		P.current.innerHTML = r, I.current = r, g?.(r);
+		N.current.innerHTML = r, F.current = r, _?.(r);
 		let i = document.createRange();
-		i.selectNodeContents(P.current), i.collapse(!1);
+		i.selectNodeContents(N.current), i.collapse(!1);
 		let a = window.getSelection();
-		a?.removeAllRanges(), a?.addRange(i), H();
+		a?.removeAllRanges(), a?.addRange(i), V();
 	}, [
-		q,
-		g,
-		H
-	]), Y = u.useCallback((e) => {
-		if (z || !P.current) return;
-		let t = P.current, n = oe(t)?.cloneRange() ?? null;
+		K,
+		_,
+		V
+	]), J = f.useCallback((e) => {
+		if (R || !N.current) return;
+		let t = N.current, n = pe(t)?.cloneRange() ?? null;
 		if (t.focus(), n) {
 			let e = window.getSelection();
 			e?.removeAllRanges(), e?.addRange(n);
 		}
-		q(), K(t.innerHTML), e(t), H();
+		K(), G(t.innerHTML), e(t), V();
 		let r = t.innerHTML;
-		I.current = r, K(r), g?.(r);
+		F.current = r, G(r), _?.(r);
 	}, [
-		z,
-		q,
+		R,
 		K,
-		g,
-		H
-	]), Ge = u.useCallback(() => {
-		Y((e) => se(e));
-	}, [Y]), [Ke, X] = u.useState(!1), [Z, qe] = u.useState("https://"), Q = u.useRef(null), Je = u.useCallback(() => {
-		if (z || !P.current) return;
-		P.current.focus();
-		let e = oe(P.current);
-		Q.current = e ? e.cloneRange() : null;
+		G,
+		_,
+		V
+	]), qe = f.useCallback(() => {
+		J((e) => me(e));
+	}, [J]), [Je, Y] = f.useState(!1), [X, Ye] = f.useState("https://"), Z = f.useRef(null), Q = f.useCallback(() => {
+		if (R || !N.current) return;
+		N.current.focus();
+		let e = pe(N.current);
+		Z.current = e ? e.cloneRange() : null;
 		let t = e?.toString() ?? "";
-		qe(t.startsWith("http") ? t : "https://"), X(!0);
-	}, [z]), Ye = u.useCallback(() => {
-		let e = Z.trim();
-		if (X(!1), !e || !P.current) return;
+		Ye(t.startsWith("http") ? t : "https://"), Y(!0);
+	}, [R]), Xe = f.useCallback(() => {
+		let e = X.trim();
+		if (Y(!1), !e || !N.current) return;
 		let t = window.getSelection();
-		if (t?.removeAllRanges(), Q.current) t?.addRange(Q.current);
+		if (t?.removeAllRanges(), Z.current) t?.addRange(Z.current);
 		else {
 			let e = document.createRange();
-			e.selectNodeContents(P.current), e.collapse(!1), t?.addRange(e);
+			e.selectNodeContents(N.current), e.collapse(!1), t?.addRange(e);
 		}
-		Y((t) => ie(t, e));
-	}, [Z, Y]), $ = u.useCallback(() => {
-		if (F.current) return;
-		let e = P.current?.innerHTML ?? "";
-		e !== I.current && (I.current = e, g?.(e), G.current !== void 0 && clearTimeout(G.current), G.current = setTimeout(() => {
-			G.current = void 0, K(I.current);
-		}, 400)), H();
+		J((t) => de(t, e));
+	}, [X, J]), $ = f.useCallback(() => {
+		if (P.current) return;
+		let e = N.current?.innerHTML ?? "";
+		e !== F.current && (F.current = e, _?.(e), W.current !== void 0 && clearTimeout(W.current), W.current = setTimeout(() => {
+			W.current = void 0, G(F.current);
+		}, 400)), V();
 	}, [
-		g,
-		K,
-		H
-	]), Xe = u.useCallback((e) => {
+		_,
+		G,
+		V
+	]), Ze = f.useCallback((e) => {
 		let t = e.nativeEvent.inputType;
-		t === "historyUndo" ? (e.preventDefault(), J(-1)) : t === "historyRedo" && (e.preventDefault(), J(1));
-	}, [J]), Ze = u.useCallback((e) => {
+		t === "historyUndo" ? (e.preventDefault(), q(-1)) : t === "historyRedo" && (e.preventDefault(), q(1));
+	}, [q]), Qe = f.useCallback((e) => {
 		if (!(e.ctrlKey || e.metaKey)) return;
 		let t = e.key.toLowerCase();
-		t === "z" ? (e.preventDefault(), J(e.shiftKey ? 1 : -1)) : t === "y" && (e.preventDefault(), J(1));
-	}, [J]), Qe = u.useCallback(() => {
-		H();
-	}, [H]), $e = u.useCallback(() => {
-		H();
-	}, [H]), et = u.useCallback(() => {
-		F.current = !0;
-	}, []), tt = u.useCallback(() => {
-		F.current = !1, $();
-	}, [$]), nt = u.useCallback((e) => {
+		t === "z" ? (e.preventDefault(), q(e.shiftKey ? 1 : -1)) : t === "y" && (e.preventDefault(), q(1));
+	}, [q]), $e = f.useCallback(() => {
+		V();
+	}, [V]), et = f.useCallback(() => {
+		V();
+	}, [V]), tt = f.useCallback(() => {
+		P.current = !0;
+	}, []), nt = f.useCallback(() => {
+		P.current = !1, $();
+	}, [$]), rt = f.useCallback((e) => {
 		e.preventDefault();
 	}, []);
-	u.useEffect(() => {
-		P.current && (P.current.innerHTML = V.current, I.current = V.current, U.current = [V.current], W.current = 0);
-	}, []), u.useEffect(() => {
-		h !== void 0 && P.current && P.current.innerHTML !== h && (P.current.innerHTML = h, I.current = h);
-	}, [h]);
-	let rt = u.useCallback((e, t) => {
-		if (e === "separator") return /* @__PURE__ */ f("span", {
-			className: l.toolbarSep,
+	f.useEffect(() => {
+		N.current && (N.current.innerHTML = B.current, F.current = B.current, H.current = [B.current], U.current = 0);
+	}, []), f.useEffect(() => {
+		g !== void 0 && N.current && N.current.innerHTML !== g && (N.current.innerHTML = g, F.current = g);
+	}, [g]);
+	let it = f.useCallback((e, s) => {
+		if (e === "separator") return /* @__PURE__ */ p("span", {
+			className: d.toolbarSep,
 			"aria-hidden": "true"
-		}, `sep-${t}`);
-		let n = {
-			disabled: z,
-			active: L.has(e)
+		}, `sep-${s}`);
+		let c = {
+			disabled: R,
+			active: I.has(e)
 		};
 		switch (e) {
-			case "bold": return /* @__PURE__ */ f(m, {
-				...n,
-				title: T,
-				onClick: () => Y((e) => s(e, "bold")),
-				children: /* @__PURE__ */ f(le, {})
-			}, "bold");
-			case "italic": return /* @__PURE__ */ f(m, {
-				...n,
+			case "bold": return /* @__PURE__ */ p(h, {
+				...c,
 				title: E,
-				onClick: () => Y((e) => s(e, "italic")),
-				children: /* @__PURE__ */ f(ue, {})
-			}, "italic");
-			case "underline": return /* @__PURE__ */ f(m, {
-				...n,
+				onClick: () => J((e) => u(e, "bold")),
+				children: /* @__PURE__ */ p(o, {
+					component: t,
+					size: "sm"
+				})
+			}, "bold");
+			case "italic": return /* @__PURE__ */ p(h, {
+				...c,
 				title: D,
-				onClick: () => Y((e) => s(e, "underline")),
-				children: /* @__PURE__ */ f(de, {})
-			}, "underline");
-			case "strikethrough": return /* @__PURE__ */ f(m, {
-				...n,
+				onClick: () => J((e) => u(e, "italic")),
+				children: /* @__PURE__ */ p(o, {
+					component: r,
+					size: "sm"
+				})
+			}, "italic");
+			case "underline": return /* @__PURE__ */ p(h, {
+				...c,
 				title: O,
-				onClick: () => Y((e) => s(e, "strikethrough")),
-				children: /* @__PURE__ */ f(fe, {})
-			}, "strikethrough");
-			case "h1": return /* @__PURE__ */ f(m, {
-				...n,
-				active: L.has("h1"),
+				onClick: () => J((e) => u(e, "underline")),
+				children: /* @__PURE__ */ p(o, {
+					component: ne,
+					size: "sm"
+				})
+			}, "underline");
+			case "strikethrough": return /* @__PURE__ */ p(h, {
+				...c,
 				title: k,
-				onClick: () => Y((e) => o(e, "h1")),
-				children: /* @__PURE__ */ f("span", {
+				onClick: () => J((e) => u(e, "strikethrough")),
+				children: /* @__PURE__ */ p(o, {
+					component: te,
+					size: "sm"
+				})
+			}, "strikethrough");
+			case "h1": return /* @__PURE__ */ p(h, {
+				...c,
+				active: I.has("h1"),
+				title: A,
+				onClick: () => J((e) => l(e, "h1")),
+				children: /* @__PURE__ */ p("span", {
 					"aria-hidden": "true",
 					children: "H1"
 				})
 			}, "h1");
-			case "h2": return /* @__PURE__ */ f(m, {
-				...n,
-				active: L.has("h2"),
-				title: A,
-				onClick: () => Y((e) => o(e, "h2")),
-				children: /* @__PURE__ */ f("span", {
+			case "h2": return /* @__PURE__ */ p(h, {
+				...c,
+				active: I.has("h2"),
+				title: j,
+				onClick: () => J((e) => l(e, "h2")),
+				children: /* @__PURE__ */ p("span", {
 					"aria-hidden": "true",
 					children: "H2"
 				})
 			}, "h2");
-			case "h3": return /* @__PURE__ */ f(m, {
-				...n,
-				active: L.has("h3"),
-				title: j,
-				onClick: () => Y((e) => o(e, "h3")),
-				children: /* @__PURE__ */ f("span", {
+			case "h3": return /* @__PURE__ */ p(h, {
+				...c,
+				active: I.has("h3"),
+				title: Ae,
+				onClick: () => J((e) => l(e, "h3")),
+				children: /* @__PURE__ */ p("span", {
 					"aria-hidden": "true",
 					children: "H3"
 				})
 			}, "h3");
-			case "ul": return /* @__PURE__ */ f(m, {
-				...n,
-				title: M,
-				onClick: () => Y((e) => c(e, "ul")),
-				children: /* @__PURE__ */ f(pe, {})
+			case "ul": return /* @__PURE__ */ p(h, {
+				...c,
+				title: je,
+				onClick: () => J((e) => ge(e, "ul")),
+				children: /* @__PURE__ */ p(o, {
+					component: ee,
+					size: "sm"
+				})
 			}, "ul");
-			case "ol": return /* @__PURE__ */ f(m, {
-				...n,
-				title: Ae,
-				onClick: () => Y((e) => c(e, "ol")),
-				children: /* @__PURE__ */ f(me, {})
+			case "ol": return /* @__PURE__ */ p(h, {
+				...c,
+				title: Me,
+				onClick: () => J((e) => ge(e, "ol")),
+				children: /* @__PURE__ */ p(o, {
+					component: a,
+					size: "sm"
+				})
 			}, "ol");
-			case "link": return /* @__PURE__ */ f(m, {
-				...n,
-				title: N,
-				onClick: Je,
-				children: /* @__PURE__ */ f(he, {})
+			case "link": return /* @__PURE__ */ p(h, {
+				...c,
+				title: M,
+				onClick: Q,
+				children: /* @__PURE__ */ p(o, {
+					component: i,
+					size: "sm"
+				})
 			}, "link");
-			case "unlink": return /* @__PURE__ */ f(m, {
-				...n,
-				title: je,
-				onClick: () => Y((e) => ce(e)),
-				children: /* @__PURE__ */ f(ge, {})
+			case "unlink": return /* @__PURE__ */ p(h, {
+				...c,
+				title: Ne,
+				onClick: () => J((e) => he(e)),
+				children: /* @__PURE__ */ p(o, {
+					component: re,
+					size: "sm"
+				})
 			}, "unlink");
-			case "removeFormat": return /* @__PURE__ */ f(m, {
-				...n,
-				title: Me,
-				onClick: Ge,
-				children: /* @__PURE__ */ f(_e, {})
+			case "removeFormat": return /* @__PURE__ */ p(h, {
+				...c,
+				title: Pe,
+				onClick: qe,
+				children: /* @__PURE__ */ p(o, {
+					component: n,
+					size: "sm"
+				})
 			}, "removeFormat");
 			default: return null;
 		}
 	}, [
-		L,
-		z,
-		T,
+		I,
+		R,
 		E,
 		D,
 		O,
 		k,
 		A,
 		j,
-		M,
 		Ae,
-		N,
 		je,
 		Me,
-		Y,
-		Je,
-		Ge
+		M,
+		Ne,
+		Pe,
+		J,
+		Q,
+		qe
 	]);
-	return /* @__PURE__ */ f(n, {
-		label: b,
-		error: x,
-		required: S,
+	return /* @__PURE__ */ p(c, {
+		label: x,
+		error: S,
+		required: C,
 		layout: we,
-		labelId: Be,
-		errorId: ze,
+		labelId: He,
+		errorId: Ve,
 		className: Te,
-		children: /* @__PURE__ */ p("div", {
-			className: d("wim-rich-text-editor", l.root, l[Ve], z && l.disabled, l[Ce], _ && l.fullWidth, Ue && l.hasCustomWidth, We),
-			style: Ue ? { "--wim-input-width": typeof v == "number" ? `${v}px` : v } : void 0,
+		children: /* @__PURE__ */ m("div", {
+			className: _e("wim-rich-text-editor", d.root, d[Ue], R && d.disabled, d[Ce], v && d.fullWidth, Ge && d.hasCustomWidth, Ke),
+			style: Ge ? { "--wim-input-width": typeof y == "number" ? `${y}px` : y } : void 0,
 			children: [
-				/* @__PURE__ */ f("div", {
-					className: l.toolbar,
+				/* @__PURE__ */ p("div", {
+					className: d.toolbar,
 					role: "toolbar",
-					"aria-label": Ne,
-					"aria-controls": R,
-					onMouseDown: nt,
-					children: De.map((e, t) => rt(e, t))
+					"aria-label": Fe,
+					"aria-controls": L,
+					onMouseDown: rt,
+					children: De.map((e, t) => it(e, t))
 				}),
-				/* @__PURE__ */ f("div", {
-					ref: P,
-					id: R,
-					className: l.content,
-					contentEditable: !z,
+				/* @__PURE__ */ p("div", {
+					ref: N,
+					id: L,
+					className: d.content,
+					contentEditable: !R,
 					suppressContentEditableWarning: !0,
 					role: "textbox",
 					"aria-multiline": !0,
-					"aria-label": ke ?? (b || C ? void 0 : w("a11y.rte_editor")),
-					"aria-labelledby": C ?? (b ? Be : void 0),
-					"aria-invalid": Ve === "danger",
-					"aria-describedby": ze,
-					"aria-required": S,
-					"aria-disabled": z,
+					"aria-label": ke ?? (x || w ? void 0 : T("a11y.rte_editor")),
+					"aria-labelledby": w ?? (x ? He : void 0),
+					"aria-invalid": Ue === "danger",
+					"aria-describedby": Ve,
+					"aria-required": C,
+					"aria-disabled": R,
 					"aria-placeholder": be,
 					"data-placeholder": be,
-					tabIndex: z ? -1 : 0,
+					tabIndex: R ? -1 : 0,
 					style: {
-						minHeight: typeof y == "number" ? `${y}px` : y,
+						minHeight: typeof b == "number" ? `${b}px` : b,
 						outline: "none"
 					},
 					onInput: $,
-					onBeforeInput: Xe,
-					onKeyDown: Ze,
-					onKeyUp: Qe,
-					onMouseUp: $e,
-					onCompositionStart: et,
-					onCompositionEnd: tt
+					onBeforeInput: Ze,
+					onKeyDown: Qe,
+					onKeyUp: $e,
+					onMouseUp: et,
+					onCompositionStart: tt,
+					onCompositionEnd: nt
 				}),
-				/* @__PURE__ */ f(i, {
-					open: Ke,
-					onOpenChange: X,
-					children: /* @__PURE__ */ p(ee, { children: [/* @__PURE__ */ f(ne, { children: /* @__PURE__ */ f(re, { children: N }) }), /* @__PURE__ */ p("form", {
+				/* @__PURE__ */ p(ae, {
+					open: Je,
+					onOpenChange: Y,
+					children: /* @__PURE__ */ m(se, { children: [/* @__PURE__ */ p(le, { children: /* @__PURE__ */ p(ue, { children: M }) }), /* @__PURE__ */ m("form", {
 						onSubmit: (e) => {
-							e.preventDefault(), Ye();
+							e.preventDefault(), Xe();
 						},
-						children: [/* @__PURE__ */ f(r, {
-							label: Pe,
+						children: [/* @__PURE__ */ p(ie, {
+							label: Ie,
 							type: "url",
-							value: Z,
-							onChange: (e) => qe(e.target.value),
+							value: X,
+							onChange: (e) => Ye(e.target.value),
 							fullWidth: !0
-						}), /* @__PURE__ */ p(te, { children: [/* @__PURE__ */ f(a, {
+						}), /* @__PURE__ */ m(ce, { children: [/* @__PURE__ */ p(oe, {
 							asChild: !0,
-							children: /* @__PURE__ */ f(t, {
+							children: /* @__PURE__ */ p(s, {
 								variant: "ghost",
 								type: "button",
-								children: Ie
+								children: Re
 							})
-						}), /* @__PURE__ */ f(t, {
+						}), /* @__PURE__ */ p(s, {
 							variant: "solid",
 							type: "submit",
-							children: Fe
+							children: Le
 						})] })]
 					})] })
 				})
@@ -543,6 +370,6 @@ var h = ({ value: h, defaultValue: ye = "", onChange: g, placeholder: be, disabl
 		})
 	});
 };
-h.displayName = "RichTextEditor";
+g.displayName = "RichTextEditor";
 //#endregion
-export { h as RichTextEditor };
+export { g as RichTextEditor };