payload 0.20.1 → 0.20.4-beta.0

package/dist/admin/components/icons/Calendar/index.scss

@@ -5,7 +5,7 @@
   width: $baseline;
 
   .stroke {
-    stroke: $color-dark-gray;
+    stroke: var(--theme-elevation-800);
     stroke-width: $style-stroke-width-s;
   }
 }

package/dist/admin/components/icons/Check/index.scss

@@ -6,7 +6,7 @@
 
   .stroke {
     fill: none;
-    stroke: $color-dark-gray;
+    stroke: var(--theme-elevation-800);
     stroke-width: $style-stroke-width-m;
   }
 }

package/dist/admin/components/icons/Chevron/index.scss

@@ -6,7 +6,7 @@
 
   .stroke {
     fill: none;
-    stroke: $color-dark-gray;
+    stroke: var(--theme-elevation-800);
     stroke-width: $style-stroke-width-m;
   }
 }

package/dist/admin/components/icons/CloseMenu/index.scss

@@ -5,6 +5,6 @@
   width: $baseline;
 
   .fill {
-    fill: $color-dark-gray;
+    fill: var(--theme-elevation-800);
   }
 }

package/dist/admin/components/icons/Copy/index.scss

@@ -6,7 +6,7 @@
 
   .stroke {
     fill: none;
-    stroke: $color-dark-gray;
+    stroke: var(--theme-elevation-800);
     stroke-width: $style-stroke-width-s;
   }
 }

package/dist/admin/components/icons/Drag/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+declare const DragHandle: React.FC<{
+    className?: string;
+}>;
+export default DragHandle;

package/dist/admin/components/icons/Drag/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.scss';
+const DragHandle = ({ className }) => (React.createElement("svg", { className: [
+        'icon icon--drag-handle',
+        className,
+    ].filter(Boolean).join(' '), viewBox: "0 0 25 25", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("circle", { cx: "10.468", cy: "14.5", r: "1", className: "fill" }),
+    React.createElement("circle", { cx: "14.532", cy: "14.5", r: "1", className: "fill" }),
+    React.createElement("circle", { cx: "10.468", cy: "11.35", r: "1", className: "fill" }),
+    React.createElement("circle", { cx: "14.532", cy: "11.35", r: "1", className: "fill" }),
+    React.createElement("circle", { cx: "10.468", cy: "8.3", r: "1", className: "fill" }),
+    React.createElement("circle", { cx: "14.532", cy: "8.3", r: "1", className: "fill" })));
+export default DragHandle;

package/dist/admin/components/icons/Drag/index.scss

@@ -0,0 +1,10 @@
+@import '../../../scss/styles';
+
+.icon--drag-handle {
+  height: $baseline;
+  width: $baseline;
+
+  .fill {
+    fill: var(--theme-elevation-800);
+  }
+}

package/dist/admin/components/icons/Edit/index.scss

@@ -6,7 +6,7 @@
   shape-rendering: auto;
 
   .fill {
-    fill: $color-dark-gray;
+    fill: var(--theme-elevation-800);
     stroke: none;
   }
 }

package/dist/admin/components/icons/IndentLeft/index.scss

@@ -6,11 +6,11 @@
 
   .stroke {
     fill: none;
-    stroke: $color-dark-gray;
+    stroke: var(--theme-elevation-800);
     stroke-width: $style-stroke-width-m;
   }
 
   .fill {
-    fill: $color-dark-gray;
+    fill: var(--theme-elevation-800);
   }
 }

package/dist/admin/components/icons/IndentRight/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import './index.scss';
 const IndentRight = () => (React.createElement("svg", { className: "icon icon--indent-right", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 25 25" },
-    React.createElement("path", { d: "M10 9.61502L5 6.04361L5 13.1864L10 9.61502Z", fill: "#333333" }),
+    React.createElement("path", { d: "M10 9.61502L5 6.04361L5 13.1864L10 9.61502Z", className: "fill" }),
     React.createElement("rect", { x: "11.9375", y: "5.68199", width: "9.0675", height: "2.15625", className: "fill" }),
     React.createElement("rect", { x: "11.9375", y: "11.4738", width: "9.0675", height: "2.15625", className: "fill" }),
     React.createElement("rect", { x: "5", y: "17.2656", width: "16.005", height: "2.15625", className: "fill" })));

package/dist/admin/components/icons/IndentRight/index.scss

@@ -6,11 +6,11 @@
 
   .stroke {
     fill: none;
-    stroke: $color-dark-gray;
+    stroke: var(--theme-elevation-800);
     stroke-width: $style-stroke-width-m;
   }
 
   .fill {
-    fill: $color-dark-gray;
+    fill: var(--theme-elevation-800);
   }
 }

