@1urso/generic-editor 0.1.24 → 0.1.25

package/dist/generic-editor.js

@@ -20,6 +20,167 @@ var __create = Object.create, __defProp = Object.defineProperty, __getOwnPropDes
 	value: n,
 	enumerable: !0
 }) : E, n)), __toCommonJS = (n) => __copyProps(__defProp({}, "__esModule", { value: !0 }), n);
+function _objectWithoutPropertiesLoose(n, _) {
+	if (n == null) return {};
+	var E = {}, O = Object.keys(n), A, j;
+	for (j = 0; j < O.length; j++) A = O[j], !(_.indexOf(A) >= 0) && (E[A] = n[A]);
+	return E;
+}
+var _excluded$T = ["color"], CheckIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$T);
+	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: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$Y = ["color"], ChevronRightIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$Y);
+	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.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$1r = ["color"], Cross2Icon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$1r);
+	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: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$1M = ["color"], DoubleArrowLeftIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$1M);
+	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.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$1N = ["color"], DoubleArrowRightIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$1N);
+	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: "M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z",
+		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({
+		width: "15",
+		height: "15",
+		viewBox: "0 0 15 15",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg"
+	}, A, { ref: _ }), createElement("path", {
+		d: "M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$26 = ["color"], EyeOpenIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$26);
+	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.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$2l = ["color"], GearIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$2l);
+	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.07095 0.650238C6.67391 0.650238 6.32977 0.925096 6.24198 1.31231L6.0039 2.36247C5.6249 2.47269 5.26335 2.62363 4.92436 2.81013L4.01335 2.23585C3.67748 2.02413 3.23978 2.07312 2.95903 2.35386L2.35294 2.95996C2.0722 3.2407 2.0232 3.6784 2.23493 4.01427L2.80942 4.92561C2.62307 5.2645 2.47227 5.62594 2.36216 6.00481L1.31209 6.24287C0.924883 6.33065 0.650024 6.6748 0.650024 7.07183V7.92897C0.650024 8.32601 0.924883 8.67015 1.31209 8.75794L2.36228 8.99603C2.47246 9.375 2.62335 9.73652 2.80979 10.0755L2.2354 10.9867C2.02367 11.3225 2.07267 11.7602 2.35341 12.041L2.95951 12.6471C3.24025 12.9278 3.67795 12.9768 4.01382 12.7651L4.92506 12.1907C5.26384 12.377 5.62516 12.5278 6.0039 12.6379L6.24198 13.6881C6.32977 14.0753 6.67391 14.3502 7.07095 14.3502H7.92809C8.32512 14.3502 8.66927 14.0753 8.75705 13.6881L8.99505 12.6383C9.37411 12.5282 9.73573 12.3773 10.0748 12.1909L10.986 12.7653C11.3218 12.977 11.7595 12.928 12.0403 12.6473L12.6464 12.0412C12.9271 11.7604 12.9761 11.3227 12.7644 10.9869L12.1902 10.076C12.3768 9.73688 12.5278 9.37515 12.638 8.99596L13.6879 8.75794C14.0751 8.67015 14.35 8.32601 14.35 7.92897V7.07183C14.35 6.6748 14.0751 6.33065 13.6879 6.24287L12.6381 6.00488C12.528 5.62578 12.3771 5.26414 12.1906 4.92507L12.7648 4.01407C12.9766 3.6782 12.9276 3.2405 12.6468 2.95975L12.0407 2.35366C11.76 2.07292 11.3223 2.02392 10.9864 2.23565L10.0755 2.80989C9.73622 2.62328 9.37437 2.47229 8.99505 2.36209L8.75705 1.31231C8.66927 0.925096 8.32512 0.650238 7.92809 0.650238H7.07095ZM4.92053 3.81251C5.44724 3.44339 6.05665 3.18424 6.71543 3.06839L7.07095 1.50024H7.92809L8.28355 3.06816C8.94267 3.18387 9.5524 3.44302 10.0794 3.81224L11.4397 2.9547L12.0458 3.56079L11.1882 4.92117C11.5573 5.44798 11.8164 6.0575 11.9321 6.71638L13.5 7.07183V7.92897L11.932 8.28444C11.8162 8.94342 11.557 9.55301 11.1878 10.0798L12.0453 11.4402L11.4392 12.0462L10.0787 11.1886C9.55192 11.5576 8.94241 11.8166 8.28355 11.9323L7.92809 13.5002H7.07095L6.71543 11.932C6.0569 11.8162 5.44772 11.5572 4.92116 11.1883L3.56055 12.046L2.95445 11.4399L3.81213 10.0794C3.4431 9.55266 3.18403 8.94326 3.06825 8.2845L1.50002 7.92897V7.07183L3.06818 6.71632C3.18388 6.05765 3.44283 5.44833 3.81171 4.92165L2.95398 3.561L3.56008 2.95491L4.92053 3.81251ZM9.02496 7.50008C9.02496 8.34226 8.34223 9.02499 7.50005 9.02499C6.65786 9.02499 5.97513 8.34226 5.97513 7.50008C5.97513 6.65789 6.65786 5.97516 7.50005 5.97516C8.34223 5.97516 9.02496 6.65789 9.02496 7.50008ZM9.92496 7.50008C9.92496 8.83932 8.83929 9.92499 7.50005 9.92499C6.1608 9.92499 5.07513 8.83932 5.07513 7.50008C5.07513 6.16084 6.1608 5.07516 7.50005 5.07516C8.83929 5.07516 9.92496 6.16084 9.92496 7.50008Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$3x = ["color"], PlusIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$3x);
+	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: "M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$3V = ["color"], Share1Icon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$3V);
+	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: "M5 7.50003C5 8.32845 4.32843 9.00003 3.5 9.00003C2.67157 9.00003 2 8.32845 2 7.50003C2 6.6716 2.67157 6.00003 3.5 6.00003C4.32843 6.00003 5 6.6716 5 7.50003ZM5.71313 8.66388C5.29445 9.45838 4.46048 10 3.5 10C2.11929 10 1 8.88074 1 7.50003C1 6.11931 2.11929 5.00003 3.5 5.00003C4.46048 5.00003 5.29445 5.54167 5.71313 6.33616L9.10424 4.21671C9.03643 3.98968 9 3.74911 9 3.50003C9 2.11932 10.1193 1.00003 11.5 1.00003C12.8807 1.00003 14 2.11932 14 3.50003C14 4.88074 12.8807 6.00003 11.5 6.00003C10.6915 6.00003 9.97264 5.61624 9.51566 5.0209L5.9853 7.22738C5.99502 7.31692 6 7.40789 6 7.50003C6 7.59216 5.99502 7.68312 5.9853 7.77267L9.51567 9.97915C9.97265 9.38382 10.6915 9.00003 11.5 9.00003C12.8807 9.00003 14 10.1193 14 11.5C14 12.8807 12.8807 14 11.5 14C10.1193 14 9 12.8807 9 11.5C9 11.2509 9.03643 11.0104 9.10425 10.7833L5.71313 8.66388ZM11.5 5.00003C12.3284 5.00003 13 4.32846 13 3.50003C13 2.6716 12.3284 2.00003 11.5 2.00003C10.6716 2.00003 10 2.6716 10 3.50003C10 4.32846 10.6716 5.00003 11.5 5.00003ZM13 11.5C13 12.3285 12.3284 13 11.5 13C10.6716 13 10 12.3285 10 11.5C10 10.6716 10.6716 10 11.5 10C12.3284 10 13 10.6716 13 11.5Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+}), _excluded$4G = ["color"], TrashIcon = /* @__PURE__ */ forwardRef(function(n, _) {
+	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$4G);
+	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: "M5.5 1C5.22386 1 5 1.22386 5 1.5C5 1.77614 5.22386 2 5.5 2H9.5C9.77614 2 10 1.77614 10 1.5C10 1.22386 9.77614 1 9.5 1H5.5ZM3 3.5C3 3.22386 3.22386 3 3.5 3H5H10H11.5C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4H11V12C11 12.5523 10.5523 13 10 13H5C4.44772 13 4 12.5523 4 12V4L3.5 4C3.22386 4 3 3.77614 3 3.5ZM5 4H10V12H5V4Z",
+		fill: O,
+		fillRule: "evenodd",
+		clipRule: "evenodd"
+	}));
+});
 function setRef(n, _) {
 	if (typeof n == "function") return n(_);
 	n != null && (n.current = _);
@@ -433,15 +594,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(E, (n) => U(n)), GA = Array.from(B.layers), [KA] = [...B.layersWithOutsidePointerEventsDisabled].slice(-1), qA = GA.indexOf(KA), JA = H ? GA.indexOf(H) : -1, YA = B.layersWithOutsidePointerEventsDisabled.size > 0, XA = JA >= qA, ZA = 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(E, (n) => U(n)), JA = Array.from(B.layers), [YA] = [...B.layersWithOutsidePointerEventsDisabled].slice(-1), XA = JA.indexOf(YA), ZA = H ? JA.indexOf(H) : -1, QA = B.layersWithOutsidePointerEventsDisabled.size > 0, $A = ZA >= XA, ej = usePointerDownOutside((n) => {
 		let _ = n.target, E = [...B.branches].some((n) => n.contains(_));
-		!XA || E || (j?.(n), N?.(n), n.defaultPrevented || P?.());
-	}, W), $A = useFocusOutside((n) => {
+		!$A || E || (j?.(n), N?.(n), n.defaultPrevented || P?.());
+	}, W), nj = useFocusOutside((n) => {
 		let _ = n.target;
 		[...B.branches].some((n) => n.contains(_)) || (M?.(n), N?.(n), n.defaultPrevented || P?.());
 	}, W);
 	return useEscapeKeydown((n) => {
-		JA === B.layers.size - 1 && (A?.(n), !n.defaultPrevented && P && (n.preventDefault(), P()));
+		ZA === 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);
@@ -460,12 +621,12 @@ var DISMISSABLE_LAYER_NAME = "DismissableLayer", CONTEXT_UPDATE = "dismissableLa
 		...z,
 		ref: Z,
 		style: {
-			pointerEvents: YA ? XA ? "auto" : "none" : void 0,
+			pointerEvents: QA ? $A ? "auto" : "none" : void 0,
 			..._.style
 		},
-		onFocusCapture: composeEventHandlers(_.onFocusCapture, $A.onFocusCapture),
-		onBlurCapture: composeEventHandlers(_.onBlurCapture, $A.onBlurCapture),
-		onPointerDownCapture: composeEventHandlers(_.onPointerDownCapture, ZA.onPointerDownCapture)
+		onFocusCapture: composeEventHandlers(_.onFocusCapture, nj.onFocusCapture),
+		onBlurCapture: composeEventHandlers(_.onBlurCapture, nj.onBlurCapture),
+		onPointerDownCapture: composeEventHandlers(_.onPointerDownCapture, ej.onPointerDownCapture)
 	});
 });
 DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
