@payloadcms/next 3.0.0-canary.a0b06af → 3.0.0-canary.a192632

package/dist/routes/rest/og/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/routes/rest/og/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI7C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAU7C,eAAO,MAAM,OAAO,WAAW,CAAA;AAE/B,eAAO,MAAM,WAAW,cAAc,CAAA;AAEtC,eAAO,MAAM,eAAe,YAAmB;IAAE,GAAG,EAAE,cAAc,CAAA;CAAE;;mBA6DrE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/routes/rest/og/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI7C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAU7C,eAAO,MAAM,OAAO,WAAW,CAAA;AAE/B,eAAO,MAAM,WAAW,cAAc,CAAA;AAEtC,eAAO,MAAM,eAAe,YAAmB;IAAE,GAAG,EAAE,cAAc,CAAA;CAAE;;mBAwErE,CAAA"}

package/dist/routes/rest/og/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PayloadIcon } from '@payloadcms/ui/shared';
+import { PayloadIcon, getCreateMappedComponent } from '@payloadcms/ui/shared';
 import fs from 'fs/promises';
 import { ImageResponse } from 'next/og.js';
 import { NextResponse } from 'next/server.js';
@@ -27,7 +27,11 @@ export const generateOGImage = async ({ req })=>{
         const hasLeader = searchParams.has('leader');
         const leader = hasLeader ? searchParams.get('leader')?.slice(0, 100).replace('-', ' ') : '';
         const description = searchParams.has('description') ? searchParams.get('description') : '';
-        const Icon = config.admin?.components?.graphics?.Icon || PayloadIcon;
+        const createMappedComponent = getCreateMappedComponent({
+            importMap: req.payload.importMap,
+            serverProps: {}
+        });
+        const mappedIcon = createMappedComponent(config.admin?.components?.graphics?.Icon, undefined, PayloadIcon, 'config.admin.components.graphics.Icon');
         let fontData;
         try {
             // TODO: replace with `.woff2` file when supported
@@ -40,7 +44,7 @@ export const generateOGImage = async ({ req })=>{
         }
         const fontFamily = 'Roboto, sans-serif';
         return new ImageResponse(/*#__PURE__*/ _jsx(OGImage, {
-            Icon: Icon,
+            Icon: mappedIcon,
             description: description,
             fontFamily: fontFamily,
             leader: leader,

package/dist/routes/rest/og/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/routes/rest/og/index.tsx"],"sourcesContent":["import type { PayloadRequest } from 'payload'\n\nimport { PayloadIcon } from '@payloadcms/ui/shared'\nimport fs from 'fs/promises'\nimport { ImageResponse } from 'next/og.js'\nimport { NextResponse } from 'next/server.js'\nimport path from 'path'\nimport React from 'react'\nimport { fileURLToPath } from 'url'\n\nimport { OGImage } from './image.js'\n\nconst filename = fileURLToPath(import.meta.url)\nconst dirname = path.dirname(filename)\n\nexport const runtime = 'nodejs'\n\nexport const contentType = 'image/png'\n\nexport const generateOGImage = async ({ req }: { req: PayloadRequest }) => {\n  const config = req.payload.config\n\n  if (config.admin.meta.defaultOGImageType === 'off') {\n    return NextResponse.json({ error: `Open Graph images are disabled` }, { status: 400 })\n  }\n\n  try {\n    const { searchParams } = new URL(req.url)\n\n    const hasTitle = searchParams.has('title')\n    const title = hasTitle ? searchParams.get('title')?.slice(0, 100) : ''\n    const hasLeader = searchParams.has('leader')\n    const leader = hasLeader ? searchParams.get('leader')?.slice(0, 100).replace('-', ' ') : ''\n    const description = searchParams.has('description') ? searchParams.get('description') : ''\n    const Icon = config.admin?.components?.graphics?.Icon || PayloadIcon\n\n    let fontData\n\n    try {\n      // TODO: replace with `.woff2` file when supported\n      // See https://github.com/vercel/next.js/issues/63935\n      // Or better yet, use a CDN like Google Fonts if ever supported\n      fontData = fs.readFile(path.join(dirname, 'roboto-regular.woff'))\n    } catch (e) {\n      console.error(`Error reading font file or not readable: ${e.message}`) // eslint-disable-line no-console\n    }\n\n    const fontFamily = 'Roboto, sans-serif'\n\n    return new ImageResponse(\n      (\n        <OGImage\n          Icon={Icon}\n          description={description}\n          fontFamily={fontFamily}\n          leader={leader}\n          title={title}\n        />\n      ),\n      {\n        ...(fontData\n          ? {\n              fonts: [\n                {\n                  name: 'Roboto',\n                  data: await fontData,\n                  style: 'normal',\n                  weight: 400,\n                },\n              ],\n            }\n          : {}),\n        height: 630,\n        width: 1200,\n      },\n    )\n  } catch (e: any) {\n    console.error(`${e.message}`) // eslint-disable-line no-console\n    return NextResponse.json({ error: `Internal Server Error: ${e.message}` }, { status: 500 })\n  }\n}\n"],"names":["PayloadIcon","fs","ImageResponse","NextResponse","path","React","fileURLToPath","OGImage","filename","url","dirname","runtime","contentType","generateOGImage","req","config","payload","admin","meta","defaultOGImageType","json","error","status","searchParams","URL","hasTitle","has","title","get","slice","hasLeader","leader","replace","description","Icon","components","graphics","fontData","readFile","join","e","console","message","fontFamily","fonts","name","data","style","weight","height","width"],"mappings":";AAEA,SAASA,WAAW,QAAQ,wBAAuB;AACnD,OAAOC,QAAQ,cAAa;AAC5B,SAASC,aAAa,QAAQ,aAAY;AAC1C,SAASC,YAAY,QAAQ,iBAAgB;AAC7C,OAAOC,UAAU,OAAM;AACvB,OAAOC,WAAW,QAAO;AACzB,SAASC,aAAa,QAAQ,MAAK;AAEnC,SAASC,OAAO,QAAQ,aAAY;AAEpC,MAAMC,WAAWF,cAAc,YAAYG,GAAG;AAC9C,MAAMC,UAAUN,KAAKM,OAAO,CAACF;AAE7B,OAAO,MAAMG,UAAU,SAAQ;AAE/B,OAAO,MAAMC,cAAc,YAAW;AAEtC,OAAO,MAAMC,kBAAkB,OAAO,EAAEC,GAAG,EAA2B;IACpE,MAAMC,SAASD,IAAIE,OAAO,CAACD,MAAM;IAEjC,IAAIA,OAAOE,KAAK,CAACC,IAAI,CAACC,kBAAkB,KAAK,OAAO;QAClD,OAAOhB,aAAaiB,IAAI,CAAC;YAAEC,OAAO,CAAC,8BAA8B,CAAC;QAAC,GAAG;YAAEC,QAAQ;QAAI;IACtF;IAEA,IAAI;QACF,MAAM,EAAEC,YAAY,EAAE,GAAG,IAAIC,IAAIV,IAAIL,GAAG;QAExC,MAAMgB,WAAWF,aAAaG,GAAG,CAAC;QAClC,MAAMC,QAAQF,WAAWF,aAAaK,GAAG,CAAC,UAAUC,MAAM,GAAG,OAAO;QACpE,MAAMC,YAAYP,aAAaG,GAAG,CAAC;QACnC,MAAMK,SAASD,YAAYP,aAAaK,GAAG,CAAC,WAAWC,MAAM,GAAG,KAAKG,QAAQ,KAAK,OAAO;QACzF,MAAMC,cAAcV,aAAaG,GAAG,CAAC,iBAAiBH,aAAaK,GAAG,CAAC,iBAAiB;QACxF,MAAMM,OAAOnB,OAAOE,KAAK,EAAEkB,YAAYC,UAAUF,QAAQlC;QAEzD,IAAIqC;QAEJ,IAAI;YACF,kDAAkD;YAClD,qDAAqD;YACrD,+DAA+D;YAC/DA,WAAWpC,GAAGqC,QAAQ,CAAClC,KAAKmC,IAAI,CAAC7B,SAAS;QAC5C,EAAE,OAAO8B,GAAG;YACVC,QAAQpB,KAAK,CAAC,CAAC,yCAAyC,EAAEmB,EAAEE,OAAO,CAAC,CAAC,EAAE,iCAAiC;;QAC1G;QAEA,MAAMC,aAAa;QAEnB,OAAO,IAAIzC,4BAEP,KAACK;YACC2B,MAAMA;YACND,aAAaA;YACbU,YAAYA;YACZZ,QAAQA;YACRJ,OAAOA;YAGX;YACE,GAAIU,WACA;gBACEO,OAAO;oBACL;wBACEC,MAAM;wBACNC,MAAM,MAAMT;wBACZU,OAAO;wBACPC,QAAQ;oBACV;iBACD;YACH,IACA,CAAC,CAAC;YACNC,QAAQ;YACRC,OAAO;QACT;IAEJ,EAAE,OAAOV,GAAQ;QACfC,QAAQpB,KAAK,CAAC,CAAC,EAAEmB,EAAEE,OAAO,CAAC,CAAC,EAAE,iCAAiC;;QAC/D,OAAOvC,aAAaiB,IAAI,CAAC;YAAEC,OAAO,CAAC,uBAAuB,EAAEmB,EAAEE,OAAO,CAAC,CAAC;QAAC,GAAG;YAAEpB,QAAQ;QAAI;IAC3F;AACF,EAAC"}
+{"version":3,"sources":["../../../../src/routes/rest/og/index.tsx"],"sourcesContent":["import type { PayloadRequest } from 'payload'\n\nimport { PayloadIcon, getCreateMappedComponent } from '@payloadcms/ui/shared'\nimport fs from 'fs/promises'\nimport { ImageResponse } from 'next/og.js'\nimport { NextResponse } from 'next/server.js'\nimport path from 'path'\nimport React from 'react'\nimport { fileURLToPath } from 'url'\n\nimport { OGImage } from './image.js'\n\nconst filename = fileURLToPath(import.meta.url)\nconst dirname = path.dirname(filename)\n\nexport const runtime = 'nodejs'\n\nexport const contentType = 'image/png'\n\nexport const generateOGImage = async ({ req }: { req: PayloadRequest }) => {\n  const config = req.payload.config\n\n  if (config.admin.meta.defaultOGImageType === 'off') {\n    return NextResponse.json({ error: `Open Graph images are disabled` }, { status: 400 })\n  }\n\n  try {\n    const { searchParams } = new URL(req.url)\n\n    const hasTitle = searchParams.has('title')\n    const title = hasTitle ? searchParams.get('title')?.slice(0, 100) : ''\n    const hasLeader = searchParams.has('leader')\n    const leader = hasLeader ? searchParams.get('leader')?.slice(0, 100).replace('-', ' ') : ''\n    const description = searchParams.has('description') ? searchParams.get('description') : ''\n\n    const createMappedComponent = getCreateMappedComponent({\n      importMap: req.payload.importMap,\n      serverProps: {},\n    })\n\n    const mappedIcon = createMappedComponent(\n      config.admin?.components?.graphics?.Icon,\n      undefined,\n      PayloadIcon,\n      'config.admin.components.graphics.Icon',\n    )\n\n    let fontData\n\n    try {\n      // TODO: replace with `.woff2` file when supported\n      // See https://github.com/vercel/next.js/issues/63935\n      // Or better yet, use a CDN like Google Fonts if ever supported\n      fontData = fs.readFile(path.join(dirname, 'roboto-regular.woff'))\n    } catch (e) {\n      console.error(`Error reading font file or not readable: ${e.message}`) // eslint-disable-line no-console\n    }\n\n    const fontFamily = 'Roboto, sans-serif'\n\n    return new ImageResponse(\n      (\n        <OGImage\n          Icon={mappedIcon}\n          description={description}\n          fontFamily={fontFamily}\n          leader={leader}\n          title={title}\n        />\n      ),\n      {\n        ...(fontData\n          ? {\n              fonts: [\n                {\n                  name: 'Roboto',\n                  data: await fontData,\n                  style: 'normal',\n                  weight: 400,\n                },\n              ],\n            }\n          : {}),\n        height: 630,\n        width: 1200,\n      },\n    )\n  } catch (e: any) {\n    console.error(`${e.message}`) // eslint-disable-line no-console\n    return NextResponse.json({ error: `Internal Server Error: ${e.message}` }, { status: 500 })\n  }\n}\n"],"names":["PayloadIcon","getCreateMappedComponent","fs","ImageResponse","NextResponse","path","React","fileURLToPath","OGImage","filename","url","dirname","runtime","contentType","generateOGImage","req","config","payload","admin","meta","defaultOGImageType","json","error","status","searchParams","URL","hasTitle","has","title","get","slice","hasLeader","leader","replace","description","createMappedComponent","importMap","serverProps","mappedIcon","components","graphics","Icon","undefined","fontData","readFile","join","e","console","message","fontFamily","fonts","name","data","style","weight","height","width"],"mappings":";AAEA,SAASA,WAAW,EAAEC,wBAAwB,QAAQ,wBAAuB;AAC7E,OAAOC,QAAQ,cAAa;AAC5B,SAASC,aAAa,QAAQ,aAAY;AAC1C,SAASC,YAAY,QAAQ,iBAAgB;AAC7C,OAAOC,UAAU,OAAM;AACvB,OAAOC,WAAW,QAAO;AACzB,SAASC,aAAa,QAAQ,MAAK;AAEnC,SAASC,OAAO,QAAQ,aAAY;AAEpC,MAAMC,WAAWF,cAAc,YAAYG,GAAG;AAC9C,MAAMC,UAAUN,KAAKM,OAAO,CAACF;AAE7B,OAAO,MAAMG,UAAU,SAAQ;AAE/B,OAAO,MAAMC,cAAc,YAAW;AAEtC,OAAO,MAAMC,kBAAkB,OAAO,EAAEC,GAAG,EAA2B;IACpE,MAAMC,SAASD,IAAIE,OAAO,CAACD,MAAM;IAEjC,IAAIA,OAAOE,KAAK,CAACC,IAAI,CAACC,kBAAkB,KAAK,OAAO;QAClD,OAAOhB,aAAaiB,IAAI,CAAC;YAAEC,OAAO,CAAC,8BAA8B,CAAC;QAAC,GAAG;YAAEC,QAAQ;QAAI;IACtF;IAEA,IAAI;QACF,MAAM,EAAEC,YAAY,EAAE,GAAG,IAAIC,IAAIV,IAAIL,GAAG;QAExC,MAAMgB,WAAWF,aAAaG,GAAG,CAAC;QAClC,MAAMC,QAAQF,WAAWF,aAAaK,GAAG,CAAC,UAAUC,MAAM,GAAG,OAAO;QACpE,MAAMC,YAAYP,aAAaG,GAAG,CAAC;QACnC,MAAMK,SAASD,YAAYP,aAAaK,GAAG,CAAC,WAAWC,MAAM,GAAG,KAAKG,QAAQ,KAAK,OAAO;QACzF,MAAMC,cAAcV,aAAaG,GAAG,CAAC,iBAAiBH,aAAaK,GAAG,CAAC,iBAAiB;QAExF,MAAMM,wBAAwBlC,yBAAyB;YACrDmC,WAAWrB,IAAIE,OAAO,CAACmB,SAAS;YAChCC,aAAa,CAAC;QAChB;QAEA,MAAMC,aAAaH,sBACjBnB,OAAOE,KAAK,EAAEqB,YAAYC,UAAUC,MACpCC,WACA1C,aACA;QAGF,IAAI2C;QAEJ,IAAI;YACF,kDAAkD;YAClD,qDAAqD;YACrD,+DAA+D;YAC/DA,WAAWzC,GAAG0C,QAAQ,CAACvC,KAAKwC,IAAI,CAAClC,SAAS;QAC5C,EAAE,OAAOmC,GAAG;YACVC,QAAQzB,KAAK,CAAC,CAAC,yCAAyC,EAAEwB,EAAEE,OAAO,CAAC,CAAC,EAAE,iCAAiC;;QAC1G;QAEA,MAAMC,aAAa;QAEnB,OAAO,IAAI9C,4BAEP,KAACK;YACCiC,MAAMH;YACNJ,aAAaA;YACbe,YAAYA;YACZjB,QAAQA;YACRJ,OAAOA;YAGX;YACE,GAAIe,WACA;gBACEO,OAAO;oBACL;wBACEC,MAAM;wBACNC,MAAM,MAAMT;wBACZU,OAAO;wBACPC,QAAQ;oBACV;iBACD;YACH,IACA,CAAC,CAAC;YACNC,QAAQ;YACRC,OAAO;QACT;IAEJ,EAAE,OAAOV,GAAQ;QACfC,QAAQzB,KAAK,CAAC,CAAC,EAAEwB,EAAEE,OAAO,CAAC,CAAC,EAAE,iCAAiC;;QAC/D,OAAO5C,aAAaiB,IAAI,CAAC;YAAEC,OAAO,CAAC,uBAAuB,EAAEwB,EAAEE,OAAO,CAAC,CAAC;QAAC,GAAG;YAAEzB,QAAQ;QAAI;IAC3F;AACF,EAAC"}

package/dist/routes/rest/routeError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"routeError.d.ts","sourceRoot":"","sources":["../../../src/routes/rest/routeError.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG1E,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAKlC,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,OAAO,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AA+D7E,eAAO,MAAM,UAAU,iDAKpB;IACD,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,eAAe,CAAA;IAClD,GAAG,EAAE,QAAQ,CAAA;IACb,GAAG,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;CAC7B,sBA8DA,CAAA"}
+{"version":3,"file":"routeError.d.ts","sourceRoot":"","sources":["../../../src/routes/rest/routeError.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG1E,OAAO,EAAE,QAAQ,EAAqC,MAAM,SAAS,CAAA;AAKrE,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,CAAC,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,OAAO,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AA+D7E,eAAO,MAAM,UAAU,iDAKpB;IACD,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,eAAe,CAAA;IAClD,GAAG,EAAE,QAAQ,CAAA;IACb,GAAG,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;CAC7B,sBA8DA,CAAA"}

package/dist/routes/rest/routeError.js

@@ -1,5 +1,5 @@
 import httpStatus from 'http-status';
-import { APIError } from 'payload';
+import { APIError, APIErrorName, ValidationErrorName } from 'payload';
 import { getPayloadHMR } from '../../utilities/getPayloadHMR.js';
 import { headersWithCors } from '../../utilities/headersWithCors.js';
 const formatErrors = (incoming)=>{
@@ -8,7 +8,7 @@ const formatErrors = (incoming)=>{
         // Instead, get the prototype of the incoming error and check its constructor name
         const proto = Object.getPrototypeOf(incoming);
         // Payload 'ValidationError' and 'APIError'
-        if ((proto.constructor.name === 'ValidationError' || proto.constructor.name === 'APIError') && incoming.data) {
+        if ((proto.constructor.name === ValidationErrorName || proto.constructor.name === APIErrorName) && incoming.data) {
             return {
                 errors: [
                     {
@@ -20,7 +20,7 @@ const formatErrors = (incoming)=>{
             };
         }
         // Mongoose 'ValidationError': https://mongoosejs.com/docs/api/error.html#Error.ValidationError
-        if (proto.constructor.name === 'ValidationError' && 'errors' in incoming && incoming.errors) {
+        if (proto.constructor.name === ValidationErrorName && 'errors' in incoming && incoming.errors) {
             return {
                 errors: Object.keys(incoming.errors).reduce((acc, key)=>{
                     acc.push({

package/dist/routes/rest/routeError.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/routes/rest/routeError.ts"],"sourcesContent":["import type { Collection, PayloadRequest, SanitizedConfig } from 'payload'\n\nimport httpStatus from 'http-status'\nimport { APIError } from 'payload'\n\nimport { getPayloadHMR } from '../../utilities/getPayloadHMR.js'\nimport { headersWithCors } from '../../utilities/headersWithCors.js'\n\nexport type ErrorResponse = { data?: any; errors: unknown[]; stack?: string }\n\nconst formatErrors = (incoming: { [key: string]: unknown } | APIError): ErrorResponse => {\n  if (incoming) {\n    // Cannot use `instanceof` to check error type: https://github.com/microsoft/TypeScript/issues/13965\n    // Instead, get the prototype of the incoming error and check its constructor name\n    const proto = Object.getPrototypeOf(incoming)\n\n    // Payload 'ValidationError' and 'APIError'\n    if (\n      (proto.constructor.name === 'ValidationError' || proto.constructor.name === 'APIError') &&\n      incoming.data\n    ) {\n      return {\n        errors: [\n          {\n            name: incoming.name,\n            data: incoming.data,\n            message: incoming.message,\n          },\n        ],\n      }\n    }\n\n    // Mongoose 'ValidationError': https://mongoosejs.com/docs/api/error.html#Error.ValidationError\n    if (proto.constructor.name === 'ValidationError' && 'errors' in incoming && incoming.errors) {\n      return {\n        errors: Object.keys(incoming.errors).reduce((acc, key) => {\n          acc.push({\n            field: incoming.errors[key].path,\n            message: incoming.errors[key].message,\n          })\n          return acc\n        }, []),\n      }\n    }\n\n    if (Array.isArray(incoming.message)) {\n      return {\n        errors: incoming.message,\n      }\n    }\n\n    if (incoming.name) {\n      return {\n        errors: [\n          {\n            message: incoming.message,\n          },\n        ],\n      }\n    }\n  }\n\n  return {\n    errors: [\n      {\n        message: 'An unknown error occurred.',\n      },\n    ],\n  }\n}\n\nexport const routeError = async ({\n  collection,\n  config: configArg,\n  err,\n  req,\n}: {\n  collection?: Collection\n  config: Promise<SanitizedConfig> | SanitizedConfig\n  err: APIError\n  req: Partial<PayloadRequest>\n}) => {\n  let payload = req?.payload\n\n  if (!payload) {\n    try {\n      payload = await getPayloadHMR({ config: configArg })\n    } catch (e) {\n      return Response.json(\n        {\n          message: 'There was an error initializing Payload',\n        },\n        { status: httpStatus.INTERNAL_SERVER_ERROR },\n      )\n    }\n  }\n\n  req.payload = payload\n  const headers = headersWithCors({\n    headers: new Headers(),\n    req,\n  })\n\n  const { config, logger } = payload\n\n  let response = formatErrors(err)\n\n  let status = err.status || httpStatus.INTERNAL_SERVER_ERROR\n\n  logger.error(err.stack)\n\n  // Internal server errors can contain anything, including potentially sensitive data.\n  // Therefore, error details will be hidden from the response unless `config.debug` is `true`\n  if (!config.debug && status === httpStatus.INTERNAL_SERVER_ERROR) {\n    response = formatErrors(new APIError('Something went wrong.'))\n  }\n\n  if (config.debug && config.debug === true) {\n    response.stack = err.stack\n  }\n\n  if (collection && typeof collection.config.hooks.afterError === 'function') {\n    ;({ response, status } = collection.config.hooks.afterError(\n      err,\n      response,\n      req?.context,\n      collection.config,\n    ) || { response, status })\n  }\n\n  if (typeof config.hooks.afterError === 'function') {\n    ;({ response, status } = config.hooks.afterError(\n      err,\n      response,\n      req?.context,\n      collection?.config,\n    ) || {\n      response,\n      status,\n    })\n  }\n\n  return Response.json(response, { headers, status })\n}\n"],"names":["httpStatus","APIError","getPayloadHMR","headersWithCors","formatErrors","incoming","proto","Object","getPrototypeOf","constructor","name","data","errors","message","keys","reduce","acc","key","push","field","path","Array","isArray","routeError","collection","config","configArg","err","req","payload","e","Response","json","status","INTERNAL_SERVER_ERROR","headers","Headers","logger","response","error","stack","debug","hooks","afterError","context"],"mappings":"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"}
+{"version":3,"sources":["../../../src/routes/rest/routeError.ts"],"sourcesContent":["import type { Collection, PayloadRequest, SanitizedConfig } from 'payload'\n\nimport httpStatus from 'http-status'\nimport { APIError, APIErrorName, ValidationErrorName } from 'payload'\n\nimport { getPayloadHMR } from '../../utilities/getPayloadHMR.js'\nimport { headersWithCors } from '../../utilities/headersWithCors.js'\n\nexport type ErrorResponse = { data?: any; errors: unknown[]; stack?: string }\n\nconst formatErrors = (incoming: { [key: string]: unknown } | APIError): ErrorResponse => {\n  if (incoming) {\n    // Cannot use `instanceof` to check error type: https://github.com/microsoft/TypeScript/issues/13965\n    // Instead, get the prototype of the incoming error and check its constructor name\n    const proto = Object.getPrototypeOf(incoming)\n\n    // Payload 'ValidationError' and 'APIError'\n    if (\n      (proto.constructor.name === ValidationErrorName || proto.constructor.name === APIErrorName) &&\n      incoming.data\n    ) {\n      return {\n        errors: [\n          {\n            name: incoming.name,\n            data: incoming.data,\n            message: incoming.message,\n          },\n        ],\n      }\n    }\n\n    // Mongoose 'ValidationError': https://mongoosejs.com/docs/api/error.html#Error.ValidationError\n    if (proto.constructor.name === ValidationErrorName && 'errors' in incoming && incoming.errors) {\n      return {\n        errors: Object.keys(incoming.errors).reduce((acc, key) => {\n          acc.push({\n            field: incoming.errors[key].path,\n            message: incoming.errors[key].message,\n          })\n          return acc\n        }, []),\n      }\n    }\n\n    if (Array.isArray(incoming.message)) {\n      return {\n        errors: incoming.message,\n      }\n    }\n\n    if (incoming.name) {\n      return {\n        errors: [\n          {\n            message: incoming.message,\n          },\n        ],\n      }\n    }\n  }\n\n  return {\n    errors: [\n      {\n        message: 'An unknown error occurred.',\n      },\n    ],\n  }\n}\n\nexport const routeError = async ({\n  collection,\n  config: configArg,\n  err,\n  req,\n}: {\n  collection?: Collection\n  config: Promise<SanitizedConfig> | SanitizedConfig\n  err: APIError\n  req: Partial<PayloadRequest>\n}) => {\n  let payload = req?.payload\n\n  if (!payload) {\n    try {\n      payload = await getPayloadHMR({ config: configArg })\n    } catch (e) {\n      return Response.json(\n        {\n          message: 'There was an error initializing Payload',\n        },\n        { status: httpStatus.INTERNAL_SERVER_ERROR },\n      )\n    }\n  }\n\n  req.payload = payload\n  const headers = headersWithCors({\n    headers: new Headers(),\n    req,\n  })\n\n  const { config, logger } = payload\n\n  let response = formatErrors(err)\n\n  let status = err.status || httpStatus.INTERNAL_SERVER_ERROR\n\n  logger.error(err.stack)\n\n  // Internal server errors can contain anything, including potentially sensitive data.\n  // Therefore, error details will be hidden from the response unless `config.debug` is `true`\n  if (!config.debug && status === httpStatus.INTERNAL_SERVER_ERROR) {\n    response = formatErrors(new APIError('Something went wrong.'))\n  }\n\n  if (config.debug && config.debug === true) {\n    response.stack = err.stack\n  }\n\n  if (collection && typeof collection.config.hooks.afterError === 'function') {\n    ;({ response, status } = collection.config.hooks.afterError(\n      err,\n      response,\n      req?.context,\n      collection.config,\n    ) || { response, status })\n  }\n\n  if (typeof config.hooks.afterError === 'function') {\n    ;({ response, status } = config.hooks.afterError(\n      err,\n      response,\n      req?.context,\n      collection?.config,\n    ) || {\n      response,\n      status,\n    })\n  }\n\n  return Response.json(response, { headers, status })\n}\n"],"names":["httpStatus","APIError","APIErrorName","ValidationErrorName","getPayloadHMR","headersWithCors","formatErrors","incoming","proto","Object","getPrototypeOf","constructor","name","data","errors","message","keys","reduce","acc","key","push","field","path","Array","isArray","routeError","collection","config","configArg","err","req","payload","e","Response","json","status","INTERNAL_SERVER_ERROR","headers","Headers","logger","response","error","stack","debug","hooks","afterError","context"],"mappings":"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"}

package/dist/scss/app.scss

@@ -1,9 +1,9 @@
-@import './styles.scss';
+@import 'styles';
 @import './toasts.scss';
 @import './colors.scss';
 
 :root {
-  --base-px: 25;
+  --base-px: 20;
   --base-body-size: 13;
   --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
 
@@ -21,6 +21,7 @@
   --theme-baseline-body-size: #{$baseline-body-size};
   --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
     sans-serif;
+  --font-serif: Georgia, 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
   --font-mono: monospace;
 
   --style-radius-s: #{$style-radius-s};
@@ -37,19 +38,19 @@
 
   --gutter-h: #{base(3)};
   --spacing-view-bottom: var(--gutter-h);
-  --app-header-height: calc(var(--base) * 3);
-  --doc-controls-height: calc(var(--base) * 3);
+  --doc-controls-height: calc(var(--base) * 2.8);
+  --app-header-height: calc(var(--base) * 2.8);
   --nav-width: 275px;
   --nav-trans-time: 150ms;
 
   @include mid-break {
     --gutter-h: #{base(2)};
-    --app-header-height: calc(var(--base) * 2);
-    --doc-controls-height: calc(var(--base) * 2.5);
+    --app-header-height: calc(var(--base) * 2.4);
+    --doc-controls-height: calc(var(--base) * 2.4);
   }
 
   @include small-break {
-    --gutter-h: #{base(0.5)};
+    --gutter-h: #{base(0.8)};
     --spacing-view-bottom: calc(var(--base) * 2);
     --nav-width: 100vw;
   }
@@ -67,12 +68,6 @@ html {
   @extend %body;
   background: var(--theme-bg);
   -webkit-font-smoothing: antialiased;
-  opacity: 0;
-
-  &[data-theme='dark'],
-  &[data-theme='light'] {
-    opacity: initial;
-  }
 
   &[data-theme='dark'] {
     --theme-bg: var(--theme-elevation-0);
@@ -111,12 +106,12 @@ body {
 }
 
 ::selection {
-  background: var(--theme-success-500);
+  background: var(--color-success-250);
   color: var(--theme-base-800);
 }
 
 ::-moz-selection {
-  background: var(--theme-success-500);
+  background: var(--color-success-250);
   color: var(--theme-base-800);
 }
 

package/dist/scss/toastify.scss

@@ -0,0 +1,59 @@
+@import 'vars';
+@import 'queries';
+
+.Toastify {
+  .Toastify__toast-container {
+    left: base(5);
+    transform: none;
+    right: base(5);
+    width: auto;
+  }
+
+  .Toastify__toast {
+    padding: base(0.5);
+    border-radius: $style-radius-m;
+    font-weight: 600;
+  }
+
+  .Toastify__close-button {
+    align-self: center;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .Toastify__toast--success {
+    color: var(--color-success-900);
+    background: var(--color-success-500);
+
+    .Toastify__progress-bar {
+      background-color: var(--color-success-900);
+    }
+  }
+
+  .Toastify__close-button--success {
+    color: var(--color-success-900);
+  }
+
+  .Toastify__toast--error {
+    background: var(--theme-error-500);
+    color: #fff;
+
+    .Toastify__progress-bar {
+      background-color: #fff;
+    }
+  }
+
+  .Toastify__close-button--light {
+    color: inherit;
+  }
+
+  @include mid-break {
+    .Toastify__toast-container {
+      left: $baseline;
+      right: $baseline;
+    }
+  }
+}

package/dist/scss/toasts.scss

@@ -1,24 +1,28 @@
+@import './styles.scss';
+
 .payload-toast-container {
+  padding: 0;
+  margin: 0;
+
   .payload-toast-close-button {
+    position: absolute;
+    order: 3;
     left: unset;
-    right: 0.5rem;
-    top: 1.55rem;
-    color: var(--theme-elevation-400);
+    inset-inline-end: base(0.5);
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--theme-elevation-600);
     background: unset;
     border: none;
-    display: flex;
-    width: 1.25rem;
-    height: 1.25rem;
-    justify-content: center;
-    align-items: center;
 
-    &:hover {
-      background: none;
+    svg {
+      width: base(0.75);
+      height: base(0.75);
     }
 
-    svg {
-      width: 2rem;
-      height: 2rem;
+    &:hover {
+      color: var(--theme-elevation-250);
+      background: none;
     }
 
     [dir='RTL'] & {
@@ -27,16 +31,20 @@
     }
   }
 
+  .toast-title {
+    line-height: base(1);
+  }
+
   .payload-toast-item {
-    padding: 1rem 2.5rem 1rem 1rem;
-    color: var(--theme-text);
+    padding: base(0.5);
+    color: var(--theme-elevation-800);
     font-style: normal;
     font-weight: 600;
     display: flex;
     gap: 1rem;
     align-items: center;
     width: 100%;
-    border-radius: 0.15rem;
+    border-radius: 4px;
     border: 1px solid var(--theme-border-color);
     background: var(--theme-input-bg);
     box-shadow:
@@ -45,6 +53,7 @@
 
     .toast-content {
       transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+      width: 100%;
     }
 
     &[data-front='false'] {
@@ -60,51 +69,72 @@
     }
 
     .toast-icon {
-      svg {
-        width: 2.4rem;
-        height: 2.4rem;
+      width: base(1);
+      height: base(1);
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      & > * {
+        width: base(1.2);
+        height: base(1.2);
       }
     }
 
     &.toast-warning {
-      border-color: var(--theme-warning-200);
-      background-color: var(--theme-warning-100);
+      color: var(--theme-warning-800);
+      border-color: var(--theme-warning-150);
+      background-color: var(--theme-warning-50);
+
+      .payload-toast-close-button {
+        color: var(--theme-warning-600);
+
+        &:hover {
+          color: var(--theme-warning-250);
+        }
+      }
     }
 
     &.toast-error {
-      border-color: var(--theme-error-300);
-      background-color: var(--theme-error-150);
+      color: var(--theme-error-800);
+      border-color: var(--theme-error-150);
+      background-color: var(--theme-error-50);
+
+      .payload-toast-close-button {
+        color: var(--theme-error-600);
+
+        &:hover {
+          color: var(--theme-error-250);
+        }
+      }
     }
 
     &.toast-success {
-      border-color: var(--theme-success-200);
-      background-color: var(--theme-success-100);
-    }
+      color: var(--theme-success-800);
+      border-color: var(--theme-success-150);
+      background-color: var(--theme-success-50);
 
-    &.toast-info {
-      border-color: var(--theme-elevation-250);
-      background-color: var(--theme-elevation-100);
-    }
+      .payload-toast-close-button {
+        color: var(--theme-success-600);
 
-    [data-theme='light'] & {
-      &.toast-warning {
-        border-color: var(--theme-warning-550);
-        background-color: var(--theme-warning-100);
+        &:hover {
+          color: var(--theme-success-250);
+        }
       }
+    }
 
-      &.toast-error {
-        border-color: var(--theme-error-200);
-        background-color: var(--theme-error-50);
-      }
+    &.toast-info {
+      color: var(--theme-elevation-800);
+      border-color: var(--theme-elevation-150);
+      background-color: var(--theme-elevation-50);
 
-      &.toast-success {
-        border-color: var(--theme-success-550);
-        background-color: var(--theme-success-50);
-      }
+      .payload-toast-close-button {
+        color: var(--theme-elevation-600);
 
-      &.toast-info {
-        border-color: var(--theme-border-color);
-        background-color: var(--theme-elevation-50);
+        &:hover {
+          color: var(--theme-elevation-250);
+        }
       }
     }
   }

package/dist/scss/type.scss

@@ -15,17 +15,10 @@
   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;
+  font-size: base(1.6);
+  line-height: base(1.8);
 
   @include small-break {
     letter-spacing: -0.5px;
@@ -35,9 +28,8 @@
 
 %h2 {
   margin: 0 0 base(1);
-  font-size: base(1.25);
-  line-height: 1.15;
-  letter-spacing: -0.5px;
+  font-size: base(1.3);
+  line-height: base(1.6);
 
   @include small-break {
     font-size: base(0.85);
@@ -46,9 +38,8 @@
 
 %h3 {
   margin: 0 0 base(1);
-  font-size: base(0.925);
-  line-height: 1.25;
-  letter-spacing: -0.5px;
+  font-size: base(1);
+  line-height: base(1.2);
 
   @include small-break {
     font-size: base(0.65);
@@ -58,27 +49,27 @@
 
 %h4 {
   margin: 0 0 $baseline;
-  font-size: base(0.75);
-  line-height: 1.5;
+  font-size: base(0.8);
+  line-height: base(1);
   letter-spacing: -0.375px;
 }
 
 %h5 {
   margin: 0;
-  font-size: base(0.5625);
-  line-height: 1.5;
+  font-size: base(0.65);
+  line-height: base(0.8);
 }
 
 %h6 {
   margin: 0;
-  font-size: base(0.5);
-  line-height: 1.5;
+  font-size: base(0.6);
+  line-height: base(0.8);
 }
 
 %small {
   margin: 0;
-  font-size: 11px;
-  line-height: 1.5;
+  font-size: 12px;
+  line-height: 20px;
 }
 
 /////////////////////////////
@@ -105,6 +96,7 @@
   font-size: $baseline-body-size;
   line-height: $baseline-px;
   font-weight: normal;
+  font-family: var(--font-body);
 }
 
 %code {

package/dist/scss/vars.scss

@@ -13,7 +13,7 @@ $breakpoint-l-width: 1440px !default;
 // BASELINE GRID
 //////////////////////////////
 
-$baseline-px: 25px !default;
+$baseline-px: 20px !default;
 $baseline-body-size: 13px !default;
 $baseline: math.div($baseline-px, $baseline-body-size) + rem;
 
@@ -40,7 +40,7 @@ $color-purple: #f3ddf3 !default;
 
 $style-radius-s: 3px !default;
 $style-radius-m: 4px !default;
-$style-radius-l: 9px !default;
+$style-radius-l: 8px !default;
 $style-stroke-width: 1px !default;
 
 $style-stroke-width-s: 1px !default;
@@ -50,8 +50,8 @@ $style-stroke-width-m: 2px !default;
 // MISC
 //////////////////////////////
 
-$top-header-offset: calc(var(--base) - 1px);
-$top-header-offset-m: calc(var(--base) * 3);
+$top-header-offset: calc(base(1) - 1px);
+$top-header-offset-m: base(3);
 $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
 
 //////////////////////////////
@@ -59,41 +59,19 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
 //////////////////////////////
 
 @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);
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
 }
 
 @mixin shadow-m {
-  box-shadow:
-    0 0 30px 0 rgb(0 2 4 / 12%),
-    0 30px 25px -8px rgb(0 2 4 / 10%);
+  box-shadow: 0 4px 8px -3px rgba(0, 0, 0, 0.1);
 }
 
 @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);
+  box-shadow: 0 -2px 16px -2px rgba(0, 0, 0, 0.2);
 }
 
 @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);
+  box-shadow: 0 2px 16px -2px rgba(0, 0, 0, 0.2);
 }
 
 @mixin inputShadow {
@@ -101,15 +79,7 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
 
   &: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;
+      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
     }
   }
 }
@@ -147,19 +117,33 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
   @include blur-bg(var(--theme-bg), 0.3);
 }
 
+@mixin readOnly {
+  background: var(--theme-elevation-100);
+  color: var(--theme-elevation-400);
+  box-shadow: none;
+
+  &:hover {
+    border-color: var(--theme-elevation-150);
+    box-shadow: none;
+  }
+}
+
 @mixin formInput() {
   @include inputShadow;
   font-family: var(--font-body);
   width: 100%;
   border: 1px solid var(--theme-elevation-150);
+  border-radius: var(--style-radius-s);
   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);
+  padding: base(0.4) base(0.75);
   -webkit-appearance: none;
+  transition-property: border, box-shadow;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
   &[data-rtl='true'] {
     direction: rtl;
@@ -189,12 +173,7 @@ $focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
   }
 
   &:disabled {
-    background: var(--theme-elevation-200);
-    color: var(--theme-elevation-450);
-
-    &:hover {
-      border-color: var(--theme-elevation-150);
-    }
+    @include readOnly;
   }
 }