@firecms/collection_editor 3.0.0-canary.241 → 3.0.0-canary.244

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("@firecms/core"), require("react"), require("react-fast-compare"), require("@firecms/ui"), require("yup"), require("@firecms/formex"), require("@firecms/schema_inference"), require("@hello-pangea/dnd"), require("json5"), require("prism-react-renderer"), require("@firecms/data_import_export"), require("react-router")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "@firecms/core", "react", "react-fast-compare", "@firecms/ui", "yup", "@firecms/formex", "@firecms/schema_inference", "@hello-pangea/dnd", "json5", "prism-react-renderer", "@firecms/data_import_export", "react-router"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS collection editor"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.core, global.React, global.equal, global.ui, global.Yup, global.formex, global.schema_inference, global.dnd, global.JSON5, global.prismReactRenderer, global.data_import_export, global.reactRouter));
-})(this, function(exports2, jsxRuntime, reactCompilerRuntime, core, React, equal, ui, Yup, formex, schema_inference, dnd, JSON5, prismReactRenderer, data_import_export, reactRouter) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("@firecms/core"), require("react"), require("react-fast-compare"), require("@firecms/ui"), require("yup"), require("@firecms/formex"), require("@firecms/schema_inference"), require("@dnd-kit/core"), require("@dnd-kit/sortable"), require("@dnd-kit/modifiers"), require("@dnd-kit/utilities"), require("json5"), require("prism-react-renderer"), require("@firecms/data_import_export"), require("react-router")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "@firecms/core", "react", "react-fast-compare", "@firecms/ui", "yup", "@firecms/formex", "@firecms/schema_inference", "@dnd-kit/core", "@dnd-kit/sortable", "@dnd-kit/modifiers", "@dnd-kit/utilities", "json5", "prism-react-renderer", "@firecms/data_import_export", "react-router"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS collection editor"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.core, global.React, global.equal, global.ui, global.Yup, global.formex, global.schema_inference, global.core$1, global.sortable, global.modifiers, global.utilities, global.JSON5, global.prismReactRenderer, global.data_import_export, global.reactRouter));
+})(this, function(exports2, jsxRuntime, reactCompilerRuntime, core, React, equal, ui, Yup, formex, schema_inference, core$1, sortable, modifiers, utilities, JSON5, prismReactRenderer, data_import_export, reactRouter) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -169,7 +169,7 @@
     return t18;
   }
   function CollectionDetailsForm(t0) {
-    const $ = reactCompilerRuntime.c(186);
+    const $ = reactCompilerRuntime.c(196);
     const {
       isNewCollection,
       reservedGroups,
@@ -451,7 +451,7 @@
     }
     const t37 = !isSubcollection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 sm:col-span-4 relative", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { error: showErrors && Boolean(errors.group), disabled: isSubmitting, value: values.group ?? "", autoComplete: "off", onChange: (event) => setFieldValue("group", event.target.value), name: "group", inputRef: groupRef, label: "Group" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Autocomplete, { open: autoCompleteOpen && (groupOptions ?? []).length > 0, setOpen: setAutoCompleteOpen, children: groupOptions?.map((group_0, index) => /* @__PURE__ */ jsxRuntime.jsx(ui.AutocompleteItem, { onClick: () => {
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Autocomplete, { open: autoCompleteOpen && (groupOptions ?? []).length > 0, setOpen: setAutoCompleteOpen, children: groupOptions?.map((group_0, index) => /* @__PURE__ */ jsxRuntime.jsx(ui.AutocompleteItem, { className: "pr-6 pl-14", onClick: () => {
         setAutoCompleteOpen(false);
         setFieldValue("group", group_0 ?? null);
       }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow", children: group_0 }) }, index + "_" + group_0)) }),
@@ -475,7 +475,7 @@
     } else {
       t40 = $[58];
     }
-    const t41 = values.history === null ? "Document history revisions enabled if enabled globally" : values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled";
+    const t41 = values.history === null || values.history === void 0 ? "Document history revisions enabled if enabled globally" : values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled";
     let t42;
     if ($[59] !== setFieldValue) {
       t42 = (v) => setFieldValue("history", v);
@@ -484,7 +484,7 @@
     } else {
       t42 = $[60];
     }
-    const t43 = values.history ?? null;
+    const t43 = values.history === void 0 ? null : values.history;
     let t44;
     if ($[61] !== t41 || $[62] !== t42 || $[63] !== t43) {
       t44 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", allowIndeterminate: true, label: t41, onValueChange: t42, value: t43 });
@@ -742,242 +742,282 @@
     } else {
       t84 = $[124];
     }
-    const t85 = customIdValue === "code_defined";
+    const t85 = values.includeJsonView === void 0 || values.includeJsonView ? "Include JSON view" : "Do not include JSON view";
     let t86;
     if ($[125] !== setFieldValue) {
-      t86 = (v_0) => {
-        if (v_0 === "code_defined") {
-          throw new Error("This should not happen");
-        }
-        setFieldValue("customId", v_0);
-      };
+      t86 = (v_0) => setFieldValue("includeJsonView", v_0);
       $[125] = setFieldValue;
       $[126] = t86;
     } else {
       t86 = $[126];
     }
-    const t87 = customIdValue ?? "";
+    const t87 = values.includeJsonView === void 0 ? true : values.includeJsonView;
     let t88;
+    if ($[127] !== t85 || $[128] !== t86 || $[129] !== t87) {
+      t88 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: t85, onValueChange: t86, value: t87 });
+      $[127] = t85;
+      $[128] = t86;
+      $[129] = t87;
+      $[130] = t88;
+    } else {
+      t88 = $[130];
+    }
     let t89;
+    if ($[131] === Symbol.for("react.memo_cache_sentinel")) {
+      t89 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Include the JSON representation of the document." });
+      $[131] = t89;
+    } else {
+      t89 = $[131];
+    }
     let t90;
-    if ($[127] === Symbol.for("react.memo_cache_sentinel")) {
-      t88 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: "Document ID is generated automatically" });
-      t89 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: "Users must define an ID" });
-      t90 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
-      $[127] = t88;
-      $[128] = t89;
-      $[129] = t90;
-    } else {
-      t88 = $[127];
-      t89 = $[128];
-      t90 = $[129];
-    }
-    let t91;
-    if ($[130] !== t85 || $[131] !== t86 || $[132] !== t87) {
-      t91 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t85, onValueChange: t86, value: t87, renderValue: _temp3$4, children: [
+    if ($[132] !== t88) {
+      t90 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
         t88,
-        t89,
-        t90
-      ] }) });
-      $[130] = t85;
-      $[131] = t86;
-      $[132] = t87;
-      $[133] = t91;
+        t89
+      ] });
+      $[132] = t88;
+      $[133] = t90;
     } else {
-      t91 = $[133];
+      t90 = $[133];
     }
