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

package/dist/index.umd.js

@@ -617,7 +617,7 @@
     return t6;
   }
   const LabelWithIcon = React.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(8);
+    const $ = reactCompilerRuntime.c(11);
     const {
       icon,
       title,
@@ -625,33 +625,42 @@
       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__ */ jsxRuntime.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 = ui.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__ */ jsxRuntime.jsxs("div", { ref, className: t1, children: [
+    if ($[3] !== t3 || $[4] !== t4) {
+      t5 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -671,7 +680,7 @@
     }
     let t2;
     if ($[2] !== children || $[3] !== className || $[4] !== t1) {
-      t2 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: t1, delayDuration: 800, side: "top", asChild: false, align: "start", sideOffset: 8, className, children });
+      t2 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: t1, delayDuration: 800, side: "top", align: "start", sideOffset: 8, className, children });
       $[2] = children;
       $[3] = className;
       $[4] = t1;
@@ -3378,6 +3387,7 @@
       });
       if (modifiedCollection) resultCollection = modifiedCollection;
     }
+    resultCollection["merged"] = true;
     return resultCollection;
   }
   function mergePropertyOrBuilder(target, source) {
@@ -8037,15 +8047,26 @@
     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 $ = reactCompilerRuntime.c(3);
     const timeoutRef = React.useRef(null);
-    const debouncedCallback = React.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 = React.createContext({});
@@ -9608,16 +9629,16 @@
         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) {
@@ -9684,24 +9705,23 @@
       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);
@@ -11044,7 +11064,7 @@
     return e_0.item.url;
   }
   function EntityCollectionViewActions(t0) {
-    const $ = reactCompilerRuntime.c(39);
+    const $ = reactCompilerRuntime.c(41);
     const {
       collection,
       relativePath,
@@ -11117,16 +11137,16 @@
       }
       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__ */ jsxRuntime.jsx(ui.Tooltip, { title: t52, children: button });
+        t62 = /* @__PURE__ */ jsxRuntime.jsx(ui.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) {
@@ -11179,20 +11199,28 @@
       actions = $[32];
     }
     let t5;
-    if ($[35] !== actions || $[36] !== addButton || $[37] !== multipleDeleteButton) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        actions,
+    if ($[35] !== actions) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: actions });
+      $[35] = actions;
+      $[36] = t5;
+    } else {
+      t5 = $[36];
+    }
+    let t6;
+    if ($[37] !== addButton || $[38] !== multipleDeleteButton || $[39] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.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,
@@ -11533,7 +11561,7 @@
     } = t0;
     let t1;
     if ($[0] !== className) {
-      t1 = ui.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 = ui.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 {
@@ -11599,7 +11627,6 @@
     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] = React.useState(false);
     const [valuesToBeSaved, setValuesToBeSaved] = React.useState(void 0);
     useDebouncedCallback(valuesToBeSaved, () => {
@@ -11662,19 +11689,19 @@
     const autoSave = collection.formAutoSave && !collection.customId;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
     const [usedEntity, setUsedEntity] = React.useState(entity);
-    const [readOnly, setReadOnly] = React.useState(void 0);
     const baseDataSourceValuesRef = React.useRef(cachedDirtyValues ?? getDataSourceEntityValues(initialResolvedCollection, status, usedEntity));
     React.useEffect(() => {
       if (entity) setUsedEntity(entity);
     }, [entity]);
-    React.useEffect(() => {
-      if (status === "new") {
-        setReadOnly(false);
+    const canEdit = React.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 = React.useCallback((e) => {
       setSaving(false);
       snackbarController.open({
@@ -11866,7 +11893,8 @@
     };
     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;
@@ -11874,7 +11902,7 @@
         console.error("customView.Builder is not defined");
         return null;
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { className: selectedTab !== customView.key ? "hidden" : "", formex: formex$1, children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, entity: usedEntity, modifiedValues: formex$1.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView.key}`);
+      return /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { className: selectedTab !== customView.key ? "hidden" : "", formex: formex$1, children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, entity: usedEntity, modifiedValues: formex$1.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;
@@ -11883,16 +11911,16 @@
         console.error("customView.Builder is not defined");
         return null;
       }
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.defaultBorderMixin, "relative flex-grow w-full h-full overflow-auto", {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.defaultBorderMixin, "relative flex-1 w-full h-full overflow-auto", {
         "hidden": selectedTab !== customView_0.key
-      }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsxRuntime.jsx(Builder_0, { collection, entity: usedEntity, modifiedValues: formex$1.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView_0.key}`);
+      }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(Builder_0, { collection, entity: usedEntity, modifiedValues: formex$1.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__ */ jsxRuntime.jsxs("div", { className: "relative flex-grow h-full overflow-auto w-full", role: "tabpanel", children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 h-full overflow-auto w-full", role: "tabpanel", children: [
         globalLoading || saving && /* @__PURE__ */ jsxRuntime.jsx(CircularProgressCenter, {}),
         !globalLoading && (usedEntity && fullPath ? /* @__PURE__ */ jsxRuntime.jsx(EntityCollectionView, { fullPath, parentCollectionIds: [...parentCollectionIds, collection.id], isSubCollection: true, updateUrl: false, ...subcollection, openEntityMode: layout }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-full h-full p-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "You need to save your entity before adding additional collections" }) }))
       ] }, `subcol_${subcollectionId}`);
@@ -12007,15 +12035,18 @@
         });
       }
     }, [formex$1.isSubmitting, autoSave, underlyingChanges, entity, formex$1.values, formex$1.touched, formex$1.setFieldValue]);
