@manuscripts/style-guide 1.7.1 → 1.7.2

package/dist/es/components/References/ReferenceSearch.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { debounce } from 'lodash-es';
+import { debounce } from 'lodash';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, } from '../Button';

package/dist/es/components/References/ReferencesModal.js

@@ -1,12 +1,12 @@
 import ReferenceLibraryIcon from '@manuscripts/assets/react/ReferenceLibraryIcon';
 import { isEqual } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
-import ReactTooltip from 'react-tooltip';
 import styled from 'styled-components';
 import { useScrollDetection } from '../../hooks/use-scroll-detection';
 import { Category, Dialog } from '../Dialog';
 import { SidebarContent } from '../Sidebar';
 import { CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, StyledModal, } from '../StyledModal';
+import { Tooltip } from '../Tooltip';
 import { ReferenceForm, } from './ReferenceForm';
 import { ReferenceLine } from './ReferenceLine';
 const ReferencesModalContainer = styled(ModalContainer) `
@@ -179,10 +179,10 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
                         React.createElement(ModalSidebarTitle, null, "References")),
                     React.createElement(ReferencesSidebarContent, { ref: ref },
                         React.createElement(ReferencesInnerWrapper, null, items.slice(startIndex, endIndex + 1).map((item) => (React.createElement(ReferenceButton, { key: item._id, id: item._id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
-                            React.createElement(IconContainer, { "data-tip": true, "data-for": 'citation-count' },
+                            React.createElement(IconContainer, null,
                                 React.createElement(ReferenceLibraryIcon, null),
-                                React.createElement(CitationCount, { className: citationCounts.get(item._id) ? '' : 'unused' }, citationCounts.get(item._id) || 0),
-                                React.createElement(ReactTooltip, { disable: (citationCounts.get(item._id) || 0) < 1, id: "citation-count", place: "bottom", effect: "solid", offset: { top: 40 }, className: "tooltip" }, "Number of times used in the document")),
-                            React.createElement(ReferenceLine, { item: item }))))))),
+                                (citationCounts.get(item._id) || 0) > 0 ? (React.createElement(CitationCount, { "data-tooltip-id": "citation-count-tooltip" }, citationCounts.get(item._id))) : (React.createElement(CitationCount, { className: "unused" }, "0"))),
+                            React.createElement(ReferenceLine, { item: item }))))),
+                        React.createElement(Tooltip, { id: "citation-count-tooltip", place: "bottom" }, "Number of times used in the document"))),
                 React.createElement(ScrollableModalContent, null, selection && (React.createElement(ReferenceForm, { values: normalize(selection), showDelete: !citationCounts.get(selection._id), onChange: handleChange, onCancel: onCancel, onDelete: () => onDelete(selection), onSave: save, actionsRef: actionsRef })))))));
 };

package/dist/es/components/RelativeDate.js

@@ -1,12 +1,29 @@
-import '@formatjs/intl-relativetimeformat/polyfill-locales';
-import { selectUnit } from '@formatjs/intl-utils';
+/*!
+ * © 2020 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 import React from 'react';
-import { FormattedRelativeTime, IntlProvider } from 'react-intl';
 export const RelativeDate = ({ createdAt }) => {
     if (!createdAt) {
         return null;
     }
-    const { value, unit } = selectUnit(createdAt);
-    return (React.createElement(IntlProvider, { locale: "en" },
-        React.createElement(FormattedRelativeTime, { value: value, unit: unit })));
+    const formatter = new Intl.RelativeTimeFormat('en', { style: 'short' });
+    let value = Math.floor((createdAt - Date.now()) / 3600000);
+    let unit = 'hour';
+    if (Math.abs(value) > 24) {
+        value = Math.floor(value / 24);
+        unit = 'day';
+    }
+    return React.createElement("span", null, formatter.format(value, unit));
 };

package/dist/es/components/Tooltip.js

@@ -0,0 +1,25 @@
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+import styled from 'styled-components';
+export const Tooltip = styled(ReactTooltip).attrs({
+    positionStrategy: 'fixed',
+    offset: 10,
+}) `
+  &.react-tooltip {
+    z-index: 1000;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: -0.2px;
+    max-width: 300px;
+    font-family: inherit;
+    padding: 8px;
+    border-radius: 3px;
+    background: #353535;
+    color: ${(props) => props.theme.colors.text.onDark};
+    text-align: center;
+    white-space: nowrap;
+
+    .react-tooltip-arrow {
+      background: #353535;
+    }
+  }
+`;

package/dist/es/index.js

@@ -22,7 +22,6 @@ export * from './components/AuthorsDND';
 export * from './components/AuthorsContainer';
 export * from './components/AlertMessage';
 export * from './components/Button';
-export * from './components/ColorField';
 export * from './components/RadioButton';
 export * from './components/AutoSaveInput';
 export * from './components/Avatar';
@@ -38,7 +37,7 @@ export * from './components/TextField';
 export * from './components/TextFieldContainer';
 export * from './components/TextFieldError';
 export * from './components/TextFieldGroupContainer';
-export * from './components/Tip';
+export * from './components/Tooltip';
 export * from './components/icons';
 export * from './components/Inspector';
 export * from './components/InspectorSection';

package/dist/es/lib/files.js

@@ -1,5 +1,4 @@
-import { ObjectTypes, } from '@manuscripts/json-schema';
-import { getModelsByType } from '@manuscripts/transform';
+import { getModelsByType, ObjectTypes, } from '@manuscripts/json-schema';
 import { FileType } from '../components/FileManager/util';
 export const isModelFile = (file) => {
     return file.modelId;

package/dist/types/components/AlertMessage.d.ts

@@ -41,7 +41,7 @@ interface Props {
 }
 export declare class AlertMessage extends React.Component<Props, State> {
     state: State;
-    render(): false | JSX.Element;
+    render(): false | React.JSX.Element;
     private handleClose;
 }
 export {};

package/dist/types/components/AuthorForm/RemoveAuthorButton.d.ts

@@ -22,6 +22,6 @@ interface Props {
     handleOpen: () => void;
 }
 declare class RemoveAuthorButton extends React.Component<Props> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default RemoveAuthorButton;

package/dist/types/components/AutoSaveInput.d.ts

@@ -33,7 +33,7 @@ export declare class AutoSaveInput extends React.Component<FieldProps & AutoSave
         focused: boolean;
     };
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     private handleSubmit;
     private handleFocus;
     private handleBlur;

package/dist/types/components/Comments/CommentUser.d.ts

@@ -13,12 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Contribution } from '@manuscripts/json-schema';
-import { UserProfileWithAvatar } from '@manuscripts/transform';
+import { Contribution, UserProfile } from '@manuscripts/json-schema';
 import React from 'react';
 export declare const CommentUser: React.FC<{
     contributions?: Contribution[];
-    getCollaboratorById: (id: string) => UserProfileWithAvatar | undefined;
+    getCollaboratorById: (id: string) => UserProfile | undefined;
     displayName?: string;
     createdAt?: number;
 }>;

package/dist/types/components/Dialog.d.ts

@@ -47,7 +47,7 @@ export declare enum Category {
 export declare class Dialog extends React.Component<DialogProps, DialogState> {
     state: DialogState;
     componentDidMount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     private renderButtons;
     private checkInputValue;
     private setDisabledBtnState;

package/dist/types/components/Dropdown.d.ts

@@ -1,5 +1,5 @@
 export declare const DropdownList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    direction?: "left" | "right" | undefined;
+    direction?: "right" | "left" | undefined;
     width?: number | undefined;
     height?: number | undefined;
     top?: number | undefined;

package/dist/types/components/EditorHeader/EditorHeader.d.ts

@@ -1,4 +1,3 @@
-import { ApolloError } from '@apollo/client';
 import React from 'react';
 export type PartialSubmission = {
     id: string;
@@ -36,7 +35,7 @@ export declare enum DialogState {
 export type ProceedDialogData = {
     state: DialogState;
     error?: string;
-    mutationError?: ApolloError | undefined;
+    mutationError?: any;
     updateState: (state: DialogState) => void;
     clearError: () => void;
 };

package/dist/types/components/FileManager/FileActions.d.ts

@@ -11,7 +11,7 @@ export declare const FileActions: React.FC<{
 }>;
 export declare const ActionsIcon: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const FileActionDropdownList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    direction?: "left" | "right" | undefined;
+    direction?: "right" | "left" | undefined;
     width?: number | undefined;
     height?: number | undefined;
     top?: number | undefined;

package/dist/types/components/FileManager/FileManager.d.ts

@@ -1,5 +1,4 @@
-import { Model } from '@manuscripts/json-schema';
-import { Build } from '@manuscripts/transform';
+import { Build, Model } from '@manuscripts/json-schema';
 import React from 'react';
 import { FileSectionType } from '../../index';
 import { Capabilities } from '../../lib/capabilities';

package/dist/types/components/FileManager/util.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FileAttachment } from '../../lib/files';
 export declare enum FileSectionType {
     Inline = "Inline files",

package/dist/types/components/Form.d.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 /// <reference types="react" />
-export declare const CenteredForm: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "name" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoComplete" | "method" | "target" | "acceptCharset" | "action" | "encType" | "noValidate"> & import("react").RefAttributes<HTMLFormElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const CenteredForm: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import("react").RefAttributes<HTMLFormElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const FormHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FormActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FormError: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/Inspector.d.ts

@@ -15,13 +15,11 @@
  */
 import '@reach/tabs/styles.css';
 export declare const InspectorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const InspectorTabs: import("styled-components").StyledComponent<import("@reach/utils").ForwardRefExoticComponentWithAs<"div", import("@reach/tabs").TabsProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const InspectorTabList: import("styled-components").StyledComponent<import("@reach/utils").MemoExoticComponentWithAs<"div", import("@reach/tabs").TabListProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const InspectorPanelTabList: import("styled-components").StyledComponent<import("@reach/utils").MemoExoticComponentWithAs<"div", import("@reach/tabs").TabListProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const InspectorTabPanels: import("styled-components").StyledComponent<import("@reach/utils").MemoExoticComponentWithAs<"div", import("@reach/tabs").TabListProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const PaddedInspectorTabPanels: import("styled-components").StyledComponent<import("@reach/utils").MemoExoticComponentWithAs<"div", import("@reach/tabs").TabListProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const InspectorTabPanel: import("styled-components").StyledComponent<import("@reach/utils").ForwardRefExoticComponentWithAs<"div", import("@reach/tabs").TabPanelProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const InspectorTab: import("styled-components").StyledComponent<import("@reach/utils").ForwardRefExoticComponentWithAs<"button", import("@reach/tabs").TabProps & {
-    isSelected?: boolean | undefined;
-}>, import("styled-components").DefaultTheme, {}, never>;
+export declare const InspectorTabs: import("styled-components").StyledComponent<import("@reach/polymorphic").ForwardRefComponent<"div", import("@reach/tabs").TabsProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const InspectorTabList: import("styled-components").StyledComponent<import("@reach/polymorphic").MemoComponent<"div", import("@reach/tabs").TabListProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const InspectorPanelTabList: import("styled-components").StyledComponent<import("@reach/polymorphic").MemoComponent<"div", import("@reach/tabs").TabListProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const InspectorTabPanels: import("styled-components").StyledComponent<import("@reach/polymorphic").MemoComponent<"div", import("@reach/tabs").TabPanelsProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const PaddedInspectorTabPanels: import("styled-components").StyledComponent<import("@reach/polymorphic").MemoComponent<"div", import("@reach/tabs").TabPanelsProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const InspectorTabPanel: import("styled-components").StyledComponent<import("@reach/polymorphic").ForwardRefComponent<"div", import("@reach/tabs").TabPanelProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const InspectorTab: import("styled-components").StyledComponent<import("@reach/polymorphic").ForwardRefComponent<"button", import("@reach/tabs").TabProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const InspectorTabPanelHeading: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/NavDropdown.d.ts

@@ -17,7 +17,7 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 export declare const NavDropdownContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const NavDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    direction?: "left" | "right" | undefined;
+    direction?: "right" | "left" | undefined;
     minWidth?: number | undefined;
     top?: number | undefined;
 }, never>;

package/dist/types/components/References/ReferenceForm.d.ts

@@ -18,7 +18,7 @@ import React, { MutableRefObject } from 'react';
 export declare const LabelContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FormField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ReferenceTextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, import("../Form").ErrorProps, never>;
-export declare const FlexForm: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "name" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoComplete" | "method" | "target" | "acceptCharset" | "action" | "encType" | "noValidate"> & React.RefAttributes<HTMLFormElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const FlexForm: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const FormFields: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export type ReferenceFormValues = Pick<BibliographyItem, '_id' | 'title' | 'author' | 'DOI' | 'issued' | 'type' | 'container-title' | 'URL' | 'issue' | 'volume' | 'supplement' | 'page'>;
 export interface ReferenceFormActions {

package/dist/types/components/RelativeDate.d.ts

@@ -1,4 +1,18 @@
-import '@formatjs/intl-relativetimeformat/polyfill-locales';
+/*!
+ * © 2020 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 import React from 'react';
 export declare const RelativeDate: React.FC<{
     createdAt?: number;

package/dist/types/components/Resizer/Resizer.d.ts

@@ -22,7 +22,7 @@ export declare class Resizer extends React.Component<Props, State> {
         isResizing: boolean;
         startPosition: number;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     private scheduleResize;
     private mouseDownHandler;
     private mouseUpHandler;

package/dist/types/components/Resizer/ResizerButton.d.ts

@@ -13,6 +13,6 @@ export declare class ResizerButton extends React.PureComponent<Props> {
         isCollapsed: boolean;
         isVisible: boolean;
     };
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/types/components/Tooltip.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Tooltip: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-tooltip").ITooltip & import("react").RefAttributes<import("react-tooltip").TooltipRefProps>>, import("styled-components").DefaultTheme, {
+    positionStrategy: "fixed";
+    offset: 10;
+}, "offset" | "positionStrategy">;

package/dist/types/components/icons/add-author.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const AddAuthor: (props: IconProps) => JSX.Element;
+declare const AddAuthor: (props: IconProps) => React.JSX.Element;
 export default AddAuthor;

package/dist/types/components/icons/add-comment-icon.d.ts

@@ -13,5 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-declare const AddComment: () => JSX.Element;
+import React from 'react';
+declare const AddComment: () => React.JSX.Element;
 export default AddComment;

package/dist/types/components/icons/add-icon-active.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const AddIconActive: (props: IconProps) => JSX.Element;
+declare const AddIconActive: (props: IconProps) => React.JSX.Element;
 export default AddIconActive;

package/dist/types/components/icons/add-icon-inverted.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const AddIconInverted: (props: IconProps) => JSX.Element;
+declare const AddIconInverted: (props: IconProps) => React.JSX.Element;
 export default AddIconInverted;

package/dist/types/components/icons/back-arrow.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-export declare const BackArrow: (props: IconProps) => JSX.Element;
+export declare const BackArrow: (props: IconProps) => React.JSX.Element;
 export default BackArrow;

package/dist/types/components/icons/bookmark.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const Bookmark: (props: IconProps) => JSX.Element;
+declare const Bookmark: (props: IconProps) => React.JSX.Element;
 export default Bookmark;

package/dist/types/components/icons/google.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const Google: (props: IconProps) => JSX.Element;
+declare const Google: (props: IconProps) => React.JSX.Element;
 export default Google;

package/dist/types/components/icons/orcid.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const Orcid: (props: IconProps) => JSX.Element;
+declare const Orcid: (props: IconProps) => React.JSX.Element;
 export default Orcid;

package/dist/types/components/icons/project-notification.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const ProjectNotification: (props: IconProps) => JSX.Element;
+declare const ProjectNotification: (props: IconProps) => React.JSX.Element;
 export default ProjectNotification;

package/dist/types/components/icons/project.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const ProjectIcon: (props: IconProps) => JSX.Element;
+declare const ProjectIcon: (props: IconProps) => React.JSX.Element;
 export default ProjectIcon;

package/dist/types/components/icons/projects-list.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const ProjectsList: (props: IconProps) => JSX.Element;
+declare const ProjectsList: (props: IconProps) => React.JSX.Element;
 export default ProjectsList;

package/dist/types/components/icons/search.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const SearchIcon: (props: IconProps) => JSX.Element;
+declare const SearchIcon: (props: IconProps) => React.JSX.Element;
 export default SearchIcon;

package/dist/types/components/icons/tick-mark.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const TickMark: (props: IconProps) => JSX.Element;
+declare const TickMark: (props: IconProps) => React.JSX.Element;
 export default TickMark;

package/dist/types/components/icons/user.d.ts

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import React from 'react';
 import { IconProps } from './types';
-declare const User: (props: IconProps) => JSX.Element;
+declare const User: (props: IconProps) => React.JSX.Element;
 export default User;

package/dist/types/index.d.ts

@@ -23,7 +23,6 @@ export * from './components/AuthorsDND';
 export * from './components/AuthorsContainer';
 export * from './components/AlertMessage';
 export * from './components/Button';
-export * from './components/ColorField';
 export * from './components/RadioButton';
 export * from './components/AutoSaveInput';
 export * from './components/Avatar';
@@ -39,7 +38,7 @@ export * from './components/TextField';
 export * from './components/TextFieldContainer';
 export * from './components/TextFieldError';
 export * from './components/TextFieldGroupContainer';
-export * from './components/Tip';
+export * from './components/Tooltip';
 export * from './components/icons';
 export * from './components/Inspector';
 export * from './components/InspectorSection';

package/dist/types/lib/capabilities.d.ts

@@ -1,5 +1,4 @@
-import { Project } from '@manuscripts/json-schema';
-import { UserProfileWithAvatar } from '@manuscripts/transform';
+import { Project, UserProfile } from '@manuscripts/json-schema';
 import React from 'react';
 export type Capabilities = {
     handleSuggestion: boolean;
@@ -42,12 +41,12 @@ export type Capabilities = {
 };
 export interface ProviderProps {
     project?: Project;
-    profile?: UserProfileWithAvatar;
+    profile?: UserProfile;
     role?: string;
     permittedActions?: string[];
     children?: React.ReactNode;
 }
-export declare const getCapabilities: (project?: Project, profile?: UserProfileWithAvatar, role?: ProviderProps['role'], actions?: string[]) => Capabilities;
+export declare const getCapabilities: (project?: Project, profile?: UserProfile, role?: ProviderProps['role'], actions?: string[]) => Capabilities;
 export declare const getAllPermitted: () => Capabilities;
 export declare const usePermissions: () => Capabilities;
 export declare const useCalcPermission: ({ project, profile, role, permittedActions, }: ProviderProps) => Capabilities;