@firecms/collection_editor 3.0.0-canary.248 → 3.0.0-canary.249

package/dist/index.umd.js

@@ -169,7 +169,7 @@
     return t18;
   }
   function CollectionDetailsForm(t0) {
-    const $ = reactCompilerRuntime.c(196);
+    const $ = reactCompilerRuntime.c(192);
     const {
       isNewCollection,
       reservedGroups,
@@ -185,7 +185,6 @@
       touched,
       errors,
       setFieldTouched,
-      isSubmitting,
       submitCount
     } = formex.useFormex();
     useCollectionEditorController();
@@ -253,7 +252,7 @@
       t5 = $[10];
     }
     const collectionIcon = t5;
-    const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
+    groups?.filter((group) => !reservedGroups?.includes(group));
     let t6;
     if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
       t6 = {
@@ -263,10 +262,7 @@
     } else {
       t6 = $[11];
     }
-    const {
-      autoCompleteOpen,
-      setAutoCompleteOpen
-    } = ui.useAutoComplete(t6);
+    ui.useAutoComplete(t6);
     const isSubcollection = !!parentCollection;
     let customIdValue;
     if (typeof values.customId === "object") {
@@ -285,333 +281,317 @@
       }
     }
     const showErrors = submitCount > 0;
-    const t7 = "overflow-auto my-auto";
-    const T0 = ui.Container;
-    const t8 = "4xl";
-    const t9 = "flex flex-col gap-4 p-8 m-auto";
-    const t10 = !isNewCollection ? "h5" : "h4";
-    const t11 = isNewCollection ? "New collection" : `${values?.name} collection`;
-    let t12;
-    if ($[12] !== t10 || $[13] !== t11) {
-      t12 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: t10, className: "flex-grow", children: t11 });
-      $[12] = t10;
-      $[13] = t11;
-      $[14] = t12;
+    const t7 = !isNewCollection ? "h5" : "h4";
+    const t8 = isNewCollection ? "New collection" : `${values?.name} collection`;
+    let t9;
+    if ($[12] !== t7 || $[13] !== t8) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: t7, className: "flex-grow", children: t8 });
+      $[12] = t7;
+      $[13] = t8;
+      $[14] = t9;
     } else {
-      t12 = $[14];
+      t9 = $[14];
     }
-    let t13;
+    let t10;
     if ($[15] !== updateDatabaseId || $[16] !== values.databaseId) {
-      t13 = /* @__PURE__ */ jsxRuntime.jsx(DefaultDatabaseField, { databaseId: values.databaseId, onDatabaseIdUpdate: updateDatabaseId });
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(DefaultDatabaseField, { databaseId: values.databaseId, onDatabaseIdUpdate: updateDatabaseId });
       $[15] = updateDatabaseId;
       $[16] = values.databaseId;
-      $[17] = t13;
+      $[17] = t10;
     } else {
-      t13 = $[17];
+      t10 = $[17];
     }
-    let t14;
+    let t11;
     if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-      t14 = () => setIconDialogOpen(true);
-      $[18] = t14;
+      t11 = () => setIconDialogOpen(true);
+      $[18] = t11;
     } else {
-      t14 = $[18];
+      t11 = $[18];
     }
-    let t15;
+    let t12;
     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 }) });
+      t12 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Change icon", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { shape: "square", onClick: t11, children: collectionIcon }) });
       $[19] = collectionIcon;
-      $[20] = t15;
+      $[20] = t12;
     } else {
-      t15 = $[20];
+      t12 = $[20];
     }
-    let t16;
-    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
+    let t13;
+    if ($[21] !== t10 || $[22] !== t12 || $[23] !== t9) {
+      t13 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 py-2 pt-3 items-center", children: [
+        t9,
+        t10,
+        t12
       ] });
-      $[21] = t12;
-      $[22] = t13;
-      $[23] = t15;
-      $[24] = t16;
+      $[21] = t10;
+      $[22] = t12;
+      $[23] = t9;
+      $[24] = t13;
     } else {
-      t16 = $[24];
+      t13 = $[24];
     }
-    let t17;
+    let t14;
     if ($[25] !== parentCollection) {
-      t17 = parentCollection && /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { colorScheme: "tealDarker", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", children: [
+      t14 = 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 })
       ] }) });
       $[25] = parentCollection;
-      $[26] = t17;
+      $[26] = t14;
     } else {
-      t17 = $[26];
+      t14 = $[26];
     }
-    let t18;
-    if ($[27] !== t16 || $[28] !== t17) {
-      t18 = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        t16,
-        t17
+    let t15;
+    if ($[27] !== t13 || $[28] !== t14) {
+      t15 = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        t13,
+        t14
       ] });
-      $[27] = t16;
-      $[28] = t17;
-      $[29] = t18;
+      $[27] = t13;
+      $[28] = t14;
+      $[29] = t15;
     } else {
-      t18 = $[29];
+      t15 = $[29];
     }
-    const t19 = "grid grid-cols-12 gap-4";
-    const t20 = values.name ?? "";
-    let t21;
+    const t16 = values.name ?? "";
+    let t17;
     if ($[30] !== updateName) {
-      t21 = (e) => updateName(e.target.value);
+      t17 = (e) => updateName(e.target.value);
       $[30] = updateName;
-      $[31] = t21;
+      $[31] = t17;
     } else {
-      t21 = $[31];
+      t17 = $[31];
+    }
+    const t18 = showErrors && Boolean(errors.name);
+    let t19;
+    if ($[32] !== t16 || $[33] !== t17 || $[34] !== t18) {
+      t19 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { value: t16, onChange: t17, label: "Name", autoFocus: true, required: true, error: t18 });
+      $[32] = t16;
+      $[33] = t17;
+      $[34] = t18;
+      $[35] = t19;
+    } else {
+      t19 = $[35];
+    }
+    const t20 = touched.name && Boolean(errors.name);
+    const t21 = touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)";
+    let t22;
+    if ($[36] !== t20 || $[37] !== t21) {
+      t22 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t20, children: t21 });
+      $[36] = t20;
+      $[37] = t21;
+      $[38] = t22;
+    } else {
+      t22 = $[38];
     }
-    const t22 = showErrors && Boolean(errors.name);
     let t23;
-    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 });
-      $[32] = t20;
-      $[33] = t21;
-      $[34] = t22;
-      $[35] = t23;
+    if ($[39] !== t19 || $[40] !== t22) {
+      t23 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t19,
+        t22
+      ] });
+      $[39] = t19;
+      $[40] = t22;
+      $[41] = t23;
     } else {
-      t23 = $[35];
+      t23 = $[41];
     }
-    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 ($[36] !== t24 || $[37] !== t25) {
-      t26 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t24, children: t25 });
-      $[36] = t24;
-      $[37] = t25;
-      $[38] = t26;
+    let t24;
+    if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+      t24 = ui.cls("col-span-12 ");
+      $[42] = t24;
     } else {
-      t26 = $[38];
+      t24 = $[42];
     }
+    const t25 = !isNewCollection;
+    const t26 = showErrors && Boolean(errors.path);
     let t27;
-    if ($[39] !== t23 || $[40] !== t26) {
-      t27 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t23,
-        t26
-      ] });
-      $[39] = t23;
-      $[40] = t26;
-      $[41] = t27;
+    if ($[43] !== t25 || $[44] !== t26) {
+      t27 = /* @__PURE__ */ jsxRuntime.jsx(formex.Field, { name: "path", as: ui.DebouncedTextField, label: "Path", disabled: t25, required: true, error: t26 });
+      $[43] = t25;
+      $[44] = t26;
+      $[45] = t27;
     } else {
-      t27 = $[41];
+      t27 = $[45];
     }
