@payloadcms/richtext-slate - npm Package Compare versions

Comparing version 3.0.0-beta.35 to 3.0.0-beta.36

dist/cell/index.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,5 +7,7 @@ export const RichTextCell = ({ cellData })=>{
     // Limiting the number of characters shown is done in a CSS rule
-    return /*#__PURE__*/ React.createElement("span", null, flattenedText);
+    return /*#__PURE__*/ _jsx("span", {
+        children: flattenedText
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/elements/blockquote/Blockquote.d.ts

@@ -1,4 +0,3 @@
-import React from 'react';
 import './index.scss';
-export declare const Blockquote: () => React.JSX.Element;
+export declare const Blockquote: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Blockquote.d.ts.map

dist/field/elements/blockquote/Blockquote.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -7,8 +8,9 @@ import { useElement } from '../../providers/ElementProvider.js';
     const { attributes, children } = useElement();
-    return /*#__PURE__*/ React.createElement("blockquote", {
+    return /*#__PURE__*/ _jsx("blockquote", {
         className: "rich-text-blockquote",
-        ...attributes
-    }, children);
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=Blockquote.js.map

dist/field/elements/blockquote/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -8,5 +9,6 @@ import { BlockquoteIcon } from '../../icons/Blockquote/index.js';
     name,
-    Button: ()=>/*#__PURE__*/ React.createElement(ElementButton, {
-            format: name
-        }, /*#__PURE__*/ React.createElement(BlockquoteIcon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(ElementButton, {
+            format: name,
+            children: /*#__PURE__*/ _jsx(BlockquoteIcon, {})
+        }),
     Element: Blockquote
@@ -13,0 +15,0 @@ };

dist/field/elements/Button.js

 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip } from '@payloadcms/ui/elements/Tooltip';
@@ -23,3 +24,3 @@ import React, { useCallback, useState } from 'react';
     const Tag = el;
-    return /*#__PURE__*/ React.createElement(Tag, {
+    return /*#__PURE__*/ _jsxs(Tag, {
         ...el === 'button' && {
@@ -35,8 +36,13 @@ type: 'button'
         onMouseEnter: ()=>setShowTooltip(true),
-        onMouseLeave: ()=>setShowTooltip(false)
-    }, tooltip && /*#__PURE__*/ React.createElement(Tooltip, {
-        show: showTooltip
-    }, tooltip), children);
+        onMouseLeave: ()=>setShowTooltip(false),
+        children: [
+            tooltip && /*#__PURE__*/ _jsx(Tooltip, {
+                show: showTooltip,
+                children: tooltip
+            }),
+            children
+        ]
+    });
 };
 
 //# sourceMappingURL=Button.js.map

dist/field/elements/h1/Heading1.d.ts

@@ -1,3 +0,2 @@
-import React from 'react';
-export declare const Heading1: () => React.JSX.Element;
+export declare const Heading1: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Heading1.d.ts.map

dist/field/elements/h1/Heading1.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,5 +7,8 @@ import { useElement } from '../../providers/ElementProvider.js';
     const { attributes, children } = useElement();
-    return /*#__PURE__*/ React.createElement("h1", attributes, children);
+    return /*#__PURE__*/ _jsx("h1", {
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=Heading1.js.map

dist/field/elements/h1/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -8,5 +9,6 @@ import { H1Icon } from '../../icons/headings/H1/index.js';
     name,
-    Button: ()=>/*#__PURE__*/ React.createElement(ElementButton, {
-            format: name
-        }, /*#__PURE__*/ React.createElement(H1Icon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(ElementButton, {
+            format: name,
+            children: /*#__PURE__*/ _jsx(H1Icon, {})
+        }),
     Element: Heading1
@@ -13,0 +15,0 @@ };

dist/field/elements/h2/Heading2.d.ts

@@ -1,3 +0,2 @@
-import React from 'react';
-export declare const Heading2: () => React.JSX.Element;
+export declare const Heading2: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Heading2.d.ts.map

dist/field/elements/h2/Heading2.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,5 +7,8 @@ import { useElement } from '../../providers/ElementProvider.js';
     const { attributes, children } = useElement();
-    return /*#__PURE__*/ React.createElement("h2", attributes, children);
+    return /*#__PURE__*/ _jsx("h2", {
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=Heading2.js.map

dist/field/elements/h2/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -8,5 +9,6 @@ import { H2Icon } from '../../icons/headings/H2/index.js';
     name,
-    Button: ()=>/*#__PURE__*/ React.createElement(ElementButton, {
-            format: name
-        }, /*#__PURE__*/ React.createElement(H2Icon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(ElementButton, {
+            format: name,
+            children: /*#__PURE__*/ _jsx(H2Icon, {})
+        }),
     Element: Heading2
@@ -13,0 +15,0 @@ };

dist/field/elements/h3/Heading3.d.ts

@@ -1,3 +0,2 @@
-import React from 'react';
-export declare const Heading3: () => React.JSX.Element;
+export declare const Heading3: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Heading3.d.ts.map

dist/field/elements/h3/Heading3.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,5 +7,8 @@ import { useElement } from '../../providers/ElementProvider.js';
     const { attributes, children } = useElement();
-    return /*#__PURE__*/ React.createElement("h3", attributes, children);
+    return /*#__PURE__*/ _jsx("h3", {
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=Heading3.js.map

dist/field/elements/h3/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -8,5 +9,6 @@ import { H3Icon } from '../../icons/headings/H3/index.js';
     name,
-    Button: ()=>/*#__PURE__*/ React.createElement(ElementButton, {
-            format: name
-        }, /*#__PURE__*/ React.createElement(H3Icon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(ElementButton, {
+            format: name,
+            children: /*#__PURE__*/ _jsx(H3Icon, {})
+        }),
     Element: Heading3
@@ -13,0 +15,0 @@ };

dist/field/elements/h4/Heading4.d.ts

@@ -1,3 +0,2 @@
-import React from 'react';
-export declare const Heading4: () => React.JSX.Element;
+export declare const Heading4: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Heading4.d.ts.map

dist/field/elements/h4/Heading4.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,5 +7,8 @@ import { useElement } from '../../providers/ElementProvider.js';
     const { attributes, children } = useElement();
-    return /*#__PURE__*/ React.createElement("h4", attributes, children);
+    return /*#__PURE__*/ _jsx("h4", {
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=Heading4.js.map

dist/field/elements/h4/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -8,5 +9,6 @@ import { H4Icon } from '../../icons/headings/H4/index.js';
     name,
-    Button: ()=>/*#__PURE__*/ React.createElement(ElementButton, {
-            format: name
-        }, /*#__PURE__*/ React.createElement(H4Icon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(ElementButton, {
+            format: name,
+            children: /*#__PURE__*/ _jsx(H4Icon, {})
+        }),
     Element: Heading4
@@ -13,0 +15,0 @@ };

dist/field/elements/h5/Heading5.d.ts

@@ -1,3 +0,2 @@
-import React from 'react';
-export declare const Heading5: () => React.JSX.Element;
+export declare const Heading5: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Heading5.d.ts.map

dist/field/elements/h5/Heading5.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,5 +7,8 @@ import { useElement } from '../../providers/ElementProvider.js';
     const { attributes, children } = useElement();
-    return /*#__PURE__*/ React.createElement("h5", attributes, children);
+    return /*#__PURE__*/ _jsx("h5", {
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=Heading5.js.map

dist/field/elements/h5/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -8,5 +9,6 @@ import { H5Icon } from '../../icons/headings/H5/index.js';
     name,
-    Button: ()=>/*#__PURE__*/ React.createElement(ElementButton, {
-            format: name
-        }, /*#__PURE__*/ React.createElement(H5Icon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(ElementButton, {
+            format: name,
+            children: /*#__PURE__*/ _jsx(H5Icon, {})
+        }),
     Element: Heading5
@@ -13,0 +15,0 @@ };

dist/field/elements/h6/Heading6.d.ts

@@ -1,3 +0,2 @@
-import React from 'react';
-export declare const Heading6: () => React.JSX.Element;
+export declare const Heading6: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Heading6.d.ts.map

dist/field/elements/h6/Heading6.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,5 +7,8 @@ import { useElement } from '../../providers/ElementProvider.js';
     const { attributes, children } = useElement();
-    return /*#__PURE__*/ React.createElement("h6", attributes, children);
+    return /*#__PURE__*/ _jsx("h6", {
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=Heading6.js.map

dist/field/elements/h6/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -8,5 +9,6 @@ import { H6Icon } from '../../icons/headings/H6/index.js';
     name,
-    Button: ()=>/*#__PURE__*/ React.createElement(ElementButton, {
-            format: name
-        }, /*#__PURE__*/ React.createElement(H6Icon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(ElementButton, {
+            format: name,
+            children: /*#__PURE__*/ _jsx(H6Icon, {})
+        }),
     Element: Heading6
@@ -13,0 +15,0 @@ };

dist/field/elements/indent/Button.js

 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
@@ -163,16 +164,23 @@ import { useCallback } from 'react';
     const canDeIndent = isElementActive(editor, 'li') || isElementActive(editor, indentType);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", {
-        className: [
-            baseClass,
-            !canDeIndent && `${baseClass}--disabled`
-        ].filter(Boolean).join(' '),
-        onClick: canDeIndent ? (e)=>handleIndent(e, 'left') : undefined,
-        type: "button"
-    }, /*#__PURE__*/ React.createElement(IndentLeft, null)), /*#__PURE__*/ React.createElement("button", {
-        className: baseClass,
-        onClick: (e)=>handleIndent(e, 'right'),
-        type: "button"
-    }, /*#__PURE__*/ React.createElement(IndentRight, null)));
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                className: [
+                    baseClass,
+                    !canDeIndent && `${baseClass}--disabled`
+                ].filter(Boolean).join(' '),
+                onClick: canDeIndent ? (e)=>handleIndent(e, 'left') : undefined,
+                type: "button",
+                children: /*#__PURE__*/ _jsx(IndentLeft, {})
+            }),
+            /*#__PURE__*/ _jsx("button", {
+                className: baseClass,
+                onClick: (e)=>handleIndent(e, 'right'),
+                type: "button",
+                children: /*#__PURE__*/ _jsx(IndentRight, {})
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=Button.js.map

dist/field/elements/indent/Element.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,10 +7,11 @@ import { useElement } from '../../providers/ElementProvider.js';
     const { attributes, children } = useElement();
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsx("div", {
         style: {
             paddingLeft: 25
         },
-        ...attributes
-    }, children);
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=Element.js.map

dist/field/elements/li/ListItem.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -9,3 +10,3 @@ import { useElement } from '../../providers/ElementProvider.js';
     const disableListStyle = element.children.length >= 1 && listTypes.includes(listType);
-    return /*#__PURE__*/ React.createElement("li", {
+    return /*#__PURE__*/ _jsx("li", {
         style: {
@@ -15,6 +16,7 @@ listStyle: disableListStyle ? 'none' : undefined,
         },
-        ...attributes
-    }, children);
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=ListItem.js.map

dist/field/elements/link/Button/index.js

 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as facelessUIImport from '@faceless-ui/modal';
@@ -78,43 +79,49 @@ import { useDrawerSlug } from '@payloadcms/ui/elements/Drawer';
     const fieldMap = richTextComponentMap.get(linkFieldsSchemaPath);
-    return /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement(ElementButton, {
-        className: "link",
-        format: "link",
-        onClick: async ()=>{
-            if (isElementActive(editor, 'link')) {
-                unwrapLink(editor);
-            } else {
-                openModal(drawerSlug);
-                const isCollapsed = editor.selection && Range.isCollapsed(editor.selection);
-                if (!isCollapsed) {
-                    const data = {
-                        text: editor.selection ? Editor.string(editor, editor.selection) : ''
-                    };
-                    const state = await getFormState({
-                        apiRoute: config.routes.api,
-                        body: {
-                            data,
-                            operation: 'update',
-                            schemaPath: `${schemaPath}.${linkFieldsSchemaPath}`
-                        },
-                        serverURL: config.serverURL
-                    });
-                    setInitialState(state);
-                }
-            }
-        },
-        tooltip: t('fields:addLink')
-    }, /*#__PURE__*/ React.createElement(LinkIcon, null)), /*#__PURE__*/ React.createElement(LinkDrawer, {
-        drawerSlug: drawerSlug,
-        fieldMap: Array.isArray(fieldMap) ? fieldMap : [],
-        handleClose: ()=>{
-            closeModal(drawerSlug);
-        },
-        handleModalSubmit: (fields)=>{
-            insertLink(editor, fields);
-            closeModal(drawerSlug);
-        },
-        initialState: initialState
-    }));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(ElementButton, {
+                className: "link",
+                format: "link",
+                onClick: async ()=>{
+                    if (isElementActive(editor, 'link')) {
+                        unwrapLink(editor);
+                    } else {
+                        openModal(drawerSlug);
+                        const isCollapsed = editor.selection && Range.isCollapsed(editor.selection);
+                        if (!isCollapsed) {
+                            const data = {
+                                text: editor.selection ? Editor.string(editor, editor.selection) : ''
+                            };
+                            const state = await getFormState({
+                                apiRoute: config.routes.api,
+                                body: {
+                                    data,
+                                    operation: 'update',
+                                    schemaPath: `${schemaPath}.${linkFieldsSchemaPath}`
+                                },
+                                serverURL: config.serverURL
+                            });
+                            setInitialState(state);
+                        }
+                    }
+                },
+                tooltip: t('fields:addLink'),
+                children: /*#__PURE__*/ _jsx(LinkIcon, {})
+            }),
+            /*#__PURE__*/ _jsx(LinkDrawer, {
+                drawerSlug: drawerSlug,
+                fieldMap: Array.isArray(fieldMap) ? fieldMap : [],
+                handleClose: ()=>{
+                    closeModal(drawerSlug);
+                },
+                handleModalSubmit: (fields)=>{
+                    insertLink(editor, fields);
+                    closeModal(drawerSlug);
+                },
+                initialState: initialState
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/elements/link/Element/index.d.ts

@@ -1,4 +0,3 @@
-import React from 'react';
 import './index.scss';
-export declare const LinkElement: () => React.JSX.Element;
+export declare const LinkElement: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

dist/field/elements/link/Element/index.js

 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as facelessUIImport from '@faceless-ui/modal';
@@ -111,90 +112,107 @@ import { getTranslation } from '@payloadcms/translations';
     ]);
-    return /*#__PURE__*/ React.createElement("span", {
+    return /*#__PURE__*/ _jsxs("span", {
         className: baseClass,
-        ...attributes
-    }, /*#__PURE__*/ React.createElement("span", {
-        contentEditable: false,
-        style: {
-            userSelect: 'none'
-        }
-    }, renderModal && /*#__PURE__*/ React.createElement(LinkDrawer, {
-        drawerSlug: drawerSlug,
-        fieldMap: Array.isArray(fieldMap) ? fieldMap : [],
-        handleClose: ()=>{
-            toggleModal(drawerSlug);
-            setRenderModal(false);
-        },
-        handleModalSubmit: (fields)=>{
-            insertChange(editor, fields);
-            closeModal(drawerSlug);
-            setRenderModal(false);
-        },
-        initialState: initialState
-    }), /*#__PURE__*/ React.createElement(Popup, {
-        boundingRef: editorRef,
-        buttonType: "none",
-        forceOpen: renderPopup,
-        horizontalAlign: "left",
-        onToggleOpen: handleTogglePopup,
-        render: ()=>/*#__PURE__*/ React.createElement("div", {
-                className: `${baseClass}__popup`
-            }, element.linkType === 'internal' && element.doc?.relationTo && element.doc?.value && /*#__PURE__*/ React.createElement(Translation, {
-                elements: {
-                    '0': ({ children })=>/*#__PURE__*/ React.createElement("a", {
-                            className: `${baseClass}__link-label`,
-                            href: `${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`,
-                            rel: "noreferrer",
-                            target: "_blank",
-                            title: `${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`
-                        }, children)
+        ...attributes,
+        children: [
+            /*#__PURE__*/ _jsxs("span", {
+                contentEditable: false,
+                style: {
+                    userSelect: 'none'
                 },
-                i18nKey: "fields:linkedTo",
-                t: t,
-                variables: {
-                    label: getTranslation(config.collections.find(({ slug })=>slug === element.doc.relationTo)?.labels?.singular, i18n)
-                }
-            }), (element.linkType === 'custom' || !element.linkType) && /*#__PURE__*/ React.createElement("a", {
-                className: `${baseClass}__link-label`,
-                href: element.url,
-                rel: "noreferrer",
-                target: "_blank",
-                title: element.url
-            }, element.url), /*#__PURE__*/ React.createElement(Button, {
-                buttonStyle: "icon-label",
-                className: `${baseClass}__link-edit`,
-                icon: "edit",
-                onClick: (e)=>{
-                    e.preventDefault();
-                    setRenderPopup(false);
-                    openModal(drawerSlug);
-                    setRenderModal(true);
+                children: [
+                    renderModal && /*#__PURE__*/ _jsx(LinkDrawer, {
+                        drawerSlug: drawerSlug,
+                        fieldMap: Array.isArray(fieldMap) ? fieldMap : [],
+                        handleClose: ()=>{
+                            toggleModal(drawerSlug);
+                            setRenderModal(false);
+                        },
+                        handleModalSubmit: (fields)=>{
+                            insertChange(editor, fields);
+                            closeModal(drawerSlug);
+                            setRenderModal(false);
+                        },
+                        initialState: initialState
+                    }),
+                    /*#__PURE__*/ _jsx(Popup, {
+                        boundingRef: editorRef,
+                        buttonType: "none",
+                        forceOpen: renderPopup,
+                        horizontalAlign: "left",
+                        onToggleOpen: handleTogglePopup,
+                        render: ()=>/*#__PURE__*/ _jsxs("div", {
+                                className: `${baseClass}__popup`,
+                                children: [
+                                    element.linkType === 'internal' && element.doc?.relationTo && element.doc?.value && /*#__PURE__*/ _jsx(Translation, {
+                                        elements: {
+                                            '0': ({ children })=>/*#__PURE__*/ _jsx("a", {
+                                                    className: `${baseClass}__link-label`,
+                                                    href: `${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`,
+                                                    rel: "noreferrer",
+                                                    target: "_blank",
+                                                    title: `${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`,
+                                                    children: children
+                                                })
+                                        },
+                                        i18nKey: "fields:linkedTo",
+                                        t: t,
+                                        variables: {
+                                            label: getTranslation(config.collections.find(({ slug })=>slug === element.doc.relationTo)?.labels?.singular, i18n)
+                                        }
+                                    }),
+                                    (element.linkType === 'custom' || !element.linkType) && /*#__PURE__*/ _jsx("a", {
+                                        className: `${baseClass}__link-label`,
+                                        href: element.url,
+                                        rel: "noreferrer",
+                                        target: "_blank",
+                                        title: element.url,
+                                        children: element.url
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        buttonStyle: "icon-label",
+                                        className: `${baseClass}__link-edit`,
+                                        icon: "edit",
+                                        onClick: (e)=>{
+                                            e.preventDefault();
+                                            setRenderPopup(false);
+                                            openModal(drawerSlug);
+                                            setRenderModal(true);
+                                        },
+                                        round: true,
+                                        tooltip: t('general:edit')
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        buttonStyle: "icon-label",
+                                        className: `${baseClass}__link-close`,
+                                        icon: "x",
+                                        onClick: (e)=>{
+                                            e.preventDefault();
+                                            unwrapLink(editor);
+                                        },
+                                        round: true,
+                                        tooltip: t('general:remove')
+                                    })
+                                ]
+                            }),
+                        size: "fit-content",
+                        verticalAlign: "bottom"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: [
+                    `${baseClass}__popup-toggler`
+                ].filter(Boolean).join(' '),
+                onClick: ()=>setRenderPopup(true),
+                onKeyDown: (e)=>{
+                    if (e.key === 'Enter') setRenderPopup(true);
                 },
-                round: true,
-                tooltip: t('general:edit')
-            }), /*#__PURE__*/ React.createElement(Button, {
-                buttonStyle: "icon-label",
-                className: `${baseClass}__link-close`,
-                icon: "x",
-                onClick: (e)=>{
-                    e.preventDefault();
-                    unwrapLink(editor);
-                },
-                round: true,
-                tooltip: t('general:remove')
-            })),
-        size: "fit-content",
-        verticalAlign: "bottom"
-    })), /*#__PURE__*/ React.createElement("span", {
-        className: [
-            `${baseClass}__popup-toggler`
-        ].filter(Boolean).join(' '),
-        onClick: ()=>setRenderPopup(true),
-        onKeyDown: (e)=>{
-            if (e.key === 'Enter') setRenderPopup(true);
-        },
-        role: "button",
-        tabIndex: 0
-    }, children));
+                role: "button",
+                tabIndex: 0,
+                children: children
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/elements/link/LinkDrawer/index.js

 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Drawer } from '@payloadcms/ui/elements/Drawer';
@@ -40,23 +41,28 @@ import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
     ]);
-    return /*#__PURE__*/ React.createElement(Drawer, {
+    return /*#__PURE__*/ _jsx(Drawer, {
         className: baseClass,
         slug: drawerSlug,
-        title: t('fields:editLink')
-    }, /*#__PURE__*/ React.createElement(Form, {
-        beforeSubmit: [
-            onChange
-        ],
-        disableValidationOnSubmit: true,
-        initialState: initialState,
-        onChange: [
-            onChange
-        ],
-        onSubmit: handleModalSubmit
-    }, /*#__PURE__*/ React.createElement(RenderFields, {
-        fieldMap: fieldMap,
-        forceRender: true,
-        path: "",
-        readOnly: false,
-        schemaPath: ""
-    }), /*#__PURE__*/ React.createElement(LinkSubmit, null)));
+        title: t('fields:editLink'),
+        children: /*#__PURE__*/ _jsxs(Form, {
+            beforeSubmit: [
+                onChange
+            ],
+            disableValidationOnSubmit: true,
+            initialState: initialState,
+            onChange: [
+                onChange
+            ],
+            onSubmit: handleModalSubmit,
+            children: [
+                /*#__PURE__*/ _jsx(RenderFields, {
+                    fieldMap: fieldMap,
+                    forceRender: true,
+                    path: "",
+                    readOnly: false,
+                    schemaPath: ""
+                }),
+                /*#__PURE__*/ _jsx(LinkSubmit, {})
+            ]
+        })
+    });
 };
@@ -80,7 +86,8 @@ const LinkSubmit = ()=>{
     });
-    return /*#__PURE__*/ React.createElement(FormSubmit, {
-        ref: ref
-    }, t('general:submit'));
+    return /*#__PURE__*/ _jsx(FormSubmit, {
+        ref: ref,
+        children: t('general:submit')
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/elements/ListButton.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback } from 'react';
@@ -17,3 +18,3 @@ import { useSlate } from 'slate-react';
     ]);
-    return /*#__PURE__*/ React.createElement("button", {
+    return /*#__PURE__*/ _jsx("button", {
         className: [
@@ -25,6 +26,7 @@ baseClass,
         onClick: onClick || defaultOnClick,
-        type: "button"
-    }, children);
+        type: "button",
+        children: children
+    });
 };
 
 //# sourceMappingURL=ListButton.js.map

dist/field/elements/ol/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -8,5 +9,6 @@ import { OLIcon } from '../../icons/OrderedList/index.js';
     name,
-    Button: ()=>/*#__PURE__*/ React.createElement(ListButton, {
-            format: name
-        }, /*#__PURE__*/ React.createElement(OLIcon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(ListButton, {
+            format: name,
+            children: /*#__PURE__*/ _jsx(OLIcon, {})
+        }),
     Element: OrderedList
@@ -13,0 +15,0 @@ };

dist/field/elements/ol/OrderedList.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -7,8 +8,9 @@ import { useElement } from '../../providers/ElementProvider.js';
     const { attributes, children } = useElement();
-    return /*#__PURE__*/ React.createElement("ol", {
+    return /*#__PURE__*/ _jsx("ol", {
         className: "rich-text-ol",
-        ...attributes
-    }, children);
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=OrderedList.js.map

dist/field/elements/relationship/Button/index.js

 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useListDrawer } from '@payloadcms/ui/elements/ListDrawer';
@@ -55,18 +56,31 @@ import { useTranslation } from '@payloadcms/ui/providers/Translation';
     ]);
-    return /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement(ListDrawerToggler, null, /*#__PURE__*/ React.createElement(ElementButton, {
-        className: baseClass,
-        el: "div",
-        format: "relationship",
-        onClick: ()=>{
-        // do nothing
-        },
-        tooltip: t('fields:addRelationship')
-    }, /*#__PURE__*/ React.createElement(RelationshipIcon, null))), /*#__PURE__*/ React.createElement(ListDrawer, {
-        onSelect: onSelect
-    }));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(ListDrawerToggler, {
+                children: /*#__PURE__*/ _jsx(ElementButton, {
+                    className: baseClass,
+                    el: "div",
+                    format: "relationship",
+                    onClick: ()=>{
+                    // do nothing
+                    },
+                    tooltip: t('fields:addRelationship'),
+                    children: /*#__PURE__*/ _jsx(RelationshipIcon, {})
+                })
+            }),
+            /*#__PURE__*/ _jsx(ListDrawer, {
+                onSelect: onSelect
+            })
+        ]
+    });
 };
 export const Button = (props)=>{
-    return /*#__PURE__*/ React.createElement(EnabledRelationshipsCondition, props, /*#__PURE__*/ React.createElement(RelationshipButton, props));
+    return /*#__PURE__*/ _jsx(EnabledRelationshipsCondition, {
+        ...props,
+        children: /*#__PURE__*/ _jsx(RelationshipButton, {
+            ...props
+        })
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/elements/relationship/Element/index.js

 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
@@ -110,3 +111,3 @@ import { Button } from '@payloadcms/ui/elements/Button';
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: [
@@ -117,49 +118,73 @@ baseClass,
         contentEditable: false,
-        ...attributes
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrap`
-    }, /*#__PURE__*/ React.createElement("p", {
-        className: `${baseClass}__label`
-    }, t('fields:labelRelationship', {
-        label: getTranslation(relatedCollection.labels.singular, i18n)
-    })), /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
-        className: `${baseClass}__doc-drawer-toggler`
-    }, /*#__PURE__*/ React.createElement("p", {
-        className: `${baseClass}__title`
-    }, data[relatedCollection?.admin?.useAsTitle || 'id']))), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__actions`
-    }, /*#__PURE__*/ React.createElement(ListDrawerToggler, {
-        className: `${baseClass}__list-drawer-toggler`,
-        disabled: fieldProps?.readOnly
-    }, /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        disabled: fieldProps?.readOnly,
-        el: "div",
-        icon: "swap",
-        onClick: ()=>{
-        // do nothing
-        },
-        round: true,
-        tooltip: t('fields:swapRelationship')
-    })), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__removeButton`,
-        disabled: fieldProps?.readOnly,
-        icon: "x",
-        onClick: (e)=>{
-            e.preventDefault();
-            removeRelationship();
-        },
-        round: true,
-        tooltip: t('fields:removeRelationship')
-    })), value?.id && /*#__PURE__*/ React.createElement(DocumentDrawer, {
-        onSave: updateRelationship
-    }), /*#__PURE__*/ React.createElement(ListDrawer, {
-        onSelect: swapRelationship
-    }), children);
+        ...attributes,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__wrap`,
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        className: `${baseClass}__label`,
+                        children: t('fields:labelRelationship', {
+                            label: getTranslation(relatedCollection.labels.singular, i18n)
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(DocumentDrawerToggler, {
+                        className: `${baseClass}__doc-drawer-toggler`,
+                        children: /*#__PURE__*/ _jsx("p", {
+                            className: `${baseClass}__title`,
+                            children: data[relatedCollection?.admin?.useAsTitle || 'id']
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__actions`,
+                children: [
+                    /*#__PURE__*/ _jsx(ListDrawerToggler, {
+                        className: `${baseClass}__list-drawer-toggler`,
+                        disabled: fieldProps?.readOnly,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            buttonStyle: "icon-label",
+                            disabled: fieldProps?.readOnly,
+                            el: "div",
+                            icon: "swap",
+                            onClick: ()=>{
+                            // do nothing
+                            },
+                            round: true,
+                            tooltip: t('fields:swapRelationship')
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        buttonStyle: "icon-label",
+                        className: `${baseClass}__removeButton`,
+                        disabled: fieldProps?.readOnly,
+                        icon: "x",
+                        onClick: (e)=>{
+                            e.preventDefault();
+                            removeRelationship();
+                        },
+                        round: true,
+                        tooltip: t('fields:removeRelationship')
+                    })
+                ]
+            }),
+            value?.id && /*#__PURE__*/ _jsx(DocumentDrawer, {
+                onSave: updateRelationship
+            }),
+            /*#__PURE__*/ _jsx(ListDrawer, {
+                onSelect: swapRelationship
+            }),
+            children
+        ]
+    });
 };
 export const Element = (props)=>{
-    return /*#__PURE__*/ React.createElement(EnabledRelationshipsCondition, props, /*#__PURE__*/ React.createElement(RelationshipElement, props));
+    return /*#__PURE__*/ _jsx(EnabledRelationshipsCondition, {
+        ...props,
+        children: /*#__PURE__*/ _jsx(RelationshipElement, {
+            ...props
+        })
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/elements/textAlign/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
@@ -9,12 +10,21 @@ import { AlignCenterIcon } from '../../icons/AlignCenter/index.js';
     Button: ()=>{
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ElementButton, {
-            format: "left",
-            type: "textAlign"
-        }, /*#__PURE__*/ React.createElement(AlignLeftIcon, null)), /*#__PURE__*/ React.createElement(ElementButton, {
-            format: "center",
-            type: "textAlign"
-        }, /*#__PURE__*/ React.createElement(AlignCenterIcon, null)), /*#__PURE__*/ React.createElement(ElementButton, {
-            format: "right",
-            type: "textAlign"
-        }, /*#__PURE__*/ React.createElement(AlignRightIcon, null)));
+        return /*#__PURE__*/ _jsxs(React.Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(ElementButton, {
+                    format: "left",
+                    type: "textAlign",
+                    children: /*#__PURE__*/ _jsx(AlignLeftIcon, {})
+                }),
+                /*#__PURE__*/ _jsx(ElementButton, {
+                    format: "center",
+                    type: "textAlign",
+                    children: /*#__PURE__*/ _jsx(AlignCenterIcon, {})
+                }),
+                /*#__PURE__*/ _jsx(ElementButton, {
+                    format: "right",
+                    type: "textAlign",
+                    children: /*#__PURE__*/ _jsx(AlignRightIcon, {})
+                })
+            ]
+        });
     },
@@ -21,0 +31,0 @@ Element: ()=>null

dist/field/elements/ul/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -8,5 +9,6 @@ import { ULIcon } from '../../icons/UnorderedList/index.js';
     name,
-    Button: ()=>/*#__PURE__*/ React.createElement(ListButton, {
-            format: name
-        }, /*#__PURE__*/ React.createElement(ULIcon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(ListButton, {
+            format: name,
+            children: /*#__PURE__*/ _jsx(ULIcon, {})
+        }),
     Element: UnorderedList
@@ -13,0 +15,0 @@ };

dist/field/elements/ul/UnorderedList.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -7,8 +8,9 @@ import { useElement } from '../../providers/ElementProvider.js';
     const { attributes, children } = useElement();
-    return /*#__PURE__*/ React.createElement("ul", {
+    return /*#__PURE__*/ _jsx("ul", {
         className: "rich-text-ul",
-        ...attributes
-    }, children);
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=UnorderedList.js.map

dist/field/elements/upload/Button/index.js

 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useListDrawer } from '@payloadcms/ui/elements/ListDrawer';
@@ -46,21 +47,32 @@ import { useTranslation } from '@payloadcms/ui/providers/Translation';
     ]);
-    return /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement(ListDrawerToggler, null, /*#__PURE__*/ React.createElement(ElementButton, {
-        className: baseClass,
-        el: "div",
-        format: "upload",
-        onClick: ()=>{
-        // do nothing
-        },
-        tooltip: t('fields:addUpload')
-    }, /*#__PURE__*/ React.createElement(UploadIcon, null))), /*#__PURE__*/ React.createElement(ListDrawer, {
-        onSelect: onSelect
-    }));
+    return /*#__PURE__*/ _jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(ListDrawerToggler, {
+                children: /*#__PURE__*/ _jsx(ElementButton, {
+                    className: baseClass,
+                    el: "div",
+                    format: "upload",
+                    onClick: ()=>{
+                    // do nothing
+                    },
+                    tooltip: t('fields:addUpload'),
+                    children: /*#__PURE__*/ _jsx(UploadIcon, {})
+                })
+            }),
+            /*#__PURE__*/ _jsx(ListDrawer, {
+                onSelect: onSelect
+            })
+        ]
+    });
 };
 export const Button = (props)=>{
-    return /*#__PURE__*/ React.createElement(EnabledRelationshipsCondition, {
+    return /*#__PURE__*/ _jsx(EnabledRelationshipsCondition, {
         ...props,
-        uploads: true
-    }, /*#__PURE__*/ React.createElement(UploadButton, props));
+        uploads: true,
+        children: /*#__PURE__*/ _jsx(UploadButton, {
+            ...props
+        })
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/elements/upload/Element/index.js

 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
@@ -105,3 +106,3 @@ import { Button } from '@payloadcms/ui/elements/Button';
     const customFieldsMap = fieldProps.richTextComponentMap.get(relatedFieldSchemaPath);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: [
@@ -112,78 +113,113 @@ baseClass,
         contentEditable: false,
-        ...attributes
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__card`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__topRow`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__thumbnail`
-    }, thumbnailSRC ? /*#__PURE__*/ React.createElement("img", {
-        alt: data?.filename,
-        src: thumbnailSRC
-    }) : /*#__PURE__*/ React.createElement(File, null)), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__topRowRightPanel`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__collectionLabel`
-    }, getTranslation(relatedCollection.labels.singular, i18n)), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__actions`
-    }, Boolean(customFieldsMap) && /*#__PURE__*/ React.createElement(DrawerToggler, {
-        className: `${baseClass}__upload-drawer-toggler`,
-        disabled: fieldProps?.readOnly,
-        slug: drawerSlug
-    }, /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        el: "div",
-        icon: "edit",
-        onClick: (e)=>{
-            e.preventDefault();
-        },
-        round: true,
-        tooltip: t('fields:editRelationship')
-    })), /*#__PURE__*/ React.createElement(ListDrawerToggler, {
-        className: `${baseClass}__list-drawer-toggler`,
-        disabled: fieldProps?.readOnly
-    }, /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        disabled: fieldProps?.readOnly,
-        el: "div",
-        icon: "swap",
-        onClick: ()=>{
-        // do nothing
-        },
-        round: true,
-        tooltip: t('fields:swapUpload')
-    })), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "icon-label",
-        className: `${baseClass}__removeButton`,
-        disabled: fieldProps?.readOnly,
-        icon: "x",
-        onClick: (e)=>{
-            e.preventDefault();
-            removeUpload();
-        },
-        round: true,
-        tooltip: t('fields:removeUpload')
-    })))), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__bottomRow`
-    }, /*#__PURE__*/ React.createElement(DocumentDrawerToggler, {
-        className: `${baseClass}__doc-drawer-toggler`
-    }, /*#__PURE__*/ React.createElement("strong", null, data?.filename)))), children, value?.id && /*#__PURE__*/ React.createElement(DocumentDrawer, {
-        onSave: updateUpload
-    }), /*#__PURE__*/ React.createElement(ListDrawer, {
-        onSelect: swapUpload
-    }), /*#__PURE__*/ React.createElement(UploadDrawer, {
-        drawerSlug,
-        element,
-        fieldProps,
-        relatedCollection,
-        schemaPath
-    }));
+        ...attributes,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__card`,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: `${baseClass}__topRow`,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: `${baseClass}__thumbnail`,
+                                children: thumbnailSRC ? /*#__PURE__*/ _jsx("img", {
+                                    alt: data?.filename,
+                                    src: thumbnailSRC
+                                }) : /*#__PURE__*/ _jsx(File, {})
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: `${baseClass}__topRowRightPanel`,
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: `${baseClass}__collectionLabel`,
+                                        children: getTranslation(relatedCollection.labels.singular, i18n)
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: `${baseClass}__actions`,
+                                        children: [
+                                            Boolean(customFieldsMap) && /*#__PURE__*/ _jsx(DrawerToggler, {
+                                                className: `${baseClass}__upload-drawer-toggler`,
+                                                disabled: fieldProps?.readOnly,
+                                                slug: drawerSlug,
+                                                children: /*#__PURE__*/ _jsx(Button, {
+                                                    buttonStyle: "icon-label",
+                                                    el: "div",
+                                                    icon: "edit",
+                                                    onClick: (e)=>{
+                                                        e.preventDefault();
+                                                    },
+                                                    round: true,
+                                                    tooltip: t('fields:editRelationship')
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(ListDrawerToggler, {
+                                                className: `${baseClass}__list-drawer-toggler`,
+                                                disabled: fieldProps?.readOnly,
+                                                children: /*#__PURE__*/ _jsx(Button, {
+                                                    buttonStyle: "icon-label",
+                                                    disabled: fieldProps?.readOnly,
+                                                    el: "div",
+                                                    icon: "swap",
+                                                    onClick: ()=>{
+                                                    // do nothing
+                                                    },
+                                                    round: true,
+                                                    tooltip: t('fields:swapUpload')
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                buttonStyle: "icon-label",
+                                                className: `${baseClass}__removeButton`,
+                                                disabled: fieldProps?.readOnly,
+                                                icon: "x",
+                                                onClick: (e)=>{
+                                                    e.preventDefault();
+                                                    removeUpload();
+                                                },
+                                                round: true,
+                                                tooltip: t('fields:removeUpload')
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__bottomRow`,
+                        children: /*#__PURE__*/ _jsx(DocumentDrawerToggler, {
+                            className: `${baseClass}__doc-drawer-toggler`,
+                            children: /*#__PURE__*/ _jsx("strong", {
+                                children: data?.filename
+                            })
+                        })
+                    })
+                ]
+            }),
+            children,
+            value?.id && /*#__PURE__*/ _jsx(DocumentDrawer, {
+                onSave: updateUpload
+            }),
+            /*#__PURE__*/ _jsx(ListDrawer, {
+                onSelect: swapUpload
+            }),
+            /*#__PURE__*/ _jsx(UploadDrawer, {
+                drawerSlug,
+                element,
+                fieldProps,
+                relatedCollection,
+                schemaPath
+            })
+        ]
+    });
 };
 export const Element = (props)=>{
-    return /*#__PURE__*/ React.createElement(EnabledRelationshipsCondition, {
+    return /*#__PURE__*/ _jsx(EnabledRelationshipsCondition, {
         ...props,
-        uploads: true
-    }, /*#__PURE__*/ React.createElement(UploadElement, props));
+        uploads: true,
+        children: /*#__PURE__*/ _jsx(UploadElement, {
+            ...props
+        })
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/elements/upload/Element/UploadDrawer/index.js

 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as facelessUIImport from '@faceless-ui/modal';
@@ -94,25 +95,32 @@ import { getTranslation } from '@payloadcms/translations';
     ]);
-    return /*#__PURE__*/ React.createElement(Drawer, {
+    return /*#__PURE__*/ _jsx(Drawer, {
         slug: drawerSlug,
         title: t('general:editLabel', {
             label: getTranslation(relatedCollection.labels.singular, i18n)
+        }),
+        children: /*#__PURE__*/ _jsxs(Form, {
+            beforeSubmit: [
+                onChange
+            ],
+            disableValidationOnSubmit: true,
+            initialState: initialState,
+            onChange: [
+                onChange
+            ],
+            onSubmit: handleUpdateEditData,
+            children: [
+                /*#__PURE__*/ _jsx(RenderFields, {
+                    fieldMap: Array.isArray(fieldMap) ? fieldMap : [],
+                    path: "",
+                    readOnly: false,
+                    schemaPath: ""
+                }),
+                /*#__PURE__*/ _jsx(FormSubmit, {
+                    children: t('fields:saveChanges')
+                })
+            ]
         })
-    }, /*#__PURE__*/ React.createElement(Form, {
-        beforeSubmit: [
-            onChange
-        ],
-        disableValidationOnSubmit: true,
-        initialState: initialState,
-        onChange: [
-            onChange
-        ],
-        onSubmit: handleUpdateEditData
-    }, /*#__PURE__*/ React.createElement(RenderFields, {
-        fieldMap: Array.isArray(fieldMap) ? fieldMap : [],
-        path: "",
-        readOnly: false,
-        schemaPath: ""
-    }), /*#__PURE__*/ React.createElement(FormSubmit, null, t('fields:saveChanges'))));
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/icons/AlignCenter/index.js

@@ -0,11 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-export const AlignCenterIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const AlignCenterIcon = ()=>/*#__PURE__*/ _jsx("svg", {
         fill: "currentColor",
         height: "1em",
         viewBox: "0 0 1024 1024",
-        width: "1em"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M264 230h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H264c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm496 424c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H264c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496zm144 140H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
-    }));
+        width: "1em",
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M264 230h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H264c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm496 424c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H264c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496zm144 140H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
+        })
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/AlignLeft/index.js

@@ -0,11 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-export const AlignLeftIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const AlignLeftIcon = ()=>/*#__PURE__*/ _jsx("svg", {
         fill: "currentColor",
         height: "1em",
         viewBox: "0 0 1024 1024",
-        width: "1em"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M120 230h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 424h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm784 140H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
-    }));
+        width: "1em",
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M120 230h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 424h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm784 140H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
+        })
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/AlignRight/index.js

@@ -0,11 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-export const AlignRightIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const AlignRightIcon = ()=>/*#__PURE__*/ _jsx("svg", {
         fill: "currentColor",
         height: "1em",
         viewBox: "0 0 1024 1024",
-        width: "1em"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M904 158H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 424H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 212H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
-    }));
+        width: "1em",
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M904 158H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 424H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 212H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-424H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
+        })
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/Blockquote/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const BlockquoteIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const BlockquoteIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic blockquote-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"
-    }), /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0z",
-        fill: "none"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/Bold/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const BoldIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const BoldIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic bold-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"
-    }), /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0z",
-        fill: "none"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/Code/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-export const CodeIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const CodeIcon = ()=>/*#__PURE__*/ _jsx("svg", {
         "aria-hidden": "true",
@@ -8,8 +9,9 @@ className: "graphic inline-code-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M7.375 16.781l1.25-1.562L4.601 12l4.024-3.219-1.25-1.562-5 4a1 1 0 000 1.562l5 4zm9.25-9.562l-1.25 1.562L19.399 12l-4.024 3.219 1.25 1.562 5-4a1 1 0 000-1.562l-5-4zM14.976 3.216l-4 18-1.953-.434 4-18z"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/ _jsx("path", {
+            className: "fill",
+            d: "M7.375 16.781l1.25-1.562L4.601 12l4.024-3.219-1.25-1.562-5 4a1 1 0 000 1.562l5 4zm9.25-9.562l-1.25 1.562L19.399 12l-4.024 3.219 1.25 1.562 5-4a1 1 0 000-1.562l-5-4zM14.976 3.216l-4 18-1.953-.434 4-18z"
+        })
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/headings/H1/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const H1Icon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const H1Icon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic h1-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0z",
-        fill: "none"
-    }), /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-2V9h-2V7h4v10z"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-2V9h-2V7h4v10z"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/headings/H2/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const H2Icon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const H2Icon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic h2-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0z",
-        fill: "none"
-    }), /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8a2 2 0 01-2 2h-2v2h4v2H9v-4a2 2 0 012-2h2V9H9V7h4a2 2 0 012 2v2z"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8a2 2 0 01-2 2h-2v2h4v2H9v-4a2 2 0 012-2h2V9H9V7h4a2 2 0 012 2v2z"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/headings/H3/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const H3Icon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const H3Icon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic h3-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M.01 0h24v24h-24z",
-        fill: "none"
-    }), /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M19.01 3h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7.5c0 .83-.67 1.5-1.5 1.5.83 0 1.5.67 1.5 1.5V15a2 2 0 01-2 2h-4v-2h4v-2h-2v-2h2V9h-4V7h4a2 2 0 012 2v1.5z"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M.01 0h24v24h-24z",
+                fill: "none"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M19.01 3h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7.5c0 .83-.67 1.5-1.5 1.5.83 0 1.5.67 1.5 1.5V15a2 2 0 01-2 2h-4v-2h4v-2h-2v-2h2V9h-4V7h4a2 2 0 012 2v1.5z"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/headings/H4/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const H4Icon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const H4Icon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic h4-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0z",
-        fill: "none"
-    }), /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 14h-2v-4H9V7h2v4h2V7h2v10z"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 14h-2v-4H9V7h2v4h2V7h2v10z"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/headings/H5/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const H5Icon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const H5Icon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic h5-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0z",
-        fill: "none"
-    }), /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h2a2 2 0 012 2v2a2 2 0 01-2 2H9v-2h4v-2H9V7h6v2z"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h2a2 2 0 012 2v2a2 2 0 01-2 2H9v-2h4v-2H9V7h6v2z"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/headings/H6/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const H6Icon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const H6Icon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic h6-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0z",
-        fill: "none"
-    }), /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M11 15h2v-2h-2v2zm8-12H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V9a2 2 0 012-2h4v2z"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M11 15h2v-2h-2v2zm8-12H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V9a2 2 0 012-2h4v2z"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/IndentLeft/index.js

