perf!: removes unnecessary field styles from initial page response (#9286)

Optimizes initial page responses by removing unnecessary inline field
styles that were being sent through the HTML response. The Client Config
contains a large number of duplicates of the string:
`"style\":{\"flex\":\"1 1 auto\"}`, one for every single field within
the entirely of the config. This leads to hundreds or potentially
thousands of instances of this same string, depending on the number of
fields within the config itself. This is regardless of custom field
widths being defined. Instead, we can do this entirely client-side,
preventing this string from ever being transmitted over the network in
the first place.

## Breaking Changes

This only effects those who are importing Payload's field components
into your own Custom Components or front-end application. The `width`
prop no longer exists. It has been consolidated into the existing
`style` prop. To migrate, simply move this prop as follows:

```diff
import { TextInput } from '@payloadcms/ui

export const MyCustomComponent = () => {
  return (
    <TextInput 
-      width="60%"
       style={{
+        width: "60%,
       }}
    />
  )
}
```

packages/richtext-slate/src/field/RichText.tsx

@@ -7,6 +7,7 @@ import type { ReactEditor } from 'slate-react'
 
 import { getTranslation } from '@payloadcms/translations'
 import { FieldLabel, useEditDepth, useField, useTranslation, withCondition } from '@payloadcms/ui'
+import { mergeFieldStyles } from '@payloadcms/ui/shared'
 import { isHotkey } from 'is-hotkey'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { createEditor, Node, Element as SlateElement, Text, Transforms } from 'slate'
@@ -19,8 +20,8 @@ import type { LoadedSlateFieldProps } from './types.js'
 import { defaultRichTextValue } from '../data/defaultValue.js'
 import { richTextValidate } from '../data/validation.js'
 import { listTypes } from './elements/listTypes.js'
-import { hotkeys } from './hotkeys.js'
 import './index.scss'
+import { hotkeys } from './hotkeys.js'
 import { toggleLeaf } from './leaves/toggle.js'
 import { withEnterBreakOut } from './plugins/withEnterBreakOut.js'
 import { withHTML } from './plugins/withHTML.js'
@@ -42,9 +43,10 @@ declare module 'slate' {
 const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
   const {
     elements,
+    field,
     field: {
       name,
-      admin: { className, placeholder, readOnly: readOnlyFromAdmin, style, width } = {},
+      admin: { className, placeholder, readOnly: readOnlyFromAdmin } = {},
       label,
       required,
     },
@@ -274,6 +276,8 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
   //   }
   // }, [path, editor]);
 
+  const styles = useMemo(() => mergeFieldStyles(field), [field])
+
   const classes = [
     baseClass,
     'field-type',
@@ -300,13 +304,7 @@ const RichTextField: React.FC<LoadedSlateFieldProps> = (props) => {
   }
 
   return (
-    <div
-      className={classes}
-      style={{
-        ...style,
-        width,
-      }}
-    >
+    <div className={classes} style={styles}>
       {Label || <FieldLabel label={label} required={required} />}
       <div className={`${baseClass}__wrap`}>
         {Error}