payload 0.20.1 → 0.20.4-beta.0

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

@@ -34,11 +34,8 @@
   }
 
   &__edit {
-    background: white;
-    padding: base(5) base(6) base(6);
-    margin-bottom: base(1.5);
+    padding: base(1) 0 base(2);
     flex-grow: 1;
-    overflow-x: scroll;
   }
 
   &__sidebar-wrap {
@@ -48,6 +45,7 @@
     top: 0;
     right: 0;
     overflow: visible;
+    border-left: 1px solid var(--theme-elevation-100);
   }
 
   &__sidebar {
@@ -75,20 +73,25 @@
     top: 0;
     z-index: 2;
     padding-right: $baseline;
+
+    >* {
+      position: relative;
+      z-index: 1;
+    }
   }
 
   &__document-actions--with-preview {
     display: flex;
 
-    > * {
+    >* {
       width: calc(50% - #{base(.5)});
     }
 
-    > *:first-child {
+    >*:first-child {
       margin-right: base(.5);
     }
 
-    > *:last-child {
+    >*:last-child {
       margin-left: base(.5);
     }
 
@@ -123,12 +126,14 @@
   }
 
   &__label {
-    color: $color-gray;
+    color: var(--theme-elevation-400);
   }
 
   &__collection-actions,
   &__api-url {
-    a, button {
+
+    a,
+    button {
       cursor: pointer;
       font-weight: 600;
       text-decoration: none;
@@ -139,10 +144,10 @@
     }
   }
 
-  @include large-break {
-    &__edit {
-      padding: base(3.5);
-    }
+  &__payload-settings {
+    margin-top: base(4);
+    padding-top: base(3);
+    border-top: 1px solid var(--theme-elevation-100);
   }
 
   @include mid-break {
@@ -162,8 +167,7 @@
     }
 
     &__edit {
-      padding: $baseline;
-      margin-bottom: $baseline;
+      padding: 0;
     }
 
     &__document-actions {
@@ -174,11 +178,16 @@
       top: auto;
     }
 
+    &__meta {
+      padding: base(2) 0 base(1.5);
+      margin: 0;
+    }
+
+    &__collection-actions,
     &__document-actions,
     &__meta,
-    &__sidebar-fields,
-    &__api-url {
-      padding-left: $baseline;
+    &__sidebar-fields {
+      padding-left: var(--gutter-h);
     }
 
     &__api-url {
@@ -186,9 +195,8 @@
     }
 
     &__collection-actions {
-      margin-top: base(.5);
-      padding-left: $baseline;
-      padding-bottom: 0;
+      border-top: 1px solid var(--theme-elevation-100);
+      padding: base(1) 0 0 base(1);
       order: 1;
 
       li {
@@ -200,5 +208,13 @@
       padding-bottom: base(4);
       height: auto;
     }
+
+    &__payload-settings {
+      margin-top: base(2);
+      padding-top: base(2);
+      padding-bottom: base(.5);
+      border-top: 1px solid var(--theme-elevation-100);
+      border-bottom: 1px solid var(--theme-elevation-100);
+    }
   }
 }

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

@@ -7,7 +7,6 @@ import Form from '../../forms/Form';
 import RenderFields from '../../forms/RenderFields';
 import fieldTypes from '../../forms/field-types';
 import FormSubmit from '../../forms/Submit';
-import { NegativeFieldGutterProvider } from '../../forms/FieldTypeGutter/context';
 import './index.scss';
 const baseClass = 'create-first-user';
 const CreateFirstUser = (props) => {
@@ -45,11 +44,10 @@ const CreateFirstUser = (props) => {
         React.createElement("p", null, "To begin, create your first user."),
         React.createElement(Meta, { title: "Create First User", description: "Create first user", keywords: "Create, Payload, CMS" }),
         React.createElement(Form, { onSuccess: onSuccess, method: "post", redirect: admin, action: `${serverURL}${api}/${userSlug}/first-register`, validationOperation: "create" },
-            React.createElement(NegativeFieldGutterProvider, { allow: true },
-                React.createElement(RenderFields, { fieldSchema: [
-                        ...fields,
-                        ...userConfig.fields,
-                    ], fieldTypes: fieldTypes })),
+            React.createElement(RenderFields, { fieldSchema: [
+                    ...fields,
+                    ...userConfig.fields,
+                ], fieldTypes: fieldTypes }),
             React.createElement(FormSubmit, null, "Create"))));
 };
 export default CreateFirstUser;

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

@@ -4,6 +4,7 @@ import { useConfig } from '../../utilities/Config';
 import Eyebrow from '../../elements/Eyebrow';
 import Card from '../../elements/Card';
 import Button from '../../elements/Button';
+import { Gutter } from '../../elements/Gutter';
 import './index.scss';
 const baseClass = 'dashboard';
 const Dashboard = (props) => {
@@ -12,17 +13,17 @@ const Dashboard = (props) => {
     const { routes: { admin, }, admin: { components: { afterDashboard, beforeDashboard, }, }, } = useConfig();
     return (React.createElement("div", { className: baseClass },
         React.createElement(Eyebrow, null),
-        React.createElement("div", { className: `${baseClass}__wrap` },
+        React.createElement(Gutter, { className: `${baseClass}__wrap` },
             Array.isArray(beforeDashboard) && beforeDashboard.map((Component, i) => React.createElement(Component, { key: i })),
-            React.createElement("h3", { className: `${baseClass}__label` }, "Collections"),
+            React.createElement("h2", { className: `${baseClass}__label` }, "Collections"),
             React.createElement("ul", { className: `${baseClass}__card-list` }, collections.map((collection) => {
                 var _a, _b, _c;
                 const hasCreatePermission = (_c = (_b = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[collection.slug]) === null || _b === void 0 ? void 0 : _b.create) === null || _c === void 0 ? void 0 : _c.permission;
                 return (React.createElement("li", { key: collection.slug },
-                    React.createElement(Card, { title: collection.labels.plural, onClick: () => push({ pathname: `${admin}/collections/${collection.slug}` }), actions: hasCreatePermission ? (React.createElement(Button, { el: "link", to: `${admin}/collections/${collection.slug}/create`, icon: "plus", round: true, buttonStyle: "icon-label", iconStyle: "with-border" })) : undefined })));
+                    React.createElement(Card, { title: collection.labels.plural, id: `card-${collection.slug}`, onClick: () => push({ pathname: `${admin}/collections/${collection.slug}` }), actions: hasCreatePermission ? (React.createElement(Button, { el: "link", to: `${admin}/collections/${collection.slug}/create`, icon: "plus", round: true, buttonStyle: "icon-label", iconStyle: "with-border" })) : undefined })));
             })),
             (globals.length > 0) && (React.createElement(React.Fragment, null,
-                React.createElement("h3", { className: `${baseClass}__label` }, "Globals"),
+                React.createElement("h2", { className: `${baseClass}__label` }, "Globals"),
                 React.createElement("ul", { className: `${baseClass}__card-list` }, globals.map((global) => (React.createElement("li", { key: global.slug },
                     React.createElement(Card, { title: global.label, onClick: () => push({ pathname: `${admin}/globals/${global.slug}` }) }))))))),
             Array.isArray(afterDashboard) && afterDashboard.map((Component, i) => React.createElement(Component, { key: i })))));

package/dist/admin/components/views/Dashboard/index.scss

@@ -2,16 +2,9 @@
 
 .dashboard {
   width: 100%;
-  padding-right: base(2);
 
   &__wrap {
-    padding: base(2);
-    background: white;
-  }
-
-  &__label {
-    @extend %body;
-    color: $color-gray;
+    padding-bottom: base(2);
   }
 
   &__card-list {
@@ -40,10 +33,9 @@
   }
 
   @include mid-break {
-    padding-right: 0;
-
     &__wrap {
-      padding: $baseline;
+      padding-top: 0;
+      padding-bottom: 0;
     }
 
     li {

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

@@ -18,8 +18,9 @@ import SaveDraft from '../../elements/SaveDraft';
 import Publish from '../../elements/Publish';
 import Status from '../../elements/Status';
 import Autosave from '../../elements/Autosave';
-import './index.scss';
 import { OperationContext } from '../../utilities/OperationProvider';
+import { Gutter } from '../../elements/Gutter';
+import './index.scss';
 const baseClass = 'global-edit';
 const DefaultGlobalView = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
@@ -36,7 +37,7 @@ const DefaultGlobalView = (props) => {
                     React.createElement(Meta, { title: label, description: label, keywords: `${label}, Payload, CMS` }),
                     React.createElement(Eyebrow, null),
                     !(((_b = global.versions) === null || _b === void 0 ? void 0 : _b.drafts) && ((_d = (_c = global.versions) === null || _c === void 0 ? void 0 : _c.drafts) === null || _d === void 0 ? void 0 : _d.autosave)) && (React.createElement(LeaveWithoutSaving, null)),
-                    React.createElement("div", { className: `${baseClass}__edit` },
+                    React.createElement(Gutter, { className: `${baseClass}__edit` },
                         React.createElement("header", { className: `${baseClass}__header` },
                             React.createElement("h1", null,
                                 "Edit",

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

@@ -8,7 +8,6 @@ import { useLocale } from '../../utilities/Locale';
 import RenderCustomComponent from '../../utilities/RenderCustomComponent';
 import DefaultGlobal from './Default';
 import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
-import { NegativeFieldGutterProvider } from '../../forms/FieldTypeGutter/context';
 import { useDocumentInfo } from '../../utilities/DocumentInfo';
 const GlobalView = (props) => {
     var _a, _b;
@@ -17,7 +16,7 @@ const GlobalView = (props) => {
     const { setStepNav } = useStepNav();
     const { permissions, user } = useAuth();
     const [initialState, setInitialState] = useState({});
-    const { getVersions } = useDocumentInfo();
+    const { getVersions, preferences } = useDocumentInfo();
     const { serverURL, routes: { api, }, } = useConfig();
     const { global } = props;
     const { slug, label, fields, admin: { components: { views: { Edit: CustomEdit, } = {}, } = {}, } = {}, } = global;
@@ -26,7 +25,7 @@ const GlobalView = (props) => {
         const state = await buildStateFromSchema({ fieldSchema: fields, data: json.result, operation: 'update', user, locale });
         setInitialState(state);
     }, [getVersions, fields, user, locale]);
-    const [{ data, isLoading }] = usePayloadAPI(`${serverURL}${api}/globals/${slug}`, { initialParams: { 'fallback-locale': 'null', depth: 0, draft: 'true' } });
+    const [{ data, isLoading: isLoadingDocument }] = usePayloadAPI(`${serverURL}${api}/globals/${slug}`, { initialParams: { 'fallback-locale': 'null', depth: 0, draft: 'true' } });
     const dataToRender = (locationState === null || locationState === void 0 ? void 0 : locationState.data) || data;
     useEffect(() => {
         const nav = [{
@@ -42,16 +41,15 @@ const GlobalView = (props) => {
         awaitInitialState();
     }, [dataToRender, fields, user, locale]);
     const globalPermissions = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.globals) === null || _a === void 0 ? void 0 : _a[slug];
-    return (React.createElement(NegativeFieldGutterProvider, { allow: true },
-        React.createElement(RenderCustomComponent, { DefaultComponent: DefaultGlobal, CustomComponent: CustomEdit, componentProps: {
-                isLoading,
-                data: dataToRender,
-                permissions: globalPermissions,
-                initialState,
-                global,
-                onSave,
-                apiURL: `${serverURL}${api}/globals/${slug}${((_b = global.versions) === null || _b === void 0 ? void 0 : _b.drafts) ? '?draft=true' : ''}`,
-                action: `${serverURL}${api}/globals/${slug}?locale=${locale}&depth=0&fallback-locale=null`,
-            } })));
+    return (React.createElement(RenderCustomComponent, { DefaultComponent: DefaultGlobal, CustomComponent: CustomEdit, componentProps: {
+            isLoading: isLoadingDocument || !preferences,
+            data: dataToRender,
+            permissions: globalPermissions,
+            initialState,
+            global,
+            onSave,
+            apiURL: `${serverURL}${api}/globals/${slug}${((_b = global.versions) === null || _b === void 0 ? void 0 : _b.drafts) ? '?draft=true' : ''}`,
+            action: `${serverURL}${api}/globals/${slug}?locale=${locale}&depth=0&fallback-locale=null`,
+        } }));
 };
 export default GlobalView;

package/dist/admin/components/views/Global/index.scss

@@ -21,6 +21,7 @@
       text-overflow: ellipsis;
       margin: 0;
     }
+
     margin-bottom: base(1);
   }
 
@@ -40,11 +41,9 @@
   }
 
   &__edit {
-    background: white;
-    padding: base(5) base(6) base(6);
-    margin-bottom: base(1.5);
+    padding-top: base(1);
+    padding-bottom: base(2);
     flex-grow: 1;
-    overflow-x: scroll;
   }
 
   &__sidebar-wrap {
@@ -54,6 +53,7 @@
     top: 0;
     right: 0;
     overflow: visible;
+    border-left: 1px solid var(--theme-elevation-100);
   }
 
   &__sidebar {
@@ -81,20 +81,25 @@
     top: 0;
     z-index: 2;
     padding-right: $baseline;
+
+    >* {
+      position: relative;
+      z-index: 1;
+    }
   }
 
   &__document-actions--with-preview {
     display: flex;
 
-    > * {
+    >* {
       width: calc(50% - #{base(.5)});
     }
 
-    > *:first-child {
+    >*:first-child {
       margin-right: base(.5);
     }
 
-    > *:last-child {
+    >*:last-child {
       margin-left: base(.5);
     }
 
@@ -129,14 +134,16 @@
   }
 
   &__label {
-    color: $color-gray;
+    color: var(--theme-elevation-400);
   }
 
   &__collection-actions,
   &__api-url {
-    a, button {
+
+    a,
+    button {
       cursor: pointer;
-      font-weight: 600;
+      font-weight: bold;
       text-decoration: none;
 
       &:hover {
@@ -151,12 +158,6 @@
     }
   }
 
-  @include large-break {
-    &__edit {
-      padding: base(3.5);
-    }
-  }
-
   @include mid-break {
     &__main {
       width: 100%;
@@ -174,8 +175,8 @@
     }
 
     &__edit {
-      padding: $baseline;
-      margin-bottom: $baseline;
+      padding-top: 0;
+      padding-bottom: 0;
     }
 
     &__document-actions {
@@ -189,7 +190,7 @@
     &__document-actions,
     &__meta,
     &__sidebar-fields {
-      padding-left: $baseline;
+      padding-left: var(--gutter-h);
     }
 
     &__api-url {
@@ -197,9 +198,8 @@
     }
 
     &__collection-actions {
-      margin-top: base(.5);
-      padding-left: $baseline;
-      padding-bottom: 0;
+      border-top: 1px solid var(--theme-elevation-100);
+      padding: base(1) 0 0 base(1);
       order: 1;
 
       li {

package/dist/admin/components/views/NotFound/index.d.ts

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

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

@@ -4,7 +4,7 @@ import Eyebrow from '../../elements/Eyebrow';
 import { useStepNav } from '../../elements/StepNav';
 import Button from '../../elements/Button';
 import Meta from '../../utilities/Meta';
-import './index.scss';
+import { Gutter } from '../../elements/Gutter';
 const baseClass = 'not-found';
 const NotFound = () => {
     const { setStepNav } = useStepNav();
@@ -17,7 +17,7 @@ const NotFound = () => {
     return (React.createElement("div", { className: baseClass },
         React.createElement(Meta, { title: "Not Found", description: "Page not found", keywords: "404, Not found, Payload, CMS" }),
         React.createElement(Eyebrow, null),
-        React.createElement("div", { className: `${baseClass}__wrap` },
+        React.createElement(Gutter, { className: `${baseClass}__wrap` },
             React.createElement("h1", null, "Nothing found"),
             React.createElement("p", null, "Sorry\u2014there is nothing to correspond with your request."),
             React.createElement(Button, { el: "link", to: `${admin}` }, "Back to Dashboard"))));

package/dist/admin/components/views/Version/Compare/index.scss

@@ -2,11 +2,11 @@
 
 .compare-version {
   &__error-loading {
-    border: 1px solid $color-red;
+    border: 1px solid var(--theme-error-500);
     min-height: base(2);
     padding: base(.5) base(.75);
-    background-color: $color-red;
-    color: white;
+    background-color: var(--theme-error-500);
+    color: var(--theme-elevation-0);
   }
 
   &__label {

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss

@@ -5,7 +5,7 @@
 
   &__locale-label {
     margin-right: base(.25);
-    background: $color-background-gray;
+    background: var(--theme-elevation-100);
     padding: base(.25);
     border-radius: $style-radius-m;
   }
@@ -13,13 +13,13 @@
   &__wrap {
     margin: base(.5) 0;
     padding-left: base(.5);
-    border-left: $style-stroke-width-s solid $color-light-gray;
+    border-left: $style-stroke-width-s solid var(--theme-elevation-150);
   }
 
   &__no-rows {
     font-family: monospace;
-    background-color: #fafbfc;
-    padding: base(.125) 0;
+    background-color: var(--theme-elevation-50);
+    padding: base(.125) base(.5);
     margin: base(.125) 0;
   }
 }

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/Nested/index.scss

@@ -3,6 +3,6 @@
 .nested-diff {
   &__wrap--gutter {
     padding-left: base(1);
-    border-left: $style-stroke-width-s solid $color-light-gray;
+    border-left: $style-stroke-width-s solid var(--theme-elevation-150);
   }
 }

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/Relationship/index.js

@@ -4,6 +4,7 @@ import { useConfig } from '../../../../../utilities/Config';
 import { useLocale } from '../../../../../utilities/Locale';
 import { fieldAffectsData, fieldIsPresentationalOnly } from '../../../../../../../fields/config/types';
 import Label from '../../Label';
+import { diffStyles } from '../styles';
 import './index.scss';
 const baseClass = 'relationship-diff';
 const generateLabelFromValue = (collections, field, locale, value) => {
@@ -62,7 +63,7 @@ const Relationship = ({ field, version, comparison }) => {
         React.createElement(Label, null,
             locale && (React.createElement("span", { className: `${baseClass}__locale-label` }, locale)),
             field.label),
-        React.createElement(ReactDiffViewer, { oldValue: typeof comparisonToRender !== 'undefined' ? String(comparisonToRender) : placeholder, newValue: typeof versionToRender !== 'undefined' ? String(versionToRender) : placeholder, splitView: true, hideLineNumbers: true, showDiffOnly: false })));
+        React.createElement(ReactDiffViewer, { styles: diffStyles, oldValue: typeof comparisonToRender !== 'undefined' ? String(comparisonToRender) : placeholder, newValue: typeof versionToRender !== 'undefined' ? String(versionToRender) : placeholder, splitView: true, hideLineNumbers: true, showDiffOnly: false })));
     return null;
 };
 export default Relationship;

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss

@@ -3,7 +3,7 @@
 .relationship-diff {
   &__locale-label {
     margin-right: base(.25);
-    background: $color-background-gray;
+    background: var(--theme-elevation-100);
     padding: base(.25);
     border-radius: $style-radius-m;
   }

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/Tabs/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Props } from '../types';
+import { TabsField } from '../../../../../../../fields/config/types';
+declare const Tabs: React.FC<Props & {
+    field: TabsField;
+}>;
+export default Tabs;

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/Tabs/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import RenderFieldsToDiff from '../..';
+const baseClass = 'tabs-diff';
+const Tabs = ({ version, comparison, permissions, field, locales, fieldComponents, }) => (React.createElement("div", { className: baseClass },
+    React.createElement("div", { className: `${baseClass}__wrap` }, field.tabs.map((tab, i) => {
+        return (React.createElement(RenderFieldsToDiff, { key: i, locales: locales, version: version, comparison: comparison, fieldPermissions: permissions, fields: tab.fields, fieldComponents: fieldComponents }));
+    }))));
+export default Tabs;

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/Text/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
 import Label from '../../Label';
+import { diffStyles } from '../styles';
 import './index.scss';
 const baseClass = 'text-diff';
 const Text = ({ field, locale, version, comparison, isRichText = false, diffMethod }) => {
@@ -19,7 +20,7 @@ const Text = ({ field, locale, version, comparison, isRichText = false, diffMeth
         React.createElement(Label, null,
             locale && (React.createElement("span", { className: `${baseClass}__locale-label` }, locale)),
             field.label),
-        React.createElement(ReactDiffViewer, { compareMethod: DiffMethod[diffMethod], oldValue: typeof comparisonToRender !== 'undefined' ? String(comparisonToRender) : placeholder, newValue: typeof versionToRender !== 'undefined' ? String(versionToRender) : placeholder, splitView: true, hideLineNumbers: true, showDiffOnly: false })));
+        React.createElement(ReactDiffViewer, { styles: diffStyles, compareMethod: DiffMethod[diffMethod], oldValue: typeof comparisonToRender !== 'undefined' ? String(comparisonToRender) : placeholder, newValue: typeof versionToRender !== 'undefined' ? String(versionToRender) : placeholder, splitView: true, hideLineNumbers: true, showDiffOnly: false })));
     return null;
 };
 export default Text;

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/Text/index.scss

@@ -3,7 +3,7 @@
 .text-diff {
   &__locale-label {
     margin-right: base(.25);
-    background: $color-background-gray;
+    background: var(--theme-elevation-100);
     padding: base(.25);
     border-radius: $style-radius-m;
   }

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/index.d.ts

@@ -10,6 +10,9 @@ declare const _default: {
     row: import("react").FC<import("./types").Props & {
         field: import("../../../../../../fields/config/types").FieldWithSubFields;
     }>;
+    collapsible: import("react").FC<import("./types").Props & {
+        field: import("../../../../../../fields/config/types").FieldWithSubFields;
+    }>;
     group: import("react").FC<import("./types").Props & {
         field: import("../../../../../../fields/config/types").FieldWithSubFields;
     }>;
@@ -29,5 +32,8 @@ declare const _default: {
         field: import("../../../../../../fields/config/types").RelationshipField;
     }>;
     point: import("react").FC<import("./types").Props>;
+    tabs: import("react").FC<import("./types").Props & {
+        field: import("../../../../../../fields/config/types").TabsField;
+    }>;
 };
 export default _default;

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/index.js

@@ -2,6 +2,7 @@ import Text from './Text';
 import Nested from './Nested';
 import Iterable from './Iterable';
 import Relationship from './Relationship';
+import Tabs from './Tabs';
 export default {
     text: Text,
     textarea: Text,
@@ -11,6 +12,7 @@ export default {
     checkbox: Text,
     radio: Text,
     row: Nested,
+    collapsible: Nested,
     group: Nested,
     array: Iterable,
     blocks: Iterable,
@@ -20,4 +22,5 @@ export default {
     relationship: Relationship,
     upload: Relationship,
     point: Text,
+    tabs: Tabs,
 };

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/styles.d.ts

@@ -0,0 +1,13 @@
+export declare const diffStyles: {
+    variables: {
+        light: {
+            diffViewerBackground: string;
+            addedBackground: string;
+            addedColor: string;
+            removedBackground: string;
+            removedColor: string;
+            wordAddedBackground: string;
+            wordRemovedBackground: string;
+        };
+    };
+};

package/dist/admin/components/views/Version/RenderFieldsToDiff/fields/styles.js

@@ -0,0 +1,13 @@
+export const diffStyles = {
+    variables: {
+        light: {
+            diffViewerBackground: 'transparent',
+            addedBackground: 'var(--theme-success-100)',
+            addedColor: 'var(--theme-success-900)',
+            removedBackground: 'var(--theme-error-100)',
+            removedColor: 'var(--theme-error-900)',
+            wordAddedBackground: 'var(--theme-success-200)',
+            wordRemovedBackground: 'var(--theme-error-200)',
+        },
+    },
+};

package/dist/admin/components/views/Version/RenderFieldsToDiff/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { fieldAffectsData, fieldHasSubFields } from '../../../../../fields/config/types';
 import Nested from './fields/Nested';
-import './index.scss';
 import { diffMethods } from './fields/diffMethods';
+import './index.scss';
 const baseClass = 'render-field-diffs';
 const RenderFieldsToDiff = ({ fields, fieldComponents, fieldPermissions, version, comparison, locales, }) => (React.createElement("div", { className: baseClass }, fields.map((field, i) => {
     var _a, _b, _c;
@@ -29,6 +29,10 @@ const RenderFieldsToDiff = ({ fields, fieldComponents, fieldPermissions, version
             return (React.createElement("div", { className: `${baseClass}__field`, key: i },
                 React.createElement(Component, { diffMethod: diffMethod, locales: locales, field: field, fieldComponents: fieldComponents, version: versionValue, comparison: comparisonValue, permissions: subFieldPermissions, isRichText: isRichText })));
         }
+        if (field.type === 'tabs') {
+            const Tabs = fieldComponents.tabs;
+            return (React.createElement(Tabs, { key: i, version: version, comparison: comparison, field: field, locales: locales, fieldComponents: fieldComponents }));
+        }
         // At this point, we are dealing with a `row` or similar
         if (fieldHasSubFields(field)) {
             return (React.createElement(Nested, { key: i, locales: locales, disableGutter: true, field: field, fieldComponents: fieldComponents, version: version, comparison: comparison, permissions: fieldPermissions }));