+    const t91 = customIdValue === "code_defined";
     let t92;
     if ($[134] !== setFieldValue) {
-      t92 = (v_1) => setFieldValue("collectionGroup", v_1);
+      t92 = (v_1) => {
+        if (v_1 === "code_defined") {
+          throw new Error("This should not happen");
+        }
+        setFieldValue("customId", v_1);
+      };
       $[134] = setFieldValue;
       $[135] = t92;
     } else {
       t92 = $[135];
     }
-    const t93 = values.collectionGroup ?? false;
+    const t93 = customIdValue ?? "";
     let t94;
-    if ($[136] !== t92 || $[137] !== t93) {
-      t94 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t92, value: t93 });
-      $[136] = t92;
-      $[137] = t93;
-      $[138] = t94;
-    } else {
-      t94 = $[138];
-    }
     let t95;
-    if ($[139] === Symbol.for("react.memo_cache_sentinel")) {
-      t95 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
-      $[139] = t95;
-    } else {
-      t95 = $[139];
-    }
     let t96;
-    if ($[140] !== t94) {
-      t96 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-4", children: [
+    if ($[136] === Symbol.for("react.memo_cache_sentinel")) {
+      t94 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: "Document ID is generated automatically" });
+      t95 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: "Users must define an ID" });
+      t96 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
+      $[136] = t94;
+      $[137] = t95;
+      $[138] = t96;
+    } else {
+      t94 = $[136];
+      t95 = $[137];
+      t96 = $[138];
+    }
+    let t97;
+    if ($[139] !== t91 || $[140] !== t92 || $[141] !== t93) {
+      t97 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t91, onValueChange: t92, value: t93, renderValue: _temp3$4, children: [
         t94,
-        t95
-      ] });
-      $[140] = t94;
-      $[141] = t96;
+        t95,
+        t96
+      ] }) });
+      $[139] = t91;
+      $[140] = t92;
+      $[141] = t93;
+      $[142] = t97;
     } else {
-      t96 = $[141];
+      t97 = $[142];
     }
-    let t97;
-    if ($[142] !== setFieldValue) {
-      t97 = (v_2) => setFieldValue("textSearchEnabled", v_2);
-      $[142] = setFieldValue;
-      $[143] = t97;
-    } else {
-      t97 = $[143];
-    }
-    const t98 = values.textSearchEnabled ?? false;
-    let t99;
-    if ($[144] !== t97 || $[145] !== t98) {
-      t99 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t97, value: t98 });
-      $[144] = t97;
-      $[145] = t98;
-      $[146] = t99;
+    let t98;
+    if ($[143] !== setFieldValue) {
+      t98 = (v_2) => setFieldValue("collectionGroup", v_2);
+      $[143] = setFieldValue;
+      $[144] = t98;
     } else {
-      t99 = $[146];
+      t98 = $[144];
     }
+    const t99 = values.collectionGroup ?? false;
     let t100;
-    if ($[147] === Symbol.for("react.memo_cache_sentinel")) {
-      t100 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+    if ($[145] !== t98 || $[146] !== t99) {
+      t100 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t98, value: t99 });
+      $[145] = t98;
+      $[146] = t99;
       $[147] = t100;
     } else {
       t100 = $[147];
     }
     let t101;
-    if ($[148] !== t99) {
-      t101 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t99,
-        t100
-      ] });
-      $[148] = t99;
-      $[149] = t101;
+    if ($[148] === Symbol.for("react.memo_cache_sentinel")) {
+      t101 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
+      $[148] = t101;
     } else {
-      t101 = $[149];
+      t101 = $[148];
     }
     let t102;
