feat!: add missing server-only props to custom RSCs, improve req.user type, clean-up ui imports (#6355)

.eslintignore

@@ -11,3 +11,4 @@
 playwright.config.ts
 jest.config.js
 test/live-preview/next-app
+tsconfig.tsbuildinfo

.idea/payload.iml

@@ -47,6 +47,33 @@
       <excludeFolder url="file://$MODULE_DIR$/templates" />
       <excludeFolder url="file://$MODULE_DIR$/test/.swc" />
       <excludeFolder url="file://$MODULE_DIR$/versions" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/richtext-slate/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/richtext-slate/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/email-nodemailer/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/email-nodemailer/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/email-resend/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/email-resend/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview-vue/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview-vue/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/payload/.swc" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-form-builder/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-relationship-object-ids/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-relationship-object-ids/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-stripe/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-azure/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-azure/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-gcs/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-gcs/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-s3/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-s3/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-uploadthing/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-uploadthing/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-vercel-blob/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/storage-vercel-blob/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/translations/.turbo" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/translations/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/ui/.swc" />
+      <excludeFolder url="file://$MODULE_DIR$/packages/ui/.turbo" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />

.prettierignore

@@ -13,3 +13,4 @@ tsconfig.json
 packages/payload/*.js
 packages/payload/*.d.ts
 payload-types.ts
+tsconfig.tsbuildinfo

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

@@ -89,7 +89,6 @@ export const RootLayout = async ({
     DefaultEditView,
     DefaultListView,
     children,
-    config,
     i18n,
     payload,
   })

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

@@ -77,7 +77,15 @@ export const Account: React.FC<AdminViewProps> = ({ initPageResult, params, sear
             }
             DefaultComponent={EditView}
             componentProps={viewComponentProps}
-            payload={payload}
+            serverOnlyProps={{
+              i18n,
+              locale,
+              params,
+              payload,
+              permissions,
+              searchParams,
+              user,
+            }}
           />
         </FormQueryParamsProvider>
       </DocumentInfoProvider>

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

@@ -1,5 +1,6 @@
 import type { Permissions } from 'payload/auth'
-import type { Payload, SanitizedConfig, VisibleEntities } from 'payload/types'
+import type { ServerProps } from 'payload/config'
+import type { VisibleEntities } from 'payload/types'
 
 import { Gutter } from '@payloadcms/ui/elements/Gutter'
 import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
@@ -12,10 +13,9 @@ import './index.scss'
 
 const baseClass = 'dashboard'
 
-export type DashboardProps = {
+export type DashboardProps = ServerProps & {
   Link: React.ComponentType<any>
-  config: SanitizedConfig
-  payload: Payload
+
   permissions: Permissions
   visibleEntities: VisibleEntities
 }
@@ -23,25 +23,56 @@ export type DashboardProps = {
 export const DefaultDashboard: React.FC<DashboardProps> = (props) => {
   const {
     Link,
+    i18n,
+    locale,
+    params,
+    payload: {
       config: {
         admin: {
           components: { afterDashboard, beforeDashboard },
         },
       },
+    },
     payload,
     permissions,
+    searchParams,
+    user,
     visibleEntities,
   } = props
 
   const BeforeDashboards = Array.isArray(beforeDashboard)
     ? beforeDashboard.map((Component, i) => (
-        <WithServerSideProps Component={Component} key={i} payload={payload} />
+        <WithServerSideProps
+          Component={Component}
+          key={i}
+          serverOnlyProps={{
+            i18n,
+            locale,
+            params,
+            payload,
+            permissions,
+            searchParams,
+            user,
+          }}
+        />
       ))
     : null
 
   const AfterDashboards = Array.isArray(afterDashboard)
     ? afterDashboard.map((Component, i) => (
-        <WithServerSideProps Component={Component} key={i} payload={payload} />
+        <WithServerSideProps
+          Component={Component}
+          key={i}
+          serverOnlyProps={{
+            i18n,
+            locale,
+            params,
+            payload,
+            permissions,
+            searchParams,
+            user,
+          }}
+        />
       ))
     : null
 

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

@@ -13,10 +13,12 @@ export { generateDashboardMetadata } from './meta.js'
 
 const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
-export const Dashboard: React.FC<AdminViewProps> = ({ initPageResult }) => {
+export const Dashboard: React.FC<AdminViewProps> = ({ initPageResult, params, searchParams }) => {
   const {
+    locale,
     permissions,
     req: {
+      i18n,
       payload: { config },
       payload,
       user,
@@ -26,10 +28,15 @@ export const Dashboard: React.FC<AdminViewProps> = ({ initPageResult }) => {
 
   const CustomDashboardComponent = config.admin.components?.views?.Dashboard
 
-  const viewComponentProps: Omit<DashboardProps, 'payload'> = {
+  const viewComponentProps: DashboardProps = {
     Link,
-    config,
+    i18n,
+    locale,
+    params,
+    payload,
     permissions,
+    searchParams,
+    user,
     visibleEntities,
   }
 
@@ -42,7 +49,15 @@ export const Dashboard: React.FC<AdminViewProps> = ({ initPageResult }) => {
         }
         DefaultComponent={DefaultDashboard}
         componentProps={viewComponentProps}
-        payload={payload}
+        serverOnlyProps={{
+          i18n,
+          locale,
+          params,
+          payload,
+          permissions,
+          searchParams,
+          user,
+        }}
       />
     </Fragment>
   )

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

@@ -220,7 +220,15 @@ export const Document: React.FC<AdminViewProps> = async ({
               CustomComponent={ViewOverride || CustomView}
               DefaultComponent={DefaultView}
               componentProps={viewComponentProps}
-              payload={payload}
+              serverOnlyProps={{
+                i18n,
+                locale,
+                params,
+                payload,
+                permissions,
+                searchParams,
+                user,
+              }}
             />
           )}
         </FormQueryParamsProvider>

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

@@ -18,11 +18,17 @@ import { DefaultListView } from './Default/index.js'
 
 export { generateListMetadata } from './meta.js'
 
-export const ListView: React.FC<AdminViewProps> = async ({ initPageResult, searchParams }) => {
+export const ListView: React.FC<AdminViewProps> = async ({
+  initPageResult,
+  params,
+  searchParams,
+}) => {
   const {
     collectionConfig,
+    locale: fullLocale,
     permissions,
     req: {
+      i18n,
       locale,
       payload,
       payload: { config },
@@ -142,7 +148,15 @@ export const ListView: React.FC<AdminViewProps> = async ({ initPageResult, searc
                 CustomComponent={CustomListView}
                 DefaultComponent={DefaultListView}
                 componentProps={viewComponentProps}
-                payload={payload}
+                serverOnlyProps={{
+                  i18n,
+                  locale: fullLocale,
+                  params,
+                  payload,
+                  permissions,
+                  searchParams,
+                  user,
+                }}
               />
             </TableColumnsProvider>
           </ListQueryProvider>

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

@@ -12,10 +12,11 @@ export { generateLoginMetadata } from './meta.js'
 
 export const loginBaseClass = 'login'
 
-export const LoginView: React.FC<AdminViewProps> = ({ initPageResult, searchParams }) => {
-  const { req } = initPageResult
+export const LoginView: React.FC<AdminViewProps> = ({ initPageResult, params, searchParams }) => {
+  const { locale, permissions, req } = initPageResult
 
   const {
+    i18n,
     payload: { config },
     payload,
     user,
@@ -29,13 +30,37 @@ export const LoginView: React.FC<AdminViewProps> = ({ initPageResult, searchPara
 
   const BeforeLogins = Array.isArray(beforeLogin)
     ? beforeLogin.map((Component, i) => (
-        <WithServerSideProps Component={Component} key={i} payload={payload} />
+        <WithServerSideProps
+          Component={Component}
+          key={i}
+          serverOnlyProps={{
+            i18n,
+            locale,
+            params,
+            payload,
+            permissions,
+            searchParams,
+            user,
+          }}
+        />
       ))
     : null
 
   const AfterLogins = Array.isArray(afterLogin)
     ? afterLogin.map((Component, i) => (
-        <WithServerSideProps Component={Component} key={i} payload={payload} />
+        <WithServerSideProps
+          Component={Component}
+          key={i}
+          serverOnlyProps={{
+            i18n,
+            locale,
+            params,
+            payload,
+            permissions,
+            searchParams,
+            user,
+          }}
+        />
       ))
     : null
 
@@ -48,7 +73,15 @@ export const LoginView: React.FC<AdminViewProps> = ({ initPageResult, searchPara
   return (
     <Fragment>
       <div className={`${loginBaseClass}__brand`}>
-        <Logo payload={payload} />
+        <Logo
+          i18n={i18n}
+          locale={locale}
+          params={params}
+          payload={payload}
+          permissions={permissions}
+          searchParams={searchParams}
+          user={user}
+        />
       </div>
       {Array.isArray(BeforeLogins) && BeforeLogins.map((Component) => Component)}
       {!collectionConfig?.auth?.disableLocalStrategy && <LoginForm searchParams={searchParams} />}

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

@@ -36,6 +36,7 @@ export type GenerateViewMetadata = (args: {
 
 export const NotFoundPage = async ({
   config: configPromise,
+  params,
   searchParams,
 }: {
   config: Promise<SanitizedConfig>
@@ -60,7 +61,13 @@ export const NotFoundPage = async ({
     <Fragment>
       <HydrateClientUser permissions={initPageResult.permissions} user={initPageResult.req.user} />
       <DefaultTemplate
+        i18n={initPageResult.req.i18n}
+        locale={initPageResult.locale}
+        params={params}
         payload={initPageResult.req.payload}
+        permissions={initPageResult.permissions}
+        searchParams={searchParams}
+        user={initPageResult.req.user}
         visibleEntities={initPageResult.visibleEntities}
       >
         <NotFoundClient />

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

@@ -91,7 +91,13 @@ export const RootPage = async ({
       )}
       {templateType === 'default' && (
         <DefaultTemplate
+          i18n={initPageResult?.req.i18n}
+          locale={initPageResult?.locale}
+          params={params}
           payload={initPageResult?.req.payload}
+          permissions={initPageResult?.permissions}
+          searchParams={searchParams}
+          user={initPageResult?.req.user}
           visibleEntities={initPageResult.visibleEntities}
         >
           {RenderedView}

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

@@ -10,15 +10,21 @@ export const verifyBaseClass = 'verify'
 
 export { generateVerifyMetadata } from './meta.js'
 
-export const Verify: React.FC<AdminViewProps> = async ({ initPageResult, params }) => {
+export const Verify: React.FC<AdminViewProps> = async ({
+  initPageResult,
+  params,
+  searchParams,
+}) => {
   // /:collectionSlug/verify/:token
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [collectionSlug, verify, token] = params.segments
-  const { req } = initPageResult
+  const { locale, permissions, req } = initPageResult
 
   const {
+    i18n,
     payload: { config },
     payload,
+    user,
   } = req
 
   const {
@@ -43,7 +49,15 @@ export const Verify: React.FC<AdminViewProps> = async ({ initPageResult, params
   return (
     <React.Fragment>
       <div className={`${verifyBaseClass}__brand`}>
-        <Logo payload={payload} />
+        <Logo
+          i18n={i18n}
+          locale={locale}
+          params={params}
+          payload={payload}
+          permissions={permissions}
+          searchParams={searchParams}
+          user={user}
+        />
       </div>
       <h2>{textToRender}</h2>
     </React.Fragment>

packages/payload/src/admin/RichText.ts

@@ -1,10 +1,11 @@
 import type { I18nClient } from '@payloadcms/translations'
 import type { JSONSchema4 } from 'json-schema'
+import type React from 'react'
 
 import type { SanitizedConfig } from '../config/types.js'
 import type { Field, FieldBase, RichTextField, Validate } from '../fields/config/types.js'
 import type { PayloadRequestWithData, RequestContext } from '../types/index.js'
-import type { WithServerSideProps } from './elements/WithServerSideProps.js'
+import type { WithServerSidePropsComponentProps } from './elements/WithServerSideProps.js'
 
 export type RichTextFieldProps<
   Value extends object,
@@ -20,7 +21,7 @@ type RichTextAdapterBase<
   ExtraFieldProperties = {},
 > = {
   generateComponentMap: (args: {
-    WithServerSideProps: WithServerSideProps
+    WithServerSideProps: React.FC<Omit<WithServerSidePropsComponentProps, 'serverOnlyProps'>>
     config: SanitizedConfig
     i18n: I18nClient
     schemaPath: string

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

@@ -1,4 +1,11 @@
-export type WithServerSideProps = (args: {
+import type React from 'react'
+
+import type { ServerProps } from '../../config/types.js'
+
+export type WithServerSidePropsComponentProps = {
   [key: string]: any
   Component: React.ComponentType<any>
-}) => React.ReactNode
+  serverOnlyProps: ServerProps
+}
+
+export type WithServerSidePropsComponent = React.FC<WithServerSidePropsComponentProps>

packages/payload/src/admin/types.ts

@@ -13,7 +13,10 @@ export type {
   DocumentTabConfig,
   DocumentTabProps,
 } from './elements/Tab.js'
-export type { WithServerSideProps } from './elements/WithServerSideProps.js'
+export type {
+  WithServerSidePropsComponent,
+  WithServerSidePropsComponentProps,
+} from './elements/WithServerSideProps.js'
 export type { ErrorProps } from './forms/Error.js'
 export type {
   Description,

packages/payload/src/auth/types.ts

@@ -65,7 +65,7 @@ export type User = {
   [key: string]: any // This NEEDS to be an any, otherwise it breaks the Omit for ClientUser below
   collection: string
   email: string
-  id: string
+  id: number | string
 }
 
 /**

packages/payload/src/config/types.ts

@@ -1,8 +1,13 @@
-import type { DefaultTranslationsObject, I18nOptions, TFunction } from '@payloadcms/translations'
+import type {
+  DefaultTranslationsObject,
+  I18nClient,
+  I18nOptions,
+  TFunction,
+} from '@payloadcms/translations'
 import type { Options as ExpressFileUploadOptions } from 'express-fileupload'
 import type GraphQL from 'graphql'
 import type { Metadata as NextMetadata } from 'next'
-import type { DestinationStream, LoggerOptions, P } from 'pino'
+import type { DestinationStream, LoggerOptions } from 'pino'
 import type React from 'react'
 import type { default as sharp } from 'sharp'
 import type { DeepRequired } from 'ts-essentials'
@@ -10,7 +15,7 @@ import type { DeepRequired } from 'ts-essentials'
 import type { RichTextAdapterProvider } from '../admin/RichText.js'
 import type { DocumentTab, RichTextAdapter } from '../admin/types.js'
 import type { AdminView, ServerSideEditViewProps } from '../admin/views/types.js'
-import type { User } from '../auth/types.js'
+import type { Permissions } from '../auth/index.js'
 import type {
   AfterErrorHook,
   Collection,
@@ -20,7 +25,7 @@ import type {
 import type { DatabaseAdapterResult } from '../database/types.js'
 import type { EmailAdapter, SendEmailOptions } from '../email/types.js'
 import type { GlobalConfig, Globals, SanitizedGlobalConfig } from '../globals/config/types.js'
-import type { Payload } from '../index.js'
+import type { GeneratedTypes, Payload } from '../index.js'
 import type { PayloadRequest, PayloadRequestWithData, Where } from '../types/index.js'
 import type { PayloadLogger } from '../utilities/logger.js'
 
@@ -162,19 +167,19 @@ export type InitOptions = {
  */
 export type AccessResult = Where | boolean
 
-export type AccessArgs<T = any, U = any> = {
+export type AccessArgs<TData = any> = {
   /**
    * The relevant resource that is being accessed.
    *
    * `data` is null when a list is requested
    */
-  data?: T
+  data?: TData
   /** ID of the resource being accessed */
   id?: number | string
   /** If true, the request is for a static file */
   isReadingStaticFile?: boolean
   /** The original request that requires an access check */
-  req: PayloadRequestWithData<U>
+  req: PayloadRequestWithData
 }
 
 /**
@@ -183,17 +188,15 @@ export type AccessArgs<T = any, U = any> = {
  *
  * @see https://payloadcms.com/docs/access-control/overview
  */
-export type Access<T = any, U = any> = (
-  args: AccessArgs<T, U>,
-) => AccessResult | Promise<AccessResult>
+export type Access<TData = any> = (args: AccessArgs<TData>) => AccessResult | Promise<AccessResult>
 
-/** Web Request/Response model, but the the req has more payload specific properties added to it. */
+/** Web Request/Response model, but the req has more payload specific properties added to it. */
 export type PayloadHandler = (req: PayloadRequest) => Promise<Response> | Response
 
 /**
  * Docs: https://payloadcms.com/docs/rest-api/overview#custom-endpoints
  */
-export type Endpoint<U = User> = {
+export type Endpoint = {
   /** Extension point to add your custom data. */
   custom?: Record<string, any>
 
@@ -251,12 +254,28 @@ export type EditViewConfig =
 export type EditView = EditViewComponent | EditViewConfig
 
 export type ServerProps = {
+  i18n: I18nClient
+  locale?: Locale
+  params?: { [key: string]: string | string[] | undefined }
   payload: Payload
+  permissions?: Permissions
+  searchParams?: { [key: string]: string | string[] | undefined }
+  user?: GeneratedTypes['user']
 }
 
-export const serverProps: (keyof ServerProps)[] = ['payload']
+export const serverProps: (keyof ServerProps)[] = [
+  'payload',
+  'i18n',
+  'locale',
+  'params',
+  'permissions',
+  'searchParams',
+  'permissions',
+]
 
-export type CustomComponent<T extends any = any> = React.ComponentType<T & ServerProps>
+export type CustomComponent<TAdditionalProps extends any = any> = React.ComponentType<
+  TAdditionalProps & Partial<ServerProps>
+>
 
 export type Locale = {
   /**
@@ -494,7 +513,7 @@ export type Config = {
       /** The route for the unauthorized page. */
       unauthorized?: string
     }
-    /** The slug of a Collection that you want be used to log in to the Admin dashboard. */
+    /** The slug of a Collection that you want to be used to log in to the Admin dashboard. */
     user?: string
   }
   /** Custom Payload bin scripts can be injected via the config. */

packages/payload/src/exports/types.ts

@@ -3,8 +3,8 @@ export type * from '../admin/types.js'
 export type * from '../uploads/types.js'
 
 export type { DocumentPermissions, FieldPermissions } from '../auth/index.js'
-
 export type { MeOperationResult } from '../auth/operations/me.js'
+
 export type { EmailAdapter as PayloadEmailAdapter, SendEmailOptions } from '../email/types.js'
 
 export type {
@@ -39,7 +39,6 @@ export type {
   TypeWithID,
   TypeWithTimestamps,
 } from './../collections/config/types.js'
-
 export type { ClientConfig } from './../config/client.js'
 export type {
   Access,
@@ -51,6 +50,7 @@ export type {
   SanitizedConfig,
 } from './../config/types.js'
 export type { ClientFieldConfig } from './../fields/config/client.js'
+
 export type {
   ArrayField,
   Block,
@@ -136,5 +136,4 @@ export type {
   GlobalConfig,
   SanitizedGlobalConfig,
 } from './../globals/config/types.js'
-
 export { validOperators } from './../types/constants.js'

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

@@ -14,7 +14,6 @@ import type {
   DescriptionComponent,
   ErrorProps,
   LabelProps,
-  RowLabel,
   RowLabelComponent,
 } from '../../admin/types.js'
 import type { SanitizedCollectionConfig, TypeWithID } from '../../collections/config/types.js'
@@ -25,12 +24,12 @@ import type { DocumentPreferences } from '../../preferences/types.js'
 import type { Operation, PayloadRequestWithData, RequestContext, Where } from '../../types/index.js'
 import type { ClientFieldConfig } from './client.js'
 
-export type FieldHookArgs<T extends TypeWithID = any, P = any, S = any> = {
+export type FieldHookArgs<TData extends TypeWithID = any, TValue = any, TSiblingData = any> = {
   /** The collection which the field belongs to. If the field belongs to a global, this will be null. */
   collection: SanitizedCollectionConfig | null
   context: RequestContext
   /** The data passed to update the document within create and update operations, and the full document itself in the afterRead hook. */
-  data?: Partial<T>
+  data?: Partial<TData>
   /** The field which the hook is running against. */
   field: FieldAffectingData
   /** Boolean to denote if this hook is running against finding one, or finding many within the afterRead hook. */
@@ -40,58 +39,58 @@ export type FieldHookArgs<T extends TypeWithID = any, P = any, S = any> = {
   /** A string relating to which operation the field type is currently executing within. Useful within beforeValidate, beforeChange, and afterChange hooks to differentiate between create and update operations. */
   operation?: 'create' | 'delete' | 'read' | 'update'
   /** The full original document in `update` operations. In the `afterChange` hook, this is the resulting document of the operation. */
-  originalDoc?: T
+  originalDoc?: TData
   overrideAccess?: boolean
   /** The document before changes were applied, only in `afterChange` hooks. */
-  previousDoc?: T
+  previousDoc?: TData
   /** The sibling data of the document before changes being applied, only in `beforeChange` and `afterChange` hook. */
-  previousSiblingDoc?: T
+  previousSiblingDoc?: TData
   /** The previous value of the field, before changes, only in `beforeChange`, `afterChange` and `beforeValidate` hooks. */
-  previousValue?: P
+  previousValue?: TValue
   /** The Express request object. It is mocked for Local API operations. */
   req: PayloadRequestWithData
   /** The sibling data passed to a field that the hook is running against. */
-  siblingData: Partial<S>
+  siblingData: Partial<TSiblingData>
   /** The value of the field. */
-  value?: P
+  value?: TValue
 }
 
-export type FieldHook<T extends TypeWithID = any, P = any, S = any> = (
-  args: FieldHookArgs<T, P, S>,
-) => P | Promise<P>
+export type FieldHook<TData extends TypeWithID = any, TValue = any, TSiblingData = any> = (
+  args: FieldHookArgs<TData, TValue, TSiblingData>,
+) => Promise<TValue> | TValue
 
-export type FieldAccess<T extends TypeWithID = any, P = any, U = any> = (args: {
+export type FieldAccess<TData extends TypeWithID = any, TSiblingData = any> = (args: {
   /**
    * The incoming data used to `create` or `update` the document with. `data` is undefined during the `read` operation.
    */
-  data?: Partial<T>
+  data?: Partial<TData>
   /**
    * The original data of the document before the `update` is applied. `doc` is undefined during the `create` operation.
    */
-  doc?: T
+  doc?: TData
   /**
    * The `id` of the current document being read or updated. `id` is undefined during the `create` operation.
    */
   id?: number | string
   /** The `payload` object to interface with the payload API */
-  req: PayloadRequestWithData<U>
+  req: PayloadRequestWithData
   /**
    * Immediately adjacent data to this field. For example, if this is a `group` field, then `siblingData` will be the other fields within the group.
    */
-  siblingData?: Partial<P>
+  siblingData?: Partial<TSiblingData>
 }) => Promise<boolean> | boolean
 
-export type Condition<T extends TypeWithID = any, P = any> = (
-  data: Partial<T>,
-  siblingData: Partial<P>,
+export type Condition<TData extends TypeWithID = any, TSiblingData = any> = (
+  data: Partial<TData>,
+  siblingData: Partial<TSiblingData>,
   { user }: { user: PayloadRequestWithData['user'] },
 ) => boolean
 
-export type FilterOptionsProps<T = any> = {
+export type FilterOptionsProps<TData = any> = {
   /**
    * An object containing the full collection or global document currently being edited.
    */
-  data: T
+  data: TData
   /**
    * The `id` of the current document being edited. `id` is undefined during the `create` operation.
    */
@@ -110,8 +109,8 @@ export type FilterOptionsProps<T = any> = {
   user: Partial<PayloadRequestWithData['user']>
 }
 
-export type FilterOptions<T = any> =
-  | ((options: FilterOptionsProps<T>) => Promise<Where | boolean> | Where | boolean)
+export type FilterOptions<TData = any> =
+  | ((options: FilterOptionsProps<TData>) => Promise<Where | boolean> | Where | boolean)
   | Where
   | null
 
@@ -359,10 +358,10 @@ export type GroupField = Omit<FieldBase, 'required' | 'validation'> & {
   }
   fields: Field[]
   /** Customize generated GraphQL and Typescript schema names.
-   * By default it is bound to the collection.
+   * By default, it is bound to the collection.
    *
    * This is useful if you would like to generate a top level type to share amongst collections/fields.
-   * **Note**: Top level types can collide, ensure they are unique among collections, arrays, groups, blocks, tabs.
+   * **Note**: Top level types can collide, ensure they are unique amongst collections, arrays, groups, blocks, tabs.
    */
   interfaceName?: string
   type: 'group'
@@ -411,7 +410,7 @@ export type NamedTab = TabBase & {
    * The slug is used by default.
    *
    * This is useful if you would like to generate a top level type to share amongst collections/fields.
-   * **Note**: Top level types can collide, ensure they are unique among collections, arrays, groups, blocks, tabs.
+   * **Note**: Top level types can collide, ensure they are unique amongst collections, arrays, groups, blocks, tabs.
    */
   interfaceName?: string
 }
@@ -665,10 +664,10 @@ export type ArrayField = FieldBase & {
   dbName?: DBIdentifierName
   fields: Field[]
   /** Customize generated GraphQL and Typescript schema names.
-   * By default it is bound to the collection.
+   * By default, it is bound to the collection.
    *
    * This is useful if you would like to generate a top level type to share amongst collections/fields.
-   * **Note**: Top level types can collide, ensure they are unique among collections, arrays, groups, blocks, tabs.
+   * **Note**: Top level types can collide, ensure they are unique amongst collections, arrays, groups, blocks, tabs.
    */
   interfaceName?: string
   labels?: Labels
@@ -719,7 +718,7 @@ export type Block = {
    * The slug is used by default.
    *
    * This is useful if you would like to generate a top level type to share amongst collections/fields.
-   * **Note**: Top level types can collide, ensure they are unique among collections, arrays, groups, blocks, tabs.
+   * **Note**: Top level types can collide, ensure they are unique amongst collections, arrays, groups, blocks, tabs.
    */
   interfaceName?: string
   labels?: Labels

packages/payload/src/index.ts

@@ -13,7 +13,7 @@ import type { Options as UnlockOptions } from './auth/operations/local/unlock.js
 import type { Options as VerifyEmailOptions } from './auth/operations/local/verifyEmail.js'
 import type { Result as LoginResult } from './auth/operations/login.js'
 import type { Result as ResetPasswordResult } from './auth/operations/resetPassword.js'
-import type { AuthStrategy } from './auth/types.js'
+import type { AuthStrategy, User } from './auth/types.js'
 import type { BulkOperationResult, Collection, TypeWithID } from './collections/config/types.js'
 import type { Options as CountOptions } from './collections/operations/local/count.js'
 import type { Options as CreateOptions } from './collections/operations/local/create.js'
@@ -496,7 +496,7 @@ type GeneratedTypes = {
     [slug: number | string | symbol]: GlobalTypeWithID & Record<string, unknown>
   }
   locale: null | string
-  user: TypeWithID & Record<string, unknown> & { collection: string }
+  user: User
 }
 
 type Payload = BasePayload<GeneratedTypes>

packages/payload/src/types/index.ts

@@ -20,7 +20,7 @@ export type UploadEdits = {
   }
 }
 
-export type CustomPayloadRequestProperties<U = unknown> = {
+export type CustomPayloadRequestProperties = {
   context: RequestContext
   /** The locale that should be used for a field when it is not translated to the requested locale */
   fallbackLocale?: string
@@ -60,8 +60,8 @@ export type CustomPayloadRequestProperties<U = unknown> = {
    * Used to ensure consistency when multiple operations try to create a transaction concurrently on the same request
    */
   transactionIDPromise?: Promise<void>
-  /** The signed in user */
-  user: (U & GeneratedTypes['user']) | null
+  /** The signed-in user */
+  user: GeneratedTypes['user'] | null
 } & Pick<
   URL,
   'hash' | 'host' | 'href' | 'origin' | 'pathname' | 'port' | 'protocol' | 'search' | 'searchParams'
@@ -78,10 +78,10 @@ export type PayloadRequestData = {
     tempFilePath?: string
   }
 }
-export type PayloadRequest<U = unknown> = Partial<Request> &
+export type PayloadRequest = Partial<Request> &
   Required<Pick<Request, 'headers'>> &
-  CustomPayloadRequestProperties<U>
-export type PayloadRequestWithData<U = unknown> = PayloadRequest<U> & PayloadRequestData
+  CustomPayloadRequestProperties
+export type PayloadRequestWithData = PayloadRequest & PayloadRequestData
 export interface RequestContext {
   [key: string]: unknown
 }

packages/plugin-seo/src/index.tsx

@@ -2,8 +2,8 @@ import type { Config } from 'payload/config'
 import type { Field, GroupField, TabsField, TextField } from 'payload/types'
 
 import { addDataAndFileToRequest } from '@payloadcms/next/utilities'
+import { withMergedProps } from '@payloadcms/ui/elements/withMergedProps'
 import { deepMerge } from 'payload/utilities'
-import React from 'react'
 
 import type {
   GenerateDescription,
@@ -43,12 +43,13 @@ export const seoPlugin =
             type: 'text',
             admin: {
               components: {
-                Field: ({ payload: _payload, ...props }) => (
-                  <MetaTitle
-                    {...props}
-                    hasGenerateTitleFn={typeof pluginConfig?.generateTitle === 'function'}
-                  />
-                ),
+                Field: withMergedProps({
+                  Component: MetaTitle,
+                  sanitizeServerOnlyProps: true,
+                  toMergeIntoProps: {
+                    hasGenerateTitleFn: typeof pluginConfig?.generateTitle === 'function',
+                  },
+                }),
               },
             },
             localized: true,
@@ -59,14 +60,14 @@ export const seoPlugin =
             type: 'textarea',
             admin: {
               components: {
-                Field: ({ payload: _payload, ...props }) => (
-                  <MetaDescription
-                    {...props}
-                    hasGenerateDescriptionFn={
-                      typeof pluginConfig?.generateDescription === 'function'
-                    }
-                  />
-                ),
+                Field: withMergedProps({
+                  Component: MetaDescription,
+                  sanitizeServerOnlyProps: true,
+                  toMergeIntoProps: {
+                    hasGenerateDescriptionFn:
+                      typeof pluginConfig?.generateDescription === 'function',
+                  },
+                }),
               },
             },
             localized: true,
@@ -80,12 +81,13 @@ export const seoPlugin =
                   type: 'upload',
                   admin: {
                     components: {
-                      Field: ({ payload: _payload, ...props }) => (
-                        <MetaImage
-                          {...props}
-                          hasGenerateImageFn={typeof pluginConfig?.generateImage === 'function'}
-                        />
-                      ),
+                      Field: withMergedProps({
+                        Component: MetaImage,
+                        sanitizeServerOnlyProps: true,
+                        toMergeIntoProps: {
+                          hasGenerateImageFn: typeof pluginConfig?.generateImage === 'function',
+                        },
+                      }),
                     },
                     description:
                       'Maximum upload file size: 12MB. Recommended file size for images is <500KB.',
@@ -103,12 +105,13 @@ export const seoPlugin =
             type: 'ui',
             admin: {
               components: {
-                Field: ({ payload: _payload, ...props }) => (
-                  <Preview
-                    {...props}
-                    hasGenerateURLFn={typeof pluginConfig?.generateURL === 'function'}
-                  />
-                ),
+                Field: withMergedProps({
+                  Component: Preview,
+                  sanitizeServerOnlyProps: true,
+                  toMergeIntoProps: {
+                    hasGenerateURLFn: typeof pluginConfig?.generateURL === 'function',
+                  },
+                }),
               },
             },
             label: 'Preview',

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

@@ -2,12 +2,12 @@
 // TODO: abstract the `next/navigation` dependency out from this component
 import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload/types'
 
-import { useDocumentEvents } from '@payloadcms/ui/providers/DocumentEvents'
 import React, { useEffect, useRef, useState } from 'react'
 
 import { useAllFormFields, useFormModified } from '../../forms/Form/context.js'
 import { useDebounce } from '../../hooks/useDebounce.js'
 import { useConfig } from '../../providers/Config/index.js'
+import { useDocumentEvents } from '../../providers/DocumentEvents/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
 import { useLocale } from '../../providers/Locale/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'

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

@@ -3,9 +3,9 @@ import type { CollectionPermission, GlobalPermission } from 'payload/auth'
 import type { SanitizedCollectionConfig } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useComponentMap } from '@payloadcms/ui/providers/ComponentMap'
 import React, { Fragment } from 'react'
 
+import { useComponentMap } from '../../providers/ComponentMap/index.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { formatDate } from '../../utilities/formatDate.js'

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

@@ -1,7 +1,7 @@
-import { flattenFieldMap } from '@payloadcms/ui/utilities/flattenFieldMap'
-
 import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'
 
+import { flattenFieldMap } from '../../utilities/flattenFieldMap.js'
+
 export const getTextFieldsToBeSearched = (
   listSearchableFields: string[],
   fieldMap: FieldMap,

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

@@ -9,10 +9,9 @@ import AnimateHeightImport from 'react-animate-height'
 const AnimateHeight = (AnimateHeightImport.default ||
   AnimateHeightImport) as typeof AnimateHeightImport.default
 
-import { useUseTitleField } from '@payloadcms/ui/hooks/useUseAsTitle'
-
 import type { FieldMap } from '../../utilities/buildComponentMap.js'
 
+import { useUseTitleField } from '../../hooks/useUseAsTitle.js'
 import { Chevron } from '../../icons/Chevron/index.js'
 import { useListQuery } from '../../providers/ListQuery/index.js'
 import { useSearchParams } from '../../providers/SearchParams/index.js'

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

@@ -1,7 +1,6 @@
 'use client'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useEntityVisibility } from '@payloadcms/ui/providers/EntityVisibility'
 import LinkWithDefault from 'next/link.js'
 import React, { Fragment } from 'react'
 
@@ -10,6 +9,7 @@ import type { EntityToGroup } from '../../utilities/groupNavItems.js'
 import { Chevron } from '../../icons/Chevron/index.js'
 import { useAuth } from '../../providers/Auth/index.js'
 import { useConfig } from '../../providers/Config/index.js'
+import { useEntityVisibility } from '../../providers/EntityVisibility/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { EntityType, groupNavItems } from '../../utilities/groupNavItems.js'
 import { NavGroup } from '../NavGroup/index.js'

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

@@ -1,4 +1,4 @@
-import type { Payload } from 'payload/types'
+import type { ServerProps } from 'payload/config'
 
 import React from 'react'
 
@@ -9,16 +9,13 @@ import './index.scss'
 
 const baseClass = 'nav'
 
-import { WithServerSideProps } from '@payloadcms/ui/elements/WithServerSideProps'
-
+import { WithServerSideProps } from '../WithServerSideProps/index.js'
 import { DefaultNavClient } from './index.client.js'
 
-export type NavProps = {
-  payload: Payload
-}
+export type NavProps = ServerProps
 
 export const DefaultNav: React.FC<NavProps> = (props) => {
-  const { payload } = props
+  const { i18n, locale, params, payload, permissions, searchParams, user } = props
 
   if (!payload?.config) {
     return null
@@ -32,13 +29,37 @@ export const DefaultNav: React.FC<NavProps> = (props) => {
 
   const BeforeNavLinks = Array.isArray(beforeNavLinks)
     ? beforeNavLinks.map((Component, i) => (
-        <WithServerSideProps Component={Component} key={i} payload={payload} />
+        <WithServerSideProps
+          Component={Component}
+          key={i}
+          serverOnlyProps={{
+            i18n,
+            locale,
+            params,
+            payload,
+            permissions,
+            searchParams,
+            user,
+          }}
+        />
       ))
     : null
 
   const AfterNavLinks = Array.isArray(afterNavLinks)
     ? afterNavLinks.map((Component, i) => (
-        <WithServerSideProps Component={Component} key={i} payload={payload} />
+        <WithServerSideProps
+          Component={Component}
+          key={i}
+          serverOnlyProps={{
+            i18n,
+            locale,
+            params,
+            payload,
+            permissions,
+            searchParams,
+            user,
+          }}
+        />
       ))
     : null
 

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

@@ -1,27 +1,40 @@
-import type { Payload } from 'payload'
+import type { ServerProps } from 'payload/config'
 
-import { WithServerSideProps } from '@payloadcms/ui/elements/WithServerSideProps'
 import React from 'react'
 
+import { WithServerSideProps } from '../WithServerSideProps/index.js'
+
 export type RenderCustomComponentProps = {
   CustomComponent?: React.ComponentType<any>
   DefaultComponent: React.ComponentType<any>
   componentProps?: Record<string, any>
   /**
-   * Payload automatically gets added to the component if it's an RSC
+   * Server-only props automatically get added to the component if it's an RSC
    */
-  payload?: Payload
+  serverOnlyProps?: ServerProps
 }
 
 export const RenderCustomComponent: React.FC<RenderCustomComponentProps> = (props) => {
-  const { CustomComponent, DefaultComponent, componentProps = {} } = props
+  const { CustomComponent, DefaultComponent, componentProps, serverOnlyProps } = props
 
   if (CustomComponent) {
-    return <WithServerSideProps Component={CustomComponent} payload={null} {...componentProps} />
+    return (
+      <WithServerSideProps
+        Component={CustomComponent}
+        serverOnlyProps={serverOnlyProps}
+        {...componentProps}
+      />
+    )
   }
 
   if (DefaultComponent) {
-    return <WithServerSideProps Component={DefaultComponent} payload={null} {...componentProps} />
+    return (
+      <WithServerSideProps
+        Component={DefaultComponent}
+        serverOnlyProps={serverOnlyProps}
+        {...componentProps}
+      />
+    )
   }
 
   return null

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

@@ -1,11 +1,11 @@
 'use client'
 import * as facelessUIImport from '@faceless-ui/modal'
-import { useAuth } from '@payloadcms/ui/providers/Auth'
 // TODO: abstract the `next/navigation` dependency out from this component
 import { useRouter } from 'next/navigation.js'
 import React from 'react'
 
 import { Button } from '../../elements/Button/index.js'
+import { useAuth } from '../../providers/Auth/index.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import './index.scss'

packages/ui/src/elements/Table/DefaultCell/fields/Array/index.tsx

@@ -2,9 +2,10 @@
 import type { CellComponentProps, DefaultCellComponentProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React from 'react'
 
+import { useTranslation } from '../../../../../providers/Translation/index.js'
+
 export interface ArrayCellProps extends DefaultCellComponentProps<Record<string, unknown>[]> {
   labels: CellComponentProps['labels']
 }

packages/ui/src/elements/Table/DefaultCell/fields/Blocks/index.tsx

@@ -2,9 +2,10 @@
 import type { CellComponentProps, DefaultCellComponentProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React from 'react'
 
+import { useTranslation } from '../../../../../providers/Translation/index.js'
+
 export interface BlocksCellProps extends DefaultCellComponentProps<any> {
   blocks: CellComponentProps['blocks']
   labels: CellComponentProps['labels']

packages/ui/src/elements/Table/DefaultCell/fields/Checkbox/index.tsx

@@ -1,9 +1,9 @@
 'use client'
 import type { DefaultCellComponentProps } from 'payload/types'
 
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React from 'react'
 
+import { useTranslation } from '../../../../../providers/Translation/index.js'
 import './index.scss'
 
 export const CheckboxCell: React.FC<DefaultCellComponentProps<boolean>> = ({ cellData }) => {

packages/ui/src/elements/Table/DefaultCell/fields/Date/index.tsx

@@ -1,11 +1,12 @@
 'use client'
 import type { DefaultCellComponentProps } from 'payload/types'
 
-import { useConfig } from '@payloadcms/ui/providers/Config'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
-import { formatDate } from '@payloadcms/ui/utilities/formatDate'
 import React from 'react'
 
+import { useConfig } from '../../../../../providers/Config/index.js'
+import { useTranslation } from '../../../../../providers/Translation/index.js'
+import { formatDate } from '../../../../../utilities/formatDate.js'
+
 export const DateCell: React.FC<DefaultCellComponentProps<Date | number | string>> = ({
   cellData,
   dateDisplayFormat,

packages/ui/src/elements/Table/DefaultCell/fields/File/index.tsx

@@ -1,9 +1,9 @@
 'use client'
 import type { DefaultCellComponentProps } from 'payload/types'
 
-import { Thumbnail } from '@payloadcms/ui/elements/Thumbnail'
 import React from 'react'
 
+import { Thumbnail } from '../../../../Thumbnail/index.js'
 import './index.scss'
 
 const baseClass = 'file'

packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.tsx

@@ -2,13 +2,13 @@
 import type { CellComponentProps, DefaultCellComponentProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useIntersect } from '@payloadcms/ui/hooks/useIntersect'
-import { useConfig } from '@payloadcms/ui/providers/Config'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
-import { canUseDOM } from '@payloadcms/ui/utilities/canUseDOM'
-import { formatDocTitle } from '@payloadcms/ui/utilities/formatDocTitle'
 import React, { useEffect, useState } from 'react'
 
+import { useIntersect } from '../../../../../hooks/useIntersect.js'
+import { useConfig } from '../../../../../providers/Config/index.js'
+import { useTranslation } from '../../../../../providers/Translation/index.js'
+import { canUseDOM } from '../../../../../utilities/canUseDOM.js'
+import { formatDocTitle } from '../../../../../utilities/formatDocTitle.js'
 import { useListRelationships } from '../../../RelationshipProvider/index.js'
 import './index.scss'
 

packages/ui/src/elements/Table/DefaultCell/fields/Select/index.tsx

@@ -2,10 +2,11 @@
 import type { CellComponentProps, DefaultCellComponentProps, OptionObject } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import { optionsAreObjects } from 'payload/types'
 import React from 'react'
 
+import { useTranslation } from '../../../../../providers/Translation/index.js'
+
 export interface SelectCellProps extends DefaultCellComponentProps<any> {
   options: CellComponentProps['options']
 }

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

@@ -5,10 +5,10 @@ import React from 'react' // TODO: abstract this out to support all routers
 import type { CellComponentProps, DefaultCellComponentProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { TableCellProvider, useTableCell } from '@payloadcms/ui/elements/Table'
-import { useConfig } from '@payloadcms/ui/providers/Config'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
 
+import { useConfig } from '../../../providers/Config/index.js'
+import { useTranslation } from '../../../providers/Translation/index.js'
+import { TableCellProvider, useTableCell } from '../TableCellProvider/index.js'
 import { CodeCell } from './fields/Code/index.js'
 import { cellComponents } from './fields/index.js'
 

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

@@ -1,13 +1,13 @@
 'use client'
 import type { TypeWithID } from 'payload/types'
 
-import { useDebounce } from '@payloadcms/ui/hooks/useDebounce'
-import { useConfig } from '@payloadcms/ui/providers/Config'
-import { useLocale } from '@payloadcms/ui/providers/Locale'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import querystring from 'qs'
 import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef } from 'react'
 
+import { useDebounce } from '../../../hooks/useDebounce.js'
+import { useConfig } from '../../../providers/Config/index.js'
+import { useLocale } from '../../../providers/Locale/index.js'
+import { useTranslation } from '../../../providers/Translation/index.js'
 import { reducer } from './reducer.js'
 
 // documents are first set to null when requested

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

@@ -1,4 +1,3 @@
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
 import { type CellComponentProps, type SanitizedCollectionConfig } from 'payload/types'
 import React from 'react'
 
@@ -6,6 +5,7 @@ import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildCo
 import type { ColumnPreferences } from '../../providers/ListInfo/index.js'
 import type { Column } from '../Table/index.js'
 
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
 import { flattenFieldMap } from '../../utilities/flattenFieldMap.js'
 import { SelectAll } from '../SelectAll/index.js'
 import { SelectRow } from '../SelectRow/index.js'

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

@@ -1,15 +1,15 @@
 'use client'
 import type { FormState, SanitizedCollectionConfig } from 'payload/types'
 
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { useFormQueryParams } from '@payloadcms/ui/providers/FormQueryParams'
 import { isImage } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import { fieldBaseClass } from '../../fields/shared/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
 import { useForm, useFormSubmitted } from '../../forms/Form/context.js'
 import { useField } from '../../forms/useField/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+import { useFormQueryParams } from '../../providers/FormQueryParams/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'
 import { Button } from '../Button/index.js'

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

@@ -1,17 +1,21 @@
-import type { WithServerSideProps as WithServerSidePropsType } from 'payload/types'
+import type { WithServerSidePropsComponent } from 'payload/types'
 
 import { isReactServerComponentOrFunction } from 'payload/utilities'
 import React from 'react'
 
-export const WithServerSideProps: WithServerSidePropsType = ({ Component, payload, ...rest }) => {
+export const WithServerSideProps: WithServerSidePropsComponent = ({
+  Component,
+  serverOnlyProps,
+  ...rest
+}) => {
   if (Component) {
     const WithServerSideProps: React.FC = (passedProps) => {
-      const propsWithPayload = {
+      const propsWithServerOnlyProps = {
         ...passedProps,
-        ...(isReactServerComponentOrFunction(Component) ? { payload } : {}),
+        ...(isReactServerComponentOrFunction(Component) ? serverOnlyProps ?? {} : {}),
       }
 
-      return <Component {...propsWithPayload} />
+      return <Component {...propsWithServerOnlyProps} />
     }
 
     return <WithServerSideProps {...rest} />

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

@@ -3,11 +3,6 @@ import type { FieldPermissions } from 'payload/auth'
 import type { ArrayField as ArrayFieldType } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-import { withCondition } from '@payloadcms/ui/forms/withCondition'
 import React, { useCallback } from 'react'
 
 import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
@@ -18,9 +13,14 @@ import { Button } from '../../elements/Button/index.js'
 import { DraggableSortableItem } from '../../elements/DraggableSortable/DraggableSortableItem/index.js'
 import { DraggableSortable } from '../../elements/DraggableSortable/index.js'
 import { ErrorPill } from '../../elements/ErrorPill/index.js'
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useForm, useFormSubmitted } from '../../forms/Form/context.js'
 import { NullifyLocaleField } from '../../forms/NullifyField/index.js'
 import { useField } from '../../forms/useField/index.js'
+import { withCondition } from '../../forms/withCondition/index.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
 import { useLocale } from '../../providers/Locale/index.js'

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

@@ -25,17 +25,17 @@ import './index.scss'
 const baseClass = 'blocks-field'
 
 import type { FieldPermissions } from 'payload/auth'
-import type { BlockField, FieldBase } from 'payload/types'
-
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-import { withCondition } from '@payloadcms/ui/forms/withCondition'
+import type { BlockField } from 'payload/types'
 
 import type { ReducedBlock } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { FormFieldBase } from '../shared/index.js'
 
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
+import { withCondition } from '../../forms/withCondition/index.js'
+
 export type BlocksFieldProps = FormFieldBase & {
   blocks?: ReducedBlock[]
   forceRender?: boolean

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

@@ -1,9 +1,9 @@
 'use client'
 import type { LabelProps, SanitizedLabelProps } from 'payload/types'
 
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
 import React from 'react'
 
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
 import { Check } from '../../icons/Check/index.js'
 import { Line } from '../../icons/Line/index.js'
 

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

@@ -1,17 +1,17 @@
 'use client'
 import type { ClientValidate } from 'payload/types'
 
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
 import React, { useCallback } from 'react'
 
 import type { CheckboxFieldProps } from './types.js'
 
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useForm } from '../../forms/Form/context.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
+import { useEditDepth } from '../../providers/EditDepth/index.js'
 import { generateFieldID } from '../../utilities/generateFieldID.js'
 import { fieldBaseClass } from '../shared/index.js'
 import { CheckboxInput } from './Input.js'

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

@@ -1,16 +1,16 @@
 /* eslint-disable react/destructuring-assignment */
 'use client'
-import type { CodeField as CodeFieldType, FieldBase } from 'payload/types'
+import type { CodeField as CodeFieldType } from 'payload/types'
 
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback } from 'react'
 
 import type { FormFieldBase } from '../shared/index.js'
 
 import { CodeEditor } from '../../elements/CodeEditor/index.js'
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
 import { fieldBaseClass } from '../shared/index.js'

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

@@ -20,11 +20,11 @@ const baseClass = 'collapsible-field'
 
 import type { FieldPermissions } from 'payload/auth'
 
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-
 import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
 import type { FormFieldBase } from '../shared/index.js'
 
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+
 export type CollapsibleFieldProps = FormFieldBase & {
   fieldMap: FieldMap
   initCollapsed?: boolean

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

@@ -16,12 +16,11 @@ const baseClass = 'date-time-field'
 
 import type { DateField } from 'payload/types'
 
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-
 import type { FormFieldBase } from '../shared/index.js'
 
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
 
 export type DateFieldProps = FormFieldBase & {

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

@@ -1,16 +1,16 @@
 'use client'
 import type { ClientValidate } from 'payload/types'
-import type { EmailField as EmailFieldType, FieldBase } from 'payload/types'
+import type { EmailField as EmailFieldType } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback } from 'react'
 
 import type { FormFieldBase } from '../shared/index.js'
 
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'

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

@@ -2,7 +2,6 @@
 import type { FieldPermissions } from 'payload/auth'
 
 import { getTranslation } from '@payloadcms/translations'
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import React, { Fragment } from 'react'
 
 import type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'
@@ -10,6 +9,7 @@ import type { FormFieldBase } from '../shared/index.js'
 
 import { useCollapsible } from '../../elements/Collapsible/provider.js'
 import { ErrorPill } from '../../elements/ErrorPill/index.js'
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useFormSubmitted } from '../../forms/Form/context.js'
 import { RenderFields } from '../../forms/RenderFields/index.js'

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

@@ -1,9 +1,9 @@
 'use client'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useEffect } from 'react'
 
 import type { FormFieldBase } from '../index.js'
 
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
 

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

@@ -14,12 +14,12 @@ const baseClass = 'json-field'
 
 import type { JSONField as JSONFieldType } from 'payload/types'
 
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-
 import type { FormFieldBase } from '../shared/index.js'
 
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
+
 export type JSONFieldProps = FormFieldBase & {
   editorOptions?: JSONFieldType['admin']['editorOptions']
   jsonSchema?: Record<string, unknown>

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

@@ -1,12 +1,8 @@
 /* eslint-disable react/destructuring-assignment */
 'use client'
-import type { FieldBase, NumberField as NumberFieldType } from 'payload/types'
+import type { NumberField as NumberFieldType } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import { isNumber } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 
@@ -14,6 +10,10 @@ import type { Option } from '../../elements/ReactSelect/types.js'
 import type { FormFieldBase } from '../shared/index.js'
 
 import { ReactSelect } from '../../elements/ReactSelect/index.js'
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'

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

@@ -1,12 +1,12 @@
 'use client'
 import type { ClientValidate, Description, Validate } from 'payload/types'
 
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
 import React, { useCallback } from 'react'
 
 import type { FormFieldBase } from '../shared/index.js'
 
+import { FieldError } from '../../forms/FieldError/index.js'
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
 import { fieldBaseClass } from '../shared/index.js'

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

@@ -13,13 +13,13 @@ import './index.scss'
 
 const baseClass = 'point'
 
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-
 import type { FormFieldBase } from '../shared/index.js'
 
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
+
 export type PointFieldProps = FormFieldBase & {
   name?: string
   path?: string

packages/ui/src/fields/RadioGroup/Radio/index.tsx

@@ -2,11 +2,11 @@
 import type { OptionObject } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
 import React from 'react'
 
 import type { OnChange } from '../index.js'
 
+import { useEditDepth } from '../../../providers/EditDepth/index.js'
 import { useTranslation } from '../../../providers/Translation/index.js'
 import './index.scss'
 

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

@@ -16,12 +16,12 @@ import './index.scss'
 
 const baseClass = 'radio-group'
 
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-
 import type { FormFieldBase } from '../shared/index.js'
 
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
+
 export type RadioFieldProps = FormFieldBase & {
   layout?: 'horizontal' | 'vertical'
   name?: string

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

@@ -2,10 +2,6 @@
 import type { PaginatedDocs } from 'payload/database'
 import type { Where } from 'payload/types'
 
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import { wordBoundariesRegex } from 'payload/utilities'
 import qs from 'qs'
 import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'
@@ -14,6 +10,10 @@ import type { DocumentDrawerProps } from '../../elements/DocumentDrawer/types.js
 import type { GetResults, Option, RelationshipFieldProps, Value } from './types.js'
 
 import { ReactSelect } from '../../elements/ReactSelect/index.js'
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useFormProcessing } from '../../forms/Form/context.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'

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

@@ -3,15 +3,15 @@
 import type { ClientValidate, Option, OptionObject } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback, useState } from 'react'
 
 import type { FormFieldBase } from '../shared/index.js'
 
 import { ReactSelect } from '../../elements/ReactSelect/index.js'
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'

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

@@ -3,7 +3,6 @@ import type { FieldPermissions } from 'payload/auth'
 import type { DocumentPreferences } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { toKebabCase } from 'payload/utilities'
 import React, { useCallback, useEffect, useState } from 'react'
 
@@ -11,6 +10,7 @@ import type { MappedTab } from '../../providers/ComponentMap/buildComponentMap/t
 import type { FormFieldBase } from '../shared/index.js'
 
 import { useCollapsible } from '../../elements/Collapsible/provider.js'
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
 import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { RenderFields } from '../../forms/RenderFields/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'

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

@@ -1,13 +1,13 @@
 'use client'
 import { getTranslation } from '@payloadcms/translations'
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
 import React from 'react'
 
 import type { TextInputProps } from './types.js'
 
 import { ReactSelect } from '../../elements/ReactSelect/index.js'
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { fieldBaseClass } from '../shared/index.js'
 import './index.scss'

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

@@ -1,13 +1,12 @@
 'use client'
 import type { ClientValidate } from 'payload/types'
-import type {} from 'payload/types'
 
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { Option } from '../../elements/ReactSelect/types.js'
 import type { TextFieldProps, TextInputProps } from './types.js'
 
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
 import { useConfig } from '../../providers/Config/index.js'

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

@@ -1,12 +1,12 @@
 'use client'
 import { getTranslation } from '@payloadcms/translations'
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
 import React from 'react'
 
 import type { TextAreaInputProps } from './types.js'
 
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { fieldBaseClass } from '../shared/index.js'
 import './index.scss'

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

@@ -3,11 +3,11 @@
 import type { ClientValidate } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
 import React, { useCallback } from 'react'
 
 import type { TextAreaInputProps, TextareaFieldProps } from './types.js'
 
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useField } from '../../forms/useField/index.js'
 import { withCondition } from '../../forms/withCondition/index.js'
 import { useConfig } from '../../providers/Config/index.js'

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

@@ -3,9 +3,6 @@
 import type { ClientCollectionConfig, FilterOptionsResult, UploadField } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
-import { FieldError } from '@payloadcms/ui/forms/FieldError'
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { DocumentDrawerProps } from '../../elements/DocumentDrawer/types.js'
@@ -16,6 +13,9 @@ import { Button } from '../../elements/Button/index.js'
 import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js'
 import { FileDetails } from '../../elements/FileDetails/index.js'
 import { useListDrawer } from '../../elements/ListDrawer/index.js'
+import { FieldDescription } from '../../forms/FieldDescription/index.js'
+import { FieldError } from '../../forms/FieldError/index.js'
+import { FieldLabel } from '../../forms/FieldLabel/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { fieldBaseClass } from '../shared/index.js'
 import './index.scss'

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

@@ -1,12 +1,13 @@
 'use client'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-import { withCondition } from '@payloadcms/ui/forms/withCondition'
+
 import React, { useCallback } from 'react'
 
 import type { UploadInputProps } from './Input.js'
 import type { UploadFieldProps } from './types.js'
 
+import { useFieldProps } from '../../forms/FieldPropsProvider/index.js'
 import { useField } from '../../forms/useField/index.js'
+import { withCondition } from '../../forms/withCondition/index.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { UploadInput } from './Input.js'
 import './index.scss'

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

@@ -3,9 +3,9 @@
 import type { LabelProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
-import { useEditDepth } from '@payloadcms/ui/providers/EditDepth'
 import React from 'react'
 
+import { useEditDepth } from '../../providers/EditDepth/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { generateFieldID } from '../../utilities/generateFieldID.js'
 import { useFieldProps } from '../FieldPropsProvider/index.js'

packages/ui/src/forms/Form/mergeErrorPaths.ts

@@ -1,4 +1,4 @@
-import { arraysHaveSameStrings } from '@payloadcms/ui/utilities/arraysHaveSameStrings'
+import { arraysHaveSameStrings } from '../../utilities/arraysHaveSameStrings.js'
 
 export const mergeErrorPaths = (
   existing?: string[],

packages/ui/src/graphics/Logo/index.tsx

@@ -1,4 +1,4 @@
-import type { Payload } from 'payload'
+import type { ServerProps } from 'payload/config'
 
 import React from 'react'
 
@@ -32,10 +32,8 @@ const PayloadLogo: React.FC = () => (
   </svg>
 )
 
-export const Logo: React.FC<{
-  payload: Payload
-}> = (props) => {
-  const { payload } = props
+export const Logo: React.FC<ServerProps> = (props) => {
+  const { i18n, locale, params, payload, permissions, searchParams, user } = props
 
   const {
     admin: {
@@ -51,7 +49,15 @@ export const Logo: React.FC<{
     <RenderCustomComponent
       CustomComponent={CustomLogo}
       DefaultComponent={PayloadLogo}
-      payload={payload}
+      serverOnlyProps={{
+        i18n,
+        locale,
+        params,
+        payload,
+        permissions,
+        searchParams,
+        user,
+      }}
     />
   )
 }

packages/ui/src/providers/Auth/index.tsx

@@ -3,12 +3,12 @@ import type { ClientUser, Permissions } from 'payload/auth'
 import type { MeOperationResult } from 'payload/types'
 
 import * as facelessUIImport from '@faceless-ui/modal'
-import { stayLoggedInModalSlug } from '@payloadcms/ui/elements/StayLoggedIn'
 import { usePathname, useRouter } from 'next/navigation.js'
 import qs from 'qs'
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 
+import { stayLoggedInModalSlug } from '../../elements/StayLoggedIn/index.js'
 import { useDebounce } from '../../hooks/useDebounce.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { requests } from '../../utilities/api.js'

packages/ui/src/providers/ComponentMap/buildComponentMap/actions.tsx

@@ -1,15 +1,12 @@
-import type {
-  SanitizedCollectionConfig,
-  SanitizedGlobalConfig,
-  WithServerSideProps as WithServerSidePropsType,
-} from 'payload/types'
+import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types'
 
 import React from 'react'
 
+import type { WithServerSidePropsPrePopulated } from './index.js'
 import type { ActionMap } from './types.js'
 
 export const mapActions = (args: {
-  WithServerSideProps: WithServerSidePropsType
+  WithServerSideProps: WithServerSidePropsPrePopulated
   collectionConfig?: SanitizedCollectionConfig
   globalConfig?: SanitizedGlobalConfig
 }): ActionMap => {

packages/ui/src/providers/ComponentMap/buildComponentMap/collections.tsx

@@ -1,25 +1,25 @@
 import type { I18nClient } from '@payloadcms/translations'
-import type { ViewDescriptionProps } from '@payloadcms/ui/elements/ViewDescription'
 import type {
   AdminViewProps,
   EditViewProps,
   SanitizedCollectionConfig,
   SanitizedConfig,
-  WithServerSideProps as WithServerSidePropsType,
 } from 'payload/types'
 
-import { ViewDescription } from '@payloadcms/ui/elements/ViewDescription'
 import React from 'react'
 
+import type { ViewDescriptionProps } from '../../../elements/ViewDescription/index.js'
+import type { WithServerSidePropsPrePopulated } from './index.js'
 import type { CollectionComponentMap } from './types.js'
 
+import { ViewDescription } from '../../../elements/ViewDescription/index.js'
 import { mapActions } from './actions.js'
 import { mapFields } from './fields.js'
 
 export const mapCollections = (args: {
   DefaultEditView: React.FC<EditViewProps>
   DefaultListView: React.FC<AdminViewProps>
-  WithServerSideProps: WithServerSidePropsType
+  WithServerSideProps: WithServerSidePropsPrePopulated
   collections: SanitizedCollectionConfig[]
   config: SanitizedConfig
   i18n: I18nClient

packages/ui/src/providers/ComponentMap/buildComponentMap/fields.tsx

@@ -8,10 +8,8 @@ import type {
   LabelProps,
   Option,
   SanitizedConfig,
-  WithServerSideProps as WithServerSidePropsType,
 } from 'payload/types'
 
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'
 import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/types'
 import React, { Fragment } from 'react'
 
@@ -36,6 +34,7 @@ import type { TextFieldProps } from '../../../fields/Text/types.js'
 import type { TextareaFieldProps } from '../../../fields/Textarea/types.js'
 import type { UploadFieldProps } from '../../../fields/Upload/types.js'
 import type { FormFieldBase } from '../../../fields/shared/index.js'
+import type { WithServerSidePropsPrePopulated } from './index.js'
 import type {
   FieldComponentProps,
   FieldMap,
@@ -45,9 +44,10 @@ import type {
 } from './types.js'
 
 import { HiddenInput } from '../../../fields/HiddenInput/index.js'
+import { FieldDescription } from '../../../forms/FieldDescription/index.js'
 
 export const mapFields = (args: {
-  WithServerSideProps: WithServerSidePropsType
+  WithServerSideProps: WithServerSidePropsPrePopulated
   config: SanitizedConfig
   /**
    * If mapFields is used outside of collections, you might not want it to add an id field

packages/ui/src/providers/ComponentMap/buildComponentMap/globals.tsx

@@ -1,16 +1,13 @@
 import type { I18nClient } from '@payloadcms/translations'
-import type {
-  EditViewProps,
-  SanitizedConfig,
-  SanitizedGlobalConfig,
-  WithServerSideProps,
-} from 'payload/types'
+import type { EditViewProps, SanitizedConfig, SanitizedGlobalConfig } from 'payload/types'
 
-import { ViewDescription, type ViewDescriptionProps } from '@payloadcms/ui/elements/ViewDescription'
 import React from 'react'
 
+import type { ViewDescriptionProps } from '../../../elements/ViewDescription/index.js'
+import type { WithServerSidePropsPrePopulated } from './index.js'
 import type { GlobalComponentMap } from './types.js'
 
+import { ViewDescription } from '../../../elements/ViewDescription/index.js'
 import { mapActions } from './actions.js'
 import { mapFields } from './fields.js'
 
@@ -19,7 +16,7 @@ export const mapGlobals = ({
 }: {
   args: {
     DefaultEditView: React.FC<EditViewProps>
-    WithServerSideProps: WithServerSideProps
+    WithServerSideProps: WithServerSidePropsPrePopulated
     config: SanitizedConfig
     globals: SanitizedGlobalConfig[]
     i18n: I18nClient

packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx

@@ -1,10 +1,9 @@
-import type { I18nClient } from '@payloadcms/translations'
+import type { ServerProps } from 'payload/config'
 import type {
   AdminViewProps,
   EditViewProps,
   Payload,
-  SanitizedConfig,
-  WithServerSideProps as WithServerSidePropsType,
+  WithServerSidePropsComponentProps,
 } from 'payload/types'
 
 import React from 'react'
@@ -15,22 +14,35 @@ import { WithServerSideProps as WithServerSidePropsGeneric } from '../../../elem
 import { mapCollections } from './collections.js'
 import { mapGlobals } from './globals.js'
 
+export type WithServerSidePropsPrePopulated = React.FC<
+  Omit<WithServerSidePropsComponentProps, 'serverOnlyProps'>
+>
+
 export const buildComponentMap = (args: {
   DefaultEditView: React.FC<EditViewProps>
   DefaultListView: React.FC<AdminViewProps>
   children: React.ReactNode
-  config: SanitizedConfig
-  i18n: I18nClient
+  i18n: ServerProps['i18n']
   payload: Payload
   readOnly?: boolean
 }): {
   componentMap: ComponentMap
   wrappedChildren: React.ReactNode
 } => {
-  const { DefaultEditView, DefaultListView, children, config, i18n, payload, readOnly } = args
+  const { DefaultEditView, DefaultListView, children, i18n, payload, readOnly } = args
+  const config = payload.config
 
-  const WithServerSideProps: WithServerSidePropsType = ({ Component, ...rest }) => {
-    return <WithServerSidePropsGeneric Component={Component} payload={payload} {...rest} />
+  const WithServerSideProps: WithServerSidePropsPrePopulated = ({ Component, ...rest }) => {
+    return (
+      <WithServerSidePropsGeneric
+        Component={Component}
+        serverOnlyProps={{
+          i18n,
+          payload,
+        }}
+        {...rest}
+      />
+    )
   }
 
   const collections = mapCollections({

packages/ui/src/providers/ComponentMap/buildComponentMap/types.ts

@@ -1,4 +1,3 @@
-import type { HiddenInputFieldProps } from '@payloadcms/ui/fields/HiddenInput'
 import type { FieldTypes } from 'payload/config'
 import type {
   BlockField,
@@ -16,6 +15,7 @@ import type { CollapsibleFieldProps } from '../../../fields/Collapsible/index.js
 import type { DateFieldProps } from '../../../fields/DateTime/index.js'
 import type { EmailFieldProps } from '../../../fields/Email/index.js'
 import type { GroupFieldProps } from '../../../fields/Group/index.js'
+import type { HiddenInputFieldProps } from '../../../fields/HiddenInput/index.js'
 import type { JSONFieldProps } from '../../../fields/JSON/index.js'
 import type { NumberFieldProps } from '../../../fields/Number/index.js'
 import type { PointFieldProps } from '../../../fields/Point/index.js'

packages/ui/src/providers/DocumentInfo/index.tsx

@@ -3,16 +3,16 @@ import type { PaginatedDocs, TypeWithVersion } from 'payload/database'
 import type { Data, FormState, TypeWithTimestamps } from 'payload/types'
 import type { DocumentPermissions, DocumentPreferences, TypeWithID, Where } from 'payload/types'
 
-import { LoadingOverlay } from '@payloadcms/ui/elements/Loading'
-import { formatDocTitle } from '@payloadcms/ui/utilities/formatDocTitle'
-import { getFormState } from '@payloadcms/ui/utilities/getFormState'
-import { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues'
 import { notFound } from 'next/navigation.js'
 import qs from 'qs'
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
 
 import type { DocumentInfoContext, DocumentInfoProps } from './types.js'
 
+import { LoadingOverlay } from '../../elements/Loading/index.js'
+import { formatDocTitle } from '../../utilities/formatDocTitle.js'
+import { getFormState } from '../../utilities/getFormState.js'
+import { reduceFieldsToValues } from '../../utilities/reduceFieldsToValues.js'
 import { useAuth } from '../Auth/index.js'
 import { useConfig } from '../Config/index.js'
 import { useLocale } from '../Locale/index.js'

packages/ui/src/providers/Root/index.tsx

@@ -5,7 +5,6 @@ import type { ClientConfig } from 'payload/types'
 import * as facelessUIImport from '@faceless-ui/modal'
 import * as facelessUIImport3 from '@faceless-ui/scroll-info'
 import * as facelessUIImport2 from '@faceless-ui/window-info'
-import { StayLoggedInModal } from '@payloadcms/ui/elements/StayLoggedIn'
 import React, { Fragment } from 'react'
 import { Slide, ToastContainer } from 'react-toastify'
 
@@ -14,6 +13,7 @@ import type { LanguageOptions } from '../Translation/index.js'
 
 import { LoadingOverlayProvider } from '../../elements/LoadingOverlay/index.js'
 import { NavProvider } from '../../elements/Nav/context.js'
+import { StayLoggedInModal } from '../../elements/StayLoggedIn/index.js'
 import { StepNavProvider } from '../../elements/StepNav/index.js'
 import { ActionsProvider } from '../Actions/index.js'
 import { AuthProvider } from '../Auth/index.js'

packages/ui/src/templates/Default/index.tsx

@@ -1,6 +1,6 @@
-import type { Payload, SanitizedConfig, VisibleEntities } from 'payload/types'
+import type { ServerProps } from 'payload/config'
+import type { VisibleEntities } from 'payload/types'
 
-import { EntityVisibilityProvider } from '@payloadcms/ui/providers/EntityVisibility'
 import React from 'react'
 
 import type { NavProps } from '../../elements/Nav/index.js'
@@ -9,23 +9,29 @@ import { AppHeader } from '../../elements/AppHeader/index.js'
 import { NavToggler } from '../../elements/Nav/NavToggler/index.js'
 import { DefaultNav } from '../../elements/Nav/index.js'
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'
+import { EntityVisibilityProvider } from '../../providers/EntityVisibility/index.js'
 import { NavHamburger } from './NavHamburger/index.js'
 import { Wrapper } from './Wrapper/index.js'
 import './index.scss'
 
 const baseClass = 'template-default'
 
-export type DefaultTemplateProps = {
+export type DefaultTemplateProps = ServerProps & {
   children?: React.ReactNode
   className?: string
-  payload: Payload
-  visibleEntities?: VisibleEntities
+  visibleEntities: VisibleEntities
 }
 
 export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
   children,
   className,
+  i18n,
+  locale,
+  params,
   payload,
+  permissions,
+  searchParams,
+  user,
   visibleEntities,
 }) => {
   const {
@@ -37,7 +43,13 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
   } = payload.config || {}
 
   const navProps: NavProps = {
+    i18n,
+    locale,
+    params,
     payload,
+    permissions,
+    searchParams,
+    user,
   }
 
   return (
@@ -53,7 +65,15 @@ export const DefaultTemplate: React.FC<DefaultTemplateProps> = ({
             CustomComponent={CustomNav}
             DefaultComponent={DefaultNav}
             componentProps={navProps}
-            payload={payload}
+            serverOnlyProps={{
+              i18n,
+              locale,
+              params,
+              payload,
+              permissions,
+              searchParams,
+              user,
+            }}
           />
           <div className={`${baseClass}__wrap`}>
             <AppHeader />

packages/ui/tsconfig.json

@@ -6,7 +6,9 @@
     "emitDeclarationOnly": true,
     "esModuleInterop": 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. */
+    "paths": {
+    }
   },
   "exclude": [
     "dist",

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

@@ -1,5 +1,3 @@
-import type { AdminViewProps } from 'payload/types'
-
 import { DefaultTemplate } from '@payloadcms/ui/templates/Default'
 import LinkImport from 'next/link.js'
 import { redirect } from 'next/navigation.js'
@@ -16,7 +14,11 @@ import { customViewPath } from '../../../shared.js'
 import './index.scss'
 const baseClass = 'custom-default-view'
 
-export const CustomDefaultView: React.FC<AdminViewProps> = ({ initPageResult }) => {
+export const CustomDefaultView: React.FC<AdminViewProps> = ({
+  initPageResult,
+  params,
+  searchParams,
+}) => {
   const {
     permissions,
     req: {
@@ -38,7 +40,16 @@ export const CustomDefaultView: React.FC<AdminViewProps> = ({ initPageResult })
   }
 
   return (
-    <DefaultTemplate payload={payload} visibleEntities={visibleEntities}>
+    <DefaultTemplate
+      i18n={initPageResult.req.i18n}
+      locale={initPageResult.locale}
+      params={params}
+      payload={payload}
+      permissions={permissions}
+      searchParams={searchParams}
+      user={user}
+      visibleEntities={visibleEntities}
+    >
       <SetStepNav
         nav={[
           {