npm - @1urso/generic-editor - Versions diffs - 0.1.28 → 0.1.36 - Mend

@1urso/generic-editor 0.1.28 → 0.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/editor/components/AlignmentToolbar.d.ts +2 -0
package/dist/editor/components/ElementAdvancedSettings.d.ts +1 -0
package/dist/editor/context.d.ts +11 -2
package/dist/editor/utils/layoutEngine.d.ts +5 -0
package/dist/generic-editor.css +1 -1
package/dist/generic-editor.js +1780 -800
package/dist/generic-editor.umd.cjs +64 -24
package/package.json +1 -1

package/dist/generic-editor.js CHANGED Viewed

@@ -26,7 +26,91 @@ function _objectWithoutPropertiesLoose(n, _) {
 	for (j = 0; j < O.length; j++) A = O[j], !(_.indexOf(A) >= 0) && (E[A] = n[A]);
 	return E;
 }
-var _excluded$F = ["color"], BoxIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+var _excluded$3 = ["color"], AlignBottomIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$3);
+	return createElement("svg", Object.assign({
+		width: "15",
+		height: "15",
+		viewBox: "0 0 15 15",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, A, { ref: _ }), createElement("path", {
+		d: "M9 3C9 2.44772 8.55229 2 8 2H7C6.44772 2 6 2.44772 6 3L6 14H1.5C1.22386 14 1 14.2239 1 14.5C1 14.7761 1.22386 15 1.5 15L6 15H9H13.5C13.7761 15 14 14.7761 14 14.5C14 14.2239 13.7761 14 13.5 14H9V3Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$4 = ["color"], AlignCenterHorizontallyIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$4);
+	return createElement("svg", Object.assign({
+		width: "15",
+		height: "15",
+		viewBox: "0 0 15 15",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, A, { ref: _ }), createElement("path", {
+		d: "M1.99988 6C1.44759 6 0.999877 6.44772 0.999877 7L0.999877 8C0.999877 8.55228 1.44759 9 1.99988 9L6.99988 9L6.99988 13.5C6.99988 13.7761 7.22374 14 7.49988 14C7.77602 14 7.99988 13.7761 7.99988 13.5L7.99988 9L12.9999 9C13.5522 9 13.9999 8.55228 13.9999 8L13.9999 7C13.9999 6.44772 13.5522 6 12.9999 6L7.99988 6L7.99988 1.5C7.99988 1.22386 7.77602 1 7.49988 1C7.22373 1 6.99988 1.22386 6.99988 1.5L6.99988 6L1.99988 6Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$5 = ["color"], AlignCenterVerticallyIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$5);
+	return createElement("svg", Object.assign({
+		width: "15",
+		height: "15",
+		viewBox: "0 0 15 15",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, A, { ref: _ }), createElement("path", {
+		d: "M6.99988 1C6.44759 1 5.99988 1.44772 5.99988 2V7H1.49988C1.22374 7 0.999878 7.22386 0.999878 7.5C0.999878 7.77614 1.22374 8 1.49988 8H5.99988V13C5.99988 13.5523 6.44759 14 6.99988 14H7.99988C8.55216 14 8.99988 13.5523 8.99988 13V8H13.4999C13.776 8 13.9999 7.77614 13.9999 7.5C13.9999 7.22386 13.776 7 13.4999 7H8.99988V2C8.99988 1.44772 8.55216 1 7.99988 1L6.99988 1Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$6 = ["color"], AlignLeftIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$6);
+	return createElement("svg", Object.assign({
+		width: "15",
+		height: "15",
+		viewBox: "0 0 15 15",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, A, { ref: _ }), createElement("path", {
+		d: "M0.499995 0.999995C0.223855 0.999995 -5.58458e-07 1.22385 -5.46388e-07 1.49999L-2.18554e-08 13.4999C-9.78492e-09 13.776 0.223855 13.9999 0.499995 13.9999C0.776136 13.9999 0.999991 13.776 0.999991 13.4999L0.999991 8.99993L12 8.99993C12.5523 8.99993 13 8.55222 13 7.99993L13 6.99994C13 6.44766 12.5523 5.99995 12 5.99995L0.999991 5.99995L0.999991 1.49999C0.999991 1.22385 0.776135 0.999995 0.499995 0.999995Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$7 = ["color"], AlignRightIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$7);
+	return createElement("svg", Object.assign({
+		width: "15",
+		height: "15",
+		viewBox: "0 0 15 15",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, A, { ref: _ }), createElement("path", {
+		d: "M14.4999 1C14.2237 1 13.9999 1.22386 13.9999 1.5L13.9999 6L2.99988 6C2.44759 6 1.99988 6.44772 1.99988 7L1.99988 8C1.99988 8.55228 2.44759 9 2.99988 9L13.9999 9L13.9999 13.5C13.9999 13.7761 14.2237 14 14.4999 14C14.776 14 14.9999 13.7761 14.9999 13.5L14.9999 9L14.9999 6L14.9999 1.5C14.9999 1.22386 14.776 1 14.4999 1Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$8 = ["color"], AlignTopIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$8);
+	return createElement("svg", Object.assign({
+		width: "15",
+		height: "15",
+		viewBox: "0 0 15 15",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, A, { ref: _ }), createElement("path", {
+		d: "M1.5 0C1.22386 0 1 0.223858 1 0.5C1 0.776142 1.22386 1 1.5 1H6V12C6 12.5523 6.44772 13 7 13H8C8.55228 13 9 12.5523 9 12V1H13.5C13.7761 1 14 0.776142 14 0.5C14 0.223858 13.7761 0 13.5 0H9H6H1.5Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$F = ["color"], BoxIcon = /* @__PURE__ */ forwardRef(function(n, _) {
 	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$F);
 	return createElement("svg", Object.assign({
 		width: "15",
@@ -110,6 +194,20 @@ var _excluded$F = ["color"], BoxIcon = /* @__PURE__ */ forwardRef(function(n, _)
 		fillRule: "evenodd",
 		clipRule: "evenodd"
 	}));
+}), _excluded$1P = ["color"], DownloadIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$1P);
+	return createElement("svg", Object.assign({
+		width: "15",
+		height: "15",
+		viewBox: "0 0 15 15",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, A, { ref: _ }), createElement("path", {
+		d: "M7.50005 1.04999C7.74858 1.04999 7.95005 1.25146 7.95005 1.49999V8.41359L10.1819 6.18179C10.3576 6.00605 10.6425 6.00605 10.8182 6.18179C10.994 6.35753 10.994 6.64245 10.8182 6.81819L7.81825 9.81819C7.64251 9.99392 7.35759 9.99392 7.18185 9.81819L4.18185 6.81819C4.00611 6.64245 4.00611 6.35753 4.18185 6.18179C4.35759 6.00605 4.64251 6.00605 4.81825 6.18179L7.05005 8.41359V1.49999C7.05005 1.25146 7.25152 1.04999 7.50005 1.04999ZM2.5 10C2.77614 10 3 10.2239 3 10.5V12C3 12.5539 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2239 12.2239 10 12.5 10C12.7761 10 13 10.2239 13 10.5V12C13 13.1041 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2239 2.22386 10 2.5 10Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
 }), _excluded$25 = ["color"], EyeNoneIcon = /* @__PURE__ */ forwardRef(function(n, _) {
 	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$25);
 	return createElement("svg", Object.assign({
@@ -208,6 +306,34 @@ var _excluded$F = ["color"], BoxIcon = /* @__PURE__ */ forwardRef(function(n, _)
 		fillRule: "evenodd",
 		clipRule: "evenodd"
 	}));
+}), _excluded$42 = ["color"], SpaceEvenlyHorizontallyIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$42);
+	return createElement("svg", Object.assign({
+		width: "15",
+		height: "15",
+		viewBox: "0 0 15 15",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, A, { ref: _ }), createElement("path", {
+		d: "M14.4999 0.999992C14.2237 0.999992 13.9999 1.22385 13.9999 1.49999L13.9999 13.4999C13.9999 13.776 14.2237 13.9999 14.4999 13.9999C14.776 13.9999 14.9999 13.776 14.9999 13.4999L14.9999 1.49999C14.9999 1.22385 14.776 0.999992 14.4999 0.999992ZM0.499996 0.999992C0.223856 0.999992 -9.78509e-09 1.22385 -2.18556e-08 1.49999L4.07279e-07 13.4999C3.95208e-07 13.776 0.223855 13.9999 0.499996 13.9999C0.776136 13.9999 0.999992 13.776 0.999992 13.4999L0.999992 1.49999C0.999992 1.22385 0.776136 0.999992 0.499996 0.999992ZM1.99998 6.99994C1.99998 6.44766 2.44769 5.99995 2.99998 5.99995L5.99995 5.99995C6.55223 5.99995 6.99994 6.44766 6.99994 6.99994L6.99994 7.99993C6.99994 8.55221 6.55223 8.99992 5.99995 8.99992L2.99998 8.99992C2.4477 8.99992 1.99998 8.55221 1.99998 7.99993L1.99998 6.99994ZM8.99993 5.99995C8.44765 5.99995 7.99993 6.44766 7.99993 6.99994L7.99993 7.99993C7.99993 8.55221 8.44765 8.99992 8.99993 8.99992L11.9999 8.99992C12.5522 8.99992 12.9999 8.55221 12.9999 7.99993L12.9999 6.99994C12.9999 6.44766 12.5522 5.99995 11.9999 5.99995L8.99993 5.99995Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$43 = ["color"], SpaceEvenlyVerticallyIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$43);
+	return createElement("svg", Object.assign({
+		width: "15",
+		height: "15",
+		viewBox: "0 0 15 15",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, A, { ref: _ }), createElement("path", {
+		d: "M0.999878 0.5C0.999878 0.223858 1.22374 0 1.49988 0H13.4999C13.776 0 13.9999 0.223858 13.9999 0.5C13.9999 0.776142 13.776 1 13.4999 1H1.49988C1.22374 1 0.999878 0.776142 0.999878 0.5ZM7 2C6.44772 2 6 2.44772 6 3V6C6 6.55228 6.44772 7 7 7H8C8.55228 7 9 6.55228 9 6V3C9 2.44772 8.55228 2 8 2H7ZM7 8C6.44772 8 6 8.44771 6 9V12C6 12.5523 6.44772 13 7 13H8C8.55228 13 9 12.5523 9 12V9C9 8.44772 8.55228 8 8 8H7ZM1.49988 14C1.22374 14 0.999878 14.2239 0.999878 14.5C0.999878 14.7761 1.22374 15 1.49988 15H13.4999C13.776 15 13.9999 14.7761 13.9999 14.5C13.9999 14.2239 13.776 14 13.4999 14H1.49988Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
 }), _excluded$4d = ["color"], StopIcon = /* @__PURE__ */ forwardRef(function(n, _) {
 	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$4d);
 	return createElement("svg", Object.assign({
@@ -250,6 +376,20 @@ var _excluded$F = ["color"], BoxIcon = /* @__PURE__ */ forwardRef(function(n, _)
 		fillRule: "evenodd",
 		clipRule: "evenodd"
 	}));
+}), _excluded$4O = ["color"], UploadIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$4O);
+	return createElement("svg", Object.assign({
+		width: "15",
+		height: "15",
+		viewBox: "0 0 15 15",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, A, { ref: _ }), createElement("path", {
+		d: "M7.81825 1.18188C7.64251 1.00615 7.35759 1.00615 7.18185 1.18188L4.18185 4.18188C4.00611 4.35762 4.00611 4.64254 4.18185 4.81828C4.35759 4.99401 4.64251 4.99401 4.81825 4.81828L7.05005 2.58648V9.49996C7.05005 9.74849 7.25152 9.94996 7.50005 9.94996C7.74858 9.94996 7.95005 9.74849 7.95005 9.49996V2.58648L10.1819 4.81828C10.3576 4.99401 10.6425 4.99401 10.8182 4.81828C10.994 4.64254 10.994 4.35762 10.8182 4.18188L7.81825 1.18188ZM2.5 9.99997C2.77614 9.99997 3 10.2238 3 10.5V12C3 12.5538 3.44565 13 3.99635 13H11.0012C11.5529 13 12 12.5528 12 12V10.5C12 10.2238 12.2239 9.99997 12.5 9.99997C12.7761 9.99997 13 10.2238 13 10.5V12C13 13.104 12.1062 14 11.0012 14H3.99635C2.89019 14 2 13.103 2 12V10.5C2 10.2238 2.22386 9.99997 2.5 9.99997Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
 });
 function setRef$1(n, _) {
 	if (typeof n == "function") return n(_);
@@ -664,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)), hj = Array.from(B.layers), [gj] = [...B.layersWithOutsidePointerEventsDisabled].slice(-1), _j = hj.indexOf(gj), vj = H ? hj.indexOf(H) : -1, yj = B.layersWithOutsidePointerEventsDisabled.size > 0, bj = vj >= _j, xj = 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)), 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 _ = n.target, E = [...B.branches].some((n) => n.contains(_));
-		!bj || E || (j?.(n), N?.(n), n.defaultPrevented || P?.());
-	}, W), Sj = useFocusOutside((n) => {
+		!Gj || E || (j?.(n), N?.(n), n.defaultPrevented || P?.());
+	}, W), qj = useFocusOutside((n) => {
 		let _ = n.target;
 		[...B.branches].some((n) => n.contains(_)) || (M?.(n), N?.(n), n.defaultPrevented || P?.());
 	}, W);
 	return useEscapeKeydown((n) => {
-		vj === B.layers.size - 1 && (A?.(n), !n.defaultPrevented && P && (n.preventDefault(), P()));
+		Uj === 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);
@@ -691,12 +831,12 @@ var DISMISSABLE_LAYER_NAME = "DismissableLayer", CONTEXT_UPDATE = "dismissableLa
 		...z,
 		ref: Z,
 		style: {
-			pointerEvents: yj ? bj ? "auto" : "none" : void 0,
+			pointerEvents: Wj ? Gj ? "auto" : "none" : void 0,
 			..._.style
 		},
-		onFocusCapture: composeEventHandlers(_.onFocusCapture, Sj.onFocusCapture),
-		onBlurCapture: composeEventHandlers(_.onBlurCapture, Sj.onBlurCapture),
-		onPointerDownCapture: composeEventHandlers(_.onPointerDownCapture, xj.onPointerDownCapture)
+		onFocusCapture: composeEventHandlers(_.onFocusCapture, qj.onFocusCapture),
+		onBlurCapture: composeEventHandlers(_.onBlurCapture, qj.onBlurCapture),
+		onPointerDownCapture: composeEventHandlers(_.onPointerDownCapture, Kj.onPointerDownCapture)
 	});
 });
 DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
@@ -1055,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, hj = _.inert, gj = _.allowPinchZoom, _j = _.as, vj = _j === void 0 ? "div" : _j, yj = _.gapMode, bj = __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, Bj = _.inert, Vj = _.allowPinchZoom, Hj = _.as, Uj = Hj === void 0 ? "div" : Hj, Wj = _.gapMode, Gj = __rest(_, [
 		"forwardProps",
 		"children",
 		"className",
@@ -1069,21 +1209,21 @@ var effectCar = createSidecarMedium(), nothing = function() {}, RemoveScroll = R
 		"allowPinchZoom",
 		"as",
 		"gapMode"
-	]), xj = W, Sj = useMergeRefs([O, E]), Cj = __assign$2(__assign$2({}, bj), j);
-	return React$1.createElement(React$1.Fragment, null, H && React$1.createElement(xj, {
+	]), 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, {
 		sideCar: effectCar,
 		removeScrollBar: B,
 		shards: U,
 		noRelative: G,
 		noIsolation: Z,
-		inert: hj,
+		inert: Bj,
 		setCallbacks: M,
-		allowPinchZoom: !!gj,
+		allowPinchZoom: !!Vj,
 		lockRef: O,
-		gapMode: yj
-	}), N ? React$1.cloneElement(React$1.Children.only(P), __assign$2(__assign$2({}, Cj), { ref: Sj })) : React$1.createElement(vj, __assign$2({}, Cj, {
+		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, {
 		className: z,
-		ref: Sj
+		ref: qj
 	}), P));
 });
 RemoveScroll.defaultProps = {
@@ -1273,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 hj = N.parentNode;
-		N = hj && hj.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? hj.host : hj;
+		var Bj = N.parentNode;
+		N = Bj && Bj.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? Bj.host : Bj;
 	} 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) {
@@ -1821,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: hj, y: gj, data: _j, reset: vj } = await Z({
+		let { name: j, fn: Z } = N[E], { x: Bj, y: Vj, data: Hj, reset: Uj } = await Z({
 			x: B,
 			y: H,
 			initialPlacement: O,
@@ -1835,17 +1975,17 @@ var computePosition$1 = async (n, _, E) => {
 				floating: _
 			}
 		});
-		B = hj ?? B, H = gj ?? H, W = {
+		B = Bj ?? B, H = Vj ?? H, W = {
 			...W,
 			[j]: {
 				...W[j],
-				..._j
+				...Hj
 			}
-		}, vj && G <= 50 && (G++, typeof vj == "object" && (vj.placement && (U = vj.placement), vj.rects && (z = vj.rects === !0 ? await M.getElementRects({
+		}, Uj && G <= 50 && (G++, typeof Uj == "object" && (Uj.placement && (U = Uj.placement), Uj.rects && (z = Uj.rects === !0 ? await M.getElementRects({
 			reference: n,
 			floating: _,
 			strategy: A
-		}) : vj.rects), {x: B, y: H} = computeCoordsFromPlacement(z, U, P)), E = -1);
+		}) : Uj.rects), {x: B, y: H} = computeCoordsFromPlacement(z, U, P)), E = -1);
 	}
 	return {
 		x: B,
@@ -1862,25 +2002,25 @@ async function detectOverflow$1(n, _) {
 		boundary: P,
 		rootBoundary: z,
 		strategy: N
-	})), hj = B === "floating" ? {
+	})), Bj = B === "floating" ? {
 		x: E,
 		y: O,
 		width: j.floating.width,
 		height: j.floating.height
-	} : j.reference, gj = await (A.getOffsetParent == null ? void 0 : A.getOffsetParent(M.floating)), _j = await (A.isElement == null ? void 0 : A.isElement(gj)) && await (A.getScale == null ? void 0 : A.getScale(gj)) || {
+	} : 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)) || {
 		x: 1,
 		y: 1
-	}, vj = rectToClientRect(A.convertOffsetParentRelativeRectToViewportRelativeRect ? await A.convertOffsetParentRelativeRectToViewportRelativeRect({
+	}, Uj = rectToClientRect(A.convertOffsetParentRelativeRectToViewportRelativeRect ? await A.convertOffsetParentRelativeRectToViewportRelativeRect({
 		elements: M,
-		rect: hj,
-		offsetParent: gj,
+		rect: Bj,
+		offsetParent: Vj,
 		strategy: N
-	}) : hj);
+	}) : Bj);
 	return {
-		top: (Z.top - vj.top + W.top) / _j.y,
-		bottom: (vj.bottom - Z.bottom + W.bottom) / _j.y,
-		left: (Z.left - vj.left + W.left) / _j.x,
-		right: (vj.right - Z.right + W.right) / _j.x
+		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
 	};
 }
 var arrow$2 = (n) => ({
@@ -1892,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), hj = W === "y", gj = hj ? "top" : "left", _j = hj ? "bottom" : "right", vj = hj ? "clientHeight" : "clientWidth", yj = j.reference[G] + j.reference[W] - U[W] - j.floating[G], bj = U[W] - j.reference[W], xj = await (M.getOffsetParent == null ? void 0 : M.getOffsetParent(z)), Sj = xj ? xj[vj] : 0;
-		(!Sj || !await (M.isElement == null ? void 0 : M.isElement(xj))) && (Sj = N.floating[vj] || j.floating[G]);
-		let Cj = yj / 2 - bj / 2, wj = Sj / 2 - Z[G] / 2 - 1, Tj = min(H[gj], wj), Ej = min(H[_j], wj), Dj = Tj, Oj = Sj - Z[G] - Ej, kj = Sj / 2 - Z[G] / 2 + Cj, Aj = clamp$3(Dj, kj, Oj), jj = !P.arrow && getAlignment(A) != null && kj !== Aj && j.reference[G] / 2 - (kj < Dj ? Tj : Ej) - Z[G] / 2 < 0, Mj = jj ? kj < Dj ? kj - Dj : kj - Oj : 0;
+		}, 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;
 		return {
-			[W]: U[W] + Mj,
+			[W]: U[W] + rM,
 			data: {
-				[W]: Aj,
-				centerOffset: kj - Aj - Mj,
-				...jj && { alignmentOffset: Mj }
+				[W]: tM,
+				centerOffset: eM - tM - rM,
+				...nM && { alignmentOffset: rM }
 			},
-			reset: jj
+			reset: nM
 		};
 	}
 }), flip$2 = function(n) {
@@ -1913,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 hj = getSide(O), gj = getSideAxis(M), _j = getSide(M) === M, vj = await (N.isRTL == null ? void 0 : N.isRTL(P.floating)), yj = H || (_j || !G ? [getOppositePlacement(M)] : getExpandedPlacements(M)), bj = W !== "none";
-			!H && bj && yj.push(...getOppositeAxisPlacements(M, G, W, vj));
-			let xj = [M, ...yj], Sj = await detectOverflow$1(_, Z), Cj = [], wj = A.flip?.overflows || [];
-			if (z && Cj.push(Sj[hj]), B) {
-				let n = getAlignmentSides(O, j, vj);
-				Cj.push(Sj[n[0]], Sj[n[1]]);
+			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]]);
 			}
-			if (wj = [...wj, {
+			if (Yj = [...Yj, {
 				placement: O,
-				overflows: Cj
-			}], !Cj.every((n) => n <= 0)) {
-				let n = (A.flip?.index || 0) + 1, _ = xj[n];
-				if (_ && (!(B === "alignment" && gj !== getSideAxis(_)) || wj.every((n) => getSideAxis(n.placement) === gj ? n.overflows[0] > 0 : !0))) return {
+				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 {
 					data: {
 						index: n,
-						overflows: wj
+						overflows: Yj
 					},
 					reset: { placement: _ }
 				};
-				let E = wj.filter((n) => n.overflows[0] <= 0).sort((n, _) => n.overflows[1] - _.overflows[1])[0]?.placement;
+				let E = Yj.filter((n) => n.overflows[0] <= 0).sort((n, _) => n.overflows[1] - _.overflows[1])[0]?.placement;
 				if (!E) switch (U) {
 					case "bestFit": {
-						let n = wj.filter((n) => {
-							if (bj) {
+						let n = Yj.filter((n) => {
+							if (Gj) {
 								let _ = getSideAxis(n.placement);
-								return _ === gj || _ === "y";
+								return _ === Vj || _ === "y";
 							}
 							return !0;
 						}).map((n) => [n.placement, n.overflows.filter((n) => n > 0).reduce((n, _) => n + _, 0)]).sort((n, _) => n[1] - _[1])[0]?.[0];
@@ -2081,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, _), hj = typeof Z == "number" ? {
+			}, H = getSideAxis(A), U = getOppositeAxis(H), W = B[U], G = B[H], Z = evaluate(N, _), Bj = typeof Z == "number" ? {
 				mainAxis: Z,
 				crossAxis: 0
 			} : {
@@ -2090,11 +2230,11 @@ var offset$2 = function(n) {
 				...Z
 			};
 			if (P) {
-				let n = U === "y" ? "height" : "width", _ = j.reference[U] - j.floating[n] + hj.mainAxis, E = j.reference[U] + j.reference[n] - hj.mainAxis;
+				let n = U === "y" ? "height" : "width", _ = j.reference[U] - j.floating[n] + Bj.mainAxis, E = j.reference[U] + j.reference[n] - Bj.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 : hj.crossAxis), O = j.reference[H] + j.reference[n] + (_ ? 0 : M.offset?.[H] || 0) - (_ ? hj.crossAxis : 0);
+				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);
 				G < E ? G = E : G > O && (G = O);
 			}
 			return {
@@ -2109,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, hj, gj;
-			H === "top" || H === "bottom" ? (hj = H, gj = U === (await (M.isRTL == null ? void 0 : M.isRTL(N.floating)) ? "start" : "end") ? "left" : "right") : (gj = H, hj = U === "end" ? "top" : "bottom");
-			let _j = Z - B.top - B.bottom, vj = G - B.left - B.right, yj = min(Z - B[hj], _j), bj = min(G - B[gj], vj), xj = !_.middlewareData.shift, Sj = yj, Cj = bj;
-			if ((E = _.middlewareData.shift) != null && E.enabled.x && (Cj = vj), (O = _.middlewareData.shift) != null && O.enabled.y && (Sj = _j), xj && !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, 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 n = max(B.left, 0), _ = max(B.right, 0), E = max(B.top, 0), O = max(B.bottom, 0);
-				W ? Cj = G - 2 * (n !== 0 || _ !== 0 ? n + _ : max(B.left, B.right)) : Sj = Z - 2 * (E !== 0 || O !== 0 ? E + O : max(B.top, B.bottom));
+				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));
 			}
 			await P({
 				..._,
-				availableWidth: Cj,
-				availableHeight: Sj
+				availableWidth: Jj,
+				availableHeight: qj
 			});
-			let wj = await M.getDimensions(N.floating);
-			return G !== wj.width || Z !== wj.height ? { reset: { rects: !0 } } : {};
+			let Yj = await M.getDimensions(N.floating);
+			return G !== Yj.width || Z !== Yj.height ? { reset: { rects: !0 } } : {};
 		}
 	};
 };
@@ -2506,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)), hj = floor(A.clientHeight - (H + W)), gj = floor(B), _j = {
-			rootMargin: -G + "px " + -Z + "px " + -hj + "px " + -gj + "px",
+		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",
 			threshold: max(0, min(1, P)) || 1
-		}, vj = !0;
-		function yj(_) {
+		}, Uj = !0;
+		function Wj(_) {
 			let E = _[0].intersectionRatio;
 			if (E !== P) {
-				if (!vj) return M();
+				if (!Uj) return M();
 				E ? M(!1, E) : O = setTimeout(() => {
 					M(!1, 1e-7);
 				}, 1e3);
 			}
-			E === 1 && !rectsAreEqual(z, n.getBoundingClientRect()) && M(), vj = !1;
+			E === 1 && !rectsAreEqual(z, n.getBoundingClientRect()) && M(), Uj = !1;
 		}
 		try {
-			E = new IntersectionObserver(yj, {
-				..._j,
+			E = new IntersectionObserver(Wj, {
+				...Hj,
 				root: A.ownerDocument
 			});
 		} catch {
-			E = new IntersectionObserver(yj, _j);
+			E = new IntersectionObserver(Wj, Hj);
 		}
 		E.observe(n);
 	}
@@ -2547,10 +2687,10 @@ function autoUpdate(n, _, E, O) {
 		})), E();
 	}), z && !P && W.observe(z), W.observe(_));
 	let G, Z = P ? getBoundingClientRect(n) : null;
-	P && hj();
-	function hj() {
+	P && Bj();
+	function Bj() {
 		let _ = getBoundingClientRect(n);
-		Z && !rectsAreEqual(Z, _) && E(), Z = _, G = requestAnimationFrame(hj);
+		Z && !rectsAreEqual(Z, _) && E(), Z = _, G = requestAnimationFrame(Bj);
 	}
 	return E(), () => {
 		var n;
@@ -2617,23 +2757,23 @@ function useFloating(_) {
 		isPositioned: !1
 	}), [W, G] = React$1.useState(A);
 	deepEqual(W, A) || G(A);
-	let [Z, hj] = React$1.useState(null), [gj, _j] = React$1.useState(null), vj = React$1.useCallback((n) => {
-		n !== Cj.current && (Cj.current = n, hj(n));
-	}, []), yj = React$1.useCallback((n) => {
-		n !== wj.current && (wj.current = n, _j(n));
-	}, []), xj = M || Z, Sj = N || gj, Cj = React$1.useRef(null), wj = React$1.useRef(null), Tj = React$1.useRef(H), Ej = z != null, Dj = useLatestRef(z), Oj = useLatestRef(j), kj = useLatestRef(B), Aj = React$1.useCallback(() => {
-		if (!Cj.current || !wj.current) return;
+	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 n = {
 			placement: E,
 			strategy: O,
 			middleware: W
 		};
-		Oj.current && (n.platform = Oj.current), computePosition(Cj.current, wj.current, n).then((n) => {
+		$j.current && (n.platform = $j.current), computePosition(Jj.current, Yj.current, n).then((n) => {
 			let _ = {
 				...n,
-				isPositioned: kj.current !== !1
+				isPositioned: eM.current !== !1
 			};
-			jj.current && !deepEqual(Tj.current, _) && (Tj.current = _, ReactDOM$1.flushSync(() => {
+			nM.current && !deepEqual(Xj.current, _) && (Xj.current = _, ReactDOM$1.flushSync(() => {
 				U(_);
 			}));
 		});
@@ -2641,50 +2781,50 @@ function useFloating(_) {
 		W,
 		E,
 		O,
-		Oj,
-		kj
+		$j,
+		eM
 	]);
 	index(() => {
-		B === !1 && Tj.current.isPositioned && (Tj.current.isPositioned = !1, U((n) => ({
+		B === !1 && Xj.current.isPositioned && (Xj.current.isPositioned = !1, U((n) => ({
 			...n,
 			isPositioned: !1
 		})));
 	}, [B]);
-	let jj = React$1.useRef(!1);
-	index(() => (jj.current = !0, () => {
-		jj.current = !1;
+	let nM = React$1.useRef(!1);
+	index(() => (nM.current = !0, () => {
+		nM.current = !1;
 	}), []), index(() => {
-		if (xj && (Cj.current = xj), Sj && (wj.current = Sj), xj && Sj) {
-			if (Dj.current) return Dj.current(xj, Sj, Aj);
-			Aj();
+		if (Kj && (Jj.current = Kj), qj && (Yj.current = qj), Kj && qj) {
+			if (Qj.current) return Qj.current(Kj, qj, tM);
+			tM();
 		}
 	}, [
-		xj,
-		Sj,
-		Aj,
-		Dj,
-		Ej
+		Kj,
+		qj,
+		tM,
+		Qj,
+		Zj
 	]);
-	let Mj = React$1.useMemo(() => ({
-		reference: Cj,
-		floating: wj,
-		setReference: vj,
-		setFloating: yj
-	}), [vj, yj]), Nj = React$1.useMemo(() => ({
-		reference: xj,
-		floating: Sj
-	}), [xj, Sj]), Pj = React$1.useMemo(() => {
+	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 n = {
 			position: O,
 			left: 0,
 			top: 0
 		};
-		if (!Nj.floating) return n;
-		let _ = roundByDPR(Nj.floating, H.x), E = roundByDPR(Nj.floating, H.y);
+		if (!iM.floating) return n;
+		let _ = roundByDPR(iM.floating, H.x), E = roundByDPR(iM.floating, H.y);
 		return P ? {
 			...n,
 			transform: "translate(" + _ + "px, " + E + "px)",
-			...getDPR(Nj.floating) >= 1.5 && { willChange: "transform" }
+			...getDPR(iM.floating) >= 1.5 && { willChange: "transform" }
 		} : {
 			position: O,
 			left: _,
@@ -2693,22 +2833,22 @@ function useFloating(_) {
 	}, [
 		O,
 		P,
-		Nj.floating,
+		iM.floating,
 		H.x,
 		H.y
 	]);
 	return React$1.useMemo(() => ({
 		...H,
-		update: Aj,
-		refs: Mj,
-		elements: Nj,
-		floatingStyles: Pj
+		update: tM,
+		refs: rM,
+		elements: iM,
+		floatingStyles: aM
 	}), [
 		H,
-		Aj,
-		Mj,
-		Nj,
-		Pj
+		tM,
+		rM,
+		iM,
+		aM
 	]);
 }
 var arrow$1$1 = (n) => {
@@ -2785,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, ...hj } = _, gj = usePopperContext(CONTENT_NAME$6, O), [_j, vj] = React$1.useState(null), yj = useComposedRefs$1(E, (n) => vj(n)), [bj, xj] = React$1.useState(null), Sj = useSize(bj), Cj = Sj?.width ?? 0, Tj = Sj?.height ?? 0, Ej = A + (M === "center" ? "" : "-" + M), Dj = 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, ...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 : {
 		top: 0,
 		right: 0,
 		bottom: 0,
 		left: 0,
 		...H
-	}, Oj = Array.isArray(B) ? B : [B], kj = Oj.length > 0, Aj = {
-		padding: Dj,
-		boundary: Oj.filter(isNotNull$2),
-		altBoundary: kj
-	}, { refs: jj, floatingStyles: Mj, placement: Nj, isPositioned: Pj, middlewareData: Fj } = useFloating({
+	}, $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({
 		strategy: "fixed",
-		placement: Ej,
+		placement: Zj,
 		whileElementsMounted: (...n) => autoUpdate(...n, { animationFrame: G === "always" }),
-		elements: { reference: gj.anchor },
+		elements: { reference: Vj.anchor },
 		middleware: [
 			offset({
-				mainAxis: j + Tj,
+				mainAxis: j + Xj,
 				alignmentAxis: N
 			}),
 			z && shift({
 				mainAxis: !0,
 				crossAxis: !1,
 				limiter: U === "partial" ? limitShift() : void 0,
-				...Aj
+				...tM
 			}),
-			z && flip({ ...Aj }),
+			z && flip({ ...tM }),
 			size({
-				...Aj,
+				...tM,
 				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`);
 				}
 			}),
-			bj && arrow({
-				element: bj,
+			Gj && arrow({
+				element: Gj,
 				padding: P
 			}),
 			transformOrigin({
-				arrowWidth: Cj,
-				arrowHeight: Tj
+				arrowWidth: Jj,
+				arrowHeight: Xj
 			}),
 			W && hide({
 				strategy: "referenceHidden",
-				...Aj
+				...tM
 			})
 		]
-	}), [Ij, Lj] = getSideAndAlignFromPlacement(Nj), Rj = useCallbackRef(Z);
+	}), [sM, cM] = getSideAndAlignFromPlacement(iM), lM = useCallbackRef(Z);
 	useLayoutEffect2(() => {
-		Pj && Rj?.();
-	}, [Pj, Rj]);
-	let zj = Fj.arrow?.x, Bj = Fj.arrow?.y, Vj = Fj.arrow?.centerOffset !== 0, [Hj, Uj] = React$1.useState();
+		aM && lM?.();
+	}, [aM, lM]);
+	let uM = oM.arrow?.x, dM = oM.arrow?.y, fM = oM.arrow?.centerOffset !== 0, [pM, mM] = React$1.useState();
 	return useLayoutEffect2(() => {
-		_j && Uj(window.getComputedStyle(_j).zIndex);
-	}, [_j]), /* @__PURE__ */ jsx("div", {
-		ref: jj.setFloating,
+		Hj && mM(window.getComputedStyle(Hj).zIndex);
+	}, [Hj]), /* @__PURE__ */ jsx("div", {
+		ref: nM.setFloating,
 		"data-radix-popper-content-wrapper": "",
 		style: {
-			...Mj,
-			transform: Pj ? Mj.transform : "translate(0, -200%)",
+			...rM,
+			transform: aM ? rM.transform : "translate(0, -200%)",
 			minWidth: "max-content",
-			zIndex: Hj,
-			"--radix-popper-transform-origin": [Fj.transformOrigin?.x, Fj.transformOrigin?.y].join(" "),
-			...Fj.hide?.referenceHidden && {
+			zIndex: pM,
+			"--radix-popper-transform-origin": [oM.transformOrigin?.x, oM.transformOrigin?.y].join(" "),
+			...oM.hide?.referenceHidden && {
 				visibility: "hidden",
 				pointerEvents: "none"
 			}
@@ -2856,19 +2996,19 @@ var CONTENT_NAME$6 = "PopperContent", [PopperContentProvider, useContentContext]
 		dir: _.dir,
 		children: /* @__PURE__ */ jsx(PopperContentProvider, {
 			scope: O,
-			placedSide: Ij,
-			onArrowChange: xj,
-			arrowX: zj,
-			arrowY: Bj,
-			shouldHideArrow: Vj,
+			placedSide: sM,
+			onArrowChange: Kj,
+			arrowX: uM,
+			arrowY: dM,
+			shouldHideArrow: fM,
 			children: /* @__PURE__ */ jsx(Primitive.div, {
-				"data-side": Ij,
-				"data-align": Lj,
-				...hj,
-				ref: yj,
+				"data-side": sM,
+				"data-align": cM,
+				...Bj,
+				ref: Wj,
 				style: {
-					...hj.style,
-					animation: Pj ? void 0 : "none"
+					...Bj.style,
+					animation: aM ? void 0 : "none"
 				}
 			})
 		})
@@ -2951,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), [hj, gj] = 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), [Bj, Vj] = useControllableState({
 		prop: N,
 		defaultProp: P ?? null,
 		onChange: z,
 		caller: GROUP_NAME$3
-	}), [_j, vj] = React$1.useState(!1), yj = useCallbackRef(B), bj = useCollection$1(O), xj = React$1.useRef(!1), [Sj, Cj] = React$1.useState(0);
+	}), [Hj, Uj] = React$1.useState(!1), Wj = useCallbackRef(B), Gj = useCollection$1(O), Kj = React$1.useRef(!1), [qj, Jj] = React$1.useState(0);
 	return React$1.useEffect(() => {
 		let n = W.current;
-		if (n) return n.addEventListener(ENTRY_FOCUS, yj), () => n.removeEventListener(ENTRY_FOCUS, yj);
-	}, [yj]), /* @__PURE__ */ jsx(RovingFocusProvider, {
+		if (n) return n.addEventListener(ENTRY_FOCUS, Wj), () => n.removeEventListener(ENTRY_FOCUS, Wj);
+	}, [Wj]), /* @__PURE__ */ jsx(RovingFocusProvider, {
 		scope: O,
 		orientation: A,
 		dir: Z,
 		loop: j,
-		currentTabStopId: hj,
-		onItemFocus: React$1.useCallback((n) => gj(n), [gj]),
-		onItemShiftTab: React$1.useCallback(() => vj(!0), []),
-		onFocusableItemAdd: React$1.useCallback(() => Cj((n) => n + 1), []),
-		onFocusableItemRemove: React$1.useCallback(() => Cj((n) => n - 1), []),
+		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), []),
 		children: /* @__PURE__ */ jsx(Primitive.div, {
-			tabIndex: _j || Sj === 0 ? -1 : 0,
+			tabIndex: Hj || qj === 0 ? -1 : 0,
 			"data-orientation": A,
 			...U,
 			ref: G,
@@ -2980,28 +3120,28 @@ var RovingFocusGroupImpl = React$1.forwardRef((_, E) => {
 				..._.style
 			},
 			onMouseDown: composeEventHandlers(_.onMouseDown, () => {
-				xj.current = !0;
+				Kj.current = !0;
 			}),
 			onFocus: composeEventHandlers(_.onFocus, (n) => {
-				let _ = !xj.current;
-				if (n.target === n.currentTarget && _ && !_j) {
+				let _ = !Kj.current;
+				if (n.target === n.currentTarget && _ && !Hj) {
 					let _ = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
 					if (n.currentTarget.dispatchEvent(_), !_.defaultPrevented) {
-						let n = bj().filter((n) => n.focusable);
+						let n = Gj().filter((n) => n.focusable);
 						focusFirst$1([
 							n.find((n) => n.active),
-							n.find((n) => n.id === hj),
+							n.find((n) => n.id === Bj),
 							...n
 						].filter(Boolean).map((n) => n.ref.current), H);
 					}
 				}
-				xj.current = !1;
+				Kj.current = !1;
 			}),
-			onBlur: composeEventHandlers(_.onBlur, () => vj(!1))
+			onBlur: composeEventHandlers(_.onBlur, () => Uj(!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: hj } = 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: Bj } = H;
 	return React$1.useEffect(() => {
 		if (A) return G(), () => Z();
 	}, [
@@ -3044,7 +3184,7 @@ var RovingFocusGroupImpl = React$1.forwardRef((_, E) => {
 			}),
 			children: typeof N == "function" ? N({
 				isCurrentTabStop: U,
-				hasTabStop: hj != null
+				hasTabStop: Bj != null
 			}) : N
 		})
 	});
@@ -3195,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, ...hj } = _, gj = useMenuContext(CONTENT_NAME$5, O), _j = useMenuRootContext(CONTENT_NAME$5, O), vj = usePopperScope$2(O), yj = useRovingFocusGroupScope$1(O), bj = useCollection(O), [xj, Sj] = React$1.useState(null), Cj = React$1.useRef(null), Tj = useComposedRefs$1(E, Cj, gj.onContentChange), Ej = React$1.useRef(0), Dj = React$1.useRef(""), Oj = React$1.useRef(0), kj = React$1.useRef(null), Aj = React$1.useRef("right"), jj = React$1.useRef(0), Mj = Z ? Combination_default : React$1.Fragment, Nj = 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, ...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 ? {
 		as: Slot$1,
 		allowPinchZoom: !0
-	} : void 0, Pj = (n) => {
-		let _ = Dj.current + n, E = bj().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, 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;
 		(function n(_) {
-			Dj.current = _, window.clearTimeout(Ej.current), _ !== "" && (Ej.current = window.setTimeout(() => n(""), 1e3));
+			Qj.current = _, window.clearTimeout(Zj.current), _ !== "" && (Zj.current = window.setTimeout(() => n(""), 1e3));
 		})(_), M && setTimeout(() => M.focus());
 	};
-	React$1.useEffect(() => () => window.clearTimeout(Ej.current), []), useFocusGuards();
-	let Fj = React$1.useCallback((n) => Aj.current === kj.current?.side && isPointerInGraceArea(n, kj.current?.area), []);
+	React$1.useEffect(() => () => window.clearTimeout(Zj.current), []), useFocusGuards();
+	let oM = React$1.useCallback((n) => tM.current === eM.current?.side && isPointerInGraceArea(n, eM.current?.area), []);
 	return /* @__PURE__ */ jsx(MenuContentProvider, {
 		scope: O,
-		searchRef: Dj,
+		searchRef: Qj,
 		onItemEnter: React$1.useCallback((n) => {
-			Fj(n) && n.preventDefault();
-		}, [Fj]),
+			oM(n) && n.preventDefault();
+		}, [oM]),
 		onItemLeave: React$1.useCallback((n) => {
-			Fj(n) || (Cj.current?.focus(), Sj(null));
-		}, [Fj]),
+			oM(n) || (Jj.current?.focus(), qj(null));
+		}, [oM]),
 		onTriggerLeave: React$1.useCallback((n) => {
-			Fj(n) && n.preventDefault();
-		}, [Fj]),
-		pointerGraceTimerRef: Oj,
+			oM(n) && n.preventDefault();
+		}, [oM]),
+		pointerGraceTimerRef: $j,
 		onPointerGraceIntentChange: React$1.useCallback((n) => {
-			kj.current = n;
+			eM.current = n;
 		}, []),
-		children: /* @__PURE__ */ jsx(Mj, {
-			...Nj,
+		children: /* @__PURE__ */ jsx(rM, {
+			...iM,
 			children: /* @__PURE__ */ jsx(FocusScope, {
 				asChild: !0,
 				trapped: j,
 				onMountAutoFocus: composeEventHandlers(M, (n) => {
-					n.preventDefault(), Cj.current?.focus({ preventScroll: !0 });
+					n.preventDefault(), Jj.current?.focus({ preventScroll: !0 });
 				}),
 				onUnmountAutoFocus: N,
 				children: /* @__PURE__ */ jsx(DismissableLayer, {
@@ -3241,44 +3381,44 @@ var CONTENT_NAME$5 = "MenuContent", [MenuContentProvider, useMenuContentContext]
 					onDismiss: G,
 					children: /* @__PURE__ */ jsx(Root$2, {
 						asChild: !0,
-						...yj,
-						dir: _j.dir,
+						...Wj,
+						dir: Hj.dir,
 						orientation: "vertical",
 						loop: A,
-						currentTabStopId: xj,
-						onCurrentTabStopIdChange: Sj,
+						currentTabStopId: Kj,
+						onCurrentTabStopIdChange: qj,
 						onEntryFocus: composeEventHandlers(z, (n) => {
-							_j.isUsingKeyboardRef.current || n.preventDefault();
+							Hj.isUsingKeyboardRef.current || n.preventDefault();
 						}),
 						preventScrollOnEntryFocus: !0,
 						children: /* @__PURE__ */ jsx(Content$1, {
 							role: "menu",
 							"aria-orientation": "vertical",
-							"data-state": getOpenState(gj.open),
+							"data-state": getOpenState(Vj.open),
 							"data-radix-menu-content": "",
-							dir: _j.dir,
-							...vj,
-							...hj,
-							ref: Tj,
+							dir: Hj.dir,
+							...Uj,
+							...Bj,
+							ref: Xj,
 							style: {
 								outline: "none",
-								...hj.style
+								...Bj.style
 							},
-							onKeyDown: composeEventHandlers(hj.onKeyDown, (n) => {
+							onKeyDown: composeEventHandlers(Bj.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 && Pj(n.key));
-								let A = Cj.current;
+								_ && (n.key === "Tab" && n.preventDefault(), !E && O && aM(n.key));
+								let A = Jj.current;
 								if (n.target !== A || !FIRST_LAST_KEYS.includes(n.key)) return;
 								n.preventDefault();
-								let j = bj().filter((n) => !n.disabled).map((n) => n.ref.current);
+								let j = Gj().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(Ej.current), Dj.current = "");
+								n.currentTarget.contains(n.target) || (window.clearTimeout(Zj.current), Qj.current = "");
 							}),
 							onPointerMove: composeEventHandlers(_.onPointerMove, whenMouse((n) => {
-								let _ = n.target, E = jj.current !== n.clientX;
-								n.currentTarget.contains(_) && E && (Aj.current = n.clientX > jj.current ? "right" : "left", jj.current = n.clientX);
+								let _ = n.target, E = nM.current !== n.clientX;
+								n.currentTarget.contains(_) && E && (tM.current = n.clientX > nM.current ? "right" : "left", nM.current = n.clientX);
 							}))
 						})
 					})
@@ -4226,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), [hj, gj] = React$1.useState(null), [_j, vj] = React$1.useState(0), [yj, bj] = React$1.useState(0), [xj, Sj] = React$1.useState(!1), [Cj, Tj] = React$1.useState(!1), Ej = useComposedRefs$1(E, (n) => z(n)), Dj = 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), [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);
 	return /* @__PURE__ */ jsx(ScrollAreaProvider, {
 		scope: O,
 		type: A,
-		dir: Dj,
+		dir: Qj,
 		scrollHideDelay: M,
 		scrollArea: P,
 		viewport: B,
@@ -4239,22 +4379,22 @@ var SCROLL_AREA_NAME = "ScrollArea", [createScrollAreaContext, createScrollAreaS
 		onContentChange: W,
 		scrollbarX: G,
 		onScrollbarXChange: Z,
-		scrollbarXEnabled: xj,
-		onScrollbarXEnabledChange: Sj,
-		scrollbarY: hj,
-		onScrollbarYChange: gj,
-		scrollbarYEnabled: Cj,
-		onScrollbarYEnabledChange: Tj,
-		onCornerWidthChange: vj,
-		onCornerHeightChange: bj,
+		scrollbarXEnabled: Kj,
+		onScrollbarXEnabledChange: qj,
+		scrollbarY: Bj,
+		onScrollbarYChange: Vj,
+		scrollbarYEnabled: Jj,
+		onScrollbarYEnabledChange: Xj,
+		onCornerWidthChange: Uj,
+		onCornerHeightChange: Gj,
 		children: /* @__PURE__ */ jsx(Primitive.div, {
-			dir: Dj,
+			dir: Qj,
 			...N,
-			ref: Ej,
+			ref: Zj,
 			style: {
 				position: "relative",
-				"--radix-scroll-area-corner-width": _j + "px",
-				"--radix-scroll-area-corner-height": yj + "px",
+				"--radix-scroll-area-corner-width": Hj + "px",
+				"--radix-scroll-area-corner-height": Wj + "px",
 				..._.style
 			}
 		})
@@ -4525,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, hj] = React$1.useState(null), gj = useComposedRefs$1(E, (n) => hj(n)), _j = React$1.useRef(null), vj = React$1.useRef(""), yj = G.viewport, bj = A.content - A.viewport, xj = useCallbackRef(H), Sj = useCallbackRef(z), Cj = useDebounceCallback(U, 10);
-	function Tj(n) {
-		_j.current && B({
-			x: n.clientX - _j.current.left,
-			y: n.clientY - _j.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, 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
 		});
 	}
 	return React$1.useEffect(() => {
 		let n = (n) => {
 			let _ = n.target;
-			Z?.contains(_) && xj(n, bj);
+			Z?.contains(_) && Kj(n, Gj);
 		};
 		return document.addEventListener("wheel", n, { passive: !1 }), () => document.removeEventListener("wheel", n, { passive: !1 });
 	}, [
-		yj,
+		Wj,
 		Z,
-		bj,
-		xj
-	]), React$1.useEffect(Sj, [A, Sj]), useResizeObserver(Z, Cj), useResizeObserver(G.content, Cj), /* @__PURE__ */ jsx(ScrollbarProvider, {
+		Gj,
+		Kj
+	]), React$1.useEffect(qj, [A, qj]), useResizeObserver(Z, Jj), useResizeObserver(G.content, Jj), /* @__PURE__ */ jsx(ScrollbarProvider, {
 		scope: O,
 		scrollbar: Z,
 		hasThumb: j,
 		onThumbChange: useCallbackRef(M),
 		onThumbPointerUp: useCallbackRef(N),
-		onThumbPositionChange: Sj,
+		onThumbPositionChange: qj,
 		onThumbPointerDown: useCallbackRef(P),
 		children: /* @__PURE__ */ jsx(Primitive.div, {
 			...W,
-			ref: gj,
+			ref: Vj,
 			style: {
 				position: "absolute",
 				...W.style
 			},
 			onPointerDown: composeEventHandlers(_.onPointerDown, (n) => {
-				n.button === 0 && (n.target.setPointerCapture(n.pointerId), _j.current = Z.getBoundingClientRect(), vj.current = document.body.style.webkitUserSelect, document.body.style.webkitUserSelect = "none", G.viewport && (G.viewport.style.scrollBehavior = "auto"), Tj(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));
 			}),
-			onPointerMove: composeEventHandlers(_.onPointerMove, Tj),
+			onPointerMove: composeEventHandlers(_.onPointerMove, Xj),
 			onPointerUp: composeEventHandlers(_.onPointerUp, (n) => {
 				let _ = n.target;
-				_.hasPointerCapture(n.pointerId) && _.releasePointerCapture(n.pointerId), document.body.style.webkitUserSelect = vj.current, G.viewport && (G.viewport.style.scrollBehavior = ""), _j.current = null;
+				_.hasPointerCapture(n.pointerId) && _.releasePointerCapture(n.pointerId), document.body.style.webkitUserSelect = Uj.current, G.viewport && (G.viewport.style.scrollBehavior = ""), Hj.current = null;
 			})
 		})
 	});
@@ -4706,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)), hj = React$1.useRef(!1), gj = W ? H || !!W.closest("form") : !0, [_j, vj] = 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)), Bj = React$1.useRef(!1), Vj = W ? H || !!W.closest("form") : !0, [Hj, Uj] = useControllableState({
 		prop: j,
 		defaultProp: M ?? !1,
 		onChange: B,
@@ -4714,28 +4854,28 @@ var Root$1 = ScrollArea, Viewport = ScrollAreaViewport, Scrollbar = ScrollAreaSc
 	});
 	return /* @__PURE__ */ jsxs(SwitchProvider, {
 		scope: O,
-		checked: _j,
+		checked: Hj,
 		disabled: P,
 		children: [/* @__PURE__ */ jsx(Primitive.button, {
 			type: "button",
 			role: "switch",
-			"aria-checked": _j,
+			"aria-checked": Hj,
 			"aria-required": N,
-			"data-state": getState(_j),
+			"data-state": getState(Hj),
 			"data-disabled": P ? "" : void 0,
 			disabled: P,
 			value: z,
 			...U,
 			ref: Z,
 			onClick: composeEventHandlers(_.onClick, (n) => {
-				vj((n) => !n), gj && (hj.current = n.isPropagationStopped(), hj.current || n.stopPropagation());
+				Uj((n) => !n), Vj && (Bj.current = n.isPropagationStopped(), Bj.current || n.stopPropagation());
 			})
-		}), gj && /* @__PURE__ */ jsx(SwitchBubbleInput, {
+		}), Vj && /* @__PURE__ */ jsx(SwitchBubbleInput, {
 			control: W,
-			bubbles: !hj.current,
+			bubbles: !Bj.current,
 			name: A,
 			value: z,
-			checked: _j,
+			checked: Hj,
 			required: N,
 			disabled: P,
 			form: H,
@@ -4919,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, hj = P ?? z.delayDuration, gj = React$1.useRef(!1), [_j, vj] = 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, Bj = P ?? z.delayDuration, Vj = React$1.useRef(!1), [Hj, Uj] = useControllableState({
 		prop: A,
 		defaultProp: j ?? !1,
 		onChange: (n) => {
 			n ? (z.onOpen(), document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN))) : z.onClose(), M?.(n);
 		},
 		caller: TOOLTIP_NAME
-	}), yj = React$1.useMemo(() => _j ? gj.current ? "delayed-open" : "instant-open" : "closed", [_j]), bj = React$1.useCallback(() => {
-		window.clearTimeout(G.current), G.current = 0, gj.current = !1, vj(!0);
-	}, [vj]), xj = React$1.useCallback(() => {
-		window.clearTimeout(G.current), G.current = 0, vj(!1);
-	}, [vj]), Sj = React$1.useCallback(() => {
+	}), 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(() => {
 		window.clearTimeout(G.current), G.current = window.setTimeout(() => {
-			gj.current = !0, vj(!0), G.current = 0;
-		}, hj);
-	}, [hj, vj]);
+			Vj.current = !0, Uj(!0), G.current = 0;
+		}, Bj);
+	}, [Bj, Uj]);
 	return React$1.useEffect(() => () => {
 		G.current &&= (window.clearTimeout(G.current), 0);
 	}, []), /* @__PURE__ */ jsx(Root2$4, {
@@ -4942,22 +5082,22 @@ var TOOLTIP_NAME = "Tooltip", [TooltipContextProvider, useTooltipContext] = crea
 		children: /* @__PURE__ */ jsx(TooltipContextProvider, {
 			scope: E,
 			contentId: W,
-			open: _j,
-			stateAttribute: yj,
+			open: Hj,
+			stateAttribute: Wj,
 			trigger: H,
 			onTriggerChange: U,
 			onTriggerEnter: React$1.useCallback(() => {
-				z.isOpenDelayedRef.current ? Sj() : bj();
+				z.isOpenDelayedRef.current ? qj() : Gj();
 			}, [
 				z.isOpenDelayedRef,
-				Sj,
-				bj
+				qj,
+				Gj
 			]),
 			onTriggerLeave: React$1.useCallback(() => {
-				Z ? xj() : (window.clearTimeout(G.current), G.current = 0);
-			}, [xj, Z]),
-			onOpen: bj,
-			onClose: xj,
+				Z ? Kj() : (window.clearTimeout(G.current), G.current = 0);
+			}, [Kj, Z]),
+			onOpen: Gj,
+			onClose: Kj,
 			disableHoverableContent: Z,
 			children: O
 		})
@@ -5770,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, hj] = React$1.useState(j);
-	React$1.useEffect(() => hj(j), [j]);
-	let [gj, _j] = React$1.useState(M);
-	React$1.useEffect(() => _j(M), [M]);
-	let [vj, yj] = React$1.useState(N);
-	React$1.useEffect(() => yj(N), [N]);
-	let [bj, xj] = React$1.useState(P);
-	return React$1.useEffect(() => xj(P), [P]), React$1.createElement(A$2, {
+	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, {
 		...B,
 		ref: E,
 		isRoot: !0,
@@ -5785,62 +5925,62 @@ var I$3 = React$1.forwardRef((_, E) => {
 		appearance: H,
 		accentColor: W,
 		grayColor: Z,
-		panelBackground: gj,
-		radius: vj,
-		scaling: bj,
+		panelBackground: Vj,
+		radius: Uj,
+		scaling: Gj,
 		onAppearanceChange: U,
 		onAccentColorChange: G,
-		onGrayColorChange: hj,
-		onPanelBackgroundChange: _j,
-		onRadiusChange: yj,
-		onScalingChange: xj
+		onGrayColorChange: Bj,
+		onPanelBackgroundChange: Hj,
+		onRadiusChange: Wj,
+		onScalingChange: Kj
 	});
 });
 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: hj = d$5, onRadiusChange: gj = d$5, onScalingChange: _j = d$5, ...vj } = _, yj = A ? Slot$3 : "div", bj = z === "auto" ? a$12(P) : z, xj = _.appearance === "light" || _.appearance === "dark", Sj = M === void 0 ? j || xj : 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: 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;
 	return React$1.createElement(P$3.Provider, { value: React$1.useMemo(() => ({
 		appearance: N,
 		accentColor: P,
 		grayColor: z,
-		resolvedGrayColor: bj,
+		resolvedGrayColor: Gj,
 		panelBackground: B,
 		radius: H,
 		scaling: U,
 		onAppearanceChange: W,
 		onAccentColorChange: G,
 		onGrayColorChange: Z,
-		onPanelBackgroundChange: hj,
-		onRadiusChange: gj,
-		onScalingChange: _j
+		onPanelBackgroundChange: Bj,
+		onRadiusChange: Vj,
+		onScalingChange: Hj
 	}), [
 		N,
 		P,
 		z,
-		bj,
+		Gj,
 		B,
 		H,
 		U,
 		W,
 		G,
 		Z,
-		hj,
-		gj,
-		_j
-	]) }, React$1.createElement(yj, {
+		Bj,
+		Vj,
+		Hj
+	]) }, React$1.createElement(Wj, {
 		"data-is-root-theme": j ? "true" : "false",
 		"data-accent-color": P,
-		"data-gray-color": bj,
-		"data-has-background": Sj ? "true" : "false",
+		"data-gray-color": Gj,
+		"data-has-background": qj ? "true" : "false",
 		"data-panel-background": B,
 		"data-radius": H,
 		"data-scaling": U,
 		ref: E,
-		...vj,
+		...Uj,
 		className: (0, import_classnames$18.default)("radix-themes", {
 			light: N === "light",
 			dark: N === "dark"
-		}, vj.className)
+		}, Uj.className)
 	}));
 });
 A$2.displayName = "ThemeImpl";
@@ -6612,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: hj = t$3.scrollbars.default, ...gj } = 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: Bj = t$3.scrollbars.default, ...Vj } = O;
 	return React$1.createElement(Root$1, {
 		type: H,
 		scrollHideDelay: U,
@@ -6623,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, {
-		...gj,
+		...Vj,
 		ref: E,
 		className: "rt-ScrollAreaViewport"
-	}, _), React$1.createElement("div", { className: "rt-ScrollAreaViewportFocusRing" }), hj === "vertical" ? null : React$1.createElement(Scrollbar, {
+	}, _), React$1.createElement("div", { className: "rt-ScrollAreaViewportFocusRing" }), Bj === "vertical" ? null : React$1.createElement(Scrollbar, {
 		"data-radius": Z,
 		orientation: "horizontal",
 		className: (0, import_classnames$9.default)("rt-ScrollAreaScrollbar", g$3({
@@ -6634,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" })), hj === "horizontal" ? null : React$1.createElement(Scrollbar, {
+	}, React$1.createElement(Thumb$1, { className: "rt-ScrollAreaThumb" })), Bj === "horizontal" ? null : React$1.createElement(Scrollbar, {
 		"data-radius": Z,
 		orientation: "vertical",
 		className: (0, import_classnames$9.default)("rt-ScrollAreaScrollbar", g$3({
@@ -6642,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" })), hj === "both" ? React$1.createElement(Corner, { className: "rt-ScrollAreaCorner" }) : null)));
+	}, React$1.createElement(Thumb$1, { className: "rt-ScrollAreaThumb" })), Bj === "both" ? React$1.createElement(Corner, { className: "rt-ScrollAreaCorner" }) : null)));
 });
 c.displayName = "ScrollArea";
 var n$2 = {
@@ -7845,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: hj, separatorToPanels: gj } = A.get(E) ?? { defaultLayoutDeferred: !1 };
-		if (Z && W && hj && gj) {
+		let W = O.get(E), { defaultLayoutDeferred: G, derivedPanelConstraints: Z, layout: Bj, separatorToPanels: Vj } = A.get(E) ?? { defaultLayoutDeferred: !1 };
+		if (Z && W && Bj && Vj) {
 			let _ = Z$1({
 				delta: U,
 				initialLayout: W,
 				panelConstraints: Z,
 				pivotIndices: n.panels.map((n) => H.indexOf(n)),
-				prevLayout: hj,
+				prevLayout: Bj,
 				trigger: "mouse-or-touch"
 			});
-			if (B$1(_, hj)) {
+			if (B$1(_, Bj)) {
 				if (U !== 0 && !z) switch (B) {
 					case "horizontal":
 						M |= U < 0 ? De : Oe$1;
@@ -7869,7 +8009,7 @@ function $e({ document: n, event: _, hitRegions: E, initialLayoutMap: O, mounted
 					defaultLayoutDeferred: G,
 					derivedPanelConstraints: Z,
 					layout: _,
-					separatorToPanels: gj
+					separatorToPanels: Vj
 				});
 				let E = n.group.panels.map(({ id: n }) => n).join(",");
 				n.group.inMemoryLayouts[E] = _;
@@ -8081,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), hj = useRef(null), [gj, bj] = useState(!1), [xj, Sj] = useState(E ?? {}), [Cj, Tj] = wt(), Ej = useRef({
+	}), Z = ae$1(N), Bj = useRef(null), [Vj, Gj] = useState(!1), [Kj, qj] = useState(E ?? {}), [Jj, Xj] = wt(), Zj = useRef({
 		lastExpandedPanelSizes: {},
 		layouts: {},
 		panels: [],
 		separators: []
-	}), Dj = ue$1(hj, j);
+	}), Qj = ue$1(Bj, j);
 	Pt(Z, M);
-	let Oj = useMemo(() => ({
+	let $j = useMemo(() => ({
 		id: Z,
 		orientation: z,
 		registerPanel: (n) => {
-			let _ = Ej.current;
-			return _.panels = ie$1(z, [..._.panels, n]), Tj(), () => {
-				_.panels = _.panels.filter((_) => _ !== n), Tj();
+			let _ = Zj.current;
+			return _.panels = ie$1(z, [..._.panels, n]), Xj(), () => {
+				_.panels = _.panels.filter((_) => _ !== n), Xj();
 			};
 		},
 		registerSeparator: (n) => {
-			let _ = Ej.current;
-			return _.separators = ie$1(z, [..._.separators, n]), Tj(), () => {
-				_.separators = _.separators.filter((_) => _ !== n), Tj();
+			let _ = Zj.current;
+			return _.separators = ie$1(z, [..._.separators, n]), Xj(), () => {
+				_.separators = _.separators.filter((_) => _ !== n), Xj();
 			};
 		}
 	}), [
 		Z,
-		Tj,
+		Xj,
 		z
-	]), kj = Lt({
+	]), eM = Lt({
 		defaultLayout: E,
 		disableCursor: O
-	}), Aj = useRef(null);
+	}), tM = useRef(null);
 	A$1(() => {
-		let n = hj.current;
+		let n = Bj.current;
 		if (n === null) return;
-		let _ = Ej.current, E = {
-			defaultLayout: kj.defaultLayout,
-			disableCursor: !!kj.disableCursor,
+		let _ = Zj.current, E = {
+			defaultLayout: eM.defaultLayout,
+			disableCursor: !!eM.disableCursor,
 			disabled: !!A,
 			element: n,
 			id: Z,
-			inMemoryLastExpandedPanelSizes: Ej.current.lastExpandedPanelSizes,
-			inMemoryLayouts: Ej.current.layouts,
+			inMemoryLastExpandedPanelSizes: Zj.current.lastExpandedPanelSizes,
+			inMemoryLayouts: Zj.current.layouts,
 			orientation: z,
 			panels: _.panels,
 			separators: _.separators
 		};
-		Aj.current = E;
+		tM.current = E;
 		let O = bt(E), j = D$1().mountedGroups.get(E);
 		if (j) {
 			let { defaultLayoutDeferred: n, derivedPanelConstraints: _, layout: E } = j;
-			!n && _.length > 0 && (Sj(E), G?.(E));
+			!n && _.length > 0 && (qj(E), G?.(E));
 		}
 		let M = T$1.addListener("interactionStateChange", (n) => {
 			switch (n.state) {
 				case "active":
-					bj(n.hitRegions.some((n) => n.group === E));
+					Gj(n.hitRegions.some((n) => n.group === E));
 					break;
 				default:
-					bj(!1);
+					Gj(!1);
 					break;
 			}
 		}), N = T$1.addListener("mountedGroupsChange", (n) => {
@@ -8146,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;
-				Sj(O), G?.(O);
+				qj(O), G?.(O);
 			}
 		});
 		return () => {
-			Aj.current = null, O(), M(), N();
+			tM.current = null, O(), M(), N();
 		};
 	}, [
 		A,
 		Z,
 		G,
 		z,
-		Cj,
-		kj
+		Jj,
+		eM
 	]), useEffect(() => {
-		let n = Aj.current;
+		let n = tM.current;
 		n && (n.defaultLayout = E, n.disableCursor = !!O);
 	});
-	let jj = { [Fe]: gj ? "none" : void 0 };
-	for (let n in xj) {
+	let nM = { [Fe]: Vj ? "none" : void 0 };
+	for (let n in Kj) {
 		let _ = Ve(Z, n);
-		jj[_] = xj[n];
+		nM[_] = Kj[n];
 	}
 	return /* @__PURE__ */ jsx(je.Provider, {
-		value: Oj,
+		value: $j,
 		children: /* @__PURE__ */ jsx("div", {
 			...H,
 			"aria-orientation": z,
@@ -8177,13 +8317,13 @@ function Rt({ children: n, className: _, defaultLayout: E, disableCursor: O, dis
 			"data-group": !0,
 			"data-testid": Z,
 			id: Z,
-			ref: Dj,
+			ref: Qj,
 			style: {
 				height: "100%",
 				width: "100%",
 				overflow: "hidden",
 				...B,
-				...jj,
+				...nM,
 				display: "flex",
 				flexDirection: z === "horizontal" ? "row" : "column",
 				flexWrap: "nowrap"
@@ -8301,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), hj = ue$1(Z, j), { id: gj, registerPanel: _j } = ce$1(), yj = z !== null, bj = le$1((n, _, E) => {
+	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) => {
 		z?.(n, M, E);
 	});
 	A$1(() => {
 		let n = Z.current;
-		if (n !== null) return _j({
+		if (n !== null) return Hj({
 			element: n,
 			id: G,
 			idIsStable: W,
@@ -8314,7 +8454,7 @@ function kt({ children: n, className: _, collapsedSize: E = "0%", collapsible: O
 				expandToSize: void 0,
 				prevSize: void 0
 			},
-			onResize: yj ? bj : void 0,
+			onResize: Wj ? Gj : void 0,
 			panelConstraints: {
 				collapsedSize: E,
 				collapsible: O,
@@ -8327,25 +8467,25 @@ function kt({ children: n, className: _, collapsedSize: E = "0%", collapsible: O
 		E,
 		O,
 		A,
-		yj,
+		Wj,
 		G,
 		W,
 		N,
 		P,
-		bj,
-		_j
+		Gj,
+		Hj
 	]), It(G, B);
-	let xj = Ve(gj, G);
+	let Kj = Ve(Vj, G);
 	return /* @__PURE__ */ jsx("div", {
 		...U,
 		"data-panel": !0,
 		"data-testid": G,
 		id: G,
-		ref: hj,
+		ref: Bj,
 		style: {
 			...Gt,
 			flexBasis: 0,
-			flexGrow: `var(${xj}, 1)`,
+			flexGrow: `var(${Kj}, 1)`,
 			flexShrink: 1,
 			overflow: "hidden",
 			pointerEvents: `var(${Fe})`
@@ -8408,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(), hj = 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(), Bj = G === "horizontal" ? "vertical" : "horizontal";
 	return A$1(() => {
 		let n = H.current;
 		if (n !== null) {
@@ -8444,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": hj,
+		"aria-orientation": Bj,
 		"aria-valuemax": N.valueMax,
 		"aria-valuemin": N.valueMin,
 		"aria-valuenow": N.valueNow,
@@ -8503,7 +8643,8 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 		theme: A,
 		history: [[]],
 		historyIndex: 0,
-		clipboard: []
+		clipboard: [],
+		gridSize: 0
 	});
 	React.useEffect(() => {
 		j.availableFonts.forEach((n) => {
@@ -8532,6 +8673,11 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			canvasHeight: n
 		}));
 	}, []), P = React.useCallback((n) => {
+		M((_) => ({
+			..._,
+			gridSize: n
+		}));
+	}, []), z = React.useCallback((n) => {
 		M((_) => {
 			let E = n.elements || _.elements;
 			return {
@@ -8546,7 +8692,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				clipboard: []
 			};
 		});
-	}, []), z = React.useCallback(() => {
+	}, []), B = React.useCallback(() => {
 		M((n) => {
 			if (n.historyIndex > 0) {
 				let _ = n.historyIndex - 1;
@@ -8559,7 +8705,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			}
 			return n;
 		});
-	}, []), B = React.useCallback(() => {
+	}, []), H = React.useCallback(() => {
 		M((n) => {
 			if (n.historyIndex < n.history.length - 1) {
 				let _ = n.historyIndex + 1;
@@ -8572,7 +8718,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			}
 			return n;
 		});
-	}, []), H = React.useCallback(() => {
+	}, []), U = React.useCallback(() => {
 		M((n) => {
 			if (n.selectedElementIds.length > 0) {
 				let _ = n.elements.filter((_) => n.selectedElementIds.includes(_.id));
@@ -8583,7 +8729,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			}
 			return n;
 		});
-	}, []), U = React.useCallback(() => {
+	}, []), W = React.useCallback(() => {
 		M((n) => {
 			if (n.clipboard.length > 0) {
 				let _ = n.clipboard.map((n) => ({
@@ -8602,7 +8748,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			}
 			return n;
 		});
-	}, []), W = React.useCallback((n) => {
+	}, []), G = React.useCallback((n) => {
 		let _ = {};
 		n.type === "box" && (_.backgroundColor = "var(--gray-4)");
 		let E = {
@@ -8627,7 +8773,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				selectedElementIds: [E.id]
 			};
 		});
-	}, []), G = React.useCallback((n) => {
+	}, []), Z = React.useCallback((n) => {
 		M((_) => {
 			let E = _.elements.filter((_) => _.id !== n), O = _.history.slice(0, _.historyIndex + 1);
 			return O.push(E), {
@@ -8638,7 +8784,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: O.length - 1
 			};
 		});
-	}, []), Z = React.useCallback(() => {
+	}, []), Bj = 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);
@@ -8650,7 +8796,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: E.length - 1
 			};
 		});
-	}, []), hj = React.useCallback((n, _ = !1) => {
+	}, []), Vj = React.useCallback((n, _ = !1) => {
 		M((E) => {
 			if (n === null) return {
 				...E,
@@ -8667,7 +8813,12 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				selectedElementIds: [n]
 			};
 		});
-	}, []), gj = React.useCallback((n, _) => {
+	}, []), Hj = React.useCallback((n) => {
+		M((_) => ({
+			..._,
+			selectedElementIds: n
+		}));
+	}, []), Uj = React.useCallback((n, _) => {
 		M((E) => {
 			let O = [...E.elements], A = O[n];
 			O.splice(n, 1), O.splice(_, 0, A);
@@ -8679,7 +8830,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: j.length - 1
 			};
 		});
-	}, []), _j = React.useCallback((n, _, E = !0) => {
+	}, []), Gj = React.useCallback((n, _, E = !0) => {
 		M((O) => {
 			let A = O.elements.map((E) => E.id === n ? {
 				...E,
@@ -8692,31 +8843,122 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				historyIndex: M
 			};
 		});
-	}, []), vj = React.useCallback((n, _ = !0) => {
+	}, []), Kj = React.useCallback((n, _ = !0) => {
 		M((E) => {
-			let O = [...E.elements];
+			let O = [...E.elements], A = [], j = /* @__PURE__ */ new Set();
 			n.forEach(({ id: n, changes: _ }) => {
+				let O = E.elements.find((_) => _.id === n);
+				if (O) if (O.groupId && (_.x !== void 0 || _.y !== void 0)) {
+					let n = E.elements.find((n) => n.id === O.groupId);
+					if (n && !j.has(n.id)) {
+						let E = (_.x ?? O.x) - O.x, M = (_.y ?? O.y) - O.y;
+						A.push({
+							id: n.id,
+							changes: {
+								x: n.x + E,
+								y: n.y + M
+							}
+						}), j.add(n.id);
+					}
+				} else A.push({
+					id: n,
+					changes: _
+				});
+			});
+			let M = [...A];
+			A.forEach(({ id: n, changes: _ }) => {
+				if (_.x !== void 0 || _.y !== void 0) {
+					let O = E.elements.find((_) => _.id === n);
+					if (O && O.type === "group") {
+						let A = (_.x ?? O.x) - O.x, j = (_.y ?? O.y) - O.y;
+						E.elements.forEach((_) => {
+							_.groupId === n && (M.some((n) => n.id === _.id) || M.push({
+								id: _.id,
+								changes: {
+									x: _.x + A,
+									y: _.y + j
+								}
+							}));
+						});
+					}
+				}
+			}), M.forEach(({ id: n, changes: _ }) => {
 				let E = O.findIndex((_) => _.id === n);
 				E !== -1 && (O[E] = {
 					...O[E],
 					..._
 				});
 			});
-			let A = E.history, j = E.historyIndex;
-			return _ && (A = E.history.slice(0, E.historyIndex + 1), A.push(O), j = A.length - 1), {
+			let N = E.history, P = E.historyIndex;
+			return _ && (N = E.history.slice(0, E.historyIndex + 1), N.push(O), P = N.length - 1), {
 				...E,
 				elements: O,
-				history: A,
-				historyIndex: j
+				history: N,
+				historyIndex: P
+			};
+		});
+	}, []), qj = React.useCallback((n) => {
+		M((_) => {
+			let E = _.elements.filter((_) => n.includes(_.id));
+			if (E.length === 0) return _;
+			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)), N = {
+				id: crypto.randomUUID(),
+				type: "group",
+				name: "Novo Grupo",
+				content: "",
+				x: O,
+				y: A,
+				width: j - O,
+				height: M - A,
+				style: { zIndex: 0 }
+			}, P = _.elements.map((_) => n.includes(_.id) ? {
+				..._,
+				groupId: N.id
+			} : _);
+			P.push(N);
+			let z = _.history.slice(0, _.historyIndex + 1);
+			return z.push(P), {
+				..._,
+				elements: P,
+				selectedElementIds: [N.id],
+				history: z,
+				historyIndex: z.length - 1
+			};
+		});
+	}, []), Jj = React.useCallback((n) => {
+		M((_) => {
+			let E = _.elements.find((_) => _.id === n);
+			if (!E || E.type !== "group") return _;
+			let O = [], A = _.elements.filter((_) => _.id !== n).map((_) => _.groupId === n ? (O.push(_.id), {
+				..._,
+				groupId: void 0
+			}) : _), j = _.history.slice(0, _.historyIndex + 1);
+			return j.push(A), {
+				..._,
+				elements: A,
+				selectedElementIds: O,
+				history: j,
+				historyIndex: j.length - 1
+			};
+		});
+	}, []), Xj = React.useCallback((n, _) => {
+		M((E) => {
+			let O = E.elements.map((E) => E.id === n ? {
+				...E,
+				name: _
+			} : E);
+			return {
+				...E,
+				elements: O
 			};
 		});
-	}, []), bj = React.useCallback((n, _) => {
+	}, []), Zj = React.useCallback((n, _) => {
 		M((E) => ({
 			...E,
 			mockData: n,
 			singleMockData: _
 		}));
-	}, []), xj = React.useCallback((n) => {
+	}, []), Qj = React.useCallback((n) => {
 		M((_) => ({
 			..._,
 			listSettings: {
@@ -8724,49 +8966,208 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				...n
 			}
 		}));
-	}, []), Sj = React.useMemo(() => ({
+	}, []), $j = React.useMemo(() => ({
 		state: j,
-		addElement: W,
-		removeElement: G,
-		removeSelected: Z,
-		selectElement: hj,
-		moveElement: gj,
-		updateElement: _j,
-		updateElements: vj,
-		setMockData: bj,
-		updateListSettings: xj,
+		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,
 		setCanvasHeight: N,
-		loadState: P,
-		undo: z,
-		redo: B,
-		copy: H,
-		paste: U
+		loadState: z,
+		undo: B,
+		redo: H,
+		copy: U,
+		paste: W,
+		setGridSize: P
 	}), [
 		j,
-		W,
 		G,
 		Z,
-		hj,
-		gj,
-		_j,
-		vj,
-		bj,
-		xj,
+		Bj,
+		Vj,
+		Hj,
+		Uj,
+		Gj,
+		Kj,
+		qj,
+		Jj,
+		Xj,
+		Zj,
+		Qj,
 		N,
-		P,
 		z,
 		B,
 		H,
-		U
+		U,
+		W,
+		P
 	]);
 	return /* @__PURE__ */ jsx(EditorContext.Provider, {
-		value: Sj,
+		value: $j,
 		children: n
 	});
 }, useEditor = () => {
 	let n = useContext(EditorContext);
 	if (!n) throw Error("useEditor must be used within an EditorProvider");
 	return n;
+}, AlignmentToolbar = () => {
+	let { state: n, updateElements: _ } = useEditor(), { selectedElementIds: E, elements: O } = n;
+	if (E.length < 2) return null;
+	let A = () => O.filter((n) => E.includes(n.id));
+	return /* @__PURE__ */ jsxs(p$1, {
+		gap: "2",
+		align: "center",
+		style: {
+			backgroundColor: "var(--color-panel-solid)",
+			padding: "8px",
+			borderRadius: "8px",
+			boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
+			border: "1px solid var(--gray-5)"
+		},
+		children: [
+			/* @__PURE__ */ jsx(o$1, {
+				variant: "ghost",
+				color: "gray",
+				onClick: () => {
+					let n = A();
+					if (n.length < 2) return;
+					let E = Math.min(...n.map((n) => n.x));
+					_(n.map((n) => ({
+						id: n.id,
+						changes: { x: E }
+					})));
+				},
+				title: "Alinhar à Esquerda",
+				children: /* @__PURE__ */ jsx(AlignLeftIcon, {})
+			}),
+			/* @__PURE__ */ jsx(o$1, {
+				variant: "ghost",
+				color: "gray",
+				onClick: () => {
+					let n = A();
+					if (n.length < 2) return;
+					let E = (Math.min(...n.map((n) => n.x)) + Math.max(...n.map((n) => n.x + n.width))) / 2;
+					_(n.map((n) => ({
+						id: n.id,
+						changes: { x: E - n.width / 2 }
+					})));
+				},
+				title: "Alinhar ao Centro (Horizontal)",
+				children: /* @__PURE__ */ jsx(AlignCenterHorizontallyIcon, {})
+			}),
+			/* @__PURE__ */ jsx(o$1, {
+				variant: "ghost",
+				color: "gray",
+				onClick: () => {
+					let n = A();
+					if (n.length < 2) return;
+					let E = Math.max(...n.map((n) => n.x + n.width));
+					_(n.map((n) => ({
+						id: n.id,
+						changes: { x: E - n.width }
+					})));
+				},
+				title: "Alinhar à Direita",
+				children: /* @__PURE__ */ jsx(AlignRightIcon, {})
+			}),
+			/* @__PURE__ */ jsx(o$2, { orientation: "vertical" }),
+			/* @__PURE__ */ jsx(o$1, {
+				variant: "ghost",
+				color: "gray",
+				onClick: () => {
+					let n = A();
+					if (n.length < 2) return;
+					let E = Math.min(...n.map((n) => n.y));
+					_(n.map((n) => ({
+						id: n.id,
+						changes: { y: E }
+					})));
+				},
+				title: "Alinhar ao Topo",
+				children: /* @__PURE__ */ jsx(AlignTopIcon, {})
+			}),
+			/* @__PURE__ */ jsx(o$1, {
+				variant: "ghost",
+				color: "gray",
+				onClick: () => {
+					let n = A();
+					if (n.length < 2) return;
+					let E = (Math.min(...n.map((n) => n.y)) + Math.max(...n.map((n) => n.y + n.height))) / 2;
+					_(n.map((n) => ({
+						id: n.id,
+						changes: { y: E - n.height / 2 }
+					})));
+				},
+				title: "Alinhar ao Centro (Vertical)",
+				children: /* @__PURE__ */ jsx(AlignCenterVerticallyIcon, {})
+			}),
+			/* @__PURE__ */ jsx(o$1, {
+				variant: "ghost",
+				color: "gray",
+				onClick: () => {
+					let n = A();
+					if (n.length < 2) return;
+					let E = Math.max(...n.map((n) => n.y + n.height));
+					_(n.map((n) => ({
+						id: n.id,
+						changes: { y: E - n.height }
+					})));
+				},
+				title: "Alinhar à Base",
+				children: /* @__PURE__ */ jsx(AlignBottomIcon, {})
+			}),
+			E.length >= 3 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(o$2, { orientation: "vertical" }),
+				/* @__PURE__ */ jsx(o$1, {
+					variant: "ghost",
+					color: "gray",
+					onClick: () => {
+						let n = A();
+						if (n.length < 3) return;
+						let E = [...n].sort((n, _) => n.x - _.x), O = E[0], j = E[E.length - 1], M = (j.x + j.width / 2 - (O.x + O.width / 2)) / (E.length - 1);
+						_(E.map((n, _) => {
+							if (_ === 0 || _ === E.length - 1) return null;
+							let A = O.x + O.width / 2 + M * _;
+							return {
+								id: n.id,
+								changes: { x: A - n.width / 2 }
+							};
+						}).filter(Boolean));
+					},
+					title: "Distribuir Horizontalmente",
+					children: /* @__PURE__ */ jsx(SpaceEvenlyHorizontallyIcon, {})
+				}),
+				/* @__PURE__ */ jsx(o$1, {
+					variant: "ghost",
+					color: "gray",
+					onClick: () => {
+						let n = A();
+						if (n.length < 3) return;
+						let E = [...n].sort((n, _) => n.y - _.y), O = E[0], j = E[E.length - 1], M = (j.y + j.height / 2 - (O.y + O.height / 2)) / (E.length - 1);
+						_(E.map((n, _) => {
+							if (_ === 0 || _ === E.length - 1) return null;
+							let A = O.y + O.height / 2 + M * _;
+							return {
+								id: n.id,
+								changes: { y: A - n.height / 2 }
+							};
+						}).filter(Boolean));
+					},
+					title: "Distribuir Verticalmente",
+					children: /* @__PURE__ */ jsx(SpaceEvenlyVerticallyIcon, {})
+				})
+			] })
+		]
+	});
 };
 var __assign$1 = function() {
 	return __assign$1 = Object.assign || function(n) {
@@ -9053,16 +9454,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, hj = U || 0;
-		return hasDirection("right", N) && (W = P.width + (n - P.x) * A / E, B && (G = (W - hj) / this.ratio + Z)), hasDirection("left", N) && (W = P.width - (n - P.x) * A / E, B && (G = (W - hj) / this.ratio + Z)), hasDirection("bottom", N) && (G = P.height + (_ - P.y) * j / E, B && (W = (G - Z) * this.ratio + hj)), hasDirection("top", N) && (G = P.height - (_ - P.y) * j / E, B && (W = (G - Z) * this.ratio + hj)), {
+		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)), {
 			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, hj = (P - W) / this.ratio + U, gj = (z - W) / this.ratio + U, _j = Math.max(P, G), vj = Math.min(z, Z), yj = Math.max(B, hj), bj = Math.min(H, gj);
-			n = clamp$1(n, _j, vj), _ = clamp$1(_, yj, bj);
+			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);
 		} else n = clamp$1(n, P, z), _ = clamp$1(_, B, H);
 		return {
 			newWidth: n,
@@ -9119,56 +9520,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 hj = this.calculateNewSizeFromDirection(N, P), gj = hj.newHeight, _j = hj.newWidth, vj = this.calculateNewMaxFromBoundary(O, A);
-			this.props.snap && this.props.snap.x && (_j = findClosestSnap(_j, this.props.snap.x, this.props.snapGap)), this.props.snap && this.props.snap.y && (gj = findClosestSnap(gj, this.props.snap.y, this.props.snapGap));
-			var yj = this.calculateNewSizeFromAspectRatio(_j, gj, {
-				width: vj.maxWidth,
-				height: vj.maxHeight
+			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
 			}, {
 				width: j,
 				height: M
 			});
-			if (_j = yj.newWidth, gj = yj.newHeight, this.props.grid) {
-				var bj = snap(_j, this.props.grid[0], this.props.gridGap ? this.props.gridGap[0] : 0), xj = snap(gj, this.props.grid[1], this.props.gridGap ? this.props.gridGap[1] : 0), Cj = this.props.snapGap || 0, wj = Cj === 0 || Math.abs(bj - _j) <= Cj ? bj : _j, Tj = Cj === 0 || Math.abs(xj - gj) <= Cj ? xj : gj;
-				_j = wj, gj = Tj;
+			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;
 			}
-			var Ej = {
-				width: _j - H.width,
-				height: gj - H.height
+			var Zj = {
+				width: Hj - H.width,
+				height: Vj - H.height
 			};
-			if (this.delta = Ej, U && typeof U == "string") {
+			if (this.delta = Zj, U && typeof U == "string") {
 				if (U.endsWith("%")) {
-					var Dj = _j / G.width * 100;
-					_j = `${Dj}%`;
+					var Qj = Hj / G.width * 100;
+					Hj = `${Qj}%`;
 				} else if (U.endsWith("vw")) {
-					var Oj = _j / this.window.innerWidth * 100;
-					_j = `${Oj}vw`;
+					var $j = Hj / this.window.innerWidth * 100;
+					Hj = `${$j}vw`;
 				} else if (U.endsWith("vh")) {
-					var kj = _j / this.window.innerHeight * 100;
-					_j = `${kj}vh`;
+					var eM = Hj / this.window.innerHeight * 100;
+					Hj = `${eM}vh`;
 				}
 			}
 			if (W && typeof W == "string") {
 				if (W.endsWith("%")) {
-					var Dj = gj / G.height * 100;
-					gj = `${Dj}%`;
+					var Qj = Vj / G.height * 100;
+					Vj = `${Qj}%`;
 				} else if (W.endsWith("vw")) {
-					var Oj = gj / this.window.innerWidth * 100;
-					gj = `${Oj}vw`;
+					var $j = Vj / this.window.innerWidth * 100;
+					Vj = `${$j}vw`;
 				} else if (W.endsWith("vh")) {
-					var kj = gj / this.window.innerHeight * 100;
-					gj = `${kj}vh`;
+					var eM = Vj / this.window.innerHeight * 100;
+					Vj = `${eM}vh`;
 				}
 			}
-			var Aj = {
-				width: this.createSizeForCssProperty(_j, "width"),
-				height: this.createSizeForCssProperty(gj, "height")
+			var tM = {
+				width: this.createSizeForCssProperty(Hj, "width"),
+				height: this.createSizeForCssProperty(Vj, "height")
 			};
-			this.flexDir === "row" ? Aj.flexBasis = Aj.width : this.flexDir === "column" && (Aj.flexBasis = Aj.height);
-			var jj = this.state.width !== Aj.width, Mj = this.state.height !== Aj.height, Nj = this.state.flexBasis !== Aj.flexBasis, Pj = jj || Mj || Nj;
-			Pj && flushSync(function() {
-				_.setState(Aj);
-			}), this.props.onResize && Pj && this.props.onResize(n, B, this.resizable, Ej);
+			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);
 		}
 	}, _.prototype.onMouseUp = function(n) {
 		var _ = this.state, E = _.isResizing, O = _.direction;
@@ -9619,7 +10020,7 @@ var R$1, V = typeof window < "u" ? useLayoutEffect : useEffect, $ = function() {
 	return React.createElement(re, u({}, n, { colorModel: te }));
 };
 const ColorPickerContent = ({ color: n, onChange: _ }) => {
-	let E = n === "transparent" ? "#00000000" : n || "#000000";
+	let E = ((n) => n === "transparent" ? "#00000000" : n ? /^[0-9A-Fa-f]{3,8}$/.test(n) ? "#" + n : n : "#000000")(n);
 	return /* @__PURE__ */ jsxs(p$1, {
 		direction: "column",
 		gap: "3",
@@ -9641,6 +10042,9 @@ const ColorPickerContent = ({ color: n, onChange: _ }) => {
 			} }), /* @__PURE__ */ jsx(u$1, {
 				value: n,
 				onChange: (n) => _(n.target.value),
+				onBlur: () => {
+					n && /^[0-9A-Fa-f]{3,8}$/.test(n) && _("#" + n);
+				},
 				placeholder: "#RRGGBBAA",
 				style: { flexGrow: 1 }
 			})]
@@ -9679,9 +10083,9 @@ const ColorPickerContent = ({ color: n, onChange: _ }) => {
 		color: n,
 		onChange: _
 	})
-})] }), ElementAdvancedSettings = ({ elementId: n, open: _, onOpenChange: E }) => {
-	let { state: O, updateElement: A } = useEditor(), j = O.elements.find((_) => _.id === n);
-	return j ? /* @__PURE__ */ jsx(s$4, {
+})] }), ElementAdvancedSettings = ({ elementId: n, open: _, onOpenChange: E, initialTab: O = "formatting" }) => {
+	let { state: A, updateElement: j } = useEditor(), M = A.elements.find((_) => _.id === n);
+	return M ? /* @__PURE__ */ jsx(s$4, {
 		open: _,
 		onOpenChange: E,
 		children: /* @__PURE__ */ jsxs(p$8, {
@@ -9692,12 +10096,16 @@ const ColorPickerContent = ({ color: n, onChange: _ }) => {
 			children: [
 				/* @__PURE__ */ jsx(g$2, { children: "Configurações Avançadas" }),
 				/* @__PURE__ */ jsxs(m$1, {
-					defaultValue: "formatting",
+					defaultValue: O,
 					children: [/* @__PURE__ */ jsxs(b$1, { children: [
 						/* @__PURE__ */ jsx(P$1, {
 							value: "formatting",
 							children: "Formatação"
 						}),
+						/* @__PURE__ */ jsx(P$1, {
+							value: "style",
+							children: "Estilo"
+						}),
 						/* @__PURE__ */ jsx(P$1, {
 							value: "conditional",
 							children: "Condicional"
@@ -9712,23 +10120,30 @@ const ColorPickerContent = ({ color: n, onChange: _ }) => {
 							/* @__PURE__ */ jsx(f$2, {
 								value: "formatting",
 								children: /* @__PURE__ */ jsx(FormattingSettings, {
-									element: j,
-									updateElement: A
+									element: M,
+									updateElement: j
+								})
+							}),
+							/* @__PURE__ */ jsx(f$2, {
+								value: "style",
+								children: /* @__PURE__ */ jsx(StyleSettings, {
+									element: M,
+									updateElement: j
 								})
 							}),
 							/* @__PURE__ */ jsx(f$2, {
 								value: "conditional",
 								children: /* @__PURE__ */ jsx(ConditionalSettings, {
-									element: j,
-									updateElement: A,
-									availableProps: O.availableProps
+									element: M,
+									updateElement: j,
+									availableProps: A.availableProps
 								})
 							}),
 							/* @__PURE__ */ jsx(f$2, {
 								value: "animation",
 								children: /* @__PURE__ */ jsx(AnimationSettings, {
-									element: j,
-									updateElement: A
+									element: M,
+									updateElement: j
 								})
 							})
 						]
@@ -9793,6 +10208,18 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 						value: "fadeIn",
 						children: "Fade In"
 					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "smoothSlideUp",
+						children: "Slide Suave (Up)"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "popIn",
+						children: "Pop In"
+					}),
+					/* @__PURE__ */ jsx("option", {
+						value: "blurIn",
+						children: "Blur In"
+					}),
 					/* @__PURE__ */ jsx("option", {
 						value: "slideInLeft",
 						children: "Slide In (Esquerda)"
@@ -10088,8 +10515,166 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 			})
 		]
 	});
+}, StyleSettings = ({ element: n, updateElement: _ }) => {
+	let E = n.style || {}, [O, A] = useState(E.borderTopLeftRadius !== void 0 || E.borderTopRightRadius !== void 0 || E.borderBottomRightRadius !== void 0 || E.borderBottomLeftRadius !== void 0), j = (O) => {
+		_(n.id, { style: {
+			...E,
+			...O
+		} });
+	}, M = (n, _) => {
+		let E = typeof n == "number" ? n : parseInt(n) || 0;
+		j({ [_]: E });
+	};
+	return /* @__PURE__ */ jsxs(p$1, {
+		direction: "column",
+		gap: "3",
+		children: [
+			/* @__PURE__ */ jsx(p$2, {
+				size: "2",
+				color: "gray",
+				children: "Personalize a aparência do elemento."
+			}),
+			/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsxs(p$1, {
+				align: "center",
+				justify: "between",
+				mb: "2",
+				children: [/* @__PURE__ */ jsx(p$2, {
+					size: "2",
+					weight: "bold",
+					children: "Arredondamento (Border Radius)"
+				}), /* @__PURE__ */ jsxs(p$1, {
+					align: "center",
+					gap: "2",
+					children: [/* @__PURE__ */ jsx(p$2, {
+						size: "1",
+						children: "Individual"
+					}), /* @__PURE__ */ jsx(i, {
+						checked: O,
+						onCheckedChange: (n) => {
+							if (A(n), !n) j({
+								borderRadius: E.borderTopLeftRadius || E.borderRadius || 0,
+								borderTopLeftRadius: void 0,
+								borderTopRightRadius: void 0,
+								borderBottomRightRadius: void 0,
+								borderBottomLeftRadius: void 0
+							});
+							else {
+								let n = E.borderRadius || 0;
+								j({
+									borderRadius: void 0,
+									borderTopLeftRadius: n,
+									borderTopRightRadius: n,
+									borderBottomRightRadius: n,
+									borderBottomLeftRadius: n
+								});
+							}
+						}
+					})]
+				})]
+			}), O ? /* @__PURE__ */ jsxs(o$3, {
+				columns: "2",
+				gap: "3",
+				children: [
+					/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
+						size: "1",
+						mb: "1",
+						as: "div",
+						children: "Superior Esq."
+					}), /* @__PURE__ */ jsx(u$1, {
+						type: "number",
+						min: "0",
+						value: parseInt(E.borderTopLeftRadius) || 0,
+						onChange: (n) => M(n.target.value, "borderTopLeftRadius")
+					})] }),
+					/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
+						size: "1",
+						mb: "1",
+						as: "div",
+						children: "Superior Dir."
+					}), /* @__PURE__ */ jsx(u$1, {
+						type: "number",
+						min: "0",
+						value: parseInt(E.borderTopRightRadius) || 0,
+						onChange: (n) => M(n.target.value, "borderTopRightRadius")
+					})] }),
+					/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
+						size: "1",
+						mb: "1",
+						as: "div",
+						children: "Inferior Esq."
+					}), /* @__PURE__ */ jsx(u$1, {
+						type: "number",
+						min: "0",
+						value: parseInt(E.borderBottomLeftRadius) || 0,
+						onChange: (n) => M(n.target.value, "borderBottomLeftRadius")
+					})] }),
+					/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
+						size: "1",
+						mb: "1",
+						as: "div",
+						children: "Inferior Dir."
+					}), /* @__PURE__ */ jsx(u$1, {
+						type: "number",
+						min: "0",
+						value: parseInt(E.borderBottomRightRadius) || 0,
+						onChange: (n) => M(n.target.value, "borderBottomRightRadius")
+					})] })
+				]
+			}) : /* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
+				size: "1",
+				mb: "1",
+				as: "div",
+				children: "Raio (Todos os cantos)"
+			}), /* @__PURE__ */ jsx(u$1, {
+				type: "number",
+				min: "0",
+				value: parseInt(E.borderRadius) || 0,
+				onChange: (n) => j({ borderRadius: parseInt(n.target.value) || 0 })
+			})] })] }),
+			/* @__PURE__ */ jsx(o$2, {
+				size: "4",
+				my: "2"
+			}),
+			/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
+				size: "2",
+				weight: "bold",
+				mb: "2",
+				children: "Espaçamento (Padding)"
+			}), /* @__PURE__ */ jsx(o$3, {
+				columns: "2",
+				gap: "3",
+				children: /* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
+					size: "1",
+					mb: "1",
+					as: "div",
+					children: "Tamanho (px)"
+				}), /* @__PURE__ */ jsx(u$1, {
+					type: "number",
+					min: "0",
+					value: parseInt(E.padding) || 0,
+					onChange: (n) => j({ padding: parseInt(n.target.value) || 0 })
+				})] })
+			})] })
+		]
+	});
 }, ConditionalSettings = ({ element: n, updateElement: _, availableProps: E }) => {
-	let O = n.conditions || [], [A, j] = useState(null), M = () => {
+	let O = n.conditions || [], A = n.styleBindings || {}, [j, M] = useState(null), N = [
+		{
+			label: "Cor do Texto",
+			value: "color"
+		},
+		{
+			label: "Cor de Fundo",
+			value: "backgroundColor"
+		},
+		{
+			label: "Cor da Borda",
+			value: "borderColor"
+		}
+	], P = (E, O) => {
+		let j = { ...A };
+		O ? j[E] = O : delete j[E], _(n.id, { styleBindings: j });
+	}, z = () => {
 		let A = {
 			id: crypto.randomUUID(),
 			property: E.length > 0 ? E[0].dataName : "",
@@ -10097,25 +10682,25 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 			value: "",
 			style: { color: "#ff0000" }
 		};
-		_(n.id, { conditions: [...O, A] }), j(A.id);
-	}, N = (E) => {
-		_(n.id, { conditions: O.filter((n) => n.id !== E) }), A === E && j(null);
-	}, P = (E, A) => {
+		_(n.id, { conditions: [...O, A] }), M(A.id);
+	}, B = (E) => {
+		_(n.id, { conditions: O.filter((n) => n.id !== E) }), j === E && M(null);
+	}, H = (E, A) => {
 		_(n.id, { conditions: O.map((n) => n.id === E ? {
 			...n,
 			...A
 		} : n) });
-	}, z = (n, _) => {
+	}, U = (n, _) => {
 		let E = O.find((_) => _.id === n);
-		E && P(n, { style: {
+		E && H(n, { style: {
 			...E.style,
 			..._
 		} });
-	}, B = O.find((n) => n.id === A);
+	}, W = O.find((n) => n.id === j);
 	return /* @__PURE__ */ jsx(p$1, {
 		direction: "column",
 		gap: "3",
-		children: A ? /* @__PURE__ */ jsxs(p$1, {
+		children: j ? /* @__PURE__ */ jsxs(p$1, {
 			direction: "column",
 			gap: "3",
 			children: [/* @__PURE__ */ jsxs(p$1, {
@@ -10126,10 +10711,10 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 					children: "Editar Regra"
 				}), /* @__PURE__ */ jsx(o, {
 					variant: "ghost",
-					onClick: () => j(null),
+					onClick: () => M(null),
 					children: "Voltar"
 				})]
-			}), B && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			}), W && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsxs(p, { children: [
 					/* @__PURE__ */ jsx(p$2, {
 						size: "1",
@@ -10138,8 +10723,8 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 						children: "Propriedade"
 					}),
 					/* @__PURE__ */ jsxs("select", {
-						value: B.property,
-						onChange: (n) => P(B.id, { property: n.target.value }),
+						value: W.property,
+						onChange: (n) => H(W.id, { property: n.target.value }),
 						style: {
 							width: "100%",
 							padding: "6px",
@@ -10157,10 +10742,10 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 							children: "Outra..."
 						})]
 					}),
-					B.property === "__custom__" && /* @__PURE__ */ jsx(u$1, {
+					W.property === "__custom__" && /* @__PURE__ */ jsx(u$1, {
 						placeholder: "Nome da propriedade",
 						mt: "2",
-						onChange: (n) => P(B.id, { property: n.target.value })
+						onChange: (n) => H(W.id, { property: n.target.value })
 					})
 				] }),
 				/* @__PURE__ */ jsxs(p$1, {
@@ -10173,8 +10758,8 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 							as: "div",
 							children: "Operador"
 						}), /* @__PURE__ */ jsxs("select", {
-							value: B.operator,
-							onChange: (n) => P(B.id, { operator: n.target.value }),
+							value: W.operator,
+							onChange: (n) => H(W.id, { operator: n.target.value }),
 							style: {
 								width: "100%",
 								padding: "6px",
@@ -10221,7 +10806,7 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 						"contains",
 						"greaterThan",
 						"lessThan"
-					].includes(B.operator) && /* @__PURE__ */ jsxs(p, {
+					].includes(W.operator) && /* @__PURE__ */ jsxs(p, {
 						flexGrow: "1",
 						children: [/* @__PURE__ */ jsx(p$2, {
 							size: "1",
@@ -10229,8 +10814,8 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 							as: "div",
 							children: "Valor"
 						}), /* @__PURE__ */ jsx(u$1, {
-							value: B.value,
-							onChange: (n) => P(B.id, { value: n.target.value })
+							value: W.value,
+							onChange: (n) => H(W.id, { value: n.target.value })
 						})]
 					})]
 				}),
@@ -10244,9 +10829,9 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 							as: "div",
 							children: "Ação"
 						}), /* @__PURE__ */ jsxs("select", {
-							value: B.style.display === "none" ? "hide" : "style",
+							value: W.style.display === "none" ? "hide" : "style",
 							onChange: (n) => {
-								n.target.value === "hide" ? z(B.id, { display: "none" }) : z(B.id, { display: void 0 });
+								n.target.value === "hide" ? U(W.id, { display: "none" }) : U(W.id, { display: void 0 });
 							},
 							style: {
 								width: "100%",
@@ -10271,7 +10856,7 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 					size: "4",
 					my: "2"
 				}),
-				B.style.display !== "none" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				W.style.display !== "none" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(p$2, {
 						size: "2",
 						weight: "bold",
@@ -10286,8 +10871,8 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 							as: "div",
 							children: "Cor do Texto"
 						}), /* @__PURE__ */ jsx(ColorInput, {
-							color: B.style.color || "#000000",
-							onChange: (n) => z(B.id, { color: n })
+							color: W.style.color || "#000000",
+							onChange: (n) => U(W.id, { color: n })
 						})] }), /* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 							size: "1",
 							mb: "1",
@@ -10298,12 +10883,12 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 							children: [/* @__PURE__ */ jsx(p, {
 								flexGrow: "1",
 								children: /* @__PURE__ */ jsx(ColorInput, {
-									color: B.style.backgroundColor || "#ffffff",
-									onChange: (n) => z(B.id, { backgroundColor: n })
+									color: W.style.backgroundColor || "#ffffff",
+									onChange: (n) => U(W.id, { backgroundColor: n })
 								})
 							}), /* @__PURE__ */ jsx(o$1, {
 								variant: "outline",
-								onClick: () => z(B.id, { backgroundColor: void 0 }),
+								onClick: () => U(W.id, { backgroundColor: void 0 }),
 								title: "Limpar fundo",
 								children: /* @__PURE__ */ jsx(Cross2Icon, {})
 							})]
@@ -10314,18 +10899,18 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 						mt: "2",
 						children: [
 							/* @__PURE__ */ jsx(o, {
-								variant: B.style.fontWeight === "bold" ? "solid" : "outline",
-								onClick: () => z(B.id, { fontWeight: B.style.fontWeight === "bold" ? "normal" : "bold" }),
+								variant: W.style.fontWeight === "bold" ? "solid" : "outline",
+								onClick: () => U(W.id, { fontWeight: W.style.fontWeight === "bold" ? "normal" : "bold" }),
 								children: "Bold"
 							}),
 							/* @__PURE__ */ jsx(o, {
-								variant: B.style.fontStyle === "italic" ? "solid" : "outline",
-								onClick: () => z(B.id, { fontStyle: B.style.fontStyle === "italic" ? "normal" : "italic" }),
+								variant: W.style.fontStyle === "italic" ? "solid" : "outline",
+								onClick: () => U(W.id, { fontStyle: W.style.fontStyle === "italic" ? "normal" : "italic" }),
 								children: "Italic"
 							}),
 							/* @__PURE__ */ jsx(o, {
-								variant: B.style.textDecoration === "line-through" ? "solid" : "outline",
-								onClick: () => z(B.id, { textDecoration: B.style.textDecoration === "line-through" ? "none" : "line-through" }),
+								variant: W.style.textDecoration === "line-through" ? "solid" : "outline",
+								onClick: () => U(W.id, { textDecoration: W.style.textDecoration === "line-through" ? "none" : "line-through" }),
 								children: "Riscado"
 							})
 						]
@@ -10333,6 +10918,61 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 				] })
 			] })]
 		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(p$2, {
+				size: "2",
+				weight: "bold",
+				children: "Vínculos de Estilo (Data Binding)"
+			}),
+			/* @__PURE__ */ jsx(p$2, {
+				size: "2",
+				color: "gray",
+				children: "Vincule propriedades de estilo diretamente a variáveis."
+			}),
+			/* @__PURE__ */ jsx(p, {
+				style: {
+					border: "1px solid var(--gray-5)",
+					borderRadius: 4,
+					padding: 12
+				},
+				children: N.map((n) => /* @__PURE__ */ jsxs(p$1, {
+					align: "center",
+					justify: "between",
+					mb: "2",
+					style: { marginBottom: 8 },
+					children: [/* @__PURE__ */ jsx(p$2, {
+						size: "2",
+						children: n.label
+					}), /* @__PURE__ */ jsxs("select", {
+						value: A[n.value] || "",
+						onChange: (_) => P(n.value, _.target.value),
+						style: {
+							width: "200px",
+							padding: "6px",
+							borderRadius: "4px",
+							border: "1px solid var(--gray-6)",
+							backgroundColor: "var(--color-panel-solid)",
+							color: "var(--gray-12)",
+							fontSize: "13px"
+						},
+						children: [/* @__PURE__ */ jsx("option", {
+							value: "",
+							children: "(Nenhum)"
+						}), E.map((n) => /* @__PURE__ */ jsx("option", {
+							value: n.dataName,
+							children: n.name
+						}, n.dataName))]
+					})]
+				}, n.value))
+			}),
+			/* @__PURE__ */ jsx(o$2, {
+				size: "4",
+				my: "2"
+			}),
+			/* @__PURE__ */ jsx(p$2, {
+				size: "2",
+				weight: "bold",
+				children: "Regras Condicionais"
+			}),
 			/* @__PURE__ */ jsx(p$2, {
 				size: "2",
 				color: "gray",
@@ -10359,7 +10999,7 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 					p: "2",
 					style: { borderBottom: "1px solid var(--gray-4)" },
 					children: [/* @__PURE__ */ jsxs(p, {
-						onClick: () => j(n.id),
+						onClick: () => M(n.id),
 						style: {
 							cursor: "pointer",
 							flexGrow: 1
@@ -10393,45 +11033,45 @@ var AnimationSettings = ({ element: n, updateElement: _ }) => {
 					}), /* @__PURE__ */ jsx(o$1, {
 						variant: "ghost",
 						color: "red",
-						onClick: () => N(n.id),
+						onClick: () => B(n.id),
 						children: /* @__PURE__ */ jsx(TrashIcon, {})
 					})]
 				}, n.id))]
 			}),
 			/* @__PURE__ */ jsxs(o, {
-				onClick: M,
+				onClick: z,
 				children: [/* @__PURE__ */ jsx(PlusIcon, {}), " Adicionar Regra"]
 			})
 		] })
 	});
 };
 const ElementContextMenu = ({ children: n, element: _ }) => {
-	let { updateElement: E, removeElement: O, removeSelected: A, addElement: j, moveElement: M, copy: N, paste: P, state: z } = useEditor(), [B, H] = useState(!1), [U, W] = useState(!1), [G, Z] = useState(!1), [hj, gj] = 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, Bj] = useState(!1), [Vj, Hj] = useState(!1), [Gj, Kj] = useState(!1), [qj, Zj] = useState("formatting"), [Qj, $j] = useState({
 		open: !1,
 		prop: "",
 		value: ""
-	}), [_j, bj] = useState(_.content), [xj, Sj] = useState(_.dataBinding || ""), Ej = useRef(null), Dj = useRef(null), Oj = (n) => {
-		let _ = Ej.current;
+	}), [eM, tM] = useState(""), [nM, rM] = useState(_.content), [iM, aM] = useState(_.dataBinding || ""), oM = useRef(null), sM = useRef(null), cM = (n) => {
+		let _ = oM.current;
 		if (_) {
-			let E = _.selectionStart, O = _.selectionEnd, A = _j;
-			bj(A.substring(0, E) + `{{${n}}}` + A.substring(O)), setTimeout(() => {
+			let E = _.selectionStart, O = _.selectionEnd, A = nM;
+			rM(A.substring(0, E) + `{{${n}}}` + A.substring(O)), setTimeout(() => {
 				_.focus();
 				let O = E + n.length + 4;
 				_.setSelectionRange(O, O);
 			}, 0);
-		} else bj((_) => _ + `{{${n}}}`);
-	}, kj = (n) => {
+		} else rM((_) => _ + `{{${n}}}`);
+	}, lM = (n) => {
 		E(_.id, { style: {
 			..._.style,
 			...n
 		} });
-	}, Aj = () => {
+	}, uM = () => {
 		let n = z.elements.findIndex((n) => n.id === _.id);
 		n < z.elements.length - 1 && M(n, z.elements.length - 1);
-	}, jj = () => {
+	}, dM = () => {
 		let n = z.elements.findIndex((n) => n.id === _.id);
 		n > 0 && M(n, 0);
-	}, Mj = () => {
+	}, fM = () => {
 		z.selectedElementIds.includes(_.id) && z.selectedElementIds.length > 1 ? (N(), P()) : j({
 			type: _.type,
 			content: _.content,
@@ -10441,7 +11081,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			height: _.height,
 			style: _.style
 		});
-	}, Nj = [
+	}, pM = [
 		"#000000",
 		"#FFFFFF",
 		"#FF0000",
@@ -10451,8 +11091,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		"#808080",
 		"#800080",
 		"transparent"
-	], Pj = (n, _) => {
-		gj({
+	], mM = (n, _) => {
+		$j({
 			open: !0,
 			prop: n,
 			value: _
@@ -10460,8 +11100,37 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 	};
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(s$4, {
-			open: B,
-			onOpenChange: H,
+			open: W,
+			onOpenChange: G,
+			children: /* @__PURE__ */ jsxs(p$8, {
+				style: { maxWidth: 450 },
+				children: [/* @__PURE__ */ jsx(g$2, { children: "Renomear Camada" }), /* @__PURE__ */ jsxs(p$1, {
+					direction: "column",
+					gap: "3",
+					children: [/* @__PURE__ */ jsx(u$1, {
+						value: eM,
+						onChange: (n) => tM(n.target.value),
+						placeholder: "Nome da camada..."
+					}), /* @__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: () => {
+								B(_.id, eM), G(!1);
+							},
+							children: "Salvar"
+						})]
+					})]
+				})]
+			})
+		}),
+		/* @__PURE__ */ jsx(s$4, {
+			open: Z,
+			onOpenChange: Bj,
 			children: /* @__PURE__ */ jsxs(p$8, {
 				style: { maxWidth: 450 },
 				children: [/* @__PURE__ */ jsx(g$2, { children: "Editar Texto" }), /* @__PURE__ */ jsxs(p$1, {
@@ -10469,9 +11138,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					gap: "3",
 					children: [
 						/* @__PURE__ */ jsx(r, {
-							ref: Ej,
-							value: _j,
-							onChange: (n) => bj(n.target.value),
+							ref: oM,
+							value: nM,
+							onChange: (n) => rM(n.target.value),
 							placeholder: "Digite o novo texto...",
 							style: { height: 100 }
 						}),
@@ -10489,7 +11158,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 									color: "blue",
 									variant: "surface",
 									style: { cursor: "pointer" },
-									onClick: () => Oj(n.dataName),
+									onClick: () => cM(n.dataName),
 									children: n.name
 								}, n.dataName))
 							})]
@@ -10503,7 +11172,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								children: "Cancelar"
 							}) }), /* @__PURE__ */ jsx(o, {
 								onClick: () => {
-									E(_.id, { content: _j }), H(!1);
+									E(_.id, { content: nM }), Bj(!1);
 								},
 								children: "Salvar"
 							})]
@@ -10513,8 +11182,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			})
 		}),
 		/* @__PURE__ */ jsx(s$4, {
-			open: U,
-			onOpenChange: W,
+			open: Vj,
+			onOpenChange: Hj,
 			children: /* @__PURE__ */ jsxs(p$8, {
 				style: { maxWidth: 450 },
 				children: [/* @__PURE__ */ jsx(g$2, { children: "Vincular Dados Manualmente" }), /* @__PURE__ */ jsxs(p$1, {
@@ -10526,8 +11195,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							children: "Nome da propriedade (ex: titulo, preco, imagem):"
 						}),
 						/* @__PURE__ */ jsx(u$1, {
-							value: xj,
-							onChange: (n) => Sj(n.target.value),
+							value: iM,
+							onChange: (n) => aM(n.target.value),
 							placeholder: "propriedade"
 						}),
 						/* @__PURE__ */ jsxs(p$1, {
@@ -10539,8 +11208,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								children: "Cancelar"
 							}) }), /* @__PURE__ */ jsx(o, {
 								onClick: () => {
-									let n = xj, O = { dataBinding: n };
-									_.type === "text" && (O.content = `{{${n}}}`), E(_.id, O), W(!1);
+									let n = iM, O = { dataBinding: n };
+									_.type === "text" && (O.content = `{{${n}}}`), E(_.id, O), Hj(!1);
 								},
 								children: "Vincular"
 							})]
@@ -10550,8 +11219,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			})
 		}),
 		/* @__PURE__ */ jsx(s$4, {
-			open: hj.open,
-			onOpenChange: (n) => gj((_) => ({
+			open: Qj.open,
+			onOpenChange: (n) => $j((_) => ({
 				..._,
 				open: n
 			})),
@@ -10560,8 +11229,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				children: [
 					/* @__PURE__ */ jsx(g$2, { children: "Selecionar Cor" }),
 					/* @__PURE__ */ jsx(ColorPickerContent, {
-						color: hj.value,
-						onChange: (n) => gj((_) => ({
+						color: Qj.value,
+						onChange: (n) => $j((_) => ({
 							..._,
 							value: n
 						}))
@@ -10576,7 +11245,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							children: "Cancelar"
 						}) }), /* @__PURE__ */ jsx(o, {
 							onClick: () => {
-								kj({ [hj.prop]: hj.value }), gj((n) => ({
+								lM({ [Qj.prop]: Qj.value }), $j((n) => ({
 									...n,
 									open: !1
 								}));
@@ -10589,12 +11258,13 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		}),
 		/* @__PURE__ */ jsx(ElementAdvancedSettings, {
 			elementId: _.id,
-			open: G,
-			onOpenChange: Z
+			open: Gj,
+			onOpenChange: Kj,
+			initialTab: qj
 		}),
 		/* @__PURE__ */ jsx("input", {
 			type: "file",
-			ref: Dj,
+			ref: sM,
 			style: { display: "none" },
 			accept: "image/*",
 			onChange: (n) => {
@@ -10660,7 +11330,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
 							onSelect: () => {
-								Sj(_.dataBinding || ""), W(!0);
+								aM(_.dataBinding || ""), Hj(!0);
 							},
 							children: "Outro / Manual..."
 						}),
@@ -10676,19 +11346,37 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				_.type === "text" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
 					onSelect: () => {
-						bj(_.content), H(!0);
+						rM(_.content), Bj(!0);
 					},
 					children: "Editar Texto..."
 				}), /* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })] }),
 				/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
-					onSelect: () => Z(!0),
+					onSelect: () => {
+						tM(_.name || (_.type === "group" ? "Grupo" : "Elemento")), G(!0);
+					},
+					children: "Renomear..."
+				}),
+				z.selectedElementIds.length >= 1 && (z.selectedElementIds.includes(_.id) || _.groupId && z.selectedElementIds.includes(_.groupId)) && /* @__PURE__ */ jsx(Item2$1, {
+					className: "ContextMenuItem",
+					onSelect: () => H(z.selectedElementIds),
+					children: z.selectedElementIds.length > 1 ? "Agrupar Seleção" : "Agrupar (Criar Pasta)"
+				}),
+				(_.type === "group" || _.groupId && z.selectedElementIds.includes(_.groupId)) && /* @__PURE__ */ jsx(Item2$1, {
+					className: "ContextMenuItem",
+					onSelect: () => U(_.type === "group" ? _.id : _.groupId),
+					children: _.type === "group" ? "Desagrupar" : "Desagrupar Pai"
+				}),
+				/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
+				/* @__PURE__ */ jsx(Item2$1, {
+					className: "ContextMenuItem",
+					onSelect: () => Kj(!0),
 					children: "Configurações Avançadas..."
 				}),
 				/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 				/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
-					onSelect: Mj,
+					onSelect: fM,
 					children: z.selectedElementIds.includes(_.id) && z.selectedElementIds.length > 1 ? `Duplicar Selecionados (${z.selectedElementIds.length})` : "Duplicar"
 				}),
 				/* @__PURE__ */ jsx(Item2$1, {
@@ -10712,7 +11400,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						alignOffset: -5,
 						children: [/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => Dj.current?.click(),
+							onSelect: () => sM.current?.click(),
 							children: "Carregar do Computador"
 						}), /* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
@@ -10738,17 +11426,17 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: [
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => kj({ objectFit: "cover" }),
+								onSelect: () => lM({ objectFit: "cover" }),
 								children: "Preencher (Cover)"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => kj({ objectFit: "contain" }),
+								onSelect: () => lM({ objectFit: "contain" }),
 								children: "Ajustar (Contain)"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => kj({ objectFit: "fill" }),
+								onSelect: () => lM({ objectFit: "fill" }),
 								children: "Esticar (Fill)"
 							})
 						]
@@ -10767,11 +11455,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					alignOffset: -5,
 					children: [/* @__PURE__ */ jsx(Item2$1, {
 						className: "ContextMenuItem",
-						onSelect: Aj,
+						onSelect: uM,
 						children: "Trazer para frente"
 					}), /* @__PURE__ */ jsx(Item2$1, {
 						className: "ContextMenuItem",
-						onSelect: jj,
+						onSelect: dM,
 						children: "Enviar para trás"
 					})]
 				}) })] }),
@@ -10789,7 +11477,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						alignOffset: -5,
 						children: z.availableFonts && z.availableFonts.map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => kj({ fontFamily: n }),
+							onSelect: () => lM({ fontFamily: n }),
 							style: { fontFamily: n },
 							children: [n, _.style?.fontFamily === n && /* @__PURE__ */ jsx("div", {
 								className: "RightSlot",
@@ -10818,7 +11506,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							64
 						].map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => kj({ fontSize: `${n}px` }),
+							onSelect: () => lM({ fontSize: `${n}px` }),
 							children: [n, "px"]
 						}, n))
 					}) })] }),
@@ -10833,9 +11521,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						sideOffset: 2,
 						alignOffset: -5,
 						children: [
-							Nj.filter((n) => n !== "transparent").map((n) => /* @__PURE__ */ jsxs(Item2$1, {
+							pM.filter((n) => n !== "transparent").map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => kj({ color: n }),
+								onSelect: () => lM({ color: n }),
 								children: [/* @__PURE__ */ jsx("div", { style: {
 									width: 12,
 									height: 12,
@@ -10847,7 +11535,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => Pj("color", _.style?.color || "#000000"),
+								onSelect: () => mM("color", _.style?.color || "#000000"),
 								children: "Outra Cor..."
 							})
 						]
@@ -10864,11 +11552,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						alignOffset: -5,
 						children: [/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => kj({ fontWeight: "normal" }),
+							onSelect: () => lM({ fontWeight: "normal" }),
 							children: "Normal"
 						}), /* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => kj({ fontWeight: "bold" }),
+							onSelect: () => lM({ fontWeight: "bold" }),
 							children: "Negrito"
 						})]
 					}) })] }),
@@ -10885,17 +11573,17 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: [
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => kj({ textAlign: "left" }),
+								onSelect: () => lM({ textAlign: "left" }),
 								children: "Esquerda"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => kj({ textAlign: "center" }),
+								onSelect: () => lM({ textAlign: "center" }),
 								children: "Centro"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => kj({ textAlign: "right" }),
+								onSelect: () => lM({ textAlign: "right" }),
 								children: "Direita"
 							})
 						]
@@ -10913,7 +11601,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: [
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => kj({
+								onSelect: () => lM({
 									display: "flex",
 									flexDirection: "column",
 									justifyContent: "flex-start"
@@ -10922,7 +11610,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => kj({
+								onSelect: () => lM({
 									display: "flex",
 									flexDirection: "column",
 									justifyContent: "center"
@@ -10931,7 +11619,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => kj({
+								onSelect: () => lM({
 									display: "flex",
 									flexDirection: "column",
 									justifyContent: "flex-end"
@@ -10952,9 +11640,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					sideOffset: 2,
 					alignOffset: -5,
 					children: [
-						Nj.map((n) => /* @__PURE__ */ jsxs(Item2$1, {
+						pM.map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => kj({ backgroundColor: n }),
+							onSelect: () => lM({ backgroundColor: n }),
 							children: [/* @__PURE__ */ jsx("div", { style: {
 								width: 12,
 								height: 12,
@@ -10966,7 +11654,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 						/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => Pj("backgroundColor", _.style?.backgroundColor || "transparent"),
+							onSelect: () => mM("backgroundColor", _.style?.backgroundColor || "transparent"),
 							children: "Outra Cor..."
 						})
 					]
@@ -10977,23 +11665,33 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						className: "RightSlot",
 						children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 					})]
-				}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(SubContent2$1, {
+				}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsxs(SubContent2$1, {
 					className: "ContextMenuSubContent",
 					sideOffset: 2,
 					alignOffset: -5,
 					children: [
-						0,
-						4,
-						8,
-						12,
-						16,
-						24,
-						"50%"
-					].map((n) => /* @__PURE__ */ jsx(Item2$1, {
-						className: "ContextMenuItem",
-						onSelect: () => kj({ borderRadius: typeof n == "number" ? `${n}px` : n }),
-						children: n === "50%" ? "Círculo" : `${n}px`
-					}, n))
+						[
+							0,
+							4,
+							8,
+							12,
+							16,
+							24,
+							"50%"
+						].map((n) => /* @__PURE__ */ jsx(Item2$1, {
+							className: "ContextMenuItem",
+							onSelect: () => lM({ 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);
+							},
+							children: "Personalizar..."
+						})
+					]
 				}) })] }),
 				/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
 					className: "ContextMenuSubTrigger",
@@ -11001,23 +11699,33 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						className: "RightSlot",
 						children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 					})]
-				}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsx(SubContent2$1, {
+				}), /* @__PURE__ */ jsx(Portal2$1, { children: /* @__PURE__ */ jsxs(SubContent2$1, {
 					className: "ContextMenuSubContent",
 					sideOffset: 2,
 					alignOffset: -5,
 					children: [
-						0,
-						4,
-						8,
-						12,
-						16,
-						24,
-						32
-					].map((n) => /* @__PURE__ */ jsxs(Item2$1, {
-						className: "ContextMenuItem",
-						onSelect: () => kj({ padding: `${n}px` }),
-						children: [n, "px"]
-					}, n))
+						[
+							0,
+							4,
+							8,
+							12,
+							16,
+							24,
+							32
+						].map((n) => /* @__PURE__ */ jsxs(Item2$1, {
+							className: "ContextMenuItem",
+							onSelect: () => lM({ padding: `${n}px` }),
+							children: [n, "px"]
+						}, n)),
+						/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
+						/* @__PURE__ */ jsx(Item2$1, {
+							className: "ContextMenuItem",
+							onSelect: () => {
+								Zj("style"), Kj(!0);
+							},
+							children: "Personalizar..."
+						})
+					]
 				}) })] })
 			]
 		}) })] })
@@ -11026,42 +11734,52 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 	let { selectElement: E, updateElement: O, updateElements: A, state: j } = useEditor(), [M, N] = useState(!1), [P, z] = useState(!1), B = useRef({
 		x: 0,
 		y: 0
-	}), H = useRef({}), U = useRef(!1), G = useRef(!1), Z = useRef(0), hj = useRef(0), gj = useRef({
+	}), H = useRef({}), U = useRef(!1), G = useRef(!1), Z = useRef(0), Bj = useRef(0), Vj = useRef({
 		x: 0,
 		y: 0
-	}), _j = j.canvasHeight || 150, bj = j.isList ? j.mockData.length > 0 ? j.mockData[0] : null : j.singleMockData, xj = n.content, Sj = {};
-	if (bj) {
-		if (n.type === "text") xj = xj.replace(/\{\{(.*?)\}\}/g, (_, E) => {
-			let O = bj[E.trim()];
+	}), 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()];
 			return O == null ? _ : n.formatting ? formatValue(O, n.formatting) : String(O);
 		});
 		else if (n.type === "image") if (n.dataBinding) {
-			let _ = bj[n.dataBinding];
-			_ != null && (xj = String(_));
-		} else xj = xj.replace(/\{\{(.*?)\}\}/g, (n, _) => {
-			let E = bj[_.trim()];
+			let _ = Gj[n.dataBinding];
+			_ != null && (Kj = String(_));
+		} else Kj = Kj.replace(/\{\{(.*?)\}\}/g, (n, _) => {
+			let E = Gj[_.trim()];
 			return E == null ? n : String(E);
 		});
-		n.conditions && n.conditions.forEach((n) => {
-			let _ = bj[n.property];
-			checkCondition(_, n.operator, n.value) && (Sj = {
-				...Sj,
+		n.styleBindings && Object.entries(n.styleBindings).forEach(([n, _]) => {
+			let E = Gj[_];
+			E != null && (qj = {
+				...qj,
+				[n]: String(E)
+			});
+		}), n.conditions && n.conditions.forEach((n) => {
+			let _ = Gj[n.property];
+			checkCondition(_, n.operator, n.value) && (qj = {
+				...qj,
 				...n.style
 			});
 		});
 	}
-	let Cj = Sj.display === "none";
-	if (Cj && _) {
-		let { display: n, ..._ } = Sj;
-		Sj = _;
+	let Jj = qj.display === "none";
+	if (Jj && _) {
+		let { display: n, ..._ } = qj;
+		qj = _;
 	}
-	let Ej = (_) => {
+	let Zj = (_) => {
 		_.stopPropagation(), !U.current && !G.current && !M && (_.shiftKey ? E(n.id, !0) : E(n.id, !1));
-	}, Dj = (O) => {
+	}, Qj = (O) => {
 		if (O.button !== 0) return;
 		O.stopPropagation();
 		let A = O.shiftKey;
-		U.current = !1, G.current = !1, _ || (E(n.id, A), G.current = !0), N(!0), B.current = {
+		if (U.current = !1, G.current = !1, n.groupId && !_) {
+			E(n.groupId, A);
+			return;
+		}
+		_ || (E(n.id, A), G.current = !0), N(!0), B.current = {
 			x: O.clientX,
 			y: O.clientY
 		};
@@ -11074,17 +11792,17 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				y: n.y
 			});
 		}), H.current = P;
-	}, Oj = (_) => {
+	}, $j = (_) => {
 		_.stopPropagation(), _.preventDefault(), z(!0);
 		let E = _.target.closest(".resizable-element");
 		if (E) {
 			let O = E.getBoundingClientRect();
-			gj.current = {
+			Vj.current = {
 				x: O.left + O.width / 2,
 				y: O.top + O.height / 2
 			};
-			let A = _.clientX - gj.current.x, j = _.clientY - gj.current.y;
-			Z.current = Math.atan2(j, A) * (180 / Math.PI), hj.current = n.rotation || 0;
+			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;
 		}
 	};
 	useEffect(() => {
@@ -11093,7 +11811,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				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]) => {
 					let A = O.x + n, M = O.y + E;
-					return j.isList && (M = Math.max(0, M)), {
+					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: _,
 						changes: {
 							x: A,
@@ -11103,7 +11821,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				}), !1);
 			}
 			if (P) {
-				let E = _.clientX - gj.current.x, A = _.clientY - gj.current.y, j = Math.atan2(A, E) * (180 / Math.PI) - Z.current, M = (hj.current + j) % 360;
+				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;
 				O(n.id, { rotation: M }, !1);
 			}
 		}, E = () => {
@@ -11121,7 +11839,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		j.isList,
 		j.selectedElementIds
 	]);
-	let kj = {
+	let eM = {
 		position: "absolute",
 		left: 0,
 		top: 0,
@@ -11138,7 +11856,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		wordBreak: n.autoGrow ? "break-word" : void 0,
 		userSelect: "none",
 		...n.style,
-		...Sj
+		...qj
 	};
 	return /* @__PURE__ */ jsx(Resizable, {
 		className: "resizable-element",
@@ -11146,7 +11864,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			width: n.width ?? 100,
 			height: n.autoGrow ? "auto" : n.height ?? 100
 		},
-		maxHeight: j.isList ? Math.max(10, _j - n.y) : void 0,
+		maxHeight: j.isList ? Math.max(10, Hj - n.y) : void 0,
 		onResizeStop: (_, E, A, j) => {
 			let M = (n.width ?? 100) + j.width, N = (n.height ?? 100) + j.height;
 			O(n.id, {
@@ -11158,8 +11876,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			position: "absolute",
 			transform: `translate(${n.x ?? 0}px, ${n.y ?? 0}px) rotate(${n.rotation || 0}deg)`,
 			height: n.autoGrow ? "auto" : void 0,
-			display: Cj && !_ ? "none" : void 0,
-			opacity: Cj && _ ? .4 : 1
+			display: Jj && !_ ? "none" : void 0,
+			opacity: Jj && _ ? .4 : 1
 		},
 		enable: _ && !n.autoGrow ? void 0 : {
 			top: !1,
@@ -11171,6 +11889,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			bottomLeft: !1,
 			topLeft: !1
 		},
+		grid: j.gridSize > 0 ? [j.gridSize, j.gridSize] : void 0,
 		children: /* @__PURE__ */ jsx(ElementContextMenu, {
 			element: n,
 			children: /* @__PURE__ */ jsxs("div", {
@@ -11180,9 +11899,10 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					position: "relative"
 				},
 				children: [/* @__PURE__ */ jsxs(p, {
-					style: kj,
-					onMouseDown: Dj,
-					onClick: Ej,
+					style: eM,
+					onMouseDown: Qj,
+					onClick: Zj,
+					title: n.name,
 					onMouseEnter: (n) => {
 						_ || (n.currentTarget.style.borderColor = "var(--gray-6)");
 					},
@@ -11195,10 +11915,10 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								width: "100%",
 								height: "100%"
 							},
-							children: xj
+							children: Kj
 						}),
-						n.type === "image" && (xj ? /* @__PURE__ */ jsx("img", {
-							src: xj,
+						n.type === "image" && (Kj ? /* @__PURE__ */ jsx("img", {
+							src: Kj,
 							alt: "Element",
 							style: {
 								width: "100%",
@@ -11224,7 +11944,30 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						n.type === "box" && /* @__PURE__ */ jsx(p, { style: {
 							width: "100%",
 							height: "100%"
-						} })
+						} }),
+						n.type === "group" && /* @__PURE__ */ jsx(p, {
+							style: {
+								width: "100%",
+								height: "100%",
+								border: _ ? "1px dashed var(--accent-9)" : "1px dashed var(--gray-6)",
+								opacity: .5,
+								pointerEvents: "none"
+							},
+							children: /* @__PURE__ */ jsx(p$2, {
+								size: "1",
+								style: {
+									position: "absolute",
+									top: 0,
+									left: 0,
+									backgroundColor: "var(--accent-3)",
+									color: "var(--accent-11)",
+									padding: "2px 6px",
+									fontSize: "10px",
+									borderBottomRightRadius: "4px"
+								},
+								children: n.name || "Grupo"
+							})
+						})
 					]
 				}), _ && /* @__PURE__ */ jsx(p, {
 					style: {
@@ -11240,7 +11983,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						zIndex: 50,
 						boxShadow: "0 0 0 2px white"
 					},
-					onMouseDown: Oj,
+					onMouseDown: $j,
 					children: /* @__PURE__ */ jsx(p, { style: {
 						position: "absolute",
 						top: 12,
@@ -11255,16 +11998,58 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		})
 	});
 }), Canvas = () => {
-	let { state: n, selectElement: _, addElement: E } = useEditor(), O = () => {
-		_(null);
-	}, A = (n) => {
+	let { state: n, selectElement: _, setSelectedElements: E, addElement: O } = useEditor(), A = useRef(null), [j, M] = useState(null), N = useRef(!1), P = useRef({
+		x: 0,
+		y: 0
+	}), z = useRef([]), B = (E) => {
+		if (E.target !== A.current && E.target !== E.currentTarget) return;
+		N.current = !0;
+		let O = A.current?.getBoundingClientRect();
+		O && (P.current = {
+			x: E.clientX - O.left,
+			y: E.clientY - O.top
+		}, z.current = n.selectedElementIds, E.shiftKey || (_(null), z.current = []), window.addEventListener("mousemove", U), window.addEventListener("mouseup", G));
+	}, U = useCallback((_) => {
+		if (!N.current || !A.current) return;
+		let O = A.current.getBoundingClientRect(), j = _.clientX - O.left, B = _.clientY - O.top, H = Math.min(P.current.x, j), U = Math.min(P.current.y, B), W = Math.abs(j - P.current.x), G = Math.abs(B - P.current.y);
+		if (M({
+			x: H,
+			y: U,
+			width: W,
+			height: G
+		}), W > 2 || G > 2) {
+			let _ = [];
+			n.elements.forEach((n) => {
+				let E = n.x ?? 0, O = n.y ?? 0, A = n.width ?? 100, j = n.height ?? 100, M = E + A, N = O + j, P = H + W, z = U + G;
+				E < P && M > H && O < z && N > U && _.push(n.id);
+			}), E(Array.from(new Set([...z.current, ..._])));
+		}
+	}, [n.elements, E]), G = useCallback(() => {
+		N.current = !1, M(null), window.removeEventListener("mousemove", U), window.removeEventListener("mouseup", G);
+	}, [U]);
+	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) => {
+		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]);
+	useEffect(() => () => {
+		window.removeEventListener("mousemove", Hj), window.removeEventListener("mouseup", Gj);
+	}, [Hj, Gj]);
+	let Kj = (n) => {
 		n.preventDefault(), n.dataTransfer.dropEffect = "copy";
-	}, j = (n) => {
+	}, qj = (n) => {
 		n.preventDefault();
 		let _ = n.dataTransfer.getData("application/x-editor-prop");
 		if (_) {
-			let O = n.currentTarget.getBoundingClientRect(), A = n.clientX - O.left, j = n.clientY - O.top;
-			E({
+			let E = n.currentTarget.getBoundingClientRect(), A = n.clientX - E.left, j = n.clientY - E.top;
+			O({
 				type: "text",
 				content: `{{${_}}}`,
 				x: A,
@@ -11274,11 +12059,12 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				dataBinding: _
 			});
 		}
-	}, M = n.canvasHeight || 150;
+	}, Jj = n.canvasHeight || 150;
 	return /* @__PURE__ */ jsxs(p, {
-		onClick: O,
-		onDragOver: A,
-		onDrop: j,
+		ref: A,
+		onMouseDown: B,
+		onDragOver: Kj,
+		onDrop: qj,
 		style: {
 			width: "100%",
 			height: "100%",
@@ -11289,33 +12075,60 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			backgroundSize: "20px 20px"
 		},
 		children: [
-			n.isList && /* @__PURE__ */ jsx("div", {
+			j && /* @__PURE__ */ jsx("div", { style: {
+				position: "absolute",
+				left: j.x,
+				top: j.y,
+				width: j.width,
+				height: j.height,
+				backgroundColor: "rgba(0, 120, 255, 0.1)",
+				border: "1px solid rgba(0, 120, 255, 0.5)",
+				pointerEvents: "none",
+				zIndex: 9999
+			} }),
+			n.isList && /* @__PURE__ */ jsxs("div", {
 				style: {
 					position: "absolute",
-					top: M,
+					top: Jj,
 					left: 0,
 					right: 0,
-					borderBottom: "2px dashed var(--accent-9)",
-					pointerEvents: "none",
-					zIndex: 10
+					height: "10px",
+					marginTop: "-5px",
+					cursor: "ns-resize",
+					zIndex: 100,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					group: "resize-handle"
 				},
-				children: /* @__PURE__ */ jsxs("div", {
+				onMouseDown: Vj,
+				children: [/* @__PURE__ */ jsx("div", { style: {
+					width: "100%",
+					height: "2px",
+					backgroundColor: "var(--accent-9)",
+					borderBottom: "none",
+					opacity: .8,
+					boxShadow: "0 1px 4px rgba(0,0,0,0.2)"
+				} }), /* @__PURE__ */ jsxs("div", {
 					style: {
 						position: "absolute",
 						right: 10,
-						bottom: 2,
+						top: -20,
 						backgroundColor: "var(--accent-9)",
 						color: "white",
-						fontSize: "10px",
-						padding: "2px 4px",
-						borderRadius: "2px"
+						fontSize: "11px",
+						padding: "2px 6px",
+						borderRadius: "4px",
+						fontWeight: 500,
+						pointerEvents: "none",
+						boxShadow: "0 2px 5px rgba(0,0,0,0.1)"
 					},
 					children: [
-						"Fim do Item (",
-						M,
-						"px)"
+						"Altura do Item: ",
+						Jj,
+						"px"
 					]
-				})
+				})]
 			}),
 			n.elements.length === 0 && /* @__PURE__ */ jsx(p$1, {
 				align: "center",
@@ -11334,25 +12147,30 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		]
 	});
 }, EditorSettings = () => {
-	let { state: n, updateListSettings: _, setCanvasHeight: E } = useEditor(), [O, A] = useState(!1), [j, M] = useState(""), [N, P] = useState("asc"), [z, B] = useState("bottom"), [H, U] = useState("down"), [G, Z] = useState("150"), [hj, gj] = useState(""), [_j, vj] = useState("slideIn"), [bj, xj] = useState(.3), [Sj, Cj] = 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, Bj] = useState("150"), [Vj, Hj] = useState(""), [Uj, Gj] = useState("0"), [Kj, qj] = useState("slideIn"), [Jj, Zj] = useState(.3), [Qj, $j] = useState("ease-out");
 	return useEffect(() => {
-		if (O) {
-			M(n.listSettings.sortProp || "__none__"), P(n.listSettings.sortOrder || "asc"), B(n.listSettings.newestPosition || "bottom"), U(n.listSettings.scrollDirection || "down"), gj(n.listSettings.containerHeight ? String(n.listSettings.containerHeight) : ""), Z(String(n.canvasHeight || 150));
+		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));
 			let _ = n.listSettings.entryAnimation;
-			vj(_?.type || "slideIn"), xj(_?.duration || .3), Cj(_?.timingFunction || "ease-out");
+			qj(_?.type || "slideIn"), Zj(_?.duration || .3), $j(_?.timingFunction || "ease-out");
 		}
-	}, [O]), useEffect(() => {
-		if (!O) return;
-		let _ = parseInt(G, 10);
+	}, [A]), useEffect(() => {
+		if (!A) return;
+		let _ = parseInt(Z, 10);
 		!isNaN(_) && _ > 0 && n.canvasHeight !== _ && E(_);
+		let j = parseInt(Uj, 10);
+		!isNaN(j) && j >= 0 && n.gridSize !== j && O(j);
 	}, [
-		G,
-		O,
+		Z,
+		Uj,
+		A,
 		E,
-		n.canvasHeight
+		O,
+		n.canvasHeight,
+		n.gridSize
 	]), /* @__PURE__ */ jsxs(s$4, {
-		open: O,
-		onOpenChange: A,
+		open: A,
+		onOpenChange: j,
 		children: [/* @__PURE__ */ jsx(n$3, { children: /* @__PURE__ */ jsxs(o, {
 			variant: "soft",
 			color: "gray",
@@ -11393,8 +12211,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										as: "div",
 										children: "Propriedade para Ordenar (ex: data, id)"
 									}), /* @__PURE__ */ jsxs("select", {
-										value: j,
-										onChange: (n) => M(n.target.value),
+										value: M,
+										onChange: (n) => N(n.target.value),
 										style: {
 											width: "100%",
 											padding: "8px",
@@ -11419,8 +12237,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 									as: "div",
 									children: "Direção"
 								}), /* @__PURE__ */ jsxs("select", {
-									value: N,
-									onChange: (n) => P(n.target.value),
+									value: P,
+									onChange: (n) => z(n.target.value),
 									style: {
 										width: "150px",
 										padding: "8px",
@@ -11451,8 +12269,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										as: "div",
 										children: "Posição do Recente"
 									}), /* @__PURE__ */ jsxs("select", {
-										value: z,
-										onChange: (n) => B(n.target.value),
+										value: B,
+										onChange: (n) => H(n.target.value),
 										style: {
 											width: "100%",
 											padding: "8px",
@@ -11479,8 +12297,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										as: "div",
 										children: "Comportamento de Rolagem"
 									}), /* @__PURE__ */ jsxs("select", {
-										value: H,
-										onChange: (n) => U(n.target.value),
+										value: U,
+										onChange: (n) => G(n.target.value),
 										style: {
 											width: "100%",
 											padding: "8px",
@@ -11522,8 +12340,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										/* @__PURE__ */ jsx(u$1, {
 											type: "number",
 											min: "10",
-											value: G,
-											onChange: (n) => Z(n.target.value)
+											value: Z,
+											onChange: (n) => Bj(n.target.value)
 										}),
 										/* @__PURE__ */ jsx(p$2, {
 											size: "1",
@@ -11544,8 +12362,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 											type: "number",
 											min: "0",
 											placeholder: "Auto (100%)",
-											value: hj,
-											onChange: (n) => gj(n.target.value)
+											value: Vj,
+											onChange: (n) => Hj(n.target.value)
 										}),
 										/* @__PURE__ */ jsx(p$2, {
 											size: "1",
@@ -11571,8 +12389,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										as: "div",
 										children: "Efeito"
 									}), /* @__PURE__ */ jsxs("select", {
-										value: _j,
-										onChange: (n) => vj(n.target.value),
+										value: Kj,
+										onChange: (n) => qj(n.target.value),
 										style: {
 											width: "100%",
 											padding: "6px",
@@ -11591,10 +12409,22 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 												value: "slideIn",
 												children: "Slide (Padrão)"
 											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "smoothSlideUp",
+												children: "Slide Suave (Up)"
+											}),
 											/* @__PURE__ */ jsx("option", {
 												value: "fadeIn",
 												children: "Fade In"
 											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "popIn",
+												children: "Pop In"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "blurIn",
+												children: "Blur In"
+											}),
 											/* @__PURE__ */ jsx("option", {
 												value: "slideInLeft",
 												children: "Slide (Esq)"
@@ -11622,8 +12452,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										type: "number",
 										step: "0.1",
 										min: "0.1",
-										value: bj,
-										onChange: (n) => xj(parseFloat(n.target.value) || .3)
+										value: Jj,
+										onChange: (n) => Zj(parseFloat(n.target.value) || .3)
 									})] }),
 									/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 										size: "1",
@@ -11631,8 +12461,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 										as: "div",
 										children: "Curva (Easing)"
 									}), /* @__PURE__ */ jsxs("select", {
-										value: Sj,
-										onChange: (n) => Cj(n.target.value),
+										value: Qj,
+										onChange: (n) => $j(n.target.value),
 										style: {
 											width: "100%",
 											padding: "6px",
@@ -11667,6 +12497,32 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								size: "1",
 								color: "gray",
 								children: "Essa propriedade será usada para ordenar os itens no modo lista."
+							}),
+							/* @__PURE__ */ jsxs(p, {
+								mt: "2",
+								children: [/* @__PURE__ */ jsx(p$2, {
+									size: "2",
+									weight: "bold",
+									children: "Grid Snapping (Travar)"
+								}), /* @__PURE__ */ jsx(p$1, {
+									gap: "3",
+									align: "center",
+									mt: "2",
+									children: /* @__PURE__ */ jsxs(p, {
+										flexGrow: "1",
+										children: [/* @__PURE__ */ jsx(p$2, {
+											size: "1",
+											mb: "1",
+											as: "div",
+											children: "Tamanho do Grid (px) - 0 para desativar"
+										}), /* @__PURE__ */ jsx(u$1, {
+											type: "number",
+											value: Uj,
+											onChange: (n) => Gj(n.target.value),
+											placeholder: "0"
+										})]
+									})
+								})]
 							})
 						]
 					})
@@ -11681,20 +12537,20 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: "Cancelar"
 					}) }), /* @__PURE__ */ jsx(D$2, { children: /* @__PURE__ */ jsx(o, {
 						onClick: () => {
-							let n = parseInt(hj, 10), E = {
-								type: _j,
-								duration: Number(bj),
+							let n = parseInt(Vj, 10), E = {
+								type: Kj,
+								duration: Number(Jj),
 								delay: 0,
-								timingFunction: Sj
+								timingFunction: Qj
 							};
 							_({
-								sortProp: j === "__none__" ? "" : j,
-								sortOrder: N,
-								newestPosition: z,
-								scrollDirection: H,
+								sortProp: M === "__none__" ? "" : M,
+								sortOrder: P,
+								newestPosition: B,
+								scrollDirection: U,
 								containerHeight: !isNaN(n) && n > 0 ? n : void 0,
 								entryAnimation: E
-							}), A(!1);
+							}), j(!1);
 						},
 						children: "Salvar Alterações"
 					}) })]
@@ -11849,13 +12705,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));
-	}, hj = () => {
+	}, Bj = () => {
 		E = !0, O = !0, A.isProcessing || n(Z);
 	};
 	return {
 		schedule: stepsOrder.reduce((n, _) => {
 			let O = M[_];
-			return n[_] = (n, _ = !1, A = !1) => (E || hj(), O.schedule(n, _, A)), n;
+			return n[_] = (n, _ = !1, A = !1) => (E || Bj(), O.schedule(n, _, A)), n;
 		}, {}),
 		cancel: (n) => {
 			for (let _ = 0; _ < stepsOrder.length; _++) M[stepsOrder[_]].cancel(n);
@@ -12213,40 +13069,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)), hj = M - j, gj = /* @__PURE__ */ millisecondsToSeconds(Math.sqrt(P / B)), _j = Math.abs(hj) < 5;
-	O ||= _j ? springDefaults.restSpeed.granular : springDefaults.restSpeed.default, A ||= _j ? springDefaults.restDelta.granular : springDefaults.restDelta.default;
-	let vj;
+	}), 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;
 	if (Z < 1) {
-		let n = calcAngularFreq(gj, Z);
-		vj = (_) => M - Math.exp(-Z * gj * _) * ((G + Z * gj * hj) / n * Math.sin(n * _) + hj * Math.cos(n * _));
-	} else if (Z === 1) vj = (n) => M - Math.exp(-gj * n) * (hj + (G + gj * hj) * n);
+		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);
 	else {
-		let n = gj * Math.sqrt(Z * Z - 1);
-		vj = (_) => {
-			let E = Math.exp(-Z * gj * _), O = Math.min(n * _, 300);
-			return M - E * ((G + Z * gj * hj) * Math.sinh(O) + n * hj * Math.cosh(O)) / n;
+		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 yj = {
+	let Wj = {
 		calculatedDuration: W && H || null,
 		next: (n) => {
-			let _ = vj(n);
+			let _ = Uj(n);
 			if (W) N.done = n >= H;
 			else {
 				let E = n === 0 ? G : 0;
-				Z < 1 && (E = n === 0 ? /* @__PURE__ */ secondsToMilliseconds(G) : calcGeneratorVelocity(vj, n, _));
+				Z < 1 && (E = n === 0 ? /* @__PURE__ */ secondsToMilliseconds(G) : calcGeneratorVelocity(Uj, 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(yj), maxGeneratorDuration), _ = generateLinearEasing((_) => yj.next(n * _).value, n, 30);
+			let n = Math.min(calcGeneratorDuration(Wj), maxGeneratorDuration), _ = generateLinearEasing((_) => Wj.next(n * _).value, n, 30);
 			return n + "ms " + _;
 		},
 		toTransition: () => {}
 	};
-	return yj;
+	return Wj;
 }
 spring.applyToOptions = (n) => {
 	let _ = createGeneratorEasing(n, 100, spring);
@@ -12256,26 +13112,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 * _, hj = H + Z, gj = M === void 0 ? hj : M(hj);
-	gj !== hj && (Z = gj - H);
-	let _j = (n) => -Z * Math.exp(-n / O), vj = (n) => gj + _j(n), yj = (n) => {
-		let _ = _j(n), E = vj(n);
-		U.done = Math.abs(_) <= z, U.value = U.done ? gj : E;
-	}, bj, xj, Sj = (n) => {
-		W(U.value) && (bj = n, xj = 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 * _, 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({
 			keyframes: [U.value, G(U.value)],
-			velocity: calcGeneratorVelocity(vj, n, U.value),
+			velocity: calcGeneratorVelocity(Uj, n, U.value),
 			damping: A,
 			stiffness: j,
 			restDelta: z,
 			restSpeed: B
 		}));
 	};
-	return Sj(0), {
+	return qj(0), {
 		calculatedDuration: null,
 		next: (n) => {
 			let _ = !1;
-			return !xj && bj === void 0 && (_ = !0, yj(n), Sj(n)), bj !== void 0 && n >= bj ? xj.next(n - bj) : (!_ && yj(n), U);
+			return !Kj && Gj === void 0 && (_ = !0, Wj(n), qj(n)), Gj !== void 0 && n >= Gj ? Kj.next(n - Gj) : (!_ && Wj(n), U);
 		}
 	};
 }
@@ -12395,22 +13251,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 hj = this.currentTime - P * (this.playbackSpeed >= 0 ? 1 : -1), gj = this.playbackSpeed >= 0 ? hj < 0 : hj > O;
-		this.currentTime = Math.max(hj, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = O);
-		let _j = this.currentTime, vj = E;
+		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;
 		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" && (vj = j)), _j = 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" && (Uj = j)), Hj = clamp(0, 1, E) * M;
 		}
-		let yj = gj ? {
+		let Wj = Vj ? {
 			done: !1,
 			value: z[0]
-		} : vj.next(_j);
-		A && (yj.value = A(yj.value));
-		let { done: bj } = yj;
-		!gj && N !== null && (bj = this.playbackSpeed >= 0 ? this.currentTime >= O : this.currentTime <= 0);
-		let xj = this.holdTime === null && (this.state === "finished" || this.state === "running" && bj);
-		return xj && W !== inertia && (yj.value = getFinalKeyframe$1(z, this.options, Z, this.speed)), G && G(yj.value), xj && this.finish(), yj;
+		} : 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;
 	}
 	then(n, _) {
 		return this.finished.then(n, _);
@@ -13473,46 +14329,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), hj = useConstant(() => /* @__PURE__ */ new Map()), gj = useRef(/* @__PURE__ */ new Set()), [bj, xj] = useState(H), [Sj, Tj] = useState(H);
+	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);
 	useIsomorphicLayoutEffect(() => {
 		G.current = !1, Z.current = H;
-		for (let n = 0; n < Sj.length; n++) {
-			let _ = getChildKey(Sj[n]);
-			W.includes(_) ? (hj.delete(_), gj.current.delete(_)) : hj.get(_) !== !0 && hj.set(_, !1);
+		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);
 		}
 	}, [
-		Sj,
+		qj,
 		W.length,
 		W.join("-")
 	]);
-	let Ej = [];
-	if (H !== bj) {
+	let Zj = [];
+	if (H !== Gj) {
 		let n = [...H];
-		for (let _ = 0; _ < Sj.length; _++) {
-			let E = Sj[_], O = getChildKey(E);
-			W.includes(O) || (n.splice(_, 0, E), Ej.push(E));
+		for (let _ = 0; _ < qj.length; _++) {
+			let E = qj[_], O = getChildKey(E);
+			W.includes(O) || (n.splice(_, 0, E), Zj.push(E));
 		}
-		return j === "wait" && Ej.length && (n = Ej), Tj(onlyElements(n)), xj(H), null;
+		return j === "wait" && Zj.length && (n = Zj), Xj(onlyElements(n)), Kj(H), null;
 	}
-	process.env.NODE_ENV !== "production" && j === "wait" && Sj.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: Dj } = useContext(LayoutGroupContext);
-	return jsx(Fragment$1, { children: Sj.map((n) => {
-		let U = getChildKey(n), _j = M && !z ? !1 : H === Sj || W.includes(U);
+	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);
 		return jsx(PresenceChild, {
-			isPresent: _j,
+			isPresent: Hj,
 			initial: !G.current || E ? void 0 : !1,
 			custom: _,
 			presenceAffectsLayout: A,
 			mode: j,
 			root: P,
-			onExitComplete: _j ? void 0 : () => {
-				if (gj.current.has(U)) return;
-				if (gj.current.add(U), hj.has(U)) hj.set(U, !0);
+			onExitComplete: Hj ? void 0 : () => {
+				if (Vj.current.has(U)) return;
+				if (Vj.current.add(U), Bj.has(U)) Bj.set(U, !0);
 				else return;
 				let n = !0;
-				hj.forEach((_) => {
+				Bj.forEach((_) => {
 					_ || (n = !1);
-				}), n && (Dj?.(), Tj(Z.current), M && B?.(), O && O());
+				}), n && (Qj?.(), Xj(Z.current), M && B?.(), O && O());
 			},
 			anchorX: N,
 			children: n
@@ -13941,12 +14797,12 @@ function useVisualElement(n, _, E, O, A, j) {
 	useInsertionEffect(() => {
 		H && Z.current && H.update(E, P);
 	});
-	let gj = E[optimizedAppearDataAttribute], _j = useRef(!!gj && !window.MotionHandoffIsComplete?.(gj) && window.MotionHasOptimisedAnimation?.(gj));
+	let Vj = E[optimizedAppearDataAttribute], Hj = useRef(!!Vj && !window.MotionHandoffIsComplete?.(Vj) && window.MotionHasOptimisedAnimation?.(Vj));
 	return useIsomorphicLayoutEffect(() => {
-		H && (Z.current = !0, window.MotionIsMounted = !0, H.updateFeatures(), H.scheduleRenderMicrotask(), _j.current && H.animationState && H.animationState.animateChanges());
+		H && (Z.current = !0, window.MotionIsMounted = !0, H.updateFeatures(), H.scheduleRenderMicrotask(), Hj.current && H.animationState && H.animationState.animateChanges());
 	}), useEffect(() => {
-		H && (!_j.current && H.animationState && H.animationState.animateChanges(), _j.current &&= (queueMicrotask(() => {
-			window.MotionHandoffMarkAsComplete?.(gj);
+		H && (!Hj.current && H.animationState && H.animationState.animateChanges(), Hj.current &&= (queueMicrotask(() => {
+			window.MotionHandoffMarkAsComplete?.(Vj);
 		}), !1), H.enteringChildren = void 0);
 	}), H;
 }
@@ -14624,34 +15480,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), hj = U === j ? W.isActive : null;
-			hj === !1 && (H = _);
-			let gj = G === N[U] && G !== M[U] && Z;
-			if (gj && O && n.manuallyAnimateOnMount && (gj = !1), W.protectedKeys = { ...B }, !W.isActive && hj === null || !G && !W.prevProp || isAnimationControls(G) || typeof G == "boolean") continue;
-			let _j = checkVariantsDidChange(W.prevProp, G), vj = _j || U === j && W.isActive && !gj && Z || _ > H && Z, yj = !1, bj = Array.isArray(G) ? G : [G], xj = bj.reduce(A(U), {});
-			hj === !1 && (xj = {});
-			let { prevResolvedValues: Sj = {} } = W, Cj = {
-				...Sj,
-				...xj
-			}, wj = (_) => {
-				vj = !0, z.has(_) && (yj = !0, z.delete(_)), W.needsAnimating[_] = !0;
+			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 E = n.getValue(_);
 				E && (E.liveStyle = !1);
 			};
-			for (let n in Cj) {
-				let _ = xj[n], E = Sj[n];
+			for (let n in Jj) {
+				let _ = Kj[n], E = qj[n];
 				if (B.hasOwnProperty(n)) continue;
 				let O = !1;
-				O = isKeyframesTarget(_) && isKeyframesTarget(E) ? !shallowCompare(_, E) : _ !== E, O ? _ == null ? z.add(n) : wj(n) : _ !== void 0 && z.has(n) ? wj(n) : W.protectedKeys[n] = !0;
+				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;
 			}
-			W.prevProp = G, W.prevResolvedValues = xj, W.isActive && (B = {
+			W.prevProp = G, W.prevResolvedValues = Kj, W.isActive && (B = {
 				...B,
-				...xj
-			}), O && n.blockInitialAnimation && (vj = !1);
-			let Tj = gj && _j;
-			vj && (!Tj || yj) && P.push(...bj.map((_) => {
+				...Kj
+			}), O && n.blockInitialAnimation && (Uj = !1);
+			let Xj = Vj && Hj;
+			Uj && (!Xj || Wj) && P.push(...Gj.map((_) => {
 				let E = { type: U };
-				if (typeof _ == "string" && O && !Tj && n.manuallyAnimateOnMount && n.parent) {
+				if (typeof _ == "string" && O && !Xj && n.manuallyAnimateOnMount && n.parent) {
 					let { parent: O } = n, A = resolveVariant(O, _);
 					if (O.enteringChildren && A) {
 						let { delayChildren: _ } = A.transition || {};
@@ -16149,7 +17005,66 @@ var gestureAnimations = {
 	...gestureAnimations,
 	...drag,
 	...layout
-}, createDomVisualElement), getAnimationVariants = (n) => {
+}, createDomVisualElement), isInside = (n, _) => n.id === _.id ? !1 : n.x >= _.x && n.x + n.width <= _.x + _.width && n.y >= _.y && n.y + n.height <= _.y + _.height, measureTextHeight = (n, _, E, O, A = 1.2) => {
+	if (!n) return 0;
+	let j = document.createElement("canvas").getContext("2d");
+	if (!j) return 0;
+	j.font = `${O}px ${E}`;
+	let M = n.split(" "), N = "", P = 1;
+	for (let n = 0; n < M.length; n++) {
+		let E = N + M[n] + " ";
+		j.measureText(E).width > _ && n > 0 ? (N = M[n] + " ", P++) : N = E;
+	}
+	let z = n.split("\n").length - 1;
+	return P += z, Math.ceil(P * O * A);
+};
+const processLayout = (n, _) => {
+	let E = n.map((n) => ({ ...n })), O = new Map(n.map((n) => [n.id, n])), A = [];
+	E.forEach((n) => {
+		if (n.type === "text" && n.autoGrow) {
+			let j = n.content;
+			_ && (j = j.replace(/\{\{(.*?)\}\}/g, (E, O) => {
+				let A = _[O.trim()];
+				return A == null ? E : n.formatting ? formatValue(A, n.formatting) : String(A);
+			}));
+			let M = parseInt(String(n.style?.fontSize || 16)), N = String(n.style?.fontFamily || "Arial"), P = measureTextHeight(j, n.width, N, M), z = n.height, B = P - z;
+			if (B > 0) {
+				n.height = P, n.content = j;
+				let _ = [], M = O.get(n.id);
+				M && E.forEach((n) => {
+					if (n.type === "box") {
+						let E = O.get(n.id);
+						E && isInside(M, E) && _.push(n);
+					}
+				});
+				let N = new Set([n.id]);
+				_.forEach((n) => {
+					n.height += B, N.add(n.id);
+				}), A.push({
+					triggerY: n.y + z,
+					delta: B,
+					ignoreIds: N
+				});
+			}
+		}
+	}), E.forEach((n) => {
+		let _ = O.get(n.id);
+		if (!_) return;
+		let E = 0;
+		A.forEach((O) => {
+			O.ignoreIds.has(n.id) || _.y >= O.triggerY - .1 && (E += O.delta);
+		}), n.y += E;
+	});
+	let j = 0;
+	return E.forEach((n) => {
+		let _ = n.y + n.height;
+		_ > j && (j = _);
+	}), {
+		elements: E,
+		totalHeight: j
+	};
+};
+var getAnimationVariants = (n) => {
 	if (!n || n.type === "none") return {
 		initial: {
 			opacity: 0,
@@ -16305,12 +17220,12 @@ var gestureAnimations = {
 			} })
 		]
 	});
-}, ListItem = ({ children: n, height: E, animation: O }) => {
-	let A = React.useMemo(() => getAnimationVariants(O), [O]);
+}, ListItem = ({ item: n, elements: E, animation: O }) => {
+	let { elements: A, totalHeight: j } = React.useMemo(() => processLayout(E, n), [E, n]), M = React.useMemo(() => getAnimationVariants(O), [O]);
 	return /* @__PURE__ */ jsx(motion.div, {
 		layout: !0,
-		initial: A.initial,
-		animate: A.animate,
+		initial: M.initial,
+		animate: M.animate,
 		exit: {
 			opacity: 0,
 			scale: .9
@@ -16325,17 +17240,21 @@ var gestureAnimations = {
 		},
 		style: {
 			position: "relative",
-			height: E,
+			height: j,
 			width: "100%",
 			marginBottom: "20px",
 			transformOrigin: "center center"
 		},
-		children: n
+		children: A.map((_) => /* @__PURE__ */ jsx(PreviewElementRenderer, {
+			element: _,
+			offsetY: 0,
+			dataContext: n
+		}, _.id))
 	});
 };
 const Preview = () => {
 	let { state: n } = useEditor(), [E, O] = React.useState(!1), [A, j] = React.useState([]);
-	React.useEffect(() => {
+	return React.useEffect(() => {
 		let _;
 		return E && n.isList ? (A.length === 0 && j([{
 			id: Date.now(),
@@ -16354,9 +17273,7 @@ const Preview = () => {
 		n.isList,
 		n.listSettings.newestPosition,
 		n.mockData
-	]);
-	let M = React.useMemo(() => n.canvasHeight ? n.canvasHeight : n.elements.length === 0 ? 0 : Math.max(...n.elements.map((n) => n.y + n.height)), [n.elements, n.canvasHeight]);
-	return /* @__PURE__ */ jsxs(p, {
+	]), /* @__PURE__ */ jsxs(p, {
 		style: {
 			width: "100%",
 			height: "100%",
@@ -16367,7 +17284,7 @@ const Preview = () => {
 		children: [n.isList && /* @__PURE__ */ jsx(p, {
 			style: {
 				position: "absolute",
-				top: 10,
+				bottom: 10,
 				right: 10,
 				zIndex: 100,
 				backgroundColor: "var(--color-surface)",
@@ -16430,13 +17347,9 @@ const Preview = () => {
 								mode: "popLayout",
 								initial: !1,
 								children: _.map((_, E) => /* @__PURE__ */ jsx(ListItem, {
-									height: M,
-									animation: n.listSettings.entryAnimation,
-									children: n.elements.map((n) => /* @__PURE__ */ jsx(PreviewElementRenderer, {
-										element: n,
-										offsetY: 0,
-										dataContext: _
-									}, `${n.id}-${E}`))
+									item: _,
+									elements: n.elements,
+									animation: n.listSettings.entryAnimation
 								}, _.id || E))
 							})
 						});
@@ -16451,7 +17364,32 @@ 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: hj, redo: gj, copy: _j, paste: vj, removeSelected: bj, updateElements: xj, selectElement: Sj } = useEditor();
+	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 = () => {
+		let n = {
+			elements: Z.elements,
+			isList: Z.isList,
+			mockData: Z.mockData,
+			singleMockData: Z.singleMockData,
+			listSettings: Z.listSettings,
+			canvasHeight: Z.canvasHeight,
+			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) => {
+		let _ = n.target.files?.[0];
+		if (!_) return;
+		let E = new FileReader();
+		E.onload = (n) => {
+			try {
+				let _ = n.target?.result;
+				G(JSON.parse(_));
+			} catch (n) {
+				console.error("Failed to import layout", n), alert("Erro ao importar layout. Arquivo inválido.");
+			}
+		}, E.readAsText(_), n.target.value = "";
+	};
 	React.useEffect(() => {
 		let n = (n) => {
 			if (document.activeElement?.tagName === "INPUT" || document.activeElement?.tagName === "TEXTAREA" || document.activeElement?.isContentEditable) return;
@@ -16479,11 +17417,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(), gj()) : (n.preventDefault(), hj());
-				else if ((n.ctrlKey || n.metaKey) && n.key === "y") n.preventDefault(), gj();
-				else if ((n.ctrlKey || n.metaKey) && n.key === "c") n.preventDefault(), _j();
-				else if ((n.ctrlKey || n.metaKey) && n.key === "v") n.preventDefault(), vj();
-				else if (n.key === "Delete" || n.key === "Backspace") Z.selectedElementIds.length > 0 && (n.preventDefault(), bj());
+				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());
 				else if ([
 					"ArrowUp",
 					"ArrowDown",
@@ -16501,20 +17439,20 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 								changes: j
 							});
 						}
-					}), E.length > 0 && xj(E);
+					}), E.length > 0 && Kj(E);
 				}
 			}
 		};
 		return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
 	}, [
-		hj,
-		gj,
-		_j,
-		vj,
-		bj,
+		Bj,
+		Vj,
+		Hj,
+		Uj,
+		Gj,
 		Z.selectedElementIds,
 		Z.elements,
-		xj
+		Kj
 	]), React.useEffect(() => {
 		if (E) try {
 			let n = typeof E == "string" ? JSON.parse(E) : E;
@@ -16523,7 +17461,7 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 			console.error("Failed to load initial state", n);
 		}
 	}, [E, G]);
-	let Cj = (n) => {
+	let eM = (n) => {
 		console.log(`Adding element of type: ${n}`), W({
 			type: n,
 			content: `New ${n}`
@@ -16584,15 +17522,15 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 								style: { width: "240px" },
 								children: [
 									/* @__PURE__ */ jsx(v$3, {
-										onSelect: () => Cj("text"),
+										onSelect: () => eM("text"),
 										children: "Texto"
 									}),
 									/* @__PURE__ */ jsx(v$3, {
-										onSelect: () => Cj("image"),
+										onSelect: () => eM("image"),
 										children: "Imagem"
 									}),
 									/* @__PURE__ */ jsx(v$3, {
-										onSelect: () => Cj("box"),
+										onSelect: () => eM("box"),
 										children: "Caixa (Container)"
 									})
 								]
@@ -16620,6 +17558,38 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 								},
 								children: [/* @__PURE__ */ jsx(Share1Icon, {}), " Salvar Alterações"]
 							}),
+							/* @__PURE__ */ jsxs(p$1, {
+								gap: "2",
+								mt: "2",
+								children: [/* @__PURE__ */ jsxs(o, {
+									variant: "soft",
+									color: "gray",
+									style: {
+										flex: 1,
+										cursor: "pointer",
+										justifyContent: "center"
+									},
+									onClick: Zj,
+									children: [/* @__PURE__ */ jsx(DownloadIcon, {}), " Exportar"]
+								}), /* @__PURE__ */ jsxs(o, {
+									variant: "soft",
+									color: "gray",
+									style: {
+										flex: 1,
+										cursor: "pointer",
+										justifyContent: "center"
+									},
+									onClick: Qj,
+									children: [/* @__PURE__ */ jsx(UploadIcon, {}), " Importar"]
+								})]
+							}),
+							/* @__PURE__ */ jsx("input", {
+								type: "file",
+								ref: Jj,
+								style: { display: "none" },
+								accept: ".json",
+								onChange: $j
+							}),
 							/* @__PURE__ */ jsx(p, {
 								mt: "2",
 								children: /* @__PURE__ */ jsx(EditorSettings, {})
@@ -16654,7 +17624,7 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 										overflow: "hidden"
 									},
 									onClick: (_) => {
-										Sj(n.id, _.shiftKey), B(n.id), U(!0);
+										qj(n.id, _.shiftKey), B(n.id), U(!0);
 									},
 									children: /* @__PURE__ */ jsxs(p$1, {
 										gap: "2",
@@ -16790,13 +17760,23 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 							/* @__PURE__ */ jsx(kt, {
 								defaultSize: 50,
 								minSize: 20,
-								children: /* @__PURE__ */ jsx(p, {
+								children: /* @__PURE__ */ jsxs(p, {
 									style: {
 										height: "100%",
 										width: "100%",
-										backgroundColor: "var(--color-background)"
+										backgroundColor: "var(--color-background)",
+										position: "relative"
 									},
-									children: /* @__PURE__ */ jsx(Canvas, {})
+									children: [/* @__PURE__ */ jsx(p, {
+										style: {
+											position: "absolute",
+											top: 16,
+											left: "50%",
+											transform: "translateX(-50%)",
+											zIndex: 20
+										},
+										children: /* @__PURE__ */ jsx(AlignmentToolbar, {})
+									}), /* @__PURE__ */ jsx(Canvas, {})]
 								})
 							}),
 							j && /* @__PURE__ */ jsx(Ot, { style: {
@@ -16834,5 +17814,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 = ['width', 'height', 'top', 'left', 'right', 'bottom', 'fontSize', 'borderRadius', 'padding', 'margin', 'borderWidth'];\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 { from { opacity: 0; } to { opacity: 1; } }\n    @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }\n    @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }\n    @keyframes slideInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }\n    @keyframes slideInDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }\n    @keyframes zoomIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }\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 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\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 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";
 export { GenericEditor as EditorContent, generateHTML };