payload 0.20.1 → 0.20.4-beta.0

package/dist/admin/components/elements/DatePicker/index.scss

@@ -3,7 +3,6 @@
 $cal-icon-width: 18px;
 
 .date-time-picker {
-  position: relative;
 
   .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
   .react-datepicker__time-container {
@@ -11,19 +10,35 @@ $cal-icon-width: 18px;
   }
 
   &__icon-wrap {
-    display: flex;
-    column-gap: 10px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .icon--calendar,
+  &__clear-button {
     position: absolute;
-    right: base(.75);
+  }
+
+  .icon--calendar,
+  .icon--x {
+    @include color-svg(var(--theme-elevation-800));
+    height: auto;
+  }
+
+  &__clear-button {
+    top: base(.5);
+    right: base(2);
+  }
+
+  .icon--calendar {
     top: base(.625);
-    z-index: 2;
+    right: base(.75);
+    width: $cal-icon-width;
+    pointer-events: none;
+  }
 
-    .icon {
-      pointer-events: none;
-      width: $cal-icon-width;
-      height: auto;
-      @include color-svg($color-dark-gray);
-    }
+  .icon--x {
+    width: base(1);
   }
 
   &__clear-button {
@@ -49,7 +64,7 @@ $cal-icon-width: 18px;
       &-popper,
       &__time-container,
       &__time-box {
-        width: 100%;
+        width: base(6);
       }
 
       &__time-container {
@@ -78,19 +93,19 @@ $cal-icon-width: 18px;
 
   &--has-error {
     .react-datepicker__input-container input {
-      background-color: lighten($color-red, 20%);
+      background-color: var(--theme-error-200);
     }
   }
 
   .react-datepicker {
-    @include shadow-sm;
-    background: white;
+    @include shadow-lg;
+    background: var(--theme-input-bg);
     display: inline-flex;
-    border: 1px solid $color-light-gray;
-    font-family: $font-body;
+    border: none;
+    font-family: var(--font-body);
     font-weight: 100;
     border-radius: 0;
-    border: none;
+    color: var(--theme-elevation-800);
 
     &__header {
       padding-top: 0;
@@ -98,11 +113,11 @@ $cal-icon-width: 18px;
       text-align: center;
       border-radius: 0;
       border: none;
-      background-color: white;
+      background-color: var(--theme-input-bg);
 
       &--time {
         padding: 10px 0;
-        border-bottom: 1px solid $color-light-gray;
+        border-bottom: 1px solid var(--theme-elevation-150);
         font-weight: 600;
       }
     }
@@ -125,70 +140,89 @@ $cal-icon-width: 18px;
       top: 15px;
 
       &--next {
-        border-left-color: $color-gray;
+        border-left-color: var(--theme-elevation-400);
 
         &:focus {
-          border-left-color: darken($color-gray, 30%);
-          outline:none;
+          border-left-color: var(--theme-elevation-500);
+          outline: none;
         }
       }
 
       &--previous {
-        border-right-color: $color-gray;
+        border-right-color: var(--theme-elevation-400);
 
         &:focus {
-          border-right-color: darken($color-gray, 30%);
-          outline:none;
+          border-right-color: var(--theme-elevation-500);
+          outline: none;
         }
       }
     }
 
+    &__current-month,
+    &__header,
+    &-year-header,
+    &__day-name,
+    &__day,
+    &__time-name,
+    &-time__header {
+      color: var(--theme-elevation-1000);
+    }
+
     &__current-month {
       padding: 10px 0;
       font-weight: 600;
     }
 
     &__month-container {
-      border-right: 1px solid $color-light-gray;
+      border-right: 1px solid var(--theme-elevation-150);
+    }
+
+    &__time {
+      background: none;
     }
 
     &__time-container {
       border-left: none;
     }
 
+
     &__day-names {
-      background-color: $color-light-gray;
+      background-color: var(--theme-elevation-100);
     }
 
     &__day {
-      box-shadow: inset 0px 0px 0px 1px $color-light-gray, 0px 0px 0px 1px $color-light-gray;
+      box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150);
       font-size: base(.55);
 
+      &:hover {
+        background: var(--theme-elevation-100);
+      }
+
       &:focus {
         outline: 0;
-        background: $color-gray;
+        background: var(--theme-elevation-400);
       }
 
       &--selected {
-        font-weight: 600;
+        font-weight: bold;
 
         &:focus {
-          background-color: $color-light-gray;
+          background-color: var(--theme-elevation-150);
         }
       }
 
       &--keyboard-selected {
-        color: white;
-        font-weight: 600;
+        color: var(--theme-elevation-0);
+        font-weight: bold;
 
         &:focus {
-          background-color: $color-light-gray;
-          box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray;
+          background-color: var(--theme-elevation-150);
+          box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-800), 0px 0px 0px 1px var(--theme-elevation-800);
         }
       }
 
       &--today {
-        font-weight: 600;
+        font-weight: bold;
       }
     }
 
@@ -202,27 +236,39 @@ $cal-icon-width: 18px;
 
   .react-datepicker-popper {
     z-index: 10;
-    border: 1px solid $color-light-gray;
+    border: none;
   }
 
   .react-datepicker__day--keyboard-selected,
   .react-datepicker__month-text--keyboard-selected,
   .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
-    box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray;
-    background-color: $color-light-gray;
-    color: $color-dark-gray;
+    box-shadow: none;
+    background-color: var(--theme-elevation-150);
+    font-weight: bold;
+    color: var(--theme-elevation-800);
     border-radius: 0;
   }
 
   .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
-  .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range {
-    box-shadow: inset 0px 0px 0px 1px $color-dark-gray, 0px 0px 0px 1px $color-dark-gray;
-    background-color: $color-light-gray;
-    color: $color-dark-gray;
+  .react-datepicker__day--selected,
+  .react-datepicker__day--in-selecting-range,
+  .react-datepicker__day--in-range,
+  .react-datepicker__month-text--selected,
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__month-text--in-range {
+    box-shadow: none;
+    background-color: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    font-weight: bold;
     border-radius: 0;
   }
 
-  .react-datepicker__day:hover, .react-datepicker__month-text:hover {
+  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
+    background: var(--theme-elevation-100);
+  }
+
+  .react-datepicker__day:hover,
+  .react-datepicker__month-text:hover {
     border-radius: 0;
   }
 
@@ -233,7 +279,6 @@ $cal-icon-width: 18px;
   .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
     line-height: 20px;
     font-size: base(.5);
-    font-weight: 500;
   }
 
   @include small-break {

package/dist/admin/components/elements/DeleteDocument/index.js

@@ -11,7 +11,7 @@ import { requests } from '../../../api';
 import './index.scss';
 const baseClass = 'delete-document';
 const DeleteDocument = (props) => {
-    const { title: titleFromProps, id, collection: { admin: { useAsTitle, }, slug, labels: { singular, } = {}, } = {}, } = props;
+    const { title: titleFromProps, id, buttonId, collection: { admin: { useAsTitle, }, slug, labels: { singular, } = {}, } = {}, } = props;
     const { serverURL, routes: { api, admin } } = useConfig();
     const { setModified } = useForm();
     const [deleting, setDeleting] = useState(false);
@@ -54,13 +54,13 @@ const DeleteDocument = (props) => {
     }, [addDefaultError, closeAll, history, id, singular, slug, title, admin, api, serverURL, setModified]);
     if (id) {
         return (React.createElement(React.Fragment, null,
-            React.createElement("button", { type: "button", className: `${baseClass}__toggle`, onClick: (e) => {
+            React.createElement("button", { type: "button", id: buttonId, className: `${baseClass}__toggle`, onClick: (e) => {
                     e.preventDefault();
                     setDeleting(false);
                     toggle(modalSlug);
                 } }, "Delete"),
             React.createElement(Modal, { slug: modalSlug, className: baseClass },
-                React.createElement(MinimalTemplate, null,
+                React.createElement(MinimalTemplate, { className: `${baseClass}__template` },
                     React.createElement("h1", null, "Confirm deletion"),
                     React.createElement("p", null,
                         "You are about to delete the",
@@ -70,8 +70,8 @@ const DeleteDocument = (props) => {
                         "\"",
                         React.createElement("strong", null, titleToRender),
                         "\". Are you sure?"),
-                    React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: deleting ? undefined : () => toggle(modalSlug) }, "Cancel"),
-                    React.createElement(Button, { onClick: deleting ? undefined : handleDelete }, deleting ? 'Deleting...' : 'Confirm')))));
+                    React.createElement(Button, { id: "confirm-cancel", buttonStyle: "secondary", type: "button", onClick: deleting ? undefined : () => toggle(modalSlug) }, "Cancel"),
+                    React.createElement(Button, { onClick: deleting ? undefined : handleDelete, id: "confirm-delete" }, deleting ? 'Deleting...' : 'Confirm')))));
     }
     return null;
 };

