@jackuait/blok 0.7.3-beta.3 → 0.7.3

package/dist/chunks/{tools-B0YXCZFW.mjs → tools-BCb5bMO3.mjs}

@@ -1,8 +1,8 @@
-import { $ as e, A as t, B as n, Ct as r, D as i, F as a, G as o, H as s, I as c, J as l, Jt as u, K as d, L as f, M as p, Mt as m, N as h, Nt as g, Ot as _, P as ee, Q as te, R as ne, St as re, Tn as v, Tt as ie, U as ae, V as oe, W as se, X as ce, a as le, c as ue, ct as de, d as fe, dt as pe, et as me, f as he, ft as ge, g as _e, h as ve, ht as ye, i as be, it as xe, j as Se, k as Ce, kt as y, l as we, lt as Te, mt as Ee, n as De, nt as Oe, o as ke, ot as Ae, p as je, pt as Me, q as Ne, r as Pe, rt as Fe, s as Ie, st as Le, t as Re, tt as ze, u as b, ut as Be, v as Ve, vn as He, vt as Ue, wn as x, z as We } from "./constants-C_H9o9Ao.mjs";
-import { t as S } from "./objectSpread2-CyPxu8-u.mjs";
-import { n as C } from "./tw-DmW6-pCY.mjs";
+import { $ as e, A as t, An as n, B as r, D as i, F as a, Ft as o, G as s, H as c, I as l, J as u, K as d, L as f, M as p, N as m, Ot as h, P as g, Pt as _, R as ee, Rt as te, U as ne, V as re, W as ie, X as ae, Y as oe, Z as se, _t as ce, a as le, at as ue, bt as de, c as fe, d as pe, dt as me, en as he, f as ge, ft as _e, g as ve, gt as ye, h as be, ht as xe, i as Se, it as Ce, j as we, jn as v, jt as Te, k as Ee, kt as De, l as Oe, lt as ke, mt as Ae, n as je, nt as Me, o as Ne, ot as Pe, p as Fe, pt as Ie, q as Le, r as Re, rt as ze, s as Be, st as Ve, t as He, tt as Ue, u as y, ut as We, v as Ge, vt as Ke, wn as qe, wt as Je, xt as Ye, yt as Xe, z as Ze, zt as Qe } from "./constants-WhLyFkza.mjs";
+import { t as b } from "./objectSpread2-CyPxu8-u.mjs";
+import { n as x } from "./tw-DmW6-pCY.mjs";
 //#region src/components/utils/html.ts
