@payloadcms/next 3.0.0-canary.7660f90 → 3.0.0-canary.78bbed6

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/colors.scss

@@ -21,85 +21,85 @@
   --color-base-950: rgb(7, 7, 7);
   --color-base-1000: rgb(0, 0, 0);
 
-  --color-success-50: rgb(247, 255, 251);
-  --color-success-100: rgb(240, 255, 247);
-  --color-success-150: rgb(232, 255, 243);
-  --color-success-200: rgb(224, 255, 239);
-  --color-success-250: rgb(217, 255, 235);
-  --color-success-300: rgb(209, 255, 230);
-  --color-success-350: rgb(201, 255, 226);
-  --color-success-400: rgb(193, 255, 222);
-  --color-success-450: rgb(186, 255, 218);
-  --color-success-500: rgb(178, 255, 214);
-  --color-success-550: rgb(160, 230, 193);
-  --color-success-600: rgb(142, 204, 171);
-  --color-success-650: rgb(125, 179, 150);
-  --color-success-700: rgb(107, 153, 128);
-  --color-success-750: rgb(89, 128, 107);
-  --color-success-800: rgb(71, 102, 86);
-  --color-success-850: rgb(53, 77, 64);
-  --color-success-900: rgb(36, 51, 43);
-  --color-success-950: rgb(18, 25, 21);
+  --color-success-50: rgb(237, 245, 249);
+  --color-success-100: rgb(218, 237, 248);
+  --color-success-150: rgb(188, 225, 248);
+  --color-success-200: rgb(156, 216, 253);
+  --color-success-250: rgb(125, 204, 248);
+  --color-success-300: rgb(97, 190, 241);
+  --color-success-350: rgb(65, 178, 236);
+  --color-success-400: rgb(36, 164, 223);
+  --color-success-450: rgb(18, 148, 204);
+  --color-success-500: rgb(21, 135, 186);
+  --color-success-550: rgb(12, 121, 168);
+  --color-success-600: rgb(11, 110, 153);
+  --color-success-650: rgb(11, 97, 135);
+  --color-success-700: rgb(17, 88, 121);
+  --color-success-750: rgb(17, 76, 105);
+  --color-success-800: rgb(18, 66, 90);
+  --color-success-850: rgb(18, 56, 76);
+  --color-success-900: rgb(19, 44, 58);
+  --color-success-950: rgb(22, 33, 39);
 
-  --color-warning-50: rgb(255, 255, 246);
-  --color-warning-100: rgb(255, 255, 237);
-  --color-warning-150: rgb(254, 255, 228);
-  --color-warning-200: rgb(254, 255, 219);
-  --color-warning-250: rgb(254, 255, 210);
-  --color-warning-300: rgb(254, 255, 200);
-  --color-warning-350: rgb(254, 255, 191);
-  --color-warning-400: rgb(253, 255, 182);
-  --color-warning-450: rgb(253, 255, 173);
-  --color-warning-500: rgb(253, 255, 164);
-  --color-warning-550: rgb(228, 230, 148);
-  --color-warning-600: rgb(202, 204, 131);
-  --color-warning-650: rgb(177, 179, 115);
-  --color-warning-700: rgb(152, 153, 98);
-  --color-warning-750: rgb(127, 128, 82);
-  --color-warning-800: rgb(101, 102, 66);
-  --color-warning-850: rgb(76, 77, 49);
-  --color-warning-900: rgb(51, 51, 33);
-  --color-warning-950: rgb(25, 25, 16);
+  --color-error-50: rgb(250, 241, 240);
+  --color-error-100: rgb(252, 229, 227);
+  --color-error-150: rgb(247, 208, 204);
+  --color-error-200: rgb(254, 193, 188);
+  --color-error-250: rgb(253, 177, 170);
+  --color-error-300: rgb(253, 154, 146);
+  --color-error-350: rgb(253, 131, 123);
+  --color-error-400: rgb(246, 109, 103);
+  --color-error-450: rgb(234, 90, 86);
+  --color-error-500: rgb(218, 75, 72);
+  --color-error-550: rgb(200, 62, 61);
+  --color-error-600: rgb(182, 54, 54);
+  --color-error-650: rgb(161, 47, 47);
+  --color-error-700: rgb(144, 44, 43);
+  --color-error-750: rgb(123, 41, 39);
+  --color-error-800: rgb(105, 39, 37);
+  --color-error-850: rgb(86, 36, 33);
+  --color-error-900: rgb(64, 32, 29);
+  --color-error-950: rgb(44, 26, 24);
 
