Merge branch 'alpha' of https://github.com/payloadcms/payload into chore/alpha-remove-schemaOutputFile

2024-03-11 14:05:33 -04:00
parent 189be7ce69 23510acf40
commit cd21138b3d
103 changed files with 2505 additions and 630 deletions
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -4,7 +4,7 @@ on:
  pull_request:
    types: [ opened, reopened, synchronize ]
  push:
-    branches: ['main', 'feat/next-poc']
+    branches: ['main', 'alpha']

 jobs:
  changes:
@@ -196,9 +196,6 @@ jobs:
          echo "POSTGRES_URL=postgresql://postgres:postgres@127.0.0.1:54322/postgres" >> $GITHUB_ENV
        if: matrix.database == 'supabase'

-      - name: Component Tests
-        run: pnpm test:components
-
      - name: Integration Tests
        run: pnpm test:int
        env:
--- a/.gitignore
+++ b/.gitignore
@@ -8,12 +8,15 @@ test-results
 .devcontainer
 .localstack
 /migrations
-/media
 .localstack
 .turbo

 .turbo

+# Ignore test directory media folder/files
+/media
+/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

@@ -285,3 +288,4 @@ $RECYCLE.BIN/
 # End of https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode

 /build
+.swc
--- a/.swcrc
+++ b/.swcrc
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": "inline",
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dts": true
+    }
+  },
+  "module": {
+    "type": "es6"
+  }
+}
--- a/docs/hooks/collections.mdx
+++ b/docs/hooks/collections.mdx
@@ -292,13 +292,11 @@ For auth-enabled Collections, this hook runs after successful `forgotPassword` o
 ```ts
 import { CollectionAfterForgotPasswordHook } from 'payload/types'

-const afterLoginHook: CollectionAfterForgotPasswordHook = async ({
-  req, // full express request
-  user, // user being logged in
-  token, // user token
-}) => {
-  return user
-}
+const afterForgotPasswordHook: CollectionAfterForgotPasswordHook = async ({
+  args, // arguments passed into the operation
+  context, 
+  collection, // The collection which this hook is being run on
+}) => {...}
 ```

 ## TypeScript
