@payloadcms/ui 3.0.0-canary.b8dd0db → 3.0.0-canary.bb00d64

package/dist/elements/AppHeader/index.scss

@@ -1,194 +1,195 @@
 @import '../../scss/styles.scss';
 
-.app-header {
-  position: relative;
-  width: 100%;
-  height: var(--app-header-height);
-  z-index: var(--z-modal);
-
-  &__mobile-nav-toggler {
-    display: none;
-  }
-
-  // place the localizer outside the `overflow: hidden` container so that the popup is visible
-  // this means we need to use a placeholder div so that the space is retained in the DOM
-  [dir='rtl'] &__localizer {
-    right: unset;
-    left: base(4.5);
-  }
-  &__localizer.localizer {
-    position: absolute;
-    top: 50%;
-    right: base(4.5);
-    transform: translate3d(0, -50%, 0);
-  }
-
-  &__localizer-spacing {
-    visibility: hidden;
-  }
-
-  &__bg {
-    opacity: 0;
-    position: absolute;
-    left: 0;
-    top: 0;
+@layer payload-default {
+  .app-header {
+    position: relative;
     width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
+    height: var(--app-header-height);
+    z-index: var(--z-modal);
 
-  &--show-bg {
-    opacity: 1;
-  }
+    &__mobile-nav-toggler {
+      display: none;
+    }
 
-  &__content {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 0 var(--gutter-h);
-    position: relative;
-    flex-grow: 1;
-  }
+    // place the localizer outside the `overflow: hidden` container so that the popup is visible
+    // this means we need to use a placeholder div so that the space is retained in the DOM
+    [dir='rtl'] &__localizer {
+      right: unset;
+      left: base(4.5);
+    }
+    &__localizer.localizer {
+      position: absolute;
+      top: 50%;
+      right: base(4.5);
+      transform: translate3d(0, -50%, 0);
+    }
 
-  &__wrapper {
-    display: flex;
-    gap: calc(var(--base) / 2);
-    align-items: center;
-    height: 100%;
-    flex-grow: 1;
-    justify-content: space-between;
-    width: 100%;
-  }
+    &__localizer-spacing {
+      visibility: hidden;
+    }
 
-  &__account {
-    position: relative;
+    &__bg {
+      opacity: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
 
-    &:focus:not(:focus-visible) {
+    &--show-bg {
       opacity: 1;
     }
 
-    // Use a pseudo element for the accessability so that it doesn't take up DOM space
-    // Also because the parent element has `overflow: hidden` which would clip an outline
-    &:focus-visible {
-      outline: none;
+    &__content {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      padding: 0 var(--gutter-h);
+      position: relative;
+      flex-grow: 1;
+    }
 
-      &::after {
-        content: '';
-        border: var(--accessibility-outline);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
-      }
+    &__wrapper {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      align-items: center;
+      height: 100%;
+      flex-grow: 1;
+      justify-content: space-between;
+      width: 100%;
     }
-  }
 
-  &__controls-wrapper {
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    overflow: hidden;
-    width: 100%;
-  }
+    &__account {
+      position: relative;
 
-  &__step-nav-wrapper {
-    flex-grow: 0;
-    overflow: auto;
-    display: flex;
-    width: 100%;
+      &:focus:not(:focus-visible) {
+        opacity: 1;
+      }
 
-    &::-webkit-scrollbar {
-      display: none;
+      // Use a pseudo element for the accessability so that it doesn't take up DOM space
+      // Also because the parent element has `overflow: hidden` which would clip an outline
+      &:focus-visible {
+        outline: none;
+
+        &::after {
+          content: '';
+          border: var(--accessibility-outline);
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          pointer-events: none;
+        }
+      }
     }
-  }
 
-  &__actions-wrapper {
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    gap: calc(var(--base) / 2);
-    margin-right: var(--base);
-  }
-
-  &__gradient-placeholder {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: var(--base);
-    height: var(--base);
-    background: linear-gradient(to right, transparent, var(--theme-bg));
-  }
+    &__controls-wrapper {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      overflow: hidden;
+      width: 100%;
+    }
 
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--base) / 2);
-    flex-shrink: 0;
-    max-width: 600px;
-    overflow: auto;
-    white-space: nowrap;
+    &__step-nav-wrapper {
+      flex-grow: 0;
+      overflow: auto;
+      display: flex;
+      width: 100%;
 
-    &::-webkit-scrollbar {
-      display: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
-  }
-
-  &__last-action {
-    margin-right: var(--base);
-  }
 
-  @include large-break {
-    &__actions {
-      max-width: 500px;
+    &__actions-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) / 2);
+      margin-right: var(--base);
     }
-  }
 
-  @include mid-break {
     &__gradient-placeholder {
-      right: var(--base);
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: var(--base);
+      height: var(--base);
+      background: linear-gradient(to right, transparent, var(--theme-bg));
     }
 
     &__actions {
-      max-width: 300px;
-      margin-right: var(--base);
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) / 2);
+      flex-shrink: 0;
+      max-width: 600px;
+      overflow: auto;
+      white-space: nowrap;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
-  }
 
-  @include small-break {
-    &__localizer.localizer {
-      right: base(2);
+    &__last-action {
+      margin-right: var(--base);
     }
 
-    &--nav-open {
-      .app-header__localizer {
-        display: none;
+    @include large-break {
+      &__actions {
+        max-width: 500px;
       }
     }
 
-    &__mobile-nav-toggler {
-      display: flex;
-      align-items: center;
+    @include mid-break {
+      &__gradient-placeholder {
+        right: var(--base);
+      }
 
-      &.nav-toggler--is-open {
-        opacity: 0.5;
+      &__actions {
+        max-width: 300px;
+        margin-right: var(--base);
       }
     }
 
-    &__step-header {
-      // TODO: overflow the step header instead of hide it
-      display: none;
-    }
+    @include small-break {
+      &__localizer.localizer {
+        right: base(2);
+      }
 
-    &__gradient-placeholder {
-      right: 0;
-    }
+      &--nav-open {
+        .app-header__localizer {
+          display: none;
+        }
+      }
 
-    &__actions {
-      max-width: 150px;
-      margin-right: 0;
+      &__mobile-nav-toggler {
+        display: flex;
+        align-items: center;
+
+        &.nav-toggler--is-open {
+          opacity: 0.5;
+        }
+      }
+
+      &__step-header {
+        // TODO: overflow the step header instead of hide it
+        display: none;
+      }
+
+      &__gradient-placeholder {
+        right: 0;
+      }
+
+      &__actions {
+        max-width: 150px;
+        margin-right: 0;
+      }
     }
   }
 }

package/dist/elements/ArrayAction/index.scss

@@ -1,32 +1,34 @@
 @import '../../scss/styles.scss';
 
-.array-actions {
-  &__button {
-    @extend %btn-reset;
-    cursor: pointer;
-    border-radius: 100px;
+@layer payload-default {
+  .array-actions {
+    &__button {
+      @extend %btn-reset;
+      cursor: pointer;
+      border-radius: 100px;
 
-    &:hover {
-      background: var(--theme-elevation-0);
+      &:hover {
+        background: var(--theme-elevation-0);
+      }
     }
-  }
 
-  &__actions {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
+    &__actions {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
 
-  &__action {
-    display: flex;
-    gap: calc(var(--base) / 2);
-    align-items: center;
+    &__action {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      align-items: center;
 
-    svg {
-      position: relative;
+      svg {
+        position: relative;
 
-      .stroke {
-        stroke-width: 1px;
+        .stroke {
+          stroke-width: 1px;
+        }
       }
     }
   }

package/dist/elements/Autosave/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Autosave/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGzE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAiB1D,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,qBAAqB,EAAE,MAAM,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6OpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Autosave/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGzE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAkB1D,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,qBAAqB,EAAE,MAAM,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqPpC,CAAA"}