payload 0.20.0 → 0.20.3-beta.0

package/dist/admin/components/views/CreateFirstUser/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useConfig } from '../../utilities/Config';
+import { useAuth } from '../../utilities/Auth';
+import MinimalTemplate from '../../templates/Minimal';
+import Meta from '../../utilities/Meta';
+import Form from '../../forms/Form';
+import RenderFields from '../../forms/RenderFields';
+import fieldTypes from '../../forms/field-types';
+import FormSubmit from '../../forms/Submit';
+import './index.scss';
+const baseClass = 'create-first-user';
+const CreateFirstUser = (props) => {
+    const { setInitialized } = props;
+    const { setToken } = useAuth();
+    const { admin: { user: userSlug }, collections, serverURL, routes: { admin, api }, } = useConfig();
+    const userConfig = collections.find((collection) => collection.slug === userSlug);
+    const onSuccess = (json) => {
+        var _a;
+        if ((_a = json === null || json === void 0 ? void 0 : json.user) === null || _a === void 0 ? void 0 : _a.token) {
+            setToken(json.user.token);
+        }
+        setInitialized(true);
+    };
+    const fields = [
+        {
+            name: 'email',
+            label: 'Email Address',
+            type: 'email',
+            required: true,
+        }, {
+            name: 'password',
+            label: 'Password',
+            type: 'password',
+            required: true,
+        }, {
+            name: 'confirm-password',
+            label: 'Confirm Password',
+            type: 'confirmPassword',
+            required: true,
+        },
+    ];
+    return (React.createElement(MinimalTemplate, { className: baseClass },
+        React.createElement("h1", null, "Welcome"),
+        React.createElement("p", null, "To begin, create your first user."),
+        React.createElement(Meta, { title: "Create First User", description: "Create first user", keywords: "Create, Payload, CMS" }),
+        React.createElement(Form, { onSuccess: onSuccess, method: "post", redirect: admin, action: `${serverURL}${api}/${userSlug}/first-register`, validationOperation: "create" },
+            React.createElement(RenderFields, { fieldSchema: [
+                    ...fields,
+                    ...userConfig.fields,
+                ], fieldTypes: fieldTypes }),
+            React.createElement(FormSubmit, null, "Create"))));
+};
+export default CreateFirstUser;

package/dist/admin/components/views/CreateFirstUser/index.scss

@@ -0,0 +1,17 @@
+@import '../../../scss/styles';
+
+.create-first-user {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  min-height: 100vh;
+
+  &__wrap {
+    width: 100%;
+    margin: 0 auto base(1);
+
+    svg {
+      width: 100%;
+    }
+  }
+}

package/dist/admin/components/views/CreateFirstUser/types.d.ts

@@ -0,0 +1,3 @@
+export declare type Props = {
+    setInitialized: (initialized: boolean) => void;
+};

package/dist/admin/components/views/CreateFirstUser/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/views/Dashboard/Default.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const Dashboard: React.FC<Props>;
+export default Dashboard;

