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

package/dist/preview/PropertyPreviewProps.d.ts

@@ -2,7 +2,7 @@ import { CMSType, Property, ResolvedProperty } from "../types";
 /**
  * @group Preview components
  */
-export type PreviewSize = "medium" | "small" | "tiny";
+export type PreviewSize = "medium" | "small" | "smallest";
 /**
  * @group Preview components
  */

package/dist/preview/components/EnumValuesChip.d.ts

@@ -3,7 +3,7 @@ import { EnumValues } from "../../types";
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;
     enumKey: string | number;
-    size: "tiny" | "small" | "medium";
+    size: "smallest" | "small" | "medium";
     className?: string;
     children?: React.ReactNode;
 }

package/dist/types/fields.d.ts

@@ -86,6 +86,10 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      * Flag to indicate if this field should be disabled
      */
     disabled?: boolean;
+    /**
+     * Size of the field
+     */
+    size?: "smallest" | "small" | "medium";
 }
 /**
  * Context passed to custom fields
@@ -175,4 +179,8 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
      * Only used when the field is part of an array.
      */
     index?: number;
+    /**
+     * The size of the field
+     */
+    size?: "smallest" | "small" | "medium";
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.104",
+    "version": "3.0.0-canary.106",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,9 +46,9 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/editor": "^3.0.0-canary.104",
-        "@firecms/formex": "^3.0.0-canary.104",
-        "@firecms/ui": "^3.0.0-canary.104",
+        "@firecms/editor": "^3.0.0-canary.106",
+        "@firecms/formex": "^3.0.0-canary.106",
+        "@firecms/ui": "^3.0.0-canary.106",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.1.1",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "df5ac9be9439d01c0acf3666fad83bc87d236eb6",
+    "gitHead": "d9296c344a488a2b711c2a73ff9b66e887ece456",
     "publishConfig": {
         "access": "public"
     },

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -1,14 +1,14 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import equal from "react-fast-compare"
 
-import { ReferencePreview } from "../../../preview";
+import { EmptyValue, ReferencePreview } from "../../../preview";
 import { CollectionSize, Entity, EntityCollection, EntityReference, FilterValues } from "../../../types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
 import { getReferenceFrom } from "../../../util";
 import { useCustomizationController, useNavigationController, useReferenceDialog } from "../../../hooks";
 import { ErrorView } from "../../ErrorView";
-import { Button } from "@firecms/ui";
+import { cls } from "@firecms/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
 
 type TableReferenceFieldProps = {
@@ -124,7 +124,7 @@ export const TableReferenceFieldSuccess = React.memo(
                              key={`preview_array_ref_${name}_${index}`}>
                             <ReferencePreview
                                 onClick={disabled ? undefined : handleOpen}
-                                size={"tiny"}
+                                size={"smallest"}
                                 reference={reference}
                                 hover={!disabled}
                                 disabled={!path}
@@ -151,13 +151,14 @@ export const TableReferenceFieldSuccess = React.memo(
                 {internalValue && multiselect && buildMultipleReferenceField()}
 
                 {valueNotSet &&
-                    <Button
-                        onClick={handleOpen}
-                        size={"small"}
-                        variant="outlined"
-                        color="primary">
+                    <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={"medium"}>
                         Edit {title}
-                    </Button>}
+                    </EntityPreviewContainer>}
 
             </div>
         );

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -419,7 +419,7 @@ export const EntityCollectionView = React.memo(
                                         <ReferencePreview
                                             key={reference.path + "/" + reference.id}
                                             reference={reference}
-                                            size={"tiny"}/>
+                                            size={"smallest"}/>
                                     );
                                 })}
                             </div>

package/src/components/EntityPreview.tsx

