@firecms/collection_editor 3.0.0-rc.2 → 3.0.0-rc.3

package/dist/index.es.js

@@ -165,7 +165,7 @@ function LayoutModeSwitch(t0) {
   return t18;
 }
 function CollectionDetailsForm(t0) {
-  const $ = c(192);
+  const $ = c(202);
   const {
     isNewCollection,
     reservedGroups,
@@ -756,242 +756,282 @@ function CollectionDetailsForm(t0) {
   } else {
     t84 = $[131];
   }
-  const t85 = customIdValue === "code_defined";
+  const t85 = values.inlineEditing === void 0 || values.inlineEditing ? "Data can be edited directly in the table view" : "Data can be edited only  in the form view";
   let t86;
   if ($[132] !== setFieldValue) {
-    t86 = (v_1) => {
-      if (v_1 === "code_defined") {
-        throw new Error("This should not happen");
-      }
-      setFieldValue("customId", v_1);
-    };
+    t86 = (v_1) => setFieldValue("inlineEditing", v_1);
     $[132] = setFieldValue;
     $[133] = t86;
   } else {
     t86 = $[133];
   }
-  const t87 = customIdValue ?? "";
+  const t87 = values.inlineEditing === void 0 ? true : values.inlineEditing;
   let t88;
+  if ($[134] !== t85 || $[135] !== t86 || $[136] !== t87) {
+    t88 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: t85, onValueChange: t86, value: t87 });
+    $[134] = t85;
+    $[135] = t86;
+    $[136] = t87;
+    $[137] = t88;
+  } else {
+    t88 = $[137];
+  }
   let t89;
+  if ($[138] === Symbol.for("react.memo_cache_sentinel")) {
+    t89 = /* @__PURE__ */ jsx(FieldCaption, { children: "Allow editing data directly in the table view, without opening the form view." });
+    $[138] = t89;
+  } else {
+    t89 = $[138];
+  }
   let t90;
-  if ($[134] === Symbol.for("react.memo_cache_sentinel")) {
-    t88 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
-    t89 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
-    t90 = /* @__PURE__ */ jsx(SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
-    $[134] = t88;
-    $[135] = t89;
-    $[136] = t90;
-  } else {
-    t88 = $[134];
-    t89 = $[135];
-    t90 = $[136];
-  }
-  let t91;
-  if ($[137] !== t85 || $[138] !== t86 || $[139] !== t87) {
-    t91 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t85, onValueChange: t86, value: t87, renderValue: _temp3$5, children: [
+  if ($[139] !== t88) {
+    t90 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
       t88,
-      t89,
-      t90
-    ] }) });
-    $[137] = t85;
-    $[138] = t86;
-    $[139] = t87;
-    $[140] = t91;
+      t89
+    ] });
+    $[139] = t88;
+    $[140] = t90;
   } else {
-    t91 = $[140];
+    t90 = $[140];
   }
+  const t91 = customIdValue === "code_defined";
   let t92;
   if ($[141] !== setFieldValue) {
-    t92 = (v_2) => setFieldValue("collectionGroup", v_2);
+    t92 = (v_2) => {
+      if (v_2 === "code_defined") {
+        throw new Error("This should not happen");
+      }
+      setFieldValue("customId", v_2);
+    };
     $[141] = setFieldValue;
     $[142] = t92;
   } else {
     t92 = $[142];
   }
-  const t93 = values.collectionGroup ?? false;
+  const t93 = customIdValue ?? "";
   let t94;
-  if ($[143] !== t92 || $[144] !== t93) {
-    t94 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t92, value: t93 });
-    $[143] = t92;
-    $[144] = t93;
-    $[145] = t94;
-  } else {
-    t94 = $[145];
-  }
   let t95;
-  if ($[146] === Symbol.for("react.memo_cache_sentinel")) {
-    t95 = /* @__PURE__ */ jsx(FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
-    $[146] = t95;
-  } else {
-    t95 = $[146];
-  }
   let t96;
-  if ($[147] !== t94) {
-    t96 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-4", children: [
+  if ($[143] === Symbol.for("react.memo_cache_sentinel")) {
+    t94 = /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "Document ID is generated automatically" });
+    t95 = /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "Users must define an ID" });
+    t96 = /* @__PURE__ */ jsx(SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
+    $[143] = t94;
+    $[144] = t95;
+    $[145] = t96;
+  } else {
+    t94 = $[143];
+    t95 = $[144];
+    t96 = $[145];
+  }
+  let t97;
+  if ($[146] !== t91 || $[147] !== t92 || $[148] !== t93) {
+    t97 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t91, onValueChange: t92, value: t93, renderValue: _temp3$5, children: [
       t94,
-      t95
-    ] });
-    $[147] = t94;
-    $[148] = t96;
+      t95,
+      t96
+    ] }) });
+    $[146] = t91;
+    $[147] = t92;
+    $[148] = t93;
+    $[149] = t97;
   } else {
-    t96 = $[148];
+    t97 = $[149];
   }
-  let t97;
-  if ($[149] !== setFieldValue) {
-    t97 = (v_3) => setFieldValue("textSearchEnabled", v_3);
-    $[149] = setFieldValue;
-    $[150] = t97;
-  } else {
-    t97 = $[150];
-  }
-  const t98 = values.textSearchEnabled ?? false;
-  let t99;
-  if ($[151] !== t97 || $[152] !== t98) {
-    t99 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t97, value: t98 });
-    $[151] = t97;
-    $[152] = t98;
-    $[153] = t99;
+  let t98;
+  if ($[150] !== setFieldValue) {
+    t98 = (v_3) => setFieldValue("collectionGroup", v_3);
+    $[150] = setFieldValue;
+    $[151] = t98;
   } else {
-    t99 = $[153];
+    t98 = $[151];
   }
+  const t99 = values.collectionGroup ?? false;
   let t100;
