@mathews_cometchat/bubble-builder 1.0.0-alpha7 → 1.0.0-alpha8

package/dist/bubble-builder.es.js

@@ -1804,30 +1804,30 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	function lr(e) {
 		yd(e, 0);
 	}
-	function R(e) {
+	function ur(e) {
 		if (Lt(yt(e))) return e;
 	}
-	function ur(e, t) {
+	function dr(e, t) {
 		if (e === "change") return t;
 	}
-	var z = !1;
+	var fr = !1;
 	if (dn) {
-		var dr;
+		var R;
 		if (dn) {
-			var fr = "oninput" in document;
-			if (!fr) {
-				var pr = document.createElement("div");
-				pr.setAttribute("oninput", "return;"), fr = typeof pr.oninput == "function";
+			var pr = "oninput" in document;
+			if (!pr) {
+				var z = document.createElement("div");
+				z.setAttribute("oninput", "return;"), pr = typeof z.oninput == "function";
 			}
-			dr = fr;
-		} else dr = !1;
-		z = dr && (!document.documentMode || 9 < document.documentMode);
+			R = pr;
+		} else R = !1;
+		fr = R && (!document.documentMode || 9 < document.documentMode);
 	}
 	function mr() {
 		sr && (sr.detachEvent("onpropertychange", hr), cr = sr = null);
 	}
 	function hr(e) {
-		if (e.propertyName === "value" && R(cr)) {
+		if (e.propertyName === "value" && ur(cr)) {
 			var t = [];
 			or(t, cr, e, rn(e)), ln(lr, t);
 		}
@@ -1836,26 +1836,26 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		e === "focusin" ? (mr(), sr = t, cr = n, sr.attachEvent("onpropertychange", hr)) : e === "focusout" && mr();
 	}
 	function _r(e) {
-		if (e === "selectionchange" || e === "keyup" || e === "keydown") return R(cr);
+		if (e === "selectionchange" || e === "keyup" || e === "keydown") return ur(cr);
 	}
 	function vr(e, t) {
-		if (e === "click") return R(t);
-	}
-	function B(e, t) {
-		if (e === "input" || e === "change") return R(t);
+		if (e === "click") return ur(t);
 	}
 	function yr(e, t) {
+		if (e === "input" || e === "change") return ur(t);
+	}
+	function br(e, t) {
 		return e === t && (e !== 0 || 1 / e == 1 / t) || e !== e && t !== t;
 	}
-	var br = typeof Object.is == "function" ? Object.is : yr;
-	function xr(e, t) {
-		if (br(e, t)) return !0;
+	var xr = typeof Object.is == "function" ? Object.is : br;
+	function B(e, t) {
+		if (xr(e, t)) return !0;
 		if (typeof e != "object" || !e || typeof t != "object" || !t) return !1;
 		var n = Object.keys(e), r = Object.keys(t);
 		if (n.length !== r.length) return !1;
 		for (r = 0; r < n.length; r++) {
 			var i = n[r];
-			if (!we.call(t, i) || !br(e[i], t[i])) return !1;
+			if (!we.call(t, i) || !xr(e[i], t[i])) return !1;
 		}
 		return !0;
 	}
@@ -1919,7 +1919,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			anchorOffset: r.anchorOffset,
 			focusNode: r.focusNode,
 			focusOffset: r.focusOffset
-		}), Ar && xr(Ar, r) || (Ar = r, r = Ed(kr, "onSelect"), 0 < r.length && (t = new Cn("onSelect", "select", null, t, n), e.push({
+		}), Ar && B(Ar, r) || (Ar = r, r = Ed(kr, "onSelect"), 0 < r.length && (t = new Cn("onSelect", "select", null, t, n), e.push({
 			event: t,
 			listeners: r
 		}), t.target = Or)));
@@ -2259,7 +2259,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				if (s === null) throw Error(i(387));
 				if (s = s.memoizedProps, s !== null) {
 					var c = a.type;
-					br(a.pendingProps.value, s.value) || (e === null ? e = [c] : e.push(c));
+					xr(a.pendingProps.value, s.value) || (e === null ? e = [c] : e.push(c));
 				}
 			} else if (a === N.current) {
 				if (s = a.alternate, s === null) throw Error(i(387));
@@ -2271,7 +2271,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	}
 	function Xi(e) {
 		for (e = e.firstContext; e !== null;) {
-			if (!br(e.context._currentValue, e.memoizedValue)) return !0;
+			if (!xr(e.context._currentValue, e.memoizedValue)) return !0;
 			e = e.next;
 		}
 		return !1;
@@ -2327,16 +2327,16 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			refCount: 0
 		};
 	}
-	function U(e) {
+	function oa(e) {
 		e.refCount--, e.refCount === 0 && na(ra, function() {
 			e.controller.abort();
 		});
 	}
-	var oa = null, sa = 0, ca = 0, la = null;
+	var sa = null, ca = 0, U = 0, la = null;
 	function ua(e, t) {
-		if (oa === null) {
-			var n = oa = [];
-			sa = 0, ca = dd(), la = {
+		if (sa === null) {
+			var n = sa = [];
+			ca = 0, U = dd(), la = {
 				status: "pending",
 				value: void 0,
 				then: function(e) {
@@ -2344,13 +2344,13 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				}
 			};
 		}
-		return sa++, t.then(da, da), t;
+		return ca++, t.then(da, da), t;
 	}
 	function da() {
-		if (--sa === 0 && oa !== null) {
+		if (--ca === 0 && sa !== null) {
 			la !== null && (la.status = "fulfilled");
-			var e = oa;
-			oa = null, ca = 0, la = null;
+			var e = sa;
+			sa = null, U = 0, la = null;
 			for (var t = 0; t < e.length; t++) (0, e[t])();
 		}
 	}
@@ -2738,7 +2738,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			do {
 				var p = s.lane & -536870913, m = p !== s.lane;
 				if (m ? (Y & p) === p : (r & p) === p) {
-					p !== 0 && p === ca && (Ua = !0), u !== null && (u = u.next = {
+					p !== 0 && p === U && (Ua = !0), u !== null && (u = u.next = {
 						lane: 0,
 						tag: s.tag,
 						payload: s.payload,
@@ -2843,7 +2843,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	}
 	function yo(e, t) {
 		if (t === null) return !1;
-		for (var n = 0; n < t.length && n < e.length; n++) if (!br(e[n], t[n])) return !1;
+		for (var n = 0; n < t.length && n < e.length; n++) if (!xr(e[n], t[n])) return !1;
 		return !0;
 	}
 	function bo(e, t, n, r, i, a) {
@@ -2988,9 +2988,9 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 						hasEagerState: u.hasEagerState,
 						eagerState: u.eagerState,
 						next: null
-					}), f === ca && (d = !0);
+					}), f === U && (d = !0);
 					else if ((co & p) === p) {
-						u = u.next, p === ca && (d = !0);
+						u = u.next, p === U && (d = !0);
 						continue;
 					} else f = {
 						lane: 0,
@@ -3013,7 +3013,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				}, l === null ? (c = l = p, s = o) : l = l.next = p, W.lanes |= f, Gl |= f;
 				u = u.next;
 			} while (u !== null && u !== t);
-			if (l === null ? s = o : l.next = c, !br(o, e.memoizedState) && (tc = !0, d && (n = la, n !== null))) throw n;
+			if (l === null ? s = o : l.next = c, !xr(o, e.memoizedState) && (tc = !0, d && (n = la, n !== null))) throw n;
 			e.memoizedState = o, e.baseState = s, e.baseQueue = l, r.lastRenderedState = o;
 		}
 		return a === null && (r.lanes = 0), [e.memoizedState, r.dispatch];
@@ -3029,7 +3029,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			do
 				o = e(o, s.action), s = s.next;
 			while (s !== a);
-			br(o, t.memoizedState) || (tc = !0), t.memoizedState = o, t.baseQueue === null && (t.baseState = o), n.lastRenderedState = o;
+			xr(o, t.memoizedState) || (tc = !0), t.memoizedState = o, t.baseQueue === null && (t.baseState = o), n.lastRenderedState = o;
 		}
 		return [o, r];
 	}
@@ -3039,7 +3039,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			if (n === void 0) throw Error(i(407));
 			n = n();
 		} else n = t();
-		var s = !br((G || a).memoizedState, n);
+		var s = !xr((G || a).memoizedState, n);
 		if (s && (a.memoizedState = n, tc = !0), a = a.queue, cs(Bo.bind(null, r, a, e), [e]), a.getSnapshot !== t || s || lo !== null && lo.memoizedState.tag & 1) {
 			if (r.flags |= 2048, rs(9, { destroy: void 0 }, zo.bind(null, r, a, n, t), null), q === null) throw Error(i(349));
 			o || co & 127 || Ro(r, t, n);
@@ -3065,7 +3065,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		e = e.value;
 		try {
 			var n = t();
-			return !br(e, n);
+			return !xr(e, n);
 		} catch {
 			return !0;
 		}
@@ -3339,7 +3339,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		return n === void 0 || co & 1073741824 && !(Y & 261930) ? e.memoizedState = t : (e.memoizedState = n, e = mu(), W.lanes |= e, Gl |= e, n);
 	}
 	function ys(e, t, n, r) {
-		return br(n, t) ? n : Ja.current === null ? !(co & 42) || co & 1073741824 && !(Y & 261930) ? (tc = !0, e.memoizedState = n) : (e = mu(), W.lanes |= e, Gl |= e, t) : (e = vs(e, n, r), br(e, t) || (tc = !0), e);
+		return xr(n, t) ? n : Ja.current === null ? !(co & 42) || co & 1073741824 && !(Y & 261930) ? (tc = !0, e.memoizedState = n) : (e = mu(), W.lanes |= e, Gl |= e, t) : (e = vs(e, n, r), xr(e, t) || (tc = !0), e);
 	}
 	function bs(e, t, n, r, i) {
 		var a = k.p;
@@ -3455,7 +3455,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			var a = e.alternate;
 			if (e.lanes === 0 && (a === null || a.lanes === 0) && (a = t.lastRenderedReducer, a !== null)) try {
 				var o = t.lastRenderedState, s = a(o, n);
-				if (i.hasEagerState = !0, i.eagerState = s, br(s, o)) return $r(e, t, i, 0), q === null && Qr(), !1;
+				if (i.hasEagerState = !0, i.eagerState = s, xr(s, o)) return $r(e, t, i, 0), q === null && Qr(), !1;
 			} catch {}
 			if (n = ei(e, t, i, r), n !== null) return hu(n, e, r), Fs(n, t, r), !0;
 		}
@@ -3727,7 +3727,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		}
 	};
 	function Hs(e, t, n, r, i, a, o) {
-		return e = e.stateNode, typeof e.shouldComponentUpdate == "function" ? e.shouldComponentUpdate(r, a, o) : t.prototype && t.prototype.isPureReactComponent ? !xr(n, r) || !xr(i, a) : !0;
+		return e = e.stateNode, typeof e.shouldComponentUpdate == "function" ? e.shouldComponentUpdate(r, a, o) : t.prototype && t.prototype.isPureReactComponent ? !B(n, r) || !B(i, a) : !0;
 	}
 	function Us(e, t, n, r) {
 		e = t.state, typeof t.componentWillReceiveProps == "function" && t.componentWillReceiveProps(n, r), typeof t.UNSAFE_componentWillReceiveProps == "function" && t.UNSAFE_componentWillReceiveProps(n, r), t.state !== e && Vs.enqueueReplaceState(t, t.state, null);
@@ -3844,14 +3844,14 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		}
 		if (a = e.child, !Oc(e, i)) {
 			var o = a.memoizedProps;
-			if (n = n.compare, n = n === null ? xr : n, n(o, r) && e.ref === t.ref) return Dc(e, t, i);
+			if (n = n.compare, n = n === null ? B : n, n(o, r) && e.ref === t.ref) return Dc(e, t, i);
 		}
 		return t.flags |= 1, e = ci(a, r), e.ref = t.ref, e.return = t, t.child = e;
 	}
 	function ac(e, t, n, r, i) {
 		if (e !== null) {
 			var a = e.memoizedProps;
-			if (xr(a, r) && e.ref === t.ref) if (tc = !1, t.pendingProps = r = a, Oc(e, i)) e.flags & 131072 && (tc = !0);
+			if (B(a, r) && e.ref === t.ref) if (tc = !1, t.pendingProps = r = a, Oc(e, i)) e.flags & 131072 && (tc = !0);
 			else return t.lanes = e.lanes, Dc(e, t, i);
 		}
 		return pc(e, t, n, r, i);
@@ -5242,10 +5242,10 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	}
 	function Cl(e, t) {
 		var n = null;
-		e !== null && e.memoizedState !== null && e.memoizedState.cachePool !== null && (n = e.memoizedState.cachePool.pool), e = null, t.memoizedState !== null && t.memoizedState.cachePool !== null && (e = t.memoizedState.cachePool.pool), e !== n && (e != null && e.refCount++, n != null && U(n));
+		e !== null && e.memoizedState !== null && e.memoizedState.cachePool !== null && (n = e.memoizedState.cachePool.pool), e = null, t.memoizedState !== null && t.memoizedState.cachePool !== null && (e = t.memoizedState.cachePool.pool), e !== n && (e != null && e.refCount++, n != null && oa(n));
 	}
 	function wl(e, t) {
-		e = null, t.alternate !== null && (e = t.alternate.memoizedState.cache), t = t.memoizedState.cache, t !== e && (t.refCount++, e != null && U(e));
+		e = null, t.alternate !== null && (e = t.alternate.memoizedState.cache), t = t.memoizedState.cache, t !== e && (t.refCount++, e != null && oa(e));
 	}
 	function Tl(e, t, n, r) {
 		if (t.subtreeFlags & 10256) for (t = t.child; t !== null;) El(e, t, n, r), t = t.sibling;
@@ -5262,7 +5262,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				Tl(e, t, n, r);
 				break;
 			case 3:
-				Tl(e, t, n, r), i & 2048 && (e = null, t.alternate !== null && (e = t.alternate.memoizedState.cache), t = t.memoizedState.cache, t !== e && (t.refCount++, e != null && U(e)));
+				Tl(e, t, n, r), i & 2048 && (e = null, t.alternate !== null && (e = t.alternate.memoizedState.cache), t = t.memoizedState.cache, t !== e && (t.refCount++, e != null && oa(e)));
 				break;
 			case 12:
 				if (i & 2048) {
@@ -5431,7 +5431,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 						r != null && r.refCount++;
 					}
 					break;
-				case 24: U(n.memoizedState.cache);
+				case 24: oa(n.memoizedState.cache);
 			}
 			if (r = n.child, r !== null) r.return = n, rl = r;
 			else a: for (n = e; rl !== null;) {
@@ -5562,7 +5562,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				var i = n[r], a = i.getSnapshot;
 				i = i.value;
 				try {
-					if (!br(a(), i)) return !1;
+					if (!xr(a(), i)) return !1;
 				} catch {
 					return !1;
 				}
@@ -5920,7 +5920,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		}
 	}
 	function Vu(e, t) {
-		(e.pooledCacheLanes &= t) === 0 && (t = e.pooledCache, t != null && (e.pooledCache = null, U(t)));
+		(e.pooledCacheLanes &= t) === 0 && (t = e.pooledCache, t != null && (e.pooledCache = null, oa(t)));
 	}
 	function Hu() {
 		return Ru(), zu(), Bu(), Uu();
@@ -6083,7 +6083,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	}
 	function dd() {
 		if (nd === 0) {
-			var e = ca;
+			var e = U;
 			e === 0 && (e = Ue, Ue <<= 1, !(Ue & 261888) && (Ue = 256)), nd = e;
 		}
 		return nd;
@@ -6347,13 +6347,13 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 					}
 				}
 				a: {
-					if (c = r ? yt(r) : window, l = c.nodeName && c.nodeName.toLowerCase(), l === "select" || l === "input" && c.type === "file") var v = ur;
-					else if (ar(c)) if (z) v = B;
+					if (c = r ? yt(r) : window, l = c.nodeName && c.nodeName.toLowerCase(), l === "select" || l === "input" && c.type === "file") var v = dr;
+					else if (ar(c)) if (fr) v = yr;
 					else {
 						v = _r;
 						var y = gr;
 					}
-					else l = c.nodeName, !l || l.toLowerCase() !== "input" || c.type !== "checkbox" && c.type !== "radio" ? r && Zt(r.elementType) && (v = ur) : v = vr;
+					else l = c.nodeName, !l || l.toLowerCase() !== "input" || c.type !== "checkbox" && c.type !== "radio" ? r && Zt(r.elementType) && (v = dr) : v = vr;
 					if (v &&= v(e, r)) {
 						or(s, v, n, i);
 						break a;
@@ -8085,12 +8085,12 @@ var re = [
 	"appnew.cometchat.com"
 ];
 function ie() {
-	return `${re.includes(window.location.hostname) ? "https://apimgmt.cc-cluster-2.io/" : "https://apimgmt.cometchat-staging.com/"}apps/${Yo.appId}/vcb/bubble-templates`;
+	return `${re.includes(window.location.hostname) ? "https://apimgmt.cc-cluster-2.io/" : "https://apimgmt.cometchat-staging.com/"}apps/${ns.appId}/vcb/bubble-templates`;
 }
 function ae() {
 	return {
 		"Content-Type": "application/json",
-		Authorization: `Bearer ${Yo.token}`
+		Authorization: `Bearer ${ns.token}`
 	};
 }
 async function oe(e, t) {
@@ -8213,6 +8213,7 @@ var N = ee((e, t) => ({
 	historyIndex: -1,
 	isDirty: !1,
 	useThemePlaceholders: !0,
+	variables: [],
 	view: "library",
 	showTemplatePicker: !1,
 	templates: [],
@@ -8540,6 +8541,7 @@ var N = ee((e, t) => ({
 		isDirty: !0
 	}),
 	setUseThemePlaceholders: (t) => e({ useThemePlaceholders: t }),
+	setVariables: (t) => e({ variables: t }),
 	setTemplateName: (t) => e({
 		templateName: t,
 		isDirty: !0
@@ -16646,8 +16648,8 @@ var Wn = /* @__PURE__ */ (0, P.jsxs)("div", {
 }, Yn = (0, S.memo)(function() {
 	let e = N((e) => e.templates), t = N((e) => e.fetchTemplates), n = N((e) => e.setShowTemplatePicker);
 	return (0, S.useState)(() => {
-		e.length === 0 && t();
-	}), /* @__PURE__ */ (0, P.jsx)("button", {
+		e.length === 0 && !ns.hideTemplateLibrary && t();
+	}), ns.hideTemplateLibrary ? null : /* @__PURE__ */ (0, P.jsx)("button", {
 		onClick: (e) => {
 			e.stopPropagation(), n(!0);
 		},
@@ -16655,6 +16657,215 @@ var Wn = /* @__PURE__ */ (0, P.jsxs)("div", {
 		children: "Load from Saved Template"
 	});
 }), Xn = {
+	padding: "0 6px",
+	borderRadius: 4,
+	height: 28,
+	border: "1px solid var(--border-subtle)",
+	background: "var(--bg-secondary)",
+	cursor: "pointer",
+	color: "#6852D6",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0
+}, Zn = /* @__PURE__ */ (0, P.jsxs)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	width: "14",
+	height: "14",
+	fill: "currentColor",
+	children: [/* @__PURE__ */ (0, P.jsx)("path", { d: "M1 11v2.056h1c.098 0 .194-.004.29-.013A1 1 0 0 1 3 14v5.056a2.5 2.5 0 0 0 2.5 2.5H8v-2H5.5a.5.5 0 0 1-.5-.5V14c0-.755-.279-1.444-.739-1.972.46-.527.739-1.217.739-1.972V5a.5.5 0 0 1 .5-.5H8v-2H5.5A2.5 2.5 0 0 0 3 5v5.056a1 1 0 0 1-.71.958A3.047 3.047 0 0 0 2 11H1ZM21 10.056a1 1 0 0 0 .71.958c.096-.01.192-.014.29-.014h1v2.056h-1c-.098 0-.194-.004-.29-.013A1 1 0 0 0 21 14v5.056a2.5 2.5 0 0 1-2.5 2.5h-2v-2h2a.5.5 0 0 0 .5-.5V14c0-.755.279-1.444.739-1.972A2.989 2.989 0 0 1 19 10.056V5a.5.5 0 0 0-.5-.5H16v-2h2.5A2.5 2.5 0 0 1 21 5v5.056ZM12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" }), /* @__PURE__ */ (0, P.jsx)("path", { d: "M17 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" })]
+}), Qn = (0, S.memo)(function({ value: e, onChange: t, placeholder: n, multiline: r, rows: i, style: a }) {
+	let o = N((e) => e.variables), [s, c] = (0, S.useState)(!1), [l, u] = (0, S.useState)(""), d = (0, S.useRef)(null), f = (0, S.useRef)(null), [p, m] = (0, S.useState)(null), h = (0, S.useCallback)(() => {
+		if (s) {
+			c(!1), u("");
+			return;
+		}
+		if (f.current) {
+			let e = f.current.getBoundingClientRect();
+			m({
+				top: e.bottom + 4,
+				left: e.left,
+				width: e.width
+			});
+		}
+		c(!0), u("");
+	}, [s]);
+	(0, S.useEffect)(() => {
+		if (!s) return;
+		let e = (e) => {
+			let t = e.target;
+			f.current?.contains(t) || document.getElementById("variable-dropdown-portal")?.contains(t) || c(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [s]);
+	let g = (0, S.useCallback)((n) => {
+		let r = `{{${n}}}`, i = d.current;
+		if (i) {
+			let n = i.selectionStart ?? e.length, a = i.selectionEnd ?? e.length;
+			t(e.slice(0, n) + r + e.slice(a)), requestAnimationFrame(() => {
+				let e = n + r.length;
+				i.setSelectionRange(e, e), i.focus();
+			});
+		} else t(e + r);
+		c(!1), u("");
+	}, [e, t]);
+	if (!o || o.length === 0) return r ? /* @__PURE__ */ (0, P.jsx)("textarea", {
+		ref: d,
+		rows: i ?? 3,
+		value: e ?? "",
+		onChange: (e) => t(e.target.value),
+		placeholder: n,
+		style: {
+			resize: "vertical",
+			...a
+		}
+	}) : /* @__PURE__ */ (0, P.jsx)("input", {
+		ref: d,
+		value: e ?? "",
+		onChange: (e) => t(e.target.value),
+		placeholder: n,
+		style: a
+	});
+	let _ = l ? o.filter((e) => e.name.toLowerCase().includes(l.toLowerCase()) || (e.label ?? "").toLowerCase().includes(l.toLowerCase()) || (e.description ?? "").toLowerCase().includes(l.toLowerCase())) : o, v = /* @__PURE__ */ new Map();
+	for (let e of _) {
+		let t = e.category ?? "Variables";
+		v.has(t) || v.set(t, []), v.get(t).push(e);
+	}
+	return /* @__PURE__ */ (0, P.jsxs)("div", {
+		ref: f,
+		style: { position: "relative" },
+		children: [/* @__PURE__ */ (0, P.jsxs)("div", {
+			style: {
+				display: "flex",
+				gap: 4,
+				alignItems: "center"
+			},
+			children: [/* @__PURE__ */ (0, P.jsx)("div", {
+				style: { flex: 1 },
+				children: r ? /* @__PURE__ */ (0, P.jsx)("textarea", {
+					ref: d,
+					rows: i ?? 3,
+					value: e ?? "",
+					onChange: (e) => t(e.target.value),
+					placeholder: n,
+					style: {
+						resize: "vertical",
+						width: "100%",
+						...a
+					}
+				}) : /* @__PURE__ */ (0, P.jsx)("input", {
+					ref: d,
+					value: e ?? "",
+					onChange: (e) => t(e.target.value),
+					placeholder: n,
+					style: {
+						width: "100%",
+						...a
+					}
+				})
+			}), /* @__PURE__ */ (0, P.jsx)("button", {
+				type: "button",
+				onClick: h,
+				style: Xn,
+				title: "Insert variable",
+				children: Zn
+			})]
+		}), s && p && (0, An.createPortal)(/* @__PURE__ */ (0, P.jsxs)("div", {
+			id: "variable-dropdown-portal",
+			style: {
+				position: "fixed",
+				top: p.top,
+				left: p.left,
+				width: p.width,
+				zIndex: 9999,
+				background: "#fff",
+				borderRadius: 8,
+				border: "1px solid #E2E4E9",
+				boxShadow: "0 8px 30px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06)",
+				display: "flex",
+				flexDirection: "column",
+				maxHeight: 280
+			},
+			children: [/* @__PURE__ */ (0, P.jsx)("div", {
+				style: {
+					padding: "8px 10px",
+					borderBottom: "1px solid #EFEFEF",
+					flexShrink: 0
+				},
+				children: /* @__PURE__ */ (0, P.jsx)("input", {
+					value: l,
+					onChange: (e) => u(e.target.value),
+					placeholder: "Search variables...",
+					autoFocus: !0,
+					style: {
+						width: "100%",
+						fontSize: 12,
+						border: "1px solid #E2E4E9",
+						borderRadius: 6,
+						padding: "6px 10px",
+						outline: "none",
+						background: "#FAFAFA",
+						color: "#333",
+						margin: 0,
+						boxShadow: "none"
+					}
+				})
+			}), /* @__PURE__ */ (0, P.jsx)("div", {
+				style: {
+					overflowY: "auto",
+					flex: 1,
+					padding: "4px 0"
+				},
+				children: _.length === 0 ? /* @__PURE__ */ (0, P.jsx)("div", {
+					style: {
+						padding: "16px 12px",
+						fontSize: 12,
+						color: "#aaa",
+						textAlign: "center"
+					},
+					children: "No matching variables"
+				}) : [...v.entries()].map(([e, t], n) => /* @__PURE__ */ (0, P.jsxs)("div", { children: [v.size > 1 && /* @__PURE__ */ (0, P.jsx)("div", {
+					style: {
+						fontSize: 10,
+						fontWeight: 600,
+						color: "#999",
+						letterSpacing: .5,
+						padding: "6px 12px 3px",
+						textTransform: "uppercase",
+						...n > 0 ? {
+							borderTop: "1px solid #F0F0F0",
+							marginTop: 2
+						} : {}
+					},
+					children: e
+				}), t.map((e) => /* @__PURE__ */ (0, P.jsx)("div", {
+					onClick: () => g(e.name),
+					onMouseEnter: (e) => {
+						e.currentTarget.style.background = "#F5F5F7";
+					},
+					onMouseLeave: (e) => {
+						e.currentTarget.style.background = "transparent";
+					},
+					title: [e.label, e.description].filter(Boolean).join(" — ") || void 0,
+					style: {
+						padding: "5px 12px",
+						cursor: "pointer",
+						transition: "background 0.1s"
+					},
+					children: /* @__PURE__ */ (0, P.jsx)("span", {
+						style: {
+							fontFamily: "var(--font-mono, monospace)",
+							fontSize: 11,
+							color: "#6852D6"
+						},
+						children: `{{${e.name}}}`
+					})
+				}, e.name))] }, e))
+			})]
+		}), document.body)]
+	});
+}), $n = {
 	Navigation: ["openUrl"],
 	Messaging: [
 		"chatWithUser",
@@ -16665,7 +16876,7 @@ var Wn = /* @__PURE__ */ (0, P.jsxs)("div", {
 	CometChat: ["initiateCall"],
 	Data: ["apiCall"],
 	Developer: ["customCallback"]
-}, Zn = {
+}, er = {
 	openUrl: {
 		type: "openUrl",
 		url: "",
@@ -16701,9 +16912,9 @@ var Wn = /* @__PURE__ */ (0, P.jsxs)("div", {
 		method: "POST"
 	},
 	customCallback: { type: "customCallback" }
-}, Qn = (0, S.memo)(function({ action: e, onChange: t }) {
+}, tr = (0, S.memo)(function({ action: e, onChange: t }) {
 	let n = (0, S.useCallback)((e) => {
-		t(Zn[e] ?? {
+		t(er[e] ?? {
 			type: "openUrl",
 			url: ""
 		});
@@ -16716,7 +16927,7 @@ var Wn = /* @__PURE__ */ (0, P.jsxs)("div", {
 		}), /* @__PURE__ */ (0, P.jsx)("select", {
 			value: e.type,
 			onChange: (e) => n(e.target.value),
-			children: Object.entries(Xn).map(([e, t]) => /* @__PURE__ */ (0, P.jsx)("optgroup", {
+			children: Object.entries($n).map(([e, t]) => /* @__PURE__ */ (0, P.jsx)("optgroup", {
 				label: e,
 				children: t.map((e) => /* @__PURE__ */ (0, P.jsx)("option", {
 					value: e,
@@ -16724,20 +16935,20 @@ var Wn = /* @__PURE__ */ (0, P.jsxs)("div", {
 				}, e))
 			}, e))
 		})]
-	}), $n(e, t)] });
+	}), nr(e, t)] });
 });
-function $n(e, t) {
+function nr(e, t) {
 	switch (e.type) {
 		case "openUrl": return /* @__PURE__ */ (0, P.jsxs)(P.Fragment, { children: [/* @__PURE__ */ (0, P.jsxs)("div", {
 			className: "prop-field",
 			children: [/* @__PURE__ */ (0, P.jsx)("label", {
 				className: "prop-label",
 				children: "URL"
-			}), /* @__PURE__ */ (0, P.jsx)("input", {
+			}), /* @__PURE__ */ (0, P.jsx)(Qn, {
 				value: e.url,
 				onChange: (n) => t({
 					...e,
-					url: n.target.value
+					url: n
 				}),
 				placeholder: "https://..."
 			})]
@@ -16766,11 +16977,11 @@ function $n(e, t) {
 			children: [/* @__PURE__ */ (0, P.jsx)("label", {
 				className: "prop-label",
 				children: "User UID"
-			}), /* @__PURE__ */ (0, P.jsx)("input", {
+			}), /* @__PURE__ */ (0, P.jsx)(Qn, {
 				value: e.uid,
 				onChange: (n) => t({
 					...e,
-					uid: n.target.value
+					uid: n
 				})
 			})]
 		});
@@ -16779,11 +16990,11 @@ function $n(e, t) {
 			children: [/* @__PURE__ */ (0, P.jsx)("label", {
 				className: "prop-label",
 				children: "Group GUID"
-			}), /* @__PURE__ */ (0, P.jsx)("input", {
+			}), /* @__PURE__ */ (0, P.jsx)(Qn, {
 				value: e.guid,
 				onChange: (n) => t({
 					...e,
-					guid: n.target.value
+					guid: n
 				})
 			})]
 		});
@@ -16793,11 +17004,11 @@ function $n(e, t) {
 				children: [/* @__PURE__ */ (0, P.jsx)("label", {
 					className: "prop-label",
 					children: "Text"
-				}), /* @__PURE__ */ (0, P.jsx)("input", {
+				}), /* @__PURE__ */ (0, P.jsx)(Qn, {
 					value: e.text,
 					onChange: (n) => t({
 						...e,
-						text: n.target.value
+						text: n
 					})
 				})]
 			}),
@@ -16806,11 +17017,11 @@ function $n(e, t) {
 				children: [/* @__PURE__ */ (0, P.jsx)("label", {
 					className: "prop-label",
 					children: "Receiver UID (optional)"
-				}), /* @__PURE__ */ (0, P.jsx)("input", {
+				}), /* @__PURE__ */ (0, P.jsx)(Qn, {
 					value: e.receiverUid ?? "",
 					onChange: (n) => t({
 						...e,
-						receiverUid: n.target.value || void 0
+						receiverUid: n || void 0
 					})
 				})]
 			}),
@@ -16819,11 +17030,11 @@ function $n(e, t) {
 				children: [/* @__PURE__ */ (0, P.jsx)("label", {
 					className: "prop-label",
 					children: "Receiver GUID (optional)"
-				}), /* @__PURE__ */ (0, P.jsx)("input", {
+				}), /* @__PURE__ */ (0, P.jsx)(Qn, {
 					value: e.receiverGuid ?? "",
 					onChange: (n) => t({
 						...e,
-						receiverGuid: n.target.value || void 0
+						receiverGuid: n || void 0
 					})
 				})]
 			})
@@ -16833,11 +17044,11 @@ function $n(e, t) {
 			children: [/* @__PURE__ */ (0, P.jsx)("label", {
 				className: "prop-label",
 				children: "Value"
-			}), /* @__PURE__ */ (0, P.jsx)("input", {
+			}), /* @__PURE__ */ (0, P.jsx)(Qn, {
 				value: e.value,
 				onChange: (n) => t({
 					...e,
-					value: n.target.value
+					value: n
 				})
 			})]
 		});
@@ -16846,11 +17057,11 @@ function $n(e, t) {
 			children: [/* @__PURE__ */ (0, P.jsx)("label", {
 				className: "prop-label",
 				children: "URL"
-			}), /* @__PURE__ */ (0, P.jsx)("input", {
+			}), /* @__PURE__ */ (0, P.jsx)(Qn, {
 				value: e.url,
 				onChange: (n) => t({
 					...e,
-					url: n.target.value
+					url: n
 				})
 			})]
 		}), /* @__PURE__ */ (0, P.jsxs)("div", {
@@ -16858,11 +17069,11 @@ function $n(e, t) {
 			children: [/* @__PURE__ */ (0, P.jsx)("label", {
 				className: "prop-label",
 				children: "Filename"
-			}), /* @__PURE__ */ (0, P.jsx)("input", {
+			}), /* @__PURE__ */ (0, P.jsx)(Qn, {
 				value: e.filename ?? "",
 				onChange: (n) => t({
 					...e,
-					filename: n.target.value || void 0
+					filename: n || void 0
 				})
 			})]
 		})] });
@@ -16892,11 +17103,11 @@ function $n(e, t) {
 				children: [/* @__PURE__ */ (0, P.jsx)("label", {
 					className: "prop-label",
 					children: "User UID"
-				}), /* @__PURE__ */ (0, P.jsx)("input", {
+				}), /* @__PURE__ */ (0, P.jsx)(Qn, {
 					value: e.uid ?? "",
 					onChange: (n) => t({
 						...e,
-						uid: n.target.value || void 0
+						uid: n || void 0
 					})
 				})]
 			}),
@@ -16905,11 +17116,11 @@ function $n(e, t) {
 				children: [/* @__PURE__ */ (0, P.jsx)("label", {
 					className: "prop-label",
 					children: "Group GUID"
-				}), /* @__PURE__ */ (0, P.jsx)("input", {
+				}), /* @__PURE__ */ (0, P.jsx)(Qn, {
 					value: e.guid ?? "",
 					onChange: (n) => t({
 						...e,
-						guid: n.target.value || void 0
+						guid: n || void 0
 					})
 				})]
 			})
@@ -16919,11 +17130,11 @@ function $n(e, t) {
 			children: [/* @__PURE__ */ (0, P.jsx)("label", {
 				className: "prop-label",
 				children: "URL"
-			}), /* @__PURE__ */ (0, P.jsx)("input", {
+			}), /* @__PURE__ */ (0, P.jsx)(Qn, {
 				value: e.url,
 				onChange: (n) => t({
 					...e,
-					url: n.target.value
+					url: n
 				})
 			})]
 		}), /* @__PURE__ */ (0, P.jsxs)("div", {
@@ -16970,19 +17181,19 @@ function $n(e, t) {
 }
 //#endregion
 //#region src/components/properties/IconPicker.tsx
-var er = {
+var rr = {
 	maxHeight: 220,
 	overflowY: "auto",
 	padding: 4,
 	border: "1px solid var(--border-subtle)",
 	borderRadius: 6,
 	marginTop: 4
-}, tr = {
+}, ir = {
 	display: "flex",
 	flexWrap: "wrap",
 	gap: 4,
 	padding: "2px 0"
-}, nr = {
+}, ar = {
 	width: 34,
 	height: 34,
 	borderRadius: 6,
@@ -16993,11 +17204,11 @@ var er = {
 	alignItems: "center",
 	justifyContent: "center",
 	padding: 2
-}, rr = {
+}, or = {
 	width: 20,
 	height: 20,
 	objectFit: "contain"
-}, ir = (0, S.memo)(function({ value: e, onChange: t }) {
+}, sr = (0, S.memo)(function({ value: e, onChange: t }) {
 	let [n, r] = (0, S.useState)(!1), [i, a] = (0, S.useState)(""), o = (0, S.useCallback)((e) => {
 		let n = Mn.find((t) => t.name === e);
 		t(n ? n.url : e), r(!1), a("");
@@ -17065,7 +17276,7 @@ var er = {
 					fontSize: 11
 				}
 			}), /* @__PURE__ */ (0, P.jsxs)("div", {
-				style: er,
+				style: rr,
 				children: [Pn.map((t) => {
 					let n = f.filter((e) => e.category === t);
 					return n.length === 0 ? null : /* @__PURE__ */ (0, P.jsxs)("div", { children: [/* @__PURE__ */ (0, P.jsx)("div", {
@@ -17077,19 +17288,19 @@ var er = {
 						},
 						children: t
 					}), /* @__PURE__ */ (0, P.jsx)("div", {
-						style: tr,
+						style: ir,
 						children: n.map((t) => /* @__PURE__ */ (0, P.jsx)("button", {
 							onClick: () => o(t.name),
 							title: t.label,
 							style: {
-								...nr,
+								...ar,
 								borderColor: e === t.url ? "var(--accent-primary)" : "transparent",
 								background: e === t.url ? "rgba(108,92,231,0.1)" : "none"
 							},
 							children: /* @__PURE__ */ (0, P.jsx)("img", {
 								src: t.url,
 								alt: t.label,
-								style: rr
+								style: or
 							})
 						}, t.name))
 					})] }, t);
@@ -17109,8 +17320,8 @@ var er = {
 			})]
 		}) : null
 	] });
-}), ar = /^(https?:\/\/|{{)/i;
-function or(e) {
+}), cr = /^(https?:\/\/|{{)/i;
+function lr(e) {
 	let t = [];
 	switch (e.type) {
 		case "text":
@@ -17120,7 +17331,7 @@ function or(e) {
 			});
 			break;
 		case "image":
-			e.url ? ar.test(e.url) || t.push({
+			e.url ? cr.test(e.url) || t.push({
 				field: "url",
 				message: "Must be a valid URL"
 			}) : t.push({
@@ -17144,7 +17355,7 @@ function or(e) {
 			e.label || t.push({
 				field: "label",
 				message: "Label is required"
-			}), e.action ? sr(e.action, t) : t.push({
+			}), e.action ? ur(e.action, t) : t.push({
 				field: "action",
 				message: "Action is required"
 			});
@@ -17153,7 +17364,7 @@ function or(e) {
 			e.icon || t.push({
 				field: "icon",
 				message: "Icon is required"
-			}), e.action ? sr(e.action, t) : t.push({
+			}), e.action ? ur(e.action, t) : t.push({
 				field: "action",
 				message: "Action is required"
 			});
@@ -17162,7 +17373,7 @@ function or(e) {
 			e.text || t.push({
 				field: "text",
 				message: "Text is required"
-			}), e.action ? sr(e.action, t) : t.push({
+			}), e.action ? ur(e.action, t) : t.push({
 				field: "action",
 				message: "Action is required"
 			});
@@ -17210,7 +17421,7 @@ function or(e) {
 	}
 	return t;
 }
-function sr(e, t) {
+function ur(e, t) {
 	switch (e.type) {
 		case "openUrl":
 			e.url || t.push({
@@ -17256,13 +17467,13 @@ function sr(e, t) {
 			break;
 	}
 }
-function cr(e) {
-	return or(e).length > 0;
+function dr(e) {
+	return lr(e).length > 0;
 }
 //#endregion
 //#region src/components/properties/ElementPropertyEditor.tsx
-var lr = (0, S.memo)(function({ element: e, onUpdate: t }) {
-	let n = (0, S.useMemo)(() => or(e), [e]), r = (0, S.useMemo)(() => {
+var fr = (0, S.memo)(function({ element: e, onUpdate: t }) {
+	let n = (0, S.useMemo)(() => lr(e), [e]), r = (0, S.useMemo)(() => {
 		let e = /* @__PURE__ */ new Map();
 		for (let t of n) e.set(t.field, t.message);
 		return e;
@@ -17295,7 +17506,7 @@ var lr = (0, S.memo)(function({ element: e, onUpdate: t }) {
 				n.length === 1 ? "" : "s"
 			]
 		}),
-		Dr(e, t, r)
+		Ar(e, t, r)
 	] }, e.id);
 });
 function R({ label: e, children: t, error: n }) {
@@ -17310,10 +17521,10 @@ function R({ label: e, children: t, error: n }) {
 		}), t]
 	});
 }
-function ur({ value: e, onChange: t, placeholder: n }) {
-	return /* @__PURE__ */ (0, P.jsx)("input", {
+function pr({ value: e, onChange: t, placeholder: n }) {
+	return /* @__PURE__ */ (0, P.jsx)(Qn, {
 		value: e ?? "",
-		onChange: (e) => t(e.target.value),
+		onChange: t,
 		placeholder: n
 	});
 }
@@ -17343,7 +17554,7 @@ function z({ value: e, onChange: t, min: n, max: r, unit: i }) {
 		}) : null]
 	});
 }
-var dr = [
+var mr = [
 	{
 		label: "Small (28px)",
 		value: 28
@@ -17357,8 +17568,8 @@ var dr = [
 		value: 48
 	}
 ];
-function fr({ value: e, onChange: t }) {
-	let n = e ?? 36, r = dr.some((e) => e.value === n), [i, a] = (0, S.useState)(!1), o = i || !r;
+function hr({ value: e, onChange: t }) {
+	let n = e ?? 36, r = mr.some((e) => e.value === n), [i, a] = (0, S.useState)(!1), o = i || !r;
 	return /* @__PURE__ */ (0, P.jsxs)("div", {
 		style: {
 			display: "flex",
@@ -17374,7 +17585,7 @@ function fr({ value: e, onChange: t }) {
 				}
 				a(!1), t(Number(e.target.value));
 			},
-			children: [dr.map((e) => /* @__PURE__ */ (0, P.jsx)("option", {
+			children: [mr.map((e) => /* @__PURE__ */ (0, P.jsx)("option", {
 				value: e.value,
 				children: e.label
 			}, e.value)), /* @__PURE__ */ (0, P.jsx)("option", {
@@ -17389,7 +17600,7 @@ function fr({ value: e, onChange: t }) {
 		}) : null]
 	});
 }
-function pr({ value: e, onChange: t, options: n }) {
+function gr({ value: e, onChange: t, options: n }) {
 	return /* @__PURE__ */ (0, P.jsxs)("select", {
 		value: e ?? "",
 		onChange: (e) => t(e.target.value || void 0),
@@ -17402,7 +17613,7 @@ function pr({ value: e, onChange: t, options: n }) {
 		}, e))]
 	});
 }
-var mr = {
+var _r = {
 	width: 32,
 	height: 28,
 	padding: 0,
@@ -17412,18 +17623,18 @@ var mr = {
 	opacity: 0,
 	top: 0,
 	left: 0
-}, hr = {
+}, vr = {
 	display: "flex",
 	alignItems: "center",
 	gap: 6
-}, gr = {
+}, yr = {
 	width: 32,
 	height: 28,
 	borderRadius: 4,
 	position: "relative",
 	overflow: "hidden",
 	cursor: "pointer"
-}, _r = {
+}, br = {
 	padding: "2px 6px",
 	fontSize: 10,
 	borderRadius: 4,
@@ -17431,7 +17642,7 @@ var mr = {
 	border: "1px solid var(--border-medium)",
 	cursor: "pointer",
 	color: "var(--text-secondary)"
-}, vr = {
+}, xr = {
 	width: 32,
 	height: 28,
 	borderRadius: 4,
@@ -17444,30 +17655,30 @@ var mr = {
 function B({ value: e, onChange: t, fallback: n }) {
 	let r = e ?? n, i = e == null && n != null;
 	return /* @__PURE__ */ (0, P.jsxs)("div", {
-		style: hr,
+		style: vr,
 		children: [/* @__PURE__ */ (0, P.jsx)("div", {
 			style: r ? {
-				...gr,
+				...yr,
 				background: r,
 				border: "1px solid var(--border-medium)",
 				opacity: i ? .5 : 1
-			} : vr,
+			} : xr,
 			children: /* @__PURE__ */ (0, P.jsx)("input", {
 				type: "color",
 				value: r ?? "#000000",
 				onChange: (e) => t(e.target.value),
-				style: mr,
+				style: _r,
 				title: i ? `Default: ${n}` : e ?? "No color (transparent)"
 			})
 		}), e && !n ? /* @__PURE__ */ (0, P.jsx)("button", {
 			onClick: () => t(void 0),
-			style: _r,
+			style: br,
 			title: "Remove color",
 			children: "✕"
 		}) : null]
 	});
 }
-function yr({ value: e, onChange: t, label: n }) {
+function Sr({ value: e, onChange: t, label: n }) {
 	return /* @__PURE__ */ (0, P.jsxs)("label", {
 		style: {
 			display: "flex",
@@ -17483,11 +17694,11 @@ function yr({ value: e, onChange: t, label: n }) {
 		}), n]
 	});
 }
-var br = {
+var Cr = {
 	display: "flex",
 	gap: 4,
 	alignItems: "center"
-}, xr = {
+}, wr = {
 	padding: "4px 6px",
 	fontSize: 10,
 	borderRadius: 4,
@@ -17496,18 +17707,18 @@ var br = {
 	cursor: "pointer",
 	color: "var(--text-secondary)",
 	whiteSpace: "nowrap"
-}, Sr = {
+}, Tr = {
 	display: "flex",
 	flexDirection: "column",
 	gap: 4
-}, Cr = {
+}, Er = {
 	display: "grid",
 	gridTemplateColumns: "1fr 1fr",
 	gap: 4
-}, wr = {
+}, Dr = {
 	fontSize: 10,
 	color: "var(--text-muted)"
-}, Tr = {
+}, Or = {
 	padding: "2px 6px",
 	fontSize: 10,
 	borderRadius: 4,
@@ -17517,10 +17728,10 @@ var br = {
 	color: "var(--text-secondary)",
 	alignSelf: "flex-start"
 };
-function Er({ value: e, onChange: t }) {
+function kr({ value: e, onChange: t }) {
 	let [n, r] = (0, S.useState)(typeof e == "object" && !!e);
 	if (!n) return /* @__PURE__ */ (0, P.jsxs)("div", {
-		style: br,
+		style: Cr,
 		children: [/* @__PURE__ */ (0, P.jsx)("div", {
 			style: { flex: 1 },
 			children: /* @__PURE__ */ (0, P.jsx)(z, {
@@ -17540,7 +17751,7 @@ function Er({ value: e, onChange: t }) {
 					left: n
 				});
 			},
-			style: xr,
+			style: wr,
 			title: "Edit each side",
 			children: "⊞"
 		})]
@@ -17555,12 +17766,12 @@ function Er({ value: e, onChange: t }) {
 		[e]: n ?? 0
 	});
 	return /* @__PURE__ */ (0, P.jsxs)("div", {
-		style: Sr,
+		style: Tr,
 		children: [/* @__PURE__ */ (0, P.jsxs)("div", {
-			style: Cr,
+			style: Er,
 			children: [
 				/* @__PURE__ */ (0, P.jsxs)("div", { children: [/* @__PURE__ */ (0, P.jsx)("label", {
-					style: wr,
+					style: Dr,
 					children: "Top"
 				}), /* @__PURE__ */ (0, P.jsx)(z, {
 					value: i.top,
@@ -17569,7 +17780,7 @@ function Er({ value: e, onChange: t }) {
 					unit: "px"
 				})] }),
 				/* @__PURE__ */ (0, P.jsxs)("div", { children: [/* @__PURE__ */ (0, P.jsx)("label", {
-					style: wr,
+					style: Dr,
 					children: "Right"
 				}), /* @__PURE__ */ (0, P.jsx)(z, {
 					value: i.right,
@@ -17578,7 +17789,7 @@ function Er({ value: e, onChange: t }) {
 					unit: "px"
 				})] }),
 				/* @__PURE__ */ (0, P.jsxs)("div", { children: [/* @__PURE__ */ (0, P.jsx)("label", {
-					style: wr,
+					style: Dr,
 					children: "Bottom"
 				}), /* @__PURE__ */ (0, P.jsx)(z, {
 					value: i.bottom,
@@ -17587,7 +17798,7 @@ function Er({ value: e, onChange: t }) {
 					unit: "px"
 				})] }),
 				/* @__PURE__ */ (0, P.jsxs)("div", { children: [/* @__PURE__ */ (0, P.jsx)("label", {
-					style: wr,
+					style: Dr,
 					children: "Left"
 				}), /* @__PURE__ */ (0, P.jsx)(z, {
 					value: i.left,
@@ -17600,12 +17811,12 @@ function Er({ value: e, onChange: t }) {
 			onClick: () => {
 				r(!1), t(Math.round(((i.top ?? 0) + (i.right ?? 0) + (i.bottom ?? 0) + (i.left ?? 0)) / 4) || void 0);
 			},
-			style: Tr,
+			style: Or,
 			children: "Collapse"
 		})]
 	});
 }
-function Dr(e, t, n = /* @__PURE__ */ new Map()) {
+function Ar(e, t, n = /* @__PURE__ */ new Map()) {
 	let r = (e) => n.get(e);
 	switch (e.type) {
 		case "text": return /* @__PURE__ */ (0, P.jsxs)("div", {
@@ -17614,16 +17825,16 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Content",
 					error: r("content"),
-					children: /* @__PURE__ */ (0, P.jsx)("textarea", {
+					children: /* @__PURE__ */ (0, P.jsx)(Qn, {
+						multiline: !0,
 						rows: 3,
 						value: e.content,
-						onChange: (e) => t({ content: e.target.value }),
-						style: { resize: "vertical" }
+						onChange: (e) => t({ content: e })
 					})
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Variant",
-					children: /* @__PURE__ */ (0, P.jsx)(pr, {
+					children: /* @__PURE__ */ (0, P.jsx)(gr, {
 						value: e.variant,
 						onChange: (e) => t({ variant: e }),
 						options: [
@@ -17648,7 +17859,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Align",
-					children: /* @__PURE__ */ (0, P.jsx)(pr, {
+					children: /* @__PURE__ */ (0, P.jsx)(gr, {
 						value: e.align,
 						onChange: (e) => t({ align: e }),
 						options: [
@@ -17661,7 +17872,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Font Weight",
-					children: /* @__PURE__ */ (0, P.jsx)(pr, {
+					children: /* @__PURE__ */ (0, P.jsx)(gr, {
 						value: e.fontWeight,
 						onChange: (e) => t({ fontWeight: e }),
 						options: [
@@ -17681,7 +17892,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Padding",
-					children: /* @__PURE__ */ (0, P.jsx)(Er, {
+					children: /* @__PURE__ */ (0, P.jsx)(kr, {
 						value: e.padding,
 						onChange: (e) => t({ padding: e })
 					})
@@ -17694,7 +17905,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "URL",
 					error: r("url"),
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.url,
 						onChange: (e) => t({ url: e }),
 						placeholder: "https://..."
@@ -17719,14 +17930,14 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}) : null,
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Alt Text",
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.altText ?? "",
 						onChange: (e) => t({ altText: e })
 					})
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Fit",
-					children: /* @__PURE__ */ (0, P.jsx)(pr, {
+					children: /* @__PURE__ */ (0, P.jsx)(gr, {
 						value: e.fit,
 						onChange: (e) => t({ fit: e }),
 						options: [
@@ -17763,7 +17974,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Padding",
-					children: /* @__PURE__ */ (0, P.jsx)(Er, {
+					children: /* @__PURE__ */ (0, P.jsx)(kr, {
 						value: e.padding,
 						onChange: (e) => t({ padding: e })
 					})
@@ -17776,7 +17987,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Name",
 					error: r("name"),
-					children: /* @__PURE__ */ (0, P.jsx)(ir, {
+					children: /* @__PURE__ */ (0, P.jsx)(sr, {
 						value: e.name,
 						onChange: (e) => t({ name: e })
 					})
@@ -17830,21 +18041,21 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 			children: [
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Image URL",
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.imageUrl ?? "",
 						onChange: (e) => t({ imageUrl: e })
 					})
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Fallback Initials",
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.fallbackInitials ?? "",
 						onChange: (e) => t({ fallbackInitials: e.slice(0, 2) })
 					})
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Size",
-					children: /* @__PURE__ */ (0, P.jsx)(fr, {
+					children: /* @__PURE__ */ (0, P.jsx)(hr, {
 						value: e.size,
 						onChange: (e) => t({ size: e })
 					})
@@ -17876,7 +18087,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Font Weight",
-					children: /* @__PURE__ */ (0, P.jsx)(pr, {
+					children: /* @__PURE__ */ (0, P.jsx)(gr, {
 						value: e.fontWeight,
 						onChange: (e) => t({ fontWeight: e }),
 						options: [
@@ -17894,7 +18105,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Text",
 					error: r("text"),
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.text,
 						onChange: (e) => t({ text: e })
 					})
@@ -17953,7 +18164,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Padding",
-					children: /* @__PURE__ */ (0, P.jsx)(Er, {
+					children: /* @__PURE__ */ (0, P.jsx)(kr, {
 						value: e.padding,
 						onChange: (e) => t({ padding: e })
 					})
@@ -18019,14 +18230,14 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Text",
 					error: r("text"),
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.text,
 						onChange: (e) => t({ text: e })
 					})
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Icon",
-					children: /* @__PURE__ */ (0, P.jsx)(ir, {
+					children: /* @__PURE__ */ (0, P.jsx)(sr, {
 						value: e.icon ?? "",
 						onChange: (e) => t({ icon: e })
 					})
@@ -18076,7 +18287,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Padding",
-					children: /* @__PURE__ */ (0, P.jsx)(Er, {
+					children: /* @__PURE__ */ (0, P.jsx)(kr, {
 						value: e.padding,
 						onChange: (e) => t({ padding: e })
 					})
@@ -18141,7 +18352,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Label",
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.label ?? "",
 						onChange: (e) => t({ label: e })
 					})
@@ -18171,7 +18382,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Label",
 					error: r("label"),
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.label,
 						onChange: (e) => t({ label: e })
 					})
@@ -18230,27 +18441,27 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Icon",
-					children: /* @__PURE__ */ (0, P.jsx)(ir, {
+					children: /* @__PURE__ */ (0, P.jsx)(sr, {
 						value: e.icon ?? "",
 						onChange: (e) => t({ icon: e })
 					})
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Icon Position",
-					children: /* @__PURE__ */ (0, P.jsx)(pr, {
+					children: /* @__PURE__ */ (0, P.jsx)(gr, {
 						value: e.iconPosition,
 						onChange: (e) => t({ iconPosition: e }),
 						options: ["left", "right"]
 					})
 				}),
-				/* @__PURE__ */ (0, P.jsx)(yr, {
+				/* @__PURE__ */ (0, P.jsx)(Sr, {
 					value: e.fullWidth,
 					onChange: (e) => t({ fullWidth: e }),
 					label: "Full Width"
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Padding",
-					children: /* @__PURE__ */ (0, P.jsx)(Er, {
+					children: /* @__PURE__ */ (0, P.jsx)(kr, {
 						value: e.padding,
 						onChange: (e) => t({ padding: e })
 					})
@@ -18269,7 +18480,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 					style: { marginTop: 12 },
 					children: "Action"
 				}),
-				/* @__PURE__ */ (0, P.jsx)(Qn, {
+				/* @__PURE__ */ (0, P.jsx)(tr, {
 					action: e.action,
 					onChange: (e) => t({ action: e })
 				})
@@ -18281,7 +18492,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Icon",
 					error: r("icon"),
-					children: /* @__PURE__ */ (0, P.jsx)(ir, {
+					children: /* @__PURE__ */ (0, P.jsx)(sr, {
 						value: e.icon,
 						onChange: (e) => t({ icon: e })
 					})
@@ -18324,7 +18535,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 					style: { marginTop: 12 },
 					children: "Action"
 				}),
-				/* @__PURE__ */ (0, P.jsx)(Qn, {
+				/* @__PURE__ */ (0, P.jsx)(tr, {
 					action: e.action,
 					onChange: (e) => t({ action: e })
 				})
@@ -18336,7 +18547,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Text",
 					error: r("text"),
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.text,
 						onChange: (e) => t({ text: e })
 					})
@@ -18358,7 +18569,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 						unit: "px"
 					})
 				}),
-				/* @__PURE__ */ (0, P.jsx)(yr, {
+				/* @__PURE__ */ (0, P.jsx)(Sr, {
 					value: e.underline,
 					onChange: (e) => t({ underline: e }),
 					label: "Underline"
@@ -18368,7 +18579,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 					style: { marginTop: 12 },
 					children: "Action"
 				}),
-				/* @__PURE__ */ (0, P.jsx)(Qn, {
+				/* @__PURE__ */ (0, P.jsx)(tr, {
 					action: e.action,
 					onChange: (e) => t({ action: e })
 				})
@@ -18380,7 +18591,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Columns (comma-separated)",
 					error: r("columns"),
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.columns.join(", "),
 						onChange: (e) => t({ columns: e.split(",").map((e) => e.trim()) })
 					})
@@ -18446,12 +18657,12 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 						onChange: (e) => t({ headerBackgroundColor: e })
 					})
 				}),
-				/* @__PURE__ */ (0, P.jsx)(yr, {
+				/* @__PURE__ */ (0, P.jsx)(Sr, {
 					value: e.border,
 					onChange: (e) => t({ border: e }),
 					label: "Show Borders"
 				}),
-				/* @__PURE__ */ (0, P.jsx)(yr, {
+				/* @__PURE__ */ (0, P.jsx)(Sr, {
 					value: e.stripedRows,
 					onChange: (e) => t({ stripedRows: e }),
 					label: "Striped Rows"
@@ -18508,7 +18719,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Align",
-					children: /* @__PURE__ */ (0, P.jsx)(pr, {
+					children: /* @__PURE__ */ (0, P.jsx)(gr, {
 						value: e.align,
 						onChange: (e) => t({ align: e }),
 						options: [
@@ -18520,7 +18731,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 						]
 					})
 				}),
-				/* @__PURE__ */ (0, P.jsx)(yr, {
+				/* @__PURE__ */ (0, P.jsx)(Sr, {
 					value: e.wrap,
 					onChange: (e) => t({ wrap: e }),
 					label: "Wrap"
@@ -18530,7 +18741,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 					style: { marginTop: 12 },
 					children: "Scrollable"
 				}),
-				/* @__PURE__ */ (0, P.jsx)(yr, {
+				/* @__PURE__ */ (0, P.jsx)(Sr, {
 					value: e.scrollable,
 					onChange: (e) => t({ scrollable: e }),
 					label: "Scrollable (Carousel)"
@@ -18545,7 +18756,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 					})
 				}), /* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Snap",
-					children: /* @__PURE__ */ (0, P.jsx)(pr, {
+					children: /* @__PURE__ */ (0, P.jsx)(gr, {
 						value: e.snap,
 						onChange: (e) => t({ snap: e }),
 						options: ["item", "free"]
@@ -18558,7 +18769,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Padding",
-					children: /* @__PURE__ */ (0, P.jsx)(Er, {
+					children: /* @__PURE__ */ (0, P.jsx)(kr, {
 						value: e.padding,
 						onChange: (e) => t({ padding: e })
 					})
@@ -18632,7 +18843,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Align",
-					children: /* @__PURE__ */ (0, P.jsx)(pr, {
+					children: /* @__PURE__ */ (0, P.jsx)(gr, {
 						value: e.align,
 						onChange: (e) => t({ align: e }),
 						options: [
@@ -18650,7 +18861,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Padding",
-					children: /* @__PURE__ */ (0, P.jsx)(Er, {
+					children: /* @__PURE__ */ (0, P.jsx)(kr, {
 						value: e.padding,
 						onChange: (e) => t({ padding: e })
 					})
@@ -18715,7 +18926,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Columns",
-					children: /* @__PURE__ */ (0, P.jsx)(pr, {
+					children: /* @__PURE__ */ (0, P.jsx)(gr, {
 						value: String(e.columns ?? 2),
 						onChange: (e) => t({ columns: Number(e) }),
 						options: [
@@ -18741,7 +18952,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Padding",
-					children: /* @__PURE__ */ (0, P.jsx)(Er, {
+					children: /* @__PURE__ */ (0, P.jsx)(kr, {
 						value: e.padding,
 						onChange: (e) => t({ padding: e })
 					})
@@ -18803,31 +19014,31 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Header",
 					error: r("header"),
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.header,
 						onChange: (e) => t({ header: e })
 					})
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Header Icon",
-					children: /* @__PURE__ */ (0, P.jsx)(ir, {
+					children: /* @__PURE__ */ (0, P.jsx)(sr, {
 						value: e.headerIcon ?? "",
 						onChange: (e) => t({ headerIcon: e })
 					})
 				}),
-				/* @__PURE__ */ (0, P.jsx)(yr, {
+				/* @__PURE__ */ (0, P.jsx)(Sr, {
 					value: e.expandedByDefault,
 					onChange: (e) => t({ expandedByDefault: e }),
 					label: "Expanded by Default"
 				}),
-				/* @__PURE__ */ (0, P.jsx)(yr, {
+				/* @__PURE__ */ (0, P.jsx)(Sr, {
 					value: e.border,
 					onChange: (e) => t({ border: e }),
 					label: "Show Border"
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Padding",
-					children: /* @__PURE__ */ (0, P.jsx)(Er, {
+					children: /* @__PURE__ */ (0, P.jsx)(kr, {
 						value: e.padding,
 						onChange: (e) => t({ padding: e })
 					})
@@ -18843,7 +19054,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Font Weight",
-					children: /* @__PURE__ */ (0, P.jsx)(pr, {
+					children: /* @__PURE__ */ (0, P.jsx)(gr, {
 						value: e.fontWeight,
 						onChange: (e) => t({ fontWeight: e }),
 						options: [
@@ -18869,7 +19080,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 			children: [
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Tab Labels (comma-separated)",
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.tabs.map((e) => e.label).join(", "),
 						onChange: (n) => {
 							t({ tabs: n.split(",").map((e) => e.trim()).map((t, n) => ({
@@ -18892,7 +19103,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Tab Align",
-					children: /* @__PURE__ */ (0, P.jsx)(pr, {
+					children: /* @__PURE__ */ (0, P.jsx)(gr, {
 						value: e.tabAlign,
 						onChange: (e) => t({ tabAlign: e }),
 						options: [
@@ -18904,14 +19115,14 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Tab Padding",
-					children: /* @__PURE__ */ (0, P.jsx)(Er, {
+					children: /* @__PURE__ */ (0, P.jsx)(kr, {
 						value: e.tabPadding,
 						onChange: (e) => t({ tabPadding: e })
 					})
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Content Padding",
-					children: /* @__PURE__ */ (0, P.jsx)(Er, {
+					children: /* @__PURE__ */ (0, P.jsx)(kr, {
 						value: e.contentPadding,
 						onChange: (e) => t({ contentPadding: e })
 					})
@@ -18933,19 +19144,17 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Content",
 					error: r("content"),
-					children: /* @__PURE__ */ (0, P.jsx)("textarea", {
+					children: /* @__PURE__ */ (0, P.jsx)(Qn, {
+						multiline: !0,
 						rows: 4,
 						value: e.content,
-						onChange: (e) => t({ content: e.target.value }),
-						style: {
-							fontFamily: "monospace",
-							resize: "vertical"
-						}
+						onChange: (e) => t({ content: e }),
+						style: { fontFamily: "monospace" }
 					})
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Language",
-					children: /* @__PURE__ */ (0, P.jsx)(ur, {
+					children: /* @__PURE__ */ (0, P.jsx)(pr, {
 						value: e.language ?? "",
 						onChange: (e) => t({ language: e })
 					})
@@ -18966,7 +19175,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Padding",
-					children: /* @__PURE__ */ (0, P.jsx)(Er, {
+					children: /* @__PURE__ */ (0, P.jsx)(kr, {
 						value: e.padding,
 						onChange: (e) => t({ padding: e })
 					})
@@ -19013,11 +19222,11 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 				/* @__PURE__ */ (0, P.jsx)(R, {
 					label: "Content",
 					error: r("content"),
-					children: /* @__PURE__ */ (0, P.jsx)("textarea", {
+					children: /* @__PURE__ */ (0, P.jsx)(Qn, {
+						multiline: !0,
 						rows: 4,
 						value: e.content,
-						onChange: (e) => t({ content: e.target.value }),
-						style: { resize: "vertical" }
+						onChange: (e) => t({ content: e })
 					})
 				}),
 				/* @__PURE__ */ (0, P.jsx)(R, {
@@ -19061,7 +19270,7 @@ function Dr(e, t, n = /* @__PURE__ */ new Map()) {
 }
 //#endregion
 //#region src/components/properties/BubbleSettingsEditor.tsx
-var Or = (0, S.memo)(function() {
+var jr = (0, S.memo)(function() {
 	let e = N((e) => e.settings), t = N((e) => e.updateSettings), n = N((e) => e.fallbackText), r = N((e) => e.notificationText), i = N((e) => e.setFallbackText), a = N((e) => e.setNotificationText);
 	return /* @__PURE__ */ (0, P.jsxs)("div", { children: [
 		/* @__PURE__ */ (0, P.jsx)("div", {
@@ -19168,12 +19377,12 @@ var Or = (0, S.memo)(function() {
 					children: [/* @__PURE__ */ (0, P.jsx)("label", {
 						className: "prop-label",
 						children: "Fallback Text (required)"
-					}), /* @__PURE__ */ (0, P.jsx)("textarea", {
+					}), /* @__PURE__ */ (0, P.jsx)(Qn, {
+						multiline: !0,
 						rows: 3,
 						value: n,
-						onChange: (e) => i(e.target.value),
-						placeholder: "Plain text for older UI Kit versions",
-						style: { resize: "vertical" }
+						onChange: i,
+						placeholder: "Plain text for older UI Kit versions"
 					})]
 				}),
 				/* @__PURE__ */ (0, P.jsxs)("div", {
@@ -19181,52 +19390,52 @@ var Or = (0, S.memo)(function() {
 					children: [/* @__PURE__ */ (0, P.jsx)("label", {
 						className: "prop-label",
 						children: "Notification Text"
-					}), /* @__PURE__ */ (0, P.jsx)("textarea", {
+					}), /* @__PURE__ */ (0, P.jsx)(Qn, {
+						multiline: !0,
 						rows: 2,
 						value: r,
-						onChange: (e) => a(e.target.value),
-						placeholder: "Text for push notifications",
-						style: { resize: "vertical" }
+						onChange: a,
+						placeholder: "Text for push notifications"
 					})]
 				})
 			]
 		})
 	] });
-}), kr = typeof window < "u" && window.document !== void 0 && window.document.createElement !== void 0;
-function Ar(e) {
+}), Mr = typeof window < "u" && window.document !== void 0 && window.document.createElement !== void 0;
+function Nr(e) {
 	let t = Object.prototype.toString.call(e);
 	return t === "[object Window]" || t === "[object global]";
 }
-function jr(e) {
+function Pr(e) {
 	return "nodeType" in e;
 }
-function Mr(e) {
-	return e ? Ar(e) ? e : jr(e) ? e.ownerDocument?.defaultView ?? window : window : window;
+function Fr(e) {
+	return e ? Nr(e) ? e : Pr(e) ? e.ownerDocument?.defaultView ?? window : window : window;
 }
-function Nr(e) {
-	let { Document: t } = Mr(e);
+function Ir(e) {
+	let { Document: t } = Fr(e);
 	return e instanceof t;
 }
-function Pr(e) {
-	return Ar(e) ? !1 : e instanceof Mr(e).HTMLElement;
+function Lr(e) {
+	return Nr(e) ? !1 : e instanceof Fr(e).HTMLElement;
 }
-function Fr(e) {
-	return e instanceof Mr(e).SVGElement;
+function Rr(e) {
+	return e instanceof Fr(e).SVGElement;
 }
-function Ir(e) {
-	return e ? Ar(e) ? e.document : jr(e) ? Nr(e) ? e : Pr(e) || Fr(e) ? e.ownerDocument : document : document : document;
+function zr(e) {
+	return e ? Nr(e) ? e.document : Pr(e) ? Ir(e) ? e : Lr(e) || Rr(e) ? e.ownerDocument : document : document : document;
 }
-var Lr = kr ? S.useLayoutEffect : S.useEffect;
-function Rr(e) {
+var Br = Mr ? S.useLayoutEffect : S.useEffect;
+function Vr(e) {
 	let t = (0, S.useRef)(e);
-	return Lr(() => {
+	return Br(() => {
 		t.current = e;
 	}), (0, S.useCallback)(function() {
 		var e = [...arguments];
 		return t.current == null ? void 0 : t.current(...e);
 	}, []);
 }
-function zr() {
+function Hr() {
 	let e = (0, S.useRef)(null);
 	return [(0, S.useCallback)((t, n) => {
 		e.current = setInterval(t, n);
@@ -19234,41 +19443,41 @@ function zr() {
 		e.current !== null && (clearInterval(e.current), e.current = null);
 	}, [])];
 }
-function Br(e, t) {
+function Ur(e, t) {
 	t === void 0 && (t = [e]);
 	let n = (0, S.useRef)(e);
-	return Lr(() => {
+	return Br(() => {
 		n.current !== e && (n.current = e);
 	}, t), n;
 }
-function Vr(e, t) {
+function Wr(e, t) {
 	let n = (0, S.useRef)();
 	return (0, S.useMemo)(() => {
 		let t = e(n.current);
 		return n.current = t, t;
 	}, [...t]);
 }
-function Hr(e) {
-	let t = Rr(e), n = (0, S.useRef)(null);
+function Gr(e) {
+	let t = Vr(e), n = (0, S.useRef)(null);
 	return [n, (0, S.useCallback)((e) => {
 		e !== n.current && t?.(e, n.current), n.current = e;
 	}, [])];
 }
-function Ur(e) {
+function Kr(e) {
 	let t = (0, S.useRef)();
 	return (0, S.useEffect)(() => {
 		t.current = e;
 	}, [e]), t.current;
 }
-var Wr = {};
-function Gr(e, t) {
+var qr = {};
+function Jr(e, t) {
 	return (0, S.useMemo)(() => {
 		if (t) return t;
-		let n = Wr[e] == null ? 0 : Wr[e] + 1;
-		return Wr[e] = n, e + "-" + n;
+		let n = qr[e] == null ? 0 : qr[e] + 1;
+		return qr[e] = n, e + "-" + n;
 	}, [e, t]);
 }
-function Kr(e) {
+function Yr(e) {
 	return function(t) {
 		return [...arguments].slice(1).reduce((t, n) => {
 			let r = Object.entries(n);
@@ -19280,22 +19489,22 @@ function Kr(e) {
 		}, { ...t });
 	};
 }
-var qr = /* @__PURE__ */ Kr(1), Jr = /* @__PURE__ */ Kr(-1);
-function Yr(e) {
+var Xr = /* @__PURE__ */ Yr(1), Zr = /* @__PURE__ */ Yr(-1);
+function Qr(e) {
 	return "clientX" in e && "clientY" in e;
 }
-function Xr(e) {
+function $r(e) {
 	if (!e) return !1;
-	let { KeyboardEvent: t } = Mr(e.target);
+	let { KeyboardEvent: t } = Fr(e.target);
 	return t && e instanceof t;
 }
-function Zr(e) {
+function ei(e) {
 	if (!e) return !1;
-	let { TouchEvent: t } = Mr(e.target);
+	let { TouchEvent: t } = Fr(e.target);
 	return t && e instanceof t;
 }
-function Qr(e) {
-	if (Zr(e)) {
+function ti(e) {
+	if (ei(e)) {
 		if (e.touches && e.touches.length) {
 			let { clientX: t, clientY: n } = e.touches[0];
 			return {
@@ -19310,12 +19519,12 @@ function Qr(e) {
 			};
 		}
 	}
-	return Yr(e) ? {
+	return Qr(e) ? {
 		x: e.clientX,
 		y: e.clientY
 	} : null;
 }
-var $r = /* @__PURE__ */ Object.freeze({
+var ni = /* @__PURE__ */ Object.freeze({
 	Translate: { toString(e) {
 		if (!e) return;
 		let { x: t, y: n } = e;
@@ -19327,27 +19536,27 @@ var $r = /* @__PURE__ */ Object.freeze({
 		return "scaleX(" + t + ") scaleY(" + n + ")";
 	} },
 	Transform: { toString(e) {
-		if (e) return [$r.Translate.toString(e), $r.Scale.toString(e)].join(" ");
+		if (e) return [ni.Translate.toString(e), ni.Scale.toString(e)].join(" ");
 	} },
 	Transition: { toString(e) {
 		let { property: t, duration: n, easing: r } = e;
 		return t + " " + n + "ms " + r;
 	} }
-}), ei = "a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]";
-function ti(e) {
-	return e.matches(ei) ? e : e.querySelector(ei);
+}), ri = "a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]";
+function ii(e) {
+	return e.matches(ri) ? e : e.querySelector(ri);
 }
 //#endregion
 //#region node_modules/@dnd-kit/accessibility/dist/accessibility.esm.js
-var ni = { display: "none" };
-function ri(e) {
+var ai = { display: "none" };
+function oi(e) {
 	let { id: t, value: n } = e;
 	return S.createElement("div", {
 		id: t,
-		style: ni
+		style: ai
 	}, n);
 }
-function ii(e) {
+function si(e) {
 	let { id: t, announcement: n, ariaLiveType: r = "assertive" } = e;
 	return S.createElement("div", {
 		id: t,
@@ -19370,7 +19579,7 @@ function ii(e) {
 		"aria-atomic": !0
 	}, n);
 }
-function ai() {
+function ci() {
 	let [e, t] = (0, S.useState)("");
 	return {
 		announce: (0, S.useCallback)((e) => {
@@ -19381,22 +19590,22 @@ function ai() {
 }
 //#endregion
 //#region node_modules/@dnd-kit/core/dist/core.esm.js
-var oi = /* @__PURE__ */ (0, S.createContext)(null);
-function si(e) {
-	let t = (0, S.useContext)(oi);
+var li = /* @__PURE__ */ (0, S.createContext)(null);
+function ui(e) {
+	let t = (0, S.useContext)(li);
 	(0, S.useEffect)(() => {
 		if (!t) throw Error("useDndMonitor must be used within a children of <DndContext>");
 		return t(e);
 	}, [e, t]);
 }
-function ci() {
+function di() {
 	let [e] = (0, S.useState)(() => /* @__PURE__ */ new Set()), t = (0, S.useCallback)((t) => (e.add(t), () => e.delete(t)), [e]);
 	return [(0, S.useCallback)((t) => {
 		let { type: n, event: r } = t;
 		e.forEach((e) => e[n]?.call(e, r));
 	}, [e]), t];
 }
-var li = { draggable: "\n    To pick up a draggable item, press the space bar.\n    While dragging, use the arrow keys to move the item.\n    Press space again to drop the item in its new position, or press escape to cancel.\n  " }, ui = {
+var fi = { draggable: "\n    To pick up a draggable item, press the space bar.\n    While dragging, use the arrow keys to move the item.\n    Press space again to drop the item in its new position, or press escape to cancel.\n  " }, pi = {
 	onDragStart(e) {
 		let { active: t } = e;
 		return "Picked up draggable item " + t.id + ".";
@@ -19414,11 +19623,11 @@ var li = { draggable: "\n    To pick up a draggable item, press the space bar.\n
 		return "Dragging was cancelled. Draggable item " + t.id + " was dropped.";
 	}
 };
-function di(e) {
-	let { announcements: t = ui, container: n, hiddenTextDescribedById: r, screenReaderInstructions: i = li } = e, { announce: a, announcement: o } = ai(), s = Gr("DndLiveRegion"), [c, l] = (0, S.useState)(!1);
+function mi(e) {
+	let { announcements: t = pi, container: n, hiddenTextDescribedById: r, screenReaderInstructions: i = fi } = e, { announce: a, announcement: o } = ci(), s = Jr("DndLiveRegion"), [c, l] = (0, S.useState)(!1);
 	if ((0, S.useEffect)(() => {
 		l(!0);
-	}, []), si((0, S.useMemo)(() => ({
+	}, []), ui((0, S.useMemo)(() => ({
 		onDragStart(e) {
 			let { active: n } = e;
 			a(t.onDragStart({ active: n }));
@@ -19452,39 +19661,39 @@ function di(e) {
 			}));
 		}
 	}), [a, t])), !c) return null;
-	let u = S.createElement(S.Fragment, null, S.createElement(ri, {
+	let u = S.createElement(S.Fragment, null, S.createElement(oi, {
 		id: r,
 		value: i.draggable
-	}), S.createElement(ii, {
+	}), S.createElement(si, {
 		id: s,
 		announcement: o
 	}));
 	return n ? (0, An.createPortal)(u, n) : u;
 }
-var fi;
+var hi;
 (function(e) {
 	e.DragStart = "dragStart", e.DragMove = "dragMove", e.DragEnd = "dragEnd", e.DragCancel = "dragCancel", e.DragOver = "dragOver", e.RegisterDroppable = "registerDroppable", e.SetDroppableDisabled = "setDroppableDisabled", e.UnregisterDroppable = "unregisterDroppable";
-})(fi ||= {});
-function pi() {}
-function mi(e, t) {
+})(hi ||= {});
+function gi() {}
+function _i(e, t) {
 	return (0, S.useMemo)(() => ({
 		sensor: e,
 		options: t ?? {}
 	}), [e, t]);
 }
-function hi() {
+function vi() {
 	var e = [...arguments];
 	return (0, S.useMemo)(() => [...e].filter((e) => e != null), [...e]);
 }
-var gi = /* @__PURE__ */ Object.freeze({
+var yi = /* @__PURE__ */ Object.freeze({
 	x: 0,
 	y: 0
 });
-function _i(e, t) {
+function bi(e, t) {
 	return Math.sqrt((e.x - t.x) ** 2 + (e.y - t.y) ** 2);
 }
-function vi(e, t) {
-	let n = Qr(e);
+function xi(e, t) {
+	let n = ti(e);
 	if (!n) return "0 0";
 	let r = {
 		x: (n.x - t.left) / t.width * 100,
@@ -19492,31 +19701,31 @@ function vi(e, t) {
 	};
 	return r.x + "% " + r.y + "%";
 }
-function yi(e, t) {
+function Si(e, t) {
 	let { data: { value: n } } = e, { data: { value: r } } = t;
 	return n - r;
 }
-function bi(e, t) {
+function Ci(e, t) {
 	let { data: { value: n } } = e, { data: { value: r } } = t;
 	return r - n;
 }
-function xi(e, t) {
+function wi(e, t) {
 	if (!e || e.length === 0) return null;
 	let [n] = e;
 	return t ? n[t] : n;
 }
-function Si(e, t, n) {
+function Ti(e, t, n) {
 	return t === void 0 && (t = e.left), n === void 0 && (n = e.top), {
 		x: t + e.width * .5,
 		y: n + e.height * .5
 	};
 }
-var Ci = (e) => {
-	let { collisionRect: t, droppableRects: n, droppableContainers: r } = e, i = Si(t, t.left, t.top), a = [];
+var Ei = (e) => {
+	let { collisionRect: t, droppableRects: n, droppableContainers: r } = e, i = Ti(t, t.left, t.top), a = [];
 	for (let e of r) {
 		let { id: t } = e, r = n.get(t);
 		if (r) {
-			let n = _i(Si(r), i);
+			let n = bi(Ti(r), i);
 			a.push({
 				id: t,
 				data: {
@@ -19526,9 +19735,9 @@ var Ci = (e) => {
 			});
 		}
 	}
-	return a.sort(yi);
+	return a.sort(Si);
 };
-function wi(e, t) {
+function Di(e, t) {
 	let n = Math.max(t.top, e.top), r = Math.max(t.left, e.left), i = Math.min(t.left + t.width, e.left + e.width), a = Math.min(t.top + t.height, e.top + e.height), o = i - r, s = a - n;
 	if (r < i && n < a) {
 		let n = t.width * t.height, r = e.width * e.height, i = o * s, a = i / (n + r - i);
@@ -19536,12 +19745,12 @@ function wi(e, t) {
 	}
 	return 0;
 }
-var Ti = (e) => {
+var Oi = (e) => {
 	let { collisionRect: t, droppableRects: n, droppableContainers: r } = e, i = [];
 	for (let e of r) {
 		let { id: r } = e, a = n.get(r);
 		if (a) {
-			let n = wi(a, t);
+			let n = Di(a, t);
 			n > 0 && i.push({
 				id: r,
 				data: {
@@ -19551,22 +19760,22 @@ var Ti = (e) => {
 			});
 		}
 	}
-	return i.sort(bi);
+	return i.sort(Ci);
 };
-function Ei(e, t, n) {
+function ki(e, t, n) {
 	return {
 		...e,
 		scaleX: t && n ? t.width / n.width : 1,
 		scaleY: t && n ? t.height / n.height : 1
 	};
 }
-function Di(e, t) {
+function Ai(e, t) {
 	return e && t ? {
 		x: e.left - t.left,
 		y: e.top - t.top
-	} : gi;
+	} : yi;
 }
-function Oi(e) {
+function ji(e) {
 	return function(t) {
 		return [...arguments].slice(1).reduce((t, n) => ({
 			...t,
@@ -19577,8 +19786,8 @@ function Oi(e) {
 		}), { ...t });
 	};
 }
-var ki = /* @__PURE__ */ Oi(1);
-function Ai(e) {
+var V = /* @__PURE__ */ ji(1);
+function H(e) {
 	if (e.startsWith("matrix3d(")) {
 		let t = e.slice(9, -1).split(/, /);
 		return {
@@ -19598,8 +19807,8 @@ function Ai(e) {
 	}
 	return null;
 }
-function ji(e, t, n) {
-	let r = Ai(t);
+function Mi(e, t, n) {
+	let r = H(t);
 	if (!r) return e;
 	let { scaleX: i, scaleY: a, x: o, y: s } = r, c = e.left - o - (1 - i) * parseFloat(n), l = e.top - s - (1 - a) * parseFloat(n.slice(n.indexOf(" ") + 1)), u = i ? e.width / i : e.width, d = a ? e.height / a : e.height;
 	return {
@@ -19611,13 +19820,13 @@ function ji(e, t, n) {
 		left: c
 	};
 }
-var V = { ignoreTransform: !1 };
-function H(e, t) {
-	t === void 0 && (t = V);
+var Ni = { ignoreTransform: !1 };
+function Pi(e, t) {
+	t === void 0 && (t = Ni);
 	let n = e.getBoundingClientRect();
 	if (t.ignoreTransform) {
-		let { transform: t, transformOrigin: r } = Mr(e).getComputedStyle(e);
-		t && (n = ji(n, t, r));
+		let { transform: t, transformOrigin: r } = Fr(e).getComputedStyle(e);
+		t && (n = Mi(n, t, r));
 	}
 	let { top: r, left: i, width: a, height: o, bottom: s, right: c } = n;
 	return {
@@ -19629,10 +19838,10 @@ function H(e, t) {
 		right: c
 	};
 }
-function Mi(e) {
-	return H(e, { ignoreTransform: !0 });
+function Fi(e) {
+	return Pi(e, { ignoreTransform: !0 });
 }
-function Ni(e) {
+function Ii(e) {
 	let t = e.innerWidth, n = e.innerHeight;
 	return {
 		top: 0,
@@ -19643,11 +19852,11 @@ function Ni(e) {
 		height: n
 	};
 }
-function Pi(e, t) {
-	return t === void 0 && (t = Mr(e).getComputedStyle(e)), t.position === "fixed";
+function Li(e, t) {
+	return t === void 0 && (t = Fr(e).getComputedStyle(e)), t.position === "fixed";
 }
-function Fi(e, t) {
-	t === void 0 && (t = Mr(e).getComputedStyle(e));
+function Ri(e, t) {
+	t === void 0 && (t = Fr(e).getComputedStyle(e));
 	let n = /(auto|scroll|overlay)/;
 	return [
 		"overflow",
@@ -19658,48 +19867,48 @@ function Fi(e, t) {
 		return typeof r == "string" ? n.test(r) : !1;
 	});
 }
-function Ii(e, t) {
+function zi(e, t) {
 	let n = [];
 	function r(i) {
 		if (t != null && n.length >= t || !i) return n;
-		if (Nr(i) && i.scrollingElement != null && !n.includes(i.scrollingElement)) return n.push(i.scrollingElement), n;
-		if (!Pr(i) || Fr(i) || n.includes(i)) return n;
-		let a = Mr(e).getComputedStyle(i);
-		return i !== e && Fi(i, a) && n.push(i), Pi(i, a) ? n : r(i.parentNode);
+		if (Ir(i) && i.scrollingElement != null && !n.includes(i.scrollingElement)) return n.push(i.scrollingElement), n;
+		if (!Lr(i) || Rr(i) || n.includes(i)) return n;
+		let a = Fr(e).getComputedStyle(i);
+		return i !== e && Ri(i, a) && n.push(i), Li(i, a) ? n : r(i.parentNode);
 	}
 	return e ? r(e) : n;
 }
-function Li(e) {
-	let [t] = Ii(e, 1);
+function Bi(e) {
+	let [t] = zi(e, 1);
 	return t ?? null;
 }
-function Ri(e) {
-	return !kr || !e ? null : Ar(e) ? e : jr(e) ? Nr(e) || e === Ir(e).scrollingElement ? window : Pr(e) ? e : null : null;
+function Vi(e) {
+	return !Mr || !e ? null : Nr(e) ? e : Pr(e) ? Ir(e) || e === zr(e).scrollingElement ? window : Lr(e) ? e : null : null;
 }
-function zi(e) {
-	return Ar(e) ? e.scrollX : e.scrollLeft;
+function Hi(e) {
+	return Nr(e) ? e.scrollX : e.scrollLeft;
 }
-function Bi(e) {
-	return Ar(e) ? e.scrollY : e.scrollTop;
+function Ui(e) {
+	return Nr(e) ? e.scrollY : e.scrollTop;
 }
-function Vi(e) {
+function Wi(e) {
 	return {
-		x: zi(e),
-		y: Bi(e)
+		x: Hi(e),
+		y: Ui(e)
 	};
 }
-var Hi;
+var Gi;
 (function(e) {
 	e[e.Forward = 1] = "Forward", e[e.Backward = -1] = "Backward";
-})(Hi ||= {});
-function Ui(e) {
-	return !kr || !e ? !1 : e === document.scrollingElement;
+})(Gi ||= {});
+function Ki(e) {
+	return !Mr || !e ? !1 : e === document.scrollingElement;
 }
-function Wi(e) {
+function qi(e) {
 	let t = {
 		x: 0,
 		y: 0
-	}, n = Ui(e) ? {
+	}, n = Ki(e) ? {
 		height: window.innerHeight,
 		width: window.innerWidth
 	} : {
@@ -19718,14 +19927,14 @@ function Wi(e) {
 		minScroll: t
 	};
 }
-var Gi = {
+var Ji = {
 	x: .2,
 	y: .2
 };
-function Ki(e, t, n, r, i) {
+function Yi(e, t, n, r, i) {
 	let { top: a, left: o, right: s, bottom: c } = n;
-	r === void 0 && (r = 10), i === void 0 && (i = Gi);
-	let { isTop: l, isBottom: u, isLeft: d, isRight: f } = Wi(e), p = {
+	r === void 0 && (r = 10), i === void 0 && (i = Ji);
+	let { isTop: l, isBottom: u, isLeft: d, isRight: f } = qi(e), p = {
 		x: 0,
 		y: 0
 	}, m = {
@@ -19735,12 +19944,12 @@ function Ki(e, t, n, r, i) {
 		height: t.height * i.y,
 		width: t.width * i.x
 	};
-	return !l && a <= t.top + h.height ? (p.y = Hi.Backward, m.y = r * Math.abs((t.top + h.height - a) / h.height)) : !u && c >= t.bottom - h.height && (p.y = Hi.Forward, m.y = r * Math.abs((t.bottom - h.height - c) / h.height)), !f && s >= t.right - h.width ? (p.x = Hi.Forward, m.x = r * Math.abs((t.right - h.width - s) / h.width)) : !d && o <= t.left + h.width && (p.x = Hi.Backward, m.x = r * Math.abs((t.left + h.width - o) / h.width)), {
+	return !l && a <= t.top + h.height ? (p.y = Gi.Backward, m.y = r * Math.abs((t.top + h.height - a) / h.height)) : !u && c >= t.bottom - h.height && (p.y = Gi.Forward, m.y = r * Math.abs((t.bottom - h.height - c) / h.height)), !f && s >= t.right - h.width ? (p.x = Gi.Forward, m.x = r * Math.abs((t.right - h.width - s) / h.width)) : !d && o <= t.left + h.width && (p.x = Gi.Backward, m.x = r * Math.abs((t.left + h.width - o) / h.width)), {
 		direction: p,
 		speed: m
 	};
 }
-function qi(e) {
+function Xi(e) {
 	if (e === document.scrollingElement) {
 		let { innerWidth: e, innerHeight: t } = window;
 		return {
@@ -19762,37 +19971,37 @@ function qi(e) {
 		height: e.clientHeight
 	};
 }
-function Ji(e) {
-	return e.reduce((e, t) => qr(e, Vi(t)), gi);
+function Zi(e) {
+	return e.reduce((e, t) => Xr(e, Wi(t)), yi);
 }
-function Yi(e) {
-	return e.reduce((e, t) => e + zi(t), 0);
+function Qi(e) {
+	return e.reduce((e, t) => e + Hi(t), 0);
 }
-function Xi(e) {
-	return e.reduce((e, t) => e + Bi(t), 0);
+function $i(e) {
+	return e.reduce((e, t) => e + Ui(t), 0);
 }
-function Zi(e, t) {
-	if (t === void 0 && (t = H), !e) return;
+function ea(e, t) {
+	if (t === void 0 && (t = Pi), !e) return;
 	let { top: n, left: r, bottom: i, right: a } = t(e);
-	Li(e) && (i <= 0 || a <= 0 || n >= window.innerHeight || r >= window.innerWidth) && e.scrollIntoView({
+	Bi(e) && (i <= 0 || a <= 0 || n >= window.innerHeight || r >= window.innerWidth) && e.scrollIntoView({
 		block: "center",
 		inline: "center"
 	});
 }
-var Qi = [[
+var ta = [[
 	"x",
 	["left", "right"],
-	Yi
+	Qi
 ], [
 	"y",
 	["top", "bottom"],
-	Xi
-]], $i = class {
+	$i
+]], na = class {
 	constructor(e, t) {
 		this.rect = void 0, this.width = void 0, this.height = void 0, this.top = void 0, this.bottom = void 0, this.right = void 0, this.left = void 0;
-		let n = Ii(t), r = Ji(n);
+		let n = zi(t), r = Zi(n);
 		this.rect = { ...e }, this.width = e.width, this.height = e.height;
-		for (let [e, t, i] of Qi) for (let a of t) Object.defineProperty(this, a, {
+		for (let [e, t, i] of ta) for (let a of t) Object.defineProperty(this, a, {
 			get: () => {
 				let t = i(n), o = r[e] - t;
 				return this.rect[a] + o;
@@ -19801,7 +20010,7 @@ var Qi = [[
 		});
 		Object.defineProperty(this, "rect", { enumerable: !1 });
 	}
-}, ea = class {
+}, ra = class {
 	constructor(e) {
 		this.target = void 0, this.listeners = [], this.removeAll = () => {
 			this.listeners.forEach((e) => this.target?.removeEventListener(...e));
@@ -19816,29 +20025,29 @@ var Qi = [[
 		]);
 	}
 };
-function ta(e) {
-	let { EventTarget: t } = Mr(e);
-	return e instanceof t ? e : Ir(e);
+function ia(e) {
+	let { EventTarget: t } = Fr(e);
+	return e instanceof t ? e : zr(e);
 }
-function na(e, t) {
+function aa(e, t) {
 	let n = Math.abs(e.x), r = Math.abs(e.y);
 	return typeof t == "number" ? Math.sqrt(n ** 2 + r ** 2) > t : "x" in t && "y" in t ? n > t.x && r > t.y : "x" in t ? n > t.x : "y" in t ? r > t.y : !1;
 }
-var ra;
+var oa;
 (function(e) {
 	e.Click = "click", e.DragStart = "dragstart", e.Keydown = "keydown", e.ContextMenu = "contextmenu", e.Resize = "resize", e.SelectionChange = "selectionchange", e.VisibilityChange = "visibilitychange";
-})(ra ||= {});
-function ia(e) {
+})(oa ||= {});
+function sa(e) {
 	e.preventDefault();
 }
-function aa(e) {
+function ca(e) {
 	e.stopPropagation();
 }
 var U;
 (function(e) {
 	e.Space = "Space", e.Down = "ArrowDown", e.Right = "ArrowRight", e.Left = "ArrowLeft", e.Up = "ArrowUp", e.Esc = "Escape", e.Enter = "Enter", e.Tab = "Tab";
 })(U ||= {});
-var oa = {
+var la = {
 	start: [U.Space, U.Enter],
 	cancel: [U.Esc],
 	end: [
@@ -19846,7 +20055,7 @@ var oa = {
 		U.Enter,
 		U.Tab
 	]
-}, sa = (e, t) => {
+}, ua = (e, t) => {
 	let { currentCoordinates: n } = t;
 	switch (e.code) {
 		case U.Right: return {
@@ -19866,22 +20075,22 @@ var oa = {
 			y: n.y - 25
 		};
 	}
-}, ca = class {
+}, da = class {
 	constructor(e) {
 		this.props = void 0, this.autoScrollEnabled = !1, this.referenceCoordinates = void 0, this.listeners = void 0, this.windowListeners = void 0, this.props = e;
 		let { event: { target: t } } = e;
-		this.props = e, this.listeners = new ea(Ir(t)), this.windowListeners = new ea(Mr(t)), this.handleKeyDown = this.handleKeyDown.bind(this), this.handleCancel = this.handleCancel.bind(this), this.attach();
+		this.props = e, this.listeners = new ra(zr(t)), this.windowListeners = new ra(Fr(t)), this.handleKeyDown = this.handleKeyDown.bind(this), this.handleCancel = this.handleCancel.bind(this), this.attach();
 	}
 	attach() {
-		this.handleStart(), this.windowListeners.add(ra.Resize, this.handleCancel), this.windowListeners.add(ra.VisibilityChange, this.handleCancel), setTimeout(() => this.listeners.add(ra.Keydown, this.handleKeyDown));
+		this.handleStart(), this.windowListeners.add(oa.Resize, this.handleCancel), this.windowListeners.add(oa.VisibilityChange, this.handleCancel), setTimeout(() => this.listeners.add(oa.Keydown, this.handleKeyDown));
 	}
 	handleStart() {
 		let { activeNode: e, onStart: t } = this.props, n = e.node.current;
-		n && Zi(n), t(gi);
+		n && ea(n), t(yi);
 	}
 	handleKeyDown(e) {
-		if (Xr(e)) {
-			let { active: t, context: n, options: r } = this.props, { keyboardCodes: i = oa, coordinateGetter: a = sa, scrollBehavior: o = "smooth" } = r, { code: s } = e;
+		if ($r(e)) {
+			let { active: t, context: n, options: r } = this.props, { keyboardCodes: i = la, coordinateGetter: a = ua, scrollBehavior: o = "smooth" } = r, { code: s } = e;
 			if (i.end.includes(s)) {
 				this.handleEnd(e);
 				return;
@@ -19893,7 +20102,7 @@ var oa = {
 			let { collisionRect: c } = n.current, l = c ? {
 				x: c.left,
 				y: c.top
-			} : gi;
+			} : yi;
 			this.referenceCoordinates ||= l;
 			let u = a(e, {
 				active: t,
@@ -19901,12 +20110,12 @@ var oa = {
 				currentCoordinates: l
 			});
 			if (u) {
-				let t = Jr(u, l), r = {
+				let t = Zr(u, l), r = {
 					x: 0,
 					y: 0
 				}, { scrollableAncestors: i } = n.current;
 				for (let n of i) {
-					let i = e.code, { isTop: a, isRight: s, isLeft: c, isBottom: l, maxScroll: d, minScroll: f } = Wi(n), p = qi(n), m = {
+					let i = e.code, { isTop: a, isRight: s, isLeft: c, isBottom: l, maxScroll: d, minScroll: f } = qi(n), p = Xi(n), m = {
 						x: Math.min(i === U.Right ? p.right - p.width / 2 : p.right, Math.max(i === U.Right ? p.left : p.left + p.width / 2, u.x)),
 						y: Math.min(i === U.Down ? p.bottom - p.height / 2 : p.bottom, Math.max(i === U.Down ? p.top : p.top + p.height / 2, u.y))
 					}, h = i === U.Right && !s || i === U.Left && !c, g = i === U.Down && !l || i === U.Up && !a;
@@ -19940,7 +20149,7 @@ var oa = {
 						break;
 					}
 				}
-				this.handleMove(e, qr(Jr(u, this.referenceCoordinates), r));
+				this.handleMove(e, Xr(Zr(u, this.referenceCoordinates), r));
 			}
 		}
 	}
@@ -19960,10 +20169,10 @@ var oa = {
 		this.listeners.removeAll(), this.windowListeners.removeAll();
 	}
 };
-ca.activators = [{
+da.activators = [{
 	eventName: "onKeyDown",
 	handler: (e, t, n) => {
-		let { keyboardCodes: r = oa, onActivation: i } = t, { active: a } = n, { code: o } = e.nativeEvent;
+		let { keyboardCodes: r = la, onActivation: i } = t, { active: a } = n, { code: o } = e.nativeEvent;
 		if (r.start.includes(o)) {
 			let t = a.activatorNode.current;
 			return t && e.target !== t ? !1 : (e.preventDefault(), i?.({ event: e.nativeEvent }), !0);
@@ -19971,31 +20180,31 @@ ca.activators = [{
 		return !1;
 	}
 }];
-function la(e) {
+function fa(e) {
 	return !!(e && "distance" in e);
 }
-function ua(e) {
+function pa(e) {
 	return !!(e && "delay" in e);
 }
-var da = class {
+var ma = class {
 	constructor(e, t, n) {
-		n === void 0 && (n = ta(e.event.target)), this.props = void 0, this.events = void 0, this.autoScrollEnabled = !0, this.document = void 0, this.activated = !1, this.initialCoordinates = void 0, this.timeoutId = null, this.listeners = void 0, this.documentListeners = void 0, this.windowListeners = void 0, this.props = e, this.events = t;
+		n === void 0 && (n = ia(e.event.target)), this.props = void 0, this.events = void 0, this.autoScrollEnabled = !0, this.document = void 0, this.activated = !1, this.initialCoordinates = void 0, this.timeoutId = null, this.listeners = void 0, this.documentListeners = void 0, this.windowListeners = void 0, this.props = e, this.events = t;
 		let { event: r } = e, { target: i } = r;
-		this.props = e, this.events = t, this.document = Ir(i), this.documentListeners = new ea(this.document), this.listeners = new ea(n), this.windowListeners = new ea(Mr(i)), this.initialCoordinates = Qr(r) ?? gi, this.handleStart = this.handleStart.bind(this), this.handleMove = this.handleMove.bind(this), this.handleEnd = this.handleEnd.bind(this), this.handleCancel = this.handleCancel.bind(this), this.handleKeydown = this.handleKeydown.bind(this), this.removeTextSelection = this.removeTextSelection.bind(this), this.attach();
+		this.props = e, this.events = t, this.document = zr(i), this.documentListeners = new ra(this.document), this.listeners = new ra(n), this.windowListeners = new ra(Fr(i)), this.initialCoordinates = ti(r) ?? yi, this.handleStart = this.handleStart.bind(this), this.handleMove = this.handleMove.bind(this), this.handleEnd = this.handleEnd.bind(this), this.handleCancel = this.handleCancel.bind(this), this.handleKeydown = this.handleKeydown.bind(this), this.removeTextSelection = this.removeTextSelection.bind(this), this.attach();
 	}
 	attach() {
 		let { events: e, props: { options: { activationConstraint: t, bypassActivationConstraint: n } } } = this;
-		if (this.listeners.add(e.move.name, this.handleMove, { passive: !1 }), this.listeners.add(e.end.name, this.handleEnd), e.cancel && this.listeners.add(e.cancel.name, this.handleCancel), this.windowListeners.add(ra.Resize, this.handleCancel), this.windowListeners.add(ra.DragStart, ia), this.windowListeners.add(ra.VisibilityChange, this.handleCancel), this.windowListeners.add(ra.ContextMenu, ia), this.documentListeners.add(ra.Keydown, this.handleKeydown), t) {
+		if (this.listeners.add(e.move.name, this.handleMove, { passive: !1 }), this.listeners.add(e.end.name, this.handleEnd), e.cancel && this.listeners.add(e.cancel.name, this.handleCancel), this.windowListeners.add(oa.Resize, this.handleCancel), this.windowListeners.add(oa.DragStart, sa), this.windowListeners.add(oa.VisibilityChange, this.handleCancel), this.windowListeners.add(oa.ContextMenu, sa), this.documentListeners.add(oa.Keydown, this.handleKeydown), t) {
 			if (n != null && n({
 				event: this.props.event,
 				activeNode: this.props.activeNode,
 				options: this.props.options
 			})) return this.handleStart();
-			if (ua(t)) {
+			if (pa(t)) {
 				this.timeoutId = setTimeout(this.handleStart, t.delay), this.handlePending(t);
 				return;
 			}
-			if (la(t)) {
+			if (fa(t)) {
 				this.handlePending(t);
 				return;
 			}
@@ -20011,18 +20220,18 @@ var da = class {
 	}
 	handleStart() {
 		let { initialCoordinates: e } = this, { onStart: t } = this.props;
-		e && (this.activated = !0, this.documentListeners.add(ra.Click, aa, { capture: !0 }), this.removeTextSelection(), this.documentListeners.add(ra.SelectionChange, this.removeTextSelection), t(e));
+		e && (this.activated = !0, this.documentListeners.add(oa.Click, ca, { capture: !0 }), this.removeTextSelection(), this.documentListeners.add(oa.SelectionChange, this.removeTextSelection), t(e));
 	}
 	handleMove(e) {
 		let { activated: t, initialCoordinates: n, props: r } = this, { onMove: i, options: { activationConstraint: a } } = r;
 		if (!n) return;
-		let o = Qr(e) ?? gi, s = Jr(n, o);
+		let o = ti(e) ?? yi, s = Zr(n, o);
 		if (!t && a) {
-			if (la(a)) {
-				if (a.tolerance != null && na(s, a.tolerance)) return this.handleCancel();
-				if (na(s, a.distance)) return this.handleStart();
+			if (fa(a)) {
+				if (a.tolerance != null && aa(s, a.tolerance)) return this.handleCancel();
+				if (aa(s, a.distance)) return this.handleStart();
 			}
-			if (ua(a) && na(s, a.tolerance)) return this.handleCancel();
+			if (pa(a) && aa(s, a.tolerance)) return this.handleCancel();
 			this.handlePending(a, s);
 			return;
 		}
@@ -20043,80 +20252,80 @@ var da = class {
 		var e;
 		(e = this.document.getSelection()) == null || e.removeAllRanges();
 	}
-}, fa = {
+}, ha = {
 	cancel: { name: "pointercancel" },
 	move: { name: "pointermove" },
 	end: { name: "pointerup" }
-}, pa = class extends da {
+}, ga = class extends ma {
 	constructor(e) {
-		let { event: t } = e, n = Ir(t.target);
-		super(e, fa, n);
+		let { event: t } = e, n = zr(t.target);
+		super(e, ha, n);
 	}
 };
-pa.activators = [{
+ga.activators = [{
 	eventName: "onPointerDown",
 	handler: (e, t) => {
 		let { nativeEvent: n } = e, { onActivation: r } = t;
 		return !n.isPrimary || n.button !== 0 ? !1 : (r?.({ event: n }), !0);
 	}
 }];
-var ma = {
+var _a = {
 	move: { name: "mousemove" },
 	end: { name: "mouseup" }
-}, ha;
+}, va;
 (function(e) {
 	e[e.RightClick = 2] = "RightClick";
-})(ha ||= {});
-var ga = class extends da {
+})(va ||= {});
+var ya = class extends ma {
 	constructor(e) {
-		super(e, ma, Ir(e.event.target));
+		super(e, _a, zr(e.event.target));
 	}
 };
-ga.activators = [{
+ya.activators = [{
 	eventName: "onMouseDown",
 	handler: (e, t) => {
 		let { nativeEvent: n } = e, { onActivation: r } = t;
-		return n.button === ha.RightClick ? !1 : (r?.({ event: n }), !0);
+		return n.button === va.RightClick ? !1 : (r?.({ event: n }), !0);
 	}
 }];
-var _a = {
+var ba = {
 	cancel: { name: "touchcancel" },
 	move: { name: "touchmove" },
 	end: { name: "touchend" }
-}, va = class extends da {
+}, xa = class extends ma {
 	constructor(e) {
-		super(e, _a);
+		super(e, ba);
 	}
 	static setup() {
-		return window.addEventListener(_a.move.name, e, {
+		return window.addEventListener(ba.move.name, e, {
 			capture: !1,
 			passive: !1
 		}), function() {
-			window.removeEventListener(_a.move.name, e);
+			window.removeEventListener(ba.move.name, e);
 		};
 		function e() {}
 	}
 };
-va.activators = [{
+xa.activators = [{
 	eventName: "onTouchStart",
 	handler: (e, t) => {
 		let { nativeEvent: n } = e, { onActivation: r } = t, { touches: i } = n;
 		return i.length > 1 ? !1 : (r?.({ event: n }), !0);
 	}
 }];
-var ya;
+var Sa;
 (function(e) {
 	e[e.Pointer = 0] = "Pointer", e[e.DraggableRect = 1] = "DraggableRect";
-})(ya ||= {});
-var ba;
+})(Sa ||= {});
+var Ca;
 (function(e) {
 	e[e.TreeOrder = 0] = "TreeOrder", e[e.ReversedTreeOrder = 1] = "ReversedTreeOrder";
-})(ba ||= {});
-function xa(e) {
-	let { acceleration: t, activator: n = ya.Pointer, canScroll: r, draggingRect: i, enabled: a, interval: o = 5, order: s = ba.TreeOrder, pointerCoordinates: c, scrollableAncestors: l, scrollableAncestorRects: u, delta: d, threshold: f } = e, p = Ca({
+})(Ca ||= {});
+function wa(e) {
+	let { acceleration: t, activator: n = Sa.Pointer, canScroll: r, draggingRect: i, enabled: a, interval: o = 5, order: s = Ca.TreeOrder, pointerCoordinates: c, scrollableAncestors: l, scrollableAncestorRects: u, delta: d, threshold: f } = e, p = Ea({
 		delta: d,
 		disabled: !a
-	}), [m, h] = zr(), g = (0, S.useRef)({
+	}), [m, h] = Hr(), g = (0, S.useRef)({
 		x: 0,
 		y: 0
 	}), _ = (0, S.useRef)({
@@ -20124,13 +20333,13 @@ function xa(e) {
 		y: 0
 	}), v = (0, S.useMemo)(() => {
 		switch (n) {
-			case ya.Pointer: return c ? {
+			case Sa.Pointer: return c ? {
 				top: c.y,
 				bottom: c.y,
 				left: c.x,
 				right: c.x
 			} : null;
-			case ya.DraggableRect: return i;
+			case Sa.DraggableRect: return i;
 		}
 	}, [
 		n,
@@ -20141,7 +20350,7 @@ function xa(e) {
 		if (!e) return;
 		let t = g.current.x * _.current.x, n = g.current.y * _.current.y;
 		e.scrollBy(t, n);
-	}, []), x = (0, S.useMemo)(() => s === ba.TreeOrder ? [...l].reverse() : l, [s, l]);
+	}, []), x = (0, S.useMemo)(() => s === Ca.TreeOrder ? [...l].reverse() : l, [s, l]);
 	(0, S.useEffect)(() => {
 		if (!a || !l.length || !v) {
 			h();
@@ -20151,7 +20360,7 @@ function xa(e) {
 			if (r?.(e) === !1) continue;
 			let n = u[l.indexOf(e)];
 			if (!n) continue;
-			let { direction: i, speed: a } = Ki(e, n, v, t, f);
+			let { direction: i, speed: a } = Yi(e, n, v, t, f);
 			for (let e of ["x", "y"]) p[e][i[e]] || (a[e] = 0, i[e] = 0);
 			if (a.x > 0 || a.y > 0) {
 				h(), y.current = e, m(b, o), g.current = a, _.current = i;
@@ -20181,32 +20390,32 @@ function xa(e) {
 		JSON.stringify(f)
 	]);
 }
-var Sa = {
+var Ta = {
 	x: {
-		[Hi.Backward]: !1,
-		[Hi.Forward]: !1
+		[Gi.Backward]: !1,
+		[Gi.Forward]: !1
 	},
 	y: {
-		[Hi.Backward]: !1,
-		[Hi.Forward]: !1
+		[Gi.Backward]: !1,
+		[Gi.Forward]: !1
 	}
 };
-function Ca(e) {
-	let { delta: t, disabled: n } = e, r = Ur(t);
-	return Vr((e) => {
-		if (n || !r || !e) return Sa;
+function Ea(e) {
+	let { delta: t, disabled: n } = e, r = Kr(t);
+	return Wr((e) => {
+		if (n || !r || !e) return Ta;
 		let i = {
 			x: Math.sign(t.x - r.x),
 			y: Math.sign(t.y - r.y)
 		};
 		return {
 			x: {
-				[Hi.Backward]: e.x[Hi.Backward] || i.x === -1,
-				[Hi.Forward]: e.x[Hi.Forward] || i.x === 1
+				[Gi.Backward]: e.x[Gi.Backward] || i.x === -1,
+				[Gi.Forward]: e.x[Gi.Forward] || i.x === 1
 			},
 			y: {
-				[Hi.Backward]: e.y[Hi.Backward] || i.y === -1,
-				[Hi.Forward]: e.y[Hi.Forward] || i.y === 1
+				[Gi.Backward]: e.y[Gi.Backward] || i.y === -1,
+				[Gi.Forward]: e.y[Gi.Forward] || i.y === 1
 			}
 		};
 	}, [
@@ -20215,11 +20424,11 @@ function Ca(e) {
 		r
 	]);
 }
-function wa(e, t) {
+function Da(e, t) {
 	let n = t == null ? void 0 : e.get(t), r = n ? n.node.current : null;
-	return Vr((e) => t == null ? null : r ?? e ?? null, [r, t]);
+	return Wr((e) => t == null ? null : r ?? e ?? null, [r, t]);
 }
-function Ta(e, t) {
+function Oa(e, t) {
 	return (0, S.useMemo)(() => e.reduce((e, n) => {
 		let { sensor: r } = n, i = r.activators.map((e) => ({
 			eventName: e.eventName,
@@ -20228,21 +20437,21 @@ function Ta(e, t) {
 		return [...e, ...i];
 	}, []), [e, t]);
 }
-var Ea;
+var ka;
 (function(e) {
 	e[e.Always = 0] = "Always", e[e.BeforeDragging = 1] = "BeforeDragging", e[e.WhileDragging = 2] = "WhileDragging";
-})(Ea ||= {});
-var Da;
+})(ka ||= {});
+var Aa;
 (function(e) {
 	e.Optimized = "optimized";
-})(Da ||= {});
-var Oa = /* @__PURE__ */ new Map();
-function ka(e, t) {
-	let { dragging: n, dependencies: r, config: i } = t, [a, o] = (0, S.useState)(null), { frequency: s, measure: c, strategy: l } = i, u = (0, S.useRef)(e), d = g(), f = Br(d), p = (0, S.useCallback)(function(e) {
+})(Aa ||= {});
+var ja = /* @__PURE__ */ new Map();
+function Ma(e, t) {
+	let { dragging: n, dependencies: r, config: i } = t, [a, o] = (0, S.useState)(null), { frequency: s, measure: c, strategy: l } = i, u = (0, S.useRef)(e), d = g(), f = Ur(d), p = (0, S.useCallback)(function(e) {
 		e === void 0 && (e = []), !f.current && o((t) => t === null ? e : t.concat(e.filter((e) => !t.includes(e))));
-	}, [f]), m = (0, S.useRef)(null), h = Vr((t) => {
-		if (d && !n) return Oa;
-		if (!t || t === Oa || u.current !== e || a != null) {
+	}, [f]), m = (0, S.useRef)(null), h = Wr((t) => {
+		if (d && !n) return ja;
+		if (!t || t === ja || u.current !== e || a != null) {
 			let t = /* @__PURE__ */ new Map();
 			for (let n of e) {
 				if (!n) continue;
@@ -20250,7 +20459,7 @@ function ka(e, t) {
 					t.set(n.id, n.rect.current);
 					continue;
 				}
-				let e = n.node.current, r = e ? new $i(c(e), e) : null;
+				let e = n.node.current, r = e ? new na(c(e), e) : null;
 				n.rect.current = r, r && t.set(n.id, r);
 			}
 			return t;
@@ -20285,39 +20494,39 @@ function ka(e, t) {
 	};
 	function g() {
 		switch (l) {
-			case Ea.Always: return !1;
-			case Ea.BeforeDragging: return n;
+			case ka.Always: return !1;
+			case ka.BeforeDragging: return n;
 			default: return !n;
 		}
 	}
 }
-function Aa(e, t) {
-	return Vr((n) => e ? n || (typeof t == "function" ? t(e) : e) : null, [t, e]);
+function Na(e, t) {
+	return Wr((n) => e ? n || (typeof t == "function" ? t(e) : e) : null, [t, e]);
 }
-function ja(e, t) {
-	return Aa(e, t);
+function Pa(e, t) {
+	return Na(e, t);
 }
-function Ma(e) {
-	let { callback: t, disabled: n } = e, r = Rr(t), i = (0, S.useMemo)(() => {
+function Fa(e) {
+	let { callback: t, disabled: n } = e, r = Vr(t), i = (0, S.useMemo)(() => {
 		if (n || typeof window > "u" || window.MutationObserver === void 0) return;
 		let { MutationObserver: e } = window;
 		return new e(r);
 	}, [r, n]);
 	return (0, S.useEffect)(() => () => i?.disconnect(), [i]), i;
 }
-function Na(e) {
-	let { callback: t, disabled: n } = e, r = Rr(t), i = (0, S.useMemo)(() => {
+function Ia(e) {
+	let { callback: t, disabled: n } = e, r = Vr(t), i = (0, S.useMemo)(() => {
 		if (n || typeof window > "u" || window.ResizeObserver === void 0) return;
 		let { ResizeObserver: e } = window;
 		return new e(r);
 	}, [n]);
 	return (0, S.useEffect)(() => () => i?.disconnect(), [i]), i;
 }
-function Pa(e) {
-	return new $i(H(e), e);
+function La(e) {
+	return new na(Pi(e), e);
 }
-function Fa(e, t, n) {
-	t === void 0 && (t = Pa);
+function Ra(e, t, n) {
+	t === void 0 && (t = La);
 	let [r, i] = (0, S.useState)(null);
 	function a() {
 		i((r) => {
@@ -20327,7 +20536,7 @@ function Fa(e, t, n) {
 			return JSON.stringify(r) === JSON.stringify(i) ? r : i;
 		});
 	}
-	let o = Ma({ callback(t) {
+	let o = Fa({ callback(t) {
 		if (e) for (let n of t) {
 			let { type: t, target: r } = n;
 			if (t === "childList" && r instanceof HTMLElement && r.contains(e)) {
@@ -20335,36 +20544,36 @@ function Fa(e, t, n) {
 				break;
 			}
 		}
-	} }), s = Na({ callback: a });
-	return Lr(() => {
+	} }), s = Ia({ callback: a });
+	return Br(() => {
 		a(), e ? (s?.observe(e), o?.observe(document.body, {
 			childList: !0,
 			subtree: !0
 		})) : (s?.disconnect(), o?.disconnect());
 	}, [e]), r;
 }
-function Ia(e) {
-	return Di(e, Aa(e));
+function za(e) {
+	return Ai(e, Na(e));
 }
-var La = [];
-function Ra(e) {
-	let t = (0, S.useRef)(e), n = Vr((n) => e ? n && n !== La && e && t.current && e.parentNode === t.current.parentNode ? n : Ii(e) : La, [e]);
+var Ba = [];
+function Va(e) {
+	let t = (0, S.useRef)(e), n = Wr((n) => e ? n && n !== Ba && e && t.current && e.parentNode === t.current.parentNode ? n : zi(e) : Ba, [e]);
 	return (0, S.useEffect)(() => {
 		t.current = e;
 	}, [e]), n;
 }
-function za(e) {
+function Ha(e) {
 	let [t, n] = (0, S.useState)(null), r = (0, S.useRef)(e), i = (0, S.useCallback)((e) => {
-		let t = Ri(e.target);
-		t && n((e) => e ? (e.set(t, Vi(t)), new Map(e)) : null);
+		let t = Vi(e.target);
+		t && n((e) => e ? (e.set(t, Wi(t)), new Map(e)) : null);
 	}, []);
 	return (0, S.useEffect)(() => {
 		let t = r.current;
 		if (e !== t) {
 			a(t);
 			let o = e.map((e) => {
-				let t = Ri(e);
-				return t ? (t.addEventListener("scroll", i, { passive: !0 }), [t, Vi(t)]) : null;
+				let t = Vi(e);
+				return t ? (t.addEventListener("scroll", i, { passive: !0 }), [t, Wi(t)]) : null;
 			}).filter((e) => e != null);
 			n(o.length ? new Map(o) : null), r.current = e;
 		}
@@ -20373,24 +20582,24 @@ function za(e) {
 		};
 		function a(e) {
 			e.forEach((e) => {
-				Ri(e)?.removeEventListener("scroll", i);
+				Vi(e)?.removeEventListener("scroll", i);
 			});
 		}
-	}, [i, e]), (0, S.useMemo)(() => e.length ? t ? Array.from(t.values()).reduce((e, t) => qr(e, t), gi) : Ji(e) : gi, [e, t]);
+	}, [i, e]), (0, S.useMemo)(() => e.length ? t ? Array.from(t.values()).reduce((e, t) => Xr(e, t), yi) : Zi(e) : yi, [e, t]);
 }
-function Ba(e, t) {
+function Ua(e, t) {
 	t === void 0 && (t = []);
 	let n = (0, S.useRef)(null);
 	return (0, S.useEffect)(() => {
 		n.current = null;
 	}, t), (0, S.useEffect)(() => {
-		let t = e !== gi;
+		let t = e !== yi;
 		t && !n.current && (n.current = e), !t && n.current && (n.current = null);
-	}, [e]), n.current ? Jr(e, n.current) : gi;
+	}, [e]), n.current ? Zr(e, n.current) : yi;
 }
-function Va(e) {
+function Wa(e) {
 	(0, S.useEffect)(() => {
-		if (!kr) return;
+		if (!Mr) return;
 		let t = e.map((e) => {
 			let { sensor: t } = e;
 			return t.setup == null ? void 0 : t.setup();
@@ -20403,7 +20612,7 @@ function Va(e) {
 		return t;
 	}));
 }
-function Ha(e, t) {
+function Ga(e, t) {
 	return (0, S.useMemo)(() => e.reduce((e, n) => {
 		let { eventName: r, handler: i } = n;
 		return e[r] = (e) => {
@@ -20411,30 +20620,30 @@ function Ha(e, t) {
 		}, e;
 	}, {}), [e, t]);
 }
-function Ua(e) {
-	return (0, S.useMemo)(() => e ? Ni(e) : null, [e]);
+function Ka(e) {
+	return (0, S.useMemo)(() => e ? Ii(e) : null, [e]);
 }
-var Wa = [];
-function Ga(e, t) {
-	t === void 0 && (t = H);
-	let [n] = e, r = Ua(n ? Mr(n) : null), [i, a] = (0, S.useState)(Wa);
+var qa = [];
+function Ja(e, t) {
+	t === void 0 && (t = Pi);
+	let [n] = e, r = Ka(n ? Fr(n) : null), [i, a] = (0, S.useState)(qa);
 	function o() {
-		a(() => e.length ? e.map((e) => Ui(e) ? r : new $i(t(e), e)) : Wa);
+		a(() => e.length ? e.map((e) => Ki(e) ? r : new na(t(e), e)) : qa);
 	}
-	let s = Na({ callback: o });
-	return Lr(() => {
+	let s = Ia({ callback: o });
+	return Br(() => {
 		s?.disconnect(), o(), e.forEach((e) => s?.observe(e));
 	}, [e]), i;
 }
-function Ka(e) {
+function Ya(e) {
 	if (!e) return null;
 	if (e.children.length > 1) return e;
 	let t = e.children[0];
-	return Pr(t) ? t : e;
+	return Lr(t) ? t : e;
 }
-function qa(e) {
-	let { measure: t } = e, [n, r] = (0, S.useState)(null), i = Na({ callback: (0, S.useCallback)((e) => {
-		for (let { target: n } of e) if (Pr(n)) {
+function Xa(e) {
+	let { measure: t } = e, [n, r] = (0, S.useState)(null), i = Ia({ callback: (0, S.useCallback)((e) => {
+		for (let { target: n } of e) if (Lr(n)) {
 			r((e) => {
 				let r = t(n);
 				return e ? {
@@ -20445,8 +20654,8 @@ function qa(e) {
 			});
 			break;
 		}
-	}, [t]) }), [a, o] = Hr((0, S.useCallback)((e) => {
-		let n = Ka(e);
+	}, [t]) }), [a, o] = Gr((0, S.useCallback)((e) => {
+		let n = Ya(e);
 		i?.disconnect(), n && i?.observe(n), r(n ? t(n) : null);
 	}, [t, i]));
 	return (0, S.useMemo)(() => ({
@@ -20459,21 +20668,21 @@ function qa(e) {
 		o
 	]);
 }
-var Ja = [{
-	sensor: pa,
+var Za = [{
+	sensor: ga,
 	options: {}
 }, {
-	sensor: ca,
+	sensor: da,
 	options: {}
-}], Ya = { current: {} }, Xa = {
-	draggable: { measure: Mi },
+}], Qa = { current: {} }, $a = {
+	draggable: { measure: Fi },
 	droppable: {
-		measure: Mi,
-		strategy: Ea.WhileDragging,
-		frequency: Da.Optimized
+		measure: Fi,
+		strategy: ka.WhileDragging,
+		frequency: Aa.Optimized
 	},
-	dragOverlay: { measure: H }
-}, Za = class extends Map {
+	dragOverlay: { measure: Pi }
+}, eo = class extends Map {
 	get(e) {
 		return e == null ? void 0 : super.get(e) ?? void 0;
 	}
@@ -20489,7 +20698,7 @@ var Ja = [{
 	getNodeFor(e) {
 		return this.get(e)?.node.current ?? void 0;
 	}
-}, Qa = {
+}, to = {
 	activatorEvent: null,
 	active: null,
 	activeNode: null,
@@ -20498,31 +20707,31 @@ var Ja = [{
 	containerNodeRect: null,
 	draggableNodes: /* @__PURE__ */ new Map(),
 	droppableRects: /* @__PURE__ */ new Map(),
-	droppableContainers: /* @__PURE__ */ new Za(),
+	droppableContainers: /* @__PURE__ */ new eo(),
 	over: null,
 	dragOverlay: {
 		nodeRef: { current: null },
 		rect: null,
-		setRef: pi
+		setRef: gi
 	},
 	scrollableAncestors: [],
 	scrollableAncestorRects: [],
-	measuringConfiguration: Xa,
-	measureDroppableContainers: pi,
+	measuringConfiguration: $a,
+	measureDroppableContainers: gi,
 	windowRect: null,
 	measuringScheduled: !1
-}, $a = {
+}, no = {
 	activatorEvent: null,
 	activators: [],
 	active: null,
 	activeNodeRect: null,
 	ariaDescribedById: { draggable: "" },
-	dispatch: pi,
+	dispatch: gi,
 	draggableNodes: /* @__PURE__ */ new Map(),
 	over: null,
-	measureDroppableContainers: pi
-}, eo = /* @__PURE__ */ (0, S.createContext)($a), to = /* @__PURE__ */ (0, S.createContext)(Qa);
-function no() {
+	measureDroppableContainers: gi
+}, ro = /* @__PURE__ */ (0, S.createContext)(no), io = /* @__PURE__ */ (0, S.createContext)(to);
+function ao() {
 	return {
 		draggable: {
 			active: null,
@@ -20536,12 +20745,12 @@ function no() {
 				y: 0
 			}
 		},
-		droppable: { containers: new Za() }
+		droppable: { containers: new eo() }
 	};
 }
-function ro(e, t) {
+function oo(e, t) {
 	switch (t.type) {
-		case fi.DragStart: return {
+		case hi.DragStart: return {
 			...e,
 			draggable: {
 				...e.draggable,
@@ -20549,7 +20758,7 @@ function ro(e, t) {
 				active: t.active
 			}
 		};
-		case fi.DragMove: return e.draggable.active == null ? e : {
+		case hi.DragMove: return e.draggable.active == null ? e : {
 			...e,
 			draggable: {
 				...e.draggable,
@@ -20559,8 +20768,8 @@ function ro(e, t) {
 				}
 			}
 		};
-		case fi.DragEnd:
-		case fi.DragCancel: return {
+		case hi.DragEnd:
+		case hi.DragCancel: return {
 			...e,
 			draggable: {
 				...e.draggable,
@@ -20575,8 +20784,8 @@ function ro(e, t) {
 				}
 			}
 		};
-		case fi.RegisterDroppable: {
-			let { element: n } = t, { id: r } = n, i = new Za(e.droppable.containers);
+		case hi.RegisterDroppable: {
+			let { element: n } = t, { id: r } = n, i = new eo(e.droppable.containers);
 			return i.set(r, n), {
 				...e,
 				droppable: {
@@ -20585,10 +20794,10 @@ function ro(e, t) {
 				}
 			};
 		}
-		case fi.SetDroppableDisabled: {
+		case hi.SetDroppableDisabled: {
 			let { id: n, key: r, disabled: i } = t, a = e.droppable.containers.get(n);
 			if (!a || r !== a.key) return e;
-			let o = new Za(e.droppable.containers);
+			let o = new eo(e.droppable.containers);
 			return o.set(n, {
 				...a,
 				disabled: i
@@ -20600,10 +20809,10 @@ function ro(e, t) {
 				}
 			};
 		}
-		case fi.UnregisterDroppable: {
+		case hi.UnregisterDroppable: {
 			let { id: n, key: r } = t, i = e.droppable.containers.get(n);
 			if (!i || r !== i.key) return e;
-			let a = new Za(e.droppable.containers);
+			let a = new eo(e.droppable.containers);
 			return a.delete(n), {
 				...e,
 				droppable: {
@@ -20615,11 +20824,11 @@ function ro(e, t) {
 		default: return e;
 	}
 }
-function io(e) {
-	let { disabled: t } = e, { active: n, activatorEvent: r, draggableNodes: i } = (0, S.useContext)(eo), a = Ur(r), o = Ur(n?.id);
+function so(e) {
+	let { disabled: t } = e, { active: n, activatorEvent: r, draggableNodes: i } = (0, S.useContext)(ro), a = Kr(r), o = Kr(n?.id);
 	return (0, S.useEffect)(() => {
 		if (!t && !r && a && o != null) {
-			if (!Xr(a) || document.activeElement === a.target) return;
+			if (!$r(a) || document.activeElement === a.target) return;
 			let e = i.get(o);
 			if (!e) return;
 			let { activatorNode: t, node: n } = e;
@@ -20627,7 +20836,7 @@ function io(e) {
 			requestAnimationFrame(() => {
 				for (let e of [t.current, n.current]) {
 					if (!e) continue;
-					let t = ti(e);
+					let t = ii(e);
 					if (t) {
 						t.focus();
 						break;
@@ -20643,25 +20852,25 @@ function io(e) {
 		a
 	]), null;
 }
-function ao(e, t) {
+function co(e, t) {
 	let { transform: n, ...r } = t;
 	return e != null && e.length ? e.reduce((e, t) => t({
 		transform: e,
 		...r
 	}), n) : n;
 }
-function oo(e) {
+function W(e) {
 	return (0, S.useMemo)(() => ({
 		draggable: {
-			...Xa.draggable,
+			...$a.draggable,
 			...e?.draggable
 		},
 		droppable: {
-			...Xa.droppable,
+			...$a.droppable,
 			...e?.droppable
 		},
 		dragOverlay: {
-			...Xa.dragOverlay,
+			...$a.dragOverlay,
 			...e?.dragOverlay
 		}
 	}), [
@@ -20670,12 +20879,12 @@ function oo(e) {
 		e?.dragOverlay
 	]);
 }
-function so(e) {
+function G(e) {
 	let { activeNode: t, measure: n, initialRect: r, config: i = !0 } = e, a = (0, S.useRef)(!1), { x: o, y: s } = typeof i == "boolean" ? {
 		x: i,
 		y: i
 	} : i;
-	Lr(() => {
+	Br(() => {
 		if (!o && !s || !t) {
 			a.current = !1;
 			return;
@@ -20683,9 +20892,9 @@ function so(e) {
 		if (a.current || !r) return;
 		let e = t?.node.current;
 		if (!e || e.isConnected === !1) return;
-		let i = Di(n(e), r);
+		let i = Ai(n(e), r);
 		if (o || (i.x = 0), s || (i.y = 0), a.current = !0, Math.abs(i.x) > 0 || Math.abs(i.y) > 0) {
-			let t = Li(e);
+			let t = Bi(e);
 			t && t.scrollBy({
 				top: i.y,
 				left: i.x
@@ -20699,34 +20908,34 @@ function so(e) {
 		n
 	]);
 }
-var co = /* @__PURE__ */ (0, S.createContext)({
-	...gi,
+var lo = /* @__PURE__ */ (0, S.createContext)({
+	...yi,
 	scaleX: 1,
 	scaleY: 1
-}), W;
+}), uo;
 (function(e) {
 	e[e.Uninitialized = 0] = "Uninitialized", e[e.Initializing = 1] = "Initializing", e[e.Initialized = 2] = "Initialized";
-})(W ||= {});
-var G = /* @__PURE__ */ (0, S.memo)(function(e) {
-	let { id: t, accessibility: n, autoScroll: r = !0, children: i, sensors: a = Ja, collisionDetection: o = Ti, measuring: s, modifiers: c, ...l } = e, [u, d] = (0, S.useReducer)(ro, void 0, no), [f, p] = ci(), [m, h] = (0, S.useState)(W.Uninitialized), g = m === W.Initialized, { draggable: { active: _, nodes: v, translate: y }, droppable: { containers: b } } = u, x = _ == null ? null : v.get(_), C = (0, S.useRef)({
+})(uo ||= {});
+var fo = /* @__PURE__ */ (0, S.memo)(function(e) {
+	let { id: t, accessibility: n, autoScroll: r = !0, children: i, sensors: a = Za, collisionDetection: o = Oi, measuring: s, modifiers: c, ...l } = e, [u, d] = (0, S.useReducer)(oo, void 0, ao), [f, p] = di(), [m, h] = (0, S.useState)(uo.Uninitialized), g = m === uo.Initialized, { draggable: { active: _, nodes: v, translate: y }, droppable: { containers: b } } = u, x = _ == null ? null : v.get(_), C = (0, S.useRef)({
 		initial: null,
 		translated: null
 	}), w = (0, S.useMemo)(() => _ == null ? null : {
 		id: _,
-		data: x?.data ?? Ya,
+		data: x?.data ?? Qa,
 		rect: C
-	}, [_, x]), T = (0, S.useRef)(null), [ee, te] = (0, S.useState)(null), [E, D] = (0, S.useState)(null), ne = Br(l, Object.values(l)), re = Gr("DndDescribedBy", t), ie = (0, S.useMemo)(() => b.getEnabled(), [b]), ae = oo(s), { droppableRects: oe, measureDroppableContainers: se, measuringScheduled: O } = ka(ie, {
+	}, [_, x]), T = (0, S.useRef)(null), [ee, te] = (0, S.useState)(null), [E, D] = (0, S.useState)(null), ne = Ur(l, Object.values(l)), re = Jr("DndDescribedBy", t), ie = (0, S.useMemo)(() => b.getEnabled(), [b]), ae = W(s), { droppableRects: oe, measureDroppableContainers: se, measuringScheduled: O } = Ma(ie, {
 		dragging: g,
 		dependencies: [y.x, y.y],
 		config: ae.droppable
-	}), k = wa(v, _), ce = (0, S.useMemo)(() => E ? Qr(E) : null, [E]), le = Ne(), A = ja(k, ae.draggable.measure);
-	so({
+	}), k = Da(v, _), ce = (0, S.useMemo)(() => E ? ti(E) : null, [E]), le = Ne(), A = Pa(k, ae.draggable.measure);
+	G({
 		activeNode: _ == null ? null : v.get(_),
 		config: le.layoutShiftCompensation,
 		initialRect: A,
 		measure: ae.draggable.measure
 	});
-	let ue = Fa(k, ae.draggable.measure, A), j = Fa(k ? k.parentElement : null), M = (0, S.useRef)({
+	let ue = Ra(k, ae.draggable.measure, A), j = Ra(k ? k.parentElement : null), M = (0, S.useRef)({
 		activatorEvent: null,
 		active: null,
 		activeNode: k,
@@ -20740,7 +20949,7 @@ var G = /* @__PURE__ */ (0, S.memo)(function(e) {
 		over: null,
 		scrollableAncestors: [],
 		scrollAdjustedTranslate: null
-	}), de = b.getNodeFor(M.current.over?.id), fe = qa({ measure: ae.dragOverlay.measure }), pe = fe.nodeRef.current ?? k, N = g ? fe.rect ?? ue : null, me = !!(fe.nodeRef.current && fe.rect), he = Ia(me ? null : ue), ge = Ua(pe ? Mr(pe) : null), _e = Ra(g ? de ?? k : null), ve = Ga(_e), ye = ao(c, {
+	}), de = b.getNodeFor(M.current.over?.id), fe = Xa({ measure: ae.dragOverlay.measure }), pe = fe.nodeRef.current ?? k, N = g ? fe.rect ?? ue : null, me = !!(fe.nodeRef.current && fe.rect), he = za(me ? null : ue), ge = Ka(pe ? Fr(pe) : null), _e = Va(g ? de ?? k : null), ve = Ja(_e), ye = co(c, {
 		transform: {
 			x: y.x - he.x,
 			y: y.y - he.y,
@@ -20757,13 +20966,13 @@ var G = /* @__PURE__ */ (0, S.memo)(function(e) {
 		scrollableAncestors: _e,
 		scrollableAncestorRects: ve,
 		windowRect: ge
-	}), P = ce ? qr(ce, y) : null, be = za(_e), xe = Ba(be), Se = Ba(be, [ue]), Ce = qr(ye, xe), we = N ? ki(N, ye) : null, Te = w && we ? o({
+	}), P = ce ? Xr(ce, y) : null, be = Ha(_e), xe = Ua(be), Se = Ua(be, [ue]), Ce = Xr(ye, xe), we = N ? V(N, ye) : null, Te = w && we ? o({
 		active: w,
 		collisionRect: we,
 		droppableRects: oe,
 		droppableContainers: ie,
 		pointerCoordinates: P
-	}) : null, Ee = xi(Te, "id"), [De, F] = (0, S.useState)(null), I = Ei(me ? ye : qr(ye, Se), De?.rect ?? null, ue), Oe = (0, S.useRef)(null), ke = (0, S.useCallback)((e, t) => {
+	}) : null, Ee = wi(Te, "id"), [De, F] = (0, S.useState)(null), I = ki(me ? ye : Xr(ye, Se), De?.rect ?? null, ue), Oe = (0, S.useRef)(null), ke = (0, S.useCallback)((e, t) => {
 		let { sensor: n, options: r } = t;
 		if (T.current == null) return;
 		let i = v.get(T.current);
@@ -20810,8 +21019,8 @@ var G = /* @__PURE__ */ (0, S.memo)(function(e) {
 					}
 				};
 				(0, An.unstable_batchedUpdates)(() => {
-					r?.(i), h(W.Initializing), d({
-						type: fi.DragStart,
+					r?.(i), h(uo.Initializing), d({
+						type: hi.DragStart,
 						initialCoordinates: e,
 						active: t
 					}), f({
@@ -20822,12 +21031,12 @@ var G = /* @__PURE__ */ (0, S.memo)(function(e) {
 			},
 			onMove(e) {
 				d({
-					type: fi.DragMove,
+					type: hi.DragMove,
 					coordinates: e
 				});
 			},
-			onEnd: o(fi.DragEnd),
-			onCancel: o(fi.DragCancel)
+			onEnd: o(hi.DragEnd),
+			onCancel: o(hi.DragCancel)
 		});
 		function o(e) {
 			return async function() {
@@ -20840,11 +21049,11 @@ var G = /* @__PURE__ */ (0, S.memo)(function(e) {
 						collisions: n,
 						delta: i,
 						over: r
-					}, e === fi.DragEnd && typeof s == "function" && await Promise.resolve(s(o)) && (e = fi.DragCancel);
+					}, e === hi.DragEnd && typeof s == "function" && await Promise.resolve(s(o)) && (e = hi.DragCancel);
 				}
 				T.current = null, (0, An.unstable_batchedUpdates)(() => {
-					d({ type: e }), h(W.Uninitialized), F(null), te(null), D(null), Oe.current = null;
-					let t = e === fi.DragEnd ? "onDragEnd" : "onDragCancel";
+					d({ type: e }), h(uo.Uninitialized), F(null), te(null), D(null), Oe.current = null;
+					let t = e === hi.DragEnd ? "onDragEnd" : "onDragCancel";
 					if (o) {
 						let e = ne.current[t];
 						e?.(o), f({
@@ -20855,14 +21064,14 @@ var G = /* @__PURE__ */ (0, S.memo)(function(e) {
 				});
 			};
 		}
-	}, [v]), Ae = Ta(a, (0, S.useCallback)((e, t) => (n, r) => {
+	}, [v]), Ae = Oa(a, (0, S.useCallback)((e, t) => (n, r) => {
 		let i = n.nativeEvent, a = v.get(r);
 		if (T.current !== null || !a || i.dndKit || i.defaultPrevented) return;
 		let o = { active: a };
 		e(n, t.options, o) === !0 && (i.dndKit = { capturedBy: t.sensor }, T.current = r, ke(n, t));
 	}, [v, ke]));
-	Va(a), Lr(() => {
-		ue && m === W.Initializing && h(W.Initialized);
+	Wa(a), Br(() => {
+		ue && m === uo.Initializing && h(uo.Initialized);
 	}, [ue, m]), (0, S.useEffect)(() => {
 		let { onDragMove: e } = ne.current, { active: t, activatorEvent: n, collisions: r, over: i } = M.current;
 		if (!t || !n) return;
@@ -20906,7 +21115,7 @@ var G = /* @__PURE__ */ (0, S.memo)(function(e) {
 				event: c
 			});
 		});
-	}, [Ee]), Lr(() => {
+	}, [Ee]), Br(() => {
 		M.current = {
 			activatorEvent: E,
 			active: w,
@@ -20938,7 +21147,7 @@ var G = /* @__PURE__ */ (0, S.memo)(function(e) {
 		De,
 		_e,
 		Ce
-	]), xa({
+	]), wa({
 		...le,
 		delta: y,
 		draggingRect: we,
@@ -21003,7 +21212,7 @@ var G = /* @__PURE__ */ (0, S.memo)(function(e) {
 		De,
 		se
 	]);
-	return S.createElement(oi.Provider, { value: p }, S.createElement(eo.Provider, { value: Me }, S.createElement(to.Provider, { value: je }, S.createElement(co.Provider, { value: I }, i)), S.createElement(io, { disabled: n?.restoreFocus === !1 })), S.createElement(di, {
+	return S.createElement(li.Provider, { value: p }, S.createElement(ro.Provider, { value: Me }, S.createElement(io.Provider, { value: je }, S.createElement(lo.Provider, { value: I }, i)), S.createElement(so, { disabled: n?.restoreFocus === !1 })), S.createElement(mi, {
 		...n,
 		hiddenTextDescribedById: re
 	}));
@@ -21014,10 +21223,10 @@ var G = /* @__PURE__ */ (0, S.memo)(function(e) {
 			enabled: n
 		} : { enabled: n };
 	}
-}), lo = /* @__PURE__ */ (0, S.createContext)(null), uo = "button", fo = "Draggable";
-function po(e) {
-	let { id: t, data: n, disabled: r = !1, attributes: i } = e, a = Gr(fo), { activators: o, activatorEvent: s, active: c, activeNodeRect: l, ariaDescribedById: u, draggableNodes: d, over: f } = (0, S.useContext)(eo), { role: p = uo, roleDescription: m = "draggable", tabIndex: h = 0 } = i ?? {}, g = c?.id === t, _ = (0, S.useContext)(g ? co : lo), [v, y] = Hr(), [b, x] = Hr(), C = Ha(o, t), w = Br(n);
-	return Lr(() => (d.set(t, {
+}), po = /* @__PURE__ */ (0, S.createContext)(null), mo = "button", ho = "Draggable";
+function go(e) {
+	let { id: t, data: n, disabled: r = !1, attributes: i } = e, a = Jr(ho), { activators: o, activatorEvent: s, active: c, activeNodeRect: l, ariaDescribedById: u, draggableNodes: d, over: f } = (0, S.useContext)(ro), { role: p = mo, roleDescription: m = "draggable", tabIndex: h = 0 } = i ?? {}, g = c?.id === t, _ = (0, S.useContext)(g ? lo : po), [v, y] = Gr(), [b, x] = Gr(), C = Ga(o, t), w = Ur(n);
+	return Br(() => (d.set(t, {
 		id: t,
 		key: a,
 		node: v,
@@ -21034,7 +21243,7 @@ function po(e) {
 			role: p,
 			tabIndex: h,
 			"aria-disabled": r,
-			"aria-pressed": g && p === uo ? !0 : void 0,
+			"aria-pressed": g && p === mo ? !0 : void 0,
 			"aria-roledescription": m,
 			"aria-describedby": u.draggable
 		}), [
@@ -21054,15 +21263,15 @@ function po(e) {
 		transform: _
 	};
 }
-function mo() {
-	return (0, S.useContext)(to);
+function _o() {
+	return (0, S.useContext)(io);
 }
-var ho = "Droppable", go = { timeout: 25 };
-function _o(e) {
-	let { data: t, disabled: n = !1, id: r, resizeObserverConfig: i } = e, a = Gr(ho), { active: o, dispatch: s, over: c, measureDroppableContainers: l } = (0, S.useContext)(eo), u = (0, S.useRef)({ disabled: n }), d = (0, S.useRef)(!1), f = (0, S.useRef)(null), p = (0, S.useRef)(null), { disabled: m, updateMeasurementsFor: h, timeout: g } = {
-		...go,
+var vo = "Droppable", yo = { timeout: 25 };
+function bo(e) {
+	let { data: t, disabled: n = !1, id: r, resizeObserverConfig: i } = e, a = Jr(vo), { active: o, dispatch: s, over: c, measureDroppableContainers: l } = (0, S.useContext)(ro), u = (0, S.useRef)({ disabled: n }), d = (0, S.useRef)(!1), f = (0, S.useRef)(null), p = (0, S.useRef)(null), { disabled: m, updateMeasurementsFor: h, timeout: g } = {
+		...yo,
 		...i
-	}, _ = Br(h ?? r), v = Na({
+	}, _ = Ur(h ?? r), v = Ia({
 		callback: (0, S.useCallback)(() => {
 			if (!d.current) {
 				d.current = !0;
@@ -21073,13 +21282,13 @@ function _o(e) {
 			}, g);
 		}, [g]),
 		disabled: m || !o
-	}), [y, b] = Hr((0, S.useCallback)((e, t) => {
+	}), [y, b] = Gr((0, S.useCallback)((e, t) => {
 		v && (t && (v.unobserve(t), d.current = !1), e && v.observe(e));
-	}, [v])), x = Br(t);
+	}, [v])), x = Ur(t);
 	return (0, S.useEffect)(() => {
 		!v || !y.current || (v.disconnect(), d.current = !1, v.observe(y.current));
 	}, [y, v]), (0, S.useEffect)(() => (s({
-		type: fi.RegisterDroppable,
+		type: hi.RegisterDroppable,
 		element: {
 			id: r,
 			key: a,
@@ -21089,12 +21298,12 @@ function _o(e) {
 			data: x
 		}
 	}), () => s({
-		type: fi.UnregisterDroppable,
+		type: hi.UnregisterDroppable,
 		key: a,
 		id: r
 	})), [r]), (0, S.useEffect)(() => {
 		n !== u.current.disabled && (s({
-			type: fi.SetDroppableDisabled,
+			type: hi.SetDroppableDisabled,
 			id: r,
 			key: a,
 			disabled: n
@@ -21113,9 +21322,9 @@ function _o(e) {
 		setNodeRef: b
 	};
 }
-function vo(e) {
-	let { animation: t, children: n } = e, [r, i] = (0, S.useState)(null), [a, o] = (0, S.useState)(null), s = Ur(n);
-	return !n && !r && s && i(s), Lr(() => {
+function xo(e) {
+	let { animation: t, children: n } = e, [r, i] = (0, S.useState)(null), [a, o] = (0, S.useState)(null), s = Kr(n);
+	return !n && !r && s && i(s), Br(() => {
 		if (!a) return;
 		let e = r?.key, n = r?.props.id;
 		if (e == null || n == null) {
@@ -21131,34 +21340,34 @@ function vo(e) {
 		a
 	]), S.createElement(S.Fragment, null, n, r ? (0, S.cloneElement)(r, { ref: o }) : null);
 }
-var yo = {
+var So = {
 	x: 0,
 	y: 0,
 	scaleX: 1,
 	scaleY: 1
 };
-function bo(e) {
+function Co(e) {
 	let { children: t } = e;
-	return S.createElement(eo.Provider, { value: $a }, S.createElement(co.Provider, { value: yo }, t));
+	return S.createElement(ro.Provider, { value: no }, S.createElement(lo.Provider, { value: So }, t));
 }
-var xo = {
+var wo = {
 	position: "fixed",
 	touchAction: "none"
-}, So = (e) => Xr(e) ? "transform 250ms ease" : void 0, Co = /* @__PURE__ */ (0, S.forwardRef)((e, t) => {
-	let { as: n, activatorEvent: r, adjustScale: i, children: a, className: o, rect: s, style: c, transform: l, transition: u = So } = e;
+}, To = (e) => $r(e) ? "transform 250ms ease" : void 0, Eo = /* @__PURE__ */ (0, S.forwardRef)((e, t) => {
+	let { as: n, activatorEvent: r, adjustScale: i, children: a, className: o, rect: s, style: c, transform: l, transition: u = To } = e;
 	if (!s) return null;
 	let d = i ? l : {
 		...l,
 		scaleX: 1,
 		scaleY: 1
 	}, f = {
-		...xo,
+		...wo,
 		width: s.width,
 		height: s.height,
 		top: s.top,
 		left: s.left,
-		transform: $r.Transform.toString(d),
-		transformOrigin: i && r ? vi(r, s) : void 0,
+		transform: ni.Transform.toString(d),
+		transformOrigin: i && r ? xi(r, s) : void 0,
 		transition: typeof u == "function" ? u(r) : u,
 		...c
 	};
@@ -21167,12 +21376,12 @@ var xo = {
 		style: f,
 		ref: t
 	}, a);
-}), wo = {
+}), Do = {
 	duration: 250,
 	easing: "ease",
 	keyframes: (e) => {
 		let { transform: { initial: t, final: n } } = e;
-		return [{ transform: $r.Transform.toString(t) }, { transform: $r.Transform.toString(n) }];
+		return [{ transform: ni.Transform.toString(t) }, { transform: ni.Transform.toString(n) }];
 	},
 	sideEffects: /* @__PURE__ */ ((e) => (t) => {
 		let { active: n, dragOverlay: r } = t, i = {}, { styles: a, className: o } = e;
@@ -21184,20 +21393,20 @@ var xo = {
 		};
 	})({ styles: { active: { opacity: "0" } } })
 };
-function To(e) {
+function Oo(e) {
 	let { config: t, draggableNodes: n, droppableContainers: r, measuringConfiguration: i } = e;
-	return Rr((e, a) => {
+	return Vr((e, a) => {
 		if (t === null) return;
 		let o = n.get(e);
 		if (!o) return;
 		let s = o.node.current;
 		if (!s) return;
-		let c = Ka(a);
+		let c = Ya(a);
 		if (!c) return;
-		let { transform: l } = Mr(a).getComputedStyle(a), u = Ai(l);
+		let { transform: l } = Fr(a).getComputedStyle(a), u = H(l);
 		if (!u) return;
-		let d = typeof t == "function" ? t : Eo(t);
-		return Zi(s, i.draggable.measure), d({
+		let d = typeof t == "function" ? t : ko(t);
+		return ea(s, i.draggable.measure), d({
 			active: {
 				id: e,
 				data: o.data,
@@ -21215,9 +21424,9 @@ function To(e) {
 		});
 	});
 }
-function Eo(e) {
+function ko(e) {
 	let { duration: t, easing: n, sideEffects: r, keyframes: i } = {
-		...wo,
+		...Do,
 		...e
 	};
 	return (e) => {
@@ -21259,14 +21468,14 @@ function Eo(e) {
 		});
 	};
 }
-var Do = 0;
-function Oo(e) {
+var Ao = 0;
+function jo(e) {
 	return (0, S.useMemo)(() => {
-		if (e != null) return Do++, Do;
+		if (e != null) return Ao++, Ao;
 	}, [e]);
 }
-var ko = /* @__PURE__ */ S.memo((e) => {
-	let { adjustScale: t = !1, children: n, dropAnimation: r, style: i, transition: a, modifiers: o, wrapperElement: s = "div", className: c, zIndex: l = 999 } = e, { activatorEvent: u, active: d, activeNodeRect: f, containerNodeRect: p, draggableNodes: m, droppableContainers: h, dragOverlay: g, over: _, measuringConfiguration: v, scrollableAncestors: y, scrollableAncestorRects: b, windowRect: x } = mo(), C = (0, S.useContext)(co), w = Oo(d?.id), T = ao(o, {
+var Mo = /* @__PURE__ */ S.memo((e) => {
+	let { adjustScale: t = !1, children: n, dropAnimation: r, style: i, transition: a, modifiers: o, wrapperElement: s = "div", className: c, zIndex: l = 999 } = e, { activatorEvent: u, active: d, activeNodeRect: f, containerNodeRect: p, draggableNodes: m, droppableContainers: h, dragOverlay: g, over: _, measuringConfiguration: v, scrollableAncestors: y, scrollableAncestorRects: b, windowRect: x } = _o(), C = (0, S.useContext)(lo), w = jo(d?.id), T = co(o, {
 		activatorEvent: u,
 		active: d,
 		activeNodeRect: f,
@@ -21278,13 +21487,13 @@ var ko = /* @__PURE__ */ S.memo((e) => {
 		scrollableAncestorRects: b,
 		transform: C,
 		windowRect: x
-	}), ee = Aa(f), te = To({
+	}), ee = Na(f), te = Oo({
 		config: r,
 		draggableNodes: m,
 		droppableContainers: h,
 		measuringConfiguration: v
 	}), E = ee ? g.setRef : void 0;
-	return S.createElement(bo, null, S.createElement(vo, { animation: te }, d && w ? S.createElement(Co, {
+	return S.createElement(Co, null, S.createElement(xo, { animation: te }, d && w ? S.createElement(Eo, {
 		key: w,
 		id: d.id,
 		ref: E,
@@ -21303,15 +21512,15 @@ var ko = /* @__PURE__ */ S.memo((e) => {
 });
 //#endregion
 //#region src/components/ElementTree.tsx
-function Ao(e) {
+function No(e) {
 	return e.type === "row" || e.type === "column" || e.type === "grid" ? e.items : e.type === "accordion" ? e.body : e.type === "tabs" ? e.tabs.flatMap((e) => e.content) : null;
 }
-function jo(e, t) {
+function Po(e, t) {
 	if (!e || e.length !== t.length) return !1;
 	for (let n = 0; n < e.length; n++) if (e[n] !== t[n]) return !1;
 	return !0;
 }
-function Mo(e) {
+function Fo(e) {
 	switch (e.type) {
 		case "text": return `"${(e.content ?? "").slice(0, 20)}"`;
 		case "button": return `"${e.label}"`;
@@ -21323,13 +21532,13 @@ function Mo(e) {
 		default: return "";
 	}
 }
-function No(e) {
+function Io(e) {
 	return "n-" + e.join("-");
 }
-function Po(e, t) {
+function Lo(e, t) {
 	return "g-" + e.join("-") + "_" + t;
 }
-function Fo(e) {
+function Ro(e) {
 	if (!e.startsWith("g-")) return null;
 	let t = e.slice(2).split("_");
 	return t.length === 2 ? {
@@ -21337,11 +21546,11 @@ function Fo(e) {
 		index: Number(t[1])
 	} : null;
 }
-function Io(e) {
+function zo(e) {
 	return e.startsWith("n-") ? e.slice(2).split("-").map(Number) : null;
 }
-function Lo({ parentPath: e, index: t, depth: n }) {
-	let { setNodeRef: r, isOver: i } = _o({ id: Po(e, t) });
+function Bo({ parentPath: e, index: t, depth: n }) {
+	let { setNodeRef: r, isOver: i } = bo({ id: Lo(e, t) });
 	return /* @__PURE__ */ (0, P.jsx)("div", {
 		ref: r,
 		className: `tree-drop-gap ${i ? "active" : ""}`,
@@ -21349,14 +21558,14 @@ function Lo({ parentPath: e, index: t, depth: n }) {
 		children: /* @__PURE__ */ (0, P.jsx)("div", { className: "tree-drop-line" })
 	});
 }
-var Ro = (0, S.memo)(function e({ element: t, path: n, selectedPath: r, selectedPaths: i, onSelect: a, depth: o, isDraggingAny: s }) {
-	let c = No(n), l = jo(r, n), u = i.length > 1 && i.some((e) => jo(e, n)), d = Ao(t), f = d !== null, [p, m] = (0, S.useState)(!1), { attributes: h, listeners: g, setNodeRef: _, isDragging: v } = po({
+var Vo = (0, S.memo)(function e({ element: t, path: n, selectedPath: r, selectedPaths: i, onSelect: a, depth: o, isDraggingAny: s }) {
+	let c = Io(n), l = Po(r, n), u = i.length > 1 && i.some((e) => Po(e, n)), d = No(t), f = d !== null, [p, m] = (0, S.useState)(!1), { attributes: h, listeners: g, setNodeRef: _, isDragging: v } = go({
 		id: c,
 		data: {
 			path: n,
 			element: t
 		}
-	}), { setNodeRef: y, isOver: b } = _o({
+	}), { setNodeRef: y, isOver: b } = bo({
 		id: c,
 		data: {
 			path: n,
@@ -21369,7 +21578,7 @@ var Ro = (0, S.memo)(function e({ element: t, path: n, selectedPath: r, selected
 	}, [a, n]), w = (0, S.useCallback)((e) => {
 		e.stopPropagation(), e.preventDefault(), m((e) => !e);
 	}, []), T = n.slice(0, -1);
-	return /* @__PURE__ */ (0, P.jsxs)(P.Fragment, { children: [s ? /* @__PURE__ */ (0, P.jsx)(Lo, {
+	return /* @__PURE__ */ (0, P.jsxs)(P.Fragment, { children: [s ? /* @__PURE__ */ (0, P.jsx)(Bo, {
 		parentPath: T,
 		index: n[n.length - 1],
 		depth: o
@@ -21399,13 +21608,13 @@ var Ro = (0, S.memo)(function e({ element: t, path: n, selectedPath: r, selected
 				}),
 				/* @__PURE__ */ (0, P.jsx)("span", {
 					className: "tree-label",
-					children: Mo(t)
+					children: Fo(t)
 				}),
 				f && d ? /* @__PURE__ */ (0, P.jsx)("span", {
 					className: "tree-badge",
 					children: d.length
 				}) : null,
-				cr(t) ? /* @__PURE__ */ (0, P.jsx)("span", {
+				dr(t) ? /* @__PURE__ */ (0, P.jsx)("span", {
 					className: "tree-error-dot",
 					title: "Has validation errors"
 				}) : null
@@ -21420,7 +21629,7 @@ var Ro = (0, S.memo)(function e({ element: t, path: n, selectedPath: r, selected
 				onSelect: a,
 				depth: o + 1,
 				isDraggingAny: s
-			}, No([...n, c]))), s ? /* @__PURE__ */ (0, P.jsx)(Lo, {
+			}, Io([...n, c]))), s ? /* @__PURE__ */ (0, P.jsx)(Bo, {
 				parentPath: n,
 				index: d.length,
 				depth: o + 1
@@ -21428,14 +21637,14 @@ var Ro = (0, S.memo)(function e({ element: t, path: n, selectedPath: r, selected
 		}) : null]
 	})] });
 });
-function zo({ element: e }) {
+function Ho({ element: e }) {
 	return /* @__PURE__ */ (0, P.jsx)("div", {
 		className: "tree-drag-overlay",
 		children: /* @__PURE__ */ (0, P.jsxs)("div", {
 			className: "tree-item selected",
 			style: { paddingLeft: 8 },
 			children: [
-				Ao(e) ? /* @__PURE__ */ (0, P.jsx)("span", {
+				No(e) ? /* @__PURE__ */ (0, P.jsx)("span", {
 					className: "tree-arrow",
 					children: "▾"
 				}) : /* @__PURE__ */ (0, P.jsx)("span", {
@@ -21448,44 +21657,44 @@ function zo({ element: e }) {
 				}),
 				/* @__PURE__ */ (0, P.jsx)("span", {
 					className: "tree-label",
-					children: Mo(e)
+					children: Fo(e)
 				})
 			]
 		})
 	});
 }
-function Bo(e, t) {
+function Uo(e, t) {
 	let n = t.toLowerCase();
-	if (e.type.toLowerCase().includes(n) || Mo(e).toLowerCase().includes(n)) return !0;
-	let r = Ao(e);
-	return r ? r.some((e) => Bo(e, n)) : !1;
+	if (e.type.toLowerCase().includes(n) || Fo(e).toLowerCase().includes(n)) return !0;
+	let r = No(e);
+	return r ? r.some((e) => Uo(e, n)) : !1;
 }
-function Vo() {
-	let e = N((e) => e.body), t = N((e) => e.selectedPath), n = N((e) => e.selectedPaths), r = N((e) => e.selectElement), i = N((e) => e.moveElementToPath), [a, o] = (0, S.useState)(null), [s, c] = (0, S.useState)(""), l = hi(mi(pa, { activationConstraint: { distance: 8 } })), u = (0, S.useCallback)((e) => {
+function Wo() {
+	let e = N((e) => e.body), t = N((e) => e.selectedPath), n = N((e) => e.selectedPaths), r = N((e) => e.selectElement), i = N((e) => e.moveElementToPath), [a, o] = (0, S.useState)(null), [s, c] = (0, S.useState)(""), l = vi(_i(ga, { activationConstraint: { distance: 8 } })), u = (0, S.useCallback)((e) => {
 		o(e.active.data.current?.element ?? null);
 	}, []), d = (0, S.useCallback)((e) => {
 		o(null);
 		let { active: t, over: n } = e;
 		if (!n || t.id === n.id) return;
-		let r = Io(t.id);
+		let r = zo(t.id);
 		if (!r) return;
 		let a = n.id, s = t.id;
 		if (a.startsWith(s.replace("n-", "n-") + "-") || a.startsWith(s.replace("n-", "g-") + "-")) return;
-		let c = Fo(a);
+		let c = Ro(a);
 		if (c) {
 			i(r, c.parentPath, c.index);
 			return;
 		}
-		let l = Io(a);
+		let l = zo(a);
 		if (!l) return;
 		let u = n.data.current?.element;
-		u && Ao(u) !== null ? i(r, l, (Ao(u) ?? []).length) : i(r, l.slice(0, -1), l[l.length - 1]);
+		u && No(u) !== null ? i(r, l, (No(u) ?? []).length) : i(r, l.slice(0, -1), l[l.length - 1]);
 	}, [i]);
 	if (e.length === 0) return /* @__PURE__ */ (0, P.jsx)("div", {
 		className: "tree-empty",
 		children: "No elements yet"
 	});
-	let f = s ? e.filter((e) => Bo(e, s)) : e;
+	let f = s ? e.filter((e) => Uo(e, s)) : e;
 	return /* @__PURE__ */ (0, P.jsxs)("div", { children: [/* @__PURE__ */ (0, P.jsxs)("div", {
 		className: "tree-search-wrap",
 		children: [/* @__PURE__ */ (0, P.jsx)("input", {
@@ -21505,16 +21714,16 @@ function Vo() {
 			s,
 			"\""
 		]
-	}) : /* @__PURE__ */ (0, P.jsxs)(G, {
+	}) : /* @__PURE__ */ (0, P.jsxs)(fo, {
 		sensors: l,
-		collisionDetection: Ci,
+		collisionDetection: Ei,
 		onDragStart: u,
 		onDragEnd: d,
 		children: [/* @__PURE__ */ (0, P.jsxs)("div", {
 			className: "tree-root",
 			children: [f.map((i) => {
 				let o = e.indexOf(i);
-				return /* @__PURE__ */ (0, P.jsx)(Ro, {
+				return /* @__PURE__ */ (0, P.jsx)(Vo, {
 					element: i,
 					path: [o],
 					selectedPath: t,
@@ -21522,18 +21731,18 @@ function Vo() {
 					onSelect: r,
 					depth: 0,
 					isDraggingAny: !!a
-				}, No([o]));
-			}), !s && a ? /* @__PURE__ */ (0, P.jsx)(Lo, {
+				}, Io([o]));
+			}), !s && a ? /* @__PURE__ */ (0, P.jsx)(Bo, {
 				parentPath: [],
 				index: e.length,
 				depth: 0
 			}) : null]
-		}), /* @__PURE__ */ (0, P.jsx)(ko, { children: a ? /* @__PURE__ */ (0, P.jsx)(zo, { element: a }) : null })]
+		}), /* @__PURE__ */ (0, P.jsx)(Mo, { children: a ? /* @__PURE__ */ (0, P.jsx)(Ho, { element: a }) : null })]
 	})] });
 }
 //#endregion
 //#region src/components/RightPanel.tsx
-function Ho(e, t) {
+function Go(e, t) {
 	if (t.length === 0) return null;
 	let n = e[t[0]];
 	for (let e = 1; e < t.length; e++) {
@@ -21544,8 +21753,8 @@ function Ho(e, t) {
 	}
 	return n ?? null;
 }
-var Uo = (0, S.memo)(function() {
-	let [e, t] = (0, S.useState)("tree"), n = N((e) => e.selectedPath), r = N((e) => e.body), i = N((e) => e.updateElement), a = n ? Ho(r, n) : null, o = (0, S.useCallback)((e) => {
+var Ko = (0, S.memo)(function() {
+	let [e, t] = (0, S.useState)("tree"), n = N((e) => e.selectedPath), r = N((e) => e.body), i = N((e) => e.updateElement), a = n ? Go(r, n) : null, o = (0, S.useCallback)((e) => {
 		let t = N.getState().selectedPath;
 		t && i(t, e);
 	}, [i]);
@@ -21572,7 +21781,7 @@ var Uo = (0, S.memo)(function() {
 			]
 		}), /* @__PURE__ */ (0, P.jsx)("div", {
 			className: "rp-content",
-			children: e === "tree" ? /* @__PURE__ */ (0, P.jsx)(Vo, {}) : e === "element" ? a ? /* @__PURE__ */ (0, P.jsx)(lr, {
+			children: e === "tree" ? /* @__PURE__ */ (0, P.jsx)(Wo, {}) : e === "element" ? a ? /* @__PURE__ */ (0, P.jsx)(fr, {
 				element: a,
 				onUpdate: o
 			}) : /* @__PURE__ */ (0, P.jsxs)("div", {
@@ -21581,10 +21790,10 @@ var Uo = (0, S.memo)(function() {
 					className: "rp-empty-icon",
 					children: "⊡"
 				}), "Select an element to edit its properties"]
-			}) : /* @__PURE__ */ (0, P.jsx)(Or, {})
+			}) : /* @__PURE__ */ (0, P.jsx)(jr, {})
 		})]
 	});
-}), Wo = [
+}), qo = [
 	{
 		keys: "⌘ Z",
 		action: "Undo"
@@ -21617,7 +21826,7 @@ var Uo = (0, S.memo)(function() {
 		keys: "?",
 		action: "Toggle this panel"
 	}
-], Go = (0, S.memo)(function() {
+], Jo = (0, S.memo)(function() {
 	let [e, t] = (0, S.useState)(!1);
 	return (0, S.useEffect)(() => {
 		let e = (e) => {
@@ -21640,7 +21849,7 @@ var Uo = (0, S.memo)(function() {
 				})]
 			}), /* @__PURE__ */ (0, P.jsx)("div", {
 				className: "shortcuts-list",
-				children: Wo.map((e) => /* @__PURE__ */ (0, P.jsxs)("div", {
+				children: qo.map((e) => /* @__PURE__ */ (0, P.jsxs)("div", {
 					className: "shortcut-row",
 					children: [/* @__PURE__ */ (0, P.jsx)("span", {
 						className: "shortcut-action",
@@ -21656,7 +21865,7 @@ var Uo = (0, S.memo)(function() {
 });
 //#endregion
 //#region src/hooks/useKeyboardShortcuts.ts
-function Ko() {
+function Yo() {
 	(0, S.useEffect)(() => {
 		let e = (e) => {
 			let t = e.metaKey || e.ctrlKey, n = e.target;
@@ -21696,33 +21905,73 @@ function Ko() {
 }
 //#endregion
 //#region src/components/EditorLayout.tsx
-var qo = (0, S.memo)(function() {
-	return Ko(), /* @__PURE__ */ (0, P.jsxs)("div", {
+var Xo = (0, S.memo)(function() {
+	return Yo(), /* @__PURE__ */ (0, P.jsxs)("div", {
 		className: "editor-root",
 		children: [
-			/* @__PURE__ */ (0, P.jsx)(mn, {}),
+			!ns.hideTopBar && /* @__PURE__ */ (0, P.jsx)(mn, {}),
 			/* @__PURE__ */ (0, P.jsxs)("div", {
 				className: "editor-panels",
 				children: [
 					/* @__PURE__ */ (0, P.jsx)(wn, {}),
 					/* @__PURE__ */ (0, P.jsx)(qn, {}),
-					/* @__PURE__ */ (0, P.jsx)(Uo, {})
+					/* @__PURE__ */ (0, P.jsx)(Ko, {})
 				]
 			}),
-			/* @__PURE__ */ (0, P.jsx)(Go, {})
+			/* @__PURE__ */ (0, P.jsx)(Jo, {})
 		]
 	});
 });
-//#endregion
-//#region src/App.tsx
-function Jo() {
-	return N((e) => e.view) === "library" ? /* @__PURE__ */ (0, P.jsx)(Te, {}) : /* @__PURE__ */ (0, P.jsx)(qo, {});
+ns.hideTopBar = !0, ns.hideTemplateLibrary = !0, ns.onChange = (e) => console.log("[onChange]", e), N.getState().setView("editor"), N.getState().setVariables([
+	{
+		name: "user.name",
+		label: "User Name",
+		category: "User"
+	},
+	{
+		name: "user.avatar",
+		label: "Avatar URL",
+		category: "User"
+	},
+	{
+		name: "user.uid",
+		label: "User ID",
+		category: "User"
+	},
+	{
+		name: "order.id",
+		label: "Order ID",
+		category: "Order"
+	},
+	{
+		name: "order.total",
+		label: "Total",
+		description: "Formatted price",
+		category: "Order"
+	},
+	{
+		name: "order.status",
+		label: "Status",
+		category: "Order"
+	},
+	{
+		name: "order.trackingUrl",
+		label: "Tracking URL",
+		category: "Order"
+	}
+]);
+var Zo = N.getState().body, Qo = N.getState().settings, $o = N.getState().fallbackText, es = N.getState().notificationText;
+N.subscribe((e) => {
+	(e.body !== Zo || e.settings !== Qo || e.fallbackText !== $o || e.notificationText !== es) && (Zo = e.body, Qo = e.settings, $o = e.fallbackText, es = e.notificationText, ns.onChange?.(e.getBubbleJSON()));
+});
+function ts() {
+	return N((e) => e.view) === "library" ? /* @__PURE__ */ (0, P.jsx)(Te, {}) : /* @__PURE__ */ (0, P.jsx)(Xo, {});
 }
 //#endregion
 //#region src/lib.tsx
-var Yo = {};
-function Xo(e, t) {
-	Yo.appId = t.appId, Yo.region = t.region, Yo.token = t.token, Yo.onSave = t.onSave, console.log("[BubbleBuilder] mountBubbleBuilder called with:", {
+var ns = {};
+function rs(e, t) {
+	ns.appId = t.appId, ns.region = t.region, ns.token = t.token, ns.onSave = t.onSave, ns.onChange = t.onChange, ns.hideTopBar = t.hideTopBar, ns.hideTemplateLibrary = t.hideTemplateLibrary, t.variables && N.getState().setVariables(t.variables), t.hideTemplateLibrary && N.getState().setView("editor"), console.log("[BubbleBuilder] mountBubbleBuilder called with:", {
 		appId: t.appId,
 		region: t.region,
 		token: t.token ? "***" + t.token.slice(-4) : void 0,
@@ -21731,15 +21980,24 @@ function Xo(e, t) {
 		hasOnSave: !!t.onSave
 	});
 	let n = (0, te.createRoot)(e);
-	return n.render(/* @__PURE__ */ (0, P.jsx)(S.StrictMode, { children: /* @__PURE__ */ (0, P.jsx)(Jo, {}) })), t.bubble && setTimeout(() => {
+	n.render(/* @__PURE__ */ (0, P.jsx)(S.StrictMode, { children: /* @__PURE__ */ (0, P.jsx)(ts, {}) }));
+	let r;
+	if (t.onChange) {
+		let e = t.onChange, n = N.getState().body, i = N.getState().settings, a = N.getState().fallbackText, o = N.getState().notificationText;
+		r = N.subscribe((t) => {
+			(t.body !== n || t.settings !== i || t.fallbackText !== a || t.notificationText !== o) && (n = t.body, i = t.settings, a = t.fallbackText, o = t.notificationText, e(t.getBubbleJSON()));
+		});
+	}
+	return t.bubble && setTimeout(() => {
 		N.getState().loadBubble(t.bubble, void 0, t.templateName ?? "Untitled");
 	}, 0), {
 		loadBubble: (e, t) => N.getState().loadBubble(e, void 0, t ?? "Untitled"),
 		getBubbleJSON: () => N.getState().getBubbleJSON(),
+		setVariables: (e) => N.getState().setVariables(e),
 		destroy: () => {
-			n.unmount(), Object.keys(Yo).forEach((e) => delete Yo[e]);
+			r?.(), n.unmount(), Object.keys(ns).forEach((e) => delete ns[e]);
 		}
 	};
 }
 //#endregion
-export { Yo as builderConfig, Xo as mountBubbleBuilder };
+export { ns as builderConfig, rs as mountBubbleBuilder };