package/dist/admin/components/views/Dashboard/Default.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { useConfig } from '../../utilities/Config';
+import Eyebrow from '../../elements/Eyebrow';
+import Card from '../../elements/Card';
+import Button from '../../elements/Button';
+import { Gutter } from '../../elements/Gutter';
+import './index.scss';
+const baseClass = 'dashboard';
+const Dashboard = (props) => {
+    const { collections, globals, permissions, } = props;
+    const { push } = useHistory();
+    const { routes: { admin, }, admin: { components: { afterDashboard, beforeDashboard, }, }, } = useConfig();
+    return (React.createElement("div", { className: baseClass },
+        React.createElement(Eyebrow, null),
+        React.createElement(Gutter, { className: `${baseClass}__wrap` },
+            Array.isArray(beforeDashboard) && beforeDashboard.map((Component, i) => React.createElement(Component, { key: i })),
+            React.createElement("h2", { className: `${baseClass}__label` }, "Collections"),
+            React.createElement("ul", { className: `${baseClass}__card-list` }, collections.map((collection) => {
+                var _a, _b, _c;
+                const hasCreatePermission = (_c = (_b = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[collection.slug]) === null || _b === void 0 ? void 0 : _b.create) === null || _c === void 0 ? void 0 : _c.permission;
+                return (React.createElement("li", { key: collection.slug },
+                    React.createElement(Card, { title: collection.labels.plural, id: `card-${collection.slug}`, onClick: () => push({ pathname: `${admin}/collections/${collection.slug}` }), actions: hasCreatePermission ? (React.createElement(Button, { el: "link", to: `${admin}/collections/${collection.slug}/create`, icon: "plus", round: true, buttonStyle: "icon-label", iconStyle: "with-border" })) : undefined })));
+            })),
+            (globals.length > 0) && (React.createElement(React.Fragment, null,
+                React.createElement("h2", { className: `${baseClass}__label` }, "Globals"),
+                React.createElement("ul", { className: `${baseClass}__card-list` }, globals.map((global) => (React.createElement("li", { key: global.slug },
+                    React.createElement(Card, { title: global.label, onClick: () => push({ pathname: `${admin}/globals/${global.slug}` }) }))))))),
+            Array.isArray(afterDashboard) && afterDashboard.map((Component, i) => React.createElement(Component, { key: i })))));
+};
+export default Dashboard;

package/dist/admin/components/views/Dashboard/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Dashboard: React.FC;
+export default Dashboard;

package/dist/admin/components/views/Dashboard/index.js

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react';
+import { useConfig } from '../../utilities/Config';
+import { useAuth } from '../../utilities/Auth';
+import { useStepNav } from '../../elements/StepNav';
+import RenderCustomComponent from '../../utilities/RenderCustomComponent';
+import DefaultDashboard from './Default';
+const Dashboard = () => {
+    const { permissions } = useAuth();
+    const { setStepNav } = useStepNav();
+    const [filteredGlobals, setFilteredGlobals] = useState([]);
+    const { collections, globals, admin: { components: { views: { Dashboard: CustomDashboard, } = {
+        Dashboard: undefined,
+    }, } = {}, } = {}, } = useConfig();
+    useEffect(() => {
+        setFilteredGlobals(globals.filter((global) => { var _a, _b, _c; return (_c = (_b = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.globals) === null || _a === void 0 ? void 0 : _a[global.slug]) === null || _b === void 0 ? void 0 : _b.read) === null || _c === void 0 ? void 0 : _c.permission; }));
+    }, [permissions, globals]);
+    useEffect(() => {
+        setStepNav([]);
+    }, [setStepNav]);
+    return (React.createElement(RenderCustomComponent, { DefaultComponent: DefaultDashboard, CustomComponent: CustomDashboard, componentProps: {
+            globals: filteredGlobals,
+            collections: collections.filter((collection) => { var _a, _b, _c; return (_c = (_b = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[collection.slug]) === null || _b === void 0 ? void 0 : _b.read) === null || _c === void 0 ? void 0 : _c.permission; }),
+            permissions,
+        } }));
+};
+export default Dashboard;

package/dist/admin/components/views/Dashboard/index.scss

