diff --git a/examples/app.tsx b/examples/app.tsx
index e0adf0983..4c23a67c5 100644
--- a/examples/app.tsx
+++ b/examples/app.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PureComponent } from 'react';
+import { PureComponent, ReactElement } from 'react';
 import {
   AppRoot,
   Button,
@@ -11,8 +11,10 @@ import {
   DabIpsum,
   Footer,
   FormGroup,
+  Highlight,
   InputGroup,
   InputGroupAddon,
+  ModalRenderer,
   NavBar,
   Row,
   Section,
@@ -20,6 +22,7 @@ import {
   SpacedGroup,
   SpeechBubble,
 } from '../src/ts';
+import ExampleModal from './modal';
 import NavItems from './nav-items';
 
 const X_CHAR = String.fromCharCode(215);
@@ -27,6 +30,8 @@ const MENU_CHAR = String.fromCharCode(9776);
 
 interface AppState {
   sidebarOpen: boolean;
+  highlightActive: boolean;
+  modals: ReadonlyArray<ReactElement<{}>>;
 }
 
 class App extends PureComponent<{}, AppState> {
@@ -35,6 +40,8 @@ class App extends PureComponent<{}, AppState> {
 
     this.state = {
       sidebarOpen: false,
+      highlightActive: false,
+      modals: [],
     };
   }
 
@@ -284,6 +291,31 @@ class App extends PureComponent<{}, AppState> {
               </Row>
             </Section>
           </ContentBox>
+
+          <ContentBox>
+            <Button
+              className="margin-vertical-large primary"
+              onClick={this.onClickOpenModal}
+            >
+              Open example modal
+            </Button>
+
+            <ModalRenderer modals={this.state.modals} />
+          </ContentBox>
+
+          <Highlight open={this.state.highlightActive}>
+            <ContentBox>
+              <Button
+                className="margin-vertical-large primary"
+                onClick={this.onClickToggleHighlight}
+              >
+                {this.state.highlightActive ? 'Un-highlight' : 'Highlight'}
+                {' this box'}
+              </Button>
+
+              <ModalRenderer modals={this.state.modals} />
+            </ContentBox>
+          </Highlight>
         </Container>
 
         <Footer fixed>
@@ -306,6 +338,38 @@ class App extends PureComponent<{}, AppState> {
       sidebarOpen: false,
     });
   };
+
+  private onClickToggleHighlight = () => {
+    this.setState(state => ({
+      ...state,
+      highlightActive: !state.highlightActive,
+    }));
+  };
+
+  private onClickOpenModal = () => {
+    this.setState(state => ({
+      ...state,
+      modals: [
+        ...state.modals,
+        <ExampleModal
+          key={state.modals.length}
+          onClickClose={this.onClickCloseModal}
+        />,
+      ],
+    }));
+  };
+
+  private onClickCloseModal = () => {
+    this.setState(state => {
+      const modalsCopy = [...state.modals];
+      modalsCopy.pop();
+
+      return {
+        ...state,
+        modals: modalsCopy,
+      };
+    });
+  };
 }
 
 export default App;
diff --git a/examples/modal.tsx b/examples/modal.tsx
new file mode 100644
index 000000000..f694724f1
--- /dev/null
+++ b/examples/modal.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { PureComponent } from 'react';
+
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseIcon,
+  ModalFooter,
+  ModalHeader,
+  SpacedGroup,
+} from '../src/ts';
+
+interface ExampleModalProps {
+  onClickClose: () => void;
+}
+
+export default class ExampleModal extends PureComponent<ExampleModalProps> {
+  public render() {
+    return (
+      <Modal onClickOutside={this.props.onClickClose}>
+        <ModalHeader>
+          <ModalCloseIcon />
+          <h1>Hello</h1>
+        </ModalHeader>
+        <ModalBody>
+          <p>I am a modal!</p>
+        </ModalBody>
+        <ModalFooter>
+          <SpacedGroup block className="margin-vertical-large">
+            <Button onClick={this.props.onClickClose}>Cancel</Button>
+            <Button onClick={this.props.onClickClose} className="primary">
+              Done
+            </Button>
+          </SpacedGroup>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index c844ea651..3e6639f76 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -128,6 +128,21 @@
       "dev": true,
       "optional": true
     },
+    "@babel/runtime": {
+      "version": "7.11.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+      "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        }
+      }
+    },
     "@babel/template": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.3.tgz",
