@payloadcms/next 3.0.0-beta.110 → 3.0.0-beta.112

package/dist/views/ForgotPassword/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Button","formatAdminURL","Translation","LinkImport","React","Fragment","ForgotPasswordForm","generateForgotPasswordMetadata","Link","default","forgotPasswordBaseClass","ForgotPasswordView","initPageResult","req","i18n","payload","config","user","admin","routes","account","accountRoute","login","loginRoute","adminRoute","_jsxs","_jsx","t","elements","0","children","href","path","i18nKey","buttonStyle","el","size","to"],"sources":["../../../src/views/ForgotPassword/index.tsx"],"sourcesContent":["import type { AdminViewProps } from 'payload'\n\nimport { Button } from '@payloadcms/ui'\nimport { formatAdminURL, Translation } from '@payloadcms/ui/shared'\nimport LinkImport from 'next/link.js'\nimport React, { Fragment } from 'react'\n\nimport { ForgotPasswordForm } from './ForgotPasswordForm/index.js'\n\nexport { generateForgotPasswordMetadata } from './meta.js'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\nexport const forgotPasswordBaseClass = 'forgot-password'\n\nexport const ForgotPasswordView: React.FC<AdminViewProps> = ({ initPageResult }) => {\n  const {\n    req: {\n      i18n,\n      payload: { config },\n      user,\n    },\n  } = initPageResult\n\n  const {\n    admin: {\n      routes: { account: accountRoute, login: loginRoute },\n    },\n    routes: { admin: adminRoute },\n  } = config\n\n  if (user) {\n    return (\n      <Fragment>\n        <h1>{i18n.t('authentication:alreadyLoggedIn')}</h1>\n        <p>\n          <Translation\n            elements={{\n              '0': ({ children }) => (\n                <Link\n                  href={formatAdminURL({\n                    adminRoute,\n                    path: accountRoute,\n                  })}\n                >\n                  {children}\n                </Link>\n              ),\n            }}\n            i18nKey=\"authentication:loggedInChangePassword\"\n            t={i18n.t}\n          />\n        </p>\n        <br />\n        <Button buttonStyle=\"secondary\" el=\"link\" Link={Link} size=\"large\" to={adminRoute}>\n          {i18n.t('general:backToDashboard')}\n        </Button>\n      </Fragment>\n    )\n  }\n\n  return (\n    <Fragment>\n      <ForgotPasswordForm />\n      <Link\n        href={formatAdminURL({\n          adminRoute,\n          path: loginRoute,\n        })}\n      >\n        {i18n.t('authentication:backToLogin')}\n      </Link>\n    </Fragment>\n  )\n}\n"],"mappings":";AAEA,SAASA,MAAM,QAAQ;AACvB,SAASC,cAAc,EAAEC,WAAW,QAAQ;AAC5C,OAAOC,UAAA,MAAgB;AACvB,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,kBAAkB,QAAQ;AAEnC,SAASC,8BAA8B,QAAQ;AAE/C,MAAMC,IAAA,GAAQL,UAAA,CAAWM,OAAO,IAAIN,UAAA;AACpC,OAAO,MAAMO,uBAAA,GAA0B;AAEvC,OAAO,MAAMC,kBAAA,GAA+CA,CAAC;EAAEC;AAAc,CAAE;EAC7E,MAAM;IACJC,GAAA,EAAK;MACHC,IAAI;MACJC,OAAA,EAAS;QAAEC;MAAM,CAAE;MACnBC;IAAI;EACL,CACF,GAAGL,cAAA;EAEJ,MAAM;IACJM,KAAA,EAAO;MACLC,MAAA,EAAQ;QAAEC,OAAA,EAASC,YAAY;QAAEC,KAAA,EAAOC;MAAU;IAAE,CACrD;IACDJ,MAAA,EAAQ;MAAED,KAAA,EAAOM;IAAU;EAAE,CAC9B,GAAGR,MAAA;EAEJ,IAAIC,IAAA,EAAM;IACR,oBACEQ,KAAA,CAACpB,QAAA;8BACCqB,IAAA,CAAC;kBAAIZ,IAAA,CAAKa,CAAC,CAAC;uBACZD,IAAA,CAAC;kBACC,aAAAA,IAAA,CAACxB,WAAA;UACC0B,QAAA,EAAU;YACR,KAAKC,CAAC;cAAEC;YAAQ,CAAE,kBAChBJ,IAAA,CAAClB,IAAA;cACCuB,IAAA,EAAM9B,cAAA,CAAe;gBACnBuB,UAAA;gBACAQ,IAAA,EAAMX;cACR;wBAECS;;UAGP;UACAG,OAAA,EAAQ;UACRN,CAAA,EAAGb,IAAA,CAAKa;;uBAGZD,IAAA,CAAC,W,aACDA,IAAA,CAAC1B,MAAA;QAAOkC,WAAA,EAAY;QAAYC,EAAA,EAAG;QAAO3B,IAAA,EAAMA,IAAA;QAAM4B,IAAA,EAAK;QAAQC,EAAA,EAAIb,UAAA;kBACpEV,IAAA,CAAKa,CAAC,CAAC;;;EAIhB;EAEA,oBACEF,KAAA,CAACpB,QAAA;4BACCqB,IAAA,CAACpB,kBAAA,O,aACDoB,IAAA,CAAClB,IAAA;MACCuB,IAAA,EAAM9B,cAAA,CAAe;QACnBuB,UAAA;QACAQ,IAAA,EAAMT;MACR;gBAECT,IAAA,CAAKa,CAAC,CAAC;;;AAIhB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Button","formatAdminURL","Translation","LinkImport","React","Fragment","FormHeader","ForgotPasswordForm","generateForgotPasswordMetadata","Link","default","forgotPasswordBaseClass","ForgotPasswordView","initPageResult","req","i18n","payload","config","user","admin","routes","account","accountRoute","login","loginRoute","adminRoute","_jsxs","_jsx","description","elements","0","children","href","path","i18nKey","t","heading","buttonStyle","el","size","to"],"sources":["../../../src/views/ForgotPassword/index.tsx"],"sourcesContent":["import type { AdminViewProps } from 'payload'\n\nimport { Button } from '@payloadcms/ui'\nimport { formatAdminURL, Translation } from '@payloadcms/ui/shared'\nimport LinkImport from 'next/link.js'\nimport React, { Fragment } from 'react'\n\nimport { FormHeader } from '../../elements/FormHeader/index.js'\nimport { ForgotPasswordForm } from './ForgotPasswordForm/index.js'\n\nexport { generateForgotPasswordMetadata } from './meta.js'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\nexport const forgotPasswordBaseClass = 'forgot-password'\n\nexport const ForgotPasswordView: React.FC<AdminViewProps> = ({ initPageResult }) => {\n  const {\n    req: {\n      i18n,\n      payload: { config },\n      user,\n    },\n  } = initPageResult\n\n  const {\n    admin: {\n      routes: { account: accountRoute, login: loginRoute },\n    },\n    routes: { admin: adminRoute },\n  } = config\n\n  if (user) {\n    return (\n      <Fragment>\n        <FormHeader\n          description={\n            <Translation\n              elements={{\n                '0': ({ children }) => (\n                  <Link\n                    href={formatAdminURL({\n                      adminRoute,\n                      path: accountRoute,\n                    })}\n                  >\n                    {children}\n                  </Link>\n                ),\n              }}\n              i18nKey=\"authentication:loggedInChangePassword\"\n              t={i18n.t}\n            />\n          }\n          heading={i18n.t('authentication:alreadyLoggedIn')}\n        />\n        <Button buttonStyle=\"secondary\" el=\"link\" Link={Link} size=\"large\" to={adminRoute}>\n          {i18n.t('general:backToDashboard')}\n        </Button>\n      </Fragment>\n    )\n  }\n\n  return (\n    <Fragment>\n      <ForgotPasswordForm />\n      <Link\n        href={formatAdminURL({\n          adminRoute,\n          path: loginRoute,\n        })}\n      >\n        {i18n.t('authentication:backToLogin')}\n      </Link>\n    </Fragment>\n  )\n}\n"],"mappings":";AAEA,SAASA,MAAM,QAAQ;AACvB,SAASC,cAAc,EAAEC,WAAW,QAAQ;AAC5C,OAAOC,UAAA,MAAgB;AACvB,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,UAAU,QAAQ;AAC3B,SAASC,kBAAkB,QAAQ;AAEnC,SAASC,8BAA8B,QAAQ;AAE/C,MAAMC,IAAA,GAAQN,UAAA,CAAWO,OAAO,IAAIP,UAAA;AACpC,OAAO,MAAMQ,uBAAA,GAA0B;AAEvC,OAAO,MAAMC,kBAAA,GAA+CA,CAAC;EAAEC;AAAc,CAAE;EAC7E,MAAM;IACJC,GAAA,EAAK;MACHC,IAAI;MACJC,OAAA,EAAS;QAAEC;MAAM,CAAE;MACnBC;IAAI;EACL,CACF,GAAGL,cAAA;EAEJ,MAAM;IACJM,KAAA,EAAO;MACLC,MAAA,EAAQ;QAAEC,OAAA,EAASC,YAAY;QAAEC,KAAA,EAAOC;MAAU;IAAE,CACrD;IACDJ,MAAA,EAAQ;MAAED,KAAA,EAAOM;IAAU;EAAE,CAC9B,GAAGR,MAAA;EAEJ,IAAIC,IAAA,EAAM;IACR,oBACEQ,KAAA,CAACrB,QAAA;8BACCsB,IAAA,CAACrB,UAAA;QACCsB,WAAA,eACED,IAAA,CAACzB,WAAA;UACC2B,QAAA,EAAU;YACR,KAAKC,CAAC;cAAEC;YAAQ,CAAE,kBAChBJ,IAAA,CAAClB,IAAA;cACCuB,IAAA,EAAM/B,cAAA,CAAe;gBACnBwB,UAAA;gBACAQ,IAAA,EAAMX;cACR;wBAECS;;UAGP;UACAG,OAAA,EAAQ;UACRC,CAAA,EAAGpB,IAAA,CAAKoB;;QAGZC,OAAA,EAASrB,IAAA,CAAKoB,CAAC,CAAC;uBAElBR,IAAA,CAAC3B,MAAA;QAAOqC,WAAA,EAAY;QAAYC,EAAA,EAAG;QAAO7B,IAAA,EAAMA,IAAA;QAAM8B,IAAA,EAAK;QAAQC,EAAA,EAAIf,UAAA;kBACpEV,IAAA,CAAKoB,CAAC,CAAC;;;EAIhB;EAEA,oBACET,KAAA,CAACrB,QAAA;4BACCsB,IAAA,CAACpB,kBAAA,O,aACDoB,IAAA,CAAClB,IAAA;MACCuB,IAAA,EAAM/B,cAAA,CAAe;QACnBwB,UAAA;QACAQ,IAAA,EAAMT;MACR;gBAECT,IAAA,CAAKoB,CAAC,CAAC;;;AAIhB","ignoreList":[]}

