@payloadcms/ui 3.0.0-beta.111 → 3.0.0-beta.113

package/dist/elements/BulkUpload/ActionsBar/index.scss

@@ -1,59 +1,61 @@
 @import '../../../scss/styles.scss';
 
-.bulk-upload--actions-bar {
-  display: flex;
-  padding-inline: var(--gutter-h);
-  align-items: center;
-  border-bottom: 1px solid var(--theme-border-color);
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  background-color: var(--theme-bg);
-  height: var(--doc-controls-height);
-
-  &__navigation {
+@layer payload-default {
+  .bulk-upload--actions-bar {
     display: flex;
-    gap: var(--base);
+    padding-inline: var(--gutter-h);
     align-items: center;
-    width: 100%;
-  }
+    border-bottom: 1px solid var(--theme-border-color);
+    position: sticky;
+    z-index: 1;
+    top: 0;
+    background-color: var(--theme-bg);
+    height: var(--doc-controls-height);
 
-  &__locationText {
-    font-variant-numeric: tabular-nums;
-    margin: 0;
-  }
+    &__navigation {
+      display: flex;
+      gap: var(--base);
+      align-items: center;
+      width: 100%;
+    }
 
-  &__controls {
-    display: flex;
-    gap: calc(var(--base) / 2);
+    &__locationText {
+      font-variant-numeric: tabular-nums;
+      margin: 0;
+    }
 
-    .btn {
-      background-color: var(--theme-elevation-100);
-      width: calc(var(--base) * 1.2);
-      height: calc(var(--base) * 1.2);
+    &__controls {
+      display: flex;
+      gap: calc(var(--base) / 2);
 
-      &:hover {
-        background-color: var(--theme-elevation-200);
-      }
+      .btn {
+        background-color: var(--theme-elevation-100);
+        width: calc(var(--base) * 1.2);
+        height: calc(var(--base) * 1.2);
+
+        &:hover {
+          background-color: var(--theme-elevation-200);
+        }
 
-      &__label {
-        display: flex;
+        &__label {
+          display: flex;
+        }
       }
     }
-  }
-
-  &__buttons {
-    display: flex;
-    gap: var(--base);
-    margin-left: auto;
-  }
 
-  @include mid-break {
-    &__navigation {
-      justify-content: space-between;
+    &__buttons {
+      display: flex;
+      gap: var(--base);
+      margin-left: auto;
     }
-    &__saveButtons {
-      display: none;
+
+    @include mid-break {
+      &__navigation {
+        justify-content: space-between;
+      }
+      &__saveButtons {
+        display: none;
+      }
     }
   }
 }

package/dist/elements/BulkUpload/AddFilesView/index.scss

@@ -1,28 +1,30 @@
-.bulk-upload--add-files {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  &__dropArea {
+@layer payload-default {
+  .bulk-upload--add-files {
     height: 100%;
-    padding: calc(var(--base) * 2) var(--gutter-h);
-  }
-
-  .dropzone {
-    flex-direction: column;
-    justify-content: center;
     display: flex;
-    gap: var(--base);
-    background-color: var(--theme-elevation-50);
+    flex-direction: column;
 
-    p {
-      margin: 0;
+    &__dropArea {
+      height: 100%;
+      padding: calc(var(--base) * 2) var(--gutter-h);
+    }
+
+    .dropzone {
+      flex-direction: column;
+      justify-content: center;
+      display: flex;
+      gap: var(--base);
+      background-color: var(--theme-elevation-50);
+
+      p {
+        margin: 0;
+      }
     }
-  }
 
-  &__dragAndDropText {
-    margin: 0;
-    text-transform: lowercase;
-    align-self: center;
+    &__dragAndDropText {
+      margin: 0;
+      text-transform: lowercase;
+      align-self: center;
+    }
   }
 }

package/dist/elements/BulkUpload/AddingFilesView/index.scss

@@ -1,23 +1,25 @@
 @import '../../../scss/styles.scss';
 
-.bulk-upload--file-manager {
-  display: flex;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-
-  &__editView {
-    flex-grow: 1;
+@layer payload-default {
+  .bulk-upload--file-manager {
+    display: flex;
     height: 100%;
-    max-height: 100%;
-    overflow: auto;
-  }
-
-  @include mid-break {
-    flex-direction: column-reverse;
+    width: 100%;
+    overflow: hidden;
 
     &__editView {
       flex-grow: 1;
+      height: 100%;
+      max-height: 100%;
+      overflow: auto;
+    }
+
+    @include mid-break {
+      flex-direction: column-reverse;
+
+      &__editView {
+        flex-grow: 1;
+      }
     }
   }
 }

package/dist/elements/BulkUpload/DrawerCloseButton/index.scss

@@ -1,27 +1,29 @@
-.drawer-close-button {
-  --size: calc(var(--base) * 1.2);
-  border: 0;
-  background-color: transparent;
-  padding: 0;
-  cursor: pointer;
-  overflow: hidden;
-  direction: ltr;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--size);
-  height: var(--size);
+@layer payload-default {
+  .drawer-close-button {
+    --size: calc(var(--base) * 1.2);
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    cursor: pointer;
+    overflow: hidden;
+    direction: ltr;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--size);
+    height: var(--size);
 
-  svg {
-    margin: calc(-1 * var(--size));
-    width: calc(var(--size) * 2);
-    height: calc(var(--size) * 2);
+    svg {
+      margin: calc(-1 * var(--size));
+      width: calc(var(--size) * 2);
+      height: calc(var(--size) * 2);
 
-    position: relative;
+      position: relative;
 
-    .stroke {
-      stroke-width: 1px;
-      vector-effect: non-scaling-stroke;
+      .stroke {
+        stroke-width: 1px;
+        vector-effect: non-scaling-stroke;
+      }
     }
   }
 }

package/dist/elements/BulkUpload/EditForm/index.scss

@@ -1,9 +1,11 @@
 @import '../../../scss/styles.scss';
 
-.collection-edit {
-  width: 100%;
+@layer payload-default {
+  .collection-edit {
+    width: 100%;
 
-  &__form {
-    height: auto;
+    &__form {
+      height: auto;
+    }
   }
 }