package/dist/admin/components/icons/LogOut/index.scss

@@ -5,7 +5,7 @@
   width: $baseline;
 
   .stroke {
-    stroke: $color-dark-gray;
+    stroke: var(--theme-elevation-800);
     stroke-width: 2px;
   }
 }

package/dist/admin/components/icons/Menu/index.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import './index.scss';
 declare const Menu: React.FC;
 export default Menu;

package/dist/admin/components/icons/Menu/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
-const Menu = () => (React.createElement("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("rect", { x: "3.5", y: "4.5", width: "18", height: "2", fill: "#333333" }),
-    React.createElement("rect", { x: "3.5", y: "11.5", width: "18", height: "2", fill: "#333333" }),
-    React.createElement("rect", { x: "3.5", y: "18.5", width: "18", height: "2", fill: "#333333" })));
+import './index.scss';
+const Menu = () => (React.createElement("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", className: "icon icon--menu", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("rect", { x: "3.5", y: "4.5", width: "18", height: "2", className: "fill" }),
+    React.createElement("rect", { x: "3.5", y: "11.5", width: "18", height: "2", className: "fill" }),
+    React.createElement("rect", { x: "3.5", y: "18.5", width: "18", height: "2", className: "fill" })));
 export default Menu;

package/dist/admin/components/icons/Menu/index.scss

@@ -0,0 +1,7 @@
+@import '../../../scss/styles';
+
+.icon--menu {
+  .fill {
+    fill: var(--theme-text);
+  }
+}

package/dist/admin/components/icons/More/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+declare const DragHandle: React.FC<{
+    className?: string;
+}>;
+export default DragHandle;

package/dist/admin/components/icons/More/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.scss';
+const DragHandle = ({ className }) => (React.createElement("svg", { className: [
+        'icon icon--more',
+        className,
+    ].filter(Boolean).join(' '), viewBox: "0 0 25 25", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("circle", { cx: "16.3872", cy: "12.5", r: "1", className: "fill" }),
+    React.createElement("circle", { cx: "12.3872", cy: "12.5", r: "1", className: "fill" }),
+    React.createElement("circle", { cx: "8.61279", cy: "12.5", r: "1", className: "fill" })));
+export default DragHandle;

package/dist/admin/components/icons/More/index.scss

@@ -0,0 +1,10 @@
+@import '../../../scss/styles';
+
+.icon--more {
+  height: $baseline;
+  width: $baseline;
+
+  .fill {
+    fill: var(--theme-elevation-800);
+  }
+}

package/dist/admin/components/icons/Plus/index.scss

@@ -5,7 +5,7 @@
   height: $baseline;
 
   .stroke {
-    stroke: $color-dark-gray;
+    stroke: var(--theme-elevation-800);
     stroke-width: $style-stroke-width;
   }
 }

package/dist/admin/components/icons/Relationship/index.scss

@@ -6,7 +6,7 @@
 
   .stroke {
     fill: none;
-    stroke: $color-dark-gray;
+    stroke: var(--theme-elevation-800);
     stroke-width: $style-stroke-width-m;
   }
 }

package/dist/admin/components/icons/Search/index.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import './index.scss';
 declare const Search: React.FC;
 export default Search;

