payload 0.20.1 → 0.20.4-beta.0

package/dist/admin/components/forms/field-types/Point/index.scss

@@ -1,7 +1,7 @@
 @import '../../../../scss/styles.scss';
 
 .point {
-	position: relative;
+  position: relative;
   margin-bottom: $baseline;
 
   &__wrap {
@@ -18,13 +18,13 @@
     }
   }
 
-	input {
-		@include formInput;
-	}
+  input {
+    @include formInput;
+  }
 
-	&.error {
-		input {
-      background-color: lighten($color-red, 20%);
-		}
-	}
+  &.error {
+    input {
+      background-color: var(--theme-error-200);
+    }
+  }
 }

package/dist/admin/components/forms/field-types/RadioGroup/Input.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { RadioField } from '../../../../../fields/config/types';
+import { Description } from '../../FieldDescription/types';
+import { OnChange } from './types';
+import './index.scss';
+export declare type RadioGroupInputProps = Omit<RadioField, 'type'> & {
+    showError?: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    path?: string;
+    required?: boolean;
+    layout?: 'horizontal' | 'vertical';
+    description?: Description;
+    onChange?: OnChange;
+    value?: string;
+    placeholder?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    width?: string;
+};
+declare const RadioGroupInput: React.FC<RadioGroupInputProps>;
+export default RadioGroupInput;

package/dist/admin/components/forms/field-types/RadioGroup/Input.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Error from '../../Error';
+import Label from '../../Label';
+import FieldDescription from '../../FieldDescription';
+import RadioInput from './RadioInput';
+import { optionIsObject } from '../../../../../fields/config/types';
+import './index.scss';
+const baseClass = 'radio-group';
+const RadioGroupInput = (props) => {
+    const { name, path: pathFromProps, required, label, readOnly, layout = 'horizontal', style, className, width, description, onChange, value, showError, errorMessage, options, } = props;
+    const path = pathFromProps || name;
+    const classes = [
+        'field-type',
+        baseClass,
+        className,
+        `${baseClass}--layout-${layout}`,
+        showError && 'error',
+        readOnly && `${baseClass}--read-only`,
+    ].filter(Boolean).join(' ');
+    return (React.createElement("div", { className: classes, style: {
+            ...style,
+            width,
+        } },
+        React.createElement("div", { className: `${baseClass}__error-wrap` },
+            React.createElement(Error, { showError: showError, message: errorMessage })),
+        React.createElement(Label, { htmlFor: `field-${path}`, label: label, required: required }),
+        React.createElement("ul", { id: `field-${path}`, className: `${baseClass}--group` }, options.map((option) => {
+            let optionValue = '';
+            if (optionIsObject(option)) {
+                optionValue = option.value;
+            }
+            else {
+                optionValue = option;
+            }
+            const isSelected = String(optionValue) === String(value);
+            return (React.createElement("li", { key: `${path} - ${optionValue}` },
+                React.createElement(RadioInput, { path: path, isSelected: isSelected, option: optionIsObject(option) ? option : { label: option, value: option }, onChange: readOnly ? undefined : onChange })));
+        })),
+        React.createElement(FieldDescription, { value: value, description: description })));
+};
+export default RadioGroupInput;

package/dist/admin/components/forms/field-types/RadioGroup/RadioInput/index.js

@@ -7,7 +7,7 @@ const RadioInput = (props) => {
         baseClass,
         isSelected && `${baseClass}--is-selected`,
     ].filter(Boolean).join(' ');
