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

package/dist/index.umd.js

@@ -169,7 +169,7 @@
     return t18;
   }
   function CollectionDetailsForm(t0) {
-    const $ = reactCompilerRuntime.c(192);
+    const $ = reactCompilerRuntime.c(202);
     const {
       isNewCollection,
       reservedGroups,
@@ -760,242 +760,282 @@
     } 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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: "Document ID is generated automatically" });
-      t89 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: "Users must define an ID" });
-      t90 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
-      $[134] = t88;
-      $[135] = t89;
-      $[136] = t90;
-    } else {
-      t88 = $[134];
-      t89 = $[135];
-      t90 = $[136];
-    }
-    let t91;
-    if ($[137] !== t85 || $[138] !== t86 || $[139] !== t87) {
-      t91 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t85, onValueChange: t86, value: t87, renderValue: _temp3$5, children: [
+    if ($[139] !== t88) {
+      t90 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
-      $[146] = t95;
-    } else {
-      t95 = $[146];
-    }
     let t96;
-    if ($[147] !== t94) {
-      t96 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-4", children: [
+    if ($[143] === Symbol.for("react.memo_cache_sentinel")) {
+      t94 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "false", children: "Document ID is generated automatically" });
+      t95 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "true", children: "Users must define an ID" });
+      t96 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "optional", children: "Users can define an ID, but it is not required" });
+      $[143] = t94;
+      $[144] = t95;
+      $[145] = t96;
+    } else {
+      t94 = $[143];
+      t95 = $[144];
+      t96 = $[145];
+    }
+    let t97;
+    if ($[146] !== t91 || $[147] !== t92 || $[148] !== t93) {
+      t97 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { name: "customId", label: "Document IDs generation", position: "item-aligned", size: "large", fullWidth: true, disabled: t91, onValueChange: t92, value: t93, renderValue: _temp3$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__ */ jsxRuntime.jsx(ui.BooleanSwitchWithLabel, { position: "start", size: "large", label: "Enable text search for this collection", onValueChange: t97, value: t98 });
-      $[151] = t97;
-      $[152] = t98;
-      $[153] = t99;
+    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__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+    if ($[152] !== t98 || $[153] !== t99) {
+      t100 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-        t99,
-        t100
-      ] });
-      $[155] = t99;
-      $[156] = t101;
+    if ($[155] === Symbol.for("react.memo_cache_sentinel")) {
+      t101 = /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: "A collection group consists of all collections with the same path. This allows you to query over multiple collections at once." });
+      $[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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-4 p-4", children: [
+    if ($[156] !== t100) {
+      t102 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(core.FieldCaption, { children: "Allow text search for this collection. If you have not specified a text search delegate, this will use the built-in local text search. This is not recommended for large collections, as it may incur in performance and cost issues." });
+      $[163] = t106;
+    } else {
+      t106 = $[163];
+    }
+    let t107;
+    if ($[164] !== t105) {
+      t107 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t41, initiallyExpanded: false, children: t102 });
-      $[167] = advancedPanelExpanded;
-      $[168] = t102;
-      $[169] = t103;
-    } else {
-      t103 = $[169];
-    }
-    let t104;
-    if ($[170] !== children || $[171] !== t103) {
-      t104 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-8", children: [
-        t103,
+    let t110;
+    if ($[180] !== children || $[181] !== t109) {
+      t110 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: {
+    let t112;
+    if ($[189] === Symbol.for("react.memo_cache_sentinel")) {
+      t112 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(core.SearchIconsView, { selectedIcon: t107, onIconSelected: t108 }) });
-      $[182] = t107;
-      $[183] = t108;
-      $[184] = t109;
+    let t115;
+    if ($[192] !== t113 || $[193] !== t114) {
+      t115 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(core.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
+    let t117;
+    if ($[198] !== t111 || $[199] !== t116 || $[200] !== t15) {
+      t117 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto my-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { maxWidth: "4xl", className: "flex flex-col gap-4 p-8 m-auto", children: [
         t15,
-        t105,
-        t106,
-        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") {
@@ -1957,7 +1997,7 @@
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
       t1 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row text-surface-500", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.RuleIcon, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "ml-2", children: "Validation" })
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "ml-4", children: "Validation" })
       ] });
       $[0] = t1;
     } else {
@@ -2029,7 +2069,7 @@
     "text/*": "Text files"
   };
   function StoragePropertyField(t0) {
-    const $ = reactCompilerRuntime.c(108);
+    const $ = reactCompilerRuntime.c(180);
     const {
       multiple,
       existing,
@@ -2045,6 +2085,12 @@
     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 = formex.getIn(values, fileName) ?? "{rand}_{file}";
@@ -2072,6 +2118,13 @@
     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;
@@ -2079,63 +2132,86 @@
     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 = formex.getIn(values, maxSize);
-      let t152;
-      if ($[31] !== acceptedFiles || $[32] !== values) {
-        t152 = formex.getIn(values, acceptedFiles);
-        $[31] = acceptedFiles;
-        $[32] = values;
-        $[33] = t152;
+      const imageResizeMaxWidthValue = formex.getIn(values, imageResizeMaxWidth);
+      const imageResizeMaxHeightValue = formex.getIn(values, imageResizeMaxHeight);
+      let t222;
+      if ($[43] !== imageResizeMode || $[44] !== values) {
+        t222 = formex.getIn(values, imageResizeMode) ?? "cover";
+        $[43] = imageResizeMode;
+        $[44] = values;
+        $[45] = t222;
+      } else {
+        t222 = $[45];
+      }
+      const imageResizeModeValue = t222;
+      let t232;
+      if ($[46] !== imageResizeFormat || $[47] !== values) {
+        t232 = formex.getIn(values, imageResizeFormat) ?? "original";
+        $[46] = imageResizeFormat;
+        $[47] = values;
+        $[48] = t232;
+      } else {
+        t232 = $[48];
+      }
+      const imageResizeFormatValue = t232;
+      const imageResizeQualityValue = formex.getIn(values, imageResizeQuality);
+      let t242;
+      if ($[49] !== acceptedFiles || $[50] !== values) {
+        t242 = formex.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 = ui.ExpandablePanel;
-      if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
-        t13 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row text-surface-500", children: [
+      if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
+        t20 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row text-surface-500", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.CloudUploadIcon, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "ml-2", children: "File upload config" })
+          /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs(ui.MultiSelectItem, { value: value_0, className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow", children: label }),
             /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "text", onClick: (e) => {
@@ -2145,50 +2221,50 @@
             }, 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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(formex.Field, { name: fileName, as: ui.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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(formex.Field, { name: fileName, as: ui.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__ */ jsxRuntime.jsx(formex.Field, { name: storagePath, as: ui.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__ */ jsxRuntime.jsx(formex.Field, { name: storagePath, as: ui.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__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "ml-3.5 mt-1 mb-2", children: [
+      let t34;
+      if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+        t34 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "ml-3.5 mt-1 mb-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { children: "You can use the following placeholders in the file name and storage path values:" }),
           /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("li", { children: "{file} - Full name of the uploaded file" }),
@@ -2200,220 +2276,445 @@
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(formex.Field, { name: storeUrl, type: "checkbox", children: t26 });
-        $[62] = storeUrl;
-        $[63] = t26;
-        $[64] = t27;
+      let t36;
+      if ($[80] !== storeUrl || $[81] !== t35) {
+        t36 = /* @__PURE__ */ jsxRuntime.jsx(formex.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
-          t242,
-          t25,
-          t27,
-          t28
+      if ($[84] !== t33 || $[85] !== t36) {
+        t13 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs("div", { className: "col-span-12 mt-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", color: "secondary", className: "mb-2 block", children: "Image Resize Configuration" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "col-span-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "col-span-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx(ui.SelectItem, { value: "contain", children: "Contain (fit within bounds)" });
+        t47 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "col-span-6", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.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__ */ jsxRuntime.jsx(ui.SelectItem, { value: "original", children: "Original (keep same format)" });
+        t51 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "jpeg", children: "JPEG" });
+        t52 = /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: "png", children: "PNG" });
+        t53 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsx("div", { className: "col-span-6", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.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 = ui.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: t8, children: t16 });
-      $[80] = t16;
-      $[81] = t8;
-      $[82] = t17;
+    let t24;
+    if ($[145] === Symbol.for("react.memo_cache_sentinel")) {
+      t24 = /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs("div", { className: t9, children: [
-        t10,
-        t11,
-        t12,
-        t17
+    let t25;
+    if ($[146] !== t23 || $[147] !== t9) {
+      t25 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: t14, children: t19 });
-      $[93] = t14;
-      $[94] = t19;
-      $[95] = t20;
+    let t28;
+    if ($[165] !== t21 || $[166] !== t27) {
+      t28 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(GeneralPropertyValidation, { disabled }) });
-      $[96] = disabled;
-      $[97] = multiple;
-      $[98] = t21;
+    let t29;
+    if ($[168] !== disabled || $[169] !== multiple) {
+      t29 = !multiple && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(GeneralPropertyValidation, { disabled }) });
+      $[168] = disabled;
+      $[169] = multiple;
+      $[170] = t29;
     } else {
-      t21 = $[98];
+      t29 = $[170];
     }
-    let t22;
-    if ($[99] !== disabled || $[100] !== multiple) {
-      t22 = multiple && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ArrayPropertyValidation, { disabled }) });
-      $[99] = disabled;
-      $[100] = multiple;
-      $[101] = t22;
+    let t30;
+    if ($[171] !== disabled || $[172] !== multiple) {
+      t30 = multiple && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ArrayPropertyValidation, { disabled }) });
+      $[171] = disabled;
+      $[172] = multiple;
+      $[173] = t30;
     } else {
-      t22 = $[101];
+      t30 = $[173];
     }
-    let t23;
-    if ($[102] !== t21 || $[103] !== t22) {
-      t23 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsxs(ValidationPanel, { children: [
-        t21,
-        t22
+    let t31;
+    if ($[174] !== t29 || $[175] !== t30) {
+      t31 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        t20,
-        t23
+    let t32;
+    if ($[177] !== t28 || $[178] !== t31) {
+      t32 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.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) {
@@ -2428,13 +2729,12 @@
     return fileTypes[v];
   }
   function editableProperty(property) {
-    if (core.isPropertyBuilder(property)) return false;
-    if (core.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 (core.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) {
@@ -2513,7 +2813,7 @@
     } else {
       t6 = $[11];
     }
-    const t7 = includeName ? "body2" : "subtitle1";
+    const t7 = includeName ? "body2" : "label";
     const t8 = propertyConfig?.name;
     let t9;
     if ($[12] !== t7 || $[13] !== t8) {
@@ -2665,7 +2965,7 @@
     const t10 = property?.name ? property.name : name;
     let t11;
     if ($[15] !== t10) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body1", component: "span", className: "flex-grow pr-2", children: t10 });
+      t11 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", component: "span", className: "flex-grow pr-2", children: t10 });
       $[15] = t10;
       $[16] = t11;
     } else {
@@ -5317,7 +5617,7 @@
       if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
         t12 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row text-surface-500", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.CloudUploadIcon, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "ml-2", children: "File upload config" })
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "ml-4", children: "File upload config" })
         ] });
         $[26] = t12;
       } else {
@@ -5576,7 +5876,7 @@
     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;
@@ -6300,9 +6600,11 @@
       t10 = disabled && /* @__PURE__ */ jsxRuntime.jsxs(ui.InfoLabel, { mode: "warn", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { children: "This property can't be edited" }),
         /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", children: [
-          "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__ */ jsxRuntime.jsx("code", { children: "editable" }),
-          " flag"
+          " flag set to ",
+          /* @__PURE__ */ jsxRuntime.jsx("code", { children: "false" }),
+          "."
         ] })
       ] });
       $[95] = disabled;
@@ -7163,13 +7465,6 @@
         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);
@@ -7289,7 +7584,7 @@
     }
     let t6;
     if ($[8] !== t4) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { children: [
+      t6 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { className: "mt-4", children: [
         t4,
         t5
       ] });
@@ -10206,7 +10501,7 @@
           currentPropertiesOrder,
           editedCollectionId,
           parentCollectionIds: parentCollectionIds_0,
-          collectionEditable: collection?.editable ?? false,
+          collectionEditable: collection?.editable === void 0 || collection?.editable === true,
           existingEntities: existingEntities_0
         });
       };