From 974cbc0115b18e8ccd6e9d552b5673b0406b0f88 Mon Sep 17 00:00:00 2001
From: Chris Garcia <pixelbandito@gmail.com>
Date: Fri, 19 Mar 2021 10:57:42 -0500
Subject: [PATCH] Tooltip alignment options, a11y improvements (#307)

* fix: Tooltip a11y improvements

* Fix some failing tests

* Add more tooltip alignment options, clean up hoverable area and transitions

* Remove debug logging from a test

* Removing jsdom 16 to keep compatibility with node 10
---
 package.json                                |   8 +-
 src/components/InputTime/InputTime.test.tsx | 105 +++---
 src/components/Media/Media.test.tsx         |  27 +-
 src/components/Tooltip/Tooltip.module.css   | 276 ++++++++++----
 src/components/Tooltip/Tooltip.test.tsx     |  57 ++-
 src/components/Tooltip/Tooltip.tsx          | 244 ++++++++----
 src/components/Tooltip/story.tsx            | 155 ++++----
 yarn.lock                                   | 395 ++++++++++----------
 8 files changed, 763 insertions(+), 504 deletions(-)

diff --git a/package.json b/package.json
index 7eac2bce..521002d9 100644
--- a/package.json
+++ b/package.json
@@ -88,10 +88,10 @@
     "@storybook/addons": "^5.3.19",
     "@storybook/preset-create-react-app": "^3.0.0",
     "@storybook/react": "^5.3.19",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/react": "^10.2.1",
-    "@testing-library/react-hooks": "^3.3.0",
-    "@testing-library/user-event": "^12.0.7",
+    "@testing-library/jest-dom": "5.11.9",
+    "@testing-library/react": "11.2.5",
+    "@testing-library/react-hooks": "5.1.0",
+    "@testing-library/user-event": "13.0.2",
     "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.1.4",
diff --git a/src/components/InputTime/InputTime.test.tsx b/src/components/InputTime/InputTime.test.tsx
index b17e9b26..becdf654 100644
--- a/src/components/InputTime/InputTime.test.tsx
+++ b/src/components/InputTime/InputTime.test.tsx
@@ -83,7 +83,7 @@ describe('InputTime', () => {
       expect(baseInput.validationMessage).toBeFalsy();
     });
 
-    // it.only('validates values against step + min if present', async () => {
+    // it('validates values against step + min if present', async () => {
     //   // const { debug, getByTestId, rerender } = render(
     //   //   <InputTime
     //   //     data-testid="InputTime test"
@@ -393,56 +393,59 @@ describe('InputTime', () => {
     });
 
     describe('validation', () => {
-      it('validates `value` against same day `min` and `max`', () => {
-        const { getByLabelText, rerender } = render(
-          <InputTime
-            fuzzyInputProps={{ 'aria-label': 'time input' }}
-            max="2020-06-29T20:00:00.000Z"
-            min="2020-06-29T10:00:00.000Z"
-            value="2020-06-29T20:00:00.000Z"
-          />
-        );
-
-        // Equals `max`
-        const baseInputTime = getByLabelText('time input') as HTMLInputElement;
-        expect(baseInputTime.validationMessage).toBeFalsy();
-
-        // Equals `min`
-        rerender(
-          <InputTime
-            min="2020-06-29T10:00:00.000Z"
-            value="2020-06-29T10:00:00.000Z"
-          />
-        );
-        expect(baseInputTime.validationMessage).toBeFalsy();
-
-        // Outside `max`
-        rerender(
-          <InputTime
-            max="2020-06-29T20:00:00.000Z"
-            value="2020-06-29T20:01:00.000Z"
-          />
-        );
-        expect(baseInputTime.validationMessage).toBeTruthy();
-
-        // Outside `min`
-        rerender(
-          <InputTime
-            min="2020-06-29T10:00:00.000Z"
-            value="2020-06-29T09:59:00.000Z"
-          />
-        );
-        expect(baseInputTime.validationMessage).toBeTruthy();
-
-        // Impossible
-        rerender(
-          <InputTime
-            max="2020-06-29T09:59:00.000Z"
-            min="2020-06-29T10:00:00.000Z"
-            value="2020-06-29T09:59:00.000Z"
-          />
-        );
-        expect(baseInputTime.validationMessage).toBeTruthy();
+      describe('validates `value` against same day `min` and `max`', () => {
+        const defaultProps = {
+          fuzzyInputProps: { 'aria-label': 'time input' },
+          max: '2020-06-29T20:00:00.000Z',
+          min: '2020-06-29T10:00:00.000Z',
+          value: '2020-06-29T20:00:00.000Z',
+        };
+
+        it('passes when value === max', () => {
+          const { getByLabelText } = render(<InputTime {...defaultProps} />);
+
+          const baseInputTime = getByLabelText(
+            'time input'
+          ) as HTMLInputElement;
+
+          expect(baseInputTime.validationMessage).toBeFalsy();
+        });
+
+        it('passes when value === min', () => {
+          const { getByLabelText } = render(
+            <InputTime {...defaultProps} value="2020-06-29T10:00:00.000Z" />
+          );
+
+          const baseInputTime = getByLabelText(
+            'time input'
+          ) as HTMLInputElement;
+
+          expect(baseInputTime.validationMessage).toBeFalsy();
+        });
+
+        it('fails when value > max', () => {
+          const { getByLabelText } = render(
+            <InputTime {...defaultProps} value="2020-06-29T20:01:00.000Z" />
+          );
+
+          const baseInputTime = getByLabelText(
+            'time input'
+          ) as HTMLInputElement;
+
+          expect(baseInputTime.validationMessage).toBeTruthy();
+        });
+
+        it('fails when value < min', () => {
+          const { getByLabelText } = render(
+            <InputTime {...defaultProps} value="2020-06-29T09:59:00.000Z" />
+          );
+
+          const baseInputTime = getByLabelText(
+            'time input'
+          ) as HTMLInputElement;
+
+          expect(baseInputTime.validationMessage).toBeTruthy();
+        });
       });
 
       it('disables when `min` or `max` make all selections impossible', () => {
diff --git a/src/components/Media/Media.test.tsx b/src/components/Media/Media.test.tsx
index 25614ac8..af41d28e 100644
--- a/src/components/Media/Media.test.tsx
+++ b/src/components/Media/Media.test.tsx
@@ -1,4 +1,7 @@
 import React, { useState } from 'react';
+
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { mount } from 'enzyme';
 
 import Media from '.';
@@ -12,9 +15,9 @@ const TestWrapper = () => {
 
   return (
     <Media>
-      <Media.Body id="media-body">
+      <Media.Body>
         <input
-          id="input-test"
+          data-testid="input-test"
           type="text"
           value={val}
           onChange={handleOnChange}
@@ -24,25 +27,17 @@ const TestWrapper = () => {
   );
 };
 
-type OverrideInstanceFocus = {
-  instance: () => {
-    focus: () => void;
-  };
-};
-
 describe('Media', () => {
   describe('Media.Item', () => {
     it('will not re-render everything unnecessarily', () => {
-      const wrapper = mount(<TestWrapper />);
-      const input = wrapper.find('input#input-test');
-
-      // TypeScript _really_ doesn't think `focus` exists.
-      ((input as unknown) as OverrideInstanceFocus).instance().focus();
+      const { getByTestId } = render(<TestWrapper />);
+      const input = getByTestId('input-test') as HTMLInputElement;
 
-      input.simulate('change', { target: { value: 'h' } });
-      input.simulate('change', { target: { value: 'he' } });
+      userEvent.tab();
+      userEvent.type(input, 'h');
+      userEvent.type(input, 'e');
 
-      expect(wrapper.find('#input-test').is(':focus')).toBe(true);
+      expect(document.activeElement).toEqual(input);
     });
 
     it('renders its children', () => {
diff --git a/src/components/Tooltip/Tooltip.module.css b/src/components/Tooltip/Tooltip.module.css
index 26179018..0e073e58 100644
--- a/src/components/Tooltip/Tooltip.module.css
+++ b/src/components/Tooltip/Tooltip.module.css
@@ -1,12 +1,59 @@
+/* Wraps tooltip and trigger */
 .wrapper {
   position: relative;
   display: inline-block;
 }
 
+/* Wraps trigger */
 .original {
   position: relative;
 }
 
+/* Wraps Tooltip and arrow */
+.fade {
+  transition-property: opacity;
+  transition-timing-function: ease;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--rvr-tooltip-base-z-index);
+}
+
+.fade.main-bottom {
+  top: 100%;
+}
+
+.fade.main-top {
+  bottom: 100%;
+}
+
+.fade.main-left {
+  right: 100%;
+}
+
+.fade.main-right {
+  left: 100%;
+}
+
+.fadeEnter {
+  opacity: 0;
+}
+
+.fadeEnterActive {
+  opacity: 1;
+}
+
+.fadeExit {
+  opacity: 1;
+}
+
+.fadeExitActive {
+  opacity: 0;
+}
+
+/* Main Tooltip */
 .Tooltip {
   backface-visibility: hidden;
   border-radius: var(--rvr-tooltip-border-radius);
@@ -15,54 +62,109 @@
   font-family: var(--rvr-base-font-family);
   font-size: 14px;
   position: absolute;
-
-  /* transform: translate3d(0, 0, 0); */
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  will-change: opacity, transform;
   max-width: 100vw;
   z-index: var(--rvr-tooltip-base-z-index);
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
 }
 
-.open {
-  opacity: 1;
-  pointer-events: all;
-  visibility: visible;
+.fade.main-bottom .Tooltip,
+.fade.main-top .Tooltip {
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.tooltipInnerWrapper {
-  background: var(--rvr-white);
-  border-radius: var(--rvr-tooltip-border-radius);
-  padding: 8px;
-  position: relative;
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
+.fade.main-bottom .Tooltip {
+  top: calc(100% + var(--rvr-tooltip-offset) - 1px);
 }
 
-.textContent {
-  text-align: center;
-  white-space: nowrap;
-  word-wrap: none;
+.fade.main-top .Tooltip {
+  bottom: calc(100% + var(--rvr-tooltip-offset) - 1px);
 }
 
-.tooltipClose {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--rvr-gray-lite-2);
-  margin: 5px;
-  padding: 0;
+.fade.main-left .Tooltip,
+.fade.main-right .Tooltip {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.fade.main-left .Tooltip {
+  right: calc(100% + var(--rvr-tooltip-offset) - 1px);
+}
+
+.fade.main-right .Tooltip {
+  left: calc(100% + var(--rvr-tooltip-offset) - 1px);
+}
+
+.fade.secondary-left .Tooltip,
+.fade.secondary-right .Tooltip {
+  left: auto;
+  right: auto;
+  transform: translateX(0);
+  margin-top: 0;
+}
+
+.fade.secondary-left .Tooltip {
+  right: 0;
+}
+
+.fade.secondary-right .Tooltip {
+  left: 0;
+}
+
+.fade.secondary-top .Tooltip,
+.fade.secondary-bottom .Tooltip {
+  top: auto;
+  bottom: auto;
+  transform: translateY(0);
+  margin-bottom: 0;
+}
+
+.fade.secondary-top .Tooltip {
+  bottom: 0;
+}
+
+.fade.secondary-bottom .Tooltip {
+  top: 0;
+}
+
+/* Tooltip arrow */
+.fade.main-top .arrow,
+.fade.main-bottom .arrow {
   position: absolute;
-  right: 5px;
-  top: 5px;
-  z-index: 51;
+  left: 0;
+  right: 0;
+  height: var(--rvr-tooltip-offset);
+  bottom: auto;
+  top: auto;
+}
+
+.fade.main-top .arrow {
+  bottom: 100%;
+}
+
+.fade.main-bottom .arrow {
+  top: 100%;
+}
+
+.fade.main-left .arrow,
+.fade.main-right .arrow {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--rvr-tooltip-offset);
+  right: auto;
+  left: auto;
+}
+
+.fade.main-left .arrow {
+  right: 100%;
 }
 
-.Tooltip::before,
-.Tooltip::after {
+.fade.main-right .arrow {
+  left: 100%;
+}
+
+.arrow::before,
+.arrow::after {
   pointer-events: none;
   border: solid transparent;
   content: '';
@@ -71,7 +173,7 @@
   position: absolute;
 }
 
-.Tooltip::before {
+.arrow::before {
   border-color: transparent;
   border-width:
     calc(
@@ -81,93 +183,101 @@
   z-index: -1;
 }
 
-.Tooltip::after {
+.arrow::after {
   border-color: transparent;
   border-width: var(--rvr-tooltip-arrow-size);
-  z-index: 2;
+  z-index: calc(var(--rvr-tooltip-base-z-index) + 1);
 }
 
-.Tooltip.bottom {
-  left: 50%;
-  top: calc(100% + var(--rvr-tooltip-offset));
-  transform: translateX(-50%);
-}
-
-.Tooltip.bottom::before,
-.Tooltip.bottom::after {
-  bottom: 100%;
+.fade.main-bottom .arrow::before,
+.fade.main-bottom .arrow::after {
+  bottom: 0;
   left: 50%;
   margin-left: calc(var(--rvr-tooltip-arrow-size) * -1);
 }
 
-.Tooltip.bottom::before {
+.fade.main-bottom .arrow::before {
   border-bottom-color: rgba(0, 0, 0, 0.1);
   transform: translateX(-10%);
 }
 
-.Tooltip.bottom::after {
+.fade.main-bottom .arrow::after {
   border-bottom-color: var(--rvr-white);
 }
 
-.Tooltip.top {
-  left: 50%;
-  bottom: calc(100% + var(--rvr-tooltip-offset));
-  transform: translateX(-50%);
-}
-
-.Tooltip.top::before,
-.Tooltip.top::after {
-  top: 100%;
+.fade.main-top .arrow::before,
+.fade.main-top .arrow::after {
+  top: 0;
   left: 50%;
   margin-left: calc(var(--rvr-tooltip-arrow-size) * -1);
 }
 
-.Tooltip.top::before {
-  border-top-color: rgba(0, 0, 0, 0.1);
+.fade.main-top .arrow::before {
+  border-top-color: rgba(0, 0, 0, 0.2);
 }
 
-.Tooltip.top::after {
+.fade.main-top .arrow::after {
   border-top-color: var(--rvr-white);
 }
 
-.Tooltip.left {
-  top: 50%;
-  right: calc(100% + var(--rvr-tooltip-offset));
-}
-
-.Tooltip.left::before,
-.Tooltip.left::after {
+.fade.main-left .arrow::before,
+.fade.main-left .arrow::after {
   top: 50%;
-  left: 100%;
+  left: 0;
   margin-left: calc(var(--rvr-tooltip-arrow-size));
   transform: translate(calc(var(--rvr-tooltip-arrow-size) * -1), -48%);
 }
 
-.Tooltip.left::before {
-  border-left-color: rgba(0, 0, 0, 0.1);
+.fade.main-left .arrow::before {
+  border-left-color: rgba(0, 0, 0, 0.2);
 }
 
-.Tooltip.left::after {
+.fade.main-left .arrow::after {
   border-left-color: var(--rvr-white);
 }
 
-.Tooltip.right {
+.fade.main-right .arrow::before,
+.fade.main-right .arrow::after {
   top: 50%;
-  left: calc(100% + var(--rvr-tooltip-offset));
-}
-
-.Tooltip.right::before,
-.Tooltip.right::after {
-  top: 50%;
-  right: 100%;
+  right: 0;
   margin-right: calc(var(--rvr-tooltip-arrow-size));
   transform: translate(var(--rvr-tooltip-arrow-size), -50%);
 }
 
-.Tooltip.right::before {
-  border-right-color: rgba(0, 0, 0, 0.1);
+.fade.main-right .arrow::before {
+  border-right-color: rgba(0, 0, 0, 0.2);
 }
 
-.Tooltip.right::after {
+.fade.main-right .arrow::after {
   border-right-color: var(--rvr-white);
 }
+
+/* Tooltip children */
+.tooltipInnerWrapper {
+  background: var(--rvr-white);
+  border-radius: var(--rvr-tooltip-border-radius);
+  padding: 8px;
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
+
+.textContent {
+  text-align: center;
+  white-space: nowrap;
+  word-wrap: none;
+}
+
+.tooltipClose {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--rvr-gray-lite-2);
+  margin: 5px;
+  padding: 0;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  z-index: 51;
+}
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index 3e71d727..405d48a0 100644
--- a/src/components/Tooltip/Tooltip.test.tsx
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -1,10 +1,63 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import '@testing-library/jest-dom';
 
 import Tooltip from '.';
 
 describe('Tooltip', () => {
   it('renders', () => {
-    shallow(<Tooltip>Boom</Tooltip>);
+    render(
+      <Tooltip content={<button type="button">Foo</button>}>Boom</Tooltip>
+    );
+  });
+
+  describe('when open state is fully controlled', () => {});
+
+  describe('when props.showOnHover', () => {
+    describe('is false', () => {
+      it('hover and focus have no effect on open state', () => {
+        const { getByTestId, queryByText } = render(
+          <Tooltip
+            isOpen={false}
+            showOnHover={false}
+            content={<button type="button">Foo</button>}
+          >
+            <span data-testid="toggleButton">Boom</span>
+          </Tooltip>
+        );
+
+        const toggleButton = getByTestId('toggleButton');
+        userEvent.hover(toggleButton);
+
+        expect(queryByText('Foo')).toEqual(null);
+      });
+    });
+
+    describe('is true', () => {
+      it('hovering opens the tooltip', () => {
+        const { getByTestId, getByText } = render(
+          <Tooltip showOnHover content={<div>Foo</div>}>
+            <span data-testid="toggleButton">Boom</span>
+          </Tooltip>
+        );
+
+        userEvent.hover(getByTestId('toggleButton'));
+        expect(getByText('Foo'));
+      });
+
+      it('focusing opens the tooltip', () => {
+        const { getByText } = render(
+          <Tooltip showOnHover content={<button type="button">Foo</button>}>
+            <span data-testid="toggleButton">Boom</span>
+          </Tooltip>
+        );
+
+        userEvent.tab();
+        expect(getByText('Foo'));
+      });
+    });
   });
 });
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 8be893df..a708c17c 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -1,85 +1,104 @@
 import React, {
+  useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
-  useLayoutEffect,
 } from 'react';
-import classNames from 'classnames';
 
-import styles from './Tooltip.module.css';
+import classNames from 'classnames';
+import { CSSTransition } from 'react-transition-group';
 
 import Icon from '../Icon';
 
-export type TooltipDirection = 'top' | 'left' | 'right' | 'bottom';
-export const directions: TooltipDirection[] = [
-  'top',
+import styles from './Tooltip.module.css';
+
+export const directions = [
+  'bottom-left',
+  'bottom-right',
+  'bottom',
+  'left-bottom',
+  'left-top',
   'left',
+  'right-bottom',
+  'right-top',
   'right',
-  'bottom',
-];
+  'top-left',
+  'top-right',
+  'top',
+] as const;
+
+// Turn array of strings into a union type
+export type TooltipDirection = typeof directions[number];
 
 interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+  closeButtonProps?: React.HTMLAttributes<HTMLButtonElement>;
   closeOnEscape?: boolean;
   content?: React.ReactNode;
   direction?: TooltipDirection;
   isOpen?: boolean;
-  tooltipProps?: React.HTMLAttributes<HTMLDivElement>;
-  tooltipWidth?: string;
   onClose?: () => void;
   showOnHover?: boolean;
+  tooltipProps?: React.HTMLAttributes<HTMLDivElement>;
+  tooltipWidth?: string;
 }
 
+const transitionDuration = 300;
+
 const Tooltip: React.FC<TooltipProps> = ({
   children,
   className = '',
+  closeButtonProps = {},
   closeOnEscape = true,
   content: tooltipContent = null,
   direction = 'top',
-  isOpen = false,
+  isOpen: controlledIsOpen = false,
   onClose = null,
   showOnHover = false,
   tooltipProps: tooltipOptsProp = {},
   tooltipWidth = null,
   ...rest
 }) => {
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(false);
+  const isControlled = !showOnHover;
+  const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;
+
   const [tooltipId] = useState(
     `tooltip-${Date.now() * Math.floor(100 * Math.random())}`
   );
+
   const tooltipRef = useRef<HTMLDivElement>(null);
+  const tooltipWrapperRef = useRef<HTMLDivElement>(null);
 
-  const [hovered, setHovered] = useState(false);
-  const [tooltipHeight, setTooltipHeight] = useState(0);
+  const [isTooltipWiderThanParent, setIsTooltipWiderThanParent] = useState(
+    true
+  );
 
-  const handleSetHover = (value) => () => {
-    if (showOnHover) {
-      setHovered(value);
-    }
-  };
+  const handleSetHover = useCallback(
+    (value: boolean) => {
+      if (!isControlled) {
+        setUncontrolledIsOpen(value);
+      }
+    },
+    [isControlled, setUncontrolledIsOpen]
+  );
 
   useEffect(() => {
-    const handleEscape = (e) => {
-      if (onClose && e.key === 'Escape') {
-        onClose();
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (!isControlled) {
+          setUncontrolledIsOpen(false);
+        }
+
+        if (onClose) onClose();
       }
     };
 
-    if (closeOnEscape) {
-      document.addEventListener('keydown', handleEscape);
+    document.addEventListener('keydown', handleEscape);
 
-      return () => {
-        document.removeEventListener('keydown', handleEscape);
-      };
-    }
-
-    return () => {};
-  }, [closeOnEscape, onClose]);
-
-  useLayoutEffect(() => {
-    if (tooltipRef.current) {
-      setTooltipHeight(tooltipRef.current.offsetHeight);
-    }
-  }, []); // empty deps ensure this only gets called once
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [closeOnEscape, isControlled, onClose]);
 
   const {
     style: tooltipStyle,
@@ -87,79 +106,138 @@ const Tooltip: React.FC<TooltipProps> = ({
     ...tooltipOpts
   } = tooltipOptsProp;
 
-  const tooltipClassNames = classNames(
-    styles.Tooltip,
-    styles[direction],
-    tooltipClassName,
-    {
-      [styles.open]: isOpen || hovered,
-    }
-  );
+  const [mainDirection, secondaryDirection] = useMemo(() => {
+    const parsedDirection = direction.split('-');
+    let [, secondary] = parsedDirection;
 
-  const offsets = useMemo(() => {
-    // Properly center tooltips on the left and right to the center
-    // of the actual element we are attaching the tooltip.
-    if (direction === 'left' || direction === 'right') {
-      return {
-        marginTop: -(tooltipHeight / 2),
-      };
+    if (
+      ['left', 'right'].indexOf(secondary) >= 0 &&
+      !isTooltipWiderThanParent
+    ) {
+      secondary = '';
     }
 
-    return {};
-  }, [direction, tooltipHeight]);
+    return [parsedDirection[0], secondary];
+  }, [direction, isTooltipWiderThanParent]);
+
+  const directionClassNames = classNames(styles[`main-${mainDirection}`], {
+    [styles[`secondary-${secondaryDirection}`]]: secondaryDirection,
+  });
+
+  const tooltipClassNames = classNames(styles.Tooltip, tooltipClassName);
 
   const isText = typeof tooltipContent === 'string';
 
   const tooltipWrapperProps = {
     style: {
       width: (tooltipStyle && tooltipStyle.width) || tooltipWidth,
-      ...offsets,
     } as React.CSSProperties,
     className: tooltipClassNames,
   };
 
+  useLayoutEffect(() => {
+    if (isOpen && tooltipRef.current && tooltipWrapperRef.current) {
+      setIsTooltipWiderThanParent(
+        tooltipRef.current.offsetWidth > tooltipWrapperRef.current.offsetWidth
+      );
+    }
+  }, [isOpen]);
+
   const TooltipContent = tooltipContent && (
-    <div
-      id={tooltipId}
-      aria-hidden={isOpen}
-      ref={tooltipRef}
-      {...tooltipWrapperProps}
-    >
+    <div style={{ transitionDuration: `${transitionDuration / 1000}s` }}>
+      <div className={styles.arrow} />
       <div
-        style={tooltipStyle}
-        className={styles.tooltipInnerWrapper}
-        {...tooltipOpts}
+        id={tooltipId}
+        aria-hidden={!isOpen}
+        ref={tooltipRef}
+        role="tooltip"
+        {...tooltipWrapperProps}
       >
-        {!!onClose && (
-          <button
-            type="button"
-            className={styles.tooltipClose}
-            onClick={onClose}
-          >
-            <Icon name="close" />
-          </button>
-        )}
-
-        {isText ? (
-          <div className={styles.textContent}>{tooltipContent}</div>
-        ) : (
-          tooltipContent
-        )}
+        <div
+          style={tooltipStyle}
+          className={styles.tooltipInnerWrapper}
+          {...tooltipOpts}
+        >
+          {!!onClose && (
+            <button
+              type="button"
+              className={styles.tooltipClose}
+              onClick={onClose}
+              aria-label="Close"
+              {...closeButtonProps}
+            >
+              <Icon name="close" />
+            </button>
+          )}
+
+          {isText ? (
+            <div className={styles.textContent}>{tooltipContent}</div>
+          ) : (
+            tooltipContent
+          )}
+        </div>
       </div>
     </div>
   );
 
+  const noop = () => {};
+
+  const tooltipTriggerProps = {
+    onClick: noop,
+    onKeyPress: noop,
+    role: 'button',
+    tabIndex: 0,
+  };
+
+  const tooltipTriggers = React.Children.map(children, (child) => {
+    if (typeof child === 'string') {
+      return <span {...tooltipTriggerProps}>{child}</span>;
+    }
+
+    const childEl = React.isValidElement(child)
+      ? (child as React.ReactElement)
+      : null;
+
+    if (childEl) {
+      return React.cloneElement(childEl, {
+        ...tooltipTriggerProps,
+        ...childEl?.props,
+      });
+    }
+
+    return null;
+  });
+
   return (
-    <div className={styles.wrapper} {...rest}>
-      {TooltipContent}
+    <div
+      className={styles.wrapper}
+      onBlur={() => handleSetHover(false)}
+      onFocus={() => handleSetHover(true)}
+      onMouseLeave={() => handleSetHover(false)}
+      onMouseEnter={() => handleSetHover(true)}
+      ref={tooltipWrapperRef}
+      {...rest}
+    >
       <div
         aria-describedby={tooltipId}
-        onMouseEnter={handleSetHover(true)}
-        onMouseLeave={handleSetHover(false)}
         className={classNames(className, styles.original)}
       >
-        {children}
+        {tooltipTriggers}
       </div>
+      <CSSTransition
+        className={classNames(styles.fade, directionClassNames)}
+        classNames={{
+          enter: styles.fadeEnter,
+          enterActive: styles.fadeEnterActive,
+          exit: styles.fadeExit,
+          exitActive: styles.fadeExitActive,
+        }}
+        in={isOpen}
+        timeout={transitionDuration}
+        unmountOnExit
+      >
+        {TooltipContent}
+      </CSSTransition>
     </div>
   );
 };
diff --git a/src/components/Tooltip/story.tsx b/src/components/Tooltip/story.tsx
index e934d069..249ff6fe 100644
--- a/src/components/Tooltip/story.tsx
+++ b/src/components/Tooltip/story.tsx
@@ -2,18 +2,10 @@
 import React, { Fragment, useState } from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import {
-  boolean,
-  number,
-  optionsKnob as options,
-  text,
-} from '@storybook/addon-knobs';
-
-import Tooltip, {
-  EasyRichTooltip,
-  directions,
-  TooltipDirection,
-} from './Tooltip';
+import { boolean, number, select, text } from '@storybook/addon-knobs';
+
+import Tooltip, { EasyRichTooltip, directions } from './Tooltip';
+
 import Button from '../Button';
 import Readme from './README.md';
 
@@ -62,74 +54,62 @@ const Element: React.FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
   <div className="mr-5" {...props} />
 );
 
-const Overview = () => {
-  const [open, setOpen] = useState(false);
-
-  const toggle = () => {
-    setOpen((prev) => !prev);
-  };
-
-  const direction = options(
-    'Direction',
-    directions.reduce<Record<string, TooltipDirection>>((acc, val) => {
-      acc[val] = val;
-      return acc;
-    }, {}),
-    directions[0],
-    {
-      display: 'inline-radio',
+storiesOf('Planets/Tooltip', module)
+  .addParameters({
+    readme: {
+      sidebar: Readme,
     },
-    'all'
-  );
-  const textHover = boolean('Show on hover', true, 'text');
+  })
+  .add('Overview', () => {
+    const [open, setOpen] = useState(false);
 
-  return (
-    <FlexWrapper>
-      <Element>
+    const toggle = () => {
+      setOpen((prev) => !prev);
+    };
+
+    const handleClose = () => setOpen(false);
+
+    const direction = select('direction', directions, directions[0], 'all');
+
+    const textHover = boolean('Show on hover', true, 'text');
+
+    return (
+      <FlexWrapper>
+        <Element>
+          <Tooltip
+            content={text('Tooltip Text', 'Hi there!', 'text')}
+            showOnHover={textHover}
+            direction={direction}
+          >
+            <Button>{text('Main Content', 'With Text', 'text')}</Button>
+          </Tooltip>
+        </Element>
         <Tooltip
-          content={text('Tooltip Text', 'Hi there!', 'text')}
-          showOnHover={textHover}
+          isOpen={open}
           direction={direction}
-          isOpen={boolean('Open', false, 'text')}
+          onClose={handleClose}
+          tooltipWidth={`${number(
+            'Width',
+            300,
+            { min: 10, max: 1000, step: 5 },
+            'content'
+          )}px`}
+          content={
+            <div>
+              <h3 style={{ margin: '0 0 1em' }}>Article Reach</h3>
+              <div>
+                The expected readership (UVPM) of the next article they write,
+                based on the average readership of the articles they&apos;ve
+                written over the last 90 days.
+              </div>
+            </div>
+          }
         >
-          <Button>{text('Main Content', 'With Text', 'text')}</Button>
+          <Button onClick={toggle}>With content</Button>
         </Tooltip>
-      </Element>
-      <Tooltip
-        isOpen={open}
-        showOnHover={boolean('Show on hover', false, 'content')}
-        direction={direction}
-        onClose={toggle}
-        tooltipWidth={`${number(
-          'Width',
-          300,
-          { min: 10, max: 1000, step: 5 },
-          'content'
-        )}px`}
-        content={
-          <div>
-            <h3 style={{ margin: '0 0 1em' }}>Article Reach</h3>
-            <p style={{ margin: 0 }}>
-              The expected readership (UVPM) of the next article they write,
-              based on the average readership of the articles they&apos;ve
-              written over the last 90 days.
-            </p>
-          </div>
-        }
-      >
-        <Button onClick={toggle}>With content</Button>
-      </Tooltip>
-    </FlexWrapper>
-  );
-};
-
-storiesOf('Planets/Tooltip', module)
-  .addParameters({
-    readme: {
-      sidebar: Readme,
-    },
+      </FlexWrapper>
+    );
   })
-  .add('Overview', () => <Overview />)
   .add(
     'Hoverable',
     () => {
@@ -173,6 +153,34 @@ storiesOf('Planets/Tooltip', module)
     {}
   )
 
+  .add(
+    'Directions',
+    () => {
+      return (
+        <div style={{ textAlign: 'center' }}>
+          {directions.map((direction) => (
+            <div className="m-6" key={direction}>
+              <Tooltip
+                showOnHover
+                content={
+                  <div style={{ whiteSpace: 'nowrap' }}>
+                    Hi!
+                    <br />
+                    I&apos;m on the {direction}!
+                  </div>
+                }
+                direction={direction}
+              >
+                <button type="button">{direction}</button>
+              </Tooltip>
+            </div>
+          ))}
+        </div>
+      );
+    },
+    {}
+  )
+
   .add(
     'EasyRichTooltip',
     () => {
@@ -242,7 +250,6 @@ storiesOf('Planets/Tooltip', module)
         <RichTooltip
           content={TooltipContent}
           onClose={action('closing tooltip on left')}
-          closeOnEscape={false}
           direction="left"
           tooltipWidth="400px"
         >
diff --git a/yarn.lock b/yarn.lock
index 16f86575..8fcea012 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,6 +16,13 @@
   dependencies:
     "@babel/highlight" "^7.8.3"
 
+"@babel/code-frame@^7.10.4":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
+  integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
+  dependencies:
+    "@babel/highlight" "^7.12.13"
+
 "@babel/compat-data@^7.9.0", "@babel/compat-data@^7.9.6":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.9.6.tgz#3f604c40e420131affe6f2c8052e9a275ae2049b"
@@ -89,7 +96,7 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.8.3":
+"@babel/helper-annotate-as-pure@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
   integrity sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==
@@ -311,6 +318,11 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-validator-identifier@^7.12.11":
+  version "7.12.11"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
+  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
+
 "@babel/helper-validator-identifier@^7.9.0", "@babel/helper-validator-identifier@^7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80"
@@ -344,6 +356,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.12.13":
+  version "7.13.10"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
+  integrity sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.12.11"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.3.3", "@babel/parser@^7.4.3", "@babel/parser@^7.7.0", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0", "@babel/parser@^7.9.6":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.6.tgz#3b1bbb30dabe600cd72db58720998376ff653bc7"
@@ -1064,10 +1085,10 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-transform-typescript" "^7.9.0"
 
-"@babel/runtime-corejs3@^7.7.4":
-  version "7.10.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.10.2.tgz#3511797ddf9a3d6f3ce46b99cc835184817eaa4e"
-  integrity sha512-+a2M/u7r15o3dV1NEizr9bRi+KUVnrs/qYxF0Z06DAPx/4VCWaz1WA7EcbE+uqGgt39lp5akWGmHsTseIkHkHg==
+"@babel/runtime-corejs3@^7.10.2":
+  version "7.13.10"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.13.10.tgz#14c3f4c85de22ba88e8e86685d13e8861a82fe86"
+  integrity sha512-x/XYVQ1h684pp1mJwOV4CyvqZXqbc8CMsMGUnAbuc82ZCdv1U63w5RSUzgDSXQHG5Rps/kiksH6g2D5BuaKyXg==
   dependencies:
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
@@ -1087,20 +1108,27 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
   integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.5.4", "@babel/runtime@^7.7.4":
+"@babel/runtime@^7.10.2":
   version "7.10.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839"
   integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.5":
+  version "7.13.10"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
+  integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/standalone@^7.4.5":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.9.6.tgz#7a5f82c6fa29959b12f708213be6de8ec0b79338"
@@ -1115,7 +1143,7 @@
     "@babel/parser" "^7.8.6"
     "@babel/types" "^7.8.6"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.7.0", "@babel/traverse@^7.8.3", "@babel/traverse@^7.9.0", "@babel/traverse@^7.9.6":
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.7.0", "@babel/traverse@^7.8.3", "@babel/traverse@^7.9.0", "@babel/traverse@^7.9.6":
   version "7.9.6"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.6.tgz#5540d7577697bf619cc57b92aa0f1c231a94f442"
   integrity sha512-b3rAHSjbxy6VEAvlxM8OV/0X4XrG72zoxme6q1MOoe2vd0bEc+TwayhuC1+Dfgqh1QEG+pj7atQqvUprHIccsg==
@@ -1230,7 +1258,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.1":
+"@emotion/is-prop-valid@0.8.8":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
   integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
@@ -1281,7 +1309,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.0":
+"@emotion/unitless@0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -1491,6 +1519,17 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
+"@jest/types@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
+  integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -2193,59 +2232,71 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
-"@testing-library/dom@^7.9.0":
-  version "7.16.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.16.1.tgz#a6881d53612f2e8f7bcc0e0bd8825c6788cf57f2"
-  integrity sha512-u0Ck7tjWDyCcGn+f77JbUHa7PqgFu62ohRxegj1/H5P3REKsM+2roCvcnWJjMSHvK354NAS/Pgi92E9z6cB7Sw==
-  dependencies:
-    "@babel/runtime" "^7.10.2"
-    aria-query "^4.0.2"
-    dom-accessibility-api "^0.4.5"
-    pretty-format "^25.5.0"
-
-"@testing-library/jest-dom@^5.10.1":
-  version "5.10.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.10.1.tgz#6508a9f007bd74e5d3c0b3135b668027ab663989"
-  integrity sha512-uv9lLAnEFRzwUTN/y9lVVXVXlEzazDkelJtM5u92PsGkEasmdI+sfzhZHxSDzlhZVTrlLfuMh2safMr8YmzXLg==
+"@testing-library/dom@^7.28.1":
+  version "7.30.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.30.0.tgz#53697851f7708a1448cc30b74a2ea056dd709cd6"
+  integrity sha512-v4GzWtltaiDE0yRikLlcLAfEiiK8+ptu6OuuIebm9GdC2XlZTNDPGEfM2UkEtnH7hr9TRq2sivT5EA9P1Oy7bw==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^4.2.2"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.4"
+    lz-string "^1.4.4"
+    pretty-format "^26.6.2"
+
+"@testing-library/jest-dom@5.11.9":
+  version "5.11.9"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.11.9.tgz#e6b3cd687021f89f261bd53cbe367041fbd3e975"
+  integrity sha512-Mn2gnA9d1wStlAIT2NU8J15LNob0YFBVjs2aEQ3j8rsfRQo+lAs7/ui1i2TGaJjapLmuNPLTsrm+nPjmZDwpcQ==
   dependencies:
     "@babel/runtime" "^7.9.2"
     "@types/testing-library__jest-dom" "^5.9.1"
+    aria-query "^4.2.2"
     chalk "^3.0.0"
-    css "^2.2.4"
+    css "^3.0.0"
     css.escape "^1.5.1"
-    jest-diff "^25.1.0"
-    jest-matcher-utils "^25.1.0"
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react-hooks@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-3.3.0.tgz#dc217bfce8e7c34a99c811d73d23feef957b7c1d"
-  integrity sha512-rE9geI1+HJ6jqXkzzJ6abREbeud6bLF8OmF+Vyc7gBoPwZAEVBYjbC1up5nNoVfYBhO5HUwdD4u9mTehAUeiyw==
+"@testing-library/react-hooks@5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-5.1.0.tgz#6014b7536d0e9427a1e73ce1d073c49a6af5fb3b"
+  integrity sha512-ChRyyA14e0CeVkWGp24v8q/IiWUqH+B8daRx4lGZme4dsudmMNWz+Qo2Q2NzbD2O5rAVXh2hSbS/KTKeqHYhkw==
   dependencies:
-    "@babel/runtime" "^7.5.4"
-    "@types/testing-library__react-hooks" "^3.0.0"
+    "@babel/runtime" "^7.12.5"
+    "@types/react" ">=16.9.0"
+    "@types/react-dom" ">=16.9.0"
+    "@types/react-test-renderer" ">=16.9.0"
+    filter-console "^0.1.1"
+    react-error-boundary "^3.1.0"
 
-"@testing-library/react@^10.2.1":
-  version "10.2.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.2.1.tgz#f0c5ac9072ad54c29672150943f35d6617263f26"
-  integrity sha512-pv2jZhiZgN1/alz1aImhSasZAOPg3er2Kgcfg9fzuw7aKPLxVengqqR1n0CJANeErR1DqORauQaod+gGUgAJOQ==
+"@testing-library/react@11.2.5":
+  version "11.2.5"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.5.tgz#ae1c36a66c7790ddb6662c416c27863d87818eb9"
+  integrity sha512-yEx7oIa/UWLe2F2dqK0FtMF9sJWNXD+2PPtp39BvE0Kh9MJ9Kl0HrZAgEuhUJR+Lx8Di6Xz+rKwSdEPY2UV8ZQ==
   dependencies:
-    "@babel/runtime" "^7.10.2"
-    "@testing-library/dom" "^7.9.0"
+    "@babel/runtime" "^7.12.5"
+    "@testing-library/dom" "^7.28.1"
 
-"@testing-library/user-event@^12.0.7":
-  version "12.0.7"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.0.7.tgz#6028d8de294ebd1cbf63812bc40f99e61b82f318"
-  integrity sha512-v/1DS6V6P5zJVq5HCC/NU93CQaqML+exslOOYRmE71ULvtOCS4Fv6A2wgBjIsEEecjZtdS2LF+KlrOK3KvVZBA==
+"@testing-library/user-event@13.0.2":
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.0.2.tgz#f629bfd44fb09c9e3b18e048076b397e6e97952d"
+  integrity sha512-OYlNDcoqNZJhQvP5tsNM4/i27XIyA5DMi8xMwAJ0VLGW5BqjsSrYtL29WvHEdHu+cI6wo6UMHy6atdwtTNVUiw==
   dependencies:
-    "@babel/runtime" "^7.10.2"
+    "@babel/runtime" "^7.12.5"
 
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
   integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
 
+"@types/aria-query@^4.2.0":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.1.tgz#78b5433344e2f92e8b306c06a5622c50c245bf6b"
+  integrity sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==
+
 "@types/babel__core@^7.1.0", "@types/babel__core@^7.1.7":
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
@@ -2338,14 +2389,6 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.5.tgz#527d20ef68571a4af02ed74350164e7a67544860"
   integrity sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw==
 
-"@types/hoist-non-react-statics@*":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
@@ -2376,6 +2419,13 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz#508b13aa344fa4976234e75dddcc34925737d821"
+  integrity sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
 "@types/jest@*":
   version "26.0.0"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.0.tgz#a6d7573dffa9c68cbbdf38f2e0de26f159e11134"
@@ -2452,6 +2502,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@>=16.9.0":
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.2.tgz#35654cf6c49ae162d5bc90843d5437dc38008d43"
+  integrity sha512-Icd9KEgdnFfJs39KyRyr0jQ7EKhq8U6CcHRMGAS45fp5qgUvxL3ujUCfWFttUK2UErqZNj97t9gsVPNAqcwoCg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^16.9.8":
   version "16.9.8"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
@@ -2459,13 +2516,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-native@*":
-  version "0.62.12"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.62.12.tgz#24407983b527749f37b512cd5d2bdc6133810b17"
-  integrity sha512-EuM2QOx0LGwY3mKQ313+QcTYOwJhw5eggmE42GO4ElIKIfNK+zxxM6Pe9dT1Eq8eCJXY0oG327L7gUBWniwNNA==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-syntax-highlighter@11.0.4":
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
@@ -2473,10 +2523,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-test-renderer@*":
-  version "16.9.2"
-  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.2.tgz#e1c408831e8183e5ad748fdece02214a7c2ab6c5"
-  integrity sha512-4eJr1JFLIAlWhzDkBCkhrOIWOvOxcCAfQh+jiKg7l/nNZcCIL2MHl2dZhogIFKyHzedVWHaVP1Yydq/Ruu4agw==
+"@types/react-test-renderer@>=16.9.0":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
+  integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==
   dependencies:
     "@types/react" "*"
 
@@ -2502,6 +2552,15 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@>=16.9.0":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79"
+  integrity sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -2509,6 +2568,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
+  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
+
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@@ -2519,23 +2583,6 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
-"@types/styled-components@^4.4.1":
-  version "4.4.3"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.3.tgz#74dd00ad760845a98890a8539361d8afc32059de"
-  integrity sha512-U0udeNOZBfUkJycmGJwmzun0FBt11rZy08weVQmE2xfUNAbX8AGOEWxWna2d+qAUKxKgMlcG+TZT0+K2FfDcnQ==
-  dependencies:
-    "@types/hoist-non-react-statics" "*"
-    "@types/react" "*"
-    "@types/react-native" "*"
-    csstype "^2.2.0"
-
-"@types/styled-system@^5.1.9":
-  version "5.1.9"
-  resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.9.tgz#8baac8f6eca9e0bd5768c175ca5ce1f2d6f61ade"
-  integrity sha512-QlWv6tmQV8dqk8s+LSLb9QAtmuQEnfv4f8lKKZkMgDqRFVmxJDBwEw0u4zhpxp56u0hdR+TCIk9dGfOw3TkCoQ==
-  dependencies:
-    csstype "^2.6.9"
-
 "@types/tapable@*", "@types/tapable@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.5.tgz#9adbc12950582aa65ead76bffdf39fe0c27a3c02"
@@ -2548,14 +2595,6 @@
   dependencies:
     "@types/jest" "*"
 
-"@types/testing-library__react-hooks@^3.0.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__react-hooks/-/testing-library__react-hooks-3.2.0.tgz#52f3a109bef06080e3b1e3ae7ea1c014ce859897"
-  integrity sha512-dE8iMTuR5lzB+MqnxlzORlXzXyCL0EKfzH0w/lau20OpkHD37EaWjZDz0iNG8b71iEtxT4XKGmSKAGVEqk46mw==
-  dependencies:
-    "@types/react" "*"
-    "@types/react-test-renderer" "*"
-
 "@types/uglify-js@*":
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.9.1.tgz#0ad39d6a72979593f669acdfc7e980d590d3fb94"
@@ -3282,13 +3321,13 @@ aria-query@^3.0.0:
     ast-types-flow "0.0.7"
     commander "^2.11.0"
 
-aria-query@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.0.2.tgz#250687b4ccde1ab86d127da0432ae3552fc7b145"
-  integrity sha512-S1G1V790fTaigUSM/Gd0NngzEfiMy9uTUfMyHhKhVyy4cH5O/eTuR01ydhGL0z4Za1PXFTRGH3qL8VhUQuEO5w==
+aria-query@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
+  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
   dependencies:
-    "@babel/runtime" "^7.7.4"
-    "@babel/runtime-corejs3" "^7.7.4"
+    "@babel/runtime" "^7.10.2"
+    "@babel/runtime-corejs3" "^7.10.2"
 
 arity-n@^1.0.4:
   version "1.0.4"
@@ -3859,16 +3898,6 @@ babel-plugin-react-docgen@^4.0.0, babel-plugin-react-docgen@^4.1.0:
     react-docgen "^5.0.0"
     recast "^0.14.7"
 
-"babel-plugin-styled-components@>= 1":
-  version "1.10.7"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz#3494e77914e9989b33cc2d7b3b29527a949d635c"
-  integrity sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.0.0"
-    "@babel/helper-module-imports" "^7.0.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    lodash "^4.17.11"
-
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -4543,11 +4572,6 @@ camelcase@^4.1.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
   integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
 
-camelize@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
-  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
-
 can-use-dom@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
@@ -4631,6 +4655,14 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 change-case@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.1.0.tgz#0e611b7edc9952df2e8513b27b42de72647dd17e"
@@ -5315,11 +5347,6 @@ css-blank-pseudo@^0.1.4:
   dependencies:
     postcss "^7.0.5"
 
-css-color-keywords@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
-  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
-
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -5431,15 +5458,6 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.2"
     regexpu-core "^4.6.0"
 
-css-to-react-native@^2.2.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d"
-  integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==
-  dependencies:
-    camelize "^1.0.0"
-    css-color-keywords "^1.0.0"
-    postcss-value-parser "^3.3.0"
-
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -5471,7 +5489,7 @@ css.escape@^1.5.1:
   resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
   integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
 
-css@^2.0.0, css@^2.2.4:
+css@^2.0.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
   integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
@@ -5481,6 +5499,15 @@ css@^2.0.0, css@^2.2.4:
     source-map-resolve "^0.5.2"
     urix "^0.1.0"
 
+css@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
+  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
+  dependencies:
+    inherits "^2.0.4"
+    source-map "^0.6.1"
+    source-map-resolve "^0.6.0"
+
 cssdb@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
@@ -5583,11 +5610,16 @@ cssstyle@^1.0.0, cssstyle@^1.1.1:
   dependencies:
     cssom "0.3.x"
 
-csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.7, csstype@^2.6.9:
+csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.7:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
 
+csstype@^3.0.2:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b"
+  integrity sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -5909,10 +5941,10 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.4.5.tgz#d9c1cefa89f509d8cf132ab5d250004d755e76e3"
-  integrity sha512-HcPDilI95nKztbVikaN2vzwvmv0sE8Y2ZJFODy/m15n7mGXLeOKGiys9qWVbFbh+aq/KYj2lqMLybBOkYAEXqg==
+dom-accessibility-api@^0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz#b06d059cdd4a4ad9a79275f9d414a5c126241166"
+  integrity sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==
 
 dom-converter@^0.2:
   version "0.2.0"
@@ -7189,6 +7221,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+filter-console@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/filter-console/-/filter-console-0.1.1.tgz#6242be28982bba7415bcc6db74a79f4a294fa67c"
+  integrity sha512-zrXoV1Uaz52DqPs+qEwNJWJFAWZpYJ47UNmpN9q4j+/EYsz85uV0DC9k8tRND5kYmoVzL0W+Y75q4Rg8sRJCdg==
+
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -8978,11 +9015,6 @@ is-upper-case@^1.1.0:
   dependencies:
     upper-case "^1.1.0"
 
-is-what@^3.3.1:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.8.0.tgz#610bc46a524355f2424eb85eedc6ebbbf7e1ff8c"
-  integrity sha512-UKeBoQfV8bjlM4pmx1FLDHdxslW/1mTksEs8ReVsilPmUv5cORd4+2/wFcviI3cUjrLybxCjzc8DnodAzJ/Wrg==
-
 is-whitespace-character@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
@@ -9179,7 +9211,7 @@ jest-diff@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
-jest-diff@^25.1.0, jest-diff@^25.2.1, jest-diff@^25.5.0:
+jest-diff@^25.2.1:
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.5.0.tgz#1dd26ed64f96667c068cef026b677dfa01afcfa9"
   integrity sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A==
@@ -9311,16 +9343,6 @@ jest-matcher-utils@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
-jest-matcher-utils@^25.1.0:
-  version "25.5.0"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-25.5.0.tgz#fbc98a12d730e5d2453d7f1ed4a4d948e34b7867"
-  integrity sha512-VWI269+9JS5cpndnpCwm7dy7JtGQT30UHfrnM3mXl22gHGt/b7NkjBqXfbhZ8V4B7ANUsjK18PlSBmG0YH7gjw==
-  dependencies:
-    chalk "^3.0.0"
-    jest-diff "^25.5.0"
-    jest-get-type "^25.2.6"
-    pretty-format "^25.5.0"
-
 jest-message-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
@@ -10186,6 +10208,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
+
 magic-string@^0.22.4:
   version "0.22.5"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e"
@@ -10434,13 +10461,6 @@ meow@^5.0.0:
     trim-newlines "^2.0.0"
     yargs-parser "^10.0.0"
 
-merge-anything@^2.2.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.4.tgz#6226b2ac3d3d3fc5fb9e8d23aa400df25f98fdf0"
-  integrity sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==
-  dependencies:
-    is-what "^3.3.1"
-
 merge-deep@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
@@ -12649,6 +12669,16 @@ pretty-format@^25.2.1, pretty-format@^25.5.0:
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
+pretty-format@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
+  integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^17.0.1"
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -13116,6 +13146,13 @@ react-element-to-jsx-string@^14.0.2:
     "@base2/pretty-print-object" "1.0.0"
     is-plain-object "3.0.0"
 
+react-error-boundary@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.1.tgz#932c5ca5cbab8ec4fe37fd7b415aa5c3a47597e7"
+  integrity sha512-W3xCd9zXnanqrTUeViceufD3mIW8Ut29BUD+S2f0eO2XCOU8b6UrJfY46RDGe5lxCJzfe4j0yvIfh0RbTZhKJw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-error-overlay@^6.0.3, react-error-overlay@^6.0.7:
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
@@ -13172,11 +13209,16 @@ react-inspector@^4.0.0:
     is-dom "^1.0.9"
     prop-types "^15.6.1"
 
-react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
+react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.3, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
+  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+
 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"
@@ -14538,6 +14580,14 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
+source-map-resolve@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
+  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
+  dependencies:
+    atob "^2.1.2"
+    decode-uri-component "^0.2.0"
+
 source-map-support@^0.4.15:
   version "0.4.18"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
@@ -15043,33 +15093,6 @@ style-search@^0.1.0:
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
   integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
 
-styled-components@^4.2.0:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2"
-  integrity sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@emotion/is-prop-valid" "^0.8.1"
-    "@emotion/unitless" "^0.7.0"
-    babel-plugin-styled-components ">= 1"
-    css-to-react-native "^2.2.2"
-    memoize-one "^5.0.0"
-    merge-anything "^2.2.4"
-    prop-types "^15.5.4"
-    react-is "^16.6.0"
-    stylis "^3.5.0"
-    stylis-rule-sheet "^0.0.10"
-    supports-color "^5.5.0"
-
-styled-system@^4.1.0:
-  version "4.2.4"
-  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-4.2.4.tgz#8909f91396c30b92295b4eddec5f7b89f8c8d767"
-  integrity sha512-44X7n09gDvwx7yjquEXsjiNALK0dxGgAJdpO5cb/PdL+D4mhSLKWig4/EhH4vHJLbwu/kumURHyvKxygaBfg0A==
-  dependencies:
-    "@babel/runtime" "^7.4.2"
-    prop-types "^15.7.2"
-
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -15144,16 +15167,6 @@ stylelint@^9.10.1:
     svg-tags "^1.0.0"
     table "^5.0.0"
 
-stylis-rule-sheet@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
-  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
-
-stylis@^3.5.0:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
-  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
-
 sugarss@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d"
@@ -15173,7 +15186,7 @@ supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
+supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==