@payloadcms/next 4.0.0-internal.38b7f1d → 4.0.0-internal.5f0cd13

package/dist/views/Unauthorized/index.d.ts

@@ -1,6 +1,6 @@
 import type { AdminViewServerProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare function UnauthorizedView({ initPageResult }: AdminViewServerProps): React.JSX.Element;
 export declare const UnauthorizedViewWithGutter: (props: AdminViewServerProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Unauthorized/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAInD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAIrB,wBAAgB,gBAAgB,CAAC,EAAE,cAAc,EAAE,EAAE,oBAAoB,qBAsCxE;AAED,eAAO,MAAM,0BAA0B,UAAW,oBAAoB,sBAMrE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Unauthorized/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAGnD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,wBAAgB,gBAAgB,CAAC,EAAE,cAAc,EAAE,EAAE,oBAAoB,qBAaxE;AAED,eAAO,MAAM,0BAA0B,GAAI,OAAO,oBAAoB,sBAMrE,CAAA"}

package/dist/views/Unauthorized/index.js

@@ -1,51 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Gutter } from '@payloadcms/ui';
-import { formatAdminURL } from 'payload/shared';
+import { Gutter } from '@payloadcms/ui';
 import React from 'react';
-import { FormHeader } from '../../elements/FormHeader/index.js';
 const baseClass = 'unauthorized';
 export function UnauthorizedView({
   initPageResult
 }) {
   const {
-    permissions,
     req: {
-      i18n,
-      payload: {
-        config: {
-          admin: {
-            routes: {
-              logout: logoutRoute
-            }
-          },
-          routes: {
-            admin: adminRoute
-          }
-        }
-      },
-      user
+      i18n
     }
   } = initPageResult;
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: baseClass,
-    children: [/*#__PURE__*/_jsx(FormHeader, {
-      description: i18n.t('error:notAllowedToAccessPage'),
-      heading: i18n.t(user && !permissions.canAccessAdmin ? 'error:unauthorizedAdmin' : 'error:unauthorized')
-    }), /*#__PURE__*/_jsx(Button, {
-      className: `${baseClass}__button`,
-      el: "link",
-      size: "large",
-      to: formatAdminURL({
-        adminRoute,
-        path: logoutRoute
-      }),
-      children: i18n.t('authentication:logOut')
-    })]
+    children: /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__content`,
+      children: [/*#__PURE__*/_jsx("h1", {
+        children: i18n.t('general:unauthorized')
+      }), /*#__PURE__*/_jsx("p", {
+        children: i18n.t('error:notAllowedToAccessPage')
+      })]
+    })
   });
 }
 export const UnauthorizedViewWithGutter = props => {
   return /*#__PURE__*/_jsx(Gutter, {
-    className: [baseClass, `${baseClass}--with-gutter`].join(' '),
+    className: `${baseClass}--with-gutter`,
     children: /*#__PURE__*/_jsx(UnauthorizedView, {
       ...props
     })

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Button","Gutter","formatAdminURL","React","FormHeader","baseClass","UnauthorizedView","initPageResult","permissions","req","i18n","payload","config","admin","routes","logout","logoutRoute","adminRoute","user","_jsxs","className","_jsx","description","t","heading","canAccessAdmin","el","size","to","path","UnauthorizedViewWithGutter","props","join"],"sources":["../../../src/views/Unauthorized/index.tsx"],"sourcesContent":["import type { AdminViewServerProps } from 'payload'\n\nimport { Button, Gutter } from '@payloadcms/ui'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport { FormHeader } from '../../elements/FormHeader/index.js'\nimport './index.scss'\n\nconst baseClass = 'unauthorized'\n\nexport function UnauthorizedView({ initPageResult }: AdminViewServerProps) {\n  const {\n    permissions,\n    req: {\n      i18n,\n      payload: {\n        config: {\n          admin: {\n            routes: { logout: logoutRoute },\n          },\n          routes: { admin: adminRoute },\n        },\n      },\n      user,\n    },\n  } = initPageResult\n\n  return (\n    <div className={baseClass}>\n      <FormHeader\n        description={i18n.t('error:notAllowedToAccessPage')}\n        heading={i18n.t(\n          user && !permissions.canAccessAdmin ? 'error:unauthorizedAdmin' : 'error:unauthorized',\n        )}\n      />\n      <Button\n        className={`${baseClass}__button`}\n        el=\"link\"\n        size=\"large\"\n        to={formatAdminURL({\n          adminRoute,\n          path: logoutRoute,\n        })}\n      >\n        {i18n.t('authentication:logOut')}\n      </Button>\n    </div>\n  )\n}\n\nexport const UnauthorizedViewWithGutter = (props: AdminViewServerProps) => {\n  return (\n    <Gutter className={[baseClass, `${baseClass}--with-gutter`].join(' ')}>\n      <UnauthorizedView {...props} />\n    </Gutter>\n  )\n}\n"],"mappings":";AAEA,SAASA,MAAM,EAAEC,MAAM,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAG3B,MAAMC,SAAA,GAAY;AAElB,OAAO,SAASC,iBAAiB;EAAEC;AAAc,CAAwB;EACvE,MAAM;IACJC,WAAW;IACXC,GAAA,EAAK;MACHC,IAAI;MACJC,OAAA,EAAS;QACPC,MAAA,EAAQ;UACNC,KAAA,EAAO;YACLC,MAAA,EAAQ;cAAEC,MAAA,EAAQC;YAAW;UAAE,CAChC;UACDF,MAAA,EAAQ;YAAED,KAAA,EAAOI;UAAU;QAAE;MAC9B,CACF;MACDC;IAAI;EACL,CACF,GAAGX,cAAA;EAEJ,oBACEY,KAAA,CAAC;IAAIC,SAAA,EAAWf,SAAA;4BACdgB,IAAA,CAACjB,UAAA;MACCkB,WAAA,EAAaZ,IAAA,CAAKa,CAAC,CAAC;MACpBC,OAAA,EAASd,IAAA,CAAKa,CAAC,CACbL,IAAA,IAAQ,CAACV,WAAA,CAAYiB,cAAc,GAAG,4BAA4B;qBAGtEJ,IAAA,CAACrB,MAAA;MACCoB,SAAA,EAAW,GAAGf,SAAA,UAAmB;MACjCqB,EAAA,EAAG;MACHC,IAAA,EAAK;MACLC,EAAA,EAAI1B,cAAA,CAAe;QACjBe,UAAA;QACAY,IAAA,EAAMb;MACR;gBAECN,IAAA,CAAKa,CAAC,CAAC;;;AAIhB;AAEA,OAAO,MAAMO,0BAAA,GAA8BC,KAAA;EACzC,oBACEV,IAAA,CAACpB,MAAA;IAAOmB,SAAA,EAAW,CAACf,SAAA,EAAW,GAAGA,SAAA,eAAwB,CAAC,CAAC2B,IAAI,CAAC;cAC/D,aAAAX,IAAA,CAACf,gBAAA;MAAkB,GAAGyB;;;AAG5B","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Gutter","React","baseClass","UnauthorizedView","initPageResult","req","i18n","_jsx","className","_jsxs","t","UnauthorizedViewWithGutter","props"],"sources":["../../../src/views/Unauthorized/index.tsx"],"sourcesContent":["import type { AdminViewServerProps } from 'payload'\n\nimport { Gutter } from '@payloadcms/ui'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'unauthorized'\n\nexport function UnauthorizedView({ initPageResult }: AdminViewServerProps) {\n  const {\n    req: { i18n },\n  } = initPageResult\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__content`}>\n        <h1>{i18n.t('general:unauthorized')}</h1>\n        <p>{i18n.t('error:notAllowedToAccessPage')}</p>\n      </div>\n    </div>\n  )\n}\n\nexport const UnauthorizedViewWithGutter = (props: AdminViewServerProps) => {\n  return (\n    <Gutter className={`${baseClass}--with-gutter`}>\n      <UnauthorizedView {...props} />\n    </Gutter>\n  )\n}\n"],"mappings":";AAEA,SAASA,MAAM,QAAQ;AACvB,OAAOC,KAAA,MAAW;AAIlB,MAAMC,SAAA,GAAY;AAElB,OAAO,SAASC,iBAAiB;EAAEC;AAAc,CAAwB;EACvE,MAAM;IACJC,GAAA,EAAK;MAAEC;IAAI;EAAE,CACd,GAAGF,cAAA;EAEJ,oBACEG,IAAA,CAAC;IAAIC,SAAA,EAAWN,SAAA;cACd,aAAAO,KAAA,CAAC;MAAID,SAAA,EAAW,GAAGN,SAAA,WAAoB;8BACrCK,IAAA,CAAC;kBAAID,IAAA,CAAKI,CAAC,CAAC;uBACZH,IAAA,CAAC;kBAAGD,IAAA,CAAKI,CAAC,CAAC;;;;AAInB;AAEA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA;EACzC,oBACEL,IAAA,CAACP,MAAA;IAAOQ,SAAA,EAAW,GAAGN,SAAA,eAAwB;cAC5C,aAAAK,IAAA,CAACJ,gBAAA;MAAkB,GAAGS;;;AAG5B","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Verify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAGnD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,eAAe,WAAW,CAAA;AAEvC,wBAAsB,MAAM,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,oBAAoB,8BA0D1F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Verify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAInD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,eAAe,WAAW,CAAA;AAEvC,wBAAsB,MAAM,CAAC,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,oBAAoB,8BA2D1F"}

