payload 1.12.0 → 1.13.1

package/docs/fields/code.mdx

@@ -11,6 +11,13 @@ keywords: code, fields, config, configuration, documentation, Content Management
   The Code field type saves a string in the database, but provides the Admin panel with a code editor styled interface.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/code.png'
+  srcDark='https://payloadcms.com/images/docs/fields/code-dark.png'
+  alt='Shows a Code field in the Payload admin panel'
+  caption='Admin panel screenshot of a Code field'
+/>
+
 This field uses the `monaco-react` editor syntax highlighting.
 
 ### Config

package/docs/fields/collapsible.mdx

@@ -10,6 +10,13 @@ keywords: row, fields, config, configuration, documentation, Content Management
   The Collapsible field is presentational-only and only affects the Admin panel. By using it, you can place fields within a nice layout component that can be collapsed / expanded.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/collapsible.png'
+  srcDark='https://payloadcms.com/images/docs/fields/collapsible-dark.png'
+  alt='Shows a Collapsible field in the Payload admin panel'
+  caption='Admin panel screenshot of a Collapsible field'
+/>
+
 ### Config
 
 | Option         | Description                                                               |

package/docs/fields/date.mdx

@@ -11,6 +11,13 @@ keywords: date, fields, config, configuration, documentation, Content Management
   with a customizable time picker interface.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/date.png'