-    if ($[150] !== t101 || $[151] !== t54 || $[152] !== t62 || $[153] !== t74 || $[154] !== t81 || $[155] !== t84 || $[156] !== t91 || $[157] !== t96) {
-      t102 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
+    if ($[149] !== t100) {
+      t102 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-4", children: [
+        t100,
+        t101
+      ] });
+      $[149] = t100;
+      $[150] = t102;
+    } else {
+      t102 = $[150];
+    }
+    let t103;
+    if ($[151] !== setFieldValue) {
+      t103 = (v_3) => setFieldValue("textSearchEnabled", v_3);
+      $[151] = setFieldValue;
+      $[152] = t103;
+    } else {
+      t103 = $[152];
+    }
+    const t104 = values.textSearchEnabled ?? false;
+    let t105;
+    if ($[153] !== t103 || $[154] !== t104) {
+      t105 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t103, value: t104 });
+      $[153] = t103;
+      $[154] = t104;
+      $[155] = t105;
+    } else {
+      t105 = $[155];
+    }
+    let t106;
+    if ($[156] === Symbol.for("react.memo_cache_sentinel")) {
+      t106 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+      $[156] = t106;
+    } else {
+      t106 = $[156];
+    }
+    let t107;
+    if ($[157] !== t105) {
+      t107 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t105,
+        t106
+      ] });
+      $[157] = t105;
+      $[158] = t107;
+    } else {
+      t107 = $[158];
+    }
+    let t108;
+    if ($[159] !== t102 || $[160] !== t107 || $[161] !== t54 || $[162] !== t62 || $[163] !== t74 || $[164] !== t81 || $[165] !== t84 || $[166] !== t90 || $[167] !== t97) {
+      t108 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
         t54,
         t62,
         t74,
         t81,
         t84,
-        t91,
-        t96,
-        t101
+        t90,
+        t97,
+        t102,
+        t107
       ] });
-      $[150] = t101;
-      $[151] = t54;
-      $[152] = t62;
-      $[153] = t74;
-      $[154] = t81;
-      $[155] = t84;
-      $[156] = t91;
-      $[157] = t96;
-      $[158] = t102;
-    } else {
-      t102 = $[158];
+      $[159] = t102;
+      $[160] = t107;
+      $[161] = t54;
+      $[162] = t62;
+      $[163] = t74;
+      $[164] = t81;
+      $[165] = t84;
+      $[166] = t90;
+      $[167] = t97;
+      $[168] = t108;
+    } else {
+      t108 = $[168];
     }
-    let t103;
-    if ($[159] !== advancedPanelExpanded || $[160] !== t102) {
-      t103 = /* @__PURE__ */ jsxRuntime.jsx(ui.ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t47, initiallyExpanded: false, children: t102 });
-      $[159] = advancedPanelExpanded;
-      $[160] = t102;
-      $[161] = t103;
-    } else {
-      t103 = $[161];
-    }
-    let t104;
-    if ($[162] !== children || $[163] !== t103) {
-      t104 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-8", children: [
-        t103,
+    let t109;
+    if ($[169] !== advancedPanelExpanded || $[170] !== t108) {
+      t109 = /* @__PURE__ */ jsxRuntime.jsx(ui.ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t47, initiallyExpanded: false, children: t108 });
+      $[169] = advancedPanelExpanded;
+      $[170] = t108;
+      $[171] = t109;
+    } else {
+      t109 = $[171];
+    }
+    let t110;
+    if ($[172] !== children || $[173] !== t109) {
+      t110 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-8", children: [
+        t109,
         children
       ] });
-      $[162] = children;
-      $[163] = t103;
-      $[164] = t104;
+      $[172] = children;
+      $[173] = t109;
+      $[174] = t110;
     } else {
-      t104 = $[164];
+      t110 = $[174];
     }
-    let t105;
-    if ($[165] !== t104 || $[166] !== t27 || $[167] !== t36 || $[168] !== t37 || $[169] !== t40 || $[170] !== t46) {
-      t105 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t19, children: [
+    let t111;
+    if ($[175] !== t110 || $[176] !== t27 || $[177] !== t36 || $[178] !== t37 || $[179] !== t40 || $[180] !== t46) {
+      t111 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t19, children: [
         t27,
         t36,
         t37,
         t40,
         t46,
-        t104
+        t110
       ] });
-      $[165] = t104;
-      $[166] = t27;
-      $[167] = t36;
-      $[168] = t37;
-      $[169] = t40;
-      $[170] = t46;
-      $[171] = t105;
-    } else {
-      t105 = $[171];
-    }
-    let t106;
-    if ($[172] === Symbol.for("react.memo_cache_sentinel")) {
-      t106 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      $[175] = t110;
+      $[176] = t27;
+      $[177] = t36;
+      $[178] = t37;
+      $[179] = t40;
+      $[180] = t46;
+      $[181] = t111;
+    } else {
+      t111 = $[181];
+    }
+    let t112;
+    if ($[182] === Symbol.for("react.memo_cache_sentinel")) {
+      t112 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
         height: "52px"
       } });
-      $[172] = t106;
+      $[182] = t112;
     } else {
-      t106 = $[172];
+      t112 = $[182];
     }