package/dist/admin/components/icons/Search/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-const Search = () => (React.createElement("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "icon icon--search" },
-    React.createElement("circle", { cx: "11.2069", cy: "10.7069", r: "5", stroke: "#333333", strokeWidth: "2" }),
-    React.createElement("line", { x1: "14.914", y1: "13.9998", x2: "20.5002", y2: "19.586", stroke: "#333333", strokeWidth: "2" })));
+import './index.scss';
+const Search = () => (React.createElement("svg", { viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "icon icon--search" },
+    React.createElement("circle", { cx: "11.2069", cy: "10.7069", r: "5", className: "stroke" }),
+    React.createElement("line", { x1: "14.914", y1: "13.9998", x2: "20.5002", y2: "19.586", className: "stroke" })));
 export default Search;

package/dist/admin/components/icons/Search/index.scss

@@ -0,0 +1,11 @@
+@import '../../../scss/styles';
+
+.icon--search {
+  height: $baseline;
+  width: $baseline;
+
+  .stroke {
+    stroke: var(--theme-elevation-800);
+    stroke-width: $style-stroke-width-s;
+  }
+}

package/dist/admin/components/icons/Swap/index.scss

@@ -6,7 +6,7 @@
 
   .stroke {
     fill: none;
-    stroke: $color-dark-gray;
+    stroke: var(--theme-elevation-800);
     stroke-width: $style-stroke-width-m;
   }
 }

package/dist/admin/components/icons/Upload/index.scss

@@ -5,7 +5,7 @@
   width: $baseline;
 
   .fill {
-    fill: $color-dark-gray;
+    fill: var(--theme-elevation-800);
     stroke: none;
   }
 }

package/dist/admin/components/icons/X/index.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
 import './index.scss';
-declare const X: React.FC;
+declare const X: React.FC<{
+    className?: string;
+}>;
 export default X;