-    const t28 = isSubcollection ? "" : "sm:col-span-8";
-    let t29;
-    if ($[42] !== t28) {
-      t29 = ui.cls("col-span-12 ", t28);
-      $[42] = t28;
-      $[43] = t29;
-    } else {
-      t29 = $[43];
-    }
-    const t30 = !isNewCollection;
-    const t31 = showErrors && Boolean(errors.path);
-    let t32;
-    if ($[44] !== t30 || $[45] !== t31) {
-      t32 = /* @__PURE__ */ jsxRuntime.jsx(formex.Field, { name: "path", as: ui.DebouncedTextField, label: "Path", disabled: t30, required: true, error: t31 });
-      $[44] = t30;
-      $[45] = t31;
-      $[46] = t32;
-    } else {
-      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 ($[47] !== t33 || $[48] !== t34) {
-      t35 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t33, children: t34 });
-      $[47] = t33;
-      $[48] = t34;
-      $[49] = t35;
-    } else {
-      t35 = $[49];
+    const t28 = touched.path && Boolean(errors.path);
+    const t29 = 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 t30;
+    if ($[46] !== t28 || $[47] !== t29) {
+      t30 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t28, children: t29 });
+      $[46] = t28;
+      $[47] = t29;
+      $[48] = t30;
+    } else {
+      t30 = $[48];
     }
-    let t36;
-    if ($[50] !== t29 || $[51] !== t32 || $[52] !== t35) {
-      t36 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t29, children: [
-        t32,
-        t35
+    let t31;
+    if ($[49] !== t27 || $[50] !== t30) {
+      t31 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t24, children: [
+        t27,
+        t30
       ] });
-      $[50] = t29;
-      $[51] = t32;
-      $[52] = t35;
-      $[53] = t36;
-    } else {
-      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" }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Autocomplete, { open: autoCompleteOpen && (groupOptions ?? []).length > 0, setOpen: setAutoCompleteOpen, children: groupOptions?.map((group_0, index) => /* @__PURE__ */ jsxRuntime.jsx(ui.AutocompleteItem, { className: "pr-6 pl-14", onClick: () => {
-        setAutoCompleteOpen(false);
-        setFieldValue("group", group_0 ?? null);
-      }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow", children: group_0 }) }, index + "_" + group_0)) }),
-      /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: showErrors && Boolean(errors.group) ? errors.group : "Group in the home page" })
-    ] });
-    const t38 = values.openEntityMode ?? "side_panel";
-    let t39;
-    if ($[54] !== setFieldValue) {
-      t39 = (value) => setFieldValue("openEntityMode", value);
-      $[54] = setFieldValue;
-      $[55] = t39;
+      $[49] = t27;
+      $[50] = t30;
+      $[51] = t31;
     } else {
-      t39 = $[55];
+      t31 = $[51];
     }
-    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;
+    const t32 = values.openEntityMode ?? "side_panel";
+    let t33;
+    if ($[52] !== setFieldValue) {
+      t33 = (value) => setFieldValue("openEntityMode", value);
+      $[52] = setFieldValue;
+      $[53] = t33;
     } else {
-      t40 = $[58];
+      t33 = $[53];
     }
-    const t41 = values.history === null || values.history === void 0 ? "Document history revisions enabled if enabled globally" : values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled";
-    let t42;
-    if ($[59] !== setFieldValue) {
-      t42 = (v) => setFieldValue("history", v);
-      $[59] = setFieldValue;
-      $[60] = t42;
+    let t34;
+    if ($[54] !== t32 || $[55] !== t33) {
+      t34 = /* @__PURE__ */ jsxRuntime.jsx(LayoutModeSwitch, { className: "col-span-12", value: t32, onChange: t33 });
+      $[54] = t32;
+      $[55] = t33;
+      $[56] = t34;
     } else {
-      t42 = $[60];
+      t34 = $[56];
     }
-    const t43 = values.history === void 0 ? null : values.history;
-    let t44;
-    if ($[61] !== t41 || $[62] !== t42 || $[63] !== t43) {
-      t44 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", allowIndeterminate: true, label: t41, onValueChange: t42, value: t43 });
-      $[61] = t41;
-      $[62] = t42;
-      $[63] = t43;
-      $[64] = t44;
-    } else {
-      t44 = $[64];
-    }
-    let t45;
-    if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
-      t45 = /* @__PURE__ */ jsxRuntime.jsxs(core.FieldCaption, { children: [
+    const t35 = values.history === null || values.history === void 0 ? "Document history revisions enabled if enabled globally" : values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled";
+    let t36;
+    if ($[57] !== setFieldValue) {
+      t36 = (v) => setFieldValue("history", v);
+      $[57] = setFieldValue;
+      $[58] = t36;
+    } else {
+      t36 = $[58];
+    }
+    const t37 = values.history === void 0 ? null : values.history;
+    let t38;
+    if ($[59] !== t35 || $[60] !== t36 || $[61] !== t37) {
+      t38 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", allowIndeterminate: true, label: t35, onValueChange: t36, value: t37 });
+      $[59] = t35;
+      $[60] = t36;
+      $[61] = t37;
+      $[62] = t38;
+    } else {
+      t38 = $[62];
+    }
+    let t39;
+    if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
+      t39 = /* @__PURE__ */ jsxRuntime.jsxs(core.FieldCaption, { children: [
         "When enabled, each document in this collection will have a history of changes. This is useful for auditing purposes. The data is stored in a subcollection of the document in your database, called ",
         /* @__PURE__ */ jsxRuntime.jsx("b", { children: "__history" }),
         "."
       ] });
-      $[65] = t45;
+      $[63] = t39;
     } else {
-      t45 = $[65];
+      t39 = $[63];
     }
-    let t46;
-    if ($[66] !== t44) {
-      t46 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t44,
-        t45
+    let t40;
+    if ($[64] !== t38) {
+      t40 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t38,
+        t39
       ] });
-      $[66] = t44;
-      $[67] = t46;
+      $[64] = t38;
+      $[65] = t40;
     } else {
-      t46 = $[67];
+      t40 = $[65];
     }
-    let t47;
-    if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
-      t47 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row text-surface-500", children: [
+    let t41;
+    if ($[66] === 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" })
       ] });
-      $[68] = t47;
+      $[66] = t41;
     } else {
-      t47 = $[68];
+      t41 = $[66];
     }
-    const t48 = !isNewCollection;
-    const t49 = showErrors && Boolean(errors.id);
-    let t50;
-    if ($[69] !== t48 || $[70] !== t49) {
-      t50 = /* @__PURE__ */ jsxRuntime.jsx(formex.Field, { name: "id", as: ui.DebouncedTextField, disabled: t48, label: "Collection id", error: t49 });
-      $[69] = t48;
-      $[70] = t49;
-      $[71] = t50;
-    } else {
-      t50 = $[71];
-    }
-    const t51 = touched.id && Boolean(errors.id);
-    const t52 = touched.id && Boolean(errors.id) ? errors.id : "This id identifies this collection. Typically the same as the path.";
-    let t53;
-    if ($[72] !== t51 || $[73] !== t52) {
-      t53 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t51, children: t52 });
-      $[72] = t51;
-      $[73] = t52;
-      $[74] = t53;
-    } else {
-      t53 = $[74];
-    }
-    let t54;
-    if ($[75] !== t50 || $[76] !== t53) {
-      t54 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t50,
-        t53
-      ] });
-      $[75] = t50;
-      $[76] = t53;
-      $[77] = t54;
+    const t42 = !isNewCollection;
+    const t43 = showErrors && Boolean(errors.id);
+    let t44;
+    if ($[67] !== t42 || $[68] !== t43) {
+      t44 = /* @__PURE__ */ jsxRuntime.jsx(formex.Field, { name: "id", as: ui.DebouncedTextField, disabled: t42, label: "Collection id", error: t43 });
+      $[67] = t42;
+      $[68] = t43;
+      $[69] = t44;
     } else {
-      t54 = $[77];
+      t44 = $[69];
     }
