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

package/dist/scss/resets.scss

@@ -0,0 +1,17 @@
+%btn-reset {
+  border: 0;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+  color: currentColor;
+}
+
+@mixin btn-reset {
+  border: 0;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+  color: currentColor;
+}

package/dist/scss/styles.scss

@@ -0,0 +1,11 @@
+@import 'vars';
+@import 'z-index';
+
+//////////////////////////////
+// IMPORT OVERRIDES
+//////////////////////////////
+
+@import 'type';
+@import 'queries';
+@import 'resets';
+@import 'svg';

package/dist/scss/svg.scss

@@ -0,0 +1,10 @@
+@mixin color-svg($color) {
+  .stroke {
+    stroke: $color;
+    fill: none;
+  }
+
+  .fill {
+    fill: $color;
+  }
+}

package/dist/scss/toasts.scss

@@ -0,0 +1,111 @@
+.payload-toast-container {
+  .payload-toast-close-button {
+    left: unset;
+    right: 0.5rem;
+    top: 1.55rem;
+    color: var(--theme-elevation-400);
+    background: unset;
+    border: none;
+    display: flex;
+    width: 1.25rem;
+    height: 1.25rem;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      background: none;
+    }
+
+    svg {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    [dir='RTL'] & {
+      right: unset;
+      left: 0.5rem;
+    }
+  }
+
+  .payload-toast-item {
+    padding: 1rem 2.5rem 1rem 1rem;
+    color: var(--theme-text);
+    font-style: normal;
+    font-weight: 600;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    width: 100%;
+    border-radius: 0.15rem;
+    border: 1px solid var(--theme-border-color);
+    background: var(--theme-input-bg);
+    box-shadow:
+      0px 10px 4px -8px rgba(0, 2, 4, 0.02),
+      0px 2px 3px 0px rgba(0, 2, 4, 0.05);
+
+    .toast-content {
+      transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+
+    &[data-front='false'] {
+      .toast-content {
+        opacity: 0;
+      }
+    }
+
+    &[data-expanded='true'] {
+      .toast-content {
+        opacity: 1;
+      }
+    }
+
+    .toast-icon {
+      svg {
+        width: 2.4rem;
+        height: 2.4rem;
+      }
+    }
+
+    &.toast-warning {
+      border-color: var(--theme-warning-200);
+      background-color: var(--theme-warning-100);
+    }
+
+    &.toast-error {
+      border-color: var(--theme-error-300);
+      background-color: var(--theme-error-150);
+    }
+
+    &.toast-success {
+      border-color: var(--theme-success-200);
+      background-color: var(--theme-success-100);
+    }
+
+    &.toast-info {
+      border-color: var(--theme-elevation-250);
+      background-color: var(--theme-elevation-100);
+    }
+
+    [data-theme='light'] & {
+      &.toast-warning {
+        border-color: var(--theme-warning-550);
+        background-color: var(--theme-warning-100);
+      }
+
+      &.toast-error {
+        border-color: var(--theme-error-200);
+        background-color: var(--theme-error-50);
+      }
+
+      &.toast-success {
+        border-color: var(--theme-success-550);
+        background-color: var(--theme-success-50);
+      }
+
+      &.toast-info {
+        border-color: var(--theme-border-color);
+        background-color: var(--theme-elevation-50);
+      }
+    }
+  }
+}

package/dist/scss/type.scss

@@ -0,0 +1,117 @@
+@import 'vars';
+@import 'queries';
+
+/////////////////////////////
+// HEADINGS
+/////////////////////////////
+
+%h1,
+%h2,
+%h3,
+%h4,
+%h5,
+%h6 {
+  font-family: var(--font-body);
+  font-weight: 500;
+}
+
+%jumbo {
+  font-size: base(2.5);
+  line-height: 1;
+  margin: 0 0 base(2);
+}
+
+%h1 {
+  margin: 0 0 base(1);
+  font-size: base(2);
+  line-height: 1.15;
+  letter-spacing: -1px;
+
+  @include small-break {
+    letter-spacing: -0.5px;
+    font-size: base(1.25);
+  }
+}
+
+%h2 {
+  margin: 0 0 base(1);
+  font-size: base(1.25);
+  line-height: 1.15;
+  letter-spacing: -0.5px;
+
+  @include small-break {
+    font-size: base(0.85);
+  }
+}
+
+%h3 {
+  margin: 0 0 base(1);
+  font-size: base(0.925);
+  line-height: 1.25;
+  letter-spacing: -0.5px;
+
+  @include small-break {
+    font-size: base(0.65);
+    line-height: 1.25;
+  }
+}
+
+%h4 {
+  margin: 0 0 $baseline;
+  font-size: base(0.75);
+  line-height: 1.5;
+  letter-spacing: -0.375px;
+}
+
+%h5 {
+  margin: 0;
+  font-size: base(0.5625);
+  line-height: 1.5;
+}
+
+%h6 {
+  margin: 0;
+  font-size: base(0.5);
+  line-height: 1.5;
+}
+
+%small {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+/////////////////////////////
+// TYPE STYLES
+/////////////////////////////
+
+%large-body {
+  font-size: base(0.6);
+  line-height: base(1);
+  letter-spacing: base(0.02);
+
+  @include mid-break {
+    font-size: base(0.7);
+    line-height: base(1);
+  }
+
+  @include small-break {
+    font-size: base(0.55);
+    line-height: base(0.75);
+  }
+}
+
+%body {
+  font-size: $baseline-body-size;
+  line-height: $baseline-px;
+  font-weight: normal;
+}
+
+%code {
+  font-size: base(0.4);
+  color: var(--theme-elevation-400);
+
+  span {
+    color: var(--theme-elevation-800);
+  }
+}

package/dist/scss/vars.scss

@@ -0,0 +1,213 @@
+@use 'sass:math';
+
+/////////////////////////////
+// BREAKPOINTS
+/////////////////////////////
+
+$breakpoint-xs-width: 400px !default;
+$breakpoint-s-width: 768px !default;
+$breakpoint-m-width: 1024px !default;
+$breakpoint-l-width: 1440px !default;
+
+//////////////////////////////
+// BASELINE GRID
+//////////////////////////////
+
+$baseline-px: 25px !default;
+$baseline-body-size: 13px !default;
+$baseline: math.div($baseline-px, $baseline-body-size) + rem;
+
+@function base($multiplier) {
+  @return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
+}
+
+//////////////////////////////
+// COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+//////////////////////////////
+
+$color-dark-gray: #333333 !default;
+$color-gray: #9a9a9a !default;
+$color-light-gray: #dadada !default;
+$color-background-gray: #f3f3f3 !default;
+$color-red: #ff6f76 !default;
+$color-yellow: #fdffa4 !default;
+$color-green: #b2ffd6 !default;
+$color-purple: #f3ddf3 !default;
+
+//////////////////////////////
+// STYLES
+//////////////////////////////
+
+$style-radius-s: 3px !default;
+$style-radius-m: 4px !default;
+$style-radius-l: 9px !default;
+$style-stroke-width: 1px !default;
+
+$style-stroke-width-s: 1px !default;
+$style-stroke-width-m: 2px !default;
+
+//////////////////////////////
+// MISC
+//////////////////////////////
+
+$top-header-offset: calc(var(--base) - 1px);
+$top-header-offset-m: calc(var(--base) * 3);
+$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
+
+//////////////////////////////
+// SHADOWS
+//////////////////////////////
+
+@mixin shadow-sm {
+  box-shadow:
+    0 2px 3px 0 rgba(0, 2, 4, 0.05),
+    0 10px 4px -8px rgba(0, 2, 4, 0.02);
+}
+
+@mixin shadow-m {
+  box-shadow:
+    0 0 30px 0 rgb(0 2 4 / 12%),
+    0 30px 25px -8px rgb(0 2 4 / 10%);
+}
+
+@mixin shadow-lg {
+  box-shadow:
+    0 20px 35px -10px rgba(0, 2, 4, 0.2),
+    0 6px 4px -4px rgba(0, 2, 4, 0.02);
+}
+
+@mixin shadow-lg-top {
+  box-shadow:
+    0 -20px 35px -10px rgba(0, 2, 4, 0.2),
+    0 -6px 4px -4px rgba(0, 2, 4, 0.02);
+}
+
+@mixin shadow {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+}
+
+@mixin inputShadowActive {
+  box-shadow:
+    0 2px 3px 0 rgba(0, 2, 4, 0.16),
+    0 6px 4px -4px rgba(0, 2, 4, 0.13);
+}
+
+@mixin inputShadow {
+  @include shadow-sm;
+
+  &:not(:disabled) {
+    &:hover {
+      box-shadow:
+        0 2px 3px 0 rgba(0, 2, 4, 0.13),
+        0 6px 4px -4px rgba(0, 2, 4, 0.1);
+    }
+
+    &:active,
+    &:focus-within,
+    &:focus {
+      @include inputShadowActive;
+    }
+  }
+}
+
+@mixin soft-shadow-bottom {
+  box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
+}
+
+//////////////////////////////
+// STYLE MIXINS
+//////////////////////////////
+
+@mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) {
+  &:before,
+  &:after {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &:before {
+    background: $color;
+    opacity: $opacity;
+  }
+
+  &:after {
+    backdrop-filter: blur(8px);
+  }
+}
+
+@mixin blur-bg-light {
+  @include blur-bg(var(--theme-bg), 0.3);
+}
+
+@mixin formInput() {
+  @include inputShadow;
+  font-family: var(--font-body);
+  width: 100%;
+  border: 1px solid var(--theme-elevation-150);
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-800);
+  border-radius: 0;
+  font-size: 1rem;
+  height: base(2);
+  line-height: base(1);
+  padding: base(0.5) base(0.75);
+  -webkit-appearance: none;
+
+  &[data-rtl='true'] {
+    direction: rtl;
+  }
+
+  &::-webkit-input-placeholder {
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &::-moz-placeholder {
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &:hover {
+    border-color: var(--theme-elevation-250);
+  }
+
+  &:focus,
+  &:focus-within,
+  &:active {
+    border-color: var(--theme-elevation-400);
+    outline: 0;
+  }
+
+  &:disabled {
+    background: var(--theme-elevation-200);
+    color: var(--theme-elevation-450);
+
+    &:hover {
+      border-color: var(--theme-elevation-150);
+    }
+  }
+}
+
+@mixin lightInputError {
+  background-color: var(--theme-error-50);
+  border: 1px solid var(--theme-error-500);
+}
+
+@mixin darkInputError {
+  background-color: var(--theme-error-100);
+  border: 1px solid var(--theme-error-400);
+
+  &:hover {
+    border-color: var(--theme-error-500);
+  }
+}

package/dist/scss/z-index.scss

@@ -0,0 +1,9 @@
+/////////////////////////////
+// Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+/////////////////////////////
+
+$z-page: 20;
+$z-page-content: 30;
+$z-nav: 40;
+$z-modal: 50;
+$z-status: 60;

package/dist/templates/Default/Wrapper/index.scss

@@ -0,0 +1,25 @@
+@import '../../../scss/styles.scss';
+
+.template-default {
+  min-height: 100vh;
+  display: grid;
+  position: relative;
+  grid-template-columns: 0 auto;
+  transition: grid-template-columns var(--nav-trans-time) linear;
+  isolation: isolate;
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+
+  &--nav-open {
+    width: 100%;
+    grid-template-columns: var(--nav-width) auto;
+
+    .template-default {
+      &__nav-overlay {
+        transition: opacity var(--nav-trans-time) linear;
+      }
+    }
+  }
+}

package/dist/templates/Default/index.scss

@@ -0,0 +1,67 @@
+@import '../../scss/styles.scss';
+
+.template-default {
+  background-color: var(--theme-bg);
+  color: var(--theme-text);
+
+  [dir='rtl'] &__nav-toggler-wrapper {
+    left: unset;
+    right: 0;
+  }
+
+  &__nav-toggler-wrapper {
+    position: fixed;
+    z-index: var(--z-modal);
+    top: 0;
+    left: 0;
+    height: var(--app-header-height);
+    width: var(--gutter-h);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__wrap {
+    min-width: 0;
+    width: 100%;
+    flex-grow: 1;
+    position: relative;
+    background-color: var(--theme-bg);
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0;
+      background-color: inherit;
+      opacity: 0;
+      z-index: var(--z-status);
+      visibility: hidden;
+      transition: all var(--nav-trans-time) linear;
+    }
+  }
+
+  @include mid-break {
+    &__nav-toggler-wrapper {
+      .hamburger {
+        left: unset;
+      }
+    }
+  }
+
+  @include small-break {
+    &__nav-toggler-wrapper {
+      width: unset;
+      justify-content: unset;
+
+      .hamburger {
+        display: none;
+      }
+    }
+
+    .template-default {
+      &__wrap {
+        min-width: 100vw;
+      }
+    }
+  }
+}

package/dist/templates/Minimal/index.scss

@@ -0,0 +1,28 @@
+@import '../../scss/styles';
+
+.template-minimal {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  padding: base(3) $baseline;
+  margin-left: auto;
+  margin-right: auto;
+  min-height: 100%;
+  background-color: var(--theme-bg-color);
+  color: var(--theme-text);
+
+  &--width-normal {
+    .template-minimal__wrap {
+      max-width: 500px;
+      width: 100%;
+    }
+  }
+
+  &--width-wide {
+    .template-minimal__wrap {
+      max-width: 1024px;
+      width: 100%;
+    }
+  }
+}

package/dist/utilities/addDataAndFileToRequest.d.ts

@@ -1,10 +1,7 @@
-import type { PayloadRequest, PayloadRequestData } from 'payload';
-type ReturnType = PayloadRequest & PayloadRequestData;
-type AddDataAndFileToRequest = (args: {
-    request: PayloadRequest;
-}) => Promise<ReturnType>;
+import type { PayloadRequest } from 'payload';
+type AddDataAndFileToRequest = (req: PayloadRequest) => Promise<void>;
 /**
- * Mutates the Request to contain 'data' and 'file' if present
+ * Mutates the Request, appending 'data' and 'file' if found
  */
 export declare const addDataAndFileToRequest: AddDataAndFileToRequest;
 export {};

package/dist/utilities/addDataAndFileToRequest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"addDataAndFileToRequest.d.ts","sourceRoot":"","sources":["../../src/utilities/addDataAndFileToRequest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAQjE,KAAK,UAAU,GAAG,cAAc,GAAG,kBAAkB,CAAA;AACrD,KAAK,uBAAuB,GAAG,CAAC,IAAI,EAAE;IAAE,OAAO,EAAE,cAAc,CAAA;CAAE,KAAK,OAAO,CAAC,UAAU,CAAC,CAAA;AAEzF;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,uBA+CrC,CAAA"}
+{"version":3,"file":"addDataAndFileToRequest.d.ts","sourceRoot":"","sources":["../../src/utilities/addDataAndFileToRequest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAQ7C,KAAK,uBAAuB,GAAG,CAAC,GAAG,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;AAErE;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,uBAoCrC,CAAA"}

package/dist/utilities/addDataAndFileToRequest.js

@@ -1,45 +1,42 @@
 import { APIError } from 'payload';
 import { fetchAPIFileUpload } from '../fetchAPI-multipart/index.js';
 /**
- * Mutates the Request to contain 'data' and 'file' if present
- */ export const addDataAndFileToRequest = async ({ request: incomingRequest })=>{
-    const config = incomingRequest.payload.config;
-    if (incomingRequest.method && [
+ * Mutates the Request, appending 'data' and 'file' if found
+ */ export const addDataAndFileToRequest = async (req)=>{
+    const { body, headers, method, payload } = req;
+    if (method && [
         'PATCH',
         'POST',
         'PUT'
-    ].includes(incomingRequest.method.toUpperCase()) && incomingRequest.body) {
-        const [contentType] = (incomingRequest.headers.get('Content-Type') || '').split(';');
-        const mutableRequest = incomingRequest;
-        const bodyByteSize = parseInt(incomingRequest.headers.get('Content-Length') || '0', 10);
+    ].includes(method.toUpperCase()) && body) {
+        const [contentType] = (headers.get('Content-Type') || '').split(';');
+        const bodyByteSize = parseInt(req.headers.get('Content-Length') || '0', 10);
         if (contentType === 'application/json') {
             let data = {};
             try {
-                data = await mutableRequest.json();
+                data = await req.json();
             } catch (error) {
-                mutableRequest.payload.logger.error(error);
+                req.payload.logger.error(error);
             } finally{
-                mutableRequest.data = data;
-                mutableRequest.json = ()=>Promise.resolve(data);
+                req.data = data;
+                req.json = ()=>Promise.resolve(data);
             }
         } else if (bodyByteSize && contentType.includes('multipart/')) {
             const { error, fields, files } = await fetchAPIFileUpload({
-                options: config.upload,
-                request: mutableRequest
+                options: payload.config.upload,
+                request: req
             });
             if (error) {
                 throw new APIError(error.message);
             }
             if (files?.file) {
-                mutableRequest.file = files.file;
+                req.file = files.file;
             }
             if (fields?._payload && typeof fields._payload === 'string') {
-                mutableRequest.data = JSON.parse(fields._payload);
+                req.data = JSON.parse(fields._payload);
             }
         }
-        return mutableRequest;
     }
-    return incomingRequest;
 };
 
 //# sourceMappingURL=addDataAndFileToRequest.js.map