@@ -0,0 +1,60 @@
+@import '../../../scss/styles';
+
+.dashboard {
+  width: 100%;
+
+  &__wrap {
+    padding-bottom: base(2);
+  }
+
+  &__card-list {
+    width: calc(100% + #{$baseline});
+    margin: 0 - base(.5);
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+
+    li {
+      width: 20%;
+      margin-bottom: $baseline;
+    }
+
+    .card {
+      height: 100%;
+      margin: 0 base(.5);
+    }
+  }
+
+  @include large-break {
+    li {
+      width: 25%;
+    }
+  }
+
+  @include mid-break {
+    &__wrap {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    li {
+      width: 33.33%;
+    }
+  }
+
+  @include small-break {
+    &__card-list {
+      width: calc(100% + #{base(.5)});
+      margin: 0 - base(.25);
+    }
+
+    li {
+      width: 50%;
+    }
+
+    .card {
+      margin: 0 base(.25) base(.5);
+    }
+  }
+}

package/dist/admin/components/views/Dashboard/types.d.ts

@@ -0,0 +1,8 @@
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import { SanitizedGlobalConfig } from '../../../../globals/config/types';
+import { Permissions } from '../../../../auth/types';
+export declare type Props = {
+    collections: SanitizedCollectionConfig[];
+    globals: SanitizedGlobalConfig[];
+    permissions: Permissions;
+};

package/dist/admin/components/views/Dashboard/types.js

@@ -0,0 +1 @@
+export {};

package/dist/admin/components/views/ForgotPassword/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.scss';
+declare const ForgotPassword: React.FC;
+export default ForgotPassword;

package/dist/admin/components/views/ForgotPassword/index.js

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { useConfig } from '../../utilities/Config';
+import { useAuth } from '../../utilities/Auth';
+import MinimalTemplate from '../../templates/Minimal';
+import Form from '../../forms/Form';
+import Email from '../../forms/field-types/Email';
+import FormSubmit from '../../forms/Submit';
+import Button from '../../elements/Button';
+import Meta from '../../utilities/Meta';
+import './index.scss';
+const baseClass = 'forgot-password';
+const ForgotPassword = () => {
+    const [hasSubmitted, setHasSubmitted] = useState(false);
+    const { user } = useAuth();
+    const { admin: { user: userSlug }, serverURL, routes: { admin, api, }, } = useConfig();
+    const handleResponse = (res) => {
+        res.json()
+            .then(() => {
+            setHasSubmitted(true);
+        }, () => {
+            toast.error('The email provided is not valid.');
+        });
+    };
+    if (user) {
+        return (React.createElement(MinimalTemplate, { className: baseClass },
+            React.createElement(Meta, { title: "Forgot Password", description: "Forgot password", keywords: "Forgot, Password, Payload, CMS" }),
+            React.createElement("h1", null, "You're already logged in"),
+            React.createElement("p", null,
+                "To change your password, go to your",
+                ' ',
+                React.createElement(Link, { to: `${admin}/account` }, "account"),
+                ' ',
+                "and edit your password there."),
+            React.createElement("br", null),
+            React.createElement(Button, { el: "link", buttonStyle: "secondary", to: admin }, "Back to Dashboard")));
+    }
+    if (hasSubmitted) {
+        return (React.createElement(MinimalTemplate, { className: baseClass },
+            React.createElement("h1", null, "Email sent"),
+            React.createElement("p", null, "Check your email for a link that will allow you to securely reset your password.")));
+    }
+    return (React.createElement(MinimalTemplate, { className: baseClass },
+        React.createElement(Form, { handleResponse: handleResponse, method: "post", action: `${serverURL}${api}/${userSlug}/forgot-password` },
+            React.createElement("h1", null, "Forgot Password"),
+            React.createElement("p", null, "Please enter your email below. You will receive an email message with instructions on how to reset your password."),
+            React.createElement(Email, { label: "Email Address", name: "email", admin: { autoComplete: 'email' }, required: true }),
+            React.createElement(FormSubmit, null, "Submit")),
+        React.createElement(Link, { to: `${admin}/login` }, "Back to login")));
+};
+export default ForgotPassword;

package/dist/admin/components/views/Global/Default.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const DefaultGlobalView: React.FC<Props>;
+export default DefaultGlobalView;

package/dist/admin/components/views/Global/Default.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import format from 'date-fns/format';
+import { useConfig } from '../../utilities/Config';
+import Eyebrow from '../../elements/Eyebrow';
+import Form from '../../forms/Form';
+import PreviewButton from '../../elements/PreviewButton';
+import FormSubmit from '../../forms/Submit';
+import RenderFields from '../../forms/RenderFields';
+import CopyToClipboard from '../../elements/CopyToClipboard';
+import Meta from '../../utilities/Meta';
+import fieldTypes from '../../forms/field-types';
+import LeaveWithoutSaving from '../../modals/LeaveWithoutSaving';
+import VersionsCount from '../../elements/VersionsCount';
+import ViewDescription from '../../elements/ViewDescription';
+import Loading from '../../elements/Loading';
+import { useDocumentInfo } from '../../utilities/DocumentInfo';
+import SaveDraft from '../../elements/SaveDraft';
+import Publish from '../../elements/Publish';
+import Status from '../../elements/Status';
+import Autosave from '../../elements/Autosave';
+import { OperationContext } from '../../utilities/OperationProvider';
+import { Gutter } from '../../elements/Gutter';
+import './index.scss';
+const baseClass = 'global-edit';
+const DefaultGlobalView = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const { admin: { dateFormat } } = useConfig();
+    const { publishedDoc } = useDocumentInfo();
+    const { global, data, onSave, permissions, action, apiURL, initialState, isLoading, } = props;
+    const { fields, preview, versions, label, admin: { description, hideAPIURL, } = {}, } = global;
+    const hasSavePermission = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.update) === null || _a === void 0 ? void 0 : _a.permission;
+    return (React.createElement("div", { className: baseClass },
+        isLoading && (React.createElement(Loading, null)),
+        !isLoading && (React.createElement(OperationContext.Provider, { value: "update" },
+            React.createElement(Form, { className: `${baseClass}__form`, method: "post", action: action, onSuccess: onSave, disabled: !hasSavePermission, initialState: initialState },
+                React.createElement("div", { className: `${baseClass}__main` },
+                    React.createElement(Meta, { title: label, description: label, keywords: `${label}, Payload, CMS` }),
+                    React.createElement(Eyebrow, null),
+                    !(((_b = global.versions) === null || _b === void 0 ? void 0 : _b.drafts) && ((_d = (_c = global.versions) === null || _c === void 0 ? void 0 : _c.drafts) === null || _d === void 0 ? void 0 : _d.autosave)) && (React.createElement(LeaveWithoutSaving, null)),
+                    React.createElement(Gutter, { className: `${baseClass}__edit` },
+                        React.createElement("header", { className: `${baseClass}__header` },
+                            React.createElement("h1", null,
+                                "Edit",
+                                ' ',
+                                label),
+                            description && (React.createElement("div", { className: `${baseClass}__sub-header` },
+                                React.createElement(ViewDescription, { description: description })))),
+                        React.createElement(RenderFields, { readOnly: !hasSavePermission, permissions: permissions.fields, filter: (field) => (!field.admin.position || (field.admin.position && field.admin.position !== 'sidebar')), fieldTypes: fieldTypes, fieldSchema: fields }))),
+                React.createElement("div", { className: `${baseClass}__sidebar-wrap` },
+                    React.createElement("div", { className: `${baseClass}__sidebar` },
+                        React.createElement("div", { className: `${baseClass}__sidebar-sticky-wrap` },
+                            React.createElement("div", { className: `${baseClass}__document-actions${((((_e = global.versions) === null || _e === void 0 ? void 0 : _e.drafts) && !((_g = (_f = global.versions) === null || _f === void 0 ? void 0 : _f.drafts) === null || _g === void 0 ? void 0 : _g.autosave)) || preview) ? ` ${baseClass}__document-actions--has-2` : ''}` },
+                                (preview && (!((_h = global.versions) === null || _h === void 0 ? void 0 : _h.drafts) || ((_k = (_j = global.versions) === null || _j === void 0 ? void 0 : _j.drafts) === null || _k === void 0 ? void 0 : _k.autosave))) && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
+                                hasSavePermission && (React.createElement(React.Fragment, null,
+                                    ((_l = global.versions) === null || _l === void 0 ? void 0 : _l.drafts) && (React.createElement(React.Fragment, null,
+                                        !global.versions.drafts.autosave && (React.createElement(SaveDraft, null)),
+                                        React.createElement(Publish, null))),
+                                    !((_m = global.versions) === null || _m === void 0 ? void 0 : _m.drafts) && (React.createElement(FormSubmit, null, "Save"))))),
+                            React.createElement("div", { className: `${baseClass}__sidebar-fields` },
+                                (preview && (((_o = global.versions) === null || _o === void 0 ? void 0 : _o.drafts) && !((_q = (_p = global.versions) === null || _p === void 0 ? void 0 : _p.drafts) === null || _q === void 0 ? void 0 : _q.autosave))) && (React.createElement(PreviewButton, { generatePreviewURL: preview, data: data })),
+                                ((_r = global.versions) === null || _r === void 0 ? void 0 : _r.drafts) && (React.createElement(React.Fragment, null,
+                                    React.createElement(Status, null),
+                                    (global.versions.drafts.autosave && hasSavePermission) && (React.createElement(Autosave, { publishedDocUpdatedAt: (publishedDoc === null || publishedDoc === void 0 ? void 0 : publishedDoc.updatedAt) || (data === null || data === void 0 ? void 0 : data.createdAt), global: global })))),
+                                React.createElement(RenderFields, { readOnly: !hasSavePermission, permissions: permissions.fields, filter: (field) => field.admin.position === 'sidebar', fieldTypes: fieldTypes, fieldSchema: fields })),
+                            React.createElement("ul", { className: `${baseClass}__meta` },
+                                versions && (React.createElement("li", null,
+                                    React.createElement("div", { className: `${baseClass}__label` }, "Versions"),
+                                    React.createElement(VersionsCount, { global: global }))),
+                                (data && !hideAPIURL) && (React.createElement("li", { className: `${baseClass}__api-url` },
+                                    React.createElement("span", { className: `${baseClass}__label` },
+                                        "API URL",
+                                        ' ',
+                                        React.createElement(CopyToClipboard, { value: apiURL })),
+                                    React.createElement("a", { href: apiURL, target: "_blank", rel: "noopener noreferrer" }, apiURL))),
+                                data.updatedAt && (React.createElement("li", null,
+                                    React.createElement("div", { className: `${baseClass}__label` }, "Last Modified"),
+                                    React.createElement("div", null, format(new Date(data.updatedAt), dateFormat)))))))))))));
+};
+export default DefaultGlobalView;

package/dist/admin/components/views/Global/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IndexProps } from './types';
+declare const GlobalView: React.FC<IndexProps>;
+export default GlobalView;