-    const t55 = showErrors && Boolean(errors.singularName);
-    let t56;
-    if ($[78] !== handleChange || $[79] !== setFieldTouched) {
-      t56 = (e_0) => {
-        setFieldTouched("singularName", true);
-        return handleChange(e_0);
-      };
-      $[78] = handleChange;
-      $[79] = setFieldTouched;
-      $[80] = t56;
+    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 ($[70] !== t45 || $[71] !== t46) {
+      t47 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t45, children: t46 });
+      $[70] = t45;
+      $[71] = t46;
+      $[72] = t47;
     } else {
-      t56 = $[80];
+      t47 = $[72];
     }
-    const t57 = values.singularName ?? "";
-    let t58;
-    if ($[81] !== t55 || $[82] !== t56 || $[83] !== t57) {
-      t58 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { error: t55, name: "singularName", "aria-describedby": "singularName-helper", onChange: t56, value: t57, label: "Singular name" });
-      $[81] = t55;
-      $[82] = t56;
-      $[83] = t57;
-      $[84] = t58;
+    let t48;
+    if ($[73] !== t44 || $[74] !== t47) {
+      t48 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t44,
+        t47
+      ] });
+      $[73] = t44;
+      $[74] = t47;
+      $[75] = t48;
     } else {
-      t58 = $[84];
+      t48 = $[75];
     }
-    const t59 = showErrors && Boolean(errors.singularName);
-    const t60 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities";
-    let t61;
-    if ($[85] !== t59 || $[86] !== t60) {
-      t61 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t59, children: t60 });
-      $[85] = t59;
-      $[86] = t60;
-      $[87] = t61;
-    } else {
-      t61 = $[87];
+    const t49 = showErrors && Boolean(errors.singularName);
+    let t50;
+    if ($[76] !== handleChange || $[77] !== setFieldTouched) {
+      t50 = (e_0) => {
+        setFieldTouched("singularName", true);
+        return handleChange(e_0);
+      };
+      $[76] = handleChange;
+      $[77] = setFieldTouched;
+      $[78] = t50;
+    } else {
+      t50 = $[78];
+    }
+    const t51 = values.singularName ?? "";
+    let t52;
+    if ($[79] !== t49 || $[80] !== t50 || $[81] !== t51) {
+      t52 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { error: t49, name: "singularName", "aria-describedby": "singularName-helper", onChange: t50, value: t51, label: "Singular name" });
+      $[79] = t49;
+      $[80] = t50;
+      $[81] = t51;
+      $[82] = t52;
+    } else {
+      t52 = $[82];
+    }
+    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 ($[83] !== t53 || $[84] !== t54) {
+      t55 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t53, children: t54 });
+      $[83] = t53;
+      $[84] = t54;
+      $[85] = t55;
+    } else {
+      t55 = $[85];
     }
-    let t62;
-    if ($[88] !== t58 || $[89] !== t61) {
-      t62 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t58,
-        t61
+    let t56;
+    if ($[86] !== t52 || $[87] !== t55) {
+      t56 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t52,
+        t55
       ] });
-      $[88] = t58;
-      $[89] = t61;
-      $[90] = t62;
+      $[86] = t52;
+      $[87] = t55;
+      $[88] = t56;
     } else {
-      t62 = $[90];
+      t56 = $[88];
     }
-    const t63 = showErrors && Boolean(errors.sideDialogWidth);
-    let t64;
-    if ($[91] !== setFieldTouched || $[92] !== setFieldValue) {
-      t64 = (e_1) => {
+    const t57 = showErrors && Boolean(errors.sideDialogWidth);
+    let t58;
+    if ($[89] !== setFieldTouched || $[90] !== setFieldValue) {
+      t58 = (e_1) => {
         setFieldTouched("sideDialogWidth", true);
         const value_0 = e_1.target.value;
         if (!value_0) {
@@ -622,402 +602,399 @@
           }
         }
       };
-      $[91] = setFieldTouched;
-      $[92] = setFieldValue;
-      $[93] = t64;
+      $[89] = setFieldTouched;
+      $[90] = setFieldValue;
+      $[91] = t58;
     } else {
-      t64 = $[93];
+      t58 = $[91];
     }
-    let t65;
-    if ($[94] !== setFieldValue) {
-      t65 = () => {
+    let t59;
+    if ($[92] !== setFieldValue) {
+      t59 = () => {
         setFieldValue("sideDialogWidth", null);
       };
-      $[94] = setFieldValue;
-      $[95] = t65;
+      $[92] = setFieldValue;
+      $[93] = t59;
     } else {
-      t65 = $[95];
+      t59 = $[93];
     }
-    const t66 = !values.sideDialogWidth;
-    let t67;
-    if ($[96] === Symbol.for("react.memo_cache_sentinel")) {
-      t67 = /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" });
-      $[96] = t67;
+    const t60 = !values.sideDialogWidth;
+    let t61;
+    if ($[94] === Symbol.for("react.memo_cache_sentinel")) {
+      t61 = /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, { size: "small" });
+      $[94] = t61;
     } else {
-      t67 = $[96];
+      t61 = $[94];
     }
-    let t68;
-    if ($[97] !== t65 || $[98] !== t66) {
-      t68 = /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: t65, disabled: t66, children: t67 });
-      $[97] = t65;
-      $[98] = t66;
-      $[99] = t68;
-    } else {
-      t68 = $[99];
-    }
-    const t69 = values.sideDialogWidth ?? "";
-    let t70;
-    if ($[100] !== t63 || $[101] !== t64 || $[102] !== t68 || $[103] !== t69) {
-      t70 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { error: t63, name: "sideDialogWidth", type: "number", "aria-describedby": "sideDialogWidth-helper", onChange: t64, endAdornment: t68, value: t69, label: "Side dialog width" });
-      $[100] = t63;
-      $[101] = t64;
-      $[102] = t68;
-      $[103] = t69;
-      $[104] = t70;
-    } else {
-      t70 = $[104];
-    }
-    const t71 = showErrors && Boolean(errors.singularName);
-    const t72 = showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define the width (in pixels) of entities side dialog. Default is 768px";
-    let t73;
-    if ($[105] !== t71 || $[106] !== t72) {
-      t73 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t71, children: t72 });
-      $[105] = t71;
-      $[106] = t72;
-      $[107] = t73;
-    } else {
-      t73 = $[107];
-    }
-    let t74;
-    if ($[108] !== t70 || $[109] !== t73) {
-      t74 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t70,
-        t73
-      ] });
-      $[108] = t70;
-      $[109] = t73;
-      $[110] = t74;
+    let t62;
+    if ($[95] !== t59 || $[96] !== t60) {
+      t62 = /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: t59, disabled: t60, children: t61 });
+      $[95] = t59;
+      $[96] = t60;
+      $[97] = t62;
     } else {
-      t74 = $[110];
+      t62 = $[97];
     }