-  --color-error-50: rgb(255, 241, 241);
-  --color-error-100: rgb(255, 226, 228);
-  --color-error-150: rgb(255, 212, 214);
-  --color-error-200: rgb(255, 197, 200);
-  --color-error-250: rgb(255, 183, 187);
-  --color-error-300: rgb(255, 169, 173);
-  --color-error-350: rgb(255, 154, 159);
-  --color-error-400: rgb(255, 140, 145);
-  --color-error-450: rgb(255, 125, 132);
-  --color-error-500: rgb(255, 111, 118);
-  --color-error-550: rgb(230, 100, 106);
-  --color-error-600: rgb(204, 89, 94);
-  --color-error-650: rgb(179, 78, 83);
-  --color-error-700: rgb(153, 67, 71);
-  --color-error-750: rgb(128, 56, 59);
-  --color-error-800: rgb(102, 44, 47);
-  --color-error-850: rgb(77, 33, 35);
-  --color-error-900: rgb(51, 22, 24);
-  --color-error-950: rgb(25, 11, 12);
+  --color-warning-50: rgb(249, 242, 237);
+  --color-warning-100: rgb(248, 232, 219);
+  --color-warning-150: rgb(243, 212, 186);
+  --color-warning-200: rgb(243, 200, 162);
+  --color-warning-250: rgb(240, 185, 136);
+  --color-warning-300: rgb(238, 166, 98);
+  --color-warning-350: rgb(234, 148, 58);
+  --color-warning-400: rgb(223, 132, 17);
+  --color-warning-450: rgb(204, 120, 15);
+  --color-warning-500: rgb(185, 108, 13);
+  --color-warning-550: rgb(167, 97, 10);
+  --color-warning-600: rgb(150, 87, 11);
+  --color-warning-650: rgb(134, 78, 11);
+  --color-warning-700: rgb(120, 70, 13);
+  --color-warning-750: rgb(105, 61, 13);
+  --color-warning-800: rgb(90, 55, 19);
+  --color-warning-850: rgb(73, 47, 21);
+  --color-warning-900: rgb(56, 38, 20);
+  --color-warning-950: rgb(38, 29, 21);
 
-  --color-blue-50: rgb(230, 247, 253);
-  --color-blue-100: rgb(204, 238, 252);
-  --color-blue-150: rgb(179, 230, 250);
-  --color-blue-200: rgb(153, 221, 249);
-  --color-blue-250: rgb(128, 213, 247);
-  --color-blue-300: rgb(102, 204, 245);
-  --color-blue-350: rgb(77, 196, 244);
-  --color-blue-400: rgb(51, 187, 242);
-  --color-blue-450: rgb(25, 179, 241);
-  --color-blue-500: rgb(0, 170, 239);
-  --color-blue-550: rgb(0, 153, 215);
-  --color-blue-600: rgb(0, 136, 191);
-  --color-blue-650: rgb(0, 119, 167);
-  --color-blue-700: rgb(0, 102, 143);
-  --color-blue-750: rgb(0, 85, 120);
-  --color-blue-800: rgb(0, 68, 96);
-  --color-blue-850: rgb(0, 51, 72);
-  --color-blue-900: rgb(0, 34, 48);
-  --color-blue-950: rgb(0, 17, 24);
+  --color-blue-50: rgb(237, 245, 249);
+  --color-blue-100: rgb(218, 237, 248);
+  --color-blue-150: rgb(188, 225, 248);
+  --color-blue-200: rgb(156, 216, 253);
+  --color-blue-250: rgb(125, 204, 248);
+  --color-blue-300: rgb(97, 190, 241);
+  --color-blue-350: rgb(65, 178, 236);
+  --color-blue-400: rgb(36, 164, 223);
+  --color-blue-450: rgb(18, 148, 204);
+  --color-blue-500: rgb(21, 135, 186);
+  --color-blue-550: rgb(12, 121, 168);
+  --color-blue-600: rgb(11, 110, 153);
+  --color-blue-650: rgb(11, 97, 135);
+  --color-blue-700: rgb(17, 88, 121);
+  --color-blue-750: rgb(17, 76, 105);
+  --color-blue-800: rgb(18, 66, 90);
+  --color-blue-850: rgb(18, 56, 76);
+  --color-blue-900: rgb(19, 44, 58);
+  --color-blue-950: rgb(22, 33, 39);
 
   --theme-border-color: var(--theme-elevation-150);
 

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.8);
+    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.8);
+      height: base(0.8);
     }
 
-    svg {
-      width: 2rem;
-      height: 2rem;
+    &:hover {
+      color: var(--theme-elevation-250);
+      background: none;
     }
 
     [dir='RTL'] & {
@@ -27,16 +31,21 @@
     }
   }
 
+  .toast-title {
+    line-height: base(1);
+    margin-right: base(1);
+  }
+
   .payload-toast-item {
-    padding: 1rem 2.5rem 1rem 1rem;
-    color: var(--theme-text);
+    padding: base(0.8);
+    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 +54,7 @@
 
     .toast-content {
       transition: opacity 100ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+      width: 100%;
     }
 
     &[data-front='false'] {
@@ -60,51 +70,72 @@
     }
 
     .toast-icon {
-      svg {
-        width: 2.4rem;
-        height: 2.4rem;
+      width: base(0.8);
+      height: base(0.8);
+      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);
+      color: var(--theme-warning-800);
+      border-color: var(--theme-warning-250);
       background-color: var(--theme-warning-100);
+
+      .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-250);
+      background-color: var(--theme-error-100);
+
+      .payload-toast-close-button {
+        color: var(--theme-error-600);
+
+        &:hover {
+          color: var(--theme-error-250);
+        }
+      }
     }
 
     &.toast-success {
-      border-color: var(--theme-success-200);
+      color: var(--theme-success-800);
+      border-color: var(--theme-success-250);
       background-color: var(--theme-success-100);
+
+      .payload-toast-close-button {
+        color: var(--theme-success-600);
+
+        &:hover {
+          color: var(--theme-success-250);
+        }
+      }
     }
 
     &.toast-info {
+      color: var(--theme-elevation-800);
       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);
-      }
+      .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);
+        }
       }
     }
   }