feat(ui)!: passes field props to custom components (#7360)

## Description

Currently, there is no way to read field props from within a custom
field component, i.e. `admin.components.Description`. For example, if
you set `maxLength: 100` on your field, your custom description
component cannot read it from `props.maxLength` or any other methods.
Because these components are rendered on the server, there is also no
way of using `admin.component.Field` to inject custom props yourself,
either. To support this, we can simply pass the base component props
into these components on the server, as expected. This has also led to
custom field component props becoming more strictly typed within the
config.

This change is considered breaking only because the types have changed.
This only affects you if you were previously importing the following
types into your own custom components. To migrate, simply change the
import paths for that type.

Old:
```ts
import type {
  ArrayFieldProps,
  ReducedBlock,
  BlocksFieldProps,
  CheckboxFieldProps,
  CodeFieldProps,
  CollapsibleFieldProps,
  DateFieldProps,
  EmailFieldProps,
  GroupFieldProps,
  HiddenFieldProps,
  JSONFieldProps,
  NumberFieldProps,
  PointFieldProps,
  RadioFieldProps,
  RelationshipFieldProps,
  RichTextComponentProps,
  RowFieldProps,
  SelectFieldProps,
  TabsFieldProps,
  TextFieldProps,
  TextareaFieldProps,
  UploadFieldProps,
  ErrorProps,
  FormFieldBase, 
  FieldComponentProps,
  FieldMap,
  MappedField,
  MappedTab,
  ReducedBlock,
} from '@payloadcms/ui'
```

New:
```ts
import type {
  FormFieldBase, 
  // etc.
} from 'payload'
```

Custom field components are now much more strongly typed. To make this
happen, an explicit type for every custom component has been generated
for every field type. The convention is to append
`DescriptionComponent`, `LabelComponent`, and `ErrorComponent` onto the
end of the field name, i.e. `TextFieldDescriptionComponent`. Here's an
example:

```ts
import type { TextFieldDescriptionComponent } from 'payload'

import React from 'react'

export const CustomDescription: TextFieldDescriptionComponent = (props) => {
  return (
    <div id="custom-field-description">{`The max length of this field is: ${props?.maxLength}`}</div>
  )
}
```

Here's the full list of all new types:

Label Components:

```ts
import type {
  ArrayFieldLabelComponent,
  BlocksFieldLabelComponent,
  CheckboxFieldLabelComponent,
  CodeFieldLabelComponent,
  CollapsibleFieldLabelComponent,
  DateFieldLabelComponent,
  EmailFieldLabelComponent,
  GroupFieldLabelComponent,
  HiddenFieldLabelComponent,
  JSONFieldLabelComponent,
  NumberFieldLabelComponent,
  PointFieldLabelComponent,
  RadioFieldLabelComponent,
  RelationshipFieldLabelComponent,
  RichTextFieldLabelComponent,
  RowFieldLabelComponent,
  SelectFieldLabelComponent,
  TabsFieldLabelComponent,
  TextFieldLabelComponent,
  TextareaFieldLabelComponent,
  UploadFieldLabelComponent
} from 'payload'
```

Error Components:

```tsx
import type {
  ArrayFieldErrorComponent,
  BlocksFieldErrorComponent,
  CheckboxFieldErrorComponent,
  CodeFieldErrorComponent,
  CollapsibleFieldErrorComponent,
  DateFieldErrorComponent,
  EmailFieldErrorComponent,
  GroupFieldErrorComponent,
  HiddenFieldErrorComponent,
  JSONFieldErrorComponent,
  NumberFieldErrorComponent,
  PointFieldErrorComponent,
  RadioFieldErrorComponent,
  RelationshipFieldErrorComponent,
  RichTextFieldErrorComponent,
  RowFieldErrorComponent,
  SelectFieldErrorComponent,
  TabsFieldErrorComponent,
  TextFieldErrorComponent,
  TextareaFieldErrorComponent,
  UploadFieldErrorComponent
} from 'payload'
```

Description Components:

```tsx
import type {
  ArrayFieldDescriptionComponent,
  BlocksFieldDescriptionComponent,
  CheckboxFieldDescriptionComponent,
  CodeFieldDescriptionComponent,
  CollapsibleFieldDescriptionComponent,
  DateFieldDescriptionComponent,
  EmailFieldDescriptionComponent,
  GroupFieldDescriptionComponent,
  HiddenFieldDescriptionComponent,
  JSONFieldDescriptionComponent,
  NumberFieldDescriptionComponent,
  PointFieldDescriptionComponent,
  RadioFieldDescriptionComponent,
  RelationshipFieldDescriptionComponent,
  RichTextFieldDescriptionComponent,
  RowFieldDescriptionComponent,
  SelectFieldDescriptionComponent,
  TabsFieldDescriptionComponent,
  TextFieldDescriptionComponent,
  TextareaFieldDescriptionComponent,
  UploadFieldDescriptionComponent
} from 'payload'
```

This PR also:
- Standardizes the `FieldBase['label']` type with a new `LabelStatic`
type. This makes type usage much more consistent across components.
- Simplifies some of the typings in the field component map, removes
unneeded `<Omit>`, etc.
- Fixes misc. linting issues around voiding promises

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## Checklist:

- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] Existing test suite passes locally with my changes
- [x] I have made corresponding changes to the documentation

docs/admin/fields.mdx

@@ -266,12 +266,10 @@ export const myField: Field = {
 
 _For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components)._
 