-    let t107;
-    if ($[173] !== setFieldValue) {
-      t107 = (icon) => {
+    let t113;
+    if ($[183] !== setFieldValue) {
+      t113 = (icon) => {
         setIconDialogOpen(false);
         setFieldValue("icon", icon);
       };
-      $[173] = setFieldValue;
-      $[174] = t107;
+      $[183] = setFieldValue;
+      $[184] = t113;
     } else {
-      t107 = $[174];
+      t113 = $[184];
     }
-    let t108;
-    if ($[175] !== t107 || $[176] !== values.icon) {
-      t108 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(core.SearchIconsView, { selectedIcon: values.icon, onIconSelected: t107 }) });
-      $[175] = t107;
-      $[176] = values.icon;
-      $[177] = t108;
+    let t114;
+    if ($[185] !== t113 || $[186] !== values.icon) {
+      t114 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(core.SearchIconsView, { selectedIcon: values.icon, onIconSelected: t113 }) });
+      $[185] = t113;
+      $[186] = values.icon;
+      $[187] = t114;
     } else {
-      t108 = $[177];
+      t114 = $[187];
     }
-    let t109;
-    if ($[178] !== iconDialogOpen || $[179] !== t108) {
-      t109 = /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t108 });
-      $[178] = iconDialogOpen;
-      $[179] = t108;
-      $[180] = t109;
+    let t115;
+    if ($[188] !== iconDialogOpen || $[189] !== t114) {
+      t115 = /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t114 });
+      $[188] = iconDialogOpen;
+      $[189] = t114;
+      $[190] = t115;
     } else {
-      t109 = $[180];
+      t115 = $[190];
     }
