@payloadcms/next 3.0.0-beta.55 → 3.0.0-beta.56

package/dist/views/LivePreview/index.scss

@@ -0,0 +1,66 @@
+@import '../../scss/styles.scss';
+
+.live-preview {
+  width: 100%;
+  display: flex;
+  --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.04) 0%, transparent 100%);
+
+  [dir='rtl'] & {
+    flex-direction: row-reverse;
+  }
+
+  &--popup-open {
+    .live-preview {
+      &__edit {
+        padding-right: var(--gutter-h);
+      }
+    }
+  }
+
+  &__main {
+    width: 40%;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    position: relative;
+
+    &--popup-open {
+      width: 100%;
+    }
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: calc(var(--base) * 2);
+      height: 100%;
+      background: var(--gradient);
+      pointer-events: none;
+      z-index: -1;
+    }
+  }
+
+  @include mid-break {
+    flex-direction: column;
+
+    &__main {
+      min-height: initial;
+      width: 100%;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    &__form {
+      display: block;
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .live-preview {
+    --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
+  }
+}

package/dist/views/Login/LoginForm/index.scss

@@ -0,0 +1,8 @@
+.login__form {
+  &__inputWrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+    margin-bottom: calc(var(--base) / 4);
+  }
+}

package/dist/views/Login/index.scss

@@ -0,0 +1,8 @@
+.login {
+  &__brand {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: calc(var(--base) * 2);
+  }
+}

package/dist/views/Logout/index.scss

@@ -0,0 +1,20 @@
+.logout {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  min-height: 100vh;
+
+  &__wrap {
+    & > *:first-child {
+      margin-top: 0;
+    }
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+
+    .btn {
+      margin: 0;
+    }
+  }
+}

package/dist/views/NotFound/index.scss

@@ -0,0 +1,37 @@
+@import '../../scss/styles.scss';
+
+.not-found {
+  margin-top: var(--base);
+  display: flex;
+
+  & > * {
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__button {
+    margin: 0;
+  }
+
+  &--margin-top-large {
+    margin-top: calc(var(--base) * 2);
+  }
+
+  @include large-break {
+    &--margin-top-large {
+      margin-top: var(--base);
+    }
+  }
+
+  @include small-break {
+    margin-top: calc(var(--base) / 2);
+
+    &--margin-top-large {
+      margin-top: calc(var(--base) / 2);
+    }
+  }
+}

package/dist/views/ResetPassword/index.scss

@@ -0,0 +1,5 @@
+.reset-password {
+  form > .field-type {
+    margin-bottom: var(--base);
+  }
+}

package/dist/views/Unauthorized/index.scss

@@ -0,0 +1,36 @@
+@import '../../scss/styles.scss';
+
+.unauthorized {
+  margin-top: var(--base);
+
+  & > * {
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__button {
+    margin: 0;
+  }
+
+  &--margin-top-large {
+    margin-top: calc(var(--base) * 2);
+  }
+
+  @include large-break {
+    &--margin-top-large {
+      margin-top: var(--base);
+    }
+  }
+
+  @include small-break {
+    margin-top: calc(var(--base) / 2);
+
+    &--margin-top-large {
+      margin-top: calc(var(--base) / 2);
+    }
+  }
+}

package/dist/views/Verify/index.scss

@@ -0,0 +1,14 @@
+.verify {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  flex-wrap: wrap;
+  min-height: 100vh;
+
+  &__brand {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: calc(var(--base) * 2);
+  }
+}

package/dist/views/Version/Default/index.scss

@@ -0,0 +1,70 @@
+@import '../../../scss/styles.scss';
+
+.view-version {
+  width: 100%;
+  padding-bottom: var(--spacing-view-bottom);
+
+  &__wrap {
+    padding-top: calc(var(--base) * 1.5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+  }
+
+  &__header-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 4);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    h2 {
+      margin: 0;
+    }
+  }
+
+  &__created-at {
+    margin: 0;
+    color: var(--theme-elevation-500);
+  }
+
+  &__controls {
+    display: flex;
+    gap: var(--base);
+
+    > * {
+      flex-basis: 100%;
+    }
+  }
+
+  &__restore {
+    margin: 0 0 0 var(--base);
+  }
+
+  @include mid-break {
+    &__intro,
+    &__header {
+      display: block;
+    }
+
+    &__controls {
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+    }
+
+    &__restore {
+      margin: calc(var(--base) * 0.5) 0 0 0;
+    }
+  }
+
+  @include small-break {
+    &__wrap {
+      padding-top: calc(var(--base) / 2);
+      gap: calc(var(--base) / 2);
+    }
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/Label/index.scss

@@ -0,0 +1,4 @@
+.field-diff-label {
+  margin-bottom: calc(var(--base) * 0.25);
+  font-weight: 600;
+}

package/dist/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss

@@ -0,0 +1,34 @@
+.iterable-diff {
+  margin-bottom: calc(var(--base) * 2);
+
+  &__locale-label {
+    background: var(--theme-elevation-100);
+    padding: calc(var(--base) * 0.25);
+    // border-radius: $style-radius-m;
+    [dir='ltr'] & {
+      margin-right: calc(var(--base) * 0.25);
+    }
+    [dir='rtl'] & {
+      margin-left: calc(var(--base) * 0.25);
+    }
+  }
+
+  &__wrap {
+    margin: calc(var(--base) * 0.5);
+    [dir='ltr'] & {
+      padding-left: calc(var(--base) * 0.5);
+      // border-left: $style-stroke-width-s solid var(--theme-elevation-150);
+    }
+    [dir='rtl'] & {
+      padding-right: calc(var(--base) * 0.5);
+      // border-right: $style-stroke-width-s solid var(--theme-elevation-150);
+    }
+  }
+
+  &__no-rows {
+    font-family: monospace;
+    background-color: var(--theme-elevation-50);
+    // padding: base(0.125) calc(var(--base) * 0.5);
+    // margin: base(0.125) 0;
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/fields/Nested/index.scss

@@ -0,0 +1,12 @@
+.nested-diff {
+  &__wrap--gutter {
+    [dir='ltr'] & {
+      padding-left: calc(var(--base) * 0.25);
+      // border-left: $style-stroke-width-s solid var(--theme-elevation-150);
+    }
+    [dir='rtl'] & {
+      padding-right: calc(var(--base) * 0.25);
+      // border-right: $style-stroke-width-s solid var(--theme-elevation-150);
+    }
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss

@@ -0,0 +1,13 @@
+.relationship-diff {
+  &__locale-label {
+    [dir='ltr'] & {
+      margin-right: calc(var(--base) * 0.25);
+    }
+    [dir='rtl'] & {
+      margin-left: calc(var(--base) * 0.25);
+    }
+    background: var(--theme-elevation-100);
+    padding: calc(var(--base) * 0.25);
+    // border-radius: $style-radius-m;
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/fields/Select/index.scss

@@ -0,0 +1,13 @@
+.select-diff {
+  &__locale-label {
+    [dir='ltr'] & {
+      margin-right: calc(var(--base) * 0.25);
+    }
+    [dir='rtl'] & {
+      margin-left: calc(var(--base) * 0.25);
+    }
+    background: var(--theme-elevation-100);
+    padding: calc(var(--base) * 0.25);
+    // border-radius: $style-radius-m;
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/fields/Text/index.scss

@@ -0,0 +1,13 @@
+.text-diff {
+  &__locale-label {
+    [dir='ltr'] & {
+      margin-right: calc(var(--base) * 0.25);
+    }
+    [dir='rtl'] & {
+      margin-left: calc(var(--base) * 0.25);
+    }
+    background: var(--theme-elevation-100);
+    padding: calc(var(--base) * 0.25);
+    // border-radius: $style-radius-m;
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/index.scss

@@ -0,0 +1,18 @@
+@import '../../../scss/styles.scss';
+
+.render-field-diffs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base);
+
+  &__field {
+    overflow-wrap: anywhere;
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+  }
+
+  @include small-break {
+    gap: calc(var(--base) / 2);
+  }
+}

package/dist/views/Version/Restore/index.scss

@@ -0,0 +1,30 @@
+@import '../../.././scss/styles.scss';
+
+.restore-version {
+  cursor: pointer;
+
+  &__modal {
+    @include blur-bg;
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    &__toggle {
+      @extend %btn-reset;
+    }
+
+    .btn {
+      [dir='ltr'] & {
+        margin-right: var(--base);
+      }
+      [dir='rtl'] & {
+        margin-left: var(--base);
+      }
+    }
+  }
+
+  &__modal-template {
+    position: relative;
+    z-index: 1;
+  }
+}

package/dist/views/Version/SelectComparison/index.scss

@@ -0,0 +1,13 @@
+.compare-version {
+  &__error-loading {
+    border: 1px solid var(--theme-error-500);
+    min-height: calc(var(--base) * 2);
+    padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);
+    background-color: var(--theme-error-500);
+    color: var(--theme-elevation-0);
+  }
+
+  &__label {
+    margin-bottom: calc(var(--base) * 0.25);
+  }
+}

package/dist/views/Version/SelectLocales/index.scss

@@ -0,0 +1,7 @@
+.select-version-locales {
+  flex-grow: 1;
+
+  &__label {
+    margin-bottom: calc(var(--base) * 0.25);
+  }
+}

package/dist/views/Versions/index.scss

@@ -0,0 +1,108 @@
+@import '../../scss/styles.scss';
+
+.versions {
+  width: 100%;
+  margin-bottom: calc(var(--base) * 2);
+
+  &__wrap {
+    padding-top: 0;
+    padding-bottom: var(--spacing-view-bottom);
+    margin-top: calc(var(--base) * 0.75);
+  }
+
+  &__header {
+    margin-bottom: var(--base);
+  }
+
+  &__no-versions {
+    margin-top: calc(var(--base) * 1.5);
+  }
+
+  &__parent-doc {
+    .banner__content {
+      display: flex;
+    }
+  }
+
+  &__parent-doc-pills {
+    [dir='ltr'] & {
+      margin-left: auto;
+    }
+
+    [dir='rtl'] & {
+      margin-right: auto;
+    }
+  }
+
+  .table {
+    table {
+      width: 100%;
+      overflow: auto;
+    }
+  }
+
+  &__page-controls {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .paginator {
+    margin-bottom: 0;
+  }
+
+  &__page-info {
+    [dir='ltr'] & {
+      margin-right: var(--base);
+      margin-left: auto;
+    }
+
+    [dir='rtl'] & {
+      margin-left: var(--base);
+      margin-right: auto;
+    }
+  }
+
+  @include mid-break {
+    &__wrap {
+      padding-top: 0;
+      margin-top: 0;
+    }
+
+    // on mobile, extend the table all the way to the viewport edges
+    // this is to visually indicate overflowing content
+    .table {
+      display: flex;
+      width: calc(100% + calc(var(--gutter-h) * 2));
+      max-width: unset;
+      left: calc(var(--gutter-h) * -1);
+      position: relative;
+      padding-left: var(--gutter-h);
+
+      &::after {
+        content: '';
+        height: 1px;
+        padding-right: var(--gutter-h);
+      }
+    }
+
+    &__page-controls {
+      flex-wrap: wrap;
+    }
+
+    &__page-info {
+      [dir='ltr'] & {
+        margin-left: 0;
+      }
+
+      [dir='rtl'] & {
+        margin-right: 0;
+      }
+    }
+
+    .paginator {
+      width: 100%;
+      margin-bottom: var(--base);
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/next",
-  "version": "3.0.0-beta.55",
+  "version": "3.0.0-beta.56",
   "homepage": "https://payloadcms.com",
   "repository": {
     "type": "git",
@@ -62,9 +62,9 @@
     "sass": "1.77.4",
     "sonner": "^1.5.0",
     "ws": "^8.16.0",
-    "@payloadcms/graphql": "3.0.0-beta.55",
-    "@payloadcms/translations": "3.0.0-beta.55",
-    "@payloadcms/ui": "3.0.0-beta.55"
+    "@payloadcms/graphql": "3.0.0-beta.56",
+    "@payloadcms/ui": "3.0.0-beta.56",
+    "@payloadcms/translations": "3.0.0-beta.56"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.1.0",
@@ -83,13 +83,13 @@
     "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.78.0",
     "webpack-cli": "^5.1.4",
-    "@payloadcms/eslint-config": "1.1.1",
-    "payload": "3.0.0-beta.55"
+    "payload": "3.0.0-beta.56",
+    "@payloadcms/eslint-config": "1.1.1"
   },
   "peerDependencies": {
     "graphql": "^16.8.1",
     "next": "^15.0.0-rc.0",
-    "payload": "3.0.0-beta.55"
+    "payload": "3.0.0-beta.56"
   },
   "engines": {
     "node": "^18.20.2 || >=20.9.0"