@firecms/core 3.0.0-canary.104 → 3.0.0-canary.106

package/dist/form/PropertyFieldBinding.d.ts

@@ -26,5 +26,5 @@ import { CMSType, PropertyFieldBindingProps } from "../types";
  * @group Form custom fields
  */
 export declare const PropertyFieldBinding: typeof PropertyFieldBindingInternal;
-declare function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>>({ propertyKey, property, context, includeDescription, underlyingValueHasChanged, disabled, partOfArray, minimalistView, autoFocus, index, }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>>;
+declare function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>>({ propertyKey, property, context, includeDescription, underlyingValueHasChanged, disabled, partOfArray, minimalistView, autoFocus, index, size }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>>;
 export {};

package/dist/form/field_bindings/MultiSelectBinding.d.ts

@@ -6,4 +6,4 @@ import { EnumType, FieldProps } from "../../types";
  * and tables to the specified properties.
  * @group Form fields
  */
-export declare function MultiSelectBinding({ propertyKey, value, setValue, error, showError, disabled, property, includeDescription, autoFocus }: FieldProps<EnumType[], any, any>): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelectBinding({ propertyKey, value, setValue, error, showError, disabled, property, includeDescription, size, autoFocus }: FieldProps<EnumType[], any, any>): import("react/jsx-runtime").JSX.Element;

package/dist/form/field_bindings/SelectFieldBinding.d.ts

@@ -8,5 +8,5 @@ type SelectProps<T extends EnumType> = FieldProps<T>;
  * and tables to the specified properties.
  * @group Form fields
  */
-export declare function SelectFieldBinding<T extends EnumType>({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, includeDescription }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function SelectFieldBinding<T extends EnumType>({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, includeDescription, size }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/form/field_bindings/TextFieldBinding.d.ts

@@ -8,5 +8,5 @@ interface TextFieldBindingProps<T extends string | number> extends FieldProps<T>
  * and tables to the specified properties.
  * @group Form fields
  */
-export declare function TextFieldBinding<T extends string | number>({ context, propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, }: TextFieldBindingProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TextFieldBinding<T extends string | number>({ context, propertyKey, value, setValue, error, showError, disabled, autoFocus, property, includeDescription, size }: TextFieldBindingProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.es.js

@@ -4,7 +4,7 @@ import React__default, { useRef, useEffect, useContext, useCallback, useMemo, us
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
 import { useCreateFormex, Formex, setIn, Field, getIn, useFormex } from "@firecms/formex";
-import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, ErrorIcon, Typography, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, Markdown, TextareaAutosize, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, ErrorOutlineIcon, EditIcon, Button, RemoveCircleIcon, Menu, MoreVertIcon, MenuItem, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, AssignmentIcon, CenteredView, Label, TextField, ClearIcon, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogContent, DialogActions, FileCopyIcon, ArchiveIcon, DeleteIcon, AddIcon, ExpandablePanel, Card, ArrowForwardIcon, cardMixin, cardClickableMixin, focusedMixin, StarIcon, StarBorderIcon, Collapse, Container, FilterListOffIcon, SearchIcon, LoadingButton, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, fieldBackgroundHoverMixin, HandleIcon, RemoveIcon, debounce, InfoIcon, CloseIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, ArrowDropDownIcon, Paper, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, EmailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, NotesIcon, Tab, Tabs, Alert, Sheet, useLocaleConfig, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
+import { getColorSchemeForSeed, CHIP_COLORS, Tooltip, ErrorIcon, Typography, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, Markdown, TextareaAutosize, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, ErrorOutlineIcon, EditIcon, RemoveCircleIcon, Menu, MoreVertIcon, MenuItem, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, AssignmentIcon, CenteredView, Label, TextField, ClearIcon, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogContent, DialogActions, FileCopyIcon, ArchiveIcon, DeleteIcon, AddIcon, ExpandablePanel, Card, ArrowForwardIcon, cardMixin, cardClickableMixin, focusedMixin, StarIcon, StarBorderIcon, Collapse, Container, FilterListOffIcon, SearchIcon, LoadingButton, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, fieldBackgroundHoverMixin, HandleIcon, RemoveIcon, debounce, InfoIcon, CloseIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, ArrowDropDownIcon, Paper, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, EmailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, NotesIcon, Tab, Tabs, Alert, Sheet, useLocaleConfig, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import equal from "react-fast-compare";
 import { Link, useNavigate, useLocation, UNSAFE_NavigationContext, NavLink, Route, Routes } from "react-router-dom";
 import { format } from "date-fns";
@@ -4515,7 +4515,7 @@ const TINY_THUMBNAIL = 40;
 const SMALL_THUMBNAIL = 100;
 const REGULAR_THUMBNAIL = 200;
 function getThumbnailMeasure(size) {
-  if (size === "tiny")
+  if (size === "smallest")
     return TINY_THUMBNAIL;
   else if (size === "small")
     return SMALL_THUMBNAIL;
@@ -4527,7 +4527,7 @@ function getPreviewSizeFrom(size) {
   switch (size) {
     case "xs":
     case "s":
-      return "tiny";
+      return "smallest";
     case "m":
       return "small";
     case "l":
@@ -4542,7 +4542,7 @@ function ImagePreview({
   url
 }) {
   const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
-  if (size === "tiny") {
+  if (size === "smallest") {
     return /* @__PURE__ */ jsx(
       "img",
       {
@@ -4710,7 +4710,7 @@ function VideoPreview({
   interactive
 }) {
   const imageSize = useMemo(() => {
-    if (size === "tiny")
+    if (size === "smallest")
       return "140px";
     else if (size === "small")
       return "240px";
@@ -4802,7 +4802,7 @@ function renderMap(property, size) {
     mapPropertyKeys = property.previewProperties || Object.keys(property.properties);
     if (size === "small")
       mapPropertyKeys = mapPropertyKeys.slice(0, 3);
-    else if (size === "tiny")
+    else if (size === "smallest")
       mapPropertyKeys = mapPropertyKeys.slice(0, 1);
   }
   if (size !== "medium")
@@ -4907,7 +4907,7 @@ function renderGenericArrayCell(property, index = 0) {
   );
 }
 function renderSkeletonImageThumbnail(size) {
-  const imageSize = size === "tiny" ? 40 : size === "small" ? 100 : 200;
+  const imageSize = size === "smallest" ? 40 : size === "small" ? 100 : 200;
   return /* @__PURE__ */ jsx(
     Skeleton,
     {
@@ -5072,10 +5072,10 @@ function StringPropertyPreview({
   } else {
     if (!value) return /* @__PURE__ */ jsx(Fragment, {});
     const lines = value.split("\n");
-    return value && value.includes("\n") ? /* @__PURE__ */ jsx("div", { className: cls("overflow-x-scroll", size === "tiny" ? "text-sm" : ""), children: lines.map((str, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+    return value && value.includes("\n") ? /* @__PURE__ */ jsx("div", { className: cls("overflow-x-scroll", size === "smallest" ? "text-sm" : ""), children: lines.map((str, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
       /* @__PURE__ */ jsx("span", { children: str }),
       index !== lines.length - 1 && /* @__PURE__ */ jsx("br", {})
-    ] }, `string_preview_${index}`)) }) : size === "tiny" ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: value }) : /* @__PURE__ */ jsx(Fragment, { children: value });
+    ] }, `string_preview_${index}`)) }) : size === "smallest" ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: value }) : /* @__PURE__ */ jsx(Fragment, { children: value });
   }
 }
 function ArrayPropertyPreview({
@@ -5098,7 +5098,7 @@ function ArrayPropertyPreview({
     throw Error("Picked wrong preview component ArrayPreview");
   const values = value;
   if (!values) return null;
-  const childSize = size === "medium" ? "small" : "tiny";
+  const childSize = size === "medium" ? "small" : "smallest";
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: values && values.map(
     (value2, index) => {
       const of = property.resolvedProperties[index] ?? (property.resolvedProperties[index] ?? (Array.isArray(property.of) ? property.of[index] : property.of));
@@ -5161,17 +5161,17 @@ function EntityPreview({
       hover: disabled ? void 0 : hover,
       size,
       children: [
-        imageProperty && /* @__PURE__ */ jsx("div", { className: cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start"), children: /* @__PURE__ */ jsx(
+        imageProperty && /* @__PURE__ */ jsx("div", { className: cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "smallest" ? "my-0.5" : "m-2 self-start"), children: /* @__PURE__ */ jsx(
           PropertyPreview,
           {
             property: imageProperty,
             propertyKey: imagePropertyKey,
-            size: "tiny",
+            size: "smallest",
             value: getValueInPath(entity.values, imagePropertyKey)
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-grow w-full m-1", children: [
-          size !== "tiny" && includeId && (entity ? /* @__PURE__ */ jsx("div", { className: `${size !== "medium" ? "block whitespace-nowrap overflow-hidden truncate" : ""}`, children: /* @__PURE__ */ jsx(
+          size !== "smallest" && includeId && (entity ? /* @__PURE__ */ jsx("div", { className: `${size !== "medium" ? "block whitespace-nowrap overflow-hidden truncate" : ""}`, children: /* @__PURE__ */ jsx(
             Typography,
             {
               variant: "caption",
@@ -5208,13 +5208,13 @@ function EntityPreview({
                     propertyKey: key,
                     value: getValueInPath(entity.values, key),
                     property: childProperty,
-                    size: "tiny"
+                    size: "smallest"
                   }
                 ) : /* @__PURE__ */ jsx(
                   SkeletonPropertyComponent,
                   {
                     property: childProperty,
-                    size: "tiny"
+                    size: "smallest"
                   }
                 )
               },
@@ -5226,7 +5226,7 @@ function EntityPreview({
           Tooltip,
           {
             title: `See details for ${entity.id}`,
-            className: size !== "tiny" ? "self-start" : "",
+            className: size !== "smallest" ? "self-start" : "",
             children: /* @__PURE__ */ jsx(
               IconButton,
               {
@@ -5280,7 +5280,7 @@ const EntityPreviewContainerInner = React.forwardRef(({
         fullwidth ? "w-full" : "",
         "items-center",
         hover ? "hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800" : "",
-        size === "tiny" ? "p-1" : "p-2",
+        size === "smallest" ? "p-1" : "p-2",
         "flex border rounded-lg",
         onClick ? "cursor-pointer" : "",
         defaultBorderMixin,
@@ -5461,7 +5461,7 @@ function ArrayOfReferencesPreview({
   }
   if (property?.dataType !== "array" || !property.of || property.of.dataType !== "reference")
     throw Error("Picked wrong preview component ArrayOfReferencesPreview");
-  const childSize = size === "medium" ? "small" : "tiny";
+  const childSize = size === "medium" ? "small" : "smallest";
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col w-full", children: value && value.map(
     (reference, index) => {
       const ofProperty = property.of;
@@ -5504,7 +5504,7 @@ function ArrayOfStorageComponentsPreview({
   }
   if (property.dataType !== "array" || !property.of || property.of.dataType !== "string")
     throw Error("Picked wrong preview component ArrayOfStorageComponentsPreview");
-  const childSize = size === "medium" ? "small" : "tiny";
+  const childSize = size === "medium" ? "small" : "smallest";
   return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: value && value.map(
     (v, index) => /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(
       PropertyPreview,
@@ -5618,7 +5618,7 @@ function ArrayOneOfPreview({
   }
   const values = value;
   if (!values) return null;
-  const childSize = size === "medium" ? "small" : "tiny";
+  const childSize = size === "medium" ? "small" : "smallest";
   const typeField = property.oneOf.typeField ?? DEFAULT_ONE_OF_TYPE;
   const valueField = property.oneOf.valueField ?? DEFAULT_ONE_OF_VALUE;
   const properties = property.oneOf.properties;
@@ -5656,7 +5656,7 @@ function MapPropertyPreview({
   }
   if (!value) return null;
   const mapPropertyKeys = Object.keys(mapProperty.properties);
-  if (size === "tiny")
+  if (size === "smallest")
     return /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col space-y-1 md:space-y-2", children: mapPropertyKeys.map((key, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
       ErrorBoundary,
       {
@@ -5816,7 +5816,7 @@ function BooleanPreview({
     property.name && /* @__PURE__ */ jsx(
       "span",
       {
-        className: cls("text-text-secondary dark:text-text-secondary-dark", size === "tiny" ? "text-sm" : ""),
+        className: cls("text-text-secondary dark:text-text-secondary-dark", size === "smallest" ? "text-sm" : ""),
         children: property.name
       }
     )
@@ -7213,7 +7213,7 @@ const TableReferenceFieldSuccess = React__default.memo(
                 ReferencePreview,
                 {
                   onClick: disabled ? void 0 : handleOpen,
-                  size: "tiny",
+                  size: "smallest",
                   reference,
                   hover: !disabled,
                   disabled: !path,
@@ -7235,12 +7235,14 @@ const TableReferenceFieldSuccess = React__default.memo(
       internalValue && !multiselect && buildSingleReferenceField(),
       internalValue && multiselect && buildMultipleReferenceField(),
       valueNotSet && /* @__PURE__ */ jsxs(
-        Button,
+        EntityPreviewContainer,
         {
+          className: cls(
+            "p-4 text-sm font-medium flex items-center gap-4 uppercase",
+            disabled ? "text-slate-500" : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800"
+          ),
           onClick: handleOpen,
-          size: "small",
-          variant: "outlined",
-          color: "primary",
+          size: "medium",
           children: [
             "Edit ",
             title
@@ -10999,13 +11001,10 @@ function ReferenceSelectionTable({
     textSearchInitialised,
     onTextSearchClick,
     textSearchEnabled
-  } = (
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useTableSearchHelper({
-      collection,
-      fullPath
-    })
-  );
+  } = useTableSearchHelper({
+    collection,
+    fullPath
+  });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsx("div", { className: "flex-grow", children: entitiesDisplayedFirst && /* @__PURE__ */ jsx(
       EntityCollectionTable,
@@ -12446,7 +12445,7 @@ const EntityCollectionView = React__default.memo(
               ReferencePreview,
               {
                 reference,
-                size: "tiny"
+                size: "smallest"
               },
               reference.path + "/" + reference.id
             );
@@ -13767,7 +13766,8 @@ function SelectFieldBinding({
   autoFocus,
   touched,
   property,
-  includeDescription
+  includeDescription,
+  size = "medium"
 }) {
   const enumValues = property.enumValues;
   useClearRestoreValue({
@@ -13784,6 +13784,7 @@ function SelectFieldBinding({
     /* @__PURE__ */ jsx(
       Select,
       {
+        size: size === "medium" ? "medium" : "small",
         value: value !== void 0 && value != null ? value.toString() : "",
         disabled,
         position: "item-aligned",
@@ -13814,7 +13815,7 @@ function SelectFieldBinding({
             {
               enumKey,
               enumValues,
-              size: "medium"
+              size
             }
           );
         },
@@ -13828,7 +13829,7 @@ function SelectFieldBinding({
                 {
                   enumKey: String(option.id),
                   enumValues,
-                  size: "medium"
+                  size
                 }
               )
             },
@@ -13858,6 +13859,7 @@ function MultiSelectBinding({
   disabled,
   property,
   includeDescription,
+  size = "medium",
   autoFocus
 }) {
   const of = property.of;
@@ -13916,6 +13918,7 @@ function MultiSelectBinding({
     /* @__PURE__ */ jsx(
       MultiSelect,
       {
+        size: size === "medium" ? "medium" : "small",
         value: validValue ? value.map((v) => v.toString()) : [],
         disabled,
         label: /* @__PURE__ */ jsx(
@@ -14525,7 +14528,8 @@ function TextFieldBinding({
   disabled,
   autoFocus,
   property,
-  includeDescription
+  includeDescription,
+  size = "medium"
 }) {
   let multiline;
   let url;
@@ -14563,6 +14567,7 @@ function TextFieldBinding({
     /* @__PURE__ */ jsx(
       TextField,
       {
+        size,
         value,
         onChange,
         autoFocus,
@@ -14608,7 +14613,7 @@ function TextFieldBinding({
           {
             value,
             property,
-            size: "medium"
+            size
           }
         )
       }
@@ -14623,7 +14628,7 @@ const SwitchFieldBinding = React__default.forwardRef(function SwitchFieldBinding
   showError,
   autoFocus,
   disabled,
-  touched,
+  size = "medium",
   property,
   includeDescription
 }, ref) {
@@ -14649,7 +14654,7 @@ const SwitchFieldBinding = React__default.forwardRef(function SwitchFieldBinding
         ),
         disabled,
         autoFocus,
-        size: "large"
+        size
       }
     ),
     /* @__PURE__ */ jsx(
@@ -14783,7 +14788,7 @@ function ReferenceFieldBindingInternal({
   autoFocus,
   property,
   includeDescription,
-  context
+  size = "medium"
 }) {
   if (!property.path) {
     throw new Error("Property path is required for ReferenceFieldBinding");
@@ -14841,7 +14846,7 @@ function ReferenceFieldBindingInternal({
           disabled: !property.path,
           previewProperties: property.previewProperties,
           hover: !disabled,
-          size: "medium",
+          size,
           onClick: disabled || isSubmitting ? void 0 : onEntryClick,
           reference: value,
           includeEntityLink: property.includeEntityLink,
@@ -14849,15 +14854,17 @@ function ReferenceFieldBindingInternal({
         }
       ),
       !value && /* @__PURE__ */ jsx("div", { className: "justify-center text-left", children: /* @__PURE__ */ jsxs(
-        Button,
+        EntityPreviewContainer,
         {
-          variant: "outlined",
-          color: "primary",
-          disabled: disabled || isSubmitting,
+          className: cls(
+            "px-6 h-16 text-sm font-medium flex items-center gap-6",
+            disabled || isSubmitting ? "text-slate-500" : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800"
+          ),
           onClick: onEntryClick,
+          size: "medium",
           children: [
-            "Edit ",
-            property.name
+            /* @__PURE__ */ jsx(EmptyValue, {}),
+            `Edit ${property.name}`.toUpperCase()
           ]
         }
       ) })
@@ -14881,6 +14888,9 @@ const PropertyFieldBinding = React__default.memo(PropertyFieldBindingInternal, (
   if (a.index !== b.index) {
     return false;
   }
+  if (a.size !== b.size) {
+    return false;
+  }
   const aIsBuilder = isPropertyBuilder(a.property) || a.property.fromBuilder;
   const bIsBuilder = isPropertyBuilder(b.property) || b.property.fromBuilder;
   const baseCheck = (aIsBuilder === bIsBuilder || equal(a.property, b.property)) && a.disabled === b.disabled;
@@ -14902,7 +14912,8 @@ function PropertyFieldBindingInternal({
   partOfArray,
   minimalistView,
   autoFocus,
-  index
+  index,
+  size
 }) {
   const customizationController = useCustomizationController();
   return /* @__PURE__ */ jsx(
@@ -14964,7 +14975,8 @@ function PropertyFieldBindingInternal({
           disabled,
           partOfArray,
           minimalistView,
-          autoFocus
+          autoFocus,
+          size
         };
         return /* @__PURE__ */ jsx(
           FieldInternal,
@@ -14990,7 +15002,8 @@ function FieldInternal({
     minimalistView,
     autoFocus,
     context,
-    disabled
+    disabled,
+    size
   },
   fieldProps
 }) {
@@ -15021,7 +15034,6 @@ function FieldInternal({
   const cmsFieldProps = {
     propertyKey,
     value,
-    // initialValue,
     setValue,
     setFieldValue,
     error,
@@ -15036,7 +15048,8 @@ function FieldInternal({
     minimalistView: minimalistView ?? false,
     autoFocus: autoFocus ?? false,
     customProps: customFieldProps,
-    context
+    context,
+    size
   };
   return /* @__PURE__ */ jsxs(ErrorBoundary, { children: [
     /* @__PURE__ */ jsx(UsedComponent, { ...cmsFieldProps }),