@payloadcms/next 3.0.0-canary.ac498e7 → 3.0.0-canary.af2bebe

package/dist/views/Account/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Account/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAA2B,MAAM,SAAS,CAAA;AAKtE,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAA;AAEnD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA2F5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Account/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK7C,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAA;AAEnD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+F5C,CAAA"}

package/dist/views/Account/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DocumentInfoProvider, HydrateClientUser } from '@payloadcms/ui';
-import { RenderCustomComponent } from '@payloadcms/ui/shared';
+import { DocumentInfoProvider, EditDepthProvider, HydrateAuthProvider, RenderComponent } from '@payloadcms/ui';
+import { getCreateMappedComponent } from '@payloadcms/ui/shared';
 import { notFound } from 'next/navigation.js';
 import React from 'react';
 import { DocumentHeader } from '../../elements/DocumentHeader/index.js';
@@ -8,6 +8,7 @@ import { getDocumentData } from '../Document/getDocumentData.js';
 import { getDocumentPermissions } from '../Document/getDocumentPermissions.js';
 import { EditView } from '../Edit/index.js';
 import { Settings } from './Settings/index.js';
+import { AccountClient } from './index.client.js';
 export { generateAccountMetadata } from './meta.js';
 export const Account = async ({ initPageResult, params, searchParams })=>{
     const { languageOptions, locale, permissions, req, req: { i18n, payload, payload: { config }, user } } = initPageResult;
@@ -26,13 +27,22 @@ export const Account = async ({ initPageResult, params, searchParams })=>{
             locale,
             req
         });
