From c2a4d44bf428ef6560d4de018a9f9be46e88b858 Mon Sep 17 00:00:00 2001
From: Alessio Gravili <alessio@gravili.de>
Date: Tue, 19 Mar 2024 17:26:41 -0400
Subject: [PATCH] richtext-lexical

---
 packages/richtext-lexical/src/cell/index.tsx  |  8 +++---
 packages/richtext-lexical/src/field/Field.tsx |  3 ++-
 .../blocks/component/BlockContent.tsx         | 24 ++++++++---------
 .../blocks/component/FormSavePlugin.tsx       |  3 ++-
 .../field/features/blocks/component/index.tsx | 24 ++++++++---------
 .../field/features/blocks/drawer/index.tsx    |  5 +++-
 .../field/features/blocks/feature.client.tsx  |  2 +-
 .../features/createFeaturePropComponent.tsx   |  5 ++--
 .../src/field/features/link/drawer/index.tsx  | 24 ++++++++---------
 .../floatingLinkEditor/LinkEditor/index.tsx   |  5 +++-
 .../features/relationship/drawer/index.tsx    |  2 +-
 .../features/relationship/feature.client.tsx  |  2 +-
 .../components/RelationshipComponent.tsx      |  6 ++++-
 .../features/relationship/plugins/index.tsx   |  2 +-
 .../utils/EnabledRelationshipsCondition.tsx   |  3 ++-
 .../component/ExtraFieldsDrawer/index.tsx     | 27 +++++++++----------
 .../field/features/upload/component/index.tsx | 22 +++++++--------
 .../field/features/upload/drawer/index.tsx    |  2 +-
 .../field/features/upload/plugin/index.tsx    |  2 +-
 packages/richtext-lexical/src/field/index.tsx | 10 ++++---
 .../src/field/lexical/LexicalProvider.tsx     |  2 +-
 .../config/client/EditorConfigProvider.tsx    |  3 ++-
 .../field/lexical/plugins/SlashMenu/index.tsx |  2 +-
 .../src/generateComponentMap.tsx              |  2 +-
 packages/richtext-lexical/src/index.ts        |  2 +-
 .../src/useLexicalFeature.tsx                 |  7 ++---
 .../ui/src/providers/ComponentMap/index.tsx   |  2 +-
 27 files changed, 105 insertions(+), 96 deletions(-)

diff --git a/packages/richtext-lexical/src/cell/index.tsx b/packages/richtext-lexical/src/cell/index.tsx
index fd8a841dae..09103531e7 100644
--- a/packages/richtext-lexical/src/cell/index.tsx
+++ b/packages/richtext-lexical/src/cell/index.tsx
@@ -3,11 +3,11 @@ import type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.
 
 import lexicalHeadlessImport from '@lexical/headless'
 const { createHeadlessEditor } = lexicalHeadlessImport
-import { useTableCell } from '@payloadcms/ui/elements'
-import { useFieldPath } from '@payloadcms/ui/forms'
-import { useClientFunctions } from '@payloadcms/ui/providers'
 import lexicalImport from 'lexical'
 const { $getRoot } = lexicalImport
+import { useTableCell } from '@payloadcms/ui/elements/Table'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction'
 import React, { useEffect, useState } from 'react'
 
 import type { FeatureProviderClient } from '../field/features/types.js'
