@firecms/collection_editor 3.0.0-beta.11 → 3.0.0-beta.13

package/dist/index.es.js

@@ -1,10 +1,10 @@
 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, isEmptyObject, ConfirmationDialog, 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 { useAutoComplete, Chip, Typography, cls, TextField, Autocomplete, AutocompleteItem, SelectItem, Container, Tooltip, 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, Card, 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, 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 * as Yup from "yup";
 import { useFormex, getIn, Field, useCreateFormex, Formex, clone } from "@firecms/formex";
 import { extractEnumFromValues, buildPropertyFromData, buildEntityPropertiesFromData } from "@firecms/schema_inference";
@@ -21,13 +21,154 @@ const YupSchema = Yup.object().shape({
 const useCollectionEditorController = () => {
   return useContext(CollectionEditorContext);
 };
+function LayoutModeSwitch(t0) {
+  const $ = c(29);
+  const {
+    value,
+    onChange,
+    className
+  } = t0;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cls(className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /* @__PURE__ */ jsx(Typography, { variant: "label", color: "secondary", className: "ml-3.5", children: "Document view" });
+    t3 = cls("flex flex-row gap-4");
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== onChange) {
+    t4 = () => onChange("side_panel");
+    $[4] = onChange;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const t5 = value === "side_panel" ? "border-primary dark:border-primary" : "border-surface-400 dark:border-surface-600";
+  let t6;
+  if ($[6] !== t5) {
+    t6 = cls("my-2 rounded-md mx-0 p-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center", "text-surface-700 dark:text-surface-accent-300", "hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary", t5);
+    $[6] = t5;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  let t8;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /* @__PURE__ */ jsx(VerticalSplitIcon, {});
+    t8 = /* @__PURE__ */ jsx(Typography, { variant: "label", children: "Side panel" });
+    $[8] = t7;
+    $[9] = t8;
+  } else {
+    t7 = $[8];
+    t8 = $[9];
+  }
+  let t9;
+  if ($[10] !== t4 || $[11] !== t6) {
+    t9 = /* @__PURE__ */ jsx(Tooltip, { title: "Documents are open in a side panel", children: /* @__PURE__ */ jsxs(Card, { onClick: t4, className: t6, children: [
+      t7,
+      t8
+    ] }) });
+    $[10] = t4;
+    $[11] = t6;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== onChange) {
+    t10 = () => onChange("full_screen");
+    $[13] = onChange;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  const t11 = value === "full_screen" ? "border-primary dark:border-primary" : "border-surface-400 dark:border-surface-600";
+  let t12;
+  if ($[15] !== t11) {
+    t12 = cls("my-2 rounded-md mx-0 p-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center", "text-surface-700 dark:text-surface-accent-300", "hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary", t11);
+    $[15] = t11;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  let t14;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = /* @__PURE__ */ jsx(SquareIcon, {});
+    t14 = /* @__PURE__ */ jsx(Typography, { variant: "label", children: "Full screen" });
+    $[17] = t13;
+    $[18] = t14;
+  } else {
+    t13 = $[17];
+    t14 = $[18];
+  }
+  let t15;
+  if ($[19] !== t10 || $[20] !== t12) {
+    t15 = /* @__PURE__ */ jsx(Tooltip, { title: "Documents are open full-screen", children: /* @__PURE__ */ jsxs(Card, { onClick: t10, className: t12, children: [
+      t13,
+      t14
+    ] }) });
+    $[19] = t10;
+    $[20] = t12;
+    $[21] = t15;
+  } else {
+    t15 = $[21];
+  }
+  let t16;
+  if ($[22] !== t15 || $[23] !== t9) {
+    t16 = /* @__PURE__ */ jsxs("div", { className: t3, children: [
+      t9,
+      t15
+    ] });
+    $[22] = t15;
+    $[23] = t9;
+    $[24] = t16;
+  } else {
+    t16 = $[24];
+  }
+  let t17;
+  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "ml-3.5", children: "Should documents be opened full screen or in an inline side dialog" });
+    $[25] = t17;
+  } else {
+    t17 = $[25];
+  }
+  let t18;
+  if ($[26] !== t1 || $[27] !== t16) {
+    t18 = /* @__PURE__ */ jsxs("div", { className: t1, children: [
+      t2,
+      t16,
+      t17
+    ] });
+    $[26] = t1;
+    $[27] = t16;
+    $[28] = t18;
+  } else {
+    t18 = $[28];
+  }
+  return t18;
+}
 function CollectionDetailsForm(t0) {
-  const $ = c(168);
+  const $ = c(176);
   const {
     isNewCollection,
     reservedGroups,
     groups,
-    parentCollection
+    parentCollection,
+    children
   } = t0;
   const groupRef = React__default.useRef(null);
   const {
@@ -40,7 +181,7 @@ function CollectionDetailsForm(t0) {
     isSubmitting,
     submitCount
   } = useFormex();
-  const collectionEditor = useCollectionEditorController();
+  useCollectionEditorController();
   const [iconDialogOpen, setIconDialogOpen] = useState(false);
   const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);
   let t1;
@@ -96,7 +237,6 @@ function CollectionDetailsForm(t0) {
     t4 = $[8];
   }
   useEffect(t3, t4);
-  const DatabaseField = collectionEditor.components?.DatabaseField ?? DefaultDatabaseField;
   let t5;
   if ($[9] !== values) {
     t5 = /* @__PURE__ */ jsx(IconForView, { collectionOrView: values });
@@ -154,154 +294,153 @@ function CollectionDetailsForm(t0) {
     t12 = $[14];
   }
   let t13;
-  if ($[15] !== DatabaseField || $[16] !== updateDatabaseId || $[17] !== values.databaseId) {
-    t13 = /* @__PURE__ */ jsx(DatabaseField, { databaseId: values.databaseId, onDatabaseIdUpdate: updateDatabaseId });
-    $[15] = DatabaseField;
-    $[16] = updateDatabaseId;
-    $[17] = values.databaseId;
-    $[18] = t13;
+  if ($[15] !== updateDatabaseId || $[16] !== values.databaseId) {
+    t13 = /* @__PURE__ */ jsx(DefaultDatabaseField, { databaseId: values.databaseId, onDatabaseIdUpdate: updateDatabaseId });
+    $[15] = updateDatabaseId;
+    $[16] = values.databaseId;
+    $[17] = t13;
   } else {
-    t13 = $[18];
+    t13 = $[17];
   }
   let t14;
-  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
     t14 = () => setIconDialogOpen(true);
-    $[19] = t14;
+    $[18] = t14;
   } else {
-    t14 = $[19];
+    t14 = $[18];
   }
   let t15;
-  if ($[20] !== collectionIcon) {
+  if ($[19] !== collectionIcon) {
     t15 = /* @__PURE__ */ jsx(Tooltip, { title: "Change icon", asChild: true, children: /* @__PURE__ */ jsx(IconButton, { shape: "square", onClick: t14, children: collectionIcon }) });
-    $[20] = collectionIcon;
-    $[21] = t15;
+    $[19] = collectionIcon;
+    $[20] = t15;
   } else {
-    t15 = $[21];
+    t15 = $[20];
   }
   let t16;
-  if ($[22] !== t12 || $[23] !== t13 || $[24] !== t15) {
+  if ($[21] !== t12 || $[22] !== t13 || $[23] !== t15) {
     t16 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 py-2 pt-3 items-center", children: [
       t12,
       t13,
       t15
     ] });
-    $[22] = t12;
-    $[23] = t13;
-    $[24] = t15;
-    $[25] = t16;
+    $[21] = t12;
+    $[22] = t13;
+    $[23] = t15;
+    $[24] = t16;
   } else {
-    t16 = $[25];
+    t16 = $[24];
   }
   let t17;
-  if ($[26] !== parentCollection) {
+  if ($[25] !== parentCollection) {
     t17 = parentCollection && /* @__PURE__ */ jsx(Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
       "This is a subcollection of ",
       /* @__PURE__ */ jsx("b", { children: parentCollection.name })
     ] }) });
-    $[26] = parentCollection;
-    $[27] = t17;
+    $[25] = parentCollection;
+    $[26] = t17;
   } else {
-    t17 = $[27];
+    t17 = $[26];
   }
   let t18;
