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

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%;
+  }
 }