@firecms/core 3.0.0-canary.150 → 3.0.0-canary.152

package/dist/preview/PropertyPreviewProps.d.ts

@@ -2,7 +2,7 @@ import { CMSType, Property, ResolvedProperty } from "../types";
 /**
  * @group Preview components
  */
-export type PreviewSize = "medium" | "small" | "smallest";
+export type PreviewSize = "large" | "medium" | "small";
 /**
  * @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: "smallest" | "small" | "medium";
+    size: "small" | "medium" | "large";
     className?: string;
     children?: React.ReactNode;
 }

package/dist/preview/util.d.ts

@@ -1,7 +1,7 @@
 import { CollectionSize } from "../types";
 import { PreviewSize } from "./PropertyPreviewProps";
-export declare const TINY_THUMBNAIL = 40;
-export declare const SMALL_THUMBNAIL = 100;
-export declare const REGULAR_THUMBNAIL = 200;
+export declare const SMALL_THUMBNAIL = 40;
+export declare const MEDIUM_THUMBNAIL = 100;
+export declare const LARGE_THUMBNAIL = 200;
 export declare function getThumbnailMeasure(size: PreviewSize): number;
 export declare function getPreviewSizeFrom(size: CollectionSize): PreviewSize;

package/dist/types/fields.d.ts

@@ -89,7 +89,7 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     /**
      * Size of the field
      */
-    size?: "smallest" | "small" | "medium";
+    size?: "small" | "medium" | "large";
     /**
      * Some properties might change internal state (like expanding a panel).
      * This function should be called when the internal state changes.
@@ -190,7 +190,7 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
     /**
      * The size of the field
      */
