@searpent/react-image-annotate 2.3.0-cand → 2.3.0-cand-3

package/Editor/readOnly.js

@@ -1,121 +1,477 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import React, { useEffect, useRef, useState } from 'react';
+import { highlightMisspellingsInHtml } from '../utils/spellcheck-nspell';
 
 function ReadOnly(_ref) {
   var article = _ref.article;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+  var containerRef = useRef(null); // Warm up dictionary on component mount
+
+  useEffect(function () {
+    var run =
+    /*#__PURE__*/
+    function () {
+      var _ref2 = _asyncToGenerator(
+      /*#__PURE__*/
+      _regeneratorRuntime.mark(function _callee() {
+        var combinedHtml;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                combinedHtml = [article.title, article.subtitle, article.text, article.author, article.about_author, article.appendix, article.photo_author, article.photo_caption, article.advertisement, article.other_graphics, article.unknown, article.table, article.section, article.continuation_ref, article.cover_clip, article.page_id, article.continuation_mark, article.follow_up_mark, article.article_termination_mark, article.page_splitting_stripe, article.column_id_stripe, article.prev_page_reference, article.section_subcategory].filter(Boolean).join(' '); // warm up dictionary once with auto-detection
+
+                _context.next = 3;
+                return highlightMisspellingsInHtml(combinedHtml, 'auto');
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function run() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    run();
+  }, [article]);
+
+  var _useState = useState(article.title),
+      _useState2 = _slicedToArray(_useState, 2),
+      titleHTML = _useState2[0],
+      setTitleHTML = _useState2[1];
+
+  var _useState3 = useState(article.subtitle),
+      _useState4 = _slicedToArray(_useState3, 2),
+      subtitleHTML = _useState4[0],
+      setSubtitleHTML = _useState4[1];
+
+  var _useState5 = useState(article.text),
+      _useState6 = _slicedToArray(_useState5, 2),
+      textHTML = _useState6[0],
+      setTextHTML = _useState6[1];
+
+  var _useState7 = useState(article.author),
+      _useState8 = _slicedToArray(_useState7, 2),
+      authorHTML = _useState8[0],
+      setAuthorHTML = _useState8[1];
+
+  var _useState9 = useState(article.about_author),
+      _useState10 = _slicedToArray(_useState9, 2),
+      aboutHTML = _useState10[0],
+      setAboutHTML = _useState10[1];
+
+  var _useState11 = useState(article.appendix),
+      _useState12 = _slicedToArray(_useState11, 2),
+      appendixHTML = _useState12[0],
+      setAppendixHTML = _useState12[1];
+
+  var _useState13 = useState(article.photo_author),
+      _useState14 = _slicedToArray(_useState13, 2),
+      photoAuthorHTML = _useState14[0],
+      setPhotoAuthorHTML = _useState14[1];
+
+  var _useState15 = useState(article.photo_caption),
+      _useState16 = _slicedToArray(_useState15, 2),
+      photoCaptionHTML = _useState16[0],
+      setPhotoCaptionHTML = _useState16[1];
+
+  var _useState17 = useState(article.advertisement),
+      _useState18 = _slicedToArray(_useState17, 2),
+      adHTML = _useState18[0],
+      setAdHTML = _useState18[1];
+
+  var _useState19 = useState(article.other_graphics),
+      _useState20 = _slicedToArray(_useState19, 2),
+      otherGraphicsHTML = _useState20[0],
+      setOtherGraphicsHTML = _useState20[1];
+
+  var _useState21 = useState(article.unknown),
+      _useState22 = _slicedToArray(_useState21, 2),
+      unknownHTML = _useState22[0],
+      setUnknownHTML = _useState22[1];
+
+  var _useState23 = useState(article.table),
+      _useState24 = _slicedToArray(_useState23, 2),
+      tableHTML = _useState24[0],
+      setTableHTML = _useState24[1];
+
+  var _useState25 = useState(article.section),
+      _useState26 = _slicedToArray(_useState25, 2),
+      sectionHTML = _useState26[0],
+      setSectionHTML = _useState26[1];
+
+  var _useState27 = useState(article.continuation_ref),
+      _useState28 = _slicedToArray(_useState27, 2),
+      continuationRefHTML = _useState28[0],
+      setContinuationRefHTML = _useState28[1];
+
+  var _useState29 = useState(article.cover_clip),
+      _useState30 = _slicedToArray(_useState29, 2),
+      coverClipHTML = _useState30[0],
+      setCoverClipHTML = _useState30[1];
+
+  var _useState31 = useState(article.page_id),
+      _useState32 = _slicedToArray(_useState31, 2),
+      pageIdHTML = _useState32[0],
+      setPageIdHTML = _useState32[1];
+
+  var _useState33 = useState(article.continuation_mark),
+      _useState34 = _slicedToArray(_useState33, 2),
+      continuationMarkHTML = _useState34[0],
+      setContinuationMarkHTML = _useState34[1];
+
+  var _useState35 = useState(article.follow_up_mark),
+      _useState36 = _slicedToArray(_useState35, 2),
+      followUpMarkHTML = _useState36[0],
+      setFollowUpMarkHTML = _useState36[1];
+
+  var _useState37 = useState(article.article_termination_mark),
+      _useState38 = _slicedToArray(_useState37, 2),
+      articleTerminationMarkHTML = _useState38[0],
+      setArticleTerminationMarkHTML = _useState38[1];
+
+  var _useState39 = useState(article.page_splitting_stripe),
+      _useState40 = _slicedToArray(_useState39, 2),
+      pageSplittingStripeHTML = _useState40[0],
+      setPageSplittingStripeHTML = _useState40[1];
+
+  var _useState41 = useState(article.column_id_stripe),
+      _useState42 = _slicedToArray(_useState41, 2),
+      columnIdStripeHTML = _useState42[0],
+      setColumnIdStripeHTML = _useState42[1];
+
+  var _useState43 = useState(article.prev_page_reference),
+      _useState44 = _slicedToArray(_useState43, 2),
+      prevPageReferenceHTML = _useState44[0],
+      setPrevPageReferenceHTML = _useState44[1];
+
+  var _useState45 = useState(article.section_subcategory),
+      _useState46 = _slicedToArray(_useState45, 2),
+      sectionSubcategoryHTML = _useState46[0],
+      setSectionSubcategoryHTML = _useState46[1];
+
+  useEffect(function () {
+    var cancelled = false;
+
+    var apply =
+    /*#__PURE__*/
+    function () {
+      var _ref3 = _asyncToGenerator(
+      /*#__PURE__*/
+      _regeneratorRuntime.mark(function _callee2() {
+        var h1, h2, t, a, ab, ap, pa, pc, adv, og, unk, tbl, sec, contRef, coverClip, pageId, contMark, followUp, articleTerm, pageStripe, columnStripe, prevPageRef, sectionSubcat;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.prev = 0;
+                _context2.next = 3;
+                return highlightMisspellingsInHtml(article.title || '', 'auto');
+
+              case 3:
+                h1 = _context2.sent;
+                _context2.next = 6;
+                return highlightMisspellingsInHtml(article.subtitle || '', 'auto');
+
+              case 6:
+                h2 = _context2.sent;
+                _context2.next = 9;
+                return highlightMisspellingsInHtml(article.text || '', 'auto');
+
+              case 9:
+                t = _context2.sent;
+                _context2.next = 12;
+                return highlightMisspellingsInHtml(article.author || '', 'auto');
+
+              case 12:
+                a = _context2.sent;
+                _context2.next = 15;
+                return highlightMisspellingsInHtml(article.about_author || '', 'auto');
+
+              case 15:
+                ab = _context2.sent;
+                _context2.next = 18;
+                return highlightMisspellingsInHtml(article.appendix || '', 'auto');
+
+              case 18:
+                ap = _context2.sent;
+                _context2.next = 21;
+                return highlightMisspellingsInHtml(article.photo_author || '', 'auto');
+
+              case 21:
+                pa = _context2.sent;
+                _context2.next = 24;
+                return highlightMisspellingsInHtml(article.photo_caption || '', 'auto');
+
+              case 24:
+                pc = _context2.sent;
+                _context2.next = 27;
+                return highlightMisspellingsInHtml(article.advertisement || '', 'auto');
+
+              case 27:
+                adv = _context2.sent;
+                _context2.next = 30;
+                return highlightMisspellingsInHtml(article.other_graphics || '', 'auto');
+
+              case 30:
+                og = _context2.sent;
+                _context2.next = 33;
+                return highlightMisspellingsInHtml(article.unknown || '', 'auto');
+
+              case 33:
+                unk = _context2.sent;
+                _context2.next = 36;
+                return highlightMisspellingsInHtml(article.table || '', 'auto');
+
+              case 36:
+                tbl = _context2.sent;
+                _context2.next = 39;
+                return highlightMisspellingsInHtml(article.section || '', 'auto');
+
+              case 39:
+                sec = _context2.sent;
+                _context2.next = 42;
+                return highlightMisspellingsInHtml(article.continuation_ref || '', 'auto');
+
+              case 42:
+                contRef = _context2.sent;
+                _context2.next = 45;
+                return highlightMisspellingsInHtml(article.cover_clip || '', 'auto');
+
+              case 45:
+                coverClip = _context2.sent;
+                _context2.next = 48;
+                return highlightMisspellingsInHtml(article.page_id || '', 'auto');
+
+              case 48:
+                pageId = _context2.sent;
+                _context2.next = 51;
+                return highlightMisspellingsInHtml(article.continuation_mark || '', 'auto');
+
+              case 51:
+                contMark = _context2.sent;
+                _context2.next = 54;
+                return highlightMisspellingsInHtml(article.follow_up_mark || '', 'auto');
+
+              case 54:
+                followUp = _context2.sent;
+                _context2.next = 57;
+                return highlightMisspellingsInHtml(article.article_termination_mark || '', 'auto');
+
+              case 57:
+                articleTerm = _context2.sent;
+                _context2.next = 60;
+                return highlightMisspellingsInHtml(article.page_splitting_stripe || '', 'auto');
+
+              case 60:
+                pageStripe = _context2.sent;
+                _context2.next = 63;
+                return highlightMisspellingsInHtml(article.column_id_stripe || '', 'auto');
+
+              case 63:
+                columnStripe = _context2.sent;
+                _context2.next = 66;
+                return highlightMisspellingsInHtml(article.prev_page_reference || '', 'auto');
+
+              case 66:
+                prevPageRef = _context2.sent;
+                _context2.next = 69;
+                return highlightMisspellingsInHtml(article.section_subcategory || '', 'auto');
+
+              case 69:
+                sectionSubcat = _context2.sent;
+
+                if (!cancelled) {
+                  _context2.next = 72;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 72:
+                setTitleHTML(h1);
+                setSubtitleHTML(h2);
+                setTextHTML(t);
+                setAuthorHTML(a);
+                setAboutHTML(ab);
+                setAppendixHTML(ap);
+                setPhotoAuthorHTML(pa);
+                setPhotoCaptionHTML(pc);
+                setAdHTML(adv);
+                setOtherGraphicsHTML(og);
+                setUnknownHTML(unk);
+                setTableHTML(tbl);
+                setSectionHTML(sec);
+                setContinuationRefHTML(contRef);
+                setCoverClipHTML(coverClip);
+                setPageIdHTML(pageId);
+                setContinuationMarkHTML(contMark);
+                setFollowUpMarkHTML(followUp);
+                setArticleTerminationMarkHTML(articleTerm);
+                setPageSplittingStripeHTML(pageStripe);
+                setColumnIdStripeHTML(columnStripe);
+                setPrevPageReferenceHTML(prevPageRef);
+                setSectionSubcategoryHTML(sectionSubcat);
+                _context2.next = 100;
+                break;
+
+              case 97:
+                _context2.prev = 97;
+                _context2.t0 = _context2["catch"](0);
+
+                if (!cancelled) {
+                  console.warn('Spellcheck error:', _context2.t0);
+                }
+
+              case 100:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, null, [[0, 97]]);
+      }));
+
+      return function apply() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+
+    apply();
+    return function () {
+      cancelled = true;
+    };
+  }, [article]);
+  return React.createElement("div", {
+    ref: containerRef,
+    contentEditable: false,
+    suppressContentEditableWarning: true,
+    spellCheck: false,
+    lang: "en-US",
+    style: {
+      outline: 'none',
+      userSelect: 'text',
+      minHeight: '100px'
+    }
+  }, React.createElement("style", null, ".spell-error { text-decoration: wavy underline red; text-decoration-skip-ink: auto; }"), React.createElement("h1", {
     className: "ro-title",
     dangerouslySetInnerHTML: {
-      __html: article.title
+      __html: titleHTML
     }
-  }), /*#__PURE__*/React.createElement("h2", {
+  }), React.createElement("h2", {
     className: "ro-subtitle",
     dangerouslySetInnerHTML: {
-      __html: article.subtitle
+      __html: subtitleHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-text",
     dangerouslySetInnerHTML: {
-      __html: article.text
+      __html: textHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-author",
     dangerouslySetInnerHTML: {
-      __html: article.author
+      __html: authorHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-about-author",
     dangerouslySetInnerHTML: {
-      __html: article.about_author
+      __html: aboutHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-appendix",
     dangerouslySetInnerHTML: {
-      __html: article.appendix
+      __html: appendixHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-photo-author",
     dangerouslySetInnerHTML: {
-      __html: article.photo_author
+      __html: photoAuthorHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-photo-caption",
     dangerouslySetInnerHTML: {
-      __html: article.photo_caption
+      __html: photoCaptionHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-advertisment",
     dangerouslySetInnerHTML: {
-      __html: article.advertisement
+      __html: adHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-other-graphics",
     dangerouslySetInnerHTML: {
-      __html: article.other_graphics
+      __html: otherGraphicsHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-unknown",
     dangerouslySetInnerHTML: {
-      __html: article.unknown
+      __html: unknownHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-table",
     dangerouslySetInnerHTML: {
-      __html: article.table
+      __html: tableHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-section",
     dangerouslySetInnerHTML: {
-      __html: article.section
+      __html: sectionHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-continuation_ref",
     dangerouslySetInnerHTML: {
-      __html: article.continuation_ref
+      __html: continuationRefHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-cover_clip",
     dangerouslySetInnerHTML: {
-      __html: article.cover_clip
+      __html: coverClipHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-page_id",
     dangerouslySetInnerHTML: {
-      __html: article.page_id
+      __html: pageIdHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-continuation_mark",
     dangerouslySetInnerHTML: {
-      __html: article.continuation_mark
+      __html: continuationMarkHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-follow_up_mark",
     dangerouslySetInnerHTML: {
-      __html: article.follow_up_mark
+      __html: followUpMarkHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-article_termination_mark",
     dangerouslySetInnerHTML: {
-      __html: article.article_termination_mark
+      __html: articleTerminationMarkHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-page_splitting_stripe",
     dangerouslySetInnerHTML: {
-      __html: article.page_splitting_stripe
+      __html: pageSplittingStripeHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-column_id_stripe",
     dangerouslySetInnerHTML: {
-      __html: article.column_id_stripe
+      __html: columnIdStripeHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-prev_page_reference",
     dangerouslySetInnerHTML: {
-      __html: article.prev_page_reference
+      __html: prevPageReferenceHTML
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), React.createElement("p", {
     className: "ro-section_subcategory",
     dangerouslySetInnerHTML: {
-      __html: article.section_subcategory
+      __html: sectionSubcategoryHTML
     }
   }));
 }

package/Errorer/index.js

@@ -3,9 +3,9 @@ import ErrorIcon from '@mui/icons-material/Error';
 import './errorer.css';
 
 function Errorer() {
-  return /*#__PURE__*/React.createElement("div", {
+  return React.createElement("div", {
     className: "errorer"
-  }, /*#__PURE__*/React.createElement(ErrorIcon, null));
+  }, React.createElement(ErrorIcon, null));
 }
 
 export default Errorer;

package/FullImageSegmentationAnnotator/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Annotator from "../Annotator";
 export default (function (props) {
-  return /*#__PURE__*/React.createElement(Annotator, Object.assign({}, props, {
+  return React.createElement(Annotator, Object.assign({}, props, {
     fullImageSegmentationMode: true
   }));
 });

package/GroupSelectorSidebarBox/index.js

@@ -25,22 +25,22 @@ export var GroupSelectorSidebarBox = function GroupSelectorSidebarBox(_ref) {
       onSelect = _ref.onSelect,
       selectedGroupId = _ref.selectedGroupId;
   var classes = useStyles();
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
+  return React.createElement(ThemeProvider, {
     theme: theme
-  }, /*#__PURE__*/React.createElement(SidebarBoxContainer, {
+  }, React.createElement(SidebarBoxContainer, {
     title: title || '',
     subTitle: subtitle || '',
-    icon: /*#__PURE__*/React.createElement(CollectionsIcon, {
+    icon: React.createElement(CollectionsIcon, {
       style: {
         color: grey[700]
       }
     })
-  }, /*#__PURE__*/React.createElement(List, null, groups.map(function (_ref2, i) {
+  }, React.createElement(List, null, groups.map(function (_ref2, i) {
     var id = _ref2.id,
         groupTitle = _ref2.title,
         groupSubtitle = _ref2.subtitle,
         color = _ref2.color;
-    return /*#__PURE__*/React.createElement(ListItem, {
+    return React.createElement(ListItem, {
       button: true,
       onClick: function onClick() {
         return onSelect(id);
@@ -50,8 +50,8 @@ export var GroupSelectorSidebarBox = function GroupSelectorSidebarBox(_ref) {
       style: {
         backgroundColor: id === selectedGroupId ? '#bbdefb' : null
       }
-    }, /*#__PURE__*/React.createElement(ListItemText, {
-      primary: /*#__PURE__*/React.createElement("strong", {
+    }, React.createElement(ListItemText, {
+      primary: React.createElement("strong", {
         style: {
           color: color
         }

package/GroupsEditorSidebarBox/index.js

@@ -23,13 +23,13 @@ var GroupItemDiv = styled("div")(function (_ref) {
 
 var GroupItem = function GroupItem(_ref2) {
   var group = _ref2.group;
-  return /*#__PURE__*/React.createElement(GroupItemDiv, null, uuidToHash(group.id));
+  return React.createElement(GroupItemDiv, null, uuidToHash(group.id));
 };
 
 var GroupList = function GroupList(_ref3) {
   var groups = _ref3.groups;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, "Groups"), groups.map(function (g, idx) {
-    return /*#__PURE__*/React.createElement(GroupItem, {
+  return React.createElement("div", null, React.createElement("h2", null, "Groups"), groups.map(function (g, idx) {
+    return React.createElement(GroupItem, {
       key: "".concat(g, "-").concat(idx),
       group: g
     });
@@ -62,13 +62,13 @@ var AddGroupFrom = function AddGroupFrom(_ref5) {
     setValue('');
   };
 
-  return /*#__PURE__*/React.createElement(AddGroupFormDiv, null, /*#__PURE__*/React.createElement("form", {
+  return React.createElement(AddGroupFormDiv, null, React.createElement("form", {
     onSubmit: handleSubmit,
     style: {
       display: "flex",
       paddingRight: "6px"
     }
-  }, /*#__PURE__*/React.createElement("input", {
+  }, React.createElement("input", {
     type: "text",
     value: value,
     name: "new-group",
@@ -77,7 +77,7 @@ var AddGroupFrom = function AddGroupFrom(_ref5) {
     style: {
       marginRight: "1rem"
     }
-  }), /*#__PURE__*/React.createElement("input", {
+  }), React.createElement("input", {
     type: "submit",
     value: "Create group"
   })));
@@ -119,19 +119,19 @@ var DivContainer = styled("div")(function (_ref6) {
 export var GroupsEditorSidebarBox = function GroupsEditorSidebarBox(_ref7) {
   var groups = _ref7.groups,
       onAddGroup = _ref7.onAddGroup;
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
+  return React.createElement(ThemeProvider, {
     theme: theme
-  }, /*#__PURE__*/React.createElement(SidebarBoxContainer, {
+  }, React.createElement(SidebarBoxContainer, {
     title: "Groups",
-    icon: /*#__PURE__*/React.createElement(FilterNoneIcon, {
+    icon: React.createElement(FilterNoneIcon, {
       style: {
         color: grey[700]
       }
     }),
     expandedByDefault: true
-  }, /*#__PURE__*/React.createElement(DivContainer, null, /*#__PURE__*/React.createElement("h2", null, "Add new group"), /*#__PURE__*/React.createElement(AddGroupFrom, {
+  }, React.createElement(DivContainer, null, React.createElement("h2", null, "Add new group"), React.createElement(AddGroupFrom, {
     onAddGroup: onAddGroup
-  }), /*#__PURE__*/React.createElement(GroupList, {
+  }), React.createElement(GroupList, {
     groups: groups
   }))));
 };

package/HelpSidebarBox/index.js

@@ -41,17 +41,17 @@ var MarkdownContainer = styled("div")(function (_ref) {
 });
 export var HelpSidebarBox = function HelpSidebarBox(_ref2) {
   var help = _ref2.help;
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
+  return React.createElement(ThemeProvider, {
     theme: theme
-  }, /*#__PURE__*/React.createElement(SidebarBoxContainer, {
+  }, React.createElement(SidebarBoxContainer, {
     title: "Help",
-    icon: /*#__PURE__*/React.createElement(HelpIcon, {
+    icon: React.createElement(HelpIcon, {
       style: {
         color: grey[700]
       }
     }),
     expandedByDefault: help && help !== "" ? false : true
-  }, /*#__PURE__*/React.createElement(MarkdownContainer, null, /*#__PURE__*/React.createElement(Markdown, {
+  }, React.createElement(MarkdownContainer, null, React.createElement(Markdown, {
     source: help
   }))));
 };