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

package/dist/index.umd.js

@@ -28,13 +28,154 @@
   const useCollectionEditorController = () => {
     return React.useContext(CollectionEditorContext);
   };
+  function LayoutModeSwitch(t0) {
+    const $ = reactCompilerRuntime.c(29);
+    const {
+      value,
+      onChange,
+      className
+    } = t0;
+    let t1;
+    if ($[0] !== className) {
+      t1 = ui.cls(className);
+      $[0] = className;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    let t2;
+    let t3;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", color: "secondary", className: "ml-3.5", children: "Document view" });
+      t3 = ui.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 = ui.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__ */ jsxRuntime.jsx(ui.VerticalSplitIcon, {});
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "Side panel" });
+      $[8] = t7;
+      $[9] = t8;
+    } else {
+      t7 = $[8];
+      t8 = $[9];
+    }
+    let t9;
+    if ($[10] !== t4 || $[11] !== t6) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Documents are open in a side panel", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.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 = ui.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__ */ jsxRuntime.jsx(ui.SquareIcon, {});
+      t14 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "Full screen" });
+      $[17] = t13;
+      $[18] = t14;
+    } else {
+      t13 = $[17];
+      t14 = $[18];
+    }
+    let t15;
+    if ($[19] !== t10 || $[20] !== t12) {
+      t15 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Documents are open full-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs("div", { className: t1, children: [
+        t2,
+        t16,
+        t17
+      ] });
+      $[26] = t1;
+      $[27] = t16;
+      $[28] = t18;
+    } else {
+      t18 = $[28];
+    }
+    return t18;
+  }
   function CollectionDetailsForm(t0) {
-    const $ = reactCompilerRuntime.c(168);
+    const $ = reactCompilerRuntime.c(176);
     const {
       isNewCollection,
       reservedGroups,
       groups,
-      parentCollection
+      parentCollection,
+      children
     } = t0;
     const groupRef = React.useRef(null);
     const {
@@ -47,7 +188,7 @@
       isSubmitting,
       submitCount
     } = formex.useFormex();
-    const collectionEditor = useCollectionEditorController();
+    useCollectionEditorController();
     const [iconDialogOpen, setIconDialogOpen] = React.useState(false);
     const [advancedPanelExpanded, setAdvancedPanelExpanded] = React.useState(false);
     let t1;
@@ -103,7 +244,6 @@
       t4 = $[8];
     }
     React.useEffect(t3, t4);
-    const DatabaseField = collectionEditor.components?.DatabaseField ?? DefaultDatabaseField;
     let t5;
     if ($[9] !== values) {
       t5 = /* @__PURE__ */ jsxRuntime.jsx(core.IconForView, { collectionOrView: values });
@@ -161,154 +301,153 @@
       t12 = $[14];
     }
     let t13;
