From 3ae3d11d2a00a84f356b9cfc23dcf1de3dee2566 Mon Sep 17 00:00:00 2001
From: francesco <francesco@camberi.com>
Date: Fri, 11 Oct 2024 13:49:04 +0200
Subject: [PATCH] Added label docs, some extendable panel updates and border
 style update

---
 eslint.config.mjs                             |  1 -
 .../FirestoreApp/custom_field/JSONField.tsx   |  2 +-
 .../properties/validation/ValidationPanel.tsx |  2 +-
 .../components/DataNewPropertiesMapping.tsx   |  2 +-
 .../HighlightDecorationExtension.ts           |  3 +-
 packages/editor/src/extensions/Image.ts       |  4 +-
 .../editor/src/extensions/drag-and-drop.tsx   |  4 +-
 packages/editor/src/extensions/index.ts       |  2 +-
 packages/firecms_core/src/app/Drawer.tsx      |  1 -
 .../components/HomePage/NavigationGroup.tsx   |  2 +-
 .../ArrayCustomShapedFieldBinding.tsx         |  2 +-
 .../ArrayOfReferencesFieldBinding.tsx         |  2 +-
 .../form/field_bindings/BlockFieldBinding.tsx |  2 +-
 .../field_bindings/KeyValueFieldBinding.tsx   |  2 +-
 .../form/field_bindings/MapFieldBinding.tsx   |  2 +-
 .../field_bindings/RepeatFieldBinding.tsx     |  2 +-
 .../ui/src/components/ExpandablePanel.tsx     | 15 ++++---
 packages/ui/src/components/FileUpload.tsx     |  2 +-
 packages/ui/src/components/Sheet.tsx          |  7 ++-
 packages/ui/src/styles.ts                     |  6 +--
 website/docs/components.mdx                   | 14 ++++--
 website/docs/components/label.mdx             | 44 +++++++++++++++++++
 website/docusaurus.config.js                  |  2 +-
 .../components/label/label_checkbox.tsx       | 21 +++++++++
 .../components/label/label_radio_group.tsx    | 38 ++++++++++++++++
 .../multi_select/multi_select_basic.tsx       |  4 +-
 .../multi_select_custom_render.tsx            | 14 +++---
 .../multi_select/multi_select_disabled.tsx    | 14 ++++--
 .../components/popover/popover_align.tsx      |  8 ++--
 .../components/popover/popover_controlled.tsx |  8 ++--
 .../components/popover/popover_styled.tsx     |  6 +--
 website/sidebars.js                           |  3 +-
 .../ui/ClientUIComponentsShowcase.tsx         |  5 ++-
 33 files changed, 185 insertions(+), 61 deletions(-)
 create mode 100644 website/docs/components/label.mdx
 create mode 100644 website/samples/components/label/label_checkbox.tsx
 create mode 100644 website/samples/components/label/label_radio_group.tsx

diff --git a/eslint.config.mjs b/eslint.config.mjs
index b7004fe16..ef02169b3 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -81,7 +81,6 @@ export default [
             "@typescript-eslint/no-empty-function": "warn",
             "@typescript-eslint/no-inferrable-types": "warn",
             "@typescript-eslint/ban-ts-comment": "warn",
-            "@typescript-eslint/ban-types": "warn",
             "@typescript-eslint/no-explicit-any": "off",
         },
     }];
