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

package/dist/elements/NavGroup/index.scss

@@ -1,56 +1,58 @@
 @import '../../scss/styles.scss';
 
-.nav-group {
-  width: 100%;
-  margin-bottom: base(0.5);
-
-  &__toggle {
-    cursor: pointer;
-    color: var(--theme-elevation-400);
-    background: transparent;
-    padding-left: 0;
-    border: 0;
-    margin-bottom: base(0.25);
+@layer payload-default {
+  .nav-group {
     width: 100%;
-    text-align: left;
-    display: flex;
-    align-items: flex-start;
-    padding: 0;
-    gap: base(0.5);
-    justify-content: space-between;
-
-    svg {
-      flex-shrink: 0;
-      margin-top: base(-0.2);
-    }
+    margin-bottom: base(0.5);
+
+    &__toggle {
+      cursor: pointer;
+      color: var(--theme-elevation-400);
+      background: transparent;
+      padding-left: 0;
+      border: 0;
+      margin-bottom: base(0.25);
+      width: 100%;
+      text-align: left;
+      display: flex;
+      align-items: flex-start;
+      padding: 0;
+      gap: base(0.5);
+      justify-content: space-between;
+
+      svg {
+        flex-shrink: 0;
+        margin-top: base(-0.2);
+      }
 
-    &:hover,
-    &:focus-visible {
-      color: var(--theme-elevation-1000);
+      &:hover,
+      &:focus-visible {
+        color: var(--theme-elevation-1000);
 
-      .stroke {
-        stroke: var(--theme-elevation-1000);
+        .stroke {
+          stroke: var(--theme-elevation-1000);
+        }
       }
-    }
 
-    &:focus-visible {
-      outline: none;
+      &:focus-visible {
+        outline: none;
+      }
     }
-  }
 
-  &__indicator {
-    position: relative;
-    flex-shrink: 0;
+    &__indicator {
+      position: relative;
+      flex-shrink: 0;
 
-    svg .stroke {
-      stroke: var(--theme-elevation-200);
+      svg .stroke {
+        stroke: var(--theme-elevation-200);
+      }
     }
-  }
 
-  &--collapsed {
-    .collapsible__toggle {
-      border-bottom-right-radius: $style-radius-m;
-      border-bottom-left-radius: $style-radius-m;
+    &--collapsed {
+      .collapsible__toggle {
+        border-bottom-right-radius: $style-radius-m;
+        border-bottom-left-radius: $style-radius-m;
+      }
     }
   }
 }

package/dist/elements/Pagination/ClickableArrow/index.scss

@@ -1,45 +1,47 @@
 @import '../../../scss/styles.scss';
 
-.clickable-arrow {
-  cursor: pointer;
-  @extend %btn-reset;
-  width: base(2);
-  height: base(2);
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  outline: 0;
-  padding: base(0.5);
-  color: var(--theme-elevation-800);
-  line-height: base(1);
+@layer payload-default {
+  .clickable-arrow {
+    cursor: pointer;
+    @extend %btn-reset;
+    width: base(2);
+    height: base(2);
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    outline: 0;
+    padding: base(0.5);
+    color: var(--theme-elevation-800);
+    line-height: base(1);
 
-  &:not(.clickable-arrow--is-disabled) {
-    &:hover,
-    &:focus-visible {
-      background: var(--theme-elevation-100);
+    &:not(.clickable-arrow--is-disabled) {
+      &:hover,
+      &:focus-visible {
+        background: var(--theme-elevation-100);
+      }
     }
-  }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
-  }
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
 
-  &--right {
-    .icon {
-      transform: rotate(-90deg);
+    &--right {
+      .icon {
+        transform: rotate(-90deg);
+      }
     }
-  }
 
-  &--left .icon {
-    transform: rotate(90deg);
-  }
+    &--left .icon {
+      transform: rotate(90deg);
+    }
 
-  &--is-disabled {
-    cursor: default;
+    &--is-disabled {
+      cursor: default;
 
-    .icon .stroke {
-      stroke: var(--theme-elevation-400);
+      .icon .stroke {
+        stroke: var(--theme-elevation-400);
+      }
     }
   }
 }

package/dist/elements/Pagination/index.scss

@@ -1,51 +1,53 @@
 @import '../../scss/styles.scss';
 
-.paginator {
-  display: flex;
-  margin-bottom: $baseline;
+@layer payload-default {
+  .paginator {
+    display: flex;
+    margin-bottom: $baseline;
 
-  &__page {
-    cursor: pointer;
+    &__page {
+      cursor: pointer;
 
-    &--is-current {
-      background: var(--theme-elevation-100);
-      color: var(--theme-elevation-400);
-      cursor: default;
-    }
+      &--is-current {
+        background: var(--theme-elevation-100);
+        color: var(--theme-elevation-400);
+        cursor: default;
+      }
 
-    &--is-last-page {
-      margin-right: 0;
+      &--is-last-page {
+        margin-right: 0;
+      }
     }
-  }
 
-  .clickable-arrow--right {
-    margin-right: base(0.25);
-  }
+    .clickable-arrow--right {
+      margin-right: base(0.25);
+    }
 
-  &__page {
-    @extend %btn-reset;
-    width: base(2);
-    height: base(2);
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    outline: 0;
-    padding: base(0.5);
-    color: var(--theme-elevation-800);
-    line-height: base(1);
-
-    &:focus-visible {
-      outline: var(--accessibility-outline);
+    &__page {
+      @extend %btn-reset;
+      width: base(2);
+      height: base(2);
+      display: flex;
+      justify-content: center;
+      align-content: center;
+      outline: 0;
+      padding: base(0.5);
+      color: var(--theme-elevation-800);
+      line-height: base(1);
+
+      &:focus-visible {
+        outline: var(--accessibility-outline);
+      }
     }
-  }
 
-  &__page,
-  &__separator {
-    margin-right: base(0.25);
-  }
+    &__page,
+    &__separator {
+      margin-right: base(0.25);
+    }
 
-  &__separator {
-    align-self: center;
-    color: var(--theme-elevation-400);
+    &__separator {
+      align-self: center;
+      color: var(--theme-elevation-400);
+    }
   }
 }

package/dist/elements/PerPage/index.scss

@@ -1,46 +1,48 @@
 @import '../../scss/styles.scss';
 
-.per-page {
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 4);
-  }
+@layer payload-default {
+  .per-page {
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+    }
 
-  &__base-button {
-    display: flex;
-    align-items: center;
-    font-weight: bold;
-  }
+    &__base-button {
+      display: flex;
+      align-items: center;
+      font-weight: bold;
+    }
 
-  &__button {
-    @extend %btn-reset;
-    cursor: pointer;
-    text-align: left;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    color: var(--theme-elevation-500);
+    &__button {
+      @extend %btn-reset;
+      cursor: pointer;
+      text-align: left;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      color: var(--theme-elevation-500);
 
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
-    }
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
 
-    svg .stroke {
-      stroke: currentColor;
+      svg .stroke {
+        stroke: currentColor;
+      }
     }
-  }
 
-  &__chevron {
-    padding-left: calc(var(--base) / 4);
-  }
+    &__chevron {
+      padding-left: calc(var(--base) / 4);
+    }
 
-  &__button-active {
-    font-weight: bold;
-    color: var(--theme-text);
+    &__button-active {
+      font-weight: bold;
+      color: var(--theme-text);
+    }
   }
 }

package/dist/elements/Pill/index.scss

@@ -1,134 +1,136 @@
 @import '../../scss/styles.scss';
 
-.pill {
-  font-size: 1rem;
-  line-height: base(1.2);
-  display: inline-flex;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-s;
-  cursor: default;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: 0;
-  padding: 0 base(0.4);
-  align-items: center;
-  flex-shrink: 0;
-  gap: base(0.2);
-
-  &--rounded {
-    border-radius: var(--style-radius-l);
-    line-height: 18px;
-    font-size: 12px;
-  }
-
-  &:active,
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: var(--accessibility-outline);
-    outline-offset: var(--accessibility-outline-offset);
-  }
-
-  .icon {
-    flex-shrink: 0;
-    margin: base(0.1);
-  }
-
-  &__label {
+@layer payload-default {
+  .pill {
+    font-size: 1rem;
+    line-height: base(1.2);
+    display: inline-flex;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-s;
+    cursor: default;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-  }
+    border: 0;
+    padding: 0 base(0.4);
+    align-items: center;
+    flex-shrink: 0;
+    gap: base(0.2);
 
-  &--has-action {
-    cursor: pointer;
-    text-decoration: none;
-  }
+    &--rounded {
+      border-radius: var(--style-radius-l);
+      line-height: 18px;
+      font-size: 12px;
+    }
 
-  &--is-dragging {
-    cursor: grabbing;
-  }
+    &:active,
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
 
-  &--has-icon {
-    padding-inline-start: base(0.4);
-    padding-inline-end: base(0.3);
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
 
-    svg {
-      display: block;
+    .icon {
+      flex-shrink: 0;
+      margin: base(0.1);
     }
-  }
 
-  &--align-icon-left {
-    flex-direction: row-reverse;
-    padding-inline-start: base(0.1);
-    padding-inline-end: base(0.4);
-  }
+    &__label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &--has-action {
+      cursor: pointer;
+      text-decoration: none;
+    }
 
-  &--style-white {
-    background: var(--theme-elevation-0);
+    &--is-dragging {
+      cursor: grabbing;
+    }
 
-    &.pill--has-action {
-      &:hover {
-        background: var(--theme-elevation-100);
-      }
+    &--has-icon {
+      padding-inline-start: base(0.4);
+      padding-inline-end: base(0.3);
 
-      &:active {
-        background: var(--theme-elevation-100);
+      svg {
+        display: block;
       }
     }
-  }
 
-  &--style-light {
-    &.pill--has-action {
-      &:hover {
-        background: var(--theme-elevation-100);
-      }
+    &--align-icon-left {
+      flex-direction: row-reverse;
+      padding-inline-start: base(0.1);
+      padding-inline-end: base(0.4);
+    }
 
-      &:active {
-        background: var(--theme-elevation-100);
+    &--style-white {
+      background: var(--theme-elevation-0);
+
+      &.pill--has-action {
+        &:hover {
+          background: var(--theme-elevation-100);
+        }
+
+        &:active {
+          background: var(--theme-elevation-100);
+        }
       }
     }
-  }
 
-  &--style-light-gray {
-    background: var(--theme-elevation-100);
-    color: var(--theme-elevation-800);
-  }
+    &--style-light {
+      &.pill--has-action {
+        &:hover {
+          background: var(--theme-elevation-100);
+        }
 
-  &--style-warning {
-    background: var(--theme-warning-150);
-    color: var(--theme-warning-800);
-  }
+        &:active {
+          background: var(--theme-elevation-100);
+        }
+      }
+    }
 
-  &--style-success {
-    background: var(--theme-success-150);
-    color: var(--theme-success-800);
-  }
+    &--style-light-gray {
+      background: var(--theme-elevation-100);
+      color: var(--theme-elevation-800);
+    }
 
-  &--style-error {
-    background: var(--theme-error-150);
-    color: var(--theme-error-800);
-  }
+    &--style-warning {
+      background: var(--theme-warning-150);
+      color: var(--theme-warning-800);
+    }
 
-  &--style-dark {
-    background: var(--theme-elevation-800);
-    color: var(--theme-elevation-0);
+    &--style-success {
+      background: var(--theme-success-150);
+      color: var(--theme-success-800);
+    }
 
-    svg {
-      @include color-svg(var(--theme-elevation-0));
+    &--style-error {
+      background: var(--theme-error-150);
+      color: var(--theme-error-800);
     }
 
-    &.pill--has-action {
-      &:hover {
-        background: var(--theme-elevation-750);
+    &--style-dark {
+      background: var(--theme-elevation-800);
+      color: var(--theme-elevation-0);
+
+      svg {
+        @include color-svg(var(--theme-elevation-0));
       }
 
-      &:active {
-        background: var(--theme-elevation-700);
+      &.pill--has-action {
+        &:hover {
+          background: var(--theme-elevation-750);
+        }
+
+        &:active {
+          background: var(--theme-elevation-700);
+        }
       }
     }
   }