@firecms/collection_editor 3.0.0-beta.12 → 3.0.0-beta.14

package/dist/index.es.js

@@ -1,14 +1,17 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
-import { FieldCaption, SearchIconsView, toSnakeCase, singular, IconForView, ArrayContainer, serializeRegExp, useSnackbarController, resolveEnumValues, isPropertyBuilder, useCustomizationController, getFieldConfig, ErrorBoundary, PropertyConfigBadge, unslugify, useNavigationController, mergeDeep, DEFAULT_FIELD_CONFIGS, getFieldId, isValidRegExp, isEmptyObject, ConfirmationDialog, useLargeLayout, makePropertiesEditable, resolveEntityView, useSelectionController, CircularProgressCenter, EntityCollectionTable, slugify, useAuthController, randomString, removeUndefined, ErrorView, removeInitialAndTrailingSlashes, getDefaultPropertiesOrder, joinCollectionLists } from "@firecms/core";
+import { FieldCaption, SearchIconsView, toSnakeCase, singular, IconForView, ArrayContainer, serializeRegExp, useSnackbarController, resolveEnumValues, isPropertyBuilder, useCustomizationController, getFieldConfig, ErrorBoundary, PropertyConfigBadge, unslugify, useNavigationController, mergeDeep, DEFAULT_FIELD_CONFIGS, getFieldId, isValidRegExp, ConfirmationDialog, isEmptyObject, useLargeLayout, makePropertiesEditable, resolveEntityView, useAuthController, useSelectionController, CircularProgressCenter, EntityCollectionTable, slugify, randomString, removeUndefined, ErrorView, removeInitialAndTrailingSlashes, getDefaultPropertiesOrder, joinCollectionLists } from "@firecms/core";
 import * as React from "react";
 import React__default, { useContext, useState, useEffect, useMemo, useRef, useDeferredValue } from "react";
 import equal from "react-fast-compare";
-import { cls, Typography, VerticalSplitIcon, Tooltip, Card, SquareIcon, useAutoComplete, Chip, TextField, Autocomplete, AutocompleteItem, SelectItem, Container, IconButton, DebouncedTextField, SettingsIcon, CloseIcon, Select, BooleanSwitchWithLabel, ExpandablePanel, Dialog, Badge, AutorenewIcon, ListIcon, Button, CircularProgress, Paper, DialogTitle, DialogContent, DialogActions, RuleIcon, MultiSelectItem, CloudUploadIcon, MultiSelect, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, DoNotDisturbOnIcon, defaultBorderMixin, RemoveIcon, DragHandleIcon, AddIcon, SelectGroup, DeleteIcon, InfoLabel, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, WarningIcon, ContentCopyIcon, CodeIcon, Table, TableBody, TableRow, TableCell, Alert, Icon, coolIconKeys, Tabs, Tab, ArrowBackIcon, LoadingButton, CheckIcon, Menu, MoreVertIcon, MenuItem, UndoIcon, SaveIcon } from "@firecms/ui";
+import { cls, Typography, VerticalSplitIcon, Tooltip, Card, SquareIcon, useAutoComplete, Chip, TextField, Autocomplete, AutocompleteItem, SelectItem, Container, IconButton, DebouncedTextField, BooleanSwitchWithLabel, SettingsIcon, CloseIcon, Select, ExpandablePanel, Dialog, Badge, AutorenewIcon, ListIcon, Button, CircularProgress, Paper, DialogTitle, DialogContent, DialogActions, RuleIcon, MultiSelectItem, CloudUploadIcon, MultiSelect, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, DoNotDisturbOnIcon, DragHandleIcon, defaultBorderMixin, RemoveIcon, AddIcon, SelectGroup, DeleteIcon, InfoLabel, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, WarningIcon, ContentCopyIcon, CodeIcon, Table, TableBody, TableRow, TableCell, Alert, Icon, coolIconKeys, Tabs, Tab, ArrowBackIcon, LoadingButton, CheckIcon, Menu, MoreVertIcon, MenuItem, UndoIcon, SaveIcon } from "@firecms/ui";
 import * as Yup from "yup";
 import { useFormex, getIn, Field, useCreateFormex, Formex, clone } from "@firecms/formex";
 import { extractEnumFromValues, buildPropertyFromData, buildEntityPropertiesFromData } from "@firecms/schema_inference";
-import { Draggable, Droppable, DragDropContext } from "@hello-pangea/dnd";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { useSortable, sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { CSS } from "@dnd-kit/utilities";
 import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer";
 import { ImportFileUpload, getInferenceType, ImportNewPropertyFieldPreview, DataNewPropertiesMapping, convertDataToEntity, useImportConfig, ImportSaveInProgress } from "@firecms/data_import_export";
@@ -162,7 +165,7 @@ function LayoutModeSwitch(t0) {
   return t18;
 }
 function CollectionDetailsForm(t0) {
-  const $ = c(176);
+  const $ = c(196);
   const {
     isNewCollection,
     reservedGroups,
@@ -444,7 +447,7 @@ function CollectionDetailsForm(t0) {
   }
   const t37 = !isSubcollection && /* @__PURE__ */ jsxs("div", { className: "col-span-12 sm:col-span-4 relative", children: [
     /* @__PURE__ */ jsx(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__ */ jsx(Autocomplete, { open: autoCompleteOpen && (groupOptions ?? []).length > 0, setOpen: setAutoCompleteOpen, children: groupOptions?.map((group_0, index) => /* @__PURE__ */ jsx(AutocompleteItem, { onClick: () => {
+    /* @__PURE__ */ jsx(Autocomplete, { open: autoCompleteOpen && (groupOptions ?? []).length > 0, setOpen: setAutoCompleteOpen, children: groupOptions?.map((group_0, index) => /* @__PURE__ */ jsx(AutocompleteItem, { className: "pr-6 pl-14", onClick: () => {
       setAutoCompleteOpen(false);
       setFieldValue("group", group_0 ?? null);
     }, children: /* @__PURE__ */ jsx("div", { className: "flex-grow", children: group_0 }) }, index + "_" + group_0)) }),
@@ -468,101 +471,143 @@ function CollectionDetailsForm(t0) {
   } else {
     t40 = $[58];
   }
-  let t41;
-  if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
-    t41 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
-      /* @__PURE__ */ jsx(SettingsIcon, {}),
-      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "ml-2", children: "Advanced" })
-    ] });
-    $[59] = t41;
-  } else {
-    t41 = $[59];
-  }
-  const t42 = !isNewCollection;
-  const t43 = showErrors && Boolean(errors.id);
-  let t44;
-  if ($[60] !== t42 || $[61] !== t43) {
-    t44 = /* @__PURE__ */ jsx(Field, { name: "id", as: DebouncedTextField, disabled: t42, label: "Collection id", error: t43 });
+  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);
+    $[59] = setFieldValue;
     $[60] = t42;
-    $[61] = t43;
-    $[62] = t44;
   } else {
-    t44 = $[62];
+    t42 = $[60];
   }
-  const t45 = touched.id && Boolean(errors.id);
-  const t46 = touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path.";
-  let t47;
-  if ($[63] !== t45 || $[64] !== t46) {
-    t47 = /* @__PURE__ */ jsx(FieldCaption, { error: t45, children: t46 });
-    $[63] = t45;
-    $[64] = t46;
-    $[65] = t47;
+  const t43 = values.history === void 0 ? null : values.history;
+  let t44;
+  if ($[61] !== t41 || $[62] !== t42 || $[63] !== t43) {
+    t44 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", allowIndeterminate: true, label: t41, onValueChange: t42, value: t43 });
+    $[61] = t41;
+    $[62] = t42;
+    $[63] = t43;
+    $[64] = t44;
+  } else {
+    t44 = $[64];
+  }
+  let t45;
+  if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
+    t45 = /* @__PURE__ */ jsxs(FieldCaption, { children: [
+      "When enabled, each document in this collection will have a history of changes. This is useful for auditing purposes. The data is stored in a subcollection of the document in your database, called ",
+      /* @__PURE__ */ jsx("b", { children: "__history" }),
+      "."
+    ] });
+    $[65] = t45;
   } else {
-    t47 = $[65];
+    t45 = $[65];
   }
-  let t48;
-  if ($[66] !== t44 || $[67] !== t47) {
-    t48 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+  let t46;
+  if ($[66] !== t44) {
+    t46 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
       t44,
-      t47
+      t45
     ] });
     $[66] = t44;
-    $[67] = t47;
-    $[68] = t48;
+    $[67] = t46;
+  } else {
+    t46 = $[67];
+  }
+  let t47;
+  if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
+    t47 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
+      /* @__PURE__ */ jsx(SettingsIcon, {}),
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "ml-2", children: "Advanced" })
+    ] });
+    $[68] = t47;
   } else {
-    t48 = $[68];
+    t47 = $[68];
   }
-  const t49 = showErrors && Boolean(errors.singularName);
+  const t48 = !isNewCollection;
+  const t49 = showErrors && Boolean(errors.id);
   let t50;
-  if ($[69] !== handleChange || $[70] !== setFieldTouched) {
-    t50 = (e_0) => {
-      setFieldTouched("singularName", true);
-      return handleChange(e_0);
-    };
-    $[69] = handleChange;
-    $[70] = setFieldTouched;
+  if ($[69] !== t48 || $[70] !== t49) {
+    t50 = /* @__PURE__ */ jsx(Field, { name: "id", as: DebouncedTextField, disabled: t48, label: "Collection id", error: t49 });
+    $[69] = t48;
+    $[70] = t49;
     $[71] = t50;
   } else {
     t50 = $[71];
   }
-  const t51 = values.singularName ?? "";
-  let t52;
-  if ($[72] !== t49 || $[73] !== t50 || $[74] !== t51) {
-    t52 = /* @__PURE__ */ jsx(TextField, { error: t49, name: "singularName", "aria-describedby": "singularName-helper", onChange: t50, value: t51, label: "Singular name" });
-    $[72] = t49;
-    $[73] = t50;
-    $[74] = t51;
-    $[75] = t52;
-  } else {
-    t52 = $[75];
-  }
-  const t53 = showErrors && Boolean(errors.singularName);
-  const t54 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities";
-  let t55;
-  if ($[76] !== t53 || $[77] !== t54) {
-    t55 = /* @__PURE__ */ jsx(FieldCaption, { error: t53, children: t54 });
+  const t51 = touched.id && Boolean(errors.id);
+  const t52 = touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path.";
+  let t53;
+  if ($[72] !== t51 || $[73] !== t52) {
+    t53 = /* @__PURE__ */ jsx(FieldCaption, { error: t51, children: t52 });
+    $[72] = t51;
+    $[73] = t52;
+    $[74] = t53;
+  } else {
+    t53 = $[74];
+  }
+  let t54;
+  if ($[75] !== t50 || $[76] !== t53) {
+    t54 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t50,
+      t53
+    ] });
+    $[75] = t50;
     $[76] = t53;
     $[77] = t54;