-    let t110;
-    if ($[181] !== T0 || $[182] !== t105 || $[183] !== t109 || $[184] !== t18) {
-      t110 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t7, children: /* @__PURE__ */ jsxRuntime.jsxs(T0, { maxWidth: t8, className: t9, children: [
+    let t116;
+    if ($[191] !== T0 || $[192] !== t111 || $[193] !== t115 || $[194] !== t18) {
+      t116 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t7, children: /* @__PURE__ */ jsxRuntime.jsxs(T0, { maxWidth: t8, className: t9, children: [
         t18,
-        t105,
-        t106,
-        t109
+        t111,
+        t112,
+        t115
       ] }) });
-      $[181] = T0;
-      $[182] = t105;
-      $[183] = t109;
-      $[184] = t18;
-      $[185] = t110;
+      $[191] = T0;
+      $[192] = t111;
+      $[193] = t115;
+      $[194] = t18;
+      $[195] = t116;
     } else {
-      t110 = $[185];
+      t116 = $[195];
     }
-    return t110;
+    return t116;
   }
   function _temp3$4(value_3) {
     if (value_3 === "code_defined") {
@@ -2738,7 +2778,7 @@
     return t19;
   }
   const PropertyTree = React.memo(function PropertyTree2(t0) {
-    const $ = reactCompilerRuntime.c(26);
+    const $ = reactCompilerRuntime.c(37);
     const {
       namespace,
       selectedPropertyKey,
@@ -2764,94 +2804,152 @@
     }
     const propertiesOrder = t1;
     let t2;
-    if ($[3] !== namespace || $[4] !== onPropertyMove || $[5] !== propertiesOrder) {
-      t2 = (result) => {
-        if (!result.destination) {
-          return;
-        }
-        const startIndex = result.source.index;
-        const endIndex = result.destination.index;
-        const newPropertiesOrder = Array.from(propertiesOrder);
-        const [removed] = newPropertiesOrder.splice(startIndex, 1);
-        newPropertiesOrder.splice(endIndex, 0, removed);
-        if (onPropertyMove) {
-          onPropertyMove(newPropertiesOrder, namespace);
+    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = {
+        activationConstraint: {
+          distance: 5
         }
       };
-      $[3] = namespace;
-      $[4] = onPropertyMove;
-      $[5] = propertiesOrder;
-      $[6] = t2;
+      $[3] = t2;
     } else {
-      t2 = $[6];
+      t2 = $[3];
     }
-    const onDragEnd = t2;
-    const t3 = `droppable_${namespace}`;
+    let t3;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = {
+        coordinateGetter: sortable.sortableKeyboardCoordinates
+      };
+      $[4] = t3;
+    } else {
+      t3 = $[4];
+    }
+    const sensors = core$1.useSensors(core$1.useSensor(core$1.PointerSensor, t2), core$1.useSensor(core$1.KeyboardSensor, t3));
     let t4;
-    if ($[7] !== additionalFields || $[8] !== className || $[9] !== collectionEditable || $[10] !== errors || $[11] !== inferredPropertyKeys || $[12] !== namespace || $[13] !== onPropertyClick || $[14] !== onPropertyMove || $[15] !== onPropertyRemove || $[16] !== properties || $[17] !== propertiesOrder || $[18] !== selectedPropertyKey) {
-      t4 = (droppableProvided, droppableSnapshot) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ...droppableProvided.droppableProps, ref: droppableProvided.innerRef, className, children: [
-        propertiesOrder && propertiesOrder.map((propertyKey, index) => {
-          const property = properties[propertyKey];
-          const additionalField = additionalFields?.find((field) => field.key === propertyKey);
-          if (!property && !additionalField) {
-            console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
-            return null;
+    if ($[5] !== namespace || $[6] !== onPropertyMove || $[7] !== propertiesOrder) {
+      t4 = (event) => {
+        const {
+          active,
+          over
+        } = event;
+        if (!over || active.id === over.id) {
+          return;
+        }
+        const activeId = String(active.id);
+        const overId = String(over.id);
+        const activeKey = activeId.includes(".") ? activeId.split(".").pop() : activeId;
+        const overKey = overId.includes(".") ? overId.split(".").pop() : overId;
+        if (!activeKey || !overKey) {
+          return;
+        }
+        const oldIndex = propertiesOrder.indexOf(activeKey);
+        const newIndex = propertiesOrder.indexOf(overKey);
+        if (oldIndex !== -1 && newIndex !== -1) {
+          const newPropertiesOrder = [...propertiesOrder];
+          const [removed] = newPropertiesOrder.splice(oldIndex, 1);
+          newPropertiesOrder.splice(newIndex, 0, removed);
+          if (onPropertyMove) {
+            onPropertyMove(newPropertiesOrder, namespace);
           }
-          return /* @__PURE__ */ jsxRuntime.jsx(dnd.Draggable, { draggableId: `array_field_${namespace}_${propertyKey}}`, index, children: (provided, snapshot) => /* @__PURE__ */ jsxRuntime.jsx(core.ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(PropertyTreeEntry, { propertyKey, propertyOrBuilder: property, additionalField, provided, errors, namespace, inferredPropertyKeys, onPropertyMove, onPropertyRemove, onPropertyClick: snapshot.isDragging ? void 0 : onPropertyClick, selectedPropertyKey, collectionEditable }) }) }, `array_field_${namespace}_${propertyKey}}`);
-        }).filter(Boolean),
-        droppableProvided.placeholder
-      ] });
-      $[7] = additionalFields;
-      $[8] = className;
-      $[9] = collectionEditable;
-      $[10] = errors;
-      $[11] = inferredPropertyKeys;
-      $[12] = namespace;
-      $[13] = onPropertyClick;
-      $[14] = onPropertyMove;
-      $[15] = onPropertyRemove;
-      $[16] = properties;
-      $[17] = propertiesOrder;
-      $[18] = selectedPropertyKey;
-      $[19] = t4;
-    } else {
-      t4 = $[19];
+        }
+      };
+      $[5] = namespace;
+      $[6] = onPropertyMove;
+      $[7] = propertiesOrder;
+      $[8] = t4;
+    } else {
+      t4 = $[8];
     }
+    const handleDragEnd = t4;
     let t5;
-    if ($[20] !== t3 || $[21] !== t4) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(dnd.Droppable, { droppableId: t3, children: t4 });
-      $[20] = t3;
-      $[21] = t4;
-      $[22] = t5;
+    if ($[9] !== namespace || $[10] !== propertiesOrder) {
+      let t62;
+      if ($[12] !== namespace) {
+        t62 = (key) => getFullId(key, namespace);
+        $[12] = namespace;
+        $[13] = t62;
+      } else {
+        t62 = $[13];
+      }
+      t5 = propertiesOrder.map(t62);
+      $[9] = namespace;
+      $[10] = propertiesOrder;
+      $[11] = t5;
     } else {
-      t5 = $[22];
+      t5 = $[11];
     }
+    const items = t5;
     let t6;
-    if ($[23] !== onDragEnd || $[24] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(dnd.DragDropContext, { onDragEnd, children: t5 }) });
-      $[23] = onDragEnd;
-      $[24] = t5;
-      $[25] = t6;
+    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = [modifiers.restrictToVerticalAxis];
+      $[14] = t6;
     } else {
-      t6 = $[25];
+      t6 = $[14];
     }
-    return t6;
-  }, (prevProps, nextProps) => {
-    const isSelected = nextProps.selectedPropertyKey?.startsWith(nextProps.namespace ?? "");
-    const wasSelected = prevProps.selectedPropertyKey?.startsWith(prevProps.namespace ?? "");
-    if (isSelected || wasSelected) return false;
-    return equal(prevProps.properties, nextProps.properties) && prevProps.propertiesOrder === nextProps.propertiesOrder && equal(prevProps.additionalFields, nextProps.additionalFields) && equal(prevProps.errors, nextProps.errors) && equal(prevProps.onPropertyClick, nextProps.onPropertyClick) && // equal(prevProps.onPropertyMove, nextProps.onPropertyMove) &&
-    // equal(prevProps.onPropertyRemove, nextProps.onPropertyRemove) &&
-    prevProps.namespace === nextProps.namespace && prevProps.collectionEditable === nextProps.collectionEditable;
-  });
+    let t7;
+    if ($[15] !== additionalFields || $[16] !== collectionEditable || $[17] !== errors || $[18] !== inferredPropertyKeys || $[19] !== namespace || $[20] !== onPropertyClick || $[21] !== onPropertyMove || $[22] !== onPropertyRemove || $[23] !== properties || $[24] !== propertiesOrder || $[25] !== selectedPropertyKey) {
+      t7 = propertiesOrder && propertiesOrder.map((propertyKey, index) => {
+        const property = properties[propertyKey];
+        const additionalField = additionalFields?.find((field) => field.key === propertyKey);
+        if (!property && !additionalField) {
+          console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
+          return null;
+        }
+        const id = getFullId(propertyKey, namespace);
+        return /* @__PURE__ */ jsxRuntime.jsx(PropertyTreeEntry, { id, propertyKey, propertyOrBuilder: property, additionalField, errors, namespace, inferredPropertyKeys, onPropertyMove, onPropertyRemove, onPropertyClick, selectedPropertyKey, collectionEditable }, id);
+      }).filter(Boolean);
+      $[15] = additionalFields;
+      $[16] = collectionEditable;
+      $[17] = errors;
+      $[18] = inferredPropertyKeys;
+      $[19] = namespace;
+      $[20] = onPropertyClick;
+      $[21] = onPropertyMove;
+      $[22] = onPropertyRemove;
+      $[23] = properties;
+      $[24] = propertiesOrder;
+      $[25] = selectedPropertyKey;
+      $[26] = t7;
+    } else {
+      t7 = $[26];
+    }
+    let t8;
+    if ($[27] !== className || $[28] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: t7 });
+      $[27] = className;
+      $[28] = t7;
+      $[29] = t8;
+    } else {
+      t8 = $[29];
+    }
+    let t9;
+    if ($[30] !== items || $[31] !== t8) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items, strategy: sortable.verticalListSortingStrategy, children: t8 });
+      $[30] = items;
+      $[31] = t8;
+      $[32] = t9;
+    } else {
+      t9 = $[32];
+    }
+    let t10;
+    if ($[33] !== handleDragEnd || $[34] !== sensors || $[35] !== t9) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { sensors, collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, modifiers: t6, children: t9 });
+      $[33] = handleDragEnd;
+      $[34] = sensors;
+      $[35] = t9;
+      $[36] = t10;
+    } else {
+      t10 = $[36];
+    }
+    return t10;
+  }, equal);
   function PropertyTreeEntry(t0) {
-    const $ = reactCompilerRuntime.c(53);
+    const $ = reactCompilerRuntime.c(62);
     const {
+      id,
       propertyKey,
       namespace,
       propertyOrBuilder,
       additionalField,
-      provided,
       selectedPropertyKey,
       errors,
       onPropertyClick,
@@ -2861,157 +2959,201 @@
       collectionEditable
     } = t0;
     let t1;
-    if ($[0] !== inferredPropertyKeys || $[1] !== namespace || $[2] !== propertyKey) {
-      t1 = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
-      $[0] = inferredPropertyKeys;
-      $[1] = namespace;
-      $[2] = propertyKey;
-      $[3] = t1;
+    if ($[0] !== id) {
+      t1 = {
+        id
+      };
+      $[0] = id;
+      $[1] = t1;
     } else {
-      t1 = $[3];
+      t1 = $[1];
     }
-    const isPropertyInferred = t1;
+    const {
+      attributes,
+      listeners,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging
+    } = sortable.useSortable(t1);
     let t2;
-    if ($[4] !== namespace || $[5] !== propertyKey) {
-      t2 = getFullId(propertyKey, namespace);
-      $[4] = namespace;
-      $[5] = propertyKey;
-      $[6] = t2;
+    if ($[2] !== transform) {
+      t2 = utilities.CSS.Translate.toString(transform);
+      $[2] = transform;
+      $[3] = t2;
     } else {
-      t2 = $[6];
+      t2 = $[3];
+    }
+    const t3 = isDragging ? 10 : void 0;
+    let t4;
+    if ($[4] !== t2 || $[5] !== t3 || $[6] !== transition) {
+      t4 = {
+        transform: t2,
+        transition,
+        zIndex: t3,
+        position: "relative"
+      };
+      $[4] = t2;
+      $[5] = t3;
+      $[6] = transition;
+      $[7] = t4;
+    } else {
+      t4 = $[7];
     }
-    const fullId = t2;
+    const style = t4;
+    let t5;
+    if ($[8] !== inferredPropertyKeys || $[9] !== namespace || $[10] !== propertyKey) {
+      t5 = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
+      $[8] = inferredPropertyKeys;
+      $[9] = namespace;
+      $[10] = propertyKey;
+      $[11] = t5;
+    } else {
+      t5 = $[11];
+    }
+    const isPropertyInferred = t5;
+    const fullId = id;
     const fullIdPath = getFullIdPath(propertyKey, namespace);
     const hasError = fullIdPath in errors;
     let subtree;
     if (typeof propertyOrBuilder === "object") {
       const property = propertyOrBuilder;
       if (property.dataType === "map" && property.properties) {
-        let t32;
-        if ($[7] !== collectionEditable || $[8] !== errors || $[9] !== fullId || $[10] !== onPropertyClick || $[11] !== onPropertyMove || $[12] !== onPropertyRemove || $[13] !== property.properties || $[14] !== property.propertiesOrder || $[15] !== selectedPropertyKey) {
-          t32 = /* @__PURE__ */ jsxRuntime.jsx(PropertyTree, { selectedPropertyKey, namespace: fullId, properties: property.properties, propertiesOrder: property.propertiesOrder, errors, onPropertyClick, onPropertyMove, onPropertyRemove, collectionEditable });
-          $[7] = collectionEditable;
-          $[8] = errors;
-          $[9] = fullId;
-          $[10] = onPropertyClick;
-          $[11] = onPropertyMove;
-          $[12] = onPropertyRemove;
-          $[13] = property.properties;
-          $[14] = property.propertiesOrder;
-          $[15] = selectedPropertyKey;
-          $[16] = t32;
+        let t62;
+        if ($[12] !== collectionEditable || $[13] !== errors || $[14] !== fullId || $[15] !== onPropertyClick || $[16] !== onPropertyMove || $[17] !== onPropertyRemove || $[18] !== property.properties || $[19] !== property.propertiesOrder || $[20] !== selectedPropertyKey) {
+          t62 = /* @__PURE__ */ jsxRuntime.jsx(PropertyTree, { selectedPropertyKey, namespace: fullId, properties: property.properties, propertiesOrder: property.propertiesOrder, errors, onPropertyClick, onPropertyMove, onPropertyRemove, collectionEditable });
+          $[12] = collectionEditable;
+          $[13] = errors;
+          $[14] = fullId;
+          $[15] = onPropertyClick;
+          $[16] = onPropertyMove;
+          $[17] = onPropertyRemove;
+          $[18] = property.properties;
+          $[19] = property.propertiesOrder;
+          $[20] = selectedPropertyKey;
+          $[21] = t62;
         } else {
-          t32 = $[16];
+          t62 = $[21];
         }
-        subtree = t32;
+        subtree = t62;
       }
     }
     const selected = selectedPropertyKey === fullId;
-    let t3;
-    if ($[17] !== collectionEditable || $[18] !== propertyOrBuilder) {
-      t3 = propertyOrBuilder && (collectionEditable && !core.isPropertyBuilder(propertyOrBuilder) || editableProperty(propertyOrBuilder));
-      $[17] = collectionEditable;
-      $[18] = propertyOrBuilder;
-      $[19] = t3;
+    let t6;
+    if ($[22] !== collectionEditable || $[23] !== propertyOrBuilder) {
+      t6 = propertyOrBuilder && (collectionEditable && !core.isPropertyBuilder(propertyOrBuilder) || editableProperty(propertyOrBuilder));
+      $[22] = collectionEditable;
+      $[23] = propertyOrBuilder;
+      $[24] = t6;
     } else {
-      t3 = $[19];
+      t6 = $[24];
     }
-    const editable = t3;
-    let t4;
-    if ($[20] !== subtree) {
-      t4 = subtree && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute border-l " + ui.defaultBorderMixin, style: {
+    const editable = t6;
+    let t7;
+    if ($[25] !== subtree) {
+      t7 = subtree && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute border-l " + ui.defaultBorderMixin, style: {
         left: "32px",
         top: "64px",
         bottom: "16px"
       } });
-      $[20] = subtree;
-      $[21] = t4;
+      $[25] = subtree;
+      $[26] = t7;
     } else {
-      t4 = $[21];
+      t7 = $[26];
     }
-    let t5;
-    if ($[22] !== additionalField || $[23] !== editable || $[24] !== hasError || $[25] !== namespace || $[26] !== onPropertyClick || $[27] !== propertyKey || $[28] !== propertyOrBuilder || $[29] !== selected) {
-      t5 = !core.isPropertyBuilder(propertyOrBuilder) && !additionalField && editable ? /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldPreview, { property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, includeName: true, selected, hasError }) : /* @__PURE__ */ jsxRuntime.jsx(NonEditablePropertyPreview, { name: propertyKey, property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, selected });
-      $[22] = additionalField;
-      $[23] = editable;
-      $[24] = hasError;
-      $[25] = namespace;
-      $[26] = onPropertyClick;
-      $[27] = propertyKey;
-      $[28] = propertyOrBuilder;
-      $[29] = selected;
-      $[30] = t5;
-    } else {
-      t5 = $[30];
+    let t8;
+    if ($[27] !== additionalField || $[28] !== editable || $[29] !== hasError || $[30] !== namespace || $[31] !== onPropertyClick || $[32] !== propertyKey || $[33] !== propertyOrBuilder || $[34] !== selected) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx("div", { children: !core.isPropertyBuilder(propertyOrBuilder) && !additionalField && editable ? /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldPreview, { property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, includeName: true, selected, hasError }) : /* @__PURE__ */ jsxRuntime.jsx(NonEditablePropertyPreview, { name: propertyKey, property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, selected }) });
+      $[27] = additionalField;
+      $[28] = editable;
+      $[29] = hasError;
+      $[30] = namespace;
+      $[31] = onPropertyClick;
+      $[32] = propertyKey;
+      $[33] = propertyOrBuilder;
+      $[34] = selected;
+      $[35] = t8;
+    } else {
+      t8 = $[35];
     }
-    let t6;
-    if ($[31] !== isPropertyInferred) {
-      t6 = isPropertyInferred && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Inferred property", children: /* @__PURE__ */ jsxRuntime.jsx(ui.AutorenewIcon, { size: "small", className: "p-2" }) });
-      $[31] = isPropertyInferred;
-      $[32] = t6;
+    let t9;
+    if ($[36] !== isPropertyInferred) {
+      t9 = isPropertyInferred && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Inferred property", children: /* @__PURE__ */ jsxRuntime.jsx(ui.AutorenewIcon, { size: "small", className: "p-2" }) });
+      $[36] = isPropertyInferred;
+      $[37] = t9;
     } else {
-      t6 = $[32];
+      t9 = $[37];
     }
-    let t7;
-    if ($[33] !== namespace || $[34] !== onPropertyRemove || $[35] !== propertyKey) {
-      t7 = onPropertyRemove && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Remove", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", color: "inherit", onClick: () => onPropertyRemove(propertyKey, namespace), children: /* @__PURE__ */ jsxRuntime.jsx(ui.RemoveIcon, { size: "small" }) }) });
-      $[33] = namespace;
-      $[34] = onPropertyRemove;
-      $[35] = propertyKey;
-      $[36] = t7;
+    let t10;
+    if ($[38] !== isPropertyInferred || $[39] !== namespace || $[40] !== onPropertyRemove || $[41] !== propertyKey) {
+      t10 = onPropertyRemove && !isPropertyInferred && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Remove", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", color: "inherit", onClick: () => onPropertyRemove(propertyKey, namespace), children: /* @__PURE__ */ jsxRuntime.jsx(ui.RemoveIcon, { size: "small" }) }) });
+      $[38] = isPropertyInferred;
+      $[39] = namespace;
+      $[40] = onPropertyRemove;
+      $[41] = propertyKey;
+      $[42] = t10;
     } else {
-      t7 = $[36];
+      t10 = $[42];
     }