-  if ($[154] === Symbol.for("react.memo_cache_sentinel")) {
-    t100 = /* @__PURE__ */ jsx(FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+  if ($[152] !== t98 || $[153] !== t99) {
+    t100 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Collection group", onValueChange: t98, value: t99 });
+    $[152] = t98;
+    $[153] = t99;
     $[154] = t100;
   } else {
     t100 = $[154];
   }
   let t101;
-  if ($[155] !== t99) {
-    t101 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-      t99,
-      t100
-    ] });
-    $[155] = t99;
-    $[156] = t101;
+  if ($[155] === Symbol.for("react.memo_cache_sentinel")) {
+    t101 = /* @__PURE__ */ jsx(FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
+    $[155] = t101;
   } else {
-    t101 = $[156];
+    t101 = $[155];
   }
   let t102;
-  if ($[157] !== t101 || $[158] !== t48 || $[159] !== t56 || $[160] !== t68 || $[161] !== t75 || $[162] !== t78 || $[163] !== t84 || $[164] !== t91 || $[165] !== t96) {
-    t102 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
+  if ($[156] !== t100) {
+    t102 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-4", children: [
+      t100,
+      t101
+    ] });
+    $[156] = t100;
+    $[157] = t102;
+  } else {
+    t102 = $[157];
+  }
+  let t103;
+  if ($[158] !== setFieldValue) {
+    t103 = (v_4) => setFieldValue("textSearchEnabled", v_4);
+    $[158] = setFieldValue;
+    $[159] = t103;
+  } else {
+    t103 = $[159];
+  }
+  const t104 = values.textSearchEnabled ?? false;
+  let t105;
+  if ($[160] !== t103 || $[161] !== t104) {
+    t105 = /* @__PURE__ */ jsx(BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t103, value: t104 });
+    $[160] = t103;
+    $[161] = t104;
+    $[162] = t105;
+  } else {
+    t105 = $[162];
+  }
+  let t106;
+  if ($[163] === Symbol.for("react.memo_cache_sentinel")) {
+    t106 = /* @__PURE__ */ jsx(FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+    $[163] = t106;
+  } else {
+    t106 = $[163];
+  }
+  let t107;
+  if ($[164] !== t105) {
+    t107 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+      t105,
+      t106
+    ] });
+    $[164] = t105;
+    $[165] = t107;
+  } else {
+    t107 = $[165];
+  }
+  let t108;
+  if ($[166] !== t102 || $[167] !== t107 || $[168] !== t48 || $[169] !== t56 || $[170] !== t68 || $[171] !== t75 || $[172] !== t78 || $[173] !== t84 || $[174] !== t90 || $[175] !== t97) {
+    t108 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
       t48,
       t56,
       t68,
       t75,
       t78,
       t84,
-      t91,
-      t96,
-      t101
+      t90,
+      t97,
+      t102,
+      t107
     ] });
-    $[157] = t101;
-    $[158] = t48;
-    $[159] = t56;
-    $[160] = t68;
-    $[161] = t75;
-    $[162] = t78;
-    $[163] = t84;
-    $[164] = t91;
-    $[165] = t96;
     $[166] = t102;
+    $[167] = t107;
+    $[168] = t48;
+    $[169] = t56;
+    $[170] = t68;
+    $[171] = t75;
+    $[172] = t78;
+    $[173] = t84;
+    $[174] = t90;
+    $[175] = t97;
+    $[176] = t108;
+  } else {
+    t108 = $[176];
+  }
+  let t109;
+  if ($[177] !== advancedPanelExpanded || $[178] !== t108) {
+    t109 = /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t41, initiallyExpanded: false, children: t108 });
+    $[177] = advancedPanelExpanded;
+    $[178] = t108;
+    $[179] = t109;
   } else {
-    t102 = $[166];
+    t109 = $[179];
   }
-  let t103;
-  if ($[167] !== advancedPanelExpanded || $[168] !== t102) {
-    t103 = /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t41, initiallyExpanded: false, children: t102 });
-    $[167] = advancedPanelExpanded;
-    $[168] = t102;
-    $[169] = t103;
-  } else {
-    t103 = $[169];
-  }
-  let t104;
-  if ($[170] !== children || $[171] !== t103) {
-    t104 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-8", children: [
-      t103,
+  let t110;
+  if ($[180] !== children || $[181] !== t109) {
+    t110 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-8", children: [
+      t109,
       children
     ] });
-    $[170] = children;
-    $[171] = t103;
-    $[172] = t104;
+    $[180] = children;
+    $[181] = t109;
+    $[182] = t110;
   } else {
-    t104 = $[172];
+    t110 = $[182];
   }
-  let t105;
-  if ($[173] !== t104 || $[174] !== t23 || $[175] !== t31 || $[176] !== t34 || $[177] !== t40) {
-    t105 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4", children: [
+  let t111;
+  if ($[183] !== t110 || $[184] !== t23 || $[185] !== t31 || $[186] !== t34 || $[187] !== t40) {
+    t111 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-4", children: [
       t23,
       t31,
       t34,
       t40,
-      t104
+      t110
     ] });
-    $[173] = t104;
-    $[174] = t23;
-    $[175] = t31;
-    $[176] = t34;
-    $[177] = t40;
-    $[178] = t105;
+    $[183] = t110;
+    $[184] = t23;
+    $[185] = t31;
+    $[186] = t34;
+    $[187] = t40;
+    $[188] = t111;
   } else {
-    t105 = $[178];
+    t111 = $[188];
   }
-  let t106;
-  if ($[179] === Symbol.for("react.memo_cache_sentinel")) {
-    t106 = /* @__PURE__ */ jsx("div", { style: {
+  let t112;
+  if ($[189] === Symbol.for("react.memo_cache_sentinel")) {
+    t112 = /* @__PURE__ */ jsx("div", { style: {
       height: "52px"
     } });
-    $[179] = t106;
+    $[189] = t112;
   } else {
-    t106 = $[179];
+    t112 = $[189];
   }
-  const t107 = typeof values.icon === "string" ? values.icon : void 0;
-  let t108;
-  if ($[180] !== setFieldValue) {
-    t108 = (icon) => {
+  const t113 = typeof values.icon === "string" ? values.icon : void 0;
+  let t114;
+  if ($[190] !== setFieldValue) {
+    t114 = (icon) => {
       setIconDialogOpen(false);
       setFieldValue("icon", icon);
     };
-    $[180] = setFieldValue;
-    $[181] = t108;
+    $[190] = setFieldValue;
+    $[191] = t114;
   } else {
-    t108 = $[181];
+    t114 = $[191];
   }
-  let t109;
-  if ($[182] !== t107 || $[183] !== t108) {
-    t109 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: t107, onIconSelected: t108 }) });
-    $[182] = t107;
-    $[183] = t108;
-    $[184] = t109;
+  let t115;
+  if ($[192] !== t113 || $[193] !== t114) {
+    t115 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: t113, onIconSelected: t114 }) });
+    $[192] = t113;
+    $[193] = t114;
+    $[194] = t115;
   } else {
-    t109 = $[184];
+    t115 = $[194];
   }
-  let t110;
-  if ($[185] !== iconDialogOpen || $[186] !== t109) {
-    t110 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t109 });
-    $[185] = iconDialogOpen;
-    $[186] = t109;
-    $[187] = t110;
+  let t116;
+  if ($[195] !== iconDialogOpen || $[196] !== t115) {
+    t116 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t115 });
+    $[195] = iconDialogOpen;
+    $[196] = t115;
+    $[197] = t116;
   } else {
-    t110 = $[187];
+    t116 = $[197];
   }
