From 24a829935c6b05addf7dacb729415d9381d9e6ce Mon Sep 17 00:00:00 2001
From: aryanshridhar <aryanshridhar7@gmail.com>
Date: Thu, 11 Aug 2022 19:58:42 +0530
Subject: [PATCH] build(deps): upgrade to blueprintjs@4

---
 package.json                                  |   6 +-
 src/less/blueprint.less                       |  26 +-
 src/less/components/commands.less             |   8 +-
 src/less/components/dialogs.less              |   8 +-
 src/less/components/settings.less             |  14 +-
 src/less/components/show-me.less              |   2 +-
 src/less/components/sidebar.less              |  14 +-
 src/less/components/version-select.less       |   2 +-
 src/renderer/app.tsx                          |   4 +-
 .../components/commands-action-button.tsx     |  21 +-
 src/renderer/components/dialog-add-theme.tsx  |   6 +-
 .../components/dialog-add-version.tsx         |   6 +-
 src/renderer/components/dialog-bisect.tsx     |   8 +-
 src/renderer/components/dialog-token.tsx      |   6 +-
 .../components/editors-toolbar-button.tsx     |   4 +-
 src/renderer/components/settings-electron.tsx |  27 +-
 .../settings-general-appearance.tsx           |  21 +-
 src/renderer/components/settings.tsx          |   5 +-
 src/renderer/components/sidebar-file-tree.tsx |  11 +-
 .../components/sidebar-package-manager.tsx    |  11 +-
 src/renderer/components/version-select.tsx    |  98 ++--
 tests/renderer/app-spec.tsx                   |   4 +-
 .../commands-publish-button-spec.tsx.snap     |  31 +-
 .../commands-runner-spec.tsx.snap             |  30 +-
 .../__snapshots__/commands-spec.tsx.snap      |  32 +-
 .../commands-version-chooser-spec.tsx.snap    |   4 +-
 .../dialog-add-theme-spec.tsx.snap            |  16 +-
 .../dialog-add-version-spec.tsx.snap          |  84 ++--
 .../__snapshots__/dialog-bisect-spec.tsx.snap | 296 ++++++------
 .../dialog-generic-spec.tsx.snap              |  24 +-
 .../__snapshots__/dialog-token-spec.tsx.snap  |  16 +-
 .../editors-non-ideal-state-spec.tsx.snap     |   6 +-
 .../__snapshots__/editors-spec.tsx.snap       | 135 +++---
 .../settings-credits-spec.tsx.snap            |  20 +-
 .../settings-electron-spec.tsx.snap           |  92 ++--
 .../settings-execution-spec.tsx.snap          |  80 ++--
 .../settings-general-appearance-spec.tsx.snap |  25 +-
 ...s-general-block-accelerators-spec.tsx.snap |  12 +-
 .../settings-general-console-spec.tsx.snap    |  10 +-
 .../settings-general-font-spec.tsx.snap       |  18 +-
 .../settings-general-github-spec.tsx.snap     |  32 +-
 .../settings-general-mirror-spec.tsx.snap     |  18 +-
 ...tings-general-package-author-spec.tsx.snap |  10 +-
 .../settings-general-spec.tsx.snap            |  12 +-
 .../__snapshots__/settings-spec.tsx.snap      |  60 +--
 .../sidebar-file-tree-spec.tsx.snap           | 437 ++++++++++--------
 .../sidebar-package-manager-spec.tsx.snap     |   7 +-
 .../__snapshots__/tour-spec.tsx.snap          |  18 +-
 .../__snapshots__/tour-welcome-spec.tsx.snap  |  18 +-
 .../version-select-spec.tsx.snap              | 141 +++---
 .../components/settings-electron-spec.tsx     |   6 +-
 tests/renderer/components/tour-spec.tsx       |   3 +-
 yarn.lock                                     | 233 ++++++----
 53 files changed, 1182 insertions(+), 1056 deletions(-)

