@firecms/core 3.0.0-canary.178 → 3.0.0-canary.179

package/dist/index.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import * as React from "react";
 import React__default, { forwardRef, useState, useRef, useEffect, useContext, useCallback, useMemo, createRef, createContext, useLayoutEffect, useDeferredValue, createElement } from "react";
-import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, IconButton, InfoIcon, Typography, ContentCopyIcon, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, ErrorIcon, cls, defaultBorderMixin, OpenInNewIcon, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, Skeleton, paperMixin, EditIcon, KeyboardTabIcon, DoNotDisturbOnIcon, Menu, MoreVertIcon, MenuItem, Checkbox, Chip, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, ExpandablePanel, Markdown, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, StarIcon, Collapse, Container, NotesIcon, Alert, Tab, Tabs, LoadingButton, CheckIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, HandleIcon, RemoveIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, DescriptionIcon, fieldBackgroundMixin, fieldBackgroundHoverMixin, fieldBackgroundDisabledMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, MailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Sheet, OpenInFullIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
+import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, IconButton, InfoIcon, Typography, cls, ContentCopyIcon, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, ErrorIcon, defaultBorderMixin, OpenInNewIcon, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, Skeleton, paperMixin, EditIcon, KeyboardTabIcon, DoNotDisturbOnIcon, Menu, MoreVertIcon, MenuItem, Checkbox, Chip, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, ExpandablePanel, Markdown, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, StarIcon, Collapse, Container, NotesIcon, Alert, Tab, Tabs, LoadingButton, CheckIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, HandleIcon, RemoveIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, DescriptionIcon, fieldBackgroundMixin, fieldBackgroundHoverMixin, fieldBackgroundDisabledMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, MailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Sheet, OpenInFullIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
 import { useFormex, setIn, getIn, useCreateFormex, Formex, Field } from "@firecms/formex";