-    if ($[15] !== DatabaseField || $[16] !== updateDatabaseId || $[17] !== values.databaseId) {
-      t13 = /* @__PURE__ */ jsxRuntime.jsx(DatabaseField, { databaseId: values.databaseId, onDatabaseIdUpdate: updateDatabaseId });
-      $[15] = DatabaseField;
-      $[16] = updateDatabaseId;
-      $[17] = values.databaseId;
-      $[18] = t13;
+    if ($[15] !== updateDatabaseId || $[16] !== values.databaseId) {
+      t13 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Change icon", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", children: [
         "This is a subcollection of ",
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.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 = ui.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__ */ jsxRuntime.jsx(formex.Field, { name: "path", as: ui.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "col-span-12 sm:col-span-4 relative", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { error: showErrors && Boolean(errors.group), disabled: isSubmitting, value: values.group ?? "", autoComplete: "off", onChange: (event) => setFieldValue("group", event.target.value), name: "group", inputRef: groupRef, label: "Group" }),
@@ -318,471 +457,492 @@
       }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow", children: group_0 }) }, index + "_" + group_0)) }),
       /* @__PURE__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-row text-surface-500", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.SettingsIcon, {}),
         /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(formex.Field, { name: "id", as: ui.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__ */ jsxRuntime.jsx(formex.Field, { name: "id", as: ui.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__ */ jsxRuntime.jsx(core.FieldCaption, { error: t42, children: t43 });
-      $[59] = t42;
-      $[60] = t43;
-      $[61] = t44;
-    } else {
-      t44 = $[61];
-    }
-    let t45;
-    if ($[62] !== t41 || $[63] !== t44) {
-      t45 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(core.FieldCaption, { error: t45, children: t46 });
+      $[63] = t45;
+      $[64] = t46;
+      $[65] = t47;
+    } else {
+      t47 = $[65];
+    }
+    let t48;
+    if ($[66] !== t44 || $[67] !== t47) {
+      t48 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.FieldCaption, { error: t50, children: t51 });
-      $[72] = t50;
-      $[73] = t51;
-      $[74] = t52;
-    } else {
-      t52 = $[74];
-    }
-    let t53;
-    if ($[75] !== t49 || $[76] !== t52) {
-      t53 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(core.FieldCaption, { error: t53, children: t54 });
+      $[76] = t53;
+      $[77] = t54;
+      $[78] = t55;
+    } else {
+      t55 = $[78];
+    }
+    let t56;
+    if ($[79] !== t52 || $[80] !== t55) {
+      t56 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" });
-      $[83] = t58;
+    const t60 = !values.sideDialogWidth;
+    let t61;
+    if ($[87] === Symbol.for("react.memo_cache_sentinel")) {
+      t61 = /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" });
+      $[87] = t61;
     } else {
-      t58 = $[83];
+      t61 = $[87];
     }
-    let t59;
-    if ($[84] !== t56 || $[85] !== t57) {
-      t59 = /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: t56, disabled: t57, children: t58 });
-      $[84] = t56;
-      $[85] = t57;
-      $[86] = t59;
+    let t62;
+    if ($[88] !== t59 || $[89] !== t60) {
+      t62 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.FieldCaption, { error: t62, children: t63 });
-      $[92] = t62;
-      $[93] = t63;
-      $[94] = t64;
-    } else {
-      t64 = $[94];
-    }
-    let t65;
-    if ($[95] !== t61 || $[96] !== t64) {
-      t65 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(core.FieldCaption, { error: t69, children: t70 });
-      $[102] = t69;
-      $[103] = t70;
-      $[104] = t71;
-    } else {
-      t71 = $[104];
-    }
-    let t72;
-    if ($[105] !== t68 || $[106] !== t71) {
-      t72 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t68,
-        t71
-      ] });
-      $[105] = t68;
-      $[106] = t71;
-      $[107] = t72;
+    if ($[102] !== handleChange || $[103] !== t69 || $[104] !== t70) {
+      t71 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.FieldCaption, { error: t72, children: t73 });
+      $[106] = t72;
+      $[107] = t73;
       $[108] = t74;
     } else {
       t74 = $[108];
     }
     let t75;