-  let t111;
-  if ($[188] !== t105 || $[189] !== t110 || $[190] !== t15) {
-    t111 = /* @__PURE__ */ jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxs(Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
+  let t117;
+  if ($[198] !== t111 || $[199] !== t116 || $[200] !== t15) {
+    t117 = /* @__PURE__ */ jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxs(Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
       t15,
-      t105,
-      t106,
-      t110
+      t111,
+      t112,
+      t116
     ] }) });
-    $[188] = t105;
-    $[189] = t110;
-    $[190] = t15;
-    $[191] = t111;
+    $[198] = t111;
+    $[199] = t116;
+    $[200] = t15;
+    $[201] = t117;
   } else {
-    t111 = $[191];
+    t117 = $[201];
   }
-  return t111;
+  return t117;
 }
 function _temp3$5(value_3) {
   if (value_3 === "code_defined") {
@@ -1953,7 +1993,7 @@ function ValidationPanel(t0) {
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
       /* @__PURE__ */ jsx(RuleIcon, {}),
-      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "ml-2", children: "Validation" })
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "ml-4", children: "Validation" })
     ] });
     $[0] = t1;
   } else {
@@ -2025,7 +2065,7 @@ const fileTypes = {
   "text/*": "Text files"
 };
 function StoragePropertyField(t0) {
-  const $ = c(108);
+  const $ = c(180);
   const {
     multiple,
     existing,
@@ -2041,6 +2081,12 @@ function StoragePropertyField(t0) {
   const maxSize = `${baseStoragePath}.maxSize`;
   const storagePath = `${baseStoragePath}.storagePath`;
   const storeUrl = `${baseStoragePath}.storeUrl`;
+  const imageResize = `${baseStoragePath}.imageResize`;
+  const imageResizeMaxWidth = `${imageResize}.maxWidth`;
+  const imageResizeMaxHeight = `${imageResize}.maxHeight`;
+  const imageResizeMode = `${imageResize}.mode`;
+  const imageResizeFormat = `${imageResize}.format`;
+  const imageResizeQuality = `${imageResize}.quality`;
   let t1;
   if ($[0] !== fileName || $[1] !== values) {
     t1 = getIn(values, fileName) ?? "{rand}_{file}";
@@ -2068,6 +2114,13 @@ function StoragePropertyField(t0) {
   let t12;
   let t13;
   let t14;
+  let t15;
+  let t16;
+  let t17;
+  let t18;
+  let t19;
+  let t20;
+  let t21;
   let t3;
   let t4;
   let t5;
@@ -2075,63 +2128,86 @@ function StoragePropertyField(t0) {
   let t7;
   let t8;
   let t9;
-  if ($[6] !== acceptedFiles || $[7] !== disabled || $[8] !== existing || $[9] !== fileName || $[10] !== fileNameValue || $[11] !== maxSize || $[12] !== setFieldValue || $[13] !== storagePath || $[14] !== storagePathValue || $[15] !== storeUrl || $[16] !== values) {
+  if ($[6] !== acceptedFiles || $[7] !== disabled || $[8] !== existing || $[9] !== fileName || $[10] !== fileNameValue || $[11] !== imageResizeFormat || $[12] !== imageResizeMaxHeight || $[13] !== imageResizeMaxWidth || $[14] !== imageResizeMode || $[15] !== imageResizeQuality || $[16] !== maxSize || $[17] !== setFieldValue || $[18] !== storagePath || $[19] !== storagePathValue || $[20] !== storeUrl || $[21] !== values) {
     const maxSizeValue = getIn(values, maxSize);
-    let t152;
-    if ($[31] !== acceptedFiles || $[32] !== values) {
-      t152 = getIn(values, acceptedFiles);
-      $[31] = acceptedFiles;
-      $[32] = values;
-      $[33] = t152;
+    const imageResizeMaxWidthValue = getIn(values, imageResizeMaxWidth);
+    const imageResizeMaxHeightValue = getIn(values, imageResizeMaxHeight);
+    let t222;
+    if ($[43] !== imageResizeMode || $[44] !== values) {
+      t222 = getIn(values, imageResizeMode) ?? "cover";
+      $[43] = imageResizeMode;
+      $[44] = values;
+      $[45] = t222;
+    } else {
+      t222 = $[45];
+    }
+    const imageResizeModeValue = t222;
+    let t232;
+    if ($[46] !== imageResizeFormat || $[47] !== values) {
+      t232 = getIn(values, imageResizeFormat) ?? "original";
+      $[46] = imageResizeFormat;
+      $[47] = values;
+      $[48] = t232;
+    } else {
+      t232 = $[48];
+    }
+    const imageResizeFormatValue = t232;
+    const imageResizeQualityValue = getIn(values, imageResizeQuality);
+    let t242;
+    if ($[49] !== acceptedFiles || $[50] !== values) {
+      t242 = getIn(values, acceptedFiles);
+      $[49] = acceptedFiles;
+      $[50] = values;
+      $[51] = t242;
     } else {
-      t152 = $[33];
+      t242 = $[51];
     }
-    const storedValue = t152;
+    const storedValue = t242;
     const fileTypesValue = Array.isArray(storedValue) ? storedValue : void 0;
     const allFileTypesSelected = !fileTypesValue || fileTypesValue.length === 0;
-    let t162;
-    if ($[34] !== acceptedFiles || $[35] !== setFieldValue) {
-      t162 = (value) => {
+    let t252;
+    if ($[52] !== acceptedFiles || $[53] !== setFieldValue) {
+      t252 = (value) => {
         if (!value) {
           setFieldValue(acceptedFiles, void 0);
         } else {
           setFieldValue(acceptedFiles, value);
         }
       };
-      $[34] = acceptedFiles;
-      $[35] = setFieldValue;
-      $[36] = t162;
+      $[52] = acceptedFiles;
+      $[53] = setFieldValue;
+      $[54] = t252;
     } else {
-      t162 = $[36];
+      t252 = $[54];
     }
-    const handleTypesChange = t162;
+    const handleTypesChange = t252;
     const hasFilenameCallback = typeof fileNameValue === "function";
     const hasStoragePathCallback = typeof storagePathValue === "function";
-    t14 = "col-span-12";
+    t21 = "col-span-12";
     T1 = ExpandablePanel;
-    if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
-      t13 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
+    if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
+      t20 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
         /* @__PURE__ */ jsx(CloudUploadIcon, {}),
-        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "ml-2", children: "File upload config" })
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "ml-4", children: "File upload config" })
       ] });
-      $[37] = t13;
+      $[55] = t20;
     } else {
-      t13 = $[37];
+      t20 = $[55];
     }
-    t9 = "grid grid-cols-12 gap-2 p-4";
-    let t172;
-    if ($[38] !== fileTypesValue) {
-      t172 = fileTypesValue ?? [];
-      $[38] = fileTypesValue;
-      $[39] = t172;
+    t10 = "grid grid-cols-12 gap-2 p-4";
+    let t262;
+    if ($[56] !== fileTypesValue) {
+      t262 = fileTypesValue ?? [];
+      $[56] = fileTypesValue;
+      $[57] = t262;
     } else {
-      t172 = $[39];
+      t262 = $[57];
     }
-    const t182 = allFileTypesSelected ? void 0 : "Allowed file types";
-    let t192;
-    if ($[40] !== acceptedFiles || $[41] !== setFieldValue) {
-      t192 = Object.entries(fileTypes).map((t203) => {
-        const [value_0, label] = t203;
+    const t272 = allFileTypesSelected ? void 0 : "Allowed file types";
+    let t282;
+    if ($[58] !== acceptedFiles || $[59] !== setFieldValue) {
+      t282 = Object.entries(fileTypes).map((t293) => {
+        const [value_0, label] = t293;
         return /* @__PURE__ */ jsxs(MultiSelectItem, { value: value_0, className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx("div", { className: "flex-grow", children: label }),
           /* @__PURE__ */ jsx(Button, { size: "small", variant: "text", onClick: (e) => {
@@ -2141,50 +2217,50 @@ function StoragePropertyField(t0) {
           }, children: "Only" })
         ] }, value_0);
       });
-      $[40] = acceptedFiles;
-      $[41] = setFieldValue;
-      $[42] = t192;
+      $[58] = acceptedFiles;
+      $[59] = setFieldValue;
+      $[60] = t282;
     } else {
-      t192 = $[42];
+      t282 = $[60];
     }
-    if ($[43] !== acceptedFiles || $[44] !== disabled || $[45] !== handleTypesChange || $[46] !== t172 || $[47] !== t182 || $[48] !== t192) {
-      t10 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(MultiSelect, { className: "w-full", placeholder: "All file types allowed", disabled, name: acceptedFiles, value: t172, onValueChange: handleTypesChange, label: t182, renderValues: _temp3$4, children: t192 }) });
-      $[43] = acceptedFiles;
-      $[44] = disabled;
-      $[45] = handleTypesChange;
-      $[46] = t172;
-      $[47] = t182;
-      $[48] = t192;
-      $[49] = t10;
+    if ($[61] !== acceptedFiles || $[62] !== disabled || $[63] !== handleTypesChange || $[64] !== t262 || $[65] !== t272 || $[66] !== t282) {
+      t11 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(MultiSelect, { className: "w-full", placeholder: "All file types allowed", disabled, name: acceptedFiles, value: t262, onValueChange: handleTypesChange, label: t272, renderValues: _temp3$4, children: t282 }) });
+      $[61] = acceptedFiles;
+      $[62] = disabled;
+      $[63] = handleTypesChange;
+      $[64] = t262;
+      $[65] = t272;
+      $[66] = t282;
+      $[67] = t11;
     } else {
-      t10 = $[49];
+      t11 = $[67];
     }
-    const t202 = hasFilenameCallback || disabled;
-    const t212 = hasFilenameCallback ? "-" : fileNameValue;
-    if ($[50] !== fileName || $[51] !== t202 || $[52] !== t212) {
-      t11 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(Field, { name: fileName, as: DebouncedTextField, label: "File name", size: "small", disabled: t202, value: t212 }) });
-      $[50] = fileName;
-      $[51] = t202;
-      $[52] = t212;
-      $[53] = t11;
+    const t292 = hasFilenameCallback || disabled;
+    const t302 = hasFilenameCallback ? "-" : fileNameValue;
+    if ($[68] !== fileName || $[69] !== t292 || $[70] !== t302) {
+      t12 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(Field, { name: fileName, as: DebouncedTextField, label: "File name", size: "small", disabled: t292, value: t302 }) });
+      $[68] = fileName;
+      $[69] = t292;
+      $[70] = t302;
+      $[71] = t12;
     } else {
-      t11 = $[53];
+      t12 = $[71];
     }
-    const t222 = hasStoragePathCallback || disabled;
-    const t232 = hasStoragePathCallback ? "-" : storagePathValue;
-    let t242;
-    if ($[54] !== storagePath || $[55] !== t222 || $[56] !== t232) {
-      t242 = /* @__PURE__ */ jsx(Field, { name: storagePath, as: DebouncedTextField, label: "Storage path", disabled: t222, size: "small", value: t232 });
-      $[54] = storagePath;
-      $[55] = t222;
-      $[56] = t232;
-      $[57] = t242;
+    const t312 = hasStoragePathCallback || disabled;
+    const t322 = hasStoragePathCallback ? "-" : storagePathValue;
+    let t33;
+    if ($[72] !== storagePath || $[73] !== t312 || $[74] !== t322) {
+      t33 = /* @__PURE__ */ jsx(Field, { name: storagePath, as: DebouncedTextField, label: "Storage path", disabled: t312, size: "small", value: t322 });
+      $[72] = storagePath;
+      $[73] = t312;
+      $[74] = t322;
+      $[75] = t33;
     } else {
-      t242 = $[57];
+      t33 = $[75];
     }
-    let t25;
-    if ($[58] === Symbol.for("react.memo_cache_sentinel")) {
-      t25 = /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "ml-3.5 mt-1 mb-2", children: [
+    let t34;
+    if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+      t34 = /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "ml-3.5 mt-1 mb-2", children: [
         /* @__PURE__ */ jsx("p", { children: "You can use the following placeholders in the file name and storage path values:" }),
         /* @__PURE__ */ jsxs("ul", { children: [
           /* @__PURE__ */ jsx("li", { children: "{file} - Full name of the uploaded file" }),
@@ -2196,220 +2272,445 @@ function StoragePropertyField(t0) {
           /* @__PURE__ */ jsx("li", { children: "{rand} - Random value used to avoid name collisions" })
         ] })
       ] });
-      $[58] = t25;
+      $[76] = t34;
     } else {
-      t25 = $[58];
+      t34 = $[76];
     }
-    let t26;
-    if ($[59] !== disabled || $[60] !== existing) {
-      t26 = (t272) => {
+    let t35;
+    if ($[77] !== disabled || $[78] !== existing) {
+      t35 = (t362) => {
         const {
           field,
           form
-        } = t272;
+        } = t362;
         return /* @__PURE__ */ jsx(SwitchControl, { label: "Save URL instead of storage path", disabled: existing || disabled, form, field });
       };
-      $[59] = disabled;
-      $[60] = existing;
-      $[61] = t26;
+      $[77] = disabled;
+      $[78] = existing;
+      $[79] = t35;
     } else {
-      t26 = $[61];
+      t35 = $[79];
     }
-    let t27;
-    if ($[62] !== storeUrl || $[63] !== t26) {
-      t27 = /* @__PURE__ */ jsx(Field, { name: storeUrl, type: "checkbox", children: t26 });
-      $[62] = storeUrl;
-      $[63] = t26;
-      $[64] = t27;
+    let t36;
+    if ($[80] !== storeUrl || $[81] !== t35) {
+      t36 = /* @__PURE__ */ jsx(Field, { name: storeUrl, type: "checkbox", children: t35 });
+      $[80] = storeUrl;
+      $[81] = t35;
+      $[82] = t36;
     } else {
-      t27 = $[64];
+      t36 = $[82];
     }
-    let t28;
-    if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
-      t28 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "ml-3.5 mt-1 mb-2", children: "Turn this setting on, if you prefer to save the download URL of the uploaded file instead of the storage path. You can only change this prop upon creation." });
-      $[65] = t28;
+    let t37;
+    if ($[83] === Symbol.for("react.memo_cache_sentinel")) {
+      t37 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "ml-3.5 mt-1 mb-2", children: "Turn this setting on, if you prefer to save the download URL of the uploaded file instead of the storage path. You can only change this prop upon creation." });
+      $[83] = t37;
     } else {
-      t28 = $[65];
+      t37 = $[83];
     }
-    if ($[66] !== t242 || $[67] !== t27) {
-      t12 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
-        t242,
-        t25,
-        t27,
-        t28
+    if ($[84] !== t33 || $[85] !== t36) {
+      t13 = /* @__PURE__ */ jsxs("div", { className: "col-span-12", children: [
+        t33,
+        t34,
+        t36,
+        t37
       ] });
-      $[66] = t242;
-      $[67] = t27;
-      $[68] = t12;
+      $[84] = t33;
+      $[85] = t36;
+      $[86] = t13;
     } else {
-      t12 = $[68];
+      t13 = $[86];
     }
-    t8 = "col-span-12";
+    const t38 = maxSizeValue !== void 0 && maxSizeValue !== null ? maxSizeValue.toString() : "";
+    let t39;
+    if ($[87] !== maxSize || $[88] !== setFieldValue) {
+      t39 = (e_0) => {
+        const value_1 = e_0.target.value;
+        if (value_1 === "") {
+          setFieldValue(maxSize, void 0);
+        } else {
+          setFieldValue(maxSize, parseInt(value_1));
+        }
+      };
+      $[87] = maxSize;
+      $[88] = setFieldValue;
+      $[89] = t39;
+    } else {
+      t39 = $[89];
+    }
+    if ($[90] !== maxSize || $[91] !== t38 || $[92] !== t39) {
+      t14 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(DebouncedTextField, { name: maxSize, type: "number", label: "Max size (in bytes)", size: "small", value: t38, onChange: t39 }) });
+      $[90] = maxSize;
+      $[91] = t38;
+      $[92] = t39;
+      $[93] = t14;
+    } else {
+      t14 = $[93];
+    }
+    if ($[94] === Symbol.for("react.memo_cache_sentinel")) {
+      t15 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-4", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", color: "secondary", className: "mb-2 block", children: "Image Resize Configuration" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "mb-2 block text-xs", children: "Automatically resize and optimize images before upload (JPEG, PNG, WebP only)" })
+      ] });
+      $[94] = t15;
+    } else {
+      t15 = $[94];
+    }
+    const t40 = imageResizeMaxWidthValue !== void 0 && imageResizeMaxWidthValue !== null ? imageResizeMaxWidthValue.toString() : "";
+    let t41;
+    if ($[95] !== imageResizeMaxWidth || $[96] !== setFieldValue) {
+      t41 = (e_1) => {
+        const value_2 = e_1.target.value;
+        if (value_2 === "") {
+          setFieldValue(imageResizeMaxWidth, void 0);
+        } else {
+          setFieldValue(imageResizeMaxWidth, parseInt(value_2));
+        }
+      };
+      $[95] = imageResizeMaxWidth;
+      $[96] = setFieldValue;
+      $[97] = t41;
+    } else {
+      t41 = $[97];
+    }
+    if ($[98] !== disabled || $[99] !== imageResizeMaxWidth || $[100] !== t40 || $[101] !== t41) {
+      t16 = /* @__PURE__ */ jsx("div", { className: "col-span-6", children: /* @__PURE__ */ jsx(DebouncedTextField, { name: imageResizeMaxWidth, type: "number", label: "Max width (px)", size: "small", disabled, value: t40, onChange: t41 }) });
+      $[98] = disabled;
+      $[99] = imageResizeMaxWidth;
+      $[100] = t40;
+      $[101] = t41;
+      $[102] = t16;
+    } else {
+      t16 = $[102];
+    }
+    const t42 = imageResizeMaxHeightValue !== void 0 && imageResizeMaxHeightValue !== null ? imageResizeMaxHeightValue.toString() : "";
+    let t43;
+    if ($[103] !== imageResizeMaxHeight || $[104] !== setFieldValue) {
+      t43 = (e_2) => {
+        const value_3 = e_2.target.value;
+        if (value_3 === "") {
+          setFieldValue(imageResizeMaxHeight, void 0);
+        } else {
+          setFieldValue(imageResizeMaxHeight, parseInt(value_3));
+        }
+      };
+      $[103] = imageResizeMaxHeight;
+      $[104] = setFieldValue;
+      $[105] = t43;
+    } else {
+      t43 = $[105];
+    }
+    if ($[106] !== disabled || $[107] !== imageResizeMaxHeight || $[108] !== t42 || $[109] !== t43) {
+      t17 = /* @__PURE__ */ jsx("div", { className: "col-span-6", children: /* @__PURE__ */ jsx(DebouncedTextField, { name: imageResizeMaxHeight, type: "number", label: "Max height (px)", size: "small", disabled, value: t42, onChange: t43 }) });
+      $[106] = disabled;
+      $[107] = imageResizeMaxHeight;
+      $[108] = t42;
+      $[109] = t43;
+      $[110] = t17;
+    } else {
+      t17 = $[110];
+    }
+    const t44 = imageResizeModeValue || "cover";
+    let t45;
+    if ($[111] !== imageResizeMode || $[112] !== setFieldValue) {
+      t45 = (value_4) => setFieldValue(imageResizeMode, value_4 || "cover");
+      $[111] = imageResizeMode;
+      $[112] = setFieldValue;
+      $[113] = t45;
+    } else {
+      t45 = $[113];
+    }
+    let t46;
+    let t47;
+    if ($[114] === Symbol.for("react.memo_cache_sentinel")) {
+      t46 = /* @__PURE__ */ jsx(SelectItem, { value: "contain", children: "Contain (fit within bounds)" });
+      t47 = /* @__PURE__ */ jsx(SelectItem, { value: "cover", children: "Cover (fill bounds, may crop)" });
+      $[114] = t46;
+      $[115] = t47;
+    } else {
+      t46 = $[114];
+      t47 = $[115];
+    }
+    if ($[116] !== disabled || $[117] !== imageResizeMode || $[118] !== t44 || $[119] !== t45) {
+      t18 = /* @__PURE__ */ jsx("div", { className: "col-span-6", children: /* @__PURE__ */ jsxs(Select, { disabled, name: imageResizeMode, fullWidth: true, size: "medium", value: t44, onValueChange: t45, label: "Resize mode", renderValue: _temp4$2, children: [
+        t46,
+        t47
+      ] }) });
+      $[116] = disabled;
+      $[117] = imageResizeMode;
+      $[118] = t44;
+      $[119] = t45;
+      $[120] = t18;
+    } else {
+      t18 = $[120];
+    }
+    const t48 = imageResizeFormatValue || "original";
+    let t49;
+    if ($[121] !== imageResizeFormat || $[122] !== setFieldValue) {
+      t49 = (value_5) => setFieldValue(imageResizeFormat, value_5 || "original");
+      $[121] = imageResizeFormat;
+      $[122] = setFieldValue;
+      $[123] = t49;
+    } else {
+      t49 = $[123];
+    }
+    let t50;
+    let t51;
+    let t52;
+    let t53;
+    if ($[124] === Symbol.for("react.memo_cache_sentinel")) {
+      t50 = /* @__PURE__ */ jsx(SelectItem, { value: "original", children: "Original (keep same format)" });
+      t51 = /* @__PURE__ */ jsx(SelectItem, { value: "jpeg", children: "JPEG" });
+      t52 = /* @__PURE__ */ jsx(SelectItem, { value: "png", children: "PNG" });
+      t53 = /* @__PURE__ */ jsx(SelectItem, { value: "webp", children: "WebP (best compression)" });
+      $[124] = t50;
+      $[125] = t51;
+      $[126] = t52;
+      $[127] = t53;
+    } else {
+      t50 = $[124];
+      t51 = $[125];
+      t52 = $[126];
+      t53 = $[127];
+    }
+    if ($[128] !== disabled || $[129] !== imageResizeFormat || $[130] !== t48 || $[131] !== t49) {
+      t19 = /* @__PURE__ */ jsx("div", { className: "col-span-6", children: /* @__PURE__ */ jsxs(Select, { disabled, size: "medium", fullWidth: true, name: imageResizeFormat, value: t48, onValueChange: t49, label: "Output format", renderValue: _temp5, children: [
+        t50,
+        t51,
+        t52,
+        t53
+      ] }) });
+      $[128] = disabled;
+      $[129] = imageResizeFormat;
+      $[130] = t48;
+      $[131] = t49;
+      $[132] = t19;
+    } else {
+      t19 = $[132];
+    }
+    t9 = "col-span-12";
     T0 = DebouncedTextField;
