trying to do version updates on all npm packages.

39 files changed, 109 insertions, 125 deletions

diff --git a/src/client/apis/google_docs/GoogleApiClientUtils.ts b/src/client/apis/google_docs/GoogleApiClientUtils.ts
index 551dca073..c8f381cc0 100644
--- a/src/client/apis/google_docs/GoogleApiClientUtils.ts
+++ b/src/client/apis/google_docs/GoogleApiClientUtils.ts
@@ -84,7 +84,7 @@ export namespace GoogleApiClientUtils {
             };
             try {
                 const schema: docs_v1.Schema$Document = await Networking.PostToServer(path, parameters);
-                return schema.documentId;
+                return schema.documentId === null ? undefined : schema.documentId;
             } catch {
                 return undefined;
             }
@@ -195,7 +195,7 @@ export namespace GoogleApiClientUtils {
                     const title = document.title;
                     let bodyLines = Utils.extractText(document).text.split("\n");
                     options.removeNewlines && (bodyLines = bodyLines.filter(line => line.length));
-                    return { title, bodyLines };
+                    return { title: title ?? "", bodyLines };
                 }
             });
         };
diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 6bde7989b..85634bc8b 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -1,4 +1,4 @@
-import { Configuration, OpenAIApi } from 'openai';
+import { ClientOptions, OpenAI } from 'openai';
 
 enum GPTCallType {
     SUMMARY = 'summary',
@@ -29,17 +29,17 @@ const gptAPICall = async (inputText: string, callType: GPTCallType) => {
     if (callType === GPTCallType.SUMMARY) inputText += '.';
     const opts: GPTCallOpts = callTypeMap[callType];
     try {
-        const configuration = new Configuration({
+        const configuration:ClientOptions ={
             apiKey: process.env.OPENAI_KEY,
-        });
-        const openai = new OpenAIApi(configuration);
-        const response = await openai.createCompletion({
+        };
+        const openai = new OpenAI(configuration);
+        const response = await openai.completions.create({
             model: opts.model,
             max_tokens: opts.maxTokens,
             temperature: opts.temp,
             prompt: `${opts.prompt}${inputText}`,
         });
-        return response.data.choices[0].text;
+        return response.choices[0].text;
     } catch (err) {
         console.log(err);
         return 'Error connecting with API.';
@@ -48,16 +48,16 @@ const gptAPICall = async (inputText: string, callType: GPTCallType) => {
 
 const gptImageCall = async (prompt: string, n?: number) => {
     try {
-        const configuration = new Configuration({
+        const configuration:ClientOptions = {
             apiKey: process.env.OPENAI_KEY,
-        });
-        const openai = new OpenAIApi(configuration);
-        const response = await openai.createImage({
+        };
+        const openai = new OpenAI(configuration);
+        const response = await openai.images.generate({
             prompt: prompt,
             n: n ?? 1,
             size: '1024x1024',
         });
-        return response.data.data.map(data => data.url);
+        return response.data.map((data:any) => data.url);
         // return response.data.data[0].url;
     } catch (err) {
         console.error(err);
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 929660ff4..df81e12f0 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1299,7 +1299,7 @@ export namespace DocUtils {
             // links are not a field value, so handled here.  value is an expression of form ([field=]idToDoc("..."))
             const allLinks = LinkManager.Instance.getAllRelatedLinks(doc);
             const matchLink = (value: string, anchor: Doc) => {
-                const linkedToExp = value?.split('=');
+                const linkedToExp = (value ?? "").split('=');
                 if (linkedToExp.length === 1) return Field.toScriptString(anchor) === value;
                 return Field.toScriptString(DocCast(anchor[linkedToExp[0]])) === linkedToExp[1];
             };
@@ -1909,7 +1909,7 @@ export namespace DocUtils {
         const generatedDocuments: Doc[] = [];
         Networking.UploadYoutubeToServer(videoId, overwriteDoc?.[Id]).then(upfiles => {
             const {
-                source: { name, type },
+                source: { newFilename, originalFilename, mimetype },
                 result,
             } = upfiles.lastElement();
             if ((result as any).message) {
@@ -1918,7 +1918,7 @@ export namespace DocUtils {
                     overwriteDoc.loadingError = (result as any).message;
                     LoadingBox.removeCurrentlyLoading(overwriteDoc);
                 }
-            } else name && processFileupload(generatedDocuments, name, type, result, options, overwriteDoc);
+            } else newFilename && processFileupload(generatedDocuments, newFilename, mimetype??"", result, options, overwriteDoc);
         });
     }
 
@@ -1938,10 +1938,10 @@ export namespace DocUtils {
 
         const upfiles = await Networking.UploadFilesToServer(fileNoGuidPairs);
         for (const {
-            source: { name, type },
+            source: { newFilename, mimetype },
             result,
         } of upfiles) {
-            name && type && processFileupload(generatedDocuments, name, type, result, options);
+            newFilename && mimetype && processFileupload(generatedDocuments, newFilename, mimetype, result, options);
         }
         return generatedDocuments;
     }
@@ -1951,15 +1951,15 @@ export namespace DocUtils {
         // Since this file has an overwriteDoc, we can set the client tracking guid to the overwriteDoc's guid.
         Networking.UploadFilesToServer([{ file, guid: overwriteDoc[Id] }]).then(upfiles => {
             const {
-                source: { name, type },
+                source: { newFilename, mimetype },
                 result,
-            } = upfiles.lastElement() ?? { source: { name: '', type: '' }, result: { message: 'upload failed' } };
+            } = upfiles.lastElement() ?? { source: { newFilename: '', mimetype: '' }, result: { message: 'upload failed' } };
             if ((result as any).message) {
                 if (overwriteDoc) {
                     overwriteDoc.loadingError = (result as any).message;
                     LoadingBox.removeCurrentlyLoading(overwriteDoc);
                 }
-            } else name && type && processFileupload(generatedDocuments, name, type, result, options, overwriteDoc);
+            } else newFilename && mimetype && processFileupload(generatedDocuments, newFilename, mimetype, result, options, overwriteDoc);
         });
     }
 
diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx
index 9113fd832..30e448797 100644
--- a/src/client/util/Import & Export/DirectoryImportBox.tsx
+++ b/src/client/util/Import & Export/DirectoryImportBox.tsx
@@ -21,7 +21,7 @@ import { DocumentManager } from '../DocumentManager';
 import './DirectoryImportBox.scss';
 import ImportMetadataEntry, { keyPlaceholder, valuePlaceholder } from './ImportMetadataEntry';
 import * as React from 'react';
-import _ = require('lodash');
+import * as _ from 'lodash';
 
 const unsupported = ['text/html', 'text/plain'];
 
@@ -119,7 +119,7 @@ export class DirectoryImportBox extends React.Component<FieldViewProps> {
         await Promise.all(
             uploads.map(async response => {
                 const {
-                    source: { type },
+                    source: { mimetype },
                     result,
                 } = response;
                 if (result instanceof Error) {
@@ -127,7 +127,7 @@ export class DirectoryImportBox extends React.Component<FieldViewProps> {
                 }
                 const { accessPaths, exifData } = result;
                 const path = Utils.prepend(accessPaths.agnostic.client);
-                const document = type && (await DocUtils.DocumentFromType(type, path, { _width: 300 }));
+                const document = mimetype && (await DocUtils.DocumentFromType(mimetype, path, { _width: 300 }));
                 const { data, error } = exifData;
                 if (document) {
                     Doc.GetProto(document).exif = error || Doc.Get.FromJson({ data });
diff --git a/src/client/util/reportManager/ReportManagerComponents.tsx b/src/client/util/reportManager/ReportManagerComponents.tsx
index e870c073d..1e226bf6d 100644
--- a/src/client/util/reportManager/ReportManagerComponents.tsx
+++ b/src/client/util/reportManager/ReportManagerComponents.tsx
@@ -289,7 +289,7 @@ export const IssueView = ({ issue }: IssueViewProps) => {
                     </div>
                 </div>
             )}
-            <ReactMarkdown children={issueBody} className="issue-content" linkTarget={'_blank'} remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
+            <ReactMarkdown children={issueBody} className="issue-content" remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} />
         </div>
     );
 };
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 6e6c8a5f1..a64722a0b 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -1,6 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../fields/Doc';
@@ -28,9 +28,9 @@ import { GoogleRef } from './nodes/formattedText/FormattedTextBox';
 import { PinProps } from './nodes/trails';
 import { TemplateMenu } from './TemplateMenu';
 import * as React from 'react';
-const higflyout = require('@hig/flyout');
-export const { anchorPoints } = higflyout;
-export const Flyout = higflyout.default;
+// import * as higflyout from '@hig/flyout';
+// export const { anchorPoints } = higflyout;
+// export const Flyout = higflyout.default;
 
 const cloud: IconProp = 'cloud-upload-alt';
 const fetch: IconProp = 'sync-alt';
@@ -423,7 +423,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         return !view0 ? null : (
             <Tooltip title={<div className="dash-tooltip">Show metadata panel</div>}>
                 <div className="documentButtonBar-linkFlyout">
-                    <Flyout
+                    {/* <Flyout
                         anchorPoint={anchorPoints.LEFT_TOP}
                         content={
                             <MetadataEntryMenu
@@ -437,7 +437,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                         <div className={'documentButtonBar-linkButton-' + 'empty'} onPointerDown={e => e.stopPropagation()}>
                             {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" />}
                         </div>
-                    </Flyout>
+                    </Flyout> */}
                 </div>
             </Tooltip>
         );
@@ -501,7 +501,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         return !view0 ? null : (
             <Tooltip title={<div className="dash-tooltip">Tap to Customize Layout. Drag an embedding</div>} open={this._tooltipOpen} onClose={action(() => (this._tooltipOpen = false))} placement="bottom">
                 <div className="documentButtonBar-linkFlyout" ref={this._dragRef} onPointerEnter={action(() => !this._ref.current?.getBoundingClientRect().width && (this._tooltipOpen = true))}>
-                    <Flyout
+                    {/* <Flyout
                         anchorPoint={anchorPoints.LEFT_TOP}
                         onOpen={action(() => (this._embedDown = true))}
                         onClose={action(() => (this._embedDown = false))}
@@ -516,7 +516,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                         <div className={'documentButtonBar-linkButton-empty'} ref={this._dragRef} onPointerDown={this.onTemplateButton}>
                             <FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />
                         </div>
-                    </Flyout>
+                    </Flyout> */}
                 </div>
             </Tooltip>
         );
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index b8c77d8d5..b4c19df2d 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { IconButton } from 'browndash-components';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -34,7 +34,7 @@ import { DocumentView, OpenWhereMod } from './nodes/DocumentView';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import { ImageBox } from './nodes/ImageBox';
 import * as React from 'react';
-import _ = require('lodash');
+import * as _ from 'lodash';
 
 @observer
 export class DocumentDecorations extends React.Component<{ PanelWidth: number; PanelHeight: number; boundsLeft: number; boundsTop: number }, { value: string }> {
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 9f0a257ca..5f0df3c5f 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -178,7 +178,7 @@ export class GestureOverlay extends React.Component<React.PropsWithChildren<Gest
                     newPoints.pop();
                     const controlPoints: { X: number; Y: number }[] = [];
 
-                    const bezierCurves = fitCurve(newPoints, 10);
+                    const bezierCurves = (fitCurve as any)(newPoints, 10);
                     for (const curve of bezierCurves) {
                         controlPoints.push({ X: curve[0][0], Y: curve[0][1] });
                         controlPoints.push({ X: curve[1][0], Y: curve[1][1] });
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 86ae67085..2c3cd8eac 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -2,12 +2,12 @@ import * as React from 'react';
 import { IconLookup } from '@fortawesome/fontawesome-svg-core';
 import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Checkbox, Tooltip } from '@material-ui/core';
+import { Checkbox, Tooltip } from '@mui/material';
 import { Colors, EditableText, IconButton, NumberInput, Size, Slider, Type } from 'browndash-components';
 import { concat } from 'lodash';
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
-import { ColorState, SketchPicker } from 'react-color';
+import { ColorResult, SketchPicker } from 'react-color';
 import * as Icons from 'react-icons/bs'; //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs"
 import { Doc, DocListCast, Field, FieldResult, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc';
 import { AclAdmin, DocAcl, DocData } from '../../fields/DocSymbols';
@@ -875,7 +875,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return (
             <SketchPicker
                 onChange={undoable(
-                    action((color: ColorState) => setter(color.hex)),
+                    action((color: ColorResult) => setter(color.hex)),
                     'set stroke color property'
                 )}
                 presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']}
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 8bd0539ed..4a08081a1 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -1,6 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { Dropdown, DropdownType, IconButton, IListItemProps, Shadows, Size, Type } from 'browndash-components';
 import { action, runInAction, untracked } from 'mobx';
 import { extname } from 'path';
@@ -320,9 +320,9 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                             color={SettingsManager.userColor}
                             background={showFilterIcon}
                             items={[ ...(dashView ? [dashView]: []), ...(props?.docViewPath?.()??[]), ...(props?.DocumentView?[props?.DocumentView?.()]:[])]
-                                    .filter(dv => StrListCast(dv.Document.childFilters).length || StrListCast(dv.Document.childRangeFilters).length)
+                                    .filter(dv => StrListCast(dv?.Document.childFilters).length || StrListCast(dv?.Document.childRangeFilters).length)
                                     .map(dv => ({
-                                text: StrCast(dv.Document.title),
+                                text: StrCast(dv?.Document.title),
                                 val: dv as any,
                                 style: {color:SettingsManager.userColor, background:SettingsManager.userBackgroundColor},
                             } as IListItemProps)) }
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 333ba9f32..a654596bd 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -276,7 +276,7 @@
     z-index: 20;
 } /*# sourceMappingURL=goldenlayout-base.css.map */
 
-@import '../../../../node_modules/golden-layout/src/css/goldenlayout-dark-theme.css';
+// @import '../../../../node_modules/golden-layout/src/css/goldenlayout-dark-theme.css';
 
 .lm_title {
     -webkit-appearance: none;
@@ -683,7 +683,7 @@ ul.lm_tabs::before {
 
     .flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
     .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
-        background: transparent url('../../../../node_modules/flexlayout-react/images/close_white.png') no-repeat center;
+       // background: transparent url('../../../../node_modules/flexlayout-react/images/close_white.png') no-repeat center;
     }
 
     .flexlayout__tab_button_overflow {
@@ -696,7 +696,7 @@ ul.lm_tabs::before {
         font-size: 10px;
         color: lightgray;
         font-family: Arial, sans-serif;
-        background: transparent url('../../../../node_modules/flexlayout-react/images/more.png') no-repeat left;
+       // background: transparent url('../../../../node_modules/flexlayout-react/images/more.png') no-repeat left;
     }
 
     .flexlayout__tabset_header {
@@ -751,7 +751,7 @@ ul.lm_tabs::before {
         height: 20px;
         border: none;
         outline-width: 0;
-        background: transparent url('../../../../node_modules/flexlayout-react/images/maximize.png') no-repeat center;
+      //  background: transparent url('../../../../node_modules/flexlayout-react/images/maximize.png') no-repeat center;
     }
 
     .flexlayout__tab_toolbar_button-max {
@@ -759,7 +759,7 @@ ul.lm_tabs::before {
         height: 20px;
         border: none;
         outline-width: 0;
-        background: transparent url('../../../../node_modules/flexlayout-react/images/restore.png') no-repeat center;
+   //     background: transparent url('../../../../node_modules/flexlayout-react/images/restore.png') no-repeat center;
     }
 
     .flexlayout__popup_menu_item {
@@ -879,7 +879,7 @@ ul.lm_tabs::before {
 
     .flexlayout__border_button:hover .flexlayout__border_button_trailing,
     .flexlayout__border_button--selected .flexlayout__border_button_trailing {
-        background: transparent url('../../../../node_modules/flexlayout-react/images/close_white.png') no-repeat center;
+      //  background: transparent url('../../../../node_modules/flexlayout-react/images/close_white.png') no-repeat center;
     }
 
     .flexlayout__border_toolbar_left {
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 7724c786d..61a5738ec 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -18,9 +18,9 @@ import { EditableView } from '../EditableView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { CollectionStackingView } from './CollectionStackingView';
 import './CollectionStackingView.scss';
-const higflyout = require('@hig/flyout');
-export const { anchorPoints } = higflyout;
-export const Flyout = higflyout.default;
+// import * as higflyout from '@hig/flyout';
+// export const { anchorPoints } = higflyout;
+// export const Flyout = higflyout.default;
 
 interface CMVFieldRowProps {
     rows: () => number;
@@ -338,11 +338,11 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                     )}
                     {noChrome || evContents === `NO  ${key.toUpperCase()} VALUE` ? null : (
                         <div className="collectionStackingView-sectionOptions" onPointerDown={e => e.stopPropagation()}>
-                            <Flyout anchorPoint={anchorPoints.RIGHT_TOP} content={this.renderMenu()}>
+                            {/* <Flyout anchorPoint={anchorPoints.RIGHT_TOP} content={this.renderMenu()}>
                                 <button className="collectionStackingView-sectionOptionButton">
                                     <FontAwesomeIcon icon="ellipsis-v" size="lg" />
                                 </button>
-                            </Flyout>
+                            </Flyout> */}
                         </div>
                     )}
                 </div>
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 2ac9c7bfb..268879bd4 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { Toggle, ToggleType, Type } from 'browndash-components';
 import { action, computed, Lambda, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index 545734e5b..ba00c4fa0 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { CursorProperty } from 'csstype';
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, Field, Opt } from '../../../fields/Doc';
@@ -44,7 +43,6 @@ export class CollectionNoteTakingView extends CollectionSubView() {
     notetakingCategoryField = 'NotetakingCategory';
     public DividerWidth = 16;
     @observable docsDraggedRowCol: number[] = [];
-    @observable _cursor: CursorProperty = 'grab';
     @observable _scroll = 0;
     @computed get chromeHidden() {
         return BoolCast(this.layoutDoc.chromeHidden) || this.props.onBrowseClick?.() ? true : false;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index e5f71a2f8..bc428c22f 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { CursorProperty } from 'csstype';
+import * as CSS from 'csstype';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, Opt } from '../../../fields/Doc';
@@ -59,7 +59,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
     // map of node headers to their heights. Used in Masonry
     @observable _heightMap = new Map<string, number>();
     // Assuming that this is the current css cursor style
-    @observable _cursor: CursorProperty = 'ew-resize';
+    @observable _cursor: CSS.Property.Cursor = 'ew-resize';
     // gets reset whenever we scroll. Not sure what it is
     @observable _scroll = 0; // used to force the document decoration to update when scrolling
     // does this mean whether the browser is hidden? Or is chrome something else entirely?
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index fac5e849b..4995925c8 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -32,7 +32,7 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
     componentWillUnmount() {
         this._anchorDisposer?.();
     }
-    @action timeout = action(() => Date.now() < this._start++ + 1000 && (this._timeout = setTimeout(this.timeout, 25)));
+    @action timeout: any = action(() => Date.now() < this._start++ + 1000 && (this._timeout = setTimeout(this.timeout, 25)));
     componentDidMount() {
         this._anchorDisposer = reaction(
             () => [
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index d231197fb..825bd5f19 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -1,14 +1,11 @@
-import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
-import { observer } from 'mobx-react';
-import { unimplementedFunction } from '../../../../Utils';
-import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
 import { IconButton } from 'browndash-components';
-import { StrCast } from '../../../../fields/Types';
-import { Doc } from '../../../../fields/Doc';
 import { computed } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { unimplementedFunction } from '../../../../Utils';
 import { SettingsManager } from '../../../util/SettingsManager';
+import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu';
 
 @observer
 export class MarqueeOptionsMenu extends AntimodeMenu<AntimodeMenuProps> {
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index a367e3e73..0ee5f3b40 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { Toggle, ToggleType, Type } from 'browndash-components';
 import { action, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 042acff05..12db7fa4b 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -1,6 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../../fields/Doc';
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 8b9c5ae67..1fb26c99b 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { action, computed, IReactionDisposer, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { DateField } from '../../../fields/DateField';
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index 852d39800..b4ba51814 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { action } from 'mobx';
 import { observer } from 'mobx-react';
-import { ColorState, SketchPicker } from 'react-color';
+import { ColorResult, SketchPicker } from 'react-color';
 import { Doc } from '../../../fields/Doc';
-import { Height } from '../../../fields/DocSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { NumCast, StrCast } from '../../../fields/Types';
 import { DashColor } from '../../../Utils';
@@ -25,7 +24,7 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @undoBatch
     @action
-    static switchColor(color: ColorState) {
+    static switchColor(color: ColorResult) {
         SetActiveInkColor(color.hex);
 
         SelectionManager.Views().map(view => {
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index f9e7a4617..c2e03744e 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -1,3 +1,4 @@
+import { Checkbox } from '@mui/material';
 import { ColorPicker, EditableText, Size, Type } from 'browndash-components';
 import * as d3 from 'd3';
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
@@ -12,7 +13,6 @@ import { Docs } from '../../../../documents/Documents';
 import { undoable } from '../../../../util/UndoManager';
 import { PinProps, PresBox } from '../../trails';
 import './Chart.scss';
-import { Checkbox } from '@material-ui/core';
 
 export interface PieChartProps {
     Document: Doc;
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index b0c94a06a..54cfba506 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -1,6 +1,5 @@
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
-import { MouseEventHandler } from 'react-select';
 import { Doc, Opt } from '../../../fields/Doc';
 import { AclPrivate, DocData } from '../../../fields/DocSymbols';
 import { ScriptField } from '../../../fields/ScriptField';
@@ -171,7 +170,7 @@ export class DocumentContentsView extends React.Component<
             ...this.props,
             Document: this.layoutDoc ?? this.props.Document,
             TemplateDataDocument: templateDataDoc instanceof Promise ? undefined : templateDataDoc,
-            onClick: onClick as any as MouseEventHandler, // pass onClick script as if it were a real function -- it will be interpreted properly in the HTMLtag
+            onClick: onClick as any as React.MouseEventHandler, // pass onClick script as if it were a real function -- it will be interpreted properly in the HTMLtag
             onInput: onInput as any as React.FormEventHandler,
         };
         return {
diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
index 49592d993..e8d8c05e3 100644
--- a/src/client/views/nodes/DocumentIcon.tsx
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -4,7 +4,7 @@ import { DocumentView } from './DocumentView';
 import { DocumentManager } from '../../util/DocumentManager';
 import { Transformer, ts } from '../../util/Scripting';
 import { Field } from '../../../fields/Doc';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { action, observable } from 'mobx';
 import { Id } from '../../../fields/FieldSymbols';
 import { factory } from 'typescript';
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 9d233ead5..90b044374 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc } from '../../../fields/Doc';
@@ -16,7 +16,7 @@ import { LinkDescriptionPopup } from './LinkDescriptionPopup';
 import { TaskCompletionBox } from './TaskCompletedBox';
 import { PinProps } from './trails';
 import * as React from 'react';
-import _ = require('lodash');
+import * as _ from 'lodash';
 
 interface DocumentLinksButtonProps {
     View: DocumentView;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 336891a18..dbfeec1c3 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { extname } from 'path';
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 8f3c75f54..3cda70648 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -14,7 +14,7 @@ import './KeyValueBox.scss';
 import './KeyValuePair.scss';
 import * as React from 'react';
 import { DocCast } from '../../../fields/Types';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { DocumentOptions, FInfo } from '../../documents/Documents';
 
 // Represents one row in a key value plane
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index e1421878b..71f9c000b 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -84,7 +84,18 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
         return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor);
     }
 
-    fitTextToBox = (r: any) => {
+    fitTextToBox = (r: any): NodeJS.Timeout | {
+        rotateText: null;
+        fontSizeFactor: number;
+        minimumFontSize: number;
+        maximumFontSize: number;
+        limitingDimension: string;
+        horizontalAlign: string;
+        verticalAlign: string;
+        textAlign: string;
+        singleLine: boolean;
+        whiteSpace: string;
+    } => {
         const singleLine = BoolCast(this.layoutDoc._singleLine, true);
         const params = {
             rotateText: null,
@@ -143,9 +154,9 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
                         paddingBottom: NumCast(this.layoutDoc._yPadding),
                         width: this.props.PanelWidth(),
                         height: this.props.PanelHeight(),
-                        whiteSpace: typeof boxParams !== 'number' && boxParams.singleLine ? 'pre' : 'pre-wrap',
+                        whiteSpace:  !(boxParams instanceof NodeJS.Timeout) && boxParams.singleLine ? 'pre' : 'pre-wrap',
                     }}>
-                    <span style={{ width: typeof boxParams !== 'number' && boxParams.singleLine ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}>
+                    <span style={{ width: !(boxParams instanceof NodeJS.Timeout) && boxParams.singleLine ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}>
                         {label.startsWith('#') ? null : label.replace(/([^a-zA-Z])/g, '$1\u200b')}
                     </span>
                 </div>
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index b5fb6db86..4df8e792e 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import wiki from 'wikijs';
diff --git a/src/client/views/nodes/TaskCompletedBox.tsx b/src/client/views/nodes/TaskCompletedBox.tsx
index a17b1dee9..9aab8c5a9 100644
--- a/src/client/views/nodes/TaskCompletedBox.tsx
+++ b/src/client/views/nodes/TaskCompletedBox.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import './TaskCompletedBox.scss';
 import { observable, action } from 'mobx';
-import { Fade } from '@material-ui/core';
+import { Fade } from '@mui/material';
 
 @observer
 export class TaskCompletionBox extends React.Component<{}> {
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index 16622c258..a395296d0 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { action, computed, IReactionDisposer, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as ReactDOM from 'react-dom/client';
diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx
index 85a33614c..75238a6ce 100644
--- a/src/client/views/nodes/formattedText/EquationView.tsx
+++ b/src/client/views/nodes/formattedText/EquationView.tsx
@@ -101,7 +101,7 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal>
                 <EquationEditor
                     ref={this._ref}
                     value={StrCast(this._textBoxDoc[this._fieldKey], 'y=')}
-                    onChange={str => (this._textBoxDoc[this._fieldKey] = str)}
+                    onChange={(str: any) => (this._textBoxDoc[this._fieldKey] = str)}
                     autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
                     autoOperatorNames="sin cos tan"
                     spaceBehavesLikeTab={true}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 2315cdccb..0f9dd6f8b 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1,7 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
-import { setCORS } from 'google-translate-api-browser';
+import { Tooltip } from '@mui/material';
 import { isEqual } from 'lodash';
 import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -71,10 +70,8 @@ import { RichTextMenu, RichTextMenuPlugin } from './RichTextMenu';
 import { RichTextRules } from './RichTextRules';
 import { schema } from './schema_rts';
 import { SummaryView } from './SummaryView';
-import applyDevTools = require('prosemirror-dev-tools');
+import * as applyDevTools from 'prosemirror-dev-tools';
 import * as React from 'react';
-// setting up cors-anywhere server address
-const translate = setCORS('http://cors-anywhere.herokuapp.com/');
 export const GoogleRef = 'googleDocId';
 type PullHandler = (exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>, dataDoc: Doc) => void;
 
@@ -797,7 +794,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 ?.trim()
                 .split(' ')
                 .filter(h => h);
-            const anchorDoc = Array.from(hrefs).lastElement().replace(Doc.localServerPath(), '').split('?')[0];
+            const anchorDoc = Array.from(hrefs ?? [])
+                .lastElement()
+                .replace(Doc.localServerPath(), '')
+                .split('?')[0];
             const deleteMarkups = undoBatch(() => {
                 const sel = editor.state.selection;
                 editor.dispatch(editor.state.tr.removeMark(sel.from, sel.to, editor.state.schema.marks.linkAnchor));
@@ -1308,7 +1308,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 if (this._editorView && reference) {
                     const content = await RichTextUtils.GoogleDocs.Export(this._editorView.state);
                     const response = await GoogleApiClientUtils.Docs.write({ reference, content, mode });
-                    response && (this.dataDoc[GoogleRef] = response.documentId);
+                    response?.documentId && (this.dataDoc[GoogleRef] = response.documentId);
                     const pushSuccess = response !== undefined && !('errors' in response);
                     dataDoc.googleDocUnchanged = pushSuccess;
                     DocumentButtonBar.Instance.startPushOutcome(pushSuccess);
@@ -1783,23 +1783,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
 
         const state = this._editorView!.state;
         const curText = state.doc.textBetween(0, state.doc.content.size, ' \n');
-        if (this.layoutDoc[this.SidebarKey + '_type_collection'] === 'translation' && !this.fieldKey.includes('translation') && curText.endsWith(' ') && curText !== this._lastText) {
-            try {
-                translate(curText, { from: 'en', to: 'es' }).then((result1: any) => {
-                    setTimeout(
-                        () =>
-                            translate(result1.text, { from: 'es', to: 'en' }).then((result: any) => {
-                                const tb = this._sidebarTagRef.current as FormattedTextBox;
-                                tb._editorView?.dispatch(tb._editorView!.state.tr.insertText(result1.text + '\r\n\r\n' + result.text));
-                            }),
-                        1000
-                    );
-                });
-            } catch (e: any) {
-                console.log(e.message);
-            }
-            this._lastText = curText;
-        }
         if (StrCast(this.Document.title).startsWith('@') && !this.dataDoc.title_custom) {
             UndoManager.RunInBatch(() => {
                 this.dataDoc.title_custom = true;
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 206d96923..7ce06cf7f 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { lift, wrapIn } from 'prosemirror-commands';
diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index 6753d5051..87e1b69c3 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -438,7 +438,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                                 // disable once edited has been clicked (doesn't make sense to change after first edit)
                                 disabled={edited}
                                 checked={isNewCollection}
-                                onChange={e => {
+                                onChange={() => {
                                     setIsNewCollection(prev => !prev);
                                 }}
                             />
@@ -513,7 +513,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                             defaultValue={150}
                             size="small"
                             valueLabelDisplay="auto"
-                            onChange={(e, val) => {
+                            onChange={(e: any, val: any) => {
                                 setCursorData(prev => ({ ...prev, width: val as number }));
                             }}
                         />
@@ -571,7 +571,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
             <div>
                 <TextField
                     value={input}
-                    onChange={e => setInput(e.target.value)}
+                    onChange={(e: any) => setInput(e.target.value)}
                     disabled={isBrushing}
                     type="text"
                     label="Prompt"
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 786988d8b..1317ca814 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, DocListCast, FieldResult, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index 0effb2ccc..cd6beac57 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 35c27d81b..2d8e9e2a2 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction } from 'mobx';
 import { observer } from 'mobx-react';
-import { ColorState } from 'react-color';
+import { ColorResult } from 'react-color';
 import { Doc, Opt } from '../../../fields/Doc';
 import { returnFalse, setupMoveUpEvents, unimplementedFunction, Utils } from '../../../Utils';
 import { gptAPICall, GPTCallType } from '../../apis/gpt/GPT';
@@ -139,13 +139,10 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     }
 
     @action changeHighlightColor = (color: string) => {
-        const col: ColorState = {
+        const col: ColorResult = {
             hex: color,
-            hsl: { a: 0, h: 0, s: 0, l: 0, source: '' },
-            hsv: { a: 0, h: 0, s: 0, v: 0, source: '' },
-            rgb: { a: 0, r: 0, b: 0, g: 0, source: '' },
-            oldHue: 0,
-            source: '',
+            hsl: { a: 0, h: 0, s: 0, l: 0 },
+            rgb: { a: 0, r: 0, b: 0, g: 0 },
         };
         this.highlightColor = Utils.colorString(col);
     };
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 74464181f..3172ff9c0 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';