-    if ($[109] !== handleChange || $[110] !== t73) {
-      t75 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: "Document ID is generated automatically" });
-      t80 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: "Users must define an ID" });
-      t81 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: 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__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: "Document ID is generated automatically" });
+      t83 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: "Users must define an ID" });
+      t84 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: 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__ */ jsxRuntime.jsx(core.FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
+    if ($[125] !== setFieldValue) {
+      t86 = (v_0) => setFieldValue("collectionGroup", v_0);
+      $[125] = setFieldValue;
       $[126] = t86;
     } else {
       t86 = $[126];
     }
-    let t87;
-    if ($[127] !== t85) {
-      t87 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
+      $[130] = t89;
     } else {
-      t88 = $[130];
+      t89 = $[130];
     }
-    const t89 = values.textSearchEnabled ?? false;
     let t90;
-    if ($[131] !== t88 || $[132] !== t89) {
-      t90 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", label: "Enable text search for this collection", onValueChange: t88, value: t89 });
+    if ($[131] !== t88) {
+      t90 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+    if ($[133] !== setFieldValue) {
+      t91 = (v_1) => setFieldValue("textSearchEnabled", v_1);
+      $[133] = setFieldValue;
       $[134] = t91;
     } else {
       t91 = $[134];
     }
-    let t92;
-    if ($[135] !== t90) {
-      t92 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+      $[138] = t94;
+    } else {
+      t94 = $[138];
+    }
+    let t95;
+    if ($[139] !== t93) {
+      t95 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs("div", { className: t19, children: [
+    let t98;
+    if ($[153] !== children || $[154] !== t97) {
+      t98 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: {
+    let t100;
+    if ($[162] === Symbol.for("react.memo_cache_sentinel")) {
+      t100 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(core.SearchIconsView, { selectedIcon: values.icon, onIconSelected: t97 }) });
-      $[157] = t97;
-      $[158] = values.icon;
-      $[159] = t98;
+    let t102;
+    if ($[165] !== t101 || $[166] !== values.icon) {
+      t102 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: t7, children: /* @__PURE__ */ jsxRuntime.jsxs(T0, { maxWidth: t8, className: t9, children: [
+    let t104;
+    if ($[171] !== T0 || $[172] !== t103 || $[173] !== t18 || $[174] !== t99) {
+      t104 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t7, children: /* @__PURE__ */ jsxRuntime.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";
@@ -790,11 +950,11 @@
       }
     }
   }
-  function _temp2$7(value_1) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: value_1, children: value_1.toUpperCase() }, `size-select-${value_1}`);
+  function _temp2$7(value_2) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.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 $ = reactCompilerRuntime.c(5);
@@ -1043,7 +1203,7 @@
     let t6;
     if ($[15] !== allowDataInference || $[16] !== disabled || $[17] !== inferValues || $[18] !== inferring) {
       t6 = allowDataInference && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { loading: inferring, disabled: disabled || inferring, variant: "text", size: "small", onClick: inferValues, children: [
-        inferring ? /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.AutorenewIcon, {}),
+        inferring ? /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.AutorenewIcon, {}),
         "Infer values from data"
       ] });
       $[15] = allowDataInference;
@@ -1087,7 +1247,7 @@
     }
     let t10;
     if ($[26] !== buildEntry || $[27] !== disabled || $[28] !== enumValuesPath || $[29] !== t8 || $[30] !== values.enumValues) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsx(core.ArrayContainer, { droppableId: enumValuesPath, addLabel: "Add enum value", value: values.enumValues, disabled, size: "small", buildEntry, onInternalIdAdded: setLastInternalIdAdded, includeAddButton: true, onValueChange: t8, newDefaultEntry: t9 });
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(core.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;
@@ -6439,9 +6599,11 @@
   }
   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 $ = reactCompilerRuntime.c(22);
@@ -6469,7 +6631,7 @@
     if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
       t2 = /* @__PURE__ */ jsxRuntime.jsxs(ui.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__ */ jsxRuntime.jsx("a", { rel: "noopener noreferrer", href: "https://firecms.co/docs/customization_quickstart", children: "docs" }),
+        /* @__PURE__ */ jsxRuntime.jsx("a", { rel: "noopener noreferrer", href: "https://firecms.co/docs/cloud/quickstart", children: "docs" }),
         "."
       ] });
       $[2] = t2;
@@ -6757,7 +6919,6 @@
       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) {
@@ -8311,10 +8472,8 @@
           editable: true
         };
         if (propertyPath_0) {
-          if (inferredNewProperty) {
+          {
             setFieldValue(propertyPath_0, inferredNewProperty, false);
-          } else {
-            setFieldValue(propertyPath_0, property_1, false);
           }
           setFieldTouched(propertyPath_0, true, false);
         }
@@ -8621,102 +8780,104 @@
     return t9;
   }
   function CollectionEditorImportDataPreview(t0) {
-    const $ = reactCompilerRuntime.c(18);
+    const $ = reactCompilerRuntime.c(19);
     const {
       importConfig,
       properties,
       propertiesOrder
     } = t0;
+    const authController = core.useAuthController();
     const [loading, setLoading] = React.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) => data_import_export.convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, "TEMP_PATH", importConfig.defaultValues));
