@firecms/core 3.0.0-canary.160 → 3.0.0-canary.162

package/dist/index.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import * as React from "react";
 import React__default, { forwardRef, useState, useRef, useEffect, useContext, useCallback, useMemo, createRef, createContext, useLayoutEffect, createElement } from "react";
-import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, IconButton, InfoIcon, Typography, ContentCopyIcon, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, ErrorIcon, cls, defaultBorderMixin, OpenInNewIcon, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, Skeleton, paperMixin, ErrorOutlineIcon, EditIcon, KeyboardTabIcon, RemoveCircleIcon, Menu, MoreVertIcon, MenuItem, Checkbox, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, ClearIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, ArchiveIcon, DeleteIcon, AddIcon, ExpandablePanel, Markdown, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, StarIcon, StarBorderIcon, Chip, Collapse, Container, NotesIcon, Tab, CloseIcon, Tabs, Alert, FilterListOffIcon, SearchIcon, LoadingButton, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, HandleIcon, RemoveIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, DescriptionIcon, fieldBackgroundMixin, fieldBackgroundHoverMixin, fieldBackgroundDisabledMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, EmailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Sheet, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
+import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, IconButton, InfoIcon, Typography, ContentCopyIcon, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, ErrorIcon, cls, defaultBorderMixin, OpenInNewIcon, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, Skeleton, paperMixin, EditIcon, KeyboardTabIcon, DoNotDisturbOnIcon, Menu, MoreVertIcon, MenuItem, Checkbox, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, ArchiveIcon, DeleteIcon, AddIcon, ExpandablePanel, Markdown, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, StarIcon, Chip, Collapse, Container, NotesIcon, Tab, Tabs, Alert, FilterListOffIcon, SearchIcon, LoadingButton, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, HandleIcon, RemoveIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, DescriptionIcon, fieldBackgroundMixin, fieldBackgroundHoverMixin, fieldBackgroundDisabledMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, MailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Sheet, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
 import { useFormex, setIn, getIn, useCreateFormex, Formex, Field } from "@firecms/formex";
@@ -2273,7 +2273,6 @@ const iconSynonyms = {
   picture_in_picture_alt: "cropped overlap photo position shape",
   pie_chart: "analytics bars data diagram infographic measure metrics statistics tracking",
   pie_chart_outline: "analytics bars data diagram infographic measure metrics statistics tracking",
-  pie_chart_outlined: "graph",
   pin: "1 2 3 digit key login logout number password pattern security star symbol unlock",
   pinch: "arrows compress direction finger grasp hand navigation nip squeeze tweak",
   pin_drop: "destination direction gps location maps navigation place stop",
@@ -2913,6 +2912,7 @@ const map = iconKeys.map((importName) => {
 const iconsSearch = new Fuse(map, {
   isCaseSensitive: false,
   shouldSort: true,
+  ignoreLocation: true,
   distance: 0,
   keys: ["key", "synonyms"]
 });
@@ -3172,6 +3172,12 @@ function getEntityImagePreviewPropertyKey(collection) {
       return key;
     }
   }
+  for (const key in collection.properties) {
+    const property = collection.properties[key];
+    if (property.dataType === "array" && property.of?.dataType === "string" && property.of.storage?.acceptedFiles?.includes("image/*")) {
+      return key;
+    }
+  }
   return void 0;
 }
 function flattenObject(obj, parentKey = "") {
@@ -5160,7 +5166,7 @@ function EntityTableCellActions({
     showError && /* @__PURE__ */ jsx(ErrorTooltip, { side: "left", title: showError.message, children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", style: {
       width: 32,
       height: 32
-    }, children: /* @__PURE__ */ jsx(ErrorOutlineIcon, { size: "small", color: "error" }) }) })
+    }, children: /* @__PURE__ */ jsx(ErrorIcon, { size: "small", color: "error" }) }) })
   ] }) });
 }
 const dropZoneClasses$1 = "max-w-full box-border relative pt-[2px] items-center border border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
