@payloadcms/ui 3.0.0-canary.fb81f02 → 3.0.0

package/dist/elements/DocumentFields/index.js

@@ -1,65 +1,127 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fieldIsSidebar } from 'payload/shared';
 import React from 'react';
+import { useFormInitializing, useFormProcessing } from '../../forms/Form/context.js';
 import { RenderFields } from '../../forms/RenderFields/index.js';
 import { Gutter } from '../Gutter/index.js';
 import './index.scss';
 const baseClass = 'document-fields';
-export const DocumentFields = ({ AfterFields, BeforeFields, description, docPermissions, fieldMap, forceSidebarWrap, readOnly, schemaPath })=>{
-    const mainFields = fieldMap.filter(({ isSidebar })=>!isSidebar);
-    const sidebarFields = fieldMap.filter(({ isSidebar })=>isSidebar);
-    const hasSidebarFields = sidebarFields && sidebarFields.length > 0;
-    return /*#__PURE__*/ _jsxs("div", {
-        className: [
-            baseClass,
-            hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,
-            forceSidebarWrap && `${baseClass}--force-sidebar-wrap`
-        ].filter(Boolean).join(' '),
-        children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: `${baseClass}__main`,
-                children: /*#__PURE__*/ _jsxs(Gutter, {
-                    className: `${baseClass}__edit`,
-                    children: [
-                        /*#__PURE__*/ _jsx("header", {
-                            className: `${baseClass}__header`,
-                            children: description && /*#__PURE__*/ _jsx("div", {
-                                className: `${baseClass}__sub-header`
-                            })
-                        }),
-                        BeforeFields,
-                        /*#__PURE__*/ _jsx(RenderFields, {
-                            className: `${baseClass}__fields`,
-                            fieldMap: mainFields,
-                            forceRender: 10,
-                            path: "",
-                            permissions: docPermissions?.fields,
-                            readOnly: readOnly,
-                            schemaPath: schemaPath
-                        }),
-                        AfterFields
-                    ]
-                })
-            }),
-            hasSidebarFields && /*#__PURE__*/ _jsx("div", {
-                className: `${baseClass}__sidebar-wrap`,
-                children: /*#__PURE__*/ _jsx("div", {
-                    className: `${baseClass}__sidebar`,
-                    children: /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__sidebar-fields`,
-                        children: /*#__PURE__*/ _jsx(RenderFields, {
-                            fieldMap: sidebarFields,
-                            forceRender: 10,
-                            path: "",
-                            permissions: docPermissions?.fields,
-                            readOnly: readOnly,
-                            schemaPath: schemaPath
-                        })
-                    })
-                })
+export const DocumentFields = t0 => {
+  const $ = _c(16);
+  const {
+    AfterFields,
+    BeforeFields,
+    Description,
+    docPermissions,
+    fields,
+    forceSidebarWrap,
+    readOnly: readOnlyProp,
+    schemaPathSegments
+  } = t0;
+  let t1;
+  if ($[0] !== fields) {
+    t1 = () => fields.reduce((acc, field) => {
+      if (fieldIsSidebar(field)) {
+        acc.sidebarFields.push(field);
+        acc.mainFields.push(null);
+        acc.hasSidebarFields = true;
+      } else {
+        acc.mainFields.push(field);
+        acc.sidebarFields.push(null);
+      }
+      return acc;
+    }, {
+      hasSidebarFields: false,
+      mainFields: [],
+      sidebarFields: []
+    });
+    $[0] = fields;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [t2] = React.useState(t1);
+  const {
+    hasSidebarFields,
+    mainFields,
+    sidebarFields
+  } = t2;
+  const formInitializing = useFormInitializing();
+  const formProcessing = useFormProcessing();
+  const readOnly = readOnlyProp || formInitializing || formProcessing;
+  const t3 = hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`;
+  const t4 = forceSidebarWrap && `${baseClass}--force-sidebar-wrap`;
+  let t5;
+  if ($[2] !== t3 || $[3] !== t4) {
+    t5 = [baseClass, t3, t4].filter(Boolean);
+    $[2] = t3;
+    $[3] = t4;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  const t6 = t5.join(" ");
+  let t7;
+  if ($[5] !== Description || $[6] !== schemaPathSegments || $[7] !== docPermissions?.fields || $[8] !== mainFields || $[9] !== readOnly || $[10] !== BeforeFields || $[11] !== AfterFields || $[12] !== hasSidebarFields || $[13] !== sidebarFields || $[14] !== t6) {
+    t7 = _jsxs("div", {
+      className: t6,
+      children: [_jsx("div", {
+        className: `${baseClass}__main`,
+        children: _jsxs(Gutter, {
+          className: `${baseClass}__edit`,
+          children: [Description ? _jsx("header", {
+            className: `${baseClass}__header`,
+            children: _jsx("div", {
+              className: `${baseClass}__sub-header`,
+              children: Description
             })
-        ]
+          }) : null, BeforeFields, _jsx(RenderFields, {
+            className: `${baseClass}__fields`,
+            fields: mainFields,
+            forceRender: true,
+            parentIndexPath: "",
+            parentPath: "",
+            parentSchemaPath: schemaPathSegments.join("."),
+            permissions: docPermissions?.fields,
+            readOnly
+          }), AfterFields]
+        })
+      }), hasSidebarFields ? _jsx("div", {
+        className: `${baseClass}__sidebar-wrap`,
+        children: _jsx("div", {
+          className: `${baseClass}__sidebar`,
+          children: _jsx("div", {
+            className: `${baseClass}__sidebar-fields`,
+            children: _jsx(RenderFields, {
+              fields: sidebarFields,
+              forceRender: true,
+              parentIndexPath: "",
+              parentPath: "",
+              parentSchemaPath: schemaPathSegments.join("."),
+              permissions: docPermissions?.fields,
+              readOnly
+            })
+          })
+        })
+      }) : null]
     });
+    $[5] = Description;
+    $[6] = schemaPathSegments;
+    $[7] = docPermissions?.fields;
+    $[8] = mainFields;
+    $[9] = readOnly;
+    $[10] = BeforeFields;
+    $[11] = AfterFields;
+    $[12] = hasSidebarFields;
+    $[13] = sidebarFields;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  return t7;
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/DocumentFields/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/DocumentFields/index.tsx"],"sourcesContent":["'use client'\nimport type { Description, DocumentPermissions, FieldMap } from 'payload'\n\nimport React from 'react'\n\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'document-fields'\n\ntype Args = {\n  AfterFields?: React.ReactNode\n  BeforeFields?: React.ReactNode\n  description?: Description\n  docPermissions: DocumentPermissions\n  fieldMap: FieldMap\n  forceSidebarWrap?: boolean\n  readOnly: boolean\n  schemaPath: string\n}\n\nexport const DocumentFields: React.FC<Args> = ({\n  AfterFields,\n  BeforeFields,\n  description,\n  docPermissions,\n  fieldMap,\n  forceSidebarWrap,\n  readOnly,\n  schemaPath,\n}) => {\n  const mainFields = fieldMap.filter(({ isSidebar }) => !isSidebar)\n\n  const sidebarFields = fieldMap.filter(({ isSidebar }) => isSidebar)\n\n  const hasSidebarFields = sidebarFields && sidebarFields.length > 0\n\n  return (\n    <div\n      className={[\n        baseClass,\n        hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,\n        forceSidebarWrap && `${baseClass}--force-sidebar-wrap`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__main`}>\n        <Gutter className={`${baseClass}__edit`}>\n          <header className={`${baseClass}__header`}>\n            {description && (\n              <div className={`${baseClass}__sub-header`}>\n                {/* <ViewDescription description={description} /> */}\n              </div>\n            )}\n          </header>\n          {BeforeFields}\n          <RenderFields\n            className={`${baseClass}__fields`}\n            fieldMap={mainFields}\n            forceRender={10}\n            path=\"\"\n            permissions={docPermissions?.fields}\n            readOnly={readOnly}\n            schemaPath={schemaPath}\n          />\n          {AfterFields}\n        </Gutter>\n      </div>\n      {hasSidebarFields && (\n        <div className={`${baseClass}__sidebar-wrap`}>\n          <div className={`${baseClass}__sidebar`}>\n            <div className={`${baseClass}__sidebar-fields`}>\n              <RenderFields\n                fieldMap={sidebarFields}\n                forceRender={10}\n                path=\"\"\n                permissions={docPermissions?.fields}\n                readOnly={readOnly}\n                schemaPath={schemaPath}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["React","RenderFields","Gutter","baseClass","DocumentFields","AfterFields","BeforeFields","description","docPermissions","fieldMap","forceSidebarWrap","readOnly","schemaPath","mainFields","filter","isSidebar","sidebarFields","hasSidebarFields","length","div","className","Boolean","join","header","forceRender","path","permissions","fields"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,YAAY,QAAQ,oCAAmC;AAChE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAalB,OAAO,MAAMC,iBAAiC,CAAC,EAC7CC,WAAW,EACXC,YAAY,EACZC,WAAW,EACXC,cAAc,EACdC,QAAQ,EACRC,gBAAgB,EAChBC,QAAQ,EACRC,UAAU,EACX;IACC,MAAMC,aAAaJ,SAASK,MAAM,CAAC,CAAC,EAAEC,SAAS,EAAE,GAAK,CAACA;IAEvD,MAAMC,gBAAgBP,SAASK,MAAM,CAAC,CAAC,EAAEC,SAAS,EAAE,GAAKA;IAEzD,MAAME,mBAAmBD,iBAAiBA,cAAcE,MAAM,GAAG;IAEjE,qBACE,MAACC;QACCC,WAAW;YACTjB;YACAc,mBAAmB,CAAC,EAAEd,UAAU,aAAa,CAAC,GAAG,CAAC,EAAEA,UAAU,YAAY,CAAC;YAC3EO,oBAAoB,CAAC,EAAEP,UAAU,oBAAoB,CAAC;SACvD,CACEW,MAAM,CAACO,SACPC,IAAI,CAAC;;0BAER,KAACH;gBAAIC,WAAW,CAAC,EAAEjB,UAAU,MAAM,CAAC;0BAClC,cAAA,MAACD;oBAAOkB,WAAW,CAAC,EAAEjB,UAAU,MAAM,CAAC;;sCACrC,KAACoB;4BAAOH,WAAW,CAAC,EAAEjB,UAAU,QAAQ,CAAC;sCACtCI,6BACC,KAACY;gCAAIC,WAAW,CAAC,EAAEjB,UAAU,YAAY,CAAC;;;wBAK7CG;sCACD,KAACL;4BACCmB,WAAW,CAAC,EAAEjB,UAAU,QAAQ,CAAC;4BACjCM,UAAUI;4BACVW,aAAa;4BACbC,MAAK;4BACLC,aAAalB,gBAAgBmB;4BAC7BhB,UAAUA;4BACVC,YAAYA;;wBAEbP;;;;YAGJY,kCACC,KAACE;gBAAIC,WAAW,CAAC,EAAEjB,UAAU,cAAc,CAAC;0BAC1C,cAAA,KAACgB;oBAAIC,WAAW,CAAC,EAAEjB,UAAU,SAAS,CAAC;8BACrC,cAAA,KAACgB;wBAAIC,WAAW,CAAC,EAAEjB,UAAU,gBAAgB,CAAC;kCAC5C,cAAA,KAACF;4BACCQ,UAAUO;4BACVQ,aAAa;4BACbC,MAAK;4BACLC,aAAalB,gBAAgBmB;4BAC7BhB,UAAUA;4BACVC,YAAYA;;;;;;;AAQ5B,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","fieldIsSidebar","React","useFormInitializing","useFormProcessing","RenderFields","Gutter","baseClass","DocumentFields","t0","$","AfterFields","BeforeFields","Description","docPermissions","fields","forceSidebarWrap","readOnly","readOnlyProp","schemaPathSegments","t1","reduce","acc","field","sidebarFields","push","mainFields","hasSidebarFields","t2","useState","formInitializing","formProcessing","t3","t4","t5","filter","Boolean","t6","join","t7","_jsxs","className","children","_jsx","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions"],"sources":["../../../src/elements/DocumentFields/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, SanitizedDocumentPermissions } from 'payload'\n\nimport { fieldIsSidebar } from 'payload/shared'\nimport React from 'react'\n\nimport { useFormInitializing, useFormProcessing } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'document-fields'\n\ntype Args = {\n  readonly AfterFields?: React.ReactNode\n  readonly BeforeFields?: React.ReactNode\n  readonly Description?: React.ReactNode\n  readonly docPermissions: SanitizedDocumentPermissions\n  readonly fields: ClientField[]\n  readonly forceSidebarWrap?: boolean\n  readonly readOnly?: boolean\n  readonly schemaPathSegments: string[]\n}\n\nexport const DocumentFields: React.FC<Args> = ({\n  AfterFields,\n  BeforeFields,\n  Description,\n  docPermissions,\n  fields,\n  forceSidebarWrap,\n  readOnly: readOnlyProp,\n  schemaPathSegments,\n}) => {\n  const [{ hasSidebarFields, mainFields, sidebarFields }] = React.useState<{\n    hasSidebarFields: boolean\n    mainFields: ClientField[]\n    sidebarFields: ClientField[]\n  }>(() => {\n    return fields.reduce(\n      (acc, field) => {\n        if (fieldIsSidebar(field)) {\n          acc.sidebarFields.push(field)\n          acc.mainFields.push(null)\n          acc.hasSidebarFields = true\n        } else {\n          acc.mainFields.push(field)\n          acc.sidebarFields.push(null)\n        }\n        return acc\n      },\n      {\n        hasSidebarFields: false as boolean,\n        mainFields: [] as ClientField[],\n        sidebarFields: [] as ClientField[],\n      },\n    )\n  })\n\n  const formInitializing = useFormInitializing()\n  const formProcessing = useFormProcessing()\n\n  const readOnly = readOnlyProp || formInitializing || formProcessing\n\n  return (\n    <div\n      className={[\n        baseClass,\n        hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,\n        forceSidebarWrap && `${baseClass}--force-sidebar-wrap`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__main`}>\n        <Gutter className={`${baseClass}__edit`}>\n          {Description ? (\n            <header className={`${baseClass}__header`}>\n              <div className={`${baseClass}__sub-header`}>{Description}</div>\n            </header>\n          ) : null}\n          {BeforeFields}\n          <RenderFields\n            className={`${baseClass}__fields`}\n            fields={mainFields}\n            forceRender\n            parentIndexPath=\"\"\n            parentPath=\"\"\n            parentSchemaPath={schemaPathSegments.join('.')}\n            permissions={docPermissions?.fields}\n            readOnly={readOnly}\n          />\n          {AfterFields}\n        </Gutter>\n      </div>\n      {hasSidebarFields ? (\n        <div className={`${baseClass}__sidebar-wrap`}>\n          <div className={`${baseClass}__sidebar`}>\n            <div className={`${baseClass}__sidebar-fields`}>\n              <RenderFields\n                fields={sidebarFields}\n                forceRender\n                parentIndexPath=\"\"\n                parentPath=\"\"\n                parentSchemaPath={schemaPathSegments.join('.')}\n                permissions={docPermissions?.fields}\n                readOnly={readOnly}\n              />\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/DocumentFields/index.scss

@@ -1,91 +1,147 @@
 @import '../../scss/styles.scss';
 
-.document-fields {
-  width: 100%;
-  display: flex;
-  --doc-sidebar-width: 325px;
-
-  &--has-sidebar {
-    .document-fields {
-      &__main {
-        width: 66.66%;
-      }
+@layer payload-default {
+  .document-fields {
+    width: 100%;
+    display: flex;
+    --doc-sidebar-width: 325px;
 
-      &__edit {
-        [dir='ltr'] & {
-          top: 0;
-          right: 0;
-          border-right: 1px solid var(--theme-elevation-100);
-          padding-right: calc(var(--base) * 2);
+    &--has-sidebar {
+      .document-fields {
+        &__main {
+          width: 66.66%;
         }
 
-        [dir='rtl'] & {
-          top: 0;
-          left: 0;
-          border-left: 1px solid var(--theme-elevation-100);
-          padding-left: calc(var(--base) * 2);
+        &__edit {
+          [dir='ltr'] & {
+            top: 0;
+            right: 0;
+            border-right: 1px solid var(--theme-elevation-100);
+            padding-right: calc(var(--base) * 2);
+          }
+
+          [dir='rtl'] & {
+            top: 0;
+            left: 0;
+            border-left: 1px solid var(--theme-elevation-100);
+            padding-left: calc(var(--base) * 2);
+          }
         }
-      }
 
-      &__fields {
-        & > .tabs-field,
-        & > .group-field {
-          margin-right: calc(var(--base) * -2);
+        &__fields {
+          & > .tabs-field,
+          & > .group-field {
+            margin-right: calc(var(--base) * -2);
+          }
         }
       }
     }
-  }
 
-  &__main {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    flex-grow: 1;
-  }
+    &__main {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+      flex-grow: 1;
+    }
 
-  &__edit {
-    padding-top: calc(var(--base) * 1.5);
-    padding-bottom: var(--spacing-view-bottom);
-    flex-grow: 1;
-  }
+    &__edit {
+      padding-top: calc(var(--base) * 1.5);
+      padding-bottom: var(--spacing-view-bottom);
+      flex-grow: 1;
+    }
 
-  &__sidebar-wrap {
-    position: sticky;
-    top: var(--doc-controls-height);
-    width: 33.33%;
-    height: calc(100vh - var(--doc-controls-height));
-    min-width: var(--doc-sidebar-width);
-    flex-shrink: 0;
-  }
+    &__sidebar-wrap {
+      position: sticky;
+      top: var(--doc-controls-height);
+      width: 33.33%;
+      height: calc(100vh - var(--doc-controls-height));
+      min-width: var(--doc-sidebar-width);
+      flex-shrink: 0;
+    }
 
-  &__sidebar {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-  }
+    &__sidebar {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+    }
 
-  &__sidebar-fields {
-    display: flex;
-    flex-direction: column;
-    gap: var(--base);
-    padding-top: calc(var(--base) * 1.5);
-    padding-left: calc(var(--base) * 2);
-    padding-right: var(--gutter-h);
-    padding-bottom: var(--spacing-view-bottom);
-  }
+    &__sidebar-fields {
+      display: flex;
+      flex-direction: column;
+      gap: var(--base);
+      padding-top: calc(var(--base) * 1.5);
+      padding-left: calc(var(--base) * 2);
+      padding-right: var(--gutter-h);
+      padding-bottom: var(--spacing-view-bottom);
+    }
 
-  &__label {
-    color: var(--theme-elevation-400);
-  }
+    &__label {
+      color: var(--theme-elevation-400);
+    }
+
+    &--force-sidebar-wrap {
+      display: block;
 
-  &--force-sidebar-wrap {
-    display: block;
+      .document-fields {
+        &__main {
+          width: 100%;
+          min-height: initial;
+        }
+
+        &__sidebar-wrap {
+          position: static;
+          width: 100%;
+          height: initial;
+          border-left: 0;
+        }
+
+        &__sidebar {
+          padding-bottom: base(3.5);
+          overflow: visible;
+        }
+
+        &__sidebar-fields {
+          padding-top: 0;
+          padding-left: var(--gutter-h);
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    @include mid-break {
+      display: block;
+
+      &--has-sidebar {
+        .document-fields {
+          &__main {
+            width: 100%;
+          }
+
+          &__edit {
+            [dir='ltr'] & {
+              border-right: 0;
+              padding-right: var(--gutter-h);
+            }
+
+            [dir='rtl'] & {
+              border-left: 0;
+              padding-left: var(--gutter-h);
+            }
+          }
+
+          &__fields {
+            & > .tabs-field,
+            & > .group-field {
+              margin-right: calc(var(--gutter-h) * -1);
+            }
+          }
+        }
+      }
 
-    .document-fields {
       &__main {
         width: 100%;
         min-height: initial;
@@ -98,95 +154,41 @@
         border-left: 0;
       }
 
-      &__sidebar {
-        padding-bottom: base(3.5);
-        overflow: visible;
+      &__form {
+        display: block;
       }
 
       &__sidebar-fields {
         padding-top: 0;
         padding-left: var(--gutter-h);
+        padding-right: var(--gutter-h);
         padding-bottom: 0;
-      }
-    }
-  }
-
-  @include mid-break {
-    display: block;
+        gap: base(0.5);
 
-    &--has-sidebar {
-      .document-fields {
-        &__main {
-          width: 100%;
-        }
-
-        &__edit {
-          [dir='ltr'] & {
-            border-right: 0;
-            padding-right: var(--gutter-h);
-          }
-
-          [dir='rtl'] & {
-            border-left: 0;
-            padding-left: var(--gutter-h);
-          }
+        [dir='ltr'] & {
+          padding-right: var(--gutter-h);
         }
 
-        &__fields {
-          & > .tabs-field,
-          & > .group-field {
-            margin-right: calc(var(--gutter-h) * -1);
-          }
+        [dir='rtl'] & {
+          padding-left: var(--gutter-h);
         }
       }
-    }
-
-    &__main {
-      width: 100%;
-      min-height: initial;
-    }
-
-    &__sidebar-wrap {
-      position: static;
-      width: 100%;
-      height: initial;
-      border-left: 0;
-    }
 
-    &__form {
-      display: block;
+      &__sidebar {
+        padding-bottom: base(3.5);
+        overflow: visible;
+      }
     }
 
-    &__sidebar-fields {
-      padding-top: 0;
-      padding-left: var(--gutter-h);
-      padding-right: var(--gutter-h);
-      padding-bottom: 0;
-      gap: base(0.5);
-
-      [dir='ltr'] & {
-        padding-right: var(--gutter-h);
+    @include small-break {
+      &__sidebar-wrap {
+        min-width: initial;
+        width: 100%;
       }
 
-      [dir='rtl'] & {
-        padding-left: var(--gutter-h);
+      &__edit {
+        padding-top: calc(var(--base) / 2);
       }
     }
-
-    &__sidebar {
-      padding-bottom: base(3.5);
-      overflow: visible;
-    }
-  }
-
-  @include small-break {
-    &__sidebar-wrap {
-      min-width: initial;
-      width: 100%;
-    }
-
-    &__edit {
-      padding-top: calc(var(--base) / 2);
-    }
   }
 }

package/dist/elements/DocumentLocked/index.d.ts

@@ -0,0 +1,12 @@
+import type { ClientUser } from 'payload';
+import React from 'react';
+import './index.scss';
+export declare const DocumentLocked: React.FC<{
+    handleGoBack: () => void;
+    isActive: boolean;
+    onReadOnly: () => void;
+    onTakeOver: () => void;
+    updatedAt?: null | number;
+    user?: ClientUser | number | string;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/DocumentLocked/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentLocked/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAoB,MAAM,OAAO,CAAA;AAMxC,OAAO,cAAc,CAAA;AAoBrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;CACpC,CA8DA,CAAA"}