-    const t75 = showErrors && Boolean(errors.description);
-    const t76 = values.description ?? "";
-    let t77;
-    if ($[111] !== handleChange || $[112] !== t75 || $[113] !== t76) {
-      t77 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { error: t75, name: "description", value: t76, onChange: handleChange, multiline: true, minRows: 2, "aria-describedby": "description-helper-text", label: "Description" });
-      $[111] = handleChange;
-      $[112] = t75;
-      $[113] = t76;
-      $[114] = t77;
+    const t63 = values.sideDialogWidth ?? "";
+    let t64;
+    if ($[98] !== t57 || $[99] !== t58 || $[100] !== t62 || $[101] !== 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" });
+      $[98] = t57;
+      $[99] = t58;
+      $[100] = t62;
+      $[101] = t63;
+      $[102] = t64;
+    } else {
+      t64 = $[102];
+    }
+    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 ($[103] !== t65 || $[104] !== t66) {
+      t67 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t65, children: t66 });
+      $[103] = t65;
+      $[104] = t66;
+      $[105] = t67;
     } else {
-      t77 = $[114];
+      t67 = $[105];
     }
-    const t78 = showErrors && Boolean(errors.description);
-    const t79 = showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown";
-    let t80;
-    if ($[115] !== t78 || $[116] !== t79) {
-      t80 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t78, children: t79 });
-      $[115] = t78;
-      $[116] = t79;
-      $[117] = t80;
-    } else {
-      t80 = $[117];
-    }
-    let t81;
-    if ($[118] !== t77 || $[119] !== t80) {
-      t81 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t77,
-        t80
+    let t68;
+    if ($[106] !== t64 || $[107] !== t67) {
+      t68 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t64,
+        t67
       ] });
-      $[118] = t77;
-      $[119] = t80;
-      $[120] = t81;
+      $[106] = t64;
+      $[107] = t67;
+      $[108] = t68;
+    } else {
+      t68 = $[108];
+    }
+    const t69 = showErrors && Boolean(errors.description);
+    const t70 = values.description ?? "";
+    let t71;
+    if ($[109] !== handleChange || $[110] !== t69 || $[111] !== 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" });
+      $[109] = handleChange;
+      $[110] = t69;
+      $[111] = t70;
+      $[112] = t71;
+    } else {
+      t71 = $[112];
+    }
+    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 ($[113] !== t72 || $[114] !== t73) {
+      t74 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { error: t72, children: t73 });
+      $[113] = t72;
+      $[114] = t73;
+      $[115] = t74;
+    } else {
+      t74 = $[115];
+    }
+    let t75;
+    if ($[116] !== t71 || $[117] !== t74) {
+      t75 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t71,
+        t74
+      ] });
+      $[116] = t71;
+      $[117] = t74;
+      $[118] = t75;
     } else {
-      t81 = $[120];
+      t75 = $[118];
     }