-All Label Components receive the following props:
+Custom Label Components receive all [Field Component](#the-field-component) props, plus the following props:
 
 | Property       | Description                                                      |
 | -------------- | ---------------------------------------------------------------- |
-| **`label`**    | Label value provided in field, it can be used with i18n.         |
-| **`required`** | The `admin.required` property defined in the [Field Config](../fields/overview). |
 | **`schemaPath`** | The path to the field in the schema. Similar to `path`, but without dynamic indices. |
 
 <Banner type="success">
@@ -279,6 +277,36 @@ All Label Components receive the following props:
   All [Custom Server Components](./components) receive the `payload` and `i18n` properties by default. See [Building Custom Components](./components#building-custom-components) for more details.
 </Banner>
 
+#### TypeScript
+
+When building Custom Error Components, you can import the component props to ensure type safety in your component. There is an explicit type for the Error Component, one for every [Field Type](../fields/overview). The convention is to append `ErrorComponent` to the type of field, i.e. `TextFieldErrorComponent`.
+
+```tsx
+import type {
+  ArrayFieldLabelComponent,
+  BlocksFieldLabelComponent,
+  CheckboxFieldLabelComponent,
+  CodeFieldLabelComponent,
+  CollapsibleFieldLabelComponent,
+  DateFieldLabelComponent,
+  EmailFieldLabelComponent,
+  GroupFieldLabelComponent,
+  HiddenFieldLabelComponent,
+  JSONFieldLabelComponent,
+  NumberFieldLabelComponent,
+  PointFieldLabelComponent,
+  RadioFieldLabelComponent,
+  RelationshipFieldLabelComponent,
+  RichTextFieldLabelComponent,
+  RowFieldLabelComponent,
+  SelectFieldLabelComponent,
+  TabsFieldLabelComponent,
+  TextFieldLabelComponent,
+  TextareaFieldLabelComponent,
+  UploadFieldLabelComponent
+} from 'payload'
+```
+
 ### The Error Component
 
 The Error Component is rendered when a field fails validation. It is typically displayed beneath the field input in a visually-compelling style.
@@ -301,7 +329,7 @@ export const myField: Field = {
 
 _For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components)._
 
-All Error Components receive the following props:
+Custom Error Components receive all [Field Component](#the-field-component) props, plus the following props:
 
 | Property        | Description                                                   |
 | --------------- | ------------------------------------------------------------- |
@@ -312,6 +340,36 @@ All Error Components receive the following props:
   All [Custom Server Components](./components) receive the `payload` and `i18n` properties by default. See [Building Custom Components](./components#building-custom-components) for more details.
 </Banner>
 
+#### TypeScript
+
+When building Custom Error Components, you can import the component props to ensure type safety in your component. There is an explicit type for the Error Component, one for every [Field Type](../fields/overview). The convention is to append `ErrorComponent` to the type of field, i.e. `TextFieldErrorComponent`.
+
+```tsx
+import type {
+  ArrayFieldErrorComponent,
+  BlocksFieldErrorComponent,
+  CheckboxFieldErrorComponent,
+  CodeFieldErrorComponent,
+  CollapsibleFieldErrorComponent,
+  DateFieldErrorComponent,
+  EmailFieldErrorComponent,
+  GroupFieldErrorComponent,
+  HiddenFieldErrorComponent,
+  JSONFieldErrorComponent,
+  NumberFieldErrorComponent,
+  PointFieldErrorComponent,
+  RadioFieldErrorComponent,
+  RelationshipFieldErrorComponent,
+  RichTextFieldErrorComponent,
+  RowFieldErrorComponent,
+  SelectFieldErrorComponent,
+  TabsFieldErrorComponent,
+  TextFieldErrorComponent,
+  TextareaFieldErrorComponent,
+  UploadFieldErrorComponent
+} from 'payload'
+```
+
 ### The Description Property
 
 Field Descriptions are used to provide additional information to the editor about a field, such as special instructions. Their placement varies from field to field, but typically are displayed with subtle style differences beneath the field inputs.
@@ -406,7 +464,7 @@ export const MyCollectionConfig: SanitizedCollectionConfig = {
 
 _For details on how to build a Custom Description, see [Building Custom Components](./components#building-custom-components)._
 
-All Description Components receive the following props:
+Custom Description Components receive all [Field Component](#the-field-component) props, plus the following props:
 
 | Property       | Description                                                      |
 | -------------- | ---------------------------------------------------------------- |
@@ -417,6 +475,36 @@ All Description Components receive the following props:
   All [Custom Server Components](./components) receive the `payload` and `i18n` properties by default. See [Building Custom Components](./components#building-custom-components) for more details.
 </Banner>
 
+#### TypeScript
+
+When building Custom Description Components, you can import the component props to ensure type safety in your component. There is an explicit type for the Description Component, one for every [Field Type](../fields/overview). The convention is to append `DescriptionComponent` to the type of field, i.e. `TextFieldDescriptionComponent`.
+
+```tsx
+import type {
+  ArrayFieldDescriptionComponent,
+  BlocksFieldDescriptionComponent,
+  CheckboxFieldDescriptionComponent,
+  CodeFieldDescriptionComponent,
+  CollapsibleFieldDescriptionComponent,
+  DateFieldDescriptionComponent,
+  EmailFieldDescriptionComponent,
+  GroupFieldDescriptionComponent,
+  HiddenFieldDescriptionComponent,
+  JSONFieldDescriptionComponent,
+  NumberFieldDescriptionComponent,
+  PointFieldDescriptionComponent,
+  RadioFieldDescriptionComponent,
+  RelationshipFieldDescriptionComponent,
+  RichTextFieldDescriptionComponent,
+  RowFieldDescriptionComponent,
+  SelectFieldDescriptionComponent,
+  TabsFieldDescriptionComponent,
+  TextFieldDescriptionComponent,
+  TextareaFieldDescriptionComponent,
+  UploadFieldDescriptionComponent
+} from 'payload'
+```
+
 ### afterInput and beforeInput
 
 With these properties you can add multiple components _before_ and _after_ the input element, as their name suggests. This is useful when you need to render additional elements alongside the field without replacing the entire field component.

docs/migration-guide/overview.mdx

@@ -335,7 +335,6 @@ import {
   FieldMap,
   File,
   Form,
-  FormFieldBase,
   FormLoadingOverlayToggle,
   FormSubmit,
   GenerateConfirmation,

packages/create-payload-app/src/lib/wrap-next-config.ts

@@ -138,7 +138,7 @@ export async function parseAndModifyConfigContent(
       (m) =>
         m.type === 'ExportDefaultExpression' &&
         (m.expression.type === 'Identifier' || m.expression.type === 'CallExpression'),
-    ) as ExportDefaultExpression | undefined
+    )
 
     if (exportDefaultDeclaration) {
       if (!('span' in exportDefaultDeclaration.expression)) {

packages/drizzle/src/transform/read/traverseFields.ts

@@ -1,5 +1,4 @@
- 
+import type { Field, SanitizedConfig, TabAsField } from 'payload'
-import type { Field, SanitizedConfig , TabAsField } from 'payload'
 
 import { fieldAffectsData } from 'payload/shared'
 

packages/next/src/views/LivePreview/index.client.tsx

@@ -1,11 +1,11 @@
 'use client'
 import type { FormProps } from '@payloadcms/ui'
-import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
 import type {
   ClientCollectionConfig,
   ClientConfig,
   ClientGlobalConfig,
   Data,
+  FieldMap,
   LivePreviewConfig,
 } from 'payload'
 

packages/next/src/views/Version/Default/SetStepNav.tsx

@@ -1,6 +1,5 @@
 import type { StepNavItem } from '@payloadcms/ui'
-import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
+import type { ClientCollectionConfig, ClientGlobalConfig, FieldMap } from 'payload'
-import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'
 import type React from 'react'
 
 import { getTranslation } from '@payloadcms/translations'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Iterable/index.tsx

@@ -1,4 +1,4 @@
-import type { MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
+import type { MappedField } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import { getUniqueListBy } from 'payload/shared'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx

@@ -1,8 +1,8 @@
 'use client'
-import type { ClientCollectionConfig } from 'payload'
+import type { ClientCollectionConfig, MappedField } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
-import { type MappedField, useConfig } from '@payloadcms/ui'
+import { useConfig } from '@payloadcms/ui'
 import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/shared'
 import React from 'react'
 import ReactDiffViewerImport from 'react-diff-viewer-continued'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/index.tsx

@@ -1,7 +1,5 @@
 import type { I18nClient } from '@payloadcms/translations'
-import type { SelectFieldProps } from '@payloadcms/ui'
+import type { MappedField, OptionObject, SelectField, SelectFieldProps } from 'payload'
-import type { MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
-import type { OptionObject, SelectField } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'

packages/next/src/views/Version/RenderFieldsToDiff/fields/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import type { MappedField, TabsFieldProps } from '@payloadcms/ui'
+import type { MappedField, TabsFieldProps } from 'payload'
 
 import React from 'react'
 

packages/next/src/views/Version/RenderFieldsToDiff/fields/types.ts

@@ -1,6 +1,5 @@
 import type { I18nClient } from '@payloadcms/translations'
-import type { FieldMap, MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
+import type { FieldMap, FieldPermissions, MappedField } from 'payload'
-import type { FieldPermissions } from 'payload'
 import type React from 'react'
 import type { DiffMethod } from 'react-diff-viewer-continued'
 

packages/next/src/views/Version/RenderFieldsToDiff/types.ts

@@ -1,6 +1,5 @@
 import type { I18nClient } from '@payloadcms/translations'
-import type { FieldMap, MappedField } from '@payloadcms/ui/utilities/buildComponentMap'
+import type { FieldMap, FieldPermissions, MappedField } from 'payload'
-import type { FieldPermissions } from 'payload'
 import type { DiffMethod } from 'react-diff-viewer-continued'
 
 import type { DiffComponents } from './fields/types.js'

packages/payload/src/admin/elements/Cell.ts

@@ -8,6 +8,7 @@ import type {
   RelationshipField,
   SelectField,
 } from '../../fields/config/types.js'
+import type { FormFieldBase } from '../types.js'
 
 export type RowData = Record<string, any>
 
@@ -20,7 +21,7 @@ export type CellComponentProps = {
   dateDisplayFormat?: DateField['admin']['date']['displayFormat']
   fieldType?: Field['type']
   isFieldAffectingData?: boolean
-  label?: Record<string, string> | string
+  label?: FormFieldBase['label']
   labels?: Labels
   link?: boolean
   name: FieldBase['name']

packages/payload/src/admin/fields/Array.ts

@@ -0,0 +1,22 @@
+import type { ArrayField } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { FieldMap } from '../forms/FieldMap.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type ArrayFieldProps = {
+  CustomRowLabel?: React.ReactNode
+  fieldMap: FieldMap
+  forceRender?: boolean
+  isSortable?: boolean
+  labels?: ArrayField['labels']
+  maxRows?: ArrayField['maxRows']
+  minRows?: ArrayField['minRows']
+  name?: string
+  width?: string
+} & FormFieldBase
+
+export type ArrayFieldLabelComponent = LabelComponent<'array'>
+
+export type ArrayFieldDescriptionComponent = DescriptionComponent<'array'>
+
+export type ArrayFieldErrorComponent = ErrorComponent<'array'>

packages/payload/src/admin/fields/Blocks.ts

@@ -0,0 +1,32 @@
+import type { Block, BlockField } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { FieldMap } from '../forms/FieldMap.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type BlocksFieldProps = {
+  blocks?: ReducedBlock[]
+  forceRender?: boolean
+  isSortable?: boolean
+  labels?: BlockField['labels']
+  maxRows?: number
+  minRows?: number
+  name?: string
+  slug?: string
+  width?: string
+} & FormFieldBase
+
+export type ReducedBlock = {
+  LabelComponent: Block['admin']['components']['Label']
+  custom?: Record<any, string>
+  fieldMap: FieldMap
+  imageAltText?: string
+  imageURL?: string
+  labels: BlockField['labels']
+  slug: string
+}
+
+export type BlocksFieldLabelComponent = LabelComponent<'blocks'>
+
+export type BlocksFieldDescriptionComponent = DescriptionComponent<'blocks'>
+
+export type BlocksFieldErrorComponent = ErrorComponent<'blocks'>

packages/payload/src/admin/fields/Checkbox.ts

@@ -0,0 +1,19 @@
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type CheckboxFieldProps = {
+  checked?: boolean
+  disableFormData?: boolean
+  id?: string
+  name?: string
+  onChange?: (val: boolean) => void
+  partialChecked?: boolean
+  path?: string
+  width?: string
+} & FormFieldBase
+
+export type CheckboxFieldLabelComponent = LabelComponent<'checkbox'>
+
+export type CheckboxFieldDescriptionComponent = DescriptionComponent<'checkbox'>
+
+export type CheckboxFieldErrorComponent = ErrorComponent<'checkbox'>

packages/payload/src/admin/fields/Code.ts

@@ -0,0 +1,17 @@
+import type { CodeField } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type CodeFieldProps = {
+  editorOptions?: CodeField['admin']['editorOptions']
+  language?: CodeField['admin']['language']
+  name?: string
+  path?: string
+  width: string
+} & FormFieldBase
+
+export type CodeFieldLabelComponent = LabelComponent<'code'>
+
+export type CodeFieldDescriptionComponent = DescriptionComponent<'code'>
+
+export type CodeFieldErrorComponent = ErrorComponent<'code'>

packages/payload/src/admin/fields/Collapsible.ts

@@ -0,0 +1,15 @@
+import type { ErrorComponent } from '../forms/Error.js'
+import type { FieldMap } from '../forms/FieldMap.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type CollapsibleFieldProps = {
+  fieldMap: FieldMap
+  initCollapsed?: boolean
+  width?: string
+} & FormFieldBase
+
+export type CollapsibleFieldLabelComponent = LabelComponent<'collapsible'>
+
+export type CollapsibleFieldDescriptionComponent = DescriptionComponent<'collapsible'>
+
+export type CollapsibleFieldErrorComponent = ErrorComponent<'collapsible'>

packages/payload/src/admin/fields/Date.ts

@@ -0,0 +1,17 @@
+import type { DateField } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type DateFieldProps = {
+  date?: DateField['admin']['date']
+  name?: string
+  path?: string
+  placeholder?: DateField['admin']['placeholder'] | string
+  width?: string
+} & FormFieldBase
+
+export type DateFieldLabelComponent = LabelComponent<'date'>
+
+export type DateFieldDescriptionComponent = DescriptionComponent<'date'>
+
+export type DateFieldErrorComponent = ErrorComponent<'date'>

packages/payload/src/admin/fields/Email.ts

@@ -0,0 +1,17 @@
+import type { EmailField } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type EmailFieldProps = {
+  autoComplete?: string
+  name?: string
+  path?: string
+  placeholder?: EmailField['admin']['placeholder']
+  width?: string
+} & FormFieldBase
+
+export type EmailFieldLabelComponent = LabelComponent<'email'>
+
+export type EmailFieldDescriptionComponent = DescriptionComponent<'email'>
+
+export type EmailFieldErrorComponent = ErrorComponent<'email'>

packages/payload/src/admin/fields/Group.ts

@@ -0,0 +1,17 @@
+import type { ErrorComponent } from '../forms/Error.js'
+import type { FieldMap } from '../forms/FieldMap.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type GroupFieldProps = {
+  fieldMap: FieldMap
+  forceRender?: boolean
+  hideGutter?: boolean
+  name?: string
+  width?: string
+} & FormFieldBase
+
+export type GroupFieldLabelComponent = LabelComponent<'group'>
+
+export type GroupFieldDescriptionComponent = DescriptionComponent<'group'>
+
+export type GroupFieldErrorComponent = ErrorComponent<'group'>

packages/payload/src/admin/fields/Hidden.ts

@@ -0,0 +1,16 @@
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type HiddenFieldProps = {
+  disableModifyingForm?: false
+  forceUsePathFromProps?: boolean
+  name?: string
+  path?: string
+  value?: unknown
+} & FormFieldBase
+
+export type HiddenFieldLabelComponent = LabelComponent<'hidden'>
+
+export type HiddenFieldDescriptionComponent = DescriptionComponent<'hidden'>
+
+export type HiddenFieldErrorComponent = ErrorComponent<'hidden'>

packages/payload/src/admin/fields/JSON.ts

@@ -0,0 +1,17 @@
+import type { JSONField } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type JSONFieldProps = {
+  editorOptions?: JSONField['admin']['editorOptions']
+  jsonSchema?: Record<string, unknown>
+  name?: string
+  path?: string
+  width?: string
+} & FormFieldBase
+
+export type JSONFieldLabelComponent = LabelComponent<'json'>
+
+export type JSONFieldDescriptionComponent = DescriptionComponent<'json'>
+
+export type JSONFieldErrorComponent = ErrorComponent<'json'>

packages/payload/src/admin/fields/Number.ts

@@ -0,0 +1,22 @@
+import type { NumberField } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type NumberFieldProps = {
+  hasMany?: boolean
+  max?: number
+  maxRows?: number
+  min?: number
+  name?: string
+  onChange?: (e: number) => void
+  path?: string
+  placeholder?: NumberField['admin']['placeholder']
+  step?: number
+  width?: string
+} & FormFieldBase
+
+export type NumberFieldLabelComponent = LabelComponent<'number'>
+
+export type NumberFieldDescriptionComponent = DescriptionComponent<'number'>
+
+export type NumberFieldErrorComponent = ErrorComponent<'number'>

packages/payload/src/admin/fields/Point.ts

@@ -0,0 +1,16 @@
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type PointFieldProps = {
+  name?: string
+  path?: string
+  placeholder?: string
+  step?: number
+  width?: string
+} & FormFieldBase
+
+export type PointFieldLabelComponent = LabelComponent<'point'>
+
+export type PointFieldDescriptionComponent = DescriptionComponent<'point'>
+
+export type PointFieldErrorComponent = ErrorComponent<'point'>

packages/payload/src/admin/fields/Radio.ts

@@ -0,0 +1,21 @@
+import type { Option } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type RadioFieldProps = {
+  layout?: 'horizontal' | 'vertical'
+  name?: string
+  onChange?: OnChange
+  options?: Option[]
+  path?: string
+  value?: string
+  width?: string
+} & FormFieldBase
+
+export type OnChange<T = string> = (value: T) => void
+
+export type RadioFieldLabelComponent = LabelComponent<'radio'>
+
+export type RadioFieldDescriptionComponent = DescriptionComponent<'radio'>
+
+export type RadioFieldErrorComponent = ErrorComponent<'radio'>

packages/payload/src/admin/fields/Relationship.ts

@@ -0,0 +1,19 @@
+import type { RelationshipField } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type RelationshipFieldProps = {
+  allowCreate?: RelationshipField['admin']['allowCreate']
+  hasMany?: boolean
+  isSortable?: boolean
+  name: string
+  relationTo?: RelationshipField['relationTo']
+  sortOptions?: RelationshipField['admin']['sortOptions']
+  width?: string
+} & FormFieldBase
+
+export type RelationshipFieldLabelComponent = LabelComponent<'relationship'>
+
+export type RelationshipFieldDescriptionComponent = DescriptionComponent<'relationship'>
+
+export type RelationshipFieldErrorComponent = ErrorComponent<'relationship'>

packages/payload/src/admin/fields/RichText.ts

@@ -0,0 +1,15 @@
+import type { ErrorComponent } from '../forms/Error.js'
+import type { MappedField } from '../forms/FieldMap.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type RichTextComponentProps = {
+  name: string
+  richTextComponentMap?: Map<string, MappedField[] | React.ReactNode>
+  width?: string
+} & FormFieldBase
+
+export type RichTextFieldLabelComponent = LabelComponent<'richText'>
+
+export type RichTextFieldDescriptionComponent = DescriptionComponent<'richText'>
+
+export type RichTextFieldErrorComponent = ErrorComponent<'richText'>

packages/payload/src/admin/fields/Row.ts

@@ -0,0 +1,18 @@
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from 'payload'
+
+import type { ErrorComponent } from '../forms/Error.js'
+import type { FieldMap } from '../forms/FieldMap.js'
+
+export type RowFieldProps = {
+  fieldMap: FieldMap
+  forceRender?: boolean
+  indexPath: string
+  path?: string
+  width?: string
+} & FormFieldBase
+
+export type RowFieldLabelComponent = LabelComponent<'row'>
+
+export type RowFieldDescriptionComponent = DescriptionComponent<'row'>
+
+export type RowFieldErrorComponent = ErrorComponent<'row'>

packages/payload/src/admin/fields/Select.ts

@@ -0,0 +1,21 @@
+import type { Option } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type SelectFieldProps = {
+  hasMany?: boolean
+  isClearable?: boolean
+  isSortable?: boolean
+  name?: string
+  onChange?: (e: string | string[]) => void
+  options?: Option[]
+  path?: string
+  value?: string
+  width?: string
+} & FormFieldBase
+
+export type SelectFieldLabelComponent = LabelComponent<'select'>
+
+export type SelectFieldDescriptionComponent = DescriptionComponent<'select'>
+
+export type SelectFieldErrorComponent = ErrorComponent<'select'>

packages/payload/src/admin/fields/Tabs.ts

@@ -0,0 +1,24 @@
+import type { TabsField } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { FieldMap } from '../forms/FieldMap.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type TabsFieldProps = {
+  forceRender?: boolean
+  name?: string
+  path?: string
+  tabs?: MappedTab[]
+  width?: string
+} & FormFieldBase
+
+export type MappedTab = {
+  fieldMap?: FieldMap
+  label: TabsField['tabs'][0]['label']
+  name?: string
+}
+
+export type TabsFieldLabelComponent = LabelComponent<'tabs'>
+
+export type TabsFieldDescriptionComponent = DescriptionComponent<'tabs'>
+
+export type TabsFieldErrorComponent = ErrorComponent<'tabs'>

packages/payload/src/admin/fields/Text.ts

@@ -0,0 +1,23 @@
+import type { TextField } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type TextFieldProps = {
+  hasMany?: boolean
+  inputRef?: React.MutableRefObject<HTMLInputElement>
+  maxLength?: number
+  maxRows?: number
+  minLength?: number
+  minRows?: number
+  name?: string
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>
+  path?: string
+  placeholder?: TextField['admin']['placeholder']
+  width?: string
+} & FormFieldBase
+
+export type TextFieldLabelComponent = LabelComponent<'text'>
+
+export type TextFieldDescriptionComponent = DescriptionComponent<'text'>
+
+export type TextFieldErrorComponent = ErrorComponent<'text'>

packages/payload/src/admin/fields/Textarea.ts

@@ -0,0 +1,19 @@
+import type { TextareaField } from '../../fields/config/types.js'
+import type { ErrorComponent } from '../forms/Error.js'
+import type { DescriptionComponent, FormFieldBase, LabelComponent } from '../types.js'
+
+export type TextareaFieldProps = {
+  maxLength?: number
+  minLength?: number
+  name?: string
+  path?: string
+  placeholder?: TextareaField['admin']['placeholder']
+  rows?: number
+  width?: string
+} & FormFieldBase
+
+export type TextareaFieldLabelComponent = LabelComponent<'textarea'>
+
+export type TextareaFieldDescriptionComponent = DescriptionComponent<'textarea'>
+
+export type TextareaFieldErrorComponent = ErrorComponent<'textarea'>

packages/payload/src/admin/fields/Upload.ts

@@ -0,0 +1,17 @@
+import type { DescriptionComponent, FormFieldBase, LabelComponent, UploadField } from 'payload'
+
+import type { ErrorComponent } from '../forms/Error.js'
+
+export type UploadFieldProps = {
+  filterOptions?: UploadField['filterOptions']
+  name?: string
+  path?: string
+  relationTo?: UploadField['relationTo']
+  width?: string
+} & FormFieldBase
+
+export type UploadFieldLabelComponent = LabelComponent<'upload'>
+
+export type UploadFieldDescriptionComponent = DescriptionComponent<'upload'>
+
+export type UploadFieldErrorComponent = ErrorComponent<'upload'>

packages/payload/src/admin/fields/index.ts

@@ -0,0 +1,86 @@
+import type { ArrayFieldProps } from './Array.js'
+import type { BlocksFieldProps } from './Blocks.js'
+import type { CheckboxFieldProps } from './Checkbox.js'
+import type { CodeFieldProps } from './Code.js'
+import type { CollapsibleFieldProps } from './Collapsible.js'
+import type { DateFieldProps } from './Date.js'
+import type { EmailFieldProps } from './Email.js'
+import type { GroupFieldProps } from './Group.js'
+import type { HiddenFieldProps } from './Hidden.js'
+import type { JSONFieldProps } from './JSON.js'
+import type { NumberFieldProps } from './Number.js'
+import type { PointFieldProps } from './Point.js'
+import type { RadioFieldProps } from './Radio.js'
+import type { RelationshipFieldProps } from './Relationship.js'
+import type { RichTextComponentProps } from './RichText.js'
+import type { RowFieldProps } from './Row.js'
+import type { SelectFieldProps } from './Select.js'
+import type { TabsFieldProps } from './Tabs.js'
+import type { TextFieldProps } from './Text.js'
+import type { TextareaFieldProps } from './Textarea.js'
+import type { UploadFieldProps } from './Upload.js'
+
+export type FieldComponentProps =
+  | ({
+      type: 'array'
+    } & ArrayFieldProps)
+  | ({
+      type: 'blocks'
+    } & BlocksFieldProps)
+  | ({
+      type: 'checkbox'
+    } & CheckboxFieldProps)
+  | ({
+      type: 'code'
+    } & CodeFieldProps)
+  | ({
+      type: 'collapsible'
+    } & CollapsibleFieldProps)
+  | ({
+      type: 'date'
+    } & DateFieldProps)
+  | ({
+      type: 'email'
+    } & EmailFieldProps)
+  | ({
+      type: 'group'
+    } & GroupFieldProps)
+  | ({
+      type: 'hidden'
+    } & HiddenFieldProps)
+  | ({
+      type: 'json'
+    } & JSONFieldProps)
+  | ({
+      type: 'number'
+    } & NumberFieldProps)
+  | ({
+      type: 'point'
+    } & PointFieldProps)
+  | ({
+      type: 'radio'
+    } & RadioFieldProps)
+  | ({
+      type: 'relationship'
+    } & RelationshipFieldProps)
+  | ({
+      type: 'richText'
+    } & RichTextComponentProps)
+  | ({
+      type: 'row'
+    } & RowFieldProps)
+  | ({
+      type: 'select'
+    } & SelectFieldProps)
+  | ({
+      type: 'tabs'
+    } & TabsFieldProps)
+  | ({
+      type: 'text'
+    } & TextFieldProps)
+  | ({
+      type: 'textarea'
+    } & TextareaFieldProps)
+  | ({
+      type: 'upload'
+    } & UploadFieldProps)

packages/payload/src/admin/forms/Error.ts

@@ -1,7 +1,19 @@
-export type ErrorProps = {
+import type { CustomComponent, ServerProps } from '../../config/types.js'
+import type { FieldComponentProps } from '../types.js'
+import type { FieldTypes } from './FieldTypes.js'
+
+export type GenericErrorProps = {
   CustomError?: React.ReactNode
   alignCaret?: 'center' | 'left' | 'right'
   message?: string
   path?: string
   showError?: boolean
 }
+
+export type ErrorProps<T extends keyof FieldTypes = any> = {
+  type: T
+} & FieldComponentProps &
+  GenericErrorProps &
+  Partial<ServerProps>
+
+export type ErrorComponent<T extends keyof FieldTypes = any> = CustomComponent<ErrorProps<T>>

packages/payload/src/admin/forms/Field.ts

@@ -0,0 +1,32 @@
+import type { User } from '../../auth/types.js'
+import type { LabelStatic, Locale } from '../../config/types.js'
+import type { Validate } from '../../fields/config/types.js'
+import type { DocumentPreferences } from '../../preferences/types.js'
+import type { ErrorProps } from './Error.js'
+import type { FieldDescriptionProps } from './FieldDescription.js'
+import type { SanitizedLabelProps } from './Label.js'
+
+export type FormFieldBase = {
+  AfterInput?: React.ReactNode
+  BeforeInput?: React.ReactNode
+  CustomDescription?: React.ReactNode
+  CustomError?: React.ReactNode
+  CustomLabel?: React.ReactNode
+  className?: string
+  custom?: Record<string, any>
+  descriptionProps?: Omit<FieldDescriptionProps, 'type'>
+  disabled?: boolean
+  docPreferences?: DocumentPreferences
+  errorProps?: Omit<ErrorProps, 'type'>
+  label?: LabelStatic | false
+  labelProps?: SanitizedLabelProps
+  locale?: Locale
+  localized?: boolean
+  path?: string
+  readOnly?: boolean
+  required?: boolean
+  rtl?: boolean
+  style?: React.CSSProperties
+  user?: User
+  validate?: Validate
+}

packages/payload/src/admin/forms/FieldDescription.ts

@@ -1,18 +1,24 @@
 import type React from 'react'
 
-import type { CustomComponent, LabelFunction } from '../../config/types.js'
+import type { CustomComponent, LabelFunction, ServerProps } from '../../config/types.js'
-import type { Payload } from '../../index.js'
+import type { FieldComponentProps } from '../types.js'
+import type { FieldTypes } from './FieldTypes.js'
 
 export type DescriptionFunction = LabelFunction
 
-export type DescriptionComponent = CustomComponent<FieldDescriptionProps>
+export type DescriptionComponent<T extends keyof FieldTypes = any> = CustomComponent<
+  FieldDescriptionProps<T>
+>
 
 export type Description = DescriptionFunction | Record<string, string> | string
-
+export type GenericDescriptionProps = {
-export type FieldDescriptionProps = {
   CustomDescription?: React.ReactNode
   className?: string
   description?: Record<string, string> | string
   marginPlacement?: 'bottom' | 'top'
-  payload?: Payload
 }
+export type FieldDescriptionProps<T extends keyof FieldTypes = any> = {
+  type: T
+} & FieldComponentProps &
+  GenericDescriptionProps &
+  Partial<ServerProps>

packages/payload/src/admin/forms/FieldMap.ts

@@ -0,0 +1,24 @@
+import type { CellComponentProps, FieldComponentProps } from '../types.js'
+import type { FieldTypes } from './FieldTypes.js'
+
+export type MappedField = {
+  CustomCell?: React.ReactNode
+  CustomField?: React.ReactNode
+  cellComponentProps: CellComponentProps
+  custom?: Record<any, string>
+  disableBulkEdit?: boolean
+  disableListColumn?: boolean
+  disableListFilter?: boolean
+  disabled?: boolean
+  fieldComponentProps: FieldComponentProps
+  fieldIsPresentational: boolean
+  isFieldAffectingData: boolean
+  isHidden?: boolean
+  isSidebar?: boolean
+  localized: boolean
+  name?: string
+  type: keyof FieldTypes
+  unique?: boolean
+}
+
+export type FieldMap = MappedField[]

packages/payload/src/admin/forms/Label.ts

@@ -1,11 +1,24 @@
-export type LabelProps = {
+import type { CustomComponent, ServerProps } from '../../config/types.js'
-  CustomLabel?: React.ReactNode
+import type { FieldComponentProps } from '../fields/index.js'
+import type { FormFieldBase } from './Field.js'
+import type { FieldTypes } from './FieldTypes.js'
+
+export type GenericLabelProps = {
   as?: 'label' | 'span'
   htmlFor?: string
-  label?: Record<string, string> | string
-  required?: boolean
   schemaPath?: string
   unstyled?: boolean
-}
+} & FormFieldBase
 
-export type SanitizedLabelProps = Omit<LabelProps, 'label' | 'required'>
+export type LabelProps<T extends keyof FieldTypes = any> = {
+  type: T
+} & FieldComponentProps &
+  GenericLabelProps &
+  Partial<ServerProps>
+
+export type SanitizedLabelProps<T extends keyof FieldTypes = any> = Omit<
+  LabelProps<T>,
+  'label' | 'required'
+>
+
+export type LabelComponent<T extends keyof FieldTypes = any> = CustomComponent<LabelProps<T>>

packages/payload/src/admin/types.ts

@@ -7,6 +7,7 @@ export type { CustomPreviewButton } from './elements/PreviewButton.js'
 export type { CustomPublishButton } from './elements/PublishButton.js'
 export type { CustomSaveButton } from './elements/SaveButton.js'
 export type { CustomSaveDraftButton } from './elements/SaveDraftButton.js'
+
 export type {
   DocumentTab,
   DocumentTabComponent,
@@ -14,20 +15,191 @@ export type {
   DocumentTabConfig,
   DocumentTabProps,
 } from './elements/Tab.js'
+
 export type { CustomUpload } from './elements/Upload.js'
+
 export type {
   WithServerSidePropsComponent,
   WithServerSidePropsComponentProps,
 } from './elements/WithServerSideProps.js'
-export type { ErrorProps } from './forms/Error.js'
+
+export type {
+  ArrayFieldDescriptionComponent,
+  ArrayFieldErrorComponent,
+  ArrayFieldLabelComponent,
+  ArrayFieldProps,
+} from './fields/Array.js'
+
+export type { ReducedBlock } from './fields/Blocks.js'
+
+export type {
+  BlocksFieldDescriptionComponent,
+  BlocksFieldErrorComponent,
+  BlocksFieldLabelComponent,
+  BlocksFieldProps,
+} from './fields/Blocks.js'
+
+export type {
+  CheckboxFieldDescriptionComponent,
+  CheckboxFieldErrorComponent,
+  CheckboxFieldLabelComponent,
+  CheckboxFieldProps,
+} from './fields/Checkbox.js'
+
+export type {
+  CodeFieldDescriptionComponent,
+  CodeFieldErrorComponent,
+  CodeFieldLabelComponent,
+  CodeFieldProps,
+} from './fields/Code.js'
+
+export type {
+  CollapsibleFieldDescriptionComponent,
+  CollapsibleFieldErrorComponent,
+  CollapsibleFieldLabelComponent,
+  CollapsibleFieldProps,
+} from './fields/Collapsible.js'
+
+export type {
+  DateFieldDescriptionComponent,
+  DateFieldErrorComponent,
+  DateFieldLabelComponent,
+  DateFieldProps,
+} from './fields/Date.js'
+
+export type {
+  EmailFieldDescriptionComponent,
+  EmailFieldErrorComponent,
+  EmailFieldLabelComponent,
+  EmailFieldProps,
+} from './fields/Email.js'
+
+export type {
+  GroupFieldDescriptionComponent,
+  GroupFieldErrorComponent,
+  GroupFieldLabelComponent,
+  GroupFieldProps,
+} from './fields/Group.js'
+
+export type {
+  HiddenFieldDescriptionComponent,
+  HiddenFieldErrorComponent,
+  HiddenFieldLabelComponent,
+  HiddenFieldProps,
+} from './fields/Hidden.js'
+
+export type {
+  JSONFieldDescriptionComponent,
+  JSONFieldErrorComponent,
+  JSONFieldLabelComponent,
+  JSONFieldProps,
+} from './fields/JSON.js'
+
+export type {
+  NumberFieldDescriptionComponent,
+  NumberFieldErrorComponent,
+  NumberFieldLabelComponent,
+  NumberFieldProps,
+} from './fields/Number.js'
+
+export type {
+  PointFieldDescriptionComponent,
+  PointFieldErrorComponent,
+  PointFieldLabelComponent,
+  PointFieldProps,
+} from './fields/Point.js'
+
+export type {
+  RadioFieldDescriptionComponent,
+  RadioFieldErrorComponent,
+  RadioFieldLabelComponent,
+  RadioFieldProps,
+} from './fields/Radio.js'
+
+export type {
+  RelationshipFieldDescriptionComponent,
+  RelationshipFieldErrorComponent,
+  RelationshipFieldLabelComponent,
+  RelationshipFieldProps,
+} from './fields/Relationship.js'
+
+export type {
+  RichTextComponentProps,
+  RichTextFieldDescriptionComponent,
+  RichTextFieldErrorComponent,
+  RichTextFieldLabelComponent,
+} from './fields/RichText.js'
+
+export type {
+  RowFieldDescriptionComponent,
+  RowFieldErrorComponent,
+  RowFieldLabelComponent,
+  RowFieldProps,
+} from './fields/Row.js'
+
+export type {
+  SelectFieldDescriptionComponent,
+  SelectFieldErrorComponent,
+  SelectFieldLabelComponent,
+  SelectFieldProps,
+} from './fields/Select.js'
+
+export type { MappedTab } from './fields/Tabs.js'
+
+export type {
+  TabsFieldDescriptionComponent,
+  TabsFieldErrorComponent,
+  TabsFieldLabelComponent,
+  TabsFieldProps,
+} from './fields/Tabs.js'
+
+export type {
+  TextFieldDescriptionComponent,
+  TextFieldErrorComponent,
+  TextFieldLabelComponent,
+  TextFieldProps,
+} from './fields/Text.js'
+
+export type {
+  TextareaFieldDescriptionComponent,
+  TextareaFieldErrorComponent,
+  TextareaFieldLabelComponent,
+  TextareaFieldProps,
+} from './fields/Textarea.js'
+
+export type {
+  UploadFieldDescriptionComponent,
+  UploadFieldErrorComponent,
+  UploadFieldLabelComponent,
+  UploadFieldProps,
+} from './fields/Upload.js'
+
+export type { FieldComponentProps } from './fields/index.js'
+
+export type { ErrorComponent, ErrorProps, GenericErrorProps } from './forms/Error.js'
+
+export type { FormFieldBase } from './forms/Field.js'
+
 export type {
   Description,
   DescriptionComponent,
   DescriptionFunction,
   FieldDescriptionProps,
+  GenericDescriptionProps,
 } from './forms/FieldDescription.js'
+
+export type { MappedField } from './forms/FieldMap.js'
+
+export type { FieldMap } from './forms/FieldMap.js'
+
 export type { Data, FilterOptionsResult, FormField, FormState, Row } from './forms/Form.js'
-export type { LabelProps, SanitizedLabelProps } from './forms/Label.js'
+
+export type {
+  GenericLabelProps,
+  LabelComponent,
+  LabelProps,
+  SanitizedLabelProps,
+} from './forms/Label.js'
 
 export type { RowLabel, RowLabelComponent } from './forms/RowLabel.js'
 

packages/payload/src/collections/config/types.ts

@@ -23,6 +23,7 @@ import type {
   EntityDescriptionComponent,
   GeneratePreviewURL,
   LabelFunction,
+  LabelStatic,
   LivePreviewConfig,
   OpenGraphConfig,
 } from '../../config/types.js'
@@ -438,8 +439,8 @@ export type CollectionConfig<TSlug extends CollectionSlug = any> = {
    * Label configuration
    */
   labels?: {
-    plural?: LabelFunction | Record<string, string> | string
+    plural?: LabelFunction | LabelStatic
-    singular?: LabelFunction | Record<string, string> | string
+    singular?: LabelFunction | LabelStatic
   }
   slug: string
   /**

packages/payload/src/config/types.ts

@@ -423,6 +423,8 @@ export type LocalizationConfig = Prettify<
 
 export type LabelFunction = ({ t }: { t: TFunction }) => string
 
+export type LabelStatic = Record<string, string> | string
+
 export type SharpDependency = (
   input?:
     | ArrayBuffer

packages/payload/src/fields/config/types.ts

@@ -9,16 +9,16 @@ import type { JSONSchema4 } from 'json-schema'
 import type React from 'react'
 
 import type { RichTextAdapter, RichTextAdapterProvider } from '../../admin/RichText.js'
+import type { ErrorComponent } from '../../admin/forms/Error.js'
 import type {
   ConditionalDateProps,
   Description,
   DescriptionComponent,
-  ErrorProps,
+  LabelComponent,
-  LabelProps,
   RowLabelComponent,
 } from '../../admin/types.js'
 import type { SanitizedCollectionConfig, TypeWithID } from '../../collections/config/types.js'
-import type { CustomComponent, LabelFunction } from '../../config/types.js'
+import type { CustomComponent, LabelFunction, LabelStatic } from '../../config/types.js'
 import type { DBIdentifierName } from '../../database/types.js'
 import type { SanitizedGlobalConfig } from '../../globals/config/types.js'
 import type { CollectionSlug } from '../../index.js'
@@ -171,8 +171,8 @@ type Admin = {
 }
 
 export type Labels = {
-  plural: LabelFunction | Record<string, string> | string
+  plural: LabelFunction | LabelStatic
-  singular: LabelFunction | Record<string, string> | string
+  singular: LabelFunction | LabelStatic
 }
 
 export type BaseValidateOptions<TData, TSiblingData> = {
@@ -203,7 +203,7 @@ export type Validate<
 export type ClientValidate = Omit<Validate, 'req'>
 
 export type OptionObject = {
-  label: LabelFunction | Record<string, string> | string
+  label: LabelFunction | LabelStatic
   value: string
 }
 
@@ -231,7 +231,7 @@ export interface FieldBase {
     beforeValidate?: FieldHook[]
   }
   index?: boolean
-  label?: LabelFunction | Record<string, string> | false | string
+  label?: LabelFunction | LabelStatic | false
   localized?: boolean
   /**
    * The name of the field. Must be alphanumeric and cannot contain ' . '
@@ -256,8 +256,8 @@ export type NumberField = {
     /** Set this property to a string that will be used for browser autocomplete. */
     autoComplete?: string
     components?: {
-      Error?: CustomComponent<ErrorProps>
+      Error?: ErrorComponent
-      Label?: CustomComponent<LabelProps>
+      Label?: LabelComponent
       afterInput?: CustomComponent[]
       beforeInput?: CustomComponent[]
     }
@@ -295,8 +295,8 @@ export type TextField = {
   admin?: {
     autoComplete?: string
     components?: {
-      Error?: CustomComponent<ErrorProps>
+      Error?: ErrorComponent
-      Label?: CustomComponent<LabelProps>
+      Label?: LabelComponent
       afterInput?: CustomComponent[]
       beforeInput?: CustomComponent[]
     }
@@ -330,8 +330,8 @@ export type EmailField = {
   admin?: {
     autoComplete?: string
     components?: {
-      Error?: CustomComponent<ErrorProps>
+      Error?: ErrorComponent
-      Label?: CustomComponent<LabelProps>
+      Label?: LabelComponent
       afterInput?: CustomComponent[]
       beforeInput?: CustomComponent[]
     }
@@ -343,8 +343,8 @@ export type EmailField = {
 export type TextareaField = {
   admin?: {
     components?: {
-      Error?: CustomComponent<ErrorProps>
+      Error?: ErrorComponent
-      Label?: CustomComponent<LabelProps>
+      Label?: LabelComponent
       afterInput?: CustomComponent[]
       beforeInput?: CustomComponent[]
     }
@@ -360,8 +360,8 @@ export type TextareaField = {
 export type CheckboxField = {
   admin?: {
     components?: {
-      Error?: CustomComponent<ErrorProps>
+      Error?: ErrorComponent
-      Label?: CustomComponent<LabelProps>
+      Label?: LabelComponent
       afterInput?: CustomComponent[]
       beforeInput?: CustomComponent[]
     }
@@ -372,8 +372,8 @@ export type CheckboxField = {
 export type DateField = {
   admin?: {
     components?: {
-      Error?: CustomComponent<ErrorProps>
+      Error?: ErrorComponent
-      Label?: CustomComponent<LabelProps>
+      Label?: LabelComponent
       afterInput?: CustomComponent[]
       beforeInput?: CustomComponent[]
     }
@@ -508,8 +508,8 @@ export type UIField = {
 export type UploadField = {
   admin?: {
     components?: {
-      Error?: CustomComponent<ErrorProps>
+      Error?: ErrorComponent
-      Label?: CustomComponent<LabelProps>
+      Label?: LabelComponent
     }
   }
   filterOptions?: FilterOptions
@@ -525,8 +525,8 @@ export type UploadField = {
 
 type CodeAdmin = {
   components?: {
-    Error?: CustomComponent<ErrorProps>
+    Error?: ErrorComponent
-    Label?: CustomComponent<LabelProps>
+    Label?: LabelComponent
   }
   editorOptions?: EditorProps['options']
   language?: string
@@ -541,8 +541,8 @@ export type CodeField = {
 
 type JSONAdmin = {
   components?: {
-    Error?: CustomComponent<ErrorProps>
+    Error?: ErrorComponent
-    Label?: CustomComponent<LabelProps>
+    Label?: LabelComponent
   }
   editorOptions?: EditorProps['options']
 } & Admin
@@ -560,8 +560,8 @@ export type JSONField = {
 export type SelectField = {
   admin?: {
     components?: {
-      Error?: CustomComponent<ErrorProps>
+      Error?: ErrorComponent
-      Label?: CustomComponent<LabelProps>
+      Label?: LabelComponent
     }
     isClearable?: boolean
     isSortable?: boolean
@@ -622,8 +622,8 @@ type SharedRelationshipProperties = {
 type RelationshipAdmin = {
   allowCreate?: boolean
   components?: {
-    Error?: CustomComponent<ErrorProps>
+    Error?: ErrorComponent
-    Label?: CustomComponent<LabelProps>
+    Label?: LabelComponent
   }
   isSortable?: boolean
 } & Admin
@@ -663,8 +663,8 @@ export type RichTextField<
 > = {
   admin?: {
     components?: {
-      Error?: CustomComponent<ErrorProps>
+      Error?: ErrorComponent
-      Label?: CustomComponent<LabelProps>
+      Label?: LabelComponent
     }
   } & Admin
   editor?:
@@ -712,8 +712,8 @@ export type ArrayField = {
 export type RadioField = {
   admin?: {
     components?: {
-      Error?: CustomComponent<ErrorProps>
+      Error?: ErrorComponent
-      Label?: CustomComponent<LabelProps>
+      Label?: LabelComponent
     }
     layout?: 'horizontal' | 'vertical'
   } & Admin

packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { TextFieldProps } from '@payloadcms/ui'
+import type { TextFieldProps } from 'payload'
 
 import { SelectField, useForm } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
@@ -34,7 +34,5 @@ export const DynamicFieldSelector: React.FC<TextFieldProps> = (props) => {
     }
   }, [fields, getDataByPath])
 
-  // TODO: label from config is Record<string, string> | false | string
-  //  but the FormFieldBase type has only label?: string, changing FormFieldBase breaks other ui components
   return <SelectField {...props} options={options} />
 }

packages/plugin-form-builder/src/collections/Forms/DynamicPriceSelector.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import type { TextFieldProps } from '@payloadcms/ui'
+import type { Data, TextFieldProps } from 'payload'
-import type { Data } from 'payload'
 
 import { TextField, useLocale, useWatchForm } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'

packages/plugin-form-builder/src/collections/Forms/index.ts

@@ -2,7 +2,7 @@ import type { Block, CollectionConfig, Field } from 'payload'
 
 import { deepMergeWithSourceArrays } from 'payload'
 
-import type { FieldConfig, FormBuilderPluginConfig } from '../../types.js'
+import type { FormBuilderPluginConfig } from '../../types.js'
 
 import { fields } from './fields.js'
 

packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import type { FieldType, FormFieldBase, Options } from '@payloadcms/ui'
+import type { FieldType, Options } from '@payloadcms/ui'
+import type { FormFieldBase } from 'payload'
 
 import {
   FieldLabel,
@@ -82,7 +83,9 @@ export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props)
             <React.Fragment>
               &nbsp; &mdash; &nbsp;
               <button
-                onClick={regenerateDescription}
+                onClick={() => {
+                  void regenerateDescription()
+                }}
                 style={{
                   background: 'none',
                   backgroundColor: 'transparent',

packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx

@@ -85,7 +85,9 @@ export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
             <React.Fragment>
               &nbsp; &mdash; &nbsp;
               <button
-                onClick={regenerateImage}
+                onClick={() => {
+                  void regenerateImage()
+                }}
                 style={{
                   background: 'none',
                   backgroundColor: 'transparent',

packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import type { FieldType, FormFieldBase, Options } from '@payloadcms/ui'
+import type { FieldType, Options } from '@payloadcms/ui'
+import type { FormFieldBase } from 'payload'
 
 import {
   FieldLabel,
@@ -82,7 +83,9 @@ export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
             <React.Fragment>
               &nbsp; &mdash; &nbsp;
               <button
-                onClick={regenerateTitle}
+                onClick={() => {
+                  void regenerateTitle()
+                }}
                 style={{
                   background: 'none',
                   backgroundColor: 'transparent',

packages/richtext-lexical/src/features/blocks/component/BlockContent.tsx

@@ -1,6 +1,4 @@
-import type { FormFieldBase } from '@payloadcms/ui'
+import type { CollapsedPreferences, Data, FieldMap, FormFieldBase, FormState } from 'payload'
-import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
-import type { CollapsedPreferences, Data, FormState } from 'payload'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { getTranslation } from '@payloadcms/translations'

packages/richtext-lexical/src/features/blocks/feature.client.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import type { ReducedBlock } from '@payloadcms/ui/utilities/buildComponentMap'
+import type { Block, ReducedBlock } from 'payload'
-import type { Block } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 

packages/richtext-lexical/src/field/Field.tsx

@@ -1,6 +1,6 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui'
 import type { SerializedEditorState } from 'lexical'
+import type { FormFieldBase } from 'payload'
 
 import {
   FieldDescription,

packages/richtext-lexical/src/field/index.tsx

@@ -1,6 +1,6 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui'
 import type { EditorConfig as LexicalEditorConfig } from 'lexical'
+import type { FormFieldBase } from 'payload'
 
 import { ShimmerEffect, useClientFunctions, useFieldProps } from '@payloadcms/ui'
 import React, { Suspense, lazy, useEffect, useState } from 'react'

packages/richtext-lexical/src/lexical/LexicalProvider.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { InitialConfigType } from '@lexical/react/LexicalComposer.js'
-import type { FormFieldBase } from '@payloadcms/ui'
 import type { EditorState, LexicalEditor, SerializedEditorState } from 'lexical'
+import type { FormFieldBase } from 'payload'
 
 import { LexicalComposer } from '@lexical/react/LexicalComposer.js'
 import * as React from 'react'

packages/richtext-lexical/src/lexical/config/client/EditorConfigProvider.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui'
 import type { LexicalEditor } from 'lexical'
+import type { FormFieldBase } from 'payload'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import * as React from 'react'

packages/richtext-slate/src/field/RichText.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui'
+import type { ClientValidate, FormFieldBase } from 'payload'
-import type { ClientValidate } from 'payload'
 import type { BaseEditor, BaseOperation } from 'slate'
 import type { HistoryEditor } from 'slate-history'
 import type { ReactEditor } from 'slate-react'

packages/richtext-slate/src/field/elements/link/LinkDrawer/types.ts

@@ -1,5 +1,4 @@
-import type { FieldMap } from '@payloadcms/ui'
+import type { FieldMap, FormState } from 'payload'
-import type { FormState } from 'payload'
 
 export type Props = {
   drawerSlug: string

packages/richtext-slate/src/field/elements/relationship/Element/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui'
+import type { FormFieldBase } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import {

packages/richtext-slate/src/field/elements/upload/Element/UploadDrawer/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import type { FormFieldBase, FormProps } from '@payloadcms/ui'
+import type { FormProps } from '@payloadcms/ui'
-import type { ClientCollectionConfig } from 'payload'
+import type { ClientCollectionConfig, FormFieldBase } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import {

packages/richtext-slate/src/field/elements/upload/Element/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui'
+import type { FormFieldBase } from 'payload'
 import type { ClientCollectionConfig } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'

packages/richtext-slate/src/field/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui'
+import type { FormFieldBase } from 'payload'
 
 import { ShimmerEffect, useClientFunctions, useFieldProps } from '@payloadcms/ui'
 import React, { Suspense, lazy, useEffect, useState } from 'react'

packages/richtext-slate/src/field/providers/ElementButtonProvider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui'
+import type { FormFieldBase } from 'payload'
 
 import React from 'react'
 

packages/richtext-slate/src/field/providers/ElementProvider.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui'
+import type { FormFieldBase } from 'payload'
 import type { Element } from 'slate'
 
 import React from 'react'

packages/richtext-slate/src/field/providers/LeafButtonProvider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui'
+import type { FormFieldBase } from 'payload'
 
 import React from 'react'
 

packages/richtext-slate/src/field/providers/LeafProvider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui'
+import type { FormFieldBase } from 'payload'
 
 import React from 'react'
 

packages/ui/src/elements/ArrayAction/index.tsx

@@ -13,7 +13,7 @@ import './index.scss'
 const baseClass = 'array-actions'
 
 export type Props = {
-  addRow: (current: number, blockType?: string) => void
+  addRow: (current: number, blockType?: string) => Promise<void> | void
   duplicateRow: (current: number) => void
   hasMaxRows: boolean
   index: number
@@ -77,7 +77,7 @@ export const ArrayAction: React.FC<Props> = ({
                 <PopupList.Button
                   className={`${baseClass}__action ${baseClass}__add`}
                   onClick={() => {
-                    addRow(index + 1)
+                    void addRow(index + 1)
                     close()
                   }}
                 >

packages/ui/src/elements/Collapsible/index.tsx

@@ -26,7 +26,7 @@ export type Props = {
   header?: React.ReactNode
   initCollapsed?: boolean
   isCollapsed?: boolean
-  onToggle?: (collapsed: boolean) => void
+  onToggle?: (collapsed: boolean) => Promise<void> | void
 }
 
 export const Collapsible: React.FC<Props> = ({
@@ -48,7 +48,7 @@ export const Collapsible: React.FC<Props> = ({
   const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal
 
   const toggleCollapsible = React.useCallback(() => {
-    if (typeof onToggle === 'function') onToggle(!isCollapsed)
+    if (typeof onToggle === 'function') void onToggle(!isCollapsed)
     setCollapsedLocal(!isCollapsed)
   }, [onToggle, isCollapsed])
 

packages/ui/src/elements/DocumentFields/index.tsx

@@ -1,10 +1,8 @@
 'use client'
-import type { Description, DocumentPermissions } from 'payload'
+import type { Description, DocumentPermissions, FieldMap } from 'payload'
 
 import React from 'react'
 
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
-
 import { RenderFields } from '../../forms/RenderFields/index.js'
 import { Gutter } from '../Gutter/index.js'
 import './index.scss'

packages/ui/src/elements/EditMany/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { ClientCollectionConfig, FormState } from 'payload'
+import type { ClientCollectionConfig, FieldMap, FormState } from 'payload'
 
 import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
@@ -28,8 +28,6 @@ import './index.scss'
 
 const baseClass = 'edit-many'
 
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
-
 export type EditManyProps = {
   collection: ClientCollectionConfig
   fieldMap: FieldMap

packages/ui/src/elements/FieldSelect/index.tsx

@@ -1,10 +1,8 @@
 'use client'
-import type { FieldWithPath } from 'payload'
+import type { FieldMap, FieldWithPath, MappedField } from 'payload'
 
 import React, { Fragment, type JSX, useState } from 'react'
 
-import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
-
 import { FieldLabel } from '../../fields/FieldLabel/index.js'
 import { useForm } from '../../forms/Form/context.js'
 import { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js'

packages/ui/src/elements/ListControls/getTextFieldsToBeSearched.ts

@@ -1,4 +1,4 @@
-import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
+import type { FieldMap, MappedField } from 'payload'
 
 import { flattenFieldMap } from '../../utilities/flattenFieldMap.js'
 

packages/ui/src/elements/ListControls/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { ClientCollectionConfig, Where } from 'payload'
+import type { ClientCollectionConfig, FieldMap, Where } from 'payload'
 
 import { useWindowInfo } from '@faceless-ui/window-info'
 import { getTranslation } from '@payloadcms/translations'
@@ -11,8 +11,6 @@ const AnimateHeight = (AnimateHeightImport.default ||
 
 import { useListInfo } from '@payloadcms/ui'
 
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
-
 import { useUseTitleField } from '../../hooks/useUseAsTitle.js'
 import { ChevronIcon } from '../../icons/Chevron/index.js'
 import { useListQuery } from '../../providers/ListQuery/index.js'

packages/ui/src/elements/SortColumn/index.tsx

@@ -1,7 +1,15 @@
 'use client'
+import type { FieldBase } from 'payload'
+
 // TODO: abstract the `next/navigation` dependency out from this component
 import React, { useCallback } from 'react'
 
+import { ChevronIcon } from '../../icons/Chevron/index.js'
+import { useListQuery } from '../../providers/ListQuery/index.js'
+import { useSearchParams } from '../../providers/SearchParams/index.js'
+import { useTranslation } from '../../providers/Translation/index.js'
+import './index.scss'
+
 export type SortColumnProps = {
   Label: React.ReactNode
   disable?: boolean
@@ -9,14 +17,6 @@ export type SortColumnProps = {
   name: string
 }
 
-import type { FieldBase } from 'payload'
-
-import { ChevronIcon } from '../../icons/Chevron/index.js'
-import { useListQuery } from '../../providers/ListQuery/index.js'
-import { useSearchParams } from '../../providers/SearchParams/index.js'
-import { useTranslation } from '../../providers/Translation/index.js'
-import './index.scss'
-
 const baseClass = 'sort-column'
 
 export const SortColumn: React.FC<SortColumnProps> = (props) => {

packages/ui/src/elements/StepNav/types.ts

@@ -1,7 +1,7 @@
-import type { LabelFunction } from 'payload'
+import type { LabelFunction, LabelStatic } from 'payload'
 
 export type StepNavItem = {
-  label: LabelFunction | Record<string, string> | string
+  label: LabelFunction | LabelStatic
   url?: string
 }
 

packages/ui/src/elements/Table/index.tsx

@@ -1,12 +1,10 @@
 'use client'
-import type { CellComponentProps, FieldBase, FieldTypes } from 'payload'
+import type { CellComponentProps, FieldBase, FieldMap, FieldTypes } from 'payload'
 
 import React from 'react'
 
 export * from './TableCellProvider/index.js'
 
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
-
 import { useTableColumns } from '../TableColumns/index.js'
 import { TableCellProvider } from './TableCellProvider/index.js'
 import './index.scss'

packages/ui/src/elements/TableColumns/buildColumnState.tsx

@@ -1,8 +1,8 @@
 'use client'
-import { type CellComponentProps, type SanitizedCollectionConfig } from 'payload'
+import type { CellComponentProps, FieldMap, MappedField, SanitizedCollectionConfig } from 'payload'
+
 import React from 'react'
 
-import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { ColumnPreferences } from '../../providers/ListInfo/index.js'
 import type { Column } from '../Table/index.js'
 

packages/ui/src/elements/TableColumns/filterFields.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
+import type { FieldMap, MappedField } from 'payload'
 
 // 1. Skips fields that are hidden, disabled, or presentational-only (i.e. `ui` fields)
 // 2. Maps through top-level `tabs` fields and filters out the same

packages/ui/src/elements/TableColumns/getInitialColumns.ts

@@ -1,4 +1,5 @@
-import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
+import type { FieldMap, MappedField } from 'payload'
+
 import type { ColumnPreferences } from '../../providers/ListInfo/index.js'
 
 export function fieldAffectsData(field: MappedField): boolean {

packages/ui/src/elements/WhereBuilder/reduceFieldMap.tsx

@@ -1,10 +1,9 @@
 'use client'
 import type { ClientTranslationKeys, I18nClient } from '@payloadcms/translations'
+import type { FieldMap } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 
-import type { FieldMap } from '../../utilities/buildComponentMap.js'
-
 import { createNestedClientFieldPath } from '../../forms/Form/createNestedFieldPath.js'
 import { combineLabel } from '../FieldSelect/index.js'
 import fieldTypes from './field-types.js'
@@ -26,9 +25,11 @@ export const reduceFieldMap = ({ fieldMap, i18n, labelPrefix, pathPrefix }: Redu
 
     if (field.type === 'tabs' && 'tabs' in field.fieldComponentProps) {
       const tabs = field.fieldComponentProps.tabs
+
       tabs.forEach((tab) => {
         if (typeof tab.label !== 'boolean') {
           const localizedTabLabel = getTranslation(tab.label, i18n)
+
           const labelWithPrefix = labelPrefix
             ? labelPrefix + ' > ' + localizedTabLabel
             : localizedTabLabel
@@ -69,7 +70,8 @@ export const reduceFieldMap = ({ fieldMap, i18n, labelPrefix, pathPrefix }: Redu
     }
 
     if (field.type === 'collapsible' && 'fieldMap' in field.fieldComponentProps) {
-      const localizedTabLabel = getTranslation(field.fieldComponentProps.label, i18n)
+      const localizedTabLabel = getTranslation(field.fieldComponentProps.label || '', i18n)
+
       const labelWithPrefix = labelPrefix
         ? labelPrefix + ' > ' + localizedTabLabel
         : localizedTabLabel
@@ -86,7 +88,7 @@ export const reduceFieldMap = ({ fieldMap, i18n, labelPrefix, pathPrefix }: Redu
     }
 
     if (field.type === 'group' && 'fieldMap' in field.fieldComponentProps) {
-      const translatedLabel = getTranslation(field.fieldComponentProps.label, i18n)
+      const translatedLabel = getTranslation(field.fieldComponentProps.label || '', i18n)
 
       const labelWithPrefix = labelPrefix
         ? translatedLabel
@@ -126,7 +128,7 @@ export const reduceFieldMap = ({ fieldMap, i18n, labelPrefix, pathPrefix }: Redu
         return acc
       }, [])
 
-      const localizedLabel = getTranslation(field.fieldComponentProps.label, i18n)
+      const localizedLabel = getTranslation(field.fieldComponentProps.label || '', i18n)
 
       const formattedLabel = labelPrefix
         ? combineLabel({

packages/ui/src/elements/WhereBuilder/types.ts

@@ -1,6 +1,4 @@
-import type { Field, Operator, SanitizedCollectionConfig, Where } from 'payload'
+import type { Field, FieldMap, Operator, SanitizedCollectionConfig, Where } from 'payload'
-
-import type { FieldMap } from '../../utilities/buildComponentMap.js'
 
 export type WhereBuilderProps = {
   collectionPluralLabel: SanitizedCollectionConfig['labels']['plural']

packages/ui/src/exports/client/index.ts

@@ -104,13 +104,13 @@ export { RadioGroupField } from '../../fields/RadioGroup/index.js'
 export { RelationshipField } from '../../fields/Relationship/index.js'
 export { RichTextField } from '../../fields/RichText/index.js'
 export { RowField } from '../../fields/Row/index.js'
-export { SelectField, type SelectFieldProps, SelectInput } from '../../fields/Select/index.js'
+export { SelectField, SelectInput } from '../../fields/Select/index.js'
-export { TabsField, type TabsFieldProps } from '../../fields/Tabs/index.js'
+export { TabsField } from '../../fields/Tabs/index.js'
 export { TextField, TextInput } from '../../fields/Text/index.js'
-export type { TextFieldProps, TextInputProps } from '../../fields/Text/index.js'
+export type { TextInputProps } from '../../fields/Text/index.js'
 
 export { TextareaField, TextareaInput } from '../../fields/Textarea/index.js'
-export type { TextAreaInputProps, TextareaFieldProps } from '../../fields/Textarea/index.js'
+export type { TextAreaInputProps } from '../../fields/Textarea/index.js'
 
 export { UIField } from '../../fields/UI/index.js'
 export { UploadField, UploadInput } from '../../fields/Upload/index.js'
@@ -140,7 +140,6 @@ export { RowLabelProvider, useRowLabel } from '../../forms/RowLabel/Context/inde
 export { FormSubmit } from '../../forms/Submit/index.js'
 export { WatchChildErrors } from '../../forms/WatchChildErrors/index.js'
 export { useField } from '../../forms/useField/index.js'
-export type { FormFieldBase } from '../../fields/shared/index.js'
 export type { FieldType, Options } from '../../forms/useField/types.js'
 
 export { withCondition } from '../../forms/withCondition/index.js'
@@ -180,12 +179,7 @@ export type {
   CollectionComponentMap,
   ComponentMap,
   ConfigComponentMapBase,
-  FieldComponentProps,
-  FieldMap,
   GlobalComponentMap,
-  MappedField,
-  MappedTab,
-  ReducedBlock,
 } from '../../providers/ComponentMap/buildComponentMap/types.js'
 export { ComponentMapProvider, useComponentMap } from '../../providers/ComponentMap/index.js'
 export { ConfigProvider, useConfig } from '../../providers/Config/index.js'

packages/ui/src/fields/Array/ArrayRow.tsx

@@ -1,11 +1,10 @@
 'use client'
-import type { ArrayField, FieldPermissions, Row } from 'payload'
+import type { ArrayField, FieldMap, FieldPermissions, Row } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 
 import type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 
 import { ArrayAction } from '../../elements/ArrayAction/index.js'
 import { Collapsible } from '../../elements/Collapsible/index.js'
@@ -20,7 +19,7 @@ const baseClass = 'array-field'
 
 type ArrayRowProps = {
   CustomRowLabel?: React.ReactNode
-  addRow: (rowIndex: number) => void
+  addRow: (rowIndex: number) => Promise<void> | void
   duplicateRow: (rowIndex: number) => void
   errorCount: number
   fieldMap: FieldMap

packages/ui/src/fields/Array/index.tsx

@@ -1,12 +1,9 @@
 'use client'
-import type { ArrayField as ArrayFieldType } from 'payload'
+import type { ArrayFieldProps, ArrayField as ArrayFieldType } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback } from 'react'
 
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
-import type { FormFieldBase } from '../shared/index.js'
-
 import { Banner } from '../../elements/Banner/index.js'
 import { Button } from '../../elements/Button/index.js'
 import { DraggableSortableItem } from '../../elements/DraggableSortable/DraggableSortableItem/index.js'
@@ -31,18 +28,6 @@ import './index.scss'
 
 const baseClass = 'array-field'
 
-export type ArrayFieldProps = {
-  CustomRowLabel?: React.ReactNode
-  fieldMap: FieldMap
-  forceRender?: boolean
-  isSortable?: boolean
-  labels?: ArrayFieldType['labels']
-  maxRows?: ArrayFieldType['maxRows']
-  minRows?: ArrayFieldType['minRows']
-  name?: string
-  width?: string
-} & FormFieldBase
-
 export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
   const {
     name,
@@ -73,6 +58,7 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
     permissions,
     readOnly: readOnlyFromContext,
   } = useFieldProps()
+
   const minRows = minRowsProp ?? required ? 1 : 0
 
   const { setDocFieldPreferences } = useDocumentInfo()
@@ -132,7 +118,7 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
   const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing
 
   const addRow = useCallback(
-    async (rowIndex: number) => {
+    async (rowIndex: number): Promise<void> => {
       await addFieldRow({ path, rowIndex, schemaPath })
       setModified(true)
 
@@ -317,7 +303,9 @@ export const _ArrayField: React.FC<ArrayFieldProps> = (props) => {
           icon="plus"
           iconPosition="left"
           iconStyle="with-border"
-          onClick={() => addRow(value || 0)}
+          onClick={() => {
+            void addRow(value || 0)
+          }}
         >
           {t('fields:addLabel', { label: getTranslation(labels.singular, i18n) })}
         </Button>

packages/ui/src/fields/Blocks/BlockRow.tsx

@@ -1,11 +1,10 @@
 'use client'
-import type { FieldPermissions, Labels, Row } from 'payload'
+import type { FieldPermissions, Labels, ReducedBlock, Row } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 
 import type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'
-import type { ReducedBlock } from '../../providers/ComponentMap/buildComponentMap/types.js'
 
 import { Collapsible } from '../../elements/Collapsible/index.js'
 import { ErrorPill } from '../../elements/ErrorPill/index.js'
@@ -19,7 +18,7 @@ import { SectionTitle } from './SectionTitle/index.js'
 const baseClass = 'blocks-field'
 
 type BlockFieldProps = {
-  addRow: (rowIndex: number, blockType: string) => void
+  addRow: (rowIndex: number, blockType: string) => Promise<void> | void
   block: ReducedBlock
   blocks: ReducedBlock[]
   duplicateRow: (rowIndex: number) => void

packages/ui/src/fields/Blocks/BlocksDrawer/index.tsx

@@ -1,13 +1,11 @@
 'use client'
 import type { I18nClient } from '@payloadcms/translations'
-import type { Labels } from 'payload'
+import type { Labels, ReducedBlock } from 'payload'
 
 import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useEffect, useState } from 'react'
 
-import type { ReducedBlock } from '../../../providers/ComponentMap/buildComponentMap/types.js'
-
 import { Drawer } from '../../../elements/Drawer/index.js'
 import { ThumbnailCard } from '../../../elements/ThumbnailCard/index.js'
 import { DefaultBlockImage } from '../../../graphics/DefaultBlockImage/index.js'
@@ -16,7 +14,7 @@ import { BlockSearch } from './BlockSearch/index.js'
 import './index.scss'
 
 export type Props = {
-  addRow: (index: number, blockType?: string) => void
+  addRow: (index: number, blockType?: string) => Promise<void> | void
   addRowIndex: number
   blocks: ReducedBlock[]
   drawerSlug: string
@@ -76,7 +74,7 @@ export const BlocksDrawer: React.FC<Props> = (props) => {
                   alignLabel="center"
                   label={getTranslation(blockLabels?.singular, i18n)}
                   onClick={() => {
-                    addRow(addRowIndex, slug)
+                    void addRow(addRowIndex, slug)
                     closeModal(drawerSlug)
                   }}
                   thumbnail={

packages/ui/src/fields/Blocks/RowActions.tsx

@@ -1,20 +1,15 @@
 'use client'
-import type { Labels } from 'payload'
+import type { FieldMap, Labels, ReducedBlock } from 'payload'
 
 import { useModal } from '@faceless-ui/modal'
 import React from 'react'
 
-import type {
-  FieldMap,
-  ReducedBlock,
-} from '../../providers/ComponentMap/buildComponentMap/types.js'
-
 import { ArrayAction } from '../../elements/ArrayAction/index.js'
 import { useDrawerSlug } from '../../elements/Drawer/useDrawerSlug.js'
 import { BlocksDrawer } from './BlocksDrawer/index.js'
 
 export const RowActions: React.FC<{
-  addRow: (rowIndex: number, blockType: string) => void
+  addRow: (rowIndex: number, blockType: string) => Promise<void> | void
   blockType: string
   blocks: ReducedBlock[]
   duplicateRow: (rowIndex: number, blockType: string) => void
@@ -51,7 +46,7 @@ export const RowActions: React.FC<{
       <BlocksDrawer
         addRow={(_, rowBlockType) => {
           if (typeof addRow === 'function') {
-            addRow(indexToAdd, rowBlockType)
+            void addRow(indexToAdd, rowBlockType)
           }
           closeModal(drawerSlug)
         }}

packages/ui/src/fields/Blocks/index.tsx

@@ -1,12 +1,9 @@
 'use client'
-import type { BlockField } from 'payload'
+import type { BlocksFieldProps } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React, { Fragment, useCallback } from 'react'
 
-import type { ReducedBlock } from '../../providers/ComponentMap/buildComponentMap/types.js'
-import type { FormFieldBase } from '../shared/index.js'
-
 import { Banner } from '../../elements/Banner/index.js'
 import { Button } from '../../elements/Button/index.js'
 import { DraggableSortableItem } from '../../elements/DraggableSortable/DraggableSortableItem/index.js'
@@ -34,18 +31,6 @@ import './index.scss'
 
 const baseClass = 'blocks-field'
 
-export type BlocksFieldProps = {
-  blocks?: ReducedBlock[]
-  forceRender?: boolean
-  isSortable?: boolean
-  labels?: BlockField['labels']
-  maxRows?: number
-  minRows?: number
-  name?: string
-  slug?: string
-  width?: string
-} & FormFieldBase
-
 const BlocksFieldComponent: React.FC<BlocksFieldProps> = (props) => {
   const { i18n, t } = useTranslation()
 
@@ -132,7 +117,7 @@ const BlocksFieldComponent: React.FC<BlocksFieldProps> = (props) => {
   const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing
 
   const addRow = useCallback(
-    async (rowIndex: number, blockType: string) => {
+    async (rowIndex: number, blockType: string): Promise<void> => {
       await addFieldRow({
         data: { blockType },
         path,
@@ -278,7 +263,6 @@ const BlocksFieldComponent: React.FC<BlocksFieldProps> = (props) => {
                   {(draggableSortableItemProps) => (
                     <BlockRow
                       {...draggableSortableItemProps}
-                      // eslint-disable-next-line @typescript-eslint/no-misused-promises
                       addRow={addRow}
                       block={blockToRender}
                       blocks={blocks}
@@ -342,7 +326,6 @@ const BlocksFieldComponent: React.FC<BlocksFieldProps> = (props) => {
             </Button>
           </DrawerToggler>
           <BlocksDrawer
-            // eslint-disable-next-line @typescript-eslint/no-misused-promises
             addRow={addRow}
             addRowIndex={rows?.length || 0}
             blocks={blocks}

packages/ui/src/fields/Checkbox/Input.tsx

@@ -15,7 +15,7 @@ export type CheckboxInputProps = {
   className?: string
   id?: string
   inputRef?: React.RefObject<HTMLInputElement | null>
-  label?: LabelProps['label']
+  label?: LabelProps<'checkbox'>['label']
   labelProps?: SanitizedLabelProps
   name?: string
   onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void

packages/ui/src/fields/Checkbox/index.tsx

@@ -1,10 +1,9 @@
 'use client'
-import type { ClientValidate } from 'payload'
+import type { CheckboxFieldProps, ClientValidate } from 'payload'
 
 import React, { useCallback } from 'react'
 
 import type { CheckboxInputProps } from './Input.js'
-import type { CheckboxFieldProps } from './types.js'
 
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useForm } from '../../forms/Form/context.js'

packages/ui/src/fields/Checkbox/types.ts

@@ -1,12 +0,0 @@
-import type { FormFieldBase } from '../shared/index.js'
-
-export type CheckboxFieldProps = {
-  checked?: boolean
-  disableFormData?: boolean
-  id?: string
-  name?: string
-  onChange?: (val: boolean) => void
-  partialChecked?: boolean
-  path?: string
-  width?: string
-} & FormFieldBase

packages/ui/src/fields/Code/index.tsx

@@ -1,10 +1,8 @@
 'use client'
-import type { CodeField as CodeFieldType } from 'payload'
+import type { CodeFieldProps } from 'payload'
 
 import React, { useCallback } from 'react'
 
-import type { FormFieldBase } from '../shared/index.js'
-
 import { CodeEditor } from '../../elements/CodeEditor/index.js'
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useField } from '../../forms/useField/index.js'
@@ -15,14 +13,6 @@ import { FieldLabel } from '../FieldLabel/index.js'
 import { fieldBaseClass } from '../shared/index.js'
 import './index.scss'
 
-export type CodeFieldProps = {
-  editorOptions?: CodeFieldType['admin']['editorOptions']
-  language?: CodeFieldType['admin']['language']
-  name?: string
-  path?: string
-  width: string
-} & FormFieldBase
-
 const prismToMonacoLanguageMap = {
   js: 'javascript',
   ts: 'typescript',

packages/ui/src/fields/Collapsible/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { DocumentPreferences, FieldPermissions } from 'payload'
+import type { CollapsibleFieldProps, DocumentPreferences } from 'payload'
 
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
 
@@ -18,18 +18,9 @@ import './index.scss'
 
 const baseClass = 'collapsible-field'
 
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
-import type { FormFieldBase } from '../shared/index.js'
-
 import { useFormInitializing, useFormProcessing } from '../../forms/Form/context.js'
 import { FieldDescription } from '../FieldDescription/index.js'
 
-export type CollapsibleFieldProps = {
-  fieldMap: FieldMap
-  initCollapsed?: boolean
-  width?: string
-} & FormFieldBase
-
 const CollapsibleFieldComponent: React.FC<CollapsibleFieldProps> = (props) => {
   const {
     CustomDescription,
@@ -65,7 +56,7 @@ const CollapsibleFieldComponent: React.FC<CollapsibleFieldProps> = (props) => {
   const fieldHasErrors = errorCount > 0
 
   const onToggle = useCallback(
-    async (newCollapsedState: boolean) => {
+    async (newCollapsedState: boolean): Promise<void> => {
       const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)
 
       if (preferencesKey) {
@@ -145,7 +136,6 @@ const CollapsibleFieldComponent: React.FC<CollapsibleFieldProps> = (props) => {
             </div>
           }
           initCollapsed={collapsedOnMount}
-          // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onToggle={onToggle}
         >
           <RenderFields

packages/ui/src/fields/DateTime/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { ClientValidate, DateField } from 'payload'
+import type { ClientValidate, DateField, DateFieldProps } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback } from 'react'
@@ -13,21 +13,11 @@ import './index.scss'
 
 const baseClass = 'date-time-field'
 
-import type { FormFieldBase } from '../shared/index.js'
-
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
 import { FieldDescription } from '../FieldDescription/index.js'
 import { FieldError } from '../FieldError/index.js'
 
-export type DateFieldProps = {
-  date?: DateField['admin']['date']
-  name?: string
-  path?: string
-  placeholder?: DateField['admin']['placeholder'] | string
-  width?: string
-} & FormFieldBase
-
 const DateTimeFieldComponent: React.FC<DateFieldProps> = (props) => {
   const {
     name,

packages/ui/src/fields/Email/index.tsx

@@ -1,11 +1,9 @@
 'use client'
-import type { ClientValidate, EmailField as EmailFieldType } from 'payload'
+import type { ClientValidate, EmailFieldProps } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React, { useCallback } from 'react'
 
-import type { FormFieldBase } from '../shared/index.js'
-
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
@@ -16,14 +14,6 @@ import { FieldLabel } from '../FieldLabel/index.js'
 import { fieldBaseClass } from '../shared/index.js'
 import './index.scss'
 
-export type EmailFieldProps = {
-  autoComplete?: string
-  name?: string
-  path?: string
-  placeholder?: EmailFieldType['admin']['placeholder']
-  width?: string
-} & FormFieldBase
-
 const EmailFieldComponent: React.FC<EmailFieldProps> = (props) => {
   const {
     name,

packages/ui/src/fields/FieldDescription/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { FieldDescriptionProps } from 'payload'
+import type { GenericDescriptionProps } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
@@ -10,7 +10,7 @@ import './index.scss'
 
 const baseClass = 'field-description'
 
-const DefaultFieldDescription: React.FC<FieldDescriptionProps> = (props) => {
+const DefaultFieldDescription: React.FC<GenericDescriptionProps> = (props) => {
   const { className, description, marginPlacement } = props
 
   const { path } = useFieldProps()
@@ -37,7 +37,7 @@ const DefaultFieldDescription: React.FC<FieldDescriptionProps> = (props) => {
   return null
 }
 
-export const FieldDescription: React.FC<FieldDescriptionProps> = (props) => {
+export const FieldDescription: React.FC<GenericDescriptionProps> = (props) => {
   const { CustomDescription } = props
 
   if (CustomDescription !== undefined) {

packages/ui/src/fields/FieldError/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ErrorProps } from 'payload'
+import type { GenericErrorProps } from 'payload'
 
 import React from 'react'
 
@@ -11,7 +11,7 @@ import './index.scss'
 
 const baseClass = 'field-error'
 
-const DefaultFieldError: React.FC<ErrorProps> = (props) => {
+const DefaultFieldError: React.FC<GenericErrorProps> = (props) => {
   const {
     alignCaret = 'right',
     message: messageFromProps,
@@ -41,7 +41,7 @@ const DefaultFieldError: React.FC<ErrorProps> = (props) => {
   return null
 }
 
-export const FieldError: React.FC<ErrorProps> = (props) => {
+export const FieldError: React.FC<GenericErrorProps> = (props) => {
   const { CustomError } = props
 
   if (CustomError !== undefined) {

packages/ui/src/fields/FieldLabel/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { LabelProps } from 'payload'
+import type { GenericLabelProps } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
@@ -12,7 +12,7 @@ import { useTranslation } from '../../providers/Translation/index.js'
 import { generateFieldID } from '../../utilities/generateFieldID.js'
 import './index.scss'
 
-const DefaultFieldLabel: React.FC<LabelProps> = (props) => {
+const DefaultFieldLabel: React.FC<GenericLabelProps> = (props) => {
   const {
     as: Element = 'label',
     htmlFor: htmlForFromProps,
@@ -40,7 +40,7 @@ const DefaultFieldLabel: React.FC<LabelProps> = (props) => {
   return null
 }
 
-export const FieldLabel: React.FC<LabelProps> = (props) => {
+export const FieldLabel: React.FC<GenericLabelProps> = (props) => {
   const { CustomLabel } = props
 
   if (CustomLabel !== undefined) {

packages/ui/src/fields/Group/index.tsx

@@ -1,11 +1,10 @@
 'use client'
 
+import type { GroupFieldProps } from 'payload'
+
 import { getTranslation } from '@payloadcms/translations'
 import React, { Fragment } from 'react'
 
-import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
-import type { FormFieldBase } from '../shared/index.js'
-
 import { useCollapsible } from '../../elements/Collapsible/provider.js'
 import { ErrorPill } from '../../elements/ErrorPill/index.js'
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
@@ -27,15 +26,7 @@ import { GroupProvider, useGroup } from './provider.js'
 
 const baseClass = 'group-field'
 
-export type GroupFieldProps = {
+export const GroupFieldComponent: React.FC<GroupFieldProps> = (props) => {
-  fieldMap: FieldMap
-  forceRender?: boolean
-  hideGutter?: boolean
-  name?: string
-  width?: string
-} & FormFieldBase
-
-const GroupFieldComponent: React.FC<GroupFieldProps> = (props) => {
   const {
     CustomDescription,
     CustomLabel,

packages/ui/src/fields/Hidden/index.tsx

@@ -1,25 +1,18 @@
 'use client'
-import React, { useEffect } from 'react'
 
-import type { FormFieldBase } from '../index.js'
+import type { HiddenFieldProps } from 'payload'
+
+import React, { useEffect } from 'react'
 
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
 
-export type HiddenInputFieldProps = {
-  disableModifyingForm?: false
-  forceUsePathFromProps?: boolean
-  name?: string
-  path?: string
-  value?: unknown
-} & FormFieldBase
-
 /**
  * This is mainly used to save a value on the form that is not visible to the user.
  * For example, this sets the `ìd` property of a block in the Blocks field.
  */
-const HiddenFieldComponent: React.FC<HiddenInputFieldProps> = (props) => {
+const HiddenFieldComponent: React.FC<HiddenFieldProps> = (props) => {
   const {
     name,
     disableModifyingForm = true,