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

package/dist/fields/Array/index.scss

@@ -1,104 +1,106 @@
 @import '../../scss/styles.scss';
 
-.array-field {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) / 2);
-
-  &__header {
+@layer payload-default {
+  .array-field {
     display: flex;
     flex-direction: column;
     gap: calc(var(--base) / 2);
 
-    &__header-content {
+    &__header {
       display: flex;
       flex-direction: column;
-      gap: calc(var(--base) / 4);
+      gap: calc(var(--base) / 2);
+
+      &__header-content {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--base) / 4);
+      }
     }
-  }
 
-  &--has-no-error {
-    > .array-field__header .array-field__header-content {
-      color: var(--theme-text);
+    &--has-no-error {
+      > .array-field__header .array-field__header-content {
+        color: var(--theme-text);
+      }
     }
-  }
 
-  &__header-content {
-    display: flex;
-    align-items: center;
-    gap: base(0.5);
-  }
+    &__header-content {
+      display: flex;
+      align-items: center;
+      gap: base(0.5);
+    }
 
-  &__header-wrap {
-    display: flex;
-    align-items: flex-end;
-    width: 100%;
-    justify-content: space-between;
-  }
+    &__header-wrap {
+      display: flex;
+      align-items: flex-end;
+      width: 100%;
+      justify-content: space-between;
+    }
 
-  &__header-actions {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    color: var(--theme-elevation-800);
-  }
+    &__header-actions {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      color: var(--theme-elevation-800);
+    }
 
-  &__header-action {
-    @extend %btn-reset;
-    cursor: pointer;
-    margin-left: base(0.5);
+    &__header-action {
+      @extend %btn-reset;
+      cursor: pointer;
+      margin-left: base(0.5);
 
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
-      color: var(--theme-elevation-600);
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+        color: var(--theme-elevation-600);
+      }
     }
-  }
 
-  &__row-header {
-    display: flex;
-    align-items: center;
-    gap: base(0.5);
-    pointer-events: none;
-  }
+    &__row-header {
+      display: flex;
+      align-items: center;
+      gap: base(0.5);
+      pointer-events: none;
+    }
 
-  &__draggable-rows {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 2);
-  }
+    &__draggable-rows {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 2);
+    }
 
-  &__title {
-    margin-bottom: 0;
-  }
+    &__title {
+      margin-bottom: 0;
+    }
 
-  &__add-row {
-    align-self: flex-start;
-    color: var(--theme-elevation-400);
-    margin: 2px 0;
+    &__add-row {
+      align-self: flex-start;
+      color: var(--theme-elevation-400);
+      margin: 2px 0;
 
-    &:hover {
-      color: var(--theme-elevation-800);
+      &:hover {
+        color: var(--theme-elevation-800);
+      }
     }
   }
-}
 