-    const formFields = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.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$1.touched[key_1];
+        const underlyingValueHasChanged = !!underlyingChanges && Object.keys(underlyingChanges).includes(key_2) && formex$1.touched[key_2];
         const disabled = !autoSave && formex$1.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,
@@ -12025,24 +12056,26 @@
           minimalistView: false,
           autoFocus: false
         };
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { id: `form_field_${key_1}`, children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) }) }, `field_${resolvedCollection.name}_${key_1}`);
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { id: `form_field_${key_2}`, className: "relative", style: {
+          width: widthPercentage === 100 ? "100%" : `calc(${widthPercentage}% - 8px)`
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Builder_1, { entity, context }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: additionalField.value?.({
+        const child = Builder_1 ? /* @__PURE__ */ jsxRuntime.jsx(Builder_1, { entity, context }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: additionalField.value?.({
           entity,
           context
         })?.toString() });
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey: key_1, icon: /* @__PURE__ */ jsxRuntime.jsx(ui.NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: child }) })
-        ] }, `additional_${key_1}`);
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey: key_2, icon: /* @__PURE__ */ jsxRuntime.jsx(ui.NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ jsxRuntime.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$1.isSubmitting || !modified && status === "existing";
@@ -12084,7 +12117,7 @@
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full py-2 flex flex-col items-start mt-4 lg:mt-8 mb-8", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0", variant: "h4", children: title ?? inputCollection.singularName ?? inputCollection.name }),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Alert, { color: "base", className: "w-full", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "text-xs select-all text-text-secondary dark:text-text-secondary-dark", children: [
-          path,
+          entity?.path ?? path,
           "/",
           entityId
         ] }) })
@@ -12095,9 +12128,9 @@
         /* @__PURE__ */ jsxRuntime.jsx(ErrorFocus, { containerRef: formRef })
       ] }) }),
       actionsAtTheBottom && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-16" })
-    ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { className: "mt-16 mb-8 mx-8", variant: "h4", children: collection.singularName ?? collection.name }),
-      /* @__PURE__ */ jsxRuntime.jsx(EntityView, { className: "px-12", entity: usedEntity, path, collection })
+      /* @__PURE__ */ jsxRuntime.jsx(EntityView, { className: "px-8", entity: usedEntity, path, collection })
     ] });
     const subcollectionTabs = subcollections && subcollections.map((subcollection_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.Tab, { className: "text-sm min-w-[120px]", value: view.key, children: view.name }, `entity_detail_collection_tab_${view.name}`));
@@ -12105,6 +12138,7 @@
       if (entityId && onIdChange) onIdChange(entityId);
     }, [entityId, onIdChange]);
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
+    const shouldIncludeForm = selectedTab === MAIN_TAB_VALUE || selectedEntityView?.includeActions;
     let result = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-900", children: [
       shouldShowTopBar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.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", ui.defaultBorderMixin), children: [
         barActions,
@@ -12124,7 +12158,7 @@
           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: ui.cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", shouldIncludeForm ? "" : "hidden"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(FormLayout, { className: !mainViewVisible ? "hidden" : "", id: `form_${path}`, formex: formex$1, children: globalLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full pt-12 pb-16 px-4 sm:px-8 md:px-10", children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgressCenter, {}) }) : entityView }),
         secondaryForms,
         shouldShowEntityActions && dialogActions
@@ -12183,6 +12217,7 @@
     pluginActions,
     layout
   }) {
+    const canClose = layout === "side_panel";
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { position: "absolute", children: [
       savingError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message }) }),
       entity && formActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow flex overflow-auto no-scrollbar", children: formActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "primary", onClick: (event) => {