@@ -410,9 +425,9 @@
       }
     },
     "@types/react-transition-group": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-1.1.4.tgz",
-      "integrity": "sha512-26y68Xre6w8DMbI8iv7xXAOZ3hX9GsFfwPHv9euEJUWpxJDP5oHcIbumpG1opL14PEGG1paG/5K+H20tfa2fUg==",
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.9.2.tgz",
+      "integrity": "sha512-5Fv2DQNO+GpdPZcxp2x/OQG/H19A01WlmpjVD9cKvVFmoVLOZ9LvBgSWG6pSXIU4og5fgbvGPaCV5+VGkWAEHA==",
       "requires": {
         "@types/react": "*"
       }
@@ -1979,7 +1994,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         }
       }
@@ -3919,11 +3935,6 @@
         "lazy-cache": "^1.0.3"
       }
     },
-    "chain-function": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz",
-      "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg=="
-    },
     "chalk": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
@@ -5234,9 +5245,12 @@
       }
     },
     "dom-helpers": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.3.1.tgz",
-      "integrity": "sha512-2Sm+JaYn74OiTM2wHvxJOo3roiq/h25Yi69Fqk269cNUwIXsCvATB6CRSFC9Am/20G2b28hGv/+7NiWydIrPvg=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
     },
     "dom-serializer": {
       "version": "0.1.0",
@@ -14793,8 +14807,7 @@
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
-      "dev": true
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "react-scripts-ts": {
       "version": "2.17.0",
@@ -16885,15 +16898,14 @@
       }
     },
     "react-transition-group": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",
-      "integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
       "requires": {
-        "chain-function": "^1.0.0",
-        "dom-helpers": "^3.2.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.5.6",
-        "warning": "^3.0.0"
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
       }
     },
     "read-only-stream": {
@@ -18273,7 +18285,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         }
       }
@@ -20892,6 +20905,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
       "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -21895,7 +21909,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         },
         "micromatch": {
diff --git a/package.json b/package.json
index 9a9635b02..6145c53b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "description": "A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
@@ -10,7 +10,7 @@
     "dist": "./scripts/dist",
     "prettier": "prettier --write '**/*.{ts,tsx,js,jsx,json,md}'",
     "prettier-check": "prettier --check '**/*.{ts,tsx,js,jsx,json,md}'",
-    "lint-js": "eslint ./*.js docs/**/*.js && tslint --project tsconfig.json '@(src|tests|types|docs)/**/*.@(ts|tsx)'",
+    "lint-js": "eslint ./*.js docs/**/*.js && tslint --project tsconfig.json '@(src|tests|types|docs|examples)/**/*.@(ts|tsx)'",
     "lint-less": "lesshint 'src/less/' 'docs/less/'",
     "lint": "npm run lint-js && npm run lint-less",
     "test-dist-react-16": "npm i @types/react@16.4.7 @types/react-dom@16.0.6 --no-save && tsc --project 'tsconfig.json' --noEmit && npm run dist",
@@ -52,14 +52,14 @@
     "@types/random-seed": "^0.3.2",
     "@types/react": ">= 15",
     "@types/react-dom": ">= 15",
-    "@types/react-transition-group": "^1.1.4",
+    "@types/react-transition-group": "^2.9.2",
     "classnames": "^2.2.5",
     "cookie": "^0.3.1",
     "normalize.css": "^8.0.1",
     "random-seed": "^0.3.0",
     "react": ">= 15",
     "react-dom": ">= 15",
-    "react-transition-group": "^1.2.1"
+    "react-transition-group": "^2.9.0"
   },
   "devDependencies": {
     "@types/enzyme": "^3.1.5",
@@ -107,7 +107,7 @@
     "normalize.css": "8",
     "react": ">= 15",
     "react-dom": ">= 15",
-    "react-transition-group": "1"
+    "react-transition-group": "2"
   },
   "jest": {
     "testURL": "http://localhost/",
diff --git a/src/less/highlight.less b/src/less/highlight.less
index 12da44e7a..65514a3f6 100644
--- a/src/less/highlight.less
+++ b/src/less/highlight.less
@@ -7,27 +7,40 @@
   }
 }
 