+        const mappedData = importConfig.importData.map((d) => data_import_export.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];
     }
     React.useEffect(t2, t3);
     const selectionController = core.useSelectionController();
     if (loading) {
       let t42;
-      if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+      if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
         t42 = /* @__PURE__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", children: "Imported data preview" }),
         /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(core.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;
   }
@@ -9176,7 +9337,7 @@
     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) {
@@ -9213,82 +9374,109 @@
       setNextMode();
     };
     const editable = collection?.editable === void 0 || collection?.editable === true;
+    const isMergedCollection = collection?.merged ?? false;
     const collectionEditable = editable || isNewCollection;
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.DialogContent, { fullHeight: true, children: /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formController, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      !isNewCollection && /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: currentView, innerClassName: ui.cls(ui.defaultBorderMixin, "justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "details", children: "Details" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "properties", children: "Properties" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "subcollections", children: "Additional views" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("form", { noValidate: true, onSubmit: formController.handleSubmit, className: ui.cls(isNewCollection ? "h-full" : "h-[calc(100%-48px)]", "flex-grow flex flex-col relative"), children: [
-        currentView === "loading" && /* @__PURE__ */ jsxRuntime.jsx(core.CircularProgressCenter, {}),
-        currentView === "extra_view" && path && extraView?.View && /* @__PURE__ */ jsxRuntime.jsx(extraView.View, { path }),
-        currentView === "welcome" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CollectionEditorImportMapping, { importConfig, collectionEditable, propertyConfigs }),
-        currentView === "import_data_preview" && importConfig && /* @__PURE__ */ jsxRuntime.jsx(CollectionEditorImportDataPreview, { importConfig, properties: values_1.properties, propertiesOrder: values_1.propertiesOrder }),
-        currentView === "import_data_saving" && importConfig && /* @__PURE__ */ jsxRuntime.jsx(data_import_export.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__ */ jsxRuntime.jsx(CollectionDetailsForm, { existingPaths, existingIds, groups, parentCollectionIds, parentCollection, isNewCollection }),
-        currentView === "subcollections" && collection && /* @__PURE__ */ jsxRuntime.jsx(SubcollectionsEditTab, { parentCollection, configController, getUser, collectionInference, parentCollectionIds, collection }),
-        currentView === "properties" && /* @__PURE__ */ jsxRuntime.jsx(CollectionPropertiesEditorForm, { showErrors: submitCount > 0, isNewCollection, reservedGroups, onPropertyError: (propertyKey, namespace, error_0) => {
-          const current = core.removeUndefined({
-            ...propertyErrorsRef.current,
-            [getFullIdPath(propertyKey, namespace)]: core.removeUndefined(error_0, true)
-          }, true);
-          propertyErrorsRef.current = current;
-          formController.validate();
-        }, getUser, getData: getDataWithPath, doCollectionInference, propertyConfigs, collectionEditable, extraIcon: extraView?.icon && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "primary", onClick: () => setCurrentView("extra_view"), children: extraView.icon }) }),
-        currentView !== "welcome" && /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { position: "absolute", children: [
-          error && /* @__PURE__ */ jsxRuntime.jsx(core.ErrorView, { error }),
-          isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", onClick: () => {
-            importConfig.setInUse(false);
-            return setCurrentView("welcome");
-          }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
-            "Back"
-          ] }),
-          isNewCollection && includeTemplates && currentView === "import_data_preview" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", onClick: () => {
-            setCurrentView("import_data_mapping");
-          }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
-            "Back"
-          ] }),
-          isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", onClick: () => setCurrentView("welcome"), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
-            "Back"
-          ] }),
-          isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", onClick: () => setCurrentView("details"), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
-            "Back"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: () => {
-            handleCancel();
-          }, children: "Cancel" }),
-          isNewCollection && currentView === "import_data_mapping" && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "filled", color: "primary", onClick: onImportMappingComplete, children: "Next" }),
-          isNewCollection && currentView === "import_data_preview" && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "filled", color: "primary", onClick: () => {
-            setNextMode();
-          }, children: "Next" }),
-          isNewCollection && (currentView === "details" || currentView === "properties") && /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled: isSubmitting || currentView === "details" && !validValues, startIcon: currentView === "properties" ? /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, {}) : void 0, children: [
-            currentView === "details" && "Next",
-            currentView === "properties" && "Create collection"
-          ] }),
-          !isNewCollection && /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, children: "Update collection" })
+    const [deleteRequested, setDeleteRequested] = React.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__ */ jsxRuntime.jsxs(ui.DialogContent, { fullHeight: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(formex.Formex, { value: formController, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        !isNewCollection && /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: currentView, innerClassName: ui.cls(ui.defaultBorderMixin, "px-4 h-14 w-full justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "details", children: "Details" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "properties", children: "Properties" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { value: "subcollections", children: "Additional views" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("form", { noValidate: true, onSubmit: formController.handleSubmit, className: ui.cls(isNewCollection ? "h-full" : "h-[calc(100%-48px)]", "flex-grow flex flex-col relative"), children: [
+          currentView === "loading" && /* @__PURE__ */ jsxRuntime.jsx(core.CircularProgressCenter, {}),
+          currentView === "extra_view" && path && extraView?.View && /* @__PURE__ */ jsxRuntime.jsx(extraView.View, { path }),
+          currentView === "welcome" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CollectionEditorImportMapping, { importConfig, collectionEditable, propertyConfigs }),
+          currentView === "import_data_preview" && importConfig && /* @__PURE__ */ jsxRuntime.jsx(CollectionEditorImportDataPreview, { importConfig, properties: values_1.properties, propertiesOrder: values_1.propertiesOrder }),
+          currentView === "import_data_saving" && importConfig && /* @__PURE__ */ jsxRuntime.jsx(data_import_export.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__ */ jsxRuntime.jsx(CollectionDetailsForm, { existingPaths, existingIds, groups, parentCollectionIds, parentCollection, isNewCollection, children: !isNewCollection && isMergedCollection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mt-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.Button, { color: "neutral", onClick: () => {
+              setDeleteRequested(true);
+            }, children: "Reset to code" })
+          ] }) }),
+          currentView === "subcollections" && collection && /* @__PURE__ */ jsxRuntime.jsx(SubcollectionsEditTab, { parentCollection, configController, getUser, collectionInference, parentCollectionIds, collection }),
+          currentView === "properties" && /* @__PURE__ */ jsxRuntime.jsx(CollectionPropertiesEditorForm, { showErrors: submitCount > 0, isNewCollection, reservedGroups, onPropertyError: (propertyKey, namespace, error_0) => {
+            const current = core.removeUndefined({
+              ...propertyErrorsRef.current,
+              [getFullIdPath(propertyKey, namespace)]: core.removeUndefined(error_0, true)
+            }, true);
+            propertyErrorsRef.current = current;
+            formController.validate();
+          }, getUser, getData: getDataWithPath, doCollectionInference, propertyConfigs, collectionEditable, extraIcon: extraView?.icon && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "primary", onClick: () => setCurrentView("extra_view"), children: extraView.icon }) }),
+          currentView !== "welcome" && /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { position: "absolute", children: [
+            error && /* @__PURE__ */ jsxRuntime.jsx(core.ErrorView, { error }),
+            isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", onClick: () => {
+              importConfig.setInUse(false);
+              return setCurrentView("welcome");
+            }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
+              "Back"
+            ] }),
+            isNewCollection && includeTemplates && currentView === "import_data_preview" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", onClick: () => {
+              setCurrentView("import_data_mapping");
+            }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
+              "Back"
+            ] }),
+            isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", onClick: () => setCurrentView("welcome"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
+              "Back"
+            ] }),
+            isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", type: "button", onClick: () => setCurrentView("details"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowBackIcon, {}),
+              "Back"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: () => {
+              handleCancel();
+            }, children: "Cancel" }),
+            isNewCollection && currentView === "import_data_mapping" && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "filled", color: "primary", onClick: onImportMappingComplete, children: "Next" }),
+            isNewCollection && currentView === "import_data_preview" && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "filled", color: "primary", onClick: () => {
+              setNextMode();
+            }, children: "Next" }),
+            isNewCollection && (currentView === "details" || currentView === "properties") && /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled: isSubmitting || currentView === "details" && !validValues, startIcon: currentView === "properties" ? /* @__PURE__ */ jsxRuntime.jsx(ui.CheckIcon, {}) : void 0, children: [
+              currentView === "details" && "Next",
+              currentView === "properties" && "Create collection"
+            ] }),
+            !isNewCollection && /* @__PURE__ */ jsxRuntime.jsx(ui.LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, children: "Update collection" })
+          ] })
         ] })
