@payloadcms/next 3.0.0-beta.73 → 3.0.0-beta.74

package/dist/scss/app.scss

@@ -1,9 +1,9 @@
-@import './styles.scss';
+@import 'styles';
 @import './toasts.scss';
 @import './colors.scss';
 
 :root {
-  --base-px: 25;
+  --base-px: 20;
   --base-body-size: 13;
   --base: calc((var(--base-px) / var(--base-body-size)) * 1rem);
 
@@ -21,6 +21,7 @@
   --theme-baseline-body-size: #{$baseline-body-size};
   --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
     sans-serif;
+  --font-serif: Georgia, 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
   --font-mono: monospace;
 
   --style-radius-s: #{$style-radius-s};
@@ -67,12 +68,6 @@ html {
   @extend %body;
   background: var(--theme-bg);
   -webkit-font-smoothing: antialiased;
-  opacity: 0;
-
-  &[data-theme='dark'],
-  &[data-theme='light'] {
-    opacity: initial;
-  }
 
   &[data-theme='dark'] {
     --theme-bg: var(--theme-elevation-0);
@@ -111,12 +106,12 @@ body {
 }
 
 ::selection {
-  background: var(--theme-success-500);
+  background: var(--color-success-250);
   color: var(--theme-base-800);
 }
 
 ::-moz-selection {
-  background: var(--theme-success-500);
+  background: var(--color-success-250);
   color: var(--theme-base-800);
 }
 

package/dist/scss/toastify.scss

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

package/dist/scss/toasts.scss

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

package/dist/scss/type.scss

@@ -15,17 +15,10 @@
   font-weight: 500;
 }
 
-%jumbo {
-  font-size: base(2.5);
-  line-height: 1;
-  margin: 0 0 base(2);
-}
-
 %h1 {
   margin: 0 0 base(1);
-  font-size: base(2);
-  line-height: 1.15;
-  letter-spacing: -1px;
+  font-size: base(1.6);
+  line-height: base(1.8);
 
   @include small-break {
     letter-spacing: -0.5px;
@@ -35,9 +28,8 @@
 
 %h2 {
   margin: 0 0 base(1);
-  font-size: base(1.25);
-  line-height: 1.15;
-  letter-spacing: -0.5px;
+  font-size: base(1.3);
+  line-height: base(1.6);
 
   @include small-break {
     font-size: base(0.85);
@@ -46,9 +38,8 @@
 
 %h3 {
   margin: 0 0 base(1);
-  font-size: base(0.925);
-  line-height: 1.25;
-  letter-spacing: -0.5px;
+  font-size: base(1);
+  line-height: base(1.2);
 
   @include small-break {
     font-size: base(0.65);
@@ -58,27 +49,27 @@
 
 %h4 {
   margin: 0 0 $baseline;
-  font-size: base(0.75);
-  line-height: 1.5;
+  font-size: base(0.8);
+  line-height: base(1);
   letter-spacing: -0.375px;
 }
 
 %h5 {
   margin: 0;
-  font-size: base(0.5625);
-  line-height: 1.5;
+  font-size: base(0.65);
+  line-height: base(0.8);
 }
 
 %h6 {
   margin: 0;
-  font-size: base(0.5);
-  line-height: 1.5;
+  font-size: base(0.6);
+  line-height: base(0.8);
 }
 
 %small {
   margin: 0;
-  font-size: 11px;
-  line-height: 1.5;
+  font-size: 12px;
+  line-height: 20px;
 }
 
 /////////////////////////////

package/dist/scss/vars.scss

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

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,EAAE,SAAS,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAclE,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,CA4DA,CAAA"}

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

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ConfirmPasswordField, Form, FormSubmit, PasswordField, RenderFields, useComponentMap, 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 })=>{
+import { RenderEmailAndUsernameFields } from '../../elements/EmailAndUsername/index.js';
+export const CreateFirstUserClient = ({ initialState, loginWithUsername, userSlug })=>{
     const { getFieldMap } = useComponentMap();
     const { routes: { admin, api: apiRoute }, serverURL } = useConfig();
     const { t } = useTranslation();
@@ -35,18 +35,11 @@ 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, {
                 label: t('authentication:newPassword'),
@@ -64,6 +57,7 @@ export const CreateFirstUserClient = ({ initialState, loginType, requireEmail =
                 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      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      {['emailOrUsername', 'username'].includes(loginType) && <LoginField type=\"username\" />}\n      {['email', 'emailOrUsername'].includes(loginType) && (\n        <LoginField required={requireEmail} type=\"email\" />\n      )}\n      <PasswordField\n        label={t('authentication:newPassword')}\n        name=\"password\"\n        path=\"password\"\n        required\n      />\n      <ConfirmPasswordField />\n      <RenderFields\n        fieldMap={fieldMap}\n        forceRender\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","label","name","path","forceRender","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,GACjCpB,aAAa;YACXY;YACAS,MAAM;gBACJL,gBAAgBT;gBAChBY,WAAWC;gBACXE,WAAW;gBACXC,YAAY,CAAC,CAAC,EAAEhB,SAAS,KAAK,CAAC;YACjC;YACAM;QACF,IACF;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,OAAOjB,EAAE;gBACTkB,MAAK;gBACLC,MAAK;gBACLH,QAAQ;;0BAEV,KAACtC;0BACD,KAACI;gBACCmB,UAAUA;gBACVmB,WAAW;gBACXZ,WAAU;gBACVW,MAAK;gBACLE,UAAU;gBACVZ,YAAYhB;;0BAEd,KAACb;0BAAYoB,EAAE;;;;AAGrB,EAAC"}
+{"version":3,"sources":["../../../src/views/CreateFirstUser/index.client.tsx"],"sourcesContent":["'use client'\nimport type { FormState, LoginWithUsernameOptions } 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 { 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 { 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      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        label={t('authentication:newPassword')}\n        name=\"password\"\n        path=\"password\"\n        required\n      />\n      <ConfirmPasswordField />\n      <RenderFields\n        fieldMap={fieldMap}\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","useComponentMap","useConfig","useTranslation","getFormState","React","RenderEmailAndUsernameFields","CreateFirstUserClient","initialState","loginWithUsername","userSlug","getFieldMap","routes","admin","api","apiRoute","serverURL","t","fieldMap","collectionSlug","onChange","useCallback","formState","prevFormState","body","operation","schemaPath","action","method","redirect","validationOperation","className","readOnly","label","name","path","required","forceRender","size"],"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,4BAA4B,QAAQ,2CAA0C;AAEvF,OAAO,MAAMC,wBAIR,CAAC,EAAEC,YAAY,EAAEC,iBAAiB,EAAEC,QAAQ,EAAE;IACjD,MAAM,EAAEC,WAAW,EAAE,GAAGV;IAExB,MAAM,EACJW,QAAQ,EAAEC,KAAK,EAAEC,KAAKC,QAAQ,EAAE,EAChCC,SAAS,EACV,GAAGd;IAEJ,MAAM,EAAEe,CAAC,EAAE,GAAGd;IAEd,MAAMe,WAAWP,YAAY;QAAEQ,gBAAgBT;IAAS;IAExD,MAAMU,WAAqCf,MAAMgB,WAAW,CAC1D,OAAO,EAAEC,WAAWC,aAAa,EAAE,GACjCnB,aAAa;YACXW;YACAS,MAAM;gBACJL,gBAAgBT;gBAChBY,WAAWC;gBACXE,WAAW;gBACXC,YAAY,CAAC,CAAC,EAAEhB,SAAS,KAAK,CAAC;YACjC;YACAM;QACF,IACF;QAACD;QAAUL;QAAUM;KAAU;IAGjC,qBACE,MAACnB;QACC8B,QAAQ,CAAC,EAAEX,UAAU,EAAED,SAAS,CAAC,EAAEL,SAAS,eAAe,CAAC;QAC5DF,cAAcA;QACdoB,QAAO;QACPR,UAAU;YAACA;SAAS;QACpBS,UAAUhB;QACViB,qBAAoB;;0BAEpB,KAACxB;gBACCyB,WAAU;gBACVtB,mBAAmBA;gBACnBgB,WAAU;gBACVO,UAAU;;0BAEZ,KAACjC;gBACCkC,OAAOhB,EAAE;gBACTiB,MAAK;gBACLC,MAAK;gBACLC,QAAQ;;0BAEV,KAACxC;0BACD,KAACI;gBACCkB,UAAUA;gBACVmB,WAAW;gBACXZ,WAAU;gBACVU,MAAK;gBACLH,UAAU;gBACVN,YAAYhB;;0BAEd,KAACZ;gBAAWwC,MAAK;0BAASrB,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,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,CA2CxD,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

@@ -8,11 +8,6 @@ export const CreateFirstUserView = async ({ initPageResult })=>{
     const collectionConfig = config.collections?.find((collection)=>collection?.slug === userSlug);
     const { auth: authOptions } = collectionConfig;
     const loginWithUsername = authOptions.loginWithUsername;
-    const emailRequired = loginWithUsername && loginWithUsername.requireEmail;
-    let loginType = loginWithUsername ? 'username' : 'email';
-    if (loginWithUsername && (loginWithUsername.allowEmailLogin || loginWithUsername.requireEmail)) {
-        loginType = 'emailOrUsername';
-    }
     const { formState } = await getDocumentData({
         collectionConfig,
         locale,
@@ -30,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 } 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  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 { 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        loginType={loginType}\n        requireEmail={emailRequired}\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","emailRequired","requireEmail","loginType","allowEmailLogin","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;IACvD,MAAMC,gBAAgBD,qBAAqBA,kBAAkBE,YAAY;IAEzE,IAAIC,YAAqCH,oBAAoB,aAAa;IAC1E,IAAIA,qBAAsBA,CAAAA,kBAAkBI,eAAe,IAAIJ,kBAAkBE,YAAY,AAAD,GAAI;QAC9FC,YAAY;IACd;IAEA,MAAM,EAAEE,SAAS,EAAE,GAAG,MAAMxB,gBAAgB;QAC1CY;QACAP;QACAC;QACAmB,YAAY,CAAC,CAAC,EAAEb,iBAAiBI,IAAI,CAAC,KAAK,CAAC;IAC9C;IAEA,qBACE,MAACU;QAAIC,WAAU;;0BACb,KAACC;0BAAItB,IAAIuB,CAAC,CAAC;;0BACX,KAACC;0BAAGxB,IAAIuB,CAAC,CAAC;;0BACV,KAAC5B;gBACC8B,cAAcP;gBACdF,WAAWA;gBACXD,cAAcD;gBACdT,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);
+}