package/dist/views/Verify/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Logo } from '@payloadcms/ui/rsc';
 import { formatAdminURL } from 'payload/shared';
 import React from 'react';
-import { Logo } from '../../elements/Logo/index.js';
 import { ToastAndRedirect } from './index.client.js';
 export const verifyBaseClass = 'verify';
 export async function Verify({
@@ -61,6 +61,7 @@ export async function Verify({
         payload: payload,
         permissions: permissions,
         searchParams: searchParams,
+        server: req.server,
         user: user
       })
     }), /*#__PURE__*/_jsx("h2", {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["formatAdminURL","React","Logo","ToastAndRedirect","verifyBaseClass","Verify","initPageResult","params","searchParams","collectionSlug","verify","token","segments","locale","permissions","req","i18n","payload","config","user","routes","admin","adminRoute","serverURL","textToRender","isVerified","verifyEmail","collection","t","e","_jsx","message","redirectTo","path","_jsxs","Fragment","className"],"sources":["../../../src/views/Verify/index.tsx"],"sourcesContent":["import type { AdminViewServerProps } from 'payload'\n\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport { Logo } from '../../elements/Logo/index.js'\nimport { ToastAndRedirect } from './index.client.js'\nimport './index.scss'\n\nexport const verifyBaseClass = 'verify'\n\nexport async function Verify({ initPageResult, params, searchParams }: AdminViewServerProps) {\n  // /:collectionSlug/verify/:token\n\n  const [collectionSlug, verify, token] = params.segments\n  const { locale, permissions, req } = initPageResult\n\n  const {\n    i18n,\n    payload: { config },\n    payload,\n    user,\n  } = req\n\n  const {\n    routes: { admin: adminRoute },\n    serverURL,\n  } = config\n\n  let textToRender\n  let isVerified = false\n\n  try {\n    await req.payload.verifyEmail({\n      collection: collectionSlug,\n      token,\n    })\n\n    isVerified = true\n    textToRender = req.t('authentication:emailVerified')\n  } catch (e) {\n    textToRender = req.t('authentication:unableToVerify')\n  }\n\n  if (isVerified) {\n    return (\n      <ToastAndRedirect\n        message={req.t('authentication:emailVerified')}\n        redirectTo={formatAdminURL({ adminRoute, path: '/login' })}\n      />\n    )\n  }\n\n  return (\n    <React.Fragment>\n      <div className={`${verifyBaseClass}__brand`}>\n        <Logo\n          i18n={i18n}\n          locale={locale}\n          params={params}\n          payload={payload}\n          permissions={permissions}\n          searchParams={searchParams}\n          user={user}\n        />\n      </div>\n      <h2>{textToRender}</h2>\n    </React.Fragment>\n  )\n}\n"],"mappings":";AAEA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,IAAI,QAAQ;AACrB,SAASC,gBAAgB,QAAQ;AAGjC,OAAO,MAAMC,eAAA,GAAkB;AAE/B,OAAO,eAAeC,OAAO;EAAEC,cAAc;EAAEC,MAAM;EAAEC;AAAY,CAAwB;EACzF;EAEA,MAAM,CAACC,cAAA,EAAgBC,MAAA,EAAQC,KAAA,CAAM,GAAGJ,MAAA,CAAOK,QAAQ;EACvD,MAAM;IAAEC,MAAM;IAAEC,WAAW;IAAEC;EAAG,CAAE,GAAGT,cAAA;EAErC,MAAM;IACJU,IAAI;IACJC,OAAA,EAAS;MAAEC;IAAM,CAAE;IACnBD,OAAO;IACPE;EAAI,CACL,GAAGJ,GAAA;EAEJ,MAAM;IACJK,MAAA,EAAQ;MAAEC,KAAA,EAAOC;IAAU,CAAE;IAC7BC;EAAS,CACV,GAAGL,MAAA;EAEJ,IAAIM,YAAA;EACJ,IAAIC,UAAA,GAAa;EAEjB,IAAI;IACF,MAAMV,GAAA,CAAIE,OAAO,CAACS,WAAW,CAAC;MAC5BC,UAAA,EAAYlB,cAAA;MACZE;IACF;IAEAc,UAAA,GAAa;IACbD,YAAA,GAAeT,GAAA,CAAIa,CAAC,CAAC;EACvB,EAAE,OAAOC,CAAA,EAAG;IACVL,YAAA,GAAeT,GAAA,CAAIa,CAAC,CAAC;EACvB;EAEA,IAAIH,UAAA,EAAY;IACd,oBACEK,IAAA,CAAC3B,gBAAA;MACC4B,OAAA,EAAShB,GAAA,CAAIa,CAAC,CAAC;MACfI,UAAA,EAAYhC,cAAA,CAAe;QAAEsB,UAAA;QAAYW,IAAA,EAAM;MAAS;;EAG9D;EAEA,oBACEC,KAAA,CAACjC,KAAA,CAAMkC,QAAQ;4BACbL,IAAA,CAAC;MAAIM,SAAA,EAAW,GAAGhC,eAAA,SAAwB;gBACzC,aAAA0B,IAAA,CAAC5B,IAAA;QACCc,IAAA,EAAMA,IAAA;QACNH,MAAA,EAAQA,MAAA;QACRN,MAAA,EAAQA,MAAA;QACRU,OAAA,EAASA,OAAA;QACTH,WAAA,EAAaA,WAAA;QACbN,YAAA,EAAcA,YAAA;QACdW,IAAA,EAAMA;;qBAGVW,IAAA,CAAC;gBAAIN;;;AAGX","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Logo","formatAdminURL","React","ToastAndRedirect","verifyBaseClass","Verify","initPageResult","params","searchParams","collectionSlug","verify","token","segments","locale","permissions","req","i18n","payload","config","user","routes","admin","adminRoute","serverURL","textToRender","isVerified","verifyEmail","collection","t","e","_jsx","message","redirectTo","path","_jsxs","Fragment","className","server"],"sources":["../../../src/views/Verify/index.tsx"],"sourcesContent":["import type { AdminViewServerProps } from 'payload'\n\nimport { Logo } from '@payloadcms/ui/rsc'\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport { ToastAndRedirect } from './index.client.js'\nimport './index.scss'\n\nexport const verifyBaseClass = 'verify'\n\nexport async function Verify({ initPageResult, params, searchParams }: AdminViewServerProps) {\n  // /:collectionSlug/verify/:token\n\n  const [collectionSlug, verify, token] = params.segments\n  const { locale, permissions, req } = initPageResult\n\n  const {\n    i18n,\n    payload: { config },\n    payload,\n    user,\n  } = req\n\n  const {\n    routes: { admin: adminRoute },\n    serverURL,\n  } = config\n\n  let textToRender\n  let isVerified = false\n\n  try {\n    await req.payload.verifyEmail({\n      collection: collectionSlug,\n      token,\n    })\n\n    isVerified = true\n    textToRender = req.t('authentication:emailVerified')\n  } catch (e) {\n    textToRender = req.t('authentication:unableToVerify')\n  }\n\n  if (isVerified) {\n    return (\n      <ToastAndRedirect\n        message={req.t('authentication:emailVerified')}\n        redirectTo={formatAdminURL({ adminRoute, path: '/login' })}\n      />\n    )\n  }\n\n  return (\n    <React.Fragment>\n      <div className={`${verifyBaseClass}__brand`}>\n        <Logo\n          i18n={i18n}\n          locale={locale}\n          params={params}\n          payload={payload}\n          permissions={permissions}\n          searchParams={searchParams}\n          server={req.server}\n          user={user}\n        />\n      </div>\n      <h2>{textToRender}</h2>\n    </React.Fragment>\n  )\n}\n"],"mappings":";AAEA,SAASA,IAAI,QAAQ;AACrB,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,gBAAgB,QAAQ;AAGjC,OAAO,MAAMC,eAAA,GAAkB;AAE/B,OAAO,eAAeC,OAAO;EAAEC,cAAc;EAAEC,MAAM;EAAEC;AAAY,CAAwB;EACzF;EAEA,MAAM,CAACC,cAAA,EAAgBC,MAAA,EAAQC,KAAA,CAAM,GAAGJ,MAAA,CAAOK,QAAQ;EACvD,MAAM;IAAEC,MAAM;IAAEC,WAAW;IAAEC;EAAG,CAAE,GAAGT,cAAA;EAErC,MAAM;IACJU,IAAI;IACJC,OAAA,EAAS;MAAEC;IAAM,CAAE;IACnBD,OAAO;IACPE;EAAI,CACL,GAAGJ,GAAA;EAEJ,MAAM;IACJK,MAAA,EAAQ;MAAEC,KAAA,EAAOC;IAAU,CAAE;IAC7BC;EAAS,CACV,GAAGL,MAAA;EAEJ,IAAIM,YAAA;EACJ,IAAIC,UAAA,GAAa;EAEjB,IAAI;IACF,MAAMV,GAAA,CAAIE,OAAO,CAACS,WAAW,CAAC;MAC5BC,UAAA,EAAYlB,cAAA;MACZE;IACF;IAEAc,UAAA,GAAa;IACbD,YAAA,GAAeT,GAAA,CAAIa,CAAC,CAAC;EACvB,EAAE,OAAOC,CAAA,EAAG;IACVL,YAAA,GAAeT,GAAA,CAAIa,CAAC,CAAC;EACvB;EAEA,IAAIH,UAAA,EAAY;IACd,oBACEK,IAAA,CAAC3B,gBAAA;MACC4B,OAAA,EAAShB,GAAA,CAAIa,CAAC,CAAC;MACfI,UAAA,EAAY/B,cAAA,CAAe;QAAEqB,UAAA;QAAYW,IAAA,EAAM;MAAS;;EAG9D;EAEA,oBACEC,KAAA,CAAChC,KAAA,CAAMiC,QAAQ;4BACbL,IAAA,CAAC;MAAIM,SAAA,EAAW,GAAGhC,eAAA,SAAwB;gBACzC,aAAA0B,IAAA,CAAC9B,IAAA;QACCgB,IAAA,EAAMA,IAAA;QACNH,MAAA,EAAQA,MAAA;QACRN,MAAA,EAAQA,MAAA;QACRU,OAAA,EAASA,OAAA;QACTH,WAAA,EAAaA,WAAA;QACbN,YAAA,EAAcA,YAAA;QACd6B,MAAA,EAAQtB,GAAA,CAAIsB,MAAM;QAClBlB,IAAA,EAAMA;;qBAGVW,IAAA,CAAC;gBAAIN;;;AAGX","ignoreList":[]}