@@ -25,7 +25,7 @@ export const RichTextCell: React.FC<{
   const { lexicalEditorConfig } = props
 
   const [preview, setPreview] = React.useState('Loading...')
-  const { schemaPath } = useFieldPath()
+  const { schemaPath } = useFieldProps()
 
   const { cellData, richTextComponentMap } = useTableCell()
 
diff --git a/packages/richtext-lexical/src/field/Field.tsx b/packages/richtext-lexical/src/field/Field.tsx
index d223d897a4..bc0bce7556 100644
--- a/packages/richtext-lexical/src/field/Field.tsx
+++ b/packages/richtext-lexical/src/field/Field.tsx
@@ -1,7 +1,8 @@
 'use client'
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 import type { SerializedEditorState } from 'lexical'
 
-import { type FormFieldBase, useField } from '@payloadcms/ui'
+import { useField } from '@payloadcms/ui/forms/useField'
 import React, { useCallback } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 
diff --git a/packages/richtext-lexical/src/field/features/blocks/component/BlockContent.tsx b/packages/richtext-lexical/src/field/features/blocks/component/BlockContent.tsx
index e8c24470d1..565956a134 100644
--- a/packages/richtext-lexical/src/field/features/blocks/component/BlockContent.tsx
+++ b/packages/richtext-lexical/src/field/features/blocks/component/BlockContent.tsx
@@ -1,27 +1,25 @@
-import type { FieldMap, FormFieldBase } from '@payloadcms/ui'
-import type { ReducedBlock } from '@payloadcms/ui'
 import type { FormState } from 'payload/types'
 import type { Data } from 'payload/types'
 
 import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
 const { useLexicalComposerContext } = lexicalComposerContextImport
 import { getTranslation } from '@payloadcms/translations'
-import { RenderFields } from '@payloadcms/ui'
-import {
-  Button,
-  Collapsible,
-  ErrorPill,
-  Pill,
-  SectionTitle,
-  useDocumentInfo,
-  useFormSubmitted,
-  useTranslation,
-} from '@payloadcms/ui'
 import isDeepEqual from 'deep-equal'
 import lexicalImport from 'lexical'
 const { $getNodeByKey } = lexicalImport
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
+import type { FieldMap, ReducedBlock } from '@payloadcms/ui/providers/ComponentMap'
 import type { CollapsedPreferences } from 'payload/types'
 
+import { Button } from '@payloadcms/ui/elements/Button'
+import { Collapsible } from '@payloadcms/ui/elements/Collapsible'
+import { ErrorPill } from '@payloadcms/ui/elements/ErrorPill'
+import { Pill } from '@payloadcms/ui/elements/Pill'
+import { SectionTitle } from '@payloadcms/ui/fields/Blocks/SectionTitle'
+import { useFormSubmitted } from '@payloadcms/ui/forms/Form'
+import { RenderFields } from '@payloadcms/ui/forms/RenderFields'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { useCallback } from 'react'
 
 import type { SanitizedClientEditorConfig } from '../../../lexical/config/types.js'
diff --git a/packages/richtext-lexical/src/field/features/blocks/component/FormSavePlugin.tsx b/packages/richtext-lexical/src/field/features/blocks/component/FormSavePlugin.tsx
index a4793aa7bd..5e6346eca0 100644
--- a/packages/richtext-lexical/src/field/features/blocks/component/FormSavePlugin.tsx
+++ b/packages/richtext-lexical/src/field/features/blocks/component/FormSavePlugin.tsx
@@ -2,7 +2,8 @@ import type { FormState } from 'payload/types'
 import type { Data } from 'payload/types'
 import type React from 'react'
 
-import { reduceFieldsToValues, useAllFormFields } from '@payloadcms/ui'
+import { useAllFormFields } from '@payloadcms/ui/forms/Form'
+import { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues'
 import { useEffect } from 'react'
 
 type Props = {
diff --git a/packages/richtext-lexical/src/field/features/blocks/component/index.tsx b/packages/richtext-lexical/src/field/features/blocks/component/index.tsx
index 7c8972355a..efe3ed3cc5 100644
--- a/packages/richtext-lexical/src/field/features/blocks/component/index.tsx
+++ b/packages/richtext-lexical/src/field/features/blocks/component/index.tsx
@@ -1,21 +1,21 @@
 'use client'
-import {
-  Form,
-  type FormProps,
-  getFormState,
-  useConfig,
-  useDocumentInfo,
-  useFieldPath,
-  useFormSubmitted,
-} from '@payloadcms/ui'
+
+import type { Props as FormProps } from '@payloadcms/ui/forms/Form'
+
+import { Form } from '@payloadcms/ui/forms/Form'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { type BlockFields } from '../nodes/BlocksNode.js'
 const baseClass = 'lexical-block'
 
-import type { ReducedBlock } from '@payloadcms/ui'
+import type { ReducedBlock } from '@payloadcms/ui/providers/ComponentMap'
 import type { FormState } from 'payload/types'
 
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useFormSubmitted } from '@payloadcms/ui/forms/Form'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { getFormState } from '@payloadcms/ui/utilities/getFormState'
 import { v4 as uuid } from 'uuid'
 
 import type { ClientComponentProps } from '../../types.js'
@@ -42,7 +42,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
   const config = useConfig()
   const submitted = useFormSubmitted()
   const { id } = useDocumentInfo()
-  const { schemaPath } = useFieldPath()
+  const { schemaPath } = useFieldProps()
   const { editorConfig, field: parentLexicalRichTextField } = useEditorConfigContext()
 
   const [initialState, setInitialState] = useState<FormState | false>(false)
@@ -124,7 +124,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
       reducedBlock &&
       initialState !== false && (
         <Form
-          // @ts-expect-error // TODO: Fix this type. Is this correct?
+          // @ts-expect-error TODO: Fix this
           fields={fieldMap}
           initialState={initialState}
           onChange={[onChange]}
diff --git a/packages/richtext-lexical/src/field/features/blocks/drawer/index.tsx b/packages/richtext-lexical/src/field/features/blocks/drawer/index.tsx
index e7eac44547..9cf12402c7 100644
--- a/packages/richtext-lexical/src/field/features/blocks/drawer/index.tsx
+++ b/packages/richtext-lexical/src/field/features/blocks/drawer/index.tsx
@@ -2,12 +2,15 @@
 import * as facelessUIImport from '@faceless-ui/modal'
 import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
 const { useLexicalComposerContext } = lexicalComposerContextImport
-import { BlocksDrawer, formatDrawerSlug, useEditDepth, useTranslation } from '@payloadcms/ui'
 import lexicalImport from 'lexical'
 const { $getNodeByKey, COMMAND_PRIORITY_EDITOR, createCommand } = lexicalImport
 
 import type { LexicalCommand, LexicalEditor } from 'lexical'
 
+import { formatDrawerSlug } from '@payloadcms/ui/elements/Drawer'
+import { BlocksDrawer } from '@payloadcms/ui/fields/Blocks/BlocksDrawer'
+import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { ClientComponentProps } from '../../types.js'
diff --git a/packages/richtext-lexical/src/field/features/blocks/feature.client.tsx b/packages/richtext-lexical/src/field/features/blocks/feature.client.tsx
index 254418ca2b..a40f53e6d6 100644
--- a/packages/richtext-lexical/src/field/features/blocks/feature.client.tsx
+++ b/packages/richtext-lexical/src/field/features/blocks/feature.client.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import type { ReducedBlock } from '@payloadcms/ui'
+import type { ReducedBlock } from '@payloadcms/ui/providers/ComponentMap'
 
 import { getTranslation } from '@payloadcms/translations'
 
diff --git a/packages/richtext-lexical/src/field/features/createFeaturePropComponent.tsx b/packages/richtext-lexical/src/field/features/createFeaturePropComponent.tsx
index 83932c9b66..241b5539a1 100644
--- a/packages/richtext-lexical/src/field/features/createFeaturePropComponent.tsx
+++ b/packages/richtext-lexical/src/field/features/createFeaturePropComponent.tsx
@@ -2,10 +2,11 @@
 
 import type React from 'react'
 
-import { useAddClientFunction, useFieldPath } from '@payloadcms/ui'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useAddClientFunction } from '@payloadcms/ui/providers/ClientFunction'
 
 const useLexicalFeatureProp = <T,>(featureKey: string, componentKey: string, prop: T) => {
-  const { schemaPath } = useFieldPath()
+  const { schemaPath } = useFieldProps()
 
   useAddClientFunction(
     `lexicalFeature.${schemaPath}.${featureKey}.components.${componentKey}`,
diff --git a/packages/richtext-lexical/src/field/features/link/drawer/index.tsx b/packages/richtext-lexical/src/field/features/link/drawer/index.tsx
index a74c682008..5cb1c1a0f7 100644
--- a/packages/richtext-lexical/src/field/features/link/drawer/index.tsx
+++ b/packages/richtext-lexical/src/field/features/link/drawer/index.tsx
@@ -1,17 +1,15 @@
+import type { Props as FormProps } from '@payloadcms/ui/forms/Form'
 import type { FormState } from 'payload/types'
 
-import {
-  Drawer,
-  Form,
-  type FormProps,
-  FormSubmit,
-  RenderFields,
-  getFormState,
-  useConfig,
-  useDocumentInfo,
-  useTranslation,
-} from '@payloadcms/ui'
-import { useFieldPath } from '@payloadcms/ui'
+import { Drawer } from '@payloadcms/ui/elements/Drawer'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { Form } from '@payloadcms/ui/forms/Form'
+import { RenderFields } from '@payloadcms/ui/forms/RenderFields'
+import { FormSubmit } from '@payloadcms/ui/forms/Submit'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { getFormState } from '@payloadcms/ui/utilities/getFormState'
 import React, { useCallback, useEffect, useState } from 'react'
 import { v4 as uuid } from 'uuid'
 
@@ -24,7 +22,7 @@ const baseClass = 'lexical-link-edit-drawer'
 export const LinkDrawer: React.FC<Props> = ({ drawerSlug, handleModalSubmit, stateData }) => {
   const { t } = useTranslation()
   const { id } = useDocumentInfo()
-  const { schemaPath } = useFieldPath()
+  const { schemaPath } = useFieldProps()
   const config = useConfig()
   const [initialState, setInitialState] = useState<FormState | false>(false)
   const {
diff --git a/packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx b/packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx
index db4973fa97..2ec17c9179 100644
--- a/packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx
+++ b/packages/richtext-lexical/src/field/features/link/plugins/floatingLinkEditor/LinkEditor/index.tsx
@@ -9,7 +9,6 @@ const { useLexicalComposerContext } = lexicalComposerContextImport
 import lexicalUtilsImport from '@lexical/utils'
 const { $findMatchingParent, mergeRegister } = lexicalUtilsImport
 import { getTranslation } from '@payloadcms/translations'
-import { formatDrawerSlug, useConfig, useEditDepth, useTranslation } from '@payloadcms/ui'
 import lexicalImport from 'lexical'
 const {
   $getSelection,
@@ -20,6 +19,10 @@ const {
   SELECTION_CHANGE_COMMAND,
 } = lexicalImport
 
+import { formatDrawerSlug } from '@payloadcms/ui/elements/Drawer'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import type { LinkNode } from '../../../nodes/LinkNode.js'
diff --git a/packages/richtext-lexical/src/field/features/relationship/drawer/index.tsx b/packages/richtext-lexical/src/field/features/relationship/drawer/index.tsx
index 6b0f59951c..c7dd3113b3 100644
--- a/packages/richtext-lexical/src/field/features/relationship/drawer/index.tsx
+++ b/packages/richtext-lexical/src/field/features/relationship/drawer/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
 const { useLexicalComposerContext } = lexicalComposerContextImport
-import { useListDrawer } from '@payloadcms/ui'
 import lexicalImport from 'lexical'
 const { $getNodeByKey, COMMAND_PRIORITY_EDITOR } = lexicalImport
 
 import type { LexicalEditor } from 'lexical'
 
+import { useListDrawer } from '@payloadcms/ui/elements/ListDrawer'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import { $createRelationshipNode } from '../nodes/RelationshipNode.js'
diff --git a/packages/richtext-lexical/src/field/features/relationship/feature.client.tsx b/packages/richtext-lexical/src/field/features/relationship/feature.client.tsx
index 82003bfacc..e716902612 100644
--- a/packages/richtext-lexical/src/field/features/relationship/feature.client.tsx
+++ b/packages/richtext-lexical/src/field/features/relationship/feature.client.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { withMergedProps } from '@payloadcms/ui'
+import { withMergedProps } from '@payloadcms/ui/elements/withMergedProps'
 
 import type { FeatureProviderProviderClient } from '../types.js'
 import type { RelationshipFeatureProps } from './feature.server.js'
diff --git a/packages/richtext-lexical/src/field/features/relationship/nodes/components/RelationshipComponent.tsx b/packages/richtext-lexical/src/field/features/relationship/nodes/components/RelationshipComponent.tsx
index 6f27781330..3618e4b729 100644
--- a/packages/richtext-lexical/src/field/features/relationship/nodes/components/RelationshipComponent.tsx
+++ b/packages/richtext-lexical/src/field/features/relationship/nodes/components/RelationshipComponent.tsx
@@ -3,12 +3,16 @@ import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.
 const { useLexicalComposerContext } = lexicalComposerContextImport
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'
 import { getTranslation } from '@payloadcms/translations'
-import { Button, useConfig, useDocumentDrawer, usePayloadAPI, useTranslation } from '@payloadcms/ui'
 import lexicalImport from 'lexical'
 const { $getNodeByKey } = lexicalImport
 
 import type { ElementFormatType } from 'lexical'
 
+import { Button } from '@payloadcms/ui/elements/Button'
+import { useDocumentDrawer } from '@payloadcms/ui/elements/DocumentDrawer'
+import usePayloadAPI from '@payloadcms/ui/hooks/usePayloadAPI'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React, { useCallback, useReducer, useState } from 'react'
 
 import type { RelationshipData } from '../RelationshipNode.js'
diff --git a/packages/richtext-lexical/src/field/features/relationship/plugins/index.tsx b/packages/richtext-lexical/src/field/features/relationship/plugins/index.tsx
index 2f572c21b1..078b2ec099 100644
--- a/packages/richtext-lexical/src/field/features/relationship/plugins/index.tsx
+++ b/packages/richtext-lexical/src/field/features/relationship/plugins/index.tsx
@@ -3,7 +3,6 @@ import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.
 const { useLexicalComposerContext } = lexicalComposerContextImport
 import lexicalUtilsImport from '@lexical/utils'
 const { $insertNodeToNearestRoot } = lexicalUtilsImport
-import { useConfig } from '@payloadcms/ui'
 import lexicalImport from 'lexical'
 const {
   $getPreviousSelection,
@@ -16,6 +15,7 @@ const {
 
 import type { LexicalCommand } from 'lexical'
 
+import { useConfig } from '@payloadcms/ui/providers/Config'
 import { useEffect } from 'react'
 import React from 'react'
 
diff --git a/packages/richtext-lexical/src/field/features/relationship/utils/EnabledRelationshipsCondition.tsx b/packages/richtext-lexical/src/field/features/relationship/utils/EnabledRelationshipsCondition.tsx
index a1556efefc..83b693821e 100644
--- a/packages/richtext-lexical/src/field/features/relationship/utils/EnabledRelationshipsCondition.tsx
+++ b/packages/richtext-lexical/src/field/features/relationship/utils/EnabledRelationshipsCondition.tsx
@@ -1,7 +1,8 @@
 import type { ClientUser } from 'payload/auth'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
-import { useAuth, useConfig } from '@payloadcms/ui'
+import { useAuth } from '@payloadcms/ui/providers/Auth'
+import { useConfig } from '@payloadcms/ui/providers/Config'
 import * as React from 'react'
 
 type options = {
diff --git a/packages/richtext-lexical/src/field/features/upload/component/ExtraFieldsDrawer/index.tsx b/packages/richtext-lexical/src/field/features/upload/component/ExtraFieldsDrawer/index.tsx
index 204e6bc83c..606e137d8a 100644
--- a/packages/richtext-lexical/src/field/features/upload/component/ExtraFieldsDrawer/index.tsx
+++ b/packages/richtext-lexical/src/field/features/upload/component/ExtraFieldsDrawer/index.tsx
@@ -5,22 +5,19 @@ import * as facelessUIImport from '@faceless-ui/modal'
 import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
 const { useLexicalComposerContext } = lexicalComposerContextImport
 import { getTranslation } from '@payloadcms/translations'
-import {
-  Drawer,
-  FieldPathProvider,
-  Form,
-  type FormProps,
-  FormSubmit,
-  RenderFields,
-  getFormState,
-  useConfig,
-  useDocumentInfo,
-  useFieldPath,
-  useTranslation,
-} from '@payloadcms/ui'
 import lexicalImport from 'lexical'
 const { $getNodeByKey } = lexicalImport
+import type { Props as FormProps } from '@payloadcms/ui/forms/Form'
 
+import { Drawer } from '@payloadcms/ui/elements/Drawer'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { Form } from '@payloadcms/ui/forms/Form'
+import { RenderFields } from '@payloadcms/ui/forms/RenderFields'
+import { FormSubmit } from '@payloadcms/ui/forms/Submit'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { getFormState } from '@payloadcms/ui/utilities/getFormState'
 import { deepCopyObject } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 import { v4 as uuid } from 'uuid'
@@ -55,7 +52,7 @@ export const ExtraFieldsUploadDrawer: React.FC<
 
   const { i18n, t } = useTranslation()
   const { id } = useDocumentInfo()
-  const { schemaPath } = useFieldPath()
+  const { schemaPath } = useFieldProps()
   const config = useConfig()
   const [initialState, setInitialState] = useState<FormState | false>(false)
   const {
@@ -131,7 +128,7 @@ export const ExtraFieldsUploadDrawer: React.FC<
     >
       {initialState !== false && (
         <Form
-          // @ts-expect-error // TODO: Fix this type. Is this correct?
+          // @ts-expect-error TODO: Fix this
           fields={fieldMap}
           initialState={initialState}
           onChange={[onChange]}
diff --git a/packages/richtext-lexical/src/field/features/upload/component/index.tsx b/packages/richtext-lexical/src/field/features/upload/component/index.tsx
index e812ce48b8..ce19a8ad0d 100644
--- a/packages/richtext-lexical/src/field/features/upload/component/index.tsx
+++ b/packages/richtext-lexical/src/field/features/upload/component/index.tsx
@@ -5,20 +5,18 @@ import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.
 const { useLexicalComposerContext } = lexicalComposerContextImport
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection.js'
 import { getTranslation } from '@payloadcms/translations'
-import {
-  Button,
-  DrawerToggler,
-  FileGraphic,
-  useConfig,
-  useDocumentDrawer,
-  useDrawerSlug,
-  usePayloadAPI,
-  useThumbnail,
-  useTranslation,
-} from '@payloadcms/ui'
 import lexicalImport from 'lexical'
 const { $getNodeByKey } = lexicalImport
 
+import { Button } from '@payloadcms/ui/elements/Button'
+import { useDocumentDrawer } from '@payloadcms/ui/elements/DocumentDrawer'
+import { DrawerToggler } from '@payloadcms/ui/elements/Drawer'
+import { File } from '@payloadcms/ui/graphics/File'
+import usePayloadAPI from '@payloadcms/ui/hooks/usePayloadAPI'
+import { useThumbnail } from '@payloadcms/ui/hooks/useThumbnail'
+import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { useDrawerSlug } from 'packages/ui/src/elements/Drawer/useDrawerSlug.js'
 import React, { useCallback, useReducer, useState } from 'react'
 
 import type { ClientComponentProps } from '../../types.js'
@@ -112,7 +110,7 @@ const Component: React.FC<ElementProps> = (props) => {
       <div className={`${baseClass}__card`}>
         <div className={`${baseClass}__topRow`}>
           <div className={`${baseClass}__thumbnail`}>
-            {thumbnailSRC ? <img alt={data?.filename} src={thumbnailSRC} /> : <FileGraphic />}
+            {thumbnailSRC ? <img alt={data?.filename} src={thumbnailSRC} /> : <File />}
           </div>
           <div className={`${baseClass}__topRowRightPanel`}>
             <div className={`${baseClass}__collectionLabel`}>
diff --git a/packages/richtext-lexical/src/field/features/upload/drawer/index.tsx b/packages/richtext-lexical/src/field/features/upload/drawer/index.tsx
index 9d0b51395c..82df44b553 100644
--- a/packages/richtext-lexical/src/field/features/upload/drawer/index.tsx
+++ b/packages/richtext-lexical/src/field/features/upload/drawer/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
 const { useLexicalComposerContext } = lexicalComposerContextImport
-import { useListDrawer } from '@payloadcms/ui'
 import lexicalImport from 'lexical'
 const { $getNodeByKey, COMMAND_PRIORITY_EDITOR } = lexicalImport
 
 import type { LexicalEditor } from 'lexical'
 
+import { useListDrawer } from '@payloadcms/ui/elements/ListDrawer'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import { EnabledRelationshipsCondition } from '../../relationship/utils/EnabledRelationshipsCondition.js'
diff --git a/packages/richtext-lexical/src/field/features/upload/plugin/index.tsx b/packages/richtext-lexical/src/field/features/upload/plugin/index.tsx
index 5971e8615e..44f31445e1 100644
--- a/packages/richtext-lexical/src/field/features/upload/plugin/index.tsx
+++ b/packages/richtext-lexical/src/field/features/upload/plugin/index.tsx
@@ -3,7 +3,6 @@ import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.
 const { useLexicalComposerContext } = lexicalComposerContextImport
 import lexicalUtilsImport from '@lexical/utils'
 const { $insertNodeToNearestRoot, mergeRegister } = lexicalUtilsImport
-import { useConfig } from '@payloadcms/ui'
 import lexicalImport from 'lexical'
 const {
   $getPreviousSelection,
@@ -16,6 +15,7 @@ const {
 
 import type { LexicalCommand } from 'lexical'
 
+import { useConfig } from '@payloadcms/ui/providers/Config'
 import React, { useEffect } from 'react'
 
 import type { RawUploadPayload } from '../nodes/UploadNode.js'
diff --git a/packages/richtext-lexical/src/field/index.tsx b/packages/richtext-lexical/src/field/index.tsx
index eec7e93733..a8e2b88958 100644
--- a/packages/richtext-lexical/src/field/index.tsx
+++ b/packages/richtext-lexical/src/field/index.tsx
@@ -1,8 +1,10 @@
 'use client'
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 import type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js'
 
-import { type FormFieldBase, ShimmerEffect } from '@payloadcms/ui'
-import { useClientFunctions } from '@payloadcms/ui/providers'
+import { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect'
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useClientFunctions } from '@payloadcms/ui/providers/ClientFunction'
 import React, { Suspense, lazy, useEffect, useState } from 'react'
 
 import type { GeneratedFeatureProviderComponent } from '../types.js'
@@ -25,7 +27,7 @@ export const RichTextField: React.FC<
   }
 > = (props) => {
   const { lexicalEditorConfig, richTextComponentMap } = props
-  const { schemaPath } = useFieldPath()
+  const { schemaPath } = useFieldProps()
   const clientFunctions = useClientFunctions()
   const [hasLoadedFeatures, setHasLoadedFeatures] = useState(false)
 
@@ -106,7 +108,7 @@ export const RichTextField: React.FC<
             )
             const featureComponents: React.ReactNode[] = featureComponentKeys.map((key) => {
               return richTextComponentMap.get(key)
-            }) as React.ReactNode[] // TODO: Type better
+            }) // TODO: Type better
 
             return (
               <React.Fragment key={featureProvider.key}>
diff --git a/packages/richtext-lexical/src/field/lexical/LexicalProvider.tsx b/packages/richtext-lexical/src/field/lexical/LexicalProvider.tsx
index a530afff16..03aa3eec2c 100644
--- a/packages/richtext-lexical/src/field/lexical/LexicalProvider.tsx
+++ b/packages/richtext-lexical/src/field/lexical/LexicalProvider.tsx
@@ -1,5 +1,4 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui'
 import type { EditorState, SerializedEditorState } from 'lexical'
 import type { LexicalEditor } from 'lexical'
 
@@ -7,6 +6,7 @@ import lexicalComposerImport from '@lexical/react/LexicalComposer.js'
 const { LexicalComposer } = lexicalComposerImport
 
 import type { InitialConfigType } from '@lexical/react/LexicalComposer.js'
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 
 import * as React from 'react'
 
diff --git a/packages/richtext-lexical/src/field/lexical/config/client/EditorConfigProvider.tsx b/packages/richtext-lexical/src/field/lexical/config/client/EditorConfigProvider.tsx
index c4c92a8a97..e0a52275f0 100644
--- a/packages/richtext-lexical/src/field/lexical/config/client/EditorConfigProvider.tsx
+++ b/packages/richtext-lexical/src/field/lexical/config/client/EditorConfigProvider.tsx
@@ -1,5 +1,6 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui'
+
+import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
 
 import * as React from 'react'
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
diff --git a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/index.tsx b/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/index.tsx
index 7b65e04dee..8311a5a5a2 100644
--- a/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/index.tsx
+++ b/packages/richtext-lexical/src/field/lexical/plugins/SlashMenu/index.tsx
@@ -4,7 +4,7 @@ import type { TextNode } from 'lexical'
 import lexicalComposerContextImport from '@lexical/react/LexicalComposerContext.js'
 const { useLexicalComposerContext } = lexicalComposerContextImport
 
-import { useTranslation } from '@payloadcms/ui'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import { useCallback, useMemo, useState } from 'react'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
diff --git a/packages/richtext-lexical/src/generateComponentMap.tsx b/packages/richtext-lexical/src/generateComponentMap.tsx
index 81b3bda9cf..0217c04c4e 100644
--- a/packages/richtext-lexical/src/generateComponentMap.tsx
+++ b/packages/richtext-lexical/src/generateComponentMap.tsx
@@ -1,6 +1,6 @@
 import type { RichTextAdapter } from 'payload/types'
 
-import { mapFields } from '@payloadcms/ui/utilities'
+import { mapFields } from '@payloadcms/ui/providers/ComponentMap'
 import { sanitizeFields } from 'payload/config'
 import React from 'react'
 
diff --git a/packages/richtext-lexical/src/index.ts b/packages/richtext-lexical/src/index.ts
index 51c71b5ad3..0d27f32d58 100644
--- a/packages/richtext-lexical/src/index.ts
+++ b/packages/richtext-lexical/src/index.ts
@@ -3,7 +3,7 @@ import type { SerializedEditorState } from 'lexical'
 import type { EditorConfig as LexicalEditorConfig } from 'lexical/LexicalEditor.js'
 import type { RichTextAdapter } from 'payload/types'
 
-import { withMergedProps } from '@payloadcms/ui'
+import { withMergedProps } from '@payloadcms/ui/elements/withMergedProps'
 import { withNullableJSONSchemaType } from 'payload/utilities'
 
 import type { FeatureProviderServer, ResolvedServerFeatureMap } from './field/features/types.js'
diff --git a/packages/richtext-lexical/src/useLexicalFeature.tsx b/packages/richtext-lexical/src/useLexicalFeature.tsx
index be8c02c504..7e64b94286 100644
--- a/packages/richtext-lexical/src/useLexicalFeature.tsx
+++ b/packages/richtext-lexical/src/useLexicalFeature.tsx
@@ -1,6 +1,7 @@
 'use client'
-import { useFieldPath } from '@payloadcms/ui/forms'
-import { useAddClientFunction } from '@payloadcms/ui/providers'
+
+import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useAddClientFunction } from '@payloadcms/ui/providers/ClientFunction'
 
 import type { FeatureProviderClient } from './field/features/types.js'
 
@@ -8,7 +9,7 @@ export const useLexicalFeature = <ClientFeatureProps,>(
   featureKey: string,
   feature: FeatureProviderClient<ClientFeatureProps>,
 ) => {
-  const { schemaPath } = useFieldPath()
+  const { schemaPath } = useFieldProps()
 
   useAddClientFunction(`lexicalFeature.${schemaPath}.${featureKey}`, feature)
 }
diff --git a/packages/ui/src/providers/ComponentMap/index.tsx b/packages/ui/src/providers/ComponentMap/index.tsx
index 0faa16450a..b945160c58 100644
--- a/packages/ui/src/providers/ComponentMap/index.tsx
+++ b/packages/ui/src/providers/ComponentMap/index.tsx
@@ -84,4 +84,4 @@ export const useComponentMap = (): IComponentMapContext => useContext(ComponentM
 
 export { buildComponentMap } from './buildComponentMap/index.js'
 export { mapFields } from './buildComponentMap/mapFields.js'
-export type { FieldMap, MappedField } from './buildComponentMap/types.js'
+export type * from './buildComponentMap/types.js'