-  if ($[28] !== t16 || $[29] !== t17) {
+  if ($[27] !== t16 || $[28] !== t17) {
     t18 = /* @__PURE__ */ jsxs("div", { children: [
       t16,
       t17
     ] });
-    $[28] = t16;
-    $[29] = t17;
-    $[30] = t18;
+    $[27] = t16;
+    $[28] = t17;
+    $[29] = t18;
   } else {
-    t18 = $[30];
+    t18 = $[29];
   }
   const t19 = "grid grid-cols-12 gap-4";
   const t20 = values.name ?? "";
   let t21;
-  if ($[31] !== updateName) {
+  if ($[30] !== updateName) {
     t21 = (e) => updateName(e.target.value);
-    $[31] = updateName;
-    $[32] = t21;
+    $[30] = updateName;
+    $[31] = t21;
   } else {
-    t21 = $[32];
+    t21 = $[31];
   }
   const t22 = showErrors && Boolean(errors.name);
   let t23;
-  if ($[33] !== t20 || $[34] !== t21 || $[35] !== t22) {
+  if ($[32] !== t20 || $[33] !== t21 || $[34] !== t22) {
     t23 = /* @__PURE__ */ jsx(TextField, { value: t20, onChange: t21, label: "Name", autoFocus: true, required: true, error: t22 });
-    $[33] = t20;
-    $[34] = t21;
-    $[35] = t22;
-    $[36] = t23;
+    $[32] = t20;
+    $[33] = t21;
+    $[34] = t22;
+    $[35] = t23;
   } else {
-    t23 = $[36];
+    t23 = $[35];
   }
   const t24 = touched.name && Boolean(errors.name);
   const t25 = touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)";
   let t26;
-  if ($[37] !== t24 || $[38] !== t25) {
+  if ($[36] !== t24 || $[37] !== t25) {
     t26 = /* @__PURE__ */ jsx(FieldCaption, { error: t24, children: t25 });
-    $[37] = t24;
-    $[38] = t25;
-    $[39] = t26;
+    $[36] = t24;
+    $[37] = t25;
+    $[38] = t26;
   } else {
-    t26 = $[39];
+    t26 = $[38];
   }
   let t27;
-  if ($[40] !== t23 || $[41] !== t26) {
+  if ($[39] !== t23 || $[40] !== t26) {
     t27 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
       t23,
       t26
     ] });
-    $[40] = t23;
-    $[41] = t26;
-    $[42] = t27;
+    $[39] = t23;
+    $[40] = t26;
+    $[41] = t27;
   } else {
-    t27 = $[42];
+    t27 = $[41];
   }
   const t28 = isSubcollection ? "" : "sm:col-span-8";
   let t29;
-  if ($[43] !== t28) {
+  if ($[42] !== t28) {
     t29 = cls("col-span-12 ", t28);
-    $[43] = t28;
-    $[44] = t29;
+    $[42] = t28;
+    $[43] = t29;
   } else {
-    t29 = $[44];
+    t29 = $[43];
   }
   const t30 = !isNewCollection;
   const t31 = showErrors && Boolean(errors.path);
   let t32;
-  if ($[45] !== t30 || $[46] !== t31) {
+  if ($[44] !== t30 || $[45] !== t31) {
     t32 = /* @__PURE__ */ jsx(Field, { name: "path", as: DebouncedTextField, label: "Path", disabled: t30, required: true, error: t31 });
-    $[45] = t30;
-    $[46] = t31;
-    $[47] = t32;
+    $[44] = t30;
+    $[45] = t31;
+    $[46] = t32;
   } else {
-    t32 = $[47];
+    t32 = $[46];
   }
   const t33 = touched.path && Boolean(errors.path);
   const t34 = touched.path && Boolean(errors.path) ? errors.path : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "Path that this collection is stored in, in the database";
   let t35;
-  if ($[48] !== t33 || $[49] !== t34) {
+  if ($[47] !== t33 || $[48] !== t34) {
     t35 = /* @__PURE__ */ jsx(FieldCaption, { error: t33, children: t34 });
-    $[48] = t33;
-    $[49] = t34;
-    $[50] = t35;
+    $[47] = t33;
+    $[48] = t34;
+    $[49] = t35;
   } else {
-    t35 = $[50];
+    t35 = $[49];
   }
   let t36;
-  if ($[51] !== t29 || $[52] !== t32 || $[53] !== t35) {
+  if ($[50] !== t29 || $[51] !== t32 || $[52] !== t35) {
     t36 = /* @__PURE__ */ jsxs("div", { className: t29, children: [
       t32,
       t35
     ] });
-    $[51] = t29;
-    $[52] = t32;
-    $[53] = t35;
-    $[54] = t36;
+    $[50] = t29;
+    $[51] = t32;
+    $[52] = t35;
+    $[53] = t36;
   } else {
-    t36 = $[54];
+    t36 = $[53];
   }
   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" }),
@@ -311,471 +450,492 @@ function CollectionDetailsForm(t0) {
     }, children: /* @__PURE__ */ jsx("div", { className: "flex-grow", children: group_0 }) }, index + "_" + group_0)) }),
     /* @__PURE__ */ jsx(FieldCaption, { children: showErrors && Boolean(errors.group) ? errors.group : "Group in the home page" })
   ] });
-  let t38;
-  if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
-    t38 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
+  const t38 = values.openEntityMode ?? "side_panel";
+  let t39;
+  if ($[54] !== setFieldValue) {
+    t39 = (value) => setFieldValue("openEntityMode", value);
+    $[54] = setFieldValue;
+    $[55] = t39;
+  } else {
+    t39 = $[55];
+  }
+  let t40;
+  if ($[56] !== t38 || $[57] !== t39) {
+    t40 = /* @__PURE__ */ jsx(LayoutModeSwitch, { className: "col-span-12", value: t38, onChange: t39 });
+    $[56] = t38;
+    $[57] = t39;
+    $[58] = t40;
+  } 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" })
     ] });
-    $[55] = t38;
+    $[59] = t41;
   } else {
-    t38 = $[55];
+    t41 = $[59];
   }
-  const t39 = !isNewCollection;
-  const t40 = showErrors && Boolean(errors.id);
-  let t41;
-  if ($[56] !== t39 || $[57] !== t40) {
-    t41 = /* @__PURE__ */ jsx(Field, { name: "id", as: DebouncedTextField, disabled: t39, label: "Collection id", error: t40 });
-    $[56] = t39;
-    $[57] = t40;
-    $[58] = t41;
+  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 });
+    $[60] = t42;
+    $[61] = t43;
+    $[62] = t44;
   } else {
-    t41 = $[58];
+    t44 = $[62];
   }
-  const t42 = touched.id && Boolean(errors.id);
-  const t43 = touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path.";
-  let t44;
-  if ($[59] !== t42 || $[60] !== t43) {
-    t44 = /* @__PURE__ */ jsx(FieldCaption, { error: t42, children: t43 });
-    $[59] = t42;
-    $[60] = t43;
-    $[61] = t44;
-  } else {
-    t44 = $[61];
-  }
-  let t45;
-  if ($[62] !== t41 || $[63] !== t44) {
-    t45 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t41,
-      t44
+  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;
+  } else {
+    t47 = $[65];
+  }
+  let t48;
+  if ($[66] !== t44 || $[67] !== t47) {
+    t48 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t44,
+      t47
     ] });
-    $[62] = t41;
-    $[63] = t44;
-    $[64] = t45;
+    $[66] = t44;
+    $[67] = t47;
+    $[68] = t48;
   } else {
-    t45 = $[64];
+    t48 = $[68];
   }