@@ -824,7 +985,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, GA = _.inert, KA = _.allowPinchZoom, qA = _.as, JA = qA === void 0 ? "div" : qA, YA = _.gapMode, XA = __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, JA = _.inert, YA = _.allowPinchZoom, XA = _.as, ZA = XA === void 0 ? "div" : XA, QA = _.gapMode, $A = __rest(_, [
 		"forwardProps",
 		"children",
 		"className",
@@ -838,21 +999,21 @@ var effectCar = createSidecarMedium(), nothing = function() {}, RemoveScroll = R
 		"allowPinchZoom",
 		"as",
 		"gapMode"
-	]), ZA = W, QA = useMergeRefs([O, E]), $A = __assign$2(__assign$2({}, XA), j);
-	return React$1.createElement(React$1.Fragment, null, H && React$1.createElement(ZA, {
+	]), ej = W, tj = useMergeRefs([O, E]), nj = __assign$2(__assign$2({}, $A), j);
+	return React$1.createElement(React$1.Fragment, null, H && React$1.createElement(ej, {
 		sideCar: effectCar,
 		removeScrollBar: B,
 		shards: U,
 		noRelative: G,
 		noIsolation: Z,
-		inert: GA,
+		inert: JA,
 		setCallbacks: M,
-		allowPinchZoom: !!KA,
+		allowPinchZoom: !!YA,
 		lockRef: O,
-		gapMode: YA
-	}), N ? React$1.cloneElement(React$1.Children.only(P), __assign$2(__assign$2({}, $A), { ref: QA })) : React$1.createElement(JA, __assign$2({}, $A, {
+		gapMode: QA
+	}), N ? React$1.cloneElement(React$1.Children.only(P), __assign$2(__assign$2({}, nj), { ref: tj })) : React$1.createElement(ZA, __assign$2({}, nj, {
 		className: z,
-		ref: QA
+		ref: tj
 	}), P));
 });
 RemoveScroll.defaultProps = {
@@ -1042,8 +1203,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 GA = N.parentNode;
-		N = GA && GA.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? GA.host : GA;
+		var JA = N.parentNode;
+		N = JA && JA.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? JA.host : JA;
 	} 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) {
@@ -1590,7 +1751,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: GA, y: KA, data: qA, reset: JA } = await Z({
+		let { name: j, fn: Z } = N[E], { x: JA, y: YA, data: XA, reset: ZA } = await Z({
 			x: B,
 			y: H,
 			initialPlacement: O,
@@ -1604,17 +1765,17 @@ var computePosition$1 = async (n, _, E) => {
 				floating: _
 			}
 		});
-		B = GA ?? B, H = KA ?? H, W = {
+		B = JA ?? B, H = YA ?? H, W = {
 			...W,
 			[j]: {
 				...W[j],
-				...qA
+				...XA
 			}
-		}, JA && G <= 50 && (G++, typeof JA == "object" && (JA.placement && (U = JA.placement), JA.rects && (z = JA.rects === !0 ? await M.getElementRects({
+		}, ZA && G <= 50 && (G++, typeof ZA == "object" && (ZA.placement && (U = ZA.placement), ZA.rects && (z = ZA.rects === !0 ? await M.getElementRects({
 			reference: n,
 			floating: _,
 			strategy: A
-		}) : JA.rects), {x: B, y: H} = computeCoordsFromPlacement(z, U, P)), E = -1);
+		}) : ZA.rects), {x: B, y: H} = computeCoordsFromPlacement(z, U, P)), E = -1);
 	}
 	return {
 		x: B,
@@ -1631,25 +1792,25 @@ async function detectOverflow$1(n, _) {
 		boundary: P,
 		rootBoundary: z,
 		strategy: N
-	})), GA = B === "floating" ? {
+	})), JA = B === "floating" ? {
 		x: E,
 		y: O,
 		width: j.floating.width,
 		height: j.floating.height
-	} : j.reference, KA = await (A.getOffsetParent == null ? void 0 : A.getOffsetParent(M.floating)), qA = await (A.isElement == null ? void 0 : A.isElement(KA)) && await (A.getScale == null ? void 0 : A.getScale(KA)) || {
+	} : j.reference, YA = await (A.getOffsetParent == null ? void 0 : A.getOffsetParent(M.floating)), XA = await (A.isElement == null ? void 0 : A.isElement(YA)) && await (A.getScale == null ? void 0 : A.getScale(YA)) || {
 		x: 1,
 		y: 1
-	}, JA = rectToClientRect(A.convertOffsetParentRelativeRectToViewportRelativeRect ? await A.convertOffsetParentRelativeRectToViewportRelativeRect({
+	}, ZA = rectToClientRect(A.convertOffsetParentRelativeRectToViewportRelativeRect ? await A.convertOffsetParentRelativeRectToViewportRelativeRect({
 		elements: M,
-		rect: GA,
-		offsetParent: KA,
+		rect: JA,
+		offsetParent: YA,
 		strategy: N
-	}) : GA);
+	}) : JA);
 	return {
-		top: (Z.top - JA.top + W.top) / qA.y,
-		bottom: (JA.bottom - Z.bottom + W.bottom) / qA.y,
-		left: (Z.left - JA.left + W.left) / qA.x,
-		right: (JA.right - Z.right + W.right) / qA.x
+		top: (Z.top - ZA.top + W.top) / XA.y,
+		bottom: (ZA.bottom - Z.bottom + W.bottom) / XA.y,
+		left: (Z.left - ZA.left + W.left) / XA.x,
+		right: (ZA.right - Z.right + W.right) / XA.x
 	};
 }
 var arrow$2 = (n) => ({
@@ -1661,17 +1822,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), GA = W === "y", KA = GA ? "top" : "left", qA = GA ? "bottom" : "right", JA = GA ? "clientHeight" : "clientWidth", YA = j.reference[G] + j.reference[W] - U[W] - j.floating[G], XA = U[W] - j.reference[W], ZA = await (M.getOffsetParent == null ? void 0 : M.getOffsetParent(z)), QA = ZA ? ZA[JA] : 0;
-		(!QA || !await (M.isElement == null ? void 0 : M.isElement(ZA))) && (QA = N.floating[JA] || j.floating[G]);
-		let $A = YA / 2 - XA / 2, ej = QA / 2 - Z[G] / 2 - 1, tj = min(H[KA], ej), nj = min(H[qA], ej), rj = tj, ij = QA - Z[G] - nj, aj = QA / 2 - Z[G] / 2 + $A, oj = clamp$3(rj, aj, ij), sj = !P.arrow && getAlignment(A) != null && aj !== oj && j.reference[G] / 2 - (aj < rj ? tj : nj) - Z[G] / 2 < 0, cj = sj ? aj < rj ? aj - rj : aj - ij : 0;
+		}, W = getAlignmentAxis(A), G = getAxisLength(W), Z = await M.getDimensions(z), JA = W === "y", YA = JA ? "top" : "left", XA = JA ? "bottom" : "right", ZA = JA ? "clientHeight" : "clientWidth", QA = j.reference[G] + j.reference[W] - U[W] - j.floating[G], $A = U[W] - j.reference[W], ej = await (M.getOffsetParent == null ? void 0 : M.getOffsetParent(z)), tj = ej ? ej[ZA] : 0;
+		(!tj || !await (M.isElement == null ? void 0 : M.isElement(ej))) && (tj = N.floating[ZA] || j.floating[G]);
+		let nj = QA / 2 - $A / 2, rj = tj / 2 - Z[G] / 2 - 1, ij = min(H[YA], rj), aj = min(H[XA], rj), oj = ij, sj = tj - Z[G] - aj, cj = tj / 2 - Z[G] / 2 + nj, lj = clamp$3(oj, cj, sj), uj = !P.arrow && getAlignment(A) != null && cj !== lj && j.reference[G] / 2 - (cj < oj ? ij : aj) - Z[G] / 2 < 0, dj = uj ? cj < oj ? cj - oj : cj - sj : 0;
 		return {
-			[W]: U[W] + cj,
+			[W]: U[W] + dj,
 			data: {
-				[W]: oj,
-				centerOffset: aj - oj - cj,
-				...sj && { alignmentOffset: cj }
+				[W]: lj,
+				centerOffset: cj - lj - dj,
+				...uj && { alignmentOffset: dj }
 			},
-			reset: sj
+			reset: uj
 		};
 	}
 }), flip$2 = function(n) {
@@ -1682,32 +1843,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 GA = getSide(O), KA = getSideAxis(M), qA = getSide(M) === M, JA = await (N.isRTL == null ? void 0 : N.isRTL(P.floating)), YA = H || (qA || !G ? [getOppositePlacement(M)] : getExpandedPlacements(M)), XA = W !== "none";
-			!H && XA && YA.push(...getOppositeAxisPlacements(M, G, W, JA));
-			let ZA = [M, ...YA], QA = await detectOverflow$1(_, Z), $A = [], ej = A.flip?.overflows || [];
-			if (z && $A.push(QA[GA]), B) {
-				let n = getAlignmentSides(O, j, JA);
-				$A.push(QA[n[0]], QA[n[1]]);
+			let JA = getSide(O), YA = getSideAxis(M), XA = getSide(M) === M, ZA = await (N.isRTL == null ? void 0 : N.isRTL(P.floating)), QA = H || (XA || !G ? [getOppositePlacement(M)] : getExpandedPlacements(M)), $A = W !== "none";
+			!H && $A && QA.push(...getOppositeAxisPlacements(M, G, W, ZA));
+			let ej = [M, ...QA], tj = await detectOverflow$1(_, Z), nj = [], rj = A.flip?.overflows || [];
+			if (z && nj.push(tj[JA]), B) {
+				let n = getAlignmentSides(O, j, ZA);
+				nj.push(tj[n[0]], tj[n[1]]);
 			}
-			if (ej = [...ej, {
+			if (rj = [...rj, {
 				placement: O,
-				overflows: $A
-			}], !$A.every((n) => n <= 0)) {
-				let n = (A.flip?.index || 0) + 1, _ = ZA[n];
-				if (_ && (!(B === "alignment" && KA !== getSideAxis(_)) || ej.every((n) => getSideAxis(n.placement) === KA ? n.overflows[0] > 0 : !0))) return {
+				overflows: nj
+			}], !nj.every((n) => n <= 0)) {
+				let n = (A.flip?.index || 0) + 1, _ = ej[n];
+				if (_ && (!(B === "alignment" && YA !== getSideAxis(_)) || rj.every((n) => getSideAxis(n.placement) === YA ? n.overflows[0] > 0 : !0))) return {
 					data: {
 						index: n,
-						overflows: ej
+						overflows: rj
 					},
 					reset: { placement: _ }
 				};
-				let E = ej.filter((n) => n.overflows[0] <= 0).sort((n, _) => n.overflows[1] - _.overflows[1])[0]?.placement;
+				let E = rj.filter((n) => n.overflows[0] <= 0).sort((n, _) => n.overflows[1] - _.overflows[1])[0]?.placement;
 				if (!E) switch (U) {
 					case "bestFit": {
-						let n = ej.filter((n) => {
-							if (XA) {
+						let n = rj.filter((n) => {
+							if ($A) {
 								let _ = getSideAxis(n.placement);
-								return _ === KA || _ === "y";
+								return _ === YA || _ === "y";
 							}
 							return !0;
 						}).map((n) => [n.placement, n.overflows.filter((n) => n > 0).reduce((n, _) => n + _, 0)]).sort((n, _) => n[1] - _[1])[0]?.[0];
@@ -1850,7 +2011,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, _), GA = typeof Z == "number" ? {
+			}, H = getSideAxis(A), U = getOppositeAxis(H), W = B[U], G = B[H], Z = evaluate(N, _), JA = typeof Z == "number" ? {
 				mainAxis: Z,
 				crossAxis: 0
 			} : {
@@ -1859,11 +2020,11 @@ var offset$2 = function(n) {
 				...Z
 			};
 			if (P) {
-				let n = U === "y" ? "height" : "width", _ = j.reference[U] - j.floating[n] + GA.mainAxis, E = j.reference[U] + j.reference[n] - GA.mainAxis;
+				let n = U === "y" ? "height" : "width", _ = j.reference[U] - j.floating[n] + JA.mainAxis, E = j.reference[U] + j.reference[n] - JA.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 : GA.crossAxis), O = j.reference[H] + j.reference[n] + (_ ? 0 : M.offset?.[H] || 0) - (_ ? GA.crossAxis : 0);
+				let n = U === "y" ? "width" : "height", _ = originSides.has(getSide(A)), E = j.reference[H] - j.floating[n] + (_ && M.offset?.[H] || 0) + (_ ? 0 : JA.crossAxis), O = j.reference[H] + j.reference[n] + (_ ? 0 : M.offset?.[H] || 0) - (_ ? JA.crossAxis : 0);
 				G < E ? G = E : G > O && (G = O);
 			}
 			return {
@@ -1878,20 +2039,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, GA, KA;
-			H === "top" || H === "bottom" ? (GA = H, KA = U === (await (M.isRTL == null ? void 0 : M.isRTL(N.floating)) ? "start" : "end") ? "left" : "right") : (KA = H, GA = U === "end" ? "top" : "bottom");
-			let qA = Z - B.top - B.bottom, JA = G - B.left - B.right, YA = min(Z - B[GA], qA), XA = min(G - B[KA], JA), ZA = !_.middlewareData.shift, QA = YA, $A = XA;
-			if ((E = _.middlewareData.shift) != null && E.enabled.x && ($A = JA), (O = _.middlewareData.shift) != null && O.enabled.y && (QA = qA), ZA && !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, JA, YA;
+			H === "top" || H === "bottom" ? (JA = H, YA = U === (await (M.isRTL == null ? void 0 : M.isRTL(N.floating)) ? "start" : "end") ? "left" : "right") : (YA = H, JA = U === "end" ? "top" : "bottom");
+			let XA = Z - B.top - B.bottom, ZA = G - B.left - B.right, QA = min(Z - B[JA], XA), $A = min(G - B[YA], ZA), ej = !_.middlewareData.shift, tj = QA, nj = $A;
+			if ((E = _.middlewareData.shift) != null && E.enabled.x && (nj = ZA), (O = _.middlewareData.shift) != null && O.enabled.y && (tj = XA), ej && !U) {
 				let n = max(B.left, 0), _ = max(B.right, 0), E = max(B.top, 0), O = max(B.bottom, 0);
-				W ? $A = G - 2 * (n !== 0 || _ !== 0 ? n + _ : max(B.left, B.right)) : QA = Z - 2 * (E !== 0 || O !== 0 ? E + O : max(B.top, B.bottom));
+				W ? nj = G - 2 * (n !== 0 || _ !== 0 ? n + _ : max(B.left, B.right)) : tj = Z - 2 * (E !== 0 || O !== 0 ? E + O : max(B.top, B.bottom));
 			}
 			await P({
 				..._,
-				availableWidth: $A,
-				availableHeight: QA
+				availableWidth: nj,
+				availableHeight: tj
 			});
-			let ej = await M.getDimensions(N.floating);
-			return G !== ej.width || Z !== ej.height ? { reset: { rects: !0 } } : {};
+			let rj = await M.getDimensions(N.floating);
+			return G !== rj.width || Z !== rj.height ? { reset: { rects: !0 } } : {};
 		}
 	};
 };
@@ -2275,27 +2436,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)), GA = floor(A.clientHeight - (H + W)), KA = floor(B), qA = {
-			rootMargin: -G + "px " + -Z + "px " + -GA + "px " + -KA + "px",
+		let G = floor(H), Z = floor(A.clientWidth - (B + U)), JA = floor(A.clientHeight - (H + W)), YA = floor(B), XA = {
+			rootMargin: -G + "px " + -Z + "px " + -JA + "px " + -YA + "px",
 			threshold: max(0, min(1, P)) || 1
-		}, JA = !0;
-		function YA(_) {
+		}, ZA = !0;
+		function QA(_) {
 			let E = _[0].intersectionRatio;
 			if (E !== P) {
-				if (!JA) return M();
+				if (!ZA) return M();
 				E ? M(!1, E) : O = setTimeout(() => {
 					M(!1, 1e-7);
 				}, 1e3);
 			}
-			E === 1 && !rectsAreEqual(z, n.getBoundingClientRect()) && M(), JA = !1;
+			E === 1 && !rectsAreEqual(z, n.getBoundingClientRect()) && M(), ZA = !1;
 		}
 		try {
-			E = new IntersectionObserver(YA, {
-				...qA,
+			E = new IntersectionObserver(QA, {
+				...XA,
 				root: A.ownerDocument
 			});
 		} catch {
-			E = new IntersectionObserver(YA, qA);
+			E = new IntersectionObserver(QA, XA);
 		}
 		E.observe(n);
 	}
@@ -2316,10 +2477,10 @@ function autoUpdate(n, _, E, O) {
 		})), E();
 	}), z && !P && W.observe(z), W.observe(_));
 	let G, Z = P ? getBoundingClientRect(n) : null;
-	P && GA();
-	function GA() {
+	P && JA();
+	function JA() {
 		let _ = getBoundingClientRect(n);
-		Z && !rectsAreEqual(Z, _) && E(), Z = _, G = requestAnimationFrame(GA);
+		Z && !rectsAreEqual(Z, _) && E(), Z = _, G = requestAnimationFrame(JA);
 	}
 	return E(), () => {
 		var n;
@@ -2386,23 +2547,23 @@ function useFloating(_) {
 		isPositioned: !1
 	}), [W, G] = React$1.useState(A);
 	deepEqual(W, A) || G(A);
-	let [Z, GA] = React$1.useState(null), [KA, qA] = React$1.useState(null), YA = React$1.useCallback((n) => {
-		n !== $A.current && ($A.current = n, GA(n));
-	}, []), XA = React$1.useCallback((n) => {
-		n !== ej.current && (ej.current = n, qA(n));
-	}, []), ZA = M || Z, QA = N || KA, $A = React$1.useRef(null), ej = React$1.useRef(null), tj = React$1.useRef(H), nj = z != null, rj = useLatestRef(z), ij = useLatestRef(j), aj = useLatestRef(B), oj = React$1.useCallback(() => {
-		if (!$A.current || !ej.current) return;
+	let [Z, JA] = React$1.useState(null), [YA, XA] = React$1.useState(null), QA = React$1.useCallback((n) => {
+		n !== nj.current && (nj.current = n, JA(n));
+	}, []), $A = React$1.useCallback((n) => {
+		n !== rj.current && (rj.current = n, XA(n));
+	}, []), ej = M || Z, tj = N || YA, nj = React$1.useRef(null), rj = React$1.useRef(null), ij = React$1.useRef(H), aj = z != null, oj = useLatestRef(z), sj = useLatestRef(j), cj = useLatestRef(B), lj = React$1.useCallback(() => {
+		if (!nj.current || !rj.current) return;
 		let n = {
 			placement: E,
 			strategy: O,
 			middleware: W
 		};
-		ij.current && (n.platform = ij.current), computePosition($A.current, ej.current, n).then((n) => {
+		sj.current && (n.platform = sj.current), computePosition(nj.current, rj.current, n).then((n) => {
 			let _ = {
 				...n,
-				isPositioned: aj.current !== !1
+				isPositioned: cj.current !== !1
 			};
-			sj.current && !deepEqual(tj.current, _) && (tj.current = _, ReactDOM$1.flushSync(() => {
+			uj.current && !deepEqual(ij.current, _) && (ij.current = _, ReactDOM$1.flushSync(() => {
 				U(_);
 			}));
 		});
@@ -2410,50 +2571,50 @@ function useFloating(_) {
 		W,
 		E,
 		O,
-		ij,
-		aj
+		sj,
+		cj
 	]);
 	index(() => {
-		B === !1 && tj.current.isPositioned && (tj.current.isPositioned = !1, U((n) => ({
+		B === !1 && ij.current.isPositioned && (ij.current.isPositioned = !1, U((n) => ({
 			...n,
 			isPositioned: !1
 		})));
 	}, [B]);
-	let sj = React$1.useRef(!1);
-	index(() => (sj.current = !0, () => {
-		sj.current = !1;
+	let uj = React$1.useRef(!1);
+	index(() => (uj.current = !0, () => {
+		uj.current = !1;
 	}), []), index(() => {
-		if (ZA && ($A.current = ZA), QA && (ej.current = QA), ZA && QA) {
-			if (rj.current) return rj.current(ZA, QA, oj);
-			oj();
+		if (ej && (nj.current = ej), tj && (rj.current = tj), ej && tj) {
+			if (oj.current) return oj.current(ej, tj, lj);
+			lj();
 		}
 	}, [
-		ZA,
-		QA,
+		ej,
+		tj,
+		lj,
 		oj,
-		rj,
-		nj
+		aj
 	]);
-	let cj = React$1.useMemo(() => ({
-		reference: $A,
-		floating: ej,
-		setReference: YA,
-		setFloating: XA
-	}), [YA, XA]), lj = React$1.useMemo(() => ({
-		reference: ZA,
-		floating: QA
-	}), [ZA, QA]), uj = React$1.useMemo(() => {
+	let dj = React$1.useMemo(() => ({
+		reference: nj,
+		floating: rj,
+		setReference: QA,
+		setFloating: $A
+	}), [QA, $A]), fj = React$1.useMemo(() => ({
+		reference: ej,
+		floating: tj
+	}), [ej, tj]), pj = React$1.useMemo(() => {
 		let n = {
 			position: O,
 			left: 0,
 			top: 0
 		};
-		if (!lj.floating) return n;
-		let _ = roundByDPR(lj.floating, H.x), E = roundByDPR(lj.floating, H.y);
+		if (!fj.floating) return n;
+		let _ = roundByDPR(fj.floating, H.x), E = roundByDPR(fj.floating, H.y);
 		return P ? {
 			...n,
 			transform: "translate(" + _ + "px, " + E + "px)",
-			...getDPR(lj.floating) >= 1.5 && { willChange: "transform" }
+			...getDPR(fj.floating) >= 1.5 && { willChange: "transform" }
 		} : {
 			position: O,
 			left: _,
@@ -2462,22 +2623,22 @@ function useFloating(_) {
 	}, [
 		O,
 		P,
-		lj.floating,
+		fj.floating,
 		H.x,
 		H.y
 	]);
 	return React$1.useMemo(() => ({
 		...H,
-		update: oj,
-		refs: cj,
-		elements: lj,
-		floatingStyles: uj
+		update: lj,
+		refs: dj,
+		elements: fj,
+		floatingStyles: pj
 	}), [
 		H,
-		oj,
-		cj,
 		lj,
-		uj
+		dj,
+		fj,
+		pj
 	]);
 }
 var arrow$1$1 = (n) => {
@@ -2554,70 +2715,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, ...GA } = _, KA = usePopperContext(CONTENT_NAME$6, O), [qA, JA] = React$1.useState(null), YA = useComposedRefs(E, (n) => JA(n)), [XA, ZA] = React$1.useState(null), $A = useSize(XA), ej = $A?.width ?? 0, tj = $A?.height ?? 0, nj = A + (M === "center" ? "" : "-" + M), rj = 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, ...JA } = _, YA = usePopperContext(CONTENT_NAME$6, O), [XA, ZA] = React$1.useState(null), QA = useComposedRefs(E, (n) => ZA(n)), [$A, ej] = React$1.useState(null), nj = useSize($A), rj = nj?.width ?? 0, ij = nj?.height ?? 0, aj = A + (M === "center" ? "" : "-" + M), oj = typeof H == "number" ? H : {
 		top: 0,
 		right: 0,
 		bottom: 0,
 		left: 0,
 		...H
-	}, ij = Array.isArray(B) ? B : [B], aj = ij.length > 0, oj = {
-		padding: rj,
-		boundary: ij.filter(isNotNull$2),
-		altBoundary: aj
-	}, { refs: sj, floatingStyles: cj, placement: lj, isPositioned: uj, middlewareData: dj } = useFloating({
+	}, sj = Array.isArray(B) ? B : [B], cj = sj.length > 0, lj = {
+		padding: oj,
+		boundary: sj.filter(isNotNull$2),
+		altBoundary: cj
+	}, { refs: uj, floatingStyles: dj, placement: fj, isPositioned: pj, middlewareData: mj } = useFloating({
 		strategy: "fixed",
-		placement: nj,
+		placement: aj,
 		whileElementsMounted: (...n) => autoUpdate(...n, { animationFrame: G === "always" }),
-		elements: { reference: KA.anchor },
+		elements: { reference: YA.anchor },
 		middleware: [
 			offset({
-				mainAxis: j + tj,
+				mainAxis: j + ij,
 				alignmentAxis: N
 			}),
 			z && shift({
 				mainAxis: !0,
 				crossAxis: !1,
 				limiter: U === "partial" ? limitShift() : void 0,
-				...oj
+				...lj
 			}),
-			z && flip({ ...oj }),
+			z && flip({ ...lj }),
 			size({
-				...oj,
+				...lj,
 				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`);
 				}
 			}),
-			XA && arrow({
-				element: XA,
+			$A && arrow({
+				element: $A,
 				padding: P
 			}),
 			transformOrigin({
-				arrowWidth: ej,
-				arrowHeight: tj
+				arrowWidth: rj,
+				arrowHeight: ij
 			}),
 			W && hide({
 				strategy: "referenceHidden",
-				...oj
+				...lj
 			})
 		]
-	}), [fj, pj] = getSideAndAlignFromPlacement(lj), mj = useCallbackRef(Z);
+	}), [hj, gj] = getSideAndAlignFromPlacement(fj), _j = useCallbackRef(Z);
 	useLayoutEffect2(() => {
-		uj && mj?.();
-	}, [uj, mj]);
-	let hj = dj.arrow?.x, gj = dj.arrow?.y, _j = dj.arrow?.centerOffset !== 0, [vj, yj] = React$1.useState();
+		pj && _j?.();
+	}, [pj, _j]);
+	let vj = mj.arrow?.x, yj = mj.arrow?.y, bj = mj.arrow?.centerOffset !== 0, [xj, Sj] = React$1.useState();
 	return useLayoutEffect2(() => {
-		qA && yj(window.getComputedStyle(qA).zIndex);
-	}, [qA]), /* @__PURE__ */ jsx("div", {
-		ref: sj.setFloating,
+		XA && Sj(window.getComputedStyle(XA).zIndex);
+	}, [XA]), /* @__PURE__ */ jsx("div", {
+		ref: uj.setFloating,
 		"data-radix-popper-content-wrapper": "",
 		style: {
-			...cj,
-			transform: uj ? cj.transform : "translate(0, -200%)",
+			...dj,
+			transform: pj ? dj.transform : "translate(0, -200%)",
 			minWidth: "max-content",
-			zIndex: vj,
-			"--radix-popper-transform-origin": [dj.transformOrigin?.x, dj.transformOrigin?.y].join(" "),
-			...dj.hide?.referenceHidden && {
+			zIndex: xj,
+			"--radix-popper-transform-origin": [mj.transformOrigin?.x, mj.transformOrigin?.y].join(" "),
+			...mj.hide?.referenceHidden && {
 				visibility: "hidden",
 				pointerEvents: "none"
 			}
@@ -2625,19 +2786,19 @@ var CONTENT_NAME$6 = "PopperContent", [PopperContentProvider, useContentContext]
 		dir: _.dir,
 		children: /* @__PURE__ */ jsx(PopperContentProvider, {
 			scope: O,
-			placedSide: fj,
-			onArrowChange: ZA,
-			arrowX: hj,
-			arrowY: gj,
-			shouldHideArrow: _j,
+			placedSide: hj,
+			onArrowChange: ej,
+			arrowX: vj,
+			arrowY: yj,
+			shouldHideArrow: bj,
 			children: /* @__PURE__ */ jsx(Primitive.div, {
-				"data-side": fj,
-				"data-align": pj,
-				...GA,
-				ref: YA,
+				"data-side": hj,
+				"data-align": gj,
+				...JA,
+				ref: QA,
 				style: {
-					...GA.style,
-					animation: uj ? void 0 : "none"
+					...JA.style,
+					animation: pj ? void 0 : "none"
 				}
 			})
 		})
@@ -2720,27 +2881,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(E, W), Z = useDirection(M), [GA, KA] = 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(E, W), Z = useDirection(M), [JA, YA] = useControllableState({
 		prop: N,
 		defaultProp: P ?? null,
 		onChange: z,
 		caller: GROUP_NAME$3
-	}), [qA, JA] = React$1.useState(!1), YA = useCallbackRef(B), XA = useCollection$1(O), ZA = React$1.useRef(!1), [$A, ej] = React$1.useState(0);
+	}), [XA, ZA] = React$1.useState(!1), QA = useCallbackRef(B), $A = useCollection$1(O), ej = React$1.useRef(!1), [nj, rj] = React$1.useState(0);
 	return React$1.useEffect(() => {
 		let n = W.current;
-		if (n) return n.addEventListener(ENTRY_FOCUS, YA), () => n.removeEventListener(ENTRY_FOCUS, YA);
-	}, [YA]), /* @__PURE__ */ jsx(RovingFocusProvider, {
+		if (n) return n.addEventListener(ENTRY_FOCUS, QA), () => n.removeEventListener(ENTRY_FOCUS, QA);
+	}, [QA]), /* @__PURE__ */ jsx(RovingFocusProvider, {
 		scope: O,
 		orientation: A,
 		dir: Z,
 		loop: j,
-		currentTabStopId: GA,
-		onItemFocus: React$1.useCallback((n) => KA(n), [KA]),
-		onItemShiftTab: React$1.useCallback(() => JA(!0), []),
-		onFocusableItemAdd: React$1.useCallback(() => ej((n) => n + 1), []),
-		onFocusableItemRemove: React$1.useCallback(() => ej((n) => n - 1), []),
+		currentTabStopId: JA,
+		onItemFocus: React$1.useCallback((n) => YA(n), [YA]),
+		onItemShiftTab: React$1.useCallback(() => ZA(!0), []),
+		onFocusableItemAdd: React$1.useCallback(() => rj((n) => n + 1), []),
+		onFocusableItemRemove: React$1.useCallback(() => rj((n) => n - 1), []),
 		children: /* @__PURE__ */ jsx(Primitive.div, {
-			tabIndex: qA || $A === 0 ? -1 : 0,
+			tabIndex: XA || nj === 0 ? -1 : 0,
 			"data-orientation": A,
 			...U,
 			ref: G,
@@ -2749,28 +2910,28 @@ var RovingFocusGroupImpl = React$1.forwardRef((_, E) => {
 				..._.style
 			},
 			onMouseDown: composeEventHandlers(_.onMouseDown, () => {
-				ZA.current = !0;
+				ej.current = !0;
 			}),
 			onFocus: composeEventHandlers(_.onFocus, (n) => {
-				let _ = !ZA.current;
-				if (n.target === n.currentTarget && _ && !qA) {
+				let _ = !ej.current;
+				if (n.target === n.currentTarget && _ && !XA) {
 					let _ = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
 					if (n.currentTarget.dispatchEvent(_), !_.defaultPrevented) {
-						let n = XA().filter((n) => n.focusable);
+						let n = $A().filter((n) => n.focusable);
 						focusFirst$1([
 							n.find((n) => n.active),
-							n.find((n) => n.id === GA),
+							n.find((n) => n.id === JA),
 							...n
 						].filter(Boolean).map((n) => n.ref.current), H);
 					}
 				}
-				ZA.current = !1;
+				ej.current = !1;
 			}),
-			onBlur: composeEventHandlers(_.onBlur, () => JA(!1))
+			onBlur: composeEventHandlers(_.onBlur, () => ZA(!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: GA } = 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: JA } = H;
 	return React$1.useEffect(() => {
 		if (A) return G(), () => Z();
 	}, [
@@ -2813,7 +2974,7 @@ var RovingFocusGroupImpl = React$1.forwardRef((_, E) => {
 			}),
 			children: typeof N == "function" ? N({
 				isCurrentTabStop: U,
-				hasTabStop: GA != null
+				hasTabStop: JA != null
 			}) : N
 		})
 	});
@@ -2964,40 +3125,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, ...GA } = _, KA = useMenuContext(CONTENT_NAME$5, O), qA = useMenuRootContext(CONTENT_NAME$5, O), JA = usePopperScope$2(O), YA = useRovingFocusGroupScope$1(O), XA = useCollection(O), [ZA, $A] = React$1.useState(null), ej = React$1.useRef(null), tj = useComposedRefs(E, ej, KA.onContentChange), nj = React$1.useRef(0), rj = React$1.useRef(""), ij = React$1.useRef(0), aj = React$1.useRef(null), oj = React$1.useRef("right"), sj = React$1.useRef(0), cj = Z ? Combination_default : React$1.Fragment, lj = 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, ...JA } = _, YA = useMenuContext(CONTENT_NAME$5, O), XA = useMenuRootContext(CONTENT_NAME$5, O), ZA = usePopperScope$2(O), QA = useRovingFocusGroupScope$1(O), $A = useCollection(O), [ej, nj] = React$1.useState(null), rj = React$1.useRef(null), ij = useComposedRefs(E, rj, YA.onContentChange), aj = React$1.useRef(0), oj = React$1.useRef(""), sj = React$1.useRef(0), cj = React$1.useRef(null), lj = React$1.useRef("right"), uj = React$1.useRef(0), dj = Z ? Combination_default : React$1.Fragment, fj = Z ? {
 		as: Slot$1,
 		allowPinchZoom: !0
-	} : void 0, uj = (n) => {
-		let _ = rj.current + n, E = XA().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, pj = (n) => {
+		let _ = oj.current + n, E = $A().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(_) {
-			rj.current = _, window.clearTimeout(nj.current), _ !== "" && (nj.current = window.setTimeout(() => n(""), 1e3));
+			oj.current = _, window.clearTimeout(aj.current), _ !== "" && (aj.current = window.setTimeout(() => n(""), 1e3));
 		})(_), M && setTimeout(() => M.focus());
 	};
-	React$1.useEffect(() => () => window.clearTimeout(nj.current), []), useFocusGuards();
-	let dj = React$1.useCallback((n) => oj.current === aj.current?.side && isPointerInGraceArea(n, aj.current?.area), []);
+	React$1.useEffect(() => () => window.clearTimeout(aj.current), []), useFocusGuards();
+	let mj = React$1.useCallback((n) => lj.current === cj.current?.side && isPointerInGraceArea(n, cj.current?.area), []);
 	return /* @__PURE__ */ jsx(MenuContentProvider, {
 		scope: O,
-		searchRef: rj,
+		searchRef: oj,
 		onItemEnter: React$1.useCallback((n) => {
-			dj(n) && n.preventDefault();
-		}, [dj]),
+			mj(n) && n.preventDefault();
+		}, [mj]),
 		onItemLeave: React$1.useCallback((n) => {
-			dj(n) || (ej.current?.focus(), $A(null));
-		}, [dj]),
+			mj(n) || (rj.current?.focus(), nj(null));
+		}, [mj]),
 		onTriggerLeave: React$1.useCallback((n) => {
-			dj(n) && n.preventDefault();
-		}, [dj]),
-		pointerGraceTimerRef: ij,
+			mj(n) && n.preventDefault();
+		}, [mj]),
+		pointerGraceTimerRef: sj,
 		onPointerGraceIntentChange: React$1.useCallback((n) => {
-			aj.current = n;
+			cj.current = n;
 		}, []),
-		children: /* @__PURE__ */ jsx(cj, {
-			...lj,
+		children: /* @__PURE__ */ jsx(dj, {
+			...fj,
 			children: /* @__PURE__ */ jsx(FocusScope, {
 				asChild: !0,
 				trapped: j,
 				onMountAutoFocus: composeEventHandlers(M, (n) => {
-					n.preventDefault(), ej.current?.focus({ preventScroll: !0 });
+					n.preventDefault(), rj.current?.focus({ preventScroll: !0 });
 				}),
 				onUnmountAutoFocus: N,
 				children: /* @__PURE__ */ jsx(DismissableLayer, {
@@ -3010,44 +3171,44 @@ var CONTENT_NAME$5 = "MenuContent", [MenuContentProvider, useMenuContentContext]
 					onDismiss: G,
 					children: /* @__PURE__ */ jsx(Root$2, {
 						asChild: !0,
-						...YA,
-						dir: qA.dir,
+						...QA,
+						dir: XA.dir,
 						orientation: "vertical",
 						loop: A,
-						currentTabStopId: ZA,
-						onCurrentTabStopIdChange: $A,
+						currentTabStopId: ej,
+						onCurrentTabStopIdChange: nj,
 						onEntryFocus: composeEventHandlers(z, (n) => {
-							qA.isUsingKeyboardRef.current || n.preventDefault();
+							XA.isUsingKeyboardRef.current || n.preventDefault();
 						}),
 						preventScrollOnEntryFocus: !0,
 						children: /* @__PURE__ */ jsx(Content$1, {
 							role: "menu",
 							"aria-orientation": "vertical",
-							"data-state": getOpenState(KA.open),
+							"data-state": getOpenState(YA.open),
 							"data-radix-menu-content": "",
-							dir: qA.dir,
+							dir: XA.dir,
+							...ZA,
 							...JA,
-							...GA,
-							ref: tj,
+							ref: ij,
 							style: {
 								outline: "none",
-								...GA.style
+								...JA.style
 							},
-							onKeyDown: composeEventHandlers(GA.onKeyDown, (n) => {
+							onKeyDown: composeEventHandlers(JA.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 && uj(n.key));
-								let A = ej.current;
+								_ && (n.key === "Tab" && n.preventDefault(), !E && O && pj(n.key));
+								let A = rj.current;
 								if (n.target !== A || !FIRST_LAST_KEYS.includes(n.key)) return;
 								n.preventDefault();
-								let j = XA().filter((n) => !n.disabled).map((n) => n.ref.current);
+								let j = $A().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(nj.current), rj.current = "");
+								n.currentTarget.contains(n.target) || (window.clearTimeout(aj.current), oj.current = "");
 							}),
 							onPointerMove: composeEventHandlers(_.onPointerMove, whenMouse((n) => {
-								let _ = n.target, E = sj.current !== n.clientX;
-								n.currentTarget.contains(_) && E && (oj.current = n.clientX > sj.current ? "right" : "left", sj.current = n.clientX);
+								let _ = n.target, E = uj.current !== n.clientX;
+								n.currentTarget.contains(_) && E && (lj.current = n.clientX > uj.current ? "right" : "left", uj.current = n.clientX);
 							}))
 						})
 					})
@@ -3598,7 +3759,7 @@ ContextMenuSubContent.displayName = SUB_CONTENT_NAME$1;
 function whenTouchOrPen(n) {
 	return (_) => _.pointerType === "mouse" ? void 0 : n(_);
 }
-var Root2$3 = ContextMenu, Trigger$3 = ContextMenuTrigger, Portal2$1 = ContextMenuPortal, Content2$2 = ContextMenuContent, Item2$1 = ContextMenuItem, Separator2$1 = ContextMenuSeparator, Sub2$1 = ContextMenuSub, SubTrigger2$1 = ContextMenuSubTrigger, SubContent2$1 = ContextMenuSubContent, DROPDOWN_MENU_NAME = "DropdownMenu", [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [createMenuScope]), useMenuScope = createMenuScope(), [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME), DropdownMenu = (_) => {
+var Root2$3 = ContextMenu, Trigger$3 = ContextMenuTrigger, Portal2$1 = ContextMenuPortal, Content2$2 = ContextMenuContent, Item2$1 = ContextMenuItem, CheckboxItem2$1 = ContextMenuCheckboxItem, ItemIndicator2$1 = ContextMenuItemIndicator, Separator2$1 = ContextMenuSeparator, Sub2$1 = ContextMenuSub, SubTrigger2$1 = ContextMenuSubTrigger, SubContent2$1 = ContextMenuSubContent, DROPDOWN_MENU_NAME = "DropdownMenu", [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [createMenuScope]), useMenuScope = createMenuScope(), [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME), DropdownMenu = (_) => {
 	let { __scopeDropdownMenu: E, children: O, dir: A, open: j, defaultOpen: M, onOpenChange: N, modal: P = !0 } = _, z = useMenuScope(E), B = React$1.useRef(null), [H, U] = useControllableState({
 		prop: j,
 		defaultProp: M ?? !1,
@@ -3995,11 +4156,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), [GA, KA] = React$1.useState(null), [qA, JA] = React$1.useState(0), [YA, XA] = React$1.useState(0), [ZA, $A] = React$1.useState(!1), [ej, tj] = React$1.useState(!1), nj = useComposedRefs(E, (n) => z(n)), rj = 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), [JA, YA] = React$1.useState(null), [XA, ZA] = React$1.useState(0), [QA, $A] = React$1.useState(0), [ej, nj] = React$1.useState(!1), [rj, ij] = React$1.useState(!1), aj = useComposedRefs(E, (n) => z(n)), oj = useDirection(j);
 	return /* @__PURE__ */ jsx(ScrollAreaProvider, {
 		scope: O,
 		type: A,
-		dir: rj,
+		dir: oj,
 		scrollHideDelay: M,
 		scrollArea: P,
 		viewport: B,
@@ -4008,22 +4169,22 @@ var SCROLL_AREA_NAME = "ScrollArea", [createScrollAreaContext, createScrollAreaS
 		onContentChange: W,
 		scrollbarX: G,
 		onScrollbarXChange: Z,
-		scrollbarXEnabled: ZA,
-		onScrollbarXEnabledChange: $A,
-		scrollbarY: GA,
-		onScrollbarYChange: KA,
-		scrollbarYEnabled: ej,
-		onScrollbarYEnabledChange: tj,
-		onCornerWidthChange: JA,
-		onCornerHeightChange: XA,
+		scrollbarXEnabled: ej,
+		onScrollbarXEnabledChange: nj,
+		scrollbarY: JA,
+		onScrollbarYChange: YA,
+		scrollbarYEnabled: rj,
+		onScrollbarYEnabledChange: ij,
+		onCornerWidthChange: ZA,
+		onCornerHeightChange: $A,
 		children: /* @__PURE__ */ jsx(Primitive.div, {
-			dir: rj,
+			dir: oj,
 			...N,
-			ref: nj,
+			ref: aj,
 			style: {
 				position: "relative",
-				"--radix-scroll-area-corner-width": qA + "px",
-				"--radix-scroll-area-corner-height": YA + "px",
+				"--radix-scroll-area-corner-width": XA + "px",
+				"--radix-scroll-area-corner-height": QA + "px",
 				..._.style
 			}
 		})
@@ -4294,46 +4455,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, GA] = React$1.useState(null), KA = useComposedRefs(E, (n) => GA(n)), qA = React$1.useRef(null), JA = React$1.useRef(""), YA = G.viewport, XA = A.content - A.viewport, ZA = useCallbackRef(H), $A = useCallbackRef(z), ej = useDebounceCallback(U, 10);
-	function tj(n) {
-		qA.current && B({
-			x: n.clientX - qA.current.left,
-			y: n.clientY - qA.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, JA] = React$1.useState(null), YA = useComposedRefs(E, (n) => JA(n)), XA = React$1.useRef(null), ZA = React$1.useRef(""), QA = G.viewport, $A = A.content - A.viewport, ej = useCallbackRef(H), nj = useCallbackRef(z), rj = useDebounceCallback(U, 10);
+	function ij(n) {
+		XA.current && B({
+			x: n.clientX - XA.current.left,
+			y: n.clientY - XA.current.top
 		});
 	}
 	return React$1.useEffect(() => {
 		let n = (n) => {
 			let _ = n.target;
-			Z?.contains(_) && ZA(n, XA);
+			Z?.contains(_) && ej(n, $A);
 		};
 		return document.addEventListener("wheel", n, { passive: !1 }), () => document.removeEventListener("wheel", n, { passive: !1 });
 	}, [
-		YA,
+		QA,
 		Z,
-		XA,
-		ZA
-	]), React$1.useEffect($A, [A, $A]), useResizeObserver(Z, ej), useResizeObserver(G.content, ej), /* @__PURE__ */ jsx(ScrollbarProvider, {
+		$A,
+		ej
+	]), React$1.useEffect(nj, [A, nj]), useResizeObserver(Z, rj), useResizeObserver(G.content, rj), /* @__PURE__ */ jsx(ScrollbarProvider, {
 		scope: O,
 		scrollbar: Z,
 		hasThumb: j,
 		onThumbChange: useCallbackRef(M),
 		onThumbPointerUp: useCallbackRef(N),
-		onThumbPositionChange: $A,
+		onThumbPositionChange: nj,
 		onThumbPointerDown: useCallbackRef(P),
 		children: /* @__PURE__ */ jsx(Primitive.div, {
 			...W,
-			ref: KA,
+			ref: YA,
 			style: {
 				position: "absolute",
 				...W.style
 			},
 			onPointerDown: composeEventHandlers(_.onPointerDown, (n) => {
-				n.button === 0 && (n.target.setPointerCapture(n.pointerId), qA.current = Z.getBoundingClientRect(), JA.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), XA.current = Z.getBoundingClientRect(), ZA.current = document.body.style.webkitUserSelect, document.body.style.webkitUserSelect = "none", G.viewport && (G.viewport.style.scrollBehavior = "auto"), ij(n));
 			}),
-			onPointerMove: composeEventHandlers(_.onPointerMove, tj),
+			onPointerMove: composeEventHandlers(_.onPointerMove, ij),
 			onPointerUp: composeEventHandlers(_.onPointerUp, (n) => {
 				let _ = n.target;
-				_.hasPointerCapture(n.pointerId) && _.releasePointerCapture(n.pointerId), document.body.style.webkitUserSelect = JA.current, G.viewport && (G.viewport.style.scrollBehavior = ""), qA.current = null;
+				_.hasPointerCapture(n.pointerId) && _.releasePointerCapture(n.pointerId), document.body.style.webkitUserSelect = ZA.current, G.viewport && (G.viewport.style.scrollBehavior = ""), XA.current = null;
 			})
 		})
 	});
@@ -4475,7 +4636,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(E, (n) => G(n)), GA = React$1.useRef(!1), KA = W ? H || !!W.closest("form") : !0, [qA, JA] = 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(E, (n) => G(n)), JA = React$1.useRef(!1), YA = W ? H || !!W.closest("form") : !0, [XA, ZA] = useControllableState({
 		prop: j,
 		defaultProp: M ?? !1,
 		onChange: B,
@@ -4483,28 +4644,28 @@ var Root$1 = ScrollArea, Viewport = ScrollAreaViewport, Scrollbar = ScrollAreaSc
 	});
 	return /* @__PURE__ */ jsxs(SwitchProvider, {
 		scope: O,
-		checked: qA,
+		checked: XA,
 		disabled: P,
 		children: [/* @__PURE__ */ jsx(Primitive.button, {
 			type: "button",
 			role: "switch",
-			"aria-checked": qA,
+			"aria-checked": XA,
 			"aria-required": N,
-			"data-state": getState(qA),
+			"data-state": getState(XA),
 			"data-disabled": P ? "" : void 0,
 			disabled: P,
 			value: z,
 			...U,
 			ref: Z,
 			onClick: composeEventHandlers(_.onClick, (n) => {
-				JA((n) => !n), KA && (GA.current = n.isPropagationStopped(), GA.current || n.stopPropagation());
+				ZA((n) => !n), YA && (JA.current = n.isPropagationStopped(), JA.current || n.stopPropagation());
 			})
-		}), KA && /* @__PURE__ */ jsx(SwitchBubbleInput, {
+		}), YA && /* @__PURE__ */ jsx(SwitchBubbleInput, {
 			control: W,
-			bubbles: !GA.current,
+			bubbles: !JA.current,
 			name: A,
 			value: z,
-			checked: qA,
+			checked: XA,
 			required: N,
 			disabled: P,
 			form: H,
@@ -4688,22 +4849,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, GA = P ?? z.delayDuration, KA = React$1.useRef(!1), [qA, JA] = 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, JA = P ?? z.delayDuration, YA = React$1.useRef(!1), [XA, ZA] = useControllableState({
 		prop: A,
 		defaultProp: j ?? !1,
 		onChange: (n) => {
 			n ? (z.onOpen(), document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN))) : z.onClose(), M?.(n);
 		},
 		caller: TOOLTIP_NAME
-	}), YA = React$1.useMemo(() => qA ? KA.current ? "delayed-open" : "instant-open" : "closed", [qA]), XA = React$1.useCallback(() => {
-		window.clearTimeout(G.current), G.current = 0, KA.current = !1, JA(!0);
-	}, [JA]), ZA = React$1.useCallback(() => {
-		window.clearTimeout(G.current), G.current = 0, JA(!1);
-	}, [JA]), $A = React$1.useCallback(() => {
+	}), QA = React$1.useMemo(() => XA ? YA.current ? "delayed-open" : "instant-open" : "closed", [XA]), $A = React$1.useCallback(() => {
+		window.clearTimeout(G.current), G.current = 0, YA.current = !1, ZA(!0);
+	}, [ZA]), ej = React$1.useCallback(() => {
+		window.clearTimeout(G.current), G.current = 0, ZA(!1);
+	}, [ZA]), nj = React$1.useCallback(() => {
 		window.clearTimeout(G.current), G.current = window.setTimeout(() => {
-			KA.current = !0, JA(!0), G.current = 0;
-		}, GA);
-	}, [GA, JA]);
+			YA.current = !0, ZA(!0), G.current = 0;
+		}, JA);
+	}, [JA, ZA]);
 	return React$1.useEffect(() => () => {
 		G.current &&= (window.clearTimeout(G.current), 0);
 	}, []), /* @__PURE__ */ jsx(Root2$4, {
@@ -4711,22 +4872,22 @@ var TOOLTIP_NAME = "Tooltip", [TooltipContextProvider, useTooltipContext] = crea
 		children: /* @__PURE__ */ jsx(TooltipContextProvider, {
 			scope: E,
 			contentId: W,
-			open: qA,
-			stateAttribute: YA,
+			open: XA,
+			stateAttribute: QA,
 			trigger: H,
 			onTriggerChange: U,
 			onTriggerEnter: React$1.useCallback(() => {
-				z.isOpenDelayedRef.current ? $A() : XA();
+				z.isOpenDelayedRef.current ? nj() : $A();
 			}, [
 				z.isOpenDelayedRef,
-				$A,
-				XA
+				nj,
+				$A
 			]),
 			onTriggerLeave: React$1.useCallback(() => {
-				Z ? ZA() : (window.clearTimeout(G.current), G.current = 0);
-			}, [ZA, Z]),
-			onOpen: XA,
-			onClose: ZA,
+				Z ? ej() : (window.clearTimeout(G.current), G.current = 0);
+			}, [ej, Z]),
+			onOpen: $A,
+			onClose: ej,
 			disableHoverableContent: Z,
 			children: O
 		})
@@ -5539,14 +5700,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, GA] = React$1.useState(j);
-	React$1.useEffect(() => GA(j), [j]);
-	let [KA, qA] = React$1.useState(M);
-	React$1.useEffect(() => qA(M), [M]);
-	let [JA, YA] = React$1.useState(N);
-	React$1.useEffect(() => YA(N), [N]);
-	let [XA, ZA] = React$1.useState(P);
-	return React$1.useEffect(() => ZA(P), [P]), React$1.createElement(A$2, {
+	let [Z, JA] = React$1.useState(j);
+	React$1.useEffect(() => JA(j), [j]);
+	let [YA, XA] = React$1.useState(M);
+	React$1.useEffect(() => XA(M), [M]);
+	let [ZA, QA] = React$1.useState(N);
+	React$1.useEffect(() => QA(N), [N]);
+	let [$A, ej] = React$1.useState(P);
+	return React$1.useEffect(() => ej(P), [P]), React$1.createElement(A$2, {
 		...B,
 		ref: E,
 		isRoot: !0,
@@ -5554,62 +5715,62 @@ var I$3 = React$1.forwardRef((_, E) => {
 		appearance: H,
 		accentColor: W,
 		grayColor: Z,
-		panelBackground: KA,
-		radius: JA,
-		scaling: XA,
+		panelBackground: YA,
+		radius: ZA,
+		scaling: $A,
 		onAppearanceChange: U,
 		onAccentColorChange: G,
-		onGrayColorChange: GA,
-		onPanelBackgroundChange: qA,
-		onRadiusChange: YA,
-		onScalingChange: ZA
+		onGrayColorChange: JA,
+		onPanelBackgroundChange: XA,
+		onRadiusChange: QA,
+		onScalingChange: ej
 	});
 });
 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: GA = d$5, onRadiusChange: KA = d$5, onScalingChange: qA = d$5, ...JA } = _, YA = A ? Slot$3 : "div", XA = z === "auto" ? a$12(P) : z, ZA = _.appearance === "light" || _.appearance === "dark", QA = M === void 0 ? j || ZA : 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: JA = d$5, onRadiusChange: YA = d$5, onScalingChange: XA = d$5, ...ZA } = _, QA = A ? Slot$3 : "div", $A = z === "auto" ? a$12(P) : z, ej = _.appearance === "light" || _.appearance === "dark", tj = M === void 0 ? j || ej : M;
 	return React$1.createElement(P$3.Provider, { value: React$1.useMemo(() => ({
 		appearance: N,
 		accentColor: P,
 		grayColor: z,
-		resolvedGrayColor: XA,
+		resolvedGrayColor: $A,
 		panelBackground: B,
 		radius: H,
 		scaling: U,
 		onAppearanceChange: W,
 		onAccentColorChange: G,
 		onGrayColorChange: Z,
-		onPanelBackgroundChange: GA,
-		onRadiusChange: KA,
-		onScalingChange: qA
+		onPanelBackgroundChange: JA,
+		onRadiusChange: YA,
+		onScalingChange: XA
 	}), [
 		N,
 		P,
 		z,
-		XA,
+		$A,
 		B,
 		H,
 		U,
 		W,
 		G,
 		Z,
-		GA,
-		KA,
-		qA
-	]) }, React$1.createElement(YA, {
+		JA,
+		YA,
+		XA
+	]) }, React$1.createElement(QA, {
 		"data-is-root-theme": j ? "true" : "false",
 		"data-accent-color": P,
-		"data-gray-color": XA,
-		"data-has-background": QA ? "true" : "false",
+		"data-gray-color": $A,
+		"data-has-background": tj ? "true" : "false",
 		"data-panel-background": B,
 		"data-radius": H,
 		"data-scaling": U,
 		ref: E,
-		...JA,
+		...ZA,
 		className: (0, import_classnames$18.default)("radix-themes", {
 			light: N === "light",
 			dark: N === "dark"
-		}, JA.className)
+		}, ZA.className)
 	}));
 });
 A$2.displayName = "ThemeImpl";
@@ -5898,7 +6059,7 @@ var e$2 = Slot$3, s$12 = ["div", "span"], o$8 = [
 		customProperties: ["--grid-row-end"],
 		responsive: !0
 	}
-}, import_classnames$16 = /* @__PURE__ */ __toESM(require_classnames()), p$1 = React$1.forwardRef((_, E) => {
+}, import_classnames$16 = /* @__PURE__ */ __toESM(require_classnames()), p = React$1.forwardRef((_, E) => {
 	let { className: O, asChild: A, as: j = "div", ...M } = v$1(_, p$12, u$3, r$1);
 	return React$1.createElement(A ? e$2 : j, {
 		...M,
@@ -5906,7 +6067,7 @@ var e$2 = Slot$3, s$12 = ["div", "span"], o$8 = [
 		className: (0, import_classnames$16.default)("rt-Box", O)
 	});
 });
-p$1.displayName = "Box";
+p.displayName = "Box";
 var t$5 = [
 	"1",
 	"2",
@@ -6042,7 +6203,7 @@ var t$5 = [
 function f$6(n) {
 	return n === "between" ? "space-between" : n;
 }
-var import_classnames$15 = /* @__PURE__ */ __toESM(require_classnames()), p = React$1.forwardRef((_, E) => {
+var import_classnames$15 = /* @__PURE__ */ __toESM(require_classnames()), p$1 = React$1.forwardRef((_, E) => {
 	let { className: O, asChild: A, as: j = "div", ...M } = v$1(_, u$2, u$3, r$1);
 	return React$1.createElement(A ? e$2 : j, {
 		...M,
@@ -6050,7 +6211,7 @@ var import_classnames$15 = /* @__PURE__ */ __toESM(require_classnames()), p = Re
 		className: (0, import_classnames$15.default)("rt-Flex", O)
 	});
 });
-p.displayName = "Flex";
+p$1.displayName = "Flex";
 var s$10 = {
 	size: {
 		type: "enum",
@@ -6075,7 +6236,7 @@ var s$10 = {
 		ref: E,
 		className: (0, import_classnames$14.default)("rt-Spinner", O)
 	}, React$1.createElement("span", { className: "rt-SpinnerLeaf" }), React$1.createElement("span", { className: "rt-SpinnerLeaf" }), React$1.createElement("span", { className: "rt-SpinnerLeaf" }), React$1.createElement("span", { className: "rt-SpinnerLeaf" }), React$1.createElement("span", { className: "rt-SpinnerLeaf" }), React$1.createElement("span", { className: "rt-SpinnerLeaf" }), React$1.createElement("span", { className: "rt-SpinnerLeaf" }), React$1.createElement("span", { className: "rt-SpinnerLeaf" }));
-	return A === void 0 ? N : React$1.createElement(p, {
+	return A === void 0 ? N : React$1.createElement(p$1, {
 		asChild: !0,
 		position: "relative",
 		align: "center",
@@ -6087,7 +6248,7 @@ var s$10 = {
 			visibility: "hidden"
 		},
 		inert: void 0
-	}, A), React$1.createElement(p, {
+	}, A), React$1.createElement(p$1, {
 		asChild: !0,
 		align: "center",
 		justify: "center",
@@ -6124,7 +6285,7 @@ var import_classnames$13 = /* @__PURE__ */ __toESM(require_classnames()), n$1 =
 			visibility: "hidden"
 		},
 		"aria-hidden": !0
-	}, j), React$1.createElement(d$4, null, j), React$1.createElement(p, {
+	}, j), React$1.createElement(d$4, null, j), React$1.createElement(p$1, {
 		asChild: !0,
 		align: "center",
 		justify: "center",
@@ -6381,7 +6542,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: GA = t$3.scrollbars.default, ...KA } = 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: JA = t$3.scrollbars.default, ...YA } = O;
 	return React$1.createElement(Root$1, {
 		type: H,
 		scrollHideDelay: U,
@@ -6392,10 +6553,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, {
-		...KA,
+		...YA,
 		ref: E,
 		className: "rt-ScrollAreaViewport"
-	}, _), React$1.createElement("div", { className: "rt-ScrollAreaViewportFocusRing" }), GA === "vertical" ? null : React$1.createElement(Scrollbar, {
+	}, _), React$1.createElement("div", { className: "rt-ScrollAreaViewportFocusRing" }), JA === "vertical" ? null : React$1.createElement(Scrollbar, {
 		"data-radius": Z,
 		orientation: "horizontal",
 		className: (0, import_classnames$9.default)("rt-ScrollAreaScrollbar", g$3({
@@ -6403,7 +6564,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" })), GA === "horizontal" ? null : React$1.createElement(Scrollbar, {
+	}, React$1.createElement(Thumb$1, { className: "rt-ScrollAreaThumb" })), JA === "horizontal" ? null : React$1.createElement(Scrollbar, {
 		"data-radius": Z,
 		orientation: "vertical",
 		className: (0, import_classnames$9.default)("rt-ScrollAreaScrollbar", g$3({
@@ -6411,7 +6572,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" })), GA === "both" ? React$1.createElement(Corner, { className: "rt-ScrollAreaCorner" }) : null)));
+	}, React$1.createElement(Thumb$1, { className: "rt-ScrollAreaThumb" })), JA === "both" ? React$1.createElement(Corner, { className: "rt-ScrollAreaCorner" }) : null)));
 });
 c.displayName = "ScrollArea";
 var n$2 = {
@@ -7614,17 +7775,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: GA, separatorToPanels: KA } = A.get(E) ?? { defaultLayoutDeferred: !1 };
-		if (Z && W && GA && KA) {
+		let W = O.get(E), { defaultLayoutDeferred: G, derivedPanelConstraints: Z, layout: JA, separatorToPanels: YA } = A.get(E) ?? { defaultLayoutDeferred: !1 };
+		if (Z && W && JA && YA) {
 			let _ = Z$1({
 				delta: U,
 				initialLayout: W,
 				panelConstraints: Z,
 				pivotIndices: n.panels.map((n) => H.indexOf(n)),
-				prevLayout: GA,
+				prevLayout: JA,
 				trigger: "mouse-or-touch"
 			});
-			if (B$1(_, GA)) {
+			if (B$1(_, JA)) {
 				if (U !== 0 && !z) switch (B) {
 					case "horizontal":
 						M |= U < 0 ? De : Oe$1;
@@ -7638,7 +7799,7 @@ function $e({ document: n, event: _, hitRegions: E, initialLayoutMap: O, mounted
 					defaultLayoutDeferred: G,
 					derivedPanelConstraints: Z,
 					layout: _,
-					separatorToPanels: KA
+					separatorToPanels: YA
 				});
 				let E = n.group.panels.map(({ id: n }) => n).join(",");
 				n.group.inMemoryLayouts[E] = _;
@@ -7850,64 +8011,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, ...U }) {
 	let W = useRef({}), G = le$1((n) => {
 		B$1(W.current, n) || (W.current = n, P?.(n));
-	}), Z = ae$1(N), JA = useRef(null), [YA, XA] = useState(!1), [ZA, $A] = useState(E ?? {}), [ej, tj] = wt(), nj = useRef({
+	}), Z = ae$1(N), ZA = useRef(null), [QA, $A] = useState(!1), [ej, nj] = useState(E ?? {}), [rj, ij] = wt(), aj = useRef({
 		lastExpandedPanelSizes: {},
 		layouts: {},
 		panels: [],
 		separators: []
-	}), rj = ue$1(JA, j);
+	}), oj = ue$1(ZA, j);
 	Pt(Z, M);
-	let ij = useMemo(() => ({
+	let sj = useMemo(() => ({
 		id: Z,
 		orientation: z,
 		registerPanel: (n) => {
-			let _ = nj.current;
-			return _.panels = ie$1(z, [..._.panels, n]), tj(), () => {
-				_.panels = _.panels.filter((_) => _ !== n), tj();
+			let _ = aj.current;
+			return _.panels = ie$1(z, [..._.panels, n]), ij(), () => {
+				_.panels = _.panels.filter((_) => _ !== n), ij();
 			};
 		},
 		registerSeparator: (n) => {
-			let _ = nj.current;
-			return _.separators = ie$1(z, [..._.separators, n]), tj(), () => {
-				_.separators = _.separators.filter((_) => _ !== n), tj();
+			let _ = aj.current;
+			return _.separators = ie$1(z, [..._.separators, n]), ij(), () => {
+				_.separators = _.separators.filter((_) => _ !== n), ij();
 			};
 		}
 	}), [
 		Z,
-		tj,
+		ij,
 		z
-	]), aj = Lt({
+	]), cj = Lt({
 		defaultLayout: E,
 		disableCursor: O
-	}), oj = useRef(null);
+	}), lj = useRef(null);
 	A$1(() => {
-		let n = JA.current;
+		let n = ZA.current;
 		if (n === null) return;
-		let _ = nj.current, E = {
-			defaultLayout: aj.defaultLayout,
-			disableCursor: !!aj.disableCursor,
+		let _ = aj.current, E = {
+			defaultLayout: cj.defaultLayout,
+			disableCursor: !!cj.disableCursor,
 			disabled: !!A,
 			element: n,
 			id: Z,
-			inMemoryLastExpandedPanelSizes: nj.current.lastExpandedPanelSizes,
-			inMemoryLayouts: nj.current.layouts,
+			inMemoryLastExpandedPanelSizes: aj.current.lastExpandedPanelSizes,
+			inMemoryLayouts: aj.current.layouts,
 			orientation: z,
 			panels: _.panels,
 			separators: _.separators
 		};
-		oj.current = E;
+		lj.current = E;
 		let O = bt(E), j = D$1().mountedGroups.get(E);
 		if (j) {
 			let { defaultLayoutDeferred: n, derivedPanelConstraints: _, layout: E } = j;
-			!n && _.length > 0 && ($A(E), G?.(E));
+			!n && _.length > 0 && (nj(E), G?.(E));
 		}
 		let M = T$1.addListener("interactionStateChange", (n) => {
 			switch (n.state) {
 				case "active":
-					XA(n.hitRegions.some((n) => n.group === E));
+					$A(n.hitRegions.some((n) => n.group === E));
 					break;
 				default:
-					XA(!1);
+					$A(!1);
 					break;
 			}
 		}), N = T$1.addListener("mountedGroupsChange", (n) => {
@@ -7915,30 +8076,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;
-				$A(O), G?.(O);
+				nj(O), G?.(O);
 			}
 		});
 		return () => {
-			oj.current = null, O(), M(), N();
+			lj.current = null, O(), M(), N();
 		};
 	}, [
 		A,
 		Z,
 		G,
 		z,
-		ej,
-		aj
+		rj,
+		cj
 	]), useEffect(() => {
-		let n = oj.current;
+		let n = lj.current;
 		n && (n.defaultLayout = E, n.disableCursor = !!O);
 	});
-	let sj = { [Fe]: YA ? "none" : void 0 };
-	for (let n in ZA) {
+	let uj = { [Fe]: QA ? "none" : void 0 };
+	for (let n in ej) {
 		let _ = Ve(Z, n);
-		sj[_] = ZA[n];
+		uj[_] = ej[n];
 	}
 	return /* @__PURE__ */ jsx(je.Provider, {
-		value: ij,
+		value: sj,
 		children: /* @__PURE__ */ jsx("div", {
 			...U,
 			"aria-orientation": z,
@@ -7946,13 +8107,13 @@ function Rt({ children: n, className: _, defaultLayout: E, disableCursor: O, dis
 			"data-group": !0,
 			"data-testid": Z,
 			id: Z,
-			ref: rj,
+			ref: oj,
 			style: {
 				height: "100%",
 				width: "100%",
 				overflow: "hidden",
 				...B,
-				...sj,
+				...uj,
 				display: "flex",
 				flexDirection: z === "horizontal" ? "row" : "column",
 				flexWrap: "nowrap"
@@ -8070,12 +8231,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), GA = ue$1(Z, j), { id: qA, registerPanel: JA } = ce$1(), YA = z !== null, XA = le$1((n, _, E) => {
+	let W = !!M, G = ae$1(M), Z = useRef(null), JA = ue$1(Z, j), { id: XA, registerPanel: ZA } = ce$1(), QA = z !== null, $A = le$1((n, _, E) => {
 		z?.(n, M, E);
 	});
 	A$1(() => {
 		let n = Z.current;
-		if (n !== null) return JA({
+		if (n !== null) return ZA({
 			element: n,
 			id: G,
 			idIsStable: W,
@@ -8083,7 +8244,7 @@ function kt({ children: n, className: _, collapsedSize: E = "0%", collapsible: O
 				expandToSize: void 0,
 				prevSize: void 0
 			},
-			onResize: YA ? XA : void 0,
+			onResize: QA ? $A : void 0,
 			panelConstraints: {
 				collapsedSize: E,
 				collapsible: O,
@@ -8096,25 +8257,25 @@ function kt({ children: n, className: _, collapsedSize: E = "0%", collapsible: O
 		E,
 		O,
 		A,
-		YA,
+		QA,
 		G,
 		W,
 		N,
 		P,
-		XA,
-		JA
+		$A,
+		ZA
 	]), It(G, B);
-	let ZA = Ve(qA, G);
+	let ej = Ve(XA, G);
 	return /* @__PURE__ */ jsx("div", {
 		...U,
 		"data-panel": !0,
 		"data-testid": G,
 		id: G,
-		ref: GA,
+		ref: JA,
 		style: {
 			...Gt,
 			flexBasis: 0,
-			flexGrow: `var(${ZA}, 1)`,
+			flexGrow: `var(${ej}, 1)`,
 			flexShrink: 1,
 			overflow: "hidden",
 			pointerEvents: `var(${Fe})`
@@ -8177,7 +8338,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(), GA = 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(), JA = G === "horizontal" ? "vertical" : "horizontal";
 	return A$1(() => {
 		let n = H.current;
 		if (n !== null) {
@@ -8213,7 +8374,7 @@ function Ot({ children: n, className: _, elementRef: E, id: O, style: A, ...j })
 	]), /* @__PURE__ */ jsx("div", {
 		...j,
 		"aria-controls": N.valueControls,
-		"aria-orientation": GA,
+		"aria-orientation": JA,
 		"aria-valuemax": N.valueMax,
 		"aria-valuemin": N.valueMin,
 		"aria-valuenow": N.valueNow,
@@ -8234,167 +8395,7 @@ function Ot({ children: n, className: _, elementRef: E, id: O, style: A, ...j })
 	});
 }
 Ot.displayName = "Separator";
-function _objectWithoutPropertiesLoose(n, _) {
-	if (n == null) return {};
-	var E = {}, O = Object.keys(n), A, j;
-	for (j = 0; j < O.length; j++) A = O[j], !(_.indexOf(A) >= 0) && (E[A] = n[A]);
-	return E;
-}
-var _excluded$T = ["color"], CheckIcon = /* @__PURE__ */ forwardRef(function(n, _) {
-	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$T);
-	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: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
-		fill: O,
-		fillRule: "evenodd",
-		clipRule: "evenodd"
-	}));
-}), _excluded$Y = ["color"], ChevronRightIcon = /* @__PURE__ */ forwardRef(function(n, _) {
-	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$Y);
-	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.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z",
-		fill: O,
-		fillRule: "evenodd",
-		clipRule: "evenodd"
-	}));
-}), _excluded$1r = ["color"], Cross2Icon = /* @__PURE__ */ forwardRef(function(n, _) {
-	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$1r);
-	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: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
-		fill: O,
-		fillRule: "evenodd",
-		clipRule: "evenodd"
-	}));
-}), _excluded$1M = ["color"], DoubleArrowLeftIcon = /* @__PURE__ */ forwardRef(function(n, _) {
-	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$1M);
-	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.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z",
-		fill: O,
-		fillRule: "evenodd",
-		clipRule: "evenodd"
-	}));
-}), _excluded$1N = ["color"], DoubleArrowRightIcon = /* @__PURE__ */ forwardRef(function(n, _) {
-	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$1N);
-	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: "M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z",
-		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({
-		width: "15",
-		height: "15",
-		viewBox: "0 0 15 15",
-		fill: "none",
-		xmlns: "http://www.w3.org/2000/svg"
-	}, A, { ref: _ }), createElement("path", {
-		d: "M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z",
-		fill: O,
-		fillRule: "evenodd",
-		clipRule: "evenodd"
-	}));
-}), _excluded$26 = ["color"], EyeOpenIcon = /* @__PURE__ */ forwardRef(function(n, _) {
-	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$26);
-	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.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",
-		fill: O,
-		fillRule: "evenodd",
-		clipRule: "evenodd"
-	}));
-}), _excluded$2l = ["color"], GearIcon = /* @__PURE__ */ forwardRef(function(n, _) {
-	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$2l);
-	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.07095 0.650238C6.67391 0.650238 6.32977 0.925096 6.24198 1.31231L6.0039 2.36247C5.6249 2.47269 5.26335 2.62363 4.92436 2.81013L4.01335 2.23585C3.67748 2.02413 3.23978 2.07312 2.95903 2.35386L2.35294 2.95996C2.0722 3.2407 2.0232 3.6784 2.23493 4.01427L2.80942 4.92561C2.62307 5.2645 2.47227 5.62594 2.36216 6.00481L1.31209 6.24287C0.924883 6.33065 0.650024 6.6748 0.650024 7.07183V7.92897C0.650024 8.32601 0.924883 8.67015 1.31209 8.75794L2.36228 8.99603C2.47246 9.375 2.62335 9.73652 2.80979 10.0755L2.2354 10.9867C2.02367 11.3225 2.07267 11.7602 2.35341 12.041L2.95951 12.6471C3.24025 12.9278 3.67795 12.9768 4.01382 12.7651L4.92506 12.1907C5.26384 12.377 5.62516 12.5278 6.0039 12.6379L6.24198 13.6881C6.32977 14.0753 6.67391 14.3502 7.07095 14.3502H7.92809C8.32512 14.3502 8.66927 14.0753 8.75705 13.6881L8.99505 12.6383C9.37411 12.5282 9.73573 12.3773 10.0748 12.1909L10.986 12.7653C11.3218 12.977 11.7595 12.928 12.0403 12.6473L12.6464 12.0412C12.9271 11.7604 12.9761 11.3227 12.7644 10.9869L12.1902 10.076C12.3768 9.73688 12.5278 9.37515 12.638 8.99596L13.6879 8.75794C14.0751 8.67015 14.35 8.32601 14.35 7.92897V7.07183C14.35 6.6748 14.0751 6.33065 13.6879 6.24287L12.6381 6.00488C12.528 5.62578 12.3771 5.26414 12.1906 4.92507L12.7648 4.01407C12.9766 3.6782 12.9276 3.2405 12.6468 2.95975L12.0407 2.35366C11.76 2.07292 11.3223 2.02392 10.9864 2.23565L10.0755 2.80989C9.73622 2.62328 9.37437 2.47229 8.99505 2.36209L8.75705 1.31231C8.66927 0.925096 8.32512 0.650238 7.92809 0.650238H7.07095ZM4.92053 3.81251C5.44724 3.44339 6.05665 3.18424 6.71543 3.06839L7.07095 1.50024H7.92809L8.28355 3.06816C8.94267 3.18387 9.5524 3.44302 10.0794 3.81224L11.4397 2.9547L12.0458 3.56079L11.1882 4.92117C11.5573 5.44798 11.8164 6.0575 11.9321 6.71638L13.5 7.07183V7.92897L11.932 8.28444C11.8162 8.94342 11.557 9.55301 11.1878 10.0798L12.0453 11.4402L11.4392 12.0462L10.0787 11.1886C9.55192 11.5576 8.94241 11.8166 8.28355 11.9323L7.92809 13.5002H7.07095L6.71543 11.932C6.0569 11.8162 5.44772 11.5572 4.92116 11.1883L3.56055 12.046L2.95445 11.4399L3.81213 10.0794C3.4431 9.55266 3.18403 8.94326 3.06825 8.2845L1.50002 7.92897V7.07183L3.06818 6.71632C3.18388 6.05765 3.44283 5.44833 3.81171 4.92165L2.95398 3.561L3.56008 2.95491L4.92053 3.81251ZM9.02496 7.50008C9.02496 8.34226 8.34223 9.02499 7.50005 9.02499C6.65786 9.02499 5.97513 8.34226 5.97513 7.50008C5.97513 6.65789 6.65786 5.97516 7.50005 5.97516C8.34223 5.97516 9.02496 6.65789 9.02496 7.50008ZM9.92496 7.50008C9.92496 8.83932 8.83929 9.92499 7.50005 9.92499C6.1608 9.92499 5.07513 8.83932 5.07513 7.50008C5.07513 6.16084 6.1608 5.07516 7.50005 5.07516C8.83929 5.07516 9.92496 6.16084 9.92496 7.50008Z",
-		fill: O,
-		fillRule: "evenodd",
-		clipRule: "evenodd"
-	}));
-}), _excluded$3x = ["color"], PlusIcon = /* @__PURE__ */ forwardRef(function(n, _) {
-	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$3x);
-	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: "M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z",
-		fill: O,
-		fillRule: "evenodd",
-		clipRule: "evenodd"
-	}));
-}), _excluded$3V = ["color"], Share1Icon = /* @__PURE__ */ forwardRef(function(n, _) {
-	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$3V);
-	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: "M5 7.50003C5 8.32845 4.32843 9.00003 3.5 9.00003C2.67157 9.00003 2 8.32845 2 7.50003C2 6.6716 2.67157 6.00003 3.5 6.00003C4.32843 6.00003 5 6.6716 5 7.50003ZM5.71313 8.66388C5.29445 9.45838 4.46048 10 3.5 10C2.11929 10 1 8.88074 1 7.50003C1 6.11931 2.11929 5.00003 3.5 5.00003C4.46048 5.00003 5.29445 5.54167 5.71313 6.33616L9.10424 4.21671C9.03643 3.98968 9 3.74911 9 3.50003C9 2.11932 10.1193 1.00003 11.5 1.00003C12.8807 1.00003 14 2.11932 14 3.50003C14 4.88074 12.8807 6.00003 11.5 6.00003C10.6915 6.00003 9.97264 5.61624 9.51566 5.0209L5.9853 7.22738C5.99502 7.31692 6 7.40789 6 7.50003C6 7.59216 5.99502 7.68312 5.9853 7.77267L9.51567 9.97915C9.97265 9.38382 10.6915 9.00003 11.5 9.00003C12.8807 9.00003 14 10.1193 14 11.5C14 12.8807 12.8807 14 11.5 14C10.1193 14 9 12.8807 9 11.5C9 11.2509 9.03643 11.0104 9.10425 10.7833L5.71313 8.66388ZM11.5 5.00003C12.3284 5.00003 13 4.32846 13 3.50003C13 2.6716 12.3284 2.00003 11.5 2.00003C10.6716 2.00003 10 2.6716 10 3.50003C10 4.32846 10.6716 5.00003 11.5 5.00003ZM13 11.5C13 12.3285 12.3284 13 11.5 13C10.6716 13 10 12.3285 10 11.5C10 10.6716 10.6716 10 11.5 10C12.3284 10 13 10.6716 13 11.5Z",
-		fill: O,
-		fillRule: "evenodd",
-		clipRule: "evenodd"
-	}));
-}), _excluded$4G = ["color"], TrashIcon = /* @__PURE__ */ forwardRef(function(n, _) {
-	var E = n.color, O = E === void 0 ? "currentColor" : E, A = _objectWithoutPropertiesLoose(n, _excluded$4G);
-	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: "M5.5 1C5.22386 1 5 1.22386 5 1.5C5 1.77614 5.22386 2 5.5 2H9.5C9.77614 2 10 1.77614 10 1.5C10 1.22386 9.77614 1 9.5 1H5.5ZM3 3.5C3 3.22386 3.22386 3 3.5 3H5H10H11.5C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4H11V12C11 12.5523 10.5523 13 10 13H5C4.44772 13 4 12.5523 4 12V4L3.5 4C3.22386 4 3 3.77614 3 3.5ZM5 4H10V12H5V4Z",
-		fill: O,
-		fillRule: "evenodd",
-		clipRule: "evenodd"
-	}));
-}), EditorContext = createContext(void 0), SAFE_FONTS = [
+var EditorContext = createContext(void 0), SAFE_FONTS = [
 	"Arial",
 	"Helvetica",
 	"Times New Roman",
@@ -8488,7 +8489,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 	}, []), B = React.useCallback((n) => {
 		M((_) => ({
 			..._,
-			elements: _.elements.filter((_) => _.id !== n),
+			elements: _.elements.filter((_) => _.id !== n && _.parentId !== n),
 			selectedElementId: _.selectedElementId === n ? null : _.selectedElementId
 		}));
 	}, []), H = React.useCallback((n) => {
@@ -8505,13 +8506,73 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 			};
 		});
 	}, []), W = React.useCallback((n, _) => {
-		M((E) => ({
-			...E,
-			elements: E.elements.map((E) => E.id === n ? {
-				...E,
+		M((E) => {
+			let O = E.elements.findIndex((_) => _.id === n);
+			if (O === -1) return E;
+			let A = E.elements[O], j = [...E.elements];
+			if ((_.x !== void 0 || _.y !== void 0) && !_.height && !_.width) {
+				let M = _.x === void 0 ? 0 : _.x - A.x, N = _.y === void 0 ? 0 : _.y - A.y;
+				if (M !== 0 || N !== 0) return j[O] = {
+					...A,
+					..._
+				}, j = j.map((_) => _.parentId === n ? {
+					..._,
+					x: _.x + M,
+					y: _.y + N
+				} : _), {
+					...E,
+					elements: j
+				};
+			}
+			if (_.height !== void 0 && Math.abs(_.height - A.height) > .5) {
+				let M = _.height - A.height, N = A.y + A.height - 1, P = _.autoGrow === void 0 ? A.autoGrow : _.autoGrow;
+				if (P && (j = j.map((E, A) => A === O ? {
+					...E,
+					..._
+				} : E.y >= N && E.parentId !== n ? {
+					...E,
+					y: E.y + M
+				} : E)), A.parentId) {
+					let n = {
+						...A,
+						..._
+					};
+					j[O] = n;
+					let M = j.findIndex((n) => n.id === A.parentId);
+					if (M !== -1) {
+						let _ = j[M];
+						if (_.autoGrowContainer) {
+							let E = n.y + n.height, O = _.y + _.height;
+							if (E + 10 > O) {
+								let O = E + 10 - _.y, A = O - _.height, N = _.y + _.height - 1;
+								j[M] = {
+									..._,
+									height: O
+								}, j = j.map((E) => E.id === _.id || E.id === n.id || E.parentId === _.id ? E : E.y >= N ? {
+									...E,
+									y: E.y + A
+								} : E);
+							}
+						}
+					}
+					return {
+						...E,
+						elements: j
+					};
+				}
+				if (P) return {
+					...E,
+					elements: j
+				};
+			}
+			return j[O] = {
+				...A,
 				..._
-			} : E)
-		}));
+			}, {
+				...E,
+				elements: j
+			};
+		});
 	}, []), G = React.useCallback((n, _) => {
 		M((E) => ({
 			...E,
@@ -8526,7 +8587,7 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 				...n
 			}
 		}));
-	}, []), GA = React.useMemo(() => ({
+	}, []), JA = React.useMemo(() => ({
 		state: j,
 		addElement: z,
 		removeElement: B,
@@ -8550,13 +8611,78 @@ const EditorProvider = ({ children: n, isList: E = !1, availableProps: O = [], t
 		P
 	]);
 	return /* @__PURE__ */ jsx(EditorContext.Provider, {
-		value: GA,
+		value: JA,
 		children: n
 	});
 }, useEditor = () => {
 	let n = useContext(EditorContext);
 	if (!n) throw Error("useEditor must be used within an EditorProvider");
 	return n;
+}, CanvasContextMenu = ({ children: n }) => {
+	let { state: _, updateListSettings: E } = useEditor();
+	return /* @__PURE__ */ jsxs(Root2$3, { children: [/* @__PURE__ */ jsx(Trigger$3, {
+		style: {
+			width: "100%",
+			height: "100%",
+			display: "block"
+		},
+		children: n
+	}), /* @__PURE__ */ jsxs(Content2$2, {
+		className: "ContextMenuContent",
+		children: [_.isList && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Sub2$1, { children: [/* @__PURE__ */ jsxs(SubTrigger2$1, {
+			className: "ContextMenuItem",
+			children: ["Animação de Entrada", /* @__PURE__ */ jsx("div", {
+				className: "RightSlot",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			})]
+		}), /* @__PURE__ */ jsxs(SubContent2$1, {
+			className: "ContextMenuContent",
+			sideOffset: 2,
+			alignOffset: -5,
+			children: [
+				/* @__PURE__ */ jsxs(CheckboxItem2$1, {
+					className: "ContextMenuItem",
+					checked: _.listSettings.entryAnimation === "slideIn" || !_.listSettings.entryAnimation,
+					onCheckedChange: () => E({ entryAnimation: "slideIn" }),
+					children: [/* @__PURE__ */ jsx(ItemIndicator2$1, {
+						className: "ContextMenuItemIndicator",
+						children: /* @__PURE__ */ jsx(CheckIcon, {})
+					}), "Deslizar (Slide In)"]
+				}),
+				/* @__PURE__ */ jsxs(CheckboxItem2$1, {
+					className: "ContextMenuItem",
+					checked: _.listSettings.entryAnimation === "fadeIn",
+					onCheckedChange: () => E({ entryAnimation: "fadeIn" }),
+					children: [/* @__PURE__ */ jsx(ItemIndicator2$1, {
+						className: "ContextMenuItemIndicator",
+						children: /* @__PURE__ */ jsx(CheckIcon, {})
+					}), "Aparecer (Fade In)"]
+				}),
+				/* @__PURE__ */ jsxs(CheckboxItem2$1, {
+					className: "ContextMenuItem",
+					checked: _.listSettings.entryAnimation === "scaleIn",
+					onCheckedChange: () => E({ entryAnimation: "scaleIn" }),
+					children: [/* @__PURE__ */ jsx(ItemIndicator2$1, {
+						className: "ContextMenuItemIndicator",
+						children: /* @__PURE__ */ jsx(CheckIcon, {})
+					}), "Zoom (Scale In)"]
+				}),
+				/* @__PURE__ */ jsxs(CheckboxItem2$1, {
+					className: "ContextMenuItem",
+					checked: _.listSettings.entryAnimation === "none",
+					onCheckedChange: () => E({ entryAnimation: "none" }),
+					children: [/* @__PURE__ */ jsx(ItemIndicator2$1, {
+						className: "ContextMenuItemIndicator",
+						children: /* @__PURE__ */ jsx(CheckIcon, {})
+					}), "Nenhuma"]
+				})
+			]
+		})] }), /* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })] }), /* @__PURE__ */ jsx(Item2$1, {
+			className: "ContextMenuItem",
+			disabled: !0,
+			children: "Configurações do Canvas..."
+		})]
+	})] });
 };
 var __assign$1 = function() {
 	return __assign$1 = Object.assign || function(n) {
@@ -8843,16 +8969,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, GA = U || 0;
-		return hasDirection("right", N) && (W = P.width + (n - P.x) * A / E, B && (G = (W - GA) / this.ratio + Z)), hasDirection("left", N) && (W = P.width - (n - P.x) * A / E, B && (G = (W - GA) / this.ratio + Z)), hasDirection("bottom", N) && (G = P.height + (_ - P.y) * j / E, B && (W = (G - Z) * this.ratio + GA)), hasDirection("top", N) && (G = P.height - (_ - P.y) * j / E, B && (W = (G - Z) * this.ratio + GA)), {
+		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, JA = U || 0;
+		return hasDirection("right", N) && (W = P.width + (n - P.x) * A / E, B && (G = (W - JA) / this.ratio + Z)), hasDirection("left", N) && (W = P.width - (n - P.x) * A / E, B && (G = (W - JA) / this.ratio + Z)), hasDirection("bottom", N) && (G = P.height + (_ - P.y) * j / E, B && (W = (G - Z) * this.ratio + JA)), hasDirection("top", N) && (G = P.height - (_ - P.y) * j / E, B && (W = (G - Z) * this.ratio + JA)), {
 			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, GA = (P - W) / this.ratio + U, KA = (z - W) / this.ratio + U, qA = Math.max(P, G), JA = Math.min(z, Z), YA = Math.max(B, GA), XA = Math.min(H, KA);
-			n = clamp$1(n, qA, JA), _ = clamp$1(_, YA, XA);
+			var G = (B - U) * this.ratio + W, Z = (H - U) * this.ratio + W, JA = (P - W) / this.ratio + U, YA = (z - W) / this.ratio + U, XA = Math.max(P, G), ZA = Math.min(z, Z), QA = Math.max(B, JA), $A = Math.min(H, YA);
+			n = clamp$1(n, XA, ZA), _ = clamp$1(_, QA, $A);
 		} else n = clamp$1(n, P, z), _ = clamp$1(_, B, H);
 		return {
 			newWidth: n,
@@ -8909,56 +9035,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 GA = this.calculateNewSizeFromDirection(N, P), KA = GA.newHeight, qA = GA.newWidth, JA = this.calculateNewMaxFromBoundary(O, A);
-			this.props.snap && this.props.snap.x && (qA = findClosestSnap(qA, this.props.snap.x, this.props.snapGap)), this.props.snap && this.props.snap.y && (KA = findClosestSnap(KA, this.props.snap.y, this.props.snapGap));
-			var YA = this.calculateNewSizeFromAspectRatio(qA, KA, {
-				width: JA.maxWidth,
-				height: JA.maxHeight
+			var JA = this.calculateNewSizeFromDirection(N, P), YA = JA.newHeight, XA = JA.newWidth, ZA = this.calculateNewMaxFromBoundary(O, A);
+			this.props.snap && this.props.snap.x && (XA = findClosestSnap(XA, this.props.snap.x, this.props.snapGap)), this.props.snap && this.props.snap.y && (YA = findClosestSnap(YA, this.props.snap.y, this.props.snapGap));
+			var QA = this.calculateNewSizeFromAspectRatio(XA, YA, {
+				width: ZA.maxWidth,
+				height: ZA.maxHeight
 			}, {
 				width: j,
 				height: M
 			});
-			if (qA = YA.newWidth, KA = YA.newHeight, this.props.grid) {
-				var ZA = snap(qA, this.props.grid[0], this.props.gridGap ? this.props.gridGap[0] : 0), QA = snap(KA, this.props.grid[1], this.props.gridGap ? this.props.gridGap[1] : 0), $A = this.props.snapGap || 0, ej = $A === 0 || Math.abs(ZA - qA) <= $A ? ZA : qA, tj = $A === 0 || Math.abs(QA - KA) <= $A ? QA : KA;
-				qA = ej, KA = tj;
+			if (XA = QA.newWidth, YA = QA.newHeight, this.props.grid) {
+				var ej = snap(XA, this.props.grid[0], this.props.gridGap ? this.props.gridGap[0] : 0), tj = snap(YA, this.props.grid[1], this.props.gridGap ? this.props.gridGap[1] : 0), nj = this.props.snapGap || 0, rj = nj === 0 || Math.abs(ej - XA) <= nj ? ej : XA, ij = nj === 0 || Math.abs(tj - YA) <= nj ? tj : YA;
+				XA = rj, YA = ij;
 			}
-			var nj = {
-				width: qA - H.width,
-				height: KA - H.height
+			var aj = {
+				width: XA - H.width,
+				height: YA - H.height
 			};
-			if (this.delta = nj, U && typeof U == "string") {
+			if (this.delta = aj, U && typeof U == "string") {
 				if (U.endsWith("%")) {
-					var rj = qA / G.width * 100;
-					qA = `${rj}%`;
+					var oj = XA / G.width * 100;
+					XA = `${oj}%`;
 				} else if (U.endsWith("vw")) {
-					var ij = qA / this.window.innerWidth * 100;
-					qA = `${ij}vw`;
+					var sj = XA / this.window.innerWidth * 100;
+					XA = `${sj}vw`;
 				} else if (U.endsWith("vh")) {
-					var aj = qA / this.window.innerHeight * 100;
-					qA = `${aj}vh`;
+					var cj = XA / this.window.innerHeight * 100;
+					XA = `${cj}vh`;
 				}
 			}
 			if (W && typeof W == "string") {
 				if (W.endsWith("%")) {
-					var rj = KA / G.height * 100;
-					KA = `${rj}%`;
+					var oj = YA / G.height * 100;
+					YA = `${oj}%`;
 				} else if (W.endsWith("vw")) {
-					var ij = KA / this.window.innerWidth * 100;
-					KA = `${ij}vw`;
+					var sj = YA / this.window.innerWidth * 100;
+					YA = `${sj}vw`;
 				} else if (W.endsWith("vh")) {
-					var aj = KA / this.window.innerHeight * 100;
-					KA = `${aj}vh`;
+					var cj = YA / this.window.innerHeight * 100;
+					YA = `${cj}vh`;
 				}
 			}
-			var oj = {
-				width: this.createSizeForCssProperty(qA, "width"),
-				height: this.createSizeForCssProperty(KA, "height")
+			var lj = {
+				width: this.createSizeForCssProperty(XA, "width"),
+				height: this.createSizeForCssProperty(YA, "height")
 			};
-			this.flexDir === "row" ? oj.flexBasis = oj.width : this.flexDir === "column" && (oj.flexBasis = oj.height);
-			var sj = this.state.width !== oj.width, cj = this.state.height !== oj.height, lj = this.state.flexBasis !== oj.flexBasis, uj = sj || cj || lj;
-			uj && flushSync(function() {
-				_.setState(oj);
-			}), this.props.onResize && uj && this.props.onResize(n, B, this.resizable, nj);
+			this.flexDir === "row" ? lj.flexBasis = lj.width : this.flexDir === "column" && (lj.flexBasis = lj.height);
+			var uj = this.state.width !== lj.width, dj = this.state.height !== lj.height, fj = this.state.flexBasis !== lj.flexBasis, pj = uj || dj || fj;
+			pj && flushSync(function() {
+				_.setState(lj);
+			}), this.props.onResize && pj && this.props.onResize(n, B, this.resizable, aj);
 		}
 	}, _.prototype.onMouseUp = function(n) {
 		var _ = this.state, E = _.isResizing, O = _.direction;
@@ -9042,6 +9168,38 @@ var __assign$1 = function() {
 		snapGap: 0
 	}, _;
 }(PureComponent);
+const formatValue = (n, _) => {
+	if (n == null) return "";
+	if (_.type === "boolean") return String(n) === "true" || n === !0 || typeof n == "number" && n > 0 ? _.trueLabel || "Sim" : _.falseLabel || "Não";
+	if (_.type === "date") try {
+		let E = new Date(n);
+		if (isNaN(E.getTime())) return String(n);
+		if (_.dateFormat) {
+			let n = E.getDate().toString().padStart(2, "0"), O = (E.getMonth() + 1).toString().padStart(2, "0"), A = E.getFullYear(), j = E.getHours().toString().padStart(2, "0"), M = E.getMinutes().toString().padStart(2, "0"), N = E.getSeconds().toString().padStart(2, "0");
+			return _.dateFormat.replace("DD", n).replace("MM", O).replace("YYYY", String(A)).replace("HH", j).replace("mm", M).replace("ss", N);
+		}
+		return E.toLocaleDateString();
+	} catch {
+		return String(n);
+	}
+	if (_.type === "number") {
+		let E = parseFloat(String(n));
+		return isNaN(E) ? String(n) : _.numberFormat === "currency" ? (_.currencySymbol || "R$") + " " + E.toFixed(_.decimalPlaces || 2) : _.numberFormat === "percent" ? E.toFixed(_.decimalPlaces || 0) + "%" : E.toFixed(_.decimalPlaces || 0);
+	}
+	return String(n);
+}, checkCondition = (n, _, E) => {
+	let O = String(n).toLowerCase(), A = String(E).toLowerCase();
+	switch (_) {
+		case "equals": return O === A;
+		case "notEquals": return O !== A;
+		case "contains": return O.includes(A);
+		case "greaterThan": return parseFloat(O) > parseFloat(A);
+		case "lessThan": return parseFloat(O) < parseFloat(A);
+		case "truthy": return !!n;
+		case "falsy": return !n;
+		default: return !1;
+	}
+};
 function u() {
 	return (u = Object.assign || function(n) {
 		for (var _ = 1; _ < arguments.length; _++) {
@@ -9378,7 +9536,7 @@ var R$1, V = typeof window < "u" ? useLayoutEffect : useEffect, $ = function() {
 };
 const ColorPickerContent = ({ color: n, onChange: _ }) => {
 	let E = n === "transparent" ? "#00000000" : n || "#000000";
-	return /* @__PURE__ */ jsxs(p, {
+	return /* @__PURE__ */ jsxs(p$1, {
 		direction: "column",
 		gap: "3",
 		style: { width: "100%" },
@@ -9386,10 +9544,10 @@ const ColorPickerContent = ({ color: n, onChange: _ }) => {
 			color: E,
 			onChange: _,
 			style: { width: "100%" }
-		}), /* @__PURE__ */ jsxs(p, {
+		}), /* @__PURE__ */ jsxs(p$1, {
 			gap: "2",
 			align: "center",
-			children: [/* @__PURE__ */ jsx(p$1, { style: {
+			children: [/* @__PURE__ */ jsx(p, { style: {
 				width: 32,
 				height: 32,
 				backgroundColor: E,
@@ -9413,7 +9571,7 @@ const ColorPickerContent = ({ color: n, onChange: _ }) => {
 		padding: "0 8px",
 		height: 32
 	},
-	children: [/* @__PURE__ */ jsx(p$1, { style: {
+	children: [/* @__PURE__ */ jsx(p, { style: {
 		width: 18,
 		height: 18,
 		backgroundColor: n || "transparent",
@@ -9457,7 +9615,7 @@ const ColorPickerContent = ({ color: n, onChange: _ }) => {
 					}), /* @__PURE__ */ jsx(P$1, {
 						value: "conditional",
 						children: "Formatação Condicional"
-					})] }), /* @__PURE__ */ jsxs(p$1, {
+					})] }), /* @__PURE__ */ jsxs(p, {
 						pt: "3",
 						children: [/* @__PURE__ */ jsx(f$2, {
 							value: "formatting",
@@ -9475,7 +9633,7 @@ const ColorPickerContent = ({ color: n, onChange: _ }) => {
 						})]
 					})]
 				}),
-				/* @__PURE__ */ jsx(p, {
+				/* @__PURE__ */ jsx(p$1, {
 					justify: "end",
 					mt: "4",
 					children: /* @__PURE__ */ jsx(D$2, { children: /* @__PURE__ */ jsx(o, {
@@ -9495,7 +9653,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 			...O
 		} });
 	};
-	return /* @__PURE__ */ jsxs(p, {
+	return /* @__PURE__ */ jsxs(p$1, {
 		direction: "column",
 		gap: "3",
 		children: [
@@ -9504,7 +9662,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 				color: "gray",
 				children: "Configure como os dados serão exibidos quando substituídos."
 			}),
-			n.type === "text" && /* @__PURE__ */ jsxs(p$1, { children: [/* @__PURE__ */ jsxs(p, {
+			n.type === "text" && /* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsxs(p$1, {
 				align: "center",
 				gap: "2",
 				mb: "3",
@@ -9519,7 +9677,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 				size: "4",
 				mb: "3"
 			})] }),
-			/* @__PURE__ */ jsxs(p$1, { children: [/* @__PURE__ */ jsx(p$2, {
+			/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 				size: "1",
 				mb: "1",
 				as: "div",
@@ -9558,7 +9716,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 			E.type === "boolean" && /* @__PURE__ */ jsxs(o$2, {
 				columns: "2",
 				gap: "3",
-				children: [/* @__PURE__ */ jsxs(p$1, { children: [/* @__PURE__ */ jsx(p$2, {
+				children: [/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 					size: "1",
 					mb: "1",
 					as: "div",
@@ -9567,7 +9725,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 					placeholder: "Ex: Sim",
 					value: E.trueLabel || "",
 					onChange: (n) => O({ trueLabel: n.target.value })
-				})] }), /* @__PURE__ */ jsxs(p$1, { children: [/* @__PURE__ */ jsx(p$2, {
+				})] }), /* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 					size: "1",
 					mb: "1",
 					as: "div",
@@ -9578,7 +9736,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 					onChange: (n) => O({ falseLabel: n.target.value })
 				})] })]
 			}),
-			E.type === "date" && /* @__PURE__ */ jsxs(p$1, { children: [
+			E.type === "date" && /* @__PURE__ */ jsxs(p, { children: [
 				/* @__PURE__ */ jsx(p$2, {
 					size: "1",
 					mb: "1",
@@ -9597,11 +9755,11 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 					children: "Use DD, MM, YYYY, HH, mm, ss."
 				})
 			] }),
-			E.type === "number" && /* @__PURE__ */ jsxs(p, {
+			E.type === "number" && /* @__PURE__ */ jsxs(p$1, {
 				direction: "column",
 				gap: "3",
 				children: [
-					/* @__PURE__ */ jsxs(p$1, { children: [/* @__PURE__ */ jsx(p$2, {
+					/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 						size: "1",
 						mb: "1",
 						as: "div",
@@ -9633,7 +9791,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 							})
 						]
 					})] }),
-					E.numberFormat === "currency" && /* @__PURE__ */ jsxs(p$1, { children: [/* @__PURE__ */ jsx(p$2, {
+					E.numberFormat === "currency" && /* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 						size: "1",
 						mb: "1",
 						as: "div",
@@ -9643,7 +9801,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 						value: E.currencySymbol || "",
 						onChange: (n) => O({ currencySymbol: n.target.value })
 					})] }),
-					/* @__PURE__ */ jsxs(p$1, { children: [/* @__PURE__ */ jsx(p$2, {
+					/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 						size: "1",
 						mb: "1",
 						as: "div",
@@ -9682,13 +9840,13 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 			..._
 		} });
 	}, B = O.find((n) => n.id === A);
-	return /* @__PURE__ */ jsx(p, {
+	return /* @__PURE__ */ jsx(p$1, {
 		direction: "column",
 		gap: "3",
-		children: A ? /* @__PURE__ */ jsxs(p, {
+		children: A ? /* @__PURE__ */ jsxs(p$1, {
 			direction: "column",
 			gap: "3",
-			children: [/* @__PURE__ */ jsxs(p, {
+			children: [/* @__PURE__ */ jsxs(p$1, {
 				justify: "between",
 				align: "center",
 				children: [/* @__PURE__ */ jsx(p$2, {
@@ -9700,7 +9858,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 					children: "Voltar"
 				})]
 			}), B && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				/* @__PURE__ */ jsxs(p$1, { children: [
+				/* @__PURE__ */ jsxs(p, { children: [
 					/* @__PURE__ */ jsx(p$2, {
 						size: "1",
 						mb: "1",
@@ -9733,9 +9891,9 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 						onChange: (n) => P(B.id, { property: n.target.value })
 					})
 				] }),
-				/* @__PURE__ */ jsxs(p, {
+				/* @__PURE__ */ jsxs(p$1, {
 					gap: "2",
-					children: [/* @__PURE__ */ jsxs(p$1, {
+					children: [/* @__PURE__ */ jsxs(p, {
 						flexGrow: "1",
 						children: [/* @__PURE__ */ jsx(p$2, {
 							size: "1",
@@ -9791,7 +9949,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 						"contains",
 						"greaterThan",
 						"lessThan"
-					].includes(B.operator) && /* @__PURE__ */ jsxs(p$1, {
+					].includes(B.operator) && /* @__PURE__ */ jsxs(p, {
 						flexGrow: "1",
 						children: [/* @__PURE__ */ jsx(p$2, {
 							size: "1",
@@ -9804,9 +9962,9 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 						})]
 					})]
 				}),
-				/* @__PURE__ */ jsx(p, {
+				/* @__PURE__ */ jsx(p$1, {
 					gap: "2",
-					children: /* @__PURE__ */ jsxs(p$1, {
+					children: /* @__PURE__ */ jsxs(p, {
 						flexGrow: "1",
 						children: [/* @__PURE__ */ jsx(p$2, {
 							size: "1",
@@ -9850,7 +10008,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 					/* @__PURE__ */ jsxs(o$2, {
 						columns: "2",
 						gap: "3",
-						children: [/* @__PURE__ */ jsxs(p$1, { children: [/* @__PURE__ */ jsx(p$2, {
+						children: [/* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 							size: "1",
 							mb: "1",
 							as: "div",
@@ -9858,14 +10016,14 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 						}), /* @__PURE__ */ jsx(ColorInput, {
 							color: B.style.color || "#000000",
 							onChange: (n) => z(B.id, { color: n })
-						})] }), /* @__PURE__ */ jsxs(p$1, { children: [/* @__PURE__ */ jsx(p$2, {
+						})] }), /* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
 							size: "1",
 							mb: "1",
 							as: "div",
 							children: "Cor de Fundo"
-						}), /* @__PURE__ */ jsxs(p, {
+						}), /* @__PURE__ */ jsxs(p$1, {
 							gap: "2",
-							children: [/* @__PURE__ */ jsx(p$1, {
+							children: [/* @__PURE__ */ jsx(p, {
 								flexGrow: "1",
 								children: /* @__PURE__ */ jsx(ColorInput, {
 									color: B.style.backgroundColor || "#ffffff",
@@ -9879,7 +10037,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 							})]
 						})] })]
 					}),
-					/* @__PURE__ */ jsxs(p, {
+					/* @__PURE__ */ jsxs(p$1, {
 						gap: "3",
 						mt: "2",
 						children: [
@@ -9908,14 +10066,14 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 				color: "gray",
 				children: "Adicione regras para alterar o estilo baseada no valor dos dados."
 			}),
-			/* @__PURE__ */ jsxs(p$1, {
+			/* @__PURE__ */ jsxs(p, {
 				style: {
 					maxHeight: 200,
 					overflowY: "auto",
 					border: "1px solid var(--gray-5)",
 					borderRadius: 4
 				},
-				children: [O.length === 0 && /* @__PURE__ */ jsx(p, {
+				children: [O.length === 0 && /* @__PURE__ */ jsx(p$1, {
 					align: "center",
 					justify: "center",
 					p: "4",
@@ -9923,12 +10081,12 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 						color: "gray",
 						children: "Nenhuma regra definida."
 					})
-				}), O.map((n) => /* @__PURE__ */ jsxs(p, {
+				}), O.map((n) => /* @__PURE__ */ jsxs(p$1, {
 					align: "center",
 					justify: "between",
 					p: "2",
 					style: { borderBottom: "1px solid var(--gray-4)" },
-					children: [/* @__PURE__ */ jsxs(p$1, {
+					children: [/* @__PURE__ */ jsxs(p, {
 						onClick: () => j(n.id),
 						style: {
 							cursor: "pointer",
@@ -9945,7 +10103,7 @@ var FormattingSettings = ({ element: n, updateElement: _ }) => {
 								" ",
 								n.value
 							]
-						}), /* @__PURE__ */ jsxs(p, {
+						}), /* @__PURE__ */ jsxs(p$1, {
 							gap: "2",
 							mt: "1",
 							children: [n.style.color && /* @__PURE__ */ jsx("div", { style: {
@@ -9980,28 +10138,28 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		open: !1,
 		prop: "",
 		value: ""
-	}), [Z, GA] = useState(_.content), [JA, YA] = useState(_.dataBinding || ""), XA = useRef(null), ej = useRef(null), tj = (n) => {
-		let _ = XA.current;
+	}), [Z, JA] = useState(_.content), [ZA, QA] = useState(_.dataBinding || ""), $A = useRef(null), rj = useRef(null), ij = (n) => {
+		let _ = $A.current;
 		if (_) {
 			let E = _.selectionStart, O = _.selectionEnd, A = Z;
-			GA(A.substring(0, E) + `{{${n}}}` + A.substring(O)), setTimeout(() => {
+			JA(A.substring(0, E) + `{{${n}}}` + A.substring(O)), setTimeout(() => {
 				_.focus();
 				let O = E + n.length + 4;
 				_.setSelectionRange(O, O);
 			}, 0);
-		} else GA((_) => _ + `{{${n}}}`);
-	}, nj = (n) => {
+		} else JA((_) => _ + `{{${n}}}`);
+	}, aj = (n) => {
 		E(_.id, { style: {
 			..._.style,
 			...n
 		} });
-	}, rj = () => {
+	}, oj = () => {
 		let n = M.elements.findIndex((n) => n.id === _.id);
 		n < M.elements.length - 1 && j(n, M.elements.length - 1);
-	}, ij = () => {
+	}, sj = () => {
 		let n = M.elements.findIndex((n) => n.id === _.id);
 		n > 0 && j(n, 0);
-	}, aj = () => {
+	}, cj = () => {
 		A({
 			type: _.type,
 			content: _.content,
@@ -10011,7 +10169,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			height: _.height,
 			style: _.style
 		});
-	}, oj = [
+	}, lj = [
 		"#000000",
 		"#FFFFFF",
 		"#FF0000",
@@ -10021,7 +10179,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		"#808080",
 		"#800080",
 		"transparent"
-	], sj = (n, _) => {
+	], uj = (n, _) => {
 		G({
 			open: !0,
 			prop: n,
@@ -10034,37 +10192,37 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			onOpenChange: P,
 			children: /* @__PURE__ */ jsxs(p$8, {
 				style: { maxWidth: 450 },
-				children: [/* @__PURE__ */ jsx(g$2, { children: "Editar Texto" }), /* @__PURE__ */ jsxs(p, {
+				children: [/* @__PURE__ */ jsx(g$2, { children: "Editar Texto" }), /* @__PURE__ */ jsxs(p$1, {
 					direction: "column",
 					gap: "3",
 					children: [
 						/* @__PURE__ */ jsx(r, {
-							ref: XA,
+							ref: $A,
 							value: Z,
-							onChange: (n) => GA(n.target.value),
+							onChange: (n) => JA(n.target.value),
 							placeholder: "Digite o novo texto...",
 							style: { height: 100 }
 						}),
-						M.availableProps && M.availableProps.length > 0 && /* @__PURE__ */ jsxs(p, {
+						M.availableProps && M.availableProps.length > 0 && /* @__PURE__ */ jsxs(p$1, {
 							direction: "column",
 							gap: "2",
 							children: [/* @__PURE__ */ jsx(p$2, {
 								size: "1",
 								color: "gray",
 								children: "Inserir variável:"
-							}), /* @__PURE__ */ jsx(p, {
+							}), /* @__PURE__ */ jsx(p$1, {
 								gap: "2",
 								wrap: "wrap",
 								children: M.availableProps.map((n) => /* @__PURE__ */ jsx(e, {
 									color: "blue",
 									variant: "surface",
 									style: { cursor: "pointer" },
-									onClick: () => tj(n.dataName),
+									onClick: () => ij(n.dataName),
 									children: n.name
 								}, n.dataName))
 							})]
 						}),
-						/* @__PURE__ */ jsxs(p, {
+						/* @__PURE__ */ jsxs(p$1, {
 							gap: "3",
 							justify: "end",
 							children: [/* @__PURE__ */ jsx(D$2, { children: /* @__PURE__ */ jsx(o, {
@@ -10087,7 +10245,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			onOpenChange: B,
 			children: /* @__PURE__ */ jsxs(p$8, {
 				style: { maxWidth: 450 },
-				children: [/* @__PURE__ */ jsx(g$2, { children: "Vincular Dados Manualmente" }), /* @__PURE__ */ jsxs(p, {
+				children: [/* @__PURE__ */ jsx(g$2, { children: "Vincular Dados Manualmente" }), /* @__PURE__ */ jsxs(p$1, {
 					direction: "column",
 					gap: "3",
 					children: [
@@ -10096,11 +10254,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							children: "Nome da propriedade (ex: titulo, preco, imagem):"
 						}),
 						/* @__PURE__ */ jsx(u$1, {
-							value: JA,
-							onChange: (n) => YA(n.target.value),
+							value: ZA,
+							onChange: (n) => QA(n.target.value),
 							placeholder: "propriedade"
 						}),
-						/* @__PURE__ */ jsxs(p, {
+						/* @__PURE__ */ jsxs(p$1, {
 							gap: "3",
 							justify: "end",
 							children: [/* @__PURE__ */ jsx(D$2, { children: /* @__PURE__ */ jsx(o, {
@@ -10109,7 +10267,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								children: "Cancelar"
 							}) }), /* @__PURE__ */ jsx(o, {
 								onClick: () => {
-									let n = JA, O = { dataBinding: n };
+									let n = ZA, O = { dataBinding: n };
 									_.type === "text" && (O.content = `{{${n}}}`), E(_.id, O), B(!1);
 								},
 								children: "Vincular"
@@ -10136,7 +10294,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							value: n
 						}))
 					}),
-					/* @__PURE__ */ jsxs(p, {
+					/* @__PURE__ */ jsxs(p$1, {
 						gap: "3",
 						justify: "end",
 						mt: "4",
@@ -10146,7 +10304,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							children: "Cancelar"
 						}) }), /* @__PURE__ */ jsx(o, {
 							onClick: () => {
-								nj({ [W.prop]: W.value }), G((n) => ({
+								aj({ [W.prop]: W.value }), G((n) => ({
 									...n,
 									open: !1
 								}));
@@ -10164,7 +10322,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		}),
 		/* @__PURE__ */ jsx("input", {
 			type: "file",
-			ref: ej,
+			ref: rj,
 			style: { display: "none" },
 			accept: "image/*",
 			onChange: (n) => {
@@ -10230,7 +10388,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
 							onSelect: () => {
-								YA(_.dataBinding || ""), B(!0);
+								QA(_.dataBinding || ""), B(!0);
 							},
 							children: "Outro / Manual..."
 						}),
@@ -10243,22 +10401,62 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					]
 				}) })] }),
 				/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
-				_.type === "text" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Item2$1, {
-					className: "ContextMenuItem",
-					onSelect: () => {
-						GA(_.content), P(!0);
-					},
-					children: "Editar Texto..."
-				}), /* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })] }),
+				_.type === "text" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(Item2$1, {
+						className: "ContextMenuItem",
+						onSelect: () => {
+							JA(_.content), P(!0);
+						},
+						children: "Editar Texto..."
+					}),
+					/* @__PURE__ */ jsxs(CheckboxItem2$1, {
+						className: "ContextMenuItem",
+						checked: _.autoGrow || !1,
+						onCheckedChange: (n) => E(_.id, { autoGrow: !!n }),
+						children: [/* @__PURE__ */ jsx(ItemIndicator2$1, {
+							className: "ContextMenuItemIndicator",
+							children: /* @__PURE__ */ jsx(CheckIcon, {})
+						}), "Expandir Automaticamente"]
+					}),
+					/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })
+				] }),
 				/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
 					onSelect: () => U(!0),
 					children: "Configurações Avançadas..."
 				}),
 				/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
+				(_.type === "box" || _.type === "image") && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(Item2$1, {
+						className: "ContextMenuItem",
+						onSelect: () => {
+							A({
+								type: "text",
+								content: "Texto Ancorado",
+								x: _.x + 10,
+								y: _.y + 10,
+								width: 150,
+								height: 30,
+								parentId: _.id,
+								autoGrow: !0
+							}), E(_.id, { autoGrowContainer: !0 });
+						},
+						children: "Adicionar Texto Ancorado"
+					}),
+					/* @__PURE__ */ jsxs(CheckboxItem2$1, {
+						className: "ContextMenuItem",
+						checked: _.autoGrowContainer || !1,
+						onCheckedChange: (n) => E(_.id, { autoGrowContainer: !!n }),
+						children: [/* @__PURE__ */ jsx(ItemIndicator2$1, {
+							className: "ContextMenuItemIndicator",
+							children: /* @__PURE__ */ jsx(CheckIcon, {})
+						}), "Container Expansível"]
+					}),
+					/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" })
+				] }),
 				/* @__PURE__ */ jsx(Item2$1, {
 					className: "ContextMenuItem",
-					onSelect: aj,
+					onSelect: cj,
 					children: "Duplicar"
 				}),
 				/* @__PURE__ */ jsx(Item2$1, {
@@ -10280,7 +10478,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						alignOffset: -5,
 						children: [/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => ej.current?.click(),
+							onSelect: () => rj.current?.click(),
 							children: "Carregar do Computador"
 						}), /* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
@@ -10306,17 +10504,17 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: [
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => nj({ objectFit: "cover" }),
+								onSelect: () => aj({ objectFit: "cover" }),
 								children: "Preencher (Cover)"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => nj({ objectFit: "contain" }),
+								onSelect: () => aj({ objectFit: "contain" }),
 								children: "Ajustar (Contain)"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => nj({ objectFit: "fill" }),
+								onSelect: () => aj({ objectFit: "fill" }),
 								children: "Esticar (Fill)"
 							})
 						]
@@ -10335,11 +10533,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					alignOffset: -5,
 					children: [/* @__PURE__ */ jsx(Item2$1, {
 						className: "ContextMenuItem",
-						onSelect: rj,
+						onSelect: oj,
 						children: "Trazer para frente"
 					}), /* @__PURE__ */ jsx(Item2$1, {
 						className: "ContextMenuItem",
-						onSelect: ij,
+						onSelect: sj,
 						children: "Enviar para trás"
 					})]
 				}) })] }),
@@ -10357,7 +10555,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						alignOffset: -5,
 						children: M.availableFonts && M.availableFonts.map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => nj({ fontFamily: n }),
+							onSelect: () => aj({ fontFamily: n }),
 							style: { fontFamily: n },
 							children: [n, _.style?.fontFamily === n && /* @__PURE__ */ jsx("div", {
 								className: "RightSlot",
@@ -10386,7 +10584,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							64
 						].map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => nj({ fontSize: `${n}px` }),
+							onSelect: () => aj({ fontSize: `${n}px` }),
 							children: [n, "px"]
 						}, n))
 					}) })] }),
@@ -10401,9 +10599,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						sideOffset: 2,
 						alignOffset: -5,
 						children: [
-							oj.filter((n) => n !== "transparent").map((n) => /* @__PURE__ */ jsxs(Item2$1, {
+							lj.filter((n) => n !== "transparent").map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => nj({ color: n }),
+								onSelect: () => aj({ color: n }),
 								children: [/* @__PURE__ */ jsx("div", { style: {
 									width: 12,
 									height: 12,
@@ -10415,7 +10613,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => sj("color", _.style?.color || "#000000"),
+								onSelect: () => uj("color", _.style?.color || "#000000"),
 								children: "Outra Cor..."
 							})
 						]
@@ -10432,11 +10630,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						alignOffset: -5,
 						children: [/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => nj({ fontWeight: "normal" }),
+							onSelect: () => aj({ fontWeight: "normal" }),
 							children: "Normal"
 						}), /* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => nj({ fontWeight: "bold" }),
+							onSelect: () => aj({ fontWeight: "bold" }),
 							children: "Negrito"
 						})]
 					}) })] }),
@@ -10453,17 +10651,17 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: [
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => nj({ textAlign: "left" }),
+								onSelect: () => aj({ textAlign: "left" }),
 								children: "Esquerda"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => nj({ textAlign: "center" }),
+								onSelect: () => aj({ textAlign: "center" }),
 								children: "Centro"
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => nj({ textAlign: "right" }),
+								onSelect: () => aj({ textAlign: "right" }),
 								children: "Direita"
 							})
 						]
@@ -10481,7 +10679,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						children: [
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => nj({
+								onSelect: () => aj({
 									display: "flex",
 									flexDirection: "column",
 									justifyContent: "flex-start"
@@ -10490,7 +10688,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => nj({
+								onSelect: () => aj({
 									display: "flex",
 									flexDirection: "column",
 									justifyContent: "center"
@@ -10499,7 +10697,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 							}),
 							/* @__PURE__ */ jsx(Item2$1, {
 								className: "ContextMenuItem",
-								onSelect: () => nj({
+								onSelect: () => aj({
 									display: "flex",
 									flexDirection: "column",
 									justifyContent: "flex-end"
@@ -10520,9 +10718,9 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					sideOffset: 2,
 					alignOffset: -5,
 					children: [
-						oj.map((n) => /* @__PURE__ */ jsxs(Item2$1, {
+						lj.map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => nj({ backgroundColor: n }),
+							onSelect: () => aj({ backgroundColor: n }),
 							children: [/* @__PURE__ */ jsx("div", { style: {
 								width: 12,
 								height: 12,
@@ -10534,7 +10732,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						/* @__PURE__ */ jsx(Separator2$1, { className: "ContextMenuSeparator" }),
 						/* @__PURE__ */ jsx(Item2$1, {
 							className: "ContextMenuItem",
-							onSelect: () => sj("backgroundColor", _.style?.backgroundColor || "transparent"),
+							onSelect: () => uj("backgroundColor", _.style?.backgroundColor || "transparent"),
 							children: "Outra Cor..."
 						})
 					]
@@ -10559,7 +10757,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						"50%"
 					].map((n) => /* @__PURE__ */ jsx(Item2$1, {
 						className: "ContextMenuItem",
-						onSelect: () => nj({ borderRadius: typeof n == "number" ? `${n}px` : n }),
+						onSelect: () => aj({ borderRadius: typeof n == "number" ? `${n}px` : n }),
 						children: n === "50%" ? "Círculo" : `${n}px`
 					}, n))
 				}) })] }),
@@ -10583,44 +10781,13 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						32
 					].map((n) => /* @__PURE__ */ jsxs(Item2$1, {
 						className: "ContextMenuItem",
-						onSelect: () => nj({ padding: `${n}px` }),
+						onSelect: () => aj({ padding: `${n}px` }),
 						children: [n, "px"]
 					}, n))
 				}) })] })
 			]
 		}) })] })
 	] });
-}, formatValue = (n, _) => {
-	if (n == null) return "";
-	if (_.type === "boolean") return String(n) === "true" || n === !0 || typeof n == "number" && n > 0 ? _.trueLabel || "Sim" : _.falseLabel || "Não";
-	if (_.type === "date") try {
-		let E = new Date(n);
-		if (isNaN(E.getTime())) return String(n);
-		if (_.dateFormat) {
-			let n = E.getDate().toString().padStart(2, "0"), O = (E.getMonth() + 1).toString().padStart(2, "0"), A = E.getFullYear(), j = E.getHours().toString().padStart(2, "0"), M = E.getMinutes().toString().padStart(2, "0"), N = E.getSeconds().toString().padStart(2, "0");
-			return _.dateFormat.replace("DD", n).replace("MM", O).replace("YYYY", String(A)).replace("HH", j).replace("mm", M).replace("ss", N);
-		}
-		return E.toLocaleDateString();
-	} catch {
-		return String(n);
-	}
-	if (_.type === "number") {
-		let E = parseFloat(n);
-		return isNaN(E) ? String(n) : _.numberFormat === "currency" ? (_.currencySymbol || "R$") + " " + E.toFixed(_.decimalPlaces || 2) : _.numberFormat === "percent" ? E.toFixed(_.decimalPlaces || 0) + "%" : E.toFixed(_.decimalPlaces || 0);
-	}
-	return String(n);
-}, checkCondition = (n, _, E) => {
-	let O = String(n).toLowerCase(), A = String(E).toLowerCase();
-	switch (_) {
-		case "equals": return O === A;
-		case "notEquals": return O !== A;
-		case "contains": return O.includes(A);
-		case "greaterThan": return parseFloat(O) > parseFloat(A);
-		case "lessThan": return parseFloat(O) < parseFloat(A);
-		case "truthy": return !!n;
-		case "falsy": return !n;
-		default: return !1;
-	}
 }, DraggableElement = React.memo(({ element: n, isSelected: _ }) => {
 	let { selectElement: E, updateElement: O, state: A } = useEditor(), [j, M] = useState(!1), [N, P] = useState(!1), [z, B] = useState({
 		x: n.x,
@@ -10628,94 +10795,101 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 	}), [U, W] = useState(n.rotation || 0), [G, Z] = useState({
 		width: n.width,
 		height: n.height
+	}), [JA, ZA] = useState({
+		x: n.x,
+		y: n.y,
+		rotation: n.rotation,
+		width: n.width,
+		height: n.height
 	});
-	useEffect(() => {
-		j || B({
-			x: n.x,
-			y: n.y
-		});
-	}, [
-		n.x,
-		n.y,
-		j
-	]), useEffect(() => {
-		N || W(n.rotation || 0);
-	}, [n.rotation, N]), useEffect(() => {
-		Z({
-			width: n.width,
-			height: n.height
-		});
-	}, [n.width, n.height]);
-	let GA = useRef({
+	!j && (n.x !== JA.x || n.y !== JA.y) && (ZA((_) => ({
+		..._,
+		x: n.x,
+		y: n.y
+	})), B({
+		x: n.x,
+		y: n.y
+	})), !N && n.rotation !== JA.rotation && (ZA((_) => ({
+		..._,
+		rotation: n.rotation
+	})), W(n.rotation || 0)), (n.width !== JA.width || n.height !== JA.height) && (ZA((_) => ({
+		..._,
+		width: n.width,
+		height: n.height
+	})), Z({
+		width: n.width,
+		height: n.height
+	}));
+	let QA = useRef({
 		x: 0,
 		y: 0
-	}), JA = useRef({
+	}), $A = useRef({
 		x: 0,
 		y: 0
-	}), YA = useRef(0), XA = useRef(0), ZA = useRef({
+	}), ej = useRef(0), rj = useRef(0), ij = useRef({
 		x: 0,
 		y: 0
-	}), ej = A.canvasHeight || 150, tj = A.isList ? A.mockData.length > 0 ? A.mockData[0] : null : A.singleMockData, nj = n.content, rj = {};
-	if (tj) {
-		if (n.type === "text") nj = nj.replace(/\{\{(.*?)\}\}/g, (_, E) => {
-			let O = tj[E.trim()];
+	}), aj = useRef(null), oj = A.canvasHeight || 150, sj = A.isList ? A.mockData.length > 0 ? A.mockData[0] : null : A.singleMockData, cj = n.content, lj = {};
+	if (sj) {
+		if (n.type === "text") cj = cj.replace(/\{\{(.*?)\}\}/g, (_, E) => {
+			let O = sj[E.trim()];
 			return O == null ? _ : n.formatting ? formatValue(O, n.formatting) : String(O);
 		});
 		else if (n.type === "image") if (n.dataBinding) {
-			let _ = tj[n.dataBinding];
-			_ != null && (nj = String(_));
-		} else nj = nj.replace(/\{\{(.*?)\}\}/g, (n, _) => {
-			let E = tj[_.trim()];
+			let _ = sj[n.dataBinding];
+			_ != null && (cj = String(_));
+		} else cj = cj.replace(/\{\{(.*?)\}\}/g, (n, _) => {
+			let E = sj[_.trim()];
 			return E == null ? n : String(E);
 		});
 		n.conditions && n.conditions.forEach((n) => {
-			let _ = tj[n.property];
-			checkCondition(_, n.operator, n.value) && (rj = {
-				...rj,
+			let _ = sj[n.property];
+			checkCondition(_, n.operator, n.value) && (lj = {
+				...lj,
 				...n.style
 			});
 		});
 	}
-	let ij = rj.display === "none";
-	if (ij && _) {
-		let { display: n, ..._ } = rj;
-		rj = _;
+	let uj = lj.display === "none";
+	if (uj && _) {
+		let { ...n } = lj;
+		lj = n;
 	}
-	let aj = (_) => {
+	let dj = (_) => {
 		_.stopPropagation(), E(n.id);
-	}, oj = (_) => {
-		_.button === 0 && (_.stopPropagation(), E(n.id), M(!0), GA.current = {
+	}, fj = (_) => {
+		_.button === 0 && (_.stopPropagation(), E(n.id), M(!0), QA.current = {
 			x: _.clientX,
 			y: _.clientY
-		}, JA.current = {
+		}, $A.current = {
 			x: z.x,
 			y: z.y
 		});
-	}, sj = (n) => {
+	}, pj = (n) => {
 		n.stopPropagation(), n.preventDefault(), P(!0);
 		let _ = n.target.closest(".resizable-element");
 		if (_) {
 			let E = _.getBoundingClientRect();
-			ZA.current = {
+			ij.current = {
 				x: E.left + E.width / 2,
 				y: E.top + E.height / 2
 			};
-			let O = n.clientX - ZA.current.x, A = n.clientY - ZA.current.y;
-			YA.current = Math.atan2(A, O) * (180 / Math.PI), XA.current = U;
+			let O = n.clientX - ij.current.x, A = n.clientY - ij.current.y;
+			ej.current = Math.atan2(A, O) * (180 / Math.PI), rj.current = U;
 		}
 	};
 	useEffect(() => {
 		let _ = (n) => {
 			if (j) {
-				let _ = n.clientX - GA.current.x, E = n.clientY - GA.current.y, O = JA.current.x + _, j = JA.current.y + E;
-				A.isList && (j = Math.max(0, j), j + G.height > ej && (j = Math.max(0, ej - G.height))), B({
+				let _ = n.clientX - QA.current.x, E = n.clientY - QA.current.y, O = $A.current.x + _, j = $A.current.y + E;
+				A.isList && (j = Math.max(0, j), j + G.height > oj && (j = Math.max(0, oj - G.height))), B({
 					x: O,
 					y: j
 				});
 			}
 			if (N) {
-				let _ = n.clientX - ZA.current.x, E = n.clientY - ZA.current.y, O = Math.atan2(E, _) * (180 / Math.PI) - YA.current;
-				W((XA.current + O) % 360);
+				let _ = n.clientX - ij.current.x, E = n.clientY - ij.current.y, O = Math.atan2(E, _) * (180 / Math.PI) - ej.current;
+				W((rj.current + O) % 360);
 			}
 		}, E = () => {
 			j && (M(!1), O(n.id, {
@@ -10732,13 +10906,13 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		n.id,
 		O,
 		A.isList,
-		ej,
+		oj,
 		G.height,
 		z.x,
 		z.y,
 		U
 	]);
-	let cj = {
+	let mj = {
 		position: "absolute",
 		left: 0,
 		top: 0,
@@ -10755,7 +10929,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 		wordBreak: n.autoGrow ? "break-word" : void 0,
 		userSelect: "none",
 		...n.style,
-		...rj
+		...lj
 	};
 	return /* @__PURE__ */ jsx(Resizable, {
 		className: "resizable-element",
@@ -10763,7 +10937,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			width: G.width,
 			height: n.autoGrow ? "auto" : G.height
 		},
-		maxHeight: A.isList ? Math.max(10, ej - z.y) : void 0,
+		maxHeight: A.isList ? Math.max(10, oj - z.y) : void 0,
 		onResizeStop: (_, E, A, j) => {
 			let M = G.width + j.width, N = G.height + j.height;
 			Z({
@@ -10778,8 +10952,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 			position: "absolute",
 			transform: `translate(${z.x}px, ${z.y}px) rotate(${U}deg)`,
 			height: n.autoGrow ? "auto" : void 0,
-			display: ij && !_ ? "none" : void 0,
-			opacity: ij && _ ? .4 : 1
+			display: uj && !_ ? "none" : void 0,
+			opacity: uj && _ ? .4 : 1
 		},
 		enable: _ && !n.autoGrow ? void 0 : {
 			top: !1,
@@ -10799,10 +10973,11 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					height: "100%",
 					position: "relative"
 				},
-				children: [/* @__PURE__ */ jsxs(p$1, {
-					style: cj,
-					onMouseDown: oj,
-					onClick: aj,
+				children: [/* @__PURE__ */ jsxs(p, {
+					ref: aj,
+					style: mj,
+					onMouseDown: fj,
+					onClick: dj,
 					onMouseEnter: (n) => {
 						_ || (n.currentTarget.style.borderColor = "var(--gray-6)");
 					},
@@ -10815,10 +10990,10 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								width: "100%",
 								height: "100%"
 							},
-							children: nj
+							children: cj
 						}),
-						n.type === "image" && (nj ? /* @__PURE__ */ jsx("img", {
-							src: nj,
+						n.type === "image" && (cj ? /* @__PURE__ */ jsx("img", {
+							src: cj,
 							alt: "Element",
 							style: {
 								width: "100%",
@@ -10827,7 +11002,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								display: "block",
 								pointerEvents: "none"
 							}
-						}) : /* @__PURE__ */ jsx(p$1, {
+						}) : /* @__PURE__ */ jsx(p, {
 							style: {
 								width: "100%",
 								height: "100%",
@@ -10841,12 +11016,38 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 								children: "Imagem Placeholder"
 							})
 						})),
-						n.type === "box" && /* @__PURE__ */ jsx(p$1, { style: {
-							width: "100%",
-							height: "100%"
-						} })
+						n.type === "box" && /* @__PURE__ */ jsx(p, {
+							style: {
+								width: "100%",
+								height: "100%"
+							},
+							children: n.autoGrowContainer && /* @__PURE__ */ jsx("div", {
+								style: {
+									position: "absolute",
+									bottom: 2,
+									right: 2,
+									fontSize: "10px",
+									color: "#999",
+									pointerEvents: "none"
+								},
+								children: "Auto-Grow"
+							})
+						}),
+						n.parentId && /* @__PURE__ */ jsx("div", {
+							style: {
+								position: "absolute",
+								top: -5,
+								right: -5,
+								width: 8,
+								height: 8,
+								borderRadius: "50%",
+								backgroundColor: "var(--blue-9)",
+								border: "1px solid white"
+							},
+							title: "Ancorado"
+						})
 					]
-				}), _ && /* @__PURE__ */ jsx(p$1, {
+				}), _ && /* @__PURE__ */ jsx(p, {
 					style: {
 						position: "absolute",
 						top: -30,
@@ -10860,8 +11061,8 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 						zIndex: 50,
 						boxShadow: "0 0 0 2px white"
 					},
-					onMouseDown: sj,
-					children: /* @__PURE__ */ jsx(p$1, { style: {
+					onMouseDown: pj,
+					children: /* @__PURE__ */ jsx(p, { style: {
 						position: "absolute",
 						top: 12,
 						left: "50%",
@@ -10878,7 +11079,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 	let { state: n, selectElement: _ } = useEditor(), E = () => {
 		_(null);
 	}, O = n.canvasHeight || 150;
-	return /* @__PURE__ */ jsxs(p$1, {
+	return /* @__PURE__ */ jsx(CanvasContextMenu, { children: /* @__PURE__ */ jsxs(p, {
 		onClick: E,
 		style: {
 			width: "100%",
@@ -10918,7 +11119,7 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 					]
 				})
 			}),
-			n.elements.length === 0 && /* @__PURE__ */ jsx(p, {
+			n.elements.length === 0 && /* @__PURE__ */ jsx(p$1, {
 				align: "center",
 				justify: "center",
 				style: {
@@ -10933,7 +11134,304 @@ const ElementContextMenu = ({ children: n, element: _ }) => {
 				isSelected: n.selectedElementId === _.id
 			}, _.id))
 		]
-	});
+	}) });
+}, EditorSettings = () => {
+	let { state: n, updateListSettings: _, setCanvasHeight: E } = useEditor(), [O, A] = useState(!1), [j, M] = useState(""), [N, P] = useState("asc"), [z, B] = useState("bottom"), [U, W] = useState("down"), [G, Z] = useState("slideIn"), [JA, YA] = useState("150"), [ZA, QA] = useState("");
+	return useEffect(() => {
+		if (!O) return;
+		let _ = parseInt(JA, 10);
+		!isNaN(_) && _ > 0 && n.canvasHeight !== _ && E(_);
+	}, [
+		JA,
+		O,
+		E,
+		n.canvasHeight
+	]), /* @__PURE__ */ jsxs(s$4, {
+		open: O,
+		onOpenChange: (_) => {
+			A(_), _ && (M(n.listSettings.sortProp || "__none__"), P(n.listSettings.sortOrder || "asc"), B(n.listSettings.newestPosition || "bottom"), W(n.listSettings.scrollDirection || "down"), Z(n.listSettings.entryAnimation || "slideIn"), QA(n.listSettings.containerHeight ? String(n.listSettings.containerHeight) : ""), YA(String(n.canvasHeight || 150)));
+		},
+		children: [/* @__PURE__ */ jsx(n$3, { children: /* @__PURE__ */ jsxs(o, {
+			variant: "soft",
+			color: "gray",
+			style: {
+				width: "100%",
+				justifyContent: "center",
+				cursor: "pointer"
+			},
+			children: [/* @__PURE__ */ jsx(GearIcon, {}), " Configurações"]
+		}) }), /* @__PURE__ */ jsxs(p$8, {
+			style: { maxWidth: 600 },
+			children: [
+				/* @__PURE__ */ jsx(g$2, { children: "Configurações do Editor" }),
+				/* @__PURE__ */ jsx(m$3, {
+					size: "2",
+					mb: "4",
+					children: "Configure o comportamento da lista."
+				}),
+				/* @__PURE__ */ jsx(p, {
+					pt: "3",
+					children: /* @__PURE__ */ jsxs(p$1, {
+						direction: "column",
+						gap: "3",
+						children: [
+							/* @__PURE__ */ jsx(p$2, {
+								size: "2",
+								weight: "bold",
+								children: "Ordenação"
+							}),
+							/* @__PURE__ */ jsxs(p$1, {
+								gap: "3",
+								align: "center",
+								children: [/* @__PURE__ */ jsxs(p, {
+									flexGrow: "1",
+									children: [/* @__PURE__ */ jsx(p$2, {
+										size: "1",
+										mb: "1",
+										as: "div",
+										children: "Propriedade para Ordenar (ex: data, id)"
+									}), /* @__PURE__ */ jsxs("select", {
+										value: j,
+										onChange: (n) => M(n.target.value),
+										style: {
+											width: "100%",
+											padding: "8px",
+											borderRadius: "4px",
+											border: "1px solid var(--gray-6)",
+											backgroundColor: "var(--gray-2)",
+											color: "var(--gray-12)",
+											fontSize: "14px",
+											outline: "none"
+										},
+										children: [/* @__PURE__ */ jsx("option", {
+											value: "__none__",
+											children: "(Nenhum)"
+										}), n.availableProps.map((n) => /* @__PURE__ */ jsx("option", {
+											value: n.dataName,
+											children: n.name
+										}, n.dataName))]
+									})]
+								}), /* @__PURE__ */ jsxs(p, { children: [/* @__PURE__ */ jsx(p$2, {
+									size: "1",
+									mb: "1",
+									as: "div",
+									children: "Direção"
+								}), /* @__PURE__ */ jsxs("select", {
+									value: N,
+									onChange: (n) => P(n.target.value),
+									style: {
+										width: "150px",
+										padding: "8px",
+										borderRadius: "4px",
+										border: "1px solid var(--gray-6)",
+										backgroundColor: "var(--gray-2)",
+										color: "var(--gray-12)",
+										fontSize: "14px",
+										outline: "none"
+									},
+									children: [/* @__PURE__ */ jsx("option", {
+										value: "asc",
+										children: "Crescente (A-Z)"
+									}), /* @__PURE__ */ jsx("option", {
+										value: "desc",
+										children: "Decrescente (Z-A)"
+									})]
+								})] })]
+							}),
+							/* @__PURE__ */ jsxs(p$1, {
+								gap: "3",
+								align: "center",
+								children: [/* @__PURE__ */ jsxs(p, {
+									flexGrow: "1",
+									children: [/* @__PURE__ */ jsx(p$2, {
+										size: "1",
+										mb: "1",
+										as: "div",
+										children: "Posição do Recente"
+									}), /* @__PURE__ */ jsxs("select", {
+										value: z,
+										onChange: (n) => B(n.target.value),
+										style: {
+											width: "100%",
+											padding: "8px",
+											borderRadius: "4px",
+											border: "1px solid var(--gray-6)",
+											backgroundColor: "var(--gray-2)",
+											color: "var(--gray-12)",
+											fontSize: "14px",
+											outline: "none"
+										},
+										children: [/* @__PURE__ */ jsx("option", {
+											value: "top",
+											children: "Topo (Início)"
+										}), /* @__PURE__ */ jsx("option", {
+											value: "bottom",
+											children: "Base (Final)"
+										})]
+									})]
+								}), /* @__PURE__ */ jsxs(p, {
+									flexGrow: "1",
+									children: [/* @__PURE__ */ jsx(p$2, {
+										size: "1",
+										mb: "1",
+										as: "div",
+										children: "Comportamento de Rolagem"
+									}), /* @__PURE__ */ jsxs("select", {
+										value: U,
+										onChange: (n) => W(n.target.value),
+										style: {
+											width: "100%",
+											padding: "8px",
+											borderRadius: "4px",
+											border: "1px solid var(--gray-6)",
+											backgroundColor: "var(--gray-2)",
+											color: "var(--gray-12)",
+											fontSize: "14px",
+											outline: "none"
+										},
+										children: [/* @__PURE__ */ jsx("option", {
+											value: "down",
+											children: "Descer (Padrão)"
+										}), /* @__PURE__ */ jsx("option", {
+											value: "up",
+											children: "Subir (Chat)"
+										})]
+									})]
+								})]
+							}),
+							/* @__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: "Animação de Entrada"
+									}), /* @__PURE__ */ jsxs("select", {
+										value: G,
+										onChange: (n) => Z(n.target.value),
+										style: {
+											width: "100%",
+											padding: "8px",
+											borderRadius: "4px",
+											border: "1px solid var(--gray-6)",
+											backgroundColor: "var(--gray-2)",
+											color: "var(--gray-12)",
+											fontSize: "14px",
+											outline: "none"
+										},
+										children: [
+											/* @__PURE__ */ jsx("option", {
+												value: "slideIn",
+												children: "Deslizar (Slide In)"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "fadeIn",
+												children: "Aparecer (Fade In)"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "scaleIn",
+												children: "Zoom (Scale In)"
+											}),
+											/* @__PURE__ */ jsx("option", {
+												value: "none",
+												children: "Nenhuma"
+											})
+										]
+									})]
+								})
+							}),
+							/* @__PURE__ */ jsx(p$2, {
+								size: "2",
+								weight: "bold",
+								mt: "2",
+								children: "Dimensões"
+							}),
+							/* @__PURE__ */ jsxs(p$1, {
+								gap: "3",
+								align: "center",
+								children: [/* @__PURE__ */ jsxs(p, {
+									flexGrow: "1",
+									children: [
+										/* @__PURE__ */ jsx(p$2, {
+											size: "1",
+											mb: "1",
+											as: "div",
+											children: "Altura do Item (Template) (px)"
+										}),
+										/* @__PURE__ */ jsx(u$1, {
+											type: "number",
+											min: "10",
+											value: JA,
+											onChange: (n) => YA(n.target.value)
+										}),
+										/* @__PURE__ */ jsx(p$2, {
+											size: "1",
+											color: "gray",
+											children: "Altura de cada item individual na lista."
+										})
+									]
+								}), /* @__PURE__ */ jsxs(p, {
+									flexGrow: "1",
+									children: [
+										/* @__PURE__ */ jsx(p$2, {
+											size: "1",
+											mb: "1",
+											as: "div",
+											children: "Altura da Lista (Container) (px)"
+										}),
+										/* @__PURE__ */ jsx(u$1, {
+											type: "number",
+											min: "0",
+											placeholder: "Auto (100%)",
+											value: ZA,
+											onChange: (n) => QA(n.target.value)
+										}),
+										/* @__PURE__ */ jsx(p$2, {
+											size: "1",
+											color: "gray",
+											children: "Altura total da lista. Se exceder, rola. Vazio = 100%."
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsx(p$2, {
+								size: "1",
+								color: "gray",
+								children: "Essa propriedade será usada para ordenar os itens no modo lista."
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsxs(p$1, {
+					gap: "3",
+					mt: "4",
+					justify: "end",
+					children: [/* @__PURE__ */ jsx(D$2, { children: /* @__PURE__ */ jsx(o, {
+						variant: "soft",
+						color: "gray",
+						children: "Cancelar"
+					}) }), /* @__PURE__ */ jsx(D$2, { children: /* @__PURE__ */ jsx(o, {
+						onClick: () => {
+							let n = parseInt(ZA, 10);
+							_({
+								sortProp: j === "__none__" ? "" : j,
+								sortOrder: N,
+								newestPosition: z,
+								scrollDirection: U,
+								entryAnimation: G,
+								containerHeight: !isNaN(n) && n > 0 ? n : void 0
+							}), A(!1);
+						},
+						children: "Salvar Alterações"
+					}) })]
+				})
+			]
+		})]
+	});
 };
 var LayoutGroupContext = createContext({});
 function useConstant(n) {
@@ -11081,13 +11579,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));
-	}, GA = () => {
+	}, JA = () => {
 		E = !0, O = !0, A.isProcessing || n(Z);
 	};
 	return {
 		schedule: stepsOrder.reduce((n, _) => {
 			let O = M[_];
-			return n[_] = (n, _ = !1, A = !1) => (E || GA(), O.schedule(n, _, A)), n;
+			return n[_] = (n, _ = !1, A = !1) => (E || JA(), O.schedule(n, _, A)), n;
 		}, {}),
 		cancel: (n) => {
 			for (let _ = 0; _ < stepsOrder.length; _++) M[stepsOrder[_]].cancel(n);
@@ -11445,40 +11943,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)), GA = M - j, KA = /* @__PURE__ */ millisecondsToSeconds(Math.sqrt(P / B)), qA = Math.abs(GA) < 5;
-	O ||= qA ? springDefaults.restSpeed.granular : springDefaults.restSpeed.default, A ||= qA ? springDefaults.restDelta.granular : springDefaults.restDelta.default;
-	let JA;
+	}), G = U || 0, Z = z / (2 * Math.sqrt(P * B)), JA = M - j, YA = /* @__PURE__ */ millisecondsToSeconds(Math.sqrt(P / B)), XA = Math.abs(JA) < 5;
+	O ||= XA ? springDefaults.restSpeed.granular : springDefaults.restSpeed.default, A ||= XA ? springDefaults.restDelta.granular : springDefaults.restDelta.default;
+	let ZA;
 	if (Z < 1) {
-		let n = calcAngularFreq(KA, Z);
-		JA = (_) => M - Math.exp(-Z * KA * _) * ((G + Z * KA * GA) / n * Math.sin(n * _) + GA * Math.cos(n * _));
-	} else if (Z === 1) JA = (n) => M - Math.exp(-KA * n) * (GA + (G + KA * GA) * n);
+		let n = calcAngularFreq(YA, Z);
+		ZA = (_) => M - Math.exp(-Z * YA * _) * ((G + Z * YA * JA) / n * Math.sin(n * _) + JA * Math.cos(n * _));
+	} else if (Z === 1) ZA = (n) => M - Math.exp(-YA * n) * (JA + (G + YA * JA) * n);
 	else {
-		let n = KA * Math.sqrt(Z * Z - 1);
-		JA = (_) => {
-			let E = Math.exp(-Z * KA * _), O = Math.min(n * _, 300);
-			return M - E * ((G + Z * KA * GA) * Math.sinh(O) + n * GA * Math.cosh(O)) / n;
+		let n = YA * Math.sqrt(Z * Z - 1);
+		ZA = (_) => {
+			let E = Math.exp(-Z * YA * _), O = Math.min(n * _, 300);
+			return M - E * ((G + Z * YA * JA) * Math.sinh(O) + n * JA * Math.cosh(O)) / n;
 		};
 	}
-	let YA = {
+	let QA = {
 		calculatedDuration: W && H || null,
 		next: (n) => {
-			let _ = JA(n);
+			let _ = ZA(n);
 			if (W) N.done = n >= H;
 			else {
 				let E = n === 0 ? G : 0;
-				Z < 1 && (E = n === 0 ? /* @__PURE__ */ secondsToMilliseconds(G) : calcGeneratorVelocity(JA, n, _));
+				Z < 1 && (E = n === 0 ? /* @__PURE__ */ secondsToMilliseconds(G) : calcGeneratorVelocity(ZA, 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(YA), maxGeneratorDuration), _ = generateLinearEasing((_) => YA.next(n * _).value, n, 30);
+			let n = Math.min(calcGeneratorDuration(QA), maxGeneratorDuration), _ = generateLinearEasing((_) => QA.next(n * _).value, n, 30);
 			return n + "ms " + _;
 		},
 		toTransition: () => {}
 	};
-	return YA;
+	return QA;
 }
 spring.applyToOptions = (n) => {
 	let _ = createGeneratorEasing(n, 100, spring);
@@ -11488,26 +11986,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 * _, GA = H + Z, KA = M === void 0 ? GA : M(GA);
-	KA !== GA && (Z = KA - H);
-	let qA = (n) => -Z * Math.exp(-n / O), JA = (n) => KA + qA(n), YA = (n) => {
-		let _ = qA(n), E = JA(n);
-		U.done = Math.abs(_) <= z, U.value = U.done ? KA : E;
-	}, XA, ZA, QA = (n) => {
-		W(U.value) && (XA = n, ZA = 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 * _, JA = H + Z, YA = M === void 0 ? JA : M(JA);
+	YA !== JA && (Z = YA - H);
+	let XA = (n) => -Z * Math.exp(-n / O), ZA = (n) => YA + XA(n), QA = (n) => {
+		let _ = XA(n), E = ZA(n);
+		U.done = Math.abs(_) <= z, U.value = U.done ? YA : E;
+	}, $A, ej, tj = (n) => {
+		W(U.value) && ($A = n, ej = spring({
 			keyframes: [U.value, G(U.value)],
-			velocity: calcGeneratorVelocity(JA, n, U.value),
+			velocity: calcGeneratorVelocity(ZA, n, U.value),
 			damping: A,
 			stiffness: j,
 			restDelta: z,
 			restSpeed: B
 		}));
 	};
-	return QA(0), {
+	return tj(0), {
 		calculatedDuration: null,
 		next: (n) => {
 			let _ = !1;
-			return !ZA && XA === void 0 && (_ = !0, YA(n), QA(n)), XA !== void 0 && n >= XA ? ZA.next(n - XA) : (!_ && YA(n), U);
+			return !ej && $A === void 0 && (_ = !0, QA(n), tj(n)), $A !== void 0 && n >= $A ? ej.next(n - $A) : (!_ && QA(n), U);
 		}
 	};
 }
@@ -11627,22 +12125,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 GA = this.currentTime - P * (this.playbackSpeed >= 0 ? 1 : -1), KA = this.playbackSpeed >= 0 ? GA < 0 : GA > O;
-		this.currentTime = Math.max(GA, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = O);
-		let qA = this.currentTime, JA = E;
+		let JA = this.currentTime - P * (this.playbackSpeed >= 0 ? 1 : -1), YA = this.playbackSpeed >= 0 ? JA < 0 : JA > O;
+		this.currentTime = Math.max(JA, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = O);
+		let XA = this.currentTime, ZA = 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" && (JA = j)), qA = 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" && (ZA = j)), XA = clamp(0, 1, E) * M;
 		}
-		let YA = KA ? {
+		let QA = YA ? {
 			done: !1,
 			value: z[0]
-		} : JA.next(qA);
-		A && (YA.value = A(YA.value));
-		let { done: XA } = YA;
-		!KA && N !== null && (XA = this.playbackSpeed >= 0 ? this.currentTime >= O : this.currentTime <= 0);
-		let ZA = this.holdTime === null && (this.state === "finished" || this.state === "running" && XA);
-		return ZA && W !== inertia && (YA.value = getFinalKeyframe$1(z, this.options, Z, this.speed)), G && G(YA.value), ZA && this.finish(), YA;
+		} : ZA.next(XA);
+		A && (QA.value = A(QA.value));
+		let { done: $A } = QA;
+		!YA && N !== null && ($A = this.playbackSpeed >= 0 ? this.currentTime >= O : this.currentTime <= 0);
+		let ej = this.holdTime === null && (this.state === "finished" || this.state === "running" && $A);
+		return ej && W !== inertia && (QA.value = getFinalKeyframe$1(z, this.options, Z, this.speed)), G && G(QA.value), ej && this.finish(), QA;
 	}
 	then(n, _) {
 		return this.finished.then(n, _);
@@ -13013,16 +13511,16 @@ function useVisualElement(n, _, E, O, A, j) {
 	}));
 	let W = U.current, Z = useContext(SwitchLayoutGroupContext);
 	W && !W.projection && A && (W.type === "html" || W.type === "svg") && createProjectionNode$1(U.current, E, A, Z);
-	let GA = useRef(!1);
+	let JA = useRef(!1);
 	useInsertionEffect(() => {
-		W && GA.current && W.update(E, P);
+		W && JA.current && W.update(E, P);
 	});
-	let qA = E[optimizedAppearDataAttribute], JA = useRef(!!qA && !window.MotionHandoffIsComplete?.(qA) && window.MotionHasOptimisedAnimation?.(qA));
+	let XA = E[optimizedAppearDataAttribute], ZA = useRef(!!XA && !window.MotionHandoffIsComplete?.(XA) && window.MotionHasOptimisedAnimation?.(XA));
 	return useIsomorphicLayoutEffect(() => {
-		W && (GA.current = !0, window.MotionIsMounted = !0, W.updateFeatures(), W.scheduleRenderMicrotask(), JA.current && W.animationState && W.animationState.animateChanges());
+		W && (JA.current = !0, window.MotionIsMounted = !0, W.updateFeatures(), W.scheduleRenderMicrotask(), ZA.current && W.animationState && W.animationState.animateChanges());
 	}), useEffect(() => {
-		W && (!JA.current && W.animationState && W.animationState.animateChanges(), JA.current &&= (queueMicrotask(() => {
-			window.MotionHandoffMarkAsComplete?.(qA);
+		W && (!ZA.current && W.animationState && W.animationState.animateChanges(), ZA.current &&= (queueMicrotask(() => {
+			window.MotionHandoffMarkAsComplete?.(XA);
 		}), !1), W.enteringChildren = void 0);
 	}), W;
 }
@@ -13700,34 +14198,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), GA = U === j ? W.isActive : null;
-			GA === !1 && (H = _);
-			let KA = G === N[U] && G !== M[U] && Z;
-			if (KA && O && n.manuallyAnimateOnMount && (KA = !1), W.protectedKeys = { ...B }, !W.isActive && GA === null || !G && !W.prevProp || isAnimationControls(G) || typeof G == "boolean") continue;
-			let qA = checkVariantsDidChange(W.prevProp, G), JA = qA || U === j && W.isActive && !KA && Z || _ > H && Z, YA = !1, XA = Array.isArray(G) ? G : [G], ZA = XA.reduce(A(U), {});
-			GA === !1 && (ZA = {});
-			let { prevResolvedValues: QA = {} } = W, $A = {
-				...QA,
-				...ZA
-			}, ej = (_) => {
-				JA = !0, z.has(_) && (YA = !0, z.delete(_)), W.needsAnimating[_] = !0;
+			let U = reversePriorityOrder[_], W = E[U], G = M[U] === void 0 ? N[U] : M[U], Z = isVariantLabel(G), JA = U === j ? W.isActive : null;
+			JA === !1 && (H = _);
+			let YA = G === N[U] && G !== M[U] && Z;
+			if (YA && O && n.manuallyAnimateOnMount && (YA = !1), W.protectedKeys = { ...B }, !W.isActive && JA === null || !G && !W.prevProp || isAnimationControls(G) || typeof G == "boolean") continue;
+			let XA = checkVariantsDidChange(W.prevProp, G), ZA = XA || U === j && W.isActive && !YA && Z || _ > H && Z, QA = !1, $A = Array.isArray(G) ? G : [G], ej = $A.reduce(A(U), {});
+			JA === !1 && (ej = {});
+			let { prevResolvedValues: tj = {} } = W, nj = {
+				...tj,
+				...ej
+			}, rj = (_) => {
+				ZA = !0, z.has(_) && (QA = !0, z.delete(_)), W.needsAnimating[_] = !0;
 				let E = n.getValue(_);
 				E && (E.liveStyle = !1);
 			};
-			for (let n in $A) {
-				let _ = ZA[n], E = QA[n];
+			for (let n in nj) {
+				let _ = ej[n], E = tj[n];
 				if (B.hasOwnProperty(n)) continue;
 				let O = !1;
-				O = isKeyframesTarget(_) && isKeyframesTarget(E) ? !shallowCompare(_, E) : _ !== E, O ? _ == null ? z.add(n) : ej(n) : _ !== void 0 && z.has(n) ? ej(n) : W.protectedKeys[n] = !0;
+				O = isKeyframesTarget(_) && isKeyframesTarget(E) ? !shallowCompare(_, E) : _ !== E, O ? _ == null ? z.add(n) : rj(n) : _ !== void 0 && z.has(n) ? rj(n) : W.protectedKeys[n] = !0;
 			}
-			W.prevProp = G, W.prevResolvedValues = ZA, W.isActive && (B = {
+			W.prevProp = G, W.prevResolvedValues = ej, W.isActive && (B = {
 				...B,
-				...ZA
-			}), O && n.blockInitialAnimation && (JA = !1);
-			let tj = KA && qA;
-			JA && (!tj || YA) && P.push(...XA.map((_) => {
+				...ej
+			}), O && n.blockInitialAnimation && (ZA = !1);
+			let ij = YA && XA;
+			ZA && (!ij || QA) && P.push(...$A.map((_) => {
 				let E = { type: U };
-				if (typeof _ == "string" && O && !tj && n.manuallyAnimateOnMount && n.parent) {
+				if (typeof _ == "string" && O && !ij && n.manuallyAnimateOnMount && n.parent) {
 					let { parent: O } = n, A = resolveVariant(O, _);
 					if (O.enteringChildren && A) {
 						let { delayChildren: _ } = A.transition || {};
@@ -15240,16 +15738,19 @@ var gestureAnimations = {
 			return O == null ? n : String(O);
 		});
 	}
-	return /* @__PURE__ */ jsxs(p$1, {
+	return /* @__PURE__ */ jsxs(p, {
 		style: {
 			position: "absolute",
 			left: 0,
 			top: 0,
 			width: `${n.width}px`,
-			height: `${n.height}px`,
+			height: n.autoGrow ? "auto" : `${n.height}px`,
+			minHeight: n.autoGrow ? "100%" : void 0,
 			transform: `translate(${n.x}px, ${n.y + _}px) rotate(${n.rotation || 0}deg)`,
 			padding: n.type === "image" || n.type === "text" ? 0 : "8px",
-			overflow: "hidden",
+			overflow: n.autoGrow ? "visible" : "hidden",
+			whiteSpace: n.autoGrow ? "pre-wrap" : void 0,
+			wordBreak: n.autoGrow ? "break-word" : void 0,
 			...n.style
 		},
 		children: [
@@ -15263,7 +15764,7 @@ var gestureAnimations = {
 					objectFit: n.style?.objectFit || "cover",
 					display: "block"
 				}
-			}) : /* @__PURE__ */ jsx(p$1, {
+			}) : /* @__PURE__ */ jsx(p, {
 				style: {
 					width: "100%",
 					height: "100%",
@@ -15277,44 +15778,72 @@ var gestureAnimations = {
 					children: "Imagem"
 				})
 			})),
-			n.type === "box" && /* @__PURE__ */ jsx(p$1, { style: {
+			n.type === "box" && /* @__PURE__ */ jsx(p, { style: {
 				width: "100%",
 				height: "100%"
 			} })
 		]
 	});
-}, ListItem = ({ children: n, index: _, height: E }) => /* @__PURE__ */ jsx(motion.div, {
-	initial: {
-		opacity: 0,
-		y: 20,
-		scale: .95
-	},
-	animate: {
-		opacity: 1,
-		y: 0,
-		scale: 1
-	},
-	transition: {
+}, ListItem = ({ children: n, index: _, height: E, entryAnimation: O = "slideIn" }) => {
+	let A = {}, j = {}, M = {
 		duration: .4,
 		delay: _ * .05,
 		ease: "easeOut"
-	},
-	whileHover: {
-		scale: 1.02,
-		transition: { duration: .2 }
-	},
-	style: {
-		position: "relative",
-		height: E,
-		width: "100%",
-		marginBottom: "20px",
-		transformOrigin: "center center"
-	},
-	children: n
-});
+	};
+	switch (O) {
+		case "slideIn":
+			A = {
+				opacity: 0,
+				y: 20
+			}, j = {
+				opacity: 1,
+				y: 0
+			};
+			break;
+		case "fadeIn":
+			A = { opacity: 0 }, j = { opacity: 1 };
+			break;
+		case "scaleIn":
+			A = {
+				opacity: 0,
+				scale: .8
+			}, j = {
+				opacity: 1,
+				scale: 1
+			}, M.type = "spring", M.stiffness = 260, M.damping = 20;
+			break;
+		case "none":
+			A = {}, j = {}, M = { duration: 0 };
+			break;
+		default: A = {
+			opacity: 0,
+			y: 20
+		}, j = {
+			opacity: 1,
+			y: 0
+		};
+	}
+	return /* @__PURE__ */ jsx(motion.div, {
+		initial: A,
+		animate: j,
+		transition: M,
+		whileHover: {
+			scale: 1.02,
+			transition: { duration: .2 }
+		},
+		style: {
+			position: "relative",
+			height: E,
+			width: "100%",
+			marginBottom: "20px",
+			transformOrigin: "center center"
+		},
+		children: n
+	});
+};
 const Preview = () => {
 	let { state: n } = useEditor(), E = 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__ */ jsx(p$1, {
+	return /* @__PURE__ */ jsx(p, {
 		style: {
 			width: "100%",
 			height: "100%",
@@ -15329,14 +15858,14 @@ const Preview = () => {
 				height: "100%",
 				width: "100%"
 			},
-			children: /* @__PURE__ */ jsx(p$1, {
+			children: /* @__PURE__ */ jsx(p, {
 				style: {
 					position: "relative",
 					minHeight: "100%",
 					width: "100%"
 				},
 				children: (() => {
-					if (n.elements.length === 0) return /* @__PURE__ */ jsx(p, {
+					if (n.elements.length === 0) return /* @__PURE__ */ jsx(p$1, {
 						align: "center",
 						justify: "center",
 						style: { height: "100%" },
@@ -15354,7 +15883,7 @@ const Preview = () => {
 								return A < j ? -1 * O : A > j ? 1 * O : 0;
 							});
 						}
-						return n.listSettings.newestPosition === "top" && (_ = [..._].reverse()), /* @__PURE__ */ jsx(p, {
+						return n.listSettings.newestPosition === "top" && (_ = [..._].reverse()), /* @__PURE__ */ jsx(p$1, {
 							direction: "column",
 							justify: n.listSettings.newestPosition === "top" ? "start" : "end",
 							p: "4",
@@ -15365,6 +15894,7 @@ const Preview = () => {
 							children: _.map((_, O) => /* @__PURE__ */ jsx(ListItem, {
 								index: O,
 								height: E,
+								entryAnimation: n.listSettings.entryAnimation,
 								children: n.elements.map((n) => /* @__PURE__ */ jsx(PreviewElementRenderer, {
 									element: n,
 									offsetY: 0,
@@ -15381,257 +15911,6 @@ const Preview = () => {
 			})
 		})
 	});
-}, EditorSettings = () => {
-	let { state: n, updateListSettings: _, setCanvasHeight: E } = useEditor(), [O, A] = useState(!1), [j, M] = useState(""), [N, P] = useState("asc"), [z, B] = useState("bottom"), [U, W] = useState("down"), [G, Z] = useState("150"), [GA, KA] = useState("");
-	return useEffect(() => {
-		O && (M(n.listSettings.sortProp || "__none__"), P(n.listSettings.sortOrder || "asc"), B(n.listSettings.newestPosition || "bottom"), W(n.listSettings.scrollDirection || "down"), KA(n.listSettings.containerHeight ? String(n.listSettings.containerHeight) : ""), Z(String(n.canvasHeight || 150)));
-	}, [O]), useEffect(() => {
-		if (!O) return;
-		let _ = parseInt(G, 10);
-		!isNaN(_) && _ > 0 && n.canvasHeight !== _ && E(_);
-	}, [
-		G,
-		O,
-		E,
-		n.canvasHeight
-	]), /* @__PURE__ */ jsxs(s$4, {
-		open: O,
-		onOpenChange: A,
-		children: [/* @__PURE__ */ jsx(n$3, { children: /* @__PURE__ */ jsxs(o, {
-			variant: "soft",
-			color: "gray",
-			style: {
-				width: "100%",
-				justifyContent: "center",
-				cursor: "pointer"
-			},
-			children: [/* @__PURE__ */ jsx(GearIcon, {}), " Configurações"]
-		}) }), /* @__PURE__ */ jsxs(p$8, {
-			style: { maxWidth: 600 },
-			children: [
-				/* @__PURE__ */ jsx(g$2, { children: "Configurações do Editor" }),
-				/* @__PURE__ */ jsx(m$3, {
-					size: "2",
-					mb: "4",
-					children: "Configure o comportamento da lista."
-				}),
-				/* @__PURE__ */ jsx(p$1, {
-					pt: "3",
-					children: /* @__PURE__ */ jsxs(p, {
-						direction: "column",
-						gap: "3",
-						children: [
-							/* @__PURE__ */ jsx(p$2, {
-								size: "2",
-								weight: "bold",
-								children: "Ordenação"
-							}),
-							/* @__PURE__ */ jsxs(p, {
-								gap: "3",
-								align: "center",
-								children: [/* @__PURE__ */ jsxs(p$1, {
-									flexGrow: "1",
-									children: [/* @__PURE__ */ jsx(p$2, {
-										size: "1",
-										mb: "1",
-										as: "div",
-										children: "Propriedade para Ordenar (ex: data, id)"
-									}), /* @__PURE__ */ jsxs("select", {
-										value: j,
-										onChange: (n) => M(n.target.value),
-										style: {
-											width: "100%",
-											padding: "8px",
-											borderRadius: "4px",
-											border: "1px solid var(--gray-6)",
-											backgroundColor: "var(--gray-2)",
-											color: "var(--gray-12)",
-											fontSize: "14px",
-											outline: "none"
-										},
-										children: [/* @__PURE__ */ jsx("option", {
-											value: "__none__",
-											children: "(Nenhum)"
-										}), n.availableProps.map((n) => /* @__PURE__ */ jsx("option", {
-											value: n.dataName,
-											children: n.name
-										}, n.dataName))]
-									})]
-								}), /* @__PURE__ */ jsxs(p$1, { children: [/* @__PURE__ */ jsx(p$2, {
-									size: "1",
-									mb: "1",
-									as: "div",
-									children: "Direção"
-								}), /* @__PURE__ */ jsxs("select", {
-									value: N,
-									onChange: (n) => P(n.target.value),
-									style: {
-										width: "150px",
-										padding: "8px",
-										borderRadius: "4px",
-										border: "1px solid var(--gray-6)",
-										backgroundColor: "var(--gray-2)",
-										color: "var(--gray-12)",
-										fontSize: "14px",
-										outline: "none"
-									},
-									children: [/* @__PURE__ */ jsx("option", {
-										value: "asc",
-										children: "Crescente (A-Z)"
-									}), /* @__PURE__ */ jsx("option", {
-										value: "desc",
-										children: "Decrescente (Z-A)"
-									})]
-								})] })]
-							}),
-							/* @__PURE__ */ jsxs(p, {
-								gap: "3",
-								align: "center",
-								children: [/* @__PURE__ */ jsxs(p$1, {
-									flexGrow: "1",
-									children: [/* @__PURE__ */ jsx(p$2, {
-										size: "1",
-										mb: "1",
-										as: "div",
-										children: "Posição do Recente"
-									}), /* @__PURE__ */ jsxs("select", {
-										value: z,
-										onChange: (n) => B(n.target.value),
-										style: {
-											width: "100%",
-											padding: "8px",
-											borderRadius: "4px",
-											border: "1px solid var(--gray-6)",
-											backgroundColor: "var(--gray-2)",
-											color: "var(--gray-12)",
-											fontSize: "14px",
-											outline: "none"
-										},
-										children: [/* @__PURE__ */ jsx("option", {
-											value: "top",
-											children: "Topo (Início)"
-										}), /* @__PURE__ */ jsx("option", {
-											value: "bottom",
-											children: "Base (Final)"
-										})]
-									})]
-								}), /* @__PURE__ */ jsxs(p$1, {
-									flexGrow: "1",
-									children: [/* @__PURE__ */ jsx(p$2, {
-										size: "1",
-										mb: "1",
-										as: "div",
-										children: "Comportamento de Rolagem"
-									}), /* @__PURE__ */ jsxs("select", {
-										value: U,
-										onChange: (n) => W(n.target.value),
-										style: {
-											width: "100%",
-											padding: "8px",
-											borderRadius: "4px",
-											border: "1px solid var(--gray-6)",
-											backgroundColor: "var(--gray-2)",
-											color: "var(--gray-12)",
-											fontSize: "14px",
-											outline: "none"
-										},
-										children: [/* @__PURE__ */ jsx("option", {
-											value: "down",
-											children: "Descer (Padrão)"
-										}), /* @__PURE__ */ jsx("option", {
-											value: "up",
-											children: "Subir (Chat)"
-										})]
-									})]
-								})]
-							}),
-							/* @__PURE__ */ jsx(p$2, {
-								size: "2",
-								weight: "bold",
-								mt: "2",
-								children: "Dimensões"
-							}),
-							/* @__PURE__ */ jsxs(p, {
-								gap: "3",
-								align: "center",
-								children: [/* @__PURE__ */ jsxs(p$1, {
-									flexGrow: "1",
-									children: [
-										/* @__PURE__ */ jsx(p$2, {
-											size: "1",
-											mb: "1",
-											as: "div",
-											children: "Altura do Item (Template) (px)"
-										}),
-										/* @__PURE__ */ jsx(u$1, {
-											type: "number",
-											min: "10",
-											value: G,
-											onChange: (n) => Z(n.target.value)
-										}),
-										/* @__PURE__ */ jsx(p$2, {
-											size: "1",
-											color: "gray",
-											children: "Altura de cada item individual na lista."
-										})
-									]
-								}), /* @__PURE__ */ jsxs(p$1, {
-									flexGrow: "1",
-									children: [
-										/* @__PURE__ */ jsx(p$2, {
-											size: "1",
-											mb: "1",
-											as: "div",
-											children: "Altura da Lista (Container) (px)"
-										}),
-										/* @__PURE__ */ jsx(u$1, {
-											type: "number",
-											min: "0",
-											placeholder: "Auto (100%)",
-											value: GA,
-											onChange: (n) => KA(n.target.value)
-										}),
-										/* @__PURE__ */ jsx(p$2, {
-											size: "1",
-											color: "gray",
-											children: "Altura total da lista. Se exceder, rola. Vazio = 100%."
-										})
-									]
-								})]
-							}),
-							/* @__PURE__ */ jsx(p$2, {
-								size: "1",
-								color: "gray",
-								children: "Essa propriedade será usada para ordenar os itens no modo lista."
-							})
-						]
-					})
-				}),
-				/* @__PURE__ */ jsxs(p, {
-					gap: "3",
-					mt: "4",
-					justify: "end",
-					children: [/* @__PURE__ */ jsx(D$2, { children: /* @__PURE__ */ jsx(o, {
-						variant: "soft",
-						color: "gray",
-						children: "Cancelar"
-					}) }), /* @__PURE__ */ jsx(D$2, { children: /* @__PURE__ */ jsx(o, {
-						onClick: () => {
-							let n = parseInt(GA, 10);
-							_({
-								sortProp: j === "__none__" ? "" : j,
-								sortOrder: N,
-								newestPosition: z,
-								scrollDirection: U,
-								containerHeight: !isNaN(n) && n > 0 ? n : void 0
-							}), A(!1);
-						},
-						children: "Salvar Alterações"
-					}) })]
-				})
-			]
-		})]
-	});
 };
 var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light" }) => {
 	let [j, M] = useState(!0), [N, P] = useState(!0), { addElement: z, loadState: B, state: H } = useEditor();
@@ -15655,7 +15934,7 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 		grayColor: "slate",
 		radius: "medium",
 		scaling: "100%",
-		children: /* @__PURE__ */ jsxs(p, {
+		children: /* @__PURE__ */ jsxs(p$1, {
 			direction: "row",
 			style: {
 				height: "100vh",
@@ -15663,7 +15942,7 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 				overflow: "hidden",
 				backgroundColor: "var(--color-background)"
 			},
-			children: [N && /* @__PURE__ */ jsxs(p, {
+			children: [N && /* @__PURE__ */ jsxs(p$1, {
 				direction: "column",
 				width: "280px",
 				style: {
@@ -15672,16 +15951,16 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 					flexShrink: 0,
 					height: "100%"
 				},
-				children: [/* @__PURE__ */ jsx(p$1, {
+				children: [/* @__PURE__ */ jsx(p, {
 					p: "4",
 					style: {
 						borderBottom: "1px solid var(--gray-5)",
 						backgroundColor: "var(--gray-2)"
 					},
-					children: /* @__PURE__ */ jsx(p, {
+					children: /* @__PURE__ */ jsx(p$1, {
 						direction: "column",
 						gap: "3",
-						children: /* @__PURE__ */ jsxs(p$1, { children: [
+						children: /* @__PURE__ */ jsxs(p, { children: [
 							/* @__PURE__ */ jsx(p$2, {
 								size: "2",
 								weight: "bold",
@@ -15740,7 +16019,7 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 								},
 								children: [/* @__PURE__ */ jsx(Share1Icon, {}), " Salvar Alterações"]
 							}),
-							/* @__PURE__ */ jsx(p$1, {
+							/* @__PURE__ */ jsx(p, {
 								mt: "2",
 								children: /* @__PURE__ */ jsx(EditorSettings, {})
 							})
@@ -15750,11 +16029,11 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 					type: "auto",
 					scrollbars: "vertical",
 					style: { flex: 1 },
-					children: /* @__PURE__ */ jsx(p, {
+					children: /* @__PURE__ */ jsx(p$1, {
 						direction: "column",
 						gap: "4",
 						p: "4",
-						children: /* @__PURE__ */ jsxs(p$1, { children: [
+						children: /* @__PURE__ */ jsxs(p, { children: [
 							/* @__PURE__ */ jsx(p$2, {
 								size: "2",
 								weight: "bold",
@@ -15769,7 +16048,7 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 								as: "div",
 								children: "Clique para copiar ou arraste (futuramente)"
 							}),
-							/* @__PURE__ */ jsxs(p, {
+							/* @__PURE__ */ jsxs(p$1, {
 								direction: "column",
 								gap: "2",
 								children: [n.props.map((n, _) => /* @__PURE__ */ jsxs(e, {
@@ -15799,14 +16078,14 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 						] })
 					})
 				})]
-			}), /* @__PURE__ */ jsxs(p$1, {
+			}), /* @__PURE__ */ jsxs(p, {
 				style: {
 					flex: 1,
 					position: "relative",
 					height: "100%"
 				},
 				children: [
-					/* @__PURE__ */ jsx(p$1, {
+					/* @__PURE__ */ jsx(p, {
 						style: {
 							position: "absolute",
 							top: 10,
@@ -15822,7 +16101,7 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 							children: jsx(N ? DoubleArrowLeftIcon : DoubleArrowRightIcon, {})
 						})
 					}),
-					/* @__PURE__ */ jsx(p, {
+					/* @__PURE__ */ jsx(p$1, {
 						style: {
 							position: "absolute",
 							top: 10,
@@ -15849,7 +16128,7 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 							/* @__PURE__ */ jsx(kt, {
 								defaultSize: 50,
 								minSize: 20,
-								children: /* @__PURE__ */ jsx(p$1, {
+								children: /* @__PURE__ */ jsx(p, {
 									style: {
 										height: "100%",
 										width: "100%",
@@ -15867,7 +16146,7 @@ var EditorContent = ({ layout: n, initialState: E, onSave: O, theme: A = "light"
 							j && /* @__PURE__ */ jsx(kt, {
 								defaultSize: 50,
 								minSize: 20,
-								children: /* @__PURE__ */ jsx(p$1, {
+								children: /* @__PURE__ */ jsx(p, {
 									style: {
 										height: "100%",
 										width: "100%",
@@ -15889,5 +16168,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 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        const animationCss = `\n            @keyframes slideIn {\n                from { opacity: 0; transform: translateY(20px); }\n                to { opacity: 1; transform: translateY(0); }\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: slideIn 0.3s ease-out;\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 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 = ['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 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            const dataAttrs = `data-id=\"${element.id}\" ${element.parentId ? `data-parent-id=\"${element.parentId}\"` : ''} ${element.autoGrow ? 'data-auto-grow=\"true\"' : ''} ${element.autoGrowContainer ? 'data-auto-grow-container=\"true\"' : ''}`;\n\n            if (element.type === 'text') {\n                return `<div ${dataAttrs} 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 ${dataAttrs} style=\"${styleString}\"><img src=\"${imgSrc}\" alt=\"Element\" style=\"${imgStyle}\" /></div>`;\n            } else if (element.type === 'box') {\n                 return `<div ${dataAttrs} 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        const entryAnimation = (listSettings && listSettings.entryAnimation) || 'slideIn';\n        \n        let keyframes = '';\n        let animationRule = '';\n\n        if (entryAnimation === 'slideIn') {\n            keyframes = `\n                @keyframes entryAnim {\n                    from { opacity: 0; transform: translateY(20px); }\n                    to { opacity: 1; transform: translateY(0); }\n                }\n            `;\n            animationRule = 'animation: entryAnim 0.3s ease-out;';\n        } else if (entryAnimation === 'fadeIn') {\n            keyframes = `\n                @keyframes entryAnim {\n                    from { opacity: 0; }\n                    to { opacity: 1; }\n                }\n            `;\n            animationRule = 'animation: entryAnim 0.4s ease-out;';\n        } else if (entryAnimation === 'scaleIn') {\n             keyframes = `\n                @keyframes entryAnim {\n                    from { opacity: 0; transform: scale(0.8); }\n                    to { opacity: 1; transform: scale(1); }\n                }\n            `;\n            animationRule = 'animation: entryAnim 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);';\n        } else {\n            keyframes = '';\n            animationRule = '';\n        }\n\n        const animationCss = `\n            ${keyframes}\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                ${animationRule}\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 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                        // 1. Render content to a temp container to measure size\n                        const tempDiv = document.createElement('div');\n                        tempDiv.style.position = 'absolute';\n                        tempDiv.style.visibility = 'hidden';\n                        tempDiv.style.width = '100%';\n                        // Assuming wrapper width is reliable\n                        tempDiv.innerHTML = renderItem(data, 0, 0);\n                        document.body.appendChild(tempDiv);\n\n                        // 2. Perform Layout Adjustment (Runtime)\n                        const children = Array.from(tempDiv.children);\n                        const idMap = {};\n                        children.forEach(el => {\n                            const id = el.getAttribute('data-id');\n                            if (id) idMap[id] = el;\n                        });\n\n                        // Helper to get numeric style\n                        const getNumStyle = (el, prop) => parseFloat(el.style[prop] || 0);\n\n                        // A. Handle Text Expansion -> Parent Expansion\n                        children.forEach(el => {\n                            if (el.getAttribute('data-auto-grow') === 'true') {\n                                const initialHeight = getNumStyle(el, 'height');\n                                // Since we set 'auto' in renderItem for autoGrow, measuring offsetHeight gives real height\n                                const realHeight = el.offsetHeight;\n                                \n                                // Check if parent needs expansion\n                                const parentId = el.getAttribute('data-parent-id');\n                                if (parentId && idMap[parentId]) {\n                                    const parent = idMap[parentId];\n                                    if (parent.getAttribute('data-auto-grow-container') === 'true') {\n                                        const parentTop = getNumStyle(parent, 'top');\n                                        const parentHeight = getNumStyle(parent, 'height');\n                                        const elTop = getNumStyle(el, 'top');\n                                        \n                                        // Calculate absolute bottom of child relative to item container\n                                        const childBottom = elTop + realHeight;\n                                        const parentBottom = parentTop + parentHeight;\n                                        const padding = 10;\n\n                                        if (childBottom + padding > parentBottom) {\n                                            const newParentHeight = childBottom + padding - parentTop;\n                                            parent.style.height = newParentHeight + 'px';\n                                            \n                                            // Propagate push to siblings of parent\n                                            const delta = newParentHeight - parentHeight;\n                                            const parentBottomThreshold = parentTop + parentHeight - 1; // old threshold\n\n                                            children.forEach(sibling => {\n                                                if (sibling === parent || sibling.getAttribute('data-parent-id') === parentId) return;\n                                                const sibTop = getNumStyle(sibling, 'top');\n                                                if (sibTop >= parentBottomThreshold) {\n                                                    sibling.style.top = (sibTop + delta) + 'px';\n                                                }\n                                            });\n                                        }\n                                    }\n                                } else {\n                                     // Case where autoGrow element is root level, push siblings?\n                                     // (Not implemented in editor context yet for root level siblings push if text grows, \n                                     // but here we can add it if needed. For now sticking to container logic)\n                                }\n                            }\n                        });\n\n                        // 3. Calculate Final Item Height\n                        let maxBottom = itemHeight;\n                        children.forEach(el => {\n                            const bottom = getNumStyle(el, 'top') + el.offsetHeight;\n                            if (bottom > maxBottom) maxBottom = bottom;\n                        });\n                        \n                        // Clean up temp\n                        const finalHtml = tempDiv.innerHTML;\n                        document.body.removeChild(tempDiv);\n\n                        const itemContainerStyle = styleObjectToString({\n                            position: 'relative',\n                            height: maxBottom, // Use dynamic height\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 = finalHtml;\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 };