diff --git a/examples/example_pro/src/FirestoreApp/custom_field/JSONField.tsx b/examples/example_pro/src/FirestoreApp/custom_field/JSONField.tsx
index 6bcc4008f..5cdac904c 100644
--- a/examples/example_pro/src/FirestoreApp/custom_field/JSONField.tsx
+++ b/examples/example_pro/src/FirestoreApp/custom_field/JSONField.tsx
@@ -25,7 +25,7 @@ export function JSONField({
         <>
             <ExpandablePanel initiallyExpanded={true}
                              title={property.name}
-                             className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
+                             innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
                 <span>{error}</span>
                 <JsonView
                     src={internalValue}
diff --git a/packages/collection_editor/src/ui/collection_editor/properties/validation/ValidationPanel.tsx b/packages/collection_editor/src/ui/collection_editor/properties/validation/ValidationPanel.tsx
index cd5ff28ad..7ece802bb 100644
--- a/packages/collection_editor/src/ui/collection_editor/properties/validation/ValidationPanel.tsx
+++ b/packages/collection_editor/src/ui/collection_editor/properties/validation/ValidationPanel.tsx
@@ -10,7 +10,7 @@ export function ValidationPanel({
         <ExpandablePanel
             initiallyExpanded={false}
             asField={true}
-            className="p-4"
+            innerClassName="p-4"
             title={
                 <div className="flex flex-row text-gray-500">
                     <RuleIcon/>
diff --git a/packages/data_import/src/components/DataNewPropertiesMapping.tsx b/packages/data_import/src/components/DataNewPropertiesMapping.tsx
index 9a3b3f910..b474976e2 100644
--- a/packages/data_import/src/components/DataNewPropertiesMapping.tsx
+++ b/packages/data_import/src/components/DataNewPropertiesMapping.tsx
@@ -100,7 +100,7 @@ export function DataNewPropertiesMapping({
                 </TableBody>
             </Table>
 
-            <ExpandablePanel title="Default values" initiallyExpanded={false} className={"p-4 mt-4"}>
+            <ExpandablePanel title="Default values" initiallyExpanded={false} innerClassName={"p-4 mt-4"}>
 
                 <div className={"text-sm text-slate-500 dark:text-slate-300 font-medium ml-3.5 mb-1"}>
                     You can select a default value for unmapped columns and empty values:
diff --git a/packages/editor/src/extensions/HighlightDecorationExtension.ts b/packages/editor/src/extensions/HighlightDecorationExtension.ts
index 13843b2ee..2f6bc2a5e 100644
--- a/packages/editor/src/extensions/HighlightDecorationExtension.ts
+++ b/packages/editor/src/extensions/HighlightDecorationExtension.ts
@@ -1,5 +1,4 @@
 import { Command, Extension } from "@tiptap/core"
-import { Node } from "@tiptap/pm/model"
 import { Plugin, PluginKey } from "@tiptap/pm/state"
 import { Decoration, DecorationSet } from "@tiptap/pm/view"
 
@@ -27,7 +26,7 @@ export interface HighlightDecorationOptions {
     highlight?: { from: number, to: number }
 }
 
-function buildDecorationSet(highlight: any, doc: Node) {
+function buildDecorationSet(highlight: any, doc: any) {
     const decorations: [any?] = [];
 
     if (highlight) {
diff --git a/packages/editor/src/extensions/Image.ts b/packages/editor/src/extensions/Image.ts
index 43c4838bd..047b66b8b 100644
--- a/packages/editor/src/extensions/Image.ts
+++ b/packages/editor/src/extensions/Image.ts
@@ -86,7 +86,7 @@ export const createDropImagePlugin = (upload: UploadFn): Plugin => {
 
                         const reader = new FileReader();
                         reader.onload = async (readerEvent) => {
-                            await onFileRead(view, readerEvent, position.pos, upload, image);
+                            await onFileRead(view as any, readerEvent, position.pos, upload, image);
                         };
                         reader.readAsDataURL(image);
                     });
@@ -119,7 +119,7 @@ export const createDropImagePlugin = (upload: UploadFn): Plugin => {
                         const reader = new FileReader();
 
                         reader.onload = async (readerEvent) => {
-                            await onFileRead(view, readerEvent, pos, upload, image);
+                            await onFileRead(view as any, readerEvent, pos, upload, image);
                         };
                         reader.readAsDataURL(image);
                     }
diff --git a/packages/editor/src/extensions/drag-and-drop.tsx b/packages/editor/src/extensions/drag-and-drop.tsx
index a6c3765ae..fcd43f811 100644
--- a/packages/editor/src/extensions/drag-and-drop.tsx
+++ b/packages/editor/src/extensions/drag-and-drop.tsx
@@ -124,10 +124,10 @@ function DragHandle(options: DragHandleOptions) {
             dragHandleElement.dataset.dragHandle = "";
             dragHandleElement.classList.add("drag-handle");
             dragHandleElement.addEventListener("dragstart", (e) => {
-                handleDragStart(e, view);
+                handleDragStart(e, view as any);
             });
             dragHandleElement.addEventListener("click", (e) => {
-                handleClick(e, view);
+                handleClick(e, view as any);
             });
 
             hideDragHandle();
diff --git a/packages/editor/src/extensions/index.ts b/packages/editor/src/extensions/index.ts
index 7f966734f..046e9bcef 100644
--- a/packages/editor/src/extensions/index.ts
+++ b/packages/editor/src/extensions/index.ts
@@ -52,7 +52,7 @@ const Horizontal = HorizontalRule.extend({
                     const start = range.from;
                     const end = range.to;
 
-                    tr.insert(start - 1, this.type.create(attributes)).delete(
+                    tr.insert(start - 1, this.type.create(attributes) as any).delete(
                         tr.mapping.map(start),
                         tr.mapping.map(end)
                     );
diff --git a/packages/firecms_core/src/app/Drawer.tsx b/packages/firecms_core/src/app/Drawer.tsx
index 169754d8f..632494f29 100644
--- a/packages/firecms_core/src/app/Drawer.tsx
+++ b/packages/firecms_core/src/app/Drawer.tsx
@@ -7,7 +7,6 @@ import { DefaultDrawer } from "../core";
  * If you want to customise the drawer, you can create your own component and pass it as a child.
  * For custom drawers, you can use the {@link useApp} to open and close the drawer.
  *
-
  */
 export function Drawer({
                            children,
diff --git a/packages/firecms_core/src/components/HomePage/NavigationGroup.tsx b/packages/firecms_core/src/components/HomePage/NavigationGroup.tsx
index 07850bc63..1d2f05c48 100644
--- a/packages/firecms_core/src/components/HomePage/NavigationGroup.tsx
+++ b/packages/firecms_core/src/components/HomePage/NavigationGroup.tsx
@@ -13,7 +13,7 @@ export function NavigationGroup({
         <ExpandablePanel
             invisible={true}
             titleClassName={"font-medium text-sm text-gray-600 dark:text-gray-400"}
-            className={"py-4"}
+            innerClassName={"py-4"}
             initiallyExpanded={!(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped")}
             onExpandedChange={expanded => {
                 if (userConfigurationPersistence) {
diff --git a/packages/firecms_core/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx b/packages/firecms_core/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx
index 9a326d011..f944a6fe2 100644
--- a/packages/firecms_core/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx
+++ b/packages/firecms_core/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx
@@ -80,7 +80,7 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
             {!minimalistView &&
                 <ExpandablePanel initiallyExpanded={expanded}
                                  title={title}
-                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
+                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
                     {body}
                 </ExpandablePanel>}
 
diff --git a/packages/firecms_core/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx b/packages/firecms_core/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx
index 5994d09bb..a80effbf3 100644
--- a/packages/firecms_core/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx
+++ b/packages/firecms_core/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx
@@ -135,7 +135,7 @@ export function ArrayOfReferencesFieldBinding({
             {!minimalistView &&
                 <ExpandablePanel
                     titleClassName={fieldBackgroundMixin}
-                    className={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
+                    innerClassName={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
                     initiallyExpanded={expanded}
                     title={title}>
                     {body}
diff --git a/packages/firecms_core/src/form/field_bindings/BlockFieldBinding.tsx b/packages/firecms_core/src/form/field_bindings/BlockFieldBinding.tsx
index 490d69287..3b9d36215 100644
--- a/packages/firecms_core/src/form/field_bindings/BlockFieldBinding.tsx
+++ b/packages/firecms_core/src/form/field_bindings/BlockFieldBinding.tsx
@@ -89,7 +89,7 @@ export function BlockFieldBinding<T extends Array<any>>({
 
             {!minimalistView &&
                 <ExpandablePanel
-                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                    innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
                     initiallyExpanded={expanded}
                     title={title}>
                     {body}
diff --git a/packages/firecms_core/src/form/field_bindings/KeyValueFieldBinding.tsx b/packages/firecms_core/src/form/field_bindings/KeyValueFieldBinding.tsx
index 678d031d2..101b11f09 100644
--- a/packages/firecms_core/src/form/field_bindings/KeyValueFieldBinding.tsx
+++ b/packages/firecms_core/src/form/field_bindings/KeyValueFieldBinding.tsx
@@ -74,7 +74,7 @@ export function KeyValueFieldBinding({
 
             {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
                                                  title={title}
-                                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>{mapFormView}</ExpandablePanel>}
+                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>{mapFormView}</ExpandablePanel>}
 
             {minimalistView && mapFormView}
 
diff --git a/packages/firecms_core/src/form/field_bindings/MapFieldBinding.tsx b/packages/firecms_core/src/form/field_bindings/MapFieldBinding.tsx
index d23463fb3..e1e495406 100644
--- a/packages/firecms_core/src/form/field_bindings/MapFieldBinding.tsx
+++ b/packages/firecms_core/src/form/field_bindings/MapFieldBinding.tsx
@@ -95,7 +95,7 @@ export function MapFieldBinding({
         <ErrorBoundary>
 
             {!minimalistView && !minimalistView && <ExpandablePanel initiallyExpanded={expanded}
-                                                                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-slate-50 bg-opacity-50 dark:bg-gray-900"}
+                                                                    innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-gray-900"}
                                                                     title={title}>{mapFormView}</ExpandablePanel>}
 
             {(minimalistView || minimalistView) && mapFormView}
diff --git a/packages/firecms_core/src/form/field_bindings/RepeatFieldBinding.tsx b/packages/firecms_core/src/form/field_bindings/RepeatFieldBinding.tsx
index 732b607e1..5560ba35c 100644
--- a/packages/firecms_core/src/form/field_bindings/RepeatFieldBinding.tsx
+++ b/packages/firecms_core/src/form/field_bindings/RepeatFieldBinding.tsx
@@ -100,7 +100,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
         <>
 
             {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
-                                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
                                                  title={title}>
                 {arrayContainer}
             </ExpandablePanel>}
diff --git a/packages/ui/src/components/ExpandablePanel.tsx b/packages/ui/src/components/ExpandablePanel.tsx
index 6dedeecb5..23c966a4c 100644
--- a/packages/ui/src/components/ExpandablePanel.tsx
+++ b/packages/ui/src/components/ExpandablePanel.tsx
@@ -15,7 +15,8 @@ export function ExpandablePanel({
                                     initiallyExpanded = true,
                                     titleClassName,
                                     asField,
-                                    className
+                                    className,
+                                    innerClassName
                                 }: PropsWithChildren<{
     title: React.ReactNode,
     invisible?: boolean,
@@ -24,7 +25,8 @@ export function ExpandablePanel({
     onExpandedChange?: (expanded: boolean) => void,
     titleClassName?: string,
     asField?: boolean,
-    className?: string
+    className?: string,
+    innerClassName?: string
 }>) {
 
     useInjectStyles("ExpandablePanel", `
@@ -79,7 +81,8 @@ export function ExpandablePanel({
                 className={cls(
                     !invisible && defaultBorderMixin + " border",
                     "rounded-md",
-                    "w-full"
+                    "w-full",
+                    className
                 )}
                 open={open}
                 onOpenChange={(updatedOpen: boolean) => {
@@ -89,8 +92,8 @@ export function ExpandablePanel({
 
                 <Collapsible.Trigger
                     className={cls(
-                        "rounded flex items-center justify-between w-full min-h-[52px]",
-                        "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
+                        "rounded-t flex items-center justify-between w-full min-h-[52px]",
+                        "hover:bg-slate-200 hover:bg-opacity-20 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
                         invisible ? "border-b px-2" : "p-4",
                         invisible && defaultBorderMixin,
                         asField && fieldBackgroundMixin,
@@ -107,7 +110,7 @@ export function ExpandablePanel({
                         overflow: allowOverflow ? "visible" : "hidden"
                     }}
                 >
-                    <div className={className}>
+                    <div className={innerClassName}>
                         {children}
                     </div>
                 </Collapsible.Content>
diff --git a/packages/ui/src/components/FileUpload.tsx b/packages/ui/src/components/FileUpload.tsx
index 7d0f6e8f7..3c5fb9a71 100644
--- a/packages/ui/src/components/FileUpload.tsx
+++ b/packages/ui/src/components/FileUpload.tsx
@@ -11,7 +11,7 @@ export interface FileUploadError {
 
 export type OnFileUploadRejected = (fileRejections: {
     file: File;
-    errors: FileUploadError[];
+    errors: readonly FileUploadError[];
 }[], event: object) => void;
 
 export type OnFilesUploadAdded = (files: File[]) => void;
diff --git a/packages/ui/src/components/Sheet.tsx b/packages/ui/src/components/Sheet.tsx
index 6e7dad060..ab63670f0 100644
--- a/packages/ui/src/components/Sheet.tsx
+++ b/packages/ui/src/components/Sheet.tsx
@@ -7,6 +7,7 @@ interface SheetProps {
     children: React.ReactNode;
     open: boolean;
     title?: string;
+    modal?: boolean;
     side?: "top" | "bottom" | "left" | "right";
     darkBackground?: boolean;
     transparent?: boolean;
@@ -19,6 +20,7 @@ export const Sheet: React.FC<SheetProps> = ({
                                                 children,
                                                 side = "right",
                                                 title,
+                                                modal = true,
                                                 open,
                                                 onOpenChange,
                                                 transparent,
@@ -51,12 +53,13 @@ export const Sheet: React.FC<SheetProps> = ({
 
     return (
         <DialogPrimitive.Root open={displayed || open}
+                              modal={modal}
                               onOpenChange={onOpenChange}>
             <DialogPrimitive.Portal>
                 <DialogPrimitive.Title autoFocus tabIndex={0}>
                     {title ?? "Sheet"}
                 </DialogPrimitive.Title>
-                <DialogPrimitive.Overlay
+                {modal && <DialogPrimitive.Overlay
                     className={cls(
                         "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
                         "bg-black bg-opacity-50",
@@ -68,7 +71,7 @@ export const Sheet: React.FC<SheetProps> = ({
                         pointerEvents: displayed ? "auto" : "none"
                     }}
                     onClick={() => onOpenChange && onOpenChange(false)}
-                />
+                />}
                 <DialogPrimitive.Content
                     {...props}
                     onFocusCapture={(event) => event.preventDefault()}
diff --git a/packages/ui/src/styles.ts b/packages/ui/src/styles.ts
index 72781d31a..12875b442 100644
--- a/packages/ui/src/styles.ts
+++ b/packages/ui/src/styles.ts
@@ -5,8 +5,8 @@ export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800
 export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
 export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
 export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
-export const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
-export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
-export const cardMixin = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 m-1 -p-1";
+export const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-70";
+export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-800 dark:border-opacity-80";
+export const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 m-1 -p-1";
 export const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
 export const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
diff --git a/website/docs/components.mdx b/website/docs/components.mdx
index 30f8e23f0..f9eaa4afd 100644
--- a/website/docs/components.mdx
+++ b/website/docs/components.mdx
@@ -57,7 +57,13 @@ npm install @firecms/ui
 You also need to install `tailwindcss`:
 
 ```bash
-yarn add tailwindcss
+yarn add tailwindcss @tailwindcss/typography
+```
+
+And initialize it in your project:
+
+```bash
+npx tailwindcss init
 ```
 
 And add then add the fireCMS preset in your `tailwind.config.js`:
@@ -70,12 +76,12 @@ export default {
     content: [
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",
-        "../../packages/**/src/**/*.{js,ts,jsx,tsx}",
-        "../../node_modules/firecms/src/**/*.{js,ts,jsx,tsx}",
-        "../../node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/firecms/src/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}"
     ]
 };
 ```
+(You might need to adjust the paths in the `content` array to match your project structure)
 
 Finally, you need to define your primary and secondary colors in your `index.css` file:
 
diff --git a/website/docs/components/label.mdx b/website/docs/components/label.mdx
new file mode 100644
index 000000000..56f64caa6
--- /dev/null
+++ b/website/docs/components/label.mdx
@@ -0,0 +1,44 @@
+---
+id: label
+title: Label
+sidebar_label: Label
+---
+
+The `Label` component is a simple and versatile component used to display text content with a label style.
+You usually use it to display a label for an input field, like a checkbox, or radio button.
+
+## Usage
+
+To use the `Label` component, import it from your components. You can pass a `border` prop to add a border around the label.
+You can also pass any of the HTML `label` props, such as `htmlFor`, `className`, and `style`.
+
+
+
+import CodeSample from "../../src/CodeSample";
+import CodeBlock from "@theme/CodeBlock";
+
+## Label with a Checkbox
+
+Simple example of using the `Label` component to create a basic surface for content.
+
+import LabelCheckboxDemo from '../../samples/components/label/label_checkbox';
+import LabelCheckboxSource from '!!raw-loader!../../samples/components/label/label_checkbox';
+
+<CodeSample>
+    <LabelCheckboxDemo/>
+</CodeSample>
+
+<CodeBlock language="tsx">{LabelCheckboxSource}</CodeBlock>
+
+## Label with a Radio Button
+
+This is an example of using the `Label` component with a radio button.
+
+import LabelRadioButtonDemo from '../../samples/components/label/label_radio_group';
+import LabelRadioButtonSource from '!!raw-loader!../../samples/components/label/label_radio_group';
+
+<CodeSample>
+    <LabelRadioButtonDemo/>
+</CodeSample>
+
+<CodeBlock language="tsx">{LabelRadioButtonSource}</CodeBlock>
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 7264474c8..b6d56de88 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -114,7 +114,7 @@ module.exports = {
         description: "Headless CMS based on Firestore/Firebase, React and tailwindcss, and completely open-source",
         announcementBar: {
             id: "dataki-announcement",
-            content: "<code>DATAKI</code> is our new <b>AI analytics tool</b> for SQL databases. Is is amazing! 🚀 <a href='https://dataki.ai?utm_source=firecms_landing'>Check it out!</a>",
+            content: "<code>DATAKI</code> is our new <b>AI analytics tool</b> for SQL databases. It is amazing! 🚀 <a href='https://dataki.ai?utm_source=firecms_landing'>Check it out!</a>",
             backgroundColor: "#FF5B79",
             textColor: "black",
             isCloseable: true
diff --git a/website/samples/components/label/label_checkbox.tsx b/website/samples/components/label/label_checkbox.tsx
new file mode 100644
index 000000000..021c2b861
--- /dev/null
+++ b/website/samples/components/label/label_checkbox.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { Checkbox, Label } from "@firecms/ui";
+
+export default function LabelCheckboxDemo() {
+
+    const [checked, setChecked] = React.useState(false);
+
+    return (
+        <Label
+            border={true}
+            className="cursor-pointer p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+            htmlFor="my-filter"
+        >
+            <Checkbox id="my-filter"
+                      checked={checked}
+                      size={"small"}
+                      onCheckedChange={setChecked}/>
+            Filter for null values
+        </Label>
+    );
+}
diff --git a/website/samples/components/label/label_radio_group.tsx b/website/samples/components/label/label_radio_group.tsx
new file mode 100644
index 000000000..da28d3103
--- /dev/null
+++ b/website/samples/components/label/label_radio_group.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { Label, RadioGroup, RadioGroupItem } from "@firecms/ui";
+
+export default function LabelRadioButtonDemo() {
+    return (
+        <div className={"flex flex-col gap-2"}>
+            <Label className="text-base" htmlFor="color">
+                Color
+            </Label>
+            <RadioGroup className="flex flex-col gap-2" defaultValue="black" id="color">
+                <Label
+                    border={true}
+                    className="cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    htmlFor="color-black"
+                >
+                    <RadioGroupItem id="color-black" value="black"/>
+                    Black
+                </Label>
+                <Label
+                    border={true}
+                    className="cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    htmlFor="color-white"
+                >
+                    <RadioGroupItem id="color-white" value="white"/>
+                    White
+                </Label>
+                <Label
+                    border={true}
+                    className="cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    htmlFor="color-blue"
+                >
+                    <RadioGroupItem id="color-blue" value="blue"/>
+                    Blue
+                </Label>
+            </RadioGroup>
+        </div>
+    );
+}
diff --git a/website/samples/components/multi_select/multi_select_basic.tsx b/website/samples/components/multi_select/multi_select_basic.tsx
index 82260ad3f..b381255ac 100644
--- a/website/samples/components/multi_select/multi_select_basic.tsx
+++ b/website/samples/components/multi_select/multi_select_basic.tsx
@@ -7,11 +7,11 @@ export default function MultiSelectBasicDemo() {
     return (
         <MultiSelect
             value={selectedValues}
-            onMultiValueChange={setSelectedValues}
+            onValueChange={setSelectedValues}
             label="Basic MultiSelect">
             <MultiSelectItem value="option1">Option 1</MultiSelectItem>
             <MultiSelectItem value="option2">Option 2</MultiSelectItem>
             <MultiSelectItem value="option3">Option 3</MultiSelectItem>
         </MultiSelect>
     );
-}
\ No newline at end of file
+}
diff --git a/website/samples/components/multi_select/multi_select_custom_render.tsx b/website/samples/components/multi_select/multi_select_custom_render.tsx
index 1a501e101..269d79727 100644
--- a/website/samples/components/multi_select/multi_select_custom_render.tsx
+++ b/website/samples/components/multi_select/multi_select_custom_render.tsx
@@ -7,16 +7,20 @@ export default function MultiSelectCustomRenderDemo() {
     return (
         <MultiSelect
             value={selectedValues}
-            onMultiValueChange={setSelectedValues}
+            onValueChange={setSelectedValues}
             label="Custom Render MultiSelect"
-            renderValue={(value, index) => (
-                <span key={index} style={{ marginRight: 8, background: "#eee", padding: 4 }}>
+            renderValues={(values) => (values.map((value, index) =>
+                <span key={index} style={{
+                    marginRight: 8,
+                    background: "#eee",
+                    padding: 4
+                }}>
                     {value}
-                </span>
+                </span>)
             )}>
             <MultiSelectItem value="red">Red</MultiSelectItem>
             <MultiSelectItem value="green">Green</MultiSelectItem>
             <MultiSelectItem value="blue">Blue</MultiSelectItem>
         </MultiSelect>
     );
-}
\ No newline at end of file
+}
diff --git a/website/samples/components/multi_select/multi_select_disabled.tsx b/website/samples/components/multi_select/multi_select_disabled.tsx
index 1d8da8358..27790c6ad 100644
--- a/website/samples/components/multi_select/multi_select_disabled.tsx
+++ b/website/samples/components/multi_select/multi_select_disabled.tsx
@@ -7,14 +7,20 @@ export default function MultiSelectDisabledDemo() {
             disabled
             label="Disabled MultiSelect"
             value={["option1"]}
-            renderValue={(value) => (
-                <span style={{ marginRight: 8, background: "#eee", padding: 4 }}>
+            renderValues={(values) => (values.map((value) =>
+                    <span
+                        key={value}
+                        style={{
+                        marginRight: 8,
+                        background: "#eee",
+                        padding: 4
+                    }}>
                     {value}
-                </span>
+                </span>)
             )}>
             <MultiSelectItem value="option1">Option 1</MultiSelectItem>
             <MultiSelectItem value="option2">Option 2 is disabled</MultiSelectItem>
             <MultiSelectItem value="option3">Option 3 is disabled</MultiSelectItem>
         </MultiSelect>
     );
-}
\ No newline at end of file
+}
diff --git a/website/samples/components/popover/popover_align.tsx b/website/samples/components/popover/popover_align.tsx
index c36efd982..c94f8745a 100644
--- a/website/samples/components/popover/popover_align.tsx
+++ b/website/samples/components/popover/popover_align.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { Popover } from "@firecms/ui";
+import { Button, Popover } from "@firecms/ui";
 
 export default function PopoverAlignDemo() {
     return (
         <div>
             <Popover
-                trigger={<button className="btn">Open Left</button>}
+                trigger={<Button>Open Left</Button>}
                 side="left"
             >
                 <div className="p-4">
@@ -13,7 +13,7 @@ export default function PopoverAlignDemo() {
                 </div>
             </Popover>
             <Popover
-                trigger={<button className="btn ml-2">Open Bottom</button>}
+                trigger={<Button>Open Bottom</Button>}
                 side="bottom"
             >
                 <div className="p-4">
@@ -22,4 +22,4 @@ export default function PopoverAlignDemo() {
             </Popover>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/website/samples/components/popover/popover_controlled.tsx b/website/samples/components/popover/popover_controlled.tsx
index 44597d922..c53428165 100644
--- a/website/samples/components/popover/popover_controlled.tsx
+++ b/website/samples/components/popover/popover_controlled.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
-import { Popover } from "@firecms/ui";
+import { Button, Popover } from "@firecms/ui";
 
 export default function PopoverControlledDemo() {
     const [open, setOpen] = useState(false);
-    
+
     return (
         <Popover
-            trigger={<button className="btn" onClick={() => setOpen(!open)}>Toggle Popover</button>}
+            trigger={<Button onClick={() => setOpen(!open)}>Toggle Popover</Button>}
             open={open}
             onOpenChange={setOpen}
         >
@@ -15,4 +15,4 @@ export default function PopoverControlledDemo() {
             </div>
         </Popover>
     );
-}
\ No newline at end of file
+}
diff --git a/website/samples/components/popover/popover_styled.tsx b/website/samples/components/popover/popover_styled.tsx
index 01063b8dd..c7592d48a 100644
--- a/website/samples/components/popover/popover_styled.tsx
+++ b/website/samples/components/popover/popover_styled.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Popover } from "@firecms/ui";
+import { Button, Popover } from "@firecms/ui";
 
 export default function PopoverStyledDemo() {
     return (
         <Popover
-            trigger={<button className="btn">Open Custom Styled Popover</button>}
+            trigger={<Button>Open Custom Styled Popover</Button>}
             className="bg-purple-500 text-white p-3 rounded-lg shadow-lg"
         >
             <div>
@@ -12,4 +12,4 @@ export default function PopoverStyledDemo() {
             </div>
         </Popover>
     );
-}
\ No newline at end of file
+}
diff --git a/website/sidebars.js b/website/sidebars.js
index 58e588822..dc15802e5 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -160,11 +160,12 @@ module.exports = {
                 "components/file_upload",
                 "components/icon_button",
                 "components/info_label",
+                "components/label",
                 "components/loading_button",
                 "components/markdown",
                 "components/menu",
                 "components/menubar",
-                // "components/multi_select",
+                "components/multi_select",
                 "components/paper",
                 "components/popover",
                 "components/radio_group",
diff --git a/website/src/partials/ui/ClientUIComponentsShowcase.tsx b/website/src/partials/ui/ClientUIComponentsShowcase.tsx
index c51afbe4f..00f5731ed 100644
--- a/website/src/partials/ui/ClientUIComponentsShowcase.tsx
+++ b/website/src/partials/ui/ClientUIComponentsShowcase.tsx
@@ -303,7 +303,7 @@ export default function ClientUIComponentsShowcase() {
                     <ArrowForwardIcon size="smallest"/>
                 </IconButton>
                 <Typography variant="subtitle2">Popover</Typography>
-                <Popover trigger={<button className="btn">Open Popover</button>}>
+                <Popover trigger={<Button>Open Popover</Button>}>
                     <div className="flow-root p-4">This is a basic Popover.</div>
                 </Popover>
             </Card>
@@ -402,7 +402,8 @@ export default function ClientUIComponentsShowcase() {
                     <ArrowForwardIcon size="smallest"/>
                 </IconButton>
                 <Typography variant="subtitle2">Expandable Panel</Typography>
-                <ExpandablePanel title={"Click to expand"} expanded={isExpandablePanelOpen}
+                <ExpandablePanel title={"Click to expand"}
+                                 expanded={isExpandablePanelOpen}
                                  onExpandedChange={setExpandablePanelOpen}>
                     <div className="flow-root p-4">Here is some content that was hidden but now is
                         visible!