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

package/dist/elements/FileDetails/StaticFileDetails/index.scss

@@ -1,132 +1,134 @@
 @import '../../../scss/styles.scss';
 
-.file-details {
-  background: var(--theme-elevation-50);
-  border: 1px solid var(--theme-border-color);
-  border-radius: var(--style-radius-m);
-  @include inputShadow;
-
-  header {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    position: relative;
-  }
-
-  &__remove {
-    position: absolute;
-    margin: 0;
-    top: $baseline;
-    right: $baseline;
+@layer payload-default {
+  .file-details {
+    background: var(--theme-elevation-50);
+    border: 1px solid var(--theme-border-color);
+    border-radius: var(--style-radius-m);
+    @include inputShadow;
 
-    & .btn__icon {
-      border: 1px solid var(--theme-border-color);
-      background: var(--theme-input-bg);
-      @include inputShadow;
-      transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+    header {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      position: relative;
+    }
 
-      &:hover {
-        border: 1px solid var(--theme-elevation-400);
+    &__remove {
+      position: absolute;
+      margin: 0;
+      top: $baseline;
+      right: $baseline;
+
+      & .btn__icon {
+        border: 1px solid var(--theme-border-color);
+        background: var(--theme-input-bg);
+        @include inputShadow;
+        transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+
+        &:hover {
+          border: 1px solid var(--theme-elevation-400);
+        }
       }
     }
-  }
-
-  &__main-detail {
-    padding: base(0.8) base(1.2);
-    width: auto;
-    flex-grow: 1;
-    min-width: 280px;
-    max-width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-self: stretch;
-    gap: base(0.2);
-  }
-
-  &__toggle-more-info {
-    font-weight: 600;
-    text-decoration: none;
 
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
+    &__main-detail {
+      padding: base(0.8) base(1.2);
+      width: auto;
+      flex-grow: 1;
+      min-width: 280px;
+      max-width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-self: stretch;
+      gap: base(0.2);
     }
-  }
 
-  &__toggle-icon {
-    padding: calc(var(--base) / 4);
-  }
+    &__toggle-more-info {
+      font-weight: 600;
+      text-decoration: none;
 
-  &__sizes {
-    margin: 0;
-    padding: base(1.5) $baseline 0;
-    list-style: none;
-    display: flex;
-    flex-wrap: wrap;
-
-    li {
-      width: 50%;
-      padding: 0 base(0.5);
-      margin-bottom: $baseline;
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
     }
-  }
 
-  &__size-label {
-    color: var(--theme-elevation-400);
-  }
+    &__toggle-icon {
+      padding: calc(var(--base) / 4);
+    }
 
-  &__file-mutation {
-    display: flex;
-    margin-top: base(0.25);
-    gap: calc(var(--base) / 2);
-  }
+    &__sizes {
+      margin: 0;
+      padding: base(1.5) $baseline 0;
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
 
-  &__edit {
-    cursor: pointer;
-    background-color: var(--theme-elevation-150);
-    border: none;
-    border-radius: $style-radius-m;
-    padding: base(0.25) base(0.5);
+      li {
+        width: 50%;
+        padding: 0 base(0.5);
+        margin-bottom: $baseline;
+      }
+    }
 
-    &:hover {
-      background-color: var(--theme-elevation-100);
+    &__size-label {
+      color: var(--theme-elevation-400);
     }
-  }
 
-  @include large-break {
-    &__main-detail {
-      padding: $baseline;
+    &__file-mutation {
+      display: flex;
+      margin-top: base(0.25);
+      gap: calc(var(--base) / 2);
     }
 
-    &__sizes {
-      display: block;
-      padding: $baseline $baseline base(0.5);
+    &__edit {
+      cursor: pointer;
+      background-color: var(--theme-elevation-150);
+      border: none;
+      border-radius: $style-radius-m;
+      padding: base(0.25) base(0.5);
 
-      li {
-        padding: 0;
-        width: 100%;
+      &:hover {
+        background-color: var(--theme-elevation-100);
       }
     }
-  }
 
-  @include mid-break {
-    header {
-      flex-wrap: wrap;
-    }
+    @include large-break {
+      &__main-detail {
+        padding: $baseline;
+      }
 
-    .thumbnail {
-      width: 50%;
-      order: 1;
-    }
+      &__sizes {
+        display: block;
+        padding: $baseline $baseline base(0.5);
 
-    &__remove {
-      order: 2;
+        li {
+          padding: 0;
+          width: 100%;
+        }
+      }
     }
 
-    &__main-detail {
-      order: 3;
-      width: 100%;
+    @include mid-break {
+      header {
+        flex-wrap: wrap;
+      }
+
+      .thumbnail {
+        width: 50%;
+        order: 1;
+      }
+
+      &__remove {
+        order: 2;
+      }
+
+      &__main-detail {
+        order: 3;
+        width: 100%;
+      }
     }
   }
 }

package/dist/elements/GenerateConfirmation/index.scss

@@ -1,38 +1,40 @@
 @import '../../scss/styles.scss';
 
-.generate-confirmation {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  &__wrapper {
-    z-index: 1;
-    position: relative;
+@layer payload-default {
+  .generate-confirmation {
+    @include blur-bg;
     display: flex;
-    flex-direction: column;
-    gap: base(0.8);
-    padding: base(2);
-    max-width: base(36);
-  }
+    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);
+      max-width: base(36);
+    }
 
-    > * {
-      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/Gutter/index.scss

@@ -1,19 +1,21 @@
 @import '../../scss/styles.scss';
 
-.gutter {
-  &--left {
-    padding-left: var(--gutter-h);
-  }
+@layer payload-default {
+  .gutter {
+    &--left {
+      padding-left: var(--gutter-h);
+    }
 
-  &--right {
-    padding-right: var(--gutter-h);
-  }
+    &--right {
+      padding-right: var(--gutter-h);
+    }
 
-  &--negative-left {
-    margin-left: calc(-1 * var(--gutter-h));
-  }
+    &--negative-left {
+      margin-left: calc(-1 * var(--gutter-h));
+    }
 
-  &--negative-right {
-    margin-right: calc(-1 * var(--gutter-h));
+    &--negative-right {
+      margin-right: calc(-1 * var(--gutter-h));
+    }
   }
 }

package/dist/elements/Hamburger/index.scss

@@ -1,44 +1,46 @@
 @import '../../scss/styles';
 
-.hamburger {
-  padding: 0;
-  border: 0;
-  cursor: pointer;
-  background-color: var(--theme-bg);
-  outline: none;
-  position: relative;
-  color: var(--theme-text);
-  box-shadow: 0px 0px 0px 1px var(--theme-elevation-150);
-  padding: base(0.1);
-  border-radius: 3px;
-  position: relative;
-  z-index: 1;
-  height: 100%;
-  width: 100%;
-  transition-property: box-shadow, background-color;
-  transition-duration: 100ms;
-  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
-  --hamburger-size: var(--base);
+@layer payload-default {
+  .hamburger {
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+    background-color: var(--theme-bg);
+    outline: none;
+    position: relative;
+    color: var(--theme-text);
+    box-shadow: 0px 0px 0px 1px var(--theme-elevation-150);
+    padding: base(0.1);
+    border-radius: 3px;
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    transition-property: box-shadow, background-color;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    --hamburger-size: var(--base);
 
-  &:hover {
-    background-color: var(--theme-elevation-100);
-    box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
-  }
+    &:hover {
+      background-color: var(--theme-elevation-100);
+      box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
+    }
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &::after {
-    z-index: -1;
-  }
+    &::after {
+      z-index: -1;
+    }
 
-  &__open-icon,
-  &__close-icon {
-    width: var(--hamburger-size);
-    height: var(--hamburger-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    &__open-icon,
+    &__close-icon {
+      width: var(--hamburger-size);
+      height: var(--hamburger-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }

package/dist/elements/IDLabel/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.id-label {
-  font-size: base(0.8);
-  line-height: base(1.2);
-  font-weight: normal;
-  color: var(--theme-elevation-600);
-  background: var(--theme-elevation-100);
-  padding: base(0.2) base(0.4);
-  border-radius: $style-radius-m;
-  display: inline-flex;
+@layer payload-default {
+  .id-label {
+    font-size: base(0.8);
+    line-height: base(1.2);
+    font-weight: normal;
+    color: var(--theme-elevation-600);
+    background: var(--theme-elevation-100);
+    padding: base(0.2) base(0.4);
+    border-radius: $style-radius-m;
+    display: inline-flex;
+  }
 }

package/dist/elements/ListControls/index.scss

@@ -1,95 +1,97 @@
 @import '../../scss/styles';
 
-.list-controls {
-  &__wrap {
-    display: flex;
-    align-items: center;
-    background-color: var(--theme-elevation-50);
-    border-radius: var(--style-radius-m);
-    padding: base(0.6);
-    gap: base(0.6);
-  }
-
-  .search-filter {
-    flex-grow: 1;
-
-    input {
-      margin: 0;
+@layer payload-default {
+  .list-controls {
+    &__wrap {
+      display: flex;
+      align-items: center;
+      background-color: var(--theme-elevation-50);
+      border-radius: var(--style-radius-m);
+      padding: base(0.6);
+      gap: base(0.6);
     }
-  }
 
-  &__buttons-wrap {
-    display: flex;
-    align-items: center;
-    gap: base(0.2);
-
-    .pill {
-      background-color: var(--theme-elevation-150);
+    .search-filter {
+      flex-grow: 1;
 
-      &:hover {
-        background-color: var(--theme-elevation-100);
+      input {
+        margin: 0;
       }
     }
-  }
 
-  .column-selector,
-  .where-builder,
-  .sort-complex {
-    margin-top: base(1);
-  }
+    &__buttons-wrap {
+      display: flex;
+      align-items: center;
+      gap: base(0.2);
 
-  @include small-break {
-    &__wrap {
-      flex-wrap: wrap;
-      background-color: unset;
-      padding: 0;
-      position: relative;
+      .pill {
+        background-color: var(--theme-elevation-150);
+
+        &:hover {
+          background-color: var(--theme-elevation-100);
+        }
+      }
     }
 
-    .icon--search {
-      position: absolute;
-      top: base(0.4);
-      inset-inline-start: base(0.4);
-      z-index: 1;
+    .column-selector,
+    .where-builder,
+    .sort-complex {
+      margin-top: base(1);
     }
 
-    .search-filter {
-      width: 100%;
-      input {
-        padding: base(0.4) base(2);
+    @include small-break {
+      &__wrap {
+        flex-wrap: wrap;
+        background-color: unset;
+        padding: 0;
+        position: relative;
       }
-    }
 
-    &__buttons-wrap {
-      [dir='ltr'] & {
-        margin-right: 0;
+      .icon--search {
+        position: absolute;
+        top: base(0.4);
+        inset-inline-start: base(0.4);
+        z-index: 1;
       }
 
-      [dir='rtl'] & {
-        margin-left: 0;
+      .search-filter {
+        width: 100%;
+        input {
+          padding: base(0.4) base(2);
+        }
       }
 
-      .pill {
-        padding: base(0.2) base(0.2) base(0.2) base(0.4);
-        justify-content: space-between;
+      &__buttons-wrap {
+        [dir='ltr'] & {
+          margin-right: 0;
+        }
+
+        [dir='rtl'] & {
+          margin-left: 0;
+        }
+
+        .pill {
+          padding: base(0.2) base(0.2) base(0.2) base(0.4);
+          justify-content: space-between;
+        }
       }
-    }
 
-    &__buttons {
-      margin: 0;
-      width: 100%;
-    }
+      &__buttons {
+        margin: 0;
+        width: 100%;
+      }
 
-    .column-selector,
-    .where-builder,
-    .sort-complex {
-      margin-top: calc(var(--base) / 2);
-    }
+      .column-selector,
+      .where-builder,
+      .sort-complex {
+        margin-top: calc(var(--base) / 2);
+      }
 
-    &__toggle-columns,
-    &__toggle-where,
-    &__toggle-sort {
-      flex: 1;
+      &__toggle-columns,
+      &__toggle-where,
+      &__toggle-sort {
+        flex: 1;
+      }
     }
   }
 }