package/dist/admin/components/elements/DeleteDocument/index.scss

@@ -6,6 +6,11 @@
   align-items: center;
   height: 100%;
 
+  &__template {
+    z-index: 1;
+    position: relative;
+  }
+
   &__toggle {
     @extend %btn-reset;
   }

package/dist/admin/components/elements/DeleteDocument/types.d.ts

@@ -2,5 +2,6 @@ import { SanitizedCollectionConfig } from '../../../../collections/config/types'
 export declare type Props = {
     collection?: SanitizedCollectionConfig;
     id?: string;
+    buttonId?: string;
     title?: string;
 };

package/dist/admin/components/elements/DuplicateDocument/index.js

@@ -18,6 +18,6 @@ const Duplicate = ({ slug }) => {
             },
         });
     }, [push, getData, slug, admin]);
-    return (React.createElement(Button, { buttonStyle: "none", className: baseClass, onClick: handleClick }, "Duplicate"));
+    return (React.createElement(Button, { id: "action-duplicate", buttonStyle: "none", className: baseClass, onClick: handleClick }, "Duplicate"));
 };
 export default Duplicate;

package/dist/admin/components/elements/Eyebrow/index.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import StepNav from '../StepNav';
+import { Gutter } from '../Gutter';
 import './index.scss';
 const baseClass = 'eyebrow';
 const Eyebrow = ({ actions }) => (React.createElement("div", { className: baseClass },
-    React.createElement(StepNav, null),
-    actions));
+    React.createElement(Gutter, { className: `${baseClass}__wrap` },
+        React.createElement(StepNav, null),
+        actions)));
 export default Eyebrow;