-  const t46 = showErrors && Boolean(errors.singularName);
-  let t47;
-  if ($[65] !== handleChange || $[66] !== setFieldTouched) {
-    t47 = (e_0) => {
+  const t49 = showErrors && Boolean(errors.singularName);
+  let t50;
+  if ($[69] !== handleChange || $[70] !== setFieldTouched) {
+    t50 = (e_0) => {
       setFieldTouched("singularName", true);
       return handleChange(e_0);
     };
-    $[65] = handleChange;
-    $[66] = setFieldTouched;
-    $[67] = t47;
+    $[69] = handleChange;
+    $[70] = setFieldTouched;
+    $[71] = t50;
   } else {
-    t47 = $[67];
+    t50 = $[71];
   }
-  const t48 = values.singularName ?? "";
-  let t49;
-  if ($[68] !== t46 || $[69] !== t47 || $[70] !== t48) {
-    t49 = /* @__PURE__ */ jsx(TextField, { error: t46, name: "singularName", "aria-describedby": "singularName-helper", onChange: t47, value: t48, label: "Singular name" });
-    $[68] = t46;
-    $[69] = t47;
-    $[70] = t48;
-    $[71] = t49;
+  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 {
-    t49 = $[71];
+    t52 = $[75];
   }
-  const t50 = showErrors && Boolean(errors.singularName);
-  const t51 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities";
-  let t52;
-  if ($[72] !== t50 || $[73] !== t51) {
-    t52 = /* @__PURE__ */ jsx(FieldCaption, { error: t50, children: t51 });
-    $[72] = t50;
-    $[73] = t51;
-    $[74] = t52;
-  } else {
-    t52 = $[74];
-  }
-  let t53;
-  if ($[75] !== t49 || $[76] !== t52) {
-    t53 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t49,
-      t52
+  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 });
+    $[76] = t53;
+    $[77] = t54;
+    $[78] = t55;
+  } else {
+    t55 = $[78];
+  }
+  let t56;
+  if ($[79] !== t52 || $[80] !== t55) {
+    t56 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t52,
+      t55
     ] });
-    $[75] = t49;
-    $[76] = t52;
-    $[77] = t53;
+    $[79] = t52;
+    $[80] = t55;
+    $[81] = t56;
   } else {
-    t53 = $[77];
+    t56 = $[81];
   }
