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

package/dist/fields/Upload/index.scss

@@ -1,62 +1,64 @@
 @import '../../scss/styles.scss';
 
-.upload {
-  &__dropzoneAndUpload {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 4);
-  }
+@layer payload-default {
+  .upload {
+    &__dropzoneAndUpload {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+    }
 
-  &__dropzoneContent {
-    display: flex;
-    flex-wrap: wrap;
-    gap: base(0.4);
-    justify-content: space-between;
-    width: 100%;
-  }
+    &__dropzoneContent {
+      display: flex;
+      flex-wrap: wrap;
+      gap: base(0.4);
+      justify-content: space-between;
+      width: 100%;
+    }
 
-  &__dropzoneContent__buttons {
-    display: flex;
-    gap: calc(var(--base) / 2);
-    position: relative;
-    left: -2px;
+    &__dropzoneContent__buttons {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      position: relative;
+      left: -2px;
 
-    .btn .btn__content {
-      gap: calc(var(--base) / 5);
-    }
+      .btn .btn__content {
+        gap: calc(var(--base) / 5);
+      }
 
-    .btn__label {
-      font-weight: 100;
+      .btn__label {
+        font-weight: 100;
+      }
     }
-  }
 
-  &__dropzoneContent__orText {
-    color: var(--theme-elevation-500);
-    text-transform: lowercase;
-  }
+    &__dropzoneContent__orText {
+      color: var(--theme-elevation-500);
+      text-transform: lowercase;
+    }
 
-  &__dragAndDropText {
-    flex-shrink: 0;
-    margin: 0;
-    text-transform: lowercase;
-    align-self: center;
-    color: var(--theme-elevation-500);
-  }
+    &__dragAndDropText {
+      flex-shrink: 0;
+      margin: 0;
+      text-transform: lowercase;
+      align-self: center;
+      color: var(--theme-elevation-500);
+    }
 
-  &__loadingRows {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 4);
-  }
+    &__loadingRows {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+    }
 
-  .shimmer-effect {
-    border-radius: var(--style-radius-s);
-    border: 1px solid var(--theme-border-color);
-  }
+    .shimmer-effect {
+      border-radius: var(--style-radius-s);
+      border: 1px solid var(--theme-border-color);
+    }
 
-  @include small-break {
-    &__dragAndDropText {
-      display: none;
+    @include small-break {
+      &__dragAndDropText {
+        display: none;
+      }
     }
   }
 }

package/dist/forms/Form/index.scss

@@ -1,5 +1,7 @@
-.form {
-  > * {
-    width: 100%;
+@layer payload-default {
+  .form {
+    > * {
+      width: 100%;
+    }
   }
 }

package/dist/forms/RenderFields/index.scss

@@ -1,63 +1,65 @@
 @import '../../scss/styles.scss';
 
-// Positioned field-type__wrap is needed for correct positioning of field tooltips.
-// This is set outside of .render-fields, so that manually rendered fields (e.g. in Auth/index.tsx)
-// outside RenderFields also receive this styling.
-.field-type__wrap {
-  position: relative;
-}
-
-.render-fields {
-  --spacing-field: var(--base);
-
-  &--margins-small {
-    --spacing-field: var(--base);
-  }
-
-  &--margins-none {
-    --spacing-field: 0;
+@layer payload-default {
+  // Positioned field-type__wrap is needed for correct positioning of field tooltips.
+  // This is set outside of .render-fields, so that manually rendered fields (e.g. in Auth/index.tsx)
+  // outside RenderFields also receive this styling.
+  .field-type__wrap {
+    position: relative;
   }
 
-  & > .field-type {
-    margin-bottom: var(--spacing-field);
-    position: relative;
+  .render-fields {
+    --spacing-field: var(--base);
 
-    &[type='hidden'] {
-      margin-bottom: 0;
+    &--margins-small {
+      --spacing-field: var(--base);
     }
 
-    &:first-child {
-      margin-top: 0;
+    &--margins-none {
+      --spacing-field: 0;
     }
 
-    &:last-of-type {
-      margin-bottom: 0;
+    & > .field-type {
+      margin-bottom: var(--spacing-field);
+      position: relative;
+
+      &[type='hidden'] {
+        margin-bottom: 0;
+      }
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
     }
-  }
 
-  // at the top-level, add extra margins for the following field types
-  &:not(.render-fields--margins-small) {
-    & > .field-type {
-      &.group-field,
-      &.blocks-field,
-      &.array-field,
-      &.collapsible-field,
-      &.rich-text {
-        margin-top: calc(var(--spacing-field) * 2);
-        margin-bottom: calc(var(--spacing-field) * 2);
-
-        &:first-child {
-          margin-top: 0;
-        }
+    // at the top-level, add extra margins for the following field types
+    &:not(.render-fields--margins-small) {
+      & > .field-type {
+        &.group-field,
+        &.blocks-field,
+        &.array-field,
+        &.collapsible-field,
+        &.rich-text {
+          margin-top: calc(var(--spacing-field) * 2);
+          margin-bottom: calc(var(--spacing-field) * 2);
+
+          &:first-child {
+            margin-top: 0;
+          }
 
-        &:last-child {
-          margin-bottom: 0;
+          &:last-child {
+            margin-bottom: 0;
+          }
         }
       }
     }
-  }
 
-  @include small-break {
-    --spacing-field: calc(var(--base) / 2);
+    @include small-break {
+      --spacing-field: calc(var(--base) / 2);
+    }
   }
 }

package/dist/forms/Submit/index.scss

@@ -1,5 +1,7 @@
-form > .form-submit {
-  .btn {
-    width: 100%;
+@layer payload-default {
+  form > .form-submit {
+    .btn {
+      width: 100%;
+    }
   }
 }

package/dist/graphics/Account/Default/index.scss

@@ -1,54 +1,38 @@
-.graphic-account {
-  vector-effect: non-scaling-stroke;
-  overflow: visible;
-  position: relative;
-
-  &__bg {
-    fill: var(--theme-elevation-50);
-    stroke: var(--theme-elevation-200);
-    stroke-width: 1px;
-  }
-
-  &__head,
-  &__body {
-    fill: var(--theme-elevation-200);
-  }
+@layer payload-default {
+  .graphic-account {
+    vector-effect: non-scaling-stroke;
+    overflow: visible;
+    position: relative;
 
-  &--active {
-    .graphic-account {
-      &__bg {
-        fill: var(--theme-elevation-500);
-        stroke: var(--theme-text);
-      }
+    &__bg {
+      fill: var(--theme-elevation-50);
+      stroke: var(--theme-elevation-200);
+      stroke-width: 1px;
+    }
 
-      &__head,
-      &__body {
-        fill: var(--theme-text);
-      }
+    &__head,
+    &__body {
+      fill: var(--theme-elevation-200);
     }
-  }
 
-  &:hover:not(.graphic-account--active) {
-    .graphic-account {
-      &__bg {
-        fill: var(--theme-elevation-200);
-        stroke: var(--theme-elevation-600);
-      }
+    &--active {
+      .graphic-account {
+        &__bg {
+          fill: var(--theme-elevation-500);
+          stroke: var(--theme-text);
+        }
 
-      &__head,
-      &__body {
-        fill: var(--theme-elevation-600);
+        &__head,
+        &__body {
+          fill: var(--theme-text);
+        }
       }
     }
-  }
-}
 
-[data-theme='light'] {
-  .graphic-account {
-    &--active {
+    &:hover:not(.graphic-account--active) {
       .graphic-account {
         &__bg {
-          fill: var(--theme-elevation-300);
+          fill: var(--theme-elevation-200);
           stroke: var(--theme-elevation-600);
         }
 
@@ -59,4 +43,22 @@
       }
     }
   }
+
+  [data-theme='light'] {
+    .graphic-account {
+      &--active {
+        .graphic-account {
+          &__bg {
+            fill: var(--theme-elevation-300);
+            stroke: var(--theme-elevation-600);
+          }
+
+          &__head,
+          &__body {
+            fill: var(--theme-elevation-600);
+          }
+        }
+      }
+    }
+  }
 }

package/dist/icons/Calendar/index.scss

@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--calendar {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--calendar {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }

package/dist/icons/Check/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--check {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--check {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-m;
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-m;
+    }
   }
 }

package/dist/icons/Chevron/index.scss

@@ -1,23 +1,25 @@
 @import '../../scss/styles';
 
-.icon--chevron {
-  height: calc(var(--base) / 2);
-  width: calc(var(--base) / 2);
+@layer payload-default {
+  .icon--chevron {
+    height: calc(var(--base) / 2);
+    width: calc(var(--base) / 2);
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
-    vector-effect: non-scaling-stroke;
-  }
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+      vector-effect: non-scaling-stroke;
+    }
 
-  &.icon--size-large {
-    height: var(--base);
-    width: var(--base);
-  }
+    &.icon--size-large {
+      height: var(--base);
+      width: var(--base);
+    }
 
-  &.icon--size-small {
-    height: 8px;
-    width: 8px;
+    &.icon--size-small {
+      height: 8px;
+      width: 8px;
+    }
   }
 }

package/dist/icons/CloseMenu/index.scss

@@ -1,10 +1,12 @@
 @import '../../scss/styles.scss';
 
-.icon--close-menu {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--close-menu {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    stroke: currentColor;
+    .stroke {
+      stroke: currentColor;
+    }
   }
 }

package/dist/icons/Copy/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--copy {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--copy {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }

package/dist/icons/DragHandle/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--drag-handle {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--drag-handle {
+    height: $baseline;
+    width: $baseline;
 
-  .fill {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
-    fill: var(--theme-elevation-800);
+    .fill {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+      fill: var(--theme-elevation-800);
+    }
   }
 }

package/dist/icons/Edit/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.icon--edit {
-  height: $baseline;
-  width: $baseline;
-  shape-rendering: auto;
+@layer payload-default {
+  .icon--edit {
+    height: $baseline;
+    width: $baseline;
+    shape-rendering: auto;
 
-  .stroke {
-    fill: none;
-    stroke: currentColor;
+    .stroke {
+      fill: none;
+      stroke: currentColor;
+    }
   }
 }

package/dist/icons/Line/index.scss

@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--line {
-  width: $baseline;
-  height: $baseline;
+@layer payload-default {
+  .icon--line {
+    width: $baseline;
+    height: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width;
+    }
   }
 }

package/dist/icons/Link/index.scss

@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--link {
-  width: $baseline;
-  height: $baseline;
+@layer payload-default {
+  .icon--link {
+    width: $baseline;
+    height: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width;
+    }
   }
 }

package/dist/icons/Lock/index.scss

@@ -1,8 +1,10 @@
 @import '../../scss/styles';
 
-.icon--lock {
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width;
+@layer payload-default {
+  .icon--lock {
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width;
+    }
   }
 }

package/dist/icons/LogOut/index.scss

@@ -1,11 +1,13 @@
 @import '../../scss/styles.scss';
 
-.icon--logout {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--logout {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: 2px;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: 2px;
+    }
   }
 }

package/dist/icons/Menu/index.scss

@@ -1,8 +1,10 @@
 @import '../../scss/styles.scss';
 
-.icon--menu {
-  .stroke {
-    stroke-width: $style-stroke-width-s;
-    stroke: currentColor;
+@layer payload-default {
+  .icon--menu {
+    .stroke {
+      stroke-width: $style-stroke-width-s;
+      stroke: currentColor;
+    }
   }
 }

package/dist/icons/More/index.scss

@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--more {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--more {
+    height: $baseline;
+    width: $baseline;
 
-  .fill {
-    fill: var(--theme-elevation-800);
-    stroke: currentColor;
+    .fill {
+      fill: var(--theme-elevation-800);
+      stroke: currentColor;
+    }
   }
 }

package/dist/icons/Plus/index.scss

@@ -1,8 +1,10 @@
 @import '../../scss/styles';
 
-.icon--plus {
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width;
+@layer payload-default {
+  .icon--plus {
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width;
+    }
   }
 }

package/dist/icons/Search/index.scss

@@ -1,11 +1,13 @@
 @import '../../scss/styles';
 
-.icon--search {
-  height: $baseline;
-  width: $baseline;
+@layer payload-default {
+  .icon--search {
+    height: $baseline;
+    width: $baseline;
 
-  .stroke {
-    stroke: currentColor;
-    stroke-width: $style-stroke-width-s;
+    .stroke {
+      stroke: currentColor;
+      stroke-width: $style-stroke-width-s;
+    }
   }
 }