+  srcDark='https://payloadcms.com/images/docs/fields/date-dark.png'
+  alt='Shows a Date field in the Payload admin panel'
+  caption='Admin panel screenshot of a Date field'
+/>
+
 This field uses [`react-datepicker`](https://www.npmjs.com/package/react-datepicker) for the Admin panel component.
 
 ### Config

package/docs/fields/email.mdx

@@ -6,10 +6,17 @@ desc: The Email field enforces that the value provided is a valid email address.
 keywords: email, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
-<Banner >
+<Banner>
   The Email field enforces that the value provided is a valid email address.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/email.png'
+  srcDark='https://payloadcms.com/images/docs/fields/email-dark.png'
+  alt='Shows an Email field in the Payload admin panel'
+  caption='Admin panel screenshot of an Email field'
+/>
+
 ### Config
 
 | Option           | Description |

package/docs/fields/group.mdx

@@ -11,6 +11,13 @@ keywords: group, fields, config, configuration, documentation, Content Managemen
   also groups fields together visually in the Admin panel.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/group.png'
+  srcDark='https://payloadcms.com/images/docs/fields/group-dark.png'
+  alt='Shows a Group field in the Payload admin panel'
+  caption='Admin panel screenshot of a Group field'
+/>
+
 ### Config
 
 | Option              | Description                                                                                                                                                                                                                                                                        |

package/docs/fields/json.mdx

@@ -11,6 +11,13 @@ keywords: json, fields, config, configuration, documentation, Content Management
   The JSON field type saves actual JSON in the database, which differs from the Code field that saves the value as a string in the database.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/json.png'
+  srcDark='https://payloadcms.com/images/docs/fields/json-dark.png'
+  alt='Shows a JSON field in the Payload admin panel'
+  caption='Admin panel screenshot of a JSON field'
+/>
+
 This field uses the `monaco-react` editor syntax highlighting.
 
 ### Config

package/docs/fields/number.mdx

@@ -10,6 +10,13 @@ keywords: number, fields, config, configuration, documentation, Content Manageme
   The Number field stores and validates numeric entry and supports additional numerical validation and formatting features.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/number.png'
+  srcDark='https://payloadcms.com/images/docs/fields/number-dark.png'
+  alt='Shows a Number field in the Payload admin panel'
+  caption='Admin panel screenshot of a Number field'
+/>
+
 ### Config
 
 | Option           | Description |

package/docs/fields/point.mdx

@@ -11,6 +11,13 @@ keywords: point, geolocation, geospatial, geojson, 2dsphere, config, configurati
   The Point field type saves a pair of coordinates in the database and assigns an index for location related queries.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/point.png'
+  srcDark='https://payloadcms.com/images/docs/fields/point-dark.png'
+  alt='Shows a Point field in the Payload admin panel'
+  caption='Admin panel screenshot of a Point field'
+/>
+
 The data structure in the database matches the GeoJSON structure to represent point. The Payload APIs simplifies the object data to only the [longitude, latitude] location.
 
 ### Config

package/docs/fields/radio.mdx

@@ -10,6 +10,13 @@ keywords: radio, fields, config, configuration, documentation, Content Managemen
   The Radio Group field type allows for the selection of one value from a predefined set of possible values and presents a radio group-style set of inputs to the Admin panel.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/radio.png'
+  srcDark='https://payloadcms.com/images/docs/fields/radio-dark.png'
+  alt='Shows a Radio field in the Payload admin panel'
+  caption='Admin panel screenshot of a Radio field'
+/>
+
 ### Config
 
 | Option           | Description |

package/docs/fields/relationship.mdx

@@ -11,6 +11,13 @@ keywords: relationship, fields, config, configuration, documentation, Content Ma
   provides for the ability to easily relate documents together.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/relationship.png'
+  srcDark='https://payloadcms.com/images/docs/fields/relationship-dark.png'
+  alt='Shows a relationship field in the Payload admin panel'
+  caption='Admin panel screenshot of a Relationship field'
+/>
+
 **Example uses:**
 
 - To add `Product` documents to an `Order` document

package/docs/fields/rich-text.mdx

@@ -10,6 +10,13 @@ keywords: rich text, fields, config, configuration, documentation, Content Manag
   The Rich Text field is a powerful way to allow editors to write dynamic content. The content is saved as JSON in the database and can be converted into any format, including HTML, that you need.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/richtext.png'
+  srcDark='https://payloadcms.com/images/docs/fields/richtext-dark.png'
+  alt='Shows a Rich Text field in the Payload admin panel'
+  caption='Admin panel screenshot of a Rich Text field'
+/>
+
 The Admin component is built on the powerful [`slatejs`](https://docs.slatejs.org/) editor and is meant to be as extensible and customizable as possible.
 
 <Banner type="success">

package/docs/fields/row.mdx

@@ -10,6 +10,13 @@ keywords: row, fields, config, configuration, documentation, Content Management
   The Row field is presentational-only and only affects the Admin panel. By using it, you can arrange fields next to each other horizontally.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/row.png'
+  srcDark='https://payloadcms.com/images/docs/fields/row-dark.png'
+  alt='Shows a row field in the Payload admin panel'
+  caption='Admin panel screenshot of a Row field'
+/>
+
 ### Config
 
 | Option           | Description |

package/docs/fields/select.mdx

@@ -11,6 +11,13 @@ keywords: select, multi-select, fields, config, configuration, documentation, Co
   a predefined list as an enumeration.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/select.png'
+  srcDark='https://payloadcms.com/images/docs/fields/select-dark.png'
+  alt='Shows a Select field in the Payload admin panel'
+  caption='Admin panel screenshot of a Select field'
+/>
+
 ### Config
 
 | Option             | Description                                                                                                                                                                                         |

package/docs/fields/tabs.mdx

@@ -12,8 +12,13 @@ keywords: tabs, fields, config, configuration, documentation, Content Management
   component that separates certain sub-fields by a tabbed interface.
 </Banner>
 
-![Tabs field type used to separate Hero fields from Page Layout](https://payloadcms.com/images/docs/fields/tabs/tabs.jpg)
-_Tabs field type used to separate Hero fields from Page Layout_
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/tabs.png'
+  srcDark='https://payloadcms.com/images/docs/fields/tabs-dark.png'
+  alt='Shows a tabs field used to separate Hero and Page layout in the Payload admin panel'
+  caption='Tabs field type used to separate Hero fields from Page Layout'
+/>
+
 
 ### Config
 
@@ -25,14 +30,14 @@ _Tabs field type used to separate Hero fields from Page Layout_
 
 #### Tab-specific Config
 
-Each tab has its own required `label` and `fields` array. You can also optionally pass a `description` to render within each individual tab.
+Each tab must have either a `name` or `label` and the required `fields` array. You can also optionally pass a `description` to render within each individual tab.
 
-| Option              | Description                                                                                                                                                                                                  |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **`name`**          | An optional property name to be used when stored and retrieved from the database. [More](/docs/fields/overview#field-names)                                                                                  |
-| **`label`** \*      | The label to render on the tab itself.                                                                                                                                                                       |
-| **`fields`** \*     | The fields to render within this tab.                                                                                                                                                                        |
-| **`description`**   | Optionally render a description within this tab to describe the contents of the tab itself.                                                                                                                  |
+| Option           | Description                                                                                                                                                                                                  |
+| ---------------- |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **`name`**       | Groups field data into an object when stored and retrieved from the database. [More](/docs/fields/overview#field-names)                                                                                      |
+| **`label`**      | The label to render on the tab itself. Required when name is undefined, defaults to name converted to words.                                                                                                 |
+| **`fields`** \*  | The fields to render within this tab.                                                                                                                                                                        |
+| **`description`** | Optionally render a description within this tab to describe the contents of the tab itself.                                                                                                                  |
 | **`interfaceName`** | Create a top level, reusable [Typescript interface](/docs/typescript/generating-types#custom-field-interfaces) & [GraphQL type](/docs/graphql/graphql-schema#custom-field-schemas). (`name` must be present) |
 
 _\* An asterisk denotes that a property is required._

package/docs/fields/text.mdx

@@ -10,6 +10,13 @@ keywords: text, fields, config, configuration, documentation, Content Management
   The Text field type is one of the most commonly used fields. It saves a string to the database and provides the Admin panel with a simple text input.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/text.png'
+  srcDark='https://payloadcms.com/images/docs/fields/text-dark.png'
+  alt='Shows a text field and read-only text field in the Payload admin panel'
+  caption='Admin panel screenshot of a Text field and read-only Text field'
+/>
+
 ### Config
 
 | Option           | Description |

package/docs/fields/textarea.mdx

@@ -10,6 +10,13 @@ keywords: textarea, fields, config, configuration, documentation, Content Manage
   The Textarea field is almost identical to the Text field but it features a slightly larger input that is better suited to edit longer text.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/textarea.png'
+  srcDark='https://payloadcms.com/images/docs/fields/textarea-dark.png'
+  alt='Shows a textarea field and read-only textarea field in the Payload admin panel'
+  caption='Admin panel screenshot of a Textarea field and read-only Textarea field'
+/>
+
 ### Config
 
 | Option           | Description |

package/docs/fields/upload.mdx

@@ -15,6 +15,13 @@ keywords: upload, images media, fields, config, configuration, documentation, Co
   To use this field, you need to have a Collection configured to allow Uploads. For more information, [click here](/docs/upload/overview) to read about how to enable Uploads on a collection by collection basis.
 </Banner>
 
+<LightDarkImage 
+  srcLight='https://payloadcms.com/images/docs/fields/upload.png'
+  srcDark='https://payloadcms.com/images/docs/fields/upload-dark.png'
+  alt='Shows an upload field in the Payload admin panel'
+  caption='Admin panel screenshot of an Upload field'
+/>
+
 **Example uses:**
 
 - To provide a `Page` with a featured image

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "description": "Node, React and MongoDB Headless CMS and Application Framework",
   "license": "MIT",
   "engines": {