@@ -12198,14 +12233,14 @@
       }, children: action.icon }, action.name)) }),
       pluginActions,
       /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", disabled: disabled || isSubmitting, type: "reset", children: status === "existing" ? "Discard" : "Clear" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", color: "primary", type: "submit", disabled: disabled || isSubmitting, onClick: () => {
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.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__ */ jsxRuntime.jsxs(ui.LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled, onClick: () => {
+      canClose && /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled, onClick: () => {
         setPendingClose?.(true);
       }, children: [
         status === "existing" && "Save and close",
@@ -12227,7 +12262,7 @@
     setPendingClose,
     pluginActions
   }) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("overflow-auto h-full flex flex-col gap-2 w-80 xl:w-96 px-4 py-16 sticky top-0 border-l", ui.defaultBorderMixin), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", ui.defaultBorderMixin), children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { fullWidth: true, variant: "filled", color: "primary", type: "submit", size: "large", disabled: disabled || isSubmitting, onClick: () => {
         setPendingClose?.(false);
       }, children: [
@@ -14069,7 +14104,7 @@
     ] });
   }
   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 (!ui.iconKeys.includes(icon)) {
         console.warn(`The icon ${icon} no longer exists. Remove it from \`iconSynonyms\``);
@@ -14287,9 +14322,8 @@
       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];
@@ -16421,7 +16455,7 @@
     return t3;
   }
   function MapPropertyPreview(t0) {
-    const $ = reactCompilerRuntime.c(12);
+    const $ = reactCompilerRuntime.c(15);
     const {
       value,
       property,
@@ -16446,53 +16480,50 @@
       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__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col space-y-1 md:space-y-2", children: mapPropertyKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.defaultBorderMixin, "last:border-b-0 border-b"), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "font-mono break-words", color: "secondary", children: childProperty.name }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow max-w-[75%]", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: !(childProperty.dataType === "map" || childProperty === "array") && /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: key_0, value: value[key_0], property: childProperty, size }) }) })
-            ] }),
-            (childProperty.dataType === "map" || childProperty === "array") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.defaultBorderMixin, "border-l pl-4 ml-2 my-2"), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col space-y-1 md:space-y-2", children: mapPropertyKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: ui.cls(ui.defaultBorderMixin, "last:border-b-0 border-b"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "font-mono break-words", color: "secondary", children: childProperty.name }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow max-w-[75%]", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: !(childProperty.dataType === "map" || childProperty === "array") && /* @__PURE__ */ jsxRuntime.jsx(PropertyPreview, { propertyKey: key_0, value: value[key_0], property: childProperty, size }) }) })
+          ] }),
+          (childProperty.dataType === "map" || childProperty === "array") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls(ui.defaultBorderMixin, "border-l pl-4 ml-2 my-2"), children: /* @__PURE__ */ jsxRuntime.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 $ = reactCompilerRuntime.c(5);
@@ -17129,7 +17160,7 @@
     const t10 = property.validation?.required;
     let t11;
     if ($[13] !== property.name || $[14] !== t10 || $[15] !== t9) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsx(LabelWithIcon, { icon: t9, required: t10, title: property.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" });
+      t11 = /* @__PURE__ */ jsxRuntime.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;
@@ -17260,7 +17291,7 @@
       ] }, enumKey);
     }, [enumValues, setValue, value]);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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)) : [];
@@ -17330,7 +17361,7 @@
       return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "px-4", children: [
         "(",
         value.length,
@@ -17529,7 +17560,7 @@
     const resolvedProperty = t6;
     let t7;
     if ($[19] !== minimalistView || $[20] !== property || $[21] !== propertyKey) {
-      t7 = !minimalistView && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
@@ -17891,7 +17922,7 @@
     } }) });
   }
   function TextFieldBinding(t0) {
-    const $ = reactCompilerRuntime.c(51);
+    const $ = reactCompilerRuntime.c(52);
     const {
       propertyKey,
       value,
@@ -17972,26 +18003,26 @@
       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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.IconButton, { onClick: handleClearClick, children: /* @__PURE__ */ jsxRuntime.jsx(ui.CloseIcon, {}) });
@@ -18004,73 +18035,74 @@
     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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.Collapse, { className: "mt-1 ml-1", in: Boolean(value), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.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 $ = reactCompilerRuntime.c(32);
+    const $ = reactCompilerRuntime.c(33);
     const {
       propertyKey,
       value,
@@ -18107,73 +18139,75 @@
     } 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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(PropertyIdCopyTooltip, { propertyKey, children: t7 });
-      $[20] = propertyKey;
-      $[21] = t7;
+    let t9;
+    if ($[21] !== propertyKey || $[22] !== t8) {
+      t9 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        t8,
-        t9
+    let t11;
+    if ($[30] !== t10 || $[31] !== t9) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.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 $ = reactCompilerRuntime.c(33);
@@ -18303,7 +18337,7 @@
     }
     let t1;
     if ($[0] !== minimalistView || $[1] !== property || $[2] !== propertyKey) {
-      t1 = !minimalistView && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
@@ -18313,7 +18347,7 @@
     }
     let t2;
     if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-      t2 = ui.cls(ui.paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar");
+      t2 = ui.cls(ui.paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar");
       $[4] = t2;
     } else {
       t2 = $[4];
@@ -18425,7 +18459,7 @@
       referenceDialogController.open();
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      !minimalistView && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ErrorView, { error: "The specified collection does not exist. Check console" }),
       collection && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         value && /* @__PURE__ */ jsxRuntime.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 }),
@@ -18527,7 +18561,7 @@
         if (!Component) {
           console.warn(`No field component found for property ${propertyKey}`);
           console.warn("Property:", property);
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { children: `Currently the field ${resolvedProperty.dataType} is not supported` });
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: `Currently the field ${resolvedProperty.dataType} is not supported` });
         }
         const componentProps = {
           propertyKey,
@@ -18691,7 +18725,7 @@
     return wrapperRef.current;
   }
   function MapFieldBinding(t0) {
-    const $ = reactCompilerRuntime.c(48);
+    const $ = reactCompilerRuntime.c(40);
     const {
       propertyKey,
       value,
@@ -18717,15 +18751,7 @@
       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;
@@ -18735,11 +18761,11 @@
         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;
       }
@@ -18747,9 +18773,9 @@
       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);
