docs: fix incorrect mdx (#10201)

docs/access-control/collections.mdx

@@ -122,7 +122,7 @@ export const CollectionWithReadAccess: CollectionConfig = {
 ```
 
 <Banner type="success">
-  <strong>Tip:</strong>
+  **Tip:**
   Return a [Query](../queries/overview) to limit the Documents to only those that match the constraint. This can be helpful to restrict users' access to specific Documents. [More details](../queries/overview).
 </Banner>
 
@@ -176,7 +176,7 @@ export const CollectionWithUpdateAccess: CollectionConfig = {
 ```
 
 <Banner type="success">
-  <strong>Tip:</strong>
+  **Tip:**
   Return a [Query](../queries/overview) to limit the Documents to only those that match the constraint. This can be helpful to restrict users' access to specific Documents. [More details](../queries/overview).
 </Banner>
 

docs/access-control/fields.mdx

@@ -22,7 +22,7 @@ export const FieldWithAccessControl: Field = {
 ```
 
 <Banner type="warning">
-  <strong>Note:</strong>
+  **Note:**
   Field Access Controls does not support returning [Query](../queries/overview) constraints like [Collection Access Control](./collections) does.
 </Banner>
 

docs/access-control/overview.mdx

@@ -42,7 +42,7 @@ const defaultPayloadAccess = ({ req: { user } }) => {
 ```
 
 <Banner type="warning">
-  <strong>Important:</strong>
+  **Important:**
   In the [Local API](../local-api/overview), all Access Control is _skipped_ by default. This allows your server to have full control over your application. To opt back in, you can set the `overrideAccess` option to `false` in your requests.
 </Banner>
 
@@ -53,7 +53,7 @@ The Admin Panel responds dynamically to your changes to Access Control. For exam
 To accomplish this, Payload exposes the [Access Operation](../authentication/operations#access). Upon login, Payload executes each Access Control function at the top level, across all Collections, Globals, and Fields, and returns a response that contains a reflection of what the currently authenticated user can do within your application.
 
 <Banner type="warning">
-  <strong>Important:</strong>
+  **Important:**
   When your access control functions are executed via the [Access Operation](../authentication/operations#access),  the `id` and `data` arguments will be `undefined`. This is because Payload is executing your functions without referencing a specific Document.
 </Banner>
 

docs/admin/collections.mdx

@@ -79,7 +79,7 @@ The following options are available:
 | **`views`**                | Override or create new views within the Admin Panel. [More details](./views).                                     |
 
 <Banner type="success">
-  <strong>Note:</strong>
+  **Note:**
   For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components).
 </Banner>
 
@@ -124,7 +124,7 @@ preview: (doc, { req }) => `${req.protocol}//${req.host}/${doc.slug}` // highlig
 ```
 
 <Banner type="success">
-  <strong>Note:</strong>
+  **Note:**
   For fully working example of this, check of the official [Draft Preview Example](https://github.com/payloadcms/payload/tree/main/examples/draft-preview) in the [Examples Directory](https://github.com/payloadcms/payload/tree/main/examples).
 </Banner>
 
@@ -177,6 +177,6 @@ export const Posts: CollectionConfig = {
 ```
 
 <Banner type="warning">
-  <strong>Tip:</strong>
+  **Tip:**
   If you are adding `listSearchableFields`, make sure you index each of these fields so your admin queries can remain performant.
 </Banner>

docs/admin/components.mdx

@@ -11,7 +11,7 @@ The Payload [Admin Panel](./overview) is designed to be as minimal and straightf
 All Custom Components in Payload are [React Server Components](https://react.dev/reference/rsc/server-components) by default. This enables the use of the [Local API](../local-api/overview) directly on the front-end. Custom Components are available for nearly every part of the Admin Panel for extreme granularity and control.
 
 <Banner type="success">
-  <strong>Note:</strong>
+  **Note:**
   Client Components continue to be fully supported. To use Client Components in your app, simply include the `use client` directive. Payload will automatically detect and remove all default, [non-serializable props](https://react.dev/reference/rsc/use-client#serializable-types) before rendering your component. [More details](#client-components).
 </Banner>
 
@@ -46,7 +46,7 @@ const config = buildConfig({
 ```
 
 <Banner type="success">
-  <strong>Note:</strong>
+  **Note:**
   All Custom Components can be either Server Components or Client Components, depending on the presence of the `use client` directive at the top of the file.
 </Banner>
 
@@ -184,7 +184,7 @@ Each Custom Component receives the following props by default:
 | `i18n`                    | The [i18n](../configuration/i18n) object.                                                                           |
 
 <Banner type="warning">
-  <strong>Reminder:</strong>
+  **Reminder:**
   All Custom Components also receive various other props that are specific component being rendered. See [Root Components](#root-components), [Collection Components](./collections#custom-components), [Global Components](./globals#custom-components), or [Field Components](./fields#custom-components) for a complete list of all default props per component.
 </Banner>
 
@@ -243,7 +243,7 @@ export const MyClientComponent: React.FC = () => {
 ```
 
 <Banner type="warning">
-  <strong>Reminder:</strong>
+  **Reminder:**
   Client Components cannot be passed [non-serializable props](https://react.dev/reference/rsc/use-client#serializable-types). If you are rendering your Client Component _from within_ a Server Component, ensure that its props are serializable.
 </Banner>
 
@@ -455,7 +455,7 @@ Payload also exports its [SCSS](https://sass-lang.com) library for reuse which i
 ```
 
 <Banner type="success">
-  <strong>Note:</strong>
+  **Note:**
   You can also drill into Payload's own component styles, or easily apply global, app-wide CSS. More on that [here](./customizing-css).
 </Banner>
 
@@ -503,7 +503,7 @@ The following options are available:
 | **`views`**           | Override or create new views within the Admin Panel. [More details](./views).                                                                                                                                 |
 
 <Banner type="success">
-  <strong>Note:</strong>
+  **Note:**
   You can also use set [Collection Components](./collections#custom-components) and [Global Components](./globals#custom-components) in their respective configs.
 </Banner>
 
@@ -546,5 +546,5 @@ export const useMyCustomContext = () => useContext(MyCustomContext)
 ```
 
 <Banner type="warning">
-  <strong>Reminder:</strong>React Context exists only within Client Components. This means they must include the `use client` directive at the top of their files and cannot contain server-only code. To use a Server Component here, simply _wrap_ your Client Component with it.
+  **Reminder:**React Context exists only within Client Components. This means they must include the `use client` directive at the top of their files and cannot contain server-only code. To use a Server Component here, simply _wrap_ your Client Component with it.
 </Banner>

docs/admin/customizing-css.mdx

@@ -29,7 +29,7 @@ Here is an example of how you might target the Dashboard View and change the bac
 ```
 
 <Banner type="warning">
-  <strong>Note:</strong>
+  **Note:**
   If you are building [Custom Components](./components), it is best to import your own stylesheets directly into your components, rather than using the global stylesheet. You can continue to use the [CSS library](#css-library) as needed.
 </Banner>
 
@@ -77,7 +77,7 @@ The following variables are defined and can be overridden:
 For an up-to-date, comprehensive list of all available variables, please refer to the [Source Code](https://github.com/payloadcms/payload/blob/main/packages/ui/src/scss).
 
 <Banner type="warning">
-  <strong>Warning:</strong>
+  **Warning:**
   If you're overriding colors or theme elevations, make sure to consider how [your changes will affect dark mode](#dark-mode).
 </Banner>
 

docs/admin/fields.mdx

@@ -11,7 +11,7 @@ keywords:
 For example, your app might need to render a specific interface that Payload does not inherently support, such as a color picker. To do this, you could replace the default [Text Field](../fields/text) input with your own user-friendly component that formats the data into a valid color value.
 
 <Banner type="success">
-  <strong>Tip:</strong>
+  **Tip:**
   Don't see a built-in field type that you need? Build it! Using a combination of [Field Validations](../fields/overview#validation)
   and [Custom Components](./components), you can override the entirety of how a component functions within the [Admin Panel](./overview) to effectively create your own field type.
 </Banner>
@@ -87,7 +87,7 @@ export const MyCollectionConfig: SanitizedCollectionConfig = {
 ```
 
 <Banner type="warning">
-  <strong>Reminder:</strong>
+  **Reminder:**
   To replace the Field Description with a [Custom Component](./components), use the `admin.components.Description` property. [More details](#description).
 </Banner>
 
@@ -122,7 +122,7 @@ All Description Functions receive the following arguments:
 | **`t`**        | The `t` function used to internationalize the Admin Panel. [More details](../configuration/i18n) |
 
 <Banner type="info">
-  <strong>Note:</strong>
+  **Note:**
   If you need to subscribe to live updates within your form, use a Description Component instead. [More details](#description).
 </Banner>
 

docs/admin/globals.mdx

@@ -65,7 +65,7 @@ The following options are available:
 | **`views`**                    | Override or create new views within the Admin Panel. [More details](./views).                                     |
 
 <Banner type="success">
-  <strong>Note:</strong>
+  **Note:**
   For details on how to build Custom Components, see [Building Custom Components](./components#building-custom-components).
 </Banner>
 
@@ -102,6 +102,6 @@ The preview function receives two arguments:
 | **`ctx`** | An object containing `locale` and `token` properties. The `token` is the currently logged-in user's JWT. |
 
 <Banner type="success">
-  <strong>Note:</strong>
+  **Note:**
   For fully working example of this, check of the official [Draft Preview Example](https://github.com/payloadcms/payload/tree/main/examples/draft-preview) in the [Examples Directory](https://github.com/payloadcms/payload/tree/main/examples).
 </Banner>

docs/admin/hooks.mdx

@@ -9,7 +9,7 @@ keywords: admin, components, custom, documentation, Content Management System, c
 Payload provides a variety of powerful [React Hooks](https://react.dev/reference/react-dom/hooks) that can be used within your own [Custom Components](./components), such as [Custom Fields](./fields). With them, you can interface with Payload itself to build just about any type of complex customization you can think of.
 
 <Banner type="warning">
-  <strong>Reminder:</strong>
+  **Reminder:**
   All Custom Components are [React Server Components](https://react.dev/reference/rsc/server-components) by default. Hooks, on the other hand, are only available in client-side environments. To use hooks, [ensure your component is a client component](./components#client-components).
 </Banner>
 
@@ -78,7 +78,7 @@ type FieldType<T> = {
 There are times when a custom field component needs to have access to data from other fields, and you have a few options to do so. The `useFormFields` hook is a powerful and highly performant way to retrieve a form's field state, as well as to retrieve the `dispatchFields` method, which can be helpful for setting other fields' form states from anywhere within a form.
 
 <Banner type="success">
-  <strong>This hook is great for retrieving only certain fields from form state</strong> because it
+  **This hook is great for retrieving only certain fields from form state** because it
   ensures that it will only cause a rerender when the items that you ask for change.
 </Banner>
 
@@ -157,8 +157,8 @@ To see types for each action supported within the `dispatchFields` hook, check o
 The `useForm` hook can be used to interact with the form itself, and sends back many methods that can be used to reactively fetch form state without causing rerenders within your components each time a field is changed. This is useful if you have action-based callbacks that your components fire, and need to interact with form state _based on a user action_.
 
 <Banner type="warning">
-  <strong>Warning:</strong>
-  <br />
+  **Warning:**
+
   This hook is optimized to avoid causing rerenders when fields change, and as such, its `fields`
   property will be out of date. You should only leverage this hook if you need to perform actions
   against the form in response to your users' actions. Do not rely on its returned "fields" as being

docs/admin/locked-documents.mdx

@@ -20,13 +20,13 @@ When a user starts editing a document, Payload locks it for that user. If anothe
 
 The lock will automatically expire after a set period of inactivity, configurable using the `duration` property in the `lockDocuments` configuration, after which others can resume editing.
 
-<Banner type="info"> <strong>Note:</strong> If your application does not require document locking, you can disable this feature for any collection or global by setting the <code>lockDocuments</code> property to <code>false</code>. </Banner>
+<Banner type="info"> **Note:** If your application does not require document locking, you can disable this feature for any collection or global by setting the `lockDocuments` property to `false`. </Banner>
 
 ### Config Options
 
 The `lockDocuments` property exists on both the Collection Config and the Global Config. Document locking is enabled by default, but you can customize the lock duration or turn off the feature for any collection or global.
 
-Here’s an example configuration for document locking:
+Here's an example configuration for document locking:
 
 ```ts
 import type { CollectionConfig } from 'payload'

docs/admin/metadata.mdx

@@ -57,7 +57,7 @@ The following options are available for Root Metadata:
 | **`titleSuffix`** | `string` | A suffix to append to the end of the title of every page. Defaults to "- Payload". |
 
 <Banner type="success">
-  <strong>Reminder:</strong>
+  **Reminder:**
   These are the _root-level_ options for the Admin Panel. You can also customize [Collection Metadata](./collections), [Global Metadata](./globals), and [Document Metadata](./documents) in their respective configs.
 </Banner>
 

docs/admin/overview.mdx

@@ -56,7 +56,7 @@ As shown above, all Payload routes are nested within the `(payload)` route group
 The `admin` directory contains all the _pages_ related to the interface itself, whereas the `api` and `graphql` directories contains all the _routes_ related to the [REST API](../rest-api/overview) and [GraphQL API](../graphql/overview). All admin routes are [easily configurable](#customizing-routes) to meet your application's exact requirements.
 
 <Banner type="warning">
-  <strong>Note:</strong>
+  **Note:**
   If you don't use the [REST API](../rest/overview) or [GraphQL API](../graphql/overview), you can delete the [Next.js files corresponding to those routes](../admin/overview#project-structure), however, the overhead of this API is completely constrained to these endpoints, and will not slow down or affect Payload outside of the endpoints.
 </Banner>
 
@@ -103,7 +103,7 @@ The following options are available:
 | **`user`**                     | The `slug` of the Collection that you want to allow to login to the Admin Panel. [More details](#the-admin-user-collection).                                          |
 
 <Banner type="success">
-  <strong>Reminder:</strong>
+  **Reminder:**
   These are the _root-level_ options for the Admin Panel. You can also customize [Collection Admin Options](./collections) and [Global Admin Options](./globals) through their respective `admin` keys.
 </Banner>
 
@@ -123,8 +123,8 @@ const config = buildConfig({
 ```
 
 <Banner type="warning">
-  <strong>Important:</strong>
-  <br />
+  **Important:**
+
   The Admin Panel can only be used by a single auth-enabled Collection. To enable authentication for a Collection, simply set `auth: true` in the Collection's configuration. See [Authentication](../authentication/overview) for more information.
 </Banner>
 
@@ -177,7 +177,7 @@ The following options are available:
 | `graphQLPlayground` | `/graphql-playground` | The GraphQL Playground.                           |
 
 <Banner type="success">
-  <strong>Tip:</strong>
+  **Tip:**
   You can easily add _new_ routes to the Admin Panel through [Custom Endpoints](../rest-api/overview#custom-endpoints) and [Custom Views](./views).
 </Banner>
 
@@ -195,7 +195,7 @@ app/
 ```
 
 <Banner type="warning">
-  <strong>Note:</strong>
+  **Note:**
   If you set Root-level Routes _before_ auto-generating the Admin Panel via `create-payload-app`, your [Project Structure](#project-structure) will already be set up correctly.
 </Banner>
 
@@ -232,7 +232,7 @@ The following options are available:
 | `unauthorized`    | `/unauthorized`         | The unauthorized page.                          |
 
 <Banner type="success">
-  <strong>Note:</strong>
+  **Note:**
   You can also swap out entire _views_ out for your own, using the `admin.views` property of the Payload Config. See [Custom Views](./views) for more information.
 </Banner>
 

docs/admin/preferences.mdx

@@ -16,8 +16,8 @@ Out of the box, Payload handles the persistence of your users' preferences in a
 1. The last-known state of the `Nav` component, etc.
 
 <Banner type="warning">
-  <strong>Important:</strong>
-  <br />
+  **Important:**
+
   All preferences are stored on an individual user basis. Payload automatically recognizes the user
   that is reading or setting a preference via all provided authentication methods.
 </Banner>