@@ -77,17 +77,17 @@ export function EntityPreview({
                                    hover={disabled ? undefined : hover}
                                    size={size}>
         {imageProperty && (
-            <div className={cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start")}>
+            <div className={cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "smallest" ? "my-0.5" : "m-2 self-start")}>
                 <PropertyPreview property={imageProperty}
                                  propertyKey={imagePropertyKey as string}
-                                 size={"tiny"}
+                                 size={"smallest"}
                                  value={getValueInPath(entity.values, imagePropertyKey as string)}/>
             </div>
         )}
 
         <div className={"flex flex-col flex-grow w-full m-1"}>
 
-            {size !== "tiny" && includeId && (
+            {size !== "smallest" && includeId && (
                 entity
                     ? <div className={`${
                         size !== "medium"
@@ -131,10 +131,10 @@ export function EntityPreview({
                                     propertyKey={key as string}
                                     value={getValueInPath(entity.values, key)}
                                     property={childProperty as ResolvedProperty}
-                                    size={"tiny"}/>
+                                    size={"smallest"}/>
                                 : <SkeletonPropertyComponent
                                     property={childProperty as ResolvedProperty}
-                                    size={"tiny"}/>
+                                    size={"smallest"}/>
                         }
                     </div>
                 );
@@ -144,7 +144,7 @@ export function EntityPreview({
 
         {entity && includeEntityLink &&
             <Tooltip title={`See details for ${entity.id}`}
-                     className={size !== "tiny" ? "self-start" : ""}>
+                     className={size !== "smallest" ? "self-start" : ""}>
                 <IconButton
                     color={"inherit"}
                     size={"small"}
@@ -203,7 +203,7 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
             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,

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -16,7 +16,7 @@ import {
 } from "../../hooks";
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
-import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../../util";
+import { canCreateEntity, resolveCollection } from "../../util";
 import { useSelectionController } from "../EntityCollectionView/useSelectionController";
 import { useColumnIds, useTableSearchHelper } from "../common";
 import { useSideDialogContext } from "../../core";
@@ -247,7 +247,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
             error={"Could not find collection with id " + collection}/>
     }
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const resolvedCollection = useMemo(() => resolveCollection({
         collection: collection,
         path: fullPath,
@@ -255,10 +254,8 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         fields: customizationController.propertyConfigs
     }), [collection, customizationController.propertyConfigs, fullPath]);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const displayedColumnIds = useColumnIds(resolvedCollection, false);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const tableController = useDataSourceEntityCollectionTableController<M>({
         fullPath,
         collection,
@@ -272,7 +269,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         onTextSearchClick,
         textSearchEnabled
     } =
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         useTableSearchHelper({
             collection,
             fullPath,

package/src/form/PropertyFieldBinding.tsx

@@ -54,6 +54,10 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     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;
 
@@ -82,6 +86,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
      minimalistView,
      autoFocus,
      index,
+     size
  }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
     const customizationController = useCustomizationController();
@@ -151,7 +156,8 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     disabled,
                     partOfArray,
                     minimalistView,
-                    autoFocus
+                    autoFocus,
+                    size
                 };
 
                 return <FieldInternal
@@ -182,7 +188,8 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
          minimalistView,
          autoFocus,
          context,
-         disabled
+         disabled,
+         size
      },
      fieldProps
  }:
@@ -229,7 +236,6 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
     const cmsFieldProps: FieldProps<T, CustomProps, M> = {
         propertyKey,
         value: value as T,
-        // initialValue,
         setValue,
         setFieldValue,
         error,
@@ -244,7 +250,8 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
         minimalistView: minimalistView ?? false,
         autoFocus: autoFocus ?? false,
         customProps: customFieldProps,
-        context
+        context,
+        size
     };
 
     return (

package/src/form/field_bindings/MultiSelectBinding.tsx

@@ -23,6 +23,7 @@ export function MultiSelectBinding({
                                        disabled,
                                        property,
                                        includeDescription,
+                                       size = "medium",
                                        autoFocus
                                    }: FieldProps<EnumType[], any, any>) {
 
@@ -81,6 +82,7 @@ export function MultiSelectBinding({
     return (
         <div className="mt-0.5 ml-0.5  mt-2">
             <MultiSelect
+                size={size === "medium" ? "medium" : "small"}
                 value={validValue ? value.map((v) => v.toString()) : []}
                 disabled={disabled}
                 label={<LabelWithIcon icon={getIconForProperty(property, "small")}

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -5,10 +5,11 @@ import { useNavigationController, useReferenceDialog } from "../../hooks";
 import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { ErrorView } from "../../components";
-import { ReferencePreview } from "../../preview";
+import { EmptyValue, ReferencePreview } from "../../preview";
 import { getIconForProperty, getReferenceFrom } from "../../util";
-import { Button } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { cls } from "@firecms/ui";
 
 /**
  * Field that opens a reference selection dialog.
@@ -39,7 +40,7 @@ function ReferenceFieldBindingInternal({
                                            autoFocus,
                                            property,
                                            includeDescription,
-                                           context
+                                           size = "medium"
                                        }: FieldProps<EntityReference>) {
     if (!property.path) {
         throw new Error("Property path is required for ReferenceFieldBinding");
@@ -84,9 +85,9 @@ function ReferenceFieldBindingInternal({
     return (
         <>
             {!minimalistView && <LabelWithIcon icon={getIconForProperty(property, "small")}
-                            required={property.validation?.required}
-                            title={property.name}
-                            className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                                               required={property.validation?.required}
+                                               title={property.name}
+                                               className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             {!collection && <ErrorView
                 error={"The specified collection does not exist. Check console"}/>}
@@ -97,7 +98,7 @@ function ReferenceFieldBindingInternal({
                     disabled={!property.path}
                     previewProperties={property.previewProperties}
                     hover={!disabled}
-                    size={"medium"}
+                    size={size}
                     onClick={disabled || isSubmitting ? undefined : onEntryClick}
                     reference={value}
                     includeEntityLink={property.includeEntityLink}
@@ -105,12 +106,15 @@ function ReferenceFieldBindingInternal({
                 />}
 
                 {!value && <div className="justify-center text-left">
-                    <Button variant="outlined"
-                            color="primary"
-                            disabled={disabled || isSubmitting}
-                            onClick={onEntryClick}>
-                        Edit {property.name}
-                    </Button>
+                    <EntityPreviewContainer 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"}>
+                        <EmptyValue/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
                 </div>}
             </>}
 

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -27,7 +27,8 @@ export function SelectFieldBinding<T extends EnumType>({
                                                            autoFocus,
                                                            touched,
                                                            property,
-                                                           includeDescription
+                                                           includeDescription,
+                                                           size = "medium"
                                                        }: SelectProps<T>) {
 
     const enumValues = property.enumValues;
@@ -48,6 +49,7 @@ export function SelectFieldBinding<T extends EnumType>({
         <>
 
             <Select
+                size={size === "medium" ? "medium" : "small"}
                 value={value !== undefined && value != null ? value.toString() : ""}
                 disabled={disabled}
                 position="item-aligned"
@@ -73,7 +75,7 @@ export function SelectFieldBinding<T extends EnumType>({
                     return <EnumValuesChip
                         enumKey={enumKey}
                         enumValues={enumValues}
-                        size={"medium"}/>;
+                        size={size}/>;
                 }}
             >
                 {enumValues && enumValues.map((option) => {
@@ -83,7 +85,7 @@ export function SelectFieldBinding<T extends EnumType>({
                         <EnumValuesChip
                             enumKey={String(option.id)}
                             enumValues={enumValues}
-                            size={"medium"}/>
+                            size={size}/>
                     </SelectItem>
                 })}
             </Select>

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -23,7 +23,7 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
                                                                                    showError,
                                                                                    autoFocus,
                                                                                    disabled,
-                                                                                   touched,
+                                                                                   size = "medium",
                                                                                    property,
                                                                                    includeDescription
                                                                                }: SwitchFieldProps, ref) {
@@ -46,7 +46,7 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
                                       title={property.name}/>}
                 disabled={disabled}
                 autoFocus={autoFocus}
-                size={"large"}
+                size={size}
             />
 
             <FieldHelperText includeDescription={includeDescription}

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -28,6 +28,7 @@ export function TextFieldBinding<T extends string | number>({
                                                                 autoFocus,
                                                                 property,
                                                                 includeDescription,
+                                                                size = "medium"
                                                             }: TextFieldBindingProps<T>) {
 
     let multiline: boolean | undefined;
@@ -70,6 +71,7 @@ export function TextFieldBinding<T extends string | number>({
     return (
         <>
             <TextField
+                size={size}
                 value={value}
                 onChange={onChange}
                 autoFocus={autoFocus}
@@ -100,7 +102,7 @@ export function TextFieldBinding<T extends string | number>({
                 <PropertyPreview
                     value={value}
                     property={property}
-                    size={"medium"}/>
+                    size={size}/>
             </Collapse>}
 
         </>

package/src/preview/PropertyPreviewProps.tsx

@@ -3,7 +3,7 @@ import { CMSType, Property, ResolvedProperty } from "../types";
 /**
  * @group Preview components
  */
-export type PreviewSize = "medium" | "small" | "tiny";
+export type PreviewSize = "medium" | "small" | "smallest";
 
 /**
  * @group Preview components

package/src/preview/components/BooleanPreview.tsx

@@ -21,6 +21,6 @@ export function BooleanPreview({
                   size={size}
                   color={"secondary"}/>
         {property.name && <span
-            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "tiny" ? "text-sm" : "")}>{property.name}</span>}
+            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "smallest" ? "text-sm" : "")}>{property.name}</span>}
     </div>;
 }

package/src/preview/components/EnumValuesChip.tsx

@@ -6,7 +6,7 @@ import { buildEnumLabel, enumToObjectEntries, getColorScheme, getLabelOrConfigFr
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;
     enumKey: string | number;
-    size: "tiny" | "small" | "medium";
+    size: "smallest" | "small" | "medium";
     className?: string;
     children?: React.ReactNode;
 }

package/src/preview/components/ImagePreview.tsx

@@ -22,7 +22,7 @@ export function ImagePreview({
 
     const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
-    if (size === "tiny") {
+    if (size === "smallest") {
         return (
             <img src={url}
                  className={"rounded-md"}

package/src/preview/components/UrlComponentPreview.tsx

@@ -84,7 +84,7 @@ function VideoPreview({
                       }: { size: PreviewSize, src: string, interactive: boolean }) {
 
     const imageSize = useMemo(() => {
-        if (size === "tiny")
+        if (size === "smallest")
             return "140px";
         else if (size === "small")
             return "240px";

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -28,7 +28,7 @@ export function ArrayOfReferencesPreview({
     if (property?.dataType !== "array" || !property.of || property.of.dataType !== "reference")
         throw Error("Picked wrong preview component ArrayOfReferencesPreview");
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     return (
         <div className="flex flex-col w-full">

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -33,7 +33,7 @@ export function ArrayOfStorageComponentsPreview({
     if (property.dataType !== "array" || !property.of || property.of.dataType !== "string")
         throw Error("Picked wrong preview component ArrayOfStorageComponentsPreview");
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     return (
         <div className={"flex flex-wrap gap-2"}>

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -37,7 +37,7 @@ export function ArrayOneOfPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     const typeField = property.oneOf.typeField ?? DEFAULT_ONE_OF_TYPE;
     const valueField = property.oneOf.valueField ?? DEFAULT_ONE_OF_VALUE;

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -37,7 +37,7 @@ export function ArrayPropertyPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     return (
         <div className="flex flex-col gap-2">

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -34,7 +34,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
 
     const mapPropertyKeys: string[] = Object.keys(mapProperty.properties)
 
-    if (size === "tiny")
+    if (size === "smallest")
         return (
             <div className="w-full flex flex-col space-y-1 md:space-y-2">
                 {mapPropertyKeys.map((key, index) => (

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -87,7 +87,7 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
         mapPropertyKeys = (property.previewProperties || Object.keys(property.properties)) as string[];
         if (size === "small")
             mapPropertyKeys = mapPropertyKeys.slice(0, 3);
-        else if (size === "tiny")
+        else if (size === "smallest")
             mapPropertyKeys = mapPropertyKeys.slice(0, 1);
     }
 
@@ -226,7 +226,7 @@ function renderUrlAudioComponent() {
 
 export function renderSkeletonImageThumbnail(size: PreviewSize) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const imageSize = size === "tiny" ? 40 : size === "small" ? 100 : 200;
+    const imageSize = size === "smallest" ? 40 : size === "small" ? 100 : 200;
     return (
         <Skeleton width={imageSize}
                   height={imageSize}/>

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -45,14 +45,14 @@ export function StringPropertyPreview({
         if (!value) return <></>;
         const lines = value.split("\n");
         return value && value.includes("\n")
-            ? <div className={cls("overflow-x-scroll", size === "tiny" ? "text-sm" : "")}>
+            ? <div className={cls("overflow-x-scroll", size === "smallest" ? "text-sm" : "")}>
                 {lines.map((str, index) =>
                     <React.Fragment key={`string_preview_${index}`}>
                         <span>{str}</span>
                         {index !== lines.length - 1 && <br/>}
                     </React.Fragment>)}
             </div>
-            : (size === "tiny"
+            : (size === "smallest"
                     ? <span className={"text-sm"}>{value}</span>
                     : <>{value}</>
             );

package/src/preview/util.ts

@@ -6,7 +6,7 @@ export const SMALL_THUMBNAIL = 100;
 export const REGULAR_THUMBNAIL = 200;
 
 export function getThumbnailMeasure(size: PreviewSize): number {
-    if (size === "tiny")
+    if (size === "smallest")
         return TINY_THUMBNAIL;
     else if (size === "small")
         return SMALL_THUMBNAIL;
@@ -19,7 +19,7 @@ export function getPreviewSizeFrom(size: CollectionSize): PreviewSize {
     switch (size) {
         case "xs":
         case "s":
-            return "tiny";
+            return "smallest";
         case "m":
             return "small";
         case "l":

package/src/types/fields.tsx

@@ -105,6 +105,11 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      */
     disabled?: boolean;
 
+    /**
+     * Size of the field
+     */
+    size?: "smallest" | "small" | "medium";
+
 }
 
 /**
@@ -213,4 +218,9 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
      * Only used when the field is part of an array.
      */
     index?: number;
+
+    /**
+     * The size of the field
+     */
+    size?: "smallest" | "small" | "medium",
 }