-    const id = `${path}-${option.value}`;
+    const id = `field-${path}-${option.value}`;
     return (React.createElement("label", { htmlFor: id },
         React.createElement("div", { className: classes },
             React.createElement("input", { id: id, type: "radio", checked: isSelected, onChange: () => (typeof onChange === 'function' ? onChange(option.value) : null) }),

package/dist/admin/components/forms/field-types/RadioGroup/RadioInput/index.scss

@@ -23,10 +23,10 @@
       content: ' ';
       display: block;
       border-radius: 100%;
-      background-color: $color-dark-gray;
+      background-color: var(--theme-elevation-800);
       width: 100%;
       height: 100%;
-      box-shadow: inset 0 0 0 base(.1875) white;
+      box-shadow: inset 0 0 0 base(.1875) var(--theme-elevation-0);
       opacity: 0;
     }
   }
@@ -64,13 +64,13 @@
     cursor: default;
 
     &__label {
-      color: $color-dark-gray;
+      color: var(--theme-elevation-800);
     }
 
     &--is-selected {
       .radio-input__styled-radio {
         &:before {
-          background-color: $color-dark-gray;
+          background-color: var(--theme-elevation-800);
         }
       }
     }

package/dist/admin/components/forms/field-types/RadioGroup/RadioInput/types.d.ts

@@ -1,9 +1,10 @@
+import { OnChange } from '../types';
 export declare type Props = {
     isSelected: boolean;
     option: {
         label: string;
         value: string;
     };
-    onChange: (val: string) => void;
+    onChange: OnChange;
     path: string;
 };

package/dist/admin/components/forms/field-types/RadioGroup/index.d.ts

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

package/dist/admin/components/forms/field-types/RadioGroup/index.js

@@ -1,14 +1,8 @@
 import React, { useCallback } from 'react';
 import useField from '../../useField';
 import withCondition from '../../withCondition';
-import Error from '../../Error';
-import Label from '../../Label';
-import FieldDescription from '../../FieldDescription';
-import RadioInput from './RadioInput';
 import { radio } from '../../../../../fields/validations';
-import { optionIsObject } from '../../../../../fields/config/types';
-import './index.scss';
-const baseClass = 'radio-group';
+import RadioGroupInput from './Input';
 const RadioGroup = (props) => {
     const { name, path: pathFromProps, required, validate = radio, label, admin: { readOnly, layout = 'horizontal', style, className, width, description, condition, } = {}, options, } = props;
     const path = pathFromProps || name;
@@ -20,33 +14,6 @@ const RadioGroup = (props) => {
         validate: memoizedValidate,
         condition,
     });
-    const classes = [
-        'field-type',
-        baseClass,
-        className,
-        `${baseClass}--layout-${layout}`,
-        showError && 'error',
-        readOnly && `${baseClass}--read-only`,
-    ].filter(Boolean).join(' ');
-    return (React.createElement("div", { className: classes, style: {
-            ...style,
-            width,
-        } },
-        React.createElement("div", { className: `${baseClass}__error-wrap` },
-            React.createElement(Error, { showError: showError, message: errorMessage })),
-        React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement("ul", { className: `${baseClass}--group` }, options.map((option) => {
-            let optionValue = '';
-            if (optionIsObject(option)) {
-                optionValue = option.value;
-            }
-            else {
-                optionValue = option;
-            }
-            const isSelected = String(optionValue) === String(value);
-            return (React.createElement("li", { key: `${path} - ${optionValue}` },
-                React.createElement(RadioInput, { path: path, isSelected: isSelected, option: optionIsObject(option) ? option : { label: option, value: option }, onChange: readOnly ? undefined : setValue })));
-        })),
-        React.createElement(FieldDescription, { value: value, description: description })));
+    return (React.createElement(RadioGroupInput, { path: path, name: name, onChange: readOnly ? undefined : setValue, value: value, showError: showError, errorMessage: errorMessage, required: required, label: label, layout: layout, style: style, className: className, width: width, description: description, options: options }));
 };
 export default withCondition(RadioGroup);

package/dist/admin/components/forms/field-types/RadioGroup/types.d.ts

@@ -2,3 +2,4 @@ import { RadioField } from '../../../../../fields/config/types';
 export declare type Props = Omit<RadioField, 'type'> & {
     path?: string;
 };
