@manuscripts/style-guide 0.30.25 → 0.31.0

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

@@ -130,7 +130,7 @@ const FileManager = ({ submissionId, attachments, modelMap, enableDragAndDrop, c
                                 react_1.default.createElement("div", null, "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, null,
-                            react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { modelMap: modelMap, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
+                            react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { modelMap: modelMap, attachments: attachments, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
                             react_1.default.createElement(FilesSection_1.FilesSection, { submissionId: submissionId, enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: util_1.FileSectionType.Supplements, filesItem: getFileSectionExternalFile(util_1.FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,

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

@@ -32,8 +32,8 @@ const FileInfo_1 = require("./FileSectionItem/FileInfo");
 const FileSectionItem_1 = require("./FileSectionItem/FileSectionItem");
 const ItemActions_1 = require("./FileSectionItem/ItemActions");
 const util_1 = require("./util");
-const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, modelMap, isEditor, dispatch, }) => {
-    const inlineFiles = (0, react_1.useMemo)(() => (0, inlineFiles_1.default)(modelMap), [modelMap]);
+const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, modelMap, attachments, isEditor, dispatch, }) => {
+    const inlineFiles = (0, react_1.useMemo)(() => (0, inlineFiles_1.default)(modelMap, attachments), [modelMap, attachments]);
     const onElementClick = (0, react_1.useCallback)((e) => {
         if (!isEditor) {
             return;
@@ -48,7 +48,7 @@ const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, model
     return (react_1.default.createElement("div", null, inlineFiles.map((file, index) => {
         var _a;
         return (react_1.default.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
-            react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.externalFileReferences) === null || _a === void 0 ? void 0 : _a.map((externalFile, index) => (react_1.default.createElement(FileReference, { key: index, externalFile: externalFile.ref, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, dispatch: dispatch })))),
+            react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (react_1.default.createElement(FileReference, { key: attachment.id, attachment: attachment, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, dispatch: dispatch })))),
             react_1.default.createElement(Element, { className: 'element' },
                 util_1.fileTypesWithIconMap.get(file.type),
                 react_1.default.createElement(FileInfo_1.FileInfoContainer, null,
@@ -58,20 +58,20 @@ const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, model
     })));
 };
 exports.InlineFilesSection = InlineFilesSection;
-const FileReference = ({ externalFile, submissionId, handleReplace, handleDownload, dispatch, }) => {
+const FileReference = ({ attachment, submissionId, handleReplace, handleDownload, dispatch, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, use_dropdown_1.useDropdown)();
-    if (!externalFile || !externalFile.filename) {
+    if (!attachment || !attachment.name) {
         return null;
     }
-    const fileExtension = externalFile.filename.substring(externalFile.filename.lastIndexOf('.') + 1);
-    return (react_1.default.createElement(FileReferenceItem, { key: externalFile._id },
+    const fileExtension = attachment.name.substring(attachment.name.lastIndexOf('.') + 1);
+    return (react_1.default.createElement(FileReferenceItem, { key: attachment.id },
         react_1.default.createElement(Container, null,
             util_1.fileTypesWithIconMap.get(util_1.extensionsWithFileTypesMap.get(fileExtension)),
-            react_1.default.createElement(FileReferenceName, null, externalFile.filename)),
+            react_1.default.createElement(FileReferenceName, null, attachment.name)),
         handleDownload && handleReplace && submissionId && (react_1.default.createElement(DropdownContainer, { ref: wrapperRef },
             react_1.default.createElement(FileSectionItem_1.ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace", "aria-pressed": isOpen },
                 react_1.default.createElement(dots_icon_1.default, null)),
-            isOpen && (react_1.default.createElement(ItemActions_1.ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, attachmentId: undefined, fileName: externalFile.filename, designation: externalFile.designation, publicUrl: externalFile.publicUrl, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
+            isOpen && (react_1.default.createElement(ItemActions_1.ItemActions, { replaceAttachmentHandler: handleReplace, downloadAttachmentHandler: handleDownload, submissionId: submissionId, attachmentId: attachment.id, fileName: attachment.name, designation: attachment.type.label, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
 };
 const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
   display: flex;

package/dist/cjs/components/Resizer/Resizer.js

@@ -0,0 +1,109 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Resizer = void 0;
+const react_1 = __importDefault(require("react"));
+const ResizerButton_1 = require("./ResizerButton");
+const ResizerInner_1 = require("./ResizerInner");
+const inners = {
+    column: {
+        end: ResizerInner_1.VerticalEndResizerInner,
+        start: ResizerInner_1.VerticalStartResizerInner,
+    },
+    row: {
+        end: ResizerInner_1.HorizontalEndResizerInner,
+        start: ResizerInner_1.HorizontalStartResizerInner,
+    },
+};
+class Resizer extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.resizerRef = react_1.default.createRef();
+        this.state = {
+            isHovering: false,
+            isResizing: false,
+            startPosition: 0,
+        };
+        this.scheduleResize = (delta) => {
+            if (this.state.isResizing && delta) {
+                this.props.onResize(delta);
+            }
+        };
+        this.mouseDownHandler = (e) => {
+            e.preventDefault();
+            if (!this.resizerRef.current || e.target !== this.resizerRef.current) {
+                return;
+            }
+            if (this.state.isResizing) {
+                return;
+            }
+            this.setState({
+                isResizing: true,
+                startPosition: this.getPosition(e),
+            });
+            window.addEventListener('mousemove', this.mouseMoveHandler);
+            window.addEventListener('mouseup', this.mouseUpHandler);
+            window.addEventListener('mouseout', this.handleOutofBounds);
+        };
+        this.mouseUpHandler = (e, outOfBounds = false) => {
+            window.removeEventListener('mousemove', this.mouseMoveHandler);
+            window.removeEventListener('mouseup', this.mouseUpHandler);
+            window.removeEventListener('mouseout', this.handleOutofBounds);
+            this.setState({
+                isResizing: false,
+            });
+            const position = this.getPosition(e);
+            const adjustedPosition = outOfBounds ? position - 32 : position;
+            const delta = this.getDelta(adjustedPosition);
+            if (delta === 0) {
+                this.props.onResizeButton();
+            }
+            this.props.onResize(delta);
+            this.props.onResizeEnd(delta);
+        };
+        this.mouseMoveHandler = (e) => {
+            const position = this.getPosition(e);
+            const delta = this.getDelta(position);
+            this.scheduleResize(delta);
+        };
+        this.mouseEnterHandler = () => {
+            this.setState({
+                isHovering: true,
+            });
+        };
+        this.mouseLeaveHandler = () => {
+            this.setState({
+                isHovering: false,
+            });
+        };
+        this.handleOutofBounds = (e) => {
+            const disableResizeNodes = [
+                'IFRAME',
+                'HTML',
+                null,
+            ];
+            if (this.state.isResizing &&
+                disableResizeNodes.includes(e.relatedTarget && e.relatedTarget.nodeName)) {
+                this.mouseUpHandler(e, true);
+            }
+        };
+        this.getDelta = (delta) => {
+            const { startPosition } = this.state;
+            return this.props.side === 'end'
+                ? delta - startPosition
+                : startPosition - delta;
+        };
+        this.getPosition = (e) => {
+            return this.props.direction === 'row' ? e.screenX : e.screenY;
+        };
+    }
+    render() {
+        const { buttonInner, direction, side } = this.props;
+        const ResizerInner = inners[direction][side];
+        return (react_1.default.createElement(ResizerInner, { ref: this.resizerRef, onMouseDown: this.mouseDownHandler, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler },
+            react_1.default.createElement(ResizerButton_1.ResizerButton, { direction: direction, isCollapsed: this.props.collapsed, isVisible: this.state.isHovering, onClick: this.props.onResizeButton, side: side, buttonInner: buttonInner })));
+    }
+}
+exports.Resizer = Resizer;

package/dist/cjs/components/Resizer/ResizerButton.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResizerButton = void 0;
+const react_1 = __importDefault(require("react"));
+const ResizerButtonInner_1 = require("./ResizerButtonInner");
+const inners = {
+    column: {
+        end: ResizerButtonInner_1.VerticalEndResizerButtonInner,
+        start: ResizerButtonInner_1.VerticalStartResizerButtonInner,
+    },
+    row: {
+        end: ResizerButtonInner_1.HorizontalEndResizerButtonInner,
+        start: ResizerButtonInner_1.HorizontalStartResizerButtonInner,
+    },
+};
+class ResizerButton extends react_1.default.PureComponent {
+    render() {
+        const { buttonInner, direction, side, isCollapsed, onClick, isVisible } = this.props;
+        const ResizerButtonInner = buttonInner || inners[direction][side];
+        return (react_1.default.createElement(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault() }));
+    }
+}
+exports.ResizerButton = ResizerButton;
+ResizerButton.defaultProps = {
+    isCollapsed: false,
+    isVisible: false,
+};

package/dist/cjs/components/Resizer/ResizerButtonInner.js

@@ -0,0 +1,169 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalStartResizerButtonInner = exports.VerticalEndResizerButtonInner = exports.HorizontalStartResizerButtonInner = exports.HorizontalEndResizerButtonInner = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const gridSize = 8;
+const resizerVisibleSize = 2;
+const toggleButtonDepth = gridSize * 4.5;
+const toggleArrowDepth = gridSize * 2;
+const toggleArrowSize = 2;
+const toggleArrowStartOffset = (toggleButtonDepth - toggleArrowDepth) / 2;
+const toggleArrowEndOffset = toggleArrowStartOffset - toggleArrowSize + toggleArrowDepth / 2;
+const opacityTransition = `opacity 200ms ease-in-out 100ms`;
+const transformTransition = `transform 100ms ease-in-out`;
+const ResizerButtonInner = styled_components_1.default.button `
+  position: relative;
+  background: none;
+  border: none;
+  color: transparent;
+  cursor: pointer;
+
+  &:focus {
+    outline: 1px solid blue;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    background-color: #ddd;
+    border-radius: ${toggleArrowDepth}px;
+    position: absolute;
+    opacity: ${(props) => (props.isVisible ? 1 : 0.5)};
+    transition: ${transformTransition}, ${opacityTransition};
+  }
+
+  &::before {
+    transform-origin: ${toggleArrowSize / 2}px
+      ${toggleArrowDepth / 2 - toggleArrowSize / 2}px;
+  }
+
+  &::after {
+    transform-origin: ${toggleArrowSize / 2}px ${toggleArrowSize / 2}px;
+  }
+
+  &:hover,
+  &:focus {
+    &::before,
+    &::after {
+      background-color: #2a6f9d;
+      opacity: 1;
+    }
+  }
+`;
+const HorizontalResizerButtonInner = (0, styled_components_1.default)(ResizerButtonInner) `
+  top: calc(50% - ${toggleButtonDepth / 2}px);
+  width: ${gridSize * 3}px;
+  height: ${toggleButtonDepth}px;
+
+  &::before,
+  &::after {
+    width: ${toggleArrowSize}px;
+    height: ${toggleArrowDepth / 2}px;
+    transform: rotate(0deg);
+  }
+
+  &::before {
+    top: ${toggleArrowStartOffset}px;
+  }
+
+  &::after {
+    top: ${toggleArrowEndOffset}px;
+  }
+`;
+exports.HorizontalEndResizerButtonInner = (0, styled_components_1.default)(HorizontalResizerButtonInner) `
+  left: -${resizerVisibleSize / 2}px;
+
+  &::before,
+  &::after {
+    left: 8px;
+  }
+
+  &:hover,
+  &:focus {
+    &::before {
+      transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
+    }
+    &::after {
+      transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
+    }
+  }
+`;
+exports.HorizontalStartResizerButtonInner = (0, styled_components_1.default)(HorizontalResizerButtonInner) `
+  right: -${resizerVisibleSize / 2}px;
+
+  &::before,
+  &::after {
+    right: 16px;
+  }
+
+  &:hover,
+  &:focus {
+    &::before {
+      transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
+    }
+    &::after {
+      transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
+    }
+  }
+`;
+const VerticalResizerButtonInner = (0, styled_components_1.default)(ResizerButtonInner) `
+  left: calc(50% - ${toggleButtonDepth / 2}px);
+  width: ${toggleButtonDepth}px;
+  height: ${gridSize * 3}px;
+
+  &::before,
+  &::after {
+    width: ${toggleArrowDepth / 2}px;
+    height: ${toggleArrowSize}px;
+  }
+
+  &::before {
+    left: ${toggleArrowStartOffset}px;
+  }
+
+  &::after {
+    left: ${toggleArrowEndOffset}px;
+  }
+`;
+exports.VerticalEndResizerButtonInner = (0, styled_components_1.default)(VerticalResizerButtonInner) `
+  bottom: -${resizerVisibleSize / 2}px;
+
+  &::before,
+  &::after {
+    bottom: 8px;
+    transform-origin: top center;
+  }
+
+  &:hover,
+  &:focus {
+    &::before {
+      transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
+    }
+    &::after {
+      transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
+    }
+  }
+`;
+exports.VerticalStartResizerButtonInner = (0, styled_components_1.default)(VerticalResizerButtonInner) `
+  top: -${resizerVisibleSize / 2}px;
+
+  &::before,
+  &::after {
+    top: 8px;
+    transform: rotate(270deg);
+    transform-origin: bottom center;
+  }
+
+  &:hover,
+  &:focus {
+    &::before {
+      transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
+    }
+    &::after {
+      transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
+    }
+  }
+`;

package/dist/cjs/components/Resizer/ResizerInner.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalEndResizerInner = exports.VerticalStartResizerInner = exports.HorizontalEndResizerInner = exports.HorizontalStartResizerInner = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const ResizerInner = styled_components_1.default.div `
+  display: block;
+  z-index: 2;
+  overflow: visible;
+  position: absolute;
+
+  &::before {
+    content: '';
+    position: absolute;
+    transition: background-color 200ms ease-in-out 100ms;
+    background: rgb(240, 240, 240);
+  }
+
+  &:hover::before {
+    background: #e2e2e2;
+  }
+`;
+const HorizontalResizerInner = (0, styled_components_1.default)(ResizerInner) `
+  cursor: ew-resize;
+  top: 0;
+  height: 100%;
+  width: 16px;
+
+  &::before {
+    height: 100%;
+    width: 1px;
+  }
+`;
+exports.HorizontalStartResizerInner = (0, styled_components_1.default)(HorizontalResizerInner) `
+  left: -16px;
+
+  &::before {
+    right: -1px;
+  }
+`;
+exports.HorizontalEndResizerInner = (0, styled_components_1.default)(HorizontalResizerInner) `
+  right: -16px;
+
+  &::before {
+    left: -1px;
+  }
+`;
+const VerticalResizerInner = (0, styled_components_1.default)(ResizerInner) `
+  cursor: ns-resize;
+  left: 0;
+  height: 16px;
+  width: 100%;
+
+  &::before {
+    width: 100%;
+    height: 1px;
+  }
+`;
+exports.VerticalStartResizerInner = (0, styled_components_1.default)(VerticalResizerInner) `
+  top: -16px;
+
+  &::before {
+    bottom: -1px;
+  }
+`;
+exports.VerticalEndResizerInner = (0, styled_components_1.default)(VerticalResizerInner) `
+  bottom: -16px;
+
+  &::before {
+    top: -1px;
+  }
+`;

package/dist/cjs/components/Resizer/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Resizer = void 0;
+var Resizer_1 = require("./Resizer");
+Object.defineProperty(exports, "Resizer", { enumerable: true, get: function () { return Resizer_1.Resizer; } });
+__exportStar(require("./types"), exports);

package/dist/cjs/components/Resizer/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/icons/attach.js

@@ -0,0 +1,24 @@
+"use strict";
+/*!
+ * © 2022 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 });
+const react_1 = __importDefault(require("react"));
+const AttachIcon = () => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M8.85683 5.35715L5.85183 8.36215C5.16883 9.04515 5.16883 10.1531 5.85183 10.8371C6.53483 11.5201 7.64283 11.5201 8.32683 10.8371L12.3928 6.77115C13.7598 5.40415 13.7598 3.18815 12.3928 1.82115C11.0258 0.454148 8.80983 0.454148 7.44283 1.82115L3.02383 6.24115C0.973828 8.29115 0.973828 11.6151 3.02383 13.6661C5.07383 15.7161 8.39783 15.7161 10.4488 13.6661L14.5138 9.60015", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
+exports.default = AttachIcon;

package/dist/cjs/components/icons/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.CloseOIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
+exports.MissingImage = exports.UploadIcon = exports.AttachIcon = exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.CloseOIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
 var add_author_1 = require("./add-author");
 Object.defineProperty(exports, "AddAuthor", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
 var add_icon_active_1 = require("./add-icon-active");
@@ -57,3 +57,9 @@ var task_step_done_1 = require("./task-step-done");
 Object.defineProperty(exports, "TaskStepDoneIcon", { enumerable: true, get: function () { return __importDefault(task_step_done_1).default; } });
 var task_step_next_1 = require("./task-step-next");
 Object.defineProperty(exports, "TaskStepNextIcon", { enumerable: true, get: function () { return __importDefault(task_step_next_1).default; } });
+var attach_1 = require("./attach");
+Object.defineProperty(exports, "AttachIcon", { enumerable: true, get: function () { return __importDefault(attach_1).default; } });
+var upload_1 = require("./upload");
+Object.defineProperty(exports, "UploadIcon", { enumerable: true, get: function () { return __importDefault(upload_1).default; } });
+var missing_image_1 = require("./missing-image");
+Object.defineProperty(exports, "MissingImage", { enumerable: true, get: function () { return __importDefault(missing_image_1).default; } });

package/dist/cjs/components/icons/missing-image.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const MissingImage = () => (react_1.default.createElement("svg", { width: "28", height: "32", viewBox: "0 0 28 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M2.99979 1.25C2.03237 1.25 1.25073 2.03442 1.25073 3V29C1.25073 29.9665 2.03423 30.75 3.00073 30.75H25.0007C25.9672 30.75 26.7507 29.9665 26.7507 29V11.4383C26.7507 10.9494 26.5462 10.4828 26.1868 10.1515L17.0318 1.71322C16.7092 1.41588 16.287 1.25 15.8467 1.25H15.8372H15.8275H15.8177H15.8078H15.7978H15.7877H15.7775H15.7671H15.7567H15.7462H15.7355H15.7248H15.7139H15.703H15.6919H15.6807H15.6694H15.6581H15.6466H15.635H15.6233H15.6115H15.5996H15.5876H15.5755H15.5633H15.551H15.5386H15.5261H15.5135H15.5008H15.488H15.4751H15.4621H15.449H15.4358H15.4225H15.4091H15.3956H15.382H15.3683H15.3545H15.3406H15.3266H15.3126H15.2984H15.2841H15.2697H15.2553H15.2407H15.2261H15.2113H15.1965H15.1815H15.1665H15.1514H15.1362H15.1209H15.1055H15.09H15.0744H15.0587H15.043H15.0271H15.0111H14.9951H14.979H14.9628H14.9464H14.93H14.9136H14.897H14.8803H14.8636H14.8467H14.8298H14.8128H14.7957H14.7785H14.7612H14.7438H14.7264H14.7089H14.6912H14.6735H14.6557H14.6379H14.6199H14.6019H14.5837H14.5655H14.5472H14.5289H14.5104H14.4919H14.4732H14.4545H14.4357H14.4169H14.3979H14.3789H14.3598H14.3406H14.3213H14.302H14.2825H14.263H14.2435H14.2238H14.204H14.1842H14.1643H14.1443H14.1243H14.1042H14.084H14.0637H14.0433H14.0229H14.0024H13.9818H13.9611H13.9404H13.9196H13.8987H13.8778H13.8567H13.8356H13.8144H13.7932H13.7719H13.7505H13.729H13.7075H13.6859H13.6642H13.6425H13.6206H13.5988H13.5768H13.5548H13.5327H13.5105H13.4883H13.466H13.4436H13.4212H13.3987H13.3761H13.3535H13.3308H13.308H13.2851H13.2622H13.2393H13.2162H13.1931H13.17H13.1467H13.1235H13.1001H13.0767H13.0532H13.0296H13.006H12.9824H12.9586H12.9348H12.911H12.8871H12.8631H12.839H12.8149H12.7908H12.7666H12.7423H12.7179H12.6935H12.6691H12.6446H12.62H12.5954H12.5707H12.5459H12.5211H12.4963H12.4713H12.4464H12.4213H12.3963H12.3711H12.3459H12.3207H12.2954H12.27H12.2446H12.2191H12.1936H12.168H12.1424H12.1167H12.091H12.0652H12.0394H12.0135H11.9876H11.9616H11.9355H11.9094H11.8833H11.8571H11.8309H11.8046H11.7782H11.7519H11.7254H11.6989H11.6724H11.6458H11.6192H11.5925H11.5658H11.539H11.5122H11.4854H11.4585H11.4315H11.4045H11.3775H11.3504H11.3233H11.2961H11.2689H11.2416H11.2143H11.187H11.1596H11.1322H11.1047H11.0772H11.0497H11.0221H10.9944H10.9668H10.939H10.9113H10.8835H10.8556H10.8278H10.7999H10.7719H10.7439H10.7159H10.6878H10.6597H10.6316H10.6034H10.5752H10.5469H10.5187H10.4903H10.462H10.4336H10.4052H10.3767H10.3482H10.3197H10.2911H10.2625H10.2339H10.2052H10.1765H10.1478H10.119H10.0902H10.0614H10.0326H10.0037H9.97477H9.94582H9.91684H9.88784H9.8588H9.82973H9.80064H9.77151H9.74236H9.71318H9.68397H9.65474H9.62547H9.59618H9.56687H9.53752H9.50815H9.47876H9.44934H9.41989H9.39042H9.36092H9.3314H9.30186H9.27229H9.24269H9.21308H9.18344H9.15378H9.12409H9.09438H9.06465H9.0349H9.00513H8.97534H8.94552H8.91569H8.88583H8.85596H8.82606H8.79615H8.76621H8.73626H8.70629H8.6763H8.64629H8.61627H8.58623H8.55617H8.52609H8.49599H8.46588H8.43576H8.40562H8.37546H8.34529H8.3151H8.2849H8.25468H8.22445H8.1942H8.16394H8.13367H8.10339H8.07309H8.04278H8.01246H7.98212H7.95178H7.92142H7.89105H7.86067H7.83029H7.79989H7.76948H7.73906H7.70863H7.67819H7.64775H7.61729H7.58683H7.55636H7.52588H7.49539H7.4649H7.4344H7.40389H7.37338H7.34286H7.31234H7.28181H7.25127H7.22073H7.19019H7.15964H7.12908H7.09853H7.06797H7.0374H7.00684H6.97627H6.9457H6.91512H6.88455H6.85397H6.82339H6.79282H6.76224H6.73166H6.70108H6.6705H6.63992H6.60934H6.57876H6.54819H6.51761H6.48704H6.45647H6.4259H6.39533H6.36477H6.33421H6.30366H6.27311H6.24256H6.21201H6.18148H6.15094H6.12041H6.08989H6.05937H6.02886H5.99836H5.96786H5.93737H5.90689H5.87641H5.84594H5.81548H5.78503H5.75458H5.72415H5.69372H5.66331H5.6329H5.6025H5.57212H5.54174H5.51138H5.48102H5.45068H5.42035H5.39003H5.35973H5.32943H5.29915H5.26888H5.23863H5.20839H5.17816H5.14795H5.11775H5.08757H5.0574H5.02725H4.99711H4.96699H4.93688H4.90679H4.87672H4.84667H4.81663H4.78661H4.75661H4.72662H4.69666H4.66671H4.63678H4.60687H4.57698H4.54712H4.51727H4.48744H4.45763H4.42784H4.39808H4.36833H4.33861H4.30891H4.27923H4.24958H4.21994H4.19033H4.16075H4.13119H4.10165H4.07213H4.04264H4.01318H3.98374H3.95433H3.92494H3.89558H3.86624H3.83693H3.80765H3.7784H3.74917H3.71997H3.6908H3.66165H3.63254H3.60345H3.57439H3.54537H3.51637H3.4874H3.45846H3.42955H3.40068H3.37183H3.34302H3.31423H3.28548H3.25676H3.22808H3.19942H3.1708H3.14222H3.11366H3.08514H3.05666H3.02821H2.99979Z", stroke: "#6E6E6E", strokeWidth: "1.5" }),
+    react_1.default.createElement("path", { d: "M8.00073 24C10.1219 20.9815 15.8916 16.7556 22.0007 24", stroke: "#6E6E6E", strokeWidth: "1.5", strokeLinecap: "round" }),
+    react_1.default.createElement("path", { d: "M8.00073 8C8.00073 8 8.00073 9.04738 8.00073 11", stroke: "#6E6E6E", strokeWidth: "1.5", strokeLinecap: "round" }),
+    react_1.default.createElement("path", { d: "M16.0007 2V12H26.0007", stroke: "#6E6E6E", strokeWidth: "1.5" })));
+exports.default = MissingImage;

package/dist/cjs/components/icons/upload.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const UploadIcon = () => (react_1.default.createElement("svg", { width: "17", height: "18", viewBox: "0 0 17 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M8.5 12.5V1.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }),
+    react_1.default.createElement("path", { d: "M13.5 6.5L8.5 1.5L3.5 6.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }),
+    react_1.default.createElement("path", { d: "M15.5 16.5H1.5", stroke: "#6E6E6E", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
+exports.default = UploadIcon;

package/dist/cjs/index.js

@@ -48,6 +48,7 @@ __exportStar(require("./components/Form"), exports);
 __exportStar(require("./components/FileManager"), exports);
 __exportStar(require("./components/FileManager/util"), exports);
 __exportStar(require("./components/FileManager/FileSectionItem/FileSectionItem"), exports);
+__exportStar(require("./components/Resizer"), exports);
 __exportStar(require("./components/SaveStatus"), exports);
 __exportStar(require("./components/SimpleModal"), exports);
 __exportStar(require("./components/StyledModal"), exports);

package/dist/cjs/lib/inlineFiles.js

@@ -6,33 +6,44 @@ const util_1 = require("../components/FileManager/util");
 const getCaptionText = (caption) => caption &&
     new DOMParser().parseFromString(caption, 'text/html').documentElement
         .innerText;
-const getFigureData = (element, modelMap) => {
-    const externalFileReferences = [];
+const getAttachment = (externalFileRef, attachmentsMap) => {
+    if (!(externalFileRef === null || externalFileRef === void 0 ? void 0 : externalFileRef.url.includes('https://'))) {
+        const attachmentId = externalFileRef === null || externalFileRef === void 0 ? void 0 : externalFileRef.url.replace('attachment:', '');
+        return attachmentId ? attachmentsMap.get(attachmentId) : undefined;
+    }
+    else {
+        return [...attachmentsMap.values()].find((attachment) => attachment.link === externalFileRef.url);
+    }
+};
+const getFigureData = (element, modelMap, attachmentsMap) => {
+    const attachments = [];
     element.containedObjectIDs.map((e) => {
         var _a;
         const object = modelMap.get(e);
         if (object && object.objectType === manuscripts_json_schema_1.ObjectTypes.Figure) {
             const externalFileRef = (_a = object.externalFileReferences) === null || _a === void 0 ? void 0 : _a.find((figure) => figure.kind === 'imageRepresentation');
-            if (externalFileRef) {
-                externalFileReferences.push(externalFileRef);
+            const attachment = getAttachment(externalFileRef, attachmentsMap);
+            if (attachment) {
+                attachments.push(attachment);
             }
         }
     });
     return {
         id: element._id,
-        externalFileReferences,
+        attachments,
         caption: getCaptionText(element.caption),
     };
 };
-exports.default = (modelMap) => {
+exports.default = (modelMap, attachments) => {
     const files = [];
+    const attachmentsMap = new Map(attachments.map((attachment) => [attachment.id, attachment]));
     (0, manuscript_transform_1.getModelsByType)(modelMap, manuscripts_json_schema_1.ObjectTypes.Section).map((section) => {
         var _a, _b;
         if (section.category === 'MPSectionCategory:abstract-graphical') {
             (_a = section.elementIDs) === null || _a === void 0 ? void 0 : _a.some((elementId) => {
                 const element = modelMap.get(elementId);
                 if (element && (0, manuscript_transform_1.hasObjectType)(manuscripts_json_schema_1.ObjectTypes.FigureElement)(element)) {
-                    files.unshift(Object.assign(Object.assign({}, getFigureData(element, modelMap)), { label: `Graphical Abstract`, type: util_1.FileType.GraphicalAbstract }));
+                    files.unshift(Object.assign(Object.assign({}, getFigureData(element, modelMap, attachmentsMap)), { label: `Graphical Abstract`, type: util_1.FileType.GraphicalAbstract }));
                     return true;
                 }
             });
@@ -47,19 +58,20 @@ exports.default = (modelMap) => {
                 switch (element.objectType) {
                     case manuscripts_json_schema_1.ObjectTypes.FigureElement:
                     case manuscripts_json_schema_1.ObjectTypes.MultiGraphicFigureElement: {
-                        files.push(Object.assign(Object.assign({}, getFigureData(element, modelMap)), { label: `Figure`, type: util_1.FileType.Figure }));
+                        files.push(Object.assign(Object.assign({}, getFigureData(element, modelMap, attachmentsMap)), { label: `Figure`, type: util_1.FileType.Figure }));
                         break;
                     }
                     case manuscripts_json_schema_1.ObjectTypes.TableElement: {
                         const tableElement = element;
                         const table = modelMap.get(tableElement.containedObjectID);
-                        const externalFileReferences = (_a = table.externalFileReferences) === null || _a === void 0 ? void 0 : _a.filter((file) => file.kind === 'dataset' && file.ref);
-                        if (externalFileReferences && externalFileReferences.length > 0) {
+                        const externalFileReference = (_a = table.externalFileReferences) === null || _a === void 0 ? void 0 : _a.find((file) => file.kind === 'dataset' && file.ref);
+                        const attachment = getAttachment(externalFileReference, attachmentsMap);
+                        if (attachment) {
                             files.push({
                                 id: element._id,
                                 label: `Table`,
                                 type: util_1.FileType.SheetsWorkbooks,
-                                externalFileReferences: table.externalFileReferences,
+                                attachments: [attachment],
                                 caption: getCaptionText(tableElement.caption),
                             });
                         }

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

@@ -105,7 +105,7 @@ export const FileManager = ({ submissionId, attachments, modelMap, enableDragAnd
                                 React.createElement("div", null, "Files excluded from the final submission.")))),
                     React.createElement(InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
                         React.createElement(InspectorTabPanel, null,
-                            React.createElement(InlineFilesSection, { modelMap: modelMap, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
+                            React.createElement(InlineFilesSection, { modelMap: modelMap, attachments: attachments, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,
                             React.createElement(FilesSection, { submissionId: submissionId, enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: FileSectionType.Supplements, filesItem: getFileSectionExternalFile(FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,