payload 0.20.1 → 0.20.4-beta.0

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

@@ -6,12 +6,15 @@
   border: 0;
   display: inline-flex;
   vertical-align: middle;
-  background: $color-light-gray;
-  color: $color-dark-gray;
+  background: var(--theme-elevation-150);
+  color: var(--theme-elevation-800);
   border-radius: $style-radius-s;
   padding: 0 base(.25);
   padding-left: base(.0875 + .25);
   cursor: default;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &:active,
   &:focus {
@@ -38,14 +41,15 @@
   }
 
   &--style-white {
-    background: white;
+    background: var(--theme-elevation-0);
+
     &.pill--has-action {
       &:hover {
-        background: lighten($color-light-gray, 3%);
+        background: var(--theme-elevation-100);
       }
 
       &:active {
-        background: lighten($color-light-gray, 5%);
+        background: var(--theme-elevation-100);
       }
     }
   }
@@ -53,43 +57,43 @@
   &--style-light {
     &.pill--has-action {
       &:hover {
-        background: lighten($color-light-gray, 3%);
+        background: var(--theme-elevation-100);
       }
 
       &:active {
-        background: lighten($color-light-gray, 5%);
+        background: var(--theme-elevation-100);
       }
     }
   }
 
   &--style-light-gray {
-    background: $color-background-gray;
-    color: $color-dark-gray;
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
   }
 
   &--style-warning {
-    background: $color-yellow;
+    background: var(--theme-warning-500);
   }
 
   &--style-success {
-    background: $color-green;
+    background: var(--theme-success-500);
   }
 
   &--style-dark {
-    background: $color-dark-gray;
-    color: white;
+    background: var(--theme-elevation-800);
+    color: var(--theme-elevation-0);
 
     svg {
-      @include color-svg(white);
+      @include color-svg(var(--theme-elevation-0));
     }
 
     &.pill--has-action {
       &:hover {
-        background: lighten($color-dark-gray, 3%);
+        background: var(--theme-elevation-750);
       }
 
       &:active {
-        background: lighten($color-dark-gray, 5%);
+        background: var(--theme-elevation-700);
       }
     }
   }

package/dist/admin/components/elements/Popup/PopupButton/index.js

