chore(release): v1.7.5

Co-authored-by: Dan Ribbens <dan.ribbens@gmail.com>

.release-it.json

@@ -1,4 +1,5 @@
 {
+  "verbose": true,
   "git": {
     "commitMessage": "chore(release): v${version}",
     "requireCleanWorkingDir": true

.release-it.pre.json

@@ -1,4 +1,5 @@
 {
+  "verbose": true,
   "git": {
     "requireCleanWorkingDir": false,
     "commit": false,

CHANGELOG.md

@@ -1,303 +1,406 @@
 
 
+## [1.7.5](https://github.com/payloadcms/payload/compare/v1.7.4...v1.7.5) (2023-05-04)
+
+
+### Bug Fixes
+
+* make incrementName match multiple digits ([#2609](https://github.com/payloadcms/payload/issues/2609)) ([8dbf0a2](https://github.com/payloadcms/payload/commit/8dbf0a2bd88db1b361ce16bb730613de489f2ed2))
+
+
+### Features
+
+* collection admin.enableRichTextLink property ([#2560](https://github.com/payloadcms/payload/issues/2560)) ([9678992](https://github.com/payloadcms/payload/commit/967899229f458d06a3931d086bcc49299dc310b7))
+* custom admin buttons ([#2618](https://github.com/payloadcms/payload/issues/2618)) ([1d58007](https://github.com/payloadcms/payload/commit/1d58007606fa7e34007f2a56a3ca653d2cd3404d))
+
+## [1.7.4](https://github.com/payloadcms/payload/compare/v1.7.3...v1.7.4) (2023-05-02)
+
+
+### Bug Fixes
+
+* properly import SwcMinifyWebpackPlugin ([#2600](https://github.com/payloadcms/payload/issues/2600)) ([802deac](https://github.com/payloadcms/payload/commit/802deaca03f8506fa4a7adb8fc008205c2c4f013))
+
+## [1.7.3](https://github.com/payloadcms/payload/compare/v1.7.2...v1.7.3) (2023-05-01)
+
+
+### Bug Fixes
+
+* [#2592](https://github.com/payloadcms/payload/issues/2592), allows usage of hidden fields within access query constraints ([#2599](https://github.com/payloadcms/payload/issues/2599)) ([a0bb13a](https://github.com/payloadcms/payload/commit/a0bb13a4123b51d770b364ddaee3dde1c5a3da53))
+* addds workaround for slate isBlock function issue ([#2596](https://github.com/payloadcms/payload/issues/2596)) ([8f6f13d](https://github.com/payloadcms/payload/commit/8f6f13dc93f49f5ba5384a9168ced5baec85e1fb))
+* bulk operations result type ([#2588](https://github.com/payloadcms/payload/issues/2588)) ([8382faa](https://github.com/payloadcms/payload/commit/8382faa0afc8118f4fb873c657a52c48abb2a6ad))
+* query on id throws 500 ([#2587](https://github.com/payloadcms/payload/issues/2587)) ([0ba22c3](https://github.com/payloadcms/payload/commit/0ba22c3aafca67be78814357edc668ed11ec4a97))
+* timestamp queries ([#2583](https://github.com/payloadcms/payload/issues/2583)) ([9c5107e](https://github.com/payloadcms/payload/commit/9c5107e86d70e36ac181c9d3ad51edacf9fc529a))
+
+
+### Features
+
+* Add new translation for romanian language ([#2556](https://github.com/payloadcms/payload/issues/2556)) ([fbf3a2a](https://github.com/payloadcms/payload/commit/fbf3a2a1b4633e704e467d9aec05f3ae0b900bae))
+* add persian translations ([#2553](https://github.com/payloadcms/payload/issues/2553)) ([c80f68a](https://github.com/payloadcms/payload/commit/c80f68af943c730996c9cdad87cf84d4d06a5777))
+* adjust stack trace for api error ([#2598](https://github.com/payloadcms/payload/issues/2598)) ([870838e](https://github.com/payloadcms/payload/commit/870838e7563b6767c53f4dc0288119087e3f9486))
+* allow customizing the link fields ([#2559](https://github.com/payloadcms/payload/issues/2559)) ([bf65228](https://github.com/payloadcms/payload/commit/bf6522898db353e75db11525ea5a1b58243333d8))
+* supports collection compound indexes ([#2529](https://github.com/payloadcms/payload/issues/2529)) ([85b3d57](https://github.com/payloadcms/payload/commit/85b3d579d3054aad2de793957cf6454332361327))
+
+## [1.7.2](https://github.com/payloadcms/payload/compare/v1.7.1...v1.7.2) (2023-04-25)
+
+
+### Bug Fixes
+
+* [#2521](https://github.com/payloadcms/payload/issues/2521), graphql AND not working with drafts ([e67ca20](https://github.com/payloadcms/payload/commit/e67ca2010831c14938d3f639fcb5374ca62747ba))
+* document drawer access control [#2545](https://github.com/payloadcms/payload/issues/2545) ([439caf8](https://github.com/payloadcms/payload/commit/439caf815fc99538f14b3a59835dcf49185759dc))
+* prevent floating point number in image sizes ([#1935](https://github.com/payloadcms/payload/issues/1935)) ([7fcde11](https://github.com/payloadcms/payload/commit/7fcde11fa0b232537de606e44c0af68b122daed2))
+* prevent sharp toFormat settings fallthrough by using clone ([#2547](https://github.com/payloadcms/payload/issues/2547)) ([90dab3c](https://github.com/payloadcms/payload/commit/90dab3c445d4bdbab0eff286a2b66861d04f2a93))
+* query localized fields without localization configured ([12edb1c](https://github.com/payloadcms/payload/commit/12edb1cc4b2675d9b0948fb7f3439f61c6e2015d))
+* read-only styles ([823d022](https://github.com/payloadcms/payload/commit/823d0228c949fe58a7e0f11f95354b240c3ea876))
+
+
+### Features
+
+* add rich-text blockquote element, change quote node type to blockquote ([ed230a4](https://github.com/payloadcms/payload/commit/ed230a42e0315dc2492b4a26e3bf8b5334e89380))
+* add user to field conditional logic ([274edc7](https://github.com/payloadcms/payload/commit/274edc74a70202e8c771c5111507b585c3f69377))
+* exposes id in conditional logic ([c117b32](https://github.com/payloadcms/payload/commit/c117b321474b8318c3a0ddf544e49568e461f0d8))
+* **imageresizer:** add trim options ([#2073](https://github.com/payloadcms/payload/issues/2073)) ([0406548](https://github.com/payloadcms/payload/commit/0406548fe6127e091db9926ee42e59f9158eff5a))
+
+## [1.7.1](https://github.com/payloadcms/payload/compare/v1.7.0...v1.7.1) (2023-04-18)
+
+
+### Bug Fixes
+
+* adds 'use client' for next 13 compatibility ([5e02985](https://github.com/payloadcms/payload/commit/5e029852060d6475eccada35ffbcdd0178d5e690))
+* graphql variables not being passed properly ([72be80a](https://github.com/payloadcms/payload/commit/72be80abc4082013e052aef1152a5de749a6f3c4))
+
+
+### Features
+
+* configuration extension points ([023719d](https://github.com/payloadcms/payload/commit/023719d77554a70493d779ba94bf55058d4caf98))
+
+## [1.7.0](https://github.com/payloadcms/payload/compare/v1.6.32...v1.7.0) (2023-04-17)
+
+### Features
+
+- feat: exposes new replaceState form api (52ae6f06a)
+- feat: support email configuration in payload config (#2485) (042e58ea2)
+- feat: refactors buildQuery to rely on fields instead of mongoose (d187b809d)
+- feat: add admin.hidden to collections and globals (#2487) (81d69d1b6)
+- feat: replace deprecated express-graphql dependency (#2484) (cd548a6e2)
+- feat: supports null preview url #2472 (e8a24fd2e)
+- feat: migrates form builder example nextjs to examples (28ecb0c5e)
+
+### Bug Fixes
+
+- fix: #2494, reduces versions caused by reverting to published with autosave: true (e0c0b2fdf)
+- fix: incorrect version defaults (3f9bbe90b)
+- fix: hides preview button until document is saved #2476 (#2477) (f9b8e2dbc)
+- fix: corrects sidebar spacing in collection and global edit views #2478 (a45ab8bd7)
+- fix: use correct locale when querying relationships for list view (#2438) (15442a9cc)
+- fix: proper height data for animated gifs (#2506) (aee6ca05c)
+- fix: Clear blocks modal search input when closing the modal (#2501) (0f8051b57)
+- fix: excess padding on textarea (#2488) (6ceb79189)
+- fix: increase line height for global title (#2465) (19ce0d79e)
+- fix: uses docPermissions to show/hide x button on media collection doc fileDetails - #2428 (7f2c3d1d0)
+- fix: prevents rendering of version actions when a user does not have permission (13cc669e2)
+- fix: properly awaits email send to catch potential errors #2444 (#2470) (11a6ce6d3)
+
+## [1.6.32](https://github.com/payloadcms/payload/compare/v1.6.31...v1.6.32) (2023-04-05)
+
+### Features
+
+- only uses sharp if required ([f9f6ec4](https://github.com/payloadcms/payload/commit/f9f6ec47d9a4f9ed94b7f7a4d50f13a8ee881ad0))
+
+## [1.6.31](https://github.com/payloadcms/payload/compare/v1.6.30...v1.6.31) (2023-04-04)
+
+### Bug Fixes
+
+- ensures select hasMany does not get mutated on patch operations ([3a6acf3](https://github.com/payloadcms/payload/commit/3a6acf322b5546ca3cd1d4dcb093af6e3b6ed086))
+
+### Features
+
+- improves required type accuracy ([a9cd23a](https://github.com/payloadcms/payload/commit/a9cd23a883d89c8deb3c1b5386decd50516d69fd))
+
+## [1.6.30](https://github.com/payloadcms/payload/compare/v1.6.29...v1.6.30) (2023-04-03)
+
+### Bug Fixes
+
+- incorrect type local api using delete with where ([de5ceb2](https://github.com/payloadcms/payload/commit/de5ceb2aca624f702ea39556ffe2f689701615c1))
+- originalDoc being mutated in beforeChange field hooks ([888bbf2](https://github.com/payloadcms/payload/commit/888bbf28e0b793a2298e27a7e1df235d78b0a718))
+
+## [1.6.29](https://github.com/payloadcms/payload/compare/v1.6.28...v1.6.29) (2023-03-31)
+
+### Bug Fixes
+
+- update and delete local API return types ([#2434](https://github.com/payloadcms/payload/issues/2434)) ([02410a0](https://github.com/payloadcms/payload/commit/02410a0be38004b90d19207071569294fd104a66))
+
+## [1.6.28](https://github.com/payloadcms/payload/compare/v1.6.27...v1.6.28) (2023-03-28)
+
+### Bug Fixes
+
+- potential memory leak with `probe-image-size` ([8eea0d6](https://github.com/payloadcms/payload/commit/8eea0d6cf41dd6360d713f463ad1b48ba253a9e7))
+
 ## [1.6.27](https://github.com/payloadcms/payload/compare/v1.6.26...v1.6.27) (2023-03-27)
 
-
 ### Bug Fixes
 
-* [#2355](https://github.com/payloadcms/payload/issues/2355), select field not fully visible on small screens in certain scenarios ([07eb8dd](https://github.com/payloadcms/payload/commit/07eb8dd7d252043c00b79d532736896134204c4c))
-* [#2384](https://github.com/payloadcms/payload/issues/2384), preserves manually set verified from admin UI ([72a8b1e](https://github.com/payloadcms/payload/commit/72a8b1eebe6c3b45663a14fa7488772ad13f975d))
-* hide fields with admin.hidden attribute ([ad25b09](https://github.com/payloadcms/payload/commit/ad25b096b6efa7e0cba647e82e29e36f7a95934a))
-* make update typing a deep partial ([#2407](https://github.com/payloadcms/payload/issues/2407)) ([e8dc7d4](https://github.com/payloadcms/payload/commit/e8dc7d462e21d1021275a95fbf62094f290e37ce))
-* restoring version did not correctly create new version from result ([6ca12b1](https://github.com/payloadcms/payload/commit/6ca12b1cc06554b04f3055df8f01d7eee1c09169))
-* textarea field overlap in UI ([1c8cf24](https://github.com/payloadcms/payload/commit/1c8cf24ba623746c160007d7c09b3160f2aae8d3))
+- [#2355](https://github.com/payloadcms/payload/issues/2355), select field not fully visible on small screens in certain scenarios ([07eb8dd](https://github.com/payloadcms/payload/commit/07eb8dd7d252043c00b79d532736896134204c4c))
+- [#2384](https://github.com/payloadcms/payload/issues/2384), preserves manually set verified from admin UI ([72a8b1e](https://github.com/payloadcms/payload/commit/72a8b1eebe6c3b45663a14fa7488772ad13f975d))
+- hide fields with admin.hidden attribute ([ad25b09](https://github.com/payloadcms/payload/commit/ad25b096b6efa7e0cba647e82e29e36f7a95934a))
+- make update typing a deep partial ([#2407](https://github.com/payloadcms/payload/issues/2407)) ([e8dc7d4](https://github.com/payloadcms/payload/commit/e8dc7d462e21d1021275a95fbf62094f290e37ce))
+- restoring version did not correctly create new version from result ([6ca12b1](https://github.com/payloadcms/payload/commit/6ca12b1cc06554b04f3055df8f01d7eee1c09169))
+- textarea field overlap in UI ([1c8cf24](https://github.com/payloadcms/payload/commit/1c8cf24ba623746c160007d7c09b3160f2aae8d3))
 
 ## [1.6.25](https://github.com/payloadcms/payload/compare/v1.6.24...v1.6.25) (2023-03-24)
 
-
 ### Bug Fixes
 
-* upload field select existing file ([#2392](https://github.com/payloadcms/payload/issues/2392)) ([38e917a](https://github.com/payloadcms/payload/commit/38e917a3dfa70ac3234915a6c8f7424eb22cb000))
+- upload field select existing file ([#2392](https://github.com/payloadcms/payload/issues/2392)) ([38e917a](https://github.com/payloadcms/payload/commit/38e917a3dfa70ac3234915a6c8f7424eb22cb000))
 
 ## [1.6.24](https://github.com/payloadcms/payload/compare/v1.6.23...v1.6.24) (2023-03-23)
 
-
 ### Features
 
-* bulk-operations ([#2346](https://github.com/payloadcms/payload/issues/2346)) ([0fedbab](https://github.com/payloadcms/payload/commit/0fedbabe9e975f375dc12447fcdab4119bc6a4c4))
+- bulk-operations ([#2346](https://github.com/payloadcms/payload/issues/2346)) ([0fedbab](https://github.com/payloadcms/payload/commit/0fedbabe9e975f375dc12447fcdab4119bc6a4c4))
 
 ## [1.6.23](https://github.com/payloadcms/payload/compare/v1.6.22...v1.6.23) (2023-03-22)
 
-
 ### Bug Fixes
 
-* [#2315](https://github.com/payloadcms/payload/issues/2315) - deleting files if overwriteExistingFiles is true ([4d578f1](https://github.com/payloadcms/payload/commit/4d578f1bfd05efab5cc8db95895eabb776b2d9d1))
-* [#2363](https://github.com/payloadcms/payload/issues/2363) version tabs and select field comparisons ([#2364](https://github.com/payloadcms/payload/issues/2364)) ([21b8da7](https://github.com/payloadcms/payload/commit/21b8da7f415cdace9f7d5898c98f9c7a6bb39107))
-* allows base64 thumbnails ([#2361](https://github.com/payloadcms/payload/issues/2361)) ([e09ebff](https://github.com/payloadcms/payload/commit/e09ebfffa0a7a7fdb3469f272de0e6930d97a336))
-* DateField admin type ([#2256](https://github.com/payloadcms/payload/issues/2256)) ([fb2fd3e](https://github.com/payloadcms/payload/commit/fb2fd3e9b7e302d8069bfcb6f3cb698ac7abf0ca))
-* fallback to default locale showing on non-localized fields ([#2316](https://github.com/payloadcms/payload/issues/2316)) ([e1a6e08](https://github.com/payloadcms/payload/commit/e1a6e08aa140cf21597d6009b811f7fdd2106f4f))
-* Fix missing Spanish translations ([#2372](https://github.com/payloadcms/payload/issues/2372)) ([c0ff75c](https://github.com/payloadcms/payload/commit/c0ff75c1647a36219549e20fc081883f8cf1d7e4))
-* relationship field useAsTitle [#2333](https://github.com/payloadcms/payload/issues/2333) ([#2350](https://github.com/payloadcms/payload/issues/2350)) ([10dd819](https://github.com/payloadcms/payload/commit/10dd819863ecac4a5cea2e13f820df2224ac57f4))
-
+- [#2315](https://github.com/payloadcms/payload/issues/2315) - deleting files if overwriteExistingFiles is true ([4d578f1](https://github.com/payloadcms/payload/commit/4d578f1bfd05efab5cc8db95895eabb776b2d9d1))
+- [#2363](https://github.com/payloadcms/payload/issues/2363) version tabs and select field comparisons ([#2364](https://github.com/payloadcms/payload/issues/2364)) ([21b8da7](https://github.com/payloadcms/payload/commit/21b8da7f415cdace9f7d5898c98f9c7a6bb39107))
+- allows base64 thumbnails ([#2361](https://github.com/payloadcms/payload/issues/2361)) ([e09ebff](https://github.com/payloadcms/payload/commit/e09ebfffa0a7a7fdb3469f272de0e6930d97a336))
+- DateField admin type ([#2256](https://github.com/payloadcms/payload/issues/2256)) ([fb2fd3e](https://github.com/payloadcms/payload/commit/fb2fd3e9b7e302d8069bfcb6f3cb698ac7abf0ca))
+- fallback to default locale showing on non-localized fields ([#2316](https://github.com/payloadcms/payload/issues/2316)) ([e1a6e08](https://github.com/payloadcms/payload/commit/e1a6e08aa140cf21597d6009b811f7fdd2106f4f))
+- Fix missing Spanish translations ([#2372](https://github.com/payloadcms/payload/issues/2372)) ([c0ff75c](https://github.com/payloadcms/payload/commit/c0ff75c1647a36219549e20fc081883f8cf1d7e4))
+- relationship field useAsTitle [#2333](https://github.com/payloadcms/payload/issues/2333) ([#2350](https://github.com/payloadcms/payload/issues/2350)) ([10dd819](https://github.com/payloadcms/payload/commit/10dd819863ecac4a5cea2e13f820df2224ac57f4))
 
 ### Features
 
-* adds title attribute to ThumbnailCard ([#2368](https://github.com/payloadcms/payload/issues/2368)) ([a8766d0](https://github.com/payloadcms/payload/commit/a8766d00a8365c8e6ffe507944fbe49aaa39d4bd))
-* exposes defaultSort property for collection list view ([#2382](https://github.com/payloadcms/payload/issues/2382)) ([1f480c4](https://github.com/payloadcms/payload/commit/1f480c4cd5673a6fe08360183fe1c7c1d4e05de0))
+- adds title attribute to ThumbnailCard ([#2368](https://github.com/payloadcms/payload/issues/2368)) ([a8766d0](https://github.com/payloadcms/payload/commit/a8766d00a8365c8e6ffe507944fbe49aaa39d4bd))
+- exposes defaultSort property for collection list view ([#2382](https://github.com/payloadcms/payload/issues/2382)) ([1f480c4](https://github.com/payloadcms/payload/commit/1f480c4cd5673a6fe08360183fe1c7c1d4e05de0))
 
 ## [1.6.22](https://github.com/payloadcms/payload/compare/v1.6.21...v1.6.22) (2023-03-15)
 
 ## [1.6.21](https://github.com/payloadcms/payload/compare/v1.6.20...v1.6.21) (2023-03-15)
 
-
 ### Bug Fixes
 
-* hidden fields being mutated on patch ([#2317](https://github.com/payloadcms/payload/issues/2317)) ([8d65ba1](https://github.com/payloadcms/payload/commit/8d65ba1efd8744042bbaf669c10b6837a6b972f8))
+- hidden fields being mutated on patch ([#2317](https://github.com/payloadcms/payload/issues/2317)) ([8d65ba1](https://github.com/payloadcms/payload/commit/8d65ba1efd8744042bbaf669c10b6837a6b972f8))
 
 ## [1.6.20](https://github.com/payloadcms/payload/compare/v1.6.19...v1.6.20) (2023-03-13)
 
-
 ### Bug Fixes
 
-* allow thumbnails in upload gallery to show useAsTitle value ([aae6d71](https://github.com/payloadcms/payload/commit/aae6d716e5608270ca142f2f4df214f9e271deb4))
-* allows useListDrawer to work without collectionSlugs defined ([e1553c2](https://github.com/payloadcms/payload/commit/e1553c2fc88ac582744cd72d15c9e9ef3b8ec549))
-* cancels existing fetches if new fetches are started ([ccc92fd](https://github.com/payloadcms/payload/commit/ccc92fdb7519e14ff1092f19ae4e7060fa413aab))
-* check relationships indexed access for undefined ([959f017](https://github.com/payloadcms/payload/commit/959f01739c30450f3a6d052dd6083fdacf1527a4))
-* ensures documentID exists in doc documentDrawers ([#2304](https://github.com/payloadcms/payload/issues/2304)) ([566c45b](https://github.com/payloadcms/payload/commit/566c45b0b436a9a3ea8eff27de2ea829dd6a2f0c))
-* flattens title fields to allow seaching by title if title inside Row field ([75e776d](https://github.com/payloadcms/payload/commit/75e776ddb43b292eae6c1204589d9dc22deab50c))
-* keep drop zone active when hovering inner elements ([#2295](https://github.com/payloadcms/payload/issues/2295)) ([39e303a](https://github.com/payloadcms/payload/commit/39e303add62d2dbd3e72d17e64e1ea5d940b0298))
-* Prevent browser initial favicon request ([fd8ea88](https://github.com/payloadcms/payload/commit/fd8ea88488c80627346733e0595a2ef34c964a87))
-* removes forced require on array, block, group ts ([657aa65](https://github.com/payloadcms/payload/commit/657aa65e993d13e9a294456b73adcd57f20d7c87))
-* removes pagination type from top level admin config types ([bf9929e](https://github.com/payloadcms/payload/commit/bf9929e9a9919488f6de0e172909fa27719ecb04))
-* renders presentational table columns ([4e1748f](https://github.com/payloadcms/payload/commit/4e1748fb8a3554586b377e60738130d03ec12f38))
-* undefined point fields saving as empty object ([#2313](https://github.com/payloadcms/payload/issues/2313)) ([af16415](https://github.com/payloadcms/payload/commit/af164159fb52f4b0ef97e2fa34b881f97bc07310))
-
+- allow thumbnails in upload gallery to show useAsTitle value ([aae6d71](https://github.com/payloadcms/payload/commit/aae6d716e5608270ca142f2f4df214f9e271deb4))
+- allows useListDrawer to work without collectionSlugs defined ([e1553c2](https://github.com/payloadcms/payload/commit/e1553c2fc88ac582744cd72d15c9e9ef3b8ec549))
+- cancels existing fetches if new fetches are started ([ccc92fd](https://github.com/payloadcms/payload/commit/ccc92fdb7519e14ff1092f19ae4e7060fa413aab))
+- check relationships indexed access for undefined ([959f017](https://github.com/payloadcms/payload/commit/959f01739c30450f3a6d052dd6083fdacf1527a4))
+- ensures documentID exists in doc documentDrawers ([#2304](https://github.com/payloadcms/payload/issues/2304)) ([566c45b](https://github.com/payloadcms/payload/commit/566c45b0b436a9a3ea8eff27de2ea829dd6a2f0c))
+- flattens title fields to allow seaching by title if title inside Row field ([75e776d](https://github.com/payloadcms/payload/commit/75e776ddb43b292eae6c1204589d9dc22deab50c))
+- keep drop zone active when hovering inner elements ([#2295](https://github.com/payloadcms/payload/issues/2295)) ([39e303a](https://github.com/payloadcms/payload/commit/39e303add62d2dbd3e72d17e64e1ea5d940b0298))
+- Prevent browser initial favicon request ([fd8ea88](https://github.com/payloadcms/payload/commit/fd8ea88488c80627346733e0595a2ef34c964a87))
+- removes forced require on array, block, group ts ([657aa65](https://github.com/payloadcms/payload/commit/657aa65e993d13e9a294456b73adcd57f20d7c87))
+- removes pagination type from top level admin config types ([bf9929e](https://github.com/payloadcms/payload/commit/bf9929e9a9919488f6de0e172909fa27719ecb04))
+- renders presentational table columns ([4e1748f](https://github.com/payloadcms/payload/commit/4e1748fb8a3554586b377e60738130d03ec12f38))
+- undefined point fields saving as empty object ([#2313](https://github.com/payloadcms/payload/issues/2313)) ([af16415](https://github.com/payloadcms/payload/commit/af164159fb52f4b0ef97e2fa34b881f97bc07310))
 
 ### Features
 
-* [#2280](https://github.com/payloadcms/payload/issues/2280) Improve UX of paginator ([#2293](https://github.com/payloadcms/payload/issues/2293)) ([1df3d14](https://github.com/payloadcms/payload/commit/1df3d149e06cc955a61c4371371b601c0d9aad2b))
-* exposes useTheme hook ([abebde6](https://github.com/payloadcms/payload/commit/abebde6b120a9dddc9971325b616b9cb31bcba90))
-* provide refresh permissions for auth context ([e9c796e](https://github.com/payloadcms/payload/commit/e9c796e42c1bb1e0ce72d057ee88dee624b94c24))
+- [#2280](https://github.com/payloadcms/payload/issues/2280) Improve UX of paginator ([#2293](https://github.com/payloadcms/payload/issues/2293)) ([1df3d14](https://github.com/payloadcms/payload/commit/1df3d149e06cc955a61c4371371b601c0d9aad2b))
+- exposes useTheme hook ([abebde6](https://github.com/payloadcms/payload/commit/abebde6b120a9dddc9971325b616b9cb31bcba90))
+- provide refresh permissions for auth context ([e9c796e](https://github.com/payloadcms/payload/commit/e9c796e42c1bb1e0ce72d057ee88dee624b94c24))
 
 ## [1.6.19](https://github.com/payloadcms/payload/compare/v1.6.18...v1.6.19) (2023-03-09)
 
-
 ### Bug Fixes
 
-* ensures nested fields save properly within link, upload rte ([057522c](https://github.com/payloadcms/payload/commit/057522c5bdade430c6e60f589a32f174739d400c))
+- ensures nested fields save properly within link, upload rte ([057522c](https://github.com/payloadcms/payload/commit/057522c5bdade430c6e60f589a32f174739d400c))
 
 ## [1.6.18](https://github.com/payloadcms/payload/compare/v1.6.17...v1.6.18) (2023-03-09)
 
-
 ### Bug Fixes
 
-* [#2272](https://github.com/payloadcms/payload/issues/2272), rich text within blocks causing crash on reorder ([7daddf8](https://github.com/payloadcms/payload/commit/7daddf864d71e83fa74bc76768d85d4c7fa93d9a))
-* allows swc/register to transpile files above current workspace ([ef826c8](https://github.com/payloadcms/payload/commit/ef826c88ec40878bb36e960c2df2c68ec3c54ef6))
-* renders row fields as table columns [#2257](https://github.com/payloadcms/payload/issues/2257) ([b10e842](https://github.com/payloadcms/payload/commit/b10e842e89a4e0839d0f391cfbafa916134c47c8))
-* table column preferences sync ([a1ddd2e](https://github.com/payloadcms/payload/commit/a1ddd2e2e37a76471631a90938a9ceaba8f9a394))
+- [#2272](https://github.com/payloadcms/payload/issues/2272), rich text within blocks causing crash on reorder ([7daddf8](https://github.com/payloadcms/payload/commit/7daddf864d71e83fa74bc76768d85d4c7fa93d9a))
+- allows swc/register to transpile files above current workspace ([ef826c8](https://github.com/payloadcms/payload/commit/ef826c88ec40878bb36e960c2df2c68ec3c54ef6))
+- renders row fields as table columns [#2257](https://github.com/payloadcms/payload/issues/2257) ([b10e842](https://github.com/payloadcms/payload/commit/b10e842e89a4e0839d0f391cfbafa916134c47c8))
+- table column preferences sync ([a1ddd2e](https://github.com/payloadcms/payload/commit/a1ddd2e2e37a76471631a90938a9ceaba8f9a394))
 
 ## [1.6.17](https://github.com/payloadcms/payload/compare/v1.6.15...v1.6.17) (2023-03-06)
 
-
 ### Bug Fixes
 
-* [#2150](https://github.com/payloadcms/payload/issues/2150), can now query on N number of levels deep ([ac54b11](https://github.com/payloadcms/payload/commit/ac54b11f9d2f9cfde15a4421d13ce26ffd6cdc63))
-* [#2179](https://github.com/payloadcms/payload/issues/2179), async default values resetting form state ([a4de51a](https://github.com/payloadcms/payload/commit/a4de51adaaa9399fa9036e485eb2e7f350719638))
-* allows empty objects to be retained in db ([0247e2d](https://github.com/payloadcms/payload/commit/0247e2d1068527213f007c71f6efa1aff4c21af6))
-* clear relationship value ([#2188](https://github.com/payloadcms/payload/issues/2188)) ([387cec9](https://github.com/payloadcms/payload/commit/387cec983868d6c10c043248b45fc8c1657e4981))
-* conditionally renders draggable pill ([#2224](https://github.com/payloadcms/payload/issues/2224)) ([812ab9f](https://github.com/payloadcms/payload/commit/812ab9f86824aca3689ddef8af759a84f59f2148))
-* ensures sorting on drafts works in all cases ([c87fd2b](https://github.com/payloadcms/payload/commit/c87fd2b649e59afb6fe7998d04142f3ba246dcef))
-* globals publish after draft ([44651e6](https://github.com/payloadcms/payload/commit/44651e6ecc354dbe17a08fccfafd686420d07158))
-* minimize not set to false on all field type schemas ([ace032e](https://github.com/payloadcms/payload/commit/ace032ef897dc55131c6cf7cb80dc1a652940748))
-* pass result of previous hook into next hook ([c661ac2](https://github.com/payloadcms/payload/commit/c661ac2e8a26251e77c558e00ed3c32741d2d385))
-* properly resizes animated images ([#2181](https://github.com/payloadcms/payload/issues/2181)) ([8c4f890](https://github.com/payloadcms/payload/commit/8c4f890af0cbd1f2b3a2dd1980d26ba3e721f154))
-* properly set req.payload on forgotPassword in local API ([#2194](https://github.com/payloadcms/payload/issues/2194)) ([5ac436e](https://github.com/payloadcms/payload/commit/5ac436e1843aacc81072992805bdbd1aed41d243))
-* redirects example ([#2209](https://github.com/payloadcms/payload/issues/2209)) ([5aa203d](https://github.com/payloadcms/payload/commit/5aa203d020177eb25b7675d6ab30fc8721b9fe0c))
-* removes duplicative fields from table columns [#2221](https://github.com/payloadcms/payload/issues/2221) ([#2226](https://github.com/payloadcms/payload/issues/2226)) ([474a3cb](https://github.com/payloadcms/payload/commit/474a3cbf7a90ab02d9e6c86ee018895576cbcab9))
-* renders rte upload drawer [#2178](https://github.com/payloadcms/payload/issues/2178) ([523d9d4](https://github.com/payloadcms/payload/commit/523d9d495261b44fdb9c7922bfa9cdd8aaba85fb))
-* skips field validation on submit if skipValidation is set to true ([cf17760](https://github.com/payloadcms/payload/commit/cf17760735d466a5817fc37bc3dc6f3ad8c52f7a))
-* Validate typescript signature ([8d31ed6](https://github.com/payloadcms/payload/commit/8d31ed6d39d1a4d147e13de5b96073fab5563173))
-* version comparison view errors on old select value ([#2163](https://github.com/payloadcms/payload/issues/2163)) ([a3cc3c3](https://github.com/payloadcms/payload/commit/a3cc3c342928e00564a662ba210635d78238fed8))
-* versions table ([#2235](https://github.com/payloadcms/payload/issues/2235)) ([066f5f6](https://github.com/payloadcms/payload/commit/066f5f6d2cb48525896366166693af6c92d1814d))
-* virtual fields example ([#2214](https://github.com/payloadcms/payload/issues/2214)) ([f6eb020](https://github.com/payloadcms/payload/commit/f6eb0202fec15a0ba0e6c357ecdb9ace62bd2ea9))
-
+- [#2150](https://github.com/payloadcms/payload/issues/2150), can now query on N number of levels deep ([ac54b11](https://github.com/payloadcms/payload/commit/ac54b11f9d2f9cfde15a4421d13ce26ffd6cdc63))
+- [#2179](https://github.com/payloadcms/payload/issues/2179), async default values resetting form state ([a4de51a](https://github.com/payloadcms/payload/commit/a4de51adaaa9399fa9036e485eb2e7f350719638))
+- allows empty objects to be retained in db ([0247e2d](https://github.com/payloadcms/payload/commit/0247e2d1068527213f007c71f6efa1aff4c21af6))
+- clear relationship value ([#2188](https://github.com/payloadcms/payload/issues/2188)) ([387cec9](https://github.com/payloadcms/payload/commit/387cec983868d6c10c043248b45fc8c1657e4981))
+- conditionally renders draggable pill ([#2224](https://github.com/payloadcms/payload/issues/2224)) ([812ab9f](https://github.com/payloadcms/payload/commit/812ab9f86824aca3689ddef8af759a84f59f2148))
+- ensures sorting on drafts works in all cases ([c87fd2b](https://github.com/payloadcms/payload/commit/c87fd2b649e59afb6fe7998d04142f3ba246dcef))
+- globals publish after draft ([44651e6](https://github.com/payloadcms/payload/commit/44651e6ecc354dbe17a08fccfafd686420d07158))
+- minimize not set to false on all field type schemas ([ace032e](https://github.com/payloadcms/payload/commit/ace032ef897dc55131c6cf7cb80dc1a652940748))
+- pass result of previous hook into next hook ([c661ac2](https://github.com/payloadcms/payload/commit/c661ac2e8a26251e77c558e00ed3c32741d2d385))
+- properly resizes animated images ([#2181](https://github.com/payloadcms/payload/issues/2181)) ([8c4f890](https://github.com/payloadcms/payload/commit/8c4f890af0cbd1f2b3a2dd1980d26ba3e721f154))
+- properly set req.payload on forgotPassword in local API ([#2194](https://github.com/payloadcms/payload/issues/2194)) ([5ac436e](https://github.com/payloadcms/payload/commit/5ac436e1843aacc81072992805bdbd1aed41d243))
+- redirects example ([#2209](https://github.com/payloadcms/payload/issues/2209)) ([5aa203d](https://github.com/payloadcms/payload/commit/5aa203d020177eb25b7675d6ab30fc8721b9fe0c))
+- removes duplicative fields from table columns [#2221](https://github.com/payloadcms/payload/issues/2221) ([#2226](https://github.com/payloadcms/payload/issues/2226)) ([474a3cb](https://github.com/payloadcms/payload/commit/474a3cbf7a90ab02d9e6c86ee018895576cbcab9))
+- renders rte upload drawer [#2178](https://github.com/payloadcms/payload/issues/2178) ([523d9d4](https://github.com/payloadcms/payload/commit/523d9d495261b44fdb9c7922bfa9cdd8aaba85fb))
+- skips field validation on submit if skipValidation is set to true ([cf17760](https://github.com/payloadcms/payload/commit/cf17760735d466a5817fc37bc3dc6f3ad8c52f7a))
+- Validate typescript signature ([8d31ed6](https://github.com/payloadcms/payload/commit/8d31ed6d39d1a4d147e13de5b96073fab5563173))
+- version comparison view errors on old select value ([#2163](https://github.com/payloadcms/payload/issues/2163)) ([a3cc3c3](https://github.com/payloadcms/payload/commit/a3cc3c342928e00564a662ba210635d78238fed8))
+- versions table ([#2235](https://github.com/payloadcms/payload/issues/2235)) ([066f5f6](https://github.com/payloadcms/payload/commit/066f5f6d2cb48525896366166693af6c92d1814d))
+- virtual fields example ([#2214](https://github.com/payloadcms/payload/issues/2214)) ([f6eb020](https://github.com/payloadcms/payload/commit/f6eb0202fec15a0ba0e6c357ecdb9ace62bd2ea9))
 
 ### Features
 
-* Add Hungarian Translations ([#2169](https://github.com/payloadcms/payload/issues/2169)) ([ebd16e8](https://github.com/payloadcms/payload/commit/ebd16e8fdf811ec19dd5231b01c91f201d00d3a3))
-* adds min and max options to relationship with hasMany ([0f38a0d](https://github.com/payloadcms/payload/commit/0f38a0dcf6a4d993579ed3af55940f28b13f5d3d))
-* drag-and-drop columns ([#2142](https://github.com/payloadcms/payload/issues/2142)) ([e2c65e3](https://github.com/payloadcms/payload/commit/e2c65e3fa519fc04c7d1552064980ffee145a3bc))
-* improves ui performance with thousands of fields ([0779f8d](https://github.com/payloadcms/payload/commit/0779f8d73da4767e9918b04cc8795e52b2198f4c))
+- Add Hungarian Translations ([#2169](https://github.com/payloadcms/payload/issues/2169)) ([ebd16e8](https://github.com/payloadcms/payload/commit/ebd16e8fdf811ec19dd5231b01c91f201d00d3a3))
+- adds min and max options to relationship with hasMany ([0f38a0d](https://github.com/payloadcms/payload/commit/0f38a0dcf6a4d993579ed3af55940f28b13f5d3d))
+- drag-and-drop columns ([#2142](https://github.com/payloadcms/payload/issues/2142)) ([e2c65e3](https://github.com/payloadcms/payload/commit/e2c65e3fa519fc04c7d1552064980ffee145a3bc))
+- improves ui performance with thousands of fields ([0779f8d](https://github.com/payloadcms/payload/commit/0779f8d73da4767e9918b04cc8795e52b2198f4c))
 
 ## [1.6.16](https://github.com/payloadcms/payload/compare/v1.6.15...v1.6.16) (2023-02-28)
 
-
 ### Bug Fixes
 
-* [#2150](https://github.com/payloadcms/payload/issues/2150), can now query on N number of levels deep ([ac54b11](https://github.com/payloadcms/payload/commit/ac54b11f9d2f9cfde15a4421d13ce26ffd6cdc63))
-* [#2179](https://github.com/payloadcms/payload/issues/2179), async default values resetting form state ([a4de51a](https://github.com/payloadcms/payload/commit/a4de51adaaa9399fa9036e485eb2e7f350719638))
-* allows empty objects to be retained in db ([0247e2d](https://github.com/payloadcms/payload/commit/0247e2d1068527213f007c71f6efa1aff4c21af6))
-* clear relationship value ([#2188](https://github.com/payloadcms/payload/issues/2188)) ([387cec9](https://github.com/payloadcms/payload/commit/387cec983868d6c10c043248b45fc8c1657e4981))
-* ensures sorting on drafts works in all cases ([c87fd2b](https://github.com/payloadcms/payload/commit/c87fd2b649e59afb6fe7998d04142f3ba246dcef))
-* globals publish after draft ([44651e6](https://github.com/payloadcms/payload/commit/44651e6ecc354dbe17a08fccfafd686420d07158))
-* properly resizes animated images ([#2181](https://github.com/payloadcms/payload/issues/2181)) ([8c4f890](https://github.com/payloadcms/payload/commit/8c4f890af0cbd1f2b3a2dd1980d26ba3e721f154))
-* properly set req.payload on forgotPassword in local API ([#2194](https://github.com/payloadcms/payload/issues/2194)) ([5ac436e](https://github.com/payloadcms/payload/commit/5ac436e1843aacc81072992805bdbd1aed41d243))
-* redirects example ([#2209](https://github.com/payloadcms/payload/issues/2209)) ([5aa203d](https://github.com/payloadcms/payload/commit/5aa203d020177eb25b7675d6ab30fc8721b9fe0c))
-* renders rte upload drawer [#2178](https://github.com/payloadcms/payload/issues/2178) ([523d9d4](https://github.com/payloadcms/payload/commit/523d9d495261b44fdb9c7922bfa9cdd8aaba85fb))
-* skips field validation on submit if skipValidation is set to true ([cf17760](https://github.com/payloadcms/payload/commit/cf17760735d466a5817fc37bc3dc6f3ad8c52f7a))
-* version comparison view errors on old select value ([#2163](https://github.com/payloadcms/payload/issues/2163)) ([a3cc3c3](https://github.com/payloadcms/payload/commit/a3cc3c342928e00564a662ba210635d78238fed8))
-
+- [#2150](https://github.com/payloadcms/payload/issues/2150), can now query on N number of levels deep ([ac54b11](https://github.com/payloadcms/payload/commit/ac54b11f9d2f9cfde15a4421d13ce26ffd6cdc63))
+- [#2179](https://github.com/payloadcms/payload/issues/2179), async default values resetting form state ([a4de51a](https://github.com/payloadcms/payload/commit/a4de51adaaa9399fa9036e485eb2e7f350719638))
+- allows empty objects to be retained in db ([0247e2d](https://github.com/payloadcms/payload/commit/0247e2d1068527213f007c71f6efa1aff4c21af6))
+- clear relationship value ([#2188](https://github.com/payloadcms/payload/issues/2188)) ([387cec9](https://github.com/payloadcms/payload/commit/387cec983868d6c10c043248b45fc8c1657e4981))
+- ensures sorting on drafts works in all cases ([c87fd2b](https://github.com/payloadcms/payload/commit/c87fd2b649e59afb6fe7998d04142f3ba246dcef))
+- globals publish after draft ([44651e6](https://github.com/payloadcms/payload/commit/44651e6ecc354dbe17a08fccfafd686420d07158))
+- properly resizes animated images ([#2181](https://github.com/payloadcms/payload/issues/2181)) ([8c4f890](https://github.com/payloadcms/payload/commit/8c4f890af0cbd1f2b3a2dd1980d26ba3e721f154))
+- properly set req.payload on forgotPassword in local API ([#2194](https://github.com/payloadcms/payload/issues/2194)) ([5ac436e](https://github.com/payloadcms/payload/commit/5ac436e1843aacc81072992805bdbd1aed41d243))
+- redirects example ([#2209](https://github.com/payloadcms/payload/issues/2209)) ([5aa203d](https://github.com/payloadcms/payload/commit/5aa203d020177eb25b7675d6ab30fc8721b9fe0c))
+- renders rte upload drawer [#2178](https://github.com/payloadcms/payload/issues/2178) ([523d9d4](https://github.com/payloadcms/payload/commit/523d9d495261b44fdb9c7922bfa9cdd8aaba85fb))
+- skips field validation on submit if skipValidation is set to true ([cf17760](https://github.com/payloadcms/payload/commit/cf17760735d466a5817fc37bc3dc6f3ad8c52f7a))
+- version comparison view errors on old select value ([#2163](https://github.com/payloadcms/payload/issues/2163)) ([a3cc3c3](https://github.com/payloadcms/payload/commit/a3cc3c342928e00564a662ba210635d78238fed8))
 
 ### Features
 
-* Add Hungarian Translations ([#2169](https://github.com/payloadcms/payload/issues/2169)) ([ebd16e8](https://github.com/payloadcms/payload/commit/ebd16e8fdf811ec19dd5231b01c91f201d00d3a3))
-* drag-and-drop columns ([#2142](https://github.com/payloadcms/payload/issues/2142)) ([e2c65e3](https://github.com/payloadcms/payload/commit/e2c65e3fa519fc04c7d1552064980ffee145a3bc))
+- Add Hungarian Translations ([#2169](https://github.com/payloadcms/payload/issues/2169)) ([ebd16e8](https://github.com/payloadcms/payload/commit/ebd16e8fdf811ec19dd5231b01c91f201d00d3a3))
+- drag-and-drop columns ([#2142](https://github.com/payloadcms/payload/issues/2142)) ([e2c65e3](https://github.com/payloadcms/payload/commit/e2c65e3fa519fc04c7d1552064980ffee145a3bc))
 
 ## [1.6.15](https://github.com/payloadcms/payload/compare/v1.6.14...v1.6.15) (2023-02-21)
 
-
 ### Bug Fixes
 
-* mongoose connection error with useFacet ([5888fb9](https://github.com/payloadcms/payload/commit/5888fb9b3f82f49686da27c216b40c38b5a5d6c2))
+- mongoose connection error with useFacet ([5888fb9](https://github.com/payloadcms/payload/commit/5888fb9b3f82f49686da27c216b40c38b5a5d6c2))
 
 ## [1.6.14](https://github.com/payloadcms/payload/compare/v1.6.13...v1.6.14) (2023-02-21)
 
-
 ### Bug Fixes
 
-* [#2091](https://github.com/payloadcms/payload/issues/2091) admin translations for filter operators ([#2143](https://github.com/payloadcms/payload/issues/2143)) ([8a8c392](https://github.com/payloadcms/payload/commit/8a8c3920950ece5995f81bff717b30a2baf8f219))
-* [#2096](https://github.com/payloadcms/payload/issues/2096), allows custom ts paths with payload generate:types ([686a616](https://github.com/payloadcms/payload/commit/686a616b4cf06685fd22b075cf87ceafec455e40))
-* [#2117](https://github.com/payloadcms/payload/issues/2117) collection pagination defaultLimit ([#2147](https://github.com/payloadcms/payload/issues/2147)) ([2a4db38](https://github.com/payloadcms/payload/commit/2a4db3896ead2b49c0a7ebc5da6b9825b223ca19))
-* [#2131](https://github.com/payloadcms/payload/issues/2131), doesn't log in unverified user after resetting password ([3eb85b1](https://github.com/payloadcms/payload/commit/3eb85b1554ceb705c4a1436af4d9ba982e4cdbdf))
-* [#2134](https://github.com/payloadcms/payload/issues/2134), allows links to be populated without having relationship or upload enabled ([32a0778](https://github.com/payloadcms/payload/commit/32a0778fc4311509699b14f9a3f145380ec56e25))
-* [#2148](https://github.com/payloadcms/payload/issues/2148), adds queryHiddenFields property to find operation ([15b6bb3](https://github.com/payloadcms/payload/commit/15b6bb3d756697428775df5ece3c6092d0537d82))
-* checks locale is valid for monaco code editor ([#2144](https://github.com/payloadcms/payload/issues/2144)) ([40224ed](https://github.com/payloadcms/payload/commit/40224ed1bcd886be8bf2f5b42a272db7615495c1))
-* generate proper json field type according to rfc ([#2137](https://github.com/payloadcms/payload/issues/2137)) ([7e88698](https://github.com/payloadcms/payload/commit/7e8869858cfca70b2e996d984e065da75398076b))
-* removes custom header and gutter from rte link drawer [#2120](https://github.com/payloadcms/payload/issues/2120) ([#2135](https://github.com/payloadcms/payload/issues/2135)) ([6a7663b](https://github.com/payloadcms/payload/commit/6a7663beb57f624ea52d95a8f26345dcd32d65bc))
-* sizes property optional on upload ([#2066](https://github.com/payloadcms/payload/issues/2066)) ([79d047e](https://github.com/payloadcms/payload/commit/79d047e64fd40507abf9de2ced5dab7aeb2bb6fa))
-* useFacet config option to disable $facet aggregation ([#2141](https://github.com/payloadcms/payload/issues/2141)) ([b4a2074](https://github.com/payloadcms/payload/commit/b4a20741b2d995e5e46875c2ae1f11ff5b319e6b))
+- [#2091](https://github.com/payloadcms/payload/issues/2091) admin translations for filter operators ([#2143](https://github.com/payloadcms/payload/issues/2143)) ([8a8c392](https://github.com/payloadcms/payload/commit/8a8c3920950ece5995f81bff717b30a2baf8f219))
+- [#2096](https://github.com/payloadcms/payload/issues/2096), allows custom ts paths with payload generate:types ([686a616](https://github.com/payloadcms/payload/commit/686a616b4cf06685fd22b075cf87ceafec455e40))
+- [#2117](https://github.com/payloadcms/payload/issues/2117) collection pagination defaultLimit ([#2147](https://github.com/payloadcms/payload/issues/2147)) ([2a4db38](https://github.com/payloadcms/payload/commit/2a4db3896ead2b49c0a7ebc5da6b9825b223ca19))
+- [#2131](https://github.com/payloadcms/payload/issues/2131), doesn't log in unverified user after resetting password ([3eb85b1](https://github.com/payloadcms/payload/commit/3eb85b1554ceb705c4a1436af4d9ba982e4cdbdf))
+- [#2134](https://github.com/payloadcms/payload/issues/2134), allows links to be populated without having relationship or upload enabled ([32a0778](https://github.com/payloadcms/payload/commit/32a0778fc4311509699b14f9a3f145380ec56e25))
+- [#2148](https://github.com/payloadcms/payload/issues/2148), adds queryHiddenFields property to find operation ([15b6bb3](https://github.com/payloadcms/payload/commit/15b6bb3d756697428775df5ece3c6092d0537d82))
+- checks locale is valid for monaco code editor ([#2144](https://github.com/payloadcms/payload/issues/2144)) ([40224ed](https://github.com/payloadcms/payload/commit/40224ed1bcd886be8bf2f5b42a272db7615495c1))
+- generate proper json field type according to rfc ([#2137](https://github.com/payloadcms/payload/issues/2137)) ([7e88698](https://github.com/payloadcms/payload/commit/7e8869858cfca70b2e996d984e065da75398076b))
+- removes custom header and gutter from rte link drawer [#2120](https://github.com/payloadcms/payload/issues/2120) ([#2135](https://github.com/payloadcms/payload/issues/2135)) ([6a7663b](https://github.com/payloadcms/payload/commit/6a7663beb57f624ea52d95a8f26345dcd32d65bc))
+- sizes property optional on upload ([#2066](https://github.com/payloadcms/payload/issues/2066)) ([79d047e](https://github.com/payloadcms/payload/commit/79d047e64fd40507abf9de2ced5dab7aeb2bb6fa))
+- useFacet config option to disable $facet aggregation ([#2141](https://github.com/payloadcms/payload/issues/2141)) ([b4a2074](https://github.com/payloadcms/payload/commit/b4a20741b2d995e5e46875c2ae1f11ff5b319e6b))
 
 ## [1.6.13](https://github.com/payloadcms/payload/compare/v1.6.12...v1.6.13) (2023-02-18)
 
-
 ### Bug Fixes
 
-* [#2125](https://github.com/payloadcms/payload/issues/2125), ensures createdAt and updatedAt are returned in update operations ([42ebf68](https://github.com/payloadcms/payload/commit/42ebf6893257256554a57e6b6684a726d11800b8))
+- [#2125](https://github.com/payloadcms/payload/issues/2125), ensures createdAt and updatedAt are returned in update operations ([42ebf68](https://github.com/payloadcms/payload/commit/42ebf6893257256554a57e6b6684a726d11800b8))
 
 ## [1.6.12](https://github.com/payloadcms/payload/compare/v1.6.11...v1.6.12) (2023-02-17)
 
-
 ### Bug Fixes
 
-* ensures only valid fields can be queried on ([1930bc2](https://github.com/payloadcms/payload/commit/1930bc260e721c5c7a10793b5d2a7809694089f3))
-
+- ensures only valid fields can be queried on ([1930bc2](https://github.com/payloadcms/payload/commit/1930bc260e721c5c7a10793b5d2a7809694089f3))
 
 ### Features
 
-* adds gql auth example ([#2115](https://github.com/payloadcms/payload/issues/2115)) ([fa32c27](https://github.com/payloadcms/payload/commit/fa32c2771637af11d7ef0fb21b2f1f3cceae1ead))
-* auth example ([c076c77](https://github.com/payloadcms/payload/commit/c076c77db4a26cf514a040b1048de25b1141f0cb))
-* separates admin root component from DOM render logic ([ff4d1f6](https://github.com/payloadcms/payload/commit/ff4d1f6ac26f5cac56b6c5b7b67b99f50067cb8d))
-* virtual fields example ([#1990](https://github.com/payloadcms/payload/issues/1990)) ([2af0c04](https://github.com/payloadcms/payload/commit/2af0c04c8ae5892b317af240c1502bc21bb65253))
+- adds gql auth example ([#2115](https://github.com/payloadcms/payload/issues/2115)) ([fa32c27](https://github.com/payloadcms/payload/commit/fa32c2771637af11d7ef0fb21b2f1f3cceae1ead))
+- auth example ([c076c77](https://github.com/payloadcms/payload/commit/c076c77db4a26cf514a040b1048de25b1141f0cb))
+- separates admin root component from DOM render logic ([ff4d1f6](https://github.com/payloadcms/payload/commit/ff4d1f6ac26f5cac56b6c5b7b67b99f50067cb8d))
+- virtual fields example ([#1990](https://github.com/payloadcms/payload/issues/1990)) ([2af0c04](https://github.com/payloadcms/payload/commit/2af0c04c8ae5892b317af240c1502bc21bb65253))
 
 ## [1.6.11](https://github.com/payloadcms/payload/compare/v1.6.10...v1.6.11) (2023-02-15)
 
-
 ### Bug Fixes
 
-* existing upload deletion [#2098](https://github.com/payloadcms/payload/issues/2098) ([#2101](https://github.com/payloadcms/payload/issues/2101)) ([060c380](https://github.com/payloadcms/payload/commit/060c3805e567fe450c4b9aa00fbdbb919427c625))
-
+- existing upload deletion [#2098](https://github.com/payloadcms/payload/issues/2098) ([#2101](https://github.com/payloadcms/payload/issues/2101)) ([060c380](https://github.com/payloadcms/payload/commit/060c3805e567fe450c4b9aa00fbdbb919427c625))
 
 ### Features
 
-* preview example ([#1950](https://github.com/payloadcms/payload/issues/1950)) ([0a87f10](https://github.com/payloadcms/payload/commit/0a87f106ecb5c95738109db5231d72abd281e7e1))
+- preview example ([#1950](https://github.com/payloadcms/payload/issues/1950)) ([0a87f10](https://github.com/payloadcms/payload/commit/0a87f106ecb5c95738109db5231d72abd281e7e1))
 
 ## [1.6.10](https://github.com/payloadcms/payload/compare/v1.6.9...v1.6.10) (2023-02-14)
 
-
 ### Bug Fixes
 
-* [#2077](https://github.com/payloadcms/payload/issues/2077) useAPIKey UI missing with disableLocalStrategy ([#2084](https://github.com/payloadcms/payload/issues/2084)) ([586b25a](https://github.com/payloadcms/payload/commit/586b25a54c6ec8bd134bce05c480cd429e47e252))
-* Add missing Spanish translations and fix typos ([c4742e5](https://github.com/payloadcms/payload/commit/c4742e5c303ca4ba41c2fbb45a8e8474608418c1))
-* document type in update request handler ([d5cd970](https://github.com/payloadcms/payload/commit/d5cd9709f717b08b930461079b147967d8d7a885))
-* ensures versions createdAt matches the original doc ([8c7e37c](https://github.com/payloadcms/payload/commit/8c7e37c56aab2bb28de01cf7d4a91062cbde80de))
-* globals not saving drafts unless published first ([#2082](https://github.com/payloadcms/payload/issues/2082)) ([4999fba](https://github.com/payloadcms/payload/commit/4999fbaee680e256ece7083fbe422f25e85de0d5))
-* Use the user's AdminUI locale for the DatePicker ([#2046](https://github.com/payloadcms/payload/issues/2046)) ([#2057](https://github.com/payloadcms/payload/issues/2057)) ([b4a7e91](https://github.com/payloadcms/payload/commit/b4a7e912b2117cef3345adb8b514958345838030))
-* validate type ([7bb0984](https://github.com/payloadcms/payload/commit/7bb0984a12a0d80d9ac2af82427ac7dbc985ffc5))
-
+- [#2077](https://github.com/payloadcms/payload/issues/2077) useAPIKey UI missing with disableLocalStrategy ([#2084](https://github.com/payloadcms/payload/issues/2084)) ([586b25a](https://github.com/payloadcms/payload/commit/586b25a54c6ec8bd134bce05c480cd429e47e252))
+- Add missing Spanish translations and fix typos ([c4742e5](https://github.com/payloadcms/payload/commit/c4742e5c303ca4ba41c2fbb45a8e8474608418c1))
+- document type in update request handler ([d5cd970](https://github.com/payloadcms/payload/commit/d5cd9709f717b08b930461079b147967d8d7a885))
+- ensures versions createdAt matches the original doc ([8c7e37c](https://github.com/payloadcms/payload/commit/8c7e37c56aab2bb28de01cf7d4a91062cbde80de))
+- globals not saving drafts unless published first ([#2082](https://github.com/payloadcms/payload/issues/2082)) ([4999fba](https://github.com/payloadcms/payload/commit/4999fbaee680e256ece7083fbe422f25e85de0d5))
+- Use the user's AdminUI locale for the DatePicker ([#2046](https://github.com/payloadcms/payload/issues/2046)) ([#2057](https://github.com/payloadcms/payload/issues/2057)) ([b4a7e91](https://github.com/payloadcms/payload/commit/b4a7e912b2117cef3345adb8b514958345838030))
+- validate type ([7bb0984](https://github.com/payloadcms/payload/commit/7bb0984a12a0d80d9ac2af82427ac7dbc985ffc5))
 
 ### Features
 
-* allows control over relationship add new button ([6096044](https://github.com/payloadcms/payload/commit/6096044fe058113ca47c7f7d833cb788d97df9a2))
-* async plugins ([#2030](https://github.com/payloadcms/payload/issues/2030)) ([9f30553](https://github.com/payloadcms/payload/commit/9f3055381337f80229f220c1e6114b4ea56be969))
-* export more errors ([3a2a41d](https://github.com/payloadcms/payload/commit/3a2a41d2b6ead4188b432d9e6780764a7c08b2dd))
+- allows control over relationship add new button ([6096044](https://github.com/payloadcms/payload/commit/6096044fe058113ca47c7f7d833cb788d97df9a2))
+- async plugins ([#2030](https://github.com/payloadcms/payload/issues/2030)) ([9f30553](https://github.com/payloadcms/payload/commit/9f3055381337f80229f220c1e6114b4ea56be969))
+- export more errors ([3a2a41d](https://github.com/payloadcms/payload/commit/3a2a41d2b6ead4188b432d9e6780764a7c08b2dd))
 
 ## [1.6.9](https://github.com/payloadcms/payload/compare/v1.6.7...v1.6.9) (2023-02-10)
 
-
 ### Bug Fixes
 
-* adds query constraint to ensureMaxVersions query ([30688bb](https://github.com/payloadcms/payload/commit/30688bbe4136285af181a5deae5e949b98bea0be))
-* translation of "or" -> "ou" in french ([#2047](https://github.com/payloadcms/payload/issues/2047)) ([dddbec2](https://github.com/payloadcms/payload/commit/dddbec268255c41b7ea786bdddc02dfeb7d66fbd))
-
+- adds query constraint to ensureMaxVersions query ([30688bb](https://github.com/payloadcms/payload/commit/30688bbe4136285af181a5deae5e949b98bea0be))
+- translation of "or" -> "ou" in french ([#2047](https://github.com/payloadcms/payload/issues/2047)) ([dddbec2](https://github.com/payloadcms/payload/commit/dddbec268255c41b7ea786bdddc02dfeb7d66fbd))
 
 ### Features
 
-* allows customization of the folder used to serve admin bundled files in production ([4d259a6](https://github.com/payloadcms/payload/commit/4d259a69f2c9beb1d84f703a08921469e6f1c34b))
+- allows customization of the folder used to serve admin bundled files in production ([4d259a6](https://github.com/payloadcms/payload/commit/4d259a69f2c9beb1d84f703a08921469e6f1c34b))
 
 ## [1.6.7](https://github.com/payloadcms/payload/compare/v1.6.6...v1.6.7) (2023-02-08)
 
-
 ### Bug Fixes
 
-* drawer state was not set when opened ([e6ac872](https://github.com/payloadcms/payload/commit/e6ac872b0d80470883836ef5aac0bdf4b62d6de9))
+- drawer state was not set when opened ([e6ac872](https://github.com/payloadcms/payload/commit/e6ac872b0d80470883836ef5aac0bdf4b62d6de9))
 
 ## [1.6.6](https://github.com/payloadcms/payload/compare/v1.6.5...v1.6.6) (2023-02-07)
 
-
 ### Bug Fixes
 
-* [#1887](https://github.com/payloadcms/payload/issues/1887), dataloader rich text population infinite loop ([ac2e174](https://github.com/payloadcms/payload/commit/ac2e174643419e5b01cfbbf53234b0145aeb5e4e))
-* enables locales with date field ([aefb655](https://github.com/payloadcms/payload/commit/aefb655769e7998a44cef9f93a19e4aef24c50bb))
+- [#1887](https://github.com/payloadcms/payload/issues/1887), dataloader rich text population infinite loop ([ac2e174](https://github.com/payloadcms/payload/commit/ac2e174643419e5b01cfbbf53234b0145aeb5e4e))
+- enables locales with date field ([aefb655](https://github.com/payloadcms/payload/commit/aefb655769e7998a44cef9f93a19e4aef24c50bb))
 
 ## [1.6.5](https://github.com/payloadcms/payload/compare/v1.6.4...v1.6.5) (2023-02-07)
 
-
 ### Bug Fixes
 
-* allows radio input to be tabbable ([b5880f2](https://github.com/payloadcms/payload/commit/b5880f26af8b97d47eca83a9fc7bd05b006cc54c))
-* auth type leaking into type gen ([1f0a1c7](https://github.com/payloadcms/payload/commit/1f0a1c796ab4126a464949f3a1bc34c7360470a5))
-* corrects keyboard accessibility for checkbox field ([65b8fd2](https://github.com/payloadcms/payload/commit/65b8fd27af05c25c3ddf86c34e1f181b8a605c27))
-* ensures preview is enabled before rendering button ([e968f40](https://github.com/payloadcms/payload/commit/e968f4067c2427965c0f96845aff8eaca36d0df6))
-* local API update typing ([#2010](https://github.com/payloadcms/payload/issues/2010)) ([4b0d4f4](https://github.com/payloadcms/payload/commit/4b0d4f4cd59940cace6b6b8cebf3d834d2b88dab)), closes [#2009](https://github.com/payloadcms/payload/issues/2009)
-* max versions incorrectly sorting, causing incorrect versions to be held onto ([2e4f7ab](https://github.com/payloadcms/payload/commit/2e4f7ab35c23f25051a5000e7902df7f255ed607))
-* named tabs not displaying data in versions view ([a41e295](https://github.com/payloadcms/payload/commit/a41e295e42fbf283733afd8b63bced9555cb1338))
-* replaced media not rendering after document save ([827428d](https://github.com/payloadcms/payload/commit/827428d6b57a7abe858ca5ddaad5ba4ec9d3a270))
-* webpack css-loader resolve urls ([ade4c01](https://github.com/payloadcms/payload/commit/ade4c011d348249e975a1510ae481018834a2ca2))
-
+- allows radio input to be tabbable ([b5880f2](https://github.com/payloadcms/payload/commit/b5880f26af8b97d47eca83a9fc7bd05b006cc54c))
+- auth type leaking into type gen ([1f0a1c7](https://github.com/payloadcms/payload/commit/1f0a1c796ab4126a464949f3a1bc34c7360470a5))
+- corrects keyboard accessibility for checkbox field ([65b8fd2](https://github.com/payloadcms/payload/commit/65b8fd27af05c25c3ddf86c34e1f181b8a605c27))
+- ensures preview is enabled before rendering button ([e968f40](https://github.com/payloadcms/payload/commit/e968f4067c2427965c0f96845aff8eaca36d0df6))
+- local API update typing ([#2010](https://github.com/payloadcms/payload/issues/2010)) ([4b0d4f4](https://github.com/payloadcms/payload/commit/4b0d4f4cd59940cace6b6b8cebf3d834d2b88dab)), closes [#2009](https://github.com/payloadcms/payload/issues/2009)
+- max versions incorrectly sorting, causing incorrect versions to be held onto ([2e4f7ab](https://github.com/payloadcms/payload/commit/2e4f7ab35c23f25051a5000e7902df7f255ed607))
+- named tabs not displaying data in versions view ([a41e295](https://github.com/payloadcms/payload/commit/a41e295e42fbf283733afd8b63bced9555cb1338))
+- replaced media not rendering after document save ([827428d](https://github.com/payloadcms/payload/commit/827428d6b57a7abe858ca5ddaad5ba4ec9d3a270))
+- webpack css-loader resolve urls ([ade4c01](https://github.com/payloadcms/payload/commit/ade4c011d348249e975a1510ae481018834a2ca2))
 
 ### Features
 
-* deletes old media upon re-upload [#1897](https://github.com/payloadcms/payload/issues/1897) ([02f9be2](https://github.com/payloadcms/payload/commit/02f9be2c4a15eed6bba07f504319a2213ea411df))
-* enables document drawers from read-only fields ([#1989](https://github.com/payloadcms/payload/issues/1989)) ([0dbc4fa](https://github.com/payloadcms/payload/commit/0dbc4fa21334e1a17c5aa35d84d78973fb7f54ec))
+- deletes old media upon re-upload [#1897](https://github.com/payloadcms/payload/issues/1897) ([02f9be2](https://github.com/payloadcms/payload/commit/02f9be2c4a15eed6bba07f504319a2213ea411df))
+- enables document drawers from read-only fields ([#1989](https://github.com/payloadcms/payload/issues/1989)) ([0dbc4fa](https://github.com/payloadcms/payload/commit/0dbc4fa21334e1a17c5aa35d84d78973fb7f54ec))
 
 ## [1.6.4](https://github.com/payloadcms/payload/compare/v1.6.3...v1.6.4) (2023-02-03)
 
-
 ### Bug Fixes
 
-* only hoists localized values if localization is enabled ([8c65f6a](https://github.com/payloadcms/payload/commit/8c65f6a93836d80fb22724454f5efb49e11763ad))
-
+- only hoists localized values if localization is enabled ([8c65f6a](https://github.com/payloadcms/payload/commit/8c65f6a93836d80fb22724454f5efb49e11763ad))
 
 ### Features
 
-* support large file uploads ([#1981](https://github.com/payloadcms/payload/issues/1981)) ([12ed655](https://github.com/payloadcms/payload/commit/12ed65588131c6db5252a1302a7dd82f0a10bd2e))
+- support large file uploads ([#1981](https://github.com/payloadcms/payload/issues/1981)) ([12ed655](https://github.com/payloadcms/payload/commit/12ed65588131c6db5252a1302a7dd82f0a10bd2e))
 
 ## [1.6.3](https://github.com/payloadcms/payload/compare/v1.6.2...v1.6.3) (2023-02-01)
 
-
 ### Bug Fixes
 
-* properly await graphql schema generation ([888b3a2](https://github.com/payloadcms/payload/commit/888b3a26727b32d19e39d1a8b672eb1881effad7))
+- properly await graphql schema generation ([888b3a2](https://github.com/payloadcms/payload/commit/888b3a26727b32d19e39d1a8b672eb1881effad7))
 
 ## [1.6.2](https://github.com/payloadcms/payload/compare/v1.6.1...v1.6.2) (2023-02-01)
 

docs/access-control/collections.mdx

@@ -30,7 +30,7 @@ If a Collection supports [`Authentication`](/docs/authentication/overview), the
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Posts: CollectionConfig = {
+export const Posts: CollectionConfig = {
   slug: "posts",
   // highlight-start
   access: {
@@ -42,8 +42,6 @@ const Posts: CollectionConfig = {
   },
   // highlight-end
 };
-
-export default Categories;
 ```
 
 ### Create

docs/access-control/fields.mdx

@@ -20,7 +20,7 @@ Field Access Control is specified with functions inside a field's config. All fi
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Posts: CollectionConfig = {
+export const Posts: CollectionConfig = {
   slug: 'posts',
   fields: [
     {
@@ -67,6 +67,8 @@ Returns a boolean which allows or denies the ability to read a field's value. If
 
 Returns a boolean which allows or denies the ability to update a field's value. If `false` is returned, any passed values will be discarded.
 
+If `false` is returned and you attempt to update the field's value, the operation will **not** throw an error however the field will be omitted from the update operation and the value will remain unchanged.
+
 **Available argument properties:**
 
 | Option            | Description |

docs/admin/components.mdx

@@ -21,22 +21,22 @@ To swap in your own React component, first, consult the list of available compon
 
 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:
 
-| 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)                                                                                                          |
+| 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)                                                                                                          |
 
 #### Full example:
 
@@ -77,18 +77,76 @@ _For more examples regarding how to customize components, look at the following
 
 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. |
+| 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.                                                          |
+
+#### Examples
+
+```tsx
+// Custom Buttons
+
+import * as React from "react";
+import {
+  CustomSaveButtonProps,
+  CustomSaveDraftButtonProps,
+  CustomPublishButtonProps,
+  CustomPreviewButtonProps,
+} from "payload/types";
+
+export const CustomSaveButton: CustomSaveButtonProps = ({
+  DefaultButton,
+  label,
+}) => {
+  return <DefaultButton label={label} />;
+};
+
+export const CustomSaveDraftButton: CustomSaveDraftButtonProps = ({
+  DefaultButton,
+  disabled,
+  label,
+  saveDraft,
+}) => {
+  return (
+    <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} />;
+};
+```
 
 ### 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. |
+| 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
 
@@ -163,7 +221,11 @@ const CustomTextField: React.FC<Props> = ({ 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, <a href="/docs/admin/hooks" style={{ color: "black" }}>click here</a>.
+  build custom components, including the <strong>useField</strong> hook,{" "}
+  <a href="/docs/admin/hooks" style={{ color: "black" }}>
+    click here
+  </a>
+  .
 </Banner>
 
 ## Custom routes
@@ -232,19 +294,20 @@ To make use of Payload SCSS variables / mixins to use directly in your own compo
 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 { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 const CustomComponent: React.FC = () => {
   // highlight-start
-  const { t, i18n } = useTranslation('namespace1');
+  const { t, i18n } = useTranslation("namespace1");
   // highlight-end
 
   return (
     <ul>
-      <li>{ t('key', { variable: 'value' }) }</li>
-      <li>{ t('namespace2:key', { variable: 'value' }) }</li>
-      <li>{ i18n.language }</li>
+      <li>{t("key", { variable: "value" })}</li>
+      <li>{t("namespace2:key", { variable: "value" })}</li>
+      <li>{i18n.language}</li>
     </ul>
   );
 };

docs/admin/hooks.mdx

@@ -166,7 +166,6 @@ The `useDocumentInfo` hook provides lots of information about the document curre
 |---------------------------|--------------------------------------------------------------------------------------------------------------------|                                |
 | **`collection`**          | If the doc is a collection, its collection config will be returned                                                 |
 | **`global`**              | If the doc is a global, its global config will be returned                                                         |
-| **`type`**                | The type of document being edited (collection or global)                                                           |
 | **`id`**                  | If the doc is a collection, its ID will be returned                                                                |
 | **`preferencesKey`**      | The `preferences` key to use when interacting with document-level user preferences                                 |
 | **`versions`**            | Versions of the current doc                                                                                        |

docs/admin/webpack.mdx

@@ -56,7 +56,7 @@ You may rely on server-only packages such as the above to perform logic in acces
 import { CollectionConfig } from 'payload/types';
 import createStripeSubscription from './hooks/createStripeSubscription';
 
-const Subscription: CollectionConfig = {
+export const Subscription: CollectionConfig = {
 	slug: 'subscriptions',
 	hooks: {
 		beforeChange: [
@@ -71,8 +71,6 @@ const Subscription: CollectionConfig = {
 		}
 	]
 };
-
-export default Subscription;
 ```
 
 The collection above features a `beforeChange` hook that creates a Stripe subscription whenever a Subscription document is created in Payload.

docs/authentication/config.mdx

@@ -82,7 +82,7 @@ Example:
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Customers: CollectionConfig = {
+export const Customers: CollectionConfig = {
   slug: 'customers',
   auth: {
     forgotPassword: {
@@ -156,7 +156,7 @@ Example:
 import { CollectionConfig } from 'payload/types';
 
 
-const Customers: CollectionConfig = {
+export const Customers: CollectionConfig = {
   slug: 'customers',
   auth: {
     verify: {

docs/authentication/overview.mdx

@@ -35,8 +35,8 @@ Simple example collection:
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Admins: CollectionConfig = {
-  slug:
+export const Admins: CollectionConfig = {
+  slug: 'admins',
   // highlight-start
   auth: {
     tokenExpiration: 7200, // How many seconds to keep the user logged in

docs/configuration/collections.mdx

@@ -16,6 +16,7 @@ It's often best practice to write your Collections in separate files and then im
 |--------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | **`slug`** *       | Unique, URL-friendly string that will act as an identifier for this Collection.                                                                                                                                          |
 | **`fields`** *     | Array of field types that will determine the structure and functionality of the data stored within this Collection. [Click here](/docs/fields/overview) for a full list of field types as well as how to configure them. |
+| **`indexes`** *    | Array of database indexes to create, including compound indexes that have multiple fields.                                                                                                                               |
 | **`labels`**       | Singular and plural labels for use in identifying this Collection throughout Payload. Auto-generated from slug if not defined.                                                                                           |
 | **`admin`**        | Admin-specific configuration. See below for [more detail](#admin-options).                                                                                                                                               |
 | **`hooks`**        | Entry points to "tie in" to Collection actions at specific points. [More](/docs/hooks/overview#collection-hooks)                                                                                                         |
@@ -27,8 +28,9 @@ It's often best practice to write your Collections in separate files and then im
 | **`endpoints`**    | Add custom routes to the REST API. [More](/docs/rest-api/overview#custom-endpoints)                                                                                                                                      |
 | **`graphQL`**      | An object with `singularName` and `pluralName` strings used in schema generation. Auto-generated from slug if not defined.                                                                                               |
 | **`typescript`**   | An object with property `interface` as the text used in schema generation. Auto-generated from slug if not defined.                                                                                                      |
-| **`defaultSort`**  | Pass a top-level field to sort by default in the collection List view. Prefix the name of the field with a minus symbol ("-") to sort in descending order.                                                                |
-| **`pagination`**   | Set pagination-specific options for this collection. [More](#pagination) |
+| **`defaultSort`**  | Pass a top-level field to sort by default in the collection List view. Prefix the name of the field with a minus symbol ("-") to sort in descending order.                                                               |
+| **`pagination`**   | Set pagination-specific options for this collection. [More](#pagination)                                                                                                                                                 |
+| **`custom`**       | Extension point for adding custom data (e.g. for plugins)                                                                                                                                                                |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -37,7 +39,7 @@ It's often best practice to write your Collections in separate files and then im
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Orders: CollectionConfig = {
+export const Orders: CollectionConfig = {
 	slug: 'orders',
 	fields: [
 		{
@@ -51,7 +53,7 @@ const Orders: CollectionConfig = {
 			relationTo: 'customers',
 			required: true,
 		}
-	]
+	],
 };
 ```
 
@@ -63,18 +65,21 @@ You can find an assortment of [example collection configs](https://github.com/pa
 
 You can customize the way that the Admin panel behaves on a collection-by-collection basis by defining the `admin` property on a collection's config.
 
-| Option                      | Description  |
-| --------------------------- | -------------|
-| `group`                     | Text used as a label for grouping collection links together in the navigation. |
-| `hooks`                     | Admin-specific hooks for this collection. [More](#admin-hooks) |
-| `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. |
-| `disableDuplicate `         | Disables the "Duplicate" button while editing documents within this collection. |
+| Option                       | Description                                                                                                                                                                                           |
+|------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `group`                      | Text used as a label for grouping collection 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](#admin-hooks)                                                                                                                                        |
+| `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.                                                                                              |
+| `disableDuplicate `          | Disables the "Duplicate" button while editing documents within this collection.                                                                                                                       |
+| `hideAPIURL`                 | Hides the "API URL" meta field while editing documents within this collection.                                                                                                                        |
+| `enableRichTextLink`         | The [Rich Text](/docs/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](/docs/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. |
-| `preview`                   | Function to generate preview URLS within the Admin panel that can point to your app. [More](#preview). |
-| `components`                | Swap in your own React components to be used within this collection. [More](/docs/admin/components#collections) |
-| `listSearchableFields`      | Specify which fields should be searched in the List search view. [More](#list-searchable-fields) |
+| `preview`                    | Function to generate preview URLS within the Admin panel that can point to your app. [More](#preview).                                                                                                |
+| `components`                 | Swap in your own React components to be used within this collection. [More](/docs/admin/components#collections)                                                                                       |
+| `listSearchableFields`       | Specify which fields should be searched in the List search view. [More](#list-searchable-fields)                                                                                                      |
 
 ### Preview
 
@@ -92,7 +97,7 @@ If the function is specified, a Preview button will automatically appear in the
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Posts: CollectionConfig = {
+export const Posts: CollectionConfig = {
 	slug: 'posts',
 	fields: [
 		{

docs/configuration/express.mdx

@@ -8,6 +8,40 @@ keywords: config, configuration, documentation, Content Management System, cms,
 
 Payload utilizes a few Express-specific middleware packages within its own routers. You can customize how they work by passing in configuration options to the main Payload config's `express` property.
 
+### Custom Middleware
+
+Payload allows you to pass in custom Express middleware to be used on all of the routes it opens. This is useful for adding logging or any other custom functionality to your endpoints.
+
+There are 2 exposed properties. Each property is an array of middleware functions.
+
+- `preMiddleware` - runs before any of the Payload middleware
+- `postMiddleware` - runs after all of the Payload middleware
+
+```ts
+{
+  express: {
+    preMiddleware: [
+      (req, res, next) => {
+        // do something
+        next()
+      }
+    ],
+    postMiddleware: [
+      (req, res, next) => {
+        // do something
+        next()
+      }
+    ]
+  }
+}
+
+// Example logging middleware function
+const requestLoggerMiddleware = (req, res, next) => {
+  req.payload.logger.info(`request: ${req.method} ${req.url}`)
+  next()
+}
+```
+
 ### JSON
 
 `express.json()` is used to parse JSON body content into JavaScript objects accessible on the Express `req`. Payload allows you to customize all of the `json` method's options. Common examples of customization use-cases are increasing the max allowed JSON body size which defaults to `2MB`.

docs/configuration/globals.mdx

@@ -25,6 +25,7 @@ As with Collection configs, it's often best practice to write your Globals in se
 | **`endpoints`**    | Add custom routes to the REST API. [More](/docs/rest-api/overview#custom-endpoints)                                                                                                                                  |
 | **`graphQL.name`** | Text used in schema generation. Auto-generated from slug if not defined.                                                                                                                                             |
 | **`typescript`**   | An object with property `interface` as the text used in schema generation. Auto-generated from slug if not defined.                                                                                                  |
+| **`custom`**       | Extension point for adding custom data (e.g. for plugins)                                                                                                                                                            |
 
 _\* An asterisk denotes that a property is required._
 
@@ -64,10 +65,12 @@ You can find an [example Global config](https://github.com/payloadcms/public-dem
 
 You can customize the way that the Admin panel behaves on a Global-by-Global basis by defining the `admin` property on a Global's config.
 
-| Option       | Description                                                                                                             |
-| ------------ | ----------------------------------------------------------------------------------------------------------------------- |
-| `components` | Swap in your own React components to be used within this Global. [More](/docs/admin/components#globals)                 |
-| `preview`    | Function to generate a preview URL within the Admin panel for this global that can point to your app. [More](#preview). |
+| Option       | Description                                                                                                                       |
+|--------------|-----------------------------------------------------------------------------------------------------------------------------------|
+| `hidden`     | Set to true or a function, called with the current user, returning true to exclude this global from navigation and admin routing. |
+| `components` | Swap in your own React components to be used within this Global. [More](/docs/admin/components#globals)                           |
+| `preview`    | Function to generate a preview URL within the Admin panel for this global that can point to your app. [More](#preview).           |
+| `hideAPIURL` | Hides the "API URL" meta field while editing documents within this collection.                                                    |
 
 ### Preview
 
@@ -85,7 +88,7 @@ If the function is specified, a Preview button will automatically appear in the
 ```ts
 import { GlobalConfig } from "payload/types";
 
-const MyGlobal: GlobalConfig = {
+export const MyGlobal: GlobalConfig = {
   slug: "my-global",
   fields: [
     {

docs/configuration/i18n.mdx

@@ -12,7 +12,9 @@ While Payload's built-in features come translated, you may want to also translat
 
 Here is an example of a simple collection supporting both English and Spanish editors:
 ```ts
-const Articles: CollectionConfig = {
+import { CollectionConfig } from 'payload/types';
+
+export const Articles: CollectionConfig = {
   slug: 'articles',
   labels: {
     singular: {

docs/configuration/localization.mdx

@@ -72,6 +72,15 @@ All field types with a `name` property support the `localized` property—even t
   Enabling localization for field types that support nested fields will automatically create localized "sets" of all fields contained within the field. For example, if you have a page layout using a blocks field type, you have the choice of either localizing the full layout, by enabling localization on the top-level blocks field, or only certain fields within the layout.
 </Banner>
 
+<Banner type="warning">
+  <strong>Important:</strong>
+  <br />
+  When converting an existing field to or from `localized: true` the data
+  structure in the document will change for this field and so existing data for
+  this field will be lost. Before changing the localization setting on fields
+  with existing data, you may need to consider a field migration strategy.
+</Banner>
+
 ### Retrieving localized docs
 
 When retrieving documents, you can specify which locale you'd like to receive as well as which fallback locale should be used.

docs/configuration/overview.mdx

@@ -43,6 +43,7 @@ Payload is a _config-based_, code-first CMS and application framework. The Paylo
 | `hooks`               | Tap into Payload-wide hooks. [More](/docs/hooks/overview)                                                                                                                     |
 | `plugins`             | An array of Payload plugins. [More](/docs/plugins/overview)                                                                                                                   |
 | `endpoints`           | An array of custom API endpoints added to the Payload router. [More](/docs/rest-api/overview#custom-endpoints)                                                                |
+| `custom`              | Extension point for adding custom data (e.g. for plugins)                                                                                                                     |
 
 #### Simple example
 

docs/fields/array.mdx

@@ -35,7 +35,8 @@ keywords: array, fields, config, configuration, documentation, Content Managemen
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. If enabled, a separate, localized set of all data within this Array will be kept, so there is no need to specify each nested field as `localized`. |
 | **`required`**       | Require this field to have a value.                                                                                                                                                                                                                                               |
 | **`labels`**         | Customize the row labels appearing in the Admin dashboard.                                                                                                                                                                                                                        |
-| **`admin`**        | Admin-specific configuration. See below for [more detail](#admin-config).                                                                                                                                                                                                         |
+| **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config).                                                                                                                                                                                                         |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins)                                                                                                                                                                                                                         |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -55,7 +56,7 @@ In addition to the default [field admin config](/docs/fields/overview#admin-conf
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/blocks.mdx

@@ -37,6 +37,7 @@ keywords: blocks, fields, config, configuration, documentation, Content Manageme
 | **`unique`**            | Enforce that each entry in the Collection has a unique value for this field.                                                                                                                                                                                                       |
 | **`labels`**            | Customize the block row labels appearing in the Admin dashboard.                                                                                                                                                                                                                   |
 | **`admin`**             | Admin-specific configuration. See below for [more detail](#admin-config).                                                                                                                                                                                                          |
+| **`custom`**            | Extension point for adding custom data (e.g. for plugins)                                                                                                                                                                                                                          |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -101,7 +102,7 @@ const QuoteBlock: Block = {
   ]
 };
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/checkbox.mdx

@@ -26,6 +26,7 @@ keywords: checkbox, fields, config, configuration, documentation, Content Manage
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
 | **`required`**       | Require this field to have a value. |
 | **`admin`**          | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -35,7 +36,7 @@ keywords: checkbox, fields, config, configuration, documentation, Content Manage
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/code.mdx

@@ -32,6 +32,7 @@ This field uses the `monaco-react` editor syntax highlighting.
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
 | **`required`**       | Require this field to have a value. |
 | **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 _\* An asterisk denotes that a property is required._
 
@@ -50,7 +51,7 @@ In addition to the default [field admin config](/docs/fields/overview#admin-conf
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/collapsible.mdx

@@ -17,6 +17,7 @@ keywords: row, fields, config, configuration, documentation, Content Management
 | **`label`** *  | A label to render within the header of the collapsible component. This can be a string, function or react component. Function/components receive `({ data, path })` as args. |
 | **`fields`** * | Array of field types to nest within this Collapsible.                     |
 | **`admin`**    | Admin-specific configuration. See below for [more detail](#admin-config). |
+| **`custom`**   | Extension point for adding custom data (e.g. for plugins)                 |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -34,7 +35,7 @@ In addition to the default [field admin config](/docs/fields/overview#admin-conf
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/date.mdx

@@ -18,7 +18,7 @@ This field uses [`react-datepicker`](https://www.npmjs.com/package/react-datepic
 | Option             | Description                                                                                                                                                                                         |
 | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`name`** \*      | To be used as the property name when stored and retrieved from the database. [More](/docs/fields/overview#field-names)                                                                              |
-| **`label`**        | Text used as a field label in the Admin panel or an object with keys for each language.                                                                                                                    |
+| **`label`**        | Text used as a field label in the Admin panel or an object with keys for each language.                                                                                                             |
 | **`index`**        | Build a [MongoDB index](https://docs.mongodb.com/manual/indexes/) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often. |
 | **`validate`**     | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation)                                                        |
 | **`saveToJWT`**    | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT.                                                       |
@@ -28,7 +28,8 @@ This field uses [`react-datepicker`](https://www.npmjs.com/package/react-datepic
 | **`defaultValue`** | Provide data to be used for this field's default value. [More](/docs/fields/overview#default-values)                                                                                                |
 | **`localized`**    | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config.                                                                     |
 | **`required`**     | Require this field to have a value.                                                                                                                                                                 |
-| **`admin`**        | Admin-specific configuration. See below for [more detail](#admin-config).                                                                                                                                  |
+| **`admin`**        | Admin-specific configuration. See below for [more detail](#admin-config).                                                                                                                           |
+| **`custom`**       | Extension point for adding custom data (e.g. for plugins)                                                                                                                                           |
 
 _\* An asterisk denotes that a property is required._
 
@@ -36,19 +37,19 @@ _\* An asterisk denotes that a property is required._
 
 In addition to the default [field admin config](/docs/fields/overview#admin-config), you can customize the following fields that will adjust how the component displays in the admin panel via the `date` property.
 
-| Property               |  Option                    | Description                                                                                                                             |
-| ---------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| **`placeholder`**      |                            | Placeholder text for the field.                                                                                                         |
-| **`date`**             |                            | Pass options to customize date field appearance.                                                                                        |
-|                        | **`displayFormat`**        | Format date to be shown in field **cell**.                 |
-|                        | **`pickerAppearance`** \*  | Determines the appearance of the datepicker: `dayAndTime` `timeOnly` `dayOnly` `monthOnly`.                                             |
-|                        | **`monthsToShow`**     \*  | Number of months to display max is 2. Defaults to 1.                                                                                    |
-|                        | **`minDate`**          \*  | Min date value to allow.                               |
-|                        | **`maxDate`**          \*  | Max date value to allow.                               |
-|                        | **`minTime`**          \*  | Min time value to allow.                               |
-|                        | **`maxTime`**          \*  | Max date value to allow.                               |
-|                        | **`timeIntervals`**    \*  | Time intervals to display. Defaults to 30 minutes.     |
-|                        | **`timeFormat`**       \*  | Determines time format. Defaults to `'h:mm aa'`.       |
+| Property                       | Description                                                                                 |
+| ------------------------------ | ------------------------------------------------------------------------------------------- |
+| **`placeholder`**              | Placeholder text for the field.                                                             |
+| **`date`**                     | Pass options to customize date field appearance.                                            |
+| **`date.displayFormat`**       | Format date to be shown in field **cell**.                                                  |
+| **`date.pickerAppearance`** \* | Determines the appearance of the datepicker: `dayAndTime` `timeOnly` `dayOnly` `monthOnly`. |
+| **`date.monthsToShow`** \*     | Number of months to display max is 2. Defaults to 1.                                        |
+| **`date.minDate`** \*          | Min date value to allow.                                                                    |
+| **`date.maxDate`** \*          | Max date value to allow.                                                                    |
+| **`date.minTime`** \*          | Min time value to allow.                                                                    |
+| **`date.maxTime`** \*          | Max date value to allow.                                                                    |
+| **`date.timeIntervals`** \*    | Time intervals to display. Defaults to 30 minutes.                                          |
+| **`date.timeFormat`** \*       | Determines time format. Defaults to `'h:mm aa'`.                                            |
 
 _\* This property is passed directly to [react-datepicker](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md). ._
 
@@ -60,48 +61,48 @@ These properties only affect how the date is displayed in the UI. The full date
 
 `pickerAppearance` sets the appearance of the **react datepicker**, the options available are `dayAndTime`, `dayOnly`, `timeOnly`, and `monthOnly`. By default, the datepicker will display `dayOnly`.
 
-When only `pickerAppearance`, an equivalent format will be rendered in the date field cell. To overwrite this format, set `displayFormat`.
+When only `pickerAppearance` is set, an equivalent format will be rendered in the date field cell. To overwrite this format, set `displayFormat`.
 
 ### Example
 
 `collections/ExampleCollection.ts`
 
 ```ts
-import { CollectionConfig } from 'payload/types';
+import { CollectionConfig } from "payload/types";
 
-const ExampleCollection: CollectionConfig = {
-  slug: 'example-collection',
+export const ExampleCollection: CollectionConfig = {
+  slug: "example-collection",
   fields: [
-      {
-      name: 'dateOnly',
-      type: 'date',
+    {
+      name: "dateOnly",
+      type: "date",
       admin: {
         date: {
-          pickerAppearance: 'dayOnly',
-          displayFormat: 'd MMM yyy',
+          pickerAppearance: "dayOnly",
+          displayFormat: "d MMM yyy",
         },
       },
     },
     {
-      name: 'timeOnly',
-      type: 'date',
+      name: "timeOnly",
+      type: "date",
       admin: {
         date: {
-          pickerAppearance: 'timeOnly',
-          displayFormat: 'h:mm:ss a',
+          pickerAppearance: "timeOnly",
+          displayFormat: "h:mm:ss a",
         },
       },
     },
     {
-      name: 'monthOnly',
-      type: 'date',
+      name: "monthOnly",
+      type: "date",
       admin: {
         date: {
-          pickerAppearance: 'monthOnly',
-          displayFormat: 'MMMM yyyy',
+          pickerAppearance: "monthOnly",
+          displayFormat: "MMMM yyyy",
         },
       },
     },
-  ]
+  ],
 };
 ```

docs/fields/email.mdx

@@ -27,6 +27,7 @@ keywords: email, fields, config, configuration, documentation, Content Managemen
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
 | **`required`**       | Require this field to have a value. |
 | **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -48,7 +49,7 @@ Set this property to a string that will be used for browser autocomplete.
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/group.mdx

@@ -25,6 +25,7 @@ keywords: group, fields, config, configuration, documentation, Content Managemen
 | **`defaultValue`**   | Provide an object of data to be used for this field's default value. [More](/docs/fields/overview#default-values) |
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. If enabled, a separate, localized set of all data within this Group will be kept, so there is no need to specify each nested field as `localized`. |
 | **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -42,7 +43,7 @@ Set this property to `true` to hide this field's gutter within the admin panel.
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/json.mdx

@@ -30,6 +30,7 @@ This field uses the `monaco-react` editor syntax highlighting.
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
 | **`required`**       | Require this field to have a value. |
 | **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 _\* An asterisk denotes that a property is required._
 
@@ -47,7 +48,7 @@ In addition to the default [field admin config](/docs/fields/overview#admin-conf
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/number.mdx

@@ -29,6 +29,7 @@ keywords: number, fields, config, configuration, documentation, Content Manageme
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
 | **`required`**       | Require this field to have a value. |
 | **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -54,7 +55,7 @@ Set this property to a string that will be used for browser autocomplete.
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/overview.mdx

@@ -19,7 +19,7 @@ The required `type` property on a field determines what values it can accept, ho
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Page: CollectionConfig = {
+export const Page: CollectionConfig = {
 	slug: 'pages',
 	fields: [
 		{
@@ -90,7 +90,7 @@ Example:
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Orders: CollectionConfig = {
+export const Orders: CollectionConfig = {
   slug: 'orders',
   fields: [
     {
@@ -175,10 +175,11 @@ All Payload fields support the ability to swap in your own React components with
 
 ### 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 two arguments:
+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.
 
@@ -197,7 +198,7 @@ The `condition` function should return a boolean that will control if the field
       type: 'text',
       admin: {
         // highlight-start
-        condition: (data, siblingData) => {
+        condition: (data, siblingData, { user }) => {
           if (data.enableGreeting) {
             return true;
           } else {

docs/fields/point.mdx

@@ -30,6 +30,7 @@ The data structure in the database matches the GeoJSON structure to represent po
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
 | **`required`**       | Require this field to have a value. |
 | **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -39,7 +40,7 @@ The data structure in the database matches the GeoJSON structure to represent po
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/radio.mdx

@@ -27,6 +27,7 @@ keywords: radio, fields, config, configuration, documentation, Content Managemen
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
 | **`required`**       | Require this field to have a value. |
 | **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -49,7 +50,7 @@ The `layout` property allows for the radio group to be styled as a horizonally o
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -72,5 +73,4 @@ const ExampleCollection: CollectionConfig = {
     }
   ]
 }
-
 ```

docs/fields/relationship.mdx

@@ -20,13 +20,13 @@ keywords: relationship, fields, config, configuration, documentation, Content Ma
 ### Config
 
 | Option              | Description                                                                                                                                                                                         |
-|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **`name`** \*       | To be used as the property name when stored and retrieved from the database. [More](/docs/fields/overview#field-names)                                                                              |
 | **`relationTo`** \* | Provide one or many collection `slug`s to be able to assign relationships to.                                                                                                                       |
 | **`filterOptions`** | A query to filter which options appear in the UI and validate against. [More](#filtering-relationship-options).                                                                                     |
 | **`hasMany`**       | Boolean when, if set to `true`, allows this field to have many relations instead of only one.                                                                                                       |
 | **`min`**           | A number for the fewest allowed items during validation when a value is present. Used with `hasMany`.                                                                                               |
-| **`max`**           | A number for the most allowed items during validation when a value is present. Used with `hasMany`.                                                                                        |
+| **`max`**           | A number for the most allowed items during validation when a value is present. Used with `hasMany`.                                                                                                 |
 | **`maxDepth`**      | Sets a number limit on iterations of related documents to populate when queried. [Depth](/docs/getting-started/concepts#depth)                                                                      |
 | **`label`**         | Text used as a field label in the Admin panel or an object with keys for each language.                                                                                                             |
 | **`unique`**        | Enforce that each entry in the Collection has a unique value for this field.                                                                                                                        |
@@ -40,6 +40,7 @@ keywords: relationship, fields, config, configuration, documentation, Content Ma
 | **`localized`**     | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config.                                                                     |
 | **`required`**      | Require this field to have a value.                                                                                                                                                                 |
 | **`admin`**         | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details.                                                                            |
+| **`custom`**        | Extension point for adding custom data (e.g. for plugins)                                                                                                                                           |
 
 _\* An asterisk denotes that a property is required._
 
@@ -76,27 +77,34 @@ The `filterOptions` property can either be a `Where` query directly, or a functi
 | `id`          | The value of the collection `id`, will be `undefined` on create request              |
 | `user`        | The currently authenticated user object                                              |
 
-**Example:**
+### Example
 
 ```ts
-const relationshipField = {
-  name: "purchase",
-  type: "relationship",
-  relationTo: ["products", "services"],
-  filterOptions: ({ relationTo, siblingData }) => {
-    // returns a Where query dynamically by the type of relationship
-    if (relationTo === "products") {
-      return {
-        stock: { greater_than: siblingData.quantity },
-      };
-    }
+import { CollectionConfig } from "payload/types";
 
-    if (relationTo === "services") {
-      return {
-        isAvailable: { equals: true },
-      };
-    }
-  },
+export const ExampleCollection: CollectionConfig = {
+  slug: "example-collection",
+  fields: [
+    {
+      name: "purchase",
+      type: "relationship",
+      relationTo: ["products", "services"],
+      filterOptions: ({ relationTo, siblingData }) => {
+        // returns a Where query dynamically by the type of relationship
+        if (relationTo === "products") {
+          return {
+            stock: { greater_than: siblingData.quantity },
+          };
+        }
+
+        if (relationTo === "services") {
+          return {
+            isAvailable: { equals: true },
+          };
+        }
+      },
+    },
+  ],
 };
 ```
 

docs/fields/rich-text.mdx

@@ -31,6 +31,7 @@ The Admin component is built on the powerful [`slatejs`](https://docs.slatejs.or
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
 | **`required`**       | Require this field to have a value. |
 | **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -54,6 +55,7 @@ The default `elements` available in Payload are:
 - `h4`
 - `h5`
 - `h6`
+- `blockquote`
 - `link`
 - `ol`
 - `ul`
@@ -81,6 +83,8 @@ Set this property to `true` to hide this field's gutter within the admin panel.
 
 This allows [fields](/docs/fields/overview) to be saved as extra fields on a link inside the Rich Text Editor. When this is present, the fields will render inside a modal that can be opened by clicking the "edit" button on the link element.
 
+`link.fields` may either be an array of fields (in which case all fields defined in it will be appended below the default fields) or a function that accepts the default fields as only argument and returns an array defining the entirety of fields to be used (thus providing a mechanism of overriding the default fields).
+
 ![RichText link fields](https://payloadcms.com/images/docs/fields/richText/rte-link-fields-modal.jpg)
 *RichText link with custom fields*
 
@@ -104,7 +108,7 @@ Similar to the `relationship` element, the `upload` element is a user-friendly w
 
 <Banner type="success">
   <strong>Tip:</strong><br/>
-  Collections are automatically allowed to be selected within the Rich Text relationship and upload elements by default. If you want to disable a collection from being able to be referenced in Rich Text fields, set the collection admin option of <strong>enableRichTextRelationship</strong> to false.
+  Collections are automatically allowed to be selected within the Rich Text relationship and upload elements by default. If you want to disable a collection from being able to be referenced in Rich Text fields, set the collection admin options of <strong>enableRichTextLink</strong> and <strong>enableRichTextRelationship</strong> to false.
 </Banner>
 
 Relationship and Upload elements are populated dynamically into your Rich Text field' content. Within the REST and Local APIs, any present RichText `relationship` or `upload` elements will respect the `depth` option that you pass, and will be populated accordingly. In GraphQL, each `richText` field accepts an argument of `depth` for you to utilize.
@@ -137,7 +141,7 @@ Custom `Leaf` objects follow a similar pattern but require you to define the `Le
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -153,6 +157,7 @@ const ExampleCollection: CollectionConfig = {
           'h3',
           'h4',
           'link',
+          'blockquote',
           {
             name: 'cta',
             Button: CustomCallToActionButton,
@@ -270,7 +275,7 @@ const serialize = (children) => children.map((node, i) => {
           {serialize(node.children)}
         </h6>
       );
-    case 'quote':
+    case 'blockquote':
       return (
         <blockquote key={i}>
           {serialize(node.children)}
@@ -366,5 +371,4 @@ import type {
   RichTextCustomElement,
   RichTextCustomLeaf,
 } from 'payload/types';
-
 ```

docs/fields/row.mdx

@@ -16,6 +16,7 @@ keywords: row, fields, config, configuration, documentation, Content Management
 | ---------------- | ----------- |
 | **`fields`** *       | Array of field types to nest within this Row. |
 | **`admin`**          | Admin-specific configuration excluding `description`, `readOnly`, and `hidden`. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -25,7 +26,7 @@ keywords: row, fields, config, configuration, documentation, Content Management
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/select.mdx

@@ -30,6 +30,7 @@ keywords: select, multi-select, fields, config, configuration, documentation, Co
 | **`localized`**    | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config.                                                                     |
 | **`required`**     | Require this field to have a value.                                                                                                                                                                 |
 | **`admin`**        | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details.                                                                            |
+| **`custom`**       | Extension point for adding custom data (e.g. for plugins)                                                                                                                                           |
 
 _\* An asterisk denotes that a property is required._
 
@@ -61,7 +62,7 @@ Set to `true` if you'd like this field to be sortable within the Admin UI using
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/tabs.mdx

@@ -19,6 +19,7 @@ keywords: tabs, fields, config, configuration, documentation, Content Management
 | ---------------- | ----------- |
 | **`tabs`** *     | Array of tabs to render within this Tabs field. |
 | **`admin`**      | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |
+| **`custom`**     | Extension point for adding custom data (e.g. for plugins) |
 
 #### Tab-specific Config
 
@@ -39,7 +40,7 @@ Each tab has its own required `label` and `fields` array. You can also optionall
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/text.mdx

@@ -29,6 +29,7 @@ keywords: text, fields, config, configuration, documentation, Content Management
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
 | **`required`**       | Require this field to have a value. |
 | **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -50,7 +51,7 @@ Set this property to a string that will be used for browser autocomplete.
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/textarea.mdx

@@ -25,10 +25,11 @@ keywords: textarea, fields, config, configuration, documentation, Content Manage
 | **`hooks`**          | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks) |
 | **`access`**         | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control) |
 | **`hidden`**         | Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin panel. |
-| **`defaultValue`**   | Provide data to be used for this field's default value. [More](/docs/fields/overview#default-values) [More](/docs/fields/overview#default-values) |
+| **`defaultValue`**   | Provide data to be used for this field's default value. [More](/docs/fields/overview#default-values)|
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
 | **`required`**       | Require this field to have a value. |
 | **`admin`**          | Admin-specific configuration. See below for [more detail](#admin-config). |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -50,7 +51,7 @@ Set this property to a string that will be used for browser autocomplete.
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/fields/ui.mdx

@@ -6,8 +6,11 @@ desc: UI fields are purely presentational and allow developers to customize the
 keywords: custom field, react component, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
-<Banner >
-  The UI (user interface) field gives you a ton of power to add your own React components directly into the Admin panel, nested directly within your other fields. It has absolutely no effect on the data of your documents. It is presentational-only.
+<Banner>
+  The UI (user interface) field gives you a ton of power to add your own React
+  components directly into the Admin panel, nested directly within your other
+  fields. It has absolutely no effect on the data of your documents. It is
+  presentational-only.
 </Banner>
 
 This field is helpful if you need to build in custom functionality via React components within the Admin panel. Think of it as a way for you to "plug in" your own React components directly within your other fields, so you can provide your editors with new controls exactly where you want them to go.
@@ -23,34 +26,36 @@ With this field, you can also inject custom `Cell` components that appear as add
 
 ### Config
 
-| Option                       | Description                                                                                                       |
-| ---------------------------- |-------------------------------------------------------------------------------------------------------------------|
-| **`name`** *                 | A unique identifier for this field.                                                                               |
-| **`label`**                  | Human-readable label for this UI field.                                                                           |
+| Option                       | Description                                                                                                            |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| **`name`** \*                | A unique identifier for this field.                                                                                    |
+| **`label`**                  | Human-readable label for this UI field.                                                                                |
 | **`admin.components.Field`** | React component to be rendered for this field within the Edit view. [More](/docs/admin/components/#field-component)    |
 | **`admin.components.Cell`**  | React component to be rendered as a Cell within collection List views. [More](/docs/admin/components/#field-component) |
+| **`custom`**                 | Extension point for adding custom data (e.g. for plugins)                                                              |
 
-*\* An asterisk denotes that a property is required.*
+_\* An asterisk denotes that a property is required._
 
 ### Example
 
 `collections/ExampleCollection.ts`
-```ts
-import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
-  slug: 'example-collection',
+```ts
+import { CollectionConfig } from "payload/types";
+
+export const ExampleCollection: CollectionConfig = {
+  slug: "example-collection",
   fields: [
     {
-      type: 'ui', // required
+      name: "myCustomUIField", // required
+      type: "ui", // required
       admin: {
         components: {
           Field: MyCustomUIField,
           Cell: MyCustomUICell,
-        }
-      }
-    }
-  ]
-}
-
+        },
+      },
+    },
+  ],
+};
 ```

docs/fields/upload.mdx

@@ -41,6 +41,7 @@ keywords: upload, images media, fields, config, configuration, documentation, Co
 | **`localized`**      | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config.                                                                     |
 | **`required`**       | Require this field to have a value.                                                                                                                                                                 |
 | **`admin`**          | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details.                                                                            |
+| **`custom`**         | Extension point for adding custom data (e.g. for plugins) |
 
 *\* An asterisk denotes that a property is required.*
 
@@ -50,7 +51,7 @@ keywords: upload, images media, fields, config, configuration, documentation, Co
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleCollection: CollectionConfig = {
+export const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

docs/getting-started/installation.mdx

@@ -106,6 +106,8 @@ Here is a list of all properties available to pass through `payload.init`:
 
 **Required**. This is a secure string that will be used to authenticate with Payload. It can be random but should be at least 14 characters and be very difficult to guess. Often, it's smart to store this value in an `env` and set different values for each of your environments (local, stage, prod, etc). The `dotenv` package is very handy and works well alongside of Payload.
 
+Payload uses this secret key to generate secure user tokens (JWT). Behind the scenes, we do not use your secret key to encrypt directly - instead, we first take the secret key and create an encrypted string using the SHA-256 hash function. Then, we reduce the encrypted string to its first 32 characters. This final value is what Payload uses for encryption.
+
 ##### `mongoURL`
 
 **Required**. This is a fully qualified MongoDB connection string that points to your Mongo database. If you don't have Mongo installed locally, you can [follow these steps for Mac OSX](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/) and [these steps](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/) for Windows 10. If you want to use a local database and you know you have MongoDB installed locally, a typical connection string will look like this:
@@ -142,4 +144,4 @@ After it starts, you can go to `http://localhost:3000/admin` to create your firs
 
 ### Docker
 
-Looking to deploy Payload with Docker? New projects with `create-payload-app` come with a Dockerfile and docker-compose.yml file ready to go. Examples of these files can be seen in our [Deployment docs](/docs/deployment#Docker).
+Looking to deploy Payload with Docker? New projects with `create-payload-app` come with a Dockerfile and docker-compose.yml file ready to go. Examples of these files can be seen in our [Deployment docs](/docs/production/deployment#docker).

docs/graphql/overview.mdx

@@ -32,7 +32,7 @@ Everything that can be done to a Collection via the REST or Local API can be don
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const PublicUser: CollectionConfig = {
+export const PublicUser: CollectionConfig = {
   slug: 'public-users',
   auth: true, // Auth is enabled
   fields: [

docs/hooks/collections.mdx

@@ -34,7 +34,7 @@ All collection Hook properties accept arrays of synchronous or asynchronous func
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const ExampleHooks: CollectionConfig = {
+export const ExampleHooks: CollectionConfig = {
   slug: 'example-hooks',
   fields: [
     { name: 'name', type: 'text'},
@@ -79,7 +79,13 @@ const beforeOperationHook: CollectionBeforeOperationHook = async ({
 
 ### beforeValidate
 
-Runs before the `create` and `update` operations. This hook allows you to add or format data before the incoming data is validated.
+Runs before the `create` and `update` operations. This hook allows you to add or format data before the incoming data is validated server-side.
+
+Please do note that this does not run before the client-side validation. If you added a `validate` function, this would be the lifecycle:
+
+1. `validate` runs on the client
+2. if successful, `beforeValidate` runs on the server
+3. `validate` runs on the server
 
 ```ts
 import { CollectionBeforeOperationHook } from 'payload/types';

docs/queries/overview.mdx

@@ -19,7 +19,7 @@ For example, say you have a collection as follows:
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Post: CollectionConfig = {
+export const Post: CollectionConfig = {
   slug: 'posts',
   fields: [
     {
@@ -75,7 +75,7 @@ The above example demonstrates a simple query but you can get much more complex.
 
 ### And / Or Logic
 
-In addition to defining simple queries, you can join multiple queries together using simple AND / OR logic. Let's take the above `Post` collection for example and write a more complex query usnig AND / OR:
+In addition to defining simple queries, you can join multiple queries together using simple AND / OR logic. Let's take the above `Post` collection for example and write a more complex query using AND / OR:
 
 ```js
 const query = {

docs/rest-api/overview.mdx

@@ -32,9 +32,9 @@ Note: Collection slugs must be formatted in kebab-case
 | `GET`    | `/api/{collection-slug}/:id`  | Find a specific document by ID                   |
 | `POST`   | `/api/{collection-slug}`      | Create a new document                            |
 | `PATCH`  | `/api/{collection-slug}`      | Update all documents matching the `where` query  |
-| `PATCH`  | `/api/{collection-slug}`      | Update a document by ID                          |
+| `PATCH`  | `/api/{collection-slug}/:id`  | Update a document by ID                          |
 | `DELETE` | `/api/{collection-slug}`      | Delete all documents matching the `where` query  |
-| `DELETE` | `/api/{collection-sldug}/:id` | Delete an existing document by ID                |
+| `DELETE` | `/api/{collection-slug}/:id`  | Delete an existing document by ID                |
 
 ##### Additional `find` query parameters
 
@@ -91,6 +91,7 @@ Each endpoint object needs to have:
 | **`method`**   | The lowercase HTTP verb to use: 'get', 'head', 'post', 'put', 'delete', 'connect' or 'options' |
 | **`handler`**  | A function or array of functions to be called with **req**, **res** and **next** arguments. [Express](https://expressjs.com/en/guide/routing.html#route-handlers) |
 | **`root`**     | When `true`, defines the endpoint on the root Express app, bypassing Payload handlers and the `routes.api` subpath. Note: this only applies to top-level endpoints of your Payload config, endpoints defined on `collections` or `globals` cannot be root. |
+| **`custom`**   | Extension point for adding custom data (e.g. for plugins) |
 
 Example:
 
@@ -98,7 +99,7 @@ Example:
 import { CollectionConfig } from 'payload/types';
 
 // a collection of 'orders' with an additional route for tracking details, reachable at /api/orders/:id/tracking
-const Orders: CollectionConfig = {
+export const Orders: CollectionConfig = {
 	slug: 'orders',
 	fields: [ /* ... */ ],
   // highlight-start

docs/upload/overview.mdx

@@ -60,7 +60,7 @@ _An asterisk denotes that a property above is required._
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Media: CollectionConfig = {
+export const Media: CollectionConfig = {
   slug: 'media',
   upload: {
     staticURL: '/media',
@@ -165,7 +165,7 @@ You can specify how Payload retrieves admin thumbnails for your upload-enabled C
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Media: CollectionConfig = {
+export const Media: CollectionConfig = {
   slug: 'media',
   upload: {
     staticURL: '/media',
@@ -200,7 +200,7 @@ Some example values are: `image/*`, `audio/*`, `video/*`, `image/png`, `applicat
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Media: CollectionConfig = {
+export const Media: CollectionConfig = {
   slug: 'media',
   upload: {
     staticURL: '/media',

docs/versions/autosave.mdx

@@ -28,7 +28,7 @@ Collections and Globals both support the same options for configuring autosave.
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Pages: CollectionConfig = {
+export const Pages: CollectionConfig = {
   slug: 'pages',
   access: {
     read: ({ req }) => {

docs/versions/drafts.mdx

@@ -84,7 +84,7 @@ Here is an example that utilizes the `_status` field to require a user to be log
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Pages: CollectionConfig = {
+export const Pages: CollectionConfig = {
   slug: 'pages',
   access: {
     read: ({ req }) => {
@@ -119,7 +119,7 @@ Here is an example for how to write an access control function that grants acces
 ```ts
 import { CollectionConfig } from 'payload/types';
 
-const Pages: CollectionConfig = {
+export const Pages: CollectionConfig = {
   slug: 'pages',
   access: {
     read: ({ req }) => {

examples/auth/cms/README.md

@@ -1,21 +1,24 @@
-# Auth Example for Payload CMS
+# Payload Auth Example
 
-This example demonstrates how to implement [Authentication](https://payloadcms.com/docs/authentication/overview) in Payload CMS.
+This example demonstrates how to implement [Payload Authentication](https://payloadcms.com/docs/authentication/overview).
 
-There is a fully working Next.js app tailored specifically for this example which can be found [here](../nextjs). Follow the instructions there to get started. If you are setting up authentication for another front-end, please consider contributing to this repo with your own example!
+There is a fully working Next.js app made explicitly for this example which can be found [here](../nextjs). Follow the instructions there to get started. If you are setting up authentication for another front-end, please consider contributing to this repo with your own example!
 
-## Getting Started
+## Quick Start
 
-1. Clone this repo
-2. `cd` into this directory and run `yarn` or `npm install`
-3. `cp .env.example .env` to copy the example environment variables
-4. `yarn dev` or `npm run dev` to start the server and seed the database
-5. `open http://localhost:8000/admin` to access the admin panel
-6. Login with email `dev@payloadcms.com` and password `test`
+To spin up this example locally, follow these steps:
+
+1. First clone the repo
+1. Then `cd YOUR_PROJECT_REPO && cp .env.example .env`
+1. Next `yarn && yarn dev`
+1. Now `open http://localhost:8000/admin` to access the admin panel
+1. Login with email `dev@payloadcms.com` and password `test`
+
+That's it! Changes made in `./src` will be reflected in your app. See the [Development](#development) section for more details.
 
 ## How it works
 
-An auth-enabled `users` collection is create which opens all [auth-related operations](https://payloadcms.com/docs/authentication/operations) needed to create a fully custom workflow on your front-end using the REST or GraphQL APIs, including:
+The `users` collection exposes all [auth-related operations](https://payloadcms.com/docs/authentication/operations) needed to create a fully custom workflow on your front-end using the REST or GraphQL APIs, including:
 
 - `Me`
 - `Login`
@@ -28,7 +31,7 @@ An auth-enabled `users` collection is create which opens all [auth-related opera
 
 The [`cors`](https://payloadcms.com/docs/production/preventing-abuse#cross-origin-resource-sharing-cors), [`csrf`](https://payloadcms.com/docs/production/preventing-abuse#cross-site-request-forgery-csrf), and [`cookies`](https://payloadcms.com/docs/authentication/config#options) settings are also configured to ensure that the admin panel and front-end can communicate with each other securely.
 
-### Role-based Access Control
+### Access Control
 
 Basic role-based access control is setup to determine what users can and cannot do based on their roles, which are:
 
@@ -37,6 +40,28 @@ Basic role-based access control is setup to determine what users can and cannot
 
 A `beforeChange` field hook called `protectRoles` is placed on this to automatically populate `roles` with the `user` role when a new user is created. It also protects roles from being changed by non-admins.
 
+## Development
+
+To spin up this example locally, follow the [Quick Start](#quick-start).
+
 ### Seed
 
-On boot, a seed script is included to create a user with the role `admin`.
+On boot, a seed script is included to create a user with email `dev@payloadcms.com`, password `test`, the role `admin`.
+
+> NOTICE: seeding the database is destructive because it drops your current database to populate a fresh one from the seed template. Only run this command if you are starting a new project or can afford to lose your current data.
+
+## Production
+
+To run Payload in production, you need to build and serve the Admin panel. To do so, follow these steps:
+
+1. First invoke the `payload build` script by running `yarn build` or `npm run build` in your project root. This creates a `./build` directory with a production-ready admin bundle.
+1. Then run `yarn serve` or `npm run serve` to run Node in production and serve Payload from the `./build` directory.
+
+### Deployment
+
+The easiest way to deploy your project is to use [Payload Cloud](https://payloadcms.com/new/import), a one-click hosting solution to deploy production-ready instances of your Payload apps directly from your GitHub repo. You can also deploy your app manually, check out the [deployment documentation](https://payloadcms.com/docs/production/deployment) for full details.
+
+## Questions
+
+If you have any issues or questions, reach out to us on [Discord](https://discord.com/invite/r6sCXqVk3v) or start a [GitHub discussion](https://github.com/payloadcms/payload/discussions).
+

examples/auth/nextjs/README.md

@@ -4,9 +4,9 @@ This is a [Next.js](https://nextjs.org/) app made explicitly for Payload's [Auth
 
 ## Getting Started
 
-### Payload CMS
+### Payload
 
-First you'll need a running CMS. If you have not done so already, open up the `cms` folder alongside this example and follow the setup instructions. Take note of your server URL, you'll need this in the next step.
+First you'll need a running Payload app. If you have not done so already, open up the `cms` folder alongside this example and follow the setup instructions. Take note of your server URL, you'll need this in the next step.
 
 ### Next.js App
 
@@ -22,14 +22,14 @@ Once running you will find a couple seeded pages on your local environment with
 
 To learn more about PayloadCMS and Next.js, take a look at the following resources:
 
-- [Payload CMS Documentation](https://payloadcms.com/docs) - learn about Payload CMS features and API.
+- [Payload Documentation](https://payloadcms.com/docs) - learn about Payload features and API.
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Payload CMS GitHub repository](https://github.com/payloadcms/payload/) as well as [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Payload GitHub repository](https://github.com/payloadcms/payload/) as well as [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
 The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-Check out our [Payload CMS deployment documentaton](https://payloadcms.com/docs/production/deployment) or the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Check out our [Payload deployment documentation](https://payloadcms.com/docs/production/deployment) or the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/auth/nextjs/components/RichText/serialize.tsx

@@ -69,7 +69,7 @@ const serialize = (children: Children): React.ReactElement[] =>
         return <h5 key={i}>{serialize(node.children)}</h5>
       case 'h6':
         return <h6 key={i}>{serialize(node.children)}</h6>
-      case 'quote':
+      case 'blockquote':
         return <blockquote key={i}>{serialize(node.children)}</blockquote>
       case 'ul':
         return <ul key={i}>{serialize(node.children)}</ul>

examples/form-builder/cms/.env.example

@@ -0,0 +1,4 @@
+MONGODB_URI=mongodb://localhost/payload-example-form-builder
+PAYLOAD_SECRET=ENTER-STRING-HERE
+PAYLOAD_PUBLIC_SITE_URL=http://localhost:3000
+PAYLOAD_PUBLIC_SERVER_URL=http://localhost:8000

examples/form-builder/cms/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@payloadcms'],
+}

examples/form-builder/cms/.gitignore

@@ -0,0 +1,5 @@
+build
+dist
+node_modules
+package-lock.json
+.env

examples/form-builder/cms/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

examples/form-builder/cms/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  printWidth: 100,
+  parser: "typescript",
+  semi: false,
+  singleQuote: true,
+  trailingComma: "all",
+  arrowParens: "avoid",
+};

examples/form-builder/cms/.vscode/launch.json

@@ -0,0 +1,21 @@
+{
+  // 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": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Form Builder Example CMS",
+      "program": "${workspaceFolder}/src/server.ts",
+      "preLaunchTask": "npm: build:server",
+      "env": {
+        "PAYLOAD_CONFIG_PATH": "${workspaceFolder}/src/payload.config.ts"
+      },
+      // "outFiles": [
+      //   "${workspaceFolder}/dist/**/*.js"
+      // ]
+    },
+  ]
+}

examples/form-builder/cms/README.md

@@ -0,0 +1,48 @@
+# Payload Form Builder Example
+
+This example demonstrates how to implement the official [Form Builder Plugin](https://github.com/payloadcms/plugin-form-builder) into Payload.
+
+There is a fully working Next.js app made explicitly for this example which can be found [here](../nextjs). Follow the instructions there to get started. If you are setting up the form builder plugin for another front-end, please consider contributing to this repo with your own example
+
+## Quick Start
+
+To spin up this example locally, follow these steps:
+
+1. Clone this repo
+2. `cd` into this directory and run `yarn` or `npm install`
+3. `cp .env.example .env` to copy the example environment variables
+4. `yarn dev` or `npm run dev` to start the server and seed the database
+5. `open http://localhost:8000/admin` to access the admin panel
+6. Login with email `dev@payloadcms.com` and password `test`
+
+That's it! Changes made in `./src` will be reflected in your app. See the [Development](#development) section for more details.
+
+## How it works
+
+The [Form Builder Plugin](https://github.com/payloadcms/plugin-form-builder) automatically adds the `forms` and `formSubmissions` collections to your config which your front-end can use to query forms and submit form data. You can embed forms into layout building blocks by referring a `forms` document in a relationship field.
+
+See the official [Form Builder Plugin](https://github.com/payloadcms/plugin-form-builder) for full details.
+
+## Development
+
+To spin up this example locally, follow the [Quick Start](#quick-start).
+
+### Seed
+
+On boot, a seed script is included to create a user, a home page, and some basic forms.
+
+## Production
+
+To run Payload in production, you need to build and serve the Admin panel. To do so, follow these steps:
+
+1. First invoke the `payload build` script by running `yarn build` or `npm run build` in your project root. This creates a `./build` directory with a production-ready admin bundle.
+1. Then run `yarn serve` or `npm run serve` to run Node in production and serve Payload from the `./build` directory.
+
+### Deployment
+
+The easiest way to deploy your project is to use [Payload Cloud](https://payloadcms.com/new/import), a one-click hosting solution to deploy production-ready instances of your Payload apps directly from your GitHub repo. You can also deploy your app manually, check out the [deployment documentation](https://payloadcms.com/docs/production/deployment) for full details.
+
+## Questions
+
+If you have any issues or questions, reach out to us on [Discord](https://discord.com/invite/r6sCXqVk3v) or start a [GitHub discussion](https://github.com/payloadcms/payload/discussions).
+

examples/form-builder/cms/nodemon.json

@@ -0,0 +1,4 @@
+{
+  "ext": "ts",
+  "exec": "ts-node src/server.ts"
+}

examples/form-builder/cms/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "form-builder-example-cms",
+  "description": "The CMS that utilizes Payload's form builder plugin.",
+  "version": "1.0.0",
+  "main": "dist/server.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "cross-env PAYLOAD_SEED=true PAYLOAD_DROP_DATABASE=true PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
+    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
+    "build:server": "tsc",
+    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
+    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
+    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
+    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema"
+  },
+  "dependencies": {
+    "@faceless-ui/modal": "^2.0.1",
+    "@payloadcms/plugin-form-builder": "^1.0.12",
+    "@payloadcms/plugin-seo": "^1.0.8",
+    "dotenv": "^8.2.0",
+    "express": "^4.17.1",
+    "payload": "^1.6.19"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.9",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
+    "nodemon": "^2.0.6",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.1.3"
+  }
+}

examples/form-builder/cms/src/access/publishedOnly.ts

@@ -0,0 +1,11 @@
+import { Access } from 'payload/config';
+
+export const publishedOnly: Access = ({ req: { user } }) => {
+  if (user) return true;
+
+  return {
+    _status: {
+      equals: 'published',
+    },
+  };
+};

examples/form-builder/cms/src/blocks/Form/index.ts

@@ -0,0 +1,33 @@
+import { Block } from 'payload/types';
+import richText from '../../fields/richText';
+
+export const FormBlock: Block = {
+  slug: 'formBlock',
+  labels: {
+    singular: 'Form Block',
+    plural: 'Form Blocks',
+  },
+  graphQL: {
+    singularName: 'FormBlock',
+  },
+  fields: [
+    {
+      name: 'form',
+      type: 'relationship',
+      relationTo: 'forms',
+      required: true,
+    },
+    {
+      name: 'enableIntro',
+      label: 'Enable Intro Content',
+      type: 'checkbox',
+    },
+    richText({
+      name: 'introContent',
+      label: 'Intro Content',
+      admin: {
+        condition: (_, { enableIntro }) => Boolean(enableIntro),
+      },
+    }),
+  ],
+};

examples/form-builder/cms/src/collections/Pages.ts

@@ -0,0 +1,44 @@
+import { CollectionConfig } from 'payload/types';
+import { publishedOnly } from '../access/publishedOnly';
+import { FormBlock } from '../blocks/Form';
+import { slugField } from '../fields/slug';
+
+export const Pages: CollectionConfig = {
+  slug: 'pages',
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: ['title', 'slug', 'updatedAt'],
+  },
+  versions: {
+    drafts: true,
+  },
+  access: {
+    read: publishedOnly,
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              name: 'layout',
+              type: 'blocks',
+              required: true,
+              blocks: [
+                FormBlock,
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    slugField(),
+  ],
+};

examples/form-builder/cms/src/collections/Users.ts

@@ -0,0 +1,12 @@
+import { CollectionConfig } from 'payload/types';
+
+export const Users: CollectionConfig = {
+  slug: 'users',
+  auth: true,
+  admin: {
+    useAsTitle: 'email',
+  },
+  fields: [
+    // Don't need any user fields here
+  ],
+};

examples/form-builder/cms/src/fields/link.ts

@@ -0,0 +1,151 @@
+import { Field } from 'payload/types';
+import deepMerge from '../utilities/deepMerge';
+
+export const appearanceOptions = {
+  primary: {
+    label: 'Primary Button',
+    value: 'primary',
+  },
+  secondary: {
+    label: 'Secondary Button',
+    value: 'secondary',
+  },
+  default: {
+    label: 'Default',
+    value: 'default',
+  },
+};
+
+export type LinkAppearances = 'primary' | 'secondary' | 'default'
+
+type LinkType = (
+  options?: {
+    appearances?: LinkAppearances[] | false
+    disableLabel?: boolean
+    overrides?: Record<string, unknown>
+  }
+) => Field;
+
+const link: LinkType = ({
+  appearances,
+  disableLabel = false,
+  overrides = {},
+} = {}) => {
+  const linkResult: Field = {
+    name: 'link',
+    type: 'group',
+    admin: {
+      hideGutter: true,
+    },
+    fields: [
+      {
+        type: 'row',
+        fields: [
+          {
+            name: 'type',
+            type: 'radio',
+            options: [
+              {
+                label: 'Internal link',
+                value: 'reference',
+              },
+              {
+                label: 'Custom URL',
+                value: 'custom',
+              },
+            ],
+            defaultValue: 'reference',
+            admin: {
+              layout: 'horizontal',
+              width: '50%',
+            },
+          },
+          {
+            name: 'newTab',
+            label: 'Open in new tab',
+            type: 'checkbox',
+            admin: {
+              width: '50%',
+              style: {
+                alignSelf: 'flex-end',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  };
+
+  const linkTypes: Field[] = [
+    {
+      name: 'reference',
+      label: 'Document to link to',
+      type: 'relationship',
+      relationTo: ['pages'],
+      required: true,
+      maxDepth: 1,
+      admin: {
+        condition: (_, siblingData) => siblingData?.type === 'reference',
+      },
+    },
+    {
+      name: 'url',
+      label: 'Custom URL',
+      type: 'text',
+      required: true,
+      admin: {
+        condition: (_, siblingData) => siblingData?.type === 'custom',
+      },
+    },
+  ];
+
+  if (!disableLabel) {
+    linkTypes[0].admin.width = '50%';
+    linkTypes[1].admin.width = '50%';
+
+    linkResult.fields.push({
+      type: 'row',
+      fields: [
+        ...linkTypes,
+        {
+          name: 'label',
+          label: 'Label',
+          type: 'text',
+          required: true,
+          admin: {
+            width: '50%',
+          },
+        },
+      ],
+    });
+  } else {
+    linkResult.fields = [...linkResult.fields, ...linkTypes];
+  }
+
+
+  if (appearances !== false) {
+    let appearanceOptionsToUse = [
+      appearanceOptions.default,
+      appearanceOptions.primary,
+      appearanceOptions.secondary,
+    ];
+
+    if (appearances) {
+      appearanceOptionsToUse = appearances.map((appearance) => appearanceOptions[appearance]);
+    }
+
+    linkResult.fields.push({
+      name: 'appearance',
+      type: 'select',
+      defaultValue: 'default',
+      options: appearanceOptionsToUse,
+      admin: {
+        description: 'Choose how the link should be rendered.',
+      },
+    });
+  }
+
+  return deepMerge(linkResult, overrides);
+};
+
+export default link;

examples/form-builder/cms/src/fields/richText/elements.ts

@@ -0,0 +1,13 @@
+import { RichTextElement } from 'payload/dist/fields/config/types';
+
+const elements: RichTextElement[] = [
+  'blockquote',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'link',
+];
+
+export default elements;

examples/form-builder/cms/src/fields/richText/index.ts

@@ -0,0 +1,94 @@
+import { RichTextElement, RichTextField, RichTextLeaf } from 'payload/dist/fields/config/types';
+import deepMerge from '../../utilities/deepMerge';
+import elements from './elements';
+import leaves from './leaves';
+import link from '../link';
+
+type RichText = (
+  overrides?: Partial<RichTextField>,
+  additions?: {
+    elements?: RichTextElement[]
+    leaves?: RichTextLeaf[]
+  }
+) => RichTextField
+
+const richText: RichText = (
+  overrides,
+  additions = {
+    elements: [],
+    leaves: [],
+  },
+) => deepMerge<RichTextField, Partial<RichTextField>>(
+  {
+    name: 'richText',
+    type: 'richText',
+    required: true,
+    admin: {
+      upload: {
+        collections: {
+          media: {
+            fields: [
+              {
+                type: 'richText',
+                name: 'caption',
+                label: 'Caption',
+                admin: {
+                  elements: [
+                    ...elements,
+                  ],
+                  leaves: [
+                    ...leaves,
+                  ],
+                },
+              },
+              {
+                type: 'radio',
+                name: 'alignment',
+                label: 'Alignment',
+                options: [
+                  {
+                    label: 'Left',
+                    value: 'left',
+                  },
+                  {
+                    label: 'Center',
+                    value: 'center',
+                  },
+                  {
+                    label: 'Right',
+                    value: 'right',
+                  },
+                ],
+              },
+              {
+                name: 'enableLink',
+                type: 'checkbox',
+                label: 'Enable Link',
+              },
+              link({
+                appearances: false,
+                disableLabel: true,
+                overrides: {
+                  admin: {
+                    condition: (_, data) => Boolean(data?.enableLink),
+                  },
+                },
+              }),
+            ],
+          },
+        },
+      },
+      elements: [
+        ...elements,
+        ...additions.elements || [],
+      ],
+      leaves: [
+        ...leaves,
+        ...additions.leaves || [],
+      ],
+    },
+  },
+  overrides,
+);
+
+export default richText;

examples/form-builder/cms/src/fields/richText/leaves.ts

@@ -0,0 +1,9 @@
+import { RichTextLeaf } from 'payload/dist/fields/config/types';
+
+const defaultLeaves: RichTextLeaf[] = [
+  'bold',
+  'italic',
+  'underline',
+];
+
+export default defaultLeaves;

examples/form-builder/cms/src/fields/slug.ts

@@ -0,0 +1,23 @@
+import { Field } from 'payload/types';
+import formatSlug from '../utilities/formatSlug';
+import deepMerge from '../utilities/deepMerge';
+
+type Slug = (fieldToUse?: string, overrides?: Partial<Field>) => Field
+
+export const slugField: Slug = (fieldToUse = 'title', overrides) => deepMerge<Field, Partial<Field>>(
+  {
+    name: 'slug',
+    label: 'Slug',
+    type: 'text',
+    index: true,
+    admin: {
+      position: 'sidebar',
+    },
+    hooks: {
+      beforeValidate: [
+        formatSlug(fieldToUse),
+      ],
+    },
+  },
+  overrides,
+);

examples/form-builder/cms/src/globals/MainMenu.ts

@@ -0,0 +1,21 @@
+import { GlobalConfig } from 'payload/types';
+import link from '../fields/link';
+
+export const MainMenu: GlobalConfig = {
+  slug: 'main-menu',
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'navItems',
+      type: 'array',
+      maxRows: 6,
+      fields: [
+        link({
+          appearances: false,
+        }),
+      ],
+    },
+  ],
+};

examples/form-builder/cms/src/payload-types.ts

@@ -0,0 +1,202 @@
+/* tslint:disable */
+/**
+ * This file was automatically generated by Payload CMS.
+ * DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
+ * and re-run `payload generate:types` to regenerate this file.
+ */
+
+export interface Config {}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "main-menu".
+ */
+export interface MainMenu {
+  id: string;
+  navItems: {
+    link: {
+      type?: 'reference' | 'custom';
+      newTab?: boolean;
+      reference: {
+        value: string | Page;
+        relationTo: 'pages';
+      };
+      url: string;
+      label: string;
+    };
+    id?: string;
+  }[];
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "pages".
+ */
+export interface Page {
+  id: string;
+  title: string;
+  layout: {
+    form: string | Form;
+    enableIntro?: boolean;
+    introContent: {
+      [k: string]: unknown;
+    }[];
+    id?: string;
+    blockName?: string;
+    blockType: 'formBlock';
+  }[];
+  slug?: string;
+  _status?: 'draft' | 'published';
+  createdAt: string;
+  updatedAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "forms".
+ */
+export interface Form {
+  id: string;
+  title: string;
+  fields: (
+    | {
+        name: string;
+        label?: string;
+        width?: number;
+        defaultValue?: string;
+        required?: boolean;
+        id?: string;
+        blockName?: string;
+        blockType: 'text';
+      }
+    | {
+        name: string;
+        label?: string;
+        width?: number;
+        defaultValue?: string;
+        required?: boolean;
+        id?: string;
+        blockName?: string;
+        blockType: 'textarea';
+      }
+    | {
+        name: string;
+        label?: string;
+        width?: number;
+        defaultValue?: string;
+        options: {
+          label: string;
+          value: string;
+          id?: string;
+        }[];
+        required?: boolean;
+        id?: string;
+        blockName?: string;
+        blockType: 'select';
+      }
+    | {
+        name: string;
+        label?: string;
+        width?: number;
+        required?: boolean;
+        id?: string;
+        blockName?: string;
+        blockType: 'email';
+      }
+    | {
+        name: string;
+        label?: string;
+        width?: number;
+        required?: boolean;
+        id?: string;
+        blockName?: string;
+        blockType: 'state';
+      }
+    | {
+        name: string;
+        label?: string;
+        width?: number;
+        required?: boolean;
+        id?: string;
+        blockName?: string;
+        blockType: 'country';
+      }
+    | {
+        name: string;
+        label?: string;
+        width?: number;
+        defaultValue?: number;
+        required?: boolean;
+        id?: string;
+        blockName?: string;
+        blockType: 'number';
+      }
+    | {
+        name: string;
+        label?: string;
+        width?: number;
+        required?: boolean;
+        defaultValue?: boolean;
+        id?: string;
+        blockName?: string;
+        blockType: 'checkbox';
+      }
+    | {
+        message?: {
+          [k: string]: unknown;
+        }[];
+        id?: string;
+        blockName?: string;
+        blockType: 'message';
+      }
+  )[];
+  submitButtonLabel?: string;
+  confirmationType?: 'message' | 'redirect';
+  confirmationMessage: {
+    [k: string]: unknown;
+  }[];
+  redirect: {
+    url: string;
+  };
+  emails: {
+    emailTo: string;
+    bcc?: string;
+    replyTo?: string;
+    replyToName?: string;
+    emailFrom?: string;
+    emailFromName?: string;
+    subject: string;
+    message?: {
+      [k: string]: unknown;
+    }[];
+    id?: string;
+  }[];
+  createdAt: string;
+  updatedAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "users".
+ */
+export interface User {
+  id: string;
+  email?: string;
+  resetPasswordToken?: string;
+  resetPasswordExpiration?: string;
+  loginAttempts?: number;
+  lockUntil?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "form-submissions".
+ */
+export interface FormSubmission {
+  id: string;
+  form: string | Form;
+  submissionData: {
+    field: string;
+    value: string;
+    id?: string;
+  }[];
+  createdAt: string;
+  updatedAt: string;
+}

examples/form-builder/cms/src/payload.config.ts

@@ -0,0 +1,31 @@
+import { buildConfig } from 'payload/config';
+import path from 'path';
+import FormBuilder from '@payloadcms/plugin-form-builder';
+import { Users } from './collections/Users';
+import { Pages } from './collections/Pages';
+import { MainMenu } from './globals/MainMenu';
+
+export default buildConfig({
+  collections: [
+    Pages,
+    Users,
+  ],
+  globals: [
+    MainMenu,
+  ],
+  cors: [
+    'http://localhost:3000',
+    process.env.PAYLOAD_PUBLIC_SITE_URL,
+  ],
+  typescript: {
+    outputFile: path.resolve(__dirname, 'payload-types.ts'),
+  },
+  plugins: [
+    FormBuilder({
+      fields: {
+        payment: false,
+      },
+
+    }),
+  ],
+});

examples/form-builder/cms/src/seed/advanced.ts

@@ -0,0 +1,23 @@
+export const advanced = {
+  title: 'Advanced',
+  layout: [
+    {
+      form: '{{ADVANCED_FORM_ID}}',
+      enableIntro: true,
+      introContent: [
+        {
+          children: [
+            {
+              text: 'Advanced form:',
+            },
+          ],
+          type: 'h4',
+        },
+      ],
+      id: '63adc92568224b995af9df14',
+      blockType: 'formBlock',
+    },
+  ],
+  slug: 'advanced',
+  _status: 'published',
+};

examples/form-builder/cms/src/seed/advancedForm.ts

@@ -0,0 +1,119 @@
+export const advancedForm = {
+  id: '63c0835134d40cef85cc11a2',
+  title: 'Advanced Form',
+  fields: [
+    {
+      name: 'first-name',
+      label: 'First Name',
+      width: 50,
+      required: true,
+      id: '63c081b169853127a8895312',
+      blockName: 'first-name',
+      blockType: 'text',
+    },
+    {
+      name: 'last-name',
+      label: 'Last Name',
+      width: 50,
+      required: true,
+      id: '63c081c669853127a8895313',
+      blockName: 'last-name',
+      blockType: 'text',
+    },
+    {
+      name: 'email',
+      label: 'Email',
+      width: 100,
+      required: true,
+      id: '63c081e869853127a8895314',
+      blockName: 'email',
+      blockType: 'email',
+    },
+    {
+      name: 'street-address',
+      label: 'Street Address',
+      width: 100,
+      required: true,
+      id: '63c081fe69853127a8895315',
+      blockName: 'street-address',
+      blockType: 'text',
+    },
+    {
+      name: 'street-address-two',
+      label: 'Street Address Line 2',
+      width: 100,
+      id: '63c0823169853127a8895316',
+      blockName: 'street-address-two',
+      blockType: 'text',
+    },
+    {
+      name: 'city',
+      label: 'City',
+      width: 50,
+      required: true,
+      id: '63c0825a69853127a8895317',
+      blockName: 'city',
+      blockType: 'text',
+    },
+    {
+      name: 'state',
+      label: 'State',
+      width: 50,
+      required: true,
+      id: '63c0826569853127a8895318',
+      blockName: 'state',
+      blockType: 'state',
+    },
+    {
+      name: 'zip-code',
+      label: 'Postal / Zip Code',
+      width: 50,
+      required: true,
+      id: '63c082bb69853127a889531a',
+      blockName: 'zip-code',
+      blockType: 'number',
+    },
+    {
+      name: 'country',
+      label: 'Country',
+      width: 50,
+      required: true,
+      id: '63c0829269853127a8895319',
+      blockName: 'country',
+      blockType: 'country',
+    },
+  ],
+  submitButtonLabel: 'Submit',
+  confirmationType: 'message',
+  confirmationMessage: [
+    {
+      children: [
+        {
+          text: 'Your shipping information submission was successful.',
+        },
+      ],
+      type: 'h2',
+    },
+  ],
+  emails: [
+    {
+      emailTo: '{{email}}',
+      emailFrom: 'dev@payloadcms.com',
+      emailFromName: 'Payload Team',
+      subject: "You've received a new message.",
+      message: [
+        {
+          children: [
+            {
+              text: 'Your example shipping information form submission was received successfully.',
+            },
+          ],
+        },
+      ],
+      id: '63c0831869853127a889531b',
+    },
+  ],
+  createdAt: '2023-01-12T22:01:53.023Z',
+  updatedAt: '2023-01-12T22:01:53.023Z',
+  redirect: {},
+};

examples/form-builder/cms/src/seed/basicForm.ts

@@ -0,0 +1,103 @@
+export const basicForm = {
+  id: '63c0651b132c8e2783f8dcae',
+  updatedAt: '2023-01-12T21:25:41.113Z',
+  createdAt: '2022-12-28T20:48:53.181Z',
+  title: 'Basic Form',
+  fields: [
+    {
+      name: 'first-name',
+      label: 'First name',
+      width: 50,
+      required: true,
+      id: '63adaaba5236fe69ca8973f8',
+      blockName: 'first-name',
+      blockType: 'text',
+    },
+    {
+      name: 'last-name',
+      label: 'Last name',
+      width: 50,
+      required: true,
+      id: '63bf4b1fd69cef4f34272f9a',
+      blockName: 'last-name',
+      blockType: 'text',
+    },
+    {
+      name: 'email',
+      label: 'Email',
+      width: 100,
+      required: true,
+      id: '63c0953adc1cd2c2f6c2d30b',
+      blockName: 'email',
+      blockType: 'email',
+    },
+    {
+      name: 'coolest-project',
+      label: "What's the coolest project you've built with Payload so far?",
+      width: 100,
+      required: false,
+      id: '63adab96b65c28c168442316',
+      blockName: 'coolest-project',
+      blockType: 'textarea',
+    },
+    {
+      message: [
+        {
+          children: [
+            {
+              text: 'Have a great rest of your day!',
+            },
+          ],
+        },
+        {
+          children: [
+            {
+              text: '',
+            },
+          ],
+        },
+        {
+          children: [
+            {
+              text: 'Sincerely, \n\nPayload Team.',
+            },
+          ],
+        },
+      ],
+      id: '63adb90db65c28c168442322',
+      blockName: 'farewell',
+      blockType: 'message',
+    },
+  ],
+  submitButtonLabel: 'Submit',
+  confirmationType: 'message',
+  confirmationMessage: [
+    {
+      children: [
+        {
+          text: 'The basic form has been submitted successfully.',
+        },
+      ],
+      type: 'h2',
+    },
+  ],
+  emails: [
+    {
+      emailTo: '{{email}}',
+      emailFrom: 'dev@payloadcms.com',
+      emailFromName: 'Payload',
+      subject: "You've received a new message.",
+      message: [
+        {
+          children: [
+            {
+              text: 'Your basic form submission was successfully received.',
+            },
+          ],
+        },
+      ],
+      id: '63acab72433ea1822764c538',
+    },
+  ],
+  redirect: {},
+};

examples/form-builder/cms/src/seed/contact.ts

@@ -0,0 +1,23 @@
+export const contact = {
+  title: 'Contact',
+  layout: [
+    {
+      form: '{{CONTACT_FORM_ID}}',
+      enableIntro: true,
+      introContent: [
+        {
+          children: [
+            {
+              text: 'Example contact form:',
+            },
+          ],
+          type: 'h4',
+        },
+      ],
+      id: '63adc92568224b995af9df13',
+      blockType: 'formBlock',
+    },
+  ],
+  slug: 'contact',
+  _status: 'published',
+};

examples/form-builder/cms/src/seed/contactForm.ts

@@ -0,0 +1,75 @@
+export const contactForm = {
+  id: '63c07ffd4cb6b574b4977573',
+  title: 'Contact Form',
+  fields: [
+    {
+      name: 'full-name',
+      label: 'Full Name',
+      width: 100,
+      required: true,
+      id: '63c07f4e69853127a889530c',
+      blockName: 'full-name',
+      blockType: 'text',
+    },
+    {
+      name: 'email',
+      label: 'Email',
+      width: 50,
+      required: true,
+      id: '63c07f7069853127a889530d',
+      blockName: 'email',
+      blockType: 'email',
+    },
+    {
+      name: 'phone',
+      label: 'Phone',
+      width: 50,
+      required: false,
+      id: '63c07f8169853127a889530e',
+      blockName: 'phone',
+      blockType: 'number',
+    },
+    {
+      name: 'message',
+      label: 'Message',
+      width: 100,
+      required: true,
+      id: '63c07f9d69853127a8895310',
+      blockName: 'message',
+      blockType: 'textarea',
+    },
+  ],
+  submitButtonLabel: 'Submit',
+  confirmationType: 'message',
+  confirmationMessage: [
+    {
+      children: [
+        {
+          text: 'The contact form has been submitted successfully.',
+        },
+      ],
+      type: 'h2',
+    },
+  ],
+  emails: [
+    {
+      emailTo: '{{email}}',
+      emailFrom: 'dev@payloadcms.com',
+      emailFromName: 'Payload Team',
+      subject: "You've received a new message.",
+      message: [
+        {
+          children: [
+            {
+              text: 'Your contact form submission was successfully received.',
+            },
+          ],
+        },
+      ],
+      id: '63c07fcb69853127a8895311',
+    },
+  ],
+  createdAt: '2023-01-12T21:47:41.374Z',
+  updatedAt: '2023-01-12T21:47:41.374Z',
+  redirect: {},
+};

examples/form-builder/cms/src/seed/home.ts

@@ -0,0 +1,23 @@
+export const home = {
+  title: 'Home',
+  layout: [
+    {
+      form: '{{BASIC_FORM_ID}}',
+      enableIntro: true,
+      introContent: [
+        {
+          children: [
+            {
+              text: 'Example basic form:',
+            },
+          ],
+          type: 'h4',
+        },
+      ],
+      id: '63adc92568224b995af9df12',
+      blockType: 'formBlock',
+    },
+  ],
+  slug: 'home',
+  _status: 'published',
+};

examples/form-builder/cms/src/seed/index.ts

@@ -0,0 +1,121 @@
+import { Payload } from 'payload';
+import { home } from './home';
+import { contact } from './contact';
+import { advanced } from './advanced';
+import { signUp } from './signUp';
+import { basicForm } from './basicForm';
+import { contactForm } from './contactForm';
+import { advancedForm } from './advancedForm';
+import { signUpForm } from './signUpForm';
+
+export const seed = async (payload: Payload) => {
+  await payload.create({
+    collection: 'users',
+    data: {
+      email: 'dev@payloadcms.com',
+      password: 'test',
+    },
+  });
+
+  const basicFormJSON = JSON.parse(JSON.stringify(basicForm));
+
+  const { id: basicFormID } = await payload.create({
+    collection: 'forms',
+    data: basicFormJSON,
+  });
+
+  const contactFormJSON = JSON.parse(JSON.stringify(contactForm));
+
+  const { id: contactFormID } = await payload.create({
+    collection: 'forms',
+    data: contactFormJSON,
+  });
+
+  const advancedFormJSON = JSON.parse(JSON.stringify(advancedForm));
+
+  const { id: advancedFormID } = await payload.create({
+    collection: 'forms',
+    data: advancedFormJSON,
+  });
+
+  const signUpFormJSON = JSON.parse(JSON.stringify(signUpForm));
+
+  const { id: signUpFormID } = await payload.create({
+    collection: 'forms',
+    data: signUpFormJSON,
+  });
+
+  const homePageJSON = JSON.parse(
+    JSON.stringify(home).replace(/{{BASIC_FORM_ID}}/g, basicFormID),
+  );
+
+  const contactPageJSON = JSON.parse(
+    JSON.stringify(contact).replace(/{{CONTACT_FORM_ID}}/g, contactFormID),
+  );
+
+  const advancedPageJSON = JSON.parse(
+    JSON.stringify(advanced).replace(/{{ADVANCED_FORM_ID}}/g, advancedFormID),
+  );
+
+  const signupPageJSON = JSON.parse(
+    JSON.stringify(signUp).replace(/{{SIGNUP_FORM_ID}}/g, signUpFormID),
+  );
+
+  await payload.create({
+    collection: 'pages',
+    data: homePageJSON,
+  });
+
+  const { id: contactPageID } = await payload.create({
+    collection: 'pages',
+    data: contactPageJSON,
+  });
+
+  const { id: advancedPageID } = await payload.create({
+    collection: 'pages',
+    data: advancedPageJSON,
+  });
+
+  const { id: signupPageID } = await payload.create({
+    collection: 'pages',
+    data: signupPageJSON,
+  });
+
+  await payload.updateGlobal({
+    slug: 'main-menu',
+    data: {
+      navItems: [
+        {
+          link: {
+            type: 'reference',
+            reference: {
+              relationTo: 'pages',
+              value: contactPageID,
+            },
+            label: 'Contact Form',
+          },
+        },
+        {
+          link: {
+            type: 'reference',
+            reference: {
+              relationTo: 'pages',
+              value: advancedPageID,
+            },
+            label: 'Advanced Form',
+          },
+        },
+        {
+          link: {
+            type: 'reference',
+            reference: {
+              relationTo: 'pages',
+              value: signupPageID,
+            },
+            label: 'Signup Form',
+          },
+        },
+      ],
+    },
+  });
+};

examples/form-builder/cms/src/seed/signUp.ts

@@ -0,0 +1,23 @@
+export const signUp = {
+  title: 'Sign Up',
+  layout: [
+    {
+      form: '{{SIGNUP_FORM_ID}}',
+      enableIntro: true,
+      introContent: [
+        {
+          children: [
+            {
+              text: 'Example sign-up form:',
+            },
+          ],
+          type: 'h4',
+        },
+      ],
+      id: '63adc92568224b995af9df15',
+      blockType: 'formBlock',
+    },
+  ],
+  slug: 'sign-up',
+  _status: 'published',
+};

examples/form-builder/cms/src/seed/signUpForm.ts

@@ -0,0 +1,87 @@
+export const signUpForm = {
+  id: '63c086c36955e39c4208aa8f',
+  title: 'Sign Up Form',
+  fields: [
+    {
+      name: 'full-name',
+      label: 'Full Name',
+      width: 100,
+      required: true,
+      id: '63c085ae69853127a889531e',
+      blockName: 'full-name',
+      blockType: 'text',
+    },
+    {
+      name: 'email',
+      label: 'Email',
+      width: 100,
+      required: true,
+      id: '63c085df69853127a889531f',
+      blockName: 'email',
+      blockType: 'email',
+    },
+    {
+      name: 'password',
+      label: 'Password',
+      width: 100,
+      required: true,
+      id: '63c0861869853127a8895321',
+      blockName: 'password',
+      blockType: 'text',
+    },
+    {
+      message: [
+        {
+          children: [
+            {
+              text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+            },
+          ],
+        },
+      ],
+      id: '63c0865769853127a8895324',
+      blockType: 'message',
+    },
+    {
+      name: 'terms-and-conditions',
+      label: 'I agree to the terms and conditions',
+      required: true,
+      id: '63c086a469853127a8895325',
+      blockName: 'terms-and-conditions',
+      blockType: 'checkbox',
+    },
+  ],
+  submitButtonLabel: 'Create Account',
+  confirmationType: 'message',
+  confirmationMessage: [
+    {
+      children: [
+        {
+          text: 'Your sign up submission was successful.',
+        },
+      ],
+      type: 'h2',
+    },
+  ],
+  emails: [
+    {
+      emailTo: '{{email}}',
+      emailFrom: 'dev@payloadcms.com',
+      emailFromName: 'Payload Team',
+      subject: "You've received a new message.",
+      message: [
+        {
+          children: [
+            {
+              text: 'Your sign up submissioin was received successfully.',
+            },
+          ],
+        },
+      ],
+      id: '63c0858f69853127a889531d',
+    },
+  ],
+  createdAt: '2023-01-12T22:16:35.480Z',
+  updatedAt: '2023-01-12T22:16:35.480Z',
+  redirect: {},
+};

examples/form-builder/cms/src/server.ts

@@ -0,0 +1,40 @@
+import path from 'path';
+import express from 'express';
+import payload from 'payload';
+import { seed } from './seed';
+
+// eslint-disable-next-line
+require('dotenv').config({
+  path: path.resolve(__dirname, '../.env'),
+});
+
+const app = express();
+
+app.get('/', (_, res) => {
+  res.redirect('/admin');
+});
+
+const start = async () => {
+  await payload.init({
+    secret: process.env.PAYLOAD_SECRET,
+    mongoURL: process.env.MONGODB_URI,
+    express: app,
+    email: {
+      fromName: 'Admin',
+      fromAddress: 'admin@example.com',
+      logMockCredentials: true,
+    },
+    onInit: () => {
+      payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
+    },
+  });
+
+  if (process.env.PAYLOAD_SEED === 'true') {
+    payload.logger.info('---- SEEDING DATABASE ----');
+    await seed(payload);
+  }
+
+  app.listen(8000);
+};
+
+start();

examples/form-builder/cms/src/utilities/deepMerge.ts

@@ -0,0 +1,32 @@
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+export function isObject(item: unknown): boolean {
+  return (item && typeof item === 'object' && !Array.isArray(item));
+}
+
+/**
+ * Deep merge two objects.
+ * @param target
+ * @param ...sources
+ */
+export default function deepMerge<T, R>(target: T, source: R): T {
+  const output = { ...target };
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach((key) => {
+      if (isObject(source[key])) {
+        if (!(key in target)) {
+          Object.assign(output, { [key]: source[key] });
+        } else {
+          output[key] = deepMerge(target[key], source[key]);
+        }
+      } else {
+        Object.assign(output, { [key]: source[key] });
+      }
+    });
+  }
+
+  return output;
+}

examples/form-builder/cms/src/utilities/formatSlug.ts

@@ -0,0 +1,21 @@
+import { FieldHook } from 'payload/types';
+
+const format = (val: string): string => val.replace(/ /g, '-').replace(/[^\w-]+/g, '').toLowerCase();
+
+const formatSlug = (fallback: string): FieldHook => ({ operation, value, originalDoc, data }) => {
+  if (typeof value === 'string') {
+    return format(value);
+  }
+
+  if (operation === 'create') {
+    const fallbackData = (data && data[fallback]) || (originalDoc && originalDoc[fallback]);
+
+    if (fallbackData && typeof fallbackData === 'string') {
+      return format(fallbackData);
+    }
+  }
+
+  return value;
+};
+
+export default formatSlug;

examples/form-builder/cms/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "strict": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react",
+    "sourceMap": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "build",
+  ],
+  "ts-node": {
+    "transpileOnly": true
+  }
+}

examples/form-builder/nextjs/.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf
+max_line_length = null

examples/form-builder/nextjs/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_CMS_URL=http://localhost:8000

examples/form-builder/nextjs/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['plugin:@next/next/recommended', '@payloadcms'],
+}

examples/form-builder/nextjs/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env

examples/form-builder/nextjs/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  printWidth: 100,
+  parser: "typescript",
+  semi: false,
+  singleQuote: true,
+  trailingComma: "all",
+  arrowParens: "avoid",
+};

examples/form-builder/nextjs/README.md

@@ -0,0 +1,42 @@
+# Form Builder Example Website
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) that fetches data from [Payload](https://payloadcms.com).
+
+This example repo was made explicitly to demonstrate the power and convenience of the [Form-Builder plugin](https://github.com/payloadcms/plugin-form-builder). Along with the `Form-Builder plugin`, this repo takes advantage of the popular [React Hooks Form](https://react-hook-form.com/) library for easy validation, giving users an easy way to build and manage forms.
+
+## Getting Started
+
+### Payload
+
+First you'll need a running Payload app. If you have not done so already, open up the `cms` folder and follow the setup instructions. Take note of your server URL, you'll need this in the next step.
+
+### Next.js App
+
+1. Clone this repo
+2. `cd` into this directory and run `yarn` or `npm install`
+3. `cp .env.example .env` to copy the example environment variables
+4. `yarn dev` or `npm run dev` to start the server
+5. `open http://localhost:3000` to see the result
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+Once running, you will find a few seeded example forms on your local environment. Give them a try!
+
+You can also start editing the pages by modifying the documents within your CMS.
+
+## Learn More
+
+To learn more about Payload and Next.js, take a look at the following resources:
+
+- [Payload Documentation](https://payloadcms.com/docs) - learn about Payload features and API.
+- [Form Builder Plugin Documentation](https://github.com/payloadcms/plugin-form-builder) - learn about the plugin's features.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Payload GitHub repository](https://github.com/payloadcms/payload/) as well as [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Payload deployment documentation](https://payloadcms.com/docs/production/deployment) or the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/form-builder/nextjs/components/Blocks/Form/Checkbox/index.module.scss

@@ -0,0 +1,69 @@
+@use "../shared.scss";
+
+.checkbox {
+  position: relative;
+  margin-bottom: var(--base);
+
+  :global {
+    button {
+      border: 0;
+      background: none;
+      box-shadow: none;
+      border-radius: 0;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      font-size: 1rem;
+
+      &:focus,
+      &:active {
+        outline: none;
+      }
+
+      &:hover {
+        svg {
+          opacity: 0.2;
+        }
+      }
+    }
+
+    input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0;
+    }
+  }
+}
+
+.container {
+  display: flex;
+}
+
+.input {
+  @include shared.formInput;
+  padding: 0;
+  line-height: 0;
+  position: relative;
+  width: var(--base);
+  height: var(--base);
+  margin-right: calc(var(--base) * 0.5);
+  margin-bottom: 0;
+
+  svg {
+    opacity: 0;
+  }
+}
+
+.checked {
+  :global {
+    svg {
+      opacity: 1 !important;
+    }
+  }
+}
+
+.label {
+  display: block;
+}

examples/form-builder/nextjs/components/Blocks/Form/Checkbox/index.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { CheckboxField } from 'payload-plugin-form-builder/dist/types';
+import { UseFormRegister, FieldErrorsImpl, FieldValues } from 'react-hook-form';
+import { Check } from '../../../icons/Check';
+import { Error } from '../Error';
+import { Width } from '../Width';
+
+import classes from './index.module.scss';
+
+export const Checkbox: React.FC<CheckboxField & {
+  register: UseFormRegister<FieldValues & any>,
+  setValue: any,
+  getValues: any,
+  errors: Partial<FieldErrorsImpl<{
+    [x: string]: any;
+  }>>
+}> = ({ name, label, width, register, setValue, getValues, required: requiredFromProps, errors }) => {
+  const [checked, setChecked] = useState(false);
+
+  const isCheckboxChecked = getValues(name);
+
+  return (
+    <Width width={width}>
+      <div
+        className={[
+          classes.checkbox,
+          checked && classes.checked
+        ].filter(Boolean).join(' ')}
+      >
+        <div className={classes.container}>
+          <input
+            type="checkbox"
+            {...register(name, { required: requiredFromProps })}
+            checked={isCheckboxChecked}
+          />
+          <button
+            type="button"
+            onClick={() => {
+              setValue(name, !checked)
+              setChecked(!checked)
+            }}
+          >
+            <span className={classes.input}>
+              <Check />
+            </span>
+          </button>
+          <span className={classes.label}>{label}</span>
+        </div>
+        {requiredFromProps && errors[name] && checked === false && <Error />}
+      </div>
+    </Width>
+  );
+};

examples/form-builder/nextjs/components/Blocks/Form/Country/index.module.scss

@@ -0,0 +1,123 @@
+@use "../shared.scss";
+
+.select {
+  position: relative;
+  margin-bottom: var(--base);
+}
+
+.label {
+  margin-bottom: 10px;
+  display: block;
+}
+
+.reactSelect {
+  display: flex;
+
+  :global {
+    div.rs__control {
+      @include shared.formInput;
+      height: auto;
+    }
+
+    .rs__input-container {
+      color: var(--color-black);
+    }
+
+    .rs__value-container {
+      padding: 0;
+      > * {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    .rs__single-value {
+      color: var(--color-black);
+    }
+
+    .rs__indicators {
+      position: absolute;
+      top: calc(var(--base) * 0.9);
+      right: calc(var(--base) * 0.9);
+      .arrow {
+        transform: rotate(90deg);
+      }
+    }
+
+    .rs__indicator {
+      padding: 0px 4px;
+      cursor: pointer;
+
+      svg path {
+        fill: var(--color-dark-gray);
+      }
+
+      &:hover {
+        svg path {
+          fill: var(--color-dark-gray);
+        }
+      }
+    }
+
+    .rs__indicator-separator {
+      display: none;
+    }
+
+    .rs__menu {
+      color: var(--color-black);
+      background-color: var(--color-white);
+      z-index: 2;
+      border-radius: 0;
+      box-shadow: 0 4px 11px hsl(0deg 0% 0% / 10%);
+    }
+
+    .rs__menu-list {
+      padding: calc(var(--base) / 4) 0;
+    }
+
+    .rs__group-heading {
+      margin-bottom: calc(var(--base) / 2);
+    }
+
+    .rs__option {
+      font-size: 1rem;
+      padding: calc(var(--base) / 2) var(--base);
+
+      &--is-focused {
+        background-color: var(--color-light-gray);
+        color: var(--color-black);
+      }
+
+      &--is-selected {
+        background-color: var(--color-light-gray);
+        color: var(--color-black);
+      }
+    }
+
+    .rs__multi-value {
+      padding: 0;
+      background: var(--color-light-gray);
+    }
+
+    .rs__multi-value__label {
+      max-width: 150px;
+      color: var(--color-black);
+      padding: calc(var(--base) / 8) calc(var(--base) / 4);
+    }
+
+    .rs__multi-value__remove {
+      cursor: pointer;
+
+      &:hover {
+        color: var(--color-black);
+        background: var(--color-light-gray);
+      }
+    }
+
+    .rs__clear-indicator {
+      cursor: pointer;
+    }
+  }
+}

examples/form-builder/nextjs/components/Blocks/Form/Country/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import ReactSelect from 'react-select';
+import { CountryField } from 'payload-plugin-form-builder/dist/types';
+import { Controller, Control, FieldValues, FieldErrorsImpl } from 'react-hook-form';
+import { countryOptions } from './options';
+import { Error } from '../Error';
+import { Width } from '../Width';
+
+import classes from './index.module.scss';
+
+export const Country: React.FC<CountryField & {
+  control: Control<FieldValues, any>
+  errors: Partial<FieldErrorsImpl<{
+    [x: string]: any;
+  }>>
+}> = ({ name, label, width, control, required, errors }) => {
+  return (
+    <Width width={width}>
+      <div className={classes.select}>
+        <label htmlFor="name" className={classes.label}>
+          {label}
+        </label>
+        <Controller
+          control={control}
+          rules={{ required }}
+          name={name}
+          defaultValue=""
+          render={({ field: { onChange, value } }) => (
+            <ReactSelect
+              instanceId={name}
+              options={countryOptions}
+              value={countryOptions.find(c => c.value === value)}
+              onChange={(val) => onChange(val.value)}
+              className={classes.reactSelect}
+              classNamePrefix="rs"
+            />
+          )}
+        />
+        {required && errors[name] && <Error />}
+      </div>
+    </Width>
+  );
+};

examples/form-builder/nextjs/components/Blocks/Form/Country/options.ts

@@ -0,0 +1,982 @@
+export const countryOptions = [
+  {
+    label: 'Afghanistan',
+    value: 'AF'
+  },
+  {
+    label: 'Åland Islands',
+    value: 'AX'
+  },
+  {
+    label: 'Albania',
+    value: 'AL'
+  },
+  {
+    label: 'Algeria',
+    value: 'DZ'
+  },
+  {
+    label: 'American Samoa',
+    value: 'AS'
+  },
+  {
+    label: 'Andorra',
+    value: 'AD'
+  },
+  {
+    label: 'Angola',
+    value: 'AO'
+  },
+  {
+    label: 'Anguilla',
+    value: 'AI'
+  },
+  {
+    label: 'Antarctica',
+    value: 'AQ'
+  },
+  {
+    label: 'Antigua and Barbuda',
+    value: 'AG'
+  },
+  {
+    label: 'Argentina',
+    value: 'AR'
+  },
+  {
+    label: 'Armenia',
+    value: 'AM'
+  },
+  {
+    label: 'Aruba',
+    value: 'AW'
+  },
+  {
+    label: 'Australia',
+    value: 'AU'
+  },
+  {
+    label: 'Austria',
+    value: 'AT'
+  },
+  {
+    label: 'Azerbaijan',
+    value: 'AZ'
+  },
+  {
+    label: 'Bahamas',
+    value: 'BS'
+  },
+  {
+    label: 'Bahrain',
+    value: 'BH'
+  },
+  {
+    label: 'Bangladesh',
+    value: 'BD'
+  },
+  {
+    label: 'Barbados',
+    value: 'BB'
+  },
+  {
+    label: 'Belarus',
+    value: 'BY'
+  },
+  {
+    label: 'Belgium',
+    value: 'BE'
+  },
+  {
+    label: 'Belize',
+    value: 'BZ'
+  },
+  {
+    label: 'Benin',
+    value: 'BJ'
+  },
+  {
+    label: 'Bermuda',
+    value: 'BM'
+  },
+  {
+    label: 'Bhutan',
+    value: 'BT'
+  },
+  {
+    label: 'Bolivia',
+    value: 'BO'
+  },
+  {
+    label: 'Bosnia and Herzegovina',
+    value: 'BA'
+  },
+  {
+    label: 'Botswana',
+    value: 'BW'
+  },
+  {
+    label: 'Bouvet Island',
+    value: 'BV'
+  },
+  {
+    label: 'Brazil',
+    value: 'BR'
+  },
+  {
+    label: 'British Indian Ocean Territory',
+    value: 'IO'
+  },
+  {
+    label: 'Brunei Darussalam',
+    value: 'BN'
+  },
+  {
+    label: 'Bulgaria',
+    value: 'BG'
+  },
+  {
+    label: 'Burkina Faso',
+    value: 'BF'
+  },
+  {
+    label: 'Burundi',
+    value: 'BI'
+  },
+  {
+    label: 'Cambodia',
+    value: 'KH'
+  },
+  {
+    label: 'Cameroon',
+    value: 'CM'
+  },
+  {
+    label: 'Canada',
+    value: 'CA'
+  },
+  {
+    label: 'Cape Verde',
+    value: 'CV'
+  },
+  {
+    label: 'Cayman Islands',
+    value: 'KY'
+  },
+  {
+    label: 'Central African Republic',
+    value: 'CF'
+  },
+  {
+    label: 'Chad',
+    value: 'TD'
+  },
+  {
+    label: 'Chile',
+    value: 'CL'
+  },
+  {
+    label: 'China',
+    value: 'CN'
+  },
+  {
+    label: 'Christmas Island',
+    value: 'CX'
+  },
+  {
+    label: 'Cocos (Keeling) Islands',
+    value: 'CC'
+  },
+  {
+    label: 'Colombia',
+    value: 'CO'
+  },
+  {
+    label: 'Comoros',
+    value: 'KM'
+  },
+  {
+    label: 'Congo',
+    value: 'CG'
+  },
+  {
+    label: 'Congo, The Democratic Republic of the',
+    value: 'CD'
+  },
+  {
+    label: 'Cook Islands',
+    value: 'CK'
+  },
+  {
+    label: 'Costa Rica',
+    value: 'CR'
+  },
+  {
+    label: 'Cote D\'Ivoire',
+    value: 'CI'
+  },
+  {
+    label: 'Croatia',
+    value: 'HR'
+  },
+  {
+    label: 'Cuba',
+    value: 'CU'
+  },
+  {
+    label: 'Cyprus',
+    value: 'CY'
+  },
+  {
+    label: 'Czech Republic',
+    value: 'CZ'
+  },
+  {
+    label: 'Denmark',
+    value: 'DK'
+  },
+  {
+    label: 'Djibouti',
+    value: 'DJ'
+  },
+  {
+    label: 'Dominica',
+    value: 'DM'
+  },
+  {
+    label: 'Dominican Republic',
+    value: 'DO'
+  },
+  {
+    label: 'Ecuador',
+    value: 'EC'
+  },
+  {
+    label: 'Egypt',
+    value: 'EG'
+  },
+  {
+    label: 'El Salvador',
+    value: 'SV'
+  },
+  {
+    label: 'Equatorial Guinea',
+    value: 'GQ'
+  },
+  {
+    label: 'Eritrea',
+    value: 'ER'
+  },
+  {
+    label: 'Estonia',
+    value: 'EE'
+  },
+  {
+    label: 'Ethiopia',
+    value: 'ET'
+  },
+  {
+    label: 'Falkland Islands (Malvinas)',
+    value: 'FK'
+  },
+  {
+    label: 'Faroe Islands',
+    value: 'FO'
+  },
+  {
+    label: 'Fiji',
+    value: 'FJ'
+  },
+  {
+    label: 'Finland',
+    value: 'FI'
+  },
+  {
+    label: 'France',
+    value: 'FR'
+  },
+  {
+    label: 'French Guiana',
+    value: 'GF'
+  },
+  {
+    label: 'French Polynesia',
+    value: 'PF'
+  },
+  {
+    label: 'French Southern Territories',
+    value: 'TF'
+  },
+  {
+    label: 'Gabon',
+    value: 'GA'
+  },
+  {
+    label: 'Gambia',
+    value: 'GM'
+  },
+  {
+    label: 'Georgia',
+    value: 'GE'
+  },
+  {
+    label: 'Germany',
+    value: 'DE'
+  },
+  {
+    label: 'Ghana',
+    value: 'GH'
+  },
+  {
+    label: 'Gibraltar',
+    value: 'GI'
+  },
+  {
+    label: 'Greece',
+    value: 'GR'
+  },
+  {
+    label: 'Greenland',
+    value: 'GL'
+  },
+  {
+    label: 'Grenada',
+    value: 'GD'
+  },
+  {
+    label: 'Guadeloupe',
+    value: 'GP'
+  },
+  {
+    label: 'Guam',
+    value: 'GU'
+  },
+  {
+    label: 'Guatemala',
+    value: 'GT'
+  },
+  {
+    label: 'Guernsey',
+    value: 'GG'
+  },
+  {
+    label: 'Guinea',
+    value: 'GN'
+  },
+  {
+    label: 'Guinea-Bissau',
+    value: 'GW'
+  },
+  {
+    label: 'Guyana',
+    value: 'GY'
+  },
+  {
+    label: 'Haiti',
+    value: 'HT'
+  },
+  {
+    label: 'Heard Island and Mcdonald Islands',
+    value: 'HM'
+  },
+  {
+    label: 'Holy See (Vatican City State)',
+    value: 'VA'
+  },
+  {
+    label: 'Honduras',
+    value: 'HN'
+  },
+  {
+    label: 'Hong Kong',
+    value: 'HK'
+  },
+  {
+    label: 'Hungary',
+    value: 'HU'
+  },
+  {
+    label: 'Iceland',
+    value: 'IS'
+  },
+  {
+    label: 'India',
+    value: 'IN'
+  },
+  {
+    label: 'Indonesia',
+    value: 'ID'
+  },
+  {
+    label: 'Iran, Islamic Republic Of',
+    value: 'IR'
+  },
+  {
+    label: 'Iraq',
+    value: 'IQ'
+  },
+  {
+    label: 'Ireland',
+    value: 'IE'
+  },
+  {
+    label: 'Isle of Man',
+    value: 'IM'
+  },
+  {
+    label: 'Israel',
+    value: 'IL'
+  },
+  {
+    label: 'Italy',
+    value: 'IT'
+  },
+  {
+    label: 'Jamaica',
+    value: 'JM'
+  },
+  {
+    label: 'Japan',
+    value: 'JP'
+  },
+  {
+    label: 'Jersey',
+    value: 'JE'
+  },
+  {
+    label: 'Jordan',
+    value: 'JO'
+  },
+  {
+    label: 'Kazakhstan',
+    value: 'KZ'
+  },
+  {
+    label: 'Kenya',
+    value: 'KE'
+  },
+  {
+    label: 'Kiribati',
+    value: 'KI'
+  },
+  {
+    label: 'Democratic People\'s Republic of Korea',
+    value: 'KP'
+  },
+  {
+    label: 'Korea, Republic of',
+    value: 'KR'
+  },
+  {
+    label: 'Kosovo',
+    value: 'XK'
+  },
+  {
+    label: 'Kuwait',
+    value: 'KW'
+  },
+  {
+    label: 'Kyrgyzstan',
+    value: 'KG'
+  },
+  {
+    label: 'Lao People\'s Democratic Republic',
+    value: 'LA'
+  },
+  {
+    label: 'Latvia',
+    value: 'LV'
+  },
+  {
+    label: 'Lebanon',
+    value: 'LB'
+  },
+  {
+    label: 'Lesotho',
+    value: 'LS'
+  },
+  {
+    label: 'Liberia',
+    value: 'LR'
+  },
+  {
+    label: 'Libyan Arab Jamahiriya',
+    value: 'LY'
+  },
+  {
+    label: 'Liechtenstein',
+    value: 'LI'
+  },
+  {
+    label: 'Lithuania',
+    value: 'LT'
+  },
+  {
+    label: 'Luxembourg',
+    value: 'LU'
+  },
+  {
+    label: 'Macao',
+    value: 'MO'
+  },
+  {
+    label: 'Macedonia, The Former Yugoslav Republic of',
+    value: 'MK'
+  },
+  {
+    label: 'Madagascar',
+    value: 'MG'
+  },
+  {
+    label: 'Malawi',
+    value: 'MW'
+  },
+  {
+    label: 'Malaysia',
+    value: 'MY'
+  },
+  {
+    label: 'Maldives',
+    value: 'MV'
+  },
+  {
+    label: 'Mali',
+    value: 'ML'
+  },
+  {
+    label: 'Malta',
+    value: 'MT'
+  },
+  {
+    label: 'Marshall Islands',
+    value: 'MH'
+  },
+  {
+    label: 'Martinique',
+    value: 'MQ'
+  },
+  {
+    label: 'Mauritania',
+    value: 'MR'
+  },
+  {
+    label: 'Mauritius',
+    value: 'MU'
+  },
+  {
+    label: 'Mayotte',
+    value: 'YT'
+  },
+  {
+    label: 'Mexico',
+    value: 'MX'
+  },
+  {
+    label: 'Micronesia, Federated States of',
+    value: 'FM'
+  },
+  {
+    label: 'Moldova, Republic of',
+    value: 'MD'
+  },
+  {
+    label: 'Monaco',
+    value: 'MC'
+  },
+  {
+    label: 'Mongolia',
+    value: 'MN'
+  },
+  {
+    label: 'Montenegro',
+    value: 'ME'
+  },
+  {
+    label: 'Montserrat',
+    value: 'MS'
+  },
+  {
+    label: 'Morocco',
+    value: 'MA'
+  },
+  {
+    label: 'Mozambique',
+    value: 'MZ'
+  },
+  {
+    label: 'Myanmar',
+    value: 'MM'
+  },
+  {
+    label: 'Namibia',
+    value: 'NA'
+  },
+  {
+    label: 'Nauru',
+    value: 'NR'
+  },
+  {
+    label: 'Nepal',
+    value: 'NP'
+  },
+  {
+    label: 'Netherlands',
+    value: 'NL'
+  },
+  {
+    label: 'Netherlands Antilles',
+    value: 'AN'
+  },
+  {
+    label: 'New Caledonia',
+    value: 'NC'
+  },
+  {
+    label: 'New Zealand',
+    value: 'NZ'
+  },
+  {
+    label: 'Nicaragua',
+    value: 'NI'
+  },
+  {
+    label: 'Niger',
+    value: 'NE'
+  },
+  {
+    label: 'Nigeria',
+    value: 'NG'
+  },
+  {
+    label: 'Niue',
+    value: 'NU'
+  },
+  {
+    label: 'Norfolk Island',
+    value: 'NF'
+  },
+  {
+    label: 'Northern Mariana Islands',
+    value: 'MP'
+  },
+  {
+    label: 'Norway',
+    value: 'NO'
+  },
+  {
+    label: 'Oman',
+    value: 'OM'
+  },
+  {
+    label: 'Pakistan',
+    value: 'PK'
+  },
+  {
+    label: 'Palau',
+    value: 'PW'
+  },
+  {
+    label: 'Palestinian Territory, Occupied',
+    value: 'PS'
+  },
+  {
+    label: 'Panama',
+    value: 'PA'
+  },
+  {
+    label: 'Papua New Guinea',
+    value: 'PG'
+  },
+  {
+    label: 'Paraguay',
+    value: 'PY'
+  },
+  {
+    label: 'Peru',
+    value: 'PE'
+  },
+  {
+    label: 'Philippines',
+    value: 'PH'
+  },
+  {
+    label: 'Pitcairn',
+    value: 'PN'
+  },
+  {
+    label: 'Poland',
+    value: 'PL'
+  },
+  {
+    label: 'Portugal',
+    value: 'PT'
+  },
+  {
+    label: 'Puerto Rico',
+    value: 'PR'
+  },
+  {
+    label: 'Qatar',
+    value: 'QA'
+  },
+  {
+    label: 'Reunion',
+    value: 'RE'
+  },
+  {
+    label: 'Romania',
+    value: 'RO'
+  },
+  {
+    label: 'Russian Federation',
+    value: 'RU'
+  },
+  {
+    label: 'Rwanda',
+    value: 'RW'
+  },
+  {
+    label: 'Saint Helena',
+    value: 'SH'
+  },
+  {
+    label: 'Saint Kitts and Nevis',
+    value: 'KN'
+  },
+  {
+    label: 'Saint Lucia',
+    value: 'LC'
+  },
+  {
+    label: 'Saint Pierre and Miquelon',
+    value: 'PM'
+  },
+  {
+    label: 'Saint Vincent and the Grenadines',
+    value: 'VC'
+  },
+  {
+    label: 'Samoa',
+    value: 'WS'
+  },
+  {
+    label: 'San Marino',
+    value: 'SM'
+  },
+  {
+    label: 'Sao Tome and Principe',
+    value: 'ST'
+  },
+  {
+    label: 'Saudi Arabia',
+    value: 'SA'
+  },
+  {
+    label: 'Senegal',
+    value: 'SN'
+  },
+  {
+    label: 'Serbia',
+    value: 'RS'
+  },
+  {
+    label: 'Seychelles',
+    value: 'SC'
+  },
+  {
+    label: 'Sierra Leone',
+    value: 'SL'
+  },
+  {
+    label: 'Singapore',
+    value: 'SG'
+  },
+  {
+    label: 'Slovakia',
+    value: 'SK'
+  },
+  {
+    label: 'Slovenia',
+    value: 'SI'
+  },
+  {
+    label: 'Solomon Islands',
+    value: 'SB'
+  },
+  {
+    label: 'Somalia',
+    value: 'SO'
+  },
+  {
+    label: 'South Africa',
+    value: 'ZA'
+  },
+  {
+    label: 'South Georgia and the South Sandwich Islands',
+    value: 'GS'
+  },
+  {
+    label: 'Spain',
+    value: 'ES'
+  },
+  {
+    label: 'Sri Lanka',
+    value: 'LK'
+  },
+  {
+    label: 'Sudan',
+    value: 'SD'
+  },
+  {
+    label: 'Suriname',
+    value: 'SR'
+  },
+  {
+    label: 'Svalbard and Jan Mayen',
+    value: 'SJ'
+  },
+  {
+    label: 'Swaziland',
+    value: 'SZ'
+  },
+  {
+    label: 'Sweden',
+    value: 'SE'
+  },
+  {
+    label: 'Switzerland',
+    value: 'CH'
+  },
+  {
+    label: 'Syrian Arab Republic',
+    value: 'SY'
+  },
+  {
+    label: 'Taiwan',
+    value: 'TW'
+  },
+  {
+    label: 'Tajikistan',
+    value: 'TJ'
+  },
+  {
+    label: 'Tanzania, United Republic of',
+    value: 'TZ'
+  },
+  {
+    label: 'Thailand',
+    value: 'TH'
+  },
+  {
+    label: 'Timor-Leste',
+    value: 'TL'
+  },
+  {
+    label: 'Togo',
+    value: 'TG'
+  },
+  {
+    label: 'Tokelau',
+    value: 'TK'
+  },
+  {
+    label: 'Tonga',
+    value: 'TO'
+  },
+  {
+    label: 'Trinidad and Tobago',
+    value: 'TT'
+  },
+  {
+    label: 'Tunisia',
+    value: 'TN'
+  },
+  {
+    label: 'Turkey',
+    value: 'TR'
+  },
+  {
+    label: 'Turkmenistan',
+    value: 'TM'
+  },
+  {
+    label: 'Turks and Caicos Islands',
+    value: 'TC'
+  },
+  {
+    label: 'Tuvalu',
+    value: 'TV'
+  },
+  {
+    label: 'Uganda',
+    value: 'UG'
+  },
+  {
+    label: 'Ukraine',
+    value: 'UA'
+  },
+  {
+    label: 'United Arab Emirates',
+    value: 'AE'
+  },
+  {
+    label: 'United Kingdom',
+    value: 'GB'
+  },
+  {
+    label: 'United States',
+    value: 'US'
+  },
+  {
+    label: 'United States Minor Outlying Islands',
+    value: 'UM'
+  },
+  {
+    label: 'Uruguay',
+    value: 'UY'
+  },
+  {
+    label: 'Uzbekistan',
+    value: 'UZ'
+  },
+  {
+    label: 'Vanuatu',
+    value: 'VU'
+  },
+  {
+    label: 'Venezuela',
+    value: 'VE'
+  },
+  {
+    label: 'Viet Nam',
+    value: 'VN'
+  },
+  {
+    label: 'Virgin Islands, British',
+    value: 'VG'
+  },
+  {
+    label: 'Virgin Islands, U.S.',
+    value: 'VI'
+  },
+  {
+    label: 'Wallis and Futuna',
+    value: 'WF'
+  },
+  {
+    label: 'Western Sahara',
+    value: 'EH'
+  },
+  {
+    label: 'Yemen',
+    value: 'YE'
+  },
+  {
+    label: 'Zambia',
+    value: 'ZM'
+  },
+  {
+    label: 'Zimbabwe',
+    value: 'ZW'
+  }
+]

examples/form-builder/nextjs/components/Blocks/Form/Email/index.module.scss

@@ -0,0 +1,15 @@
+@use "../shared.scss";
+
+.wrap {
+  position: relative;
+  margin-bottom: var(--base);
+}
+
+.input {
+  @include shared.formInput;
+}
+
+.label {
+  margin-bottom: 10px;
+  display: block;
+}

examples/form-builder/nextjs/components/Blocks/Form/Email/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { EmailField } from 'payload-plugin-form-builder/dist/types';
+import { UseFormRegister, FieldValues, FieldErrorsImpl } from 'react-hook-form';
+import { Error } from '../Error';
+import { Width } from '../Width';
+
+import classes from './index.module.scss';
+
+export const Email: React.FC<EmailField & {
+  register: UseFormRegister<FieldValues & any>;
+  errors: Partial<FieldErrorsImpl<{
+    [x: string]: any;
+  }>>
+}> = ({ name, width, label, register, required: requiredFromProps, errors }) => {
+  return (
+    <Width width={width}>
+      <div className={classes.wrap}>
+        <label htmlFor="name" className={classes.label}>
+          {label}
+        </label>
+        <input
+          type="text"
+          placeholder="Email"
+          className={classes.input}
+          {...register(name, { required: requiredFromProps, pattern: /^\S+@\S+$/i })}
+        />
+        {requiredFromProps && errors[name] && <Error />}
+      </div>
+    </Width>
+  );
+};

examples/form-builder/nextjs/components/Blocks/Form/Error/index.module.scss

@@ -0,0 +1,4 @@
+.error {
+  margin-top: 5px;
+  color: var(--color-red);
+}

examples/form-builder/nextjs/components/Blocks/Form/Error/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import classes from './index.module.scss';
+
+export const Error: React.FC = () => {
+  return (
+    <div className={classes.error}>
+      This field is required
+    </div>
+  )
+}

examples/form-builder/nextjs/components/Blocks/Form/Message/index.module.scss

@@ -0,0 +1,9 @@
+@use '../.../../../../../css/queries.scss' as *;
+
+.message {
+  margin: var(--base) 0 var(--base) 0;
+
+  @include mid-break {
+    margin: calc(var(--base) * 0.5) 0 calc(var(--base) * 0.5) 0;
+  }
+}