chore: updates fetchPages url

Feat/versions perf

.editorconfig

@@ -19,11 +19,3 @@ indent_size = 2
 [*.mdx]
 indent_style = space
 indent_size = 2
-
-[*.json]
-indent_style = space
-indent_size = 2
-
-[*.md]
-indent_style = space
-indent_size = 2

.eslintrc.js

@@ -0,0 +1,104 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: [
+    '@typescript-eslint',
+  ],
+  extends: [
+    './eslint-config',
+  ],
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+  overrides: [
+    {
+      files: ['test/**/int.spec.ts'],
+      rules: {
+        '@typescript-eslint/no-use-before-define': 'off',
+        '@typescript-eslint/consistent-type-imports': 'warn',
+        'jest/prefer-strict-equal': 'off',
+      }
+    },
+    {
+      files: ['test/**/e2e.spec.ts'],
+      extends: [
+        'plugin:playwright/playwright-test'
+      ],
+      rules: {
+        'jest/consistent-test-it': 'off',
+        'jest/require-top-level-describe': 'off',
+        'jest/no-test-callback': 'off',
+        'jest/prefer-strict-equal': 'off',
+        'jest/expect-expect': 'off',
+        'jest-dom/prefer-to-have-attribute': 'off',
+      }
+    },
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+      ],
+      rules: {
+        'no-shadow': 'off',
+        '@typescript-eslint/no-shadow': ['error'],
+        'import/no-unresolved': [
+          2,
+          {
+            ignore: [
+              'payload-config',
+              'payload/generated-types',
+            ],
+          },
+        ],
+      },
+    },
+    {
+      files: ['*.spec.ts'],
+      rules: {
+        '@typescript-eslint/no-use-before-define': 'off',
+      },
+    },
+    {
+      files: ['*.e2e.ts'],
+      rules: {
+        '@typescript-eslint/no-use-before-define': 'off',
+        'jest/expect-expect': 'off',
+      },
+    },
+  ],
+  rules: {
+    'import/no-extraneous-dependencies': ['error', { packageDir: './' }],
+    'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+    'import/prefer-default-export': 'off',
+    'react/prop-types': 'off',
+    'react/require-default-props': 'off',
+    'react/no-unused-prop-types': 'off',
+    'no-console': 'warn',
+    'no-sparse-arrays': 'off',
+    'no-underscore-dangle': 'off',
+    'no-use-before-define': 'off',
+    'arrow-body-style': 0,
+    '@typescript-eslint/no-use-before-define': 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+  },
+};

.git-blame-ignore-revs

@@ -1,24 +0,0 @@
-# lint and format
-ae7d6f97d205491390f15850e5104c7abded1550
-1fbda85cd04a774cb978778b0f813001664c53dd
-
-# prettier all templates
-75a428ddc4672903455998eaba7ae9f9d710bf85
-
-# re-run prettier and eslint everywhere again
-cdaa0acd61d3001407609915bd573b78565d5571
-
-# prettier write again
-dfac7395fed95fc5d8ebca21b786ce70821942bb
-
-# lint and format plugin-cloud
-fb7d1be2f3325d076b7c967b1730afcef37922c2
-
-# lint and format create-payload-app
-5fd3d430001efe86515262ded5e26f00c1451181
-
-# 3.0 prettier & lint everywhere
-6789e61488a1d3de56f472ac3214faf344030005
-
-# 3.0 prettier & lint everywhere again
-83fd4c66222d7846eeb5cc332dfa99bf1e830831

.github/CODEOWNERS

@@ -1,30 +0,0 @@
-# Order matters. The last matching pattern takes precedence.
-
-### Package Exports ###
-/**/exports/ @denolfe @jmikrut
-
-### Packages ###
-/packages/richtext-*/ @AlessioGr
-/packages/plugin-cloud*/ @denolfe
-/packages/email-*/ @denolfe
-/packages/storage-*/ @denolfe
-/packages/create-payload-app/ @denolfe
-/packages/eslint-*/ @denolfe
-
-### Templates ###
-/templates/ @jacobsfletch @denolfe
-
-### Build Files ###
-/**/package.json @denolfe
-/tsconfig.json @denolfe
-/**/tsconfig*.json @denolfe
-
-/jest.config.js @denolfe
-/**/jest.config.js @denolfe
-
-### Root ###
-/package.json @denolfe
-/scripts/ @denolfe
-/.husky/ @denolfe
-/.vscode/ @denolfe
-/.github/ @denolfe

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -1,6 +1,6 @@
 name: Bug Report
 description: Create a bug report for Payload
-labels: ['[possible-bug]']
+labels: ["possible-bug"]
 body:
   - type: markdown
     attributes:
@@ -10,12 +10,7 @@ body:
     id: reproduction-link
     attributes:
       label: Link to reproduction
