@1urso/generic-editor 0.1.36 → 0.1.37

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)), Bj = Array.from(B.layers), [Vj] = [...B.layersWithOutsidePointerEventsDisabled].slice(-1), Hj = Bj.indexOf(Vj), Uj = H ? Bj.indexOf(H) : -1, Wj = B.layersWithOutsidePointerEventsDisabled.size > 0, Gj = Uj >= Hj, Kj = 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)), 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 _ = n.target, E = [...B.branches].some((n) => n.contains(_));
-		!Gj || E || (j?.(n), N?.(n), n.defaultPrevented || P?.());
-	}, W), qj = useFocusOutside((n) => {
+		!Hj || E || (j?.(n), N?.(n), n.defaultPrevented || P?.());
+	}, W), Wj = useFocusOutside((n) => {
 		let _ = n.target;
 		[...B.branches].some((n) => n.contains(_)) || (M?.(n), N?.(n), n.defaultPrevented || P?.());
 	}, W);
 	return useEscapeKeydown((n) => {
-		Uj === B.layers.size - 1 && (A?.(n), !n.defaultPrevented && P && (n.preventDefault(), P()));
+		Bj === 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: Wj ? Gj ? "auto" : "none" : void 0,
+			pointerEvents: Vj ? Hj ? "auto" : "none" : void 0,
 			..._.style
 		},
-		onFocusCapture: composeEventHandlers(_.onFocusCapture, qj.onFocusCapture),
-		onBlurCapture: composeEventHandlers(_.onBlurCapture, qj.onBlurCapture),
-		onPointerDownCapture: composeEventHandlers(_.onPointerDownCapture, Kj.onPointerDownCapture)
+		onFocusCapture: composeEventHandlers(_.onFocusCapture, Wj.onFocusCapture),
+		onBlurCapture: composeEventHandlers(_.onBlurCapture, Wj.onBlurCapture),
+		onPointerDownCapture: composeEventHandlers(_.onPointerDownCapture, Uj.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, Bj = _.inert, Vj = _.allowPinchZoom, Hj = _.as, Uj = Hj === void 0 ? "div" : Hj, Wj = _.gapMode, Gj = __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, Lj = _.inert, Rj = _.allowPinchZoom, zj = _.as, Bj = zj === void 0 ? "div" : zj, Vj = _.gapMode, Hj = __rest(_, [
 		"forwardProps",
 		"children",
 		"className",
@@ -1209,21 +1209,21 @@ var effectCar = createSidecarMedium(), nothing = function() {}, RemoveScroll = R
 		"allowPinchZoom",
 		"as",
 		"gapMode"
-	]), Kj = W, qj = useMergeRefs([O, E]), Jj = __assign$2(__assign$2({}, Gj), j);
-	return React$1.createElement(React$1.Fragment, null, H && React$1.createElement(Kj, {
+	]), 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, {
 		sideCar: effectCar,
 		removeScrollBar: B,
 		shards: U,
 		noRelative: G,
 		noIsolation: Z,
-		inert: Bj,
+		inert: Lj,
 		setCallbacks: M,
-		allowPinchZoom: !!Vj,
+		allowPinchZoom: !!Rj,
 		lockRef: O,
-		gapMode: Wj
-	}), N ? React$1.cloneElement(React$1.Children.only(P), __assign$2(__assign$2({}, Jj), { ref: qj })) : React$1.createElement(Uj, __assign$2({}, Jj, {
+		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, {
 		className: z,
-		ref: qj
+		ref: Wj
 	}), 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 Bj = N.parentNode;
-		N = Bj && Bj.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? Bj.host : Bj;
+		var Lj = N.parentNode;
+		N = Lj && Lj.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? Lj.host : Lj;
 	} 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: Bj, y: Vj, data: Hj, reset: Uj } = await Z({
+		let { name: j, fn: Z } = N[E], { x: Lj, y: Rj, data: zj, reset: Bj } = await Z({
 			x: B,
 			y: H,
 			initialPlacement: O,
@@ -1975,17 +1975,17 @@ var computePosition$1 = async (n, _, E) => {
 				floating: _
 			}
 		});
-		B = Bj ?? B, H = Vj ?? H, W = {
+		B = Lj ?? B, H = Rj ?? H, W = {
 			...W,
 			[j]: {
 				...W[j],
-				...Hj
+				...zj
 			}
-		}, Uj && G <= 50 && (G++, typeof Uj == "object" && (Uj.placement && (U = Uj.placement), Uj.rects && (z = Uj.rects === !0 ? await M.getElementRects({
+		}, Bj && G <= 50 && (G++, typeof Bj == "object" && (Bj.placement && (U = Bj.placement), Bj.rects && (z = Bj.rects === !0 ? await M.getElementRects({
 			reference: n,
 			floating: _,
 			strategy: A
-		}) : Uj.rects), {x: B, y: H} = computeCoordsFromPlacement(z, U, P)), E = -1);
+		}) : Bj.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
-	})), Bj = B === "floating" ? {
+	})), Lj = B === "floating" ? {
 		x: E,
 		y: O,
 		width: j.floating.width,
 		height: j.floating.height
-	} : j.reference, Vj = await (A.getOffsetParent == null ? void 0 : A.getOffsetParent(M.floating)), Hj = await (A.isElement == null ? void 0 : A.isElement(Vj)) && await (A.getScale == null ? void 0 : A.getScale(Vj)) || {
+	} : 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)) || {
 		x: 1,
 		y: 1
-	}, Uj = rectToClientRect(A.convertOffsetParentRelativeRectToViewportRelativeRect ? await A.convertOffsetParentRelativeRectToViewportRelativeRect({
+	}, Bj = rectToClientRect(A.convertOffsetParentRelativeRectToViewportRelativeRect ? await A.convertOffsetParentRelativeRectToViewportRelativeRect({
 		elements: M,
-		rect: Bj,
-		offsetParent: Vj,
+		rect: Lj,
+		offsetParent: Rj,
 		strategy: N
-	}) : Bj);
+	}) : Lj);
 	return {
-		top: (Z.top - Uj.top + W.top) / Hj.y,
-		bottom: (Uj.bottom - Z.bottom + W.bottom) / Hj.y,
-		left: (Z.left - Uj.left + W.left) / Hj.x,
-		right: (Uj.right - Z.right + W.right) / Hj.x
+		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
 	};
 }
 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), Bj = W === "y", Vj = Bj ? "top" : "left", Hj = Bj ? "bottom" : "right", Uj = Bj ? "clientHeight" : "clientWidth", Wj = j.reference[G] + j.reference[W] - U[W] - j.floating[G], Gj = U[W] - j.reference[W], Kj = await (M.getOffsetParent == null ? void 0 : M.getOffsetParent(z)), qj = Kj ? Kj[Uj] : 0;
-		(!qj || !await (M.isElement == null ? void 0 : M.isElement(Kj))) && (qj = N.floating[Uj] || j.floating[G]);
-		let Jj = Wj / 2 - Gj / 2, Yj = qj / 2 - Z[G] / 2 - 1, Xj = min(H[Vj], Yj), Zj = min(H[Hj], Yj), Qj = Xj, $j = qj - Z[G] - Zj, eM = qj / 2 - Z[G] / 2 + Jj, tM = clamp$3(Qj, eM, $j), nM = !P.arrow && getAlignment(A) != null && eM !== tM && j.reference[G] / 2 - (eM < Qj ? Xj : Zj) - Z[G] / 2 < 0, rM = nM ? eM < Qj ? eM - Qj : eM - $j : 0;
+		}, 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;
 		return {
-			[W]: U[W] + rM,
+			[W]: U[W] + eM,
 			data: {
-				[W]: tM,
-				centerOffset: eM - tM - rM,
-				...nM && { alignmentOffset: rM }
+				[W]: Qj,
+				centerOffset: Zj - Qj - eM,
+				...$j && { alignmentOffset: eM }
 			},
-			reset: nM
+			reset: $j
 		};
 	}
 }), 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 Bj = getSide(O), Vj = getSideAxis(M), Hj = getSide(M) === M, Uj = await (N.isRTL == null ? void 0 : N.isRTL(P.floating)), Wj = H || (Hj || !G ? [getOppositePlacement(M)] : getExpandedPlacements(M)), Gj = W !== "none";
-			!H && Gj && Wj.push(...getOppositeAxisPlacements(M, G, W, Uj));
-			let Kj = [M, ...Wj], qj = await detectOverflow$1(_, Z), Jj = [], Yj = A.flip?.overflows || [];
-			if (z && Jj.push(qj[Bj]), B) {
-				let n = getAlignmentSides(O, j, Uj);
-				Jj.push(qj[n[0]], qj[n[1]]);
+			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]]);
 			}