diff --git a/package.json b/package.json
index b2ed4dabdd..3495b2a211 100644
--- a/package.json
+++ b/package.json
@@ -35,9 +35,9 @@
     "forge": "./forge.config.js"
   },
   "dependencies": {
-    "@blueprintjs/core": "^3.36.0",
-    "@blueprintjs/popover2": "^0.12.2",
-    "@blueprintjs/select": "^3.15.0",
+    "@blueprintjs/core": "^4.8.0",
+    "@blueprintjs/popover2": "^1.5.1",
+    "@blueprintjs/select": "^4.5.3",
     "@octokit/rest": "^16.43.1",
     "@sentry/electron": "^2.5.3",
     "@vertedinde/fiddle-core": "^1.0.3",
diff --git a/src/less/blueprint.less b/src/less/blueprint.less
index c0b9d29fd0..39219ba771 100644
--- a/src/less/blueprint.less
+++ b/src/less/blueprint.less
@@ -5,46 +5,46 @@
 @import "~@blueprintjs/core/lib/less/variables.less";
 
 // Override some of the colors
-.fiddle.bp3-dark {
-  .bp3-menu,
-  .bp3-popover .bp3-popover-content {
+.fiddle.bp4-dark {
+  .bp4-menu,
+  .bp4-popover2 .bp4-popover2-content {
     background-color: @background-1;
   }
 
-  .bp3-popover .bp3-popover-arrow-fill {
+  .bp4-popover2 .bp4-popover2-arrow-fill {
     fill: @background-1;
   }
 
-  .bp3-button:not([class*="bp3-intent-"]) {
+  .bp4-button:not([class*="bp4-intent-"]) {
     background-color: @background-1;
   }
 
-  .bp3-button.bp3-minimal {
+  .bp4-button.bp4-minimal {
     background-color: unset;
   }
 
-  .bp3-button:hover,
-  .bp3-button.bp3-minimal:hover {
+  .bp4-button:hover,
+  .bp4-button.bp4-minimal:hover {
     background-color: rgba(138, 155, 168, 0.15);
   }
 
-  .bp3-menu-item.bp3-active.bp3-intent-primary {
+  .bp4-menu-item.bp4-active.bp4-intent-primary {
     background-color: @foreground-3;
   }
 
-  .bp3-dialog {
+  .bp4-dialog {
     background-color: @background-4;
 
-    .bp3-dialog-header {
+    .bp4-dialog-header {
       background-color: @background-3;
     }
   }
 
-  .bp3-running-text {
+  .bp4-running-text {
     font-size: 14px;
   }
 
-  .bp3-alert-contents {
+  .bp4-alert-contents {
     width: 100%;
   }
 }
diff --git a/src/less/components/commands.less b/src/less/components/commands.less
index 7029d3e5ed..518814a6b5 100644
--- a/src/less/components/commands.less
+++ b/src/less/components/commands.less
@@ -10,8 +10,8 @@ header {
   display: flex;
   width: 100%;
 
-  .bp3-popover-target {
-    width: 100%;
+  .bp4-popover2-target {
+    width: 10%;
   }
 }
 
@@ -58,13 +58,13 @@ header {
     &:last-of-type {
       margin-right: 10px;
 
-      .bp3-button-group {
+      .bp4-button-group {
         margin-left: 5px;
       }
     }
   }
 
-  .bp3-control-group {
+  .bp4-control-group {
     margin-right: 0.5rem;
   }
 
diff --git a/src/less/components/dialogs.less b/src/less/components/dialogs.less
index cee3b0f970..8520e372e2 100644
--- a/src/less/components/dialogs.less
+++ b/src/less/components/dialogs.less
@@ -178,11 +178,15 @@
 }
 
 .dialog-add-version {
-  .bp3-file-input {
+  .dialog-bisect-popover .bp4-button-group {
+    display: block;
+  }
+
+  .bp4-file-input {
     width: 100%;
   }
 
-  .bp3-callout {
+  .bp4-callout {
     margin-top: 1rem;
   }
 }
diff --git a/src/less/components/settings.less b/src/less/components/settings.less
index 8b9f502de5..f754515f0c 100644
--- a/src/less/components/settings.less
+++ b/src/less/components/settings.less
@@ -35,18 +35,18 @@
     width: 250px;
   }
 
- .bp3-input-group {
+ .bp4-input-group {
     margin-bottom: 15px;
   }
 
-  .bp3-divider {
+  .bp4-divider {
     margin-top: 1rem;
     margin-bottom: 1rem;
     margin-left: 0;
     margin-right: 0;
   }
 
-  .bp3-callout {
+  .bp4-callout {
     max-width: 850px;
   }
 
@@ -55,6 +55,10 @@
 
     .action {
       text-align: right;
+
+      .bp4-popover2-target {
+        display: block;
+      }
     }
   }
 
@@ -85,10 +89,6 @@
       }
     }
 
-    .bp3-popover-target {
-      display: inherit;
-    }
-
     .disabled-version {
       width: 100%;
     }
diff --git a/src/less/components/show-me.less b/src/less/components/show-me.less
index 09bd008729..a7ebba094b 100644
--- a/src/less/components/show-me.less
+++ b/src/less/components/show-me.less
@@ -6,7 +6,7 @@
     margin-top: 0;
   };
 
-  .bp3-callout {
+  .bp4-callout {
     margin-bottom: 10px;
   }
 }
diff --git a/src/less/components/sidebar.less b/src/less/components/sidebar.less
index c240ad0a12..66ad8146dc 100644
--- a/src/less/components/sidebar.less
+++ b/src/less/components/sidebar.less
@@ -5,15 +5,15 @@
   font-size: 14px;
 }
 
-.add-file-input .bp3-tree-node-label {
+.add-file-input .bp4-tree-node-label {
   overflow: visible;
 }
 
-.bp3-tree-node-caret-none {
+.bp4-tree-node-caret-none {
   min-width: 8px;
 }
 
-.bp3-tree-node-content-1 {
+.bp4-tree-node-content-1 {
   padding-left: 0;
 }
 
@@ -28,13 +28,13 @@
 }
 
 .package-tree {
-  .bp3-tree-node-content {
-    .bp3-tree-node-secondary-label {
+  .bp4-tree-node-content {
+    .bp4-tree-node-secondary-label {
       min-width: 100px;
     }
   }
 
-  .bp3-tree-node-list {
+  .bp4-tree-node-list {
     margin: 5px 0;
   }
 }
@@ -46,7 +46,7 @@
   background: @background-1;
   color: @dark-gray1;
 
-  .bp3-dark & {
+  .bp4-dark & {
     color: @white;
   }
 }
diff --git a/src/less/components/version-select.less b/src/less/components/version-select.less
index d8d7cc0dac..c10fca699e 100644
--- a/src/less/components/version-select.less
+++ b/src/less/components/version-select.less
@@ -1,4 +1,4 @@
-.bp3-fill {
+.bp4-fill {
   .version-chooser  {
     width: 100%;
   }
diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index 87d63e48ea..6e6264009a 100644
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@@ -221,9 +221,9 @@ export class App {
     }
 
     if (theme.isDark || theme.name.includes('dark')) {
-      document.body.classList.add('bp3-dark');
+      document.body.classList.add('bp4-dark');
     } else {
-      document.body.classList.remove('bp3-dark');
+      document.body.classList.remove('bp4-dark');
     }
   }
 
diff --git a/src/renderer/components/commands-action-button.tsx b/src/renderer/components/commands-action-button.tsx
index 6bd96a00e6..0ea5c26c1b 100644
--- a/src/renderer/components/commands-action-button.tsx
+++ b/src/renderer/components/commands-action-button.tsx
@@ -5,11 +5,10 @@ import {
   ButtonGroup,
   IToastProps,
   Menu,
-  MenuItem,
-  Popover,
   Position,
   Toaster,
 } from '@blueprintjs/core';
+import { MenuItem2, Popover2 } from '@blueprintjs/popover2';
 import { clipboard } from 'electron';
 import { when } from 'mobx';
 import { observer } from 'mobx-react';
@@ -395,17 +394,17 @@ export const GistActionButton = observer(
 
       const menu = (
         <Menu>
-          <MenuItem
+          <MenuItem2
             text="Publish"
             active={actionType === GistActionType.publish}
             onClick={() => this.setActionType(GistActionType.publish)}
           />
-          <MenuItem
+          <MenuItem2
             text="Update"
             active={actionType === GistActionType.update}
             onClick={() => this.setActionType(GistActionType.update)}
           />
-          <MenuItem
+          <MenuItem2
             text="Delete"
             active={actionType === GistActionType.delete}
             onClick={() => this.setActionType(GistActionType.delete)}
@@ -414,9 +413,9 @@ export const GistActionButton = observer(
       );
 
       return (
-        <Popover content={menu} position={Position.BOTTOM}>
+        <Popover2 content={menu} placement={Position.BOTTOM}>
           <Button icon="wrench" />
-        </Popover>
+        </Popover2>
       );
     };
 
@@ -431,13 +430,13 @@ export const GistActionButton = observer(
       const privacyIcon = gitHubPublishAsPublic ? 'unlock' : 'lock';
       const privacyMenu = (
         <Menu>
-          <MenuItem
+          <MenuItem2
             text="Private"
             icon="lock"
             active={!gitHubPublishAsPublic}
             onClick={this.setPrivate}
           />
-          <MenuItem
+          <MenuItem2
             text="Public"
             icon="unlock"
             active={gitHubPublishAsPublic}
@@ -447,9 +446,9 @@ export const GistActionButton = observer(
       );
 
       return (
-        <Popover content={privacyMenu} position={Position.BOTTOM}>
+        <Popover2 content={privacyMenu} placement={Position.BOTTOM}>
           <Button icon={privacyIcon} />
-        </Popover>
+        </Popover2>
       );
     };
 
diff --git a/src/renderer/components/dialog-add-theme.tsx b/src/renderer/components/dialog-add-theme.tsx
index 6566d2f95c..5c454b0dd3 100644
--- a/src/renderer/components/dialog-add-theme.tsx
+++ b/src/renderer/components/dialog-add-theme.tsx
@@ -148,7 +148,7 @@ export const AddThemeDialog = observer(
           title="Add theme"
           className="dialog-add-version"
         >
-          <div className="bp3-dialog-body">
+          <div className="bp4-dialog-body">
             <FileInput
               onInputChange={this.onChangeFile}
               inputProps={inputProps as any}
@@ -156,8 +156,8 @@ export const AddThemeDialog = observer(
             />
             <br />
           </div>
-          <div className="bp3-dialog-footer">
-            <div className="bp3-dialog-footer-actions">{this.buttons}</div>
+          <div className="bp4-dialog-footer">
+            <div className="bp4-dialog-footer-actions">{this.buttons}</div>
           </div>
         </Dialog>
       );
diff --git a/src/renderer/components/dialog-add-version.tsx b/src/renderer/components/dialog-add-version.tsx
index 225732a9c3..838def9f6a 100644
--- a/src/renderer/components/dialog-add-version.tsx
+++ b/src/renderer/components/dialog-add-version.tsx
@@ -215,7 +215,7 @@ export const AddVersionDialog = observer(
           title="Add local Electron build"
           className="dialog-add-version"
         >
-          <div className="bp3-dialog-body">
+          <div className="bp4-dialog-body">
             <FileInput
               id="custom-electron-version"
               inputProps={inputProps as any}
@@ -224,8 +224,8 @@ export const AddVersionDialog = observer(
             <br />
             {this.renderPath()}
           </div>
-          <div className="bp3-dialog-footer">
-            <div className="bp3-dialog-footer-actions">{this.buttons}</div>
+          <div className="bp4-dialog-footer">
+            <div className="bp4-dialog-footer-actions">{this.buttons}</div>
           </div>
         </Dialog>
       );
diff --git a/src/renderer/components/dialog-bisect.tsx b/src/renderer/components/dialog-bisect.tsx
index a4083b497e..316b3ed653 100644
--- a/src/renderer/components/dialog-bisect.tsx
+++ b/src/renderer/components/dialog-bisect.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Button, ButtonGroup, Callout, Dialog, Label } from '@blueprintjs/core';
+import classnames from 'classnames';
 import { observer } from 'mobx-react';
 
 import { RunnableVersion } from '../../interfaces';
@@ -197,6 +198,7 @@ export const BisectDialog = observer(
     public render() {
       const { isBisectDialogShowing } = this.props.appState;
       const { startIndex, endIndex, allVersions } = this.state;
+      const className = classnames('bp4-dialog-body', 'dialog-bisect-popover');
 
       return (
         <Dialog
@@ -205,7 +207,7 @@ export const BisectDialog = observer(
           title="Start a bisect session"
           className="dialog-add-version"
         >
-          <div className="bp3-dialog-body">
+          <div className={className}>
             {this.help}
             <Label>
               Earliest Version (Last &quot;known good&quot; version)
@@ -230,8 +232,8 @@ export const BisectDialog = observer(
               </ButtonGroup>
             </Label>
           </div>
-          <div className="bp3-dialog-footer">
-            <div className="bp3-dialog-footer-actions">{this.buttons}</div>
+          <div className="bp4-dialog-footer">
+            <div className="bp4-dialog-footer-actions">{this.buttons}</div>
           </div>
         </Dialog>
       );
diff --git a/src/renderer/components/dialog-token.tsx b/src/renderer/components/dialog-token.tsx
index 3aba552460..07b1a513a8 100644
--- a/src/renderer/components/dialog-token.tsx
+++ b/src/renderer/components/dialog-token.tsx
@@ -176,7 +176,7 @@ export const TokenDialog = observer(
           onClose={this.onClose}
           title="GitHub Token"
         >
-          <div className="bp3-dialog-body">
+          <div className="bp4-dialog-body">
             <p>
               Generate a{' '}
               <a onClick={this.openGenerateTokenExternal}>
@@ -193,8 +193,8 @@ export const TokenDialog = observer(
               onChange={this.handleChange}
             />
           </div>
-          <div className="bp3-dialog-footer">
-            <div className="bp3-dialog-footer-actions">{this.buttons}</div>
+          <div className="bp4-dialog-footer">
+            <div className="bp4-dialog-footer-actions">{this.buttons}</div>
           </div>
         </Dialog>
       );
diff --git a/src/renderer/components/editors-toolbar-button.tsx b/src/renderer/components/editors-toolbar-button.tsx
index c0bd816737..09a574023d 100644
--- a/src/renderer/components/editors-toolbar-button.tsx
+++ b/src/renderer/components/editors-toolbar-button.tsx
@@ -48,7 +48,7 @@ export class MaximizeButton extends ToolbarButton {
       mosaicActions.expand(this.context.mosaicWindowActions.getPath());
     };
 
-    return <Button icon="maximize" className="bp3-small" onClick={onClick} />;
+    return <Button icon="maximize" className="bp4-small" onClick={onClick} />;
   }
 }
 
@@ -59,6 +59,6 @@ export class RemoveButton extends ToolbarButton {
   public createButton(_mosaicActions: MosaicRootActions<any>) {
     const onClick = () => this.props.appState.editorMosaic.hide(this.props.id);
 
-    return <Button icon="cross" className="bp3-small" onClick={onClick} />;
+    return <Button icon="cross" className="bp4-small" onClick={onClick} />;
   }
 }
diff --git a/src/renderer/components/settings-electron.tsx b/src/renderer/components/settings-electron.tsx
index d2f723505d..2265b50e09 100644
--- a/src/renderer/components/settings-electron.tsx
+++ b/src/renderer/components/settings-electron.tsx
@@ -11,8 +11,9 @@ import {
   HTMLTable,
   Icon,
   IconName,
-  Tooltip,
+  Position,
 } from '@blueprintjs/core';
+import { Tooltip2 } from '@blueprintjs/popover2';
 import { InstallState } from '@vertedinde/fiddle-core';
 import { observer } from 'mobx-react';
 
@@ -228,10 +229,10 @@ export const ElectronSettings = observer(
       return (
         <FormGroup label="Include Electron versions:">
           {Object.values(channels).map((channel) => (
-            <Tooltip
+            <Tooltip2
               content={`Can't disable channel of selected version (${appState.version})`}
               disabled={!getIsCurrentVersionReleaseChannel(channel)}
-              position="bottom"
+              placement={Position.BOTTOM}
               intent="primary"
               key={channel}
             >
@@ -243,7 +244,7 @@ export const ElectronSettings = observer(
                 disabled={getIsCurrentVersionReleaseChannel(channel)}
                 inline={true}
               />
-            </Tooltip>
+            </Tooltip2>
           ))}
           <Checkbox
             checked={appState.showUndownloadedVersions}
@@ -252,9 +253,9 @@ export const ElectronSettings = observer(
             label="Not downloaded"
             onChange={this.handleStateChange}
           />
-          <Tooltip
+          <Tooltip2
             content={`Include versions that have reached end-of-life (older than ${getOldestSupportedMajor()}.0.0)`}
-            position="bottom"
+            placement={Position.BOTTOM}
             intent="primary"
           >
             <Checkbox
@@ -264,7 +265,7 @@ export const ElectronSettings = observer(
               label="Obsolete"
               onChange={this.handleShowObsoleteChange}
             />
-          </Tooltip>
+          </Tooltip2>
         </FormGroup>
       );
     }
@@ -382,8 +383,8 @@ export const ElectronSettings = observer(
 
       if (version === appState.currentElectronVersion.version) {
         return (
-          <Tooltip
-            position="auto"
+          <Tooltip2
+            placement="auto"
             intent="primary"
             content={`Can't remove currently active Electron version (${version})`}
           >
@@ -393,12 +394,12 @@ export const ElectronSettings = observer(
               text={buttonProps.text}
               icon={buttonProps.icon}
             />
-          </Tooltip>
+          </Tooltip2>
         );
       } else if (disableDownload(version)) {
         return (
-          <Tooltip
-            position="auto"
+          <Tooltip2
+            placement="auto"
             intent="primary"
             content={`Version is not available on your current OS`}
           >
@@ -408,7 +409,7 @@ export const ElectronSettings = observer(
               text={buttonProps.text}
               icon={buttonProps.icon}
             />
-          </Tooltip>
+          </Tooltip2>
         );
       }
 
diff --git a/src/renderer/components/settings-general-appearance.tsx b/src/renderer/components/settings-general-appearance.tsx
index 94360e067c..00491cca19 100644
--- a/src/renderer/components/settings-general-appearance.tsx
+++ b/src/renderer/components/settings-general-appearance.tsx
@@ -2,14 +2,9 @@ import * as React from 'react';
 
 import * as path from 'path';
 
-import {
-  Button,
-  Callout,
-  Checkbox,
-  FormGroup,
-  MenuItem,
-} from '@blueprintjs/core';
-import { ItemPredicate, ItemRenderer, Select } from '@blueprintjs/select';
+import { Button, Callout, Checkbox, FormGroup } from '@blueprintjs/core';
+import { MenuItem2 } from '@blueprintjs/popover2';
+import { ItemPredicate, ItemRenderer, Select2 } from '@blueprintjs/select';
 import { shell } from 'electron';
 import * as fs from 'fs-extra';
 import { reaction } from 'mobx';
@@ -21,10 +16,10 @@ import { AppState } from '../state';
 import { THEMES_PATH, getAvailableThemes, getTheme } from '../themes';
 import { LoadedFiddleTheme } from '../themes-defaults';
 
-const ThemeSelect = Select.ofType<LoadedFiddleTheme>();
+const ThemeSelect = Select2.ofType<LoadedFiddleTheme>();
 
 /**
- * Helper method: Returns the <Select /> predicate for an Electron
+ * Helper method: Returns the <Select2 /> predicate for an Electron
  * version.
  *
  * @param {string} query
@@ -39,7 +34,7 @@ export const filterItem: ItemPredicate<LoadedFiddleTheme> = (
 };
 
 /**
- * Helper method: Returns the <Select /> <MenuItem /> for Electron
+ * Helper method: Returns the <Select2 /> <MenuItem2 /> for Electron
  * versions.
  *
  * @param {RunnableVersion} item
@@ -55,7 +50,7 @@ export const renderItem: ItemRenderer<LoadedFiddleTheme> = (
   }
 
   return (
-    <MenuItem
+    <MenuItem2
       active={modifiers.active}
       disabled={modifiers.disabled}
       text={highlightText(item.name, query)}
@@ -231,7 +226,7 @@ export const AppearanceSettings = observer(
               popoverProps={{
                 onClosed: () => this.props.toggleHasPopoverOpen(),
               }}
-              noResults={<MenuItem disabled={true} text="No results." />}
+              noResults={<MenuItem2 disabled={true} text="No results." />}
             >
               <Button
                 id="open-theme-selector"
diff --git a/src/renderer/components/settings.tsx b/src/renderer/components/settings.tsx
index 76e60a0f03..257f98c798 100644
--- a/src/renderer/components/settings.tsx
+++ b/src/renderer/components/settings.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 
-import { Icon, IconName, MenuItem } from '@blueprintjs/core';
+import { Icon, IconName } from '@blueprintjs/core';
+import { MenuItem2 } from '@blueprintjs/popover2';
 import { observer } from 'mobx-react';
 
 import { AppState } from '../state';
@@ -106,7 +107,7 @@ export const Settings = observer(
         const onClick = () => this.setState({ section: name });
 
         return (
-          <MenuItem
+          <MenuItem2
             onClick={onClick}
             active={isSelected}
             key={name}
diff --git a/src/renderer/components/sidebar-file-tree.tsx b/src/renderer/components/sidebar-file-tree.tsx
index c6b4c18232..e8e9e0da91 100644
--- a/src/renderer/components/sidebar-file-tree.tsx
+++ b/src/renderer/components/sidebar-file-tree.tsx
@@ -6,11 +6,11 @@ import {
   Classes,
   Icon,
   Menu,
-  MenuItem,
+  Position,
   Tree,
   TreeNodeInfo,
 } from '@blueprintjs/core';
-import { ContextMenu2, Tooltip2 } from '@blueprintjs/popover2';
+import { ContextMenu2, MenuItem2, Tooltip2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 
@@ -61,13 +61,13 @@ export const SidebarFileTree = observer(
                 onClick={() => this.setFocusedFile(editorId)}
                 content={
                   <Menu>
-                    <MenuItem
+                    <MenuItem2
                       icon="redo"
                       text="Rename"
                       intent="primary"
                       onClick={() => this.renameEditor(editorId)}
                     />
-                    <MenuItem
+                    <MenuItem2
                       disabled={isRequiredFile(editorId)}
                       icon="remove"
                       text="Delete"
@@ -84,6 +84,7 @@ export const SidebarFileTree = observer(
               <ButtonGroup>
                 <Tooltip2
                   content="Toggle Visibility"
+                  placement={Position.RIGHT}
                   minimal={true}
                   hoverOpenDelay={1000}
                 >
@@ -138,6 +139,7 @@ export const SidebarFileTree = observer(
             <ButtonGroup minimal>
               <Tooltip2
                 content="Add New File"
+                placement={Position.RIGHT}
                 minimal={true}
                 hoverOpenDelay={1000}
               >
@@ -149,6 +151,7 @@ export const SidebarFileTree = observer(
               </Tooltip2>
               <Tooltip2
                 content="Reset Layout"
+                placement={Position.RIGHT}
                 minimal={true}
                 hoverOpenDelay={1000}
               >
diff --git a/src/renderer/components/sidebar-package-manager.tsx b/src/renderer/components/sidebar-package-manager.tsx
index f60dcb6844..ef975c2d2c 100644
--- a/src/renderer/components/sidebar-package-manager.tsx
+++ b/src/renderer/components/sidebar-package-manager.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 
-import { Button, MenuItem, Tree, TreeNodeInfo } from '@blueprintjs/core';
-import { Suggest } from '@blueprintjs/select';
+import { Button, Tree, TreeNodeInfo } from '@blueprintjs/core';
+import { MenuItem2 } from '@blueprintjs/popover2';
+import { Suggest2 } from '@blueprintjs/select';
 import { autorun } from 'mobx';
 import { observer } from 'mobx-react';
 import pDebounce from 'p-debounce';
@@ -60,12 +61,12 @@ export class SidebarPackageManager extends React.Component<IProps, IState> {
     return (
       <div className="package-tree">
         <h5>Modules</h5>
-        <Suggest
+        <Suggest2
           fill={true}
           inputValueRenderer={() => ''}
           items={this.state.suggestions}
           itemRenderer={(item, { modifiers, handleClick }) => (
-            <MenuItem
+            <MenuItem2
               active={modifiers.active}
               key={item.name}
               text={
@@ -93,7 +94,7 @@ export class SidebarPackageManager extends React.Component<IProps, IState> {
               });
             }
           }, 200)}
-          popoverProps={{ minimal: true, usePortal: false, fill: true }}
+          popoverProps={{ minimal: true, usePortal: false }}
           resetOnClose={false}
           resetOnSelect={true}
         />
diff --git a/src/renderer/components/version-select.tsx b/src/renderer/components/version-select.tsx
index 2b9163abe9..391ff9cec1 100644
--- a/src/renderer/components/version-select.tsx
+++ b/src/renderer/components/version-select.tsx
@@ -3,17 +3,16 @@ import * as React from 'react';
 import {
   Button,
   ButtonGroupProps,
-  ContextMenu,
   Intent,
   Menu,
-  MenuItem,
-  Tooltip,
+  Position,
 } from '@blueprintjs/core';
+import { ContextMenu2, MenuItem2, Tooltip2 } from '@blueprintjs/popover2';
 import {
   ItemListPredicate,
   ItemListRenderer,
   ItemRenderer,
-  Select,
+  Select2,
 } from '@blueprintjs/select';
 import { InstallState } from '@vertedinde/fiddle-core';
 import { clipboard } from 'electron';
@@ -26,7 +25,7 @@ import { disableDownload } from '../../utils/disable-download';
 import { highlightText } from '../../utils/highlight-text';
 import { AppState } from '../state';
 
-const ElectronVersionSelect = Select.ofType<RunnableVersion>();
+const ElectronVersionSelect = Select2.ofType<RunnableVersion>();
 
 const FixedSizeListItem = ({ index, data, style }: ListChildComponentProps) => {
   const { filteredItems, renderItem } = data;
@@ -60,7 +59,7 @@ const itemListRenderer: ItemListRenderer<RunnableVersion> = ({
 };
 
 /**
- * Helper method: Returns the <Select /> label for an Electron
+ * Helper method: Returns the <Select2 /> label for an Electron
  * version.
  *
  * @param {RunnableVersion} { source, state, name }
@@ -88,7 +87,7 @@ export function getItemLabel({ source, state, name }: RunnableVersion): string {
 }
 
 /**
- * Helper method: Returns the <Select /> icon for an Electron
+ * Helper method: Returns the <Select2 /> icon for an Electron
  * version.
  *
  * @param {RunnableVersion} { state }
@@ -109,7 +108,7 @@ export function getItemIcon({ state }: RunnableVersion) {
 }
 
 /**
- * Helper method: Returns the <Select /> predicate for an Electron
+ * Helper method: Returns the <Select2 /> predicate for an Electron
  * version.
  *
  * Sorts by index of the chosen query.
@@ -154,32 +153,7 @@ export const filterItems: ItemListPredicate<RunnableVersion> = (
 };
 
 /**
- * Renders a context menu to copy the current Electron version.
- *
- * @param {React.MouseEvent<HTMLButtonElement>} e
- * @param {string} version the Electron version number to copy.
- */
-export const renderVersionContextMenu = (
-  e: React.MouseEvent<HTMLButtonElement>,
-  version: string,
-) => {
-  e.preventDefault();
-
-  ContextMenu.show(
-    <Menu>
-      <MenuItem
-        text="Copy Version Number"
-        onClick={() => {
-          clipboard.writeText(version);
-        }}
-      />
-    </Menu>,
-    { left: e.clientX, top: e.clientY },
-  );
-};
-
-/**
- * Helper method: Returns the <Select /> <MenuItem /> for Electron
+ * Helper method: Returns the <Select2 /> <MenuItem2 /> for Electron
  * versions.
  *
  * @param {RunnableVersion} item
@@ -196,8 +170,9 @@ export const renderItem: ItemRenderer<RunnableVersion> = (
 
   if (disableDownload(item.version)) {
     return (
-      <Tooltip
+      <Tooltip2
         className="disabled-menu-tooltip"
+        placement={Position.TOP}
         modifiers={{
           flip: { enabled: false },
           preventOverflow: { enabled: false },
@@ -206,7 +181,7 @@ export const renderItem: ItemRenderer<RunnableVersion> = (
         intent={Intent.PRIMARY}
         content={`Version is not available on current OS`}
       >
-        <MenuItem
+        <MenuItem2
           active={modifiers.active}
           disabled={true}
           text={highlightText(item.version, query)}
@@ -214,12 +189,12 @@ export const renderItem: ItemRenderer<RunnableVersion> = (
           label={getItemLabel(item)}
           icon={getItemIcon(item)}
         />
-      </Tooltip>
+      </Tooltip2>
     );
   }
 
   return (
-    <MenuItem
+    <MenuItem2
       active={modifiers.active}
       disabled={modifiers.disabled}
       text={highlightText(item.version, query)}
@@ -263,27 +238,38 @@ export const VersionSelect = observer(
       const { version } = currentVersion;
 
       return (
-        <ElectronVersionSelect
-          filterable={true}
-          items={this.props.appState.versionsToShow}
-          itemRenderer={renderItem}
-          itemListPredicate={filterItems}
-          itemListRenderer={itemListRenderer}
-          itemDisabled={itemDisabled}
-          onItemSelect={this.props.onVersionSelect}
-          noResults={<MenuItem disabled={true} text="No results." />}
+        <ContextMenu2
           disabled={!!this.props.disabled}
+          content={
+            <Menu>
+              <MenuItem2
+                text="Copy Version Number"
+                onClick={() => {
+                  clipboard.writeText(version);
+                }}
+              />
+            </Menu>
+          }
         >
-          <Button
-            className="version-chooser"
-            text={`Electron v${version}`}
-            icon={getItemIcon(currentVersion)}
-            onContextMenu={(e: React.MouseEvent<HTMLButtonElement>) => {
-              renderVersionContextMenu(e, version);
-            }}
+          <ElectronVersionSelect
+            filterable={true}
+            items={this.props.appState.versionsToShow}
+            itemRenderer={renderItem}
+            itemListPredicate={filterItems}
+            itemListRenderer={itemListRenderer}
+            itemDisabled={itemDisabled}
+            onItemSelect={this.props.onVersionSelect}
+            noResults={<MenuItem2 disabled={true} text="No results." />}
             disabled={!!this.props.disabled}
-          />
-        </ElectronVersionSelect>
+          >
+            <Button
+              className="version-chooser"
+              text={`Electron v${version}`}
+              icon={getItemIcon(currentVersion)}
+              disabled={!!this.props.disabled}
+            />
+          </ElectronVersionSelect>
+        </ContextMenu2>
       );
     }
   },
diff --git a/tests/renderer/app-spec.tsx b/tests/renderer/app-spec.tsx
index 599307d751..49f42aefbd 100644
--- a/tests/renderer/app-spec.tsx
+++ b/tests/renderer/app-spec.tsx
@@ -222,7 +222,7 @@ describe('App component', () => {
     });
 
     it('removes the dark theme option if required', async () => {
-      document.body.classList.add('bp3-dark');
+      document.body.classList.add('bp4-dark');
 
       await app.loadTheme('defaultLight');
 
@@ -232,7 +232,7 @@ describe('App component', () => {
     it('adds the dark theme option if required', async () => {
       await app.loadTheme('custom-dark');
 
-      expect(document.body.classList.value).toBe('bp3-dark');
+      expect(document.body.classList.value).toBe('bp4-dark');
     });
   });
 
diff --git a/tests/renderer/components/__snapshots__/commands-publish-button-spec.tsx.snap b/tests/renderer/components/__snapshots__/commands-publish-button-spec.tsx.snap
index 18960a9878..76a5499268 100644
--- a/tests/renderer/components/__snapshots__/commands-publish-button-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/commands-publish-button-spec.tsx.snap
@@ -5,15 +5,15 @@ exports[`Action button component renders 1`] = `
   <fieldset
     disabled={false}
   >
-    <Blueprint3.ButtonGroup
+    <Blueprint4.ButtonGroup
       className="button-gist-action"
     >
-      <Blueprint3.Popover
-        boundary="scrollParent"
+      <Blueprint4.Popover2
+        boundary="clippingParents"
         captureDismiss={false}
         content={
-          <Blueprint3.Menu>
-            <Blueprint3.MenuItem
+          <Blueprint4.Menu>
+            <Blueprint4.MenuItem2
               active={false}
               disabled={false}
               icon="lock"
@@ -23,7 +23,7 @@ exports[`Action button component renders 1`] = `
               shouldDismissPopover={true}
               text="Private"
             />
-            <Blueprint3.MenuItem
+            <Blueprint4.MenuItem2
               active={true}
               disabled={false}
               icon="unlock"
@@ -33,7 +33,7 @@ exports[`Action button component renders 1`] = `
               shouldDismissPopover={true}
               text="Public"
             />
-          </Blueprint3.Menu>
+          </Blueprint4.Menu>
         }
         defaultIsOpen={false}
         disabled={false}
@@ -43,28 +43,29 @@ exports[`Action button component renders 1`] = `
         hoverOpenDelay={150}
         inheritDarkTheme={true}
         interactionKind="click"
+        matchTargetWidth={false}
         minimal={false}
-        modifiers={Object {}}
         openOnTargetFocus={true}
-        position="bottom"
+        placement="bottom"
+        positioningStrategy="absolute"
+        shouldReturnFocusOnClose={false}
         targetTagName="span"
         transitionDuration={300}
         usePortal={true}
-        wrapperTagName="span"
       >
-        <Blueprint3.Button
+        <Blueprint4.Button
           icon="unlock"
         />
-      </Blueprint3.Popover>
-      <Blueprint3.Button
+      </Blueprint4.Popover2>
+      <Blueprint4.Button
         icon="upload"
         loading={false}
         onClick={[Function]}
         text="Publish"
       />
-    </Blueprint3.ButtonGroup>
+    </Blueprint4.ButtonGroup>
   </fieldset>
-  <Blueprint3.Toaster
+  <Blueprint4.Toaster
     autoFocus={false}
     canEscapeKeyClear={true}
     position="bottom-right"
diff --git a/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap b/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap
index 1703f0990a..f2137892f2 100644
--- a/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/commands-runner-spec.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Runner component renders InstallState.downloading 1`] = `
-<Blueprint3.Button
+<Blueprint4.Button
   className="button-run"
   disabled={true}
   icon={
-    <Blueprint3.Spinner
+    <Blueprint4.Spinner
       size={16}
       value={50}
     />
@@ -15,7 +15,7 @@ exports[`Runner component renders InstallState.downloading 1`] = `
 `;
 
 exports[`Runner component renders InstallState.installed 1`] = `
-<Blueprint3.Button
+<Blueprint4.Button
   className="button-run"
   disabled={false}
   icon="play"
@@ -24,34 +24,34 @@ exports[`Runner component renders InstallState.installed 1`] = `
 />
 `;
 
-exports[`Runner component renders InstallState.missing 1`] = `
-<Blueprint3.Button
+exports[`Runner component renders InstallState.installing 1`] = `
+<Blueprint4.Button
   className="button-run"
   disabled={true}
   icon={
-    <Blueprint3.Spinner
+    <Blueprint4.Spinner
       size={16}
     />
   }
-  text="Checking status"
+  text="Unzipping"
 />
 `;
 
-exports[`Runner component renders InstallState.installing 1`] = `
-<Blueprint3.Button
+exports[`Runner component renders InstallState.missing 1`] = `
+<Blueprint4.Button
   className="button-run"
   disabled={true}
   icon={
-    <Blueprint3.Spinner
+    <Blueprint4.Spinner
       size={16}
     />
   }
-  text="Unzipping"
+  text="Checking status"
 />
 `;
 
 exports[`Runner component renders idle 1`] = `
-<Blueprint3.Button
+<Blueprint4.Button
   className="button-run"
   disabled={false}
   icon="play"
@@ -61,11 +61,11 @@ exports[`Runner component renders idle 1`] = `
 `;
 
 exports[`Runner component renders installing modules 1`] = `
-<Blueprint3.Button
+<Blueprint4.Button
   className="button-run"
   disabled={false}
   icon={
-    <Blueprint3.Spinner
+    <Blueprint4.Spinner
       size={16}
     />
   }
@@ -74,7 +74,7 @@ exports[`Runner component renders installing modules 1`] = `
 `;
 
 exports[`Runner component renders running 1`] = `
-<Blueprint3.Button
+<Blueprint4.Button
   active={true}
   className="button-run"
   disabled={false}
diff --git a/tests/renderer/components/__snapshots__/commands-spec.tsx.snap b/tests/renderer/components/__snapshots__/commands-spec.tsx.snap
index 58a2265b00..7f799ff10b 100644
--- a/tests/renderer/components/__snapshots__/commands-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/commands-spec.tsx.snap
@@ -6,17 +6,17 @@ exports[`Commands component renders when system is darwin 1`] = `
   onDoubleClick={[Function]}
 >
   <div>
-    <Blueprint3.ControlGroup
+    <Blueprint4.ControlGroup
       fill={true}
       vertical={false}
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cog"
         onClick={[MockFunction]}
         title="Setting"
       />
-    </Blueprint3.ControlGroup>
-    <Blueprint3.ControlGroup
+    </Blueprint4.ControlGroup>
+    <Blueprint4.ControlGroup
       fill={true}
       vertical={false}
     >
@@ -26,17 +26,17 @@ exports[`Commands component renders when system is darwin 1`] = `
       <runner
         appState={"default StateMock"}
       />
-    </Blueprint3.ControlGroup>
-    <Blueprint3.ControlGroup
+    </Blueprint4.ControlGroup>
+    <Blueprint4.ControlGroup
       fill={true}
       vertical={false}
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         active={true}
         icon="console"
         text="Console"
       />
-    </Blueprint3.ControlGroup>
+    </Blueprint4.ControlGroup>
   </div>
   <div
     className="title"
@@ -60,17 +60,17 @@ exports[`Commands component renders when system not is darwin 1`] = `
   onDoubleClick={[Function]}
 >
   <div>
-    <Blueprint3.ControlGroup
+    <Blueprint4.ControlGroup
       fill={true}
       vertical={false}
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cog"
         onClick={[MockFunction]}
         title="Setting"
       />
-    </Blueprint3.ControlGroup>
-    <Blueprint3.ControlGroup
+    </Blueprint4.ControlGroup>
+    <Blueprint4.ControlGroup
       fill={true}
       vertical={false}
     >
@@ -80,17 +80,17 @@ exports[`Commands component renders when system not is darwin 1`] = `
       <runner
         appState={"default StateMock"}
       />
-    </Blueprint3.ControlGroup>
-    <Blueprint3.ControlGroup
+    </Blueprint4.ControlGroup>
+    <Blueprint4.ControlGroup
       fill={true}
       vertical={false}
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         active={true}
         icon="console"
         text="Console"
       />
-    </Blueprint3.ControlGroup>
+    </Blueprint4.ControlGroup>
   </div>
   <div>
     <address-bar
diff --git a/tests/renderer/components/__snapshots__/commands-version-chooser-spec.tsx.snap b/tests/renderer/components/__snapshots__/commands-version-chooser-spec.tsx.snap
index f85ba911d8..dfd6bd6ee3 100644
--- a/tests/renderer/components/__snapshots__/commands-version-chooser-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/commands-version-chooser-spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VersionSelect component renders 1`] = `
-<Blueprint3.ButtonGroup>
+<Blueprint4.ButtonGroup>
   <VersionSelect
     appState={
       Object {
@@ -41,5 +41,5 @@ exports[`VersionSelect component renders 1`] = `
     disabled={true}
     onVersionSelect={[Function]}
   />
-</Blueprint3.ButtonGroup>
+</Blueprint4.ButtonGroup>
 `;
diff --git a/tests/renderer/components/__snapshots__/dialog-add-theme-spec.tsx.snap b/tests/renderer/components/__snapshots__/dialog-add-theme-spec.tsx.snap
index 6085d6b01a..75e71393f8 100644
--- a/tests/renderer/components/__snapshots__/dialog-add-theme-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/dialog-add-theme-spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AddThemeDialog component renders 1`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -9,9 +9,9 @@ exports[`AddThemeDialog component renders 1`] = `
   title="Add theme"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body"
   >
-    <Blueprint3.FileInput
+    <Blueprint4.FileInput
       hasSelection={false}
       inputProps={
         Object {
@@ -24,19 +24,19 @@ exports[`AddThemeDialog component renders 1`] = `
     <br />
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={false}
         icon="add"
         key="submit"
         onClick={[Function]}
         text="Add"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -44,5 +44,5 @@ exports[`AddThemeDialog component renders 1`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
diff --git a/tests/renderer/components/__snapshots__/dialog-add-version-spec.tsx.snap b/tests/renderer/components/__snapshots__/dialog-add-version-spec.tsx.snap
index fc4c7db938..51552ee3d0 100644
--- a/tests/renderer/components/__snapshots__/dialog-add-version-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/dialog-add-version-spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AddVersionDialog component onSubmit shows dialog warning when adding duplicate local versions 1`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -9,9 +9,9 @@ exports[`AddVersionDialog component onSubmit shows dialog warning when adding du
   title="Add local Electron build"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body"
   >
-    <Blueprint3.FileInput
+    <Blueprint4.FileInput
       hasSelection={false}
       id="custom-electron-version"
       inputProps={
@@ -22,24 +22,24 @@ exports[`AddVersionDialog component onSubmit shows dialog warning when adding du
       text="/test/path"
     />
     <br />
-    <Blueprint3.Callout>
+    <Blueprint4.Callout>
       This folder is already in use as version "2.2.2". Would you like to switch to that version now?
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={false}
         icon="add"
         key="submit"
         onClick={[Function]}
         text="Switch"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -47,11 +47,11 @@ exports[`AddVersionDialog component onSubmit shows dialog warning when adding du
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`AddVersionDialog component renders 1`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -59,9 +59,9 @@ exports[`AddVersionDialog component renders 1`] = `
   title="Add local Electron build"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body"
   >
-    <Blueprint3.FileInput
+    <Blueprint4.FileInput
       hasSelection={false}
       id="custom-electron-version"
       inputProps={
@@ -72,7 +72,7 @@ exports[`AddVersionDialog component renders 1`] = `
       text="/test/file"
     />
     <br />
-    <Blueprint3.Callout>
+    <Blueprint4.Callout>
       We found an Electron.app in this folder.
       <p>
         Please specify a version, used for typings and the name. Must be
@@ -82,27 +82,27 @@ exports[`AddVersionDialog component renders 1`] = `
         </code>
          compliant.
       </p>
-      <Blueprint3.InputGroup
+      <Blueprint4.InputGroup
         onChange={[Function]}
         placeholder="4.0.0"
         value=""
       />
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={false}
         icon="add"
         key="submit"
         onClick={[Function]}
         text="Add"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -110,11 +110,11 @@ exports[`AddVersionDialog component renders 1`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`AddVersionDialog component renders 2`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -122,9 +122,9 @@ exports[`AddVersionDialog component renders 2`] = `
   title="Add local Electron build"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body"
   >
-    <Blueprint3.FileInput
+    <Blueprint4.FileInput
       hasSelection={false}
       id="custom-electron-version"
       inputProps={
@@ -135,7 +135,7 @@ exports[`AddVersionDialog component renders 2`] = `
       text="/test/file"
     />
     <br />
-    <Blueprint3.Callout>
+    <Blueprint4.Callout>
       We found an Electron.app in this folder.
       <p>
         Please specify a version, used for typings and the name. Must be
@@ -145,28 +145,28 @@ exports[`AddVersionDialog component renders 2`] = `
         </code>
          compliant.
       </p>
-      <Blueprint3.InputGroup
+      <Blueprint4.InputGroup
         intent="danger"
         onChange={[Function]}
         placeholder="4.0.0"
         value=""
       />
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="add"
         key="submit"
         onClick={[Function]}
         text="Add"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -174,11 +174,11 @@ exports[`AddVersionDialog component renders 2`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`AddVersionDialog component renders 3`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -186,9 +186,9 @@ exports[`AddVersionDialog component renders 3`] = `
   title="Add local Electron build"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body"
   >
-    <Blueprint3.FileInput
+    <Blueprint4.FileInput
       hasSelection={false}
       id="custom-electron-version"
       inputProps={
@@ -199,24 +199,24 @@ exports[`AddVersionDialog component renders 3`] = `
       text="/test/file"
     />
     <br />
-    <Blueprint3.Callout>
+    <Blueprint4.Callout>
       This folder is already in use as version "2.2.2". Would you like to switch to that version now?
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={false}
         icon="add"
         key="submit"
         onClick={[Function]}
         text="Switch"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -224,5 +224,5 @@ exports[`AddVersionDialog component renders 3`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
diff --git a/tests/renderer/components/__snapshots__/dialog-bisect-spec.tsx.snap b/tests/renderer/components/__snapshots__/dialog-bisect-spec.tsx.snap
index 104362344f..a70f884162 100644
--- a/tests/renderer/components/__snapshots__/dialog-bisect-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/dialog-bisect-spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BisectDialog component renders 1`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -9,9 +9,9 @@ exports[`BisectDialog component renders 1`] = `
   title="Start a bisect session"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body dialog-bisect-popover"
   >
-    <Blueprint3.Callout
+    <Blueprint4.Callout
       style={
         Object {
           "marginBottom": "1rem",
@@ -35,15 +35,15 @@ exports[`BisectDialog component renders 1`] = `
          
         for learning which version of Electron introduced a bug. This tool helps you perform a bisect.
       </p>
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="help"
         onClick={[Function]}
         text="Show help"
       />
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
     <Component>
       Earliest Version (Last "known good" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -84,11 +84,11 @@ exports[`BisectDialog component renders 1`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
     <Component>
       Latest Version (First "known bad" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -129,30 +129,30 @@ exports[`BisectDialog component renders 1`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={false}
         icon="play"
         key="submit"
         onClick={[Function]}
         text="Begin"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={false}
         icon="lab-test"
         key="auto"
         onClick={[Function]}
         text="Auto"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -160,11 +160,11 @@ exports[`BisectDialog component renders 1`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`BisectDialog component renders 2`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -172,9 +172,9 @@ exports[`BisectDialog component renders 2`] = `
   title="Start a bisect session"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body dialog-bisect-popover"
   >
-    <Blueprint3.Callout
+    <Blueprint4.Callout
       style={
         Object {
           "marginBottom": "1rem",
@@ -198,15 +198,15 @@ exports[`BisectDialog component renders 2`] = `
          
         for learning which version of Electron introduced a bug. This tool helps you perform a bisect.
       </p>
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="help"
         onClick={[Function]}
         text="Show help"
       />
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
     <Component>
       Earliest Version (Last "known good" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -240,11 +240,11 @@ exports[`BisectDialog component renders 2`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
     <Component>
       Latest Version (First "known bad" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -278,30 +278,30 @@ exports[`BisectDialog component renders 2`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="play"
         key="submit"
         onClick={[Function]}
         text="Begin"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="lab-test"
         key="auto"
         onClick={[Function]}
         text="Auto"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -309,11 +309,11 @@ exports[`BisectDialog component renders 2`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`BisectDialog component renders 3`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -321,9 +321,9 @@ exports[`BisectDialog component renders 3`] = `
   title="Start a bisect session"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body dialog-bisect-popover"
   >
-    <Blueprint3.Callout
+    <Blueprint4.Callout
       style={
         Object {
           "marginBottom": "1rem",
@@ -347,15 +347,15 @@ exports[`BisectDialog component renders 3`] = `
          
         for learning which version of Electron introduced a bug. This tool helps you perform a bisect.
       </p>
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="help"
         onClick={[Function]}
         text="Show help"
       />
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
     <Component>
       Earliest Version (Last "known good" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -396,11 +396,11 @@ exports[`BisectDialog component renders 3`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
     <Component>
       Latest Version (First "known bad" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -434,30 +434,30 @@ exports[`BisectDialog component renders 3`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="play"
         key="submit"
         onClick={[Function]}
         text="Begin"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="lab-test"
         key="auto"
         onClick={[Function]}
         text="Auto"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -465,11 +465,11 @@ exports[`BisectDialog component renders 3`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`BisectDialog component renders 4`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -477,9 +477,9 @@ exports[`BisectDialog component renders 4`] = `
   title="Start a bisect session"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body dialog-bisect-popover"
   >
-    <Blueprint3.Callout
+    <Blueprint4.Callout
       style={
         Object {
           "marginBottom": "1rem",
@@ -503,15 +503,15 @@ exports[`BisectDialog component renders 4`] = `
          
         for learning which version of Electron introduced a bug. This tool helps you perform a bisect.
       </p>
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="help"
         onClick={[Function]}
         text="Show help"
       />
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
     <Component>
       Earliest Version (Last "known good" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -552,11 +552,11 @@ exports[`BisectDialog component renders 4`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
     <Component>
       Latest Version (First "known bad" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -597,30 +597,30 @@ exports[`BisectDialog component renders 4`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="play"
         key="submit"
         onClick={[Function]}
         text="Begin"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="lab-test"
         key="auto"
         onClick={[Function]}
         text="Auto"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -628,11 +628,11 @@ exports[`BisectDialog component renders 4`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`BisectDialog component renders 5`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -640,9 +640,9 @@ exports[`BisectDialog component renders 5`] = `
   title="Start a bisect session"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body dialog-bisect-popover"
   >
-    <Blueprint3.Callout
+    <Blueprint4.Callout
       style={
         Object {
           "marginBottom": "1rem",
@@ -672,10 +672,10 @@ exports[`BisectDialog component renders 5`] = `
       <p>
         Once you begin your bisect, Fiddle will run your fiddle with a number of Electron versions, closing in on the version that introduced the bug. Once completed, you will know which Electron version introduced your issue.
       </p>
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
     <Component>
       Earliest Version (Last "known good" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -716,11 +716,11 @@ exports[`BisectDialog component renders 5`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
     <Component>
       Latest Version (First "known bad" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -761,30 +761,30 @@ exports[`BisectDialog component renders 5`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="play"
         key="submit"
         onClick={[Function]}
         text="Begin"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="lab-test"
         key="auto"
         onClick={[Function]}
         text="Auto"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -792,11 +792,11 @@ exports[`BisectDialog component renders 5`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`BisectDialog component renders 6`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -804,9 +804,9 @@ exports[`BisectDialog component renders 6`] = `
   title="Start a bisect session"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body dialog-bisect-popover"
   >
-    <Blueprint3.Callout
+    <Blueprint4.Callout
       style={
         Object {
           "marginBottom": "1rem",
@@ -830,15 +830,15 @@ exports[`BisectDialog component renders 6`] = `
          
         for learning which version of Electron introduced a bug. This tool helps you perform a bisect.
       </p>
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="help"
         onClick={[Function]}
         text="Show help"
       />
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
     <Component>
       Earliest Version (Last "known good" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -893,11 +893,11 @@ exports[`BisectDialog component renders 6`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
     <Component>
       Latest Version (First "known bad" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -952,30 +952,30 @@ exports[`BisectDialog component renders 6`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={false}
         icon="play"
         key="submit"
         onClick={[Function]}
         text="Begin"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={false}
         icon="lab-test"
         key="auto"
         onClick={[Function]}
         text="Auto"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -983,11 +983,11 @@ exports[`BisectDialog component renders 6`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`BisectDialog component renders 7`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -995,9 +995,9 @@ exports[`BisectDialog component renders 7`] = `
   title="Start a bisect session"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body dialog-bisect-popover"
   >
-    <Blueprint3.Callout
+    <Blueprint4.Callout
       style={
         Object {
           "marginBottom": "1rem",
@@ -1021,15 +1021,15 @@ exports[`BisectDialog component renders 7`] = `
          
         for learning which version of Electron introduced a bug. This tool helps you perform a bisect.
       </p>
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="help"
         onClick={[Function]}
         text="Show help"
       />
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
     <Component>
       Earliest Version (Last "known good" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -1077,11 +1077,11 @@ exports[`BisectDialog component renders 7`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
     <Component>
       Latest Version (First "known bad" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -1129,30 +1129,30 @@ exports[`BisectDialog component renders 7`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="play"
         key="submit"
         onClick={[Function]}
         text="Begin"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="lab-test"
         key="auto"
         onClick={[Function]}
         text="Auto"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -1160,11 +1160,11 @@ exports[`BisectDialog component renders 7`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`BisectDialog component renders 8`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -1172,9 +1172,9 @@ exports[`BisectDialog component renders 8`] = `
   title="Start a bisect session"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body dialog-bisect-popover"
   >
-    <Blueprint3.Callout
+    <Blueprint4.Callout
       style={
         Object {
           "marginBottom": "1rem",
@@ -1198,15 +1198,15 @@ exports[`BisectDialog component renders 8`] = `
          
         for learning which version of Electron introduced a bug. This tool helps you perform a bisect.
       </p>
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="help"
         onClick={[Function]}
         text="Show help"
       />
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
     <Component>
       Earliest Version (Last "known good" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -1261,11 +1261,11 @@ exports[`BisectDialog component renders 8`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
     <Component>
       Latest Version (First "known bad" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -1313,30 +1313,30 @@ exports[`BisectDialog component renders 8`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="play"
         key="submit"
         onClick={[Function]}
         text="Begin"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="lab-test"
         key="auto"
         onClick={[Function]}
         text="Auto"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -1344,11 +1344,11 @@ exports[`BisectDialog component renders 8`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`BisectDialog component renders 9`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -1356,9 +1356,9 @@ exports[`BisectDialog component renders 9`] = `
   title="Start a bisect session"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body dialog-bisect-popover"
   >
-    <Blueprint3.Callout
+    <Blueprint4.Callout
       style={
         Object {
           "marginBottom": "1rem",
@@ -1382,15 +1382,15 @@ exports[`BisectDialog component renders 9`] = `
          
         for learning which version of Electron introduced a bug. This tool helps you perform a bisect.
       </p>
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="help"
         onClick={[Function]}
         text="Show help"
       />
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
     <Component>
       Earliest Version (Last "known good" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -1445,11 +1445,11 @@ exports[`BisectDialog component renders 9`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
     <Component>
       Latest Version (First "known bad" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -1504,30 +1504,30 @@ exports[`BisectDialog component renders 9`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="play"
         key="submit"
         onClick={[Function]}
         text="Begin"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="lab-test"
         key="auto"
         onClick={[Function]}
         text="Auto"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -1535,11 +1535,11 @@ exports[`BisectDialog component renders 9`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`BisectDialog component renders 10`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   className="dialog-add-version"
   isOpen={false}
@@ -1547,9 +1547,9 @@ exports[`BisectDialog component renders 10`] = `
   title="Start a bisect session"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body dialog-bisect-popover"
   >
-    <Blueprint3.Callout
+    <Blueprint4.Callout
       style={
         Object {
           "marginBottom": "1rem",
@@ -1579,10 +1579,10 @@ exports[`BisectDialog component renders 10`] = `
       <p>
         Once you begin your bisect, Fiddle will run your fiddle with a number of Electron versions, closing in on the version that introduced the bug. Once completed, you will know which Electron version introduced your issue.
       </p>
-    </Blueprint3.Callout>
+    </Blueprint4.Callout>
     <Component>
       Earliest Version (Last "known good" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -1637,11 +1637,11 @@ exports[`BisectDialog component renders 10`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
     <Component>
       Latest Version (First "known bad" version)
-      <Blueprint3.ButtonGroup
+      <Blueprint4.ButtonGroup
         fill={true}
       >
         <VersionSelect
@@ -1696,30 +1696,30 @@ exports[`BisectDialog component renders 10`] = `
           itemDisabled={[Function]}
           onVersionSelect={[Function]}
         />
-      </Blueprint3.ButtonGroup>
+      </Blueprint4.ButtonGroup>
     </Component>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="play"
         key="submit"
         onClick={[Function]}
         text="Begin"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="lab-test"
         key="auto"
         onClick={[Function]}
         text="Auto"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
@@ -1727,5 +1727,5 @@ exports[`BisectDialog component renders 10`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
diff --git a/tests/renderer/components/__snapshots__/dialog-generic-spec.tsx.snap b/tests/renderer/components/__snapshots__/dialog-generic-spec.tsx.snap
index e95b1c04c1..85b085a5f9 100644
--- a/tests/renderer/components/__snapshots__/dialog-generic-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/dialog-generic-spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`GenericDialog component renders confirmation 1`] = `
-<Blueprint3.Alert
+<Blueprint4.Alert
   canEscapeKeyCancel={false}
   canOutsideClickCancel={false}
   confirmButtonText="OK"
@@ -12,11 +12,11 @@ exports[`GenericDialog component renders confirmation 1`] = `
   onClose={[Function]}
 >
   <p />
-</Blueprint3.Alert>
+</Blueprint4.Alert>
 `;
 
 exports[`GenericDialog component renders confirmation 2`] = `
-<Blueprint3.Alert
+<Blueprint4.Alert
   canEscapeKeyCancel={false}
   canOutsideClickCancel={false}
   confirmButtonText="OK"
@@ -27,11 +27,11 @@ exports[`GenericDialog component renders confirmation 2`] = `
   onClose={[Function]}
 >
   <p />
-</Blueprint3.Alert>
+</Blueprint4.Alert>
 `;
 
 exports[`GenericDialog component renders warning 1`] = `
-<Blueprint3.Alert
+<Blueprint4.Alert
   canEscapeKeyCancel={false}
   canOutsideClickCancel={false}
   confirmButtonText="OK"
@@ -42,11 +42,11 @@ exports[`GenericDialog component renders warning 1`] = `
   onClose={[Function]}
 >
   <p />
-</Blueprint3.Alert>
+</Blueprint4.Alert>
 `;
 
 exports[`GenericDialog component renders with an input prompt 1`] = `
-<Blueprint3.Alert
+<Blueprint4.Alert
   canEscapeKeyCancel={false}
   canOutsideClickCancel={false}
   confirmButtonText="OK"
@@ -57,15 +57,15 @@ exports[`GenericDialog component renders with an input prompt 1`] = `
   onClose={[Function]}
 >
   <p />
-  <Blueprint3.InputGroup
+  <Blueprint4.InputGroup
     id="input"
     onKeyDown={[Function]}
   />
-</Blueprint3.Alert>
+</Blueprint4.Alert>
 `;
 
 exports[`GenericDialog component renders with an input prompt and placeholder 1`] = `
-<Blueprint3.Alert
+<Blueprint4.Alert
   canEscapeKeyCancel={false}
   canOutsideClickCancel={false}
   confirmButtonText="OK"
@@ -76,10 +76,10 @@ exports[`GenericDialog component renders with an input prompt and placeholder 1`
   onClose={[Function]}
 >
   <p />
-  <Blueprint3.InputGroup
+  <Blueprint4.InputGroup
     id="input"
     onKeyDown={[Function]}
     placeholder="placeholder"
   />
-</Blueprint3.Alert>
+</Blueprint4.Alert>
 `;
diff --git a/tests/renderer/components/__snapshots__/dialog-token-spec.tsx.snap b/tests/renderer/components/__snapshots__/dialog-token-spec.tsx.snap
index 1c9cd55fe9..f714082556 100644
--- a/tests/renderer/components/__snapshots__/dialog-token-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/dialog-token-spec.tsx.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TokenDialog component renders 1`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   isOpen={false}
   onClose={[Function]}
   title="GitHub Token"
 >
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body"
   >
     <p>
       Generate a
@@ -21,19 +21,19 @@ exports[`TokenDialog component renders 1`] = `
        
       and paste it here:
     </p>
-    <Blueprint3.InputGroup
+    <Blueprint4.InputGroup
       onChange={[Function]}
       onFocus={[Function]}
       value=""
     />
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="log-in"
         key="done"
@@ -41,7 +41,7 @@ exports[`TokenDialog component renders 1`] = `
         onClick={[Function]}
         text="Done"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="log-out"
         key="cancel"
         onClick={[Function]}
@@ -49,5 +49,5 @@ exports[`TokenDialog component renders 1`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
diff --git a/tests/renderer/components/__snapshots__/editors-non-ideal-state-spec.tsx.snap b/tests/renderer/components/__snapshots__/editors-non-ideal-state-spec.tsx.snap
index c38ef9fc78..1a0ce53b7a 100644
--- a/tests/renderer/components/__snapshots__/editors-non-ideal-state-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/editors-non-ideal-state-spec.tsx.snap
@@ -1,14 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renderNonIdealState() renders a non-ideal state 1`] = `
-<Blueprint3.NonIdealState
+<Blueprint4.NonIdealState
   action={
-    <Blueprint3.Button
+    <Blueprint4.Button
       onClick={[Function]}
       text="Reset editors"
     />
   }
   description="You have closed all editors. You can open them again with the button below or in the sidebar menu!"
   icon="applications"
+  iconSize={48}
+  layout="vertical"
 />
 `;
diff --git a/tests/renderer/components/__snapshots__/editors-spec.tsx.snap b/tests/renderer/components/__snapshots__/editors-spec.tsx.snap
index abfff89986..08b41f0277 100644
--- a/tests/renderer/components/__snapshots__/editors-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/editors-spec.tsx.snap
@@ -36,7 +36,8 @@ exports[`Editors component renders 1`] = `
               className="mosaic-controls"
             >
               <button
-                className="bp3-button bp3-small"
+                className="bp4-button bp4-small"
+                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -44,18 +45,17 @@ exports[`Editors component renders 1`] = `
                 type="button"
               >
                 <span
-                  className="bp3-icon bp3-icon-maximize"
+                  aria-hidden={true}
+                  className="bp4-icon bp4-icon-maximize"
                   icon="maximize"
                 >
                   <svg
                     data-icon="maximize"
                     height={16}
+                    role="img"
                     viewBox="0 0 16 16"
                     width={16}
                   >
-                    <desc>
-                      maximize
-                    </desc>
                     <path
                       d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
                       fillRule="evenodd"
@@ -65,7 +65,8 @@ exports[`Editors component renders 1`] = `
                 </span>
               </button>
               <button
-                className="bp3-button bp3-small"
+                className="bp4-button bp4-small"
+                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -73,18 +74,17 @@ exports[`Editors component renders 1`] = `
                 type="button"
               >
                 <span
-                  className="bp3-icon bp3-icon-cross"
+                  aria-hidden={true}
+                  className="bp4-icon bp4-icon-cross"
                   icon="cross"
                 >
                   <svg
                     data-icon="cross"
                     height={16}
+                    role="img"
                     viewBox="0 0 16 16"
                     width={16}
                   >
-                    <desc>
-                      cross
-                    </desc>
                     <path
                       d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
                       fillRule="evenodd"
@@ -127,18 +127,17 @@ exports[`Editors component renders 1`] = `
               Main Process (main.js)
             </h4>
             <span
-              className="bp3-icon bp3-icon-application"
+              aria-hidden={true}
+              className="bp4-icon bp4-icon-application"
               icon="application"
             >
               <svg
                 data-icon="application"
                 height={72}
+                role="img"
                 viewBox="0 0 20 20"
                 width={72}
               >
-                <desc>
-                  application
-                </desc>
                 <path
                   d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
                   fillRule="evenodd"
@@ -211,7 +210,8 @@ exports[`Editors component renders 1`] = `
               className="mosaic-controls"
             >
               <button
-                className="bp3-button bp3-small"
+                className="bp4-button bp4-small"
+                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -219,18 +219,17 @@ exports[`Editors component renders 1`] = `
                 type="button"
               >
                 <span
-                  className="bp3-icon bp3-icon-maximize"
+                  aria-hidden={true}
+                  className="bp4-icon bp4-icon-maximize"
                   icon="maximize"
                 >
                   <svg
                     data-icon="maximize"
                     height={16}
+                    role="img"
                     viewBox="0 0 16 16"
                     width={16}
                   >
-                    <desc>
-                      maximize
-                    </desc>
                     <path
                       d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
                       fillRule="evenodd"
@@ -240,7 +239,8 @@ exports[`Editors component renders 1`] = `
                 </span>
               </button>
               <button
-                className="bp3-button bp3-small"
+                className="bp4-button bp4-small"
+                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -248,18 +248,17 @@ exports[`Editors component renders 1`] = `
                 type="button"
               >
                 <span
-                  className="bp3-icon bp3-icon-cross"
+                  aria-hidden={true}
+                  className="bp4-icon bp4-icon-cross"
                   icon="cross"
                 >
                   <svg
                     data-icon="cross"
                     height={16}
+                    role="img"
                     viewBox="0 0 16 16"
                     width={16}
                   >
-                    <desc>
-                      cross
-                    </desc>
                     <path
                       d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
                       fillRule="evenodd"
@@ -302,18 +301,17 @@ exports[`Editors component renders 1`] = `
               Renderer Process (renderer.js)
             </h4>
             <span
-              className="bp3-icon bp3-icon-application"
+              aria-hidden={true}
+              className="bp4-icon bp4-icon-application"
               icon="application"
             >
               <svg
                 data-icon="application"
                 height={72}
+                role="img"
                 viewBox="0 0 20 20"
                 width={72}
               >
-                <desc>
-                  application
-                </desc>
                 <path
                   d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
                   fillRule="evenodd"
@@ -386,7 +384,8 @@ exports[`Editors component renders 1`] = `
               className="mosaic-controls"
             >
               <button
-                className="bp3-button bp3-small"
+                className="bp4-button bp4-small"
+                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -394,18 +393,17 @@ exports[`Editors component renders 1`] = `
                 type="button"
               >
                 <span
-                  className="bp3-icon bp3-icon-maximize"
+                  aria-hidden={true}
+                  className="bp4-icon bp4-icon-maximize"
                   icon="maximize"
                 >
                   <svg
                     data-icon="maximize"
                     height={16}
+                    role="img"
                     viewBox="0 0 16 16"
                     width={16}
                   >
-                    <desc>
-                      maximize
-                    </desc>
                     <path
                       d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
                       fillRule="evenodd"
@@ -415,7 +413,8 @@ exports[`Editors component renders 1`] = `
                 </span>
               </button>
               <button
-                className="bp3-button bp3-small"
+                className="bp4-button bp4-small"
+                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -423,18 +422,17 @@ exports[`Editors component renders 1`] = `
                 type="button"
               >
                 <span
-                  className="bp3-icon bp3-icon-cross"
+                  aria-hidden={true}
+                  className="bp4-icon bp4-icon-cross"
                   icon="cross"
                 >
                   <svg
                     data-icon="cross"
                     height={16}
+                    role="img"
                     viewBox="0 0 16 16"
                     width={16}
                   >
-                    <desc>
-                      cross
-                    </desc>
                     <path
                       d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
                       fillRule="evenodd"
@@ -477,18 +475,17 @@ exports[`Editors component renders 1`] = `
               HTML (index.html)
             </h4>
             <span
-              className="bp3-icon bp3-icon-application"
+              aria-hidden={true}
+              className="bp4-icon bp4-icon-application"
               icon="application"
             >
               <svg
                 data-icon="application"
                 height={72}
+                role="img"
                 viewBox="0 0 20 20"
                 width={72}
               >
-                <desc>
-                  application
-                </desc>
                 <path
                   d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
                   fillRule="evenodd"
@@ -561,7 +558,8 @@ exports[`Editors component renders 1`] = `
               className="mosaic-controls"
             >
               <button
-                className="bp3-button bp3-small"
+                className="bp4-button bp4-small"
+                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -569,18 +567,17 @@ exports[`Editors component renders 1`] = `
                 type="button"
               >
                 <span
-                  className="bp3-icon bp3-icon-maximize"
+                  aria-hidden={true}
+                  className="bp4-icon bp4-icon-maximize"
                   icon="maximize"
                 >
                   <svg
                     data-icon="maximize"
                     height={16}
+                    role="img"
                     viewBox="0 0 16 16"
                     width={16}
                   >
-                    <desc>
-                      maximize
-                    </desc>
                     <path
                       d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
                       fillRule="evenodd"
@@ -590,7 +587,8 @@ exports[`Editors component renders 1`] = `
                 </span>
               </button>
               <button
-                className="bp3-button bp3-small"
+                className="bp4-button bp4-small"
+                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -598,18 +596,17 @@ exports[`Editors component renders 1`] = `
                 type="button"
               >
                 <span
-                  className="bp3-icon bp3-icon-cross"
+                  aria-hidden={true}
+                  className="bp4-icon bp4-icon-cross"
                   icon="cross"
                 >
                   <svg
                     data-icon="cross"
                     height={16}
+                    role="img"
                     viewBox="0 0 16 16"
                     width={16}
                   >
-                    <desc>
-                      cross
-                    </desc>
                     <path
                       d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
                       fillRule="evenodd"
@@ -652,18 +649,17 @@ exports[`Editors component renders 1`] = `
               Preload (preload.js)
             </h4>
             <span
-              className="bp3-icon bp3-icon-application"
+              aria-hidden={true}
+              className="bp4-icon bp4-icon-application"
               icon="application"
             >
               <svg
                 data-icon="application"
                 height={72}
+                role="img"
                 viewBox="0 0 20 20"
                 width={72}
               >
-                <desc>
-                  application
-                </desc>
                 <path
                   d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
                   fillRule="evenodd"
@@ -736,7 +732,8 @@ exports[`Editors component renders 1`] = `
               className="mosaic-controls"
             >
               <button
-                className="bp3-button bp3-small"
+                className="bp4-button bp4-small"
+                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -744,18 +741,17 @@ exports[`Editors component renders 1`] = `
                 type="button"
               >
                 <span
-                  className="bp3-icon bp3-icon-maximize"
+                  aria-hidden={true}
+                  className="bp4-icon bp4-icon-maximize"
                   icon="maximize"
                 >
                   <svg
                     data-icon="maximize"
                     height={16}
+                    role="img"
                     viewBox="0 0 16 16"
                     width={16}
                   >
-                    <desc>
-                      maximize
-                    </desc>
                     <path
                       d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
                       fillRule="evenodd"
@@ -765,7 +761,8 @@ exports[`Editors component renders 1`] = `
                 </span>
               </button>
               <button
-                className="bp3-button bp3-small"
+                className="bp4-button bp4-small"
+                disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -773,18 +770,17 @@ exports[`Editors component renders 1`] = `
                 type="button"
               >
                 <span
-                  className="bp3-icon bp3-icon-cross"
+                  aria-hidden={true}
+                  className="bp4-icon bp4-icon-cross"
                   icon="cross"
                 >
                   <svg
                     data-icon="cross"
                     height={16}
+                    role="img"
                     viewBox="0 0 16 16"
                     width={16}
                   >
-                    <desc>
-                      cross
-                    </desc>
                     <path
                       d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
                       fillRule="evenodd"
@@ -827,18 +823,17 @@ exports[`Editors component renders 1`] = `
               Stylesheet (styles.css)
             </h4>
             <span
-              className="bp3-icon bp3-icon-application"
+              aria-hidden={true}
+              className="bp4-icon bp4-icon-application"
               icon="application"
             >
               <svg
                 data-icon="application"
                 height={72}
+                role="img"
                 viewBox="0 0 20 20"
                 width={72}
               >
-                <desc>
-                  application
-                </desc>
                 <path
                   d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
                   fillRule="evenodd"
diff --git a/tests/renderer/components/__snapshots__/settings-credits-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-credits-spec.tsx.snap
index f6cde5681f..2646b4d41a 100644
--- a/tests/renderer/components/__snapshots__/settings-credits-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-credits-spec.tsx.snap
@@ -5,14 +5,14 @@ exports[`CreditsSettings component renders 1`] = `
   <h1>
     Credits
   </h1>
-  <Blueprint3.Callout>
+  <Blueprint4.Callout>
     Electron Fiddle is, just like Electron, a free open source project welcoming contributors of all genders, cultures, and backgrounds. We would like to thank those who helped to make Electron Fiddle:
-  </Blueprint3.Callout>
+  </Blueprint4.Callout>
   <br />
   <div
     className="contributors"
   >
-    <Blueprint3.Card
+    <Blueprint4.Card
       className="contributor"
       elevation={0}
       interactive={true}
@@ -47,7 +47,7 @@ exports[`CreditsSettings component renders 1`] = `
           🙇 ✨🌳 
         </small>
       </div>
-    </Blueprint3.Card>
+    </Blueprint4.Card>
   </div>
 </div>
 `;
@@ -57,14 +57,14 @@ exports[`CreditsSettings component renders for contributors with less data 1`] =
   <h1>
     Credits
   </h1>
-  <Blueprint3.Callout>
+  <Blueprint4.Callout>
     Electron Fiddle is, just like Electron, a free open source project welcoming contributors of all genders, cultures, and backgrounds. We would like to thank those who helped to make Electron Fiddle:
-  </Blueprint3.Callout>
+  </Blueprint4.Callout>
   <br />
   <div
     className="contributors"
   >
-    <Blueprint3.Card
+    <Blueprint4.Card
       className="contributor"
       elevation={0}
       interactive={true}
@@ -88,7 +88,7 @@ exports[`CreditsSettings component renders for contributors with less data 1`] =
           felixrieseberg
         </h2>
       </div>
-    </Blueprint3.Card>
+    </Blueprint4.Card>
   </div>
 </div>
 `;
@@ -98,9 +98,9 @@ exports[`CreditsSettings component renders nothing if we do not have contributor
   <h1>
     Credits
   </h1>
-  <Blueprint3.Callout>
+  <Blueprint4.Callout>
     Electron Fiddle is, just like Electron, a free open source project welcoming contributors of all genders, cultures, and backgrounds. We would like to thank those who helped to make Electron Fiddle:
-  </Blueprint3.Callout>
+  </Blueprint4.Callout>
   <br />
   <div
     className="contributors"
diff --git a/tests/renderer/components/__snapshots__/settings-electron-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-electron-spec.tsx.snap
index 5cd78655f1..e6078d0b38 100644
--- a/tests/renderer/components/__snapshots__/settings-electron-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-electron-spec.tsx.snap
@@ -7,11 +7,11 @@ exports[`ElectronSettings component renders 1`] = `
   <h1>
     Electron Settings
   </h1>
-  <Blueprint3.Callout>
-    <Blueprint3.FormGroup
+  <Blueprint4.Callout>
+    <Blueprint4.FormGroup
       label="Include Electron versions:"
     >
-      <Blueprint3.Tooltip
+      <Blueprint4.Tooltip2
         content="Can't disable channel of selected version (2.0.1)"
         disabled={false}
         hoverCloseDelay={0}
@@ -19,10 +19,10 @@ exports[`ElectronSettings component renders 1`] = `
         intent="primary"
         key="Stable"
         minimal={false}
-        position="bottom"
+        placement="bottom"
         transitionDuration={100}
       >
-        <Blueprint3.Checkbox
+        <Blueprint4.Checkbox
           checked={true}
           disabled={true}
           id="Stable"
@@ -30,8 +30,8 @@ exports[`ElectronSettings component renders 1`] = `
           label="Stable"
           onChange={[Function]}
         />
-      </Blueprint3.Tooltip>
-      <Blueprint3.Tooltip
+      </Blueprint4.Tooltip2>
+      <Blueprint4.Tooltip2
         content="Can't disable channel of selected version (2.0.1)"
         disabled={true}
         hoverCloseDelay={0}
@@ -39,10 +39,10 @@ exports[`ElectronSettings component renders 1`] = `
         intent="primary"
         key="Beta"
         minimal={false}
-        position="bottom"
+        placement="bottom"
         transitionDuration={100}
       >
-        <Blueprint3.Checkbox
+        <Blueprint4.Checkbox
           checked={true}
           disabled={false}
           id="Beta"
@@ -50,8 +50,8 @@ exports[`ElectronSettings component renders 1`] = `
           label="Beta"
           onChange={[Function]}
         />
-      </Blueprint3.Tooltip>
-      <Blueprint3.Tooltip
+      </Blueprint4.Tooltip2>
+      <Blueprint4.Tooltip2
         content="Can't disable channel of selected version (2.0.1)"
         disabled={true}
         hoverCloseDelay={0}
@@ -59,10 +59,10 @@ exports[`ElectronSettings component renders 1`] = `
         intent="primary"
         key="Nightly"
         minimal={false}
-        position="bottom"
+        placement="bottom"
         transitionDuration={100}
       >
-        <Blueprint3.Checkbox
+        <Blueprint4.Checkbox
           checked={false}
           disabled={false}
           id="Nightly"
@@ -70,61 +70,61 @@ exports[`ElectronSettings component renders 1`] = `
           label="Nightly"
           onChange={[Function]}
         />
-      </Blueprint3.Tooltip>
-      <Blueprint3.Checkbox
+      </Blueprint4.Tooltip2>
+      <Blueprint4.Checkbox
         checked={false}
         id="showUndownloadedVersions"
         inline={true}
         label="Not downloaded"
         onChange={[Function]}
       />
-      <Blueprint3.Tooltip
+      <Blueprint4.Tooltip2
         content="Include versions that have reached end-of-life (older than 9.0.0)"
         hoverCloseDelay={0}
         hoverOpenDelay={100}
         intent="primary"
         minimal={false}
-        position="bottom"
+        placement="bottom"
         transitionDuration={100}
       >
-        <Blueprint3.Checkbox
+        <Blueprint4.Checkbox
           checked={false}
           id="showObsoleteVersions"
           inline={true}
           label="Obsolete"
           onChange={[Function]}
         />
-      </Blueprint3.Tooltip>
-    </Blueprint3.FormGroup>
-  </Blueprint3.Callout>
+      </Blueprint4.Tooltip2>
+    </Blueprint4.FormGroup>
+  </Blueprint4.Callout>
   <br />
-  <Blueprint3.Callout>
-    <Blueprint3.ButtonGroup
+  <Blueprint4.Callout>
+    <Blueprint4.ButtonGroup
       fill={true}
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="numbered-list"
         onClick={[Function]}
         text="Update Electron Release List"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={false}
         icon="download"
         onClick={[Function]}
         text="Download All Versions"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={false}
         icon="trash"
         onClick={[Function]}
         text="Delete All Downloads"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="document-open"
         onClick={[Function]}
         text="Add Local Electron Build"
       />
-    </Blueprint3.ButtonGroup>
+    </Blueprint4.ButtonGroup>
     <HTMLTable
       className="electron-versions-table"
       striped={true}
@@ -153,7 +153,7 @@ exports[`ElectronSettings component renders 1`] = `
           </td>
           <td>
             <span>
-              <Blueprint3.Icon
+              <Blueprint4.Icon
                 icon="box"
               />
                
@@ -163,7 +163,7 @@ exports[`ElectronSettings component renders 1`] = `
           <td
             className="action"
           >
-            <Blueprint3.Button
+            <Blueprint4.Button
               fill={true}
               icon="trash"
               onClick={[Function]}
@@ -180,7 +180,7 @@ exports[`ElectronSettings component renders 1`] = `
           </td>
           <td>
             <span>
-              <Blueprint3.Icon
+              <Blueprint4.Icon
                 icon="box"
               />
                
@@ -190,7 +190,7 @@ exports[`ElectronSettings component renders 1`] = `
           <td
             className="action"
           >
-            <Blueprint3.Button
+            <Blueprint4.Button
               fill={true}
               icon="trash"
               onClick={[Function]}
@@ -207,7 +207,7 @@ exports[`ElectronSettings component renders 1`] = `
           </td>
           <td>
             <span>
-              <Blueprint3.Icon
+              <Blueprint4.Icon
                 icon="box"
               />
                
@@ -217,7 +217,7 @@ exports[`ElectronSettings component renders 1`] = `
           <td
             className="action"
           >
-            <Blueprint3.Button
+            <Blueprint4.Button
               fill={true}
               icon="trash"
               onClick={[Function]}
@@ -234,7 +234,7 @@ exports[`ElectronSettings component renders 1`] = `
           </td>
           <td>
             <span>
-              <Blueprint3.Icon
+              <Blueprint4.Icon
                 icon="cloud-download"
               />
                
@@ -244,7 +244,7 @@ exports[`ElectronSettings component renders 1`] = `
           <td
             className="action"
           >
-            <Blueprint3.Button
+            <Blueprint4.Button
               disabled={true}
               fill={true}
               icon="cloud-download"
@@ -262,7 +262,7 @@ exports[`ElectronSettings component renders 1`] = `
           </td>
           <td>
             <span>
-              <Blueprint3.Icon
+              <Blueprint4.Icon
                 icon="cloud"
               />
                
@@ -272,22 +272,22 @@ exports[`ElectronSettings component renders 1`] = `
           <td
             className="action"
           >
-            <Blueprint3.Tooltip
+            <Blueprint4.Tooltip2
               content="Can't remove currently active Electron version (2.0.1)"
               hoverCloseDelay={0}
               hoverOpenDelay={100}
               intent="primary"
               minimal={false}
-              position="auto"
+              placement="auto"
               transitionDuration={100}
             >
-              <Blueprint3.AnchorButton
+              <Blueprint4.AnchorButton
                 className="disabled-version"
                 disabled={true}
                 icon="cloud-download"
                 text="Download"
               />
-            </Blueprint3.Tooltip>
+            </Blueprint4.Tooltip2>
           </td>
         </tr>
         <tr
@@ -298,7 +298,7 @@ exports[`ElectronSettings component renders 1`] = `
           </td>
           <td>
             <span>
-              <Blueprint3.Icon
+              <Blueprint4.Icon
                 icon="box"
               />
                
@@ -308,7 +308,7 @@ exports[`ElectronSettings component renders 1`] = `
           <td
             className="action"
           >
-            <Blueprint3.Button
+            <Blueprint4.Button
               disabled={true}
               fill={true}
               icon="cloud-download"
@@ -326,7 +326,7 @@ exports[`ElectronSettings component renders 1`] = `
           </td>
           <td>
             <span>
-              <Blueprint3.Icon
+              <Blueprint4.Icon
                 icon="box"
               />
                
@@ -336,7 +336,7 @@ exports[`ElectronSettings component renders 1`] = `
           <td
             className="action"
           >
-            <Blueprint3.Button
+            <Blueprint4.Button
               fill={true}
               icon="trash"
               onClick={[Function]}
@@ -347,6 +347,6 @@ exports[`ElectronSettings component renders 1`] = `
         </tr>
       </tbody>
     </HTMLTable>
-  </Blueprint3.Callout>
+  </Blueprint4.Callout>
 </div>
 `;
diff --git a/tests/renderer/components/__snapshots__/settings-execution-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-execution-spec.tsx.snap
index 5256d068b7..9093d08969 100644
--- a/tests/renderer/components/__snapshots__/settings-execution-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-execution-spec.tsx.snap
@@ -5,24 +5,24 @@ exports[`ExecutionSettings component renders 1`] = `
   <h1>
     Execution
   </h1>
-  <Blueprint3.Callout>
+  <Blueprint4.Callout>
     These advanced settings control how Electron Fiddle executes your fiddles.
-  </Blueprint3.Callout>
+  </Blueprint4.Callout>
   <br />
-  <Blueprint3.Callout>
-    <Blueprint3.FormGroup>
+  <Blueprint4.Callout>
+    <Blueprint4.FormGroup>
       <p>
         Whenever Electron runs, it creates a user data directory for cookies, the cache, and various other things that it needs to keep around. Since fiddles are usually just run once, we delete this directory after your fiddle exits. Enable this setting to keep the user data directories around.
       </p>
-      <Blueprint3.Checkbox
+      <Blueprint4.Checkbox
         label="Do not delete user data directories."
         onChange={[Function]}
       />
-    </Blueprint3.FormGroup>
-  </Blueprint3.Callout>
+    </Blueprint4.FormGroup>
+  </Blueprint4.Callout>
   <br />
-  <Blueprint3.Callout>
-    <Blueprint3.FormGroup>
+  <Blueprint4.Callout>
+    <Blueprint4.FormGroup>
       <p>
         There are some flags that Electron uses to log extra information both internally and through Chromium. Enable this option to make Fiddle produce those logs. Enabling advanced Electron logging will set the 
         <code>
@@ -48,15 +48,15 @@ exports[`ExecutionSettings component renders 1`] = `
          
         for more information about what they do.
       </p>
-      <Blueprint3.Checkbox
+      <Blueprint4.Checkbox
         label="Enable advanced Electron logging."
         onChange={[Function]}
       />
-    </Blueprint3.FormGroup>
-  </Blueprint3.Callout>
+    </Blueprint4.FormGroup>
+  </Blueprint4.Callout>
   <br />
-  <Blueprint3.Callout>
-    <Blueprint3.FormGroup>
+  <Blueprint4.Callout>
+    <Blueprint4.FormGroup>
       <p>
         Electron allows starting the executable with
          
@@ -72,14 +72,14 @@ exports[`ExecutionSettings component renders 1`] = `
         . Those can be added to run when you start your Fiddles.
       </p>
       <br />
-      <Blueprint3.InputGroup
+      <Blueprint4.InputGroup
         aria-label="Set user-provided flags"
         key="0"
         name="0"
         onChange={[Function]}
         placeholder="--js-flags=--expose-gc"
         rightElement={
-          <Blueprint3.Button
+          <Blueprint4.Button
             disabled={true}
             icon="cross"
             onClick={[Function]}
@@ -87,18 +87,18 @@ exports[`ExecutionSettings component renders 1`] = `
         }
         value=""
       />
-    </Blueprint3.FormGroup>
-    <Blueprint3.ButtonGroup>
-      <Blueprint3.Button
+    </Blueprint4.FormGroup>
+    <Blueprint4.ButtonGroup>
+      <Blueprint4.Button
         onClick={[Function]}
       >
         Add New Flag
-      </Blueprint3.Button>
-    </Blueprint3.ButtonGroup>
-  </Blueprint3.Callout>
+      </Blueprint4.Button>
+    </Blueprint4.ButtonGroup>
+  </Blueprint4.Callout>
   <br />
-  <Blueprint3.Callout>
-    <Blueprint3.FormGroup>
+  <Blueprint4.Callout>
+    <Blueprint4.FormGroup>
       <p>
         Electron allows starting the executable with
          
@@ -115,14 +115,14 @@ exports[`ExecutionSettings component renders 1`] = `
         . Those can be added here to run when you start your Fiddles.
       </p>
       <br />
-      <Blueprint3.InputGroup
+      <Blueprint4.InputGroup
         aria-label="Set user-provided environment variables"
         key="0"
         name="0"
         onChange={[Function]}
         placeholder="NODE_OPTIONS=\\"--no-warnings --max-old-space-size=2048\\""
         rightElement={
-          <Blueprint3.Button
+          <Blueprint4.Button
             disabled={true}
             icon="cross"
             onClick={[Function]}
@@ -130,18 +130,18 @@ exports[`ExecutionSettings component renders 1`] = `
         }
         value=""
       />
-    </Blueprint3.FormGroup>
-    <Blueprint3.ButtonGroup>
-      <Blueprint3.Button
+    </Blueprint4.FormGroup>
+    <Blueprint4.ButtonGroup>
+      <Blueprint4.Button
         onClick={[Function]}
       >
         Add New Variable
-      </Blueprint3.Button>
-    </Blueprint3.ButtonGroup>
-  </Blueprint3.Callout>
+      </Blueprint4.Button>
+    </Blueprint4.ButtonGroup>
+  </Blueprint4.Callout>
   <br />
-  <Blueprint3.Callout>
-    <Blueprint3.FormGroup>
+  <Blueprint4.Callout>
+    <Blueprint4.FormGroup>
       <span
         style={
           Object {
@@ -171,20 +171,20 @@ exports[`ExecutionSettings component renders 1`] = `
          
         is also available.
       </span>
-      <Blueprint3.RadioGroup
+      <Blueprint4.RadioGroup
         inline={true}
         onChange={[Function]}
       >
-        <Blueprint3.Radio
+        <Blueprint4.Radio
           label="npm"
           value="npm"
         />
-        <Blueprint3.Radio
+        <Blueprint4.Radio
           label="yarn"
           value="yarn"
         />
-      </Blueprint3.RadioGroup>
-    </Blueprint3.FormGroup>
-  </Blueprint3.Callout>
+      </Blueprint4.RadioGroup>
+    </Blueprint4.FormGroup>
+  </Blueprint4.Callout>
 </div>
 `;
diff --git a/tests/renderer/components/__snapshots__/settings-general-appearance-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-general-appearance-spec.tsx.snap
index 098c3d39e2..ce9ee57023 100644
--- a/tests/renderer/components/__snapshots__/settings-general-appearance-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-general-appearance-spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AppearanceSettings component renderItem() returns a MenuItem for matching 1`] = `
-<Blueprint3.MenuItem
+<Blueprint4.MenuItem2
   active={false}
   disabled={false}
   icon="media"
@@ -24,25 +24,26 @@ exports[`AppearanceSettings component renders 1`] = `
   <h3>
     Appearance
   </h3>
-  <Blueprint3.Checkbox
+  <Blueprint4.Checkbox
     checked={true}
     label="Sync theme with system setting"
     onChange={[Function]}
   />
-  <Blueprint3.FormGroup
+  <Blueprint4.FormGroup
     disabled={true}
     inline={true}
     label="Choose your theme"
     labelFor="open-theme-selector"
   >
-    <Blueprint3.Select
+    <Blueprint4.Select2
       disabled={true}
       filterable={true}
       itemPredicate={[Function]}
       itemRenderer={[Function]}
       items={Array []}
       noResults={
-        <Blueprint3.MenuItem
+        <Blueprint4.MenuItem2
+          active={false}
           disabled={true}
           multiline={false}
           popoverProps={Object {}}
@@ -57,16 +58,16 @@ exports[`AppearanceSettings component renders 1`] = `
         }
       }
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         disabled={true}
         icon="tint"
         id="open-theme-selector"
         onClick={[Function]}
         text="Select a theme"
       />
-    </Blueprint3.Select>
-  </Blueprint3.FormGroup>
-  <Blueprint3.Callout
+    </Blueprint4.Select2>
+  </Blueprint4.FormGroup>
+  <Blueprint4.Callout
     hidden={true}
   >
     <p>
@@ -85,16 +86,16 @@ exports[`AppearanceSettings component renders 1`] = `
     <p>
       Additionally, if you wish to import a Monaco Editor theme, pick your JSON file and Fiddle will attempt to import it.
     </p>
-    <Blueprint3.Button
+    <Blueprint4.Button
       icon="duplicate"
       onClick={[Function]}
       text="Create theme from current selection"
     />
-    <Blueprint3.Button
+    <Blueprint4.Button
       icon="document-open"
       onClick={[Function]}
       text="Add a Monaco Editor theme"
     />
-  </Blueprint3.Callout>
+  </Blueprint4.Callout>
 </div>
 `;
diff --git a/tests/renderer/components/__snapshots__/settings-general-block-accelerators-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-general-block-accelerators-spec.tsx.snap
index 5f82f98c6c..95dff65ff0 100644
--- a/tests/renderer/components/__snapshots__/settings-general-block-accelerators-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-general-block-accelerators-spec.tsx.snap
@@ -5,24 +5,24 @@ exports[`BlockAcceleratorsSettings component renders 1`] = `
   <h4>
     Block Keyboard Shortcuts
   </h4>
-  <Blueprint3.Callout>
-    <Blueprint3.FormGroup>
+  <Blueprint4.Callout>
+    <Blueprint4.FormGroup>
       <p>
         Any keyboard shortcuts checked below will be disabled.
       </p>
-      <Blueprint3.Checkbox
+      <Blueprint4.Checkbox
         checked={false}
         label="Save"
         onChange={[Function]}
         value="save"
       />
-      <Blueprint3.Checkbox
+      <Blueprint4.Checkbox
         checked={false}
         label="Save as"
         onChange={[Function]}
         value="saveAs"
       />
-    </Blueprint3.FormGroup>
-  </Blueprint3.Callout>
+    </Blueprint4.FormGroup>
+  </Blueprint4.Callout>
 </div>
 `;
diff --git a/tests/renderer/components/__snapshots__/settings-general-console-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-general-console-spec.tsx.snap
index 2504cfe35e..f17843e4de 100644
--- a/tests/renderer/components/__snapshots__/settings-general-console-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-general-console-spec.tsx.snap
@@ -5,17 +5,17 @@ exports[`ConsoleSettings component renders 1`] = `
   <h1>
     Console
   </h1>
-  <Blueprint3.Callout>
-    <Blueprint3.FormGroup>
+  <Blueprint4.Callout>
+    <Blueprint4.FormGroup>
       <p>
         Enable this option to automatically clear the console whenever you run your
       fiddle.
       </p>
-      <Blueprint3.Checkbox
+      <Blueprint4.Checkbox
         label="Clear on run."
         onChange={[Function]}
       />
-    </Blueprint3.FormGroup>
-  </Blueprint3.Callout>
+    </Blueprint4.FormGroup>
+  </Blueprint4.Callout>
 </div>
 `;
diff --git a/tests/renderer/components/__snapshots__/settings-general-font-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-general-font-spec.tsx.snap
index f3668829a8..7882745bd0 100644
--- a/tests/renderer/components/__snapshots__/settings-general-font-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-general-font-spec.tsx.snap
@@ -5,34 +5,34 @@ exports[`FontSettings component renders 1`] = `
   <h1>
     Font Settings
   </h1>
-  <Blueprint3.Callout>
+  <Blueprint4.Callout>
     <p>
       Set a font family and size for your editors. Reload or restart for changes to take effect.
     </p>
-    <Blueprint3.FormGroup
+    <Blueprint4.FormGroup
       label="Font Family"
       labelFor="font-family"
     >
-      <Blueprint3.InputGroup
+      <Blueprint4.InputGroup
         id="font-family"
         onChange={[Function]}
       />
-    </Blueprint3.FormGroup>
-    <Blueprint3.FormGroup
+    </Blueprint4.FormGroup>
+    <Blueprint4.FormGroup
       label="Font Size"
       labelFor="font-size"
     >
-      <Blueprint3.InputGroup
+      <Blueprint4.InputGroup
         id="font-size"
         onChange={[Function]}
         value=""
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="repeat"
         onClick={[Function]}
         text="Reload Window"
       />
-    </Blueprint3.FormGroup>
-  </Blueprint3.Callout>
+    </Blueprint4.FormGroup>
+  </Blueprint4.Callout>
 </div>
 `;
diff --git a/tests/renderer/components/__snapshots__/settings-general-github-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-general-github-spec.tsx.snap
index 9d84e478ed..2abeb3abaa 100644
--- a/tests/renderer/components/__snapshots__/settings-general-github-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-general-github-spec.tsx.snap
@@ -5,29 +5,29 @@ exports[`GitHubSettings component renders when not signed in 1`] = `
   <h4>
     GitHub
   </h4>
-  <Blueprint3.Callout>
+  <Blueprint4.Callout>
     <p>
       Your fiddles can be published as GitHub Gists - that way you can share your fiddles with the world!
     </p>
-    <Blueprint3.Button
+    <Blueprint4.Button
       icon="log-in"
       onClick={[Function]}
       text="Sign in"
     />
-  </Blueprint3.Callout>
-  <Blueprint3.Callout>
-    <Blueprint3.FormGroup>
+  </Blueprint4.Callout>
+  <Blueprint4.Callout>
+    <Blueprint4.FormGroup>
       <p>
         Enable this option to always publish your fiddle as a revision of the
     default fiddle gist values.
       </p>
-      <Blueprint3.Checkbox
+      <Blueprint4.Checkbox
         checked={true}
         label="Publish as revision."
         onChange={[Function]}
       />
-    </Blueprint3.FormGroup>
-  </Blueprint3.Callout>
+    </Blueprint4.FormGroup>
+  </Blueprint4.Callout>
 </div>
 `;
 
@@ -36,7 +36,7 @@ exports[`GitHubSettings component renders when signed in 1`] = `
   <h4>
     GitHub
   </h4>
-  <Blueprint3.Callout>
+  <Blueprint4.Callout>
     <p>
       Your fiddles can be published as public GitHub Gists. Using the personal access token you gave us, we logged you into GitHub as
        
@@ -45,24 +45,24 @@ exports[`GitHubSettings component renders when signed in 1`] = `
       </code>
       .
     </p>
-    <Blueprint3.Button
+    <Blueprint4.Button
       icon="log-out"
       onClick={[MockFunction]}
       text="Sign out"
     />
-  </Blueprint3.Callout>
-  <Blueprint3.Callout>
-    <Blueprint3.FormGroup>
+  </Blueprint4.Callout>
+  <Blueprint4.Callout>
+    <Blueprint4.FormGroup>
       <p>
         Enable this option to always publish your fiddle as a revision of the
     default fiddle gist values.
       </p>
-      <Blueprint3.Checkbox
+      <Blueprint4.Checkbox
         checked={true}
         label="Publish as revision."
         onChange={[Function]}
       />
-    </Blueprint3.FormGroup>
-  </Blueprint3.Callout>
+    </Blueprint4.FormGroup>
+  </Blueprint4.Callout>
 </div>
 `;
diff --git a/tests/renderer/components/__snapshots__/settings-general-mirror-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-general-mirror-spec.tsx.snap
index ac36cdb017..8b7a7ad53b 100644
--- a/tests/renderer/components/__snapshots__/settings-general-mirror-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-general-mirror-spec.tsx.snap
@@ -5,36 +5,36 @@ exports[`MirrorSettings component renders 1`] = `
   <h4>
     Electron Mirrors
   </h4>
-  <Blueprint3.Callout>
-    <Blueprint3.RadioGroup
+  <Blueprint4.Callout>
+    <Blueprint4.RadioGroup
       inline={true}
       label="If you don't have access to Electron's GitHub releases, you can tell Fiddle to download Electron binaries from an alternate source."
       onChange={[Function]}
       selectedValue="DEFAULT"
     >
-      <Blueprint3.Radio
+      <Blueprint4.Radio
         label="Default"
         value="DEFAULT"
       />
-      <Blueprint3.Radio
+      <Blueprint4.Radio
         label="China"
         value="CHINA"
       />
-      <Blueprint3.Radio
+      <Blueprint4.Radio
         label="Custom"
         value="CUSTOM"
       />
-    </Blueprint3.RadioGroup>
-    <Blueprint3.InputGroup
+    </Blueprint4.RadioGroup>
+    <Blueprint4.InputGroup
       disabled={true}
       onChange={[Function]}
       value="https://github.com/electron/electron/releases/download/"
     />
-    <Blueprint3.InputGroup
+    <Blueprint4.InputGroup
       disabled={true}
       onChange={[Function]}
       value="https://github.com/electron/nightlies/releases/download/"
     />
-  </Blueprint3.Callout>
+  </Blueprint4.Callout>
 </div>
 `;
diff --git a/tests/renderer/components/__snapshots__/settings-general-package-author-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-general-package-author-spec.tsx.snap
index 7f5fac9340..b2b8e234a0 100644
--- a/tests/renderer/components/__snapshots__/settings-general-package-author-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-general-package-author-spec.tsx.snap
@@ -5,17 +5,17 @@ exports[`PackageAuthorSettings component renders 1`] = `
   <h4>
     Package Author
   </h4>
-  <Blueprint3.Callout>
-    <Blueprint3.FormGroup
+  <Blueprint4.Callout>
+    <Blueprint4.FormGroup
       label="Set the package.json author field for your exported Fiddle projects."
       labelFor="package-author"
     >
-      <Blueprint3.InputGroup
+      <Blueprint4.InputGroup
         id="package-author"
         onChange={[Function]}
         value="electron<electron@electron.org>"
       />
-    </Blueprint3.FormGroup>
-  </Blueprint3.Callout>
+    </Blueprint4.FormGroup>
+  </Blueprint4.Callout>
 </div>
 `;
diff --git a/tests/renderer/components/__snapshots__/settings-general-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-general-spec.tsx.snap
index bafc1bf3bd..a21ccbc53a 100644
--- a/tests/renderer/components/__snapshots__/settings-general-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-general-spec.tsx.snap
@@ -9,27 +9,27 @@ exports[`GeneralSettings component renders 1`] = `
     appState={Object {}}
     toggleHasPopoverOpen={[Function]}
   />
-  <Blueprint3.Divider />
+  <Blueprint4.Divider />
   <FontSettings
     appState={Object {}}
   />
-  <Blueprint3.Divider />
+  <Blueprint4.Divider />
   <settings-console
     appState={Object {}}
   />
-  <Blueprint3.Divider />
+  <Blueprint4.Divider />
   <settings-github
     appState={Object {}}
   />
-  <Blueprint3.Divider />
+  <Blueprint4.Divider />
   <settings-block-accelerators
     appState={Object {}}
   />
-  <Blueprint3.Divider />
+  <Blueprint4.Divider />
   <settings-package-author
     appState={Object {}}
   />
-  <Blueprint3.Divider />
+  <Blueprint4.Divider />
   <settings-general-mirror
     appState={Object {}}
   />
diff --git a/tests/renderer/components/__snapshots__/settings-spec.tsx.snap b/tests/renderer/components/__snapshots__/settings-spec.tsx.snap
index 9a61d01a7a..64bbf8d9d7 100644
--- a/tests/renderer/components/__snapshots__/settings-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/settings-spec.tsx.snap
@@ -8,7 +8,7 @@ exports[`Settings component renders only the menu if page unknown 1`] = `
     className="settings-menu"
   >
     <ul>
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="cog"
@@ -20,7 +20,7 @@ exports[`Settings component renders only the menu if page unknown 1`] = `
         shouldDismissPopover={true}
         text="General"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="floppy-disk"
@@ -32,7 +32,7 @@ exports[`Settings component renders only the menu if page unknown 1`] = `
         shouldDismissPopover={true}
         text="Electron"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="play"
@@ -44,7 +44,7 @@ exports[`Settings component renders only the menu if page unknown 1`] = `
         shouldDismissPopover={true}
         text="Execution"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="heart"
@@ -64,7 +64,7 @@ exports[`Settings component renders only the menu if page unknown 1`] = `
     <button
       className="settings-close"
     >
-      <Blueprint3.Icon
+      <Blueprint4.Icon
         icon="cross"
         iconSize={25}
       />
@@ -81,7 +81,7 @@ exports[`Settings component renders the Credits page after a click 1`] = `
     className="settings-menu"
   >
     <ul>
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="cog"
@@ -93,7 +93,7 @@ exports[`Settings component renders the Credits page after a click 1`] = `
         shouldDismissPopover={true}
         text="General"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="floppy-disk"
@@ -105,7 +105,7 @@ exports[`Settings component renders the Credits page after a click 1`] = `
         shouldDismissPopover={true}
         text="Electron"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="play"
@@ -117,7 +117,7 @@ exports[`Settings component renders the Credits page after a click 1`] = `
         shouldDismissPopover={true}
         text="Execution"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={true}
         disabled={false}
         icon="heart"
@@ -137,7 +137,7 @@ exports[`Settings component renders the Credits page after a click 1`] = `
     <button
       className="settings-close"
     >
-      <Blueprint3.Icon
+      <Blueprint4.Icon
         icon="cross"
         iconSize={25}
       />
@@ -161,7 +161,7 @@ exports[`Settings component renders the Electron page after a click 1`] = `
     className="settings-menu"
   >
     <ul>
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="cog"
@@ -173,7 +173,7 @@ exports[`Settings component renders the Electron page after a click 1`] = `
         shouldDismissPopover={true}
         text="General"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={true}
         disabled={false}
         icon="floppy-disk"
@@ -185,7 +185,7 @@ exports[`Settings component renders the Electron page after a click 1`] = `
         shouldDismissPopover={true}
         text="Electron"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="play"
@@ -197,7 +197,7 @@ exports[`Settings component renders the Electron page after a click 1`] = `
         shouldDismissPopover={true}
         text="Execution"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="heart"
@@ -217,7 +217,7 @@ exports[`Settings component renders the Electron page after a click 1`] = `
     <button
       className="settings-close"
     >
-      <Blueprint3.Icon
+      <Blueprint4.Icon
         icon="cross"
         iconSize={25}
       />
@@ -241,7 +241,7 @@ exports[`Settings component renders the Electron page by default 1`] = `
     className="settings-menu"
   >
     <ul>
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={true}
         disabled={false}
         icon="cog"
@@ -253,7 +253,7 @@ exports[`Settings component renders the Electron page by default 1`] = `
         shouldDismissPopover={true}
         text="General"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="floppy-disk"
@@ -265,7 +265,7 @@ exports[`Settings component renders the Electron page by default 1`] = `
         shouldDismissPopover={true}
         text="Electron"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="play"
@@ -277,7 +277,7 @@ exports[`Settings component renders the Electron page by default 1`] = `
         shouldDismissPopover={true}
         text="Execution"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="heart"
@@ -297,7 +297,7 @@ exports[`Settings component renders the Electron page by default 1`] = `
     <button
       className="settings-close"
     >
-      <Blueprint3.Icon
+      <Blueprint4.Icon
         icon="cross"
         iconSize={25}
       />
@@ -322,7 +322,7 @@ exports[`Settings component renders the Execution page after a click 1`] = `
     className="settings-menu"
   >
     <ul>
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="cog"
@@ -334,7 +334,7 @@ exports[`Settings component renders the Execution page after a click 1`] = `
         shouldDismissPopover={true}
         text="General"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="floppy-disk"
@@ -346,7 +346,7 @@ exports[`Settings component renders the Execution page after a click 1`] = `
         shouldDismissPopover={true}
         text="Electron"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={true}
         disabled={false}
         icon="play"
@@ -358,7 +358,7 @@ exports[`Settings component renders the Execution page after a click 1`] = `
         shouldDismissPopover={true}
         text="Execution"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="heart"
@@ -378,7 +378,7 @@ exports[`Settings component renders the Execution page after a click 1`] = `
     <button
       className="settings-close"
     >
-      <Blueprint3.Icon
+      <Blueprint4.Icon
         icon="cross"
         iconSize={25}
       />
@@ -402,7 +402,7 @@ exports[`Settings component renders the General page after a click 1`] = `
     className="settings-menu"
   >
     <ul>
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={true}
         disabled={false}
         icon="cog"
@@ -414,7 +414,7 @@ exports[`Settings component renders the General page after a click 1`] = `
         shouldDismissPopover={true}
         text="General"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="floppy-disk"
@@ -426,7 +426,7 @@ exports[`Settings component renders the General page after a click 1`] = `
         shouldDismissPopover={true}
         text="Electron"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="play"
@@ -438,7 +438,7 @@ exports[`Settings component renders the General page after a click 1`] = `
         shouldDismissPopover={true}
         text="Execution"
       />
-      <Blueprint3.MenuItem
+      <Blueprint4.MenuItem2
         active={false}
         disabled={false}
         icon="heart"
@@ -458,7 +458,7 @@ exports[`Settings component renders the General page after a click 1`] = `
     <button
       className="settings-close"
     >
-      <Blueprint3.Icon
+      <Blueprint4.Icon
         icon="cross"
         iconSize={25}
       />
diff --git a/tests/renderer/components/__snapshots__/sidebar-file-tree-spec.tsx.snap b/tests/renderer/components/__snapshots__/sidebar-file-tree-spec.tsx.snap
index afaf53e062..7031c904dc 100644
--- a/tests/renderer/components/__snapshots__/sidebar-file-tree-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/sidebar-file-tree-spec.tsx.snap
@@ -8,7 +8,7 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
     }
   }
 >
-  <Blueprint3.Tree
+  <Blueprint4.Tree
     contents={
       Array [
         Object {
@@ -21,8 +21,9 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -32,7 +33,8 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="remove"
                       intent="danger"
@@ -42,30 +44,31 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 index.html
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "hasCaret": false,
@@ -75,8 +78,9 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -86,7 +90,8 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={true}
                       icon="remove"
                       intent="danger"
@@ -96,30 +101,31 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 main.js
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "hasCaret": false,
@@ -129,8 +135,9 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -140,7 +147,8 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="remove"
                       intent="danger"
@@ -150,30 +158,31 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 preload.js
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "hasCaret": false,
@@ -183,8 +192,9 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -194,7 +204,8 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="remove"
                       intent="danger"
@@ -204,30 +215,31 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 renderer.js
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "hasCaret": false,
@@ -237,8 +249,9 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -248,7 +261,8 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="remove"
                       intent="danger"
@@ -258,30 +272,31 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 styles.css
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "className": "add-file-input",
@@ -289,7 +304,7 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
               "id": "add",
               "label": <input
                 autoFocus={true}
-                className="bp3-input bp3-fill bp3-small"
+                className="bp4-input bp4-fill bp4-small"
                 id="new-file-input"
                 onBlur={[Function]}
                 onKeyDown={[Function]}
@@ -307,36 +322,38 @@ exports[`SidebarFileTree component can bring up the Add File input 1`] = `
           "id": "files",
           "isExpanded": true,
           "label": "Editors",
-          "secondaryLabel": <Blueprint3.ButtonGroup
+          "secondaryLabel": <Blueprint4.ButtonGroup
             minimal={true}
           >
-            <Blueprint3.Tooltip2
+            <Blueprint4.Tooltip2
               content="Add New File"
               hoverCloseDelay={0}
               hoverOpenDelay={1000}
               minimal={true}
+              placement="right"
               transitionDuration={100}
             >
-              <Blueprint3.Button
+              <Blueprint4.Button
                 icon="add"
                 onClick={[Function]}
                 small={true}
               />
-            </Blueprint3.Tooltip2>
-            <Blueprint3.Tooltip2
+            </Blueprint4.Tooltip2>
+            <Blueprint4.Tooltip2
               content="Reset Layout"
               hoverCloseDelay={0}
               hoverOpenDelay={1000}
               minimal={true}
+              placement="right"
               transitionDuration={100}
             >
-              <Blueprint3.Button
+              <Blueprint4.Button
                 icon="grid-view"
                 onClick={[Function]}
                 small={true}
               />
-            </Blueprint3.Tooltip2>
-          </Blueprint3.ButtonGroup>,
+            </Blueprint4.Tooltip2>
+          </Blueprint4.ButtonGroup>,
         },
       ]
     }
@@ -352,7 +369,7 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
     }
   }
 >
-  <Blueprint3.Tree
+  <Blueprint4.Tree
     contents={
       Array [
         Object {
@@ -365,8 +382,9 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -376,7 +394,8 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="remove"
                       intent="danger"
@@ -386,30 +405,31 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 index.html
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-off"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "hasCaret": false,
@@ -419,8 +439,9 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -430,7 +451,8 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={true}
                       icon="remove"
                       intent="danger"
@@ -440,30 +462,31 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 main.js
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "hasCaret": false,
@@ -473,8 +496,9 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -484,7 +508,8 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="remove"
                       intent="danger"
@@ -494,30 +519,31 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 preload.js
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "hasCaret": false,
@@ -527,8 +553,9 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -538,7 +565,8 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="remove"
                       intent="danger"
@@ -548,30 +576,31 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 renderer.js
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "hasCaret": false,
@@ -581,8 +610,9 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -592,7 +622,8 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="remove"
                       intent="danger"
@@ -602,30 +633,31 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 styles.css
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
           ],
           "hasCaret": false,
@@ -633,36 +665,38 @@ exports[`SidebarFileTree component reflects the visibility state of all icons 1`
           "id": "files",
           "isExpanded": true,
           "label": "Editors",
-          "secondaryLabel": <Blueprint3.ButtonGroup
+          "secondaryLabel": <Blueprint4.ButtonGroup
             minimal={true}
           >
-            <Blueprint3.Tooltip2
+            <Blueprint4.Tooltip2
               content="Add New File"
               hoverCloseDelay={0}
               hoverOpenDelay={1000}
               minimal={true}
+              placement="right"
               transitionDuration={100}
             >
-              <Blueprint3.Button
+              <Blueprint4.Button
                 icon="add"
                 onClick={[Function]}
                 small={true}
               />
-            </Blueprint3.Tooltip2>
-            <Blueprint3.Tooltip2
+            </Blueprint4.Tooltip2>
+            <Blueprint4.Tooltip2
               content="Reset Layout"
               hoverCloseDelay={0}
               hoverOpenDelay={1000}
               minimal={true}
+              placement="right"
               transitionDuration={100}
             >
-              <Blueprint3.Button
+              <Blueprint4.Button
                 icon="grid-view"
                 onClick={[Function]}
                 small={true}
               />
-            </Blueprint3.Tooltip2>
-          </Blueprint3.ButtonGroup>,
+            </Blueprint4.Tooltip2>
+          </Blueprint4.ButtonGroup>,
         },
       ]
     }
@@ -678,7 +712,7 @@ exports[`SidebarFileTree component renders 1`] = `
     }
   }
 >
-  <Blueprint3.Tree
+  <Blueprint4.Tree
     contents={
       Array [
         Object {
@@ -691,8 +725,9 @@ exports[`SidebarFileTree component renders 1`] = `
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -702,7 +737,8 @@ exports[`SidebarFileTree component renders 1`] = `
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="remove"
                       intent="danger"
@@ -712,30 +748,31 @@ exports[`SidebarFileTree component renders 1`] = `
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 index.html
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "hasCaret": false,
@@ -745,8 +782,9 @@ exports[`SidebarFileTree component renders 1`] = `
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -756,7 +794,8 @@ exports[`SidebarFileTree component renders 1`] = `
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={true}
                       icon="remove"
                       intent="danger"
@@ -766,30 +805,31 @@ exports[`SidebarFileTree component renders 1`] = `
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 main.js
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "hasCaret": false,
@@ -799,8 +839,9 @@ exports[`SidebarFileTree component renders 1`] = `
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -810,7 +851,8 @@ exports[`SidebarFileTree component renders 1`] = `
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="remove"
                       intent="danger"
@@ -820,30 +862,31 @@ exports[`SidebarFileTree component renders 1`] = `
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 preload.js
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "hasCaret": false,
@@ -853,8 +896,9 @@ exports[`SidebarFileTree component renders 1`] = `
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -864,7 +908,8 @@ exports[`SidebarFileTree component renders 1`] = `
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="remove"
                       intent="danger"
@@ -874,30 +919,31 @@ exports[`SidebarFileTree component renders 1`] = `
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 renderer.js
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
             Object {
               "hasCaret": false,
@@ -907,8 +953,9 @@ exports[`SidebarFileTree component renders 1`] = `
               "label": <Blueprint.ContextMenu2
                 className="pointer"
                 content={
-                  <Blueprint3.Menu>
-                    <Blueprint3.MenuItem
+                  <Blueprint4.Menu>
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="redo"
                       intent="primary"
@@ -918,7 +965,8 @@ exports[`SidebarFileTree component renders 1`] = `
                       shouldDismissPopover={true}
                       text="Rename"
                     />
-                    <Blueprint3.MenuItem
+                    <Blueprint4.MenuItem2
+                      active={false}
                       disabled={false}
                       icon="remove"
                       intent="danger"
@@ -928,30 +976,31 @@ exports[`SidebarFileTree component renders 1`] = `
                       shouldDismissPopover={true}
                       text="Delete"
                     />
-                  </Blueprint3.Menu>
+                  </Blueprint4.Menu>
                 }
                 onClick={[Function]}
               >
                 styles.css
               </Blueprint.ContextMenu2>,
-              "secondaryLabel": <Blueprint3.ButtonGroup>
-                <Blueprint3.Tooltip2
+              "secondaryLabel": <Blueprint4.ButtonGroup>
+                <Blueprint4.Tooltip2
                   content="Toggle Visibility"
                   hoverCloseDelay={0}
                   hoverOpenDelay={1000}
                   minimal={true}
+                  placement="right"
                   transitionDuration={100}
                 >
-                  <Blueprint3.Button
+                  <Blueprint4.Button
                     minimal={true}
                     onClick={[Function]}
                   >
-                    <Blueprint3.Icon
+                    <Blueprint4.Icon
                       icon="eye-open"
                     />
-                  </Blueprint3.Button>
-                </Blueprint3.Tooltip2>
-              </Blueprint3.ButtonGroup>,
+                  </Blueprint4.Button>
+                </Blueprint4.Tooltip2>
+              </Blueprint4.ButtonGroup>,
             },
           ],
           "hasCaret": false,
@@ -959,36 +1008,38 @@ exports[`SidebarFileTree component renders 1`] = `
           "id": "files",
           "isExpanded": true,
           "label": "Editors",
-          "secondaryLabel": <Blueprint3.ButtonGroup
+          "secondaryLabel": <Blueprint4.ButtonGroup
             minimal={true}
           >
-            <Blueprint3.Tooltip2
+            <Blueprint4.Tooltip2
               content="Add New File"
               hoverCloseDelay={0}
               hoverOpenDelay={1000}
               minimal={true}
+              placement="right"
               transitionDuration={100}
             >
-              <Blueprint3.Button
+              <Blueprint4.Button
                 icon="add"
                 onClick={[Function]}
                 small={true}
               />
-            </Blueprint3.Tooltip2>
-            <Blueprint3.Tooltip2
+            </Blueprint4.Tooltip2>
+            <Blueprint4.Tooltip2
               content="Reset Layout"
               hoverCloseDelay={0}
               hoverOpenDelay={1000}
               minimal={true}
+              placement="right"
               transitionDuration={100}
             >
-              <Blueprint3.Button
+              <Blueprint4.Button
                 icon="grid-view"
                 onClick={[Function]}
                 small={true}
               />
-            </Blueprint3.Tooltip2>
-          </Blueprint3.ButtonGroup>,
+            </Blueprint4.Tooltip2>
+          </Blueprint4.ButtonGroup>,
         },
       ]
     }
diff --git a/tests/renderer/components/__snapshots__/sidebar-package-manager-spec.tsx.snap b/tests/renderer/components/__snapshots__/sidebar-package-manager-spec.tsx.snap
index 7a3eff0128..c66782ec40 100644
--- a/tests/renderer/components/__snapshots__/sidebar-package-manager-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/sidebar-package-manager-spec.tsx.snap
@@ -20,7 +20,7 @@ exports[`SidebarPackageManager component renders 1`] = `
   <h5>
     Modules
   </h5>
-  <Blueprint3.Suggest
+  <Blueprint4.Suggest2
     closeOnSelect={true}
     fill={true}
     inputValueRenderer={[Function]}
@@ -36,7 +36,6 @@ exports[`SidebarPackageManager component renders 1`] = `
     openOnKeyDown={false}
     popoverProps={
       Object {
-        "fill": true,
         "minimal": true,
         "usePortal": false,
       }
@@ -44,7 +43,7 @@ exports[`SidebarPackageManager component renders 1`] = `
     resetOnClose={false}
     resetOnSelect={true}
   />
-  <Blueprint3.Tree
+  <Blueprint4.Tree
     contents={
       Array [
         Object {
@@ -57,7 +56,7 @@ exports[`SidebarPackageManager component renders 1`] = `
               onChange={[Function]}
               value="1.0.0"
             />
-            <Blueprint3.Button
+            <Blueprint4.Button
               icon="remove"
               minimal={true}
               onClick={[Function]}
diff --git a/tests/renderer/components/__snapshots__/tour-spec.tsx.snap b/tests/renderer/components/__snapshots__/tour-spec.tsx.snap
index bf010f4a1e..3b14821cfb 100644
--- a/tests/renderer/components/__snapshots__/tour-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/tour-spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`VersionChooser component renders 1`] = `
 <div
   className="tour"
 >
-  <Blueprint3.Dialog
+  <Blueprint4.Dialog
     backdropProps={
       Object {
         "style": Object {
@@ -28,16 +28,16 @@ exports[`VersionChooser component renders 1`] = `
     }
   >
     <div
-      className="bp3-dialog-header"
+      className="bp4-dialog-header"
     >
       <h4
-        className="bp3-heading"
+        className="bp4-heading"
       >
         Step 1
       </h4>
     </div>
     <div
-      className="bp3-dialog-body"
+      className="bp4-dialog-body"
     >
       <span
         key="1"
@@ -46,18 +46,18 @@ exports[`VersionChooser component renders 1`] = `
       </span>
     </div>
     <div
-      className="bp3-dialog-footer"
+      className="bp4-dialog-footer"
     >
       <div
-        className="bp3-dialog-footer-actions"
+        className="bp4-dialog-footer-actions"
       >
-        <Blueprint3.Button
+        <Blueprint4.Button
           icon="stop"
           key="btn-stop"
           onClick={[Function]}
           text="Stop Tour"
         />
-        <Blueprint3.Button
+        <Blueprint4.Button
           icon="step-forward"
           key="btn-adv"
           onClick={[Function]}
@@ -65,7 +65,7 @@ exports[`VersionChooser component renders 1`] = `
         />
       </div>
     </div>
-  </Blueprint3.Dialog>
+  </Blueprint4.Dialog>
   <svg
     height="100%"
     width="100%"
diff --git a/tests/renderer/components/__snapshots__/tour-welcome-spec.tsx.snap b/tests/renderer/components/__snapshots__/tour-welcome-spec.tsx.snap
index aa5f5cc979..cf071d48d9 100644
--- a/tests/renderer/components/__snapshots__/tour-welcome-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/tour-welcome-spec.tsx.snap
@@ -1,22 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header component renders 1`] = `
-<Blueprint3.Dialog
+<Blueprint4.Dialog
   canOutsideClickClose={true}
   isOpen={true}
   key="welcome-tour-dialog"
 >
   <div
-    className="bp3-dialog-header"
+    className="bp4-dialog-header"
   >
     <h4
-      className="bp3-heading"
+      className="bp4-heading"
     >
       🙋‍ Hey There!
     </h4>
   </div>
   <div
-    className="bp3-dialog-body"
+    className="bp4-dialog-body"
   >
     <p>
       Welcome to Electron Fiddle! If you're new to the app, we'd like to give you a brief tour of its features.
@@ -26,18 +26,18 @@ exports[`Header component renders 1`] = `
     </p>
   </div>
   <div
-    className="bp3-dialog-footer"
+    className="bp4-dialog-footer"
   >
     <div
-      className="bp3-dialog-footer-actions"
+      className="bp4-dialog-footer-actions"
     >
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="cross"
         key="cancel"
         onClick={[Function]}
         text="I'll figure it out"
       />
-      <Blueprint3.Button
+      <Blueprint4.Button
         icon="presentation"
         key="ok"
         onClick={[Function]}
@@ -45,7 +45,7 @@ exports[`Header component renders 1`] = `
       />
     </div>
   </div>
-</Blueprint3.Dialog>
+</Blueprint4.Dialog>
 `;
 
 exports[`Header component renders the tour once started 1`] = `
diff --git a/tests/renderer/components/__snapshots__/version-select-spec.tsx.snap b/tests/renderer/components/__snapshots__/version-select-spec.tsx.snap
index 5b7f74bdbe..bbe318c158 100644
--- a/tests/renderer/components/__snapshots__/version-select-spec.tsx.snap
+++ b/tests/renderer/components/__snapshots__/version-select-spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VersionSelect component renderItem() renders an item 1`] = `
-<Blueprint3.MenuItem
+<Blueprint4.MenuItem2
   active={true}
   disabled={false}
   icon="cloud"
@@ -19,68 +19,85 @@ exports[`VersionSelect component renderItem() renders an item 1`] = `
 `;
 
 exports[`VersionSelect component renders 1`] = `
-<Blueprint3.Select
-  disabled={false}
-  filterable={true}
-  itemListPredicate={[Function]}
-  itemListRenderer={[Function]}
-  itemRenderer={[Function]}
-  items={
-    Array [
-      Object {
-        "source": "remote",
-        "state": "installed",
-        "version": "2.0.3",
-      },
-      Object {
-        "source": "remote",
-        "state": "installed",
-        "version": "2.0.2",
-      },
-      Object {
-        "source": "remote",
-        "state": "installed",
-        "version": "2.0.1",
-      },
-      Object {
-        "source": "remote",
-        "state": "installed",
-        "version": "2.0.0",
-      },
-      Object {
-        "source": "remote",
-        "state": "installed",
-        "version": "1.8.7",
-      },
-      Object {
-        "source": "remote",
-        "state": "missing",
-        "version": "1.0.0",
-      },
-      Object {
-        "source": "remote",
-        "state": "missing",
-        "version": "3.0.0-unsupported",
-      },
-    ]
+<Blueprint.ContextMenu2
+  content={
+    <Blueprint4.Menu>
+      <Blueprint4.MenuItem2
+        active={false}
+        disabled={false}
+        multiline={false}
+        onClick={[Function]}
+        popoverProps={Object {}}
+        shouldDismissPopover={true}
+        text="Copy Version Number"
+      />
+    </Blueprint4.Menu>
   }
-  noResults={
-    <Blueprint3.MenuItem
-      disabled={true}
-      multiline={false}
-      popoverProps={Object {}}
-      shouldDismissPopover={true}
-      text="No results."
-    />
-  }
-  onItemSelect={[Function]}
+  disabled={false}
 >
-  <Blueprint3.Button
-    className="version-chooser"
+  <Blueprint4.Select2
     disabled={false}
-    icon="cloud"
-    onContextMenu={[Function]}
-    text="Electron v1.0.0"
-  />
-</Blueprint3.Select>
+    filterable={true}
+    itemListPredicate={[Function]}
+    itemListRenderer={[Function]}
+    itemRenderer={[Function]}
+    items={
+      Array [
+        Object {
+          "source": "remote",
+          "state": "installed",
+          "version": "2.0.3",
+        },
+        Object {
+          "source": "remote",
+          "state": "installed",
+          "version": "2.0.2",
+        },
+        Object {
+          "source": "remote",
+          "state": "installed",
+          "version": "2.0.1",
+        },
+        Object {
+          "source": "remote",
+          "state": "installed",
+          "version": "2.0.0",
+        },
+        Object {
+          "source": "remote",
+          "state": "installed",
+          "version": "1.8.7",
+        },
+        Object {
+          "source": "remote",
+          "state": "missing",
+          "version": "1.0.0",
+        },
+        Object {
+          "source": "remote",
+          "state": "missing",
+          "version": "3.0.0-unsupported",
+        },
+      ]
+    }
+    noResults={
+      <Blueprint4.MenuItem2
+        active={false}
+        disabled={true}
+        multiline={false}
+        popoverProps={Object {}}
+        shouldDismissPopover={true}
+        text="No results."
+      />
+    }
+    onItemSelect={[Function]}
+  >
+    <Blueprint4.Button
+      className="version-chooser"
+      disabled={false}
+      icon="cloud"
+      text="Electron v1.0.0"
+    />
+  </Blueprint4.Select2>
+</Blueprint.ContextMenu2>
 `;
diff --git a/tests/renderer/components/settings-electron-spec.tsx b/tests/renderer/components/settings-electron-spec.tsx
index 719d0d183e..fc42129398 100644
--- a/tests/renderer/components/settings-electron-spec.tsx
+++ b/tests/renderer/components/settings-electron-spec.tsx
@@ -83,7 +83,7 @@ describe('ElectronSettings component', () => {
     const wrapper = mount(<ElectronSettings appState={store as any} />);
 
     wrapper
-      .find('.electron-versions-table .bp3-button')
+      .find('.electron-versions-table .bp4-button')
       .first()
       .simulate('click');
 
@@ -103,7 +103,7 @@ describe('ElectronSettings component', () => {
     const wrapper = mount(<ElectronSettings appState={store as any} />);
 
     wrapper
-      .find('.electron-versions-table .bp3-button')
+      .find('.electron-versions-table .bp4-button')
       .first()
       .simulate('click');
 
@@ -123,7 +123,7 @@ describe('ElectronSettings component', () => {
     const wrapper = mount(<ElectronSettings appState={store as any} />);
 
     wrapper
-      .find('.electron-versions-table .bp3-button')
+      .find('.electron-versions-table .bp4-button')
       .first()
       .simulate('click');
 
diff --git a/tests/renderer/components/tour-spec.tsx b/tests/renderer/components/tour-spec.tsx
index 9715b7711f..2fef4a2ffe 100644
--- a/tests/renderer/components/tour-spec.tsx
+++ b/tests/renderer/components/tour-spec.tsx
@@ -76,7 +76,8 @@ describe('VersionChooser component', () => {
     const mockStop = jest.fn();
     const wrapper = mount(<Tour tour={singleItemTour} onStop={mockStop} />);
 
-    expect(wrapper.find('button').text()).toBe('tick-circleFinish Tour');
+    expect(wrapper.exists('.bp4-icon-tick-circle')).toBe(true);
+    expect(wrapper.find('button').text()).toBe('Finish Tour');
   });
 
   it('handles a missing target', () => {
diff --git a/yarn.lock b/yarn.lock
index 630f661409..9cbc5c1467 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -538,6 +538,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
+  integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.12.13", "@babel/template@^7.3.3":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
@@ -607,83 +614,59 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@blueprintjs/colors@^5.0.0-alpha.0":
-  version "5.0.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-5.0.0-alpha.0.tgz#406e67413a7f53a7587a1a621ae67b08ad701f0b"
-  integrity sha512-TsYKtsT7K+ok14GYWheBfkQxqMRGd6M3cnJ1Ge/nitNzIzmYiydKhOb7KBV0xnRNHlDKGuXSEdnsylAlRgSoIQ==
-
-"@blueprintjs/core@^3.36.0", "@blueprintjs/core@^3.44.2":
-  version "3.44.2"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-3.44.2.tgz#6b6502a7d26128ccf795b79a0c10aa6b9fd863f7"
-  integrity sha512-rxw0KU0Trdnf5HoILyWrEYpfubC1+VyfpbqcD4pG3iA79oGfo1q5x4S16YTeZpVXRm8VK3TBob4RDRXDd+/4PQ==
-  dependencies:
-    "@blueprintjs/icons" "^3.26.0"
-    "@types/dom4" "^2.0.1"
-    classnames "^2.2"
-    dom4 "^2.1.5"
-    normalize.css "^8.0.1"
-    popper.js "^1.16.1"
-    react-lifecycles-compat "^3.0.4"
-    react-popper "^1.3.7"
-    react-transition-group "^2.9.0"
-    resize-observer-polyfill "^1.5.1"
-    tslib "~1.13.0"
+"@blueprintjs/colors@^4.1.5":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-4.1.7.tgz#3ccac41eabc3245da20669e6aafafe6c0271d264"
+  integrity sha512-4qmwwNabzJ6TbdWLjfVFqoCz6OPZpPDV6xvSmnEnS6tWSQ+bepi/ybzx3kKOGtNk1lu0tFDU6tnVti7uz23XaQ==
 
-"@blueprintjs/core@^3.50.2":
-  version "3.50.2"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-3.50.2.tgz#052dfa67da717a935a038fee7472633230378139"
-  integrity sha512-y+J5yh34MoCFPgr7TlfRAY8xyFvZadoGbqhoMWdUWP+Nfhb6+Zu5wIchpC+2Z2Kw+eHH3W1ld39GYiPHOVnNWw==
+"@blueprintjs/core@^4.8.0":
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-4.8.0.tgz#a5acdb4ed60dfe91a6ce823d1f85660cb1824d41"
+  integrity sha512-dfs5i15V2eXwjW8dFblTcaFxqbQSUFP1Ua7WfyeraHwGix9IaEcNJDVxZoyyup2WJizeZ2FOnJ/ICKj0q1YC+w==
   dependencies:
-    "@blueprintjs/colors" "^5.0.0-alpha.0"
-    "@blueprintjs/icons" "^3.30.1"
+    "@blueprintjs/colors" "^4.1.5"
+    "@blueprintjs/icons" "^4.4.1"
+    "@juggle/resize-observer" "^3.3.1"
     "@types/dom4" "^2.0.1"
     classnames "^2.2"
     dom4 "^2.1.5"
     normalize.css "^8.0.1"
     popper.js "^1.16.1"
-    react-lifecycles-compat "^3.0.4"
     react-popper "^1.3.7"
-    react-transition-group "^2.9.0"
-    resize-observer-polyfill "^1.5.1"
-    tslib "~1.13.0"
-
-"@blueprintjs/icons@^3.26.0":
-  version "3.26.0"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-3.26.0.tgz#d3f0aa0d35a9ebe8648db9651af364dfcc529d9f"
-  integrity sha512-1+yhYH1Fjj5qGx8drZUL2L1R42MiN0WVHTTKYqGEV9TAzhvFHCSZgALD7WNQa+FEibw/8B4U+79IRgUPJNEjow==
-  dependencies:
-    classnames "^2.2"
-    tslib "~1.13.0"
+    react-transition-group "^4.4.1"
+    tslib "~2.3.1"
 
-"@blueprintjs/icons@^3.30.1":
-  version "3.30.1"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-3.30.1.tgz#9c4f404bf28fad57331918cc8cf9a7539ad54ee3"
-  integrity sha512-Y15u+B/+N51oLwOkZg5uQ5tkGCMLXfMhf2iRBIr6t3OBkCGoc9C61a7VeII5EDC8fjKlh9MewVbLuFIIEbUP8g==
+"@blueprintjs/icons@^4.4.1":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-4.7.0.tgz#cac09763d2de35f5f3cf6aa2b48980025852513e"
+  integrity sha512-PIr9g71MogZOOTj/qiaCny8JouIJwBNFe3Rsdzeqeqg0j8fYVHRHwA7jYPmvNo64fDPgj9hUtQ7vPU6I7TJiBw==
   dependencies:
-    classnames "^2.2"
-    tslib "~1.13.0"
+    change-case "^4.1.2"
+    classnames "^2.3.2"
+    tslib "~2.3.1"
 
-"@blueprintjs/popover2@^0.12.2":
-  version "0.12.2"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-0.12.2.tgz#eea1e01fa75edeb0681d355b10e94e56ae5f18cc"
-  integrity sha512-qBflN7/L4gW5R1tX590lDlK+3llUlGDwcECMle091EqbR/wHB6XEVaHTujMMzFnsGUghLkyI7tdNkZFj/ISs7g==
+"@blueprintjs/popover2@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-1.5.1.tgz#d9fb022bdde7d24345aff2a0b4fd8363dd202364"
+  integrity sha512-rVOA1NCkjUZFdvexqY/GQPyk0uDwjYdPkS8cViaFeXFCXeq8AVzF+EVthQtn3cJDdSFhyzhnyibzjbXsdvq/kg==
   dependencies:
-    "@blueprintjs/core" "^3.50.2"
+    "@blueprintjs/core" "^4.8.0"
+    "@juggle/resize-observer" "^3.3.1"
     "@popperjs/core" "^2.5.4"
     classnames "^2.2"
     dom4 "^2.1.5"
     react-popper "^2.2.4"
-    resize-observer-polyfill "^1.5.1"
-    tslib "~1.13.0"
+    tslib "~2.3.1"
 
-"@blueprintjs/select@^3.15.0":
-  version "3.16.2"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/select/-/select-3.16.2.tgz#ac09710ebef14381c1c25e393a7d5bce76119558"
-  integrity sha512-/wcQTVwQNqesmi7ag/BFjBMla64HkwyvPRfYK0INwaIW08itjoATflAvw5QYRqqk6FeZ/OwGUOwoKS8oe5goDg==
+"@blueprintjs/select@^4.5.3":
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/select/-/select-4.5.3.tgz#d4f4ce8e8194f3762c9030dd7264aa65a087ff06"
+  integrity sha512-CNshS5g+dY8Rk2ixO7UKWas95Afy69DE7TBF69KCjOpWYvr3J/wH9CUI4mRy/k66ZlGRrpJB65XcI7fyf6zjlw==
   dependencies:
-    "@blueprintjs/core" "^3.44.2"
+    "@blueprintjs/core" "^4.8.0"
+    "@blueprintjs/popover2" "^1.5.1"
     classnames "^2.2"
-    tslib "~1.13.0"
+    tslib "~2.3.1"
 
 "@electron-forge/async-ora@6.0.0-beta.64":
   version "6.0.0-beta.64"
@@ -1308,6 +1291,11 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@juggle/resize-observer@^3.3.1":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
+  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
+
 "@kwsites/file-exists@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@kwsites/file-exists/-/file-exists-1.1.1.tgz#ad1efcac13e1987d8dbaf235ef3be5b0d96faa99"
@@ -3406,6 +3394,15 @@ caniuse-lite@^1.0.30001332:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001334.tgz#892e9965b35285033fc2b8a8eff499fe02f13d8b"
   integrity sha512-kbaCEBRRVSoeNs74sCuq92MJyGrMtjWVfhltoHUCW4t4pXFvGjUBrfo47weBRViHkiV3eBYyIsfl956NtHGazw==
 
+capital-case@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
+  integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case-first "^2.0.2"
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -3436,6 +3433,24 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+change-case@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12"
+  integrity sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==
+  dependencies:
+    camel-case "^4.1.2"
+    capital-case "^1.0.4"
+    constant-case "^3.0.4"
+    dot-case "^3.0.4"
+    header-case "^2.0.4"
+    no-case "^3.0.4"
+    param-case "^3.0.4"
+    pascal-case "^3.1.2"
+    path-case "^3.0.4"
+    sentence-case "^3.0.4"
+    snake-case "^3.0.4"
+    tslib "^2.0.3"
+
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
@@ -3530,6 +3545,11 @@ classnames@*, classnames@^2.2, classnames@^2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
+classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-css@^5.2.2:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.0.tgz#ad3d8238d5f3549e83d5f87205189494bc7cbb59"
@@ -3772,6 +3792,15 @@ console-control-strings@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
   integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
 
+constant-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1"
+  integrity sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case "^2.0.2"
+
 contains-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
@@ -4292,12 +4321,13 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
-  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
 
 dom-serializer@0:
   version "0.2.2"
@@ -6177,6 +6207,14 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+header-case@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
+  integrity sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==
+  dependencies:
+    capital-case "^1.0.4"
+    tslib "^2.0.3"
+
 hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -8976,6 +9014,14 @@ pascal-case@^3.1.2:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
+path-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f"
+  integrity sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -9565,11 +9611,6 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-lifecycles-compat@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
-  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-
 react-mosaic-component@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/react-mosaic-component/-/react-mosaic-component-4.1.1.tgz#48a34e5e5c16654075212666c2aebeb488bab9f2"
@@ -9616,15 +9657,15 @@ react-test-renderer@^16.0.0-0:
     react-is "^16.8.6"
     scheduler "^0.19.1"
 
-react-transition-group@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
-  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+react-transition-group@^4.4.1:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
   dependencies:
-    dom-helpers "^3.4.0"
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
 
 react-window@^1.8.7:
   version "1.8.7"
@@ -9890,11 +9931,6 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-resize-observer-polyfill@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
-  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
-
 resolve-alpn@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
@@ -10196,6 +10232,15 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
+sentence-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f"
+  integrity sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case-first "^2.0.2"
+
 serialize-error@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-7.0.1.tgz#f1360b0447f61ffb483ec4157c737fab7d778e18"
@@ -10375,6 +10420,14 @@ smart-buffer@^4.2.0:
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
   integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
 
+snake-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
+  integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
@@ -11224,10 +11277,10 @@ tslib@^2.1.0, tslib@^2.2.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
   integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
 
-tslib@~1.13.0:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
-  integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
+tslib@~2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
 tsutils@^3.17.1:
   version "3.21.0"
@@ -11450,6 +11503,20 @@ update-electron-app@^2.0.1:
     is-url "^1.2.4"
     ms "^2.1.1"
 
+upper-case-first@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324"
+  integrity sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==
+  dependencies:
+    tslib "^2.0.3"
+
+upper-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-2.0.2.tgz#d89810823faab1df1549b7d97a76f8662bae6f7a"
+  integrity sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==
+  dependencies:
+    tslib "^2.0.3"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"