package/dist/views/Version/Default/index.css

@@ -0,0 +1,227 @@
+@layer payload-default {
+  .view-version {
+    width: 100%;
+    padding-bottom: var(--spacing-view-bottom);
+  }
+
+  .view-version__toggle-locales-label {
+    color: var(--color-text-secondary);
+  }
+
+  .view-version-controls-top {
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    padding: var(--spacer-2) var(--spacer-4);
+  }
+
+  .view-version-controls-top__wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .view-version-controls-top__wrapper-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacer-4);
+  }
+
+  .view-version-controls-top h2 {
+    color: var(--color-text);
+    font-family: var(--text-body-large-strong-font-family);
+    font-size: var(--text-body-large-strong-font-size);
+    font-style: normal;
+    font-weight: var(--text-body-large-strong-font-weight);
+    line-height: var(--text-body-large-strong-line-height);
+    letter-spacing: var(--text-body-large-strong-letter-spacing);
+  }
+
+  .view-version-controls-bottom {
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    padding: var(--spacer-2-5) var(--spacer-4);
+    position: relative;
+
+    /* Vertical separator line */
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: var(--stroke-width-small);
+      background-color: var(--color-border);
+      transform: translateX(-50%);
+    }
+  }
+
+  .view-version-controls-bottom__wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--spacer-4);
+  }
+
+  .view-version__time-elapsed {
+    color: var(--color-text-secondary);
+    font-weight: var(--text-body-medium-font-weight);
+  }
+
+  .view-version__version-from,
+  .view-version__version-to {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+  }
+
+  .view-version__version-from-labels,
+  .view-version__version-to-labels {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    color: var(--color-text);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-style: normal;
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .view-version__version-to-version {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-medium);
+    padding: var(--spacer-1) var(--spacer-2);
+    gap: var(--spacer-2);
+  }
+
+  .view-version__version-to-version h2 {
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .view-version__restore div {
+    margin-block: 0;
+  }
+
+  .view-version__modifiedCheckBox {
+    margin: 0 0 0 var(--spacer-4);
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    color: var(--color-text);
+    text-overflow: ellipsis;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-style: normal;
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .view-version__modifiedCheckBox label.field-label {
+    font-weight: var(--text-body-medium-font-weight);
+  }
+
+  .compare-version .rs__control {
+    padding: var(--spacer-2);
+  }
+
+  .view-version__diff-wrap {
+    padding: var(--spacer-3) var(--spacer-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+    position: relative;
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+
+    /* Vertical separator line */
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: var(--stroke-width-small);
+      background-color: var(--color-border);
+      transform: translateX(-50%);
+      z-index: 2;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .view-version__version-to-version {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .view-version {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .view-version__version-to-version {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    /* Reorder: controls-bottom first, controls-top (checkbox) second, diff last */
+    .view-version-controls-bottom {
+      order: 1;
+      padding-inline: var(--spacer-3);
+
+      /* Hide vertical separator on mobile */
+      &::after {
+        display: none;
+      }
+    }
+
+    .view-version-controls-top {
+      order: 2;
+      padding-inline: var(--spacer-3);
+    }
+
+    .view-version__diff-wrap {
+      order: 3;
+      padding: var(--spacer-3);
+
+      /* Hide vertical separator on mobile */
+      &::after {
+        display: none;
+      }
+    }
+
+    /* Hide title on mobile */
+    .view-version-controls-top h2 {
+      display: none;
+    }
+
+    /* Checkbox: remove left margin */
+    .view-version-controls-top__wrapper .view-version__modifiedCheckBox {
+      margin-left: 0;
+    }
+
+    .view-version-controls-top__wrapper-actions {
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    /* Single column for version selectors */
+    .view-version-controls-bottom__wrapper {
+      grid-template-columns: 1fr;
+      gap: var(--spacer-3);
+    }
+  }
+}

package/dist/views/Version/Default/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { DefaultVersionsViewProps } from './types.js';
-import './index.scss';
+import './index.css';
 export declare const DefaultVersionView: React.FC<DefaultVersionsViewProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/Default/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAA2E,MAAM,OAAO,CAAA;AAE/F,OAAO,KAAK,EAAiB,wBAAwB,EAAE,MAAM,YAAY,CAAA;AAGzE,OAAO,cAAc,CAAA;AAQrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA+PjE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Version/Default/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAA2E,MAAM,OAAO,CAAA;AAE/F,OAAO,KAAK,EAAiB,wBAAwB,EAAE,MAAM,YAAY,CAAA;AAGzE,OAAO,aAAa,CAAA;AAQpB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAqQjE,CAAA"}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckboxInput, ChevronIcon, formatTimeToNow, Gutter, Pill, useConfig, useDocumentInfo, useLocale, useRouteTransition, useTranslation } from '@payloadcms/ui';
+import { Button, CheckboxInput, ChevronIcon, formatTimeToNow, useConfig, useDocumentInfo, useLocale, useRouteTransition, useTranslation } from '@payloadcms/ui';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation.js';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Restore } from '../Restore/index.js';
@@ -143,9 +143,13 @@ export const DefaultVersionView = ({
       i18n
     })
   }) : undefined, [versionFromCreatedAt, i18n, t]);
+  const selectedLocaleNames = useMemo(() => locales.map(locale_1 => locale_1.name), [locales]);
+  const selectedLocalesContextValue = useMemo(() => ({
+    selectedLocales: selectedLocaleNames
+  }), [selectedLocaleNames]);
   return /*#__PURE__*/_jsxs("main", {
     className: baseClass,
-    children: [/*#__PURE__*/_jsxs(Gutter, {
+    children: [/*#__PURE__*/_jsxs("div", {
       className: `${baseClass}-controls-top`,
       children: [/*#__PURE__*/_jsxs("div", {
         className: `${baseClass}-controls-top__wrapper`,
@@ -161,22 +165,22 @@ export const DefaultVersionView = ({
               label: i18n.t('version:modifiedOnly'),
               onToggle: onToggleModifiedOnly
             })
-          }), localization && /*#__PURE__*/_jsxs(Pill, {
+          }), localization && /*#__PURE__*/_jsxs(Button, {
             "aria-controls": `${baseClass}-locales`,
             "aria-expanded": localeSelectorOpen,
+            buttonStyle: "pill",
             className: `${baseClass}__toggle-locales`,
             icon: /*#__PURE__*/_jsx(ChevronIcon, {
               direction: localeSelectorOpen ? 'up' : 'down'
             }),
             onClick: () => setLocaleSelectorOpen(localeSelectorOpen_0 => !localeSelectorOpen_0),
-            pillStyle: "light",
-            size: "small",
+            size: "medium",
             children: [/*#__PURE__*/_jsxs("span", {
               className: `${baseClass}__toggle-locales-label`,
               children: [t('general:locales'), ":", ' ']
             }), /*#__PURE__*/_jsx("span", {
               className: `${baseClass}__toggle-locales-list`,
-              children: locales.filter(locale_1 => locale_1.selected).map(locale_2 => locale_2.name).join(', ')
+              children: locales.filter(locale_2 => locale_2.selected).map(locale_3 => locale_3.name).join(', ')
             })]
           })]
         })]
@@ -185,7 +189,7 @@ export const DefaultVersionView = ({
         localeSelectorOpen: localeSelectorOpen,
         onChange: onChangeSelectedLocales
       })]
-    }), /*#__PURE__*/_jsx(Gutter, {
+    }), /*#__PURE__*/_jsx("div", {
       className: `${baseClass}-controls-bottom`,
       children: /*#__PURE__*/_jsxs("div", {
         className: `${baseClass}-controls-bottom__wrapper`,
@@ -239,12 +243,10 @@ export const DefaultVersionView = ({
       isTrashed: isTrashed,
       versionToCreatedAtFormatted: versionToCreatedAtFormatted,
       versionToID: versionToID
-    }), /*#__PURE__*/_jsx(Gutter, {
+    }), /*#__PURE__*/_jsx("div", {
       className: `${baseClass}__diff-wrap`,
       children: /*#__PURE__*/_jsx(SelectedLocalesContext, {
-        value: {
-          selectedLocales: locales.map(locale_3 => locale_3.name)
-        },
+        value: selectedLocalesContextValue,
         children: versionToCreatedAt && RenderedDiff
       })
     })]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CheckboxInput","ChevronIcon","formatTimeToNow","Gutter","Pill","useConfig","useDocumentInfo","useLocale","useRouteTransition","useTranslation","usePathname","useRouter","useSearchParams","React","useCallback","useEffect","useMemo","useState","Restore","SelectComparison","SelectLocales","SelectedLocalesContext","SetStepNav","baseClass","DefaultVersionView","canUpdate","modifiedOnly","modifiedOnlyProp","RenderedDiff","selectedLocales","selectedLocalesFromProps","versionFromCreatedAt","versionFromID","versionFromOptions","versionToCreatedAt","versionToCreatedAtFormatted","VersionToCreatedAtLabel","versionToID","versionToStatus","config","getEntityConfig","code","i18n","t","locales","setLocales","localeSelectorOpen","setLocaleSelectorOpen","localization","updatedLocales","map","locale","label","name","Label","selected","includes","id","originalDocID","collectionSlug","globalSlug","isTrashed","startRouteTransition","collectionConfig","globalConfig","router","pathname","searchParams","setModifiedOnly","updateSearchParams","args","current","URLSearchParams","Array","from","entries","set","length","delete","selectedLocaleCodes","push","JSON","stringify","search","toString","query","onToggleModifiedOnly","event","newModified","target","checked","onChangeSelectedLocales","onChangeVersionFrom","val","value","versionToTimeAgo","distance","date","versionFromTimeAgo","undefined","_jsxs","className","_jsx","onToggle","icon","direction","onClick","pillStyle","size","filter","join","onChange","docID","labels","singular","status","versionDateFormatted","versionID"],"sources":["../../../../src/views/Version/Default/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n  CheckboxInput,\n  ChevronIcon,\n  formatTimeToNow,\n  Gutter,\n  Pill,\n  type SelectablePill,\n  useConfig,\n  useDocumentInfo,\n  useLocale,\n  useRouteTransition,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation.js'\nimport React, { type FormEventHandler, useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { CompareOption, DefaultVersionsViewProps } from './types.js'\n\nimport { Restore } from '../Restore/index.js'\nimport './index.scss'\nimport { SelectComparison } from '../SelectComparison/index.js'\nimport { type SelectedLocaleOnChange, SelectLocales } from '../SelectLocales/index.js'\nimport { SelectedLocalesContext } from './SelectedLocalesContext.js'\nimport { SetStepNav } from './SetStepNav.js'\n\nconst baseClass = 'view-version'\n\nexport const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({\n  canUpdate,\n  modifiedOnly: modifiedOnlyProp,\n  RenderedDiff,\n  selectedLocales: selectedLocalesFromProps,\n  versionFromCreatedAt,\n  versionFromID,\n  versionFromOptions,\n  versionToCreatedAt,\n  versionToCreatedAtFormatted,\n  VersionToCreatedAtLabel,\n  versionToID,\n  versionToStatus,\n}) => {\n  const { config, getEntityConfig } = useConfig()\n  const { code } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  const [locales, setLocales] = useState<SelectablePill[]>([])\n  const [localeSelectorOpen, setLocaleSelectorOpen] = React.useState(false)\n\n  useEffect(() => {\n    if (config.localization) {\n      const updatedLocales = config.localization.locales.map((locale) => {\n        let label = locale.label\n        if (typeof locale.label !== 'string' && locale.label[code]) {\n          label = locale.label[code]\n        }\n\n        return {\n          name: locale.code,\n          Label: label,\n          selected: selectedLocalesFromProps.includes(locale.code),\n        } as SelectablePill\n      })\n      setLocales(updatedLocales)\n    }\n  }, [code, config.localization, selectedLocalesFromProps])\n\n  const { id: originalDocID, collectionSlug, globalSlug, isTrashed } = useDocumentInfo()\n  const { startRouteTransition } = useRouteTransition()\n\n  const { collectionConfig, globalConfig } = useMemo(() => {\n    return {\n      collectionConfig: getEntityConfig({ collectionSlug }),\n      globalConfig: getEntityConfig({ globalSlug }),\n    }\n  }, [collectionSlug, globalSlug, getEntityConfig])\n\n  const router = useRouter()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const [modifiedOnly, setModifiedOnly] = useState(modifiedOnlyProp)\n\n  const updateSearchParams = useCallback(\n    (args: {\n      modifiedOnly?: boolean\n      selectedLocales?: SelectablePill[]\n      versionFromID?: string\n    }) => {\n      // If the selected comparison doc or locales change, update URL params so that version page\n      // This is so that RSC can update the version comparison state\n      const current = new URLSearchParams(Array.from(searchParams.entries()))\n\n      if (args?.versionFromID) {\n        current.set('versionFrom', args?.versionFromID)\n      }\n\n      if (args?.selectedLocales) {\n        if (!args.selectedLocales.length) {\n          current.delete('localeCodes')\n        } else {\n          const selectedLocaleCodes: string[] = []\n          for (const locale of args.selectedLocales) {\n            if (locale.selected) {\n              selectedLocaleCodes.push(locale.name)\n            }\n          }\n          current.set('localeCodes', JSON.stringify(selectedLocaleCodes))\n        }\n      }\n\n      if (args?.modifiedOnly === false) {\n        current.set('modifiedOnly', 'false')\n      } else if (args?.modifiedOnly === true) {\n        current.delete('modifiedOnly')\n      }\n\n      const search = current.toString()\n      const query = search ? `?${search}` : ''\n\n      startRouteTransition(() => router.push(`${pathname}${query}`))\n    },\n    [pathname, router, searchParams, startRouteTransition],\n  )\n\n  const onToggleModifiedOnly: FormEventHandler<HTMLInputElement> = useCallback(\n    (event) => {\n      const newModified = (event.target as HTMLInputElement).checked\n      setModifiedOnly(newModified)\n      updateSearchParams({\n        modifiedOnly: newModified,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const onChangeSelectedLocales: SelectedLocaleOnChange = useCallback(\n    ({ locales }) => {\n      setLocales(locales)\n      updateSearchParams({\n        selectedLocales: locales,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const onChangeVersionFrom: (val: CompareOption) => void = useCallback(\n    (val) => {\n      updateSearchParams({\n        versionFromID: val.value,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const { localization } = config\n\n  const versionToTimeAgo = useMemo(\n    () =>\n      t('version:versionAgo', {\n        distance: formatTimeToNow({\n          date: versionToCreatedAt,\n          i18n,\n        }),\n      }),\n    [versionToCreatedAt, i18n, t],\n  )\n\n  const versionFromTimeAgo = useMemo(\n    () =>\n      versionFromCreatedAt\n        ? t('version:versionAgo', {\n            distance: formatTimeToNow({\n              date: versionFromCreatedAt,\n              i18n,\n            }),\n          })\n        : undefined,\n    [versionFromCreatedAt, i18n, t],\n  )\n\n  return (\n    <main className={baseClass}>\n      <Gutter className={`${baseClass}-controls-top`}>\n        <div className={`${baseClass}-controls-top__wrapper`}>\n          <h2>{i18n.t('version:compareVersions')}</h2>\n          <div className={`${baseClass}-controls-top__wrapper-actions`}>\n            <span className={`${baseClass}__modifiedCheckBox`}>\n              <CheckboxInput\n                checked={modifiedOnly}\n                id={'modifiedOnly'}\n                label={i18n.t('version:modifiedOnly')}\n                onToggle={onToggleModifiedOnly}\n              />\n            </span>\n            {localization && (\n              <Pill\n                aria-controls={`${baseClass}-locales`}\n                aria-expanded={localeSelectorOpen}\n                className={`${baseClass}__toggle-locales`}\n                icon={<ChevronIcon direction={localeSelectorOpen ? 'up' : 'down'} />}\n                onClick={() => setLocaleSelectorOpen((localeSelectorOpen) => !localeSelectorOpen)}\n                pillStyle=\"light\"\n                size=\"small\"\n              >\n                <span className={`${baseClass}__toggle-locales-label`}>\n                  {t('general:locales')}:{' '}\n                </span>\n                <span className={`${baseClass}__toggle-locales-list`}>\n                  {locales\n                    .filter((locale) => locale.selected)\n                    .map((locale) => locale.name)\n                    .join(', ')}\n                </span>\n              </Pill>\n            )}\n          </div>\n        </div>\n\n        {localization && (\n          <SelectLocales\n            locales={locales}\n            localeSelectorOpen={localeSelectorOpen}\n            onChange={onChangeSelectedLocales}\n          />\n        )}\n      </Gutter>\n      <Gutter className={`${baseClass}-controls-bottom`}>\n        <div className={`${baseClass}-controls-bottom__wrapper`}>\n          <div className={`${baseClass}__version-from`}>\n            <div className={`${baseClass}__version-from-labels`}>\n              <span>{t('version:comparingAgainst')}</span>\n              {versionFromTimeAgo && (\n                <span className={`${baseClass}__time-elapsed`}>{versionFromTimeAgo}</span>\n              )}\n            </div>\n            <SelectComparison\n              collectionSlug={collectionSlug}\n              docID={originalDocID}\n              globalSlug={globalSlug}\n              onChange={onChangeVersionFrom}\n              versionFromID={versionFromID}\n              versionFromOptions={versionFromOptions}\n            />\n          </div>\n\n          <div className={`${baseClass}__version-to`}>\n            <div className={`${baseClass}__version-to-labels`}>\n              <span>{t('version:currentlyViewing')}</span>\n              <span className={`${baseClass}__time-elapsed`}>{versionToTimeAgo}</span>\n            </div>\n            <div className={`${baseClass}__version-to-version`}>\n              {VersionToCreatedAtLabel}\n              {canUpdate && !isTrashed && (\n                <Restore\n                  className={`${baseClass}__restore`}\n                  collectionConfig={collectionConfig}\n                  globalConfig={globalConfig}\n                  label={collectionConfig?.labels.singular || globalConfig?.label}\n                  originalDocID={originalDocID}\n                  status={versionToStatus}\n                  versionDateFormatted={versionToCreatedAtFormatted}\n                  versionID={versionToID}\n                />\n              )}\n            </div>\n          </div>\n        </div>\n      </Gutter>\n      <SetStepNav\n        collectionConfig={collectionConfig}\n        globalConfig={globalConfig}\n        id={originalDocID}\n        isTrashed={isTrashed}\n        versionToCreatedAtFormatted={versionToCreatedAtFormatted}\n        versionToID={versionToID}\n      />\n      <Gutter className={`${baseClass}__diff-wrap`}>\n        <SelectedLocalesContext value={{ selectedLocales: locales.map((locale) => locale.name) }}>\n          {versionToCreatedAt && RenderedDiff}\n        </SelectedLocalesContext>\n      </Gutter>\n    </main>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Button","CheckboxInput","ChevronIcon","formatTimeToNow","useConfig","useDocumentInfo","useLocale","useRouteTransition","useTranslation","usePathname","useRouter","useSearchParams","React","useCallback","useEffect","useMemo","useState","Restore","SelectComparison","SelectLocales","SelectedLocalesContext","SetStepNav","baseClass","DefaultVersionView","canUpdate","modifiedOnly","modifiedOnlyProp","RenderedDiff","selectedLocales","selectedLocalesFromProps","versionFromCreatedAt","versionFromID","versionFromOptions","versionToCreatedAt","versionToCreatedAtFormatted","VersionToCreatedAtLabel","versionToID","versionToStatus","config","getEntityConfig","code","i18n","t","locales","setLocales","localeSelectorOpen","setLocaleSelectorOpen","localization","updatedLocales","map","locale","label","name","Label","selected","includes","id","originalDocID","collectionSlug","globalSlug","isTrashed","startRouteTransition","collectionConfig","globalConfig","router","pathname","searchParams","setModifiedOnly","updateSearchParams","args","current","URLSearchParams","Array","from","entries","set","length","delete","selectedLocaleCodes","push","JSON","stringify","search","toString","query","onToggleModifiedOnly","event","newModified","target","checked","onChangeSelectedLocales","onChangeVersionFrom","val","value","versionToTimeAgo","distance","date","versionFromTimeAgo","undefined","selectedLocaleNames","selectedLocalesContextValue","_jsxs","className","_jsx","onToggle","buttonStyle","icon","direction","onClick","size","filter","join","onChange","docID","labels","singular","status","versionDateFormatted","versionID"],"sources":["../../../../src/views/Version/Default/index.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Button,\n  CheckboxInput,\n  ChevronIcon,\n  formatTimeToNow,\n  Pill,\n  type SelectablePill,\n  useConfig,\n  useDocumentInfo,\n  useLocale,\n  useRouteTransition,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { usePathname, useRouter, useSearchParams } from 'next/navigation.js'\nimport React, { type FormEventHandler, useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { CompareOption, DefaultVersionsViewProps } from './types.js'\n\nimport { Restore } from '../Restore/index.js'\nimport './index.css'\nimport { SelectComparison } from '../SelectComparison/index.js'\nimport { type SelectedLocaleOnChange, SelectLocales } from '../SelectLocales/index.js'\nimport { SelectedLocalesContext } from './SelectedLocalesContext.js'\nimport { SetStepNav } from './SetStepNav.js'\n\nconst baseClass = 'view-version'\n\nexport const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({\n  canUpdate,\n  modifiedOnly: modifiedOnlyProp,\n  RenderedDiff,\n  selectedLocales: selectedLocalesFromProps,\n  versionFromCreatedAt,\n  versionFromID,\n  versionFromOptions,\n  versionToCreatedAt,\n  versionToCreatedAtFormatted,\n  VersionToCreatedAtLabel,\n  versionToID,\n  versionToStatus,\n}) => {\n  const { config, getEntityConfig } = useConfig()\n  const { code } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  const [locales, setLocales] = useState<SelectablePill[]>([])\n  const [localeSelectorOpen, setLocaleSelectorOpen] = React.useState(false)\n\n  useEffect(() => {\n    if (config.localization) {\n      const updatedLocales = config.localization.locales.map((locale) => {\n        let label = locale.label\n        if (typeof locale.label !== 'string' && locale.label[code]) {\n          label = locale.label[code]\n        }\n\n        return {\n          name: locale.code,\n          Label: label,\n          selected: selectedLocalesFromProps.includes(locale.code),\n        } as SelectablePill\n      })\n      setLocales(updatedLocales)\n    }\n  }, [code, config.localization, selectedLocalesFromProps])\n\n  const { id: originalDocID, collectionSlug, globalSlug, isTrashed } = useDocumentInfo()\n  const { startRouteTransition } = useRouteTransition()\n\n  const { collectionConfig, globalConfig } = useMemo(() => {\n    return {\n      collectionConfig: getEntityConfig({ collectionSlug }),\n      globalConfig: getEntityConfig({ globalSlug }),\n    }\n  }, [collectionSlug, globalSlug, getEntityConfig])\n\n  const router = useRouter()\n  const pathname = usePathname()\n  const searchParams = useSearchParams()\n  const [modifiedOnly, setModifiedOnly] = useState(modifiedOnlyProp)\n\n  const updateSearchParams = useCallback(\n    (args: {\n      modifiedOnly?: boolean\n      selectedLocales?: SelectablePill[]\n      versionFromID?: string\n    }) => {\n      // If the selected comparison doc or locales change, update URL params so that version page\n      // This is so that RSC can update the version comparison state\n      const current = new URLSearchParams(Array.from(searchParams.entries()))\n\n      if (args?.versionFromID) {\n        current.set('versionFrom', args?.versionFromID)\n      }\n\n      if (args?.selectedLocales) {\n        if (!args.selectedLocales.length) {\n          current.delete('localeCodes')\n        } else {\n          const selectedLocaleCodes: string[] = []\n          for (const locale of args.selectedLocales) {\n            if (locale.selected) {\n              selectedLocaleCodes.push(locale.name)\n            }\n          }\n          current.set('localeCodes', JSON.stringify(selectedLocaleCodes))\n        }\n      }\n\n      if (args?.modifiedOnly === false) {\n        current.set('modifiedOnly', 'false')\n      } else if (args?.modifiedOnly === true) {\n        current.delete('modifiedOnly')\n      }\n\n      const search = current.toString()\n      const query = search ? `?${search}` : ''\n\n      startRouteTransition(() => router.push(`${pathname}${query}`))\n    },\n    [pathname, router, searchParams, startRouteTransition],\n  )\n\n  const onToggleModifiedOnly: FormEventHandler<HTMLInputElement> = useCallback(\n    (event) => {\n      const newModified = (event.target as HTMLInputElement).checked\n      setModifiedOnly(newModified)\n      updateSearchParams({\n        modifiedOnly: newModified,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const onChangeSelectedLocales: SelectedLocaleOnChange = useCallback(\n    ({ locales }) => {\n      setLocales(locales)\n      updateSearchParams({\n        selectedLocales: locales,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const onChangeVersionFrom: (val: CompareOption) => void = useCallback(\n    (val) => {\n      updateSearchParams({\n        versionFromID: val.value,\n      })\n    },\n    [updateSearchParams],\n  )\n\n  const { localization } = config\n\n  const versionToTimeAgo = useMemo(\n    () =>\n      t('version:versionAgo', {\n        distance: formatTimeToNow({\n          date: versionToCreatedAt,\n          i18n,\n        }),\n      }),\n    [versionToCreatedAt, i18n, t],\n  )\n\n  const versionFromTimeAgo = useMemo(\n    () =>\n      versionFromCreatedAt\n        ? t('version:versionAgo', {\n            distance: formatTimeToNow({\n              date: versionFromCreatedAt,\n              i18n,\n            }),\n          })\n        : undefined,\n    [versionFromCreatedAt, i18n, t],\n  )\n\n  const selectedLocaleNames = useMemo(() => locales.map((locale) => locale.name), [locales])\n  const selectedLocalesContextValue = useMemo(\n    () => ({ selectedLocales: selectedLocaleNames }),\n    [selectedLocaleNames],\n  )\n\n  return (\n    <main className={baseClass}>\n      <div className={`${baseClass}-controls-top`}>\n        <div className={`${baseClass}-controls-top__wrapper`}>\n          <h2>{i18n.t('version:compareVersions')}</h2>\n          <div className={`${baseClass}-controls-top__wrapper-actions`}>\n            <span className={`${baseClass}__modifiedCheckBox`}>\n              <CheckboxInput\n                checked={modifiedOnly}\n                id={'modifiedOnly'}\n                label={i18n.t('version:modifiedOnly')}\n                onToggle={onToggleModifiedOnly}\n              />\n            </span>\n            {localization && (\n              <Button\n                aria-controls={`${baseClass}-locales`}\n                aria-expanded={localeSelectorOpen}\n                buttonStyle=\"pill\"\n                className={`${baseClass}__toggle-locales`}\n                icon={<ChevronIcon direction={localeSelectorOpen ? 'up' : 'down'} />}\n                onClick={() => setLocaleSelectorOpen((localeSelectorOpen) => !localeSelectorOpen)}\n                size=\"medium\"\n              >\n                <span className={`${baseClass}__toggle-locales-label`}>\n                  {t('general:locales')}:{' '}\n                </span>\n                <span className={`${baseClass}__toggle-locales-list`}>\n                  {locales\n                    .filter((locale) => locale.selected)\n                    .map((locale) => locale.name)\n                    .join(', ')}\n                </span>\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {localization && (\n          <SelectLocales\n            locales={locales}\n            localeSelectorOpen={localeSelectorOpen}\n            onChange={onChangeSelectedLocales}\n          />\n        )}\n      </div>\n      <div className={`${baseClass}-controls-bottom`}>\n        <div className={`${baseClass}-controls-bottom__wrapper`}>\n          <div className={`${baseClass}__version-from`}>\n            <div className={`${baseClass}__version-from-labels`}>\n              <span>{t('version:comparingAgainst')}</span>\n              {versionFromTimeAgo && (\n                <span className={`${baseClass}__time-elapsed`}>{versionFromTimeAgo}</span>\n              )}\n            </div>\n            <SelectComparison\n              collectionSlug={collectionSlug}\n              docID={originalDocID}\n              globalSlug={globalSlug}\n              onChange={onChangeVersionFrom}\n              versionFromID={versionFromID}\n              versionFromOptions={versionFromOptions}\n            />\n          </div>\n\n          <div className={`${baseClass}__version-to`}>\n            <div className={`${baseClass}__version-to-labels`}>\n              <span>{t('version:currentlyViewing')}</span>\n              <span className={`${baseClass}__time-elapsed`}>{versionToTimeAgo}</span>\n            </div>\n            <div className={`${baseClass}__version-to-version`}>\n              {VersionToCreatedAtLabel}\n              {canUpdate && !isTrashed && (\n                <Restore\n                  className={`${baseClass}__restore`}\n                  collectionConfig={collectionConfig}\n                  globalConfig={globalConfig}\n                  label={collectionConfig?.labels.singular || globalConfig?.label}\n                  originalDocID={originalDocID}\n                  status={versionToStatus}\n                  versionDateFormatted={versionToCreatedAtFormatted}\n                  versionID={versionToID}\n                />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n      <SetStepNav\n        collectionConfig={collectionConfig}\n        globalConfig={globalConfig}\n        id={originalDocID}\n        isTrashed={isTrashed}\n        versionToCreatedAtFormatted={versionToCreatedAtFormatted}\n        versionToID={versionToID}\n      />\n      <div className={`${baseClass}__diff-wrap`}>\n        <SelectedLocalesContext value={selectedLocalesContextValue}>\n          {versionToCreatedAt && RenderedDiff}\n        </SelectedLocalesContext>\n      </div>\n    </main>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Version/RenderFieldsToDiff/DiffCollapser/index.css

@@ -0,0 +1,64 @@
+@layer payload-default {
+  .diff-collapser__toggle-button {
+    all: unset;
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+
+    .icon {
+      color: var(--color-icon-tertiary);
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0 0 0 calc(var(--spacer-1) * -1);
+      border-radius: var(--radius-medium);
+      z-index: -1;
+    }
+
+    &:hover::before {
+      background-color: var(--color-bg-hover);
+    }
+
+    &:active::before {
+      background-color: var(--color-bg-pressed);
+    }
+  }
+
+  .diff-collapser__label {
+    margin: 0;
+    display: inline-flex;
+    height: 100%;
+  }
+
+  .diff-collapser__field-change-count {
+    margin-inline-start: var(--spacer-2);
+    padding-inline: var(--spacer-1);
+    background: var(--color-bg-tertiary);
+    border-radius: var(--radius-medium);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .diff-collapser__content:not(.diff-collapser__content--hide-gutter) {
+    [dir='ltr'] & {
+      border-left: var(--stroke-width-small) solid var(--color-border);
+      padding-left: var(--spacer-2-5);
+    }
+
+    [dir='rtl'] & {
+      border-right: var(--stroke-width-small) solid var(--color-border);
+      padding-right: var(--spacer-2-5);
+    }
+  }
+
+  .diff-collapser__content--is-collapsed {
+    display: none;
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/DiffCollapser/index.d.ts

@@ -1,7 +1,8 @@
 import type { ClientField } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 type Props = {
+    changeCountOverride?: number;
     hideGutter?: boolean;
     initCollapsed?: boolean;
     Label: React.ReactNode;

package/dist/views/Version/RenderFieldsToDiff/DiffCollapser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,cAAc,CAAA;AAKrB,KAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IAC7B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,OAAO,EAAE,OAAO,CAAA;CACjB,GAAG,CACA;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;CACnB,GACD;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,WAAW,CAAA;IAClB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,UAAU,EAAE,IAAI,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CACJ,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmFzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/Version/RenderFieldsToDiff/DiffCollapser/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,aAAa,CAAA;AAKpB,KAAK,KAAK,GAAG;IACX,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;IAC7B,iBAAiB,EAAE,OAAO,CAAA;IAC1B,OAAO,EAAE,OAAO,CAAA;CACjB,GAAG,CACA;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;CACnB,GACD;IAEE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,EAAE,WAAW,CAAA;IAClB,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,UAAU,EAAE,IAAI,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CACJ,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkFzC,CAAA"}