-    $[78] = t55;
   } else {
-    t55 = $[78];
+    t54 = $[77];
   }
+  const t55 = showErrors && Boolean(errors.singularName);
   let t56;
-  if ($[79] !== t52 || $[80] !== t55) {
-    t56 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t52,
-      t55
-    ] });
-    $[79] = t52;
-    $[80] = t55;
-    $[81] = t56;
+  if ($[78] !== handleChange || $[79] !== setFieldTouched) {
+    t56 = (e_0) => {
+      setFieldTouched("singularName", true);
+      return handleChange(e_0);
+    };
+    $[78] = handleChange;
+    $[79] = setFieldTouched;
+    $[80] = t56;
   } else {
-    t56 = $[81];
+    t56 = $[80];
   }
-  const t57 = showErrors && Boolean(errors.sideDialogWidth);
+  const t57 = values.singularName ?? "";
   let t58;
-  if ($[82] !== setFieldTouched || $[83] !== setFieldValue) {
-    t58 = (e_1) => {
+  if ($[81] !== t55 || $[82] !== t56 || $[83] !== t57) {
+    t58 = /* @__PURE__ */ jsx(TextField, { error: t55, name: "singularName", "aria-describedby": "singularName-helper", onChange: t56, value: t57, label: "Singular name" });
+    $[81] = t55;
+    $[82] = t56;
+    $[83] = t57;
+    $[84] = t58;
+  } else {
+    t58 = $[84];
+  }
+  const t59 = showErrors && Boolean(errors.singularName);
+  const t60 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities";
+  let t61;
+  if ($[85] !== t59 || $[86] !== t60) {
+    t61 = /* @__PURE__ */ jsx(FieldCaption, { error: t59, children: t60 });
+    $[85] = t59;
+    $[86] = t60;
+    $[87] = t61;
+  } else {
+    t61 = $[87];
+  }
+  let t62;
+  if ($[88] !== t58 || $[89] !== t61) {
+    t62 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t58,
+      t61
+    ] });
+    $[88] = t58;
+    $[89] = t61;
+    $[90] = t62;
+  } else {
+    t62 = $[90];
+  }
+  const t63 = showErrors && Boolean(errors.sideDialogWidth);
+  let t64;
+  if ($[91] !== setFieldTouched || $[92] !== setFieldValue) {
+    t64 = (e_1) => {
       setFieldTouched("sideDialogWidth", true);
       const value_0 = e_1.target.value;
       if (!value_0) {
@@ -573,371 +618,402 @@ function CollectionDetailsForm(t0) {
         }
       }
     };
-    $[82] = setFieldTouched;
-    $[83] = setFieldValue;
-    $[84] = t58;
+    $[91] = setFieldTouched;
+    $[92] = setFieldValue;
+    $[93] = t64;
   } else {
-    t58 = $[84];
+    t64 = $[93];
   }
-  let t59;
-  if ($[85] !== setFieldValue) {
-    t59 = () => {
+  let t65;
+  if ($[94] !== setFieldValue) {
+    t65 = () => {
       setFieldValue("sideDialogWidth", null);
     };
-    $[85] = setFieldValue;
-    $[86] = t59;
-  } else {
-    t59 = $[86];
-  }
-  const t60 = !values.sideDialogWidth;
-  let t61;
-  if ($[87] === Symbol.for("react.memo_cache_sentinel")) {
-    t61 = /* @__PURE__ */ jsx(CloseIcon, { size: "small" });
-    $[87] = t61;
-  } else {
-    t61 = $[87];
-  }
-  let t62;
-  if ($[88] !== t59 || $[89] !== t60) {
-    t62 = /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: t59, disabled: t60, children: t61 });
-    $[88] = t59;
-    $[89] = t60;
-    $[90] = t62;
+    $[94] = setFieldValue;
+    $[95] = t65;
   } else {
-    t62 = $[90];
+    t65 = $[95];
   }
-  const t63 = values.sideDialogWidth ?? "";
-  let t64;
-  if ($[91] !== t57 || $[92] !== t58 || $[93] !== t62 || $[94] !== t63) {
-    t64 = /* @__PURE__ */ jsx(TextField, { error: t57, name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: t58, endAdornment: t62, value: t63, label: "Side dialog width" });
-    $[91] = t57;
-    $[92] = t58;
-    $[93] = t62;
-    $[94] = t63;
-    $[95] = t64;
-  } else {
-    t64 = $[95];
-  }
-  const t65 = showErrors && Boolean(errors.singularName);
-  const t66 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px";
+  const t66 = !values.sideDialogWidth;
   let t67;
-  if ($[96] !== t65 || $[97] !== t66) {
-    t67 = /* @__PURE__ */ jsx(FieldCaption, { error: t65, children: t66 });
-    $[96] = t65;
-    $[97] = t66;
-    $[98] = t67;
+  if ($[96] === Symbol.for("react.memo_cache_sentinel")) {
+    t67 = /* @__PURE__ */ jsx(CloseIcon, { size: "small" });
+    $[96] = t67;
   } else {
-    t67 = $[98];
+    t67 = $[96];
   }
   let t68;
-  if ($[99] !== t64 || $[100] !== t67) {
-    t68 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t64,
-      t67
-    ] });
-    $[99] = t64;
-    $[100] = t67;
-    $[101] = t68;
-  } else {
-    t68 = $[101];
-  }
-  const t69 = showErrors && Boolean(errors.description);
-  const t70 = values.description ?? "";
-  let t71;
-  if ($[102] !== handleChange || $[103] !== t69 || $[104] !== t70) {
-    t71 = /* @__PURE__ */ jsx(TextField, { error: t69, name: "description", value: t70, onChange: handleChange, multiline: true, rows: 2, "aria-describedby": "description-helper-text", label: "Description" });
-    $[102] = handleChange;
+  if ($[97] !== t65 || $[98] !== t66) {
+    t68 = /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: t65, disabled: t66, children: t67 });
+    $[97] = t65;
+    $[98] = t66;
+    $[99] = t68;
+  } else {
+    t68 = $[99];
+  }
+  const t69 = values.sideDialogWidth ?? "";
+  let t70;
+  if ($[100] !== t63 || $[101] !== t64 || $[102] !== t68 || $[103] !== t69) {
+    t70 = /* @__PURE__ */ jsx(TextField, { error: t63, name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: t64, endAdornment: t68, value: t69, label: "Side dialog width" });
+    $[100] = t63;
+    $[101] = t64;
+    $[102] = t68;
     $[103] = t69;
     $[104] = t70;
-    $[105] = t71;
   } else {
-    t71 = $[105];
+    t70 = $[104];
   }
-  const t72 = showErrors && Boolean(errors.description);
-  const t73 = showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown";
-  let t74;
-  if ($[106] !== t72 || $[107] !== t73) {
-    t74 = /* @__PURE__ */ jsx(FieldCaption, { error: t72, children: t73 });
+  const t71 = showErrors && Boolean(errors.singularName);
+  const t72 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px";
+  let t73;
+  if ($[105] !== t71 || $[106] !== t72) {
+    t73 = /* @__PURE__ */ jsx(FieldCaption, { error: t71, children: t72 });
+    $[105] = t71;
     $[106] = t72;
     $[107] = t73;
-    $[108] = t74;
   } else {
-    t74 = $[108];
+    t73 = $[107];
   }
-  let t75;
-  if ($[109] !== t71 || $[110] !== t74) {
-    t75 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t71,
-      t74
+  let t74;
+  if ($[108] !== t70 || $[109] !== t73) {
+    t74 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t70,
+      t73
     ] });
-    $[109] = t71;
+    $[108] = t70;
+    $[109] = t73;
     $[110] = t74;
-    $[111] = t75;
   } else {
-    t75 = $[111];
+    t74 = $[110];
   }
-  const t76 = values.defaultSize ?? "";
+  const t75 = showErrors && Boolean(errors.description);
+  const t76 = values.description ?? "";
   let t77;
-  if ($[112] === Symbol.for("react.memo_cache_sentinel")) {
-    t77 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
-    $[112] = t77;
-  } else {
-    t77 = $[112];
-  }
-  let t78;
-  if ($[113] !== handleChange || $[114] !== t76) {
-    t78 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(Select, { name: "defaultSize", size: "large", fullWidth: true, label: "Default row size", position: "item-aligned", onChange: handleChange, value: t76, renderValue: _temp$b, children: t77 }) });
-    $[113] = handleChange;
-    $[114] = t76;
-    $[115] = t78;
+  if ($[111] !== handleChange || $[112] !== t75 || $[113] !== t76) {
+    t77 = /* @__PURE__ */ jsx(TextField, { error: t75, name: "description", value: t76, onChange: handleChange, multiline: true, minRows: 2, "aria-describedby": "description-helper-text", label: "Description" });
+    $[111] = handleChange;
+    $[112] = t75;
+    $[113] = t76;
+    $[114] = t77;
   } else {
-    t78 = $[115];
+    t77 = $[114];
   }
-  const t79 = customIdValue === "code_defined";
+  const t78 = showErrors && Boolean(errors.description);
+  const t79 = showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown";
   let t80;