-  const t54 = showErrors && Boolean(errors.sideDialogWidth);
-  let t55;
-  if ($[78] !== setFieldTouched || $[79] !== setFieldValue) {
-    t55 = (e_1) => {
+  const t57 = showErrors && Boolean(errors.sideDialogWidth);
+  let t58;
+  if ($[82] !== setFieldTouched || $[83] !== setFieldValue) {
+    t58 = (e_1) => {
       setFieldTouched("sideDialogWidth", true);
-      const value = e_1.target.value;
-      if (!value) {
+      const value_0 = e_1.target.value;
+      if (!value_0) {
         setFieldValue("sideDialogWidth", null);
       } else {
-        if (!isNaN(Number(value))) {
-          setFieldValue("sideDialogWidth", Number(value));
+        if (!isNaN(Number(value_0))) {
+          setFieldValue("sideDialogWidth", Number(value_0));
         }
       }
     };
-    $[78] = setFieldTouched;
-    $[79] = setFieldValue;
-    $[80] = t55;
+    $[82] = setFieldTouched;
+    $[83] = setFieldValue;
+    $[84] = t58;
   } else {
-    t55 = $[80];
+    t58 = $[84];
   }
-  let t56;
-  if ($[81] !== setFieldValue) {
-    t56 = () => {
+  let t59;
+  if ($[85] !== setFieldValue) {
+    t59 = () => {
       setFieldValue("sideDialogWidth", null);
     };
-    $[81] = setFieldValue;
-    $[82] = t56;
+    $[85] = setFieldValue;
+    $[86] = t59;
   } else {
-    t56 = $[82];
+    t59 = $[86];
   }
-  const t57 = !values.sideDialogWidth;
-  let t58;
-  if ($[83] === Symbol.for("react.memo_cache_sentinel")) {
-    t58 = /* @__PURE__ */ jsx(CloseIcon, { size: "small" });
-    $[83] = t58;
+  const t60 = !values.sideDialogWidth;
+  let t61;
+  if ($[87] === Symbol.for("react.memo_cache_sentinel")) {
+    t61 = /* @__PURE__ */ jsx(CloseIcon, { size: "small" });
+    $[87] = t61;
   } else {
-    t58 = $[83];
+    t61 = $[87];
   }
-  let t59;
-  if ($[84] !== t56 || $[85] !== t57) {
-    t59 = /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: t56, disabled: t57, children: t58 });
-    $[84] = t56;
-    $[85] = t57;
-    $[86] = t59;
+  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;
   } else {
-    t59 = $[86];
+    t62 = $[90];
   }
-  const t60 = values.sideDialogWidth ?? "";
-  let t61;
-  if ($[87] !== t54 || $[88] !== t55 || $[89] !== t59 || $[90] !== t60) {
-    t61 = /* @__PURE__ */ jsx(TextField, { error: t54, name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: t55, endAdornment: t59, value: t60, label: "Side dialog width" });
-    $[87] = t54;
-    $[88] = t55;
-    $[89] = t59;
-    $[90] = t60;
-    $[91] = t61;
-  } else {
-    t61 = $[91];
-  }
-  const t62 = showErrors && Boolean(errors.singularName);
-  const t63 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px";
+  const t63 = values.sideDialogWidth ?? "";
   let t64;
-  if ($[92] !== t62 || $[93] !== t63) {
-    t64 = /* @__PURE__ */ jsx(FieldCaption, { error: t62, children: t63 });
-    $[92] = t62;
-    $[93] = t63;
-    $[94] = t64;
-  } else {
-    t64 = $[94];
-  }
-  let t65;
-  if ($[95] !== t61 || $[96] !== t64) {
-    t65 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t61,
-      t64
-    ] });
-    $[95] = t61;
-    $[96] = t64;
-    $[97] = t65;
-  } else {
-    t65 = $[97];
+  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";
+  let t67;
+  if ($[96] !== t65 || $[97] !== t66) {
+    t67 = /* @__PURE__ */ jsx(FieldCaption, { error: t65, children: t66 });
+    $[96] = t65;
+    $[97] = t66;
+    $[98] = t67;
+  } else {
+    t67 = $[98];
   }
-  const t66 = showErrors && Boolean(errors.description);
-  const t67 = values.description ?? "";
   let t68;
-  if ($[98] !== handleChange || $[99] !== t66 || $[100] !== t67) {
-    t68 = /* @__PURE__ */ jsx(TextField, { error: t66, name: "description", value: t67, onChange: handleChange, multiline: true, rows: 2, "aria-describedby": "description-helper-text", label: "Description" });
-    $[98] = handleChange;
-    $[99] = t66;
+  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 = showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown";
+  const t70 = values.description ?? "";
   let t71;
-  if ($[102] !== t69 || $[103] !== t70) {
-    t71 = /* @__PURE__ */ jsx(FieldCaption, { error: t69, children: t70 });
-    $[102] = t69;
-    $[103] = t70;
-    $[104] = t71;
-  } else {
-    t71 = $[104];
-  }
-  let t72;
-  if ($[105] !== t68 || $[106] !== t71) {
-    t72 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t68,
-      t71
-    ] });
-    $[105] = t68;
-    $[106] = t71;
-    $[107] = t72;
+  if ($[102] !== handleChange || $[103] !== t69 || $[104] !== t70) {
+    t71 = /* @__PURE__ */ jsx(TextField, { error: t69, name: "description", value: t70, onChange: handleChange, multiline: true, minRows: 2, "aria-describedby": "description-helper-text", label: "Description" });
+    $[102] = handleChange;
+    $[103] = t69;
+    $[104] = t70;
+    $[105] = t71;
   } else {
-    t72 = $[107];
+    t71 = $[105];
   }
-  const t73 = values.defaultSize ?? "";
+  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 ($[108] === Symbol.for("react.memo_cache_sentinel")) {
-    t74 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
+  if ($[106] !== t72 || $[107] !== t73) {
+    t74 = /* @__PURE__ */ jsx(FieldCaption, { error: t72, children: t73 });
+    $[106] = t72;
+    $[107] = t73;
     $[108] = t74;
   } else {
     t74 = $[108];
   }
   let t75;
-  if ($[109] !== handleChange || $[110] !== t73) {
-    t75 = /* @__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: t73, renderValue: _temp$b, children: t74 }) });
-    $[109] = handleChange;
-    $[110] = t73;
+  if ($[109] !== t71 || $[110] !== t74) {
+    t75 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t71,
+      t74
+    ] });
+    $[109] = t71;
+    $[110] = t74;
     $[111] = t75;
   } else {
     t75 = $[111];
   }
-  const t76 = customIdValue === "code_defined";
+  const t76 = values.defaultSize ?? "";
   let t77;
-  if ($[112] !== setFieldValue) {
-    t77 = (v) => {
+  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;
+  } else {
+    t78 = $[115];
+  }
+  const t79 = customIdValue === "code_defined";
+  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");
-            }
-          }
-        }
       }
+      setFieldValue("customId", v);
     };
-    $[112] = setFieldValue;
-    $[113] = t77;
+    $[116] = setFieldValue;
+    $[117] = t80;
   } else {
-    t77 = $[113];
-  }
-  const t78 = customIdValue ?? "";
-  let t79;
-  let t80;
-  let t81;
-  if ($[114] === Symbol.for("react.memo_cache_sentinel")) {
-    t79 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
-    t80 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
-    t81 = /* @__PURE__ */ jsx(SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
-    $[114] = t79;
-    $[115] = t80;
-    $[116] = t81;
-  } else {
-    t79 = $[114];
-    t80 = $[115];
-    t81 = $[116];
+    t80 = $[117];
   }
+  const t81 = customIdValue ?? "";
   let t82;
-  if ($[117] !== t76 || $[118] !== t77 || $[119] !== t78) {
-    t82 = /* @__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: t76, onValueChange: t77, value: t78, renderValue: _temp3$4, children: [
-      t79,
-      t80,
-      t81
-    ] }) });
-    $[117] = t76;
-    $[118] = t77;
-    $[119] = t78;
-    $[120] = t82;
-  } else {
-    t82 = $[120];
-  }
   let t83;
-  if ($[121] !== setFieldValue) {
-    t83 = (v_0) => setFieldValue("collectionGroup", v_0);
-    $[121] = setFieldValue;
-    $[122] = t83;
-  } else {
-    t83 = $[122];
+  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];
   }
-  const t84 = values.collectionGroup ?? false;
   let t85;
-  if ($[123] !== t83 || $[124] !== t84) {
-    t85 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: "Collection group", onValueChange: t83, value: t84 });
-    $[123] = t83;
-    $[124] = t84;
-    $[125] = 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;
   } else {
-    t85 = $[125];
+    t85 = $[124];
   }
   let t86;
-  if ($[126] === Symbol.for("react.memo_cache_sentinel")) {
-    t86 = /* @__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." });
+  if ($[125] !== setFieldValue) {
+    t86 = (v_0) => setFieldValue("collectionGroup", v_0);
+    $[125] = setFieldValue;
     $[126] = t86;
   } else {
     t86 = $[126];
   }
-  let t87;
-  if ($[127] !== t85) {
-    t87 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t85,
-      t86
-    ] });
-    $[127] = t85;
+  const t87 = values.collectionGroup ?? false;
+  let t88;
+  if ($[127] !== t86 || $[128] !== t87) {
+    t88 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t86, value: t87 });
+    $[127] = t86;
     $[128] = t87;
+    $[129] = t88;
   } else {
-    t87 = $[128];
+    t88 = $[129];
   }
-  let t88;
-  if ($[129] !== setFieldValue) {
-    t88 = (v_1) => setFieldValue("textSearchEnabled", v_1);
-    $[129] = setFieldValue;
-    $[130] = t88;
+  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;
   } else {
-    t88 = $[130];
+    t89 = $[130];
   }
-  const t89 = values.textSearchEnabled ?? false;
   let t90;
-  if ($[131] !== t88 || $[132] !== t89) {
-    t90 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", label: "Enable text search for this collection", onValueChange: t88, value: t89 });
+  if ($[131] !== t88) {
+    t90 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-4", children: [
+      t88,
+      t89
+    ] });
     $[131] = t88;
-    $[132] = t89;
-    $[133] = t90;
+    $[132] = t90;
   } else {
-    t90 = $[133];
+    t90 = $[132];
   }
   let t91;
-  if ($[134] === Symbol.for("react.memo_cache_sentinel")) {
-    t91 = /* @__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." });
+  if ($[133] !== setFieldValue) {
+    t91 = (v_1) => setFieldValue("textSearchEnabled", v_1);
+    $[133] = setFieldValue;
     $[134] = t91;
   } else {
     t91 = $[134];
   }
-  let t92;
-  if ($[135] !== t90) {
-    t92 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t90,
-      t91
-    ] });
-    $[135] = t90;
+  const t92 = values.textSearchEnabled ?? false;
+  let t93;
+  if ($[135] !== t91 || $[136] !== t92) {
+    t93 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t91, value: t92 });
+    $[135] = t91;
     $[136] = t92;
+    $[137] = t93;
   } else {
-    t92 = $[136];
+    t93 = $[137];
   }
-  let t93;
-  if ($[137] !== t45 || $[138] !== t53 || $[139] !== t65 || $[140] !== t72 || $[141] !== t75 || $[142] !== t82 || $[143] !== t87 || $[144] !== t92) {
-    t93 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
-      t45,
-      t53,
-      t65,
-      t72,
+  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;
+  } else {
+    t94 = $[138];
+  }
+  let t95;
+  if ($[139] !== t93) {
+    t95 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t93,
+      t94
+    ] });
+    $[139] = t93;
+    $[140] = t95;
+  } else {
+    t95 = $[140];
+  }
+  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,
-      t82,
-      t87,
-      t92
+      t78,
+      t85,
+      t90,
+      t95
     ] });
-    $[137] = t45;
-    $[138] = t53;
-    $[139] = t65;
-    $[140] = t72;
-    $[141] = t75;
-    $[142] = t82;
-    $[143] = t87;
-    $[144] = t92;
-    $[145] = t93;
-  } else {
-    t93 = $[145];
+    $[141] = t48;
+    $[142] = t56;
+    $[143] = t68;
+    $[144] = t75;
+    $[145] = t78;
+    $[146] = t85;
+    $[147] = t90;
+    $[148] = t95;
+    $[149] = t96;
+  } else {
+    t96 = $[149];
   }
-  let t94;
-  if ($[146] !== advancedPanelExpanded || $[147] !== t93) {
-    t94 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t38, initiallyExpanded: false, children: t93 }) });
-    $[146] = advancedPanelExpanded;
-    $[147] = t93;
-    $[148] = t94;
+  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;
   } else {
-    t94 = $[148];
+    t97 = $[152];
   }
-  let t95;
-  if ($[149] !== t27 || $[150] !== t36 || $[151] !== t37 || $[152] !== t94) {
-    t95 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
+  let t98;
+  if ($[153] !== children || $[154] !== t97) {
+    t98 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-8", children: [
+      t97,
+      children
+    ] });
+    $[153] = children;
+    $[154] = t97;
+    $[155] = t98;
+  } else {
+    t98 = $[155];
+  }
+  let t99;
+  if ($[156] !== t27 || $[157] !== t36 || $[158] !== t37 || $[159] !== t40 || $[160] !== t98) {
+    t99 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
       t27,
       t36,
       t37,
-      t94
+      t40,
+      t98
     ] });
-    $[149] = t27;
-    $[150] = t36;
-    $[151] = t37;
-    $[152] = t94;
-    $[153] = t95;
+    $[156] = t27;
+    $[157] = t36;
+    $[158] = t37;
+    $[159] = t40;
+    $[160] = t98;
+    $[161] = t99;
   } else {
-    t95 = $[153];
+    t99 = $[161];
   }
-  let t96;
-  if ($[154] === Symbol.for("react.memo_cache_sentinel")) {
-    t96 = /* @__PURE__ */ jsx("div", { style: {
+  let t100;
+  if ($[162] === Symbol.for("react.memo_cache_sentinel")) {
+    t100 = /* @__PURE__ */ jsx("div", { style: {
       height: "52px"
     } });
-    $[154] = t96;
+    $[162] = t100;
   } else {
-    t96 = $[154];
+    t100 = $[162];
   }
-  let t97;
-  if ($[155] !== setFieldValue) {
-    t97 = (icon) => {
+  let t101;
+  if ($[163] !== setFieldValue) {
+    t101 = (icon) => {
       setIconDialogOpen(false);
       setFieldValue("icon", icon);
     };
-    $[155] = setFieldValue;
-    $[156] = t97;
+    $[163] = setFieldValue;
+    $[164] = t101;
   } else {
-    t97 = $[156];
+    t101 = $[164];
   }
-  let t98;
-  if ($[157] !== t97 || $[158] !== values.icon) {
-    t98 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: values.icon, onIconSelected: t97 }) });
-    $[157] = t97;
-    $[158] = values.icon;
-    $[159] = t98;
+  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;
   } else {
-    t98 = $[159];
+    t102 = $[167];
   }
-  let t99;
-  if ($[160] !== iconDialogOpen || $[161] !== t98) {
-    t99 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t98 });
-    $[160] = iconDialogOpen;
-    $[161] = t98;
-    $[162] = t99;
+  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;
   } else {
-    t99 = $[162];
+    t103 = $[170];
   }
-  let t100;
-  if ($[163] !== T0 || $[164] !== t18 || $[165] !== t95 || $[166] !== t99) {
-    t100 = /* @__PURE__ */ jsx("div", { className: t7, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t8, className: t9, children: [
+  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: [
       t18,
-      t95,
-      t96,
-      t99
+      t99,
+      t100,
+      t103
     ] }) });
-    $[163] = T0;
-    $[164] = t18;
-    $[165] = t95;
-    $[166] = t99;
-    $[167] = t100;
+    $[171] = T0;
+    $[172] = t103;
+    $[173] = t18;
+    $[174] = t99;
+    $[175] = t104;
   } else {
-    t100 = $[167];
+    t104 = $[175];
   }
-  return t100;
+  return t104;
 }
-function _temp3$4(value_2) {
-  if (value_2 === "code_defined") {
+function _temp3$4(value_3) {
+  if (value_3 === "code_defined") {
     return "Code defined";
   } else {
-    if (value_2 === "true") {
+    if (value_3 === "true") {
       return "Users must define an ID";
     } else {
-      if (value_2 === "optional") {
+      if (value_3 === "optional") {
         return "Users can define an ID, but it is not required";
       } else {
         return "Document ID is generated automatically";
@@ -783,11 +943,11 @@ function _temp3$4(value_2) {
     }
   }
 }
-function _temp2$7(value_1) {
-  return /* @__PURE__ */ jsx(SelectItem, { value: value_1, children: value_1.toUpperCase() }, `size-select-${value_1}`);
+function _temp2$7(value_2) {
+  return /* @__PURE__ */ jsx(SelectItem, { value: value_2, children: value_2.toUpperCase() }, `size-select-${value_2}`);
 }
-function _temp$b(value_0) {
-  return value_0.toUpperCase();
+function _temp$b(value_1) {
+  return value_1.toUpperCase();
 }
 function DefaultDatabaseField(t0) {
   const $ = c(5);
@@ -1036,7 +1196,7 @@ function EnumFormFields(t0) {
   let t6;
   if ($[15] !== allowDataInference || $[16] !== disabled || $[17] !== inferValues || $[18] !== inferring) {
     t6 = allowDataInference && /* @__PURE__ */ jsxs(Button, { loading: inferring, disabled: disabled || inferring, variant: "text", size: "small", onClick: inferValues, children: [
-      inferring ? /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsx(AutorenewIcon, {}),
+      inferring ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsx(AutorenewIcon, {}),
       "Infer values from data"
     ] });
     $[15] = allowDataInference;
@@ -1080,7 +1240,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;
@@ -6432,9 +6592,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);
@@ -6462,7 +6624,7 @@ function GetCodeDialog(t0) {
   if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = /* @__PURE__ */ jsxs(Typography, { variant: "body2", className: "my-4 mb-8", children: [
       "If you want to customise the collection in code, you can add this collection code to your CMS app configuration. More info in the ",
-      /* @__PURE__ */ jsx("a", { rel: "noopener noreferrer", href: "https://firecms.co/docs/customization_quickstart", children: "docs" }),
+      /* @__PURE__ */ jsx("a", { rel: "noopener noreferrer", href: "https://firecms.co/docs/cloud/quickstart", children: "docs" }),
       "."
     ] });
     $[2] = t2;
@@ -6750,7 +6912,6 @@ function CollectionPropertiesEditorForm({
     previousId,
     namespace: namespace_3
   }) => {
-    console.log("!!!!!! onPropertyChanged", property_0);
     const fullId_0 = id_0 ? getFullId(id_0, namespace_3) : void 0;
     const propertyPath = fullId_0 ? idToPropertiesPath(fullId_0) : void 0;
     if (previousId && previousId !== id_0) {
@@ -8304,10 +8465,8 @@ function CollectionEditorImportMapping(t0) {
         editable: true
       };
       if (propertyPath_0) {
-        if (inferredNewProperty) {
+        {
           setFieldValue(propertyPath_0, inferredNewProperty, false);
-        } else {
-          setFieldValue(propertyPath_0, property_1, false);
         }
         setFieldTouched(propertyPath_0, true, false);
       }
@@ -8614,102 +8773,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) {
-    t8 = /* @__PURE__ */ jsx(EntityCollectionTable, { title: t4, tableController: t5, endAdornment: t6, filterable: false, sortable: false, selectionController, displayedColumnIds: t7, properties, enablePopupIcon: false });
-    $[13] = properties;
-    $[14] = selectionController;
-    $[15] = t5;
-    $[16] = t7;
-    $[17] = t8;
+  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 });
+    $[14] = properties;
+    $[15] = selectionController;
+    $[16] = t5;
+    $[17] = t7;
+    $[18] = t8;
   } else {
-    t8 = $[17];
+    t8 = $[18];
   }
   return t8;
 }
@@ -9169,7 +9330,7 @@ function CollectionEditorInternal({
   const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path;
   const pathError_0 = validatePath(path, isNewCollection, existingPaths, values_1.id);
   const parentPaths = !pathError_0 && parentCollectionIds ? navigation.convertIdsToPaths(parentCollectionIds) : void 0;
-  const resolvedPath = !pathError_0 ? navigation.resolveAliasesFrom(updatedFullPath) : void 0;
+  const resolvedPath = !pathError_0 ? navigation.resolveIdsFrom(updatedFullPath) : void 0;
   const getDataWithPath = resolvedPath && getData ? async () => {
     const data = await getData(resolvedPath, parentPaths ?? []);
     if (existingEntities) {
@@ -9206,82 +9367,109 @@ function CollectionEditorInternal({
     setNextMode();
   };
   const editable = collection?.editable === void 0 || collection?.editable === true;
+  const isMergedCollection = collection?.merged ?? false;
   const collectionEditable = editable || isNewCollection;
-  return /* @__PURE__ */ jsx(DialogContent, { fullHeight: true, children: /* @__PURE__ */ jsx(Formex, { value: formController, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-    !isNewCollection && /* @__PURE__ */ jsxs(Tabs, { value: currentView, innerClassName: cls(defaultBorderMixin, "justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
-      /* @__PURE__ */ jsx(Tab, { value: "details", children: "Details" }),
-      /* @__PURE__ */ jsx(Tab, { value: "properties", children: "Properties" }),
-      /* @__PURE__ */ jsx(Tab, { value: "subcollections", children: "Additional views" })
-    ] }),
-    /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: formController.handleSubmit, className: cls(isNewCollection ? "h-full" : "h-[calc(100%-48px)]", "flex-grow flex flex-col relative"), children: [
-      currentView === "loading" && /* @__PURE__ */ jsx(CircularProgressCenter, {}),
-      currentView === "extra_view" && path && extraView?.View && /* @__PURE__ */ jsx(extraView.View, { path }),
-      currentView === "welcome" && /* @__PURE__ */ jsx(CollectionEditorWelcomeView, { path, onContinue: (importData, propertiesOrder_0) => {
-        if (importData) {
-          onImportDataSet(importData, propertiesOrder_0);
-          setCurrentView("import_data_mapping");
-        } else {
-          setCurrentView("details");
-        }
-      }, existingCollectionPaths: existingPaths, parentCollection, pathSuggestions }),
-      currentView === "import_data_mapping" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportMapping, { importConfig, collectionEditable, propertyConfigs }),
-      currentView === "import_data_preview" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportDataPreview, { importConfig, properties: values_1.properties, propertiesOrder: values_1.propertiesOrder }),
-      currentView === "import_data_saving" && importConfig && /* @__PURE__ */ jsx(ImportSaveInProgress, { importConfig, collection: values_1, path, onImportSuccess: async (importedCollection) => {
-        snackbarController.open({
-          type: "info",
-          message: "Data imported successfully"
-        });
-        await saveCollection(values_1);
-        handleClose(importedCollection);
-      } }),
-      currentView === "details" && /* @__PURE__ */ jsx(CollectionDetailsForm, { existingPaths, existingIds, groups, parentCollectionIds, parentCollection, isNewCollection }),
-      currentView === "subcollections" && collection && /* @__PURE__ */ jsx(SubcollectionsEditTab, { parentCollection, configController, getUser, collectionInference, parentCollectionIds, collection }),
-      currentView === "properties" && /* @__PURE__ */ jsx(CollectionPropertiesEditorForm, { showErrors: submitCount > 0, isNewCollection, reservedGroups, onPropertyError: (propertyKey, namespace, error_0) => {
-        const current = removeUndefined({
-          ...propertyErrorsRef.current,
-          [getFullIdPath(propertyKey, namespace)]: removeUndefined(error_0, true)
-        }, true);
-        propertyErrorsRef.current = current;
-        formController.validate();
-      }, getUser, getData: getDataWithPath, doCollectionInference, propertyConfigs, collectionEditable, extraIcon: extraView?.icon && /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: () => setCurrentView("extra_view"), children: extraView.icon }) }),
-      currentView !== "welcome" && /* @__PURE__ */ jsxs(DialogActions, { position: "absolute", children: [
-        error && /* @__PURE__ */ jsx(ErrorView, { error }),
-        isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => {
-          importConfig.setInUse(false);
-          return setCurrentView("welcome");
-        }, children: [
-          /* @__PURE__ */ jsx(ArrowBackIcon, {}),
-          "Back"
-        ] }),
-        isNewCollection && includeTemplates && currentView === "import_data_preview" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => {
-          setCurrentView("import_data_mapping");
-        }, children: [
-          /* @__PURE__ */ jsx(ArrowBackIcon, {}),
-          "Back"
-        ] }),
-        isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("welcome"), children: [
-          /* @__PURE__ */ jsx(ArrowBackIcon, {}),
-          "Back"
-        ] }),
-        isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("details"), children: [
-          /* @__PURE__ */ jsx(ArrowBackIcon, {}),
-          "Back"
-        ] }),
-        /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => {
-          handleCancel();
-        }, children: "Cancel" }),
-        isNewCollection && currentView === "import_data_mapping" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: onImportMappingComplete, children: "Next" }),
-        isNewCollection && currentView === "import_data_preview" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: () => {
-          setNextMode();
-        }, children: "Next" }),
-        isNewCollection && (currentView === "details" || currentView === "properties") && /* @__PURE__ */ jsxs(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled: isSubmitting || currentView === "details" && !validValues, startIcon: currentView === "properties" ? /* @__PURE__ */ jsx(CheckIcon, {}) : void 0, children: [
-          currentView === "details" && "Next",
-          currentView === "properties" && "Create collection"
-        ] }),
-        !isNewCollection && /* @__PURE__ */ jsx(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, children: "Update collection" })
+  const [deleteRequested, setDeleteRequested] = useState(false);
+  const deleteCollection = () => {
+    if (!collection) return;
+    configController?.deleteCollection({
+      id: collection.id
+    }).then(() => {
+      setDeleteRequested(false);
+      handleCancel();
+      snackbarController.open({
+        message: "Collection deleted",
+        type: "success"
+      });
+    });
+  };
+  return /* @__PURE__ */ jsxs(DialogContent, { fullHeight: true, children: [
+    /* @__PURE__ */ jsx(Formex, { value: formController, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      !isNewCollection && /* @__PURE__ */ jsxs(Tabs, { value: currentView, innerClassName: cls(defaultBorderMixin, "px-4 h-14 w-full justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
+        /* @__PURE__ */ jsx(Tab, { value: "details", children: "Details" }),
+        /* @__PURE__ */ jsx(Tab, { value: "properties", children: "Properties" }),
+        /* @__PURE__ */ jsx(Tab, { value: "subcollections", children: "Additional views" })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: formController.handleSubmit, className: cls(isNewCollection ? "h-full" : "h-[calc(100%-48px)]", "flex-grow flex flex-col relative"), children: [
+        currentView === "loading" && /* @__PURE__ */ jsx(CircularProgressCenter, {}),
+        currentView === "extra_view" && path && extraView?.View && /* @__PURE__ */ jsx(extraView.View, { path }),
+        currentView === "welcome" && /* @__PURE__ */ jsx(CollectionEditorWelcomeView, { path, onContinue: (importData, propertiesOrder_0) => {
+          if (importData) {
+            onImportDataSet(importData, propertiesOrder_0);
+            setCurrentView("import_data_mapping");
+          } else {
+            setCurrentView("details");
+          }
+        }, existingCollectionPaths: existingPaths, parentCollection, pathSuggestions }),
+        currentView === "import_data_mapping" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportMapping, { importConfig, collectionEditable, propertyConfigs }),
+        currentView === "import_data_preview" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportDataPreview, { importConfig, properties: values_1.properties, propertiesOrder: values_1.propertiesOrder }),
+        currentView === "import_data_saving" && importConfig && /* @__PURE__ */ jsx(ImportSaveInProgress, { importConfig, collection: values_1, path, onImportSuccess: async (importedCollection) => {
+          snackbarController.open({
+            type: "info",
+            message: "Data imported successfully"
+          });
+          await saveCollection(values_1);
+          handleClose(importedCollection);
+        } }),
+        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, { color: "neutral", onClick: () => {
+            setDeleteRequested(true);
+          }, children: "Reset to code" })
+        ] }) }),
+        currentView === "subcollections" && collection && /* @__PURE__ */ jsx(SubcollectionsEditTab, { parentCollection, configController, getUser, collectionInference, parentCollectionIds, collection }),
+        currentView === "properties" && /* @__PURE__ */ jsx(CollectionPropertiesEditorForm, { showErrors: submitCount > 0, isNewCollection, reservedGroups, onPropertyError: (propertyKey, namespace, error_0) => {
+          const current = removeUndefined({
+            ...propertyErrorsRef.current,
+            [getFullIdPath(propertyKey, namespace)]: removeUndefined(error_0, true)
+          }, true);
+          propertyErrorsRef.current = current;
+          formController.validate();
+        }, getUser, getData: getDataWithPath, doCollectionInference, propertyConfigs, collectionEditable, extraIcon: extraView?.icon && /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: () => setCurrentView("extra_view"), children: extraView.icon }) }),
+        currentView !== "welcome" && /* @__PURE__ */ jsxs(DialogActions, { position: "absolute", children: [
+          error && /* @__PURE__ */ jsx(ErrorView, { error }),
+          isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => {
+            importConfig.setInUse(false);
+            return setCurrentView("welcome");
+          }, children: [
+            /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            "Back"
+          ] }),
+          isNewCollection && includeTemplates && currentView === "import_data_preview" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => {
+            setCurrentView("import_data_mapping");
+          }, children: [
+            /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            "Back"
+          ] }),
+          isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("welcome"), children: [
+            /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            "Back"
+          ] }),
+          isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("details"), children: [
+            /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            "Back"
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => {
+            handleCancel();
+          }, children: "Cancel" }),
+          isNewCollection && currentView === "import_data_mapping" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: onImportMappingComplete, children: "Next" }),
+          isNewCollection && currentView === "import_data_preview" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: () => {
+            setNextMode();
+          }, children: "Next" }),
+          isNewCollection && (currentView === "details" || currentView === "properties") && /* @__PURE__ */ jsxs(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled: isSubmitting || currentView === "details" && !validValues, startIcon: currentView === "properties" ? /* @__PURE__ */ jsx(CheckIcon, {}) : void 0, children: [
+            currentView === "details" && "Next",
+            currentView === "properties" && "Create collection"
+          ] }),
+          !isNewCollection && /* @__PURE__ */ jsx(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, children: "Update collection" })
+        ] })
       ] })