@@ -0,30 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import './index.scss';
-export const IndentLeft = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const IndentLeft = ()=>/*#__PURE__*/ _jsxs("svg", {
         className: "icon icon--indent-left",
         viewBox: "0 0 25 25",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M16.005 9.61502L21.005 13.1864L21.005 6.04361L16.005 9.61502Z"
-    }), /*#__PURE__*/ React.createElement("rect", {
-        className: "fill",
-        height: "2.15625",
-        width: "9.0675",
-        x: "5",
-        y: "5.68199"
-    }), /*#__PURE__*/ React.createElement("rect", {
-        className: "fill",
-        height: "2.15625",
-        width: "9.0675",
-        x: "5",
-        y: "11.4738"
-    }), /*#__PURE__*/ React.createElement("rect", {
-        className: "fill",
-        height: "2.15625",
-        width: "16.005",
-        x: "5",
-        y: "17.2656"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M16.005 9.61502L21.005 13.1864L21.005 6.04361L16.005 9.61502Z"
+            }),
+            /*#__PURE__*/ _jsx("rect", {
+                className: "fill",
+                height: "2.15625",
+                width: "9.0675",
+                x: "5",
+                y: "5.68199"
+            }),
+            /*#__PURE__*/ _jsx("rect", {
+                className: "fill",
+                height: "2.15625",
+                width: "9.0675",
+                x: "5",
+                y: "11.4738"
+            }),
+            /*#__PURE__*/ _jsx("rect", {
+                className: "fill",
+                height: "2.15625",
+                width: "16.005",
+                x: "5",
+                y: "17.2656"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/IndentRight/index.js

@@ -0,30 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import './index.scss';
-export const IndentRight = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const IndentRight = ()=>/*#__PURE__*/ _jsxs("svg", {
         className: "icon icon--indent-right",
         viewBox: "0 0 25 25",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M10 9.61502L5 6.04361L5 13.1864L10 9.61502Z"
-    }), /*#__PURE__*/ React.createElement("rect", {
-        className: "fill",
-        height: "2.15625",
-        width: "9.0675",
-        x: "11.9375",
-        y: "5.68199"
-    }), /*#__PURE__*/ React.createElement("rect", {
-        className: "fill",
-        height: "2.15625",
-        width: "9.0675",
-        x: "11.9375",
-        y: "11.4738"
-    }), /*#__PURE__*/ React.createElement("rect", {
-        className: "fill",
-        height: "2.15625",
-        width: "16.005",
-        x: "5",
-        y: "17.2656"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M10 9.61502L5 6.04361L5 13.1864L10 9.61502Z"
+            }),
+            /*#__PURE__*/ _jsx("rect", {
+                className: "fill",
+                height: "2.15625",
+                width: "9.0675",
+                x: "11.9375",
+                y: "5.68199"
+            }),
+            /*#__PURE__*/ _jsx("rect", {
+                className: "fill",
+                height: "2.15625",
+                width: "9.0675",
+                x: "11.9375",
+                y: "11.4738"
+            }),
+            /*#__PURE__*/ _jsx("rect", {
+                className: "fill",
+                height: "2.15625",
+                width: "16.005",
+                x: "5",
+                y: "17.2656"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/Italic/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const ItalicIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const ItalicIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic italic-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0z",
-        fill: "none"
-    }), /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/Link/index.js

@@ -0,4 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import './index.scss';
-export const LinkIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const LinkIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -9,11 +10,15 @@ className: "graphic link icon icon--link",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0z",
-        fill: "none"
-    }), /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/OrderedList/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const OLIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const OLIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic ordered-list-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"
-    }), /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0z",
-        fill: "none"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/Relationship/index.js

