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

package/dist/fields/Group/index.scss

@@ -1,144 +1,146 @@
 @import '../../scss/styles.scss';
 
-.group-field {
-  margin-left: calc(var(--gutter-h) * -1);
-  margin-right: calc(var(--gutter-h) * -1);
-  border-bottom: 1px solid var(--theme-elevation-100);
-  border-top: 1px solid var(--theme-elevation-100);
+@layer payload-default {
+  .group-field {
+    margin-left: calc(var(--gutter-h) * -1);
+    margin-right: calc(var(--gutter-h) * -1);
+    border-bottom: 1px solid var(--theme-elevation-100);
+    border-top: 1px solid var(--theme-elevation-100);
 
-  &--top-level {
-    padding: base(2) var(--gutter-h);
+    &--top-level {
+      padding: base(2) var(--gutter-h);
 
-    &:first-child {
-      padding-top: 0;
-      border-top: 0;
+      &:first-child {
+        padding-top: 0;
+        border-top: 0;
+      }
     }
-  }
 
-  &--within-collapsible {
-    margin-left: calc(var(--base) * -1);
-    margin-right: calc(var(--base) * -1);
-    padding: var(--base);
+    &--within-collapsible {
+      margin-left: calc(var(--base) * -1);
+      margin-right: calc(var(--base) * -1);
+      padding: var(--base);
 
-    &:first-child {
-      border-top: 0;
-      padding-top: 0;
-      margin-top: 0;
+      &:first-child {
+        border-top: 0;
+        padding-top: 0;
+        margin-top: 0;
+      }
+
+      &:last-child {
+        padding-bottom: 0;
+        border-bottom: 0;
+      }
     }
 
-    &:last-child {
-      padding-bottom: 0;
+    &--within-group {
+      margin-left: 0;
+      margin-right: 0;
+      padding: 0;
+      border-top: 0;
       border-bottom: 0;
     }
-  }
-
-  &--within-group {
-    margin-left: 0;
-    margin-right: 0;
-    padding: 0;
-    border-top: 0;
-    border-bottom: 0;
-  }
 
-  &--within-row {
-    margin: 0;
-    border-top: 0;
-    border-bottom: 0;
-  }
-
-  &--within-tab:first-child {
-    margin-top: 0;
-    border-top: 0;
-    padding-top: 0;
-  }
+    &--within-row {
+      margin: 0;
+      border-top: 0;
+      border-bottom: 0;
+    }
 
-  &--within-tab:last-child {
-    margin-bottom: 0;
-    border-bottom: 0;
-    padding-bottom: 0;
-  }
+    &--within-tab:first-child {
+      margin-top: 0;
+      border-top: 0;
+      padding-top: 0;
+    }
 
-  &--gutter {
-    border-left: 1px solid var(--theme-elevation-100);
-    padding: 0 0 0 $baseline;
-  }
+    &--within-tab:last-child {
+      margin-bottom: 0;
+      border-bottom: 0;
+      padding-bottom: 0;
+    }
 
-  &__header {
-    margin-bottom: calc(var(--base) / 2);
-    display: flex;
-    align-items: center;
-    gap: base(0.5);
+    &--gutter {
+      border-left: 1px solid var(--theme-elevation-100);
+      padding: 0 0 0 $baseline;
+    }
 
-    > header {
+    &__header {
+      margin-bottom: calc(var(--base) / 2);
       display: flex;
-      flex-direction: column;
-      gap: calc(var(--base) / 4);
+      align-items: center;
+      gap: base(0.5);
+
+      > header {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--base) / 4);
+      }
     }
-  }
 
-  &__title {
-    margin-bottom: 0;
-  }
+    &__title {
+      margin-bottom: 0;
+    }
 
-  @include small-break {
-    &--top-level {
-      padding: var(--base) var(--gutter-h);
+    @include small-break {
+      &--top-level {
+        padding: var(--base) var(--gutter-h);
 
-      &:first-child {
-        padding-top: 0;
-        border-top: 0;
+        &:first-child {
+          padding-top: 0;
+          border-top: 0;
+        }
       }
-    }
 
-    &__header {
-      margin-bottom: calc(var(--base) / 2);
-    }
+      &__header {
+        margin-bottom: calc(var(--base) / 2);
+      }
 
-    &--within-collapsible {
-      margin-left: calc(var(--gutter-h) * -1);
-      margin-right: calc(var(--gutter-h) * -1);
-    }
+      &--within-collapsible {
+        margin-left: calc(var(--gutter-h) * -1);
+        margin-right: calc(var(--gutter-h) * -1);
+      }
 
-    &--within-group {
-      padding: 0;
-    }
+      &--within-group {
+        padding: 0;
+      }
 
-    &--gutter {
-      padding-left: var(--gutter-h);
+      &--gutter {
+        padding-left: var(--gutter-h);
+      }
     }
   }
-}
 
-.group-field + .group-field {
-  border-top: 0;
-  padding-top: 0;
-}
+  .group-field + .group-field {
+    border-top: 0;
+    padding-top: 0;
+  }
 
-.group-field--within-row + .group-field--within-row {
-  margin-top: 0;
-}
+  .group-field--within-row + .group-field--within-row {
+    margin-top: 0;
+  }
 
-.group-field--within-tab + .group-field--within-row {
-  padding-top: 0;
-}
+  .group-field--within-tab + .group-field--within-row {
+    padding-top: 0;
+  }
 
-html[data-theme='light'] {
-  .group-field {
-    &--has-error {
-      color: var(--theme-error-750);
-      &:after {
-        background: var(--theme-error-500);
+  html[data-theme='light'] {
+    .group-field {
+      &--has-error {
+        color: var(--theme-error-750);
+        &:after {
+          background: var(--theme-error-500);
+        }
       }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .group-field {
-    &--has-error {
-      color: var(--theme-error-500);
-      &:after {
-        background: var(--theme-error-500);
+  html[data-theme='dark'] {
+    .group-field {
+      &--has-error {
+        color: var(--theme-error-500);
+        &:after {
+          background: var(--theme-error-500);
+        }
       }
     }
   }

package/dist/fields/JSON/index.scss

@@ -1,16 +1,18 @@
 @import '../../scss/styles.scss';
 
-.json-field {
-  position: relative;
+@layer payload-default {
+  .json-field {
+    position: relative;
 
-  &.error {
-    .code-editor {
-      border-color: var(--theme-error-500);
-    }
+    &.error {
+      .code-editor {
+        border-color: var(--theme-error-500);
+      }
 
-    .monaco-editor-background,
-    .margin {
-      background-color: var(--theme-error-50);
+      .monaco-editor-background,
+      .margin {
+        background-color: var(--theme-error-50);
+      }
     }
   }
 }

package/dist/fields/Number/index.scss

@@ -1,30 +1,32 @@
 @import '../../scss/styles.scss';
 
-.field-type.number {
-  position: relative;
+@layer payload-default {
+  .field-type.number {
+    position: relative;
 
-  &:not(.has-many) {
-    input {
-      @include formInput;
+    &:not(.has-many) {
+      input {
+        @include formInput;
+      }
     }
   }
-}
 
-html[data-theme='light'] {
-  .field-type.number {
-    &.error {
-      input {
-        @include lightInputError;
+  html[data-theme='light'] {
+    .field-type.number {
+      &.error {
+        input {
+          @include lightInputError;
+        }
       }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .field-type.number {
-    &.error {
-      input {
-        @include darkInputError;
+  html[data-theme='dark'] {
+    .field-type.number {
+      &.error {
+        input {
+          @include darkInputError;
+        }
       }
     }
   }

package/dist/fields/Password/index.scss

@@ -1,28 +1,30 @@
 @import '../../scss/styles.scss';
 
-.field-type.password {
-  position: relative;
+@layer payload-default {
+  .field-type.password {
+    position: relative;
 
-  input {
-    @include formInput;
+    input {
+      @include formInput;
+    }
   }
-}
 
-html[data-theme='light'] {
-  .field-type.password {
-    &.error {
-      input {
-        @include lightInputError;
+  html[data-theme='light'] {
+    .field-type.password {
+      &.error {
+        input {
+          @include lightInputError;
+        }
       }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .field-type.password {
-    &.error {
-      input {
-        @include darkInputError;
+  html[data-theme='dark'] {
+    .field-type.password {
+      &.error {
+        input {
+          @include darkInputError;
+        }
       }
     }
   }

package/dist/fields/Point/index.scss

@@ -1,47 +1,49 @@
 @import '../../scss/styles.scss';
 
-.point {
-  position: relative;
-
-  & .input-wrapper {
+@layer payload-default {
+  .point {
     position: relative;
-  }
 
-  &__wrap {
-    display: flex;
-    width: calc(100% + #{base(1)});
-    margin: 0;
-    margin-left: base(-0.5);
-    margin-right: base(-0.5);
-    list-style: none;
-    padding: 0;
+    & .input-wrapper {
+      position: relative;
+    }
+
+    &__wrap {
+      display: flex;
+      width: calc(100% + #{base(1)});
+      margin: 0;
+      margin-left: base(-0.5);
+      margin-right: base(-0.5);
+      list-style: none;
+      padding: 0;
 
-    li {
-      padding: 0 base(0.5);
-      width: 50%;
+      li {
+        padding: 0 base(0.5);
+        width: 50%;
+      }
     }
-  }
 
-  input {
-    @include formInput;
+    input {
+      @include formInput;
+    }
   }
-}
 
-html[data-theme='light'] {
-  .point {
-    &.error {
-      input {
-        @include lightInputError;
+  html[data-theme='light'] {
+    .point {
+      &.error {
+        input {
+          @include lightInputError;
+        }
       }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .point {
-    &.error {
-      input {
-        @include darkInputError;
+  html[data-theme='dark'] {
+    .point {
+      &.error {
+        input {
+          @include darkInputError;
+        }
       }
     }
   }

package/dist/fields/RadioGroup/Radio/index.scss

@@ -1,77 +1,79 @@
 @import '../../../scss/styles.scss';
 
-.radio-input {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  margin: base(0.1) 0;
-  position: relative;
-
-  input[type='radio'] {
-    opacity: 0;
-    margin: 0;
-    position: absolute;
-  }
-
-  input[type='radio']:focus + .radio-input__styled-radio {
-    box-shadow: 0 0 3px 3px var(--theme-success-400);
-  }
-
-  &__styled-radio {
-    border: 1px solid var(--theme-border-color);
-    background-color: var(--theme-input-bg);
-    @include shadow-sm;
-    width: $baseline;
-    height: $baseline;
+@layer payload-default {
+  .radio-input {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin: base(0.1) 0;
     position: relative;
-    padding: 0;
-    display: inline-block;
-    border-radius: 50%;
 
-    &:before {
-      content: ' ';
-      display: block;
-      border-radius: 100%;
-      background-color: var(--theme-elevation-800);
-      width: calc(100% - 8px);
-      height: calc(100% - 8px);
-      border: 4px solid var(--theme-elevation-0);
+    input[type='radio'] {
       opacity: 0;
+      margin: 0;
+      position: absolute;
     }
 
-    &--disabled {
-      @include readOnly;
-      &::before {
-        border-color: var(--theme-elevation-100);
-      }
+    input[type='radio']:focus + .radio-input__styled-radio {
+      box-shadow: 0 0 3px 3px var(--theme-success-400);
     }
-  }
 
-  [dir='rtl'] &__label {
-    margin-left: 0;
-    margin-right: base(0.5);
-  }
+    &__styled-radio {
+      border: 1px solid var(--theme-border-color);
+      background-color: var(--theme-input-bg);
+      @include shadow-sm;
+      width: $baseline;
+      height: $baseline;
+      position: relative;
+      padding: 0;
+      display: inline-block;
+      border-radius: 50%;
 
-  &__label {
-    margin-left: base(0.5);
-  }
+      &:before {
+        content: ' ';
+        display: block;
+        border-radius: 100%;
+        background-color: var(--theme-elevation-800);
+        width: calc(100% - 8px);
+        height: calc(100% - 8px);
+        border: 4px solid var(--theme-elevation-0);
+        opacity: 0;
+      }
 
-  &--is-selected {
-    .radio-input {
-      &__styled-radio {
-        &:before {
-          opacity: 1;
+      &--disabled {
+        @include readOnly;
+        &::before {
+          border-color: var(--theme-elevation-100);
         }
       }
     }
-  }
 
-  &:not(&--is-selected) {
-    &:hover {
+    [dir='rtl'] &__label {
+      margin-left: 0;
+      margin-right: base(0.5);
+    }
+
+    &__label {
+      margin-left: base(0.5);
+    }
+
+    &--is-selected {
       .radio-input {
         &__styled-radio {
           &:before {
-            opacity: 0.2;
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    &:not(&--is-selected) {
+      &:hover {
+        .radio-input {
+          &__styled-radio {
+            &:before {
+              opacity: 0.2;
+            }
           }
         }
       }