@firecms/core 3.0.0-canary.57 → 3.0.0-canary.59

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.57",
+    "version": "3.0.0-canary.59",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,8 +46,8 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/formex": "^3.0.0-canary.57",
-        "@firecms/ui": "^3.0.0-canary.57",
+        "@firecms/formex": "^3.0.0-canary.59",
+        "@firecms/ui": "^3.0.0-canary.59",
         "@fontsource/jetbrains-mono": "^5.0.20",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.0.4",
@@ -111,7 +111,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "54c0d79d2648c937d055bacab2d7d92fbd294c7b",
+    "gitHead": "870435eb903576cd282b2c22165ec3afa84c9340",
     "publishConfig": {
         "access": "public"
     },

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cn, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 
 /**
@@ -72,7 +72,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     return (
         <div
             onClick={onClick}
-            className={cn(
+            className={cls(
                 "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
                 frozen ? "sticky left-0" : ""
             )}

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -14,7 +14,7 @@ import { renderSkeletonText } from "../../preview";
 import { propertiesToColumns } from "./column_utils";
 import { ErrorView } from "../ErrorView";
 import { SelectableTable } from "../SelectableTable/SelectableTable";
-import { cn } from "@firecms/ui";
+import { cls } from "@firecms/ui";
 import { getRowHeight } from "../common/table_height";
 
 /**
@@ -292,7 +292,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
         <div ref={ref}
              style={style}
-             className={cn("h-full w-full flex flex-col bg-white dark:bg-gray-950", className)}>
+             className={cls("h-full w-full flex flex-col bg-white dark:bg-gray-950", className)}>
 
             <CollectionTableToolbar
                 onTextSearch={textSearchEnabled ? onTextSearch : undefined}

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

@@ -9,7 +9,7 @@ import { useSnackbarController, useStorageSource } from "../../../hooks";
 import { getThumbnailMeasure } from "../../../preview/util";
 import { StorageFieldItem, useStorageUploadController } from "../../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../../../form/components/StorageUploadProgress";
-import { cn, EditIcon, IconButton, Typography } from "@firecms/ui";
+import { cls, EditIcon, IconButton, Typography } from "@firecms/ui";
 import { EntityTableCellActions } from "../internal/EntityTableCellActions";
 
 const dropZoneClasses = "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";
@@ -207,7 +207,7 @@ function StorageUpload({
              onMouseEnter={() => setOnHover(true)}
              onMouseMove={() => setOnHover(true)}
              onMouseLeave={() => setOnHover(false)}
-             className={cn(dropZoneClasses,
+             className={cls(dropZoneClasses,
                  "relative w-full h-full flex",
                  `justify-${hasValue ? "start" : "center"}`,
                  isDragActive ? activeDropClasses : "",

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

@@ -3,7 +3,7 @@ import React, { useEffect } from "react";
 import {
     Button,
     CircularProgress,
-    cn,
+    cls,
     defaultBorderMixin,
     FilterListOffIcon,
     SearchBar,
@@ -71,7 +71,7 @@ export function CollectionTableToolbar({
 
     return (
         <div
-            className={cn(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full")}>
+            className={cls(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full")}>
 
             <div className="flex items-center gap-2 md:mr-4 mr-2">
 

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

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import useMeasure from "react-use-measure";
 
-import { cn, RemoveCircleIcon, Tooltip } from "@firecms/ui";
+import { cls, RemoveCircleIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
 import { getRowHeight, TableSize } from "../../common/table_height";
 
@@ -46,7 +46,7 @@ const TableCellInner = ({
                         }: TableCellInnerProps) => {
     return (
         <div
-            className={cn("flex flex-col max-h-full w-full",
+            className={cls("flex flex-col max-h-full w-full",
                 {
                     "items-start": faded || scrollable
                 })}
@@ -185,7 +185,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
 
         return (
             <div
-                className={cn(
+                className={cls(
                     "transition-colors duration-100 ease-in-out",
                     `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
                     onHover && !disabled ? "bg-gray-50 dark:bg-gray-900" : "",

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -45,7 +45,7 @@ import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import {
     AddIcon,
     Button,
-    cn,
+    cls,
     IconButton,
     KeyboardTabIcon,
     Markdown,
@@ -591,7 +591,7 @@ export const EntityCollectionView = React.memo(
         });
 
         return (
-            <div className={cn("overflow-hidden h-full w-full rounded-md", className)}
+            <div className={cls("overflow-hidden h-full w-full rounded-md", className)}
                  ref={containerRef}>
                 <EntityCollectionTable
                     key={`collection_table_${fullPath}`}

package/src/components/EntityPreview.tsx

@@ -10,7 +10,7 @@ import {
     getValueInPath,
     resolveCollection
 } from "../util";
-import { cn, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { PreviewSize, PropertyPreview, SkeletonPropertyComponent } from "../preview";
 import { useCustomizationController, useNavigationController, useSideEntityController } from "../hooks";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
@@ -77,7 +77,7 @@ export function EntityPreview({
                                    hover={disabled ? undefined : hover}
                                    size={size}>
         {imageProperty && (
-            <div className={cn("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 === "tiny" ? "my-0.5" : "m-2 self-start")}>
                 <PropertyPreview property={imageProperty}
                                  propertyKey={imagePropertyKey as string}
                                  size={"tiny"}
@@ -197,7 +197,7 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
             // @ts-ignore
             tabindex: 0
         }}
-        className={cn(
+        className={cls(
             "bg-white dark:bg-gray-900",
             fullwidth ? "w-full" : "",
             "items-center",

package/src/components/EntityView.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { PropertyPreview } from "../preview";
 import { Entity, EntityCollection, ResolvedEntityCollection, ResolvedProperties } from "../types";
 import { resolveCollection } from "../util";
-import { cn, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
 
@@ -38,7 +38,7 @@ export function EntityView<M extends Record<string, any>>(
     return (
         <div className={"w-full " + className}>
             <div className={"w-full mb-4"}>
-                <div className={cn(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
+                <div className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
                     <div className="flex items-center w-1/4">
                         <span className="pl-2 text-sm text-gray-600">Id</span>
                     </div>
@@ -62,7 +62,7 @@ export function EntityView<M extends Record<string, any>>(
                         return (
                             <div
                                 key={`reference_previews_${key}`}
-                                className={cn(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
+                                className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
                                 <div className="flex items-center w-1/4">
                                     <span className="pl-2 text-sm text-gray-600">{property.name}</span>
                                 </div>

package/src/components/FireCMSAppBar.tsx

@@ -4,7 +4,7 @@ import { Link as ReactLink } from "react-router-dom";
 import { ErrorBoundary, FireCMSLogo } from "../components";
 import {
     Avatar,
-    cn,
+    cls,
     DarkModeIcon,
     IconButton,
     LightModeIcon,
@@ -96,7 +96,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
     return (
         <div
             style={style}
-            className={cn("pr-2",
+            className={cls("pr-2",
                 {
                     "ml-[17rem]": drawerOpen && largeLayout,
                     "ml-16": includeDrawer && !(drawerOpen && largeLayout),
@@ -124,7 +124,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
                             {!includeDrawer && (logo
                                 ? <img src={logo}
                                        alt="Logo"
-                                       className={cn("w-[32px] h-[32px]")}/>
+                                       className={cls("w-[32px] h-[32px]")}/>
                                 : <FireCMSLogo width={"32px"} height={"32px"}/>)}
 
                             {typeof title === "string"

package/src/components/HomePage/NavigationCard.tsx

@@ -1,4 +1,4 @@
-import { ArrowForwardIcon, Card, cn, Markdown, Typography, } from "@firecms/ui";
+import { ArrowForwardIcon, Card, cls, Markdown, Typography, } from "@firecms/ui";
 
 export type NavigationCardProps = {
     name: string,
@@ -17,7 +17,7 @@ export function NavigationCard({
                                }: NavigationCardProps) {
 
     return (<Card
-        className={cn("h-full p-4 cursor-pointer min-h-[230px]")}
+        className={cls("h-full p-4 cursor-pointer min-h-[230px]")}
         onClick={() => {
             onClick?.();
         }}>

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,4 +1,4 @@
-import { ArrowForwardIcon, cardClickableMixin, cardMixin, cn, focusedMixin, Typography, } from "@firecms/ui";
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, focusedMixin, Typography, } from "@firecms/ui";
 
 import { Link } from "react-router-dom";
 
@@ -19,7 +19,7 @@ export function SmallNavigationCard({
 
             <Link
                 tabIndex={0}
-                className={cn(cardMixin,
+                className={cls(cardMixin,
                     cardClickableMixin,
                     focusedMixin,
                     "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ")}

package/src/components/ReferenceWidget.tsx

@@ -4,7 +4,7 @@ import { Entity, EntityCollection, EntityReference, FilterValues } from "../type
 import { getReferenceFrom } from "../util";
 import { PreviewSize, ReferencePreview } from "../preview";
 import { useNavigationController, useReferenceDialog } from "../hooks";
-import { Button, cn } from "@firecms/ui";
+import { Button, cls } from "@firecms/ui";
 
 export type ReferenceWidgetProps<M extends Record<string, any>> = {
     name?: string,
@@ -132,7 +132,7 @@ export function ReferenceWidget<M extends Record<string, any>>({
             includeEntityLink={includeEntityLink}/>
 
     }
-    return <div className={cn("text-sm font-medium",
+    return <div className={cls("text-sm font-medium",
         "min-w-80 flex flex-col gap-4",
         "relative transition-colors duration-200 ease-in rounded font-medium",
         disabled ? "bg-opacity-50" : "hover:bg-opacity-75",

package/src/components/VirtualTable/VirtualTable.tsx

@@ -19,7 +19,7 @@ import { VirtualTableContextProps } from "./types";
 import { VirtualTableHeaderRow } from "./VirtualTableHeaderRow";
 import { VirtualTableRow } from "./VirtualTableRow";
 import { VirtualTableCell } from "./VirtualTableCell";
-import { AssignmentIcon, CenteredView, cn, Typography } from "@firecms/ui";
+import { AssignmentIcon, CenteredView, cls, Typography } from "@firecms/ui";
 
 const VirtualListContext = createContext<VirtualTableContextProps<any>>({} as any);
 VirtualListContext.displayName = "VirtualListContext";
@@ -107,6 +107,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              hoverRow,
                                                              createFilterField,
                                                              rowClassName,
+                                                             style,
                                                              className,
                                                              endAdornment,
                                                              AddColumnComponent
@@ -239,7 +240,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const empty = !loading && (data?.length ?? 0) === 0;
         const customView = error
             ? <CenteredView maxWidth={"2xl"}
-                className="flex flex-col gap-2">
+                            className="flex flex-col gap-2">
 
                 <Typography variant={"h6"}>
                     {"Error fetching data from the data source"}
@@ -275,7 +276,8 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         return (
             <div
                 ref={measureRef}
-                className={cn("h-full w-full", className)}>
+                style={style}
+                className={cls("h-full w-full", className)}>
                 <VirtualListContext.Provider
                     value={virtualListController}>
 

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -7,7 +7,7 @@ import {
     ArrowUpwardIcon,
     Badge,
     Button,
-    cn,
+    cls,
     defaultBorderMixin,
     FilterListIcon,
     IconButton,
@@ -85,7 +85,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
         return (
             <ErrorBoundary>
                 <div
-                    className={cn("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-gray-50 dark:bg-gray-900",
+                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-gray-50 dark:bg-gray-900",
                         "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 ",
                         "hover:bg-gray-100 dark:hover:bg-gray-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
                         column.frozen ? "sticky left-0 z-10" : "relative z-0"
@@ -179,7 +179,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
                     {column.resizable && <div
                         ref={resizeHandleRef}
-                        className={cn(
+                        className={cls(
                             "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
                             hovered && "bg-gray-300 dark:bg-gray-700"
                         )}
@@ -240,7 +240,7 @@ function FilterForm<M>({
               }}
               className={"text-gray-900 dark:text-white"}>
             <div
-                className={cn(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b")}>
+                className={cls(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b")}>
                 {column.title ?? id}
             </div>
             {filterField && <div className="m-4">

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -4,7 +4,7 @@ import { VirtualTableColumn, VirtualTableWhereFilterOp } from "./VirtualTablePro
 import { ErrorBoundary } from "../ErrorBoundary";
 import { VirtualTableHeader } from "./VirtualTableHeader";
 import { VirtualTableContextProps } from "./types";
-import { cn, defaultBorderMixin } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 
 export const VirtualTableHeaderRow = ({
                                           columns,
@@ -100,7 +100,7 @@ export const VirtualTableHeaderRow = ({
 
     return (
         <div
-            className={cn(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-gray-50 dark:bg-gray-900")}>
+            className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-gray-50 dark:bg-gray-900")}>
             {columns.map((c, columnIndex) => {
                 const column = columns[columnIndex];
 

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -131,6 +131,11 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     className?: string;
 
+    /**
+     * Style applied to the table
+     */
+    style?: React.CSSProperties;
+
     /**
      * Component rendered at the end of the table, after scroll
      */

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
 import equal from "react-fast-compare"
 
 import { VirtualTableRowProps } from "./types";
