@1urso/generic-editor 0.1.40 → 0.1.42

package/dist/generic-editor.js

@@ -804,15 +804,15 @@ var DISMISSABLE_LAYER_NAME = "DismissableLayer", CONTEXT_UPDATE = "dismissableLa
 	layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
 	branches: /* @__PURE__ */ new Set()
 }), DismissableLayer = React$1.forwardRef((_, E) => {
-	let { disableOutsidePointerEvents: O = !1, onEscapeKeyDown: A, onPointerDownOutside: j, onFocusOutside: M, onInteractOutside: N, onDismiss: P, ...z } = _, B = React$1.useContext(DismissableLayerContext), [H, U] = React$1.useState(null), W = H?.ownerDocument ?? globalThis?.document, [, G] = React$1.useState({}), Z = useComposedRefs$1(E, (n) => U(n)), Lj = Array.from(B.layers), [Rj] = [...B.layersWithOutsidePointerEventsDisabled].slice(-1), zj = Lj.indexOf(Rj), Bj = H ? Lj.indexOf(H) : -1, Vj = B.layersWithOutsidePointerEventsDisabled.size > 0, Hj = Bj >= zj, Uj = usePointerDownOutside((n) => {
+	let { disableOutsidePointerEvents: O = !1, onEscapeKeyDown: A, onPointerDownOutside: j, onFocusOutside: M, onInteractOutside: N, onDismiss: P, ...z } = _, B = React$1.useContext(DismissableLayerContext), [H, U] = React$1.useState(null), W = H?.ownerDocument ?? globalThis?.document, [, G] = React$1.useState({}), Z = useComposedRefs$1(E, (n) => U(n)), Aj = Array.from(B.layers), [jj] = [...B.layersWithOutsidePointerEventsDisabled].slice(-1), Mj = Aj.indexOf(jj), Nj = H ? Aj.indexOf(H) : -1, Pj = B.layersWithOutsidePointerEventsDisabled.size > 0, Fj = Nj >= Mj, Ij = usePointerDownOutside((n) => {
 		let _ = n.target, E = [...B.branches].some((n) => n.contains(_));
-		!Hj || E || (j?.(n), N?.(n), n.defaultPrevented || P?.());
-	}, W), Wj = useFocusOutside((n) => {
+		!Fj || E || (j?.(n), N?.(n), n.defaultPrevented || P?.());
+	}, W), Lj = useFocusOutside((n) => {
 		let _ = n.target;
 		[...B.branches].some((n) => n.contains(_)) || (M?.(n), N?.(n), n.defaultPrevented || P?.());
 	}, W);
 	return useEscapeKeydown((n) => {
-		Bj === B.layers.size - 1 && (A?.(n), !n.defaultPrevented && P && (n.preventDefault(), P()));
+		Nj === B.layers.size - 1 && (A?.(n), !n.defaultPrevented && P && (n.preventDefault(), P()));
 	}, W), React$1.useEffect(() => {
 		if (H) return O && (B.layersWithOutsidePointerEventsDisabled.size === 0 && (originalBodyPointerEvents = W.body.style.pointerEvents, W.body.style.pointerEvents = "none"), B.layersWithOutsidePointerEventsDisabled.add(H)), B.layers.add(H), dispatchUpdate(), () => {
 			O && B.layersWithOutsidePointerEventsDisabled.size === 1 && (W.body.style.pointerEvents = originalBodyPointerEvents);
@@ -831,12 +831,12 @@ var DISMISSABLE_LAYER_NAME = "DismissableLayer", CONTEXT_UPDATE = "dismissableLa
 		...z,
 		ref: Z,
 		style: {
-			pointerEvents: Vj ? Hj ? "auto" : "none" : void 0,
+			pointerEvents: Pj ? Fj ? "auto" : "none" : void 0,
 			..._.style
 		},
-		onFocusCapture: composeEventHandlers(_.onFocusCapture, Wj.onFocusCapture),
-		onBlurCapture: composeEventHandlers(_.onBlurCapture, Wj.onBlurCapture),
-		onPointerDownCapture: composeEventHandlers(_.onPointerDownCapture, Uj.onPointerDownCapture)
+		onFocusCapture: composeEventHandlers(_.onFocusCapture, Lj.onFocusCapture),
+		onBlurCapture: composeEventHandlers(_.onBlurCapture, Lj.onBlurCapture),
+		onPointerDownCapture: composeEventHandlers(_.onPointerDownCapture, Ij.onPointerDownCapture)
 	});
 });
 DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
@@ -1195,7 +1195,7 @@ var effectCar = createSidecarMedium(), nothing = function() {}, RemoveScroll = R
 		onScrollCapture: nothing,
 		onWheelCapture: nothing,
 		onTouchMoveCapture: nothing
-	}), j = A[0], M = A[1], N = _.forwardProps, P = _.children, z = _.className, B = _.removeScrollBar, H = _.enabled, U = _.shards, W = _.sideCar, G = _.noRelative, Z = _.noIsolation, Lj = _.inert, Rj = _.allowPinchZoom, zj = _.as, Bj = zj === void 0 ? "div" : zj, Vj = _.gapMode, Hj = __rest(_, [
+	}), j = A[0], M = A[1], N = _.forwardProps, P = _.children, z = _.className, B = _.removeScrollBar, H = _.enabled, U = _.shards, W = _.sideCar, G = _.noRelative, Z = _.noIsolation, Aj = _.inert, jj = _.allowPinchZoom, Mj = _.as, Nj = Mj === void 0 ? "div" : Mj, Pj = _.gapMode, Fj = __rest(_, [
 		"forwardProps",
 		"children",
 		"className",
@@ -1209,21 +1209,21 @@ var effectCar = createSidecarMedium(), nothing = function() {}, RemoveScroll = R
 		"allowPinchZoom",
 		"as",
 		"gapMode"
-	]), Uj = W, Wj = useMergeRefs([O, E]), Gj = __assign$2(__assign$2({}, Hj), j);
-	return React$1.createElement(React$1.Fragment, null, H && React$1.createElement(Uj, {
+	]), Ij = W, Lj = useMergeRefs([O, E]), Rj = __assign$2(__assign$2({}, Fj), j);
+	return React$1.createElement(React$1.Fragment, null, H && React$1.createElement(Ij, {
 		sideCar: effectCar,
 		removeScrollBar: B,
 		shards: U,
 		noRelative: G,
 		noIsolation: Z,
-		inert: Lj,
+		inert: Aj,
 		setCallbacks: M,
-		allowPinchZoom: !!Rj,
+		allowPinchZoom: !!jj,
 		lockRef: O,
-		gapMode: Vj
-	}), N ? React$1.cloneElement(React$1.Children.only(P), __assign$2(__assign$2({}, Gj), { ref: Wj })) : React$1.createElement(Bj, __assign$2({}, Gj, {
+		gapMode: Pj
+	}), N ? React$1.cloneElement(React$1.Children.only(P), __assign$2(__assign$2({}, Rj), { ref: Lj })) : React$1.createElement(Nj, __assign$2({}, Rj, {
 		className: z,
-		ref: Wj
+		ref: Lj
 	}), P));
 });
 RemoveScroll.defaultProps = {
@@ -1413,8 +1413,8 @@ var nonPassive = passiveSupported ? { passive: !1 } : !1, alwaysContainsScroll =
 		if (!N) break;
 		var W = getScrollVariables(n, N), G = W[0], Z = W[1] - W[2] - j * G;
 		(G || Z) && elementCouldBeScrolled(n, N) && (H += Z, U += G);
-		var Lj = N.parentNode;
-		N = Lj && Lj.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? Lj.host : Lj;
+		var Aj = N.parentNode;
+		N = Aj && Aj.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? Aj.host : Aj;
 	} while (!P && N !== document.body || P && (_.contains(N) || _ === N));
 	return (B && (A && Math.abs(H) < 1 || !A && M > H) || !B && (A && Math.abs(U) < 1 || !A && -M > U)) && (z = !0), z;
 }, getTouchXY = function(n) {
@@ -1961,7 +1961,7 @@ var computePosition$1 = async (n, _, E) => {
 		strategy: A
 	}), { x: B, y: H } = computeCoordsFromPlacement(z, O, P), U = O, W = {}, G = 0;
 	for (let E = 0; E < N.length; E++) {
-		let { name: j, fn: Z } = N[E], { x: Lj, y: Rj, data: zj, reset: Bj } = await Z({
+		let { name: j, fn: Z } = N[E], { x: Aj, y: jj, data: Mj, reset: Nj } = await Z({
 			x: B,
 			y: H,
 			initialPlacement: O,
@@ -1975,17 +1975,17 @@ var computePosition$1 = async (n, _, E) => {
 				floating: _
 			}
 		});
-		B = Lj ?? B, H = Rj ?? H, W = {
+		B = Aj ?? B, H = jj ?? H, W = {
 			...W,
 			[j]: {
 				...W[j],
-				...zj
+				...Mj
 			}
-		}, Bj && G <= 50 && (G++, typeof Bj == "object" && (Bj.placement && (U = Bj.placement), Bj.rects && (z = Bj.rects === !0 ? await M.getElementRects({
+		}, Nj && G <= 50 && (G++, typeof Nj == "object" && (Nj.placement && (U = Nj.placement), Nj.rects && (z = Nj.rects === !0 ? await M.getElementRects({
 			reference: n,
 			floating: _,
 			strategy: A
-		}) : Bj.rects), {x: B, y: H} = computeCoordsFromPlacement(z, U, P)), E = -1);
+		}) : Nj.rects), {x: B, y: H} = computeCoordsFromPlacement(z, U, P)), E = -1);
 	}
 	return {
 		x: B,
@@ -2002,25 +2002,25 @@ async function detectOverflow$1(n, _) {
 		boundary: P,
 		rootBoundary: z,
 		strategy: N
-	})), Lj = B === "floating" ? {
+	})), Aj = B === "floating" ? {
 		x: E,
 		y: O,
 		width: j.floating.width,
 		height: j.floating.height
-	} : j.reference, Rj = await (A.getOffsetParent == null ? void 0 : A.getOffsetParent(M.floating)), zj = await (A.isElement == null ? void 0 : A.isElement(Rj)) && await (A.getScale == null ? void 0 : A.getScale(Rj)) || {
+	} : j.reference, jj = await (A.getOffsetParent == null ? void 0 : A.getOffsetParent(M.floating)), Mj = await (A.isElement == null ? void 0 : A.isElement(jj)) && await (A.getScale == null ? void 0 : A.getScale(jj)) || {
 		x: 1,
 		y: 1
-	}, Bj = rectToClientRect(A.convertOffsetParentRelativeRectToViewportRelativeRect ? await A.convertOffsetParentRelativeRectToViewportRelativeRect({
+	}, Nj = rectToClientRect(A.convertOffsetParentRelativeRectToViewportRelativeRect ? await A.convertOffsetParentRelativeRectToViewportRelativeRect({
 		elements: M,
-		rect: Lj,
-		offsetParent: Rj,
+		rect: Aj,
+		offsetParent: jj,
 		strategy: N
-	}) : Lj);
+	}) : Aj);
 	return {
-		top: (Z.top - Bj.top + W.top) / zj.y,
-		bottom: (Bj.bottom - Z.bottom + W.bottom) / zj.y,
-		left: (Z.left - Bj.left + W.left) / zj.x,
-		right: (Bj.right - Z.right + W.right) / zj.x
+		top: (Z.top - Nj.top + W.top) / Mj.y,
+		bottom: (Nj.bottom - Z.bottom + W.bottom) / Mj.y,
+		left: (Z.left - Nj.left + W.left) / Mj.x,
+		right: (Nj.right - Z.right + W.right) / Mj.x
 	};
 }
 var arrow$2 = (n) => ({
@@ -2032,17 +2032,17 @@ var arrow$2 = (n) => ({
 		let H = getPaddingObject(B), U = {
 			x: E,
 			y: O
-		}, W = getAlignmentAxis(A), G = getAxisLength(W), Z = await M.getDimensions(z), Lj = W === "y", Rj = Lj ? "top" : "left", zj = Lj ? "bottom" : "right", Bj = Lj ? "clientHeight" : "clientWidth", Vj = j.reference[G] + j.reference[W] - U[W] - j.floating[G], Hj = U[W] - j.reference[W], Uj = await (M.getOffsetParent == null ? void 0 : M.getOffsetParent(z)), Wj = Uj ? Uj[Bj] : 0;
-		(!Wj || !await (M.isElement == null ? void 0 : M.isElement(Uj))) && (Wj = N.floating[Bj] || j.floating[G]);
-		let Gj = Vj / 2 - Hj / 2, Kj = Wj / 2 - Z[G] / 2 - 1, qj = min(H[Rj], Kj), Jj = min(H[zj], Kj), Yj = qj, Xj = Wj - Z[G] - Jj, Zj = Wj / 2 - Z[G] / 2 + Gj, Qj = clamp$3(Yj, Zj, Xj), $j = !P.arrow && getAlignment(A) != null && Zj !== Qj && j.reference[G] / 2 - (Zj < Yj ? qj : Jj) - Z[G] / 2 < 0, eM = $j ? Zj < Yj ? Zj - Yj : Zj - Xj : 0;
+		}, W = getAlignmentAxis(A), G = getAxisLength(W), Z = await M.getDimensions(z), Aj = W === "y", jj = Aj ? "top" : "left", Mj = Aj ? "bottom" : "right", Nj = Aj ? "clientHeight" : "clientWidth", Pj = j.reference[G] + j.reference[W] - U[W] - j.floating[G], Fj = U[W] - j.reference[W], Ij = await (M.getOffsetParent == null ? void 0 : M.getOffsetParent(z)), Lj = Ij ? Ij[Nj] : 0;
+		(!Lj || !await (M.isElement == null ? void 0 : M.isElement(Ij))) && (Lj = N.floating[Nj] || j.floating[G]);
+		let Rj = Pj / 2 - Fj / 2, zj = Lj / 2 - Z[G] / 2 - 1, Bj = min(H[jj], zj), Vj = min(H[Mj], zj), Hj = Bj, Uj = Lj - Z[G] - Vj, Wj = Lj / 2 - Z[G] / 2 + Rj, Gj = clamp$3(Hj, Wj, Uj), Kj = !P.arrow && getAlignment(A) != null && Wj !== Gj && j.reference[G] / 2 - (Wj < Hj ? Bj : Vj) - Z[G] / 2 < 0, qj = Kj ? Wj < Hj ? Wj - Hj : Wj - Uj : 0;
 		return {
-			[W]: U[W] + eM,
+			[W]: U[W] + qj,
 			data: {
-				[W]: Qj,
-				centerOffset: Zj - Qj - eM,
-				...$j && { alignmentOffset: eM }
+				[W]: Gj,
+				centerOffset: Wj - Gj - qj,
+				...Kj && { alignmentOffset: qj }
 			},
-			reset: $j
+			reset: Kj
 		};
 	}
 }), flip$2 = function(n) {
@@ -2053,32 +2053,32 @@ var arrow$2 = (n) => ({
 			var E;
 			let { placement: O, middlewareData: A, rects: j, initialPlacement: M, platform: N, elements: P } = _, { mainAxis: z = !0, crossAxis: B = !0, fallbackPlacements: H, fallbackStrategy: U = "bestFit", fallbackAxisSideDirection: W = "none", flipAlignment: G = !0, ...Z } = evaluate(n, _);
 			if ((E = A.arrow) != null && E.alignmentOffset) return {};
-			let Lj = getSide(O), Rj = getSideAxis(M), zj = getSide(M) === M, Bj = await (N.isRTL == null ? void 0 : N.isRTL(P.floating)), Vj = H || (zj || !G ? [getOppositePlacement(M)] : getExpandedPlacements(M)), Hj = W !== "none";
-			!H && Hj && Vj.push(...getOppositeAxisPlacements(M, G, W, Bj));
-			let Uj = [M, ...Vj], Wj = await detectOverflow$1(_, Z), Gj = [], Kj = A.flip?.overflows || [];
-			if (z && Gj.push(Wj[Lj]), B) {
-				let n = getAlignmentSides(O, j, Bj);
-				Gj.push(Wj[n[0]], Wj[n[1]]);
+			let Aj = getSide(O), jj = getSideAxis(M), Mj = getSide(M) === M, Nj = await (N.isRTL == null ? void 0 : N.isRTL(P.floating)), Pj = H || (Mj || !G ? [getOppositePlacement(M)] : getExpandedPlacements(M)), Fj = W !== "none";
+			!H && Fj && Pj.push(...getOppositeAxisPlacements(M, G, W, Nj));
+			let Ij = [M, ...Pj], Lj = await detectOverflow$1(_, Z), Rj = [], zj = A.flip?.overflows || [];
+			if (z && Rj.push(Lj[Aj]), B) {
+				let n = getAlignmentSides(O, j, Nj);
+				Rj.push(Lj[n[0]], Lj[n[1]]);
 			}
-			if (Kj = [...Kj, {
+			if (zj = [...zj, {
 				placement: O,
-				overflows: Gj
-			}], !Gj.every((n) => n <= 0)) {
-				let n = (A.flip?.index || 0) + 1, _ = Uj[n];
-				if (_ && (!(B === "alignment" && Rj !== getSideAxis(_)) || Kj.every((n) => getSideAxis(n.placement) === Rj ? n.overflows[0] > 0 : !0))) return {
+				overflows: Rj
+			}], !Rj.every((n) => n <= 0)) {
+				let n = (A.flip?.index || 0) + 1, _ = Ij[n];
+				if (_ && (!(B === "alignment" && jj !== getSideAxis(_)) || zj.every((n) => getSideAxis(n.placement) === jj ? n.overflows[0] > 0 : !0))) return {
 					data: {
 						index: n,
-						overflows: Kj
+						overflows: zj
 					},
 					reset: { placement: _ }
 				};
-				let E = Kj.filter((n) => n.overflows[0] <= 0).sort((n, _) => n.overflows[1] - _.overflows[1])[0]?.placement;
+				let E = zj.filter((n) => n.overflows[0] <= 0).sort((n, _) => n.overflows[1] - _.overflows[1])[0]?.placement;
 				if (!E) switch (U) {
 					case "bestFit": {
-						let n = Kj.filter((n) => {
-							if (Hj) {
+						let n = zj.filter((n) => {
+							if (Fj) {
 								let _ = getSideAxis(n.placement);
-								return _ === Rj || _ === "y";
+								return _ === jj || _ === "y";
 							}
 							return !0;
 						}).map((n) => [n.placement, n.overflows.filter((n) => n > 0).reduce((n, _) => n + _, 0)]).sort((n, _) => n[1] - _[1])[0]?.[0];
@@ -2221,7 +2221,7 @@ var offset$2 = function(n) {
 			let { x: E, y: O, placement: A, rects: j, middlewareData: M } = _, { offset: N = 0, mainAxis: P = !0, crossAxis: z = !0 } = evaluate(n, _), B = {
 				x: E,
 				y: O
-			}, H = getSideAxis(A), U = getOppositeAxis(H), W = B[U], G = B[H], Z = evaluate(N, _), Lj = typeof Z == "number" ? {
+			}, H = getSideAxis(A), U = getOppositeAxis(H), W = B[U], G = B[H], Z = evaluate(N, _), Aj = typeof Z == "number" ? {
 				mainAxis: Z,
 				crossAxis: 0
 			} : {
@@ -2230,11 +2230,11 @@ var offset$2 = function(n) {
 				...Z
 			};
 			if (P) {
-				let n = U === "y" ? "height" : "width", _ = j.reference[U] - j.floating[n] + Lj.mainAxis, E = j.reference[U] + j.reference[n] - Lj.mainAxis;
+				let n = U === "y" ? "height" : "width", _ = j.reference[U] - j.floating[n] + Aj.mainAxis, E = j.reference[U] + j.reference[n] - Aj.mainAxis;
 				W < _ ? W = _ : W > E && (W = E);
 			}
 			if (z) {
-				let n = U === "y" ? "width" : "height", _ = originSides.has(getSide(A)), E = j.reference[H] - j.floating[n] + (_ && M.offset?.[H] || 0) + (_ ? 0 : Lj.crossAxis), O = j.reference[H] + j.reference[n] + (_ ? 0 : M.offset?.[H] || 0) - (_ ? Lj.crossAxis : 0);
+				let n = U === "y" ? "width" : "height", _ = originSides.has(getSide(A)), E = j.reference[H] - j.floating[n] + (_ && M.offset?.[H] || 0) + (_ ? 0 : Aj.crossAxis), O = j.reference[H] + j.reference[n] + (_ ? 0 : M.offset?.[H] || 0) - (_ ? Aj.crossAxis : 0);
 				G < E ? G = E : G > O && (G = O);
 			}
 			return {
@@ -2249,20 +2249,20 @@ var offset$2 = function(n) {
 		options: n,
 		async fn(_) {
 			var E, O;
-			let { placement: A, rects: j, platform: M, elements: N } = _, { apply: P = () => {}, ...z } = evaluate(n, _), B = await detectOverflow$1(_, z), H = getSide(A), U = getAlignment(A), W = getSideAxis(A) === "y", { width: G, height: Z } = j.floating, Lj, Rj;
-			H === "top" || H === "bottom" ? (Lj = H, Rj = U === (await (M.isRTL == null ? void 0 : M.isRTL(N.floating)) ? "start" : "end") ? "left" : "right") : (Rj = H, Lj = U === "end" ? "top" : "bottom");
-			let zj = Z - B.top - B.bottom, Bj = G - B.left - B.right, Vj = min(Z - B[Lj], zj), Hj = min(G - B[Rj], Bj), Uj = !_.middlewareData.shift, Wj = Vj, Gj = Hj;
-			if ((E = _.middlewareData.shift) != null && E.enabled.x && (Gj = Bj), (O = _.middlewareData.shift) != null && O.enabled.y && (Wj = zj), Uj && !U) {
+			let { placement: A, rects: j, platform: M, elements: N } = _, { apply: P = () => {}, ...z } = evaluate(n, _), B = await detectOverflow$1(_, z), H = getSide(A), U = getAlignment(A), W = getSideAxis(A) === "y", { width: G, height: Z } = j.floating, Aj, jj;
+			H === "top" || H === "bottom" ? (Aj = H, jj = U === (await (M.isRTL == null ? void 0 : M.isRTL(N.floating)) ? "start" : "end") ? "left" : "right") : (jj = H, Aj = U === "end" ? "top" : "bottom");
+			let Mj = Z - B.top - B.bottom, Nj = G - B.left - B.right, Pj = min(Z - B[Aj], Mj), Fj = min(G - B[jj], Nj), Ij = !_.middlewareData.shift, Lj = Pj, Rj = Fj;
+			if ((E = _.middlewareData.shift) != null && E.enabled.x && (Rj = Nj), (O = _.middlewareData.shift) != null && O.enabled.y && (Lj = Mj), Ij && !U) {
 				let n = max(B.left, 0), _ = max(B.right, 0), E = max(B.top, 0), O = max(B.bottom, 0);
-				W ? Gj = G - 2 * (n !== 0 || _ !== 0 ? n + _ : max(B.left, B.right)) : Wj = Z - 2 * (E !== 0 || O !== 0 ? E + O : max(B.top, B.bottom));
+				W ? Rj = G - 2 * (n !== 0 || _ !== 0 ? n + _ : max(B.left, B.right)) : Lj = Z - 2 * (E !== 0 || O !== 0 ? E + O : max(B.top, B.bottom));
 			}
 			await P({
 				..._,
-				availableWidth: Gj,
-				availableHeight: Wj
+				availableWidth: Rj,
+				availableHeight: Lj
 			});
-			let Kj = await M.getDimensions(N.floating);
-			return G !== Kj.width || Z !== Kj.height ? { reset: { rects: !0 } } : {};
+			let zj = await M.getDimensions(N.floating);
+			return G !== zj.width || Z !== zj.height ? { reset: { rects: !0 } } : {};
 		}
 	};
 };
@@ -2646,27 +2646,27 @@ function observeMove(n, _) {
 		N === void 0 && (N = !1), P === void 0 && (P = 1), j();
 		let z = n.getBoundingClientRect(), { left: B, top: H, width: U, height: W } = z;
 		if (N || _(), !U || !W) return;
-		let G = floor(H), Z = floor(A.clientWidth - (B + U)), Lj = floor(A.clientHeight - (H + W)), Rj = floor(B), zj = {
-			rootMargin: -G + "px " + -Z + "px " + -Lj + "px " + -Rj + "px",
+		let G = floor(H), Z = floor(A.clientWidth - (B + U)), Aj = floor(A.clientHeight - (H + W)), jj = floor(B), Mj = {
+			rootMargin: -G + "px " + -Z + "px " + -Aj + "px " + -jj + "px",
 			threshold: max(0, min(1, P)) || 1
-		}, Bj = !0;
-		function Vj(_) {
+		}, Nj = !0;
+		function Pj(_) {
 			let E = _[0].intersectionRatio;
 			if (E !== P) {
-				if (!Bj) return M();
+				if (!Nj) return M();
 				E ? M(!1, E) : O = setTimeout(() => {
 					M(!1, 1e-7);
 				}, 1e3);
 			}
-			E === 1 && !rectsAreEqual(z, n.getBoundingClientRect()) && M(), Bj = !1;
+			E === 1 && !rectsAreEqual(z, n.getBoundingClientRect()) && M(), Nj = !1;
 		}
 		try {
-			E = new IntersectionObserver(Vj, {
-				...zj,
+			E = new IntersectionObserver(Pj, {
+				...Mj,
 				root: A.ownerDocument
 			});
 		} catch {
-			E = new IntersectionObserver(Vj, zj);
+			E = new IntersectionObserver(Pj, Mj);
 		}
 		E.observe(n);
 	}
@@ -2687,10 +2687,10 @@ function autoUpdate(n, _, E, O) {
 		})), E();
 	}), z && !P && W.observe(z), W.observe(_));
 	let G, Z = P ? getBoundingClientRect(n) : null;
-	P && Lj();
-	function Lj() {
+	P && Aj();
+	function Aj() {
 		let _ = getBoundingClientRect(n);
-		Z && !rectsAreEqual(Z, _) && E(), Z = _, G = requestAnimationFrame(Lj);
+		Z && !rectsAreEqual(Z, _) && E(), Z = _, G = requestAnimationFrame(Aj);
 	}
 	return E(), () => {
 		var n;
@@ -2757,23 +2757,23 @@ function useFloating(_) {
 		isPositioned: !1
 	}), [W, G] = React$1.useState(A);
 	deepEqual(W, A) || G(A);
-	let [Z, Lj] = React$1.useState(null), [Rj, zj] = React$1.useState(null), Bj = React$1.useCallback((n) => {
-		n !== Gj.current && (Gj.current = n, Lj(n));
-	}, []), Vj = React$1.useCallback((n) => {
-		n !== Kj.current && (Kj.current = n, zj(n));
-	}, []), Uj = M || Z, Wj = N || Rj, Gj = React$1.useRef(null), Kj = React$1.useRef(null), qj = React$1.useRef(H), Jj = z != null, Yj = useLatestRef(z), Xj = useLatestRef(j), Zj = useLatestRef(B), Qj = React$1.useCallback(() => {
-		if (!Gj.current || !Kj.current) return;
+	let [Z, Aj] = React$1.useState(null), [jj, Mj] = React$1.useState(null), Nj = React$1.useCallback((n) => {
+		n !== Rj.current && (Rj.current = n, Aj(n));
+	}, []), Pj = React$1.useCallback((n) => {
+		n !== zj.current && (zj.current = n, Mj(n));
+	}, []), Ij = M || Z, Lj = N || jj, Rj = React$1.useRef(null), zj = React$1.useRef(null), Bj = React$1.useRef(H), Vj = z != null, Hj = useLatestRef(z), Uj = useLatestRef(j), Wj = useLatestRef(B), Gj = React$1.useCallback(() => {
+		if (!Rj.current || !zj.current) return;
 		let n = {
 			placement: E,
 			strategy: O,
 			middleware: W
 		};
-		Xj.current && (n.platform = Xj.current), computePosition(Gj.current, Kj.current, n).then((n) => {
+		Uj.current && (n.platform = Uj.current), computePosition(Rj.current, zj.current, n).then((n) => {
 			let _ = {
 				...n,
-				isPositioned: Zj.current !== !1
+				isPositioned: Wj.current !== !1
 			};
-			$j.current && !deepEqual(qj.current, _) && (qj.current = _, ReactDOM$1.flushSync(() => {
+			Kj.current && !deepEqual(Bj.current, _) && (Bj.current = _, ReactDOM$1.flushSync(() => {
 				U(_);
 			}));
 		});
@@ -2781,50 +2781,50 @@ function useFloating(_) {
 		W,
 		E,
 		O,
-		Xj,
-		Zj
+		Uj,
+		Wj
 	]);
 	index(() => {
-		B === !1 && qj.current.isPositioned && (qj.current.isPositioned = !1, U((n) => ({
+		B === !1 && Bj.current.isPositioned && (Bj.current.isPositioned = !1, U((n) => ({
 			...n,
 			isPositioned: !1
 		})));
 	}, [B]);
-	let $j = React$1.useRef(!1);
-	index(() => ($j.current = !0, () => {
-		$j.current = !1;
+	let Kj = React$1.useRef(!1);
+	index(() => (Kj.current = !0, () => {
+		Kj.current = !1;
 	}), []), index(() => {
-		if (Uj && (Gj.current = Uj), Wj && (Kj.current = Wj), Uj && Wj) {
-			if (Yj.current) return Yj.current(Uj, Wj, Qj);
-			Qj();
+		if (Ij && (Rj.current = Ij), Lj && (zj.current = Lj), Ij && Lj) {
+			if (Hj.current) return Hj.current(Ij, Lj, Gj);
+			Gj();
 		}
 	}, [
-		Uj,
-		Wj,
-		Qj,
-		Yj,
-		Jj
+		Ij,
+		Lj,
+		Gj,
+		Hj,
+		Vj
 	]);
-	let eM = React$1.useMemo(() => ({
-		reference: Gj,
-		floating: Kj,
-		setReference: Bj,
-		setFloating: Vj
-	}), [Bj, Vj]), tM = React$1.useMemo(() => ({
-		reference: Uj,
-		floating: Wj
-	}), [Uj, Wj]), nM = React$1.useMemo(() => {
+	let qj = React$1.useMemo(() => ({
+		reference: Rj,
+		floating: zj,
+		setReference: Nj,
+		setFloating: Pj
+	}), [Nj, Pj]), Jj = React$1.useMemo(() => ({
+		reference: Ij,
+		floating: Lj
+	}), [Ij, Lj]), Yj = React$1.useMemo(() => {
 		let n = {
 			position: O,
 			left: 0,
 			top: 0
 		};
-		if (!tM.floating) return n;
-		let _ = roundByDPR(tM.floating, H.x), E = roundByDPR(tM.floating, H.y);
+		if (!Jj.floating) return n;
+		let _ = roundByDPR(Jj.floating, H.x), E = roundByDPR(Jj.floating, H.y);
 		return P ? {
 			...n,
 			transform: "translate(" + _ + "px, " + E + "px)",
-			...getDPR(tM.floating) >= 1.5 && { willChange: "transform" }
+			...getDPR(Jj.floating) >= 1.5 && { willChange: "transform" }
 		} : {
 			position: O,
 			left: _,
@@ -2833,22 +2833,22 @@ function useFloating(_) {
 	}, [
 		O,
 		P,
-		tM.floating,
+		Jj.floating,
 		H.x,
 		H.y
 	]);
 	return React$1.useMemo(() => ({
 		...H,
-		update: Qj,
-		refs: eM,
-		elements: tM,
-		floatingStyles: nM
+		update: Gj,
+		refs: qj,
+		elements: Jj,
+		floatingStyles: Yj
 	}), [
 		H,
-		Qj,
-		eM,
-		tM,
-		nM
+		Gj,
+		qj,
+		Jj,
+		Yj
 	]);
 }
 var arrow$1$1 = (n) => {
@@ -2925,70 +2925,70 @@ var ANCHOR_NAME$2 = "PopperAnchor", PopperAnchor = React$1.forwardRef((_, E) =>
 });
 PopperAnchor.displayName = ANCHOR_NAME$2;
 var CONTENT_NAME$6 = "PopperContent", [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME$6), PopperContent = React$1.forwardRef((_, E) => {
-	let { __scopePopper: O, side: A = "bottom", sideOffset: j = 0, align: M = "center", alignOffset: N = 0, arrowPadding: P = 0, avoidCollisions: z = !0, collisionBoundary: B = [], collisionPadding: H = 0, sticky: U = "partial", hideWhenDetached: W = !1, updatePositionStrategy: G = "optimized", onPlaced: Z, ...Lj } = _, Rj = usePopperContext(CONTENT_NAME$6, O), [zj, Bj] = React$1.useState(null), Vj = useComposedRefs$1(E, (n) => Bj(n)), [Hj, Uj] = React$1.useState(null), Wj = useSize(Hj), Gj = Wj?.width ?? 0, qj = Wj?.height ?? 0, Jj = A + (M === "center" ? "" : "-" + M), Yj = typeof H == "number" ? H : {
+	let { __scopePopper: O, side: A = "bottom", sideOffset: j = 0, align: M = "center", alignOffset: N = 0, arrowPadding: P = 0, avoidCollisions: z = !0, collisionBoundary: B = [], collisionPadding: H = 0, sticky: U = "partial", hideWhenDetached: W = !1, updatePositionStrategy: G = "optimized", onPlaced: Z, ...Aj } = _, jj = usePopperContext(CONTENT_NAME$6, O), [Mj, Nj] = React$1.useState(null), Pj = useComposedRefs$1(E, (n) => Nj(n)), [Fj, Ij] = React$1.useState(null), Lj = useSize(Fj), Rj = Lj?.width ?? 0, Bj = Lj?.height ?? 0, Vj = A + (M === "center" ? "" : "-" + M), Hj = typeof H == "number" ? H : {
 		top: 0,
 		right: 0,
 		bottom: 0,
 		left: 0,
 		...H
-	}, Xj = Array.isArray(B) ? B : [B], Zj = Xj.length > 0, Qj = {
-		padding: Yj,
-		boundary: Xj.filter(isNotNull$2),
-		altBoundary: Zj
-	}, { refs: $j, floatingStyles: eM, placement: tM, isPositioned: nM, middlewareData: rM } = useFloating({
+	}, Uj = Array.isArray(B) ? B : [B], Wj = Uj.length > 0, Gj = {
+		padding: Hj,
+		boundary: Uj.filter(isNotNull$2),
+		altBoundary: Wj
+	}, { refs: Kj, floatingStyles: qj, placement: Jj, isPositioned: Yj, middlewareData: Xj } = useFloating({
 		strategy: "fixed",
-		placement: Jj,
+		placement: Vj,
 		whileElementsMounted: (...n) => autoUpdate(...n, { animationFrame: G === "always" }),
-		elements: { reference: Rj.anchor },
+		elements: { reference: jj.anchor },
 		middleware: [
 			offset({
-				mainAxis: j + qj,
+				mainAxis: j + Bj,
 				alignmentAxis: N
 			}),
 			z && shift({
 				mainAxis: !0,
 				crossAxis: !1,
 				limiter: U === "partial" ? limitShift() : void 0,
-				...Qj
+				...Gj
 			}),
-			z && flip({ ...Qj }),
+			z && flip({ ...Gj }),
 			size({
-				...Qj,
+				...Gj,
 				apply: ({ elements: n, rects: _, availableWidth: E, availableHeight: O }) => {
 					let { width: A, height: j } = _.reference, M = n.floating.style;
 					M.setProperty("--radix-popper-available-width", `${E}px`), M.setProperty("--radix-popper-available-height", `${O}px`), M.setProperty("--radix-popper-anchor-width", `${A}px`), M.setProperty("--radix-popper-anchor-height", `${j}px`);
 				}
 			}),
-			Hj && arrow({
-				element: Hj,
+			Fj && arrow({
+				element: Fj,
 				padding: P
 			}),
 			transformOrigin({
-				arrowWidth: Gj,
-				arrowHeight: qj
+				arrowWidth: Rj,
+				arrowHeight: Bj
 			}),
 			W && hide({
 				strategy: "referenceHidden",
-				...Qj
+				...Gj
 			})
 		]
-	}), [iM, aM] = getSideAndAlignFromPlacement(tM), oM = useCallbackRef(Z);
+	}), [Zj, Qj] = getSideAndAlignFromPlacement(Jj), $j = useCallbackRef(Z);
 	useLayoutEffect2(() => {
-		nM && oM?.();
-	}, [nM, oM]);
-	let sM = rM.arrow?.x, cM = rM.arrow?.y, lM = rM.arrow?.centerOffset !== 0, [uM, dM] = React$1.useState();
+		Yj && $j?.();
+	}, [Yj, $j]);
+	let eM = Xj.arrow?.x, tM = Xj.arrow?.y, nM = Xj.arrow?.centerOffset !== 0, [rM, iM] = React$1.useState();
 	return useLayoutEffect2(() => {
-		zj && dM(window.getComputedStyle(zj).zIndex);
-	}, [zj]), /* @__PURE__ */ jsx("div", {
-		ref: $j.setFloating,
+		Mj && iM(window.getComputedStyle(Mj).zIndex);
+	}, [Mj]), /* @__PURE__ */ jsx("div", {
+		ref: Kj.setFloating,
 		"data-radix-popper-content-wrapper": "",
 		style: {
-			...eM,
-			transform: nM ? eM.transform : "translate(0, -200%)",
+			...qj,
+			transform: Yj ? qj.transform : "translate(0, -200%)",
 			minWidth: "max-content",
-			zIndex: uM,
-			"--radix-popper-transform-origin": [rM.transformOrigin?.x, rM.transformOrigin?.y].join(" "),
-			...rM.hide?.referenceHidden && {
+			zIndex: rM,
+			"--radix-popper-transform-origin": [Xj.transformOrigin?.x, Xj.transformOrigin?.y].join(" "),
+			...Xj.hide?.referenceHidden && {
 				visibility: "hidden",
 				pointerEvents: "none"
 			}
@@ -2996,19 +2996,19 @@ var CONTENT_NAME$6 = "PopperContent", [PopperContentProvider, useContentContext]
 		dir: _.dir,
 		children: /* @__PURE__ */ jsx(PopperContentProvider, {
 			scope: O,
-			placedSide: iM,
-			onArrowChange: Uj,
-			arrowX: sM,
-			arrowY: cM,
-			shouldHideArrow: lM,
+			placedSide: Zj,
+			onArrowChange: Ij,
+			arrowX: eM,
+			arrowY: tM,
+			shouldHideArrow: nM,
 			children: /* @__PURE__ */ jsx(Primitive.div, {
-				"data-side": iM,
-				"data-align": aM,
-				...Lj,
-				ref: Vj,
+				"data-side": Zj,
+				"data-align": Qj,
+				...Aj,
+				ref: Pj,
 				style: {
-					...Lj.style,
-					animation: nM ? void 0 : "none"
+					...Aj.style,
+					animation: Yj ? void 0 : "none"
 				}
 			})
 		})
@@ -3091,27 +3091,27 @@ var Root2$4 = Popper, Anchor = PopperAnchor, Content$1 = PopperContent, Arrow =
 }));
 RovingFocusGroup.displayName = GROUP_NAME$3;
 var RovingFocusGroupImpl = React$1.forwardRef((_, E) => {
-	let { __scopeRovingFocusGroup: O, orientation: A, loop: j = !1, dir: M, currentTabStopId: N, defaultCurrentTabStopId: P, onCurrentTabStopIdChange: z, onEntryFocus: B, preventScrollOnEntryFocus: H = !1, ...U } = _, W = React$1.useRef(null), G = useComposedRefs$1(E, W), Z = useDirection(M), [Lj, Rj] = useControllableState({
+	let { __scopeRovingFocusGroup: O, orientation: A, loop: j = !1, dir: M, currentTabStopId: N, defaultCurrentTabStopId: P, onCurrentTabStopIdChange: z, onEntryFocus: B, preventScrollOnEntryFocus: H = !1, ...U } = _, W = React$1.useRef(null), G = useComposedRefs$1(E, W), Z = useDirection(M), [Aj, jj] = useControllableState({
 		prop: N,
 		defaultProp: P ?? null,
 		onChange: z,
 		caller: GROUP_NAME$3
-	}), [zj, Bj] = React$1.useState(!1), Vj = useCallbackRef(B), Hj = useCollection$1(O), Uj = React$1.useRef(!1), [Wj, Gj] = React$1.useState(0);
+	}), [Mj, Nj] = React$1.useState(!1), Pj = useCallbackRef(B), Fj = useCollection$1(O), Ij = React$1.useRef(!1), [Lj, Rj] = React$1.useState(0);
 	return React$1.useEffect(() => {
 		let n = W.current;
-		if (n) return n.addEventListener(ENTRY_FOCUS, Vj), () => n.removeEventListener(ENTRY_FOCUS, Vj);
-	}, [Vj]), /* @__PURE__ */ jsx(RovingFocusProvider, {
+		if (n) return n.addEventListener(ENTRY_FOCUS, Pj), () => n.removeEventListener(ENTRY_FOCUS, Pj);
+	}, [Pj]), /* @__PURE__ */ jsx(RovingFocusProvider, {
 		scope: O,
 		orientation: A,
 		dir: Z,
 		loop: j,
-		currentTabStopId: Lj,
-		onItemFocus: React$1.useCallback((n) => Rj(n), [Rj]),
-		onItemShiftTab: React$1.useCallback(() => Bj(!0), []),
-		onFocusableItemAdd: React$1.useCallback(() => Gj((n) => n + 1), []),
-		onFocusableItemRemove: React$1.useCallback(() => Gj((n) => n - 1), []),
+		currentTabStopId: Aj,
+		onItemFocus: React$1.useCallback((n) => jj(n), [jj]),
+		onItemShiftTab: React$1.useCallback(() => Nj(!0), []),
+		onFocusableItemAdd: React$1.useCallback(() => Rj((n) => n + 1), []),
+		onFocusableItemRemove: React$1.useCallback(() => Rj((n) => n - 1), []),
 		children: /* @__PURE__ */ jsx(Primitive.div, {
-			tabIndex: zj || Wj === 0 ? -1 : 0,
+			tabIndex: Mj || Lj === 0 ? -1 : 0,
 			"data-orientation": A,
 			...U,
 			ref: G,
@@ -3120,28 +3120,28 @@ var RovingFocusGroupImpl = React$1.forwardRef((_, E) => {
 				..._.style
 			},
 			onMouseDown: composeEventHandlers(_.onMouseDown, () => {
-				Uj.current = !0;
+				Ij.current = !0;
 			}),
 			onFocus: composeEventHandlers(_.onFocus, (n) => {
-				let _ = !Uj.current;
-				if (n.target === n.currentTarget && _ && !zj) {
+				let _ = !Ij.current;
+				if (n.target === n.currentTarget && _ && !Mj) {
 					let _ = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
 					if (n.currentTarget.dispatchEvent(_), !_.defaultPrevented) {
-						let n = Hj().filter((n) => n.focusable);
+						let n = Fj().filter((n) => n.focusable);
 						focusFirst$1([
 							n.find((n) => n.active),
-							n.find((n) => n.id === Lj),
+							n.find((n) => n.id === Aj),
 							...n
 						].filter(Boolean).map((n) => n.ref.current), H);
 					}
 				}
-				Uj.current = !1;
+				Ij.current = !1;
 			}),
-			onBlur: composeEventHandlers(_.onBlur, () => Bj(!1))
+			onBlur: composeEventHandlers(_.onBlur, () => Nj(!1))
 		})
 	});
 }), ITEM_NAME$3 = "RovingFocusGroupItem", RovingFocusGroupItem = React$1.forwardRef((_, E) => {
-	let { __scopeRovingFocusGroup: O, focusable: A = !0, active: j = !1, tabStopId: M, children: N, ...P } = _, z = useId$1(), B = M || z, H = useRovingFocusContext(ITEM_NAME$3, O), U = H.currentTabStopId === B, W = useCollection$1(O), { onFocusableItemAdd: G, onFocusableItemRemove: Z, currentTabStopId: Lj } = H;
+	let { __scopeRovingFocusGroup: O, focusable: A = !0, active: j = !1, tabStopId: M, children: N, ...P } = _, z = useId$1(), B = M || z, H = useRovingFocusContext(ITEM_NAME$3, O), U = H.currentTabStopId === B, W = useCollection$1(O), { onFocusableItemAdd: G, onFocusableItemRemove: Z, currentTabStopId: Aj } = H;
 	return React$1.useEffect(() => {
 		if (A) return G(), () => Z();
 	}, [
@@ -3184,7 +3184,7 @@ var RovingFocusGroupImpl = React$1.forwardRef((_, E) => {
 			}),
 			children: typeof N == "function" ? N({
 				isCurrentTabStop: U,
-				hasTabStop: Lj != null
+				hasTabStop: Aj != null
 			}) : N
 		})
 	});
@@ -3335,40 +3335,40 @@ var CONTENT_NAME$5 = "MenuContent", [MenuContentProvider, useMenuContentContext]
 		onDismiss: () => E.onOpenChange(!1)
 	});
 }), Slot$1 = /* @__PURE__ */ createSlot("MenuContent.ScrollLock"), MenuContentImpl = React$1.forwardRef((_, E) => {
-	let { __scopeMenu: O, loop: A = !1, trapFocus: j, onOpenAutoFocus: M, onCloseAutoFocus: N, disableOutsidePointerEvents: P, onEntryFocus: z, onEscapeKeyDown: B, onPointerDownOutside: H, onFocusOutside: U, onInteractOutside: W, onDismiss: G, disableOutsideScroll: Z, ...Lj } = _, Rj = useMenuContext(CONTENT_NAME$5, O), zj = useMenuRootContext(CONTENT_NAME$5, O), Bj = usePopperScope$2(O), Vj = useRovingFocusGroupScope$1(O), Hj = useCollection(O), [Uj, Wj] = React$1.useState(null), Gj = React$1.useRef(null), qj = useComposedRefs$1(E, Gj, Rj.onContentChange), Jj = React$1.useRef(0), Yj = React$1.useRef(""), Xj = React$1.useRef(0), Zj = React$1.useRef(null), Qj = React$1.useRef("right"), $j = React$1.useRef(0), eM = Z ? Combination_default : React$1.Fragment, tM = Z ? {
+	let { __scopeMenu: O, loop: A = !1, trapFocus: j, onOpenAutoFocus: M, onCloseAutoFocus: N, disableOutsidePointerEvents: P, onEntryFocus: z, onEscapeKeyDown: B, onPointerDownOutside: H, onFocusOutside: U, onInteractOutside: W, onDismiss: G, disableOutsideScroll: Z, ...Aj } = _, jj = useMenuContext(CONTENT_NAME$5, O), Mj = useMenuRootContext(CONTENT_NAME$5, O), Nj = usePopperScope$2(O), Pj = useRovingFocusGroupScope$1(O), Fj = useCollection(O), [Ij, Lj] = React$1.useState(null), Rj = React$1.useRef(null), Bj = useComposedRefs$1(E, Rj, jj.onContentChange), Vj = React$1.useRef(0), Hj = React$1.useRef(""), Uj = React$1.useRef(0), Wj = React$1.useRef(null), Gj = React$1.useRef("right"), Kj = React$1.useRef(0), qj = Z ? Combination_default : React$1.Fragment, Jj = Z ? {
 		as: Slot$1,
 		allowPinchZoom: !0
-	} : void 0, nM = (n) => {
-		let _ = Yj.current + n, E = Hj().filter((n) => !n.disabled), O = document.activeElement, A = E.find((n) => n.ref.current === O)?.textValue, j = getNextMatch(E.map((n) => n.textValue), _, A), M = E.find((n) => n.textValue === j)?.ref.current;
+	} : void 0, Yj = (n) => {
+		let _ = Hj.current + n, E = Fj().filter((n) => !n.disabled), O = document.activeElement, A = E.find((n) => n.ref.current === O)?.textValue, j = getNextMatch(E.map((n) => n.textValue), _, A), M = E.find((n) => n.textValue === j)?.ref.current;
 		(function n(_) {
-			Yj.current = _, window.clearTimeout(Jj.current), _ !== "" && (Jj.current = window.setTimeout(() => n(""), 1e3));
+			Hj.current = _, window.clearTimeout(Vj.current), _ !== "" && (Vj.current = window.setTimeout(() => n(""), 1e3));
 		})(_), M && setTimeout(() => M.focus());
 	};
-	React$1.useEffect(() => () => window.clearTimeout(Jj.current), []), useFocusGuards();
-	let rM = React$1.useCallback((n) => Qj.current === Zj.current?.side && isPointerInGraceArea(n, Zj.current?.area), []);
+	React$1.useEffect(() => () => window.clearTimeout(Vj.current), []), useFocusGuards();
+	let Xj = React$1.useCallback((n) => Gj.current === Wj.current?.side && isPointerInGraceArea(n, Wj.current?.area), []);
 	return /* @__PURE__ */ jsx(MenuContentProvider, {
 		scope: O,
-		searchRef: Yj,
+		searchRef: Hj,
 		onItemEnter: React$1.useCallback((n) => {
-			rM(n) && n.preventDefault();
-		}, [rM]),
+			Xj(n) && n.preventDefault();
+		}, [Xj]),
 		onItemLeave: React$1.useCallback((n) => {
-			rM(n) || (Gj.current?.focus(), Wj(null));
-		}, [rM]),
+			Xj(n) || (Rj.current?.focus(), Lj(null));
+		}, [Xj]),
 		onTriggerLeave: React$1.useCallback((n) => {
-			rM(n) && n.preventDefault();
-		}, [rM]),
-		pointerGraceTimerRef: Xj,
+			Xj(n) && n.preventDefault();
+		}, [Xj]),
+		pointerGraceTimerRef: Uj,
 		onPointerGraceIntentChange: React$1.useCallback((n) => {
-			Zj.current = n;
+			Wj.current = n;
 		}, []),
-		children: /* @__PURE__ */ jsx(eM, {
-			...tM,
+		children: /* @__PURE__ */ jsx(qj, {
+			...Jj,
 			children: /* @__PURE__ */ jsx(FocusScope, {
 				asChild: !0,
 				trapped: j,
 				onMountAutoFocus: composeEventHandlers(M, (n) => {
-					n.preventDefault(), Gj.current?.focus({ preventScroll: !0 });
+					n.preventDefault(), Rj.current?.focus({ preventScroll: !0 });
 				}),
 				onUnmountAutoFocus: N,
 				children: /* @__PURE__ */ jsx(DismissableLayer, {
@@ -3381,44 +3381,44 @@ var CONTENT_NAME$5 = "MenuContent", [MenuContentProvider, useMenuContentContext]
 					onDismiss: G,
 					children: /* @__PURE__ */ jsx(Root$2, {
 						asChild: !0,
-						...Vj,
-						dir: zj.dir,
+						...Pj,
+						dir: Mj.dir,
 						orientation: "vertical",
 						loop: A,
-						currentTabStopId: Uj,
-						onCurrentTabStopIdChange: Wj,
+						currentTabStopId: Ij,
+						onCurrentTabStopIdChange: Lj,
 						onEntryFocus: composeEventHandlers(z, (n) => {
-							zj.isUsingKeyboardRef.current || n.preventDefault();
+							Mj.isUsingKeyboardRef.current || n.preventDefault();
 						}),
 						preventScrollOnEntryFocus: !0,
 						children: /* @__PURE__ */ jsx(Content$1, {
 							role: "menu",
 							"aria-orientation": "vertical",
-							"data-state": getOpenState(Rj.open),
+							"data-state": getOpenState(jj.open),
 							"data-radix-menu-content": "",
-							dir: zj.dir,
-							...Bj,
-							...Lj,
-							ref: qj,
+							dir: Mj.dir,
+							...Nj,
+							...Aj,
+							ref: Bj,
 							style: {
 								outline: "none",
-								...Lj.style
+								...Aj.style
 							},
-							onKeyDown: composeEventHandlers(Lj.onKeyDown, (n) => {
+							onKeyDown: composeEventHandlers(Aj.onKeyDown, (n) => {
 								let _ = n.target.closest("[data-radix-menu-content]") === n.currentTarget, E = n.ctrlKey || n.altKey || n.metaKey, O = n.key.length === 1;
-								_ && (n.key === "Tab" && n.preventDefault(), !E && O && nM(n.key));
-								let A = Gj.current;
+								_ && (n.key === "Tab" && n.preventDefault(), !E && O && Yj(n.key));
+								let A = Rj.current;
 								if (n.target !== A || !FIRST_LAST_KEYS.includes(n.key)) return;
 								n.preventDefault();
-								let j = Hj().filter((n) => !n.disabled).map((n) => n.ref.current);
+								let j = Fj().filter((n) => !n.disabled).map((n) => n.ref.current);
 								LAST_KEYS.includes(n.key) && j.reverse(), focusFirst(j);
 							}),
 							onBlur: composeEventHandlers(_.onBlur, (n) => {
-								n.currentTarget.contains(n.target) || (window.clearTimeout(Jj.current), Yj.current = "");
+								n.currentTarget.contains(n.target) || (window.clearTimeout(Vj.current), Hj.current = "");
 							}),
 							onPointerMove: composeEventHandlers(_.onPointerMove, whenMouse((n) => {
-								let _ = n.target, E = $j.current !== n.clientX;
-								n.currentTarget.contains(_) && E && (Qj.current = n.clientX > $j.current ? "right" : "left", $j.current = n.clientX);
+								let _ = n.target, E = Kj.current !== n.clientX;
+								n.currentTarget.contains(_) && E && (Gj.current = n.clientX > Kj.current ? "right" : "left", Kj.current = n.clientX);
 							}))
 						})
 					})
@@ -4366,11 +4366,11 @@ function useStateMachine(_, E) {
 	return React$1.useReducer((n, _) => E[n][_] ?? n, _);
 }
 var SCROLL_AREA_NAME = "ScrollArea", [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME), [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME), ScrollArea = React$1.forwardRef((_, E) => {
-	let { __scopeScrollArea: O, type: A = "hover", dir: j, scrollHideDelay: M = 600, ...N } = _, [P, z] = React$1.useState(null), [B, H] = React$1.useState(null), [U, W] = React$1.useState(null), [G, Z] = React$1.useState(null), [Lj, Rj] = React$1.useState(null), [zj, Bj] = React$1.useState(0), [Vj, Hj] = React$1.useState(0), [Uj, Wj] = React$1.useState(!1), [Gj, qj] = React$1.useState(!1), Jj = useComposedRefs$1(E, (n) => z(n)), Yj = useDirection(j);
+	let { __scopeScrollArea: O, type: A = "hover", dir: j, scrollHideDelay: M = 600, ...N } = _, [P, z] = React$1.useState(null), [B, H] = React$1.useState(null), [U, W] = React$1.useState(null), [G, Z] = React$1.useState(null), [Aj, jj] = React$1.useState(null), [Mj, Nj] = React$1.useState(0), [Pj, Fj] = React$1.useState(0), [Ij, Lj] = React$1.useState(!1), [Rj, Bj] = React$1.useState(!1), Vj = useComposedRefs$1(E, (n) => z(n)), Hj = useDirection(j);
 	return /* @__PURE__ */ jsx(ScrollAreaProvider, {
 		scope: O,
 		type: A,
-		dir: Yj,
+		dir: Hj,
 		scrollHideDelay: M,
 		scrollArea: P,
 		viewport: B,
@@ -4379,22 +4379,22 @@ var SCROLL_AREA_NAME = "ScrollArea", [createScrollAreaContext, createScrollAreaS
 		onContentChange: W,
 		scrollbarX: G,
 		onScrollbarXChange: Z,
-		scrollbarXEnabled: Uj,
-		onScrollbarXEnabledChange: Wj,
-		scrollbarY: Lj,
-		onScrollbarYChange: Rj,
-		scrollbarYEnabled: Gj,
-		onScrollbarYEnabledChange: qj,
-		onCornerWidthChange: Bj,
-		onCornerHeightChange: Hj,
+		scrollbarXEnabled: Ij,
+		onScrollbarXEnabledChange: Lj,
+		scrollbarY: Aj,
+		onScrollbarYChange: jj,
+		scrollbarYEnabled: Rj,
+		onScrollbarYEnabledChange: Bj,
+		onCornerWidthChange: Nj,
+		onCornerHeightChange: Fj,
 		children: /* @__PURE__ */ jsx(Primitive.div, {
-			dir: Yj,
+			dir: Hj,
 			...N,
-			ref: Jj,
+			ref: Vj,
 			style: {
 				position: "relative",
-				"--radix-scroll-area-corner-width": zj + "px",
-				"--radix-scroll-area-corner-height": Vj + "px",
+				"--radix-scroll-area-corner-width": Mj + "px",
+				"--radix-scroll-area-corner-height": Pj + "px",
 				..._.style
 			}
 		})
@@ -4665,46 +4665,46 @@ var ScrollAreaScrollbarHover = React$1.forwardRef((_, E) => {
 		}
 	});
 }), [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME), ScrollAreaScrollbarImpl = React$1.forwardRef((_, E) => {
-	let { __scopeScrollArea: O, sizes: A, hasThumb: j, onThumbChange: M, onThumbPointerUp: N, onThumbPointerDown: P, onThumbPositionChange: z, onDragScroll: B, onWheelScroll: H, onResize: U, ...W } = _, G = useScrollAreaContext(SCROLLBAR_NAME, O), [Z, Lj] = React$1.useState(null), Rj = useComposedRefs$1(E, (n) => Lj(n)), zj = React$1.useRef(null), Bj = React$1.useRef(""), Vj = G.viewport, Hj = A.content - A.viewport, Uj = useCallbackRef(H), Wj = useCallbackRef(z), Gj = useDebounceCallback(U, 10);
-	function qj(n) {
-		zj.current && B({
-			x: n.clientX - zj.current.left,
-			y: n.clientY - zj.current.top
+	let { __scopeScrollArea: O, sizes: A, hasThumb: j, onThumbChange: M, onThumbPointerUp: N, onThumbPointerDown: P, onThumbPositionChange: z, onDragScroll: B, onWheelScroll: H, onResize: U, ...W } = _, G = useScrollAreaContext(SCROLLBAR_NAME, O), [Z, Aj] = React$1.useState(null), jj = useComposedRefs$1(E, (n) => Aj(n)), Mj = React$1.useRef(null), Nj = React$1.useRef(""), Pj = G.viewport, Fj = A.content - A.viewport, Ij = useCallbackRef(H), Lj = useCallbackRef(z), Rj = useDebounceCallback(U, 10);
+	function Bj(n) {
+		Mj.current && B({
+			x: n.clientX - Mj.current.left,
+			y: n.clientY - Mj.current.top
 		});
 	}
 	return React$1.useEffect(() => {
 		let n = (n) => {
 			let _ = n.target;
-			Z?.contains(_) && Uj(n, Hj);
+			Z?.contains(_) && Ij(n, Fj);
 		};
 		return document.addEventListener("wheel", n, { passive: !1 }), () => document.removeEventListener("wheel", n, { passive: !1 });
 	}, [
-		Vj,
+		Pj,
 		Z,
-		Hj,
-		Uj
-	]), React$1.useEffect(Wj, [A, Wj]), useResizeObserver(Z, Gj), useResizeObserver(G.content, Gj), /* @__PURE__ */ jsx(ScrollbarProvider, {
+		Fj,
+		Ij
+	]), React$1.useEffect(Lj, [A, Lj]), useResizeObserver(Z, Rj), useResizeObserver(G.content, Rj), /* @__PURE__ */ jsx(ScrollbarProvider, {
 		scope: O,
 		scrollbar: Z,
 		hasThumb: j,
 		onThumbChange: useCallbackRef(M),
 		onThumbPointerUp: useCallbackRef(N),
-		onThumbPositionChange: Wj,
+		onThumbPositionChange: Lj,
 		onThumbPointerDown: useCallbackRef(P),
 		children: /* @__PURE__ */ jsx(Primitive.div, {
 			...W,
-			ref: Rj,
+			ref: jj,
 			style: {
 				position: "absolute",
 				...W.style
 			},
 			onPointerDown: composeEventHandlers(_.onPointerDown, (n) => {
-				n.button === 0 && (n.target.setPointerCapture(n.pointerId), zj.current = Z.getBoundingClientRect(), Bj.current = document.body.style.webkitUserSelect, document.body.style.webkitUserSelect = "none", G.viewport && (G.viewport.style.scrollBehavior = "auto"), qj(n));
+				n.button === 0 && (n.target.setPointerCapture(n.pointerId), Mj.current = Z.getBoundingClientRect(), Nj.current = document.body.style.webkitUserSelect, document.body.style.webkitUserSelect = "none", G.viewport && (G.viewport.style.scrollBehavior = "auto"), Bj(n));
 			}),
-			onPointerMove: composeEventHandlers(_.onPointerMove, qj),
+			onPointerMove: composeEventHandlers(_.onPointerMove, Bj),
 			onPointerUp: composeEventHandlers(_.onPointerUp, (n) => {
 				let _ = n.target;
-				_.hasPointerCapture(n.pointerId) && _.releasePointerCapture(n.pointerId), document.body.style.webkitUserSelect = Bj.current, G.viewport && (G.viewport.style.scrollBehavior = ""), zj.current = null;
+				_.hasPointerCapture(n.pointerId) && _.releasePointerCapture(n.pointerId), document.body.style.webkitUserSelect = Nj.current, G.viewport && (G.viewport.style.scrollBehavior = ""), Mj.current = null;
 			})
 		})
 	});
@@ -4846,7 +4846,7 @@ function useResizeObserver(n, _) {
 	}, [n, E]);
 }
 var Root$1 = ScrollArea, Viewport = ScrollAreaViewport, Scrollbar = ScrollAreaScrollbar, Thumb$1 = ScrollAreaThumb, Corner = ScrollAreaCorner, SWITCH_NAME = "Switch", [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME), [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME), Switch = React$1.forwardRef((_, E) => {
-	let { __scopeSwitch: O, name: A, checked: j, defaultChecked: M, required: N, disabled: P, value: z = "on", onCheckedChange: B, form: H, ...U } = _, [W, G] = React$1.useState(null), Z = useComposedRefs$1(E, (n) => G(n)), Lj = React$1.useRef(!1), Rj = W ? H || !!W.closest("form") : !0, [zj, Bj] = useControllableState({
+	let { __scopeSwitch: O, name: A, checked: j, defaultChecked: M, required: N, disabled: P, value: z = "on", onCheckedChange: B, form: H, ...U } = _, [W, G] = React$1.useState(null), Z = useComposedRefs$1(E, (n) => G(n)), Aj = React$1.useRef(!1), jj = W ? H || !!W.closest("form") : !0, [Mj, Nj] = useControllableState({
 		prop: j,
 		defaultProp: M ?? !1,
 		onChange: B,
@@ -4854,28 +4854,28 @@ var Root$1 = ScrollArea, Viewport = ScrollAreaViewport, Scrollbar = ScrollAreaSc
 	});
 	return /* @__PURE__ */ jsxs(SwitchProvider, {
 		scope: O,
-		checked: zj,
+		checked: Mj,
 		disabled: P,
 		children: [/* @__PURE__ */ jsx(Primitive.button, {
 			type: "button",
 			role: "switch",
-			"aria-checked": zj,
+			"aria-checked": Mj,
 			"aria-required": N,
-			"data-state": getState(zj),
+			"data-state": getState(Mj),
 			"data-disabled": P ? "" : void 0,
 			disabled: P,
 			value: z,
 			...U,
 			ref: Z,
 			onClick: composeEventHandlers(_.onClick, (n) => {
-				Bj((n) => !n), Rj && (Lj.current = n.isPropagationStopped(), Lj.current || n.stopPropagation());
+				Nj((n) => !n), jj && (Aj.current = n.isPropagationStopped(), Aj.current || n.stopPropagation());
 			})
-		}), Rj && /* @__PURE__ */ jsx(SwitchBubbleInput, {
+		}), jj && /* @__PURE__ */ jsx(SwitchBubbleInput, {
 			control: W,
-			bubbles: !Lj.current,
+			bubbles: !Aj.current,
 			name: A,
 			value: z,
-			checked: zj,
+			checked: Mj,
 			required: N,
 			disabled: P,
 			form: H,
@@ -5059,22 +5059,22 @@ var Root2 = Tabs, List = TabsList, Trigger = TabsTrigger, Content = TabsContent,
 };
 TooltipProvider.displayName = PROVIDER_NAME;
 var TOOLTIP_NAME = "Tooltip", [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME), Tooltip = (_) => {
-	let { __scopeTooltip: E, children: O, open: A, defaultOpen: j, onOpenChange: M, disableHoverableContent: N, delayDuration: P } = _, z = useTooltipProviderContext(TOOLTIP_NAME, _.__scopeTooltip), B = usePopperScope(E), [H, U] = React$1.useState(null), W = useId$1(), G = React$1.useRef(0), Z = N ?? z.disableHoverableContent, Lj = P ?? z.delayDuration, Rj = React$1.useRef(!1), [zj, Bj] = useControllableState({
+	let { __scopeTooltip: E, children: O, open: A, defaultOpen: j, onOpenChange: M, disableHoverableContent: N, delayDuration: P } = _, z = useTooltipProviderContext(TOOLTIP_NAME, _.__scopeTooltip), B = usePopperScope(E), [H, U] = React$1.useState(null), W = useId$1(), G = React$1.useRef(0), Z = N ?? z.disableHoverableContent, Aj = P ?? z.delayDuration, jj = React$1.useRef(!1), [Mj, Nj] = useControllableState({
 		prop: A,
 		defaultProp: j ?? !1,
 		onChange: (n) => {
 			n ? (z.onOpen(), document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN))) : z.onClose(), M?.(n);
 		},
 		caller: TOOLTIP_NAME
-	}), Vj = React$1.useMemo(() => zj ? Rj.current ? "delayed-open" : "instant-open" : "closed", [zj]), Hj = React$1.useCallback(() => {
-		window.clearTimeout(G.current), G.current = 0, Rj.current = !1, Bj(!0);
-	}, [Bj]), Uj = React$1.useCallback(() => {
-		window.clearTimeout(G.current), G.current = 0, Bj(!1);
-	}, [Bj]), Wj = React$1.useCallback(() => {
+	}), Pj = React$1.useMemo(() => Mj ? jj.current ? "delayed-open" : "instant-open" : "closed", [Mj]), Fj = React$1.useCallback(() => {
+		window.clearTimeout(G.current), G.current = 0, jj.current = !1, Nj(!0);
+	}, [Nj]), Ij = React$1.useCallback(() => {
+		window.clearTimeout(G.current), G.current = 0, Nj(!1);
+	}, [Nj]), Lj = React$1.useCallback(() => {
 		window.clearTimeout(G.current), G.current = window.setTimeout(() => {
-			Rj.current = !0, Bj(!0), G.current = 0;
-		}, Lj);
-	}, [Lj, Bj]);
+			jj.current = !0, Nj(!0), G.current = 0;
+		}, Aj);
+	}, [Aj, Nj]);
 	return React$1.useEffect(() => () => {
 		G.current &&= (window.clearTimeout(G.current), 0);
 	}, []), /* @__PURE__ */ jsx(Root2$4, {
@@ -5082,22 +5082,22 @@ var TOOLTIP_NAME = "Tooltip", [TooltipContextProvider, useTooltipContext] = crea
 		children: /* @__PURE__ */ jsx(TooltipContextProvider, {
 			scope: E,
 			contentId: W,
-			open: zj,
-			stateAttribute: Vj,
+			open: Mj,
+			stateAttribute: Pj,
 			trigger: H,
 			onTriggerChange: U,
 			onTriggerEnter: React$1.useCallback(() => {
-				z.isOpenDelayedRef.current ? Wj() : Hj();
+				z.isOpenDelayedRef.current ? Lj() : Fj();
 			}, [
 				z.isOpenDelayedRef,
-				Wj,
-				Hj
+				Lj,
+				Fj
 			]),
 			onTriggerLeave: React$1.useCallback(() => {
-				Z ? Uj() : (window.clearTimeout(G.current), G.current = 0);
-			}, [Uj, Z]),
-			onOpen: Hj,
-			onClose: Uj,
+				Z ? Ij() : (window.clearTimeout(G.current), G.current = 0);
+			}, [Ij, Z]),
+			onOpen: Fj,
+			onClose: Ij,
 			disableHoverableContent: Z,
 			children: O
 		})
@@ -5910,14 +5910,14 @@ var I$3 = React$1.forwardRef((_, E) => {
 	React$1.useEffect(() => U(O), [O]);
 	let [W, G] = React$1.useState(A);
 	React$1.useEffect(() => G(A), [A]);
-	let [Z, Lj] = React$1.useState(j);
-	React$1.useEffect(() => Lj(j), [j]);
-	let [Rj, zj] = React$1.useState(M);
-	React$1.useEffect(() => zj(M), [M]);
-	let [Bj, Vj] = React$1.useState(N);
-	React$1.useEffect(() => Vj(N), [N]);
-	let [Hj, Uj] = React$1.useState(P);
-	return React$1.useEffect(() => Uj(P), [P]), React$1.createElement(A$2, {
+	let [Z, Aj] = React$1.useState(j);
+	React$1.useEffect(() => Aj(j), [j]);
+	let [jj, Mj] = React$1.useState(M);
+	React$1.useEffect(() => Mj(M), [M]);
+	let [Nj, Pj] = React$1.useState(N);
+	React$1.useEffect(() => Pj(N), [N]);
+	let [Fj, Ij] = React$1.useState(P);
+	return React$1.useEffect(() => Ij(P), [P]), React$1.createElement(A$2, {
 		...B,
 		ref: E,
 		isRoot: !0,
@@ -5925,62 +5925,62 @@ var I$3 = React$1.forwardRef((_, E) => {
 		appearance: H,
 		accentColor: W,
 		grayColor: Z,
-		panelBackground: Rj,
-		radius: Bj,
-		scaling: Hj,
+		panelBackground: jj,
+		radius: Nj,
+		scaling: Fj,
 		onAppearanceChange: U,
 		onAccentColorChange: G,
-		onGrayColorChange: Lj,
-		onPanelBackgroundChange: zj,
-		onRadiusChange: Vj,
-		onScalingChange: Uj
+		onGrayColorChange: Aj,
+		onPanelBackgroundChange: Mj,
+		onRadiusChange: Pj,
+		onScalingChange: Ij
 	});
 });
 I$3.displayName = "ThemeRoot";
 var A$2 = React$1.forwardRef((_, E) => {
-	let O = React$1.useContext(P$3), { asChild: A, isRoot: j, hasBackground: M, appearance: N = O?.appearance ?? s$13.appearance.default, accentColor: P = O?.accentColor ?? s$13.accentColor.default, grayColor: z = O?.resolvedGrayColor ?? s$13.grayColor.default, panelBackground: B = O?.panelBackground ?? s$13.panelBackground.default, radius: H = O?.radius ?? s$13.radius.default, scaling: U = O?.scaling ?? s$13.scaling.default, onAppearanceChange: W = d$5, onAccentColorChange: G = d$5, onGrayColorChange: Z = d$5, onPanelBackgroundChange: Lj = d$5, onRadiusChange: Rj = d$5, onScalingChange: zj = d$5, ...Bj } = _, Vj = A ? Slot$3 : "div", Hj = z === "auto" ? a$12(P) : z, Uj = _.appearance === "light" || _.appearance === "dark", Wj = M === void 0 ? j || Uj : M;
+	let O = React$1.useContext(P$3), { asChild: A, isRoot: j, hasBackground: M, appearance: N = O?.appearance ?? s$13.appearance.default, accentColor: P = O?.accentColor ?? s$13.accentColor.default, grayColor: z = O?.resolvedGrayColor ?? s$13.grayColor.default, panelBackground: B = O?.panelBackground ?? s$13.panelBackground.default, radius: H = O?.radius ?? s$13.radius.default, scaling: U = O?.scaling ?? s$13.scaling.default, onAppearanceChange: W = d$5, onAccentColorChange: G = d$5, onGrayColorChange: Z = d$5, onPanelBackgroundChange: Aj = d$5, onRadiusChange: jj = d$5, onScalingChange: Mj = d$5, ...Nj } = _, Pj = A ? Slot$3 : "div", Fj = z === "auto" ? a$12(P) : z, Ij = _.appearance === "light" || _.appearance === "dark", Lj = M === void 0 ? j || Ij : M;
 	return React$1.createElement(P$3.Provider, { value: React$1.useMemo(() => ({
 		appearance: N,
 		accentColor: P,
 		grayColor: z,
-		resolvedGrayColor: Hj,
+		resolvedGrayColor: Fj,
 		panelBackground: B,
 		radius: H,
 		scaling: U,
 		onAppearanceChange: W,
 		onAccentColorChange: G,
 		onGrayColorChange: Z,
-		onPanelBackgroundChange: Lj,
-		onRadiusChange: Rj,
-		onScalingChange: zj
+		onPanelBackgroundChange: Aj,
+		onRadiusChange: jj,
+		onScalingChange: Mj
 	}), [
 		N,
 		P,
 		z,
-		Hj,
+		Fj,
 		B,
 		H,
 		U,
 		W,
 		G,
 		Z,
-		Lj,
-		Rj,
-		zj
-	]) }, React$1.createElement(Vj, {
+		Aj,
+		jj,
+		Mj
+	]) }, React$1.createElement(Pj, {
 		"data-is-root-theme": j ? "true" : "false",
 		"data-accent-color": P,
-		"data-gray-color": Hj,
-		"data-has-background": Wj ? "true" : "false",
+		"data-gray-color": Fj,
+		"data-has-background": Lj ? "true" : "false",
 		"data-panel-background": B,
 		"data-radius": H,
 		"data-scaling": U,
 		ref: E,
-		...Bj,
+		...Nj,
 		className: (0, import_classnames$18.default)("radix-themes", {
 			light: N === "light",
 			dark: N === "dark"
-		}, Bj.className)
+		}, Nj.className)
 	}));
 });
 A$2.displayName = "ThemeImpl";
@@ -6752,7 +6752,7 @@ function S$2(n) {
 	return [(0, import_classnames$10.default)(_, O, j, N, z, H, W), l$1(E, A, M, P, B, U, G)];
 }
 var import_classnames$9 = /* @__PURE__ */ __toESM(require_classnames()), c = React$1.forwardRef((_, E) => {
-	let { rest: O, ...A } = a$5(_), [j, M] = S$2(A), { asChild: N, children: P, className: z, style: B, type: H, scrollHideDelay: U = H === "scroll" ? void 0 : 0, dir: W, size: G = t$3.size.default, radius: Z = t$3.radius.default, scrollbars: Lj = t$3.scrollbars.default, ...Rj } = O;
+	let { rest: O, ...A } = a$5(_), [j, M] = S$2(A), { asChild: N, children: P, className: z, style: B, type: H, scrollHideDelay: U = H === "scroll" ? void 0 : 0, dir: W, size: G = t$3.size.default, radius: Z = t$3.radius.default, scrollbars: Aj = t$3.scrollbars.default, ...jj } = O;
 	return React$1.createElement(Root$1, {
 		type: H,
 		scrollHideDelay: U,
@@ -6763,10 +6763,10 @@ var import_classnames$9 = /* @__PURE__ */ __toESM(require_classnames()), c = Rea
 		asChild: N,
 		children: P
 	}, (_) => React$1.createElement(React$1.Fragment, null, React$1.createElement(Viewport, {
-		...Rj,
+		...jj,
 		ref: E,
 		className: "rt-ScrollAreaViewport"
-	}, _), React$1.createElement("div", { className: "rt-ScrollAreaViewportFocusRing" }), Lj === "vertical" ? null : React$1.createElement(Scrollbar, {
+	}, _), React$1.createElement("div", { className: "rt-ScrollAreaViewportFocusRing" }), Aj === "vertical" ? null : React$1.createElement(Scrollbar, {
 		"data-radius": Z,
 		orientation: "horizontal",
 		className: (0, import_classnames$9.default)("rt-ScrollAreaScrollbar", g$3({
@@ -6774,7 +6774,7 @@ var import_classnames$9 = /* @__PURE__ */ __toESM(require_classnames()), c = Rea
 			value: G,
 			propValues: t$3.size.values
 		}))
-	}, React$1.createElement(Thumb$1, { className: "rt-ScrollAreaThumb" })), Lj === "horizontal" ? null : React$1.createElement(Scrollbar, {
+	}, React$1.createElement(Thumb$1, { className: "rt-ScrollAreaThumb" })), Aj === "horizontal" ? null : React$1.createElement(Scrollbar, {
 		"data-radius": Z,
 		orientation: "vertical",
 		className: (0, import_classnames$9.default)("rt-ScrollAreaScrollbar", g$3({
@@ -6782,7 +6782,7 @@ var import_classnames$9 = /* @__PURE__ */ __toESM(require_classnames()), c = Rea
 			value: G,
 			propValues: t$3.size.values
 		}))
-	}, React$1.createElement(Thumb$1, { className: "rt-ScrollAreaThumb" })), Lj === "both" ? React$1.createElement(Corner, { className: "rt-ScrollAreaCorner" }) : null)));
+	}, React$1.createElement(Thumb$1, { className: "rt-ScrollAreaThumb" })), Aj === "both" ? React$1.createElement(Corner, { className: "rt-ScrollAreaCorner" }) : null)));
 });
 c.displayName = "ScrollArea";
 var n$2 = {
@@ -7985,17 +7985,17 @@ function $e({ document: n, event: _, hitRegions: E, initialLayoutMap: O, mounted
 	E.forEach((n) => {
 		let { group: E, groupSize: P } = n, { disableCursor: z, orientation: B, panels: H } = E, U = 0;
 		U = j ? B === "horizontal" ? (_.clientX - j.x) / P * 100 : (_.clientY - j.y) / P * 100 : B === "horizontal" ? _.clientX < 0 ? -100 : 100 : _.clientY < 0 ? -100 : 100;
-		let W = O.get(E), { defaultLayoutDeferred: G, derivedPanelConstraints: Z, layout: Lj, separatorToPanels: Rj } = A.get(E) ?? { defaultLayoutDeferred: !1 };
-		if (Z && W && Lj && Rj) {
+		let W = O.get(E), { defaultLayoutDeferred: G, derivedPanelConstraints: Z, layout: Aj, separatorToPanels: jj } = A.get(E) ?? { defaultLayoutDeferred: !1 };
+		if (Z && W && Aj && jj) {
 			let _ = Z$1({
 				delta: U,
 				initialLayout: W,
 				panelConstraints: Z,
 				pivotIndices: n.panels.map((n) => H.indexOf(n)),
-				prevLayout: Lj,
+				prevLayout: Aj,
 				trigger: "mouse-or-touch"
 			});
-			if (B$1(_, Lj)) {
+			if (B$1(_, Aj)) {
 				if (U !== 0 && !z) switch (B) {
 					case "horizontal":
 						M |= U < 0 ? De : Oe$1;
@@ -8009,7 +8009,7 @@ function $e({ document: n, event: _, hitRegions: E, initialLayoutMap: O, mounted
 					defaultLayoutDeferred: G,
 					derivedPanelConstraints: Z,
 					layout: _,
-					separatorToPanels: Rj
+					separatorToPanels: jj
 				});
 				let E = n.group.panels.map(({ id: n }) => n).join(",");
 				n.group.inMemoryLayouts[E] = _;
@@ -8221,64 +8221,64 @@ function Pt(n, _) {
 function Rt({ children: n, className: _, defaultLayout: E, disableCursor: O, disabled: A, elementRef: j, groupRef: M, id: N, onLayoutChange: P, orientation: z = "horizontal", style: B, ...H }) {
 	let U = useRef({}), G = le$1((n) => {
 		B$1(U.current, n) || (U.current = n, P?.(n));
-	}), Z = ae$1(N), Lj = useRef(null), [Rj, Hj] = useState(!1), [Uj, Wj] = useState(E ?? {}), [Gj, qj] = wt(), Jj = useRef({
+	}), Z = ae$1(N), Aj = useRef(null), [jj, Fj] = useState(!1), [Ij, Lj] = useState(E ?? {}), [Rj, Bj] = wt(), Vj = useRef({
 		lastExpandedPanelSizes: {},
 		layouts: {},
 		panels: [],
 		separators: []
-	}), Yj = ue$1(Lj, j);
+	}), Hj = ue$1(Aj, j);
 	Pt(Z, M);
-	let Xj = useMemo(() => ({
+	let Uj = useMemo(() => ({
 		id: Z,
 		orientation: z,
 		registerPanel: (n) => {
-			let _ = Jj.current;
-			return _.panels = ie$1(z, [..._.panels, n]), qj(), () => {
-				_.panels = _.panels.filter((_) => _ !== n), qj();
+			let _ = Vj.current;
+			return _.panels = ie$1(z, [..._.panels, n]), Bj(), () => {
+				_.panels = _.panels.filter((_) => _ !== n), Bj();
 			};
 		},
 		registerSeparator: (n) => {
-			let _ = Jj.current;
-			return _.separators = ie$1(z, [..._.separators, n]), qj(), () => {
-				_.separators = _.separators.filter((_) => _ !== n), qj();
+			let _ = Vj.current;
+			return _.separators = ie$1(z, [..._.separators, n]), Bj(), () => {
+				_.separators = _.separators.filter((_) => _ !== n), Bj();
 			};
 		}
 	}), [
 		Z,
-		qj,
+		Bj,
 		z
-	]), Zj = Lt({
+	]), Wj = Lt({
 		defaultLayout: E,
 		disableCursor: O
-	}), Qj = useRef(null);
+	}), Gj = useRef(null);
 	A$1(() => {
-		let n = Lj.current;
+		let n = Aj.current;
 		if (n === null) return;
-		let _ = Jj.current, E = {
-			defaultLayout: Zj.defaultLayout,
-			disableCursor: !!Zj.disableCursor,
+		let _ = Vj.current, E = {
+			defaultLayout: Wj.defaultLayout,
+			disableCursor: !!Wj.disableCursor,
 			disabled: !!A,
 			element: n,
 			id: Z,
-			inMemoryLastExpandedPanelSizes: Jj.current.lastExpandedPanelSizes,
-			inMemoryLayouts: Jj.current.layouts,
+			inMemoryLastExpandedPanelSizes: Vj.current.lastExpandedPanelSizes,
+			inMemoryLayouts: Vj.current.layouts,
 			orientation: z,
 			panels: _.panels,
 			separators: _.separators
 		};
-		Qj.current = E;
+		Gj.current = E;
 		let O = bt(E), j = D$1().mountedGroups.get(E);
 		if (j) {
 			let { defaultLayoutDeferred: n, derivedPanelConstraints: _, layout: E } = j;
-			!n && _.length > 0 && (Wj(E), G?.(E));
+			!n && _.length > 0 && (Lj(E), G?.(E));
 		}
 		let M = T$1.addListener("interactionStateChange", (n) => {
 			switch (n.state) {
 				case "active":
-					Hj(n.hitRegions.some((n) => n.group === E));
+					Fj(n.hitRegions.some((n) => n.group === E));
 					break;
 				default:
-					Hj(!1);
+					Fj(!1);
 					break;
 			}
 		}), N = T$1.addListener("mountedGroupsChange", (n) => {
@@ -8286,30 +8286,30 @@ function Rt({ children: n, className: _, defaultLayout: E, disableCursor: O, dis
 			if (_) {
 				let { defaultLayoutDeferred: n, derivedPanelConstraints: E, layout: O } = _;
 				if (n || E.length === 0) return;
-				Wj(O), G?.(O);
+				Lj(O), G?.(O);
 			}
 		});
 		return () => {
-			Qj.current = null, O(), M(), N();
+			Gj.current = null, O(), M(), N();
 		};
 	}, [
 		A,
 		Z,
 		G,
 		z,
-		Gj,
-		Zj
+		Rj,
+		Wj
 	]), useEffect(() => {
-		let n = Qj.current;
+		let n = Gj.current;
 		n && (n.defaultLayout = E, n.disableCursor = !!O);
 	});
-	let $j = { [Fe]: Rj ? "none" : void 0 };
-	for (let n in Uj) {
+	let Kj = { [Fe]: jj ? "none" : void 0 };
+	for (let n in Ij) {
 		let _ = Ve(Z, n);
-		$j[_] = Uj[n];
+		Kj[_] = Ij[n];
 	}
 	return /* @__PURE__ */ jsx(je.Provider, {
-		value: Xj,
+		value: Uj,
 		children: /* @__PURE__ */ jsx("div", {
 			...H,
 			"aria-orientation": z,
@@ -8317,13 +8317,13 @@ function Rt({ children: n, className: _, defaultLayout: E, disableCursor: O, dis
 			"data-group": !0,
 			"data-testid": Z,
 			id: Z,
-			ref: Yj,
+			ref: Hj,
 			style: {
 				height: "100%",
 				width: "100%",
 				overflow: "hidden",
 				...B,
-				...$j,
+				...Kj,
 				display: "flex",
 				flexDirection: z === "horizontal" ? "row" : "column",
 				flexWrap: "nowrap"
@@ -8441,12 +8441,12 @@ function It(n, _) {
 	});
 }
 function kt({ children: n, className: _, collapsedSize: E = "0%", collapsible: O = !1, defaultSize: A, elementRef: j, id: M, maxSize: N = "100%", minSize: P = "0%", onResize: z, panelRef: B, style: H, ...U }) {
-	let W = !!M, G = ae$1(M), Z = useRef(null), Lj = ue$1(Z, j), { id: Rj, registerPanel: zj } = ce$1(), Vj = z !== null, Hj = le$1((n, _, E) => {
+	let W = !!M, G = ae$1(M), Z = useRef(null), Aj = ue$1(Z, j), { id: jj, registerPanel: Mj } = ce$1(), Pj = z !== null, Fj = le$1((n, _, E) => {
 		z?.(n, M, E);
 	});
 	A$1(() => {
 		let n = Z.current;
-		if (n !== null) return zj({
+		if (n !== null) return Mj({
 			element: n,
 			id: G,
 			idIsStable: W,
@@ -8454,7 +8454,7 @@ function kt({ children: n, className: _, collapsedSize: E = "0%", collapsible: O
 				expandToSize: void 0,
 				prevSize: void 0
 			},
-			onResize: Vj ? Hj : void 0,
+			onResize: Pj ? Fj : void 0,
 			panelConstraints: {
 				collapsedSize: E,
 				collapsible: O,
@@ -8467,25 +8467,25 @@ function kt({ children: n, className: _, collapsedSize: E = "0%", collapsible: O
 		E,
 		O,
 		A,
-		Vj,
+		Pj,
 		G,
 		W,
 		N,
 		P,
-		Hj,
-		zj
+		Fj,
+		Mj
 	]), It(G, B);
-	let Uj = Ve(Rj, G);
+	let Ij = Ve(jj, G);
 	return /* @__PURE__ */ jsx("div", {
 		...U,
 		"data-panel": !0,
 		"data-testid": G,
 		id: G,
-		ref: Lj,
+		ref: Aj,
 		style: {
 			...Gt,
 			flexBasis: 0,
-			flexGrow: `var(${Uj}, 1)`,
+			flexGrow: `var(${Ij}, 1)`,
 			flexShrink: 1,
 			overflow: "hidden",
 			pointerEvents: `var(${Fe})`
@@ -8548,7 +8548,7 @@ function Dt({ layout: n, panelConstraints: _, panelId: E, panelIndex: O }) {
 	};
 }
 function Ot({ children: n, className: _, elementRef: E, id: O, style: A, ...j }) {
-	let M = ae$1(O), [N, P] = useState({}), [z, B] = useState("inactive"), H = useRef(null), U = ue$1(H, E), { id: W, orientation: G, registerSeparator: Z } = ce$1(), Lj = G === "horizontal" ? "vertical" : "horizontal";
+	let M = ae$1(O), [N, P] = useState({}), [z, B] = useState("inactive"), H = useRef(null), U = ue$1(H, E), { id: W, orientation: G, registerSeparator: Z } = ce$1(), Aj = G === "horizontal" ? "vertical" : "horizontal";
 	return A$1(() => {
 		let n = H.current;
 		if (n !== null) {
@@ -8584,7 +8584,7 @@ function Ot({ children: n, className: _, elementRef: E, id: O, style: A, ...j })
 	]), /* @__PURE__ */ jsx("div", {
 		...j,
 		"aria-controls": N.valueControls,
-		"aria-orientation": Lj,
+		"aria-orientation": Aj,
 		"aria-valuemax": N.valueMax,
 		"aria-valuemin": N.valueMin,
 		"aria-valuenow": N.valueNow,
@@ -8750,7 +8750,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			}
 			return n;
 		});
-	}, []), Lj = React.useCallback(() => {
+	}, []), Aj = React.useCallback(() => {
 		M((n) => {
 			if (n.clipboard.length > 0) {
 				let _ = n.clipboard.map((n) => ({
@@ -8769,9 +8769,9 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			}
 			return n;
 		});
-	}, []), Rj = React.useCallback((n) => {
+	}, []), jj = React.useCallback((n) => {
 		let _ = {};
-		n.type === "box" && (_.backgroundColor = "var(--gray-4)");
+		n.type === "box" && (_.backgroundColor = "var(--gray-4)"), n.type === "text-container" && (_.backgroundColor = "var(--gray-4)", _.border = "1px solid var(--gray-8)", _.padding = "8px", _.display = "flex", _.alignItems = "flex-start", _.justifyContent = "flex-start");
 		let E = {
 			id: crypto.randomUUID(),
 			x: 50,
@@ -8794,7 +8794,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				selectedElementIds: [E.id]
 			};
 		});
-	}, []), zj = React.useCallback((n) => {
+	}, []), Mj = React.useCallback((n) => {
 		M((_) => {
 			let E = _.elements.filter((_) => _.id !== n), O = _.history.slice(0, _.historyIndex + 1);
 			return O.push(E), {
@@ -8805,7 +8805,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: O.length - 1
 			};
 		});
-	}, []), Bj = React.useCallback(() => {
+	}, []), Nj = React.useCallback(() => {
 		M((n) => {
 			if (n.selectedElementIds.length === 0) return n;
 			let _ = n.elements.filter((_) => !n.selectedElementIds.includes(_.id)), E = n.history.slice(0, n.historyIndex + 1);
@@ -8817,7 +8817,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: E.length - 1
 			};
 		});
-	}, []), Hj = React.useCallback((n, _ = !1) => {
+	}, []), Fj = React.useCallback((n, _ = !1) => {
 		M((E) => {
 			if (n === null) return {
 				...E,
@@ -8834,12 +8834,12 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				selectedElementIds: [n]
 			};
 		});
-	}, []), Uj = React.useCallback((n) => {
+	}, []), Ij = React.useCallback((n) => {
 		M((_) => ({
 			..._,
 			selectedElementIds: n
 		}));
-	}, []), Wj = React.useCallback((n, _) => {
+	}, []), Lj = React.useCallback((n, _) => {
 		M((E) => {
 			let O = [...E.elements], A = O[n];
 			O.splice(n, 1), O.splice(_, 0, A);
@@ -8851,7 +8851,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: j.length - 1
 			};
 		});
-	}, []), Gj = React.useCallback((n, _, E = !0) => {
+	}, []), Rj = React.useCallback((n, _, E = !0) => {
 		M((O) => {
 			let A = O.elements.map((E) => E.id === n ? {
 				...E,
@@ -8864,7 +8864,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: M
 			};
 		});
-	}, []), qj = React.useCallback((n, _ = !0) => {
+	}, []), Bj = React.useCallback((n, _ = !0) => {
 		M((E) => {
 			let O = [...E.elements], A = [], j = /* @__PURE__ */ new Set();
 			n.forEach(({ id: n, changes: _ }) => {
@@ -8918,7 +8918,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: P
 			};
 		});
-	}, []), Jj = React.useCallback((n) => {
+	}, []), Vj = React.useCallback((n) => {
 		M((_) => {
 			let E = _.elements.filter((_) => n.includes(_.id));
 			if (E.length === 0) return _;
@@ -8946,7 +8946,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: z.length - 1
 			};
 		});
-	}, []), Yj = React.useCallback((n) => {
+	}, []), Hj = React.useCallback((n) => {
 		M((_) => {
 			let E = _.elements.find((_) => _.id === n);
 			if (!E || E.type !== "group") return _;
@@ -8962,7 +8962,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: j.length - 1
 			};
 		});
-	}, []), Xj = React.useCallback((n, _) => {
+	}, []), Uj = React.useCallback((n, _) => {
 		M((E) => {
 			let O = E.elements.map((E) => E.id === n ? {
 				...E,
@@ -8973,7 +8973,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				elements: O
 			};
 		});
-	}, []), Zj = React.useCallback((n, _) => {
+	}, []), Wj = React.useCallback((n, _) => {
 		if (!n.find((n) => n.id === _ && n.type === "group")) return n;
 		let E = n.filter((n) => n.groupId === _);
 		if (E.length === 0) return n;
@@ -8985,7 +8985,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			width: j - O,
 			height: M - A
 		} : n);
-	}, []), Qj = React.useCallback((n, _) => {
+	}, []), Gj = React.useCallback((n, _) => {
 		M((E) => {
 			let O = E.elements.find((_) => _.id === n), A = E.elements.find((n) => n.id === _ && n.type === "group");
 			if (!O || !A) return E;
@@ -8993,7 +8993,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				...E,
 				groupId: _
 			} : E);
-			j = Zj(j, _);
+			j = Wj(j, _);
 			let M = E.history.slice(0, E.historyIndex + 1);
 			return M.push(j), {
 				...E,
@@ -9002,7 +9002,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: M.length - 1
 			};
 		});
-	}, [Zj]), $j = React.useCallback((n) => {
+	}, [Wj]), Kj = React.useCallback((n) => {
 		M((_) => {
 			let E = _.elements.find((_) => _.id === n);
 			if (!E || !E.groupId) return _;
@@ -9010,7 +9010,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				..._,
 				groupId: void 0
 			} : _);
-			A = Zj(A, O);
+			A = Wj(A, O);
 			let j = _.history.slice(0, _.historyIndex + 1);
 			return j.push(A), {
 				..._,
@@ -9019,7 +9019,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: j.length - 1
 			};
 		});
-	}, [Zj]), eM = React.useCallback((n, _, E) => {
+	}, [Wj]), qj = React.useCallback((n, _, E) => {
 		M((O) => {
 			let A = O.elements.find((_) => _.id === n && _.type === "group");
 			if (!A) return O;
@@ -9048,13 +9048,13 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: B.length - 1
 			};
 		});
-	}, []), tM = React.useCallback((n, _) => {
+	}, []), Jj = React.useCallback((n, _) => {
 		M((E) => ({
 			...E,
 			mockData: n,
 			singleMockData: _
 		}));
-	}, []), nM = React.useCallback((n) => {
+	}, []), Yj = React.useCallback((n) => {
 		M((_) => ({
 			..._,
 			listSettings: {
@@ -9062,65 +9062,65 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				...n
 			}
 		}));
-	}, []), rM = React.useMemo(() => ({
+	}, []), Xj = React.useMemo(() => ({
 		state: j,
-		addElement: Rj,
-		removeElement: zj,
-		removeSelected: Bj,
-		selectElement: Hj,
-		setSelectedElements: Uj,
-		moveElement: Wj,
-		updateElement: Gj,
-		updateElements: qj,
-		groupElements: Jj,
-		ungroupElements: Yj,
-		renameElement: Xj,
-		addToGroup: Qj,
-		removeFromGroup: $j,
-		resizeGroup: eM,
-		setMockData: tM,
-		updateListSettings: nM,
+		addElement: jj,
+		removeElement: Mj,
+		removeSelected: Nj,
+		selectElement: Fj,
+		setSelectedElements: Ij,
+		moveElement: Lj,
+		updateElement: Rj,
+		updateElements: Bj,
+		groupElements: Vj,
+		ungroupElements: Hj,
+		renameElement: Uj,
+		addToGroup: Gj,
+		removeFromGroup: Kj,
+		resizeGroup: qj,
+		setMockData: Jj,
+		updateListSettings: Yj,
 		setCanvasHeight: N,
 		loadState: U,
 		undo: W,
 		redo: G,
 		copy: Z,
-		paste: Lj,
+		paste: Aj,
 		setGridSize: P,
 		setZoom: z,
 		setPan: B,
 		setSnapLines: H
 	}), [
 		j,
+		jj,
+		Mj,
+		Nj,
+		Fj,
+		Ij,
+		Lj,
 		Rj,
-		zj,
 		Bj,
+		Vj,
 		Hj,
 		Uj,
-		Wj,
 		Gj,
+		Kj,
 		qj,
 		Jj,
 		Yj,
-		Xj,
-		Qj,
-		$j,
-		eM,
-		tM,
-		nM,
 		N,
 		U,
 		W,
 		G,
 		Z,
-		Lj,
+		Aj,
 		P,
 		z,
 		B,
 		H
 	]);
 	return /* @__PURE__ */ jsx(EditorContext.Provider, {
-		value: rM,
+		value: Xj,
 		children: n
 	});
 }, useEditor = () => {
@@ -9562,16 +9562,16 @@ var __assign$1 = function() {
 			maxHeight: _
 		};
 	}, _.prototype.calculateNewSizeFromDirection = function(n, _) {
-		var E = this.props.scale || 1, O = normalizeToPair(this.props.resizeRatio || 1), A = O[0], j = O[1], M = this.state, N = M.direction, P = M.original, z = this.props, B = z.lockAspectRatio, H = z.lockAspectRatioExtraHeight, U = z.lockAspectRatioExtraWidth, W = P.width, G = P.height, Z = H || 0, Lj = U || 0;
-		return hasDirection("right", N) && (W = P.width + (n - P.x) * A / E, B && (G = (W - Lj) / this.ratio + Z)), hasDirection("left", N) && (W = P.width - (n - P.x) * A / E, B && (G = (W - Lj) / this.ratio + Z)), hasDirection("bottom", N) && (G = P.height + (_ - P.y) * j / E, B && (W = (G - Z) * this.ratio + Lj)), hasDirection("top", N) && (G = P.height - (_ - P.y) * j / E, B && (W = (G - Z) * this.ratio + Lj)), {
+		var E = this.props.scale || 1, O = normalizeToPair(this.props.resizeRatio || 1), A = O[0], j = O[1], M = this.state, N = M.direction, P = M.original, z = this.props, B = z.lockAspectRatio, H = z.lockAspectRatioExtraHeight, U = z.lockAspectRatioExtraWidth, W = P.width, G = P.height, Z = H || 0, Aj = U || 0;
+		return hasDirection("right", N) && (W = P.width + (n - P.x) * A / E, B && (G = (W - Aj) / this.ratio + Z)), hasDirection("left", N) && (W = P.width - (n - P.x) * A / E, B && (G = (W - Aj) / this.ratio + Z)), hasDirection("bottom", N) && (G = P.height + (_ - P.y) * j / E, B && (W = (G - Z) * this.ratio + Aj)), hasDirection("top", N) && (G = P.height - (_ - P.y) * j / E, B && (W = (G - Z) * this.ratio + Aj)), {
 			newWidth: W,
 			newHeight: G
 		};
 	}, _.prototype.calculateNewSizeFromAspectRatio = function(n, _, E, O) {
 		var A = this.props, j = A.lockAspectRatio, M = A.lockAspectRatioExtraHeight, N = A.lockAspectRatioExtraWidth, P = O.width === void 0 ? 10 : O.width, z = E.width === void 0 || E.width < 0 ? n : E.width, B = O.height === void 0 ? 10 : O.height, H = E.height === void 0 || E.height < 0 ? _ : E.height, U = M || 0, W = N || 0;
 		if (j) {
-			var G = (B - U) * this.ratio + W, Z = (H - U) * this.ratio + W, Lj = (P - W) / this.ratio + U, Rj = (z - W) / this.ratio + U, zj = Math.max(P, G), Bj = Math.min(z, Z), Vj = Math.max(B, Lj), Hj = Math.min(H, Rj);
-			n = clamp$1(n, zj, Bj), _ = clamp$1(_, Vj, Hj);
+			var G = (B - U) * this.ratio + W, Z = (H - U) * this.ratio + W, Aj = (P - W) / this.ratio + U, jj = (z - W) / this.ratio + U, Mj = Math.max(P, G), Nj = Math.min(z, Z), Pj = Math.max(B, Aj), Fj = Math.min(H, jj);
+			n = clamp$1(n, Mj, Nj), _ = clamp$1(_, Pj, Fj);
 		} else n = clamp$1(n, P, z), _ = clamp$1(_, B, H);
 		return {
 			newWidth: n,
@@ -9628,56 +9628,56 @@ var __assign$1 = function() {
 			} catch {}
 			var E = this.props, O = E.maxWidth, A = E.maxHeight, j = E.minWidth, M = E.minHeight, N = isTouchEvent(n) ? n.touches[0].clientX : n.clientX, P = isTouchEvent(n) ? n.touches[0].clientY : n.clientY, z = this.state, B = z.direction, H = z.original, U = z.width, W = z.height, G = this.getParentSize(), Z = calculateNewMax(G, this.window.innerWidth, this.window.innerHeight, O, A, j, M);
 			O = Z.maxWidth, A = Z.maxHeight, j = Z.minWidth, M = Z.minHeight;
-			var Lj = this.calculateNewSizeFromDirection(N, P), Rj = Lj.newHeight, zj = Lj.newWidth, Bj = this.calculateNewMaxFromBoundary(O, A);
-			this.props.snap && this.props.snap.x && (zj = findClosestSnap(zj, this.props.snap.x, this.props.snapGap)), this.props.snap && this.props.snap.y && (Rj = findClosestSnap(Rj, this.props.snap.y, this.props.snapGap));
-			var Vj = this.calculateNewSizeFromAspectRatio(zj, Rj, {
-				width: Bj.maxWidth,
-				height: Bj.maxHeight
+			var Aj = this.calculateNewSizeFromDirection(N, P), jj = Aj.newHeight, Mj = Aj.newWidth, Nj = this.calculateNewMaxFromBoundary(O, A);
+			this.props.snap && this.props.snap.x && (Mj = findClosestSnap(Mj, this.props.snap.x, this.props.snapGap)), this.props.snap && this.props.snap.y && (jj = findClosestSnap(jj, this.props.snap.y, this.props.snapGap));
+			var Pj = this.calculateNewSizeFromAspectRatio(Mj, jj, {
+				width: Nj.maxWidth,
+				height: Nj.maxHeight
 			}, {
 				width: j,
 				height: M
 			});
-			if (zj = Vj.newWidth, Rj = Vj.newHeight, this.props.grid) {
-				var Hj = snap(zj, this.props.grid[0], this.props.gridGap ? this.props.gridGap[0] : 0), Uj = snap(Rj, this.props.grid[1], this.props.gridGap ? this.props.gridGap[1] : 0), Gj = this.props.snapGap || 0, Kj = Gj === 0 || Math.abs(Hj - zj) <= Gj ? Hj : zj, qj = Gj === 0 || Math.abs(Uj - Rj) <= Gj ? Uj : Rj;
-				zj = Kj, Rj = qj;
+			if (Mj = Pj.newWidth, jj = Pj.newHeight, this.props.grid) {
+				var Fj = snap(Mj, this.props.grid[0], this.props.gridGap ? this.props.gridGap[0] : 0), Ij = snap(jj, this.props.grid[1], this.props.gridGap ? this.props.gridGap[1] : 0), Rj = this.props.snapGap || 0, zj = Rj === 0 || Math.abs(Fj - Mj) <= Rj ? Fj : Mj, Bj = Rj === 0 || Math.abs(Ij - jj) <= Rj ? Ij : jj;
+				Mj = zj, jj = Bj;
 			}
-			var Jj = {
-				width: zj - H.width,
-				height: Rj - H.height
+			var Vj = {
+				width: Mj - H.width,
+				height: jj - H.height
 			};
-			if (this.delta = Jj, U && typeof U == "string") {
+			if (this.delta = Vj, U && typeof U == "string") {
 				if (U.endsWith("%")) {
-					var Yj = zj / G.width * 100;
-					zj = `${Yj}%`;
+					var Hj = Mj / G.width * 100;
+					Mj = `${Hj}%`;
 				} else if (U.endsWith("vw")) {
-					var Xj = zj / this.window.innerWidth * 100;
-					zj = `${Xj}vw`;
+					var Uj = Mj / this.window.innerWidth * 100;
+					Mj = `${Uj}vw`;
 				} else if (U.endsWith("vh")) {
-					var Zj = zj / this.window.innerHeight * 100;
-					zj = `${Zj}vh`;
+					var Wj = Mj / this.window.innerHeight * 100;
+					Mj = `${Wj}vh`;
 				}
 			}
 			if (W && typeof W == "string") {
 				if (W.endsWith("%")) {
-					var Yj = Rj / G.height * 100;
-					Rj = `${Yj}%`;
+					var Hj = jj / G.height * 100;
+					jj = `${Hj}%`;
 				} else if (W.endsWith("vw")) {
-					var Xj = Rj / this.window.innerWidth * 100;
-					Rj = `${Xj}vw`;
+					var Uj = jj / this.window.innerWidth * 100;
+					jj = `${Uj}vw`;
 				} else if (W.endsWith("vh")) {
-					var Zj = Rj / this.window.innerHeight * 100;
-					Rj = `${Zj}vh`;
+					var Wj = jj / this.window.innerHeight * 100;
+					jj = `${Wj}vh`;
 				}
 			}
-			var Qj = {
-				width: this.createSizeForCssProperty(zj, "width"),
-				height: this.createSizeForCssProperty(Rj, "height")
+			var Gj = {
+				width: this.createSizeForCssProperty(Mj, "width"),
+				height: this.createSizeForCssProperty(jj, "height")
 			};
-			this.flexDir === "row" ? Qj.flexBasis = Qj.width : this.flexDir === "column" && (Qj.flexBasis = Qj.height);
-			var $j = this.state.width !== Qj.width, eM = this.state.height !== Qj.height, tM = this.state.flexBasis !== Qj.flexBasis, nM = $j || eM || tM;
-			nM && flushSync(function() {
-				_.setState(Qj);
-			}), this.props.onResize && nM && this.props.onResize(n, B, this.resizable, Jj);
+			this.flexDir === "row" ? Gj.flexBasis = Gj.width : this.flexDir === "column" && (Gj.flexBasis = Gj.height);
+			var Kj = this.state.width !== Gj.width, qj = this.state.height !== Gj.height, Jj = this.state.flexBasis !== Gj.flexBasis, Yj = Kj || qj || Jj;
+			Yj && flushSync(function() {
+				_.setState(Gj);
+			}), this.props.onResize && Yj && this.props.onResize(n, B, this.resizable, Vj);
 		}
 	}, _.prototype.onMouseUp = function(n) {
 		var _ = this.state, E = _.isResizing, O = _.direction;
@@ -10469,21 +10469,53 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 				color: "gray",
 				children: "Configure como os dados serão exibidos quando substituídos."
 			}),
-			n.type === "text" && /* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsxs(p$1, {
-				align: "center",
-				gap: "2",
-				mb: "3",
-				children: [/* @__PURE__ */ jsx(i, {
-					checked: n.autoGrow || !1,
-					onCheckedChange: (E) => _(n.id, { autoGrow: E })
-				}), /* @__PURE__ */ jsx(p$2, {
-					size: "2",
-					children: "Expandir altura automaticamente (Multilinha)"
-				})]
-			}), /* @__PURE__ */ jsx(o$2, {
-				size: "4",
-				mb: "3"
-			})] }),
+			(n.type === "text" || n.type === "text-container") && /* @__PURE__ */ jsxs(p, { children: [
+				/* @__PURE__ */ jsxs(p$1, {
+					align: "center",
+					gap: "2",
+					mb: "3",
+					children: [/* @__PURE__ */ jsx(i, {
+						checked: n.autoGrow || !1,
+						onCheckedChange: (E) => _(n.id, { autoGrow: E })
+					}), /* @__PURE__ */ jsx(p$2, {
+						size: "2",
+						children: n.type === "text-container" ? "Expandir container automaticamente" : "Expandir altura automaticamente (Multilinha)"
+					})]
+				}),
+				n.type === "text-container" && n.autoGrow && /* @__PURE__ */ jsxs(p, {
+					mb: "3",
+					ml: "4",
+					children: [/* @__PURE__ */ jsx(p$2, {
+						size: "1",
+						mb: "1",
+						as: "div",
+						children: "Direção de Expansão"
+					}), /* @__PURE__ */ jsxs("select", {
+						value: n.containerExpansion || "vertical",
+						onChange: (E) => _(n.id, { containerExpansion: E.target.value }),
+						style: {
+							width: "100%",
+							padding: "6px",
+							borderRadius: "4px",
+							border: "1px solid var(--gray-6)",
+							backgroundColor: "var(--color-panel-solid)",
+							color: "var(--gray-12)",
+							fontSize: "14px"
+						},
+						children: [/* @__PURE__ */ jsx("option", {
+							value: "vertical",
+							children: "Vertical (Altura Cresce)"
+						}), /* @__PURE__ */ jsx("option", {
+							value: "horizontal",
+							children: "Horizontal (Largura Cresce)"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(o$2, {
+					size: "4",
+					mb: "3"
+				})
+			] }),
 			/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 				size: "1",
 				mb: "1",
@@ -11154,32 +11186,32 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 	});
 };
 const ElementContextMenu = ({ children: n, element: _ }) => {
-	let { updateElement: E, removeElement: O, removeSelected: A, addElement: j, moveElement: M, copy: N, paste: P, state: z, renameElement: B, groupElements: H, ungroupElements: U } = useEditor(), [W, G] = useState(!1), [Z, Lj] = useState(!1), [Rj, zj] = useState(!1), [Hj, Uj] = useState(!1), [Wj, Jj] = useState("formatting"), [Yj, Xj] = useState({
+	let { updateElement: E, removeElement: O, removeSelected: A, addElement: j, moveElement: M, copy: N, paste: P, state: z, renameElement: B, groupElements: H, ungroupElements: U } = useEditor(), [W, G] = useState(!1), [Z, Aj] = useState(!1), [jj, Mj] = useState(!1), [Fj, Ij] = useState(!1), [Lj, Vj] = useState("formatting"), [Hj, Uj] = useState({
 		open: !1,
 		prop: "",
 		value: ""
-	}), [Zj, Qj] = useState(!1), [$j, eM] = useState(""), [tM, nM] = useState(""), [rM, iM] = useState(_.content), [aM, oM] = useState(_.dataBinding || ""), sM = useRef(null), cM = useRef(null), lM = (n) => {
-		let _ = sM.current;
+	}), [Wj, Gj] = useState(!1), [Kj, qj] = useState(""), [Jj, Yj] = useState(""), [Xj, Zj] = useState(_.content), [Qj, $j] = useState(_.dataBinding || ""), eM = useRef(null), tM = useRef(null), nM = (n) => {
+		let _ = eM.current;
 		if (_) {
-			let E = _.selectionStart, O = _.selectionEnd, A = rM;
-			iM(A.substring(0, E) + `{{${n}}}` + A.substring(O)), setTimeout(() => {
+			let E = _.selectionStart, O = _.selectionEnd, A = Xj;
+			Zj(A.substring(0, E) + `{{${n}}}` + A.substring(O)), setTimeout(() => {
 				_.focus();
 				let O = E + n.length + 4;
 				_.setSelectionRange(O, O);
 			}, 0);
-		} else iM((_) => _ + `{{${n}}}`);
-	}, uM = (n) => {
+		} else Zj((_) => _ + `{{${n}}}`);
+	}, rM = (n) => {
 		E(_.id, { style: {
 			..._.style,
 			...n
 		} });
-	}, dM = () => {
+	}, iM = () => {
 		let n = z.elements.findIndex((n) => n.id === _.id);
 		n < z.elements.length - 1 && M(n, z.elements.length - 1);
-	}, fM = () => {
+	}, aM = () => {
 		let n = z.elements.findIndex((n) => n.id === _.id);
 		n > 0 && M(n, 0);
-	}, pM = () => {
+	}, oM = () => {
 		z.selectedElementIds.includes(_.id) && z.selectedElementIds.length > 1 ? (N(), P()) : j({
 			type: _.type,
 			content: _.content,
@@ -11189,7 +11221,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			height: _.height,
 			style: _.style
 		});
-	}, mM = [
+	}, sM = [
 		"#000000",
 		"#FFFFFF",
 		"#FF0000",
@@ -11199,12 +11231,36 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		"#808080",
 		"#800080",
 		"transparent"
-	], hM = (n, _) => {
-		Xj({
+	], cM = (n, _) => {
+		Uj({
 			open: !0,
 			prop: n,
 			value: _
 		});
+	}, lM = () => {
+		rM({ [Hj.prop]: Hj.value }), Uj((n) => ({
+			...n,
+			open: !1
+		}));
+	}, uM = (n) => {
+		let O = n.target.files?.[0];
+		if (O) {
+			let n = new FileReader();
+			n.onload = (n) => {
+				n.target?.result && E(_.id, { content: n.target.result });
+			}, n.readAsDataURL(O);
+		}
+	}, dM = () => {
+		qj(typeof _.content == "string" ? _.content : ""), Gj(!0);
+	}, fM = () => {
+		E(_.id, { content: Kj }), Gj(!1);
+	}, pM = () => {
+		$j(_.dataBinding || ""), Mj(!0);
+	}, mM = () => {
+		let n = Qj, O = { dataBinding: n };
+		(_.type === "text" || _.type === "text-container") && (O.content = `{{${n}}}`), E(_.id, O), Mj(!1);
+	}, hM = () => {
+		Zj(_.content), Aj(!0);
 	};
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(s$4, {
@@ -11216,8 +11272,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					direction: "column",
 					gap: "3",
 					children: [/* @__PURE__ */ jsx(u$1, {
-						value: tM,
-						onChange: (n) => nM(n.target.value),
+						value: Jj,
+						onChange: (n) => Yj(n.target.value),
 						placeholder: "Nome da camada..."
 					}), /* @__PURE__ */ jsxs(p$1, {
 						gap: "3",
@@ -11228,7 +11284,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							children: "Cancelar"
 						}) }), /* @__PURE__ */ jsx(o, {
 							onClick: () => {
-								B(_.id, tM), G(!1);
+								B(_.id, Jj), G(!1);
 							},
 							children: "Salvar"
 						})]
@@ -11238,7 +11294,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		}),
 		/* @__PURE__ */ jsx(s$4, {
 			open: Z,
-			onOpenChange: Lj,
+			onOpenChange: Aj,
 			children: /* @__PURE__ */ jsxs(p$8, {
 				style: { maxWidth: 450 },
 				children: [/* @__PURE__ */ jsx(g$2, { children: "Editar Texto" }), /* @__PURE__ */ jsxs(p$1, {
@@ -11246,9 +11302,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					gap: "3",
 					children: [
 						/* @__PURE__ */ jsx(r, {
-							ref: sM,
-							value: rM,
-							onChange: (n) => iM(n.target.value),
+							ref: eM,
+							value: Xj,
+							onChange: (n) => Zj(n.target.value),
 							placeholder: "Digite o novo texto...",
 							style: { height: 100 }
 						}),
@@ -11266,7 +11322,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 									color: "blue",
 									variant: "surface",
 									style: { cursor: "pointer" },
-									onClick: () => lM(n.dataName),
+									onClick: () => nM(n.dataName),
 									children: n.name
 								}, n.dataName))
 							})]
@@ -11280,7 +11336,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								children: "Cancelar"
 							}) }), /* @__PURE__ */ jsx(o, {
 								onClick: () => {
-									E(_.id, { content: rM }), Lj(!1);
+									E(_.id, { content: Xj }), Aj(!1);
 								},
 								children: "Salvar"
 							})]
@@ -11290,8 +11346,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			})
 		}),
 		/* @__PURE__ */ jsx(s$4, {
-			open: Rj,
-			onOpenChange: zj,
+			open: jj,
+			onOpenChange: Mj,
 			children: /* @__PURE__ */ jsxs(p$8, {
 				style: { maxWidth: 450 },
 				children: [/* @__PURE__ */ jsx(g$2, { children: "Vincular Dados Manualmente" }), /* @__PURE__ */ jsxs(p$1, {
@@ -11303,8 +11359,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							children: "Nome da propriedade (ex: titulo, preco, imagem):"
 						}),
 						/* @__PURE__ */ jsx(u$1, {
-							value: aM,
-							onChange: (n) => oM(n.target.value),
+							value: Qj,
+							onChange: (n) => $j(n.target.value),
 							placeholder: "propriedade"
 						}),
 						/* @__PURE__ */ jsxs(p$1, {
@@ -11315,10 +11371,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								color: "gray",
 								children: "Cancelar"
 							}) }), /* @__PURE__ */ jsx(o, {
-								onClick: () => {
-									let n = aM, O = { dataBinding: n };
-									_.type === "text" && (O.content = `{{${n}}}`), E(_.id, O), zj(!1);
-								},
+								onClick: mM,
 								children: "Vincular"
 							})]
 						})
@@ -11327,8 +11380,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			})
 		}),
 		/* @__PURE__ */ jsx(s$4, {
-			open: Yj.open,
-			onOpenChange: (n) => Xj((_) => ({
+			open: Hj.open,
+			onOpenChange: (n) => Uj((_) => ({
 				..._,
 				open: n
 			})),
@@ -11337,8 +11390,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				children: [
 					/* @__PURE__ */ jsx(g$2, { children: "Selecionar Cor" }),
 					/* @__PURE__ */ jsx(ColorPickerContent, {
-						color: Yj.value,
-						onChange: (n) => Xj((_) => ({
+						color: Hj.value,
+						onChange: (n) => Uj((_) => ({
 							..._,
 							value: n
 						}))
@@ -11352,12 +11405,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							color: "gray",
 							children: "Cancelar"
 						}) }), /* @__PURE__ */ jsx(o, {
-							onClick: () => {
-								uM({ [Yj.prop]: Yj.value }), Xj((n) => ({
-									...n,
-									open: !1
-								}));
-							},
+							onClick: lM,
 							children: "Aplicar"
 						})]
 					})
@@ -11366,21 +11414,21 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		}),
 		/* @__PURE__ */ jsx(ElementAdvancedSettings, {
 			elementId: _.id,
-			open: Hj,
-			onOpenChange: Uj,
-			initialTab: Wj
+			open: Fj,
+			onOpenChange: Ij,
+			initialTab: Lj
 		}),
 		/* @__PURE__ */ jsx(s$4, {
-			open: Zj,
-			onOpenChange: Qj,
+			open: Wj,
+			onOpenChange: Gj,
 			children: /* @__PURE__ */ jsxs(p$8, {
 				style: { maxWidth: 450 },
 				children: [/* @__PURE__ */ jsx(g$2, { children: "Inserir URL da Imagem" }), /* @__PURE__ */ jsxs(p$1, {
 					direction: "column",
 					gap: "3",
 					children: [/* @__PURE__ */ jsx(u$1, {
-						value: $j,
-						onChange: (n) => eM(n.target.value),
+						value: Kj,
+						onChange: (n) => qj(n.target.value),
 						placeholder: "https://exemplo.com/imagem.png"
 					}), /* @__PURE__ */ jsxs(p$1, {
 						gap: "3",
@@ -11390,9 +11438,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							color: "gray",
 							children: "Cancelar"
 						}) }), /* @__PURE__ */ jsx(o, {
-							onClick: () => {
-								E(_.id, { content: $j }), Qj(!1);
-							},
+							onClick: fM,
 							children: "Aplicar"
 						})]
 					})]
@@ -11401,23 +11447,18 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		}),
 		/* @__PURE__ */ jsx("input", {
 			type: "file",
-			ref: cM,
+			ref: tM,
 			style: { display: "none" },
 			accept: "image/*",
-			onChange: (n) => {
-				let O = n.target.files?.[0];
-				if (O) {
-					let n = new FileReader();
-					n.onload = (n) => {
-						n.target?.result && E(_.id, { content: n.target.result });
-					}, n.readAsDataURL(O);
-				}
-			}
+			onChange: uM
 		}),
 		/* @__PURE__ */ jsxs(Root2$3, { children: [/* @__PURE__ */ jsx(Trigger$3, {
 			asChild: !0,
 			children: /* @__PURE__ */ jsx("div", {
 				style: { display: "contents" },
+				onDoubleClick: (n) => {
+					(_.type === "text" || _.type === "text-container") && (n.stopPropagation(), hM());
+				},
 				children: n
 			})
 		}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsxs(Content2$2, {
@@ -11453,7 +11494,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							className: "ContextMenuItem",
 							onSelect: () => {
 								let O = { dataBinding: n.dataName };
-								_.type === "text" && (O.content = `{{${n.dataName}}}`), E(_.id, O);
+								(_.type === "text" || _.type === "text-container") && (O.content = `{{${n.dataName}}}`), E(_.id, O);
 							},
 							children: [
 								n.name,
@@ -11466,9 +11507,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						}, n.dataName)), /* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })] }),
 						/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => {
-								oM(_.dataBinding || ""), zj(!0);
-							},
+							onSelect: pM,
 							children: "Outro / Manual..."
 						}),
 						_.dataBinding && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }), /* @__PURE__ */ jsx(Item2$1, {
@@ -11482,15 +11521,13 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 				_.type === "text" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
-					onSelect: () => {
-						iM(_.content), Lj(!0);
-					},
+					onSelect: hM,
 					children: "Editar Texto..."
 				}), /* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })] }),
 				/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
 					onSelect: () => {
-						nM(_.name || (_.type === "group" ? "Grupo" : "Elemento")), G(!0);
+						Yj(_.name || (_.type === "group" ? "Grupo" : "Elemento")), G(!0);
 					},
 					children: "Renomear..."
 				}),
@@ -11507,13 +11544,13 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 				/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
-					onSelect: () => Uj(!0),
+					onSelect: () => Ij(!0),
 					children: "Configurações Avançadas..."
 				}),
 				/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 				/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
-					onSelect: pM,
+					onSelect: oM,
 					children: z.selectedElementIds.includes(_.id) && z.selectedElementIds.length > 1 ? `Duplicar Selecionados (${z.selectedElementIds.length})` : "Duplicar"
 				}),
 				/* @__PURE__ */ jsx(Item2$1, {
@@ -11537,13 +11574,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						alignOffset: -5,
 						children: [/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => cM.current?.click(),
+							onSelect: () => tM.current?.click(),
 							children: "Carregar do Computador"
 						}), /* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => {
-								eM(typeof _.content == "string" ? _.content : ""), Qj(!0);
-							},
+							onSelect: dM,
 							children: "Inserir URL"
 						})]
 					}) })] }),
@@ -11560,17 +11595,17 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: [
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => uM({ objectFit: "cover" }),
+								onSelect: () => rM({ objectFit: "cover" }),
 								children: "Preencher (Cover)"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => uM({ objectFit: "contain" }),
+								onSelect: () => rM({ objectFit: "contain" }),
 								children: "Ajustar (Contain)"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => uM({ objectFit: "fill" }),
+								onSelect: () => rM({ objectFit: "fill" }),
 								children: "Esticar (Fill)"
 							})
 						]
@@ -11589,11 +11624,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					alignOffset: -5,
 					children: [/* @__PURE__ */ jsx(Item2$1, {
 						className: "ContextMenuItem",
-						onSelect: dM,
+						onSelect: iM,
 						children: "Trazer para frente"
 					}), /* @__PURE__ */ jsx(Item2$1, {
 						className: "ContextMenuItem",
-						onSelect: fM,
+						onSelect: aM,
 						children: "Enviar para trás"
 					})]
 				}) })] }),
@@ -11611,7 +11646,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						alignOffset: -5,
 						children: z.availableFonts && z.availableFonts.map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => uM({ fontFamily: n }),
+							onSelect: () => rM({ fontFamily: n }),
 							style: { fontFamily: n },
 							children: [n, _.style?.fontFamily === n && /* @__PURE__ */ jsx("div", {
 								className: "RightSlot",
@@ -11640,7 +11675,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							64
 						].map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => uM({ fontSize: `${n}px` }),
+							onSelect: () => rM({ fontSize: `${n}px` }),
 							children: [n, "px"]
 						}, n))
 					}) })] }),
@@ -11655,9 +11690,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						sideOffset: 2,
 						alignOffset: -5,
 						children: [
-							mM.filter((n) => n !== "transparent").map((n) => /* @__PURE__ */ jsxs(Item2$1, {
+							sM.filter((n) => n !== "transparent").map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => uM({ color: n }),
+								onSelect: () => rM({ color: n }),
 								children: [/* @__PURE__ */ jsx("div", { style: {
 									width: 12,
 									height: 12,
@@ -11669,7 +11704,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => hM("color", _.style?.color || "#000000"),
+								onSelect: () => cM("color", _.style?.color || "#000000"),
 								children: "Outra Cor..."
 							})
 						]
@@ -11686,11 +11721,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						alignOffset: -5,
 						children: [/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => uM({ fontWeight: "normal" }),
+							onSelect: () => rM({ fontWeight: "normal" }),
 							children: "Normal"
 						}), /* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => uM({ fontWeight: "bold" }),
+							onSelect: () => rM({ fontWeight: "bold" }),
 							children: "Negrito"
 						})]
 					}) })] }),
@@ -11707,17 +11742,17 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: [
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => uM({ textAlign: "left" }),
+								onSelect: () => rM({ textAlign: "left" }),
 								children: "Esquerda"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => uM({ textAlign: "center" }),
+								onSelect: () => rM({ textAlign: "center" }),
 								children: "Centro"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => uM({ textAlign: "right" }),
+								onSelect: () => rM({ textAlign: "right" }),
 								children: "Direita"
 							})
 						]
@@ -11735,7 +11770,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: [
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => uM({
+								onSelect: () => rM({
 									display: "flex",
 									flexDirection: "column",
 									justifyContent: "flex-start"
@@ -11744,7 +11779,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => uM({
+								onSelect: () => rM({
 									display: "flex",
 									flexDirection: "column",
 									justifyContent: "center"
@@ -11753,7 +11788,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => uM({
+								onSelect: () => rM({
 									display: "flex",
 									flexDirection: "column",
 									justifyContent: "flex-end"
@@ -11774,9 +11809,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					sideOffset: 2,
 					alignOffset: -5,
 					children: [
-						mM.map((n) => /* @__PURE__ */ jsxs(Item2$1, {
+						sM.map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => uM({ backgroundColor: n }),
+							onSelect: () => rM({ backgroundColor: n }),
 							children: [/* @__PURE__ */ jsx("div", { style: {
 								width: 12,
 								height: 12,
@@ -11788,7 +11823,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 						/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => hM("backgroundColor", _.style?.backgroundColor || "transparent"),
+							onSelect: () => cM("backgroundColor", _.style?.backgroundColor || "transparent"),
 							children: "Outra Cor..."
 						})
 					]
@@ -11814,14 +11849,14 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							"50%"
 						].map((n) => /* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => uM({ borderRadius: typeof n == "number" ? `${n}px` : n }),
+							onSelect: () => rM({ borderRadius: typeof n == "number" ? `${n}px` : n }),
 							children: n === "50%" ? "Círculo" : `${n}px`
 						}, n)),
 						/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 						/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
 							onSelect: () => {
-								Jj("style"), Uj(!0);
+								Vj("style"), Ij(!0);
 							},
 							children: "Personalizar..."
 						})
@@ -11848,14 +11883,14 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							32
 						].map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => uM({ padding: `${n}px` }),
+							onSelect: () => rM({ padding: `${n}px` }),
 							children: [n, "px"]
 						}, n)),
 						/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 						/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
 							onSelect: () => {
-								Jj("style"), Uj(!0);
+								Vj("style"), Ij(!0);
 							},
 							children: "Personalizar..."
 						})
@@ -11865,58 +11900,58 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		}) })] })
 	] });
 }, DraggableElement = React.memo(({ element: n, isSelected: _ }) => {
-	let { selectElement: E, updateElement: O, updateElements: A, state: j, resizeGroup: M, setSnapLines: N } = useEditor(), [P, z] = useState(!1), [B, H] = useState(!1), U = useRef({
+	let { selectElement: E, updateElement: O, updateElements: A, state: j, resizeGroup: M, setSnapLines: N } = useEditor(), [P, z] = useState(!1), [B, H] = useState(!1), [U, G] = useState(!1), Z = useRef(null), Aj = useRef({
 		x: 0,
 		y: 0
-	}), G = useRef({}), Z = useRef(!1), Lj = useRef(!1), Rj = useRef(0), zj = useRef(0), Hj = useRef({
+	}), jj = useRef({}), Mj = useRef(!1), Fj = useRef(!1), Ij = useRef(0), Lj = useRef(0), Rj = useRef({
 		x: 0,
 		y: 0
-	}), Uj = useRef(!1), Wj = j.canvasHeight || 150, Gj = j.isList ? j.mockData.length > 0 ? j.mockData[0] : null : j.singleMockData, Jj = n.content, Yj = {};
-	if (Gj) {
-		if (n.type === "text") Jj = Jj.replace(/\{\{(.*?)\}\}/g, (_, E) => {
-			let O = Gj[E.trim()];
+	}), Vj = useRef(!1), Hj = j.canvasHeight || 150, Uj = j.isList ? j.mockData.length > 0 ? j.mockData[0] : null : j.singleMockData, Wj = n.content, Gj = {};
+	if (Uj) {
+		if (n.type === "text" || n.type === "text-container") Wj = Wj.replace(/\{\{(.*?)\}\}/g, (_, E) => {
+			let O = Uj[E.trim()];
 			return O == null ? _ : n.formatting ? formatValue(O, n.formatting) : String(O);
 		});
 		else if (n.type === "image") if (n.dataBinding) {
-			let _ = Gj[n.dataBinding];
-			_ != null && (Jj = String(_));
-		} else Jj = Jj.replace(/\{\{(.*?)\}\}/g, (n, _) => {
-			let E = Gj[_.trim()];
+			let _ = Uj[n.dataBinding];
+			_ != null && (Wj = String(_));
+		} else Wj = Wj.replace(/\{\{(.*?)\}\}/g, (n, _) => {
+			let E = Uj[_.trim()];
 			return E == null ? n : String(E);
 		});
 		n.styleBindings && Object.entries(n.styleBindings).forEach(([n, _]) => {
-			let E = Gj[_];
-			E != null && (Yj = {
-				...Yj,
+			let E = Uj[_];
+			E != null && (Gj = {
+				...Gj,
 				[n]: String(E)
 			});
 		}), n.conditions && n.conditions.forEach((n) => {
-			let _ = Gj[n.property];
-			checkCondition(_, n.operator, n.value) && (Yj = {
-				...Yj,
+			let _ = Uj[n.property];
+			checkCondition(_, n.operator, n.value) && (Gj = {
+				...Gj,
 				...n.style
 			});
 		});
 	}
-	let Xj = Yj.display === "none";
-	if (Xj && _) {
-		let { display: n, ..._ } = Yj;
-		Yj = _;
+	let Kj = Gj.display === "none";
+	if (Kj && _) {
+		let { display: n, ..._ } = Gj;
+		Gj = _;
 	}
-	let Zj = (_) => {
-		_.stopPropagation(), !Z.current && !Lj.current && !P && (_.shiftKey ? E(n.id, !0) : E(n.id, !1));
-	}, Qj = (O) => {
+	let qj = (_) => {
+		_.stopPropagation(), !Mj.current && !Fj.current && !P && (_.shiftKey ? E(n.id, !0) : E(n.id, !1));
+	}, Jj = (O) => {
 		if (O.button !== 0) return;
 		O.stopPropagation();
 		let A = O.shiftKey;
-		if (Z.current = !1, Lj.current = !1, n.groupId && !_) {
+		if (Mj.current = !1, Fj.current = !1, n.groupId && !_) {
 			E(n.groupId, A);
 			return;
 		}
-		_ || (E(n.id, A), Lj.current = !0), z(!0), U.current = {
+		_ || (E(n.id, A), Fj.current = !0), z(!0), Aj.current = {
 			x: O.clientX,
 			y: O.clientY
-		};
+		}, O.currentTarget.setPointerCapture(O.pointerId);
 		let M = new Set(j.selectedElementIds);
 		_ || (A || M.clear(), M.add(n.id));
 		let N = {};
@@ -11925,90 +11960,107 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				x: n.x,
 				y: n.y
 			});
-		}), G.current = N;
-	}, $j = (_) => {
-		_.stopPropagation(), _.preventDefault(), H(!0);
+		}), jj.current = N;
+	}, Yj = (_) => {
+		if (P) {
+			let E = j.zoom || 1, O = (_.clientX - Aj.current.x) / E, M = (_.clientY - Aj.current.y) / E;
+			(Math.abs(O) > 2 || Math.abs(M) > 2) && (Mj.current = !0);
+			let P = 5 / E, z = [], B = Object.entries(jj.current).map(([_, E]) => {
+				let A = E.x + O, N = E.y + M;
+				if (j.gridSize > 0) A = Math.round(A / j.gridSize) * j.gridSize, N = Math.round(N / j.gridSize) * j.gridSize;
+				else {
+					let E = !1, O = !1, M = n.width ?? 100, B = n.height ?? 100;
+					Object.keys(jj.current).length === 1 && j.elements.forEach((n) => {
+						if (n.id === _) return;
+						let j = n.width ?? 100, H = n.height ?? 100;
+						E || (Math.abs(A - n.x) < P ? (A = n.x, E = !0, z.push({
+							orientation: "vertical",
+							position: n.x
+						})) : Math.abs(A - (n.x + j)) < P ? (A = n.x + j, E = !0, z.push({
+							orientation: "vertical",
+							position: n.x + j
+						})) : Math.abs(A + M - n.x) < P ? (A = n.x - M, E = !0, z.push({
+							orientation: "vertical",
+							position: n.x
+						})) : Math.abs(A + M - (n.x + j)) < P && (A = n.x + j - M, E = !0, z.push({
+							orientation: "vertical",
+							position: n.x + j
+						}))), O || (Math.abs(N - n.y) < P ? (N = n.y, O = !0, z.push({
+							orientation: "horizontal",
+							position: n.y
+						})) : Math.abs(N - (n.y + H)) < P ? (N = n.y + H, O = !0, z.push({
+							orientation: "horizontal",
+							position: n.y + H
+						})) : Math.abs(N + B - n.y) < P ? (N = n.y - B, O = !0, z.push({
+							orientation: "horizontal",
+							position: n.y
+						})) : Math.abs(N + B - (n.y + H)) < P && (N = n.y + H - B, O = !0, z.push({
+							orientation: "horizontal",
+							position: n.y + H
+						})));
+					});
+				}
+				return j.isList && (N = Math.max(0, N)), {
+					id: _,
+					changes: {
+						x: A,
+						y: N
+					}
+				};
+			});
+			N && N(z), A(B, !1);
+		}
+	}, Xj = (n) => {
+		P && (z(!1), n.currentTarget.releasePointerCapture(n.pointerId), A([], !0), N && N([]));
+	}, Zj = (_) => {
+		_.stopPropagation(), _.preventDefault(), G(!0);
 		let E = _.target.closest(".resizable-element");
 		if (E) {
 			let O = E.getBoundingClientRect();
-			Hj.current = {
+			Rj.current = {
 				x: O.left + O.width / 2,
 				y: O.top + O.height / 2
 			};
-			let A = _.clientX - Hj.current.x, j = _.clientY - Hj.current.y;
-			Rj.current = Math.atan2(j, A) * (180 / Math.PI), zj.current = n.rotation || 0;
+			let A = _.clientX - Rj.current.x, j = _.clientY - Rj.current.y;
+			Ij.current = Math.atan2(j, A) * (180 / Math.PI), Lj.current = n.rotation || 0;
 		}
 	};
 	useEffect(() => {
 		let _ = (_) => {
-			if (P) {
-				let E = j.zoom || 1, O = (_.clientX - U.current.x) / E, M = (_.clientY - U.current.y) / E;
-				(Math.abs(O) > 2 || Math.abs(M) > 2) && (Z.current = !0);
-				let P = 5 / E, z = [], B = Object.entries(G.current).map(([_, E]) => {
-					let A = E.x + O, N = E.y + M;
-					if (j.gridSize > 0) A = Math.round(A / j.gridSize) * j.gridSize, N = Math.round(N / j.gridSize) * j.gridSize;
-					else {
-						let E = !1, O = !1, M = n.width ?? 100, B = n.height ?? 100;
-						Object.keys(G.current).length === 1 && j.elements.forEach((n) => {
-							if (n.id === _) return;
-							let j = n.width ?? 100, H = n.height ?? 100;
-							E || (Math.abs(A - n.x) < P ? (A = n.x, E = !0, z.push({
-								orientation: "vertical",
-								position: n.x
-							})) : Math.abs(A - (n.x + j)) < P ? (A = n.x + j, E = !0, z.push({
-								orientation: "vertical",
-								position: n.x + j
-							})) : Math.abs(A + M - n.x) < P ? (A = n.x - M, E = !0, z.push({
-								orientation: "vertical",
-								position: n.x
-							})) : Math.abs(A + M - (n.x + j)) < P && (A = n.x + j - M, E = !0, z.push({
-								orientation: "vertical",
-								position: n.x + j
-							}))), O || (Math.abs(N - n.y) < P ? (N = n.y, O = !0, z.push({
-								orientation: "horizontal",
-								position: n.y
-							})) : Math.abs(N - (n.y + H)) < P ? (N = n.y + H, O = !0, z.push({
-								orientation: "horizontal",
-								position: n.y + H
-							})) : Math.abs(N + B - n.y) < P ? (N = n.y - B, O = !0, z.push({
-								orientation: "horizontal",
-								position: n.y
-							})) : Math.abs(N + B - (n.y + H)) < P && (N = n.y + H - B, O = !0, z.push({
-								orientation: "horizontal",
-								position: n.y + H
-							})));
-						});
-					}
-					return j.isList && (N = Math.max(0, N)), {
-						id: _,
-						changes: {
-							x: A,
-							y: N
-						}
-					};
-				});
-				N && N(z), A(B, !1);
-			}
-			if (B) {
-				let E = _.clientX - Hj.current.x, A = _.clientY - Hj.current.y, j = Math.atan2(A, E) * (180 / Math.PI) - Rj.current, M = (zj.current + j) % 360;
+			if (U) {
+				let E = _.clientX - Rj.current.x, A = _.clientY - Rj.current.y, j = Math.atan2(A, E) * (180 / Math.PI) - Ij.current, M = (Lj.current + j) % 360;
 				O(n.id, { rotation: M }, !1);
 			}
 		}, E = () => {
-			P && (z(!1), A([], !0), N && N([])), B && (H(!1), O(n.id, { rotation: n.rotation }, !0));
+			U && (G(!1), O(n.id, { rotation: n.rotation }, !0));
 		};
-		return (P || B) && (window.addEventListener("mousemove", _), window.addEventListener("mouseup", E)), () => {
+		return U && (window.addEventListener("mousemove", _), window.addEventListener("mouseup", E)), () => {
 			window.removeEventListener("mousemove", _), window.removeEventListener("mouseup", E);
 		};
 	}, [
-		P,
-		B,
+		U,
 		n.id,
 		O,
-		A,
-		j.isList,
-		j.selectedElementIds
+		n.rotation
+	]), useEffect(() => {
+		n.type === "text-container" && n.autoGrow && n.containerExpansion === "horizontal" && requestAnimationFrame(() => {
+			if (Z.current) {
+				let _ = Z.current.scrollWidth;
+				Math.abs(_ - (n.width ?? 0)) > 2 && O(n.id, { width: _ }, !1);
+			}
+		});
+	}, [
+		Wj,
+		n.autoGrow,
+		n.containerExpansion,
+		n.style,
+		n.width,
+		n.formatting,
+		O,
+		n.id,
+		n.type
 	]);
-	let eM = {
+	let Qj = {
 		position: "absolute",
 		left: 0,
 		top: 0,
@@ -12016,8 +12068,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		height: n.autoGrow ? "auto" : "100%",
 		minHeight: n.autoGrow ? "100%" : void 0,
 		padding: n.type === "image" || n.type === "text" ? 0 : "8px",
-		border: _ ? "2px solid var(--accent-9)" : "1px dashed transparent",
-		outline: _ ? "none" : "1px solid transparent",
+		border: _ || B ? "2px solid var(--accent-9)" : "1px dashed transparent",
+		outline: _ || B ? "none" : "1px solid transparent",
 		cursor: P ? "grabbing" : "grab",
 		borderRadius: "var(--radius-2)",
 		overflow: n.autoGrow ? "visible" : "hidden",
@@ -12025,7 +12077,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		wordBreak: n.autoGrow ? "break-word" : void 0,
 		userSelect: "none",
 		...n.style,
-		...Yj
+		...Gj
 	};
 	return /* @__PURE__ */ jsx(Resizable, {
 		className: "resizable-element",
@@ -12033,11 +12085,12 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			width: n.width ?? 100,
 			height: n.autoGrow ? "auto" : n.height ?? 100
 		},
-		maxHeight: j.isList ? Math.max(10, Wj - n.y) : void 0,
+		maxHeight: j.isList ? Math.max(10, Hj - n.y) : void 0,
 		onResizeStart: (n) => {
-			Uj.current = !!n.shiftKey;
+			H(!0), Vj.current = !!n.shiftKey;
 		},
 		onResizeStop: (_, E, A, j) => {
+			H(!1);
 			let N = (n.width ?? 100) + j.width, P = (n.height ?? 100) + j.height;
 			n.type === "group" ? M(n.id, N, P) : O(n.id, {
 				width: N,
@@ -12048,8 +12101,10 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			position: "absolute",
 			transform: `translate(${n.x ?? 0}px, ${n.y ?? 0}px) rotate(${n.rotation || 0}deg)`,
 			height: n.autoGrow ? "auto" : void 0,
-			display: Xj && !_ ? "none" : void 0,
-			opacity: Xj && _ ? .4 : 1
+			display: Kj && !_ ? "none" : void 0,
+			opacity: Kj && _ ? .4 : 1,
+			zIndex: _ ? 1e3 : void 0,
+			outline: _ ? "1px dashed var(--accent-9)" : void 0
 		},
 		enable: _ && !n.autoGrow ? void 0 : {
 			top: !1,
@@ -12061,7 +12116,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			bottomLeft: !1,
 			topLeft: !1
 		},
-		lockAspectRatio: Uj.current === !0,
+		lockAspectRatio: Vj.current === !0,
 		grid: j.gridSize > 0 ? [j.gridSize, j.gridSize] : void 0,
 		children: /* @__PURE__ */ jsx(ElementContextMenu, {
 			element: n,
@@ -12072,9 +12127,20 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					position: "relative"
 				},
 				children: [/* @__PURE__ */ jsxs(p, {
-					style: eM,
-					onMouseDown: Qj,
-					onClick: Zj,
+					ref: Z,
+					style: {
+						...Qj,
+						whiteSpace: n.type === "text-container" && n.autoGrow && n.containerExpansion === "horizontal" ? "nowrap" : Qj.whiteSpace,
+						width: n.type === "text-container" && n.autoGrow && n.containerExpansion === "horizontal" ? "max-content" : "100%",
+						height: n.type === "text-container" && n.autoGrow && n.containerExpansion === "vertical" ? "auto" : "100%"
+					},
+					onPointerDown: Jj,
+					onPointerMove: Yj,
+					onPointerUp: Xj,
+					onMouseDown: (n) => {
+						n.button === 0 && n.stopPropagation();
+					},
+					onClick: qj,
 					title: n.name,
 					onMouseEnter: (n) => {
 						_ || (n.currentTarget.style.borderColor = "var(--gray-6)");
@@ -12088,10 +12154,18 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								width: "100%",
 								height: "100%"
 							},
-							children: Jj
+							children: Wj
+						}),
+						n.type === "text-container" && /* @__PURE__ */ jsx(p$2, {
+							style: {
+								width: "100%",
+								height: "100%",
+								display: "block"
+							},
+							children: Wj
 						}),
-						n.type === "image" && (Jj ? /* @__PURE__ */ jsx("img", {
-							src: Jj,
+						n.type === "image" && (Wj ? /* @__PURE__ */ jsx("img", {
+							src: Wj,
 							alt: "Element",
 							style: {
 								width: "100%",
@@ -12156,7 +12230,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						zIndex: 50,
 						boxShadow: "0 0 0 2px white"
 					},
-					onMouseDown: $j,
+					onMouseDown: Zj,
 					children: /* @__PURE__ */ jsx(p, { style: {
 						position: "absolute",
 						top: 12,
@@ -12171,44 +12245,44 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		})
 	});
 }), Canvas = () => {
-	let { state: n, selectElement: _, setSelectedElements: E, addElement: O, setZoom: A, setPan: j, undo: M, redo: N, copy: P, paste: z, removeSelected: B, updateElements: U } = useEditor(), G = useRef(null), [Z, Lj] = useState(null), Rj = useRef(!1), zj = useRef(!1), Hj = useRef(!1), Uj = useRef({
+	let { state: n, selectElement: _, setSelectedElements: E, addElement: O, setZoom: A, setPan: j, undo: M, redo: N, copy: P, paste: z, removeSelected: B, updateElements: U } = useEditor(), G = useRef(null), [Z, Aj] = useState(null), jj = useRef(!1), Mj = useRef(!1), Fj = useRef(!1), Ij = useRef({
 		x: 0,
 		y: 0
-	}), Wj = useRef({
+	}), Lj = useRef({
 		x: 0,
 		y: 0
-	}), Gj = useRef([]), Jj = (E) => {
-		if (E.button === 1 || E.button === 0 && Hj.current) {
-			E.preventDefault(), zj.current = !0, Wj.current = {
+	}), Rj = useRef([]), Vj = (E) => {
+		if (E.button === 1 || E.button === 0 && Fj.current) {
+			E.preventDefault(), Mj.current = !0, Lj.current = {
 				x: E.clientX,
 				y: E.clientY
 			};
 			return;
 		}
-		Rj.current = !0;
+		jj.current = !0;
 		let O = G.current?.getBoundingClientRect();
 		if (!O) return;
 		let A = O.left, j = O.top;
-		Uj.current = {
+		Ij.current = {
 			x: (E.clientX - A - n.pan.x) / n.zoom,
 			y: (E.clientY - j - n.pan.y) / n.zoom
-		}, Gj.current = n.selectedElementIds, E.shiftKey || (_(null), Gj.current = []), window.addEventListener("mousemove", Yj), window.addEventListener("mouseup", Xj);
-	}, Yj = useCallback((_) => {
+		}, Rj.current = n.selectedElementIds, E.shiftKey || (_(null), Rj.current = []), window.addEventListener("mousemove", Hj), window.addEventListener("mouseup", Uj);
+	}, Hj = useCallback((_) => {
 		if (!G.current) return;
-		if (zj.current) {
-			let E = _.clientX - Wj.current.x, O = _.clientY - Wj.current.y;
+		if (Mj.current) {
+			let E = _.clientX - Lj.current.x, O = _.clientY - Lj.current.y;
 			j({
 				x: n.pan.x + E,
 				y: n.pan.y + O
-			}), Wj.current = {
+			}), Lj.current = {
 				x: _.clientX,
 				y: _.clientY
 			};
 			return;
 		}
-		if (!Rj.current) return;
-		let O = G.current.getBoundingClientRect(), A = (_.clientX - O.left - n.pan.x) / n.zoom, M = (_.clientY - O.top - n.pan.y) / n.zoom, N = Math.min(Uj.current.x, A), P = Math.min(Uj.current.y, M), z = Math.abs(A - Uj.current.x), B = Math.abs(M - Uj.current.y);
-		if (Lj({
+		if (!jj.current) return;
+		let O = G.current.getBoundingClientRect(), A = (_.clientX - O.left - n.pan.x) / n.zoom, M = (_.clientY - O.top - n.pan.y) / n.zoom, N = Math.min(Ij.current.x, A), P = Math.min(Ij.current.y, M), z = Math.abs(A - Ij.current.x), B = Math.abs(M - Ij.current.y);
+		if (Aj({
 			x: N,
 			y: P,
 			width: z,
@@ -12218,7 +12292,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			n.elements.forEach((n) => {
 				let E = n.x ?? 0, O = n.y ?? 0, A = n.width ?? 100, j = n.height ?? 100, M = E + A, H = O + j, U = N + z, W = P + B;
 				E < U && M > N && O < W && H > P && _.push(n.id);
-			}), E(Array.from(new Set([...Gj.current, ..._])));
+			}), E(Array.from(new Set([...Rj.current, ..._])));
 		}
 	}, [
 		n.elements,
@@ -12226,9 +12300,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		n.zoom,
 		E,
 		j
-	]), Xj = useCallback(() => {
-		Rj.current = !1, zj.current = !1, Lj(null), window.removeEventListener("mousemove", Yj), window.removeEventListener("mouseup", Xj);
-	}, [Yj]), Zj = (_) => {
+	]), Uj = useCallback(() => {
+		jj.current = !1, Mj.current = !1, Aj(null), window.removeEventListener("mousemove", Hj), window.removeEventListener("mouseup", Uj);
+	}, [Hj]), Wj = (_) => {
 		if (_.ctrlKey || _.metaKey) _.preventDefault(), A(Math.min(Math.max(.1, n.zoom - _.deltaY * .001), 5));
 		else {
 			let E = _.shiftKey ? _.deltaY : _.deltaX, O = _.shiftKey ? _.deltaX : _.deltaY;
@@ -12240,7 +12314,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 	};
 	useEffect(() => {
 		let _ = (_) => {
-			if (_.code === "Space" && !_.repeat && !(_.target instanceof HTMLInputElement || _.target instanceof HTMLTextAreaElement) && (Hj.current = !0, G.current && (G.current.style.cursor = "grab")), !(_.target instanceof HTMLInputElement || _.target instanceof HTMLTextAreaElement) && ((_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "z" && (_.preventDefault(), _.shiftKey ? N() : M()), (_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "y" && (_.preventDefault(), N()), (_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "c" && (_.preventDefault(), P()), (_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "v" && (_.preventDefault(), z()), (_.key === "Delete" || _.key === "Backspace") && (_.preventDefault(), B()), [
+			if (_.code === "Space" && !_.repeat && !(_.target instanceof HTMLInputElement || _.target instanceof HTMLTextAreaElement) && (Fj.current = !0, G.current && (G.current.style.cursor = "grab")), !(_.target instanceof HTMLInputElement || _.target instanceof HTMLTextAreaElement) && ((_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "z" && (_.preventDefault(), _.shiftKey ? N() : M()), (_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "y" && (_.preventDefault(), N()), (_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "c" && (_.preventDefault(), P()), (_.ctrlKey || _.metaKey) && _.key.toLowerCase() === "v" && (_.preventDefault(), z()), (_.key === "Delete" || _.key === "Backspace") && (_.preventDefault(), B()), [
 				"ArrowUp",
 				"ArrowDown",
 				"ArrowLeft",
@@ -12263,10 +12337,10 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				}), O.length > 0 && U(O);
 			}
 		}, E = (n) => {
-			n.code === "Space" && (Hj.current = !1, G.current && !zj.current && (G.current.style.cursor = "default"));
+			n.code === "Space" && (Fj.current = !1, G.current && !Mj.current && (G.current.style.cursor = "default"));
 		};
 		return window.addEventListener("keydown", _), window.addEventListener("keyup", E), () => {
-			window.removeEventListener("keydown", _), window.removeEventListener("keyup", E), window.removeEventListener("mousemove", Yj), window.removeEventListener("mouseup", Xj);
+			window.removeEventListener("keydown", _), window.removeEventListener("keyup", E), window.removeEventListener("mousemove", Hj), window.removeEventListener("mouseup", Uj);
 		};
 	}, [
 		M,
@@ -12277,24 +12351,24 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		U,
 		n.selectedElementIds,
 		n.elements,
-		Yj,
-		Xj
+		Hj,
+		Uj
 	]);
-	let Qj = useRef(!1), { setCanvasHeight: $j } = useEditor(), eM = (n) => {
-		n.stopPropagation(), n.preventDefault(), Qj.current = !0, window.addEventListener("mousemove", tM), window.addEventListener("mouseup", nM);
-	}, tM = useCallback((n) => {
-		if (!Qj.current || !G.current) return;
+	let Gj = useRef(!1), { setCanvasHeight: Kj } = useEditor(), qj = (n) => {
+		n.stopPropagation(), n.preventDefault(), Gj.current = !0, window.addEventListener("mousemove", Jj), window.addEventListener("mouseup", Yj);
+	}, Jj = useCallback((n) => {
+		if (!Gj.current || !G.current) return;
 		let _ = G.current.getBoundingClientRect(), E = n.clientY - _.top, O = Math.max(50, Math.min(E, 2e3));
-		$j(Math.round(O));
-	}, [$j]), nM = useCallback(() => {
-		Qj.current = !1, window.removeEventListener("mousemove", tM), window.removeEventListener("mouseup", nM);
-	}, [tM]);
+		Kj(Math.round(O));
+	}, [Kj]), Yj = useCallback(() => {
+		Gj.current = !1, window.removeEventListener("mousemove", Jj), window.removeEventListener("mouseup", Yj);
+	}, [Jj]);
 	useEffect(() => () => {
-		window.removeEventListener("mousemove", tM), window.removeEventListener("mouseup", nM);
-	}, [tM, nM]);
-	let rM = (n) => {
+		window.removeEventListener("mousemove", Jj), window.removeEventListener("mouseup", Yj);
+	}, [Jj, Yj]);
+	let Xj = (n) => {
 		n.preventDefault(), n.dataTransfer.dropEffect = "copy";
-	}, iM = (n) => {
+	}, Zj = (n) => {
 		n.preventDefault();
 		let _ = n.dataTransfer.getData("application/x-editor-prop");
 		if (_) {
@@ -12309,20 +12383,20 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				dataBinding: _
 			});
 		}
-	}, aM = n.canvasHeight || 150;
+	}, Qj = n.canvasHeight || 150;
 	return /* @__PURE__ */ jsxs(p, {
 		ref: G,
-		onMouseDown: Jj,
-		onDragOver: rM,
-		onDrop: iM,
-		onWheel: Zj,
+		onMouseDown: Vj,
+		onDragOver: Xj,
+		onDrop: Zj,
+		onWheel: Wj,
 		style: {
 			width: "100%",
 			height: "100%",
 			position: "relative",
 			overflow: "hidden",
 			backgroundColor: "var(--color-background)",
-			cursor: zj.current ? "grabbing" : "default",
+			cursor: Mj.current ? "grabbing" : "default",
 			backgroundImage: "radial-gradient(var(--gray-5) 1px, transparent 1px)",
 			backgroundSize: `${20 * n.zoom}px ${20 * n.zoom}px`,
 			backgroundPosition: `${n.pan.x}px ${n.pan.y}px`
@@ -12371,7 +12445,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				n.isList && /* @__PURE__ */ jsxs("div", {
 					style: {
 						position: "absolute",
-						top: aM,
+						top: Qj,
 						left: 0,
 						right: 0,
 						height: "10px",
@@ -12383,7 +12457,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						justifyContent: "center",
 						group: "resize-handle"
 					},
-					onMouseDown: eM,
+					onMouseDown: qj,
 					children: [/* @__PURE__ */ jsx("div", { style: {
 						width: "100%",
 						height: "2px",
@@ -12407,7 +12481,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						},
 						children: [
 							"Altura do Item: ",
-							aM,
+							Qj,
 							"px"
 						]
 					})]
@@ -12486,22 +12560,22 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		})]
 	});
 }, EditorSettings = () => {
-	let { state: n, updateListSettings: _, setCanvasHeight: E, setGridSize: O } = useEditor(), [A, j] = useState(!1), [M, N] = useState(""), [P, z] = useState("asc"), [B, H] = useState("bottom"), [U, G] = useState("down"), [Z, Lj] = useState("150"), [Rj, zj] = useState(""), [Bj, Hj] = useState("0"), [Uj, Wj] = useState("slideIn"), [Gj, Jj] = useState(.3), [Yj, Xj] = useState("ease-out");
+	let { state: n, updateListSettings: _, setCanvasHeight: E, setGridSize: O } = useEditor(), [A, j] = useState(!1), [M, N] = useState(""), [P, z] = useState("asc"), [B, H] = useState("bottom"), [U, G] = useState("down"), [Z, Aj] = useState("150"), [jj, Mj] = useState(""), [Nj, Fj] = useState("0"), [Ij, Lj] = useState("slideIn"), [Rj, Vj] = useState(.3), [Hj, Uj] = useState("ease-out");
 	return useEffect(() => {
 		if (A) {
-			N(n.listSettings.sortProp || "__none__"), z(n.listSettings.sortOrder || "asc"), H(n.listSettings.newestPosition || "bottom"), G(n.listSettings.scrollDirection || "down"), zj(n.listSettings.containerHeight ? String(n.listSettings.containerHeight) : ""), Lj(String(n.canvasHeight || 150)), Hj(String(n.gridSize || 0));
+			N(n.listSettings.sortProp || "__none__"), z(n.listSettings.sortOrder || "asc"), H(n.listSettings.newestPosition || "bottom"), G(n.listSettings.scrollDirection || "down"), Mj(n.listSettings.containerHeight ? String(n.listSettings.containerHeight) : ""), Aj(String(n.canvasHeight || 150)), Fj(String(n.gridSize || 0));
 			let _ = n.listSettings.entryAnimation;
-			Wj(_?.type || "slideIn"), Jj(_?.duration || .3), Xj(_?.timingFunction || "ease-out");
+			Lj(_?.type || "slideIn"), Vj(_?.duration || .3), Uj(_?.timingFunction || "ease-out");
 		}
 	}, [A]), useEffect(() => {
 		if (!A) return;
 		let _ = parseInt(Z, 10);
 		!isNaN(_) && _ > 0 && n.canvasHeight !== _ && E(_);
-		let j = parseInt(Bj, 10);
+		let j = parseInt(Nj, 10);
 		!isNaN(j) && j >= 0 && n.gridSize !== j && O(j);
 	}, [
 		Z,
-		Bj,
+		Nj,
 		A,
 		E,
 		O,
@@ -12680,7 +12754,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 											type: "number",
 											min: "10",
 											value: Z,
-											onChange: (n) => Lj(n.target.value)
+											onChange: (n) => Aj(n.target.value)
 										}),
 										/* @__PURE__ */ jsx(p$2, {
 											size: "1",
@@ -12701,8 +12775,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 											type: "number",
 											min: "0",
 											placeholder: "Auto (100%)",
-											value: Rj,
-											onChange: (n) => zj(n.target.value)
+											value: jj,
+											onChange: (n) => Mj(n.target.value)
 										}),
 										/* @__PURE__ */ jsx(p$2, {
 											size: "1",
@@ -12728,8 +12802,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										as: "div",
 										children: "Efeito"
 									}), /* @__PURE__ */ jsxs("select", {
-										value: Uj,
-										onChange: (n) => Wj(n.target.value),
+										value: Ij,
+										onChange: (n) => Lj(n.target.value),
 										style: {
 											width: "100%",
 											padding: "6px",
@@ -12791,8 +12865,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										type: "number",
 										step: "0.1",
 										min: "0.1",
-										value: Gj,
-										onChange: (n) => Jj(parseFloat(n.target.value) || .3)
+										value: Rj,
+										onChange: (n) => Vj(parseFloat(n.target.value) || .3)
 									})] }),
 									/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 										size: "1",
@@ -12800,8 +12874,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										as: "div",
 										children: "Curva (Easing)"
 									}), /* @__PURE__ */ jsxs("select", {
-										value: Yj,
-										onChange: (n) => Xj(n.target.value),
+										value: Hj,
+										onChange: (n) => Uj(n.target.value),
 										style: {
 											width: "100%",
 											padding: "6px",
@@ -12856,8 +12930,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 											children: "Tamanho do Grid (px) - 0 para desativar"
 										}), /* @__PURE__ */ jsx(u$1, {
 											type: "number",
-											value: Bj,
-											onChange: (n) => Hj(n.target.value),
+											value: Nj,
+											onChange: (n) => Fj(n.target.value),
 											placeholder: "0"
 										})]
 									})
@@ -12876,11 +12950,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: "Cancelar"
 					}) }), /* @__PURE__ */ jsx(D$2, { children: /* @__PURE__ */ jsx(o, {
 						onClick: () => {
-							let n = parseInt(Rj, 10), E = {
-								type: Uj,
-								duration: Number(Gj),
+							let n = parseInt(jj, 10), E = {
+								type: Ij,
+								duration: Number(Rj),
 								delay: 0,
-								timingFunction: Yj
+								timingFunction: Hj
 							};
 							_({
 								sortProp: M === "__none__" ? "" : M,
@@ -13044,13 +13118,13 @@ function createRenderBatcher(n, _) {
 	}, j = () => E = !0, M = stepsOrder.reduce((n, E) => (n[E] = createRenderStep(j, _ ? E : void 0), n), {}), { setup: N, read: P, resolveKeyframes: z, preUpdate: B, update: H, preRender: U, render: W, postRender: G } = M, Z = () => {
 		let j = MotionGlobalConfig.useManualTiming ? A.timestamp : performance.now();
 		E = !1, MotionGlobalConfig.useManualTiming || (A.delta = O ? 1e3 / 60 : Math.max(Math.min(j - A.timestamp, maxElapsed), 1)), A.timestamp = j, A.isProcessing = !0, N.process(A), P.process(A), z.process(A), B.process(A), H.process(A), U.process(A), W.process(A), G.process(A), A.isProcessing = !1, E && _ && (O = !1, n(Z));
-	}, Lj = () => {
+	}, Aj = () => {
 		E = !0, O = !0, A.isProcessing || n(Z);
 	};
 	return {
 		schedule: stepsOrder.reduce((n, _) => {
 			let O = M[_];
-			return n[_] = (n, _ = !1, A = !1) => (E || Lj(), O.schedule(n, _, A)), n;
+			return n[_] = (n, _ = !1, A = !1) => (E || Aj(), O.schedule(n, _, A)), n;
 		}, {}),
 		cancel: (n) => {
 			for (let _ = 0; _ < stepsOrder.length; _++) M[stepsOrder[_]].cancel(n);
@@ -13408,40 +13482,40 @@ function spring(n = springDefaults.visualDuration, _ = springDefaults.bounce) {
 	}, { stiffness: P, damping: z, mass: B, duration: H, velocity: U, isResolvedFromDuration: W } = getSpringOptions({
 		...E,
 		velocity: -/* @__PURE__ */ millisecondsToSeconds(E.velocity || 0)
-	}), G = U || 0, Z = z / (2 * Math.sqrt(P * B)), Lj = M - j, Rj = /* @__PURE__ */ millisecondsToSeconds(Math.sqrt(P / B)), zj = Math.abs(Lj) < 5;
-	O ||= zj ? springDefaults.restSpeed.granular : springDefaults.restSpeed.default, A ||= zj ? springDefaults.restDelta.granular : springDefaults.restDelta.default;
-	let Bj;
+	}), G = U || 0, Z = z / (2 * Math.sqrt(P * B)), Aj = M - j, jj = /* @__PURE__ */ millisecondsToSeconds(Math.sqrt(P / B)), Mj = Math.abs(Aj) < 5;
+	O ||= Mj ? springDefaults.restSpeed.granular : springDefaults.restSpeed.default, A ||= Mj ? springDefaults.restDelta.granular : springDefaults.restDelta.default;
+	let Nj;
 	if (Z < 1) {
-		let n = calcAngularFreq(Rj, Z);
-		Bj = (_) => M - Math.exp(-Z * Rj * _) * ((G + Z * Rj * Lj) / n * Math.sin(n * _) + Lj * Math.cos(n * _));
-	} else if (Z === 1) Bj = (n) => M - Math.exp(-Rj * n) * (Lj + (G + Rj * Lj) * n);
+		let n = calcAngularFreq(jj, Z);
+		Nj = (_) => M - Math.exp(-Z * jj * _) * ((G + Z * jj * Aj) / n * Math.sin(n * _) + Aj * Math.cos(n * _));
+	} else if (Z === 1) Nj = (n) => M - Math.exp(-jj * n) * (Aj + (G + jj * Aj) * n);
 	else {
-		let n = Rj * Math.sqrt(Z * Z - 1);
-		Bj = (_) => {
-			let E = Math.exp(-Z * Rj * _), O = Math.min(n * _, 300);
-			return M - E * ((G + Z * Rj * Lj) * Math.sinh(O) + n * Lj * Math.cosh(O)) / n;
+		let n = jj * Math.sqrt(Z * Z - 1);
+		Nj = (_) => {
+			let E = Math.exp(-Z * jj * _), O = Math.min(n * _, 300);
+			return M - E * ((G + Z * jj * Aj) * Math.sinh(O) + n * Aj * Math.cosh(O)) / n;
 		};
 	}
-	let Vj = {
+	let Pj = {
 		calculatedDuration: W && H || null,
 		next: (n) => {
-			let _ = Bj(n);
+			let _ = Nj(n);
 			if (W) N.done = n >= H;
 			else {
 				let E = n === 0 ? G : 0;
-				Z < 1 && (E = n === 0 ? /* @__PURE__ */ secondsToMilliseconds(G) : calcGeneratorVelocity(Bj, n, _));
+				Z < 1 && (E = n === 0 ? /* @__PURE__ */ secondsToMilliseconds(G) : calcGeneratorVelocity(Nj, n, _));
 				let j = Math.abs(E) <= O, P = Math.abs(M - _) <= A;
 				N.done = j && P;
 			}
 			return N.value = N.done ? M : _, N;
 		},
 		toString: () => {
-			let n = Math.min(calcGeneratorDuration(Vj), maxGeneratorDuration), _ = generateLinearEasing((_) => Vj.next(n * _).value, n, 30);
+			let n = Math.min(calcGeneratorDuration(Pj), maxGeneratorDuration), _ = generateLinearEasing((_) => Pj.next(n * _).value, n, 30);
 			return n + "ms " + _;
 		},
 		toTransition: () => {}
 	};
-	return Vj;
+	return Pj;
 }
 spring.applyToOptions = (n) => {
 	let _ = createGeneratorEasing(n, 100, spring);
@@ -13451,26 +13525,26 @@ function inertia({ keyframes: n, velocity: _ = 0, power: E = .8, timeConstant: O
 	let H = n[0], U = {
 		done: !1,
 		value: H
-	}, W = (n) => N !== void 0 && n < N || P !== void 0 && n > P, G = (n) => N === void 0 ? P : P === void 0 || Math.abs(N - n) < Math.abs(P - n) ? N : P, Z = E * _, Lj = H + Z, Rj = M === void 0 ? Lj : M(Lj);
-	Rj !== Lj && (Z = Rj - H);
-	let zj = (n) => -Z * Math.exp(-n / O), Bj = (n) => Rj + zj(n), Vj = (n) => {
-		let _ = zj(n), E = Bj(n);
-		U.done = Math.abs(_) <= z, U.value = U.done ? Rj : E;
-	}, Hj, Uj, Wj = (n) => {
-		W(U.value) && (Hj = n, Uj = spring({
+	}, W = (n) => N !== void 0 && n < N || P !== void 0 && n > P, G = (n) => N === void 0 ? P : P === void 0 || Math.abs(N - n) < Math.abs(P - n) ? N : P, Z = E * _, Aj = H + Z, jj = M === void 0 ? Aj : M(Aj);
+	jj !== Aj && (Z = jj - H);
+	let Mj = (n) => -Z * Math.exp(-n / O), Nj = (n) => jj + Mj(n), Pj = (n) => {
+		let _ = Mj(n), E = Nj(n);
+		U.done = Math.abs(_) <= z, U.value = U.done ? jj : E;
+	}, Fj, Ij, Lj = (n) => {
+		W(U.value) && (Fj = n, Ij = spring({
 			keyframes: [U.value, G(U.value)],
-			velocity: calcGeneratorVelocity(Bj, n, U.value),
+			velocity: calcGeneratorVelocity(Nj, n, U.value),
 			damping: A,
 			stiffness: j,
 			restDelta: z,
 			restSpeed: B
 		}));
 	};
-	return Wj(0), {
+	return Lj(0), {
 		calculatedDuration: null,
 		next: (n) => {
 			let _ = !1;
-			return !Uj && Hj === void 0 && (_ = !0, Vj(n), Wj(n)), Hj !== void 0 && n >= Hj ? Uj.next(n - Hj) : (!_ && Vj(n), U);
+			return !Ij && Fj === void 0 && (_ = !0, Pj(n), Lj(n)), Fj !== void 0 && n >= Fj ? Ij.next(n - Fj) : (!_ && Pj(n), U);
 		}
 	};
 }
@@ -13590,22 +13664,22 @@ var WithPromise = class {
 		if (this.startTime === null) return E.next(0);
 		let { delay: P = 0, keyframes: z, repeat: B, repeatType: H, repeatDelay: U, type: W, onUpdate: G, finalKeyframe: Z } = this.options;
 		this.speed > 0 ? this.startTime = Math.min(this.startTime, n) : this.speed < 0 && (this.startTime = Math.min(n - O / this.speed, this.startTime)), _ ? this.currentTime = n : this.updateTime(n);
-		let Lj = this.currentTime - P * (this.playbackSpeed >= 0 ? 1 : -1), Rj = this.playbackSpeed >= 0 ? Lj < 0 : Lj > O;
-		this.currentTime = Math.max(Lj, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = O);
-		let zj = this.currentTime, Bj = E;
+		let Aj = this.currentTime - P * (this.playbackSpeed >= 0 ? 1 : -1), jj = this.playbackSpeed >= 0 ? Aj < 0 : Aj > O;
+		this.currentTime = Math.max(Aj, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = O);
+		let Mj = this.currentTime, Nj = E;
 		if (B) {
 			let n = Math.min(this.currentTime, O) / M, _ = Math.floor(n), E = n % 1;
-			!E && n >= 1 && (E = 1), E === 1 && _--, _ = Math.min(_, B + 1), _ % 2 && (H === "reverse" ? (E = 1 - E, U && (E -= U / M)) : H === "mirror" && (Bj = j)), zj = clamp(0, 1, E) * M;
+			!E && n >= 1 && (E = 1), E === 1 && _--, _ = Math.min(_, B + 1), _ % 2 && (H === "reverse" ? (E = 1 - E, U && (E -= U / M)) : H === "mirror" && (Nj = j)), Mj = clamp(0, 1, E) * M;
 		}
-		let Vj = Rj ? {
+		let Pj = jj ? {
 			done: !1,
 			value: z[0]
-		} : Bj.next(zj);
-		A && (Vj.value = A(Vj.value));
-		let { done: Hj } = Vj;
-		!Rj && N !== null && (Hj = this.playbackSpeed >= 0 ? this.currentTime >= O : this.currentTime <= 0);
-		let Uj = this.holdTime === null && (this.state === "finished" || this.state === "running" && Hj);
-		return Uj && W !== inertia && (Vj.value = getFinalKeyframe$1(z, this.options, Z, this.speed)), G && G(Vj.value), Uj && this.finish(), Vj;
+		} : Nj.next(Mj);
+		A && (Pj.value = A(Pj.value));
+		let { done: Fj } = Pj;
+		!jj && N !== null && (Fj = this.playbackSpeed >= 0 ? this.currentTime >= O : this.currentTime <= 0);
+		let Ij = this.holdTime === null && (this.state === "finished" || this.state === "running" && Fj);
+		return Ij && W !== inertia && (Pj.value = getFinalKeyframe$1(z, this.options, Z, this.speed)), G && G(Pj.value), Ij && this.finish(), Pj;
 	}
 	then(n, _) {
 		return this.finished.then(n, _);
@@ -14668,46 +14742,46 @@ function onlyElements(n) {
 	}), _;
 }
 var AnimatePresence = ({ children: n, custom: _, initial: E = !0, onExitComplete: O, presenceAffectsLayout: A = !0, mode: j = "sync", propagate: M = !1, anchorX: N = "left", root: P }) => {
-	let [z, B] = usePresence(M), H = useMemo(() => onlyElements(n), [n]), W = M && !z ? [] : H.map(getChildKey), G = useRef(!0), Z = useRef(H), Lj = useConstant(() => /* @__PURE__ */ new Map()), Rj = useRef(/* @__PURE__ */ new Set()), [Hj, Uj] = useState(H), [Wj, qj] = useState(H);
+	let [z, B] = usePresence(M), H = useMemo(() => onlyElements(n), [n]), W = M && !z ? [] : H.map(getChildKey), G = useRef(!0), Z = useRef(H), Aj = useConstant(() => /* @__PURE__ */ new Map()), jj = useRef(/* @__PURE__ */ new Set()), [Fj, Ij] = useState(H), [Lj, Bj] = useState(H);
 	useIsomorphicLayoutEffect(() => {
 		G.current = !1, Z.current = H;
-		for (let n = 0; n < Wj.length; n++) {
-			let _ = getChildKey(Wj[n]);
-			W.includes(_) ? (Lj.delete(_), Rj.current.delete(_)) : Lj.get(_) !== !0 && Lj.set(_, !1);
+		for (let n = 0; n < Lj.length; n++) {
+			let _ = getChildKey(Lj[n]);
+			W.includes(_) ? (Aj.delete(_), jj.current.delete(_)) : Aj.get(_) !== !0 && Aj.set(_, !1);
 		}
 	}, [
-		Wj,
+		Lj,
 		W.length,
 		W.join("-")
 	]);
-	let Jj = [];
-	if (H !== Hj) {
+	let Vj = [];
+	if (H !== Fj) {
 		let n = [...H];
-		for (let _ = 0; _ < Wj.length; _++) {
-			let E = Wj[_], O = getChildKey(E);
-			W.includes(O) || (n.splice(_, 0, E), Jj.push(E));
+		for (let _ = 0; _ < Lj.length; _++) {
+			let E = Lj[_], O = getChildKey(E);
+			W.includes(O) || (n.splice(_, 0, E), Vj.push(E));
 		}
-		return j === "wait" && Jj.length && (n = Jj), qj(onlyElements(n)), Uj(H), null;
+		return j === "wait" && Vj.length && (n = Vj), Bj(onlyElements(n)), Ij(H), null;
 	}
-	process.env.NODE_ENV !== "production" && j === "wait" && Wj.length > 1 && console.warn("You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.");
-	let { forceRender: Yj } = useContext(LayoutGroupContext);
-	return jsx(Fragment$1, { children: Wj.map((n) => {
-		let U = getChildKey(n), zj = M && !z ? !1 : H === Wj || W.includes(U);
+	process.env.NODE_ENV !== "production" && j === "wait" && Lj.length > 1 && console.warn("You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.");
+	let { forceRender: Hj } = useContext(LayoutGroupContext);
+	return jsx(Fragment$1, { children: Lj.map((n) => {
+		let U = getChildKey(n), Mj = M && !z ? !1 : H === Lj || W.includes(U);
 		return jsx(PresenceChild, {
-			isPresent: zj,
+			isPresent: Mj,
 			initial: !G.current || E ? void 0 : !1,
 			custom: _,
 			presenceAffectsLayout: A,
 			mode: j,
 			root: P,
-			onExitComplete: zj ? void 0 : () => {
-				if (Rj.current.has(U)) return;
-				if (Rj.current.add(U), Lj.has(U)) Lj.set(U, !0);
+			onExitComplete: Mj ? void 0 : () => {
+				if (jj.current.has(U)) return;
+				if (jj.current.add(U), Aj.has(U)) Aj.set(U, !0);
 				else return;
 				let n = !0;
-				Lj.forEach((_) => {
+				Aj.forEach((_) => {
 					_ || (n = !1);
-				}), n && (Yj?.(), qj(Z.current), M && B?.(), O && O());
+				}), n && (Hj?.(), Bj(Z.current), M && B?.(), O && O());
 			},
 			anchorX: N,
 			children: n
@@ -15136,12 +15210,12 @@ function useVisualElement(n, _, E, O, A, j) {
 	useInsertionEffect(() => {
 		H && Z.current && H.update(E, P);
 	});
-	let Rj = E[optimizedAppearDataAttribute], zj = useRef(!!Rj && !window.MotionHandoffIsComplete?.(Rj) && window.MotionHasOptimisedAnimation?.(Rj));
+	let jj = E[optimizedAppearDataAttribute], Mj = useRef(!!jj && !window.MotionHandoffIsComplete?.(jj) && window.MotionHasOptimisedAnimation?.(jj));
 	return useIsomorphicLayoutEffect(() => {
-		H && (Z.current = !0, window.MotionIsMounted = !0, H.updateFeatures(), H.scheduleRenderMicrotask(), zj.current && H.animationState && H.animationState.animateChanges());
+		H && (Z.current = !0, window.MotionIsMounted = !0, H.updateFeatures(), H.scheduleRenderMicrotask(), Mj.current && H.animationState && H.animationState.animateChanges());
 	}), useEffect(() => {
-		H && (!zj.current && H.animationState && H.animationState.animateChanges(), zj.current &&= (queueMicrotask(() => {
-			window.MotionHandoffMarkAsComplete?.(Rj);
+		H && (!Mj.current && H.animationState && H.animationState.animateChanges(), Mj.current &&= (queueMicrotask(() => {
+			window.MotionHandoffMarkAsComplete?.(jj);
 		}), !1), H.enteringChildren = void 0);
 	}), H;
 }
@@ -15819,34 +15893,34 @@ function createAnimationState(n) {
 	function M(j) {
 		let { props: M } = n, N = getVariantContext(n.parent) || {}, P = [], z = /* @__PURE__ */ new Set(), B = {}, H = Infinity;
 		for (let _ = 0; _ < numAnimationTypes; _++) {
-			let U = reversePriorityOrder[_], W = E[U], G = M[U] === void 0 ? N[U] : M[U], Z = isVariantLabel(G), Lj = U === j ? W.isActive : null;
-			Lj === !1 && (H = _);
-			let Rj = G === N[U] && G !== M[U] && Z;
-			if (Rj && O && n.manuallyAnimateOnMount && (Rj = !1), W.protectedKeys = { ...B }, !W.isActive && Lj === null || !G && !W.prevProp || isAnimationControls(G) || typeof G == "boolean") continue;
-			let zj = checkVariantsDidChange(W.prevProp, G), Bj = zj || U === j && W.isActive && !Rj && Z || _ > H && Z, Vj = !1, Hj = Array.isArray(G) ? G : [G], Uj = Hj.reduce(A(U), {});
-			Lj === !1 && (Uj = {});
-			let { prevResolvedValues: Wj = {} } = W, Gj = {
-				...Wj,
-				...Uj
-			}, Kj = (_) => {
-				Bj = !0, z.has(_) && (Vj = !0, z.delete(_)), W.needsAnimating[_] = !0;
+			let U = reversePriorityOrder[_], W = E[U], G = M[U] === void 0 ? N[U] : M[U], Z = isVariantLabel(G), Aj = U === j ? W.isActive : null;
+			Aj === !1 && (H = _);
+			let jj = G === N[U] && G !== M[U] && Z;
+			if (jj && O && n.manuallyAnimateOnMount && (jj = !1), W.protectedKeys = { ...B }, !W.isActive && Aj === null || !G && !W.prevProp || isAnimationControls(G) || typeof G == "boolean") continue;
+			let Mj = checkVariantsDidChange(W.prevProp, G), Nj = Mj || U === j && W.isActive && !jj && Z || _ > H && Z, Pj = !1, Fj = Array.isArray(G) ? G : [G], Ij = Fj.reduce(A(U), {});
+			Aj === !1 && (Ij = {});
+			let { prevResolvedValues: Lj = {} } = W, Rj = {
+				...Lj,
+				...Ij
+			}, zj = (_) => {
+				Nj = !0, z.has(_) && (Pj = !0, z.delete(_)), W.needsAnimating[_] = !0;
 				let E = n.getValue(_);
 				E && (E.liveStyle = !1);
 			};
-			for (let n in Gj) {
-				let _ = Uj[n], E = Wj[n];
+			for (let n in Rj) {
+				let _ = Ij[n], E = Lj[n];
 				if (B.hasOwnProperty(n)) continue;
 				let O = !1;
-				O = isKeyframesTarget(_) && isKeyframesTarget(E) ? !shallowCompare(_, E) : _ !== E, O ? _ == null ? z.add(n) : Kj(n) : _ !== void 0 && z.has(n) ? Kj(n) : W.protectedKeys[n] = !0;
+				O = isKeyframesTarget(_) && isKeyframesTarget(E) ? !shallowCompare(_, E) : _ !== E, O ? _ == null ? z.add(n) : zj(n) : _ !== void 0 && z.has(n) ? zj(n) : W.protectedKeys[n] = !0;
 			}
-			W.prevProp = G, W.prevResolvedValues = Uj, W.isActive && (B = {
+			W.prevProp = G, W.prevResolvedValues = Ij, W.isActive && (B = {
 				...B,
-				...Uj
-			}), O && n.blockInitialAnimation && (Bj = !1);
-			let qj = Rj && zj;
-			Bj && (!qj || Vj) && P.push(...Hj.map((_) => {
+				...Ij
+			}), O && n.blockInitialAnimation && (Nj = !1);
+			let Bj = jj && Mj;
+			Nj && (!Bj || Pj) && P.push(...Fj.map((_) => {
 				let E = { type: U };
-				if (typeof _ == "string" && O && !qj && n.manuallyAnimateOnMount && n.parent) {
+				if (typeof _ == "string" && O && !Bj && n.manuallyAnimateOnMount && n.parent) {
 					let { parent: O } = n, A = resolveVariant(O, _);
 					if (O.enteringChildren && A) {
 						let { delayChildren: _ } = A.transition || {};
@@ -17364,29 +17438,40 @@ var gestureAnimations = {
 const processLayout = (n, _) => {
 	let E = n.map((n) => ({ ...n })), O = new Map(n.map((n) => [n.id, n])), A = [];
 	E.forEach((n) => {
-		if (n.type === "text" && n.autoGrow) {
+		let j = n.type === "text", M = n.type === "text-container";
+		if ((j || M) && n.autoGrow) {
 			let j = n.content;
 			_ && (j = j.replace(/\{\{(.*?)\}\}/g, (E, O) => {
 				let A = _[O.trim()];
 				return A == null ? E : n.formatting ? formatValue(A, n.formatting) : String(A);
 			}));
-			let M = parseInt(String(n.style?.fontSize || 16)), N = String(n.style?.fontFamily || "Arial"), P = measureTextHeight(j, n.width, N, M), z = n.height, B = P - z;
-			if (B > 0) {
-				n.height = P, n.content = j;
-				let _ = [], M = O.get(n.id);
-				M && E.forEach((E) => {
-					if (E.id === n.id) return;
-					let A = O.get(E.id);
-					A && isInside(M, A) && _.push(E);
-				});
-				let N = new Set([n.id]);
-				_.forEach((n) => {
-					n.height += B, N.add(n.id);
-				}), A.push({
-					triggerY: n.y + z,
-					delta: B,
-					ignoreIds: N
-				});
+			let N = parseInt(String(n.style?.fontSize || 16)), P = String(n.style?.fontFamily || "Arial");
+			if (M && n.containerExpansion === "horizontal") {
+				let _ = document.createElement("canvas").getContext("2d");
+				if (_) {
+					_.font = `${N}px ${P}`;
+					let E = _.measureText(j), O = Math.ceil(E.width + parseInt(String(n.style?.padding || 0)) * 2);
+					O > n.width && (n.width = O, n.content = j);
+				}
+			} else {
+				let _ = measureTextHeight(j, n.width, P, N), M = n.height, z = _ - M;
+				if (z > 0) {
+					n.height = _, n.content = j;
+					let N = [], P = O.get(n.id);
+					P && E.forEach((_) => {
+						if (_.id === n.id) return;
+						let E = O.get(_.id);
+						E && isInside(P, E) && N.push(_);
+					});
+					let B = new Set([n.id]);
+					N.forEach((n) => {
+						n.height += z, B.add(n.id);
+					}), A.push({
+						triggerY: n.y + M,
+						delta: z,
+						ignoreIds: B
+					});
+				}
 			}
 		}
 	}), E.forEach((n) => {
@@ -17507,7 +17592,7 @@ var getAnimationVariants = (n) => {
 }, PreviewElementRenderer = ({ element: n, offsetY: _ = 0, dataContext: E }) => {
 	let O = n.content;
 	if (E) {
-		if (n.type === "text") O = O.replace(/\{\{(.*?)\}\}/g, (n, _) => {
+		if (n.type === "text" || n.type === "text-container") O = O.replace(/\{\{(.*?)\}\}/g, (n, _) => {
 			let O = E[_.trim()];
 			return O == null ? n : String(O);
 		});
@@ -17524,15 +17609,24 @@ var getAnimationVariants = (n) => {
 			position: "absolute",
 			left: 0,
 			top: 0,
-			width: `${n.width}px`,
-			height: `${n.height}px`,
+			width: n.type === "text-container" && n.autoGrow && n.containerExpansion === "horizontal" ? "max-content" : `${n.width}px`,
+			height: n.autoGrow ? "auto" : `${n.height}px`,
 			transform: `translate(${n.x}px, ${n.y + _}px) rotate(${n.rotation || 0}deg)`,
-			padding: n.type === "image" || n.type === "text" ? 0 : "8px",
-			overflow: "hidden",
+			padding: n.type === "image" || n.type === "text" || n.type === "text-container" ? 0 : "8px",
+			overflow: n.autoGrow ? "visible" : "hidden",
+			whiteSpace: n.type === "text-container" && n.autoGrow && n.containerExpansion === "horizontal" ? "nowrap" : n.autoGrow ? "pre-wrap" : void 0,
+			wordBreak: n.autoGrow ? "break-word" : void 0,
 			...n.style
 		},
 		children: [
-			n.type === "text" && /* @__PURE__ */ jsx(p$2, { children: O }),
+			(n.type === "text" || n.type === "text-container") && /* @__PURE__ */ jsx(p$2, {
+				style: {
+					width: "100%",
+					height: "100%",
+					display: "block"
+				},
+				children: O
+			}),
 			n.type === "image" && (O ? /* @__PURE__ */ jsx("img", {
 				src: O,
 				alt: "Element",
@@ -17706,16 +17800,16 @@ const Preview = () => {
 	});
 };
 var LayersPanel = ({ onOpenSettings: n }) => {
-	let { state: _, selectElement: E, renameElement: O, addToGroup: A, removeFromGroup: j, groupElements: M } = useEditor(), [N, P] = useState({}), [z, B] = useState(!1), [H, U] = useState(null), [W, G] = useState(""), Z = _.elements.filter((n) => n.type === "group"), Lj = /* @__PURE__ */ new Map();
+	let { state: _, selectElement: E, renameElement: O, addToGroup: A, removeFromGroup: j, groupElements: M } = useEditor(), [N, P] = useState({}), [z, B] = useState(!1), [H, U] = useState(null), [W, G] = useState(""), Z = _.elements.filter((n) => n.type === "group"), Aj = /* @__PURE__ */ new Map();
 	Z.forEach((n) => {
-		Lj.set(n.id, _.elements.filter((_) => _.groupId === n.id));
+		Aj.set(n.id, _.elements.filter((_) => _.groupId === n.id));
 	});
-	let Rj = _.elements.filter((n) => n.type !== "group" && !n.groupId), zj = (n) => {
+	let jj = _.elements.filter((n) => n.type !== "group" && !n.groupId), Mj = (n) => {
 		P((_) => ({
 			..._,
 			[n]: !_[n]
 		}));
-	}, Bj = (O, j = 0) => /* @__PURE__ */ jsx(p, {
+	}, Nj = (O, j = 0) => /* @__PURE__ */ jsx(p, {
 		style: {
 			borderRadius: 6,
 			backgroundColor: _.selectedElementIds.includes(O.id) ? "var(--gray-5)" : "var(--gray-3)",
@@ -17780,9 +17874,9 @@ var LayersPanel = ({ onOpenSettings: n }) => {
 		direction: "column",
 		gap: "2",
 		children: [
-			Rj.map((n) => Bj(n, 0)),
+			jj.map((n) => Nj(n, 0)),
 			Z.map((_) => {
-				let O = N[_.id] === !0, j = Lj.get(_.id) || [];
+				let O = N[_.id] === !0, j = Aj.get(_.id) || [];
 				return /* @__PURE__ */ jsxs(p, {
 					style: {
 						border: "1px dashed var(--gray-6)",
@@ -17799,7 +17893,7 @@ var LayersPanel = ({ onOpenSettings: n }) => {
 						onClick: () => {
 							E(_.id), n && n(_.id);
 						},
-						onDoubleClick: () => zj(_.id),
+						onDoubleClick: () => Mj(_.id),
 						onDragOver: (n) => {
 							n.preventDefault();
 						},
@@ -17828,7 +17922,7 @@ var LayersPanel = ({ onOpenSettings: n }) => {
 						direction: "column",
 						gap: "2",
 						style: { padding: "6px 8px" },
-						children: [j.map((n) => Bj(n, 1)), j.length === 0 && /* @__PURE__ */ jsx(p$2, {
+						children: [j.map((n) => Nj(n, 1)), j.length === 0 && /* @__PURE__ */ jsx(p$2, {
 							size: "1",
 							color: "gray",
 							children: "Solte elementos aqui para agrupar"
@@ -17888,7 +17982,7 @@ var LayersPanel = ({ onOpenSettings: n }) => {
 		]
 	});
 }, EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light" }) => {
-	let [j, M] = useState(!0), [N, P] = useState(!0), [z, B] = useState(null), [H, U] = useState(!1), { addElement: W, loadState: G, state: Z, undo: Lj, redo: Rj, copy: zj, paste: Bj, removeSelected: Hj, updateElements: Uj } = useEditor(), Wj = React.useRef(null), Gj = () => {
+	let [j, M] = useState(!0), [N, P] = useState(!0), [z, B] = useState(null), [H, U] = useState(!1), { addElement: W, loadState: G, state: Z, undo: Aj, redo: jj, copy: Mj, paste: Nj, removeSelected: Fj, updateElements: Ij } = useEditor(), Lj = React.useRef(null), Rj = () => {
 		let n = {
 			elements: Z.elements,
 			isList: Z.isList,
@@ -17899,9 +17993,9 @@ var LayersPanel = ({ onOpenSettings: n }) => {
 			gridSize: Z.gridSize
 		}, _ = JSON.stringify(n, null, 2), E = new Blob([_], { type: "application/json" }), O = URL.createObjectURL(E), A = document.createElement("a");
 		A.href = O, A.download = `layout-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.json`, document.body.appendChild(A), A.click(), document.body.removeChild(A), URL.revokeObjectURL(O);
-	}, Jj = () => {
-		Wj.current?.click();
-	}, Yj = (n) => {
+	}, Vj = () => {
+		Lj.current?.click();
+	}, Hj = (n) => {
 		let _ = n.target.files?.[0];
 		if (!_) return;
 		let E = new FileReader();
@@ -17941,11 +18035,11 @@ var LayersPanel = ({ onOpenSettings: n }) => {
 	}, [W]), React.useEffect(() => {
 		let n = (n) => {
 			if (!(document.activeElement?.tagName === "INPUT" || document.activeElement?.tagName === "TEXTAREA" || document.activeElement?.isContentEditable)) {
-				if ((n.ctrlKey || n.metaKey) && n.key === "z") n.shiftKey ? (n.preventDefault(), Rj()) : (n.preventDefault(), Lj());
-				else if ((n.ctrlKey || n.metaKey) && n.key === "y") n.preventDefault(), Rj();
-				else if ((n.ctrlKey || n.metaKey) && n.key === "c") n.preventDefault(), zj();
-				else if ((n.ctrlKey || n.metaKey) && n.key === "v") n.preventDefault(), Bj();
-				else if (n.key === "Delete" || n.key === "Backspace") Z.selectedElementIds.length > 0 && (n.preventDefault(), Hj());
+				if ((n.ctrlKey || n.metaKey) && n.key === "z") n.shiftKey ? (n.preventDefault(), jj()) : (n.preventDefault(), Aj());
+				else if ((n.ctrlKey || n.metaKey) && n.key === "y") n.preventDefault(), jj();
+				else if ((n.ctrlKey || n.metaKey) && n.key === "c") n.preventDefault(), Mj();
+				else if ((n.ctrlKey || n.metaKey) && n.key === "v") n.preventDefault(), Nj();
+				else if (n.key === "Delete" || n.key === "Backspace") Z.selectedElementIds.length > 0 && (n.preventDefault(), Fj());
 				else if ([
 					"ArrowUp",
 					"ArrowDown",
@@ -17963,20 +18057,20 @@ var LayersPanel = ({ onOpenSettings: n }) => {
 								changes: j
 							});
 						}
-					}), E.length > 0 && Uj(E);
+					}), E.length > 0 && Ij(E);
 				}
 			}
 		};
 		return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
 	}, [
-		Lj,
-		Rj,
-		zj,
-		Bj,
-		Hj,
+		Aj,
+		jj,
+		Mj,
+		Nj,
+		Fj,
 		Z.selectedElementIds,
 		Z.elements,
-		Uj
+		Ij
 	]), React.useEffect(() => {
 		if (E) try {
 			let n = typeof E == "string" ? JSON.parse(E) : E;
@@ -17985,7 +18079,7 @@ var LayersPanel = ({ onOpenSettings: n }) => {
 			console.error("Failed to load initial state", n);
 		}
 	}, [E, G]);
-	let Xj = (n) => {
+	let Uj = (n) => {
 		console.log(`Adding element of type: ${n}`), W({
 			type: n,
 			content: `New ${n}`
@@ -18046,16 +18140,20 @@ var LayersPanel = ({ onOpenSettings: n }) => {
 								style: { width: "240px" },
 								children: [
 									/* @__PURE__ */ jsx(v$3, {
-										onSelect: () => Xj("text"),
+										onSelect: () => Uj("text"),
 										children: "Texto"
 									}),
 									/* @__PURE__ */ jsx(v$3, {
-										onSelect: () => Xj("image"),
+										onSelect: () => Uj("image"),
 										children: "Imagem"
 									}),
 									/* @__PURE__ */ jsx(v$3, {
-										onSelect: () => Xj("box"),
+										onSelect: () => Uj("box"),
 										children: "Caixa (Container)"
+									}),
+									/* @__PURE__ */ jsx(v$3, {
+										onSelect: () => Uj("text-container"),
+										children: "Container com Texto"
 									})
 								]
 							})] }),
@@ -18093,7 +18191,7 @@ var LayersPanel = ({ onOpenSettings: n }) => {
 										cursor: "pointer",
 										justifyContent: "center"
 									},
-									onClick: Gj,
+									onClick: Rj,
 									children: [/* @__PURE__ */ jsx(DownloadIcon, {}), " Exportar"]
 								}), /* @__PURE__ */ jsxs(o, {
 									variant: "soft",
@@ -18103,16 +18201,16 @@ var LayersPanel = ({ onOpenSettings: n }) => {
 										cursor: "pointer",
 										justifyContent: "center"
 									},
-									onClick: Jj,
+									onClick: Vj,
 									children: [/* @__PURE__ */ jsx(UploadIcon, {}), " Importar"]
 								})]
 							}),
 							/* @__PURE__ */ jsx("input", {
 								type: "file",
-								ref: Wj,
+								ref: Lj,
 								style: { display: "none" },
 								accept: ".json",
-								onChange: Yj
+								onChange: Hj
 							}),
 							/* @__PURE__ */ jsx(p, {
 								mt: "2",
@@ -18298,5 +18396,5 @@ const GenericEditor = (n) => /* @__PURE__ */ jsx(EditorProvider, {
 	availableProps: n.layout.props,
 	theme: n.theme,
 	children: /* @__PURE__ */ jsx(EditorContent, { ...n })
-}), generateHTML = (n, _, E = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(n, _, E), getRendererCode = () => "\n/**\n * Render Template\n * @param {Array} elements - The JSON configuration of elements\n * @param {Object|Array} data - The data object to inject (Object for single, Array for list)\n * @param {Object} options - { isList: boolean, listSettings: { sortProp: string, sortOrder: 'asc'|'desc', newestPosition: 'top'|'bottom', scrollDirection: 'up'|'down', containerHeight: number }, canvasHeight: number }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n    const { isList, listSettings, canvasHeight } = options;\n\n    const measureTextHeight = (text, width, fontFamily, fontSize, lineHeightMultiplier = 1.2) => {\n        if (!text) return 0;\n        try {\n            const canvas = document.createElement('canvas');\n            const context = canvas.getContext('2d');\n            if (!context) return 0;\n            context.font = `${fontSize}px ${fontFamily}`;\n            const words = String(text).split(' ');\n            let line = '';\n            let lineCount = 1;\n            for (let i = 0; i < words.length; i++) {\n                const testLine = line + words[i] + ' ';\n                const metrics = context.measureText(testLine);\n                const testWidth = metrics.width;\n                if (testWidth > width && i > 0) {\n                    line = words[i] + ' ';\n                    lineCount++;\n                } else {\n                    line = testLine;\n                }\n            }\n            const explicitLines = String(text).split('\\n').length - 1;\n            lineCount += explicitLines;\n            return Math.ceil(lineCount * fontSize * lineHeightMultiplier);\n        } catch (_) {\n            return 0;\n        }\n    };\n\n    const computeLayout = (elements, itemData) => {\n        const layoutElements = JSON.parse(JSON.stringify(elements));\n        \n        const isInside = (inner, outer) => {\n             const eps = 0.1;\n             return (\n                 inner.x >= outer.x - eps &&\n                 inner.x + inner.width <= outer.x + outer.width + eps &&\n                 inner.y >= outer.y - eps &&\n                 inner.y + inner.height <= outer.y + outer.height + eps\n             );\n        };\n\n        const autoGrowTexts = layoutElements\n            .filter(el => el.type === 'text' && el.autoGrow)\n            .sort((a, b) => a.y - b.y);\n\n        autoGrowTexts.forEach(textEl => {\n            let content = textEl.content;\n            content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                const val = itemData[key.trim()];\n                return val !== undefined && val !== null ? String(val) : match;\n            });\n            \n            const fontSize = parseInt(String((textEl.style && textEl.style.fontSize) || 16));\n            const fontFamily = String((textEl.style && textEl.style.fontFamily) || 'Arial');\n            const measuredHeight = measureTextHeight(content, textEl.width, fontFamily, fontSize);\n            \n            const designHeight = textEl.height;\n            const delta = measuredHeight - designHeight;\n            \n            if (delta > 0) {\n                const originalBottom = textEl.y + designHeight;\n                const originalTextRect = {\n                    x: textEl.x,\n                    y: textEl.y,\n                    width: textEl.width,\n                    height: designHeight\n                };\n                \n                textEl.height = measuredHeight;\n                \n                layoutElements.forEach(other => {\n                    if (other.id === textEl.id) return;\n                    \n                    if (isInside(originalTextRect, other)) {\n                        other.height += delta;\n                    }\n                    \n                    if (other.y >= originalBottom) {\n                        other.y += delta;\n                    }\n                });\n            }\n        });\n        \n        let maxY = 0;\n        layoutElements.forEach(el => {\n            const bottom = el.y + el.height;\n            if (bottom > maxY) maxY = bottom;\n        });\n        \n        return { layoutElements, maxY };\n    };\n\n    const computeItemHeight = (elements, itemData, fallbackHeight) => {\n        const { maxY } = computeLayout(elements, itemData);\n        return fallbackHeight ? Math.max(maxY, fallbackHeight) : maxY;\n    };\n\n    const formatValue = (value, formatting) => {\n        if (!formatting || formatting.type === 'text') return value !== undefined && value !== null ? String(value) : '';\n        if (value === undefined || value === null) return '';\n\n        if (formatting.type === 'boolean') {\n             const isTrue = String(value) === 'true' || value === true || (typeof value === 'number' && value > 0);\n             return isTrue ? (formatting.trueLabel || 'Sim') : (formatting.falseLabel || 'Não');\n        }\n\n        if (formatting.type === 'date') {\n            try {\n                const date = new Date(value);\n                if (isNaN(date.getTime())) return String(value);\n                \n                if (formatting.dateFormat) {\n                     const d = date.getDate().toString().padStart(2, '0');\n                     const m = (date.getMonth() + 1).toString().padStart(2, '0');\n                     const y = date.getFullYear();\n                     const H = date.getHours().toString().padStart(2, '0');\n                     const M = date.getMinutes().toString().padStart(2, '0');\n                     const S = date.getSeconds().toString().padStart(2, '0');\n                     \n                     return formatting.dateFormat\n                        .replace('DD', d)\n                        .replace('MM', m)\n                        .replace('YYYY', String(y))\n                        .replace('HH', H)\n                        .replace('mm', M)\n                        .replace('ss', S);\n                }\n                return date.toLocaleDateString();\n            } catch (e) { return String(value); }\n        }\n\n        if (formatting.type === 'number') {\n             const num = parseFloat(value);\n             if (isNaN(num)) return String(value);\n             \n             if (formatting.numberFormat === 'currency') {\n                 return (formatting.currencySymbol || 'R$') + ' ' + num.toFixed(formatting.decimalPlaces || 2);\n             }\n             if (formatting.numberFormat === 'percent') {\n                 return num.toFixed(formatting.decimalPlaces || 0) + '%';\n             }\n             if (formatting.decimalPlaces !== undefined) {\n                 return num.toFixed(formatting.decimalPlaces);\n             }\n             return num.toFixed(formatting.decimalPlaces || 0);\n        }\n        \n        return String(value);\n    };\n\n    const checkCondition = (propValue, operator, ruleValue) => {\n        const val = String(propValue).toLowerCase();\n        const target = String(ruleValue).toLowerCase();\n        \n        switch (operator) {\n            case 'equals': return val === target;\n            case 'notEquals': return val !== target;\n            case 'contains': return val.includes(target);\n            case 'greaterThan': return parseFloat(val) > parseFloat(target);\n            case 'lessThan': return parseFloat(val) < parseFloat(target);\n            case 'truthy': return !!propValue;\n            case 'falsy': return !propValue;\n            default: return false;\n        }\n    };\n\n    const camelToKebab = (string) => {\n        return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n    };\n\n    const hex8ToRgba = (hex) => {\n        const m = /^#([0-9a-fA-F]{8})$/.exec(hex);\n        if (!m) return hex;\n        const h = m[1];\n        const r = parseInt(h.slice(0, 2), 16);\n        const g = parseInt(h.slice(2, 4), 16);\n        const b = parseInt(h.slice(4, 6), 16);\n        const a = parseInt(h.slice(6, 8), 16) / 255;\n        return `rgba(${r}, ${g}, ${b}, ${a})`;\n    };\n\n    const styleObjectToString = (style) => {\n        if (!style) return '';\n        const pxProps = [\n            'width', 'height', 'top', 'left', 'right', 'bottom', \n            'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth',\n            'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'\n        ];\n        \n        return Object.entries(style)\n            .map(([key, value]) => {\n                if (value === undefined || value === null) return '';\n                const cssKey = camelToKebab(key);\n                let cssValue = (typeof value === 'number' && pxProps.includes(key)) ? value + 'px' : value;\n                if (typeof cssValue === 'string') {\n                    if (/^#([0-9a-fA-F]{8})$/.test(cssValue)) {\n                        cssValue = hex8ToRgba(cssValue);\n                    }\n                }\n                return `${cssKey}: ${cssValue}`;\n            })\n            .filter(Boolean)\n            .join('; ');\n    };\n\n    const getAnimationStyles = (anim) => {\n        if (!anim || anim.type === 'none') return {};\n        return {\n            animationName: anim.type,\n            animationDuration: (anim.duration || 1) + 's',\n            animationDelay: (anim.delay || 0) + 's',\n            animationIterationCount: anim.iterationCount || 1,\n            animationTimingFunction: anim.timingFunction || 'ease',\n            animationFillMode: 'both'\n        };\n    };\n\n    const keyframesCss = `\n    @keyframes slideIn {\n                from { opacity: 0; transform: translateY(20px); }\n                to { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes fadeIn { \n        from { opacity: 0; } \n        to { opacity: 1; } \n    }\n    @keyframes slideInLeft { \n        from { opacity: 0; transform: translateX(-50px); } \n        to { opacity: 1; transform: translateX(0); } \n    }\n    @keyframes slideInRight { \n        from { opacity: 0; transform: translateX(50px); } \n        to { opacity: 1; transform: translateX(0); } \n    }\n    @keyframes slideInUp { \n        from { opacity: 0; transform: translateY(50px); } \n        to { opacity: 1; transform: translateY(0); } \n    }\n    @keyframes slideInDown { \n        from { opacity: 0; transform: translateY(-50px); } \n        to { opacity: 1; transform: translateY(0); } \n    }\n    @keyframes zoomIn { \n        from { opacity: 0; transform: scale(0.5); } \n        to { opacity: 1; transform: scale(1); } \n    }\n    @keyframes bounceIn {\n        0% { opacity: 0; transform: scale(0.3); }\n        50% { opacity: 1; transform: scale(1.05); }\n        70% { transform: scale(0.9); }\n        100% { transform: scale(1); }\n    }\n    @keyframes pulse {\n        0% { transform: scale(1); }\n        50% { transform: scale(1.05); }\n        100% { transform: scale(1); }\n    }\n    @keyframes shake {\n        0%, 100% { transform: translateX(0); }\n        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n        20%, 40%, 60%, 80% { transform: translateX(5px); }\n    }\n    @keyframes spin { \n        from { transform: rotate(0deg); } \n        to { transform: rotate(360deg); } \n    }\n    \n    /* Improved / Smoother Animations */\n    @keyframes smoothSlideUp {\n        0% { opacity: 0; transform: translateY(30px); }\n        100% { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes popIn {\n        0% { opacity: 0; transform: scale(0.8) translateY(10px); }\n        100% { opacity: 1; transform: scale(1) translateY(0); }\n    }\n    @keyframes blurIn {\n        0% { opacity: 0; filter: blur(10px); }\n        100% { opacity: 1; filter: blur(0); }\n    }\n    `;\n\n    const renderItem = (itemData, index = 0, offsetY = 0) => {\n        const { layoutElements } = computeLayout(elements, itemData);\n        return layoutElements.map(element => {\n            let content = element.content;\n            let imgSrc = '';\n\n            // Resolve Content & Formatting\n            if (element.type === 'text') {\n                content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                    const val = itemData[key.trim()];\n                    if (val === undefined || val === null) return match;\n                    if (element.formatting) {\n                        return formatValue(val, element.formatting);\n                    }\n                    return String(val);\n                });\n            } else if (element.type === 'image') {\n                 if (element.dataBinding) {\n                    const val = itemData[element.dataBinding];\n                    if (val !== undefined && val !== null) {\n                        imgSrc = String(val);\n                    } else {\n                        imgSrc = content;\n                    }\n                 } else {\n                     imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                        const val = itemData[key.trim()];\n                        return val !== undefined && val !== null ? String(val) : match;\n                    });\n                 }\n            }\n\n            // Resolve Conditional Styles\n            let conditionalStyles = {};\n            if (element.conditions) {\n                element.conditions.forEach(rule => {\n                    const propVal = itemData[rule.property];\n                    if (checkCondition(propVal, rule.operator, rule.value)) {\n                         conditionalStyles = { ...conditionalStyles, ...rule.style };\n                    }\n                });\n            }\n\n            // Resolve Style Bindings\n            let bindingStyles = {};\n            if (element.styleBindings) {\n                Object.entries(element.styleBindings).forEach(([styleProp, variableName]) => {\n                    const val = itemData[variableName];\n                    if (val !== undefined && val !== null) {\n                        bindingStyles[styleProp] = String(val);\n                    }\n                });\n            }\n\n            const baseStyle = {\n                position: 'absolute',\n                left: element.x,\n                top: element.y + offsetY,\n                width: element.width,\n                height: element.autoGrow ? 'auto' : element.height,\n                transform: element.rotation ? `rotate(${element.rotation}deg)` : undefined,\n                overflow: element.autoGrow ? 'visible' : 'hidden',\n                whiteSpace: element.autoGrow ? 'pre-wrap' : undefined,\n                wordBreak: element.autoGrow ? 'break-word' : undefined,\n                ...element.style,\n                ...conditionalStyles,\n                ...bindingStyles\n            };\n            \n            // Fix: remove padding if it's not explicitly set, or handle it for text\n            if (element.type === 'text' && !baseStyle.padding) {\n                // baseStyle.padding = '8px'; // Removed default padding to respect resize box\n            }\n            \n            const styleString = styleObjectToString(baseStyle);\n\n            if (element.type === 'text') {\n                return `<div style=\"${styleString}\">${content}</div>`;\n            } else if (element.type === 'image') {\n                const imgStyle = styleObjectToString({\n                    width: '100%',\n                    height: '100%',\n                    objectFit: element.style?.objectFit || 'cover',\n                    display: 'block'\n                });\n                return `<div style=\"${styleString}\"><img src=\"${imgSrc}\" alt=\"Element\" style=\"${imgStyle}\" /></div>`;\n            } else if (element.type === 'box') {\n                 return `<div style=\"${styleString}\"></div>`;\n            }\n            return '';\n        }).join('\\n');\n    };\n\n    if (isList && Array.isArray(data)) {\n        // Calculate per-item height respecting autoGrow\n        // Sort data\n        let listData = [...data];\n        if (listSettings && listSettings.sortProp) {\n            const prop = listSettings.sortProp;\n            const order = listSettings.sortOrder === 'asc' ? 1 : -1;\n            listData.sort((a, b) => {\n                const valA = a[prop];\n                const valB = b[prop];\n                if (valA < valB) return -1 * order;\n                if (valA > valB) return 1 * order;\n                return 0;\n            });\n        }\n        \n        // Handle newest position\n        if (listSettings && listSettings.newestPosition === 'top') {\n             listData.reverse();\n        }\n\n        // Generate HTML for all items\n        const itemsHtml = listData.map((item, index) => {\n             const itemHtml = renderItem(item, index, 0); \n             const itemHeight = computeItemHeight(elements, item, canvasHeight);\n             const itemContainerStyle = styleObjectToString({\n                 position: 'relative',\n                 height: itemHeight,\n                 width: '100%'\n             });\n             \n             return `<div class=\"list-item\" style=\"${itemContainerStyle}\">${itemHtml}</div>`;\n        }).join('\\n');\n\n        // Animation Styles based on settings\n        const scrollDirection = (listSettings && listSettings.scrollDirection) || 'down';\n        const containerHeight = (listSettings && listSettings.containerHeight) ? listSettings.containerHeight + 'px' : '100%';\n        \n        const justify = (listSettings && listSettings.newestPosition === 'top') ? 'flex-start' : 'flex-end';\n\n        // Entry Animation from settings\n        const entryAnim = listSettings && listSettings.entryAnimation ? listSettings.entryAnimation : { type: 'slideIn', duration: 0.3, timingFunction: 'ease-out' };\n        const entryAnimName = entryAnim.type === 'none' ? 'none' : entryAnim.type;\n        const entryAnimDuration = entryAnim.duration + 's';\n        const entryAnimTiming = entryAnim.timingFunction || 'ease-out';\n\n        const animationCss = `\n            ${keyframesCss}\n\n            .list-wrapper {\n                display: flex;\n                flex-direction: column;\n                justify-content: ${justify};\n                height: ${containerHeight};\n                width: 100%;\n                overflow-y: auto;\n                overflow-x: hidden;\n                box-sizing: border-box;\n                padding: 10px;\n            }\n            .list-item {\n                flex-shrink: 0;\n                animation: ${entryAnimName} ${entryAnimDuration} ${entryAnimTiming};\n                margin-bottom: 10px;\n                width: 100%;\n                position: relative;\n            }\n        `;\n        \n        const scrollScript = scrollDirection === 'up' \n            ? `<script>\n                document.addEventListener('DOMContentLoaded', () => {\n                    const wrapper = document.querySelector('.list-wrapper');\n                    if(wrapper) wrapper.scrollTop = wrapper.scrollHeight;\n                });\n               <\/script>`\n            : '';\n\n        // Inject Smart Script for Dynamic Updates\n        const injectionScript = `\n            <script>\n            (function() {\n                try {\n                    const elements = ${JSON.stringify(elements)};\n                    const formatValue = ${formatValue.toString()};\n                    const checkCondition = ${checkCondition.toString()};\n                    const camelToKebab = ${camelToKebab.toString()};\n                    const hex8ToRgba = ${hex8ToRgba.toString()};\n                    const styleObjectToString = ${styleObjectToString.toString()};\n                    const getAnimationStyles = ${getAnimationStyles.toString()};\n                    const renderItem = ${renderItem.toString()};\n\n                    const measureTextHeight = ${measureTextHeight.toString()};\n                    const computeLayout = ${computeLayout.toString()};\n                    const computeItemHeight = ${computeItemHeight.toString()};\n                    const itemHeightFallback = ${canvasHeight || 0};\n                    const newestPosition = \"${(listSettings && listSettings.newestPosition) || 'bottom'}\";\n                    const scrollDirection = \"${(listSettings && listSettings.scrollDirection) || 'down'}\";\n\n                    window.addItem = function(data) {\n                        const wrapper = document.querySelector('.list-wrapper');\n                        if (!wrapper) return;\n\n                        const itemHtml = renderItem(data, 0, 0);\n                        const itemHeight = computeItemHeight(elements, data, itemHeightFallback);\n                        const itemContainerStyle = styleObjectToString({\n                            position: 'relative',\n                            height: itemHeight,\n                            width: '100%'\n                        });\n\n                        const div = document.createElement('div');\n                        div.className = 'list-item';\n                        div.setAttribute('style', itemContainerStyle);\n                        div.innerHTML = itemHtml;\n\n                        if (newestPosition === 'top') {\n                            wrapper.insertBefore(div, wrapper.firstChild);\n                        } else {\n                            wrapper.appendChild(div);\n                        }\n                        \n                        if (scrollDirection === 'up') {\n                           wrapper.scrollTop = wrapper.scrollHeight;\n                        }\n                    };\n                } catch(e) { console.error(\"Smart List Init Error\", e); }\n            })();\n            <\/script>\n        `;\n\n        return `\n            <style>${animationCss}</style>\n            <div class=\"list-wrapper\">\n                ${itemsHtml}\n            </div>\n            ${scrollScript}\n            ${injectionScript}\n        `;\n    }\n\n    // Single Item\n    const contentHtml = renderItem(data);\n    return `<div style=\"position: relative; width: 100%; height: 100%; overflow: hidden;\">${contentHtml}</div>`;\n}\n";
+}), generateHTML = (n, _, E = {}) => Function("elements", "data", "options", getRendererCode() + "\nreturn renderTemplate(elements, data, options);")(n, _, E), getRendererCode = () => "\n/**\n * Render Template\n * @param {Array} elements - The JSON configuration of elements\n * @param {Object|Array} data - The data object to inject (Object for single, Array for list)\n * @param {Object} options - { isList: boolean, listSettings: { sortProp: string, sortOrder: 'asc'|'desc', newestPosition: 'top'|'bottom', scrollDirection: 'up'|'down', containerHeight: number }, canvasHeight: number }\n * @returns {string} - The generated HTML string\n */\nfunction renderTemplate(elements, data, options = {}) {\n    const { isList, listSettings, canvasHeight } = options;\n\n    const measureTextHeight = (text, width, fontFamily, fontSize, lineHeightMultiplier = 1.2) => {\n        if (!text) return 0;\n        try {\n            const canvas = document.createElement('canvas');\n            const context = canvas.getContext('2d');\n            if (!context) return 0;\n            context.font = `${fontSize}px ${fontFamily}`;\n            const words = String(text).split(' ');\n            let line = '';\n            let lineCount = 1;\n            for (let i = 0; i < words.length; i++) {\n                const testLine = line + words[i] + ' ';\n                const metrics = context.measureText(testLine);\n                const testWidth = metrics.width;\n                if (testWidth > width && i > 0) {\n                    line = words[i] + ' ';\n                    lineCount++;\n                } else {\n                    line = testLine;\n                }\n            }\n            const explicitLines = String(text).split('\\n').length - 1;\n            lineCount += explicitLines;\n            return Math.ceil(lineCount * fontSize * lineHeightMultiplier);\n        } catch (_) {\n            return 0;\n        }\n    };\n\n    const computeLayout = (elements, itemData) => {\n        const layoutElements = JSON.parse(JSON.stringify(elements));\n        \n        const isInside = (inner, outer) => {\n             const eps = 0.1;\n             return (\n                 inner.x >= outer.x - eps &&\n                 inner.x + inner.width <= outer.x + outer.width + eps &&\n                 inner.y >= outer.y - eps &&\n                 inner.y + inner.height <= outer.y + outer.height + eps\n             );\n        };\n\n        const autoGrowElements = layoutElements\n            .filter(el => (el.type === 'text' || el.type === 'text-container') && el.autoGrow)\n            .sort((a, b) => a.y - b.y);\n\n        autoGrowElements.forEach(textEl => {\n            let content = textEl.content;\n            content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                const val = itemData[key.trim()];\n                return val !== undefined && val !== null ? String(val) : match;\n            });\n            \n            const fontSize = parseInt(String((textEl.style && textEl.style.fontSize) || 16));\n            const fontFamily = String((textEl.style && textEl.style.fontFamily) || 'Arial');\n            \n            const isHorizontal = textEl.type === 'text-container' && textEl.containerExpansion === 'horizontal';\n            \n            if (isHorizontal) {\n                // Horizontal expansion: Update width only\n                // Requires canvas context which is available in measureTextHeight scope or we create new one\n                // For simplicity, we can't easily access the measure logic here if it's not exposed, \n                // but measureTextHeight is available in this scope.\n                // However measureTextHeight calculates HEIGHT. We need WIDTH.\n                \n                try {\n                    const canvas = document.createElement('canvas');\n                    const context = canvas.getContext('2d');\n                    if (context) {\n                         context.font = `${fontSize}px ${fontFamily}`;\n                         const metrics = context.measureText(content);\n                         const padding = parseInt(String((textEl.style && textEl.style.padding) || 0)) * 2;\n                         const newWidth = Math.ceil(metrics.width + padding);\n                         if (newWidth > textEl.width) {\n                             textEl.width = newWidth;\n                         }\n                    }\n                } catch(e) {}\n            } else {\n                // Vertical Expansion\n                const measuredHeight = measureTextHeight(content, textEl.width, fontFamily, fontSize);\n                const designHeight = textEl.height;\n                const delta = measuredHeight - designHeight;\n                \n                if (delta > 0) {\n                    const originalBottom = textEl.y + designHeight;\n                    const originalTextRect = {\n                        x: textEl.x,\n                        y: textEl.y,\n                        width: textEl.width,\n                        height: designHeight\n                    };\n                    \n                    textEl.height = measuredHeight;\n                    \n                    layoutElements.forEach(other => {\n                        if (other.id === textEl.id) return;\n                        \n                        if (isInside(originalTextRect, other)) {\n                            other.height += delta;\n                        }\n                        \n                        if (other.y >= originalBottom) {\n                            other.y += delta;\n                        }\n                    });\n                }\n            }\n        });\n        \n        let maxY = 0;\n        layoutElements.forEach(el => {\n            const bottom = el.y + el.height;\n            if (bottom > maxY) maxY = bottom;\n        });\n        \n        return { layoutElements, maxY };\n    };\n\n    const computeItemHeight = (elements, itemData, fallbackHeight) => {\n        const { maxY } = computeLayout(elements, itemData);\n        return fallbackHeight ? Math.max(maxY, fallbackHeight) : maxY;\n    };\n\n    const formatValue = (value, formatting) => {\n        if (!formatting || formatting.type === 'text') return value !== undefined && value !== null ? String(value) : '';\n        if (value === undefined || value === null) return '';\n\n        if (formatting.type === 'boolean') {\n             const isTrue = String(value) === 'true' || value === true || (typeof value === 'number' && value > 0);\n             return isTrue ? (formatting.trueLabel || 'Sim') : (formatting.falseLabel || 'Não');\n        }\n\n        if (formatting.type === 'date') {\n            try {\n                const date = new Date(value);\n                if (isNaN(date.getTime())) return String(value);\n                \n                if (formatting.dateFormat) {\n                     const d = date.getDate().toString().padStart(2, '0');\n                     const m = (date.getMonth() + 1).toString().padStart(2, '0');\n                     const y = date.getFullYear();\n                     const H = date.getHours().toString().padStart(2, '0');\n                     const M = date.getMinutes().toString().padStart(2, '0');\n                     const S = date.getSeconds().toString().padStart(2, '0');\n                     \n                     return formatting.dateFormat\n                        .replace('DD', d)\n                        .replace('MM', m)\n                        .replace('YYYY', String(y))\n                        .replace('HH', H)\n                        .replace('mm', M)\n                        .replace('ss', S);\n                }\n                return date.toLocaleDateString();\n            } catch (e) { return String(value); }\n        }\n\n        if (formatting.type === 'number') {\n             const num = parseFloat(value);\n             if (isNaN(num)) return String(value);\n             \n             if (formatting.numberFormat === 'currency') {\n                 return (formatting.currencySymbol || 'R$') + ' ' + num.toFixed(formatting.decimalPlaces || 2);\n             }\n             if (formatting.numberFormat === 'percent') {\n                 return num.toFixed(formatting.decimalPlaces || 0) + '%';\n             }\n             if (formatting.decimalPlaces !== undefined) {\n                 return num.toFixed(formatting.decimalPlaces);\n             }\n             return num.toFixed(formatting.decimalPlaces || 0);\n        }\n        \n        return String(value);\n    };\n\n    const checkCondition = (propValue, operator, ruleValue) => {\n        const val = String(propValue).toLowerCase();\n        const target = String(ruleValue).toLowerCase();\n        \n        switch (operator) {\n            case 'equals': return val === target;\n            case 'notEquals': return val !== target;\n            case 'contains': return val.includes(target);\n            case 'greaterThan': return parseFloat(val) > parseFloat(target);\n            case 'lessThan': return parseFloat(val) < parseFloat(target);\n            case 'truthy': return !!propValue;\n            case 'falsy': return !propValue;\n            default: return false;\n        }\n    };\n\n    const camelToKebab = (string) => {\n        return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n    };\n\n    const hex8ToRgba = (hex) => {\n        const m = /^#([0-9a-fA-F]{8})$/.exec(hex);\n        if (!m) return hex;\n        const h = m[1];\n        const r = parseInt(h.slice(0, 2), 16);\n        const g = parseInt(h.slice(2, 4), 16);\n        const b = parseInt(h.slice(4, 6), 16);\n        const a = parseInt(h.slice(6, 8), 16) / 255;\n        return `rgba(${r}, ${g}, ${b}, ${a})`;\n    };\n\n    const styleObjectToString = (style) => {\n        if (!style) return '';\n        const pxProps = [\n            'width', 'height', 'top', 'left', 'right', 'bottom', \n            'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth',\n            'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'\n        ];\n        \n        return Object.entries(style)\n            .map(([key, value]) => {\n                if (value === undefined || value === null) return '';\n                const cssKey = camelToKebab(key);\n                let cssValue = (typeof value === 'number' && pxProps.includes(key)) ? value + 'px' : value;\n                if (typeof cssValue === 'string') {\n                    if (/^#([0-9a-fA-F]{8})$/.test(cssValue)) {\n                        cssValue = hex8ToRgba(cssValue);\n                    }\n                }\n                return `${cssKey}: ${cssValue}`;\n            })\n            .filter(Boolean)\n            .join('; ');\n    };\n\n    const getAnimationStyles = (anim) => {\n        if (!anim || anim.type === 'none') return {};\n        return {\n            animationName: anim.type,\n            animationDuration: (anim.duration || 1) + 's',\n            animationDelay: (anim.delay || 0) + 's',\n            animationIterationCount: anim.iterationCount || 1,\n            animationTimingFunction: anim.timingFunction || 'ease',\n            animationFillMode: 'both'\n        };\n    };\n\n    const keyframesCss = `\n    @keyframes slideIn {\n                from { opacity: 0; transform: translateY(20px); }\n                to { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes fadeIn { \n        from { opacity: 0; } \n        to { opacity: 1; } \n    }\n    @keyframes slideInLeft { \n        from { opacity: 0; transform: translateX(-50px); } \n        to { opacity: 1; transform: translateX(0); } \n    }\n    @keyframes slideInRight { \n        from { opacity: 0; transform: translateX(50px); } \n        to { opacity: 1; transform: translateX(0); } \n    }\n    @keyframes slideInUp { \n        from { opacity: 0; transform: translateY(50px); } \n        to { opacity: 1; transform: translateY(0); } \n    }\n    @keyframes slideInDown { \n        from { opacity: 0; transform: translateY(-50px); } \n        to { opacity: 1; transform: translateY(0); } \n    }\n    @keyframes zoomIn { \n        from { opacity: 0; transform: scale(0.5); } \n        to { opacity: 1; transform: scale(1); } \n    }\n    @keyframes bounceIn {\n        0% { opacity: 0; transform: scale(0.3); }\n        50% { opacity: 1; transform: scale(1.05); }\n        70% { transform: scale(0.9); }\n        100% { transform: scale(1); }\n    }\n    @keyframes pulse {\n        0% { transform: scale(1); }\n        50% { transform: scale(1.05); }\n        100% { transform: scale(1); }\n    }\n    @keyframes shake {\n        0%, 100% { transform: translateX(0); }\n        10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n        20%, 40%, 60%, 80% { transform: translateX(5px); }\n    }\n    @keyframes spin { \n        from { transform: rotate(0deg); } \n        to { transform: rotate(360deg); } \n    }\n    \n    /* Improved / Smoother Animations */\n    @keyframes smoothSlideUp {\n        0% { opacity: 0; transform: translateY(30px); }\n        100% { opacity: 1; transform: translateY(0); }\n    }\n    @keyframes popIn {\n        0% { opacity: 0; transform: scale(0.8) translateY(10px); }\n        100% { opacity: 1; transform: scale(1) translateY(0); }\n    }\n    @keyframes blurIn {\n        0% { opacity: 0; filter: blur(10px); }\n        100% { opacity: 1; filter: blur(0); }\n    }\n    `;\n\n    const renderItem = (itemData, index = 0, offsetY = 0) => {\n        const { layoutElements } = computeLayout(elements, itemData);\n        return layoutElements.map(element => {\n            let content = element.content;\n            let imgSrc = '';\n\n            // Resolve Content & Formatting\n            if (element.type === 'text') {\n                content = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                    const val = itemData[key.trim()];\n                    if (val === undefined || val === null) return match;\n                    if (element.formatting) {\n                        return formatValue(val, element.formatting);\n                    }\n                    return String(val);\n                });\n            } else if (element.type === 'image') {\n                 if (element.dataBinding) {\n                    const val = itemData[element.dataBinding];\n                    if (val !== undefined && val !== null) {\n                        imgSrc = String(val);\n                    } else {\n                        imgSrc = content;\n                    }\n                 } else {\n                     imgSrc = content.replace(/\\{\\{(.*?)\\}\\}/g, (match, key) => {\n                        const val = itemData[key.trim()];\n                        return val !== undefined && val !== null ? String(val) : match;\n                    });\n                 }\n            }\n\n            // Resolve Conditional Styles\n            let conditionalStyles = {};\n            if (element.conditions) {\n                element.conditions.forEach(rule => {\n                    const propVal = itemData[rule.property];\n                    if (checkCondition(propVal, rule.operator, rule.value)) {\n                         conditionalStyles = { ...conditionalStyles, ...rule.style };\n                    }\n                });\n            }\n\n            // Resolve Style Bindings\n            let bindingStyles = {};\n            if (element.styleBindings) {\n                Object.entries(element.styleBindings).forEach(([styleProp, variableName]) => {\n                    const val = itemData[variableName];\n                    if (val !== undefined && val !== null) {\n                        bindingStyles[styleProp] = String(val);\n                    }\n                });\n            }\n\n            const baseStyle = {\n                position: 'absolute',\n                left: element.x,\n                top: element.y + offsetY,\n                width: element.width,\n                height: element.autoGrow ? 'auto' : element.height,\n                transform: element.rotation ? `rotate(${element.rotation}deg)` : undefined,\n                overflow: element.autoGrow ? 'visible' : 'hidden',\n                whiteSpace: (element.type === 'text-container' && element.autoGrow && element.containerExpansion === 'horizontal') ? 'nowrap' : (element.autoGrow ? 'pre-wrap' : undefined),\n                wordBreak: element.autoGrow ? 'break-word' : undefined,\n                ...element.style,\n                ...conditionalStyles,\n                ...bindingStyles\n            };\n            \n            // Fix: remove padding if it's not explicitly set, or handle it for text\n            if (element.type === 'text' && !baseStyle.padding) {\n                // baseStyle.padding = '8px'; // Removed default padding to respect resize box\n            }\n            \n            const styleString = styleObjectToString(baseStyle);\n\n            if (element.type === 'text' || element.type === 'text-container') {\n                return `<div style=\"${styleString}\">${content}</div>`;\n            } else if (element.type === 'image') {\n                const imgStyle = styleObjectToString({\n                    width: '100%',\n                    height: '100%',\n                    objectFit: element.style?.objectFit || 'cover',\n                    display: 'block'\n                });\n                return `<div style=\"${styleString}\"><img src=\"${imgSrc}\" alt=\"Element\" style=\"${imgStyle}\" /></div>`;\n            } else if (element.type === 'box') {\n                 return `<div style=\"${styleString}\"></div>`;\n            }\n            return '';\n        }).join('\\n');\n    };\n\n    if (isList && Array.isArray(data)) {\n        // Calculate per-item height respecting autoGrow\n        // Sort data\n        let listData = [...data];\n        if (listSettings && listSettings.sortProp) {\n            const prop = listSettings.sortProp;\n            const order = listSettings.sortOrder === 'asc' ? 1 : -1;\n            listData.sort((a, b) => {\n                const valA = a[prop];\n                const valB = b[prop];\n                if (valA < valB) return -1 * order;\n                if (valA > valB) return 1 * order;\n                return 0;\n            });\n        }\n        \n        // Handle newest position\n        if (listSettings && listSettings.newestPosition === 'top') {\n             listData.reverse();\n        }\n\n        // Generate HTML for all items\n        const itemsHtml = listData.map((item, index) => {\n             const itemHtml = renderItem(item, index, 0); \n             const itemHeight = computeItemHeight(elements, item, canvasHeight);\n             const itemContainerStyle = styleObjectToString({\n                 position: 'relative',\n                 height: itemHeight,\n                 width: '100%'\n             });\n             \n             return `<div class=\"list-item\" style=\"${itemContainerStyle}\">${itemHtml}</div>`;\n        }).join('\\n');\n\n        // Animation Styles based on settings\n        const scrollDirection = (listSettings && listSettings.scrollDirection) || 'down';\n        const containerHeight = (listSettings && listSettings.containerHeight) ? listSettings.containerHeight + 'px' : '100%';\n        \n        const justify = (listSettings && listSettings.newestPosition === 'top') ? 'flex-start' : 'flex-end';\n\n        // Entry Animation from settings\n        const entryAnim = listSettings && listSettings.entryAnimation ? listSettings.entryAnimation : { type: 'slideIn', duration: 0.3, timingFunction: 'ease-out' };\n        const entryAnimName = entryAnim.type === 'none' ? 'none' : entryAnim.type;\n        const entryAnimDuration = entryAnim.duration + 's';\n        const entryAnimTiming = entryAnim.timingFunction || 'ease-out';\n\n        const animationCss = `\n            ${keyframesCss}\n\n            .list-wrapper {\n                display: flex;\n                flex-direction: column;\n                justify-content: ${justify};\n                height: ${containerHeight};\n                width: 100%;\n                overflow-y: auto;\n                overflow-x: hidden;\n                box-sizing: border-box;\n                padding: 10px;\n            }\n            .list-item {\n                flex-shrink: 0;\n                animation: ${entryAnimName} ${entryAnimDuration} ${entryAnimTiming};\n                margin-bottom: 10px;\n                width: 100%;\n                position: relative;\n            }\n        `;\n        \n        const scrollScript = scrollDirection === 'up' \n            ? `<script>\n                document.addEventListener('DOMContentLoaded', () => {\n                    const wrapper = document.querySelector('.list-wrapper');\n                    if(wrapper) wrapper.scrollTop = wrapper.scrollHeight;\n                });\n               <\/script>`\n            : '';\n\n        // Inject Smart Script for Dynamic Updates\n        const injectionScript = `\n            <script>\n            (function() {\n                try {\n                    const elements = ${JSON.stringify(elements)};\n                    const formatValue = ${formatValue.toString()};\n                    const checkCondition = ${checkCondition.toString()};\n                    const camelToKebab = ${camelToKebab.toString()};\n                    const hex8ToRgba = ${hex8ToRgba.toString()};\n                    const styleObjectToString = ${styleObjectToString.toString()};\n                    const getAnimationStyles = ${getAnimationStyles.toString()};\n                    const renderItem = ${renderItem.toString()};\n\n                    const measureTextHeight = ${measureTextHeight.toString()};\n                    const computeLayout = ${computeLayout.toString()};\n                    const computeItemHeight = ${computeItemHeight.toString()};\n                    const itemHeightFallback = ${canvasHeight || 0};\n                    const newestPosition = \"${(listSettings && listSettings.newestPosition) || 'bottom'}\";\n                    const scrollDirection = \"${(listSettings && listSettings.scrollDirection) || 'down'}\";\n\n                    window.addItem = function(data) {\n                        const wrapper = document.querySelector('.list-wrapper');\n                        if (!wrapper) return;\n\n                        const itemHtml = renderItem(data, 0, 0);\n                        const itemHeight = computeItemHeight(elements, data, itemHeightFallback);\n                        const itemContainerStyle = styleObjectToString({\n                            position: 'relative',\n                            height: itemHeight,\n                            width: '100%'\n                        });\n\n                        const div = document.createElement('div');\n                        div.className = 'list-item';\n                        div.setAttribute('style', itemContainerStyle);\n                        div.innerHTML = itemHtml;\n\n                        if (newestPosition === 'top') {\n                            wrapper.insertBefore(div, wrapper.firstChild);\n                        } else {\n                            wrapper.appendChild(div);\n                        }\n                        \n                        if (scrollDirection === 'up') {\n                           wrapper.scrollTop = wrapper.scrollHeight;\n                        }\n                    };\n                } catch(e) { console.error(\"Smart List Init Error\", e); }\n            })();\n            <\/script>\n        `;\n\n        return `\n            <style>${animationCss}</style>\n            <div class=\"list-wrapper\">\n                ${itemsHtml}\n            </div>\n            ${scrollScript}\n            ${injectionScript}\n        `;\n    }\n\n    // Single Item\n    const contentHtml = renderItem(data);\n    return `<div style=\"position: relative; width: 100%; height: 100%; overflow: hidden;\">${contentHtml}</div>`;\n}\n";
 export { GenericEditor as EditorContent, generateHTML };