package/dist/admin/components/icons/X/index.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import './index.scss';
-const X = () => (React.createElement("svg", { width: "25", height: "25", className: "icon icon--x", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 25 25" },
+const X = ({ className }) => (React.createElement("svg", { width: "25", height: "25", className: [
+        className,
+        'icon icon--x',
+    ].filter(Boolean).join(' '), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 25 25" },
     React.createElement("line", { className: "stroke", x1: "8.74612", y1: "16.347", x2: "16.3973", y2: "8.69584" }),
     React.createElement("line", { className: "stroke", x1: "8.6027", y1: "8.69585", x2: "16.2539", y2: "16.3471" })));
 export default X;

package/dist/admin/components/icons/X/index.scss

@@ -2,7 +2,7 @@
 
 .icon--x {
   line {
-    stroke: $color-dark-gray;
+    stroke: var(--theme-elevation-800);
     stroke-width: $style-stroke-width;
   }
 }

package/dist/admin/components/modals/LeaveWithoutSaving/index.js

@@ -10,7 +10,7 @@ const LeaveWithoutSaving = () => {
     const modified = useFormModified();
     const { user } = useAuth();
     return (React.createElement(NavigationPrompt, { when: Boolean(modified && user) }, ({ onConfirm, onCancel }) => (React.createElement("div", { className: modalSlug },
-        React.createElement(MinimalTemplate, null,
+        React.createElement(MinimalTemplate, { className: `${modalSlug}__template` },
             React.createElement("h1", null, "Leave without saving"),
             React.createElement("p", null, "Your changes have not been saved. If you leave now, you will lose your changes."),
             React.createElement(Button, { onClick: onCancel, buttonStyle: "secondary" }, "Stay on this page"),

package/dist/admin/components/modals/LeaveWithoutSaving/index.scss

@@ -9,6 +9,11 @@
   bottom: 0;
   left: 0;
 
+  &__template {
+    position: relative;
+    z-index: 1;
+  }
+
   .btn {
     margin-right: $baseline;
   }

package/dist/admin/components/modals/StayLoggedIn/index.js

@@ -12,7 +12,7 @@ const StayLoggedInModal = (props) => {
     const { routes: { admin } } = useConfig();
     const { closeAll: closeAllModals } = useModal();
     return (React.createElement(Modal, { className: baseClass, slug: "stay-logged-in" },
-        React.createElement(MinimalTemplate, null,
+        React.createElement(MinimalTemplate, { className: `${baseClass}__template` },
             React.createElement("h1", null, "Stay logged in"),
             React.createElement("p", null, "You haven't been active in a little while and will shortly be automatically logged out for your own security. Would you like to stay logged in?"),
             React.createElement("div", { className: `${baseClass}__actions` },

package/dist/admin/components/modals/StayLoggedIn/index.scss

@@ -6,6 +6,11 @@
   align-items: center;
   height: 100%;
 
+  &__template {
+    position: relative;
+    z-index: 1;
+  }
+
   .btn {
     margin-right: base(1);
   }

package/dist/admin/components/templates/Default/index.scss

@@ -5,22 +5,16 @@
   display: flex;
 
   &__wrap {
-    padding-left: base(2);
     min-width: 0;
     width: 100%;
     flex-grow: 1;
   }
 
-  @include large-break {
-    &__wrap {
-      padding-left: base(1);
-    }
-  }
-
   @include mid-break {
     display: block;
     width: 100%;
     margin-left: 0;
+    padding-top: base(3);
 
     &__wrap {
       padding: 0 0 $baseline;

package/dist/admin/components/utilities/DocumentInfo/index.js

@@ -1,9 +1,12 @@
 import React, { createContext, useCallback, useContext, useEffect, useState, } from 'react';
 import qs from 'qs';
 import { useConfig } from '../Config';
+import { usePreferences } from '../Preferences';
 const Context = createContext({});
 export const DocumentInfoProvider = ({ children, global, collection, id, }) => {
     const { serverURL, routes: { api } } = useConfig();
+    const { getPreference } = usePreferences();
+    const [preferences, setPreferences] = useState();
     const [publishedDoc, setPublishedDoc] = useState(null);
     const [versions, setVersions] = useState(null);
     const [unpublishedVersions, setUnpublishedVersions] = useState(null);
@@ -118,6 +121,13 @@ export const DocumentInfoProvider = ({ children, global, collection, id, }) => {
     useEffect(() => {
         getVersions();
     }, [getVersions]);
+    useEffect(() => {
+        const getDocPreferences = async () => {
+            const existingPreferences = await getPreference(preferencesKey);
+            setPreferences(existingPreferences || { fields: {} });
+        };
+        getDocPreferences();
+    }, [getPreference, preferencesKey]);
     const value = {
         slug,
         type,
@@ -129,6 +139,7 @@ export const DocumentInfoProvider = ({ children, global, collection, id, }) => {
         getVersions,
         publishedDoc,
         id,
+        preferences,
     };
     return (React.createElement(Context.Provider, { value: value }, children));
 };

package/dist/admin/components/utilities/DocumentInfo/types.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { SanitizedCollectionConfig, TypeWithID, TypeWithTimestamps } from '../../../../collections/config/types';
 import { SanitizedGlobalConfig } from '../../../../globals/config/types';
 import { PaginatedDocs } from '../../../../mongoose/types';
+import { DocumentPreferences } from '../../../../preferences/types';
 import { TypeWithVersion } from '../../../../versions/types';
 export declare type Version = TypeWithVersion<any>;
 export declare type ContextType = {
@@ -16,6 +17,7 @@ export declare type ContextType = {
         _status?: string;
     };
     getVersions: () => Promise<void>;
+    preferences?: DocumentPreferences;
 };
 export declare type Props = {
     collection?: SanitizedCollectionConfig;

package/dist/admin/components/utilities/Theme/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare type Theme = 'light' | 'dark';
+export declare type ThemeContext = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    autoMode: boolean;
+};
+declare const Context: React.Context<ThemeContext>;
+export declare const ThemeProvider: React.FC<{
+    children?: React.ReactNode;
+}>;
+export declare const useTheme: () => ThemeContext;
+export default Context;

package/dist/admin/components/utilities/Theme/index.js

@@ -0,0 +1,47 @@
+import React, { createContext, useCallback, useContext, useState, } from 'react';
+const initialContext = {
+    theme: 'light',
+    setTheme: () => null,
+    autoMode: true,
+};
+const Context = createContext(initialContext);
+const localStorageKey = 'payload-theme';
+const getTheme = () => {
+    let theme;
+    const themeFromStorage = window.localStorage.getItem(localStorageKey);
+    if (themeFromStorage === 'light' || themeFromStorage === 'dark') {
+        theme = themeFromStorage;
+    }
+    else {
+        theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+    }
+    document.documentElement.setAttribute('data-theme', theme);
+    return theme;
+};
+export const ThemeProvider = ({ children }) => {
+    const [theme, setThemeState] = useState(getTheme);
+    const [autoMode, setAutoMode] = useState(() => {
+        const themeFromStorage = window.localStorage.getItem(localStorageKey);
+        return !themeFromStorage;
+    });
+    const setTheme = useCallback((themeToSet) => {
+        if (themeToSet === 'light' || themeToSet === 'dark') {
+            setThemeState(themeToSet);
+            setAutoMode(false);
+            window.localStorage.setItem(localStorageKey, themeToSet);
+            document.documentElement.setAttribute('data-theme', themeToSet);
+        }
+        else if (themeToSet === 'auto') {
+            const existingThemeFromStorage = window.localStorage.getItem(localStorageKey);
+            if (existingThemeFromStorage)
+                window.localStorage.removeItem(localStorageKey);
+            const themeFromOS = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+            document.documentElement.setAttribute('data-theme', themeFromOS);
+            setAutoMode(true);
+            setThemeState(themeFromOS);
+        }
+    }, []);
+    return (React.createElement(Context.Provider, { value: { theme, setTheme, autoMode } }, children));
+};
+export const useTheme = () => useContext(Context);
+export default Context;

package/dist/admin/components/views/Account/Default.js

@@ -15,6 +15,8 @@ import Meta from '../../utilities/Meta';
 import Auth from '../collections/Edit/Auth';
 import Loading from '../../elements/Loading';
 import { OperationContext } from '../../utilities/OperationProvider';
+import { ToggleTheme } from './ToggleTheme';
+import { Gutter } from '../../elements/Gutter';
 import './index.scss';
 const baseClass = 'account';
 const DefaultAccount = (props) => {
@@ -34,11 +36,14 @@ const DefaultAccount = (props) => {
                     React.createElement(Eyebrow, null),
                     !(((_a = collection.versions) === null || _a === void 0 ? void 0 : _a.drafts) && ((_c = (_b = collection.versions) === null || _b === void 0 ? void 0 : _b.drafts) === null || _c === void 0 ? void 0 : _c.autosave)) && (React.createElement(LeaveWithoutSaving, null)),
                     React.createElement("div", { className: `${baseClass}__edit` },
-                        React.createElement("header", { className: `${baseClass}__header` },
+                        React.createElement(Gutter, { className: `${baseClass}__header` },
                             React.createElement("h1", null,
-                                React.createElement(RenderTitle, { ...{ data, useAsTitle, fallback: '[Untitled]' } }))),
-                        React.createElement(Auth, { useAPIKey: auth.useAPIKey, collection: collection, email: data === null || data === void 0 ? void 0 : data.email, operation: "update" }),
-                        React.createElement(RenderFields, { permissions: permissions.fields, readOnly: !hasSavePermission, filter: (field) => { var _a; return ((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.position) !== 'sidebar'; }, fieldTypes: fieldTypes, fieldSchema: fields }))),
+                                React.createElement(RenderTitle, { ...{ data, useAsTitle, fallback: '[Untitled]' } })),
+                            React.createElement(Auth, { useAPIKey: auth.useAPIKey, collection: collection, email: data === null || data === void 0 ? void 0 : data.email, operation: "update" }),
+                            React.createElement(RenderFields, { permissions: permissions.fields, readOnly: !hasSavePermission, filter: (field) => { var _a; return ((_a = field === null || field === void 0 ? void 0 : field.admin) === null || _a === void 0 ? void 0 : _a.position) !== 'sidebar'; }, fieldTypes: fieldTypes, fieldSchema: fields })),
+                        React.createElement(Gutter, { className: `${baseClass}__payload-settings` },
+                            React.createElement("h3", null, "Payload Settings"),
+                            React.createElement(ToggleTheme, null)))),
                 React.createElement("div", { className: `${baseClass}__sidebar-wrap` },
                     React.createElement("div", { className: `${baseClass}__sidebar` },
                         React.createElement("div", { className: `${baseClass}__sidebar-sticky-wrap` },

package/dist/admin/components/views/Account/ToggleTheme/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ToggleTheme: React.FC;

package/dist/admin/components/views/Account/ToggleTheme/index.js

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import RadioGroupInput from '../../../forms/field-types/RadioGroup/Input';
+import { useTheme } from '../../../utilities/Theme';
+export const ToggleTheme = () => {
+    const { theme, setTheme, autoMode } = useTheme();
+    const onChange = useCallback((newTheme) => {
+        setTheme(newTheme);
+    }, [setTheme]);
+    return (React.createElement(RadioGroupInput, { name: "theme", label: "Admin Theme", value: autoMode ? 'auto' : theme, onChange: onChange, options: [
+            {
+                label: 'Automatic',
+                value: 'auto',
+            },
+            {
+                label: 'Light',
+                value: 'light',
+            },
+            {
+                label: 'Dark',
+                value: 'dark',
+            },
+        ] }));
+};

package/dist/admin/components/views/Account/index.js

@@ -8,7 +8,6 @@ import { useLocale } from '../../utilities/Locale';
 import DefaultAccount from './Default';
 import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
-import { NegativeFieldGutterProvider } from '../../forms/FieldTypeGutter/context';
 import { useDocumentInfo } from '../../utilities/DocumentInfo';
 const AccountView = () => {
     var _a, _b;
@@ -17,7 +16,7 @@ const AccountView = () => {
     const { setStepNav } = useStepNav();
     const { user, permissions } = useAuth();
     const [initialState, setInitialState] = useState({});
-    const { id } = useDocumentInfo();
+    const { id, preferences } = useDocumentInfo();
     const { serverURL, routes: { api }, collections, admin: { user: adminUser, components: { views: { Account: CustomAccount, } = {
         Account: undefined,
     }, } = {}, } = {
@@ -26,7 +25,7 @@ const AccountView = () => {
     const collection = collections.find((coll) => coll.slug === user.collection);
     const { fields } = collection;
     const collectionPermissions = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[adminUser];
-    const [{ data, isLoading }] = usePayloadAPI(`${serverURL}${api}/${collection === null || collection === void 0 ? void 0 : collection.slug}/${user === null || user === void 0 ? void 0 : user.id}?depth=0`, { initialParams: { 'fallback-locale': 'null' } });
+    const [{ data, isLoading: isLoadingDocument }] = usePayloadAPI(`${serverURL}${api}/${collection === null || collection === void 0 ? void 0 : collection.slug}/${user === null || user === void 0 ? void 0 : user.id}?depth=0`, { initialParams: { 'fallback-locale': 'null' } });
     const hasSavePermission = (_b = collectionPermissions === null || collectionPermissions === void 0 ? void 0 : collectionPermissions.update) === null || _b === void 0 ? void 0 : _b.permission;
     const dataToRender = (locationState === null || locationState === void 0 ? void 0 : locationState.data) || data;
     const apiURL = `${serverURL}${api}/${user.collection}/${data === null || data === void 0 ? void 0 : data.id}`;
@@ -44,16 +43,15 @@ const AccountView = () => {
         };
         awaitInitialState();
     }, [dataToRender, fields, id, user, locale]);
-    return (React.createElement(NegativeFieldGutterProvider, { allow: true },
-        React.createElement(RenderCustomComponent, { DefaultComponent: DefaultAccount, CustomComponent: CustomAccount, componentProps: {
-                action,
-                data,
-                collection,
-                permissions: collectionPermissions,
-                hasSavePermission,
-                initialState,
-                apiURL,
-                isLoading,
-            } })));
+    return (React.createElement(RenderCustomComponent, { DefaultComponent: DefaultAccount, CustomComponent: CustomAccount, componentProps: {
+            action,
+            data,
+            collection,
+            permissions: collectionPermissions,
+            hasSavePermission,
+            initialState,
+            apiURL,
+            isLoading: isLoadingDocument || !preferences,
+        } }));
 };
 export default AccountView;