@payloadcms/next 3.0.0-canary.95fcd13 → 3.0.0-canary.9beaa28

package/dist/routes/rest/buildFormState.js

@@ -16,6 +16,10 @@ export const buildFormState = async ({ req })=>{
             status: httpStatus.OK
         });
     } catch (err) {
+        req.payload.logger.error({
+            err,
+            msg: `There was an error building form state`
+        });
         if (err.message === 'Could not find field schema for given path') {
             return Response.json({
                 message: err.message
@@ -30,10 +34,6 @@ export const buildFormState = async ({ req })=>{
                 status: httpStatus.UNAUTHORIZED
             });
         }
-        req.payload.logger.error({
-            err,
-            msg: `There was an error building form state`
-        });
         return routeError({
             config: req.payload.config,
             err,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/routes/rest/buildFormState.ts"],"sourcesContent":["import type { PayloadRequest } from 'payload'\n\nimport { buildFormState as buildFormStateFn } from '@payloadcms/ui/utilities/buildFormState'\nimport httpStatus from 'http-status'\n\nimport { headersWithCors } from '../../utilities/headersWithCors.js'\nimport { routeError } from './routeError.js'\n\nexport const buildFormState = async ({ req }: { req: PayloadRequest }) => {\n  const headers = headersWithCors({\n    headers: new Headers(),\n    req,\n  })\n\n  try {\n    const result = await buildFormStateFn({ req })\n\n    return Response.json(result, {\n      headers,\n      status: httpStatus.OK,\n    })\n  } catch (err) {\n    if (err.message === 'Could not find field schema for given path') {\n      return Response.json(\n        {\n          message: err.message,\n        },\n        {\n          headers,\n          status: httpStatus.BAD_REQUEST,\n        },\n      )\n    }\n\n    if (err.message === 'Unauthorized') {\n      return Response.json(null, {\n        headers,\n        status: httpStatus.UNAUTHORIZED,\n      })\n    }\n\n    req.payload.logger.error({ err, msg: `There was an error building form state` })\n\n    return routeError({\n      config: req.payload.config,\n      err,\n      req,\n    })\n  }\n}\n"],"names":["buildFormState","buildFormStateFn","httpStatus","headersWithCors","routeError","req","headers","Headers","result","Response","json","status","OK","err","message","BAD_REQUEST","UNAUTHORIZED","payload","logger","error","msg","config"],"mappings":"AAEA,SAASA,kBAAkBC,gBAAgB,QAAQ,0CAAyC;AAC5F,OAAOC,gBAAgB,cAAa;AAEpC,SAASC,eAAe,QAAQ,qCAAoC;AACpE,SAASC,UAAU,QAAQ,kBAAiB;AAE5C,OAAO,MAAMJ,iBAAiB,OAAO,EAAEK,GAAG,EAA2B;IACnE,MAAMC,UAAUH,gBAAgB;QAC9BG,SAAS,IAAIC;QACbF;IACF;IAEA,IAAI;QACF,MAAMG,SAAS,MAAMP,iBAAiB;YAAEI;QAAI;QAE5C,OAAOI,SAASC,IAAI,CAACF,QAAQ;YAC3BF;YACAK,QAAQT,WAAWU,EAAE;QACvB;IACF,EAAE,OAAOC,KAAK;QACZ,IAAIA,IAAIC,OAAO,KAAK,8CAA8C;YAChE,OAAOL,SAASC,IAAI,CAClB;gBACEI,SAASD,IAAIC,OAAO;YACtB,GACA;gBACER;gBACAK,QAAQT,WAAWa,WAAW;YAChC;QAEJ;QAEA,IAAIF,IAAIC,OAAO,KAAK,gBAAgB;YAClC,OAAOL,SAASC,IAAI,CAAC,MAAM;gBACzBJ;gBACAK,QAAQT,WAAWc,YAAY;YACjC;QACF;QAEAX,IAAIY,OAAO,CAACC,MAAM,CAACC,KAAK,CAAC;YAAEN;YAAKO,KAAK,CAAC,sCAAsC,CAAC;QAAC;QAE9E,OAAOhB,WAAW;YAChBiB,QAAQhB,IAAIY,OAAO,CAACI,MAAM;YAC1BR;YACAR;QACF;IACF;AACF,EAAC"}
+{"version":3,"sources":["../../../src/routes/rest/buildFormState.ts"],"sourcesContent":["import type { PayloadRequest } from 'payload'\n\nimport { buildFormState as buildFormStateFn } from '@payloadcms/ui/utilities/buildFormState'\nimport httpStatus from 'http-status'\n\nimport { headersWithCors } from '../../utilities/headersWithCors.js'\nimport { routeError } from './routeError.js'\n\nexport const buildFormState = async ({ req }: { req: PayloadRequest }) => {\n  const headers = headersWithCors({\n    headers: new Headers(),\n    req,\n  })\n\n  try {\n    const result = await buildFormStateFn({ req })\n\n    return Response.json(result, {\n      headers,\n      status: httpStatus.OK,\n    })\n  } catch (err) {\n    req.payload.logger.error({ err, msg: `There was an error building form state` })\n\n    if (err.message === 'Could not find field schema for given path') {\n      return Response.json(\n        {\n          message: err.message,\n        },\n        {\n          headers,\n          status: httpStatus.BAD_REQUEST,\n        },\n      )\n    }\n\n    if (err.message === 'Unauthorized') {\n      return Response.json(null, {\n        headers,\n        status: httpStatus.UNAUTHORIZED,\n      })\n    }\n\n    return routeError({\n      config: req.payload.config,\n      err,\n      req,\n    })\n  }\n}\n"],"names":["buildFormState","buildFormStateFn","httpStatus","headersWithCors","routeError","req","headers","Headers","result","Response","json","status","OK","err","payload","logger","error","msg","message","BAD_REQUEST","UNAUTHORIZED","config"],"mappings":"AAEA,SAASA,kBAAkBC,gBAAgB,QAAQ,0CAAyC;AAC5F,OAAOC,gBAAgB,cAAa;AAEpC,SAASC,eAAe,QAAQ,qCAAoC;AACpE,SAASC,UAAU,QAAQ,kBAAiB;AAE5C,OAAO,MAAMJ,iBAAiB,OAAO,EAAEK,GAAG,EAA2B;IACnE,MAAMC,UAAUH,gBAAgB;QAC9BG,SAAS,IAAIC;QACbF;IACF;IAEA,IAAI;QACF,MAAMG,SAAS,MAAMP,iBAAiB;YAAEI;QAAI;QAE5C,OAAOI,SAASC,IAAI,CAACF,QAAQ;YAC3BF;YACAK,QAAQT,WAAWU,EAAE;QACvB;IACF,EAAE,OAAOC,KAAK;QACZR,IAAIS,OAAO,CAACC,MAAM,CAACC,KAAK,CAAC;YAAEH;YAAKI,KAAK,CAAC,sCAAsC,CAAC;QAAC;QAE9E,IAAIJ,IAAIK,OAAO,KAAK,8CAA8C;YAChE,OAAOT,SAASC,IAAI,CAClB;gBACEQ,SAASL,IAAIK,OAAO;YACtB,GACA;gBACEZ;gBACAK,QAAQT,WAAWiB,WAAW;YAChC;QAEJ;QAEA,IAAIN,IAAIK,OAAO,KAAK,gBAAgB;YAClC,OAAOT,SAASC,IAAI,CAAC,MAAM;gBACzBJ;gBACAK,QAAQT,WAAWkB,YAAY;YACjC;QACF;QAEA,OAAOhB,WAAW;YAChBiB,QAAQhB,IAAIS,OAAO,CAACO,MAAM;YAC1BR;YACAR;QACF;IACF;AACF,EAAC"}

package/dist/routes/rest/og/image.d.ts

@@ -1,6 +1,7 @@
+import type { MappedComponent } from 'payload';
 import React from 'react';
 export declare const OGImage: React.FC<{
-    Icon: React.ComponentType<any>;
+    Icon: MappedComponent;
     description?: string;
     fontFamily?: string;
     leader?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../src/routes/rest/og/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAC7B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAgFA,CAAA"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../src/routes/rest/og/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAC7B,IAAI,EAAE,eAAe,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAqFA,CAAA"}

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RenderComponent } from '@payloadcms/ui/shared';
 import React from 'react';
 export const OGImage = ({ Icon, description, fontFamily = 'Arial, sans-serif', leader, title })=>{
     return /*#__PURE__*/ _jsxs("div", {
@@ -68,8 +69,11 @@ export const OGImage = ({ Icon, description, fontFamily = 'Arial, sans-serif', l
                     justifyContent: 'center',
                     width: '38px'
                 },
-                children: /*#__PURE__*/ _jsx(Icon, {
-                    fill: "white"
+                children: /*#__PURE__*/ _jsx(RenderComponent, {
+                    clientProps: {
+                        fill: 'white'
+                    },
+                    mappedComponent: Icon
                 })
             })
         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/routes/rest/og/image.tsx"],"sourcesContent":["import React from 'react'\n\nexport const OGImage: React.FC<{\n  Icon: React.ComponentType<any>\n  description?: string\n  fontFamily?: string\n  leader?: string\n  title?: string\n}> = ({ Icon, description, fontFamily = 'Arial, sans-serif', leader, title }) => {\n  return (\n    <div\n      style={{\n        backgroundColor: '#000',\n        color: '#fff',\n        display: 'flex',\n        flexDirection: 'column',\n        fontFamily,\n        height: '100%',\n        justifyContent: 'space-between',\n        padding: '100px',\n        width: '100%',\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          flexGrow: 1,\n          fontSize: 50,\n          height: '100%',\n        }}\n      >\n        {leader && (\n          <div\n            style={{\n              fontSize: 30,\n              marginBottom: 10,\n            }}\n          >\n            {leader}\n          </div>\n        )}\n        <p\n          style={{\n            WebkitBoxOrient: 'vertical',\n            WebkitLineClamp: 2,\n            display: '-webkit-box',\n            fontSize: 90,\n            lineHeight: 1,\n            marginBottom: 0,\n            marginTop: 0,\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {title}\n        </p>\n        {description && (\n          <p\n            style={{\n              WebkitBoxOrient: 'vertical',\n              WebkitLineClamp: 2,\n              display: '-webkit-box',\n              flexGrow: 1,\n              fontSize: 30,\n              lineHeight: 1,\n              marginBottom: 0,\n              marginTop: 40,\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {description}\n          </p>\n        )}\n      </div>\n      <div\n        style={{\n          alignItems: 'flex-end',\n          display: 'flex',\n          flexShrink: 0,\n          height: '38px',\n          justifyContent: 'center',\n          width: '38px',\n        }}\n      >\n        <Icon fill=\"white\" />\n      </div>\n    </div>\n  )\n}\n"],"names":["React","OGImage","Icon","description","fontFamily","leader","title","div","style","backgroundColor","color","display","flexDirection","height","justifyContent","padding","width","flexGrow","fontSize","marginBottom","p","WebkitBoxOrient","WebkitLineClamp","lineHeight","marginTop","textOverflow","alignItems","flexShrink","fill"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,OAAO,MAAMC,UAMR,CAAC,EAAEC,IAAI,EAAEC,WAAW,EAAEC,aAAa,mBAAmB,EAAEC,MAAM,EAAEC,KAAK,EAAE;IAC1E,qBACE,MAACC;QACCC,OAAO;YACLC,iBAAiB;YACjBC,OAAO;YACPC,SAAS;YACTC,eAAe;YACfR;YACAS,QAAQ;YACRC,gBAAgB;YAChBC,SAAS;YACTC,OAAO;QACT;;0BAEA,MAACT;gBACCC,OAAO;oBACLG,SAAS;oBACTC,eAAe;oBACfK,UAAU;oBACVC,UAAU;oBACVL,QAAQ;gBACV;;oBAECR,wBACC,KAACE;wBACCC,OAAO;4BACLU,UAAU;4BACVC,cAAc;wBAChB;kCAECd;;kCAGL,KAACe;wBACCZ,OAAO;4BACLa,iBAAiB;4BACjBC,iBAAiB;4BACjBX,SAAS;4BACTO,UAAU;4BACVK,YAAY;4BACZJ,cAAc;4BACdK,WAAW;4BACXC,cAAc;wBAChB;kCAECnB;;oBAEFH,6BACC,KAACiB;wBACCZ,OAAO;4BACLa,iBAAiB;4BACjBC,iBAAiB;4BACjBX,SAAS;4BACTM,UAAU;4BACVC,UAAU;4BACVK,YAAY;4BACZJ,cAAc;4BACdK,WAAW;4BACXC,cAAc;wBAChB;kCAECtB;;;;0BAIP,KAACI;gBACCC,OAAO;oBACLkB,YAAY;oBACZf,SAAS;oBACTgB,YAAY;oBACZd,QAAQ;oBACRC,gBAAgB;oBAChBE,OAAO;gBACT;0BAEA,cAAA,KAACd;oBAAK0B,MAAK;;;;;AAInB,EAAC"}
+{"version":3,"sources":["../../../../src/routes/rest/og/image.tsx"],"sourcesContent":["import type { MappedComponent } from 'payload'\n\nimport { RenderComponent } from '@payloadcms/ui/shared'\nimport React from 'react'\n\nexport const OGImage: React.FC<{\n  Icon: MappedComponent\n  description?: string\n  fontFamily?: string\n  leader?: string\n  title?: string\n}> = ({ Icon, description, fontFamily = 'Arial, sans-serif', leader, title }) => {\n  return (\n    <div\n      style={{\n        backgroundColor: '#000',\n        color: '#fff',\n        display: 'flex',\n        flexDirection: 'column',\n        fontFamily,\n        height: '100%',\n        justifyContent: 'space-between',\n        padding: '100px',\n        width: '100%',\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          flexGrow: 1,\n          fontSize: 50,\n          height: '100%',\n        }}\n      >\n        {leader && (\n          <div\n            style={{\n              fontSize: 30,\n              marginBottom: 10,\n            }}\n          >\n            {leader}\n          </div>\n        )}\n        <p\n          style={{\n            WebkitBoxOrient: 'vertical',\n            WebkitLineClamp: 2,\n            display: '-webkit-box',\n            fontSize: 90,\n            lineHeight: 1,\n            marginBottom: 0,\n            marginTop: 0,\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {title}\n        </p>\n        {description && (\n          <p\n            style={{\n              WebkitBoxOrient: 'vertical',\n              WebkitLineClamp: 2,\n              display: '-webkit-box',\n              flexGrow: 1,\n              fontSize: 30,\n              lineHeight: 1,\n              marginBottom: 0,\n              marginTop: 40,\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {description}\n          </p>\n        )}\n      </div>\n      <div\n        style={{\n          alignItems: 'flex-end',\n          display: 'flex',\n          flexShrink: 0,\n          height: '38px',\n          justifyContent: 'center',\n          width: '38px',\n        }}\n      >\n        <RenderComponent\n          clientProps={{\n            fill: 'white',\n          }}\n          mappedComponent={Icon}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":["RenderComponent","React","OGImage","Icon","description","fontFamily","leader","title","div","style","backgroundColor","color","display","flexDirection","height","justifyContent","padding","width","flexGrow","fontSize","marginBottom","p","WebkitBoxOrient","WebkitLineClamp","lineHeight","marginTop","textOverflow","alignItems","flexShrink","clientProps","fill","mappedComponent"],"mappings":";AAEA,SAASA,eAAe,QAAQ,wBAAuB;AACvD,OAAOC,WAAW,QAAO;AAEzB,OAAO,MAAMC,UAMR,CAAC,EAAEC,IAAI,EAAEC,WAAW,EAAEC,aAAa,mBAAmB,EAAEC,MAAM,EAAEC,KAAK,EAAE;IAC1E,qBACE,MAACC;QACCC,OAAO;YACLC,iBAAiB;YACjBC,OAAO;YACPC,SAAS;YACTC,eAAe;YACfR;YACAS,QAAQ;YACRC,gBAAgB;YAChBC,SAAS;YACTC,OAAO;QACT;;0BAEA,MAACT;gBACCC,OAAO;oBACLG,SAAS;oBACTC,eAAe;oBACfK,UAAU;oBACVC,UAAU;oBACVL,QAAQ;gBACV;;oBAECR,wBACC,KAACE;wBACCC,OAAO;4BACLU,UAAU;4BACVC,cAAc;wBAChB;kCAECd;;kCAGL,KAACe;wBACCZ,OAAO;4BACLa,iBAAiB;4BACjBC,iBAAiB;4BACjBX,SAAS;4BACTO,UAAU;4BACVK,YAAY;4BACZJ,cAAc;4BACdK,WAAW;4BACXC,cAAc;wBAChB;kCAECnB;;oBAEFH,6BACC,KAACiB;wBACCZ,OAAO;4BACLa,iBAAiB;4BACjBC,iBAAiB;4BACjBX,SAAS;4BACTM,UAAU;4BACVC,UAAU;4BACVK,YAAY;4BACZJ,cAAc;4BACdK,WAAW;4BACXC,cAAc;wBAChB;kCAECtB;;;;0BAIP,KAACI;gBACCC,OAAO;oBACLkB,YAAY;oBACZf,SAAS;oBACTgB,YAAY;oBACZd,QAAQ;oBACRC,gBAAgB;oBAChBE,OAAO;gBACT;0BAEA,cAAA,KAACjB;oBACC6B,aAAa;wBACXC,MAAM;oBACR;oBACAC,iBAAiB5B;;;;;AAK3B,EAAC"}

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

@@ -38,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;
   }

package/dist/scss/toasts.scss

@@ -8,7 +8,7 @@
     position: absolute;
     order: 3;
     left: unset;
-    inset-inline-end: base(0.5);
+    inset-inline-end: base(0.8);
     top: 50%;
     transform: translateY(-50%);
     color: var(--theme-elevation-600);
@@ -16,8 +16,8 @@
     border: none;
 
     svg {
-      width: base(0.75);
-      height: base(0.75);
+      width: base(0.8);
+      height: base(0.8);
     }
 
     &:hover {
@@ -33,10 +33,11 @@
 
   .toast-title {
     line-height: base(1);
+    margin-right: base(1);
   }
 
   .payload-toast-item {
-    padding: base(0.5);
+    padding: base(0.8);
     color: var(--theme-elevation-800);
     font-style: normal;
     font-weight: 600;
@@ -69,8 +70,8 @@
     }
 
     .toast-icon {
-      width: base(1);
-      height: base(1);
+      width: base(0.8);
+      height: base(0.8);
       margin: 0;
       display: flex;
       align-items: center;
@@ -84,8 +85,8 @@
 
     &.toast-warning {
       color: var(--theme-warning-800);
-      border-color: var(--theme-warning-150);
-      background-color: var(--theme-warning-50);
+      border-color: var(--theme-warning-250);
+      background-color: var(--theme-warning-100);
 
       .payload-toast-close-button {
         color: var(--theme-warning-600);
@@ -98,8 +99,8 @@
 
     &.toast-error {
       color: var(--theme-error-800);
-      border-color: var(--theme-error-150);
-      background-color: var(--theme-error-50);
+      border-color: var(--theme-error-250);
+      background-color: var(--theme-error-100);
 
       .payload-toast-close-button {
         color: var(--theme-error-600);
@@ -112,8 +113,8 @@
 
     &.toast-success {
       color: var(--theme-success-800);
-      border-color: var(--theme-success-150);
-      background-color: var(--theme-success-50);
+      border-color: var(--theme-success-250);
+      background-color: var(--theme-success-100);
 
       .payload-toast-close-button {
         color: var(--theme-success-600);
@@ -126,8 +127,8 @@
 
     &.toast-info {
       color: var(--theme-elevation-800);
-      border-color: var(--theme-elevation-150);
-      background-color: var(--theme-elevation-50);
+      border-color: var(--theme-elevation-250);
+      background-color: var(--theme-elevation-100);
 
       .payload-toast-close-button {
         color: var(--theme-elevation-600);

package/dist/scss/type.scss

@@ -96,6 +96,7 @@
   font-size: $baseline-body-size;
   line-height: $baseline-px;
   font-weight: normal;
+  font-family: var(--font-body);
 }
 
 %code {

package/dist/templates/Default/Wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/templates/Default/Wrapper/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAaA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/templates/Default/Wrapper/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAmBA,CAAA"}

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

@@ -4,12 +4,14 @@ import { useNav } from '@payloadcms/ui';
 import React from 'react';
 export const Wrapper = (props)=>{
     const { baseClass, children, className } = props;
-    const { navOpen } = useNav();
+    const { hydrated, navOpen, shouldAnimate } = useNav();
     return /*#__PURE__*/ _jsx("div", {
         className: [
             baseClass,
             className,
-            navOpen && `${baseClass}--nav-open`
+            navOpen && `${baseClass}--nav-open`,
+            shouldAnimate && `${baseClass}--nav-animate`,
+            hydrated && `${baseClass}--nav-hydrated`
         ].filter(Boolean).join(' '),
         children: children
     });

package/dist/templates/Default/Wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/templates/Default/Wrapper/index.tsx"],"sourcesContent":["'use client'\nimport { useNav } from '@payloadcms/ui'\nimport React from 'react'\n\nimport './index.scss'\n\nexport const Wrapper: React.FC<{\n  baseClass?: string\n  children?: React.ReactNode\n  className?: string\n}> = (props) => {\n  const { baseClass, children, className } = props\n  const { navOpen } = useNav()\n\n  return (\n    <div\n      className={[baseClass, className, navOpen && `${baseClass}--nav-open`]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["useNav","React","Wrapper","props","baseClass","children","className","navOpen","div","filter","Boolean","join"],"mappings":"AAAA;;AACA,SAASA,MAAM,QAAQ,iBAAgB;AACvC,OAAOC,WAAW,QAAO;AAIzB,OAAO,MAAMC,UAIR,CAACC;IACJ,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGH;IAC3C,MAAM,EAAEI,OAAO,EAAE,GAAGP;IAEpB,qBACE,KAACQ;QACCF,WAAW;YAACF;YAAWE;YAAWC,WAAW,CAAC,EAAEH,UAAU,UAAU,CAAC;SAAC,CACnEK,MAAM,CAACC,SACPC,IAAI,CAAC;kBAEPN;;AAGP,EAAC"}
+{"version":3,"sources":["../../../../src/templates/Default/Wrapper/index.tsx"],"sourcesContent":["'use client'\nimport { useNav } from '@payloadcms/ui'\nimport React from 'react'\n\nimport './index.scss'\n\nexport const Wrapper: React.FC<{\n  baseClass?: string\n  children?: React.ReactNode\n  className?: string\n}> = (props) => {\n  const { baseClass, children, className } = props\n  const { hydrated, navOpen, shouldAnimate } = useNav()\n\n  return (\n    <div\n      className={[\n        baseClass,\n        className,\n        navOpen && `${baseClass}--nav-open`,\n        shouldAnimate && `${baseClass}--nav-animate`,\n        hydrated && `${baseClass}--nav-hydrated`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["useNav","React","Wrapper","props","baseClass","children","className","hydrated","navOpen","shouldAnimate","div","filter","Boolean","join"],"mappings":"AAAA;;AACA,SAASA,MAAM,QAAQ,iBAAgB;AACvC,OAAOC,WAAW,QAAO;AAIzB,OAAO,MAAMC,UAIR,CAACC;IACJ,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGH;IAC3C,MAAM,EAAEI,QAAQ,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGT;IAE7C,qBACE,KAACU;QACCJ,WAAW;YACTF;YACAE;YACAE,WAAW,CAAC,EAAEJ,UAAU,UAAU,CAAC;YACnCK,iBAAiB,CAAC,EAAEL,UAAU,aAAa,CAAC;YAC5CG,YAAY,CAAC,EAAEH,UAAU,cAAc,CAAC;SACzC,CACEO,MAAM,CAACC,SACPC,IAAI,CAAC;kBAEPR;;AAGP,EAAC"}

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

@@ -4,17 +4,17 @@
   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-animate {
+    transition: grid-template-columns var(--nav-trans-time) linear;
+  }
+
   &--nav-open {
-    width: 100%;
-    grid-template-columns: var(--nav-width) auto;
 
     .template-default {
       &__nav-overlay {
@@ -23,3 +23,35 @@
     }
   }
 }
+
+@media (min-width: 1441px) {
+  .template-default {
+    grid-template-columns: 0 auto;
+
+    &--nav-open {
+      grid-template-columns: var(--nav-width) auto;
+    }
+  }
+}
+
+@media (max-width: 1440px) {
+  .template-default--nav-hydrated.template-default--nav-open {
+    grid-template-columns: var(--nav-width) auto;
+  }
+
+  .template-default {
+    grid-template-columns: 1fr auto;
+
+    .nav {
+      display: none;
+    }
+
+    &--nav-hydrated {
+      grid-template-columns: 0 auto;
+
+      .nav {
+        display: unset;
+      }
+    }
+  }
+}

package/dist/templates/Default/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/Default/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAI3D,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,eAAe,CAAA;CACjC,GAAG,WAAW,CAAA;AAEf,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6D1D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/Default/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAmB,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAI5E,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,eAAe,CAAA;CACjC,GAAG,WAAW,CAAA;AAEf,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2D1D,CAAA"}

package/dist/templates/Default/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AppHeader, EntityVisibilityProvider, NavToggler } from '@payloadcms/ui';
-import { RenderCustomComponent } from '@payloadcms/ui/shared';
+import { RenderComponent, getCreateMappedComponent } from '@payloadcms/ui/shared';
 import React from 'react';
 import { DefaultNav } from '../../elements/Nav/index.js';
 import { NavHamburger } from './NavHamburger/index.js';
@@ -10,15 +10,19 @@ export const DefaultTemplate = ({ children, className, i18n, locale, params, pay
     const { admin: { components: { Nav: CustomNav } = {
         Nav: undefined
     } } = {} } = payload.config || {};
-    const navProps = {
-        i18n,
-        locale,
-        params,
-        payload,
-        permissions,
-        searchParams,
-        user
-    };
+    const createMappedComponent = getCreateMappedComponent({
+        importMap: payload.importMap,
+        serverProps: {
+            i18n,
+            locale,
+            params,
+            payload,
+            permissions,
+            searchParams,
+            user
+        }
+    });
+    const MappedDefaultNav = createMappedComponent(CustomNav, undefined, DefaultNav, 'CustomNav');
     return /*#__PURE__*/ _jsx(EntityVisibilityProvider, {
         visibleEntities: visibleEntities,
         children: /*#__PURE__*/ _jsxs("div", {
@@ -35,19 +39,8 @@ export const DefaultTemplate = ({ children, className, i18n, locale, params, pay
                     baseClass: baseClass,
                     className: className,
                     children: [
-                        /*#__PURE__*/ _jsx(RenderCustomComponent, {
-                            CustomComponent: CustomNav,
-                            DefaultComponent: DefaultNav,
-                            componentProps: navProps,
-                            serverOnlyProps: {
-                                i18n,
-                                locale,
-                                params,
-                                payload,
-                                permissions,
-                                searchParams,
-                                user
-                            }
+                        /*#__PURE__*/ _jsx(RenderComponent, {
+                            mappedComponent: MappedDefaultNav
                         }),
                         /*#__PURE__*/ _jsxs("div", {
                             className: `${baseClass}__wrap`,

package/dist/templates/Default/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/templates/Default/index.tsx"],"sourcesContent":["import type { ServerProps, VisibleEntities } from 'payload'\n\nimport { AppHeader, EntityVisibilityProvider, NavToggler } from '@payloadcms/ui'\nimport { RenderCustomComponent } from '@payloadcms/ui/shared'\nimport React from 'react'\n\nimport { DefaultNav, type NavProps } from '../../elements/Nav/index.js'\nimport { NavHamburger } from './NavHamburger/index.js'\nimport { Wrapper } from './Wrapper/index.js'\nimport './index.scss'\n\nconst baseClass = 'template-default'\n\nexport type DefaultTemplateProps = {\n  children?: React.ReactNode\n  className?: string\n  visibleEntities: VisibleEntities\n} & ServerProps\n\nexport const DefaultTemplate: React.FC<DefaultTemplateProps> = ({\n  children,\n  className,\n  i18n,\n  locale,\n  params,\n  payload,\n  permissions,\n  searchParams,\n  user,\n  visibleEntities,\n}) => {\n  const {\n    admin: {\n      components: { Nav: CustomNav } = {\n        Nav: undefined,\n      },\n    } = {},\n  } = payload.config || {}\n\n  const navProps: NavProps = {\n    i18n,\n    locale,\n    params,\n    payload,\n    permissions,\n    searchParams,\n    user,\n  }\n\n  return (\n    <EntityVisibilityProvider visibleEntities={visibleEntities}>\n      <div>\n        <div className={`${baseClass}__nav-toggler-wrapper`} id=\"nav-toggler\">\n          <NavToggler className={`${baseClass}__nav-toggler`}>\n            <NavHamburger />\n          </NavToggler>\n        </div>\n        <Wrapper baseClass={baseClass} className={className}>\n          <RenderCustomComponent\n            CustomComponent={CustomNav}\n            DefaultComponent={DefaultNav}\n            componentProps={navProps}\n            serverOnlyProps={{\n              i18n,\n              locale,\n              params,\n              payload,\n              permissions,\n              searchParams,\n              user,\n            }}\n          />\n          <div className={`${baseClass}__wrap`}>\n            <AppHeader />\n            {children}\n          </div>\n        </Wrapper>\n      </div>\n    </EntityVisibilityProvider>\n  )\n}\n"],"names":["AppHeader","EntityVisibilityProvider","NavToggler","RenderCustomComponent","React","DefaultNav","NavHamburger","Wrapper","baseClass","DefaultTemplate","children","className","i18n","locale","params","payload","permissions","searchParams","user","visibleEntities","admin","components","Nav","CustomNav","undefined","config","navProps","div","id","CustomComponent","DefaultComponent","componentProps","serverOnlyProps"],"mappings":";AAEA,SAASA,SAAS,EAAEC,wBAAwB,EAAEC,UAAU,QAAQ,iBAAgB;AAChF,SAASC,qBAAqB,QAAQ,wBAAuB;AAC7D,OAAOC,WAAW,QAAO;AAEzB,SAASC,UAAU,QAAuB,8BAA6B;AACvE,SAASC,YAAY,QAAQ,0BAAyB;AACtD,SAASC,OAAO,QAAQ,qBAAoB;AAG5C,MAAMC,YAAY;AAQlB,OAAO,MAAMC,kBAAkD,CAAC,EAC9DC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,IAAI,EACJC,eAAe,EAChB;IACC,MAAM,EACJC,OAAO,EACLC,YAAY,EAAEC,KAAKC,SAAS,EAAE,GAAG;QAC/BD,KAAKE;IACP,CAAC,EACF,GAAG,CAAC,CAAC,EACP,GAAGT,QAAQU,MAAM,IAAI,CAAC;IAEvB,MAAMC,WAAqB;QACzBd;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,KAACjB;QAAyBkB,iBAAiBA;kBACzC,cAAA,MAACQ;;8BACC,KAACA;oBAAIhB,WAAW,CAAC,EAAEH,UAAU,qBAAqB,CAAC;oBAAEoB,IAAG;8BACtD,cAAA,KAAC1B;wBAAWS,WAAW,CAAC,EAAEH,UAAU,aAAa,CAAC;kCAChD,cAAA,KAACF;;;8BAGL,MAACC;oBAAQC,WAAWA;oBAAWG,WAAWA;;sCACxC,KAACR;4BACC0B,iBAAiBN;4BACjBO,kBAAkBzB;4BAClB0B,gBAAgBL;4BAChBM,iBAAiB;gCACfpB;gCACAC;gCACAC;gCACAC;gCACAC;gCACAC;gCACAC;4BACF;;sCAEF,MAACS;4BAAIhB,WAAW,CAAC,EAAEH,UAAU,MAAM,CAAC;;8CAClC,KAACR;gCACAU;;;;;;;;AAMb,EAAC"}
+{"version":3,"sources":["../../../src/templates/Default/index.tsx"],"sourcesContent":["import type { MappedComponent, ServerProps, VisibleEntities } from 'payload'\n\nimport { AppHeader, EntityVisibilityProvider, NavToggler } from '@payloadcms/ui'\nimport { RenderComponent, getCreateMappedComponent } from '@payloadcms/ui/shared'\nimport React from 'react'\n\nimport { DefaultNav } from '../../elements/Nav/index.js'\nimport { NavHamburger } from './NavHamburger/index.js'\nimport { Wrapper } from './Wrapper/index.js'\nimport './index.scss'\n\nconst baseClass = 'template-default'\n\nexport type DefaultTemplateProps = {\n  children?: React.ReactNode\n  className?: string\n  visibleEntities: VisibleEntities\n} & ServerProps\n\nexport const DefaultTemplate: React.FC<DefaultTemplateProps> = ({\n  children,\n  className,\n  i18n,\n  locale,\n  params,\n  payload,\n  permissions,\n  searchParams,\n  user,\n  visibleEntities,\n}) => {\n  const {\n    admin: {\n      components: { Nav: CustomNav } = {\n        Nav: undefined,\n      },\n    } = {},\n  } = payload.config || {}\n\n  const createMappedComponent = getCreateMappedComponent({\n    importMap: payload.importMap,\n    serverProps: {\n      i18n,\n      locale,\n      params,\n      payload,\n      permissions,\n      searchParams,\n      user,\n    },\n  })\n\n  const MappedDefaultNav: MappedComponent = createMappedComponent(\n    CustomNav,\n    undefined,\n    DefaultNav,\n    'CustomNav',\n  )\n\n  return (\n    <EntityVisibilityProvider visibleEntities={visibleEntities}>\n      <div>\n        <div className={`${baseClass}__nav-toggler-wrapper`} id=\"nav-toggler\">\n          <NavToggler className={`${baseClass}__nav-toggler`}>\n            <NavHamburger />\n          </NavToggler>\n        </div>\n        <Wrapper baseClass={baseClass} className={className}>\n          <RenderComponent mappedComponent={MappedDefaultNav} />\n\n          <div className={`${baseClass}__wrap`}>\n            <AppHeader />\n            {children}\n          </div>\n        </Wrapper>\n      </div>\n    </EntityVisibilityProvider>\n  )\n}\n"],"names":["AppHeader","EntityVisibilityProvider","NavToggler","RenderComponent","getCreateMappedComponent","React","DefaultNav","NavHamburger","Wrapper","baseClass","DefaultTemplate","children","className","i18n","locale","params","payload","permissions","searchParams","user","visibleEntities","admin","components","Nav","CustomNav","undefined","config","createMappedComponent","importMap","serverProps","MappedDefaultNav","div","id","mappedComponent"],"mappings":";AAEA,SAASA,SAAS,EAAEC,wBAAwB,EAAEC,UAAU,QAAQ,iBAAgB;AAChF,SAASC,eAAe,EAAEC,wBAAwB,QAAQ,wBAAuB;AACjF,OAAOC,WAAW,QAAO;AAEzB,SAASC,UAAU,QAAQ,8BAA6B;AACxD,SAASC,YAAY,QAAQ,0BAAyB;AACtD,SAASC,OAAO,QAAQ,qBAAoB;AAG5C,MAAMC,YAAY;AAQlB,OAAO,MAAMC,kBAAkD,CAAC,EAC9DC,QAAQ,EACRC,SAAS,EACTC,IAAI,EACJC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,WAAW,EACXC,YAAY,EACZC,IAAI,EACJC,eAAe,EAChB;IACC,MAAM,EACJC,OAAO,EACLC,YAAY,EAAEC,KAAKC,SAAS,EAAE,GAAG;QAC/BD,KAAKE;IACP,CAAC,EACF,GAAG,CAAC,CAAC,EACP,GAAGT,QAAQU,MAAM,IAAI,CAAC;IAEvB,MAAMC,wBAAwBvB,yBAAyB;QACrDwB,WAAWZ,QAAQY,SAAS;QAC5BC,aAAa;YACXhB;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;IACF;IAEA,MAAMW,mBAAoCH,sBACxCH,WACAC,WACAnB,YACA;IAGF,qBACE,KAACL;QAAyBmB,iBAAiBA;kBACzC,cAAA,MAACW;;8BACC,KAACA;oBAAInB,WAAW,CAAC,EAAEH,UAAU,qBAAqB,CAAC;oBAAEuB,IAAG;8BACtD,cAAA,KAAC9B;wBAAWU,WAAW,CAAC,EAAEH,UAAU,aAAa,CAAC;kCAChD,cAAA,KAACF;;;8BAGL,MAACC;oBAAQC,WAAWA;oBAAWG,WAAWA;;sCACxC,KAACT;4BAAgB8B,iBAAiBH;;sCAElC,MAACC;4BAAInB,WAAW,CAAC,EAAEH,UAAU,MAAM,CAAC;;8CAClC,KAACT;gCACAW;;;;;;;;AAMb,EAAC"}

package/dist/utilities/getPayloadHMR.d.ts

@@ -1,4 +1,4 @@
 import type { InitOptions, Payload, SanitizedConfig } from 'payload';
-export declare const reload: (config: SanitizedConfig, payload: Payload) => Promise<void>;
+export declare const reload: (config: SanitizedConfig, payload: Payload, skipImportMapGeneration?: boolean) => Promise<void>;
 export declare const getPayloadHMR: (options: InitOptions) => Promise<Payload>;
 //# sourceMappingURL=getPayloadHMR.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"getPayloadHMR.d.ts","sourceRoot":"","sources":["../../src/utilities/getPayloadHMR.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAgBpE,eAAO,MAAM,MAAM,WAAkB,eAAe,WAAW,OAAO,KAAG,OAAO,CAAC,IAAI,CAmCpF,CAAA;AAED,eAAO,MAAM,aAAa,YAAmB,WAAW,KAAG,OAAO,CAAC,OAAO,CAiEzE,CAAA"}
+{"version":3,"file":"getPayloadHMR.d.ts","sourceRoot":"","sources":["../../src/utilities/getPayloadHMR.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAgBpE,eAAO,MAAM,MAAM,WACT,eAAe,WACd,OAAO,4BACU,OAAO,KAChC,OAAO,CAAC,IAAI,CA0Cd,CAAA;AAED,eAAO,MAAM,aAAa,YAAmB,WAAW,KAAG,OAAO,CAAC,OAAO,CAyEzE,CAAA"}

package/dist/utilities/getPayloadHMR.js

@@ -1,4 +1,4 @@
-import { BasePayload } from 'payload';
+import { BasePayload, generateImportMap } from 'payload';
 import WebSocket from 'ws';
 let cached = global._payload;
 if (!cached) {
@@ -9,7 +9,7 @@ if (!cached) {
         ws: null
     };
 }
-export const reload = async (config, payload)=>{
+export const reload = async (config, payload, skipImportMapGeneration)=>{
     if (typeof payload.db.destroy === 'function') {
         await payload.db.destroy();
     }
@@ -36,6 +36,12 @@ export const reload = async (config, payload)=>{
             log: false
         });
     }
+    // Generate component map
+    if (skipImportMapGeneration !== true && config.admin?.importMap?.autoGenerate !== false) {
+        await generateImportMap(config, {
+            log: true
+        });
+    }
     await payload.db.init();
     if (payload.db.connect) {
         await payload.db.connect({
@@ -61,8 +67,12 @@ export const getPayloadHMR = async (options)=>{
         if (cached.reload instanceof Promise) {
             await cached.reload;
         }
+        if (options?.importMap) {
+            cached.payload.importMap = options.importMap;
+        }
         return cached.payload;
     }
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     if (!cached.promise) {
         // no need to await options.config here, as it's already awaited in the BasePayload.init
         cached.promise = new BasePayload().init(options);
@@ -89,6 +99,9 @@ export const getPayloadHMR = async (options)=>{
         cached.promise = null;
         throw e;
     }
+    if (options?.importMap) {
+        cached.payload.importMap = options.importMap;
+    }
     return cached.payload;
 };
 

package/dist/utilities/getPayloadHMR.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utilities/getPayloadHMR.ts"],"sourcesContent":["import type { InitOptions, Payload, SanitizedConfig } from 'payload'\n\nimport { BasePayload } from 'payload'\nimport WebSocket from 'ws'\n\nlet cached: {\n  payload: Payload | null\n  promise: Promise<Payload> | null\n  reload: Promise<void> | boolean\n  ws: WebSocket | null\n} = global._payload\n\nif (!cached) {\n  cached = global._payload = { payload: null, promise: null, reload: false, ws: null }\n}\n\nexport const reload = async (config: SanitizedConfig, payload: Payload): Promise<void> => {\n  if (typeof payload.db.destroy === 'function') {\n    await payload.db.destroy()\n  }\n\n  payload.config = config\n\n  payload.collections = config.collections.reduce((collections, collection) => {\n    collections[collection.slug] = {\n      config: collection,\n      customIDType: payload.collections[collection.slug]?.customIDType,\n    }\n    return collections\n  }, {})\n\n  payload.globals = {\n    config: config.globals,\n  }\n\n  // TODO: support HMR for other props in the future (see payload/src/index init()) hat may change on Payload singleton\n\n  // Generate types\n  if (config.typescript.autoGenerate !== false) {\n    // We cannot run it directly here, as generate-types imports json-schema-to-typescript, which breaks on turbopack.\n    // see: https://github.com/vercel/next.js/issues/66723\n    void payload.bin({\n      args: ['generate:types'],\n      log: false,\n    })\n  }\n\n  await payload.db.init()\n  if (payload.db.connect) {\n    await payload.db.connect({ hotReload: true })\n  }\n}\n\nexport const getPayloadHMR = async (options: InitOptions): Promise<Payload> => {\n  if (!options?.config) {\n    throw new Error('Error: the payload config is required for getPayloadHMR to work.')\n  }\n\n  if (cached.payload) {\n    if (cached.reload === true) {\n      let resolve: () => void\n\n      // getPayloadHMR is called multiple times, in parallel. However, we only want to run `await reload` once. By immediately setting cached.reload to a promise,\n      // we can ensure that all subsequent calls will wait for the first reload to finish. So if we set it here, the 2nd call of getPayloadHMR\n      // will reach `if (cached.reload instanceof Promise) {` which then waits for the first reload to finish.\n      cached.reload = new Promise((res) => (resolve = res))\n      const config = await options.config\n      await reload(config, cached.payload)\n\n      resolve()\n    }\n\n    if (cached.reload instanceof Promise) {\n      await cached.reload\n    }\n\n    return cached.payload\n  }\n\n  if (!cached.promise) {\n    // no need to await options.config here, as it's already awaited in the BasePayload.init\n    cached.promise = new BasePayload().init(options)\n  }\n\n  try {\n    cached.payload = await cached.promise\n\n    if (\n      !cached.ws &&\n      process.env.NODE_ENV !== 'production' &&\n      process.env.NODE_ENV !== 'test' &&\n      process.env.DISABLE_PAYLOAD_HMR !== 'true'\n    ) {\n      try {\n        const port = process.env.PORT || '3000'\n        cached.ws = new WebSocket(\n          `ws://localhost:${port}${process.env.NEXT_BASE_PATH ?? ''}/_next/webpack-hmr`,\n        )\n\n        cached.ws.onmessage = (event) => {\n          if (typeof event.data === 'string') {\n            const data = JSON.parse(event.data)\n\n            if ('action' in data && data.action === 'serverComponentChanges') {\n              cached.reload = true\n            }\n          }\n        }\n      } catch (_) {\n        // swallow e\n      }\n    }\n  } catch (e) {\n    cached.promise = null\n    throw e\n  }\n\n  return cached.payload\n}\n"],"names":["BasePayload","WebSocket","cached","global","_payload","payload","promise","reload","ws","config","db","destroy","collections","reduce","collection","slug","customIDType","globals","typescript","autoGenerate","bin","args","log","init","connect","hotReload","getPayloadHMR","options","Error","resolve","Promise","res","process","env","NODE_ENV","DISABLE_PAYLOAD_HMR","port","PORT","NEXT_BASE_PATH","onmessage","event","data","JSON","parse","action","_","e"],"mappings":"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"}
+{"version":3,"sources":["../../src/utilities/getPayloadHMR.ts"],"sourcesContent":["import type { InitOptions, Payload, SanitizedConfig } from 'payload'\n\nimport { BasePayload, generateImportMap } from 'payload'\nimport WebSocket from 'ws'\n\nlet cached: {\n  payload: Payload | null\n  promise: Promise<Payload> | null\n  reload: Promise<void> | boolean\n  ws: WebSocket | null\n} = global._payload\n\nif (!cached) {\n  cached = global._payload = { payload: null, promise: null, reload: false, ws: null }\n}\n\nexport const reload = async (\n  config: SanitizedConfig,\n  payload: Payload,\n  skipImportMapGeneration?: boolean,\n): Promise<void> => {\n  if (typeof payload.db.destroy === 'function') {\n    await payload.db.destroy()\n  }\n\n  payload.config = config\n\n  payload.collections = config.collections.reduce((collections, collection) => {\n    collections[collection.slug] = {\n      config: collection,\n      customIDType: payload.collections[collection.slug]?.customIDType,\n    }\n    return collections\n  }, {})\n\n  payload.globals = {\n    config: config.globals,\n  }\n\n  // TODO: support HMR for other props in the future (see payload/src/index init()) hat may change on Payload singleton\n\n  // Generate types\n  if (config.typescript.autoGenerate !== false) {\n    // We cannot run it directly here, as generate-types imports json-schema-to-typescript, which breaks on turbopack.\n    // see: https://github.com/vercel/next.js/issues/66723\n    void payload.bin({\n      args: ['generate:types'],\n      log: false,\n    })\n  }\n\n  // Generate component map\n  if (skipImportMapGeneration !== true && config.admin?.importMap?.autoGenerate !== false) {\n    await generateImportMap(config, {\n      log: true,\n    })\n  }\n\n  await payload.db.init()\n  if (payload.db.connect) {\n    await payload.db.connect({ hotReload: true })\n  }\n}\n\nexport const getPayloadHMR = async (options: InitOptions): Promise<Payload> => {\n  if (!options?.config) {\n    throw new Error('Error: the payload config is required for getPayloadHMR to work.')\n  }\n\n  if (cached.payload) {\n    if (cached.reload === true) {\n      let resolve: () => void\n\n      // getPayloadHMR is called multiple times, in parallel. However, we only want to run `await reload` once. By immediately setting cached.reload to a promise,\n      // we can ensure that all subsequent calls will wait for the first reload to finish. So if we set it here, the 2nd call of getPayloadHMR\n      // will reach `if (cached.reload instanceof Promise) {` which then waits for the first reload to finish.\n      cached.reload = new Promise((res) => (resolve = res))\n      const config = await options.config\n      await reload(config, cached.payload)\n\n      resolve()\n    }\n\n    if (cached.reload instanceof Promise) {\n      await cached.reload\n    }\n\n    if (options?.importMap) {\n      cached.payload.importMap = options.importMap\n    }\n    return cached.payload\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-misused-promises\n  if (!cached.promise) {\n    // no need to await options.config here, as it's already awaited in the BasePayload.init\n    cached.promise = new BasePayload().init(options)\n  }\n\n  try {\n    cached.payload = await cached.promise\n\n    if (\n      !cached.ws &&\n      process.env.NODE_ENV !== 'production' &&\n      process.env.NODE_ENV !== 'test' &&\n      process.env.DISABLE_PAYLOAD_HMR !== 'true'\n    ) {\n      try {\n        const port = process.env.PORT || '3000'\n        cached.ws = new WebSocket(\n          `ws://localhost:${port}${process.env.NEXT_BASE_PATH ?? ''}/_next/webpack-hmr`,\n        )\n\n        cached.ws.onmessage = (event) => {\n          if (typeof event.data === 'string') {\n            const data = JSON.parse(event.data)\n\n            if ('action' in data && data.action === 'serverComponentChanges') {\n              cached.reload = true\n            }\n          }\n        }\n      } catch (_) {\n        // swallow e\n      }\n    }\n  } catch (e) {\n    cached.promise = null\n    throw e\n  }\n\n  if (options?.importMap) {\n    cached.payload.importMap = options.importMap\n  }\n\n  return cached.payload\n}\n"],"names":["BasePayload","generateImportMap","WebSocket","cached","global","_payload","payload","promise","reload","ws","config","skipImportMapGeneration","db","destroy","collections","reduce","collection","slug","customIDType","globals","typescript","autoGenerate","bin","args","log","admin","importMap","init","connect","hotReload","getPayloadHMR","options","Error","resolve","Promise","res","process","env","NODE_ENV","DISABLE_PAYLOAD_HMR","port","PORT","NEXT_BASE_PATH","onmessage","event","data","JSON","parse","action","_","e"],"mappings":"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"}

package/dist/utilities/initPage/index.d.ts

@@ -1,4 +1,4 @@
 import type { InitPageResult } from 'payload';
 import type { Args } from './types.js';
-export declare const initPage: ({ config: configPromise, redirectUnauthenticatedUser, route, searchParams, }: Args) => Promise<InitPageResult>;
+export declare const initPage: ({ config: configPromise, importMap, redirectUnauthenticatedUser, route, searchParams, }: Args) => Promise<InitPageResult>;
 //# sourceMappingURL=index.d.ts.map

package/dist/utilities/initPage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/initPage/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAA2C,MAAM,SAAS,CAAA;AAQtF,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAOtC,eAAO,MAAM,QAAQ,iFAKlB,IAAI,KAAG,OAAO,CAAC,cAAc,CA0I/B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/initPage/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAA2C,MAAM,SAAS,CAAA;AAQtF,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAOtC,eAAO,MAAM,QAAQ,4FAMlB,IAAI,KAAG,OAAO,CAAC,cAAc,CA0I/B,CAAA"}

package/dist/utilities/initPage/index.js

@@ -7,10 +7,11 @@ import { getPayloadHMR } from '../getPayloadHMR.js';
 import { getRequestLanguage } from '../getRequestLanguage.js';
 import { handleAdminPage } from './handleAdminPage.js';
 import { handleAuthRedirect } from './handleAuthRedirect.js';
-export const initPage = async ({ config: configPromise, redirectUnauthenticatedUser = false, route, searchParams })=>{
+export const initPage = async ({ config: configPromise, importMap, redirectUnauthenticatedUser = false, route, searchParams })=>{
     const headers = getHeaders();
     const payload = await getPayloadHMR({
-        config: configPromise
+        config: configPromise,
+        importMap
     });
     const { collections, globals, i18n: i18nConfig, localization, routes: { admin: adminRoute } } = payload.config;
     const queryString = `${qs.stringify(searchParams ?? {}, {