@@ -0,24 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import './index.scss';
-export const RelationshipIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const RelationshipIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
         className: "icon icon--relationship",
         viewBox: "0 0 25 25",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        className: "stroke",
-        d: "M19.0597 14.9691L19.0597 19.0946L6.01681 19.0946L6.01681 6.03028L10.0948 6.03028",
-        strokeWidth: "2"
-    }), /*#__PURE__*/ React.createElement("path", {
-        className: "stroke",
-        d: "M19.0597 11.0039L19.0597 6.00387L14.0597 6.00387",
-        strokeWidth: "2"
-    }), /*#__PURE__*/ React.createElement("line", {
-        className: "stroke",
-        strokeWidth: "2",
-        x1: "18.7061",
-        x2: "13.0493",
-        y1: "6.40767",
-        y2: "12.0645"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                className: "stroke",
+                d: "M19.0597 14.9691L19.0597 19.0946L6.01681 19.0946L6.01681 6.03028L10.0948 6.03028",
+                strokeWidth: "2"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: "stroke",
+                d: "M19.0597 11.0039L19.0597 6.00387L14.0597 6.00387",
+                strokeWidth: "2"
+            }),
+            /*#__PURE__*/ _jsx("line", {
+                className: "stroke",
+                strokeWidth: "2",
+                x1: "18.7061",
+                x2: "13.0493",
+                y1: "6.40767",
+                y2: "12.0645"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/Strikethrough/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const StrikethroughIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const StrikethroughIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic strikethrough-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0z",
-        fill: "none"
-    }), /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/Underline/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const UnderlineIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const UnderlineIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic underline-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0z",
-        fill: "none"
-    }), /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0z",
+                fill: "none"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/UnorderedList/index.js