-    const t82 = values.defaultSize ?? "";
-    let t83;
-    if ($[121] === Symbol.for("react.memo_cache_sentinel")) {
-      t83 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
-      $[121] = t83;
+    const t76 = values.defaultSize ?? "";
+    let t77;
+    if ($[119] === Symbol.for("react.memo_cache_sentinel")) {
+      t77 = ["xs", "s", "m", "l", "xl"].map(_temp2$7);
+      $[119] = t77;
     } else {
-      t83 = $[121];
+      t77 = $[119];
     }
-    let t84;
-    if ($[122] !== handleChange || $[123] !== t82) {
-      t84 = /* @__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: t82, renderValue: _temp$b, children: t83 }) });
-      $[122] = handleChange;
-      $[123] = t82;
-      $[124] = t84;
+    let t78;
+    if ($[120] !== handleChange || $[121] !== 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 }) });
+      $[120] = handleChange;
+      $[121] = t76;
+      $[122] = t78;
     } else {
-      t84 = $[124];
+      t78 = $[122];
     }
-    const t85 = values.includeJsonView === void 0 || values.includeJsonView ? "Include JSON view" : "Do not include JSON view";
-    let t86;
-    if ($[125] !== setFieldValue) {
-      t86 = (v_0) => setFieldValue("includeJsonView", v_0);
-      $[125] = setFieldValue;
-      $[126] = t86;
+    const t79 = values.includeJsonView === void 0 || values.includeJsonView ? "Include JSON view" : "Do not include JSON view";
+    let t80;
+    if ($[123] !== setFieldValue) {
+      t80 = (v_0) => setFieldValue("includeJsonView", v_0);
+      $[123] = setFieldValue;
+      $[124] = t80;
     } else {
-      t86 = $[126];
+      t80 = $[124];
     }
-    const t87 = values.includeJsonView === void 0 ? true : values.includeJsonView;
-    let t88;
-    if ($[127] !== t85 || $[128] !== t86 || $[129] !== t87) {
-      t88 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: t85, onValueChange: t86, value: t87 });
-      $[127] = t85;
-      $[128] = t86;
-      $[129] = t87;
-      $[130] = t88;
+    const t81 = values.includeJsonView === void 0 ? true : values.includeJsonView;
+    let t82;
+    if ($[125] !== t79 || $[126] !== t80 || $[127] !== t81) {
+      t82 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: t79, onValueChange: t80, value: t81 });
+      $[125] = t79;
+      $[126] = t80;
+      $[127] = t81;
+      $[128] = t82;
     } else {
-      t88 = $[130];
+      t82 = $[128];
     }
-    let t89;
-    if ($[131] === Symbol.for("react.memo_cache_sentinel")) {
-      t89 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Include the JSON representation of the document." });
-      $[131] = t89;
+    let t83;
+    if ($[129] === Symbol.for("react.memo_cache_sentinel")) {
+      t83 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Include the JSON representation of the document." });
+      $[129] = t83;
     } else {
-      t89 = $[131];
+      t83 = $[129];
     }
-    let t90;
-    if ($[132] !== t88) {
-      t90 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t88,
-        t89
+    let t84;
+    if ($[130] !== t82) {
+      t84 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t82,
+        t83
       ] });
-      $[132] = t88;
-      $[133] = t90;
+      $[130] = t82;
+      $[131] = t84;
     } else {
-      t90 = $[133];
+      t84 = $[131];
     }
-    const t91 = customIdValue === "code_defined";
-    let t92;
-    if ($[134] !== setFieldValue) {
-      t92 = (v_1) => {
+    const t85 = customIdValue === "code_defined";
+    let t86;
+    if ($[132] !== setFieldValue) {
+      t86 = (v_1) => {
         if (v_1 === "code_defined") {
           throw new Error("This should not happen");
         }
         setFieldValue("customId", v_1);
       };
-      $[134] = setFieldValue;
-      $[135] = t92;
+      $[132] = setFieldValue;
+      $[133] = t86;
     } else {
-      t92 = $[135];
-    }
-    const t93 = customIdValue ?? "";
-    let t94;
-    let t95;
-    let t96;
-    if ($[136] === Symbol.for("react.memo_cache_sentinel")) {
-      t94 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: "Document ID is generated automatically" });
-      t95 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: "Users must define an ID" });
-      t96 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
-      $[136] = t94;
-      $[137] = t95;
-      $[138] = t96;
-    } else {
-      t94 = $[136];
-      t95 = $[137];
-      t96 = $[138];
+      t86 = $[133];
     }
-    let t97;
-    if ($[139] !== t91 || $[140] !== t92 || $[141] !== t93) {
-      t97 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t91, onValueChange: t92, value: t93, renderValue: _temp3$4, children: [
-        t94,
-        t95,
-        t96
+    const t87 = customIdValue ?? "";
+    let t88;
+    let t89;
+    let t90;
+    if ($[134] === Symbol.for("react.memo_cache_sentinel")) {
+      t88 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: "Document ID is generated automatically" });
+      t89 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: "Users must define an ID" });
+      t90 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
+      $[134] = t88;
+      $[135] = t89;
+      $[136] = t90;
+    } else {
+      t88 = $[134];
+      t89 = $[135];
+      t90 = $[136];
+    }
+    let t91;
+    if ($[137] !== t85 || $[138] !== t86 || $[139] !== t87) {
+      t91 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t85, onValueChange: t86, value: t87, renderValue: _temp3$4, children: [
+        t88,
+        t89,
+        t90
       ] }) });
-      $[139] = t91;
-      $[140] = t92;
-      $[141] = t93;
-      $[142] = t97;
+      $[137] = t85;
+      $[138] = t86;
+      $[139] = t87;
+      $[140] = t91;
     } else {
-      t97 = $[142];
+      t91 = $[140];
     }
-    let t98;
-    if ($[143] !== setFieldValue) {
-      t98 = (v_2) => setFieldValue("collectionGroup", v_2);
-      $[143] = setFieldValue;
-      $[144] = t98;
+    let t92;
+    if ($[141] !== setFieldValue) {
+      t92 = (v_2) => setFieldValue("collectionGroup", v_2);
+      $[141] = setFieldValue;
+      $[142] = t92;
     } else {
-      t98 = $[144];
+      t92 = $[142];
     }
-    const t99 = values.collectionGroup ?? false;
-    let t100;
-    if ($[145] !== t98 || $[146] !== t99) {
-      t100 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t98, value: t99 });
-      $[145] = t98;
-      $[146] = t99;
-      $[147] = t100;
+    const t93 = values.collectionGroup ?? false;
+    let t94;
+    if ($[143] !== t92 || $[144] !== t93) {
+      t94 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t92, value: t93 });
+      $[143] = t92;
+      $[144] = t93;
+      $[145] = t94;
     } else {
-      t100 = $[147];
+      t94 = $[145];
     }
-    let t101;
-    if ($[148] === Symbol.for("react.memo_cache_sentinel")) {
-      t101 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
-      $[148] = t101;
+    let t95;
+    if ($[146] === Symbol.for("react.memo_cache_sentinel")) {
+      t95 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
+      $[146] = t95;
     } else {
-      t101 = $[148];
+      t95 = $[146];
     }
-    let t102;
-    if ($[149] !== t100) {
-      t102 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-4", children: [
-        t100,
-        t101
+    let t96;
+    if ($[147] !== t94) {
+      t96 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-4", children: [
+        t94,
+        t95
       ] });
-      $[149] = t100;
-      $[150] = t102;
+      $[147] = t94;
+      $[148] = t96;
     } else {
-      t102 = $[150];
+      t96 = $[148];
     }
-    let t103;
-    if ($[151] !== setFieldValue) {
-      t103 = (v_3) => setFieldValue("textSearchEnabled", v_3);
-      $[151] = setFieldValue;
-      $[152] = t103;
+    let t97;
+    if ($[149] !== setFieldValue) {
+      t97 = (v_3) => setFieldValue("textSearchEnabled", v_3);
+      $[149] = setFieldValue;
+      $[150] = t97;
     } else {
-      t103 = $[152];
+      t97 = $[150];
     }
-    const t104 = values.textSearchEnabled ?? false;
-    let t105;
-    if ($[153] !== t103 || $[154] !== t104) {
-      t105 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t103, value: t104 });
-      $[153] = t103;
-      $[154] = t104;
-      $[155] = t105;
+    const t98 = values.textSearchEnabled ?? false;
+    let t99;
+    if ($[151] !== t97 || $[152] !== t98) {
+      t99 = /* @__PURE__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t97, value: t98 });
+      $[151] = t97;
+      $[152] = t98;
+      $[153] = t99;
     } else {
-      t105 = $[155];
+      t99 = $[153];
     }
-    let t106;
-    if ($[156] === Symbol.for("react.memo_cache_sentinel")) {
-      t106 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
-      $[156] = t106;
+    let t100;
+    if ($[154] === Symbol.for("react.memo_cache_sentinel")) {
+      t100 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+      $[154] = t100;
     } else {
-      t106 = $[156];
+      t100 = $[154];
     }
-    let t107;
-    if ($[157] !== t105) {
-      t107 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t105,
-        t106
+    let t101;
+    if ($[155] !== t99) {
+      t101 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+        t99,
+        t100
       ] });
-      $[157] = t105;
-      $[158] = t107;
+      $[155] = t99;
+      $[156] = t101;
     } else {
-      t107 = $[158];
+      t101 = $[156];
     }
-    let t108;
-    if ($[159] !== t102 || $[160] !== t107 || $[161] !== t54 || $[162] !== t62 || $[163] !== t74 || $[164] !== t81 || $[165] !== t84 || $[166] !== t90 || $[167] !== t97) {
-      t108 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
-        t54,
-        t62,
-        t74,
-        t81,
+    let t102;
+    if ($[157] !== t101 || $[158] !== t48 || $[159] !== t56 || $[160] !== t68 || $[161] !== t75 || $[162] !== t78 || $[163] !== t84 || $[164] !== t91 || $[165] !== t96) {
+      t102 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
+        t48,
+        t56,
+        t68,
+        t75,
+        t78,
         t84,
-        t90,
-        t97,
-        t102,
-        t107
+        t91,
+        t96,
+        t101
       ] });
-      $[159] = t102;
-      $[160] = t107;
-      $[161] = t54;
-      $[162] = t62;
-      $[163] = t74;
-      $[164] = t81;
-      $[165] = t84;
-      $[166] = t90;
-      $[167] = t97;
-      $[168] = t108;
-    } else {
-      t108 = $[168];
-    }
-    let t109;
-    if ($[169] !== advancedPanelExpanded || $[170] !== t108) {
-      t109 = /* @__PURE__ */ jsxRuntime.jsx(ui.ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t47, initiallyExpanded: false, children: t108 });
-      $[169] = advancedPanelExpanded;
-      $[170] = t108;
-      $[171] = t109;
-    } else {
-      t109 = $[171];
+      $[157] = t101;
+      $[158] = t48;
+      $[159] = t56;
+      $[160] = t68;
+      $[161] = t75;
+      $[162] = t78;
+      $[163] = t84;
+      $[164] = t91;
+      $[165] = t96;
+      $[166] = t102;
+    } else {
+      t102 = $[166];
     }
-    let t110;
-    if ($[172] !== children || $[173] !== t109) {
-      t110 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-8", children: [
-        t109,
+    let t103;
+    if ($[167] !== advancedPanelExpanded || $[168] !== t102) {
+      t103 = /* @__PURE__ */ jsxRuntime.jsx(ui.ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t41, initiallyExpanded: false, children: t102 });
+      $[167] = advancedPanelExpanded;
+      $[168] = t102;
+      $[169] = t103;
+    } else {
+      t103 = $[169];
+    }
+    let t104;
+    if ($[170] !== children || $[171] !== t103) {
+      t104 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-8", children: [
+        t103,
         children
       ] });
-      $[172] = children;
-      $[173] = t109;
-      $[174] = t110;
+      $[170] = children;
+      $[171] = t103;
+      $[172] = t104;
     } else {
-      t110 = $[174];
+      t104 = $[172];
     }
-    let t111;
-    if ($[175] !== t110 || $[176] !== t27 || $[177] !== t36 || $[178] !== t37 || $[179] !== t40 || $[180] !== t46) {
-      t111 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t19, children: [
-        t27,
-        t36,
-        t37,
+    let t105;
+    if ($[173] !== t104 || $[174] !== t23 || $[175] !== t31 || $[176] !== t34 || $[177] !== t40) {
+      t105 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-4", children: [
+        t23,
+        t31,
+        t34,
         t40,
-        t46,
-        t110
+        t104
       ] });
-      $[175] = t110;
-      $[176] = t27;
-      $[177] = t36;
-      $[178] = t37;
-      $[179] = t40;
-      $[180] = t46;
-      $[181] = t111;
-    } else {
-      t111 = $[181];
-    }
-    let t112;
-    if ($[182] === Symbol.for("react.memo_cache_sentinel")) {
-      t112 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+      $[173] = t104;
+      $[174] = t23;
+      $[175] = t31;
+      $[176] = t34;
+      $[177] = t40;
+      $[178] = t105;
+    } else {
+      t105 = $[178];
+    }
+    let t106;
+    if ($[179] === Symbol.for("react.memo_cache_sentinel")) {
+      t106 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
         height: "52px"
       } });
