@payloadcms/next 3.0.0-beta.55 → 3.0.0-beta.57

package/dist/views/LivePreview/Preview/index.scss

@@ -0,0 +1,41 @@
+@import '../../../scss/styles.scss';
+
+.live-preview-window {
+  background-color: var(--theme-bg);
+  width: 60%;
+  flex-shrink: 0;
+  flex-grow: 0;
+  position: sticky;
+  top: var(--doc-controls-height);
+  height: calc(100vh - var(--doc-controls-height));
+  overflow: hidden;
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: flex-start;
+  }
+
+  &__main {
+    flex-grow: 1;
+    height: 100%;
+    width: 100%;
+  }
+
+  &--has-breakpoint {
+    .live-preview-iframe {
+      border: 1px solid var(--theme-elevation-100);
+    }
+
+    .live-preview-window {
+      &__main {
+        padding: var(--base);
+      }
+    }
+  }
+
+  @include mid-break {
+    width: 100%;
+  }
+}

package/dist/views/LivePreview/Toolbar/Controls/index.scss

@@ -0,0 +1,59 @@
+@import '../../../../scss/styles.scss';
+
+.live-preview-toolbar-controls {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--base) / 3);
+
+  &__breakpoint {
+    border: none;
+    background: transparent;
+    height: var(--base);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__device-size {
+    display: flex;
+    align-items: center;
+  }
+
+  &__size {
+    width: 50px;
+    height: var(--base);
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--theme-elevation-200);
+    background: var(--theme-elevation-100);
+    border-radius: 2px;
+    font-size: small;
+  }
+
+  &__zoom {
+    width: 55px;
+    border: none;
+    background: transparent;
+    height: var(--base);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__external {
+    flex-shrink: 0;
+    display: flex;
+    width: var(--base);
+    height: var(--base);
+    align-items: center;
+    justify-content: center;
+    padding: 6px 0;
+  }
+
+  .popup-button {
+    display: flex;
+    align-items: center;
+  }
+}

package/dist/views/LivePreview/Toolbar/SizeInput/index.scss

@@ -0,0 +1,10 @@
+.toolbar-input {
+  width: 50px;
+  height: var(--base);
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--theme-elevation-200);
+  background: var(--theme-elevation-100);
+  border-radius: 2px;
+  font-size: small;
+}

package/dist/views/LivePreview/Toolbar/index.scss