-import { cn } from "@firecms/ui";
+import { cls } from "@firecms/ui";
 
 export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
     function VirtualTableRow<T>({
@@ -28,7 +28,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
 
         return (
             <div
-                className={cn(
+                className={cls(
                     "flex min-w-full text-sm border-b border-gray-200 dark:border-gray-800 border-opacity-40 dark:border-opacity-40",
                     rowClassName ? rowClassName(rowData) : "",
                     {

package/src/core/Drawer.tsx

@@ -5,7 +5,7 @@ import { useLargeLayout, useNavigationController } from "../hooks";
 import { useNavigate } from "react-router-dom";
 import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
 import { IconForView } from "../util";
-import { cn, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
+import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { useDrawer } from "./Scaffold";
 import { DrawerNavigationItem } from "./DrawerNavigationItem";
@@ -114,7 +114,7 @@ export function Drawer() {
                             <MoreVertIcon/>
                         </Tooltip>
                         {drawerOpen && <div
-                            className={cn(
+                            className={cls(
                                 drawerOpen ? "opacity-100" : "opacity-0 hidden",
                                 "mx-4 font-inherit text-inherit"
                             )}>

package/src/core/DrawerNavigationItem.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { NavLink } from "react-router-dom";
-import { cn, Tooltip } from "@firecms/ui";
+import { cls, Tooltip } from "@firecms/ui";
 
 export function DrawerNavigationItem({
                                          name,
@@ -30,7 +30,7 @@ export function DrawerNavigationItem({
             width: !drawerOpen ? "72px" : "280px",
             transition: drawerOpen ? "width 150ms ease-in" : undefined
         }}
-        className={({ isActive }: any) => cn("rounded-r-lg truncate",
+        className={({ isActive }: any) => cls("rounded-r-lg truncate",
             "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-white",
             "flex flex-row items-center mr-8",
             // "transition-all ease-in-out delay-100 duration-300",
@@ -45,7 +45,7 @@ export function DrawerNavigationItem({
         {iconWrap}
 
         <div
-            className={cn(
+            className={cls(
                 drawerOpen ? "opacity-100" : "opacity-0 hidden",
                 "ml-4 font-inherit text-inherit"
             )}>

package/src/core/EntityEditView.tsx

@@ -29,7 +29,7 @@ import {
     useSnackbarController
 } from "../hooks";
 import { EntityForm } from "../form";
-import { CircularProgress, CloseIcon, cn, defaultBorderMixin, IconButton, Tab, Tabs, Typography } from "@firecms/ui";
+import { CircularProgress, CloseIcon, cls, defaultBorderMixin, IconButton, Tab, Tabs, Typography } from "@firecms/ui";
 import { EntityFormSaveParams } from "../form/EntityForm";
 import { useSideDialogContext } from "./index";
 
@@ -297,7 +297,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
                     return null;
                 }
                 return <div
-                    className={cn(defaultBorderMixin,
+                    className={cls(defaultBorderMixin,
                         "relative flex-grow w-full h-full overflow-auto ")}
                     key={`custom_view_${customView.key}`}
                     role="tabpanel">
@@ -481,7 +481,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
                 <>
 
                     <div
-                        className={cn(defaultBorderMixin, "no-scrollbar border-b pl-2 pr-2 pt-1 flex items-end overflow-scroll bg-gray-50 dark:bg-gray-950")}>
+                        className={cls(defaultBorderMixin, "no-scrollbar border-b pl-2 pr-2 pt-1 flex items-end overflow-scroll bg-gray-50 dark:bg-gray-950")}>
 
                         <div
                             className="pb-1 self-center">

package/src/core/Scaffold.tsx

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 import { Drawer as DefaultDrawer, DrawerProps } from "./Drawer";
 import { useLargeLayout, useNavigationController } from "../hooks";
 import { ErrorBoundary, FireCMSAppBar as DefaultFireCMSAppBar, FireCMSAppBarProps, FireCMSLogo } from "../components";
-import { ChevronLeftIcon, cn, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
+import { ChevronLeftIcon, cls, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
 
 export const DRAWER_WIDTH = 280;
 
@@ -150,7 +150,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                         className="flex flex-col flex-grow overflow-auto">
                         <DrawerHeader/>
                         <div
-                            className={cn(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
+                            className={cls(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
 
                             <ErrorBoundary>
                                 {children}
@@ -218,7 +218,7 @@ function DrawerWrapper(props: {
                     transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
                     padding: props.open ? "32px 144px 0px 24px" : "72px 16px 0px"
                 }}
-                className={cn("cursor-pointer")}>
+                className={cls("cursor-pointer")}>
 
                 <Tooltip title={"Home"}
                          sideOffset={20}
@@ -228,7 +228,7 @@ function DrawerWrapper(props: {
                         {props.logo
                             ? <img src={props.logo}
                                    alt="Logo"
-                                   className={cn("max-w-full max-h-full",
+                                   className={cls("max-w-full max-h-full",
                                        props.open ?? "w-[112px] h-[112px]")}/>
                             : <FireCMSLogo/>}
 

package/src/form/EntityForm.tsx

@@ -35,7 +35,7 @@ import {
 } from "../hooks";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomIdField } from "./components/CustomIdField";
-import { Alert, Button, CircularProgress, cn, DialogActions, IconButton, Tooltip, Typography } from "@firecms/ui";
+import { Alert, Button, CircularProgress, cls, DialogActions, IconButton, Tooltip, Typography } from "@firecms/ui";
 import { CircularProgressCenter, ErrorBoundary } from "../components";
 import { copyEntityAction, deleteEntityAction } from "../components/common/default_entity_actions";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
@@ -453,7 +453,7 @@ function EntityFormInternal<M extends Record<string, any>>({
         <div className="h-full overflow-auto">
 
             {pluginActions.length > 0 && <div
-                className={cn("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
+                className={cls("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
                 {pluginActions}
             </div>}
 

package/src/form/components/StorageItemPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Entity, EntityCollection, ResolvedStringProperty } from "../../types";
 import { PreviewSize, PropertyPreview } from "../../preview";
 
-import { cn, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
+import { cls, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 
 interface StorageItemPreviewProps {
@@ -29,7 +29,7 @@ export function StorageItemPreview({
                                    }: StorageItemPreviewProps) {
 
     return (
-        <div className={cn(paperMixin,
+        <div className={cls(paperMixin,
             "relative m-4 border-box flex items-center justify-center",
             size === "medium" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]")}>
 

package/src/form/components/StorageUploadProgress.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
 import { useSnackbarController, useStorageSource } from "../../hooks";
 import { StorageFieldItem } from "../../util/useStorageUploadController";
 import { ErrorView } from "../../components";
-import { cn, paperMixin, Skeleton } from "@firecms/ui";
+import { cls, paperMixin, Skeleton } from "@firecms/ui";
 import { EntityCollection, StorageSource } from "../../types";
 
 export interface StorageUploadItemProps {
@@ -88,7 +88,7 @@ export function StorageUploadProgress({
     }
     return (
 
-        <div className={cn(paperMixin,
+        <div className={cls(paperMixin,
             "relative m-4 border-box flex items-center justify-center",
             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -6,7 +6,7 @@ import { ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
 import { useNavigationController, useReferenceDialog } from "../../hooks";
-import { Button, cn, ExpandablePanel, fieldBackgroundMixin } from "@firecms/ui";
+import { Button, cls, ExpandablePanel, fieldBackgroundMixin } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
@@ -132,7 +132,7 @@ export function ArrayOfReferencesFieldBinding({
             {!tableMode &&
                 <ExpandablePanel
                     titleClassName={fieldBackgroundMixin}
-                    className={cn("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
+                    className={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
                     initiallyExpanded={expanded}
                     title={title}>
                     {body}

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -8,7 +8,7 @@ import { EnumValuesChip } from "../../preview";
 import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
 import { getDefaultValueFor, getIconForProperty, } from "../../util";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
-import { cn, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
+import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
@@ -193,7 +193,7 @@ function BlockEntry({
     };
 
     return (
-        <div className={cn(paperMixin, "bg-transparent p-4 my-4 py-8")}>
+        <div className={cls(paperMixin, "bg-transparent p-4 my-4 py-8")}>
 
             <Field
                 name={typeFieldName}