-      $[182] = t112;
+      $[179] = t106;
     } else {
-      t112 = $[182];
+      t106 = $[179];
     }
-    let t113;
-    if ($[183] !== setFieldValue) {
-      t113 = (icon) => {
+    let t107;
+    if ($[180] !== setFieldValue) {
+      t107 = (icon) => {
         setIconDialogOpen(false);
         setFieldValue("icon", icon);
       };
-      $[183] = setFieldValue;
-      $[184] = t113;
+      $[180] = setFieldValue;
+      $[181] = t107;
     } else {
-      t113 = $[184];
+      t107 = $[181];
     }
-    let t114;
-    if ($[185] !== t113 || $[186] !== values.icon) {
-      t114 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(core.SearchIconsView, { selectedIcon: values.icon, onIconSelected: t113 }) });
-      $[185] = t113;
-      $[186] = values.icon;
-      $[187] = t114;
+    let t108;
+    if ($[182] !== t107 || $[183] !== values.icon) {
+      t108 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(core.SearchIconsView, { selectedIcon: values.icon, onIconSelected: t107 }) });
+      $[182] = t107;
+      $[183] = values.icon;
+      $[184] = t108;
     } else {
-      t114 = $[187];
+      t108 = $[184];
     }
-    let t115;
-    if ($[188] !== iconDialogOpen || $[189] !== t114) {
-      t115 = /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t114 });
-      $[188] = iconDialogOpen;
-      $[189] = t114;
-      $[190] = t115;
+    let t109;
+    if ($[185] !== iconDialogOpen || $[186] !== t108) {
+      t109 = /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t108 });
+      $[185] = iconDialogOpen;
+      $[186] = t108;
+      $[187] = t109;
     } else {
-      t115 = $[190];
+      t109 = $[187];
     }
-    let t116;
-    if ($[191] !== T0 || $[192] !== t111 || $[193] !== t115 || $[194] !== t18) {
-      t116 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t7, children: /* @__PURE__ */ jsxRuntime.jsxs(T0, { maxWidth: t8, className: t9, children: [
-        t18,
-        t111,
-        t112,
-        t115
+    let t110;
+    if ($[188] !== t105 || $[189] !== t109 || $[190] !== t15) {
+      t110 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
+        t15,
+        t105,
+        t106,
+        t109
       ] }) });
-      $[191] = T0;
-      $[192] = t111;
-      $[193] = t115;
-      $[194] = t18;
-      $[195] = t116;
+      $[188] = t105;
+      $[189] = t109;
+      $[190] = t15;
+      $[191] = t110;
     } else {
-      t116 = $[195];
+      t110 = $[191];
     }
-    return t116;
+    return t110;
   }
   function _temp3$4(value_3) {
     if (value_3 === "code_defined") {
@@ -2518,7 +2495,7 @@
     const t4 = selected ? ui.cardSelectedMixin : "";
     let t5;
     if ($[5] !== borderColorClass || $[6] !== t3 || $[7] !== t4) {
-      t5 = ui.cls("border", "pl-2 w-full flex flex-row gap-4 items-center", ui.cardMixin, t3, t4, "flex-grow p-4 border transition-colors duration-200", borderColorClass);
+      t5 = ui.cls("m-1", "border", "pl-2 w-full flex flex-row gap-4 items-center", ui.cardMixin, t3, t4, "flex-grow p-4 border transition-colors duration-200", borderColorClass);
       $[5] = borderColorClass;
       $[6] = t3;
       $[7] = t4;
@@ -4412,7 +4389,8 @@
       existing,
       multiple,
       disabled,
-      showErrors
+      showErrors,
+      asString
     } = t0;
     const {
       values,
@@ -4430,7 +4408,7 @@
       }
       return t12;
     }
-    const pathPath = multiple ? "of.path" : "path";
+    const pathPath = asString ? "reference.path" : multiple ? "of.path" : "path";
     let t1;
     if ($[1] !== pathPath || $[2] !== values) {
       t1 = formex.getIn(values, pathPath);
@@ -5039,6 +5017,12 @@
         propertyConfig: "reference",
         editable: propertyData.editable !== void 0 ? propertyData.editable : true
       });
+    } else if (selectedWidgetId === "reference_as_string") {
+      updatedProperty = core.mergeDeep(propertyData, {
+        dataType: "string",
+        propertyConfig: "reference_as_string",
+        editable: propertyData.editable !== void 0 ? propertyData.editable : true
+      });
     } else if (selectedWidgetId === "multi_references") {
       updatedProperty = core.mergeDeep(propertyData, {
         dataType: "array",
@@ -5221,7 +5205,7 @@
       }
     }
   }