-var Ge = (e) => {
+var $e = (e) => {
 	if (!e || !e.includes("data-blok-fake-background")) return e;
 	let t = document.createElement("div");
 	return t.innerHTML = e, t.querySelectorAll("[data-blok-fake-background=\"true\"]").forEach((e) => {
@@ -12,7 +12,7 @@ var Ge = (e) => {
 			t.removeChild(e);
 		}
 	}), t.innerHTML;
-}, w = [
+}, S = [
 	"empty:before:pointer-events-none",
 	"empty:before:text-gray-text",
 	"empty:before:cursor-text",
@@ -21,7 +21,7 @@ var Ge = (e) => {
 	"data-[blok-empty=true]:before:text-gray-text",
 	"data-[blok-empty=true]:before:cursor-text",
 	"data-[blok-empty=true]:before:content-[attr(data-placeholder)]"
-], Ke = [
+], et = [
 	"empty:before:pointer-events-none",
 	"empty:before:text-gray-text",
 	"empty:before:cursor-text",
@@ -30,7 +30,7 @@ var Ge = (e) => {
 	"data-[empty=true]:before:text-gray-text",
 	"data-[empty=true]:before:cursor-text",
 	"data-[empty=true]:before:content-[attr(data-blok-placeholder-active)]"
-], qe = [
+], tt = [
 	"empty:focus:before:pointer-events-none",
 	"empty:focus:before:text-gray-text",
 	"empty:focus:before:cursor-text",
@@ -39,7 +39,7 @@ var Ge = (e) => {
 	"[&[data-empty=true]:focus]:before:text-gray-text",
 	"[&[data-empty=true]:focus]:before:cursor-text",
 	"[&[data-empty=true]:focus]:before:content-[attr(data-blok-placeholder-active)]"
-], Je = [
+], nt = [
 	"empty:in-data-[blok-empty=true]:before:pointer-events-none",
 	"empty:in-data-[blok-empty=true]:before:text-gray-text",
 	"empty:in-data-[blok-empty=true]:before:cursor-text",
@@ -48,31 +48,31 @@ var Ge = (e) => {
 	"[[data-blok-empty=true]_&[data-empty=true]]:before:text-gray-text",
 	"[[data-blok-empty=true]_&[data-empty=true]]:before:cursor-text",
 	"[[data-blok-empty=true]_&[data-empty=true]]:before:content-[attr(data-blok-placeholder-active)]"
-], Ye = (e) => {
+], rt = (e) => {
 	let t = e.innerHTML.trim();
 	return t === "" || t === "<br>";
-}, Xe = (e) => {
+}, it = (e) => {
 	e.innerHTML === "<br>" && (e.innerHTML = "");
 	let t = window.getSelection();
 	if (!t) return;
 	let n = document.createRange();
 	n.selectNodeContents(e), n.collapse(!0), t.removeAllRanges(), t.addRange(n);
-}, Ze = (e) => {
-	Ye(e) && Xe(e);
-}, Qe = (e, t, n = "data-placeholder") => {
-	e.setAttribute(n, t == null ? "" : t), e.addEventListener("focus", () => Ze(e));
-}, $e, et = (e) => {
+}, at = (e) => {
+	rt(e) && it(e);
+}, ot = (e, t, n = "data-placeholder") => {
+	e.setAttribute(n, t == null ? "" : t), e.addEventListener("focus", () => at(e));
+}, st, ct = (e) => {
 	let t = document.createElement("div");
 	t.innerHTML = e.trim();
 	let n = document.createDocumentFragment();
 	return n.append(...Array.from(t.childNodes)), n;
-}, tt = class t {
+}, lt = class e {
 	static get DEFAULT_PLACEHOLDER() {
 		return "tools.paragraph.placeholder";
 	}
-	constructor({ data: e, config: n, api: r, readOnly: i }) {
+	constructor({ data: t, config: n, api: r, readOnly: i }) {
 		var a, o, s;
-		this.api = r, this.readOnly = i, this.readOnly || (this.onKeyUp = this.onKeyUp.bind(this)), this._placeholder = (a = n == null ? void 0 : n.placeholder) == null ? t.DEFAULT_PLACEHOLDER : a, this._data = e == null ? { text: "" } : e, this._element = null, this._preserveBlank = (o = n == null ? void 0 : n.preserveBlank) == null ? !1 : o, this._styles = (s = n == null ? void 0 : n.styles) == null ? {} : s;
+		this.api = r, this.readOnly = i, this.readOnly || (this.onKeyUp = this.onKeyUp.bind(this)), this._placeholder = (a = n == null ? void 0 : n.placeholder) == null ? e.DEFAULT_PLACEHOLDER : a, this._data = t == null ? { text: "" } : t, this._element = null, this._preserveBlank = (o = n == null ? void 0 : n.preserveBlank) == null ? !1 : o, this._styles = (s = n == null ? void 0 : n.styles) == null ? {} : s;
 	}
 	onKeyUp(e) {
 		if (e.code !== "Backspace" && e.code !== "Delete" || !this._element) return;
@@ -84,10 +84,10 @@ var Ge = (e) => {
 		return this._styles.size && (e.fontSize = this._styles.size), this._styles.lineHeight && (e.lineHeight = this._styles.lineHeight), this._styles.marginTop && (e.marginTop = this._styles.marginTop), this._styles.marginBottom && (e.marginBottom = this._styles.marginBottom), e;
 	}
 	drawView() {
-		let e = document.createElement("DIV");
-		e.className = C(this.api.styles.block, t.WRAPPER_CLASSES, qe, Je), e.setAttribute(x.tool, "paragraph"), e.contentEditable = "false";
-		let n = this.buildInlineStyles();
-		return Object.keys(n).length > 0 && Object.assign(e.style, n), this._data.text ? e.innerHTML = this._data.text : this.readOnly && (e.innerHTML = "<br>"), this.readOnly || (e.contentEditable = "true", e.addEventListener("keyup", this.onKeyUp), Qe(e, this.api.i18n.t(this._placeholder), "data-blok-placeholder-active")), e;
+		let t = document.createElement("DIV");
+		t.className = x(this.api.styles.block, e.WRAPPER_CLASSES, tt, nt), t.setAttribute(n.tool, "paragraph"), t.contentEditable = "false";
+		let r = this.buildInlineStyles();
+		return Object.keys(r).length > 0 && Object.assign(t.style, r), this._data.text ? t.innerHTML = this._data.text : this.readOnly && (t.innerHTML = "<br>"), this.readOnly || (t.contentEditable = "true", t.addEventListener("keyup", this.onKeyUp), ot(t, this.api.i18n.t(this._placeholder), "data-blok-placeholder-active")), t;
 	}
 	render() {
 		return this._element = this.drawView(), this._element;
@@ -95,14 +95,14 @@ var Ge = (e) => {
 	merge(e) {
 		if (!this._element) return;
 		this._data.text += e.text;
-		let t = et(e.text);
+		let t = ct(e.text);
 		this._element.appendChild(t), this._element.normalize();
 	}
 	validate(e) {
 		return !(e.text.trim() === "" && !this._preserveBlank);
 	}
 	save(e) {
-		return { text: Ge(e.innerHTML) };
+		return { text: $e(e.innerHTML) };
 	}
 	onPaste(e) {
 		let t = e.detail;
@@ -134,7 +134,7 @@ var Ge = (e) => {
 	}
 	static get toolbox() {
 		return {
-			icon: e,
+			icon: Me,
 			title: "Text",
 			titleKey: "text",
 			searchTerms: [
@@ -145,64 +145,64 @@ var Ge = (e) => {
 		};
 	}
 };
-$e = tt, $e.WRAPPER_CLASSES = [
-	"leading-[1.6em]",
+st = lt, st.WRAPPER_CLASSES = [
+	"leading-[1.5]",
 	"outline-hidden",
-	"mt-[2px]",
+	"mt-px",
 	"mb-px",
 	"[&>p:first-of-type]:mt-0",
 	"[&>p:last-of-type]:mb-0"
 ];
 //#endregion
 //#region src/tools/toggle/dom-builder.ts
-var nt = (e) => {
-	let { data: t, readOnly: n, isOpen: r, keydownHandler: i, onArrowClick: a, onBodyPlaceholderClick: o } = e, s = document.createElement("div");
-	s.className = le, s.setAttribute(x.tool, je), s.setAttribute(b.toggleOpen, String(r));
-	let c = document.createElement("div");
-	c.className = he;
-	let l = rt(r, a, {}, e.ariaLabels), u = at(t, n, i);
-	c.appendChild(l), c.appendChild(u);
-	let d = it(o, e.bodyPlaceholderText), f = document.createElement("div");
-	return f.className = fe, f.setAttribute(b.toggleChildren, ""), f.setAttribute("data-blok-mutation-free", "true"), f.id = `toggle-children-${Date.now()}-${Math.random().toString(36).slice(2)}`, l.setAttribute("aria-controls", f.id), s.appendChild(c), s.appendChild(d), s.appendChild(f), {
-		wrapper: s,
-		arrowElement: l,
-		contentElement: u,
-		bodyPlaceholderElement: d,
-		childContainerElement: f
+var ut = (e) => {
+	let { data: t, readOnly: r, isOpen: i, keydownHandler: a, onArrowClick: o, onBodyPlaceholderClick: s } = e, c = document.createElement("div");
+	c.className = le, c.setAttribute(n.tool, Fe), c.setAttribute(y.toggleOpen, String(i));
+	let l = document.createElement("div");
+	l.className = ge;
+	let u = dt(i, o, {}, e.ariaLabels), d = pt(t, r, a);
+	l.appendChild(u), l.appendChild(d);
+	let f = ft(s, e.bodyPlaceholderText), p = document.createElement("div");
+	return p.className = pe, p.setAttribute(y.toggleChildren, ""), p.setAttribute("data-blok-mutation-free", "true"), p.id = `toggle-children-${Date.now()}-${Math.random().toString(36).slice(2)}`, u.setAttribute("aria-controls", p.id), c.appendChild(l), c.appendChild(f), c.appendChild(p), {
+		wrapper: c,
+		arrowElement: u,
+		contentElement: d,
+		bodyPlaceholderElement: f,
+		childContainerElement: p
 	};
-}, rt = (e, t, n = {}, r = {
+}, dt = (e, t, r = {}, i = {
 	collapse: "Collapse",
 	expand: "Expand"
 }) => {
-	let i = document.createElement("span");
-	i.className = be, i.setAttribute(b.toggleArrow, ""), i.setAttribute(x.mutationFree, "true"), i.setAttribute("role", "button"), i.setAttribute("tabindex", "0"), i.setAttribute("aria-label", e ? r.collapse : r.expand), i.setAttribute("aria-expanded", String(e)), n.contentEditableFalse === !0 && (i.contentEditable = "false"), i.innerHTML = Pe;
-	let a = i.querySelector("svg");
-	return a && (a.style.transition = "transform 200ms ease-in-out", e && (a.style.transform = "rotate(90deg)")), t && (i.addEventListener("click", (e) => {
+	let a = document.createElement("span");
+	a.className = Se, a.setAttribute(y.toggleArrow, ""), a.setAttribute(n.mutationFree, "true"), a.setAttribute("role", "button"), a.setAttribute("tabindex", "0"), a.setAttribute("aria-label", e ? i.collapse : i.expand), a.setAttribute("aria-expanded", String(e)), r.contentEditableFalse === !0 && (a.contentEditable = "false"), a.innerHTML = Re;
+	let o = a.querySelector("svg");
+	return o && (o.style.transition = "transform 200ms ease-in-out", e && (o.style.transform = "rotate(90deg)")), t && (a.addEventListener("click", (e) => {
 		e.stopPropagation(), t();
-	}), i.addEventListener("keydown", (e) => {
+	}), a.addEventListener("keydown", (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), t());
-	})), i;
-}, it = (e, t) => {
+	})), a;
+}, ft = (e, t) => {
 	let n = document.createElement("div");
-	return n.className = Ie, n.setAttribute(b.toggleBodyPlaceholder, ""), n.setAttribute("data-blok-mutation-free", "true"), n.textContent = t, e && n.addEventListener("click", e), n;
-}, at = (e, t, n) => {
+	return n.className = Be, n.setAttribute(y.toggleBodyPlaceholder, ""), n.setAttribute("data-blok-mutation-free", "true"), n.textContent = t, e && n.addEventListener("click", e), n;
+}, pt = (e, t, n) => {
 	let r = document.createElement("div");
-	return r.className = C(ue, Ke, Je), r.setAttribute(b.toggleContent, ""), r.contentEditable = t ? "false" : "true", r.innerHTML = e.text, n && r.addEventListener("keydown", n), r;
-}, ot = (e) => {
-	let t = nt(e);
-	return t.contentElement && Qe(t.contentElement, e.placeholder, "data-blok-placeholder-active"), t;
-}, T = (e, t, n, r = {
+	return r.className = x(fe, et, nt), r.setAttribute(y.toggleContent, ""), r.contentEditable = t ? "false" : "true", r.innerHTML = e.text, n && r.addEventListener("keydown", n), r;
+}, mt = (e) => {
+	let t = ut(e);
+	return t.contentElement && ot(t.contentElement, e.placeholder, "data-blok-placeholder-active"), t;
+}, C = (e, t, n, r = {
 	collapse: "Collapse",
 	expand: "Expand"
 }) => {
 	let i = e.querySelector("svg");
-	i && (i.style.transform = n ? "rotate(90deg)" : ""), e.setAttribute("aria-label", n ? r.collapse : r.expand), e.setAttribute("aria-expanded", String(n)), t.setAttribute(b.toggleOpen, String(n));
-}, st = (e, t, n, r, i) => {
+	i && (i.style.transform = n ? "rotate(90deg)" : ""), e.setAttribute("aria-label", n ? r.collapse : r.expand), e.setAttribute("aria-expanded", String(n)), t.setAttribute(y.toggleOpen, String(n));
+}, ht = (e, t, n, r, i) => {
 	let a = e.blocks.getChildren(t);
 	!n && r && i && r.contains(document.activeElement) && i.focus();
 	for (let e of a) r && e.holder.parentElement !== r && r.appendChild(e.holder), n ? e.holder.classList.remove("hidden") : e.holder.classList.add("hidden");
 	r && (n ? r.removeAttribute("aria-hidden") : r.setAttribute("aria-hidden", "true"));
-}, ct = (e, t, n, r, i) => {
+}, gt = (e, t, n, r, i) => {
 	if (e === null) return;
 	if (i) {
 		e.classList.add("hidden");
@@ -210,27 +210,27 @@ var nt = (e) => {
 	}
 	let a = t.blocks.getChildren(n);
 	r && a.length === 0 ? e.classList.remove("hidden") : e.classList.add("hidden");
-}, lt = async (e) => {
+}, _t = async (e) => {
 	var t;
 	let { api: n, blockId: r, data: i, getContentElement: a, syncContentFromDOM: o, isOpen: s } = e;
 	if (o(), r === void 0) return;
 	let c = a(), l = window.getSelection();
 	if (!c || !l || l.rangeCount === 0) return;
-	let { beforeContent: u, afterContent: d } = dt(c, l.getRangeAt(0)), f = (t = n.blocks.getBlockIndex(r)) == null ? n.blocks.getCurrentBlockIndex() : t;
+	let { beforeContent: u, afterContent: d } = yt(c, l.getRangeAt(0)), f = (t = n.blocks.getBlockIndex(r)) == null ? n.blocks.getCurrentBlockIndex() : t;
 	if (s && d === "") {
 		let e = n.blocks.insertInsideParent(r, f + 1);
 		n.caret.setToBlock(e.id, "start");
 		return;
 	}
-	n.blocks.splitBlock(r, { text: u }, je, { text: d }, f + 1), i.text = u;
-}, ut = async (e, t) => {
+	n.blocks.splitBlock(r, { text: u }, Fe, { text: d }, f + 1), i.text = u;
+}, vt = async (e, t) => {
 	let { api: n, blockId: r, data: i, getContentElement: a, syncContentFromDOM: o } = e;
 	if (o(), r === void 0) return;
 	let s = a();
-	if (!s || !Ue(s)) return;
+	if (!s || !Je(s)) return;
 	let c = i.text;
 	c === "" && (t.preventDefault(), await n.blocks.convert(r, "paragraph", { text: c }));
-}, dt = (e, t) => {
+}, yt = (e, t) => {
 	if (!e.lastChild) return {
 		beforeContent: "",
 		afterContent: ""
@@ -246,13 +246,13 @@ var nt = (e) => {
 		beforeContent: i.innerHTML,
 		afterContent: a.innerHTML
 	};
-}, ft = async (e) => {
+}, bt = async (e) => {
 	var t;
 	let { api: n, blockId: r, getContentElement: i, syncContentFromDOM: a, isOpen: o, currentLevel: s } = e;
 	if (a(), r === void 0) return;
 	let c = i(), l = window.getSelection();
 	if (!c || !l || l.rangeCount === 0) return;
-	let { beforeContent: u, afterContent: d } = dt(c, l.getRangeAt(0)), f = (t = n.blocks.getBlockIndex(r)) == null ? n.blocks.getCurrentBlockIndex() : t;
+	let { beforeContent: u, afterContent: d } = yt(c, l.getRangeAt(0)), f = (t = n.blocks.getBlockIndex(r)) == null ? n.blocks.getCurrentBlockIndex() : t;
 	if (o && d === "") {
 		let e = n.blocks.insertInsideParent(r, f + 1);
 		n.caret.setToBlock(e.id, "start");
@@ -267,17 +267,17 @@ var nt = (e) => {
 		level: s,
 		isToggleable: !0
 	}, f + 1);
-}, pt = async (e, t) => {
+}, xt = async (e, t) => {
 	let { api: n, blockId: r, getText: i, getContentElement: a, syncContentFromDOM: o, currentLevel: s } = e;
 	if (o(), r === void 0) return;
 	let c = a();
-	if (!c || !Ue(c)) return;
+	if (!c || !Je(c)) return;
 	let l = i();
 	l === "" && (t.preventDefault(), await n.blocks.convert(r, "header", {
 		text: l,
 		level: s
 	}));
-}, mt, ht = class e {
+}, St, Ct = class e {
 	constructor({ data: e, config: t, api: n, readOnly: r, block: i }) {
 		var a;
 		this._arrowElement = null, this._wrapper = null, this._headerRow = null, this._childContainerElement = null, this._bodyPlaceholderElement = null, this.handleKeyDown = (e) => {
@@ -285,7 +285,7 @@ var nt = (e) => {
 				e.preventDefault(), this.handleEnter();
 				return;
 			}
-			e.key === "Backspace" && pt(this.createKeyboardContext(), e);
+			e.key === "Backspace" && xt(this.createKeyboardContext(), e);
 		}, this.handleBlockChanged = (e) => {
 			this.isBlockChangedPayload(e) && (e.event.type === "block-removed" || e.event.type === "block-added") && this.updateBodyPlaceholderVisibility();
 		}, this.api = n, this.readOnly = r, this._settings = t || {}, this._data = this.normalizeData(e), this._isOpen = (a = this._data.isOpen) == null ? !r : a, this._element = this.getTag(), i && (this.blockId = i.id), !r && this._data.isToggleable && this.api.events.on("block changed", this.handleBlockChanged);
@@ -311,7 +311,7 @@ var nt = (e) => {
 		if (e.isToggleable === !0 && (r.isToggleable = !0), typeof e.isOpen == "boolean" && (r.isOpen = e.isOpen), r.text) {
 			let e = document.createElement("div");
 			e.innerHTML = r.text;
-			let t = e.querySelector(`[${b.toggleArrow}]`);
+			let t = e.querySelector(`[${y.toggleArrow}]`);
 			t && (t.remove(), r.text = e.innerHTML);
 		}
 		return r;
@@ -326,13 +326,13 @@ var nt = (e) => {
 		this.api.events.off("block changed", this.handleBlockChanged), this._element.removeEventListener("keydown", this.handleKeyDown);
 	}
 	expand() {
-		!this._data.isToggleable || this._isOpen || (this._isOpen = !0, this._arrowElement && this._element && T(this._arrowElement, this._element, this._isOpen, {
+		!this._data.isToggleable || this._isOpen || (this._isOpen = !0, this._arrowElement && this._element && C(this._arrowElement, this._element, this._isOpen, {
 			collapse: this.api.i18n.t("tools.toggle.ariaLabelCollapse"),
 			expand: this.api.i18n.t("tools.toggle.ariaLabelExpand")
 		}), this.updateChildrenVisibility(), this.updateBodyPlaceholderVisibility());
 	}
 	collapse() {
-		!this._data.isToggleable || !this._isOpen || (this._isOpen = !1, this._arrowElement && this._element && T(this._arrowElement, this._element, this._isOpen, {
+		!this._data.isToggleable || !this._isOpen || (this._isOpen = !1, this._arrowElement && this._element && C(this._arrowElement, this._element, this._isOpen, {
 			collapse: this.api.i18n.t("tools.toggle.ariaLabelCollapse"),
 			expand: this.api.i18n.t("tools.toggle.ariaLabelExpand")
 		}), this.updateChildrenVisibility(), this.updateBodyPlaceholderVisibility());
@@ -360,14 +360,14 @@ var nt = (e) => {
 	merge(e) {
 		let t = document.createElement("div");
 		t.innerHTML = e.text;
-		let n = t.querySelector(`[${b.toggleArrow}]`);
+		let n = t.querySelector(`[${y.toggleArrow}]`);
 		n && n.remove(), this._element.insertAdjacentHTML("beforeend", t.innerHTML);
 	}
 	validate(e) {
 		return typeof e.text == "string";
 	}
 	setData(e) {
-		return this._data = this.normalizeData(e), typeof e.text == "string" && (this._element.innerHTML = e.text), this._data.isToggleable && typeof this._data.isOpen == "boolean" && (this._isOpen = this._data.isOpen, this._arrowElement && this._element && T(this._arrowElement, this._element, this._isOpen, {
+		return this._data = this.normalizeData(e), typeof e.text == "string" && (this._element.innerHTML = e.text), this._data.isToggleable && typeof this._data.isOpen == "boolean" && (this._isOpen = this._data.isOpen, this._arrowElement && this._element && C(this._arrowElement, this._element, this._isOpen, {
 			collapse: this.api.i18n.t("tools.toggle.ariaLabelCollapse"),
 			expand: this.api.i18n.t("tools.toggle.ariaLabelExpand")
 		}), this.updateChildrenVisibility(), this.updateBodyPlaceholderVisibility()), !0;
@@ -406,13 +406,13 @@ var nt = (e) => {
 			e.innerHTML = this._element.innerHTML, this._element.parentNode.replaceChild(e, this._element), this._element = e;
 		}
 		if (t.text !== void 0 && (this._element.innerHTML = this._data.text || ""), this._data.isToggleable) {
-			if (this._element.setAttribute(b.toggleOpen, String(this._isOpen)), this._element.className = C(e.BASE_STYLES, this.currentLevel.styles, w, "pl-8"), !this._wrapper) this.createToggleWrapper();
-			else if (!this._wrapper.querySelector(`[${b.toggleArrow}]`)) {
+			if (this._element.setAttribute(y.toggleOpen, String(this._isOpen)), this._element.className = x(e.BASE_STYLES, this.currentLevel.styles, S, "pl-8"), !this._wrapper) this.createToggleWrapper();
+			else if (!this._wrapper.querySelector(`[${y.toggleArrow}]`)) {
 				var n;
 				let e = this.buildArrow();
 				this._arrowElement = e, ((n = this._headerRow) == null ? this._wrapper : n).prepend(e);
 			}
-		} else if (this._element.removeAttribute(b.toggleOpen), this._element.className = C(e.BASE_STYLES, this.currentLevel.styles, w), this._arrowElement = null, this._wrapper) {
+		} else if (this._element.removeAttribute(y.toggleOpen), this._element.className = x(e.BASE_STYLES, this.currentLevel.styles, S), this._arrowElement = null, this._wrapper) {
 			let e = this._wrapper.parentNode;
 			e && e.replaceChild(this._element, this._wrapper), this._wrapper = null, this._headerRow = null;
 		}
@@ -422,14 +422,14 @@ var nt = (e) => {
 	}
 	getTag() {
 		let t = document.createElement(this.currentLevel.tag);
-		t.innerHTML = this._data.text || "", t.className = C(e.BASE_STYLES, this.currentLevel.styles, w, this._data.isToggleable ? "pl-8" : "");
-		let { inlineStyles: n } = this.currentLevel;
-		n && Object.assign(t.style, n), t.setAttribute(x.tool, "header"), t.contentEditable = this.readOnly ? "false" : "true", this._data.isToggleable && t.setAttribute(b.toggleOpen, String(this._isOpen));
-		let r = this.api.i18n.t(this.currentLevel.nameKey), i = this.resolvePlaceholderText(r);
-		return this.readOnly ? t.setAttribute("data-placeholder", i) : Qe(t, i), !this.readOnly && this._data.isToggleable && t.addEventListener("keydown", this.handleKeyDown), t;
+		t.innerHTML = this._data.text || "", t.className = x(e.BASE_STYLES, this.currentLevel.styles, S, this._data.isToggleable ? "pl-8" : "");
+		let { inlineStyles: r } = this.currentLevel;
+		r && Object.assign(t.style, r), t.setAttribute(n.tool, "header"), t.contentEditable = this.readOnly ? "false" : "true", this._data.isToggleable && t.setAttribute(y.toggleOpen, String(this._isOpen));
+		let i = this.api.i18n.t(this.currentLevel.nameKey), a = this.resolvePlaceholderText(i);
+		return this.readOnly ? t.setAttribute("data-placeholder", a) : ot(t, a), !this.readOnly && this._data.isToggleable && t.addEventListener("keydown", this.handleKeyDown), t;
 	}
 	buildArrow() {
-		let e = rt(this._isOpen, this.readOnly ? null : () => this.toggleOpen(), {}, {
+		let e = dt(this._isOpen, () => this.toggleOpen(), {}, {
 			collapse: this.api.i18n.t("tools.toggle.ariaLabelCollapse"),
 			expand: this.api.i18n.t("tools.toggle.ariaLabelExpand")
 		});
@@ -441,9 +441,9 @@ var nt = (e) => {
 		let n = this.buildArrow();
 		this._arrowElement = n, t.appendChild(n), t.appendChild(this._element), e.appendChild(t);
 		let r = document.createElement("div");
-		r.className = Ie, r.setAttribute(b.toggleBodyPlaceholder, ""), r.setAttribute("data-blok-mutation-free", "true"), r.textContent = this.api.i18n.t("tools.toggle.bodyPlaceholder"), this.readOnly || r.addEventListener("click", () => this.handleBodyPlaceholderClick()), this._bodyPlaceholderElement = r, e.appendChild(r);
+		r.className = Be, r.setAttribute(y.toggleBodyPlaceholder, ""), r.setAttribute("data-blok-mutation-free", "true"), r.textContent = this.api.i18n.t("tools.toggle.bodyPlaceholder"), this.readOnly || r.addEventListener("click", () => this.handleBodyPlaceholderClick()), this._bodyPlaceholderElement = r, e.appendChild(r);
 		let i = document.createElement("div");
-		return i.className = fe, i.setAttribute(b.toggleChildren, ""), i.setAttribute("data-blok-mutation-free", "true"), this._childContainerElement = i, e.appendChild(i), e;
+		return i.className = pe, i.setAttribute(y.toggleChildren, ""), i.setAttribute("data-blok-mutation-free", "true"), this._childContainerElement = i, e.appendChild(i), e;
 	}
 	createToggleWrapper() {
 		let e = this._element.parentNode;
@@ -468,19 +468,19 @@ var nt = (e) => {
 	}
 	async handleEnter() {
 		var e = this;
-		await ft(e.createKeyboardContext()), e.updateChildrenVisibility(), e.updateBodyPlaceholderVisibility();
+		await bt(e.createKeyboardContext()), e.updateChildrenVisibility(), e.updateBodyPlaceholderVisibility();
 	}
 	toggleOpen() {
-		this._isOpen = !this._isOpen, this._arrowElement && this._element && T(this._arrowElement, this._element, this._isOpen, {
+		this._isOpen = !this._isOpen, this._arrowElement && this._element && C(this._arrowElement, this._element, this._isOpen, {
 			collapse: this.api.i18n.t("tools.toggle.ariaLabelCollapse"),
 			expand: this.api.i18n.t("tools.toggle.ariaLabelExpand")
 		}), this.updateChildrenVisibility(), this.updateBodyPlaceholderVisibility();
 	}
 	updateChildrenVisibility() {
-		this.blockId !== void 0 && st(this.api, this.blockId, this._isOpen, this._childContainerElement, this._arrowElement);
+		this.blockId !== void 0 && ht(this.api, this.blockId, this._isOpen, this._childContainerElement, this._arrowElement);
 	}
 	updateBodyPlaceholderVisibility() {
-		this.blockId !== void 0 && ct(this._bodyPlaceholderElement, this.api, this.blockId, this._isOpen, this.readOnly);
+		this.blockId !== void 0 && gt(this._bodyPlaceholderElement, this.api, this.blockId, this._isOpen, this.readOnly);
 	}
 	handleBodyPlaceholderClick() {
 		var e;
@@ -558,9 +558,9 @@ var nt = (e) => {
 			],
 			shortcut: "#".repeat(e.number)
 		})), n = {
-			1: me,
-			2: ze,
-			3: Oe
+			1: ze,
+			2: Ce,
+			3: ue
 		}, r = e.DEFAULT_LEVELS.filter((e) => e.number <= 3).map((e) => ({
 			icon: n[e.number],
 			title: `Toggle heading ${e.number}`,
@@ -581,45 +581,45 @@ var nt = (e) => {
 		return [...t, ...r];
 	}
 };
-mt = ht, mt.BASE_STYLES = "py-[3px] px-[2px] m-0 leading-[1.3]! outline-hidden [&_p]:p-0! [&_p]:m-0! [&_div]:p-0! [&_div]:m-0!", mt.DEFAULT_LEVELS = [
+St = Ct, St.BASE_STYLES = "py-[3px] px-[2px] m-0 leading-[1.3]! outline-hidden [&_p]:p-0! [&_p]:m-0! [&_div]:p-0! [&_div]:m-0!", St.DEFAULT_LEVELS = [
 	{
 		number: 1,
 		tag: "H1",
 		nameKey: "tools.header.heading1",
 		name: "Heading 1",
-		icon: Se,
-		styles: "text-4xl font-bold mt-8 mb-1"
+		icon: p,
+		styles: "text-3xl font-semibold mt-8 mb-px"
 	},
 	{
 		number: 2,
 		tag: "H2",
 		nameKey: "tools.header.heading2",
 		name: "Heading 2",
-		icon: p,
-		styles: "text-3xl font-semibold mt-6 mb-px"
+		icon: m,
+		styles: "text-2xl font-semibold mt-[26px] mb-px"
 	},
 	{
 		number: 3,
 		tag: "H3",
 		nameKey: "tools.header.heading3",
 		name: "Heading 3",
-		icon: h,
-		styles: "text-2xl font-semibold mt-4 mb-px"
+		icon: g,
+		styles: "text-xl font-semibold mt-5 mb-px"
 	},
 	{
 		number: 4,
 		tag: "H4",
 		nameKey: "tools.header.heading4",
 		name: "Heading 4",
-		icon: ee,
-		styles: "text-xl font-semibold mt-3 mb-px"
+		icon: a,
+		styles: "text-lg font-semibold mt-3 mb-px"
 	},
 	{
 		number: 5,
 		tag: "H5",
 		nameKey: "tools.header.heading5",
 		name: "Heading 5",
-		icon: a,
+		icon: l,
 		styles: "text-base font-semibold mt-3 mb-px"
 	},
 	{
@@ -627,16 +627,16 @@ mt = ht, mt.BASE_STYLES = "py-[3px] px-[2px] m-0 leading-[1.3]! outline-hidden [
 		tag: "H6",
 		nameKey: "tools.header.heading6",
 		name: "Heading 6",
-		icon: c,
+		icon: f,
 		styles: "text-sm font-semibold mt-3 mb-px"
 	}
 ];
 //#endregion
 //#region src/tools/list/constants.ts
-var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 leading-[1.6em]", vt = "flex items-start pl-0.5", yt = "mt-1 w-4 mr-2 h-4 cursor-pointer accent-current", bt = "tools.list.placeholder", xt = "list", St = {
+var wt = "outline-hidden py-[3px] mt-[2px] mb-px", Tt = "outline-hidden pl-0.5 leading-[1.5] items-center", Et = "flex items-start pl-0.5", Dt = "mt-0.5 w-5 mr-2 h-5 cursor-pointer accent-current", Ot = "tools.list.placeholder", kt = "list", At = {
 	contentContainer: "list-content-container",
 	checklistContent: "list-checklist-content"
-}, Ct = (e, t) => {
+}, jt = (e, t) => {
 	let n = e;
 	n._placeholder = t, Object.defineProperty(n, "getPlaceholder", {
 		value: () => n._placeholder,
@@ -644,8 +644,8 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		enumerable: !0,
 		configurable: !1
 	});
-}, wt = (e) => {
-	let { data: t, keydownHandler: n, readOnly: r } = e, i = Tt(e), a = t.style === "checklist" ? Dt(e) : Et(e);
+}, Mt = (e) => {
+	let { data: t, keydownHandler: n, readOnly: r } = e, i = Nt(e), a = t.style === "checklist" ? Ft(e) : Pt(e);
 	i.appendChild(a), !r && n && i.addEventListener("keydown", n);
 	let o = a.querySelector("[data-list-marker]"), s = a.querySelector("input[type=\"checkbox\"]"), c = a.querySelector("[contenteditable]");
 	return {
@@ -654,46 +654,49 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		markerElement: o,
 		checkboxElement: s
 	};
-}, Tt = (e) => {
+}, Nt = (e) => {
 	var t;
-	let { data: n } = e, r = document.createElement("div");
-	return r.className = gt, r.setAttribute(x.tool, xt), r.setAttribute("data-list-style", n.style), r.setAttribute("data-list-depth", String((t = n.depth) == null ? 0 : t)), n.start !== void 0 && n.start !== 1 && r.setAttribute("data-list-start", String(n.start)), r;
-}, Et = (e) => {
+	let { data: r } = e, i = document.createElement("div");
+	return i.className = wt, i.setAttribute(n.tool, kt), i.setAttribute("data-list-style", r.style), i.setAttribute("data-list-depth", String((t = r.depth) == null ? 0 : t)), r.start !== void 0 && r.start !== 1 && i.setAttribute("data-list-start", String(r.start)), i;
+}, Pt = (e) => {
 	var t;
 	let { data: n, itemColor: r, itemSize: i, placeholder: a } = e, o = document.createElement("div");
-	o.setAttribute("role", "listitem"), o.className = C(_t, "flex", ...w), r && (o.style.color = r), i && (o.style.fontSize = i);
+	o.setAttribute("role", "listitem"), o.className = x(Tt, "flex", ...S), r && (o.style.color = r), i && (o.style.fontSize = i);
 	let s = (t = n.depth) == null ? 0 : t;
-	s > 0 && (o.style.marginLeft = `${s * 24}px`);
-	let c = Ot(n.style, s);
+	if (s > 0) {
+		let e = n.style === "ordered" ? 26 : 27;
+		o.style.marginLeft = `${s * e}px`;
+	}
+	let c = It(n.style, s);
 	c.setAttribute("data-list-marker", "true"), c.setAttribute("data-blok-mutation-free", "true"), o.appendChild(c);
 	let l = document.createElement("div");
-	return l.className = C("flex-1 min-w-0 outline-hidden", ...w), l.setAttribute("data-blok-testid", St.contentContainer), l.contentEditable = e.readOnly ? "false" : "true", l.innerHTML = n.text, Ct(l, a), o.appendChild(l), o;
-}, Dt = (e) => {
+	return l.className = x("flex-1 min-w-0 outline-hidden", ...S), l.setAttribute("data-blok-testid", At.contentContainer), l.contentEditable = e.readOnly ? "false" : "true", l.innerHTML = n.text, jt(l, a), o.appendChild(l), o;
+}, Ft = (e) => {
 	var t;
 	let { data: n, itemColor: r, itemSize: i, placeholder: a, readOnly: o } = e, s = document.createElement("div");
-	s.setAttribute("role", "listitem"), s.className = vt, r && (s.style.color = r), i && (s.style.fontSize = i);
+	s.setAttribute("role", "listitem"), s.className = Et, r && (s.style.color = r), i && (s.style.fontSize = i);
 	let c = (t = n.depth) == null ? 0 : t;
-	c > 0 && (s.style.marginLeft = `${c * 24}px`);
+	c > 0 && (s.style.marginLeft = `${c * 27}px`);
 	let l = document.createElement("input");
-	l.type = "checkbox", l.className = yt, l.checked = !!n.checked, l.disabled = o;
+	l.type = "checkbox", l.className = Dt, l.checked = !!n.checked, l.disabled = o;
 	let u = document.createElement("div");
-	return u.className = C("flex-1 outline-hidden leading-[1.6em]", n.checked ? "line-through opacity-60" : "", ...w), u.setAttribute("data-blok-testid", St.checklistContent), u.setAttribute("data-checked", String(n.checked)), u.contentEditable = o ? "false" : "true", u.innerHTML = n.text, Ct(u, a), s.appendChild(l), s.appendChild(u), s;
-}, Ot = (e, t) => {
+	return u.className = x("flex-1 outline-hidden leading-[1.5]", n.checked ? "line-through opacity-60" : "", ...S), u.setAttribute("data-blok-testid", At.checklistContent), u.setAttribute("data-checked", String(n.checked)), u.contentEditable = o ? "false" : "true", u.innerHTML = n.text, jt(u, a), s.appendChild(l), s.appendChild(u), s;
+}, It = (e, t) => {
 	let n = document.createElement("span");
-	return n.className = "shrink-0 select-none", n.setAttribute("aria-hidden", "true"), n.contentEditable = "false", e === "ordered" ? (n.textContent = "1.", n.className = C(n.className, "text-right"), n.style.paddingRight = "11px", n.style.minWidth = "fit-content") : (n.textContent = kt(t), n.className = C(n.className, "w-6 text-center flex justify-center"), n.style.paddingLeft = "1px", n.style.paddingRight = "13px", n.style.fontSize = "24px", n.style.fontFamily = "Arial"), n;
-}, kt = (e) => {
+	return n.className = "shrink-0 select-none", n.setAttribute("aria-hidden", "true"), n.contentEditable = "false", e === "ordered" ? (n.textContent = "1.", n.className = x(n.className, "text-right"), n.style.paddingRight = "11px", n.style.minWidth = "fit-content") : (n.textContent = Lt(t), n.className = x(n.className, "w-6 text-center flex justify-center"), n.style.paddingLeft = "1px", n.style.paddingRight = "13px", n.style.fontSize = "24px", n.style.fontFamily = "Arial"), n;
+}, Lt = (e) => {
 	let t = [
 		"•",
 		"◦",
 		"▪"
 	];
 	return t[e % t.length];
-}, At = (e) => {
+}, Rt = (e) => {
 	let { data: t, readOnly: n, placeholder: r, itemColor: i, itemSize: a, element: o, setupItemPlaceholder: s, onCheckboxChange: c, keydownHandler: l } = e;
 	if (!o) return null;
 	let u = o.parentNode;
 	if (!u) return null;
-	let d = wt({
+	let d = Mt({
 		data: t,
 		readOnly: n,
 		placeholder: r,
@@ -708,14 +711,14 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		});
 	}
 	return u.replaceChild(d.wrapper, o), d.wrapper;
-}, jt = (e, t, n) => {
+}, zt = (e, t, n) => {
 	if (!t) return e;
-	let r = n(), i = S({
-		text: r ? Ge(r.innerHTML) : e.text,
+	let r = n(), i = b({
+		text: r ? $e(r.innerHTML) : e.text,
 		style: e.style
 	}, e.style === "checklist" ? { checked: !!e.checked } : {});
 	return e.start !== void 0 && e.start !== 1 && (i.start = e.start), e.depth !== void 0 && e.depth > 0 && (i.depth = e.depth), i;
-}, Mt = (e, t, n, r, i) => {
+}, Bt = (e, t, n, r, i) => {
 	var a, o;
 	if (!n) return {
 		newData: e,
@@ -726,7 +729,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		newData: e,
 		inPlace: !1
 	};
-	let d = "depth" in t ? t.depth : 0, f = S(S(S({}, e), t), {}, { depth: d }), p = r();
+	let d = "depth" in t ? t.depth : 0, f = b(b(b({}, e), t), {}, { depth: d }), p = r();
 	if (p && typeof t.text == "string" && (p.innerHTML = t.text), s !== c) return i.adjustDepthTo(c), i.updateMarkerForDepth(c, u), {
 		newData: f,
 		inPlace: !0
@@ -739,7 +742,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		newData: f,
 		inPlace: !0
 	};
-}, Nt = (e, t) => {
+}, Vt = (e, t) => {
 	let { element: n, getContentElement: r, parseHTML: i, data: a } = e;
 	if (!n) return;
 	a.text += t.text;
@@ -748,29 +751,29 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		let e = i(t.text);
 		o.appendChild(e), o.normalize();
 	}
-}, Pt = (e, t, n, r) => e.map((e) => ({
+}, Ht = (e, t, n, r) => e.map((e) => ({
 	icon: e.icon,
 	title: n(`toolNames.${e.titleKey}`),
 	onActivate: () => r(e.style),
 	closeOnActivate: !0,
 	isActive: t === e.style
-})), Ft = (e) => {
+})), Ut = (e) => {
 	if (!e) return;
 	let t = (e.getAttribute("style") || "").match(/margin-left:\s*(\d+)px/);
 	if (!t) return;
 	let n = parseInt(t[1], 10);
 	return n > 0 ? { left: n } : void 0;
-}, It = (e) => {
+}, Wt = (e) => {
 	let t = e.closest("[data-list-depth]");
 	if (!t) return;
 	let n = t.getAttribute("data-list-depth");
 	if (n === null) return;
 	let r = parseInt(n, 10);
-	return r > 0 ? { left: r * 24 } : void 0;
-}, Lt = (e) => {
-	let t = Ft(e.closest("[role=\"listitem\"]") || e.querySelector("[role=\"listitem\"]"));
-	return t === void 0 ? It(e) : t;
-}, Rt = (e, t) => {
+	return r > 0 ? { left: r * 27 } : void 0;
+}, Gt = (e) => {
+	let t = Ut(e.closest("[role=\"listitem\"]") || e.querySelector("[role=\"listitem\"]"));
+	return t === void 0 ? Wt(e) : t;
+}, Kt = (e, t) => {
 	let n = document.createRange();
 	if (n.setStart(e, 0), n.setEnd(t.startContainer, t.startOffset), !e.lastChild) return {
 		beforeContent: "",
@@ -778,32 +781,32 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	};
 	let r = document.createRange();
 	return r.setStart(t.endContainer, t.endOffset), r.setEndAfter(e.lastChild), {
-		beforeContent: zt(n.cloneContents()),
-		afterContent: zt(r.cloneContents())
+		beforeContent: qt(n.cloneContents()),
+		afterContent: qt(r.cloneContents())
 	};
-}, zt = (e) => {
+}, qt = (e) => {
 	let t = document.createElement("div");
 	return t.appendChild(e), t.innerHTML;
-}, Bt = (e) => {
+}, Jt = (e) => {
 	let t = document.createElement("div");
 	t.innerHTML = e.trim();
 	let n = document.createDocumentFragment();
 	return n.append(...Array.from(t.childNodes)), n;
-}, Vt = (e, t) => {
+}, Yt = (e, t) => {
 	let n = document.createRange();
 	return n.selectNodeContents(e), n.setEnd(t.startContainer, t.startOffset), n.toString().length === 0;
-}, Ht = (e, t) => {
+}, Xt = (e, t) => {
 	let n = document.createRange();
 	n.selectNodeContents(e), n.setEnd(t.startContainer, t.startOffset);
 	let r = n.toString().length === 0, i = document.createRange();
 	i.selectNodeContents(e), i.setStart(t.endContainer, t.endOffset);
 	let a = i.toString().length === 0;
 	return r && a;
-}, Ut = (e) => {
+}, Zt = (e) => {
 	if (typeof e != "object" || !e) return !1;
 	let t = Object.entries(e).find(([e]) => e === "items");
 	return t === void 0 ? !1 : Array.isArray(t[1]);
-}, Wt = (e) => typeof e == "object" && !!e, Gt = (e) => typeof e == "string" ? e : "", Kt = (e, t) => e === "unordered" || e === "ordered" || e === "checklist" ? e : t, qt = (e) => !!e, Jt = (e, t) => typeof e == "number" ? e : t, Yt = (e, t) => {
+}, Qt = (e) => typeof e == "object" && !!e, $t = (e) => typeof e == "string" ? e : "", en = (e, t) => e === "unordered" || e === "ordered" || e === "checklist" ? e : t, tn = (e) => !!e, nn = (e, t) => typeof e == "number" ? e : t, rn = (e, t) => {
 	let n = t.defaultStyle || "unordered";
 	if (!e || typeof e != "object") return {
 		text: "",
@@ -811,18 +814,18 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		checked: !1,
 		depth: 0
 	};
-	if (Ut(e)) {
+	if (Zt(e)) {
 		let t = e.items[0], r = (t == null ? void 0 : t.content) || "", i = (t == null ? void 0 : t.checked) || !1;
-		return S({
+		return b({
 			text: r,
 			style: e.style || n,
 			checked: !!i,
 			depth: 0
 		}, e.start !== void 0 && e.start !== 1 ? { start: e.start } : {});
 	}
-	if (Wt(e)) {
-		let t = Gt(e.text), r = Kt(e.style, n), i = qt(e.checked), a = Jt(e.depth, 0), o = e.start, s = typeof o == "number" && o !== void 0 && o !== 1 ? o : void 0;
-		return S({
+	if (Qt(e)) {
+		let t = $t(e.text), r = en(e.style, n), i = tn(e.checked), a = nn(e.depth, 0), o = e.start, s = typeof o == "number" && o !== void 0 && o !== 1 ? o : void 0;
+		return b({
 			text: t,
 			style: r,
 			checked: i,
@@ -835,7 +838,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		checked: !1,
 		depth: 0
 	};
-}, Xt = class {
+}, an = class {
 	constructor(e) {
 		this.blocks = e;
 	}
@@ -845,12 +848,13 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		return !t || t.name !== "list" ? 0 : this.getBlockDepth(t) + 1;
 	}
 	getTargetDepthForMove(e) {
-		let { blockIndex: t, currentDepth: n } = e, r = this.getMaxAllowedDepth(t);
-		if (n > r) return r;
-		let i = this.blocks.getBlockByIndex(t + 1), a = i && i.name === "list", o = a ? this.getBlockDepth(i) : 0;
-		if (a && o > n && o <= r) return o;
-		let s = t > 0 ? this.blocks.getBlockByIndex(t - 1) : void 0, c = s && s.name === "list", l = c ? this.getBlockDepth(s) : 0;
-		return c && !a && l > n && l <= r ? l : n;
+		let { blockIndex: t, currentDepth: n, skipDepthPromotion: r } = e, i = this.getMaxAllowedDepth(t);
+		if (n > i) return i;
+		if (r) return n;
+		let a = this.blocks.getBlockByIndex(t + 1), o = a && a.name === "list", s = o ? this.getBlockDepth(a) : 0;
+		if (o && s > n && s <= i) return s;
+		let c = t > 0 ? this.blocks.getBlockByIndex(t - 1) : void 0, l = c && c.name === "list", u = l ? this.getBlockDepth(c) : 0;
+		return l && !o && u > n && u <= i ? u : n;
 	}
 	isValidDepth(e, t) {
 		let n = this.getMaxAllowedDepth(e);
@@ -860,9 +864,9 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		var t;
 		if (!e) return 0;
 		let n = (t = e.holder) == null || (t = t.querySelector("[role=\"listitem\"]")) == null ? void 0 : t.getAttribute("style"), r = n == null ? void 0 : n.match(/margin-left:\s*(\d+)px/);
-		return r ? Math.round(parseInt(r[1], 10) / 24) : 0;
+		return r ? Math.round(parseInt(r[1], 10) / 27) : 0;
 	}
-}, Zt = (e, t) => {
+}, on = (e, t) => {
 	if (!e) return null;
 	if (t === "checklist") {
 		let t = e.querySelector("[contenteditable]");
@@ -870,15 +874,15 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	}
 	let n = e.querySelector("[data-blok-testid=\"list-content-container\"]");
 	return n instanceof HTMLElement ? n : null;
-}, Qt = (e, t, n) => {
+}, sn = (e, t, n) => {
 	e && e.setAttribute("data-list-depth", String(n));
 	let r = e == null ? void 0 : e.querySelector("[role=\"listitem\"]");
-	r instanceof HTMLElement && (r.style.marginLeft = n > 0 ? `${n * 24}px` : ""), t.depth = n;
-}, $t = (e, t) => t.getBlockDepth(e), en = (e, t) => t.getBlockStyle(e), tn = (e, t) => t.getBulletCharacter(e), nn = (e, t, n, r, i) => {
+	r instanceof HTMLElement && (r.style.marginLeft = n > 0 ? `${n * 27}px` : ""), t.depth = n;
+}, cn = (e, t) => t.getBlockDepth(e), ln = (e, t) => t.getBlockStyle(e), un = (e, t) => t.getBulletCharacter(e), dn = (e, t, n, r, i) => {
 	var a;
 	let o = e ? (a = r.getBlockIndex(e)) == null ? r.getCurrentBlockIndex() : a : r.getCurrentBlockIndex();
 	return o <= 0 ? 0 : i.getSiblingIndex(o, t, n);
-}, rn = (e, t, n, r, i, a) => {
+}, fn = (e, t, n, r, i, a) => {
 	var o;
 	if (e === 0) {
 		var s;
@@ -886,10 +890,10 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	}
 	let c = n ? (o = i.getBlockIndex(n)) == null ? i.getCurrentBlockIndex() : o : i.getCurrentBlockIndex(), l = a.findFirstItemIndex(c - 1, t, e, r.style);
 	return l === null ? 1 : a.getBlockStartValue(l);
-}, an = (e, t, n, r, i, a) => {
-	let o = rn(e, t, r, n, i, a) + e;
+}, pn = (e, t, n, r, i, a) => {
+	let o = fn(e, t, r, n, i, a) + e;
 	return a.formatNumber(o, t);
-}, on = (e, t, n, r) => r.findGroupStart(e, t, n), sn = (e, t, n, r) => {
+}, mn = (e, t, n, r) => r.findGroupStart(e, t, n), hn = (e, t, n, r) => {
 	if (!e) return;
 	let i = e.holder, a = i == null ? void 0 : i.querySelector("[data-list-style=\"ordered\"]");
 	if (!a) return;
@@ -897,9 +901,9 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	if (!o) return;
 	let s = t.getBlockIndex(e.id);
 	if (s == null) return;
-	let c = $t(e, n), l = en(e, r) || "ordered", u = r.getSiblingIndex(s, c, l), d = r.getGroupStartValue(s, c, u, l) + u;
+	let c = cn(e, n), l = ln(e, r) || "ordered", u = r.getSiblingIndex(s, c, l), d = r.getGroupStartValue(s, c, u, l) + u;
 	o.textContent = r.formatNumber(d, c);
-}, cn = (e, t, n, r, i, a, o, s) => {
+}, gn = (e, t, n, r, i, a, o, s) => {
 	let c = (e) => {
 		if (e >= t) return;
 		if (e === n) {
@@ -908,25 +912,25 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		}
 		let l = a.getBlockByIndex(e);
 		if (!l || l.name !== "list") return;
-		let u = $t(l, o);
+		let u = cn(l, o);
 		if (!(u < r)) {
 			if (u > r) {
 				c(e + 1);
 				return;
 			}
-			en(l, s) === i && (sn(l, a, o, s), c(e + 1));
+			ln(l, s) === i && (hn(l, a, o, s), c(e + 1));
 		}
 	};
 	c(e);
-}, ln = (e, t, n) => {
+}, _n = (e, t, n) => {
 	let r = e.getBlocksCount();
 	Array.from({ length: r }, (e, t) => t).forEach((r) => {
 		let i = e.getBlockByIndex(r);
 		if (!i || i.name !== "list") return;
 		let a = i.holder;
-		a != null && a.querySelector("[data-list-style=\"ordered\"]") && sn(i, e, t, n);
+		a != null && a.querySelector("[data-list-style=\"ordered\"]") && hn(i, e, t, n);
 	});
-}, E = (e, t, n = "end") => {
+}, w = (e, t, n = "end") => {
 	let r = () => {
 		let r = t.holder;
 		if (!r) return;
@@ -942,7 +946,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		n === "start" ? (o.setStart(i, 0), o.collapse(!0)) : (o.selectNodeContents(i), o.collapse(!1)), a.removeAllRanges(), a.addRange(o), e.caret.updateLastCaretAfterPosition();
 	}, i = t.holder;
 	(i == null ? void 0 : i.querySelector("[contenteditable=\"true\"]")) instanceof HTMLElement ? r() : requestAnimationFrame(() => r());
-}, un = async (e) => {
+}, vn = async (e) => {
 	var t;
 	let { api: n, blockId: r, data: i, element: a, getContentElement: o } = e, s = window.getSelection();
 	if (!s || !a) return;
@@ -950,49 +954,49 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	if (!c) return;
 	let l = c.innerHTML.trim();
 	if (l === "" || l === "<br>") {
-		await dn(e);
+		await yn(e);
 		return;
 	}
-	let { beforeContent: u, afterContent: d } = Rt(c, s.getRangeAt(0)), f = r ? (t = n.blocks.getBlockIndex(r)) == null ? n.blocks.getCurrentBlockIndex() : t : n.blocks.getCurrentBlockIndex();
+	let { beforeContent: u, afterContent: d } = Kt(c, s.getRangeAt(0)), f = r ? (t = n.blocks.getBlockIndex(r)) == null ? n.blocks.getCurrentBlockIndex() : t : n.blocks.getCurrentBlockIndex();
 	if (!r) {
-		c.innerHTML = u, i.text = u, E(n, n.blocks.insert(xt, S(S({
+		c.innerHTML = u, i.text = u, w(n, n.blocks.insert(kt, b(b({
 			text: d,
 			style: i.style
 		}, i.style === "checklist" ? { checked: !!i.checked } : {}), {}, { depth: i.depth }), void 0, f + 1, !0), "start");
 		return;
 	}
-	let p = n.blocks.splitBlock(r, { text: u }, xt, S(S({
+	let p = n.blocks.splitBlock(r, { text: u }, kt, b(b({
 		text: d,
 		style: i.style
 	}, i.style === "checklist" ? { checked: !!i.checked } : {}), {}, { depth: i.depth }), f + 1);
-	i.text = u, E(n, p, "start");
-}, dn = async (e) => {
+	i.text = u, w(n, p, "start");
+}, yn = async (e) => {
 	let { api: t, blockId: n, getDepth: r } = e;
 	if (r() > 0) {
-		await mn(e);
+		await Sn(e);
 		return;
 	}
-	n !== void 0 && E(t, await t.blocks.convert(n, "paragraph", { text: "" }), "start");
-}, fn = async (e, t) => {
+	n !== void 0 && w(t, await t.blocks.convert(n, "paragraph", { text: "" }), "start");
+}, bn = async (e, t) => {
 	let { api: n, blockId: r, data: i, element: a, getContentElement: o, getDepth: s, syncContentFromDOM: c } = e, l = window.getSelection();
 	if (!l || !a) return;
 	let u = l.getRangeAt(0), d = o();
 	if (!d) return;
 	c();
 	let f = i.text, p = s();
-	if (Ht(d, u) && !l.isCollapsed) {
+	if (Xt(d, u) && !l.isCollapsed) {
 		t.preventDefault(), d.innerHTML = "", i.text = "";
 		let e = document.createRange();
 		e.setStart(d, 0), e.collapse(!0), l.removeAllRanges(), l.addRange(e);
 		return;
 	}
-	if (!Vt(d, u) || (t.preventDefault(), r === void 0)) return;
+	if (!Yt(d, u) || (t.preventDefault(), r === void 0)) return;
 	let m = await n.blocks.convert(r, "paragraph", { text: f });
 	p > 0 && requestAnimationFrame(() => {
 		let e = m.holder;
-		e && (e.style.marginLeft = `${p * 24}px`, e.setAttribute("data-blok-depth", String(p)));
-	}), E(n, m, "start");
-}, pn = async (e, t) => {
+		e && (e.style.marginLeft = `${p * 27}px`, e.setAttribute("data-blok-depth", String(p)));
+	}), w(n, m, "start");
+}, xn = async (e, t) => {
 	let { api: n, blockId: r, data: i, syncContentFromDOM: a, getDepth: o } = e, s = n.blocks.getCurrentBlockIndex();
 	if (s === 0) return;
 	let c = n.blocks.getBlockByIndex(s - 1);
@@ -1001,15 +1005,15 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	if (l > t.getBlockDepth(c)) return;
 	a();
 	let u = l + 1;
-	i.depth = u, E(n, await n.blocks.update(r || "", S(S({}, i), {}, { depth: u })));
-}, mn = async (e) => {
+	i.depth = u, w(n, await n.blocks.update(r || "", b(b({}, i), {}, { depth: u })));
+}, Sn = async (e) => {
 	let { api: t, blockId: n, data: r, syncContentFromDOM: i, getDepth: a } = e, o = a();
 	if (o === 0) return;
 	i();
 	let s = o - 1;
-	r.depth = s, E(t, await t.blocks.update(n || "", S(S({}, r), {}, { depth: s })));
-}, hn = (e) => {
-	let { data: t, readOnly: n, placeholder: r, itemColor: i, itemSize: a, setupItemPlaceholder: o, onCheckboxChange: s, keydownHandler: c } = e, l = wt({
+	r.depth = s, w(t, await t.blocks.update(n || "", b(b({}, r), {}, { depth: s })));
+}, Cn = (e) => {
+	let { data: t, readOnly: n, placeholder: r, itemColor: i, itemSize: a, setupItemPlaceholder: o, onCheckboxChange: s, keydownHandler: c } = e, l = Mt({
 		data: t,
 		readOnly: n,
 		placeholder: r,
@@ -1024,14 +1028,14 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		});
 	}
 	return l.wrapper;
-}, gn = (e) => {
+}, wn = (e) => {
 	let t = (e) => {
 		if (e <= 0) return "";
 		let n = e - 1;
 		return t(Math.floor(n / 26)) + String.fromCharCode(97 + n % 26);
 	};
 	return t(e);
-}, _n = (e) => {
+}, Tn = (e) => {
 	let t = [
 		[1e3, "m"],
 		[900, "cm"],
@@ -1052,7 +1056,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		return e >= i ? a + n(e - i, r) : n(e, r + 1);
 	};
 	return n(e, 0);
-}, vn = class {
+}, En = class {
 	constructor(e) {
 		this.blocks = e;
 	}
@@ -1078,7 +1082,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	}
 	formatNumber(e, t) {
 		let n = t % 3;
-		return n === 1 ? `${gn(e)}.` : n === 2 ? `${_n(e)}.` : `${e}.`;
+		return n === 1 ? `${wn(e)}.` : n === 2 ? `${Tn(e)}.` : `${e}.`;
 	}
 	getGroupStartValue(e, t, n, r) {
 		if (n === 0) return this.getBlockStartValue(e);
@@ -1108,7 +1112,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		var t;
 		if (!e) return 0;
 		let n = (t = e.holder) == null || (t = t.querySelector("[role=\"listitem\"]")) == null ? void 0 : t.getAttribute("style"), r = n == null ? void 0 : n.match(/margin-left:\s*(\d+)px/);
-		return r ? Math.round(parseInt(r[1], 10) / 24) : 0;
+		return r ? Math.round(parseInt(r[1], 10) / 27) : 0;
 	}
 	getBlockStyle(e) {
 		var t;
@@ -1133,9 +1137,9 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		let a = this.getBlockDepth(i);
 		return a < n ? t : a > n ? this.findGroupStartRecursive(e - 1, t, n, r) : this.getBlockStyle(i) === r ? this.findGroupStartRecursive(e - 1, e, n, r) : t;
 	}
-}, yn = { value: !1 }, bn = class {
+}, Dn = { value: !1 }, On = class {
 	constructor(e) {
-		this.blocks = e, this.depthValidator = new Xt(e), this.markerCalculator = new vn(e);
+		this.blocks = e, this.depthValidator = new an(e), this.markerCalculator = new En(e);
 	}
 	updateMarker(e, t, n) {
 		let r = e.querySelector("[data-list-marker]");
@@ -1162,8 +1166,8 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		}
 	}
 	scheduleUpdateAll() {
-		yn.value || (yn.value = !0, requestAnimationFrame(() => {
-			yn.value = !1, this.updateAllMarkers();
+		Dn.value || (Dn.value = !0, requestAnimationFrame(() => {
+			Dn.value = !1, this.updateAllMarkers();
 		}));
 	}
 	findListGroupStartIndex(e, t, n) {
@@ -1202,12 +1206,12 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		})() : c) + s;
 		r.textContent = this.markerCalculator.formatNumber(l, a);
 	}
-}, xn = (e) => e instanceof HTMLElement, Sn = new Set(/* @__PURE__ */ "decimal.decimal-leading-zero.lower-roman.upper-roman.lower-greek.lower-latin.upper-latin.lower-alpha.upper-alpha.arabic-indic.armenian.bengali.cambodian.cjk-decimal.devanagari.georgian.gujarati.gurmukhi.hebrew.kannada.khmer.lao.malayalam.mongolian.myanmar.oriya.persian.telugu.thai.tibetan".split(".")), Cn = new Set([
+}, kn = (e) => e instanceof HTMLElement, An = new Set(/* @__PURE__ */ "decimal.decimal-leading-zero.lower-roman.upper-roman.lower-greek.lower-latin.upper-latin.lower-alpha.upper-alpha.arabic-indic.armenian.bengali.cambodian.cjk-decimal.devanagari.georgian.gujarati.gurmukhi.hebrew.kannada.khmer.lao.malayalam.mongolian.myanmar.oriya.persian.telugu.thai.tibetan".split(".")), jn = new Set([
 	"disc",
 	"circle",
 	"square",
 	"none"
-]), wn = (e) => {
+]), Mn = (e) => {
 	let t = e.getAttribute("data-list-style");
 	if (t === "ordered") return "ordered";
 	if (t === "unordered") return "unordered";
@@ -1216,24 +1220,24 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	let r = n.match(/list-style-type\s*:\s*([^;]+)/);
 	if (!r) return null;
 	let i = r[1].trim().toLowerCase();
-	return Sn.has(i) ? "ordered" : Cn.has(i) ? "unordered" : null;
-}, Tn = (e, t) => {
+	return An.has(i) ? "ordered" : jn.has(i) ? "unordered" : null;
+}, Nn = (e, t) => {
 	let n = e.parentElement;
-	return (n == null ? void 0 : n.tagName) === "OL" ? "ordered" : (n == null ? void 0 : n.tagName) === "UL" ? e.querySelector("input[type=\"checkbox\"]") ? "checklist" : "unordered" : wn(e) || t;
-}, En = (e) => {
+	return (n == null ? void 0 : n.tagName) === "OL" ? "ordered" : (n == null ? void 0 : n.tagName) === "UL" ? e.querySelector("input[type=\"checkbox\"]") ? "checklist" : "unordered" : Mn(e) || t;
+}, Pn = (e) => {
 	let t = e.innerHTML || e.textContent || "", n = e.querySelector("input[type=\"checkbox\"]");
 	return {
 		text: t,
 		checked: n instanceof HTMLInputElement ? n.checked : !1
 	};
-}, Dn = (e) => {
+}, Fn = (e) => {
 	let t = e.getAttribute("aria-level");
 	if (t) {
 		let e = parseInt(t, 10);
 		return Math.max(0, e - 1);
 	}
 	return 0;
-}, On = () => ({ text: {
+}, In = () => ({ text: {
 	br: !0,
 	a: {
 		href: !0,
@@ -1242,38 +1246,38 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	},
 	b: !0,
 	i: !0
-} }), kn = () => ({ tags: [{ li: {
+} }), Ln = () => ({ tags: [{ li: {
 	style: !0,
 	"aria-level": !0
-} }] }), An = () => ({
+} }] }), Rn = () => ({
 	export: (e) => e.text,
 	import: (e) => ({
 		text: e,
 		style: "unordered",
 		checked: !1
 	})
-}), jn = [
+}), zn = [
 	{
 		name: "bulletedList",
 		titleKey: "bulletedList",
 		style: "unordered",
-		icon: o
+		icon: Le
 	},
 	{
 		name: "numberedList",
 		titleKey: "numberedList",
 		style: "ordered",
-		icon: Ne
+		icon: oe
 	},
 	{
 		name: "todoList",
 		titleKey: "todoList",
 		style: "checklist",
-		icon: d
+		icon: u
 	}
-], Mn = () => [
+], Bn = () => [
 	{
-		icon: o,
+		icon: Le,
 		title: "Bulleted list",
 		titleKey: "bulletedList",
 		data: { style: "unordered" },
@@ -1287,7 +1291,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		shortcut: "-"
 	},
 	{
-		icon: Ne,
+		icon: oe,
 		title: "Numbered list",
 		titleKey: "numberedList",
 		data: { style: "ordered" },
@@ -1301,7 +1305,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		shortcut: "1."
 	},
 	{
-		icon: d,
+		icon: u,
 		title: "To-do list",
 		titleKey: "todoList",
 		data: { style: "checklist" },
@@ -1315,24 +1319,24 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		],
 		shortcut: "[]"
 	}
-], Nn = class {
+], Vn = class {
 	constructor({ data: e, config: t, api: n, readOnly: r, block: i }) {
 		this._element = null, this.handleBlockChanged = (e) => {
 			if (this.isBlockChangedEventPayload(e) && (e.event.type === "block-removed" || e.event.type === "block-added")) {
 				var t;
 				(t = this.markerManager) == null || t.scheduleUpdateAll();
 			}
-		}, this.api = n, this.readOnly = r, this._settings = t || {}, this._data = this.normalizeData(e), this.depthValidator = new Xt(n.blocks), this.markerCalculator = new vn(n.blocks), this.markerManager = this._data.style === "ordered" ? new bn(n.blocks) : null, i && (this.blockId = i.id), this._data.style === "ordered" && this.api.events.on("block changed", this.handleBlockChanged);
+		}, this.api = n, this.readOnly = r, this._settings = t || {}, this._data = this.normalizeData(e), this.depthValidator = new an(n.blocks), this.markerCalculator = new En(n.blocks), this.markerManager = this._data.style === "ordered" ? new On(n.blocks) : null, i && (this.blockId = i.id), this._data.style === "ordered" && this.api.events.on("block changed", this.handleBlockChanged);
 	}
 	isBlockChangedEventPayload(e) {
 		return typeof e == "object" && !!e && "event" in e && typeof e.event == "object" && e.event !== null && "type" in e.event && typeof e.event.type == "string";
 	}
 	normalizeData(e) {
-		return Yt(e, this._settings);
+		return rn(e, this._settings);
 	}
 	get availableStyles() {
 		let e = this._settings.styles;
-		return !e || e.length === 0 ? jn : jn.filter((t) => e.includes(t.style));
+		return !e || e.length === 0 ? zn : zn.filter((t) => e.includes(t.style));
 	}
 	get itemColor() {
 		return this._settings.itemColor;
@@ -1341,13 +1345,13 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		return this._settings.itemSize;
 	}
 	get placeholder() {
-		return this.api.i18n.t(bt);
+		return this.api.i18n.t(Ot);
 	}
 	setupItemPlaceholder(e) {
-		this.readOnly || Qe(e, this.placeholder);
+		this.readOnly || ot(e, this.placeholder);
 	}
 	render() {
-		return this._element = hn({
+		return this._element = Cn({
 			data: this._data,
 			readOnly: this.readOnly,
 			placeholder: this.placeholder,
@@ -1364,44 +1368,45 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		this.updateMarkersAfterPositionChange();
 	}
 	moved(e) {
-		this.validateAndAdjustDepthAfterMove(e.toIndex), this.updateMarkersAfterPositionChange();
+		this.validateAndAdjustDepthAfterMove(e.toIndex, e.isGroupMove), this.updateMarkersAfterPositionChange();
 	}
 	updateMarkersAfterPositionChange() {
 		this._data.style !== "ordered" || !this._element || (this.updateMarker(), this.updateSiblingListMarkers());
 	}
-	validateAndAdjustDepthAfterMove(e) {
-		let t = this.getDepth(), n = this.depthValidator.getTargetDepthForMove({
+	validateAndAdjustDepthAfterMove(e, t) {
+		let n = this.getDepth(), r = this.depthValidator.getTargetDepthForMove({
 			blockIndex: e,
-			currentDepth: t
+			currentDepth: n,
+			skipDepthPromotion: t
 		});
-		t !== n && this.adjustDepthTo(n);
+		n !== r && this.adjustDepthTo(r);
 	}
 	adjustDepthTo(e) {
-		Qt(this._element, this._data, e);
+		sn(this._element, this._data, e);
 	}
 	removed() {
 		var e;
 		this._data.style === "ordered" && (this.api.events.off("block changed", this.handleBlockChanged), (e = this.markerManager) == null || e.scheduleUpdateAll());
 	}
 	updateAllOrderedListMarkers() {
-		ln(this.api.blocks, this.depthValidator, this.markerCalculator);
+		_n(this.api.blocks, this.depthValidator, this.markerCalculator);
 	}
 	updateMarker() {
 		var e;
 		let t = (e = this._element) == null ? void 0 : e.querySelector("[data-list-marker]");
 		if (!t) return;
 		let n = this.getDepth();
-		t.textContent = an(nn(this.blockId, n, this._data.style, this.api.blocks, this.markerCalculator), n, this._data, this.blockId, this.api.blocks, this.markerCalculator);
+		t.textContent = pn(dn(this.blockId, n, this._data.style, this.api.blocks, this.markerCalculator), n, this._data, this.blockId, this.api.blocks, this.markerCalculator);
 	}
 	updateSiblingListMarkers() {
 		var e;
 		let t = this.blockId ? (e = this.api.blocks.getBlockIndex(this.blockId)) == null ? this.api.blocks.getCurrentBlockIndex() : e : this.api.blocks.getCurrentBlockIndex(), n = this.getDepth(), r = this._data.style, i = this.api.blocks.getBlocksCount();
-		cn(on(t, n, r, this.markerCalculator), i, t, n, r, this.api.blocks, this.depthValidator, this.markerCalculator);
+		gn(mn(t, n, r, this.markerCalculator), i, t, n, r, this.api.blocks, this.depthValidator, this.markerCalculator);
 	}
 	updateMarkerForDepth(e, t) {
 		var n;
 		let r = (n = this._element) == null ? void 0 : n.querySelector("[aria-hidden=\"true\"]");
-		r instanceof HTMLElement && (t === "ordered" ? r.textContent = an(nn(this.blockId, e, this._data.style, this.api.blocks, this.markerCalculator), e, this._data, this.blockId, this.api.blocks, this.markerCalculator) : r.textContent = tn(e, this.markerCalculator));
+		r instanceof HTMLElement && (t === "ordered" ? r.textContent = pn(dn(this.blockId, e, this._data.style, this.api.blocks, this.markerCalculator), e, this._data, this.blockId, this.api.blocks, this.markerCalculator) : r.textContent = un(e, this.markerCalculator));
 	}
 	updateCheckboxState(e) {
 		var t;
@@ -1431,7 +1436,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	}
 	async handleEnter() {
 		var e = this;
-		await un({
+		await vn({
 			api: e.api,
 			blockId: e.blockId,
 			data: e._data,
@@ -1443,7 +1448,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	}
 	async handleBackspace(e) {
 		var t = this;
-		await fn({
+		await bn({
 			api: t.api,
 			blockId: t.blockId,
 			data: t._data,
@@ -1455,7 +1460,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	}
 	async handleIndent() {
 		var e = this;
-		await pn({
+		await xn({
 			api: e.api,
 			blockId: e.blockId,
 			data: e._data,
@@ -1467,7 +1472,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	}
 	async handleOutdent() {
 		var e = this;
-		await mn({
+		await Sn({
 			api: e.api,
 			blockId: e.blockId,
 			data: e._data,
@@ -1485,10 +1490,10 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		n instanceof HTMLInputElement && (this._data.checked = n.checked);
 	}
 	getContentElement() {
-		return Zt(this._element, this._data.style);
+		return on(this._element, this._data.style);
 	}
 	renderSettings() {
-		return Pt(this.availableStyles, this._data.style, this.api.i18n.t, (e) => this.setStyle(e));
+		return Ht(this.availableStyles, this._data.style, this.api.i18n.t, (e) => this.setStyle(e));
 	}
 	setStyle(e) {
 		let t = this._data.style;
@@ -1498,7 +1503,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		}
 	}
 	rerender() {
-		let e = At({
+		let e = Rt({
 			data: this._data,
 			readOnly: this.readOnly,
 			placeholder: this.placeholder,
@@ -1517,10 +1522,10 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		return typeof e.text == "string";
 	}
 	save() {
-		return jt(this._data, this._element, this.getContentElement.bind(this));
+		return zt(this._data, this._element, this.getContentElement.bind(this));
 	}
 	setData(e) {
-		let t = Mt(this._data, e, this._element, this.getContentElement.bind(this), {
+		let t = Bt(this._data, e, this._element, this.getContentElement.bind(this), {
 			adjustDepthTo: this.adjustDepthTo.bind(this),
 			updateMarkerForDepth: this.updateMarkerForDepth.bind(this),
 			updateCheckboxState: this.updateCheckboxState.bind(this)
@@ -1528,31 +1533,31 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		return this._data = t.newData, t.inPlace;
 	}
 	merge(e) {
-		Nt({
+		Vt({
 			data: this._data,
 			element: this._element,
 			getContentElement: this.getContentElement.bind(this),
-			parseHTML: Bt
+			parseHTML: Jt
 		}, e);
 	}
 	static get conversionConfig() {
-		return An();
+		return Rn();
 	}
 	static get sanitize() {
-		return On();
+		return In();
 	}
 	static get pasteConfig() {
-		return kn();
+		return Ln();
 	}
 	onPaste(e) {
 		let t = e.detail;
 		if (!("data" in t)) return;
 		let n = t.data;
-		if (!xn(n)) return;
-		let { text: r, checked: i } = En(n), a = Dn(n);
+		if (!kn(n)) return;
+		let { text: r, checked: i } = Pn(n), a = Fn(n);
 		this._data = {
 			text: r,
-			style: Tn(n, this._data.style),
+			style: Nn(n, this._data.style),
 			checked: i,
 			depth: a
 		}, this.rerender();
@@ -1561,18 +1566,18 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		return !0;
 	}
 	getContentOffset(e) {
-		return Lt(e);
+		return Gt(e);
 	}
 	static get toolbox() {
-		return Mn();
+		return Bn();
 	}
-}, Pn = "data-blok-table-add-row", Fn = "data-blok-table-add-col", In = 150, Ln = 5, Rn = 40, zn = [
+}, Hn = "data-blok-table-add-row", Un = "data-blok-table-add-col", Wn = 150, Gn = 5, Kn = 40, qn = [
 	"flex",
 	"items-center",
 	"justify-center",
 	"transition-opacity",
 	"duration-150"
-], Bn = [
+], Jn = [
 	"flex",
 	"items-center",
 	"justify-center",
@@ -1580,7 +1585,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	"border-gray-300",
 	"rounded-full",
 	"group-hover/add:bg-gray-50"
-], Vn = "12", Hn = class {
+], Yn = "12", Xn = class {
 	constructor(e) {
 		this.rowHideTimeout = null, this.colHideTimeout = null, this.rowVisible = !1, this.colVisible = !1, this.interactive = !0, this.dragState = null, this.scrollContainer = null, this.boundScrollHandler = null, this.scrollContainerResizeObserver = null, this.wrapper = e.wrapper, this.grid = e.grid, this.i18n = e.i18n, this.boundAddRowClick = e.onAddRow, this.boundAddColClick = e.onAddColumn, this.onDragStart = e.onDragStart, this.onDragAddRow = e.onDragAddRow, this.onDragRemoveRow = e.onDragRemoveRow, this.onDragAddCol = e.onDragAddCol, this.onDragRemoveCol = e.onDragRemoveCol, this.onDragEnd = e.onDragEnd, this.getNewColumnWidth = e.getNewColumnWidth, this.boundMouseMove = this.handleMouseMove.bind(this), this.boundDocumentMouseMove = this.handleDocumentMouseMove.bind(this), this.boundMouseLeave = this.handleMouseLeave.bind(this), this.boundPointerMove = this.handlePointerMove.bind(this), this.boundPointerUp = this.handlePointerUp.bind(this), this.boundPointerCancel = this.handlePointerCancel.bind(this), this.boundRowPointerDown = (e) => this.handlePointerDown("row", e), this.boundColPointerDown = (e) => this.handlePointerDown("col", e), this.addRowBtn = this.createAddRowButton(), this.addColBtn = this.createAddColumnButton(), this.wrapper.appendChild(this.addRowBtn), this.wrapper.appendChild(this.addColBtn), this.syncRowButtonWidth(), this.wrapper.addEventListener("mousemove", this.boundMouseMove), this.wrapper.addEventListener("mouseleave", this.boundMouseLeave), document.addEventListener("mousemove", this.boundDocumentMouseMove), this.addRowBtn.addEventListener("pointerdown", this.boundRowPointerDown), this.addColBtn.addEventListener("pointerdown", this.boundColPointerDown);
 	}
@@ -1656,7 +1661,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		let { axis: t, startPos: n, unitSize: r } = this.dragState, i = (t === "row" ? e.clientY : e.clientX) - n, a = Math.floor(i / r);
 		for (; this.dragState.addedCount < a;) t === "row" ? this.onDragAddRow() : this.onDragAddCol(), this.dragState.addedCount++;
 		for (; this.dragState.addedCount > a;) t === "row" ? this.onDragRemoveRow() : this.onDragRemoveCol(), this.dragState.addedCount--;
-		Math.abs(i) > Ln && !this.dragState.didDrag && (this.dragState.didDrag = !0, document.body.style.cursor = t === "row" ? "row-resize" : "col-resize", re(), this.onDragStart());
+		Math.abs(i) > Gn && !this.dragState.didDrag && (this.dragState.didDrag = !0, document.body.style.cursor = t === "row" ? "row-resize" : "col-resize", h(), this.onDragStart());
 	}
 	handlePointerUp(e) {
 		if (!this.dragState) return;
@@ -1685,14 +1690,14 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	}
 	handleMouseMove(e) {
 		let t = this.grid.getBoundingClientRect(), n = this.grid.parentElement, r = n !== null && n !== this.wrapper ? Math.min(t.right, n.getBoundingClientRect().right) : t.right, i = Math.abs(e.clientY - t.bottom), a = Math.abs(e.clientX - r);
-		i <= Rn ? this.showRow() : this.scheduleHideRow(), a <= Rn ? this.showCol() : this.scheduleHideCol();
+		i <= Kn ? this.showRow() : this.scheduleHideRow(), a <= Kn ? this.showCol() : this.scheduleHideCol();
 	}
 	handleMouseLeave() {
 		this.scheduleHideRow(), this.scheduleHideCol();
 	}
 	handleDocumentMouseMove(e) {
 		if (this.wrapper.contains(e.target)) return;
-		let t = this.grid.getBoundingClientRect(), n = Rn;
+		let t = this.grid.getBoundingClientRect(), n = Kn;
 		e.clientX >= t.left - n && e.clientX <= t.right + n && e.clientY >= t.top - n && e.clientY <= t.bottom + n && this.handleMouseMove(e);
 	}
 	showRow() {
@@ -1705,13 +1710,13 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		var e;
 		!this.rowVisible || this.rowHideTimeout !== null || ((e = this.dragState) == null ? void 0 : e.axis) === "row" || (this.rowHideTimeout = setTimeout(() => {
 			this.addRowBtn.style.opacity = "0", this.addRowBtn.style.pointerEvents = "none", this.rowVisible = !1, this.rowHideTimeout = null;
-		}, In));
+		}, Wn));
 	}
 	scheduleHideCol() {
 		var e;
 		!this.colVisible || this.colHideTimeout !== null || ((e = this.dragState) == null ? void 0 : e.axis) === "col" || (this.colHideTimeout = setTimeout(() => {
 			this.addColBtn.style.opacity = "0", this.addColBtn.style.pointerEvents = "none", this.colVisible = !1, this.colHideTimeout = null;
-		}, In));
+		}, Wn));
 	}
 	clearRowTimeout() {
 		this.rowHideTimeout !== null && (clearTimeout(this.rowHideTimeout), this.rowHideTimeout = null);
@@ -1721,63 +1726,63 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	}
 	createAddRowButton() {
 		let e = document.createElement("div");
-		e.className = C(zn, "group/add", "items-start", "cursor-row-resize"), e.setAttribute(Pn, ""), e.setAttribute("contenteditable", "false"), e.style.opacity = "0", e.style.pointerEvents = "none", e.style.position = "absolute", e.style.left = "0", e.style.bottom = "-36px", e.style.zIndex = "1", e.style.height = "32px";
+		e.className = x(qn, "group/add", "items-start", "cursor-row-resize"), e.setAttribute(Hn, ""), e.setAttribute("contenteditable", "false"), e.style.opacity = "0", e.style.pointerEvents = "none", e.style.position = "absolute", e.style.left = "0", e.style.bottom = "-36px", e.style.zIndex = "1", e.style.height = "32px";
 		let t = document.createElement("div");
-		return t.className = C(Bn), t.style.width = "100%", t.style.height = "16px", this.appendIcon(t), e.appendChild(t), r(e, ve([this.i18n.t("tools.table.clickToAddRow"), this.i18n.t("tools.table.dragToAddRemoveRows")]), {
+		return t.className = x(Jn), t.style.width = "100%", t.style.height = "16px", this.appendIcon(t), e.appendChild(t), De(e, be([this.i18n.t("tools.table.clickToAddRow"), this.i18n.t("tools.table.dragToAddRemoveRows")]), {
 			placement: "bottom",
 			marginTop: -16
 		}), e;
 	}
 	createAddColumnButton() {
 		let e = document.createElement("div");
-		e.className = C(zn, "group/add", "justify-start", "cursor-col-resize"), e.setAttribute(Fn, ""), e.setAttribute("contenteditable", "false"), e.style.opacity = "0", e.style.pointerEvents = "none", e.style.position = "absolute", e.style.right = "-36px", e.style.top = "0px", e.style.bottom = "0px", e.style.width = "32px";
+		e.className = x(qn, "group/add", "justify-start", "cursor-col-resize"), e.setAttribute(Un, ""), e.setAttribute("contenteditable", "false"), e.style.opacity = "0", e.style.pointerEvents = "none", e.style.position = "absolute", e.style.right = "-36px", e.style.top = "0px", e.style.bottom = "0px", e.style.width = "32px";
 		let t = document.createElement("div");
-		return t.className = C(Bn), t.style.width = "16px", t.style.height = "100%", this.appendIcon(t), e.appendChild(t), r(e, ve([this.i18n.t("tools.table.clickToAddColumn"), this.i18n.t("tools.table.dragToAddRemoveColumns")]), { placement: "bottom" }), e;
+		return t.className = x(Jn), t.style.width = "16px", t.style.height = "100%", this.appendIcon(t), e.appendChild(t), De(e, be([this.i18n.t("tools.table.clickToAddColumn"), this.i18n.t("tools.table.dragToAddRemoveColumns")]), { placement: "bottom" }), e;
 	}
-	appendIcon(e) {
-		e.insertAdjacentHTML("beforeend", ce);
-		let t = e.querySelector("svg");
-		t && (t.setAttribute("width", Vn), t.setAttribute("height", Vn), t.setAttribute("viewBox", "0 0 24 24"), t.classList.add("text-gray-500", "pointer-events-none"));
+	appendIcon(t) {
+		t.insertAdjacentHTML("beforeend", e);
+		let n = t.querySelector("svg");
+		n && (n.setAttribute("width", Yn), n.setAttribute("height", Yn), n.setAttribute("viewBox", "0 0 24 24"), n.classList.add("text-gray-500", "pointer-events-none"));
 	}
-}, D = "data-blok-table-row", O = "data-blok-table-cell", k = "1px solid #d1d5db", Un = ["flex"], Wn = [
+}, T = "data-blok-table-row", E = "data-blok-table-cell", Zn = "1px solid var(--blok-table-border)", Qn = ["flex"], $n = [
 	"py-1",
 	"px-2",
 	"min-h-[2em]",
 	"outline-hidden",
-	"leading-normal",
+	"leading-none",
 	"text-sm",
 	"cursor-text"
-], Gn = (e) => {
+], er = (e) => {
 	let t = Math.round(100 / e * 100) / 100;
 	return Array.from({ length: e }, () => t);
-}, Kn = class {
+}, tr = class {
 	constructor(e) {
 		this.readOnly = e.readOnly;
 	}
 	createGrid(e, t, n) {
 		let r = document.createElement("div");
-		r.style.borderTop = k, r.style.borderLeft = k;
-		let i = n == null ? Gn(t) : n;
+		r.style.borderTop = Zn, r.style.borderLeft = Zn;
+		let i = n == null ? er(t) : n;
 		return Array.from({ length: e }).forEach(() => {
 			r.appendChild(this.createRow(t, i));
 		}), r;
 	}
 	fillGrid(e, t) {}
 	addRow(e, t) {
-		let n = this.getColumnCount(e), r = this.getRawCellWidths(e), i = this.createRow(n, r), a = e.querySelectorAll(`[${D}]`);
+		let n = this.getColumnCount(e), r = this.getRawCellWidths(e), i = this.createRow(n, r), a = e.querySelectorAll(`[${T}]`);
 		return t !== void 0 && t < a.length ? e.insertBefore(i, a[t]) : e.appendChild(i), i;
 	}
 	deleteRow(e, t) {
-		let n = e.querySelectorAll(`[${D}]`);
+		let n = e.querySelectorAll(`[${T}]`);
 		t < n.length && n[t].remove();
 	}
 	addColumn(e, t, n, r) {
-		let i = e.querySelectorAll(`[${D}]`), a = this.getColumnCount(e), o = n !== void 0 && n.length === a, s = o || this.detectWidthUnit(e) === "px";
+		let i = e.querySelectorAll(`[${T}]`), a = this.getColumnCount(e), o = n !== void 0 && n.length === a, s = o || this.detectWidthUnit(e) === "px";
 		return o && this.convertToPixelWidths(i, n), s ? (this.addColumnPx(i, a, t, r), !0) : (this.addColumnPercent(i, a, t), !0);
 	}
 	convertToPixelWidths(e, t) {
 		e.forEach((e) => {
-			e.querySelectorAll(`[${O}]`).forEach((e, n) => {
+			e.querySelectorAll(`[${E}]`).forEach((e, n) => {
 				if (n < t.length) {
 					let r = e;
 					r.style.width = `${t[n]}px`;
@@ -1788,7 +1793,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	addColumnPx(e, t, n, r) {
 		let i = r == null ? this.computeHalfAvgPxWidth(e, t) : r;
 		e.forEach((e) => {
-			let t = e.querySelectorAll(`[${O}]`), r = n === void 0 || n >= t.length, a = this.createCell(`${i}px`);
+			let t = e.querySelectorAll(`[${E}]`), r = n === void 0 || n >= t.length, a = this.createCell(`${i}px`);
 			if (!r) {
 				e.insertBefore(a, t[n]);
 				return;
@@ -1797,17 +1802,17 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		});
 	}
 	computeHalfAvgPxWidth(e, t) {
-		let n = e[0], r = n == null ? void 0 : n.querySelectorAll(`[${O}]`), i = Array.from(r == null ? [] : r).reduce((e, t) => e + (parseFloat(t.style.width) || 0), 0);
+		let n = e[0], r = n == null ? void 0 : n.querySelectorAll(`[${E}]`), i = Array.from(r == null ? [] : r).reduce((e, t) => e + (parseFloat(t.style.width) || 0), 0);
 		return t > 0 ? Math.round(i / t / 2 * 100) / 100 : 0;
 	}
 	addColumnPercent(e, t, n) {
 		let r = 1 - .5 / t;
 		e.forEach((e) => {
-			e.querySelectorAll(`[${O}]`).forEach((e) => {
+			e.querySelectorAll(`[${E}]`).forEach((e) => {
 				let n = e, i = parseFloat(n.style.width) || 100 / t, a = Math.round(i * r * 100) / 100;
 				n.style.width = `${a}%`;
 			});
-			let i = Math.round(100 / t / 2 * 100) / 100, a = e.querySelectorAll(`[${O}]`), o = n === void 0 || n >= a.length, s = this.createCell(`${i}%`);
+			let i = Math.round(100 / t / 2 * 100) / 100, a = e.querySelectorAll(`[${E}]`), o = n === void 0 || n >= a.length, s = this.createCell(`${i}%`);
 			if (!o) {
 				e.insertBefore(s, a[n]);
 				return;
@@ -1816,77 +1821,77 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		});
 	}
 	deleteColumn(e, t) {
-		e.querySelectorAll(`[${D}]`).forEach((e) => {
-			let n = e.querySelectorAll(`[${O}]`);
+		e.querySelectorAll(`[${T}]`).forEach((e) => {
+			let n = e.querySelectorAll(`[${E}]`);
 			t >= n.length || n[t].remove();
 		});
 	}
 	moveRow(e, t, n) {
 		if (t === n) return;
-		let r = Array.from(e.querySelectorAll(`[${D}]`));
+		let r = Array.from(e.querySelectorAll(`[${T}]`));
 		if (t >= r.length || n >= r.length) return;
 		let i = r[t];
 		i.remove();
-		let a = Array.from(e.querySelectorAll(`[${D}]`));
+		let a = Array.from(e.querySelectorAll(`[${T}]`));
 		n >= a.length ? e.appendChild(i) : e.insertBefore(i, a[n]);
 	}
 	moveColumn(e, t, n) {
-		t !== n && e.querySelectorAll(`[${D}]`).forEach((e) => {
-			let r = Array.from(e.querySelectorAll(`[${O}]`));
+		t !== n && e.querySelectorAll(`[${T}]`).forEach((e) => {
+			let r = Array.from(e.querySelectorAll(`[${E}]`));
 			if (t >= r.length || n >= r.length) return;
 			let i = r[t];
 			i.remove();
-			let a = Array.from(e.querySelectorAll(`[${O}]`));
+			let a = Array.from(e.querySelectorAll(`[${E}]`));
 			n >= a.length ? e.appendChild(i) : e.insertBefore(i, a[n]);
 		});
 	}
 	getRowCount(e) {
-		return e.querySelectorAll(`[${D}]`).length;
+		return e.querySelectorAll(`[${T}]`).length;
 	}
 	getColumnCount(e) {
-		let t = e.querySelector(`[${D}]`);
-		return t ? t.querySelectorAll(`[${O}]`).length : 0;
+		let t = e.querySelector(`[${T}]`);
+		return t ? t.querySelectorAll(`[${E}]`).length : 0;
 	}
 	getCell(e, t, n) {
-		let r = e.querySelectorAll(`[${D}]`);
+		let r = e.querySelectorAll(`[${T}]`);
 		if (t >= r.length) return null;
-		let i = r[t].querySelectorAll(`[${O}]`);
+		let i = r[t].querySelectorAll(`[${E}]`);
 		return n >= i.length ? null : i[n];
 	}
 	getColWidths(e) {
-		let t = e.querySelector(`[${D}]`);
+		let t = e.querySelector(`[${T}]`);
 		if (!t) return [];
-		let n = t.querySelectorAll(`[${O}]`), r = [];
+		let n = t.querySelectorAll(`[${E}]`), r = [];
 		return n.forEach((e) => {
 			let t = parseFloat(e.style.width);
 			r.push(isNaN(t) ? 0 : t);
 		}), r;
 	}
 	detectWidthUnit(e) {
-		let t = e.querySelector(`[${D}]`);
+		let t = e.querySelector(`[${T}]`);
 		if (!t) return "%";
-		let n = t.querySelector(`[${O}]`);
+		let n = t.querySelector(`[${E}]`);
 		return n && n.style.width.endsWith("px") ? "px" : "%";
 	}
 	getRawCellWidths(e) {
-		let t = e.querySelector(`[${D}]`);
+		let t = e.querySelector(`[${T}]`);
 		if (!t) return [];
-		let n = t.querySelectorAll(`[${O}]`);
+		let n = t.querySelectorAll(`[${E}]`);
 		return Array.from(n).map((e) => e.style.width);
 	}
 	createRow(e, t) {
 		let n = document.createElement("div");
-		return n.className = C(Un), n.setAttribute(D, ""), Array.from({ length: e }).forEach((e, r) => {
+		return n.className = x(Qn), n.setAttribute(T, ""), Array.from({ length: e }).forEach((e, r) => {
 			n.appendChild(this.createCell(t[r]));
 		}), n;
 	}
 	createCell(e) {
 		let t = document.createElement("div");
-		t.className = C(Wn), t.style.borderRight = k, t.style.borderBottom = k, t.style.flexShrink = "0", t.style.overflow = "hidden", t.style.overflowWrap = "break-word", e !== void 0 && (t.style.width = typeof e == "string" ? e : `${e}%`), t.setAttribute(O, "");
+		t.className = x($n), t.style.borderRight = Zn, t.style.borderBottom = Zn, t.style.flexShrink = "0", t.style.overflow = "hidden", t.style.overflowWrap = "break-word", e !== void 0 && (t.style.width = typeof e == "string" ? e : `${e}%`), t.setAttribute(E, "");
 		let n = document.createElement("div");
-		return n.setAttribute(j, ""), t.appendChild(n), t;
+		return n.setAttribute(O, ""), t.appendChild(n), t;
 	}
-}, A = (e) => typeof e == "object" && !!e && "blocks" in e, j = "data-blok-table-cell-blocks", qn = class {
+}, D = (e) => typeof e == "object" && !!e && "blocks" in e, O = "data-blok-table-cell-blocks", nr = class {
 	constructor(e) {
 		var t;
 		this._activeCellWithBlocks = null, this.cellsPendingCheck = /* @__PURE__ */ new Set(), this.pendingCheckScheduled = !1, this.removedBlockCells = /* @__PURE__ */ new Map(), this.deferredEvents = [], this.isExitingTable = !1, this.handleBlockMutation = (e) => {
@@ -1908,9 +1913,9 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 				this.claimBlockForCell(i.cell, n.target.id), this.syncBlockToModel(i.cell, n.target.id), this.cellsPendingCheck.delete(i.cell);
 				return;
 			}
-			let a = n.target.holder, o = a.closest(`[${j}]`);
+			let a = n.target.holder, o = a.closest(`[${O}]`);
 			o && this.stripPlaceholders(o);
-			let s = o && !this.model.findCellForBlock(n.target.id) ? o.closest(`[${O}]`) : null;
+			let s = o && !this.model.findCellForBlock(n.target.id) ? o.closest(`[${E}]`) : null;
 			if (s && this.syncBlockToModel(s, n.target.id), o) return;
 			if (!this.gridElement.contains(a)) {
 				let e = this.api.blocks.getCurrentBlockIndex(), t = e >= 0 ? this.api.blocks.getBlockByIndex(e) : null;
@@ -1924,11 +1929,11 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		}, this.handleCellBlankSpaceClick = (e) => {
 			let t = e.target;
 			if (!t) return;
-			let n = t.hasAttribute(O), r = t.hasAttribute(j);
+			let n = t.hasAttribute(E), r = t.hasAttribute(O);
 			if (!n && !r) return;
-			let i = n ? t : t.closest(`[${O}]`);
+			let i = n ? t : t.closest(`[${E}]`);
 			if (!i) return;
-			let a = n ? i.querySelector(`[${j}]`) : t;
+			let a = n ? i.querySelector(`[${O}]`) : t;
 			if (!a) return;
 			let o = a.querySelectorAll("[data-blok-id]"), s = o[o.length - 1];
 			if (!s) return;
@@ -2026,7 +2031,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		this.clearActiveCellWithBlocks();
 		let r = this.getCell(e.row, e.col);
 		if (!r) return;
-		let i = r.querySelector(`[${j}]`);
+		let i = r.querySelector(`[${O}]`);
 		if (!i) return;
 		let a = i.querySelectorAll("[contenteditable=\"true\"]");
 		a.length !== 0 && ((t ? a[a.length - 1] : a[0]).focus(), (n = this.onNavigateToCell) == null || n.call(this, e));
@@ -2045,18 +2050,18 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		return r ? (n = r.querySelectorAll("[data-blok-table-cell]")[t]) == null ? null : n : null;
 	}
 	initializeCells(e) {
-		let t = this.gridElement.querySelectorAll(`[${D}]`), n = [];
+		let t = this.gridElement.querySelectorAll(`[${T}]`), n = [];
 		return e.forEach((e, r) => {
 			let i = t[r];
 			if (!i) return;
-			let a = i.querySelectorAll(`[${O}]`), o = [];
+			let a = i.querySelectorAll(`[${E}]`), o = [];
 			e.forEach((e, t) => {
 				let n = a[t];
 				if (!n) return;
-				let r = n.querySelector(`[${j}]`);
+				let r = n.querySelector(`[${O}]`);
 				if (!r) return;
-				let i = A(e) && e.blocks.length > 0 ? [...e.blocks] : null, s = i ? this.mountBlocksInCell(r, i) : [], c = {};
-				if (A(e) && (e.color !== void 0 && (c.color = e.color), e.textColor !== void 0 && (c.textColor = e.textColor)), s.length > 0) o.push(S({ blocks: i == null ? s : i }, c));
+				let i = D(e) && e.blocks.length > 0 ? [...e.blocks] : null, s = i ? this.mountBlocksInCell(r, i) : [], c = {};
+				if (D(e) && (e.color !== void 0 && (c.color = e.color), e.textColor !== void 0 && (c.textColor = e.textColor)), s.length > 0) o.push(b({ blocks: i == null ? s : i }, c));
 				else {
 					var l;
 					let t = typeof e == "string" ? e : (l = e.text) == null ? "" : l, n = t.split(/<br\s*\/?>/i).map((e) => e.trim()).filter(Boolean), a = n.length > 0 ? n : [t], s = [];
@@ -2064,7 +2069,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 						let t = this.api.blocks.insert("paragraph", { text: e }, {}, this.api.blocks.getBlocksCount(), !1);
 						r.appendChild(t.holder), this.api.blocks.setBlockParent(t.id, this.tableBlockId), s.push(t.id);
 					}
-					o.push(S({ blocks: i === null ? s : [...i, ...s] }, c));
+					o.push(b({ blocks: i === null ? s : [...i, ...s] }, c));
 				}
 				this.stripPlaceholders(r);
 			}), n.push(o);
@@ -2089,7 +2094,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	}
 	claimBlockForCell(e, t) {
 		var n, r;
-		let i = e.querySelector(`[${j}]`);
+		let i = e.querySelector(`[${O}]`);
 		if (!i) return;
 		let a = this.api.blocks.getBlockIndex(t);
 		if (a === void 0) return;
@@ -2103,12 +2108,12 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	}
 	findCellForAdjacentBlock(e) {
 		if (e < 0 || e >= this.api.blocks.getBlocksCount()) return null;
-		let t = this.api.blocks.getBlockByIndex(e), n = t == null ? void 0 : t.holder.closest(`[${O}]`);
+		let t = this.api.blocks.getBlockByIndex(e), n = t == null ? void 0 : t.holder.closest(`[${E}]`);
 		return n && this.gridElement.contains(n) ? n : null;
 	}
 	ensureCellHasBlock(e) {
 		var t, n;
-		let r = e.querySelector(`[${j}]`);
+		let r = e.querySelector(`[${O}]`);
 		r && r.querySelector("[data-blok-id]") === null && ((t = (n = this.api.blocks).transactWithoutCapture) == null || t.call(n, () => {
 			let t = this.api.blocks.insert("paragraph", { text: "" }, {}, this.api.blocks.getBlocksCount(), !0);
 			r.appendChild(t.holder), this.api.blocks.setBlockParent(t.id, this.tableBlockId), this.syncBlockToModel(e, t.id), this.stripPlaceholders(r);
@@ -2130,11 +2135,11 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		n && this.model.addBlockToCell(n.row, n.col, t);
 	}
 	getCellPosition(e) {
-		let t = e.closest(`[${D}]`);
+		let t = e.closest(`[${T}]`);
 		if (!t) return null;
-		let n = Array.from(this.gridElement.querySelectorAll(`[${D}]`)).indexOf(t);
+		let n = Array.from(this.gridElement.querySelectorAll(`[${T}]`)).indexOf(t);
 		if (n < 0) return null;
-		let r = Array.from(t.querySelectorAll(`[${O}]`)).indexOf(e);
+		let r = Array.from(t.querySelectorAll(`[${E}]`)).indexOf(e);
 		return r < 0 ? null : {
 			row: n,
 			col: r
@@ -2142,7 +2147,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	}
 	recordRemovedBlockCell(e) {
 		if (e.index === void 0) return;
-		let t = e.target.holder.closest(`[${O}]`);
+		let t = e.target.holder.closest(`[${E}]`);
 		t && this.gridElement.contains(t) && this.removedBlockCells.set(e.target.id, {
 			cell: t,
 			index: e.index
@@ -2190,7 +2195,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 	getBlockIdsFromCells(e) {
 		let t = [];
 		return Array.from(e).forEach((e) => {
-			let n = e.querySelector(`[${j}]`);
+			let n = e.querySelector(`[${O}]`);
 			n && n.querySelectorAll("[data-blok-id]").forEach((e) => {
 				let n = e.getAttribute("data-blok-id");
 				n && t.push(n);
@@ -2203,7 +2208,7 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 		});
 	}
 	deleteAllBlocks() {
-		let e = this.gridElement.querySelectorAll(`[${O}]`), t = this.getBlockIdsFromCells(e);
+		let e = this.gridElement.querySelectorAll(`[${E}]`), t = this.getBlockIdsFromCells(e);
 		this.deleteBlocks(t);
 	}
 	destroy() {
@@ -2220,106 +2225,111 @@ var gt = "outline-hidden py-[3px] mt-[2px] mb-px", _t = "outline-hidden pl-0.5 l
 };
 //#endregion
 //#region src/components/shared/color-picker.ts
-function Jn(e, t) {
+function rr() {
+	var e, t;
+	let n = document.documentElement.getAttribute("data-blok-theme");
+	return n === "dark" ? de : n === "light" ? Xe : typeof window < "u" && (e = (t = window).matchMedia) != null && e.call(t, "(prefers-color-scheme: dark)").matches ? de : Xe;
+}
+function ir(e, t) {
 	if (e === t) return !0;
-	let n = Ee(e), r = Ee(t);
+	let n = Ke(e), r = Ke(t);
 	return n === null || r === null ? !1 : n[0] === r[0] && n[1] === r[1] && n[2] === r[2];
 }
-var Yn = "flex-1 py-1.5 text-xs text-center rounded-md cursor-pointer border-none outline-hidden transition-colors", Xn = "#f7f7f5";
-function Zn(e) {
-	var t;
-	let { i18n: n, modes: r, testIdPrefix: i, onColorSelect: a } = e, o = (t = e.defaultModeIndex) == null ? 0 : t, s = {
-		modeIndex: o,
-		activeColor: null
-	}, c = document.createElement("div");
-	c.setAttribute("data-blok-testid", `${i}-picker`), c.className = "flex flex-col gap-2 p-2";
-	let l = document.createElement("div");
-	l.className = "flex gap-0.5 mb-0.5";
-	let u = [];
-	r.forEach((e, t) => {
-		let r = document.createElement("button");
-		r.setAttribute("data-blok-testid", `${i}-tab-${e.key}`), r.textContent = n.t(e.labelKey), r.addEventListener("click", () => {
-			s.modeIndex = t, d(), p();
-		}), u.push(r), l.appendChild(r);
+var ar = "var(--blok-swatch-neutral-bg)";
+function or(e) {
+	let { i18n: t, modes: n, testIdPrefix: r, onColorSelect: i } = e, a = { activeColors: Object.fromEntries(n.map((e) => [e.key, null])) }, o = document.createElement("div");
+	o.setAttribute("data-blok-testid", `${r}-picker`), o.className = "flex flex-col gap-3 p-2";
+	let s = [];
+	n.forEach((e) => {
+		let n = document.createElement("div");
+		n.setAttribute("data-blok-testid", `${r}-section-${e.key}`), n.className = "flex flex-col gap-1";
+		let i = document.createElement("div");
+		i.className = "text-xs font-medium text-text-primary/60 px-0.5", i.textContent = t.t(e.labelKey);
+		let a = document.createElement("div");
+		a.className = "grid gap-1", a.style.gridTemplateColumns = "repeat(5, 2.25rem)", s.push(a), n.appendChild(i), n.appendChild(a), o.appendChild(n);
 	});
-	let d = () => {
-		for (let [e, t] of u.entries()) t.className = C(Yn, e === s.modeIndex ? "bg-item-hover-bg font-medium" : "bg-transparent hover:bg-item-hover-bg/50");
-	}, f = document.createElement("div");
-	f.setAttribute("data-blok-testid", `${i}-grid`), f.className = "grid grid-cols-5 gap-1.5";
-	let p = () => {
-		f.innerHTML = "";
-		let e = r[s.modeIndex];
-		for (let t of ye) {
-			let n = document.createElement("button"), r = e.presetField === "text" ? t.text : t.bg, o = s.activeColor !== null && Jn(r, s.activeColor);
-			n.setAttribute("data-blok-testid", `${i}-swatch-${t.name}`), n.className = C("w-8 h-8 rounded-md cursor-pointer border-none outline-hidden", "flex items-center justify-center text-sm font-semibold", "transition-shadow ring-inset hover:ring-2 hover:ring-black/10", o && "ring-2 ring-black/30"), n.textContent = "A", e.presetField === "text" ? (n.style.color = t.text, n.style.backgroundColor = Xn) : (n.style.color = "", n.style.backgroundColor = t.bg), n.addEventListener("click", () => {
-				a(r, e.key);
-			}), f.appendChild(n);
+	let c = (e) => {
+		let o = s[e], c = n[e], l = rr();
+		o.innerHTML = "";
+		let u = a.activeColors[c.key], d = document.createElement("button"), f = u === null;
+		d.setAttribute("data-blok-testid", `${r}-swatch-${c.key}-default`), d.className = x("w-9 h-9 rounded-md cursor-pointer border-none outline-hidden", "flex items-center justify-center text-sm font-semibold", "transition-[box-shadow,transform] ring-inset hover:ring-2 hover:ring-swatch-ring-hover active:scale-90", f && "ring-2 ring-swatch-ring-hover"), d.textContent = c.presetField === "text" ? "A" : "", c.presetField === "text" && (d.style.color = "var(--blok-text-primary)"), d.style.backgroundColor = ar, d.addEventListener("click", () => {
+			i(null, c.key);
+		}), De(d, `${t.t("tools.marker.default")} ${t.t(c.labelKey).toLowerCase()}`, { placement: "top" }), o.appendChild(d);
+		for (let e of l) {
+			let n = document.createElement("button"), a = c.presetField === "text" ? e.text : e.bg, s = u !== null && ir(a, u);
+			n.setAttribute("data-blok-testid", `${r}-swatch-${c.key}-${e.name}`), n.className = x("w-9 h-9 rounded-md cursor-pointer border-none outline-hidden", "flex items-center justify-center text-sm font-semibold", "transition-[box-shadow,transform] ring-inset hover:ring-2 hover:ring-swatch-ring-hover active:scale-90", s && "ring-2 ring-swatch-ring-hover"), n.textContent = c.presetField === "text" ? "A" : "", c.presetField === "text" ? (n.style.color = e.text, n.style.backgroundColor = ar) : (n.style.color = l === de ? e.text : "#37352f", n.style.backgroundColor = e.bg), n.addEventListener("click", () => {
+				i(a, c.key);
+			}), De(n, `${t.t("tools.colorPicker.color." + e.name)} ${t.t(c.labelKey).toLowerCase()}`, { placement: "top" }), o.appendChild(n);
 		}
-	}, m = document.createElement("button");
-	return m.setAttribute("data-blok-testid", `${i}-default-btn`), m.className = C("w-full py-1.5 text-xs text-center rounded-md cursor-pointer", "bg-transparent border-none outline-hidden hover:bg-item-hover-bg", "mt-0.5 transition-colors"), m.textContent = n.t("tools.marker.default"), m.addEventListener("click", () => {
-		a(null, r[s.modeIndex].key);
-	}), d(), p(), c.appendChild(l), c.appendChild(f), c.appendChild(m), {
-		element: c,
+	}, l = () => {
+		n.forEach((e, t) => c(t));
+	};
+	return l(), {
+		element: o,
 		setActiveColor: (e, t) => {
-			s.activeColor = e;
-			let n = r.findIndex((e) => e.key === t);
-			n !== -1 && (s.modeIndex = n, d()), p();
+			let r = n.findIndex((e) => e.key === t);
+			r !== -1 && (a.activeColors[t] = e, c(r));
 		},
 		reset: () => {
-			s.modeIndex = o, s.activeColor = null, d(), p();
+			for (let e of n) a.activeColors[e.key] = null;
+			l();
 		}
 	};
 }
 //#endregion
 //#region src/tools/table/table-cell-color-picker.ts
-var Qn = (e) => ({ element: Zn({
-	i18n: e.i18n,
-	testIdPrefix: "cell-color",
-	defaultModeIndex: 1,
-	modes: [{
-		key: "textColor",
-		labelKey: "tools.marker.textColor",
-		presetField: "text"
-	}, {
-		key: "backgroundColor",
-		labelKey: "tools.marker.background",
-		presetField: "bg"
-	}],
-	onColorSelect: (t, n) => {
-		e.onColorSelect(t, n);
-	}
-}).element }), $n = [
+var sr = (e) => {
+	let t = or({
+		i18n: e.i18n,
+		testIdPrefix: "cell-color",
+		modes: [{
+			key: "textColor",
+			labelKey: "tools.marker.textColor",
+			presetField: "text"
+		}, {
+			key: "backgroundColor",
+			labelKey: "tools.marker.background",
+			presetField: "bg"
+		}],
+		onColorSelect: (n, r) => {
+			t.setActiveColor(n, r), e.onColorSelect(n, r);
+		}
+	});
+	return { element: t.element };
+}, cr = (e, t, n) => {
+	t === "col" ? Object.assign(e.style, { height: `${n}px` }) : Object.assign(e.style, { width: `${n}px` });
+}, lr = [
 	[2, 2],
 	[8, 2],
 	[2, 7],
 	[8, 7],
 	[2, 12],
 	[8, 12]
-], er = [
+], ur = [
 	[2, 2],
 	[7, 2],
 	[12, 2],
 	[2, 8],
 	[7, 8],
 	[12, 8]
-], tr = (e) => {
+], dr = (e) => {
 	let t = document.createElementNS("http://www.w3.org/2000/svg", "svg"), n = e === "horizontal";
 	t.setAttribute("width", n ? "14" : "10"), t.setAttribute("height", n ? "10" : "14"), t.setAttribute("viewBox", n ? "0 0 14 10" : "0 0 10 14"), t.setAttribute("fill", "currentColor"), t.classList.add("opacity-0", "transition-opacity", "duration-150", "text-gray-400", "pointer-events-none");
-	let r = n ? er : $n;
+	let r = n ? ur : lr;
 	for (let [e, n] of r) {
 		let r = document.createElementNS("http://www.w3.org/2000/svg", "circle");
 		r.setAttribute("cx", String(e)), r.setAttribute("cy", String(n)), r.setAttribute("r", "1.5"), t.appendChild(r);
 	}
 	return t;
-}, nr = (e, t) => {
+}, fr = (e, t) => {
 	t === "col" ? Object.assign(e.style, { height: "16px" }) : Object.assign(e.style, { width: "16px" }), e.classList.add("bg-gray-200"), e.classList.remove("bg-gray-300");
 	let n = e.querySelector("svg");
 	n && (n.classList.remove("opacity-0"), n.classList.add("opacity-100"));
-}, rr = (e, t, n) => {
-	t === "col" ? Object.assign(e.style, { height: `${n}px` }) : Object.assign(e.style, { width: `${n}px` }), e.classList.remove("bg-gray-200"), e.classList.add("bg-gray-300");
+}, pr = (e, t, n) => {
+	cr(e, t, n), e.classList.remove("bg-gray-200"), e.classList.add("bg-gray-300");
 	let r = e.querySelector("svg");
 	r && (r.classList.add("opacity-0"), r.classList.remove("opacity-100"));
-}, ir = "data-blok-table-cell-selected", ar = "2px solid #3b82f6", or = "data-blok-table-selection-pill", sr = 16, cr = 20, lr = 4, ur = [
+}, mr = "data-blok-table-cell-selected", hr = "2px solid #3b82f6", gr = "data-blok-table-selection-pill", _r = 16, vr = 20, yr = 4, br = [
 	"absolute",
 	"z-3",
 	"rounded-sm",
@@ -2332,7 +2342,7 @@ var Qn = (e) => ({ element: Zn({
 	"overflow-hidden",
 	"cursor-pointer",
 	"bg-blue-500"
-], dr = (e) => e.style.userSelect === "none", fr = class {
+], xr = (e) => e.style.userSelect === "none", Sr = class {
 	constructor(e) {
 		this.anchorCell = null, this.extentCell = null, this.isSelecting = !1, this.hasSelection = !1, this.selectedCells = [], this.overlay = null, this.pill = null, this.pillPopover = null, this.resizeObserver = null, this.lastPaintedRange = null, this.grid = e.grid, this.rectangleSelection = e.rectangleSelection, this.onSelectionActiveChange = e.onSelectionActiveChange, this.onClearContent = e.onClearContent, this.onCopy = e.onCopy, this.onCut = e.onCut, this.onCopyViaButton = e.onCopyViaButton, this.onColorChange = e.onColorChange, this.onSelectionRangeChange = e.onSelectionRangeChange, this.onPointerDragActiveChange = e.onPointerDragActiveChange, this.isPopoverOpen = e.isPopoverOpen, this.i18n = e.i18n, this.grid.style.position = "relative", this.boundPointerDown = this.handlePointerDown.bind(this), this.boundPointerMove = this.handlePointerMove.bind(this), this.boundPointerUp = this.handlePointerUp.bind(this), this.boundClearSelection = this.handleClearSelection.bind(this), this.boundCancelRectangle = this.handleCancelRectangle.bind(this), this.boundKeyDown = this.handleKeyDown.bind(this), this.boundCopyHandler = this.handleCopy.bind(this), this.boundCutHandler = this.handleCut.bind(this), this.boundPreventDragStart = this.handleDragStart.bind(this), this.grid.addEventListener("pointerdown", this.boundPointerDown), this.grid.addEventListener("dragstart", this.boundPreventDragStart), document.addEventListener("keydown", this.boundKeyDown), document.addEventListener("copy", this.boundCopyHandler), document.addEventListener("cut", this.boundCutHandler);
 	}
@@ -2349,7 +2359,7 @@ var Qn = (e) => ({ element: Zn({
 		r !== 0 && this.showProgrammaticSelection(e, 0, e, r - 1);
 	}
 	selectColumn(e) {
-		let t = this.grid.querySelectorAll(`[${D}]`).length;
+		let t = this.grid.querySelectorAll(`[${T}]`).length;
 		t !== 0 && this.showProgrammaticSelection(0, e, t - 1, e);
 	}
 	clearActiveSelection() {
@@ -2366,9 +2376,9 @@ var Qn = (e) => ({ element: Zn({
 	}
 	handlePointerDown(e) {
 		var t;
-		if (dr(this.grid) || e.button !== 0) return;
+		if (xr(this.grid) || e.button !== 0) return;
 		let n = e.target;
-		if (n.closest("[data-blok-table-grip]") || n.closest("[data-blok-table-resize]") || n.closest(`[${or}]`)) return;
+		if (n.closest("[data-blok-table-grip]") || n.closest("[data-blok-table-resize]") || n.closest(`[${gr}]`)) return;
 		let r = this.resolveCellCoord(n);
 		r && (this.hasSelection && this.lastPaintedRange !== null && this.lastPaintedRange.minRow === r.row && this.lastPaintedRange.maxRow === r.row && this.lastPaintedRange.minCol === r.col && this.lastPaintedRange.maxCol === r.col ? document.removeEventListener("pointerdown", this.boundClearSelection) : this.hasSelection && this.clearSelection(), this.anchorCell = r, this.isSelecting = !1, (t = this.onPointerDragActiveChange) == null || t.call(this, !0), document.addEventListener("mousemove", this.boundCancelRectangle, !0), document.addEventListener("pointermove", this.boundPointerMove), document.addEventListener("pointerup", this.boundPointerUp), document.addEventListener("pointercancel", this.boundPointerUp));
 	}
@@ -2410,7 +2420,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	handleClearSelection(e) {
 		let t = e.target;
-		t instanceof HTMLElement && t.closest(`[${or}]`) || t instanceof HTMLElement && t.closest("[data-blok-popover-opened]") !== null || (this.pillPopover !== null && this.destroyPillPopover(), document.removeEventListener("pointerdown", this.boundClearSelection), this.clearSelection());
+		t instanceof HTMLElement && t.closest(`[${gr}]`) || t instanceof HTMLElement && t.closest("[data-blok-popover-opened]") !== null || (this.pillPopover !== null && this.destroyPillPopover(), document.removeEventListener("pointerdown", this.boundClearSelection), this.clearSelection());
 	}
 	handleKeyDown(e) {
 		var t;
@@ -2433,7 +2443,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	restoreModifiedCells() {
 		this.destroyPillPopover(), this.disconnectResizeObserver(), this.selectedCells.forEach((e) => {
-			e.removeAttribute(ir);
+			e.removeAttribute(mr);
 		}), this.pill && (this.pill.remove(), this.pill = null), this.overlay && (this.overlay.remove(), this.overlay = null), this.selectedCells = [];
 	}
 	showProgrammaticSelection(e, t, n, r) {
@@ -2454,7 +2464,7 @@ var Qn = (e) => ({ element: Zn({
 		var e, t;
 		if (!this.anchorCell || !this.extentCell) return;
 		this.selectedCells.forEach((e) => {
-			e.removeAttribute(ir);
+			e.removeAttribute(mr);
 		}), this.selectedCells = [];
 		let n = Math.min(this.anchorCell.row, this.extentCell.row), r = Math.max(this.anchorCell.row, this.extentCell.row), i = Math.min(this.anchorCell.col, this.extentCell.col), a = Math.max(this.anchorCell.col, this.extentCell.col);
 		this.lastPaintedRange = {
@@ -2463,20 +2473,20 @@ var Qn = (e) => ({ element: Zn({
 			minCol: i,
 			maxCol: a
 		};
-		let o = this.grid.querySelectorAll(`[${D}]`);
+		let o = this.grid.querySelectorAll(`[${T}]`);
 		this.selectedCells = this.collectCellsInRange(o, n, r, i, a), this.selectedCells.forEach((e) => {
-			e.setAttribute(ir, "");
+			e.setAttribute(mr, "");
 		});
-		let s = (e = o[n]) == null ? void 0 : e.querySelectorAll(`[${O}]`)[i], c = (t = o[r]) == null ? void 0 : t.querySelectorAll(`[${O}]`)[a];
+		let s = (e = o[n]) == null ? void 0 : e.querySelectorAll(`[${E}]`)[i], c = (t = o[r]) == null ? void 0 : t.querySelectorAll(`[${E}]`)[a];
 		if (!s || !c) return;
 		let l = this.grid.getBoundingClientRect(), u = s.getBoundingClientRect(), d = c.getBoundingClientRect(), f = getComputedStyle(this.grid), p = parseFloat(f.borderTopWidth) || 0, m = parseFloat(f.borderLeftWidth) || 0, h = d.right - u.left + 1, g = d.bottom - u.top + 1, _ = u.top - l.top - p - 1, ee = u.left - l.left - m - 1;
-		this.overlay || (this.overlay = document.createElement("div"), this.overlay.setAttribute("data-blok-table-selection-overlay", ""), this.overlay.style.position = "absolute", this.overlay.style.border = ar, this.overlay.style.pointerEvents = "none", this.overlay.style.boxSizing = "border-box", this.overlay.style.borderRadius = "2px", this.grid.appendChild(this.overlay)), this.overlay.style.top = `${_}px`, this.overlay.style.left = `${ee}px`, this.overlay.style.width = `${h}px`, this.overlay.style.height = `${g}px`, this.pill || (this.pill = this.createPill(), this.grid.appendChild(this.pill)), this.pill.style.left = `${ee + h - 1}px`, this.pill.style.top = `${_ + g / 2}px`, this.observeCellResizes();
+		this.overlay || (this.overlay = document.createElement("div"), this.overlay.setAttribute("data-blok-table-selection-overlay", ""), this.overlay.style.position = "absolute", this.overlay.style.border = hr, this.overlay.style.pointerEvents = "none", this.overlay.style.boxSizing = "border-box", this.overlay.style.borderRadius = "2px", this.grid.appendChild(this.overlay)), this.overlay.style.top = `${_}px`, this.overlay.style.left = `${ee}px`, this.overlay.style.width = `${h}px`, this.overlay.style.height = `${g}px`, this.pill || (this.pill = this.createPill(), this.grid.appendChild(this.pill)), this.pill.style.left = `${ee + h - 1}px`, this.pill.style.top = `${_ + g / 2}px`, this.observeCellResizes();
 	}
 	repositionOverlay() {
 		var e, t;
 		let n = this.lastPaintedRange;
 		if (!n || !this.overlay) return;
-		let r = this.grid.querySelectorAll(`[${D}]`), i = (e = r[n.minRow]) == null ? void 0 : e.querySelectorAll(`[${O}]`)[n.minCol], a = (t = r[n.maxRow]) == null ? void 0 : t.querySelectorAll(`[${O}]`)[n.maxCol];
+		let r = this.grid.querySelectorAll(`[${T}]`), i = (e = r[n.minRow]) == null ? void 0 : e.querySelectorAll(`[${E}]`)[n.minCol], a = (t = r[n.maxRow]) == null ? void 0 : t.querySelectorAll(`[${E}]`)[n.maxCol];
 		if (!i || !a) return;
 		let o = this.grid.getBoundingClientRect(), s = i.getBoundingClientRect(), c = a.getBoundingClientRect(), l = getComputedStyle(this.grid), u = parseFloat(l.borderTopWidth) || 0, d = parseFloat(l.borderLeftWidth) || 0, f = c.right - s.left + 1, p = c.bottom - s.top + 1, m = s.top - o.top - u - 1, h = s.left - o.left - d - 1;
 		this.overlay.style.top = `${m}px`, this.overlay.style.left = `${h}px`, this.overlay.style.width = `${f}px`, this.overlay.style.height = `${p}px`, this.pill && (this.pill.style.left = `${h + f - 1}px`, this.pill.style.top = `${m + p / 2}px`);
@@ -2494,8 +2504,8 @@ var Qn = (e) => ({ element: Zn({
 	}
 	createPill() {
 		let e = document.createElement("div");
-		e.setAttribute(or, ""), e.setAttribute("contenteditable", "false"), e.className = C(ur), e.style.width = `${lr}px`, e.style.height = `${cr}px`, e.style.pointerEvents = "auto", e.style.transform = "translate(-50%, -50%)", e.style.outline = "2px solid white";
-		let t = tr("vertical");
+		e.setAttribute(gr, ""), e.setAttribute("contenteditable", "false"), e.className = x(br), e.style.width = `${yr}px`, e.style.height = `${vr}px`, e.style.pointerEvents = "auto", e.style.transform = "translate(-50%, -50%)", e.style.outline = "2px solid var(--blok-table-grip-outline, transparent)";
+		let t = dr("vertical");
 		return t.classList.remove("text-gray-400"), t.classList.add("text-white"), e.appendChild(t), e.addEventListener("mouseenter", () => {
 			this.pillPopover === null && this.expandPill();
 		}), e.addEventListener("mouseleave", () => {
@@ -2507,9 +2517,9 @@ var Qn = (e) => ({ element: Zn({
 	openPillPopover() {
 		if (this.destroyPillPopover(), !this.pill) return;
 		this.expandPill();
-		let e = g === "Meta" ? "⌘C" : "Ctrl+C", n = [];
+		let e = Qe === "Meta" ? "⌘C" : "Ctrl+C", n = [];
 		if (this.onColorChange !== void 0) {
-			let { element: e } = Qn({
+			let { element: e } = sr({
 				i18n: this.i18n,
 				onColorSelect: (e, t) => {
 					var n;
@@ -2517,7 +2527,7 @@ var Qn = (e) => ({ element: Zn({
 				}
 			});
 			n.push({
-				icon: l,
+				icon: se,
 				title: this.i18n.t("tools.table.cellColor"),
 				name: "cellColor",
 				children: {
@@ -2525,16 +2535,15 @@ var Qn = (e) => ({ element: Zn({
 						type: _.Html,
 						element: e
 					}],
-					isFlippable: !1,
-					width: "12.5rem"
+					isFlippable: !1
 				}
 			});
 		}
-		this.pillPopover = new _e({
+		this.pillPopover = new ve({
 			items: [
 				...n,
 				{
-					icon: Ce,
+					icon: Ee,
 					title: this.i18n.t("tools.table.copySelection"),
 					secondaryLabel: e,
 					closeOnActivate: !0,
@@ -2556,19 +2565,19 @@ var Qn = (e) => ({ element: Zn({
 			],
 			trigger: this.pill,
 			flippable: !0
-		}), this.pillPopover.on(Ve.Closed, () => {
+		}), this.pillPopover.on(Ge.Closed, () => {
 			this.pillPopover !== null && (this.destroyPillPopover(), this.collapsePill());
 		}), this.pillPopover.show();
 	}
 	expandPill() {
 		if (!this.pill) return;
-		this.pill.style.width = `${sr}px`;
+		this.pill.style.width = `${_r}px`;
 		let e = this.pill.querySelector("svg");
 		e && (e.classList.remove("opacity-0"), e.classList.add("opacity-100"));
 	}
 	collapsePill() {
 		if (!this.pill) return;
-		this.pill.style.width = `${lr}px`;
+		this.pill.style.width = `${yr}px`;
 		let e = this.pill.querySelector("svg");
 		e && (e.classList.add("opacity-0"), e.classList.remove("opacity-100"));
 	}
@@ -2579,13 +2588,13 @@ var Qn = (e) => ({ element: Zn({
 		}
 	}
 	resolveCellCoord(e) {
-		let t = e.closest(`[${O}]`);
+		let t = e.closest(`[${E}]`);
 		if (!t) return null;
-		let n = t.closest(`[${D}]`);
+		let n = t.closest(`[${T}]`);
 		if (!n || !this.grid.contains(n)) return null;
-		let r = Array.from(this.grid.querySelectorAll(`[${D}]`)).indexOf(n);
+		let r = Array.from(this.grid.querySelectorAll(`[${T}]`)).indexOf(n);
 		if (r < 0) return null;
-		let i = Array.from(n.querySelectorAll(`[${O}]`)).indexOf(t);
+		let i = Array.from(n.querySelectorAll(`[${E}]`)).indexOf(t);
 		return i < 0 ? null : {
 			row: r,
 			col: i
@@ -2594,7 +2603,7 @@ var Qn = (e) => ({ element: Zn({
 	clampExtentToEdge(e) {
 		var t, n, r, i, a, o;
 		if (!this.anchorCell || !this.isSelecting) return;
-		let s = this.grid.getBoundingClientRect(), c = this.grid.querySelectorAll(`[${D}]`), l = c.length, u = (t = (n = c[0]) == null ? void 0 : n.querySelectorAll("[data-blok-table-cell]").length) == null ? 0 : t;
+		let s = this.grid.getBoundingClientRect(), c = this.grid.querySelectorAll(`[${T}]`), l = c.length, u = (t = (n = c[0]) == null ? void 0 : n.querySelectorAll("[data-blok-table-cell]").length) == null ? 0 : t;
 		if (l === 0 || u === 0) return;
 		let d = {
 			row: this.clampAxis(e.clientY, s.top, s.bottom, l, (r = (i = this.extentCell) == null ? void 0 : i.row) == null ? this.anchorCell.row : r),
@@ -2604,106 +2613,106 @@ var Qn = (e) => ({ element: Zn({
 	}
 	collectCellsInRange(e, t, n, r, i) {
 		return Array.from(e).slice(t, n + 1).flatMap((e) => {
-			let t = e.querySelectorAll(`[${O}]`);
+			let t = e.querySelectorAll(`[${E}]`);
 			return Array.from(t).slice(r, i + 1).filter((e) => e instanceof HTMLElement);
 		});
 	}
 	clampAxis(e, t, n, r, i) {
 		return e < t ? 0 : e > n ? r - 1 : i;
 	}
-}, M = (e) => {
-	let t = e.querySelector(`[${D}]`);
+}, k = (e) => {
+	let t = e.querySelector(`[${T}]`);
 	if (!t) return [];
-	let n = t.querySelectorAll(`[${O}]`);
+	let n = t.querySelectorAll(`[${E}]`);
 	return Array.from(n).map((e) => e.getBoundingClientRect().width);
-}, pr = (e, t) => {
+}, A = (e, t) => {
 	let n = t.reduce((e, t) => e + t, 0), r = e;
-	r.style.width = `${n + 1}px`, e.querySelectorAll(`[${D}]`).forEach((e) => {
-		e.querySelectorAll(`[${O}]`).forEach((e, n) => {
+	r.style.width = `${n + 1}px`, e.querySelectorAll(`[${T}]`).forEach((e) => {
+		e.querySelectorAll(`[${E}]`).forEach((e, n) => {
 			if (n < t.length) {
 				let r = e;
 				r.style.width = `${t[n]}px`;
 			}
 		});
 	});
-}, mr = (e, t) => {
-	let n = Array.from(e.querySelectorAll(`[${D}]`)), r = n.findIndex((e) => Array.from(e.querySelectorAll(`[${O}]`)).includes(t));
+}, Cr = (e, t) => {
+	let n = Array.from(e.querySelectorAll(`[${T}]`)), r = n.findIndex((e) => Array.from(e.querySelectorAll(`[${E}]`)).includes(t));
 	return r === -1 ? null : {
 		row: r,
-		col: Array.from(n[r].querySelectorAll(`[${O}]`)).indexOf(t)
+		col: Array.from(n[r].querySelectorAll(`[${E}]`)).indexOf(t)
 	};
-}, hr = (e) => {
+}, wr = (e) => {
 	var t;
-	let n = e.querySelector(`[${j}]`);
+	let n = e.querySelector(`[${O}]`);
 	return n ? ((t = n.textContent) == null ? "" : t).trim().length === 0 : !0;
-}, gr = (e, t) => {
-	let n = e.querySelectorAll(`[${D}]`)[t];
+}, Tr = (e, t) => {
+	let n = e.querySelectorAll(`[${T}]`)[t];
 	if (!n) return !0;
-	let r = n.querySelectorAll(`[${O}]`);
-	return Array.from(r).every((e) => hr(e));
-}, _r = (e, t) => {
-	let n = e.querySelectorAll(`[${D}]`);
+	let r = n.querySelectorAll(`[${E}]`);
+	return Array.from(r).every((e) => wr(e));
+}, Er = (e, t) => {
+	let n = e.querySelectorAll(`[${T}]`);
 	return Array.from(n).every((e) => {
-		let n = e.querySelectorAll(`[${O}]`)[t];
-		return !n || hr(n);
+		let n = e.querySelectorAll(`[${E}]`)[t];
+		return !n || wr(n);
 	});
-}, vr = (e) => {
-	let t = e.querySelectorAll(`[${D}]`), n = t[0];
+}, Dr = (e) => {
+	let t = e.querySelectorAll(`[${T}]`), n = t[0];
 	if (!n) return;
-	let r = n.querySelectorAll(`[${O}]`), i = Array.from(r).reduce((e, t) => e + (parseFloat(t.style.width) || 0), 0);
+	let r = n.querySelectorAll(`[${E}]`), i = Array.from(r).reduce((e, t) => e + (parseFloat(t.style.width) || 0), 0);
 	if (i <= 0) return;
 	let a = 100 / i;
 	t.forEach((e) => {
-		e.querySelectorAll(`[${O}]`).forEach((e) => {
+		e.querySelectorAll(`[${E}]`).forEach((e) => {
 			let t = e, n = parseFloat(t.style.width) || 0;
 			t.style.width = `${Math.round(n * a * 100) / 100}%`;
 		});
 	});
-}, yr = (e, t, n) => {
+}, Or = (e, t, n) => {
 	if (!e) return e;
 	let r = [...e], [i] = r.splice(t, 1);
 	return r.splice(n, 0, i), r;
-}, br = (e, t) => {
+}, kr = (e, t) => {
 	if (!e) return e;
 	let n = [...e];
 	return n.splice(t, 1), n.length > 0 ? n : void 0;
-}, xr = (e, t, n, r, i) => {
-	let a = n == null ? M(e) : n, o = r === void 0 ? N(a) : Math.round(r / 2 * 100) / 100;
+}, Ar = (e, t, n, r, i) => {
+	let a = n == null ? k(e) : n, o = r === void 0 ? j(a) : Math.round(r / 2 * 100) / 100;
 	i.addColumn(e, t, a, o);
 	let s = [...a];
 	return s.splice(t, 0, o), s;
-}, N = (e) => Math.round(e.reduce((e, t) => e + t, 0) / e.length / 2 * 100) / 100, Sr = (e) => e.length === 0 ? 0 : Math.round(e.reduce((e, t) => e + t, 0) / e.length * 100) / 100, Cr = (e, t, n) => {
+}, j = (e) => Math.round(e.reduce((e, t) => e + t, 0) / e.length / 2 * 100) / 100, jr = (e) => e.length === 0 ? 0 : Math.round(e.reduce((e, t) => e + t, 0) / e.length * 100) / 100, Mr = (e, t, n) => {
 	var r;
 	if (!e) return [];
-	let i = e.querySelectorAll(`[${D}]`)[n];
+	let i = e.querySelectorAll(`[${T}]`)[n];
 	return i ? (r = t == null ? void 0 : t.getBlockIdsFromCells(i.querySelectorAll("[data-blok-table-cell]"))) == null ? [] : r : [];
-}, wr = (e, t, n) => {
+}, Nr = (e, t, n) => {
 	var r;
 	if (!e) return [];
-	let i = e.querySelectorAll(`[${D}]`), a = [];
+	let i = e.querySelectorAll(`[${T}]`), a = [];
 	return i.forEach((e) => {
-		let t = e.querySelectorAll(`[${O}]`);
+		let t = e.querySelectorAll(`[${E}]`);
 		n < t.length && a.push(t[n]);
 	}), (r = t == null ? void 0 : t.getBlockIdsFromCells(a)) == null ? [] : r;
-}, P = (e, t) => {
-	e.querySelectorAll(`[${O}]`).forEach((e) => {
+}, M = (e, t) => {
+	e.querySelectorAll(`[${E}]`).forEach((e) => {
 		t == null || t.ensureCellHasBlock(e);
 	});
-}, Tr = (e, t, n, r) => {
-	let i = e.querySelectorAll(`[${D}]`);
+}, Pr = (e, t, n, r) => {
+	let i = e.querySelectorAll(`[${T}]`);
 	t.forEach((e, t) => {
 		let r = i[t];
 		if (!r) return;
-		let a = r.querySelectorAll(`[${O}]`);
+		let a = r.querySelectorAll(`[${E}]`);
 		e.forEach((e, t) => {
 			var r;
 			let i = a[t];
 			if (!i) return;
-			let o = i.querySelector(`[${j}]`);
+			let o = i.querySelector(`[${O}]`);
 			if (!o) return;
 			let s = o.querySelectorAll("[data-blok-id]").length > 0;
-			if (!(!A(e) && s)) {
-				if (!A(e)) {
+			if (!(!D(e) && s)) {
+				if (!D(e)) {
 					o.innerHTML = e;
 					return;
 				}
@@ -2722,7 +2731,7 @@ var Qn = (e) => ({ element: Zn({
 			}
 		});
 	});
-}, Er = (e, t) => {
+}, Fr = (e, t) => {
 	var n, r, i, a, o, s, c;
 	if (!(typeof e == "object" && e && "content" in e)) {
 		var l, u;
@@ -2742,40 +2751,40 @@ var Qn = (e) => ({ element: Zn({
 		colWidths: m,
 		initialColWidth: d.initialColWidth
 	};
-}, Dr = (e, t) => {
+}, Ir = (e, t) => {
 	e.addEventListener("keydown", (n) => {
-		let r = n.target.closest(`[${O}]`);
+		let r = n.target.closest(`[${E}]`);
 		if (!r) return;
-		let i = mr(e, r);
+		let i = Cr(e, r);
 		i && (t == null || t.handleKeyDown(n, i));
 	});
-}, Or = ["overflow-x-auto", "overflow-y-hidden"], kr = (e) => {
-	e == null || e.classList.add(...Or);
-}, F = (e, t) => {
+}, Lr = ["overflow-x-auto", "overflow-y-hidden"], Rr = (e) => {
+	e == null || e.classList.add(...Lr);
+}, N = (e, t) => {
 	if (!e) return;
-	let n = e.querySelectorAll(`[${D}]`);
+	let n = e.querySelectorAll(`[${T}]`);
 	n.forEach((e) => {
 		e.removeAttribute("data-blok-table-heading");
 	}), t && n.length > 0 && n[0].setAttribute("data-blok-table-heading", "");
-}, I = (e, t) => {
-	let n = e.querySelectorAll(`[${D}]`);
+}, P = (e, t) => {
+	let n = e.querySelectorAll(`[${T}]`);
 	t.forEach((e, t) => {
 		if (t >= n.length) return;
-		let r = n[t].querySelectorAll(`[${O}]`);
+		let r = n[t].querySelectorAll(`[${E}]`);
 		e.forEach((e, t) => {
 			if (t >= r.length) return;
 			let n = r[t];
-			A(e) && e.color ? n.style.backgroundColor = e.color : n.style.backgroundColor = "", A(e) && e.textColor ? n.style.color = e.textColor : n.style.color = "";
+			D(e) && e.color ? n.style.backgroundColor = e.color : n.style.backgroundColor = "", D(e) && e.textColor ? n.style.color = e.textColor : n.style.color = "";
 		});
 	});
-}, L = (e, t) => {
-	e && (e.querySelectorAll(`[${O}]`).forEach((e) => {
+}, F = (e, t) => {
+	e && (e.querySelectorAll(`[${E}]`).forEach((e) => {
 		e.removeAttribute("data-blok-table-heading-col");
-	}), t && e.querySelectorAll(`[${D}]`).forEach((e) => {
-		let t = e.querySelector(`[${O}]`);
+	}), t && e.querySelectorAll(`[${T}]`).forEach((e) => {
+		let t = e.querySelector(`[${E}]`);
 		t && t.setAttribute("data-blok-table-heading-col", "");
 	}));
-}, R = (e) => !!(/^#[0-9a-f]{3,4}$/i.test(e) || /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(e) || /^rgba?\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*(,\s*[\d.]+\s*)?\)$/i.test(e) || /^hsla?\(\s*[\d.]+\s*,\s*[\d.]+%\s*,\s*[\d.]+%\s*(,\s*[\d.]+\s*)?\)$/i.test(e) || e === "transparent"), Ar = class {
+}, I = (e) => !!(/^#[0-9a-f]{3,4}$/i.test(e) || /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(e) || /^rgba?\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*(,\s*[\d.]+\s*)?\)$/i.test(e) || /^hsla?\(\s*[\d.]+\s*,\s*[\d.]+%\s*,\s*[\d.]+%\s*(,\s*[\d.]+\s*)?\)$/i.test(e) || e === "transparent"), zr = class {
 	constructor(e) {
 		var t, n, r;
 		this.withHeadingsValue = (t = e == null ? void 0 : e.withHeadings) == null ? !1 : t, this.withHeadingColumnValue = (n = e == null ? void 0 : e.withHeadingColumn) == null ? !1 : n, this.stretchedValue = (r = e == null ? void 0 : e.stretched) == null ? !1 : r, this.colWidthsValue = e != null && e.colWidths ? [...e.colWidths] : void 0, this.initialColWidthValue = e == null ? void 0 : e.initialColWidth, this.contentGrid = this.normalizeContent(e == null ? void 0 : e.content), this.blockCellMap = /* @__PURE__ */ new Map(), this.rebuildBlockCellMap();
@@ -2848,13 +2857,13 @@ var Qn = (e) => ({ element: Zn({
 		return this.isInBounds(e, t) ? [...this.contentGrid[e][t].blocks] : [];
 	}
 	setCellColor(e, t, n) {
-		this.isInBounds(e, t) && (n === void 0 ? delete this.contentGrid[e][t].color : R(n) && (this.contentGrid[e][t].color = n));
+		this.isInBounds(e, t) && (n === void 0 ? delete this.contentGrid[e][t].color : I(n) && (this.contentGrid[e][t].color = n));
 	}
 	getCellColor(e, t) {
 		if (this.isInBounds(e, t)) return this.contentGrid[e][t].color;
 	}
 	setCellTextColor(e, t, n) {
-		this.isInBounds(e, t) && (n === void 0 ? delete this.contentGrid[e][t].textColor : R(n) && (this.contentGrid[e][t].textColor = n));
+		this.isInBounds(e, t) && (n === void 0 ? delete this.contentGrid[e][t].textColor : I(n) && (this.contentGrid[e][t].textColor = n));
 	}
 	getCellTextColor(e, t) {
 		if (this.isInBounds(e, t)) return this.contentGrid[e][t].textColor;
@@ -2992,9 +3001,9 @@ var Qn = (e) => ({ element: Zn({
 		return !e || !Array.isArray(e) ? [] : e.map((e) => (e == null ? [] : e).map((e) => this.normalizeCell(e)));
 	}
 	normalizeCell(e) {
-		if (A(e)) {
+		if (D(e)) {
 			let t = { blocks: [...e.blocks] };
-			return e.color !== void 0 && R(e.color) && (t.color = e.color), e.textColor !== void 0 && R(e.textColor) && (t.textColor = e.textColor), t;
+			return e.color !== void 0 && I(e.color) && (t.color = e.color), e.textColor !== void 0 && I(e.textColor) && (t.textColor = e.textColor), t;
 		}
 		return { blocks: [] };
 	}
@@ -3027,7 +3036,7 @@ var Qn = (e) => ({ element: Zn({
 		for (let n of this.contentGrid) e < n.length && t.push(...n[e].blocks);
 		return t;
 	}
-}, jr = "data-blok-table-resize", Mr = "data-blok-table-cell", Nr = "data-blok-table-row", Pr = 50, Fr = 16, Ir = class {
+}, Br = "data-blok-table-resize", Vr = "data-blok-table-cell", Hr = "data-blok-table-row", Ur = 50, Wr = 16, Gr = class {
 	get enabled() {
 		return this._enabled;
 	}
@@ -3054,7 +3063,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	createHandle(e) {
 		let t = document.createElement("div"), n = this.getHandleLeftPx(e);
-		return t.setAttribute(jr, ""), t.setAttribute("data-col", String(e)), t.style.position = "absolute", t.style.top = "-1px", t.style.bottom = "0px", t.style.width = `${Fr}px`, t.style.left = `${n - Fr / 2}px`, t.style.cursor = "col-resize", t.style.zIndex = "2", t.style.background = "linear-gradient(to right, transparent 7px, #3b82f6 7px, #3b82f6 9px, transparent 9px)", t.style.opacity = "0", t.style.transition = "opacity 150ms ease", t.setAttribute("contenteditable", "false"), t.addEventListener("mouseenter", () => {
+		return t.setAttribute(Br, ""), t.setAttribute("data-col", String(e)), t.style.position = "absolute", t.style.top = "-1px", t.style.bottom = "0px", t.style.width = `${Wr}px`, t.style.left = `${n - Wr / 2}px`, t.style.cursor = "col-resize", t.style.zIndex = "2", t.style.background = "linear-gradient(to right, transparent 7px, #3b82f6 7px, #3b82f6 9px, transparent 9px)", t.style.opacity = "0", t.style.transition = "opacity 150ms ease", t.setAttribute("contenteditable", "false"), t.addEventListener("mouseenter", () => {
 			this.isDragging || (t.style.opacity = "1");
 		}), t.addEventListener("mouseleave", () => {
 			this.isDragging || (t.style.opacity = "0");
@@ -3066,14 +3075,14 @@ var Qn = (e) => ({ element: Zn({
 	updateHandlePositions() {
 		this.handles.forEach((e, t) => {
 			let n = this.getHandleLeftPx(t), r = e;
-			r.style.left = `${n - Fr / 2}px`;
+			r.style.left = `${n - Wr / 2}px`;
 		});
 	}
 	onPointerDown(e) {
 		var t;
 		if (!this._enabled) return;
 		let n = e.target;
-		if (!n.hasAttribute(jr)) return;
+		if (!n.hasAttribute(Br)) return;
 		e.preventDefault(), this.needsInitialApply && (this.applyWidths(), this.updateHandlePositions(), this.needsInitialApply = !1);
 		let r = n.getAttribute("data-col");
 		r !== null && (this.dragColIndex = Number(r), this.isDragging = !0, this.dragStartX = e.clientX, this.startColWidth = this.colWidths[this.dragColIndex], this.dragRowCells = this.resolveRowCells(), (t = this.onDragStart) == null || t.call(this), this.gridEl.style.userSelect = "none", n.style.opacity = "1", n.setPointerCapture && n.setPointerCapture(e.pointerId), document.addEventListener("pointermove", this.boundPointerMove), document.addEventListener("pointerup", this.boundPointerUp));
@@ -3081,7 +3090,7 @@ var Qn = (e) => ({ element: Zn({
 	onPointerMove(e) {
 		var t, n;
 		if (!this.isDragging) return;
-		let r = e.clientX - this.dragStartX, i = this.startColWidth + r, a = Math.max(Pr, i);
+		let r = e.clientX - this.dragStartX, i = this.startColWidth + r, a = Math.max(Ur, i);
 		this.colWidths[this.dragColIndex] = a, this.applyWidths((t = this.dragRowCells) == null ? void 0 : t), this.updateHandlePositions(), (n = this.onDrag) == null || n.call(this);
 	}
 	onPointerUp() {
@@ -3091,8 +3100,8 @@ var Qn = (e) => ({ element: Zn({
 		e && (e.style.opacity = "0"), document.removeEventListener("pointermove", this.boundPointerMove), document.removeEventListener("pointerup", this.boundPointerUp), this.dragRowCells = null, this.onChange([...this.colWidths]);
 	}
 	resolveRowCells() {
-		let e = this.gridEl.querySelectorAll(`[${Nr}]`);
-		return Array.from(e, (e) => Array.from(e.querySelectorAll(`[${Mr}]`)));
+		let e = this.gridEl.querySelectorAll(`[${Hr}]`);
+		return Array.from(e, (e) => Array.from(e.querySelectorAll(`[${Vr}]`)));
 	}
 	applyWidths(e = this.resolveRowCells()) {
 		let t = this.colWidths.reduce((e, t) => e + t, 0);
@@ -3102,7 +3111,7 @@ var Qn = (e) => ({ element: Zn({
 			});
 		});
 	}
-}, Lr = (e, t, n) => (n.grid.addRow(e, t), P(e, n.cellBlocks), {
+}, Kr = (e, t, n) => (n.grid.addRow(e, t), M(e, n.cellBlocks), {
 	pendingHighlight: {
 		type: "row",
 		index: t
@@ -3111,9 +3120,9 @@ var Qn = (e) => ({ element: Zn({
 	colWidths: n.data.colWidths,
 	withHeadings: n.data.withHeadings,
 	withHeadingColumn: n.data.withHeadingColumn
-}), Rr = (e, t, n) => {
-	let r = xr(e, t, n.data.colWidths, n.data.initialColWidth, n.grid);
-	return P(e, n.cellBlocks), {
+}), qr = (e, t, n) => {
+	let r = Ar(e, t, n.data.colWidths, n.data.initialColWidth, n.grid);
+	return M(e, n.cellBlocks), {
 		pendingHighlight: {
 			type: "col",
 			index: t
@@ -3123,7 +3132,7 @@ var Qn = (e) => ({ element: Zn({
 		withHeadings: n.data.withHeadings,
 		withHeadingColumn: n.data.withHeadingColumn
 	};
-}, zr = (e, t, n, r) => (r.grid.moveRow(e, t, n), {
+}, Jr = (e, t, n, r) => (r.grid.moveRow(e, t, n), {
 	pendingHighlight: null,
 	moveSelection: {
 		type: "row",
@@ -3132,16 +3141,16 @@ var Qn = (e) => ({ element: Zn({
 	colWidths: r.data.colWidths,
 	withHeadings: r.data.withHeadings,
 	withHeadingColumn: r.data.withHeadingColumn
-}), Br = (e, t, n, r) => (r.grid.moveColumn(e, t, n), {
+}), Yr = (e, t, n, r) => (r.grid.moveColumn(e, t, n), {
 	pendingHighlight: null,
 	moveSelection: {
 		type: "col",
 		index: n
 	},
-	colWidths: yr(r.data.colWidths, t, n),
+	colWidths: Or(r.data.colWidths, t, n),
 	withHeadings: r.data.withHeadings,
 	withHeadingColumn: r.data.withHeadingColumn
-}), Vr = (e, t, n) => {
+}), Xr = (e, t, n) => {
 	var r, i;
 	return (r = n.cellBlocks) == null || r.deleteBlocks((i = n.blocksToDelete) == null ? [] : i), n.grid.deleteRow(e, t), {
 		pendingHighlight: {
@@ -3153,11 +3162,11 @@ var Qn = (e) => ({ element: Zn({
 		withHeadings: n.data.withHeadings,
 		withHeadingColumn: n.data.withHeadingColumn
 	};
-}, Hr = (e, t, n) => {
+}, Zr = (e, t, n) => {
 	var r, i;
 	(r = n.cellBlocks) == null || r.deleteBlocks((i = n.blocksToDelete) == null ? [] : i), n.grid.deleteColumn(e, t);
-	let a = br(n.data.colWidths, t);
-	return a ? pr(e, a) : vr(e), {
+	let a = kr(n.data.colWidths, t);
+	return a ? A(e, a) : Dr(e), {
 		pendingHighlight: {
 			type: "col",
 			index: t < n.grid.getColumnCount(e) ? t : t - 1
@@ -3167,16 +3176,16 @@ var Qn = (e) => ({ element: Zn({
 		withHeadings: n.data.withHeadings,
 		withHeadingColumn: n.data.withHeadingColumn
 	};
-}, Ur = (e, t, n) => {
+}, Qr = (e, t, n) => {
 	switch (t.type) {
-		case "insert-row-above": return Lr(e, t.index, n);
-		case "insert-row-below": return Lr(e, t.index + 1, n);
-		case "insert-col-left": return Rr(e, t.index, n);
-		case "insert-col-right": return Rr(e, t.index + 1, n);
-		case "move-row": return zr(e, t.fromIndex, t.toIndex, n);
-		case "move-col": return Br(e, t.fromIndex, t.toIndex, n);
-		case "delete-row": return Vr(e, t.index, n);
-		case "delete-col": return Hr(e, t.index, n);
+		case "insert-row-above": return Kr(e, t.index, n);
+		case "insert-row-below": return Kr(e, t.index + 1, n);
+		case "insert-col-left": return qr(e, t.index, n);
+		case "insert-col-right": return qr(e, t.index + 1, n);
+		case "move-row": return Jr(e, t.fromIndex, t.toIndex, n);
+		case "move-col": return Yr(e, t.fromIndex, t.toIndex, n);
+		case "delete-row": return Xr(e, t.index, n);
+		case "delete-col": return Zr(e, t.index, n);
 		case "toggle-heading": return {
 			pendingHighlight: {
 				type: "row",
@@ -3198,13 +3207,13 @@ var Qn = (e) => ({ element: Zn({
 			withHeadingColumn: !n.data.withHeadingColumn
 		};
 	}
-}, Wr = 10, Gr = "data-blok-table-drag-ghost", Kr = (e) => {
-	let t = e.querySelector(`[${D}]`);
-	return t ? Array.from(t.querySelectorAll(`[${O}]`)).reduce((e, t) => {
+}, $r = 10, ei = "data-blok-table-drag-ghost", ti = (e) => {
+	let t = e.querySelector(`[${T}]`);
+	return t ? Array.from(t.querySelectorAll(`[${E}]`)).reduce((e, t) => {
 		let n = e[e.length - 1];
 		return [...e, n + t.offsetWidth];
 	}, [0]) : [0];
-}, qr = class {
+}, ni = class {
 	constructor(e) {
 		var t;
 		this.isDragging = !1, this.dragType = null, this.dragFromIndex = -1, this.dragStartX = 0, this.dragStartY = 0, this.dropIndicator = null, this.dragOverlayCells = [], this.ghostEl = null, this.ghostOffsetX = 0, this.ghostOffsetY = 0, this.resolveTracking = null, this.grid = e.grid, this.onAction = e.onAction, this.onDragStateChange = (t = e.onDragStateChange) == null ? null : t, this.boundDocPointerMove = this.handleDocPointerMove.bind(this), this.boundDocPointerUp = this.handleDocPointerUp.bind(this), this.boundDocPointerCancel = this.handleDocPointerCancel.bind(this);
@@ -3223,7 +3232,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	handleDocPointerMove(e) {
 		let t = Math.abs(e.clientX - this.dragStartX), n = Math.abs(e.clientY - this.dragStartY);
-		!this.isDragging && (t > Wr || n > Wr) && (this.isDragging = !0, this.startDrag()), this.isDragging && (this.updateDragIndicator(e), this.updateGhostPosition(e));
+		!this.isDragging && (t > $r || n > $r) && (this.isDragging = !0, this.startDrag()), this.isDragging && (this.updateDragIndicator(e), this.updateGhostPosition(e));
 	}
 	handleDocPointerUp(e) {
 		if (document.removeEventListener("pointermove", this.boundDocPointerMove), document.removeEventListener("pointerup", this.boundDocPointerUp), document.removeEventListener("pointercancel", this.boundDocPointerCancel), this.isDragging) {
@@ -3244,7 +3253,7 @@ var Qn = (e) => ({ element: Zn({
 		this.grid.style.userSelect = "none", document.body.style.cursor = "grabbing", (e = this.onDragStateChange) == null || e.call(this, !0, this.dragType), this.highlightSourceCells(), this.createDropIndicator(), this.createGhost();
 	}
 	highlightSourceCells() {
-		let e = this.grid.querySelectorAll(`[${D}]`);
+		let e = this.grid.querySelectorAll(`[${T}]`);
 		if (this.dragType === "row") {
 			this.highlightRowCells(e);
 			return;
@@ -3253,25 +3262,36 @@ var Qn = (e) => ({ element: Zn({
 	}
 	highlightRowCells(e) {
 		let t = e[this.dragFromIndex];
-		t && t.querySelectorAll(`[${O}]`).forEach((e) => {
+		if (!t) return;
+		let n = this.getDragSourceBg();
+		t.querySelectorAll(`[${E}]`).forEach((e) => {
 			let t = e;
-			t.style.backgroundColor = "#f3f4f6", t.style.opacity = "0.7", this.dragOverlayCells.push(t);
+			t.style.backgroundColor = n, t.style.opacity = "0.7", this.dragOverlayCells.push(t);
 		});
 	}
 	highlightColumnCells(e) {
+		let t = this.getDragSourceBg();
 		e.forEach((e) => {
-			let t = e.querySelectorAll(`[${O}]`);
-			if (this.dragFromIndex >= t.length) return;
-			let n = t[this.dragFromIndex];
-			n.style.backgroundColor = "#f3f4f6", n.style.opacity = "0.7", this.dragOverlayCells.push(n);
+			let n = e.querySelectorAll(`[${E}]`);
+			if (this.dragFromIndex >= n.length) return;
+			let r = n[this.dragFromIndex];
+			r.style.backgroundColor = t, r.style.opacity = "0.7", this.dragOverlayCells.push(r);
 		});
 	}
+	getDragSourceBg() {
+		return getComputedStyle(this.grid).getPropertyValue("--blok-table-drag-source-bg").trim() || "#f3f4f6";
+	}
+	isDarkMode() {
+		var e, t, n;
+		let r = document.documentElement.getAttribute("data-blok-theme");
+		return r === "dark" ? !0 : r === "light" || (e = (t = (n = window).matchMedia) == null ? void 0 : t.call(n, "(prefers-color-scheme: dark)").matches) == null ? !1 : e;
+	}
 	createDropIndicator() {
 		this.dropIndicator = document.createElement("div");
 		let e = this.dropIndicator.style;
 		if (e.position = "absolute", e.backgroundColor = "#3b82f6", e.borderRadius = "1.5px", e.zIndex = "5", e.pointerEvents = "none", this.dropIndicator.setAttribute("contenteditable", "false"), this.dragType === "row") e.height = "3px", e.left = "-1px", e.right = "0", e.transition = "top 100ms ease";
 		else {
-			let t = this.grid.querySelectorAll(`[${D}]`), n = t[t.length - 1], r = n ? n.offsetTop + n.offsetHeight : 0;
+			let t = this.grid.querySelectorAll(`[${T}]`), n = t[t.length - 1], r = n ? n.offsetTop + n.offsetHeight : 0;
 			e.width = "3px", e.top = "-1px", e.height = `${r + 1}px`, e.transition = "left 100ms ease";
 		}
 		this.grid.appendChild(this.dropIndicator);
@@ -3293,7 +3313,7 @@ var Qn = (e) => ({ element: Zn({
 	updateColIndicator(e, t) {
 		var n;
 		if (!this.dropIndicator) return;
-		let r = e.clientX - t.left, i = this.getColDropIndex(r), a = Kr(this.grid);
+		let r = e.clientX - t.left, i = this.getColDropIndex(r), a = ti(this.grid);
 		this.dropIndicator.style.left = `${((n = a[i]) == null ? 0 : n) - 1.5}px`;
 	}
 	finishDrag(e) {
@@ -3322,9 +3342,9 @@ var Qn = (e) => ({ element: Zn({
 	}
 	createGhost() {
 		let e = document.createElement("div");
-		e.setAttribute(Gr, ""), e.setAttribute("contenteditable", "false");
+		e.setAttribute(ei, ""), e.setAttribute("contenteditable", "false");
 		let t = e.style;
-		t.position = "fixed", t.pointerEvents = "none", t.opacity = "0.5", t.zIndex = "50", t.borderRadius = "4px", t.overflow = "hidden", t.boxShadow = "0 4px 12px rgba(0,0,0,0.15)", this.ghostEl = e;
+		t.position = "fixed", t.pointerEvents = "none", t.opacity = "0.5", t.zIndex = "50", t.borderRadius = "4px", t.overflow = "hidden", t.boxShadow = this.isDarkMode() ? "0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08)" : "0 4px 12px rgba(0, 0, 0, 0.15)", this.ghostEl = e;
 		let n = this.getSourceRect();
 		this.dragType === "row" && this.buildRowGhost(), this.dragType === "col" && this.buildColumnGhost(), document.body.appendChild(e), n && (t.left = `${n.left}px`, t.top = `${n.top}px`, this.ghostOffsetX = this.dragStartX - n.left, this.ghostOffsetY = this.dragStartY - n.top);
 	}
@@ -3333,22 +3353,22 @@ var Qn = (e) => ({ element: Zn({
 	}
 	getRowSourceRect() {
 		var e;
-		let t = this.grid.querySelectorAll(`[${D}]`)[this.dragFromIndex];
+		let t = this.grid.querySelectorAll(`[${T}]`)[this.dragFromIndex];
 		return (e = t == null ? void 0 : t.getBoundingClientRect()) == null ? null : e;
 	}
 	getColSourceRect() {
-		let e = this.grid.querySelectorAll(`[${D}]`), t = e[0], n = e[e.length - 1];
+		let e = this.grid.querySelectorAll(`[${T}]`), t = e[0], n = e[e.length - 1];
 		if (!t || !n) return null;
-		let r = t.querySelectorAll(`[${O}]`)[this.dragFromIndex], i = n.querySelectorAll(`[${O}]`)[this.dragFromIndex];
+		let r = t.querySelectorAll(`[${E}]`)[this.dragFromIndex], i = n.querySelectorAll(`[${E}]`)[this.dragFromIndex];
 		if (!r || !i) return null;
 		let a = r.getBoundingClientRect(), o = i.getBoundingClientRect();
 		return new DOMRect(a.left, a.top, a.width, o.bottom - a.top);
 	}
 	buildRowGhost() {
-		let e = this.grid.querySelectorAll(`[${D}]`)[this.dragFromIndex];
+		let e = this.grid.querySelectorAll(`[${T}]`)[this.dragFromIndex];
 		if (!e || !this.ghostEl) return;
 		let t = this.ghostEl.style;
-		t.display = "flex", t.height = `${e.offsetHeight}px`, e.querySelectorAll(`[${O}]`).forEach((e) => {
+		t.display = "flex", t.height = `${e.offsetHeight}px`, e.querySelectorAll(`[${E}]`).forEach((e) => {
 			var t;
 			let n = e, r = n.cloneNode(!0);
 			r.style.width = `${n.offsetWidth}px`, r.style.flexShrink = "0", r.removeAttribute("contenteditable"), (t = this.ghostEl) == null || t.appendChild(r);
@@ -3356,10 +3376,10 @@ var Qn = (e) => ({ element: Zn({
 	}
 	buildColumnGhost() {
 		if (!this.ghostEl) return;
-		let e = this.grid.querySelectorAll(`[${D}]`), t = this.ghostEl.style;
+		let e = this.grid.querySelectorAll(`[${T}]`), t = this.ghostEl.style;
 		t.display = "flex", t.flexDirection = "column", e.forEach((e) => {
 			var t;
-			let n = e.querySelectorAll(`[${O}]`);
+			let n = e.querySelectorAll(`[${E}]`);
 			if (this.dragFromIndex >= n.length) return;
 			let r = n[this.dragFromIndex], i = r.cloneNode(!0);
 			i.style.width = `${r.offsetWidth}px`, i.style.height = `${r.offsetHeight}px`, i.removeAttribute("contenteditable"), (t = this.ghostEl) == null || t.appendChild(i);
@@ -3371,7 +3391,7 @@ var Qn = (e) => ({ element: Zn({
 		this.dragType === "row" && (t.top = `${e.clientY - this.ghostOffsetY}px`), this.dragType === "col" && (t.left = `${e.clientX - this.ghostOffsetX}px`);
 	}
 	getRowDropIndex(e) {
-		let t = Array.from(this.grid.querySelectorAll(`[${D}]`)), n = t.map((e) => e.offsetTop);
+		let t = Array.from(this.grid.querySelectorAll(`[${T}]`)), n = t.map((e) => e.offsetTop);
 		if (t.length > 0) {
 			let e = t[t.length - 1];
 			n.push(e.offsetTop + e.offsetHeight);
@@ -3380,7 +3400,7 @@ var Qn = (e) => ({ element: Zn({
 		return r.indexOf(i);
 	}
 	getRowDropTopPx(e) {
-		let t = this.grid.querySelectorAll(`[${D}]`);
+		let t = this.grid.querySelectorAll(`[${T}]`);
 		if (e < t.length) return t[e].offsetTop;
 		if (t.length > 0) {
 			let e = t[t.length - 1];
@@ -3389,10 +3409,10 @@ var Qn = (e) => ({ element: Zn({
 		return 0;
 	}
 	getColDropIndex(e) {
-		let t = Kr(this.grid).map((t) => Math.abs(e - t)), n = Math.min(...t);
+		let t = ti(this.grid).map((t) => Math.abs(e - t)), n = Math.min(...t);
 		return t.indexOf(n);
 	}
-}, Jr = [
+}, ri = [
 	"flex",
 	"items-center",
 	"select-none",
@@ -3404,7 +3424,7 @@ var Qn = (e) => ({ element: Zn({
 	"mb-px",
 	"cursor-pointer",
 	"can-hover:hover:bg-item-hover-bg"
-], Yr = [
+], ii = [
 	"flex",
 	"items-center",
 	"justify-center",
@@ -3413,52 +3433,54 @@ var Qn = (e) => ({ element: Zn({
 	"mr-2",
 	"[&_svg]:w-icon",
 	"[&_svg]:h-icon"
-], Xr = [
+], ai = [
 	"mr-auto",
 	"truncate",
 	"text-sm",
 	"font-medium",
 	"leading-5"
-], Zr = [
+], oi = [
 	"relative",
-	"w-[34px]",
-	"h-[20px]",
+	"w-[30px]",
+	"h-[18px]",
 	"rounded-full",
 	"transition-colors",
-	"duration-200",
-	"shrink-0"
-], Qr = [
+	"duration-[180ms]",
+	"ease-out",
+	"shrink-0",
+	"ml-2"
+], si = [
 	"absolute",
 	"top-[2px]",
-	"w-4",
-	"h-4",
+	"w-[14px]",
+	"h-[14px]",
 	"rounded-full",
 	"bg-white",
-	"shadow-xs",
 	"transition-[left]",
-	"duration-200"
-], $r = (e) => {
+	"duration-[220ms]",
+	"[transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)]"
+], ci = (e) => {
 	let { icon: t, label: n, isActive: r, onToggle: i } = e, a = { active: r }, o = document.createElement("div");
-	o.className = C(Jr);
+	o.className = x(ri);
 	let s = document.createElement("div");
-	s.className = C(Yr), s.innerHTML = t, o.appendChild(s);
+	s.className = x(ii), s.innerHTML = t, o.appendChild(s);
 	let c = document.createElement("span");
-	c.className = C(Xr), c.textContent = n, o.appendChild(c);
+	c.className = x(ai), c.textContent = n, o.appendChild(c);
 	let l = document.createElement("div");
-	l.className = C(Zr);
+	l.className = x(oi);
 	let u = document.createElement("div");
-	u.className = C(Qr), l.appendChild(u), o.appendChild(l);
+	u.className = x(si), l.appendChild(u), o.appendChild(l);
 	let d = () => {
-		l.style.backgroundColor = a.active ? "#3b82f6" : "#d1d5db", u.style.left = a.active ? "16px" : "2px";
+		l.style.backgroundColor = a.active ? "var(--blok-toggle-on-bg)" : "var(--blok-toggle-off-bg)", u.style.left = a.active ? "14px" : "2px", u.style.backgroundColor = a.active ? "var(--blok-toggle-thumb-on-bg)" : "", u.style.boxShadow = a.active ? "0 1px 3px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.04)" : "0 1px 3px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06)";
 	};
 	return d(), o.addEventListener("click", (e) => {
 		e.stopPropagation(), a.active = !a.active, d(), i(a.active);
 	}), o;
-}, ei = (e, t) => {
+}, li = (e, t) => {
 	let n = e === 0 ? [{
 		type: _.Html,
-		element: $r({
-			icon: f,
+		element: ci({
+			icon: Ze,
 			label: t.i18n.t("tools.table.headerColumn"),
 			isActive: t.isHeadingColumn(),
 			onToggle: () => {
@@ -3466,7 +3488,7 @@ var Qn = (e) => ({ element: Zn({
 			}
 		})
 	}, { type: _.Separator }] : [], r = [{
-		icon: oe,
+		icon: ne,
 		title: t.i18n.t("tools.table.insertColumnLeft"),
 		closeOnActivate: !0,
 		onActivate: () => {
@@ -3476,7 +3498,7 @@ var Qn = (e) => ({ element: Zn({
 			});
 		}
 	}, {
-		icon: s,
+		icon: ie,
 		title: t.i18n.t("tools.table.insertColumnRight"),
 		closeOnActivate: !0,
 		onActivate: () => {
@@ -3486,7 +3508,7 @@ var Qn = (e) => ({ element: Zn({
 			});
 		}
 	}], i = t.getColumnCount() > 1, a = [{ type: _.Separator }, {
-		icon: xe,
+		icon: Ve,
 		title: t.i18n.t("tools.table.deleteColumn"),
 		isDestructive: !0,
 		isDisabled: !i,
@@ -3503,11 +3525,11 @@ var Qn = (e) => ({ element: Zn({
 		...r,
 		...a
 	];
-}, ti = (e, t) => {
-	let r = e === 0 ? [{
+}, ui = (e, t) => {
+	let n = e === 0 ? [{
 		type: _.Html,
-		element: $r({
-			icon: ne,
+		element: ci({
+			icon: r,
 			label: t.i18n.t("tools.table.headerRow"),
 			isActive: t.isHeadingRow(),
 			onToggle: () => {
@@ -3515,7 +3537,7 @@ var Qn = (e) => ({ element: Zn({
 			}
 		})
 	}, { type: _.Separator }] : [], i = [{
-		icon: We,
+		icon: re,
 		title: t.i18n.t("tools.table.insertRowAbove"),
 		closeOnActivate: !0,
 		onActivate: () => {
@@ -3525,7 +3547,7 @@ var Qn = (e) => ({ element: Zn({
 			});
 		}
 	}, {
-		icon: n,
+		icon: c,
 		title: t.i18n.t("tools.table.insertRowBelow"),
 		closeOnActivate: !0,
 		onActivate: () => {
@@ -3535,7 +3557,7 @@ var Qn = (e) => ({ element: Zn({
 			});
 		}
 	}], a = t.getRowCount() > 1, o = [{ type: _.Separator }, {
-		icon: xe,
+		icon: Ve,
 		title: t.i18n.t("tools.table.deleteRow"),
 		isDestructive: !0,
 		isDisabled: !a,
@@ -3548,30 +3570,30 @@ var Qn = (e) => ({ element: Zn({
 		}
 	}];
 	return [
-		...r,
+		...n,
 		...i,
 		...o
 	];
-}, ni = (e, t, n, r, i) => {
+}, di = (e, t, n, r, i) => {
 	i.destroyPopover(), i.clearHideTimeout();
 	let a = e === "col" ? n.col[t] : n.row[t];
 	if (!a) return {
 		popover: null,
 		grip: null
 	};
-	let o = new _e({
-		items: e === "col" ? ei(t, r) : ti(t, r),
+	let o = new ve({
+		items: e === "col" ? li(t, r) : ui(t, r),
 		trigger: a,
 		flippable: !0
 	});
-	return o.on(Ve.Closed, () => {
+	return o.on(Ge.Closed, () => {
 		var e;
 		i.destroyPopover(), i.applyVisibleClasses(a), i.scheduleHideAll(), (e = i.onGripPopoverClose) == null || e.call(i);
 	}), i.hideAllGripsExcept(a), i.applyActiveClasses(a), e === "col" ? a.style.height = "16px" : a.style.width = "16px", {
 		popover: o,
 		grip: a
 	};
-}, ri = "data-blok-table-grip", z = "data-blok-table-grip-col", ii = "data-blok-table-grip-row", ai = 150, oi = 24, si = 4, B = 4, ci = 20, li = [
+}, fi = "data-blok-table-grip", L = "data-blok-table-grip-col", pi = "data-blok-table-grip-row", mi = 150, hi = 24, R = 4, z = 4, gi = 20, B = [
 	"absolute",
 	"z-3",
 	"rounded-sm",
@@ -3584,25 +3606,25 @@ var Qn = (e) => ({ element: Zn({
 	"items-center",
 	"justify-center",
 	"overflow-hidden"
-], ui = [
+], _i = [
 	"bg-gray-300",
 	"opacity-0",
 	"pointer-events-none"
-], di = [
+], vi = [
 	"bg-gray-300",
 	"opacity-100",
 	"pointer-events-auto"
-], fi = [
+], yi = [
 	"bg-blue-500",
 	"text-white",
 	"opacity-100",
 	"pointer-events-auto"
-], pi = class {
+], bi = class {
 	constructor(e) {
 		this.colGrips = [], this.rowGrips = [], this.popoverState = {
 			popover: null,
 			grip: null
-		}, this.lockedGrip = null, this.hideTimeout = null, this.activeColGripIndex = -1, this.activeRowGripIndex = -1, this.isInsideTable = !1, this.rowResizeObserver = null, this.boundScrollHandler = null, this.grid = e.grid, this.overlay = e.overlay, this.scrollContainer = e.scrollContainer, this.getColumnCount = e.getColumnCount, this.getRowCount = e.getRowCount, this.isHeadingRow = e.isHeadingRow, this.isHeadingColumn = e.isHeadingColumn, this.onAction = e.onAction, this.onGripClick = e.onGripClick, this.onGripPopoverClose = e.onGripPopoverClose, this.i18n = e.i18n, this.drag = new qr({
+		}, this.lockedGrip = null, this.hideTimeout = null, this.activeColGripIndex = -1, this.activeRowGripIndex = -1, this.isInsideTable = !1, this.rowResizeObserver = null, this.boundScrollHandler = null, this.grid = e.grid, this.overlay = e.overlay, this.scrollContainer = e.scrollContainer, this.getColumnCount = e.getColumnCount, this.getRowCount = e.getRowCount, this.isHeadingRow = e.isHeadingRow, this.isHeadingColumn = e.isHeadingColumn, this.onAction = e.onAction, this.onGripClick = e.onGripClick, this.onGripPopoverClose = e.onGripPopoverClose, this.i18n = e.i18n, this.drag = new ni({
 			grid: this.grid,
 			onAction: this.onAction,
 			onDragStateChange: (t, n) => {
@@ -3623,7 +3645,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	handleUnlockGrip(e) {
 		document.removeEventListener("pointerdown", this.boundUnlockGrip), this.lockedGrip && (this.applyIdleClasses(this.lockedGrip), this.lockedGrip = null);
-		let t = e.target instanceof HTMLElement ? e.target : null, n = t == null ? void 0 : t.closest(`[${O}]`);
+		let t = e.target instanceof HTMLElement ? e.target : null, n = t == null ? void 0 : t.closest(`[${E}]`);
 		if (n) {
 			let e = this.getCellPosition(n);
 			e && (this.clearHideTimeout(), this.showColGrip(e.col), this.showRowGrip(e.row), this.isInsideTable = !0);
@@ -3670,18 +3692,18 @@ var Qn = (e) => ({ element: Zn({
 	}
 	createGripElement(e, t) {
 		let n = document.createElement("div");
-		n.className = C(li, ui), n.setAttribute(ri, ""), n.setAttribute(e === "col" ? z : ii, String(t)), n.setAttribute("contenteditable", "false");
-		let r = e === "col" ? oi : B, i = e === "col" ? si : ci, a = e === "col" ? si : B;
-		return n.style.width = `${r}px`, n.style.height = `${i}px`, n.style.transform = "translate(-50%, -50%)", n.style.outline = "2px solid white", n.appendChild(tr(e === "col" ? "horizontal" : "vertical")), n.addEventListener("pointerdown", this.boundPointerDown), n.addEventListener("mouseenter", () => {
-			this.overlay && this.clearHideTimeout(), this.isGripInteractionLocked() || nr(n, e);
+		n.className = x(B, _i), n.setAttribute(fi, ""), n.setAttribute(e === "col" ? L : pi, String(t)), n.setAttribute("contenteditable", "false");
+		let r = e === "col" ? hi : z, i = e === "col" ? R : gi, a = e === "col" ? R : z;
+		return n.style.width = `${r}px`, n.style.height = `${i}px`, n.style.transform = "translate(-50%, -50%)", n.style.outline = "2px solid var(--blok-table-grip-outline, transparent)", n.appendChild(dr(e === "col" ? "horizontal" : "vertical")), n.addEventListener("pointerdown", this.boundPointerDown), n.addEventListener("mouseenter", () => {
+			this.overlay && this.clearHideTimeout(), this.isGripInteractionLocked() || fr(n, e);
 		}), n.addEventListener("mouseleave", () => {
-			this.isGripInteractionLocked() || (rr(n, e, a), this.overlay && this.scheduleHideAll());
+			this.isGripInteractionLocked() || (pr(n, e, a), this.overlay && this.scheduleHideAll());
 		}), n;
 	}
 	positionGrips() {
-		let e = this.grid.querySelectorAll(`[${D}]`);
+		let e = this.grid.querySelectorAll(`[${T}]`);
 		if (!e[0]) return;
-		let t = Kr(this.grid), n = this.overlay && this.scrollContainer ? this.scrollContainer.scrollLeft : 0, r = this.overlay && this.scrollContainer ? this.scrollContainer.clientWidth : Infinity;
+		let t = ti(this.grid), n = this.overlay && this.scrollContainer ? this.scrollContainer.scrollLeft : 0, r = this.overlay && this.scrollContainer ? this.scrollContainer.clientWidth : Infinity;
 		this.colGrips.forEach((e, i) => {
 			if (i + 1 >= t.length) return;
 			let a = (t[i] + t[i + 1]) / 2 - n, o = e.style;
@@ -3696,7 +3718,7 @@ var Qn = (e) => ({ element: Zn({
 		var e;
 		(e = this.rowResizeObserver) == null || e.disconnect(), this.rowResizeObserver = new ResizeObserver(() => {
 			this.positionGrips();
-		}), this.grid.querySelectorAll(`[${D}]`).forEach((e) => {
+		}), this.grid.querySelectorAll(`[${T}]`).forEach((e) => {
 			var t;
 			(t = this.rowResizeObserver) == null || t.observe(e);
 		});
@@ -3706,7 +3728,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	handleMouseOver(e) {
 		if (this.isGripInteractionLocked()) return;
-		let t = e.target.closest(`[${O}]`);
+		let t = e.target.closest(`[${E}]`);
 		if (!t) return;
 		this.clearHideTimeout();
 		let n = this.getCellPosition(t);
@@ -3716,11 +3738,11 @@ var Qn = (e) => ({ element: Zn({
 		this.isGripInteractionLocked() || this.scheduleHideAll();
 	}
 	getCellPosition(e) {
-		let t = e.closest(`[${D}]`);
+		let t = e.closest(`[${T}]`);
 		if (!t) return null;
-		let n = Array.from(this.grid.querySelectorAll(`[${D}]`)).indexOf(t);
+		let n = Array.from(this.grid.querySelectorAll(`[${T}]`)).indexOf(t);
 		if (n < 0) return null;
-		let r = Array.from(t.querySelectorAll(`[${O}]`)).indexOf(e);
+		let r = Array.from(t.querySelectorAll(`[${E}]`)).indexOf(e);
 		return r < 0 ? null : {
 			row: n,
 			col: r
@@ -3749,13 +3771,13 @@ var Qn = (e) => ({ element: Zn({
 		this.activeRowGripIndex >= 0 && this.activeRowGripIndex < this.rowGrips.length && this.applyIdleClasses(this.rowGrips[this.activeRowGripIndex]), this.activeRowGripIndex = -1;
 	}
 	applyVisibleClasses(e) {
-		let t = e, n = t.hasAttribute(z);
-		rr(t, n ? "col" : "row", n ? si : B), this.isInsideTable && (t.style.transition = "none"), t.className = C(li, di), t.setAttribute("data-blok-table-grip-visible", ""), this.isInsideTable && (t.offsetHeight, t.style.transition = "");
+		let t = e, n = t.hasAttribute(L);
+		cr(t, n ? "col" : "row", n ? R : z), this.isInsideTable && (t.style.transition = "none"), t.className = x(B, vi), t.setAttribute("data-blok-table-grip-visible", ""), this.isInsideTable && (t.offsetHeight, t.style.transition = "");
 		let r = t.querySelector("svg");
-		r && (r.classList.remove("text-white"), r.classList.add("text-gray-400"));
+		r && (r.classList.remove("text-white", "opacity-100"), r.classList.add("text-gray-400", "opacity-0"));
 	}
 	applyActiveClasses(e) {
-		Object.assign(e, { className: C(li, fi) }), e.setAttribute("data-blok-table-grip-visible", "");
+		Object.assign(e, { className: x(B, yi) }), e.setAttribute("data-blok-table-grip-visible", "");
 		let t = e.querySelector("svg");
 		t && (t.classList.remove("text-gray-400", "opacity-0"), t.classList.add("text-white", "opacity-100"));
 	}
@@ -3765,8 +3787,10 @@ var Qn = (e) => ({ element: Zn({
 		});
 	}
 	applyIdleClasses(e) {
-		let t = e, n = t.hasAttribute(z), r = n ? "col" : "row", i = n ? si + 12 : B + 12;
-		this.isInsideTable && (t.style.transition = "none"), rr(t, r, i), t.className = C(li, ui), t.removeAttribute("data-blok-table-grip-visible"), this.isInsideTable && (t.offsetHeight, t.style.transition = "");
+		let t = e, n = t.hasAttribute(L), r = n ? "col" : "row", i = n ? R + 12 : z + 12;
+		this.isInsideTable && (t.style.transition = "none"), cr(t, r, i), t.className = x(B, _i), t.removeAttribute("data-blok-table-grip-visible");
+		let a = t.querySelector("svg");
+		a && (a.classList.add("opacity-0"), a.classList.remove("opacity-100")), this.isInsideTable && (t.offsetHeight, t.style.transition = "");
 	}
 	handleDragStateChange(e, t) {
 		[...this.colGrips, ...this.rowGrips].forEach((t) => {
@@ -3777,13 +3801,13 @@ var Qn = (e) => ({ element: Zn({
 	scheduleHideAll() {
 		this.hideTimeout = setTimeout(() => {
 			this.hideColGrip(), this.hideRowGrip(), this.isInsideTable = !1, this.hideTimeout = null;
-		}, ai);
+		}, mi);
 	}
 	clearHideTimeout() {
 		this.hideTimeout !== null && (clearTimeout(this.hideTimeout), this.hideTimeout = null);
 	}
 	handlePointerDown(e) {
-		let t = e.target.closest(`[${ri}]`);
+		let t = e.target.closest(`[${fi}]`);
 		if (!t) return;
 		e.preventDefault(), e.stopPropagation();
 		let n = this.detectGripType(t);
@@ -3792,12 +3816,12 @@ var Qn = (e) => ({ element: Zn({
 		});
 	}
 	detectGripType(e) {
-		let t = e.getAttribute(z);
+		let t = e.getAttribute(L);
 		if (t !== null) return {
 			type: "col",
 			index: Number(t)
 		};
-		let n = e.getAttribute(ii);
+		let n = e.getAttribute(pi);
 		return n === null ? null : {
 			type: "row",
 			index: Number(n)
@@ -3805,7 +3829,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	openPopover(e, t) {
 		var n, r;
-		this.popoverState = ni(e, t, {
+		this.popoverState = di(e, t, {
 			col: this.colGrips,
 			row: this.rowGrips
 		}, {
@@ -3834,7 +3858,7 @@ var Qn = (e) => ({ element: Zn({
 			}, e.destroy();
 		}
 	}
-}, mi = "data-blok-table-haze", hi = "data-blok-table-haze-visible", gi = 1, _i = [
+}, xi = "data-blok-table-haze", Si = "data-blok-table-haze-visible", Ci = 1, wi = [
 	"absolute",
 	"top-0",
 	"bottom-0",
@@ -3844,17 +3868,17 @@ var Qn = (e) => ({ element: Zn({
 	"transition-opacity",
 	"duration-150",
 	"z-1"
-], vi = [
+], Ti = [
 	"left-0",
 	"bg-linear-to-r",
 	"from-white/80",
 	"to-transparent"
-], yi = [
+], Ei = [
 	"right-5",
 	"bg-linear-to-l",
 	"from-white/80",
 	"to-transparent"
-], bi = class {
+], Di = class {
 	constructor() {
 		this.leftHaze = null, this.rightHaze = null, this.scrollContainer = null, this.boundOnScroll = null, this.ticking = !1;
 	}
@@ -3874,7 +3898,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	createHazeElement(e) {
 		let t = document.createElement("div");
-		return t.setAttribute(mi, e), t.setAttribute("aria-hidden", "true"), t.classList.add(..._i, ...e === "left" ? vi : yi), t;
+		return t.setAttribute(xi, e), t.setAttribute("aria-hidden", "true"), t.classList.add(...wi, ...e === "left" ? Ti : Ei), t;
 	}
 	syncVisibility() {
 		let e = this.scrollContainer;
@@ -3885,12 +3909,12 @@ var Qn = (e) => ({ element: Zn({
 			return;
 		}
 		let { scrollLeft: n, scrollWidth: r, clientWidth: i } = e, a = r - i;
-		this.setVisible(this.leftHaze, n > gi), this.setVisible(this.rightHaze, a > gi && n < a - gi);
+		this.setVisible(this.leftHaze, n > Ci), this.setVisible(this.rightHaze, a > Ci && n < a - Ci);
 	}
 	setVisible(e, t) {
-		e && (t ? e.setAttribute(hi, "") : e.removeAttribute(hi));
+		e && (t ? e.setAttribute(Si, "") : e.removeAttribute(Si));
 	}
-}, xi = 3, Si = 3, Ci = ["my-2", "pr-5"], wi = [
+}, Oi = 3, ki = 3, Ai = ["my-2", "pr-5"], ji = [
 	"relative",
 	"after:content-[\"\"]",
 	"after:absolute",
@@ -3899,11 +3923,11 @@ var Qn = (e) => ({ element: Zn({
 	"after:right-0",
 	"after:h-10",
 	"after:pointer-events-none"
-], Ti = class {
+], Mi = class {
 	constructor({ data: e, config: t, api: n, readOnly: r, block: i }) {
 		this.initialContent = null, this.resize = null, this.addControls = null, this.rowColControls = null, this.cellBlocks = null, this.cellSelection = null, this.scrollHaze = null, this.element = null, this.gridElement = null, this.scrollContainer = null, this.gripOverlay = null, this.pendingHighlight = null, this.isNewTable = !1, this.unregisterRestrictedTools = null, this.setDataGeneration = 0, this.structuralOpDepth = 0, this.api = n, this.readOnly = r, this.config = t == null ? {} : t;
-		let a = Er(e, this.config);
-		this.initialContent = a.content, this.grid = new Kn({ readOnly: r }), this.model = new Ar(a), this.blockId = i == null ? void 0 : i.id, this.config.restrictedTools !== void 0 && (this.unregisterRestrictedTools = u(this.config.restrictedTools));
+		let a = Fr(e, this.config);
+		this.initialContent = a.content, this.grid = new tr({ readOnly: r }), this.model = new zr(a), this.blockId = i == null ? void 0 : i.id, this.config.restrictedTools !== void 0 && (this.unregisterRestrictedTools = he(this.config.restrictedTools));
 	}
 	runStructuralOp(e, t = !1) {
 		this.structuralOpDepth++;
@@ -3938,7 +3962,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	static get toolbox() {
 		return {
-			icon: te,
+			icon: Ue,
 			title: "Table",
 			titleKey: "tools.table.title",
 			searchTerms: [
@@ -3971,7 +3995,7 @@ var Qn = (e) => ({ element: Zn({
 			em: !0,
 			mark: (e) => {
 				let t = e.style, n = Array.from({ length: t.length }, (e, n) => t.item(n));
-				for (let e of n) Ae.has(e) || t.removeProperty(e);
+				for (let e of n) ke.has(e) || t.removeProperty(e);
 				return t.length > 0 ? { style: !0 } : {};
 			},
 			a: { href: !0 },
@@ -3990,28 +4014,28 @@ var Qn = (e) => ({ element: Zn({
 		return n && this.element && (this.element.insertBefore(t, n), t.appendChild(n)), this.scrollContainer = t, (e = this.addControls) == null || e.attachScrollContainer(t), t;
 	}
 	render() {
-		var e, t, n, r, i, a;
-		let o = document.createElement("div");
-		o.className = C(Ci, !this.readOnly && wi), o.setAttribute(x.tool, "table"), this.readOnly && o.setAttribute("data-blok-table-readonly", ""), this.isNewTable = ((e = (t = this.initialContent) == null ? void 0 : t.length) == null ? 0 : e) === 0;
-		let s = ((n = this.initialContent) == null ? void 0 : n.length) || this.config.rows || xi, c = ((r = this.initialContent) == null ? void 0 : r.reduce((e, t) => {
+		var e, t, r, i, a, o;
+		let s = document.createElement("div");
+		s.className = x(Ai, !this.readOnly && ji), s.setAttribute(n.tool, "table"), this.readOnly && s.setAttribute("data-blok-table-readonly", ""), this.isNewTable = ((e = (t = this.initialContent) == null ? void 0 : t.length) == null ? 0 : e) === 0;
+		let c = ((r = this.initialContent) == null ? void 0 : r.length) || this.config.rows || Oi, l = ((i = this.initialContent) == null ? void 0 : i.reduce((e, t) => {
 			var n;
 			return Math.max(e, (n = t == null ? void 0 : t.length) == null ? 0 : n);
-		}, 0)) || this.config.cols || Si, l = this.grid.createGrid(s, c, this.model.colWidths);
-		if (((i = (a = this.initialContent) == null ? void 0 : a.length) == null ? 0 : i) > 0) {
-			var u;
-			this.grid.fillGrid(l, (u = this.initialContent) == null ? [] : u);
+		}, 0)) || this.config.cols || ki, u = this.grid.createGrid(c, l, this.model.colWidths);
+		if (((a = (o = this.initialContent) == null ? void 0 : o.length) == null ? 0 : a) > 0) {
+			var d;
+			this.grid.fillGrid(u, (d = this.initialContent) == null ? [] : d);
 		}
-		if (this.model.colWidths && pr(l, this.model.colWidths), this.gridElement = l, this.model.colWidths || !this.readOnly) {
+		if (this.model.colWidths && A(u, this.model.colWidths), this.gridElement = u, this.model.colWidths || !this.readOnly) {
 			let e = document.createElement("div");
 			e.setAttribute("data-blok-table-scroll", "");
-			let t = this.model.colWidths ? Or : [];
-			e.classList.add(...t), e.appendChild(l), o.appendChild(e), this.scrollContainer = e;
-		} else o.appendChild(l), this.scrollContainer = null;
+			let t = this.model.colWidths ? Lr : [];
+			e.classList.add(...t), e.appendChild(u), s.appendChild(e), this.scrollContainer = e;
+		} else s.appendChild(u), this.scrollContainer = null;
 		if (!this.readOnly) {
 			let e = document.createElement("div");
-			e.setAttribute("data-blok-table-grip-overlay", ""), e.style.position = "absolute", e.style.inset = "0", e.style.pointerEvents = "none", e.style.zIndex = "3", o.appendChild(e), this.gripOverlay = e;
+			e.setAttribute("data-blok-table-grip-overlay", ""), e.style.position = "absolute", e.style.inset = "0", e.style.pointerEvents = "none", e.style.zIndex = "3", s.appendChild(e), this.gripOverlay = e;
 		}
-		return this.element = o, this.model.withHeadings && F(this.gridElement, this.model.withHeadings), this.model.withHeadingColumn && L(this.gridElement, this.model.withHeadingColumn), this.readOnly || (this.initCellBlocks(l), Dr(l, this.cellBlocks)), o;
+		return this.element = s, this.model.withHeadings && N(this.gridElement, this.model.withHeadings), this.model.withHeadingColumn && F(this.gridElement, this.model.withHeadingColumn), this.readOnly || (this.initCellBlocks(u), Ir(u, this.cellBlocks)), s;
 	}
 	rendered() {
 		if (!this.element || this.initialContent === null) return;
@@ -4020,22 +4044,22 @@ var Qn = (e) => ({ element: Zn({
 		let t = this.initialContent;
 		if (this.initialContent = null, this.readOnly) {
 			var n;
-			Tr(e, t, this.api, (n = this.blockId) == null ? "" : n), I(e, this.model.snapshot().content), this.initScrollHaze();
+			Pr(e, t, this.api, (n = this.blockId) == null ? "" : n), P(e, this.model.snapshot().content), this.initScrollHaze();
 			return;
 		}
 		if (this.runTransactedStructuralOp(() => {
 			var n, r;
-			let i = (n = (r = this.cellBlocks) == null ? void 0 : r.initializeCells(t)) == null ? t : n, a = this.isNewTable && i.length === 0 ? Array.from(e.querySelectorAll(`[${D}]`), (e) => {
-				let t = e.querySelectorAll(`[${O}]`).length;
+			let i = (n = (r = this.cellBlocks) == null ? void 0 : r.initializeCells(t)) == null ? t : n, a = this.isNewTable && i.length === 0 ? Array.from(e.querySelectorAll(`[${T}]`), (e) => {
+				let t = e.querySelectorAll(`[${E}]`).length;
 				return Array.from({ length: t }, () => ({ blocks: [] }));
 			}) : i;
-			this.model.replaceAll(S(S({}, this.model.snapshot()), {}, { content: a })), this.isNewTable && P(e, this.cellBlocks), this.removeGhostChildren();
+			this.model.replaceAll(b(b({}, this.model.snapshot()), {}, { content: a })), this.isNewTable && M(e, this.cellBlocks), this.removeGhostChildren();
 		}, !0), this.model.initialColWidth === void 0) {
 			var r;
-			let t = (r = this.model.colWidths) == null ? M(e) : r;
-			this.model.setInitialColWidth(t.length > 0 ? Sr(t) : void 0);
+			let t = (r = this.model.colWidths) == null ? k(e) : r;
+			this.model.setInitialColWidth(t.length > 0 ? jr(t) : void 0);
 		}
-		if (this.initSubsystems(e), I(e, this.model.snapshot().content), this.isNewTable) {
+		if (this.initSubsystems(e), P(e, this.model.snapshot().content), this.isNewTable) {
 			var i;
 			(i = this.cellSelection) == null || i.selectRange({
 				minRow: 0,
@@ -4063,7 +4087,7 @@ var Qn = (e) => ({ element: Zn({
 	setData(e) {
 		var t, n, r, i, a;
 		this.setDataGeneration++;
-		let o = this.setDataGeneration, s = Er(S(S({}, this.model.snapshot()), e), this.config);
+		let o = this.setDataGeneration, s = Fr(b(b({}, this.model.snapshot()), e), this.config);
 		this.initialContent = s.content, this.model.replaceAll(s), this.api.blocks.isSyncingFromYjs || this.runStructuralOp(() => {
 			var e;
 			(e = this.cellBlocks) == null || e.deleteAllBlocks();
@@ -4077,7 +4101,7 @@ var Qn = (e) => ({ element: Zn({
 		let f = this.gridElement;
 		if (f) {
 			if (this.readOnly) {
-				I(f, this.model.snapshot().content);
+				P(f, this.model.snapshot().content);
 				return;
 			}
 			o === this.setDataGeneration && (this.runStructuralOp(() => {
@@ -4085,15 +4109,15 @@ var Qn = (e) => ({ element: Zn({
 				let i = (e = (t = (n = this.cellBlocks) == null ? void 0 : n.initializeCells((r = this.initialContent) == null ? [] : r)) == null ? this.initialContent : t) == null ? [] : e;
 				if (o === this.setDataGeneration) {
 					if (this.api.blocks.isSyncingFromYjs && i.length === 0 && f) {
-						let e = Array.from(f.querySelectorAll(`[${D}]`), (e) => {
-							let t = e.querySelectorAll(`[${O}]`).length;
+						let e = Array.from(f.querySelectorAll(`[${T}]`), (e) => {
+							let t = e.querySelectorAll(`[${E}]`).length;
 							return Array.from({ length: t }, () => ({ blocks: [] }));
 						});
-						this.model.replaceAll(S(S({}, this.model.snapshot()), {}, { content: e })), P(f, this.cellBlocks);
-					} else this.model.replaceAll(S(S({}, this.model.snapshot()), {}, { content: i }));
+						this.model.replaceAll(b(b({}, this.model.snapshot()), {}, { content: e })), M(f, this.cellBlocks);
+					} else this.model.replaceAll(b(b({}, this.model.snapshot()), {}, { content: i }));
 					this.initialContent = null;
 				}
-			}, !0), o === this.setDataGeneration && (this.initSubsystems(f), l !== null && this.cellSelection !== null && this.cellSelection.selectRange(l), u !== null && this.rowColControls !== null && this.rowColControls.restoreVisibleGrips(u.col, u.row), I(f, this.model.snapshot().content)));
+			}, !0), o === this.setDataGeneration && (this.initSubsystems(f), l !== null && this.cellSelection !== null && this.cellSelection.selectRange(l), u !== null && this.rowColControls !== null && this.rowColControls.restoreVisibleGrips(u.col, u.row), P(f, this.model.snapshot().content)));
 		}
 	}
 	onPaste(e) {
@@ -4105,9 +4129,9 @@ var Qn = (e) => ({ element: Zn({
 				var t;
 				n.push(e.innerHTML);
 				let i = (t = e.getAttribute("style")) == null ? "" : t, a = {}, o = /background-color\s*:\s*([^;]+)/i.exec(i);
-				o != null && o[1] && (a.color = Me(o[1].trim(), "bg"));
+				o != null && o[1] && (a.color = ye(o[1].trim(), "bg"));
 				let s = (/* @__PURE__ */ RegExp("(?<![a-z-])color\\s*:\\s*([^;]+)", "i")).exec(i);
-				s != null && s[1] && !Te(s[1].trim()) && (a.textColor = Me(s[1].trim(), "text")), r.push(a);
+				s != null && s[1] && !_e(s[1].trim()) && (a.textColor = ye(s[1].trim(), "text")), r.push(a);
 			}), n.length > 0 && (a.push(n), o.push(r));
 		});
 		let s = r.querySelector("thead") !== null, c = ((t = i[0]) == null ? void 0 : t.querySelector("th")) !== null, l = s || c;
@@ -4123,12 +4147,12 @@ var Qn = (e) => ({ element: Zn({
 		!this.readOnly && f && (this.runStructuralOp(() => {
 			var e, t, n, r;
 			let i = (e = (t = (n = this.cellBlocks) == null ? void 0 : n.initializeCells((r = this.initialContent) == null ? [] : r)) == null ? this.initialContent : t) == null ? [] : e;
-			this.model.replaceAll(S(S({}, this.model.snapshot()), {}, { content: i })), this.initialContent = null, o.forEach((e, t) => {
+			this.model.replaceAll(b(b({}, this.model.snapshot()), {}, { content: i })), this.initialContent = null, o.forEach((e, t) => {
 				e.forEach((e, n) => {
 					e.color !== void 0 && this.model.setCellColor(t, n, e.color), e.textColor !== void 0 && this.model.setCellTextColor(t, n, e.textColor);
 				});
 			});
-		}, !0), this.initSubsystems(f), I(f, this.model.snapshot().content));
+		}, !0), this.initSubsystems(f), P(f, this.model.snapshot().content));
 	}
 	destroy() {
 		var e, t;
@@ -4155,35 +4179,35 @@ var Qn = (e) => ({ element: Zn({
 		});
 	}
 	getBlockIdsInRow(e) {
-		return Cr(this.element, this.cellBlocks, e);
+		return Mr(this.element, this.cellBlocks, e);
 	}
 	getBlockIdsInColumn(e) {
-		return wr(this.element, this.cellBlocks, e);
+		return Nr(this.element, this.cellBlocks, e);
 	}
 	initAddControls(e) {
 		var t;
 		if ((t = this.addControls) == null || t.destroy(), !this.element) return;
 		let n = { addedCols: 0 };
-		this.addControls = new Hn({
+		this.addControls = new Xn({
 			wrapper: this.element,
 			grid: e,
 			i18n: this.api.i18n,
 			getNewColumnWidth: () => {
 				var t;
-				let n = (t = this.model.colWidths) == null ? M(e) : t;
-				return this.model.initialColWidth === void 0 ? N(n) : Math.round(this.model.initialColWidth / 2 * 100) / 100;
+				let n = (t = this.model.colWidths) == null ? k(e) : t;
+				return this.model.initialColWidth === void 0 ? j(n) : Math.round(this.model.initialColWidth / 2 * 100) / 100;
 			},
 			onAddRow: () => {
 				this.runTransactedStructuralOp(() => {
 					var t, n;
-					this.grid.addRow(e), this.model.addRow(), P(e, this.cellBlocks), F(this.gridElement, this.model.withHeadings), L(this.gridElement, this.model.withHeadingColumn), this.initResize(e), (t = this.addControls) == null || t.syncRowButtonWidth(), (n = this.rowColControls) == null || n.refresh();
+					this.grid.addRow(e), this.model.addRow(), M(e, this.cellBlocks), N(this.gridElement, this.model.withHeadings), F(this.gridElement, this.model.withHeadingColumn), this.initResize(e), (t = this.addControls) == null || t.syncRowButtonWidth(), (n = this.rowColControls) == null || n.refresh();
 				});
 			},
 			onAddColumn: () => {
 				this.runTransactedStructuralOp(() => {
 					var t, n, r;
-					let i = (t = this.model.colWidths) == null ? M(e) : t, a = this.model.initialColWidth === void 0 ? N(i) : Math.round(this.model.initialColWidth / 2 * 100) / 100;
-					this.grid.addColumn(e, void 0, i, a), this.model.addColumn(void 0, a), this.model.setColWidths([...i, a]), P(e, this.cellBlocks), L(this.gridElement, this.model.withHeadingColumn), this.initResize(e), (n = this.rowColControls) == null || n.refresh(), this.scrollContainer && (this.scrollContainer.scrollLeft = this.scrollContainer.scrollWidth), (r = this.addControls) == null || r.syncRowButtonWidth();
+					let i = (t = this.model.colWidths) == null ? k(e) : t, a = this.model.initialColWidth === void 0 ? j(i) : Math.round(this.model.initialColWidth / 2 * 100) / 100;
+					this.grid.addColumn(e, void 0, i, a), this.model.addColumn(void 0, a), this.model.setColWidths([...i, a]), M(e, this.cellBlocks), F(this.gridElement, this.model.withHeadingColumn), this.initResize(e), (n = this.rowColControls) == null || n.refresh(), this.scrollContainer && (this.scrollContainer.scrollLeft = this.scrollContainer.scrollWidth), (r = this.addControls) == null || r.syncRowButtonWidth();
 				});
 			},
 			onDragStart: () => {
@@ -4192,13 +4216,13 @@ var Qn = (e) => ({ element: Zn({
 			},
 			onDragAddRow: () => {
 				this.runTransactedStructuralOp(() => {
-					this.grid.addRow(e), this.model.addRow(), P(e, this.cellBlocks), F(this.gridElement, this.model.withHeadings), L(this.gridElement, this.model.withHeadingColumn);
+					this.grid.addRow(e), this.model.addRow(), M(e, this.cellBlocks), N(this.gridElement, this.model.withHeadings), F(this.gridElement, this.model.withHeadingColumn);
 				});
 			},
 			onDragRemoveRow: () => {
 				this.runTransactedStructuralOp(() => {
 					let t = this.grid.getRowCount(e);
-					if (t > 1 && gr(e, t - 1)) {
+					if (t > 1 && Tr(e, t - 1)) {
 						var n;
 						let { blocksToDelete: r } = this.model.deleteRow(t - 1);
 						(n = this.cellBlocks) == null || n.deleteBlocks(r), this.grid.deleteRow(e, t - 1);
@@ -4208,19 +4232,19 @@ var Qn = (e) => ({ element: Zn({
 			onDragAddCol: () => {
 				this.runTransactedStructuralOp(() => {
 					var t;
-					let r = (t = this.model.colWidths) == null ? M(e) : t, i = this.model.initialColWidth === void 0 ? N(r) : Math.round(this.model.initialColWidth / 2 * 100) / 100, a = [...r, i];
-					this.grid.addColumn(e, void 0, r, i), this.model.addColumn(void 0, i), this.model.setColWidths(a), pr(e, a), P(e, this.cellBlocks), L(this.gridElement, this.model.withHeadingColumn), this.initResize(e), n.addedCols++, this.scrollContainer && (this.scrollContainer.scrollLeft = this.scrollContainer.scrollWidth);
+					let r = (t = this.model.colWidths) == null ? k(e) : t, i = this.model.initialColWidth === void 0 ? j(r) : Math.round(this.model.initialColWidth / 2 * 100) / 100, a = [...r, i];
+					this.grid.addColumn(e, void 0, r, i), this.model.addColumn(void 0, i), this.model.setColWidths(a), A(e, a), M(e, this.cellBlocks), F(this.gridElement, this.model.withHeadingColumn), this.initResize(e), n.addedCols++, this.scrollContainer && (this.scrollContainer.scrollLeft = this.scrollContainer.scrollWidth);
 				});
 			},
 			onDragRemoveCol: () => {
 				this.runTransactedStructuralOp(() => {
 					var t;
 					let r = this.grid.getColumnCount(e);
-					if (r <= 1 || !_r(e, r - 1)) return;
+					if (r <= 1 || !Er(e, r - 1)) return;
 					let { blocksToDelete: i } = this.model.deleteColumn(r - 1);
 					(t = this.cellBlocks) == null || t.deleteBlocks(i), this.grid.deleteColumn(e, r - 1);
 					let a = this.model.colWidths;
-					a && pr(e, a), this.initResize(e), n.addedCols--;
+					a && A(e, a), this.initResize(e), n.addedCols--;
 				});
 			},
 			onDragEnd: () => {
@@ -4231,7 +4255,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	initRowColControls(e) {
 		var t, n, r;
-		(t = this.rowColControls) == null || t.destroy(), this.element && (this.rowColControls = new pi({
+		(t = this.rowColControls) == null || t.destroy(), this.element && (this.rowColControls = new bi({
 			grid: e,
 			overlay: (n = this.gripOverlay) == null ? void 0 : n,
 			scrollContainer: (r = this.scrollContainer) == null ? void 0 : r,
@@ -4279,7 +4303,7 @@ var Qn = (e) => ({ element: Zn({
 		this.runTransactedStructuralOp(() => {
 			var r, i;
 			if (n !== this.setDataGeneration || this.gridElement !== e) return;
-			let a = this.model.colWidths, { blocksToDelete: o } = this.syncModelForAction(t), s = Ur(e, t, {
+			let a = this.model.colWidths, { blocksToDelete: o } = this.syncModelForAction(t), s = Qr(e, t, {
 				grid: this.grid,
 				data: {
 					colWidths: a,
@@ -4291,7 +4315,7 @@ var Qn = (e) => ({ element: Zn({
 				blocksToDelete: o
 			});
 			if (n !== this.setDataGeneration || this.gridElement !== e) return;
-			if (this.model.setColWidths(s.colWidths), this.model.setWithHeadings(s.withHeadings), this.model.setWithHeadingColumn(s.withHeadingColumn), this.pendingHighlight = s.pendingHighlight, F(this.gridElement, this.model.withHeadings), L(this.gridElement, this.model.withHeadingColumn), this.initResize(e), (r = this.addControls) == null || r.syncRowButtonWidth(), !(t.type === "toggle-heading" || t.type === "toggle-heading-column")) {
+			if (this.model.setColWidths(s.colWidths), this.model.setWithHeadings(s.withHeadings), this.model.setWithHeadingColumn(s.withHeadingColumn), this.pendingHighlight = s.pendingHighlight, N(this.gridElement, this.model.withHeadings), F(this.gridElement, this.model.withHeadingColumn), this.initResize(e), (r = this.addControls) == null || r.syncRowButtonWidth(), !(t.type === "toggle-heading" || t.type === "toggle-heading-column")) {
 				var c;
 				(c = this.rowColControls) == null || c.refresh();
 			}
@@ -4337,10 +4361,10 @@ var Qn = (e) => ({ element: Zn({
 	initResize(e) {
 		var t, n;
 		(t = this.resize) == null || t.destroy();
-		let r = this.model.colWidths === void 0, i = (n = this.model.colWidths) == null ? M(e) : n;
-		r || kr(this.ensureScrollContainer()), this.resize = new Ir(e, i, (e) => {
+		let r = this.model.colWidths === void 0, i = (n = this.model.colWidths) == null ? k(e) : n;
+		r || Rr(this.ensureScrollContainer()), this.resize = new Gr(e, i, (e) => {
 			var t, n, r;
-			this.model.setColWidths(e), kr(this.ensureScrollContainer()), (t = this.rowColControls) == null || t.positionGrips(), (n = this.addControls) == null || n.syncRowButtonWidth(), (r = this.scrollHaze) == null || r.update();
+			this.model.setColWidths(e), Rr(this.ensureScrollContainer()), (t = this.rowColControls) == null || t.positionGrips(), (n = this.addControls) == null || n.syncRowButtonWidth(), (r = this.scrollHaze) == null || r.update();
 		}, () => {
 			var e;
 			(e = this.rowColControls) == null || e.hideAllGrips();
@@ -4351,7 +4375,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	initCellBlocks(e) {
 		var t;
-		this.cellBlocks = new qn({
+		this.cellBlocks = new nr({
 			api: this.api,
 			gridElement: e,
 			tableBlockId: (t = this.blockId) == null ? "" : t,
@@ -4362,13 +4386,13 @@ var Qn = (e) => ({ element: Zn({
 	handleCellCopy(e, t) {
 		let n = this.collectCellBlockData(e);
 		if (n.length === 0) return;
-		let r = ge(n);
-		t.setData("text/html", Le(r)), t.setData("text/plain", de(r));
+		let r = xe(n);
+		t.setData("text/html", We(r)), t.setData("text/plain", me(r));
 	}
 	handleCellCopyViaButton(e) {
 		let t = this.collectCellBlockData(e);
 		if (t.length === 0) return;
-		let n = ge(t), r = Le(n), i = de(n), a = new Blob([r], { type: "text/html" }), o = new Blob([i], { type: "text/plain" });
+		let n = xe(t), r = We(n), i = me(n), a = new Blob([r], { type: "text/html" }), o = new Blob([i], { type: "text/plain" });
 		navigator.clipboard.write([new ClipboardItem({
 			"text/html": a,
 			"text/plain": o
@@ -4378,7 +4402,7 @@ var Qn = (e) => ({ element: Zn({
 		let r = this.gridElement;
 		r && this.runTransactedStructuralOp(() => {
 			for (let i of e) {
-				let e = mr(r, i);
+				let e = Cr(r, i);
 				e && (n === "backgroundColor" ? (this.model.setCellColor(e.row, e.col, t == null ? void 0 : t), i.style.backgroundColor = t == null ? "" : t) : (this.model.setCellTextColor(e.row, e.col, t == null ? void 0 : t), i.style.color = t == null ? "" : t));
 			}
 		});
@@ -4386,12 +4410,12 @@ var Qn = (e) => ({ element: Zn({
 	collectCellBlockData(e) {
 		let t = this.gridElement;
 		if (!t) return [];
-		let n = Array.from(t.querySelectorAll(`[${D}]`));
+		let n = Array.from(t.querySelectorAll(`[${T}]`));
 		return e.map((e) => {
 			var t;
-			let r = e.closest(`[${D}]`);
+			let r = e.closest(`[${T}]`);
 			if (!r) return null;
-			let i = n.indexOf(r), a = Array.from(r.querySelectorAll(`[${O}]`)).indexOf(e), o = e.querySelector(`[${j}]`), s = [];
+			let i = n.indexOf(r), a = Array.from(r.querySelectorAll(`[${E}]`)).indexOf(e), o = e.querySelector(`[${O}]`), s = [];
 			if (!o) return {
 				row: i,
 				col: a,
@@ -4403,7 +4427,7 @@ var Qn = (e) => ({ element: Zn({
 				let n = this.api.blocks.getBlockIndex(t);
 				if (n === void 0) return;
 				let r = this.api.blocks.getBlockByIndex(n);
-				r && s.push(S({
+				r && s.push(b({
 					tool: r.name,
 					data: r.preservedData
 				}, Object.keys(r.preservedTunes).length > 0 ? { tunes: r.preservedTunes } : {}));
@@ -4414,7 +4438,7 @@ var Qn = (e) => ({ element: Zn({
 				data: { text: c }
 			});
 			let l = this.model.getCellColor(i, a), u = this.model.getCellTextColor(i, a);
-			return S(S({
+			return b(b({
 				row: i,
 				col: a,
 				blocks: s
@@ -4425,7 +4449,7 @@ var Qn = (e) => ({ element: Zn({
 		var t;
 		(t = this.cellSelection) == null || t.destroy();
 		let n = this.api.rectangleSelection;
-		this.cellSelection = new fr({
+		this.cellSelection = new Sr({
 			grid: e,
 			rectangleSelection: n,
 			i18n: this.api.i18n,
@@ -4452,7 +4476,7 @@ var Qn = (e) => ({ element: Zn({
 					t.deleteBlocks(n);
 					let r = this.gridElement;
 					if (r) for (let t of e) {
-						let e = mr(r, t);
+						let e = Cr(r, t);
 						e && (this.model.setCellColor(e.row, e.col, void 0), this.model.setCellTextColor(e.row, e.col, void 0), t.style.backgroundColor = "", t.style.color = "");
 					}
 				});
@@ -4473,7 +4497,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	initScrollHaze() {
 		var e;
-		(e = this.scrollHaze) == null || e.destroy(), !(!this.element || !this.scrollContainer) && (this.scrollHaze = new bi(), this.scrollHaze.init(this.element, this.scrollContainer));
+		(e = this.scrollHaze) == null || e.destroy(), !(!this.element || !this.scrollContainer) && (this.scrollHaze = new Di(), this.scrollHaze.init(this.element, this.scrollContainer));
 	}
 	initGridPasteListener(e) {
 		e.addEventListener("paste", (t) => {
@@ -4482,20 +4506,20 @@ var Qn = (e) => ({ element: Zn({
 	}
 	handleGridPaste(e, t) {
 		if (this.readOnly || !e.clipboardData || e.defaultPrevented) return;
-		let n = e.clipboardData.getData("text/html"), r = Be(n), i = r === null ? pe(n) : null, a = r == null ? i : r;
+		let n = e.clipboardData.getData("text/html"), r = Ie(n), i = r === null ? Ae(n) : null, a = r == null ? i : r;
 		if (!a || i !== null && new DOMParser().parseFromString(n, "text/html").querySelectorAll("table").length > 1) return;
 		let o = document.activeElement;
 		if (!o) return;
-		let s = o.closest(`[${O}]`);
+		let s = o.closest(`[${E}]`);
 		if (!s || !t.contains(s)) return;
-		let c = s.closest(`[${D}]`);
+		let c = s.closest(`[${T}]`);
 		if (!c) return;
 		if (a.rows === 1 && a.cols === 1) {
 			e.preventDefault(), e.stopPropagation(), this.insertSingleCellPayloadInline(a.cells[0][0]);
 			return;
 		}
 		e.preventDefault(), e.stopPropagation();
-		let l = Array.from(t.querySelectorAll(`[${D}]`)).indexOf(c), u = Array.from(c.querySelectorAll(`[${O}]`)).indexOf(s);
+		let l = Array.from(t.querySelectorAll(`[${T}]`)).indexOf(c), u = Array.from(c.querySelectorAll(`[${E}]`)).indexOf(s);
 		this.pastePayloadIntoCells(t, a, l, u);
 	}
 	insertSingleCellPayloadInline(e) {
@@ -4516,11 +4540,11 @@ var Qn = (e) => ({ element: Zn({
 		this.runTransactedStructuralOp(() => {
 			var i, a;
 			this.expandGridForPaste(e, n + t.rows, r + t.cols);
-			let o = e.querySelectorAll(`[${D}]`);
+			let o = e.querySelectorAll(`[${T}]`);
 			Array.from({ length: t.rows }, (e, t) => t).forEach((e) => {
 				let i = o[n + e];
 				if (!i) return;
-				let a = i.querySelectorAll(`[${O}]`);
+				let a = i.querySelectorAll(`[${E}]`);
 				Array.from({ length: t.cols }, (e, t) => t).forEach((i) => {
 					let o = a[r + i];
 					if (o) {
@@ -4535,7 +4559,7 @@ var Qn = (e) => ({ element: Zn({
 				});
 			}), this.initResize(e), (i = this.addControls) == null || i.syncRowButtonWidth(), (a = this.rowColControls) == null || a.refresh();
 		});
-		let i = e.querySelectorAll(`[${D}]`)[n + t.rows - 1], a = i == null ? void 0 : i.querySelectorAll(`[${O}]`)[r + t.cols - 1];
+		let i = e.querySelectorAll(`[${T}]`)[n + t.rows - 1], a = i == null ? void 0 : i.querySelectorAll(`[${E}]`)[r + t.cols - 1];
 		if (!a || !this.cellBlocks || !this.api.caret) return;
 		let o = this.cellBlocks.getBlockIdsFromCells([a]), s = o[o.length - 1];
 		s !== void 0 && this.api.caret.setToBlock(s, "end");
@@ -4543,11 +4567,11 @@ var Qn = (e) => ({ element: Zn({
 	expandGridForPaste(e, t, n) {
 		let r = this.grid.getRowCount(e), i = this.grid.getColumnCount(e);
 		Array.from({ length: Math.max(0, t - r) }).forEach(() => {
-			this.grid.addRow(e), this.model.addRow(), P(e, this.cellBlocks), F(this.gridElement, this.model.withHeadings), L(this.gridElement, this.model.withHeadingColumn);
+			this.grid.addRow(e), this.model.addRow(), M(e, this.cellBlocks), N(this.gridElement, this.model.withHeadings), F(this.gridElement, this.model.withHeadingColumn);
 		}), Array.from({ length: Math.max(0, n - i) }).forEach(() => {
 			var t;
-			let n = (t = this.model.colWidths) == null ? M(e) : t, r = this.model.initialColWidth === void 0 ? N(n) : Math.round(this.model.initialColWidth / 2 * 100) / 100;
-			this.grid.addColumn(e, void 0, n, r), this.model.addColumn(void 0, r), this.model.setColWidths([...n, r]), P(e, this.cellBlocks), L(this.gridElement, this.model.withHeadingColumn);
+			let n = (t = this.model.colWidths) == null ? k(e) : t, r = this.model.initialColWidth === void 0 ? j(n) : Math.round(this.model.initialColWidth / 2 * 100) / 100;
+			this.grid.addColumn(e, void 0, n, r), this.model.addColumn(void 0, r), this.model.setColWidths([...n, r]), M(e, this.cellBlocks), F(this.gridElement, this.model.withHeadingColumn);
 		});
 	}
 	pasteCellPayload(e, t) {
@@ -4555,7 +4579,7 @@ var Qn = (e) => ({ element: Zn({
 			let t = this.cellBlocks.getBlockIdsFromCells([e]);
 			this.cellBlocks.deleteBlocks(t);
 		}
-		let n = e.querySelector(`[${j}]`);
+		let n = e.querySelector(`[${O}]`);
 		if (n) {
 			if (t.blocks.length === 0) {
 				var r;
@@ -4569,19 +4593,19 @@ var Qn = (e) => ({ element: Zn({
 			}
 		}
 	}
-}, Ei = (e) => {
+}, Ni = (e) => {
 	let t = document.createElement("div");
 	t.innerHTML = e.trim();
 	let n = document.createDocumentFragment();
 	return n.append(...Array.from(t.childNodes)), n;
-}, Di = (e, t, n, r) => {
+}, Pi = (e, t, n, r) => {
 	if (!t) return e;
 	let i = n();
 	return {
-		text: i ? Ge(i.innerHTML) : e.text,
+		text: i ? $e(i.innerHTML) : e.text,
 		isOpen: r
 	};
-}, Oi = (e, t) => {
+}, Fi = (e, t) => {
 	let { data: n, getContentElement: r } = e;
 	n.text += t.text;
 	let i = r();
@@ -4589,18 +4613,18 @@ var Qn = (e) => ({ element: Zn({
 		let n = e.parseHTML(t.text);
 		i.appendChild(n), i.normalize();
 	}
-}, ki = (e, t, n) => {
+}, Ii = (e, t, n) => {
 	let r = n();
 	if (!r) return {
 		newData: e,
 		inPlace: !1
 	};
-	let i = S(S({}, e), t);
+	let i = b(b({}, e), t);
 	return typeof t.text == "string" && (r.innerHTML = t.text), {
 		newData: i,
 		inPlace: !0
 	};
-}, Ai = class e {
+}, Li = class e {
 	constructor({ data: e, config: t, api: n, readOnly: r, block: i }) {
 		var a;
 		this._element = null, this._contentElement = null, this._arrowElement = null, this._bodyPlaceholderElement = null, this._childContainerElement = null, this.handleBlockChanged = (e) => {
@@ -4620,22 +4644,22 @@ var Qn = (e) => ({ element: Zn({
 	}
 	get placeholder() {
 		if (this._settings.placeholder) return this._settings.placeholder;
-		let e = this.api.i18n.t(we);
+		let e = this.api.i18n.t(Oe);
 		return e === "tools.toggle.placeholder" ? "Toggle" : e;
 	}
 	render() {
-		let e = ot({
+		let e = mt({
 			data: this._data,
 			readOnly: this.readOnly,
 			isOpen: this._isOpen,
 			placeholder: this.placeholder,
 			keydownHandler: this.readOnly ? null : this.handleKeyDown.bind(this),
-			onArrowClick: this.readOnly ? null : () => this.toggleOpen(),
+			onArrowClick: () => this.toggleOpen(),
 			onBodyPlaceholderClick: this.readOnly ? null : () => this.handleBodyPlaceholderClick(),
-			bodyPlaceholderText: this.api.i18n.t(ke),
+			bodyPlaceholderText: this.api.i18n.t(Ne),
 			ariaLabels: {
-				collapse: this.api.i18n.t(Re),
-				expand: this.api.i18n.t(De)
+				collapse: this.api.i18n.t(He),
+				expand: this.api.i18n.t(je)
 			}
 		});
 		return this._element = e.wrapper, this._contentElement = e.contentElement, this._arrowElement = e.arrowElement, this._bodyPlaceholderElement = e.bodyPlaceholderElement, this._childContainerElement = e.childContainerElement, this._element;
@@ -4644,31 +4668,31 @@ var Qn = (e) => ({ element: Zn({
 		this.updateChildrenVisibility(), this.updateBodyPlaceholderVisibility();
 	}
 	save() {
-		return Di(this._data, this._element, this.getContentElement.bind(this), this._isOpen);
+		return Pi(this._data, this._element, this.getContentElement.bind(this), this._isOpen);
 	}
 	validate(e) {
 		return !0;
 	}
 	merge(e) {
-		Oi({
+		Fi({
 			data: this._data,
 			getContentElement: this.getContentElement.bind(this),
-			parseHTML: Ei
+			parseHTML: Ni
 		}, e);
 	}
 	onPaste(t) {
 		let n = t.detail;
 		if (!("data" in n)) return;
-		let r = n.data, i = r.querySelector("summary"), a = ie(i === null ? r.innerHTML : i.innerHTML, e.sanitize.text);
+		let r = n.data, i = r.querySelector("summary"), a = Te(i === null ? r.innerHTML : i.innerHTML, e.sanitize.text);
 		this._data = { text: a };
 		let o = this.getContentElement();
 		o !== null && (o.innerHTML = a);
 	}
 	setData(e) {
-		let t = ki(this._data, e, this.getContentElement.bind(this));
-		return this._data = t.newData, typeof this._data.isOpen == "boolean" && (this._isOpen = this._data.isOpen), this._arrowElement && this._element && T(this._arrowElement, this._element, this._isOpen, {
-			collapse: this.api.i18n.t(Re),
-			expand: this.api.i18n.t(De)
+		let t = Ii(this._data, e, this.getContentElement.bind(this));
+		return this._data = t.newData, typeof this._data.isOpen == "boolean" && (this._isOpen = this._data.isOpen), this._arrowElement && this._element && C(this._arrowElement, this._element, this._isOpen, {
+			collapse: this.api.i18n.t(He),
+			expand: this.api.i18n.t(je)
 		}), this.updateChildrenVisibility(), this.updateBodyPlaceholderVisibility(), t.inPlace;
 	}
 	renderSettings() {
@@ -4690,19 +4714,19 @@ var Qn = (e) => ({ element: Zn({
 		return this._contentElement;
 	}
 	setOpenState(e) {
-		this._isOpen = e, this._arrowElement && this._element && T(this._arrowElement, this._element, this._isOpen, {
-			collapse: this.api.i18n.t(Re),
-			expand: this.api.i18n.t(De)
+		this._isOpen = e, this._arrowElement && this._element && C(this._arrowElement, this._element, this._isOpen, {
+			collapse: this.api.i18n.t(He),
+			expand: this.api.i18n.t(je)
 		}), this.updateChildrenVisibility(), this.updateBodyPlaceholderVisibility();
 	}
 	toggleOpen() {
 		this.setOpenState(!this._isOpen);
 	}
 	updateChildrenVisibility() {
-		this.blockId !== void 0 && st(this.api, this.blockId, this._isOpen, this._childContainerElement, this._arrowElement);
+		this.blockId !== void 0 && ht(this.api, this.blockId, this._isOpen, this._childContainerElement, this._arrowElement);
 	}
 	updateBodyPlaceholderVisibility() {
-		this.blockId !== void 0 && ct(this._bodyPlaceholderElement, this.api, this.blockId, this._isOpen, this.readOnly);
+		this.blockId !== void 0 && gt(this._bodyPlaceholderElement, this.api, this.blockId, this._isOpen, this.readOnly);
 	}
 	handleBodyPlaceholderClick() {
 		var e;
@@ -4738,10 +4762,10 @@ var Qn = (e) => ({ element: Zn({
 	}
 	async handleEnter() {
 		var e = this;
-		await lt(e.createKeyboardContext()), e.updateBodyPlaceholderVisibility();
+		await _t(e.createKeyboardContext()), e.updateBodyPlaceholderVisibility();
 	}
 	async handleBackspace(e) {
-		await ut(this.createKeyboardContext(), e);
+		await vt(this.createKeyboardContext(), e);
 	}
 	syncContentFromDOM() {
 		let e = this.getContentElement();
@@ -4749,10 +4773,10 @@ var Qn = (e) => ({ element: Zn({
 	}
 	static get toolbox() {
 		return {
-			icon: Fe,
+			icon: Pe,
 			title: "Toggle list",
 			titleKey: "toggleList",
-			name: je,
+			name: Fe,
 			searchTerms: [
 				"toggle",
 				"collapse",
@@ -4794,28 +4818,28 @@ var Qn = (e) => ({ element: Zn({
 }, V = (e) => {
 	let t = e.tagName;
 	return t === "B" || t === "STRONG";
-}, ji = (e) => !!(e && e.nodeType === Node.ELEMENT_NODE && V(e)), Mi = (e) => e.textContent.length === 0, H = (e) => e ? e.nodeType === Node.ELEMENT_NODE && V(e) ? U(e) : H(e.parentNode) : null, U = (e) => {
+}, Ri = (e) => !!(e && e.nodeType === Node.ELEMENT_NODE && V(e)), zi = (e) => e.textContent.length === 0, H = (e) => e ? e.nodeType === Node.ELEMENT_NODE && V(e) ? U(e) : H(e.parentNode) : null, U = (e) => {
 	if (e.tagName === "STRONG") return e;
 	let t = document.createElement("strong");
 	for (e.hasAttributes() && Array.from(e.attributes).forEach((e) => {
 		t.setAttribute(e.name, e.value);
 	}); e.firstChild;) t.appendChild(e.firstChild);
 	return e.replaceWith(t), t;
-}, Ni = (e) => {
+}, Bi = (e) => {
 	let t = e.nextSibling;
 	if ((t == null ? void 0 : t.nodeType) === Node.TEXT_NODE) return t;
 	let n = e.parentNode;
 	if (!n) return null;
 	let r = e.ownerDocument.createTextNode("");
 	return n.insertBefore(r, t), r;
-}, Pi = (e) => {
+}, Vi = (e) => {
 	if (!e.boldElement.isConnected) return null;
-	let t = U(e.boldElement), n = e.boundary, r = n.isConnected && n.previousSibling === t ? n : Ni(t);
+	let t = U(e.boldElement), n = e.boundary, r = n.isConnected && n.previousSibling === t ? n : Bi(t);
 	return r ? {
 		boundary: r,
 		boldElement: t
 	} : null;
-}, Fi = (e, t) => e ? e === t || t.contains(e) : !1, Ii, W = {
+}, Hi = (e, t) => e ? e === t || t.contains(e) : !1, Ui, W = {
 	COLLAPSED_LENGTH: "data-blok-bold-collapsed-length",
 	COLLAPSED_ACTIVE: "data-blok-bold-collapsed-active",
 	PREV_LENGTH: "data-blok-bold-prev-length",
@@ -4868,7 +4892,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	exit(e, t) {
 		let n = U(t), r = n.parentNode;
-		if (r) return Mi(n) ? this.removeEmptyBoldElement(e, n, r) : this.exitBoldWithContent(e, n, r);
+		if (r) return zi(n) ? this.removeEmptyBoldElement(e, n, r) : this.exitBoldWithContent(e, n, r);
 	}
 	removeEmptyBoldElement(e, t, n) {
 		let r = document.createRange();
@@ -4892,7 +4916,7 @@ var Qn = (e) => ({ element: Zn({
 	}
 	maintain() {
 		if (!(typeof document > "u")) for (let e of Array.from(this.records)) {
-			let t = Pi(e);
+			let t = Vi(e);
 			if (!t) {
 				this.records.delete(e);
 				continue;
@@ -4924,11 +4948,11 @@ var Qn = (e) => ({ element: Zn({
 		c && this.records.delete(e);
 	}
 	synchronize(e) {
-		var t, n;
-		let r = (t = e == null ? void 0 : e.anchorNode) == null ? e == null ? void 0 : e.focusNode : t, i = r && r.nodeType === Node.ELEMENT_NODE ? r : r == null ? void 0 : r.parentElement, a = (n = i == null ? void 0 : i.closest(v(x.editor))) == null ? i == null ? void 0 : i.ownerDocument : n;
-		if (!a) return;
-		let o = `strong[${W.COLLAPSED_ACTIVE}="true"]`;
-		a.querySelectorAll(o).forEach((t) => {
+		var t, r;
+		let i = (t = e == null ? void 0 : e.anchorNode) == null ? e == null ? void 0 : e.focusNode : t, a = i && i.nodeType === Node.ELEMENT_NODE ? i : i == null ? void 0 : i.parentElement, o = (r = a == null ? void 0 : a.closest(v(n.editor))) == null ? a == null ? void 0 : a.ownerDocument : r;
+		if (!o) return;
+		let s = `strong[${W.COLLAPSED_ACTIVE}="true"]`;
+		o.querySelectorAll(s).forEach((t) => {
 			var n;
 			let r = t.getAttribute(W.PREV_LENGTH), i = t.previousSibling;
 			if (!r || !i || i.nodeType !== Node.TEXT_NODE) return;
@@ -4942,17 +4966,17 @@ var Qn = (e) => ({ element: Zn({
 			if (u && !t.hasAttribute(W.LEADING_WHITESPACE) && t.setAttribute(W.LEADING_WHITESPACE, u[0]), l.length === 0) return;
 			let d = t.textContent, f = d + l, p = (n = t.getAttribute(W.LEADING_WHITESPACE)) == null ? "" : n, m = p.length > 0 && d.length === 0 && !f.startsWith(p) ? p + f : f, h = document.createTextNode(m);
 			for (; t.firstChild;) t.removeChild(t.firstChild);
-			if (t.appendChild(h), !(e != null && e.isCollapsed) || !Fi(e.focusNode, o)) return;
+			if (t.appendChild(h), !(e != null && e.isCollapsed) || !Hi(e.focusNode, o)) return;
 			let g = document.createRange(), _ = h.textContent.length;
 			g.setStart(h, _), g.collapse(!0), e.removeAllRanges(), e.addRange(g);
 		});
 	}
 	enforceLengths(e) {
 		var t;
-		let n = (t = e == null ? void 0 : e.anchorNode) == null ? e == null ? void 0 : e.focusNode : t;
-		if (!n) return;
-		let r = n.nodeType === Node.ELEMENT_NODE ? n : n.parentElement, i = r == null ? void 0 : r.closest(v(x.editor));
-		i && i.querySelectorAll(`strong[${W.COLLAPSED_LENGTH}]`).forEach((t) => {
+		let r = (t = e == null ? void 0 : e.anchorNode) == null ? e == null ? void 0 : e.focusNode : t;
+		if (!r) return;
+		let i = r.nodeType === Node.ELEMENT_NODE ? r : r.parentElement, a = i == null ? void 0 : i.closest(v(n.editor));
+		a && a.querySelectorAll(`strong[${W.COLLAPSED_LENGTH}]`).forEach((t) => {
 			var n;
 			let r = t.getAttribute(W.COLLAPSED_LENGTH);
 			if (!r) return;
@@ -4966,7 +4990,7 @@ var Qn = (e) => ({ element: Zn({
 				let r = document.createTextNode(n);
 				(m = t.parentNode) == null || m.insertBefore(r, t.nextSibling);
 			}
-			if (p && t.removeAttribute(W.PREV_LENGTH), e != null && e.isCollapsed && s && Fi(e.focusNode, t)) {
+			if (p && t.removeAttribute(W.PREV_LENGTH), e != null && e.isCollapsed && s && Hi(e.focusNode, t)) {
 				let t = document.createRange(), n = s.textContent.length;
 				t.setStart(s, n), t.collapse(!0), e.removeAllRanges(), e.addRange(t);
 			}
@@ -5060,10 +5084,10 @@ var Qn = (e) => ({ element: Zn({
 		return t.tagName === "STRONG" || t.tagName === "B";
 	}
 };
-Ii = G, Ii.instance = null;
+Ui = G, Ui.instance = null;
 //#endregion
 //#region src/components/inline-tools/services/bold-normalization-pass.ts
-var Li = {
+var Wi = {
 	convertLegacyTags: !0,
 	normalizeWhitespace: !0,
 	removeEmpty: !0,
@@ -5071,7 +5095,7 @@ var Li = {
 	preserveNode: null
 }, K = class e {
 	constructor(e) {
-		this.options = S(S({}, Li), e);
+		this.options = b(b({}, Wi), e);
 	}
 	run(e) {
 		if (typeof document > "u") return;
@@ -5124,16 +5148,16 @@ var Li = {
 		t.includes("\xA0") && (e.textContent = t.replace(/\u00A0/g, " "));
 	}
 	isEmptyAndSafe(e) {
-		return e.textContent.length !== 0 || G.getInstance().isActivePlaceholder(e) ? !1 : !(this.options.preserveNode && Fi(this.options.preserveNode, e));
+		return e.textContent.length !== 0 || G.getInstance().isActivePlaceholder(e) ? !1 : !(this.options.preserveNode && Hi(this.options.preserveNode, e));
 	}
 	mergeWithAdjacent(e) {
 		let t = e.previousSibling;
-		if (t && ji(t)) {
+		if (t && Ri(t)) {
 			this.mergeStrongNodes(t, e);
 			return;
 		}
 		let n = e.nextSibling;
-		n && ji(n) && this.mergeStrongNodes(e, n);
+		n && Ri(n) && this.mergeStrongNodes(e, n);
 	}
 	mergeStrongNodes(e, t) {
 		let n = U(e), r = U(t);
@@ -5141,13 +5165,13 @@ var Li = {
 		r.remove();
 	}
 	static findScopeFromSelection(e) {
-		var t, n;
-		let r = (t = e == null ? void 0 : e.anchorNode) == null ? e == null ? void 0 : e.focusNode : t;
-		if (!r) return null;
-		let i = r.nodeType === Node.ELEMENT_NODE ? r : r.parentElement;
-		return i ? ((n = i.closest("[data-blok-component=\"paragraph\"]")) == null ? i.closest(v(x.elementContent)) : n) || i.closest(v(x.editor)) : null;
+		var t, r;
+		let i = (t = e == null ? void 0 : e.anchorNode) == null ? e == null ? void 0 : e.focusNode : t;
+		if (!i) return null;
+		let a = i.nodeType === Node.ELEMENT_NODE ? i : i.parentElement;
+		return a ? ((r = a.closest("[data-blok-component=\"paragraph\"]")) == null ? a.closest(v(n.elementContent)) : r) || a.closest(v(n.editor)) : null;
 	}
-}, Ri, zi = class e {
+}, Gi, Ki = class e {
 	constructor() {
 		this.handlers = /* @__PURE__ */ new Map(), this.listenersRegistered = !1, this.handleSelectionChange = () => {
 			let e = this.getSelection();
@@ -5204,10 +5228,10 @@ var Li = {
 		return !(t.meta && !n || t.ctrl && !e.ctrlKey);
 	}
 };
-Ri = zi, Ri.instance = null;
+Gi = Ki, Gi.instance = null;
 //#endregion
 //#region src/components/inline-tools/utils/formatting-range-utils.ts
-var Bi = (e, t) => {
+var qi = (e, t) => {
 	try {
 		return e.intersectsNode(t);
 	} catch (n) {
@@ -5216,22 +5240,26 @@ var Bi = (e, t) => {
 		let i = e.compareBoundaryPoints(Range.END_TO_START, r) > 0, a = e.compareBoundaryPoints(Range.START_TO_END, r) < 0;
 		return i && a;
 	}
-}, Vi = (e) => document.createTreeWalker(e.commonAncestorContainer, NodeFilter.SHOW_TEXT, { acceptNode: (t) => Bi(e, t) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT }), q = (e, t, n) => !e || e === n ? null : e.nodeType === Node.ELEMENT_NODE && t(e) ? e : q(e.parentNode, t, n), Hi = (e, t) => q(e, t) !== null, Ui = (e, t, n = {}) => {
+}, Ji = (e) => {
+	var t;
+	let n = e.commonAncestorContainer, r = n.nodeType === Node.TEXT_NODE ? (t = n.parentNode) == null ? n : t : n;
+	return document.createTreeWalker(r, NodeFilter.SHOW_TEXT, { acceptNode: (t) => qi(e, t) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT });
+}, q = (e, t, n) => !e || e === n ? null : e.nodeType === Node.ELEMENT_NODE && t(e) ? e : q(e.parentNode, t, n), Yi = (e, t) => q(e, t) !== null, Xi = (e, t, n = {}) => {
 	if (e.collapsed) return q(e.startContainer, t) !== null;
-	let r = Vi(e), i = [];
+	let r = Ji(e), i = [];
 	for (; r.nextNode();) {
 		let e = r.currentNode, t = e.textContent;
 		n.ignoreWhitespace && t.trim().length === 0 || t.length !== 0 && i.push(e);
 	}
-	return i.length === 0 ? q(e.startContainer, t) !== null : i.every((e) => Hi(e, t));
+	return i.length === 0 ? q(e.startContainer, t) !== null : i.every((e) => Yi(e, t));
 }, J = (e, t) => {
-	let n = /* @__PURE__ */ new Set(), r = Vi(e);
+	let n = /* @__PURE__ */ new Set(), r = Ji(e);
 	for (; r.nextNode();) {
 		let e = q(r.currentNode, t);
 		e && n.add(e);
 	}
 	return Array.from(n);
-}, Y, Wi = class e {
+}, Y, Zi = class e {
 	static get sanitize() {
 		return {
 			strong: {},
@@ -5243,7 +5271,7 @@ var Bi = (e, t) => {
 	}
 	static initializeGlobalListeners() {
 		if (typeof document > "u") return !1;
-		let t = zi.getInstance();
+		let t = Ki.getInstance();
 		return t.hasHandler("bold") ? !0 : (t.register("bold", {
 			shortcut: {
 				key: "b",
@@ -5325,7 +5353,7 @@ var Bi = (e, t) => {
 			let e = document.createRange();
 			return e.setStartBefore(s), e.setEndAfter(c), r.removeAllRanges(), r.addRange(e), e;
 		})() || r.removeAllRanges(), K.normalizeAroundSelection(r), n.forEach((e) => {
-			Mi(e) && e.remove();
+			zi(e) && e.remove();
 		}), this.notifySelectionChange();
 	}
 	replaceRangeWithHtml(t, n) {
@@ -5365,7 +5393,7 @@ var Bi = (e, t) => {
 		n.selectNodeContents(e), t.removeAllRanges(), t.addRange(n);
 	}
 	isRangeBold(e, t) {
-		return Ui(e, V, t);
+		return Xi(e, V, t);
 	}
 	removeNestedBold(e) {
 		e.querySelectorAll("b,strong").forEach((e) => {
@@ -5408,12 +5436,12 @@ var Bi = (e, t) => {
 	updateToolbarButtonState() {
 		let e = window.getSelection();
 		if (!e) return;
-		let t = e.anchorNode, n = (t == null ? void 0 : t.nodeType) === Node.ELEMENT_NODE ? t : t == null ? void 0 : t.parentElement, r = n == null ? void 0 : n.closest(v(x.editor));
-		if (!r) return;
-		let i = r.querySelector("[data-blok-testid=inline-toolbar]");
-		if (!(i instanceof HTMLElement)) return;
-		let a = i.querySelector("[data-blok-item-name=\"bold\"]");
-		a instanceof HTMLElement && (this.isSelectionVisuallyBold(e) ? a.setAttribute("data-blok-popover-item-active", "true") : a.removeAttribute("data-blok-popover-item-active"));
+		let t = e.anchorNode, r = (t == null ? void 0 : t.nodeType) === Node.ELEMENT_NODE ? t : t == null ? void 0 : t.parentElement, i = r == null ? void 0 : r.closest(v(n.editor));
+		if (!i) return;
+		let a = i.querySelector("[data-blok-testid=inline-toolbar]");
+		if (!(a instanceof HTMLElement)) return;
+		let o = a.querySelector("[data-blok-item-name=\"bold\"]");
+		o instanceof HTMLElement && (this.isSelectionVisuallyBold(e) ? o.setAttribute("data-blok-popover-item-active", "true") : o.removeAttribute("data-blok-popover-item-active"));
 	}
 	static refreshSelectionState(e) {
 		let t = window.getSelection();
@@ -5450,7 +5478,7 @@ var Bi = (e, t) => {
 	}
 	static findBlokScopeFromNode(e) {
 		let t = e.nodeType === Node.ELEMENT_NODE ? e : e.parentElement;
-		return !t || typeof t.closest != "function" ? null : t.closest(`${v(x.interface)}, ${v(x.editor)}`);
+		return !t || typeof t.closest != "function" ? null : t.closest(`${v(n.interface)}, ${v(n.editor)}`);
 	}
 	static getBoundaryBold(t) {
 		let n = t.startContainer;
@@ -5461,18 +5489,18 @@ var Bi = (e, t) => {
 		if (e.startOffset === n) return H(t);
 		if (e.startOffset !== 0) return null;
 		let r = t.previousSibling;
-		return ji(r) ? r : null;
+		return Ri(r) ? r : null;
 	}
 	static getBoundaryBoldForElement(e, t) {
 		if (e.startOffset <= 0) return null;
 		let n = t.childNodes[e.startOffset - 1];
-		return ji(n) ? n : null;
+		return Ri(n) ? n : null;
 	}
 	static isSelectionInsideBlok(e) {
 		let t = e.anchorNode;
 		if (!t) return !1;
-		let n = t.nodeType === Node.ELEMENT_NODE ? t : t.parentElement;
-		return !!(n != null && n.closest(v(x.editor)));
+		let r = t.nodeType === Node.ELEMENT_NODE ? t : t.parentElement;
+		return !!(r != null && r.closest(v(n.editor)));
 	}
 	getRangeHtmlWithoutBold(e) {
 		let t = e.cloneContents();
@@ -5488,13 +5516,13 @@ var Bi = (e, t) => {
 		return J(e, V);
 	}
 };
-Y = Wi, Y.isInline = !0, Y.title = "Bold", Y.titleKey = "bold", Y.markerSequence = 0, Y.isProcessingMutation = !1, Y.instances = /* @__PURE__ */ new Set(), Y.guardKeydownListenerRegistered = !1, Y.shortcut = "CMD+B";
+Y = Zi, Y.isInline = !0, Y.title = "Bold", Y.titleKey = "bold", Y.markerSequence = 0, Y.isProcessingMutation = !1, Y.instances = /* @__PURE__ */ new Set(), Y.guardKeydownListenerRegistered = !1, Y.shortcut = "CMD+B";
 //#endregion
 //#region src/components/inline-tools/inline-tool-italic.ts
-var X, Gi = (e) => {
+var X, Qi = (e) => {
 	let t = e.tagName;
 	return t === "I" || t === "EM";
-}, Ki = class {
+}, $i = class {
 	static get sanitize() {
 		return {
 			i: {},
@@ -5503,7 +5531,7 @@ var X, Gi = (e) => {
 	}
 	render() {
 		return {
-			icon: ae,
+			icon: s,
 			name: "italic",
 			onActivate: () => {
 				this.toggleItalic();
@@ -5543,7 +5571,7 @@ var X, Gi = (e) => {
 		return this.isRangeItalic(t, { ignoreWhitespace: !0 });
 	}
 	isRangeItalic(e, t) {
-		return Ui(e, Gi, t);
+		return Xi(e, Qi, t);
 	}
 	wrapWithItalic(e) {
 		let t = this.getRangeHtmlWithoutItalic(e), n = this.replaceRangeWithHtml(e, `<i>${t}</i>`), r = window.getSelection();
@@ -5569,13 +5597,13 @@ var X, Gi = (e) => {
 		});
 	}
 	hasItalicParent(e) {
-		return Hi(e, Gi);
+		return Yi(e, Qi);
 	}
 	findItalicElement(e) {
-		return q(e, Gi);
+		return q(e, Qi);
 	}
 	collectItalicAncestors(e) {
-		return J(e, Gi);
+		return J(e, Qi);
 	}
 	getRangeHtmlWithoutItalic(e) {
 		let t = e.cloneContents();
@@ -5632,10 +5660,10 @@ var X, Gi = (e) => {
 		n.insertBefore(r, t.nextSibling), n.insertBefore(e, r);
 	}
 };
-X = Ki, X.isInline = !0, X.title = "Italic", X.titleKey = "italic", X.shortcut = "CMD+I";
+X = $i, X.isInline = !0, X.title = "Italic", X.titleKey = "italic", X.shortcut = "CMD+I";
 //#endregion
 //#region src/components/inline-tools/inline-tool-link.ts
-var Z, qi = class {
+var Z, ea = "flex items-center gap-2 w-full mt-0.5 px-1.5 py-1.5 rounded-md text-left cursor-pointer can-hover:hover:bg-item-hover-bg transition-colors", ta = "flex items-center gap-2 w-full mt-0.5 px-1.5 py-1.5 rounded-md text-left pointer-events-none", na = class {
 	static get sanitize() {
 		return { a: {
 			href: !0,
@@ -5644,28 +5672,29 @@ var Z, qi = class {
 		} };
 	}
 	constructor({ api: e }) {
-		this.INPUT_BASE_CLASSES = "hidden w-full m-0 px-2 py-1 text-sm leading-[22px] font-medium bg-item-hover-bg border border-link-input-border rounded-md outline-hidden box-border appearance-none font-[inherit] placeholder:text-gray-text mobile:text-[15px] mobile:font-medium", this.DATA_ATTRIBUTES = {
+		this.INPUT_BASE_CLASSES = "hidden w-[200px] m-0 px-2 py-1 text-sm leading-[22px] font-medium text-text-primary bg-item-hover-bg border border-link-input-border rounded-lg! outline-hidden box-border appearance-none font-[inherit] placeholder:text-gray-text mobile:text-[15px] mobile:font-medium", this.DATA_ATTRIBUTES = {
 			buttonActive: "data-blok-link-tool-active",
 			buttonUnlink: "data-blok-link-tool-unlink",
 			inputOpened: "data-blok-link-tool-input-opened"
 		}, this.nodes = {
 			input: null,
+			inputWrapper: null,
+			suggestion: null,
 			button: null
 		}, this.inputOpened = !1, this.unlinkAvailable = !1, this.handleButtonClick = (e) => {
 			!this.inputOpened || !this.unlinkAvailable || (e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation(), this.restoreSelection(), this.unlink(), this.inlineToolbar.close());
-		}, this.toolbar = e.toolbar, this.inlineToolbar = e.inlineToolbar, this.notifier = e.notifier, this.i18n = e.i18n, this.selection = new y(), this.nodes.input = this.createInput();
+		}, this.toolbar = e.toolbar, this.inlineToolbar = e.inlineToolbar, this.notifier = e.notifier, this.i18n = e.i18n, this.selection = new o(), this.nodes.input = this.createInput(), this.nodes.suggestion = this.createSuggestion(), this.nodes.inputWrapper = document.createElement("div"), this.nodes.inputWrapper.append(this.nodes.input, this.nodes.suggestion);
 	}
 	render() {
 		return {
-			icon: se,
+			icon: d,
 			name: "link",
 			isActive: () => !!this.selection.findParentTag("A"),
 			children: {
 				hideChevron: !0,
-				width: "200px",
 				items: [{
 					type: _.Html,
-					element: this.nodes.input
+					element: this.nodes.inputWrapper
 				}],
 				onOpen: () => {
 					this.openActions(!0);
@@ -5680,8 +5709,69 @@ var Z, qi = class {
 		let e = document.createElement("input");
 		return e.placeholder = this.i18n.t("tools.link.addLink"), e.enterKeyHint = "done", e.className = this.INPUT_BASE_CLASSES, e.setAttribute("data-blok-testid", "inline-tool-input"), this.setBooleanStateAttribute(e, this.DATA_ATTRIBUTES.inputOpened, !1), e.addEventListener("keydown", (e) => {
 			e.key === "Enter" && this.enterPressed(e);
+		}), e.addEventListener("paste", () => {
+			requestAnimationFrame(() => {
+				this.updateSuggestion(e.value);
+			});
+		}), e.addEventListener("input", () => {
+			this.updateSuggestion(e.value);
 		}), e;
 	}
+	createSuggestion() {
+		let e = document.createElement("div");
+		e.className = "hidden", e.setAttribute("data-link-suggestion", "");
+		let t = document.createElement("div");
+		t.className = "mt-1 mb-0.5 h-px bg-link-input-border";
+		let n = document.createElement("button");
+		n.type = "button", n.className = ea, n.setAttribute("data-link-suggestion-row", "");
+		let r = document.createElement("span");
+		r.className = "text-gray-text shrink-0 flex [&>svg]:size-7", r.setAttribute("data-link-suggestion-icon", "");
+		let i = document.createElement("span");
+		i.className = "flex-1 min-w-0";
+		let a = document.createElement("span");
+		a.className = "block text-xs font-medium text-text-primary truncate", a.setAttribute("data-link-suggestion-url", "");
+		let o = document.createElement("span");
+		return o.className = "block text-[10.5px] text-gray-text leading-tight mt-px", o.setAttribute("data-link-suggestion-type", ""), i.append(a, o), n.append(r, i), e.append(t, n), n.addEventListener("mousedown", (e) => e.preventDefault()), n.addEventListener("click", () => this.confirmLink()), e;
+	}
+	updateSuggestion(e) {
+		if (!this.nodes.suggestion) return;
+		let t = e.trim();
+		if (!t) {
+			this.nodes.suggestion.classList.add("hidden");
+			return;
+		}
+		let n = this.isLinkComplete(t), { icon: r, label: i } = this.getLinkTypeInfo(t), a = this.nodes.suggestion.querySelector("[data-link-suggestion-icon]"), o = this.nodes.suggestion.querySelector("[data-link-suggestion-url]"), s = this.nodes.suggestion.querySelector("[data-link-suggestion-type]"), c = this.nodes.suggestion.querySelector("[data-link-suggestion-row]");
+		a && (a.innerHTML = r, a.className = `${n ? "text-gray-text" : "text-gray-text opacity-40"} shrink-0 flex [&>svg]:size-7`), o && (o.textContent = t, o.className = `block text-xs font-medium truncate ${n ? "text-text-primary" : "text-gray-text"}`), s && (s.textContent = n ? i : "Keep typing to add a link", s.className = "block text-[10.5px] text-gray-text leading-tight mt-px"), c && (c.className = n ? ea : ta), this.nodes.suggestion.classList.remove("hidden");
+	}
+	isLinkComplete(e) {
+		return /^https?:\/\//i.test(e) ? e.replace(/^https?:\/\//i, "").length > 0 : /^\w+:\/\//.test(e) ? e.replace(/^\w+:\/\//, "").length > 0 : /^\w+:/.test(e) ? e.slice(e.indexOf(":") + 1).length > 0 : e.startsWith("//") ? e.slice(2).length > 0 : e.startsWith("#") ? e.length > 1 : e.startsWith("/") ? !0 : /\.[a-zA-Z]{2,}/.test(e) || /^\d{1,3}(\.\d{1,3}){3}/.test(e);
+	}
+	getLinkTypeInfo(e) {
+		return e.startsWith("mailto:") ? {
+			icon: ae,
+			label: "Email address"
+		} : e.startsWith("#") ? {
+			icon: ee,
+			label: "Jump to section"
+		} : {
+			icon: we,
+			label: "Link to web page"
+		};
+	}
+	confirmLink() {
+		if (!this.nodes.input) return;
+		let e = this.nodes.input.value || "";
+		if (!e.trim() || !this.isLinkComplete(e.trim())) return;
+		if (!this.validateURL(e)) {
+			this.notifier.show({
+				message: this.i18n.t("tools.link.invalidLink"),
+				style: "error"
+			});
+			return;
+		}
+		let t = this.prepareLink(e);
+		this.selection.removeFakeBackground(), this.selection.restore(), this.insertLink(t), this.selection.collapseToEnd(), this.inlineToolbar.close();
+	}
 	openActions(e = !1) {
 		if (!this.nodes.input) return;
 		let t = this.selection.findParentTag("A"), n = !!t;
@@ -5689,7 +5779,7 @@ var Z, qi = class {
 			let e = t.getAttribute("href");
 			this.nodes.input.value = e === null ? "" : e;
 		} else this.nodes.input.value = "";
-		this.nodes.input.className = C(this.INPUT_BASE_CLASSES, "block"), this.setBooleanStateAttribute(this.nodes.input, this.DATA_ATTRIBUTES.inputOpened, !0), this.selection.setFakeBackground(), this.selection.save(), e && this.focusInputWithRetry(), this.inputOpened = !0;
+		this.updateSuggestion(this.nodes.input.value), this.nodes.input.className = x(this.INPUT_BASE_CLASSES, "block"), this.setBooleanStateAttribute(this.nodes.input, this.DATA_ATTRIBUTES.inputOpened, !0), this.selection.setFakeBackground(), this.selection.save(), e && this.focusInputWithRetry(), this.inputOpened = !0;
 	}
 	focusInputWithRetry() {
 		this.nodes.input && (this.nodes.input.focus(), !(typeof window > "u" || typeof document > "u") && window.setTimeout(() => {
@@ -5700,7 +5790,7 @@ var Z, qi = class {
 		}, 0));
 	}
 	getButtonElement() {
-		let e = document.querySelector(`${v(x.interface, m)} [data-blok-item-name="link"]`);
+		let e = document.querySelector(`${v(n.interface, te)} [data-blok-item-name="link"]`);
 		return e && e !== this.nodes.button && (e.addEventListener("click", this.handleButtonClick, !0), this.nodes.button = e), e;
 	}
 	updateButtonStateAttributes(e) {
@@ -5710,10 +5800,11 @@ var Z, qi = class {
 		this.setBooleanStateAttribute(t, this.DATA_ATTRIBUTES.buttonActive, n), this.setBooleanStateAttribute(t, this.DATA_ATTRIBUTES.buttonUnlink, n);
 	}
 	closeActions(e = !0) {
-		(this.selection.isFakeBackgroundEnabled || e && this.selection.savedSelectionRange) && this.restoreSelection(), this.nodes.input && (this.nodes.input.className = this.INPUT_BASE_CLASSES, this.setBooleanStateAttribute(this.nodes.input, this.DATA_ATTRIBUTES.inputOpened, !1), this.nodes.input.value = "", this.updateButtonStateAttributes(!1), this.unlinkAvailable = !1, e && this.selection.clearSaved(), this.inputOpened = !1);
+		var t;
+		(this.selection.isFakeBackgroundEnabled || e && this.selection.savedSelectionRange) && this.restoreSelection(), this.nodes.input && (this.nodes.input.className = this.INPUT_BASE_CLASSES, this.setBooleanStateAttribute(this.nodes.input, this.DATA_ATTRIBUTES.inputOpened, !1), this.nodes.input.value = "", (t = this.nodes.suggestion) == null || t.classList.add("hidden"), this.updateButtonStateAttributes(!1), this.unlinkAvailable = !1, e && this.selection.clearSaved(), this.inputOpened = !1);
 	}
 	restoreSelection() {
-		let e = new y(), t = y.isAtBlok;
+		let e = new o(), t = o.isAtBlok;
 		if (t && e.save(), this.selection.removeFakeBackground(), this.selection.restore(), !t && this.selection.savedSelectionRange) {
 			let e = this.selection.savedSelectionRange.commonAncestorContainer, t = e.nodeType === Node.ELEMENT_NODE ? e : e.parentElement;
 			t == null || t.focus();
@@ -5737,7 +5828,7 @@ var Z, qi = class {
 			this.notifier.show({
 				message: this.i18n.t("tools.link.invalidLink"),
 				style: "error"
-			}), He("Incorrect Link pasted", "warn", t);
+			}), qe("Incorrect Link pasted", "warn", t);
 			return;
 		}
 		let n = this.prepareLink(t);
@@ -5760,7 +5851,7 @@ var Z, qi = class {
 			this.selection.expandToTag(t), t.href = e, t.target = "_blank", t.rel = "nofollow";
 			return;
 		}
-		let n = y.range;
+		let n = o.range;
 		if (!n) return;
 		let r = document.createElement("a");
 		r.href = e, r.target = "_blank", r.rel = "nofollow", r.appendChild(n.extractContents()), n.insertNode(r), this.selection.expandToTag(r);
@@ -5779,13 +5870,13 @@ var Z, qi = class {
 		e && e.setAttribute(t, n ? "true" : "false");
 	}
 };
-Z = qi, Z.isInline = !0, Z.title = "Link", Z.titleKey = "link", Z.shortcut = "CMD+K";
+Z = na, Z.isInline = !0, Z.title = "Link", Z.titleKey = "link", Z.shortcut = "CMD+K";
 //#endregion
 //#region src/components/inline-tools/utils/marker-dom-utils.ts
-var Q = (e) => e.tagName === "MARK", Ji = (e) => q(e, Q), $, Yi = {
+var Q = (e) => e.tagName === "MARK", ra = (e) => q(e, Q), $, ia = {
 	color: "background-color",
 	"background-color": "color"
-}, Xi = class e {
+}, aa = class e {
 	static get sanitize() {
 		return { mark: (t) => {
 			let n = t.style, r = Array.from({ length: n.length }, (e, t) => n.item(t));
@@ -5794,10 +5885,9 @@ var Q = (e) => e.tagName === "MARK", Ji = (e) => q(e, Q), $, Yi = {
 		} };
 	}
 	constructor({ api: e }) {
-		this.colorMode = "color", this.i18n = e.i18n, this.inlineToolbar = e.inlineToolbar, this.selection = new y(), this.picker = Zn({
+		this.colorMode = "color", this.activeTextColor = null, this.activeBgColor = null, this.i18n = e.i18n, this.inlineToolbar = e.inlineToolbar, this.selection = new o(), this.picker = or({
 			i18n: this.i18n,
 			testIdPrefix: "marker",
-			defaultModeIndex: 0,
 			modes: [{
 				key: "color",
 				labelKey: "tools.marker.textColor",
@@ -5808,21 +5898,26 @@ var Q = (e) => e.tagName === "MARK", Ji = (e) => q(e, Q), $, Yi = {
 				presetField: "bg"
 			}],
 			onColorSelect: (e, t) => {
-				this.colorMode = t, e === null ? this.removeColor(this.colorMode) : this.applyColor(this.colorMode, e), this.selection.setFakeBackground(), this.selection.save();
+				this.colorMode = t, e === null ? this.removeColor(this.colorMode) : this.applyColor(this.colorMode, e), t === "color" ? this.activeTextColor = e : this.activeBgColor = e, this.picker.setActiveColor(e, t), this.updateToolbarColors(this.activeTextColor, this.activeBgColor), this.selection.setFakeBackground(), this.selection.save();
 			}
 		});
 	}
 	render() {
 		return {
-			icon: l,
+			icon: se,
 			name: "marker",
 			isActive: () => {
 				let e = window.getSelection();
-				return !e || e.rangeCount === 0 ? !1 : Ui(e.getRangeAt(0), Q, { ignoreWhitespace: !0 });
+				if (!e || e.rangeCount === 0) return !1;
+				let t = e.getRangeAt(0), n = Xi(t, Q, { ignoreWhitespace: !0 });
+				if (n) {
+					let e = this.detectBothSelectionColors(t);
+					this.updateToolbarColors(e.text, e.bg);
+				}
+				return n;
 			},
 			children: {
 				hideChevron: !0,
-				width: "200px",
 				items: [{
 					type: _.Html,
 					element: this.picker.element
@@ -5842,31 +5937,33 @@ var Q = (e) => e.tagName === "MARK", Ji = (e) => q(e, Q), $, Yi = {
 		if (!n || n.rangeCount === 0) return;
 		let r = n.getRangeAt(0);
 		if (r.collapsed) return;
-		let i = this.findContainingMark(r);
-		if (i) {
-			let n = document.createRange();
-			if (n.selectNodeContents(i), r.compareBoundaryPoints(Range.START_TO_START, n) <= 0 && r.compareBoundaryPoints(Range.END_TO_END, n) >= 0) {
-				i.style.setProperty(e, t), this.ensureTransparentBg(i);
+		let i = this.resolveToVar(t, e), a = this.findContainingMark(r);
+		if (a) {
+			let t = document.createRange();
+			if (t.selectNodeContents(a), r.compareBoundaryPoints(Range.START_TO_START, t) <= 0 && r.compareBoundaryPoints(Range.END_TO_END, t) >= 0) {
+				a.style.setProperty(e, i), this.ensureTransparentBg(a);
 				return;
 			}
-			this.splitMarkAroundRange(i, r, e, t);
+			this.splitMarkAroundRange(a, r, e, i);
 			return;
 		}
 		this.splitMarksAtBoundaries(r), this.removeNestedMarkStyle(r, e);
-		let a = document.createElement("mark");
-		a.style.setProperty(e, t), this.ensureTransparentBg(a), a.appendChild(r.extractContents()), r.insertNode(a), n.removeAllRanges();
-		let o = document.createRange();
-		o.selectNodeContents(a), n.addRange(o);
+		let o = document.createElement("mark");
+		o.style.setProperty(e, i), this.ensureTransparentBg(o), o.appendChild(r.extractContents()), r.insertNode(o), n.removeAllRanges();
+		let s = document.createRange();
+		s.selectNodeContents(o), n.addRange(s);
 	}
 	removeColor(e) {
 		var t, n;
 		this.restoreSelectionIfSaved();
 		let r = window.getSelection();
 		if (!r || r.rangeCount === 0) return;
-		let i = r.getRangeAt(0), a = i.startContainer, o = i.startOffset, s = i.endContainer, c = i.endOffset, l = i.toString(), u = i.commonAncestorContainer, d = u.nodeType === Node.ELEMENT_NODE ? u : u.parentElement, f = d != null && d.closest("mark") ? (t = (n = d.closest("mark")) == null ? void 0 : n.parentElement) == null ? d : t : d, p = J(i, Q);
+		let i = r.getRangeAt(0), a = i.startContainer, o = i.startOffset, s = i.endContainer, c = i.endOffset, l = i.toString(), u = i.commonAncestorContainer, d = u.nodeType === Node.ELEMENT_NODE ? u : u.parentElement, f = d != null && d.closest("mark") ? (t = (n = d.closest("mark")) == null ? void 0 : n.parentElement) == null ? d : t : d;
+		this.splitMarksAtBoundaries(i);
+		let p = J(i, Q);
 		for (let t of p) {
 			t.style.removeProperty(e);
-			let n = Yi[e], r = t.style.getPropertyValue(n);
+			let n = ia[e], r = t.style.getPropertyValue(n);
 			r !== "" && r !== "transparent" ? this.ensureTransparentBg(t) : this.unwrapElement(t);
 		}
 		let m = a.isConnected, h = s.isConnected;
@@ -5879,41 +5976,69 @@ var Q = (e) => e.tagName === "MARK", Ji = (e) => q(e, Q), $, Yi = {
 		else this.restoreSelectionByText(r, f, l);
 	}
 	onPickerOpen() {
-		this.picker.reset();
-		let e = this.detectSelectionColor();
-		e && this.picker.setActiveColor(e.value, e.mode), this.selection.setFakeBackground(), this.selection.save();
+		this.activeTextColor = null, this.activeBgColor = null, this.picker.reset();
+		let e = this.detectBothSelectionComputedColors();
+		e.text !== null && (this.picker.setActiveColor(e.text, "color"), this.activeTextColor = e.text), e.bg !== null && (this.picker.setActiveColor(e.bg, "background-color"), this.activeBgColor = e.bg), this.updateToolbarColors(this.activeTextColor, this.activeBgColor), this.selection.setFakeBackground(), this.selection.save();
+	}
+	updateToolbarColors(e, t) {
+		let n = document.querySelector("[data-blok-item-name=\"marker\"]");
+		if (!n) return;
+		e === null ? t === null ? n.style.removeProperty("color") : n.style.setProperty("color", "var(--blok-text-primary)") : n.style.setProperty("color", e);
+		let r = n.querySelector("svg rect");
+		t === null ? e === null ? (r && (r.style.fill = ""), n.style.removeProperty("background-color")) : (r && (r.style.fill = "var(--blok-swatch-neutral-bg)"), n.style.setProperty("background-color", "transparent")) : (r && (r.style.fill = t), n.style.setProperty("background-color", "transparent"));
 	}
 	onPickerClose() {
 		this.selection.removeFakeBackground(), this.selection.savedSelectionRange && this.selection.restore(), this.selection.clearSaved();
 	}
-	detectSelectionColor() {
+	detectBothSelectionColors(e) {
+		let t = ra(e.startContainer);
+		if (!t) return {
+			text: null,
+			bg: null
+		};
+		let n = (e) => {
+			let n = t.style.getPropertyValue(e);
+			return n && n !== "transparent" ? n : null;
+		};
+		return {
+			text: n("color"),
+			bg: n("background-color")
+		};
+	}
+	detectBothSelectionComputedColors() {
 		let e = window.getSelection();
-		if (!e || e.rangeCount === 0) return null;
-		let t = Ji(e.getRangeAt(0).startContainer);
-		if (!t) return null;
-		let n = t.style.getPropertyValue("color");
-		if (n && n !== "transparent") return {
-			value: n,
-			mode: "color"
+		if (!e || e.rangeCount === 0) return {
+			text: null,
+			bg: null
+		};
+		let t = ra(e.getRangeAt(0).startContainer);
+		if (!t) return {
+			text: null,
+			bg: null
+		};
+		let n = window.getComputedStyle(t), r = (e) => {
+			let r = t.style.getPropertyValue(e);
+			if (!r || r === "transparent") return null;
+			let i = n.getPropertyValue(e);
+			return i && i !== "transparent" ? i : null;
+		};
+		return {
+			text: r("color"),
+			bg: r("background-color")
 		};
-		let r = t.style.getPropertyValue("background-color");
-		return r && r !== "transparent" ? {
-			value: r,
-			mode: "background-color"
-		} : null;
 	}
 	restoreSelectionIfSaved() {
 		this.selection.savedSelectionRange && (this.selection.removeFakeBackground(), this.selection.restore(), this.selection.clearSaved());
 	}
 	findContainingMark(e) {
-		let t = Ji(e.startContainer), n = Ji(e.endContainer);
+		let t = ra(e.startContainer), n = ra(e.endContainer);
 		return t && t === n ? t : null;
 	}
 	removeNestedMarkStyle(e, t) {
 		let n = J(e, Q);
 		for (let e of n) {
 			e.style.removeProperty(t);
-			let n = Yi[t], r = e.style.getPropertyValue(n);
+			let n = ia[t], r = e.style.getPropertyValue(n);
 			r !== "" && r !== "transparent" ? this.ensureTransparentBg(e) : this.unwrapElement(e);
 		}
 	}
@@ -6007,21 +6132,26 @@ var Q = (e) => e.tagName === "MARK", Ji = (e) => q(e, Q), $, Yi = {
 	ensureTransparentBg(e) {
 		e.style.getPropertyValue("color") && !e.style.getPropertyValue("background-color") && e.style.setProperty("background-color", "transparent");
 	}
+	resolveToVar(e, t) {
+		if (e.startsWith("var(")) return e;
+		let n = t === "color" ? "text" : "bg", r = ce(e, n);
+		return r === null ? e : Ye(r, n);
+	}
 };
-$ = Xi, $.isInline = !0, $.title = "Color", $.titleKey = "marker", $.shortcut = "CMD+SHIFT+H", $.ALLOWED_STYLE_PROPS = new Set(["color", "background-color"]);
+$ = aa, $.isInline = !0, $.title = "Color", $.titleKey = "marker", $.shortcut = "CMD+SHIFT+H", $.ALLOWED_STYLE_PROPS = new Set(["color", "background-color"]);
 //#endregion
 //#region src/tools/index.ts
-var Zi = {
+var oa = {
 	paragraph: { preserveBlank: !0 },
 	header: {},
 	list: {},
 	table: {},
 	toggle: {}
-}, Qi = {
+}, sa = {
 	bold: {},
 	italic: {},
 	link: {},
 	marker: {}
 };
 //#endregion
-export { Ki as a, Ti as c, tt as d, qi as i, Nn as l, Qi as n, Wi as o, Xi as r, Ai as s, Zi as t, ht as u };
+export { $i as a, Mi as c, lt as d, na as i, Vn as l, sa as n, Zi as o, aa as r, Li as s, oa as t, Ct as u };