-    size?: "smallest" | "small" | "medium";
+    size?: "small" | "medium" | "large";
     /**
      * Some properties might change internal state (like expanding a panel).
      * This function should be called when the internal state changes.

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.150",
+    "version": "3.0.0-canary.152",
     "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.150",
-        "@firecms/formex": "^3.0.0-canary.150",
-        "@firecms/ui": "^3.0.0-canary.150",
+        "@firecms/editor": "^3.0.0-canary.152",
+        "@firecms/formex": "^3.0.0-canary.152",
+        "@firecms/ui": "^3.0.0-canary.152",
         "@hello-pangea/dnd": "^17.0.0",
         "@radix-ui/react-portal": "^1.1.2",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "4df9d54d1bd70b5b5823d797bc2ce6b6c34cf051",
+    "gitHead": "be8e639101ee20faccf85a5b0225a7ead151d2d9",
     "publishConfig": {
         "access": "public"
     },

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

@@ -123,7 +123,7 @@ export const TableReferenceFieldInternal = React.memo(
                              key={`preview_array_ref_${name}_${index}`}>
                             <ReferencePreview
                                 onClick={disabled ? undefined : handleOpen}
-                                size={"smallest"}
+                                size={"small"}
                                 reference={reference}
                                 hover={!disabled}
                                 disabled={!path}

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -56,7 +56,7 @@ export function CollectionTableToolbar({
             <Select
                 value={size as string}
                 className="w-16 h-10"
-                size={"small"}
+                size={"medium"}
                 onValueChange={(v) => onSizeChanged(v as CollectionSize)}
                 renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
             >

package/src/components/EntityCollectionView/EntityCollectionView.tsx

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

package/src/components/EntityPreview.tsx

@@ -65,7 +65,7 @@ export function EntityPreview({
         propertyConfigs: customizationController.propertyConfigs
     }), [collection]);
 
-    const listProperties = useMemo(() => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
+    const listProperties = useMemo(() => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1),
         [previewProperties, resolvedCollection, size]);
 
     const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
@@ -77,10 +77,10 @@ export function EntityPreview({
     return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                                    hover={disabled ? undefined : hover}
                                    size={size}>
-        <div className={cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "smallest" ? "my-0.5" : "m-2 self-start")}>
+        <div className={cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "small" ? "my-0.5" : "m-2 self-start")}>
             {imageProperty && <PropertyPreview property={imageProperty}
                                                propertyKey={imagePropertyKey as string}
-                                               size={"smallest"}
+                                               size={"small"}
                                                value={getValueInPath(entity.values, imagePropertyKey as string)}/>}
             {!imageProperty && <IconForView collectionOrView={collection}
                                             color={"primary"}
@@ -91,10 +91,10 @@ export function EntityPreview({
 
         <div className={"flex flex-col grow-1 w-full max-w-full m-1"}>
 
-            {size !== "smallest" && includeId && (
+            {size !== "small" && includeId && (
                 entity
                     ? <div className={`${
-                        size !== "medium"
+                        size !== "large"
                             ? "block whitespace-nowrap overflow-hidden truncate"
                             : ""
                     }`}>
@@ -107,17 +107,17 @@ export function EntityPreview({
                     : <Skeleton/>)}
 
             {titleProperty && (
-                <div className={"my-0.5 text-sm font-medium"}>
+                <div className={"my-0.5 text-sm font-large"}>
                     {
                         entity
                             ? <PropertyPreview
                                 propertyKey={titleProperty as string}
                                 value={getValueInPath(entity.values, titleProperty)}
                                 property={resolvedCollection.properties[titleProperty as string] as ResolvedProperty}
-                                size={"medium"}/>
+                                size={"large"}/>
                             : <SkeletonPropertyComponent
                                 property={resolvedCollection.properties[titleProperty as string] as ResolvedProperty}
-                                size={"medium"}/>
+                                size={"large"}/>
                     }
                 </div>
             )}
@@ -135,10 +135,10 @@ export function EntityPreview({
                                     propertyKey={key as string}
                                     value={getValueInPath(entity.values, key)}
                                     property={childProperty as ResolvedProperty}
-                                    size={"smallest"}/>
+                                    size={"small"}/>
                                 : <SkeletonPropertyComponent
                                     property={childProperty as ResolvedProperty}
-                                    size={"smallest"}/>
+                                    size={"small"}/>
                         }
                     </div>
                 );
@@ -150,8 +150,8 @@ export function EntityPreview({
             <Tooltip title={`See details for ${entity.id}`}>
                 <IconButton
                     color={"inherit"}
-                    size={"small"}
-                    className={size !== "smallest" ? "self-start" : ""}
+                    size={"medium"}
+                    className={size !== "small" ? "self-start" : ""}
                     onClick={(e) => {
                         e.stopPropagation();
                         analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
@@ -165,7 +165,7 @@ export function EntityPreview({
                             updateUrl: true
                         });
                     }}>
-                    <KeyboardTabIcon size={"small"}/>
+                    <KeyboardTabIcon size={"medium"}/>
                 </IconButton>
             </Tooltip>}
 
@@ -207,7 +207,7 @@ export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPre
             fullwidth ? "w-full" : "",
             "items-center",
             hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
-            size === "smallest" ? "p-1" : "px-2 py-1",
+            size === "small" ? "p-1" : "px-2 py-1",
             "flex border rounded-lg",
             onClick ? "cursor-pointer" : "",
             defaultBorderMixin,

package/src/components/SelectableTable/filters/DateTimeFilterField.tsx

@@ -76,6 +76,7 @@ export function DateTimeFilterField({
         <div className="flex w-[440px]">
             <div className="w-[80px]">
                 <Select value={operation}
+                        size={"large"}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                         }}
@@ -92,7 +93,7 @@ export function DateTimeFilterField({
 
                 <DateTimeField
                     mode={mode}
-                    size={"medium"}
+                    size={"large"}
                     locale={locale}
                     value={internalValue ?? undefined}
                     onChange={(dateValue: Date | null) => {

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -147,6 +147,7 @@ export function ReferenceFilterField({
         <div className="flex w-[440px] flex-row">
             <div className="w-[140px]">
                 <Select value={operation}
+                        size={"large"}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
                         }}

package/src/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -26,7 +26,7 @@ export function VirtualTableDateField(props: {
         <DateTimeField
             value={internalValue ?? undefined}
             onChange={(dateValue) => updateValue(dateValue ?? null)}
-            size={"medium"}
+            size={"large"}
             invisible={true}
             inputClassName={cls("w-full h-full", focusedDisabled)}
             className={cls("w-full h-full", focusedDisabled)}

package/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -91,6 +91,7 @@ export function VirtualTableSelect(props: {
             </MultiSelect>
             : <Select
                 inputRef={ref}
+                size={"large"}
                 className="w-full h-full p-0 bg-transparent"
                 position={"item-aligned"}
                 disabled={disabled}

package/src/form/components/CustomIdField.tsx

@@ -100,6 +100,7 @@ export function CustomIdField<M extends Record<string, any>>({
 
             {enumValues &&
                 <Select
+                    size={"large"}
                     error={error}
                     onValueChange={(v) => onChange(v as string)}
                     {...fieldProps}

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -225,7 +225,7 @@ function BlockEntry({
                                 className="mb-2"
                                 placeholder={<Typography variant={"caption"}
                                                          className={"px-4 py-2 font-medium"}>Type</Typography>}
-                                size={"small"}
+                                size={"medium"}
                                 position={"item-aligned"}
                                 value={value1}
                                 renderValue={(enumKey: any) =>

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -46,7 +46,7 @@ export function DateTimeFieldBinding({
                 <DateTimeField
                     value={internalValue}
                     onChange={(dateValue) => setValue(dateValue)}
-                    size={"medium"}
+                    size={"large"}
                     mode={property.mode}
                     clearable={property.clearable}
                     locale={locale}

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -270,7 +270,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 placeholder={"value"}
                 value={entryValue}
                 type={dataType === "number" ? "number" : "text"}
-                size={"small"}
+                size={"medium"}
                 disabled={disabled || !fieldKey}
                 onChange={(event) => {
                     if (dataType === "number") {
@@ -300,7 +300,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 }}/>;
         } else if (dataType === "date") {
             return <DateTimeField value={entryValue}
-                                  size={"small"}
+                                  size={"medium"}
                                   locale={locale}
                                   disabled={disabled || !fieldKey}
                                   onChange={(date) => {
@@ -311,7 +311,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                   }}/>;
         } else if (dataType === "boolean") {
             return <BooleanSwitchWithLabel value={entryValue}
-                                           size={"small"}
+                                           size={"medium"}
                                            position={"start"}
                                            disabled={disabled || !fieldKey}
                                            onValueChange={(newValue) => {
@@ -389,7 +389,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                         value={fieldKey}
                         placeholder={"key"}
                         disabled={disabled || (entryValue !== undefined && entryValue !== null && entryValue !== "")}
-                        size={"small"}
+                        size={"medium"}
                         onChange={(event) => {
                             onFieldKeyChange(event.target.value);
                         }}/>
@@ -457,7 +457,7 @@ function ArrayKeyValueRow<T>({
         if (dataType === "string" || dataType === "number") {
             return <TextField value={entryValue}
                               type={dataType === "number" ? "number" : "text"}
-                              size={"small"}
+                              size={"medium"}
                               onChange={(event) => {
                                   if (dataType === "number") {
                                       const numberValue = event.target.value ? parseFloat(event.target.value) : undefined;
@@ -474,7 +474,7 @@ function ArrayKeyValueRow<T>({
                               }}/>;
         } else if (dataType === "date") {
             return <DateTimeField value={entryValue}
-                                  size={"small"}
+                                  size={"medium"}
                                   locale={locale}
                                   onChange={(date) => {
                                       setValue(date as T);

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -145,6 +145,7 @@ const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue
         <InputLabel>Add property</InputLabel>
         <Select
             value={""}
+            size={"large"}
             disabled={disabled}
             onValueChange={handleAddProperty}
             renderValue={(key) => (properties as Properties)[key].name || key}>

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -29,7 +29,7 @@ export function SelectFieldBinding<T extends EnumType>({
                                                            touched,
                                                            property,
                                                            includeDescription,
-                                                           size = "medium"
+                                                           size = "large"
                                                        }: SelectProps<T>) {
 
     const enumValues = resolveEnumValues(property.enumValues ?? []);
@@ -50,9 +50,9 @@ export function SelectFieldBinding<T extends EnumType>({
         <>
 
             <Select
-                size={size === "medium" ? "medium" : "small"}
                 value={value !== undefined && value != null ? value.toString() : ""}
                 disabled={disabled}
+                size={size}
                 position="item-aligned"
                 inputClassName={cls("w-full")}
                 label={

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -28,7 +28,7 @@ export function TextFieldBinding<T extends string | number>({
                                                                 autoFocus,
                                                                 property,
                                                                 includeDescription,
-                                                                size = "medium"
+                                                                size = "large"
                                                             }: TextFieldBindingProps<T>) {
 
     let multiline: boolean | undefined;

package/src/preview/PropertyPreviewProps.tsx

@@ -3,7 +3,7 @@ import { CMSType, Property, ResolvedProperty } from "../types";
 /**
  * @group Preview components
  */