+export declare type OnChange<T = string> = (value: T) => void;

package/dist/admin/components/forms/field-types/Relationship/index.js

@@ -249,7 +249,7 @@ const Relationship = (props) => {
     const valueToRender = (findOptionsByValue() || value);
     if ((valueToRender === null || valueToRender === void 0 ? void 0 : valueToRender.value) === 'null')
         valueToRender.value = null;
-    return (React.createElement("div", { className: classes, style: {
+    return (React.createElement("div", { id: `field-${path}`, className: classes, style: {
             ...style,
             width,
         } },

package/dist/admin/components/forms/field-types/Relationship/index.scss

@@ -6,17 +6,17 @@
 }
 
 .relationship__error-loading {
-  border: 1px solid $color-red;
+  border: 1px solid var(--theme-error-500);
   min-height: base(2);
   padding: base(.5) base(.75);
-  background-color: $color-red;
-  color: white;
+  background-color: var(--theme-error-500);
+  color: var(--theme-elevation-0);
 }
 
 .relationship--read-only {
   div.react-select {
     div.rs__control {
-      background: lighten($color-light-gray, 5%);
+      background: var(--theme-elevation-100);
     }
   }
 }

package/dist/admin/components/forms/field-types/RichText/RichText.js

@@ -14,7 +14,6 @@ import toggleLeaf from './leaves/toggle';
 import hotkeys from './hotkeys';
 import enablePlugins from './enablePlugins';
 import defaultValue from '../../../../../fields/richText/defaultValue';
-import FieldTypeGutter from '../../FieldTypeGutter';
 import FieldDescription from '../../FieldDescription';
 import withHTML from './plugins/withHTML';
 import listTypes from './elements/listTypes';
@@ -25,7 +24,7 @@ const defaultElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'indent
 const defaultLeaves = ['bold', 'italic', 'underline', 'strikethrough', 'code'];
 const baseClass = 'rich-text';
 const RichText = (props) => {
-    const { path: pathFromProps, name, required, validate = richText, label, admin, admin: { readOnly, style, className, width, placeholder, description, hideGutter, condition, } = {}, } = props;
+    const { path: pathFromProps, name, required, validate = richText, label, admin, admin: { readOnly, style, className, width, placeholder, description, condition, } = {}, } = props;
     const elements = (admin === null || admin === void 0 ? void 0 : admin.elements) || defaultElements;
     const leaves = (admin === null || admin === void 0 ? void 0 : admin.leaves) || defaultLeaves;
     const path = pathFromProps || name;
@@ -109,9 +108,8 @@ const RichText = (props) => {
             width,
         } },
         React.createElement("div", { className: `${baseClass}__wrap` },
-            !hideGutter && (React.createElement(FieldTypeGutter, null)),
             React.createElement(Error, { showError: showError, message: errorMessage }),
-            React.createElement(Label, { htmlFor: path, label: label, required: required }),
+            React.createElement(Label, { htmlFor: `field-${path}`, label: label, required: required }),
             React.createElement(Slate, { editor: editor, value: valueToRender, onChange: (val) => {
                     if (val !== defaultValue && val !== value) {
                         setValue(val);
@@ -119,34 +117,35 @@ const RichText = (props) => {
                 } },
                 React.createElement("div", { className: `${baseClass}__wrapper` },
                     React.createElement("div", { className: `${baseClass}__toolbar` },
-                        elements.map((element, i) => {
-                            let elementName;
-                            if (typeof element === 'object' && (element === null || element === void 0 ? void 0 : element.name))
-                                elementName = element.name;
-                            if (typeof element === 'string')
-                                elementName = element;
-                            const elementType = enabledElements[elementName];
-                            const Button = elementType === null || elementType === void 0 ? void 0 : elementType.Button;
-                            if (Button) {
-                                return (React.createElement(Button, { key: i, path: path }));
-                            }
-                            return null;
-                        }),
-                        leaves.map((leaf, i) => {
-                            let leafName;
-                            if (typeof leaf === 'object' && (leaf === null || leaf === void 0 ? void 0 : leaf.name))
-                                leafName = leaf.name;
-                            if (typeof leaf === 'string')
-                                leafName = leaf;
-                            const leafType = enabledLeaves[leafName];
-                            const Button = leafType === null || leafType === void 0 ? void 0 : leafType.Button;
-                            if (Button) {
-                                return (React.createElement(Button, { key: i, path: path }));
-                            }
-                            return null;
-                        })),
+                        React.createElement("div", { className: `${baseClass}__toolbar-wrap` },
+                            elements.map((element, i) => {
+                                let elementName;
+                                if (typeof element === 'object' && (element === null || element === void 0 ? void 0 : element.name))
+                                    elementName = element.name;
+                                if (typeof element === 'string')
+                                    elementName = element;
+                                const elementType = enabledElements[elementName];
+                                const Button = elementType === null || elementType === void 0 ? void 0 : elementType.Button;
+                                if (Button) {
+                                    return (React.createElement(Button, { key: i, path: path }));
+                                }
+                                return null;
+                            }),
+                            leaves.map((leaf, i) => {
+                                let leafName;
+                                if (typeof leaf === 'object' && (leaf === null || leaf === void 0 ? void 0 : leaf.name))
+                                    leafName = leaf.name;
+                                if (typeof leaf === 'string')
+                                    leafName = leaf;
+                                const leafType = enabledLeaves[leafName];
+                                const Button = leafType === null || leafType === void 0 ? void 0 : leafType.Button;
+                                if (Button) {
+                                    return (React.createElement(Button, { key: i, path: path }));
+                                }
+                                return null;
+                            }))),
                     React.createElement("div", { className: `${baseClass}__editor`, ref: editorRef },
-                        React.createElement(Editable, { className: `${baseClass}__input`, renderElement: renderElement, renderLeaf: renderLeaf, placeholder: placeholder, spellCheck: true, readOnly: readOnly, onBlur: onBlur, onKeyDown: (event) => {
+                        React.createElement(Editable, { id: `field-${path}`, className: `${baseClass}__input`, renderElement: renderElement, renderLeaf: renderLeaf, placeholder: placeholder, spellCheck: true, readOnly: readOnly, onBlur: onBlur, onKeyDown: (event) => {
                                 if (event.key === 'Enter') {
                                     if (event.shiftKey) {
                                         event.preventDefault();

package/dist/admin/components/forms/field-types/RichText/elements/link/index.js

@@ -23,7 +23,7 @@ const Link = ({ attributes, children, element, editorRef }) => {
     }, [editor, element]);
     return (React.createElement("span", { className: baseClass, ...attributes },
         React.createElement("span", { style: { userSelect: 'none' }, contentEditable: false },
-            React.createElement(Popup, { initActive: element.url === undefined, buttonType: "none", size: "small", color: "dark", horizontalAlign: "center", forceOpen: open, onToggleOpen: handleToggleOpen, boundingRef: editorRef, render: ({ close }) => (React.createElement(Fragment, null,
+            React.createElement(Popup, { initActive: element.url === undefined, buttonType: "none", size: "small", horizontalAlign: "center", forceOpen: open, onToggleOpen: handleToggleOpen, boundingRef: editorRef, render: ({ close }) => (React.createElement(Fragment, null,
                     React.createElement("div", { className: `${baseClass}__url-wrap` },
                         React.createElement("input", { value: element.url || '', className: `${baseClass}__url`, placeholder: "Enter a URL", onChange: (e) => {
                                 const { value } = e.target;

package/dist/admin/components/forms/field-types/RichText/elements/link/index.scss

@@ -23,6 +23,7 @@
 
 .rich-text-link__button {
   @extend %btn-reset;
+  font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   color: inherit;
@@ -51,7 +52,7 @@
   transform: translateY(-50%);
 
   svg {
-    @include color-svg(white);
+    @include color-svg(var(--theme-elevation-0));
     transform: rotate(-90deg);
   }
 }
@@ -61,15 +62,14 @@
   padding-right: base(1.75);
   min-width: base(12);
   width: 100%;
-  background: rgba($color-background-gray, .1);
-  border: 0;
-  color: white;
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-1000);
 }
 
 .rich-text-link__new-tab {
   svg {
-    @include color-svg(white);
-    background-color: rgba(white, .1);
+    @include color-svg(var(--theme-elevation-900));
+    background: var(--theme-elevation-100);
     margin-right: base(.5);
   }
 

package/dist/admin/components/forms/field-types/RichText/elements/ol/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import './index.scss';
 declare const ol: {
     Button: () => JSX.Element;
     Element: ({ attributes, children }: {

package/dist/admin/components/forms/field-types/RichText/elements/ol/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import ListButton from '../ListButton';
 import OLIcon from '../../../../../icons/OrderedList';
-const OL = ({ attributes, children }) => (React.createElement("ol", { ...attributes }, children));
+import './index.scss';
+const OL = ({ attributes, children }) => (React.createElement("ol", { className: "rich-text-ol", ...attributes }, children));
 const ol = {
     Button: () => (React.createElement(ListButton, { format: "ol" },
         React.createElement(OLIcon, null))),

package/dist/admin/components/forms/field-types/RichText/elements/ol/index.scss

@@ -0,0 +1,7 @@
+@import '../../../../../../scss/styles.scss';
+
+.rich-text-ol {
+  &[data-slate-node=element] {
+    margin: base(.625) 0;
+  }
+}

package/dist/admin/components/forms/field-types/RichText/elements/relationship/Button/index.js

@@ -60,7 +60,7 @@ const RelationshipButton = ({ path }) => {
         React.createElement(ElementButton, { className: baseClass, format: "relationship", onClick: () => setRenderModal(true) },
             React.createElement(RelationshipIcon, null)),
         renderModal && (React.createElement(Modal, { slug: modalSlug, className: `${baseClass}__modal` },
-            React.createElement(MinimalTemplate, null,
+            React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
                 React.createElement("header", { className: `${baseClass}__header` },
                     React.createElement("h3", null, "Add Relationship"),
                     React.createElement(Button, { buttonStyle: "none", onClick: () => {

package/dist/admin/components/forms/field-types/RichText/elements/relationship/Button/index.scss

@@ -6,13 +6,15 @@
   }
 
   &__modal {
+    @include blur-bg;
     display: flex;
     align-items: center;
     height: 100%;
+  }
 
-    &.payload__modal-item--enterDone {
-      @include blur-bg;
-    }
+  &__modal-template {
+    position: relative;
+    z-index: 1;
   }
 
   &__header {

package/dist/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss

@@ -1,12 +1,23 @@
 @import '../../../../../../../scss/styles.scss';
 
 .rich-text-relationship {
+  @extend %body;
+  @include shadow-sm;
   padding: base(.5);
   display: flex;
   align-items: flex-start;
-  background: $color-background-gray;
+  background: var(--theme-input-bg);
+  border: 1px solid var(--theme-elevation-100);
   max-width: base(15);
-  margin-bottom: base(.5);
+  font-family: var(--font-body);
+
+  &:hover {
+    border: 1px solid var(--theme-elevation-150);
+  }
+
+  &[data-slate-node=element] {
+    margin: base(.625) 0;
+  }
 
   svg {
     width: base(1.25);

package/dist/admin/components/forms/field-types/RichText/elements/ul/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import './index.scss';
 declare const ul: {
     Button: () => JSX.Element;
     Element: ({ attributes, children }: {

package/dist/admin/components/forms/field-types/RichText/elements/ul/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import ULIcon from '../../../../../icons/UnorderedList';
 import ListButton from '../ListButton';
-const UL = ({ attributes, children }) => (React.createElement("ul", { ...attributes }, children));
+import './index.scss';
+const UL = ({ attributes, children }) => (React.createElement("ul", { className: "rich-text-ul", ...attributes }, children));
 const ul = {
     Button: () => (React.createElement(ListButton, { format: "ul" },
         React.createElement(ULIcon, null))),

package/dist/admin/components/forms/field-types/RichText/elements/ul/index.scss

@@ -0,0 +1,7 @@
+@import '../../../../../../scss/styles.scss';
+
+.rich-text-ul {
+  &[data-slate-node=element] {
+    margin: base(.625) 0;
+  }
+}

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/EditModal/index.scss

@@ -8,6 +8,8 @@
   .template-minimal {
     padding-top: base(4);
     align-items: flex-start;
+    position: relative;
+    z-index: 1;
   }
 
   &__header {
@@ -28,12 +30,14 @@
       display: none;
     }
   }
+
   .rich-text__toolbar {
     margin-bottom: 0;
   }
+
   .rich-text__editor {
-    background-color: white;
-    border: 1px solid $color-light-gray;
+    background-color: var(--theme-elevation-0);
+    border: 1px solid var(--theme-elevation-150);
     border-top: none;
     min-height: base(5);
     padding: base(.35) base(.5);

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/index.js

@@ -65,7 +65,7 @@ const Element = ({ attributes, children, element, path, fieldProps }) => {
                                 removeUpload();
                             }, tooltip: "Remove Upload" })))),
             React.createElement("div", { className: `${baseClass}__bottomRow` },
-                React.createElement("h5", null, upload === null || upload === void 0 ? void 0 : upload.filename))),
+                React.createElement("strong", null, upload === null || upload === void 0 ? void 0 : upload.filename))),
         children,
         modalToRender === 'swap' && (React.createElement(SwapUploadModal, { slug: modalSlug, element: element, closeModal: closeModal, setRelatedCollectionConfig: setRelatedCollection, relatedCollectionConfig: relatedCollection })),
         (modalToRender === 'edit' && fieldSchema) && (React.createElement(EditModal, { slug: modalSlug, closeModal: closeModal, relatedCollectionConfig: relatedCollection, fieldSchema: fieldSchema, element: element }))));

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss

@@ -1,11 +1,23 @@
 @import '../../../../../../../scss/styles.scss';
 
 .rich-text-upload {
+  @extend %body;
+  @include shadow-sm;
   max-width: base(15);
   display: flex;
   align-items: center;
-  background: white;
+  background: var(--theme-input-bg);
+  border: 1px solid var(--theme-elevation-100);
   position: relative;
+  font-family: var(--font-body);
+
+  &:hover {
+    border: 1px solid var(--theme-elevation-150);
+  }
+
+  &[data-slate-node=element] {
+    margin: base(.625) 0;
+  }
 
   &__card {
     @include soft-shadow-bottom;
@@ -24,12 +36,13 @@
     position: relative;
     overflow: hidden;
 
-    img, svg {
+    img,
+    svg {
       position: absolute;
       object-fit: cover;
       width: 100%;
       height: 100%;
-      background-color: $color-dark-gray;
+      background-color: var(--theme-elevation-800);
     }
   }
 
@@ -66,7 +79,7 @@
 
   &__bottomRow {
     padding: base(.5);
-    border-top: 1px solid $color-background-gray;
+    border-top: 1px solid var(--theme-elevation-100);
   }
 
   h5 {

package/dist/admin/components/forms/field-types/RichText/elements/upload/addSwapModals.scss

@@ -8,6 +8,8 @@
   .template-minimal {
     padding-top: base(4);
     align-items: flex-start;
+    position: relative;
+    z-index: 1;
   }
 
   &__header {