-      ] })
-    ] }) }) });
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.ConfirmationDialog, { open: deleteRequested, onAccept: deleteCollection, onCancel: () => setDeleteRequested(false), title: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Delete the stored config?" }), body: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        " This will ",
+        /* @__PURE__ */ jsxRuntime.jsx("b", { children: "not delete any data" }),
+        ", only the stored config, and reset to the code state."
+      ] }) })
+    ] });
   }
   function applyPropertyConfigs(collection, propertyConfigs) {
     const {
@@ -9352,7 +9540,7 @@
   const ConfigControllerContext = React.createContext({});
   const CollectionEditorContext = React.createContext({});
   const ConfigControllerProvider = React.memo(function ConfigControllerProvider2(t0) {
-    const $ = reactCompilerRuntime.c(68);
+    const $ = reactCompilerRuntime.c(67);
     const {
       children,
       collectionConfigController,
@@ -9363,8 +9551,7 @@
       getPathSuggestions,
       getUser,
       getData,
-      onAnalyticsEvent,
-      components
+      onAnalyticsEvent
     } = t0;
     const navigation = core.useNavigationController();
     const navigate = reactRouter.useNavigate();
@@ -9482,28 +9669,26 @@
     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) {
@@ -9513,29 +9698,29 @@
         }
         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__ */ jsxRuntime.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);
@@ -9543,21 +9728,21 @@
     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,
@@ -9586,15 +9771,15 @@
           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;
@@ -9617,21 +9802,21 @@
           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);
       };
