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

package/dist/fields/Checkbox/index.scss

@@ -1,146 +1,148 @@
 @import '../../scss/styles.scss';
 
-.checkbox {
-  position: relative;
-  margin-bottom: $baseline;
-
-  .tooltip:not([aria-hidden='true']) {
-    right: auto;
-    position: static;
-    transform: translateY(calc(var(--caret-size) * -1));
-    margin-bottom: 0.2em;
-    max-width: fit-content;
-  }
-}
-
-.checkbox-input {
-  display: inline-flex;
-  &:hover:not(&--read-only) {
-    label,
-    input {
-      cursor: pointer;
+@layer payload-default {
+  .checkbox {
+    position: relative;
+    margin-bottom: $baseline;
+
+    .tooltip:not([aria-hidden='true']) {
+      right: auto;
+      position: static;
+      transform: translateY(calc(var(--caret-size) * -1));
+      margin-bottom: 0.2em;
+      max-width: fit-content;
     }
   }
 
-  label {
-    padding-bottom: 0;
-    padding-left: base(0.5);
-  }
+  .checkbox-input {
+    display: inline-flex;
+    &:hover:not(&--read-only) {
+      label,
+      input {
+        cursor: pointer;
+      }
+    }
 
-  [dir='rtl'] &__input {
-    margin-right: 0;
-    margin-left: base(0.5);
-  }
+    label {
+      padding-bottom: 0;
+      padding-left: base(0.5);
+    }
 
-  &__input {
-    @include formInput;
-    display: flex;
-    padding: 0;
-    line-height: 0;
-    position: relative;
-    width: $baseline;
-    height: $baseline;
+    [dir='rtl'] &__input {
+      margin-right: 0;
+      margin-left: base(0.5);
+    }
 
-    & input[type='checkbox'] {
-      position: absolute;
-      // Without the extra 4px, there is an uncheckable area due to the border of the parent element
-      width: calc(100% + 4px);
-      height: calc(100% + 4px);
+    &__input {
+      @include formInput;
+      display: flex;
       padding: 0;
-      margin: 0;
-      margin-left: -2px;
-      margin-top: -2px;
-      opacity: 0;
-      border-radius: 0;
-      z-index: 1;
+      line-height: 0;
+      position: relative;
+      width: $baseline;
+      height: $baseline;
+
+      & input[type='checkbox'] {
+        position: absolute;
+        // Without the extra 4px, there is an uncheckable area due to the border of the parent element
+        width: calc(100% + 4px);
+        height: calc(100% + 4px);
+        padding: 0;
+        margin: 0;
+        margin-left: -2px;
+        margin-top: -2px;
+        opacity: 0;
+        border-radius: 0;
+        z-index: 1;
+      }
     }
-  }
 
-  &__icon {
-    position: absolute;
+    &__icon {
+      position: absolute;
 
-    svg {
-      opacity: 0;
+      svg {
+        opacity: 0;
+      }
     }
-  }
 
-  &:not(&--read-only) {
-    &:active,
-    &:focus-within,
-    &:focus {
-      .checkbox-input__input,
-      & input[type='checkbox'] {
-        outline: 0;
-        box-shadow: 0 0 3px 3px var(--theme-success-400) !important;
-        border: 1px solid var(--theme-elevation-150);
+    &:not(&--read-only) {
+      &:active,
+      &:focus-within,
+      &:focus {
+        .checkbox-input__input,
+        & input[type='checkbox'] {
+          outline: 0;
+          box-shadow: 0 0 3px 3px var(--theme-success-400) !important;
+          border: 1px solid var(--theme-elevation-150);
+        }
       }
-    }
 
-    &:hover {
-      .checkbox-input__input,
-      & input[type='checkbox'] {
-        border-color: var(--theme-elevation-250);
+      &:hover {
+        .checkbox-input__input,
+        & input[type='checkbox'] {
+          border-color: var(--theme-elevation-250);
+        }
       }
     }
-  }
 
-  &:not(&--read-only):not(&--checked) {
-    &:hover {
-      cursor: pointer;
+    &:not(&--read-only):not(&--checked) {
+      &:hover {
+        cursor: pointer;
 
-      svg {
-        opacity: 0.2;
+        svg {
+          opacity: 0.2;
+        }
       }
     }
-  }
 
-  &--checked {
-    .checkbox-input__icon {
-      svg {
-        opacity: 1;
+    &--checked {
+      .checkbox-input__icon {
+        svg {
+          opacity: 1;
+        }
       }
     }
-  }
 
-  .checkbox-input__icon {
-    .icon--line {
-      width: 1.4rem;
-      height: 1.4rem;
-    }
+    .checkbox-input__icon {
+      .icon--line {
+        width: 1.4rem;
+        height: 1.4rem;
+      }
 
-    &.partial {
-      svg {
-        opacity: 1;
+      &.partial {
+        svg {
+          opacity: 1;
+        }
       }
     }
-  }
 
-  &--read-only {
-    .checkbox-input__input {
-      @include readOnly;
-    }
+    &--read-only {
+      .checkbox-input__input {
+        @include readOnly;
+      }
 
-    label {
-      color: var(--theme-elevation-400);
+      label {
+        color: var(--theme-elevation-400);
+      }
     }
   }
-}
 
-html[data-theme='light'] {
-  .checkbox {
-    &.error {
-      .checkbox-input__input {
-        @include lightInputError;
+  html[data-theme='light'] {
+    .checkbox {
+      &.error {
+        .checkbox-input__input {
+          @include lightInputError;
+        }
       }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .checkbox {
-    &.error {
-      .checkbox-input__input {
-        @include darkInputError;
+  html[data-theme='dark'] {
+    .checkbox {
+      &.error {
+        .checkbox-input__input {
+          @include darkInputError;
+        }
       }
     }
   }

package/dist/fields/Code/index.scss

@@ -1,24 +1,26 @@
 @import '../../scss/styles.scss';
 
-.code-field {
-  position: relative;
+@layer payload-default {
+  .code-field {
+    position: relative;
 
-  &.error {
-    textarea {
-      border: 1px solid var(--theme-error-500) !important;
+    &.error {
+      textarea {
+        border: 1px solid var(--theme-error-500) !important;
+      }
+      .code-editor {
+        border-color: var(--theme-error-500);
+      }
+      .monaco-editor-background,
+      .margin {
+        background-color: var(--theme-error-50);
+      }
     }
-    .code-editor {
-      border-color: var(--theme-error-500);
-    }
-    .monaco-editor-background,
-    .margin {
-      background-color: var(--theme-error-50);
-    }
-  }
 
-  .read-only {
-    .code-editor {
-      @include readOnly;
+    .read-only {
+      .code-editor {
+        @include readOnly;
+      }
     }
   }
 }

package/dist/fields/Collapsible/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAwD,MAAM,SAAS,CAAA;AAEhG,OAAO,KAAqD,MAAM,OAAO,CAAA;AAazE,OAAO,cAAc,CAAA;AAqKrB,eAAO,MAAM,gBAAgB;;;;;;;;yBAC22mB,CAAC;;;;;;;;;;yBAAD,CAAC;;;;;;;yBAAyH,CAAC;;;;;;;yBAAD,CAAC;;;;;;;;;;;yBAA3H,CAAC;;;;;;;;;;yBAAD,CAAC;;;;;;;yBAAyH,CAAC;;;;;;;yBAAD,CAAC;;;;;;;;;;;yBAA3H,CAAC;;;;;;;;;;yBAAD,CAAC;;;;;;;yBAAyH,CAAC;;;;;;;yBAAD,CAAC;;;;;;;;;;;yBAA3H,CAAC;;;;;;;;;;yBAAD,CAAC;;;;;;;yBAAyH,CAAC;;;;;;;yBAAD,CAAC;;;;oCAD37mB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAwD,MAAM,SAAS,CAAA;AAEhG,OAAO,KAAqD,MAAM,OAAO,CAAA;AAazE,OAAO,cAAc,CAAA;AAqKrB,eAAO,MAAM,gBAAgB;;;;;;;;yBACu6mB,CAAC;;;;;;;;;;yBAAD,CAAC;;;;;;;yBAAyH,CAAC;;;;;;;yBAAD,CAAC;;;;;;;;;;;yBAA3H,CAAC;;;;;;;;;;yBAAD,CAAC;;;;;;;yBAAyH,CAAC;;;;;;;yBAAD,CAAC;;;;;;;;;;;yBAA3H,CAAC;;;;;;;;;;yBAAD,CAAC;;;;;;;yBAAyH,CAAC;;;;;;;yBAAD,CAAC;;;;;;;;;;;yBAA3H,CAAC;;;;;;;;;;yBAAD,CAAC;;;;;;;yBAAyH,CAAC;;;;;;;yBAAD,CAAC;;;;oCADv/mB,CAAA"}

package/dist/fields/Collapsible/index.scss

@@ -1,10 +1,12 @@
 @import '../../scss/styles.scss';
 
-.collapsible-field {
-  &__row-label-wrap {
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-    gap: base(0.5);
+@layer payload-default {
+  .collapsible-field {
+    &__row-label-wrap {
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      gap: base(0.5);
+    }
   }
 }

package/dist/fields/ConfirmPassword/index.scss

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

package/dist/fields/DateTime/index.scss

@@ -1,20 +1,22 @@
 @import '../../scss/styles.scss';
 
-html[data-theme='light'] {
-  .date-time-field {
-    &--has-error {
-      .react-datepicker__input-container input {
-        @include lightInputError;
+@layer payload-default {
+  html[data-theme='light'] {
+    .date-time-field {
+      &--has-error {
+        .react-datepicker__input-container input {
+          @include lightInputError;
+        }
       }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .date-time-field {
-    &--has-error {
-      .react-datepicker__input-container input {
-        @include darkInputError;
+  html[data-theme='dark'] {
+    .date-time-field {
+      &--has-error {
+        .react-datepicker__input-container input {
+          @include darkInputError;
+        }
       }
     }
   }

package/dist/fields/Email/index.scss

@@ -1,34 +1,36 @@
 @import '../../scss/styles.scss';
 
-.field-type.email {
-  position: relative;
-
-  input {
-    @include formInput;
-  }
+@layer payload-default {
+  .field-type.email {
+    position: relative;
 
-  &.error {
     input {
-      background-color: var(--theme-error-200);
+      @include formInput;
     }
-  }
-}
 
-html[data-theme='light'] {
-  .field-type.email {
     &.error {
       input {
-        @include lightInputError;
+        background-color: var(--theme-error-200);
       }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .field-type.email {
-    &.error {
-      input {
-        @include darkInputError;
+  html[data-theme='light'] {
+    .field-type.email {
+      &.error {
+        input {
+          @include lightInputError;
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .field-type.email {
+      &.error {
+        input {
+          @include darkInputError;
+        }
       }
     }
   }

package/dist/fields/FieldDescription/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles.scss';
 
-.field-description {
-  display: flex;
-  color: var(--theme-elevation-400);
-  margin-top: calc(var(--base) / 4);
+@layer payload-default {
+  .field-description {
+    display: flex;
+    color: var(--theme-elevation-400);
+    margin-top: calc(var(--base) / 4);
 
-  &--margin-bottom {
-    margin-top: 0;
-    margin-bottom: calc(var(--base) / 2);
+    &--margin-bottom {
+      margin-top: 0;
+      margin-bottom: calc(var(--base) / 2);
+    }
   }
 }

package/dist/fields/FieldError/index.scss

@@ -1,16 +1,18 @@
 @import '../../scss/styles';
 
-.field-error.tooltip {
-  font-family: var(--font-body);
-  left: auto;
-  max-width: 75%;
-  right: 0;
-  transform: translateY(calc(var(--caret-size) * -1));
-  color: var(--theme-error-950);
-  background-color: var(--theme-error-300);
+@layer payload-default {
+  .field-error.tooltip {
+    font-family: var(--font-body);
+    left: auto;
+    max-width: 75%;
+    right: 0;
+    transform: translateY(calc(var(--caret-size) * -1));
+    color: var(--theme-error-950);
+    background-color: var(--theme-error-300);
 
-  &::after {
-    border-top-color: var(--theme-error-300);
-    border-bottom-color: var(--theme-error-300);
+    &::after {
+      border-top-color: var(--theme-error-300);
+      border-bottom-color: var(--theme-error-300);
+    }
   }
 }

package/dist/fields/FieldLabel/index.scss

@@ -1,21 +1,23 @@
 @import '../../scss/styles.scss';
 
-label.field-label:not(.unstyled) {
-  @extend %body;
-  display: flex;
-  padding-bottom: base(0.25);
-  color: var(--theme-elevation-800);
-  font-family: var(--font-body);
+@layer payload-default {
+  label.field-label:not(.unstyled) {
+    @extend %body;
+    display: flex;
+    padding-bottom: base(0.25);
+    color: var(--theme-elevation-800);
+    font-family: var(--font-body);
 
-  .required {
-    color: var(--theme-error-500);
-    [dir='ltr'] & {
-      margin-left: base(0.25);
-      margin-right: auto;
-    }
-    [dir='rtl'] & {
-      margin-right: base(0.25);
-      margin-left: auto;
+    .required {
+      color: var(--theme-error-500);
+      [dir='ltr'] & {
+        margin-left: base(0.25);
+        margin-right: auto;
+      }
+      [dir='rtl'] & {
+        margin-right: base(0.25);
+        margin-left: auto;
+      }
     }
   }
 }