fix: fix all ui imports in our plugins, and get rid of ui subpath exports within monorepo (#6854)

packages/next/src/elements/Nav/index.client.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { EntityToGroup } from '@payloadcms/ui/utilities/groupNavItems'
+import type { EntityToGroup } from '@payloadcms/ui/shared'
 
 import { getTranslation } from '@payloadcms/translations'
 import {

packages/next/src/layouts/Root/index.tsx

@@ -3,8 +3,8 @@ import type { SanitizedConfig } from 'payload'
 
 import { initI18n, rtlLanguages } from '@payloadcms/translations'
 import { RootProvider } from '@payloadcms/ui'
-import { buildComponentMap } from '@payloadcms/ui/providers/ComponentMap/buildComponentMap'
 import '@payloadcms/ui/scss/app.scss'
+import { buildComponentMap } from '@payloadcms/ui/utilities/buildComponentMap'
 import { Merriweather } from 'next/font/google'
 import { headers as getHeaders, cookies as nextCookies } from 'next/headers.js'
 import { createClientConfig, parseCookies } from 'payload'

packages/next/src/views/Account/Settings/LanguageSelector.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { AcceptedLanguages } from '@payloadcms/translations'
-import type { Option } from '@payloadcms/ui/elements/ReactSelect'
+import type { ReactSelectOption } from '@payloadcms/ui'
 import type { LanguageOptions } from 'payload'
 
 import { ReactSelect, useTranslation } from '@payloadcms/ui'
@@ -17,7 +17,7 @@ export const LanguageSelector: React.FC<{
     <ReactSelect
       inputId="language-select"
       isClearable={false}
-      onChange={async (option: Option<AcceptedLanguages>) => {
+      onChange={async (option: ReactSelectOption<AcceptedLanguages>) => {
         await switchLanguage(option.value)
       }}
       options={languageOptions}

packages/next/src/views/Dashboard/index.tsx

@@ -1,4 +1,4 @@
-import type { EntityToGroup } from '@payloadcms/ui/utilities/groupNavItems'
+import type { EntityToGroup } from '@payloadcms/ui/shared'
 import type { AdminViewProps } from 'payload'
 
 import { HydrateClientUser } from '@payloadcms/ui'

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

@@ -1,5 +1,5 @@
 'use client'
-import type { FormProps } from '@payloadcms/ui/forms/Form'
+import type { FormProps } from '@payloadcms/ui'
 import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
 import type {
   ClientCollectionConfig,

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

@@ -1,4 +1,4 @@
-import type { StepNavItem } from '@payloadcms/ui/elements/StepNav'
+import type { StepNavItem } from '@payloadcms/ui'
 import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
 import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'
 import type React from 'react'

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

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

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

@@ -1,9 +1,8 @@
 'use client'
 
-import type { TextFieldProps } from '@payloadcms/ui/fields/Text'
+import type { TextFieldProps } from '@payloadcms/ui'
 
-import { Select } from '@payloadcms/ui/fields/Select'
-import { useForm } from '@payloadcms/ui/forms/Form'
+import { SelectField, useForm } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
 
 import type { SelectFieldOption } from '../../types.js'
@@ -37,5 +36,5 @@ export const DynamicFieldSelector: React.FC<TextFieldProps> = (props) => {
 
   // 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 <Select {...props} options={options} />
+  return <SelectField {...props} options={options} />
 }

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

@@ -1,11 +1,9 @@
 'use client'
 
-import type { TextFieldProps } from '@payloadcms/ui/fields/Text'
+import type { TextFieldProps } from '@payloadcms/ui'
 import type { Data } from 'payload'
 
-import { Text } from '@payloadcms/ui/fields/Text'
-import { useWatchForm } from '@payloadcms/ui/forms/Form'
-import { useLocale } from '@payloadcms/ui/providers/Locale'
+import { TextField, useLocale, useWatchForm } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
 
 type FieldWithID = {
@@ -47,7 +45,7 @@ export const DynamicPriceSelector: React.FC<TextFieldProps> = (props) => {
 
   // TODO: make this a number field, block by Payload
   if (valueType === 'static') {
-    return <Text {...props} />
+    return <TextField {...props} />
   }
 
   const localeCode = typeof locale === 'object' && 'code' in locale ? locale.code : locale

packages/plugin-search/src/Search/ui/index.client.tsx

@@ -2,8 +2,7 @@
 
 import type { FormState } from 'payload'
 
-import { useWatchForm } from '@payloadcms/ui/forms/Form'
-import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useConfig, useWatchForm } from '@payloadcms/ui'
 import React from 'react'
 // TODO: fix this import to work in dev mode within the monorepo in a way that is backwards compatible with 1.x
 // import CopyToClipboard from 'payload/dist/admin/components/elements/CopyToClipboard'

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

@@ -1,16 +1,17 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
-import type { FieldType, Options } from '@payloadcms/ui/forms/useField'
+import type { FieldType, FormFieldBase, Options } from '@payloadcms/ui'
 
-import { FieldLabel } from '@payloadcms/ui/fields/FieldLabel'
-import { TextareaInput } from '@payloadcms/ui/fields/Textarea'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-import { useAllFormFields } from '@payloadcms/ui/forms/Form'
-import { useField } from '@payloadcms/ui/forms/useField'
-import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
-import { useLocale } from '@payloadcms/ui/providers/Locale'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import {
+  FieldLabel,
+  TextareaInput,
+  useAllFormFields,
+  useDocumentInfo,
+  useField,
+  useFieldProps,
+  useLocale,
+  useTranslation,
+} from '@payloadcms/ui'
 import React, { useCallback } from 'react'
 
 import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'

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

@@ -1,16 +1,17 @@
 'use client'
 
-import type { UploadInputProps } from '@payloadcms/ui/fields/Upload'
-import type { FieldType, Options } from '@payloadcms/ui/forms/useField'
+import type { FieldType, Options, UploadInputProps } from '@payloadcms/ui'
 
-import { FieldLabel } from '@payloadcms/ui/fields/FieldLabel'
-import { UploadInput } from '@payloadcms/ui/fields/Upload'
-import { useAllFormFields } from '@payloadcms/ui/forms/Form'
-import { useField } from '@payloadcms/ui/forms/useField'
-import { useConfig } from '@payloadcms/ui/providers/Config'
-import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
-import { useLocale } from '@payloadcms/ui/providers/Locale'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import {
+  FieldLabel,
+  UploadInput,
+  useAllFormFields,
+  useConfig,
+  useDocumentInfo,
+  useField,
+  useLocale,
+  useTranslation,
+} from '@payloadcms/ui'
 import React, { useCallback } from 'react'
 
 import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'

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

@@ -1,16 +1,17 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
-import type { FieldType, Options } from '@payloadcms/ui/forms/useField'
+import type { FieldType, FormFieldBase, Options } from '@payloadcms/ui'
 
-import { FieldLabel } from '@payloadcms/ui/fields/FieldLabel'
-import { TextInput } from '@payloadcms/ui/fields/Text'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-import { useAllFormFields } from '@payloadcms/ui/forms/Form'
-import { useField } from '@payloadcms/ui/forms/useField'
-import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
-import { useLocale } from '@payloadcms/ui/providers/Locale'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import {
+  FieldLabel,
+  TextInput,
+  useAllFormFields,
+  useDocumentInfo,
+  useField,
+  useFieldProps,
+  useLocale,
+  useTranslation,
+} from '@payloadcms/ui'
 import React, { useCallback } from 'react'
 
 import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'

packages/plugin-seo/src/index.tsx

@@ -1,7 +1,7 @@
 import type { Config, Field, GroupField, TabsField, TextField } from 'payload'
 
 import { addDataAndFileToRequest } from '@payloadcms/next/utilities'
-import { withMergedProps } from '@payloadcms/ui/elements/withMergedProps'
+import { withMergedProps } from '@payloadcms/ui/shared'
 import { deepMerge } from 'payload/shared'
 
 import type {

packages/plugin-seo/src/types.ts

@@ -1,4 +1,4 @@
-import type { DocumentInfoContext } from '@payloadcms/ui/providers/DocumentInfo'
+import type { DocumentInfoContext } from '@payloadcms/ui'
 import type { Field, TextField, TextareaField, UploadField } from 'payload'
 
 export type GenerateTitle = <T = any>(

packages/plugin-seo/src/ui/LengthIndicator.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { useTranslation } from '@payloadcms/ui'
 import React, { Fragment, useEffect, useState } from 'react'
 
 import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'

packages/plugin-seo/src/ui/Overview.tsx

@@ -2,8 +2,7 @@
 
 import type { FormField } from 'payload'
 
-import { useAllFormFields, useForm } from '@payloadcms/ui/forms/Form'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { useAllFormFields, useForm, useTranslation } from '@payloadcms/ui'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'

packages/plugin-seo/src/ui/Preview.tsx

@@ -2,10 +2,7 @@
 
 import type { FormField, UIField } from 'payload'
 
-import { useAllFormFields } from '@payloadcms/ui/forms/Form'
-import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'
-import { useLocale } from '@payloadcms/ui/providers/Locale'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { useAllFormFields, useDocumentInfo, useLocale, useTranslation } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
 
 import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'

packages/plugin-seo/tsconfig.json

@@ -5,7 +5,8 @@
     "noEmit": false /* Do not emit outputs. */,
     "emitDeclarationOnly": true,
     "outDir": "./dist" /* Specify an output folder for all emitted files. */,
-    "rootDir": "./src" /* Specify the root folder within your source files. */
+    "rootDir": "./src", /* Specify the root folder within your source files. */
+    "jsx": "react-jsx"
   },
   "exclude": [
     "dist",

packages/plugin-stripe/src/ui/LinkToDoc.tsx

@@ -1,9 +1,7 @@
 'use client'
 import type { CustomComponent, UIField } from 'payload'
 
-import { CopyToClipboard } from '@payloadcms/ui/elements/CopyToClipboard'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-import { useFormFields } from '@payloadcms/ui/forms/Form'
+import { CopyToClipboard, useFieldProps, useFormFields } from '@payloadcms/ui'
 import React from 'react'
 
 export const LinkToDoc: CustomComponent<UIField> = () => {

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

@@ -1,5 +1,5 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
+import type { FormFieldBase } from '@payloadcms/ui'
 import type { SerializedEditorState } from 'lexical'
 
 import {
@@ -15,8 +15,8 @@ import { ErrorBoundary } from 'react-error-boundary'
 
 import type { SanitizedClientEditorConfig } from './lexical/config/types.js'
 
-import './index.scss'
 import './bundled.css'
+import './index.scss'
 import { LexicalProvider } from './lexical/LexicalProvider.js'
 
 const baseClass = 'rich-text-lexical'

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

@@ -1,4 +1,4 @@
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
+import type { FormFieldBase } from '@payloadcms/ui'
 import type { FieldMap, ReducedBlock } from '@payloadcms/ui/utilities/buildComponentMap'
 import type { CollapsedPreferences, Data, FormState } from 'payload'
 

packages/richtext-lexical/src/field/features/blocks/component/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FormProps } from '@payloadcms/ui/forms/Form'
+import type { FormProps } from '@payloadcms/ui'
 
 import {
   Collapsible,

packages/richtext-lexical/src/field/features/link/drawer/index.tsx

@@ -1,4 +1,4 @@
-import type { FormProps } from '@payloadcms/ui/forms/Form'
+import type { FormProps } from '@payloadcms/ui'
 import type { FormState } from 'payload'
 
 import {

packages/richtext-lexical/src/field/features/upload/component/ExtraFieldsDrawer/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { FormProps } from '@payloadcms/ui/forms/Form'
+import type { FormProps } from '@payloadcms/ui'
 import type { ClientCollectionConfig, FormState } from 'payload'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'

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

@@ -1,5 +1,5 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
+import type { FormFieldBase } from '@payloadcms/ui'
 import type { EditorConfig as LexicalEditorConfig } from 'lexical'
 
 import { ShimmerEffect, useClientFunctions, useFieldProps } from '@payloadcms/ui'

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

@@ -1,6 +1,6 @@
 'use client'
 import type { InitialConfigType } from '@lexical/react/LexicalComposer.js'
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
+import type { FormFieldBase } from '@payloadcms/ui'
 import type { EditorState, LexicalEditor, SerializedEditorState } from 'lexical'
 
 import { LexicalComposer } from '@lexical/react/LexicalComposer.js'

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

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
+import type { FormFieldBase } from '@payloadcms/ui'
 import type { LexicalEditor } from 'lexical'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'

packages/richtext-lexical/src/index.ts

@@ -5,7 +5,7 @@ import type {
   SerializedLexicalNode,
 } from 'lexical'
 
-import { withMergedProps } from '@payloadcms/ui/elements/withMergedProps'
+import { withMergedProps } from '@payloadcms/ui/shared'
 import { fileURLToPath } from 'node:url'
 import path from 'path'
 import {

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

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

packages/richtext-slate/src/field/elements/link/LinkDrawer/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FormProps } from '@payloadcms/ui/forms/Form'
+import type { FormProps } from '@payloadcms/ui'
 
 import {
   Drawer,

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

@@ -1,4 +1,4 @@
-import type { FieldMap } from '@payloadcms/ui/utilities/buildComponentMap'
+import type { FieldMap } from '@payloadcms/ui'
 import type { FormState } from 'payload'
 
 export type Props = {

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

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

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

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
+import type { FormFieldBase, FormProps } from '@payloadcms/ui'
 import type { ClientCollectionConfig } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
@@ -8,6 +8,7 @@ import {
   Drawer,
   Form,
   FormSubmit,
+  RenderFields,
   useAuth,
   useConfig,
   useDocumentInfo,
@@ -15,8 +16,6 @@ import {
   useModal,
   useTranslation,
 } from '@payloadcms/ui'
-import { type FormProps } from '@payloadcms/ui/forms/Form'
-import { RenderFields } from '@payloadcms/ui/forms/RenderFields'
 import { getFormState } from '@payloadcms/ui/shared'
 import { deepCopyObject } from 'payload/shared'
 import React, { useCallback, useEffect, useState } from 'react'

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

@@ -1,12 +1,13 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
+import type { FormFieldBase } from '@payloadcms/ui'
 import type { ClientCollectionConfig } from 'payload'
 
 import { getTranslation } from '@payloadcms/translations'
 import {
   Button,
   DrawerToggler,
+  File,
   useConfig,
   useDocumentDrawer,
   useDrawerSlug,
@@ -14,7 +15,6 @@ import {
   usePayloadAPI,
   useTranslation,
 } from '@payloadcms/ui'
-import { File } from '@payloadcms/ui/graphics/File'
 import React, { useCallback, useReducer, useState } from 'react'
 import { Transforms } from 'slate'
 import { ReactEditor, useFocused, useSelected, useSlateStatic } from 'slate-react'

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

@@ -1,6 +1,6 @@
 'use client'
 
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
+import type { FormFieldBase } from '@payloadcms/ui'
 
 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/fields/shared'
+import type { FormFieldBase } from '@payloadcms/ui'
 
 import React from 'react'
 

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

@@ -1,5 +1,5 @@
 'use client'
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared'
+import type { FormFieldBase } from '@payloadcms/ui'
 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/fields/shared'
+import type { FormFieldBase } from '@payloadcms/ui'
 
 import React from 'react'
 

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

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

packages/ui/package.json

@@ -20,56 +20,35 @@
       "types": "./src/exports/shared/index.ts",
       "default": "./src/exports/shared/index.ts"
     },
-    "./assets": {
-      "import": "./src/assets/index.ts",
-      "types": "./src/assets/index.ts",
-      "default": "./src/assets/index.ts"
-    },
     "./scss": {
       "import": "./src/scss/styles.scss",
       "default": "./src/scss/styles.scss"
     },
+    "./utilities/buildComponentMap": {
+      "import": "./src/utilities/buildComponentMap.ts",
+      "types": "./src/utilities/buildComponentMap.ts",
+      "default": "./src/utilities/buildComponentMap.ts"
+    },
+    "./utilities/buildFormState": {
+      "import": "./src/utilities/buildFormState.ts",
+      "types": "./src/utilities/buildFormState.ts",
+      "default": "./src/utilities/buildFormState.ts"
+    },
+    "./utilities/buildFieldSchemaMap/traverseFields": {
+      "import": "./src/utilities/buildFieldSchemaMap/traverseFields.ts",
+      "types": "./src/utilities/buildFieldSchemaMap/traverseFields.ts",
+      "default": "./src/utilities/buildFieldSchemaMap/traverseFields.ts"
+    },
+    "./forms/buildStateFromSchema": {
+      "import": "./src/forms/buildStateFromSchema/index.tsx",
+      "types": "./src/forms/buildStateFromSchema/index.tsx",
+      "default": "./src/forms/buildStateFromSchema/index.tsx"
+    },
     "./scss/app.scss": "./src/scss/app.scss",
-    "./styles.css": "./dist/styles.css",
-    "./elements/*": {
-      "import": "./src/elements/*/index.tsx",
-      "types": "./src/elements/*/index.tsx",
-      "default": "./src/elements/*/index.tsx"
-    },
-    "./fields/*": {
-      "import": "./src/fields/*/index.tsx",
-      "types": "./src/fields/*/index.tsx",
-      "default": "./src/fields/*/index.tsx"
-    },
-    "./forms/*": {
-      "import": "./src/forms/*/index.tsx",
-      "types": "./src/forms/*/index.tsx",
-      "default": "./src/forms/*/index.tsx"
-    },
-    "./graphics/*": {
-      "import": "./src/graphics/*/index.tsx",
-      "types": "./src/graphics/*/index.tsx",
-      "default": "./src/graphics/*/index.tsx"
-    },
-    "./hooks/*": {
-      "import": "./src/hooks/*.ts",
-      "types": "./src/hooks/*.ts",
-      "default": "./src/hooks/*.ts"
-    },
-    "./icons/*": {
-      "import": "./src/icons/*/index.tsx",
-      "types": "./src/icons/*/index.tsx",
-      "default": "./src/icons/*/index.tsx"
-    },
-    "./providers/*": {
-      "import": "./src/providers/*/index.tsx",
-      "types": "./src/providers/*/index.tsx",
-      "default": "./src/providers/*/index.tsx"
-    },
-    "./utilities/*": {
-      "import": "./src/utilities/*.ts",
-      "types": "./src/utilities/*.ts",
-      "default": "./src/utilities/*.ts"
+    "./assets": {
+      "import": "./src/assets/index.ts",
+      "types": "./src/assets/index.ts",
+      "default": "./src/assets/index.ts"
     }
   },
   "main": "./src/exports/client/index.ts",
@@ -178,7 +157,6 @@
         "types": "./dist/assets/index.d.ts",
         "default": "./dist/assets/index.js"
       },
-      "./assets/*": "./dist/assets/*",
       "./elements/*": {
         "import": "./dist/elements/*/index.js",
         "types": "./dist/elements/*/index.d.ts",

packages/ui/src/elements/ReactSelect/DropdownIndicator/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { DropdownIndicatorProps } from 'react-select'
 
-import { ChevronIcon } from '@payloadcms/ui/icons/Chevron'
+import { ChevronIcon } from '@payloadcms/ui'
 import React, { type JSX } from 'react'
 
 import type { Option as OptionType } from '../types.js'

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

@@ -1,7 +1,6 @@
 'use client'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap'
 import React, { Fragment } from 'react'
 
 import { PayloadIcon } from '../../graphics/Icon/index.js'
@@ -12,6 +11,8 @@ import './index.scss'
 export { SetStepNav } from './SetStepNav.js'
 import type { StepNavItem } from './types.js'
 
+import { useComponentMap } from '../../providers/ComponentMap/index.js'
+
 const baseClass = 'step-nav'
 
 const StepNav: React.FC<{

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

@@ -53,7 +53,9 @@ import * as PopupList from '../../elements/Popup/PopupButtonList/index.js'
 export { PopupList }
 export { Popup } from '../../elements/Popup/index.js'
 export { PublishMany } from '../../elements/PublishMany/index.js'
-export { ReactSelect } from '../../elements/ReactSelect/index.js'
+export { DefaultPublishButton, PublishButton } from '../../elements/PublishButton/index.js'
+
+export { type Option as ReactSelectOption, ReactSelect } from '../../elements/ReactSelect/index.js'
 export { ReactSelect as Select } from '../../elements/ReactSelect/index.js'
 export { RenderTitle } from '../../elements/RenderTitle/index.js'
 export { ShimmerEffect } from '../../elements/ShimmerEffect/index.js'
@@ -100,10 +102,16 @@ export { RichText as RichTextField } from '../../fields/RichText/index.js'
 export { Row as RowField } from '../../fields/Row/index.js'
 export { Select as SelectField, type SelectFieldProps } from '../../fields/Select/index.js'
 export { Tabs as TabsField, type TabsFieldProps } from '../../fields/Tabs/index.js'
-export { Text as TextField } from '../../fields/Text/index.js'
-export { Textarea as TextareaField } from '../../fields/Textarea/index.js'
+export { Text as TextField, TextInput } from '../../fields/Text/index.js'
+export type { TextFieldProps, TextInputProps } from '../../fields/Text/index.js'
+
+export { Textarea as TextareaField, TextareaInput } from '../../fields/Textarea/index.js'
+export type { TextAreaInputProps, TextareaFieldProps } from '../../fields/Textarea/index.js'
+
 export { UI as UIField } from '../../fields/UI/index.js'
-export { Upload as UploadField } from '../../fields/Upload/index.js'
+export { Upload as UploadField, UploadInput } from '../../fields/Upload/index.js'
+export type { UploadFieldProps, UploadInputProps } from '../../fields/Upload/index.js'
+
 export { fieldBaseClass } from '../../fields/shared/index.js'
 
 // forms
@@ -122,10 +130,15 @@ export {
 export { Form, type FormProps } from '../../forms/Form/index.js'
 export { NullifyLocaleField } from '../../forms/NullifyField/index.js'
 export { RenderFields } from '../../forms/RenderFields/index.js'
-export { RowLabel } from '../../forms/RowLabel/index.js'
+export { RowLabel, type RowLabelProps } from '../../forms/RowLabel/index.js'
+export { RowLabelProvider, useRowLabel } from '../../forms/RowLabel/Context/index.js'
+
 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'
 
 // graphics
@@ -158,11 +171,24 @@ export { ActionsProvider, SetViewActions, useActions } from '../../providers/Act
 export { AuthProvider, useAuth } from '../../providers/Auth/index.js'
 export { ClientFunctionProvider, useClientFunctions } from '../../providers/ClientFunction/index.js'
 export { useAddClientFunction } from '../../providers/ClientFunction/index.js'
-export type { MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
+export type {
+  ActionMap,
+  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'
 export { DocumentEventsProvider, useDocumentEvents } from '../../providers/DocumentEvents/index.js'
 export { DocumentInfoProvider, useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+export type { DocumentInfoContext, DocumentInfoProps } from '../../providers/DocumentInfo/index.js'
+
 export { EditDepthProvider, useEditDepth } from '../../providers/EditDepth/index.js'
 export {
   EntityVisibilityProvider,

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

@@ -1,6 +1,7 @@
 // IMPORTANT: the shared.ts file CANNOT contain any Server Components _that import client components_.
 export { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
 export { WithServerSideProps } from '../../elements/WithServerSideProps/index.js'
+export { withMergedProps } from '../../elements/withMergedProps/index.js' // cannot be within a 'use client', thus we export this from shared
 export { PayloadIcon } from '../../graphics/Icon/index.js'
 export { PayloadLogo } from '../../graphics/Logo/index.js'
 export { requests } from '../../utilities/api.js'
@@ -8,7 +9,12 @@ export { findLocaleFromCode } from '../../utilities/findLocaleFromCode.js'
 export { formatDate } from '../../utilities/formatDate.js'
 export { formatDocTitle } from '../../utilities/formatDocTitle.js'
 export { getFormState } from '../../utilities/getFormState.js'
-export { EntityType, groupNavItems } from '../../utilities/groupNavItems.js'
+export {
+  type EntityToGroup,
+  EntityType,
+  type Group,
+  groupNavItems,
+} from '../../utilities/groupNavItems.js'
 export { hasSavePermission } from '../../utilities/hasSavePermission.js'
 export { isEditing } from '../../utilities/isEditing.js'
 export { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'

test/access-control/TestButton.tsx

@@ -1,7 +1,6 @@
 'use client'
-import { useForm } from '@payloadcms/ui/forms/Form'
-import { useAuth } from '@payloadcms/ui/providers/Auth'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+
+import { useAuth, useForm, useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
 export const TestButton: React.FC = () => {

test/admin/components/AfterNavLinks/index.tsx

@@ -2,10 +2,10 @@
 
 import type { SanitizedConfig } from 'payload'
 
-import { useConfig } from '@payloadcms/ui/providers/Config'
 import LinkImport from 'next/link.js'
 const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
+import { useConfig } from '@payloadcms/ui'
 import React from 'react'
 
 const baseClass = 'after-nav-links'

test/admin/components/BeforeLogin/index.tsx

@@ -2,7 +2,7 @@
 
 import type { SanitizedConfig } from 'payload'
 
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
 export const BeforeLogin: SanitizedConfig['admin']['components']['beforeLogin'][0] = () => {

test/admin/components/CustomCell/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { CellComponentProps } from 'payload'
 
-import { useTableCell } from '@payloadcms/ui/elements/Table'
+import { useTableCell } from '@payloadcms/ui'
 import React from 'react'
 
 export const CustomCell: React.FC<CellComponentProps> = (props) => {

test/admin/components/CustomTabComponent/client.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useConfig } from '@payloadcms/ui'
 import LinkImport from 'next/link.js'
 import { useParams } from 'next/navigation.js'
 import React from 'react'

test/admin/components/FieldDescription/index.tsx

@@ -1,8 +1,7 @@
 'use client'
 import type { DescriptionComponent } from 'payload'
 
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-import { useFormFields } from '@payloadcms/ui/forms/Form'
+import { useFieldProps, useFormFields } from '@payloadcms/ui'
 import React from 'react'
 
 export const FieldDescriptionComponent: DescriptionComponent = () => {

test/admin/components/Logout/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { LogOutIcon } from '@payloadcms/ui/icons/LogOut'
-import { useConfig } from '@payloadcms/ui/providers/Config'
+import { LogOutIcon, useConfig } from '@payloadcms/ui'
 import React from 'react'
 
 export const Logout: React.FC = () => {

test/admin/components/views/CustomDefault/index.tsx

@@ -7,8 +7,7 @@ const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.
 
 import type { AdminViewProps } from 'payload'
 
-import { Button } from '@payloadcms/ui/elements/Button'
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import { Button, SetStepNav } from '@payloadcms/ui'
 
 import { customViewPath } from '../../../shared.js'
 import './index.scss'

test/admin/components/views/CustomEdit/index.tsx

@@ -1,6 +1,6 @@
 import type { EditViewComponent } from 'payload'
 
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import { SetStepNav } from '@payloadcms/ui'
 import { notFound, redirect } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

test/admin/components/views/CustomEditDefault/index.tsx

@@ -1,9 +1,9 @@
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import type { EditViewComponent } from 'payload'
+
+import { SetStepNav } from '@payloadcms/ui'
 import { notFound, redirect } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 
-import type { EditViewComponent } from '../../../../../packages/payload/types.js'
-
 export const CustomDefaultEditView: EditViewComponent = ({ initPageResult }) => {
   if (!initPageResult) {
     notFound()

test/admin/components/views/CustomMinimal/index.tsx

@@ -13,7 +13,7 @@ const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.
 import type { AdminViewProps } from 'payload'
 
 import { MinimalTemplate } from '@payloadcms/next/templates'
-import { Button } from '@payloadcms/ui/elements/Button'
+import { Button } from '@payloadcms/ui'
 
 import { customViewPath } from '../../../shared.js'
 import './index.scss'

test/admin/components/views/CustomTabComponent/index.tsx

@@ -1,9 +1,9 @@
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import type { ServerSideEditViewProps } from 'payload'
+
+import { SetStepNav } from '@payloadcms/ui'
 import { notFound } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 
-import type { ServerSideEditViewProps } from '../../../../../packages/payload/types.js'
-
 import { customTabViewComponentTitle } from '../../../shared.js'
 
 export const CustomTabComponentView: React.FC<ServerSideEditViewProps> = ({ initPageResult }) => {

test/admin/components/views/CustomTabLabel/index.tsx

@@ -1,6 +1,6 @@
 import type { EditViewComponent } from 'payload'
 
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import { SetStepNav } from '@payloadcms/ui'
 import { notFound } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

test/admin/components/views/CustomTabNested/index.tsx

@@ -1,6 +1,6 @@
 import type { EditViewComponent } from 'payload'
 
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import { SetStepNav } from '@payloadcms/ui'
 import { notFound } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

test/admin/components/views/CustomVersions/index.tsx

@@ -1,6 +1,6 @@
 import type { EditViewComponent } from 'payload'
 
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import { SetStepNav } from '@payloadcms/ui'
 import { notFound, redirect } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

test/admin/components/views/CustomView/index.client.tsx

@@ -1,8 +1,12 @@
 'use client'
-import { ConfirmPassword } from '@payloadcms/ui/fields/ConfirmPassword'
-import { Password } from '@payloadcms/ui/fields/Password'
-import { Form, useFormFields } from '@payloadcms/ui/forms/Form'
-import { FormSubmit } from '@payloadcms/ui/forms/Submit'
+
+import {
+  ConfirmPasswordField,
+  Form,
+  FormSubmit,
+  PasswordField,
+  useFormFields,
+} from '@payloadcms/ui'
 import React from 'react'
 
 export const ClientForm: React.FC = () => {
@@ -22,7 +26,7 @@ export const ClientForm: React.FC = () => {
       }}
     >
       <CustomPassword />
-      <ConfirmPassword />
+      <ConfirmPasswordField />
       <FormSubmit>Submit</FormSubmit>
     </Form>
   )
@@ -36,7 +40,7 @@ const CustomPassword: React.FC = () => {
   const confirmValue = confirmPassword.value
 
   return (
-    <Password
+    <PasswordField
       autoComplete="off"
       label="Password"
       name="password"

test/admin/components/views/CustomView/index.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 
 const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
-import { Button } from '@payloadcms/ui/elements/Button'
+import { Button } from '@payloadcms/ui'
 
 import { customNestedViewPath, customViewTitle } from '../../../shared.js'
 import { ClientForm } from './index.client.js'

test/admin/components/views/CustomViewNested/index.tsx

@@ -1,9 +1,9 @@
-import { Button } from '@payloadcms/ui/elements/Button'
+import type { AdminViewProps } from 'payload'
+
+import { Button } from '@payloadcms/ui'
 import LinkImport from 'next/link.js'
 import React from 'react'
 
-import type { AdminViewProps } from '../../../../../packages/payload/types.js'
-
 import { customNestedViewTitle, customViewPath } from '../../../shared.js'
 
 const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default

test/admin/components/views/CustomViewWithParam/index.tsx

@@ -1,11 +1,11 @@
-import { Button } from '@payloadcms/ui/elements/Button'
+import { Button } from '@payloadcms/ui'
 import LinkImport from 'next/link.js'
 import React from 'react'
 
-import type { AdminViewProps } from '../../../../../packages/payload/types.js'
-
 const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
+import type { AdminViewProps } from 'payload'
+
 import {
   customParamViewPath,
   customParamViewPathBase,

test/auth/AuthDebug.tsx

@@ -2,7 +2,7 @@
 
 import type { UIField, User } from 'payload'
 
-import { useAuth } from '@payloadcms/ui/providers/Auth'
+import { useAuth } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
 
 export const AuthDebug: React.FC<UIField> = () => {

test/auth/ui/AuthDebug.tsx

@@ -1,6 +1,6 @@
 import type { UIField, User } from 'payload'
 
-import { useAuth } from '@payloadcms/ui/providers/Auth'
+import { useAuth } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
 
 export const AuthDebug: React.FC<UIField> = () => {

test/fields-relationship/PrePopulateFieldUI/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useField } from '@payloadcms/ui/forms/useField'
+import { useField } from '@payloadcms/ui'
 import * as React from 'react'
 
 import { collection1Slug } from '../collectionSlugs.js'

test/fields-relationship/config.ts

@@ -4,7 +4,7 @@ const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 import type { CollectionConfig, FilterOptionsProps } from 'payload'
 
-import { withMergedProps } from '@payloadcms/ui/elements/withMergedProps'
+import { withMergedProps } from '@payloadcms/ui/shared'
 
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { devUser } from '../credentials.js'

test/fields/collections/Array/LabelComponent.tsx

@@ -2,7 +2,7 @@
 
 import type { RowLabelComponent } from 'payload'
 
-import { useRowLabel } from '@payloadcms/ui/forms/RowLabel/Context'
+import { useRowLabel } from '@payloadcms/ui'
 import React from 'react'
 
 export const ArrayRowLabel: RowLabelComponent = () => {

test/fields/collections/Blocks/components/AddCustomBlocks/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { useForm } from '@payloadcms/ui/forms/Form'
-import { useField } from '@payloadcms/ui/forms/useField'
+import { useField, useForm } from '@payloadcms/ui'
 import * as React from 'react'
 
 import { blockFieldsSlug } from '../../../../slugs.js'

test/fields/collections/Collapsible/CustomLabel/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRowLabel } from '@payloadcms/ui/forms/RowLabel/Context'
+import { useRowLabel } from '@payloadcms/ui'
 import React from 'react'
 
 export const CustomLabelComponent: React.FC<{

test/fields/collections/Collapsible/NestedCustomLabel/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRowLabel } from '@payloadcms/ui/forms/RowLabel/Context'
+import { useRowLabel } from '@payloadcms/ui'
 import React from 'react'
 
 export const NestedCustomLabel: React.FC = () => {

test/fields/collections/Text/CustomError.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { useFormFields, useFormSubmitted } from '@payloadcms/ui/forms/Form'
-import { useField } from '@payloadcms/ui/forms/useField'
+import { useField, useFormFields, useFormSubmitted } from '@payloadcms/ui'
 import React from 'react'
 
 const CustomError: React.FC<any> = (props) => {

test/fields/collections/Text/CustomLabel.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useFieldProps } from '@payloadcms/ui'
 import React from 'react'
 
 const CustomLabel = ({ schemaPath }) => {

test/fields/collections/UI/UICustomClient.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useFieldProps } from '@payloadcms/ui'
 import React from 'react'
 
 export const UICustomClient: React.FC = () => {

test/i18n/ComponentWithCustomI18n.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
 import type { CustomTranslationsKeys, CustomTranslationsObject } from './config.js'

test/i18n/ComponentWithDefaultI18n.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
 export const ComponentWithDefaultI18n = () => {

test/live-preview/app/live-preview/(pages)/posts/[slug]/page.client.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useLivePreview } from '@payloadcms/live-preview-react'
-import { Gutter } from '@payloadcms/ui/elements/Gutter'
+import { Gutter } from '@payloadcms/ui'
 import React from 'react'
 
 import type { Post as PostType } from '../../../../../payload-types.js'

test/live-preview/app/live-preview/(pages)/ssr-autosave/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { Gutter } from '@payloadcms/ui/elements/Gutter'
+import { Gutter } from '@payloadcms/ui'
 import { notFound } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

test/live-preview/app/live-preview/(pages)/ssr/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { Gutter } from '@payloadcms/ui/elements/Gutter'
+import { Gutter } from '@payloadcms/ui'
 import { notFound } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

test/plugin-seo/payload-types.ts

@@ -8,123 +8,122 @@
 
 export interface Config {
   collections: {
-    users: User
-    pages: Page
-    media: Media
-    'payload-preferences': PayloadPreference
-    'payload-migrations': PayloadMigration
-  }
-  globals: {}
-  locale: 'en' | 'es' | 'de'
+    users: User;
+    pages: Page;
+    media: Media;
+    'payload-preferences': PayloadPreference;
+    'payload-migrations': PayloadMigration;
+  };
+  globals: {};
+  locale: 'en' | 'es' | 'de';
   user: User & {
-    collection: 'users'
-  }
+    collection: 'users';
+  };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
  */
 export interface User {
-  id: string
-  updatedAt: string
-  createdAt: string
-  email: string
-  resetPasswordToken?: string | null
-  resetPasswordExpiration?: string | null
-  salt?: string | null
-  hash?: string | null
-  loginAttempts?: number | null
-  lockUntil?: string | null
-  password?: string | null
+  id: string;
+  updatedAt: string;
+  createdAt: string;
+  email: string;
+  resetPasswordToken?: string | null;
+  resetPasswordExpiration?: string | null;
+  salt?: string | null;
+  hash?: string | null;
+  loginAttempts?: number | null;
+  lockUntil?: string | null;
+  password?: string | null;
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "pages".
  */
 export interface Page {
-  id: string
-  title: string
-  excerpt?: string | null
-  slug: string
-  meta: {
-    title: string
-    description?: string | null
-    image?: string | Media | null
-    ogTitle?: string | null
-  }
-  updatedAt: string
-  createdAt: string
-  _status?: ('draft' | 'published') | null
+  id: string;
+  title: string;
+  excerpt?: string | null;
+  slug: string;
+  meta?: {
+    title?: string | null;
+    description?: string | null;
+  };
+  updatedAt: string;
+  createdAt: string;
+  _status?: ('draft' | 'published') | null;
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "media".
  */
 export interface Media {
-  id: string
-  media?: string | Media | null
+  id: string;
+  media?: string | Media | null;
   richText?: {
     root: {
-      type: string
+      type: string;
       children: {
-        type: string
-        version: number
-        [k: string]: unknown
-      }[]
-      direction: ('ltr' | 'rtl') | null
-      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | ''
-      indent: number
-      version: number
-    }
-    [k: string]: unknown
-  } | null
-  updatedAt: string
-  createdAt: string
-  url?: string | null
-  thumbnailURL?: string | null
-  filename?: string | null
-  mimeType?: string | null
-  filesize?: number | null
-  width?: number | null
-  height?: number | null
-  focalX?: number | null
-  focalY?: number | null
+        type: string;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ('ltr' | 'rtl') | null;
+      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+      indent: number;
+      version: number;
+    };
+    [k: string]: unknown;
+  } | null;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-preferences".
  */
 export interface PayloadPreference {
-  id: string
+  id: string;
   user: {
-    relationTo: 'users'
-    value: string | User
-  }
-  key?: string | null
+    relationTo: 'users';
+    value: string | User;
+  };
+  key?: string | null;
   value?:
     | {
-        [k: string]: unknown
+        [k: string]: unknown;
       }
     | unknown[]
     | string
     | number
     | boolean
-    | null
-  updatedAt: string
-  createdAt: string
+    | null;
+  updatedAt: string;
+  createdAt: string;
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-migrations".
  */
 export interface PayloadMigration {
-  id: string
-  name?: string | null
-  batch?: number | null
-  updatedAt: string
-  createdAt: string
+  id: string;
+  name?: string | null;
+  batch?: number | null;
+  updatedAt: string;
+  createdAt: string;
 }
 
+
 declare module 'payload' {
   // @ts-ignore 
   export interface GeneratedTypes extends Config {}

test/tsconfig.json

@@ -27,20 +27,18 @@
     ],
     "baseUrl": ".",
     "paths": {
-      "@payloadcms/ui/assets": ["../packages/ui/src/assets/index.ts"],
-      "@payloadcms/ui/elements/*": ["../packages/ui/src/elements/*/index.tsx"],
-      "@payloadcms/ui/fields/*": ["../packages/ui/src/fields/*/index.tsx"],
-      "@payloadcms/ui/forms/*": ["../packages/ui/src/forms/*/index.tsx"],
-      "@payloadcms/ui/graphics/*": ["../packages/ui/src/graphics/*/index.tsx"],
-      "@payloadcms/ui/hooks/*": ["../packages/ui/src/hooks/*.ts"],
-      "@payloadcms/ui/icons/*": ["../packages/ui/src/icons/*/index.tsx"],
-      "@payloadcms/ui/providers/*": ["../packages/ui/src/providers/*/index.tsx"],
-      "@payloadcms/ui/templates/*": ["../packages/ui/src/templates/*/index.tsx"],
-      "@payloadcms/ui/utilities/*": ["../packages/ui/src/utilities/*.ts"],
-      "@payloadcms/ui/scss": ["../packages/ui/src/scss.scss"],
-      "@payloadcms/ui": ["../packages/ui/src/exports/client/index.ts"],
-      "@payloadcms/ui/server": ["../packages/ui/src/exports/shared/index.ts"],
-      "@payloadcms/ui/scss/app.scss": ["../packages/ui/src/scss/app.scss"],
+      "@payloadcms/ui": [
+        "../packages/ui/src/exports/client/index.ts"
+      ],
+      "@payloadcms/ui/shared": [
+        "../packages/ui/src/exports/shared/index.ts"
+      ],
+      "@payloadcms/ui/scss": [
+        "../packages/ui/src/scss.scss"
+      ],
+      "@payloadcms/ui/scss/app.scss": [
+        "../packages/ui/src/scss/app.scss"
+      ],
       "@payloadcms/next/*": ["./packages/next/src/exports/*.ts"],
       "@payload-config": ["./_community/config.ts"]
     }

test/versions/elements/CustomSaveButton/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { CustomPublishButton as CustomPublishButtonType } from 'payload'
 
-import { DefaultPublishButton } from '@payloadcms/ui/elements/PublishButton'
+import { DefaultPublishButton } from '@payloadcms/ui'
 import * as React from 'react'
 
 import classes from './index.module.scss'

tsconfig.json

@@ -37,7 +37,7 @@
     ],
     "paths": {
       "@payload-config": [
-        "./test/fields/config.ts"
+        "./test/_community/config.ts"
       ],
       "@payloadcms/live-preview": [
         "./packages/live-preview/src"
@@ -45,41 +45,11 @@
       "@payloadcms/live-preview-react": [
         "./packages/live-preview-react/src/index.ts"
       ],
-      "@payloadcms/ui/assets": [
-        "./packages/ui/src/assets/index.ts"
-      ],
-      "@payloadcms/ui/elements/*": [
-        "./packages/ui/src/elements/*/index.tsx"
-      ],
-      "@payloadcms/ui/fields/*": [
-        "./packages/ui/src/fields/*/index.tsx"
-      ],
-      "@payloadcms/ui/forms/*": [
-        "./packages/ui/src/forms/*/index.tsx"
-      ],
-      "@payloadcms/ui/graphics/*": [
-        "./packages/ui/src/graphics/*/index.tsx"
-      ],
-      "@payloadcms/ui/hooks/*": [
-        "./packages/ui/src/hooks/*.ts"
-      ],
-      "@payloadcms/ui/icons/*": [
-        "./packages/ui/src/icons/*/index.tsx"
-      ],
-      "@payloadcms/ui/providers/*": [
-        "./packages/ui/src/providers/*/index.tsx"
-      ],
-      "@payloadcms/ui/templates/*": [
-        "./packages/ui/src/templates/*/index.tsx"
-      ],
-      "@payloadcms/ui/utilities/*": [
-        "./packages/ui/src/utilities/*.ts"
-      ],
       "@payloadcms/ui": [
         "./packages/ui/src/exports/client/index.ts"
       ],
       "@payloadcms/ui/shared": [
-        "packages/ui/src/exports/shared/index.ts"
+        "./packages/ui/src/exports/shared/index.ts"
       ],
       "@payloadcms/ui/scss": [
         "./packages/ui/src/scss.scss"