@@ -9639,64 +9824,64 @@
         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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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);
@@ -10311,7 +10496,7 @@
     return t8;
   }
   function useCollectionEditorPlugin(t0) {
-    const $ = reactCompilerRuntime.c(16);
+    const $ = reactCompilerRuntime.c(15);
     const {
       collectionConfigController,
       configPermissions,
@@ -10321,11 +10506,10 @@
       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: {
@@ -10337,27 +10521,25 @@
           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__ */ jsxRuntime.jsx(NewCollectionButton, {}),
         additionalChildrenStart: /* @__PURE__ */ jsxRuntime.jsx(IntroWidget, {}),
@@ -10370,14 +10552,14 @@
         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,
@@ -10385,11 +10567,11 @@
         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;
   }
@@ -10465,17 +10647,19 @@
     }
     return t6;
   }
-  const mergeCollections = (baseCollections, backendCollections, modifyCollection) => {
+  const mergeCollections = (baseCollections, backendCollections = [], modifyCollection) => {
     const markAsEditable = (c) => {
       core.makePropertiesEditable(c.properties);
       c.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 = core.joinCollectionLists(baseCollections, storedCollections, [], modifyCollection);
-    console.debug("Collections after joining:", result);
+    backendCollections.forEach(markAsEditable);
+    const result = core.joinCollectionLists(baseCollections, backendCollections, [], modifyCollection);
+    result.sort((a, b) => baseCollections.findIndex((c) => c.id === a.id) - baseCollections.findIndex((c) => c.id === b.id));
+    console.debug("Collections result", {
+      baseCollections,
+      backendCollections,
+      result
+    });
     return result;
   };
   function MissingReferenceWidget(t0) {