--- a/docs/plugins/build-your-own.mdx
+++ b/docs/plugins/build-your-own.mdx
@@ -290,5 +290,5 @@ If you&apos;ve configured tests for your package, integrate them into your workf
 The best way to share and allow others to use your plugin once it is complete is to publish an NPM package. This process is straightforward and well documented, find out more about [creating and publishing a NPM package here](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages/).
 ##### Add payload-plugin topic tag:
 Apply the tag **payload-plugin** to your GitHub repository. This will boost the visibility of your plugin and ensure it gets listed with [existing payload plugins](https://github.com/topics/payload-plugin).
-##### Use [Semantic Versioning](https://semver.org/) (SemVar):
-With the SemVar system you release version numbers that reflect the nature of changes (major, minor, patch). Ensure all major versions reference their Payload compatibility.
+##### Use [Semantic Versioning](https://semver.org/) (SemVer):
+With the SemVer system you release version numbers that reflect the nature of changes (major, minor, patch). Ensure all major versions reference their Payload compatibility.
--- a/emptyModule.js
+++ b/emptyModule.js
@@ -0,0 +1 @@
+export default {}
--- a/jest.components.config.js
+++ b/jest.components.config.js
@@ -1,16 +0,0 @@
-module.exports = {
-  moduleNameMapper: {
-    '\\.(css|scss)$': '<rootDir>/packages/payload/src/bundlers/mocks/emptyModule.js',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/packages/payload/src/bundlers/mocks/fileMock.js',
-  },
-  setupFilesAfterEnv: ['./test/componentsSetup.js'],
-  testEnvironment: 'jsdom',
-  testPathIgnorePatterns: ['node_modules', 'dist'],
-  testRegex: '(/src/admin/.*\\.(test|spec))\\.[jt]sx?$',
-  testTimeout: 15000,
-  transform: {
-    '^.+\\.(t|j)sx?$': ['@swc/jest'],
-  },
-  verbose: true,
-}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "payload-monorepo",
-  "version": "3.0.0-alpha.39",
+  "version": "3.0.0-alpha.44",
  "private": true,
  "type": "module",
  "workspaces:": [
@@ -8,9 +8,10 @@
  ],
  "scripts": {
    "build": "pnpm run build:core",
+    "obliterate-playwright-cache": "rm -rf ~/Library/Caches/ms-playwright && find /System/Volumes/Data/private/var/folders -type d -name 'playwright*' -exec rm -rf {} ++ && npx playwright install",
    "build:all": "turbo build",
    "build:core": "turbo build --filter \"!@payloadcms/plugin-*\"",
-    "build:plugins": "turbo build --filter \"@payloadcms/plugin-*\" --filter \"!@payloadcms/plugin-search\" --filter \"!@payloadcms/plugin-redirects\" --filter \"!@payloadcms/plugin-nested-docs\"",
+    "build:plugins": "turbo build --filter \"@payloadcms/plugin-*\"",
    "build:app": "next build",
    "build:app:analyze": "cross-env ANALYZE=true next build",
    "build:create-payload-app": "turbo build --filter create-payload-app",
@@ -40,6 +41,7 @@
    "clean:build": "find . \\( -type d \\( -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -not -path '*/node_modules/*' -exec rm -rf {} +",
    "clean:all": "find . \\( -type d \\( -name node_modules -o -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -exec rm -rf {} +",
    "dev": "cross-env node --no-deprecation ./test/dev.js",
+    "devsafe": "rm -rf .next && cross-env node --no-deprecation ./test/dev.js",
    "dev:generate-graphql-schema": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateGraphQLSchema.ts",
    "dev:generate-types": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateTypes.ts",
    "dev:postgres": "pnpm --filter payload run dev:postgres",
@@ -70,7 +72,7 @@
    "@next/bundle-analyzer": "^14.1.0",
    "@octokit/core": "^5.1.0",
    "@payloadcms/eslint-config": "workspace:*",
-    "@playwright/test": "1.42.1",
+    "@playwright/test": "^1.42.1",
    "@swc/cli": "^0.1.62",
    "@swc/jest": "0.2.36",
    "@testing-library/jest-dom": "6.4.2",
@@ -122,8 +124,8 @@
    "nodemon": "3.0.3",
    "pino": "8.15.0",
    "pino-pretty": "10.2.0",
-    "playwright": "file:playwright-1.43.0-next.tgz",
-    "playwright-core": "file:playwright-core-1.43.0-next.tgz",
+    "playwright": "^1.42.1",
+    "playwright-core": "^1.42.1",
    "prettier": "^3.0.3",
    "prompts": "2.4.2",
    "qs": "6.11.2",
@@ -155,7 +157,8 @@
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
-      "prettier --write"
+      "prettier --write",
+      "eslint --cache --fix"
    ]
  },
  "dependencies": {
@@ -171,9 +174,7 @@
      "graphql": "^16.8.1",
      "react": "$react",
      "react-dom": "$react-dom",
-      "typescript": "$typescript",
-      "playwright": "file:playwright-1.43.0-next.tgz",
-      "playwright-core": "file:playwright-core-1.43.0-next.tgz"
+      "typescript": "$typescript"
    },
    "allowedDeprecatedVersions": {
      "uuid": "3.4.0",
--- a/packages/create-payload-app/.swcrc
+++ b/packages/create-payload-app/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/db-mongodb/.swcrc
+++ b/packages/db-mongodb/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/db-mongodb/package.json
+++ b/packages/db-mongodb/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/db-mongodb",
-  "version": "3.0.0-alpha.38",
+  "version": "3.0.0-alpha.44",
  "description": "The officially supported MongoDB database adapter for Payload - Update 2",
  "repository": "https://github.com/payloadcms/payload",
  "license": "MIT",
--- a/packages/db-postgres/.swcrc
+++ b/packages/db-postgres/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/db-postgres/package.json
+++ b/packages/db-postgres/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/db-postgres",
-  "version": "3.0.0-alpha.38",
+  "version": "3.0.0-alpha.44",
  "description": "The officially supported Postgres database adapter for Payload",
  "repository": "https://github.com/payloadcms/payload",
  "license": "MIT",
--- a/packages/db-postgres/src/connect.ts
+++ b/packages/db-postgres/src/connect.ts
@@ -1,14 +1,14 @@
 import type { Payload } from 'payload'
 import type { Connect } from 'payload/database'

-import { eq, sql } from 'drizzle-orm'
+import { sql } from 'drizzle-orm'
 import { drizzle } from 'drizzle-orm/node-postgres'
-import { numeric, timestamp, varchar } from 'drizzle-orm/pg-core'
 import pg from 'pg'
-import prompts from 'prompts'

 import type { PostgresAdapter } from './types.js'

+import { pushDevSchema } from './utilities/pushDevSchema.js'
+
 const connectWithReconnect = async function ({
  adapter,
  payload,
@@ -93,70 +93,5 @@ export const connect: Connect = async function connect(
  )
    return

-  const { pushSchema } = await import('drizzle-kit/payload')
-
-  // This will prompt if clarifications are needed for Drizzle to push new schema
-  const { apply, hasDataLoss, statementsToExecute, warnings } = await pushSchema(
-    this.schema,
-    this.drizzle,
-  )
-
-  if (warnings.length) {
-    let message = `Warnings detected during schema push: \n\n${warnings.join('\n')}\n\n`
-
-    if (hasDataLoss) {
-      message += `DATA LOSS WARNING: Possible data loss detected if schema is pushed.\n\n`
-    }
-
-    message += `Accept warnings and push schema to database?`
-
-    const { confirm: acceptWarnings } = await prompts(
-      {
-        name: 'confirm',
-        type: 'confirm',
-        initial: false,
-        message,
-      },
-      {
-        onCancel: () => {
-          process.exit(0)
-        },
-      },
-    )
-
-    // Exit if user does not accept warnings.
-    // Q: Is this the right type of exit for this interaction?
-    if (!acceptWarnings) {
-      process.exit(0)
-    }
-  }
-
-  await apply()
-
-  // Migration table def in order to use query using drizzle
-  const migrationsSchema = this.pgSchema.table('payload_migrations', {
-    name: varchar('name'),
-    batch: numeric('batch'),
-    created_at: timestamp('created_at'),
-    updated_at: timestamp('updated_at'),
-  })
-
-  const devPush = await this.drizzle
-    .select()
-    .from(migrationsSchema)
-    .where(eq(migrationsSchema.batch, '-1'))
-
-  if (!devPush.length) {
-    await this.drizzle.insert(migrationsSchema).values({
-      name: 'dev',
-      batch: '-1',
-    })
-  } else {
-    await this.drizzle
-      .update(migrationsSchema)
-      .set({
-        updated_at: new Date(),
-      })
-      .where(eq(migrationsSchema.batch, '-1'))
-  }
+  await pushDevSchema(this)
 }
--- a/packages/db-postgres/src/createMigration.ts
+++ b/packages/db-postgres/src/createMigration.ts
@@ -3,10 +3,13 @@ import type { DrizzleSnapshotJSON } from 'drizzle-kit/payload'
 import type { CreateMigration } from 'payload/database'

 import fs from 'fs'
+import { createRequire } from 'module'
 import prompts from 'prompts'

 import type { PostgresAdapter } from './types.js'

+const require = createRequire(import.meta.url)
+
 const migrationTemplate = (
  upSQL?: string,
  downSQL?: string,
@@ -60,7 +63,7 @@ export const createMigration: CreateMigration = async function createMigration(
    fs.mkdirSync(dir)
  }

-  const { generateDrizzleJson, generateMigration } = await import('drizzle-kit/payload')
+  const { generateDrizzleJson, generateMigration } = require('drizzle-kit/payload')

  const [yyymmdd, hhmmss] = new Date().toISOString().split('T')
  const formattedDate = yyymmdd.replace(/\D/g, '')
--- a/packages/db-postgres/src/destroy.ts
+++ b/packages/db-postgres/src/destroy.ts
@@ -2,7 +2,13 @@ import type { Destroy } from 'payload/database'

 import type { PostgresAdapter } from './types.js'

+import { pushDevSchema } from './utilities/pushDevSchema.js'
+
 export const destroy: Destroy = async function destroy(this: PostgresAdapter) {
+  if (process.env.NODE_ENV !== 'production') {
+    await pushDevSchema(this)
+  } else {
    // TODO: this hangs test suite for some reason
    // await this.pool.end()
  }
+}
--- a/packages/db-postgres/src/migrate.ts
+++ b/packages/db-postgres/src/migrate.ts
@@ -3,6 +3,7 @@ import type { Payload } from 'payload'
 import type { Migration } from 'payload/database'
 import type { PayloadRequest } from 'payload/types'

+import { createRequire } from 'module'
 import {
  commitTransaction,
  initTransaction,
@@ -17,6 +18,8 @@ import { createMigrationTable } from './utilities/createMigrationTable.js'
 import { migrationTableExists } from './utilities/migrationTableExists.js'
 import { parseError } from './utilities/parseError.js'

+const require = createRequire(import.meta.url)
+
 export async function migrate(this: PostgresAdapter): Promise<void> {
  const { payload } = this
  const migrationFiles = await readMigrationFiles({ payload })
@@ -82,7 +85,7 @@ export async function migrate(this: PostgresAdapter): Promise<void> {
 }

 async function runMigrationFile(payload: Payload, migration: Migration, batch: number) {
-  const { generateDrizzleJson } = await import('drizzle-kit/payload')
+  const { generateDrizzleJson } = require('drizzle-kit/payload')

  const start = Date.now()
  const req = { payload } as PayloadRequest
--- a/packages/db-postgres/src/utilities/pushDevSchema.ts
+++ b/packages/db-postgres/src/utilities/pushDevSchema.ts
@@ -0,0 +1,83 @@
+import { eq } from 'drizzle-orm'
+import { numeric, timestamp, varchar } from 'drizzle-orm/pg-core'
+import { createRequire } from 'module'
+import prompts from 'prompts'
+
+import type { PostgresAdapter } from '../types.js'
+
+const require = createRequire(import.meta.url)
+
+/**
+ * Pushes the development schema to the database using Drizzle.
+ *
+ * @param {PostgresAdapter} db - The PostgresAdapter instance connected to the database.
+ * @returns {Promise<void>} - A promise that resolves once the schema push is complete.
+ */
+export const pushDevSchema = async (db: PostgresAdapter) => {
+  const { pushSchema } = require('drizzle-kit/payload')
+
+  // This will prompt if clarifications are needed for Drizzle to push new schema
+  const { apply, hasDataLoss, statementsToExecute, warnings } = await pushSchema(
+    db.schema,
+    db.drizzle,
+  )
+
+  if (warnings.length) {
+    let message = `Warnings detected during schema push: \n\n${warnings.join('\n')}\n\n`
+
+    if (hasDataLoss) {
+      message += `DATA LOSS WARNING: Possible data loss detected if schema is pushed.\n\n`
+    }
+
+    message += `Accept warnings and push schema to database?`
+
+    const { confirm: acceptWarnings } = await prompts(
+      {
+        name: 'confirm',
+        type: 'confirm',
+        initial: false,
+        message,
+      },
+      {
+        onCancel: () => {
+          process.exit(0)
+        },
+      },
+    )
+
+    // Exit if user does not accept warnings.
+    // Q: Is this the right type of exit for this interaction?
+    if (!acceptWarnings) {
+      process.exit(0)
+    }
+  }
+
+  await apply()
+
+  // Migration table def in order to use query using drizzle
+  const migrationsSchema = db.pgSchema.table('payload_migrations', {
+    name: varchar('name'),
+    batch: numeric('batch'),
+    created_at: timestamp('created_at'),
+    updated_at: timestamp('updated_at'),
+  })
+
+  const devPush = await db.drizzle
+    .select()
+    .from(migrationsSchema)
+    .where(eq(migrationsSchema.batch, '-1'))
+
+  if (!devPush.length) {
+    await db.drizzle.insert(migrationsSchema).values({
+      name: 'dev',
+      batch: '-1',
+    })
+  } else {
+    await db.drizzle
+      .update(migrationsSchema)
+      .set({
+        updated_at: new Date(),
+      })
+      .where(eq(migrationsSchema.batch, '-1'))
+  }
+}
--- a/packages/graphql/.swcrc
+++ b/packages/graphql/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/graphql/package.json
+++ b/packages/graphql/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/graphql",
-  "version": "3.0.0-alpha.38",
+  "version": "3.0.0-alpha.44",
  "main": "./src/index.ts",
  "types": "./src/index.d.ts",
  "type": "module",
--- a/packages/live-preview-react/.swcrc
+++ b/packages/live-preview-react/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/live-preview/.swcrc
+++ b/packages/live-preview/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/next/.swcrc
+++ b/packages/next/.swcrc
@@ -1,12 +1,22 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "experimental": {
+      "plugins": [
+        [
+          "swc-plugin-transform-remove-imports",
+          {
+            "test": "\\.(scss|css)$"
+          }
+        ]
+      ]
    }
  },
  "module": {
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/next",
-  "version": "3.0.0-alpha.39",
+  "version": "3.0.0-alpha.44",
  "main": "./src/index.ts",
  "types": "./src/index.d.ts",
  "type": "module",
@@ -8,9 +8,10 @@
    "@payloadcms/next": "./dist/bin/index.js"
  },
  "scripts": {
-    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
+    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types && pnpm build:webpack && rm dist/prod/index.js",
    "build:swc": "swc ./src -d ./dist --config-file .swcrc",
    "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "build:webpack": "webpack --config webpack.config.js",
    "clean": "rimraf {dist,*.tsbuildinfo}",
    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" \"src/app/api/**\" dist/ && pnpm copyfiles:api",
    "copyfiles:api": "copyfiles -u 1 \"src/app/(payload)/**\" dist/template",
@@ -50,7 +51,18 @@
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "@types/ws": "^8.5.10",
-    "payload": "workspace:*"
+    "css-loader": "^6.10.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
+    "mini-css-extract-plugin": "1.6.2",
+    "payload": "workspace:*",
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^9.5.0",
+    "sass-loader": "^14.1.1",
+    "swc-loader": "^0.2.6",
+    "swc-plugin-transform-remove-imports": "^1.12.1",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.78.0",
+    "webpack-cli": "^5.1.4"
  },
  "dependencies": {
    "@dnd-kit/core": "6.0.8",
@@ -79,6 +91,11 @@
    "main": "./dist/exports/index.js",
    "types": "./dist/exports/index.d.ts",
    "exports": {
+      "./css": {
+        "import": "./dist/prod/styles.css",
+        "require": "./dist/prod/styles.css",
+        "default": "./dist/prod/styles.css"
+      },
      "./withPayload": {
        "import": "./dist/withPayload.js",
        "require": "./dist/withPayload.js",
--- a/packages/next/src/layouts/Root/index.tsx
+++ b/packages/next/src/layouts/Root/index.tsx
@@ -1,6 +1,5 @@
 import type { SanitizedConfig } from 'payload/types'

-import { auth } from '@payloadcms/next/utilities/auth'
 import { translations } from '@payloadcms/translations/client'
 import { RootProvider, buildComponentMap } from '@payloadcms/ui'
 import '@payloadcms/ui/scss/app.scss'
@@ -11,6 +10,7 @@ import React from 'react'
 import 'react-toastify/dist/ReactToastify.css'

 import { ClearRouteCache } from '../../elements/ClearRouteCache/index.js'
+import { auth } from '../../utilities/auth.js'
 import { getPayload } from '../../utilities/getPayload.js'
 import { getRequestLanguage } from '../../utilities/getRequestLanguage.js'
 import { DefaultEditView } from '../../views/Edit/Default/index.js'
--- a/packages/next/src/scss/app.scss
+++ b/packages/next/src/scss/app.scss
@@ -1,5 +1,5 @@
-@import 'fonts';
-@import 'styles';
+@import './fonts.scss';
+@import './styles.scss';
@import './toastify.scss';
@import './colors.scss';

--- a/packages/next/src/utilities/getPayload.ts
+++ b/packages/next/src/utilities/getPayload.ts
@@ -12,6 +12,10 @@ if (!cached) {
 }

 export const getPayload = async (options: InitOptions): Promise<Payload> => {
+  if (!options?.config) {
+    throw new Error('Error: the payload config is required for getPayload to work.')
+  }
+
  if (cached.payload) {
    const config = await options.config

@@ -47,7 +51,8 @@ export const getPayload = async (options: InitOptions): Promise<Payload> => {

    if (process.env.NODE_ENV !== 'production') {
      try {
-        const ws = new WebSocket('ws://localhost:3000/_next/webpack-hmr')
+        const port = process.env.PORT || '3000'
+        const ws = new WebSocket(`ws://localhost:${port}/_next/webpack-hmr`)

        ws.onmessage = (event) => {
          if (typeof event.data === 'string') {
--- a/packages/next/src/views/List/Default/Cell/cellTypes.spec.tsx
+++ b/packages/next/src/views/List/Default/Cell/cellTypes.spec.tsx
@@ -1,172 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import type { BlockField, DateField, SelectField } from 'payload/types'
-
-import { BlocksCell } from './fields/Blocks'
-import { Checkbox } from './fields/Checkbox'
-import { DateCell } from './fields/Date'
-import { Select } from './fields/Select'
-import { Textarea } from './fields/Textarea'
-
-jest.mock('../../../../utilities/Config', () => ({
-  useConfig: () => ({ admin: { dateFormat: 'MMMM do yyyy, h:mm a' } }),
-}))
-
-jest.mock('../../../../providers/Translation', () => ({
-  useTranslation: () => ({ t: (string) => string }),
-}))
-
-describe('Cell Types', () => {
-  describe('Blocks', () => {
-    const field: BlockField = {
-      blocks: [
-        {
-          fields: [],
-          labels: {
-            plural: 'Numbers',
-            singular: 'Number',
-          },
-          slug: 'number',
-        },
-      ],
-      label: 'Blocks Content',
-      labels: {
-        plural: 'Blocks Content',
-        singular: 'Block',
-      },
-      name: 'blocks',
-      type: 'blocks',
-    }
-
-    it('renders multiple', () => {
-      const data = [{ blockType: 'number' }, { blockType: 'number' }]
-      const { container } = render(<BlocksCell data={data} field={field} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('2 Blocks Content - Number, Number')
-    })
-
-    it('renders zero', () => {
-      const data = []
-      const { container } = render(<BlocksCell data={data} field={field} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('0 Blocks Content')
-    })
-
-    it('renders "and X more" if over maximum of 5', () => {
-      const data = [
-        { blockType: 'number' },
-        { blockType: 'number' },
-        { blockType: 'number' },
-        { blockType: 'number' },
-        { blockType: 'number' },
-        { blockType: 'number' },
-      ]
-
-      const { container } = render(<BlocksCell data={data} field={field} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('fields:itemsAndMore')
-    })
-  })
-
-  describe('Date', () => {
-    const field: DateField = {
-      admin: {
-        date: {
-          pickerAppearance: 'dayOnly',
-        },
-      },
-      name: 'dayOnly',
-      type: 'date',
-    }
-
-    it('renders date', () => {
-      const timeStamp = '2020-10-06T14:07:39.033Z'
-      const { container } = render(<DateCell data={timeStamp} field={field} />)
-      const dateMatch = /October\s6th\s2020,\s\d{1,2}:07\s[A|P]M/ // Had to account for timezones in CI
-      const el = container.querySelector('span')
-      expect(el.textContent).toMatch(dateMatch)
-    })
-
-    it('handles undefined', () => {
-      const timeStamp = undefined
-      const { container } = render(<DateCell data={timeStamp} field={field} />)
-      const el = container.querySelector('span')
-      expect(el.textContent).toBe('')
-    })
-  })
-
-  describe('Checkbox', () => {
-    it('renders true', () => {
-      const { container } = render(<Checkbox data />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('true')
-    })
-    it('renders false', () => {
-      const { container } = render(<Checkbox data={false} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('false')
-    })
-  })
-
-  describe('Textarea', () => {
-    it('renders data', () => {
-      const { container } = render(<Textarea data="data" />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('data')
-    })
-    it('handle undefined - bug/13', () => {
-      const { container } = render(<Textarea data={undefined} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('')
-    })
-  })
-  describe('Select', () => {
-    const fieldWithOptionsObject: SelectField = {
-      name: 'selectObject',
-      options: [
-        {
-          label: 'One',
-          value: 'one',
-        },
-        {
-          label: 'Two',
-          value: 'two',
-        },
-      ],
-      type: 'select',
-    }
-    const fieldWithStringsOptions: SelectField = {
-      name: 'selectString',
-      options: ['blue', 'green', 'yellow'],
-      type: 'select',
-    }
-    it('renders options objects', () => {
-      const { container } = render(<Select data="one" field={fieldWithOptionsObject} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('One')
-    })
-    it('renders option strings', () => {
-      const { container } = render(<Select data="blue" field={fieldWithStringsOptions} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('blue')
-    })
-
-    describe('HasMany', () => {
-      it('renders options objects', () => {
-        const { container } = render(
-          <Select data={['one', 'two']} field={fieldWithOptionsObject} />,
-        )
-        const el = container.querySelector('span')
-        expect(el).toHaveTextContent('One, Two')
-      })
-      it('renders option strings', () => {
-        const { container } = render(
-          <Select data={['blue', 'green']} field={fieldWithStringsOptions} />,
-        )
-        const el = container.querySelector('span')
-        expect(el).toHaveTextContent('blue, green')
-      })
-    })
-  })
-})
--- a/packages/next/src/withPayload.js
+++ b/packages/next/src/withPayload.js
@@ -33,8 +33,6 @@ const withPayload = (nextConfig = {}) => {
          ...(incomingWebpackConfig?.externals || []),
          'drizzle-kit',
          'drizzle-kit/payload',
-          'pino',
-          'pino-pretty',
          'sharp',
          'libsql',
        ],
--- a/packages/next/webpack.config.js
+++ b/packages/next/webpack.config.js
@@ -0,0 +1,107 @@
+import OptimizeCSSAssetsPlugin from 'css-minimizer-webpack-plugin'
+import MiniCSSExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+import TerserJSPlugin from 'terser-webpack-plugin'
+import { fileURLToPath } from 'url'
+import webpack from 'webpack'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+const componentWebpackConfig = {
+  entry: path.resolve(dirname, './src/index.ts'),
+  externals: ['react', 'react-dom', 'payload', 'payload/config', 'react-image-crop'],
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        oneOf: [
+          {
+            // exclude: /node_modules/,
+            test: /\.(t|j)sx?$/,
+            use: [
+              {
+                loader: 'swc-loader',
+                options: {
+                  jsc: {
+                    experimental: {
+                      plugins: [
+                        // clear the plugins used in .swcrc
+                      ],
+                    },
+                    parser: {
+                      syntax: 'typescript',
+                      tsx: true,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            sideEffects: true,
+            test: /\.(scss|css)$/,
+            use: [
+              MiniCSSExtractPlugin.loader,
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: ['postcss-preset-env'],
+                  },
+                },
+              },
+              'sass-loader',
+            ],
+          },
+          {
+            type: 'asset/resource',
+            generator: {
+              filename: 'payload/[name][ext]',
+            },
+            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/, /\.woff$/, /\.woff2$/],
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserJSPlugin({
+        extractComments: false,
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  output: {
+    filename: 'index.js',
+    libraryTarget: 'commonjs2',
+    path: path.resolve(dirname, './dist/prod'),
+    publicPath: '/',
+  },
+  plugins: [
+    new MiniCSSExtractPlugin({
+      filename: 'styles.css',
+      ignoreOrder: true,
+    }),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+  ],
+  resolve: {
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js', '.scss', '.css'],
+      '.mjs': ['.mts', '.mjs'],
+    },
+    extensions: ['.js', '.ts', '.tsx', '.scss', '.css'],
+    modules: [
+      'node_modules',
+      path.resolve(dirname, '../../node_modules'),
+      path.resolve(dirname, './node_modules'),
+    ],
+  },
+  stats: 'errors-only',
+}
+
+export default componentWebpackConfig
--- a/packages/payload/.swcrc
+++ b/packages/payload/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/payload/package.json
+++ b/packages/payload/package.json
@@ -1,6 +1,6 @@
 {
  "name": "payload",
-  "version": "3.0.0-alpha.38",
+  "version": "3.0.0-alpha.44",
  "description": "Node, React and MongoDB Headless CMS and Application Framework",
  "license": "MIT",
  "main": "./src/index.js",
--- a/packages/payload/src/index.ts
+++ b/packages/payload/src/index.ts
@@ -273,13 +273,6 @@ export class BasePayload<TGeneratedTypes extends GeneratedTypes> {
    [slug: string]: any // TODO: Type this
  } = {}

-  delete<T extends keyof TGeneratedTypes['collections']>(
-    options: DeleteOptions<T>,
-  ): Promise<BulkOperationResult<T> | TGeneratedTypes['collections'][T]> {
-    const { deleteLocal } = localOperations
-    return deleteLocal<T>(this, options)
-  }
-
  /**
   * @description delete one or more documents
   * @param options
@@ -293,12 +286,22 @@ export class BasePayload<TGeneratedTypes extends GeneratedTypes> {
    options: DeleteManyOptions<T>,
  ): Promise<BulkOperationResult<T>>

+  delete<T extends keyof TGeneratedTypes['collections']>(
+    options: DeleteOptions<T>,
+  ): Promise<BulkOperationResult<T> | TGeneratedTypes['collections'][T]> {
+    const { deleteLocal } = localOperations
+    return deleteLocal<T>(this, options)
+  }
+
  /**
   * @description Initializes Payload
   * @param options
   */
-  // @ts-expect-error // TODO: TypeScript hallucinating again. fix later
  async init(options: InitOptions): Promise<Payload> {
+    if (!options?.config) {
+      throw new Error('Error: the payload config is required to initialize payload.')
+    }
+
    this.logger = Logger('payload', options.loggerOptions, options.loggerDestination)

    this.config = await options.config
@@ -421,7 +424,11 @@ if (!cached) {
  cached = global._payload = { payload: null, promise: null }
 }

-export const getPayload = async (options?: InitOptions): Promise<BasePayload<GeneratedTypes>> => {
+export const getPayload = async (options: InitOptions): Promise<BasePayload<GeneratedTypes>> => {
+  if (!options?.config) {
+    throw new Error('Error: the payload config is required for getPayload to work.')
+  }
+
  if (cached.payload) {
    return cached.payload
  }
--- a/packages/payload/src/preferences/operations/delete.ts
+++ b/packages/payload/src/preferences/operations/delete.ts
@@ -38,7 +38,6 @@ async function deleteOperation(args: PreferenceRequest): Promise<Document> {
    where,
  })

-  // @ts-expect-error // TODO: fix later
  if (result.docs.length === 1) {
    return result.docs[0]
  }
--- a/packages/payload/src/uploads/isImage.ts
+++ b/packages/payload/src/uploads/isImage.ts
@@ -1,5 +1,7 @@
 export default function isImage(mimeType: string): boolean {
  return (
-    ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp'].indexOf(mimeType) > -1
+    ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp', 'image/avif'].indexOf(
+      mimeType,
+    ) > -1
  )
 }
--- a/packages/plugin-cloud-storage/.swcrc
+++ b/packages/plugin-cloud-storage/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/plugin-cloud-storage/package.json
+++ b/packages/plugin-cloud-storage/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@payloadcms/plugin-cloud-storage",
  "description": "The official cloud storage plugin for Payload CMS",
-  "version": "3.0.0-alpha.38",
+  "version": "3.0.0-alpha.44",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "type": "module",
--- a/packages/plugin-cloud/.swcrc
+++ b/packages/plugin-cloud/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "exclude": ["/**/*.spec.ts", "/**/mocks"],
  "jsc": {
    "target": "esnext",
--- a/packages/plugin-cloud/package.json
+++ b/packages/plugin-cloud/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@payloadcms/plugin-cloud",
  "description": "The official Payload Cloud plugin",
-  "version": "3.0.0-alpha.38",
+  "version": "3.0.0-alpha.44",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "license": "MIT",
--- a/packages/plugin-form-builder/.swcrc
+++ b/packages/plugin-form-builder/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "exclude": ["/**/mocks"],
  "jsc": {
    "target": "esnext",
--- a/packages/plugin-form-builder/package.json
+++ b/packages/plugin-form-builder/package.json
@@ -18,7 +18,7 @@
    "test": "echo \"No tests available.\""
  },
  "peerDependencies": {
-    "payload": "^0.18.5 || ^1.0.0 || ^2.0.0",
+    "payload": "workspace:*",
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "dependencies": {
--- a/packages/plugin-form-builder/src/collections/FormSubmissions/hooks/createCharge.ts
+++ b/packages/plugin-form-builder/src/collections/FormSubmissions/hooks/createCharge.ts
@@ -1,4 +1,4 @@
-import type { PluginConfig } from '../../../types'
+import type { PluginConfig } from '../../../types.js'

 const createCharge = async (beforeChangeData: any, formConfig: PluginConfig): Promise<any> => {
  const { data, operation } = beforeChangeData
--- a/packages/plugin-form-builder/src/collections/FormSubmissions/hooks/sendEmail.ts
+++ b/packages/plugin-form-builder/src/collections/FormSubmissions/hooks/sendEmail.ts
@@ -1,8 +1,8 @@
-import type { Email, FormattedEmail, PluginConfig } from '../../../types'
+import type { Email, FormattedEmail, PluginConfig } from '../../../types.js'

-import { serializeLexical } from '../../../utilities/lexical/serializeLexical'
-import { replaceDoubleCurlys } from '../../../utilities/replaceDoubleCurlys'
-import { serializeSlate } from '../../../utilities/slate/serializeSlate'
+import { serializeLexical } from '../../../utilities/lexical/serializeLexical.js'
+import { replaceDoubleCurlys } from '../../../utilities/replaceDoubleCurlys.js'
+import { serializeSlate } from '../../../utilities/slate/serializeSlate.js'

 const sendEmail = async (beforeChangeData: any, formConfig: PluginConfig): Promise<any> => {
  const { data, operation, req } = beforeChangeData
--- a/packages/plugin-form-builder/src/collections/FormSubmissions/index.ts
+++ b/packages/plugin-form-builder/src/collections/FormSubmissions/index.ts
@@ -1,9 +1,9 @@
 import type { CollectionConfig } from 'payload/types'

-import type { PluginConfig } from '../../types'
+import type { PluginConfig } from '../../types.js'

-import createCharge from './hooks/createCharge'
-import sendEmail from './hooks/sendEmail'
+import createCharge from './hooks/createCharge.js'
+import sendEmail from './hooks/sendEmail.js'

 // all settings can be overridden by the config
 export const generateSubmissionCollection = (formConfig: PluginConfig): CollectionConfig => {
@@ -31,7 +31,7 @@ export const generateSubmissionCollection = (formConfig: PluginConfig): Collecti
        },
        relationTo: formSlug,
        required: true,
-        validate: async (value, { payload, req }) => {
+        validate: async (value, { req: { payload }, req }) => {
          /* Don't run in the client side */
          if (!payload) return true

--- a/packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx
+++ b/packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx
@@ -34,5 +34,7 @@ export const DynamicFieldSelector: React.FC<TextField> = (props) => {
    }
  }, [fields, getDataByPath])

+  // TODO: label from config is Record<string, string> | false | string
+  //  but the FormFieldBase type has only label?: string, changing FormFieldBase breaks other ui components
  return <Select {...props} options={options} />
 }
--- a/packages/plugin-form-builder/src/collections/Forms/fields.ts
+++ b/packages/plugin-form-builder/src/collections/Forms/fields.ts
@@ -1,39 +1,41 @@
 import type { Block, Field } from 'payload/types'

-import type { FieldConfig, PaymentFieldConfig } from '../../types'
+import type { FieldConfig, PaymentFieldConfig } from '../../types.js'

-import { DynamicFieldSelector } from './DynamicFieldSelector'
-import { DynamicPriceSelector } from './DynamicPriceSelector'
+import { DynamicFieldSelector } from './DynamicFieldSelector.js'
+import { DynamicPriceSelector } from './DynamicPriceSelector.js'

 const name: Field = {
  name: 'name',
+  type: 'text',
  label: 'Name (lowercase, no special characters)',
  required: true,
-  type: 'text',
 }

 const label: Field = {
  name: 'label',
+  type: 'text',
  label: 'Label',
  localized: true,
-  type: 'text',
 }

 const required: Field = {
  name: 'required',
-  label: 'Required',
  type: 'checkbox',
+  label: 'Required',
 }

 const width: Field = {
  name: 'width',
-  label: 'Field Width (percentage)',
  type: 'number',
+  label: 'Field Width (percentage)',
 }

 const Select: Block = {
+  slug: 'select',
  fields: [
    {
+      type: 'row',
      fields: [
        {
          ...name,
@@ -48,9 +50,9 @@ const Select: Block = {
          },
        },
      ],
-      type: 'row',
    },
    {
+      type: 'row',
      fields: [
        {
          ...width,
@@ -60,42 +62,42 @@ const Select: Block = {
        },
        {
          name: 'defaultValue',
+          type: 'text',
          admin: {
            width: '50%',
          },
          label: 'Default Value',
          localized: true,
-          type: 'text',
        },
      ],
-      type: 'row',
    },
    {
      name: 'options',
+      type: 'array',
      fields: [
        {
+          type: 'row',
          fields: [
            {
              name: 'label',
+              type: 'text',
              admin: {
                width: '50%',
              },
              label: 'Label',
              localized: true,
              required: true,
-              type: 'text',
            },
            {
              name: 'value',
+              type: 'text',
              admin: {
                width: '50%',
              },
              label: 'Value',
              required: true,
-              type: 'text',
            },
          ],
-          type: 'row',
        },
      ],
      label: 'Select Attribute Options',
@@ -103,7 +105,6 @@ const Select: Block = {
        plural: 'Options',
        singular: 'Option',
      },
-      type: 'array',
    },
    required,
  ],
@@ -111,12 +112,13 @@ const Select: Block = {
    plural: 'Select Fields',
    singular: 'Select',
  },
-  slug: 'select',
 }

 const Text: Block = {
+  slug: 'text',
  fields: [
    {
+      type: 'row',
      fields: [
        {
          ...name,
@@ -131,9 +133,9 @@ const Text: Block = {
          },
        },
      ],
-      type: 'row',
    },
    {
+      type: 'row',
      fields: [
        {
          ...width,
@@ -143,15 +145,14 @@ const Text: Block = {
        },
        {
          name: 'defaultValue',
+          type: 'text',
          admin: {
            width: '50%',
          },
          label: 'Default Value',
          localized: true,
-          type: 'text',
        },
      ],
-      type: 'row',
    },
    required,
  ],
@@ -159,12 +160,13 @@ const Text: Block = {
    plural: 'Text Fields',
    singular: 'Text',
  },
-  slug: 'text',
 }

 const TextArea: Block = {
+  slug: 'textarea',
  fields: [
    {
+      type: 'row',
      fields: [
        {
          ...name,
@@ -179,9 +181,9 @@ const TextArea: Block = {
          },
        },
      ],
-      type: 'row',
    },
    {
+      type: 'row',
      fields: [
        {
          ...width,
@@ -191,15 +193,14 @@ const TextArea: Block = {
        },
        {
          name: 'defaultValue',
+          type: 'text',
          admin: {
            width: '50%',
          },
          label: 'Default Value',
          localized: true,
-          type: 'text',
        },
      ],
-      type: 'row',
    },
    required,
  ],
@@ -207,12 +208,13 @@ const TextArea: Block = {
    plural: 'Text Area Fields',
    singular: 'Text Area',
  },
-  slug: 'textarea',
 }

 const Number: Block = {
+  slug: 'number',
  fields: [
    {
+      type: 'row',
      fields: [
        {
          ...name,
@@ -227,9 +229,9 @@ const Number: Block = {
          },
        },
      ],
-      type: 'row',
    },
    {
+      type: 'row',
      fields: [
        {
          ...width,
@@ -239,14 +241,13 @@ const Number: Block = {
        },
        {
          name: 'defaultValue',
+          type: 'number',
          admin: {
            width: '50%',
          },
          label: 'Default Value',
-          type: 'number',
        },
      ],
-      type: 'row',
    },
    required,
  ],
@@ -254,12 +255,13 @@ const Number: Block = {
    plural: 'Number Fields',
    singular: 'Number',
  },
-  slug: 'number',
 }

 const Email: Block = {
+  slug: 'email',
  fields: [
    {
+      type: 'row',
      fields: [
        {
          ...name,
@@ -274,7 +276,6 @@ const Email: Block = {
          },
        },
      ],
-      type: 'row',
    },
    width,
    required,
@@ -283,12 +284,13 @@ const Email: Block = {
    plural: 'Email Fields',
    singular: 'Email',
  },
-  slug: 'email',
 }

 const State: Block = {
+  slug: 'state',
  fields: [
    {
+      type: 'row',
      fields: [
        {
          ...name,
@@ -303,7 +305,6 @@ const State: Block = {
          },
        },
      ],
-      type: 'row',
    },
    width,
    required,
@@ -312,12 +313,13 @@ const State: Block = {
    plural: 'State Fields',
    singular: 'State',
  },
-  slug: 'state',
 }

 const Country: Block = {
+  slug: 'country',
  fields: [
    {
+      type: 'row',
      fields: [
        {
          ...name,
@@ -332,7 +334,6 @@ const Country: Block = {
          },
        },
      ],
-      type: 'row',
    },
    width,
    required,
@@ -341,12 +342,13 @@ const Country: Block = {
    plural: 'Country Fields',
    singular: 'Country',
  },
-  slug: 'country',
 }

 const Checkbox: Block = {
+  slug: 'checkbox',
  fields: [
    {
+      type: 'row',
      fields: [
        {
          ...name,
@@ -361,9 +363,9 @@ const Checkbox: Block = {
          },
        },
      ],
-      type: 'row',
    },
    {
+      type: 'row',
      fields: [
        {
          ...width,
@@ -378,19 +380,17 @@ const Checkbox: Block = {
          },
        },
      ],
-      type: 'row',
    },
    {
      name: 'defaultValue',
-      label: 'Default Value',
      type: 'checkbox',
+      label: 'Default Value',
    },
  ],
  labels: {
    plural: 'Checkbox Fields',
    singular: 'Checkbox',
  },
-  slug: 'checkbox',
 }

 const Payment = (fieldConfig: PaymentFieldConfig): Block => {
@@ -398,16 +398,18 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
  if (fieldConfig?.paymentProcessor) {
    paymentProcessorField = {
      name: 'paymentProcessor',
+      type: 'select',
      label: 'Payment Processor',
      options: [],
-      type: 'select',
      ...fieldConfig.paymentProcessor,
    }
  }

  const fields = {
+    slug: 'payment',
    fields: [
      {
+        type: 'row',
        fields: [
          {
            ...name,
@@ -422,9 +424,9 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
            },
          },
        ],
-        type: 'row',
      },
      {
+        type: 'row',
        fields: [
          {
            ...width,
@@ -434,30 +436,31 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
          },
          {
            name: 'basePrice',
+            type: 'number',
            admin: {
              width: '50%',
            },
            label: 'Base Price',
-            type: 'number',
          },
        ],
-        type: 'row',
      },
      paymentProcessorField,
      {
        name: 'priceConditions',
+        type: 'array',
        fields: [
          {
            name: 'fieldToUse',
+            type: 'text',
            admin: {
              components: {
                Field: DynamicFieldSelector,
              },
            },
-            type: 'text',
          },
          {
            name: 'condition',
+            type: 'select',
            defaultValue: 'hasValue',
            label: 'Condition',
            options: [
@@ -474,19 +477,19 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
                value: 'notEquals',
              },
            ],
-            type: 'select',
          },
          {
            name: 'valueForCondition',
+            type: 'text',
            admin: {
              condition: (_: any, { condition }: any) =>
                condition === 'equals' || condition === 'notEquals',
            },
            label: 'Value',
-            type: 'text',
          },
          {
            name: 'operator',
+            type: 'select',
            defaultValue: 'add',
            options: [
              {
@@ -506,10 +509,10 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
                value: 'divide',
              },
            ],
-            type: 'select',
          },
          {
            name: 'valueType',
+            type: 'radio',
            admin: {
              width: '100%',
            },
@@ -525,17 +528,16 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
                value: 'valueOfField',
              },
            ],
-            type: 'radio',
          },
          {
            name: 'valueForOperator',
+            type: 'text',
            admin: {
              components: {
                Field: DynamicPriceSelector,
              },
            },
            label: 'Value',
-            type: 'text',
          },
        ],
        label: 'Price Conditions',
@@ -543,7 +545,6 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
          plural: 'Price Conditions',
          singular: 'Price Condition',
        },
-        type: 'array',
      },
      required,
    ].filter(Boolean) as Field[],
@@ -551,25 +552,24 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
      plural: 'Payment Fields',
      singular: 'Payment',
    },
-    slug: 'payment',
  }

  return fields
 }

 const Message: Block = {
+  slug: 'message',
  fields: [
    {
      name: 'message',
-      localized: true,
      type: 'richText',
+      localized: true,
    },
  ],
  labels: {
    plural: 'Message Blocks',
    singular: 'Message',
  },
-  slug: 'message',
 }

 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
--- a/packages/plugin-form-builder/src/collections/Forms/index.ts
+++ b/packages/plugin-form-builder/src/collections/Forms/index.ts
@@ -2,14 +2,15 @@ import type { Block, CollectionConfig, Field } from 'payload/types'

 import merge from 'deepmerge'

-import type { FieldConfig, PluginConfig } from '../../types'
+import type { FieldConfig, PluginConfig } from '../../types.js'

-import { fields } from './fields'
+import { fields } from './fields.js'

 // all settings can be overridden by the config
 export const generateFormCollection = (formConfig: PluginConfig): CollectionConfig => {
  const redirect: Field = {
    name: 'redirect',
+    type: 'group',
    admin: {
      condition: (_, siblingData) => siblingData?.confirmationType === 'redirect',
      hideGutter: true,
@@ -17,17 +18,17 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
    fields: [
      {
        name: 'url',
+        type: 'text',
        label: 'URL to redirect to',
        required: true,
-        type: 'text',
      },
    ],
-    type: 'group',
  }

  if (formConfig.redirectRelationships) {
    redirect.fields.unshift({
      name: 'reference',
+      type: 'relationship',
      admin: {
        condition: (_, siblingData) => siblingData?.type === 'reference',
      },
@@ -35,11 +36,11 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
      maxDepth: 2,
      relationTo: formConfig.redirectRelationships,
      required: true,
-      type: 'relationship',
    })

    redirect.fields.unshift({
      name: 'type',
+      type: 'radio',
      admin: {
        layout: 'horizontal',
      },
@@ -54,7 +55,6 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
          value: 'custom',
        },
      ],
-      type: 'radio',
    })

    if (redirect.fields[2].type !== 'row') redirect.fields[2].label = 'Custom URL'
@@ -66,6 +66,7 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf

  const config: CollectionConfig = {
    ...(formConfig?.formOverrides || {}),
+    slug: formConfig?.formOverrides?.slug || 'forms',
    access: {
      read: () => true,
      ...(formConfig?.formOverrides?.access || {}),
@@ -78,11 +79,12 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
    fields: [
      {
        name: 'title',
-        required: true,
        type: 'text',
+        required: true,
      },
      {
        name: 'fields',
+        type: 'blocks',
        blocks: Object.entries(formConfig?.fields || {})
          .map(([fieldKey, fieldConfig]) => {
            // let the config enable/disable fields with either boolean values or objects
@@ -109,15 +111,15 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
            return null
          })
          .filter(Boolean) as Block[],
-        type: 'blocks',
      },
      {
        name: 'submitButtonLabel',
-        localized: true,
        type: 'text',
+        localized: true,
      },
      {
        name: 'confirmationType',
+        type: 'radio',
        admin: {
          description:
            'Choose whether to display an on-page message or redirect to a different page after they submit the form.',
@@ -134,101 +136,99 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
            value: 'redirect',
          },
        ],
-        type: 'radio',
      },
      {
        name: 'confirmationMessage',
+        type: 'richText',
        admin: {
          condition: (_, siblingData) => siblingData?.confirmationType === 'message',
        },
        localized: true,
        required: true,
-        type: 'richText',
      },
      redirect,
      {
        name: 'emails',
+        type: 'array',
        admin: {
          description:
            "Send custom emails when the form submits. Use comma separated lists to send the same email to multiple recipients. To reference a value from this form, wrap that field's name with double curly brackets, i.e. {{firstName}}.",
        },
        fields: [
          {
+            type: 'row',
            fields: [
              {
                name: 'emailTo',
+                type: 'text',
                admin: {
                  placeholder: '"Email Sender" <sender@email.com>',
                  width: '100%',
                },
                label: 'Email To',
-                type: 'text',
              },
              {
                name: 'cc',
+                type: 'text',
                admin: {
                  width: '50%',
                },
                label: 'CC',
-                type: 'text',
              },
              {
                name: 'bcc',
+                type: 'text',
                admin: {
                  width: '50%',
                },
                label: 'BCC',
-                type: 'text',
              },
            ],
-            type: 'row',
          },
          {
+            type: 'row',
            fields: [
              {
                name: 'replyTo',
+                type: 'text',
                admin: {
                  placeholder: '"Reply To" <reply-to@email.com>',
                  width: '50%',
                },
                label: 'Reply To',
-                type: 'text',
              },
              {
                name: 'emailFrom',
+                type: 'text',
                admin: {
                  placeholder: '"Email From" <email-from@email.com>',
                  width: '50%',
                },
                label: 'Email From',
-                type: 'text',
              },
            ],
-            type: 'row',
          },
          {
            name: 'subject',
+            type: 'text',
            defaultValue: "You've received a new message.",
            label: 'Subject',
            localized: true,
            required: true,
-            type: 'text',
          },
          {
            name: 'message',
+            type: 'richText',
            admin: {
              description: 'Enter the message that should be sent in this email.',
            },
            label: 'Message',
            localized: true,
-            type: 'richText',
          },
        ],
-        type: 'array',
      },
      ...(formConfig?.formOverrides?.fields || []),
    ],
-    slug: formConfig?.formOverrides?.slug || 'forms',
  }

  return config
--- a/packages/plugin-nested-docs/.swcrc
+++ b/packages/plugin-nested-docs/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/plugin-nested-docs/package.json
+++ b/packages/plugin-nested-docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/plugin-nested-docs",
-  "version": "1.0.12",
+  "version": "3.0.0-alpha.44",
  "description": "The official Nested Docs plugin for Payload",
  "repository": "https://github.com/payloadcms/payload",
  "license": "MIT",
@@ -22,7 +22,7 @@
    "payload": "workspace:*"
  },
  "peerDependencies": {
-    "payload": "^0.18.5 || ^1.0.0 || ^2.0.0"
+    "payload": "workspace:*"
  },
  "exports": {
    ".": {
--- a/packages/plugin-nested-docs/src/hooks/resaveChildren.ts
+++ b/packages/plugin-nested-docs/src/hooks/resaveChildren.ts
@@ -1,8 +1,8 @@
 import type { CollectionAfterChangeHook, CollectionConfig, PayloadRequest } from 'payload/types'

-import type { PluginConfig } from '../types'
+import type { PluginConfig } from '../types.js'

-import populateBreadcrumbs from '../utilities/populateBreadcrumbs'
+import populateBreadcrumbs from '../utilities/populateBreadcrumbs.js'

 type ResaveArgs = {
  collection: CollectionConfig
--- a/packages/plugin-nested-docs/src/hooks/resaveSelfAfterCreate.ts
+++ b/packages/plugin-nested-docs/src/hooks/resaveSelfAfterCreate.ts
@@ -1,6 +1,6 @@
 import type { CollectionAfterChangeHook, CollectionConfig } from 'payload/types'

-import type { PluginConfig } from '../types'
+import type { PluginConfig } from '../types.js'

 // This hook automatically re-saves a document after it is created
 // so that we can build its breadcrumbs with the newly created document's ID.
--- a/packages/plugin-nested-docs/src/index.ts
+++ b/packages/plugin-nested-docs/src/index.ts
@@ -1,14 +1,14 @@
 import type { Plugin } from 'payload/config'
 import type { SingleRelationshipField } from 'payload/types'

-import type { PluginConfig } from './types'
+import type { PluginConfig } from './types.js'

-import createBreadcrumbsField from './fields/breadcrumbs'
-import createParentField from './fields/parent'
-import parentFilterOptions from './fields/parentFilterOptions'
-import resaveChildren from './hooks/resaveChildren'
-import resaveSelfAfterCreate from './hooks/resaveSelfAfterCreate'
-import populateBreadcrumbs from './utilities/populateBreadcrumbs'
+import createBreadcrumbsField from './fields/breadcrumbs.js'
+import createParentField from './fields/parent.js'
+import parentFilterOptions from './fields/parentFilterOptions.js'
+import resaveChildren from './hooks/resaveChildren.js'
+import resaveSelfAfterCreate from './hooks/resaveSelfAfterCreate.js'
+import populateBreadcrumbs from './utilities/populateBreadcrumbs.js'

 const nestedDocs =
  (pluginConfig: PluginConfig): Plugin =>
--- a/packages/plugin-nested-docs/src/utilities/formatBreadcrumb.ts
+++ b/packages/plugin-nested-docs/src/utilities/formatBreadcrumb.ts
@@ -1,6 +1,6 @@
 import type { CollectionConfig } from 'payload/types'

-import type { Breadcrumb, PluginConfig } from '../types'
+import type { Breadcrumb, PluginConfig } from '../types.js'

 const formatBreadcrumb = (
  pluginConfig: PluginConfig,
@@ -24,9 +24,9 @@ const formatBreadcrumb = (
  }

  return {
+    doc: lastDoc.id as string,
    label,
    url,
-    doc: lastDoc.id as string,
  }
 }

--- a/packages/plugin-nested-docs/src/utilities/getParents.ts
+++ b/packages/plugin-nested-docs/src/utilities/getParents.ts
@@ -1,6 +1,6 @@
 import type { CollectionConfig } from 'payload/types'

-import type { PluginConfig } from '../types'
+import type { PluginConfig } from '../types.js'

 const getParents = async (
  req: any,
--- a/packages/plugin-nested-docs/src/utilities/populateBreadcrumbs.ts
+++ b/packages/plugin-nested-docs/src/utilities/populateBreadcrumbs.ts
@@ -1,9 +1,9 @@
 import type { CollectionConfig } from 'payload/types'

-import type { PluginConfig } from '../types'
+import type { PluginConfig } from '../types.js'

-import formatBreadcrumb from './formatBreadcrumb'
-import getParents from './getParents'
+import formatBreadcrumb from './formatBreadcrumb.js'
+import getParents from './getParents.js'

 const populateBreadcrumbs = async (
  req: any,
--- a/packages/plugin-redirects/.swcrc
+++ b/packages/plugin-redirects/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/plugin-redirects/package.json
+++ b/packages/plugin-redirects/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/plugin-redirects",
-  "version": "1.0.1",
+  "version": "3.0.0-alpha.44",
  "homepage:": "https://payloadcms.com",
  "repository": "git@github.com:payloadcms/plugin-redirects.git",
  "description": "Redirects plugin for Payload",
@@ -27,7 +27,7 @@
  "author": "dev@payloadcms.com",
  "license": "MIT",
  "peerDependencies": {
-    "payload": "^0.18.5 || ^1.0.0 || ^2.0.0"
+    "payload": "workspace:*"
  },
  "devDependencies": {
    "@payloadcms/eslint-config": "workspace:*",
--- a/packages/plugin-redirects/src/index.ts
+++ b/packages/plugin-redirects/src/index.ts
@@ -1,8 +1,8 @@
 import type { Config } from 'payload/config'

-import type { PluginConfig } from './types'
+import type { PluginConfig } from './types.js'

-import deepMerge from './deepMerge'
+import deepMerge from './deepMerge.js'

 const redirects =
  (pluginConfig: PluginConfig) =>
@@ -12,6 +12,7 @@ const redirects =
      ...(incomingConfig?.collections || []),
      deepMerge(
        {
+          slug: 'redirects',
          access: {
            read: (): boolean => true,
          },
@@ -21,16 +22,18 @@ const redirects =
          fields: [
            {
              name: 'from',
+              type: 'text',
              index: true,
              label: 'From URL',
              required: true,
-              type: 'text',
            },
            {
              name: 'to',
+              type: 'group',
              fields: [
                {
                  name: 'type',
+                  type: 'radio',
                  admin: {
                    layout: 'horizontal',
                  },
@@ -46,33 +49,30 @@ const redirects =
                      value: 'custom',
                    },
                  ],
-                  type: 'radio',
                },
                {
                  name: 'reference',
+                  type: 'relationship',
                  admin: {
                    condition: (_, siblingData) => siblingData?.type === 'reference',
                  },
                  label: 'Document to redirect to',
                  relationTo: pluginConfig?.collections || [],
                  required: true,
-                  type: 'relationship',
                },
                {
                  name: 'url',
+                  type: 'text',
                  admin: {
                    condition: (_, siblingData) => siblingData?.type === 'custom',
                  },
                  label: 'Custom URL',
                  required: true,
-                  type: 'text',
                },
              ],
              label: false,
-              type: 'group',
            },
          ],
-          slug: 'redirects',
        },
        pluginConfig?.overrides || {},
      ),
--- a/packages/plugin-search/.swcrc
+++ b/packages/plugin-search/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/plugin-search/package.json
+++ b/packages/plugin-search/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/plugin-search",
-  "version": "1.1.0",
+  "version": "3.0.0-alpha.44",
  "homepage:": "https://payloadcms.com",
  "repository": "git@github.com:payloadcms/plugin-search.git",
  "description": "Search plugin for Payload",
@@ -27,12 +27,12 @@
  "author": "dev@trbl.design",
  "license": "MIT",
  "peerDependencies": {
-    "payload": "^0.18.5 || ^1.0.0 || ^2.0.0",
+    "payload": "workspace:*",
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "dependencies": {
    "@payloadcms/ui": "workspace:*",
-    "ts-deepmerge": "^2.0.1"
+    "deepmerge": "4.3.1"
  },
  "devDependencies": {
    "@payloadcms/eslint-config": "workspace:*",
--- a/packages/plugin-search/src/Search/hooks/syncWithSearch.ts
+++ b/packages/plugin-search/src/Search/hooks/syncWithSearch.ts
@@ -1,4 +1,4 @@
-import type { DocToSync, SearchConfig, SyncWithSearch } from '../../types'
+import type { DocToSync, SearchConfig, SyncWithSearch } from '../../types.js'

 const syncWithSearch: SyncWithSearch = async (args) => {
  const {
--- a/packages/plugin-search/src/Search/index.ts
+++ b/packages/plugin-search/src/Search/index.ts
@@ -1,15 +1,16 @@
 import type { CollectionConfig } from 'payload/types'

-import deepMerge from 'ts-deepmerge'
+import deepMerge from 'deepmerge'

-import type { SearchConfig } from '../types'
+import type { SearchConfig } from '../types.js'

-import { LinkToDoc } from './ui'
+import { LinkToDoc } from './ui/index.js'

 // all settings can be overridden by the config
 export const generateSearchCollection = (searchConfig: SearchConfig): CollectionConfig =>
  deepMerge(
    {
+      slug: 'search',
      access: {
        create: (): boolean => false,
        read: (): boolean => true,
@@ -24,20 +25,21 @@ export const generateSearchCollection = (searchConfig: SearchConfig): Collection
      fields: [
        {
          name: 'title',
+          type: 'text',
          admin: {
            readOnly: true,
          },
-          type: 'text',
        },
        {
          name: 'priority',
+          type: 'number',
          admin: {
            position: 'sidebar',
          },
-          type: 'number',
        },
        {
          name: 'doc',
+          type: 'relationship',
          admin: {
            position: 'sidebar',
            readOnly: true,
@@ -46,24 +48,22 @@ export const generateSearchCollection = (searchConfig: SearchConfig): Collection
          maxDepth: 0,
          relationTo: searchConfig?.collections || [],
          required: true,
-          type: 'relationship',
        },
        {
          name: 'docUrl',
+          type: 'ui',
          admin: {
            components: {
              Field: LinkToDoc,
            },
            position: 'sidebar',
          },
-          type: 'ui',
        },
      ],
      labels: {
        plural: 'Search Results',
        singular: 'Search Result',
      },
-      slug: 'search',
    },
    searchConfig?.searchOverrides || {},
  )
--- a/packages/plugin-search/src/Search/ui/index.tsx
+++ b/packages/plugin-search/src/Search/ui/index.tsx
@@ -1,5 +1,4 @@
-import type { FormState } from '@payloadcms/ui'
-import type { UIField } from 'payload/types'
+import type { FormState, UIField } from 'payload/types'

 import { useConfig, useWatchForm } from '@payloadcms/ui'
 import React from 'react'
--- a/packages/plugin-search/src/index.ts
+++ b/packages/plugin-search/src/index.ts
@@ -1,10 +1,10 @@
 import type { Config } from 'payload/config'

-import type { SearchConfig } from './types'
+import type { SearchConfig } from './types.js'

-import { generateSearchCollection } from './Search'
-import deleteFromSearch from './Search/hooks/deleteFromSearch'
-import syncWithSearch from './Search/hooks/syncWithSearch'
+import deleteFromSearch from './Search/hooks/deleteFromSearch.js'
+import syncWithSearch from './Search/hooks/syncWithSearch.js'
+import { generateSearchCollection } from './Search/index.js'

 const Search =
  (incomingSearchConfig: SearchConfig) =>
--- a/packages/plugin-sentry/.swcrc
+++ b/packages/plugin-sentry/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "exclude": ["/**/*.spec.ts"],
  "jsc": {
    "target": "esnext",
--- a/packages/plugin-sentry/package.json
+++ b/packages/plugin-sentry/package.json
@@ -28,7 +28,7 @@
    "dist"
  ],
  "peerDependencies": {
-    "payload": "^1.10.1 || ^2.0.0",
+    "payload": "workspace:*",
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "dependencies": {
--- a/packages/plugin-seo/.swcrc
+++ b/packages/plugin-seo/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/plugin-seo/package.json
+++ b/packages/plugin-seo/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/plugin-seo",
-  "version": "3.0.0-alpha.38",
+  "version": "3.0.0-alpha.44",
  "homepage:": "https://payloadcms.com",
  "repository": "git@github.com:payloadcms/plugin-seo.git",
  "description": "SEO plugin for Payload",
--- a/packages/plugin-stripe/.swcrc
+++ b/packages/plugin-stripe/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/plugin-stripe/package.json
+++ b/packages/plugin-stripe/package.json
@@ -29,7 +29,7 @@
  "author": "dev@payloadcms.com",
  "license": "MIT",
  "peerDependencies": {
-    "payload": "^1.1.8 || ^2.0.0"
+    "payload": "workspace:*"
  },
  "dependencies": {
    "@payloadcms/ui": "workspace:*",
--- a/packages/richtext-lexical/.swcrc
+++ b/packages/richtext-lexical/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/richtext-lexical/package.json
+++ b/packages/richtext-lexical/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/richtext-lexical",
-  "version": "3.0.0-alpha.38",
+  "version": "3.0.0-alpha.44",
  "description": "The officially supported Lexical richtext adapter for Payload",
  "repository": "https://github.com/payloadcms/payload",
  "license": "MIT",
--- a/packages/richtext-slate/.swcrc
+++ b/packages/richtext-slate/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/richtext-slate/package.json
+++ b/packages/richtext-slate/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/richtext-slate",
-  "version": "3.0.0-alpha.38",
+  "version": "3.0.0-alpha.44",
  "description": "The officially supported Slate richtext adapter for Payload",
  "repository": "https://github.com/payloadcms/payload",
  "license": "MIT",
--- a/packages/translations/.swcrc
+++ b/packages/translations/.swcrc
@@ -1,6 +1,6 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
--- a/packages/translations/package.json
+++ b/packages/translations/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/translations",
-  "version": "3.0.0-alpha.38",
+  "version": "3.0.0-alpha.44",
  "main": "./dist/exports/index.ts",
  "types": "./dist/types.d.ts",
  "type": "module",
--- a/packages/ui/.swcrc
+++ b/packages/ui/.swcrc
@@ -1,12 +1,22 @@
 {
  "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
  "jsc": {
    "target": "esnext",
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "dts": true
+    },
+    "experimental": {
+      "plugins": [
+        [
+          "swc-plugin-transform-remove-imports",
+          {
+            "test": "\\.(scss|css)$"
+          }
+        ]
+      ]
    }
  },
  "module": {
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,13 +1,14 @@
 {
  "name": "@payloadcms/ui",
-  "version": "3.0.0-alpha.39",
+  "version": "3.0.0-alpha.44",
  "main": "./src/index.ts",
  "types": "./dist/index.d.ts",
  "type": "module",
  "scripts": {
-    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
+    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types && pnpm build:webpack && rm dist/prod/index.js",
    "build:swc": "swc ./src -d ./dist --config-file .swcrc",
    "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "build:webpack": "webpack --config webpack.config.js",
    "clean": "rimraf {dist,*.tsbuildinfo}",
    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
    "fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
@@ -37,6 +38,11 @@
        "require": "./dist/exports/*.js",
        "types": "./dist/exports/*.d.ts"
      },
+      "./css": {
+        "import": "./dist/prod/styles.css",
+        "require": "./dist/prod/styles.css",
+        "default": "./dist/prod/styles.css"
+      },
      "./scss": {
        "import": "./dist/scss.scss",
        "require": "./dist/scss.scss",
@@ -51,9 +57,21 @@
    "@types/body-scroll-lock": "^3.1.0",
    "@types/qs": "6.9.7",
    "@types/react": "18.2.15",
+    "@types/react-datepicker": "4.11.2",
    "@types/react-dom": "18.2.7",
    "@types/uuid": "8.3.4",
-    "payload": "workspace:*"
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^9.5.0",
+    "sass-loader": "^14.1.1",
+    "swc-loader": "^0.2.6",
+    "swc-plugin-transform-remove-imports": "^1.12.1",
+    "css-loader": "^6.10.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
+    "mini-css-extract-plugin": "1.6.2",
+    "payload": "workspace:*",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.78.0",
+    "webpack-cli": "^5.1.4"
  },
  "dependencies": {
    "@dnd-kit/core": "6.0.8",
@@ -65,14 +83,14 @@
    "@payloadcms/translations": "workspace:*",
    "body-scroll-lock": "4.0.0-beta.0",
    "bson-objectid": "2.0.4",
-    "date-fns": "2.30.0",
+    "date-fns": "3.3.1",
    "deep-equal": "2.2.2",
    "flatley": "5.2.0",
    "md5": "2.3.0",
    "object-to-formdata": "4.5.1",
    "qs": "6.11.2",
    "react-animate-height": "2.1.2",
-    "react-datepicker": "4.16.0",
+    "react-datepicker": "6.2.0",
    "react-image-crop": "10.1.8",
    "react-select": "5.7.4",
    "react-toastify": "10.0.4",
--- a/packages/ui/src/elements/DatePicker/DatePicker.tsx
+++ b/packages/ui/src/elements/DatePicker/DatePicker.tsx
@@ -1,6 +1,10 @@
+import type { ReactDatePickerProps } from 'react-datepicker'
+
 import * as Locales from 'date-fns/locale'
 import React from 'react'
-import DatePicker, { registerLocale } from 'react-datepicker'
+import ReactDatePickerDefaultImport, { registerLocale } from 'react-datepicker'
+const ReactDatePicker = (ReactDatePickerDefaultImport.default ||
+  ReactDatePickerDefaultImport) as unknown as typeof ReactDatePickerDefaultImport.default
 import 'react-datepicker/dist/react-datepicker.css'

 import type { Props } from './types.js'
@@ -61,7 +65,7 @@ const DateTime: React.FC<Props> = (props) => {
    if (typeof onChangeFromProps === 'function') onChangeFromProps(newDate)
  }

-  const dateTimePickerProps = {
+  const dateTimePickerProps: ReactDatePickerProps = {
    customInputRef: 'ref',
    dateFormat,
    disabled: readOnly,
@@ -72,6 +76,7 @@ const DateTime: React.FC<Props> = (props) => {
    monthsShown: Math.min(2, monthsToShow),
    onChange,
    placeholderText,
+    popperPlacement: 'bottom-start',
    selected: value && new Date(value),
    showMonthYearPicker: pickerAppearance === 'monthOnly',
    showPopperArrow: false,
@@ -100,16 +105,10 @@ const DateTime: React.FC<Props> = (props) => {
        <CalendarIcon />
      </div>
      <div className={`${baseClass}__input-wrapper`}>
-        <DatePicker
+        <ReactDatePicker
          {...dateTimePickerProps}
          dropdownMode="select"
          locale={locale}
-          popperModifiers={[
-            {
-              name: 'preventOverflow',
-              enabled: true,
-            },
-          ]}
          showMonthDropdown
          showYearDropdown
        />
--- a/packages/ui/src/elements/DatePicker/index.scss
+++ b/packages/ui/src/elements/DatePicker/index.scss
@@ -198,6 +198,9 @@ $cal-icon-width: 18px;
    }

    &__month-text {
+      padding: base(0.3);
+      margin: base(0.15);
+      font-size: base(0.55);
      &:hover {
        background: var(--theme-elevation-100);
      }
--- a/packages/ui/src/elements/DatePicker/index.tsx
+++ b/packages/ui/src/elements/DatePicker/index.tsx
@@ -6,10 +6,8 @@ import { ShimmerEffect } from '../ShimmerEffect/index.js'

 const DatePicker = lazy(() => import('./DatePicker.js'))

-const DatePickerField: React.FC<Props> = (props) => (
+export const DatePickerField: React.FC<Props> = (props) => (
  <Suspense fallback={<ShimmerEffect height={50} />}>
    <DatePicker {...props} />
  </Suspense>
 )
-
-export default DatePickerField
--- a/packages/ui/src/elements/WhereBuilder/Condition/Date/index.tsx
+++ b/packages/ui/src/elements/WhereBuilder/Condition/Date/index.tsx
@@ -2,18 +2,16 @@ import React from 'react'

 import type { Props } from './types.js'

-import DatePicker from '../../../DatePicker/index.js'
+import { DatePickerField } from '../../../DatePicker/index.js'

 const baseClass = 'condition-value-date'

-const DateField: React.FC<Props> = ({ admin, disabled, onChange, value }) => {
+export const DateField: React.FC<Props> = ({ admin, disabled, onChange, value }) => {
  const { date } = admin || {}

  return (
    <div className={baseClass}>
-      <DatePicker {...date} onChange={onChange} readOnly={disabled} value={value} />
+      <DatePickerField {...date} onChange={onChange} readOnly={disabled} value={value} />
    </div>
  )
 }
-
-export default DateField
--- a/packages/ui/src/elements/WhereBuilder/Condition/index.tsx
+++ b/packages/ui/src/elements/WhereBuilder/Condition/index.tsx
@@ -7,7 +7,7 @@ import { RenderCustomComponent } from '../../../elements/RenderCustomComponent/i
 import useDebounce from '../../../hooks/useDebounce.js'
 import { Button } from '../../Button/index.js'
 import ReactSelect from '../../ReactSelect/index.js'
-import Date from './Date/index.js'
+import { DateField } from './Date/index.js'
 import Number from './Number/index.js'
 import Relationship from './Relationship/index.js'
 import { Select } from './Select/index.js'
@@ -15,7 +15,7 @@ import Text from './Text/index.js'
 import './index.scss'

 const valueFields = {
-  Date,
+  DateField,
  Number,
  Relationship,
  Select,
--- a/packages/ui/src/forms/fields/DateTime/index.tsx
+++ b/packages/ui/src/forms/fields/DateTime/index.tsx
@@ -6,7 +6,7 @@ import React, { useCallback } from 'react'

 import type { Props } from './types.js'

-import DatePickerField from '../../../elements/DatePicker/index.js'
+import { DatePickerField } from '../../../elements/DatePicker/index.js'
 import { useTranslation } from '../../../providers/Translation/index.js'
 import useField from '../../useField/index.js'
 import { fieldBaseClass } from '../shared.js'
--- a/packages/ui/src/providers/Auth/index.tsx
+++ b/packages/ui/src/providers/Auth/index.tsx
@@ -51,9 +51,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children

  const redirectToInactivityRoute = useCallback(() => {
    if (window.location.pathname.startsWith(admin)) {
-      const redirectParam = `?redirect=${encodeURIComponent(
-        window.location.pathname.replace(admin, ''),
-      )}`
+      const redirectParam = `?redirect=${encodeURIComponent(window.location.pathname)}`
      router.replace(`${admin}${logoutInactivityRoute}${redirectParam}`)
    } else {
      router.replace(`${admin}${logoutInactivityRoute}`)
--- a/packages/ui/src/templates/Default/index.scss
+++ b/packages/ui/src/templates/Default/index.scss
@@ -1,8 +1,10 @@
@import '../../scss/styles.scss';

 .template-default {
-  [dir='rtl']
-  &__nav-toggler-wrapper {
+  background-color: var(--theme-bg);
+  color: var(--theme-text);
+
+  [dir='rtl'] &__nav-toggler-wrapper {
    left: unset;
    right: 0;
  }
--- a/packages/ui/src/templates/Minimal/index.scss
+++ b/packages/ui/src/templates/Minimal/index.scss
@@ -9,6 +9,8 @@
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
+  background-color: var(--theme-bg-color);
+  color: var(--theme-text);

  &--width-normal {
    .template-minimal__wrap {
--- a/packages/ui/src/utilities/buildComponentMap/mapFields.tsx
+++ b/packages/ui/src/utilities/buildComponentMap/mapFields.tsx
@@ -205,6 +205,7 @@ export const mapFields = (args: {
          // TODO: fix types
          // label: 'label' in field ? field.label : undefined,
          blocks,
+          date: 'admin' in field && 'date' in field.admin ? field.admin.date : undefined,
          fieldPermissions,
          hasMany: 'hasMany' in field ? field.hasMany : undefined,
          max: 'max' in field ? field.max : undefined,
--- a/packages/ui/src/utilities/formatDate/index.ts
+++ b/packages/ui/src/utilities/formatDate/index.ts
@@ -1,5 +1,5 @@
 import { format, formatDistanceToNow } from 'date-fns'
-import * as Locale from 'date-fns/locale/index.js'
+import * as Locale from 'date-fns/locale'

 import { getSupportedDateLocale } from './getSupportedDateLocale.js'

--- a/packages/ui/webpack.config.js
+++ b/packages/ui/webpack.config.js
@@ -0,0 +1,107 @@
+import OptimizeCSSAssetsPlugin from 'css-minimizer-webpack-plugin'
+import MiniCSSExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+import TerserJSPlugin from 'terser-webpack-plugin'
+import { fileURLToPath } from 'url'
+import webpack from 'webpack'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+const componentWebpackConfig = {
+  entry: path.resolve(dirname, './src/index.ts'),
+  externals: ['react', 'react-dom', 'payload', 'payload/config', 'react-image-crop'],
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        oneOf: [
+          {
+            // exclude: /node_modules/,
+            test: /\.(t|j)sx?$/,
+            use: [
+              {
+                loader: 'swc-loader',
+                options: {
+                  jsc: {
+                    experimental: {
+                      plugins: [
+                        // clear the plugins used in .swcrc
+                      ],
+                    },
+                    parser: {
+                      syntax: 'typescript',
+                      tsx: true,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            sideEffects: true,
+            test: /\.(scss|css)$/,
+            use: [
+              MiniCSSExtractPlugin.loader,
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: ['postcss-preset-env'],
+                  },
+                },
+              },
+              'sass-loader',
+            ],
+          },
+          {
+            type: 'asset/resource',
+            generator: {
+              filename: 'payload/[name][ext]',
+            },
+            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/, /\.woff$/, /\.woff2$/],
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserJSPlugin({
+        extractComments: false,
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  output: {
+    filename: 'index.js',
+    libraryTarget: 'commonjs2',
+    path: path.resolve(dirname, './dist/prod'),
+    publicPath: '/',
+  },
+  plugins: [
+    new MiniCSSExtractPlugin({
+      filename: 'styles.css',
+      ignoreOrder: true,
+    }),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+  ],
+  resolve: {
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js', '.scss', '.css'],
+      '.mjs': ['.mts', '.mjs'],
+    },
+    extensions: ['.js', '.ts', '.tsx', '.scss', '.css'],
+    modules: [
+      'node_modules',
+      path.resolve(dirname, '../../node_modules'),
+      path.resolve(dirname, './node_modules'),
+    ],
+  },
+  stats: 'errors-only',
+}
+
+export default componentWebpackConfig
--- a/playwright-1.43.0-next.tgz
+++ b/playwright-1.43.0-next.tgz
--- a/playwright-core-1.43.0-next.tgz
+++ b/playwright-core-1.43.0-next.tgz
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/scripts/release.ts
+++ b/scripts/release.ts
@@ -1,18 +1,18 @@
 import type { ExecSyncOptions } from 'child_process'
-import { execSync } from 'child_process'

 import chalk from 'chalk'
+import { execSync } from 'child_process'
 import execa from 'execa'
 import fse from 'fs-extra'
 import minimist from 'minimist'
+import { fileURLToPath } from 'node:url'
 import path from 'path'
 import prompts from 'prompts'
 import semver from 'semver'
-import simpleGit from 'simple-git'
+import { simpleGit } from 'simple-git'

-import { getPackageDetails } from './lib/getPackageDetails'
-import { updateChangelog } from './utils/updateChangelog'
-import { fileURLToPath } from 'url'
+import { getPackageDetails } from './lib/getPackageDetails.js'
+import { updateChangelog } from './utils/updateChangelog.js'

 // Update this list with any packages to publish
 const packageWhitelist = [
@@ -27,7 +27,13 @@ const packageWhitelist = [
  'richtext-lexical',
  'plugin-cloud',
  'plugin-cloud-storage',
+  // 'plugin-form-builder',
+  'plugin-nested-docs',
+  'plugin-redirects',
+  'plugin-search',
+  // 'plugin-sentry',
  'plugin-seo',
+  // 'plugin-stripe',
 ]

 const __filename = fileURLToPath(import.meta.url)
@@ -37,6 +43,8 @@ const cwd = path.resolve(__dirname, '..')
 const git = simpleGit(cwd)

 const execOpts: ExecSyncOptions = { stdio: 'inherit' }
+const execaOpts: execa.Options = { stdio: 'inherit' }
+
 const args = minimist(process.argv.slice(2))

 const {
@@ -128,8 +136,6 @@ async function main() {
  // Prebuild all packages
  header(`\n🔨 Prebuilding all packages...`)

-  const execaOpts: execa.Options = { ...execOpts, stdio: 'inherit' }
-
  await execa('pnpm', ['install'], execaOpts)

  const buildResult = await execa('pnpm', ['build:core', '--output-logs=errors-only'], execaOpts)
--- a/test/_community/e2e.spec.ts
+++ b/test/_community/e2e.spec.ts
@@ -7,7 +7,6 @@ import { fileURLToPath } from 'url'
 import { initPageConsoleErrorCatch } from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
 import { initPayloadE2E } from '../helpers/configHelpers.js'
-import config from './config.js'

 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
@@ -19,7 +18,7 @@ describe('Admin Panel', () => {
  let url: AdminUrlUtil

  beforeAll(async ({ browser }) => {
-    const { serverURL } = await initPayloadE2E({ config, dirname })
+    const { serverURL } = await initPayloadE2E({ dirname })
    url = new AdminUrlUtil(serverURL, 'posts')

    const context = await browser.newContext()
--- a/test/auth/config.ts
+++ b/test/auth/config.ts
@@ -2,7 +2,7 @@ import { v4 as uuid } from 'uuid'

 import { mapAsync } from '../../packages/payload/src/utilities/mapAsync.js'
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
-import { devUser } from '../credentials.js.'
+import { devUser } from '../credentials.js'
 import { AuthDebug } from './AuthDebug.js'
 import { apiKeysSlug, namedSaveToJWTValue, saveToJWTKey, slug } from './shared.js'

--- a/test/componentsSetup.js
+++ b/test/componentsSetup.js
@@ -1 +0,0 @@
-import '@testing-library/jest-dom'
--- a/test/database/int.spec.ts
+++ b/test/database/int.spec.ts
@@ -1,3 +1,4 @@
+import { sql } from 'drizzle-orm'
 import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
--- a/test/helpers/configHelpers.ts
+++ b/test/helpers/configHelpers.ts
@@ -1,37 +1,60 @@
+import { spawn } from 'child_process'
 import getPort from 'get-port'
-//import { nextDev } from 'next/dist/cli/next-dev.js'
+import { nextDev } from 'next/dist/cli/next-dev.js'
 import path from 'path'

-import type { SanitizedConfig } from '../../packages/payload/src/config/types.js'
-import type { Payload } from '../../packages/payload/src/index.js'
+import wait from '../../packages/payload/src/utilities/wait.js'

-import { getPayload } from '../../packages/payload/src/index.js'
-import { bootAdminPanel } from './bootAdminPanel.mjs'
-
-type InitializedPayload = { payload: Payload; serverURL: string }
-
-export async function initPayloadE2E(args: {
-  config: Promise<SanitizedConfig>
+type Args = {
  dirname: string
-}): Promise<InitializedPayload> {
-  const { config, dirname } = args
+}

-  console.log('dirname', dirname)
+type Result = {
+  serverURL: string
+}

-  // process.env.TURBOPACK = '1' // Not working due to turbopack pulling in mongoose, pg
+export async function initPayloadE2E({ dirname }: Args): Promise<Result> {
+  const port = await getPort()
+  const serverURL = `http://localhost:${port}`
  process.env.PAYLOAD_CONFIG_PATH = path.resolve(dirname, './config.js')
  process.env.PAYLOAD_DROP_DATABASE = 'true'
-  //process.env.NODE_ENV = 'test'
+  process.env.PORT = String(port)

-  const payload = await getPayload({ config })
+  // @ts-expect-error
+  process.env.NODE_ENV = 'test'

+  nextDev({
+    _: [path.resolve(dirname, '../../')],
+    '--port': port,
+    // Turbo doesn't seem to be reading
+    // our tsconfig paths, commented out for now
+    // '--turbo': '1',
+  })
+
+  await wait(3000)
+  return { serverURL }
+}
+
+export async function initPayloadSpawn({ dirname }: Args): Promise<Result> {
  const port = await getPort()
  const serverURL = `http://localhost:${port}`

-  //process.env.APP_ENV = 'test'
-  //process.env.__NEXT_TEST_MODE = 'jest'
+  // Tried using a child process to get
+  // turbopack to pick up our tsconfig aliases
+  // but this didn't make a difference.
+  // Keeping it here so we can continue to try.
+  spawn('pnpm', ['dev', '--turbo'], {
+    cwd: path.resolve(dirname, '../../'),
+    env: {
+      ...process.env,
+      NODE_ENV: 'test',
+      PORT: String(port),
+      PAYLOAD_CONFIG_PATH: path.resolve(dirname, '../../config.js'),
+      PAYLOAD_DROP_DATABASE: 'true',
+    },
+  })

-  //await nextDev({ _: [path.resolve(dirname, '../../')], port }) // Running nextDev directly does not work for ports other than 3000
-  await bootAdminPanel({ port, appDir: path.resolve(dirname, '../../') })
-  return { serverURL, payload }
+  await wait(3000)
+
+  return { serverURL }
 }
--- a/test/localization/int.spec.ts
+++ b/test/localization/int.spec.ts
@@ -833,9 +833,17 @@ describe('Localization', () => {
      }
      `

-      const { en, es } = await client.request(query, null, {
+      const { data: multipleLocaleData } = await restClient
+        .GRAPHQL_POST({
+          body: JSON.stringify({ query }),
+          query: { locale: 'en' },
+          headers: {
            Authorization: `JWT ${token}`,
+          },
        })
+        .then((res) => res.json())
+
+      const { en, es } = multipleLocaleData

      expect(en.title).toStrictEqual(englishTitle)
      expect(es.title).toStrictEqual(spanishTitle)
--- a/Show More
+++ b/Show More