-  if ($[116] !== setFieldValue) {
-    t80 = (v) => {
-      if (v === "code_defined") {
-        throw new Error("This should not happen");
-      } else {
-        if (v === "true") {
-          setFieldValue("customId", true);
-        } else {
-          if (v === "false") {
-            setFieldValue("customId", false);
-          } else {
-            if (v === "optional") {
-              setFieldValue("customId", "optional");
-            }
-          }
-        }
-      }
-    };
-    $[116] = setFieldValue;
+  if ($[115] !== t78 || $[116] !== t79) {
+    t80 = /* @__PURE__ */ jsx(FieldCaption, { error: t78, children: t79 });
+    $[115] = t78;
+    $[116] = t79;
     $[117] = t80;
   } else {
     t80 = $[117];
   }
-  const t81 = customIdValue ?? "";
-  let t82;
+  let t81;
+  if ($[118] !== t77 || $[119] !== t80) {
+    t81 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t77,
+      t80
+    ] });
+    $[118] = t77;
+    $[119] = t80;
+    $[120] = t81;
+  } else {
+    t81 = $[120];
+  }
+  const t82 = values.defaultSize ?? "";
   let t83;
+  if ($[121] === Symbol.for("react.memo_cache_sentinel")) {
+    t83 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
+    $[121] = t83;
+  } else {
+    t83 = $[121];
+  }
   let t84;
-  if ($[118] === Symbol.for("react.memo_cache_sentinel")) {
-    t82 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
-    t83 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
-    t84 = /* @__PURE__ */ jsx(SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
-    $[118] = t82;
-    $[119] = t83;
-    $[120] = t84;
-  } else {
-    t82 = $[118];
-    t83 = $[119];
-    t84 = $[120];
-  }
-  let t85;
-  if ($[121] !== t79 || $[122] !== t80 || $[123] !== t81) {
-    t85 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t79, onValueChange: t80, value: t81, renderValue: _temp3$4, children: [
-      t82,
-      t83,
-      t84
-    ] }) });
-    $[121] = t79;
-    $[122] = t80;
-    $[123] = t81;
-    $[124] = t85;
+  if ($[122] !== handleChange || $[123] !== t82) {
+    t84 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(Select, { name: "defaultSize", size: "large", fullWidth: true, label: "Default row size", position: "item-aligned", onChange: handleChange, value: t82, renderValue: _temp$b, children: t83 }) });
+    $[122] = handleChange;
+    $[123] = t82;
+    $[124] = t84;
   } else {
-    t85 = $[124];
+    t84 = $[124];
   }
+  const t85 = values.includeJsonView === void 0 || values.includeJsonView ? "Include JSON view" : "Do not include JSON view";
   let t86;
   if ($[125] !== setFieldValue) {
-    t86 = (v_0) => setFieldValue("collectionGroup", v_0);
+    t86 = (v_0) => setFieldValue("includeJsonView", v_0);
     $[125] = setFieldValue;
     $[126] = t86;
   } else {
     t86 = $[126];
   }
-  const t87 = values.collectionGroup ?? false;
+  const t87 = values.includeJsonView === void 0 ? true : values.includeJsonView;
   let t88;
-  if ($[127] !== t86 || $[128] !== t87) {
-    t88 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: "Collection group", onValueChange: t86, value: t87 });
-    $[127] = t86;
-    $[128] = t87;
-    $[129] = t88;
+  if ($[127] !== t85 || $[128] !== t86 || $[129] !== t87) {
+    t88 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: t85, onValueChange: t86, value: t87 });
+    $[127] = t85;
+    $[128] = t86;
+    $[129] = t87;
+    $[130] = t88;
   } else {
-    t88 = $[129];
+    t88 = $[130];
   }
   let t89;
-  if ($[130] === Symbol.for("react.memo_cache_sentinel")) {
-    t89 = /* @__PURE__ */ jsx(FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
-    $[130] = t89;
+  if ($[131] === Symbol.for("react.memo_cache_sentinel")) {
+    t89 = /* @__PURE__ */ jsx(FieldCaption, { children: "Include the JSON representation of the document." });
+    $[131] = t89;
   } else {
-    t89 = $[130];
+    t89 = $[131];
   }
   let t90;
-  if ($[131] !== t88) {
+  if ($[132] !== t88) {
     t90 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
       t88,
       t89
     ] });
-    $[131] = t88;
-    $[132] = t90;
+    $[132] = t88;
+    $[133] = t90;
   } else {
-    t90 = $[132];
+    t90 = $[133];
   }
-  let t91;
-  if ($[133] !== setFieldValue) {
-    t91 = (v_1) => setFieldValue("textSearchEnabled", v_1);
-    $[133] = setFieldValue;
-    $[134] = t91;
+  const t91 = customIdValue === "code_defined";
+  let t92;
+  if ($[134] !== setFieldValue) {
+    t92 = (v_1) => {
+      if (v_1 === "code_defined") {
+        throw new Error("This should not happen");
+      }
+      setFieldValue("customId", v_1);
+    };
+    $[134] = setFieldValue;
+    $[135] = t92;
   } else {
-    t91 = $[134];
+    t92 = $[135];
   }
-  const t92 = values.textSearchEnabled ?? false;
-  let t93;
-  if ($[135] !== t91 || $[136] !== t92) {
-    t93 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: "Enable text search for this collection", onValueChange: t91, value: t92 });
-    $[135] = t91;
-    $[136] = t92;
-    $[137] = t93;
+  const t93 = customIdValue ?? "";
+  let t94;
+  let t95;
+  let t96;
+  if ($[136] === Symbol.for("react.memo_cache_sentinel")) {
+    t94 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
+    t95 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
+    t96 = /* @__PURE__ */ jsx(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__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(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,
+      t96
+    ] }) });
+    $[139] = t91;
+    $[140] = t92;
+    $[141] = t93;
+    $[142] = t97;
   } else {
-    t93 = $[137];
+    t97 = $[142];
   }
-  let t94;
-  if ($[138] === Symbol.for("react.memo_cache_sentinel")) {
-    t94 = /* @__PURE__ */ jsx(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." });
-    $[138] = t94;
+  let t98;
+  if ($[143] !== setFieldValue) {
+    t98 = (v_2) => setFieldValue("collectionGroup", v_2);
+    $[143] = setFieldValue;
+    $[144] = t98;
   } else {
-    t94 = $[138];
+    t98 = $[144];
   }
-  let t95;
-  if ($[139] !== t93) {
-    t95 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t93,
-      t94
-    ] });
-    $[139] = t93;
-    $[140] = t95;
+  const t99 = values.collectionGroup ?? false;
+  let t100;
+  if ($[145] !== t98 || $[146] !== t99) {
+    t100 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t98, value: t99 });
+    $[145] = t98;
+    $[146] = t99;
+    $[147] = t100;
   } else {
-    t95 = $[140];
+    t100 = $[147];
   }
-  let t96;
-  if ($[141] !== t48 || $[142] !== t56 || $[143] !== t68 || $[144] !== t75 || $[145] !== t78 || $[146] !== t85 || $[147] !== t90 || $[148] !== t95) {
-    t96 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
-      t48,
-      t56,
-      t68,
-      t75,
-      t78,
-      t85,
-      t90,
-      t95
-    ] });
-    $[141] = t48;
-    $[142] = t56;
-    $[143] = t68;
-    $[144] = t75;
-    $[145] = t78;
-    $[146] = t85;
-    $[147] = t90;
-    $[148] = t95;
-    $[149] = t96;
-  } else {
-    t96 = $[149];
+  let t101;
+  if ($[148] === Symbol.for("react.memo_cache_sentinel")) {
+    t101 = /* @__PURE__ */ jsx(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 = $[148];
   }
-  let t97;
-  if ($[150] !== advancedPanelExpanded || $[151] !== t96) {
-    t97 = /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t41, initiallyExpanded: false, children: t96 });
-    $[150] = advancedPanelExpanded;
-    $[151] = t96;
-    $[152] = t97;
+  let t102;
+  if ($[149] !== t100) {
+    t102 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-4", children: [
+      t100,
+      t101
+    ] });
+    $[149] = t100;
+    $[150] = t102;
   } else {
-    t97 = $[152];
+    t102 = $[150];
   }
-  let t98;
-  if ($[153] !== children || $[154] !== t97) {
-    t98 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-8", children: [
+  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__ */ jsx(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__ */ jsx(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__ */ 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__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
+      t54,
+      t62,
+      t74,
+      t81,
+      t84,
+      t90,
       t97,
+      t102,
+      t107
+    ] });
+    $[159] = t102;
+    $[160] = t107;
+    $[161] = t54;
+    $[162] = t62;
+    $[163] = t74;
+    $[164] = t81;
+    $[165] = t84;
+    $[166] = t90;
+    $[167] = t97;
+    $[168] = t108;
+  } else {
+    t108 = $[168];
+  }
+  let t109;
+  if ($[169] !== advancedPanelExpanded || $[170] !== t108) {
+    t109 = /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "col-span-12 mt-8", children: [
+      t109,
       children
     ] });
-    $[153] = children;
-    $[154] = t97;
-    $[155] = t98;
+    $[172] = children;
+    $[173] = t109;
+    $[174] = t110;
   } else {
-    t98 = $[155];
+    t110 = $[174];
   }
-  let t99;
-  if ($[156] !== t27 || $[157] !== t36 || $[158] !== t37 || $[159] !== t40 || $[160] !== t98) {
-    t99 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
+  let t111;
+  if ($[175] !== t110 || $[176] !== t27 || $[177] !== t36 || $[178] !== t37 || $[179] !== t40 || $[180] !== t46) {
+    t111 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
       t27,
       t36,
       t37,
       t40,
-      t98
+      t46,
+      t110
     ] });
-    $[156] = t27;
-    $[157] = t36;
-    $[158] = t37;
-    $[159] = t40;
-    $[160] = t98;
-    $[161] = t99;
-  } else {
-    t99 = $[161];
-  }
-  let t100;
-  if ($[162] === Symbol.for("react.memo_cache_sentinel")) {
-    t100 = /* @__PURE__ */ 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__ */ jsx("div", { style: {
       height: "52px"
     } });
-    $[162] = t100;
+    $[182] = t112;
   } else {
-    t100 = $[162];
+    t112 = $[182];
   }