package/dist/admin/components/elements/Eyebrow/index.scss

@@ -6,14 +6,18 @@
   top: 0;
   z-index: $z-nav;
   padding: base(1.5) 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+
+  &__wrap {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 
   @include mid-break {
-    padding: 0 0 $baseline;
-    margin: 0;
-    position: static;
+    padding: base(1) 0;
+    position: relative;
     display: block;
   }
 }

package/dist/admin/components/elements/FileDetails/index.scss

@@ -1,12 +1,12 @@
 @import '../../../scss/styles.scss';
 
 .file-details {
-  background-color: $color-background-gray;
+  background-color: var(--theme-elevation-100);
 
   header {
     display: flex;
     align-items: flex-start;
-    border-bottom: $style-stroke-width-m solid white;
+    border-bottom: 1px solid var(--theme-elevation-0);
   }
 
   &__remove {
@@ -53,7 +53,7 @@
   }
 
   &__size-label {
-    color: $color-gray;
+    color: var(--theme-elevation-400);
   }
 
   @include large-break {
@@ -89,7 +89,7 @@
     }
 
     &__main-detail {
-      border-top: $style-stroke-width-m solid white;
+      border-top: $style-stroke-width-m solid var(--theme-elevation-0);
       order: 3;
       width: 100%;
     }

package/dist/admin/components/elements/GenerateConfirmation/index.js

@@ -20,7 +20,7 @@ const GenerateConfirmation = (props) => {
                 toggle(modalSlug);
             } }, "Generate new API key"),
         React.createElement(Modal, { slug: modalSlug, className: baseClass },
-            React.createElement(MinimalTemplate, null,
+            React.createElement(MinimalTemplate, { className: `${baseClass}__template` },
                 React.createElement("h1", null, "Confirm Generation"),
                 React.createElement("p", null,
                     "Generating a new API key will",

package/dist/admin/components/elements/GenerateConfirmation/index.scss

@@ -6,6 +6,11 @@
   align-items: center;
   height: 100%;
 
+  &__template {
+    position: relative;
+    z-index: 1;
+  }
+
   .btn {
     margin-right: $baseline;
   }

package/dist/admin/components/elements/Gutter/index.d.ts

@@ -0,0 +1,13 @@
+import React, { Ref } from 'react';
+import './index.scss';
+declare type Props = {
+    left?: boolean;
+    right?: boolean;
+    negativeLeft?: boolean;
+    negativeRight?: boolean;
+    className?: string;
+    children: React.ReactNode;
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const Gutter: React.FC<Props>;
+export {};

package/dist/admin/components/elements/Gutter/index.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import './index.scss';
+const baseClass = 'gutter';
+export const Gutter = forwardRef((props, ref) => {
+    const { left = true, right = true, negativeLeft = false, negativeRight = false, className, children, } = props;
+    const shouldPadLeft = left && !negativeLeft;
+    const shouldPadRight = right && !negativeRight;
+    return (React.createElement("div", { ref: ref, className: [
+            shouldPadLeft && `${baseClass}--left`,
+            shouldPadRight && `${baseClass}--right`,
+            negativeLeft && `${baseClass}--negative-left`,
+            negativeRight && `${baseClass}--negative-right`,
+            className,
+        ].filter(Boolean).join(' ') }, children));
+});
+Gutter.displayName = 'Gutter';

package/dist/admin/components/elements/Gutter/index.scss

@@ -0,0 +1,19 @@
+@import '../../../scss/styles.scss';
+
+.gutter {
+  &--left {
+    padding-left: var(--gutter-h);
+  }
+
+  &--right {
+    padding-right: var(--gutter-h);
+  }
+
+  &--negative-left {
+    margin-left: calc(-1 * var(--gutter-h));
+  }
+
+  &--negative-right {
+    margin-right: calc(-1 * var(--gutter-h));
+  }
+}

package/dist/admin/components/elements/IDLabel/index.scss

@@ -3,8 +3,8 @@
 .id-label {
   font-size: base(.75);
   font-weight: normal;
-  color: $color-gray;
-  background: $color-background-gray;
+  color: var(--theme-elevation-400);
+  background: var(--theme-elevation-100);
   padding: base(.25) base(.5);
   border-radius: $style-radius-m;
   display: inline-flex;

package/dist/admin/components/elements/Loading/index.js

@@ -1,3 +1,3 @@
 import React from 'react';
-const Loading = () => React.createElement("div", null, "Loading");
+const Loading = () => React.createElement("div", null);
 export default Loading;

package/dist/admin/components/elements/Localizer/index.scss

@@ -4,6 +4,7 @@
   position: relative;
 
   button {
+    color: currentColor;
     padding: base(.25) 0;
     font-size: 1rem;
     line-height: base(1);
@@ -23,7 +24,7 @@
   }
 
   span {
-    color: $color-gray;
+    color: var(--theme-elevation-400);
   }
 
   ul {

package/dist/admin/components/elements/Nav/index.scss

@@ -8,13 +8,15 @@
   height: 100vh;
   width: base(9);
   overflow: hidden;
+  border-right: 1px solid var(--theme-elevation-100);
 
   header {
     width: 100%;
     display: flex;
     margin-bottom: base(1.5);
 
-    a, button {
+    a,
+    button {
       display: block;
       padding: 0;
 
@@ -35,7 +37,8 @@
     visibility: hidden;
     cursor: pointer;
 
-    &:active, &:focus {
+    &:active,
+    &:focus {
       outline: none;
     }
   }
@@ -58,14 +61,14 @@
   }
 
   &__label {
-    color: $color-gray;
+    color: var(--theme-elevation-400);
   }
 
   &__controls {
     margin-top: auto;
     margin-bottom: 0;
 
-    > * {
+    >* {
       margin-top: base(1);
     }
   }
@@ -126,8 +129,8 @@
   }
 
   @include mid-break {
-    background: rgba($color-background-gray, .8);
-    backdrop-filter: saturate(180%) blur(5px);
+    @include blur-bg;
+    position: fixed;
     width: 100%;
     height: base(3);
     z-index: $z-modal;
@@ -141,7 +144,9 @@
 
     header,
     &__wrap {
-      padding: $baseline;
+      position: relative;
+      z-index: 1;
+      padding: $baseline var(--gutter-h);
     }
 
     header {

package/dist/admin/components/elements/Paginator/ClickableArrow/index.scss

@@ -11,8 +11,8 @@
   &--is-disabled {
     cursor: default;
 
-    .icon .stroke{
-      stroke: $color-gray;
+    .icon .stroke {
+      stroke: var(--theme-elevation-400);
     }
   }
 }

package/dist/admin/components/elements/Paginator/index.scss

@@ -8,8 +8,8 @@
     cursor: pointer;
 
     &--is-current {
-      background: $color-background-gray;
-      color: $color-gray;
+      background: var(--theme-elevation-100);
+      color: var(--theme-elevation-400);
       cursor: default;
     }
 
@@ -28,11 +28,11 @@
     align-content: center;
     outline: 0;
     padding: base(.5);
-    color: $color-dark-gray;
+    color: var(--theme-elevation-800);
     line-height: base(1);
 
     &:hover:not(.clickable-arrow--is-disabled) {
-      background: $color-background-gray;
+      background: var(--theme-elevation-100);
     }
   }
 
@@ -43,6 +43,6 @@
 
   &__separator {
     align-self: center;
-    color: $color-gray;
+    color: var(--theme-elevation-400);
   }
 }

package/dist/admin/components/elements/PerPage/index.js

@@ -12,7 +12,7 @@ const PerPage = ({ limits = defaultLimits, limit, handleChange, modifySearchPara
     const params = useSearchParams();
     const history = useHistory();
     return (React.createElement("div", { className: baseClass },
-        React.createElement(Popup, { color: "dark", horizontalAlign: "right", button: (React.createElement("strong", null,
+        React.createElement(Popup, { horizontalAlign: "right", button: (React.createElement("strong", null,
                 "Per Page:",
                 ' ',
                 limit,

package/dist/admin/components/elements/PerPage/index.scss

@@ -15,7 +15,6 @@
 
   &__button {
     @extend %btn-reset;
-    color: white;
     cursor: pointer;
     text-align: left;
     width: 100%;
@@ -29,7 +28,7 @@
     font-weight: bold;
 
     svg {
-      @include color-svg(white);
+      @include color-svg(var(--theme-elevation-1000));
       margin-left: base(-.25);
       margin-right: base(-.125);
       transform: rotate(-90deg);