@@ -615,7 +615,7 @@ function FieldHelperText(t0) {
   return t6;
 }
 const LabelWithIcon = forwardRef((t0, ref) => {
-  const $ = c(8);
+  const $ = c(11);
   const {
     icon,
     title,
@@ -623,33 +623,42 @@ const LabelWithIcon = forwardRef((t0, ref) => {
     className,
     required
   } = t0;
-  const t1 = `inline-flex items-center my-0.5 ${small ? "gap-1" : "gap-2"} ${className ?? ""}`;
-  const t2 = `text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`;
-  const t3 = (title ?? "") + (required ? " *" : "");
-  let t4;
-  if ($[0] !== t2 || $[1] !== t3) {
-    t4 = /* @__PURE__ */ jsx("span", { className: t2, children: t3 });
-    $[0] = t2;
-    $[1] = t3;
-    $[2] = t4;
+  const t1 = small ? "gap-1" : "gap-2";
+  let t2;
+  if ($[0] !== className || $[1] !== t1) {
+    t2 = cls("inline-flex items-center my-0.5", t1, className);
+    $[0] = className;
+    $[1] = t1;
+    $[2] = t2;
   } else {
-    t4 = $[2];
+    t2 = $[2];
   }
+  const t3 = `text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`;
+  const t4 = (title ?? "") + (required ? " *" : "");
   let t5;
-  if ($[3] !== icon || $[4] !== ref || $[5] !== t1 || $[6] !== t4) {
-    t5 = /* @__PURE__ */ jsxs("div", { ref, className: t1, children: [
+  if ($[3] !== t3 || $[4] !== t4) {
+    t5 = /* @__PURE__ */ jsx("span", { className: t3, children: t4 });
+    $[3] = t3;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== icon || $[7] !== ref || $[8] !== t2 || $[9] !== t5) {
+    t6 = /* @__PURE__ */ jsxs("div", { ref, className: t2, children: [
       icon,
-      t4
+      t5
     ] });
-    $[3] = icon;
-    $[4] = ref;
-    $[5] = t1;
-    $[6] = t4;
-    $[7] = t5;
+    $[6] = icon;
+    $[7] = ref;
+    $[8] = t2;
+    $[9] = t5;
+    $[10] = t6;
   } else {
-    t5 = $[7];
+    t6 = $[10];
   }
-  return t5;
+  return t6;
 });
 LabelWithIcon.displayName = "LabelWithIcon";
 function PropertyIdCopyTooltip(t0) {
@@ -669,7 +678,7 @@ function PropertyIdCopyTooltip(t0) {
   }
   let t2;
   if ($[2] !== children || $[3] !== className || $[4] !== t1) {
-    t2 = /* @__PURE__ */ jsx(Tooltip, { title: t1, delayDuration: 800, side: "top", asChild: false, align: "start", sideOffset: 8, className, children });
+    t2 = /* @__PURE__ */ jsx(Tooltip, { title: t1, delayDuration: 800, side: "top", align: "start", sideOffset: 8, className, children });
     $[2] = children;
     $[3] = className;
     $[4] = t1;
@@ -3376,6 +3385,7 @@ function mergeCollection(target, source, parentPaths = [], modifyCollection) {
     });
     if (modifiedCollection) resultCollection = modifiedCollection;
   }
+  resultCollection["merged"] = true;
   return resultCollection;
 }
 function mergePropertyOrBuilder(target, source) {
@@ -8035,15 +8045,26 @@ const VirtualTableCell = React__default.memo(function VirtualTableCell2(props) {
   return equal(a.rowData, b.rowData) && equal(a.column, b.column) && equal(a.cellData, b.cellData) && equal(a.rowIndex, b.rowIndex) && equal(a.cellRenderer, b.cellRenderer) && equal(a.columnIndex, b.columnIndex);
 });
 function useDebounceCallback(callback, delay) {
+  const $ = c(3);
   const timeoutRef = useRef(null);
-  const debouncedCallback = useCallback((...args) => {
-    if (timeoutRef.current !== null) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = window.setTimeout(() => {
-      callback?.(...args);
-    }, delay);
-  }, [callback, delay]);
+  let t0;
+  if ($[0] !== callback || $[1] !== delay) {
+    t0 = (...t1) => {
+      const args = t1;
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = window.setTimeout(() => {
+        callback?.(...args);
+      }, delay);
+    };
+    $[0] = callback;
+    $[1] = delay;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const debouncedCallback = t0;
   return debouncedCallback;
 }
 const VirtualListContext = createContext({});
@@ -9606,16 +9627,16 @@ function useTableSearchHelper(t0) {
       t12 = $[14];
     }
     const searchBlocked = t12;
-    let t22;
+    let t2;
     if ($[15] !== customizationController.plugins || $[16] !== dataSource?.initTextSearch) {
-      t22 = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(_temp$k);
+      t2 = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(_temp$k);
       $[15] = customizationController.plugins;
       $[16] = dataSource?.initTextSearch;
-      $[17] = t22;
+      $[17] = t2;
     } else {
-      t22 = $[17];
+      t2 = $[17];
     }
-    const addTextSearchClickListener = t22;
+    const addTextSearchClickListener = t2;
     if (addTextSearchClickListener) {
       let t3;
       if ($[18] !== addTextSearchClickListener || $[19] !== collection || $[20] !== context || $[21] !== customizationController.plugins || $[22] !== dataSource || $[23] !== fullPath || $[24] !== parentCollectionIds || $[25] !== props || $[26] !== searchBlocked) {
@@ -9682,24 +9703,23 @@ function useTableSearchHelper(t0) {
     textSearchEnabled = $[6];
     onTextSearchClick = $[7];
   }
-  const t1 = textSearchEnabled;
-  let t2;
-  if ($[28] !== onTextSearchClick || $[29] !== t1 || $[30] !== textSearchInitialised || $[31] !== textSearchLoading) {
-    t2 = {
+  let t1;
+  if ($[28] !== onTextSearchClick || $[29] !== textSearchEnabled || $[30] !== textSearchInitialised || $[31] !== textSearchLoading) {
+    t1 = {
       textSearchLoading,
       textSearchInitialised,
       onTextSearchClick,
-      textSearchEnabled: t1
+      textSearchEnabled
     };
     $[28] = onTextSearchClick;
-    $[29] = t1;
+    $[29] = textSearchEnabled;
     $[30] = textSearchInitialised;
     $[31] = textSearchLoading;
-    $[32] = t2;
+    $[32] = t1;
   } else {
-    t2 = $[32];
+    t1 = $[32];
   }
-  return t2;
+  return t1;
 }
 function _temp$k(p_0) {
   return Boolean(p_0.collectionView?.onTextSearchClick);
@@ -11042,7 +11062,7 @@ function _temp$h(e_0) {
   return e_0.item.url;
 }
 function EntityCollectionViewActions(t0) {
-  const $ = c(39);
+  const $ = c(41);
   const {
     collection,
     relativePath,
@@ -11115,16 +11135,16 @@ function EntityCollectionViewActions(t0) {
     }
     const button = t42;
     const t52 = multipleDeleteEnabled ? "Delete" : "You have selected at least one entity you cannot delete";
-    let t6;
+    let t62;
     if ($[17] !== button || $[18] !== t52) {
-      t6 = /* @__PURE__ */ jsx(Tooltip, { title: t52, children: button });
+      t62 = /* @__PURE__ */ jsx(Tooltip, { title: t52, children: button });
       $[17] = button;
       $[18] = t52;
-      $[19] = t6;
+      $[19] = t62;
     } else {
-      t6 = $[19];
+      t62 = $[19];
     }
-    multipleDeleteButton = t6;
+    multipleDeleteButton = t62;
   }
   let t4;
   if ($[20] !== collection || $[21] !== collectionEntitiesCount || $[22] !== context || $[23] !== parentCollectionIds || $[24] !== path || $[25] !== relativePath || $[26] !== selectionController || $[27] !== tableController) {
@@ -11177,20 +11197,28 @@ function EntityCollectionViewActions(t0) {
     actions = $[32];
   }
   let t5;
-  if ($[35] !== actions || $[36] !== addButton || $[37] !== multipleDeleteButton) {
-    t5 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      actions,
+  if ($[35] !== actions) {
+    t5 = /* @__PURE__ */ jsx(ErrorBoundary, { children: actions });
+    $[35] = actions;
+    $[36] = t5;
+  } else {
+    t5 = $[36];
+  }
+  let t6;
+  if ($[37] !== addButton || $[38] !== multipleDeleteButton || $[39] !== t5) {
+    t6 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t5,
       multipleDeleteButton,
       addButton
     ] });
-    $[35] = actions;
-    $[36] = addButton;
-    $[37] = multipleDeleteButton;
-    $[38] = t5;
+    $[37] = addButton;
+    $[38] = multipleDeleteButton;
+    $[39] = t5;
+    $[40] = t6;
   } else {
-    t5 = $[38];
+    t6 = $[40];
   }
-  return t5;
+  return t6;
 }
 function useDraggable({
   containerRef,
@@ -11531,7 +11559,7 @@ function FormLayout(t0) {
   } = t0;
   let t1;
   if ($[0] !== className) {
-    t1 = cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl w-full h-fit", className);
+    t1 = cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit", className);
     $[0] = className;
     $[1] = t1;
   } else {
@@ -11597,7 +11625,6 @@ function EntityEditViewInner({
   if (collection.customId && collection.formAutoSave) {
     console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
   }
-  const actionsAtTheBottom = !largeLayout || layout === "side_panel";
   const [saving, setSaving] = useState(false);
   const [valuesToBeSaved, setValuesToBeSaved] = useState(void 0);
   useDebouncedCallback(valuesToBeSaved, () => {
@@ -11660,19 +11687,19 @@ function EntityEditViewInner({
   const autoSave = collection.formAutoSave && !collection.customId;
   const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
   const [usedEntity, setUsedEntity] = useState(entity);
-  const [readOnly, setReadOnly] = useState(void 0);
   const baseDataSourceValuesRef = useRef(cachedDirtyValues ?? getDataSourceEntityValues(initialResolvedCollection, status, usedEntity));
   useEffect(() => {
     if (entity) setUsedEntity(entity);
   }, [entity]);
-  useEffect(() => {
-    if (status === "new") {
-      setReadOnly(false);
+  const canEdit = useMemo(() => {
+    if (status === "new" || status === "copy") {
+      return true;
     } else {
-      const editEnabled = usedEntity ? canEditEntity(collection, authController, path, usedEntity ?? null) : false;
-      if (usedEntity) setReadOnly(!editEnabled);
+      return usedEntity ? canEditEntity(collection, authController, path, usedEntity ?? null) : false;
     }
   }, [authController, usedEntity, status]);
+  const readOnly = !canEdit;
+  console.log("readOnly", readOnly);
   const onPreSaveHookError = useCallback((e) => {
     setSaving(false);
     snackbarController.open({
@@ -11864,7 +11891,8 @@ function EntityEditViewInner({
   };
   const resolvedEntityViews = customViews ? customViews.map((e_4) => resolveEntityView(e_4, customizationController.entityViews)).filter(Boolean) : [];
   const selectedEntityView = resolvedEntityViews.find((e_5) => e_5.key === selectedTab);
-  const shouldShowEntityActions = selectedTab === MAIN_TAB_VALUE || selectedEntityView?.includeActions;
+  const shouldShowEntityActions = !readOnly && (selectedTab === MAIN_TAB_VALUE || selectedEntityView?.includeActions);
+  const actionsAtTheBottom = !largeLayout || layout === "side_panel" || shouldShowEntityActions === "bottom";
   const secondaryForms = customViews && resolvedEntityViews.filter((e_6) => e_6.includeActions).map((customView, colIndex) => {
     if (!customView) return null;
     const Builder = customView.Builder;
@@ -11872,7 +11900,7 @@ function EntityEditViewInner({
       console.error("customView.Builder is not defined");
       return null;
     }
-    return /* @__PURE__ */ jsx(FormLayout, { className: selectedTab !== customView.key ? "hidden" : "", formex, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsx(Builder, { collection, entity: usedEntity, modifiedValues: formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView.key}`);
+    return /* @__PURE__ */ jsx(FormLayout, { className: selectedTab !== customView.key ? "hidden" : "", formex, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Builder, { collection, entity: usedEntity, modifiedValues: formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView.key}`);
   }).filter(Boolean);
   const customViewsView = customViews && resolvedEntityViews.filter((e_7) => !e_7.includeActions).map((customView_0, colIndex_0) => {
     if (!customView_0) return null;
@@ -11881,16 +11909,16 @@ function EntityEditViewInner({
       console.error("customView.Builder is not defined");
       return null;
     }
-    return /* @__PURE__ */ jsx("div", { className: cls(defaultBorderMixin, "relative flex-grow w-full h-full overflow-auto", {
+    return /* @__PURE__ */ jsx("div", { className: cls(defaultBorderMixin, "relative flex-1 w-full h-full overflow-auto", {
       "hidden": selectedTab !== customView_0.key
-    }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsx(Builder_0, { collection, entity: usedEntity, modifiedValues: formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView_0.key}`);
+    }), role: "tabpanel", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Builder_0, { collection, entity: usedEntity, modifiedValues: formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView_0.key}`);
   }).filter(Boolean);
   const globalLoading = dataLoading && !usedEntity || (!usedEntity || readOnly === void 0) && (status === "existing" || status === "copy");
   const subCollectionsViews = subcollections && subcollections.map((subcollection, colIndex_1) => {
     const subcollectionId = subcollection.id ?? subcollection.path;
     const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : void 0;
     if (selectedTab !== subcollectionId) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "relative flex-grow h-full overflow-auto w-full", role: "tabpanel", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "relative flex-1 h-full overflow-auto w-full", role: "tabpanel", children: [
       globalLoading || saving && /* @__PURE__ */ jsx(CircularProgressCenter, {}),
       !globalLoading && (usedEntity && fullPath ? /* @__PURE__ */ jsx(EntityCollectionView, { fullPath, parentCollectionIds: [...parentCollectionIds, collection.id], isSubCollection: true, updateUrl: false, ...subcollection, openEntityMode: layout }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-full h-full p-3", children: /* @__PURE__ */ jsx(Typography, { variant: "label", children: "You need to save your entity before adding additional collections" }) }))
     ] }, `subcol_${subcollectionId}`);
@@ -12005,15 +12033,18 @@ function EntityEditViewInner({
       });
     }
   }, [formex.isSubmitting, autoSave, underlyingChanges, entity, formex.values, formex.touched, formex.setFieldValue]);
-  const formFields = /* @__PURE__ */ jsx(Fragment, { children: getFormFieldKeys(resolvedCollection).map((key_1) => {
-    const property_0 = resolvedCollection.properties[key_1];
+  const formFieldKeys = getFormFieldKeys(resolvedCollection);
+  formFieldKeys.map((key_1) => resolvedCollection.properties[key_1]);
+  const formFields = /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-4 w-full space-y-8", children: formFieldKeys.map((key_2) => {
+    const property_0 = resolvedCollection.properties[key_2];
     if (property_0) {
-      const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_1) && formex.touched[key_1];
+      const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_2) && formex.touched[key_2];
       const disabled = !autoSave && formex.isSubmitting || isReadOnly(property_0) || Boolean(property_0.disabled);
       const hidden = isHidden(property_0);
       if (hidden) return null;
+      const widthPercentage = property_0.widthPercentage ?? 100;
       const cmsFormFieldProps = {
-        propertyKey: key_1,
+        propertyKey: key_2,
         disabled,
         property: property_0,
         includeDescription: property_0.description || property_0.longDescription,
@@ -12023,24 +12054,26 @@ function EntityEditViewInner({
         minimalistView: false,
         autoFocus: false
       };
-      return /* @__PURE__ */ jsx("div", { id: `form_field_${key_1}`, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) }) }, `field_${resolvedCollection.name}_${key_1}`);
+      return /* @__PURE__ */ jsx("div", { id: `form_field_${key_2}`, className: "relative", style: {
+        width: widthPercentage === 100 ? "100%" : `calc(${widthPercentage}% - 8px)`
+      }, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) }) }, `field_${resolvedCollection.name}_${key_2}`);
     }
-    const additionalField = resolvedCollection.additionalFields?.find((f) => f.key === key_1);
+    const additionalField = resolvedCollection.additionalFields?.find((f) => f.key === key_2);
     if (additionalField && entity) {
       const Builder_1 = additionalField.Builder;
       if (!Builder_1 && !additionalField.value) {
         throw new Error("When using additional fields you need to provide a Builder or a value");
       }
-      const child = Builder_1 ? /* @__PURE__ */ jsx(Builder_1, { entity, context }) : /* @__PURE__ */ jsx(Fragment, { children: additionalField.value?.({
+      const child = Builder_1 ? /* @__PURE__ */ jsx(Builder_1, { entity, context }) : /* @__PURE__ */ jsx("div", { className: "w-full", children: additionalField.value?.({
         entity,
         context
       })?.toString() });
-      return /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey: key_1, icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
-        /* @__PURE__ */ jsx("div", { className: cls(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ jsx(ErrorBoundary, { children: child }) })
-      ] }, `additional_${key_1}`);
+      return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+        /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey: key_2, icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
+        /* @__PURE__ */ jsx("div", { className: cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ jsx(ErrorBoundary, { children: child }) })
+      ] }, `additional_${key_2}`);
     }
-    console.warn(`Property ${key_1} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
+    console.warn(`Property ${key_2} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
     return null;
   }).filter(Boolean) });
   const disabled_0 = formex.isSubmitting || !modified && status === "existing";
@@ -12082,7 +12115,7 @@ function EntityEditViewInner({
     /* @__PURE__ */ jsxs("div", { className: "w-full py-2 flex flex-col items-start mt-4 lg:mt-8 mb-8", children: [
       /* @__PURE__ */ jsx(Typography, { className: "mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0", variant: "h4", children: title ?? inputCollection.singularName ?? inputCollection.name }),
       /* @__PURE__ */ jsx(Alert, { color: "base", className: "w-full", size: "small", children: /* @__PURE__ */ jsxs("code", { className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark", children: [
-        path,
+        entity?.path ?? path,
         "/",
         entityId
       ] }) })
@@ -12093,9 +12126,9 @@ function EntityEditViewInner({
       /* @__PURE__ */ jsx(ErrorFocus, { containerRef: formRef })
     ] }) }),
     actionsAtTheBottom && /* @__PURE__ */ jsx("div", { className: "h-16" })
-  ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+  ] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ jsx(Typography, { className: "mt-16 mb-8 mx-8", variant: "h4", children: collection.singularName ?? collection.name }),
-    /* @__PURE__ */ jsx(EntityView, { className: "px-12", entity: usedEntity, path, collection })
+    /* @__PURE__ */ jsx(EntityView, { className: "px-8", entity: usedEntity, path, collection })
   ] });
   const subcollectionTabs = subcollections && subcollections.map((subcollection_0) => /* @__PURE__ */ jsx(Tab, { className: "text-sm min-w-[120px]", value: subcollection_0.id, children: subcollection_0.name }, `entity_detail_collection_tab_${subcollection_0.name}`));
   const customViewTabs = resolvedEntityViews.map((view) => /* @__PURE__ */ jsx(Tab, { className: "text-sm min-w-[120px]", value: view.key, children: view.name }, `entity_detail_collection_tab_${view.name}`));
@@ -12103,6 +12136,7 @@ function EntityEditViewInner({
     if (entityId && onIdChange) onIdChange(entityId);
   }, [entityId, onIdChange]);
   const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
+  const shouldIncludeForm = selectedTab === MAIN_TAB_VALUE || selectedEntityView?.includeActions;
   let result = /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-900", children: [
     shouldShowTopBar && /* @__PURE__ */ jsxs("div", { className: cls("h-14 flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex items-end bg-surface-50 dark:bg-surface-900", defaultBorderMixin), children: [
       barActions,
@@ -12122,7 +12156,7 @@ function EntityEditViewInner({
         values: getDataSourceEntityValues(initialResolvedCollection, status, entity)
       });
       return onDiscard();
-    }, noValidate: true, className: "flex-1 flex flex-row w-full overflow-y-auto justify-center", children: [
+    }, noValidate: true, className: cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", shouldIncludeForm ? "" : "hidden"), children: [
       /* @__PURE__ */ jsx(FormLayout, { className: !mainViewVisible ? "hidden" : "", id: `form_${path}`, formex, children: globalLoading ? /* @__PURE__ */ jsx("div", { className: "w-full pt-12 pb-16 px-4 sm:px-8 md:px-10", children: /* @__PURE__ */ jsx(CircularProgressCenter, {}) }) : entityView }),
       secondaryForms,
       shouldShowEntityActions && dialogActions
@@ -12181,6 +12215,7 @@ function buildBottomActions({
   pluginActions,
   layout
 }) {
+  const canClose = layout === "side_panel";
   return /* @__PURE__ */ jsxs(DialogActions, { position: "absolute", children: [
     savingError && /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Typography, { color: "error", children: savingError.message }) }),
     entity && formActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex-grow flex overflow-auto no-scrollbar", children: formActions.map((action) => /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: (event) => {
@@ -12196,14 +12231,14 @@ function buildBottomActions({
     }, children: action.icon }, action.name)) }),
     pluginActions,
     /* @__PURE__ */ jsx(Button, { variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
-    /* @__PURE__ */ jsxs(Button, { variant: "text", color: "primary", type: "submit", disabled: disabled || isSubmitting, onClick: () => {
+    /* @__PURE__ */ jsxs(Button, { variant: canClose ? "text" : "filled", color: "primary", type: "submit", disabled: disabled || isSubmitting, onClick: () => {
       setPendingClose?.(false);
     }, children: [
       status === "existing" && "Save",
       status === "copy" && "Create copy",
       status === "new" && "Create"
     ] }),
-    /* @__PURE__ */ jsxs(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled, onClick: () => {
+    canClose && /* @__PURE__ */ jsxs(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled, onClick: () => {
       setPendingClose?.(true);
     }, children: [
       status === "existing" && "Save and close",
@@ -12225,7 +12260,7 @@ function buildSideActions({
   setPendingClose,
   pluginActions
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cls("overflow-auto h-full flex flex-col gap-2 w-80 xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin), children: [
     /* @__PURE__ */ jsxs(LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", disabled: disabled || isSubmitting, onClick: () => {
       setPendingClose?.(false);
     }, children: [
@@ -14067,7 +14102,7 @@ function ReferenceWidget({
   ] });
 }
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
-if (iconSynonyms && process.env.NODE_ENV !== "production") {
+if (process.env.NODE_ENV !== "production") {
   Object.keys(iconSynonyms).forEach((icon) => {
     if (!iconKeys.includes(icon)) {
       console.warn(`The icon ${icon} no longer exists. Remove it from \`iconSynonyms\``);
@@ -14285,9 +14320,8 @@ function getParentReferencesFromPath(props) {
     const subpathCombination = subpathCombinations[i];
     const collection = collections && collections.find((entry) => entry.id === subpathCombination || entry.path === subpathCombination);
     if (collection) {
-      const path2 = collection.path;
-      const collectionPath = currentFullPath && currentFullPath.length > 0 ? currentFullPath + "/" + path2 : path2;
-      const restOfThePath = removeInitialAndTrailingSlashes(removeInitialAndTrailingSlashes(path2).replace(subpathCombination, ""));
+      const collectionPath = currentFullPath && currentFullPath.length > 0 ? currentFullPath + "/" + collection.path : collection.path;
+      const restOfThePath = removeInitialAndTrailingSlashes(removeInitialAndTrailingSlashes(path).replace(subpathCombination, ""));
       const nextSegments = restOfThePath.length > 0 ? restOfThePath.split("/") : [];
       if (nextSegments.length > 0) {
         const entityId = nextSegments[0];
@@ -16419,7 +16453,7 @@ function ArrayOneOfPreview(t0) {
   return t3;
 }
 function MapPropertyPreview(t0) {
-  const $ = c(12);
+  const $ = c(15);
   const {
     value,
     property,
@@ -16444,53 +16478,50 @@ function MapPropertyPreview(t0) {
     return null;
   }
   let t1;
-  let t2;
-  let t3;
-  if ($[2] !== mapProperty.name || $[3] !== mapProperty.properties || $[4] !== size || $[5] !== value) {
-    t3 = Symbol.for("react.early_return_sentinel");
-    bb0: {
-      const mapPropertyKeys = Object.keys(mapProperty.properties);
-      if (size === "small") {
-        t3 = /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col space-y-1 md:space-y-2", children: mapPropertyKeys.map((key, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key, value: value[key], property: mapProperty.properties[key], size }) }, "map_preview_" + mapProperty.name + key + index) }, `map_${key}`)) });
-        break bb0;
-      }
-      t1 = "flex flex-col gap-1 w-full";
-      t2 = mapPropertyKeys && mapPropertyKeys.map((key_0, index_0) => {
-        const childProperty = mapProperty.properties[key_0];
-        return /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "last:border-b-0 border-b"), children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "font-mono break-words", color: "secondary", children: childProperty.name }) }),
-            /* @__PURE__ */ jsx("div", { className: "flex-grow max-w-[75%]", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: !(childProperty.dataType === "map" || childProperty === "array") && /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key_0, value: value[key_0], property: childProperty, size }) }) })
-          ] }),
-          (childProperty.dataType === "map" || childProperty === "array") && /* @__PURE__ */ jsx("div", { className: cls(defaultBorderMixin, "border-l pl-4 ml-2 my-2"), children: /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key_0, value: value[key_0], property: childProperty, size }) })
-        ] }, `map_preview_table_${key_0}}`);
-      });
-    }
-    $[2] = mapProperty.name;
-    $[3] = mapProperty.properties;
-    $[4] = size;
-    $[5] = value;
-    $[6] = t1;
-    $[7] = t2;
-    $[8] = t3;
+  if ($[2] !== mapProperty.properties) {
+    t1 = Object.keys(mapProperty.properties);
+    $[2] = mapProperty.properties;
+    $[3] = t1;
   } else {
-    t1 = $[6];
-    t2 = $[7];
-    t3 = $[8];
+    t1 = $[3];
   }
-  if (t3 !== Symbol.for("react.early_return_sentinel")) {
-    return t3;
+  const mapPropertyKeys = t1;
+  if (size === "small") {
+    let t22;
+    if ($[4] !== mapProperty.name || $[5] !== mapProperty.properties || $[6] !== mapPropertyKeys || $[7] !== size || $[8] !== value) {
+      t22 = /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col space-y-1 md:space-y-2", children: mapPropertyKeys.map((key, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key, value: value[key], property: mapProperty.properties[key], size }) }, "map_preview_" + mapProperty.name + key + index) }, `map_${key}`)) });
+      $[4] = mapProperty.name;
+      $[5] = mapProperty.properties;
+      $[6] = mapPropertyKeys;
+      $[7] = size;
+      $[8] = value;
+      $[9] = t22;
+    } else {
+      t22 = $[9];
+    }
+    return t22;
   }
-  let t4;
-  if ($[9] !== t1 || $[10] !== t2) {
-    t4 = /* @__PURE__ */ jsx("div", { className: t1, children: t2 });
-    $[9] = t1;
-    $[10] = t2;
-    $[11] = t4;
+  let t2;
+  if ($[10] !== mapProperty.properties || $[11] !== mapPropertyKeys || $[12] !== size || $[13] !== value) {
+    t2 = /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 w-full", children: mapPropertyKeys && mapPropertyKeys.map((key_0, index_0) => {
+      const childProperty = mapProperty.properties[key_0];
+      return /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "last:border-b-0 border-b"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "font-mono break-words", color: "secondary", children: childProperty.name }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-grow max-w-[75%]", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: !(childProperty.dataType === "map" || childProperty === "array") && /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key_0, value: value[key_0], property: childProperty, size }) }) })
+        ] }),
+        (childProperty.dataType === "map" || childProperty === "array") && /* @__PURE__ */ jsx("div", { className: cls(defaultBorderMixin, "border-l pl-4 ml-2 my-2"), children: /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key_0, value: value[key_0], property: childProperty, size }) })
+      ] }, `map_preview_table_${key_0}}`);
+    }) });
+    $[10] = mapProperty.properties;
+    $[11] = mapPropertyKeys;
+    $[12] = size;
+    $[13] = value;
+    $[14] = t2;
   } else {
-    t4 = $[11];
+    t2 = $[14];
   }
-  return t4;
+  return t2;
 }
 function KeyValuePreview(t0) {
   const $ = c(5);
@@ -17127,7 +17158,7 @@ function SelectFieldBinding(t0) {
   const t10 = property.validation?.required;
   let t11;
   if ($[13] !== property.name || $[14] !== t10 || $[15] !== t9) {
-    t11 = /* @__PURE__ */ jsx(LabelWithIcon, { icon: t9, required: t10, title: property.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" });
+    t11 = /* @__PURE__ */ jsx(LabelWithIcon, { icon: t9, required: t10, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5 my-0" });
     $[13] = property.name;
     $[14] = t10;
     $[15] = t9;
@@ -17258,7 +17289,7 @@ function MultiSelectFieldBinding({
     ] }, enumKey);
   }, [enumValues, setValue, value]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(MultiSelect, { className: "w-full mt-2", size: size === "medium" ? "medium" : "small", value: validValue ? value.map((v_0) => v_0.toString()) : [], disabled, modalPopover: true, label: /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }), onValueChange: (updatedValue) => {
+    /* @__PURE__ */ jsx(MultiSelect, { className: "w-full mt-2", size: size === "medium" ? "medium" : "small", value: validValue ? value.map((v_0) => v_0.toString()) : [], disabled, modalPopover: true, label: /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }), onValueChange: (updatedValue) => {
       let newValue;
       if (of && of?.dataType === "number") {
         newValue = updatedValue ? updatedValue.map((e_1) => parseFloat(e_1)) : [];
@@ -17328,7 +17359,7 @@ function ArrayOfReferencesFieldBinding({
     return /* @__PURE__ */ jsx(ReferencePreview, { disabled: !ofProperty.path, previewProperties: ofProperty.previewProperties, size: "medium", onClick: onEntryClick, hover: !disabled, reference: entryValue, includeId: ofProperty.includeId, includeEntityLink: ofProperty.includeEntityLink }, internalId);
   }, [ofProperty.path, ofProperty.previewProperties, value]);
   const title = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "flex flex-grow text-text-secondary dark:text-text-secondary-dark" }),
+    /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 flex flex-grow text-text-secondary dark:text-text-secondary-dark" }),
     Array.isArray(value) && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "px-4", children: [
       "(",
       value.length,
@@ -17527,7 +17558,7 @@ function StorageUploadFieldBinding(t0) {
   const resolvedProperty = t6;
   let t7;
   if ($[19] !== minimalistView || $[20] !== property || $[21] !== propertyKey) {
-    t7 = !minimalistView && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" });
+    t7 = !minimalistView && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8text-text-secondary dark:text-text-secondary-dark ml-3.5" });
     $[19] = minimalistView;
     $[20] = property;
     $[21] = propertyKey;
@@ -17889,7 +17920,7 @@ function StorageUpload({
   } }) });
 }
 function TextFieldBinding(t0) {
-  const $ = c(51);
+  const $ = c(52);
   const {
     propertyKey,
     value,
@@ -17970,26 +18001,26 @@ function TextFieldBinding(t0) {
     isMultiline = $[10];
     onChange = $[11];
   }
-  let t4;
+  const t4 = property.widthPercentage !== void 0 ? "mt-8" : void 0;
+  let t5;
   if ($[12] !== property) {
-    t4 = getIconForProperty(property, "small");
+    t5 = getIconForProperty(property, "small");
     $[12] = property;
-    $[13] = t4;
+    $[13] = t5;
   } else {
-    t4 = $[13];
+    t5 = $[13];
   }
-  const t5 = property.validation?.required;
-  let t6;
-  if ($[14] !== property.name || $[15] !== t4 || $[16] !== t5) {
-    t6 = /* @__PURE__ */ jsx(LabelWithIcon, { icon: t4, required: t5, title: property.name });
+  const t6 = property.validation?.required;
+  let t7;
+  if ($[14] !== property.name || $[15] !== t5 || $[16] !== t6) {
+    t7 = /* @__PURE__ */ jsx(LabelWithIcon, { icon: t5, required: t6, title: property.name });
     $[14] = property.name;
-    $[15] = t4;
-    $[16] = t5;
-    $[17] = t6;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t7;
   } else {
-    t6 = $[17];
+    t7 = $[17];
   }
-  const t7 = inputType;
   let t8;
   if ($[18] !== handleClearClick || $[19] !== property.clearable) {
     t8 = property.clearable && /* @__PURE__ */ jsx(IconButton, { onClick: handleClearClick, children: /* @__PURE__ */ jsx(CloseIcon, {}) });
@@ -18002,73 +18033,74 @@ function TextFieldBinding(t0) {
   const t9 = showError ? error : void 0;
   const t10 = error ? "text-red-500 dark:text-red-600" : "";
   let t11;
-  if ($[21] !== autoFocus || $[22] !== disabled || $[23] !== isMultiline || $[24] !== onChange || $[25] !== size || $[26] !== t10 || $[27] !== t6 || $[28] !== t7 || $[29] !== t8 || $[30] !== t9 || $[31] !== value) {
-    t11 = /* @__PURE__ */ jsx(TextField, { size, value, onChange, autoFocus, label: t6, type: t7, multiline: isMultiline, disabled, endAdornment: t8, error: t9, inputClassName: t10 });
+  if ($[21] !== autoFocus || $[22] !== disabled || $[23] !== inputType || $[24] !== isMultiline || $[25] !== onChange || $[26] !== size || $[27] !== t10 || $[28] !== t4 || $[29] !== t7 || $[30] !== t8 || $[31] !== t9 || $[32] !== value) {
+    t11 = /* @__PURE__ */ jsx(TextField, { size, value, onChange, autoFocus, className: t4, label: t7, type: inputType, multiline: isMultiline, disabled, endAdornment: t8, error: t9, inputClassName: t10 });
     $[21] = autoFocus;
     $[22] = disabled;
-    $[23] = isMultiline;
-    $[24] = onChange;
-    $[25] = size;
-    $[26] = t10;
-    $[27] = t6;
-    $[28] = t7;
-    $[29] = t8;
-    $[30] = t9;
-    $[31] = value;
-    $[32] = t11;
+    $[23] = inputType;
+    $[24] = isMultiline;
+    $[25] = onChange;
+    $[26] = size;
+    $[27] = t10;
+    $[28] = t4;
+    $[29] = t7;
+    $[30] = t8;
+    $[31] = t9;
+    $[32] = value;
+    $[33] = t11;
   } else {
-    t11 = $[32];
+    t11 = $[33];
   }
   let t12;
-  if ($[33] !== propertyKey || $[34] !== t11) {
+  if ($[34] !== propertyKey || $[35] !== t11) {
     t12 = /* @__PURE__ */ jsx(PropertyIdCopyTooltip, { propertyKey, children: t11 });
-    $[33] = propertyKey;
-    $[34] = t11;
-    $[35] = t12;
+    $[34] = propertyKey;
+    $[35] = t11;
+    $[36] = t12;
   } else {
-    t12 = $[35];
+    t12 = $[36];
   }
   let t13;
-  if ($[36] !== disabled || $[37] !== error || $[38] !== includeDescription || $[39] !== property || $[40] !== showError) {
+  if ($[37] !== disabled || $[38] !== error || $[39] !== includeDescription || $[40] !== property || $[41] !== showError) {
     t13 = /* @__PURE__ */ jsx(FieldHelperText, { includeDescription, showError, error, disabled, property });
-    $[36] = disabled;
-    $[37] = error;
-    $[38] = includeDescription;
-    $[39] = property;
-    $[40] = showError;
-    $[41] = t13;
+    $[37] = disabled;
+    $[38] = error;
+    $[39] = includeDescription;
+    $[40] = property;
+    $[41] = showError;
+    $[42] = t13;
   } else {
-    t13 = $[41];
+    t13 = $[42];
   }
   let t14;
-  if ($[42] !== property || $[43] !== size || $[44] !== url || $[45] !== value) {
+  if ($[43] !== property || $[44] !== size || $[45] !== url || $[46] !== value) {
     t14 = url && /* @__PURE__ */ jsx(Collapse, { className: "mt-1 ml-1", in: Boolean(value), children: /* @__PURE__ */ jsx(PropertyPreview, { value, property, size }) });
-    $[42] = property;
-    $[43] = size;
-    $[44] = url;
-    $[45] = value;
-    $[46] = t14;
+    $[43] = property;
+    $[44] = size;
+    $[45] = url;
+    $[46] = value;
+    $[47] = t14;
   } else {
-    t14 = $[46];
+    t14 = $[47];
   }
   let t15;
-  if ($[47] !== t12 || $[48] !== t13 || $[49] !== t14) {
+  if ($[48] !== t12 || $[49] !== t13 || $[50] !== t14) {
     t15 = /* @__PURE__ */ jsxs(Fragment, { children: [
       t12,
       t13,
       t14
     ] });
-    $[47] = t12;
-    $[48] = t13;
-    $[49] = t14;
-    $[50] = t15;
+    $[48] = t12;
+    $[49] = t13;
+    $[50] = t14;
+    $[51] = t15;
   } else {
-    t15 = $[50];
+    t15 = $[51];
   }
   return t15;
 }
 const SwitchFieldBinding = function SwitchFieldBinding2(t0) {
-  const $ = c(32);
+  const $ = c(33);
   const {
     propertyKey,
     value,
@@ -18105,73 +18137,75 @@ const SwitchFieldBinding = function SwitchFieldBinding2(t0) {
   } else {
     t3 = $[5];
   }
-  let t4;
+  const t4 = property.widthPercentage !== void 0 ? "mt-8" : void 0;
+  let t5;
   if ($[6] !== property) {
-    t4 = getIconForProperty(property, "small");
+    t5 = getIconForProperty(property, "small");
     $[6] = property;
-    $[7] = t4;
+    $[7] = t5;
   } else {
-    t4 = $[7];
+    t5 = $[7];
   }
-  const t5 = property.validation?.required;
-  let t6;
-  if ($[8] !== property.name || $[9] !== t4 || $[10] !== t5) {
-    t6 = /* @__PURE__ */ jsx(LabelWithIcon, { icon: t4, required: t5, title: property.name });
+  const t6 = property.validation?.required;
+  let t7;
+  if ($[8] !== property.name || $[9] !== t5 || $[10] !== t6) {
+    t7 = /* @__PURE__ */ jsx(LabelWithIcon, { icon: t5, required: t6, title: property.name });
     $[8] = property.name;
-    $[9] = t4;
-    $[10] = t5;
-    $[11] = t6;
+    $[9] = t5;
+    $[10] = t6;
+    $[11] = t7;
   } else {
-    t6 = $[11];
+    t7 = $[11];
   }
-  let t7;
-  if ($[12] !== autoFocus || $[13] !== disabled || $[14] !== showError || $[15] !== size || $[16] !== t3 || $[17] !== t6 || $[18] !== value) {
-    t7 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { value, onValueChange: t3, error: showError, label: t6, disabled, autoFocus, size });
+  let t8;
+  if ($[12] !== autoFocus || $[13] !== disabled || $[14] !== showError || $[15] !== size || $[16] !== t3 || $[17] !== t4 || $[18] !== t7 || $[19] !== value) {
+    t8 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { value, onValueChange: t3, error: showError, className: t4, label: t7, disabled, autoFocus, size });
     $[12] = autoFocus;
     $[13] = disabled;
     $[14] = showError;
     $[15] = size;
     $[16] = t3;
-    $[17] = t6;
-    $[18] = value;
-    $[19] = t7;
+    $[17] = t4;
+    $[18] = t7;
+    $[19] = value;
+    $[20] = t8;
   } else {
-    t7 = $[19];
+    t8 = $[20];
   }
-  let t8;
-  if ($[20] !== propertyKey || $[21] !== t7) {
-    t8 = /* @__PURE__ */ jsx(PropertyIdCopyTooltip, { propertyKey, children: t7 });
-    $[20] = propertyKey;
-    $[21] = t7;
+  let t9;
+  if ($[21] !== propertyKey || $[22] !== t8) {
+    t9 = /* @__PURE__ */ jsx(PropertyIdCopyTooltip, { propertyKey, children: t8 });
+    $[21] = propertyKey;
     $[22] = t8;
+    $[23] = t9;
   } else {
-    t8 = $[22];
+    t9 = $[23];
   }
-  let t9;
-  if ($[23] !== disabled || $[24] !== error || $[25] !== includeDescription || $[26] !== property || $[27] !== showError) {
-    t9 = /* @__PURE__ */ jsx(FieldHelperText, { includeDescription, showError, error, disabled, property });
-    $[23] = disabled;
-    $[24] = error;
-    $[25] = includeDescription;
-    $[26] = property;
-    $[27] = showError;
-    $[28] = t9;
+  let t10;
+  if ($[24] !== disabled || $[25] !== error || $[26] !== includeDescription || $[27] !== property || $[28] !== showError) {
+    t10 = /* @__PURE__ */ jsx(FieldHelperText, { includeDescription, showError, error, disabled, property });
+    $[24] = disabled;
+    $[25] = error;
+    $[26] = includeDescription;
+    $[27] = property;
+    $[28] = showError;
+    $[29] = t10;
   } else {
-    t9 = $[28];
+    t10 = $[29];
   }
-  let t10;
-  if ($[29] !== t8 || $[30] !== t9) {
-    t10 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      t8,
-      t9
+  let t11;
+  if ($[30] !== t10 || $[31] !== t9) {
+    t11 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t9,
+      t10
     ] });
-    $[29] = t8;
-    $[30] = t9;
-    $[31] = t10;
+    $[30] = t10;
+    $[31] = t9;
+    $[32] = t11;
   } else {
-    t10 = $[31];
+    t11 = $[32];
   }
-  return t10;
+  return t11;
 };
 function DateTimeFieldBinding(t0) {
   const $ = c(33);
@@ -18301,7 +18335,7 @@ function ReadOnlyFieldBinding(t0) {
   }
   let t1;
   if ($[0] !== minimalistView || $[1] !== property || $[2] !== propertyKey) {
-    t1 = !minimalistView && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" });
+    t1 = !minimalistView && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" });
     $[0] = minimalistView;
     $[1] = property;
     $[2] = propertyKey;
@@ -18311,7 +18345,7 @@ function ReadOnlyFieldBinding(t0) {
   }
   let t2;
   if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = cls(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar");
+    t2 = cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar");
     $[4] = t2;
   } else {
     t2 = $[4];
@@ -18423,7 +18457,7 @@ function ReferenceFieldBindingInternal({
     referenceDialogController.open();
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !minimalistView && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
+    !minimalistView && /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
     !collection && /* @__PURE__ */ jsx(ErrorView, { error: "The specified collection does not exist. Check console" }),
     collection && /* @__PURE__ */ jsxs(Fragment, { children: [
       value && /* @__PURE__ */ jsx(ReferencePreview, { disabled: !property.path, previewProperties: property.previewProperties, hover: !disabled, size, onClick: disabled || isSubmitting ? void 0 : onEntryClick, reference: value, includeEntityLink: property.includeEntityLink, includeId: property.includeId }),
@@ -18525,7 +18559,7 @@ function PropertyFieldBindingInternal(t0) {
       if (!Component) {
         console.warn(`No field component found for property ${propertyKey}`);
         console.warn("Property:", property);
-        return /* @__PURE__ */ jsx("div", { children: `Currently the field ${resolvedProperty.dataType} is not supported` });
+        return /* @__PURE__ */ jsx("div", { className: "w-full", children: `Currently the field ${resolvedProperty.dataType} is not supported` });
       }
       const componentProps = {
         propertyKey,
@@ -18689,7 +18723,7 @@ function useWrappedComponent({
   return wrapperRef.current;
 }
 function MapFieldBinding(t0) {
-  const $ = c(48);
+  const $ = c(40);
   const {
     propertyKey,
     value,
@@ -18715,15 +18749,7 @@ function MapFieldBinding(t0) {
     if (value) {
       let t12;
       if ($[0] !== property.properties || $[1] !== value) {
-        let t22;
-        if ($[3] !== property.properties) {
-          t22 = (key) => key in property.properties;
-          $[3] = property.properties;
-          $[4] = t22;
-        } else {
-          t22 = $[4];
-        }
-        t12 = pick(property.properties, ...Object.keys(value).filter(t22));
+        t12 = pick(property.properties, ...Object.keys(value).filter((key) => key in property.properties));
         $[0] = property.properties;
         $[1] = value;
         $[2] = t12;
@@ -18733,11 +18759,11 @@ function MapFieldBinding(t0) {
       mapProperties = t12;
     } else {
       let t12;
-      if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
         t12 = {};
-        $[5] = t12;
+        $[3] = t12;
       } else {
-        t12 = $[5];
+        t12 = $[3];
       }
       mapProperties = t12;
     }
@@ -18745,9 +18771,9 @@ function MapFieldBinding(t0) {
     mapProperties = property.properties;
   }
   let t1;
-  if ($[6] !== autoFocus || $[7] !== context || $[8] !== disabled || $[9] !== includeDescription || $[10] !== mapProperties || $[11] !== onPropertyChange || $[12] !== propertyKey || $[13] !== underlyingValueHasChanged) {
+  if ($[4] !== autoFocus || $[5] !== context || $[6] !== disabled || $[7] !== includeDescription || $[8] !== mapProperties || $[9] !== onPropertyChange || $[10] !== propertyKey || $[11] !== underlyingValueHasChanged) {
     let t22;
-    if ($[15] !== autoFocus || $[16] !== context || $[17] !== disabled || $[18] !== includeDescription || $[19] !== onPropertyChange || $[20] !== propertyKey || $[21] !== underlyingValueHasChanged) {
+    if ($[13] !== autoFocus || $[14] !== context || $[15] !== disabled || $[16] !== includeDescription || $[17] !== onPropertyChange || $[18] !== propertyKey || $[19] !== underlyingValueHasChanged) {
       t22 = (t32, index) => {
         const [entryKey, childProperty] = t32;
         const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
@@ -18771,106 +18797,86 @@ function MapFieldBinding(t0) {
         };
         return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...fieldBindingProps }) }) }, `map-${propertyKey}-${index}`);
       };
-      $[15] = autoFocus;
-      $[16] = context;
-      $[17] = disabled;
-      $[18] = includeDescription;
-      $[19] = onPropertyChange;
-      $[20] = propertyKey;
-      $[21] = underlyingValueHasChanged;
-      $[22] = t22;
+      $[13] = autoFocus;
+      $[14] = context;
+      $[15] = disabled;
+      $[16] = includeDescription;
+      $[17] = onPropertyChange;
+      $[18] = propertyKey;
+      $[19] = underlyingValueHasChanged;
+      $[20] = t22;
     } else {
-      t22 = $[22];
+      t22 = $[20];
     }
     t1 = Object.entries(mapProperties).filter(_temp$7).map(t22);
-    $[6] = autoFocus;
-    $[7] = context;
-    $[8] = disabled;
-    $[9] = includeDescription;
-    $[10] = mapProperties;
-    $[11] = onPropertyChange;
-    $[12] = propertyKey;
-    $[13] = underlyingValueHasChanged;
-    $[14] = t1;
+    $[4] = autoFocus;
+    $[5] = context;
+    $[6] = disabled;
+    $[7] = includeDescription;
+    $[8] = mapProperties;
+    $[9] = onPropertyChange;
+    $[10] = propertyKey;
+    $[11] = underlyingValueHasChanged;
+    $[12] = t1;
   } else {
-    t1 = $[14];
+    t1 = $[12];
   }
   let t2;
-  if ($[23] !== t1) {
+  if ($[21] !== t1) {
     t2 = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "py-1 flex flex-col space-y-2", children: t1 }) });
-    $[23] = t1;
-    $[24] = t2;
+    $[21] = t1;
+    $[22] = t2;
   } else {
-    t2 = $[24];
+    t2 = $[22];
   }
   const mapFormView = t2;
   let t3;
-  if ($[25] !== property) {
-    t3 = getIconForProperty(property, "small");
-    $[25] = property;
-    $[26] = t3;
-  } else {
-    t3 = $[26];
-  }
-  const t4 = property.validation?.required;
-  let t5;
-  if ($[27] !== property.name || $[28] !== propertyKey || $[29] !== t3 || $[30] !== t4) {
-    t5 = /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: t3, required: t4, title: property.name, className: "text-text-secondary dark:text-text-secondary-dark" });
-    $[27] = property.name;
-    $[28] = propertyKey;
-    $[29] = t3;
-    $[30] = t4;
-    $[31] = t5;
-  } else {
-    t5 = $[31];
-  }
-  const title = t5;
-  let t6;
-  if ($[32] !== expanded || $[33] !== mapFormView || $[34] !== minimalistView || $[35] !== onPropertyChange || $[36] !== title) {
-    t6 = !minimalistView && /* @__PURE__ */ jsx(ExpandablePanel, { initiallyExpanded: expanded, onExpandedChange: (expanded_0) => {
+  if ($[23] !== expanded || $[24] !== mapFormView || $[25] !== minimalistView || $[26] !== onPropertyChange || $[27] !== property || $[28] !== propertyKey) {
+    t3 = !minimalistView && /* @__PURE__ */ jsx(ExpandablePanel, { initiallyExpanded: expanded, onExpandedChange: (expanded_0) => {
       onPropertyChange?.({
         expanded: expanded_0
       });
-    }, innerClassName: "px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900", title, children: mapFormView });
-    $[32] = expanded;
-    $[33] = mapFormView;
-    $[34] = minimalistView;
-    $[35] = onPropertyChange;
-    $[36] = title;
-    $[37] = t6;
+    }, className: property.widthPercentage !== void 0 ? "mt-8" : void 0, innerClassName: "px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900", title: /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: getIconForProperty(property, "small"), required: property.validation?.required, title: property.name, className: "text-text-secondary dark:text-text-secondary-dark" }), children: mapFormView });
+    $[23] = expanded;
+    $[24] = mapFormView;
+    $[25] = minimalistView;
+    $[26] = onPropertyChange;
+    $[27] = property;
+    $[28] = propertyKey;
+    $[29] = t3;
   } else {
-    t6 = $[37];
+    t3 = $[29];
   }
-  const t7 = minimalistView && mapFormView;
-  const t8 = showError ?? false;
-  const t9 = error ? typeof error === "string" ? error : "A property of this map has an error" : void 0;
-  let t10;
-  if ($[38] !== disabled || $[39] !== includeDescription || $[40] !== property || $[41] !== t8 || $[42] !== t9) {
-    t10 = /* @__PURE__ */ jsx(FieldHelperText, { includeDescription, showError: t8, error: t9, disabled, property });
-    $[38] = disabled;
-    $[39] = includeDescription;
-    $[40] = property;
-    $[41] = t8;
-    $[42] = t9;
-    $[43] = t10;
+  const t4 = minimalistView && mapFormView;
+  const t5 = showError ?? false;
+  const t6 = error ? typeof error === "string" ? error : "A property of this map has an error" : void 0;
+  let t7;
+  if ($[30] !== disabled || $[31] !== includeDescription || $[32] !== property || $[33] !== t5 || $[34] !== t6) {
+    t7 = /* @__PURE__ */ jsx(FieldHelperText, { includeDescription, showError: t5, error: t6, disabled, property });
+    $[30] = disabled;
+    $[31] = includeDescription;
+    $[32] = property;
+    $[33] = t5;
+    $[34] = t6;
+    $[35] = t7;
   } else {
-    t10 = $[43];
+    t7 = $[35];
   }
-  let t11;
-  if ($[44] !== t10 || $[45] !== t6 || $[46] !== t7) {
-    t11 = /* @__PURE__ */ jsxs(ErrorBoundary, { children: [
-      t6,
-      t7,
-      t10
+  let t8;
+  if ($[36] !== t3 || $[37] !== t4 || $[38] !== t7) {
+    t8 = /* @__PURE__ */ jsxs(ErrorBoundary, { children: [
+      t3,
+      t4,
+      t7
     ] });
-    $[44] = t10;
-    $[45] = t6;
-    $[46] = t7;
-    $[47] = t11;
+    $[36] = t3;
+    $[37] = t4;
+    $[38] = t7;
+    $[39] = t8;
   } else {
-    t11 = $[47];
+    t8 = $[39];
   }
-  return t11;
+  return t8;
 }
 function _temp$7(t0) {
   const [, property_0] = t0;
@@ -19622,7 +19628,7 @@ function getDataType(value) {
   return void 0;
 }
 function RepeatFieldBinding(t0) {
-  const $ = c(69);
+  const $ = c(70);
   let context;
   let disabled;
   let error;
@@ -19639,7 +19645,7 @@ function RepeatFieldBinding(t0) {
   let value;
   if ($[0] !== t0) {
     const {
-      propertyKey: t19,
+      propertyKey: t110,
       value: t22,
       error: t32,
       showError: t42,
@@ -19653,7 +19659,7 @@ function RepeatFieldBinding(t0) {
       context: t112,
       disabled: t122
     } = t0;
-    propertyKey = t19;
+    propertyKey = t110;
     value = t22;
     error = t32;
     showError = t42;
@@ -19784,9 +19790,10 @@ function RepeatFieldBinding(t0) {
   } else {
     t7 = $[32];
   }
-  let t8;
-  if ($[33] !== buildEntry || $[34] !== propertyKey || $[35] !== t3 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== value) {
-    t8 = /* @__PURE__ */ jsx(ArrayContainer, { droppableId: propertyKey, addLabel: t3, value, buildEntry, onInternalIdAdded: setLastAddedId, disabled: t4, includeAddButton: t5, newDefaultEntry: t6, onValueChange: t7 });
+  const t8 = property.widthPercentage !== void 0 ? "mt-8" : void 0;
+  let t9;
+  if ($[33] !== buildEntry || $[34] !== propertyKey || $[35] !== t3 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== t8 || $[41] !== value) {
+    t9 = /* @__PURE__ */ jsx(ArrayContainer, { droppableId: propertyKey, addLabel: t3, value, buildEntry, onInternalIdAdded: setLastAddedId, disabled: t4, includeAddButton: t5, newDefaultEntry: t6, onValueChange: t7, className: t8 });
     $[33] = buildEntry;
     $[34] = propertyKey;
     $[35] = t3;
@@ -19794,97 +19801,98 @@ function RepeatFieldBinding(t0) {
     $[37] = t5;
     $[38] = t6;
     $[39] = t7;
-    $[40] = value;
-    $[41] = t8;
+    $[40] = t8;
+    $[41] = value;
+    $[42] = t9;
   } else {
-    t8 = $[41];
+    t9 = $[42];
   }
-  const arrayContainer = t8;
-  let t9;
-  if ($[42] !== property) {
-    t9 = getIconForProperty(property, "small");
-    $[42] = property;
-    $[43] = t9;
+  const arrayContainer = t9;
+  let t10;
+  if ($[43] !== property) {
+    t10 = getIconForProperty(property, "small");
+    $[43] = property;
+    $[44] = t10;
   } else {
-    t9 = $[43];
+    t10 = $[44];
   }
-  const t10 = property.validation?.required;
-  let t11;
-  if ($[44] !== property.name || $[45] !== propertyKey || $[46] !== t10 || $[47] !== t9) {
-    t11 = /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: t9, required: t10, title: property.name, className: "flex flex-grow text-text-secondary dark:text-text-secondary-dark" });
-    $[44] = property.name;
-    $[45] = propertyKey;
-    $[46] = t10;
-    $[47] = t9;
+  const t11 = property.validation?.required;
+  let t12;
+  if ($[45] !== property.name || $[46] !== propertyKey || $[47] !== t10 || $[48] !== t11) {
+    t12 = /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: t10, required: t11, title: property.name, className: "h-8 flex flex-grow text-text-secondary dark:text-text-secondary-dark" });
+    $[45] = property.name;
+    $[46] = propertyKey;
+    $[47] = t10;
     $[48] = t11;
+    $[49] = t12;
   } else {
-    t11 = $[48];
+    t12 = $[49];
   }
-  let t12;
-  if ($[49] !== value) {
-    t12 = Array.isArray(value) && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "px-4", children: [
+  let t13;
+  if ($[50] !== value) {
+    t13 = Array.isArray(value) && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "px-4", children: [
       "(",
       value.length,
       ")"
     ] });
-    $[49] = value;
-    $[50] = t12;
+    $[50] = value;
+    $[51] = t13;
   } else {
-    t12 = $[50];
+    t13 = $[51];
   }
-  let t13;
-  if ($[51] !== t11 || $[52] !== t12) {
-    t13 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      t11,
-      t12
+  let t14;
+  if ($[52] !== t12 || $[53] !== t13) {
+    t14 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t12,
+      t13
     ] });
-    $[51] = t11;
     $[52] = t12;
     $[53] = t13;
+    $[54] = t14;
   } else {
-    t13 = $[53];
+    t14 = $[54];
   }
-  const title = t13;
-  let t14;
-  if ($[54] !== arrayContainer || $[55] !== expanded || $[56] !== minimalistView || $[57] !== title) {
-    t14 = !minimalistView && /* @__PURE__ */ jsx(ExpandablePanel, { initiallyExpanded: expanded, innerClassName: "px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", title, children: arrayContainer });
-    $[54] = arrayContainer;
-    $[55] = expanded;
-    $[56] = minimalistView;
-    $[57] = title;
-    $[58] = t14;
-  } else {
-    t14 = $[58];
-  }
-  const t15 = minimalistView && arrayContainer;
-  const t16 = error ? typeof error === "string" ? error : "A property of this array/repeat has an error" : void 0;
-  let t17;
-  if ($[59] !== disabled || $[60] !== includeDescription || $[61] !== property || $[62] !== showError || $[63] !== t16) {
-    t17 = /* @__PURE__ */ jsx(FieldHelperText, { includeDescription, showError, error: t16, disabled, property });
-    $[59] = disabled;
-    $[60] = includeDescription;
-    $[61] = property;
-    $[62] = showError;
-    $[63] = t16;
+  const title = t14;
+  let t15;
+  if ($[55] !== arrayContainer || $[56] !== expanded || $[57] !== minimalistView || $[58] !== title) {
+    t15 = !minimalistView && /* @__PURE__ */ jsx(ExpandablePanel, { initiallyExpanded: expanded, innerClassName: "px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", title, children: arrayContainer });
+    $[55] = arrayContainer;
+    $[56] = expanded;
+    $[57] = minimalistView;
+    $[58] = title;
+    $[59] = t15;
+  } else {
+    t15 = $[59];
+  }
+  const t16 = minimalistView && arrayContainer;
+  const t17 = error ? typeof error === "string" ? error : "A property of this array/repeat has an error" : void 0;
+  let t18;
+  if ($[60] !== disabled || $[61] !== includeDescription || $[62] !== property || $[63] !== showError || $[64] !== t17) {
+    t18 = /* @__PURE__ */ jsx(FieldHelperText, { includeDescription, showError, error: t17, disabled, property });
+    $[60] = disabled;
+    $[61] = includeDescription;
+    $[62] = property;
+    $[63] = showError;
     $[64] = t17;
+    $[65] = t18;
   } else {
-    t17 = $[64];
+    t18 = $[65];
   }
-  let t18;
-  if ($[65] !== t14 || $[66] !== t15 || $[67] !== t17) {
-    t18 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      t14,
+  let t19;
+  if ($[66] !== t15 || $[67] !== t16 || $[68] !== t18) {
+    t19 = /* @__PURE__ */ jsxs(Fragment, { children: [
       t15,
-      t17
+      t16,
+      t18
     ] });
-    $[65] = t14;
     $[66] = t15;
-    $[67] = t17;
+    $[67] = t16;
     $[68] = t18;
+    $[69] = t19;
   } else {
-    t18 = $[68];
+    t19 = $[69];
   }
-  return t18;
+  return t19;
 }
 function BlockFieldBinding({
   propertyKey,
@@ -20280,7 +20288,7 @@ function MarkdownEditorFieldBinding(t0) {
   const t12 = property.validation?.required;
   let t13;
   if ($[37] !== property.name || $[38] !== propertyKey || $[39] !== t11 || $[40] !== t12) {
-    t13 = /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: t11, required: t12, title: property.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" });
+    t13 = /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: t11, required: t12, title: property.name, className: "h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5" });
     $[37] = property.name;
     $[38] = propertyKey;
     $[39] = t11;
@@ -20393,7 +20401,7 @@ function ArrayCustomShapedFieldBinding(t0) {
   const t3 = property.validation?.required;
   let t4;
   if ($[10] !== property.name || $[11] !== propertyKey || $[12] !== t2 || $[13] !== t3) {
-    t4 = /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: t2, required: t3, title: property.name, className: "flex-grow text-text-secondary dark:text-text-secondary-dark" });
+    t4 = /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey, icon: t2, required: t3, title: property.name, className: "h-8 flex-grow text-text-secondary dark:text-text-secondary-dark" });
     $[10] = property.name;
     $[11] = propertyKey;
     $[12] = t2;
@@ -22500,16 +22508,15 @@ function FireCMSInternal(t0) {
   } else {
     childrenResult = $[4];
   }
-  const t1 = childrenResult;
-  let t2;
-  if ($[5] !== t1) {
-    t2 = /* @__PURE__ */ jsx(Fragment, { children: t1 });
-    $[5] = t1;
-    $[6] = t2;
+  let t1;
+  if ($[5] !== childrenResult) {
+    t1 = /* @__PURE__ */ jsx(Fragment, { children: childrenResult });
+    $[5] = childrenResult;
+    $[6] = t1;
   } else {
-    t2 = $[6];
+    t1 = $[6];
   }
-  return t2;
+  return t1;
 }
 function DrawerNavigationItem(t0) {
   const $ = c(24);