-.highlight-transition-enter.highlight-transition-enter-active,
-.highlight-transition-appear.highlight-transition-appear-active {
+.highlight-transition-enter-active,
+.highlight-transition-appear-active {
   &.highlight-overlay {
     opacity: 0.99;
     transition: opacity 0.3s ease-in;
   }
 }
 
-.highlight-transition-leave {
+.highlight-transition-enter-done,
+.highlight-transition-appear-done {
+  &.highlight-overlay {
+    opacity: 1;
+  }
+}
+
+.highlight-transition-exit {
   &.highlight-overlay {
     opacity: 0.99;
   }
 }
 
-.highlight-transition-leave.highlight-transition-leave-active {
+.highlight-transition-exit-active {
   &.highlight-overlay {
     opacity: 0.01;
     transition: opacity 0.2s ease-in;
   }
 }
 
+.highlight-transition-exit-done {
+  &.highlight-overlay {
+    opacity: 0;
+  }
+}
+
 /* @end Transition */
 
 .highlight {
diff --git a/src/less/modals.less b/src/less/modals.less
index b437261c9..d05297b17 100644
--- a/src/less/modals.less
+++ b/src/less/modals.less
@@ -11,8 +11,8 @@
   }
 }
 
-.modal-transition-enter.modal-transition-enter-active,
-.modal-transition-appear.modal-transition-appear-active {
+.modal-transition-enter-active,
+.modal-transition-appear-active {
   &.modal-container {
     opacity: 0.99;
     transition: opacity 0.3s ease-in;
@@ -24,7 +24,18 @@
   }
 }
 
-.modal-transition-leave {
+.modal-transition-enter-done,
+.modal-transition-appear-done {
+  &.modal-container {
+    opacity: 1;
+  }
+
+  .modal {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.modal-transition-exit {
   &.modal-container {
     opacity: 0.99;
   }
@@ -34,7 +45,7 @@
   }
 }
 
-.modal-transition-leave.modal-transition-leave-active {
+.modal-transition-exit-active {
   &.modal-container {
     opacity: 0.01;
     transition: opacity 0.2s ease-in;
@@ -46,6 +57,16 @@
   }
 }
 
+.modal-transition-exit-done {
+  &.modal-container {
+    opacity: 0;
+  }
+
+  .modal {
+    transform: translate3d(0, -50px, 0);
+  }
+}
+
 /* @end Transition */
 
 .modal-overlay,
diff --git a/src/less/side-bar.less b/src/less/side-bar.less
index fca806e20..dea612757 100644
--- a/src/less/side-bar.less
+++ b/src/less/side-bar.less
@@ -7,27 +7,40 @@
   }
 }
 
-.side-bar-transition-enter.side-bar-transition-enter-active,
-.side-bar-transition-appear.side-bar-transition-appear-active {
+.side-bar-transition-enter-active,
+.side-bar-transition-appear-active {
   &.side-bar-overlay {
     opacity: 0.99;
     transition: opacity 0.3s ease-in;
   }
 }
 
-.side-bar-transition-leave {
+.side-bar-transition-enter-done,
+.side-bar-transition-appear-done {
+  &.side-bar-overlay {
+    opacity: 1;
+  }
+}
+
+.side-bar-transition-exit {
   &.side-bar-overlay {
     opacity: 0.99;
   }
 }
 
-.side-bar-transition-leave.side-bar-transition-leave-active {
+.side-bar-transition-exit-active {
   &.side-bar-overlay {
     opacity: 0.01;
     transition: opacity 0.2s ease-in;
   }
 }
 
+.side-bar-transition-exit-done {
+  &.side-bar-overlay {
+    opacity: 0;
+  }
+}
+
 /* @end Transition */
 
 .side-bar-container {
diff --git a/src/ts/components/misc/highlight.tsx b/src/ts/components/misc/highlight.tsx
index f1b4ceb29..3fce7eb02 100644
--- a/src/ts/components/misc/highlight.tsx
+++ b/src/ts/components/misc/highlight.tsx
@@ -1,7 +1,7 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
 import { HTMLProps, PureComponent } from 'react';
-import * as CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { ComponentProps } from '../../types';
 
 export interface HighlightProps extends ComponentProps, HTMLProps<HTMLElement> {
@@ -22,6 +22,12 @@ export interface HighlightProps extends ComponentProps, HTMLProps<HTMLElement> {
   backgroundColor?: string | undefined;
 }
 
+const TIMEOUT = {
+  appear: 300,
+  enter: 300,
+  exit: 200,
+};
+
 /**
  * This highlight component is used to display a single element while shading everything else out.
  */
@@ -42,13 +48,13 @@ export class Highlight extends PureComponent<HighlightProps, {}> {
         {...remainingProps}
         className={classNames('highlight', className)}
       >
-        <CSSTransitionGroup
-          transitionName="highlight-transition"
-          transitionEnterTimeout={300}
-          transitionLeaveTimeout={200}
-        >
-          {open && <div className="highlight-overlay" />}
-        </CSSTransitionGroup>
+        <TransitionGroup>
+          {open && (
+            <CSSTransition classNames="highlight-transition" timeout={TIMEOUT}>
+              <div className="highlight-overlay" />
+            </CSSTransition>
+          )}
+        </TransitionGroup>
         <div
           className={classNames('highlight-content', open && 'open')}
           style={backgroundColor ? { backgroundColor } : undefined}
diff --git a/src/ts/components/modals/modal-renderer.tsx b/src/ts/components/modals/modal-renderer.tsx
index 747530f1e..2b25c2177 100644
--- a/src/ts/components/modals/modal-renderer.tsx
+++ b/src/ts/components/modals/modal-renderer.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HTMLProps, PureComponent } from 'react';
-import * as CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 export interface ModalRendererProps extends HTMLProps<HTMLElement> {
   /**
@@ -9,6 +9,12 @@ export interface ModalRendererProps extends HTMLProps<HTMLElement> {
   modals: ReadonlyArray<React.ReactNode>;
 }
 
+const TIMEOUT = {
+  appear: 300,
+  enter: 300,
+  exit: 200,
+};
+
 /**
  * Required to render modals.
  * Should be rendered in the root of your app.
@@ -19,18 +25,18 @@ export class ModalRenderer extends PureComponent<ModalRendererProps, {}> {
     const { modals } = this.props;
 
     return (
-      <CSSTransitionGroup
-        transitionName="modal-transition"
-        transitionEnterTimeout={300}
-        transitionLeaveTimeout={200}
-      >
+      <TransitionGroup>
         {modals &&
           modals.map((modal, index) => (
-            <div key={index} className="modal-container">
-              {modal}
-            </div>
+            <CSSTransition
+              key={index}
+              classNames="modal-transition"
+              timeout={TIMEOUT}
+            >
+              <div className="modal-container">{modal}</div>
+            </CSSTransition>
           ))}
-      </CSSTransitionGroup>
+      </TransitionGroup>
     );
   }
 }
diff --git a/src/ts/components/navigation/side-bar.tsx b/src/ts/components/navigation/side-bar.tsx
index 719867aba..37bef1ec0 100644
--- a/src/ts/components/navigation/side-bar.tsx
+++ b/src/ts/components/navigation/side-bar.tsx
@@ -1,7 +1,7 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
 import { HTMLProps, PureComponent } from 'react';
-import * as CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { ComponentProps } from '../../types';
 
 export interface SideBarProps extends HTMLProps<HTMLElement>, ComponentProps {
@@ -23,6 +23,12 @@ export interface SideBarProps extends HTMLProps<HTMLElement>, ComponentProps {
   onClickOutside(event: React.MouseEvent<HTMLDivElement>): void;
 }
 
+const TIMEOUT = {
+  appear: 300,
+  enter: 300,
+  exit: 200,
+};
+
 /**
  * SideBar navigation that opens over the content. Often used as the primary navigation on small devices.
  * See the [Nav](#nav) section for more details.
@@ -42,15 +48,13 @@ export class SideBar extends PureComponent<SideBarProps, {}> {
 
     return (
       <div className={classNames('side-bar-container', className)}>
-        <CSSTransitionGroup
-          transitionName="side-bar-transition"
-          transitionEnterTimeout={300}
-          transitionLeaveTimeout={200}
-        >
+        <TransitionGroup>
           {open && (
-            <div className="side-bar-overlay" onClick={onClickOutside} />
+            <CSSTransition classNames="side-bar-transition" timeout={TIMEOUT}>
+              <div className="side-bar-overlay" onClick={onClickOutside} />
+            </CSSTransition>
           )}
-        </CSSTransitionGroup>
+        </TransitionGroup>
         <Component
           {...remainingProps}
           className={classNames(
diff --git a/tests/__snapshots__/highlight.tsx.snap b/tests/__snapshots__/highlight.tsx.snap
index c6d21b08c..506dbf357 100644
--- a/tests/__snapshots__/highlight.tsx.snap
+++ b/tests/__snapshots__/highlight.tsx.snap
@@ -4,7 +4,7 @@ exports[`Highlight should match snapshot 1`] = `
 <div
   className="highlight"
 >
-  <span />
+  <div />
   <div
     className="highlight-content"
     style={undefined}
@@ -20,11 +20,11 @@ exports[`Highlight should match snapshot with props (open) 1`] = `
 <div
   className="highlight"
 >
-  <span>
+  <div>
     <div
       className="highlight-overlay"
     />
-  </span>
+  </div>
   <div
     className="highlight-content open"
     style={undefined}
@@ -40,11 +40,11 @@ exports[`Highlight should match snapshot with props (open, disabled, backgroundC
 <div
   className="highlight"
 >
-  <span>
+  <div>
     <div
       className="highlight-overlay"
     />
-  </span>
+  </div>
   <div
     className="highlight-content open"
     style={
diff --git a/tests/__snapshots__/modals.tsx.snap b/tests/__snapshots__/modals.tsx.snap
index 99624c82b..b6f11945e 100644
--- a/tests/__snapshots__/modals.tsx.snap
+++ b/tests/__snapshots__/modals.tsx.snap
@@ -160,7 +160,7 @@ exports[`ModalHeader should take regular element attributes 1`] = `
 `;
 
 exports[`ModalRenderer should render some modals 1`] = `
-<span>
+<div>
   <div
     className="modal-container"
   >
@@ -182,5 +182,5 @@ exports[`ModalRenderer should render some modals 1`] = `
       </div>
     </div>
   </div>
-</span>
+</div>
 `;
diff --git a/tests/__snapshots__/side-bar.tsx.snap b/tests/__snapshots__/side-bar.tsx.snap
index 5a044f412..362736b8d 100644
--- a/tests/__snapshots__/side-bar.tsx.snap
+++ b/tests/__snapshots__/side-bar.tsx.snap
@@ -4,7 +4,7 @@ exports[`SideBar should accept a component props 1`] = `
 <div
   className="side-bar-container"
 >
-  <span />
+  <div />
   <ul
     className="side-bar left"
   />
@@ -15,7 +15,7 @@ exports[`SideBar should accept regular element attributes 1`] = `
 <div
   className="side-bar-container my-class"
 >
-  <span />
+  <div />
   <div
     className="side-bar left"
   />
@@ -26,7 +26,7 @@ exports[`SideBar should apply no-shadow class 1`] = `
 <div
   className="side-bar-container"
 >
-  <span />
+  <div />
   <div
     className="side-bar no-shadow left"
   />
@@ -37,7 +37,7 @@ exports[`SideBar should match snapshot 1`] = `
 <div
   className="side-bar-container"
 >
-  <span />
+  <div />
   <div
     className="side-bar left"
   />
@@ -48,7 +48,7 @@ exports[`SideBar should match snapshot right 1`] = `
 <div
   className="side-bar-container"
 >
-  <span />
+  <div />
   <div
     className="side-bar right"
   />
@@ -59,12 +59,12 @@ exports[`SideBar should match snapshot when open 1`] = `
 <div
   className="side-bar-container"
 >
-  <span>
+  <div>
     <div
       className="side-bar-overlay"
       onClick={[MockFunction]}
     />
-  </span>
+  </div>
   <div
     className="side-bar left open"
   />