-      description: Want us to look into your issue faster? Follow the [reproduction-guide](https://github.com/payloadcms/payload/blob/main/.github/reproduction-guide.md) for more information.
-    validations:
-      required: false
-  - type: textarea
-    attributes:
-      label: Describe the Bug
+      description: Please add a link to a reproduction. See the fork [reproduction-guide](https://github.com/payloadcms/payload/blob/master/.github/reproduction-guide.md) for more information.
     validations:
       required: true
   - type: textarea
@@ -24,6 +19,11 @@ body:
       description: Steps to reproduce the behavior, please provide a clear description of how to reproduce the issue, based on the linked minimal reproduction. Screenshots can be provided in the issue body below. If using code blocks, make sure that [syntax highlighting is correct](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting) and double check that the rendered preview is not broken.
     validations:
       required: true
+  - type: textarea
+    attributes:
+      label: Describe the Bug
+    validations:
+      required: true
   - type: input
     id: version
     attributes:
@@ -31,11 +31,6 @@ body:
       description: What version of Payload are you running?
     validations:
       required: true
-  - type: input
-    id: adapters-plugins
-    attributes:
-      label: Adapters and Plugins
-      description: What adapters and plugins are you using? ie. db-mongodb, db-postgres, bundler-webpack, etc.
   - type: markdown
     attributes:
       value: Before submitting the issue, go through the steps you've written down to make sure the steps provided are detailed and clear.

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,7 +2,7 @@
 
 <!-- Please include a summary of the pull request and any related issues it fixes. Please also include relevant motivation and context. -->
 
-- [ ] I have read and understand the [CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md) document in this repository.
+- [ ] I have read and understand the [CONTRIBUTING.md](../CONTRIBUTING.md) document in this repository.
 
 ## Type of change
 
@@ -12,8 +12,8 @@
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] Change to the [templates](https://github.com/payloadcms/payload/tree/main/templates) directory (does not affect core functionality)
-- [ ] Change to the [examples](https://github.com/payloadcms/payload/tree/main/examples) directory (does not affect core functionality)
+- [ ] Change to the [templates](../templates/) directory (does not affect core functionality)
+- [ ] Change to the [examples](../examples/) directory (does not affect core functionality)
 - [ ] This change requires a documentation update
 
 ## Checklist:

.github/actions/setup/action.yml

@@ -1,48 +0,0 @@
-name: Setup node and pnpm
-description: Configure the Node.js and pnpm versions
-
-inputs:
-  node-version:
-    description: 'The Node.js version to use'
-    required: true
-    default: 18.20.2
-  pnpm-version:
-    description: 'The pnpm version to use'
-    required: true
-    default: 8.15.7
-
-runs:
-  using: composite
-  steps:
-    # https://github.com/actions/virtual-environments/issues/1187
-    - name: tune linux network
-      shell: bash
-      run: sudo ethtool -K eth0 tx off rx off
-
-    - name: Setup Node@${{ inputs.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ inputs.node-version }}
-
-    - name: Install pnpm
-      uses: pnpm/action-setup@v3
-      with:
-        version: ${{ inputs.pnpm-version }}
-        run_install: false
-
-    - name: Get pnpm store directory
-      shell: bash
-      run: |
-        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-    - name: Setup pnpm cache
-      uses: actions/cache@v4
-      with:
-        path: ${{ env.STORE_PATH }}
-        key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-        restore-keys: |
-          pnpm-store-
-          pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-
-    - shell: bash
-      run: pnpm install

.github/reproduction-guide.md

@@ -1,16 +1,14 @@
 # Reproduction Guide
 
-1. [Fork](https://github.com/payloadcms/payload/fork) this repo
-2. Optionally, create a new branch for your reproduction
-3. Run `pnpm install` to install dependencies
-4. Open up the `test/_community` directory
-5. Add any necessary `collections/globals/fields` in this directory to recreate the issue you are experiencing
-6. Run `pnpm dev _community` to start the admin panel
+1. [fork](https://github.com/payloadcms/payload/fork) this repo
+2. run `yarn` to install dependencies
+3. open up the `test/_community` directory
+4. add any necessary `collections/globals/fields` in this directory to recreate the issue you are experiencing
+5. run `yarn dev _community` to start the admin panel
 
 **NOTE:** The goal is to isolate the problem by reducing the number of `collections/globals/fields` you add to the `test/_community` folder. This folder is _not_ meant for you to copy your project into, but rather recreate the issue you are experiencing with minimal config.
 
 ## Example test directory file tree
-
 ```text
 .
 ├── config.ts
@@ -22,43 +20,39 @@
 - `config.ts` - This is the _granular_ Payload config for testing. It should be as lightweight as possible. Reference existing configs for an example
 - `int.spec.ts` [Optional] - This is the test file run by jest. Any test file must have a `*int.spec.ts` suffix.
 - `e2e.spec.ts` [Optional] - This is the end-to-end test file that will load up the admin UI using the above config and run Playwright tests.
-- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `pnpm dev:generate-types _community`.
+- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `yarn dev:generate-types _community`.
 
 The directory split up in this way specifically to reduce friction when creating tests and to add the ability to boot up Payload with that specific config. You should modify the files in `test/_community` to get started.
 
 <br />
 
 ## Testing is optional but encouraged
-
 An issue does not need to have failing tests — reproduction steps with your forked repo are enough at this point. Some people like to dive deeper and we want to give you the guidance/tools to do so. Read more below:
 
 ### Running integration tests (Payload API tests)
-
 First install [Jest Runner for VSVode](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner).
 
 There are a couple ways run integration tests:
 
 - **Granularly** - you can run individual tests in vscode by installing the Jest Runner plugin and using that to run individual tests. Clicking the `debug` button will run the test in debug mode allowing you to set break points.
 
-  <img src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/github/int-debug.png" />
+  <img src="https://raw.githubusercontent.com/payloadcms/payload/master/src/admin/assets/images/github/int-debug.png" />
 
 - **Manually** - you can run all int tests in the `/test/_community/int.spec.ts` file by running the following command:
 
   ```bash
-  pnpm test:int _community
+  yarn test:int _community
   ```
 
 ### Running E2E tests (Admin Panel UI tests)
-
 The easiest way to run E2E tests is to install
-
 - [Playwright Test for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright)
 - [Playwright Runner](https://marketplace.visualstudio.com/items?itemName=ortoni.ortoni)
 
 Once they are installed you can open the `testing` tab in vscode sidebar and drill down to the test you want to run, i.e. `/test/_community/e2e.spec.ts`
 
-<img src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/github/e2e-debug.png" />
+<img src="https://raw.githubusercontent.com/payloadcms/payload/master/src/admin/assets/images/github/e2e-debug.png" />
+
 
 #### Notes
-
-The default credentials are `dev@payloadcms.com` as email and `test` as password. They can be found in `test/credentials.ts`. By default, these will be autofilled, so no log-in is required.
+- It is recommended to add the test credentials (located in `test/credentials.ts`) to your autofill for `localhost:3000/admin` as this will be required on every nodemon restart. The default credentials are `dev@payloadcms.com` as email and `test` as password.

.github/workflows/label-author.yml

@@ -1,50 +0,0 @@
-name: label-author
-
-on:
-  pull_request:
-    types: [opened]
-  issues:
-    types: [opened]
-
-permissions:
-  contents: read
-  pull-requests: write
-  issues: write
-
-jobs:
-  debug-context:
-    runs-on: ubuntu-latest
-    steps:
-      - name: View context attributes
-        uses: actions/github-script@v7
-        with:
-          script: console.log(context)
-
-  label-created-by:
-    name: Label pr/issue on opening
-    runs-on: ubuntu-latest
-    steps:
-      - name: Tag with 'created-by'
-        uses: actions/github-script@v7
-        if: github.event.action == 'opened'
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const type = context.payload.pull_request ? 'pull_request' : 'issue';
-            const association = context.payload[type].author_association;
-            let label = ''
-            if (association === 'MEMBER' || association === 'OWNER') {
-              label = 'created-by: Payload team';
-            } else if (association === 'CONTRIBUTOR') {
-              label = 'created-by: Contributor';
-            }
-
-            if (!label) return;
-
-            github.rest.issues.addLabels({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              labels: [label],
-            });
-            console.log('Added created-by: Payload team label');

.github/workflows/main.yml

@@ -1,551 +0,0 @@
-name: build
-
-on:
-  pull_request:
-    types:
-      - opened
-      - reopened
-      - synchronize
-  push:
-    branches:
-      - main
-      - beta
-
-concurrency:
-  # <workflow_name>-<branch_name>-<true || commit_sha if branch is protected>
-  group: ${{ github.workflow }}-${{ github.ref }}-${{ github.ref_protected && github.sha || ''}}
-  cancel-in-progress: true
-
-env:
-  NODE_VERSION: 18.20.2
-  PNPM_VERSION: 8.15.7
-  DO_NOT_TRACK: 1 # Disable Turbopack telemetry
-  NEXT_TELEMETRY_DISABLED: 1 # Disable Next telemetry
-
-jobs:
-  changes:
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: read
-    outputs:
-      needs_build: ${{ steps.filter.outputs.needs_build }}
-      templates: ${{ steps.filter.outputs.templates }}
-    steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 25
-      - uses: dorny/paths-filter@v3
-        id: filter
-        with:
-          filters: |
-            needs_build:
-              - '.github/workflows/**'
-              - 'packages/**'
-              - 'test/**'
-              - 'pnpm-lock.yaml'
-              - 'package.json'
-            templates:
-              - 'templates/**'
-      - name: Log all filter results
-        run: |
-          echo "needs_build: ${{ steps.filter.outputs.needs_build }}"
-          echo "templates: ${{ steps.filter.outputs.templates }}"
-
-  lint:
-    if: >
-      github.event_name == 'pull_request' && !contains(github.event.pull_request.title, 'no-lint') && !contains(github.event.pull_request.title, 'skip-lint')
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: ${{ env.PNPM_VERSION }}
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v4
-        timeout-minutes: 720
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-store-
-            pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-
-      - run: pnpm install
-      - name: Lint staged
-        run: |
-          git diff --name-only --diff-filter=d origin/${GITHUB_BASE_REF}...${GITHUB_SHA}
-          npx lint-staged --diff="origin/${GITHUB_BASE_REF}...${GITHUB_SHA}"
-
-  build:
-    needs: changes
-    if: ${{ needs.changes.outputs.needs_build == 'true' }}
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 25
-
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: ${{ env.PNPM_VERSION }}
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v4
-        timeout-minutes: 720
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-store-
-            pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-
-      - run: pnpm install
-      - run: pnpm run build:all
-        env:
-          DO_NOT_TRACK: 1 # Disable Turbopack telemetry
-
-      - name: Cache build
-        uses: actions/cache@v4
-        timeout-minutes: 10
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-  tests-unit:
-    runs-on: ubuntu-latest
-    needs: build
-
-    steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: ${{ env.PNPM_VERSION }}
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        timeout-minutes: 10
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Unit Tests
-        run: pnpm test:unit
-        env:
-          NODE_OPTIONS: --max-old-space-size=8096
-
-  tests-int:
-    runs-on: ubuntu-latest
-    needs: build
-    strategy:
-      fail-fast: false
-      matrix:
-        database:
-          - mongodb
-          - postgres
-          - postgres-custom-schema
-          - postgres-uuid
-          - supabase
-          - sqlite
-    env:
-      POSTGRES_USER: postgres
-      POSTGRES_PASSWORD: postgres
-      POSTGRES_DB: payloadtests
-      AWS_ENDPOINT_URL: http://127.0.0.1:4566
-      AWS_ACCESS_KEY_ID: localstack
-      AWS_SECRET_ACCESS_KEY: localstack
-      AWS_REGION: us-east-1
-
-    steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: ${{ env.PNPM_VERSION }}
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        timeout-minutes: 10
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Start LocalStack
-        run: pnpm docker:start
-
-      - name: Start PostgreSQL
-        uses: CasperWA/postgresql-action@v1.2
-        with:
-          postgresql version: '14' # See https://hub.docker.com/_/postgres for available versions
-          postgresql db: ${{ env.POSTGRES_DB }}
-          postgresql user: ${{ env.POSTGRES_USER }}
-          postgresql password: ${{ env.POSTGRES_PASSWORD }}
-        if: startsWith(matrix.database, 'postgres')
-
-      - name: Install Supabase CLI
-        uses: supabase/setup-cli@v1
-        with:
-          version: latest
-        if: matrix.database == 'supabase'
-
-      - name: Initialize Supabase
-        run: |
-          supabase init
-          supabase start
-        if: matrix.database == 'supabase'
-
-      - name: Wait for PostgreSQL
-        run: sleep 30
-        if: startsWith(matrix.database, 'postgres')
-
-      - name: Configure PostgreSQL
-        run: |
-          psql "postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" -c "CREATE ROLE runner SUPERUSER LOGIN;"
-          psql "postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" -c "SELECT version();"
-          echo "POSTGRES_URL=postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" >> $GITHUB_ENV
-        if: startsWith(matrix.database, 'postgres')
-
-      - name: Configure PostgreSQL with custom schema
-        run: |
-          psql "postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" -c "CREATE SCHEMA custom;"
-        if: matrix.database == 'postgres-custom-schema'
-
-      - name: Configure Supabase
-        run: |
-          echo "POSTGRES_URL=postgresql://postgres:postgres@127.0.0.1:54322/postgres" >> $GITHUB_ENV
-        if: matrix.database == 'supabase'
-
-      - name: Integration Tests
-        run: pnpm test:int
-        env:
-          NODE_OPTIONS: --max-old-space-size=8096
-          PAYLOAD_DATABASE: ${{ matrix.database }}
-          POSTGRES_URL: ${{ env.POSTGRES_URL }}
-
-  tests-e2e:
-    runs-on: ubuntu-latest
-    needs: build
-    strategy:
-      fail-fast: false
-      matrix:
-        # find test -type f -name 'e2e.spec.ts' | sort | xargs dirname | xargs -I {} basename {}
-        suite:
-          - _community
-          - access-control
-          - admin__e2e__1
-          - admin__e2e__2
-          - admin-root
-          - auth
-          - field-error-states
-          - fields-relationship
-          - fields
-          - fields__collections__Blocks
-          - fields__collections__Array
-          - fields__collections__Relationship
-          - fields__collections__RichText
-          - fields__collections__Lexical__e2e__main
-          - fields__collections__Lexical__e2e__blocks
-          - fields__collections__Date
-          - fields__collections__Number
-          - fields__collections__Point
-          - fields__collections__Tabs
-          - fields__collections__Text
-          - fields__collections__Upload
-          - live-preview
-          - localization
-          - i18n
-          - plugin-cloud-storage
-          - plugin-form-builder
-          - plugin-nested-docs
-          - plugin-seo
-          - versions
-          - uploads
-    env:
-      SUITE_NAME: ${{ matrix.suite }}
-    steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: ${{ env.PNPM_VERSION }}
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        timeout-minutes: 10
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Start LocalStack
-        run: pnpm docker:start
-        if: ${{ matrix.suite == 'plugin-cloud-storage' }}
-
-      - name: Store Playwright's Version
-        run: |
-          # Extract the version number using a more targeted regex pattern with awk
-          PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --depth=0 | awk '/@playwright\/test/ {print $2}')
-          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
-          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
-
-      - name: Cache Playwright Browsers for Playwright's Version
-        id: cache-playwright-browsers
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/ms-playwright
-          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
-
-      - name: Setup Playwright - Browsers and Dependencies
-        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
-        run: pnpm exec playwright install --with-deps chromium
-
-      - name: Setup Playwright - Dependencies-only
-        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
-        run: pnpm exec playwright install-deps chromium
-
-      - name: E2E Tests
-        run: PLAYWRIGHT_JSON_OUTPUT_NAME=results_${{ matrix.suite }}.json pnpm test:e2e ${{ matrix.suite }}
-        env:
-          PLAYWRIGHT_JSON_OUTPUT_NAME: results_${{ matrix.suite }}.json
-          NEXT_TELEMETRY_DISABLED: 1
-
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: test-results-${{ matrix.suite }}
-          path: test/test-results/
-          if-no-files-found: ignore
-          retention-days: 1
-
-      # Disabled until this is fixed: https://github.com/daun/playwright-report-summary/issues/156
-      # - uses: daun/playwright-report-summary@v3
-      #   with:
-      #     report-file: results_${{ matrix.suite }}.json
-      #     report-tag: ${{ matrix.suite }}
-      #     job-summary: true
-
-  app-build-with-packed:
-    if: false # Disable until package resolution in tgzs can be figured out
-    runs-on: ubuntu-latest
-    needs: build
-
-    steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: ${{ env.PNPM_VERSION }}
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        timeout-minutes: 10
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Start MongoDB
-        uses: supercharge/mongodb-github-action@1.10.0
-        with:
-          mongodb-version: 6.0
-
-      - name: Pack and build app
-        run: |
-          set -ex
-          pnpm run script:pack --dest templates/blank-3.0
-          cd templates/blank-3.0
-          cp .env.example .env
-          ls -la
-          pnpm add ./*.tgz --ignore-workspace
-          pnpm install --ignore-workspace --no-frozen-lockfile
-          cat package.json
-          pnpm run build
-
-  tests-type-generation:
-    runs-on: ubuntu-latest
-    needs: build
-
-    steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: ${{ env.PNPM_VERSION }}
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        timeout-minutes: 10
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Generate Payload Types
-        run: pnpm dev:generate-types fields
-
-      - name: Generate GraphQL schema file
-        run: pnpm dev:generate-graphql-schema graphql-schema-gen
-
-  templates:
-    needs: changes
-    if: false # Disable until templates are updated for 3.0
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        template: [blank, website, ecommerce]
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 25
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Start MongoDB
-        uses: supercharge/mongodb-github-action@1.10.0
-        with:
-          mongodb-version: 6.0
-
-      - name: Build Template
-        run: |
-          cd templates/${{ matrix.template }}
-          cp .env.example .env
-          yarn install
-          yarn build
-          yarn generate:types
-
-  generated-templates:
-    needs: build
-    if: false # Needs to pull in tgz files from build
-    runs-on: ubuntu-latest
-
-    steps:
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - name: Setup Node@${{ env.NODE_VERSION }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: ${{ env.PNPM_VERSION }}
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        timeout-minutes: 10
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Build all generated templates
-        run: pnpm tsx ./scripts/build-generated-templates.ts
-
-  all-green:
-    name: All Green
-    if: always()
-    runs-on: ubuntu-latest
-    needs:
-      - lint
-      - build
-      - tests-unit
-      - tests-int
-      - tests-e2e
-
-    steps:
-      - if: ${{ always() && (contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled')) }}
-        run: exit 1

.github/workflows/pr-title.yml

@@ -1,119 +0,0 @@
-name: pr-title
-
-on:
-  pull_request:
-    types:
-      - opened
-      - edited
-      - synchronize
-
-permissions:
-  pull-requests: write
-
-jobs:
-  main:
-    name: lint-pr-title
-    runs-on: ubuntu-latest
-    steps:
-      - uses: amannn/action-semantic-pull-request@v5
-        id: lint_pr_title
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          types: |
-            build
-            chore
-            ci
-            docs
-            feat
-            fix
-            perf
-            refactor
-            revert
-            style
-            test
-            types
-          scopes: |
-            cpa
-            db-\*
-            db-mongodb
-            db-postgres
-            db-sqlite
-            email-nodemailer
-            eslint
-            graphql
-            live-preview
-            live-preview-react
-            next
-            payload
-            plugin-cloud
-            plugin-cloud-storage
-            plugin-form-builder
-            plugin-nested-docs
-            plugin-redirects
-            plugin-relationship-object-ids
-            plugin-search
-            plugin-sentry
-            plugin-seo
-            plugin-stripe
-            richtext-\*
-            richtext-lexical
-            richtext-slate
-            storage-\*
-            storage-azure
-            storage-gcs
-            storage-vercel-blob
-            storage-s3
-            translations
-            ui
-            templates
-            examples(\/(\w|-)+)?
-            deps
-
-          # Disallow uppercase letters at the beginning of the subject
-          subjectPattern: ^(?![A-Z]).+$
-          subjectPatternError: |
-            The subject "{subject}" found in the pull request title "{title}"
-            didn't match the configured pattern. Please ensure that the subject
-            doesn't start with an uppercase character.
-
-      - uses: marocchino/sticky-pull-request-comment@v2
-        # When the previous steps fails, the workflow would stop. By adding this
-        # condition you can continue the execution with the populated error message.
-        if: always() && (steps.lint_pr_title.outputs.error_message != null)
-        with:
-          header: pr-title-lint-error
-          message: |
-            Pull Request titles must follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and have valid scopes.
-
-            ${{ steps.lint_pr_title.outputs.error_message }}
-
-            ```
-            feat(ui): add Button component
-            ^    ^    ^
-            |    |    |__ Subject
-            |    |_______ Scope
-            |____________ Type
-            ```
-
-      # Delete a previous comment when the issue has been resolved
-      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
-        uses: marocchino/sticky-pull-request-comment@v2
-        with:
-          header: pr-title-lint-error
-          delete: true
-
-  label-pr-on-open:
-    name: label-pr-on-open
-    runs-on: ubuntu-latest
-    steps:
-      - name: Tag with main branch with v2
-        if: github.event.action == 'opened' && github.event.pull_request.base.ref == 'main'
-        uses: actions-ecosystem/action-add-labels@v1
-        with:
-          labels: v2
-      - name: Tag with beta branch with v3
-        if: github.event.action == 'opened' && github.event.pull_request.base.ref == 'beta'
-        uses: actions-ecosystem/action-add-labels@v1
-        with:
-          labels: v3

.github/workflows/release-canary.yml

@@ -1,36 +0,0 @@
-name: release-canary
-
-on:
-  workflow_dispatch:
-    branches:
-      - beta
-
-env:
-  NODE_VERSION: 18.20.2
-  PNPM_VERSION: 8.15.7
-  DO_NOT_TRACK: 1 # Disable Turbopack telemetry
-  NEXT_TELEMETRY_DISABLED: 1 # Disable Next telemetry
-
-jobs:
-  release:
-    permissions:
-      id-token: write
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          pnpm-version: ${{ env.PNPM_VERSION }}
-      - name: Load npm token
-        run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      - name: Canary release script
-        # dry run hard-coded to true for testing and no npm token provided
-        run: pnpm tsx ./scripts/publish-canary.ts
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-          NPM_CONFIG_PROVENANCE: true

.github/workflows/tests.yml

@@ -0,0 +1,88 @@
+name: build
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+  push:
+    branches: ["master"]
+
+jobs:
+  build_yarn:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: https://registry.npmjs.org
+          scope: "@payloadcms"
+          always-auth: true
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+      - run: yarn
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - run: yarn build
+
+      - name: Component Tests
+        run: yarn test:components
+      - name: Integration Tests
+        run: yarn test:int
+
+      - name: Generate Payload Types
+        run: yarn dev:generate-types fields
+
+      - name: Generate GraphQL schema file
+        run: yarn dev:generate-graphql-schema graphql-schema-gen
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: E2E Tests
+        run: yarn test:e2e --bail
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 30
+
+  install_npm:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: https://registry.npmjs.org
+          scope: "@payloadcms"
+          always-auth: true
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-${{ env.cache-name }}-
+            ${{ runner.os }}-npm-
+            ${{ runner.os }}-
+      - run: npm install
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,39 +1,13 @@
 coverage
 package-lock.json
 dist
-/.idea/*
-!/.idea/runConfigurations
-!/.idea/payload.iml
-
+.idea
 test-results
-.devcontainer
-.localstack
-/migrations
-.localstack
-.turbo
 
-meta_client.json
-meta_server.json
-meta_index.json
-meta_shared.json
-
-.turbo
-
-# Ignore test directory media folder/files
-/media
-test/media
-*payloadtests.db
-*payloadtests.db-journal
-*payloadtests.db-shm
-*payloadtests.db-wal
-/versions
-
-# Created by https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
-# Edit at https://www.toptal.com/developers/gitignore?templates=node,macos,windows,webstorm,sublimetext,visualstudiocode
+# Created by https://www.gitignore.io/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 
 ### macOS ###
-# General
-.DS_Store
+*.DS_Store
 .AppleDouble
 .LSOverride
 
@@ -56,10 +30,6 @@ Network Trash Folder
 Temporary Items
 .apdisk
 
-### macOS Patch ###
-# iCloud generated files
-*.icloud
-
 ### Node ###
 # Logs
 logs
@@ -67,11 +37,6 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 # Runtime data
 pids
@@ -84,12 +49,11 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
-*.lcov
 
 # nyc test coverage
 .nyc_output
 
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
 # Bower dependency directory (https://bower.io/)
@@ -98,18 +62,15 @@ bower_components
 # node-waf configuration
 .lock-wscript
 
-# Compiled binary addons (https://nodejs.org/api/addons.html)
+# Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
 
 # Dependency directories
 node_modules/
 jspm_packages/
 
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
+# Typescript v1 declaration files
+typings/
 
 # Optional npm cache directory
 .npm
@@ -117,15 +78,6 @@ web_modules/
 # Optional eslint cache
 .eslintcache
 
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
 # Optional REPL history
 .node_repl_history
 
@@ -135,87 +87,34 @@ web_modules/
 # Yarn Integrity file
 .yarn-integrity
 
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
+# Yarn Berry
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 .pnp.*
 
-### Node Patch ###
-# Serverless Webpack directories
-.webpack/
+# dotenv environment variables file
+.env
 
-# Optional stylelint cache
-
-# SvelteKit build / generate output
-.svelte-kit
 
 ### SublimeText ###
-# Cache files for Sublime Text
+# cache files for sublime text
 *.tmlanguage.cache
 *.tmPreferences.cache
 *.stTheme.cache
 
-# Workspace files are user-specific
+# workspace files are user-specific
 *.sublime-workspace
 
-# Project files should be checked into the repository, unless a significant
-# proportion of contributors will probably not be using Sublime Text
+# project files should be checked into the repository, unless a significant
+# proportion of contributors will probably not be using SublimeText
 # *.sublime-project
 
-# SFTP configuration file
+# sftp configuration file
 sftp-config.json
-sftp-config-alt*.json
 
 # Package control specific files
 Package Control.last-run
@@ -235,53 +134,84 @@ GitHub.sublime-settings
 
 ### VisualStudioCode ###
 .vscode/*
-!.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
-!.vscode/*.code-snippets
-
-# Local History for Visual Studio Code
-.history/
-
-# Built Visual Studio Code Extensions
-*.vsix
-
-### VisualStudioCode Patch ###
-# Ignore all local history of files
 .history
-.ionide
+
+### WebStorm ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff:
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/dictionaries
+
+# Sensitive or high-churn files:
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.xml
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+
+# Gradle:
+.idea/**/gradle.xml
+.idea/**/libraries
 
 # CMake
-cmake-build-*/
+cmake-build-debug/
 
-# File-based project format
+# MongoDB Explorer plugin:
+.idea/**/mongoSettings.xml
+
+## File-based project format:
 *.iws
 
+## Plugin-specific files:
+
 # IntelliJ
-out/
+/out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
 
 # JIRA plugin
 atlassian-ide-plugin.xml
 
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Ruby plugin and RubyMine
+/.rakeTasks
+
 # Crashlytics plugin (for Android Studio and IntelliJ)
 com_crashlytics_export_strings.xml
 crashlytics.properties
 crashlytics-build.properties
 fabric.properties
 
+### WebStorm Patch ###
+# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
+
+# *.iml
+# modules.xml
+# .idea/misc.xml
+# *.ipr
+
+# Sonarlint plugin
+.idea/sonarlint
+
 ### Windows ###
 # Windows thumbnail cache files
 Thumbs.db
-Thumbs.db:encryptable
 ehthumbs.db
 ehthumbs_vista.db
 
-# Dump file
-*.stackdump
-
 # Folder config file
-[Dd]esktop.ini
+Desktop.ini
 
 # Recycle Bin used on file shares
 $RECYCLE.BIN/
@@ -289,14 +219,26 @@ $RECYCLE.BIN/
 # Windows Installer files
 *.cab
 *.msi
-*.msix
 *.msm
 *.msp
 
 # Windows shortcuts
 *.lnk
 
-# End of https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
+# End of https://www.gitignore.io/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 
-/build
-.swc
+# Ignore all uploads
+demo/upload
+demo/media
+demo/files
+
+# Ignore build folder
+build
+
+# Ignore built components
+components/index.js
+components/styles.css
+
+# Ignore generated
+demo/generated-types.ts
+demo/generated-schema.graphql

.husky/pre-commit

@@ -1 +0,0 @@
-pnpm run lint-staged --quiet

.idea/payload.iml

@@ -1,86 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/payload/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/payload/components" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/payload/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/.swc" />
-      <excludeFolder url="file://$MODULE_DIR$/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/examples" />
-      <excludeFolder url="file://$MODULE_DIR$/media" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/create-payload-app/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/create-payload-app/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/db-mongodb/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/db-mongodb/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/db-postgres/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/db-postgres/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/graphql/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/graphql/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview-react/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview-react/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/next/.swc" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/next/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/payload/fields" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud-storage/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud-storage/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-form-builder/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-nested-docs/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-nested-docs/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-redirects/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-redirects/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-search/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-search/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-sentry/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-seo/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-seo/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-stripe/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/richtext-lexical/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/richtext-lexical/dist" />
-      <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" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/ui/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/drizzle/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/drizzle/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/db-sqlite/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/db-sqlite/dist" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/runConfigurations/Run_Dev_Fields.xml

@@ -1,8 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Run Dev Fields" type="NodeJSConfigurationType" application-parameters="--no-deprecation fields" path-to-js-file="test/dev.js" working-dir="$PROJECT_DIR$">
-    <envs>
-      <env name="NODE_OPTIONS" value="--no-deprecation" />
-    </envs>
-    <method v="2" />
-  </configuration>
-</component>

.idea/runConfigurations/Run_Dev__community.xml

@@ -1,8 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Run Dev _community" type="NodeJSConfigurationType" application-parameters="--no-deprecation _community" path-to-js-file="test/dev.js" working-dir="$PROJECT_DIR$">
-    <envs>
-      <env name="NODE_OPTIONS" value="--no-deprecation" />
-    </envs>
-    <method v="2" />
-  </configuration>
-</component>

.idea/runConfigurations/_template__of_JavaScriptTestRunnerJest.xml

@@ -1,9 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="true" type="JavaScriptTestRunnerJest">
-    <node-interpreter value="project" />
-    <node-options value="--experimental-vm-modules --no-deprecation" />
-    <envs />
-    <scope-kind value="ALL" />
-    <method v="2" />
-  </configuration>
-</component>

.node-version

@@ -1 +1 @@
-v18.20.2
+v16.14.2

.npmrc

@@ -1,2 +0,0 @@
-symlink=true
-node-linker=isolated # due to a typescript bug, isolated mode requires @types/express-serve-static-core, terser and monaco-editor to be installed https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189 along with two other changes in the code which I've marked with (tsbugisolatedmode) in the code

.nvmrc

@@ -1 +1 @@
-v18.20.2
+v16.14.2

.prettierignore

@@ -1,16 +0,0 @@
-.tmp
-**/.git
-**/.hg
-**/.pnp.*
-**/.svn
-**/.yarn/**
-**/build
-**/dist/**
-**/node_modules
-**/temp
-**/docs/**
-tsconfig.json
-packages/payload/*.js
-packages/payload/*.d.ts
-payload-types.ts
-tsconfig.tsbuildinfo

.prettierrc.json

@@ -1,6 +0,0 @@
-{
-  "singleQuote": true,
-  "trailingComma": "all",
-  "printWidth": 100,
-  "semi": false
-}

.release-it.json

@@ -0,0 +1,22 @@
+{
+  "verbose": true,
+  "git": {
+    "commitMessage": "chore(release): v${version}",
+    "requireCleanWorkingDir": true
+  },
+  "github": {
+    "release": true
+  },
+  "npm": {
+    "skipChecks": true
+  },
+  "hooks": {
+    "before:init": ["yarn", "yarn clean", "yarn test"]
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "angular",
+      "infile": "CHANGELOG.md"
+    }
+  }
+}

.release-it.pre.json

@@ -0,0 +1,25 @@
+{
+  "verbose": true,
+  "git": {
+    "requireCleanWorkingDir": false,
+    "commit": false,
+    "push": false,
+    "tag": false
+  },
+  "github": {
+    "release": true
+  },
+  "npm": {
+    "skipChecks": true,
+    "tag": "canary"
+  },
+  "hooks": {
+    "before:init": ["yarn", "yarn clean", "yarn test"]
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "angular",
+      "infile": "CHANGELOG.md"
+    }
+  }
+}

.swcrc

@@ -1,24 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
-  "jsc": {
-    "target": "esnext",
-    "parser": {
-      "syntax": "typescript",
-      "tsx": true,
-      "dts": true
-    },
-    "transform": {
-      "react": {
-        "runtime": "automatic",
-        "pragmaFrag": "React.Fragment",
-        "throwIfNamespace": true,
-        "development": false,
-        "useBuiltins": true
-      }
-    }
-  },
-  "module": {
-    "type": "es6"
-  }
-}

.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "firsttris.vscode-jest-runner",
-    "ms-playwright.playwright"
-  ]
-}

.vscode/launch.json

@@ -1,227 +1,29 @@
 {
   // Use IntelliSense to learn about possible attributes.
   // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
   "configurations": [
     {
-      "command": "pnpm generate:types",
-      "name": "Generate Types CLI",
+      "command": "yarn run dev _community",
+      "name": "Run Dev Community",
       "request": "launch",
       "type": "node-terminal",
       "cwd": "${workspaceFolder}"
     },
     {
-      "command": "node --no-deprecation test/dev.js _community",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Community",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "node --no-deprecation test/dev.js storage-uploadthing",
-      "cwd": "${workspaceFolder}",
-      "name": "Uploadthing",
-      "request": "launch",
-      "type": "node-terminal",
-      "envFile": "${workspaceFolder}/test/storage-uploadthing/.env"
-    },
-    {
-      "command": "node --no-deprecation test/dev.js live-preview",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Live Preview",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "node --no-deprecation test/loader/init.js",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Loader",
-      "request": "launch",
-      "type": "node-terminal",
-      "env": {
-        "LOADER_TEST_FILE_PATH": "./dependency-test.js"
-        // "LOADER_TEST_FILE_PATH": "../fields/config.ts"
-      }
-    },
-    {
-      "command": "node --no-deprecation test/dev.js admin",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Admin",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "node --no-deprecation test/dev.js auth",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Auth",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "pnpm run dev plugin-cloud-storage",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev - plugin-cloud-storage",
-      "request": "launch",
-      "type": "node-terminal",
-      "env": {
-        "PAYLOAD_PUBLIC_CLOUD_STORAGE_ADAPTER": "s3"
-      }
-    },
-    {
-      "command": "node --no-deprecation test/dev.js collections-graphql",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev GraphQL",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "node --no-deprecation test/dev.js fields",
-      "cwd": "${workspaceFolder}",
+      "command": "yarn run dev fields",
       "name": "Run Dev Fields",
       "request": "launch",
-      "type": "node-terminal"
+      "type": "node-terminal",
+      "cwd": "${workspaceFolder}"
     },
     {
-      "command": "node --no-deprecation test/dev.js versions",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Postgres",
+      "command": "yarn run dev versions",
+      "name": "Debug Versions",
       "request": "launch",
       "type": "node-terminal",
-      "env": {
-        "PAYLOAD_DATABASE": "postgres"
-      }
+      "cwd": "${workspaceFolder}"
     },
-    {
-      "command": "node --no-deprecation test/dev.js versions",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Versions",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "node --no-deprecation test/dev.js localization",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Localization",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "node --no-deprecation test/dev.js uploads",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Uploads",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "node --no-deprecation test/dev.js field-error-states",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Field Error States",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "pnpm run test:int live-preview",
-      "cwd": "${workspaceFolder}",
-      "name": "Live Preview Int Tests",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "pnpm run test:int plugin-search",
-      "cwd": "${workspaceFolder}",
-      "name": "Search Plugin Int Tests",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts build",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/fields/config.ts",
-        "PAYLOAD_BUNDLER": "vite",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-      },
-      "name": "Build CLI - Vite",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts build",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/fields/config.ts",
-        "PAYLOAD_ANALYZE_BUNDLE": "true",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-      },
-      "name": "Build CLI - Webpack",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts migrate:status",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/migrations-cli/config.ts",
-        "PAYLOAD_DATABASE": "postgres",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-        // "PAYLOAD_DROP_DATABASE": "true",
-      },
-      "name": "Migrate CLI - status",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts migrate:create yass",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/migrations-cli/config.ts",
-        "PAYLOAD_DATABASE": "postgres",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-        // "PAYLOAD_DROP_DATABASE": "true",
-      },
-      "name": "Migrate CLI - create",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts migrate:down",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/migrations-cli/config.ts",
-        "PAYLOAD_DATABASE": "mongoose",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-        // "PAYLOAD_DROP_DATABASE": "true",
-      },
-      "name": "Migrate CLI - down",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts migrate:reset",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/migrations-cli/config.ts",
-        "PAYLOAD_DATABASE": "mongoose",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-        // "PAYLOAD_DROP_DATABASE": "true",
-      },
-      "name": "Migrate CLI - reset",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts migrate:refresh",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/migrations-cli/config.ts",
-        "PAYLOAD_DATABASE": "mongoose",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-        // "PAYLOAD_DROP_DATABASE": "true",
-      },
-      "name": "Migrate CLI - refresh",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ],
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0"
-}
+  ]
+}

.vscode/settings.json

@@ -1,49 +0,0 @@
-{
-  "npm.packageManager": "pnpm",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  },
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  },
-  "[jsonc]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  },
-  "editor.formatOnSaveMode": "file",
-  // All ESLint rules to 'warn' to differentate from TypeScript's 'error' level
-  "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
-  "typescript.tsdk": "node_modules/typescript/lib",
-  // Load .git-blame-ignore-revs file
-  "gitlens.advanced.blame.customArguments": ["--ignore-revs-file", ".git-blame-ignore-revs"],
-  "[javascript][typescript][typescriptreact]": {
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  },
-  "files.insertFinalNewline": true,
-  "jestrunner.jestCommand": "pnpm exec cross-env NODE_OPTIONS=\"--experimental-vm-modules --no-deprecation\" node 'node_modules/jest/bin/jest.js'",
-  "jestrunner.debugOptions": {
-    "runtimeArgs": ["--experimental-vm-modules", "--no-deprecation"]
-  }
-}

CONTRIBUTING.md

@@ -14,7 +14,7 @@ If you find a vulnerability within the core Payload repository, and we determine
 
 ## Documentation edits
 
-Payload documentation can be found directly within its codebase, and you can feel free to make changes / improvements to any of it through opening a PR. We utilize these files directly in our website and will periodically deploy documentation updates as necessary.
+Payload documentation can be found directly within its codebase and you can feel free to make changes / improvements to any of it through opening a PR. We utilize these files directly in our website and will periodically deploy documentation updates as necessary.
 
 ## Building additional features
 
@@ -30,17 +30,9 @@ Our design review ensures that proposed changes fit seamlessly with other compon
 
 To help us work on new features, you can create a new feature request post in [GitHub Discussion](https://github.com/payloadcms/payload/discussions) or discuss it in our [Discord](https://discord.com/invite/payload). New functionality often has large implications across the entire Payload repo, so it is best to discuss the architecture and approach before starting work on a pull request.
 
-### Installation & Requirements
-
-Payload is structured as a Monorepo, encompassing not only the core Payload platform but also various plugins and packages. To install all required dependencies, you have to run `pnpm install` once in the root directory. **PNPM IS REQUIRED!** Yarn or npm will not work - you will have to use pnpm to develop in the core repository. In most systems, the easiest way to install pnpm is to run `corepack enable` in your terminal.
-
-If you're coming from a very outdated version of payload, it is recommended to nuke the node_modules folder before running pnpm install. On UNIX systems, you can easily do that using the `pnpm clean:unix` command, which will delete all node_modules folders and build artefacts.
-
-It is also recommended to use at least Node v18 or higher. You can check your current node version by typing `node --version` in your terminal. The easiest way to switch between different node versions is to use [nvm](https://github.com/nvm-sh/nvm#intro).
-
 ### Code
 
-Most new functionality should keep testing in mind. All top-level directories within the `test/` directory are for testing a specific category: `fields`, `collections`, etc.
+Most new functionality should keep testing in mind. With 1.0, testability of new features has been vastly improved. All top-level directories within the `test/` directory are for testing a specific category: `fields`, `collections`, etc.
 
 If it makes sense to add your feature to an existing test directory, please do so.
 
@@ -57,35 +49,21 @@ A typical directory with `test/` will be structured like this:
 - `config.ts` - This is the _granular_ Payload config for testing. It should be as lightweight as possible. Reference existing configs for an example
 - `int.spec.ts` - This is the test file run by jest. Any test file must have a `*int.spec.ts` suffix.
 - `e2e.spec.ts` - This is the end-to-end test file that will load up the admin UI using the above config and run Playwright tests. These tests are typically only needed if a large change is being made to the Admin UI.
-- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `pnpm dev:generate-types my-test-dir`. Replace `my-test-dir` with the name of your testing directory.
+- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `yarn dev:generate-types my-test-dir`.
 
-Each test directory is split up in this way specifically to reduce friction when creating tests and to add the ability to boot up Payload with that specific config.
+The directory split up in this way specifically to reduce friction when creating tests and to add the ability to boot up Payload with that specific config.
 
-The following command will start Payload with your config: `pnpm dev my-test-dir`. Example: `pnpm dev fields` for the test/`fields` test suite. This command will start up Payload using your config and refresh a test database on every restart. If you're using VS Code, the most common run configs are automatically added to your editor - you should be able to find them in your VS Code launch tab.
+The following command will start Payload with your config: `yarn dev my-test-dir`. This command will start up Payload using your config and refresh a test database on every restart.
 
-By default, payload will [automatically log you in](https://payloadcms.com/docs/authentication/overview#admin-autologin) with the default credentials. To disable that, you can either pass in the --no-auto-login flag (example: `pnpm dev my-test-dir --no-auto-login`) or set the `PAYLOAD_PUBLIC_DISABLE_AUTO_LOGIN` environment variable to `false`.
+By default, it will automatically log you in with the default credentials. To disable that, you can either pass in the --no-auto-login flag (example: `yarn dev my-test-dir --no-auto-login`) or set the `PAYLOAD_PUBLIC_DISABLE_AUTO_LOGIN` environment variable to `false`.
 
-The default credentials are `dev@payloadcms.com` as E-Mail and `test` as password. These are used in the auto-login.
-
-### Testing with your own MongoDB database
-
-If you wish to use your own MongoDB database for the `test` directory instead of using the in memory database, all you need to do is add the following env vars to the `test/dev.ts` file:
+If you wish to use to your own Mongo database for the `test` directory instead of using the in memory database, all you need to do is add the following env vars to the `test/dev.ts` file:
 
 - `process.env.NODE_ENV`
 - `process.env.PAYLOAD_TEST_MONGO_URL`
-- Simply set `process.env.NODE_ENV` to `test` and set `process.env.PAYLOAD_TEST_MONGO_URL` to your MongoDB URL e.g. `mongodb://127.0.0.1/your-test-db`.
+- Simply set `process.env.NODE_ENV` to `test` and set `process.env.PAYLOAD_TEST_MONGO_URL` to your mongo url e.g. `mongodb://127.0.0.1/your-test-db`.
 
-### Using Postgres
-
-If you have postgres installed on your system, you can also run the test suites using postgres. By default, mongodb is used.
-
-To do that, simply set the `PAYLOAD_DATABASE` environment variable to `postgres`.
-
-### Running the e2e and int tests
-
-You can run the entire test suite using `pnpm test`. If you wish to only run e2e tests, you can use `pnpm test:e2e`. If you wish to only run int tests, you can use `pnpm test:int`.
-
-By default, `pnpm test:int` will only run int test against MongoDB. To run int tests against postgres, you can use `pnpm test:int:postgres`. You will have to have postgres installed on your system for this to work.
+NOTE: It is recommended to add the test credentials (located in `test/credentials.ts`) to your autofill for `localhost:3000/admin` as this will be required on every nodemon restart. The default credentials are `dev@payloadcms.com` as E-Mail and `test` as password.
 
 ### Commits
 
@@ -111,14 +89,3 @@ If you are committing to [templates](./templates) or [examples](./examples), use
 ## Pull Requests
 
 For all Pull Requests, you should be extremely descriptive about both your problem and proposed solution. If there are any affected open or closed issues, please leave the issue number in your PR message.
-
-## Previewing docs
-
-This is how you can preview changes you made locally to the docs:
-
-1. Clone our [website repository](https://github.com/payloadcms/website)
-2. Run `yarn install`
-3. Duplicate the `.env.example` file and rename it to `.env`
-4. Add a `DOCS_DIR` environment variable to the `.env` file which points to the absolute path of your modified docs folder. For example `DOCS_DIR=/Users/yourname/Documents/GitHub/payload/docs`
-5. Run `yarn run fetchDocs:local`. If this was successful, you should see no error messages and the following output: _Docs successfully written to /.../website/src/app/docs.json_. There could be error messages if you have incorrect markdown in your local docs folder. In this case, it will tell you how you can fix it
-6. You're done! Now you can start the website locally using `yarn run dev` and preview the docs under [http://localhost:3000/docs/](http://localhost:3000/docs/)

ISSUE_GUIDE.md

@@ -6,10 +6,9 @@ To report an issue, please follow the steps below:
 2. Add necessary collections/globals/fields to the `test/_community` directory to recreate the issue you are experiencing
 3. Create an issue and add a link to your forked repo
 
-**The goal is to isolate the problem by reducing the number of fields/collections you add to the test/\_community folder. This folder is not meant for you to copy your project into, but to recreate the issue you are experiencing with minimal config.**
+**The goal is to isolate the problem by reducing the number of fields/collections you add to the test/_community folder. This folder is not meant for you to copy your project into, but to recreate the issue you are experiencing with minimal config.**
 
 ## Test directory file tree explanation
-
 ```text
 .
 ├── config.ts
@@ -21,49 +20,45 @@ To report an issue, please follow the steps below:
 - `config.ts` - This is the _granular_ Payload config for testing. It should be as lightweight as possible. Reference existing configs for an example
 - `int.spec.ts` [Optional] - This is the test file run by jest. Any test file must have a `*int.spec.ts` suffix.
 - `e2e.spec.ts` [Optional] - This is the end-to-end test file that will load up the admin UI using the above config and run Playwright tests.
-- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `pnpm dev:generate-types _community`.
+- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `yarn dev:generate-types _community`.
 
 The directory split up in this way specifically to reduce friction when creating tests and to add the ability to boot up Payload with that specific config. You should modify the files in `test/_community` to get started.
 
 ## How to start test collection admin UI
-
 To start the admin panel so you can manually recreate your issue, you can run the following command:
 
-```bash
-# This command will start up Payload using your config
-# NOTE: it will wipe the test database on restart
-pnpm dev _community
-```
+  ```bash
+  # This command will start up Payload using your config
+  # NOTE: it will wipe the test database on restart
+  yarn dev _community
+  ```
+
 
 ## Testing is optional but encouraged
-
 An issue does not need to have failing tests — reproduction steps with your forked repo are enough at this point. Some people like to dive deeper and we want to give you the guidance/tools to do so. Read more below.
 
 ### How to run integration tests (Payload API tests)
-
 There are a couple ways to do this:
 
 - **Granularly** - you can run individual tests in vscode by installing the Jest Runner plugin and using that to run individual tests. Clicking the `debug` button will run the test in debug mode allowing you to set break points.
 
-  <img src="https://raw.githubusercontent.com/payloadcms/payload/main/src/admin/assets/images/github/int-debug.png" />
+  <img src="https://raw.githubusercontent.com/payloadcms/payload/master/src/admin/assets/images/github/int-debug.png" />
 
 - **Manually** - you can run all int tests in the `/test/_community/int.spec.ts` file by running the following command:
 
   ```bash
-  pnpm test:int _community
+  yarn test:int _community
   ```
 
 ### How to run E2E tests (Admin Panel UI tests)
-
 The easiest way to run E2E tests is to install
-
 - [Playwright Test for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright)
 - [Playwright Runner](https://marketplace.visualstudio.com/items?itemName=ortoni.ortoni)
 
 Once they are installed you can open the `testing` tab in vscode sidebar and drill down to the test you want to run, i.e. `/test/_community/e2e.spec.ts`
 
-<img src="https://raw.githubusercontent.com/payloadcms/payload/main/src/admin/assets/images/github/e2e-debug.png" />
+<img src="https://raw.githubusercontent.com/payloadcms/payload/master/src/admin/assets/images/github/e2e-debug.png" />
+
 
 #### Notes
-
 - It is recommended to add the test credentials (located in `test/credentials.ts`) to your autofill for `localhost:3000/admin` as this will be required on every nodemon restart. The default credentials are `dev@payloadcms.com` as email and `test` as password.

README.md

@@ -1,24 +1,30 @@
-<a href="https://payloadcms.com"><img width="100%" src="https://github.com/payloadcms/payload/blob/main/packages/payload/src/admin/assets/images/github-banner-alt.jpg?raw=true" alt="Payload headless CMS Admin panel built with React" /></a>
+<a href="https://payloadcms.com">
+  <img width="100%" src="src/admin/assets/images/github-banner-alt.jpg" alt="Payload headless CMS Admin panel built with React" />
+</a>
 <br />
 <br />
 <p align="left">
-  <a href="https://github.com/payloadcms/payload/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/payloadcms/payload/main.yml?style=flat-square"></a>
+  <a href="https://github.com/payloadcms/payload/actions">
+    <img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/payloadcms/payload/tests.yml?style=flat-square">
+  </a>
   &nbsp;
-  <a href="https://discord.gg/payload"><img alt="Discord" src="https://img.shields.io/discord/967097582721572934?label=Discord&color=7289da&style=flat-square" /></a>
+  <a href="https://discord.gg/payload">
+    <img alt="Discord" src="https://img.shields.io/discord/967097582721572934?label=Discord&color=7289da&style=flat-square" />
+  </a>
   &nbsp;
-  <a href="https://www.npmjs.com/package/payload"><img alt="npm" src="https://img.shields.io/npm/v/payload?style=flat-square" /></a>
+  <a href="https://www.npmjs.com/package/payload">
+    <img alt="npm" src="https://img.shields.io/npm/v/payload?style=flat-square" />
+  </a>
   &nbsp;
-  <a href="https://twitter.com/payloadcms"><img src="https://img.shields.io/badge/follow-payloadcms-1DA1F2?logo=twitter&style=flat-square" alt="Payload Twitter" /></a>
+  <a href="https://twitter.com/payloadcms">
+    <img src="https://img.shields.io/badge/follow-payloadcms-1DA1F2?logo=twitter&style=flat-square" alt="Payload Twitter" />
+  </a>
 </p>
 <hr/>
 <h4>
 <a target="_blank" href="https://payloadcms.com/docs/getting-started/what-is-payload" rel="dofollow"><strong>Explore the Docs</strong></a>&nbsp;·&nbsp;<a target="_blank" href="https://payloadcms.com/community-help" rel="dofollow"><strong>Community Help</strong></a>&nbsp;·&nbsp;<a target="_blank" href="https://demo.payloadcms.com/" rel="dofollow"><strong>Try Live Demo</strong></a>&nbsp;·&nbsp;<a target="_blank" href="https://github.com/payloadcms/payload/discussions/1539" rel="dofollow"><strong>Roadmap</strong></a>&nbsp;·&nbsp;<a target="_blank" href="https://www.g2.com/products/payload-cms/reviews#reviews" rel="dofollow"><strong>View G2 Reviews</strong></a>
 </h4>
 <hr/>
-
-> [!IMPORTANT]
-> 🎉 <strong>Payload 2.0 is now available!</strong> Read more in the <a target="_blank" href="https://payloadcms.com/blog/payload-2-0" rel="dofollow"><strong>announcement post</strong></a>.
-
 <h3>Benefits over a regular CMS</h3>
 <ul>
   <li>Don’t hit some third-party SaaS API, hit your own API</li>
@@ -33,7 +39,6 @@
 </ul>
 
 ## ☁️ Deploy instantly with Payload Cloud.
-
 Create a cloud account, connect your GitHub, and [deploy in minutes](https://payloadcms.com/new).
 
 ## 🚀 Get started by self-hosting completely free, forever.
@@ -41,27 +46,18 @@ Create a cloud account, connect your GitHub, and [deploy in minutes](https://pay
 Before beginning to work with Payload, make sure you have all of the [required software](https://payloadcms.com/docs/getting-started/installation).
 
 ```text
-npx create-payload-app@latest
+npx create-payload-app
 ```
 
 Alternatively, it only takes about five minutes to [create an app from scratch](https://payloadcms.com/docs/getting-started/installation#from-scratch).
 
 ## 🖱️ One-click templates
+### 🛒 [E-Commerce](https://github.com/payloadcms/payload/tree/master/templates/ecommerce)
+Eliminate the need to combine Shopify and a CMS, and instead do it all with Payload + Stripe. Best of all, you can extend it as much as you need.
 
-Jumpstart your next project by starting with a pre-made template. These are production-ready, end-to-end solutions designed to get you to market as fast as possible.
+[All Official Templates](https://github.com/orgs/payloadcms/repositories?q=topic%3Apayload-template)&nbsp;·&nbsp;[Community Templates](https://github.com/topics/payload-template)
 
-### [🛒 E-Commerce](https://github.com/payloadcms/payload/tree/main/templates/ecommerce)
-
-Eliminate the need to combine Shopify and a CMS, and instead do it all with Payload + Stripe. Comes with a beautiful, fully functional front-end complete with shopping cart, checkout, orders, and much more.
-
-### [🌐 Website](https://github.com/payloadcms/payload/tree/main/templates/website)
-
-Build any kind of website, blog, or portfolio from small to enterprise. Comes with a beautiful, fully functional front-end complete with posts, projects, comments, and much more.
-
-We're constantly adding more templates to our [Templates Directory](https://github.com/payloadcms/payload/tree/main/templates). If you maintain your own template, consider adding the `payload-template` topic to your GitHub repository for others to find.
-
-- [Official Templates](https://github.com/payloadcms/payload/tree/main/templates)
-- [Community Templates](https://github.com/topics/payload-template)
+**If you maintain your own template, consider adding the `payload-template` topic to your GitHub repository for others to find.**
 
 ## ✨ Features
 
@@ -89,19 +85,15 @@ We're constantly adding more templates to our [Templates Directory](https://gith
 
 Check out the [Payload website](https://payloadcms.com/docs/getting-started/what-is-payload) to find in-depth documentation for everything that Payload offers.
 
-Migrating from v1 to v2? Check out the [2.0 Release Notes](https://github.com/payloadcms/payload/releases/tag/v2.0.0) on how to do it.
-
 ## 🙋 Contributing
 
-If you want to add contributions to this repository, please follow the instructions in [contributing.md](./CONTRIBUTING.md).
+If you want to add contributions to this repository, please follow the instructions in [contributing.md](./contributing.md).
 
 ## 📚 Examples
 
-The [Examples Directory](./examples) is a great resource for learning how to setup Payload in a variety of different ways, but you can also find great examples in our blog and throughout our social media.
+The examples directory is a great resource for learning how to setup Payload in a variety of different ways.
 
-- [Examples Directory](./examples)
-- [Payload Blog](https://payloadcms.com/blog)
-- [Payload YouTube](https://www.youtube.com/@payloadcms)
+[Examples Directory](./examples)
 
 ## 🔌 Plugins
 

app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -1,22 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-import type { Metadata } from 'next'
-
-import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
-
-type Args = {
-  params: {
-    segments: string[]
-  }
-  searchParams: {
-    [key: string]: string | string[]
-  }
-}
-
-export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
-  generatePageMetadata({ config, params, searchParams })
-
-const NotFound = ({ params, searchParams }: Args) => NotFoundPage({ config, params, searchParams })
-
-export default NotFound

app/(payload)/admin/[[...segments]]/page.tsx

@@ -1,22 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-import type { Metadata } from 'next'
-
-import config from '@payload-config'
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
-
-type Args = {
-  params: {
-    segments: string[]
-  }
-  searchParams: {
-    [key: string]: string | string[]
-  }
-}
-
-export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
-  generatePageMetadata({ config, params, searchParams })
-
-const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
-
-export default Page

app/(payload)/api/[...slug]/route.ts

@@ -1,10 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
-import config from '@payload-config'
-import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
-
-export const GET = REST_GET(config)
-export const POST = REST_POST(config)
-export const DELETE = REST_DELETE(config)
-export const PATCH = REST_PATCH(config)
-export const OPTIONS = REST_OPTIONS(config)

app/(payload)/api/graphql-playground/route.ts

@@ -1,6 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
-import config from '@payload-config'
-import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
-
-export const GET = GRAPHQL_PLAYGROUND_GET(config)

app/(payload)/api/graphql/route.ts

@@ -1,6 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-/* DO NOT MODIFY it because it could be re-written at any time. */
-import config from '@payload-config'
-import { GRAPHQL_POST } from '@payloadcms/next/routes'
-
-export const POST = GRAPHQL_POST(config)

app/(payload)/custom.scss

@@ -1,8 +0,0 @@
-#custom-css {
-  font-family: monospace;
-  background-image: url('/placeholder.png');
-}
-
-#custom-css::after {
-  content: 'custom-css';
-}

app/(payload)/layout.tsx

@@ -1,16 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-import configPromise from '@payload-config'
-import { RootLayout } from '@payloadcms/next/layouts'
-// import '@payloadcms/ui/styles.css' // Uncomment this line if `@payloadcms/ui` in `tsconfig.json` points to `/ui/dist` instead of `/ui/src`
-/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
-import React from 'react'
-
-import './custom.scss'
-
-type Args = {
-  children: React.ReactNode
-}
-
-const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
-
-export default Layout

app/my-route/route.ts

@@ -1,5 +0,0 @@
-export const GET = () => {
-  return Response.json({
-    hello: 'elliot',
-  })
-}

auth.d.ts

@@ -0,0 +1 @@
+export * from './dist/auth';

auth.js

@@ -0,0 +1 @@
+module.exports = require('./dist/auth');

bin.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require('./dist/bin');

components/elements.js

@@ -0,0 +1,5 @@
+exports.Button = require('../dist/admin/components/elements/Button').default;
+exports.Card = require('../dist/admin/components/elements/Card').default;
+exports.Eyebrow = require('../dist/admin/components/elements/Eyebrow').default;
+exports.Nav = require('../dist/admin/components/elements/Nav').default;
+exports.Gutter = require('../dist/admin/components/elements/Gutter').Gutter;

components/elements.ts

@@ -0,0 +1,5 @@
+export { default as Button } from '../dist/admin/components/elements/Button';
+export { default as Card } from '../dist/admin/components/elements/Card';
+export { default as Eyebrow } from '../dist/admin/components/elements/Eyebrow';
+export { default as Nav } from '../dist/admin/components/elements/Nav';
+export { Gutter } from '../dist/admin/components/elements/Gutter';

components/fields/Array.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Array/types';

components/fields/Blocks.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Blocks/types';

components/fields/Cell.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/views/collections/List/Cell/types';

components/fields/Checkbox.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Checkbox/types';

components/fields/Code.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Code/types';

components/fields/DateTime.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/DateTime/types';

components/fields/Email.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Email/types';

components/fields/Group.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Group/types';

components/fields/Json.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/JSON/types';

components/fields/Number.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Number/types';

components/fields/Password.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Password/types';

components/fields/RadioGroup/RadioInput.ts

@@ -0,0 +1 @@
+export type { Props } from '../../../dist/admin/components/forms/field-types/RadioGroup/RadioInput/types';

components/fields/RadioGroup/index.ts

@@ -0,0 +1 @@
+export type { Props } from '../../../dist/admin/components/forms/field-types/RadioGroup/types';

components/fields/Relationship.ts

@@ -0,0 +1 @@
+export type { Props, Option, ValueWithRelation } from '../../dist/admin/components/forms/field-types/Relationship/types';

components/fields/RichText.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/RichText/types';

components/fields/Row.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Row/types';

components/fields/Select.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Select/types';

components/fields/Text.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Text/types';

components/fields/Textarea.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Textarea/types';

components/fields/Upload.ts

@@ -0,0 +1 @@
+export type { Props } from '../../dist/admin/components/forms/field-types/Upload/types';

components/forms.js

@@ -0,0 +1,42 @@
+exports.useForm = require('../dist/admin/components/forms/Form/context').useForm;
+
+/**
+ * @deprecated useWatchForm is no longer preferred. If you need all form fields, prefer `useAllFormFields`.
+ */
+exports.useWatchForm = require('../dist/admin/components/forms/Form/context').useWatchForm;
+
+exports.useFormFields = require('../dist/admin/components/forms/Form/context').useFormFields;
+
+exports.useAllFormFields = require('../dist/admin/components/forms/Form/context').useAllFormFields;
+
+exports.useFormSubmitted = require('../dist/admin/components/forms/Form/context').useFormSubmitted;
+
+exports.useFormProcessing = require('../dist/admin/components/forms/Form/context').useFormProcessing;
+
+exports.useFormModified = require('../dist/admin/components/forms/Form/context').useFormModified;
+
+exports.useField = require('../dist/admin/components/forms/useField').default;
+
+/**
+ * @deprecated This method is now called useField. The useFieldType alias will be removed in an upcoming version.
+ */
+exports.useFieldType = require('../dist/admin/components/forms/useField').default;
+
+exports.Form = require('../dist/admin/components/forms/Form').default;
+
+exports.Text = require('../dist/admin/components/forms/field-types/Text').default;
+exports.TextInput = require('../dist/admin/components/forms/field-types/Text/Input').default;
+
+exports.Group = require('../dist/admin/components/forms/field-types/Group').default;
+
+exports.Select = require('../dist/admin/components/forms/field-types/Select').default;
+exports.SelectInput = require('../dist/admin/components/forms/field-types/Select/Input').default;
+
+exports.Checkbox = require('../dist/admin/components/forms/field-types/Checkbox').default;
+exports.Submit = require('../dist/admin/components/forms/Submit').default;
+exports.Label = require('../dist/admin/components/forms/Label').default;
+
+exports.reduceFieldsToValues = require('../dist/admin/components/forms/Form/reduceFieldsToValues').default;
+exports.getSiblingData = require('../dist/admin/components/forms/Form/getSiblingData').default;
+
+exports.withCondition = require('../dist/admin/components/forms/withCondition').default;

components/forms.ts

@@ -0,0 +1,38 @@
+export {
+  useForm,
+  /**
+   * @deprecated useWatchForm is no longer preferred. If you need all form fields, prefer `useAllFormFields`.
+   */
+  useWatchForm,
+  useFormFields,
+  useAllFormFields,
+  useFormSubmitted,
+  useFormProcessing,
+  useFormModified,
+} from '../dist/admin/components/forms/Form/context';
+
+export { default as useField } from '../dist/admin/components/forms/useField';
+
+/**
+ * @deprecated This method is now called useField. The useFieldType alias will be removed in an upcoming version.
+ */
+export { default as useFieldType } from '../dist/admin/components/forms/useField';
+
+export { default as Form } from '../dist/admin/components/forms/Form';
+
+export { default as Text } from '../dist/admin/components/forms/field-types/Text';
+export { default as TextInput } from '../dist/admin/components/forms/field-types/Text/Input';
+
+export { default as Group } from '../dist/admin/components/forms/field-types/Group';
+
+export { default as Select } from '../dist/admin/components/forms/field-types/Select';
+export { default as SelectInput } from '../dist/admin/components/forms/field-types/Select/Input';
+
+export { default as Checkbox } from '../dist/admin/components/forms/field-types/Checkbox';
+export { default as Submit } from '../dist/admin/components/forms/Submit';
+export { default as Label } from '../dist/admin/components/forms/Label';
+
+export { default as reduceFieldsToValues } from '../dist/admin/components/forms/Form/reduceFieldsToValues';
+export { default as getSiblingData } from '../dist/admin/components/forms/Form/getSiblingData';
+
+export { default as withCondition } from '../dist/admin/components/forms/withCondition';

components/hooks.js

@@ -0,0 +1 @@
+exports.useStepNav = require('../dist/admin/components/elements/StepNav').useStepNav;

components/hooks.ts

@@ -0,0 +1 @@
+export { useStepNav } from '../dist/admin/components/elements/StepNav';

components/icons.js

@@ -0,0 +1,2 @@
+exports.Chevron = require('../dist/admin/components/icons/Chevron').default;
+exports.X = require('../dist/admin/components/icons/X').default;

components/icons.ts

@@ -0,0 +1,2 @@
+export { default as Chevron } from '../dist/admin/components/icons/Chevron';
+export { default as X } from '../dist/admin/components/icons/X';

components/index.ts

@@ -0,0 +1 @@
+export * from '../dist/admin/components';

components/preferences.js

@@ -0,0 +1 @@
+exports.usePreferences = require('../dist/admin/components/utilities/Preferences').usePreferences;

components/preferences.ts

@@ -0,0 +1 @@
+export { usePreferences } from '../dist/admin/components/utilities/Preferences';

components/rich-text.js

@@ -0,0 +1,3 @@
+exports.LeafButton = require('../dist/admin/components/forms/field-types/RichText/leaves/Button').default;
+exports.ElementButton = require('../dist/admin/components/forms/field-types/RichText/elements/Button').default;
+exports.toggleElement = require('../dist/admin/components/forms/field-types/RichText/elements/toggle').default;

components/rich-text.ts

@@ -0,0 +1,3 @@
+export { default as LeafButton } from '../dist/admin/components/forms/field-types/RichText/leaves/Button';
+export { default as ElementButton } from '../dist/admin/components/forms/field-types/RichText/elements/Button';
+export { default as toggleElement } from '../dist/admin/components/forms/field-types/RichText/elements/toggle';

components/templates.js

@@ -0,0 +1,2 @@
+exports.DefaultTemplate = require('../dist/admin/components/templates/Default').default;
+exports.MinimalTemplate = require('../dist/admin/components/templates/Minimal').default;

components/templates.ts

@@ -0,0 +1,2 @@
+export { default as DefaultTemplate } from '../dist/admin/components/templates/Default';
+export { default as MinimalTemplate } from '../dist/admin/components/templates/Minimal';

components/utilities.js

@@ -0,0 +1,7 @@
+exports.Meta = require('../dist/admin/components/utilities/Meta').default;
+exports.useLocale = require('../dist/admin/components/utilities/Locale').useLocale;
+exports.useDocumentInfo = require('../dist/admin/components/utilities/DocumentInfo').useDocumentInfo;
+exports.useConfig = require('../dist/admin/components/utilities/Config').useConfig;
+exports.useAuth = require('../dist/admin/components/utilities/Auth').useAuth;
+exports.useEditDepth = require('../dist/admin/components/utilities/EditDepth').useEditDepth;
+exports.useTheme = require('../dist/admin/components/utilities/Theme').useTheme;

components/utilities.ts

@@ -0,0 +1,6 @@
+export { default as Meta } from '../dist/admin/components/utilities/Meta';
+export { useLocale } from '../dist/admin/components/utilities/Locale';
+export { useDocumentInfo } from '../dist/admin/components/utilities/DocumentInfo';
+export { useConfig } from '../dist/admin/components/utilities/Config';
+export { useAuth } from '../dist/admin/components/utilities/Auth';
+export { useEditDepth } from '../dist/admin/components/utilities/EditDepth';

components/views/Cell.js

@@ -0,0 +1 @@
+exports.Cell = require('../../dist/admin/components/views/collections/List/Cell').default;

components/views/Cell.ts

@@ -0,0 +1,2 @@
+export { default as Cell } from '../../dist/admin/components/views/collections/List/Cell';
+export type { Props } from '../../dist/admin/components/views/collections/List/Cell/types';

components/views/Dashboard.js

@@ -0,0 +1 @@
+exports.Dashboard = required('../../dist/admin/components/views/Dashboard/Default').default;

components/views/Dashboard.ts

@@ -0,0 +1,3 @@
+export { default as Dashboard } from '../../dist/admin/components/views/Dashboard/Default';
+
+export type { Props } from '../../dist/admin/components/views/Dashboard/types';

components/views/Edit.js

@@ -0,0 +1 @@
+exports.Edit = require('../../dist/admin/components/views/collections/Edit/Default').default;

components/views/Edit.ts

@@ -0,0 +1,2 @@
+export { default as Edit } from '../../dist/admin/components/views/collections/Edit/Default';
+export type { Props } from '../../dist/admin/components/views/collections/Edit/types';

components/views/List.js

@@ -0,0 +1 @@
+exports.List = require('../../dist/admin/components/views/collections/List/Default').default;

components/views/List.ts

@@ -0,0 +1,2 @@
+export { default as List } from '../../dist/admin/components/views/collections/List/Default';
+export type { Props } from '../../dist/admin/components/views/collections/List/types';

config.d.ts

@@ -0,0 +1,2 @@
+export { buildConfig } from './dist/config/build';
+export * from './dist/config/types';

config.js

@@ -0,0 +1 @@
+exports.buildConfig = require('./dist/config/build').buildConfig;

docs/access-control/collections.mdx

@@ -3,240 +3,154 @@ title: Collection Access Control
 label: Collections
 order: 20
 desc: With Collection-level Access Control you can define which users can create, read, update or delete Collections.
-keywords: collections, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
+keywords: collections, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
-Collection Access Control is [Access Control](../access-control) used to restrict access to Documents within a [Collection](../collections/overview), as well as what they can and cannot see within the [Admin Panel](../admin/overview) as it relates to that Collection.
+You can define Collection-level Access Control within each Collection's `access` property. All Access Control functions accept one `args` argument.
 
-To add Access Control to a Collection, use the `access` property in your [Collection Config](../configuration/collections):
+## Available Controls
 
+| Function                 | Allows/Denies Access |
+| ------------------------ | -------------------- |
+| **[`create`](#create)**  | Used in the `create` operation |
+| **[`read`](#read)**      | Used in the `find` and `findByID` operations |
+| **[`update`](#update)**  | Used in the `update` operation |
+| **[`delete`](#delete)**  | Used in the `delete` operation |
+
+#### Auth-enabled Controls
+
+If a Collection supports [`Authentication`](/docs/authentication/overview), the following Access Controls become available:
+
+| Function                | Allows/Denies Access |
+| ----------------------- | -------------------- |
+| **[`admin`](#admin)**   | Used to restrict access to the Payload Admin panel |
+| **[`unlock`](#unlock)** | Used to restrict which users can access the `unlock` operation |
+
+**Example Collection config:**
 ```ts
-import type { CollectionConfig } from 'payload';
+import { CollectionConfig } from 'payload/types';
 
-export const CollectionWithAccessControl: CollectionConfig = {
-  // ...
-  access: { // highlight-line
-    // ...
-  },
-}
-```
-
-## Config Options
-
-Access Control is specific to the operation of the request.
-
-To add Access Control to a Collection, use the `access` property in your [Collection Config](../configuration/collections):
-
-```ts
-import type { CollectionConfig } from 'payload';
-
-export const CollectionWithAccessControl: CollectionConfig = {
-  // ...
+export const Posts: CollectionConfig = {
+  slug: "posts",
   // highlight-start
   access: {
-    create: () => {...},
-    read: () => {...},
-    update: () => {...},
-    delete: () => {...},
-
-    // Auth-enabled Collections only
-    admin: () => {...},
-    unlock: () => {...},
-
-    // Version-enabled Collections only
-    readVersions: () => {...},
+    create: ({ req: { user } }) => { ... },
+    read: ({ req: { user } }) => { ... },
+    update: ({ req: { user } }) => { ... },
+    delete: ({ req: { user } }) => { ... },
+    admin: ({ req: { user } }) => { ... },
   },
   // highlight-end
-}
+};
 ```
 
-The following options are available:
-
-| Function                | Allows/Denies Access                         |
-| ----------------------- | -------------------------------------------- |
-| **`create`** | Used in the `create` operation. [More details](#create). |
-| **`read`**     | Used in the `find` and `findByID` operations. [More details](#read). |
-| **`update`** | Used in the `update` operation. [More details](#update). |
-| **`delete`** | Used in the `delete` operation. [More details](#delete). |
-
-If a Collection supports [`Authentication`](../authentication/overview), the following additional options are available:
-
-| Function                | Allows/Denies Access                                           |
-| ----------------------- | -------------------------------------------------------------- |
-| **`admin`**   | Used to restrict access to the [Admin Panel](../admin/overview). [More details](#admin). |
-| **`unlock`** | Used to restrict which users can access the `unlock` operation. [More details](#unlock). |
-
-If a Collection supports [Versions](../versions/overview), the following additional options are available:
-
-| Function           | Allows/Denies Access                                                                                                   |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------- |
-| **`readVersions`** | Used to control who can read versions, and who can't. Will automatically restrict the Admin UI version viewing access. [More details](#read-versions). |
-
 ### Create
 
 Returns a boolean which allows/denies access to the `create` request.
 
-To add create Access Control to a Collection, use the `create` property in the [Collection Config](../collections/overview):
+**Available argument properties:**
+
+| Option     | Description |
+| ---------- | ----------- |
+| **`req`**  | The Express `request` object containing the currently authenticated `user` |
+| **`data`** | The data passed to create the document with. |
+
+**Example:**
 
 ```ts
-import { CollectionConfig } from 'payload'
-
-export const CollectionWithCreateAccess: CollectionConfig = {
-  // ...
+const PublicUsers = {
+  slug: 'public-users',
   access: {
     // highlight-start
-    create: ({ req: { user }, data }) => {
-      return Boolean(user)
-    },
+    // allow guest users to self-registration
+    create: () => true,
     // highlight-end
+    ...
   },
+  fields: [ ... ],
 }
 ```
 
-The following arguments are provided to the `create` function:
-
-| Option     | Description                                                                                                                  |
-| ---------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| **`req`**  | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user`. |
-| **`data`** | The data passed to create the document with.                                                                                 |
-
 ### Read
 
-Returns a boolean which allows/denies access to the `read` request.
+Read access functions can return a boolean result or optionally return a [query constraint](/docs/queries/overview) which limits the documents that are returned to only those that match the constraint you provide. This can be helpful to restrict users' access to only certain documents however you specify.
 
-To add read Access Control to a Collection, use the `read` property in the [Collection Config](../collections/overview):
+**Available argument properties:**
+
+| Option    | Description |
+| --------- | ----------- |
+| **`req`** | The Express `request` object containing the currently authenticated `user` |
+| **`id`**  | `id` of document requested, if within `findByID` |
+
+**Example:**
 
 ```ts
-import type { CollectionConfig } from 'payload'
+import { Access } from 'payload/config';
 
-export const CollectionWithReadAccess: CollectionConfig = {
-  // ...
-  access: {
-    // highlight-start
-    read: ({ req: { user } }) => {
-      return Boolean(user)
-    },
-    // highlight-end
-  },
-}
-```
-
-<Banner type="success">
-  <strong>Tip:</strong>
-  Return a [Query](../queries/overview) to limit the Documents to only those that match the constraint. This can be helpful to restrict users' access to specific Documents. [More details](../queries/overview).
-</Banner>
-
-As your application becomes more complex, you may want to define your function in a separate file and import them into your Collection Config:
-
-```ts
-import type { Access } from 'payload'
-
-export const canReadPage: Access = ({ req: { user } }) => {
-  // Allow authenticated users
+const canReadPage: Access = ({ req: { user } }) => {
+  // allow authenticated users
   if (user) {
-    return true
+    return true;
   }
-
-  // By returning a Query, guest users can read public Documents
-  // Note: this assumes you have a `isPublic` checkbox field on your Collection
+  // using a query constraint, guest users can access when a field named 'isPublic' is set to true
   return {
+    // assumes we have a checkbox field named 'isPublic'
     isPublic: {
       equals: true,
     },
   }
-}
+};
 ```
 
-The following arguments are provided to the `read` function:
-
-| Option    | Description                                                                |
-| --------- | -------------------------------------------------------------------------- |
-| **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user`. |
-| **`id`**  | `id` of document requested, if within `findByID`.                           |
-
 ### Update
 
-Returns a boolean which allows/denies access to the `update` request.
+Update access functions can return a boolean result or optionally return a [query constraint](/docs/queries/overview) to limit the document(s) that can be updated by the currently authenticated user. For example, returning a `query` from the `update` Access Control is helpful in cases where you would like to restrict a user to only being able to update the documents containing a `createdBy` relationship field equal to the user's ID.
 
-To add update Access Control to a Collection, use the `update` property in the [Collection Config](../collections/overview):
+**Available argument properties:**
+
+| Option     | Description |
+| ---------- | ----------- |
+| **`req`**  | The Express `request` object containing the currently authenticated `user` |
+| **`id`**   | `id` of document requested to update |
+| **`data`** | The data passed to update the document with |
+
+**Example:**
 
 ```ts
-import type { CollectionConfig } from 'payload'
+import { Access } from 'payload/config';
 
-export const CollectionWithUpdateAccess: CollectionConfig = {
-  // ...
-  access: {
-    // highlight-start
-    update: ({ req: { user }}) => {
-      return Boolean(user)
-    },
-    // highlight-end
-  },
-}
-```
-
-<Banner type="success">
-  <strong>Tip:</strong>
-  Return a [Query](../queries/overview) to limit the Documents to only those that match the constraint. This can be helpful to restrict users' access to specific Documents. [More details](../queries/overview).
-</Banner>
-
-As your application becomes more complex, you may want to define your function in a separate file and import them into your Collection Config:
-
-```ts
-import type { Access } from 'payload'
-
-export const canUpdateUser: Access = ({ req: { user }, id }) => {
-  // Allow users with a role of 'admin'
-  if (user.roles && user.roles.some((role) => role === 'admin')) {
-    return true
+const canUpdateUser: Access = ({ req: { user }, id }) => {
+  // allow users with a role of 'admin'
+  if (user.roles && user.roles.some(role => role === 'admin')) {
+    return true;
   }
-
   // allow any other users to update only oneself
-  return user.id === id
-}
+  return user.id === id;
+};
 ```
 
-The following arguments are provided to the `update` function:
-
-| Option     | Description                                                                |
-| ---------- | -------------------------------------------------------------------------- |
-| **`req`**  | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user`. |
-| **`id`**   | `id` of document requested to update.                                       |
-| **`data`** | The data passed to update the document with.                                |
-
 ### Delete
 
 Similarly to the Update function, returns a boolean or a [query constraint](/docs/queries/overview) to limit which documents can be deleted by which users.
 
-To add delete Access Control to a Collection, use the `delete` property in the [Collection Config](../collections/overview):
+**Available argument properties:**
+
+| Option    | Description |
+| --------- | ----------- |
+| **`req`** | The Express `request` object with additional `user` property, which is the currently logged in user |
+| **`id`**  | `id` of document requested to delete |
+
+**Example:**
 
 ```ts
-import type { CollectionConfig } from 'payload'
+import { Access } from 'payload/config'
 
-export const CollectionWithDeleteAccess: CollectionConfig = {
-  // ...
-  access: {
-    // highlight-start
-    delete: ({ req: { user }}) => {
-      return Boolean(user)
-    },
-    // highlight-end
-  },
-}
-```
-
-As your application becomes more complex, you may want to define your function in a separate file and import them into your Collection Config:
-
-```ts
-import type { Access } from 'payload'
-
-export const canDeleteCustomer: Access = async ({ req, id }) => {
+const canDeleteCustomer: Access = async ({ req, id }) => {
   if (!id) {
-    // allow the admin UI to show controls to delete since it is indeterminate without the `id`
-    return true
+    // allow the admin UI to show controls to delete since it is indeterminate without the id
+    return true;
   }
-
-  // Query another Collection using the `id`
+  // query another collection using the id
   const result = await req.payload.find({
     collection: 'contracts',
     limit: 0,
@@ -244,96 +158,28 @@ export const canDeleteCustomer: Access = async ({ req, id }) => {
     where: {
       customer: { equals: id },
     },
-  })
+  });
 
-  return result.totalDocs === 0
-}
+  return result.totalDocs === 0;
+};
 ```
 
-The following arguments are provided to the `delete` function:
-
-| Option    | Description                                                                                         |
-| --------- | --------------------------------------------------------------------------------------------------- |
-| **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object with additional `user` property, which is the currently logged in user. |
-| **`id`**  | `id` of document requested to delete.
-
 ### Admin
 
-If the Collection is use to access the [Admin Panel](../admin/overview#the-admin-user-collection), the `Admin` Access Control function determines whether or not the currently logged in user can access the admin UI.
+If the Collection is [used to access the Payload Admin panel](/docs/admin/overview#the-admin-user-collection), the `Admin` Access Control function determines whether or not the currently logged in user can access the admin UI.
 
-To add Admin Access Control to a Collection, use the `admin` property in the [Collection Config](../collections/overview):
+**Available argument properties:**
 
-```ts
-import type { CollectionConfig } from 'payload'
-
-export const CollectionWithAdminAccess: CollectionConfig = {
-  // ...
-  access: {
-    // highlight-start
-    admin: ({ req: { user }}) => {
-      return Boolean(user)
-    },
-    // highlight-end
-  },
-}
-```
-
-The following arguments are provided to the `admin` function:
-
-| Option    | Description                                                                |
-| --------- | -------------------------------------------------------------------------- |
-| **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user`. |
+| Option    | Description |
+| --------- | ----------- |
+| **`req`** | The Express `request` object containing the currently authenticated `user` |
 
 ### Unlock
 
-Determines which users can [unlock](/docs/authentication/operations#unlock) other users who may be blocked from authenticating successfully due to [failing too many login attempts](/docs/authentication/overview#options).
+Determines which users can [unlock](/docs/authentication/operations#unlock) other users who may be blocked from authenticating successfully due to [failing too many login attempts](/docs/authentication/config#options).
 
-To add Unlock Access Control to a Collection, use the `unlock` property in the [Collection Config](../collections/overview):
+**Available argument properties:**
 
-```ts
-import type { CollectionConfig } from 'payload'
-
-export const CollectionWithUnlockAccess: CollectionConfig = {
-  // ...
-  access: {
-    // highlight-start
-    unlock: ({ req: { user }}) => {
-      return Boolean(user)
-    },
-    // highlight-end
-  },
-}
-```
-
-The following arguments are provided to the `unlock` function:
-
-| Option    | Description                                                                |
-| --------- | -------------------------------------------------------------------------- |
-| **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user`. |
-
-### Read Versions
-
-If the Collection has [Versions](../versions/overview) enabled, the `readVersions` Access Control function determines whether or not the currently logged in user can access the version history of a Document.
-
-To add Read Versions Access Control to a Collection, use the `readVersions` property in the [Collection Config](../collections/overview):
-
-```ts
-import type { CollectionConfig } from 'payload'
-
-export const CollectionWithVersionsAccess: CollectionConfig = {
-  // ...
-  access: {
-    // highlight-start
-    readVersions: ({ req: { user }}) => {
-      return Boolean(user)
-    },
-    // highlight-end
-  },
-}
-```
-
-The following arguments are provided to the `readVersions` function:
-
-| Option    | Description                                                                |
-| --------- | -------------------------------------------------------------------------- |
-| **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user`. |
+| Option    | Description |
+| --------- | ----------- |
+| **`req`** | The Express `request` object containing the currently authenticated `user` |

docs/access-control/fields.mdx

@@ -1,39 +1,24 @@
 ---
 title: Field-level Access Control
 label: Fields
-order: 40
+order: 30
 desc: Field-level Access Control is specified within a field's config, and allows you to define which users can create, read or update Fields.
-keywords: fields, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
+keywords: fields, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
-Field Access Control is [Access Control](../access-control) used to restrict access to specific [Fields](../fields/overview) within a Document.
+Field Access Control is specified with functions inside a field's config. All field-level Controls return a boolean value to allow or deny access for the specified operation. No field-level Access Controls support returning query constraints. All Access Control functions accept one `args` argument.
 
-To add Access Control to a Field, use the `access` property in your [Field Config](../fields/overview):
+## Available Controls
 
+| Function                 | Purpose |
+| ------------------------ | ------- |
+| **[`create`](#create)**  | Allows or denies the ability to set a field's value when creating a new document |
+| **[`read`](#read)**      | Allows or denies the ability to read a field's value |
+| **[`update`](#update)**  | Allows or denies the ability to update a field's value |
+
+**Example Collection config:**
 ```ts
-import type { Field } from 'payload';
-
-export const FieldWithAccessControl: Field = {
-  // ...
-  access: { // highlight-line
-    // ...
-  },
-}
-```
-
-<Banner type="warning">
-  <strong>Note:</strong>
-  Field Access Controls does not support returning [Query](../queries/overview) constraints like [Collection Access Control](./collections) does.
-</Banner>
-
-## Config Options
-
-Access Control is specific to the operation of the request.
-
-To add Access Control to a Field, use the `access` property in the [Field Config](../fields/overview):
-
-```ts
-import { CollectionConfig } from 'payload';
+import { CollectionConfig } from 'payload/types';
 
 export const Posts: CollectionConfig = {
   slug: 'posts',
@@ -53,25 +38,17 @@ export const Posts: CollectionConfig = {
 };
 ```
 
-The following options are available:
-
-| Function                | Purpose                                                                          |
-| ----------------------- | -------------------------------------------------------------------------------- |
-| **`create`** | Allows or denies the ability to set a field's value when creating a new document. [More details](#create). |
-| **`read`**     | Allows or denies the ability to read a field's value. [More details](#read).       |
-| **`update`** | Allows or denies the ability to update a field's value [More details](#update).    |
-
 ### Create
 
 Returns a boolean which allows or denies the ability to set a field's value when creating a new document. If `false` is returned, any passed values will be discarded.
 
 **Available argument properties:**
 
-| Option            | Description                                                                |
-| ----------------- | -------------------------------------------------------------------------- |
-| **`req`**         | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |
-| **`data`**        | The full data passed to create the document.                               |
-| **`siblingData`** | Immediately adjacent field data passed to create the document.             |
+| Option            | Description |
+| ----------------- | ----------- |
+| **`req`**         | The Express `request` object containing the currently authenticated `user` |
+| **`data`**        | The full data passed to create the document. |
+| **`siblingData`** | Immediately adjacent field data passed to create the document. |
 
 ### Read
 
@@ -79,12 +56,12 @@ Returns a boolean which allows or denies the ability to read a field's value. If
 
 **Available argument properties:**
 
-| Option            | Description                                                                |
-| ----------------- | -------------------------------------------------------------------------- |
-| **`req`**         | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |
-| **`id`**          | `id` of the document being read                                            |
-| **`doc`**         | The full document data.                                                    |
-| **`siblingData`** | Immediately adjacent field data of the document being read.                |
+| Option            | Description |
+| ----------------- | ----------- |
+| **`req`**         | The Express `request` object containing the currently authenticated `user` |
+| **`id`**          | `id` of the document being read |
+| **`doc`**         | The full document data. |
+| **`siblingData`** | Immediately adjacent field data of the document being read. |
 
 ### Update
 
@@ -94,10 +71,10 @@ If `false` is returned and you attempt to update the field's value, the operatio
 
 **Available argument properties:**
 
-| Option            | Description                                                                |
-| ----------------- | -------------------------------------------------------------------------- |
-| **`req`**         | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |
-| **`id`**          | `id` of the document being updated                                         |
-| **`data`**        | The full data passed to update the document.                               |
-| **`siblingData`** | Immediately adjacent field data passed to update the document with.        |
-| **`doc`**         | The full document data, before the update is applied.                      |
+| Option            | Description |
+| ----------------- | ----------- |
+| **`req`**         | The Express `request` object containing the currently authenticated `user` |
+| **`id`**          | `id` of the document being updated |
+| **`data`**        | The full data passed to update the document. |
+| **`siblingData`** | Immediately adjacent field data passed to update the document with. |
+| **`doc`**         | The full document data, before the update is applied. |

docs/access-control/globals.mdx

@@ -1,142 +1,56 @@
 ---
 title: Globals Access Control
 label: Globals
-order: 30
+order: 40
 desc: Global-level Access Control is specified within each Global's `access` property and allows you to define which users can read or update Globals.
-keywords: globals, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
+keywords: globals, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
-Global Access Control is [Access Control](../access-control) used to restrict access to [Global](../globals/overview) Documents, as well as what they can and cannot see within the [Admin Panel](../admin/overview) as it relates to that Global.
+You can define Global-level Access Control within each Global's `access` property. All Access Control functions accept one `args` argument.
 
-To add Access Control to a Global, use the `access` property in your [Global Config](../configuration/globals):
+**Available argument properties:
 
+## Available Controls
+
+| Function                 | Allows/Denies Access |
+| ------------------------ | -------------------- |
+| **[`read`](#read)**      | Used in the `findOne` Global operation |
+| **[`update`](#update)**  | Used in the `update` Global operation |
+
+**Example Global config:**
 ```ts
-import type { GlobalConfig } from 'payload';
+import { GlobalConfig } from 'payload/types';
 
-export const GlobalWithAccessControl: GlobalConfig = {
-  // ...
-  access: { // highlight-line
-    // ...
-  },
-}
-```
-
-## Config Options
-
-Access Control is specific to the operation of the request.
-
-To add Access Control to a [Global](../configuration/globals), use the `access` property in the [Global Config](../globals/overview):
-
-```ts
-import { GlobalConfig } from 'payload'
-
-const GlobalWithAccessControl: GlobalConfig = {
-  // ...
+const Header: GlobalConfig = {
+  slug: "header",
   // highlight-start
   access: {
-    read: ({ req: { user } }) => {...},
-    update: ({ req: { user } }) => {...},
-
-    // Version-enabled Globals only
-    readVersion: () => {...},
+    read: ({ req: { user } }) => { /* */ },
+    update: ({ req: { user } }) => { /* */ },
   },
   // highlight-end
-}
+};
 
-export default Header
+export default Header;
 ```
 
-The following options are available:
-
-| Function                | Allows/Denies Access                   |
-| ----------------------- | -------------------------------------- |
-| **`read`**     | Used in the `findOne` Global operation. [More details](#read). |
-| **`update`** | Used in the `update` Global operation. [More details](#update). |
-
-If a Global supports [Versions](../versions/overview), the following additional options are available:
-
-| Function           | Allows/Denies Access                                                                                                   |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------- |
-| **`readVersions`** | Used to control who can read versions, and who can't. Will automatically restrict the Admin UI version viewing access. [More details](#read-versions). |
-
 ### Read
 
-Returns a boolean result or optionally a [query constraint](../queries/overview) which limits who can read this global based on its current properties.
+Returns a boolean result or optionally a [query constraint](/docs/queries/overview) which limits who can read this global based on its current properties.
 
-To add read Access Control to a [Global](../configuration/globals), use the `read` property in the [Global Config](../globals/overview):
+**Available argument properties:**
 
-```ts
-import { GlobalConfig } from 'payload'
-
-const Header: GlobalConfig = {
-  // ...
-  // highlight-start
-  read: {
-    read: ({ req: { user } }) => {
-      return Boolean(user)
-    },
-  }
-  // highlight-end
-}
-```
-
-The following arguments are provided to the `read` function:
-
-| Option    | Description                                                                |
-| --------- | -------------------------------------------------------------------------- |
-| **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user`. |
+| Option    | Description |
+| --------- | ----------- |
+| **`req`** | The Express `request` object containing the currently authenticated `user` |
 
 ### Update
 
-Returns a boolean result or optionally a [query constraint](../queries/overview) which limits who can update this global based on its current properties.
+Returns a boolean result or optionally a [query constraint](/docs/queries/overview) which limits who can update this global based on its current properties.
 
-To add update Access Control to a [Global](../configuration/globals), use the `access` property in the [Global Config](../globals/overview):
+**Available argument properties:**
 
-```ts
-import { GlobalConfig } from 'payload'
-
-const Header: GlobalConfig = {
-  // ...
-  // highlight-start
-  access: {
-    update: ({ req: { user }, data }) => {
-      return Boolean(user)
-    },
-  }
-  // highlight-end
-}
-```
-
-The following arguments are provided to the `update` function:
-
-| Option     | Description                                                                |
-| ---------- | -------------------------------------------------------------------------- |
-| **`req`**  | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user`. |
-| **`data`** | The data passed to update the global with.                                 |
-
-### Read Versions
-
-If the Global has [Versions](../versions/overview) enabled, the `readVersions` Access Control function determines whether or not the currently logged in user can access the version history of a Document.
-
-To add Read Versions Access Control to a Collection, use the `readVersions` property in the [Global Config](../globals/overview):
-
-```ts
-import type { GlobalConfig } from 'payload'
-
-export const GlobalWithVersionsAccess: GlobalConfig = {
-  // ...
-  access: {
-    // highlight-start
-    readVersions: ({ req: { user }}) => {
-      return Boolean(user)
-    },
-    // highlight-end
-  },
-}
-```
-
-The following arguments are provided to the `readVersions` function:
-
-| Option    | Description                                                                |
-| --------- | -------------------------------------------------------------------------- |
-| **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user`. |
+| Option     | Description |
+| ---------- | ----------- |
+| **`req`**  | The Express `request` object containing the currently authenticated `user` |
+| **`data`** | The data passed to update the global with. |

docs/access-control/overview.mdx

@@ -2,59 +2,76 @@
 title: Access Control
 label: Overview
 order: 10
-desc: Payload makes it simple to define and manage Access Control. By declaring roles, you can set permissions and restrict what your users can interact with.
-keywords: overview, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
+desc: Payload makes it simple to define and manage access control. By declaring roles, you can set permissions and restrict what your users can interact with.
+keywords: overview, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
-<YouTube id="DoPLyXG26Dg" title="Overview of Payload Access Control" />
+Access control within Payload is extremely powerful while remaining easy and intuitive to manage. Declaring who should have access to what documents is no more complex than writing a simple JavaScript function that either returns a `boolean` or a [`query`](/docs/queries/overview) constraint to restrict which documents users can interact with.
 
-Access Control determines what a user can and cannot do with any given Document, as well as what they can and cannot see within the [Admin Panel](../admin/overview). By implementing Access Control, you can define granular restrictions based on the user, their roles (RBAC), Document data, or any other criteria your application requires.
+<YouTube
+  id="DoPLyXG26Dg"
+  title="Overview of Payload Access Control"
+/>
 
-Access Control functions are scoped to the _operation_, meaning you can have different rules for `create`, `read`, `update`, `delete`, etc. Access Control functions are executed _before_ any changes are made and _before_ any operations are completed. This allows you to determine if the user has the necessary permissions before fulfilling the request.
+**Example use cases:**
 
-There are many use cases for Access Control, including:
+- Allowing anyone `read` access to all `Post`s
+- Only allowing public access to `Post`s where a `status` field is equal to `published`
+- Giving only `User`s with a `role` field equal to `admin` the ability to delete `Page`(s)
+- Allowing anyone to create `ContactSubmission`s, but only logged in users to `read`, `update` or `delete` them
+- Restricting a `User` to only be able to see their own `Order`(s), but no others
+- Allowing `User`s that belong to a certain `Organization` to access only that `Organization`'s `Resource`s
 
-- Allowing anyone `read` access to all posts
-- Only allowing public access to posts where a `status` field is equal to `published`
-- Giving only users with a `role` field equal to `admin` the ability to delete posts
-- Allowing anyone to submit contact forms, but only logged in users to `read`, `update` or `delete` them
-- Restricting a user to only be able to see their own orders, but noone else's
-- Allowing users that belong to a certain organization to access only that organization's resources
+### Default Settings
 
-There are three main types of Access Control in Payload:
+**By default, all Collections and Globals require that a user is logged in to be able to interact in any way.** The default Access Control function evaluates the `user` from the Express `req` and returns `true` if a user is logged in, and `false` if not.
 
-- [Collection Access Control](./collections)
-- [Global Access Control](./globals)
-- [Field Access Control](./fields)
-
-## Default Access Control
-
-Payload provides default Access Control so that your data is secured behind [Authentication](../authentication) without additional configuration. To do this, Payload sets a default function that simply checks if a user is present on the request. You can override this default behavior by defining your own Access Control functions as needed.
-
-Here is the default Access Control that Payload provides:
+**Default Access function:**
 
 ```ts
 const defaultPayloadAccess = ({ req: { user } }) => {
   // Return `true` if a user is found
   // and `false` if it is undefined or null
-  return Boolean(user) // highlight-line
+  return Boolean(user);
 }
 ```
 
-<Banner type="warning">
-  <strong>Important:</strong>
-  In the [Local API](../local-api/overview), all Access Control is _skipped_ by default. This allows your server to have full control over your application. To opt back in, you can set the `overrideAccess` option to `false` in your requests.
+<Banner type="success">
+  <strong>Note:</strong><br/>
+  In the Local API, all Access Control functions are skipped by default, allowing your server to do whatever it needs. But, you can opt back in by setting the option <strong>overrideAccess</strong> to <strong>false</strong>.
 </Banner>
 
-## The Access Operation
+### Access Control Types
 
-The Admin Panel responds dynamically to your changes to Access Control. For example, if you restrict editing `ExampleCollection` to only users that feature an "admin" role, Payload will **hide** that Collection from the Admin Panel entirely. This is super powerful and allows you to control who can do what within your Admin Panel using the same functions that secure your APIs.
+You can manage access within Payload on three different levels:
 
-To accomplish this, Payload exposes the [Access Operation](../authentication/operations#access). Upon login, Payload executes each Access Control function at the top level, across all Collections, Globals, and Fields, and returns a response that contains a reflection of what the currently authenticated user can do within your application.
+- [Collections](/docs/access-control/collections)
+- [Fields](/docs/access-control/fields)
+- [Globals](/docs/access-control/globals)
 
-<Banner type="warning">
-  <strong>Important:</strong>
-  When your access control functions are executed via the [Access Operation](../authentication/operations#access),  the `id` and `data` arguments will be `undefined`. This is because Payload is executing your functions without referencing a specific Document.
+
+### When Access Control is Executed
+
+<Banner type="success">
+  <strong>Note:</strong><br/>
+  Access control functions are utilized in two places. It's important to understand how and when your access control is executed.
 </Banner>
 
-If you use `id` or `data` within your access control functions, make sure to check that they are defined first. If they are not, then you can assume that your Access Control is being executed via the Access Operation to determine solely what the user can do within the Admin Panel.
+#### As you execute operations
+
+When you perform Payload operations like `create`, `read`, `update`, and `delete`, your access control functions will be executed before any changes or operations are completed.
+
+#### Within the Admin UI
+
+The Payload Admin UI responds dynamically to the access control that you define. For example, if you restrict editing a `ExampleCollection` to only users that feature a `role` of `admin`, the Payload Admin UI will **hide** the `ExampleCollection` from the Admin UI entirely. This is super powerful and allows you to control who can do what with your Admin UI.
+
+To accomplish this, Payload ships with an `Access` operation, which is executed when a user logs into the Admin UI. Payload will execute each one of your access control functions, across all collections, globals, and fields, at the top level and return a response that contains a reflection of what the currently authenticated user can do with your application.
+
+### Argument Availability
+
+<Banner type="warning">
+  <strong>Important:</strong><br/>
+  When your access control functions are executed via the <strong>access</strong> operation, the <strong>id</strong> and <strong>data</strong> arguments will be <strong>undefined</strong>, because Payload is executing your functions without referencing a specific document.
+</Banner>
+
+If you use `id` or `data` within your access control functions, make sure to check that they are defined first. If they are not, then you can assume that your access control is being executed via the `access` operation, to determine solely what the user can do within the Admin UI.

docs/admin/collections.mdx

@@ -1,173 +0,0 @@
----
-title: Collection Admin Config
-label: Collections
-order: 20
-desc:
-keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
----
-
-The behavior of [Collections](../configuration/collections) within the [Admin Panel](./overview) can be fully customized to fit the needs of your application. This includes grouping or hiding their navigation links, adding [Custom Components](./components), selecting which fields to display in the List View, and more.
-
-To configure Admin Options for Collections, use the `admin` property in your Collection Config:
-
-```ts
-import { CollectionConfig } from 'payload'
-
-export const MyCollection: CollectionConfig = {
-  // ...
-  admin: { // highlight-line
-    // ...
-  },
-}
-```
-
-## Admin Options
-
-The following options are available:
-
-| Option                       | Description                                                                                                                                                                                           |
-| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`group`**                      | Text used as a label for grouping Collection and Global links together in the navigation.                                                                                                             |
-| **`hidden`**                     | Set to true or a function, called with the current user, returning true to exclude this Collection from navigation and admin routing.                                                                 |
-| **`hooks`**                      | Admin-specific hooks for this Collection. [More details](../hooks/collections).                                                                                                                                        |
-| **`useAsTitle`**                 | Specify a top-level field to use for a document title throughout the Admin Panel. If no field is defined, the ID of the document is used as the title.                                                |
-| **`description`**                | Text or React component to display below the Collection label in the List View to give editors more information.                                                                                      |
-| **`defaultColumns`**             | Array of field names that correspond to which columns to show by default in this Collection's List View.                                                                                              |
-| **`hideAPIURL`**                 | Hides the "API URL" meta field while editing documents within this Collection.                                                                                                                        |
-| **`enableRichTextLink`**         | The [Rich Text](../fields/rich-text) field features a `Link` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default.         |
-| **`enableRichTextRelationship`** | The [Rich Text](../fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default. |
-| **`meta`**                       | Metadata overrides to apply to the Admin Panel. Included properties are `description` and `openGraph`.                                                                           |
-| **`preview`**                    | Function to generate preview URLs within the Admin Panel that can point to your app. [More details](#preview).                                                                                                |
-| **`livePreview`**                | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview).                                                                              |
-| **`components`**                 | Swap in your own React components to be used within this Collection. [More details](#components).                                                                                       |
-| **`listSearchableFields`**       | Specify which fields should be searched in the List search view. [More details](#list-searchable-fields).                                                                                                      |
-| **`pagination`**             | Set pagination-specific options for this Collection. [More details](#pagination).                                                                                                                              |
-
-### Components
-
-Collections can set their own [Custom Components](./components) which only apply to [Collection](../configuration/collections)-specific UI within the [Admin Panel](./overview). This includes elements such as the Save Button, or entire layouts such as the Edit View.
-
-To override Collection Components, use the `admin.components` property in your [Collection Config](../configuration/collections):
-
-```ts
-import type { SanitizedCollectionConfig } from 'payload'
-import { CustomSaveButton } from './CustomSaveButton'
-
-export const MyCollection: SanitizedCollectionConfig = {
-  // ...
-  admin: {
-    components: { // highlight-line
-      // ...
-    },
-  },
-}
-```
-
-The following options are available:
-
-| Path                       | Description                                                                                                            |
-| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| **`beforeList`**           | An array of components to inject _before_ the built-in List View                                                          |
-| **`beforeListTable`**      | An array of components to inject _before_ the built-in List View's table                                                  |
-| **`afterList`**            | An array of components to inject _after_ the built-in List View                                                           |
-| **`afterListTable`**       | An array of components to inject _after_ the built-in List View's table                                                   |
-| **`edit.SaveButton`**      | Replace the default Save Button with a Custom Component. [Drafts](../versions/drafts) must be disabled.                                     |
-| **`edit.SaveDraftButton`** | Replace the default Save Draft Button with a Custom Component. [Drafts](../versions/drafts) must be enabled and autosave must be disabled. |
-| **`edit.PublishButton`**   | Replace the default Publish Button with a Custom Component. [Drafts](../versions/drafts) must be enabled.                                  |
-| **`edit.PreviewButton`**   | Replace the default Preview Button with a Custom Component. [Preview](#preview) must be enabled.                                         |
-| **`views`**                | Override or create new views within the Admin Panel. [More details](./views).                                     |
-
-<Banner type="success">
-  <strong>Note:</strong>
-  For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components).
-</Banner>
-
-### Preview
-
-It is possible to display a Preview Button within the Edit View of the Admin Panel. This will allow editors to visit the frontend of your app the corresponds to the document they are actively editing. This way they can preview the latest, potentially unpublished changes.
-
-To configure the Preview Button, set the `admin.preview` property to a function in your [Collection Config](../configuration/collections):
-
-```ts
-import { CollectionConfig } from 'payload'
-
-export const Posts: CollectionConfig = {
-  // ...
-  admin: {
-    // highlight-start
-    preview: (doc, { locale }) => {
-      if (doc?.slug) {
-        return `/${doc.slug}?locale=${locale}`
-      }
-
-      return null
-    },
-    // highlight-end
-  },
-}
-```
-
-The preview function receives two arguments:
-
-| Argument | Description |
-| --- | --- |
-| **`doc`** | The Document being edited. |
-| **`ctx`** | An object containing `locale` and `token` properties. The `token` is the currently logged-in user's JWT. |
-
-<Banner type="success">
-  <strong>Note:</strong>
-  For fully working example of this, check of the official [Draft Preview Example](https://github.com/payloadcms/payload/tree/main/examples/draft-preview) in the [Examples Directory](https://github.com/payloadcms/payload/tree/main/examples).
-</Banner>
-
-### Pagination
-
-All Collections receive their own List View which displays a paginated list of documents that can be sorted and filtered. The pagination behavior of the List View can be customized on a per-Collection basis, and uses the same [Pagination](../queries/pagination) API that Payload provides.
-
-To configure pagination options, use the `admin.pagination` property in your [Collection Config](../configuration/collections):
-
-```ts
-import { CollectionConfig } from 'payload'
-
-export const Posts: CollectionConfig = {
-  // ...
-  admin: {
-    // highlight-start
-    pagination: {
-      defaultLimit: 10,
-      limits: [10, 20, 50],
-    },
-    // highlight-end
-  },
-}
-```
-
-The following options are available:
-
-| Option         | Description                                                                                         |
-| -------------- | --------------------------------------------------------------------------------------------------- |
-| `defaultLimit` | Integer that specifies the default per-page limit that should be used. Defaults to 10.              |
-| `limits`       | Provide an array of integers to use as per-page options for admins to choose from in the List View. |
-
-### List Searchable Fields
-
-In the List View, there is a "search" box that allows you to quickly find a document through a simple text search. By default, it searches on the ID field. If defined, the `admin.useAsTitle` field is used. Or, you can explicitly define which fields to search based on the needs of your application.
-
-To define which fields should be searched, use the `admin.listSearchableFields` property in your [Collection Config](../configuration/collections):
-
-```ts
-import { CollectionConfig } from 'payload'
-
-export const Posts: CollectionConfig = {
-  // ...
-  admin: {
-    // highlight-start
-    listSearchableFields: ['title', 'slug'],
-    // highlight-end
-  },
-}
-```
-
-<Banner type="warning">
-  <strong>Tip:</strong>
-  If you are adding `listSearchableFields`, make sure you index each of these fields so your admin queries can remain performant.
-</Banner>

docs/admin/components.mdx

@@ -1,374 +1,371 @@
 ---
 title: Swap in your own React components
 label: Custom Components
-order: 40
+order: 20
 desc: Fully customize your Admin Panel by swapping in your own React components. Add fields, remove views, update routes and change functions to sculpt your perfect Dashboard.
-keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
+keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
-The Payload [Admin Panel](./overview) is designed to be as minimal and straightforward as possible to allow for both easy customization and full control over the UI. In order for Payload to support this level of customization, Payload provides a pattern for you to supply your own React components through your [Payload Config](../configuration/overview).
+While designing the Payload Admin panel, we determined it should be as minimal and straightforward as possible to allow easy customization and control. There are many times where you may want to completely control how a whole view or a field works. You might even want to add in your own routes entirely. In order for Payload to support that level of customization without introducing versioning / future-proofing issues, Payload provides for a pattern to supply your own React components via your Payload config.
 
-All Custom Components in Payload are [React Server Components](https://react.dev/reference/rsc/server-components) by default, with the exception of [Custom Providers](#custom-providers). This enables the use of the [Local API](../local-api) directly on the front-end. Custom Components are available for nearly every part of the Admin Panel for extreme granularity and control.
+To swap in your own React component, first, consult the list of available component overrides below. Determine the scope that corresponds to what you are trying to accomplish, and then author your React component accordingly.
 
 <Banner type="success">
-  <strong>Note:</strong>
-  Client Components continue to be fully supported. To use Client Components in your app, simply include the `use client` directive. Payload will automatically detect and remove all default, [non-serializable props](https://react.dev/reference/rsc/use-client#serializable-types) before rendering your component. [More details](#client-components).
+  <strong>Tip:</strong><br />
+  Custom components will automatically be provided with all props that the default component would accept.
 </Banner>
 
-There are four main types of Custom Components in Payload:
+### Base Component Overrides
 
-- [Root Components](#root-components)
-- [Collection Components](./collections#components)
-- [Global Components](./globals#components)
-- [Field Components](./fields)
+You can override a set of admin panel-wide components by providing a component to your base Payload config's `admin.components` property. The following options are available:
 
-To swap in your own Custom Component, consult the list of available components. Determine the scope that corresponds to what you are trying to accomplish, then [author your React component(s)](#building-custom-components) accordingly.
+| Path                  | Description                                                                                                                                                                                                 |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`Nav`**             | Contains the sidebar and mobile Nav in its entirety.                                                                                                                                                        |
+| **`logout.Button`**   | A custom React component.                                                                                                                                                                                   |
+| **`BeforeDashboard`** | Array of components to inject into the built-in Dashboard, _before_ the default dashboard contents.                                                                                                         |
+| **`AfterDashboard`**  | Array of components to inject into the built-in Dashboard, _after_ the default dashboard contents. [Demo](https://github.com/payloadcms/payload/tree/master/test/admin/components/AfterDashboard/index.tsx) |
+| **`BeforeLogin`**     | Array of components to inject into the built-in Login, _before_ the default login form.                                                                                                                     |
+| **`AfterLogin`**      | Array of components to inject into the built-in Login, _after_ the default login form.                                                                                                                      |
+| **`BeforeNavLinks`**  | Array of components to inject into the built-in Nav, _before_ the links themselves.                                                                                                                         |
+| **`AfterNavLinks`**   | Array of components to inject into the built-in Nav, _after_ the links.                                                                                                                                     |
+| **`views.Account`**   | The Account view is used to show the currently logged in user's Account page.                                                                                                                               |
+| **`views.Dashboard`** | The main landing page of the Admin panel.                                                                                                                                                                   |
+| **`graphics.Icon`**   | Used as a graphic within the `Nav` component. Often represents a condensed version of a full logo.                                                                                                          |
+| **`graphics.Logo`**   | The full logo to be used in contexts like the `Login` view.                                                                                                                                                 |
+| **`routes`**          | Define your own routes to add to the Payload Admin UI. [More](#custom-routes)                                                                                                                               |
+| **`providers`**       | Define your own provider components that will wrap the Payload Admin UI. [More](#custom-providers)                                                                                                          |
 
-## Root Components
+#### Full example:
 
-Root Components are those that effect the [Admin Panel](./overview) generally, such as the logo or the main nav.
-
-To override Root Components, use the `admin.components` property in your [Payload Config](../getting-started/overview):
+`payload.config.js`
 
 ```ts
-import { buildConfig } from 'payload'
-
-import { MyCustomLogo } from './MyCustomLogo'
+import { buildConfig } from "payload/config";
+import {
+  MyCustomNav,
+  MyCustomLogo,
+  MyCustomIcon,
+  MyCustomAccount,
+  MyCustomDashboard,
+  MyProvider,
+} from "./customComponents";
 
 export default buildConfig({
-  // ...
-  admin: {
-    // highlight-start
-    components: {
-      // ...
-    },
-    // highlight-end
-  },
-})
-```
-
-_For details on how to build Custom Components, see [Building Custom Components](#building-custom-components)._
-
-The following options are available:
-
-| Path                  | Description                                                                                                                                                                                                         |
-|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`Nav`**             | Contains the sidebar / mobile menu in its entirety.                                                                                                                                                                 |
-| **`beforeNavLinks`**  | An array of Custom Components to inject into the built-in Nav, _before_ the links themselves.                                                                                                                       |
-| **`afterNavLinks`**   | An array of Custom Components to inject into the built-in Nav, _after_ the links.                                                                                                                                   |
-| **`beforeDashboard`** | An array of Custom Components to inject into the built-in Dashboard, _before_ the default dashboard contents.                                                                                                       |
-| **`afterDashboard`**  | An array of Custom Components to inject into the built-in Dashboard, _after_ the default dashboard contents.                                                                                                        |
-| **`beforeLogin`**     | An array of Custom Components to inject into the built-in Login, _before_ the default login form.                                                                                                                   |
-| **`afterLogin`**      | An array of Custom Components to inject into the built-in Login, _after_ the default login form.                                                                                                                    |
-| **`logout.Button`**   | The button displayed in the sidebar that logs the user out.                                                                                                                                                         |
-| **`graphics.Icon`**   | The simplified logo used in contexts like the the `Nav` component.                                                                                                                                                  |
-| **`graphics.Logo`**   | The full logo used in contexts like the `Login` view.                                                                                                                                                               |
-| **`providers`**       | Custom [React Context](https://react.dev/learn/scaling-up-with-reducer-and-context) providers that will wrap the entire Admin Panel. [More details](#custom-providers).                                       |
-| **`actions`**         | An array of Custom Components to be rendered in the header of the Admin Panel, providing additional interactivity and functionality.                                                                  |
-| **`views`**           | Override or create new views within the Admin Panel. [More details](./views).                                                                                                                                 |
-
-<Banner type="success">
-  <strong>Note:</strong>
-  You can also use set [Collection Components](./collections#components) and [Global Components](./globals#components) in their respective configs.
-</Banner>
-
-### Custom Providers
-
-As you add more and more Custom Components to your [Admin Panel](./overview), you may find it helpful to add additional [React Context](https://react.dev/learn/scaling-up-with-reducer-and-context)(s). Payload allows you to inject your own context providers in your app so you can export your own custom hooks, etc.
-
-To add a Custom Provider, use the `admin.components.providers` property in your [Payload Config](../getting-started/overview):
-
-```ts
-import { buildConfig } from 'payload'
-
-import { MyProvider } from './MyProvider'
-
-export default buildConfig({
-  // ...
   admin: {
     components: {
-      providers: [MyProvider], // highlight-line
+      Nav: MyCustomNav,
+      graphics: {
+        Icon: MyCustomIcon,
+        Logo: MyCustomLogo,
+      },
+      views: {
+        Account: MyCustomAccount,
+        Dashboard: MyCustomDashboard,
+      },
+      providers: [MyProvider],
     },
   },
-})
+});
 ```
 
-Then build your Custom Provider as follows:
+_For more examples regarding how to customize components, look at the following [examples](https://github.com/payloadcms/payload/tree/master/test/admin/components)._
+
+### Collections
+
+You can override components on a Collection-by-Collection basis via each Collection's `admin` property.
+
+| Path                       | Description                                                                                                            |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| **`views.Edit`**           | Used while a document within this Collection is being edited.                                                          |
+| **`views.List`**           | The `List` view is used to render a paginated, filterable table of Documents in this Collection.                       |
+| **`edit.SaveButton`**      | Replace the default `Save` button with a custom component. Drafts must be disabled                                     |
+| **`edit.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. |
+| **`edit.PublishButton`**   | Replace the default `Publish` button with a custom component. Drafts must be enabled.                                  |
+| **`edit.PreviewButton`**   | Replace the default `Preview` button with a custom component.                                                          |
+| **`BeforeList`**           | Array of components to inject _before_ the built-in List view                                                          |
+| **`BeforeListTable`**      | Array of components to inject _before_ the built-in List view's table                                                  |
+| **`AfterListTable`**       | Array of components to inject _after_ the built-in List view's table                                                   |
+| **`AfterList`**            | Array of components to inject _after_ the built-in List view                                                           |
+
+#### Examples
 
 ```tsx
-'use client'
-import React, { createContext, useContext } from 'react'
+// Custom Buttons
 
-const MyCustomContext = React.createContext(myCustomValue)
+import * as React from "react";
+import {
+  CustomSaveButtonProps,
+  CustomSaveDraftButtonProps,
+  CustomPublishButtonProps,
+  CustomPreviewButtonProps,
+} from "payload/types";
 
-export const MyProvider: React.FC = ({ children }) => {
-  return (
-    <MyCustomContext.Provider value={myCustomValue}>
-      {children}
-    </MyCustomContext.Provider>
-  )
-}
-
-export const useMyCustomContext = () => useContext(MyCustomContext)
-```
-
-<Banner type="warning">
-  <strong>Reminder:</strong> Custom Providers are by definition Client Components. This means they must include the `use client` directive at the top of their files and cannot use server-only code.
-</Banner>
-
-## Building Custom Components
-
-All Custom Components in Payload are [React Server Components](https://react.dev/reference/rsc/server-components) by default, with the exception of [Custom Providers](#custom-providers). This enables the use of the [Local API](../local-api) directly on the front-end, among other things.
-
-To make building Custom Components as easy as possible, Payload automatically provides common props, such as the [`payload`](../local-api/overview) class and the [`i18n`](../configuration/i18n) object. This means that when building Custom Components within the Admin Panel, you do not have to get these yourself.
-
-Here is an example:
-
-```tsx
-import React from 'react'
-
-const MyServerComponent = async ({
-  payload // highlight-line
+export const CustomSaveButton: CustomSaveButtonProps = ({
+  DefaultButton,
+  label,
 }) => {
-  const page = await payload.findByID({
-    collection: 'pages',
-    id: '123',
-  })
+  return <DefaultButton label={label} />;
+};
 
+export const CustomSaveDraftButton: CustomSaveDraftButtonProps = ({
+  DefaultButton,
+  disabled,
+  label,
+  saveDraft,
+}) => {
   return (
-    <p>{page.title}</p>
-  )
-}
+    <DefaultButton label={label} disabled={disabled} saveDraft={saveDraft} />
+  );
+};
+
+export const CustomPublishButton: CustomPublishButtonProps = ({
+  DefaultButton,
+  disabled,
+  label,
+  publish,
+}) => {
+  return <DefaultButton label={label} disabled={disabled} publish={publish} />;
+};
+
+export const CustomPreviewButton: CustomPreviewButtonProps = ({
+  DefaultButton,
+  disabled,
+  label,
+  preview,
+}) => {
+  return <DefaultButton label={label} disabled={disabled} preview={preview} />;
+};
 ```
 
-Each Custom Component receives the following props by default:
+##### Custom Collection List View Example
 
-| Prop                      | Description                                                                                           |
-| ------------------------- | ----------------------------------------------------------------------------------------------------- |
-| `payload`                 | The [Payload](../local-api/overview) class.                                                           |
-| `i18n`                    | The [i18n](../i18n) object.                                                                           |
-
-Custom Components also receive various other props that are specific to the context in which the Custom Component is being rendered. For example, [Custom Views](./views) receive the `user` prop. For a full list of available props, consult the documentation related to the specific component you are working with.
-
-<Banner type="success">
-  See [Root Components](#root-components), [Collection Components](#collection-components), [Global Components](#global-components), or [Field Components](#custom-field-components) for a complete list of all available components.
-</Banner>
-
-### Client Components
-
-When [Building Custom Components](#building-custom-components), it's still possible to use client-side code such as `useState` or the `window` object. To do this, simply add the `use client` directive at the top of your file. Payload will automatically detect and remove all default, [non-serializable props](https://react.dev/reference/rsc/use-client#serializable-types) before rendering your component.
+Collection.ts
 
 ```tsx
-'use client' // highlight-line
-import React, { useState } from 'react'
+import { MyListComponent } from './MyListComponent';
+export const MyCollection: CollectionConfig = {
+  slug: 'mycollection',
+  admin: {
+    components: {
+      views: {
+        List: MyListComponent,
+      },
+    },
+  },
+  fields: [
+    ...
+  ],
+};
+```
 
-export const MyClientComponent: React.FC = () => {
-  const [count, setCount] = useState(0)
+MyListComponent.tsx
+
+```tsx
+import React from "react";
+import { List, type Props } from "payload/components/views/List"; // Payload's default List view component and its props
+export const MyListComponent: React.FC<Props> = (props) => (
+  <div>
+    <p>
+      Some text before the default list view component. If you just want to do
+      that, you can also use the admin.components.list.BeforeList hook
+    </p>
+    <List {...props} />
+  </div>
+);
+```
+
+### Globals
+
+As with Collections, You can override components on a global-by-global basis via their `admin` property.
+
+| Path                       | Description                                                                                                            |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| **`views.Edit`**           | Used while this Global is being edited.                                                                                |
+| **`edit.SaveButton`**      | Replace the default `Save` button with a custom component. Drafts must be disabled                                     |
+| **`edit.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. |
+| **`edit.PublishButton`**   | Replace the default `Publish` button with a custom component. Drafts must be enabled.                                  |
+| **`edit.PreviewButton`**   | Replace the default `Preview` button with a custom component.                                                          |
+
+### Fields
+
+All Payload fields support the ability to swap in your own React components. So, for example, instead of rendering a default Text input, you might need to render a color picker that provides the editor with a custom color picker interface to restrict the data entered to colors only.
+
+<Banner type="success">
+  <strong>Tip:</strong>
+  <br />
+  Don't see a built-in field type that you need? Build it! Using a combination
+  of custom validation and custom components, you can override the entirety of
+  how a component functions within the admin panel and effectively create your
+  own field type.
+</Banner>
+
+**Fields support the following custom components:**
+
+| Component    | Description                                                                                                                 |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------- |
+| **`Filter`** | Override the text input that is presented in the `List` view when a user is filtering documents by the customized field.    |
+| **`Cell`**   | Used in the `List` view's table to represent a table-based preview of the data stored in the field. [More](#cell-component) |
+| **`Field`**  | Swap out the field itself within all `Edit` views. [More](#field-component)                                                 |
+
+## Cell Component
+
+These are the props that will be passed to your custom Cell to use in your own components.
+
+| Property         | Description                                                       |
+| ---------------- | ----------------------------------------------------------------- |
+| **`field`**      | An object that includes the field configuration.                  |
+| **`colIndex`**   | A unique number for the column in the list.                       |
+| **`collection`** | An object with the config of the collection that the field is in. |
+| **`cellData`**   | The data for the field that the cell represents.                  |
+| **`rowData`**    | An object with all the field values for the row.                  |
+
+#### Example
+
+```tsx
+import React from "react";
+import "./index.scss";
+const baseClass = "custom-cell";
+
+const CustomCell: React.FC<Props> = (props) => {
+  const { field, colIndex, collection, cellData, rowData } = props;
+
+  return <span className={baseClass}>{cellData}</span>;
+};
+```
+
+## Field Component
+
+When writing your own custom components you can make use of a number of hooks to set data, get reactive changes to other fields, get the id of the document or interact with a context from a custom provider.
+
+### Sending and receiving values from the form
+
+When swapping out the `Field` component, you'll be responsible for sending and receiving the field's `value` from the form itself. To do so, import the `useField` hook as follows:
+
+```tsx
+import { useField } from "payload/components/forms";
+
+type Props = { path: string };
+
+const CustomTextField: React.FC<Props> = ({ path }) => {
+  // highlight-start
+  const { value, setValue } = useField<Props>({ path });
+  // highlight-end
 
   return (
-    <button onClick={() => setCount(count + 1)}>
-      Clicked {count} times
-    </button>
-  )
-}
+    <input onChange={(e) => setValue(e.target.value)} value={value.path} />
+  );
+};
 ```
 
+<Banner type="success">
+  For more information regarding the hooks that are available to you while you
+  build custom components, including the <strong>useField</strong> hook, [click
+  here](/docs/admin/hooks).
+</Banner>
+
+## Custom routes
+
+You can easily add your own custom routes to the Payload Admin panel using the `admin.components.routes` property. Payload currently uses the extremely powerful React Router v5.x and custom routes support all the properties of the React Router `<Route />` component.
+
+**Custom routes support the following properties:**
+
+| Property           | Description                                                                                                                  |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| **`Component`** \* | Pass in the component that should be rendered when a user navigates to this route.                                           |
+| **`path`** \*      | React Router `path`. [See the React Router docs](https://v5.reactrouter.com/web/api/Route/path-string-string) for more info. |
+| **`exact`**        | React Router `exact` property. [More](https://v5.reactrouter.com/web/api/Route/exact-bool)                                   |
+| **`strict`**       | React Router `strict` property. [More](https://v5.reactrouter.com/web/api/Route/strict-bool)                                 |
+| **`sensitive`**    | React Router `sensitive` property. [More](https://v5.reactrouter.com/web/api/Route/sensitive-bool)                           |
+
+_\* An asterisk denotes that a property is required._
+
+#### Custom route components
+
+Your custom route components will be given all the props that a React Router `<Route />` typically would receive, as well as two props from Payload:
+
+| Prop                    | Description                                                                  |
+| ----------------------- | ---------------------------------------------------------------------------- |
+| **`user`**              | The currently logged in user. Will be `null` if no user is logged in.        |
+| **`canAccessAdmin`** \* | If the currently logged in user is allowed to access the admin panel or not. |
+
 <Banner type="warning">
-  <strong>Reminder:</strong>
-  Client Components cannot be passed [non-serializable props](https://react.dev/reference/rsc/use-client#serializable-types). If you are rendering your Client Component _from within_ a Server Component, ensure that its props are serializable.
+  <strong>Note:</strong>
+  <br />
+  It's up to you to secure your custom routes. If your route requires a user to
+  be logged in or to have certain access rights, you should handle that within
+  your route component yourself.
 </Banner>
 
-### Accessing the Payload Config
+#### Example
 
-From any Server Component, the [Payload Config](../configuration/overview) can be accessed directly from the `payload` prop:
+You can find examples of custom route views in the [Payload source code `/test/admin/components/views` folder](https://github.com/payloadcms/payload/tree/master/test/admin/components/views). There, you'll find two custom routes:
 
-```tsx
-import React from 'react'
+1. A custom view that uses the `DefaultTemplate`, which is the built-in Payload template that displays the sidebar and "eyebrow nav"
+1. A custom view that uses the `MinimalTemplate` - which is just a centered template used for things like logging in or out
 
-export default async function MyServerComponent({
-  payload: {
-    config // highlight-line
-  }
-}) {
-  return (
-    <Link href={config.serverURL}>
-      Go Home
-    </Link>
-  )
-}
-```
+To see how to pass in your custom views to create custom routes of your own, take a look at the `admin.components.routes` property of the [Payload test admin config](https://github.com/payloadcms/payload/blob/master/test/admin/config.ts).
 
-But, the Payload Config is [non-serializable](https://react.dev/reference/rsc/use-client#serializable-types) by design. It is full of custom validation functions, React components, etc. This means that the Payload Config, in its entirety, cannot be passed directly to Client Components.
+## Custom providers
 
-For this reason, Payload creates a Client Config and passes it into the Config Provider. This is a serializable version of the Payload Config that can be accessed from any Client Component via the [`useConfig`](./hooks#useconfig) hook:
+As your admin customizations gets more complex you may want to share state between fields or other components. You can add custom providers to do add your own context to any Payload app for use in other custom components within the admin panel. Within your config add `admin.components.providers`, these can be used to share context or provide other custom functionality. Read the [React context](https://reactjs.org/docs/context.html) docs to learn more.
 
-```tsx
-import React from 'react'
-import { useConfig } from '@payloadcms/ui'
-
-export const MyClientComponent: React.FC = () => {
-  const { serverURL } = useConfig() // highlight-line
-
-  return (
-    <Link href={serverURL}>
-      Go Home
-    </Link>
-  )
-}
-```
-
-<Banner type="success">
-  See [Using Hooks](#using-hooks) for more details.
-</Banner>
-
-### Using Hooks
-
-To make it easier to [build your Custom Components](#building-custom-components), you can use [Payload's built-in React Hooks](./hooks) in any Client Component. For example, you might want to interact with one of Payload's many React Contexts:
-
-```tsx
-'use client'
-import React from 'react'
-import { useDocumentInfo } from '@payloadcms/ui'
-
-export const MyClientComponent: React.FC = () => {
-  const { slug } = useDocumentInfo() // highlight-line
-
-  return (
-    <p>{`Entity slug: ${slug}`}</p>
-  )
-}
-```
-
-<Banner type="success">
-  See the [Hooks](./hooks) documentation for a full list of available hooks.
-</Banner>
-
-### Getting the Current Language
-
-All Custom Components can support multiple languages to be consistent with Payload's [Internationalization](../configuration/i18n). To do this, first add your translation resources to the [I18n Config](../configuration/i18n).
-
-From any Server Component, you can translate resources using the `getTranslation` function from `@payloadcms/translations`. All Server Components automatically receive the `i18n` object as a prop by default.
-
-```tsx
-import React from 'react'
-import { getTranslation } from '@payloadcms/translations'
-
-export default async function MyServerComponent({ i18n }) {
-  const translatedTitle = getTranslation(myTranslation, i18n) // highlight-line
-
-  return (
-    <p>{translatedTitle}</p>
-  )
-}
-```
-
-The best way to do this within a Client Component is to import the `useTranslation` hook from `@payloadcms/ui`:
-
-```tsx
-import React from 'react'
-import { useTranslation } from '@payloadcms/ui'
-
-export const MyClientComponent: React.FC = () => {
-  const { t, i18n } = useTranslation() // highlight-line
-
-  return (
-    <ul>
-      <li>{t('namespace1:key', { variable: 'value' })}</li>
-      <li>{t('namespace2:key', { variable: 'value' })}</li>
-      <li>{i18n.language}</li>
-    </ul>
-  )
-}
-```
-
-<Banner type="success">
-  See the [Hooks](./hooks) documentation for a full list of available hooks.
-</Banner>
-
-### Getting the Current Locale
-
-All [Custom Views](./views) can support multiple locales to be consistent with Payload's [Localization](../configuration/localization). They automatically receive the `locale` object as a prop by default. This can be used to scope API requests, etc.:
-
-```tsx
-import React from 'react'
-
-export default async function MyServerComponent({ payload, locale }) {
-  const localizedPage = await payload.findByID({
-    collection: 'pages',
-    id: '123',
-    locale,
-  })
-
-  return (
-    <p>{localizedPage.title}</p>
-  )
-}
-```
-
-The best way to do this within a Client Component is to import the `useLocale` hook from `@payloadcms/ui`:
-
-```tsx
-import React from 'react'
-import { useLocale } from '@payloadcms/ui'
-
-const Greeting: React.FC = () => {
-  const locale = useLocale() // highlight-line
-
-  const trans = {
-    en: 'Hello',
-    es: 'Hola',
-  }
-
-  return (
-    <span>{trans[locale.code]}</span>
-  )
-}
-```
-
-<Banner type="success">
-  See the [Hooks](./hooks) documentation for a full list of available hooks.
+<Banner type="warning">
+  <strong>Reminder:</strong> Don't forget to pass the **children** prop through
+  the provider component for the admin UI to show
 </Banner>
 
 ### Styling Custom Components
 
-Payload has a robust [CSS Library](./customizing-css) that you can use to style your Custom Components similarly to Payload's built-in styling. This will ensure that your Custom Components match the existing design system, and so that they automatically adapt to any theme changes that might occur.
+Payload exports its SCSS variables and mixins for reuse in your own custom components. This is helpful in cases where you might want to style a custom input similarly to Payload's built-ini styling, so it blends more thoroughly into the existing admin UI.
 
-To apply custom styles, simply import your own `.css` or `.scss` file into your Custom Component:
+To make use of Payload SCSS variables / mixins to use directly in your own components, you can import them as follows:
+
+```
+@import '~payload/scss';
+```
+
+### Getting the current language
+
+When developing custom components you can support multiple languages to be consistent with Payload's i18n support. The best way to do this is to add your translation resources to the [i18n configuration](https://payloadcms.com/docs/configuration/i18n) and import `useTranslation` from `react-i18next` in your components.
+
+For example:
 
 ```tsx
-import './index.scss'
+import { useTranslation } from "react-i18next";
+
+const CustomComponent: React.FC = () => {
+  // highlight-start
+  const { t, i18n } = useTranslation("namespace1");
+  // highlight-end
 
-export const MyComponent: React.FC = () => {
   return (
-    <div className="my-component">
-      My Custom Component
-    </div>
-  )
-}
+    <ul>
+      <li>{t("key", { variable: "value" })}</li>
+      <li>{t("namespace2:key", { variable: "value" })}</li>
+      <li>{i18n.language}</li>
+    </ul>
+  );
+};
 ```
 
-Then to colorize your Custom Component's background, for example, you can use the following CSS:
+### Getting the current locale
 
-```scss
-.my-component {
-  background-color: var(--theme-elevation-500);
-}
+In any custom component you can get the selected locale with the `useLocale` hook. Here is a simple example:
+
+```tsx
+import { useLocale } from "payload/components/utilities";
+
+const Greeting: React.FC = () => {
+  // highlight-start
+  const locale = useLocale();
+  // highlight-end
+
+  const trans = {
+    en: "Hello",
+    es: "Hola",
+  };
+
+  return <span> {trans[locale]} </span>;
+};
 ```
-
-Payload also exports its [SCSS](https://sass-lang.com) library for reuse which includes mixins, etc. To use this, simply import it as follows into your `.scss` file:
-
-```scss
-@import '~payload/scss';
-
-.my-component {
-  @include mid-break {
-    background-color: var(--theme-elevation-900);
-  }
-}
-
-```
-
-<Banner type="success">
-  <strong>Note:</strong>
-  You can also drill into Payload's own component styles, or easily apply global, app-wide CSS. More on that [here](./customizing-css).
-</Banner>

docs/admin/customizing-css.mdx

@@ -1,73 +1,49 @@
 ---
 title: Customizing CSS & SCSS
 label: Customizing CSS
-order: 80
-desc: Customize the Payload Admin Panel further by adding your own CSS or SCSS style sheet to the configuration, powerful theme and design options are waiting for you.
-keywords: admin, css, scss, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
+order: 40
+desc: Customize your Payload admin panel further by adding your own CSS or SCSS style sheet to the configuration, powerful theme and design options are waiting for you.
+keywords: admin, css, scss, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
-Customizing the Payload [Admin Panel](./overview) through CSS alone is one of the easiest and most powerful ways to customize the look and feel of the dashboard. To allow for this level of customization, Payload:
+### Adding your own CSS / SCSS
 
-1. Exposes a [root-level stylesheet](#global-css) for you to easily to inject custom selectors
-1. Provides a [CSS library](#css-library) that can be easily overridden or extended
-1. Uses [BEM naming conventions](http://getbem.com) so that class names are globally accessible
+You can add your own CSS by providing your base Payload config with a path to your own CSS or SCSS. Customize the styling of any part of the Payload dashboard as necessary.
 
-To customize the CSS within the Admin UI, determine scope and change you'd like to make, and then add your own CSS or SCSS to the configuration as needed.
+To do so, provide your base Payload config with a path to your own stylesheet. It can be either a CSS or SCSS file.
 
-## Global CSS
+**Example in payload.config.js:**
+```ts
+import { buildConfig } from 'payload/config';
+import path from 'path';
 
-Global CSS refers to the CSS that is applied to the entire [Admin Panel](./overview). This is where you can have a significant impact to the look and feel of the Admin UI through just a few lines of code.
-
-You can add your own global CSS through the root `custom.scss` file of your app. This file is loaded into the root of the Admin Panel and can be used to inject custom selectors or styles however needed.
-
-Here is an example of how you might target the Dashboard View and change the background color:
-
-```scss
-.dashboard {
-  background-color: red; // highlight-line
-}
+const config = buildConfig({
+	admin: {
+		css: path.resolve(__dirname, 'relative/path/to/stylesheet.scss'),
+	},
+});
 ```
 
-<Banner type="warning">
-  <strong>Note:</strong>
-  If you are building [Custom Components](./overview), it is best to import your own stylesheets directly into your components, rather than using the global stylesheet. You can continue to use the [CSS library](#css-library) as needed.
-</Banner>
+### Overriding built-in styles
 
-## Re-using Payload SCSS variables and utilities
+To make it as easy as possible for you to override our styles, Payload uses [BEM naming conventions](http://getbem.com/) for all CSS within the Admin UI. If you provide your own CSS, you can override any built-in styles easily.
 
-You can re-use Payload's SCSS variables and utilities in your own stylesheets by importing it from the UI package.
+In addition to adding your own style definitions, you can also override Payload's built-in CSS variables. We use as much as possible behind the scenes, and you can override any of them that you'd like to.
 
-```scss
-@import '~@payloadcms/ui/scss';
-```
+You can find the built-in Payload CSS variables within [`./src/admin/scss/app.scss`](https://github.com/payloadcms/payload/blob/master/src/admin/scss/app.scss) and [`./src/admin/scss/colors.scss`](https://github.com/payloadcms/payload/blob/master/src/admin/scss/colors.scss). The following variables are defined and can be overridden:
 
-## CSS Library
+- Breakpoints
+- Base color shades (white to black by default)
+- Success / warning / error color shades
+- Theme-specific colors (background, input background, text color, etc.)
+- Elevation colors (used to determine how "bright" something should be when compared to the background)
+- Fonts
+- Horizontal gutter
 
-To make it as easy as possible for you to override default styles, Payload uses [BEM naming conventions](http://getbem.com/) for all CSS within the Admin UI. If you provide your own CSS, you can override any built-in styles easily, including targeting nested components and their various component states.
-
-You can also override Payload's built-in [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). These variables are widely consumed by the Admin Panel, so modifying them has a significant impact on the look and feel of the Admin UI.
-
-The following variables are defined and can be overridden:
-
-- [Breakpoints](https://github.com/payloadcms/payload/blob/beta/packages/ui/src/scss/queries.scss)
-- [Colors](https://github.com/payloadcms/payload/blob/beta/packages/ui/src/scss/colors.scss)
-  - Base color shades (white to black by default)
-  - Success / warning / error color shades
-  - Theme-specific colors (background, input background, text color, etc.)
-  - Elevation colors (used to determine how "bright" something should be when compared to the background)
-- [Sizing](https://github.com/payloadcms/payload/blob/beta/packages/ui/src/scss/app.scss)
-  - Horizontal gutter
-  - Transition speeds
-  - Font sizes
-  - Etc.
-
-For an up-to-date, comprehensive list of all available variables, please refer to the [Source Code](https://github.com/payloadcms/payload/blob/main/packages/ui/src/scss).
+#### Dark mode
 
 <Banner type="warning">
-  <strong>Warning:</strong>
-  If you're overriding colors or theme elevations, make sure to consider how [your changes will affect dark mode](#dark-mode).
+  If you're overriding colors or theme elevations, make sure to consider how your changes will affect dark mode.
 </Banner>
 
-#### Dark Mode
-
-Colors are designed to automatically adapt to theme of the [Admin Panel](./overview). By default, Payload automatically overrides all `--theme-elevation` colors and inverts all success / warning / error shades to suit dark mode. We also update some base theme variables like `--theme-bg`, `--theme-text`, etc.
+By default, Payload automatically overrides all `--theme-elevation`s and inverts all success / warning / error shades to suit dark mode. We also update some base theme variables like `--theme-bg`, `--theme-text`, etc.

docs/admin/fields.mdx

@@ -1,576 +0,0 @@
----
-title: Customizing Fields
-label: Customizing Fields
-order: 60
-desc:
-keywords:
----
-
-[Fields](../fields/overview) within the [Admin Panel](./overview) can be endlessly customized in their appearance and behavior without affecting their underlying data structure. Fields are designed to withstand heavy modification or even complete replacement through the use of [Custom Field Components](#field-components), [Conditional Logic](#conditional-logic), [Custom Validations](../fields/overview#validation), and more.
-
-For example, your app might need to render a specific interface that Payload does not inherently support, such as a color picker. To do this, you could replace the default [Text Field](../fields/text) input with your own user-friendly component that formats the data into a valid color value.
-
-<Banner type="success">
-  <strong>Tip:</strong>
-  Don't see a built-in field type that you need? Build it! Using a combination of [Field Validations](../fields/overview#validation)
-  and [Custom Components](./components), you can override the entirety of how a component functions within the [Admin Panel](./overview) to effectively create your own field type.
-</Banner>
-
-## Admin Options
-
-You can customize the appearance and behavior of fields within the [Admin Panel](./overview) through the `admin` property of any [Field Config](../fields/overview):
-
-```ts
-import type { CollectionConfig } from 'payload'
-
-export const CollectionConfig: CollectionConfig = {
-  // ...
-  fields: [
-    // ...
-    {
-      name: 'myField',
-      type: 'text',
-      admin: { // highlight-line
-        // ...
-      },
-    }
-  ]
-}
-```
-
-The following options are available:
-
-| Option              | Description                                                                                                                                                                                                                      |
-| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`condition`**         | Programmatically show / hide fields based on other fields. [More details](../admin/fields#conditional-logic).                                                                                               |
-| **`components`**        | All Field Components can be swapped out for [Custom Components](../admin/components) that you define. [More details](../admin/fields).                                                                             |
-| **`description`**       | Helper text to display alongside the field to provide more information for the editor. [More details](../admin/fields#description).                                                                                                 |
-| **`position`**          | Specify if the field should be rendered in the sidebar by defining `position: 'sidebar'`.                                                                                                                                        |
-| **`width`**             | Restrict the width of a field. You can pass any string-based value here, be it pixels, percentages, etc. This property is especially useful when fields are nested within a `Row` type where they can be organized horizontally. |
-| **`style`**         | [CSS Properties](https://developer.mozilla.org/en-US/docs/Web/CSS) to inject into the root element of the field.                                                                                                           |
-| **`className`**         | Attach a [CSS class attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) to the root DOM element of a field.                                                                                                                                                                      |
-| **`readOnly`**          | Setting a field to `readOnly` has no effect on the API whatsoever but disables the admin component's editability to prevent editors from modifying the field's value.                                                            |
-| **`disabled`**          | If a field is `disabled`, it is completely omitted from the [Admin Panel](../admin/overview).                                                                                                                                                         |
-| **`disableBulkEdit`**   | Set `disableBulkEdit` to `true` to prevent fields from appearing in the select options when making edits for multiple documents.                                                                                                 |
-| **`disableListColumn`** | Set `disableListColumn` to `true` to prevent fields from appearing in the list view column selector.                                                                                                                             |
-| **`disableListFilter`** | Set `disableListFilter` to `true` to prevent fields from appearing in the list view filter options.                                                                                                                              |
-| **`hidden`**            | Will transform the field into a `hidden` input type. Its value will still submit with requests in the Admin Panel, but the field itself will not be visible to editors.        |
-
-## Field Components
-
-Within the [Admin Panel](./overview), fields are rendered in three distinct places:
-
-- [Field](#the-field-component) - The actual form field rendered in the Edit View.
-- [Cell](#the-cell-component) - The table cell component rendered in the List View.
-- [Filter](#the-filter-component) - The filter component rendered in the List View.
-
-To easily swap in Field Components with your own, use the `admin.components` property in your [Field Config](../fields/overview):
-
-```ts
-import type { CollectionConfig } from 'payload'
-
-export const CollectionConfig: CollectionConfig = {
-  // ...
-  fields: [
-    // ...
-    {
-      // ...
-      admin: {
-        components: { // highlight-line
-          // ...
-        },
-      },
-    }
-  ]
-}
-```
-
-The following options are available:
-
-| Component    | Description                                                                                                                 |
-| ---------- | --------------------------------------------------------------------------------------------------------------------------- |
-| **`Field`**  | The form field rendered of the Edit View. [More details](#the-field-component).                                                |
-| **`Cell`**   | The table cell rendered of the List View. [More details](#the-cell-component).              |
-| **`Filter`** | The filter component rendered in the List View. [More details](#the-filter-component). || Component         | Description                                                                                                     |
-| **`Label`**       | Override the default Label of the Field Component. [More details](#the-label-component).                                    |
-| **`Error`**       | Override the default Error of the Field Component. [More details](#the-error-component).                                    |
-| **`Description`** | Override the default Description of the Field Component. [More details](#the-description-component).                      |
-| **`beforeInput`** | An array of elements that will be added before the input of the Field Component. [More details](#afterinput-and-beforeinput).|
-| **`afterInput`**  | An array of elements that will be added after the input of the Field Component. [More details](#afterinput-and-beforeinput). |
-
-_\* **`beforeInput`** and **`afterInput`** are only supported in fields that do not contain other fields, such as [`Text`](../fields/text), and [`Textarea`](../fields/textarea)._
-
-### The Field Component
-
-The Field Component is the actual form field rendered in the Edit View. This is the input that user's will interact with when editing a document.
-
-To easily swap in your own Field Component, use the `admin.components.Field` property in your [Field Config](../fields/overview):
-
-```ts
-import type { CollectionConfig } from 'payload'
-
-export const CollectionConfig: CollectionConfig = {
-  // ...
-  fields: [
-    // ...
-    {
-      // ...
-      admin: {
-        components: {
-          Field: MyFieldComponent, // highlight-line
-        },
-      },
-    }
-  ]
-}
-```
-
-_For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components)._
-
-<Banner type="warning">
-  Instead of replacing the entire Field Component, you can alternately replace or slot-in only specific parts by using the [`Label`](#the-label-component), [`Error`](#the-error-component), [`beforeInput`](#afterinput-and-beforinput), and [`afterInput`](#afterinput-and-beforinput) properties.
-</Banner>
-
-All Field Components receive the following props:
-
-| Property         | Description                                                                                                                                                                                                                      |
-| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`AfterInput`** | The rendered result of the `admin.components.afterInput` property. [More details](#afterinput-and-beforeinput).                                                                                                      |
-| **`BeforeInput`** | The rendered result of the `admin.components.beforeInput` property. [More details](#afterinput-and-beforeinput).                                                                                                      |
-| **`CustomDescription`** | The rendered result of the `admin.components.Description` property. [More details](#the-description-component).                                                                                                      |
-| **`CustomError`** | The rendered result of the `admin.components.Error` property. [More details](#the-error-component).                                                                                                      |
-| **`CustomLabel`** | The rendered result of the `admin.components.Label` property. [More details](#the-label-component).
-| **`path`**       | The static path of the field at render time. [More details](./hooks#usefieldprops). |
-| **`disabled`**   | The `admin.disabled` property defined in the [Field Config](../fields/overview). |
-| **`required`**   | The `admin.required` property defined in the [Field Config](../fields/overview). |
-| **`className`**  | The `admin.className` property defined in the [Field Config](../fields/overview). |
-| **`style`**      | The `admin.style` property defined in the [Field Config](../fields/overview).                                                                                                                                                      |
-| **`custom`**     | The `admin.custom` property defined in the [Field Config](../fields/overview).
-| **`placeholder`** | The `admin.placeholder` property defined in the [Field Config](../fields/overview). |
-| **`descriptionProps`** | An object that contains the props for the `FieldDescription` component.                                                                                                                                                                   |
-| **`labelProps`** | An object that contains the props needed for the `FieldLabel` component.                                                                                                                                                                         |
-| **`errorProps`** | An object that contains the props for the `FieldError` component.                                                                                                                                                                         |
-| **`docPreferences`** | An object that contains the preferences for the document.                                                                                                                                                                         |
-| **`label`**      | The label value provided in the field, it can be used with i18n.                                                                                                                                                                   |
-| **`locale`**     | The locale of the field. [More details](../configuration/localization).                                                                                                                                                                   |
-| **`localized`**  | A boolean value that represents if the field is localized or not. [More details](../fields/localized).                                                                                                                                                                   |
-| **`readOnly`**   | A boolean value that represents if the field is read-only or not.                                                                                                                                                                  |
-| **`rtl`**        | A boolean value that represents if the field should be rendered right-to-left or not. [More details](../configuration/i18n).                                                                                           |
-| **`user`**       | The currently authenticated user. [More details](../authentication/overview). |
-| **`validate`**   | A function that can be used to validate the field.                                                                                                                                                                                 |
-| **`hasMany`**    | If a [`relationship`](../fields/relationship) field, the `hasMany` property defined in the [Field Config](../fields/overview). |
-| **`maxLength`**  | If a [`text`](../fields/text) field, the `maxLength` property defined in the [Field Config](../fields/overview). |
-| **`minLength`**  | If a [`text`](../fields/text) field, the `minLength` property defined in the [Field Config](../fields/overview). |
-
-<Banner type="success">
-  <strong>Reminder:</strong>
-  All [Custom Server Components](./components) receive the `payload` and `i18n` properties by default. See [Building Custom Components](./components#building-custom-components) for more details.
-</Banner>
-
-#### Sending and receiving values from the form
-
-When swapping out the `Field` component, you are responsible for sending and receiving the field's `value` from the form itself.
-
-To do so, import the [`useField`](./hooks#usefield) hook from `@payloadcms/ui` and use it to manage the field's value:
-
-```tsx
-'use client'
-import { useField } from '@payloadcms/ui'
-
-export const CustomTextField: React.FC = () => {
-  const { value, setValue } = useField() // highlight-line
-
-  return (
-    <input
-      onChange={(e) => setValue(e.target.value)}
-      value={value}
-    />
-  )
-}
-```
-
-<Banner type="success">
-  For a complete list of all available React hooks, see the [Payload React Hooks](./hooks) documentation. For additional help, see [Building Custom Components](./components#building-custom-components).
-</Banner>
-
-### The Cell Component
-
-The Cell Component is rendered in the table of the List View. It represents the value of the field when displayed in a table cell.
-
-To easily swap in your own Cell Component, use the `admin.components.Cell` property in your [Field Config](../fields/overview):
-
-```ts
-import type { Field } from 'payload'
-
-export const myField: Field = {
-  name: 'myField',
-  type: 'text',
-  admin: {
-    components: {
-      Cell: MyCustomCell, // highlight-line
-    },
-  },
-}
-```
-
-_For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components)._
-
-All Cell Components receive the following props:
-
-| Property         | Description                                                       |
-| ---------------- | ----------------------------------------------------------------- |
-| **`name`** | The name of the field. |
-| **`className`**  | The `admin.className` property defined in the [Field Config](../fields/overview). |
-| **`fieldType`** | The `type` property defined in the [Field Config](../fields/overview). |
-| **`schemaPath`** | The path to the field in the schema. Similar to `path`, but without dynamic indices. |
-| **`isFieldAffectingData`** | A boolean value that represents if the field is affecting the data or not. |
-| **`label`** | The label value provided in the field, it can be used with i18n. |
-| **`labels`** | An object that contains the labels for the field. |
-| **`link`** | A boolean representing whether this cell should be wrapped in a link. |
-| **`onClick`** | A function that is called when the cell is clicked. |
-| **`dateDisplayFormat`** | If a [`date`](../fields/date) field, the `admin.dateDisplayFormat` property defined in the [Field Config](../fields/overview). |
-| **`options`** | If a [`select`](../fields/select) field, this is an array of options defined in the [Field Config](../fields/overview). [More details](../fields/select). |
-| **`relationTo`** | If a [`relationship`](../fields/relationship). or [`upload`](../fields/upload) field, this is the collection(s) the field is related to. |
-| **`richTextComponentMap`** | If a [`richText`](../fields/rich-text) field, this is an object that maps the rich text components. [More details](../fields/rich-text). |
-| **`blocks`** | If a [`blocks`](../fields/blocks) field, this is an array of labels and slugs representing the blocks defined in the [Field Config](../fields/overview). [More details](../fields/blocks). |
-
-<Banner type="info">
-  <strong>Tip:</strong>
-  Use the [`useTableCell`](./hooks#usetablecell) hook to subscribe to the field's `cellData` and `rowData`.
-</Banner>
-
-<Banner type="success">
-  <strong>Reminder:</strong>
-  All [Custom Server Components](./components) receive the `payload` and `i18n` properties by default. See [Building Custom Components](./components#building-custom-components) for more details.
-</Banner>
-
-### The Label Component
-
-The Label Component is rendered anywhere a field needs to be represented by a label. This is typically used in the Edit View, but can also be used in the List View and elsewhere.
-
-To easily swap in your own Label Component, use the `admin.components.Label` property in your [Field Config](../fields/overview):
-
-```ts
-import type { Field } from 'payload'
-
-export const myField: Field = {
-  name: 'myField',
-  type: 'text',
-  admin: {
-    components: {
-      Label: MyCustomLabel, // highlight-line
-    },
-  },
-}
-```
-
-_For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components)._
-
-Custom Label Components receive all [Field Component](#the-field-component) props, plus the following props:
-
-| Property       | Description                                                      |
-| -------------- | ---------------------------------------------------------------- |
-| **`schemaPath`** | The path to the field in the schema. Similar to `path`, but without dynamic indices. |
-
-<Banner type="success">
-  <strong>Reminder:</strong>
-  All [Custom Server Components](./components) receive the `payload` and `i18n` properties by default. See [Building Custom Components](./components#building-custom-components) for more details.
-</Banner>
-
-#### TypeScript
-
-When building Custom Error Components, you can import the component props to ensure type safety in your component. There is an explicit type for the Error Component, one for every [Field Type](../fields/overview). The convention is to append `ErrorComponent` to the type of field, i.e. `TextFieldErrorComponent`.
-
-```tsx
-import type {
-  ArrayFieldLabelComponent,
-  BlocksFieldLabelComponent,
-  CheckboxFieldLabelComponent,
-  CodeFieldLabelComponent,
-  CollapsibleFieldLabelComponent,
-  DateFieldLabelComponent,
-  EmailFieldLabelComponent,
-  GroupFieldLabelComponent,
-  HiddenFieldLabelComponent,
-  JSONFieldLabelComponent,
-  NumberFieldLabelComponent,
-  PointFieldLabelComponent,
-  RadioFieldLabelComponent,
-  RelationshipFieldLabelComponent,
-  RichTextFieldLabelComponent,
-  RowFieldLabelComponent,
-  SelectFieldLabelComponent,
-  TabsFieldLabelComponent,
-  TextFieldLabelComponent,
-  TextareaFieldLabelComponent,
-  UploadFieldLabelComponent
-} from 'payload'
-```
-
-### The Error Component
-
-The Error Component is rendered when a field fails validation. It is typically displayed beneath the field input in a visually-compelling style.
-
-To easily swap in your own Error Component, use the `admin.components.Error` property in your [Field Config](../fields/overview):
-
-```ts
-import type { Field } from 'payload'
-
-export const myField: Field = {
-  name: 'myField',
-  type: 'text',
-  admin: {
-    components: {
-      Error: MyCustomError, // highlight-line
-    },
-  },
-}
-```
-
-_For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components)._
-
-Custom Error Components receive all [Field Component](#the-field-component) props, plus the following props:
-
-| Property        | Description                                                   |
-| --------------- | ------------------------------------------------------------- |
-| **`path`***       | The static path of the field at render time. [More details](./hooks#usefieldprops). |
-
-<Banner type="success">
-  <strong>Reminder:</strong>
-  All [Custom Server Components](./components) receive the `payload` and `i18n` properties by default. See [Building Custom Components](./components#building-custom-components) for more details.
-</Banner>
-
-#### TypeScript
-
-When building Custom Error Components, you can import the component props to ensure type safety in your component. There is an explicit type for the Error Component, one for every [Field Type](../fields/overview). The convention is to append `ErrorComponent` to the type of field, i.e. `TextFieldErrorComponent`.
-
-```tsx
-import type {
-  ArrayFieldErrorComponent,
-  BlocksFieldErrorComponent,
-  CheckboxFieldErrorComponent,
-  CodeFieldErrorComponent,
-  CollapsibleFieldErrorComponent,
-  DateFieldErrorComponent,
-  EmailFieldErrorComponent,
-  GroupFieldErrorComponent,
-  HiddenFieldErrorComponent,
-  JSONFieldErrorComponent,
-  NumberFieldErrorComponent,
-  PointFieldErrorComponent,
-  RadioFieldErrorComponent,
-  RelationshipFieldErrorComponent,
-  RichTextFieldErrorComponent,
-  RowFieldErrorComponent,
-  SelectFieldErrorComponent,
-  TabsFieldErrorComponent,
-  TextFieldErrorComponent,
-  TextareaFieldErrorComponent,
-  UploadFieldErrorComponent
-} from 'payload'
-```
-
-### The Description Property
-
-Field Descriptions are used to provide additional information to the editor about a field, such as special instructions. Their placement varies from field to field, but typically are displayed with subtle style differences beneath the field inputs.
-
-A description can be configured in three ways:
-
-  - As a string.
-  - As a function which returns a string. [More details](#description-functions).
-  - As a React component. [More details](#the-description-component).
-
-To easily add a Custom Description to a field, use the `admin.description` property in your [Field Config](../fields/overview):
-
-```ts
-import type { SanitizedCollectionConfig } from 'payload'
-
-export const MyCollectionConfig: SanitizedCollectionConfig = {
-  // ...
-  fields: [
-    // ...
-    {
-      name: 'myField',
-      type: 'text',
-      admin: {
-        description: 'Hello, world!' // highlight-line
-      },
-    },
-  ]
-}
-```
-
-<Banner type="warning">
-  <strong>Reminder:</strong>
-  To replace the Field Description with a [Custom Component](./components), use the `admin.components.Description` property. [More details](#the-description-component).
-</Banner>
-
-#### Description Functions
-
-Custom Descriptions can also be defined as a function. Description Functions are executed on the server and can be used to format simple descriptions based on the user's current [Locale](../configuration/localization).
-
-To easily add a Description Function to a field, set the `admin.description` property to a _function_ in your [Field Config](../fields/overview):
-
-```ts
-import type { SanitizedCollectionConfig } from 'payload'
-
-export const MyCollectionConfig: SanitizedCollectionConfig = {
-  // ...
-  fields: [
-    // ...
-    {
-      name: 'myField',
-      type: 'text',
-      admin: {
-        description: ({ t }) => `${t('Hello, world!')}` // highlight-line
-      },
-    },
-  ]
-}
-```
-
-All Description Functions receive the following arguments:
-
-| Argument       | Description                                                      |
-| -------------- | ---------------------------------------------------------------- |
-| **`t`**        | The `t` function used to internationalize the Admin Panel. [More details](../configuration/i18n) |
-
-### The Description Component
-
-Alternatively to the [Description Property](#the-description-property), you can also use a [Custom Component](./components) as the Field Description. This can be useful when you need to provide more complex feedback to the user, such as rendering dynamic field values or other interactive elements.
-
-To easily add a Description Component to a field, use the `admin.components.Description` property in your [Field Config](../fields/overview):
-
-```ts
-import type { SanitizedCollectionConfig } from 'payload'
-import { MyCustomDescription } from './MyCustomDescription'
-
-export const MyCollectionConfig: SanitizedCollectionConfig = {
-  // ...
-  fields: [
-    // ...
-    {
-      name: 'myField',
-      type: 'text',
-      admin: {
-        components: {
-          Description: MyCustomDescription, // highlight-line
-        }
-      }
-    }
-  ]
-}
-```
-
-_For details on how to build a Custom Description, see [Building Custom Components](./components#building-custom-components)._
-
-Custom Description Components receive all [Field Component](#the-field-component) props, plus the following props:
-
-| Property       | Description                                                      |
-| -------------- | ---------------------------------------------------------------- |
-| **`description`**    | The `description` property defined in the [Field Config](../fields/overview).         |
-
-<Banner type="success">
-  <strong>Reminder:</strong>
-  All [Custom Server Components](./components) receive the `payload` and `i18n` properties by default. See [Building Custom Components](./components#building-custom-components) for more details.
-</Banner>
-
-#### TypeScript
-
-When building Custom Description Components, you can import the component props to ensure type safety in your component. There is an explicit type for the Description Component, one for every [Field Type](../fields/overview). The convention is to append `DescriptionComponent` to the type of field, i.e. `TextFieldDescriptionComponent`.
-
-```tsx
-import type {
-  ArrayFieldDescriptionComponent,
-  BlocksFieldDescriptionComponent,
-  CheckboxFieldDescriptionComponent,
-  CodeFieldDescriptionComponent,
-  CollapsibleFieldDescriptionComponent,
-  DateFieldDescriptionComponent,
-  EmailFieldDescriptionComponent,
-  GroupFieldDescriptionComponent,
-  HiddenFieldDescriptionComponent,
-  JSONFieldDescriptionComponent,
-  NumberFieldDescriptionComponent,
-  PointFieldDescriptionComponent,
-  RadioFieldDescriptionComponent,
-  RelationshipFieldDescriptionComponent,
-  RichTextFieldDescriptionComponent,
-  RowFieldDescriptionComponent,
-  SelectFieldDescriptionComponent,
-  TabsFieldDescriptionComponent,
-  TextFieldDescriptionComponent,
-  TextareaFieldDescriptionComponent,
-  UploadFieldDescriptionComponent
-} from 'payload'
-```
-
-### afterInput and beforeInput
-
-With these properties you can add multiple components _before_ and _after_ the input element, as their name suggests. This is useful when you need to render additional elements alongside the field without replacing the entire field component.
-
-To add components before and after the input element, use the `admin.components.beforeInput` and `admin.components.afterInput` properties in your [Field Config](../fields/overview):
-
-```ts
-import type { SanitizedCollectionConfig } from 'payload'
-
-export const MyCollectionConfig: SanitizedCollectionConfig = {
-  // ...
-  fields: [
-    // ...
-    {
-      name: 'myField',
-      type: 'text',
-      admin: {
-        components: {
-          // highlight-start
-          beforeInput: [MyCustomComponent],
-          afterInput: [MyOtherCustomComponent],
-          // highlight-end
-        }
-      }
-    }
-  ]
-}
-```
-
-_For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components)._
-
-## Conditional Logic
-
-You can show and hide fields based on what other fields are doing by utilizing conditional logic on a field by field basis. The `condition` property on a field's admin config accepts a function which takes three arguments:
-
-- `data` - the entire document's data that is currently being edited
-- `siblingData` - only the fields that are direct siblings to the field with the condition
-- `{ user }` - the final argument is an object containing the currently authenticated user
-
-The `condition` function should return a boolean that will control if the field should be displayed or not.
-
-**Example:**
-
-```ts
-{
-  fields: [
-    {
-      name: 'enableGreeting',
-      type: 'checkbox',
-      defaultValue: false,
-    },
-    {
-      name: 'greeting',
-      type: 'text',
-      admin: {
-        // highlight-start
-        condition: (data, siblingData, { user }) => {
-          if (data.enableGreeting) {
-            return true
-          } else {
-            return false
-          }
-        },
-        // highlight-end
-      },
-    },
-  ]
-}
-```