-    ] })
-  ] }) }) });
+    ] }) }),
+    /* @__PURE__ */ jsx(ConfirmationDialog, { open: deleteRequested, onAccept: deleteCollection, onCancel: () => setDeleteRequested(false), title: /* @__PURE__ */ jsx(Fragment, { children: "Delete the stored config?" }), body: /* @__PURE__ */ jsxs(Fragment, { children: [
+      " This will ",
+      /* @__PURE__ */ jsx("b", { children: "not delete any data" }),
+      ", only the stored config, and reset to the code state."
+    ] }) })
+  ] });
 }
 function applyPropertyConfigs(collection, propertyConfigs) {
   const {
@@ -9345,7 +9533,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(68);
+  const $ = c(67);
   const {
     children,
     collectionConfigController,
@@ -9356,8 +9544,7 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
     getPathSuggestions,
     getUser,
     getData,
-    onAnalyticsEvent,
-    components
+    onAnalyticsEvent
   } = t0;
   const navigation = useNavigationController();
   const navigate = useNavigate();
@@ -9475,28 +9662,26 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
   const createCollection = t3;
   const t4 = configPermissions ?? defaultConfigPermissions;
   let t5;
-  if ($[6] !== components || $[7] !== createCollection || $[8] !== editCollection || $[9] !== editProperty || $[10] !== getPathSuggestions || $[11] !== t4) {
+  if ($[6] !== createCollection || $[7] !== editCollection || $[8] !== editProperty || $[9] !== getPathSuggestions || $[10] !== t4) {
     t5 = {
       editCollection,
       createCollection,
       editProperty,
       configPermissions: t4,
-      getPathSuggestions,
-      components
+      getPathSuggestions
     };
-    $[6] = components;
-    $[7] = createCollection;
-    $[8] = editCollection;
-    $[9] = editProperty;
-    $[10] = getPathSuggestions;
-    $[11] = t4;
-    $[12] = t5;
+    $[6] = createCollection;
+    $[7] = editCollection;
+    $[8] = editProperty;
+    $[9] = getPathSuggestions;
+    $[10] = t4;
+    $[11] = t5;
   } else {
-    t5 = $[12];
+    t5 = $[11];
   }
   const t6 = Boolean(currentDialog);
   let t7;
-  if ($[13] !== currentDialog || $[14] !== navigate || $[15] !== navigation) {
+  if ($[12] !== currentDialog || $[13] !== navigate || $[14] !== navigation) {
     t7 = (collection_0) => {
       if (currentDialog?.redirect) {
         if (collection_0 && currentDialog?.isNewCollection && !currentDialog.parentCollectionIds.length) {
@@ -9506,29 +9691,29 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
       }
       setCurrentDialog(void 0);
     };
-    $[13] = currentDialog;
-    $[14] = navigate;
-    $[15] = navigation;
-    $[16] = t7;
+    $[12] = currentDialog;
+    $[13] = navigate;
+    $[14] = navigation;
+    $[15] = t7;
   } else {
-    t7 = $[16];
+    t7 = $[15];
   }
   let t8;
-  if ($[17] !== collectionConfigController || $[18] !== collectionInference || $[19] !== currentDialog || $[20] !== extraView || $[21] !== getData || $[22] !== getPathSuggestions || $[23] !== getUser || $[24] !== reservedGroups || $[25] !== t6 || $[26] !== t7) {
+  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 });
-    $[17] = collectionConfigController;
-    $[18] = collectionInference;
-    $[19] = currentDialog;
-    $[20] = extraView;
-    $[21] = getData;
-    $[22] = getPathSuggestions;
-    $[23] = getUser;
-    $[24] = reservedGroups;
-    $[25] = t6;
-    $[26] = t7;
-    $[27] = t8;
+    $[16] = collectionConfigController;
+    $[17] = collectionInference;
+    $[18] = currentDialog;
+    $[19] = extraView;
+    $[20] = getData;
+    $[21] = getPathSuggestions;
+    $[22] = getUser;
+    $[23] = reservedGroups;
+    $[24] = t6;
+    $[25] = t7;
+    $[26] = t8;
   } else {
-    t8 = $[27];
+    t8 = $[26];
   }
   const t9 = Boolean(currentPropertyDialog);
   const t10 = Boolean(currentPropertyDialog?.propertyKey);
@@ -9536,21 +9721,21 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
   const t12 = !currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey;
   const t13 = currentPropertyDialog?.collectionEditable ?? false;
   let t14;
-  if ($[28] !== currentPropertyDialog || $[29] !== getData || $[30] !== navigation) {
+  if ($[27] !== currentPropertyDialog || $[28] !== getData || $[29] !== navigation) {
     t14 = getData && currentPropertyDialog?.editedCollectionId ? () => {
       console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
-      const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionId);
+      const resolvedPath = navigation.resolveIdsFrom(currentPropertyDialog.editedCollectionId);
       return getData(resolvedPath, []);
     } : void 0;
-    $[28] = currentPropertyDialog;
-    $[29] = getData;
-    $[30] = navigation;
-    $[31] = t14;
+    $[27] = currentPropertyDialog;
+    $[28] = getData;
+    $[29] = navigation;
+    $[30] = t14;
   } else {
-    t14 = $[31];
+    t14 = $[30];
   }
   let t15;
-  if ($[32] !== collectionConfigController || $[33] !== currentPropertyDialog || $[34] !== snackbarController) {
+  if ($[31] !== collectionConfigController || $[32] !== currentPropertyDialog || $[33] !== snackbarController) {
     t15 = (t162) => {
       const {
         id: id_0,
@@ -9579,15 +9764,15 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         return false;
       });
     };
-    $[32] = collectionConfigController;
-    $[33] = currentPropertyDialog;
-    $[34] = snackbarController;
-    $[35] = t15;
+    $[31] = collectionConfigController;
+    $[32] = currentPropertyDialog;
+    $[33] = snackbarController;
+    $[34] = t15;
   } else {
-    t15 = $[35];
+    t15 = $[34];
   }
   let t16;
-  if ($[36] !== collectionConfigController || $[37] !== currentPropertyDialog?.currentPropertiesOrder || $[38] !== currentPropertyDialog?.editedCollectionId || $[39] !== currentPropertyDialog?.namespace || $[40] !== currentPropertyDialog?.parentCollectionIds || $[41] !== currentPropertyDialog?.propertyKey || $[42] !== snackbarController) {
+  if ($[35] !== collectionConfigController || $[36] !== currentPropertyDialog?.currentPropertiesOrder || $[37] !== currentPropertyDialog?.editedCollectionId || $[38] !== currentPropertyDialog?.namespace || $[39] !== currentPropertyDialog?.parentCollectionIds || $[40] !== currentPropertyDialog?.propertyKey || $[41] !== snackbarController) {
     t16 = () => {
       if (!currentPropertyDialog?.propertyKey) {
         return;
@@ -9610,21 +9795,21 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         return false;
       });
     };
-    $[36] = collectionConfigController;
-    $[37] = currentPropertyDialog?.currentPropertiesOrder;
-    $[38] = currentPropertyDialog?.editedCollectionId;
-    $[39] = currentPropertyDialog?.namespace;
-    $[40] = currentPropertyDialog?.parentCollectionIds;
-    $[41] = currentPropertyDialog?.propertyKey;
-    $[42] = snackbarController;
-    $[43] = t16;
+    $[35] = collectionConfigController;
+    $[36] = currentPropertyDialog?.currentPropertiesOrder;
+    $[37] = currentPropertyDialog?.editedCollectionId;
+    $[38] = currentPropertyDialog?.namespace;
+    $[39] = currentPropertyDialog?.parentCollectionIds;
+    $[40] = currentPropertyDialog?.propertyKey;
+    $[41] = snackbarController;
+    $[42] = t16;
   } else {
-    t16 = $[43];
+    t16 = $[42];
   }
   let t17;
   let t18;
   let t19;
-  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
     t17 = () => {
       setCurrentPropertyDialog(void 0);
     };
@@ -9632,64 +9817,64 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
       setCurrentPropertyDialog(void 0);
     };
     t19 = {};
-    $[44] = t17;
-    $[45] = t18;
-    $[46] = t19;
+    $[43] = t17;
+    $[44] = t18;
+    $[45] = t19;
   } else {
-    t17 = $[44];
-    t18 = $[45];
-    t19 = $[46];
+    t17 = $[43];
+    t18 = $[44];
+    t19 = $[45];
   }
   let t20;
-  if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
     t20 = [];
-    $[47] = t20;
+    $[46] = t20;
   } else {
-    t20 = $[47];
+    t20 = $[46];
   }
   const t21 = currentPropertyDialog?.property;
   const t22 = currentPropertyDialog?.propertyKey;
   let t23;