@@ -5244,7 +5250,7 @@ function TableStorageUpload(props) {
   return t1;
 }
 function StorageUpload$1(t0) {
-  const $ = c(67);
+  const $ = c(64);
   const {
     property,
     internalValue,
@@ -5261,8 +5267,7 @@ function StorageUpload$1(t0) {
     onFileUploadComplete,
     storagePathBuilder
   } = t0;
-  const [, setOnHover] = useState(false);
-  const previewSize = multipleFilesSupported && previewSizeInput === "medium" ? "small" : previewSizeInput;
+  const previewSize = previewSizeInput;
   if (multipleFilesSupported) {
     const arrayProperty = property;
     if (Array.isArray(arrayProperty.of)) {
@@ -5375,58 +5380,43 @@ function StorageUpload$1(t0) {
   t5 = t6;
   const imageSize = t5;
   const showError = !disabled && error;
-  let t7;
-  let t8;
-  let t9;
-  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = () => setOnHover(true);
-    t8 = () => setOnHover(true);
-    t9 = () => setOnHover(false);
-    $[17] = t7;
-    $[18] = t8;
-    $[19] = t9;
-  } else {
-    t7 = $[17];
-    t8 = $[18];
-    t9 = $[19];
-  }
-  const t10 = `justify-${hasValue ? "start" : "center"}`;
-  const t11 = isDragActive ? activeDropClasses$1 : "";
-  const t12 = isDragAccept ? acceptDropClasses$1 : "";
-  const t13 = isDragReject ? rejectDropClasses$1 : "";
-  let t14;
-  if ($[20] !== t10 || $[21] !== t11 || $[22] !== t12 || $[23] !== t13) {
-    t14 = cls(dropZoneClasses$1, "relative w-full h-full flex", t10, t11, t12, t13);
-    $[20] = t10;
+  const t7 = `justify-${hasValue ? "start" : "center"}`;
+  const t8 = isDragActive ? activeDropClasses$1 : "";
+  const t9 = isDragAccept ? acceptDropClasses$1 : "";
+  const t10 = isDragReject ? rejectDropClasses$1 : "";
+  let t11;
+  if ($[17] !== t10 || $[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
+    t11 = cls(dropZoneClasses$1, "relative w-full h-full flex", t7, t8, t9, t10);
+    $[17] = t10;
+    $[18] = t7;
+    $[19] = t8;
+    $[20] = t9;
     $[21] = t11;
-    $[22] = t12;
-    $[23] = t13;
-    $[24] = t14;
   } else {
-    t14 = $[24];
+    t11 = $[21];
   }
-  let t15;
-  if ($[25] !== getInputProps) {
-    t15 = getInputProps();
-    $[25] = getInputProps;
-    $[26] = t15;
+  let t12;
+  if ($[22] !== getInputProps) {
+    t12 = getInputProps();
+    $[22] = getInputProps;
+    $[23] = t12;
   } else {
-    t15 = $[26];
+    t12 = $[23];
   }
-  let t16;
-  if ($[27] !== autoFocus || $[28] !== t15) {
-    t16 = /* @__PURE__ */ jsx("input", { autoFocus, ...t15 });
-    $[27] = autoFocus;
-    $[28] = t15;
-    $[29] = t16;
+  let t13;
+  if ($[24] !== autoFocus || $[25] !== t12) {
+    t13 = /* @__PURE__ */ jsx("input", { autoFocus, ...t12 });
+    $[24] = autoFocus;
+    $[25] = t12;
+    $[26] = t13;
   } else {
-    t16 = $[29];
+    t13 = $[26];
   }
-  let t17;
-  if ($[30] !== entity || $[31] !== imageSize || $[32] !== internalValue || $[33] !== metadata || $[34] !== onFileUploadComplete || $[35] !== previewSize || $[36] !== renderProperty || $[37] !== storagePathBuilder) {
-    let t182;
-    if ($[39] !== entity || $[40] !== imageSize || $[41] !== metadata || $[42] !== onFileUploadComplete || $[43] !== previewSize || $[44] !== renderProperty || $[45] !== storagePathBuilder) {
-      t182 = (entry, index) => {
+  let t14;
+  if ($[27] !== entity || $[28] !== imageSize || $[29] !== internalValue || $[30] !== metadata || $[31] !== onFileUploadComplete || $[32] !== previewSize || $[33] !== renderProperty || $[34] !== storagePathBuilder) {
+    let t152;
+    if ($[36] !== entity || $[37] !== imageSize || $[38] !== metadata || $[39] !== onFileUploadComplete || $[40] !== previewSize || $[41] !== renderProperty || $[42] !== storagePathBuilder) {
+      t152 = (entry, index) => {
         let child;
         if (entry.storagePathOrDownloadUrl) {
           child = /* @__PURE__ */ jsx(TableStorageItemPreview, { property: renderProperty, value: entry.storagePathOrDownloadUrl, entity, size: previewSize }, `storage_preview_${index}`);
@@ -5437,87 +5427,87 @@ function StorageUpload$1(t0) {
         }
         return child;
       };
-      $[39] = entity;
-      $[40] = imageSize;
-      $[41] = metadata;
-      $[42] = onFileUploadComplete;
-      $[43] = previewSize;
-      $[44] = renderProperty;
-      $[45] = storagePathBuilder;
-      $[46] = t182;
+      $[36] = entity;
+      $[37] = imageSize;
+      $[38] = metadata;
+      $[39] = onFileUploadComplete;
+      $[40] = previewSize;
+      $[41] = renderProperty;
+      $[42] = storagePathBuilder;
+      $[43] = t152;
     } else {
-      t182 = $[46];
+      t152 = $[43];
     }
-    t17 = internalValue.map(t182);
-    $[30] = entity;
-    $[31] = imageSize;
-    $[32] = internalValue;
-    $[33] = metadata;
-    $[34] = onFileUploadComplete;
-    $[35] = previewSize;
-    $[36] = renderProperty;
-    $[37] = storagePathBuilder;
-    $[38] = t17;
+    t14 = internalValue.map(t152);
+    $[27] = entity;
+    $[28] = imageSize;
+    $[29] = internalValue;
+    $[30] = metadata;
+    $[31] = onFileUploadComplete;
+    $[32] = previewSize;
+    $[33] = renderProperty;
+    $[34] = storagePathBuilder;
+    $[35] = t14;
   } else {
-    t17 = $[38];
+    t14 = $[35];
   }
-  let t18;
-  if ($[47] !== helpText || $[48] !== internalValue || $[49] !== open) {
-    t18 = !internalValue && /* @__PURE__ */ jsx("div", { className: "flex-grow m-2 max-w-[200px]", onClick: open, children: /* @__PURE__ */ jsx(Typography, { className: "text-surface-400 dark:text-surface-600", variant: "body2", align: "center", children: helpText }) });
-    $[47] = helpText;
-    $[48] = internalValue;
-    $[49] = open;
-    $[50] = t18;
+  let t15;
+  if ($[44] !== helpText || $[45] !== internalValue || $[46] !== open) {
+    t15 = !internalValue && /* @__PURE__ */ jsx("div", { className: "flex-grow m-2 max-w-[200px]", onClick: open, children: /* @__PURE__ */ jsx(Typography, { className: "text-surface-400 dark:text-surface-600", variant: "body2", align: "center", children: helpText }) });
+    $[44] = helpText;
+    $[45] = internalValue;
+    $[46] = open;
+    $[47] = t15;
   } else {
-    t18 = $[50];
+    t15 = $[47];
   }
-  const t19 = !disabled ? openPopup : void 0;
-  let t20;
-  if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
-    t20 = /* @__PURE__ */ jsx(EditIcon, { size: "small", className: "text-surface-500" });
-    $[51] = t20;
+  const t16 = !disabled ? openPopup : void 0;
+  let t17;
+  if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = /* @__PURE__ */ jsx(EditIcon, { size: "small", className: "text-surface-500" });
+    $[48] = t17;
   } else {
-    t20 = $[51];
+    t17 = $[48];
   }
-  let t21;
-  if ($[52] !== open) {
-    t21 = /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", onClick: open, children: t20 });
-    $[52] = open;
-    $[53] = t21;
+  let t18;
+  if ($[49] !== open) {
+    t18 = /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "small", onClick: open, children: t17 });
+    $[49] = open;
+    $[50] = t18;
   } else {
-    t21 = $[53];
+    t18 = $[50];
   }
-  let t22;
-  if ($[54] !== disabled || $[55] !== selected || $[56] !== showError || $[57] !== t19 || $[58] !== t21) {
-    t22 = /* @__PURE__ */ jsx(EntityTableCellActions, { showError, disabled, showExpandIcon: true, selected, openPopup: t19, children: t21 });
-    $[54] = disabled;
-    $[55] = selected;
-    $[56] = showError;
-    $[57] = t19;
-    $[58] = t21;
-    $[59] = t22;
+  let t19;
+  if ($[51] !== disabled || $[52] !== selected || $[53] !== showError || $[54] !== t16 || $[55] !== t18) {
+    t19 = /* @__PURE__ */ jsx(EntityTableCellActions, { showError, disabled, showExpandIcon: true, selected, openPopup: t16, children: t18 });
+    $[51] = disabled;
+    $[52] = selected;
+    $[53] = showError;
+    $[54] = t16;
+    $[55] = t18;
+    $[56] = t19;
   } else {
-    t22 = $[59];
+    t19 = $[56];
   }
-  let t23;
-  if ($[60] !== rootProps || $[61] !== t14 || $[62] !== t16 || $[63] !== t17 || $[64] !== t18 || $[65] !== t22) {
-    t23 = /* @__PURE__ */ jsxs("div", { ...rootProps, onMouseEnter: t7, onMouseMove: t8, onMouseLeave: t9, className: t14, children: [
-      t16,
-      t17,
-      t18,
-      t22
+  let t20;
+  if ($[57] !== rootProps || $[58] !== t11 || $[59] !== t13 || $[60] !== t14 || $[61] !== t15 || $[62] !== t19) {
+    t20 = /* @__PURE__ */ jsxs("div", { ...rootProps, className: t11, children: [
+      t13,
+      t14,
+      t15,
+      t19
     ] });
-    $[60] = rootProps;
-    $[61] = t14;
-    $[62] = t16;
-    $[63] = t17;
-    $[64] = t18;
-    $[65] = t22;
-    $[66] = t23;
+    $[57] = rootProps;
+    $[58] = t11;
+    $[59] = t13;
+    $[60] = t14;
+    $[61] = t15;
+    $[62] = t19;
+    $[63] = t20;
   } else {
-    t23 = $[66];
+    t20 = $[63];
   }
-  return t23;
+  return t20;
 }
 function _temp2$a(a, b) {
   return {
@@ -5587,21 +5577,24 @@ function EntityPreview({
   const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
   const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
   const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : void 0;
+  const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
   const restProperties = listProperties.filter((p) => p !== titleProperty && p !== imagePropertyKey);
+  const imageValue = imagePropertyKey ? getValueInPath(entity.values, imagePropertyKey) : void 0;
+  const usedImageValue = imageProperty !== void 0 ? "of" in imageProperty ? (imageValue ?? []).length > 0 ? imageValue[0] : void 0 : imageValue : void 0;
   return /* @__PURE__ */ jsxs(EntityPreviewContainer, { onClick: disabled ? void 0 : onClick, hover: disabled ? void 0 : hover, size, children: [
     /* @__PURE__ */ jsxs("div", { className: cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "small" ? "my-0.5" : "m-2 self-start"), children: [
-      imageProperty && /* @__PURE__ */ jsx(PropertyPreview, { property: imageProperty, propertyKey: imagePropertyKey, size: "small", value: getValueInPath(entity.values, imagePropertyKey) }),
-      !imageProperty && /* @__PURE__ */ jsx(IconForView, { collectionOrView: collection, color: "primary", size, className: "m-auto p-1" })
+      usedImageProperty && usedImageValue && /* @__PURE__ */ jsx(PropertyPreview, { property: usedImageProperty, propertyKey: imagePropertyKey, size: "small", value: usedImageValue }),
+      (!usedImageProperty || !usedImageValue) && /* @__PURE__ */ jsx(IconForView, { collectionOrView: collection, color: "primary", size, className: "m-auto p-1" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col grow-1 w-full m-1 shrink-1", style: {
       "maxWidth": "calc(100% - 96px)"
     }, children: [
       size !== "small" && includeId && (entity ? /* @__PURE__ */ jsx("div", { className: "block whitespace-nowrap overflow-hidden truncate", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "disabled", className: "font-mono", children: entity.id }) }) : /* @__PURE__ */ jsx(Skeleton, {})),
-      titleProperty && /* @__PURE__ */ jsx("div", { className: "my-0.5 text-sm font-medium", children: entity ? /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: titleProperty, value: getValueInPath(entity.values, titleProperty), property: resolvedCollection.properties[titleProperty], size: "large" }) : /* @__PURE__ */ jsx(SkeletonPropertyComponent, { property: resolvedCollection.properties[titleProperty], size: "large" }) }),
+      titleProperty && /* @__PURE__ */ jsx("div", { className: "truncate my-0.5 text-sm font-medium", children: entity ? /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: titleProperty, value: getValueInPath(entity.values, titleProperty), property: resolvedCollection.properties[titleProperty], size: "large" }) : /* @__PURE__ */ jsx(SkeletonPropertyComponent, { property: resolvedCollection.properties[titleProperty], size: "large" }) }),
       restProperties && restProperties.map((key) => {
         const childProperty = resolvedCollection.properties[key];
         if (!childProperty) return null;
-        return /* @__PURE__ */ jsx("div", { className: restProperties.length > 1 ? "my-0.5" : "my-0", children: entity ? /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key, value: getValueInPath(entity.values, key), property: childProperty, size: "small" }) : /* @__PURE__ */ jsx(SkeletonPropertyComponent, { property: childProperty, size: "small" }) }, "ref_prev_" + key);
+        return /* @__PURE__ */ jsx("div", { className: cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0"), children: entity ? /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key, value: getValueInPath(entity.values, key), property: childProperty, size: "small" }) : /* @__PURE__ */ jsx(SkeletonPropertyComponent, { property: childProperty, size: "small" }) }, "ref_prev_" + key);
       })
     ] }),
     entity && includeEntityLink && /* @__PURE__ */ jsx(Tooltip, { title: `See details for ${entity.id}`, className: "shrink-0", children: /* @__PURE__ */ jsx(IconButton, { color: "inherit", size: "medium", className: size !== "small" ? "self-start" : "", onClick: (e) => {
@@ -5716,6 +5709,7 @@ const EntityPreviewContainer = React.forwardRef((t0, ref) => {
   }
   return t9;
 });
+EntityPreviewContainer.displayName = "EntityPreviewContainer";
 function TableReferenceField(props) {
   const $ = c(9);
   const customizationController = useCustomizationController();
@@ -6544,7 +6538,7 @@ const EntityTableCell = React__default.memo(function EntityTableCell2(t0) {
   }
   let t24;
   if ($[33] !== disabled || $[34] !== disabledTooltip || $[35] !== onHover) {
-    t24 = disabled && onHover && disabledTooltip && /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 text-xs", children: /* @__PURE__ */ jsx(Tooltip, { title: disabledTooltip, children: /* @__PURE__ */ jsx(RemoveCircleIcon, { size: "smallest", color: "disabled", className: "text-surface-500" }) }) });
+    t24 = disabled && onHover && disabledTooltip && /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1 text-xs", children: /* @__PURE__ */ jsx(Tooltip, { title: disabledTooltip, children: /* @__PURE__ */ jsx(DoNotDisturbOnIcon, { size: "smallest", color: "disabled", className: "text-surface-500" }) }) });
     $[33] = disabled;
     $[34] = disabledTooltip;
     $[35] = onHover;
@@ -8352,7 +8346,7 @@ function StringNumberFilterField(t0) {
     t7 = !enumValues && /* @__PURE__ */ jsx(TextField, { type: dataType === "number" ? "number" : void 0, value: internalValue !== void 0 && internalValue != null ? String(internalValue) : "", onChange: (evt) => {
       const val_0 = dataType === "number" ? parseFloat(evt.target.value) : evt.target.value;
       updateFilter(operation, val_0);
-    }, endAdornment: internalValue && /* @__PURE__ */ jsx(IconButton, { onClick: (e) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsx(ClearIcon, {}) }) });
+    }, endAdornment: internalValue && /* @__PURE__ */ jsx(IconButton, { onClick: (e) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsx(CloseIcon, {}) }) });
     $[20] = dataType;
     $[21] = enumValues;
     $[22] = internalValue;
@@ -8368,7 +8362,7 @@ function StringNumberFilterField(t0) {
       if (value_1 !== "") {
         updateFilter(operation, dataType === "number" ? parseInt(value_1) : value_1);
       }
-    }, endAdornment: internalValue && /* @__PURE__ */ jsx(IconButton, { className: "absolute right-2 top-3", onClick: (e_0) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsx(ClearIcon, {}) }), renderValue: (enumKey) => {
+    }, endAdornment: internalValue && /* @__PURE__ */ jsx(IconButton, { className: "absolute right-2 top-3", onClick: (e_0) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsx(CloseIcon, {}) }), renderValue: (enumKey) => {
       if (enumKey === null) {
         return "Filter for null values";
       }
@@ -8392,7 +8386,7 @@ function StringNumberFilterField(t0) {
   if ($[34] !== dataType || $[35] !== enumValues || $[36] !== internalValue || $[37] !== multiple || $[38] !== name || $[39] !== operation || $[40] !== updateFilter) {
     t9 = enumValues && multiple && /* @__PURE__ */ jsx(MultiSelect, { position: "item-aligned", value: Array.isArray(internalValue) ? internalValue.map(_temp3$3) : [], onValueChange: (value_2) => {
       updateFilter(operation, dataType === "number" ? value_2.map(_temp4$2) : value_2);
-    }, multiple, endAdornment: internalValue && /* @__PURE__ */ jsx(IconButton, { className: "absolute right-2 top-3", onClick: (e_2) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsx(ClearIcon, {}) }), children: enumValues.map((enumConfig_0) => /* @__PURE__ */ jsx(MultiSelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsx(EnumValuesChip, { enumKey: String(enumConfig_0.id), enumValues, size: "small" }) }, `select_value_${name}_${enumConfig_0.id}`)) });
+    }, multiple, endAdornment: internalValue && /* @__PURE__ */ jsx(IconButton, { className: "absolute right-2 top-3", onClick: (e_2) => updateFilter(operation, void 0), children: /* @__PURE__ */ jsx(CloseIcon, {}) }), children: enumValues.map((enumConfig_0) => /* @__PURE__ */ jsx(MultiSelectItem, { value: String(enumConfig_0.id), children: /* @__PURE__ */ jsx(EnumValuesChip, { enumKey: String(enumConfig_0.id), enumValues, size: "small" }) }, `select_value_${name}_${enumConfig_0.id}`)) });
     $[34] = dataType;
     $[35] = enumValues;
     $[36] = internalValue;
@@ -10089,7 +10083,7 @@ function NavigationCardBinding(t0) {
       } else {
         userConfigurationPersistence.setFavouritePaths([...userConfigurationPersistence.favouritePaths, path]);
       }
-    }, children: favourite ? /* @__PURE__ */ jsx(StarIcon, { size: 18, className: "text-secondary" }) : /* @__PURE__ */ jsx(StarBorderIcon, { size: 18, className: "text-surface-400 dark:text-surface-500" }) }, "favourite")] : [];
+    }, children: /* @__PURE__ */ jsx(StarIcon, { size: 18, className: favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500" }) }, "favourite")] : [];
     if (customizationController.plugins && collection) {
       let t62;
       if ($[14] !== collection || $[15] !== context || $[16] !== path) {
@@ -10213,27 +10207,28 @@ function NavigationChip(t0) {
   } else {
     t3 = $[9];
   }
-  let t4;
-  if ($[10] !== favourite || $[11] !== onIconClick) {
-    t4 = favourite ? /* @__PURE__ */ jsx(StarIcon, { onClick: onIconClick, size: 18, className: "text-secondary" }) : /* @__PURE__ */ jsx(StarBorderIcon, { onClick: onIconClick, size: 18, className: "text-surface-400 dark:text-surface-500" });
-    $[10] = favourite;
-    $[11] = onIconClick;
-    $[12] = t4;
+  const t4 = favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500";
+  let t5;
+  if ($[10] !== onIconClick || $[11] !== t4) {
+    t5 = /* @__PURE__ */ jsx(StarIcon, { onClick: onIconClick, size: 18, className: t4 });
+    $[10] = onIconClick;
+    $[11] = t4;
+    $[12] = t5;
   } else {
-    t4 = $[12];
+    t5 = $[12];
   }
-  let t5;
-  if ($[13] !== entry.name || $[14] !== entry.path || $[15] !== t3 || $[16] !== t4) {
-    t5 = /* @__PURE__ */ jsx(Chip, { onClick: t3, icon: t4, children: entry.name }, entry.path);
+  let t6;
+  if ($[13] !== entry.name || $[14] !== entry.path || $[15] !== t3 || $[16] !== t5) {
+    t6 = /* @__PURE__ */ jsx(Chip, { onClick: t3, icon: t5, children: entry.name }, entry.path);
     $[13] = entry.name;
     $[14] = entry.path;
     $[15] = t3;
-    $[16] = t4;
-    $[17] = t5;
+    $[16] = t5;
+    $[17] = t6;
   } else {
-    t5 = $[17];
+    t6 = $[17];
   }
-  return t5;
+  return t6;
 }
 function FavouritesView(t0) {
   const $ = c(17);
@@ -11577,7 +11572,7 @@ function EntityEditViewInner({
       return /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(LabelWithIconAndTooltip, { propertyKey: key_0, icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }), title: additionalField.name, className: "text-text-secondary dark:text-text-secondary-dark ml-3.5" }),
         /* @__PURE__ */ jsx("div", { className: cls(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar"), children: /* @__PURE__ */ jsx(ErrorBoundary, { children: child }) })
-      ] });
+      ] }, `additional_${key_0}`);
     }
     console.warn(`Property ${key_0} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
     return null;
@@ -11990,7 +11985,7 @@ function PopupFormFieldInternal({
       }, children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: (event) => {
         event.stopPropagation();
         onClose();
-      }, children: /* @__PURE__ */ jsx(ClearIcon, { className: "text-white", size: "small" }) }) })
+      }, children: /* @__PURE__ */ jsx(CloseIcon, { className: "text-white", size: "small" }) }) })
     ] })
   ] }, `draggable_${propertyKey}_${entityId}_${open}`);
   return /* @__PURE__ */ jsx(Portal.Root, { asChild: true, container, children: /* @__PURE__ */ jsx(Formex, { value: formex, children: draggable }) });
@@ -13748,6 +13743,7 @@ function useBuildNavigationController(props) {
       let shouldUpdateTopLevelNav = false;
       if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
         collectionsRef.current = resolvedCollections;
+        console.log("Collections have changed", resolvedCollections);
         shouldUpdateTopLevelNav = true;
       }
       if (collectionsRef.current === void 0) {
@@ -15871,7 +15867,7 @@ function _temp$8(t0) {
   return /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "last:border-b-0 border-b"), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
       /* @__PURE__ */ jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "font-mono break-words", color: "secondary", children: key }) }, `table-cell-title-${key}-${key}`),
-      /* @__PURE__ */ jsx("div", { className: "flex-grow max-w-[75%]", children: childValue && "toString" in childValue && /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: childValue.toString() }) }) })
+      /* @__PURE__ */ jsx("div", { className: "flex-grow max-w-[75%]", children: childValue && /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: childValue.toString() }) }) })
     ] }),
     typeof childValue === "object" && /* @__PURE__ */ jsx("div", { className: cls(defaultBorderMixin, "border-l pl-4"), children: /* @__PURE__ */ jsx(KeyValuePreview, { value: childValue }) })
   ] }, `map_preview_table_${key}}`);
@@ -16484,7 +16480,7 @@ function SelectFieldBinding(t0) {
   }
   let t13;
   if ($[20] !== handleClearClick || $[21] !== property.clearable) {
-    t13 = property.clearable && /* @__PURE__ */ jsx(IconButton, { onClick: handleClearClick, children: /* @__PURE__ */ jsx(ClearIcon, {}) });
+    t13 = property.clearable && /* @__PURE__ */ jsx(IconButton, { onClick: handleClearClick, children: /* @__PURE__ */ jsx(CloseIcon, {}) });
     $[20] = handleClearClick;
     $[21] = property.clearable;
     $[22] = t13;
@@ -17329,7 +17325,7 @@ function TextFieldBinding(t0) {
   const t7 = inputType;
   let t8;
   if ($[18] !== handleClearClick || $[19] !== property.clearable) {
-    t8 = property.clearable && /* @__PURE__ */ jsx(IconButton, { onClick: handleClearClick, children: /* @__PURE__ */ jsx(ClearIcon, {}) });
+    t8 = property.clearable && /* @__PURE__ */ jsx(IconButton, { onClick: handleClearClick, children: /* @__PURE__ */ jsx(CloseIcon, {}) });
     $[18] = handleClearClick;
     $[19] = property.clearable;
     $[20] = t8;
@@ -19883,7 +19879,7 @@ const DEFAULT_FIELD_CONFIGS = {
     key: "email",
     name: "Email",
     description: "Text with email validation",
-    Icon: EmailIcon,
+    Icon: MailIcon,
     color: "#154fb3",
     property: {
       dataType: "string",
@@ -22383,7 +22379,7 @@ function DrawerLogo(t0) {
   }
   let t4;
   if ($[3] !== drawerOpen || $[4] !== logo) {
-    t4 = logo ? /* @__PURE__ */ jsx("img", { src: logo, alt: "Logo", className: cls("max-w-full max-h-full", drawerOpen ?? "w-[112px] h-[112px]") }) : /* @__PURE__ */ jsx(FireCMSLogo, {});
+    t4 = logo ? /* @__PURE__ */ jsx("img", { src: logo, alt: "Logo", className: cls("max-w-full max-h-full transition-all", drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]") }) : /* @__PURE__ */ jsx(FireCMSLogo, {});
     $[3] = drawerOpen;
     $[4] = logo;
     $[5] = t4;