-  let t101;
-  if ($[163] !== setFieldValue) {
-    t101 = (icon) => {
+  let t113;
+  if ($[183] !== setFieldValue) {
+    t113 = (icon) => {
       setIconDialogOpen(false);
       setFieldValue("icon", icon);
     };
-    $[163] = setFieldValue;
-    $[164] = t101;
+    $[183] = setFieldValue;
+    $[184] = t113;
   } else {
-    t101 = $[164];
+    t113 = $[184];
   }
-  let t102;
-  if ($[165] !== t101 || $[166] !== values.icon) {
-    t102 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: values.icon, onIconSelected: t101 }) });
-    $[165] = t101;
-    $[166] = values.icon;
-    $[167] = t102;
+  let t114;
+  if ($[185] !== t113 || $[186] !== values.icon) {
+    t114 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: values.icon, onIconSelected: t113 }) });
+    $[185] = t113;
+    $[186] = values.icon;
+    $[187] = t114;
   } else {
-    t102 = $[167];
+    t114 = $[187];
   }
-  let t103;
-  if ($[168] !== iconDialogOpen || $[169] !== t102) {
-    t103 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t102 });
-    $[168] = iconDialogOpen;
-    $[169] = t102;
-    $[170] = t103;
+  let t115;
+  if ($[188] !== iconDialogOpen || $[189] !== t114) {
+    t115 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t114 });
+    $[188] = iconDialogOpen;
+    $[189] = t114;
+    $[190] = t115;
   } else {
-    t103 = $[170];
+    t115 = $[190];
   }