-        const viewComponentProps = {
-            initPageResult,
-            params,
-            routeSegments: [],
-            searchParams
-        };
-        return /*#__PURE__*/ _jsxs(DocumentInfoProvider, {
+        const createMappedComponent = getCreateMappedComponent({
+            importMap: payload.importMap,
+            serverProps: {
+                i18n,
+                initPageResult,
+                locale,
+                params,
+                payload,
+                permissions,
+                routeSegments: [],
+                searchParams,
+                user
+            }
+        });
+        const mappedAccountComponent = createMappedComponent(CustomAccountComponent?.Component, undefined, EditView, 'CustomAccountComponent.Component');
+        return /*#__PURE__*/ _jsx(DocumentInfoProvider, {
             AfterFields: /*#__PURE__*/ _jsx(Settings, {
                 i18n: i18n,
                 languageOptions: languageOptions
@@ -46,33 +56,25 @@ export const Account = async ({ initPageResult, params, searchParams })=>{
             initialData: data,
             initialState: formState,
             isEditing: true,
-            children: [
-                /*#__PURE__*/ _jsx(DocumentHeader, {
-                    collectionConfig: collectionConfig,
-                    config: payload.config,
-                    hideTabs: true,
-                    i18n: i18n,
-                    permissions: permissions
-                }),
-                /*#__PURE__*/ _jsx(HydrateClientUser, {
-                    permissions: permissions,
-                    user: user
-                }),
-                /*#__PURE__*/ _jsx(RenderCustomComponent, {
-                    CustomComponent: typeof CustomAccountComponent === 'function' ? CustomAccountComponent : undefined,
-                    DefaultComponent: EditView,
-                    componentProps: viewComponentProps,
-                    serverOnlyProps: {
-                        i18n,
-                        locale,
-                        params,
-                        payload,
-                        permissions,
-                        searchParams,
-                        user
-                    }
-                })
-            ]
+            children: /*#__PURE__*/ _jsxs(EditDepthProvider, {
+                depth: 1,
+                children: [
+                    /*#__PURE__*/ _jsx(DocumentHeader, {
+                        collectionConfig: collectionConfig,
+                        hideTabs: true,
+                        i18n: i18n,
+                        payload: payload,
+                        permissions: permissions
+                    }),
+                    /*#__PURE__*/ _jsx(HydrateAuthProvider, {
+                        permissions: permissions
+                    }),
+                    /*#__PURE__*/ _jsx(RenderComponent, {
+                        mappedComponent: mappedAccountComponent
+                    }),
+                    /*#__PURE__*/ _jsx(AccountClient, {})
+                ]
+            })
         });
     }
     return notFound();

package/dist/views/Account/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/Account/index.tsx"],"sourcesContent":["import type { AdminViewProps, ServerSideEditViewProps } from 'payload'\n\nimport { DocumentInfoProvider, HydrateClientUser } from '@payloadcms/ui'\nimport { RenderCustomComponent } from '@payloadcms/ui/shared'\nimport { notFound } from 'next/navigation.js'\nimport React from 'react'\n\nimport { DocumentHeader } from '../../elements/DocumentHeader/index.js'\nimport { getDocumentData } from '../Document/getDocumentData.js'\nimport { getDocumentPermissions } from '../Document/getDocumentPermissions.js'\nimport { EditView } from '../Edit/index.js'\nimport { Settings } from './Settings/index.js'\n\nexport { generateAccountMetadata } from './meta.js'\n\nexport const Account: React.FC<AdminViewProps> = async ({\n  initPageResult,\n  params,\n  searchParams,\n}) => {\n  const {\n    languageOptions,\n    locale,\n    permissions,\n    req,\n    req: {\n      i18n,\n      payload,\n      payload: { config },\n      user,\n    },\n  } = initPageResult\n\n  const {\n    admin: { components: { views: { Account: CustomAccountComponent } = {} } = {}, user: userSlug },\n    routes: { api },\n    serverURL,\n  } = config\n\n  const collectionConfig = config.collections.find((collection) => collection.slug === userSlug)\n\n  if (collectionConfig && user?.id) {\n    const { docPermissions, hasPublishPermission, hasSavePermission } =\n      await getDocumentPermissions({\n        id: user.id,\n        collectionConfig,\n        data: user,\n        req,\n      })\n\n    const { data, formState } = await getDocumentData({\n      id: user.id,\n      collectionConfig,\n      locale,\n      req,\n    })\n\n    const viewComponentProps: ServerSideEditViewProps = {\n      initPageResult,\n      params,\n      routeSegments: [],\n      searchParams,\n    }\n\n    return (\n      <DocumentInfoProvider\n        AfterFields={<Settings i18n={i18n} languageOptions={languageOptions} />}\n        apiURL={`${serverURL}${api}/${userSlug}${user?.id ? `/${user.id}` : ''}`}\n        collectionSlug={userSlug}\n        docPermissions={docPermissions}\n        hasPublishPermission={hasPublishPermission}\n        hasSavePermission={hasSavePermission}\n        id={user?.id.toString()}\n        initialData={data}\n        initialState={formState}\n        isEditing\n      >\n        <DocumentHeader\n          collectionConfig={collectionConfig}\n          config={payload.config}\n          hideTabs\n          i18n={i18n}\n          permissions={permissions}\n        />\n        <HydrateClientUser permissions={permissions} user={user} />\n        <RenderCustomComponent\n          CustomComponent={\n            typeof CustomAccountComponent === 'function' ? CustomAccountComponent : undefined\n          }\n          DefaultComponent={EditView}\n          componentProps={viewComponentProps}\n          serverOnlyProps={{\n            i18n,\n            locale,\n            params,\n            payload,\n            permissions,\n            searchParams,\n            user,\n          }}\n        />\n      </DocumentInfoProvider>\n    )\n  }\n\n  return notFound()\n}\n"],"names":["DocumentInfoProvider","HydrateClientUser","RenderCustomComponent","notFound","React","DocumentHeader","getDocumentData","getDocumentPermissions","EditView","Settings","generateAccountMetadata","Account","initPageResult","params","searchParams","languageOptions","locale","permissions","req","i18n","payload","config","user","admin","components","views","CustomAccountComponent","userSlug","routes","api","serverURL","collectionConfig","collections","find","collection","slug","id","docPermissions","hasPublishPermission","hasSavePermission","data","formState","viewComponentProps","routeSegments","AfterFields","apiURL","collectionSlug","toString","initialData","initialState","isEditing","hideTabs","CustomComponent","undefined","DefaultComponent","componentProps","serverOnlyProps"],"mappings":";AAEA,SAASA,oBAAoB,EAAEC,iBAAiB,QAAQ,iBAAgB;AACxE,SAASC,qBAAqB,QAAQ,wBAAuB;AAC7D,SAASC,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,yCAAwC;AACvE,SAASC,eAAe,QAAQ,iCAAgC;AAChE,SAASC,sBAAsB,QAAQ,wCAAuC;AAC9E,SAASC,QAAQ,QAAQ,mBAAkB;AAC3C,SAASC,QAAQ,QAAQ,sBAAqB;AAE9C,SAASC,uBAAuB,QAAQ,YAAW;AAEnD,OAAO,MAAMC,UAAoC,OAAO,EACtDC,cAAc,EACdC,MAAM,EACNC,YAAY,EACb;IACC,MAAM,EACJC,eAAe,EACfC,MAAM,EACNC,WAAW,EACXC,GAAG,EACHA,KAAK,EACHC,IAAI,EACJC,OAAO,EACPA,SAAS,EAAEC,MAAM,EAAE,EACnBC,IAAI,EACL,EACF,GAAGV;IAEJ,MAAM,EACJW,OAAO,EAAEC,YAAY,EAAEC,OAAO,EAAEd,SAASe,sBAAsB,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAEJ,MAAMK,QAAQ,EAAE,EAC/FC,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,GAAGT;IAEJ,MAAMU,mBAAmBV,OAAOW,WAAW,CAACC,IAAI,CAAC,CAACC,aAAeA,WAAWC,IAAI,KAAKR;IAErF,IAAII,oBAAoBT,MAAMc,IAAI;QAChC,MAAM,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAC/D,MAAMhC,uBAAuB;YAC3B6B,IAAId,KAAKc,EAAE;YACXL;YACAS,MAAMlB;YACNJ;QACF;QAEF,MAAM,EAAEsB,IAAI,EAAEC,SAAS,EAAE,GAAG,MAAMnC,gBAAgB;YAChD8B,IAAId,KAAKc,EAAE;YACXL;YACAf;YACAE;QACF;QAEA,MAAMwB,qBAA8C;YAClD9B;YACAC;YACA8B,eAAe,EAAE;YACjB7B;QACF;QAEA,qBACE,MAACd;YACC4C,2BAAa,KAACnC;gBAASU,MAAMA;gBAAMJ,iBAAiBA;;YACpD8B,QAAQ,CAAC,EAAEf,UAAU,EAAED,IAAI,CAAC,EAAEF,SAAS,EAAEL,MAAMc,KAAK,CAAC,CAAC,EAAEd,KAAKc,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YACxEU,gBAAgBnB;YAChBU,gBAAgBA;YAChBC,sBAAsBA;YACtBC,mBAAmBA;YACnBH,IAAId,MAAMc,GAAGW;YACbC,aAAaR;YACbS,cAAcR;YACdS,SAAS;;8BAET,KAAC7C;oBACC0B,kBAAkBA;oBAClBV,QAAQD,QAAQC,MAAM;oBACtB8B,QAAQ;oBACRhC,MAAMA;oBACNF,aAAaA;;8BAEf,KAAChB;oBAAkBgB,aAAaA;oBAAaK,MAAMA;;8BACnD,KAACpB;oBACCkD,iBACE,OAAO1B,2BAA2B,aAAaA,yBAAyB2B;oBAE1EC,kBAAkB9C;oBAClB+C,gBAAgBb;oBAChBc,iBAAiB;wBACfrC;wBACAH;wBACAH;wBACAO;wBACAH;wBACAH;wBACAQ;oBACF;;;;IAIR;IAEA,OAAOnB;AACT,EAAC"}
+{"version":3,"sources":["../../../src/views/Account/index.tsx"],"sourcesContent":["import type { AdminViewProps } from 'payload'\n\nimport { DocumentInfoProvider, EditDepthProvider, HydrateAuthProvider, RenderComponent } from '@payloadcms/ui'\nimport { getCreateMappedComponent } from '@payloadcms/ui/shared'\nimport { notFound } from 'next/navigation.js'\nimport React from 'react'\n\nimport { DocumentHeader } from '../../elements/DocumentHeader/index.js'\nimport { getDocumentData } from '../Document/getDocumentData.js'\nimport { getDocumentPermissions } from '../Document/getDocumentPermissions.js'\nimport { EditView } from '../Edit/index.js'\nimport { Settings } from './Settings/index.js'\nimport { AccountClient } from './index.client.js'\n\nexport { generateAccountMetadata } from './meta.js'\n\nexport const Account: React.FC<AdminViewProps> = async ({\n  initPageResult,\n  params,\n  searchParams,\n}) => {\n  const {\n    languageOptions,\n    locale,\n    permissions,\n    req,\n    req: {\n      i18n,\n      payload,\n      payload: { config },\n      user,\n    },\n  } = initPageResult\n\n  const {\n    admin: { components: { views: { Account: CustomAccountComponent } = {} } = {}, user: userSlug },\n    routes: { api },\n    serverURL,\n  } = config\n\n  const collectionConfig = config.collections.find((collection) => collection.slug === userSlug)\n\n  if (collectionConfig && user?.id) {\n    const { docPermissions, hasPublishPermission, hasSavePermission } =\n      await getDocumentPermissions({\n        id: user.id,\n        collectionConfig,\n        data: user,\n        req,\n      })\n\n    const { data, formState } = await getDocumentData({\n      id: user.id,\n      collectionConfig,\n      locale,\n      req,\n    })\n\n    const createMappedComponent = getCreateMappedComponent({\n      importMap: payload.importMap,\n      serverProps: {\n        i18n,\n        initPageResult,\n        locale,\n        params,\n        payload,\n        permissions,\n        routeSegments: [],\n        searchParams,\n        user,\n      },\n    })\n\n    const mappedAccountComponent = createMappedComponent(\n      CustomAccountComponent?.Component,\n      undefined,\n      EditView,\n      'CustomAccountComponent.Component',\n    )\n\n    return (\n      <DocumentInfoProvider\n        AfterFields={<Settings i18n={i18n} languageOptions={languageOptions} />}\n        apiURL={`${serverURL}${api}/${userSlug}${user?.id ? `/${user.id}` : ''}`}\n        collectionSlug={userSlug}\n        docPermissions={docPermissions}\n        hasPublishPermission={hasPublishPermission}\n        hasSavePermission={hasSavePermission}\n        id={user?.id.toString()}\n        initialData={data}\n        initialState={formState}\n        isEditing\n      >\n        <EditDepthProvider depth={1}>\n\n        <DocumentHeader\n          collectionConfig={collectionConfig}\n          hideTabs\n          i18n={i18n}\n          payload={payload}\n          permissions={permissions}\n        />\n        <HydrateAuthProvider permissions={permissions} />\n        <RenderComponent mappedComponent={mappedAccountComponent} />\n          <AccountClient />\n        </EditDepthProvider>\n      </DocumentInfoProvider>\n    )\n  }\n\n  return notFound()\n}\n"],"names":["DocumentInfoProvider","EditDepthProvider","HydrateAuthProvider","RenderComponent","getCreateMappedComponent","notFound","React","DocumentHeader","getDocumentData","getDocumentPermissions","EditView","Settings","AccountClient","generateAccountMetadata","Account","initPageResult","params","searchParams","languageOptions","locale","permissions","req","i18n","payload","config","user","admin","components","views","CustomAccountComponent","userSlug","routes","api","serverURL","collectionConfig","collections","find","collection","slug","id","docPermissions","hasPublishPermission","hasSavePermission","data","formState","createMappedComponent","importMap","serverProps","routeSegments","mappedAccountComponent","Component","undefined","AfterFields","apiURL","collectionSlug","toString","initialData","initialState","isEditing","depth","hideTabs","mappedComponent"],"mappings":";AAEA,SAASA,oBAAoB,EAAEC,iBAAiB,EAAEC,mBAAmB,EAAEC,eAAe,QAAQ,iBAAgB;AAC9G,SAASC,wBAAwB,QAAQ,wBAAuB;AAChE,SAASC,QAAQ,QAAQ,qBAAoB;AAC7C,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,yCAAwC;AACvE,SAASC,eAAe,QAAQ,iCAAgC;AAChE,SAASC,sBAAsB,QAAQ,wCAAuC;AAC9E,SAASC,QAAQ,QAAQ,mBAAkB;AAC3C,SAASC,QAAQ,QAAQ,sBAAqB;AAC9C,SAASC,aAAa,QAAQ,oBAAmB;AAEjD,SAASC,uBAAuB,QAAQ,YAAW;AAEnD,OAAO,MAAMC,UAAoC,OAAO,EACtDC,cAAc,EACdC,MAAM,EACNC,YAAY,EACb;IACC,MAAM,EACJC,eAAe,EACfC,MAAM,EACNC,WAAW,EACXC,GAAG,EACHA,KAAK,EACHC,IAAI,EACJC,OAAO,EACPA,SAAS,EAAEC,MAAM,EAAE,EACnBC,IAAI,EACL,EACF,GAAGV;IAEJ,MAAM,EACJW,OAAO,EAAEC,YAAY,EAAEC,OAAO,EAAEd,SAASe,sBAAsB,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAEJ,MAAMK,QAAQ,EAAE,EAC/FC,QAAQ,EAAEC,GAAG,EAAE,EACfC,SAAS,EACV,GAAGT;IAEJ,MAAMU,mBAAmBV,OAAOW,WAAW,CAACC,IAAI,CAAC,CAACC,aAAeA,WAAWC,IAAI,KAAKR;IAErF,IAAII,oBAAoBT,MAAMc,IAAI;QAChC,MAAM,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAC/D,MAAMjC,uBAAuB;YAC3B8B,IAAId,KAAKc,EAAE;YACXL;YACAS,MAAMlB;YACNJ;QACF;QAEF,MAAM,EAAEsB,IAAI,EAAEC,SAAS,EAAE,GAAG,MAAMpC,gBAAgB;YAChD+B,IAAId,KAAKc,EAAE;YACXL;YACAf;YACAE;QACF;QAEA,MAAMwB,wBAAwBzC,yBAAyB;YACrD0C,WAAWvB,QAAQuB,SAAS;YAC5BC,aAAa;gBACXzB;gBACAP;gBACAI;gBACAH;gBACAO;gBACAH;gBACA4B,eAAe,EAAE;gBACjB/B;gBACAQ;YACF;QACF;QAEA,MAAMwB,yBAAyBJ,sBAC7BhB,wBAAwBqB,WACxBC,WACAzC,UACA;QAGF,qBACE,KAACV;YACCoD,2BAAa,KAACzC;gBAASW,MAAMA;gBAAMJ,iBAAiBA;;YACpDmC,QAAQ,CAAC,EAAEpB,UAAU,EAAED,IAAI,CAAC,EAAEF,SAAS,EAAEL,MAAMc,KAAK,CAAC,CAAC,EAAEd,KAAKc,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;YACxEe,gBAAgBxB;YAChBU,gBAAgBA;YAChBC,sBAAsBA;YACtBC,mBAAmBA;YACnBH,IAAId,MAAMc,GAAGgB;YACbC,aAAab;YACbc,cAAcb;YACdc,SAAS;sBAET,cAAA,MAACzD;gBAAkB0D,OAAO;;kCAE1B,KAACpD;wBACC2B,kBAAkBA;wBAClB0B,QAAQ;wBACRtC,MAAMA;wBACNC,SAASA;wBACTH,aAAaA;;kCAEf,KAAClB;wBAAoBkB,aAAaA;;kCAClC,KAACjB;wBAAgB0D,iBAAiBZ;;kCAChC,KAACrC;;;;IAIT;IAEA,OAAOP;AACT,EAAC"}

package/dist/views/CreateFirstUser/index.client.d.ts

@@ -1,9 +1,8 @@
-import type { FormState } from 'payload';
+import type { FormState, LoginWithUsernameOptions } from 'payload';
 import React from 'react';
 export declare const CreateFirstUserClient: React.FC<{
     initialState: FormState;
-    loginType: 'email' | 'emailOrUsername' | 'username';
-    requireEmail?: boolean;
+    loginWithUsername?: LoginWithUsernameOptions | false;
     userSlug: string;
 }>;
 //# sourceMappingURL=index.client.d.ts.map

package/dist/views/CreateFirstUser/index.client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/CreateFirstUser/index.client.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAcxC,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,YAAY,EAAE,SAAS,CAAA;IACvB,SAAS,EAAE,OAAO,GAAG,iBAAiB,GAAG,UAAU,CAAA;IACnD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,EAAE,MAAM,CAAA;CACjB,CA0DA,CAAA"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/views/CreateFirstUser/index.client.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA0B,SAAS,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAa1F,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,YAAY,EAAE,SAAS,CAAA;IACvB,iBAAiB,CAAC,EAAE,wBAAwB,GAAG,KAAK,CAAA;IACpD,QAAQ,EAAE,MAAM,CAAA;CACjB,CA+DA,CAAA"}

package/dist/views/CreateFirstUser/index.client.js

@@ -1,28 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ConfirmPasswordField, Form, FormSubmit, PasswordField, RenderFields, useComponentMap, useConfig, useTranslation } from '@payloadcms/ui';
+import { ConfirmPasswordField, Form, FormSubmit, PasswordField, RenderFields, useConfig, useTranslation } from '@payloadcms/ui';
 import { getFormState } from '@payloadcms/ui/shared';
 import React from 'react';
-import { LoginField } from '../Login/LoginField/index.js';
-export const CreateFirstUserClient = ({ initialState, loginType, requireEmail = true, userSlug })=>{
-    const { getFieldMap } = useComponentMap();
-    const { routes: { admin, api: apiRoute }, serverURL } = useConfig();
+import { RenderEmailAndUsernameFields } from '../../elements/EmailAndUsername/index.js';
+export const CreateFirstUserClient = ({ initialState, loginWithUsername, userSlug })=>{
+    const { config: { routes: { admin, api: apiRoute }, serverURL }, getEntityConfig } = useConfig();
     const { t } = useTranslation();
-    const fieldMap = getFieldMap({
+    const collectionConfig = getEntityConfig({
         collectionSlug: userSlug
     });
-    const onChange = React.useCallback(async ({ formState: prevFormState })=>{
-        return getFormState({
+    const onChange = React.useCallback(async ({ formState: prevFormState })=>getFormState({
             apiRoute,
             body: {
                 collectionSlug: userSlug,
                 formState: prevFormState,
                 operation: 'create',
-                schemaPath: userSlug
+                schemaPath: `_${userSlug}.auth`
             },
             serverURL
-        });
-    }, [
+        }), [
         apiRoute,
         userSlug,
         serverURL
@@ -37,34 +34,31 @@ export const CreateFirstUserClient = ({ initialState, loginType, requireEmail =
         redirect: admin,
         validationOperation: "create",
         children: [
-            [
-                'emailOrUsername',
-                'username'
-            ].includes(loginType) && /*#__PURE__*/ _jsx(LoginField, {
-                type: "username"
-            }),
-            [
-                'email',
-                'emailOrUsername'
-            ].includes(loginType) && /*#__PURE__*/ _jsx(LoginField, {
-                required: requireEmail,
-                type: "email"
+            /*#__PURE__*/ _jsx(RenderEmailAndUsernameFields, {
+                className: "emailAndUsername",
+                loginWithUsername: loginWithUsername,
+                operation: "create",
+                readOnly: false
             }),
             /*#__PURE__*/ _jsx(PasswordField, {
-                autoComplete: "off",
-                label: t('authentication:newPassword'),
-                name: "password",
-                required: true
+                autoComplete: 'off',
+                field: {
+                    name: 'password',
+                    label: t('authentication:newPassword'),
+                    required: true
+                }
             }),
             /*#__PURE__*/ _jsx(ConfirmPasswordField, {}),
             /*#__PURE__*/ _jsx(RenderFields, {
-                fieldMap: fieldMap,
+                fields: collectionConfig.fields,
+                forceRender: true,
                 operation: "create",
                 path: "",
                 readOnly: false,
                 schemaPath: userSlug
             }),
             /*#__PURE__*/ _jsx(FormSubmit, {
+                size: "large",
                 children: t('general:create')
             })
         ]

package/dist/views/CreateFirstUser/index.client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/CreateFirstUser/index.client.tsx"],"sourcesContent":["'use client'\nimport type { FormState } from 'payload'\n\nimport {\n  ConfirmPasswordField,\n  Form,\n  type FormProps,\n  FormSubmit,\n  PasswordField,\n  RenderFields,\n  useComponentMap,\n  useConfig,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport React from 'react'\n\nimport { LoginField } from '../Login/LoginField/index.js'\n\nexport const CreateFirstUserClient: React.FC<{\n  initialState: FormState\n  loginType: 'email' | 'emailOrUsername' | 'username'\n  requireEmail?: boolean\n  userSlug: string\n}> = ({ initialState, loginType, requireEmail = true, userSlug }) => {\n  const { getFieldMap } = useComponentMap()\n\n  const {\n    routes: { admin, api: apiRoute },\n    serverURL,\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const fieldMap = getFieldMap({ collectionSlug: userSlug })\n\n  const onChange: FormProps['onChange'][0] = React.useCallback(\n    async ({ formState: prevFormState }) => {\n      return getFormState({\n        apiRoute,\n        body: {\n          collectionSlug: userSlug,\n          formState: prevFormState,\n          operation: 'create',\n          schemaPath: userSlug,\n        },\n        serverURL,\n      })\n    },\n    [apiRoute, userSlug, serverURL],\n  )\n\n  return (\n    <Form\n      action={`${serverURL}${apiRoute}/${userSlug}/first-register`}\n      initialState={initialState}\n      method=\"POST\"\n      onChange={[onChange]}\n      redirect={admin}\n      validationOperation=\"create\"\n    >\n      {['emailOrUsername', 'username'].includes(loginType) && <LoginField type=\"username\" />}\n      {['email', 'emailOrUsername'].includes(loginType) && (\n        <LoginField required={requireEmail} type=\"email\" />\n      )}\n      <PasswordField\n        autoComplete=\"off\"\n        label={t('authentication:newPassword')}\n        name=\"password\"\n        required\n      />\n      <ConfirmPasswordField />\n      <RenderFields\n        fieldMap={fieldMap}\n        operation=\"create\"\n        path=\"\"\n        readOnly={false}\n        schemaPath={userSlug}\n      />\n      <FormSubmit>{t('general:create')}</FormSubmit>\n    </Form>\n  )\n}\n"],"names":["ConfirmPasswordField","Form","FormSubmit","PasswordField","RenderFields","useComponentMap","useConfig","useTranslation","getFormState","React","LoginField","CreateFirstUserClient","initialState","loginType","requireEmail","userSlug","getFieldMap","routes","admin","api","apiRoute","serverURL","t","fieldMap","collectionSlug","onChange","useCallback","formState","prevFormState","body","operation","schemaPath","action","method","redirect","validationOperation","includes","type","required","autoComplete","label","name","path","readOnly"],"mappings":"AAAA;;AAGA,SACEA,oBAAoB,EACpBC,IAAI,EAEJC,UAAU,EACVC,aAAa,EACbC,YAAY,EACZC,eAAe,EACfC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,SAASC,YAAY,QAAQ,wBAAuB;AACpD,OAAOC,WAAW,QAAO;AAEzB,SAASC,UAAU,QAAQ,+BAA8B;AAEzD,OAAO,MAAMC,wBAKR,CAAC,EAAEC,YAAY,EAAEC,SAAS,EAAEC,eAAe,IAAI,EAAEC,QAAQ,EAAE;IAC9D,MAAM,EAAEC,WAAW,EAAE,GAAGX;IAExB,MAAM,EACJY,QAAQ,EAAEC,KAAK,EAAEC,KAAKC,QAAQ,EAAE,EAChCC,SAAS,EACV,GAAGf;IAEJ,MAAM,EAAEgB,CAAC,EAAE,GAAGf;IAEd,MAAMgB,WAAWP,YAAY;QAAEQ,gBAAgBT;IAAS;IAExD,MAAMU,WAAqChB,MAAMiB,WAAW,CAC1D,OAAO,EAAEC,WAAWC,aAAa,EAAE;QACjC,OAAOpB,aAAa;YAClBY;YACAS,MAAM;gBACJL,gBAAgBT;gBAChBY,WAAWC;gBACXE,WAAW;gBACXC,YAAYhB;YACd;YACAM;QACF;IACF,GACA;QAACD;QAAUL;QAAUM;KAAU;IAGjC,qBACE,MAACpB;QACC+B,QAAQ,CAAC,EAAEX,UAAU,EAAED,SAAS,CAAC,EAAEL,SAAS,eAAe,CAAC;QAC5DH,cAAcA;QACdqB,QAAO;QACPR,UAAU;YAACA;SAAS;QACpBS,UAAUhB;QACViB,qBAAoB;;YAEnB;gBAAC;gBAAmB;aAAW,CAACC,QAAQ,CAACvB,4BAAc,KAACH;gBAAW2B,MAAK;;YACxE;gBAAC;gBAAS;aAAkB,CAACD,QAAQ,CAACvB,4BACrC,KAACH;gBAAW4B,UAAUxB;gBAAcuB,MAAK;;0BAE3C,KAAClC;gBACCoC,cAAa;gBACbC,OAAOlB,EAAE;gBACTmB,MAAK;gBACLH,QAAQ;;0BAEV,KAACtC;0BACD,KAACI;gBACCmB,UAAUA;gBACVO,WAAU;gBACVY,MAAK;gBACLC,UAAU;gBACVZ,YAAYhB;;0BAEd,KAACb;0BAAYoB,EAAE;;;;AAGrB,EAAC"}
+{"version":3,"sources":["../../../src/views/CreateFirstUser/index.client.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, FormState, LoginWithUsernameOptions } from 'payload'\n\nimport {\n  ConfirmPasswordField,\n  Form,\n  type FormProps,\n  FormSubmit,\n  PasswordField,\n  RenderFields,\n  useConfig,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { getFormState } from '@payloadcms/ui/shared'\nimport React from 'react'\n\nimport { RenderEmailAndUsernameFields } from '../../elements/EmailAndUsername/index.js'\n\nexport const CreateFirstUserClient: React.FC<{\n  initialState: FormState\n  loginWithUsername?: LoginWithUsernameOptions | false\n  userSlug: string\n}> = ({ initialState, loginWithUsername, userSlug }) => {\n  const {\n    config: {\n      routes: { admin, api: apiRoute },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const collectionConfig = getEntityConfig({ collectionSlug: userSlug }) as ClientCollectionConfig\n\n  const onChange: FormProps['onChange'][0] = React.useCallback(\n    async ({ formState: prevFormState }) =>\n      getFormState({\n        apiRoute,\n        body: {\n          collectionSlug: userSlug,\n          formState: prevFormState,\n          operation: 'create',\n          schemaPath: `_${userSlug}.auth`,\n        },\n        serverURL,\n      }),\n    [apiRoute, userSlug, serverURL],\n  )\n\n  return (\n    <Form\n      action={`${serverURL}${apiRoute}/${userSlug}/first-register`}\n      initialState={initialState}\n      method=\"POST\"\n      onChange={[onChange]}\n      redirect={admin}\n      validationOperation=\"create\"\n    >\n      <RenderEmailAndUsernameFields\n        className=\"emailAndUsername\"\n        loginWithUsername={loginWithUsername}\n        operation=\"create\"\n        readOnly={false}\n      />\n      <PasswordField\n        autoComplete={'off'}\n        field={{\n          name: 'password',\n          label: t('authentication:newPassword'),\n          required: true,\n        }}\n      />\n      <ConfirmPasswordField />\n      <RenderFields\n        fields={collectionConfig.fields}\n        forceRender\n        operation=\"create\"\n        path=\"\"\n        readOnly={false}\n        schemaPath={userSlug}\n      />\n      <FormSubmit size=\"large\">{t('general:create')}</FormSubmit>\n    </Form>\n  )\n}\n"],"names":["ConfirmPasswordField","Form","FormSubmit","PasswordField","RenderFields","useConfig","useTranslation","getFormState","React","RenderEmailAndUsernameFields","CreateFirstUserClient","initialState","loginWithUsername","userSlug","config","routes","admin","api","apiRoute","serverURL","getEntityConfig","t","collectionConfig","collectionSlug","onChange","useCallback","formState","prevFormState","body","operation","schemaPath","action","method","redirect","validationOperation","className","readOnly","autoComplete","field","name","label","required","fields","forceRender","path","size"],"mappings":"AAAA;;AAGA,SACEA,oBAAoB,EACpBC,IAAI,EAEJC,UAAU,EACVC,aAAa,EACbC,YAAY,EACZC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,SAASC,YAAY,QAAQ,wBAAuB;AACpD,OAAOC,WAAW,QAAO;AAEzB,SAASC,4BAA4B,QAAQ,2CAA0C;AAEvF,OAAO,MAAMC,wBAIR,CAAC,EAAEC,YAAY,EAAEC,iBAAiB,EAAEC,QAAQ,EAAE;IACjD,MAAM,EACJC,QAAQ,EACNC,QAAQ,EAAEC,KAAK,EAAEC,KAAKC,QAAQ,EAAE,EAChCC,SAAS,EACV,EACDC,eAAe,EAChB,GAAGf;IAEJ,MAAM,EAAEgB,CAAC,EAAE,GAAGf;IAEd,MAAMgB,mBAAmBF,gBAAgB;QAAEG,gBAAgBV;IAAS;IAEpE,MAAMW,WAAqChB,MAAMiB,WAAW,CAC1D,OAAO,EAAEC,WAAWC,aAAa,EAAE,GACjCpB,aAAa;YACXW;YACAU,MAAM;gBACJL,gBAAgBV;gBAChBa,WAAWC;gBACXE,WAAW;gBACXC,YAAY,CAAC,CAAC,EAAEjB,SAAS,KAAK,CAAC;YACjC;YACAM;QACF,IACF;QAACD;QAAUL;QAAUM;KAAU;IAGjC,qBACE,MAAClB;QACC8B,QAAQ,CAAC,EAAEZ,UAAU,EAAED,SAAS,CAAC,EAAEL,SAAS,eAAe,CAAC;QAC5DF,cAAcA;QACdqB,QAAO;QACPR,UAAU;YAACA;SAAS;QACpBS,UAAUjB;QACVkB,qBAAoB;;0BAEpB,KAACzB;gBACC0B,WAAU;gBACVvB,mBAAmBA;gBACnBiB,WAAU;gBACVO,UAAU;;0BAEZ,KAACjC;gBACCkC,cAAc;gBACdC,OAAO;oBACLC,MAAM;oBACNC,OAAOnB,EAAE;oBACToB,UAAU;gBACZ;;0BAEF,KAACzC;0BACD,KAACI;gBACCsC,QAAQpB,iBAAiBoB,MAAM;gBAC/BC,WAAW;gBACXd,WAAU;gBACVe,MAAK;gBACLR,UAAU;gBACVN,YAAYjB;;0BAEd,KAACX;gBAAW2C,MAAK;0BAASxB,EAAE;;;;AAGlC,EAAC"}

package/dist/views/CreateFirstUser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/CreateFirstUser/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAS,MAAM,SAAS,CAAA;AAGpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,+BAA+B,EAAE,MAAM,WAAW,CAAA;AAE3D,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0ExD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/CreateFirstUser/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,+BAA+B,EAAE,MAAM,WAAW,CAAA;AAE3D,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoCxD,CAAA"}

package/dist/views/CreateFirstUser/index.js

@@ -1,58 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema';
 import React from 'react';
+import { getDocumentData } from '../Document/getDocumentData.js';
 import { CreateFirstUserClient } from './index.client.js';
 export { generateCreateFirstUserMetadata } from './meta.js';
 export const CreateFirstUserView = async ({ initPageResult })=>{
-    const { req, req: { payload: { config: { admin: { user: userSlug } }, config } } } = initPageResult;
+    const { locale, req, req: { payload: { config: { admin: { user: userSlug } }, config } } } = initPageResult;
     const collectionConfig = config.collections?.find((collection)=>collection?.slug === userSlug);
     const { auth: authOptions } = collectionConfig;
     const loginWithUsername = authOptions.loginWithUsername;
-    const loginWithEmail = !loginWithUsername || loginWithUsername.allowEmailLogin;
-    const emailRequired = loginWithUsername && loginWithUsername.requireEmail;
-    let loginType = loginWithUsername ? 'username' : 'email';
-    if (loginWithUsername && (loginWithUsername.allowEmailLogin || loginWithUsername.requireEmail)) {
-        loginType = 'emailOrUsername';
-    }
-    const emailField = {
-        name: 'email',
-        type: 'email',
-        label: req.t('general:emailAddress'),
-        required: emailRequired ? true : false
-    };
-    const usernameField = {
-        name: 'username',
-        type: 'text',
-        label: req.t('authentication:username'),
-        required: true
-    };
-    const fields = [
-        ...loginWithUsername ? [
-            usernameField
-        ] : [],
-        ...emailRequired || loginWithEmail ? [
-            emailField
-        ] : [],
-        {
-            name: 'password',
-            type: 'text',
-            label: req.t('general:password'),
-            required: true
-        },
-        {
-            name: 'confirm-password',
-            type: 'text',
-            label: req.t('authentication:confirmPassword'),
-            required: true
-        }
-    ];
-    const formState = await buildStateFromSchema({
-        fieldSchema: fields,
-        operation: 'create',
-        preferences: {
-            fields: {}
-        },
-        req
+    const { formState } = await getDocumentData({
+        collectionConfig,
+        locale,
+        req,
+        schemaPath: `_${collectionConfig.slug}.auth`
     });
     return /*#__PURE__*/ _jsxs("div", {
         className: "create-first-user",
@@ -65,8 +25,7 @@ export const CreateFirstUserView = async ({ initPageResult })=>{
             }),
             /*#__PURE__*/ _jsx(CreateFirstUserClient, {
                 initialState: formState,
-                loginType: loginType,
-                requireEmail: emailRequired,
+                loginWithUsername: loginWithUsername,
                 userSlug: userSlug
             })
         ]

package/dist/views/CreateFirstUser/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/CreateFirstUser/index.tsx"],"sourcesContent":["import type { AdminViewProps, Field } from 'payload'\n\nimport { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema'\nimport React from 'react'\n\nimport type { LoginFieldProps } from '../Login/LoginField/index.js'\n\nimport { CreateFirstUserClient } from './index.client.js'\nimport './index.scss'\n\nexport { generateCreateFirstUserMetadata } from './meta.js'\n\nexport const CreateFirstUserView: React.FC<AdminViewProps> = async ({ initPageResult }) => {\n  const {\n    req,\n    req: {\n      payload: {\n        config: {\n          admin: { user: userSlug },\n        },\n        config,\n      },\n    },\n  } = initPageResult\n\n  const collectionConfig = config.collections?.find((collection) => collection?.slug === userSlug)\n  const { auth: authOptions } = collectionConfig\n  const loginWithUsername = authOptions.loginWithUsername\n  const loginWithEmail = !loginWithUsername || loginWithUsername.allowEmailLogin\n  const emailRequired = loginWithUsername && loginWithUsername.requireEmail\n\n  let loginType: LoginFieldProps['type'] = loginWithUsername ? 'username' : 'email'\n  if (loginWithUsername && (loginWithUsername.allowEmailLogin || loginWithUsername.requireEmail)) {\n    loginType = 'emailOrUsername'\n  }\n\n  const emailField = {\n    name: 'email',\n    type: 'email',\n    label: req.t('general:emailAddress'),\n    required: emailRequired ? true : false,\n  }\n\n  const usernameField = {\n    name: 'username',\n    type: 'text',\n    label: req.t('authentication:username'),\n    required: true,\n  }\n\n  const fields = [\n    ...(loginWithUsername ? [usernameField] : []),\n    ...(emailRequired || loginWithEmail ? [emailField] : []),\n    {\n      name: 'password',\n      type: 'text',\n      label: req.t('general:password'),\n      required: true,\n    },\n    {\n      name: 'confirm-password',\n      type: 'text',\n      label: req.t('authentication:confirmPassword'),\n      required: true,\n    },\n  ]\n\n  const formState = await buildStateFromSchema({\n    fieldSchema: fields as Field[],\n    operation: 'create',\n    preferences: { fields: {} },\n    req,\n  })\n\n  return (\n    <div className=\"create-first-user\">\n      <h1>{req.t('general:welcome')}</h1>\n      <p>{req.t('authentication:beginCreateFirstUser')}</p>\n      <CreateFirstUserClient\n        initialState={formState}\n        loginType={loginType}\n        requireEmail={emailRequired}\n        userSlug={userSlug}\n      />\n    </div>\n  )\n}\n"],"names":["buildStateFromSchema","React","CreateFirstUserClient","generateCreateFirstUserMetadata","CreateFirstUserView","initPageResult","req","payload","config","admin","user","userSlug","collectionConfig","collections","find","collection","slug","auth","authOptions","loginWithUsername","loginWithEmail","allowEmailLogin","emailRequired","requireEmail","loginType","emailField","name","type","label","t","required","usernameField","fields","formState","fieldSchema","operation","preferences","div","className","h1","p","initialState"],"mappings":";AAEA,SAASA,oBAAoB,QAAQ,4CAA2C;AAChF,OAAOC,WAAW,QAAO;AAIzB,SAASC,qBAAqB,QAAQ,oBAAmB;AAGzD,SAASC,+BAA+B,QAAQ,YAAW;AAE3D,OAAO,MAAMC,sBAAgD,OAAO,EAAEC,cAAc,EAAE;IACpF,MAAM,EACJC,GAAG,EACHA,KAAK,EACHC,SAAS,EACPC,QAAQ,EACNC,OAAO,EAAEC,MAAMC,QAAQ,EAAE,EAC1B,EACDH,MAAM,EACP,EACF,EACF,GAAGH;IAEJ,MAAMO,mBAAmBJ,OAAOK,WAAW,EAAEC,KAAK,CAACC,aAAeA,YAAYC,SAASL;IACvF,MAAM,EAAEM,MAAMC,WAAW,EAAE,GAAGN;IAC9B,MAAMO,oBAAoBD,YAAYC,iBAAiB;IACvD,MAAMC,iBAAiB,CAACD,qBAAqBA,kBAAkBE,eAAe;IAC9E,MAAMC,gBAAgBH,qBAAqBA,kBAAkBI,YAAY;IAEzE,IAAIC,YAAqCL,oBAAoB,aAAa;IAC1E,IAAIA,qBAAsBA,CAAAA,kBAAkBE,eAAe,IAAIF,kBAAkBI,YAAY,AAAD,GAAI;QAC9FC,YAAY;IACd;IAEA,MAAMC,aAAa;QACjBC,MAAM;QACNC,MAAM;QACNC,OAAOtB,IAAIuB,CAAC,CAAC;QACbC,UAAUR,gBAAgB,OAAO;IACnC;IAEA,MAAMS,gBAAgB;QACpBL,MAAM;QACNC,MAAM;QACNC,OAAOtB,IAAIuB,CAAC,CAAC;QACbC,UAAU;IACZ;IAEA,MAAME,SAAS;WACTb,oBAAoB;YAACY;SAAc,GAAG,EAAE;WACxCT,iBAAiBF,iBAAiB;YAACK;SAAW,GAAG,EAAE;QACvD;YACEC,MAAM;YACNC,MAAM;YACNC,OAAOtB,IAAIuB,CAAC,CAAC;YACbC,UAAU;QACZ;QACA;YACEJ,MAAM;YACNC,MAAM;YACNC,OAAOtB,IAAIuB,CAAC,CAAC;YACbC,UAAU;QACZ;KACD;IAED,MAAMG,YAAY,MAAMjC,qBAAqB;QAC3CkC,aAAaF;QACbG,WAAW;QACXC,aAAa;YAAEJ,QAAQ,CAAC;QAAE;QAC1B1B;IACF;IAEA,qBACE,MAAC+B;QAAIC,WAAU;;0BACb,KAACC;0BAAIjC,IAAIuB,CAAC,CAAC;;0BACX,KAACW;0BAAGlC,IAAIuB,CAAC,CAAC;;0BACV,KAAC3B;gBACCuC,cAAcR;gBACdT,WAAWA;gBACXD,cAAcD;gBACdX,UAAUA;;;;AAIlB,EAAC"}
+{"version":3,"sources":["../../../src/views/CreateFirstUser/index.tsx"],"sourcesContent":["import type { AdminViewProps } from 'payload'\n\nimport React from 'react'\n\nimport type { LoginFieldProps } from '../Login/LoginField/index.js'\n\nimport { getDocumentData } from '../Document/getDocumentData.js'\nimport { CreateFirstUserClient } from './index.client.js'\nimport './index.scss'\n\nexport { generateCreateFirstUserMetadata } from './meta.js'\n\nexport const CreateFirstUserView: React.FC<AdminViewProps> = async ({ initPageResult }) => {\n  const {\n    locale,\n    req,\n    req: {\n      payload: {\n        config: {\n          admin: { user: userSlug },\n        },\n        config,\n      },\n    },\n  } = initPageResult\n\n  const collectionConfig = config.collections?.find((collection) => collection?.slug === userSlug)\n  const { auth: authOptions } = collectionConfig\n  const loginWithUsername = authOptions.loginWithUsername\n\n  const { formState } = await getDocumentData({\n    collectionConfig,\n    locale,\n    req,\n    schemaPath: `_${collectionConfig.slug}.auth`,\n  })\n\n  return (\n    <div className=\"create-first-user\">\n      <h1>{req.t('general:welcome')}</h1>\n      <p>{req.t('authentication:beginCreateFirstUser')}</p>\n      <CreateFirstUserClient\n        initialState={formState}\n        loginWithUsername={loginWithUsername}\n        userSlug={userSlug}\n      />\n    </div>\n  )\n}\n"],"names":["React","getDocumentData","CreateFirstUserClient","generateCreateFirstUserMetadata","CreateFirstUserView","initPageResult","locale","req","payload","config","admin","user","userSlug","collectionConfig","collections","find","collection","slug","auth","authOptions","loginWithUsername","formState","schemaPath","div","className","h1","t","p","initialState"],"mappings":";AAEA,OAAOA,WAAW,QAAO;AAIzB,SAASC,eAAe,QAAQ,iCAAgC;AAChE,SAASC,qBAAqB,QAAQ,oBAAmB;AAGzD,SAASC,+BAA+B,QAAQ,YAAW;AAE3D,OAAO,MAAMC,sBAAgD,OAAO,EAAEC,cAAc,EAAE;IACpF,MAAM,EACJC,MAAM,EACNC,GAAG,EACHA,KAAK,EACHC,SAAS,EACPC,QAAQ,EACNC,OAAO,EAAEC,MAAMC,QAAQ,EAAE,EAC1B,EACDH,MAAM,EACP,EACF,EACF,GAAGJ;IAEJ,MAAMQ,mBAAmBJ,OAAOK,WAAW,EAAEC,KAAK,CAACC,aAAeA,YAAYC,SAASL;IACvF,MAAM,EAAEM,MAAMC,WAAW,EAAE,GAAGN;IAC9B,MAAMO,oBAAoBD,YAAYC,iBAAiB;IAEvD,MAAM,EAAEC,SAAS,EAAE,GAAG,MAAMpB,gBAAgB;QAC1CY;QACAP;QACAC;QACAe,YAAY,CAAC,CAAC,EAAET,iBAAiBI,IAAI,CAAC,KAAK,CAAC;IAC9C;IAEA,qBACE,MAACM;QAAIC,WAAU;;0BACb,KAACC;0BAAIlB,IAAImB,CAAC,CAAC;;0BACX,KAACC;0BAAGpB,IAAImB,CAAC,CAAC;;0BACV,KAACxB;gBACC0B,cAAcP;gBACdD,mBAAmBA;gBACnBR,UAAUA;;;;AAIlB,EAAC"}

package/dist/views/CreateFirstUser/index.scss

@@ -3,3 +3,7 @@
     margin-bottom: var(--base);
   }
 }
+
+.emailAndUsername {
+  margin-bottom: var(--base);
+}

package/dist/views/Dashboard/Default/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Dashboard/Default/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAKxE,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;IAC9B,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAA;IAC5C,WAAW,EAAE,WAAW,CAAA;IACxB,eAAe,EAAE,eAAe,CAAA;CACjC,GAAG,WAAW,CAAA;AAEf,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqJrD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Dashboard/Default/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAUxE,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;IAC9B,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,CAAA;IAC5C,WAAW,EAAE,WAAW,CAAA;IACxB,eAAe,EAAE,eAAe,CAAA;CACjC,GAAG,WAAW,CAAA;AAEf,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4IrD,CAAA"}

package/dist/views/Dashboard/Default/index.js

@@ -1,35 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import { Button, Card, Gutter, SetStepNav, SetViewActions } from '@payloadcms/ui';
-import { EntityType, WithServerSideProps, formatAdminURL } from '@payloadcms/ui/shared';
+import { EntityType, RenderComponent, formatAdminURL, getCreateMappedComponent } from '@payloadcms/ui/shared';
 import React, { Fragment } from 'react';
 const baseClass = 'dashboard';
 export const DefaultDashboard = (props)=>{
     const { Link, i18n, i18n: { t }, locale, navGroups, params, payload: { config: { admin: { components: { afterDashboard, beforeDashboard } }, routes: { admin: adminRoute } } }, payload, permissions, searchParams, user } = props;
-    const BeforeDashboards = Array.isArray(beforeDashboard) ? beforeDashboard.map((Component, i)=>/*#__PURE__*/ _jsx(WithServerSideProps, {
-            Component: Component,
-            serverOnlyProps: {
-                i18n,
-                locale,
-                params,
-                payload,
-                permissions,
-                searchParams,
-                user
-            }
-        }, i)) : null;
-    const AfterDashboards = Array.isArray(afterDashboard) ? afterDashboard.map((Component, i)=>/*#__PURE__*/ _jsx(WithServerSideProps, {
-            Component: Component,
-            serverOnlyProps: {
-                i18n,
-                locale,
-                params,
-                payload,
-                permissions,
-                searchParams,
-                user
-            }
-        }, i)) : null;
+    const createMappedComponent = getCreateMappedComponent({
+        importMap: payload.importMap,
+        serverProps: {
+            i18n,
+            locale,
+            params,
+            payload,
+            permissions,
+            searchParams,
+            user
+        }
+    });
+    const mappedBeforeDashboards = createMappedComponent(beforeDashboard, undefined, undefined, 'beforeDashboard');
+    const mappedAfterDashboards = createMappedComponent(afterDashboard, undefined, undefined, 'afterDashboard');
     return /*#__PURE__*/ _jsxs("div", {
         className: baseClass,
         children: [
@@ -42,7 +32,9 @@ export const DefaultDashboard = (props)=>{
             /*#__PURE__*/ _jsxs(Gutter, {
                 className: `${baseClass}__wrap`,
                 children: [
-                    Array.isArray(BeforeDashboards) && BeforeDashboards.map((Component)=>Component),
+                    /*#__PURE__*/ _jsx(RenderComponent, {
+                        mappedComponent: mappedBeforeDashboards
+                    }),
                     /*#__PURE__*/ _jsxs(Fragment, {
                         children: [
                             /*#__PURE__*/ _jsx(SetViewActions, {
@@ -120,7 +112,9 @@ export const DefaultDashboard = (props)=>{
                             })
                         ]
                     }),
-                    Array.isArray(AfterDashboards) && AfterDashboards.map((Component)=>Component)
+                    /*#__PURE__*/ _jsx(RenderComponent, {
+                        mappedComponent: mappedAfterDashboards
+                    })
                 ]
             })
         ]

package/dist/views/Dashboard/Default/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/Dashboard/Default/index.tsx"],"sourcesContent":["import type { groupNavItems } from '@payloadcms/ui/shared'\nimport type { Permissions, ServerProps, VisibleEntities } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Button, Card, Gutter, SetStepNav, SetViewActions } from '@payloadcms/ui'\nimport { EntityType, WithServerSideProps, formatAdminURL } from '@payloadcms/ui/shared'\nimport React, { Fragment } from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'dashboard'\n\nexport type DashboardProps = {\n  Link: React.ComponentType<any>\n  navGroups?: ReturnType<typeof groupNavItems>\n  permissions: Permissions\n  visibleEntities: VisibleEntities\n} & ServerProps\n\nexport const DefaultDashboard: React.FC<DashboardProps> = (props) => {\n  const {\n    Link,\n    i18n,\n    i18n: { t },\n    locale,\n    navGroups,\n    params,\n    payload: {\n      config: {\n        admin: {\n          components: { afterDashboard, beforeDashboard },\n        },\n        routes: { admin: adminRoute },\n      },\n    },\n    payload,\n    permissions,\n    searchParams,\n    user,\n  } = props\n\n  const BeforeDashboards = Array.isArray(beforeDashboard)\n    ? beforeDashboard.map((Component, i) => (\n        <WithServerSideProps\n          Component={Component}\n          key={i}\n          serverOnlyProps={{\n            i18n,\n            locale,\n            params,\n            payload,\n            permissions,\n            searchParams,\n            user,\n          }}\n        />\n      ))\n    : null\n\n  const AfterDashboards = Array.isArray(afterDashboard)\n    ? afterDashboard.map((Component, i) => (\n        <WithServerSideProps\n          Component={Component}\n          key={i}\n          serverOnlyProps={{\n            i18n,\n            locale,\n            params,\n            payload,\n            permissions,\n            searchParams,\n            user,\n          }}\n        />\n      ))\n    : null\n\n  return (\n    <div className={baseClass}>\n      <SetStepNav nav={[]} />\n      <SetViewActions actions={[]} />\n      <Gutter className={`${baseClass}__wrap`}>\n        {Array.isArray(BeforeDashboards) && BeforeDashboards.map((Component) => Component)}\n        <Fragment>\n          <SetViewActions actions={[]} />\n          {!navGroups || navGroups?.length === 0 ? (\n            <p>no nav groups....</p>\n          ) : (\n            navGroups.map(({ entities, label }, groupIndex) => {\n              return (\n                <div className={`${baseClass}__group`} key={groupIndex}>\n                  <h2 className={`${baseClass}__label`}>{label}</h2>\n                  <ul className={`${baseClass}__card-list`}>\n                    {entities.map(({ type, entity }, entityIndex) => {\n                      let title: string\n                      let buttonAriaLabel: string\n                      let createHREF: string\n                      let href: string\n                      let hasCreatePermission: boolean\n\n                      if (type === EntityType.collection) {\n                        title = getTranslation(entity.labels.plural, i18n)\n\n                        buttonAriaLabel = t('general:showAllLabel', { label: title })\n\n                        href = formatAdminURL({ adminRoute, path: `/collections/${entity.slug}` })\n\n                        createHREF = formatAdminURL({\n                          adminRoute,\n                          path: `/collections/${entity.slug}/create`,\n                        })\n\n                        hasCreatePermission =\n                          permissions?.collections?.[entity.slug]?.create?.permission\n                      }\n\n                      if (type === EntityType.global) {\n                        title = getTranslation(entity.label, i18n)\n\n                        buttonAriaLabel = t('general:editLabel', {\n                          label: getTranslation(entity.label, i18n),\n                        })\n\n                        href = formatAdminURL({\n                          adminRoute,\n                          path: `/globals/${entity.slug}`,\n                        })\n                      }\n\n                      return (\n                        <li key={entityIndex}>\n                          <Card\n                            Link={Link}\n                            actions={\n                              hasCreatePermission && type === EntityType.collection ? (\n                                <Button\n                                  Link={Link}\n                                  aria-label={t('general:createNewLabel', {\n                                    label: getTranslation(entity.labels.singular, i18n),\n                                  })}\n                                  buttonStyle=\"icon-label\"\n                                  el=\"link\"\n                                  icon=\"plus\"\n                                  iconStyle=\"with-border\"\n                                  round\n                                  to={createHREF}\n                                />\n                              ) : undefined\n                            }\n                            buttonAriaLabel={buttonAriaLabel}\n                            href={href}\n                            id={`card-${entity.slug}`}\n                            title={title}\n                            titleAs=\"h3\"\n                          />\n                        </li>\n                      )\n                    })}\n                  </ul>\n                </div>\n              )\n            })\n          )}\n        </Fragment>\n        {Array.isArray(AfterDashboards) && AfterDashboards.map((Component) => Component)}\n      </Gutter>\n    </div>\n  )\n}\n"],"names":["getTranslation","Button","Card","Gutter","SetStepNav","SetViewActions","EntityType","WithServerSideProps","formatAdminURL","React","Fragment","baseClass","DefaultDashboard","props","Link","i18n","t","locale","navGroups","params","payload","config","admin","components","afterDashboard","beforeDashboard","routes","adminRoute","permissions","searchParams","user","BeforeDashboards","Array","isArray","map","Component","i","serverOnlyProps","AfterDashboards","div","className","nav","actions","length","p","entities","label","groupIndex","h2","ul","type","entity","entityIndex","title","buttonAriaLabel","createHREF","href","hasCreatePermission","collection","labels","plural","path","slug","collections","create","permission","global","li","aria-label","singular","buttonStyle","el","icon","iconStyle","round","to","undefined","id","titleAs"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/views/Dashboard/Default/index.tsx"],"sourcesContent":["import type { groupNavItems } from '@payloadcms/ui/shared'\nimport type { Permissions, ServerProps, VisibleEntities } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { Button, Card, Gutter, SetStepNav, SetViewActions } from '@payloadcms/ui'\nimport {\n  EntityType,\n  RenderComponent,\n  formatAdminURL,\n  getCreateMappedComponent,\n} from '@payloadcms/ui/shared'\nimport React, { Fragment } from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'dashboard'\n\nexport type DashboardProps = {\n  Link: React.ComponentType<any>\n  navGroups?: ReturnType<typeof groupNavItems>\n  permissions: Permissions\n  visibleEntities: VisibleEntities\n} & ServerProps\n\nexport const DefaultDashboard: React.FC<DashboardProps> = (props) => {\n  const {\n    Link,\n    i18n,\n    i18n: { t },\n    locale,\n    navGroups,\n    params,\n    payload: {\n      config: {\n        admin: {\n          components: { afterDashboard, beforeDashboard },\n        },\n        routes: { admin: adminRoute },\n      },\n    },\n    payload,\n    permissions,\n    searchParams,\n    user,\n  } = props\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 mappedBeforeDashboards = createMappedComponent(\n    beforeDashboard,\n    undefined,\n    undefined,\n    'beforeDashboard',\n  )\n\n  const mappedAfterDashboards = createMappedComponent(\n    afterDashboard,\n    undefined,\n    undefined,\n    'afterDashboard',\n  )\n\n  return (\n    <div className={baseClass}>\n      <SetStepNav nav={[]} />\n      <SetViewActions actions={[]} />\n      <Gutter className={`${baseClass}__wrap`}>\n        <RenderComponent mappedComponent={mappedBeforeDashboards} />\n        <Fragment>\n          <SetViewActions actions={[]} />\n          {!navGroups || navGroups?.length === 0 ? (\n            <p>no nav groups....</p>\n          ) : (\n            navGroups.map(({ entities, label }, groupIndex) => {\n              return (\n                <div className={`${baseClass}__group`} key={groupIndex}>\n                  <h2 className={`${baseClass}__label`}>{label}</h2>\n                  <ul className={`${baseClass}__card-list`}>\n                    {entities.map(({ type, entity }, entityIndex) => {\n                      let title: string\n                      let buttonAriaLabel: string\n                      let createHREF: string\n                      let href: string\n                      let hasCreatePermission: boolean\n\n                      if (type === EntityType.collection) {\n                        title = getTranslation(entity.labels.plural, i18n)\n\n                        buttonAriaLabel = t('general:showAllLabel', { label: title })\n\n                        href = formatAdminURL({ adminRoute, path: `/collections/${entity.slug}` })\n\n                        createHREF = formatAdminURL({\n                          adminRoute,\n                          path: `/collections/${entity.slug}/create`,\n                        })\n\n                        hasCreatePermission =\n                          permissions?.collections?.[entity.slug]?.create?.permission\n                      }\n\n                      if (type === EntityType.global) {\n                        title = getTranslation(entity.label, i18n)\n\n                        buttonAriaLabel = t('general:editLabel', {\n                          label: getTranslation(entity.label, i18n),\n                        })\n\n                        href = formatAdminURL({\n                          adminRoute,\n                          path: `/globals/${entity.slug}`,\n                        })\n                      }\n\n                      return (\n                        <li key={entityIndex}>\n                          <Card\n                            Link={Link}\n                            actions={\n                              hasCreatePermission && type === EntityType.collection ? (\n                                <Button\n                                  Link={Link}\n                                  aria-label={t('general:createNewLabel', {\n                                    label: getTranslation(entity.labels.singular, i18n),\n                                  })}\n                                  buttonStyle=\"icon-label\"\n                                  el=\"link\"\n                                  icon=\"plus\"\n                                  iconStyle=\"with-border\"\n                                  round\n                                  to={createHREF}\n                                />\n                              ) : undefined\n                            }\n                            buttonAriaLabel={buttonAriaLabel}\n                            href={href}\n                            id={`card-${entity.slug}`}\n                            title={title}\n                            titleAs=\"h3\"\n                          />\n                        </li>\n                      )\n                    })}\n                  </ul>\n                </div>\n              )\n            })\n          )}\n        </Fragment>\n        <RenderComponent mappedComponent={mappedAfterDashboards} />\n      </Gutter>\n    </div>\n  )\n}\n"],"names":["getTranslation","Button","Card","Gutter","SetStepNav","SetViewActions","EntityType","RenderComponent","formatAdminURL","getCreateMappedComponent","React","Fragment","baseClass","DefaultDashboard","props","Link","i18n","t","locale","navGroups","params","payload","config","admin","components","afterDashboard","beforeDashboard","routes","adminRoute","permissions","searchParams","user","createMappedComponent","importMap","serverProps","mappedBeforeDashboards","undefined","mappedAfterDashboards","div","className","nav","actions","mappedComponent","length","p","map","entities","label","groupIndex","h2","ul","type","entity","entityIndex","title","buttonAriaLabel","createHREF","href","hasCreatePermission","collection","labels","plural","path","slug","collections","create","permission","global","li","aria-label","singular","buttonStyle","el","icon","iconStyle","round","to","id","titleAs"],"mappings":";AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,MAAM,EAAEC,IAAI,EAAEC,MAAM,EAAEC,UAAU,EAAEC,cAAc,QAAQ,iBAAgB;AACjF,SACEC,UAAU,EACVC,eAAe,EACfC,cAAc,EACdC,wBAAwB,QACnB,wBAAuB;AAC9B,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAIvC,MAAMC,YAAY;AASlB,OAAO,MAAMC,mBAA6C,CAACC;IACzD,MAAM,EACJC,IAAI,EACJC,IAAI,EACJA,MAAM,EAAEC,CAAC,EAAE,EACXC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,SAAS,EACPC,QAAQ,EACNC,OAAO,EACLC,YAAY,EAAEC,cAAc,EAAEC,eAAe,EAAE,EAChD,EACDC,QAAQ,EAAEJ,OAAOK,UAAU,EAAE,EAC9B,EACF,EACDP,OAAO,EACPQ,WAAW,EACXC,YAAY,EACZC,IAAI,EACL,GAAGjB;IAEJ,MAAMkB,wBAAwBvB,yBAAyB;QACrDwB,WAAWZ,QAAQY,SAAS;QAC5BC,aAAa;YACXlB;YACAE;YACAE;YACAC;YACAQ;YACAC;YACAC;QACF;IACF;IAEA,MAAMI,yBAAyBH,sBAC7BN,iBACAU,WACAA,WACA;IAGF,MAAMC,wBAAwBL,sBAC5BP,gBACAW,WACAA,WACA;IAGF,qBACE,MAACE;QAAIC,WAAW3B;;0BACd,KAACR;gBAAWoC,KAAK,EAAE;;0BACnB,KAACnC;gBAAeoC,SAAS,EAAE;;0BAC3B,MAACtC;gBAAOoC,WAAW,CAAC,EAAE3B,UAAU,MAAM,CAAC;;kCACrC,KAACL;wBAAgBmC,iBAAiBP;;kCAClC,MAACxB;;0CACC,KAACN;gCAAeoC,SAAS,EAAE;;4BAC1B,CAACtB,aAAaA,WAAWwB,WAAW,kBACnC,KAACC;0CAAE;iCAEHzB,UAAU0B,GAAG,CAAC,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAAE,EAAEC;gCAClC,qBACE,MAACV;oCAAIC,WAAW,CAAC,EAAE3B,UAAU,OAAO,CAAC;;sDACnC,KAACqC;4CAAGV,WAAW,CAAC,EAAE3B,UAAU,OAAO,CAAC;sDAAGmC;;sDACvC,KAACG;4CAAGX,WAAW,CAAC,EAAE3B,UAAU,WAAW,CAAC;sDACrCkC,SAASD,GAAG,CAAC,CAAC,EAAEM,IAAI,EAAEC,MAAM,EAAE,EAAEC;gDAC/B,IAAIC;gDACJ,IAAIC;gDACJ,IAAIC;gDACJ,IAAIC;gDACJ,IAAIC;gDAEJ,IAAIP,SAAS7C,WAAWqD,UAAU,EAAE;oDAClCL,QAAQtD,eAAeoD,OAAOQ,MAAM,CAACC,MAAM,EAAE7C;oDAE7CuC,kBAAkBtC,EAAE,wBAAwB;wDAAE8B,OAAOO;oDAAM;oDAE3DG,OAAOjD,eAAe;wDAAEoB;wDAAYkC,MAAM,CAAC,aAAa,EAAEV,OAAOW,IAAI,CAAC,CAAC;oDAAC;oDAExEP,aAAahD,eAAe;wDAC1BoB;wDACAkC,MAAM,CAAC,aAAa,EAAEV,OAAOW,IAAI,CAAC,OAAO,CAAC;oDAC5C;oDAEAL,sBACE7B,aAAamC,aAAa,CAACZ,OAAOW,IAAI,CAAC,EAAEE,QAAQC;gDACrD;gDAEA,IAAIf,SAAS7C,WAAW6D,MAAM,EAAE;oDAC9Bb,QAAQtD,eAAeoD,OAAOL,KAAK,EAAE/B;oDAErCuC,kBAAkBtC,EAAE,qBAAqB;wDACvC8B,OAAO/C,eAAeoD,OAAOL,KAAK,EAAE/B;oDACtC;oDAEAyC,OAAOjD,eAAe;wDACpBoB;wDACAkC,MAAM,CAAC,SAAS,EAAEV,OAAOW,IAAI,CAAC,CAAC;oDACjC;gDACF;gDAEA,qBACE,KAACK;8DACC,cAAA,KAAClE;wDACCa,MAAMA;wDACN0B,SACEiB,uBAAuBP,SAAS7C,WAAWqD,UAAU,iBACnD,KAAC1D;4DACCc,MAAMA;4DACNsD,cAAYpD,EAAE,0BAA0B;gEACtC8B,OAAO/C,eAAeoD,OAAOQ,MAAM,CAACU,QAAQ,EAAEtD;4DAChD;4DACAuD,aAAY;4DACZC,IAAG;4DACHC,MAAK;4DACLC,WAAU;4DACVC,KAAK;4DACLC,IAAIpB;6DAEJpB;wDAENmB,iBAAiBA;wDACjBE,MAAMA;wDACNoB,IAAI,CAAC,KAAK,EAAEzB,OAAOW,IAAI,CAAC,CAAC;wDACzBT,OAAOA;wDACPwB,SAAQ;;mDAvBHzB;4CA2Bb;;;mCAnEwCL;4BAuEhD;;;kCAGJ,KAACzC;wBAAgBmC,iBAAiBL;;;;;;AAI1C,EAAC"}

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

@@ -26,13 +26,9 @@
     padding: 0;
     margin: 0;
     list-style: none;
-    display: flex;
     gap: var(--gap);
-    flex-wrap: wrap;
-
-    li {
-      width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
-    }
+    display: grid;
+    grid-template-columns: repeat(var(--cols), 1fr);
 
     .card {
       height: 100%;
@@ -49,10 +45,18 @@
   }
 
   @include small-break {
-    --cols: 1;
+    --cols: 2;
 
     &__wrap {
       gap: var(--base);
     }
+
+    &__card-list {
+      gap: base(0.4);
+    }
+  }
+
+  @include extra-small-break {
+    --cols: 1;
   }
 }

package/dist/views/Dashboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Dashboard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK7C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,WAAW,CAAA;AAIrD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoF9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Dashboard/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAU7C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,WAAW,CAAA;AAIrD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqF9C,CAAA"}