@@ -2,9 +2,10 @@ import React from 'react';
 import './index.scss';
 const baseClass = 'popup-button';
 const PopupButton = (props) => {
-    const { buttonType, button, setActive, active, } = props;
+    const { className, buttonType, button, setActive, active, } = props;
     const classes = [
         baseClass,
+        className,
         `${baseClass}--${buttonType}`,
     ].filter(Boolean).join(' ');
     const handleClick = () => {

package/dist/admin/components/elements/Popup/PopupButton/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare type Props = {
+    className?: string;
     buttonType: 'custom' | 'default' | 'none';
     button: React.ReactNode;
     setActive: (active: boolean) => void;

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useWindowInfo } from '@faceless-ui/window-info';
 import { useScrollInfo } from '@faceless-ui/scroll-info';
 import useThrottledEffect from '../../../hooks/useThrottledEffect';
@@ -6,7 +6,7 @@ import PopupButton from './PopupButton';
 import './index.scss';
 const baseClass = 'popup';
 const Popup = (props) => {
-    const { className, render, size = 'small', color = 'light', button, buttonType = 'default', children, showOnHover = false, horizontalAlign: horizontalAlignFromProps = 'left', verticalAlign: verticalAlignFromProps = 'top', initActive = false, onToggleOpen, padding, forceOpen, boundingRef, } = props;
+    const { className, buttonClassName, render, size = 'small', color = 'light', button, buttonType = 'default', children, showOnHover = false, horizontalAlign: horizontalAlignFromProps = 'left', verticalAlign: verticalAlignFromProps = 'top', initActive = false, onToggleOpen, padding, forceOpen, boundingRef, } = props;
     const buttonRef = useRef(null);
     const contentRef = useRef(null);
     const [mounted, setMounted] = useState(false);
@@ -15,12 +15,12 @@ const Popup = (props) => {
     const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps);
     const { y: scrollY } = useScrollInfo();
     const { height: windowHeight, width: windowWidth } = useWindowInfo();
-    const handleClickOutside = (e) => {
+    const handleClickOutside = useCallback((e) => {
         if (contentRef.current.contains(e.target)) {
             return;
         }
         setActive(false);
-    };
+    }, []);
     useThrottledEffect(() => {
         if (contentRef.current && buttonRef.current) {
             const { left: contentLeftPos, right: contentRightPos, top: contentTopPos, bottom: contentBottomPos, } = contentRef.current.getBoundingClientRect();
@@ -63,7 +63,7 @@ const Popup = (props) => {
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [active, onToggleOpen]);
+    }, [active, handleClickOutside, onToggleOpen]);
     useEffect(() => {
         setActive(forceOpen);
     }, [forceOpen]);
@@ -79,8 +79,8 @@ const Popup = (props) => {
     return (React.createElement("div", { className: classes },
         React.createElement("div", { ref: buttonRef, className: `${baseClass}__wrapper` }, showOnHover
             ? (React.createElement("div", { className: `${baseClass}__on-hover-watch`, onMouseEnter: () => setActive(true), onMouseLeave: () => setActive(false) },
-                React.createElement(PopupButton, { buttonType: buttonType, button: button, setActive: setActive, active: active })))
-            : (React.createElement(PopupButton, { buttonType: buttonType, button: button, setActive: setActive, active: active }))),
+                React.createElement(PopupButton, { ...{ className: buttonClassName, buttonType, button, setActive, active } })))
+            : (React.createElement(PopupButton, { ...{ className: buttonClassName, buttonType, button, setActive, active } }))),
         React.createElement("div", { className: `${baseClass}__content`, ref: contentRef },
             React.createElement("div", { className: `${baseClass}__wrap` },
                 React.createElement("div", { className: `${baseClass}__scroll`, style: {

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

@@ -5,9 +5,8 @@
 
   &__content {
     position: absolute;
-    background: white;
-    opacity: 0;
-    visibility: hidden;
+    background: var(--theme-input-bg);
+    display: none;
     z-index: $z-modal;
     max-width: calc(100vw - #{$baseline});
 
@@ -16,7 +15,7 @@
       position: absolute;
       top: calc(100% - 1px);
       border: 12px solid transparent;
-      border-top-color: white;
+      border-top-color: var(--theme-input-bg);
     }
   }
 
@@ -42,8 +41,12 @@
   ////////////////////////////////
 
   &--size-small {
+    .popup__scroll {
+      padding: base(.75) calc(var(--scrollbar-width) + #{base(.75)}) base(.75) base(.75);
+    }
+
     .popup__content {
-      @include shadow-sm;
+      @include shadow-m;
     }
 
     &.popup--h-align-left {
@@ -69,11 +72,11 @@
 
   &--size-wide {
     .popup__content {
-      @include shadow-sm;
+      @include shadow-m;
 
       &:after {
         border: 12px solid transparent;
-        border-top-color: white;
+        border-top-color: var(--theme-input-bg);
       }
     }
 
@@ -147,14 +150,14 @@
         top: unset;
         bottom: calc(100% - 1px);
         border-top-color: transparent !important;
-        border-bottom-color: white;
+        border-bottom-color: var(--theme-input-bg);
       }
     }
 
     &.popup--color-dark {
       .popup__content {
         &:after {
-          border-bottom-color: $color-dark-gray;
+          border-bottom-color: var(--theme-elevation-800);
         }
       }
     }
@@ -166,11 +169,11 @@
 
   &--color-dark {
     .popup__content {
-      background: $color-dark-gray;
-      color: white;
+      background: var(--theme-elevation-800);
+      color: var(--theme-input-bg);
 
       &:after {
-        border-top-color: $color-dark-gray;
+        border-top-color: var(--theme-elevation-800);
       }
     }
   }
@@ -181,14 +184,14 @@
 
   &--active {
     .popup__content {
-      opacity: 1;
-      visibility: visible;
+      display: block;
     }
   }
 
   @include mid-break {
+
     &__scroll,
-    &--size-large .popup__scroll{
+    &--size-large .popup__scroll {
       padding: base(.75);
       padding-right: calc(var(--scrollbar-width) + #{base(.75)});
     }
@@ -206,11 +209,11 @@
     &--h-align-center {
       .popup__content {
         left: 50%;
-        transform: translateX(-50%);
+        transform: translateX(-0%);
 
         &:after {
           left: 50%;
-          transform: translateX(-50%);
+          transform: translateX(-0%);
         }
       }
     }

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

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'react';
 export declare type Props = {
     className?: string;
+    buttonClassName?: string;
     render?: (any: any) => React.ReactNode;
     children?: React.ReactNode;
     verticalAlign?: 'top' | 'bottom';

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

@@ -12,7 +12,7 @@ div.react-select {
     padding: base(.25) 0;
     min-height: base(1.5);
 
-    > * {
+    >* {
       margin-top: 0;
       margin-bottom: 0;
       padding-top: 0;
@@ -43,8 +43,10 @@ div.react-select {
   }
 
   .rs__input {
+    color: var(--theme-elevation-1000);
+
     input {
-      font-family: $font-body;
+      font-family: var(--font-body);
       width: 100% !important;
     }
   }
@@ -52,34 +54,39 @@ div.react-select {
   .rs__menu {
     z-index: 2;
     border-radius: 0;
-    @include inputShadowActive;
+    @include shadow-lg;
+    background: var(--theme-input-bg);
   }
 
   .rs__group-heading {
-    color: $color-dark-gray;
+    color: var(--theme-elevation-800);
     padding-left: base(.5);
     margin-bottom: base(.25);
   }
 
   .rs__option {
-    font-family: $font-body;
+    font-family: var(--font-body);
     font-size: $baseline-body-size;
     padding: base(.375) base(.75);
-    color: $color-dark-gray;
+    color: var(--theme-elevation-800);
 
     &--is-focused {
-      background-color: rgba($color-dark-gray, .1);
+      background-color: var(--theme-elevation-100);
     }
 
     &--is-selected {
-      background-color: rgba($color-dark-gray, .5);
+      background-color: var(--theme-elevation-300);
     }
   }
 
+  .rs__single-value {
+    color: currentColor;
+  }
+
   .rs__multi-value {
     padding: 0;
     background: transparent;
-    border: $style-stroke-width-s solid $color-dark-gray;
+    border: $style-stroke-width-s solid var(--theme-elevation-800);
     line-height: calc(#{$baseline} - #{$style-stroke-width-s * 2});
     margin: base(.25) base(.5) base(.25) 0;
   }
@@ -87,6 +94,7 @@ div.react-select {
   .rs__multi-value__label {
     padding: 0 base(.125) 0 base(.25);
     max-width: 150px;
+    color: currentColor;
   }
 
   .rs__multi-value__remove {
@@ -94,14 +102,14 @@ div.react-select {
     cursor: pointer;
 
     &:hover {
-      color: $color-dark-gray;
-      background: rgba($color-red, .25);
+      color: var(--theme-elevation-800);
+      background: var(--theme-error-150);
     }
   }
 
   &--error {
     div.rs__control {
-      background-color: lighten($color-red, 20%);
+      background-color: var(--theme-error-200);
     }
   }
 }

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

@@ -1,7 +1,7 @@
 @import '../../../scss/styles.scss';
 
 .sort-complex {
-  background: $color-background-gray;
+  background: var(--theme-elevation-100);
   padding: base(0.5);
   display: flex;
 
@@ -17,8 +17,9 @@
     padding: 0 base(0.5);
     flex-grow: 1;
   }
+
   &__label {
-    color: $color-gray;
+    color: var(--theme-elevation-400);
     margin: base(0.5) 0;
   }
 

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

@@ -87,7 +87,7 @@ const Status = () => {
                     "\u00A0\u2014\u00A0",
                     React.createElement(Button, { onClick: () => toggle(unPublishModalSlug), className: `${baseClass}__action`, buttonStyle: "none" }, "Unpublish"),
                     React.createElement(Modal, { slug: unPublishModalSlug, className: `${baseClass}__modal` },
-                        React.createElement(MinimalTemplate, null,
+                        React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
                             React.createElement("h1", null, "Confirm unpublish"),
                             React.createElement("p", null, "You are about to unpublish this document. Are you sure?"),
                             React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: processing ? undefined : () => toggle(unPublishModalSlug) }, "Cancel"),
@@ -96,7 +96,7 @@ const Status = () => {
                     "\u00A0\u2014\u00A0",
                     React.createElement(Button, { onClick: () => toggle(revertModalSlug), className: `${baseClass}__action`, buttonStyle: "none" }, "Revert to published"),
                     React.createElement(Modal, { slug: revertModalSlug, className: `${baseClass}__modal` },
-                        React.createElement(MinimalTemplate, null,
+                        React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
                             React.createElement("h1", null, "Confirm revert to saved"),
                             React.createElement("p", null, "You are about to revert this document's changes to its published state. Are you sure?"),
                             React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: processing ? undefined : () => toggle(revertModalSlug) }, "Cancel"),

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

@@ -27,4 +27,9 @@
       margin-right: $baseline;
     }
   }
+
+  &__modal-template {
+    position: relative;
+    z-index: 1;
+  }
 }

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

@@ -35,10 +35,4 @@
     overflow: hidden;
     white-space: nowrap;
   }
-
-  @include mid-break {
-    > *:first-child {
-      padding-left: $baseline;
-    }
-  }
 }

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

@@ -6,8 +6,8 @@ const Table = ({ columns, data }) => {
         return (React.createElement("div", { className: baseClass },
             React.createElement("table", { cellPadding: "0", cellSpacing: "0" },
                 React.createElement("thead", null,
-                    React.createElement("tr", null, columns.map((col, i) => (React.createElement("th", { key: i }, col.components.Heading))))),
-                React.createElement("tbody", null, data && data.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, columns.map((col, colIndex) => (React.createElement("td", { key: colIndex }, col.components.renderCell(row, row[col.accessor])))))))))));
+                    React.createElement("tr", null, columns.map((col, i) => (React.createElement("th", { key: i, id: `heading-${col.accessor}` }, col.components.Heading))))),
+                React.createElement("tbody", null, data && data.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex, className: `row-${rowIndex + 1}` }, columns.map((col, colIndex) => (React.createElement("td", { key: colIndex, className: `cell-${col.accessor}` }, col.components.renderCell(row, row[col.accessor])))))))))));
     }
     return null;
 };

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

@@ -6,7 +6,7 @@
   max-width: 100%;
 
   thead {
-    color: $color-gray;
+    color: var(--theme-elevation-400);
 
     th {
       font-weight: normal;
@@ -14,7 +14,8 @@
     }
   }
 
-  th, td {
+  th,
+  td {
     padding: base(.75);
     min-width: 150px;
   }
@@ -22,13 +23,15 @@
   tbody {
     tr {
       &:nth-child(odd) {
-        background: $color-background-gray;
+        background: var(--theme-elevation-50);
       }
     }
   }
 
   @include mid-break {
-    th, td {
+
+    th,
+    td {
       max-width: 70vw;
     }
   }

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

@@ -1,18 +1,18 @@
 @import '../../../scss/styles.scss';
 
 .tooltip {
-	background-color: $color-dark-gray;
-  position: absolute;
-  z-index: 2;
+	background-color: var(--theme-elevation-800);
+	position: absolute;
+	z-index: 2;
 	bottom: 100%;
 	left: 50%;
 	transform: translate3d(-50%, -20%, 0);
 	padding: base(.2) base(.4);
-	color: white;
-  line-height: base(.75);
-  font-weight: normal;
-  white-space: nowrap;
-  border-radius: 2px;
+	color: var(--theme-elevation-0);
+	line-height: base(.75);
+	font-weight: normal;
+	white-space: nowrap;
+	border-radius: 2px;
 
 	span {
 		position: absolute;
@@ -22,6 +22,6 @@
 		height: 0;
 		width: 0;
 		border: 10px solid transparent;
-		border-top-color: $color-dark-gray;
+		border-top-color: var(--theme-elevation-800);
 	}
 }

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

@@ -2,7 +2,7 @@
 
 .upload-card {
   @include shadow;
-  background: white;
+  background: var(--theme-input-bg);
   max-width: base(9);
   margin-bottom: base(.5);
 

package/dist/admin/components/elements/WhereBuilder/Condition/Relationship/index.scss

@@ -2,10 +2,10 @@
 
 .condition-value-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);
   }
 }

package/dist/admin/components/elements/WhereBuilder/Condition/index.js

@@ -67,12 +67,12 @@ const Condition = (props) => {
                             onChange: setInternalValue,
                         } }))),
             React.createElement("div", { className: `${baseClass}__actions` },
-                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => dispatch({
+                React.createElement(Button, { icon: "x", className: `${baseClass}__actions-remove`, round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => dispatch({
                         type: 'remove',
                         orIndex,
                         andIndex,
                     }) }),
-                React.createElement(Button, { icon: "plus", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => dispatch({
+                React.createElement(Button, { icon: "plus", className: `${baseClass}__actions-add`, round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => dispatch({
                         type: 'add',
                         field: fields[0].value,
                         relation: 'and',

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

@@ -6,7 +6,7 @@ import Button from '../Button';
 import reducer from './reducer';
 import Condition from './Condition';
 import fieldTypes from './field-types';
-import flattenTopLevelFields from '../../../../utilities/flattenTopLevelFields';
+import flattenTopLevelFields from '../../../utilities/flattenTopLevelFields';
 import { useSearchParams } from '../../utilities/SearchParams';
 import validateWhereQuery from './validateWhereQuery';
 import './index.scss';

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

@@ -1,7 +1,7 @@
 @import '../../../scss/styles.scss';
 
 .where-builder {
-  background: $color-background-gray;
+  background: var(--theme-elevation-50);
   padding: base(.5) $baseline $baseline;
 
   &__label {

package/dist/admin/components/forms/Error/index.scss

@@ -6,10 +6,9 @@
   left: auto;
   right: base(.5);
   transform: none;
-  background-color: $color-red;
+  background-color: var(--theme-error-500);
 
   span {
-    border-top-color: $color-red;
+    border-top-color: var(--theme-error-500);
   }
 }
-

package/dist/admin/components/forms/FieldDescription/index.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import { isComponent } from './types';
 import './index.scss';
+const baseClass = 'field-description';
 const FieldDescription = (props) => {
-    const { description, value, } = props;
+    const { className, description, value, } = props;
     if (isComponent(description)) {
         const Description = description;
         return React.createElement(Description, { value: value });
     }
     if (description) {
-        return (React.createElement("div", { className: "field-description" }, typeof description === 'function' ? description({ value }) : description));
+        return (React.createElement("div", { className: [
+                baseClass,
+                className,
+            ].filter(Boolean).join(' ') }, typeof description === 'function' ? description({ value }) : description));
     }
     return null;
 };

package/dist/admin/components/forms/FieldDescription/index.scss

@@ -4,5 +4,5 @@
   display: flex;
   padding-top: base(.25);
   padding-bottom: base(.25);
-  color: $color-gray;
+  color: var(--theme-elevation-400);
 }

package/dist/admin/components/forms/FieldDescription/types.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-export declare type DescriptionFunction = (value: unknown) => string;
+export declare type DescriptionFunction = (value?: unknown) => string;
 export declare type DescriptionComponent = React.ComponentType<{
     value: unknown;
 }>;
 export declare type Description = string | DescriptionFunction | DescriptionComponent;
 export declare type Props = {
     description?: Description;
-    value: unknown;
+    value?: unknown;
+    className?: string;
 };
 export declare function isComponent(description: Description): description is DescriptionComponent;

package/dist/admin/components/forms/FieldDescription/types.js

@@ -9,4 +9,4 @@ function isComponent(description) {
     return react_1.default.isValidElement(description);
 }
 exports.isComponent = isComponent;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYWRtaW4vY29tcG9uZW50cy9mb3Jtcy9GaWVsZERlc2NyaXB0aW9uL3R5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLGtEQUEwQjtBQWExQixTQUFnQixXQUFXLENBQUMsV0FBd0I7SUFDbEQsT0FBTyxlQUFLLENBQUMsY0FBYyxDQUFDLFdBQVcsQ0FBQyxDQUFDO0FBQzNDLENBQUM7QUFGRCxrQ0FFQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYWRtaW4vY29tcG9uZW50cy9mb3Jtcy9GaWVsZERlc2NyaXB0aW9uL3R5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLGtEQUEwQjtBQWMxQixTQUFnQixXQUFXLENBQUMsV0FBd0I7SUFDbEQsT0FBTyxlQUFLLENBQUMsY0FBYyxDQUFDLFdBQVcsQ0FBQyxDQUFDO0FBQzNDLENBQUM7QUFGRCxrQ0FFQyJ9