package/dist/views/List/Default/index.scss

@@ -1,177 +1,179 @@
 @import '../../../scss/styles.scss';
 
-.collection-list {
-  width: 100%;
+@layer payload-default {
+  .collection-list {
+    width: 100%;
 
-  &__wrap {
-    padding-bottom: var(--spacing-view-bottom);
+    &__wrap {
+      padding-bottom: var(--spacing-view-bottom);
 
-    & > *:not(:last-child) {
-      margin-bottom: var(--base);
+      & > *:not(:last-child) {
+        margin-bottom: var(--base);
+      }
     }
-  }
 
-  .list-header {
-    a {
-      text-decoration: none;
-    }
+    .list-header {
+      a {
+        text-decoration: none;
+      }
 
-    .btn--withoutPopup,
-    .btn--withPopup {
-      position: relative;
-      margin: 0 0 base(0.2);
+      .btn--withoutPopup,
+      .btn--withPopup {
+        position: relative;
+        margin: 0 0 base(0.2);
+      }
     }
-  }
-
-  &__sub-header {
-    flex-basis: 100%;
-  }
-
-  .table {
-    table {
-      width: 100%;
-      overflow: auto;
 
-      [class^='cell'] > p,
-      [class^='cell'] > span,
-      [class^='cell'] > a {
-        line-clamp: 4;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 4;
-        overflow: hidden;
-        display: -webkit-box;
-        max-width: 100vw;
-      }
+    &__sub-header {
+      flex-basis: 100%;
+    }
 
-      #heading-_select,
-      .cell-_select {
-        display: flex;
-        min-width: unset;
+    .table {
+      table {
+        width: 100%;
+        overflow: auto;
+
+        [class^='cell'] > p,
+        [class^='cell'] > span,
+        [class^='cell'] > a {
+          line-clamp: 4;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 4;
+          overflow: hidden;
+          display: -webkit-box;
+          max-width: 100vw;
+        }
+
+        #heading-_select,
+        .cell-_select {
+          display: flex;
+          min-width: unset;
+        }
       }
     }
-  }
 
-  &__no-results {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--base);
+    &__no-results {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--base);
 
-    & > * {
-      margin: 0;
+      & > * {
+        margin: 0;
+      }
     }
-  }
 
-  &__page-controls {
-    width: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  .paginator {
-    margin-bottom: 0;
-  }
+    &__page-controls {
+      width: 100%;
+      display: flex;
+      align-items: center;
+    }
 
-  &__page-info {
-    [dir='ltr'] & {
-      margin-right: base(1);
-      margin-left: auto;
+    .paginator {
+      margin-bottom: 0;
     }
-    [dir='rtl'] & {
-      margin-left: base(1);
-      margin-right: auto;
+
+    &__page-info {
+      [dir='ltr'] & {
+        margin-right: base(1);
+        margin-left: auto;
+      }
+      [dir='rtl'] & {
+        margin-left: base(1);
+        margin-right: auto;
+      }
     }
-  }
 
-  &__list-selection {
-    position: fixed;
-    bottom: 0;
-    z-index: 10;
-    padding: base(0.8) 0;
-    width: 100%;
-    background-color: var(--theme-bg);
+    &__list-selection {
+      position: fixed;
+      bottom: 0;
+      z-index: 10;
+      padding: base(0.8) 0;
+      width: 100%;
+      background-color: var(--theme-bg);
 
-    .btn {
-      margin: 0 0 0 base(0.4);
-    }
+      .btn {
+        margin: 0 0 0 base(0.4);
+      }
 
-    .btn {
-      background-color: var(--theme-elevation-100);
-      cursor: pointer;
-      padding: 0 base(0.4);
-      border-radius: $style-radius-s;
+      .btn {
+        background-color: var(--theme-elevation-100);
+        cursor: pointer;
+        padding: 0 base(0.4);
+        border-radius: $style-radius-s;
 
-      &:hover {
-        background-color: var(--theme-elevation-200);
+        &:hover {
+          background-color: var(--theme-elevation-200);
+        }
       }
     }
-  }
 
-  &__list-selection-actions {
-    display: flex;
-    gap: base(0.25);
-  }
+    &__list-selection-actions {
+      display: flex;
+      gap: base(0.25);
+    }
 
-  &__shimmer {
-    margin-top: base(1.75);
-    width: 100%;
-    > div {
-      margin-top: 8px;
+    &__shimmer {
+      margin-top: base(1.75);
+      width: 100%;
+      > div {
+        margin-top: 8px;
+      }
     }
-  }
 
-  @include mid-break {
-    margin-top: base(0.25);
+    @include mid-break {
+      margin-top: base(0.25);
 
-    &__wrap {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
+      &__wrap {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
 
-    &__header {
-      gap: base(0.5);
-    }
+      &__header {
+        gap: base(0.5);
+      }
 
-    &__sub-header {
-      margin-top: 0;
-    }
+      &__sub-header {
+        margin-top: 0;
+      }
 
-    &__search-input {
-      margin: 0;
-    }
+      &__search-input {
+        margin: 0;
+      }
 
-    // on mobile, extend the table all the way to the viewport edges
-    // this is to visually indicate overflowing content
-    .table {
-      display: flex;
-      width: calc(100% + calc(var(--gutter-h) * 2));
-      max-width: unset;
-      left: calc(var(--gutter-h) * -1);
-      position: relative;
-      padding-left: var(--gutter-h);
+      // on mobile, extend the table all the way to the viewport edges
+      // this is to visually indicate overflowing content
+      .table {
+        display: flex;
+        width: calc(100% + calc(var(--gutter-h) * 2));
+        max-width: unset;
+        left: calc(var(--gutter-h) * -1);
+        position: relative;
+        padding-left: var(--gutter-h);
+
+        &::after {
+          content: '';
+          height: 1px;
+          padding-right: var(--gutter-h);
+        }
+      }
 
-      &::after {
-        content: '';
-        height: 1px;
-        padding-right: var(--gutter-h);
+      &__page-controls {
+        flex-wrap: wrap;
       }
-    }
 
-    &__page-controls {
-      flex-wrap: wrap;
-    }
+      &__page-info {
+        margin-left: 0;
+      }
 
-    &__page-info {
-      margin-left: 0;
+      .paginator {
+        width: 100%;
+        margin-bottom: $baseline;
+      }
     }
 
-    .paginator {
-      width: 100%;
-      margin-bottom: $baseline;
+    @include small-break {
+      margin-bottom: base(2.4);
     }
   }
-
-  @include small-break {
-    margin-bottom: base(2.4);
-  }
 }

package/dist/views/LivePreview/IFrame/index.scss

@@ -1,7 +1,9 @@
-.live-preview-iframe {
-  background-color: white;
-  border: 0;
-  width: 100%;
-  height: 100%;
-  transform-origin: top left;
+@layer payload-default {
+  .live-preview-iframe {
+    background-color: white;
+    border: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: top left;
+  }
 }

package/dist/views/LivePreview/Preview/index.scss

@@ -1,41 +1,43 @@
 @import '../../../scss/styles.scss';
 
-.live-preview-window {
-  background-color: var(--theme-bg);
-  width: 60%;
-  flex-shrink: 0;
-  flex-grow: 0;
-  position: sticky;
-  top: var(--doc-controls-height);
-  height: calc(100vh - var(--doc-controls-height));
-  overflow: hidden;
+@layer payload-default {
+  .live-preview-window {
+    background-color: var(--theme-bg);
+    width: 60%;
+    flex-shrink: 0;
+    flex-grow: 0;
+    position: sticky;
+    top: var(--doc-controls-height);
+    height: calc(100vh - var(--doc-controls-height));
+    overflow: hidden;
 
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: flex-start;
-  }
-
-  &__main {
-    flex-grow: 1;
-    height: 100%;
-    width: 100%;
-  }
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: flex-start;
+    }
 
-  &--has-breakpoint {
-    .live-preview-iframe {
-      border: 1px solid var(--theme-elevation-100);
+    &__main {
+      flex-grow: 1;
+      height: 100%;
+      width: 100%;
     }
 
-    .live-preview-window {
-      &__main {
-        padding: var(--base);
+    &--has-breakpoint {
+      .live-preview-iframe {
+        border: 1px solid var(--theme-elevation-100);
+      }
+
+      .live-preview-window {
+        &__main {
+          padding: var(--base);
+        }
       }
     }
-  }
 
-  @include mid-break {
-    width: 100%;
+    @include mid-break {
+      width: 100%;
+    }
   }
 }

package/dist/views/LivePreview/Toolbar/Controls/index.scss

@@ -1,59 +1,61 @@
 @import '../../../../scss/styles.scss';
 
-.live-preview-toolbar-controls {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--base) / 3);
-
-  &__breakpoint {
-    border: none;
-    background: transparent;
-    height: var(--base);
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &__device-size {
+@layer payload-default {
+  .live-preview-toolbar-controls {
     display: flex;
     align-items: center;
-  }
+    gap: calc(var(--base) / 3);
 
-  &__size {
-    width: 50px;
-    height: var(--base);
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--theme-elevation-200);
-    background: var(--theme-elevation-100);
-    border-radius: 2px;
-    font-size: small;
-  }
+    &__breakpoint {
+      border: none;
+      background: transparent;
+      height: var(--base);
 
-  &__zoom {
-    width: 55px;
-    border: none;
-    background: transparent;
-    height: var(--base);
+      &:focus {
+        outline: none;
+      }
+    }
 
-    &:focus {
-      outline: none;
+    &__device-size {
+      display: flex;
+      align-items: center;
     }
-  }
 
-  &__external {
-    flex-shrink: 0;
-    display: flex;
-    width: var(--base);
-    height: var(--base);
-    align-items: center;
-    justify-content: center;
-    padding: 6px 0;
-  }
+    &__size {
+      width: 50px;
+      height: var(--base);
+      display: flex;
+      align-items: center;
+      border: 1px solid var(--theme-elevation-200);
+      background: var(--theme-elevation-100);
+      border-radius: 2px;
+      font-size: small;
+    }
 
-  .popup-button {
-    display: flex;
-    align-items: center;
+    &__zoom {
+      width: 55px;
+      border: none;
+      background: transparent;
+      height: var(--base);
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    &__external {
+      flex-shrink: 0;
+      display: flex;
+      width: var(--base);
+      height: var(--base);
+      align-items: center;
+      justify-content: center;
+      padding: 6px 0;
+    }
+
+    .popup-button {
+      display: flex;
+      align-items: center;
+    }
   }
 }

package/dist/views/LivePreview/Toolbar/SizeInput/index.scss

@@ -1,10 +1,12 @@
-.toolbar-input {
-  width: 50px;
-  height: var(--base);
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--theme-elevation-200);
-  background: var(--theme-elevation-100);
-  border-radius: 2px;
-  font-size: small;
+@layer payload-default {
+  .toolbar-input {
+    width: 50px;
+    height: var(--base);
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--theme-elevation-200);
+    background: var(--theme-elevation-100);
+    border-radius: 2px;
+    font-size: small;
+  }
 }

package/dist/views/LivePreview/Toolbar/index.scss

@@ -1,41 +1,43 @@
 @import '../../../scss/styles.scss';
 
-.live-preview-toolbar {
-  display: flex;
-  background-color: var(--theme-bg);
-  color: var(--theme-text);
-  height: calc(var(--base) * 1.75);
-  align-items: center;
-  flex-shrink: 0;
+@layer payload-default {
+  .live-preview-toolbar {
+    display: flex;
+    background-color: var(--theme-bg);
+    color: var(--theme-text);
+    height: calc(var(--base) * 1.75);
+    align-items: center;
+    flex-shrink: 0;
 
-  &--static {
-    position: relative;
-    width: 100%;
-    justify-content: center;
-    border-bottom: 1px solid var(--theme-elevation-100);
-  }
+    &--static {
+      position: relative;
+      width: 100%;
+      justify-content: center;
+      border-bottom: 1px solid var(--theme-elevation-100);
+    }
 
-  &--draggable {
-    @include shadow-lg;
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin: 0;
-    border-radius: 4px;
-  }
+    &--draggable {
+      @include shadow-lg;
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: 0;
+      border-radius: 4px;
+    }
 
-  &__drag-handle {
-    background: transparent;
-    border: 0;
-    padding: 0;
-    cursor: grab;
+    &__drag-handle {
+      background: transparent;
+      border: 0;
+      padding: 0;
+      cursor: grab;
 
-    .icon--drag-handle .fill {
-      fill: var(--theme-elevation-300);
-    }
+      .icon--drag-handle .fill {
+        fill: var(--theme-elevation-300);
+      }
 
-    &:active {
-      cursor: grabbing;
+      &:active {
+        cursor: grabbing;
+      }
     }
   }
 }

package/dist/views/LivePreview/ToolbarArea/index.scss

@@ -1,4 +1,6 @@
-.toolbar-area {
-  width: 100%;
-  height: 100%;
+@layer payload-default {
+  .toolbar-area {
+    width: 100%;
+    height: 100%;
+  }
 }

package/dist/views/LivePreview/index.client.js

@@ -174,7 +174,7 @@ const PreviewView = ({
       // Unlock the document only if we're actually navigating away from the document
       if (documentId && documentIsLocked && !isStayingWithinDocument) {
         // Check if this user is still the current editor
-        if (documentLockStateRef.current?.user?.id === user.id) {
+        if (documentLockStateRef.current?.user?.id === user?.id) {
           void unlockDocument(id, collectionSlug ?? globalSlug);
           setDocumentIsLocked(false);
           setCurrentEditor(null);
@@ -182,7 +182,7 @@ const PreviewView = ({
       }
       setShowTakeOverModal(false);
     };
-  }, [collectionSlug, globalSlug, id, unlockDocument, user.id, setCurrentEditor, isLockingEnabled, documentIsLocked, setDocumentIsLocked]);
+  }, [collectionSlug, globalSlug, id, unlockDocument, user, setCurrentEditor, isLockingEnabled, documentIsLocked, setDocumentIsLocked]);
   const shouldShowDocumentLockedModal = documentIsLocked && currentEditor && currentEditor.id !== user.id && !isReadOnlyForIncomingUser && !showTakeOverModal &&
   // eslint-disable-next-line react-compiler/react-compiler
   !documentLockStateRef.current?.hasShownLockedModal;