@@ -0,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-export const ULIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const ULIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
         "aria-hidden": "true",
@@ -8,11 +9,15 @@ className: "graphic unordered-list-icon",
         viewBox: "0 0 24 24",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"
-    }), /*#__PURE__*/ React.createElement("path", {
-        d: "M0 0h24v24H0V0z",
-        fill: "none"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M0 0h24v24H0V0z",
+                fill: "none"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/icons/Upload/index.js

@@ -0,17 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import './index.scss';
-export const UploadIcon = ()=>/*#__PURE__*/ React.createElement("svg", {
+export const UploadIcon = ()=>/*#__PURE__*/ _jsxs("svg", {
         className: "icon icon--upload",
         viewBox: "0 0 25 25",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/ React.createElement("path", {
-        className: "fill",
-        d: "M20.06,5.12h-15v15h15Zm-2,2v7L15.37,11l-3.27,4.1-2-1.58-3,3.74V7.12Z"
-    }), /*#__PURE__*/ React.createElement("circle", {
-        className: "fill",
-        cx: "9.69",
-        cy: "9.47",
-        r: "0.97"
-    }));
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                className: "fill",
+                d: "M20.06,5.12h-15v15h15Zm-2,2v7L15.37,11l-3.27,4.1-2-1.58-3,3.74V7.12Z"
+            }),
+            /*#__PURE__*/ _jsx("circle", {
+                className: "fill",
+                cx: "9.69",
+                cy: "9.47",
+                r: "0.97"
+            })
+        ]
+    });
 
 //# sourceMappingURL=index.js.map