-  let t104;
-  if ($[171] !== T0 || $[172] !== t103 || $[173] !== t18 || $[174] !== t99) {
-    t104 = /* @__PURE__ */ jsx("div", { className: t7, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t8, className: t9, children: [
+  let t116;
+  if ($[191] !== T0 || $[192] !== t111 || $[193] !== t115 || $[194] !== t18) {
+    t116 = /* @__PURE__ */ jsx("div", { className: t7, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t8, className: t9, children: [
       t18,
-      t99,
-      t100,
-      t103
+      t111,
+      t112,
+      t115
     ] }) });
-    $[171] = T0;
-    $[172] = t103;
-    $[173] = t18;
-    $[174] = t99;
-    $[175] = t104;
+    $[191] = T0;
+    $[192] = t111;
+    $[193] = t115;
+    $[194] = t18;
+    $[195] = t116;
   } else {
-    t104 = $[175];
+    t116 = $[195];
   }
-  return t104;
+  return t116;
 }
 function _temp3$4(value_3) {
   if (value_3 === "code_defined") {
@@ -1251,7 +1327,7 @@ function EnumFormFields(t0) {
   }
   let t10;
   if ($[26] !== buildEntry || $[27] !== disabled || $[28] !== enumValuesPath || $[29] !== t8 || $[30] !== values.enumValues) {
-    t10 = /* @__PURE__ */ jsx(ArrayContainer, { droppableId: enumValuesPath, addLabel: "Add enum value", value: values.enumValues, disabled, size: "small", buildEntry, onInternalIdAdded: setLastInternalIdAdded, includeAddButton: true, onValueChange: t8, newDefaultEntry: t9 });
+    t10 = /* @__PURE__ */ jsx(ArrayContainer, { droppableId: enumValuesPath, addLabel: "Add enum value", value: values.enumValues, disabled, size: "small", buildEntry, onInternalIdAdded: setLastInternalIdAdded, canAddElements: true, onValueChange: t8, newDefaultEntry: t9 });
     $[26] = buildEntry;
     $[27] = disabled;
     $[28] = enumValuesPath;
@@ -2698,7 +2774,7 @@ function NonEditablePropertyPreview(t0) {
   return t19;
 }
 const PropertyTree = React__default.memo(function PropertyTree2(t0) {
-  const $ = c(26);
+  const $ = c(37);
   const {
     namespace,
     selectedPropertyKey,
@@ -2724,94 +2800,152 @@ const PropertyTree = React__default.memo(function PropertyTree2(t0) {
   }
   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];
+  }
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      coordinateGetter: sortableKeyboardCoordinates
+    };
+    $[4] = t3;
+  } else {
+    t3 = $[4];
   }
-  const onDragEnd = t2;
-  const t3 = `droppable_${namespace}`;
+  const sensors = useSensors(useSensor(PointerSensor, t2), useSensor(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__ */ 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__ */ jsx(Draggable, { draggableId: `array_field_${namespace}_${propertyKey}}`, index, children: (provided, snapshot) => /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: t5 }) });
-    $[23] = onDragEnd;
-    $[24] = t5;
-    $[25] = t6;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = [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__ */ 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__ */ jsx("div", { className, children: t7 });
+    $[27] = className;
+    $[28] = t7;
+    $[29] = t8;
+  } else {
+    t8 = $[29];
+  }
+  let t9;
+  if ($[30] !== items || $[31] !== t8) {
+    t9 = /* @__PURE__ */ jsx(SortableContext, { items, strategy: verticalListSortingStrategy, children: t8 });
+    $[30] = items;
+    $[31] = t8;
+    $[32] = t9;
+  } else {
+    t9 = $[32];
+  }
+  let t10;
+  if ($[33] !== handleDragEnd || $[34] !== sensors || $[35] !== t9) {
+    t10 = /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: 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 $ = c(53);
+  const $ = c(62);
   const {
+    id,
     propertyKey,
     namespace,
     propertyOrBuilder,
     additionalField,
-    provided,
     selectedPropertyKey,
     errors,
     onPropertyClick,
@@ -2821,157 +2955,201 @@ function PropertyTreeEntry(t0) {
     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
+  } = useSortable(t1);
   let t2;
-  if ($[4] !== namespace || $[5] !== propertyKey) {
-    t2 = getFullId(propertyKey, namespace);
-    $[4] = namespace;
-    $[5] = propertyKey;
-    $[6] = t2;
+  if ($[2] !== transform) {
+    t2 = 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 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 fullId = t2;
+  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__ */ 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__ */ 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 && !isPropertyBuilder(propertyOrBuilder) || editableProperty(propertyOrBuilder));
-    $[17] = collectionEditable;
-    $[18] = propertyOrBuilder;
-    $[19] = t3;
+  let t6;
+  if ($[22] !== collectionEditable || $[23] !== propertyOrBuilder) {
+    t6 = propertyOrBuilder && (collectionEditable && !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__ */ jsx("div", { className: "absolute border-l " + defaultBorderMixin, style: {
+  const editable = t6;
+  let t7;
+  if ($[25] !== subtree) {
+    t7 = subtree && /* @__PURE__ */ jsx("div", { className: "absolute border-l " + 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 = !isPropertyBuilder(propertyOrBuilder) && !additionalField && editable ? /* @__PURE__ */ jsx(PropertyFieldPreview, { property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, includeName: true, selected, hasError }) : /* @__PURE__ */ 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__ */ jsx("div", { children: !isPropertyBuilder(propertyOrBuilder) && !additionalField && editable ? /* @__PURE__ */ jsx(PropertyFieldPreview, { property: propertyOrBuilder, onClick: onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : void 0, includeName: true, selected, hasError }) : /* @__PURE__ */ 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__ */ jsx(Tooltip, { title: "Inferred property", children: /* @__PURE__ */ jsx(AutorenewIcon, { size: "small", className: "p-2" }) });
-    $[31] = isPropertyInferred;
-    $[32] = t6;
+  let t9;
+  if ($[36] !== isPropertyInferred) {
+    t9 = isPropertyInferred && /* @__PURE__ */ jsx(Tooltip, { title: "Inferred property", children: /* @__PURE__ */ jsx(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__ */ jsx(Tooltip, { title: "Remove", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", color: "inherit", onClick: () => onPropertyRemove(propertyKey, namespace), children: /* @__PURE__ */ jsx(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__ */ jsx(Tooltip, { title: "Remove", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", color: "inherit", onClick: () => onPropertyRemove(propertyKey, namespace), children: /* @__PURE__ */ jsx(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__ */ jsx(Tooltip, { title: "Move", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { component: "span", size: "small", children: /* @__PURE__ */ jsx(DragHandleIcon, { size: "small" }) }) });
-    $[37] = onPropertyMove;
-    $[38] = t8;
+  let t11;
+  if ($[43] !== attributes || $[44] !== listeners || $[45] !== onPropertyMove) {
+    t11 = onPropertyMove && /* @__PURE__ */ jsx(Tooltip, { title: "Move", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { component: "span", size: "small", ...attributes, ...listeners, children: /* @__PURE__ */ jsx(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__ */ 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__ */ 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__ */ jsx("div", { className: "ml-16", children: subtree });
-    $[43] = subtree;
-    $[44] = t10;
+  let t13;
+  if ($[51] !== subtree) {
+    t13 = subtree && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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 $ = c(67);
@@ -3185,7 +3363,7 @@ function MapPropertyField(t0) {
   const t19 = values.spreadChildren ?? false;
   let t20;
   if ($[40] !== t18 || $[41] !== t19) {
-    t20 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "small", label: "Spread children as columns", onValueChange: t18, value: t19 });
+    t20 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "medium", label: "Spread children as columns", onValueChange: t18, value: t19 });
     $[40] = t18;
     $[41] = t19;
     $[42] = t20;
@@ -4657,7 +4835,7 @@ function AdvancedPropertyValidation(t0) {
         field,
         form
       } = t22;
-      return /* @__PURE__ */ 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__ */ 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;
@@ -4671,7 +4849,7 @@ function AdvancedPropertyValidation(t0) {
         field: field_0,
         form: form_0
       } = t32;
-      return /* @__PURE__ */ 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__ */ 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;
@@ -5804,7 +5982,7 @@ function PropertyEditFormFields(t0) {
   let t6;
   if ($[14] !== errors || $[15] !== onError || $[16] !== propertyNamespace || $[17] !== values?.id) {
     t6 = () => {
-      if (values?.id && onError && !isEmptyObject(errors)) {
+      if (values?.id && onError) {
         onError(values?.id, propertyNamespace, errors);
       }
     };
@@ -6603,9 +6781,11 @@ function WidgetSelectViewItem(t0) {
 }
 function camelCase(str) {
   if (!str) return "";
-  return (str.slice(0, 1).toLowerCase() + str.slice(1)).replace(/([-_ ]){1,}/g, " ").split(/[-_ ]/).reduce((cur, acc) => {
-    return cur + acc[0].toUpperCase() + acc.substring(1);
-  }, "");
+  if (str.length === 1) return str.toLowerCase();
+  const parts = str.split(/[-_ ]+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  return parts[0].toLowerCase() + // Transform remaining parts to have first letter uppercase
+  parts.slice(1).map((part) => part.charAt(0).toUpperCase() + part.substring(1).toLowerCase()).join("");
 }
 function GetCodeDialog(t0) {
   const $ = c(22);
@@ -6979,8 +7159,8 @@ function CollectionPropertiesEditorForm({
     setSelectedPropertyKey(propertyKey_2);
     setSelectedPropertyNamespace(namespace_5);
   };
-  const body = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 h-full bg-surface-50 dark:bg-surface-900", children: [
-    /* @__PURE__ */ jsxs("div", { className: cls("p-4 md:p-8 pb-20 md:pb-20", "col-span-12 lg:col-span-5 h-full overflow-auto", !asDialog && "border-r " + defaultBorderMixin), children: [
+  const body = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 h-full bg-white dark:bg-surface-950", children: [
+    /* @__PURE__ */ jsxs("div", { className: cls("bg-surface-50 dark:bg-surface-900", "p-4 md:p-8 pb-20 md:pb-20", "col-span-12 lg:col-span-5 h-full overflow-auto", !asDialog && "border-r " + defaultBorderMixin), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex my-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-grow mb-4", children: [
           /* @__PURE__ */ jsx(Field, { name: "name", as: DebouncedTextField, invisible: true, className: "-ml-1", inputClassName: "text-2xl font-headers", placeholder: "Collection name", size: "small", required: true, error: Boolean(errors?.name) }),
@@ -6999,7 +7179,7 @@ function CollectionPropertiesEditorForm({
       /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyTree, { className: "pl-8", inferredPropertyKeys, selectedPropertyKey: selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : void 0, properties: values.properties, additionalFields: values.additionalFields, propertiesOrder: usedPropertiesOrder, onPropertyClick, onPropertyMove, onPropertyRemove: isNewCollection ? deleteProperty : void 0, collectionEditable, errors }) }),
       /* @__PURE__ */ jsx(Button, { className: "mt-8 w-full", color: "primary", variant: "outlined", size: "large", onClick: () => setNewPropertyDialogOpen(true), startIcon: /* @__PURE__ */ jsx(AddIcon, {}), children: "Add new property" })
     ] }),
-    !asDialog && /* @__PURE__ */ jsx("div", { className: "col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto pb-20 md:pb-20", children: /* @__PURE__ */ jsxs(Paper, { className: "sticky top-8 p-4 min-h-full border border-transparent w-full flex flex-col justify-center ", children: [
+    !asDialog && /* @__PURE__ */ jsx("div", { className: "col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto pb-20 md:pb-20", children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 min-h-full w-full flex flex-col justify-center", children: [
       selectedPropertyFullId && selectedProperty && !isPropertyBuilder(selectedProperty) && /* @__PURE__ */ jsx(PropertyForm, { inArray: false, existingProperty: !isNewCollection, autoUpdateId: false, allowDataInference: !isNewCollection, autoOpenTypeSelect: false, propertyKey: selectedPropertyKey, propertyNamespace: selectedPropertyNamespace, property: selectedProperty, onPropertyChanged, onDelete: deleteProperty, onError: onPropertyErrorInternal, forceShowErrors: showErrors, initialErrors, getData, propertyConfigs, collectionEditable }, `edit_view_${selectedPropertyIndex}`),
       !selectedProperty && /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center justify-center h-full gap-4", children: [
         /* @__PURE__ */ jsx(Typography, { variant: "label", className: "", children: emptyCollection ? "Now you can add your first property" : "Select a property to edit it" }),
@@ -8074,7 +8254,7 @@ const pagesCollectionTemplate = {
   }
 };
 function CollectionEditorWelcomeView(t0) {
-  const $ = c(56);
+  const $ = c(52);
   const {
     path,
     pathSuggestions,
@@ -8111,6 +8291,10 @@ function CollectionEditorWelcomeView(t0) {
     setFieldValue,
     setValues
   } = useFormex();
+  const noSuggestions = !loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0;
+  if (!noSuggestions) {
+    return null;
+  }
   let t3;
   if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
     t3 = /* @__PURE__ */ jsx("div", { className: "flex flex-row py-2 pt-3 items-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "flex-grow", children: "New collection" }) });
@@ -8162,173 +8346,162 @@ function CollectionEditorWelcomeView(t0) {
     t7 = $[15];
   }
   let t8;
-  if ($[16] !== filteredPathSuggestions || $[17] !== loadingPathSuggestions) {
-    t8 = !loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0 && /* @__PURE__ */ jsx(Typography, { variant: "caption", children: "No suggestions" });
-    $[16] = filteredPathSuggestions;
-    $[17] = loadingPathSuggestions;
-    $[18] = t8;
-  } else {
-    t8 = $[18];
-  }
-  let t9;
-  if ($[19] !== t6 || $[20] !== t7 || $[21] !== t8) {
-    t9 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+  if ($[16] !== t6 || $[17] !== t7) {
+    t8 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
       t5,
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-2 gap-y-1 items-center my-2 min-h-7", children: [
         t6,
-        t7,
-        t8
+        t7
       ] })
     ] });
-    $[19] = t6;
-    $[20] = t7;
-    $[21] = t8;
-    $[22] = t9;
+    $[16] = t6;
+    $[17] = t7;
+    $[18] = t8;
   } else {
-    t9 = $[22];
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "● Select a template:" });
+    $[19] = t9;
+  } else {
+    t9 = $[19];
   }
   let t10;
-  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: "● Select a template:" });
-    $[23] = t10;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: productsCollectionTemplate.icon });
+    $[20] = t10;
   } else {
-    t10 = $[23];
+    t10 = $[20];
   }
   let t11;
-  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-    t11 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: productsCollectionTemplate.icon });
-    $[24] = t11;
+  if ($[21] !== onContinue || $[22] !== setValues) {
+    t11 = /* @__PURE__ */ jsx(TemplateButton, { title: "Products", subtitle: "A collection of products with images, prices and stock", icon: t10, onClick: () => {
+      setValues(productsCollectionTemplate);
+      onContinue();
+    } });
+    $[21] = onContinue;
+    $[22] = setValues;
+    $[23] = t11;
   } else {
-    t11 = $[24];
+    t11 = $[23];
   }
   let t12;
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: usersCollectionTemplate.icon });
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  let t13;
   if ($[25] !== onContinue || $[26] !== setValues) {
-    t12 = /* @__PURE__ */ jsx(TemplateButton, { title: "Products", subtitle: "A collection of products with images, prices and stock", icon: t11, onClick: () => {
-      setValues(productsCollectionTemplate);
+    t13 = /* @__PURE__ */ jsx(TemplateButton, { title: "Users", subtitle: "A collection of users with emails, names and roles", icon: t12, onClick: () => {
+      setValues(usersCollectionTemplate);
       onContinue();
     } });
     $[25] = onContinue;
     $[26] = setValues;
-    $[27] = t12;
+    $[27] = t13;
   } else {
-    t12 = $[27];
+    t13 = $[27];
   }
-  let t13;
+  let t14;
   if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: usersCollectionTemplate.icon });
-    $[28] = t13;
+    t14 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: blogCollectionTemplate.icon });
+    $[28] = t14;
   } else {
-    t13 = $[28];
+    t14 = $[28];
   }
-  let t14;
+  let t15;
   if ($[29] !== onContinue || $[30] !== setValues) {
-    t14 = /* @__PURE__ */ jsx(TemplateButton, { title: "Users", subtitle: "A collection of users with emails, names and roles", icon: t13, onClick: () => {
-      setValues(usersCollectionTemplate);
+    t15 = /* @__PURE__ */ jsx(TemplateButton, { title: "Blog posts", subtitle: "A collection of blog posts with images, authors and complex content", icon: t14, onClick: () => {
+      setValues(blogCollectionTemplate);
       onContinue();
     } });
     $[29] = onContinue;
     $[30] = setValues;
-    $[31] = t14;
+    $[31] = t15;
   } else {
-    t14 = $[31];
+    t15 = $[31];
   }
-  let t15;
+  let t16;
   if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-    t15 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: blogCollectionTemplate.icon });
-    $[32] = t15;
+    t16 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: pagesCollectionTemplate.icon });
+    $[32] = t16;
   } else {
-    t15 = $[32];
+    t16 = $[32];
   }
-  let t16;
+  let t17;
   if ($[33] !== onContinue || $[34] !== setValues) {
-    t16 = /* @__PURE__ */ jsx(TemplateButton, { title: "Blog posts", subtitle: "A collection of blog posts with images, authors and complex content", icon: t15, onClick: () => {
-      setValues(blogCollectionTemplate);
+    t17 = /* @__PURE__ */ jsx(TemplateButton, { title: "Pages", subtitle: "A collection of pages with images, authors and complex content", icon: t16, onClick: () => {
+      setValues(pagesCollectionTemplate);
       onContinue();
     } });
     $[33] = onContinue;
     $[34] = setValues;
-    $[35] = t16;
-  } else {
-    t16 = $[35];
-  }
-  let t17;
-  if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
-    t17 = /* @__PURE__ */ jsx(Icon, { size: "small", iconKey: pagesCollectionTemplate.icon });
-    $[36] = t17;
+    $[35] = t17;
   } else {
-    t17 = $[36];
+    t17 = $[35];
   }
   let t18;
-  if ($[37] !== onContinue || $[38] !== setValues) {
-    t18 = /* @__PURE__ */ jsx(TemplateButton, { title: "Pages", subtitle: "A collection of pages with images, authors and complex content", icon: t17, onClick: () => {
-      setValues(pagesCollectionTemplate);
-      onContinue();
-    } });
-    $[37] = onContinue;
-    $[38] = setValues;
-    $[39] = t18;
-  } else {
-    t18 = $[39];
-  }
-  let t19;
-  if ($[40] !== t12 || $[41] !== t14 || $[42] !== t16 || $[43] !== t18) {
-    t19 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
-      t10,
+  if ($[36] !== t11 || $[37] !== t13 || $[38] !== t15 || $[39] !== t17) {
+    t18 = /* @__PURE__ */ jsxs("div", { className: "my-2", children: [
+      t9,
       /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-        t12,
-        t14,
-        t16,
-        t18
+        t11,
+        t13,
+        t15,
+        t17
       ] })
     ] });
-    $[40] = t12;
-    $[41] = t14;
-    $[42] = t16;
-    $[43] = t18;
-    $[44] = t19;
+    $[36] = t11;
+    $[37] = t13;
+    $[38] = t15;
+    $[39] = t17;
+    $[40] = t18;
   } else {
-    t19 = $[44];
+    t18 = $[40];
   }
-  let t20;
-  if ($[45] !== onContinue || $[46] !== parentCollection) {
-    t20 = !parentCollection && /* @__PURE__ */ jsxs("div", { children: [
+  let t19;
+  if ($[41] !== onContinue || $[42] !== parentCollection) {
+    t19 = !parentCollection && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "mb-2", children: "● Create a collection from a file (csv, json, xls, xslx...)" }),
       /* @__PURE__ */ jsx(ImportFileUpload, { onDataAdded: (data, propertiesOrder) => onContinue(data, propertiesOrder) })
     ] });
-    $[45] = onContinue;
-    $[46] = parentCollection;
-    $[47] = t20;
+    $[41] = onContinue;
+    $[42] = parentCollection;
+    $[43] = t19;
   } else {
-    t20 = $[47];
+    t19 = $[43];
   }
-  let t21;
-  if ($[48] !== onContinue) {
-    t21 = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => onContinue(), className: "my-2", children: "Continue from scratch" }) });
-    $[48] = onContinue;
-    $[49] = t21;
+  let t20;
+  if ($[44] !== onContinue) {
+    t20 = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => onContinue(), className: "my-2", children: "Continue from scratch" }) });
+    $[44] = onContinue;
+    $[45] = t20;
   } else {
-    t21 = $[49];
+    t20 = $[45];
   }
-  let t22;
-  if ($[50] !== t19 || $[51] !== t20 || $[52] !== t21 || $[53] !== t4 || $[54] !== t9) {
-    t22 = /* @__PURE__ */ jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxs(Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
+  let t21;
+  if ($[46] !== t18 || $[47] !== t19 || $[48] !== t20 || $[49] !== t4 || $[50] !== t8) {
+    t21 = /* @__PURE__ */ jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxs(Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
       t3,
       t4,
-      t9,
+      t8,
+      t18,
       t19,
-      t20,
-      t21
+      t20
     ] }) });
-    $[50] = t19;
-    $[51] = t20;
-    $[52] = t21;
-    $[53] = t4;
-    $[54] = t9;
-    $[55] = t22;
+    $[46] = t18;
+    $[47] = t19;
+    $[48] = t20;
+    $[49] = t4;
+    $[50] = t8;
+    $[51] = t21;
   } else {
-    t22 = $[55];
+    t21 = $[51];
   }
-  return t22;
+  return t21;
 }
 function TemplateButton(t0) {
   const $ = c(10);
@@ -8782,102 +8955,104 @@ function PropertySelectItem(t0) {
   return t9;
 }
 function CollectionEditorImportDataPreview(t0) {
-  const $ = c(18);
+  const $ = c(19);
   const {
     importConfig,
     properties,
     propertiesOrder
   } = t0;
+  const authController = useAuthController();
   const [loading, setLoading] = useState(false);
   let t1;
-  if ($[0] !== importConfig || $[1] !== properties) {
+  if ($[0] !== authController || $[1] !== importConfig || $[2] !== properties) {
     t1 = async function loadEntities2() {
-      const mappedData = importConfig.importData.map((d) => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, "TEMP_PATH", importConfig.defaultValues));
+      const mappedData = importConfig.importData.map((d) => convertDataToEntity(authController, d, importConfig.idColumn, importConfig.headersMapping, properties, "TEMP_PATH", importConfig.defaultValues));
       importConfig.setEntities(mappedData);
     };
-    $[0] = importConfig;
-    $[1] = properties;
-    $[2] = t1;
+    $[0] = authController;
+    $[1] = importConfig;
+    $[2] = properties;
+    $[3] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[3];
   }
   const loadEntities = t1;
   let t2;
-  if ($[3] !== loadEntities) {
+  if ($[4] !== loadEntities) {
     t2 = () => {
       loadEntities().finally(() => setLoading(false));
     };
-    $[3] = loadEntities;
-    $[4] = t2;
+    $[4] = loadEntities;
+    $[5] = t2;
   } else {
-    t2 = $[4];
+    t2 = $[5];
   }
   let t3;
-  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
     t3 = [];
-    $[5] = t3;
+    $[6] = t3;
   } else {
-    t3 = $[5];
+    t3 = $[6];
   }
   useEffect(t2, t3);
   const selectionController = useSelectionController();
   if (loading) {
     let t42;
-    if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
       t42 = /* @__PURE__ */ jsx(CircularProgressCenter, {});
-      $[6] = t42;
+      $[7] = t42;
     } else {
-      t42 = $[6];
+      t42 = $[7];
     }
     return t42;
   }
   let t4;
-  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
     t4 = /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "Imported data preview" }),
       /* @__PURE__ */ jsx(Typography, { variant: "caption", children: "Entities with the same id will be overwritten" })
     ] });
-    $[7] = t4;
+    $[8] = t4;
   } else {
-    t4 = $[7];
+    t4 = $[8];
   }
   let t5;
-  if ($[8] !== importConfig.entities) {
+  if ($[9] !== importConfig.entities) {
     t5 = {
       data: importConfig.entities,
       dataLoading: false,
       noMoreToLoad: false
     };
-    $[8] = importConfig.entities;
-    $[9] = t5;
+    $[9] = importConfig.entities;
+    $[10] = t5;
   } else {
-    t5 = $[9];
+    t5 = $[10];
   }
   let t6;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
     t6 = /* @__PURE__ */ jsx("div", { className: "h-12" });
-    $[10] = t6;
+    $[11] = t6;
   } else {
-    t6 = $[10];
+    t6 = $[11];
   }
   let t7;
-  if ($[11] !== propertiesOrder) {
+  if ($[12] !== propertiesOrder) {
     t7 = propertiesOrder.map(_temp$1);
-    $[11] = propertiesOrder;
-    $[12] = t7;
+    $[12] = propertiesOrder;
+    $[13] = t7;
   } else {
-    t7 = $[12];
+    t7 = $[13];
   }
   let t8;
-  if ($[13] !== properties || $[14] !== selectionController || $[15] !== t5 || $[16] !== t7) {
+  if ($[14] !== properties || $[15] !== selectionController || $[16] !== t5 || $[17] !== t7) {
     t8 = /* @__PURE__ */ jsx(EntityCollectionTable, { title: t4, tableController: t5, endAdornment: t6, filterable: false, sortable: false, selectionController, displayedColumnIds: t7, openEntityMode: "side_panel", properties, enablePopupIcon: false });
-    $[13] = properties;
-    $[14] = selectionController;
-    $[15] = t5;
-    $[16] = t7;
-    $[17] = t8;
+    $[14] = properties;
+    $[15] = selectionController;
+    $[16] = t5;
+    $[17] = t7;
+    $[18] = t8;
   } else {
-    t8 = $[17];
+    t8 = $[18];
   }
   return t8;
 }
@@ -9420,7 +9595,7 @@ function CollectionEditorInternal({
         } }),
         currentView === "details" && /* @__PURE__ */ jsx(CollectionDetailsForm, { existingPaths, existingIds, groups, parentCollectionIds, parentCollection, isNewCollection, children: !isNewCollection && isMergedCollection && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mt-8", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "secondary", children: "This collection is defined in code. The changes done in this editor will override the properties defined in code. You can delete the overridden values to revert to the state defined in code." }),
-          /* @__PURE__ */ jsx(Button, { variant: "neutral", onClick: () => {
+          /* @__PURE__ */ jsx(Button, { color: "neutral", onClick: () => {
             setDeleteRequested(true);
           }, children: "Reset to code" })
         ] }) }),
@@ -9540,7 +9715,7 @@ const validateId = (value, isNewCollection, existingPaths, existingIds) => {
 const ConfigControllerContext = React__default.createContext({});
 const CollectionEditorContext = React__default.createContext({});
 const ConfigControllerProvider = React__default.memo(function ConfigControllerProvider2(t0) {
-  const $ = c(67);
+  const $ = c(65);
   const {
     children,
     collectionConfigController,
@@ -9548,7 +9723,6 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
     reservedGroups,
     collectionInference,
     extraView,
-    getPathSuggestions,
     getUser,
     getData,
     onAnalyticsEvent
@@ -9669,26 +9843,24 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
   const createCollection = t3;
   const t4 = configPermissions ?? defaultConfigPermissions;
   let t5;
-  if ($[6] !== createCollection || $[7] !== editCollection || $[8] !== editProperty || $[9] !== getPathSuggestions || $[10] !== t4) {
+  if ($[6] !== createCollection || $[7] !== editCollection || $[8] !== editProperty || $[9] !== t4) {
     t5 = {
       editCollection,
       createCollection,
       editProperty,
-      configPermissions: t4,
-      getPathSuggestions
+      configPermissions: t4
     };
     $[6] = createCollection;
     $[7] = editCollection;
     $[8] = editProperty;
-    $[9] = getPathSuggestions;
-    $[10] = t4;
-    $[11] = t5;
+    $[9] = t4;
+    $[10] = t5;
   } else {
-    t5 = $[11];
+    t5 = $[10];
   }
   const t6 = Boolean(currentDialog);
   let t7;
-  if ($[12] !== currentDialog || $[13] !== navigate || $[14] !== navigation) {
+  if ($[11] !== currentDialog || $[12] !== navigate || $[13] !== navigation) {
     t7 = (collection_0) => {
       if (currentDialog?.redirect) {
         if (collection_0 && currentDialog?.isNewCollection && !currentDialog.parentCollectionIds.length) {
@@ -9698,29 +9870,28 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
       }
       setCurrentDialog(void 0);
     };
-    $[12] = currentDialog;
-    $[13] = navigate;
-    $[14] = navigation;
-    $[15] = t7;
+    $[11] = currentDialog;
+    $[12] = navigate;
+    $[13] = navigation;
+    $[14] = t7;
   } else {
-    t7 = $[15];
+    t7 = $[14];
   }
   let t8;
-  if ($[16] !== collectionConfigController || $[17] !== collectionInference || $[18] !== currentDialog || $[19] !== extraView || $[20] !== getData || $[21] !== getPathSuggestions || $[22] !== getUser || $[23] !== reservedGroups || $[24] !== t6 || $[25] !== t7) {
-    t8 = /* @__PURE__ */ jsx(CollectionEditorDialog, { open: t6, configController: collectionConfigController, isNewCollection: false, collectionInference, ...currentDialog, getData, reservedGroups, extraView, pathSuggestions: getPathSuggestions, getUser, handleClose: t7 });
-    $[16] = collectionConfigController;
-    $[17] = collectionInference;
-    $[18] = currentDialog;
-    $[19] = extraView;
-    $[20] = getData;
-    $[21] = getPathSuggestions;
-    $[22] = getUser;
-    $[23] = reservedGroups;
-    $[24] = t6;
-    $[25] = t7;
-    $[26] = t8;
+  if ($[15] !== collectionConfigController || $[16] !== collectionInference || $[17] !== currentDialog || $[18] !== extraView || $[19] !== getData || $[20] !== getUser || $[21] !== reservedGroups || $[22] !== t6 || $[23] !== t7) {
+    t8 = /* @__PURE__ */ jsx(CollectionEditorDialog, { open: t6, configController: collectionConfigController, isNewCollection: false, collectionInference, ...currentDialog, getData, reservedGroups, extraView, getUser, handleClose: t7 });
+    $[15] = collectionConfigController;
+    $[16] = collectionInference;
+    $[17] = currentDialog;
+    $[18] = extraView;
+    $[19] = getData;
+    $[20] = getUser;
+    $[21] = reservedGroups;
+    $[22] = t6;
+    $[23] = t7;
+    $[24] = t8;
   } else {
-    t8 = $[26];
+    t8 = $[24];
   }
   const t9 = Boolean(currentPropertyDialog);
   const t10 = Boolean(currentPropertyDialog?.propertyKey);
@@ -9728,21 +9899,21 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
   const t12 = !currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey;
   const t13 = currentPropertyDialog?.collectionEditable ?? false;
   let t14;
-  if ($[27] !== currentPropertyDialog || $[28] !== getData || $[29] !== navigation) {
+  if ($[25] !== currentPropertyDialog || $[26] !== getData || $[27] !== navigation) {
     t14 = getData && currentPropertyDialog?.editedCollectionId ? () => {
       console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
       const resolvedPath = navigation.resolveIdsFrom(currentPropertyDialog.editedCollectionId);
       return getData(resolvedPath, []);
     } : void 0;
-    $[27] = currentPropertyDialog;
-    $[28] = getData;
-    $[29] = navigation;
-    $[30] = t14;
+    $[25] = currentPropertyDialog;
+    $[26] = getData;
+    $[27] = navigation;
+    $[28] = t14;
   } else {
-    t14 = $[30];
+    t14 = $[28];
   }
   let t15;
-  if ($[31] !== collectionConfigController || $[32] !== currentPropertyDialog || $[33] !== snackbarController) {
+  if ($[29] !== collectionConfigController || $[30] !== currentPropertyDialog || $[31] !== snackbarController) {
     t15 = (t162) => {
       const {
         id: id_0,
@@ -9771,15 +9942,15 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         return false;
       });
     };
-    $[31] = collectionConfigController;
-    $[32] = currentPropertyDialog;
-    $[33] = snackbarController;
-    $[34] = t15;
+    $[29] = collectionConfigController;
+    $[30] = currentPropertyDialog;
+    $[31] = snackbarController;
+    $[32] = t15;
   } else {
-    t15 = $[34];
+    t15 = $[32];
   }
   let t16;
-  if ($[35] !== collectionConfigController || $[36] !== currentPropertyDialog?.currentPropertiesOrder || $[37] !== currentPropertyDialog?.editedCollectionId || $[38] !== currentPropertyDialog?.namespace || $[39] !== currentPropertyDialog?.parentCollectionIds || $[40] !== currentPropertyDialog?.propertyKey || $[41] !== snackbarController) {
+  if ($[33] !== collectionConfigController || $[34] !== currentPropertyDialog?.currentPropertiesOrder || $[35] !== currentPropertyDialog?.editedCollectionId || $[36] !== currentPropertyDialog?.namespace || $[37] !== currentPropertyDialog?.parentCollectionIds || $[38] !== currentPropertyDialog?.propertyKey || $[39] !== snackbarController) {
     t16 = () => {
       if (!currentPropertyDialog?.propertyKey) {
         return;
@@ -9802,21 +9973,21 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         return false;
       });
     };
-    $[35] = collectionConfigController;
-    $[36] = currentPropertyDialog?.currentPropertiesOrder;
-    $[37] = currentPropertyDialog?.editedCollectionId;
-    $[38] = currentPropertyDialog?.namespace;
-    $[39] = currentPropertyDialog?.parentCollectionIds;
-    $[40] = currentPropertyDialog?.propertyKey;
-    $[41] = snackbarController;
-    $[42] = t16;
+    $[33] = collectionConfigController;
+    $[34] = currentPropertyDialog?.currentPropertiesOrder;
+    $[35] = currentPropertyDialog?.editedCollectionId;
+    $[36] = currentPropertyDialog?.namespace;
+    $[37] = currentPropertyDialog?.parentCollectionIds;
+    $[38] = currentPropertyDialog?.propertyKey;
+    $[39] = snackbarController;
+    $[40] = t16;
   } else {
-    t16 = $[42];
+    t16 = $[40];
   }
   let t17;
   let t18;
   let t19;
-  if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
     t17 = () => {
       setCurrentPropertyDialog(void 0);
     };
@@ -9824,64 +9995,64 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
       setCurrentPropertyDialog(void 0);
     };
     t19 = {};
-    $[43] = t17;
-    $[44] = t18;
-    $[45] = t19;
+    $[41] = t17;
+    $[42] = t18;
+    $[43] = t19;
   } else {
-    t17 = $[43];
-    t18 = $[44];
-    t19 = $[45];
+    t17 = $[41];
+    t18 = $[42];
+    t19 = $[43];
   }
   let t20;
-  if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
     t20 = [];
-    $[46] = t20;
+    $[44] = t20;
   } else {
-    t20 = $[46];
+    t20 = $[44];
   }
   const t21 = currentPropertyDialog?.property;
   const t22 = currentPropertyDialog?.propertyKey;
   let t23;
-  if ($[47] !== propertyConfigs || $[48] !== t10 || $[49] !== t11 || $[50] !== t12 || $[51] !== t13 || $[52] !== t14 || $[53] !== t15 || $[54] !== t16 || $[55] !== t21 || $[56] !== t22 || $[57] !== t9) {
+  if ($[45] !== propertyConfigs || $[46] !== t10 || $[47] !== t11 || $[48] !== t12 || $[49] !== t13 || $[50] !== t14 || $[51] !== t15 || $[52] !== t16 || $[53] !== t21 || $[54] !== t22 || $[55] !== t9) {
     t23 = /* @__PURE__ */ jsx(PropertyFormDialog, { open: t9, includeIdAndName: true, existingProperty: t10, autoUpdateId: t11, autoOpenTypeSelect: t12, inArray: false, collectionEditable: t13, getData: t14, onPropertyChanged: t15, onPropertyChangedImmediate: false, onDelete: t16, onError: _temp2, onOkClicked: t17, onCancel: t18, initialErrors: t19, forceShowErrors: false, existingPropertyKeys: t20, allowDataInference: true, propertyConfigs, property: t21, propertyKey: t22 });
-    $[47] = propertyConfigs;
-    $[48] = t10;
-    $[49] = t11;
-    $[50] = t12;
-    $[51] = t13;
-    $[52] = t14;
-    $[53] = t15;
-    $[54] = t16;
-    $[55] = t21;
-    $[56] = t22;
-    $[57] = t9;
-    $[58] = t23;
-  } else {
-    t23 = $[58];
+    $[45] = propertyConfigs;
+    $[46] = t10;
+    $[47] = t11;
+    $[48] = t12;
+    $[49] = t13;
+    $[50] = t14;
+    $[51] = t15;
+    $[52] = t16;
+    $[53] = t21;
+    $[54] = t22;
+    $[55] = t9;
+    $[56] = t23;
+  } else {
+    t23 = $[56];
   }
   let t24;
-  if ($[59] !== children || $[60] !== t23 || $[61] !== t5 || $[62] !== t8) {
+  if ($[57] !== children || $[58] !== t23 || $[59] !== t5 || $[60] !== t8) {
     t24 = /* @__PURE__ */ jsxs(CollectionEditorContext.Provider, { value: t5, children: [
       children,
       t8,
       t23
     ] });
-    $[59] = children;
-    $[60] = t23;
-    $[61] = t5;
-    $[62] = t8;
-    $[63] = t24;
+    $[57] = children;
+    $[58] = t23;
+    $[59] = t5;
+    $[60] = t8;
+    $[61] = t24;
   } else {
-    t24 = $[63];
+    t24 = $[61];
   }
   let t25;
-  if ($[64] !== collectionConfigController || $[65] !== t24) {
+  if ($[62] !== collectionConfigController || $[63] !== t24) {
     t25 = /* @__PURE__ */ jsx(ConfigControllerContext.Provider, { value: collectionConfigController, children: t24 });
-    $[64] = collectionConfigController;
-    $[65] = t24;
-    $[66] = t25;
+    $[62] = collectionConfigController;
+    $[63] = t24;
+    $[64] = t25;
   } else {
-    t25 = $[66];
+    t25 = $[64];
   }
   return t25;
 }, equal);
@@ -10052,7 +10223,7 @@ function HomePageEditorCollectionAction(t0) {
   const deleteCollection = t3;
   let t4;
   if ($[11] !== permissions.deleteCollections) {
-    t4 = permissions.deleteCollections && /* @__PURE__ */ jsx(Menu, { trigger: /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(MoreVertIcon, { size: "small" }) }), children: /* @__PURE__ */ jsxs(MenuItem, { dense: true, onClick: (event) => {
+    t4 = permissions.deleteCollections && /* @__PURE__ */ jsx(Menu, { trigger: /* @__PURE__ */ jsx(IconButton, { size: "small", children: /* @__PURE__ */ jsx(MoreVertIcon, { size: "small" }) }), children: /* @__PURE__ */ jsxs(MenuItem, { dense: true, onClick: (event) => {
       event.preventDefault();
       event.stopPropagation();
       setDeleteRequested(true);
@@ -10067,7 +10238,7 @@ function HomePageEditorCollectionAction(t0) {
   }
   let t5;
   if ($[13] !== onEditCollectionClicked || $[14] !== permissions.editCollections) {
-    t5 = permissions.editCollections && /* @__PURE__ */ jsx(IconButton, { onClick: (event_0) => {
+    t5 = permissions.editCollections && /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (event_0) => {
       onEditCollectionClicked();
     }, children: /* @__PURE__ */ jsx(SettingsIcon, { size: "small" }) });
     $[13] = onEditCollectionClicked;
@@ -10496,21 +10667,22 @@ function NewCollectionCard(t0) {
   return t8;
 }
 function useCollectionEditorPlugin(t0) {
-  const $ = c(15);
+  const $ = c(19);
   const {
     collectionConfigController,
     configPermissions,
     reservedGroups,
     extraView,
-    getPathSuggestions,
     getUser,
     collectionInference,
     getData,
-    onAnalyticsEvent
+    onAnalyticsEvent,
+    includeIntroView: t1
   } = t0;
-  let t1;
-  if ($[0] !== collectionConfigController || $[1] !== collectionInference || $[2] !== configPermissions || $[3] !== extraView || $[4] !== getData || $[5] !== getPathSuggestions || $[6] !== getUser || $[7] !== onAnalyticsEvent || $[8] !== reservedGroups) {
-    t1 = {
+  const includeIntroView = t1 === void 0 ? true : t1;
+  let t2;
+  if ($[0] !== collectionConfigController || $[1] !== collectionInference || $[2] !== configPermissions || $[3] !== extraView || $[4] !== getData || $[5] !== getUser || $[6] !== onAnalyticsEvent || $[7] !== reservedGroups) {
+    t2 = {
       Component: ConfigControllerProvider,
       props: {
         collectionConfigController,
@@ -10518,7 +10690,6 @@ function useCollectionEditorPlugin(t0) {
         collectionInference,
         reservedGroups,
         extraView,
-        getPathSuggestions,
         getUser,
         getData,
         onAnalyticsEvent
@@ -10529,53 +10700,72 @@ function useCollectionEditorPlugin(t0) {
     $[2] = configPermissions;
     $[3] = extraView;
     $[4] = getData;
-    $[5] = getPathSuggestions;
-    $[6] = getUser;
-    $[7] = onAnalyticsEvent;
-    $[8] = reservedGroups;
-    $[9] = t1;
+    $[5] = getUser;
+    $[6] = onAnalyticsEvent;
+    $[7] = reservedGroups;
+    $[8] = t2;
   } else {
-    t1 = $[9];
+    t2 = $[8];
   }
-  let t2;
   let t3;
-  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = {
-      additionalActions: /* @__PURE__ */ jsx(NewCollectionButton, {}),
-      additionalChildrenStart: /* @__PURE__ */ jsx(IntroWidget, {}),
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /* @__PURE__ */ jsx(NewCollectionButton, {});
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== includeIntroView) {
+    t4 = includeIntroView ? /* @__PURE__ */ jsx(IntroWidget, {}) : void 0;
+    $[10] = includeIntroView;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== t4) {
+    t5 = {
+      additionalActions: t3,
+      additionalChildrenStart: t4,
       CollectionActions: HomePageEditorCollectionAction,
       AdditionalCards: NewCollectionCard
     };
-    t3 = {
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
       CollectionActionsStart: EditorCollectionActionStart,
       CollectionActions: EditorCollectionAction,
       HeaderAction: CollectionViewHeaderAction,
       AddColumnComponent: PropertyAddColumnComponent
     };
-    $[10] = t2;
-    $[11] = t3;
+    $[14] = t6;
   } else {
-    t2 = $[10];
-    t3 = $[11];
+    t6 = $[14];
   }
-  let t4;
-  if ($[12] !== collectionConfigController.loading || $[13] !== t1) {
-    t4 = {
+  let t7;
+  if ($[15] !== collectionConfigController.loading || $[16] !== t2 || $[17] !== t5) {
+    t7 = {
       key: "collection_editor",
       loading: collectionConfigController.loading,
-      provider: t1,
-      homePage: t2,
-      collectionView: t3
+      provider: t2,
+      homePage: t5,
+      collectionView: t6
     };
-    $[12] = collectionConfigController.loading;
-    $[13] = t1;
-    $[14] = t4;
+    $[15] = collectionConfigController.loading;
+    $[16] = t2;
+    $[17] = t5;
+    $[18] = t7;
   } else {
-    t4 = $[14];
+    t7 = $[18];
   }
-  return t4;
+  return t7;
 }
-function IntroWidget(t0) {
+function IntroWidget() {
   const $ = c(11);
   const navigation = useNavigationController();
   if (!navigation.topLevelNavigation) {
@@ -10583,35 +10773,35 @@ function IntroWidget(t0) {
   }
   const authController = useAuthController();
   const collectionEditorController = useCollectionEditorController();
-  let t1;
+  let t0;
   if ($[0] !== authController || $[1] !== collectionEditorController) {
-    t1 = collectionEditorController.configPermissions ? collectionEditorController.configPermissions({
+    t0 = collectionEditorController.configPermissions ? collectionEditorController.configPermissions({
       user: authController.user
     }).createCollections : true;
     $[0] = authController;
     $[1] = collectionEditorController;
-    $[2] = t1;
+    $[2] = t0;
   } else {
-    t1 = $[2];
+    t0 = $[2];
   }
-  const canCreateCollections = t1;
+  const canCreateCollections = t0;
   if (!navigation.initialised || (navigation.collections ?? []).length > 0) {
     return null;
   }
+  let t1;
   let t2;
-  let t3;
   if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "uppercase", children: "No collections found" });
-    t3 = /* @__PURE__ */ jsx(Typography, { children: "Start building collections in FireCMS easily. Map them to your existing database data, import from files, or use our templates." });
-    $[3] = t2;
-    $[4] = t3;
+    t1 = /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "uppercase", children: "No collections found" });
+    t2 = /* @__PURE__ */ jsx(Typography, { children: "Start building collections in FireCMS easily. Map them to your existing database data, import from files, or use our templates." });
+    $[3] = t1;
+    $[4] = t2;
   } else {
-    t2 = $[3];
-    t3 = $[4];
+    t1 = $[3];
+    t2 = $[4];
   }
-  let t4;
+  let t3;
   if ($[5] !== canCreateCollections || $[6] !== collectionEditorController) {
-    t4 = canCreateCollections && /* @__PURE__ */ jsxs(Button, { onClick: collectionEditorController && canCreateCollections ? () => collectionEditorController.createCollection({
+    t3 = canCreateCollections && /* @__PURE__ */ jsxs(Button, { onClick: collectionEditorController && canCreateCollections ? () => collectionEditorController.createCollection({
       parentCollectionIds: [],
       redirect: true,
       sourceClick: "new_collection_card"
@@ -10621,31 +10811,31 @@ function IntroWidget(t0) {
     ] });
     $[5] = canCreateCollections;
     $[6] = collectionEditorController;
-    $[7] = t4;
+    $[7] = t3;
   } else {
-    t4 = $[7];
+    t3 = $[7];
   }
-  let t5;
+  let t4;
   if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = /* @__PURE__ */ jsx(Typography, { color: "secondary", children: "You can also define collections programmatically." });
-    $[8] = t5;
+    t4 = /* @__PURE__ */ jsx(Typography, { color: "secondary", children: "You can also define collections programmatically." });
+    $[8] = t4;
   } else {
-    t5 = $[8];
+    t4 = $[8];
   }
-  let t6;
-  if ($[9] !== t4) {
-    t6 = /* @__PURE__ */ jsxs(Paper, { className: "my-4 px-4 py-6 flex flex-col  bg-white dark:bg-surface-accent-800 gap-2", children: [
+  let t5;
+  if ($[9] !== t3) {
+    t5 = /* @__PURE__ */ jsxs(Paper, { className: "my-4 px-4 py-6 flex flex-col  bg-white dark:bg-surface-accent-800 gap-2", children: [
+      t1,
       t2,
       t3,
-      t4,
-      t5
+      t4
     ] });
-    $[9] = t4;
-    $[10] = t6;
+    $[9] = t3;
+    $[10] = t5;
   } else {
-    t6 = $[10];
+    t5 = $[10];
   }
-  return t6;
+  return t5;
 }
 const mergeCollections = (baseCollections, backendCollections = [], modifyCollection) => {
   const markAsEditable = (c2) => {