-    t3 = maxSize;
+    t3 = imageResizeQuality;
     t4 = "number";
-    t5 = "Max size (in bytes)";
+    t5 = "Quality (0-100)";
     t6 = "small";
-    t7 = maxSizeValue !== void 0 && maxSizeValue !== null ? maxSizeValue.toString() : "";
+    t7 = disabled;
+    t8 = imageResizeQualityValue !== void 0 && imageResizeQualityValue !== null ? imageResizeQualityValue.toString() : "";
     $[6] = acceptedFiles;
     $[7] = disabled;
     $[8] = existing;
     $[9] = fileName;
     $[10] = fileNameValue;
-    $[11] = maxSize;
-    $[12] = setFieldValue;
-    $[13] = storagePath;
-    $[14] = storagePathValue;
-    $[15] = storeUrl;
-    $[16] = values;
-    $[17] = T0;
-    $[18] = T1;
-    $[19] = t10;
-    $[20] = t11;
-    $[21] = t12;
-    $[22] = t13;
-    $[23] = t14;
-    $[24] = t3;
-    $[25] = t4;
-    $[26] = t5;
-    $[27] = t6;
-    $[28] = t7;
-    $[29] = t8;
-    $[30] = t9;
+    $[11] = imageResizeFormat;
+    $[12] = imageResizeMaxHeight;
+    $[13] = imageResizeMaxWidth;
+    $[14] = imageResizeMode;
+    $[15] = imageResizeQuality;
+    $[16] = maxSize;
+    $[17] = setFieldValue;
+    $[18] = storagePath;
+    $[19] = storagePathValue;
+    $[20] = storeUrl;
+    $[21] = values;
+    $[22] = T0;
+    $[23] = T1;
+    $[24] = t10;
+    $[25] = t11;
+    $[26] = t12;
+    $[27] = t13;
+    $[28] = t14;
+    $[29] = t15;
+    $[30] = t16;
+    $[31] = t17;
+    $[32] = t18;
+    $[33] = t19;
+    $[34] = t20;
+    $[35] = t21;
+    $[36] = t3;
+    $[37] = t4;
+    $[38] = t5;
+    $[39] = t6;
+    $[40] = t7;
+    $[41] = t8;
+    $[42] = t9;
   } else {
-    T0 = $[17];
-    T1 = $[18];
-    t10 = $[19];
-    t11 = $[20];
-    t12 = $[21];
-    t13 = $[22];
-    t14 = $[23];
-    t3 = $[24];
-    t4 = $[25];
-    t5 = $[26];
-    t6 = $[27];
-    t7 = $[28];
-    t8 = $[29];
-    t9 = $[30];
+    T0 = $[22];
+    T1 = $[23];
+    t10 = $[24];
+    t11 = $[25];
+    t12 = $[26];
+    t13 = $[27];
+    t14 = $[28];
+    t15 = $[29];
+    t16 = $[30];
+    t17 = $[31];
+    t18 = $[32];
+    t19 = $[33];
+    t20 = $[34];
+    t21 = $[35];
+    t3 = $[36];
+    t4 = $[37];
+    t5 = $[38];
+    t6 = $[39];
+    t7 = $[40];
+    t8 = $[41];
+    t9 = $[42];
   }