-html[data-theme='light'] {
-  .array-field {
-    &--has-error {
-      > .array-field__header .array-field__header-content {
-        color: var(--theme-error-750);
+  html[data-theme='light'] {
+    .array-field {
+      &--has-error {
+        > .array-field__header .array-field__header-content {
+          color: var(--theme-error-750);
+        }
       }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .array-field {
-    &--has-error {
-      > .array-field__header .array-field__header-content {
-        color: var(--theme-error-500);
+  html[data-theme='dark'] {
+    .array-field {
+      &--has-error {
+        > .array-field__header .array-field__header-content {
+          color: var(--theme-error-500);
+        }
       }
     }
   }

package/dist/fields/Blocks/BlocksDrawer/BlockSearch/index.scss

@@ -3,34 +3,36 @@
 $icon-width: base(2);
 $icon-margin: base(0.25);
 
-.block-search {
-  position: sticky;
-  top: 0;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  z-index: 1;
+@layer payload-default {
+  .block-search {
+    position: sticky;
+    top: 0;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    z-index: 1;
 
-  &__input {
-    @include formInput;
-  }
+    &__input {
+      @include formInput;
+    }
 
-  .icon--search {
-    position: absolute;
-    top: 50%;
-    transform: translate3d(0, -50%, 0);
-    right: 0;
-    width: $icon-width;
-    margin: 0 $icon-margin;
+    .icon--search {
+      position: absolute;
+      top: 50%;
+      transform: translate3d(0, -50%, 0);
+      right: 0;
+      width: $icon-width;
+      margin: 0 $icon-margin;
 
-    .stroke {
-      stroke: var(--theme-elevation-300);
+      .stroke {
+        stroke: var(--theme-elevation-300);
+      }
     }
-  }
 
-  @include mid-break {
-    &__input {
-      margin-bottom: 0;
+    @include mid-break {
+      &__input {
+        margin-bottom: 0;
+      }
     }
   }
 }

package/dist/fields/Blocks/BlocksDrawer/index.scss

@@ -1,48 +1,50 @@
 @import '../../../scss/styles.scss';
 
-.blocks-drawer {
-  &__blocks-wrapper {
-    padding-top: base(1.5);
-  }
-
-  &__blocks {
-    position: relative;
-    padding: 0;
-    list-style: none;
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    gap: base(1);
-  }
-
-  &__default-image {
-    width: 100%;
-    overflow: hidden;
-    padding-top: base(0.75);
-  }
+@layer payload-default {
+  .blocks-drawer {
+    &__blocks-wrapper {
+      padding-top: base(1.5);
+    }
 
-  @include large-break {
     &__blocks {
-      grid-template-columns: repeat(5, 1fr);
+      position: relative;
+      padding: 0;
+      list-style: none;
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      gap: base(1);
     }
-  }
 
-  @include mid-break {
-    &__blocks-wrapper {
-      padding-top: base(1.75);
+    &__default-image {
+      width: 100%;
+      overflow: hidden;
+      padding-top: base(0.75);
     }
-    &__blocks {
-      grid-template-columns: repeat(3, 1fr);
-      gap: base(0.5);
+
+    @include large-break {
+      &__blocks {
+        grid-template-columns: repeat(5, 1fr);
+      }
     }
-  }
 
-  @include small-break {
-    &__blocks-wrapper {
-      padding-top: base(0.75);
+    @include mid-break {
+      &__blocks-wrapper {
+        padding-top: base(1.75);
+      }
+      &__blocks {
+        grid-template-columns: repeat(3, 1fr);
+        gap: base(0.5);
+      }
     }
 
-    &__blocks {
-      grid-template-columns: repeat(2, 1fr);
+    @include small-break {
+      &__blocks-wrapper {
+        padding-top: base(0.75);
+      }
+
+      &__blocks {
+        grid-template-columns: repeat(2, 1fr);
+      }
     }
   }
 }

package/dist/fields/Blocks/SectionTitle/index.scss

@@ -1,61 +1,63 @@
 @import '../../../scss/styles.scss';
 
-.section-title {
-  position: relative;
-  min-width: base(4);
-  max-width: 100%;
-  pointer-events: all;
-  display: flex;
-  overflow: hidden;
-
-  &:after {
-    display: block;
-    content: attr(data-value) ' ';
-    visibility: hidden;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-  }
-
-  &:after,
-  &__input {
-    font-family: var(--font-body);
-    font-weight: 600;
-    font-size: base(0.625);
-    padding: 0;
-    width: 100%;
-  }
-
-  &__input {
-    color: var(--theme-elevation-800);
-    background-color: transparent;
-    border: none;
-    min-width: min-content;
-    width: 100%;
+@layer payload-default {
+  .section-title {
+    position: relative;
+    min-width: base(4);
     max-width: 100%;
+    pointer-events: all;
+    display: flex;
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    resize: none;
-    appearance: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
 
-    &:hover {
-      box-shadow: inset 0px -2px 0px -1px var(--theme-elevation-150);
+    &:after {
+      display: block;
+      content: attr(data-value) ' ';
+      visibility: hidden;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
     }
 
-    &:hover,
-    &:focus {
-      outline: 0;
+    &:after,
+    &__input {
+      font-family: var(--font-body);
+      font-weight: 600;
+      font-size: base(0.625);
+      padding: 0;
+      width: 100%;
     }
 
-    &:focus {
-      box-shadow: none;
+    &__input {
+      color: var(--theme-elevation-800);
+      background-color: transparent;
+      border: none;
+      min-width: min-content;
+      width: 100%;
+      max-width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      resize: none;
+      appearance: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+
+      &:hover {
+        box-shadow: inset 0px -2px 0px -1px var(--theme-elevation-150);
+      }
+
+      &:hover,
+      &:focus {
+        outline: 0;
+      }
+
+      &:focus {
+        box-shadow: none;
+      }
     }
   }
 }

package/dist/fields/Blocks/index.scss

@@ -1,119 +1,121 @@
 @import '../../scss/styles.scss';
 
-.blocks-field {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) / 2);
+@layer payload-default {
+  .blocks-field {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
 
-  &__header {
-    h3 {
-      margin: 0;
+    &__header {
+      h3 {
+        margin: 0;
+      }
     }
-  }
 
-  &__header-wrap {
-    display: flex;
-    align-items: flex-end;
-    width: 100%;
-    justify-content: space-between;
-  }
+    &__header-wrap {
+      display: flex;
+      align-items: flex-end;
+      width: 100%;
+      justify-content: space-between;
+    }
 
-  &__heading-with-error {
-    display: flex;
-    align-items: center;
-    gap: base(0.5);
-  }
+    &__heading-with-error {
+      display: flex;
+      align-items: center;
+      gap: base(0.5);
+    }
 
-  &--has-no-error {
-    > .array-field__header .array-field__heading-with-error {
-      color: var(--theme-text);
+    &--has-no-error {
+      > .array-field__header .array-field__heading-with-error {
+        color: var(--theme-text);
+      }
     }
-  }
 
-  &--has-error {
-    > .array-field__header {
-      color: var(--theme-error-500);
+    &--has-error {
+      > .array-field__header {
+        color: var(--theme-error-500);
+      }
     }
-  }
 
-  &__error-pill {
-    align-self: center;
-  }
+    &__error-pill {
+      align-self: center;
+    }
 
-  &__header-actions {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-  }
+    &__header-actions {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+    }
 
-  &__header-action {
-    @extend %btn-reset;
-    cursor: pointer;
-    margin-left: base(0.5);
+    &__header-action {
+      @extend %btn-reset;
+      cursor: pointer;
+      margin-left: base(0.5);
 
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
     }
-  }
-
-  &__block-header {
-    display: inline-flex;
-    max-width: 100%;
-    width: 100%;
-    overflow: hidden;
-    gap: base(0.375);
-  }
 
-  &__block-number {
-    flex-shrink: 0;
-  }
+    &__block-header {
+      display: inline-flex;
+      max-width: 100%;
+      width: 100%;
+      overflow: hidden;
+      gap: base(0.375);
+    }
 
-  &__block-pill {
-    flex-shrink: 0;
-    display: block;
-    line-height: unset;
-  }
+    &__block-number {
+      flex-shrink: 0;
+    }
 
-  &__rows {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 2);
-  }
+    &__block-pill {
+      flex-shrink: 0;
+      display: block;
+      line-height: unset;
+    }
 
-  &__drawer-toggler {
-    background-color: transparent;
-    margin: 0;
-    padding: 0;
-    border: none;
-    align-self: flex-start;
+    &__rows {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 2);
+    }
 
-    .btn {
-      color: var(--theme-elevation-400);
+    &__drawer-toggler {
+      background-color: transparent;
       margin: 0;
+      padding: 0;
+      border: none;
+      align-self: flex-start;
 
-      &:hover {
-        color: var(--theme-elevation-800);
+      .btn {
+        color: var(--theme-elevation-400);
+        margin: 0;
+
+        &:hover {
+          color: var(--theme-elevation-800);
+        }
       }
     }
   }
-}
 
-html[data-theme='light'] {
-  .blocks-field--has-error {
-    .section-title__input,
-    .blocks-field__heading-with-error {
-      color: var(--theme-error-750);
+  html[data-theme='light'] {
+    .blocks-field--has-error {
+      .section-title__input,
+      .blocks-field__heading-with-error {
+        color: var(--theme-error-750);
+      }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .blocks-field--has-error {
-    .section-title__input,
-    .blocks-field__heading-with-error {
-      color: var(--theme-error-500);
+  html[data-theme='dark'] {
+    .blocks-field--has-error {
+      .section-title__input,
+      .blocks-field__heading-with-error {
+        color: var(--theme-error-500);
+      }
     }
   }
 }