-    let t8;
-    if ($[37] !== onPropertyMove) {
-      t8 = onPropertyMove && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Move", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { component: "span", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ui.DragHandleIcon, { size: "small" }) }) });
-      $[37] = onPropertyMove;
-      $[38] = t8;
+    let t11;
+    if ($[43] !== attributes || $[44] !== listeners || $[45] !== onPropertyMove) {
+      t11 = onPropertyMove && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Move", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { component: "span", size: "small", ...attributes, ...listeners, children: /* @__PURE__ */ jsxRuntime.jsx(ui.DragHandleIcon, { size: "small" }) }) });
+      $[43] = attributes;
+      $[44] = listeners;
+      $[45] = onPropertyMove;
+      $[46] = t11;
     } else {
-      t8 = $[38];
+      t11 = $[46];
     }
-    let t9;
-    if ($[39] !== t6 || $[40] !== t7 || $[41] !== t8) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 flex flex-row ", children: [
-        t6,
-        t7,
-        t8
+    let t12;
+    if ($[47] !== t10 || $[48] !== t11 || $[49] !== t9) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 flex flex-row", children: [
+        t9,
+        t10,
+        t11
       ] });
-      $[39] = t6;
-      $[40] = t7;
-      $[41] = t8;
-      $[42] = t9;
+      $[47] = t10;
+      $[48] = t11;
+      $[49] = t9;
+      $[50] = t12;
     } else {
-      t9 = $[42];
+      t12 = $[50];
     }