@@ -0,0 +1,41 @@
+@import '../../../scss/styles.scss';
+
+.live-preview-toolbar {
+  display: flex;
+  background-color: var(--theme-bg);
+  color: var(--theme-text);
+  height: calc(var(--base) * 1.75);
+  align-items: center;
+  flex-shrink: 0;
+
+  &--static {
+    position: relative;
+    width: 100%;
+    justify-content: center;
+    border-bottom: 1px solid var(--theme-elevation-100);
+  }
+
+  &--draggable {
+    @include shadow-lg;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
+    border-radius: 4px;
+  }
+
+  &__drag-handle {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: grab;
+
+    .icon--drag-handle .fill {
+      fill: var(--theme-elevation-300);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}

package/dist/views/LivePreview/ToolbarArea/index.scss

@@ -0,0 +1,4 @@
+.toolbar-area {
+  width: 100%;
+  height: 100%;
+}

package/dist/views/LivePreview/index.scss

@@ -0,0 +1,66 @@
+@import '../../scss/styles.scss';
+
+.live-preview {
+  width: 100%;
+  display: flex;
+  --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.04) 0%, transparent 100%);
+
+  [dir='rtl'] & {
+    flex-direction: row-reverse;
+  }
+
+  &--popup-open {
+    .live-preview {
+      &__edit {
+        padding-right: var(--gutter-h);
+      }
+    }
+  }
+
+  &__main {
+    width: 40%;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    position: relative;
+
+    &--popup-open {
+      width: 100%;
+    }
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: calc(var(--base) * 2);
+      height: 100%;
+      background: var(--gradient);
+      pointer-events: none;
+      z-index: -1;
+    }
+  }
+
+  @include mid-break {
+    flex-direction: column;
+
+    &__main {
+      min-height: initial;
+      width: 100%;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    &__form {
+      display: block;
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .live-preview {
+    --gradient: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
+  }
+}

package/dist/views/Login/LoginForm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Login/LoginForm/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAiBzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,YAAY,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAA;KAAE,CAAA;CAC/D,CAoFA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Login/LoginForm/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAkBzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,YAAY,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAA;KAAE,CAAA;CAC/D,CAwHA,CAAA"}

package/dist/views/Login/LoginForm/index.js

@@ -4,25 +4,35 @@ import LinkImport from 'next/link.js';
 import React from 'react';
 const baseClass = 'login__form';
 const Link = LinkImport.default || LinkImport;
-import { EmailField, Form, FormSubmit, PasswordField, useConfig, useTranslation } from '@payloadcms/ui';
-import { email, password } from 'payload/shared';
+import { EmailField, Form, FormSubmit, PasswordField, TextField, useConfig, useTranslation } from '@payloadcms/ui';
+import { email, password, text } from 'payload/shared';
 export const LoginForm = ({ searchParams })=>{
     const config = useConfig();
     const { admin: { autoLogin, routes: { forgot: forgotRoute }, user: userSlug }, routes: { admin, api } } = config;
+    const collectionConfig = config.collections?.find((collection)=>collection?.slug === userSlug);
+    const loginWithUsername = collectionConfig?.auth?.loginWithUsername;
     const { t } = useTranslation();
     const prefillForm = autoLogin && autoLogin.prefillOnly;
     const initialState = {
-        email: {
-            initialValue: prefillForm ? autoLogin.email : undefined,
-            valid: true,
-            value: prefillForm ? autoLogin.email : undefined
-        },
         password: {
             initialValue: prefillForm ? autoLogin.password : undefined,
             valid: true,
             value: prefillForm ? autoLogin.password : undefined
         }
     };
+    if (loginWithUsername) {
+        initialState.username = {
+            initialValue: prefillForm ? autoLogin.username : undefined,
+            valid: true,
+            value: prefillForm ? autoLogin.username : undefined
+        };
+    } else {
+        initialState.email = {
+            initialValue: prefillForm ? autoLogin.email : undefined,
+            valid: true,
+            value: prefillForm ? autoLogin.email : undefined
+        };
+    }
     return /*#__PURE__*/ _jsxs(Form, {
         action: `${api}/${userSlug}/login`,
         className: baseClass,
@@ -35,7 +45,27 @@ export const LoginForm = ({ searchParams })=>{
             /*#__PURE__*/ _jsxs("div", {
                 className: `${baseClass}__inputWrap`,
                 children: [
-                    /*#__PURE__*/ _jsx(EmailField, {
+                    loginWithUsername ? /*#__PURE__*/ _jsx(TextField, {
+                        label: t('authentication:username'),
+                        name: "username",
+                        required: true,
+                        validate: (value)=>text(value, {
+                                name: 'username',
+                                type: 'text',
+                                data: {},
+                                preferences: {
+                                    fields: {}
+                                },
+                                req: {
+                                    payload: {
+                                        config
+                                    },
+                                    t
+                                },
+                                required: true,
+                                siblingData: {}
+                            })
+                    }) : /*#__PURE__*/ _jsx(EmailField, {
                         autoComplete: "email",
                         label: t('general:email'),
                         name: "email",

package/dist/views/Login/LoginForm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/Login/LoginForm/index.tsx"],"sourcesContent":["'use client'\n\nimport LinkImport from 'next/link.js'\nimport React from 'react'\n\nconst baseClass = 'login__form'\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nimport type { FormState, PayloadRequestWithData } from 'payload'\n\nimport {\n  EmailField,\n  Form,\n  FormSubmit,\n  PasswordField,\n  useConfig,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { email, password } from 'payload/shared'\n\nimport './index.scss'\n\nexport const LoginForm: React.FC<{\n  searchParams: { [key: string]: string | string[] | undefined }\n}> = ({ searchParams }) => {\n  const config = useConfig()\n\n  const {\n    admin: {\n      autoLogin,\n      routes: { forgot: forgotRoute },\n      user: userSlug,\n    },\n    routes: { admin, api },\n  } = config\n\n  const { t } = useTranslation()\n\n  const prefillForm = autoLogin && autoLogin.prefillOnly\n\n  const initialState: FormState = {\n    email: {\n      initialValue: prefillForm ? autoLogin.email : undefined,\n      valid: true,\n      value: prefillForm ? autoLogin.email : undefined,\n    },\n    password: {\n      initialValue: prefillForm ? autoLogin.password : undefined,\n      valid: true,\n      value: prefillForm ? autoLogin.password : undefined,\n    },\n  }\n\n  return (\n    <Form\n      action={`${api}/${userSlug}/login`}\n      className={baseClass}\n      disableSuccessStatus\n      initialState={initialState}\n      method=\"POST\"\n      redirect={typeof searchParams?.redirect === 'string' ? searchParams.redirect : admin}\n      waitForAutocomplete\n    >\n      <div className={`${baseClass}__inputWrap`}>\n        <EmailField\n          autoComplete=\"email\"\n          label={t('general:email')}\n          name=\"email\"\n          required\n          validate={(value) =>\n            email(value, {\n              name: 'email',\n              type: 'email',\n              data: {},\n              preferences: { fields: {} },\n              req: { t } as PayloadRequestWithData,\n              required: true,\n              siblingData: {},\n            })\n          }\n        />\n        <PasswordField\n          autoComplete=\"off\"\n          label={t('general:password')}\n          name=\"password\"\n          required\n          validate={(value) =>\n            password(value, {\n              name: 'password',\n              type: 'text',\n              data: {},\n              preferences: { fields: {} },\n              req: {\n                payload: {\n                  config,\n                },\n                t,\n              } as PayloadRequestWithData,\n              required: true,\n              siblingData: {},\n            })\n          }\n        />\n      </div>\n      <Link href={`${admin}${forgotRoute}`}>{t('authentication:forgotPasswordQuestion')}</Link>\n      <FormSubmit>{t('authentication:login')}</FormSubmit>\n    </Form>\n  )\n}\n"],"names":["LinkImport","React","baseClass","Link","default","EmailField","Form","FormSubmit","PasswordField","useConfig","useTranslation","email","password","LoginForm","searchParams","config","admin","autoLogin","routes","forgot","forgotRoute","user","userSlug","api","t","prefillForm","prefillOnly","initialState","initialValue","undefined","valid","value","action","className","disableSuccessStatus","method","redirect","waitForAutocomplete","div","autoComplete","label","name","required","validate","type","data","preferences","fields","req","siblingData","payload","href"],"mappings":"AAAA;;AAEA,OAAOA,gBAAgB,eAAc;AACrC,OAAOC,WAAW,QAAO;AAEzB,MAAMC,YAAY;AAClB,MAAMC,OAAQH,WAAWI,OAAO,IAAIJ;AAIpC,SACEK,UAAU,EACVC,IAAI,EACJC,UAAU,EACVC,aAAa,EACbC,SAAS,EACTC,cAAc,QACT,iBAAgB;AACvB,SAASC,KAAK,EAAEC,QAAQ,QAAQ,iBAAgB;AAIhD,OAAO,MAAMC,YAER,CAAC,EAAEC,YAAY,EAAE;IACpB,MAAMC,SAASN;IAEf,MAAM,EACJO,OAAO,EACLC,SAAS,EACTC,QAAQ,EAAEC,QAAQC,WAAW,EAAE,EAC/BC,MAAMC,QAAQ,EACf,EACDJ,QAAQ,EAAEF,KAAK,EAAEO,GAAG,EAAE,EACvB,GAAGR;IAEJ,MAAM,EAAES,CAAC,EAAE,GAAGd;IAEd,MAAMe,cAAcR,aAAaA,UAAUS,WAAW;IAEtD,MAAMC,eAA0B;QAC9BhB,OAAO;YACLiB,cAAcH,cAAcR,UAAUN,KAAK,GAAGkB;YAC9CC,OAAO;YACPC,OAAON,cAAcR,UAAUN,KAAK,GAAGkB;QACzC;QACAjB,UAAU;YACRgB,cAAcH,cAAcR,UAAUL,QAAQ,GAAGiB;YACjDC,OAAO;YACPC,OAAON,cAAcR,UAAUL,QAAQ,GAAGiB;QAC5C;IACF;IAEA,qBACE,MAACvB;QACC0B,QAAQ,CAAC,EAAET,IAAI,CAAC,EAAED,SAAS,MAAM,CAAC;QAClCW,WAAW/B;QACXgC,oBAAoB;QACpBP,cAAcA;QACdQ,QAAO;QACPC,UAAU,OAAOtB,cAAcsB,aAAa,WAAWtB,aAAasB,QAAQ,GAAGpB;QAC/EqB,mBAAmB;;0BAEnB,MAACC;gBAAIL,WAAW,CAAC,EAAE/B,UAAU,WAAW,CAAC;;kCACvC,KAACG;wBACCkC,cAAa;wBACbC,OAAOhB,EAAE;wBACTiB,MAAK;wBACLC,QAAQ;wBACRC,UAAU,CAACZ,QACTpB,MAAMoB,OAAO;gCACXU,MAAM;gCACNG,MAAM;gCACNC,MAAM,CAAC;gCACPC,aAAa;oCAAEC,QAAQ,CAAC;gCAAE;gCAC1BC,KAAK;oCAAExB;gCAAE;gCACTkB,UAAU;gCACVO,aAAa,CAAC;4BAChB;;kCAGJ,KAACzC;wBACC+B,cAAa;wBACbC,OAAOhB,EAAE;wBACTiB,MAAK;wBACLC,QAAQ;wBACRC,UAAU,CAACZ,QACTnB,SAASmB,OAAO;gCACdU,MAAM;gCACNG,MAAM;gCACNC,MAAM,CAAC;gCACPC,aAAa;oCAAEC,QAAQ,CAAC;gCAAE;gCAC1BC,KAAK;oCACHE,SAAS;wCACPnC;oCACF;oCACAS;gCACF;gCACAkB,UAAU;gCACVO,aAAa,CAAC;4BAChB;;;;0BAIN,KAAC9C;gBAAKgD,MAAM,CAAC,EAAEnC,MAAM,EAAEI,YAAY,CAAC;0BAAGI,EAAE;;0BACzC,KAACjB;0BAAYiB,EAAE;;;;AAGrB,EAAC"}
+{"version":3,"sources":["../../../../src/views/Login/LoginForm/index.tsx"],"sourcesContent":["'use client'\n\nimport LinkImport from 'next/link.js'\nimport React from 'react'\n\nconst baseClass = 'login__form'\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nimport type { FormState, PayloadRequest } from 'payload'\n\nimport {\n  EmailField,\n  Form,\n  FormSubmit,\n  PasswordField,\n  TextField,\n  useConfig,\n  useTranslation,\n} from '@payloadcms/ui'\nimport { email, password, text } from 'payload/shared'\n\nimport './index.scss'\n\nexport const LoginForm: React.FC<{\n  searchParams: { [key: string]: string | string[] | undefined }\n}> = ({ searchParams }) => {\n  const config = useConfig()\n\n  const {\n    admin: {\n      autoLogin,\n      routes: { forgot: forgotRoute },\n      user: userSlug,\n    },\n    routes: { admin, api },\n  } = config\n\n  const collectionConfig = config.collections?.find((collection) => collection?.slug === userSlug)\n  const loginWithUsername = collectionConfig?.auth?.loginWithUsername\n\n  const { t } = useTranslation()\n\n  const prefillForm = autoLogin && autoLogin.prefillOnly\n\n  const initialState: FormState = {\n    password: {\n      initialValue: prefillForm ? autoLogin.password : undefined,\n      valid: true,\n      value: prefillForm ? autoLogin.password : undefined,\n    },\n  }\n\n  if (loginWithUsername) {\n    initialState.username = {\n      initialValue: prefillForm ? autoLogin.username : undefined,\n      valid: true,\n      value: prefillForm ? autoLogin.username : undefined,\n    }\n  } else {\n    initialState.email = {\n      initialValue: prefillForm ? autoLogin.email : undefined,\n      valid: true,\n      value: prefillForm ? autoLogin.email : undefined,\n    }\n  }\n\n  return (\n    <Form\n      action={`${api}/${userSlug}/login`}\n      className={baseClass}\n      disableSuccessStatus\n      initialState={initialState}\n      method=\"POST\"\n      redirect={typeof searchParams?.redirect === 'string' ? searchParams.redirect : admin}\n      waitForAutocomplete\n    >\n      <div className={`${baseClass}__inputWrap`}>\n        {loginWithUsername ? (\n          <TextField\n            label={t('authentication:username')}\n            name=\"username\"\n            required\n            validate={(value) =>\n              text(value, {\n                name: 'username',\n                type: 'text',\n                data: {},\n                preferences: { fields: {} },\n                req: {\n                  payload: {\n                    config,\n                  },\n                  t,\n                } as PayloadRequest,\n                required: true,\n                siblingData: {},\n              })\n            }\n          />\n        ) : (\n          <EmailField\n            autoComplete=\"email\"\n            label={t('general:email')}\n            name=\"email\"\n            required\n            validate={(value) =>\n              email(value, {\n                name: 'email',\n                type: 'email',\n                data: {},\n                preferences: { fields: {} },\n                req: { t } as PayloadRequest,\n                required: true,\n                siblingData: {},\n              })\n            }\n          />\n        )}\n        <PasswordField\n          autoComplete=\"off\"\n          label={t('general:password')}\n          name=\"password\"\n          required\n          validate={(value) =>\n            password(value, {\n              name: 'password',\n              type: 'text',\n              data: {},\n              preferences: { fields: {} },\n              req: {\n                payload: {\n                  config,\n                },\n                t,\n              } as PayloadRequest,\n              required: true,\n              siblingData: {},\n            })\n          }\n        />\n      </div>\n      <Link href={`${admin}${forgotRoute}`}>{t('authentication:forgotPasswordQuestion')}</Link>\n      <FormSubmit>{t('authentication:login')}</FormSubmit>\n    </Form>\n  )\n}\n"],"names":["LinkImport","React","baseClass","Link","default","EmailField","Form","FormSubmit","PasswordField","TextField","useConfig","useTranslation","email","password","text","LoginForm","searchParams","config","admin","autoLogin","routes","forgot","forgotRoute","user","userSlug","api","collectionConfig","collections","find","collection","slug","loginWithUsername","auth","t","prefillForm","prefillOnly","initialState","initialValue","undefined","valid","value","username","action","className","disableSuccessStatus","method","redirect","waitForAutocomplete","div","label","name","required","validate","type","data","preferences","fields","req","payload","siblingData","autoComplete","href"],"mappings":"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"}

package/dist/views/Login/LoginForm/index.scss

@@ -0,0 +1,8 @@
+.login__form {
+  &__inputWrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+    margin-bottom: calc(var(--base) / 4);
+  }
+}

package/dist/views/Login/index.scss

@@ -0,0 +1,8 @@
+.login {
+  &__brand {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: calc(var(--base) * 2);
+  }
+}

package/dist/views/Logout/index.scss

@@ -0,0 +1,20 @@
+.logout {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  min-height: 100vh;
+
+  &__wrap {
+    & > *:first-child {
+      margin-top: 0;
+    }
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+
+    .btn {
+      margin: 0;
+    }
+  }
+}

package/dist/views/NotFound/index.scss

@@ -0,0 +1,37 @@
+@import '../../scss/styles.scss';
+
+.not-found {
+  margin-top: var(--base);
+  display: flex;
+
+  & > * {
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__button {
+    margin: 0;
+  }
+
+  &--margin-top-large {
+    margin-top: calc(var(--base) * 2);
+  }
+
+  @include large-break {
+    &--margin-top-large {
+      margin-top: var(--base);
+    }
+  }
+
+  @include small-break {
+    margin-top: calc(var(--base) / 2);
+
+    &--margin-top-large {
+      margin-top: calc(var(--base) / 2);
+    }
+  }
+}

package/dist/views/ResetPassword/index.scss

@@ -0,0 +1,5 @@
+.reset-password {
+  form > .field-type {
+    margin-bottom: var(--base);
+  }
+}

package/dist/views/Unauthorized/index.scss

@@ -0,0 +1,36 @@
+@import '../../scss/styles.scss';
+
+.unauthorized {
+  margin-top: var(--base);
+
+  & > * {
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__button {
+    margin: 0;
+  }
+
+  &--margin-top-large {
+    margin-top: calc(var(--base) * 2);
+  }
+
+  @include large-break {
+    &--margin-top-large {
+      margin-top: var(--base);
+    }
+  }
+
+  @include small-break {
+    margin-top: calc(var(--base) / 2);
+
+    &--margin-top-large {
+      margin-top: calc(var(--base) / 2);
+    }
+  }
+}

package/dist/views/Verify/index.scss

@@ -0,0 +1,14 @@
+.verify {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  flex-wrap: wrap;
+  min-height: 100vh;
+
+  &__brand {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: calc(var(--base) * 2);
+  }
+}

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

@@ -0,0 +1,70 @@
+@import '../../../scss/styles.scss';
+
+.view-version {
+  width: 100%;
+  padding-bottom: var(--spacing-view-bottom);
+
+  &__wrap {
+    padding-top: calc(var(--base) * 1.5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+  }
+
+  &__header-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 4);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    h2 {
+      margin: 0;
+    }
+  }
+
+  &__created-at {
+    margin: 0;
+    color: var(--theme-elevation-500);
+  }
+
+  &__controls {
+    display: flex;
+    gap: var(--base);
+
+    > * {
+      flex-basis: 100%;
+    }
+  }
+
+  &__restore {
+    margin: 0 0 0 var(--base);
+  }
+
+  @include mid-break {
+    &__intro,
+    &__header {
+      display: block;
+    }
+
+    &__controls {
+      flex-direction: column;
+      gap: calc(var(--base) / 4);
+    }
+
+    &__restore {
+      margin: calc(var(--base) * 0.5) 0 0 0;
+    }
+  }
+
+  @include small-break {
+    &__wrap {
+      padding-top: calc(var(--base) / 2);
+      gap: calc(var(--base) / 2);
+    }
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/Label/index.scss

@@ -0,0 +1,4 @@
+.field-diff-label {
+  margin-bottom: calc(var(--base) * 0.25);
+  font-weight: 600;
+}

package/dist/views/Version/RenderFieldsToDiff/fields/Iterable/index.scss

@@ -0,0 +1,34 @@
+.iterable-diff {
+  margin-bottom: calc(var(--base) * 2);
+
+  &__locale-label {
+    background: var(--theme-elevation-100);
+    padding: calc(var(--base) * 0.25);
+    // border-radius: $style-radius-m;
+    [dir='ltr'] & {
+      margin-right: calc(var(--base) * 0.25);
+    }
+    [dir='rtl'] & {
+      margin-left: calc(var(--base) * 0.25);
+    }
+  }
+
+  &__wrap {
+    margin: calc(var(--base) * 0.5);
+    [dir='ltr'] & {
+      padding-left: calc(var(--base) * 0.5);
+      // border-left: $style-stroke-width-s solid var(--theme-elevation-150);
+    }
+    [dir='rtl'] & {
+      padding-right: calc(var(--base) * 0.5);
+      // border-right: $style-stroke-width-s solid var(--theme-elevation-150);
+    }
+  }
+
+  &__no-rows {
+    font-family: monospace;
+    background-color: var(--theme-elevation-50);
+    // padding: base(0.125) calc(var(--base) * 0.5);
+    // margin: base(0.125) 0;
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/fields/Nested/index.scss

@@ -0,0 +1,12 @@
+.nested-diff {
+  &__wrap--gutter {
+    [dir='ltr'] & {
+      padding-left: calc(var(--base) * 0.25);
+      // border-left: $style-stroke-width-s solid var(--theme-elevation-150);
+    }
+    [dir='rtl'] & {
+      padding-right: calc(var(--base) * 0.25);
+      // border-right: $style-stroke-width-s solid var(--theme-elevation-150);
+    }
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/fields/Relationship/index.scss

@@ -0,0 +1,13 @@
+.relationship-diff {
+  &__locale-label {
+    [dir='ltr'] & {
+      margin-right: calc(var(--base) * 0.25);
+    }
+    [dir='rtl'] & {
+      margin-left: calc(var(--base) * 0.25);
+    }
+    background: var(--theme-elevation-100);
+    padding: calc(var(--base) * 0.25);
+    // border-radius: $style-radius-m;
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/fields/Select/index.scss

@@ -0,0 +1,13 @@
+.select-diff {
+  &__locale-label {
+    [dir='ltr'] & {
+      margin-right: calc(var(--base) * 0.25);
+    }
+    [dir='rtl'] & {
+      margin-left: calc(var(--base) * 0.25);
+    }
+    background: var(--theme-elevation-100);
+    padding: calc(var(--base) * 0.25);
+    // border-radius: $style-radius-m;
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/fields/Text/index.scss

@@ -0,0 +1,13 @@
+.text-diff {
+  &__locale-label {
+    [dir='ltr'] & {
+      margin-right: calc(var(--base) * 0.25);
+    }
+    [dir='rtl'] & {
+      margin-left: calc(var(--base) * 0.25);
+    }
+    background: var(--theme-elevation-100);
+    padding: calc(var(--base) * 0.25);
+    // border-radius: $style-radius-m;
+  }
+}

package/dist/views/Version/RenderFieldsToDiff/index.scss

@@ -0,0 +1,18 @@
+@import '../../../scss/styles.scss';
+
+.render-field-diffs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base);
+
+  &__field {
+    overflow-wrap: anywhere;
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+  }
+
+  @include small-break {
+    gap: calc(var(--base) / 2);
+  }
+}