@@ -18773,106 +18799,86 @@
           };
           return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.ExpandablePanel, { initiallyExpanded: expanded, onExpandedChange: (expanded_0) => {
+    if ($[23] !== expanded || $[24] !== mapFormView || $[25] !== minimalistView || $[26] !== onPropertyChange || $[27] !== property || $[28] !== propertyKey) {
+      t3 = !minimalistView && /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ErrorBoundary, { children: [
-        t6,
-        t7,
-        t10
+    let t8;
+    if ($[36] !== t3 || $[37] !== t4 || $[38] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.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;
@@ -19624,7 +19630,7 @@
     return void 0;
   }
   function RepeatFieldBinding(t0) {
-    const $ = reactCompilerRuntime.c(69);
+    const $ = reactCompilerRuntime.c(70);
     let context;
     let disabled;
     let error;
@@ -19641,7 +19647,7 @@
     let value;
     if ($[0] !== t0) {
       const {
-        propertyKey: t19,
+        propertyKey: t110,
         value: t22,
         error: t32,
         showError: t42,
@@ -19655,7 +19661,7 @@
         context: t112,
         disabled: t122
       } = t0;
-      propertyKey = t19;
+      propertyKey = t110;
       value = t22;
       error = t32;
       showError = t42;
@@ -19786,9 +19792,10 @@
     } else {
       t7 = $[32];
     }
-    let t8;
-    if ($[33] !== buildEntry || $[34] !== propertyKey || $[35] !== t3 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== value) {
-      t8 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
@@ -19796,97 +19803,98 @@
       $[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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "px-4", children: [
+    let t13;
+    if ($[50] !== value) {
+      t13 = Array.isArray(value) && /* @__PURE__ */ jsxRuntime.jsxs(ui.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        t11,
-        t12
+    let t14;
+    if ($[52] !== t12 || $[53] !== t13) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        t14,
+    let t19;
+    if ($[66] !== t15 || $[67] !== t16 || $[68] !== t18) {
+      t19 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.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,
@@ -20282,7 +20290,7 @@
     const t12 = property.validation?.required;
     let t13;
     if ($[37] !== property.name || $[38] !== propertyKey || $[39] !== t11 || $[40] !== t12) {
-      t13 = /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: t11, required: t12, title: property.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" });
+      t13 = /* @__PURE__ */ jsxRuntime.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;
@@ -20395,7 +20403,7 @@
     const t3 = property.validation?.required;
     let t4;
     if ($[10] !== property.name || $[11] !== propertyKey || $[12] !== t2 || $[13] !== t3) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsx(LabelWithIconAndTooltip, { propertyKey, icon: t2, required: t3, title: property.name, className: "flex-grow text-text-secondary dark:text-text-secondary-dark" });
+      t4 = /* @__PURE__ */ jsxRuntime.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;
@@ -22502,16 +22510,15 @@
     } else {
       childrenResult = $[4];
     }
-    const t1 = childrenResult;
-    let t2;
-    if ($[5] !== t1) {
-      t2 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: t1 });
-      $[5] = t1;
-      $[6] = t2;
+    let t1;
+    if ($[5] !== childrenResult) {
+      t1 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: childrenResult });
+      $[5] = childrenResult;
+      $[6] = t1;
     } else {
-      t2 = $[6];
+      t1 = $[6];
     }
-    return t2;
+    return t1;
   }
   function DrawerNavigationItem(t0) {
     const $ = reactCompilerRuntime.c(24);