@payloadcms/ui 3.0.0-beta.110 → 3.0.0-beta.112

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;
+  }
 }

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);
+    }
   }
 }