-			if (Yj = [...Yj, {
+			if (Kj = [...Kj, {
 				placement: O,
-				overflows: Jj
-			}], !Jj.every((n) => n <= 0)) {
-				let n = (A.flip?.index || 0) + 1, _ = Kj[n];
-				if (_ && (!(B === "alignment" && Vj !== getSideAxis(_)) || Yj.every((n) => getSideAxis(n.placement) === Vj ? n.overflows[0] > 0 : !0))) return {
+				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 {
 					data: {
 						index: n,
-						overflows: Yj
+						overflows: Kj
 					},
 					reset: { placement: _ }
 				};
-				let E = Yj.filter((n) => n.overflows[0] <= 0).sort((n, _) => n.overflows[1] - _.overflows[1])[0]?.placement;
+				let E = Kj.filter((n) => n.overflows[0] <= 0).sort((n, _) => n.overflows[1] - _.overflows[1])[0]?.placement;
 				if (!E) switch (U) {
 					case "bestFit": {
-						let n = Yj.filter((n) => {
-							if (Gj) {
+						let n = Kj.filter((n) => {
+							if (Hj) {
 								let _ = getSideAxis(n.placement);
-								return _ === Vj || _ === "y";
+								return _ === Rj || _ === "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, _), Bj = typeof Z == "number" ? {
+			}, H = getSideAxis(A), U = getOppositeAxis(H), W = B[U], G = B[H], Z = evaluate(N, _), Lj = 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] + Bj.mainAxis, E = j.reference[U] + j.reference[n] - Bj.mainAxis;
+				let n = U === "y" ? "height" : "width", _ = j.reference[U] - j.floating[n] + Lj.mainAxis, E = j.reference[U] + j.reference[n] - Lj.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 : Bj.crossAxis), O = j.reference[H] + j.reference[n] + (_ ? 0 : M.offset?.[H] || 0) - (_ ? Bj.crossAxis : 0);
+				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);
 				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, Bj, Vj;
-			H === "top" || H === "bottom" ? (Bj = H, Vj = U === (await (M.isRTL == null ? void 0 : M.isRTL(N.floating)) ? "start" : "end") ? "left" : "right") : (Vj = H, Bj = U === "end" ? "top" : "bottom");
-			let Hj = Z - B.top - B.bottom, Uj = G - B.left - B.right, Wj = min(Z - B[Bj], Hj), Gj = min(G - B[Vj], Uj), Kj = !_.middlewareData.shift, qj = Wj, Jj = Gj;
-			if ((E = _.middlewareData.shift) != null && E.enabled.x && (Jj = Uj), (O = _.middlewareData.shift) != null && O.enabled.y && (qj = Hj), Kj && !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, 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 n = max(B.left, 0), _ = max(B.right, 0), E = max(B.top, 0), O = max(B.bottom, 0);
-				W ? Jj = G - 2 * (n !== 0 || _ !== 0 ? n + _ : max(B.left, B.right)) : qj = Z - 2 * (E !== 0 || O !== 0 ? E + O : max(B.top, B.bottom));
+				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));
 			}
 			await P({
 				..._,
-				availableWidth: Jj,
-				availableHeight: qj
+				availableWidth: Gj,
+				availableHeight: Wj
 			});
-			let Yj = await M.getDimensions(N.floating);
-			return G !== Yj.width || Z !== Yj.height ? { reset: { rects: !0 } } : {};
+			let Kj = await M.getDimensions(N.floating);
+			return G !== Kj.width || Z !== Kj.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)), Bj = floor(A.clientHeight - (H + W)), Vj = floor(B), Hj = {
-			rootMargin: -G + "px " + -Z + "px " + -Bj + "px " + -Vj + "px",
+		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",
 			threshold: max(0, min(1, P)) || 1
-		}, Uj = !0;
-		function Wj(_) {
+		}, Bj = !0;
+		function Vj(_) {
 			let E = _[0].intersectionRatio;
 			if (E !== P) {
-				if (!Uj) return M();
+				if (!Bj) return M();
 				E ? M(!1, E) : O = setTimeout(() => {
 					M(!1, 1e-7);
 				}, 1e3);
 			}
-			E === 1 && !rectsAreEqual(z, n.getBoundingClientRect()) && M(), Uj = !1;
+			E === 1 && !rectsAreEqual(z, n.getBoundingClientRect()) && M(), Bj = !1;
 		}
 		try {
-			E = new IntersectionObserver(Wj, {
-				...Hj,
+			E = new IntersectionObserver(Vj, {
+				...zj,
 				root: A.ownerDocument
 			});
 		} catch {
-			E = new IntersectionObserver(Wj, Hj);
+			E = new IntersectionObserver(Vj, zj);
 		}
 		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 && Bj();
-	function Bj() {
+	P && Lj();
+	function Lj() {
 		let _ = getBoundingClientRect(n);
-		Z && !rectsAreEqual(Z, _) && E(), Z = _, G = requestAnimationFrame(Bj);
+		Z && !rectsAreEqual(Z, _) && E(), Z = _, G = requestAnimationFrame(Lj);
 	}
 	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, Bj] = React$1.useState(null), [Vj, Hj] = React$1.useState(null), Uj = React$1.useCallback((n) => {
-		n !== Jj.current && (Jj.current = n, Bj(n));
-	}, []), Wj = React$1.useCallback((n) => {
-		n !== Yj.current && (Yj.current = n, Hj(n));
-	}, []), Kj = M || Z, qj = N || Vj, Jj = React$1.useRef(null), Yj = React$1.useRef(null), Xj = React$1.useRef(H), Zj = z != null, Qj = useLatestRef(z), $j = useLatestRef(j), eM = useLatestRef(B), tM = React$1.useCallback(() => {
-		if (!Jj.current || !Yj.current) return;
+	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 n = {
 			placement: E,
 			strategy: O,
 			middleware: W
 		};
-		$j.current && (n.platform = $j.current), computePosition(Jj.current, Yj.current, n).then((n) => {
+		Xj.current && (n.platform = Xj.current), computePosition(Gj.current, Kj.current, n).then((n) => {
 			let _ = {
 				...n,
-				isPositioned: eM.current !== !1
+				isPositioned: Zj.current !== !1
 			};
-			nM.current && !deepEqual(Xj.current, _) && (Xj.current = _, ReactDOM$1.flushSync(() => {
+			$j.current && !deepEqual(qj.current, _) && (qj.current = _, ReactDOM$1.flushSync(() => {
 				U(_);
 			}));
 		});
@@ -2781,50 +2781,50 @@ function useFloating(_) {
 		W,
 		E,
 		O,
-		$j,
-		eM
+		Xj,
+		Zj
 	]);
 	index(() => {
-		B === !1 && Xj.current.isPositioned && (Xj.current.isPositioned = !1, U((n) => ({
+		B === !1 && qj.current.isPositioned && (qj.current.isPositioned = !1, U((n) => ({
 			...n,
 			isPositioned: !1
 		})));
 	}, [B]);
-	let nM = React$1.useRef(!1);
-	index(() => (nM.current = !0, () => {
-		nM.current = !1;
+	let $j = React$1.useRef(!1);
+	index(() => ($j.current = !0, () => {
+		$j.current = !1;
 	}), []), index(() => {
-		if (Kj && (Jj.current = Kj), qj && (Yj.current = qj), Kj && qj) {
-			if (Qj.current) return Qj.current(Kj, qj, tM);
-			tM();
+		if (Uj && (Gj.current = Uj), Wj && (Kj.current = Wj), Uj && Wj) {
+			if (Yj.current) return Yj.current(Uj, Wj, Qj);
+			Qj();
 		}
 	}, [
-		Kj,
-		qj,
-		tM,
+		Uj,
+		Wj,
 		Qj,
-		Zj
+		Yj,
+		Jj
 	]);
-	let rM = React$1.useMemo(() => ({
-		reference: Jj,
-		floating: Yj,
-		setReference: Uj,
-		setFloating: Wj
-	}), [Uj, Wj]), iM = React$1.useMemo(() => ({
-		reference: Kj,
-		floating: qj
-	}), [Kj, qj]), aM = React$1.useMemo(() => {
+	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 n = {
 			position: O,
 			left: 0,
 			top: 0
 		};
-		if (!iM.floating) return n;
-		let _ = roundByDPR(iM.floating, H.x), E = roundByDPR(iM.floating, H.y);
+		if (!tM.floating) return n;
+		let _ = roundByDPR(tM.floating, H.x), E = roundByDPR(tM.floating, H.y);
 		return P ? {
 			...n,
 			transform: "translate(" + _ + "px, " + E + "px)",
-			...getDPR(iM.floating) >= 1.5 && { willChange: "transform" }
+			...getDPR(tM.floating) >= 1.5 && { willChange: "transform" }
 		} : {
 			position: O,
 			left: _,
@@ -2833,22 +2833,22 @@ function useFloating(_) {
 	}, [
 		O,
 		P,
-		iM.floating,
+		tM.floating,
 		H.x,
 		H.y
 	]);
 	return React$1.useMemo(() => ({
 		...H,
-		update: tM,
-		refs: rM,
-		elements: iM,
-		floatingStyles: aM
+		update: Qj,
+		refs: eM,
+		elements: tM,
+		floatingStyles: nM
 	}), [
 		H,
+		Qj,
+		eM,
 		tM,
-		rM,
-		iM,
-		aM
+		nM
 	]);
 }
 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, ...Bj } = _, Vj = usePopperContext(CONTENT_NAME$6, O), [Hj, Uj] = React$1.useState(null), Wj = useComposedRefs$1(E, (n) => Uj(n)), [Gj, Kj] = React$1.useState(null), qj = useSize(Gj), Jj = qj?.width ?? 0, Xj = qj?.height ?? 0, Zj = A + (M === "center" ? "" : "-" + M), Qj = 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, ...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 : {
 		top: 0,
 		right: 0,
 		bottom: 0,
 		left: 0,
 		...H
-	}, $j = Array.isArray(B) ? B : [B], eM = $j.length > 0, tM = {
-		padding: Qj,
-		boundary: $j.filter(isNotNull$2),
-		altBoundary: eM
-	}, { refs: nM, floatingStyles: rM, placement: iM, isPositioned: aM, middlewareData: oM } = useFloating({
+	}, 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({
 		strategy: "fixed",
-		placement: Zj,
+		placement: Jj,
 		whileElementsMounted: (...n) => autoUpdate(...n, { animationFrame: G === "always" }),
-		elements: { reference: Vj.anchor },
+		elements: { reference: Rj.anchor },
 		middleware: [
 			offset({
-				mainAxis: j + Xj,
+				mainAxis: j + qj,
 				alignmentAxis: N
 			}),
 			z && shift({
 				mainAxis: !0,
 				crossAxis: !1,
 				limiter: U === "partial" ? limitShift() : void 0,
-				...tM
+				...Qj
 			}),
-			z && flip({ ...tM }),
+			z && flip({ ...Qj }),
 			size({
-				...tM,
+				...Qj,
 				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`);
 				}
 			}),
-			Gj && arrow({
-				element: Gj,
+			Hj && arrow({
+				element: Hj,
 				padding: P
 			}),
 			transformOrigin({
-				arrowWidth: Jj,
-				arrowHeight: Xj
+				arrowWidth: Gj,
+				arrowHeight: qj
 			}),
 			W && hide({
 				strategy: "referenceHidden",
-				...tM
+				...Qj
 			})
 		]
-	}), [sM, cM] = getSideAndAlignFromPlacement(iM), lM = useCallbackRef(Z);
+	}), [iM, aM] = getSideAndAlignFromPlacement(tM), oM = useCallbackRef(Z);
 	useLayoutEffect2(() => {
-		aM && lM?.();
-	}, [aM, lM]);
-	let uM = oM.arrow?.x, dM = oM.arrow?.y, fM = oM.arrow?.centerOffset !== 0, [pM, mM] = React$1.useState();
+		nM && oM?.();
+	}, [nM, oM]);
+	let sM = rM.arrow?.x, cM = rM.arrow?.y, lM = rM.arrow?.centerOffset !== 0, [uM, dM] = React$1.useState();
 	return useLayoutEffect2(() => {
-		Hj && mM(window.getComputedStyle(Hj).zIndex);
-	}, [Hj]), /* @__PURE__ */ jsx("div", {
-		ref: nM.setFloating,
+		zj && dM(window.getComputedStyle(zj).zIndex);
+	}, [zj]), /* @__PURE__ */ jsx("div", {
+		ref: $j.setFloating,
 		"data-radix-popper-content-wrapper": "",
 		style: {
-			...rM,
-			transform: aM ? rM.transform : "translate(0, -200%)",
+			...eM,
+			transform: nM ? eM.transform : "translate(0, -200%)",
 			minWidth: "max-content",
-			zIndex: pM,
-			"--radix-popper-transform-origin": [oM.transformOrigin?.x, oM.transformOrigin?.y].join(" "),
-			...oM.hide?.referenceHidden && {
+			zIndex: uM,
+			"--radix-popper-transform-origin": [rM.transformOrigin?.x, rM.transformOrigin?.y].join(" "),
+			...rM.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: sM,
-			onArrowChange: Kj,
-			arrowX: uM,
-			arrowY: dM,
-			shouldHideArrow: fM,
+			placedSide: iM,
+			onArrowChange: Uj,
+			arrowX: sM,
+			arrowY: cM,
+			shouldHideArrow: lM,
 			children: /* @__PURE__ */ jsx(Primitive.div, {
-				"data-side": sM,
-				"data-align": cM,
-				...Bj,
-				ref: Wj,
+				"data-side": iM,
+				"data-align": aM,
+				...Lj,
+				ref: Vj,
 				style: {
-					...Bj.style,
-					animation: aM ? void 0 : "none"
+					...Lj.style,
+					animation: nM ? 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), [Bj, Vj] = 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), [Lj, Rj] = useControllableState({
 		prop: N,
 		defaultProp: P ?? null,
 		onChange: z,
 		caller: GROUP_NAME$3
-	}), [Hj, Uj] = React$1.useState(!1), Wj = useCallbackRef(B), Gj = useCollection$1(O), Kj = React$1.useRef(!1), [qj, Jj] = React$1.useState(0);
+	}), [zj, Bj] = React$1.useState(!1), Vj = useCallbackRef(B), Hj = useCollection$1(O), Uj = React$1.useRef(!1), [Wj, Gj] = React$1.useState(0);
 	return React$1.useEffect(() => {
 		let n = W.current;
-		if (n) return n.addEventListener(ENTRY_FOCUS, Wj), () => n.removeEventListener(ENTRY_FOCUS, Wj);
-	}, [Wj]), /* @__PURE__ */ jsx(RovingFocusProvider, {
+		if (n) return n.addEventListener(ENTRY_FOCUS, Vj), () => n.removeEventListener(ENTRY_FOCUS, Vj);
+	}, [Vj]), /* @__PURE__ */ jsx(RovingFocusProvider, {
 		scope: O,
 		orientation: A,
 		dir: Z,
 		loop: j,
-		currentTabStopId: Bj,
-		onItemFocus: React$1.useCallback((n) => Vj(n), [Vj]),
-		onItemShiftTab: React$1.useCallback(() => Uj(!0), []),
-		onFocusableItemAdd: React$1.useCallback(() => Jj((n) => n + 1), []),
-		onFocusableItemRemove: React$1.useCallback(() => Jj((n) => n - 1), []),
+		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), []),
 		children: /* @__PURE__ */ jsx(Primitive.div, {
-			tabIndex: Hj || qj === 0 ? -1 : 0,
+			tabIndex: zj || Wj === 0 ? -1 : 0,
 			"data-orientation": A,
 			...U,
 			ref: G,
@@ -3120,28 +3120,28 @@ var RovingFocusGroupImpl = React$1.forwardRef((_, E) => {
 				..._.style
 			},
 			onMouseDown: composeEventHandlers(_.onMouseDown, () => {
-				Kj.current = !0;
+				Uj.current = !0;
 			}),
 			onFocus: composeEventHandlers(_.onFocus, (n) => {
-				let _ = !Kj.current;
-				if (n.target === n.currentTarget && _ && !Hj) {
+				let _ = !Uj.current;
+				if (n.target === n.currentTarget && _ && !zj) {
 					let _ = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
 					if (n.currentTarget.dispatchEvent(_), !_.defaultPrevented) {
-						let n = Gj().filter((n) => n.focusable);
+						let n = Hj().filter((n) => n.focusable);
 						focusFirst$1([
 							n.find((n) => n.active),
-							n.find((n) => n.id === Bj),
+							n.find((n) => n.id === Lj),
 							...n
 						].filter(Boolean).map((n) => n.ref.current), H);
 					}
 				}
-				Kj.current = !1;
+				Uj.current = !1;
 			}),
-			onBlur: composeEventHandlers(_.onBlur, () => Uj(!1))
+			onBlur: composeEventHandlers(_.onBlur, () => Bj(!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: Bj } = 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: Lj } = 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: Bj != null
+				hasTabStop: Lj != 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, ...Bj } = _, Vj = useMenuContext(CONTENT_NAME$5, O), Hj = useMenuRootContext(CONTENT_NAME$5, O), Uj = usePopperScope$2(O), Wj = useRovingFocusGroupScope$1(O), Gj = useCollection(O), [Kj, qj] = React$1.useState(null), Jj = React$1.useRef(null), Xj = useComposedRefs$1(E, Jj, Vj.onContentChange), Zj = React$1.useRef(0), Qj = React$1.useRef(""), $j = React$1.useRef(0), eM = React$1.useRef(null), tM = React$1.useRef("right"), nM = React$1.useRef(0), rM = Z ? Combination_default : React$1.Fragment, iM = 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, ...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 ? {
 		as: Slot$1,
 		allowPinchZoom: !0
-	} : void 0, aM = (n) => {
-		let _ = Qj.current + n, E = Gj().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, 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;
 		(function n(_) {
-			Qj.current = _, window.clearTimeout(Zj.current), _ !== "" && (Zj.current = window.setTimeout(() => n(""), 1e3));
+			Yj.current = _, window.clearTimeout(Jj.current), _ !== "" && (Jj.current = window.setTimeout(() => n(""), 1e3));
 		})(_), M && setTimeout(() => M.focus());
 	};
-	React$1.useEffect(() => () => window.clearTimeout(Zj.current), []), useFocusGuards();
-	let oM = React$1.useCallback((n) => tM.current === eM.current?.side && isPointerInGraceArea(n, eM.current?.area), []);
+	React$1.useEffect(() => () => window.clearTimeout(Jj.current), []), useFocusGuards();
+	let rM = React$1.useCallback((n) => Qj.current === Zj.current?.side && isPointerInGraceArea(n, Zj.current?.area), []);
 	return /* @__PURE__ */ jsx(MenuContentProvider, {
 		scope: O,
-		searchRef: Qj,
+		searchRef: Yj,
 		onItemEnter: React$1.useCallback((n) => {
-			oM(n) && n.preventDefault();
-		}, [oM]),
+			rM(n) && n.preventDefault();
+		}, [rM]),
 		onItemLeave: React$1.useCallback((n) => {
-			oM(n) || (Jj.current?.focus(), qj(null));
-		}, [oM]),
+			rM(n) || (Gj.current?.focus(), Wj(null));
+		}, [rM]),
 		onTriggerLeave: React$1.useCallback((n) => {
-			oM(n) && n.preventDefault();
-		}, [oM]),
-		pointerGraceTimerRef: $j,
+			rM(n) && n.preventDefault();
+		}, [rM]),
+		pointerGraceTimerRef: Xj,
 		onPointerGraceIntentChange: React$1.useCallback((n) => {
-			eM.current = n;
+			Zj.current = n;
 		}, []),
-		children: /* @__PURE__ */ jsx(rM, {
-			...iM,
+		children: /* @__PURE__ */ jsx(eM, {
+			...tM,
 			children: /* @__PURE__ */ jsx(FocusScope, {
 				asChild: !0,
 				trapped: j,
 				onMountAutoFocus: composeEventHandlers(M, (n) => {
-					n.preventDefault(), Jj.current?.focus({ preventScroll: !0 });
+					n.preventDefault(), Gj.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,
-						...Wj,
-						dir: Hj.dir,
+						...Vj,
+						dir: zj.dir,
 						orientation: "vertical",
 						loop: A,
-						currentTabStopId: Kj,
-						onCurrentTabStopIdChange: qj,
+						currentTabStopId: Uj,
+						onCurrentTabStopIdChange: Wj,
 						onEntryFocus: composeEventHandlers(z, (n) => {
-							Hj.isUsingKeyboardRef.current || n.preventDefault();
+							zj.isUsingKeyboardRef.current || n.preventDefault();
 						}),
 						preventScrollOnEntryFocus: !0,
 						children: /* @__PURE__ */ jsx(Content$1, {
 							role: "menu",
 							"aria-orientation": "vertical",
-							"data-state": getOpenState(Vj.open),
+							"data-state": getOpenState(Rj.open),
 							"data-radix-menu-content": "",
-							dir: Hj.dir,
-							...Uj,
+							dir: zj.dir,
 							...Bj,
-							ref: Xj,
+							...Lj,
+							ref: qj,
 							style: {
 								outline: "none",
-								...Bj.style
+								...Lj.style
 							},
-							onKeyDown: composeEventHandlers(Bj.onKeyDown, (n) => {
+							onKeyDown: composeEventHandlers(Lj.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 && aM(n.key));
-								let A = Jj.current;
+								_ && (n.key === "Tab" && n.preventDefault(), !E && O && nM(n.key));
+								let A = Gj.current;
 								if (n.target !== A || !FIRST_LAST_KEYS.includes(n.key)) return;
 								n.preventDefault();
-								let j = Gj().filter((n) => !n.disabled).map((n) => n.ref.current);
+								let j = Hj().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(Zj.current), Qj.current = "");
+								n.currentTarget.contains(n.target) || (window.clearTimeout(Jj.current), Yj.current = "");
 							}),
 							onPointerMove: composeEventHandlers(_.onPointerMove, whenMouse((n) => {
-								let _ = n.target, E = nM.current !== n.clientX;
-								n.currentTarget.contains(_) && E && (tM.current = n.clientX > nM.current ? "right" : "left", nM.current = n.clientX);
+								let _ = n.target, E = $j.current !== n.clientX;
+								n.currentTarget.contains(_) && E && (Qj.current = n.clientX > $j.current ? "right" : "left", $j.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), [Bj, Vj] = React$1.useState(null), [Hj, Uj] = React$1.useState(0), [Wj, Gj] = React$1.useState(0), [Kj, qj] = React$1.useState(!1), [Jj, Xj] = React$1.useState(!1), Zj = useComposedRefs$1(E, (n) => z(n)), Qj = 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), [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);
 	return /* @__PURE__ */ jsx(ScrollAreaProvider, {
 		scope: O,
 		type: A,
-		dir: Qj,
+		dir: Yj,
 		scrollHideDelay: M,
 		scrollArea: P,
 		viewport: B,
@@ -4379,22 +4379,22 @@ var SCROLL_AREA_NAME = "ScrollArea", [createScrollAreaContext, createScrollAreaS
 		onContentChange: W,
 		scrollbarX: G,
 		onScrollbarXChange: Z,
-		scrollbarXEnabled: Kj,
-		onScrollbarXEnabledChange: qj,
-		scrollbarY: Bj,
-		onScrollbarYChange: Vj,
-		scrollbarYEnabled: Jj,
-		onScrollbarYEnabledChange: Xj,
-		onCornerWidthChange: Uj,
-		onCornerHeightChange: Gj,
+		scrollbarXEnabled: Uj,
+		onScrollbarXEnabledChange: Wj,
+		scrollbarY: Lj,
+		onScrollbarYChange: Rj,
+		scrollbarYEnabled: Gj,
+		onScrollbarYEnabledChange: qj,
+		onCornerWidthChange: Bj,
+		onCornerHeightChange: Hj,
 		children: /* @__PURE__ */ jsx(Primitive.div, {
-			dir: Qj,
+			dir: Yj,
 			...N,
-			ref: Zj,
+			ref: Jj,
 			style: {
 				position: "relative",
-				"--radix-scroll-area-corner-width": Hj + "px",
-				"--radix-scroll-area-corner-height": Wj + "px",
+				"--radix-scroll-area-corner-width": zj + "px",
+				"--radix-scroll-area-corner-height": Vj + "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, Bj] = React$1.useState(null), Vj = useComposedRefs$1(E, (n) => Bj(n)), Hj = React$1.useRef(null), Uj = React$1.useRef(""), Wj = G.viewport, Gj = A.content - A.viewport, Kj = useCallbackRef(H), qj = useCallbackRef(z), Jj = useDebounceCallback(U, 10);
-	function Xj(n) {
-		Hj.current && B({
-			x: n.clientX - Hj.current.left,
-			y: n.clientY - Hj.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, 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
 		});
 	}
 	return React$1.useEffect(() => {
 		let n = (n) => {
 			let _ = n.target;
-			Z?.contains(_) && Kj(n, Gj);
+			Z?.contains(_) && Uj(n, Hj);
 		};
 		return document.addEventListener("wheel", n, { passive: !1 }), () => document.removeEventListener("wheel", n, { passive: !1 });
 	}, [
-		Wj,
+		Vj,
 		Z,
-		Gj,
-		Kj
-	]), React$1.useEffect(qj, [A, qj]), useResizeObserver(Z, Jj), useResizeObserver(G.content, Jj), /* @__PURE__ */ jsx(ScrollbarProvider, {
+		Hj,
+		Uj
+	]), React$1.useEffect(Wj, [A, Wj]), useResizeObserver(Z, Gj), useResizeObserver(G.content, Gj), /* @__PURE__ */ jsx(ScrollbarProvider, {
 		scope: O,
 		scrollbar: Z,
 		hasThumb: j,
 		onThumbChange: useCallbackRef(M),
 		onThumbPointerUp: useCallbackRef(N),
-		onThumbPositionChange: qj,
+		onThumbPositionChange: Wj,
 		onThumbPointerDown: useCallbackRef(P),
 		children: /* @__PURE__ */ jsx(Primitive.div, {
 			...W,
-			ref: Vj,
+			ref: Rj,
 			style: {
 				position: "absolute",
 				...W.style
 			},
 			onPointerDown: composeEventHandlers(_.onPointerDown, (n) => {
-				n.button === 0 && (n.target.setPointerCapture(n.pointerId), Hj.current = Z.getBoundingClientRect(), Uj.current = document.body.style.webkitUserSelect, document.body.style.webkitUserSelect = "none", G.viewport && (G.viewport.style.scrollBehavior = "auto"), Xj(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));
 			}),
-			onPointerMove: composeEventHandlers(_.onPointerMove, Xj),
+			onPointerMove: composeEventHandlers(_.onPointerMove, qj),
 			onPointerUp: composeEventHandlers(_.onPointerUp, (n) => {
 				let _ = n.target;
-				_.hasPointerCapture(n.pointerId) && _.releasePointerCapture(n.pointerId), document.body.style.webkitUserSelect = Uj.current, G.viewport && (G.viewport.style.scrollBehavior = ""), Hj.current = null;
+				_.hasPointerCapture(n.pointerId) && _.releasePointerCapture(n.pointerId), document.body.style.webkitUserSelect = Bj.current, G.viewport && (G.viewport.style.scrollBehavior = ""), zj.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)), Bj = React$1.useRef(!1), Vj = W ? H || !!W.closest("form") : !0, [Hj, Uj] = 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)), Lj = React$1.useRef(!1), Rj = W ? H || !!W.closest("form") : !0, [zj, Bj] = 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: Hj,
+		checked: zj,
 		disabled: P,
 		children: [/* @__PURE__ */ jsx(Primitive.button, {
 			type: "button",
 			role: "switch",
-			"aria-checked": Hj,
+			"aria-checked": zj,
 			"aria-required": N,
-			"data-state": getState(Hj),
+			"data-state": getState(zj),
 			"data-disabled": P ? "" : void 0,
 			disabled: P,
 			value: z,
 			...U,
 			ref: Z,
 			onClick: composeEventHandlers(_.onClick, (n) => {
-				Uj((n) => !n), Vj && (Bj.current = n.isPropagationStopped(), Bj.current || n.stopPropagation());
+				Bj((n) => !n), Rj && (Lj.current = n.isPropagationStopped(), Lj.current || n.stopPropagation());
 			})
-		}), Vj && /* @__PURE__ */ jsx(SwitchBubbleInput, {
+		}), Rj && /* @__PURE__ */ jsx(SwitchBubbleInput, {
 			control: W,
-			bubbles: !Bj.current,
+			bubbles: !Lj.current,
 			name: A,
 			value: z,
-			checked: Hj,
+			checked: zj,
 			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, Bj = P ?? z.delayDuration, Vj = React$1.useRef(!1), [Hj, Uj] = 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, Lj = P ?? z.delayDuration, Rj = React$1.useRef(!1), [zj, Bj] = useControllableState({
 		prop: A,
 		defaultProp: j ?? !1,
 		onChange: (n) => {
 			n ? (z.onOpen(), document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN))) : z.onClose(), M?.(n);
 		},
 		caller: TOOLTIP_NAME
-	}), Wj = React$1.useMemo(() => Hj ? Vj.current ? "delayed-open" : "instant-open" : "closed", [Hj]), Gj = React$1.useCallback(() => {
-		window.clearTimeout(G.current), G.current = 0, Vj.current = !1, Uj(!0);
-	}, [Uj]), Kj = React$1.useCallback(() => {
-		window.clearTimeout(G.current), G.current = 0, Uj(!1);
-	}, [Uj]), qj = React$1.useCallback(() => {
+	}), 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(() => {
 		window.clearTimeout(G.current), G.current = window.setTimeout(() => {
-			Vj.current = !0, Uj(!0), G.current = 0;
-		}, Bj);
-	}, [Bj, Uj]);
+			Rj.current = !0, Bj(!0), G.current = 0;
+		}, Lj);
+	}, [Lj, Bj]);
 	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: Hj,
-			stateAttribute: Wj,
+			open: zj,
+			stateAttribute: Vj,
 			trigger: H,
 			onTriggerChange: U,
 			onTriggerEnter: React$1.useCallback(() => {
-				z.isOpenDelayedRef.current ? qj() : Gj();
+				z.isOpenDelayedRef.current ? Wj() : Hj();
 			}, [
 				z.isOpenDelayedRef,
-				qj,
-				Gj
+				Wj,
+				Hj
 			]),
 			onTriggerLeave: React$1.useCallback(() => {
-				Z ? Kj() : (window.clearTimeout(G.current), G.current = 0);
-			}, [Kj, Z]),
-			onOpen: Gj,
-			onClose: Kj,
+				Z ? Uj() : (window.clearTimeout(G.current), G.current = 0);
+			}, [Uj, Z]),
+			onOpen: Hj,
+			onClose: Uj,
 			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, Bj] = React$1.useState(j);
-	React$1.useEffect(() => Bj(j), [j]);
-	let [Vj, Hj] = React$1.useState(M);
-	React$1.useEffect(() => Hj(M), [M]);
-	let [Uj, Wj] = React$1.useState(N);
-	React$1.useEffect(() => Wj(N), [N]);
-	let [Gj, Kj] = React$1.useState(P);
-	return React$1.useEffect(() => Kj(P), [P]), React$1.createElement(A$2, {
+	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, {
 		...B,
 		ref: E,
 		isRoot: !0,
@@ -5925,62 +5925,62 @@ var I$3 = React$1.forwardRef((_, E) => {
 		appearance: H,
 		accentColor: W,
 		grayColor: Z,
-		panelBackground: Vj,
-		radius: Uj,
-		scaling: Gj,
+		panelBackground: Rj,
+		radius: Bj,
+		scaling: Hj,
 		onAppearanceChange: U,
 		onAccentColorChange: G,
-		onGrayColorChange: Bj,
-		onPanelBackgroundChange: Hj,
-		onRadiusChange: Wj,
-		onScalingChange: Kj
+		onGrayColorChange: Lj,
+		onPanelBackgroundChange: zj,
+		onRadiusChange: Vj,
+		onScalingChange: Uj
 	});
 });
 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: Bj = d$5, onRadiusChange: Vj = d$5, onScalingChange: Hj = d$5, ...Uj } = _, Wj = A ? Slot$3 : "div", Gj = z === "auto" ? a$12(P) : z, Kj = _.appearance === "light" || _.appearance === "dark", qj = M === void 0 ? j || Kj : 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: 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;
 	return React$1.createElement(P$3.Provider, { value: React$1.useMemo(() => ({
 		appearance: N,
 		accentColor: P,
 		grayColor: z,
-		resolvedGrayColor: Gj,
+		resolvedGrayColor: Hj,
 		panelBackground: B,
 		radius: H,
 		scaling: U,
 		onAppearanceChange: W,
 		onAccentColorChange: G,
 		onGrayColorChange: Z,
-		onPanelBackgroundChange: Bj,
-		onRadiusChange: Vj,
-		onScalingChange: Hj
+		onPanelBackgroundChange: Lj,
+		onRadiusChange: Rj,
+		onScalingChange: zj
 	}), [
 		N,
 		P,
 		z,
-		Gj,
+		Hj,
 		B,
 		H,
 		U,
 		W,
 		G,
 		Z,
-		Bj,
-		Vj,
-		Hj
-	]) }, React$1.createElement(Wj, {
+		Lj,
+		Rj,
+		zj
+	]) }, React$1.createElement(Vj, {
 		"data-is-root-theme": j ? "true" : "false",
 		"data-accent-color": P,
-		"data-gray-color": Gj,
-		"data-has-background": qj ? "true" : "false",
+		"data-gray-color": Hj,
+		"data-has-background": Wj ? "true" : "false",
 		"data-panel-background": B,
 		"data-radius": H,
 		"data-scaling": U,
 		ref: E,
-		...Uj,
+		...Bj,
 		className: (0, import_classnames$18.default)("radix-themes", {
 			light: N === "light",
 			dark: N === "dark"
-		}, Uj.className)
+		}, Bj.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: Bj = t$3.scrollbars.default, ...Vj } = 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: Lj = t$3.scrollbars.default, ...Rj } = 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, {
-		...Vj,
+		...Rj,
 		ref: E,
 		className: "rt-ScrollAreaViewport"
-	}, _), React$1.createElement("div", { className: "rt-ScrollAreaViewportFocusRing" }), Bj === "vertical" ? null : React$1.createElement(Scrollbar, {
+	}, _), React$1.createElement("div", { className: "rt-ScrollAreaViewportFocusRing" }), Lj === "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" })), Bj === "horizontal" ? null : React$1.createElement(Scrollbar, {
+	}, React$1.createElement(Thumb$1, { className: "rt-ScrollAreaThumb" })), Lj === "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" })), Bj === "both" ? React$1.createElement(Corner, { className: "rt-ScrollAreaCorner" }) : null)));
+	}, React$1.createElement(Thumb$1, { className: "rt-ScrollAreaThumb" })), Lj === "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: Bj, separatorToPanels: Vj } = A.get(E) ?? { defaultLayoutDeferred: !1 };
-		if (Z && W && Bj && Vj) {
+		let W = O.get(E), { defaultLayoutDeferred: G, derivedPanelConstraints: Z, layout: Lj, separatorToPanels: Rj } = A.get(E) ?? { defaultLayoutDeferred: !1 };
+		if (Z && W && Lj && Rj) {
 			let _ = Z$1({
 				delta: U,
 				initialLayout: W,
 				panelConstraints: Z,
 				pivotIndices: n.panels.map((n) => H.indexOf(n)),
-				prevLayout: Bj,
+				prevLayout: Lj,
 				trigger: "mouse-or-touch"
 			});
-			if (B$1(_, Bj)) {
+			if (B$1(_, Lj)) {
 				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: Vj
+					separatorToPanels: Rj
 				});
 				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), Bj = useRef(null), [Vj, Gj] = useState(!1), [Kj, qj] = useState(E ?? {}), [Jj, Xj] = wt(), Zj = useRef({
+	}), Z = ae$1(N), Lj = useRef(null), [Rj, Hj] = useState(!1), [Uj, Wj] = useState(E ?? {}), [Gj, qj] = wt(), Jj = useRef({
 		lastExpandedPanelSizes: {},
 		layouts: {},
 		panels: [],
 		separators: []
-	}), Qj = ue$1(Bj, j);
+	}), Yj = ue$1(Lj, j);
 	Pt(Z, M);
-	let $j = useMemo(() => ({
+	let Xj = useMemo(() => ({
 		id: Z,
 		orientation: z,
 		registerPanel: (n) => {
-			let _ = Zj.current;
-			return _.panels = ie$1(z, [..._.panels, n]), Xj(), () => {
-				_.panels = _.panels.filter((_) => _ !== n), Xj();
+			let _ = Jj.current;
+			return _.panels = ie$1(z, [..._.panels, n]), qj(), () => {
+				_.panels = _.panels.filter((_) => _ !== n), qj();
 			};
 		},
 		registerSeparator: (n) => {
-			let _ = Zj.current;
-			return _.separators = ie$1(z, [..._.separators, n]), Xj(), () => {
-				_.separators = _.separators.filter((_) => _ !== n), Xj();
+			let _ = Jj.current;
+			return _.separators = ie$1(z, [..._.separators, n]), qj(), () => {
+				_.separators = _.separators.filter((_) => _ !== n), qj();
 			};
 		}
 	}), [
 		Z,
-		Xj,
+		qj,
 		z
-	]), eM = Lt({
+	]), Zj = Lt({
 		defaultLayout: E,
 		disableCursor: O
-	}), tM = useRef(null);
+	}), Qj = useRef(null);
 	A$1(() => {
-		let n = Bj.current;
+		let n = Lj.current;
 		if (n === null) return;
-		let _ = Zj.current, E = {
-			defaultLayout: eM.defaultLayout,
-			disableCursor: !!eM.disableCursor,
+		let _ = Jj.current, E = {
+			defaultLayout: Zj.defaultLayout,
+			disableCursor: !!Zj.disableCursor,
 			disabled: !!A,
 			element: n,
 			id: Z,
-			inMemoryLastExpandedPanelSizes: Zj.current.lastExpandedPanelSizes,
-			inMemoryLayouts: Zj.current.layouts,
+			inMemoryLastExpandedPanelSizes: Jj.current.lastExpandedPanelSizes,
+			inMemoryLayouts: Jj.current.layouts,
 			orientation: z,
 			panels: _.panels,
 			separators: _.separators
 		};
-		tM.current = E;
+		Qj.current = E;
 		let O = bt(E), j = D$1().mountedGroups.get(E);
 		if (j) {
 			let { defaultLayoutDeferred: n, derivedPanelConstraints: _, layout: E } = j;
-			!n && _.length > 0 && (qj(E), G?.(E));
+			!n && _.length > 0 && (Wj(E), G?.(E));
 		}
 		let M = T$1.addListener("interactionStateChange", (n) => {
 			switch (n.state) {
 				case "active":
-					Gj(n.hitRegions.some((n) => n.group === E));
+					Hj(n.hitRegions.some((n) => n.group === E));
 					break;
 				default:
-					Gj(!1);
+					Hj(!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;
-				qj(O), G?.(O);
+				Wj(O), G?.(O);
 			}
 		});
 		return () => {
-			tM.current = null, O(), M(), N();
+			Qj.current = null, O(), M(), N();
 		};
 	}, [
 		A,
 		Z,
 		G,
 		z,
-		Jj,
-		eM
+		Gj,
+		Zj
 	]), useEffect(() => {
-		let n = tM.current;
+		let n = Qj.current;
 		n && (n.defaultLayout = E, n.disableCursor = !!O);
 	});
-	let nM = { [Fe]: Vj ? "none" : void 0 };
-	for (let n in Kj) {
+	let $j = { [Fe]: Rj ? "none" : void 0 };
+	for (let n in Uj) {
 		let _ = Ve(Z, n);
-		nM[_] = Kj[n];
+		$j[_] = Uj[n];
 	}
 	return /* @__PURE__ */ jsx(je.Provider, {
-		value: $j,
+		value: Xj,
 		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: Qj,
+			ref: Yj,
 			style: {
 				height: "100%",
 				width: "100%",
 				overflow: "hidden",
 				...B,
-				...nM,
+				...$j,
 				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), Bj = ue$1(Z, j), { id: Vj, registerPanel: Hj } = ce$1(), Wj = z !== null, Gj = le$1((n, _, E) => {
+	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) => {
 		z?.(n, M, E);
 	});
 	A$1(() => {
 		let n = Z.current;
-		if (n !== null) return Hj({
+		if (n !== null) return zj({
 			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: Wj ? Gj : void 0,
+			onResize: Vj ? Hj : void 0,
 			panelConstraints: {
 				collapsedSize: E,
 				collapsible: O,
@@ -8467,25 +8467,25 @@ function kt({ children: n, className: _, collapsedSize: E = "0%", collapsible: O
 		E,
 		O,
 		A,
-		Wj,
+		Vj,
 		G,
 		W,
 		N,
 		P,
-		Gj,
-		Hj
+		Hj,
+		zj
 	]), It(G, B);
-	let Kj = Ve(Vj, G);
+	let Uj = Ve(Rj, G);
 	return /* @__PURE__ */ jsx("div", {
 		...U,
 		"data-panel": !0,
 		"data-testid": G,
 		id: G,
-		ref: Bj,
+		ref: Lj,
 		style: {
 			...Gt,
 			flexBasis: 0,
-			flexGrow: `var(${Kj}, 1)`,
+			flexGrow: `var(${Uj}, 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(), Bj = 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(), Lj = 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": Bj,
+		"aria-orientation": Lj,
 		"aria-valuemax": N.valueMax,
 		"aria-valuemin": N.valueMin,
 		"aria-valuenow": N.valueNow,
@@ -8784,7 +8784,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: O.length - 1
 			};
 		});
-	}, []), Bj = React.useCallback(() => {
+	}, []), Lj = 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);
@@ -8796,7 +8796,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: E.length - 1
 			};
 		});
-	}, []), Vj = React.useCallback((n, _ = !1) => {
+	}, []), Rj = React.useCallback((n, _ = !1) => {
 		M((E) => {
 			if (n === null) return {
 				...E,
@@ -8813,12 +8813,12 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				selectedElementIds: [n]
 			};
 		});
-	}, []), Hj = React.useCallback((n) => {
+	}, []), zj = React.useCallback((n) => {
 		M((_) => ({
 			..._,
 			selectedElementIds: n
 		}));
-	}, []), Uj = React.useCallback((n, _) => {
+	}, []), Bj = React.useCallback((n, _) => {
 		M((E) => {
 			let O = [...E.elements], A = O[n];
 			O.splice(n, 1), O.splice(_, 0, A);
@@ -8830,7 +8830,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: j.length - 1
 			};
 		});
-	}, []), Gj = React.useCallback((n, _, E = !0) => {
+	}, []), Hj = React.useCallback((n, _, E = !0) => {
 		M((O) => {
 			let A = O.elements.map((E) => E.id === n ? {
 				...E,
@@ -8843,7 +8843,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: M
 			};
 		});
-	}, []), Kj = React.useCallback((n, _ = !0) => {
+	}, []), Uj = React.useCallback((n, _ = !0) => {
 		M((E) => {
 			let O = [...E.elements], A = [], j = /* @__PURE__ */ new Set();
 			n.forEach(({ id: n, changes: _ }) => {
@@ -8897,7 +8897,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: P
 			};
 		});
-	}, []), qj = React.useCallback((n) => {
+	}, []), Wj = React.useCallback((n) => {
 		M((_) => {
 			let E = _.elements.filter((_) => n.includes(_.id));
 			if (E.length === 0) return _;
@@ -8925,7 +8925,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: z.length - 1
 			};
 		});
-	}, []), Jj = React.useCallback((n) => {
+	}, []), Gj = React.useCallback((n) => {
 		M((_) => {
 			let E = _.elements.find((_) => _.id === n);
 			if (!E || E.type !== "group") return _;
@@ -8941,7 +8941,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: j.length - 1
 			};
 		});
-	}, []), Xj = React.useCallback((n, _) => {
+	}, []), qj = React.useCallback((n, _) => {
 		M((E) => {
 			let O = E.elements.map((E) => E.id === n ? {
 				...E,
@@ -8952,13 +8952,88 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				elements: O
 			};
 		});
-	}, []), Zj = React.useCallback((n, _) => {
+	}, []), Jj = 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;
+		let O = Math.min(...E.map((n) => n.x)), A = Math.min(...E.map((n) => n.y)), j = Math.max(...E.map((n) => n.x + n.width)), M = Math.max(...E.map((n) => n.y + n.height));
+		return n.map((n) => n.id === _ ? {
+			...n,
+			x: O,
+			y: A,
+			width: j - O,
+			height: M - A
+		} : n);
+	}, []), Yj = 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;
+			let j = E.elements.map((E) => E.id === n ? {
+				...E,
+				groupId: _
+			} : E);
+			j = Jj(j, _);
+			let M = E.history.slice(0, E.historyIndex + 1);
+			return M.push(j), {
+				...E,
+				elements: j,
+				history: M,
+				historyIndex: M.length - 1
+			};
+		});
+	}, [Jj]), Xj = React.useCallback((n) => {
+		M((_) => {
+			let E = _.elements.find((_) => _.id === n);
+			if (!E || !E.groupId) return _;
+			let O = E.groupId, A = _.elements.map((_) => _.id === n ? {
+				..._,
+				groupId: void 0
+			} : _);
+			A = Jj(A, O);
+			let j = _.history.slice(0, _.historyIndex + 1);
+			return j.push(A), {
+				..._,
+				elements: A,
+				history: j,
+				historyIndex: j.length - 1
+			};
+		});
+	}, [Jj]), Zj = React.useCallback((n, _, E) => {
+		M((O) => {
+			let A = O.elements.find((_) => _.id === n && _.type === "group");
+			if (!A) return O;
+			let j = _ / A.width, M = E / A.height, N = A.x, P = A.y, z = O.elements.map((O) => {
+				if (O.id === n) return {
+					...O,
+					width: _,
+					height: E
+				};
+				if (O.groupId === n) {
+					let n = O.x - N, _ = O.y - P, E = N + n * j, A = P + _ * M;
+					return {
+						...O,
+						x: E,
+						y: A,
+						width: Math.max(1, O.width * j),
+						height: Math.max(1, O.height * M)
+					};
+				}
+				return O;
+			}), B = O.history.slice(0, O.historyIndex + 1);
+			return B.push(z), {
+				...O,
+				elements: z,
+				history: B,
+				historyIndex: B.length - 1
+			};
+		});
+	}, []), Qj = React.useCallback((n, _) => {
 		M((E) => ({
 			...E,
 			mockData: n,
 			singleMockData: _
 		}));
-	}, []), Qj = React.useCallback((n) => {
+	}, []), $j = React.useCallback((n) => {
 		M((_) => ({
 			..._,
 			listSettings: {
@@ -8966,21 +9041,24 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				...n
 			}
 		}));
-	}, []), $j = React.useMemo(() => ({
+	}, []), eM = React.useMemo(() => ({
 		state: j,
 		addElement: G,
 		removeElement: Z,
-		removeSelected: Bj,
-		selectElement: Vj,
-		setSelectedElements: Hj,
-		moveElement: Uj,
-		updateElement: Gj,
-		updateElements: Kj,
-		groupElements: qj,
-		ungroupElements: Jj,
-		renameElement: Xj,
-		setMockData: Zj,
-		updateListSettings: Qj,
+		removeSelected: Lj,
+		selectElement: Rj,
+		setSelectedElements: zj,
+		moveElement: Bj,
+		updateElement: Hj,
+		updateElements: Uj,
+		groupElements: Wj,
+		ungroupElements: Gj,
+		renameElement: qj,
+		addToGroup: Yj,
+		removeFromGroup: Xj,
+		resizeGroup: Zj,
+		setMockData: Qj,
+		updateListSettings: $j,
 		setCanvasHeight: N,
 		loadState: z,
 		undo: B,
@@ -8992,17 +9070,20 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 		j,
 		G,
 		Z,
+		Lj,
+		Rj,
+		zj,
 		Bj,
-		Vj,
 		Hj,
 		Uj,
+		Wj,
 		Gj,
-		Kj,
 		qj,
-		Jj,
+		Yj,
 		Xj,
 		Zj,
 		Qj,
+		$j,
 		N,
 		z,
 		B,
@@ -9012,7 +9093,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 		P
 	]);
 	return /* @__PURE__ */ jsx(EditorContext.Provider, {
-		value: $j,
+		value: eM,
 		children: n
 	});
 }, useEditor = () => {
@@ -9454,16 +9535,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, Bj = U || 0;
-		return hasDirection("right", N) && (W = P.width + (n - P.x) * A / E, B && (G = (W - Bj) / this.ratio + Z)), hasDirection("left", N) && (W = P.width - (n - P.x) * A / E, B && (G = (W - Bj) / this.ratio + Z)), hasDirection("bottom", N) && (G = P.height + (_ - P.y) * j / E, B && (W = (G - Z) * this.ratio + Bj)), hasDirection("top", N) && (G = P.height - (_ - P.y) * j / E, B && (W = (G - Z) * this.ratio + Bj)), {
+		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)), {
 			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, Bj = (P - W) / this.ratio + U, Vj = (z - W) / this.ratio + U, Hj = Math.max(P, G), Uj = Math.min(z, Z), Wj = Math.max(B, Bj), Gj = Math.min(H, Vj);
-			n = clamp$1(n, Hj, Uj), _ = clamp$1(_, Wj, Gj);
+			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);
 		} else n = clamp$1(n, P, z), _ = clamp$1(_, B, H);
 		return {
 			newWidth: n,
@@ -9520,56 +9601,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 Bj = this.calculateNewSizeFromDirection(N, P), Vj = Bj.newHeight, Hj = Bj.newWidth, Uj = this.calculateNewMaxFromBoundary(O, A);
-			this.props.snap && this.props.snap.x && (Hj = findClosestSnap(Hj, this.props.snap.x, this.props.snapGap)), this.props.snap && this.props.snap.y && (Vj = findClosestSnap(Vj, this.props.snap.y, this.props.snapGap));
-			var Wj = this.calculateNewSizeFromAspectRatio(Hj, Vj, {
-				width: Uj.maxWidth,
-				height: Uj.maxHeight
+			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
 			}, {
 				width: j,
 				height: M
 			});
-			if (Hj = Wj.newWidth, Vj = Wj.newHeight, this.props.grid) {
-				var Gj = snap(Hj, this.props.grid[0], this.props.gridGap ? this.props.gridGap[0] : 0), Kj = snap(Vj, this.props.grid[1], this.props.gridGap ? this.props.gridGap[1] : 0), Jj = this.props.snapGap || 0, Yj = Jj === 0 || Math.abs(Gj - Hj) <= Jj ? Gj : Hj, Xj = Jj === 0 || Math.abs(Kj - Vj) <= Jj ? Kj : Vj;
-				Hj = Yj, Vj = Xj;
+			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;
 			}
-			var Zj = {
-				width: Hj - H.width,
-				height: Vj - H.height
+			var Jj = {
+				width: zj - H.width,
+				height: Rj - H.height
 			};
-			if (this.delta = Zj, U && typeof U == "string") {
+			if (this.delta = Jj, U && typeof U == "string") {
 				if (U.endsWith("%")) {
-					var Qj = Hj / G.width * 100;
-					Hj = `${Qj}%`;
+					var Yj = zj / G.width * 100;
+					zj = `${Yj}%`;
 				} else if (U.endsWith("vw")) {
-					var $j = Hj / this.window.innerWidth * 100;
-					Hj = `${$j}vw`;
+					var Xj = zj / this.window.innerWidth * 100;
+					zj = `${Xj}vw`;
 				} else if (U.endsWith("vh")) {
-					var eM = Hj / this.window.innerHeight * 100;
-					Hj = `${eM}vh`;
+					var Zj = zj / this.window.innerHeight * 100;
+					zj = `${Zj}vh`;
 				}
 			}
 			if (W && typeof W == "string") {
 				if (W.endsWith("%")) {
-					var Qj = Vj / G.height * 100;
-					Vj = `${Qj}%`;
+					var Yj = Rj / G.height * 100;
+					Rj = `${Yj}%`;
 				} else if (W.endsWith("vw")) {
-					var $j = Vj / this.window.innerWidth * 100;
-					Vj = `${$j}vw`;
+					var Xj = Rj / this.window.innerWidth * 100;
+					Rj = `${Xj}vw`;
 				} else if (W.endsWith("vh")) {
-					var eM = Vj / this.window.innerHeight * 100;
-					Vj = `${eM}vh`;
+					var Zj = Rj / this.window.innerHeight * 100;
+					Rj = `${Zj}vh`;
 				}
 			}
-			var tM = {
-				width: this.createSizeForCssProperty(Hj, "width"),
-				height: this.createSizeForCssProperty(Vj, "height")
+			var Qj = {
+				width: this.createSizeForCssProperty(zj, "width"),
+				height: this.createSizeForCssProperty(Rj, "height")
 			};
-			this.flexDir === "row" ? tM.flexBasis = tM.width : this.flexDir === "column" && (tM.flexBasis = tM.height);
-			var nM = this.state.width !== tM.width, rM = this.state.height !== tM.height, iM = this.state.flexBasis !== tM.flexBasis, aM = nM || rM || iM;
-			aM && flushSync(function() {
-				_.setState(tM);
-			}), this.props.onResize && aM && this.props.onResize(n, B, this.resizable, Zj);
+			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);
 		}
 	}, _.prototype.onMouseUp = function(n) {
 		var _ = this.state, E = _.isResizing, O = _.direction;
@@ -11046,32 +11127,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, Bj] = useState(!1), [Vj, Hj] = useState(!1), [Gj, Kj] = useState(!1), [qj, Zj] = useState("formatting"), [Qj, $j] = 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, Lj] = useState(!1), [Rj, zj] = useState(!1), [Hj, Uj] = useState(!1), [Wj, Jj] = useState("formatting"), [Yj, Xj] = useState({
 		open: !1,
 		prop: "",
 		value: ""
-	}), [eM, tM] = useState(""), [nM, rM] = useState(_.content), [iM, aM] = useState(_.dataBinding || ""), oM = useRef(null), sM = useRef(null), cM = (n) => {
-		let _ = oM.current;
+	}), [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;
 		if (_) {
-			let E = _.selectionStart, O = _.selectionEnd, A = nM;
-			rM(A.substring(0, E) + `{{${n}}}` + A.substring(O)), setTimeout(() => {
+			let E = _.selectionStart, O = _.selectionEnd, A = rM;
+			iM(A.substring(0, E) + `{{${n}}}` + A.substring(O)), setTimeout(() => {
 				_.focus();
 				let O = E + n.length + 4;
 				_.setSelectionRange(O, O);
 			}, 0);
-		} else rM((_) => _ + `{{${n}}}`);
-	}, lM = (n) => {
+		} else iM((_) => _ + `{{${n}}}`);
+	}, uM = (n) => {
 		E(_.id, { style: {
 			..._.style,
 			...n
 		} });
-	}, uM = () => {
+	}, dM = () => {
 		let n = z.elements.findIndex((n) => n.id === _.id);
 		n < z.elements.length - 1 && M(n, z.elements.length - 1);
-	}, dM = () => {
+	}, fM = () => {
 		let n = z.elements.findIndex((n) => n.id === _.id);
 		n > 0 && M(n, 0);
-	}, fM = () => {
+	}, pM = () => {
 		z.selectedElementIds.includes(_.id) && z.selectedElementIds.length > 1 ? (N(), P()) : j({
 			type: _.type,
 			content: _.content,
@@ -11081,7 +11162,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			height: _.height,
 			style: _.style
 		});
-	}, pM = [
+	}, mM = [
 		"#000000",
 		"#FFFFFF",
 		"#FF0000",
@@ -11091,8 +11172,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		"#808080",
 		"#800080",
 		"transparent"
-	], mM = (n, _) => {
-		$j({
+	], hM = (n, _) => {
+		Xj({
 			open: !0,
 			prop: n,
 			value: _
@@ -11108,8 +11189,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					direction: "column",
 					gap: "3",
 					children: [/* @__PURE__ */ jsx(u$1, {
-						value: eM,
-						onChange: (n) => tM(n.target.value),
+						value: tM,
+						onChange: (n) => nM(n.target.value),
 						placeholder: "Nome da camada..."
 					}), /* @__PURE__ */ jsxs(p$1, {
 						gap: "3",
@@ -11120,7 +11201,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							children: "Cancelar"
 						}) }), /* @__PURE__ */ jsx(o, {
 							onClick: () => {
-								B(_.id, eM), G(!1);
+								B(_.id, tM), G(!1);
 							},
 							children: "Salvar"
 						})]
@@ -11130,7 +11211,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		}),
 		/* @__PURE__ */ jsx(s$4, {
 			open: Z,
-			onOpenChange: Bj,
+			onOpenChange: Lj,
 			children: /* @__PURE__ */ jsxs(p$8, {
 				style: { maxWidth: 450 },
 				children: [/* @__PURE__ */ jsx(g$2, { children: "Editar Texto" }), /* @__PURE__ */ jsxs(p$1, {
@@ -11138,9 +11219,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					gap: "3",
 					children: [
 						/* @__PURE__ */ jsx(r, {
-							ref: oM,
-							value: nM,
-							onChange: (n) => rM(n.target.value),
+							ref: sM,
+							value: rM,
+							onChange: (n) => iM(n.target.value),
 							placeholder: "Digite o novo texto...",
 							style: { height: 100 }
 						}),
@@ -11158,7 +11239,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 									color: "blue",
 									variant: "surface",
 									style: { cursor: "pointer" },
-									onClick: () => cM(n.dataName),
+									onClick: () => lM(n.dataName),
 									children: n.name
 								}, n.dataName))
 							})]
@@ -11172,7 +11253,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								children: "Cancelar"
 							}) }), /* @__PURE__ */ jsx(o, {
 								onClick: () => {
-									E(_.id, { content: nM }), Bj(!1);
+									E(_.id, { content: rM }), Lj(!1);
 								},
 								children: "Salvar"
 							})]
@@ -11182,8 +11263,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			})
 		}),
 		/* @__PURE__ */ jsx(s$4, {
-			open: Vj,
-			onOpenChange: Hj,
+			open: Rj,
+			onOpenChange: zj,
 			children: /* @__PURE__ */ jsxs(p$8, {
 				style: { maxWidth: 450 },
 				children: [/* @__PURE__ */ jsx(g$2, { children: "Vincular Dados Manualmente" }), /* @__PURE__ */ jsxs(p$1, {
@@ -11195,8 +11276,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							children: "Nome da propriedade (ex: titulo, preco, imagem):"
 						}),
 						/* @__PURE__ */ jsx(u$1, {
-							value: iM,
-							onChange: (n) => aM(n.target.value),
+							value: aM,
+							onChange: (n) => oM(n.target.value),
 							placeholder: "propriedade"
 						}),
 						/* @__PURE__ */ jsxs(p$1, {
@@ -11208,8 +11289,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								children: "Cancelar"
 							}) }), /* @__PURE__ */ jsx(o, {
 								onClick: () => {
-									let n = iM, O = { dataBinding: n };
-									_.type === "text" && (O.content = `{{${n}}}`), E(_.id, O), Hj(!1);
+									let n = aM, O = { dataBinding: n };
+									_.type === "text" && (O.content = `{{${n}}}`), E(_.id, O), zj(!1);
 								},
 								children: "Vincular"
 							})]
@@ -11219,8 +11300,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			})
 		}),
 		/* @__PURE__ */ jsx(s$4, {
-			open: Qj.open,
-			onOpenChange: (n) => $j((_) => ({
+			open: Yj.open,
+			onOpenChange: (n) => Xj((_) => ({
 				..._,
 				open: n
 			})),
@@ -11229,8 +11310,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				children: [
 					/* @__PURE__ */ jsx(g$2, { children: "Selecionar Cor" }),
 					/* @__PURE__ */ jsx(ColorPickerContent, {
-						color: Qj.value,
-						onChange: (n) => $j((_) => ({
+						color: Yj.value,
+						onChange: (n) => Xj((_) => ({
 							..._,
 							value: n
 						}))
@@ -11245,7 +11326,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							children: "Cancelar"
 						}) }), /* @__PURE__ */ jsx(o, {
 							onClick: () => {
-								lM({ [Qj.prop]: Qj.value }), $j((n) => ({
+								uM({ [Yj.prop]: Yj.value }), Xj((n) => ({
 									...n,
 									open: !1
 								}));
@@ -11258,13 +11339,42 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		}),
 		/* @__PURE__ */ jsx(ElementAdvancedSettings, {
 			elementId: _.id,
-			open: Gj,
-			onOpenChange: Kj,
-			initialTab: qj
+			open: Hj,
+			onOpenChange: Uj,
+			initialTab: Wj
+		}),
+		/* @__PURE__ */ jsx(s$4, {
+			open: Zj,
+			onOpenChange: Qj,
+			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),
+						placeholder: "https://exemplo.com/imagem.png"
+					}), /* @__PURE__ */ jsxs(p$1, {
+						gap: "3",
+						justify: "end",
+						children: [/* @__PURE__ */ jsx(D$2, { children: /* @__PURE__ */ jsx(o, {
+							variant: "soft",
+							color: "gray",
+							children: "Cancelar"
+						}) }), /* @__PURE__ */ jsx(o, {
+							onClick: () => {
+								E(_.id, { content: $j }), Qj(!1);
+							},
+							children: "Aplicar"
+						})]
+					})]
+				})]
+			})
 		}),
 		/* @__PURE__ */ jsx("input", {
 			type: "file",
-			ref: sM,
+			ref: cM,
 			style: { display: "none" },
 			accept: "image/*",
 			onChange: (n) => {
@@ -11330,7 +11440,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
 							onSelect: () => {
-								aM(_.dataBinding || ""), Hj(!0);
+								oM(_.dataBinding || ""), zj(!0);
 							},
 							children: "Outro / Manual..."
 						}),
@@ -11346,14 +11456,14 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				_.type === "text" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
 					onSelect: () => {
-						rM(_.content), Bj(!0);
+						iM(_.content), Lj(!0);
 					},
 					children: "Editar Texto..."
 				}), /* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })] }),
 				/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
 					onSelect: () => {
-						tM(_.name || (_.type === "group" ? "Grupo" : "Elemento")), G(!0);
+						nM(_.name || (_.type === "group" ? "Grupo" : "Elemento")), G(!0);
 					},
 					children: "Renomear..."
 				}),
@@ -11370,13 +11480,13 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 				/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
-					onSelect: () => Kj(!0),
+					onSelect: () => Uj(!0),
 					children: "Configurações Avançadas..."
 				}),
 				/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 				/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
-					onSelect: fM,
+					onSelect: pM,
 					children: z.selectedElementIds.includes(_.id) && z.selectedElementIds.length > 1 ? `Duplicar Selecionados (${z.selectedElementIds.length})` : "Duplicar"
 				}),
 				/* @__PURE__ */ jsx(Item2$1, {
@@ -11400,15 +11510,12 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						alignOffset: -5,
 						children: [/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => sM.current?.click(),
+							onSelect: () => cM.current?.click(),
 							children: "Carregar do Computador"
 						}), /* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
 							onSelect: () => {
-								setTimeout(() => {
-									let n = window.prompt("Insira a URL da imagem:", _.content);
-									n !== null && E(_.id, { content: n });
-								}, 10);
+								eM(typeof _.content == "string" ? _.content : ""), Qj(!0);
 							},
 							children: "Inserir URL"
 						})]
@@ -11426,17 +11533,17 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: [
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => lM({ objectFit: "cover" }),
+								onSelect: () => uM({ objectFit: "cover" }),
 								children: "Preencher (Cover)"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => lM({ objectFit: "contain" }),
+								onSelect: () => uM({ objectFit: "contain" }),
 								children: "Ajustar (Contain)"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => lM({ objectFit: "fill" }),
+								onSelect: () => uM({ objectFit: "fill" }),
 								children: "Esticar (Fill)"
 							})
 						]
@@ -11455,11 +11562,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					alignOffset: -5,
 					children: [/* @__PURE__ */ jsx(Item2$1, {
 						className: "ContextMenuItem",
-						onSelect: uM,
+						onSelect: dM,
 						children: "Trazer para frente"
 					}), /* @__PURE__ */ jsx(Item2$1, {
 						className: "ContextMenuItem",
-						onSelect: dM,
+						onSelect: fM,
 						children: "Enviar para trás"
 					})]
 				}) })] }),
