@manuscripts/style-guide 1.7.1 → 1.7.2

package/dist/cjs/components/Comments/CommentBody.js

@@ -30,10 +30,10 @@ exports.CommentBody = void 0;
 const AnnotationReply_1 = __importDefault(require("@manuscripts/assets/react/AnnotationReply"));
 const formik_1 = require("formik");
 const react_1 = __importStar(require("react"));
-const react_tooltip_1 = __importDefault(require("react-tooltip"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../Button");
 const Form_1 = require("../Form");
+const Tooltip_1 = require("../Tooltip");
 exports.CommentBody = react_1.default.memo(({ comment, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
     (0, react_1.useEffect)(() => {
         if (isNew) {
@@ -66,9 +66,9 @@ exports.CommentBody = react_1.default.memo(({ comment, saveComment, deleteCommen
             react_1.default.createElement(StyledCommentViewer, { "data-cy": "note-text" }, comment.contents)),
         !isReply && (react_1.default.createElement(CommentFooter, null,
             react_1.default.createElement("span", null,
-                react_1.default.createElement(ActionButton, { hidden: !isProdNote, "data-tip": true, "data-for": `reply-${comment._id}`, onClick: () => handleCreateReply(comment._id), "aria-label": 'reply', className: "reply-button note-actions" },
+                react_1.default.createElement(ActionButton, { hidden: !isProdNote, "data-tooltip-id": `reply-${comment._id}`, onClick: () => handleCreateReply(comment._id), "aria-label": 'reply', className: "reply-button note-actions" },
                     react_1.default.createElement(AnnotationReply_1.default, null))),
-            react_1.default.createElement(react_tooltip_1.default, { id: `reply-${comment._id}`, place: "bottom", effect: "solid", offset: { top: 10 }, className: "tooltip" }, "Reply")))))));
+            react_1.default.createElement(Tooltip_1.Tooltip, { id: `reply-${comment._id}`, place: "bottom" }, "Reply")))))));
 });
 const CommentFooter = styled_components_1.default.div `
   margin-bottom: ${(props) => props.theme.grid.unit * 2}px;

package/dist/cjs/components/Comments/CommentUser.js

@@ -65,7 +65,7 @@ const CommentUser = ({ contributions, getCollaboratorById, displayName, createdA
     }
     return (react_1.default.createElement(CommentUserContainer, null,
         react_1.default.createElement(Header, null,
-            react_1.default.createElement(Avatar_1.Avatar, { src: user.avatar, size: 20 })),
+            react_1.default.createElement(Avatar_1.Avatar, { size: 20 })),
         react_1.default.createElement(Header, null,
             react_1.default.createElement(CommentUserName, null,
                 "By ",

package/dist/cjs/components/Comments/ResolveButton.js

@@ -20,15 +20,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResolveButton = void 0;
 const react_1 = __importDefault(require("react"));
-const react_tooltip_1 = __importDefault(require("react-tooltip"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../Button");
 const tick_mark_1 = __importDefault(require("../icons/tick-mark"));
+const Tooltip_1 = require("../Tooltip");
 const ResolveButton = ({ id, resolved, resolvedCallback }) => {
     return (react_1.default.createElement(Container, null,
-        react_1.default.createElement(Button, { resolved: resolved, "data-tip": true, "data-for": id, onClick: resolvedCallback },
+        react_1.default.createElement(Button, { resolved: resolved, "data-tooltip-id": id, onClick: resolvedCallback },
             react_1.default.createElement(tick_mark_1.default, { color: '#353535' })),
-        react_1.default.createElement(react_tooltip_1.default, { id: id, place: "bottom", effect: "solid", offset: { top: 10 }, className: "tooltip" }, (resolved && 'Unresolve') || 'Resolve')));
+        react_1.default.createElement(Tooltip_1.Tooltip, { id: id, place: "bottom" }, (resolved && 'Unresolve') || 'Resolve')));
 };
 exports.ResolveButton = ResolveButton;
 const Container = styled_components_1.default.div `

package/dist/cjs/components/FileManager/FileCreatedDate.js