-export type PreviewSize = "medium" | "small" | "smallest";
+export type PreviewSize = "large" | "medium" | "small";
 
 /**
  * @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 === "smallest" ? "text-sm" : "")}>{property.name}</span>}
+            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "small" ? "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: "smallest" | "small" | "medium";
+    size: "small" | "medium" | "large";
     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 === "smallest") {
+    if (size === "small") {
         return (
             <img src={url}
                  className={"rounded-md"}

package/src/preview/components/UrlComponentPreview.tsx

@@ -84,11 +84,11 @@ function VideoPreview({
                       }: { size: PreviewSize, src: string, interactive: boolean }) {
 
     const imageSize = useMemo(() => {
-        if (size === "smallest")
+        if (size === "small")
             return "140px";
-        else if (size === "small")
-            return "240px";
         else if (size === "medium")
+            return "240px";
+        else if (size === "large")
             return "100%";
         else throw new Error("Invalid size");
     }, [size]);

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" : "smallest";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     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" : "smallest";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     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" : "smallest";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     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" : "smallest";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     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 === "smallest")
+    if (size === "small")
         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

@@ -81,17 +81,17 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
         return <></>;
 
     let mapPropertyKeys: string[];
-    if (size === "medium") {
+    if (size === "large") {
         mapPropertyKeys = Object.keys(property.properties);
     } else {
         mapPropertyKeys = (property.previewProperties || Object.keys(property.properties)) as string[];
-        if (size === "small")
+        if (size === "medium")
             mapPropertyKeys = mapPropertyKeys.slice(0, 3);
-        else if (size === "smallest")
+        else if (size === "small")
             mapPropertyKeys = mapPropertyKeys.slice(0, 1);
     }
 
-    if (size !== "medium")
+    if (size !== "large")
         return (
             <div
                 className="w-full flex flex-col space-y-4"
@@ -101,7 +101,7 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
                         {property.properties && property.properties[key] &&
                             <SkeletonPropertyComponent
                                 property={property.properties[key]}
-                                size={"small"}/>}
+                                size={"medium"}/>}
                     </div>
                 ))}
             </div>
@@ -128,7 +128,7 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
                                 {property.properties && property.properties[key] &&
                                     <SkeletonPropertyComponent
                                         property={property.properties[key]}
-                                        size={"small"}/>}
+                                        size={"medium"}/>}
                             </th>
                         </tr>
                     );
@@ -160,7 +160,7 @@ function renderArrayOfMaps<M extends Record<string, any>>(properties: ResolvedPr
                                     >
                                         <SkeletonPropertyComponent
                                             property={(properties)[key]}
-                                            size={"small"}/>
+                                            size={"medium"}/>
                                     </th>
                                 )
                             )}
@@ -210,7 +210,7 @@ function renderGenericArrayCell(
                     <>
                         <SkeletonPropertyComponent key={`i_${index}`}
                                                    property={property}
-                                                   size={"small"}/>
+                                                   size={"medium"}/>
                     </>
                 )}
         </div>
@@ -226,7 +226,7 @@ function renderUrlAudioComponent() {
 
 export function renderSkeletonImageThumbnail(size: PreviewSize) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const imageSize = size === "smallest" ? 40 : size === "small" ? 100 : 200;
+    const imageSize = size === "small" ? 40 : size === "medium" ? 100 : 200;
     return (
         <Skeleton width={imageSize}
                   height={imageSize}/>
@@ -236,8 +236,8 @@ export function renderSkeletonImageThumbnail(size: PreviewSize) {
 function renderUrlVideo(size: PreviewSize) {
 
     return (
-        <Skeleton width={size !== "medium" ? 300 : 500}
-                  height={size !== "medium" ? 200 : 250}/>
+        <Skeleton width={size !== "large" ? 300 : 500}
+                  height={size !== "large" ? 200 : 250}/>
     );
 }
 
@@ -245,7 +245,7 @@ function renderReference() {
     return <Skeleton width={200} height={100}/>;
 }
 
-function renderUrlComponent(property: ResolvedStringProperty, size: PreviewSize = "medium") {
+function renderUrlComponent(property: ResolvedStringProperty, size: PreviewSize = "large") {
 
     if (typeof property.url === "boolean") {
         return <div style={{

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 === "smallest" ? "text-sm" : "")}>
+            ? <div className={cls("overflow-x-scroll", size === "small" ? "text-sm" : "")}>
                 {lines.map((str, index) =>
                     <React.Fragment key={`string_preview_${index}`}>
                         <span>{str}</span>
                         {index !== lines.length - 1 && <br/>}
                     </React.Fragment>)}
             </div>
-            : (size === "smallest"
+            : (size === "small"
                     ? <span className={"text-sm"}>{value}</span>
                     : <>{value}</>
             );

package/src/preview/util.ts

@@ -1,17 +1,17 @@
 import { CollectionSize } from "../types";
 import { PreviewSize } from "./PropertyPreviewProps";
 
-export const TINY_THUMBNAIL = 40;
-export const SMALL_THUMBNAIL = 100;
-export const REGULAR_THUMBNAIL = 200;
+export const SMALL_THUMBNAIL = 40;
+export const MEDIUM_THUMBNAIL = 100;
+export const LARGE_THUMBNAIL = 200;
 
 export function getThumbnailMeasure(size: PreviewSize): number {
-    if (size === "smallest")
-        return TINY_THUMBNAIL;
-    else if (size === "small")
+    if (size === "small")
         return SMALL_THUMBNAIL;
     else if (size === "medium")
-        return REGULAR_THUMBNAIL;
+        return MEDIUM_THUMBNAIL;
+    else if (size === "large")
+        return LARGE_THUMBNAIL;
     else throw Error("Thumbnail size not mapped");
 }
 
@@ -19,12 +19,12 @@ export function getPreviewSizeFrom(size: CollectionSize): PreviewSize {
     switch (size) {
         case "xs":
         case "s":
-            return "smallest";
-        case "m":
             return "small";
+        case "m":
+            return "medium";
         case "l":
         case "xl":
-            return "medium";
+            return "large";
         default:
             throw Error("Missing mapping value in getPreviewSizeFrom: " + size);
     }