package/dist/admin/components/views/Global/index.js

@@ -0,0 +1,55 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useConfig } from '../../utilities/Config';
+import { useAuth } from '../../utilities/Auth';
+import { useStepNav } from '../../elements/StepNav';
+import usePayloadAPI from '../../../hooks/usePayloadAPI';
+import { useLocale } from '../../utilities/Locale';
+import RenderCustomComponent from '../../utilities/RenderCustomComponent';
+import DefaultGlobal from './Default';
+import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
+import { useDocumentInfo } from '../../utilities/DocumentInfo';
+const GlobalView = (props) => {
+    var _a, _b;
+    const { state: locationState } = useLocation();
+    const locale = useLocale();
+    const { setStepNav } = useStepNav();
+    const { permissions, user } = useAuth();
+    const [initialState, setInitialState] = useState({});
+    const { getVersions, preferences } = useDocumentInfo();
+    const { serverURL, routes: { api, }, } = useConfig();
+    const { global } = props;
+    const { slug, label, fields, admin: { components: { views: { Edit: CustomEdit, } = {}, } = {}, } = {}, } = global;
+    const onSave = useCallback(async (json) => {
+        getVersions();
+        const state = await buildStateFromSchema({ fieldSchema: fields, data: json.result, operation: 'update', user, locale });
+        setInitialState(state);
+    }, [getVersions, fields, user, locale]);
+    const [{ data, isLoading: isLoadingDocument }] = usePayloadAPI(`${serverURL}${api}/globals/${slug}`, { initialParams: { 'fallback-locale': 'null', depth: 0, draft: 'true' } });
+    const dataToRender = (locationState === null || locationState === void 0 ? void 0 : locationState.data) || data;
+    useEffect(() => {
+        const nav = [{
+                label,
+            }];
+        setStepNav(nav);
+    }, [setStepNav, label]);
+    useEffect(() => {
+        const awaitInitialState = async () => {
+            const state = await buildStateFromSchema({ fieldSchema: fields, data: dataToRender, user, operation: 'update', locale });
+            setInitialState(state);
+        };
+        awaitInitialState();
+    }, [dataToRender, fields, user, locale]);
+    const globalPermissions = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.globals) === null || _a === void 0 ? void 0 : _a[slug];
+    return (React.createElement(RenderCustomComponent, { DefaultComponent: DefaultGlobal, CustomComponent: CustomEdit, componentProps: {
+            isLoading: isLoadingDocument || !preferences,
+            data: dataToRender,
+            permissions: globalPermissions,
+            initialState,
+            global,
+            onSave,
+            apiURL: `${serverURL}${api}/globals/${slug}${((_b = global.versions) === null || _b === void 0 ? void 0 : _b.drafts) ? '?draft=true' : ''}`,
+            action: `${serverURL}${api}/globals/${slug}?locale=${locale}&depth=0&fallback-locale=null`,
+        } }));
+};
+export default GlobalView;