-  let t15;
-  if ($[69] !== maxSize || $[70] !== setFieldValue) {
-    t15 = (e_0) => {
-      const value_1 = e_0.target.value;
-      if (value_1 === "") {
-        setFieldValue(maxSize, void 0);
+  let t22;
+  if ($[133] !== imageResizeQuality || $[134] !== setFieldValue) {
+    t22 = (e_3) => {
+      const value_6 = e_3.target.value;
+      if (value_6 === "") {
+        setFieldValue(imageResizeQuality, void 0);
       } else {
-        setFieldValue(maxSize, parseInt(value_1));
+        const numValue = parseInt(value_6);
+        if (numValue >= 0 && numValue <= 100) {
+          setFieldValue(imageResizeQuality, numValue);
+        }
       }
     };
-    $[69] = maxSize;
-    $[70] = setFieldValue;
-    $[71] = t15;
+    $[133] = imageResizeQuality;
+    $[134] = setFieldValue;
+    $[135] = t22;
   } else {
-    t15 = $[71];
+    t22 = $[135];
   }
-  let t16;
-  if ($[72] !== T0 || $[73] !== t15 || $[74] !== t3 || $[75] !== t4 || $[76] !== t5 || $[77] !== t6 || $[78] !== t7) {
-    t16 = /* @__PURE__ */ jsx(T0, { name: t3, type: t4, label: t5, size: t6, value: t7, onChange: t15 });
-    $[72] = T0;
-    $[73] = t15;
-    $[74] = t3;
-    $[75] = t4;
-    $[76] = t5;
-    $[77] = t6;
-    $[78] = t7;
-    $[79] = t16;
+  let t23;
+  if ($[136] !== T0 || $[137] !== t22 || $[138] !== t3 || $[139] !== t4 || $[140] !== t5 || $[141] !== t6 || $[142] !== t7 || $[143] !== t8) {
+    t23 = /* @__PURE__ */ jsx(T0, { name: t3, type: t4, label: t5, size: t6, disabled: t7, value: t8, onChange: t22 });
+    $[136] = T0;
+    $[137] = t22;
+    $[138] = t3;
+    $[139] = t4;
+    $[140] = t5;
+    $[141] = t6;
+    $[142] = t7;
+    $[143] = t8;
+    $[144] = t23;
   } else {
-    t16 = $[79];
+    t23 = $[144];
   }
-  let t17;
-  if ($[80] !== t16 || $[81] !== t8) {
-    t17 = /* @__PURE__ */ jsx("div", { className: t8, children: t16 });
-    $[80] = t16;
-    $[81] = t8;
-    $[82] = t17;
+  let t24;
+  if ($[145] === Symbol.for("react.memo_cache_sentinel")) {
+    t24 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "ml-3.5 mt-1 mb-2", children: "Higher quality = larger file size. Recommended: 80-90 for photos, 90-100 for graphics" });
+    $[145] = t24;
   } else {
-    t17 = $[82];
+    t24 = $[145];
   }
-  let t18;
-  if ($[83] !== t10 || $[84] !== t11 || $[85] !== t12 || $[86] !== t17 || $[87] !== t9) {
-    t18 = /* @__PURE__ */ jsxs("div", { className: t9, children: [
-      t10,
-      t11,
-      t12,
-      t17
+  let t25;
+  if ($[146] !== t23 || $[147] !== t9) {
+    t25 = /* @__PURE__ */ jsxs("div", { className: t9, children: [
+      t23,
+      t24
     ] });
-    $[83] = t10;
-    $[84] = t11;
-    $[85] = t12;
-    $[86] = t17;
-    $[87] = t9;
-    $[88] = t18;
+    $[146] = t23;
+    $[147] = t9;
+    $[148] = t25;
   } else {
-    t18 = $[88];
+    t25 = $[148];
   }
-  let t19;
-  if ($[89] !== T1 || $[90] !== t13 || $[91] !== t18) {
-    t19 = /* @__PURE__ */ jsx(T1, { title: t13, children: t18 });
-    $[89] = T1;
-    $[90] = t13;
-    $[91] = t18;
-    $[92] = t19;
+  let t26;
+  if ($[149] !== t10 || $[150] !== t11 || $[151] !== t12 || $[152] !== t13 || $[153] !== t14 || $[154] !== t15 || $[155] !== t16 || $[156] !== t17 || $[157] !== t18 || $[158] !== t19 || $[159] !== t25) {
+    t26 = /* @__PURE__ */ jsxs("div", { className: t10, children: [
+      t11,
+      t12,
+      t13,
+      t14,
+      t15,
+      t16,
+      t17,
+      t18,
+      t19,
+      t25
+    ] });
+    $[149] = t10;
+    $[150] = t11;
+    $[151] = t12;
+    $[152] = t13;
+    $[153] = t14;
+    $[154] = t15;
+    $[155] = t16;
+    $[156] = t17;
+    $[157] = t18;
+    $[158] = t19;
+    $[159] = t25;
+    $[160] = t26;
+  } else {
+    t26 = $[160];
+  }
+  let t27;
+  if ($[161] !== T1 || $[162] !== t20 || $[163] !== t26) {
+    t27 = /* @__PURE__ */ jsx(T1, { title: t20, children: t26 });
+    $[161] = T1;
+    $[162] = t20;
+    $[163] = t26;
+    $[164] = t27;
   } else {
-    t19 = $[92];
+    t27 = $[164];
   }
-  let t20;
-  if ($[93] !== t14 || $[94] !== t19) {
-    t20 = /* @__PURE__ */ jsx("div", { className: t14, children: t19 });
-    $[93] = t14;
-    $[94] = t19;
-    $[95] = t20;
+  let t28;
+  if ($[165] !== t21 || $[166] !== t27) {
+    t28 = /* @__PURE__ */ jsx("div", { className: t21, children: t27 });
+    $[165] = t21;
+    $[166] = t27;
+    $[167] = t28;
   } else {
-    t20 = $[95];
+    t28 = $[167];
   }
-  let t21;
-  if ($[96] !== disabled || $[97] !== multiple) {
-    t21 = !multiple && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-2", children: /* @__PURE__ */ jsx(GeneralPropertyValidation, { disabled }) });
-    $[96] = disabled;
-    $[97] = multiple;
-    $[98] = t21;
+  let t29;
+  if ($[168] !== disabled || $[169] !== multiple) {
+    t29 = !multiple && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-2", children: /* @__PURE__ */ jsx(GeneralPropertyValidation, { disabled }) });
+    $[168] = disabled;
+    $[169] = multiple;
+    $[170] = t29;
   } else {
-    t21 = $[98];
+    t29 = $[170];
   }
-  let t22;
-  if ($[99] !== disabled || $[100] !== multiple) {
-    t22 = multiple && /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(ArrayPropertyValidation, { disabled }) });
-    $[99] = disabled;
-    $[100] = multiple;
-    $[101] = t22;
+  let t30;
+  if ($[171] !== disabled || $[172] !== multiple) {
+    t30 = multiple && /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsx(ArrayPropertyValidation, { disabled }) });
+    $[171] = disabled;
+    $[172] = multiple;
+    $[173] = t30;
   } else {
-    t22 = $[101];
+    t30 = $[173];
   }
-  let t23;
-  if ($[102] !== t21 || $[103] !== t22) {
-    t23 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(ValidationPanel, { children: [
-      t21,
-      t22
+  let t31;
+  if ($[174] !== t29 || $[175] !== t30) {
+    t31 = /* @__PURE__ */ jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxs(ValidationPanel, { children: [
+      t29,
+      t30
     ] }) });
-    $[102] = t21;
-    $[103] = t22;
-    $[104] = t23;
+    $[174] = t29;
+    $[175] = t30;
+    $[176] = t31;
   } else {
-    t23 = $[104];
+    t31 = $[176];
   }
-  let t24;
-  if ($[105] !== t20 || $[106] !== t23) {
-    t24 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      t20,
-      t23
+  let t32;
+  if ($[177] !== t28 || $[178] !== t31) {
+    t32 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t28,
+      t31
     ] });
-    $[105] = t20;
-    $[106] = t23;
-    $[107] = t24;
+    $[177] = t28;
+    $[178] = t31;
+    $[179] = t32;
   } else {
-    t24 = $[107];
+    t32 = $[179];
   }
-  return t24;
+  return t32;
+}
+function _temp5(selected_1) {
+  if (!selected_1) {
+    return "Original";
+  }
+  return selected_1.charAt(0).toUpperCase() + selected_1.slice(1);
+}
+function _temp4$2(selected_0) {
+  if (!selected_0) {
+    return "Cover";
+  }
+  return selected_0 === "contain" ? "Contain (fit within bounds)" : "Cover (fill bounds, may crop)";
 }
 function _temp3$4(selected) {
   if (!selected || selected.length === 0) {
@@ -2424,13 +2725,12 @@ function _temp$a(v) {
   return fileTypes[v];
 }
 function editableProperty(property) {
-  if (isPropertyBuilder(property)) return false;
-  if (isPropertyBuilder(property)) return false;
-  else {
-    const eProperty = property;
-    if (eProperty.dataType === "array" && typeof eProperty.of === "function") return false;
-    else if (eProperty.dataType === "array" && Array.isArray(eProperty.of)) return false;
-    return Boolean(eProperty.editable);
+  if (isPropertyBuilder(property)) {
+    return false;
+  } else {
+    if (property.dataType === "array" && typeof property.of === "function") return false;
+    else if (property.dataType === "array" && Array.isArray(property.of)) return false;
+    return property.editable === void 0 ? true : Boolean(property.editable);
   }
 }
 function removeNonEditableProperties(properties) {
@@ -2509,7 +2809,7 @@ function PropertyFieldPreview(t0) {
   } else {
     t6 = $[11];
   }
-  const t7 = includeName ? "body2" : "subtitle1";
+  const t7 = includeName ? "body2" : "label";
   const t8 = propertyConfig?.name;
   let t9;
   if ($[12] !== t7 || $[13] !== t8) {
@@ -2661,7 +2961,7 @@ function NonEditablePropertyPreview(t0) {
   const t10 = property?.name ? property.name : name;
   let t11;
   if ($[15] !== t10) {
-    t11 = /* @__PURE__ */ jsx(Typography, { variant: "body1", component: "span", className: "flex-grow pr-2", children: t10 });
+    t11 = /* @__PURE__ */ jsx(Typography, { variant: "label", component: "span", className: "flex-grow pr-2", children: t10 });
     $[15] = t10;
     $[16] = t11;
   } else {
@@ -5313,7 +5613,7 @@ function MarkdownPropertyField(t0) {
     if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
       t12 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-surface-500", children: [
         /* @__PURE__ */ jsx(CloudUploadIcon, {}),
-        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "ml-2", children: "File upload config" })
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "ml-4", children: "File upload config" })
       ] });
       $[26] = t12;
     } else {
@@ -5572,7 +5872,7 @@ const PropertyForm = React__default.memo(function PropertyForm2(props) {
   const initialValue = t2;
   let t3;
   if ($[1] !== collectionEditable || $[2] !== property) {
-    t3 = Boolean(property && !editableProperty(property)) && !collectionEditable;
+    t3 = Boolean(property && !editableProperty(property)) || !collectionEditable;
     $[1] = collectionEditable;
     $[2] = property;
     $[3] = t3;
@@ -6296,9 +6596,11 @@ function PropertyEditFormFields(t0) {
     t10 = disabled && /* @__PURE__ */ jsxs(InfoLabel, { mode: "warn", children: [
       /* @__PURE__ */ jsx(Typography, { children: "This property can't be edited" }),
       /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
-        "You may not have permission to edit it or it is defined in code with no ",
+        "You may not have permission to edit it or it is defined in code with the ",
         /* @__PURE__ */ jsx("code", { children: "editable" }),
-        " flag"
+        " flag set to ",
+        /* @__PURE__ */ jsx("code", { children: "false" }),
+        "."
       ] })
     ] });
     $[95] = disabled;
@@ -7159,13 +7461,6 @@ function CollectionPropertiesEditorForm({
       setFieldValue(previousPropertyPath, void 0, false);
       setFieldTouched(previousPropertyPath, false, false);
     }
-    console.debug("onPropertyChanged", {
-      id: id_0,
-      property: property_0,
-      previousId,
-      namespace: namespace_3,
-      propertyPath
-    });
     if (propertyPath) {
       setFieldValue(propertyPath, property_0, false);
       setFieldTouched(propertyPath, true, false);
@@ -7285,7 +7580,7 @@ function UnsavedChangesDialog(t0) {
   }
   let t6;
   if ($[8] !== t4) {
-    t6 = /* @__PURE__ */ jsxs(DialogContent, { children: [
+    t6 = /* @__PURE__ */ jsxs(DialogContent, { className: "mt-4", children: [
       t4,
       t5
     ] });
@@ -10202,7 +10497,7 @@ const ConfigControllerProvider = React__default.memo(function ConfigControllerPr
         currentPropertiesOrder,
         editedCollectionId,
         parentCollectionIds: parentCollectionIds_0,
-        collectionEditable: collection?.editable ?? false,
+        collectionEditable: collection?.editable === void 0 || collection?.editable === true,
         existingEntities: existingEntities_0
       });
     };