@@ -7,11 +7,11 @@ exports.FileDate = exports.FileDateContainer = exports.FileCreatedDate = void 0;
 const date_fns_1 = require("date-fns");
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Tooltip_1 = require("./Tooltip");
+const Tooltip_1 = require("../Tooltip");
 const FileCreatedDate = ({ file, className }) => {
-    return file.createdDate ? (react_1.default.createElement(exports.FileDateContainer, { "data-tip": "File Uploaded", "data-for": `${file.id}-created-date`, className: className },
+    return file.createdDate ? (react_1.default.createElement(exports.FileDateContainer, { "data-tooltip-id": `${file.id}-created-date-tooltip`, className: className },
         react_1.default.createElement(exports.FileDate, null, (0, date_fns_1.format)(new Date(file.createdDate), 'M/d/yy, HH:mm')),
-        react_1.default.createElement(Tooltip_1.Tooltip, { id: `${file.id}-created-date`, place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))) : (react_1.default.createElement(react_1.default.Fragment, null));
+        react_1.default.createElement(Tooltip_1.Tooltip, { id: `${file.id}-created-date-tooltip`, place: "bottom" }, "File Uploaded"))) : (react_1.default.createElement(react_1.default.Fragment, null));
 };
 exports.FileCreatedDate = FileCreatedDate;
 exports.FileDateContainer = styled_components_1.default.div `

package/dist/cjs/components/FileManager/FileManager.js

@@ -28,12 +28,12 @@ const react_1 = __importStar(require("react"));
 const index_1 = require("../../index");
 const Inspector_1 = require("../Inspector");
 const InspectorSection_1 = require("../InspectorSection");
+const Tooltip_1 = require("../Tooltip");
 const DragLayer_1 = require("./DragLayer");
 const FileManagerProvider_1 = require("./FileManagerProvider");
 const InlineFilesSection_1 = require("./InlineFilesSection");
 const OtherFilesSection_1 = require("./OtherFilesSection");
 const SupplementsSection_1 = require("./SupplementsSection");
-const Tooltip_1 = require("./Tooltip");
 exports.PermissionsContext = (0, react_1.createContext)(null);
 const FileManager = ({ files, fileManagement, modelMap, saveModel, deleteModel, enableDragAndDrop, can, }) => {
     const { inlineFiles, supplements, otherFiles } = (0, index_1.useFiles)(modelMap, files);
@@ -43,12 +43,12 @@ const FileManager = ({ files, fileManagement, modelMap, saveModel, deleteModel,
             react_1.default.createElement(InspectorSection_1.InspectorSection, { title: 'Files', contentStyles: { margin: '24px 16px' } },
                 react_1.default.createElement(Inspector_1.InspectorTabs, { defaultIndex: 0, "data-cy": "files-tabs", style: { overflow: 'visible' } },
                     react_1.default.createElement(Inspector_1.InspectorTabList, null,
-                        react_1.default.createElement(Inspector_1.InspectorTab, { "data-for": "inline", "data-tip": true }, "Inline files"),
-                        react_1.default.createElement(Tooltip_1.Tooltip, { id: "inline", place: "bottom", offset: { bottom: -11 }, effect: "solid", className: "tooltip" }, "Files that can be found inline in the manuscript."),
-                        react_1.default.createElement(Inspector_1.InspectorTab, { "data-for": "supplements", "data-tip": true }, "Supplements"),
-                        react_1.default.createElement(Tooltip_1.Tooltip, { id: "supplements", place: "bottom", offset: { bottom: -11 }, effect: "solid", className: "tooltip" }, "Files that were marked as supplements."),
-                        react_1.default.createElement(Inspector_1.InspectorTab, { "data-for": "other", "data-tip": true }, "Other files"),
-                        react_1.default.createElement(Tooltip_1.Tooltip, { id: "other", place: "bottom", offset: { bottom: -11 }, effect: "solid", className: "tooltip" }, "Files excluded from the final submission.")),
+                        react_1.default.createElement(Inspector_1.InspectorTab, { "data-tooltip-id": "inline-tooltip" }, "Inline files"),
+                        react_1.default.createElement(Tooltip_1.Tooltip, { id: "inline-tooltip", place: "bottom" }, "Files that can be found inline in the manuscript."),
+                        react_1.default.createElement(Inspector_1.InspectorTab, { "data-tooltip-id": "supplements-tooltip" }, "Supplements"),
+                        react_1.default.createElement(Tooltip_1.Tooltip, { id: "supplements-tooltip", place: "bottom" }, "Files that were marked as supplements."),
+                        react_1.default.createElement(Inspector_1.InspectorTab, { "data-tooltip-id": "other-tooltip" }, "Other files"),
+                        react_1.default.createElement(Tooltip_1.Tooltip, { id: "other-tooltip", place: "bottom" }, "Files excluded from the final submission.")),
                     react_1.default.createElement(Inspector_1.InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, { "data-cy": "inline" },
                             react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { elements: inlineFiles, isEditor: enableDragAndDrop })),

package/dist/cjs/components/FileManager/OtherFilesSection.js

@@ -33,7 +33,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OtherFilesSection = void 0;
-const transform_1 = require("@manuscripts/transform");
+const json_schema_1 = require("@manuscripts/json-schema");
 const react_1 = __importStar(require("react"));
 const react_dnd_1 = require("react-dnd");
 const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
@@ -65,7 +65,7 @@ const OtherFilesSection = ({ files }) => {
         });
     });
     const moveToSupplements = (file) => __awaiter(void 0, void 0, void 0, function* () {
-        const supplement = (0, transform_1.buildSupplementaryMaterial)('', file.id);
+        const supplement = (0, json_schema_1.buildSupplement)('', file.id);
         yield saveModel(supplement);
         setAlert({
             type: FileSectionAlert_1.FileSectionAlertType.MOVE_SUCCESSFUL,

package/dist/cjs/components/FileManager/SupplementsSection.js

@@ -34,7 +34,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SupplementsSection = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
-const transform_1 = require("@manuscripts/transform");
 const react_1 = __importStar(require("react"));
 const react_dnd_1 = require("react-dnd");
 const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
@@ -68,7 +67,7 @@ const SupplementsSection = ({ supplements }) => {
     });
     const handleUpload = (file) => __awaiter(void 0, void 0, void 0, function* () {
         const uploaded = yield upload(file);
-        const supplement = (0, transform_1.buildSupplementaryMaterial)('', uploaded.id);
+        const supplement = (0, json_schema_1.buildSupplement)('', uploaded.id);
         yield saveModel(supplement);
     });
     const handleReplace = (modelId, file) => __awaiter(void 0, void 0, void 0, function* () {

package/dist/cjs/components/References/CitationEditor.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CitationEditor = void 0;
 const AnnotationEdit_1 = __importDefault(require("@manuscripts/assets/react/AnnotationEdit"));
 const CloseIconDark_1 = __importDefault(require("@manuscripts/assets/react/CloseIconDark"));
-const transform_1 = require("@manuscripts/transform");
+const json_schema_1 = require("@manuscripts/json-schema");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../Button");
@@ -94,7 +94,7 @@ const CitationEditor = ({ query, rids, items, citationCounts, sources, onCite, o
     const [searching, setSearching] = (0, react_1.useState)(false);
     const handleAdd = () => {
         setSearching(false);
-        const item = (0, transform_1.buildBibliographyItem)({});
+        const item = (0, json_schema_1.buildBibliographyItem)({});
         onSave(item);
         onCite([item]);
         setEditingForm({ show: true, item: item });

package/dist/cjs/components/References/ReferenceForm.js

@@ -45,10 +45,9 @@ exports.ReferenceForm = exports.FormFields = exports.FlexForm = exports.Referenc
 const AddAuthor_1 = __importDefault(require("@manuscripts/assets/react/AddAuthor"));
 const AnnotationRemove_1 = __importDefault(require("@manuscripts/assets/react/AnnotationRemove"));
 const ArrowDownBlue_1 = __importDefault(require("@manuscripts/assets/react/ArrowDownBlue"));
-const transform_1 = require("@manuscripts/transform");
+const json_schema_1 = require("@manuscripts/json-schema");
 const formik_1 = require("formik");
 const react_1 = __importStar(require("react"));
-const react_tooltip_1 = __importDefault(require("react-tooltip"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../Button");
 const Dialog_1 = require("../Dialog");
@@ -56,6 +55,7 @@ const delete_icon_1 = require("../icons/delete-icon");
 const link_icon_1 = require("../icons/link-icon");
 const SelectField_1 = require("../SelectField");
 const TextField_1 = require("../TextField");
+const Tooltip_1 = require("../Tooltip");
 exports.LabelContainer = styled_components_1.default.div `
   display: flex;
   justify-content: space-between;
@@ -264,12 +264,11 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
                 } }),
             react_1.default.createElement(Actions, null,
                 react_1.default.createElement(Button_1.ButtonGroup, null,
-                    react_1.default.createElement(Button_1.IconButton, { defaultColor: true, as: "a", href: `https://doi.org/${formik.values.DOI}`, target: '_blank' },
+                    react_1.default.createElement(Button_1.IconButton, { as: "a", href: `https://doi.org/${formik.values.DOI}`, target: '_blank' },
                         react_1.default.createElement(link_icon_1.LinkIcon, null)),
-                    react_1.default.createElement("div", { "data-tip": true, "data-for": 'delete-button' },
-                        react_1.default.createElement(DeleteButton, { defaultColor: true, disabled: !showDelete, onClick: () => setShowDeleteDialog(true) },
-                            react_1.default.createElement(delete_icon_1.DeleteIcon, null)),
-                        react_1.default.createElement(react_tooltip_1.default, { disable: showDelete, id: 'delete-button', place: "bottom", effect: "solid", offset: { top: 15 }, className: "tooltip" }, "Unable to delete because the item is used in the document"))),
+                    react_1.default.createElement(DeleteButton, { defaultColor: true, disabled: !showDelete, "data-tooltip-id": showDelete ? '' : 'delete-button-tooltip', onClick: () => setShowDeleteDialog(true) },
+                        react_1.default.createElement(delete_icon_1.DeleteIcon, null)),
+                    react_1.default.createElement(Tooltip_1.Tooltip, { id: "delete-button-tooltip", place: "bottom" }, "Unable to delete because the item is used in the document")),
                 react_1.default.createElement(Button_1.ButtonGroup, null,
                     react_1.default.createElement(Button_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
                     react_1.default.createElement(Button_1.PrimaryButton, { type: "submit" }, "Save"))),
@@ -285,7 +284,7 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
                 react_1.default.createElement(formik_1.FieldArray, { name: 'author', render: ({ push, remove }) => (react_1.default.createElement(exports.FormField, null,
                         react_1.default.createElement(exports.LabelContainer, null,
                             react_1.default.createElement(Label, null, "Authors"),
-                            react_1.default.createElement(Button, { onClick: () => push((0, transform_1.buildBibliographicName)({
+                            react_1.default.createElement(Button, { onClick: () => push((0, json_schema_1.buildBibliographicName)({
                                     given: '',
                                     family: '',
                                     isNew: true,
@@ -303,7 +302,7 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
                                     formik.setFieldValue("issued['date-parts'][0][0]", Number(value));
                                 }
                                 else {
-                                    formik.setFieldValue('issued', (0, transform_1.buildBibliographicDate)({
+                                    formik.setFieldValue('issued', (0, json_schema_1.buildBibliographicDate)({
                                         'date-parts': [[Number(value)]],
                                     }));
                                 }

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

@@ -42,7 +42,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReferenceSearch = void 0;
-const lodash_es_1 = require("lodash-es");
+const lodash_1 = require("lodash");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../Button");
@@ -102,7 +102,7 @@ const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onCite, o
         const items = Array.from(selections.values());
         return onCite(items);
     };
-    const debouncedSetQuery = (0, lodash_es_1.debounce)((e) => {
+    const debouncedSetQuery = (0, lodash_1.debounce)((e) => {
         setQuery(e.target.value.trim());
     }, 800);
     return (react_1.default.createElement(Container, null,

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

@@ -30,12 +30,12 @@ exports.ReferencesModal = exports.normalize = void 0;
 const ReferenceLibraryIcon_1 = __importDefault(require("@manuscripts/assets/react/ReferenceLibraryIcon"));
 const lodash_1 = require("lodash");
 const react_1 = __importStar(require("react"));
-const react_tooltip_1 = __importDefault(require("react-tooltip"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const use_scroll_detection_1 = require("../../hooks/use-scroll-detection");
 const Dialog_1 = require("../Dialog");
 const Sidebar_1 = require("../Sidebar");
 const StyledModal_1 = require("../StyledModal");
+const Tooltip_1 = require("../Tooltip");
 const ReferenceForm_1 = require("./ReferenceForm");
 const ReferenceLine_1 = require("./ReferenceLine");
 const ReferencesModalContainer = (0, styled_components_1.default)(StyledModal_1.ModalContainer) `
@@ -209,11 +209,11 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
                         react_1.default.createElement(StyledModal_1.ModalSidebarTitle, null, "References")),
                     react_1.default.createElement(ReferencesSidebarContent, { ref: ref },
                         react_1.default.createElement(ReferencesInnerWrapper, null, items.slice(startIndex, endIndex + 1).map((item) => (react_1.default.createElement(ReferenceButton, { key: item._id, id: item._id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
-                            react_1.default.createElement(IconContainer, { "data-tip": true, "data-for": 'citation-count' },
+                            react_1.default.createElement(IconContainer, null,
                                 react_1.default.createElement(ReferenceLibraryIcon_1.default, null),
-                                react_1.default.createElement(CitationCount, { className: citationCounts.get(item._id) ? '' : 'unused' }, citationCounts.get(item._id) || 0),
-                                react_1.default.createElement(react_tooltip_1.default, { 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_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item }))))))),
+                                (citationCounts.get(item._id) || 0) > 0 ? (react_1.default.createElement(CitationCount, { "data-tooltip-id": "citation-count-tooltip" }, citationCounts.get(item._id))) : (react_1.default.createElement(CitationCount, { className: "unused" }, "0"))),
+                            react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item }))))),
+                        react_1.default.createElement(Tooltip_1.Tooltip, { id: "citation-count-tooltip", place: "bottom" }, "Number of times used in the document"))),
                 react_1.default.createElement(StyledModal_1.ScrollableModalContent, null, selection && (react_1.default.createElement(ReferenceForm_1.ReferenceForm, { values: (0, exports.normalize)(selection), showDelete: !citationCounts.get(selection._id), onChange: handleChange, onCancel: onCancel, onDelete: () => onDelete(selection), onSave: save, actionsRef: actionsRef })))))));
 };
 exports.ReferencesModal = ReferencesModal;

package/dist/cjs/components/RelativeDate.js

@@ -1,19 +1,36 @@
 "use strict";
+/*!
+ * © 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.
+ */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelativeDate = void 0;
-require("@formatjs/intl-relativetimeformat/polyfill-locales");
-const intl_utils_1 = require("@formatjs/intl-utils");
 const react_1 = __importDefault(require("react"));
-const react_intl_1 = require("react-intl");
 const RelativeDate = ({ createdAt }) => {
     if (!createdAt) {
         return null;
     }
-    const { value, unit } = (0, intl_utils_1.selectUnit)(createdAt);
-    return (react_1.default.createElement(react_intl_1.IntlProvider, { locale: "en" },
-        react_1.default.createElement(react_intl_1.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_1.default.createElement("span", null, formatter.format(value, unit));
 };
 exports.RelativeDate = RelativeDate;

package/dist/cjs/components/{FileManager/Tooltip.js → Tooltip.js}

@@ -4,22 +4,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
-const react_tooltip_1 = __importDefault(require("react-tooltip"));
+const react_tooltip_1 = require("react-tooltip");
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.Tooltip = (0, styled_components_1.default)(react_tooltip_1.default) `
-  &.tooltip {
+exports.Tooltip = (0, styled_components_1.default)(react_tooltip_1.Tooltip).attrs({
+    positionStrategy: 'fixed',
+    offset: 10,
+}) `
+  &.react-tooltip {
+    z-index: 1000;
     font-size: 12px;
     line-height: 16px;
-    font-family: ${(props) => props.theme.font.family.Lato};
+    letter-spacing: -0.2px;
+    max-width: 300px;
+    font-family: inherit;
     padding: 8px;
-    border-radius: 6px;
+    border-radius: 3px;
     background: #353535;
     color: ${(props) => props.theme.colors.text.onDark};
     text-align: center;
     white-space: nowrap;
-    pointer-events: none;
 
-    &.place-bottom::after {
+    .react-tooltip-arrow {
       background: #353535;
     }
   }

package/dist/cjs/index.js

@@ -42,7 +42,6 @@ __exportStar(require("./components/AuthorsDND"), exports);
 __exportStar(require("./components/AuthorsContainer"), exports);
 __exportStar(require("./components/AlertMessage"), exports);
 __exportStar(require("./components/Button"), exports);
-__exportStar(require("./components/ColorField"), exports);
 __exportStar(require("./components/RadioButton"), exports);
 __exportStar(require("./components/AutoSaveInput"), exports);
 __exportStar(require("./components/Avatar"), exports);
@@ -58,7 +57,7 @@ __exportStar(require("./components/TextField"), exports);
 __exportStar(require("./components/TextFieldContainer"), exports);
 __exportStar(require("./components/TextFieldError"), exports);
 __exportStar(require("./components/TextFieldGroupContainer"), exports);
-__exportStar(require("./components/Tip"), exports);
+__exportStar(require("./components/Tooltip"), exports);
 __exportStar(require("./components/icons"), exports);
 __exportStar(require("./components/Inspector"), exports);
 __exportStar(require("./components/InspectorSection"), exports);

package/dist/cjs/lib/files.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSupplements = exports.getInlineFiles = exports.isModelFile = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
-const transform_1 = require("@manuscripts/transform");
 const util_1 = require("../components/FileManager/util");
 const isModelFile = (file) => {
     return file.modelId;
@@ -46,7 +45,7 @@ const getInlineFiles = (modelMap, files) => {
     var _a;
     const elements = [];
     const orders = getOrderByType(modelMap);
-    const sections = (0, transform_1.getModelsByType)(modelMap, json_schema_1.ObjectTypes.Section);
+    const sections = (0, json_schema_1.getModelsByType)(modelMap, json_schema_1.ObjectTypes.Section);
     const graphicalAbstractElementIds = (_a = sections.filter((s) => s.category === 'MPSectionCategory:abstract-graphical')[0]) === null || _a === void 0 ? void 0 : _a.elementIDs;
     graphicalAbstractElementIds === null || graphicalAbstractElementIds === void 0 ? void 0 : graphicalAbstractElementIds.map((id) => {
         const figure = modelMap.get(id);
@@ -59,7 +58,7 @@ const getInlineFiles = (modelMap, files) => {
             });
         }
     });
-    const figures = (0, transform_1.getModelsByType)(modelMap, json_schema_1.ObjectTypes.FigureElement);
+    const figures = (0, json_schema_1.getModelsByType)(modelMap, json_schema_1.ObjectTypes.FigureElement);
     const figureOrder = orders.get(json_schema_1.ObjectTypes.FigureElement);
     if (figureOrder) {
     }
@@ -73,13 +72,13 @@ const getInlineFiles = (modelMap, files) => {
 };
 exports.getInlineFiles = getInlineFiles;
 const getSupplements = (modelMap, files) => {
-    const supplements = (0, transform_1.getModelsByType)(modelMap, json_schema_1.ObjectTypes.Supplement);
+    const supplements = (0, json_schema_1.getModelsByType)(modelMap, json_schema_1.ObjectTypes.Supplement);
     return supplements.flatMap((s) => getSupplementFiles(s, files));
 };
 exports.getSupplements = getSupplements;
 const getOrderByType = (modelMap) => {
     const groups = new Map();
-    const orders = (0, transform_1.getModelsByType)(modelMap, json_schema_1.ObjectTypes.ElementsOrder);
+    const orders = (0, json_schema_1.getModelsByType)(modelMap, json_schema_1.ObjectTypes.ElementsOrder);
     orders.forEach((o) => groups.set(o.elementType, o));
     return groups;
 };

package/dist/es/components/Comments/CommentBody.js

@@ -1,10 +1,10 @@
 import AnnotationReply from '@manuscripts/assets/react/AnnotationReply';
 import { Field, Form, Formik } from 'formik';
 import React, { useEffect } from 'react';
-import ReactTooltip from 'react-tooltip';
 import styled from 'styled-components';
 import { ButtonGroup, PrimaryButton, SecondaryButton } from '../Button';
 import { FormError } from '../Form';
+import { Tooltip } from '../Tooltip';
 export const CommentBody = React.memo(({ comment, saveComment, deleteComment, isReply, isNew, handleCreateReply, setIsEditing, scrollIntoHighlight, onFocusOut, isEditing, isProdNote, }) => {
     useEffect(() => {
         if (isNew) {
@@ -37,9 +37,9 @@ export const CommentBody = React.memo(({ comment, saveComment, deleteComment, is
             React.createElement(StyledCommentViewer, { "data-cy": "note-text" }, comment.contents)),
         !isReply && (React.createElement(CommentFooter, null,
             React.createElement("span", null,
-                React.createElement(ActionButton, { hidden: !isProdNote, "data-tip": true, "data-for": `reply-${comment._id}`, onClick: () => handleCreateReply(comment._id), "aria-label": 'reply', className: "reply-button note-actions" },
+                React.createElement(ActionButton, { hidden: !isProdNote, "data-tooltip-id": `reply-${comment._id}`, onClick: () => handleCreateReply(comment._id), "aria-label": 'reply', className: "reply-button note-actions" },
                     React.createElement(AnnotationReply, null))),
-            React.createElement(ReactTooltip, { id: `reply-${comment._id}`, place: "bottom", effect: "solid", offset: { top: 10 }, className: "tooltip" }, "Reply")))))));
+            React.createElement(Tooltip, { id: `reply-${comment._id}`, place: "bottom" }, "Reply")))))));
 });
 const CommentFooter = styled.div `
   margin-bottom: ${(props) => props.theme.grid.unit * 2}px;

package/dist/es/components/Comments/CommentUser.js

@@ -59,7 +59,7 @@ export const CommentUser = ({ contributions, getCollaboratorById, displayName, c
     }
     return (React.createElement(CommentUserContainer, null,
         React.createElement(Header, null,
-            React.createElement(Avatar, { src: user.avatar, size: 20 })),
+            React.createElement(Avatar, { size: 20 })),
         React.createElement(Header, null,
             React.createElement(CommentUserName, null,
                 "By ",

package/dist/es/components/Comments/ResolveButton.js

@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 import React from 'react';
-import ReactTooltip from 'react-tooltip';
 import styled from 'styled-components';
 import { IconTextButton } from '../Button';
 import TickMark from '../icons/tick-mark';
+import { Tooltip } from '../Tooltip';
 export const ResolveButton = ({ id, resolved, resolvedCallback }) => {
     return (React.createElement(Container, null,
-        React.createElement(Button, { resolved: resolved, "data-tip": true, "data-for": id, onClick: resolvedCallback },
+        React.createElement(Button, { resolved: resolved, "data-tooltip-id": id, onClick: resolvedCallback },
             React.createElement(TickMark, { color: '#353535' })),
-        React.createElement(ReactTooltip, { id: id, place: "bottom", effect: "solid", offset: { top: 10 }, className: "tooltip" }, (resolved && 'Unresolve') || 'Resolve')));
+        React.createElement(Tooltip, { id: id, place: "bottom" }, (resolved && 'Unresolve') || 'Resolve')));
 };
 const Container = styled.div `
   display: flex;

package/dist/es/components/FileManager/FileCreatedDate.js

@@ -1,11 +1,11 @@
 import { format } from 'date-fns';
 import React from 'react';
 import styled from 'styled-components';
-import { Tooltip } from './Tooltip';
+import { Tooltip } from '../Tooltip';
 export const FileCreatedDate = ({ file, className }) => {
-    return file.createdDate ? (React.createElement(FileDateContainer, { "data-tip": "File Uploaded", "data-for": `${file.id}-created-date`, className: className },
+    return file.createdDate ? (React.createElement(FileDateContainer, { "data-tooltip-id": `${file.id}-created-date-tooltip`, className: className },
         React.createElement(FileDate, null, format(new Date(file.createdDate), 'M/d/yy, HH:mm')),
-        React.createElement(Tooltip, { id: `${file.id}-created-date`, place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))) : (React.createElement(React.Fragment, null));
+        React.createElement(Tooltip, { id: `${file.id}-created-date-tooltip`, place: "bottom" }, "File Uploaded"))) : (React.createElement(React.Fragment, null));
 };
 export const FileDateContainer = styled.div `
   overflow: hidden;

package/dist/es/components/FileManager/FileManager.js

@@ -2,12 +2,12 @@ import React, { createContext } from 'react';
 import { useFiles } from '../../index';
 import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, } from '../Inspector';
 import { InspectorSection } from '../InspectorSection';
+import { Tooltip } from '../Tooltip';
 import { DragLayer } from './DragLayer';
 import { FileManagerProvider } from './FileManagerProvider';
 import { InlineFilesSection } from './InlineFilesSection';
 import { OtherFilesSection } from './OtherFilesSection';
 import { SupplementsSection } from './SupplementsSection';
-import { Tooltip } from './Tooltip';
 export const PermissionsContext = createContext(null);
 export const FileManager = ({ files, fileManagement, modelMap, saveModel, deleteModel, enableDragAndDrop, can, }) => {
     const { inlineFiles, supplements, otherFiles } = useFiles(modelMap, files);
@@ -17,12 +17,12 @@ export const FileManager = ({ files, fileManagement, modelMap, saveModel, delete
             React.createElement(InspectorSection, { title: 'Files', contentStyles: { margin: '24px 16px' } },
                 React.createElement(InspectorTabs, { defaultIndex: 0, "data-cy": "files-tabs", style: { overflow: 'visible' } },
                     React.createElement(InspectorTabList, null,
-                        React.createElement(InspectorTab, { "data-for": "inline", "data-tip": true }, "Inline files"),
-                        React.createElement(Tooltip, { id: "inline", place: "bottom", offset: { bottom: -11 }, effect: "solid", className: "tooltip" }, "Files that can be found inline in the manuscript."),
-                        React.createElement(InspectorTab, { "data-for": "supplements", "data-tip": true }, "Supplements"),
-                        React.createElement(Tooltip, { id: "supplements", place: "bottom", offset: { bottom: -11 }, effect: "solid", className: "tooltip" }, "Files that were marked as supplements."),
-                        React.createElement(InspectorTab, { "data-for": "other", "data-tip": true }, "Other files"),
-                        React.createElement(Tooltip, { id: "other", place: "bottom", offset: { bottom: -11 }, effect: "solid", className: "tooltip" }, "Files excluded from the final submission.")),
+                        React.createElement(InspectorTab, { "data-tooltip-id": "inline-tooltip" }, "Inline files"),
+                        React.createElement(Tooltip, { id: "inline-tooltip", place: "bottom" }, "Files that can be found inline in the manuscript."),
+                        React.createElement(InspectorTab, { "data-tooltip-id": "supplements-tooltip" }, "Supplements"),
+                        React.createElement(Tooltip, { id: "supplements-tooltip", place: "bottom" }, "Files that were marked as supplements."),
+                        React.createElement(InspectorTab, { "data-tooltip-id": "other-tooltip" }, "Other files"),
+                        React.createElement(Tooltip, { id: "other-tooltip", place: "bottom" }, "Files excluded from the final submission.")),
                     React.createElement(InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
                         React.createElement(InspectorTabPanel, { "data-cy": "inline" },
                             React.createElement(InlineFilesSection, { elements: inlineFiles, isEditor: enableDragAndDrop })),

package/dist/es/components/FileManager/OtherFilesSection.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { buildSupplementaryMaterial } from '@manuscripts/transform';
+import { buildSupplement } from '@manuscripts/json-schema';
 import React, { useContext, useEffect, useState } from 'react';
 import { useDrag } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
@@ -39,7 +39,7 @@ export const OtherFilesSection = ({ files }) => {
         });
     });
     const moveToSupplements = (file) => __awaiter(void 0, void 0, void 0, function* () {
-        const supplement = buildSupplementaryMaterial('', file.id);
+        const supplement = buildSupplement('', file.id);
         yield saveModel(supplement);
         setAlert({
             type: FileSectionAlertType.MOVE_SUCCESSFUL,

package/dist/es/components/FileManager/SupplementsSection.js

@@ -7,8 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { ObjectTypes } from '@manuscripts/json-schema';
-import { buildSupplementaryMaterial } from '@manuscripts/transform';
+import { buildSupplement, ObjectTypes, } from '@manuscripts/json-schema';
 import React, { useContext, useEffect, useState } from 'react';
 import { useDrag } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
@@ -42,7 +41,7 @@ export const SupplementsSection = ({ supplements }) => {
     });
     const handleUpload = (file) => __awaiter(void 0, void 0, void 0, function* () {
         const uploaded = yield upload(file);
-        const supplement = buildSupplementaryMaterial('', uploaded.id);
+        const supplement = buildSupplement('', uploaded.id);
         yield saveModel(supplement);
     });
     const handleReplace = (modelId, file) => __awaiter(void 0, void 0, void 0, function* () {

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

@@ -1,6 +1,6 @@
 import AnnotationEdit from '@manuscripts/assets/react/AnnotationEdit';
 import CloseIconDark from '@manuscripts/assets/react/CloseIconDark';
-import { buildBibliographyItem } from '@manuscripts/transform';
+import { buildBibliographyItem, } from '@manuscripts/json-schema';
 import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { ButtonGroup, IconButton, IconTextButton, PrimaryButton, SecondaryButton, } from '../Button';

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

@@ -16,10 +16,9 @@
 import AddAuthor from '@manuscripts/assets/react/AddAuthor';
 import Trashcan from '@manuscripts/assets/react/AnnotationRemove';
 import ArrowDownBlue from '@manuscripts/assets/react/ArrowDownBlue';
-import { buildBibliographicDate, buildBibliographicName, } from '@manuscripts/transform';
+import { buildBibliographicDate, buildBibliographicName, } from '@manuscripts/json-schema';
 import { Field, FieldArray, Form, Formik, useFormikContext, } from 'formik';
 import React, { useEffect, useRef, useState, } from 'react';
-import ReactTooltip from 'react-tooltip';
 import styled from 'styled-components';
 import { ButtonGroup, IconButton, PrimaryButton, SecondaryButton, } from '../Button';
 import { Category, Dialog } from '../Dialog';
@@ -27,6 +26,7 @@ import { DeleteIcon } from '../icons/delete-icon';
 import { LinkIcon } from '../icons/link-icon';
 import { SelectField } from '../SelectField';
 import { TextArea, TextField } from '../TextField';
+import { Tooltip } from '../Tooltip';
 export const LabelContainer = styled.div `
   display: flex;
   justify-content: space-between;
@@ -235,12 +235,11 @@ export const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel
                 } }),
             React.createElement(Actions, null,
                 React.createElement(ButtonGroup, null,
-                    React.createElement(IconButton, { defaultColor: true, as: "a", href: `https://doi.org/${formik.values.DOI}`, target: '_blank' },
+                    React.createElement(IconButton, { as: "a", href: `https://doi.org/${formik.values.DOI}`, target: '_blank' },
                         React.createElement(LinkIcon, null)),
-                    React.createElement("div", { "data-tip": true, "data-for": 'delete-button' },
-                        React.createElement(DeleteButton, { defaultColor: true, disabled: !showDelete, onClick: () => setShowDeleteDialog(true) },
-                            React.createElement(DeleteIcon, null)),
-                        React.createElement(ReactTooltip, { disable: showDelete, id: 'delete-button', place: "bottom", effect: "solid", offset: { top: 15 }, className: "tooltip" }, "Unable to delete because the item is used in the document"))),
+                    React.createElement(DeleteButton, { defaultColor: true, disabled: !showDelete, "data-tooltip-id": showDelete ? '' : 'delete-button-tooltip', onClick: () => setShowDeleteDialog(true) },
+                        React.createElement(DeleteIcon, null)),
+                    React.createElement(Tooltip, { id: "delete-button-tooltip", place: "bottom" }, "Unable to delete because the item is used in the document")),
                 React.createElement(ButtonGroup, null,
                     React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
                     React.createElement(PrimaryButton, { type: "submit" }, "Save"))),