-    let t10;
-    if ($[43] !== subtree) {
-      t10 = subtree && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-16", children: subtree });
-      $[43] = subtree;
-      $[44] = t10;
+    let t13;
+    if ($[51] !== subtree) {
+      t13 = subtree && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-16", children: subtree });
+      $[51] = subtree;
+      $[52] = t13;
     } else {
-      t10 = $[44];
+      t13 = $[52];
     }
-    let t11;
-    if ($[45] !== provided.dragHandleProps || $[46] !== provided.draggableProps || $[47] !== provided.innerRef || $[48] !== t10 || $[49] !== t4 || $[50] !== t5 || $[51] !== t9) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, className: "relative -ml-8", children: [
-        t4,
-        t5,
-        t9,
-        t10
+    let t14;
+    if ($[53] !== t12 || $[54] !== t13 || $[55] !== t7 || $[56] !== t8) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        t7,
+        t8,
+        t12,
+        t13
       ] });
-      $[45] = provided.dragHandleProps;
-      $[46] = provided.draggableProps;
-      $[47] = provided.innerRef;
-      $[48] = t10;
-      $[49] = t4;
-      $[50] = t5;
-      $[51] = t9;
-      $[52] = t11;
+      $[53] = t12;
+      $[54] = t13;
+      $[55] = t7;
+      $[56] = t8;
+      $[57] = t14;
     } else {
-      t11 = $[52];
+      t14 = $[57];
     }
