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

package/dist/elements/ThumbnailCard/index.scss

@@ -1,39 +1,41 @@
 @import '../../scss/styles.scss';
 
-.thumbnail-card {
-  @include btn-reset;
-  @include shadow-m;
-  width: 100%;
-  background: var(--theme-input-bg);
-  border: 1px solid var(--theme-border-color);
-  border-radius: var(--style-radius-m);
-  transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+@layer payload-default {
+  .thumbnail-card {
+    @include btn-reset;
+    @include shadow-m;
+    width: 100%;
+    background: var(--theme-input-bg);
+    border: 1px solid var(--theme-border-color);
+    border-radius: var(--style-radius-m);
+    transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
 
-  &__label {
-    padding: base(0.5);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-weight: 600;
-  }
+    &__label {
+      padding: base(0.5);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 600;
+    }
 
-  &--has-on-click {
-    cursor: pointer;
+    &--has-on-click {
+      cursor: pointer;
 
-    &:hover,
-    &:focus,
-    &:active {
-      border: 1px solid var(--theme-elevation-350);
+      &:hover,
+      &:focus,
+      &:active {
+        border: 1px solid var(--theme-elevation-350);
+      }
     }
-  }
 
-  &--align-label-center {
-    text-align: center;
-  }
+    &--align-label-center {
+      text-align: center;
+    }
 
-  &__thumbnail {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    &__thumbnail {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }

package/dist/elements/Tooltip/index.scss

@@ -1,99 +1,101 @@
 @import '../../scss/styles.scss';
 
-.tooltip {
-  --caret-size: 6px;
-
-  opacity: 0;
-  background-color: var(--theme-elevation-800);
-  position: absolute;
-  z-index: 3;
-  left: 50%;
-  padding: base(0.2) base(0.4);
-  color: var(--theme-elevation-0);
-  line-height: base(0.75);
-  font-weight: normal;
-  white-space: nowrap;
-  border-radius: 2px;
-  visibility: hidden;
-
-  &::after {
-    content: ' ';
-    display: block;
-    position: absolute;
-    transform: translate3d(-50%, 100%, 0);
-    width: 0;
-    height: 0;
-    border-left: var(--caret-size) solid transparent;
-    border-right: var(--caret-size) solid transparent;
-  }
+@layer payload-default {
+  .tooltip {
+    --caret-size: 6px;
 
-  &--show {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 0.2s ease-in-out;
-    cursor: default;
-  }
+    opacity: 0;
+    background-color: var(--theme-elevation-800);
+    position: absolute;
+    z-index: 3;
+    left: 50%;
+    padding: base(0.2) base(0.4);
+    color: var(--theme-elevation-0);
+    line-height: base(0.75);
+    font-weight: normal;
+    white-space: nowrap;
+    border-radius: 2px;
+    visibility: hidden;
 
-  &--caret-center {
     &::after {
-      left: 50%;
+      content: ' ';
+      display: block;
+      position: absolute;
+      transform: translate3d(-50%, 100%, 0);
+      width: 0;
+      height: 0;
+      border-left: var(--caret-size) solid transparent;
+      border-right: var(--caret-size) solid transparent;
     }
-  }
 
-  &--caret-left {
-    &::after {
-      left: calc(var(--base) * 0.5);
+    &--show {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 0.2s ease-in-out;
+      cursor: default;
     }
-  }
 
-  &--caret-right {
-    &::after {
-      right: calc(var(--base) * 0.5);
+    &--caret-center {
+      &::after {
+        left: 50%;
+      }
     }
-  }
 
-  &--position-top {
-    top: calc(var(--base) * -1.25);
-    transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
+    &--caret-left {
+      &::after {
+        left: calc(var(--base) * 0.5);
+      }
+    }
 
-    &::after {
-      bottom: 1px;
-      border-top: var(--caret-size) solid var(--theme-elevation-800);
+    &--caret-right {
+      &::after {
+        right: calc(var(--base) * 0.5);
+      }
     }
-  }
 
-  &--position-bottom {
-    bottom: calc(var(--base) * -1.25);
-    transform: translate3d(-50%, var(--caret-size), 0);
+    &--position-top {
+      top: calc(var(--base) * -1.25);
+      transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
 
-    &::after {
-      bottom: calc(100% + var(--caret-size) - 1px);
-      border-bottom: var(--caret-size) solid var(--theme-elevation-800);
+      &::after {
+        bottom: 1px;
+        border-top: var(--caret-size) solid var(--theme-elevation-800);
+      }
     }
-  }
 
-  .tooltip-content {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100%;
-  }
+    &--position-bottom {
+      bottom: calc(var(--base) * -1.25);
+      transform: translate3d(-50%, var(--caret-size), 0);
 
-  @include mid-break {
-    display: none;
-  }
-}
+      &::after {
+        bottom: calc(100% + var(--caret-size) - 1px);
+        border-bottom: var(--caret-size) solid var(--theme-elevation-800);
+      }
+    }
 
-html[data-theme='light'] {
-  .tooltip:not(.field-error) {
-    background-color: var(--theme-elevation-100);
-    color: var(--theme-elevation-1000);
-  }
+    .tooltip-content {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+    }
 
-  .tooltip--position-top:not(.field-error):after {
-    border-top-color: var(--theme-elevation-100);
+    @include mid-break {
+      display: none;
+    }
   }
 
-  .tooltip--position-bottom:not(.field-error):after {
-    border-bottom-color: var(--theme-elevation-100);
+  html[data-theme='light'] {
+    .tooltip:not(.field-error) {
+      background-color: var(--theme-elevation-100);
+      color: var(--theme-elevation-1000);
+    }
+
+    .tooltip--position-top:not(.field-error):after {
+      border-top-color: var(--theme-elevation-100);
+    }
+
+    .tooltip--position-bottom:not(.field-error):after {
+      border-bottom-color: var(--theme-elevation-100);
+    }
   }
 }

package/dist/elements/UnpublishMany/index.scss

@@ -1,37 +1,39 @@
 @import '../../scss/styles.scss';
 
-.unpublish-many {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  &__wrapper {
-    z-index: 1;
-    position: relative;
+@layer payload-default {
+  .unpublish-many {
+    @include blur-bg;
     display: flex;
-    flex-direction: column;
-    gap: base(0.8);
-    padding: base(2);
-  }
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: base(0.4);
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
+    }
 
-    > * {
-      margin: 0;
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
+
+      > * {
+        margin: 0;
+      }
     }
-  }
 
-  &__controls {
-    display: flex;
-    gap: base(0.4);
+    &__controls {
+      display: flex;
+      gap: base(0.4);
 
-    .btn {
-      margin: 0;
+      .btn {
+        margin: 0;
+      }
     }
   }
 }

package/dist/elements/Upload/index.scss

@@ -1,155 +1,157 @@
 @import '../../scss/styles.scss';
 
-.file-field {
-  position: relative;
-  margin-bottom: var(--base);
-  background: var(--theme-elevation-50);
-  border-radius: var(--style-radius-s);
-
-  &__upload {
-    display: flex;
-  }
-
-  .tooltip.error-message {
-    z-index: 3;
-    bottom: calc(100% - #{base(0.5)});
-  }
-
-  &__file-selected {
-    display: flex;
-  }
-
-  &__thumbnail-wrap {
+@layer payload-default {
+  .file-field {
     position: relative;
-    width: 150px;
+    margin-bottom: var(--base);
+    background: var(--theme-elevation-50);
+    border-radius: var(--style-radius-s);
 
-    .thumbnail {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      border-radius: var(--style-radius-s) 0 0 var(--style-radius-s);
+    &__upload {
+      display: flex;
     }
-  }
 
-  &__remove {
-    margin: calc($baseline * 1.5) $baseline $baseline 0;
-    place-self: flex-start;
-  }
+    .tooltip.error-message {
+      z-index: 3;
+      bottom: calc(100% - #{base(0.5)});
+    }
 
-  &__file-adjustments,
-  &__remote-file-wrap {
-    padding: $baseline;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 2);
-  }
+    &__file-selected {
+      display: flex;
+    }
 
-  &__filename,
-  &__remote-file {
-    @include formInput;
-    background-color: var(--theme-bg);
-  }
+    &__thumbnail-wrap {
+      position: relative;
+      width: 150px;
 
-  &__upload-actions,
-  &__add-file-wrap {
-    display: flex;
-    gap: calc(var(--base) / 2);
-    flex-wrap: wrap;
-
-    & button {
-      cursor: pointer;
-      background-color: var(--theme-elevation-150);
-      border: none;
-      border-radius: $style-radius-m;
-      padding: base(0.25) base(0.5);
-      text-wrap: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &:hover {
-        background-color: var(--theme-elevation-100);
+      .thumbnail {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        border-radius: var(--style-radius-s) 0 0 var(--style-radius-s);
       }
     }
-  }
 
-  &__previewDrawer {
-    & h2 {
-      margin: 0 base(1) 0 0;
-      text-wrap: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: calc(100% - base(2));
+    &__remove {
+      margin: calc($baseline * 1.5) $baseline $baseline 0;
+      place-self: flex-start;
     }
-  }
 
-  .dropzone {
-    background-color: transparent;
-    padding-block: calc(var(--base) * 2.25);
-  }
+    &__file-adjustments,
+    &__remote-file-wrap {
+      padding: $baseline;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 2);
+    }
 
-  &__dropzoneContent {
-    display: flex;
-    flex-wrap: wrap;
-    gap: base(0.4);
-    justify-content: space-between;
-    width: 100%;
-  }
+    &__filename,
+    &__remote-file {
+      @include formInput;
+      background-color: var(--theme-bg);
+    }
 
-  &__dropzoneButtons {
-    display: flex;
-    gap: calc(var(--base) * 0.5);
-  }
+    &__upload-actions,
+    &__add-file-wrap {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      flex-wrap: wrap;
 
-  &__orText {
-    color: var(--theme-elevation-500);
-    text-transform: lowercase;
-  }
+      & button {
+        cursor: pointer;
+        background-color: var(--theme-elevation-150);
+        border: none;
+        border-radius: $style-radius-m;
+        padding: base(0.25) base(0.5);
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover {
+          background-color: var(--theme-elevation-100);
+        }
+      }
+    }
 
-  &__dragAndDropText {
-    flex-shrink: 0;
-    margin: 0;
-    text-transform: lowercase;
-    align-self: center;
-    color: var(--theme-elevation-500);
-  }
+    &__previewDrawer {
+      & h2 {
+        margin: 0 base(1) 0 0;
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: calc(100% - base(2));
+      }
+    }
 
-  @include small-break {
-    &__upload {
+    .dropzone {
+      background-color: transparent;
+      padding-block: calc(var(--base) * 2.25);
+    }
+
+    &__dropzoneContent {
+      display: flex;
       flex-wrap: wrap;
+      gap: base(0.4);
       justify-content: space-between;
+      width: 100%;
     }
 
-    &__remove {
-      margin: $baseline;
-      order: 2;
+    &__dropzoneButtons {
+      display: flex;
+      gap: calc(var(--base) * 0.5);
     }
 
-    &__file-adjustments {
-      order: 3;
-      border-top: 2px solid var(--theme-elevation-0);
-      padding: calc($baseline * 0.5);
-      gap: 0;
+    &__orText {
+      color: var(--theme-elevation-500);
+      text-transform: lowercase;
     }
 
-    &__thumbnail-wrap {
-      order: 1;
-      width: 50%;
+    &__dragAndDropText {
+      flex-shrink: 0;
+      margin: 0;
+      text-transform: lowercase;
+      align-self: center;
+      color: var(--theme-elevation-500);
+    }
 
-      .thumbnail {
-        width: 100%;
+    @include small-break {
+      &__upload {
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+
+      &__remove {
+        margin: $baseline;
+        order: 2;
+      }
+
+      &__file-adjustments {
+        order: 3;
+        border-top: 2px solid var(--theme-elevation-0);
+        padding: calc($baseline * 0.5);
+        gap: 0;
       }
-    }
 
-    &__edit {
-      display: none;
+      &__thumbnail-wrap {
+        order: 1;
+        width: 50%;
+
+        .thumbnail {
+          width: 100%;
+        }
+      }
+
+      &__edit {
+        display: none;
+      }
     }
-  }
 
-  @include small-break {
-    &__dropzoneContent {
-      display: none;
+    @include small-break {
+      &__dropzoneContent {
+        display: none;
+      }
     }
   }
 }

package/dist/elements/WhereBuilder/Condition/Number/index.scss

@@ -1,5 +1,7 @@
 @import '../../../../scss/styles.scss';
 
-.condition-value-number {
-  @include formInput;
+@layer payload-default {
+  .condition-value-number {
+    @include formInput;
+  }
 }

package/dist/elements/WhereBuilder/Condition/Relationship/index.scss

@@ -1,11 +1,13 @@
 @import '../../../../scss/styles.scss';
 
-.condition-value-relationship {
-  &__error-loading {
-    border: 1px solid var(--theme-error-600);
-    min-height: base(2);
-    padding: base(0.5) base(0.75);
-    background-color: var(--theme-error-100);
-    color: var(--theme-elevation-0);
+@layer payload-default {
+  .condition-value-relationship {
+    &__error-loading {
+      border: 1px solid var(--theme-error-600);
+      min-height: base(2);
+      padding: base(0.5) base(0.75);
+      background-color: var(--theme-error-100);
+      color: var(--theme-elevation-0);
+    }
   }
 }

package/dist/elements/WhereBuilder/Condition/Text/index.scss

@@ -1,5 +1,7 @@
 @import '../../../../scss/styles.scss';
 
-.condition-value-text {
-  @include formInput;
+@layer payload-default {
+  .condition-value-text {
+    @include formInput;
+  }
 }