dist/field/index.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect';
@@ -39,20 +40,23 @@ import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
     if (!hasLoadedPlugins) {
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, Array.isArray(features.plugins) && features.plugins.map((Plugin, i)=>{
-            return /*#__PURE__*/ React.createElement(React.Fragment, {
-                key: i
-            }, Plugin);
-        }));
+        return /*#__PURE__*/ _jsx(React.Fragment, {
+            children: Array.isArray(features.plugins) && features.plugins.map((Plugin, i)=>{
+                return /*#__PURE__*/ _jsx(React.Fragment, {
+                    children: Plugin
+                }, i);
+            })
+        });
     }
-    return /*#__PURE__*/ React.createElement(Suspense, {
-        fallback: /*#__PURE__*/ React.createElement(ShimmerEffect, {
+    return /*#__PURE__*/ _jsx(Suspense, {
+        fallback: /*#__PURE__*/ _jsx(ShimmerEffect, {
             height: "35vh"
+        }),
+        children: /*#__PURE__*/ _jsx(RichTextEditor, {
+            ...props,
+            elements: features.elements,
+            leaves: features.leaves,
+            plugins: plugins
         })
-    }, /*#__PURE__*/ React.createElement(RichTextEditor, {
-        ...props,
-        elements: features.elements,
-        leaves: features.leaves,
-        plugins: plugins
-    }));
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/leaves/bold/Bold/index.d.ts

@@ -1,3 +0,2 @@
-import React from 'react';
-export declare const Bold: () => React.JSX.Element;
+export declare const Bold: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

dist/field/leaves/bold/Bold/index.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,5 +7,8 @@ import { useLeaf } from '../../../providers/LeafProvider.js';
     const { attributes, children } = useLeaf();
-    return /*#__PURE__*/ React.createElement("strong", attributes, children);
+    return /*#__PURE__*/ _jsx("strong", {
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/leaves/bold/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -7,5 +8,6 @@ import { BoldIcon } from '../../icons/Bold/index.js';
     name: 'bold',
-    Button: ()=>/*#__PURE__*/ React.createElement(LeafButton, {
-            format: "bold"
-        }, /*#__PURE__*/ React.createElement(BoldIcon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(LeafButton, {
+            format: "bold",
+            children: /*#__PURE__*/ _jsx(BoldIcon, {})
+        }),
     Leaf: Bold
@@ -12,0 +14,0 @@ };

dist/field/leaves/Button.d.ts

@@ -1,2 +0,1 @@
-import React from 'react';
 import '../buttons.scss';
@@ -6,3 +5,3 @@ export declare const LeafButton: ({ children, format }: {
     format: any;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

dist/field/leaves/Button.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -10,3 +11,3 @@ import { useSlate } from 'slate-react';
     const editor = useSlate();
-    return /*#__PURE__*/ React.createElement("button", {
+    return /*#__PURE__*/ _jsx("button", {
         className: [
@@ -20,6 +21,7 @@ baseClass,
         },
-        type: "button"
-    }, children);
+        type: "button",
+        children: children
+    });
 };
 
 //# sourceMappingURL=Button.js.map

dist/field/leaves/code/Code/index.d.ts

@@ -1,3 +0,2 @@
-import React from 'react';
-export declare const Code: () => React.JSX.Element;
+export declare const Code: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

dist/field/leaves/code/Code/index.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,5 +7,8 @@ import { useLeaf } from '../../../providers/LeafProvider.js';
     const { attributes, children } = useLeaf();
-    return /*#__PURE__*/ React.createElement("code", attributes, children);
+    return /*#__PURE__*/ _jsx("code", {
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/leaves/code/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -7,5 +8,6 @@ import { CodeIcon } from '../../icons/Code/index.js';
     name: 'code',
-    Button: ()=>/*#__PURE__*/ React.createElement(LeafButton, {
-            format: "code"
-        }, /*#__PURE__*/ React.createElement(CodeIcon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(LeafButton, {
+            format: "code",
+            children: /*#__PURE__*/ _jsx(CodeIcon, {})
+        }),
     Leaf: Code
@@ -12,0 +14,0 @@ };

dist/field/leaves/italic/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -7,5 +8,6 @@ import { ItalicIcon } from '../../icons/Italic/index.js';
     name: 'italic',
-    Button: ()=>/*#__PURE__*/ React.createElement(LeafButton, {
-            format: "italic"
-        }, /*#__PURE__*/ React.createElement(ItalicIcon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(LeafButton, {
+            format: "italic",
+            children: /*#__PURE__*/ _jsx(ItalicIcon, {})
+        }),
     Leaf: Italic
@@ -12,0 +14,0 @@ };

dist/field/leaves/italic/Italic/index.d.ts

@@ -1,3 +0,2 @@
-import React from 'react';
-export declare const Italic: () => React.JSX.Element;
+export declare const Italic: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

dist/field/leaves/italic/Italic/index.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,5 +7,8 @@ import { useLeaf } from '../../../providers/LeafProvider.js';
     const { attributes, children } = useLeaf();
-    return /*#__PURE__*/ React.createElement("em", attributes, children);
+    return /*#__PURE__*/ _jsx("em", {
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/leaves/strikethrough/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -7,5 +8,6 @@ import { StrikethroughIcon } from '../../icons/Strikethrough/index.js';
     name: 'strikethrough',
-    Button: ()=>/*#__PURE__*/ React.createElement(LeafButton, {
-            format: "strikethrough"
-        }, /*#__PURE__*/ React.createElement(StrikethroughIcon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(LeafButton, {
+            format: "strikethrough",
+            children: /*#__PURE__*/ _jsx(StrikethroughIcon, {})
+        }),
     Leaf: Strikethrough
@@ -12,0 +14,0 @@ };

dist/field/leaves/strikethrough/Strikethrough/index.d.ts

@@ -1,3 +0,2 @@
-import React from 'react';
-export declare const Strikethrough: () => React.JSX.Element;
+export declare const Strikethrough: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

dist/field/leaves/strikethrough/Strikethrough/index.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,5 +7,8 @@ import { useLeaf } from '../../../providers/LeafProvider.js';
     const { attributes, children } = useLeaf();
-    return /*#__PURE__*/ React.createElement("del", attributes, children);
+    return /*#__PURE__*/ _jsx("del", {
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/leaves/underline/index.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -7,5 +8,6 @@ import { UnderlineIcon } from '../../icons/Underline/index.js';
     name: 'underline',
-    Button: ()=>/*#__PURE__*/ React.createElement(LeafButton, {
-            format: "underline"
-        }, /*#__PURE__*/ React.createElement(UnderlineIcon, null)),
+    Button: ()=>/*#__PURE__*/ _jsx(LeafButton, {
+            format: "underline",
+            children: /*#__PURE__*/ _jsx(UnderlineIcon, {})
+        }),
     Leaf: Underline
@@ -12,0 +14,0 @@ };

dist/field/leaves/underline/Underline/index.d.ts

@@ -1,3 +0,2 @@
-import React from 'react';
-export declare const Underline: () => React.JSX.Element;
+export declare const Underline: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

dist/field/leaves/underline/Underline/index.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -6,5 +7,8 @@ import { useLeaf } from '../../../providers/LeafProvider.js';
     const { attributes, children } = useLeaf();
-    return /*#__PURE__*/ React.createElement("u", attributes, children);
+    return /*#__PURE__*/ _jsx("u", {
+        ...attributes,
+        children: children
+    });
 };
 
 //# sourceMappingURL=index.js.map

dist/field/providers/ElementButtonProvider.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -10,7 +11,8 @@ const ElementButtonContext = /*#__PURE__*/ React.createContext({
     const { children, ...rest } = props;
-    return /*#__PURE__*/ React.createElement(ElementButtonContext.Provider, {
+    return /*#__PURE__*/ _jsx(ElementButtonContext.Provider, {
         value: {
             ...rest
-        }
-    }, children);
+        },
+        children: children
+    });
 };
@@ -17,0 +19,0 @@ export const useElementButton = ()=>{

dist/field/providers/ElementProvider.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -14,8 +15,9 @@ const ElementContext = /*#__PURE__*/ React.createContext({
     const { childNodes, children, ...rest } = props;
-    return /*#__PURE__*/ React.createElement(ElementContext.Provider, {
+    return /*#__PURE__*/ _jsx(ElementContext.Provider, {
         value: {
             ...rest,
             children: childNodes
-        }
-    }, children);
+        },
+        children: children
+    });
 };
@@ -22,0 +24,0 @@ export const useElement = ()=>{

dist/field/providers/LeafButtonProvider.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -10,7 +11,8 @@ const LeafButtonContext = /*#__PURE__*/ React.createContext({
     const { children, ...rest } = props;
-    return /*#__PURE__*/ React.createElement(LeafButtonContext.Provider, {
+    return /*#__PURE__*/ _jsx(LeafButtonContext.Provider, {
         value: {
             ...rest
-        }
-    }, children);
+        },
+        children: children
+    });
 };
@@ -17,0 +19,0 @@ export const useLeafButton = ()=>{

dist/field/providers/LeafProvider.js

 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
@@ -14,8 +15,9 @@ const LeafContext = /*#__PURE__*/ React.createContext({
     const { children, result, ...rest } = props;
-    return /*#__PURE__*/ React.createElement(LeafContext.Provider, {
+    return /*#__PURE__*/ _jsx(LeafContext.Provider, {
         value: {
             ...rest,
             children: result
-        }
-    }, children);
+        },
+        children: children
+    });
 };
@@ -22,0 +24,0 @@ export const useLeaf = ()=>{

dist/field/RichText.js

 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
@@ -11,3 +12,3 @@ import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
 import { useTranslation } from '@payloadcms/ui/providers/Translation';
-import isHotkey from 'is-hotkey';
+import { isHotkey } from 'is-hotkey';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
@@ -155,3 +156,3 @@ import { Node, Element as SlateElement, Text, Transforms, createEditor } from 'slate';
         if (Element) {
-            const el = /*#__PURE__*/ React.createElement(ElementProvider, {
+            const el = /*#__PURE__*/ _jsx(ElementProvider, {
                 attributes: attr,
@@ -163,7 +164,11 @@ childNodes: children,
                 path: path,
-                schemaPath: schemaPath
-            }, Element);
+                schemaPath: schemaPath,
+                children: Element
+            });
             return el;
         }
-        return /*#__PURE__*/ React.createElement("div", attr, children);
+        return /*#__PURE__*/ _jsx("div", {
+            ...attr,
+            children: children
+        });
     }, [
@@ -181,17 +186,23 @@ elements,
                     const Leaf = leafConfig.Leaf;
-                    return /*#__PURE__*/ React.createElement(LeafProvider, {
+                    return /*#__PURE__*/ _jsx(LeafProvider, {
                         attributes: attributes,
                         editorRef: editorRef,
                         fieldProps: props,
-                        key: i,
                         leaf: leaf,
                         path: path,
                         result: result,
-                        schemaPath: schemaPath
-                    }, Leaf);
+                        schemaPath: schemaPath,
+                        children: Leaf
+                    }, i);
                 }
                 return result;
-            }, /*#__PURE__*/ React.createElement("span", attributes, children));
+            }, /*#__PURE__*/ _jsx("span", {
+                ...attributes,
+                children: children
+            }));
         }
-        return /*#__PURE__*/ React.createElement("span", attributes, children);
+        return /*#__PURE__*/ _jsx("span", {
+            ...attributes,
+            children: children
+        });
     }, [
@@ -273,3 +284,3 @@ path,
     if (!valueToRender) valueToRender = defaultRichTextValue;
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: classes,
@@ -279,121 +290,142 @@ style: {
             width
-        }
-    }, /*#__PURE__*/ React.createElement(FieldLabel, {
-        CustomLabel: CustomLabel,
-        label: label,
-        required: required,
-        ...labelProps || {}
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrap`
-    }, /*#__PURE__*/ React.createElement(FieldError, {
-        CustomError: CustomError,
-        path: path,
-        ...errorProps || {}
-    }), /*#__PURE__*/ React.createElement(Slate, {
-        editor: editor,
-        key: JSON.stringify({
-            initialValue,
-            path
-        }),
-        onChange: handleChange,
-        value: valueToRender
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrapper`
-    }, Object.keys(elements)?.length + Object.keys(leaves)?.length > 0 && /*#__PURE__*/ React.createElement("div", {
-        className: [
-            `${baseClass}__toolbar`,
-            drawerIsOpen && `${baseClass}__drawerIsOpen`
-        ].filter(Boolean).join(' '),
-        ref: toolbarRef
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__toolbar-wrap`
-    }, Object.values(elements).map((element)=>{
-        const Button = element?.Button;
-        if (Button) {
-            return /*#__PURE__*/ React.createElement(ElementButtonProvider, {
-                fieldProps: props,
-                key: element.name,
-                path: path,
-                schemaPath: schemaPath
-            }, Button);
-        }
-        return null;
-    }), Object.values(leaves).map((leaf)=>{
-        const Button = leaf?.Button;
-        if (Button) {
-            return /*#__PURE__*/ React.createElement(LeafButtonProvider, {
-                fieldProps: props,
-                key: leaf.name,
-                path: path,
-                schemaPath: schemaPath
-            }, Button);
-        }
-        return null;
-    }))), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__editor`,
-        ref: editorRef
-    }, /*#__PURE__*/ React.createElement(Editable, {
-        className: `${baseClass}__input`,
-        id: `field-${path.replace(/\./g, '__')}`,
-        onKeyDown: (event)=>{
-            if (event.key === 'Enter') {
-                if (event.shiftKey) {
-                    event.preventDefault();
-                    editor.insertText('\n');
-                } else {
-                    const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
-                    if (SlateElement.isElement(selectedElement)) {
-                        // Allow hard enter to "break out" of certain elements
-                        if (editor.shouldBreakOutOnEnter(selectedElement)) {
-                            event.preventDefault();
-                            const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
-                            if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === editor.selection.anchor.offset) {
-                                Transforms.insertNodes(editor, {
-                                    children: [
-                                        {
-                                            text: ''
-                                        }
-                                    ]
-                                });
-                            } else {
-                                Transforms.splitNodes(editor);
-                                Transforms.setNodes(editor, {});
-                            }
-                        }
-                    }
-                }
-            }
-            if (event.key === 'Backspace') {
-                const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
-                if (SlateElement.isElement(selectedElement) && selectedElement.type === 'li') {
-                    const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
-                    if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {
-                        event.preventDefault();
-                        Transforms.unwrapNodes(editor, {
-                            match: (n)=>SlateElement.isElement(n) && listTypes.includes(n.type),
-                            mode: 'lowest',
-                            split: true
-                        });
-                        Transforms.setNodes(editor, {
-                            type: undefined
-                        });
-                    }
-                } else if (editor.isVoid(selectedElement)) {
-                    Transforms.removeNodes(editor);
-                }
-            }
-            Object.keys(hotkeys).forEach((hotkey)=>{
-                if (isHotkey(hotkey, event)) {
-                    event.preventDefault();
-                    const mark = hotkeys[hotkey];
-                    toggleLeaf(editor, mark);
-                }
-            });
         },
-        placeholder: getTranslation(placeholder, i18n),
-        readOnly: readOnly,
-        renderElement: renderElement,
-        renderLeaf: renderLeaf,
-        spellCheck: true
-    })))), CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {})));
+        children: [
+            /*#__PURE__*/ _jsx(FieldLabel, {
+                CustomLabel: CustomLabel,
+                label: label,
+                required: required,
+                ...labelProps || {}
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__wrap`,
+                children: [
+                    /*#__PURE__*/ _jsx(FieldError, {
+                        CustomError: CustomError,
+                        path: path,
+                        ...errorProps || {}
+                    }),
+                    /*#__PURE__*/ _jsx(Slate, {
+                        editor: editor,
+                        onChange: handleChange,
+                        value: valueToRender,
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: `${baseClass}__wrapper`,
+                            children: [
+                                Object.keys(elements)?.length + Object.keys(leaves)?.length > 0 && /*#__PURE__*/ _jsx("div", {
+                                    className: [
+                                        `${baseClass}__toolbar`,
+                                        drawerIsOpen && `${baseClass}__drawerIsOpen`
+                                    ].filter(Boolean).join(' '),
+                                    ref: toolbarRef,
+                                    children: /*#__PURE__*/ _jsxs("div", {
+                                        className: `${baseClass}__toolbar-wrap`,
+                                        children: [
+                                            Object.values(elements).map((element)=>{
+                                                const Button = element?.Button;
+                                                if (Button) {
+                                                    return /*#__PURE__*/ _jsx(ElementButtonProvider, {
+                                                        fieldProps: props,
+                                                        path: path,
+                                                        schemaPath: schemaPath,
+                                                        children: Button
+                                                    }, element.name);
+                                                }
+                                                return null;
+                                            }),
+                                            Object.values(leaves).map((leaf)=>{
+                                                const Button = leaf?.Button;
+                                                if (Button) {
+                                                    return /*#__PURE__*/ _jsx(LeafButtonProvider, {
+                                                        fieldProps: props,
+                                                        path: path,
+                                                        schemaPath: schemaPath,
+                                                        children: Button
+                                                    }, leaf.name);
+                                                }
+                                                return null;
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: `${baseClass}__editor`,
+                                    ref: editorRef,
+                                    children: /*#__PURE__*/ _jsx(Editable, {
+                                        className: `${baseClass}__input`,
+                                        id: `field-${path.replace(/\./g, '__')}`,
+                                        onKeyDown: (event)=>{
+                                            if (event.key === 'Enter') {
+                                                if (event.shiftKey) {
+                                                    event.preventDefault();
+                                                    editor.insertText('\n');
+                                                } else {
+                                                    const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
+                                                    if (SlateElement.isElement(selectedElement)) {
+                                                        // Allow hard enter to "break out" of certain elements
+                                                        if (editor.shouldBreakOutOnEnter(selectedElement)) {
+                                                            event.preventDefault();
+                                                            const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
+                                                            if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === editor.selection.anchor.offset) {
+                                                                Transforms.insertNodes(editor, {
+                                                                    children: [
+                                                                        {
+                                                                            text: ''
+                                                                        }
+                                                                    ]
+                                                                });
+                                                            } else {
+                                                                Transforms.splitNodes(editor);
+                                                                Transforms.setNodes(editor, {});
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                            if (event.key === 'Backspace') {
+                                                const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
+                                                if (SlateElement.isElement(selectedElement) && selectedElement.type === 'li') {
+                                                    const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
+                                                    if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {
+                                                        event.preventDefault();
+                                                        Transforms.unwrapNodes(editor, {
+                                                            match: (n)=>SlateElement.isElement(n) && listTypes.includes(n.type),
+                                                            mode: 'lowest',
+                                                            split: true
+                                                        });
+                                                        Transforms.setNodes(editor, {
+                                                            type: undefined
+                                                        });
+                                                    }
+                                                } else if (editor.isVoid(selectedElement)) {
+                                                    Transforms.removeNodes(editor);
+                                                }
+                                            }
+                                            Object.keys(hotkeys).forEach((hotkey)=>{
+                                                if (isHotkey(hotkey, event)) {
+                                                    event.preventDefault();
+                                                    const mark = hotkeys[hotkey];
+                                                    toggleLeaf(editor, mark);
+                                                }
+                                            });
+                                        },
+                                        placeholder: getTranslation(placeholder, i18n),
+                                        readOnly: readOnly,
+                                        renderElement: renderElement,
+                                        renderLeaf: renderLeaf,
+                                        spellCheck: true
+                                    })
+                                })
+                            ]
+                        })
+                    }, JSON.stringify({
+                        initialValue,
+                        path
+                    })),
+                    CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ _jsx(FieldDescription, {
+                        ...descriptionProps || {}
+                    })
+                ]
+            })
+        ]
+    });
 };
@@ -400,0 +432,0 @@ export const RichText = withCondition(RichTextField);

dist/generateComponentMap.js

@@ -0,1 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { mapFields } from '@payloadcms/ui/utilities/buildComponentMap';
@@ -19,7 +20,7 @@ import React from 'react';
                 const LeafComponent = leafObject.Leaf;
-                componentMap.set(`leaf.button.${leafObject.name}`, /*#__PURE__*/ React.createElement(LeafButton, null));
-                componentMap.set(`leaf.component.${leafObject.name}`, /*#__PURE__*/ React.createElement(LeafComponent, null));
+                componentMap.set(`leaf.button.${leafObject.name}`, /*#__PURE__*/ _jsx(LeafButton, {}));
+                componentMap.set(`leaf.component.${leafObject.name}`, /*#__PURE__*/ _jsx(LeafComponent, {}));
                 if (Array.isArray(leafObject.plugins)) {
                     leafObject.plugins.forEach((Plugin, i)=>{
-                        componentMap.set(`leaf.plugin.${leafObject.name}.${i}`, /*#__PURE__*/ React.createElement(Plugin, null));
+                        componentMap.set(`leaf.plugin.${leafObject.name}.${i}`, /*#__PURE__*/ _jsx(Plugin, {}));
                     });
@@ -39,7 +40,7 @@ }
                 const ElementComponent = element.Element;
-                if (ElementButton) componentMap.set(`element.button.${element.name}`, /*#__PURE__*/ React.createElement(ElementButton, null));
-                componentMap.set(`element.component.${element.name}`, /*#__PURE__*/ React.createElement(ElementComponent, null));
+                if (ElementButton) componentMap.set(`element.button.${element.name}`, /*#__PURE__*/ _jsx(ElementButton, {}));
+                componentMap.set(`element.component.${element.name}`, /*#__PURE__*/ _jsx(ElementComponent, {}));
                 if (Array.isArray(element.plugins)) {
                     element.plugins.forEach((Plugin, i)=>{
-                        componentMap.set(`element.plugin.${element.name}.${i}`, /*#__PURE__*/ React.createElement(Plugin, null));
+                        componentMap.set(`element.plugin.${element.name}.${i}`, /*#__PURE__*/ _jsx(Plugin, {}));
                     });
@@ -46,0 +47,0 @@ }

package.json

 {
   "name": "@payloadcms/richtext-slate",
-  "version": "3.0.0-beta.35",
+  "version": "3.0.0-beta.36",
   "description": "The officially supported Slate richtext adapter for Payload",
@@ -35,13 +35,15 @@ "homepage": "https://payloadcms.com",
   "devDependencies": {
+    "@types/is-hotkey": "^0.1.10",
     "@types/node": "20.12.5",
-    "@types/react": "18.3.2",
-    "@payloadcms/eslint-config": "1.1.1",
-    "payload": "3.0.0-beta.35",
-    "@payloadcms/ui": "3.0.0-beta.35"
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
+    "payload": "3.0.0-beta.36",
+    "@payloadcms/ui": "3.0.0-beta.36",
+    "@payloadcms/eslint-config": "1.1.1"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "@payloadcms/translations": "3.0.0-beta.35",
-    "@payloadcms/ui": "3.0.0-beta.35",
-    "payload": "3.0.0-beta.35"
+    "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
+    "@payloadcms/translations": "3.0.0-beta.36",
+    "@payloadcms/ui": "3.0.0-beta.36",
+    "payload": "3.0.0-beta.36"
   },
@@ -54,2 +56,6 @@ "engines": {
   },
+  "overrides": {
+    "@types/react": "npm:types-react@19.0.0-beta.2",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
+  },
   "scripts": {
@@ -56,0 +62,0 @@ "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

543389

increased by3.31%

Lines of code

4727

increased by8.59%

Worsened metrics

Dev dependency count

7

increased by40%

No dependency changes