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

package/dist/elements/ListDrawer/index.scss

@@ -1,116 +1,118 @@
 @import '../../scss/styles.scss';
 
-.list-drawer {
-  &__header {
-    margin-top: base(2.5);
-    width: 100%;
-
-    @include mid-break {
-      margin-top: base(1.5);
+@layer payload-default {
+  .list-drawer {
+    &__header {
+      margin-top: base(2.5);
+      width: 100%;
+
+      @include mid-break {
+        margin-top: base(1.5);
+      }
     }
-  }
 
-  &__header-wrap {
-    display: flex;
-    gap: base(1);
-  }
-
-  &__header-content {
-    display: flex;
-    flex-wrap: wrap;
-    flex-grow: 1;
-    align-items: flex-start;
-    align-items: center;
-
-    button .pill {
-      pointer-events: none;
-      margin: 0;
-      top: 4px;
-      margin-left: base(0.5);
+    &__header-wrap {
+      display: flex;
+      gap: base(1);
     }
-  }
 
-  &__header-text {
-    margin: 0;
-  }
-
-  &__header-close {
-    flex-shrink: 0;
-  }
+    &__header-content {
+      display: flex;
+      flex-wrap: wrap;
+      flex-grow: 1;
+      align-items: flex-start;
+      align-items: center;
 
-  &__toggler {
-    background: transparent;
-    border: 0;
-    padding: 0;
-    cursor: pointer;
-    color: inherit;
-    border-radius: var(--style-radius-s);
-
-    &:focus:not(:focus-visible),
-    &:focus-within:not(:focus-visible) {
-      outline: none;
+      button .pill {
+        pointer-events: none;
+        margin: 0;
+        top: 4px;
+        margin-left: base(0.5);
+      }
     }
 
-    &:focus-visible {
-      outline: var(--accessibility-outline);
-      outline-offset: var(--accessibility-outline-offset);
+    &__header-text {
+      margin: 0;
     }
 
-    &:disabled {
-      pointer-events: none;
+    &__header-close {
+      flex-shrink: 0;
     }
-  }
 
-  &__header-close {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    overflow: hidden;
-    width: base(1);
-    height: base(1);
-
-    svg {
-      width: base(2);
-      height: base(2);
-      position: relative;
-      inset-inline-start: base(-0.5);
-      top: base(-0.5);
-
-      .stroke {
-        stroke-width: 2px;
-        vector-effect: non-scaling-stroke;
+    &__toggler {
+      background: transparent;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+      color: inherit;
+      border-radius: var(--style-radius-s);
+
+      &:focus:not(:focus-visible),
+      &:focus-within:not(:focus-visible) {
+        outline: none;
       }
-    }
-  }
 
-  &__select-collection-wrap {
-    margin-top: base(1);
-  }
+      &:focus-visible {
+        outline: var(--accessibility-outline);
+        outline-offset: var(--accessibility-outline-offset);
+      }
 
-  &__first-cell {
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    cursor: pointer;
-    text-decoration: underline;
-    text-align: left;
-    white-space: nowrap;
-  }
+      &:disabled {
+        pointer-events: none;
+      }
+    }
 
-  @include mid-break {
-    .collection-list__header {
-      margin-bottom: base(0.5);
+    &__header-close {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+      overflow: hidden;
+      width: base(1);
+      height: base(1);
+
+      svg {
+        width: base(2);
+        height: base(2);
+        position: relative;
+        inset-inline-start: base(-0.5);
+        top: base(-0.5);
+
+        .stroke {
+          stroke-width: 2px;
+          vector-effect: non-scaling-stroke;
+        }
+      }
     }
 
     &__select-collection-wrap {
-      margin-top: calc(var(--base) / 2);
+      margin-top: base(1);
     }
 
-    &__header-content {
-      button .pill {
-        top: 2px;
+    &__first-cell {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      text-decoration: underline;
+      text-align: left;
+      white-space: nowrap;
+    }
+
+    @include mid-break {
+      .collection-list__header {
+        margin-bottom: base(0.5);
+      }
+
+      &__select-collection-wrap {
+        margin-top: calc(var(--base) / 2);
+      }
+
+      &__header-content {
+        button .pill {
+          top: 2px;
+        }
       }
     }
   }

package/dist/elements/ListHeader/index.scss

@@ -1,10 +1,12 @@
-.list-header {
-  display: flex;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  gap: calc(var(--base) * 0.8);
+@layer payload-default {
+  .list-header {
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    gap: calc(var(--base) * 0.8);
 
-  h1 {
-    margin: 0;
+    h1 {
+      margin: 0;
+    }
   }
 }

package/dist/elements/ListSelection/index.scss

@@ -1,18 +1,20 @@
 @import '../../scss/styles.scss';
 
-.list-selection {
-  margin-left: auto;
-  color: var(--theme-elevation-500);
-
-  &__button {
+@layer payload-default {
+  .list-selection {
+    margin-left: auto;
     color: var(--theme-elevation-500);
-    background: unset;
-    border: none;
-    text-decoration: underline;
-    cursor: pointer;
-  }
 
-  @include small-break {
-    margin-bottom: base(0.5);
+    &__button {
+      color: var(--theme-elevation-500);
+      background: unset;
+      border: none;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+
+    @include small-break {
+      margin-bottom: base(0.5);
+    }
   }
 }

package/dist/elements/Loading/index.scss

@@ -1,136 +1,138 @@
 @import '../../scss/styles';
 
-.loading-overlay {
-  isolation: isolate;
-  height: 100%;
-  width: 100%;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  pointer-events: none;
-  z-index: calc(var(--z-status) + 1);
-  transition-property: left, width;
-  transition: 250ms ease;
-
-  &.loading-overlay--entering {
-    opacity: 1;
-    animation: fade-in ease;
-    pointer-events: all;
-  }
-
-  &.loading-overlay--exiting {
-    opacity: 0;
-    animation: fade-out ease;
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
+@layer payload-default {
+  .loading-overlay {
+    isolation: isolate;
     height: 100%;
-    background-color: var(--theme-elevation-0);
-    opacity: 0.85;
-    z-index: -1;
-  }
-
-  &__bars {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    gap: 7px;
+    width: 100%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    position: fixed;
+    display: flex;
     align-items: center;
-  }
-
-  &__bar {
-    width: 2px;
-    background-color: currentColor;
-    height: 15px;
-
-    &:nth-child(1) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
+    justify-content: center;
+    flex-direction: column;
+    pointer-events: none;
+    z-index: calc(var(--z-status) + 1);
+    transition-property: left, width;
+    transition: 250ms ease;
+
+    &.loading-overlay--entering {
+      opacity: 1;
+      animation: fade-in ease;
+      pointer-events: all;
     }
 
-    &:nth-child(2) {
-      transform: translateY(-2px);
-      animation: animate-bar--even 1.25s infinite;
+    &.loading-overlay--exiting {
+      opacity: 0;
+      animation: fade-out ease;
     }
 
-    &:nth-child(3) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--theme-elevation-0);
+      opacity: 0.85;
+      z-index: -1;
     }
 
-    &:nth-child(4) {
-      transform: translateY(-2px);
-      animation: animate-bar--even 1.25s infinite;
+    &__bars {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+      gap: 7px;
+      align-items: center;
     }
 
-    &:nth-child(5) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
+    &__bar {
+      width: 2px;
+      background-color: currentColor;
+      height: 15px;
+
+      &:nth-child(1) {
+        transform: translateY(0);
+        animation: animate-bar--odd 1.25s infinite;
+      }
+
+      &:nth-child(2) {
+        transform: translateY(-2px);
+        animation: animate-bar--even 1.25s infinite;
+      }
+
+      &:nth-child(3) {
+        transform: translateY(0);
+        animation: animate-bar--odd 1.25s infinite;
+      }
+
+      &:nth-child(4) {
+        transform: translateY(-2px);
+        animation: animate-bar--even 1.25s infinite;
+      }
+
+      &:nth-child(5) {
+        transform: translateY(0);
+        animation: animate-bar--odd 1.25s infinite;
+      }
     }
-  }
 
-  &__text {
-    margin-top: base(0.75);
-    text-transform: uppercase;
-    font-family: var(--font-body);
-    font-size: base(0.65);
-    letter-spacing: 3px;
+    &__text {
+      margin-top: base(0.75);
+      text-transform: uppercase;
+      font-family: var(--font-body);
+      font-size: base(0.65);
+      letter-spacing: 3px;
+    }
   }
-}
 
-@keyframes animate-bar--even {
-  0% {
-    transform: translateY(2px);
-  }
+  @keyframes animate-bar--even {
+    0% {
+      transform: translateY(2px);
+    }
 
-  50% {
-    transform: translateY(-2px);
-  }
+    50% {
+      transform: translateY(-2px);
+    }
 
-  100% {
-    transform: translateY(2px);
+    100% {
+      transform: translateY(2px);
+    }
   }
-}
 
-@keyframes animate-bar--odd {
-  0% {
-    transform: translateY(-2px);
-  }
+  @keyframes animate-bar--odd {
+    0% {
+      transform: translateY(-2px);
+    }
 
-  50% {
-    transform: translateY(2px);
-  }
+    50% {
+      transform: translateY(2px);
+    }
 
-  100% {
-    transform: translateY(-2px);
+    100% {
+      transform: translateY(-2px);
+    }
   }
-}
 
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
 
-  100% {
-    opacity: 1;
+    100% {
+      opacity: 1;
+    }
   }
-}
 
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
 
-  100% {
-    opacity: 0;
+    100% {
+      opacity: 0;
+    }
   }
 }

package/dist/elements/Localizer/LocalizerLabel/index.scss

@@ -1,55 +1,57 @@
 @import '../../../scss/styles.scss';
 
-.localizer-button {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  display: flex;
-  padding-inline-start: base(0.4);
-  padding-inline-end: base(0.4);
-  background-color: var(--theme-elevation-100);
-  border-radius: var(--style-radius-s);
-
-  &__label {
-    color: var(--theme-elevation-500);
-  }
+@layer payload-default {
+  .localizer-button {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    display: flex;
+    padding-inline-start: base(0.4);
+    padding-inline-end: base(0.4);
+    background-color: var(--theme-elevation-100);
+    border-radius: var(--style-radius-s);
 
-  &__chevron {
-    .stroke {
-      stroke: currentColor;
+    &__label {
+      color: var(--theme-elevation-500);
     }
-  }
 
-  &__current {
-    display: flex;
-    align-items: center;
-    gap: base(0.3);
-  }
+    &__chevron {
+      .stroke {
+        stroke: currentColor;
+      }
+    }
 
-  button {
-    color: currentColor;
-    padding: 0;
-    font-size: 1rem;
-    line-height: base(1);
-    background: transparent;
-    border: 0;
-    font-weight: 600;
-    cursor: pointer;
-
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
+    &__current {
+      display: flex;
+      align-items: center;
+      gap: base(0.3);
     }
 
-    &:active,
-    &:focus {
-      outline: none;
+    button {
+      color: currentColor;
+      padding: 0;
+      font-size: 1rem;
+      line-height: base(1);
+      background: transparent;
+      border: 0;
+      font-weight: 600;
+      cursor: pointer;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+
+      &:active,
+      &:focus {
+        outline: none;
+      }
     }
-  }
 
-  @include small-break {
-    &__label {
-      display: none;
+    @include small-break {
+      &__label {
+        display: none;
+      }
     }
   }
 }

package/dist/elements/Localizer/index.scss

@@ -1,8 +1,10 @@
 @import '../../scss/styles.scss';
 
-.localizer {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
+@layer payload-default {
+  .localizer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
 }

package/dist/elements/Locked/index.scss

@@ -1,14 +1,16 @@
 @import '../../scss/styles.scss';
 
-.locked {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: all;
+@layer payload-default {
+  .locked {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: all;
 
-  &__tooltip {
-    left: 0;
-    transform: translate3d(-0%, calc(var(--caret-size) * -1), 0);
+    &__tooltip {
+      left: 0;
+      transform: translate3d(-0%, calc(var(--caret-size) * -1), 0);
+    }
   }
 }

package/dist/elements/Nav/NavToggler/index.scss

@@ -1,10 +1,12 @@
 @import '../../../scss/styles.scss';
 
-.nav-toggler {
-  position: relative;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  cursor: pointer;
+@layer payload-default {
+  .nav-toggler {
+    position: relative;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    cursor: pointer;
+  }
 }