package/dist/admin/components/views/Global/index.scss

@@ -0,0 +1,218 @@
+@import '../../../scss/styles.scss';
+
+.global-edit {
+  width: 100%;
+
+  &__form {
+    height: 100%;
+  }
+
+  &__main {
+    width: calc(100% - #{base(15)});
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  &__header {
+    h1 {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0;
+    }
+
+    margin-bottom: base(1);
+  }
+
+  &__sub-header {
+    margin-top: base(.25);
+  }
+
+  &__collection-actions {
+    list-style: none;
+    margin: 0;
+    padding: base(1.5) 0 base(.5);
+    display: flex;
+
+    li {
+      margin-right: base(.75);
+    }
+  }
+
+  &__edit {
+    padding-top: base(1);
+    padding-bottom: base(2);
+    flex-grow: 1;
+  }
+
+  &__sidebar-wrap {
+    position: fixed;
+    width: base(15);
+    height: 100%;
+    top: 0;
+    right: 0;
+    overflow: visible;
+    border-left: 1px solid var(--theme-elevation-100);
+  }
+
+  &__sidebar {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  &__sidebar-sticky-wrap {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  &__collection-actions,
+  &__document-actions,
+  &__meta,
+  &__sidebar-fields {
+    padding-left: base(1.5);
+  }
+
+  &__document-actions {
+    @include blur-bg;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    padding-right: $baseline;
+
+    >* {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  &__document-actions--with-preview {
+    display: flex;
+
+    >* {
+      width: calc(50% - #{base(.5)});
+    }
+
+    >*:first-child {
+      margin-right: base(.5);
+    }
+
+    >*:last-child {
+      margin-left: base(.5);
+    }
+
+    .form-submit {
+      .btn {
+        width: 100%;
+        padding-left: base(2);
+        padding-right: base(2);
+      }
+    }
+  }
+
+  &__api-url {
+    margin-bottom: base(1.5);
+    padding-right: base(1.5);
+
+    a {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__meta {
+    margin: auto 0 $baseline;
+    padding-top: $baseline;
+    list-style: none;
+
+    li {
+      margin-bottom: base(.5);
+    }
+  }
+
+  &__label {
+    color: var(--theme-elevation-400);
+  }
+
+  &__collection-actions,
+  &__api-url {
+
+    a,
+    button {
+      cursor: pointer;
+      font-weight: bold;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &--is-editing {
+    .collection-edit__sidebar {
+      padding-top: 0;
+    }
+  }
+
+  @include mid-break {
+    &__main {
+      width: 100%;
+      min-height: initial;
+    }
+
+    &__sidebar-wrap {
+      position: static;
+      width: 100%;
+      height: initial;
+    }
+
+    &__form {
+      display: block;
+    }
+
+    &__edit {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &__document-actions {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      top: auto;
+    }
+
+    &__document-actions,
+    &__meta,
+    &__sidebar-fields {
+      padding-left: var(--gutter-h);
+    }
+
+    &__api-url {
+      margin-bottom: base(.5);
+    }
+
+    &__collection-actions {
+      border-top: 1px solid var(--theme-elevation-100);
+      padding: base(1) 0 0 base(1);
+      order: 1;
+
+      li {
+        margin: 0 base(.5) 0 0;
+      }
+    }
+
+    &__sidebar {
+      padding-bottom: base(4);
+    }
+
+    &__sidebar-sticky {
+      height: auto;
+    }
+  }
+}