@@ -11477,7 +11584,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						alignOffset: -5,
 						children: z.availableFonts && z.availableFonts.map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => lM({ fontFamily: n }),
+							onSelect: () => uM({ fontFamily: n }),
 							style: { fontFamily: n },
 							children: [n, _.style?.fontFamily === n && /* @__PURE__ */ jsx("div", {
 								className: "RightSlot",
@@ -11506,7 +11613,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							64
 						].map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => lM({ fontSize: `${n}px` }),
+							onSelect: () => uM({ fontSize: `${n}px` }),
 							children: [n, "px"]
 						}, n))
 					}) })] }),
@@ -11521,9 +11628,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						sideOffset: 2,
 						alignOffset: -5,
 						children: [
-							pM.filter((n) => n !== "transparent").map((n) => /* @__PURE__ */ jsxs(Item2$1, {
+							mM.filter((n) => n !== "transparent").map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => lM({ color: n }),
+								onSelect: () => uM({ color: n }),
 								children: [/* @__PURE__ */ jsx("div", { style: {
 									width: 12,
 									height: 12,
@@ -11535,7 +11642,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => mM("color", _.style?.color || "#000000"),
+								onSelect: () => hM("color", _.style?.color || "#000000"),
 								children: "Outra Cor..."
 							})
 						]
@@ -11552,11 +11659,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						alignOffset: -5,
 						children: [/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => lM({ fontWeight: "normal" }),
+							onSelect: () => uM({ fontWeight: "normal" }),
 							children: "Normal"
 						}), /* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => lM({ fontWeight: "bold" }),
+							onSelect: () => uM({ fontWeight: "bold" }),
 							children: "Negrito"
 						})]
 					}) })] }),
@@ -11573,17 +11680,17 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: [
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => lM({ textAlign: "left" }),
+								onSelect: () => uM({ textAlign: "left" }),
 								children: "Esquerda"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => lM({ textAlign: "center" }),
+								onSelect: () => uM({ textAlign: "center" }),
 								children: "Centro"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => lM({ textAlign: "right" }),
+								onSelect: () => uM({ textAlign: "right" }),
 								children: "Direita"
 							})
 						]
@@ -11601,7 +11708,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: [
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => lM({
+								onSelect: () => uM({
 									display: "flex",
 									flexDirection: "column",
 									justifyContent: "flex-start"
@@ -11610,7 +11717,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => lM({
+								onSelect: () => uM({
 									display: "flex",
 									flexDirection: "column",
 									justifyContent: "center"
@@ -11619,7 +11726,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => lM({
+								onSelect: () => uM({
 									display: "flex",
 									flexDirection: "column",
 									justifyContent: "flex-end"
@@ -11640,9 +11747,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					sideOffset: 2,
 					alignOffset: -5,
 					children: [
-						pM.map((n) => /* @__PURE__ */ jsxs(Item2$1, {
+						mM.map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => lM({ backgroundColor: n }),
+							onSelect: () => uM({ backgroundColor: n }),
 							children: [/* @__PURE__ */ jsx("div", { style: {
 								width: 12,
 								height: 12,
@@ -11654,7 +11761,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 						/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => mM("backgroundColor", _.style?.backgroundColor || "transparent"),
+							onSelect: () => hM("backgroundColor", _.style?.backgroundColor || "transparent"),
 							children: "Outra Cor..."
 						})
 					]
@@ -11680,14 +11787,14 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							"50%"
 						].map((n) => /* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => lM({ borderRadius: typeof n == "number" ? `${n}px` : n }),
+							onSelect: () => uM({ 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: () => {
-								Zj("style"), Kj(!0);
+								Jj("style"), Uj(!0);
 							},
 							children: "Personalizar..."
 						})
@@ -11714,14 +11821,14 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							32
 						].map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => lM({ padding: `${n}px` }),
+							onSelect: () => uM({ padding: `${n}px` }),
 							children: [n, "px"]
 						}, n)),
 						/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 						/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
 							onSelect: () => {
-								Zj("style"), Kj(!0);
+								Jj("style"), Uj(!0);
 							},
 							children: "Personalizar..."
 						})
@@ -11731,85 +11838,85 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		}) })] })
 	] });
 }, DraggableElement = React.memo(({ element: n, isSelected: _ }) => {
-	let { selectElement: E, updateElement: O, updateElements: A, state: j } = useEditor(), [M, N] = useState(!1), [P, z] = useState(!1), B = useRef({
+	let { selectElement: E, updateElement: O, updateElements: A, state: j, resizeGroup: M } = useEditor(), [N, P] = useState(!1), [z, B] = useState(!1), H = useRef({
 		x: 0,
 		y: 0
-	}), H = useRef({}), U = useRef(!1), G = useRef(!1), Z = useRef(0), Bj = useRef(0), Vj = useRef({
+	}), U = useRef({}), G = useRef(!1), Z = useRef(!1), Lj = useRef(0), Rj = useRef(0), zj = useRef({
 		x: 0,
 		y: 0
-	}), Hj = j.canvasHeight || 150, Gj = j.isList ? j.mockData.length > 0 ? j.mockData[0] : null : j.singleMockData, Kj = n.content, qj = {};
-	if (Gj) {
-		if (n.type === "text") Kj = Kj.replace(/\{\{(.*?)\}\}/g, (_, E) => {
-			let O = Gj[E.trim()];
+	}), Hj = useRef(!1), Uj = j.canvasHeight || 150, Wj = j.isList ? j.mockData.length > 0 ? j.mockData[0] : null : j.singleMockData, Gj = n.content, Jj = {};
+	if (Wj) {
+		if (n.type === "text") Gj = Gj.replace(/\{\{(.*?)\}\}/g, (_, E) => {
+			let O = Wj[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 && (Kj = String(_));
-		} else Kj = Kj.replace(/\{\{(.*?)\}\}/g, (n, _) => {
-			let E = Gj[_.trim()];
+			let _ = Wj[n.dataBinding];
+			_ != null && (Gj = String(_));
+		} else Gj = Gj.replace(/\{\{(.*?)\}\}/g, (n, _) => {
+			let E = Wj[_.trim()];
 			return E == null ? n : String(E);
 		});
 		n.styleBindings && Object.entries(n.styleBindings).forEach(([n, _]) => {
-			let E = Gj[_];
-			E != null && (qj = {
-				...qj,
+			let E = Wj[_];
+			E != null && (Jj = {
+				...Jj,
 				[n]: String(E)
 			});
 		}), n.conditions && n.conditions.forEach((n) => {
-			let _ = Gj[n.property];
-			checkCondition(_, n.operator, n.value) && (qj = {
-				...qj,
+			let _ = Wj[n.property];
+			checkCondition(_, n.operator, n.value) && (Jj = {
+				...Jj,
 				...n.style
 			});
 		});
 	}
-	let Jj = qj.display === "none";
-	if (Jj && _) {
-		let { display: n, ..._ } = qj;
-		qj = _;
+	let Yj = Jj.display === "none";
+	if (Yj && _) {
+		let { display: n, ..._ } = Jj;
+		Jj = _;
 	}
-	let Zj = (_) => {
-		_.stopPropagation(), !U.current && !G.current && !M && (_.shiftKey ? E(n.id, !0) : E(n.id, !1));
-	}, Qj = (O) => {
+	let Xj = (_) => {
+		_.stopPropagation(), !G.current && !Z.current && !N && (_.shiftKey ? E(n.id, !0) : E(n.id, !1));
+	}, Zj = (O) => {
 		if (O.button !== 0) return;
 		O.stopPropagation();
 		let A = O.shiftKey;
-		if (U.current = !1, G.current = !1, n.groupId && !_) {
+		if (G.current = !1, Z.current = !1, n.groupId && !_) {
 			E(n.groupId, A);
 			return;
 		}
-		_ || (E(n.id, A), G.current = !0), N(!0), B.current = {
+		_ || (E(n.id, A), Z.current = !0), P(!0), H.current = {
 			x: O.clientX,
 			y: O.clientY
 		};
 		let M = new Set(j.selectedElementIds);
 		_ || (A || M.clear(), M.add(n.id));
-		let P = {};
+		let N = {};
 		j.elements.forEach((n) => {
-			M.has(n.id) && (P[n.id] = {
+			M.has(n.id) && (N[n.id] = {
 				x: n.x,
 				y: n.y
 			});
-		}), H.current = P;
-	}, $j = (_) => {
-		_.stopPropagation(), _.preventDefault(), z(!0);
+		}), U.current = N;
+	}, Qj = (_) => {
+		_.stopPropagation(), _.preventDefault(), B(!0);
 		let E = _.target.closest(".resizable-element");
 		if (E) {
 			let O = E.getBoundingClientRect();
-			Vj.current = {
+			zj.current = {
 				x: O.left + O.width / 2,
 				y: O.top + O.height / 2
 			};
-			let A = _.clientX - Vj.current.x, j = _.clientY - Vj.current.y;
-			Z.current = Math.atan2(j, A) * (180 / Math.PI), Bj.current = n.rotation || 0;
+			let A = _.clientX - zj.current.x, j = _.clientY - zj.current.y;
+			Lj.current = Math.atan2(j, A) * (180 / Math.PI), Rj.current = n.rotation || 0;
 		}
 	};
 	useEffect(() => {
 		let _ = (_) => {
-			if (M) {
-				let n = _.clientX - B.current.x, E = _.clientY - B.current.y;
-				(Math.abs(n) > 2 || Math.abs(E) > 2) && (U.current = !0), A(Object.entries(H.current).map(([_, O]) => {
+			if (N) {
+				let n = _.clientX - H.current.x, E = _.clientY - H.current.y;
+				(Math.abs(n) > 2 || Math.abs(E) > 2) && (G.current = !0), A(Object.entries(U.current).map(([_, O]) => {
 					let A = O.x + n, M = O.y + E;
 					return j.gridSize > 0 && (A = Math.round(A / j.gridSize) * j.gridSize, M = Math.round(M / j.gridSize) * j.gridSize), j.isList && (M = Math.max(0, M)), {
 						id: _,
@@ -11820,26 +11927,26 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					};
 				}), !1);
 			}
-			if (P) {
-				let E = _.clientX - Vj.current.x, A = _.clientY - Vj.current.y, j = Math.atan2(A, E) * (180 / Math.PI) - Z.current, M = (Bj.current + j) % 360;
+			if (z) {
+				let E = _.clientX - zj.current.x, A = _.clientY - zj.current.y, j = Math.atan2(A, E) * (180 / Math.PI) - Lj.current, M = (Rj.current + j) % 360;
 				O(n.id, { rotation: M }, !1);
 			}
 		}, E = () => {
-			M && (N(!1), A([], !0)), P && (z(!1), O(n.id, { rotation: n.rotation }, !0));
+			N && (P(!1), A([], !0)), z && (B(!1), O(n.id, { rotation: n.rotation }, !0));
 		};
-		return (M || P) && (window.addEventListener("mousemove", _), window.addEventListener("mouseup", E)), () => {
+		return (N || z) && (window.addEventListener("mousemove", _), window.addEventListener("mouseup", E)), () => {
 			window.removeEventListener("mousemove", _), window.removeEventListener("mouseup", E);
 		};
 	}, [
-		M,
-		P,
+		N,
+		z,
 		n.id,
 		O,
 		A,
 		j.isList,
 		j.selectedElementIds
 	]);
-	let eM = {
+	let $j = {
 		position: "absolute",
 		left: 0,
 		top: 0,
@@ -11849,14 +11956,14 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		padding: n.type === "image" || n.type === "text" ? 0 : "8px",
 		border: _ ? "2px solid var(--accent-9)" : "1px dashed transparent",
 		outline: _ ? "none" : "1px solid transparent",
-		cursor: M ? "grabbing" : "grab",
+		cursor: N ? "grabbing" : "grab",
 		borderRadius: "var(--radius-2)",
 		overflow: n.autoGrow ? "visible" : "hidden",
 		whiteSpace: n.autoGrow ? "pre-wrap" : void 0,
 		wordBreak: n.autoGrow ? "break-word" : void 0,
 		userSelect: "none",
 		...n.style,
-		...qj
+		...Jj
 	};
 	return /* @__PURE__ */ jsx(Resizable, {
 		className: "resizable-element",
@@ -11864,20 +11971,23 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			width: n.width ?? 100,
 			height: n.autoGrow ? "auto" : n.height ?? 100
 		},
-		maxHeight: j.isList ? Math.max(10, Hj - n.y) : void 0,
+		maxHeight: j.isList ? Math.max(10, Uj - n.y) : void 0,
+		onResizeStart: (n) => {
+			Hj.current = !!n.shiftKey;
+		},
 		onResizeStop: (_, E, A, j) => {
-			let M = (n.width ?? 100) + j.width, N = (n.height ?? 100) + j.height;
-			O(n.id, {
-				width: M,
-				height: N
+			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,
+				height: P
 			});
 		},
 		style: {
 			position: "absolute",
 			transform: `translate(${n.x ?? 0}px, ${n.y ?? 0}px) rotate(${n.rotation || 0}deg)`,
 			height: n.autoGrow ? "auto" : void 0,
-			display: Jj && !_ ? "none" : void 0,
-			opacity: Jj && _ ? .4 : 1
+			display: Yj && !_ ? "none" : void 0,
+			opacity: Yj && _ ? .4 : 1
 		},
 		enable: _ && !n.autoGrow ? void 0 : {
 			top: !1,
@@ -11889,6 +11999,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			bottomLeft: !1,
 			topLeft: !1
 		},
+		lockAspectRatio: Hj.current === !0,
 		grid: j.gridSize > 0 ? [j.gridSize, j.gridSize] : void 0,
 		children: /* @__PURE__ */ jsx(ElementContextMenu, {
 			element: n,
@@ -11899,9 +12010,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					position: "relative"
 				},
 				children: [/* @__PURE__ */ jsxs(p, {
-					style: eM,
-					onMouseDown: Qj,
-					onClick: Zj,
+					style: $j,
+					onMouseDown: Zj,
+					onClick: Xj,
 					title: n.name,
 					onMouseEnter: (n) => {
 						_ || (n.currentTarget.style.borderColor = "var(--gray-6)");
@@ -11915,10 +12026,10 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								width: "100%",
 								height: "100%"
 							},
-							children: Kj
+							children: Gj
 						}),
-						n.type === "image" && (Kj ? /* @__PURE__ */ jsx("img", {
-							src: Kj,
+						n.type === "image" && (Gj ? /* @__PURE__ */ jsx("img", {
+							src: Gj,
 							alt: "Element",
 							style: {
 								width: "100%",
@@ -11983,7 +12094,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						zIndex: 50,
 						boxShadow: "0 0 0 2px white"
 					},
-					onMouseDown: $j,
+					onMouseDown: Qj,
 					children: /* @__PURE__ */ jsx(p, { style: {
 						position: "absolute",
 						top: 12,
@@ -12030,21 +12141,21 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 	useEffect(() => () => {
 		window.removeEventListener("mousemove", U), window.removeEventListener("mouseup", G);
 	}, [U, G]);
-	let Z = useRef(!1), { setCanvasHeight: Bj } = useEditor(), Vj = (n) => {
-		n.stopPropagation(), n.preventDefault(), Z.current = !0, window.addEventListener("mousemove", Hj), window.addEventListener("mouseup", Gj);
-	}, Hj = useCallback((n) => {
+	let Z = useRef(!1), { setCanvasHeight: Lj } = useEditor(), Rj = (n) => {
+		n.stopPropagation(), n.preventDefault(), Z.current = !0, window.addEventListener("mousemove", zj), window.addEventListener("mouseup", Hj);
+	}, zj = useCallback((n) => {
 		if (!Z.current || !A.current) return;
 		let _ = A.current.getBoundingClientRect(), E = n.clientY - _.top, O = Math.max(50, Math.min(E, 2e3));
-		Bj(Math.round(O));
-	}, [Bj]), Gj = useCallback(() => {
-		Z.current = !1, window.removeEventListener("mousemove", Hj), window.removeEventListener("mouseup", Gj);
-	}, [Hj]);
+		Lj(Math.round(O));
+	}, [Lj]), Hj = useCallback(() => {
+		Z.current = !1, window.removeEventListener("mousemove", zj), window.removeEventListener("mouseup", Hj);
+	}, [zj]);
 	useEffect(() => () => {
-		window.removeEventListener("mousemove", Hj), window.removeEventListener("mouseup", Gj);
-	}, [Hj, Gj]);
-	let Kj = (n) => {
+		window.removeEventListener("mousemove", zj), window.removeEventListener("mouseup", Hj);
+	}, [zj, Hj]);
+	let Uj = (n) => {
 		n.preventDefault(), n.dataTransfer.dropEffect = "copy";
-	}, qj = (n) => {
+	}, Wj = (n) => {
 		n.preventDefault();
 		let _ = n.dataTransfer.getData("application/x-editor-prop");
 		if (_) {
@@ -12059,12 +12170,12 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				dataBinding: _
 			});
 		}
-	}, Jj = n.canvasHeight || 150;
+	}, Gj = n.canvasHeight || 150;
 	return /* @__PURE__ */ jsxs(p, {
 		ref: A,
 		onMouseDown: B,
-		onDragOver: Kj,
-		onDrop: qj,
+		onDragOver: Uj,
+		onDrop: Wj,
 		style: {
 			width: "100%",
 			height: "100%",
@@ -12089,7 +12200,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			n.isList && /* @__PURE__ */ jsxs("div", {
 				style: {
 					position: "absolute",
-					top: Jj,
+					top: Gj,
 					left: 0,
 					right: 0,
 					height: "10px",
@@ -12101,7 +12212,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					justifyContent: "center",
 					group: "resize-handle"
 				},
-				onMouseDown: Vj,
+				onMouseDown: Rj,
 				children: [/* @__PURE__ */ jsx("div", { style: {
 					width: "100%",
 					height: "2px",
@@ -12125,7 +12236,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					},
 					children: [
 						"Altura do Item: ",
-						Jj,
+						Gj,
 						"px"
 					]
 				})]
@@ -12147,22 +12258,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, Bj] = useState("150"), [Vj, Hj] = useState(""), [Uj, Gj] = useState("0"), [Kj, qj] = useState("slideIn"), [Jj, Zj] = useState(.3), [Qj, $j] = 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, Lj] = useState("150"), [Rj, zj] = useState(""), [Bj, Hj] = useState("0"), [Uj, Wj] = useState("slideIn"), [Gj, Jj] = useState(.3), [Yj, Xj] = 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"), Hj(n.listSettings.containerHeight ? String(n.listSettings.containerHeight) : ""), Bj(String(n.canvasHeight || 150)), Gj(String(n.gridSize || 0));
+			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));
 			let _ = n.listSettings.entryAnimation;
-			qj(_?.type || "slideIn"), Zj(_?.duration || .3), $j(_?.timingFunction || "ease-out");
+			Wj(_?.type || "slideIn"), Jj(_?.duration || .3), Xj(_?.timingFunction || "ease-out");
 		}
 	}, [A]), useEffect(() => {
 		if (!A) return;
 		let _ = parseInt(Z, 10);
 		!isNaN(_) && _ > 0 && n.canvasHeight !== _ && E(_);
-		let j = parseInt(Uj, 10);
+		let j = parseInt(Bj, 10);
 		!isNaN(j) && j >= 0 && n.gridSize !== j && O(j);
 	}, [
 		Z,
-		Uj,
+		Bj,
 		A,
 		E,
 		O,
@@ -12341,7 +12452,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 											type: "number",
 											min: "10",
 											value: Z,
-											onChange: (n) => Bj(n.target.value)
+											onChange: (n) => Lj(n.target.value)
 										}),
 										/* @__PURE__ */ jsx(p$2, {
 											size: "1",
@@ -12362,8 +12473,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 											type: "number",
 											min: "0",
 											placeholder: "Auto (100%)",
-											value: Vj,
-											onChange: (n) => Hj(n.target.value)
+											value: Rj,
+											onChange: (n) => zj(n.target.value)
 										}),
 										/* @__PURE__ */ jsx(p$2, {
 											size: "1",
@@ -12389,8 +12500,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										as: "div",
 										children: "Efeito"
 									}), /* @__PURE__ */ jsxs("select", {
-										value: Kj,
-										onChange: (n) => qj(n.target.value),
+										value: Uj,
+										onChange: (n) => Wj(n.target.value),
 										style: {
 											width: "100%",
 											padding: "6px",
@@ -12452,8 +12563,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										type: "number",
 										step: "0.1",
 										min: "0.1",
-										value: Jj,
-										onChange: (n) => Zj(parseFloat(n.target.value) || .3)
+										value: Gj,
+										onChange: (n) => Jj(parseFloat(n.target.value) || .3)
 									})] }),
 									/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 										size: "1",
@@ -12461,8 +12572,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										as: "div",
 										children: "Curva (Easing)"
 									}), /* @__PURE__ */ jsxs("select", {
-										value: Qj,
-										onChange: (n) => $j(n.target.value),
+										value: Yj,
+										onChange: (n) => Xj(n.target.value),
 										style: {
 											width: "100%",
 											padding: "6px",
@@ -12517,8 +12628,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 											children: "Tamanho do Grid (px) - 0 para desativar"
 										}), /* @__PURE__ */ jsx(u$1, {
 											type: "number",
-											value: Uj,
-											onChange: (n) => Gj(n.target.value),
+											value: Bj,
+											onChange: (n) => Hj(n.target.value),
 											placeholder: "0"
 										})]
 									})
@@ -12537,11 +12648,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: "Cancelar"
 					}) }), /* @__PURE__ */ jsx(D$2, { children: /* @__PURE__ */ jsx(o, {
 						onClick: () => {
-							let n = parseInt(Vj, 10), E = {
-								type: Kj,
-								duration: Number(Jj),
+							let n = parseInt(Rj, 10), E = {
+								type: Uj,
+								duration: Number(Gj),
 								delay: 0,
-								timingFunction: Qj
+								timingFunction: Yj
 							};
 							_({
 								sortProp: M === "__none__" ? "" : M,
@@ -12705,13 +12816,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));
-	}, Bj = () => {
+	}, Lj = () => {
 		E = !0, O = !0, A.isProcessing || n(Z);
 	};
 	return {
 		schedule: stepsOrder.reduce((n, _) => {
 			let O = M[_];
-			return n[_] = (n, _ = !1, A = !1) => (E || Bj(), O.schedule(n, _, A)), n;
+			return n[_] = (n, _ = !1, A = !1) => (E || Lj(), O.schedule(n, _, A)), n;
 		}, {}),
 		cancel: (n) => {
 			for (let _ = 0; _ < stepsOrder.length; _++) M[stepsOrder[_]].cancel(n);
@@ -13069,40 +13180,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)), Bj = M - j, Vj = /* @__PURE__ */ millisecondsToSeconds(Math.sqrt(P / B)), Hj = Math.abs(Bj) < 5;
-	O ||= Hj ? springDefaults.restSpeed.granular : springDefaults.restSpeed.default, A ||= Hj ? springDefaults.restDelta.granular : springDefaults.restDelta.default;
-	let Uj;
+	}), 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;
 	if (Z < 1) {
-		let n = calcAngularFreq(Vj, Z);
-		Uj = (_) => M - Math.exp(-Z * Vj * _) * ((G + Z * Vj * Bj) / n * Math.sin(n * _) + Bj * Math.cos(n * _));
-	} else if (Z === 1) Uj = (n) => M - Math.exp(-Vj * n) * (Bj + (G + Vj * Bj) * n);
+		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);
 	else {
-		let n = Vj * Math.sqrt(Z * Z - 1);
-		Uj = (_) => {
-			let E = Math.exp(-Z * Vj * _), O = Math.min(n * _, 300);
-			return M - E * ((G + Z * Vj * Bj) * Math.sinh(O) + n * Bj * Math.cosh(O)) / n;
+		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 Wj = {
+	let Vj = {
 		calculatedDuration: W && H || null,
 		next: (n) => {
-			let _ = Uj(n);
+			let _ = Bj(n);
 			if (W) N.done = n >= H;
 			else {
 				let E = n === 0 ? G : 0;
-				Z < 1 && (E = n === 0 ? /* @__PURE__ */ secondsToMilliseconds(G) : calcGeneratorVelocity(Uj, n, _));
+				Z < 1 && (E = n === 0 ? /* @__PURE__ */ secondsToMilliseconds(G) : calcGeneratorVelocity(Bj, 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(Wj), maxGeneratorDuration), _ = generateLinearEasing((_) => Wj.next(n * _).value, n, 30);
+			let n = Math.min(calcGeneratorDuration(Vj), maxGeneratorDuration), _ = generateLinearEasing((_) => Vj.next(n * _).value, n, 30);
 			return n + "ms " + _;
 		},
 		toTransition: () => {}
 	};
-	return Wj;
+	return Vj;
 }
 spring.applyToOptions = (n) => {
 	let _ = createGeneratorEasing(n, 100, spring);
@@ -13112,26 +13223,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 * _, Bj = H + Z, Vj = M === void 0 ? Bj : M(Bj);
-	Vj !== Bj && (Z = Vj - H);
-	let Hj = (n) => -Z * Math.exp(-n / O), Uj = (n) => Vj + Hj(n), Wj = (n) => {
-		let _ = Hj(n), E = Uj(n);
-		U.done = Math.abs(_) <= z, U.value = U.done ? Vj : E;
-	}, Gj, Kj, qj = (n) => {
-		W(U.value) && (Gj = n, Kj = 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 * _, 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({
 			keyframes: [U.value, G(U.value)],
-			velocity: calcGeneratorVelocity(Uj, n, U.value),
+			velocity: calcGeneratorVelocity(Bj, n, U.value),
 			damping: A,
 			stiffness: j,
 			restDelta: z,
 			restSpeed: B
 		}));
 	};
-	return qj(0), {
+	return Wj(0), {
 		calculatedDuration: null,
 		next: (n) => {
 			let _ = !1;
-			return !Kj && Gj === void 0 && (_ = !0, Wj(n), qj(n)), Gj !== void 0 && n >= Gj ? Kj.next(n - Gj) : (!_ && Wj(n), U);
+			return !Uj && Hj === void 0 && (_ = !0, Vj(n), Wj(n)), Hj !== void 0 && n >= Hj ? Uj.next(n - Hj) : (!_ && Vj(n), U);
 		}
 	};
 }
@@ -13251,22 +13362,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 Bj = this.currentTime - P * (this.playbackSpeed >= 0 ? 1 : -1), Vj = this.playbackSpeed >= 0 ? Bj < 0 : Bj > O;
-		this.currentTime = Math.max(Bj, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = O);
-		let Hj = this.currentTime, Uj = E;
+		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;
 		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" && (Uj = j)), Hj = 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" && (Bj = j)), zj = clamp(0, 1, E) * M;
 		}
-		let Wj = Vj ? {
+		let Vj = Rj ? {
 			done: !1,
 			value: z[0]
-		} : Uj.next(Hj);
-		A && (Wj.value = A(Wj.value));
-		let { done: Gj } = Wj;
-		!Vj && N !== null && (Gj = this.playbackSpeed >= 0 ? this.currentTime >= O : this.currentTime <= 0);
-		let Kj = this.holdTime === null && (this.state === "finished" || this.state === "running" && Gj);
-		return Kj && W !== inertia && (Wj.value = getFinalKeyframe$1(z, this.options, Z, this.speed)), G && G(Wj.value), Kj && this.finish(), Wj;
+		} : 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;
 	}
 	then(n, _) {
 		return this.finished.then(n, _);
@@ -14329,46 +14440,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), Bj = useConstant(() => /* @__PURE__ */ new Map()), Vj = useRef(/* @__PURE__ */ new Set()), [Gj, Kj] = useState(H), [qj, Xj] = useState(H);
+	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);
 	useIsomorphicLayoutEffect(() => {
 		G.current = !1, Z.current = H;
-		for (let n = 0; n < qj.length; n++) {
-			let _ = getChildKey(qj[n]);
-			W.includes(_) ? (Bj.delete(_), Vj.current.delete(_)) : Bj.get(_) !== !0 && Bj.set(_, !1);
+		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);
 		}
 	}, [
-		qj,
+		Wj,
 		W.length,
 		W.join("-")
 	]);
-	let Zj = [];
-	if (H !== Gj) {
+	let Jj = [];
+	if (H !== Hj) {
 		let n = [...H];
-		for (let _ = 0; _ < qj.length; _++) {
-			let E = qj[_], O = getChildKey(E);
-			W.includes(O) || (n.splice(_, 0, E), Zj.push(E));
+		for (let _ = 0; _ < Wj.length; _++) {
+			let E = Wj[_], O = getChildKey(E);
+			W.includes(O) || (n.splice(_, 0, E), Jj.push(E));
 		}
-		return j === "wait" && Zj.length && (n = Zj), Xj(onlyElements(n)), Kj(H), null;
+		return j === "wait" && Jj.length && (n = Jj), qj(onlyElements(n)), Uj(H), null;
 	}
-	process.env.NODE_ENV !== "production" && j === "wait" && qj.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: Qj } = useContext(LayoutGroupContext);
-	return jsx(Fragment$1, { children: qj.map((n) => {
-		let U = getChildKey(n), Hj = M && !z ? !1 : H === qj || W.includes(U);
+	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);
 		return jsx(PresenceChild, {
-			isPresent: Hj,
+			isPresent: zj,
 			initial: !G.current || E ? void 0 : !1,
 			custom: _,
 			presenceAffectsLayout: A,
 			mode: j,
 			root: P,
-			onExitComplete: Hj ? void 0 : () => {
-				if (Vj.current.has(U)) return;
-				if (Vj.current.add(U), Bj.has(U)) Bj.set(U, !0);
+			onExitComplete: zj ? void 0 : () => {
+				if (Rj.current.has(U)) return;
+				if (Rj.current.add(U), Lj.has(U)) Lj.set(U, !0);
 				else return;
 				let n = !0;
-				Bj.forEach((_) => {
+				Lj.forEach((_) => {
 					_ || (n = !1);
-				}), n && (Qj?.(), Xj(Z.current), M && B?.(), O && O());
+				}), n && (Yj?.(), qj(Z.current), M && B?.(), O && O());
 			},
 			anchorX: N,
 			children: n
@@ -14797,12 +14908,12 @@ function useVisualElement(n, _, E, O, A, j) {
 	useInsertionEffect(() => {
 		H && Z.current && H.update(E, P);
 	});
-	let Vj = E[optimizedAppearDataAttribute], Hj = useRef(!!Vj && !window.MotionHandoffIsComplete?.(Vj) && window.MotionHasOptimisedAnimation?.(Vj));
+	let Rj = E[optimizedAppearDataAttribute], zj = useRef(!!Rj && !window.MotionHandoffIsComplete?.(Rj) && window.MotionHasOptimisedAnimation?.(Rj));
 	return useIsomorphicLayoutEffect(() => {
-		H && (Z.current = !0, window.MotionIsMounted = !0, H.updateFeatures(), H.scheduleRenderMicrotask(), Hj.current && H.animationState && H.animationState.animateChanges());
+		H && (Z.current = !0, window.MotionIsMounted = !0, H.updateFeatures(), H.scheduleRenderMicrotask(), zj.current && H.animationState && H.animationState.animateChanges());
 	}), useEffect(() => {
-		H && (!Hj.current && H.animationState && H.animationState.animateChanges(), Hj.current &&= (queueMicrotask(() => {
-			window.MotionHandoffMarkAsComplete?.(Vj);
+		H && (!zj.current && H.animationState && H.animationState.animateChanges(), zj.current &&= (queueMicrotask(() => {
+			window.MotionHandoffMarkAsComplete?.(Rj);
 		}), !1), H.enteringChildren = void 0);
 	}), H;
 }
@@ -15480,34 +15591,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), Bj = U === j ? W.isActive : null;
-			Bj === !1 && (H = _);
-			let Vj = G === N[U] && G !== M[U] && Z;
-			if (Vj && O && n.manuallyAnimateOnMount && (Vj = !1), W.protectedKeys = { ...B }, !W.isActive && Bj === null || !G && !W.prevProp || isAnimationControls(G) || typeof G == "boolean") continue;
-			let Hj = checkVariantsDidChange(W.prevProp, G), Uj = Hj || U === j && W.isActive && !Vj && Z || _ > H && Z, Wj = !1, Gj = Array.isArray(G) ? G : [G], Kj = Gj.reduce(A(U), {});
-			Bj === !1 && (Kj = {});
-			let { prevResolvedValues: qj = {} } = W, Jj = {
-				...qj,
-				...Kj
-			}, Yj = (_) => {
-				Uj = !0, z.has(_) && (Wj = !0, z.delete(_)), W.needsAnimating[_] = !0;
+			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 E = n.getValue(_);
 				E && (E.liveStyle = !1);
 			};
-			for (let n in Jj) {
-				let _ = Kj[n], E = qj[n];
+			for (let n in Gj) {
+				let _ = Uj[n], E = Wj[n];
 				if (B.hasOwnProperty(n)) continue;
 				let O = !1;
-				O = isKeyframesTarget(_) && isKeyframesTarget(E) ? !shallowCompare(_, E) : _ !== E, O ? _ == null ? z.add(n) : Yj(n) : _ !== void 0 && z.has(n) ? Yj(n) : W.protectedKeys[n] = !0;
+				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;
 			}
-			W.prevProp = G, W.prevResolvedValues = Kj, W.isActive && (B = {
+			W.prevProp = G, W.prevResolvedValues = Uj, W.isActive && (B = {
 				...B,
-				...Kj
-			}), O && n.blockInitialAnimation && (Uj = !1);
-			let Xj = Vj && Hj;
-			Uj && (!Xj || Wj) && P.push(...Gj.map((_) => {
+				...Uj
+			}), O && n.blockInitialAnimation && (Bj = !1);
+			let qj = Rj && zj;
+			Bj && (!qj || Vj) && P.push(...Hj.map((_) => {
 				let E = { type: U };
-				if (typeof _ == "string" && O && !Xj && n.manuallyAnimateOnMount && n.parent) {
+				if (typeof _ == "string" && O && !qj && n.manuallyAnimateOnMount && n.parent) {
 					let { parent: O } = n, A = resolveVariant(O, _);
 					if (O.enteringChildren && A) {
 						let { delayChildren: _ } = A.transition || {};
@@ -17363,8 +17474,190 @@ const Preview = () => {
 		})]
 	});
 };
-var 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: Bj, redo: Vj, copy: Hj, paste: Uj, removeSelected: Gj, updateElements: Kj, selectElement: qj } = useEditor(), Jj = React.useRef(null), Zj = () => {
+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();
+	Z.forEach((n) => {
+		Lj.set(n.id, _.elements.filter((_) => _.groupId === n.id));
+	});
+	let Rj = _.elements.filter((n) => n.type !== "group" && !n.groupId), zj = (n) => {
+		P((_) => ({
+			..._,
+			[n]: !_[n]
+		}));
+	}, Bj = (O, j = 0) => /* @__PURE__ */ jsx(p, {
+		style: {
+			borderRadius: 6,
+			backgroundColor: _.selectedElementIds.includes(O.id) ? "var(--gray-5)" : "var(--gray-3)",
+			border: _.selectedElementIds.includes(O.id) ? "1px solid var(--gray-8)" : "1px solid var(--gray-5)",
+			cursor: "pointer",
+			overflow: "hidden",
+			padding: "6px 8px",
+			paddingLeft: `${8 + j * 16}px`
+		},
+		draggable: !0,
+		onDragStart: (n) => {
+			n.dataTransfer.setData("application/x-editor-element", O.id), n.dataTransfer.effectAllowed = "move";
+		},
+		onDragOver: (n) => {
+			n.preventDefault();
+		},
+		onDrop: (n) => {
+			let E = n.dataTransfer.getData("application/x-editor-element");
+			if (!(!E || E === O.id)) if (O.type === "group") A(E, O.id);
+			else {
+				let n = _.elements.find((n) => n.id === E);
+				if (!n) return;
+				let j = O;
+				!n.groupId && !j.groupId ? M([E, j.id]) : !j.groupId && n.groupId ? A(j.id, n.groupId) : !n.groupId && j.groupId && A(E, j.groupId);
+			}
+		},
+		onClick: (_) => {
+			E(O.id, _.shiftKey), n && n(O.id);
+		},
+		children: /* @__PURE__ */ jsxs(p$1, {
+			gap: "2",
+			align: "center",
+			style: {
+				width: "100%",
+				overflow: "hidden"
+			},
+			children: [
+				O.type === "text" && /* @__PURE__ */ jsx(TextIcon, {}),
+				O.type === "image" && /* @__PURE__ */ jsx(ImageIcon, {}),
+				O.type === "box" && /* @__PURE__ */ jsx(BoxIcon, {}),
+				/* @__PURE__ */ jsx(p$2, {
+					truncate: !0,
+					style: {
+						flex: 1,
+						textAlign: "left"
+					},
+					children: O.name || (O.type === "text" ? O.content.length > 20 ? O.content.substring(0, 20) + "..." : O.content : O.type === "image" ? "Imagem" : "Container")
+				}),
+				O.type === "group" && /* @__PURE__ */ jsx(o, {
+					variant: "ghost",
+					color: "gray",
+					size: "1",
+					onClick: (n) => {
+						n.stopPropagation(), U(O.id), G(O.name || "Grupo"), B(!0);
+					},
+					children: "Renomear"
+				})
+			]
+		})
+	}, O.id);
+	return /* @__PURE__ */ jsxs(p$1, {
+		direction: "column",
+		gap: "2",
+		children: [
+			Rj.map((n) => Bj(n, 0)),
+			Z.map((_) => {
+				let O = N[_.id] === !0, j = Lj.get(_.id) || [];
+				return /* @__PURE__ */ jsxs(p, {
+					style: {
+						border: "1px dashed var(--gray-6)",
+						borderRadius: 6,
+						backgroundColor: "var(--gray-3)"
+					},
+					children: [/* @__PURE__ */ jsx(p$1, {
+						align: "center",
+						justify: "between",
+						style: {
+							padding: "6px 8px",
+							cursor: "pointer"
+						},
+						onClick: () => {
+							E(_.id), n && n(_.id);
+						},
+						onDoubleClick: () => zj(_.id),
+						onDragOver: (n) => {
+							n.preventDefault();
+						},
+						onDrop: (n) => {
+							let E = n.dataTransfer.getData("application/x-editor-element");
+							E && E !== _.id && A(E, _.id);
+						},
+						children: /* @__PURE__ */ jsxs(p$1, {
+							align: "center",
+							gap: "2",
+							children: [
+								/* @__PURE__ */ jsx(BoxIcon, {}),
+								/* @__PURE__ */ jsx(p$2, {
+									style: { fontWeight: 600 },
+									children: _.name || "Grupo"
+								}),
+								/* @__PURE__ */ jsx(e, {
+									variant: "soft",
+									color: "blue",
+									size: "1",
+									children: j.length
+								})
+							]
+						})
+					}), !O && /* @__PURE__ */ jsxs(p$1, {
+						direction: "column",
+						gap: "2",
+						style: { padding: "6px 8px" },
+						children: [j.map((n) => Bj(n, 1)), j.length === 0 && /* @__PURE__ */ jsx(p$2, {
+							size: "1",
+							color: "gray",
+							children: "Solte elementos aqui para agrupar"
+						})]
+					})]
+				}, _.id);
+			}),
+			/* @__PURE__ */ jsx(p, {
+				style: {
+					marginTop: 8,
+					padding: "6px 8px",
+					border: "1px dashed var(--gray-6)",
+					borderRadius: 6
+				},
+				onDragOver: (n) => {
+					n.preventDefault();
+				},
+				onDrop: (n) => {
+					let _ = n.dataTransfer.getData("application/x-editor-element");
+					_ && j(_);
+				},
+				children: /* @__PURE__ */ jsx(p$2, {
+					size: "1",
+					color: "gray",
+					children: "Soltar aqui para remover do grupo"
+				})
+			}),
+			/* @__PURE__ */ jsx(s$4, {
+				open: z,
+				onOpenChange: B,
+				children: /* @__PURE__ */ jsxs(p$8, {
+					style: { maxWidth: 420 },
+					children: [/* @__PURE__ */ jsx(g$2, { children: "Renomear Grupo" }), /* @__PURE__ */ jsxs(p$1, {
+						direction: "column",
+						gap: "3",
+						children: [/* @__PURE__ */ jsx(u$1, {
+							value: W,
+							onChange: (n) => G(n.target.value),
+							placeholder: "Nome do grupo..."
+						}), /* @__PURE__ */ jsxs(p$1, {
+							gap: "3",
+							justify: "end",
+							children: [/* @__PURE__ */ jsx(D$2, { children: /* @__PURE__ */ jsx(o, {
+								variant: "soft",
+								color: "gray",
+								children: "Cancelar"
+							}) }), /* @__PURE__ */ jsx(o, {
+								onClick: () => {
+									H && O(H, W), B(!1);
+								},
+								children: "Salvar"
+							})]
+						})]
+					})]
+				})
+			})
+		]
+	});
+}, 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 n = {
 			elements: Z.elements,
 			isList: Z.isList,
@@ -17375,9 +17668,9 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 			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);
-	}, Qj = () => {
-		Jj.current?.click();
-	}, $j = (n) => {
+	}, Jj = () => {
+		Wj.current?.click();
+	}, Yj = (n) => {
 		let _ = n.target.files?.[0];
 		if (!_) return;
 		let E = new FileReader();
@@ -17417,11 +17710,11 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 	}, [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(), Vj()) : (n.preventDefault(), Bj());
-				else if ((n.ctrlKey || n.metaKey) && n.key === "y") n.preventDefault(), Vj();
-				else if ((n.ctrlKey || n.metaKey) && n.key === "c") n.preventDefault(), Hj();
-				else if ((n.ctrlKey || n.metaKey) && n.key === "v") n.preventDefault(), Uj();
-				else if (n.key === "Delete" || n.key === "Backspace") Z.selectedElementIds.length > 0 && (n.preventDefault(), Gj());
+				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());
 				else if ([
 					"ArrowUp",
 					"ArrowDown",
@@ -17439,20 +17732,20 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 								changes: j
 							});
 						}
-					}), E.length > 0 && Kj(E);
+					}), E.length > 0 && Uj(E);
 				}
 			}
 		};
 		return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
 	}, [
+		Lj,
+		Rj,
+		zj,
 		Bj,
-		Vj,
 		Hj,
-		Uj,
-		Gj,
 		Z.selectedElementIds,
 		Z.elements,
-		Kj
+		Uj
 	]), React.useEffect(() => {
 		if (E) try {
 			let n = typeof E == "string" ? JSON.parse(E) : E;
@@ -17461,7 +17754,7 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 			console.error("Failed to load initial state", n);
 		}
 	}, [E, G]);
-	let eM = (n) => {
+	let Xj = (n) => {
 		console.log(`Adding element of type: ${n}`), W({
 			type: n,
 			content: `New ${n}`
@@ -17522,15 +17815,15 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 								style: { width: "240px" },
 								children: [
 									/* @__PURE__ */ jsx(v$3, {
-										onSelect: () => eM("text"),
+										onSelect: () => Xj("text"),
 										children: "Texto"
 									}),
 									/* @__PURE__ */ jsx(v$3, {
-										onSelect: () => eM("image"),
+										onSelect: () => Xj("image"),
 										children: "Imagem"
 									}),
 									/* @__PURE__ */ jsx(v$3, {
-										onSelect: () => eM("box"),
+										onSelect: () => Xj("box"),
 										children: "Caixa (Container)"
 									})
 								]
@@ -17569,7 +17862,7 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 										cursor: "pointer",
 										justifyContent: "center"
 									},
-									onClick: Zj,
+									onClick: Gj,
 									children: [/* @__PURE__ */ jsx(DownloadIcon, {}), " Exportar"]
 								}), /* @__PURE__ */ jsxs(o, {
 									variant: "soft",
@@ -17579,16 +17872,16 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 										cursor: "pointer",
 										justifyContent: "center"
 									},
-									onClick: Qj,
+									onClick: Jj,
 									children: [/* @__PURE__ */ jsx(UploadIcon, {}), " Importar"]
 								})]
 							}),
 							/* @__PURE__ */ jsx("input", {
 								type: "file",
-								ref: Jj,
+								ref: Wj,
 								style: { display: "none" },
 								accept: ".json",
-								onChange: $j
+								onChange: Yj
 							}),
 							/* @__PURE__ */ jsx(p, {
 								mt: "2",
@@ -17611,49 +17904,9 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 								mb: "2",
 								as: "div",
 								children: "Elementos"
-							}), /* @__PURE__ */ jsxs(p$1, {
-								direction: "column",
-								gap: "2",
-								children: [Z.elements.map((n) => /* @__PURE__ */ jsx(o, {
-									variant: Z.selectedElementIds.includes(n.id) ? "solid" : "soft",
-									color: "gray",
-									size: "2",
-									style: {
-										justifyContent: "flex-start",
-										cursor: "pointer",
-										overflow: "hidden"
-									},
-									onClick: (_) => {
-										qj(n.id, _.shiftKey), B(n.id), U(!0);
-									},
-									children: /* @__PURE__ */ jsxs(p$1, {
-										gap: "2",
-										align: "center",
-										style: {
-											width: "100%",
-											overflow: "hidden"
-										},
-										children: [
-											n.type === "text" && /* @__PURE__ */ jsx(TextIcon, {}),
-											n.type === "image" && /* @__PURE__ */ jsx(ImageIcon, {}),
-											n.type === "box" && /* @__PURE__ */ jsx(BoxIcon, {}),
-											/* @__PURE__ */ jsx(p$2, {
-												truncate: !0,
-												style: {
-													flex: 1,
-													textAlign: "left"
-												},
-												children: n.type === "text" ? n.content.length > 20 ? n.content.substring(0, 20) + "..." : n.content : n.type === "image" ? "Imagem" : "Container"
-											})
-										]
-									})
-								}, n.id)), Z.elements.length === 0 && /* @__PURE__ */ jsx(p$2, {
-									size: "1",
-									color: "gray",
-									style: { fontStyle: "italic" },
-									children: "Nenhum elemento adicionado."
-								})]
-							})] }),
+							}), /* @__PURE__ */ jsx(LayersPanel, { onOpenSettings: (n) => {
+								B(n), U(!0);
+							} })] }),
 							/* @__PURE__ */ jsx(o$2, { size: "4" }),
 							/* @__PURE__ */ jsxs(p, { children: [
 								/* @__PURE__ */ jsx(p$2, {
@@ -17814,5 +18067,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 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        return elements.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            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            };\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 item height\n        const itemHeight = canvasHeight || Math.max(...elements.map(el => el.y + el.height));\n\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 itemContainerStyle = styleObjectToString({\n                 position: 'relative',\n                 height: itemHeight,\n                 width: '100%',\n                 marginBottom: 0\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 itemHeight = ${itemHeight};\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 itemContainerStyle = styleObjectToString({\n                            position: 'relative',\n                            height: itemHeight,\n                            width: '100%',\n                            marginBottom: 0\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 computeItemHeight = (elements, itemData, fallbackHeight) => {\n        if (fallbackHeight) return fallbackHeight;\n        let maxY = 0;\n        elements.forEach(el => {\n            let height = el.height;\n            if (el.type === 'text' && el.autoGrow) {\n                let content = el.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                const fontSize = parseInt(String((el.style && el.style.fontSize) || 16));\n                const fontFamily = String((el.style && el.style.fontFamily) || 'Arial');\n                const measured = measureTextHeight(content, el.width, fontFamily, fontSize);\n                height = Math.max(height, measured);\n            }\n            const bottom = el.y + height;\n            if (bottom > maxY) maxY = bottom;\n        });\n        return 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        return elements.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            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            };\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                 marginBottom: 0\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 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                            marginBottom: 0\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 };