-  const supportedFieldsIds = ["text_field", "multiline", "markdown", "url", "email", "select", "multi_select", "number_input", "number_select", "multi_number_select", "file_upload", "multi_file_upload", "reference", "multi_references", "switch", "date_time", "group", "key_value", "repeat", "block"];
+  const supportedFieldsIds = ["text_field", "multiline", "markdown", "url", "email", "select", "multi_select", "number_input", "number_select", "multi_number_select", "file_upload", "multi_file_upload", "reference", "reference_as_string", "multi_references", "switch", "date_time", "group", "key_value", "repeat", "block"];
   const supportedFields = Object.entries(core.DEFAULT_FIELD_CONFIGS).filter(([id]) => supportedFieldsIds.includes(id)).map(([id, config]) => ({
     [id]: config
   })).reduce((a, b) => ({
@@ -5897,7 +5881,7 @@
     return t11;
   }
   function PropertyEditFormFields(t0) {
-    const $ = reactCompilerRuntime.c(142);
+    const $ = reactCompilerRuntime.c(146);
     const {
       values,
       errors,
@@ -6186,59 +6170,73 @@
                             }
                             childComponent = t102;
                           } else {
-                            if (selectedFieldConfigId === "date_time") {
+                            if (selectedFieldConfigId === "reference_as_string") {
                               let t102;
-                              if ($[75] !== disabled) {
-                                t102 = /* @__PURE__ */ jsxRuntime.jsx(DateTimePropertyField, { disabled });
+                              if ($[75] !== disabled || $[76] !== existing || $[77] !== showErrors) {
+                                t102 = /* @__PURE__ */ jsxRuntime.jsx(ReferencePropertyField, { showErrors, existing, asString: true, multiple: false, disabled });
                                 $[75] = disabled;
-                                $[76] = t102;
+                                $[76] = existing;
+                                $[77] = showErrors;
+                                $[78] = t102;
                               } else {
-                                t102 = $[76];
+                                t102 = $[78];
                               }
                               childComponent = t102;
                             } else {
-                              if (selectedFieldConfigId === "multi_references") {
+                              if (selectedFieldConfigId === "date_time") {
                                 let t102;
-                                if ($[77] !== disabled || $[78] !== existing || $[79] !== showErrors) {
-                                  t102 = /* @__PURE__ */ jsxRuntime.jsx(ReferencePropertyField, { showErrors, existing, multiple: true, disabled });
-                                  $[77] = disabled;
-                                  $[78] = existing;
-                                  $[79] = showErrors;
+                                if ($[79] !== disabled) {
+                                  t102 = /* @__PURE__ */ jsxRuntime.jsx(DateTimePropertyField, { disabled });
+                                  $[79] = disabled;
                                   $[80] = t102;
                                 } else {
                                   t102 = $[80];
                                 }
                                 childComponent = t102;
                               } else {
-                                if (selectedFieldConfigId === "repeat") {
+                                if (selectedFieldConfigId === "multi_references") {
                                   let t102;
-                                  if ($[81] !== allowDataInference || $[82] !== collectionEditable || $[83] !== disabled || $[84] !== existing || $[85] !== getData || $[86] !== propertyConfigs || $[87] !== showErrors) {
-                                    t102 = /* @__PURE__ */ jsxRuntime.jsx(RepeatPropertyField, { showErrors, existing, getData, allowDataInference, disabled, collectionEditable, propertyConfigs });
-                                    $[81] = allowDataInference;
-                                    $[82] = collectionEditable;
-                                    $[83] = disabled;
-                                    $[84] = existing;
-                                    $[85] = getData;
-                                    $[86] = propertyConfigs;
-                                    $[87] = showErrors;
-                                    $[88] = t102;
+                                  if ($[81] !== disabled || $[82] !== existing || $[83] !== showErrors) {
+                                    t102 = /* @__PURE__ */ jsxRuntime.jsx(ReferencePropertyField, { showErrors, existing, multiple: true, disabled });
+                                    $[81] = disabled;
+                                    $[82] = existing;
+                                    $[83] = showErrors;
+                                    $[84] = t102;
                                   } else {
-                                    t102 = $[88];
+                                    t102 = $[84];
                                   }
                                   childComponent = t102;
                                 } else {
-                                  if (selectedFieldConfigId === "key_value") {
+                                  if (selectedFieldConfigId === "repeat") {
                                     let t102;
-                                    if ($[89] !== disabled) {
-                                      t102 = /* @__PURE__ */ jsxRuntime.jsx(KeyValuePropertyField, { disabled });
-                                      $[89] = disabled;
-                                      $[90] = t102;
+                                    if ($[85] !== allowDataInference || $[86] !== collectionEditable || $[87] !== disabled || $[88] !== existing || $[89] !== getData || $[90] !== propertyConfigs || $[91] !== showErrors) {
+                                      t102 = /* @__PURE__ */ jsxRuntime.jsx(RepeatPropertyField, { showErrors, existing, getData, allowDataInference, disabled, collectionEditable, propertyConfigs });
+                                      $[85] = allowDataInference;
+                                      $[86] = collectionEditable;
+                                      $[87] = disabled;
+                                      $[88] = existing;
+                                      $[89] = getData;
+                                      $[90] = propertyConfigs;
+                                      $[91] = showErrors;
+                                      $[92] = t102;
                                     } else {
-                                      t102 = $[90];
+                                      t102 = $[92];
                                     }
                                     childComponent = t102;
                                   } else {
-                                    childComponent = null;
+                                    if (selectedFieldConfigId === "key_value") {
+                                      let t102;
+                                      if ($[93] !== disabled) {
+                                        t102 = /* @__PURE__ */ jsxRuntime.jsx(KeyValuePropertyField, { disabled });
+                                        $[93] = disabled;
+                                        $[94] = t102;
+                                      } else {
+                                        t102 = $[94];
+                                      }
+                                      childComponent = t102;
+                                    } else {
+                                      childComponent = null;
+                                    }
                                   }
                                 }
                               }
@@ -6256,7 +6254,7 @@
       }
     }
     let t10;
-    if ($[91] !== disabled) {
+    if ($[95] !== disabled) {
       t10 = disabled && /* @__PURE__ */ jsxRuntime.jsxs(ui.InfoLabel, { mode: "warn", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { children: "This property can't be edited" }),
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", children: [
@@ -6265,157 +6263,157 @@
           " flag"
         ] })
       ] });
-      $[91] = disabled;
-      $[92] = t10;
+      $[95] = disabled;
+      $[96] = t10;
     } else {
-      t10 = $[92];
+      t10 = $[96];
     }
     const t11 = selectedFieldConfigId;
     let t12;
-    if ($[93] !== onWidgetSelectChanged) {
+    if ($[97] !== onWidgetSelectChanged) {
       t12 = (value) => onWidgetSelectChanged(value);
-      $[93] = onWidgetSelectChanged;
-      $[94] = t12;
+      $[97] = onWidgetSelectChanged;
+      $[98] = t12;
     } else {
-      t12 = $[94];
+      t12 = $[98];
     }
     let t13;
-    if ($[95] !== onDismiss) {
+    if ($[99] !== onDismiss) {
       t13 = (open, hasValue) => {
         if (!hasValue) {
           onDismiss?.();
         }
         setSelectOpen(open);
       };
-      $[95] = onDismiss;
-      $[96] = t13;
+      $[99] = onDismiss;
+      $[100] = t13;
     } else {
-      t13 = $[96];
+      t13 = $[100];
     }
     const t14 = Boolean(selectedWidgetError);
     let t15;
-    if ($[97] !== disabled || $[98] !== existing || $[99] !== inArray || $[100] !== propertyConfigs || $[101] !== selectOpen || $[102] !== t11 || $[103] !== t12 || $[104] !== t13 || $[105] !== t14 || $[106] !== values) {
+    if ($[101] !== disabled || $[102] !== existing || $[103] !== inArray || $[104] !== propertyConfigs || $[105] !== selectOpen || $[106] !== t11 || $[107] !== t12 || $[108] !== t13 || $[109] !== t14 || $[110] !== values) {
       t15 = /* @__PURE__ */ jsxRuntime.jsx(WidgetSelectView, { initialProperty: values, value: t11, onValueChange: t12, open: selectOpen, onOpenChange: t13, disabled, showError: t14, existing, propertyConfigs, inArray });
-      $[97] = disabled;
-      $[98] = existing;
-      $[99] = inArray;
-      $[100] = propertyConfigs;
-      $[101] = selectOpen;
-      $[102] = t11;
-      $[103] = t12;
-      $[104] = t13;
-      $[105] = t14;
-      $[106] = values;
-      $[107] = t15;
-    } else {
-      t15 = $[107];
+      $[101] = disabled;
+      $[102] = existing;
+      $[103] = inArray;
+      $[104] = propertyConfigs;
+      $[105] = selectOpen;
+      $[106] = t11;
+      $[107] = t12;
+      $[108] = t13;
+      $[109] = t14;
+      $[110] = values;
+      $[111] = t15;
+    } else {
+      t15 = $[111];
     }
     let t16;
-    if ($[108] !== selectedWidgetError) {
+    if ($[112] !== selectedWidgetError) {
       t16 = selectedWidgetError && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "ml-3.5", color: "error", children: "Required" });
-      $[108] = selectedWidgetError;
-      $[109] = t16;
+      $[112] = selectedWidgetError;
+      $[113] = t16;
     } else {
-      t16 = $[109];
+      t16 = $[113];
     }
     let t17;
-    if ($[110] !== t15 || $[111] !== t16) {
+    if ($[114] !== t15 || $[115] !== t16) {
       t17 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-2", children: [
         t15,
         t16
       ] });
-      $[110] = t15;
-      $[111] = t16;
-      $[112] = t17;
+      $[114] = t15;
+      $[115] = t16;
+      $[116] = t17;
     } else {
-      t17 = $[112];
+      t17 = $[116];
     }
     let t18;
-    if ($[113] !== disabled || $[114] !== onDelete || $[115] !== values?.id) {
+    if ($[117] !== disabled || $[118] !== onDelete || $[119] !== values?.id) {
       t18 = onDelete && values?.id && /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { variant: "ghost", className: "m-4", disabled, onClick: () => setDeleteDialogOpen(true), children: /* @__PURE__ */ jsxRuntime.jsx(ui.DeleteIcon, {}) });
-      $[113] = disabled;
-      $[114] = onDelete;
-      $[115] = values?.id;
-      $[116] = t18;
+      $[117] = disabled;
+      $[118] = onDelete;
+      $[119] = values?.id;
+      $[120] = t18;
     } else {
-      t18 = $[116];
+      t18 = $[120];
     }
     let t19;
-    if ($[117] !== t17 || $[118] !== t18) {
+    if ($[121] !== t17 || $[122] !== t18) {
       t19 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex mt-2 justify-between", children: [
         t17,
         t18
       ] });
-      $[117] = t17;
-      $[118] = t18;
-      $[119] = t19;
+      $[121] = t17;
+      $[122] = t18;
+      $[123] = t19;
     } else {
-      t19 = $[119];
+      t19 = $[123];
     }
     let t20;
-    if ($[120] !== autoUpdateId || $[121] !== disabled || $[122] !== existing || $[123] !== includeIdAndTitle || $[124] !== showErrors) {
+    if ($[124] !== autoUpdateId || $[125] !== disabled || $[126] !== existing || $[127] !== includeIdAndTitle || $[128] !== showErrors) {
       t20 = includeIdAndTitle && /* @__PURE__ */ jsxRuntime.jsx(CommonPropertyFields, { showErrors, disabledId: existing, isNewProperty: !existing, disabled, autoUpdateId, ref: nameFieldRef });
-      $[120] = autoUpdateId;
-      $[121] = disabled;
-      $[122] = existing;
-      $[123] = includeIdAndTitle;
-      $[124] = showErrors;
-      $[125] = t20;
+      $[124] = autoUpdateId;
+      $[125] = disabled;
+      $[126] = existing;
+      $[127] = includeIdAndTitle;
+      $[128] = showErrors;
+      $[129] = t20;
     } else {
-      t20 = $[125];
+      t20 = $[129];
     }
     let t21;
-    if ($[126] !== disabled) {
+    if ($[130] !== disabled) {
       t21 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(AdvancedPropertyValidation, { disabled }) });
-      $[126] = disabled;
-      $[127] = t21;
+      $[130] = disabled;
+      $[131] = t21;
     } else {
-      t21 = $[127];
+      t21 = $[131];
     }
     let t22;
-    if ($[128] !== childComponent || $[129] !== t20 || $[130] !== t21) {
+    if ($[132] !== childComponent || $[133] !== t20 || $[134] !== t21) {
       t22 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-y-12 mt-8 mb-8", children: [
         t20,
         childComponent,
         t21
       ] });
-      $[128] = childComponent;
-      $[129] = t20;
-      $[130] = t21;
-      $[131] = t22;
+      $[132] = childComponent;
+      $[133] = t20;
+      $[134] = t21;
+      $[135] = t22;
     } else {
-      t22 = $[131];
+      t22 = $[135];
     }
     let t23;
-    if ($[132] !== deleteDialogOpen || $[133] !== onDelete || $[134] !== propertyNamespace || $[135] !== values?.id) {
+    if ($[136] !== deleteDialogOpen || $[137] !== onDelete || $[138] !== propertyNamespace || $[139] !== values?.id) {
       t23 = onDelete && /* @__PURE__ */ jsxRuntime.jsx(core.ConfirmationDialog, { open: deleteDialogOpen, onAccept: () => onDelete(values?.id, propertyNamespace), onCancel: () => setDeleteDialogOpen(false), title: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Delete this property?" }), body: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         " This will ",
         /* @__PURE__ */ jsxRuntime.jsx("b", { children: "not delete any data" }),
         ", only modify the collection."
       ] }) });
-      $[132] = deleteDialogOpen;
-      $[133] = onDelete;
-      $[134] = propertyNamespace;
-      $[135] = values?.id;
-      $[136] = t23;
+      $[136] = deleteDialogOpen;
+      $[137] = onDelete;
+      $[138] = propertyNamespace;
+      $[139] = values?.id;
+      $[140] = t23;
     } else {
-      t23 = $[136];
+      t23 = $[140];
     }
     let t24;