-  if ($[48] !== propertyConfigs || $[49] !== t10 || $[50] !== t11 || $[51] !== t12 || $[52] !== t13 || $[53] !== t14 || $[54] !== t15 || $[55] !== t16 || $[56] !== t21 || $[57] !== t22 || $[58] !== t9) {
+  if ($[47] !== propertyConfigs || $[48] !== t10 || $[49] !== t11 || $[50] !== t12 || $[51] !== t13 || $[52] !== t14 || $[53] !== t15 || $[54] !== t16 || $[55] !== t21 || $[56] !== t22 || $[57] !== 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 });
-    $[48] = propertyConfigs;
-    $[49] = t10;
-    $[50] = t11;
-    $[51] = t12;
-    $[52] = t13;
-    $[53] = t14;
-    $[54] = t15;
-    $[55] = t16;
-    $[56] = t21;
-    $[57] = t22;
-    $[58] = t9;
-    $[59] = t23;
-  } else {
-    t23 = $[59];
+    $[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];
   }
   let t24;
-  if ($[60] !== children || $[61] !== t23 || $[62] !== t5 || $[63] !== t8) {
+  if ($[59] !== children || $[60] !== t23 || $[61] !== t5 || $[62] !== t8) {
     t24 = /* @__PURE__ */ jsxs(CollectionEditorContext.Provider, { value: t5, children: [
       children,
       t8,
       t23
     ] });
-    $[60] = children;
-    $[61] = t23;
-    $[62] = t5;
-    $[63] = t8;
-    $[64] = t24;
+    $[59] = children;
+    $[60] = t23;
+    $[61] = t5;
+    $[62] = t8;
+    $[63] = t24;
   } else {
-    t24 = $[64];
+    t24 = $[63];
   }
   let t25;
-  if ($[65] !== collectionConfigController || $[66] !== t24) {
+  if ($[64] !== collectionConfigController || $[65] !== t24) {
     t25 = /* @__PURE__ */ jsx(ConfigControllerContext.Provider, { value: collectionConfigController, children: t24 });
-    $[65] = collectionConfigController;
-    $[66] = t24;
-    $[67] = t25;
+    $[64] = collectionConfigController;
+    $[65] = t24;
+    $[66] = t25;
   } else {
-    t25 = $[67];
+    t25 = $[66];
   }
   return t25;
 }, equal);