-    return t11;
+    let t15;
+    if ($[58] !== setNodeRef || $[59] !== style || $[60] !== t14) {
+      t15 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, style, className: "relative -ml-8", children: t14 });
+      $[58] = setNodeRef;
+      $[59] = style;
+      $[60] = t14;
+      $[61] = t15;
+    } else {
+      t15 = $[61];
+    }
+    return t15;
   }
   function MapPropertyField(t0) {
     const $ = reactCompilerRuntime.c(67);
@@ -3225,7 +3367,7 @@
     const t19 = values.spreadChildren ?? false;
     let t20;
     if ($[40] !== t18 || $[41] !== t19) {
-      t20 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "small", label: "Spread children as columns", onValueChange: t18, value: t19 });
+      t20 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "medium", label: "Spread children as columns", onValueChange: t18, value: t19 });
       $[40] = t18;
       $[41] = t19;
       $[42] = t20;
@@ -4697,7 +4839,7 @@
           field,
           form
         } = t22;
-        return /* @__PURE__ */ jsxRuntime.jsx(SwitchControl, { label: "Hide from collection", disabled, form, tooltip: "Hide this field from the collection view. It will still be visible in the form view", field });
+        return /* @__PURE__ */ jsxRuntime.jsx(SwitchControl, { label: "Hide from collection", size: "medium", disabled, form, tooltip: "Hide this field from the collection view. It will still be visible in the form view", field });
       } }) });
       $[0] = disabled;
       $[1] = t1;
@@ -4711,7 +4853,7 @@
           field: field_0,
           form: form_0
         } = t32;
-        return /* @__PURE__ */ jsxRuntime.jsx(SwitchControl, { label: "Read only", disabled, tooltip: "Is this a read only field. Display only as a preview", form: form_0, field: field_0 });
+        return /* @__PURE__ */ jsxRuntime.jsx(SwitchControl, { label: "Read only", size: "medium", disabled, tooltip: "Is this a read only field. Display only as a preview", form: form_0, field: field_0 });
       } }) });
       $[2] = disabled;
       $[3] = t2;