@manuscripts/style-guide 2.0.29-LEAN-4213.0 → 2.0.30-LEAN-4218.1

package/dist/cjs/components/ContextMenu.js

@@ -38,6 +38,7 @@ const icons = {
     Edit: icons_1.EditIcon,
     AddOutline: icons_1.AddOutlineIcon,
     Scroll: icons_1.ScrollIcon,
+    Delete: icons_1.DeleteIcon,
 };
 const ContextMenu = ({ actions }) => (react_1.default.createElement(Button_1.IconButtonGroup, { size: 32 }, actions.map((action) => {
     const Icon = icons[action.icon];

package/dist/cjs/components/Dialog.js

@@ -83,6 +83,7 @@ var Category;
 (function (Category) {
     Category["error"] = "error";
     Category["confirmation"] = "confirmation";
+    Category["warning"] = "warning";
 })(Category = exports.Category || (exports.Category = {}));
 const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? (react_1.default.createElement(Button_1.PrimaryButton, { danger: true, disabled: props.disabled, form: "formDialog", type: "submit" }, props.title)) : (react_1.default.createElement(Button_1.PrimaryButton, { danger: true, disabled: props.disabled, onClick: props.action, autoFocus: true }, props.title))) : props.hasForm ? (react_1.default.createElement(Button_1.PrimaryButton, { disabled: props.disabled, form: "formDialog", type: "submit" }, props.title)) : (react_1.default.createElement(Button_1.PrimaryButton, { disabled: props.disabled, onClick: props.action, autoFocus: true }, props.title));
 const SecondaryAction = (props) => (react_1.default.createElement(Button_1.SecondaryButton, { disabled: props.disabled, onClick: props.action }, props.title));
@@ -125,6 +126,8 @@ class Dialog extends react_1.default.Component {
                 react_1.default.createElement(HeaderContainer, null,
                     category === Category.error && (react_1.default.createElement(Icon, null,
                         react_1.default.createElement(icons_1.AttentionRedIcon, null))),
+                    category === Category.warning && (react_1.default.createElement(Icon, null,
+                        react_1.default.createElement(icons_1.AttentionOrangeIcon, null))),
                     header),
                 react_1.default.createElement(exports.MessageContainer, null,
                     message,

package/dist/cjs/components/MultiValueInput.js

@@ -0,0 +1,152 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiValueInput = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const TextField_1 = require("./TextField");
+const Container = styled_components_1.default.div `
+  ${TextField_1.commonStyles}
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  padding: 0;
+  background: hotpink
+
+
+  &:hover Input {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+  &:has(Input:focus) {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+    border-color: ${(props) => props.theme.colors.border.field.hover};
+  }
+`;
+const Chip = styled_components_1.default.span `
+  display: flex;
+  align-items: center;
+  background-color: #f2f2f2;
+  color: ${(props) => props.theme.colors.text.primary};
+  border-radius: 12px;
+  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
+  padding: ${(props) => props.theme.grid.unit}px;
+  font-size: ${(props) => props.theme.font.size.small};
+  line-height: ${(props) => props.theme.font.lineHeight.normal};
+
+  & + Input {
+    padding-left: 0;
+  }
+`;
+const RemoveButton = styled_components_1.default.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
+  color: white;
+  background: #6e6e6e;
+  margin-left: 4px;
+  border: none;
+  border-radius: 100%;
+  cursor: pointer;
+  font-size: 10px;
+
+  &:hover {
+    background: black;
+  }
+`;
+const Input = styled_components_1.default.input `
+  ${TextField_1.commonStyles}
+
+  border: none;
+  flex: 1;
+  min-width: 6em;
+  padding: 10px 16px;
+
+  appearance: none;
+  -moz-appearance: textfield;
+  -webkit-appearance: none;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &::-moz-appearance: textfield;
+`;
+const MultiValueInput = ({ inputType, placeholder = '', initialValues = [], onChange, }) => {
+    const [values, setValues] = (0, react_1.useState)(initialValues);
+    const [currentValue, setCurrentValue] = (0, react_1.useState)('');
+    const handleAddValue = (value) => {
+        if (value.trim() && !values.includes(value.trim())) {
+            const updatedValues = [...values, value.trim()];
+            setValues(updatedValues);
+            onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
+        }
+        setCurrentValue('');
+    };
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        if (inputType === 'number' && /^\d*$/.test(value)) {
+            setCurrentValue(value);
+        }
+        else if (inputType === 'text') {
+            setCurrentValue(value);
+        }
+    };
+    const handleBlur = () => {
+        if (currentValue) {
+            handleAddValue(currentValue);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleAddValue(currentValue);
+        }
+    };
+    const handleRemoveValue = (index) => {
+        const updatedValues = values.filter((_, i) => i !== index);
+        setValues(updatedValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
+    };
+    const xplaceholder = placeholder
+        ? placeholder
+        : inputType === 'number'
+            ? 'Enter number and press enter'
+            : 'Enter text and press enter';
+    return (react_1.default.createElement(Container, null,
+        values.map((value, index) => (react_1.default.createElement(Chip, { key: index },
+            value,
+            react_1.default.createElement(RemoveButton, { onMouseUp: () => handleRemoveValue(index) }, "\u00D7")))),
+        react_1.default.createElement(Input, { type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })));
+};
+exports.MultiValueInput = MultiValueInput;

package/dist/cjs/components/TextField.js

@@ -41,10 +41,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextFieldWrapper = exports.TextFieldLabel = exports.TextFieldGroup = exports.TextArea = exports.TextField = void 0;
+exports.TextFieldWrapper = exports.TextFieldLabel = exports.TextFieldGroup = exports.TextArea = exports.TextField = exports.commonStyles = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-const commonStyles = (0, styled_components_1.css) `
+exports.commonStyles = (0, styled_components_1.css) `
   border: 1px solid
     ${(props) => props.error
     ? props.theme.colors.border.error
@@ -75,10 +75,10 @@ const commonStyles = (0, styled_components_1.css) `
 `;
 exports.TextField = styled_components_1.default.input `
   display: block;
-  ${commonStyles}
+  ${exports.commonStyles}
 `;
 exports.TextArea = styled_components_1.default.textarea `
-  ${commonStyles}
+  ${exports.commonStyles}
   max-width: 100%;
 `;
 exports.TextFieldGroup = styled_components_1.default.div `

package/dist/cjs/components/icons/add-outline.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const AddOutlineIcon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none" }, props),
+const AddOutlineIcon = (props) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none" },
     react_1.default.createElement("path", { d: "M6.875 1.27794C7.57115 0.876016 8.42885 0.876016 9.125 1.27794L14.125 4.16469C14.8212 4.56662 15.25 5.3094 15.25 6.11325V11.8868C15.25 12.6906 14.8212 13.4334 14.125 13.8353L9.125 16.7221C8.42885 17.124 7.57115 17.124 6.875 16.7221L1.875 13.8353C1.17885 13.4334 0.75 12.6906 0.75 11.8868V6.11325C0.75 5.3094 1.17885 4.56662 1.875 4.16469L6.875 1.27794Z", stroke: "#353535", strokeWidth: "1.5" }),
     react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.00244 4.70996C7.78153 4.70996 7.60244 4.88905 7.60244 5.10996V8.30996H4.40244C4.18153 8.30996 4.00244 8.48905 4.00244 8.70996C4.00244 8.93087 4.18153 9.10996 4.40244 9.10996H7.60244V12.31C7.60244 12.5309 7.78153 12.71 8.00244 12.71C8.22336 12.71 8.40244 12.5309 8.40244 12.31V9.10996H11.6024C11.8234 9.10996 12.0024 8.93087 12.0024 8.70996C12.0024 8.48905 11.8234 8.30996 11.6024 8.30996H8.40244V5.10996C8.40244 4.88905 8.22336 4.70996 8.00244 4.70996Z", fill: "#353535" }),
     react_1.default.createElement("path", { d: "M7.60244 8.30996V8.80996H8.10244V8.30996H7.60244ZM7.60244 9.10996H8.10244V8.60996H7.60244V9.10996ZM8.40244 9.10996V8.60996H7.90244V9.10996H8.40244ZM8.40244 8.30996H7.90244V8.80996H8.40244V8.30996ZM8.10244 5.10996C8.10244 5.16519 8.05767 5.20996 8.00244 5.20996V4.20996C7.50539 4.20996 7.10244 4.6129 7.10244 5.10996H8.10244ZM8.10244 8.30996V5.10996H7.10244V8.30996H8.10244ZM4.40244 8.80996H7.60244V7.80996H4.40244V8.80996ZM4.50244 8.70996C4.50244 8.76519 4.45767 8.80996 4.40244 8.80996V7.80996C3.90538 7.80996 3.50244 8.2129 3.50244 8.70996H4.50244ZM4.40244 8.60996C4.45767 8.60996 4.50244 8.65473 4.50244 8.70996H3.50244C3.50244 9.20702 3.90538 9.60996 4.40244 9.60996V8.60996ZM7.60244 8.60996H4.40244V9.60996H7.60244V8.60996ZM8.10244 12.31V9.10996H7.10244V12.31H8.10244ZM8.00244 12.21C8.05767 12.21 8.10244 12.2547 8.10244 12.31H7.10244C7.10244 12.807 7.50539 13.21 8.00244 13.21V12.21ZM7.90244 12.31C7.90244 12.2547 7.94721 12.21 8.00244 12.21V13.21C8.4995 13.21 8.90244 12.807 8.90244 12.31H7.90244ZM7.90244 9.10996V12.31H8.90244V9.10996H7.90244ZM11.6024 8.60996H8.40244V9.60996H11.6024V8.60996ZM11.5024 8.70996C11.5024 8.65473 11.5472 8.60996 11.6024 8.60996V9.60996C12.0995 9.60996 12.5024 9.20702 12.5024 8.70996H11.5024ZM11.6024 8.80996C11.5472 8.80996 11.5024 8.76519 11.5024 8.70996H12.5024C12.5024 8.21291 12.0995 7.80996 11.6024 7.80996V8.80996ZM8.40244 8.80996H11.6024V7.80996H8.40244V8.80996ZM7.90244 5.10996V8.30996H8.90244V5.10996H7.90244ZM8.00244 5.20996C7.94721 5.20996 7.90244 5.16519 7.90244 5.10996H8.90244C8.90244 4.6129 8.4995 4.20996 8.00244 4.20996V5.20996Z", fill: "#353535" })));

package/dist/cjs/components/icons/circle-tick-animation.js

@@ -38,6 +38,16 @@ const fadeIn = (0, styled_components_1.keyframes) `
     transform: scale(1);
   }
 `;
+const fadeOut = (0, styled_components_1.keyframes) `
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+`;
 const fillCircle = (0, styled_components_1.keyframes) `
   from {
     stroke-dashoffset: 283;
@@ -61,6 +71,7 @@ const Svg = styled_components_1.default.svg `
   opacity: 0;
   animation: ${fadeIn} 0.3s ease-out forwards;
 
+  // Start fading out at 2.7s (300ms before the 3s unmount)
   @keyframes autoFadeOut {
     0%,
     90% {
@@ -92,8 +103,8 @@ const Tick = styled_components_1.default.polyline `
   stroke-linejoin: round;
   opacity: 0;
 `;
-const CircleTickAnimation = ({ size, style, }) => {
-    return (react_1.default.createElement(Svg, { width: size, height: size, viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", style: style },
+const CircleTickAnimation = ({ size }) => {
+    return (react_1.default.createElement(Svg, { width: size, height: size, viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
         react_1.default.createElement(Circle, { cx: "50", cy: "50", r: "45", strokeWidth: "5" }),
         react_1.default.createElement(Tick, { points: "30,50 45,65 70,40" })));
 };

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

@@ -18,8 +18,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LogoutIcon = exports.LinkIcon = exports.HelpIcon = exports.HandleOutlineIcon = exports.HandleInspectorIcon = exports.FileVideoIcon = exports.FileUnknownIcon = exports.FileTableIcon = exports.FilePdfIcon = exports.FileMainDocumentIcon = exports.FileLatexIcon = exports.FileImageIcon = exports.FileGraphicalAbstractIcon = exports.FileFigureIcon = exports.FileDocumentIcon = exports.FileCorruptedIcon = exports.FileCompressedIcon = exports.FileCodeIcon = exports.FileAudioIcon = exports.EditAttrsTrackingIcon = exports.EditIcon = exports.DraggableIcon = exports.DotsIcon = exports.DeleteIcon = exports.DeleteSolidIcon = exports.CorrespondingAuthorIcon = exports.CommentResolveIcon = exports.CommentReplyIcon = exports.CitationCountIcon = exports.SystemUserAvatarIcon = exports.AffiliationPlaceholderIcon = exports.AuthorPlaceholderIcon = exports.AffiliationIcon = exports.AlertIcon = exports.AvatarIcon = exports.AttentionRedIcon = exports.AttentionOrangeIcon = exports.AttentionGreenIcon = exports.AttentionBlueIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowLeftIcon = exports.ArrowDownCircleIcon = exports.ArrowDownIcon = exports.AddIcon = exports.AddOutlineIcon = exports.AddNewIcon = exports.AddedIcon = exports.AddCommentIcon = exports.AddAuthorIcon = void 0;
-exports.AddInstitutionIcon = exports.AddUserIcon = exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoldIcon = exports.TaskStepDoneIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.ScrollIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = void 0;
+exports.OutlineEquationIcon = exports.OutlineCodeIcon = exports.OutlineBlockQuoteIcon = exports.LogoutIcon = exports.LinkIcon = exports.HelpIcon = exports.HandleOutlineIcon = exports.HandleInspectorIcon = exports.FileVideoIcon = exports.FileUnknownIcon = exports.FileTableIcon = exports.FilePdfIcon = exports.FileMainDocumentIcon = exports.FileLatexIcon = exports.FileImageIcon = exports.FileGraphicalAbstractIcon = exports.FileFigureIcon = exports.FileDocumentIcon = exports.FileCorruptedIcon = exports.FileCompressedIcon = exports.FileCodeIcon = exports.FileAudioIcon = exports.EditAttrsTrackingIcon = exports.EditIcon = exports.DraggableIcon = exports.DotsIcon = exports.DeleteIcon = exports.DeleteSolidIcon = exports.CorrespondingAuthorIcon = exports.CommentResolveIcon = exports.CommentReplyIcon = exports.CitationCountIcon = exports.SystemUserAvatarIcon = exports.AlertIcon = exports.AvatarIcon = exports.AttentionRedIcon = exports.AttentionOrangeIcon = exports.AttentionGreenIcon = exports.AttentionBlueIcon = exports.AttachIcon = exports.ArrowUpIcon = exports.ArrowLeftIcon = exports.ArrowDownCircleIcon = exports.ArrowDownIcon = exports.AddIcon = exports.AddOutlineIcon = exports.AddNewIcon = exports.AddedIcon = exports.AddCommentIcon = exports.AddAuthorIcon = void 0;
+exports.ProfileIcon = exports.CrclTickAnimation = exports.VerticalEllipsisIcon = exports.UploadIcon = exports.TriangleExpandedIcon = exports.TriangleCollapsedIcon = exports.ToolbarUnorderedListIcon = exports.ToolbarUnderlineIcon = exports.ToolbarTableIcon = exports.ToolbarSymbolIcon = exports.ToolbarSuperscriptIcon = exports.ToolbarSubscriptIcon = exports.ToolbarOrderedListIcon = exports.ToolbarItalicIcon = exports.ToolbarFigureIcon = exports.ToolbarEquationIcon = exports.ToolbarCodeIcon = exports.ToolbarCitationIcon = exports.ToolbarBoldIcon = exports.TaskStepDoneIcon = exports.SliderOnIcon = exports.SliderOffIcon = exports.SectionCategoryIcon = exports.SearchIcon = exports.ScrollIcon = exports.SaveStatusSavingIcon = exports.SaveStatusSavedIcon = exports.SaveStatusOfflineIcon = exports.RoleReadingIcon = exports.RoleAnnotatingIcon = exports.PlusIcon = exports.OutlineUnorderedListIcon = exports.OutlineTableIcon = exports.OutlineSectionIcon = exports.OutlinePullQuoteIcon = exports.OutlineParagraphIcon = exports.OutlineOrderedListIcon = exports.OutlineManuscriptIcon = exports.OutlineFigureIcon = exports.OutlineEmbedIcon = void 0;
 var add_author_1 = require("./add-author");
 Object.defineProperty(exports, "AddAuthorIcon", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
 var add_comment_1 = require("./add-comment");
@@ -54,12 +54,6 @@ var avatar_1 = require("./avatar");
 Object.defineProperty(exports, "AvatarIcon", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
 var alert_1 = require("./alert");
 Object.defineProperty(exports, "AlertIcon", { enumerable: true, get: function () { return __importDefault(alert_1).default; } });
-var affiliation_1 = require("./affiliation");
-Object.defineProperty(exports, "AffiliationIcon", { enumerable: true, get: function () { return __importDefault(affiliation_1).default; } });
-var author_placeholder_1 = require("./author-placeholder");
-Object.defineProperty(exports, "AuthorPlaceholderIcon", { enumerable: true, get: function () { return __importDefault(author_placeholder_1).default; } });
-var affiliation_placeholder_1 = require("./affiliation-placeholder");
-Object.defineProperty(exports, "AffiliationPlaceholderIcon", { enumerable: true, get: function () { return __importDefault(affiliation_placeholder_1).default; } });
 var system_user_avatar_1 = require("./system-user-avatar");
 Object.defineProperty(exports, "SystemUserAvatarIcon", { enumerable: true, get: function () { return __importDefault(system_user_avatar_1).default; } });
 var citation_count_1 = require("./citation-count");
@@ -126,6 +120,8 @@ var outline_code_1 = require("./outline-code");
 Object.defineProperty(exports, "OutlineCodeIcon", { enumerable: true, get: function () { return __importDefault(outline_code_1).default; } });
 var outline_equation_1 = require("./outline-equation");
 Object.defineProperty(exports, "OutlineEquationIcon", { enumerable: true, get: function () { return __importDefault(outline_equation_1).default; } });
+var outline_embed_1 = require("./outline-embed");
+Object.defineProperty(exports, "OutlineEmbedIcon", { enumerable: true, get: function () { return __importDefault(outline_embed_1).default; } });
 var outline_figure_1 = require("./outline-figure");
 Object.defineProperty(exports, "OutlineFigureIcon", { enumerable: true, get: function () { return __importDefault(outline_figure_1).default; } });
 var outline_manuscript_1 = require("./outline-manuscript");
@@ -204,7 +200,3 @@ var circle_tick_animation_1 = require("./circle-tick-animation");
 Object.defineProperty(exports, "CrclTickAnimation", { enumerable: true, get: function () { return __importDefault(circle_tick_animation_1).default; } });
 var profile_avatar_1 = require("./profile-avatar");
 Object.defineProperty(exports, "ProfileIcon", { enumerable: true, get: function () { return __importDefault(profile_avatar_1).default; } });
-var add_user_1 = require("./add-user");
-Object.defineProperty(exports, "AddUserIcon", { enumerable: true, get: function () { return __importDefault(add_user_1).default; } });
-var add_institution_1 = require("./add-institution");
-Object.defineProperty(exports, "AddInstitutionIcon", { enumerable: true, get: function () { return __importDefault(add_institution_1).default; } });

package/dist/cjs/components/icons/outline-embed.js

@@ -0,0 +1,10 @@
+"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 OutlineEmbedIcon = (props) => (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", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.9098 2.88889C12.5223 2.88889 13.0801 3.17103 13.4826 3.63755C13.8647 4.08044 14.1053 4.69112 14.1053 5.36813V11.5208C14.1053 12.1978 13.8647 12.8084 13.4826 13.2513C13.0801 13.7178 12.5223 14 11.9098 14H4.09026C3.47778 14 2.91998 13.7178 2.51747 13.2513C2.13533 12.8084 1.89478 12.1978 1.89478 11.5208V5.36813C1.89478 4.69112 2.13533 4.08044 2.51747 3.63755C2.91998 3.17103 3.47778 2.88889 4.09026 2.88889H11.9098Z", stroke: "#0D79D0", strokeWidth: "1.5" }),
+    react_1.default.createElement("path", { d: "M10.2468 8.01749C10.5665 8.21235 10.5665 8.67656 10.2468 8.87142L7.28654 10.6755C6.95334 10.8785 6.52634 10.6387 6.52634 10.2485L6.52634 6.6404C6.52634 6.25021 6.95334 6.01038 7.28654 6.21344L10.2468 8.01749Z", fill: "#0D79D0" })));
+exports.default = OutlineEmbedIcon;

package/dist/cjs/index.js

@@ -42,6 +42,7 @@ __exportStar(require("./components/Avatar"), exports);
 __exportStar(require("./components/Dialog"), exports);
 __exportStar(require("./components/Checkbox"), exports);
 __exportStar(require("./components/Form"), exports);
+__exportStar(require("./components/MultiValueInput"), exports);
 __exportStar(require("./components/Resizer"), exports);
 __exportStar(require("./components/SaveStatus"), exports);
 __exportStar(require("./components/StyledModal"), exports);
@@ -63,9 +64,7 @@ __exportStar(require("./components/DatePicker"), exports);
 __exportStar(require("./components/Text"), exports);
 __exportStar(require("./components/RelativeDate"), exports);
 __exportStar(require("./components/Menus"), exports);
-__exportStar(require("./components/Drawer"), exports);
 __exportStar(require("./components/SelectField"), exports);
-__exportStar(require("./components/SelectedItemsBox"), exports);
 __exportStar(require("./hooks/use-dropdown"), exports);
 __exportStar(require("./hooks/use-menus"), exports);
 __exportStar(require("./hooks/use-scroll-detection"), exports);

package/dist/es/components/ContextMenu.js

@@ -16,7 +16,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { IconButton, IconButtonGroup } from './Button';
-import { AddCommentIcon, AddOutlineIcon, EditIcon, ScrollIcon } from './icons';
+import { AddCommentIcon, AddOutlineIcon, DeleteIcon, EditIcon, ScrollIcon, } from './icons';
 import { Tooltip } from './Tooltip';
 const ContextMenuIconButton = styled(IconButton) `
   color: #6e6e6e;
@@ -32,6 +32,7 @@ const icons = {
     Edit: EditIcon,
     AddOutline: AddOutlineIcon,
     Scroll: ScrollIcon,
+    Delete: DeleteIcon,
 };
 export const ContextMenu = ({ actions }) => (React.createElement(IconButtonGroup, { size: 32 }, actions.map((action) => {
     const Icon = icons[action.icon];

package/dist/es/components/Dialog.js

@@ -25,7 +25,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React from 'react';
 import styled from 'styled-components';
 import { ButtonGroup, PrimaryButton, SecondaryButton } from './Button';
-import { AttentionRedIcon } from './icons';
+import { AttentionOrangeIcon, AttentionRedIcon } from './icons';
 import { StyledModal } from './StyledModal';
 import { TextField } from './TextField';
 const Icon = styled.div `
@@ -77,6 +77,7 @@ export var Category;
 (function (Category) {
     Category["error"] = "error";
     Category["confirmation"] = "confirmation";
+    Category["warning"] = "warning";
 })(Category || (Category = {}));
 const PrimaryAction = (props) => props.isDestructive ? (props.hasForm ? (React.createElement(PrimaryButton, { danger: true, disabled: props.disabled, form: "formDialog", type: "submit" }, props.title)) : (React.createElement(PrimaryButton, { danger: true, disabled: props.disabled, onClick: props.action, autoFocus: true }, props.title))) : props.hasForm ? (React.createElement(PrimaryButton, { disabled: props.disabled, form: "formDialog", type: "submit" }, props.title)) : (React.createElement(PrimaryButton, { disabled: props.disabled, onClick: props.action, autoFocus: true }, props.title));
 const SecondaryAction = (props) => (React.createElement(SecondaryButton, { disabled: props.disabled, onClick: props.action }, props.title));
@@ -119,6 +120,8 @@ export class Dialog extends React.Component {
                 React.createElement(HeaderContainer, null,
                     category === Category.error && (React.createElement(Icon, null,
                         React.createElement(AttentionRedIcon, null))),
+                    category === Category.warning && (React.createElement(Icon, null,
+                        React.createElement(AttentionOrangeIcon, null))),
                     header),
                 React.createElement(MessageContainer, null,
                     message,

package/dist/es/components/MultiValueInput.js

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { commonStyles } from './TextField';
+const Container = styled.div `
+  ${commonStyles}
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  padding: 0;
+  background: hotpink
+
+
+  &:hover Input {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+  }
+  &:has(Input:focus) {
+    background-color: ${(props) => props.theme.colors.background.fifth};
+    border-color: ${(props) => props.theme.colors.border.field.hover};
+  }
+`;
+const Chip = styled.span `
+  display: flex;
+  align-items: center;
+  background-color: #f2f2f2;
+  color: ${(props) => props.theme.colors.text.primary};
+  border-radius: 12px;
+  border: 1px solid ${(props) => props.theme.colors.border.tertiary};
+  padding: ${(props) => props.theme.grid.unit}px;
+  font-size: ${(props) => props.theme.font.size.small};
+  line-height: ${(props) => props.theme.font.lineHeight.normal};
+
+  & + Input {
+    padding-left: 0;
+  }
+`;
+const RemoveButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
+  color: white;
+  background: #6e6e6e;
+  margin-left: 4px;
+  border: none;
+  border-radius: 100%;
+  cursor: pointer;
+  font-size: 10px;
+
+  &:hover {
+    background: black;
+  }
+`;
+const Input = styled.input `
+  ${commonStyles}
+
+  border: none;
+  flex: 1;
+  min-width: 6em;
+  padding: 10px 16px;
+
+  appearance: none;
+  -moz-appearance: textfield;
+  -webkit-appearance: none;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &::-moz-appearance: textfield;
+`;
+export const MultiValueInput = ({ inputType, placeholder = '', initialValues = [], onChange, }) => {
+    const [values, setValues] = useState(initialValues);
+    const [currentValue, setCurrentValue] = useState('');
+    const handleAddValue = (value) => {
+        if (value.trim() && !values.includes(value.trim())) {
+            const updatedValues = [...values, value.trim()];
+            setValues(updatedValues);
+            onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
+        }
+        setCurrentValue('');
+    };
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        if (inputType === 'number' && /^\d*$/.test(value)) {
+            setCurrentValue(value);
+        }
+        else if (inputType === 'text') {
+            setCurrentValue(value);
+        }
+    };
+    const handleBlur = () => {
+        if (currentValue) {
+            handleAddValue(currentValue);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleAddValue(currentValue);
+        }
+    };
+    const handleRemoveValue = (index) => {
+        const updatedValues = values.filter((_, i) => i !== index);
+        setValues(updatedValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(updatedValues);
+    };
+    const xplaceholder = placeholder
+        ? placeholder
+        : inputType === 'number'
+            ? 'Enter number and press enter'
+            : 'Enter text and press enter';
+    return (React.createElement(Container, null,
+        values.map((value, index) => (React.createElement(Chip, { key: index },
+            value,
+            React.createElement(RemoveButton, { onMouseUp: () => handleRemoveValue(index) }, "\u00D7")))),
+        React.createElement(Input, { type: inputType, value: currentValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: xplaceholder })));
+};

package/dist/es/components/TextField.js

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import styled, { css } from 'styled-components';
-const commonStyles = css `
+export const commonStyles = css `
   border: 1px solid
     ${(props) => props.error
     ? props.theme.colors.border.error

package/dist/es/components/icons/add-outline.js

@@ -1,5 +1,5 @@
 import React from 'react';
-const AddOutlineIcon = (props) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none" }, props),
+const AddOutlineIcon = (props) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "18", viewBox: "0 0 16 18", fill: "none" },
     React.createElement("path", { d: "M6.875 1.27794C7.57115 0.876016 8.42885 0.876016 9.125 1.27794L14.125 4.16469C14.8212 4.56662 15.25 5.3094 15.25 6.11325V11.8868C15.25 12.6906 14.8212 13.4334 14.125 13.8353L9.125 16.7221C8.42885 17.124 7.57115 17.124 6.875 16.7221L1.875 13.8353C1.17885 13.4334 0.75 12.6906 0.75 11.8868V6.11325C0.75 5.3094 1.17885 4.56662 1.875 4.16469L6.875 1.27794Z", stroke: "#353535", strokeWidth: "1.5" }),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.00244 4.70996C7.78153 4.70996 7.60244 4.88905 7.60244 5.10996V8.30996H4.40244C4.18153 8.30996 4.00244 8.48905 4.00244 8.70996C4.00244 8.93087 4.18153 9.10996 4.40244 9.10996H7.60244V12.31C7.60244 12.5309 7.78153 12.71 8.00244 12.71C8.22336 12.71 8.40244 12.5309 8.40244 12.31V9.10996H11.6024C11.8234 9.10996 12.0024 8.93087 12.0024 8.70996C12.0024 8.48905 11.8234 8.30996 11.6024 8.30996H8.40244V5.10996C8.40244 4.88905 8.22336 4.70996 8.00244 4.70996Z", fill: "#353535" }),
     React.createElement("path", { d: "M7.60244 8.30996V8.80996H8.10244V8.30996H7.60244ZM7.60244 9.10996H8.10244V8.60996H7.60244V9.10996ZM8.40244 9.10996V8.60996H7.90244V9.10996H8.40244ZM8.40244 8.30996H7.90244V8.80996H8.40244V8.30996ZM8.10244 5.10996C8.10244 5.16519 8.05767 5.20996 8.00244 5.20996V4.20996C7.50539 4.20996 7.10244 4.6129 7.10244 5.10996H8.10244ZM8.10244 8.30996V5.10996H7.10244V8.30996H8.10244ZM4.40244 8.80996H7.60244V7.80996H4.40244V8.80996ZM4.50244 8.70996C4.50244 8.76519 4.45767 8.80996 4.40244 8.80996V7.80996C3.90538 7.80996 3.50244 8.2129 3.50244 8.70996H4.50244ZM4.40244 8.60996C4.45767 8.60996 4.50244 8.65473 4.50244 8.70996H3.50244C3.50244 9.20702 3.90538 9.60996 4.40244 9.60996V8.60996ZM7.60244 8.60996H4.40244V9.60996H7.60244V8.60996ZM8.10244 12.31V9.10996H7.10244V12.31H8.10244ZM8.00244 12.21C8.05767 12.21 8.10244 12.2547 8.10244 12.31H7.10244C7.10244 12.807 7.50539 13.21 8.00244 13.21V12.21ZM7.90244 12.31C7.90244 12.2547 7.94721 12.21 8.00244 12.21V13.21C8.4995 13.21 8.90244 12.807 8.90244 12.31H7.90244ZM7.90244 9.10996V12.31H8.90244V9.10996H7.90244ZM11.6024 8.60996H8.40244V9.60996H11.6024V8.60996ZM11.5024 8.70996C11.5024 8.65473 11.5472 8.60996 11.6024 8.60996V9.60996C12.0995 9.60996 12.5024 9.20702 12.5024 8.70996H11.5024ZM11.6024 8.80996C11.5472 8.80996 11.5024 8.76519 11.5024 8.70996H12.5024C12.5024 8.21291 12.0995 7.80996 11.6024 7.80996V8.80996ZM8.40244 8.80996H11.6024V7.80996H8.40244V8.80996ZM7.90244 5.10996V8.30996H8.90244V5.10996H7.90244ZM8.00244 5.20996C7.94721 5.20996 7.90244 5.16519 7.90244 5.10996H8.90244C8.90244 4.6129 8.4995 4.20996 8.00244 4.20996V5.20996Z", fill: "#353535" })));

package/dist/es/components/icons/circle-tick-animation.js

@@ -10,6 +10,16 @@ const fadeIn = keyframes `
     transform: scale(1);
   }
 `;
+const fadeOut = keyframes `
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+`;
 const fillCircle = keyframes `
   from {
     stroke-dashoffset: 283;
@@ -33,6 +43,7 @@ const Svg = styled.svg `
   opacity: 0;
   animation: ${fadeIn} 0.3s ease-out forwards;
 
+  // Start fading out at 2.7s (300ms before the 3s unmount)
   @keyframes autoFadeOut {
     0%,
     90% {
@@ -64,8 +75,8 @@ const Tick = styled.polyline `
   stroke-linejoin: round;
   opacity: 0;
 `;
-const CircleTickAnimation = ({ size, style, }) => {
-    return (React.createElement(Svg, { width: size, height: size, viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", style: style },
+const CircleTickAnimation = ({ size }) => {
+    return (React.createElement(Svg, { width: size, height: size, viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
         React.createElement(Circle, { cx: "50", cy: "50", r: "45", strokeWidth: "5" }),
         React.createElement(Tick, { points: "30,50 45,65 70,40" })));
 };

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

@@ -30,9 +30,6 @@ export { default as AttentionOrangeIcon } from './attention-orange';
 export { default as AttentionRedIcon } from './attention-red';
 export { default as AvatarIcon } from './avatar';
 export { default as AlertIcon } from './alert';
-export { default as AffiliationIcon } from './affiliation';
-export { default as AuthorPlaceholderIcon } from './author-placeholder';
-export { default as AffiliationPlaceholderIcon } from './affiliation-placeholder';
 export { default as SystemUserAvatarIcon } from './system-user-avatar';
 export { default as CitationCountIcon } from './citation-count';
 export { default as CommentReplyIcon } from './comment-reply';
@@ -66,6 +63,7 @@ export { default as LogoutIcon } from './logout';
 export { default as OutlineBlockQuoteIcon } from './outline-block-quote';
 export { default as OutlineCodeIcon } from './outline-code';
 export { default as OutlineEquationIcon } from './outline-equation';
+export { default as OutlineEmbedIcon } from './outline-embed';
 export { default as OutlineFigureIcon } from './outline-figure';
 export { default as OutlineManuscriptIcon } from './outline-manuscript';
 export { default as OutlineOrderedListIcon } from './outline-ordered-list';
@@ -105,5 +103,3 @@ export { default as UploadIcon } from './upload';
 export { default as VerticalEllipsisIcon } from './vertical-ellipsis';
 export { default as CrclTickAnimation } from './circle-tick-animation';
 export { default as ProfileIcon } from './profile-avatar';
-export { default as AddUserIcon } from './add-user';
-export { default as AddInstitutionIcon } from './add-institution';

package/dist/es/components/icons/outline-embed.js

@@ -0,0 +1,5 @@
+import React from 'react';
+const OutlineEmbedIcon = (props) => (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.9098 2.88889C12.5223 2.88889 13.0801 3.17103 13.4826 3.63755C13.8647 4.08044 14.1053 4.69112 14.1053 5.36813V11.5208C14.1053 12.1978 13.8647 12.8084 13.4826 13.2513C13.0801 13.7178 12.5223 14 11.9098 14H4.09026C3.47778 14 2.91998 13.7178 2.51747 13.2513C2.13533 12.8084 1.89478 12.1978 1.89478 11.5208V5.36813C1.89478 4.69112 2.13533 4.08044 2.51747 3.63755C2.91998 3.17103 3.47778 2.88889 4.09026 2.88889H11.9098Z", stroke: "#0D79D0", strokeWidth: "1.5" }),
+    React.createElement("path", { d: "M10.2468 8.01749C10.5665 8.21235 10.5665 8.67656 10.2468 8.87142L7.28654 10.6755C6.95334 10.8785 6.52634 10.6387 6.52634 10.2485L6.52634 6.6404C6.52634 6.25021 6.95334 6.01038 7.28654 6.21344L10.2468 8.01749Z", fill: "#0D79D0" })));
+export default OutlineEmbedIcon;

package/dist/es/index.js

@@ -22,6 +22,7 @@ export * from './components/Avatar';
 export * from './components/Dialog';
 export * from './components/Checkbox';
 export * from './components/Form';
+export * from './components/MultiValueInput';
 export * from './components/Resizer';
 export * from './components/SaveStatus';
 export * from './components/StyledModal';
@@ -43,9 +44,7 @@ export * from './components/DatePicker';
 export * from './components/Text';
 export * from './components/RelativeDate';
 export * from './components/Menus';
-export * from './components/Drawer';
 export * from './components/SelectField';
-export * from './components/SelectedItemsBox';
 export * from './hooks/use-dropdown';
 export * from './hooks/use-menus';
 export * from './hooks/use-scroll-detection';

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

@@ -42,7 +42,8 @@ interface DialogProps {
 }
 export declare enum Category {
     error = "error",
-    confirmation = "confirmation"
+    confirmation = "confirmation",
+    warning = "warning"
 }
 export declare class Dialog extends React.Component<DialogProps, DialogState> {
     state: DialogState;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface MultiValueInputProps {
+    inputType: 'text' | 'number';
+    placeholder: string;
+    initialValues?: string[];
+    onChange?: (values: string[]) => void;
+}
+export declare const MultiValueInput: React.FC<MultiValueInputProps>;

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

@@ -15,6 +15,7 @@
  */
 import React from 'react';
 import { ErrorProps } from './Form';
+export declare const commonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ErrorProps, import("styled-components").DefaultTheme>>;
 export declare const TextField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, ErrorProps, never>;
 export declare const TextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, ErrorProps, never>;
 export declare const TextFieldGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;