@@ -10304,7 +10489,7 @@ function NewCollectionCard(t0) {
   return t8;
 }
 function useCollectionEditorPlugin(t0) {
-  const $ = c(16);
+  const $ = c(15);
   const {
     collectionConfigController,
     configPermissions,
@@ -10314,11 +10499,10 @@ function useCollectionEditorPlugin(t0) {
     getUser,
     collectionInference,
     getData,
-    onAnalyticsEvent,
-    components
+    onAnalyticsEvent
   } = t0;
   let t1;
-  if ($[0] !== collectionConfigController || $[1] !== collectionInference || $[2] !== components || $[3] !== configPermissions || $[4] !== extraView || $[5] !== getData || $[6] !== getPathSuggestions || $[7] !== getUser || $[8] !== onAnalyticsEvent || $[9] !== reservedGroups) {
+  if ($[0] !== collectionConfigController || $[1] !== collectionInference || $[2] !== configPermissions || $[3] !== extraView || $[4] !== getData || $[5] !== getPathSuggestions || $[6] !== getUser || $[7] !== onAnalyticsEvent || $[8] !== reservedGroups) {
     t1 = {
       Component: ConfigControllerProvider,
       props: {
@@ -10330,27 +10514,25 @@ function useCollectionEditorPlugin(t0) {
         getPathSuggestions,
         getUser,
         getData,
-        onAnalyticsEvent,
-        components
+        onAnalyticsEvent
       }
     };
     $[0] = collectionConfigController;
     $[1] = collectionInference;
-    $[2] = components;
-    $[3] = configPermissions;
-    $[4] = extraView;
-    $[5] = getData;
-    $[6] = getPathSuggestions;
-    $[7] = getUser;
-    $[8] = onAnalyticsEvent;
-    $[9] = reservedGroups;
-    $[10] = t1;
+    $[2] = configPermissions;
+    $[3] = extraView;
+    $[4] = getData;
+    $[5] = getPathSuggestions;
+    $[6] = getUser;
+    $[7] = onAnalyticsEvent;
+    $[8] = reservedGroups;
+    $[9] = t1;
   } else {
-    t1 = $[10];
+    t1 = $[9];
   }
   let t2;
   let t3;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = {
       additionalActions: /* @__PURE__ */ jsx(NewCollectionButton, {}),
       additionalChildrenStart: /* @__PURE__ */ jsx(IntroWidget, {}),
@@ -10363,14 +10545,14 @@ function useCollectionEditorPlugin(t0) {
       HeaderAction: CollectionViewHeaderAction,
       AddColumnComponent: PropertyAddColumnComponent
     };
-    $[11] = t2;
-    $[12] = t3;
+    $[10] = t2;
+    $[11] = t3;
   } else {
-    t2 = $[11];
-    t3 = $[12];
+    t2 = $[10];
+    t3 = $[11];
   }
   let t4;
-  if ($[13] !== collectionConfigController.loading || $[14] !== t1) {
+  if ($[12] !== collectionConfigController.loading || $[13] !== t1) {
     t4 = {
       key: "collection_editor",
       loading: collectionConfigController.loading,
@@ -10378,11 +10560,11 @@ function useCollectionEditorPlugin(t0) {
       homePage: t2,
       collectionView: t3
     };
-    $[13] = collectionConfigController.loading;
-    $[14] = t1;
-    $[15] = t4;
+    $[12] = collectionConfigController.loading;
+    $[13] = t1;
+    $[14] = t4;
   } else {
-    t4 = $[15];
+    t4 = $[14];
   }
   return t4;
 }
@@ -10458,17 +10640,19 @@ function IntroWidget(t0) {
   }
   return t6;
 }
-const mergeCollections = (baseCollections, backendCollections, modifyCollection) => {
+const mergeCollections = (baseCollections, backendCollections = [], modifyCollection) => {
   const markAsEditable = (c2) => {
     makePropertiesEditable(c2.properties);
     c2.subcollections?.forEach(markAsEditable);
   };
-  const storedCollections = backendCollections ?? [];
-  storedCollections.forEach(markAsEditable);
-  console.debug("Collections specified in code:", baseCollections);
-  console.debug("Collections stored in the backend", storedCollections);
-  const result = joinCollectionLists(baseCollections, storedCollections, [], modifyCollection);
-  console.debug("Collections after joining:", result);
+  backendCollections.forEach(markAsEditable);
+  const result = joinCollectionLists(baseCollections, backendCollections, [], modifyCollection);
+  result.sort((a, b) => baseCollections.findIndex((c2) => c2.id === a.id) - baseCollections.findIndex((c2) => c2.id === b.id));
+  console.debug("Collections result", {
+    baseCollections,
+    backendCollections,
+    result
+  });
   return result;
 };
 function MissingReferenceWidget(t0) {