-    if ($[137] !== t10 || $[138] !== t19 || $[139] !== t22 || $[140] !== t23) {
+    if ($[141] !== t10 || $[142] !== t19 || $[143] !== t22 || $[144] !== t23) {
       t24 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         t10,
         t19,
         t22,
         t23
       ] });
-      $[137] = t10;
-      $[138] = t19;
-      $[139] = t22;
-      $[140] = t23;
-      $[141] = t24;
+      $[141] = t10;
+      $[142] = t19;
+      $[143] = t22;
+      $[144] = t23;
+      $[145] = t24;
     } else {
-      t24 = $[141];
+      t24 = $[145];
     }
     return t24;
   }
@@ -6455,6 +6453,7 @@
     file_upload: "File",
     multi_file_upload: "File",
     reference: "Reference",
+    reference_as_string: "Text",
     multi_references: "Reference",
     date_time: "Date",
     group: "Group",
@@ -6774,7 +6773,7 @@
     }
     let t10;
     if ($[20] !== onClick || $[21] !== t9) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { onClick, className: "flex flex-row items-center px-4 py-2", children: t9 });
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { onClick, className: "flex flex-row items-center px-4 py-2 m-1", children: t9 });
       $[20] = onClick;
       $[21] = t9;
       $[22] = t10;
@@ -10671,7 +10670,7 @@
     return t8;
   }
   function useCollectionEditorPlugin(t0) {
-    const $ = reactCompilerRuntime.c(19);
+    const $ = reactCompilerRuntime.c(21);
     const {
       collectionConfigController,
       configPermissions,
@@ -10727,32 +10726,37 @@
       t4 = $[11];
     }
     let t5;
-    if ($[12] !== t4) {
+    if ($[12] !== collectionConfigController.navigationEntries || $[13] !== collectionConfigController.saveNavigationEntries || $[14] !== t4) {
       t5 = {
         additionalActions: t3,
         additionalChildrenStart: t4,
         CollectionActions: HomePageEditorCollectionAction,
-        AdditionalCards: NewCollectionCard
+        AdditionalCards: NewCollectionCard,
+        allowDragAndDrop: true,
+        navigationEntries: collectionConfigController.navigationEntries,
+        onNavigationEntriesUpdate: collectionConfigController.saveNavigationEntries
       };
-      $[12] = t4;
-      $[13] = t5;
+      $[12] = collectionConfigController.navigationEntries;
+      $[13] = collectionConfigController.saveNavigationEntries;
+      $[14] = t4;
+      $[15] = t5;
     } else {
-      t5 = $[13];
+      t5 = $[15];
     }
     let t6;
-    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
       t6 = {
         CollectionActionsStart: EditorCollectionActionStart,
         CollectionActions: EditorCollectionAction,
         HeaderAction: CollectionViewHeaderAction,
         AddColumnComponent: PropertyAddColumnComponent
       };
-      $[14] = t6;
+      $[16] = t6;
     } else {
-      t6 = $[14];
+      t6 = $[16];
     }
     let t7;
-    if ($[15] !== collectionConfigController.loading || $[16] !== t2 || $[17] !== t5) {
+    if ($[17] !== collectionConfigController.loading || $[18] !== t2 || $[19] !== t5) {
       t7 = {
         key: "collection_editor",
         loading: collectionConfigController.loading,
@@ -10760,12 +10764,12 @@
         homePage: t5,
         collectionView: t6
       };
-      $[15] = collectionConfigController.loading;
-      $[16] = t2;
-      $[17] = t5;
-      $[18] = t7;
+      $[17] = collectionConfigController.loading;
+      $[18] = t2;
+      $[19] = t5;
+      $[20] = t7;
     } else {
-      t7 = $[18];
+      t7 = $[20];
     }
     return t7;
   }