From c2c99e6445e942eb8f35a6f0dd533695c9074a7b Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Fri, 10 Jan 2020 17:02:31 -0500
Subject: [PATCH 001/244] [DDW-829] Installs react-custom-scrollbars as
 dependency

---
 package.json |  1 +
 yarn.lock    | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/package.json b/package.json
index f52e1d8b..ce15a3b1 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "create-react-ref": "0.1.0",
     "filter-react-dom-props": "0.0.2",
     "postinstall-build": "5.0.1",
+    "react-custom-scrollbars": "4.2.1",
     "react-modal": "3.1.12"
   },
   "peerDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 6ac247d5..633dc382 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2036,6 +2036,11 @@ acorn@^6.2.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.0.tgz#b659d2ffbafa24baf5db1cdbb2c94a983ecd2784"
   integrity sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==
 
+add-px-to-style@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a"
+  integrity sha1-0ME1RB+oAUqBN5BFMQlvZ/KPJjo=
+
 address@1.1.2, address@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -4352,6 +4357,15 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-css@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202"
+  integrity sha1-/bwtWgFdCj4YcuEUcrvQ57nmogI=
+  dependencies:
+    add-px-to-style "1.0.0"
+    prefix-style "2.0.1"
+    to-camel-case "1.0.0"
+
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -9400,6 +9414,11 @@ postinstall-build@5.0.1:
   resolved "https://registry.yarnpkg.com/postinstall-build/-/postinstall-build-5.0.1.tgz#b917a9079b26178d9a24af5a5cd8cb4a991d11b9"
   integrity sha1-uRepB5smF42aJK9aXNjLSpkdEbk=
 
+prefix-style@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"
+  integrity sha1-ZrupqHDP2jCKXcIOhekSCTLJWgY=
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -9701,6 +9720,13 @@ querystringify@^2.1.1:
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
   integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
 
+raf@^3.1.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 raf@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
@@ -9810,6 +9836,15 @@ react-clientside-effect@^1.2.0:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
+react-custom-scrollbars@4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db"
+  integrity sha1-gw/ZUCkn6X6KeMIIaBOJmyqLZts=
+  dependencies:
+    dom-css "^2.0.0"
+    prop-types "^15.5.10"
+    raf "^3.1.0"
+
 react-dev-utils@^9.0.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
@@ -11603,11 +11638,23 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
+to-camel-case@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46"
+  integrity sha1-GlYFSy+daWKYzmamCJcyK29CPkY=
+  dependencies:
+    to-space-case "^1.0.0"
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
+to-no-case@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
+  integrity sha1-xyKQcWTvaxeBMsjmmTAhLRtKoWo=
+
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
@@ -11633,6 +11680,13 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+to-space-case@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
+  integrity sha1-sFLar7Gysp3HcM6gFj5ewOvJ/Bc=
+  dependencies:
+    to-no-case "^1.0.0"
+
 toggle-selection@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"

From 8121270f8c547f5771b057ea7b936cbc152606a9 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Fri, 10 Jan 2020 17:10:14 -0500
Subject: [PATCH 002/244] [DDW-829] Creates ScrollBar component

---
 source/components/ScrollBar.js | 70 ++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 source/components/ScrollBar.js

diff --git a/source/components/ScrollBar.js b/source/components/ScrollBar.js
new file mode 100644
index 00000000..2ae3071d
--- /dev/null
+++ b/source/components/ScrollBar.js
@@ -0,0 +1,70 @@
+// @flow
+import React, { Component } from 'react';
+import type { ComponentType } from 'react';
+
+// internal utility functions
+import { createEmptyContext, withTheme } from './HOC/withTheme';
+import { composeTheme, addThemeId, didThemePropsChange } from '../utils/themes';
+
+// import constants
+import { IDENTIFIERS } from '.';
+import type { ThemeContextProp } from './HOC/withTheme';
+
+type Props = {
+  className?: string,
+  context: ThemeContextProp,
+  skin?: ComponentType<any>,
+  theme: ?Object, // will take precedence over theme in context if passed
+  themeId: string,
+  themeOverrides: Object // custom css/scss from user that adheres to component's theme API
+};
+
+type State = {
+  composedTheme: Object
+};
+
+class ScrollBarBase extends Component<Props, State> {
+  // define static properties
+  static displayName = 'ScrollBar';
+  static defaultProps = {
+    context: createEmptyContext(),
+    theme: null,
+    themeId: IDENTIFIERS.SCROLLBAR,
+    themeOverrides: {}
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    const { context, themeId, theme, themeOverrides } = props;
+
+    this.state = {
+      composedTheme: composeTheme(
+        addThemeId(theme || context.theme, themeId),
+        addThemeId(themeOverrides, themeId),
+        context.ROOT_THEME_API
+      )
+    };
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  }
+
+  render() {
+    // destructuring props ensures only the "...rest" get passed down
+    const {
+      skin,
+      theme,
+      themeOverrides,
+      context,
+      ...rest
+    } = this.props;
+
+    const ScrollBarSkin = skin || context.skins[IDENTIFIERS.SCROLLBAR];
+
+    return <ScrollBarSkin theme={this.state.composedTheme} {...rest} />;
+  }
+}
+
+export const ScrollBar = withTheme(ScrollBarBase);

From 3f4659366cdb1e8117f3dfa33f542cc8a55aa62e Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Fri, 10 Jan 2020 17:10:40 -0500
Subject: [PATCH 003/244] [DDW-829] Creates SCROLLBAR identifier

---
 source/components/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/components/index.js b/source/components/index.js
index 769b3f2a..90adbc89 100644
--- a/source/components/index.js
+++ b/source/components/index.js
@@ -18,6 +18,7 @@ export const IDENTIFIERS = {
   OPTIONS: 'options',
   PROGRESS_BAR: 'progressbar',
   RADIO: 'radio',
+  SCROLLBAR: 'scrollbar',
   SELECT: 'select',
   STEPPER: 'stepper',
   SWITCH: 'switch',

From 79fa6eb02cd9bb3bf303fc194392ccee7c6576c1 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Fri, 10 Jan 2020 17:26:33 -0500
Subject: [PATCH 004/244] [DDW-829] Creates ScrollBarSkin using
 react-custom-scrollbars package

---
 source/skins/simple/ScrollBarSkin.js | 29 ++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 source/skins/simple/ScrollBarSkin.js

diff --git a/source/skins/simple/ScrollBarSkin.js b/source/skins/simple/ScrollBarSkin.js
new file mode 100644
index 00000000..b6adb053
--- /dev/null
+++ b/source/skins/simple/ScrollBarSkin.js
@@ -0,0 +1,29 @@
+// @flow
+import React from 'react';
+
+// external libraries
+import classnames from 'classnames';
+import { Scrollbars } from 'react-custom-scrollbars';
+
+type Props = {
+  className: string,
+  render: Function,
+  theme: Object,
+  themeId: string
+};
+
+export const ScrollBarSkin = (props: Props) => {
+  const { className, render, themeId } = props;
+  const theme = props.theme[themeId];
+
+  const renderThumb = (thumbProps: any) => <div {...thumbProps} className={theme.thumb} />;
+
+  return (
+    <Scrollbars
+      className={classnames([className, theme.root])}
+      renderThumbVertical={renderThumb}
+    >
+      {render()}
+    </Scrollbars>
+  );
+};

From 1b80e531cca54806304548b3e4d28b024c3f85ff Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Fri, 10 Jan 2020 17:27:12 -0500
Subject: [PATCH 005/244] [DDW-829] Exports ScrollBarSkin from index using
 identifier

---
 source/skins/simple/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/source/skins/simple/index.js b/source/skins/simple/index.js
index 23db4903..ed4686b9 100644
--- a/source/skins/simple/index.js
+++ b/source/skins/simple/index.js
@@ -15,6 +15,7 @@ import { ModalSkin } from './ModalSkin';
 import { OptionsSkin } from './OptionsSkin';
 import { ProgressBarSkin } from './ProgressBarSkin';
 import { RadioSkin } from './RadioSkin';
+import { ScrollBarSkin } from './ScrollBarSkin';
 import { SelectSkin } from './SelectSkin';
 import { StepperSkin } from './StepperSkin';
 import { SwitchSkin } from './SwitchSkin';
@@ -38,6 +39,7 @@ export const SimpleSkins = {
   [IDENTIFIERS.OPTIONS]: OptionsSkin,
   [IDENTIFIERS.PROGRESS_BAR]: ProgressBarSkin,
   [IDENTIFIERS.RADIO]: RadioSkin,
+  [IDENTIFIERS.SCROLLBAR]: ScrollBarSkin,
   [IDENTIFIERS.SELECT]: SelectSkin,
   [IDENTIFIERS.STEPPER]: StepperSkin,
   [IDENTIFIERS.SWITCH]: SwitchSkin,

From f6385715ceedd40da422218f807eb871e10d8508 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Mon, 13 Jan 2020 15:19:18 -0500
Subject: [PATCH 006/244] [DDW-829] Changes render prop to children

---
 source/skins/simple/ScrollBarSkin.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/skins/simple/ScrollBarSkin.js b/source/skins/simple/ScrollBarSkin.js
index b6adb053..e3df82db 100644
--- a/source/skins/simple/ScrollBarSkin.js
+++ b/source/skins/simple/ScrollBarSkin.js
@@ -6,14 +6,14 @@ import classnames from 'classnames';
 import { Scrollbars } from 'react-custom-scrollbars';
 
 type Props = {
+  children: Node,
   className: string,
-  render: Function,
   theme: Object,
   themeId: string
 };
 
 export const ScrollBarSkin = (props: Props) => {
-  const { className, render, themeId } = props;
+  const { children, className, themeId } = props;
   const theme = props.theme[themeId];
 
   const renderThumb = (thumbProps: any) => <div {...thumbProps} className={theme.thumb} />;
@@ -23,7 +23,7 @@ export const ScrollBarSkin = (props: Props) => {
       className={classnames([className, theme.root])}
       renderThumbVertical={renderThumb}
     >
-      {render()}
+      {children}
     </Scrollbars>
   );
 };

From 05f5c8eab32bae912e50e059d84d4591a32be18f Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Mon, 13 Jan 2020 15:23:52 -0500
Subject: [PATCH 007/244] [DDW-829] Adds SCROLLBAR_THEME_API

---
 source/themes/API/scrollbar.js | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 source/themes/API/scrollbar.js

diff --git a/source/themes/API/scrollbar.js b/source/themes/API/scrollbar.js
new file mode 100644
index 00000000..661073bf
--- /dev/null
+++ b/source/themes/API/scrollbar.js
@@ -0,0 +1,5 @@
+// @flow
+export const SCROLLBAR_THEME_API = {
+  root: '',
+  thumb: '',
+};

From e900523967da1420d279e7c8710ee944699ec74e Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Mon, 13 Jan 2020 15:24:08 -0500
Subject: [PATCH 008/244] [DDW-829] Adds theme api export

---
 source/themes/API/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/source/themes/API/index.js b/source/themes/API/index.js
index f5a676ad..79784ce1 100644
--- a/source/themes/API/index.js
+++ b/source/themes/API/index.js
@@ -18,6 +18,7 @@ import { MODAL_THEME_API } from './modal';
 import { OPTIONS_THEME_API } from './options';
 import { PROGRESS_BAR_THEME_API } from './progressbar';
 import { RADIO_THEME_API } from './radio';
+import { SCROLLBAR_THEME_API } from './scrollbar';
 import { SELECT_THEME_API } from './select';
 import { STEPPER_THEME_API } from './stepper';
 import { SWITCH_THEME_API } from './switch';
@@ -44,6 +45,7 @@ export const ROOT_THEME_API = {
   [IDENTIFIERS.OPTIONS]: OPTIONS_THEME_API,
   [IDENTIFIERS.PROGRESS_BAR]: PROGRESS_BAR_THEME_API,
   [IDENTIFIERS.RADIO]: RADIO_THEME_API,
+  [IDENTIFIERS.SCROLLBAR]: SCROLLBAR_THEME_API,
   [IDENTIFIERS.SELECT]: SELECT_THEME_API,
   [IDENTIFIERS.STEPPER]: STEPPER_THEME_API,
   [IDENTIFIERS.SWITCH]: SWITCH_THEME_API,

From 72bb1569d6645c5eed0cdbdde70b15b84c31e856 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Mon, 13 Jan 2020 15:28:58 -0500
Subject: [PATCH 009/244] [DDW-829] Creates SimpleScrollBar theme file

---
 source/themes/simple/SimpleScrollBar.scss | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 source/themes/simple/SimpleScrollBar.scss

diff --git a/source/themes/simple/SimpleScrollBar.scss b/source/themes/simple/SimpleScrollBar.scss
new file mode 100644
index 00000000..66696ef7
--- /dev/null
+++ b/source/themes/simple/SimpleScrollBar.scss
@@ -0,0 +1,5 @@
+@import "theme";
+
+.root {}
+
+.thumb {}
\ No newline at end of file

From df21afc97b6844240b3c8dd437d36a13034151a4 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Mon, 13 Jan 2020 15:29:15 -0500
Subject: [PATCH 010/244] [DDW-829] Exports SimpleScrollBar theme file

---
 source/themes/simple/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/source/themes/simple/index.js b/source/themes/simple/index.js
index 88719aca..11090ce7 100644
--- a/source/themes/simple/index.js
+++ b/source/themes/simple/index.js
@@ -21,6 +21,7 @@ import SimpleModal from './SimpleModal.scss';
 import SimpleOptions from './SimpleOptions.scss';
 import SimpleProgressBar from './SimpleProgressBar.scss';
 import SimpleRadio from './SimpleRadio.scss';
+import SimpleScrollBar from './SimpleScrollBar.scss';
 import SimpleSelect from './SimpleSelect.scss';
 import SimpleStepper from './SimpleStepper.scss';
 import SimpleSwitch from './SimpleSwitch.scss';
@@ -51,6 +52,7 @@ export const SimpleTheme = {
   [IDENTIFIERS.OPTIONS]: SimpleOptions,
   [IDENTIFIERS.PROGRESS_BAR]: SimpleProgressBar,
   [IDENTIFIERS.RADIO]: SimpleRadio,
+  [IDENTIFIERS.SCROLLBAR]: SimpleScrollBar,
   [IDENTIFIERS.SELECT]: SimpleSelect,
   [IDENTIFIERS.STEPPER]: SimpleStepper,
   [IDENTIFIERS.SWITCH]: SimpleSwitch,

From 70f69bda3e312f7dec8572d28a453936a0f923cc Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Mon, 13 Jan 2020 16:43:41 -0500
Subject: [PATCH 011/244] [DDW-829] Adds configurable CSS vars to theme file

---
 source/themes/simple/SimpleScrollBar.scss | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/source/themes/simple/SimpleScrollBar.scss b/source/themes/simple/SimpleScrollBar.scss
index 66696ef7..41a28f3d 100644
--- a/source/themes/simple/SimpleScrollBar.scss
+++ b/source/themes/simple/SimpleScrollBar.scss
@@ -1,5 +1,23 @@
 @import "theme";
 
+// OVERRIDABLE CONFIGURATION VARIABLES
+
+$scrollbar-thumb-bg-color: var(--rp-scrollbar-thumb-bg-color, rgba(255, 255, 255, 0.1)) !default;
+$scrollbar-thumb-bg-color-active: var(--rp-scrollbar-thumb-bg-color-active, rgba(255, 255, 255, 0.3)) !default;
+$scrollbar-thumb-bg-color-hover: var(--rp-scrollbar-thumb-bg-color-hover, rgba(255, 255, 255, 0.3)) !default;
+$scrollbar-thumb-border-radius: var(--rp-scrollbar-thumb-border-radius, 3px) !default;
+
 .root {}
 
-.thumb {}
\ No newline at end of file
+.thumb {
+ background-color: $scrollbar-thumb-bg-color;
+ border-radius: $scrollbar-thumb-border-radius;
+
+ &:active {
+   background-color: $scrollbar-thumb-bg-color-active;
+ }
+
+ &:hover {
+   background-color: $scrollbar-thumb-bg-color-hover;
+ }
+}
\ No newline at end of file

From 4c4bae7c41ee98528a53bd1c8e9d97cebaf10717 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Tue, 14 Jan 2020 22:55:45 -0500
Subject: [PATCH 012/244] [DDW-829] Swaps className prop for style prop

---
 source/skins/simple/ScrollBarSkin.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/skins/simple/ScrollBarSkin.js b/source/skins/simple/ScrollBarSkin.js
index e3df82db..5e404768 100644
--- a/source/skins/simple/ScrollBarSkin.js
+++ b/source/skins/simple/ScrollBarSkin.js
@@ -2,25 +2,25 @@
 import React from 'react';
 
 // external libraries
-import classnames from 'classnames';
 import { Scrollbars } from 'react-custom-scrollbars';
 
 type Props = {
   children: Node,
   className: string,
+  style: Object,
   theme: Object,
   themeId: string
 };
 
 export const ScrollBarSkin = (props: Props) => {
-  const { children, className, themeId } = props;
+  const { children, style, themeId } = props;
   const theme = props.theme[themeId];
 
   const renderThumb = (thumbProps: any) => <div {...thumbProps} className={theme.thumb} />;
 
   return (
     <Scrollbars
-      className={classnames([className, theme.root])}
+      style={style}
       renderThumbVertical={renderThumb}
     >
       {children}

From d96d0a28ea901a4ca066e7fa01ba384f441723ca Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Tue, 14 Jan 2020 22:56:47 -0500
Subject: [PATCH 013/244] [DDW-829] Adds ScrollBar story

---
 stories/ScrollBar.stories.js | 23 +++++++++++++++++++++++
 stories/index.js             |  1 +
 2 files changed, 24 insertions(+)
 create mode 100644 stories/ScrollBar.stories.js

diff --git a/stories/ScrollBar.stories.js b/stories/ScrollBar.stories.js
new file mode 100644
index 00000000..a02dd486
--- /dev/null
+++ b/stories/ScrollBar.stories.js
@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+
+// storybook
+import { storiesOf } from '@storybook/react';
+
+// components
+import { ScrollBar } from '../source/components/ScrollBar';
+
+// helpers
+import { decorateWithSimpleTheme } from './helpers/theming';
+
+storiesOf('ScrollBar', module)
+
+  .addDecorator(decorateWithSimpleTheme)
+
+  // ====== Stories ======
+
+  .add('plain', () => (
+    <ScrollBar style={{ height: '1500px', width: '200px' }}>
+      <p>Scroll Me</p>
+    </ScrollBar>
+  ));
diff --git a/stories/index.js b/stories/index.js
index 57a75c61..3254a5cc 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -16,6 +16,7 @@ import './NumericInput.stories';
 import './Options.stories';
 import './ProgressBar.stories';
 import './Radio.stories';
+import './ScrollBar.stories';
 import './Select.stories';
 import './Stepper.stories';
 import './Switch.stories';

From b8d2787e8d6fe079ce9fa59f827e80d8088c9784 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Fri, 17 Jan 2020 22:24:12 -0500
Subject: [PATCH 014/244] [DDW-829] Fixes ScrollBar height issue

---
 source/skins/simple/OptionsSkin.js | 7 ++++++-
 stories/ScrollBar.stories.js       | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index f785f226..21df1996 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -8,6 +8,7 @@ import { isFunction, isObject } from 'lodash';
 
 // components
 import { Bubble } from '../../components/Bubble';
+import { ScrollBar } from '../../components/ScrollBar';
 
 // skins
 import { BubbleSkin } from './BubbleSkin';
@@ -120,6 +121,8 @@ export const OptionsSkin = (props: Props) => {
   const optionsStyle = optionsMaxHeight == null ? null : {
     maxHeight: `${optionsMaxHeight}px`
   };
+  const OPTION_HEIGHT = 46; // a single option's height is 46px by default
+  const scrollBarHeight = options.length ? options.length * OPTION_HEIGHT : OPTION_HEIGHT;
 
   return (
     <Bubble
@@ -146,7 +149,9 @@ export const OptionsSkin = (props: Props) => {
         onMouseEnter={() => setMouseIsOverOptions && setMouseIsOverOptions(true)}
         onMouseLeave={() => setMouseIsOverOptions && setMouseIsOverOptions(false)}
       >
-        {renderOptions()}
+        <ScrollBar style={{ height: `${scrollBarHeight}px` }}>
+          {renderOptions()}
+        </ScrollBar>
       </ul>
     </Bubble>
   );
diff --git a/stories/ScrollBar.stories.js b/stories/ScrollBar.stories.js
index a02dd486..5bf2f532 100644
--- a/stories/ScrollBar.stories.js
+++ b/stories/ScrollBar.stories.js
@@ -17,7 +17,7 @@ storiesOf('ScrollBar', module)
   // ====== Stories ======
 
   .add('plain', () => (
-    <ScrollBar style={{ height: '1500px', width: '200px' }}>
+    <ScrollBar style={{ height: '1000px' }}>
       <p>Scroll Me</p>
     </ScrollBar>
   ));

From b82d1179667b43da0a656cd84e36ffa27cf1dc22 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Thu, 23 Jan 2020 14:15:52 -0500
Subject: [PATCH 015/244] [DDW-829] Cleans up ScrollBar storybook styles

---
 stories/ScrollBar.stories.js   | 7 ++++++-
 stories/ScrollBar.stories.scss | 7 +++++++
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 stories/ScrollBar.stories.scss

diff --git a/stories/ScrollBar.stories.js b/stories/ScrollBar.stories.js
index 5bf2f532..7f1955ca 100644
--- a/stories/ScrollBar.stories.js
+++ b/stories/ScrollBar.stories.js
@@ -10,6 +10,9 @@ import { ScrollBar } from '../source/components/ScrollBar';
 // helpers
 import { decorateWithSimpleTheme } from './helpers/theming';
 
+// styles
+import styles from './ScrollBar.stories.scss';
+
 storiesOf('ScrollBar', module)
 
   .addDecorator(decorateWithSimpleTheme)
@@ -18,6 +21,8 @@ storiesOf('ScrollBar', module)
 
   .add('plain', () => (
     <ScrollBar style={{ height: '1000px' }}>
-      <p>Scroll Me</p>
+      <div className={styles.padding}>
+        <p>Scroll Me</p>
+      </div>
     </ScrollBar>
   ));
diff --git a/stories/ScrollBar.stories.scss b/stories/ScrollBar.stories.scss
new file mode 100644
index 00000000..3521e855
--- /dev/null
+++ b/stories/ScrollBar.stories.scss
@@ -0,0 +1,7 @@
+.padding {
+ padding: 10px 0 0 10px;
+
+ p {
+  font-family: Arial, Helvetica, sans-serif;
+ }
+}
\ No newline at end of file

From 45174d8aa2d9c500053493ee2755d022a35225c1 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Thu, 23 Jan 2020 14:19:27 -0500
Subject: [PATCH 016/244] [DDW-829] Updates CHANGELOG

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb081276..675742b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
+### Features
+
+- Adds new `ScrollBar` component and integrates it into existing react-polymorph components [PR 129](https://github.com/input-output-hk/react-polymorph/pull/129)
+
 0.9.1
 =====
 

From ce88a5ce2ed5241f9bbf76702efa73b0d0ac979b Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Thu, 23 Jan 2020 14:57:48 -0500
Subject: [PATCH 017/244] [DDW-829] Removes root class from ScrollBar's theme

---
 source/themes/API/scrollbar.js            | 1 -
 source/themes/simple/SimpleScrollBar.scss | 2 --
 2 files changed, 3 deletions(-)

diff --git a/source/themes/API/scrollbar.js b/source/themes/API/scrollbar.js
index 661073bf..42897d2e 100644
--- a/source/themes/API/scrollbar.js
+++ b/source/themes/API/scrollbar.js
@@ -1,5 +1,4 @@
 // @flow
 export const SCROLLBAR_THEME_API = {
-  root: '',
   thumb: '',
 };
diff --git a/source/themes/simple/SimpleScrollBar.scss b/source/themes/simple/SimpleScrollBar.scss
index 41a28f3d..9b17e2ed 100644
--- a/source/themes/simple/SimpleScrollBar.scss
+++ b/source/themes/simple/SimpleScrollBar.scss
@@ -7,8 +7,6 @@ $scrollbar-thumb-bg-color-active: var(--rp-scrollbar-thumb-bg-color-active, rgba
 $scrollbar-thumb-bg-color-hover: var(--rp-scrollbar-thumb-bg-color-hover, rgba(255, 255, 255, 0.3)) !default;
 $scrollbar-thumb-border-radius: var(--rp-scrollbar-thumb-border-radius, 3px) !default;
 
-.root {}
-
 .thumb {
  background-color: $scrollbar-thumb-bg-color;
  border-radius: $scrollbar-thumb-border-radius;

From 565e78d4d44af6bb249b04f87f524d231e5fae9f Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Fri, 24 Jan 2020 17:36:33 -0500
Subject: [PATCH 018/244] [DDW-829] Adds optionHeight prop to Options component

---
 source/components/Options.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/source/components/Options.js b/source/components/Options.js
index e788471e..8e6c39db 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -33,6 +33,7 @@ type Props = {
   onBlur?: Function,
   onChange?: Function,
   onClose?: Function,
+  optionHeight: number,
   options: Array<any>,
   optionRenderer?: Function,
   optionsRef?: ElementRef<any>,
@@ -71,6 +72,7 @@ class OptionsBase extends Component<Props, State> {
     noOptionsArrow: false,
     noOptionsCheckmark: false,
     noResultsMessage: 'No results',
+    optionHeight: 46,
     options: [],
     resetOnClose: false,
     theme: null,

From c0fa7f2023a758d19320b364bf6fb20f907bacdd Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Fri, 24 Jan 2020 17:37:02 -0500
Subject: [PATCH 019/244] [DDW-829] Adds optionHeight prop to OptionsSkin and
 fixes scroll bar height calculation

---
 source/skins/simple/OptionsSkin.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index 21df1996..db5d7261 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -25,6 +25,7 @@ type Props = {
   noResults: boolean,
   noResultsMessage: string | Element<any>,
   noSelectedOptionCheckmark?: boolean,
+  optionHeight: number,
   optionRenderer: Function,
   options: Array<any>,
   optionsRef: ElementRef<*>,
@@ -51,6 +52,7 @@ export const OptionsSkin = (props: Props) => {
     noResults,
     noResultsMessage,
     noSelectedOptionCheckmark,
+    optionHeight,
     optionsMaxHeight,
     optionRenderer,
     options,
@@ -117,12 +119,18 @@ export const OptionsSkin = (props: Props) => {
     return option;
   };
 
+  const getScrollBarHeight = (): number => {
+    if (!options.length) return optionHeight;
+    if (optionsMaxHeight < options.length * optionHeight) {
+      return optionsMaxHeight;
+    }
+    return options.length * optionHeight;
+  };
+
   // Enforce max height of options dropdown if necessary
   const optionsStyle = optionsMaxHeight == null ? null : {
     maxHeight: `${optionsMaxHeight}px`
   };
-  const OPTION_HEIGHT = 46; // a single option's height is 46px by default
-  const scrollBarHeight = options.length ? options.length * OPTION_HEIGHT : OPTION_HEIGHT;
 
   return (
     <Bubble
@@ -149,7 +157,7 @@ export const OptionsSkin = (props: Props) => {
         onMouseEnter={() => setMouseIsOverOptions && setMouseIsOverOptions(true)}
         onMouseLeave={() => setMouseIsOverOptions && setMouseIsOverOptions(false)}
       >
-        <ScrollBar style={{ height: `${scrollBarHeight}px` }}>
+        <ScrollBar style={{ height: `${getScrollBarHeight()}px` }}>
           {renderOptions()}
         </ScrollBar>
       </ul>

From c1596377a968658aba92133c0645b82f91cd7685 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 27 Jan 2020 15:39:44 +0100
Subject: [PATCH 020/244] Add support for *.module.scss file name convention

---
 package.json                                 |   4 +-
 scripts/prepare-sass-files-for-publishing.js |  15 ++
 yarn.lock                                    | 190 ++++++++++++-------
 3 files changed, 137 insertions(+), 72 deletions(-)
 create mode 100644 scripts/prepare-sass-files-for-publishing.js

diff --git a/package.json b/package.json
index f52e1d8b..a88f9fb7 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "lint": "eslint --format=node_modules/eslint-formatter-pretty source stories *.js",
     "prepare": "yarn clean && yarn build",
     "postinstall": "postinstall-build lib --only-as-dependency",
-    "sass": "cpx \"./source/themes/**/*\" ./lib/themes",
+    "sass": "node 'scripts/prepare-sass-files-for-publishing.js'",
     "sass:watch": "nodemon -e scss --watch source/themes --exec 'yarn sass'",
     "storybook": "start-storybook -p 6543 -c storybook",
     "storybook:build": "build-storybook -c storybook -o dist/storybook",
@@ -48,7 +48,7 @@
     "babel-loader": "8.0.6",
     "babel-plugin-lodash": "3.3.4",
     "classnames": "2.2.5",
-    "cpx": "1.5.0",
+    "cpy": "8.0.0",
     "cross-env": "5.2.0",
     "css-loader": "3.2.0",
     "enzyme": "3.7.0",
diff --git a/scripts/prepare-sass-files-for-publishing.js b/scripts/prepare-sass-files-for-publishing.js
new file mode 100644
index 00000000..eee7002d
--- /dev/null
+++ b/scripts/prepare-sass-files-for-publishing.js
@@ -0,0 +1,15 @@
+const cpy = require('cpy');
+
+const copy = (rename) => cpy('**/*.scss', '../../lib/themes', {
+  cwd: 'source/themes',
+  rename,
+  parents: true,
+});
+
+// Copy sass files "normally" to lib folder:
+copy();
+// Copy them again as module.scss files:
+copy((basename) => {
+  const fileName = basename.substring(0, basename.indexOf('.scss'));
+  return `${fileName}.module.scss`;
+});
diff --git a/yarn.lock b/yarn.lock
index 6ac247d5..68cc3a57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1731,6 +1731,20 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/events@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
+  integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
+
+"@types/glob@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
+  integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
+  dependencies:
+    "@types/events" "*"
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
 "@types/history@*":
   version "4.7.3"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"
@@ -1761,6 +1775,11 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
+"@types/minimatch@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
+  integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
+
 "@types/node@*":
   version "10.1.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.1.2.tgz#1b928a0baa408fc8ae3ac012cc81375addc147c6"
@@ -2278,11 +2297,6 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
-array-filter@~0.0.0:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
-  integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=
-
 array-find-index@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
@@ -2301,17 +2315,7 @@ array-includes@^3.0.3:
     define-properties "^1.1.2"
     es-abstract "^1.7.0"
 
-array-map@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
-  integrity sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=
-
-array-reduce@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
-  integrity sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys=
-
-array-union@^1.0.1:
+array-union@^1.0.1, array-union@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
   integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
@@ -2356,6 +2360,11 @@ arrify@^1.0.0, arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
+arrify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
+  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
+
 asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -2855,7 +2864,7 @@ babel-preset-react-app@^9.0.0:
     babel-plugin-macros "2.6.1"
     babel-plugin-transform-react-remove-prop-types "0.4.24"
 
-babel-runtime@^6.18.0, babel-runtime@^6.26.0, babel-runtime@^6.9.2:
+babel-runtime@^6.18.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -3361,7 +3370,7 @@ cheerio@^1.0.0-rc.2:
     lodash "^4.15.0"
     parse5 "^3.0.1"
 
-chokidar@^1.6.0, chokidar@^1.7.0:
+chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
   integrity sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=
@@ -3840,22 +3849,28 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-cpx@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/cpx/-/cpx-1.5.0.tgz#185be018511d87270dedccc293171e37655ab88f"
-  integrity sha1-GFvgGFEdhycN7czCkxceN2VauI8=
+cp-file@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/cp-file/-/cp-file-7.0.0.tgz#b9454cfd07fe3b974ab9ea0e5f29655791a9b8cd"
+  integrity sha512-0Cbj7gyvFVApzpK/uhCtQ/9kE9UnYpxMzaq5nQQC/Dh4iaj5fxp7iEFIullrYwzj8nf0qnsI1Qsx34hAeAebvw==
   dependencies:
-    babel-runtime "^6.9.2"
-    chokidar "^1.6.0"
-    duplexer "^0.1.1"
-    glob "^7.0.5"
-    glob2base "^0.0.12"
-    minimatch "^3.0.2"
-    mkdirp "^0.5.1"
-    resolve "^1.1.7"
-    safe-buffer "^5.0.1"
-    shell-quote "^1.6.1"
-    subarg "^1.0.0"
+    graceful-fs "^4.1.2"
+    make-dir "^3.0.0"
+    nested-error-stacks "^2.0.0"
+    p-event "^4.1.0"
+
+cpy@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/cpy/-/cpy-8.0.0.tgz#8195db0db19a9ea6aa4f229784cbf3e3f53c3158"
+  integrity sha512-iTjLUqtVr45e17GFAyxA0lqFinbGMblMCTtAqrPzT/IETNtDuyyhDDk8weEZ08MiCc6EcuyNq2KtGH5J2BIAoQ==
+  dependencies:
+    arrify "^2.0.1"
+    cp-file "^7.0.0"
+    globby "^9.2.0"
+    is-glob "^4.0.1"
+    junk "^3.1.0"
+    nested-error-stacks "^2.1.0"
+    p-all "^2.1.0"
 
 create-ecdh@^4.0.0:
   version "4.0.3"
@@ -4313,6 +4328,13 @@ dir-glob@2.0.0:
     arrify "^1.0.1"
     path-type "^3.0.0"
 
+dir-glob@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
+  integrity sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==
+  dependencies:
+    path-type "^3.0.0"
+
 discontinuous-range@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
@@ -5230,7 +5252,7 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
-fast-glob@^2.0.2:
+fast-glob@^2.0.2, fast-glob@^2.2.6:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
   integrity sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==
@@ -5405,11 +5427,6 @@ find-cache-dir@^3.0.0:
     make-dir "^3.0.0"
     pkg-dir "^4.1.0"
 
-find-index@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/find-index/-/find-index-0.1.1.tgz#675d358b2ca3892d795a1ab47232f8b6e2e0dde4"
-  integrity sha1-Z101iyyjiS15Whq0cjL4tuLg3eQ=
-
 find-root@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
@@ -5760,13 +5777,6 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob2base@^0.0.12:
-  version "0.0.12"
-  resolved "https://registry.yarnpkg.com/glob2base/-/glob2base-0.0.12.tgz#9d419b3e28f12e83a362164a277055922c9c0d56"
-  integrity sha1-nUGbPijxLoOjYhZKJ3BVkiycDVY=
-  dependencies:
-    find-index "^0.1.1"
-
 glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@~7.1.1:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
@@ -5869,6 +5879,20 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globby@^9.2.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-9.2.0.tgz#fd029a706c703d29bdd170f4b6db3a3f7a7cb63d"
+  integrity sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==
+  dependencies:
+    "@types/glob" "^7.1.1"
+    array-union "^1.0.2"
+    dir-glob "^2.2.2"
+    fast-glob "^2.2.6"
+    glob "^7.1.3"
+    ignore "^4.0.3"
+    pify "^4.0.1"
+    slash "^2.0.0"
+
 globule@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.0.tgz#1dc49c6822dd9e8a2fa00ba2a295006e8664bd09"
@@ -6266,6 +6290,11 @@ ignore@^3.3.5:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
   integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
+ignore@^4.0.3:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
 immer@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
@@ -6685,6 +6714,13 @@ is-glob@^4.0.0:
   dependencies:
     is-extglob "^2.1.1"
 
+is-glob@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+  dependencies:
+    is-extglob "^2.1.1"
+
 is-hexadecimal@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.3.tgz#e8a426a69b6d31470d3a33a47bb825cda02506ee"
@@ -7477,11 +7513,6 @@ jsonfile@^4.0.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-jsonify@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
-  integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
-
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -7504,6 +7535,11 @@ jsx-ast-utils@^2.0.0:
   dependencies:
     array-includes "^3.0.3"
 
+junk@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1"
+  integrity sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==
+
 kind-of@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
@@ -8223,7 +8259,7 @@ minimist@0.0.8:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
   integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
 
-minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
+minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
@@ -8390,6 +8426,11 @@ neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
 
+nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz#0fbdcf3e13fe4994781280524f8b96b0cdff9c61"
+  integrity sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug==
+
 nice-try@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.4.tgz#d93962f6c52f2c1558c0fbda6d512819f1efe1c4"
@@ -8918,6 +8959,13 @@ osenv@0, osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
+p-all@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-all/-/p-all-2.1.0.tgz#91419be56b7dee8fe4c5db875d55e0da084244a0"
+  integrity sha512-HbZxz5FONzz/z2gJfk6bFca0BCiSRF8jU3yCsWOen/vR6lZjfPOu/e7L3uFzTW1i0H8TlC3vqQstEJPQL4/uLA==
+  dependencies:
+    p-map "^2.0.0"
+
 p-each-series@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
@@ -8925,6 +8973,13 @@ p-each-series@^1.0.0:
   dependencies:
     p-reduce "^1.0.0"
 
+p-event@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-event/-/p-event-4.1.0.tgz#e92bb866d7e8e5b732293b1c8269d38e9982bf8e"
+  integrity sha512-4vAd06GCsgflX4wHN1JqrMzBh/8QZ4j+rzp0cd2scXRwuBEv+QR3wrVA5aLhWDLw4y2WgDKvzWF3CCLmVM1UgA==
+  dependencies:
+    p-timeout "^2.0.1"
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -8965,11 +9020,23 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
+p-map@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
+  integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
+
 p-reduce@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
   integrity sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=
 
+p-timeout@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-2.0.1.tgz#d8dd1979595d2dc0139e1fe46b8b646cb3cdf038"
+  integrity sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==
+  dependencies:
+    p-finally "^1.0.0"
+
 p-try@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
@@ -10504,7 +10571,7 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.5.0, resolve@^1.6.0:
+resolve@^1.1.6, resolve@^1.5.0, resolve@^1.6.0:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
   integrity sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==
@@ -10889,16 +10956,6 @@ shell-quote@1.7.2:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
-shell-quote@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
-  integrity sha1-9HgZSczkAmlxJ0MOo7PFR29IF2c=
-  dependencies:
-    array-filter "~0.0.0"
-    array-map "~0.0.0"
-    array-reduce "~0.0.0"
-    jsonify "~0.0.0"
-
 shelljs@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.3.tgz#a7f3319520ebf09ee81275b2368adb286659b097"
@@ -11385,13 +11442,6 @@ style-loader@^0.23.1:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
 
-subarg@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
-  integrity sha1-9izxdYHplrSPyWVpn1TAauJouNI=
-  dependencies:
-    minimist "^1.1.0"
-
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"

From 05cf42423912cfa328b91330ed810580dc2baf50 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Fri, 31 Jan 2020 07:45:31 -0300
Subject: [PATCH 021/244] [DDW-829] Adds big countries list for testing

---
 stories/Options.stories.js | 199 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 195 insertions(+), 4 deletions(-)

diff --git a/stories/Options.stories.js b/stories/Options.stories.js
index 724ae601..bc97b86b 100644
--- a/stories/Options.stories.js
+++ b/stories/Options.stories.js
@@ -17,10 +17,201 @@ import CustomOptionsTheme from './theme-customizations/Options.custom.scss';
 import { decorateWithSimpleTheme } from './helpers/theming';
 
 const OPTIONS_COLLECTION = [
-  { value: 'EN-gb', label: 'England' },
-  { value: 'ES-es', label: 'Spain' },
-  { value: 'TH-th', label: 'Thailand' },
-  { value: 'EN-en', label: 'USA' }
+  { value: '1', label: 'Afghanistan' },
+  { value: '2', label: 'Albania' },
+  { value: '3', label: 'Algeria' },
+  { value: '4', label: 'Andorra' },
+  { value: '5', label: 'Angola' },
+  { value: '6', label: 'Antigua and Barbuda' },
+  { value: '7', label: 'Argentina' },
+  { value: '8', label: 'Armenia' },
+  { value: '9', label: 'Australia' },
+  { value: '10', label: 'Austria' },
+  { value: '11', label: 'Azerbaijan' },
+  { value: '12', label: 'Bahamas' },
+  { value: '13', label: 'Bahrain' },
+  { value: '14', label: 'Bangladesh' },
+  { value: '15', label: 'Barbados' },
+  { value: '16', label: 'Belarus' },
+  { value: '17', label: 'Belgium' },
+  { value: '18', label: 'Belize' },
+  { value: '19', label: 'Benin' },
+  { value: '20', label: 'Bhutan' },
+  { value: '21', label: 'Bolivia' },
+  { value: '22', label: 'Bosnia and Herzegovina' },
+  { value: '23', label: 'Botswana' },
+  { value: '24', label: 'Brazil' },
+  { value: '25', label: 'Brunei' },
+  { value: '26', label: 'Bulgaria' },
+  { value: '27', label: 'Burkina Faso' },
+  { value: '28', label: 'Burundi' },
+  { value: '29', label: 'Côte d\'Ivoire' },
+  { value: '30', label: 'Cabo Verde' },
+  { value: '31', label: 'Cambodia' },
+  { value: '32', label: 'Cameroon' },
+  { value: '33', label: 'Canada' },
+  { value: '34', label: 'Central African Republic' },
+  { value: '35', label: 'Chad' },
+  { value: '36', label: 'Chile' },
+  { value: '37', label: 'China' },
+  { value: '38', label: 'Colombia' },
+  { value: '39', label: 'Comoros' },
+  { value: '40', label: 'Congo (Congo-Brazzaville)' },
+  { value: '41', label: 'Costa Rica' },
+  { value: '42', label: 'Croatia' },
+  { value: '43', label: 'Cuba' },
+  { value: '44', label: 'Cyprus' },
+  { value: '45', label: 'Czechia (Czech Republic)' },
+  { value: '46', label: 'Democratic Republic of the Congo' },
+  { value: '47', label: 'Denmark' },
+  { value: '48', label: 'Djibouti' },
+  { value: '49', label: 'Dominica' },
+  { value: '50', label: 'Dominican Republic' },
+  { value: '51', label: 'Ecuador' },
+  { value: '52', label: 'Egypt' },
+  { value: '53', label: 'El Salvador' },
+  { value: '54', label: 'Equatorial Guinea' },
+  { value: '55', label: 'Eritrea' },
+  { value: '56', label: 'Estonia' },
+  { value: '57', label: 'Eswatini (fmr. "Swaziland")' },
+  { value: '58', label: 'Ethiopia' },
+  { value: '59', label: 'Fiji' },
+  { value: '60', label: 'Finland' },
+  { value: '61', label: 'France' },
+  { value: '62', label: 'Gabon' },
+  { value: '63', label: 'Gambia' },
+  { value: '64', label: 'Georgia' },
+  { value: '65', label: 'Germany' },
+  { value: '66', label: 'Ghana' },
+  { value: '67', label: 'Greece' },
+  { value: '68', label: 'Grenada' },
+  { value: '69', label: 'Guatemala' },
+  { value: '70', label: 'Guinea' },
+  { value: '71', label: 'Guinea-Bissau' },
+  { value: '72', label: 'Guyana' },
+  { value: '73', label: 'Haiti' },
+  { value: '74', label: 'Holy See' },
+  { value: '75', label: 'Honduras' },
+  { value: '76', label: 'Hungary' },
+  { value: '77', label: 'Iceland' },
+  { value: '78', label: 'India' },
+  { value: '79', label: 'Indonesia' },
+  { value: '80', label: 'Iran' },
+  { value: '81', label: 'Iraq' },
+  { value: '82', label: 'Ireland' },
+  { value: '83', label: 'Israel' },
+  { value: '84', label: 'Italy' },
+  { value: '85', label: 'Jamaica' },
+  { value: '86', label: 'Japan' },
+  { value: '87', label: 'Jordan' },
+  { value: '88', label: 'Kazakhstan' },
+  { value: '89', label: 'Kenya' },
+  { value: '90', label: 'Kiribati' },
+  { value: '91', label: 'Kuwait' },
+  { value: '92', label: 'Kyrgyzstan' },
+  { value: '93', label: 'Laos' },
+  { value: '94', label: 'Latvia' },
+  { value: '95', label: 'Lebanon' },
+  { value: '96', label: 'Lesotho' },
+  { value: '97', label: 'Liberia' },
+  { value: '98', label: 'Libya' },
+  { value: '99', label: 'Liechtenstein' },
+  { value: '100', label: 'Lithuania' },
+  { value: '101', label: 'Luxembourg' },
+  { value: '102', label: 'Madagascar' },
+  { value: '103', label: 'Malawi' },
+  { value: '104', label: 'Malaysia' },
+  { value: '105', label: 'Maldives' },
+  { value: '106', label: 'Mali' },
+  { value: '107', label: 'Malta' },
+  { value: '108', label: 'Marshall Islands' },
+  { value: '109', label: 'Mauritania' },
+  { value: '110', label: 'Mauritius' },
+  { value: '111', label: 'Mexico' },
+  { value: '112', label: 'Micronesia' },
+  { value: '113', label: 'Moldova' },
+  { value: '114', label: 'Monaco' },
+  { value: '115', label: 'Mongolia' },
+  { value: '116', label: 'Montenegro' },
+  { value: '117', label: 'Morocco' },
+  { value: '118', label: 'Mozambique' },
+  { value: '119', label: 'Myanmar (formerly Burma)' },
+  { value: '120', label: 'Namibia' },
+  { value: '121', label: 'Nauru' },
+  { value: '122', label: 'Nepal' },
+  { value: '123', label: 'Netherlands' },
+  { value: '124', label: 'New Zealand' },
+  { value: '125', label: 'Nicaragua' },
+  { value: '126', label: 'Niger' },
+  { value: '127', label: 'Nigeria' },
+  { value: '128', label: 'North Korea' },
+  { value: '129', label: 'North Macedonia' },
+  { value: '130', label: 'Norway' },
+  { value: '131', label: 'Oman' },
+  { value: '132', label: 'Pakistan' },
+  { value: '133', label: 'Palau' },
+  { value: '134', label: 'Palestine State' },
+  { value: '135', label: 'Panama' },
+  { value: '136', label: 'Papua New Guinea' },
+  { value: '137', label: 'Paraguay' },
+  { value: '138', label: 'Peru' },
+  { value: '139', label: 'Philippines' },
+  { value: '140', label: 'Poland' },
+  { value: '141', label: 'Portugal' },
+  { value: '142', label: 'Qatar' },
+  { value: '143', label: 'Romania' },
+  { value: '144', label: 'Russia' },
+  { value: '145', label: 'Rwanda' },
+  { value: '146', label: 'Saint Kitts and Nevis' },
+  { value: '147', label: 'Saint Lucia' },
+  { value: '148', label: 'Saint Vincent and the Grenadines' },
+  { value: '149', label: 'Samoa' },
+  { value: '150', label: 'San Marino' },
+  { value: '151', label: 'Sao Tome and Principe' },
+  { value: '152', label: 'Saudi Arabia' },
+  { value: '153', label: 'Senegal' },
+  { value: '154', label: 'Serbia' },
+  { value: '155', label: 'Seychelles' },
+  { value: '156', label: 'Sierra Leone' },
+  { value: '157', label: 'Singapore' },
+  { value: '158', label: 'Slovakia' },
+  { value: '159', label: 'Slovenia' },
+  { value: '160', label: 'Solomon Islands' },
+  { value: '161', label: 'Somalia' },
+  { value: '162', label: 'South Africa' },
+  { value: '163', label: 'South Korea' },
+  { value: '164', label: 'South Sudan' },
+  { value: '165', label: 'Spain' },
+  { value: '166', label: 'Sri Lanka' },
+  { value: '167', label: 'Sudan' },
+  { value: '168', label: 'Suriname' },
+  { value: '169', label: 'Sweden' },
+  { value: '170', label: 'Switzerland' },
+  { value: '171', label: 'Syria' },
+  { value: '172', label: 'Tajikistan' },
+  { value: '173', label: 'Tanzania' },
+  { value: '174', label: 'Thailand' },
+  { value: '175', label: 'Timor-Leste' },
+  { value: '176', label: 'Togo' },
+  { value: '177', label: 'Tonga' },
+  { value: '178', label: 'Trinidad and Tobago' },
+  { value: '179', label: 'Tunisia' },
+  { value: '180', label: 'Turkey' },
+  { value: '181', label: 'Turkmenistan' },
+  { value: '182', label: 'Tuvalu' },
+  { value: '183', label: 'Uganda' },
+  { value: '184', label: 'Ukraine' },
+  { value: '185', label: 'United Arab Emirates' },
+  { value: '186', label: 'United Kingdom' },
+  { value: '187', label: 'United States of America' },
+  { value: '188', label: 'Uruguay' },
+  { value: '189', label: 'Uzbekistan' },
+  { value: '190', label: 'Vanuatu' },
+  { value: '191', label: 'Venezuela' },
+  { value: '192', label: 'Vietnam' },
+  { value: '193', label: 'Yemen' },
+  { value: '194', label: 'Zambia' },
+  { value: '195', label: 'Zimbabwe' },
 ];
 
 const MNEMONIC_WORDS = [

From 5c5c60e4407994d6e7cb7b1557a887b4746db487 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 3 Feb 2020 21:58:20 +0100
Subject: [PATCH 022/244] [DDW-829] Use maintained custom scrollbars package

---
 package.json                              |  6 +-
 source/skins/simple/ScrollBarSkin.js      | 15 ++--
 source/themes/API/scrollbar.js            |  2 +-
 source/themes/simple/SimpleScrollBar.scss | 57 ++++++++++++----
 stories/ScrollBar.stories.js              |  6 +-
 yarn.lock                                 | 83 ++++++++---------------
 6 files changed, 86 insertions(+), 83 deletions(-)

diff --git a/package.json b/package.json
index b191ea21..401d0b0c 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "postinstall": "postinstall-build lib --only-as-dependency",
     "sass": "node 'scripts/prepare-sass-files-for-publishing.js'",
     "sass:watch": "nodemon -e scss --watch source/themes --exec 'yarn sass'",
-    "storybook": "start-storybook -p 6543 -c storybook",
+    "storybook": "start-storybook -p 6543 -c storybook --ci",
     "storybook:build": "build-storybook -c storybook -o dist/storybook",
     "test": "cross-env NODE_ENV=test jest",
     "test:clean": "cross-env NODE_ENV=test jest -u",
@@ -25,8 +25,8 @@
     "create-react-ref": "0.1.0",
     "filter-react-dom-props": "0.0.2",
     "postinstall-build": "5.0.1",
-    "react-custom-scrollbars": "4.2.1",
-    "react-modal": "3.1.12"
+    "react-modal": "3.1.12",
+    "react-scrollbars-custom": "4.0.21"
   },
   "peerDependencies": {
     "classnames": ">=2",
diff --git a/source/skins/simple/ScrollBarSkin.js b/source/skins/simple/ScrollBarSkin.js
index 5e404768..7551cb45 100644
--- a/source/skins/simple/ScrollBarSkin.js
+++ b/source/skins/simple/ScrollBarSkin.js
@@ -2,7 +2,7 @@
 import React from 'react';
 
 // external libraries
-import { Scrollbars } from 'react-custom-scrollbars';
+import CustomScrollBar from 'react-scrollbars-custom';
 
 type Props = {
   children: Node,
@@ -16,14 +16,11 @@ export const ScrollBarSkin = (props: Props) => {
   const { children, style, themeId } = props;
   const theme = props.theme[themeId];
 
-  const renderThumb = (thumbProps: any) => <div {...thumbProps} className={theme.thumb} />;
-
   return (
-    <Scrollbars
-      style={style}
-      renderThumbVertical={renderThumb}
-    >
-      {children}
-    </Scrollbars>
+    <div className={theme.root}>
+      <CustomScrollBar style={style} noDefaultStyles>
+        {children}
+      </CustomScrollBar>
+    </div>
   );
 };
diff --git a/source/themes/API/scrollbar.js b/source/themes/API/scrollbar.js
index 42897d2e..8f01b61f 100644
--- a/source/themes/API/scrollbar.js
+++ b/source/themes/API/scrollbar.js
@@ -1,4 +1,4 @@
 // @flow
 export const SCROLLBAR_THEME_API = {
-  thumb: '',
+  root: '',
 };
diff --git a/source/themes/simple/SimpleScrollBar.scss b/source/themes/simple/SimpleScrollBar.scss
index 9b17e2ed..a94164f1 100644
--- a/source/themes/simple/SimpleScrollBar.scss
+++ b/source/themes/simple/SimpleScrollBar.scss
@@ -2,20 +2,51 @@
 
 // OVERRIDABLE CONFIGURATION VARIABLES
 
-$scrollbar-thumb-bg-color: var(--rp-scrollbar-thumb-bg-color, rgba(255, 255, 255, 0.1)) !default;
-$scrollbar-thumb-bg-color-active: var(--rp-scrollbar-thumb-bg-color-active, rgba(255, 255, 255, 0.3)) !default;
-$scrollbar-thumb-bg-color-hover: var(--rp-scrollbar-thumb-bg-color-hover, rgba(255, 255, 255, 0.3)) !default;
+// TRACK
+$scrollbar-track-bg: var(--rp-scrollbar-track-bg, transparent) !default;
+$scrollbar-track-width: var(--rp-scrollbar-track-width, 10px) !default;
+// THUMB
+$scrollbar-thumb-width: var(--rp-scrollbar-thumb-width, 6px) !default;
+$scrollbar-thumb-bg-color: var(--rp-scrollbar-thumb-bg-color, rgba(0, 0, 0, 0.1)) !default;
+$scrollbar-thumb-bg-color-active: var(--rp-scrollbar-thumb-bg-color-active, rgba(0, 0, 0, 0.3)) !default;
+$scrollbar-thumb-bg-color-hover: var(--rp-scrollbar-thumb-bg-color-hover, rgba(0, 0, 0, 0.3)) !default;
 $scrollbar-thumb-border-radius: var(--rp-scrollbar-thumb-border-radius, 3px) !default;
+$scrollbar-thumb-left-position: var(--rp-scrollbar-thumb-left-position, calc((#{$scrollbar-track-width} - #{$scrollbar-thumb-width})/2)) !default;
 
-.thumb {
- background-color: $scrollbar-thumb-bg-color;
- border-radius: $scrollbar-thumb-border-radius;
+.root {
+  :global {
 
- &:active {
-   background-color: $scrollbar-thumb-bg-color-active;
- }
+    .ScrollbarsCustom-Wrapper {
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    }
 
- &:hover {
-   background-color: $scrollbar-thumb-bg-color-hover;
- }
-}
\ No newline at end of file
+    .ScrollbarsCustom-Track {
+      position: absolute;
+      overflow: hidden;
+      user-select: none;
+      width: $scrollbar-track-width;
+      height: 100%;
+      right: 0;
+      background: $scrollbar-track-bg;
+    }
+
+    .ScrollbarsCustom-Thumb {
+      width: $scrollbar-thumb-width;
+      position: relative;
+      left: $scrollbar-thumb-left-position;
+      background-color: $scrollbar-thumb-bg-color;
+      border-radius: $scrollbar-thumb-border-radius;
+
+      &:active {
+        background-color: $scrollbar-thumb-bg-color-active;
+      }
+
+      &:hover {
+        background-color: $scrollbar-thumb-bg-color-hover;
+      }
+    }
+  }
+}
diff --git a/stories/ScrollBar.stories.js b/stories/ScrollBar.stories.js
index 7f1955ca..135b22f3 100644
--- a/stories/ScrollBar.stories.js
+++ b/stories/ScrollBar.stories.js
@@ -20,9 +20,11 @@ storiesOf('ScrollBar', module)
   // ====== Stories ======
 
   .add('plain', () => (
-    <ScrollBar style={{ height: '1000px' }}>
+    <ScrollBar style={{ height: '100px' }}>
       <div className={styles.padding}>
-        <p>Scroll Me</p>
+        <p>
+          Cras elementum lacus eu dictum vestibulum. Donec eros dui, cursus ut finibus vel, interdum et sem. Sed sed diam dui. Suspendisse at eros non felis faucibus consectetur. Nullam non eleifend sapien. In porttitor est in arcu auctor interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eu sem euismod, dignissim orci sit amet, facilisis leo. Nulla at tempus sapien. Nunc pharetra eros at ex aliquam rutrum. Nunc quis iaculis nulla. Ut semper nisi in felis aliquam, vitae tincidunt erat tristique. Sed lobortis vulputate enim nec feugiat. Suspendisse maximus purus vitae elementum ullamcorper. Praesent fermentum, odio interdum gravida tempus, orci diam volutpat nisl, in sodales erat felis eget lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec egestas lorem. In hac habitasse platea dictumst. Donec laoreet felis id enim tempus, id finibus mauris faucibus. Maecenas sed risus sed quam finibus sollicitudin. Donec dictum id elit in faucibus. Sed pretium cursus tempus. Duis pulvinar, felis sit amet aliquam placerat, dolor risus finibus erat, et convallis velit lacus eget lorem. Etiam bibendum ex ac finibus tincidunt. Fusce elementum semper nunc sodales egestas. Maecenas eu facilisis metus. Suspendisse at eleifend lorem, feugiat tempor ligula. Vivamus dictum metus tortor, et dictum nibh sodales eu. Nulla ut iaculis tellus, eu convallis nulla. Proin mollis dui nec quam accumsan, sed pharetra velit elementum. Suspendisse vitae purus sollicitudin, posuere justo in, mattis nisl. Cras elementum lacus eu dictum vestibulum. Donec eros dui, cursus ut finibus vel, interdum et sem. Sed sed diam dui. Suspendisse at eros non felis faucibus consectetur. Nullam non eleifend sapien
+        </p>
       </div>
     </ScrollBar>
   ));
diff --git a/yarn.lock b/yarn.lock
index a9c4e187..34532045 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2055,11 +2055,6 @@ acorn@^6.2.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.0.tgz#b659d2ffbafa24baf5db1cdbb2c94a983ecd2784"
   integrity sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==
 
-add-px-to-style@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a"
-  integrity sha1-0ME1RB+oAUqBN5BFMQlvZ/KPJjo=
-
 address@1.1.2, address@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -3575,6 +3570,11 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
+cnbuilder@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/cnbuilder/-/cnbuilder-1.1.7.tgz#04ef08d278efd69bc65a95b087328455a85a2eef"
+  integrity sha512-8D9dpabOVOh7GX/qPZ60sJpqxHaiLqSDsuZOYH1TvoNkgMrO7BJHCbNepHHoglSdU//M2sjLHaL9Vu0qibSV2A==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -3864,7 +3864,7 @@ cp-file@^7.0.0:
     nested-error-stacks "^2.0.0"
     p-event "^4.1.0"
 
-cpy@^8.0.0:
+cpy@8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/cpy/-/cpy-8.0.0.tgz#8195db0db19a9ea6aa4f229784cbf3e3f53c3158"
   integrity sha512-iTjLUqtVr45e17GFAyxA0lqFinbGMblMCTtAqrPzT/IETNtDuyyhDDk8weEZ08MiCc6EcuyNq2KtGH5J2BIAoQ==
@@ -4379,15 +4379,6 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
-dom-css@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202"
-  integrity sha1-/bwtWgFdCj4YcuEUcrvQ57nmogI=
-  dependencies:
-    add-px-to-style "1.0.0"
-    prefix-style "2.0.1"
-    to-camel-case "1.0.0"
-
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -9481,11 +9472,6 @@ postinstall-build@5.0.1:
   resolved "https://registry.yarnpkg.com/postinstall-build/-/postinstall-build-5.0.1.tgz#b917a9079b26178d9a24af5a5cd8cb4a991d11b9"
   integrity sha1-uRepB5smF42aJK9aXNjLSpkdEbk=
 
-prefix-style@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"
-  integrity sha1-ZrupqHDP2jCKXcIOhekSCTLJWgY=
-
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -9787,13 +9773,6 @@ querystringify@^2.1.1:
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
   integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
 
-raf@^3.1.0:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
-  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
-  dependencies:
-    performance-now "^2.1.0"
-
 raf@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
@@ -9903,15 +9882,6 @@ react-clientside-effect@^1.2.0:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
-react-custom-scrollbars@4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db"
-  integrity sha1-gw/ZUCkn6X6KeMIIaBOJmyqLZts=
-  dependencies:
-    dom-css "^2.0.0"
-    prop-types "^15.5.10"
-    raf "^3.1.0"
-
 react-dev-utils@^9.0.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
@@ -9976,6 +9946,14 @@ react-dom@^16.8.3:
     prop-types "^15.6.2"
     scheduler "^0.18.0"
 
+react-draggable@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-3.3.2.tgz#966ef1d90f2387af3c2d8bd3516f601ea42ca359"
+  integrity sha512-oaz8a6enjbPtx5qb0oDWxtDNuybOylvto1QLydsXgKmwT7e3GXC2eMVDwEMIUYJIFqVG72XpOv673UuuAq6LhA==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react-draggable@^4.0.3:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.1.0.tgz#e1c5b774001e32f0bff397254e1e9d5448ac92a4"
@@ -10094,6 +10072,15 @@ react-popper@^1.3.6:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-scrollbars-custom@4.0.21:
+  version "4.0.21"
+  resolved "https://registry.yarnpkg.com/react-scrollbars-custom/-/react-scrollbars-custom-4.0.21.tgz#daab3104b9707033a5be29fdc5b7408dee41a5ad"
+  integrity sha512-EwIVXBYsZG91Wm90a8ajSjpclXMu3XehcSGz+QbnLDQbmc+Rj/Uj+gP9bgbhyvQTKlhfjoka77VEWu9/DxOwBg==
+  dependencies:
+    cnbuilder "^1.1.7"
+    react-draggable "^3.3.2"
+    zoom-level "^1.2.4"
+
 react-sizeme@^2.6.7:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.10.tgz#9993dcb5e67fab94a8e5d078a0d3820609010f17"
@@ -11688,23 +11675,11 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
-to-camel-case@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46"
-  integrity sha1-GlYFSy+daWKYzmamCJcyK29CPkY=
-  dependencies:
-    to-space-case "^1.0.0"
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
-to-no-case@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
-  integrity sha1-xyKQcWTvaxeBMsjmmTAhLRtKoWo=
-
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
@@ -11730,13 +11705,6 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
-to-space-case@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
-  integrity sha1-sFLar7Gysp3HcM6gFj5ewOvJ/Bc=
-  dependencies:
-    to-no-case "^1.0.0"
-
 toggle-selection@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
@@ -12519,3 +12487,8 @@ yargs@^7.0.0:
     which-module "^1.0.0"
     y18n "^3.2.1"
     yargs-parser "^5.0.0"
+
+zoom-level@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/zoom-level/-/zoom-level-1.2.4.tgz#52bc5ae3af945cac82f9f685e8707fa2c9b962e2"
+  integrity sha512-nGFUhyU3Y4jWh6l+hYCVVUxu3vrD0i/RkumJRzYGU0COMWMs2Szs84mltacd64R9zJcxwKckWQN/KKbfB1btVA==

From 1917deb18177eba6996113be209b8277271f9d36 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Mon, 3 Feb 2020 18:06:11 -0500
Subject: [PATCH 023/244] [DDW-829] Fixes ESLint warning in ScrollBar story

---
 stories/ScrollBar.stories.js   | 35 +++++++++++++++++++++++++++++++++-
 stories/ScrollBar.stories.scss |  1 +
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/stories/ScrollBar.stories.js b/stories/ScrollBar.stories.js
index 135b22f3..70daeee3 100644
--- a/stories/ScrollBar.stories.js
+++ b/stories/ScrollBar.stories.js
@@ -23,7 +23,40 @@ storiesOf('ScrollBar', module)
     <ScrollBar style={{ height: '100px' }}>
       <div className={styles.padding}>
         <p>
-          Cras elementum lacus eu dictum vestibulum. Donec eros dui, cursus ut finibus vel, interdum et sem. Sed sed diam dui. Suspendisse at eros non felis faucibus consectetur. Nullam non eleifend sapien. In porttitor est in arcu auctor interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eu sem euismod, dignissim orci sit amet, facilisis leo. Nulla at tempus sapien. Nunc pharetra eros at ex aliquam rutrum. Nunc quis iaculis nulla. Ut semper nisi in felis aliquam, vitae tincidunt erat tristique. Sed lobortis vulputate enim nec feugiat. Suspendisse maximus purus vitae elementum ullamcorper. Praesent fermentum, odio interdum gravida tempus, orci diam volutpat nisl, in sodales erat felis eget lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean nec egestas lorem. In hac habitasse platea dictumst. Donec laoreet felis id enim tempus, id finibus mauris faucibus. Maecenas sed risus sed quam finibus sollicitudin. Donec dictum id elit in faucibus. Sed pretium cursus tempus. Duis pulvinar, felis sit amet aliquam placerat, dolor risus finibus erat, et convallis velit lacus eget lorem. Etiam bibendum ex ac finibus tincidunt. Fusce elementum semper nunc sodales egestas. Maecenas eu facilisis metus. Suspendisse at eleifend lorem, feugiat tempor ligula. Vivamus dictum metus tortor, et dictum nibh sodales eu. Nulla ut iaculis tellus, eu convallis nulla. Proin mollis dui nec quam accumsan, sed pharetra velit elementum. Suspendisse vitae purus sollicitudin, posuere justo in, mattis nisl. Cras elementum lacus eu dictum vestibulum. Donec eros dui, cursus ut finibus vel, interdum et sem. Sed sed diam dui. Suspendisse at eros non felis faucibus consectetur. Nullam non eleifend sapien
+          Cras elementum lacus eu dictum vestibulum.
+          Donec eros dui, cursus ut finibus vel, interdum et sem.
+          Sed sed diam dui. Suspendisse at eros non felis faucibus consectetur.
+          Nullam non eleifend sapien. In porttitor est in arcu auctor interdum.
+          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+          Pellentesque eu sem euismod, dignissim orci sit amet, facilisis leo.
+          Nunc pharetra eros at ex aliquam rutrum. Nunc quis iaculis nulla.
+          Ut semper nisi in felis aliquam, vitae tincidunt erat tristique.
+          Sed lobortis vulputate enim nec feugiat.
+          Suspendisse maximus purus vitae elementum ullamcorper.
+          Praesent fermentum, odio interdum gravida tempus, orci diam volutpat nisl,
+          in sodales erat felis eget lorem.
+          Pellentesque habitant morbi tristique senectus.
+          Aenean nec egestas lorem. In hac habitasse platea dictumst.
+          Donec laoreet felis id enim tempus, id finibus mauris faucibus.
+          Maecenas sed risus sed quam finibus sollicitudin.
+          Donec dictum id elit in faucibus. Sed pretium cursus tempus.
+          Duis pulvinar, felis sit amet aliquam placerat, dolor risus finibus erat,
+          et convallis velit lacus eget lorem. Etiam bibendum ex ac finibus tincidunt.
+          Fusce elementum semper nunc sodales egestas. Maecenas eu facilisis metus.
+          Suspendisse at eleifend lorem, feugiat tempor ligula.
+          Vivamus dictum metus tortor, et dictum nibh sodales eu.
+          Nulla ut iaculis tellus, eu convallis nulla.
+          Proin mollis dui nec quam accumsan, sed pharetra velit elementum.
+          Suspendisse vitae purus sollicitudin, posuere justo in, mattis nisl.
+          Cras elementum lacus eu dictum vestibulum.
+          Donec eros dui, cursus ut finibus vel, interdum et sem. Sed sed diam dui.
+          Suspendisse at eros non felis faucibus consectetur.
+          Nulla ut iaculis tellus, eu convallis nulla.
+          Proin mollis dui nec quam accumsan, sed pharetra velit elementum.
+          Suspendisse vitae purus sollicitudin, posuere justo in, mattis nisl.
+          Cras elementum lacus eu dictum vestibulum.
+          Donec eros dui, cursus ut finibus vel, interdum et sem. Sed sed diam dui.
+          Suspendisse at eros non felis faucibus consectetur.
         </p>
       </div>
     </ScrollBar>
diff --git a/stories/ScrollBar.stories.scss b/stories/ScrollBar.stories.scss
index 3521e855..a3306603 100644
--- a/stories/ScrollBar.stories.scss
+++ b/stories/ScrollBar.stories.scss
@@ -3,5 +3,6 @@
 
  p {
   font-family: Arial, Helvetica, sans-serif;
+  line-height: 30px;
  }
 }
\ No newline at end of file

From 64e74b9d06946ca8224c67557c886cc4042eaf4a Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Mon, 3 Feb 2020 18:10:58 -0500
Subject: [PATCH 024/244] [DDW-829] Arranges ScrollBar scss vars in ABC order

---
 source/themes/simple/SimpleScrollBar.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/source/themes/simple/SimpleScrollBar.scss b/source/themes/simple/SimpleScrollBar.scss
index a94164f1..4f8c2c4f 100644
--- a/source/themes/simple/SimpleScrollBar.scss
+++ b/source/themes/simple/SimpleScrollBar.scss
@@ -2,16 +2,17 @@
 
 // OVERRIDABLE CONFIGURATION VARIABLES
 
-// TRACK
+// track
 $scrollbar-track-bg: var(--rp-scrollbar-track-bg, transparent) !default;
 $scrollbar-track-width: var(--rp-scrollbar-track-width, 10px) !default;
-// THUMB
-$scrollbar-thumb-width: var(--rp-scrollbar-thumb-width, 6px) !default;
+
+// thumb
 $scrollbar-thumb-bg-color: var(--rp-scrollbar-thumb-bg-color, rgba(0, 0, 0, 0.1)) !default;
 $scrollbar-thumb-bg-color-active: var(--rp-scrollbar-thumb-bg-color-active, rgba(0, 0, 0, 0.3)) !default;
 $scrollbar-thumb-bg-color-hover: var(--rp-scrollbar-thumb-bg-color-hover, rgba(0, 0, 0, 0.3)) !default;
 $scrollbar-thumb-border-radius: var(--rp-scrollbar-thumb-border-radius, 3px) !default;
 $scrollbar-thumb-left-position: var(--rp-scrollbar-thumb-left-position, calc((#{$scrollbar-track-width} - #{$scrollbar-thumb-width})/2)) !default;
+$scrollbar-thumb-width: var(--rp-scrollbar-thumb-width, 6px) !default;
 
 .root {
   :global {

From 5714fc792e1278fba0bdd66deba381fe2fa010ba Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Mon, 3 Feb 2020 18:34:27 -0500
Subject: [PATCH 025/244] [DDW-829] Makes ScrollBar thumb darker

---
 source/themes/simple/SimpleScrollBar.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/source/themes/simple/SimpleScrollBar.scss b/source/themes/simple/SimpleScrollBar.scss
index 4f8c2c4f..a5b042ec 100644
--- a/source/themes/simple/SimpleScrollBar.scss
+++ b/source/themes/simple/SimpleScrollBar.scss
@@ -7,12 +7,12 @@ $scrollbar-track-bg: var(--rp-scrollbar-track-bg, transparent) !default;
 $scrollbar-track-width: var(--rp-scrollbar-track-width, 10px) !default;
 
 // thumb
-$scrollbar-thumb-bg-color: var(--rp-scrollbar-thumb-bg-color, rgba(0, 0, 0, 0.1)) !default;
-$scrollbar-thumb-bg-color-active: var(--rp-scrollbar-thumb-bg-color-active, rgba(0, 0, 0, 0.3)) !default;
-$scrollbar-thumb-bg-color-hover: var(--rp-scrollbar-thumb-bg-color-hover, rgba(0, 0, 0, 0.3)) !default;
+$scrollbar-thumb-bg-color: var(--rp-scrollbar-thumb-bg-color, rgba(0, 0, 0, 0.3)) !default;
+$scrollbar-thumb-bg-color-active: var(--rp-scrollbar-thumb-bg-color-active, rgba(0, 0, 0, 0.6)) !default;
+$scrollbar-thumb-bg-color-hover: var(--rp-scrollbar-thumb-bg-color-hover, rgba(0, 0, 0, 0.6)) !default;
 $scrollbar-thumb-border-radius: var(--rp-scrollbar-thumb-border-radius, 3px) !default;
-$scrollbar-thumb-left-position: var(--rp-scrollbar-thumb-left-position, calc((#{$scrollbar-track-width} - #{$scrollbar-thumb-width})/2)) !default;
 $scrollbar-thumb-width: var(--rp-scrollbar-thumb-width, 6px) !default;
+$scrollbar-thumb-left-position: var(--rp-scrollbar-thumb-left-position, calc((#{$scrollbar-track-width} - #{$scrollbar-thumb-width})/2)) !default;
 
 .root {
   :global {

From e2e81c026d05d27f2fa0ae97b4f8531bc15d5b58 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Mon, 3 Feb 2020 21:38:13 -0500
Subject: [PATCH 026/244] [DDW-829] Fixes ESLint error in Autocomplete behavior
 tests

---
 __tests__/Autocomplete.behavior.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/__tests__/Autocomplete.behavior.test.js b/__tests__/Autocomplete.behavior.test.js
index be243883..6f1a6bd6 100644
--- a/__tests__/Autocomplete.behavior.test.js
+++ b/__tests__/Autocomplete.behavior.test.js
@@ -36,7 +36,7 @@ const ABC_SORTED_MNEMONICS = [
 describe('Autocomplete onChange simulations', () => {
   test('Autocomplete is closed by default and when clicked is open and displays options', () => {
     const wrapper = mountInSimpleTheme(
-      <Autocomplete options={MNEMONIC_WORDS}/>
+      <Autocomplete options={MNEMONIC_WORDS} />
     );
     const component = wrapper.find('Autocomplete').instance();
     const input = wrapper.find('input');
@@ -65,7 +65,7 @@ describe('Autocomplete onChange simulations', () => {
 
   test('Autocomplete puts options in abc order and highlights first option by default when open', () => {
     const wrapper = mountInSimpleTheme(
-      <Autocomplete options={MNEMONIC_WORDS}/>
+      <Autocomplete options={MNEMONIC_WORDS} />
     );
     const component = wrapper.find('Autocomplete').instance();
     const input = wrapper.find('input');

From 8f7c519afeba6bc611d32b36595a684523ef521f Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 5 Feb 2020 19:20:26 +0100
Subject: [PATCH 027/244] [DDW-829] Fix broken jest snapshots by using enzyme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

While debugging a testing issue with the new scrollbar component i stumbled over the known problem of „react-test-renderer“ not being able to handle element refs correctly (since it doesn’t involve any real DOM rendering).

You can read more about that issue here: https://github.com/facebook/react/issues/7740

This was the root cause and i couldnt make it work with react-test-renderer, so i refactored all the snapshot tests to use enzyme (which supports full DOM rendering). You can see the difference (react-test-renderer outputs a JSON with react component „markup“ whereas enzyme outputs only plain DOM nodes)
---
 __tests__/Autocomplete.test.js                |   42 +-
 __tests__/Bubble.test.js                      |   33 +-
 __tests__/Button.test.js                      |   19 +-
 __tests__/Checkbox.test.js                    |   28 +-
 __tests__/FormField.test.js                   |   35 +-
 __tests__/Input.test.js                       |   28 +-
 __tests__/NumericInput.test.js                |   42 +-
 __tests__/Options.test.js                     |   21 +-
 __tests__/Radio.test.js                       |   29 +-
 __tests__/Select.test.js                      |   58 +-
 __tests__/Stepper.test.js                     |   22 +-
 __tests__/Switch.test.js                      |   36 +-
 __tests__/TextArea.test.js                    |   36 +-
 __tests__/Toggler.test.js                     |   29 +-
 .../__snapshots__/Autocomplete.test.js.snap   |  830 ++++---
 __tests__/__snapshots__/Bubble.test.js.snap   |   55 +-
 __tests__/__snapshots__/Button.test.js.snap   |    8 +-
 __tests__/__snapshots__/Checkbox.test.js.snap |   45 +-
 .../__snapshots__/FormField.test.js.snap      |   39 +-
 __tests__/__snapshots__/Input.test.js.snap    |   37 +-
 .../__snapshots__/NumericInput.test.js.snap   |   64 +-
 __tests__/__snapshots__/Options.test.js.snap  |  630 +++---
 __tests__/__snapshots__/Radio.test.js.snap    |   45 +-
 __tests__/__snapshots__/Select.test.js.snap   | 1537 +++++++------
 __tests__/__snapshots__/Switch.test.js.snap   |   79 +-
 __tests__/__snapshots__/TextArea.test.js.snap |   52 +-
 __tests__/__snapshots__/Toggler.test.js.snap  |   67 +-
 __tests__/helpers/theming.js                  |    7 +-
 package.json                                  |    9 +-
 yarn.lock                                     | 2002 ++++++++++++-----
 30 files changed, 3519 insertions(+), 2445 deletions(-)

diff --git a/__tests__/Autocomplete.test.js b/__tests__/Autocomplete.test.js
index 10599e7f..00f8efbc 100644
--- a/__tests__/Autocomplete.test.js
+++ b/__tests__/Autocomplete.test.js
@@ -11,52 +11,40 @@ const OPTIONS = [
 ];
 
 test('Autocomplete renders correctly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Autocomplete options={OPTIONS} />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Autocomplete renders with label', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Autocomplete
       label="Enter your recovery phrase below"
       options={OPTIONS}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Autocomplete renders with a placeholder', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Autocomplete
       placeholder="Enter recovery phrase"
       options={OPTIONS}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Autocomplete renders with an error', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Autocomplete
       error="Your mnemonic phrase is incorrect"
       options={OPTIONS}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Autocomplete uses render prop - renderSelections', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Autocomplete
       options={OPTIONS}
       renderSelections={getSelectionProps => {
@@ -74,14 +62,11 @@ test('Autocomplete uses render prop - renderSelections', () => {
         ));
       }}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Autocomplete uses render prop - renderOptions', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Autocomplete
       options={OPTIONS}
       renderOptions={getOptionProps => {
@@ -94,8 +79,5 @@ test('Autocomplete uses render prop - renderOptions', () => {
         ));
       }}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/Bubble.test.js b/__tests__/Bubble.test.js
index 927390e3..94e79911 100644
--- a/__tests__/Bubble.test.js
+++ b/__tests__/Bubble.test.js
@@ -4,44 +4,29 @@ import { Bubble } from '../source/components/Bubble';
 import { renderInSimpleTheme } from './helpers/theming';
 
 test('Bubble renders correctly', () => {
-  const component = renderInSimpleTheme(<Bubble />);
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(renderInSimpleTheme(<Bubble />)).toMatchSnapshot();
 });
 
 test('Bubble renders isOpeningUpward={true}', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Bubble isOpeningUpward />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Bubble renders isTransparent={false}', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Bubble isTransparent={false} />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Bubble renders isHidden={true}', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Bubble isHidden />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Bubble renders isFloating={true}', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Bubble isFloating />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/Button.test.js b/__tests__/Button.test.js
index 30a49810..ce12b13a 100644
--- a/__tests__/Button.test.js
+++ b/__tests__/Button.test.js
@@ -4,26 +4,17 @@ import { Button } from '../source/components/Button';
 import { renderInSimpleTheme } from './helpers/theming';
 
 test('Button renders correctly', () => {
-  const component = renderInSimpleTheme(<Button />);
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  expect(renderInSimpleTheme(<Button />)).toMatchSnapshot();
 });
 
 test('Button renders with a label', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Button label="send" />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Button is disabled', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Button disabled />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/Checkbox.test.js b/__tests__/Checkbox.test.js
index b751570a..24804e53 100644
--- a/__tests__/Checkbox.test.js
+++ b/__tests__/Checkbox.test.js
@@ -4,37 +4,25 @@ import { Checkbox } from '../source/components/Checkbox';
 import { renderInSimpleTheme } from './helpers/theming';
 
 test('Checkbox renders correctly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Checkbox />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Checkbox renders with a label', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Checkbox label="check here" />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Checkbox is disabled', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Checkbox disabled />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Checkbox is checked', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Checkbox checked />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/FormField.test.js b/__tests__/FormField.test.js
index 151f63e1..16abbbff 100644
--- a/__tests__/FormField.test.js
+++ b/__tests__/FormField.test.js
@@ -6,57 +6,42 @@ import { renderInSimpleTheme } from './helpers/theming';
 const renderFormField = () => <div className="render-prop" />;
 
 test('FormField renders correctly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <FormField render={renderFormField} />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('FormField renders with label', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <FormField
       label="Add a Label"
       render={renderFormField}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('FormField renders with an error', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <FormField
       error="Add an Error"
       render={renderFormField}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('FormField is disabled', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <FormField
       disabled
       render={({ disabled }) => <span>{disabled.toString()}</span>}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('FormField renders an input element', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <FormField
       render={() => <input className="render-prop" />}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/Input.test.js b/__tests__/Input.test.js
index 1bb0000d..3d50f0d8 100644
--- a/__tests__/Input.test.js
+++ b/__tests__/Input.test.js
@@ -4,37 +4,25 @@ import { Input } from '../source/components/Input';
 import { renderInSimpleTheme } from './helpers/theming';
 
 test('Input renders correctly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Input />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Input renders with placeholder', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Input placeholder="0.0000" />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Input renders with a value', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Input value="there is value" />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Input is readOnly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Input readOnly />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/NumericInput.test.js b/__tests__/NumericInput.test.js
index c5791b92..ef835c0c 100644
--- a/__tests__/NumericInput.test.js
+++ b/__tests__/NumericInput.test.js
@@ -4,55 +4,37 @@ import { NumericInput } from '../source/components/NumericInput';
 import { renderInSimpleTheme } from './helpers/theming';
 
 test('NumericInput renders correctly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <NumericInput />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('NumericInput renders with placeholder', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <NumericInput placeholder="0.0000" />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('NumericInput is disabled', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <NumericInput disabled />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('NumericInput is readOnly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <NumericInput readOnly />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('NumericInput renders with an error', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <NumericInput error="Invalid Amount" />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('NumericInput renders with a value', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <NumericInput value="555.333" />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/Options.test.js b/__tests__/Options.test.js
index a2e7dbef..7a1fca4b 100644
--- a/__tests__/Options.test.js
+++ b/__tests__/Options.test.js
@@ -27,16 +27,13 @@ const COUNTRIES_OPTIONS = [
 ];
 
 test('Options renders correctly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Options options={MNEMONIC_WORDS} />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Options uses render prop - render', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Options
       options={MNEMONIC_WORDS}
       render={getOptionProps => {
@@ -48,14 +45,11 @@ test('Options uses render prop - render', () => {
         ));
       }}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Options uses render prop - optionRenderer', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Options
       options={COUNTRIES_OPTIONS}
       optionRenderer={option => (
@@ -65,8 +59,5 @@ test('Options uses render prop - optionRenderer', () => {
         </div>
       )}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/Radio.test.js b/__tests__/Radio.test.js
index 8cf17c9c..c11a485c 100644
--- a/__tests__/Radio.test.js
+++ b/__tests__/Radio.test.js
@@ -1,41 +1,28 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 
 import { Radio } from '../source/components/Radio';
 import { renderInSimpleTheme } from './helpers/theming';
 
 test('Radio renders correctly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Radio />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Radio renders with a label', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Radio label="click here" />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Radio is disabled', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Radio disabled />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Radio is selected', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Radio selected />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/Select.test.js b/__tests__/Select.test.js
index fa921871..a7312ece 100644
--- a/__tests__/Select.test.js
+++ b/__tests__/Select.test.js
@@ -1,8 +1,6 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 
 import { Select } from '../source/components/Select';
-import { SelectSkin } from '../source/skins/simple/SelectSkin';
 import { renderInSimpleTheme } from './helpers/theming';
 
 const COUNTRIES = [
@@ -27,73 +25,55 @@ const WALLETS = [
 ];
 
 test('Select renders correctly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Select options={COUNTRIES} />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Select renders with placeholder', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Select
       placeholder="Select your country …"
       options={COUNTRIES}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Select renders with an error', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Select
       error="Please select a different option"
       options={COUNTRIES}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Select renders with disabled options', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Select options={COUNTRIES_DISABLED_OPTIONS} />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Select isOpeningUpward={true}', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Select
       isOpeningUpward
       options={COUNTRIES}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Select isOpen={true}', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Select
       isOpen
       options={COUNTRIES}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Select uses render prop - optionRenderer', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Select
       options={COUNTRIES}
       optionRenderer={option => (
@@ -103,14 +83,11 @@ test('Select uses render prop - optionRenderer', () => {
         </div>
       )}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Select uses render prop - valueRenderer', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Select
       options={WALLETS}
       optionRenderer={option => (
@@ -126,8 +103,5 @@ test('Select uses render prop - valueRenderer', () => {
         </div>
       )}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/Stepper.test.js b/__tests__/Stepper.test.js
index 232f6860..805a79ca 100644
--- a/__tests__/Stepper.test.js
+++ b/__tests__/Stepper.test.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 
 import { Stepper } from '../source/components/Stepper';
 import { renderInSimpleTheme } from './helpers/theming';
@@ -7,39 +6,30 @@ import { renderInSimpleTheme } from './helpers/theming';
 const STEPS = ['Wallet', 'Stake pool', 'Delegation', 'Activation'];
 
 test('Stepper renders correctly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Stepper
       options={STEPS}
       activeStep={3}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Stepper renders with custom label', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Stepper
       activeStep={3}
       label="Setup progress"
       options={STEPS}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Stepper renders without label', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Stepper
       activeStep={3}
       labelDisabled
       options={STEPS}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/Switch.test.js b/__tests__/Switch.test.js
index b9a8f400..a0782f5f 100644
--- a/__tests__/Switch.test.js
+++ b/__tests__/Switch.test.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 
 import { Checkbox } from '../source/components/Checkbox';
 import { SwitchSkin } from '../source/skins/simple/SwitchSkin';
@@ -7,66 +6,51 @@ import { IDENTIFIERS } from '../source/components';
 import { renderInSimpleTheme } from './helpers/theming';
 
 test('Switch renders correctly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Checkbox
       themeId={IDENTIFIERS.SWITCH}
       skin={SwitchSkin}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Switch renders with label', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Checkbox
       themeId={IDENTIFIERS.SWITCH}
       label="click here"
       skin={SwitchSkin}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Switch is disabled', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Checkbox
       themeId={IDENTIFIERS.SWITCH}
       disabled
       skin={SwitchSkin}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Switch is disabled and renders a label', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Checkbox
       themeId={IDENTIFIERS.SWITCH}
       disabled
       label="click here"
       skin={SwitchSkin}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Switch is checked', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Checkbox
       themeId={IDENTIFIERS.SWITCH}
       checked
       skin={SwitchSkin}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/TextArea.test.js b/__tests__/TextArea.test.js
index 0b60d1ad..d2dee8d5 100644
--- a/__tests__/TextArea.test.js
+++ b/__tests__/TextArea.test.js
@@ -1,50 +1,34 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 
 import { TextArea } from '../source/components/TextArea';
 import { renderInSimpleTheme } from './helpers/theming';
 
 test('TextArea renders correctly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <TextArea />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('TextArea renders with placeholder', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <TextArea placeholder="0.0000" />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('TextArea renders with an error', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <TextArea error="Please enter valid input" />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('TextArea renders with a value', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <TextArea value="this one has a value" />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('TextArea renders with 5 rows', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <TextArea rows={5} />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/Toggler.test.js b/__tests__/Toggler.test.js
index d3fe710f..a5df45ad 100644
--- a/__tests__/Toggler.test.js
+++ b/__tests__/Toggler.test.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
 
 import { Checkbox } from '../source/components/Checkbox';
 import { TogglerSkin } from '../source/skins/simple/TogglerSkin';
@@ -7,21 +6,18 @@ import { IDENTIFIERS } from '../source/components';
 import { renderInSimpleTheme } from './helpers/theming';
 
 test('Toggler renders correctly', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Checkbox
       labelLeft="Included"
       labelRight="Excluded"
       themeId={IDENTIFIERS.TOGGLER}
       skin={TogglerSkin}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Toggler renders within text', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <div>
       <span>Fees&nbsp;</span>
       <Checkbox
@@ -32,14 +28,11 @@ test('Toggler renders within text', () => {
       />
       <span>&nbsp;from the amount</span>
     </div>
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Toggler is disabled', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Checkbox
       disabled
       labelLeft="Included"
@@ -47,14 +40,11 @@ test('Toggler is disabled', () => {
       themeId={IDENTIFIERS.TOGGLER}
       skin={TogglerSkin}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
 
 test('Toggler is checked', () => {
-  const component = renderInSimpleTheme(
+  expect(renderInSimpleTheme(
     <Checkbox
       checked
       labelLeft="Included"
@@ -62,8 +52,5 @@ test('Toggler is checked', () => {
       themeId={IDENTIFIERS.TOGGLER}
       skin={TogglerSkin}
     />
-  );
-
-  const tree = component.toJSON();
-  expect(tree).toMatchSnapshot();
+  )).toMatchSnapshot();
 });
diff --git a/__tests__/__snapshots__/Autocomplete.test.js.snap b/__tests__/__snapshots__/Autocomplete.test.js.snap
index f932c60c..deedf443 100644
--- a/__tests__/__snapshots__/Autocomplete.test.js.snap
+++ b/__tests__/__snapshots__/Autocomplete.test.js.snap
@@ -2,27 +2,23 @@
 
 exports[`Autocomplete renders correctly 1`] = `
 <div
-  aria-hidden={true}
-  className="autocompleteWrapper"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="autocompleteWrapper"
   role="presentation"
 >
   <div
-    className="root"
+    class="root"
   >
-    
     <div
-      className="inputWrapper"
+      class="inputWrapper"
     >
       <div
-        className="autocompleteContent"
+        class="autocompleteContent"
       >
         <div
-          className="selectedWords"
+          class="selectedWords"
         >
           <input
-            onChange={[Function]}
-            onKeyDown={[Function]}
             value=""
           />
         </div>
@@ -30,64 +26,91 @@ exports[`Autocomplete renders correctly 1`] = `
     </div>
   </div>
   <div
-    className="options firstOptionHighlighted root isFloating isHidden"
-    style={null}
+    class="options firstOptionHighlighted root isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          cat
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          dog
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          fish
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          home
-        </li>
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:184px"
+          >
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    cat
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    dog
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    fish
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    home
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
+          </div>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
@@ -95,27 +118,23 @@ exports[`Autocomplete renders correctly 1`] = `
 
 exports[`Autocomplete renders with a placeholder 1`] = `
 <div
-  aria-hidden={true}
-  className="autocompleteWrapper"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="autocompleteWrapper"
   role="presentation"
 >
   <div
-    className="root"
+    class="root"
   >
-    
     <div
-      className="inputWrapper"
+      class="inputWrapper"
     >
       <div
-        className="autocompleteContent"
+        class="autocompleteContent"
       >
         <div
-          className="selectedWords"
+          class="selectedWords"
         >
           <input
-            onChange={[Function]}
-            onKeyDown={[Function]}
             placeholder="Enter recovery phrase"
             value=""
           />
@@ -124,64 +143,91 @@ exports[`Autocomplete renders with a placeholder 1`] = `
     </div>
   </div>
   <div
-    className="options firstOptionHighlighted root isFloating isHidden"
-    style={null}
+    class="options firstOptionHighlighted root isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          cat
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          dog
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          fish
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          home
-        </li>
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:184px"
+          >
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    cat
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    dog
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    fish
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    home
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
+          </div>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
@@ -189,31 +235,28 @@ exports[`Autocomplete renders with a placeholder 1`] = `
 
 exports[`Autocomplete renders with an error 1`] = `
 <div
-  aria-hidden={true}
-  className="autocompleteWrapper"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="autocompleteWrapper"
   role="presentation"
 >
   <div
-    className="root errored"
+    class="root errored"
   >
     <div
-      className="error"
+      class="error"
     >
       Your mnemonic phrase is incorrect
     </div>
     <div
-      className="inputWrapper"
+      class="inputWrapper"
     >
       <div
-        className="autocompleteContent errored"
+        class="autocompleteContent errored"
       >
         <div
-          className="selectedWords"
+          class="selectedWords"
         >
           <input
-            onChange={[Function]}
-            onKeyDown={[Function]}
             value=""
           />
         </div>
@@ -221,64 +264,91 @@ exports[`Autocomplete renders with an error 1`] = `
     </div>
   </div>
   <div
-    className="options firstOptionHighlighted root isFloating isHidden"
-    style={null}
+    class="options firstOptionHighlighted root isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          cat
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          dog
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          fish
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          home
-        </li>
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:184px"
+          >
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    cat
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    dog
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    fish
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    home
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
+          </div>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
@@ -286,35 +356,30 @@ exports[`Autocomplete renders with an error 1`] = `
 
 exports[`Autocomplete renders with label 1`] = `
 <div
-  aria-hidden={true}
-  className="autocompleteWrapper"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="autocompleteWrapper"
   role="presentation"
 >
   <div
-    className="root"
+    class="root"
   >
-    
     <label
-      aria-hidden={true}
-      className="label"
-      onClick={[Function]}
+      aria-hidden="true"
+      class="label"
       role="presentation"
     >
       Enter your recovery phrase below
     </label>
     <div
-      className="inputWrapper"
+      class="inputWrapper"
     >
       <div
-        className="autocompleteContent"
+        class="autocompleteContent"
       >
         <div
-          className="selectedWords"
+          class="selectedWords"
         >
           <input
-            onChange={[Function]}
-            onKeyDown={[Function]}
             value=""
           />
         </div>
@@ -322,64 +387,91 @@ exports[`Autocomplete renders with label 1`] = `
     </div>
   </div>
   <div
-    className="options firstOptionHighlighted root isFloating isHidden"
-    style={null}
+    class="options firstOptionHighlighted root isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          cat
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          dog
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          fish
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          home
-        </li>
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:184px"
+          >
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    cat
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    dog
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    fish
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    home
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
+          </div>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
@@ -387,27 +479,23 @@ exports[`Autocomplete renders with label 1`] = `
 
 exports[`Autocomplete uses render prop - renderOptions 1`] = `
 <div
-  aria-hidden={true}
-  className="autocompleteWrapper"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="autocompleteWrapper"
   role="presentation"
 >
   <div
-    className="root"
+    class="root"
   >
-    
     <div
-      className="inputWrapper"
+      class="inputWrapper"
     >
       <div
-        className="autocompleteContent"
+        class="autocompleteContent"
       >
         <div
-          className="selectedWords"
+          class="selectedWords"
         >
           <input
-            onChange={[Function]}
-            onKeyDown={[Function]}
             value=""
           />
         </div>
@@ -415,48 +503,83 @@ exports[`Autocomplete uses render prop - renderOptions 1`] = `
     </div>
   </div>
   <div
-    className="options firstOptionHighlighted root isFloating isHidden"
-    style={null}
+    class="options firstOptionHighlighted root isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li>
-          <span>
-            #0: cat
-          </span>
-        </li>
-        <li>
-          <span>
-            #1: dog
-          </span>
-        </li>
-        <li>
-          <span>
-            #2: fish
-          </span>
-        </li>
-        <li>
-          <span>
-            #3: home
-          </span>
-        </li>
+        <div
+          class="root"
+        >
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:184px"
+          >
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li>
+                    <span>
+                      #0: cat
+                    </span>
+                  </li>
+                  <li>
+                    <span>
+                      #1: dog
+                    </span>
+                  </li>
+                  <li>
+                    <span>
+                      #2: fish
+                    </span>
+                  </li>
+                  <li>
+                    <span>
+                      #3: home
+                    </span>
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
+          </div>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
@@ -464,27 +587,23 @@ exports[`Autocomplete uses render prop - renderOptions 1`] = `
 
 exports[`Autocomplete uses render prop - renderSelections 1`] = `
 <div
-  aria-hidden={true}
-  className="autocompleteWrapper"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="autocompleteWrapper"
   role="presentation"
 >
   <div
-    className="root"
+    class="root"
   >
-    
     <div
-      className="inputWrapper"
+      class="inputWrapper"
     >
       <div
-        className="autocompleteContent"
+        class="autocompleteContent"
       >
         <div
-          className="selectedWords"
+          class="selectedWords"
         >
           <input
-            onChange={[Function]}
-            onKeyDown={[Function]}
             value=""
           />
         </div>
@@ -492,64 +611,91 @@ exports[`Autocomplete uses render prop - renderSelections 1`] = `
     </div>
   </div>
   <div
-    className="options firstOptionHighlighted root isFloating isHidden"
-    style={null}
+    class="options firstOptionHighlighted root isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          cat
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          dog
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          fish
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          home
-        </li>
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:184px"
+          >
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    cat
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    dog
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    fish
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    home
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
+          </div>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
diff --git a/__tests__/__snapshots__/Bubble.test.js.snap b/__tests__/__snapshots__/Bubble.test.js.snap
index 3668113b..785b43cc 100644
--- a/__tests__/__snapshots__/Bubble.test.js.snap
+++ b/__tests__/__snapshots__/Bubble.test.js.snap
@@ -2,80 +2,75 @@
 
 exports[`Bubble renders correctly 1`] = `
 <div
-  className="root transparent"
-  style={null}
+  class="root transparent"
 >
   <div
-    className="bubble"
-    data-bubble-container={true}
+    class="bubble"
+    data-bubble-container="true"
   />
   <span
-    className="arrow"
-    data-bubble-arrow={true}
+    class="arrow"
+    data-bubble-arrow="true"
   />
 </div>
 `;
 
 exports[`Bubble renders isFloating={true} 1`] = `
 <div
-  className="root transparent isFloating"
-  style={null}
+  class="root transparent isFloating"
 >
   <div
-    className="bubble"
-    data-bubble-container={true}
+    class="bubble"
+    data-bubble-container="true"
   />
   <span
-    className="arrow"
-    data-bubble-arrow={true}
+    class="arrow"
+    data-bubble-arrow="true"
   />
 </div>
 `;
 
 exports[`Bubble renders isHidden={true} 1`] = `
 <div
-  className="root transparent isHidden"
-  style={null}
+  class="root transparent isHidden"
 >
   <div
-    className="bubble"
-    data-bubble-container={true}
+    class="bubble"
+    data-bubble-container="true"
   />
   <span
-    className="arrow"
-    data-bubble-arrow={true}
+    class="arrow"
+    data-bubble-arrow="true"
   />
 </div>
 `;
 
 exports[`Bubble renders isOpeningUpward={true} 1`] = `
 <div
-  className="root openUpward transparent"
-  style={null}
+  class="root openUpward transparent"
 >
   <div
-    className="bubble"
-    data-bubble-container={true}
+    class="bubble"
+    data-bubble-container="true"
   />
   <span
-    className="arrow"
-    data-bubble-arrow={true}
+    class="arrow"
+    data-bubble-arrow="true"
   />
 </div>
 `;
 
 exports[`Bubble renders isTransparent={false} 1`] = `
 <div
-  className="root"
-  style={null}
+  class="root"
 >
   <div
-    className="bubble"
-    data-bubble-container={true}
+    class="bubble"
+    data-bubble-container="true"
   />
   <span
-    className="arrow"
-    data-bubble-arrow={true}
+    class="arrow"
+    data-bubble-arrow="true"
   />
 </div>
 `;
diff --git a/__tests__/__snapshots__/Button.test.js.snap b/__tests__/__snapshots__/Button.test.js.snap
index 0c7052fb..f6a1f4fa 100644
--- a/__tests__/__snapshots__/Button.test.js.snap
+++ b/__tests__/__snapshots__/Button.test.js.snap
@@ -2,20 +2,20 @@
 
 exports[`Button is disabled 1`] = `
 <button
-  className="root disabled"
-  disabled={true}
+  class="root disabled"
+  disabled=""
 />
 `;
 
 exports[`Button renders correctly 1`] = `
 <button
-  className="root"
+  class="root"
 />
 `;
 
 exports[`Button renders with a label 1`] = `
 <button
-  className="root"
+  class="root"
   label="send"
 >
   send
diff --git a/__tests__/__snapshots__/Checkbox.test.js.snap b/__tests__/__snapshots__/Checkbox.test.js.snap
index e156d5b7..72ed5584 100644
--- a/__tests__/__snapshots__/Checkbox.test.js.snap
+++ b/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -2,77 +2,70 @@
 
 exports[`Checkbox is checked 1`] = `
 <div
-  aria-hidden={true}
-  className="root checked"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root checked"
   role="presentation"
 >
   <input
-    checked={true}
-    className="input"
+    checked=""
+    class="input"
     type="checkbox"
   />
   <div
-    className="check checked"
+    class="check checked"
   />
 </div>
 `;
 
 exports[`Checkbox is disabled 1`] = `
 <div
-  aria-hidden={true}
-  className="root disabled"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root disabled"
   role="presentation"
 >
   <input
-    checked={false}
-    className="input"
-    disabled={true}
+    class="input"
+    disabled=""
     type="checkbox"
   />
   <div
-    className="check"
+    class="check"
   />
 </div>
 `;
 
 exports[`Checkbox renders correctly 1`] = `
 <div
-  aria-hidden={true}
-  className="root"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root"
   role="presentation"
 >
   <input
-    checked={false}
-    className="input"
+    class="input"
     type="checkbox"
   />
   <div
-    className="check"
+    class="check"
   />
 </div>
 `;
 
 exports[`Checkbox renders with a label 1`] = `
 <div
-  aria-hidden={true}
-  className="root"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root"
   role="presentation"
 >
   <input
-    checked={false}
-    className="input"
+    class="input"
     label="check here"
     type="checkbox"
   />
   <div
-    className="check"
+    class="check"
   />
   <label
-    className="label"
+    class="label"
   >
     check here
   </label>
diff --git a/__tests__/__snapshots__/FormField.test.js.snap b/__tests__/__snapshots__/FormField.test.js.snap
index 355e2e46..6a214063 100644
--- a/__tests__/__snapshots__/FormField.test.js.snap
+++ b/__tests__/__snapshots__/FormField.test.js.snap
@@ -2,11 +2,10 @@
 
 exports[`FormField is disabled 1`] = `
 <div
-  className="root disabled"
+  class="root disabled"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <span>
       true
@@ -17,14 +16,13 @@ exports[`FormField is disabled 1`] = `
 
 exports[`FormField renders an input element 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <input
-      className="render-prop"
+      class="render-prop"
     />
   </div>
 </div>
@@ -32,14 +30,13 @@ exports[`FormField renders an input element 1`] = `
 
 exports[`FormField renders correctly 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <div
-      className="render-prop"
+      class="render-prop"
     />
   </div>
 </div>
@@ -47,18 +44,18 @@ exports[`FormField renders correctly 1`] = `
 
 exports[`FormField renders with an error 1`] = `
 <div
-  className="root errored"
+  class="root errored"
 >
   <div
-    className="error"
+    class="error"
   >
     Add an Error
   </div>
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <div
-      className="render-prop"
+      class="render-prop"
     />
   </div>
 </div>
@@ -66,22 +63,20 @@ exports[`FormField renders with an error 1`] = `
 
 exports[`FormField renders with label 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <label
-    aria-hidden={true}
-    className="label"
-    onClick={[Function]}
+    aria-hidden="true"
+    class="label"
     role="presentation"
   >
     Add a Label
   </label>
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <div
-      className="render-prop"
+      class="render-prop"
     />
   </div>
 </div>
diff --git a/__tests__/__snapshots__/Input.test.js.snap b/__tests__/__snapshots__/Input.test.js.snap
index 993f88c3..1bc4c7ff 100644
--- a/__tests__/__snapshots__/Input.test.js.snap
+++ b/__tests__/__snapshots__/Input.test.js.snap
@@ -2,16 +2,14 @@
 
 exports[`Input is readOnly 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <input
-      className="input"
-      onChange={[Function]}
-      readOnly={true}
+      class="input"
+      readonly=""
       value=""
     />
   </div>
@@ -20,16 +18,13 @@ exports[`Input is readOnly 1`] = `
 
 exports[`Input renders correctly 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <input
-      className="input"
-      onChange={[Function]}
-      readOnly={false}
+      class="input"
       value=""
     />
   </div>
@@ -38,16 +33,13 @@ exports[`Input renders correctly 1`] = `
 
 exports[`Input renders with a value 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <input
-      className="input"
-      onChange={[Function]}
-      readOnly={false}
+      class="input"
       value="there is value"
     />
   </div>
@@ -56,17 +48,14 @@ exports[`Input renders with a value 1`] = `
 
 exports[`Input renders with placeholder 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <input
-      className="input"
-      onChange={[Function]}
+      class="input"
       placeholder="0.0000"
-      readOnly={false}
       value=""
     />
   </div>
diff --git a/__tests__/__snapshots__/NumericInput.test.js.snap b/__tests__/__snapshots__/NumericInput.test.js.snap
index 0a91ba4c..b4770640 100644
--- a/__tests__/__snapshots__/NumericInput.test.js.snap
+++ b/__tests__/__snapshots__/NumericInput.test.js.snap
@@ -2,18 +2,14 @@
 
 exports[`NumericInput is disabled 1`] = `
 <div
-  className="root disabled"
+  class="root disabled"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <input
-      className="input disabled"
-      disabled={true}
-      onBlur={[Function]}
-      onChange={[Function]}
-      readOnly={false}
+      class="input disabled"
+      disabled=""
       value=""
     />
   </div>
@@ -22,17 +18,14 @@ exports[`NumericInput is disabled 1`] = `
 
 exports[`NumericInput is readOnly 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <input
-      className="input"
-      onBlur={[Function]}
-      onChange={[Function]}
-      readOnly={true}
+      class="input"
+      readonly=""
       value=""
     />
   </div>
@@ -41,17 +34,13 @@ exports[`NumericInput is readOnly 1`] = `
 
 exports[`NumericInput renders correctly 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <input
-      className="input"
-      onBlur={[Function]}
-      onChange={[Function]}
-      readOnly={false}
+      class="input"
       value=""
     />
   </div>
@@ -60,17 +49,13 @@ exports[`NumericInput renders correctly 1`] = `
 
 exports[`NumericInput renders with a value 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <input
-      className="input"
-      onBlur={[Function]}
-      onChange={[Function]}
-      readOnly={false}
+      class="input"
       value="555.333"
     />
   </div>
@@ -79,21 +64,18 @@ exports[`NumericInput renders with a value 1`] = `
 
 exports[`NumericInput renders with an error 1`] = `
 <div
-  className="root errored"
+  class="root errored"
 >
   <div
-    className="error"
+    class="error"
   >
     Invalid Amount
   </div>
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <input
-      className="input errored"
-      onBlur={[Function]}
-      onChange={[Function]}
-      readOnly={false}
+      class="input errored"
       value=""
     />
   </div>
@@ -102,18 +84,14 @@ exports[`NumericInput renders with an error 1`] = `
 
 exports[`NumericInput renders with placeholder 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <input
-      className="input"
-      onBlur={[Function]}
-      onChange={[Function]}
+      class="input"
       placeholder="0.0000"
-      readOnly={false}
       value=""
     />
   </div>
diff --git a/__tests__/__snapshots__/Options.test.js.snap b/__tests__/__snapshots__/Options.test.js.snap
index 5e3fbbf2..838e0efe 100644
--- a/__tests__/__snapshots__/Options.test.js.snap
+++ b/__tests__/__snapshots__/Options.test.js.snap
@@ -2,320 +2,400 @@
 
 exports[`Options renders correctly 1`] = `
 <div
-  className="options firstOptionHighlighted root isFloating isHidden"
-  style={null}
+  class="options firstOptionHighlighted root isFloating isHidden"
 >
   <div
-    className="bubble"
-    data-bubble-container={true}
+    class="bubble"
+    data-bubble-container="true"
   >
     <ul
-      className="ul"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      style={null}
+      class="ul"
     >
-      <li
-        aria-hidden={true}
-        className="option highlightedOption"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
+      <div
+        class="root"
       >
-        home
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        cat
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        dog
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        fish
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        hide
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        hover
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        duck
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        category
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        join
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        paper
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        box
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        tab
-      </li>
+        <div
+          class="ScrollbarsCustom"
+          style="position:relative;height:552px"
+        >
+          <div
+            class="ScrollbarsCustom-Wrapper"
+            style="position:absolute;overflow:hidden"
+          >
+            <div
+              class="ScrollbarsCustom-Scroller"
+              style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Content"
+                style="padding:0.05px"
+              >
+                <li
+                  aria-hidden="true"
+                  class="option highlightedOption"
+                  role="presentation"
+                >
+                  home
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  cat
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  dog
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  fish
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  hide
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  hover
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  duck
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  category
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  join
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  paper
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  box
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  tab
+                </li>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+            style="display:none"
+          >
+            <div
+              class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+              style="touch-action:none"
+            />
+          </div>
+          <div
+            class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+            style="display:none"
+          >
+            <div
+              class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+              style="touch-action:none"
+            />
+          </div>
+        </div>
+      </div>
     </ul>
   </div>
   <span
-    className="arrow"
-    data-bubble-arrow={true}
+    class="arrow"
+    data-bubble-arrow="true"
   />
 </div>
 `;
 
 exports[`Options uses render prop - optionRenderer 1`] = `
 <div
-  className="options firstOptionHighlighted root isFloating isHidden"
-  style={null}
+  class="options firstOptionHighlighted root isFloating isHidden"
 >
   <div
-    className="bubble"
-    data-bubble-container={true}
+    class="bubble"
+    data-bubble-container="true"
   >
     <ul
-      className="ul"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      style={null}
+      class="ul"
     >
-      <li
-        aria-hidden={true}
-        className="option highlightedOption"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        <div>
-          <span>
-            Frankreich
-          </span>
-          <span>
-            France
-          </span>
-        </div>
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
+      <div
+        class="root"
       >
-        <div>
-          <span>
-            Spanien
-          </span>
-          <span>
-            Spain
-          </span>
+        <div
+          class="ScrollbarsCustom"
+          style="position:relative;height:230px"
+        >
+          <div
+            class="ScrollbarsCustom-Wrapper"
+            style="position:absolute;overflow:hidden"
+          >
+            <div
+              class="ScrollbarsCustom-Scroller"
+              style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Content"
+                style="padding:0.05px"
+              >
+                <li
+                  aria-hidden="true"
+                  class="option highlightedOption"
+                  role="presentation"
+                >
+                  <div>
+                    <span>
+                      Frankreich
+                    </span>
+                    <span>
+                      France
+                    </span>
+                  </div>
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  <div>
+                    <span>
+                      Spanien
+                    </span>
+                    <span>
+                      Spain
+                    </span>
+                  </div>
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  <div>
+                    <span>
+                      Kroatien
+                    </span>
+                    <span>
+                      Croatia
+                    </span>
+                  </div>
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  <div>
+                    <span>
+                      Vereinigten Staaten
+                    </span>
+                    <span>
+                      United States
+                    </span>
+                  </div>
+                </li>
+                <li
+                  aria-hidden="true"
+                  class="option"
+                  role="presentation"
+                >
+                  <div>
+                    <span>
+                      Österreich
+                    </span>
+                    <span>
+                      Austria
+                    </span>
+                  </div>
+                </li>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+            style="display:none"
+          >
+            <div
+              class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+              style="touch-action:none"
+            />
+          </div>
+          <div
+            class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+            style="display:none"
+          >
+            <div
+              class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+              style="touch-action:none"
+            />
+          </div>
         </div>
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        <div>
-          <span>
-            Kroatien
-          </span>
-          <span>
-            Croatia
-          </span>
-        </div>
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        <div>
-          <span>
-            Vereinigten Staaten
-          </span>
-          <span>
-            United States
-          </span>
-        </div>
-      </li>
-      <li
-        aria-hidden={true}
-        className="option"
-        onClick={[Function]}
-        onMouseEnter={[Function]}
-        role="presentation"
-      >
-        <div>
-          <span>
-            Österreich
-          </span>
-          <span>
-            Austria
-          </span>
-        </div>
-      </li>
+      </div>
     </ul>
   </div>
   <span
-    className="arrow"
-    data-bubble-arrow={true}
+    class="arrow"
+    data-bubble-arrow="true"
   />
 </div>
 `;
 
 exports[`Options uses render prop - render 1`] = `
 <div
-  className="options firstOptionHighlighted root isFloating isHidden"
-  style={null}
+  class="options firstOptionHighlighted root isFloating isHidden"
 >
   <div
-    className="bubble"
-    data-bubble-container={true}
+    class="bubble"
+    data-bubble-container="true"
   >
     <ul
-      className="ul"
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      style={null}
+      class="ul"
     >
-      <li>
-        <span>
-          home
-        </span>
-      </li>
-      <li>
-        <span>
-          cat
-        </span>
-      </li>
-      <li>
-        <span>
-          dog
-        </span>
-      </li>
-      <li>
-        <span>
-          fish
-        </span>
-      </li>
-      <li>
-        <span>
-          hide
-        </span>
-      </li>
-      <li>
-        <span>
-          hover
-        </span>
-      </li>
-      <li>
-        <span>
-          duck
-        </span>
-      </li>
-      <li>
-        <span>
-          category
-        </span>
-      </li>
-      <li>
-        <span>
-          join
-        </span>
-      </li>
-      <li>
-        <span>
-          paper
-        </span>
-      </li>
-      <li>
-        <span>
-          box
-        </span>
-      </li>
-      <li>
-        <span>
-          tab
-        </span>
-      </li>
+      <div
+        class="root"
+      >
+        <div
+          class="ScrollbarsCustom"
+          style="position:relative;height:552px"
+        >
+          <div
+            class="ScrollbarsCustom-Wrapper"
+            style="position:absolute;overflow:hidden"
+          >
+            <div
+              class="ScrollbarsCustom-Scroller"
+              style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Content"
+                style="padding:0.05px"
+              >
+                <li>
+                  <span>
+                    home
+                  </span>
+                </li>
+                <li>
+                  <span>
+                    cat
+                  </span>
+                </li>
+                <li>
+                  <span>
+                    dog
+                  </span>
+                </li>
+                <li>
+                  <span>
+                    fish
+                  </span>
+                </li>
+                <li>
+                  <span>
+                    hide
+                  </span>
+                </li>
+                <li>
+                  <span>
+                    hover
+                  </span>
+                </li>
+                <li>
+                  <span>
+                    duck
+                  </span>
+                </li>
+                <li>
+                  <span>
+                    category
+                  </span>
+                </li>
+                <li>
+                  <span>
+                    join
+                  </span>
+                </li>
+                <li>
+                  <span>
+                    paper
+                  </span>
+                </li>
+                <li>
+                  <span>
+                    box
+                  </span>
+                </li>
+                <li>
+                  <span>
+                    tab
+                  </span>
+                </li>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+            style="display:none"
+          >
+            <div
+              class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+              style="touch-action:none"
+            />
+          </div>
+          <div
+            class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+            style="display:none"
+          >
+            <div
+              class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+              style="touch-action:none"
+            />
+          </div>
+        </div>
+      </div>
     </ul>
   </div>
   <span
-    className="arrow"
-    data-bubble-arrow={true}
+    class="arrow"
+    data-bubble-arrow="true"
   />
 </div>
 `;
diff --git a/__tests__/__snapshots__/Radio.test.js.snap b/__tests__/__snapshots__/Radio.test.js.snap
index cd36c38a..07e77df1 100644
--- a/__tests__/__snapshots__/Radio.test.js.snap
+++ b/__tests__/__snapshots__/Radio.test.js.snap
@@ -2,77 +2,70 @@
 
 exports[`Radio is disabled 1`] = `
 <div
-  aria-hidden={true}
-  className="root disabled"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root disabled"
   role="presentation"
 >
   <input
-    className="input"
-    disabled={true}
-    selected={false}
+    class="input"
+    disabled=""
     type="radio"
   />
   <div
-    className="circle"
+    class="circle"
   />
 </div>
 `;
 
 exports[`Radio is selected 1`] = `
 <div
-  aria-hidden={true}
-  className="root selected"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root selected"
   role="presentation"
 >
   <input
-    className="input"
-    selected={true}
+    class="input"
+    selected=""
     type="radio"
   />
   <div
-    className="circle selected"
+    class="circle selected"
   />
 </div>
 `;
 
 exports[`Radio renders correctly 1`] = `
 <div
-  aria-hidden={true}
-  className="root"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root"
   role="presentation"
 >
   <input
-    className="input"
-    selected={false}
+    class="input"
     type="radio"
   />
   <div
-    className="circle"
+    class="circle"
   />
 </div>
 `;
 
 exports[`Radio renders with a label 1`] = `
 <div
-  aria-hidden={true}
-  className="root"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root"
   role="presentation"
 >
   <input
-    className="input"
+    class="input"
     label="click here"
-    selected={false}
     type="radio"
   />
   <div
-    className="circle"
+    class="circle"
   />
   <label
-    className="label"
+    class="label"
   >
     click here
   </label>
diff --git a/__tests__/__snapshots__/Select.test.js.snap b/__tests__/__snapshots__/Select.test.js.snap
index 9c841813..69dd2f28 100644
--- a/__tests__/__snapshots__/Select.test.js.snap
+++ b/__tests__/__snapshots__/Select.test.js.snap
@@ -2,116 +2,138 @@
 
 exports[`Select isOpen={true} 1`] = `
 <div
-  className="select isOpen"
+  class="select isOpen"
 >
   <div
-    className="selectInput"
+    class="selectInput"
   >
     <div
-      className="root"
+      class="root"
     >
-      
       <div
-        className="inputWrapper"
+        class="inputWrapper"
       >
         <input
-          className="input"
-          onChange={[Function]}
-          onClick={[Function]}
-          readOnly={true}
+          class="input"
+          readonly=""
           value=""
         />
       </div>
     </div>
   </div>
   <div
-    className="options isOpen firstOptionHighlighted root isFloating"
-    style={null}
+    class="options isOpen firstOptionHighlighted root isFloating"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Frankreich
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Spanien
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Kroatien
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Vereinigten Staaten
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          <span
-            className="label"
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:230px"
           >
-            Österreich
-          </span>
-        </li>
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Frankreich
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Spanien
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Kroatien
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Vereinigten Staaten
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Österreich
+                    </span>
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
+          </div>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
@@ -119,116 +141,138 @@ exports[`Select isOpen={true} 1`] = `
 
 exports[`Select isOpeningUpward={true} 1`] = `
 <div
-  className="select openUpward"
+  class="select openUpward"
 >
   <div
-    className="selectInput"
+    class="selectInput"
   >
     <div
-      className="root"
+      class="root"
     >
-      
       <div
-        className="inputWrapper"
+        class="inputWrapper"
       >
         <input
-          className="input"
-          onChange={[Function]}
-          onClick={[Function]}
-          readOnly={true}
+          class="input"
+          readonly=""
           value=""
         />
       </div>
     </div>
   </div>
   <div
-    className="options openUpward root openUpward isFloating isHidden"
-    style={null}
+    class="options openUpward root openUpward isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Österreich
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Vereinigten Staaten
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Kroatien
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Spanien
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          <span
-            className="label"
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:230px"
           >
-            Frankreich
-          </span>
-        </li>
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Österreich
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Vereinigten Staaten
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Kroatien
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Spanien
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Frankreich
+                    </span>
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
+          </div>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
@@ -236,116 +280,138 @@ exports[`Select isOpeningUpward={true} 1`] = `
 
 exports[`Select renders correctly 1`] = `
 <div
-  className="select"
+  class="select"
 >
   <div
-    className="selectInput"
+    class="selectInput"
   >
     <div
-      className="root"
+      class="root"
     >
-      
       <div
-        className="inputWrapper"
+        class="inputWrapper"
       >
         <input
-          className="input"
-          onChange={[Function]}
-          onClick={[Function]}
-          readOnly={true}
+          class="input"
+          readonly=""
           value=""
         />
       </div>
     </div>
   </div>
   <div
-    className="options firstOptionHighlighted root isFloating isHidden"
-    style={null}
+    class="options firstOptionHighlighted root isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Frankreich
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Spanien
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Kroatien
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Vereinigten Staaten
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          <span
-            className="label"
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:230px"
           >
-            Österreich
-          </span>
-        </li>
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Frankreich
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Spanien
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Kroatien
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Vereinigten Staaten
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Österreich
+                    </span>
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
+          </div>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
@@ -353,120 +419,143 @@ exports[`Select renders correctly 1`] = `
 
 exports[`Select renders with an error 1`] = `
 <div
-  className="select"
+  class="select"
 >
   <div
-    className="selectInput"
+    class="selectInput"
   >
     <div
-      className="root errored"
+      class="root errored"
     >
       <div
-        className="error"
+        class="error"
       >
         Please select a different option
       </div>
       <div
-        className="inputWrapper"
+        class="inputWrapper"
       >
         <input
-          className="input errored"
-          onChange={[Function]}
-          onClick={[Function]}
-          readOnly={true}
+          class="input errored"
+          readonly=""
           value=""
         />
       </div>
     </div>
   </div>
   <div
-    className="options firstOptionHighlighted root isFloating isHidden"
-    style={null}
+    class="options firstOptionHighlighted root isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Frankreich
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Spanien
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Kroatien
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Vereinigten Staaten
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          <span
-            className="label"
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:230px"
           >
-            Österreich
-          </span>
-        </li>
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Frankreich
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Spanien
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Kroatien
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Vereinigten Staaten
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Österreich
+                    </span>
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
+          </div>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
@@ -474,103 +563,127 @@ exports[`Select renders with an error 1`] = `
 
 exports[`Select renders with disabled options 1`] = `
 <div
-  className="select"
+  class="select"
 >
   <div
-    className="selectInput"
+    class="selectInput"
   >
     <div
-      className="root"
+      class="root"
     >
-      
       <div
-        className="inputWrapper"
+        class="inputWrapper"
       >
         <input
-          className="input"
-          onChange={[Function]}
-          onClick={[Function]}
-          readOnly={true}
+          class="input"
+          readonly=""
           value=""
         />
       </div>
     </div>
   </div>
   <div
-    className="options firstOptionHighlighted root isFloating isHidden"
-    style={null}
+    class="options firstOptionHighlighted root isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            England
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option disabledOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Spain
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option disabledOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Thailand
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          <span
-            className="label"
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:184px"
           >
-            USA
-          </span>
-        </li>
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      England
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option disabledOption"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Spain
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option disabledOption"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Thailand
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      USA
+                    </span>
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
+          </div>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
@@ -578,117 +691,139 @@ exports[`Select renders with disabled options 1`] = `
 
 exports[`Select renders with placeholder 1`] = `
 <div
-  className="select"
+  class="select"
 >
   <div
-    className="selectInput"
+    class="selectInput"
   >
     <div
-      className="root"
+      class="root"
     >
-      
       <div
-        className="inputWrapper"
+        class="inputWrapper"
       >
         <input
-          className="input"
-          onChange={[Function]}
-          onClick={[Function]}
+          class="input"
           placeholder="Select your country …"
-          readOnly={true}
+          readonly=""
           value=""
         />
       </div>
     </div>
   </div>
   <div
-    className="options firstOptionHighlighted root isFloating isHidden"
-    style={null}
+    class="options firstOptionHighlighted root isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Frankreich
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Spanien
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Kroatien
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <span
-            className="label"
-          >
-            Vereinigten Staaten
-          </span>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          <span
-            className="label"
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:230px"
           >
-            Österreich
-          </span>
-        </li>
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Frankreich
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Spanien
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Kroatien
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Vereinigten Staaten
+                    </span>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <span
+                      class="label"
+                    >
+                      Österreich
+                    </span>
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
+          </div>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
@@ -696,141 +831,153 @@ exports[`Select renders with placeholder 1`] = `
 
 exports[`Select uses render prop - optionRenderer 1`] = `
 <div
-  className="select"
+  class="select"
 >
   <div
-    className="selectInput"
+    class="selectInput"
   >
     <div
-      className="root"
+      class="root"
     >
-      
       <div
-        className="inputWrapper"
+        class="inputWrapper"
       >
         <input
-          className="input"
-          onChange={[Function]}
-          onClick={[Function]}
-          readOnly={true}
+          class="input"
+          readonly=""
           value=""
         />
       </div>
     </div>
   </div>
   <div
-    className="options firstOptionHighlighted root isFloating isHidden"
-    style={null}
+    class="options firstOptionHighlighted root isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <div>
-            <span>
-              German: 
-              Frankreich
-            </span>
-            <span>
-              English: 
-              France
-            </span>
-          </div>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <div>
-            <span>
-              German: 
-              Spanien
-            </span>
-            <span>
-              English: 
-              Spain
-            </span>
-          </div>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <div>
-            <span>
-              German: 
-              Kroatien
-            </span>
-            <span>
-              English: 
-              Croatia
-            </span>
-          </div>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <div>
-            <span>
-              German: 
-              Vereinigten Staaten
-            </span>
-            <span>
-              English: 
-              United States
-            </span>
-          </div>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          <div>
-            <span>
-              German: 
-              Österreich
-            </span>
-            <span>
-              English: 
-              Austria
-            </span>
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:230px"
+          >
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    <div>
+                      <span>
+                        German: Frankreich
+                      </span>
+                      <span>
+                        English: France
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <div>
+                      <span>
+                        German: Spanien
+                      </span>
+                      <span>
+                        English: Spain
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <div>
+                      <span>
+                        German: Kroatien
+                      </span>
+                      <span>
+                        English: Croatia
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <div>
+                      <span>
+                        German: Vereinigten Staaten
+                      </span>
+                      <span>
+                        English: United States
+                      </span>
+                    </div>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <div>
+                      <span>
+                        German: Österreich
+                      </span>
+                      <span>
+                        English: Austria
+                      </span>
+                    </div>
+                  </li>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
+            </div>
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
+            </div>
           </div>
-        </li>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
@@ -838,106 +985,132 @@ exports[`Select uses render prop - optionRenderer 1`] = `
 
 exports[`Select uses render prop - valueRenderer 1`] = `
 <div
-  className="select"
+  class="select"
 >
   <div
-    className="selectInput"
+    class="selectInput"
   >
     <div
-      className="root"
+      class="root"
     >
-      
       <div
-        className="inputWrapper"
+        class="inputWrapper"
       >
         <div
-          className="customValueWrapper"
+          class="customValueWrapper"
         >
           <input
-            className="input"
-            onChange={[Function]}
-            onClick={[Function]}
-            readOnly={true}
+            class="input"
+            readonly=""
             value=""
           />
           <div
-            className="customValueBlock"
+            class="customValueBlock"
           />
         </div>
       </div>
     </div>
   </div>
   <div
-    className="options firstOptionHighlighted root isFloating isHidden"
-    style={null}
+    class="options firstOptionHighlighted root isFloating isHidden"
   >
     <div
-      className="bubble"
-      data-bubble-container={true}
+      class="bubble"
+      data-bubble-container="true"
     >
       <ul
-        className="ul"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        style={
-          Object {
-            "maxHeight": "300px",
-          }
-        }
+        class="ul"
+        style="max-height:300px"
       >
-        <li
-          aria-hidden={true}
-          className="option highlightedOption"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <div>
-            <div>
-              Main wallet
-            </div>
-            <div>
-              100,100 ADA
-            </div>
-          </div>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
+        <div
+          class="root"
         >
-          <div>
-            <div>
-              Spending money
+          <div
+            class="ScrollbarsCustom"
+            style="position:relative;height:138px"
+          >
+            <div
+              class="ScrollbarsCustom-Wrapper"
+              style="position:absolute;overflow:hidden"
+            >
+              <div
+                class="ScrollbarsCustom-Scroller"
+                style="position:absolute;top:0;left:0;bottom:0;right:0;-webkit-overflow-scrolling:touch;overflow-y:hidden;overflow-x:hidden"
+              >
+                <div
+                  class="ScrollbarsCustom-Content"
+                  style="padding:0.05px"
+                >
+                  <li
+                    aria-hidden="true"
+                    class="option highlightedOption"
+                    role="presentation"
+                  >
+                    <div>
+                      <div>
+                        Main wallet
+                      </div>
+                      <div>
+                        100,100 ADA
+                      </div>
+                    </div>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <div>
+                      <div>
+                        Spending money
+                      </div>
+                      <div>
+                        10,100.2 ADA
+                      </div>
+                    </div>
+                  </li>
+                  <li
+                    aria-hidden="true"
+                    class="option"
+                    role="presentation"
+                  >
+                    <div>
+                      <div>
+                        Savings
+                      </div>
+                      <div>
+                        500,1000 ADA
+                      </div>
+                    </div>
+                  </li>
+                </div>
+              </div>
             </div>
-            <div>
-              10,100.2 ADA
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbY"
+                style="touch-action:none"
+              />
             </div>
-          </div>
-        </li>
-        <li
-          aria-hidden={true}
-          className="option"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          role="presentation"
-        >
-          <div>
-            <div>
-              Savings
-            </div>
-            <div>
-              500,1000 ADA
+            <div
+              class="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
+              style="display:none"
+            >
+              <div
+                class="ScrollbarsCustom-Thumb ScrollbarsCustom-ThumbX"
+                style="touch-action:none"
+              />
             </div>
           </div>
-        </li>
+        </div>
       </ul>
     </div>
     <span
-      className="arrow"
-      data-bubble-arrow={true}
+      class="arrow"
+      data-bubble-arrow="true"
     />
   </div>
 </div>
diff --git a/__tests__/__snapshots__/Switch.test.js.snap b/__tests__/__snapshots__/Switch.test.js.snap
index 57786660..69f170a6 100644
--- a/__tests__/__snapshots__/Switch.test.js.snap
+++ b/__tests__/__snapshots__/Switch.test.js.snap
@@ -2,22 +2,21 @@
 
 exports[`Switch is checked 1`] = `
 <div
-  aria-hidden={true}
-  className="root checked"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root checked"
   role="presentation"
 >
   <input
-    checked={true}
-    className="input"
-    readOnly={true}
+    checked=""
+    class="input"
+    readonly=""
     type="checkbox"
   />
   <div
-    className="switch checked"
+    class="switch checked"
   >
     <span
-      className="thumb"
+      class="thumb"
     />
   </div>
 </div>
@@ -25,23 +24,21 @@ exports[`Switch is checked 1`] = `
 
 exports[`Switch is disabled 1`] = `
 <div
-  aria-hidden={true}
-  className="root disabled"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root disabled"
   role="presentation"
 >
   <input
-    checked={false}
-    className="input"
-    disabled={true}
-    readOnly={true}
+    class="input"
+    disabled=""
+    readonly=""
     type="checkbox"
   />
   <div
-    className="switch"
+    class="switch"
   >
     <span
-      className="thumb"
+      class="thumb"
     />
   </div>
 </div>
@@ -49,28 +46,26 @@ exports[`Switch is disabled 1`] = `
 
 exports[`Switch is disabled and renders a label 1`] = `
 <div
-  aria-hidden={true}
-  className="root disabled"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root disabled"
   role="presentation"
 >
   <input
-    checked={false}
-    className="input"
-    disabled={true}
+    class="input"
+    disabled=""
     label="click here"
-    readOnly={true}
+    readonly=""
     type="checkbox"
   />
   <div
-    className="switch"
+    class="switch"
   >
     <span
-      className="thumb"
+      class="thumb"
     />
   </div>
   <label
-    className="label"
+    class="label"
   >
     click here
   </label>
@@ -79,22 +74,20 @@ exports[`Switch is disabled and renders a label 1`] = `
 
 exports[`Switch renders correctly 1`] = `
 <div
-  aria-hidden={true}
-  className="root"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root"
   role="presentation"
 >
   <input
-    checked={false}
-    className="input"
-    readOnly={true}
+    class="input"
+    readonly=""
     type="checkbox"
   />
   <div
-    className="switch"
+    class="switch"
   >
     <span
-      className="thumb"
+      class="thumb"
     />
   </div>
 </div>
@@ -102,27 +95,25 @@ exports[`Switch renders correctly 1`] = `
 
 exports[`Switch renders with label 1`] = `
 <div
-  aria-hidden={true}
-  className="root"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root"
   role="presentation"
 >
   <input
-    checked={false}
-    className="input"
+    class="input"
     label="click here"
-    readOnly={true}
+    readonly=""
     type="checkbox"
   />
   <div
-    className="switch"
+    class="switch"
   >
     <span
-      className="thumb"
+      class="thumb"
     />
   </div>
   <label
-    className="label"
+    class="label"
   >
     click here
   </label>
diff --git a/__tests__/__snapshots__/TextArea.test.js.snap b/__tests__/__snapshots__/TextArea.test.js.snap
index 93d9296f..15ef58ed 100644
--- a/__tests__/__snapshots__/TextArea.test.js.snap
+++ b/__tests__/__snapshots__/TextArea.test.js.snap
@@ -2,16 +2,13 @@
 
 exports[`TextArea renders correctly 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <textarea
-      className="textarea"
-      onChange={[Function]}
-      value=""
+      class="textarea"
     />
   </div>
 </div>
@@ -19,17 +16,14 @@ exports[`TextArea renders correctly 1`] = `
 
 exports[`TextArea renders with 5 rows 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <textarea
-      className="textarea"
-      onChange={[Function]}
-      rows={5}
-      value=""
+      class="textarea"
+      rows="5"
     />
   </div>
 </div>
@@ -37,37 +31,34 @@ exports[`TextArea renders with 5 rows 1`] = `
 
 exports[`TextArea renders with a value 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <textarea
-      className="textarea"
-      onChange={[Function]}
-      value="this one has a value"
-    />
+      class="textarea"
+    >
+      this one has a value
+    </textarea>
   </div>
 </div>
 `;
 
 exports[`TextArea renders with an error 1`] = `
 <div
-  className="root errored"
+  class="root errored"
 >
   <div
-    className="error"
+    class="error"
   >
     Please enter valid input
   </div>
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <textarea
-      className="textarea errored"
-      onChange={[Function]}
-      value=""
+      class="textarea errored"
     />
   </div>
 </div>
@@ -75,17 +66,14 @@ exports[`TextArea renders with an error 1`] = `
 
 exports[`TextArea renders with placeholder 1`] = `
 <div
-  className="root"
+  class="root"
 >
-  
   <div
-    className="inputWrapper"
+    class="inputWrapper"
   >
     <textarea
-      className="textarea"
-      onChange={[Function]}
+      class="textarea"
       placeholder="0.0000"
-      value=""
     />
   </div>
 </div>
diff --git a/__tests__/__snapshots__/Toggler.test.js.snap b/__tests__/__snapshots__/Toggler.test.js.snap
index ffbd6e1e..002aafca 100644
--- a/__tests__/__snapshots__/Toggler.test.js.snap
+++ b/__tests__/__snapshots__/Toggler.test.js.snap
@@ -2,27 +2,26 @@
 
 exports[`Toggler is checked 1`] = `
 <div
-  aria-hidden={true}
-  className="root"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root"
   role="presentation"
 >
   <input
-    checked={true}
-    className="input"
-    readOnly={true}
+    checked=""
+    class="input"
+    readonly=""
     type="checkbox"
   />
   <div
-    className="toggler"
+    class="toggler"
   >
     <span
-      className="label checked"
+      class="label checked"
     >
       Included
     </span>
     <span
-      className="label"
+      class="label"
     >
       Excluded
     </span>
@@ -32,28 +31,26 @@ exports[`Toggler is checked 1`] = `
 
 exports[`Toggler is disabled 1`] = `
 <div
-  aria-hidden={true}
-  className="root disabled"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root disabled"
   role="presentation"
 >
   <input
-    checked={false}
-    className="input"
-    disabled={true}
-    readOnly={true}
+    class="input"
+    disabled=""
+    readonly=""
     type="checkbox"
   />
   <div
-    className="toggler"
+    class="toggler"
   >
     <span
-      className="label"
+      class="label"
     >
       Included
     </span>
     <span
-      className="label checked"
+      class="label checked"
     >
       Excluded
     </span>
@@ -63,27 +60,25 @@ exports[`Toggler is disabled 1`] = `
 
 exports[`Toggler renders correctly 1`] = `
 <div
-  aria-hidden={true}
-  className="root"
-  onClick={[Function]}
+  aria-hidden="true"
+  class="root"
   role="presentation"
 >
   <input
-    checked={false}
-    className="input"
-    readOnly={true}
+    class="input"
+    readonly=""
     type="checkbox"
   />
   <div
-    className="toggler"
+    class="toggler"
   >
     <span
-      className="label"
+      class="label"
     >
       Included
     </span>
     <span
-      className="label checked"
+      class="label checked"
     >
       Excluded
     </span>
@@ -97,27 +92,25 @@ exports[`Toggler renders within text 1`] = `
     Fees 
   </span>
   <div
-    aria-hidden={true}
-    className="root"
-    onClick={[Function]}
+    aria-hidden="true"
+    class="root"
     role="presentation"
   >
     <input
-      checked={false}
-      className="input"
-      readOnly={true}
+      class="input"
+      readonly=""
       type="checkbox"
     />
     <div
-      className="toggler"
+      class="toggler"
     >
       <span
-        className="label"
+        class="label"
       >
         Included
       </span>
       <span
-        className="label checked"
+        class="label checked"
       >
         Excluded
       </span>
diff --git a/__tests__/helpers/theming.js b/__tests__/helpers/theming.js
index b0bc71e9..9744fc68 100644
--- a/__tests__/helpers/theming.js
+++ b/__tests__/helpers/theming.js
@@ -1,17 +1,16 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
-import { mount } from 'enzyme';
+import { mount, render } from 'enzyme';
 
 import { SimpleTheme } from '../../source/themes/simple';
 import { ThemeProvider } from '../../source/components/ThemeProvider';
 import { SimpleSkins } from '../../source/skins/simple';
 
 export const renderInSimpleTheme = (children) => (
-  renderer.create(
+  render((
     <ThemeProvider theme={SimpleTheme} skins={SimpleSkins}>
       {children}
     </ThemeProvider>
-  )
+  ))
 );
 
 export const mountInSimpleTheme = (children) => (
diff --git a/package.json b/package.json
index 401d0b0c..42a13432 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "cross-env": "5.2.0",
     "css-loader": "3.2.0",
     "enzyme": "3.7.0",
-    "enzyme-adapter-react-16": "1.6.0",
+    "enzyme-adapter-react-16": "1.15.2",
     "enzyme-to-json": "3.3.4",
     "eslint": "4.19.1",
     "eslint-config-airbnb": "16.1.0",
@@ -68,15 +68,14 @@
     "file-loader": "5.0.2",
     "flow-bin": "0.60.1",
     "identity-obj-proxy": "3.0.0",
-    "jest": "24.9.0",
+    "jest": "25.1.0",
     "jest-enzyme": "7.1.2",
     "lodash": "4.17.15",
     "node-sass": "4.13.0",
     "nodemon": "1.12.1",
     "prettier-eslint": "8.8.1",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-test-renderer": "16.8.6",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "rimraf": "2.6.2",
     "sass-loader": "8.0.0",
     "style-loader": "1.0.1",
diff --git a/yarn.lock b/yarn.lock
index 34532045..936fc6ef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25,6 +25,13 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
+"@babel/code-frame@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
+  integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
+  dependencies:
+    "@babel/highlight" "^7.8.3"
+
 "@babel/core@7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.0.tgz#9b00f73554edd67bebc86df8303ef678be3d7b48"
@@ -65,6 +72,27 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.7.5":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.8.4.tgz#d496799e5c12195b3602d0fddd77294e3e38e80e"
+  integrity sha512-0LiLrB2PwrVI+a2/IEskBopDYSd8BCb3rOvH7D5tzoWd696TBEduBvuLVm4Nx6rltrLZqvI3MCalB2K2aVzQjA==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.8.4"
+    "@babel/helpers" "^7.8.4"
+    "@babel/parser" "^7.8.4"
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.8.4"
+    "@babel/types" "^7.8.3"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.0"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.4.0", "@babel/generator@^7.6.0", "@babel/generator@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
@@ -75,6 +103,16 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/generator@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.4.tgz#35bbc74486956fe4251829f9f6c48330e8d0985e"
+  integrity sha512-PwhclGdRpNAf3IxZb0YVuITPZmmrXz9zf6fH8lT4XbrmfQKr6ryBzhv593P5C6poJRciFCL/eHGW2NuGrgEyxA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce"
@@ -153,6 +191,15 @@
     "@babel/template" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-function-name@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
+  integrity sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-get-function-arity@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
@@ -160,6 +207,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-get-function-arity@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
+  integrity sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-hoist-variables@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.7.4.tgz#612384e3d823fdfaaf9fce31550fe5d4db0f3d12"
@@ -212,6 +266,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
+"@babel/helper-plugin-utils@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
+  integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
+
 "@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
@@ -255,6 +314,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-split-export-declaration@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
+  integrity sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==
+  dependencies:
+    "@babel/types" "^7.8.3"
+
 "@babel/helper-wrap-function@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace"
@@ -274,6 +340,15 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helpers@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.8.4.tgz#754eb3ee727c165e0a240d6c207de7c455f36f73"
+  integrity sha512-VPbe7wcQ4chu4TDQjimHv/5tj73qz88o12EPkO2ValS2QiQS/1F2SsjyIGNnAD0vF/nZS6Cf9i+vW6HIlnaR8w==
+  dependencies:
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.8.4"
+    "@babel/types" "^7.8.3"
+
 "@babel/highlight@^7.0.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540"
@@ -283,11 +358,25 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.3.tgz#28f173d04223eaaa59bc1d439a3836e6d1265797"
+  integrity sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.6.0", "@babel/parser@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.4.tgz#75ab2d7110c2cf2fa949959afb05fa346d2231bb"
   integrity sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==
 
+"@babel/parser@^7.7.5", "@babel/parser@^7.8.3", "@babel/parser@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.4.tgz#d1dbe64691d60358a974295fa53da074dd2ce8e8"
+  integrity sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==
+
 "@babel/plugin-proposal-async-generator-functions@^7.2.0", "@babel/plugin-proposal-async-generator-functions@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz#0351c5ac0a9e927845fffd5b82af476947b7ce6d"
@@ -377,6 +466,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-bigint@^7.0.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-decorators@^7.2.0":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.7.4.tgz#3c91cfee2a111663ff3ac21b851140f5a52a4e0b"
@@ -954,6 +1050,15 @@
     "@babel/parser" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/template@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8"
+  integrity sha512-04m87AcQgAFdvuoyiQ2kgELr2tV8B4fP/xJAVUL3Yb3bkNdMedD3d0rlSQr3PegP0cms3eHjl1F7PWlvWbU8FQ==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/parser" "^7.8.3"
+    "@babel/types" "^7.8.3"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.6.0", "@babel/traverse@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558"
@@ -969,6 +1074,21 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
+"@babel/traverse@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.4.tgz#f0845822365f9d5b0e312ed3959d3f827f869e3c"
+  integrity sha512-NGLJPZwnVEyBPLI+bl9y9aSnxMhsKz42so7ApAv9D+b4vAFPpY013FTS9LdKxcABoIYFU52HcYga1pPlx454mg==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.8.4"
+    "@babel/helper-function-name" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/parser" "^7.8.4"
+    "@babel/types" "^7.8.3"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
 "@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.3.4.tgz#bf482eaeaffb367a28abbf9357a94963235d90ed"
@@ -987,6 +1107,20 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
+  integrity sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -1105,7 +1239,22 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
   integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==
 
-"@jest/console@^24.7.1", "@jest/console@^24.9.0":
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz#10602de5570baea82f8afbfa2630b24e7a8cfe5b"
+  integrity sha512-ZR0rq/f/E4f4XcgnDvtMWXCUJpi8eO0rssVhmztsZqLIEFA9UUP9zmpE0VxlM+kv/E1ul2I876Fwil2ayptDVg==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
+  integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
+
+"@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
   integrity sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==
@@ -1114,39 +1263,49 @@
     chalk "^2.0.1"
     slash "^2.0.0"
 
-"@jest/core@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.9.0.tgz#2ceccd0b93181f9c4850e74f2a9ad43d351369c4"
-  integrity sha512-Fogg3s4wlAr1VX7q+rhV9RVnUv5tD7VuWfYy1+whMiWUrvl7U3QJSJyWcDio9Lq2prqYsZaeTv2Rz24pWGkJ2A==
-  dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/reporters" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.1"
+"@jest/console@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-25.1.0.tgz#1fc765d44a1e11aec5029c08e798246bd37075ab"
+  integrity sha512-3P1DpqAMK/L07ag/Y9/Jup5iDEG9P4pRAuZiMQnU0JB3UOvCyYCjCoxr7sIA80SeyUCUKrr24fKAxVpmBgQonA==
+  dependencies:
+    "@jest/source-map" "^25.1.0"
+    chalk "^3.0.0"
+    jest-util "^25.1.0"
+    slash "^3.0.0"
+
+"@jest/core@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-25.1.0.tgz#3d4634fc3348bb2d7532915d67781cdac0869e47"
+  integrity sha512-iz05+NmwCmZRzMXvMo6KFipW7nzhbpEawrKrkkdJzgytavPse0biEnCNr2wRlyCsp3SmKaEY+SGv7YWYQnIdig==
+  dependencies:
+    "@jest/console" "^25.1.0"
+    "@jest/reporters" "^25.1.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/transform" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    ansi-escapes "^4.2.1"
+    chalk "^3.0.0"
     exit "^0.1.2"
-    graceful-fs "^4.1.15"
-    jest-changed-files "^24.9.0"
-    jest-config "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-resolve-dependencies "^24.9.0"
-    jest-runner "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    jest-watcher "^24.9.0"
-    micromatch "^3.1.10"
-    p-each-series "^1.0.0"
+    graceful-fs "^4.2.3"
+    jest-changed-files "^25.1.0"
+    jest-config "^25.1.0"
+    jest-haste-map "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-regex-util "^25.1.0"
+    jest-resolve "^25.1.0"
+    jest-resolve-dependencies "^25.1.0"
+    jest-runner "^25.1.0"
+    jest-runtime "^25.1.0"
+    jest-snapshot "^25.1.0"
+    jest-util "^25.1.0"
+    jest-validate "^25.1.0"
+    jest-watcher "^25.1.0"
+    micromatch "^4.0.2"
+    p-each-series "^2.1.0"
     realpath-native "^1.1.0"
-    rimraf "^2.5.4"
-    slash "^2.0.0"
-    strip-ansi "^5.0.0"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
 
 "@jest/environment@^24.9.0":
   version "24.9.0"
@@ -1158,6 +1317,15 @@
     "@jest/types" "^24.9.0"
     jest-mock "^24.9.0"
 
+"@jest/environment@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-25.1.0.tgz#4a97f64770c9d075f5d2b662b5169207f0a3f787"
+  integrity sha512-cTpUtsjU4cum53VqBDlcW0E4KbQF03Cn0jckGPW/5rrE9tb+porD3+hhLtHAwhthsqfyF+bizyodTlsRA++sHg==
+  dependencies:
+    "@jest/fake-timers" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    jest-mock "^25.1.0"
+
 "@jest/fake-timers@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
@@ -1167,34 +1335,51 @@
     jest-message-util "^24.9.0"
     jest-mock "^24.9.0"
 
-"@jest/reporters@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
-  integrity sha512-mu4X0yjaHrffOsWmVLzitKmmmWSQ3GGuefgNscUSWNiUNcEOSEQk9k3pERKEQVBb0Cnn88+UESIsZEMH3o88Gw==
-  dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
+"@jest/fake-timers@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-25.1.0.tgz#a1e0eff51ffdbb13ee81f35b52e0c1c11a350ce8"
+  integrity sha512-Eu3dysBzSAO1lD7cylZd/CVKdZZ1/43SF35iYBNV1Lvvn2Undp3Grwsv8PrzvbLhqwRzDd4zxrY4gsiHc+wygQ==
+  dependencies:
+    "@jest/types" "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-mock "^25.1.0"
+    jest-util "^25.1.0"
+    lolex "^5.0.0"
+
+"@jest/reporters@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-25.1.0.tgz#9178ecf136c48f125674ac328f82ddea46e482b0"
+  integrity sha512-ORLT7hq2acJQa8N+NKfs68ZtHFnJPxsGqmofxW7v7urVhzJvpKZG9M7FAcgh9Ee1ZbCteMrirHA3m5JfBtAaDg==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^25.1.0"
+    "@jest/environment" "^25.1.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/transform" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
+    collect-v8-coverage "^1.0.0"
     exit "^0.1.2"
     glob "^7.1.2"
-    istanbul-lib-coverage "^2.0.2"
-    istanbul-lib-instrument "^3.0.1"
-    istanbul-lib-report "^2.0.4"
-    istanbul-lib-source-maps "^3.0.1"
-    istanbul-reports "^2.2.6"
-    jest-haste-map "^24.9.0"
-    jest-resolve "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.6.0"
-    node-notifier "^5.4.2"
-    slash "^2.0.0"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.0"
+    jest-haste-map "^25.1.0"
+    jest-resolve "^25.1.0"
+    jest-runtime "^25.1.0"
+    jest-util "^25.1.0"
+    jest-worker "^25.1.0"
+    slash "^3.0.0"
     source-map "^0.6.0"
-    string-length "^2.0.0"
+    string-length "^3.1.0"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^4.0.1"
+  optionalDependencies:
+    node-notifier "^6.0.0"
 
-"@jest/source-map@^24.3.0", "@jest/source-map@^24.9.0":
+"@jest/source-map@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
   integrity sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==
@@ -1203,6 +1388,15 @@
     graceful-fs "^4.1.15"
     source-map "^0.6.0"
 
+"@jest/source-map@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-25.1.0.tgz#b012e6c469ccdbc379413f5c1b1ffb7ba7034fb0"
+  integrity sha512-ohf2iKT0xnLWcIUhL6U6QN+CwFWf9XnrM2a6ybL9NXxJjgYijjLSitkYHIdzkd8wFliH73qj/+epIpTiWjRtAA==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.3"
+    source-map "^0.6.0"
+
 "@jest/test-result@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
@@ -1212,15 +1406,26 @@
     "@jest/types" "^24.9.0"
     "@types/istanbul-lib-coverage" "^2.0.0"
 
-"@jest/test-sequencer@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz#f8f334f35b625a4f2f355f2fe7e6036dad2e6b31"
-  integrity sha512-6qqsU4o0kW1dvA95qfNog8v8gkRN9ph6Lz7r96IvZpHdNipP2cBcb07J1Z45mz/VIS01OHJ3pY8T5fUY38tg4A==
+"@jest/test-result@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-25.1.0.tgz#847af2972c1df9822a8200457e64be4ff62821f7"
+  integrity sha512-FZzSo36h++U93vNWZ0KgvlNuZ9pnDnztvaM7P/UcTx87aPDotG18bXifkf1Ji44B7k/eIatmMzkBapnAzjkJkg==
   dependencies:
-    "@jest/test-result" "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-runner "^24.9.0"
-    jest-runtime "^24.9.0"
+    "@jest/console" "^25.1.0"
+    "@jest/transform" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-25.1.0.tgz#4df47208542f0065f356fcdb80026e3c042851ab"
+  integrity sha512-WgZLRgVr2b4l/7ED1J1RJQBOharxS11EFhmwDqknpknE0Pm87HLZVS2Asuuw+HQdfQvm2aXL2FvvBLxOD1D0iw==
+  dependencies:
+    "@jest/test-result" "^25.1.0"
+    jest-haste-map "^25.1.0"
+    jest-runner "^25.1.0"
+    jest-runtime "^25.1.0"
 
 "@jest/transform@^24.9.0":
   version "24.9.0"
@@ -1244,6 +1449,28 @@
     source-map "^0.6.1"
     write-file-atomic "2.4.1"
 
+"@jest/transform@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-25.1.0.tgz#221f354f512b4628d88ce776d5b9e601028ea9da"
+  integrity sha512-4ktrQ2TPREVeM+KxB4zskAT84SnmG1vaz4S+51aTefyqn3zocZUnliLLm5Fsl85I3p/kFPN4CRp1RElIfXGegQ==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^25.1.0"
+    babel-plugin-istanbul "^6.0.0"
+    chalk "^3.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.3"
+    jest-haste-map "^25.1.0"
+    jest-regex-util "^25.1.0"
+    jest-util "^25.1.0"
+    micromatch "^4.0.2"
+    pirates "^4.0.1"
+    realpath-native "^1.1.0"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
 "@jest/types@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
@@ -1253,6 +1480,16 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
+"@jest/types@^25.1.0":
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.1.0.tgz#b26831916f0d7c381e11dbb5e103a72aed1b4395"
+  integrity sha512-VpOtt7tCrgvamWZh1reVsGADujKigBUFTi19mlRjqEGsE8qH4r3s+skY33dNdXOwyZIvuftZ5tqdF1IgsMejMA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.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"
@@ -1277,6 +1514,13 @@
     react-lifecycles-compat "^3.0.4"
     warning "^3.0.0"
 
+"@sinonjs/commons@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.0.tgz#f90ffc52a2e519f018b13b6c4da03cbff36ebed6"
+  integrity sha512-qbk9AP+cZUsKdW1GJsBpxPKFmCJ0T8swwzVje3qFd+AkQb74Q/tiuzrdfFg8AD2g5HH/XbE/I8Uc1KYHVYWfhg==
+  dependencies:
+    type-detect "4.0.8"
+
 "@storybook/addon-actions@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-5.2.8.tgz#f63c6e1afb59e94ca1ebc776b7cad9b815e7419e"
@@ -1731,6 +1975,11 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/color-name@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -1755,7 +2004,7 @@
   resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83"
   integrity sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w==
 
-"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
   integrity sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==
@@ -1852,6 +2101,13 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/yargs@^15.0.0":
+  version "15.0.3"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.3.tgz#41453a0bc7ab393e995d1f5451455638edbd2baf"
+  integrity sha512-XCMQRK6kfpNBixHLyHUsGmXrpEmFFxzMrcnSXFMziHd8CoNJo8l16FkHyQq4x+xbM7E2XL83/O78OD8u+iZTdQ==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@@ -2013,6 +2269,11 @@ abab@^1.0.4:
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
   integrity sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4=
 
+abab@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
+  integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -2033,6 +2294,14 @@ acorn-globals@^4.1.0:
   dependencies:
     acorn "^5.0.0"
 
+acorn-globals@^4.3.2:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
+  integrity sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==
+  dependencies:
+    acorn "^6.0.1"
+    acorn-walk "^6.0.1"
+
 acorn-jsx@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
@@ -2040,6 +2309,11 @@ acorn-jsx@^3.0.0:
   dependencies:
     acorn "^3.0.4"
 
+acorn-walk@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
+  integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
+
 acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
@@ -2050,11 +2324,16 @@ acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
   integrity sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==
 
-acorn@^6.2.1:
+acorn@^6.0.1, acorn@^6.2.1:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.0.tgz#b659d2ffbafa24baf5db1cdbb2c94a983ecd2784"
   integrity sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==
 
+acorn@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
+  integrity sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==
+
 address@1.1.2, address@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -2083,6 +2362,22 @@ address@1.1.2, address@^1.0.1:
     string.prototype.padstart "^3.0.0"
     symbol.prototype.description "^1.0.0"
 
+airbnb-prop-types@^2.15.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz#5287820043af1eb469f5b0af0d6f70da6c52aaef"
+  integrity sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==
+  dependencies:
+    array.prototype.find "^2.1.0"
+    function.prototype.name "^1.1.1"
+    has "^1.0.3"
+    is-regex "^1.0.4"
+    object-is "^1.0.1"
+    object.assign "^4.1.0"
+    object.entries "^1.1.0"
+    prop-types "^15.7.2"
+    prop-types-exact "^1.2.0"
+    react-is "^16.9.0"
+
 ajv-errors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -2182,6 +2477,13 @@ ansi-escapes@^3.2.0:
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
+ansi-escapes@^4.2.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.0.tgz#a4ce2b33d6b214b7950d8595c212f12ac9cc569d"
+  integrity sha512-EiYhwo0v255HUL6eDyuLrXEkTi7WwVCLAw+SeOQ7M7qdun1z1pum4DEm/nuqIVbPvi9RPPc9k9LbyBv6H0DwVg==
+  dependencies:
+    type-fest "^0.8.1"
+
 ansi-html@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
@@ -2197,11 +2499,16 @@ ansi-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
   integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
 
-ansi-regex@^4.0.0, ansi-regex@^4.1.0:
+ansi-regex@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
   integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
 
+ansi-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
+  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -2214,6 +2521,14 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
+  integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
+  dependencies:
+    "@types/color-name" "^1.1.1"
+    color-convert "^2.0.1"
+
 ansi-to-html@^0.6.11:
   version "0.6.13"
   resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.6.13.tgz#c72eae8b63e5ca0643aab11bfc6e6f2217425833"
@@ -2237,6 +2552,14 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+anymatch@^3.0.3:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 app-root-dir@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/app-root-dir/-/app-root-dir-1.0.2.tgz#38187ec2dea7577fff033ffcb12172692ff6e118"
@@ -2337,6 +2660,14 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
+array.prototype.find@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.1.0.tgz#630f2eaf70a39e608ac3573e45cf8ccd0ede9ad7"
+  integrity sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.13.0"
+
 array.prototype.flat@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz#812db8f02cad24d3fab65dd67eabe3b8903494a4"
@@ -2549,7 +2880,7 @@ babel-helper-to-multiple-sequence-expressions@^0.5.0:
   resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.5.0.tgz#a3f924e3561882d42fcf48907aa98f7979a4588d"
   integrity sha512-m2CvfDW4+1qfDdsrtf4dwOslQC3yhbgyBFptncp4wvtdrDHqueW7slsYv4gArie056phvQFhT2nRcGS4bnm6mA==
 
-babel-jest@24.9.0, babel-jest@^24.9.0:
+babel-jest@24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
   integrity sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw==
@@ -2562,6 +2893,19 @@ babel-jest@24.9.0, babel-jest@^24.9.0:
     chalk "^2.4.2"
     slash "^2.0.0"
 
+babel-jest@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-25.1.0.tgz#206093ac380a4b78c4404a05b3277391278f80fb"
+  integrity sha512-tz0VxUhhOE2y+g8R2oFrO/2VtVjA1lkJeavlhExuRBg3LdNJY9gwQ+Vcvqt9+cqy71MCTJhewvTB7Qtnnr9SWg==
+  dependencies:
+    "@jest/transform" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    "@types/babel__core" "^7.1.0"
+    babel-plugin-istanbul "^6.0.0"
+    babel-preset-jest "^25.1.0"
+    chalk "^3.0.0"
+    slash "^3.0.0"
+
 babel-loader@8.0.6:
   version "8.0.6"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
@@ -2610,6 +2954,17 @@ babel-plugin-istanbul@^5.1.0:
     istanbul-lib-instrument "^3.3.0"
     test-exclude "^5.2.3"
 
+babel-plugin-istanbul@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
+  integrity sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^4.0.0"
+    test-exclude "^6.0.0"
+
 babel-plugin-jest-hoist@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz#4f837091eb407e01447c8843cbec546d0002d756"
@@ -2617,6 +2972,13 @@ babel-plugin-jest-hoist@^24.9.0:
   dependencies:
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-jest-hoist@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-25.1.0.tgz#fb62d7b3b53eb36c97d1bc7fec2072f9bd115981"
+  integrity sha512-oIsopO41vW4YFZ9yNYoLQATnnN46lp+MZ6H4VvPKFkcc2/fkl3CfE/NZZSmnEIEsJRmJAgkVEK0R7Zbl50CpTw==
+  dependencies:
+    "@types/babel__traverse" "^7.0.6"
+
 babel-plugin-lodash@3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-lodash/-/babel-plugin-lodash-3.3.4.tgz#4f6844358a1340baed182adbeffa8df9967bc196"
@@ -2813,6 +3175,15 @@ babel-preset-jest@^24.9.0:
     "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
     babel-plugin-jest-hoist "^24.9.0"
 
+babel-preset-jest@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-25.1.0.tgz#d0aebfebb2177a21cde710996fce8486d34f1d33"
+  integrity sha512-eCGn64olaqwUMaugXsTtGAM2I0QTahjEtnRu0ql8Ie+gDWAc1N6wqN0k2NilnyTunM69Pad7gJY7LOtwLimoFQ==
+  dependencies:
+    "@babel/plugin-syntax-bigint" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    babel-plugin-jest-hoist "^25.1.0"
+
 "babel-preset-minify@^0.5.0 || 0.6.0-alpha.5":
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/babel-preset-minify/-/babel-preset-minify-0.5.1.tgz#25f5d0bce36ec818be80338d0e594106e21eaa9f"
@@ -3025,6 +3396,13 @@ braces@^2.3.0, braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
+braces@^3.0.1:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
 brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
@@ -3333,6 +3711,14 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 character-entities-legacy@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.3.tgz#3c729991d9293da0ede6dddcaf1f2ce1009ee8b4"
@@ -3541,14 +3927,14 @@ cliui@^3.2.0:
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
   dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
 
 clone-deep@^0.2.4:
   version "0.2.4"
@@ -3594,6 +3980,11 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+collect-v8-coverage@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.0.tgz#150ee634ac3650b71d9c985eb7f608942334feb1"
+  integrity sha512-VKIhJgvk8E1W28m5avZ2Gv2Ruv5YiF56ug2oclvaG9md69BuZImMG2sk9g7QNKLUbtYAKQjXjYxbYZVUlMMKmQ==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -3609,11 +4000,23 @@ color-convert@^1.9.0:
   dependencies:
     color-name "^1.1.1"
 
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
 color-name@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
 colors@0.5.x:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774"
@@ -3658,11 +4061,6 @@ commander@^4.0.0, commander@^4.0.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.0.1.tgz#b67622721785993182e807f4883633e6401ba53c"
   integrity sha512-IPF4ouhCP+qdlcmCedhxX4xiGBPyigb8v5NeUp+0LyhwLgxMqyp3S0vl7TAPfS/hiP7FC3caI/PB9lTmP8r1NA==
 
-commander@~2.20.0:
-  version "2.20.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
-  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
-
 common-tags@^1.4.0:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.7.2.tgz#24d9768c63d253a56ecff93845b44b4df1d52771"
@@ -3746,7 +4144,7 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@^1.1.0, convert-source-map@^1.5.0, convert-source-map@^1.7.0:
+convert-source-map@^1.1.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
   integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@@ -3982,6 +4380,15 @@ cross-spawn@^5.0.1, cross-spawn@^5.1.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+cross-spawn@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14"
+  integrity sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -4082,6 +4489,16 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
   integrity sha1-uANhcMefB6kP8vFuIihAJ6JDhIs=
 
+cssom@^0.4.1:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
+  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
 "cssstyle@>= 0.3.1 < 0.4.0":
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.3.1.tgz#6da9b4cff1bc5d716e6e5fe8e04fcb1b50a49adf"
@@ -4089,6 +4506,13 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   dependencies:
     cssom "0.3.x"
 
+cssstyle@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.2.0.tgz#e4c44debccd6b7911ed617a4395e5754bba59992"
+  integrity sha512-sEb3XFPx3jNnCAMtqrXPDeSgQr+jojtCeNf8cvMNMh1cG970+lljssvQDzPq6lmmJu2Vhqood/gtEomBiHOGnA==
+  dependencies:
+    cssom "~0.3.6"
+
 csstype@^2.2.0:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.2.tgz#4534308476ceede8fbe148b9b99f9baf1c80fa06"
@@ -4132,6 +4556,15 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.0.0"
     whatwg-url "^6.4.0"
 
+data-urls@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.1.0.tgz#15ee0582baa5e22bb59c77140da8f9c76963bbfe"
+  integrity sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==
+  dependencies:
+    abab "^2.0.0"
+    whatwg-mimetype "^2.2.0"
+    whatwg-url "^7.0.0"
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@@ -4290,10 +4723,10 @@ detect-libc@^1.0.2:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
 
-detect-newline@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
-  integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
 detect-port-alt@1.1.6:
   version "1.1.6"
@@ -4311,10 +4744,10 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "^2.6.0"
 
-diff-sequences@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
-  integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
+diff-sequences@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.1.0.tgz#fd29a46f1c913fd66c22645dc75bffbe43051f32"
+  integrity sha512-nFIfVk5B/NStCsJ+zaPO4vYuLjlzQ6uFvPxzYyHlejNZ/UGa7G/n7peOXVrVNvRuyfstt+mZQYGpjxg9Z6N8Kw==
 
 diffie-hellman@^5.0.0:
   version "5.0.3"
@@ -4407,7 +4840,7 @@ domelementtype@~1.1.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
   integrity sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=
 
-domexception@^1.0.0:
+domexception@^1.0.0, domexception@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
   integrity sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==
@@ -4559,6 +4992,11 @@ emoji-regex@^7.0.1:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
   integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
 
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -4611,27 +5049,32 @@ entities@^1.1.2:
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
 
-enzyme-adapter-react-16@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.6.0.tgz#3fca28d3c32f3ff427495380fe2dd51494689073"
-  integrity sha512-ay9eGFpChyUDnjTFMMJHzrb681LF3hPWJLEA7RoLFG9jSWAdAm2V50pGmFV9dYGJgh5HfdiqM+MNvle41Yf/PA==
+enzyme-adapter-react-16@1.15.2:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.2.tgz#b16db2f0ea424d58a808f9df86ab6212895a4501"
+  integrity sha512-SkvDrb8xU3lSxID8Qic9rB8pvevDbLybxPK6D/vW7PrT0s2Cl/zJYuXvsd1EBTz0q4o3iqG3FJhpYz3nUNpM2Q==
   dependencies:
-    enzyme-adapter-utils "^1.8.0"
-    function.prototype.name "^1.1.0"
+    enzyme-adapter-utils "^1.13.0"
+    enzyme-shallow-equal "^1.0.1"
+    has "^1.0.3"
     object.assign "^4.1.0"
-    object.values "^1.0.4"
-    prop-types "^15.6.2"
-    react-is "^16.5.2"
+    object.values "^1.1.1"
+    prop-types "^15.7.2"
+    react-is "^16.12.0"
     react-test-renderer "^16.0.0-0"
+    semver "^5.7.0"
 
-enzyme-adapter-utils@^1.8.0:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.8.1.tgz#a927d840ce2c14b42892a533aec836809d4e022b"
-  integrity sha512-s3QB3xQAowaDS2sHhmEqrT13GJC4+n5bG015ZkLv60n9k5vhxxHTQRIneZmQ4hmdCZEBrvUJ89PG6fRI5OEeuQ==
+enzyme-adapter-utils@^1.13.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.13.0.tgz#01c885dde2114b4690bf741f8dc94cee3060eb78"
+  integrity sha512-YuEtfQp76Lj5TG1NvtP2eGJnFKogk/zT70fyYHXK2j3v6CtuHqc8YmgH/vaiBfL8K1SgVVbQXtTcgQZFwzTVyQ==
   dependencies:
-    function.prototype.name "^1.1.0"
+    airbnb-prop-types "^2.15.0"
+    function.prototype.name "^1.1.2"
     object.assign "^4.1.0"
-    prop-types "^15.6.2"
+    object.fromentries "^2.0.2"
+    prop-types "^15.7.2"
+    semver "^5.7.1"
 
 enzyme-matchers@^7.1.2:
   version "7.1.2"
@@ -4641,6 +5084,14 @@ enzyme-matchers@^7.1.2:
     circular-json-es6 "^2.0.1"
     deep-equal-ident "^1.1.1"
 
+enzyme-shallow-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.1.tgz#7afe03db3801c9b76de8440694096412a8d9d49e"
+  integrity sha512-hGA3i1so8OrYOZSM9whlkNmVHOicJpsjgTzC+wn2JMJXhq1oO4kA4bJ5MsfzSIcC71aLDKzJ6gZpIxrqt3QTAQ==
+  dependencies:
+    has "^1.0.3"
+    object-is "^1.0.2"
+
 enzyme-to-json@3.3.4, enzyme-to-json@^3.3.0:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.3.4.tgz#67c6040e931182f183418af2eb9f4323258aa77f"
@@ -4721,6 +5172,23 @@ es-abstract@^1.12.0, es-abstract@^1.13.0, es-abstract@^1.15.0:
     string.prototype.trimleft "^2.1.0"
     string.prototype.trimright "^2.1.0"
 
+es-abstract@^1.17.0-next.1:
+  version "1.17.4"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.4.tgz#e3aedf19706b20e7c2594c35fc0d57605a79e184"
+  integrity sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.1.5"
+    is-regex "^1.0.5"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimleft "^2.1.1"
+    string.prototype.trimright "^2.1.1"
+
 es-abstract@^1.5.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
@@ -4775,6 +5243,18 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escodegen@^1.11.1:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.13.0.tgz#c7adf9bd3f3cc675bb752f202f79a720189cab29"
+  integrity sha512-eYk2dCkxR07DsHA/X2hRBj0CFAZeri/LyDMc0C8JT1Hqi6JnVpMhJ7XFITbb0+yZS3lVkaPL2oCkZ3AVmeVbMw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
 escodegen@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.1.tgz#dbae17ef96c8e4bedb1356f4504fa4cc2f7cb7e2"
@@ -4975,6 +5455,11 @@ esprima@^4.0.0, esprima@~4.0.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
   integrity sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==
 
+esprima@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
 esquery@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
@@ -5078,6 +5563,22 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
+  integrity sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g==
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    p-finally "^2.0.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
 exenv@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
@@ -5115,17 +5616,17 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
-expect@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-24.9.0.tgz#b75165b4817074fa4a157794f46fe9f1ba15b6ca"
-  integrity sha512-wvVAx8XIol3Z5m9zvZXiyZOQ+sRJqNTIm6sGjdWlaZIeupQGO3WbYI+15D/AmEwZywL6wtJkbAbJtzkOfBuR0Q==
+expect@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-25.1.0.tgz#7e8d7b06a53f7d66ec927278db3304254ee683ee"
+  integrity sha512-wqHzuoapQkhc3OKPlrpetsfueuEiMf3iWh0R8+duCu9PIjXoP7HgD5aeypwTnXUAjC8aMsiVDaWwlbJ1RlQ38g==
   dependencies:
-    "@jest/types" "^24.9.0"
-    ansi-styles "^3.2.0"
-    jest-get-type "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-regex-util "^24.9.0"
+    "@jest/types" "^25.1.0"
+    ansi-styles "^4.0.0"
+    jest-get-type "^25.1.0"
+    jest-matcher-utils "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-regex-util "^25.1.0"
 
 express@^4.17.0:
   version "4.17.1"
@@ -5396,6 +5897,13 @@ fill-range@^4.0.0:
     repeat-string "^1.6.1"
     to-regex-range "^2.1.0"
 
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 filter-react-dom-props@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/filter-react-dom-props/-/filter-react-dom-props-0.0.2.tgz#d5c1e5a89c13534cebe3930a22afa9ae3238813b"
@@ -5459,7 +5967,7 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
-find-up@^4.0.0:
+find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
   integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
@@ -5660,6 +6168,11 @@ fsevents@^1.2.7:
     nan "^2.12.1"
     node-pre-gyp "^0.12.0"
 
+fsevents@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
+  integrity sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==
+
 fstream@^1.0.0, fstream@^1.0.2:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
@@ -5684,11 +6197,25 @@ function.prototype.name@^1.1.0:
     function-bind "^1.1.1"
     is-callable "^1.1.3"
 
+function.prototype.name@^1.1.1, function.prototype.name@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.2.tgz#5cdf79d7c05db401591dfde83e3b70c5123e9a45"
+  integrity sha512-C8A+LlHBJjB2AdcRPorc5JvJ5VUoWlXdEHLOJdCI7kjHEtGTpHQUiqMvCIKUwIsGwZX2jZJy761AXsn356bJQg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    functions-have-names "^1.2.0"
+
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+functions-have-names@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.1.tgz#a981ac397fa0c9964551402cdc5533d7a4d52f91"
+  integrity sha512-j48B/ZI7VKs3sgeI2cZp7WXWmZXu7Iq5pl5/vptV5N2mq+DGFuS/ulaDjtaoLpYzuD6u8UgrUKHfgo7fDTSiBA==
+
 fuse.js@^3.4.4:
   version "3.4.6"
   resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.6.tgz#545c3411fed88bf2e27c457cab6e73e7af697a45"
@@ -5715,6 +6242,11 @@ gaze@^1.0.0:
   dependencies:
     globule "^1.0.0"
 
+gensync@^1.0.0-beta.1:
+  version "1.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
+  integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
+
 get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -5742,6 +6274,13 @@ get-stream@^4.0.0:
   dependencies:
     pump "^3.0.0"
 
+get-stream@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.1.0.tgz#01203cdc92597f9b909067c3e656cc1f4d3c4dc9"
+  integrity sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==
+  dependencies:
+    pump "^3.0.0"
+
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@@ -5936,7 +6475,7 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
   integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=
 
-graceful-fs@^4.1.15, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0:
+graceful-fs@^4.1.15, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
   integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
@@ -5959,17 +6498,6 @@ gzip-size@5.1.1:
     duplexer "^0.1.1"
     pify "^4.0.1"
 
-handlebars@^4.1.2:
-  version "4.5.3"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
-  integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
-  dependencies:
-    neo-async "^2.6.0"
-    optimist "^0.6.1"
-    source-map "^0.6.1"
-  optionalDependencies:
-    uglify-js "^3.1.4"
-
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
@@ -6008,6 +6536,11 @@ has-flag@^3.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
 
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
 has-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
@@ -6142,6 +6675,11 @@ html-entities@^1.2.0:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
   integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
 
+html-escaper@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.0.tgz#71e87f931de3fe09e56661ab9a29aadec707b491"
+  integrity sha512-a4u9BeERWGu/S8JiWEAQcdrg9v4QArtP9keViQjGMdff20fBdd8waotXaNmODqBe6uZ3Nafi7K/ho4gCQHV3Ig==
+
 html-minifier-terser@^5.0.1:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.0.2.tgz#0e67a0b062ae1dd0719fc73199479298f807ae16"
@@ -6230,6 +6768,11 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+human-signals@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
+  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
+
 iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -6340,13 +6883,13 @@ import-lazy@^2.1.0:
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
   integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
 
-import-local@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
-  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
+import-local@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
+  integrity sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==
   dependencies:
-    pkg-dir "^3.0.0"
-    resolve-cwd "^2.0.0"
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
 
 imurmurhash@^0.1.4:
   version "0.1.4"
@@ -6488,6 +7031,11 @@ invert-kv@^1.0.0:
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
   integrity sha1-EEqOSqym09jNFXqO+L+rLXo//bY=
 
+ip-regex@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
+  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
+
 ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
@@ -6569,6 +7117,11 @@ is-callable@^1.1.4:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
   integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
 
+is-callable@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
+  integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
+
 is-ci@^1.0.10:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
@@ -6688,6 +7241,11 @@ is-fullwidth-code-point@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
   integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
 
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
 is-function@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
@@ -6768,6 +7326,11 @@ is-number@^4.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
   integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
 
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
 is-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
@@ -6845,6 +7408,13 @@ is-regex@^1.0.4:
   dependencies:
     has "^1.0.1"
 
+is-regex@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
+  integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
+  dependencies:
+    has "^1.0.3"
+
 is-resolvable@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
@@ -6865,6 +7435,11 @@ is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
+is-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
+  integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
+
 is-string@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
@@ -6887,7 +7462,7 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.1"
 
-is-typedarray@~1.0.0:
+is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
@@ -6907,6 +7482,11 @@ is-wsl@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
   integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
 
+is-wsl@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.1.1.tgz#4a1c152d429df3d441669498e2486d3596ebaf1d"
+  integrity sha512-umZHcSrwlDHo2TGMXv0DZ8dIUGunZ2Iv68YZnrmCiBPkZ4aaOhtv7pXJKeki9k3qJ3RJr0cDyitcl5wEH3AYog==
+
 isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
@@ -6952,12 +7532,17 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
-istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.5:
+istanbul-lib-coverage@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
   integrity sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==
 
-istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
+istanbul-lib-coverage@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
+  integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
+
+istanbul-lib-instrument@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
   integrity sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==
@@ -6970,111 +7555,123 @@ istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
     istanbul-lib-coverage "^2.0.5"
     semver "^6.0.0"
 
-istanbul-lib-report@^2.0.4:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz#5a8113cd746d43c4889eba36ab10e7d50c9b4f33"
-  integrity sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==
-  dependencies:
-    istanbul-lib-coverage "^2.0.5"
-    make-dir "^2.1.0"
-    supports-color "^6.1.0"
-
-istanbul-lib-source-maps@^3.0.1:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz#284997c48211752ec486253da97e3879defba8c8"
-  integrity sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==
+istanbul-lib-instrument@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.1.tgz#61f13ac2c96cfefb076fe7131156cc05907874e6"
+  integrity sha512-imIchxnodll7pvQBYOqUu88EufLCU56LMeFPZZM/fJZ1irYcYdqroaV+ACK1Ila8ls09iEYArp+nqyC6lW1Vfg==
   dependencies:
-    debug "^4.1.1"
-    istanbul-lib-coverage "^2.0.5"
-    make-dir "^2.1.0"
-    rimraf "^2.6.3"
-    source-map "^0.6.1"
+    "@babel/core" "^7.7.5"
+    "@babel/parser" "^7.7.5"
+    "@babel/template" "^7.7.4"
+    "@babel/traverse" "^7.7.4"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.0.0"
+    semver "^6.3.0"
 
-istanbul-reports@^2.2.6:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.6.tgz#7b4f2660d82b29303a8fe6091f8ca4bf058da1af"
-  integrity sha512-SKi4rnMyLBKe0Jy2uUdx28h8oG7ph2PPuQPvIAh31d+Ci+lSiEu4C+h3oBPuJ9+mPKhOyW0M8gY4U5NM1WLeXA==
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
+  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
   dependencies:
-    handlebars "^4.1.2"
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
 
-jest-changed-files@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
-  integrity sha512-6aTWpe2mHF0DhL28WjdkO8LyGjs3zItPET4bMSeXU6T3ub4FPMw+mcOcbdGXQOAfmLcxofD23/5Bl9Z4AkFwqg==
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz#75743ce6d96bb86dc7ee4352cf6366a23f0b1ad9"
+  integrity sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==
   dependencies:
-    "@jest/types" "^24.9.0"
-    execa "^1.0.0"
-    throat "^4.0.0"
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
 
-jest-cli@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.9.0.tgz#ad2de62d07472d419c6abc301fc432b98b10d2af"
-  integrity sha512-+VLRKyitT3BWoMeSUIHRxV/2g8y9gw91Jh5z2UmXZzkZKpbC08CSehVxgHUwTpy+HwGcns/tqafQDJW7imYvGg==
-  dependencies:
-    "@jest/core" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
+istanbul-reports@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.0.tgz#d4d16d035db99581b6194e119bbf36c963c5eb70"
+  integrity sha512-2osTcC8zcOSUkImzN2EWQta3Vdi4WjjKw99P2yWx5mLnigAM0Rd5uYFn1cf2i/Ois45GkNjaoTqc5CxgMSX80A==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+jest-changed-files@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-25.1.0.tgz#73dae9a7d9949fdfa5c278438ce8f2ff3ec78131"
+  integrity sha512-bdL1aHjIVy3HaBO3eEQeemGttsq1BDlHgWcOjEOIAcga7OOEGWHD2WSu8HhL7I1F0mFFyci8VKU4tRNk+qtwDA==
+  dependencies:
+    "@jest/types" "^25.1.0"
+    execa "^3.2.0"
+    throat "^5.0.0"
+
+jest-cli@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-25.1.0.tgz#75f0b09cf6c4f39360906bf78d580be1048e4372"
+  integrity sha512-p+aOfczzzKdo3AsLJlhs8J5EW6ffVidfSZZxXedJ0mHPBOln1DccqFmGCoO8JWd4xRycfmwy1eoQkMsF8oekPg==
+  dependencies:
+    "@jest/core" "^25.1.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
     exit "^0.1.2"
-    import-local "^2.0.0"
+    import-local "^3.0.2"
     is-ci "^2.0.0"
-    jest-config "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
+    jest-config "^25.1.0"
+    jest-util "^25.1.0"
+    jest-validate "^25.1.0"
     prompts "^2.0.1"
     realpath-native "^1.1.0"
-    yargs "^13.3.0"
+    yargs "^15.0.0"
 
-jest-config@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.9.0.tgz#fb1bbc60c73a46af03590719efa4825e6e4dd1b5"
-  integrity sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==
+jest-config@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-25.1.0.tgz#d114e4778c045d3ef239452213b7ad3ec1cbea90"
+  integrity sha512-tLmsg4SZ5H7tuhBC5bOja0HEblM0coS3Wy5LTCb2C8ZV6eWLewHyK+3qSq9Bi29zmWQ7ojdCd3pxpx4l4d2uGw==
   dependencies:
     "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    babel-jest "^24.9.0"
-    chalk "^2.0.1"
+    "@jest/test-sequencer" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    babel-jest "^25.1.0"
+    chalk "^3.0.0"
     glob "^7.1.1"
-    jest-environment-jsdom "^24.9.0"
-    jest-environment-node "^24.9.0"
-    jest-get-type "^24.9.0"
-    jest-jasmine2 "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    micromatch "^3.1.10"
-    pretty-format "^24.9.0"
+    jest-environment-jsdom "^25.1.0"
+    jest-environment-node "^25.1.0"
+    jest-get-type "^25.1.0"
+    jest-jasmine2 "^25.1.0"
+    jest-regex-util "^25.1.0"
+    jest-resolve "^25.1.0"
+    jest-util "^25.1.0"
+    jest-validate "^25.1.0"
+    micromatch "^4.0.2"
+    pretty-format "^25.1.0"
     realpath-native "^1.1.0"
 
-jest-diff@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
-  integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
+jest-diff@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.1.0.tgz#58b827e63edea1bc80c1de952b80cec9ac50e1ad"
+  integrity sha512-nepXgajT+h017APJTreSieh4zCqnSHEJ1iT8HDlewu630lSJ4Kjjr9KNzm+kzGwwcpsDE6Snx1GJGzzsefaEHw==
   dependencies:
-    chalk "^2.0.1"
-    diff-sequences "^24.9.0"
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
+    chalk "^3.0.0"
+    diff-sequences "^25.1.0"
+    jest-get-type "^25.1.0"
+    pretty-format "^25.1.0"
 
-jest-docblock@^24.3.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
-  integrity sha512-F1DjdpDMJMA1cN6He0FNYNZlo3yYmOtRUnktrT9Q37njYzC5WEaDdmbynIgy0L/IvXvvgsG8OsqhLPXTpfmZAA==
+jest-docblock@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-25.1.0.tgz#0f44bea3d6ca6dfc38373d465b347c8818eccb64"
+  integrity sha512-370P/mh1wzoef6hUKiaMcsPtIapY25suP6JqM70V9RJvdKLrV4GaGbfUseUVk4FZJw4oTZ1qSCJNdrClKt5JQA==
   dependencies:
-    detect-newline "^2.1.0"
+    detect-newline "^3.0.0"
 
-jest-each@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.9.0.tgz#eb2da602e2a610898dbc5f1f6df3ba86b55f8b05"
-  integrity sha512-ONi0R4BvW45cw8s2Lrx8YgbeXL1oCQ/wIDwmsM3CqM/nlblNCPmnC3IPQlMbRFZu3wKdQ2U8BqM6lh3LJ5Bsog==
+jest-each@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-25.1.0.tgz#a6b260992bdf451c2d64a0ccbb3ac25e9b44c26a"
+  integrity sha512-R9EL8xWzoPySJ5wa0DXFTj7NrzKpRD40Jy+zQDp3Qr/2QmevJgkN9GqioCGtAJ2bW9P/MQRznQHQQhoeAyra7A==
   dependencies:
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    jest-get-type "^24.9.0"
-    jest-util "^24.9.0"
-    pretty-format "^24.9.0"
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
+    jest-get-type "^25.1.0"
+    jest-util "^25.1.0"
+    pretty-format "^25.1.0"
 
 jest-environment-enzyme@^7.1.2:
   version "7.1.2"
@@ -7083,7 +7680,7 @@ jest-environment-enzyme@^7.1.2:
   dependencies:
     jest-environment-jsdom "^24.0.0"
 
-jest-environment-jsdom@^24.0.0, jest-environment-jsdom@^24.9.0:
+jest-environment-jsdom@^24.0.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
   integrity sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==
@@ -7095,16 +7692,28 @@ jest-environment-jsdom@^24.0.0, jest-environment-jsdom@^24.9.0:
     jest-util "^24.9.0"
     jsdom "^11.5.1"
 
-jest-environment-node@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.9.0.tgz#333d2d2796f9687f2aeebf0742b519f33c1cbfd3"
-  integrity sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==
-  dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-util "^24.9.0"
+jest-environment-jsdom@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-25.1.0.tgz#6777ab8b3e90fd076801efd3bff8e98694ab43c3"
+  integrity sha512-ILb4wdrwPAOHX6W82GGDUiaXSSOE274ciuov0lztOIymTChKFtC02ddyicRRCdZlB5YSrv3vzr1Z5xjpEe1OHQ==
+  dependencies:
+    "@jest/environment" "^25.1.0"
+    "@jest/fake-timers" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    jest-mock "^25.1.0"
+    jest-util "^25.1.0"
+    jsdom "^15.1.1"
+
+jest-environment-node@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-25.1.0.tgz#797bd89b378cf0bd794dc8e3dca6ef21126776db"
+  integrity sha512-U9kFWTtAPvhgYY5upnH9rq8qZkj6mYLup5l1caAjjx9uNnkLHN2xgZy5mo4SyLdmrh/EtB9UPpKFShvfQHD0Iw==
+  dependencies:
+    "@jest/environment" "^25.1.0"
+    "@jest/fake-timers" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    jest-mock "^25.1.0"
+    jest-util "^25.1.0"
 
 jest-enzyme@7.1.2:
   version "7.1.2"
@@ -7115,10 +7724,10 @@ jest-enzyme@7.1.2:
     enzyme-to-json "^3.3.0"
     jest-environment-enzyme "^7.1.2"
 
-jest-get-type@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
-  integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
+jest-get-type@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.1.0.tgz#1cfe5fc34f148dc3a8a3b7275f6b9ce9e2e8a876"
+  integrity sha512-yWkBnT+5tMr8ANB6V+OjmrIJufHtCAqI5ic2H40v+tRqxDmE0PGnIiTyvRWFOMtmVHYpwRqyazDbTnhpjsGvLw==
 
 jest-haste-map@^24.9.0:
   version "24.9.0"
@@ -7139,45 +7748,64 @@ jest-haste-map@^24.9.0:
   optionalDependencies:
     fsevents "^1.2.7"
 
-jest-jasmine2@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0"
-  integrity sha512-Cq7vkAgaYKp+PsX+2/JbTarrk0DmNhsEtqBXNwUHkdlbrTBLtMJINADf2mf5FkowNsq8evbPc07/qFO0AdKTzw==
+jest-haste-map@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-25.1.0.tgz#ae12163d284f19906260aa51fd405b5b2e5a4ad3"
+  integrity sha512-/2oYINIdnQZAqyWSn1GTku571aAfs8NxzSErGek65Iu5o8JYb+113bZysRMcC/pjE5v9w0Yz+ldbj9NxrFyPyw==
+  dependencies:
+    "@jest/types" "^25.1.0"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.3"
+    jest-serializer "^25.1.0"
+    jest-util "^25.1.0"
+    jest-worker "^25.1.0"
+    micromatch "^4.0.2"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.1.2"
+
+jest-jasmine2@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-25.1.0.tgz#681b59158a430f08d5d0c1cce4f01353e4b48137"
+  integrity sha512-GdncRq7jJ7sNIQ+dnXvpKO2MyP6j3naNK41DTTjEAhLEdpImaDA9zSAZwDhijjSF/D7cf4O5fdyUApGBZleaEg==
   dependencies:
     "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
+    "@jest/environment" "^25.1.0"
+    "@jest/source-map" "^25.1.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
     co "^4.6.0"
-    expect "^24.9.0"
+    expect "^25.1.0"
     is-generator-fn "^2.0.0"
-    jest-each "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    pretty-format "^24.9.0"
-    throat "^4.0.0"
-
-jest-leak-detector@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz#b665dea7c77100c5c4f7dfcb153b65cf07dcf96a"
-  integrity sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==
-  dependencies:
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-matcher-utils@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
-  integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
-  dependencies:
-    chalk "^2.0.1"
-    jest-diff "^24.9.0"
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
+    jest-each "^25.1.0"
+    jest-matcher-utils "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-runtime "^25.1.0"
+    jest-snapshot "^25.1.0"
+    jest-util "^25.1.0"
+    pretty-format "^25.1.0"
+    throat "^5.0.0"
+
+jest-leak-detector@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-25.1.0.tgz#ed6872d15aa1c72c0732d01bd073dacc7c38b5c6"
+  integrity sha512-3xRI264dnhGaMHRvkFyEKpDeaRzcEBhyNrOG5oT8xPxOyUAblIAQnpiR3QXu4wDor47MDTiHbiFcbypdLcLW5w==
+  dependencies:
+    jest-get-type "^25.1.0"
+    pretty-format "^25.1.0"
+
+jest-matcher-utils@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-25.1.0.tgz#fa5996c45c7193a3c24e73066fc14acdee020220"
+  integrity sha512-KGOAFcSFbclXIFE7bS4C53iYobKI20ZWleAdAFun4W1Wz1Kkej8Ng6RRbhL8leaEvIOjGXhGf/a1JjO8bkxIWQ==
+  dependencies:
+    chalk "^3.0.0"
+    jest-diff "^25.1.0"
+    jest-get-type "^25.1.0"
+    pretty-format "^25.1.0"
 
 jest-message-util@^24.9.0:
   version "24.9.0"
@@ -7193,6 +7821,20 @@ jest-message-util@^24.9.0:
     slash "^2.0.0"
     stack-utils "^1.0.1"
 
+jest-message-util@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-25.1.0.tgz#702a9a5cb05c144b9aa73f06e17faa219389845e"
+  integrity sha512-Nr/Iwar2COfN22aCqX0kCVbXgn8IBm9nWf4xwGr5Olv/KZh0CZ32RKgZWMVDXGdOahicM10/fgjdimGNX/ttCQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^3.0.0"
+    micromatch "^4.0.2"
+    slash "^3.0.0"
+    stack-utils "^1.0.1"
+
 jest-mock@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
@@ -7200,113 +7842,132 @@ jest-mock@^24.9.0:
   dependencies:
     "@jest/types" "^24.9.0"
 
+jest-mock@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-25.1.0.tgz#411d549e1b326b7350b2e97303a64715c28615fd"
+  integrity sha512-28/u0sqS+42vIfcd1mlcg4ZVDmSUYuNvImP4X2lX5hRMLW+CN0BeiKVD4p+ujKKbSPKd3rg/zuhCF+QBLJ4vag==
+  dependencies:
+    "@jest/types" "^25.1.0"
+
 jest-pnp-resolver@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
   integrity sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ==
 
-jest-regex-util@^24.3.0, jest-regex-util@^24.9.0:
+jest-regex-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
   integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
 
-jest-resolve-dependencies@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab"
-  integrity sha512-Fm7b6AlWnYhT0BXy4hXpactHIqER7erNgIsIozDXWl5dVm+k8XdGVe1oTg1JyaFnOxarMEbax3wyRJqGP2Pq+g==
+jest-regex-util@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-25.1.0.tgz#efaf75914267741838e01de24da07b2192d16d87"
+  integrity sha512-9lShaDmDpqwg+xAd73zHydKrBbbrIi08Kk9YryBEBybQFg/lBWR/2BDjjiSE7KIppM9C5+c03XiDaZ+m4Pgs1w==
+
+jest-resolve-dependencies@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-25.1.0.tgz#8a1789ec64eb6aaa77fd579a1066a783437e70d2"
+  integrity sha512-Cu/Je38GSsccNy4I2vL12ZnBlD170x2Oh1devzuM9TLH5rrnLW1x51lN8kpZLYTvzx9j+77Y5pqBaTqfdzVzrw==
   dependencies:
-    "@jest/types" "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-snapshot "^24.9.0"
+    "@jest/types" "^25.1.0"
+    jest-regex-util "^25.1.0"
+    jest-snapshot "^25.1.0"
 
-jest-resolve@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.9.0.tgz#dff04c7687af34c4dd7e524892d9cf77e5d17321"
-  integrity sha512-TaLeLVL1l08YFZAt3zaPtjiVvyy4oSA6CRe+0AFPPVX3Q/VI0giIWWoAvoS5L96vj9Dqxj4fB5p2qrHCmTU/MQ==
+jest-resolve@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-25.1.0.tgz#23d8b6a4892362baf2662877c66aa241fa2eaea3"
+  integrity sha512-XkBQaU1SRCHj2Evz2Lu4Czs+uIgJXWypfO57L7JYccmAXv4slXA6hzNblmcRmf7P3cQ1mE7fL3ABV6jAwk4foQ==
   dependencies:
-    "@jest/types" "^24.9.0"
+    "@jest/types" "^25.1.0"
     browser-resolve "^1.11.3"
-    chalk "^2.0.1"
+    chalk "^3.0.0"
     jest-pnp-resolver "^1.2.1"
     realpath-native "^1.1.0"
 
-jest-runner@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.9.0.tgz#574fafdbd54455c2b34b4bdf4365a23857fcdf42"
-  integrity sha512-KksJQyI3/0mhcfspnxxEOBueGrd5E4vV7ADQLT9ESaCzz02WnbdbKWIf5Mkaucoaj7obQckYPVX6JJhgUcoWWg==
+jest-runner@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-25.1.0.tgz#fef433a4d42c89ab0a6b6b268e4a4fbe6b26e812"
+  integrity sha512-su3O5fy0ehwgt+e8Wy7A8CaxxAOCMzL4gUBftSs0Ip32S0epxyZPDov9Znvkl1nhVOJNf4UwAsnqfc3plfQH9w==
   dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.4.2"
+    "@jest/console" "^25.1.0"
+    "@jest/environment" "^25.1.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
     exit "^0.1.2"
-    graceful-fs "^4.1.15"
-    jest-config "^24.9.0"
-    jest-docblock "^24.3.0"
-    jest-haste-map "^24.9.0"
-    jest-jasmine2 "^24.9.0"
-    jest-leak-detector "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-resolve "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.6.0"
+    graceful-fs "^4.2.3"
+    jest-config "^25.1.0"
+    jest-docblock "^25.1.0"
+    jest-haste-map "^25.1.0"
+    jest-jasmine2 "^25.1.0"
+    jest-leak-detector "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-resolve "^25.1.0"
+    jest-runtime "^25.1.0"
+    jest-util "^25.1.0"
+    jest-worker "^25.1.0"
     source-map-support "^0.5.6"
-    throat "^4.0.0"
-
-jest-runtime@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.9.0.tgz#9f14583af6a4f7314a6a9d9f0226e1a781c8e4ac"
-  integrity sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==
-  dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/environment" "^24.9.0"
-    "@jest/source-map" "^24.3.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/yargs" "^13.0.0"
-    chalk "^2.0.1"
+    throat "^5.0.0"
+
+jest-runtime@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-25.1.0.tgz#02683218f2f95aad0f2ec1c9cdb28c1dc0ec0314"
+  integrity sha512-mpPYYEdbExKBIBB16ryF6FLZTc1Rbk9Nx0ryIpIMiDDkOeGa0jQOKVI/QeGvVGlunKKm62ywcioeFVzIbK03bA==
+  dependencies:
+    "@jest/console" "^25.1.0"
+    "@jest/environment" "^25.1.0"
+    "@jest/source-map" "^25.1.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/transform" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+    collect-v8-coverage "^1.0.0"
     exit "^0.1.2"
     glob "^7.1.3"
-    graceful-fs "^4.1.15"
-    jest-config "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
+    graceful-fs "^4.2.3"
+    jest-config "^25.1.0"
+    jest-haste-map "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-mock "^25.1.0"
+    jest-regex-util "^25.1.0"
+    jest-resolve "^25.1.0"
+    jest-snapshot "^25.1.0"
+    jest-util "^25.1.0"
+    jest-validate "^25.1.0"
     realpath-native "^1.1.0"
-    slash "^2.0.0"
-    strip-bom "^3.0.0"
-    yargs "^13.3.0"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+    yargs "^15.0.0"
 
 jest-serializer@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
   integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
 
-jest-snapshot@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
-  integrity sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==
+jest-serializer@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-25.1.0.tgz#73096ba90e07d19dec4a0c1dd89c355e2f129e5d"
+  integrity sha512-20Wkq5j7o84kssBwvyuJ7Xhn7hdPeTXndnwIblKDR2/sy1SUm6rWWiG9kSCgJPIfkDScJCIsTtOKdlzfIHOfKA==
+
+jest-snapshot@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-25.1.0.tgz#d5880bd4b31faea100454608e15f8d77b9d221d9"
+  integrity sha512-xZ73dFYN8b/+X2hKLXz4VpBZGIAn7muD/DAg+pXtDzDGw3iIV10jM7WiHqhCcpDZfGiKEj7/2HXAEPtHTj0P2A==
   dependencies:
     "@babel/types" "^7.0.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    expect "^24.9.0"
-    jest-diff "^24.9.0"
-    jest-get-type "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-resolve "^24.9.0"
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
+    expect "^25.1.0"
+    jest-diff "^25.1.0"
+    jest-get-type "^25.1.0"
+    jest-matcher-utils "^25.1.0"
+    jest-message-util "^25.1.0"
+    jest-resolve "^25.1.0"
     mkdirp "^0.5.1"
     natural-compare "^1.4.0"
-    pretty-format "^24.9.0"
-    semver "^6.2.0"
+    pretty-format "^25.1.0"
+    semver "^7.1.1"
 
 jest-util@^24.9.0:
   version "24.9.0"
@@ -7326,32 +7987,41 @@ jest-util@^24.9.0:
     slash "^2.0.0"
     source-map "^0.6.0"
 
-jest-validate@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
-  integrity sha512-HPIt6C5ACwiqSiwi+OfSSHbK8sG7akG8eATl+IPKaeIjtPOeBUd/g3J7DghugzxrGjI93qS/+RPKe1H6PqvhRQ==
+jest-util@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.1.0.tgz#7bc56f7b2abd534910e9fa252692f50624c897d9"
+  integrity sha512-7did6pLQ++87Qsj26Fs/TIwZMUFBXQ+4XXSodRNy3luch2DnRXsSnmpVtxxQ0Yd6WTipGpbhh2IFP1mq6/fQGw==
   dependencies:
-    "@jest/types" "^24.9.0"
+    "@jest/types" "^25.1.0"
+    chalk "^3.0.0"
+    is-ci "^2.0.0"
+    mkdirp "^0.5.1"
+
+jest-validate@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-25.1.0.tgz#1469fa19f627bb0a9a98e289f3e9ab6a668c732a"
+  integrity sha512-kGbZq1f02/zVO2+t1KQGSVoCTERc5XeObLwITqC6BTRH3Adv7NZdYqCpKIZLUgpLXf2yISzQ465qOZpul8abXA==
+  dependencies:
+    "@jest/types" "^25.1.0"
     camelcase "^5.3.1"
-    chalk "^2.0.1"
-    jest-get-type "^24.9.0"
+    chalk "^3.0.0"
+    jest-get-type "^25.1.0"
     leven "^3.1.0"
-    pretty-format "^24.9.0"
+    pretty-format "^25.1.0"
 
-jest-watcher@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b"
-  integrity sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw==
+jest-watcher@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-25.1.0.tgz#97cb4a937f676f64c9fad2d07b824c56808e9806"
+  integrity sha512-Q9eZ7pyaIr6xfU24OeTg4z1fUqBF/4MP6J801lyQfg7CsnZ/TCzAPvCfckKdL5dlBBEKBeHV0AdyjFZ5eWj4ig==
   dependencies:
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/yargs" "^13.0.0"
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.1"
-    jest-util "^24.9.0"
-    string-length "^2.0.0"
+    "@jest/test-result" "^25.1.0"
+    "@jest/types" "^25.1.0"
+    ansi-escapes "^4.2.1"
+    chalk "^3.0.0"
+    jest-util "^25.1.0"
+    string-length "^3.1.0"
 
-jest-worker@^24.6.0, jest-worker@^24.9.0:
+jest-worker@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
   integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
@@ -7359,13 +8029,22 @@ jest-worker@^24.6.0, jest-worker@^24.9.0:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
-jest@24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171"
-  integrity sha512-YvkBL1Zm7d2B1+h5fHEOdyjCG+sGMz4f8D86/0HiqJ6MB4MnDc8FgP5vdWsGnemOQro7lnYo8UakZ3+5A0jxGw==
+jest-worker@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-25.1.0.tgz#75d038bad6fdf58eba0d2ec1835856c497e3907a"
+  integrity sha512-ZHhHtlxOWSxCoNOKHGbiLzXnl42ga9CxDr27H36Qn+15pQZd3R/F24jrmjDelw9j/iHUIWMWs08/u2QN50HHOg==
+  dependencies:
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
+jest@25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-25.1.0.tgz#b85ef1ddba2fdb00d295deebbd13567106d35be9"
+  integrity sha512-FV6jEruneBhokkt9MQk0WUFoNTwnF76CLXtwNMfsc0um0TlB/LG2yxUd0KqaFjEJ9laQmVWQWS0sG/t2GsuI0w==
   dependencies:
-    import-local "^2.0.0"
-    jest-cli "^24.9.0"
+    "@jest/core" "^25.1.0"
+    import-local "^3.0.2"
+    jest-cli "^25.1.0"
 
 js-base64@^2.1.8:
   version "2.4.5"
@@ -7440,6 +8119,38 @@ jsdom@^11.5.1:
     ws "^4.0.0"
     xml-name-validator "^3.0.0"
 
+jsdom@^15.1.1:
+  version "15.2.1"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-15.2.1.tgz#d2feb1aef7183f86be521b8c6833ff5296d07ec5"
+  integrity sha512-fAl1W0/7T2G5vURSyxBzrJ1LSdQn6Tr5UX/xD4PXDx/PDgwygedfW6El/KIj3xJ7FU61TTYnc/l/B7P49Eqt6g==
+  dependencies:
+    abab "^2.0.0"
+    acorn "^7.1.0"
+    acorn-globals "^4.3.2"
+    array-equal "^1.0.0"
+    cssom "^0.4.1"
+    cssstyle "^2.0.0"
+    data-urls "^1.1.0"
+    domexception "^1.0.1"
+    escodegen "^1.11.1"
+    html-encoding-sniffer "^1.0.2"
+    nwsapi "^2.2.0"
+    parse5 "5.1.0"
+    pn "^1.1.0"
+    request "^2.88.0"
+    request-promise-native "^1.0.7"
+    saxes "^3.1.9"
+    symbol-tree "^3.2.2"
+    tough-cookie "^3.0.1"
+    w3c-hr-time "^1.0.1"
+    w3c-xmlserializer "^1.1.2"
+    webidl-conversions "^4.0.2"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^7.0.0"
+    ws "^7.0.0"
+    xml-name-validator "^3.0.0"
+
 jsesc@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.1.tgz#e421a2a8e20d6b0819df28908f782526b96dd1fe"
@@ -7908,6 +8619,13 @@ loglevel@^1.4.1:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
   integrity sha1-4PyVEztu8nbNyIh82vJKpvFW+Po=
 
+lolex@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-5.1.2.tgz#953694d098ce7c07bc5ed6d0e42bc6c0c6d5a367"
+  integrity sha512-h4hmjAvHTmd+25JSwrtTIuwbKdwg5NzZVRMLn9saij4SZaepCrTCxPr35H/3bjwfMJtN+t3CX8672UIkglz28A==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
@@ -8166,6 +8884,14 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
+  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.0.5"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -8225,6 +8951,11 @@ mimic-fn@^1.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
   integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
@@ -8269,11 +9000,6 @@ minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
-minimist@~0.0.1:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
-  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
-
 minipass@^2.2.1, minipass@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.3.tgz#a7dcc8b7b833f5d368759cce544dccb55f50f233"
@@ -8426,7 +9152,7 @@ negotiator@0.6.2:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
-neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
+neo-async@^2.5.0, neo-async@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
   integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
@@ -8525,16 +9251,16 @@ node-modules-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
   integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
 
-node-notifier@^5.4.2:
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
-  integrity sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==
+node-notifier@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-6.0.0.tgz#cea319e06baa16deec8ce5cd7f133c4a46b68e12"
+  integrity sha512-SVfQ/wMw+DesunOm5cKqr6yDcvUTDl/yc97ybGHMrteNEY6oekXpNpS3lZwgLlwz0FLgHoiW28ZpmBHUDg37cw==
   dependencies:
     growly "^1.3.0"
-    is-wsl "^1.1.0"
-    semver "^5.5.0"
+    is-wsl "^2.1.1"
+    semver "^6.3.0"
     shellwords "^0.1.1"
-    which "^1.3.0"
+    which "^1.3.1"
 
 node-pre-gyp@^0.10.0:
   version "0.10.0"
@@ -8701,6 +9427,13 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
+npm-run-path@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
 "npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
@@ -8740,6 +9473,11 @@ nwsapi@^2.0.0:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.0.0.tgz#7c8faf4ad501e1d17a651ebc5547f966b547c5c7"
   integrity sha512-9kj1oCEDNq+LHDAVPGDPg9+qRcBcpXb1IYC8q89jR8xJvOC2byQwEVsM3W1qQcSPVyzGGaXN7wZHnXORCiZl4w==
 
+nwsapi@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
+  integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
+
 oauth-sign@~0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
@@ -8779,6 +9517,11 @@ object-is@^1.0.1:
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
   integrity sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=
 
+object-is@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.2.tgz#6b80eb84fe451498f65007982f035a5b445edec4"
+  integrity sha512-Epah+btZd5wrrfjkJZq1AOB9O6OxUQto45hzFd7lXGrpHPGE0W1k+426yrZV+k6NJOzLNNW/nVsmZdIWsAqoOQ==
+
 object-keys@^1.0.11, object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
@@ -8836,6 +9579,16 @@ object.entries@^1.1.0:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+object.fromentries@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.2.tgz#4a09c9b9bb3843dd0f89acdb517a794d4f355ac9"
+  integrity sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
@@ -8879,6 +9632,16 @@ object.values@^1.1.0:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+object.values@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
+  integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -8900,6 +9663,13 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+onetime@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5"
+  integrity sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==
+  dependencies:
+    mimic-fn "^2.1.0"
+
 open@^6.1.0, open@^6.3.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
@@ -8907,14 +9677,6 @@ open@^6.1.0, open@^6.3.0:
   dependencies:
     is-wsl "^1.1.0"
 
-optimist@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
-  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
-  dependencies:
-    minimist "~0.0.1"
-    wordwrap "~0.0.2"
-
 optionator@^0.8.1, optionator@^0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
@@ -8971,12 +9733,10 @@ p-all@^2.1.0:
   dependencies:
     p-map "^2.0.0"
 
-p-each-series@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
-  integrity sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=
-  dependencies:
-    p-reduce "^1.0.0"
+p-each-series@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.1.0.tgz#961c8dd3f195ea96c747e636b262b800a6b1af48"
+  integrity sha512-ZuRs1miPT4HrjFa+9fRfOFXxGJfORgelKV9f9nNOWw2gl6gVsRaVDOQP0+MI0G0wGKns1Yacsu0GjOFbTK0JFQ==
 
 p-event@^4.1.0:
   version "4.1.0"
@@ -8990,6 +9750,11 @@ p-finally@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
   integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
+p-finally@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-2.0.1.tgz#bd6fcaa9c559a096b680806f4d657b3f0f240561"
+  integrity sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==
+
 p-limit@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c"
@@ -9030,11 +9795,6 @@ p-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
   integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
 
-p-reduce@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
-  integrity sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=
-
 p-timeout@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-2.0.1.tgz#d8dd1979595d2dc0139e1fe46b8b646cb3cdf038"
@@ -9153,6 +9913,11 @@ parse5@4.0.0:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
   integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
 
+parse5@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
+  integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
+
 parse5@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
@@ -9217,6 +9982,11 @@ path-key@^2.0.0, path-key@^2.0.1:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
 path-parse@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
@@ -9283,6 +10053,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picomatch@^2.0.4, picomatch@^2.0.5:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
+  integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -9331,7 +10106,7 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-pkg-dir@^4.1.0:
+pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
   integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
@@ -9526,15 +10301,15 @@ pretty-format@^22.0.3:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
-pretty-format@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
-  integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
+pretty-format@^25.1.0:
+  version "25.1.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.1.0.tgz#ed869bdaec1356fc5ae45de045e2c8ec7b07b0c8"
+  integrity sha512-46zLRSGLd02Rp+Lhad9zzuNZ+swunitn8zIpfD2B4OPCRLXbM87RJT2aBLBWYOznNUML/2l/ReMyWNC80PJBUQ==
   dependencies:
-    "@jest/types" "^24.9.0"
-    ansi-regex "^4.0.0"
-    ansi-styles "^3.2.0"
-    react-is "^16.8.4"
+    "@jest/types" "^25.1.0"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
 
 pretty-hrtime@^1.0.3:
   version "1.0.3"
@@ -9611,6 +10386,15 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
+prop-types-exact@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prop-types-exact/-/prop-types-exact-1.2.0.tgz#825d6be46094663848237e3925a98c6e944e9869"
+  integrity sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==
+  dependencies:
+    has "^1.0.3"
+    object.assign "^4.1.0"
+    reflect.ownkeys "^0.2.0"
+
 prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
@@ -9674,6 +10458,11 @@ psl@^1.1.24:
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.31.tgz#e9aa86d0101b5b105cbe93ac6b784cd547276184"
   integrity sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw==
 
+psl@^1.1.28:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.7.0.tgz#f1c4c47a8ef97167dea5d6bbf4816d736e884a3c"
+  integrity sha512-5NsSEDv8zY70ScRnOTn7bK7eanl2MvFrOrS/R6x+dBt5g1ghnj9Zv90kO8GwT8gxcu2ANyFprnFYB85IogIJOQ==
+
 public-encrypt@^4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.2.tgz#46eb9107206bf73489f8b85b69d91334c6610994"
@@ -9720,7 +10509,7 @@ punycode@^1.2.4, punycode@^1.4.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
-punycode@^2.1.0:
+punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
@@ -9926,17 +10715,7 @@ react-docgen@^4.1.1:
     node-dir "^0.1.10"
     recast "^0.17.3"
 
-react-dom@16.8.6:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
-  integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.13.6"
-
-react-dom@^16.8.3:
+react-dom@16.12.0, react-dom@^16.8.3:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
   integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==
@@ -10009,25 +10788,15 @@ react-inspector@^3.0.2:
     is-dom "^1.0.9"
     prop-types "^15.6.1"
 
-react-is@^16.4.0:
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.0.tgz#cc9fdc855ac34d2e7d9d2eb7059bbc240d35ffcf"
-  integrity sha512-8ADZg/mBw+t2Fbr5Hm1K64v8q8Q6E+DprV5wQ5A8PSLW6XP0XJFMdUskVEW8efQ5oUgWHn8EYdHEPAMF0Co6hA==
-
-react-is@^16.5.2:
-  version "16.6.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.1.tgz#f77b1c3d901be300abe8d58645b7a59e794e5982"
-  integrity sha512-wOKsGtvTMYs7WAscmwwdM8sfRRvE17Ym30zFj3n37Qx5tHRfhenPKEPILHaHob6WoLFADmQm1ZNrE5xMCM6sCw==
-
-react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.9.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
-react-is@^16.8.6:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
-  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
+react-is@^16.4.0:
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.0.tgz#cc9fdc855ac34d2e7d9d2eb7059bbc240d35ffcf"
+  integrity sha512-8ADZg/mBw+t2Fbr5Hm1K64v8q8Q6E+DprV5wQ5A8PSLW6XP0XJFMdUskVEW8efQ5oUgWHn8EYdHEPAMF0Co6hA==
 
 react-json-view@^1.13.3:
   version "1.16.6"
@@ -10102,16 +10871,6 @@ react-syntax-highlighter@^8.0.1:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
-react-test-renderer@16.8.6:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1"
-  integrity sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    react-is "^16.8.6"
-    scheduler "^0.13.6"
-
 react-test-renderer@^16.0.0-0:
   version "16.4.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.0.tgz#0dbe0e24263e94e1830c7afb1f403707fad313a3"
@@ -10137,17 +10896,7 @@ react-textarea-autosize@^7.1.0:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.0"
 
-react@16.8.6:
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
-  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.13.6"
-
-react@^16.6.0, react@^16.8.3:
+react@16.12.0, react@^16.6.0, react@^16.8.3:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
   integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
@@ -10298,6 +11047,11 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+reflect.ownkeys@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
+  integrity sha1-dJrO7H8/34tj+SegSAnpDFwLNGA=
+
 refractor@^2.4.1:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.0.tgz#4cc7efc0028a87924a9b31d82d129dec831a287b"
@@ -10452,6 +11206,13 @@ request-promise-core@1.1.1:
   dependencies:
     lodash "^4.13.1"
 
+request-promise-core@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.3.tgz#e9a3c081b51380dfea677336061fea879a829ee9"
+  integrity sha512-QIs2+ArIGQVp5ZYbWD5ZLCY29D5CfWizP8eWnm8FoGD1TX61veauETVQbrV60662V0oFBkrDOuaBI8XgtuyYAQ==
+  dependencies:
+    lodash "^4.17.15"
+
 request-promise-native@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.5.tgz#5281770f68e0c9719e5163fd3fab482215f4fda5"
@@ -10461,6 +11222,15 @@ request-promise-native@^1.0.5:
     stealthy-require "^1.1.0"
     tough-cookie ">=2.3.3"
 
+request-promise-native@^1.0.7:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.8.tgz#a455b960b826e44e2bf8999af64dff2bfe58cb36"
+  integrity sha512-dapwLGqkHtwL5AEbfenuzjTYg35Jd6KPytsC2/TLkVMz8rm+tNt72MGUWT1RP/aYawMpN6HqbNGBQaRcBtjQMQ==
+  dependencies:
+    request-promise-core "1.1.3"
+    stealthy-require "^1.1.1"
+    tough-cookie "^2.3.3"
+
 request@^2.83.0:
   version "2.87.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
@@ -10556,12 +11326,12 @@ resize-observer-polyfill@^1.5.1:
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 
-resolve-cwd@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
-  integrity sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
   dependencies:
-    resolve-from "^3.0.0"
+    resolve-from "^5.0.0"
 
 resolve-from@^1.0.0:
   version "1.0.1"
@@ -10634,6 +11404,13 @@ rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
+rimraf@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.1.tgz#48d3d4cb46c80d388ab26cd61b1b466ae9ae225a"
+  integrity sha512-IQ4ikL8SjBiEDZfk+DFVwqRK8md24RWMEJkdSlgNLkyyAImcjf8SWvU1qFMDOb4igBClbTQ/ugPqXcRwdFTxZw==
+  dependencies:
+    glob "^7.1.3"
+
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
@@ -10756,13 +11533,12 @@ sax@^1.2.4, sax@~1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.13.6:
-  version "0.13.6"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889"
-  integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==
+saxes@^3.1.9:
+  version "3.1.11"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"
+  integrity sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==
   dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
+    xmlchars "^2.1.1"
 
 scheduler@^0.18.0:
   version "0.18.0"
@@ -10826,16 +11602,21 @@ semver@5.4.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
   integrity sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg==
 
-semver@^5.5.1, semver@^5.6.0:
+semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
+semver@^6.0.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.1.1:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.2.tgz#847bae5bce68c5d08889824f02667199b70e3d87"
+  integrity sha512-BJs9T/H8sEVHbeigqzIEo57Iu/3DG6c4QoqTfbQB3BPA4zgzAomh/Fk9E7QtjWQ8mx2dgA9YCfSF4y9k9bHNpQ==
+
 semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@@ -10968,11 +11749,23 @@ shebang-command@^1.2.0:
   dependencies:
     shebang-regex "^1.0.0"
 
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
 shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
 shell-quote@1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
@@ -11032,6 +11825,11 @@ slash@^2.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
   integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
 
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
 slice-ansi@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
@@ -11142,6 +11940,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.7.3:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+
 space-separated-tokens@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.4.tgz#27910835ae00d0adfcdbd0ad7e611fb9544351fa"
@@ -11244,7 +12047,7 @@ stdout-stream@^1.4.0:
   dependencies:
     readable-stream "^2.0.1"
 
-stealthy-require@^1.1.0:
+stealthy-require@^1.1.0, stealthy-require@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
   integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
@@ -11298,13 +12101,13 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
-string-length@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
-  integrity sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=
+string-length@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-3.1.0.tgz#107ef8c23456e187a8abd4a61162ff4ac6e25837"
+  integrity sha512-Ttp5YvkGm5v9Ijagtaz1BnN+k9ObpvS0eIBblPMp2YWL8FBmi9qblQ9fexc2k/CXFgrTIteU3jAw3payCnwSTA==
   dependencies:
     astral-regex "^1.0.0"
-    strip-ansi "^4.0.0"
+    strip-ansi "^5.2.0"
 
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
@@ -11323,7 +12126,7 @@ string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^3.0.0, string-width@^3.1.0:
+string-width@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
   integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
@@ -11332,6 +12135,15 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
+string-width@^4.1.0, string-width@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
+  integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"
+
 "string.prototype.matchall@^4.0.0 || ^3.0.1":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.0.tgz#47191e37b67dca43131706bc9c4550df31b2c471"
@@ -11378,6 +12190,14 @@ string.prototype.trimleft@^2.1.0:
     define-properties "^1.1.3"
     function-bind "^1.1.1"
 
+string.prototype.trimleft@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"
+  integrity sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==
+  dependencies:
+    define-properties "^1.1.3"
+    function-bind "^1.1.1"
+
 string.prototype.trimright@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.0.tgz#669d164be9df9b6f7559fa8e89945b168a5a6c58"
@@ -11386,6 +12206,14 @@ string.prototype.trimright@^2.1.0:
     define-properties "^1.1.3"
     function-bind "^1.1.1"
 
+string.prototype.trimright@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz#440314b15996c866ce8a0341894d45186200c5d9"
+  integrity sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==
+  dependencies:
+    define-properties "^1.1.3"
+    function-bind "^1.1.1"
+
 string_decoder@^1.0.0, string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -11398,7 +12226,7 @@ string_decoder@~0.10.x:
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
   integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
 
-strip-ansi@5.2.0, strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+strip-ansi@5.2.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
   integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
@@ -11419,6 +12247,13 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+  dependencies:
+    ansi-regex "^5.0.0"
+
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@@ -11431,11 +12266,21 @@ strip-bom@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
 
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
   integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
 
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
 strip-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
@@ -11483,6 +12328,21 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^7.0.0, supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-hyperlinks@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.0.0.tgz#b1b94a159e9df00b0a554b2d5f0e0a89690334b0"
+  integrity sha512-bFhn0MQ8qefLyJ3K7PpHiPUTuTVPWw6RXfaMeV6xgJLXtBbszyboz1bvGTVv4R0YpQm2DqlXXn0fFHhxUHVE5w==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
 svg-parser@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.2.tgz#d134cc396fa2681dc64f518330784e98bd801ec8"
@@ -11579,6 +12439,14 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
+
 terser-webpack-plugin@^1.2.4, terser-webpack-plugin@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
@@ -11613,15 +12481,24 @@ test-exclude@^5.2.3:
     read-pkg-up "^4.0.0"
     require-main-filename "^2.0.0"
 
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
 text-table@0.2.0, text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-throat@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
-  integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
+throat@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
+  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
 
 throttle-debounce@^2.1.0:
   version "2.1.0"
@@ -11695,6 +12572,13 @@ to-regex-range@^2.1.0:
     is-number "^3.0.0"
     repeat-string "^1.6.1"
 
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 to-regex@^3.0.1, to-regex@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
@@ -11729,6 +12613,15 @@ tough-cookie@>=2.3.3, tough-cookie@^2.3.3, tough-cookie@~2.3.3:
   dependencies:
     punycode "^1.4.1"
 
+tough-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
+  integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==
+  dependencies:
+    ip-regex "^2.1.0"
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
 tough-cookie@~2.4.3:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
@@ -11790,11 +12683,21 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
+type-detect@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
 type-fest@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
   integrity sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==
 
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
 type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -11808,6 +12711,13 @@ typed-styles@^0.0.7:
   resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
   integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
 
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -11831,14 +12741,6 @@ ua-parser-js@^0.7.9:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
   integrity sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA==
 
-uglify-js@^3.1.4:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.0.tgz#704681345c53a8b2079fb6cec294b05ead242ff5"
-  integrity sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==
-  dependencies:
-    commander "~2.20.0"
-    source-map "~0.6.1"
-
 undefsafe@0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-0.0.3.tgz#ecca3a03e56b9af17385baac812ac83b994a962f"
@@ -12091,6 +12993,15 @@ uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
   integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
+v8-to-istanbul@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-4.0.1.tgz#d6a2a3823b8ff49bdf2167ff2a45d82dff81d02f"
+  integrity sha512-x0yZvZAkjJwdD3fPiJzYP37aod0ati4LlmD2RmpKjqewjKAov/u/ytZ8ViIZb07cN4cePKzl9ijiUi7C1LQ8hQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
 validate-npm-package-license@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz#81643bcbef1bdfecd4623793dc4648948ba98338"
@@ -12125,6 +13036,15 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
+w3c-xmlserializer@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794"
+  integrity sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg==
+  dependencies:
+    domexception "^1.0.1"
+    webidl-conversions "^4.0.2"
+    xml-name-validator "^3.0.0"
+
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
@@ -12255,6 +13175,13 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.19"
 
+whatwg-encoding@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
+  integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
+  dependencies:
+    iconv-lite "0.4.24"
+
 whatwg-fetch@>=0.10.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
@@ -12265,6 +13192,11 @@ whatwg-mimetype@^2.0.0, whatwg-mimetype@^2.1.0:
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz#f0f21d76cbba72362eb609dbed2a30cd17fcc7d4"
   integrity sha512-FKxhYLytBQiUKjkYteN71fAUA3g6KpNXoho1isLiLSB3N1G4F35Q5vUxWfKFhBwi5IWF27VE6WxhrnnC+m0Mew==
 
+whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
+  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
+
 whatwg-url@^6.4.0, whatwg-url@^6.4.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.4.1.tgz#fdb94b440fd4ad836202c16e9737d511f012fd67"
@@ -12274,6 +13206,15 @@ whatwg-url@^6.4.0, whatwg-url@^6.4.1:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
+whatwg-url@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
+  integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
 which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
@@ -12284,7 +13225,7 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which@1, which@^1.2.9, which@^1.3.0:
+which@1, which@^1.2.9:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
   integrity sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==
@@ -12298,6 +13239,13 @@ which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
 wide-align@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.2.tgz#571e0f1b0604636ebc0dfc21b0339bbe31341710"
@@ -12312,11 +13260,6 @@ widest-line@^2.0.0:
   dependencies:
     string-width "^2.1.1"
 
-wordwrap@~0.0.2:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
-  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
-
 wordwrap@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
@@ -12344,14 +13287,14 @@ wrap-ansi@^2.0.0:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
 
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
-  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
   dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
 
 wrappy@1:
   version "1.0.2"
@@ -12376,6 +13319,16 @@ write-file-atomic@^2.0.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
+write-file-atomic@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.1.tgz#558328352e673b5bb192cf86500d60b230667d4b"
+  integrity sha512-JPStrIyyVJ6oCSz/691fAjFtefZ6q+fP6tm+OS4Qw6o+TGQxNp1ziY2PgS+X/m0V8OWhZiO/m4xSj+Pr4RrZvw==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
 write@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
@@ -12391,6 +13344,11 @@ ws@^4.0.0:
     async-limiter "~1.0.0"
     safe-buffer "~5.1.0"
 
+ws@^7.0.0:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.2.1.tgz#03ed52423cd744084b2cf42ed197c8b65a936b8e"
+  integrity sha512-sucePNSafamSKoOqoNfBd8V0StlkzJKL2ZAhGQinCfNQ+oacw+Pk7lcdAElecBF2VkLNZRiIb5Oi1Q5lVUVt2A==
+
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
@@ -12401,6 +13359,11 @@ xml-name-validator@^3.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
+xmlchars@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
 xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
@@ -12438,10 +13401,10 @@ yaml@^1.7.2:
   dependencies:
     "@babel/runtime" "^7.6.3"
 
-yargs-parser@^13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
-  integrity sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==
+yargs-parser@^16.1.0:
+  version "16.1.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-16.1.0.tgz#73747d53ae187e7b8dbe333f95714c76ea00ecf1"
+  integrity sha512-H/V41UNZQPkUMIT5h5hiwg4QKIY1RPvoBV4XcjUbRM8Bk2oKqqyZ0DIEbTFZB0XjbtSPG8SAa/0DxCQmiRgzKg==
   dependencies:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
@@ -12453,21 +13416,22 @@ yargs-parser@^5.0.0:
   dependencies:
     camelcase "^3.0.0"
 
-yargs@^13.3.0:
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
-  integrity sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==
+yargs@^15.0.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.1.0.tgz#e111381f5830e863a89550bd4b136bb6a5f37219"
+  integrity sha512-T39FNN1b6hCW4SOIk1XyTOWxtXdcen0t+XYrysQmChzSipvhBO8Bj0nK1ozAasdk24dNWuMZvr4k24nz+8HHLg==
   dependencies:
-    cliui "^5.0.0"
-    find-up "^3.0.0"
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
     get-caller-file "^2.0.1"
     require-directory "^2.1.1"
     require-main-filename "^2.0.0"
     set-blocking "^2.0.0"
-    string-width "^3.0.0"
+    string-width "^4.2.0"
     which-module "^2.0.0"
     y18n "^4.0.0"
-    yargs-parser "^13.1.1"
+    yargs-parser "^16.1.0"
 
 yargs@^7.0.0:
   version "7.1.0"

From 43988c3eb584acee0b66d441bb344e7a64d90896 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Thu, 6 Feb 2020 16:37:44 -0500
Subject: [PATCH 028/244] [DDW-829] Updates CHANGELOG to include snapshot test
 refactoring

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 675742b7..450b3363 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ vNext
 
 ### Features
 
-- Adds new `ScrollBar` component and integrates it into existing react-polymorph components [PR 129](https://github.com/input-output-hk/react-polymorph/pull/129)
+- Adds new `ScrollBar` component and integrates it into existing react-polymorph components. Refactors all snapshot tests to use enzyme for full DOM node rendering. [PR 129](https://github.com/input-output-hk/react-polymorph/pull/129)
 
 0.9.1
 =====

From 08e9fbdbfb8b1de72c7cd227c87655bbb0286e61 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Thu, 6 Feb 2020 16:45:41 -0500
Subject: [PATCH 029/244] Prepares CHANGELOG for 0.9.2 release

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 450b3363..8aefc1f2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
+0.9.2
+=====
+
 ### Features
 
 - Adds new `ScrollBar` component and integrates it into existing react-polymorph components. Refactors all snapshot tests to use enzyme for full DOM node rendering. [PR 129](https://github.com/input-output-hk/react-polymorph/pull/129)

From 8df523ad279059f593966c8292e7d194628ef40a Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Thu, 6 Feb 2020 16:48:47 -0500
Subject: [PATCH 030/244] 0.9.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 42a13432..bfaadb31 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 10d3a131c473fb75f470f22f785f08d3bd827995 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Fri, 7 Feb 2020 16:55:01 -0500
Subject: [PATCH 031/244] 0.9.2-rc.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bfaadb31..2ec6d9d5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.2",
+  "version": "0.9.2-rc.1",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 823272ba1b1bc6ad6e6096b1b3e2758ec47d86ce Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Fri, 7 Feb 2020 17:19:45 -0500
Subject: [PATCH 032/244] Fixes prepare-sass-files-for-publishing.js

---
 scripts/prepare-sass-files-for-publishing.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/scripts/prepare-sass-files-for-publishing.js b/scripts/prepare-sass-files-for-publishing.js
index eee7002d..5368ef35 100644
--- a/scripts/prepare-sass-files-for-publishing.js
+++ b/scripts/prepare-sass-files-for-publishing.js
@@ -1,15 +1,21 @@
 const cpy = require('cpy');
 
-const copy = (rename) => cpy('**/*.scss', '../../lib/themes', {
+const copyAllThemeFiles = (rename) => cpy(['**/*.scss', '**/*.svg'], '../../lib/themes', {
   cwd: 'source/themes',
   rename,
   parents: true,
 });
 
-// Copy sass files "normally" to lib folder:
-copy();
-// Copy them again as module.scss files:
-copy((basename) => {
+const copyScssFilesAsModules = (rename) => cpy('**/*.scss', '../../lib/themes', {
+  cwd: 'source/themes',
+  rename,
+  parents: true,
+});
+
+// Copy sass and svg files "normally" to lib folder:
+copyAllThemeFiles();
+// Copy only sass files again as module.scss files:
+copyScssFilesAsModules((basename) => {
   const fileName = basename.substring(0, basename.indexOf('.scss'));
   return `${fileName}.module.scss`;
 });

From 7b615222bfdf4044847c11cf75b94b7a44d22cd3 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Fri, 7 Feb 2020 17:20:17 -0500
Subject: [PATCH 033/244] 0.9.2-rc.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2ec6d9d5..cc9dd80c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.2-rc.1",
+  "version": "0.9.2-rc.2",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From eac2fd5fc7354bdb13aeb30d7cea011a555c9be6 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 10 Feb 2020 16:26:14 +0100
Subject: [PATCH 034/244] [DDW-733] Implement password input component

---
 __tests__/Tooltip.test.js                     | 131 +++++++++
 __tests__/__snapshots__/Tooltip.test.js.snap  | 250 ++++++++++++++++++
 package.json                                  |   4 +-
 source/components/Bubble.js                   |  12 +-
 source/components/PasswordInput.js            |  98 +++++++
 source/components/Tooltip.js                  |  18 +-
 source/components/index.js                    |   1 +
 source/skins/simple/BubbleSkin.js             |  30 ++-
 source/skins/simple/PasswordInputSkin.js      |  44 +++
 source/skins/simple/TooltipSkin.js            |  20 +-
 source/skins/simple/index.js                  |   2 +
 source/themes/API/index.js                    |   2 +
 source/themes/API/password-input.js           |   9 +
 source/themes/API/tooltip.js                  |   2 +
 source/themes/simple/SimpleBubble.scss        |  17 ++
 source/themes/simple/SimplePasswordInput.scss |  67 +++++
 source/themes/simple/SimpleTooltip.scss       |  20 +-
 source/themes/simple/index.js                 |   2 +
 stories/Bubble.stories.js                     |   9 +
 stories/PasswordInput.stories.js              |  80 ++++++
 stories/PasswordInput.stories.scss            |   3 +
 stories/Tooltip.stories.js                    |  37 +++
 stories/Tooltip.stories.scss                  |   9 +-
 stories/index.js                              |   1 +
 24 files changed, 826 insertions(+), 42 deletions(-)
 create mode 100644 __tests__/Tooltip.test.js
 create mode 100644 __tests__/__snapshots__/Tooltip.test.js.snap
 create mode 100644 source/components/PasswordInput.js
 create mode 100644 source/skins/simple/PasswordInputSkin.js
 create mode 100644 source/themes/API/password-input.js
 create mode 100644 source/themes/simple/SimplePasswordInput.scss
 create mode 100644 stories/PasswordInput.stories.js
 create mode 100644 stories/PasswordInput.stories.scss

diff --git a/__tests__/Tooltip.test.js b/__tests__/Tooltip.test.js
new file mode 100644
index 00000000..80fe3f07
--- /dev/null
+++ b/__tests__/Tooltip.test.js
@@ -0,0 +1,131 @@
+import React from 'react';
+
+import { renderInSimpleTheme } from './helpers/theming';
+import { Tooltip } from '../source/components/Tooltip';
+import styles from '../stories/Tooltip.stories.scss';
+
+test('tooltip plain', () => {
+  expect(renderInSimpleTheme(
+    <Tooltip
+      isVisible
+      tip="plain tooltip, nothing special about me">
+      hover over me
+    </Tooltip>
+  )).toMatchSnapshot();
+});
+
+test('tooltip with html', () => {
+  expect(renderInSimpleTheme(
+    <Tooltip
+      isVisible
+      tip={
+        <div>
+          I can use <span className={styles.htmlTip}>HTML</span>
+        </div>
+      }>
+      hover over me
+    </Tooltip>
+  )).toMatchSnapshot();
+});
+
+test('tooltip isAligningRight', () => {
+  expect(renderInSimpleTheme(
+    <Tooltip isAligningRight tip="I am aligning right">
+      hover over me
+    </Tooltip>
+  )).toMatchSnapshot();
+});
+
+test('tooltip isBounded', () => {
+  expect(renderInSimpleTheme(
+    <Tooltip
+      isBounded
+      tip="Help, I am stuck in this small box"
+    >
+      hover over me
+    </Tooltip>
+  )).toMatchSnapshot();
+});
+
+test('tooltip with custom class', () => {
+  expect(renderInSimpleTheme(
+    <Tooltip
+      className={styles.customTooltip}
+      tip="How did I get all the way over here?"
+    >
+      hover over me
+    </Tooltip>
+  )).toMatchSnapshot();
+});
+
+test('tooltip isOpeningUpward={false}', () => {
+  expect(renderInSimpleTheme(
+    <Tooltip
+      isOpeningUpward={false}
+      tip="I come from a land down under"
+    >
+      hover over me
+    </Tooltip>
+  )).toMatchSnapshot();
+});
+
+test('tooltip arrowRelativeToTip', () => {
+  expect(renderInSimpleTheme(
+    <Tooltip
+      arrowRelativeToTip
+      tip="small tip"
+    >
+      {'this is a really long string for demonstration purposes'}
+    </Tooltip>
+  )).toMatchSnapshot();
+});
+
+test('tooltip arrowRelativeToTip (below)', () => {
+  expect(renderInSimpleTheme(
+    <Tooltip
+      arrowRelativeToTip
+      isOpeningUpward={false}
+      tip="small tip from below"
+    >
+      {'this is a really long string for demonstration purposes'}
+    </Tooltip>
+  )).toMatchSnapshot();
+});
+
+test('tooltip isCentered', () => {
+  expect(renderInSimpleTheme(
+    <Tooltip
+      arrowRelativeToTip
+      isCentered
+      tip="centered above"
+    >
+      {'this is a really long string for demonstration purposes'}
+    </Tooltip>
+  )).toMatchSnapshot();
+});
+
+test('tooltip isCentered (below)', () => {
+  expect(renderInSimpleTheme(
+    <Tooltip
+      arrowRelativeToTip
+      isCentered
+      isOpeningUpward={false}
+      tip="centered below"
+    >
+      {'this is a really long string for demonstration purposes'}
+    </Tooltip>
+  )).toMatchSnapshot();
+});
+
+test('tooltip isCentered (below)', () => {
+  expect(renderInSimpleTheme(
+    <Tooltip
+      arrowRelativeToTip
+      isCentered
+      isOpeningUpward={false}
+      tip="centered below"
+    >
+      {'this is a really long string for demonstration purposes'}
+    </Tooltip>
+  )).toMatchSnapshot();
+});
diff --git a/__tests__/__snapshots__/Tooltip.test.js.snap b/__tests__/__snapshots__/Tooltip.test.js.snap
new file mode 100644
index 00000000..8c573d47
--- /dev/null
+++ b/__tests__/__snapshots__/Tooltip.test.js.snap
@@ -0,0 +1,250 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tooltip arrowRelativeToTip (below) 1`] = `
+<span
+  class="root"
+>
+  <div
+    class="bubble alignLeft nowrap root transparent"
+  >
+    <div
+      class="bubble hasAutoWidth"
+      data-bubble-container="true"
+    >
+      small tip from below
+      <span
+        class="arrow"
+        data-bubble-arrow="true"
+      />
+    </div>
+  </div>
+  this is a really long string for demonstration purposes
+</span>
+`;
+
+exports[`tooltip arrowRelativeToTip 1`] = `
+<span
+  class="root"
+>
+  <div
+    class="bubble alignLeft nowrap root openUpward transparent"
+  >
+    <div
+      class="bubble hasAutoWidth"
+      data-bubble-container="true"
+    >
+      small tip
+      <span
+        class="arrow"
+        data-bubble-arrow="true"
+      />
+    </div>
+  </div>
+  this is a really long string for demonstration purposes
+</span>
+`;
+
+exports[`tooltip isAligningRight 1`] = `
+<span
+  class="root"
+>
+  <div
+    class="bubble alignRight nowrap root openUpward transparent"
+  >
+    <div
+      class="bubble"
+      data-bubble-container="true"
+    >
+      I am aligning right
+    </div>
+    <span
+      class="arrow"
+      data-bubble-arrow="true"
+    />
+  </div>
+  hover over me
+</span>
+`;
+
+exports[`tooltip isBounded 1`] = `
+<span
+  class="root"
+>
+  <div
+    class="bubble alignLeft root openUpward transparent"
+  >
+    <div
+      class="bubble"
+      data-bubble-container="true"
+    >
+      Help, I am stuck in this small box
+    </div>
+    <span
+      class="arrow"
+      data-bubble-arrow="true"
+    />
+  </div>
+  hover over me
+</span>
+`;
+
+exports[`tooltip isCentered (below) 1`] = `
+<span
+  class="root isCentered"
+>
+  <div
+    class="bubble alignLeft nowrap root isCentered transparent"
+  >
+    <div
+      class="bubble hasAutoWidth"
+      data-bubble-container="true"
+    >
+      centered below
+      <span
+        class="arrow"
+        data-bubble-arrow="true"
+      />
+    </div>
+  </div>
+  this is a really long string for demonstration purposes
+</span>
+`;
+
+exports[`tooltip isCentered (below) 2`] = `
+<span
+  class="root isCentered"
+>
+  <div
+    class="bubble alignLeft nowrap root isCentered transparent"
+  >
+    <div
+      class="bubble hasAutoWidth"
+      data-bubble-container="true"
+    >
+      centered below
+      <span
+        class="arrow"
+        data-bubble-arrow="true"
+      />
+    </div>
+  </div>
+  this is a really long string for demonstration purposes
+</span>
+`;
+
+exports[`tooltip isCentered 1`] = `
+<span
+  class="root isCentered"
+>
+  <div
+    class="bubble alignLeft nowrap root openUpward isCentered transparent"
+  >
+    <div
+      class="bubble hasAutoWidth"
+      data-bubble-container="true"
+    >
+      centered above
+      <span
+        class="arrow"
+        data-bubble-arrow="true"
+      />
+    </div>
+  </div>
+  this is a really long string for demonstration purposes
+</span>
+`;
+
+exports[`tooltip isOpeningUpward={false} 1`] = `
+<span
+  class="root"
+>
+  <div
+    class="bubble alignLeft nowrap root transparent"
+  >
+    <div
+      class="bubble"
+      data-bubble-container="true"
+    >
+      I come from a land down under
+    </div>
+    <span
+      class="arrow"
+      data-bubble-arrow="true"
+    />
+  </div>
+  hover over me
+</span>
+`;
+
+exports[`tooltip plain 1`] = `
+<span
+  class="root isVisible"
+>
+  <div
+    class="bubble alignLeft nowrap root openUpward transparent"
+  >
+    <div
+      class="bubble"
+      data-bubble-container="true"
+    >
+      plain tooltip, nothing special about me
+    </div>
+    <span
+      class="arrow"
+      data-bubble-arrow="true"
+    />
+  </div>
+  hover over me
+</span>
+`;
+
+exports[`tooltip with custom class 1`] = `
+<span
+  class="customTooltip root"
+>
+  <div
+    class="bubble alignLeft nowrap root openUpward transparent"
+  >
+    <div
+      class="bubble"
+      data-bubble-container="true"
+    >
+      How did I get all the way over here?
+    </div>
+    <span
+      class="arrow"
+      data-bubble-arrow="true"
+    />
+  </div>
+  hover over me
+</span>
+`;
+
+exports[`tooltip with html 1`] = `
+<span
+  class="root isVisible"
+>
+  <div
+    class="bubble alignLeft nowrap root openUpward transparent"
+  >
+    <div
+      class="bubble"
+      data-bubble-container="true"
+    >
+      <div>
+        I can use 
+        <span
+          class="htmlTip"
+        >
+          HTML
+        </span>
+      </div>
+    </div>
+    <span
+      class="arrow"
+      data-bubble-arrow="true"
+    />
+  </div>
+  hover over me
+</span>
+`;
diff --git a/package.json b/package.json
index cc9dd80c..39b17ee9 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,8 @@
     "storybook": "start-storybook -p 6543 -c storybook --ci",
     "storybook:build": "build-storybook -c storybook -o dist/storybook",
     "test": "cross-env NODE_ENV=test jest",
-    "test:clean": "cross-env NODE_ENV=test jest -u",
-    "test:watch": "cross-env NODE_ENV=test jest --watchAll"
+    "test:update": "yarn test -u",
+    "test:watch": "yarn test --watchAll"
   },
   "dependencies": {
     "create-react-context": "0.2.2",
diff --git a/source/components/Bubble.js b/source/components/Bubble.js
index 230fc8bb..dc692d7a 100644
--- a/source/components/Bubble.js
+++ b/source/components/Bubble.js
@@ -12,9 +12,16 @@ import { addDocumentListeners, removeDocumentListeners } from '../utils/events';
 import { IDENTIFIERS } from '.';
 import type { ThemeContextProp } from './HOC/withTheme';
 
-type Props = {
+export type BubblePosition = {
+  width: number,
+  positionX: number,
+  positionY: number,
+};
+
+export type BubbleProps = {
   className?: string,
   context: ThemeContextProp,
+  isCentered: boolean,
   isHidden: boolean,
   isFloating: boolean,
   isOpeningUpward: boolean,
@@ -30,7 +37,7 @@ type Props = {
 
 type State = {
   composedTheme: Object,
-  position: ?Object
+  position: ?BubblePosition
 };
 
 class BubbleBase extends Component<Props, State> {
@@ -41,6 +48,7 @@ class BubbleBase extends Component<Props, State> {
   static displayName = 'Bubble';
   static defaultProps = {
     context: createEmptyContext(),
+    isCentered: false,
     isHidden: false,
     isFloating: false,
     isOpeningUpward: false,
diff --git a/source/components/PasswordInput.js b/source/components/PasswordInput.js
new file mode 100644
index 00000000..de02b727
--- /dev/null
+++ b/source/components/PasswordInput.js
@@ -0,0 +1,98 @@
+// @flow
+import React, { Component } from 'react';
+// $FlowFixMe
+import type { ComponentType, SyntheticInputEvent, Element } from 'react';
+
+// internal utility functions
+import { createEmptyContext, withTheme } from './HOC/withTheme';
+import { composeTheme, addThemeId } from '../utils/themes';
+
+// import constants
+import { IDENTIFIERS } from '.';
+import type { ThemeContextProp } from './HOC/withTheme';
+
+export type PasswordInputProps = {
+  autoFocus?: boolean,
+  className?: string,
+  context: ThemeContextProp,
+  disabled?: boolean,
+  error?: string,
+  label?: string | Element<any>,
+  isTooltipOpen: boolean,
+  onBlur?: Function,
+  onChange?: Function,
+  onFocus?: Function,
+  placeholder?: string,
+  readOnly?: boolean,
+  skin?: ComponentType<any>,
+  theme: ?Object,
+  themeId: string,
+  themeOverrides: Object,
+  value: ?string,
+  tooltip?: string,
+  score?: number,
+  state?: $Values<typeof PasswordInputBase.STATE>,
+};
+
+type State = {
+  composedTheme: Object,
+};
+
+class PasswordInputBase extends Component<PasswordInputProps, State> {
+
+  static displayName = 'PasswordInput';
+  static STATE = {
+    DEFAULT: 'default',
+    ERROR: 'error',
+    WARNING: 'warning',
+    SUCCESS: 'success',
+  };
+
+  static defaultProps = {
+    context: createEmptyContext(),
+    isTooltipOpen: false,
+    readOnly: false,
+    theme: null,
+    themeId: IDENTIFIERS.PASSWORD_INPUT,
+    themeOverrides: {},
+    value: null,
+    score: 0,
+    state: PasswordInputBase.STATE.DEFAULT,
+  };
+
+  constructor(props: PasswordInputProps) {
+    super(props);
+    const { context, themeId, theme, themeOverrides } = props;
+    this.state = {
+      composedTheme: composeTheme(
+        addThemeId(theme || context.theme, themeId),
+        addThemeId(themeOverrides, themeId),
+        context.ROOT_THEME_API
+      ),
+    };
+  }
+
+  render() {
+    // destructuring props ensures only the "...rest" get passed down
+    const {
+      context,
+      skin,
+      theme,
+      themeOverrides,
+      ...rest
+    } = this.props;
+
+    const PasswordInputSkin = skin || context.skins[IDENTIFIERS.PASSWORD_INPUT];
+
+    return (
+      <PasswordInputSkin
+        theme={this.state.composedTheme}
+        {...rest}
+      />
+    );
+  }
+}
+
+export const PasswordInput = withTheme(PasswordInputBase);
+
+PasswordInput.STATE = PasswordInputBase.STATE;
diff --git a/source/components/Tooltip.js b/source/components/Tooltip.js
index d82a1745..88e62b16 100644
--- a/source/components/Tooltip.js
+++ b/source/components/Tooltip.js
@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import type { ComponentType, Element } from 'react';
+import type { ComponentType, Element, Node } from 'react';
 
 // internal utility functions
 import { createEmptyContext, withTheme } from './HOC/withTheme';
@@ -10,13 +10,16 @@ import { composeTheme, addThemeId, didThemePropsChange } from '../utils/themes';
 import { IDENTIFIERS } from '.';
 import type { ThemeContextProp } from './HOC/withTheme';
 
-type Props = {
+export type TooltipProps = {
+  children: ?Node,
   className?: string,
   context: ThemeContextProp,
   isAligningRight?: boolean,
-  isBounded?: boolean,
+  isBounded: boolean,
+  isCentered: boolean,
   isOpeningUpward: boolean,
   isTransparent: boolean,
+  isVisible: boolean,
   arrowRelativeToTip: boolean,
   skin?: ComponentType<any>,
   theme: ?Object, // will take precedence over theme in context if passed
@@ -29,11 +32,14 @@ type State = {
   composedTheme: Object
 };
 
-class TooltipBase extends Component<Props, State> {
+class TooltipBase extends Component<TooltipProps, State> {
   // define static properties
   static displayName = 'Tooltip';
   static defaultProps = {
     context: createEmptyContext(),
+    isBounded: false,
+    isCentered: false,
+    isVisible: false,
     isOpeningUpward: true,
     isTransparent: true,
     arrowRelativeToTip: false,
@@ -42,7 +48,7 @@ class TooltipBase extends Component<Props, State> {
     themeOverrides: {}
   };
 
-  constructor(props: Props) {
+  constructor(props: TooltipProps) {
     super(props);
 
     const { context, themeId, theme, themeOverrides } = props;
@@ -56,7 +62,7 @@ class TooltipBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentWillReceiveProps(nextProps: TooltipProps) {
     didThemePropsChange(this.props, nextProps, this.setState.bind(this));
   }
 
diff --git a/source/components/index.js b/source/components/index.js
index 90adbc89..dd44a57d 100644
--- a/source/components/index.js
+++ b/source/components/index.js
@@ -16,6 +16,7 @@ export const IDENTIFIERS = {
   LOADING_SPINNER: 'loadingspinner',
   MODAL: 'modal',
   OPTIONS: 'options',
+  PASSWORD_INPUT: 'passwordInput',
   PROGRESS_BAR: 'progressbar',
   RADIO: 'radio',
   SCROLLBAR: 'scrollbar',
diff --git a/source/skins/simple/BubbleSkin.js b/source/skins/simple/BubbleSkin.js
index aa5b63e1..0836b6b6 100644
--- a/source/skins/simple/BubbleSkin.js
+++ b/source/skins/simple/BubbleSkin.js
@@ -7,17 +7,11 @@ import classnames from 'classnames';
 
 // internal utility functions
 import { pickDOMProps } from '../../utils/props';
+import type { BubblePosition, BubbleProps } from '../../components/Bubble';
 
-type Props = {
+type Props = BubbleProps & {
   children?: ?Node,
-  className: string,
-  isFloating: boolean,
-  isHidden: boolean,
-  isOpeningUpward: boolean,
-  isTransparent: boolean,
-  arrowRelativeToTip: boolean,
-  noArrow: boolean,
-  position: Object,
+  position: BubblePosition,
   rootRef: ElementRef<*>,
   theme: Object,
   themeId: string
@@ -25,7 +19,7 @@ type Props = {
 
 export const BubbleSkin = (props: Props) => {
   const { arrowRelativeToTip, noArrow, theme, themeId } = props;
-
+  const autoWidthClass = arrowRelativeToTip ? theme[themeId].hasAutoWidth : null;
   return (
     <div
       ref={props.rootRef}
@@ -34,6 +28,7 @@ export const BubbleSkin = (props: Props) => {
         props.className,
         theme[themeId].root,
         props.isOpeningUpward ? theme[themeId].openUpward : null,
+        props.isCentered ? theme[themeId].isCentered : null,
         props.isTransparent ? theme[themeId].transparent : null,
         props.isFloating ? theme[themeId].isFloating : null,
         props.isHidden ? theme[themeId].isHidden : null,
@@ -47,14 +42,23 @@ export const BubbleSkin = (props: Props) => {
         }
       }
     >
-      <div className={theme[themeId].bubble} data-bubble-container>
+      <div
+        className={classnames([theme[themeId].bubble, autoWidthClass])}
+        data-bubble-container="true"
+      >
         {props.children}
         {arrowRelativeToTip && (
-          <span className={theme[themeId].arrow} data-bubble-arrow={noArrow ? undefined : true} />
+          <span
+            className={theme[themeId].arrow}
+            data-bubble-arrow={noArrow ? undefined : true}
+          />
         )}
       </div>
       {!arrowRelativeToTip && (
-        <span className={theme[themeId].arrow} data-bubble-arrow={noArrow ? undefined : true} />
+        <span
+          className={theme[themeId].arrow}
+          data-bubble-arrow={noArrow ? undefined : true}
+        />
       )}
     </div>
   );
diff --git a/source/skins/simple/PasswordInputSkin.js b/source/skins/simple/PasswordInputSkin.js
new file mode 100644
index 00000000..a4df0d0f
--- /dev/null
+++ b/source/skins/simple/PasswordInputSkin.js
@@ -0,0 +1,44 @@
+// @flow
+import classnames from 'classnames';
+import React from 'react';
+import type { ElementRef } from 'react';
+
+import { Input } from '../../components/Input';
+import { Tooltip } from '../../components/Tooltip';
+import type { PasswordInputProps } from '../../components/PasswordInput';
+import { PasswordInput } from '../../components/PasswordInput';
+
+type Props = PasswordInputProps & {
+  inputRef: ElementRef<'input'>,
+  theme: Object,
+};
+
+export const PasswordInputSkin = (props: Props) => {
+  const { isTooltipOpen, theme, themeId, tooltip, score, state, ...inputProps } = props;
+  const input = (
+    <Input
+      {...inputProps}
+      type="password"
+    />
+  );
+  const stateClass = state ? theme[themeId][state] : theme[themeId][PasswordInput.STATE.DEFAULT];
+  return (
+    <div className={classnames([theme[themeId].root, stateClass])}>
+      {tooltip ? (
+        <Tooltip
+          arrowRelativeToTip
+          isCentered
+          isOpeningUpward={false}
+          isVisible={isTooltipOpen}
+          tip={tooltip}
+          theme={props.theme}
+        >
+          {input}
+        </Tooltip>
+      ) : input}
+      <div className={theme[themeId].indicator}>
+        <div className={theme[themeId].score} style={{ width: `${(score || 0) * 100}%` }} />
+      </div>
+    </div>
+  );
+};
diff --git a/source/skins/simple/TooltipSkin.js b/source/skins/simple/TooltipSkin.js
index b7a1f285..49bce19f 100644
--- a/source/skins/simple/TooltipSkin.js
+++ b/source/skins/simple/TooltipSkin.js
@@ -1,12 +1,12 @@
 // @flow
 import React from 'react';
-import type { Node, Element } from 'react';
 
 // external libraries
 import classnames from 'classnames';
 
 // components
 import { Bubble } from '../../components/Bubble';
+import type { TooltipProps } from '../../components/Tooltip';
 
 // skins
 import { BubbleSkin } from './BubbleSkin';
@@ -14,17 +14,9 @@ import { BubbleSkin } from './BubbleSkin';
 // internal utility functions
 import { pickDOMProps } from '../../utils/props';
 
-type Props = {
-  children?: ?Node,
-  className?: string,
-  isAligningRight?: boolean,
-  isBounded?: boolean,
-  isOpeningUpward: boolean,
-  isTransparent: boolean,
-  arrowRelativeToTip: boolean,
+type Props = TooltipProps & {
   theme: Object,
   themeId: string,
-  tip: string | Element<any>
 };
 
 export const TooltipSkin = (props: Props) => {
@@ -32,7 +24,12 @@ export const TooltipSkin = (props: Props) => {
   return (
     <span
       {...pickDOMProps(props)}
-      className={classnames([props.className, theme[themeId].root])}
+      className={classnames([
+        props.className,
+        theme[themeId].root,
+        props.isVisible ? theme[themeId].isVisible : null,
+        props.isCentered ? theme[themeId].isCentered : null,
+      ])}
     >
       <Bubble
         className={classnames([
@@ -43,6 +40,7 @@ export const TooltipSkin = (props: Props) => {
           props.isBounded ? null : theme[themeId].nowrap
         ])}
         theme={theme}
+        isCentered={props.isCentered}
         isOpeningUpward={props.isOpeningUpward}
         skin={BubbleSkin}
         isTransparent={props.isTransparent}
diff --git a/source/skins/simple/index.js b/source/skins/simple/index.js
index ed4686b9..3439761c 100644
--- a/source/skins/simple/index.js
+++ b/source/skins/simple/index.js
@@ -13,6 +13,7 @@ import { LinkSkin } from './LinkSkin';
 import { LoadingSpinnerSkin } from './LoadingSpinnerSkin';
 import { ModalSkin } from './ModalSkin';
 import { OptionsSkin } from './OptionsSkin';
+import { PasswordInputSkin } from './PasswordInputSkin';
 import { ProgressBarSkin } from './ProgressBarSkin';
 import { RadioSkin } from './RadioSkin';
 import { ScrollBarSkin } from './ScrollBarSkin';
@@ -37,6 +38,7 @@ export const SimpleSkins = {
   [IDENTIFIERS.LOADING_SPINNER]: LoadingSpinnerSkin,
   [IDENTIFIERS.MODAL]: ModalSkin,
   [IDENTIFIERS.OPTIONS]: OptionsSkin,
+  [IDENTIFIERS.PASSWORD_INPUT]: PasswordInputSkin,
   [IDENTIFIERS.PROGRESS_BAR]: ProgressBarSkin,
   [IDENTIFIERS.RADIO]: RadioSkin,
   [IDENTIFIERS.SCROLLBAR]: ScrollBarSkin,
diff --git a/source/themes/API/index.js b/source/themes/API/index.js
index 79784ce1..d41dc724 100644
--- a/source/themes/API/index.js
+++ b/source/themes/API/index.js
@@ -16,6 +16,7 @@ import { LINK_THEME_API } from './link';
 import { LOADING_SPINNER_API } from './loadingspinner';
 import { MODAL_THEME_API } from './modal';
 import { OPTIONS_THEME_API } from './options';
+import { PASSWORD_INPUT_THEME_API } from './password-input';
 import { PROGRESS_BAR_THEME_API } from './progressbar';
 import { RADIO_THEME_API } from './radio';
 import { SCROLLBAR_THEME_API } from './scrollbar';
@@ -43,6 +44,7 @@ export const ROOT_THEME_API = {
   [IDENTIFIERS.LOADING_SPINNER]: LOADING_SPINNER_API,
   [IDENTIFIERS.MODAL]: MODAL_THEME_API,
   [IDENTIFIERS.OPTIONS]: OPTIONS_THEME_API,
+  [IDENTIFIERS.PASSWORD_INPUT]: PASSWORD_INPUT_THEME_API,
   [IDENTIFIERS.PROGRESS_BAR]: PROGRESS_BAR_THEME_API,
   [IDENTIFIERS.RADIO]: RADIO_THEME_API,
   [IDENTIFIERS.SCROLLBAR]: SCROLLBAR_THEME_API,
diff --git a/source/themes/API/password-input.js b/source/themes/API/password-input.js
new file mode 100644
index 00000000..94e3fa40
--- /dev/null
+++ b/source/themes/API/password-input.js
@@ -0,0 +1,9 @@
+// @flow
+export const PASSWORD_INPUT_THEME_API = {
+  root: '',
+  tooltip: '',
+  hint: '',
+  error: '',
+  warning: '',
+  success: '',
+};
diff --git a/source/themes/API/tooltip.js b/source/themes/API/tooltip.js
index 8c950f44..28e47329 100644
--- a/source/themes/API/tooltip.js
+++ b/source/themes/API/tooltip.js
@@ -4,5 +4,7 @@ export const TOOLTIP_THEME_API = {
   bubble: '',
   alignRight: '',
   alignLeft: '',
+  isCentered: '',
+  isVisible: '',
   nowrap: ''
 };
diff --git a/source/themes/simple/SimpleBubble.scss b/source/themes/simple/SimpleBubble.scss
index 357aa60b..1b565f25 100644
--- a/source/themes/simple/SimpleBubble.scss
+++ b/source/themes/simple/SimpleBubble.scss
@@ -191,3 +191,20 @@ $bubble-arrow-height: var(--rp-bubble-arrow-height, $bubble-arrow-size) !default
     top: calc(100% + #{$bubble-no-arrow-distance});
   }
 }
+
+// ======== STATE: autoWidth =======
+
+.hasAutoWidth {
+  min-width: auto;
+}
+
+// ======== STATE: isCentered =======
+
+.isCentered {
+  text-align: center;
+  .bubble {
+    display: inline-block;
+    position: unset;
+    min-width: unset;
+  }
+}
diff --git a/source/themes/simple/SimplePasswordInput.scss b/source/themes/simple/SimplePasswordInput.scss
new file mode 100644
index 00000000..f3fdd9c1
--- /dev/null
+++ b/source/themes/simple/SimplePasswordInput.scss
@@ -0,0 +1,67 @@
+@import "theme";
+
+$password-input-error-bg: var(--rp-password-input-error-bg, #f4b5bc) !default;
+$password-input-error-score-color: var(--rp-password-input-error-score-color, #ea4c5b) !default;
+$password-input-warning-bg: var(--rp-password-input-warning-bg, #f7d8a1) !default;
+$password-input-warning-score-color: var(--rp-password-input-warning-score-color, #f2a218) !default;
+$password-input-success-bg: var(--rp-password-input-success-bg, #a8e4c3) !default;
+$password-input-success-score-color: var(--rp-password-input-success-score-color, #2dc06c) !default;
+
+@mixin bubbleColor($color) {
+  :global {
+    .SimpleTooltip_bubble.SimpleBubble_root [data-bubble-arrow] {
+      &:before, &:after {
+        border-bottom-color: $color;
+      }
+    }
+    .SimpleTooltip_bubble .SimpleBubble_bubble {
+      background-color: $color;
+    }
+  }
+}
+
+.root {
+  // Remove bottom input border for any state but the default
+  // to make room for the score indicator
+  &:not(.default) {
+    :global {
+      .SimpleInput_input {
+        border-bottom: none;
+      }
+    }
+  }
+}
+
+.indicator, .score {
+  height: 2px;
+}
+
+.error {
+  .indicator {
+    background-color: $password-input-error-bg;
+  }
+  .score {
+    background-color: $password-input-error-score-color;
+  }
+  @include bubbleColor($password-input-error-score-color);
+}
+
+.warning {
+  .indicator {
+    background-color: $password-input-warning-bg;
+  }
+  .score {
+    background-color: $password-input-warning-score-color;
+  }
+  @include bubbleColor($password-input-warning-score-color);
+}
+
+.success {
+  .indicator {
+    background-color: $password-input-success-bg;
+  }
+  .score {
+    background-color: $password-input-success-score-color;
+  }
+  @include bubbleColor($password-input-success-score-color);
+}
diff --git a/source/themes/simple/SimpleTooltip.scss b/source/themes/simple/SimpleTooltip.scss
index feafbc17..0c48df90 100644
--- a/source/themes/simple/SimpleTooltip.scss
+++ b/source/themes/simple/SimpleTooltip.scss
@@ -3,7 +3,6 @@
 
 // OVERRIDABLE CONFIGURATION VARIABLES
 
-$tooltip-bg-color: var(--rp-tooltip-bg-color, #fafbfc) !default;
 $tooltip-font-family: var(--rp-tooltip-font-family, $theme-font-light, sans-serif) !default;
 $tooltip-text-color: var(--rp-tooltip-text-color, white) !default;
 
@@ -21,7 +20,6 @@ $tooltip-text-color: var(--rp-tooltip-text-color, white) !default;
 .bubble {
   font-family: $tooltip-font-family;
   color: $tooltip-text-color;
-  background-color: $tooltip-bg-color;
   display: none;
 }
 
@@ -36,3 +34,21 @@ $tooltip-text-color: var(--rp-tooltip-text-color, white) !default;
 .nowrap {
   white-space: nowrap;
 }
+
+.isCentered {
+  display: block;
+
+  &:hover .bubble {
+    display: inline-block;
+  }
+
+  .bubble {
+    text-align: center;
+  }
+}
+
+.isVisible {
+  .bubble {
+    display: inline-block;
+  }
+}
diff --git a/source/themes/simple/index.js b/source/themes/simple/index.js
index 11090ce7..3af17b39 100644
--- a/source/themes/simple/index.js
+++ b/source/themes/simple/index.js
@@ -19,6 +19,7 @@ import SimpleLink from './SimpleLink.scss';
 import SimpleLoadingSpinner from './SimpleLoadingSpinner.scss';
 import SimpleModal from './SimpleModal.scss';
 import SimpleOptions from './SimpleOptions.scss';
+import SimplePasswordInput from './SimplePasswordInput.scss';
 import SimpleProgressBar from './SimpleProgressBar.scss';
 import SimpleRadio from './SimpleRadio.scss';
 import SimpleScrollBar from './SimpleScrollBar.scss';
@@ -50,6 +51,7 @@ export const SimpleTheme = {
   [IDENTIFIERS.LOADING_SPINNER]: SimpleLoadingSpinner,
   [IDENTIFIERS.MODAL]: SimpleModal,
   [IDENTIFIERS.OPTIONS]: SimpleOptions,
+  [IDENTIFIERS.PASSWORD_INPUT]: SimplePasswordInput,
   [IDENTIFIERS.PROGRESS_BAR]: SimpleProgressBar,
   [IDENTIFIERS.RADIO]: SimpleRadio,
   [IDENTIFIERS.SCROLLBAR]: SimpleScrollBar,
diff --git a/stories/Bubble.stories.js b/stories/Bubble.stories.js
index a0140b80..22609bee 100644
--- a/stories/Bubble.stories.js
+++ b/stories/Bubble.stories.js
@@ -112,6 +112,15 @@ storiesOf('Bubble', module)
     </div>
   ))
 
+  .add('isCentered', () => (
+    <div className={styles.container} style={{ width: '200px' }}>
+      Bubble should be centered below me without stretching the full width
+      <Bubble isCentered>
+        centered below
+      </Bubble>
+    </div>
+  ))
+
   .add('theme overrides', () => (
     <div className={styles.container}>
       <Bubble
diff --git a/stories/PasswordInput.stories.js b/stories/PasswordInput.stories.js
new file mode 100644
index 00000000..1e18115d
--- /dev/null
+++ b/stories/PasswordInput.stories.js
@@ -0,0 +1,80 @@
+// @flow
+import React from 'react';
+
+// storybook
+import { storiesOf } from '@storybook/react';
+import { withState } from '@dump247/storybook-state';
+
+// components
+import { PasswordInput } from '../source/components/PasswordInput';
+
+// helpers
+import { decorateWithSimpleTheme } from './helpers/theming';
+
+// custom styles & theme overrides
+import styles from './PasswordInput.stories.scss';
+
+storiesOf('PasswordInput', module)
+
+  .addDecorator(decorateWithSimpleTheme)
+
+  // ====== Stories ======
+  .add('empty',
+    withState({ value: '' }, store => (
+      <div className={styles.container}>
+        <PasswordInput
+          isTooltipOpen
+          label="Label"
+          value={store.state.value}
+          placeholder="Hint"
+          onChange={value => store.set({ value })}
+          tooltip="Regular tooltip"
+        />
+      </div>
+    ))
+  )
+  .add('error',
+    withState({ value: 'test' }, store => (
+      <div className={styles.container}>
+        <PasswordInput
+          isTooltipOpen
+          label="Label"
+          value={store.state.value}
+          onChange={value => store.set({ value })}
+          tooltip="Password doesn't match"
+          score={0.1}
+          state={PasswordInput.STATE.ERROR}
+        />
+      </div>
+    ))
+  )
+  .add('warning',
+    withState({ value: 'test' }, store => (
+      <div className={styles.container}>
+        <PasswordInput
+          isTooltipOpen
+          label="Label"
+          value={store.state.value}
+          onChange={value => store.set({ value })}
+          tooltip="Warning message"
+          score={0.5}
+          state={PasswordInput.STATE.WARNING}
+        />
+      </div>
+    ))
+  )
+  .add('success',
+    withState({ value: 'test' }, store => (
+      <div className={styles.container}>
+        <PasswordInput
+          isTooltipOpen
+          label="Label"
+          value={store.state.value}
+          onChange={value => store.set({ value })}
+          tooltip="Excellent"
+          score={0.8}
+          state={PasswordInput.STATE.SUCCESS}
+        />
+      </div>
+    ))
+  );
diff --git a/stories/PasswordInput.stories.scss b/stories/PasswordInput.stories.scss
new file mode 100644
index 00000000..bc4cb86a
--- /dev/null
+++ b/stories/PasswordInput.stories.scss
@@ -0,0 +1,3 @@
+.container {
+  padding: 20px;
+}
diff --git a/stories/Tooltip.stories.js b/stories/Tooltip.stories.js
index a32c7ff7..b5676d74 100644
--- a/stories/Tooltip.stories.js
+++ b/stories/Tooltip.stories.js
@@ -99,6 +99,43 @@ storiesOf('Tooltip', module)
     </div>
   ))
 
+  .add('arrowRelativeToTip (below)', () => (
+    <div className={styles.fitToSize}>
+      <Tooltip
+        arrowRelativeToTip
+        isOpeningUpward={false}
+        tip="small tip from below"
+      >
+        {'this is a really long string for demonstration purposes'}
+      </Tooltip>
+    </div>
+  ))
+
+  .add('centered', () => (
+    <div className={styles.fitToSize}>
+      <Tooltip
+        arrowRelativeToTip
+        isCentered
+        tip="centered above"
+      >
+        {'this is a really long string for demonstration purposes'}
+      </Tooltip>
+    </div>
+  ))
+
+  .add('centered (below)', () => (
+    <div className={styles.fitToSize}>
+      <Tooltip
+        arrowRelativeToTip
+        isCentered
+        isOpeningUpward={false}
+        tip="centered below"
+      >
+        {'this is a really long string for demonstration purposes'}
+      </Tooltip>
+    </div>
+  ))
+
   .add('theme overrides', () => (
     <div className={styles.container}>
       <Tooltip
diff --git a/stories/Tooltip.stories.scss b/stories/Tooltip.stories.scss
index f7bd4506..3cf651c4 100644
--- a/stories/Tooltip.stories.scss
+++ b/stories/Tooltip.stories.scss
@@ -14,9 +14,6 @@
 }
 
 .fitToSize {
-  padding: 150px;
-  :global(.SimpleBubble_bubble) {
-    // size tooltip to text contained inside
-    min-width: auto;
-  }
-}
\ No newline at end of file
+  margin: 150px;
+  background-color: #eee;
+}
diff --git a/stories/index.js b/stories/index.js
index 3254a5cc..1d5fdace 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -14,6 +14,7 @@ import './LoadingSpinner.stories';
 import './Modal.stories';
 import './NumericInput.stories';
 import './Options.stories';
+import './PasswordInput.stories';
 import './ProgressBar.stories';
 import './Radio.stories';
 import './ScrollBar.stories';

From e8de063b95e10663d59778cc7e98a64181519d04 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Tue, 11 Feb 2020 15:03:00 -0500
Subject: [PATCH 035/244] [DDW-733] Fixes ESLint warning

---
 source/components/Bubble.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/components/Bubble.js b/source/components/Bubble.js
index dc692d7a..cb9d6f40 100644
--- a/source/components/Bubble.js
+++ b/source/components/Bubble.js
@@ -40,7 +40,7 @@ type State = {
   position: ?BubblePosition
 };
 
-class BubbleBase extends Component<Props, State> {
+class BubbleBase extends Component<BubbleProps, State> {
   // declare ref types
   rootElement: ?Element<any>;
 
@@ -60,7 +60,7 @@ class BubbleBase extends Component<Props, State> {
     themeOverrides: {}
   };
 
-  constructor(props: Props) {
+  constructor(props: BubbleProps) {
     super(props);
 
     // define ref
@@ -86,7 +86,7 @@ class BubbleBase extends Component<Props, State> {
     }, 0);
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentWillReceiveProps(nextProps: BubbleProps) {
     didThemePropsChange(this.props, nextProps, this.setState.bind(this));
   }
 

From 4a0312d7da8c8ee746a54d0d671652c67f88342f Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Tue, 11 Feb 2020 15:03:16 -0500
Subject: [PATCH 036/244] [DDW-733] Fixes flow error

---
 source/components/PasswordInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/components/PasswordInput.js b/source/components/PasswordInput.js
index de02b727..0ff9a5ab 100644
--- a/source/components/PasswordInput.js
+++ b/source/components/PasswordInput.js
@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 // $FlowFixMe
-import type { ComponentType, SyntheticInputEvent, Element } from 'react';
+import type { ComponentType, Element } from 'react';
 
 // internal utility functions
 import { createEmptyContext, withTheme } from './HOC/withTheme';

From cb6494d7d54a4b090ad9ae640765ba3844649629 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Tue, 11 Feb 2020 15:19:55 -0500
Subject: [PATCH 037/244] [DDW-733] Fixes CSS variable names and adds comments
 to theme file

---
 source/themes/simple/SimplePasswordInput.scss | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/source/themes/simple/SimplePasswordInput.scss b/source/themes/simple/SimplePasswordInput.scss
index f3fdd9c1..9d4b744b 100644
--- a/source/themes/simple/SimplePasswordInput.scss
+++ b/source/themes/simple/SimplePasswordInput.scss
@@ -1,10 +1,17 @@
 @import "theme";
 
-$password-input-error-bg: var(--rp-password-input-error-bg, #f4b5bc) !default;
+// OVERRIDABLE CONFIGURATION VARIABLES
+
+// error
+$password-input-error-bg-color: var(--rp-password-input-error-bg-color, #f4b5bc) !default;
 $password-input-error-score-color: var(--rp-password-input-error-score-color, #ea4c5b) !default;
-$password-input-warning-bg: var(--rp-password-input-warning-bg, #f7d8a1) !default;
+
+// warning
+$password-input-warning-bg-color: var(--rp-password-input-warning-bg-color, #f7d8a1) !default;
 $password-input-warning-score-color: var(--rp-password-input-warning-score-color, #f2a218) !default;
-$password-input-success-bg: var(--rp-password-input-success-bg, #a8e4c3) !default;
+
+// success
+$password-input-success-bg-color: var(--rp-password-input-success-bg-color, #a8e4c3) !default;
 $password-input-success-score-color: var(--rp-password-input-success-score-color, #2dc06c) !default;
 
 @mixin bubbleColor($color) {
@@ -38,7 +45,7 @@ $password-input-success-score-color: var(--rp-password-input-success-score-color
 
 .error {
   .indicator {
-    background-color: $password-input-error-bg;
+    background-color: $password-input-error-bg-color;
   }
   .score {
     background-color: $password-input-error-score-color;
@@ -48,7 +55,7 @@ $password-input-success-score-color: var(--rp-password-input-success-score-color
 
 .warning {
   .indicator {
-    background-color: $password-input-warning-bg;
+    background-color: $password-input-warning-bg-color;
   }
   .score {
     background-color: $password-input-warning-score-color;
@@ -58,7 +65,7 @@ $password-input-success-score-color: var(--rp-password-input-success-score-color
 
 .success {
   .indicator {
-    background-color: $password-input-success-bg;
+    background-color: $password-input-success-bg-color;
   }
   .score {
     background-color: $password-input-success-score-color;

From 28c1768fbd95c711f95230d3fab3539ef511f482 Mon Sep 17 00:00:00 2001
From: MarcusHurney <marcushurney@gmail.com>
Date: Tue, 11 Feb 2020 15:28:35 -0500
Subject: [PATCH 038/244] [DDW-733] Updates CHANGELOG

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8aefc1f2..ea68c76b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
+### Features
+
+- Adds new `PasswordInput` component [PR 134](https://github.com/input-output-hk/react-polymorph/pull/134)
+
 0.9.2
 =====
 

From 0f7cce97e85905748c48f49752908b7298f20a18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomislav=20Hora=C4=8Dek?= <tomislav.horacek@thespian.hr>
Date: Wed, 18 Mar 2020 16:49:22 +0100
Subject: [PATCH 039/244] [DDW-1227] Fix options component dimensions (#135)

* [DDW-1227] Introduce a fix for options fixed height

* [DDW-1227] Add more optionHeight declarations

* [DDW-1227] Fix typo

* [DDW-1227] Add GlobalListeners mouse event on root element position

* [DDW-1227] Fix flow issues

* [DDW-1227] Update CHANGELOG

* [DDW-1227] Update stoybook stories due to latest changes

* [DDW-1227] CHANGELOG update
---
 CHANGELOG.md                             | 5 +++++
 source/components/Autocomplete.js        | 3 ++-
 source/components/Dropdown.js            | 6 ++++--
 source/components/HOC/GlobalListeners.js | 4 +++-
 source/components/Options.js             | 2 +-
 source/components/Select.js              | 3 +++
 source/skins/simple/AutocompleteSkin.js  | 2 ++
 source/skins/simple/DropdownSkin.js      | 2 ++
 source/skins/simple/SelectSkin.js        | 2 ++
 stories/Dropdown.stories.js              | 5 +++++
 stories/Select.stories.js                | 2 ++
 11 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea68c76b..b2f49838 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,11 @@ vNext
 
 - Adds new `PasswordInput` component [PR 134](https://github.com/input-output-hk/react-polymorph/pull/134)
 
+### Fixes
+
+- Fixed Option component, `optionHeight` property, override from parent components [PR 135](https://github.com/input-output-hk/react-polymorph/pull/135)
+- Fixed global listener `mouseIsOverRoot`  event handler [PR 135](https://github.com/input-output-hk/react-polymorph/pull/135)
+
 0.9.2
 =====
 
diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index 6194285a..593d7461 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -256,7 +256,7 @@ class AutocompleteBase extends Component<Props, State> {
         rootRef={this.rootElement}
         toggleOpen={this.toggleOpen}
       >
-        {({ optionsMaxHeight }) => (
+        {({ optionsMaxHeight, optionHeight }) => (
           <AutocompleteSkin
             error={error || this.state.error}
             filteredOptions={this.state.filteredOptions}
@@ -277,6 +277,7 @@ class AutocompleteBase extends Component<Props, State> {
             theme={this.state.composedTheme}
             toggleMouseLocation={this.toggleMouseLocation}
             toggleOpen={this.toggleOpen}
+            optionHeight={optionHeight}
             {...rest}
           />
         )}
diff --git a/source/components/Dropdown.js b/source/components/Dropdown.js
index 80b5d2d1..4fa9318a 100644
--- a/source/components/Dropdown.js
+++ b/source/components/Dropdown.js
@@ -143,18 +143,19 @@ class DropdownBase extends Component<Props, State> {
     } = this.props;
 
     const DropdownSkin = skin || context.skins[IDENTIFIERS.DROPDOWN];
-    const { isMouseOverItems } = this.state;
+    const { isMouseOverItems, isMouseOverRoot } = this.state;
 
     return (
       <GlobalListeners
         mouseIsOverOptions={isMouseOverItems}
+        mouseIsOverRoot={isMouseOverRoot}
         optionsIsOpen={this.isOpen()}
         optionsIsOpeningUpward={isOpeningUpward}
         optionsRef={this.optionsElement}
         rootRef={this.rootElement}
         toggleOpen={this.toggleOpen}
       >
-        {({ optionsMaxHeight }) => (
+        {({ optionsMaxHeight, optionHeight }) => (
           <DropdownSkin
             isOpen={this.isOpen()}
             isOpeningUpward={isOpeningUpward}
@@ -162,6 +163,7 @@ class DropdownBase extends Component<Props, State> {
             onLabelClick={this._onLabelClick}
             optionsRef={this.optionsElement}
             optionsMaxHeight={optionsMaxHeight}
+            optionHeight={optionHeight}
             rootRef={this.rootElement}
             setMouseOverItems={this._setMouseOverItems}
             setMouseOverRoot={this._setMouseOverRoot}
diff --git a/source/components/HOC/GlobalListeners.js b/source/components/HOC/GlobalListeners.js
index 5b803e77..39364694 100644
--- a/source/components/HOC/GlobalListeners.js
+++ b/source/components/HOC/GlobalListeners.js
@@ -15,6 +15,7 @@ import {
 type Props = {
   children: Function,
   mouseIsOverOptions: boolean,
+  mouseIsOverRoot?: boolean,
   optionsIsOpen: boolean,
   optionsIsOpeningUpward: boolean,
   optionsRef?: ElementRef<*>,
@@ -136,6 +137,7 @@ export class GlobalListeners extends Component<Props, State> {
       optionsRef,
       toggleOpen,
       mouseIsOverOptions,
+      mouseIsOverRoot,
     } = this.props;
 
     // checks if Options are open & being scrolled upon via mouse position prior to toggling closed
@@ -144,7 +146,7 @@ export class GlobalListeners extends Component<Props, State> {
     if (!rootRef || !rootRef.current || !doDocumentStylesExist || !isOptionsInDOM) {
       return;
     }
-    optionsIsOpen && !mouseIsOverOptions && toggleOpen();
+    optionsIsOpen && !mouseIsOverOptions && !mouseIsOverRoot && toggleOpen();
     const { height, top } = rootRef.current.getBoundingClientRect();
     // opening upwards case
     if (optionsIsOpeningUpward && top < window.innerHeight) {
diff --git a/source/components/Options.js b/source/components/Options.js
index 8e6c39db..136f751f 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -33,7 +33,7 @@ type Props = {
   onBlur?: Function,
   onChange?: Function,
   onClose?: Function,
-  optionHeight: number,
+  optionHeight: ?number,
   options: Array<any>,
   optionRenderer?: Function,
   optionsRef?: ElementRef<any>,
diff --git a/source/components/Select.js b/source/components/Select.js
index 9361ac42..3f15cecd 100644
--- a/source/components/Select.js
+++ b/source/components/Select.js
@@ -34,6 +34,7 @@ type Props = {
   themeId: string,
   themeOverrides: Object,
   value: string,
+  optionHeight?: number,
 };
 
 type State = {
@@ -147,6 +148,7 @@ class SelectBase extends Component<Props, State> {
       autoFocus,
       context,
       allowBlank,
+      optionHeight,
       ...rest
     } = this.props;
 
@@ -174,6 +176,7 @@ class SelectBase extends Component<Props, State> {
             handleChange={this.handleChange}
             toggleOpen={this.toggleOpen}
             toggleMouseLocation={this.toggleMouseLocation}
+            optionHeight={optionHeight}
             {...rest}
           />
         )}
diff --git a/source/skins/simple/AutocompleteSkin.js b/source/skins/simple/AutocompleteSkin.js
index 8d929ede..0bbe2aa8 100644
--- a/source/skins/simple/AutocompleteSkin.js
+++ b/source/skins/simple/AutocompleteSkin.js
@@ -44,6 +44,7 @@ type Props = {
   themeId: string,
   toggleMouseLocation: Function,
   toggleOpen: Function,
+  optionHeight: ?number,
 };
 
 export const AutocompleteSkin = (props: Props) => {
@@ -148,6 +149,7 @@ export const AutocompleteSkin = (props: Props) => {
         targetRef={props.suggestionsRef}
         toggleMouseLocation={props.toggleMouseLocation}
         toggleOpen={props.toggleOpen}
+        optionHeight={props.optionHeight}
       />
     </div>
   );
diff --git a/source/skins/simple/DropdownSkin.js b/source/skins/simple/DropdownSkin.js
index 7c8676c2..60805cda 100644
--- a/source/skins/simple/DropdownSkin.js
+++ b/source/skins/simple/DropdownSkin.js
@@ -29,6 +29,7 @@ type Props = {
   setMouseOverRoot: Function,
   theme: Object,
   themeId: string,
+  optionHeight: ?number,
 };
 
 export const DropdownSkin = (props: Props) => {
@@ -61,6 +62,7 @@ export const DropdownSkin = (props: Props) => {
         onChange={props.onItemSelected}
         options={props.items}
         optionsMaxHeight={props.optionsMaxHeight}
+        optionHeight={props.optionHeight}
         optionsRef={props.optionsRef}
         optionRenderer={props.optionRenderer}
         selectedOption={props.activeItem}
diff --git a/source/skins/simple/SelectSkin.js b/source/skins/simple/SelectSkin.js
index cff84c50..a7d4b6fe 100644
--- a/source/skins/simple/SelectSkin.js
+++ b/source/skins/simple/SelectSkin.js
@@ -42,6 +42,7 @@ type Props = {
   toggleOpen: Function,
   toggleMouseLocation: Function,
   value: string,
+  optionHeight: ?number,
 };
 
 export const SelectSkin = (props: Props) => {
@@ -89,6 +90,7 @@ export const SelectSkin = (props: Props) => {
         targetRef={props.inputRef}
         toggleMouseLocation={props.toggleMouseLocation}
         toggleOpen={props.toggleOpen}
+        optionHeight={props.optionHeight}
       />
     </div>
   );
diff --git a/stories/Dropdown.stories.js b/stories/Dropdown.stories.js
index 0681b9ac..1348c252 100644
--- a/stories/Dropdown.stories.js
+++ b/stories/Dropdown.stories.js
@@ -55,6 +55,7 @@ storiesOf('Dropdown', module)
         }}
         items={COUNTRY_ITEMS}
         noArrow
+        optionHeight={52}
       />
     ))
   )
@@ -67,6 +68,7 @@ storiesOf('Dropdown', module)
           store.set({ value });
         }}
         items={COUNTRY_ITEMS}
+        optionHeight={52}
       />
     ))
   )
@@ -81,6 +83,7 @@ storiesOf('Dropdown', module)
           store.set({ value });
         }}
         items={COUNTRY_ITEMS}
+        optionHeight={52}
       />
     ))
   )
@@ -94,6 +97,7 @@ storiesOf('Dropdown', module)
           store.set({ value });
         }}
         items={COUNTRY_ITEMS}
+        optionHeight={52}
       />
     ))
   )
@@ -110,6 +114,7 @@ storiesOf('Dropdown', module)
         optionRenderer={o => (
           <div className={styles.customOption}>{o.label}</div>
         )}
+        optionHeight={52}
       />
     ))
   );
diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index d7a295f0..2bf390c0 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -128,6 +128,7 @@ storiesOf('Select', module)
             <span>{option.label}</span>
           </div>
           )}
+        optionHeight={56}
       />
     ))
   )
@@ -246,6 +247,7 @@ storiesOf('Select', module)
             <div className={styles.value}>{option.value}</div>
           </div>
         )}
+        optionHeight={63}
       />
     ))
   );

From 29f97ba6a1a3b93d2e558f0beb25f3a8d98989f7 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 22 Apr 2020 17:00:54 +0200
Subject: [PATCH 040/244] Prepare release 0.9.3 (#136)

* Prepare release 0.9.3
---
 CHANGELOG.md | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2f49838..492e4fd5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
+0.9.3
+=====
+
 ### Features
 
 - Adds new `PasswordInput` component [PR 134](https://github.com/input-output-hk/react-polymorph/pull/134)
diff --git a/package.json b/package.json
index 39b17ee9..008d48bd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.2-rc.2",
+  "version": "0.9.3",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From b4f07eac46c0077fcffcc306a9e0503ff2dbff2d Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakovkaravelov@users.noreply.github.com>
Date: Wed, 27 May 2020 03:38:56 -0700
Subject: [PATCH 041/244] [DDW-246]: Eliminate usage of deprecated lifecycle
 methods (#138)

* [DDW-246]: Eliminate usage of deprecated lifecycle methods
* [DDW-246]: Restore single quote usage
* [DDW-246]: Fix props type in tooltip component
---
 .prettierrc                              |   4 +
 source/components/Autocomplete.js        |  53 +++---
 source/components/Bubble.js              |  47 +++--
 source/components/Button.js              |  14 +-
 source/components/Checkbox.js            |  14 +-
 source/components/Dropdown.js            |  18 +-
 source/components/FormField.js           |   9 +-
 source/components/HOC/GlobalListeners.js |  43 +++--
 source/components/Header.js              |  26 ++-
 source/components/InfiniteScroll.js      |  49 +++---
 source/components/Input.js               |   6 +-
 source/components/Link.js                |  18 +-
 source/components/LoadingSpinner.js      |  17 +-
 source/components/Modal.js               |  14 +-
 source/components/NumericInput.js        | 213 ++++++++++++++---------
 source/components/Options.js             |  38 ++--
 source/components/ProgressBar.js         |  14 +-
 source/components/Radio.js               |  14 +-
 source/components/ScrollBar.js           |  14 +-
 source/components/Select.js              |  28 +--
 source/components/Stepper.js             |  16 +-
 source/components/TextArea.js            |  29 +--
 source/components/ThemeProvider.js       |  36 ++--
 source/components/Tooltip.js             |   6 +-
 source/components/layout/Flex.js         |  32 +++-
 source/components/layout/Grid.js         |  20 ++-
 source/components/layout/Gutter.js       |  12 +-
 source/utils/themes.js                   |  16 +-
 28 files changed, 476 insertions(+), 344 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..e9c0f50f
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "trailingComma": "none",
+  "singleQuote": true
+}
diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index 593d7461..8673909d 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -47,7 +47,7 @@ type State = {
   isOpen: boolean,
   inputValue: string,
   mouseIsOverOptions: boolean,
-  selectedOptions: Array<any>,
+  selectedOptions: Array<any>
 };
 
 class AutocompleteBase extends Component<Props, State> {
@@ -108,8 +108,10 @@ class AutocompleteBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   clear = () => this._removeOptions();
@@ -121,16 +123,19 @@ class AutocompleteBase extends Component<Props, State> {
   close = () => this.setState({ isOpen: false });
 
   toggleOpen = () => {
-    if (this.state.isOpen && this.optionsElement && this.optionsElement.current) {
+    if (
+      this.state.isOpen &&
+      this.optionsElement &&
+      this.optionsElement.current
+    ) {
       // set Options scroll position to top on close
       this.optionsElement.current.scrollTop = 0;
     }
     this.setState({ isOpen: !this.state.isOpen });
-  }
+  };
 
-  toggleMouseLocation = () => (
-    this.setState({ mouseIsOverOptions: !this.state.mouseIsOverOptions })
-  );
+  toggleMouseLocation = () =>
+    this.setState({ mouseIsOverOptions: !this.state.mouseIsOverOptions });
 
   handleAutocompleteClick = () => {
     const { inputElement } = this;
@@ -142,17 +147,19 @@ class AutocompleteBase extends Component<Props, State> {
   };
 
   onKeyDown = (event: SyntheticKeyboardEvent<>) => {
-
-    if ( // Check for backspace in order to delete the last selected option
+    if (
+      // Check for backspace in order to delete the last selected option
       event.keyCode === 8 &&
       !event.target.value &&
       this.state.selectedOptions.length
     ) {
       // Remove last selected option
       this.removeOption(this.state.selectedOptions.length - 1, event);
-    } else if (event.keyCode === 27) { // ESCAPE key: Stops propagation & modal closing
+    } else if (event.keyCode === 27) {
+      // ESCAPE key: Stops propagation & modal closing
       event.stopPropagation();
-    } else if (event.keyCode === 13) { // ENTER key: Opens suggestions
+    } else if (event.keyCode === 13) {
+      // ENTER key: Opens suggestions
       this.open();
     }
   };
@@ -173,18 +180,20 @@ class AutocompleteBase extends Component<Props, State> {
   ) => {
     const { maxSelections, multipleSameSelections } = this.props;
     const { selectedOptions, filteredOptions, isOpen } = this.state;
-    const canMoreOptionsBeSelected = (
-      maxSelections != null ? selectedOptions.length < maxSelections : true
-    );
-    const areFilteredOptionsAvailable = filteredOptions && filteredOptions.length > 0;
-
-    if (!maxSelections || (canMoreOptionsBeSelected && areFilteredOptionsAvailable)) {
+    const canMoreOptionsBeSelected =
+      maxSelections != null ? selectedOptions.length < maxSelections : true;
+    const areFilteredOptionsAvailable =
+      filteredOptions && filteredOptions.length > 0;
+
+    if (
+      !maxSelections ||
+      (canMoreOptionsBeSelected && areFilteredOptionsAvailable)
+    ) {
       if (!selectedOption) return;
       const option = selectedOption.trim();
-      const optionCanBeSelected = (
+      const optionCanBeSelected =
         (selectedOptions.indexOf(option) < 0 && !multipleSameSelections) ||
-        multipleSameSelections
-      );
+        multipleSameSelections;
 
       if (option && optionCanBeSelected && isOpen) {
         const newSelectedOptions = _.concat(selectedOptions, option);
@@ -329,7 +338,7 @@ class AutocompleteBase extends Component<Props, State> {
       inputValue: filteredValue,
       filteredOptions
     });
-  }
+  };
 }
 
 export const Autocomplete = withTheme(AutocompleteBase);
diff --git a/source/components/Bubble.js b/source/components/Bubble.js
index cb9d6f40..7f6b45b3 100644
--- a/source/components/Bubble.js
+++ b/source/components/Bubble.js
@@ -15,7 +15,7 @@ import type { ThemeContextProp } from './HOC/withTheme';
 export type BubblePosition = {
   width: number,
   positionX: number,
-  positionY: number,
+  positionY: number
 };
 
 export type BubbleProps = {
@@ -32,7 +32,7 @@ export type BubbleProps = {
   theme: ?Object, // takes precedence over them in context if passed
   themeId: string,
   themeOverrides: Object, // custom css/scss from user adhering to component's theme API
-  targetRef?: ElementRef<*>, // ref to the target DOM element used for positioning the bubble
+  targetRef?: ElementRef<*> // ref to the target DOM element used for positioning the bubble
 };
 
 type State = {
@@ -86,28 +86,23 @@ class BubbleBase extends Component<BubbleProps, State> {
     }, 0);
   }
 
-  componentWillReceiveProps(nextProps: BubbleProps) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
-  }
+  componentDidUpdate(prevProps: BubbleProps) {
+    const { isHidden } = this.props;
+    const didVisibilityChange = isHidden !== prevProps.isHidden;
+    const wasBubbleHidden = !prevProps.isHidden && isHidden;
 
-  componentWillUpdate(nextProps) {
-    const { isFloating } = this.props;
-    // Add listeners when the bubble
-    if (isFloating && !nextProps.isHidden && !this._hasEventListeners) {
+    if (prevProps.isFloating && !isHidden && !this._hasEventListeners) {
       this._handleScrollEventListener('add');
       addDocumentListeners(this._getDocumentEvents());
       window.addEventListener('resize', this._updatePosition);
       this._hasEventListeners = true;
     }
-  }
-
-  componentDidUpdate(prevProps) {
-    const { isHidden } = this.props;
-    const didVisibilityChange = isHidden !== prevProps.isHidden;
-    const wasBubbleHidden = !prevProps.isHidden && isHidden;
-
     if (wasBubbleHidden) this._removeAllEventListeners();
     if (didVisibilityChange) this._updatePosition();
+
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   componentWillUnmount() {
@@ -143,10 +138,15 @@ class BubbleBase extends Component<BubbleProps, State> {
   _getFirstScrollableParent = (element: ElementRef<*>) => {
     if (element == null) return null;
     const { rootElement } = this;
-    const node = {}.hasOwnProperty.call(element, 'current') ? element.current : element;
+    const node = {}.hasOwnProperty.call(element, 'current')
+      ? element.current
+      : element;
 
     if (rootElement) {
-      if (node === rootElement.current || node.scrollHeight <= node.clientHeight) {
+      if (
+        node === rootElement.current ||
+        node.scrollHeight <= node.clientHeight
+      ) {
         return this._getFirstScrollableParent(node.parentElement);
       }
     }
@@ -158,7 +158,8 @@ class BubbleBase extends Component<BubbleProps, State> {
     const { isOpeningUpward, targetRef } = this.props;
     const { rootElement } = this;
 
-    let target = targetRef && typeof targetRef !== 'string' ? targetRef.current : null;
+    let target =
+      targetRef && typeof targetRef !== 'string' ? targetRef.current : null;
 
     // Without a target, try to fallback to the parent node
     if (!target) {
@@ -195,13 +196,7 @@ class BubbleBase extends Component<BubbleProps, State> {
 
   render() {
     // destructuring props ensures only the "...rest" get passed down
-    const {
-      skin,
-      theme,
-      themeOverrides,
-      context,
-      ...rest
-    } = this.props;
+    const { skin, theme, themeOverrides, context, ...rest } = this.props;
 
     const BubbleSkin = skin || context.skins[IDENTIFIERS.BUBBLE];
 
diff --git a/source/components/Button.js b/source/components/Button.js
index 62932d74..7508ca70 100644
--- a/source/components/Button.js
+++ b/source/components/Button.js
@@ -52,19 +52,15 @@ class ButtonBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   render() {
     // destructuring props ensures only the "...rest" get passed down
-    const {
-      skin,
-      theme,
-      themeOverrides,
-      context,
-      ...rest
-    } = this.props;
+    const { skin, theme, themeOverrides, context, ...rest } = this.props;
 
     const ButtonSkin = skin || context.skins[IDENTIFIERS.BUTTON];
 
diff --git a/source/components/Checkbox.js b/source/components/Checkbox.js
index f2710465..5d8513d5 100644
--- a/source/components/Checkbox.js
+++ b/source/components/Checkbox.js
@@ -56,19 +56,15 @@ class CheckboxBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   render() {
     // destructuring props ensures only the "...rest" get passed down
-    const {
-      skin,
-      theme,
-      themeOverrides,
-      context,
-      ...rest
-    } = this.props;
+    const { skin, theme, themeOverrides, context, ...rest } = this.props;
 
     const CheckboxSkin = skin || context.skins[this.props.themeId];
 
diff --git a/source/components/Dropdown.js b/source/components/Dropdown.js
index 4fa9318a..d123c40c 100644
--- a/source/components/Dropdown.js
+++ b/source/components/Dropdown.js
@@ -27,14 +27,14 @@ type Props = {
   skin?: ComponentType<any>,
   theme: ?Object,
   themeId: string,
-  themeOverrides: Object,
+  themeOverrides: Object
 };
 
 type State = {
   composedTheme: Object,
   isMouseOverItems: boolean,
   isMouseOverRoot: boolean,
-  isOpen: boolean,
+  isOpen: boolean
 };
 
 class DropdownBase extends Component<Props, State> {
@@ -51,7 +51,7 @@ class DropdownBase extends Component<Props, State> {
     noArrow: false,
     theme: null,
     themeOverrides: {},
-    themeId: IDENTIFIERS.DROPDOWN,
+    themeId: IDENTIFIERS.DROPDOWN
   };
 
   constructor(props: Props) {
@@ -70,12 +70,14 @@ class DropdownBase extends Component<Props, State> {
       ),
       isMouseOverItems: false,
       isMouseOverRoot: false,
-      isOpen: false,
+      isOpen: false
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   componentWillUnmount() {
@@ -87,7 +89,9 @@ class DropdownBase extends Component<Props, State> {
   isOpen = () => {
     const { clickToOpen, isOpen } = this.props;
     const { isMouseOverItems, isMouseOverRoot } = this.state;
-    const isOpenBecauseOfHover = clickToOpen ? false : isMouseOverItems || isMouseOverRoot;
+    const isOpenBecauseOfHover = clickToOpen
+      ? false
+      : isMouseOverItems || isMouseOverRoot;
     return isOpen || this.state.isOpen || isOpenBecauseOfHover;
   };
 
diff --git a/source/components/FormField.js b/source/components/FormField.js
index 781649cd..e99950ae 100644
--- a/source/components/FormField.js
+++ b/source/components/FormField.js
@@ -54,8 +54,10 @@ class FormFieldBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   setError = (error: string) => this.setState({ error });
@@ -63,7 +65,8 @@ class FormFieldBase extends Component<Props, State> {
   focusChild = () => {
     const { inputRef } = this.props;
     if (inputRef && inputRef.current) {
-      if (typeof inputRef.current.focus === 'function') inputRef.current.focus();
+      if (typeof inputRef.current.focus === 'function')
+        inputRef.current.focus();
     }
   };
 
diff --git a/source/components/HOC/GlobalListeners.js b/source/components/HOC/GlobalListeners.js
index 39364694..1e651f36 100644
--- a/source/components/HOC/GlobalListeners.js
+++ b/source/components/HOC/GlobalListeners.js
@@ -44,26 +44,27 @@ export class GlobalListeners extends Component<Props, State> {
   }
 
   componentDidMount() {
-    if (this.props.optionsIsOpen) { return; }
+    if (this.props.optionsIsOpen) {
+      return;
+    }
     // adds scroll and resize event listeners for calculating Options max-height
     this._addCalculateMaxHeightListeners();
     // runs initial Options max-height calculation
     this._calculateOptionsMaxHeight();
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentDidUpdate(prevProps: Props) {
     const { optionsIsOpen } = this.props;
 
     // if Options is transferring from closed to open, add listeners
     // if Options is transferring from open to closed, remove listeners
-    if (!optionsIsOpen && nextProps.optionsIsOpen) {
+    if (!prevProps.optionsIsOpen && optionsIsOpen) {
       // first remove max-height calc handler on scroll and resize
       // then add toggle handler on scroll and resize
       this._removeGlobalListeners();
       addWindowListeners(this._getWindowListeners());
       addDocumentListeners(this._getDocumentListeners());
-
-    } else if (optionsIsOpen && !nextProps.optionsIsOpen) {
+    } else if (prevProps.optionsIsOpen && !optionsIsOpen) {
       // remove toggle handler on scroll and resize
       // then add calc max-height calc handler on scroll and resize
       this._removeGlobalListeners();
@@ -88,7 +89,9 @@ export class GlobalListeners extends Component<Props, State> {
     this._removeGlobalListeners();
 
     // before toggle, ensure options is open and optionsRef exists on DOM
-    if (!optionsIsOpen || !optionsRef || !optionsRef.current) { return; }
+    if (!optionsIsOpen || !optionsRef || !optionsRef.current) {
+      return;
+    }
     this.props.toggleOpen();
   };
 
@@ -105,11 +108,15 @@ export class GlobalListeners extends Component<Props, State> {
     const { optionsIsOpen, rootRef } = this.props;
 
     // ensure Options is open
-    if (!optionsIsOpen || !rootRef || !rootRef.current) { return; }
+    if (!optionsIsOpen || !rootRef || !rootRef.current) {
+      return;
+    }
 
     // return early if the user clicked an element within the parent component
     // for example, the parent component could be Autocomplete or Select
-    if (targetIsDescendant(event, rootRef.current)) { return; }
+    if (targetIsDescendant(event, rootRef.current)) {
+      return;
+    }
 
     // otherwise, remove all listeners and close Options
     this._removeListenersAndToggle();
@@ -120,8 +127,15 @@ export class GlobalListeners extends Component<Props, State> {
   _handleDocumentScroll = () => this._removeListenersAndToggle();
 
   _addCalculateMaxHeightListeners = () => {
-    const scrollListener = ['scroll', debounce(this._calculateOptionsMaxHeight, 300, { leading: true }), true];
-    const resizeListener = ['resize', debounce(this._calculateOptionsMaxHeight, 300)];
+    const scrollListener = [
+      'scroll',
+      debounce(this._calculateOptionsMaxHeight, 300, { leading: true }),
+      true
+    ];
+    const resizeListener = [
+      'resize',
+      debounce(this._calculateOptionsMaxHeight, 300)
+    ];
     document.addEventListener(...scrollListener);
     window.addEventListener(...resizeListener);
   };
@@ -137,13 +151,18 @@ export class GlobalListeners extends Component<Props, State> {
       optionsRef,
       toggleOpen,
       mouseIsOverOptions,
-      mouseIsOverRoot,
+      mouseIsOverRoot
     } = this.props;
 
     // checks if Options are open & being scrolled upon via mouse position prior to toggling closed
     const isOptionsInDOM = optionsRef && optionsRef.current;
     const doDocumentStylesExist = documentElement && documentElement.style;
-    if (!rootRef || !rootRef.current || !doDocumentStylesExist || !isOptionsInDOM) {
+    if (
+      !rootRef ||
+      !rootRef.current ||
+      !doDocumentStylesExist ||
+      !isOptionsInDOM
+    ) {
       return;
     }
     optionsIsOpen && !mouseIsOverOptions && !mouseIsOverRoot && toggleOpen();
diff --git a/source/components/Header.js b/source/components/Header.js
index 889f31dc..248aa44d 100644
--- a/source/components/Header.js
+++ b/source/components/Header.js
@@ -37,7 +37,7 @@ type Props = {
 
 type State = { composedTheme: Object };
 
-class HeaderBase extends Component <Props, State> {
+class HeaderBase extends Component<Props, State> {
   // define static properties
   static displayName = 'Header';
   static defaultProps = {
@@ -61,8 +61,10 @@ class HeaderBase extends Component <Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   _assembleInlineStyles = ({ center, lowerCase, left, right, upperCase }) => {
@@ -95,14 +97,18 @@ class HeaderBase extends Component <Props, State> {
 
   _getActiveFont = ({ light, medium, regular, thin, bold }) => {
     const fontProps = pickBy({ light, medium, regular, thin, bold });
-    if (isEmpty(fontProps)) { return; }
+    if (isEmpty(fontProps)) {
+      return;
+    }
     // returns the first active font if more than 1 is passed
     return Object.keys(fontProps)[0];
   };
 
   _getActiveTheme = ({ h1, h2, h3, h4 }) => {
     const themeProps = pickBy({ h1, h2, h3, h4 });
-    if (isEmpty(themeProps)) { return; }
+    if (isEmpty(themeProps)) {
+      return;
+    }
     // returns the first active theme if more than 1 is passed
     return Object.keys(themeProps)[0];
   };
@@ -112,10 +118,14 @@ class HeaderBase extends Component <Props, State> {
     const activeTheme = this._getActiveTheme(styleProps);
     const activeFont = this._getActiveFont(styleProps);
 
-    if (activeTheme) { return [...activeClasses, activeTheme]; }
-    if (activeFont) { return [...activeClasses, activeFont]; }
+    if (activeTheme) {
+      return [...activeClasses, activeTheme];
+    }
+    if (activeFont) {
+      return [...activeClasses, activeFont];
+    }
 
-    return [...activeClasses, activeTheme, activeFont].filter(val => val);
+    return [...activeClasses, activeTheme, activeFont].filter((val) => val);
   };
 
   render() {
diff --git a/source/components/InfiniteScroll.js b/source/components/InfiniteScroll.js
index 327911ea..ef9e7b92 100644
--- a/source/components/InfiniteScroll.js
+++ b/source/components/InfiniteScroll.js
@@ -68,35 +68,40 @@ class InfiniteScrollBase extends Component<Props, State> {
     };
   }
 
-  componentWillMount() {
-    this._handleFetchData();
-  }
-
   componentDidMount() {
     const { scrollContainer } = this;
+
+    this._handleFetchData();
     if (!scrollContainer.current) return;
     scrollContainer.current.addEventListener('scroll', this._handleScroll);
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   // calls user's fetchData function from props
-  _handleFetchData = () => this.props.fetchData(this.setState.bind(this))
+  _handleFetchData = () => this.props.fetchData(this.setState.bind(this));
 
   // scroll event listener attached to scrollContainer element
   _handleScroll = () => {
     const { error, isLoading, hasMoreData } = this.state;
 
     // return early for error, loading, or lack of future data
-    if (error || isLoading || !hasMoreData) { return; }
+    if (error || isLoading || !hasMoreData) {
+      return;
+    }
     return this._checkForScrollBottom();
   };
 
   // prevents new data fetch until user has scrolled near bottom of existing data
   _checkForScrollBottom = () => {
-    const { scrollContainer, props: { threshold } } = this;
+    const {
+      scrollContainer,
+      props: { threshold }
+    } = this;
     if (!scrollContainer.current) return;
     const { offsetHeight, scrollTop, scrollHeight } = scrollContainer.current;
 
@@ -105,29 +110,21 @@ class InfiniteScrollBase extends Component<Props, State> {
     }
   };
 
-  _isFunction = (renderProp: ?Function) => (renderProp && typeof renderProp === 'function')
+  _isFunction = (renderProp: ?Function) =>
+    renderProp && typeof renderProp === 'function';
 
   render() {
     const {
-      props: {
-        className,
-        context,
-        renderItems,
-        skin,
-        themeId
-      },
-      state: {
-        composedTheme,
-        data,
-        error,
-        hasMoreData,
-        isLoading
-      },
+      props: { className, context, renderItems, skin, themeId },
+      state: { composedTheme, data, error, hasMoreData, isLoading },
       scrollContainer
     } = this;
 
-    if (!this._isFunction(renderItems)) { return null; }
-    const InfiniteScrollSkin = skin || context.skins[IDENTIFIERS.INFINITE_SCROLL];
+    if (!this._isFunction(renderItems)) {
+      return null;
+    }
+    const InfiniteScrollSkin =
+      skin || context.skins[IDENTIFIERS.INFINITE_SCROLL];
 
     return (
       <InfiniteScrollSkin
diff --git a/source/components/Input.js b/source/components/Input.js
index 82cb674c..59e5d473 100644
--- a/source/components/Input.js
+++ b/source/components/Input.js
@@ -84,8 +84,10 @@ class InputBase extends Component<Props, State> {
     if (this.props.autoFocus) this.focus();
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   onChange = (event: SyntheticInputEvent<Element<'input'>>) => {
diff --git a/source/components/Link.js b/source/components/Link.js
index d3801660..82f52326 100644
--- a/source/components/Link.js
+++ b/source/components/Link.js
@@ -22,7 +22,7 @@ type Props = {
   skin?: ComponentType<any>,
   theme: ?Object, // will take precedence over theme in context if passed
   themeId: string,
-  themeOverrides: Object,
+  themeOverrides: Object
 };
 
 type State = {
@@ -40,7 +40,7 @@ class LinkBase extends Component<Props, State> {
     hasIconBefore: false,
     hasIconAfter: true,
     isUnderlined: true,
-    underlineOnHover: false,
+    underlineOnHover: false
   };
 
   constructor(props: Props) {
@@ -57,19 +57,15 @@ class LinkBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   render() {
     // destructuring props ensures only the "...rest" get passed down
-    const {
-      skin,
-      theme,
-      themeOverrides,
-      context,
-      ...rest
-    } = this.props;
+    const { skin, theme, themeOverrides, context, ...rest } = this.props;
 
     const LinkSkin = skin || context.skins[this.props.themeId];
 
diff --git a/source/components/LoadingSpinner.js b/source/components/LoadingSpinner.js
index af503803..58717a42 100644
--- a/source/components/LoadingSpinner.js
+++ b/source/components/LoadingSpinner.js
@@ -51,21 +51,18 @@ class LoadingSpinnerBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   render() {
     // destructuring props ensures only the "...rest" get passed down
-    const {
-      skin,
-      theme,
-      themeOverrides,
-      context,
-      ...rest
-    } = this.props;
+    const { skin, theme, themeOverrides, context, ...rest } = this.props;
 
-    const LoadingSpinnerSkin = skin || context.skins[IDENTIFIERS.LOADING_SPINNER];
+    const LoadingSpinnerSkin =
+      skin || context.skins[IDENTIFIERS.LOADING_SPINNER];
 
     return <LoadingSpinnerSkin theme={this.state.composedTheme} {...rest} />;
   }
diff --git a/source/components/Modal.js b/source/components/Modal.js
index 9a2b5650..41388b86 100644
--- a/source/components/Modal.js
+++ b/source/components/Modal.js
@@ -53,19 +53,15 @@ class ModalBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   render() {
     // destructuring props ensures only the "...rest" get passed down
-    const {
-      skin,
-      theme,
-      themeOverrides,
-      context,
-      ...rest
-    } = this.props;
+    const { skin, theme, themeOverrides, context, ...rest } = this.props;
 
     const ModalSkin = skin || context.skins[IDENTIFIERS.MODAL];
 
diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 5d358fe6..6ad41432 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -1,7 +1,12 @@
 // @flow
 import React, { Component } from 'react';
 // $FlowFixMe
-import type { ComponentType, SyntheticInputEvent, Element, ElementRef } from 'react';
+import type {
+  ComponentType,
+  SyntheticInputEvent,
+  Element,
+  ElementRef
+} from 'react';
 
 // external libraries
 import createRef from 'create-react-ref/lib/createRef';
@@ -18,12 +23,12 @@ import type { InputEvent } from '../utils/types';
 
 type NumberFormatOptions = {
   groupSeparator: string,
-  decimalSeparator: string,
+  decimalSeparator: string
 };
 
 const DEFAULT_NUMBER_FORMAT = {
   groupSeparator: ',',
-  decimalSeparator: '.',
+  decimalSeparator: '.'
 };
 
 export type NumericInputProps = {
@@ -45,21 +50,20 @@ export type NumericInputProps = {
   theme: ?Object,
   themeId: string,
   themeOverrides: Object,
-  value: ?number,
+  value: ?number
 };
 
 type State = {
   composedTheme: Object,
   minimumFractionDigits: number,
   inputCaretPosition: number,
-  fallbackInputValue: ?string,
+  fallbackInputValue: ?string
 };
 
 // Always use known number format and transform it where necessary
 const LOCALE = 'en-US';
 
 class NumericInputBase extends Component<NumericInputProps, State> {
-
   inputElement: { current: null | ElementRef<'input'> };
   _hasInputBeenChanged: boolean = false;
 
@@ -73,16 +77,22 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     theme: null,
     themeId: IDENTIFIERS.INPUT,
     themeOverrides: {},
-    value: null,
+    value: null
   };
 
   constructor(props: NumericInputProps) {
     super(props);
-    const { context, numberLocaleOptions, themeId, theme, themeOverrides } = props;
+    const {
+      context,
+      numberLocaleOptions,
+      themeId,
+      theme,
+      themeOverrides
+    } = props;
     this.inputElement = createRef();
-    const minimumFractionDigits = (
-      numberLocaleOptions ? numberLocaleOptions.minimumFractionDigits : 0
-    );
+    const minimumFractionDigits = numberLocaleOptions
+      ? numberLocaleOptions.minimumFractionDigits
+      : 0;
     this.state = {
       composedTheme: composeTheme(
         addThemeId(theme || context.theme, themeId),
@@ -91,7 +101,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       ),
       minimumFractionDigits: minimumFractionDigits || 0,
       inputCaretPosition: 0,
-      fallbackInputValue: null,
+      fallbackInputValue: null
     };
   }
 
@@ -108,25 +118,31 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     }
   }
 
-  componentWillReceiveProps(nextProps: NumericInputProps) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
-  }
-
   componentDidUpdate(prevProps: NumericInputProps, prevState: State) {
     const { value } = this.props;
     const { inputCaretPosition } = this.state;
     const hasValueBeenChanged = value !== prevProps.value;
-    const hasCaretBeenChanged = inputCaretPosition !== prevState.inputCaretPosition;
-    if (this._hasInputBeenChanged || hasValueBeenChanged || hasCaretBeenChanged) {
+    const hasCaretBeenChanged =
+      inputCaretPosition !== prevState.inputCaretPosition;
+    if (
+      this._hasInputBeenChanged ||
+      hasValueBeenChanged ||
+      hasCaretBeenChanged
+    ) {
       this.setInputCaretPosition(inputCaretPosition);
     }
     this._hasInputBeenChanged = false;
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   onChange = (event: SyntheticInputEvent<Element<'input'>>) => {
     event.preventDefault();
     const { value, onChange, disabled } = this.props;
-    if (disabled) { return; }
+    if (disabled) {
+      return;
+    }
     const result = this.processValueChange(event.nativeEvent);
     if (result) {
       this._hasInputBeenChanged = true;
@@ -137,7 +153,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       this.setState({
         inputCaretPosition: result.caretPosition,
         minimumFractionDigits: result.minimumFractionDigits,
-        fallbackInputValue: result.fallbackInputValue,
+        fallbackInputValue: result.fallbackInputValue
       });
     }
   };
@@ -147,16 +163,20 @@ class NumericInputBase extends Component<NumericInputProps, State> {
    * 2. Clean the given value
    * 3. Final processing
    */
-  processValueChange(event: InputEvent): ?{
+  processValueChange(
+    event: InputEvent
+  ): ?{
     value: ?number,
     caretPosition: number,
     fallbackInputValue?: ?string,
-    minimumFractionDigits: number,
+    minimumFractionDigits: number
   } {
     const { numberFormat, value, allowSigns } = this.props;
     const changedCaretPosition = event.target.selectionStart;
     const valueToProcess = transformNumberFormat(
-      event.target.value, numberFormat, DEFAULT_NUMBER_FORMAT
+      event.target.value,
+      numberFormat,
+      DEFAULT_NUMBER_FORMAT
     );
     const { inputType } = event;
     const fallbackInputValue = this.state.fallbackInputValue || '';
@@ -167,7 +187,9 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     const deleteCaretCorrection = isBackwardDelete ? 0 : 1;
     const validInputSignsRegExp = new RegExp(`^([-])?([0-9,.]+)?$`); // eslint-disable-line
     const validInputNoSignsRegExp = new RegExp(`^([0-9,.]+)?$`); // eslint-disable-line
-    const validInputRegex = allowSigns ? validInputSignsRegExp : validInputNoSignsRegExp;
+    const validInputRegex = allowSigns
+      ? validInputSignsRegExp
+      : validInputNoSignsRegExp;
     const valueHasLeadingZero = /^0[1-9]/.test(valueToProcess);
 
     /**
@@ -179,7 +201,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
         caretPosition: changedCaretPosition - 1,
         fallbackInputValue,
         minimumFractionDigits: this.state.minimumFractionDigits,
-        value,
+        value
       };
     }
 
@@ -189,7 +211,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
         value: null,
         caretPosition: 0,
         fallbackInputValue: null,
-        minimumFractionDigits: 0,
+        minimumFractionDigits: 0
       };
     }
 
@@ -202,7 +224,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
         value: null,
         caretPosition: 1,
         fallbackInputValue: '-',
-        minimumFractionDigits: 0,
+        minimumFractionDigits: 0
       };
     }
 
@@ -217,9 +239,10 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
     // Current value
     const currentNumber = value;
-    const currentValue = (
-      value != null ? value.toLocaleString(LOCALE, numberLocaleOptions) : fallbackInputValue
-    );
+    const currentValue =
+      value != null
+        ? value.toLocaleString(LOCALE, numberLocaleOptions)
+        : fallbackInputValue;
     const currentNumberOfDots = getNumberOfDots(currentValue);
     const hadDotBefore = currentNumberOfDots > 0;
 
@@ -248,7 +271,8 @@ class NumericInputBase extends Component<NumericInputProps, State> {
      */
     const numberOfFractionDigits = getFractionDigits(newValue).length;
     const dynamicMinimumFractionDigits = Math.min(
-      Math.max(propsMinimumFractionDigits, numberOfFractionDigits), maximumFractionDigits
+      Math.max(propsMinimumFractionDigits, numberOfFractionDigits),
+      maximumFractionDigits
     );
     const newNumber = getValueAsNumber(newValue, maximumFractionDigits);
 
@@ -259,7 +283,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
         value: 0,
         caretPosition: 2,
         fallbackInputValue: hasMinFractions ? null : '0.',
-        minimumFractionDigits: dynamicMinimumFractionDigits,
+        minimumFractionDigits: dynamicMinimumFractionDigits
       };
     }
 
@@ -269,7 +293,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       return {
         value: newNumber,
         caretPosition: newCaretPos,
-        minimumFractionDigits: dynamicMinimumFractionDigits,
+        minimumFractionDigits: dynamicMinimumFractionDigits
       };
     }
 
@@ -278,15 +302,17 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       const deleteAdjustment = isBackwardDelete ? 0 : 1; // special cases when deleting dot
       const insertAdjustment = -1; // don't move caret if numbers are "inserted"
       return {
-        caretPosition: changedCaretPosition + (isDeletion ? deleteAdjustment : insertAdjustment),
+        caretPosition:
+          changedCaretPosition +
+          (isDeletion ? deleteAdjustment : insertAdjustment),
         fallbackInputValue,
         minimumFractionDigits: dynamicMinimumFractionDigits,
-        value: currentNumber,
+        value: currentNumber
       };
     }
 
     const localizedNewNumber = newNumber.toLocaleString(LOCALE, {
-      minimumFractionDigits: dynamicMinimumFractionDigits,
+      minimumFractionDigits: dynamicMinimumFractionDigits
     });
 
     // Case: Dot was added at the end of number
@@ -294,12 +320,9 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       return {
         value: newNumber,
         caretPosition: changedCaretPosition,
-        fallbackInputValue: (
-          propsMinimumFractionDigits > 0
-            ? null
-            : localizedNewNumber + '.'
-        ),
-        minimumFractionDigits: 0,
+        fallbackInputValue:
+          propsMinimumFractionDigits > 0 ? null : localizedNewNumber + '.',
+        minimumFractionDigits: 0
       };
     }
 
@@ -311,24 +334,25 @@ class NumericInputBase extends Component<NumericInputProps, State> {
         caretPosition: newCaretPosition + deleteCaretCorrection,
         fallbackInputValue: null,
         minimumFractionDigits: dynamicMinimumFractionDigits,
-        value: currentNumber,
+        value: currentNumber
       };
     }
 
     // Case: Valid change has been made
     const hasNumberChanged = value !== newNumber;
-    const commasDiff = getNumberOfCommas(localizedNewNumber) - getNumberOfCommas(newValue);
+    const commasDiff =
+      getNumberOfCommas(localizedNewNumber) - getNumberOfCommas(newValue);
     const haveCommasChanged = commasDiff > 0;
     const onlyCommasChanged = !hasNumberChanged && haveCommasChanged;
     const leadingZeroCorrection = valueHasLeadingZero ? -1 : 0;
-    const caretCorrection = (
-      onlyCommasChanged ? deleteCaretCorrection : commasDiff
-    ) + leadingZeroCorrection;
+    const caretCorrection =
+      (onlyCommasChanged ? deleteCaretCorrection : commasDiff) +
+      leadingZeroCorrection;
     return {
       caretPosition: Math.max(newCaretPosition + caretCorrection, 0),
       fallbackInputValue: null,
       minimumFractionDigits: dynamicMinimumFractionDigits,
-      value: newNumber,
+      value: newNumber
     };
   }
 
@@ -345,26 +369,34 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
   getDynamicMinimumFractionDigits(): number {
     const minimumFractionDigitsProp = this.getMinimumFractionDigits();
-    return Math.max(this.state.minimumFractionDigits, minimumFractionDigitsProp || 0);
+    return Math.max(
+      this.state.minimumFractionDigits,
+      minimumFractionDigitsProp || 0
+    );
   }
 
   getMaximumFractionDigits(): number {
     const { numberLocaleOptions } = this.props;
     const minimumFractionDigits = this.getDynamicMinimumFractionDigits();
-    const maximumFractionDigits = (
+    const maximumFractionDigits =
       numberLocaleOptions && numberLocaleOptions.maximumFractionDigits != null
-    ) ? numberLocaleOptions.maximumFractionDigits : 3;
+        ? numberLocaleOptions.maximumFractionDigits
+        : 3;
     return Math.max(minimumFractionDigits, maximumFractionDigits);
   }
 
   getDynamicLocaleOptions(): Number$LocaleOptions {
     return Object.assign({}, this.props.numberLocaleOptions, {
-      minimumFractionDigits: this.getDynamicMinimumFractionDigits(),
+      minimumFractionDigits: this.getDynamicMinimumFractionDigits()
     });
   }
 
   getLocalizedNumber(value: ?number) {
-    return convertNumberToLocalizedString(value, LOCALE, this.getDynamicLocaleOptions());
+    return convertNumberToLocalizedString(
+      value,
+      LOCALE,
+      this.getDynamicLocaleOptions()
+    );
   }
 
   setInputCaretPosition = (position: number) => {
@@ -383,7 +415,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
   onBlur = () => {
     this.setState({
-      fallbackInputValue: null,
+      fallbackInputValue: null
     });
   };
 
@@ -404,9 +436,9 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     const InputSkin = skin || context.skins[IDENTIFIERS.INPUT];
 
     const localizedInput = value != null ? this.getLocalizedNumber(value) : '';
-    const inputValue = this.state.fallbackInputValue ?
-      this.state.fallbackInputValue :
-      localizedInput;
+    const inputValue = this.state.fallbackInputValue
+      ? this.state.fallbackInputValue
+      : localizedInput;
 
     return (
       <InputSkin
@@ -414,7 +446,11 @@ class NumericInputBase extends Component<NumericInputProps, State> {
         inputRef={this.inputElement}
         onChange={this.onChange}
         theme={this.state.composedTheme}
-        value={transformNumberFormat(inputValue, DEFAULT_NUMBER_FORMAT, this.props.numberFormat)}
+        value={transformNumberFormat(
+          inputValue,
+          DEFAULT_NUMBER_FORMAT,
+          this.props.numberFormat
+        )}
         onBlur={this.onBlur}
         {...rest}
       />
@@ -428,20 +464,28 @@ export const NumericInput = withTheme(NumericInputBase);
 
 const NUMERIC_INPUT_REGEX = /^([-])?([0-9,]+)?(\.([0-9]+)?)?$/;
 
-const isValidNumericInput = (value: string): boolean => NUMERIC_INPUT_REGEX.test(value);
+const isValidNumericInput = (value: string): boolean =>
+  NUMERIC_INPUT_REGEX.test(value);
 
-const isParsableNumberString = (value: string, requiredPrecision: number): boolean => (
+const isParsableNumberString = (
+  value: string,
+  requiredPrecision: number
+): boolean =>
   // The number of digits is limited in Javascript - so the required precision influence
   // the possible number of integer digits (only 15 digits can be safely represented in total)
-  parseFloat(value) >= (Number.MIN_SAFE_INTEGER / 10 ** (requiredPrecision + 1)) &&
-  parseFloat(value) <= (Number.MAX_SAFE_INTEGER / 10 ** (requiredPrecision + 1)) &&
+  parseFloat(value) >=
+    Number.MIN_SAFE_INTEGER / 10 ** (requiredPrecision + 1) &&
+  parseFloat(value) <=
+    Number.MAX_SAFE_INTEGER / 10 ** (requiredPrecision + 1) &&
   !isNaN(parseFloat(value)) &&
-  isFinite(value)
-);
+  isFinite(value);
 
 const removeCommas = (value: string): string => value.replace(/,/g, '');
 
-function parseStringToNumber(value: string, requiredPrecision: number): ?number {
+function parseStringToNumber(
+  value: string,
+  requiredPrecision: number
+): ?number {
   const cleanedValue = removeCommas(value);
   if (!isValidNumericInput(cleanedValue)) return null;
   if (!isParsableNumberString(cleanedValue, requiredPrecision)) return null;
@@ -449,13 +493,20 @@ function parseStringToNumber(value: string, requiredPrecision: number): ?number
 }
 
 function convertNumberToLocalizedString(
-  num: ?number, locale: string, options?: Number$LocaleOptions
+  num: ?number,
+  locale: string,
+  options?: Number$LocaleOptions
 ): string {
   return num != null ? num.toLocaleString(locale, options) : '';
 }
 
-function getValueAsNumber(value: string | number, requiredPrecision: number): ?number {
-  return typeof value === 'string' ? parseStringToNumber(value, requiredPrecision) : value;
+function getValueAsNumber(
+  value: string | number,
+  requiredPrecision: number
+): ?number {
+  return typeof value === 'string'
+    ? parseStringToNumber(value, requiredPrecision)
+    : value;
 }
 
 function getNumberOfCommas(value: string): number {
@@ -466,13 +517,19 @@ function getNumberOfDots(value: string): number {
   return (value.match(/\./g) || []).length;
 }
 
-function getIntegerDigits(value: string, decimalSeparator: string = '.'): string {
+function getIntegerDigits(
+  value: string,
+  decimalSeparator: string = '.'
+): string {
   const fractionSeparatorIndex = value.indexOf(decimalSeparator);
   if (fractionSeparatorIndex === -1) return value;
   return value.substring(0, fractionSeparatorIndex);
 }
 
-function getFractionDigits(value: string, decimalSeparator: string = '.'): string {
+function getFractionDigits(
+  value: string,
+  decimalSeparator: string = '.'
+): string {
   const fractionSeparatorIndex = value.indexOf(decimalSeparator);
   if (fractionSeparatorIndex === -1) return '';
   return value.substring(fractionSeparatorIndex + 1);
@@ -486,13 +543,13 @@ function truncateToPrecision(value: string, precision: number): string {
 }
 
 function transformNumberFormat(
-  value: string, inputFormat: NumberFormatOptions, outputFormat: NumberFormatOptions
+  value: string,
+  inputFormat: NumberFormatOptions,
+  outputFormat: NumberFormatOptions
 ) {
-  return (
-    value
-      .replace(new RegExp('\\' + inputFormat.groupSeparator, 'g'), '#')
-      .replace(new RegExp('\\' + inputFormat.decimalSeparator, 'g'), '@')
-      .replace(new RegExp('#', 'g'), outputFormat.groupSeparator)
-      .replace(new RegExp('@', 'g'), outputFormat.decimalSeparator)
-  );
+  return value
+    .replace(new RegExp('\\' + inputFormat.groupSeparator, 'g'), '#')
+    .replace(new RegExp('\\' + inputFormat.decimalSeparator, 'g'), '@')
+    .replace(new RegExp('#', 'g'), outputFormat.groupSeparator)
+    .replace(new RegExp('@', 'g'), outputFormat.decimalSeparator);
 }
diff --git a/source/components/Options.js b/source/components/Options.js
index 136f751f..024a6aa6 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -9,7 +9,7 @@ import type {
   // $FlowFixMe
   SyntheticEvent,
   Element,
-  ElementRef,
+  ElementRef
 } from 'react';
 
 // internal utility functions
@@ -56,7 +56,7 @@ type Props = {
 type State = {
   composedTheme: Object,
   highlightedOptionIndex: number,
-  isMouseOverOptions: boolean,
+  isMouseOverOptions: boolean
 };
 
 class OptionsBase extends Component<Props, State> {
@@ -93,7 +93,7 @@ class OptionsBase extends Component<Props, State> {
         context.ROOT_THEME_API
       ),
       highlightedOptionIndex: 0,
-      isMouseOverOptions: false,
+      isMouseOverOptions: false
     };
   }
 
@@ -103,13 +103,15 @@ class OptionsBase extends Component<Props, State> {
     }
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    if (!this.props.isOpen && nextProps.isOpen) {
-      document.addEventListener('keydown', this._handleKeyDown, false);
-    } else if (this.props.isOpen && !nextProps.isOpen) {
-      document.removeEventListener('keydown', this._handleKeyDown, false);
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      if (!prevProps.isOpen && this.props.isOpen) {
+        document.addEventListener('keydown', this._handleKeyDown, false);
+      } else if (prevProps.isOpen && !this.props.isOpen) {
+        document.removeEventListener('keydown', this._handleKeyDown, false);
+      }
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
     }
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
   }
 
   componentWillUnmount() {
@@ -120,7 +122,9 @@ class OptionsBase extends Component<Props, State> {
     const { isOpen, onClose, resetOnClose, toggleOpen } = this.props;
     if (isOpen && toggleOpen) toggleOpen();
     this.setState({
-      highlightedOptionIndex: resetOnClose ? 0 : this.state.highlightedOptionIndex
+      highlightedOptionIndex: resetOnClose
+        ? 0
+        : this.state.highlightedOptionIndex
     });
     if (onClose) onClose();
   };
@@ -151,12 +155,15 @@ class OptionsBase extends Component<Props, State> {
 
   isSelectedOption = (optionIndex: number) => {
     const { options, isOpeningUpward } = this.props;
-    const index = isOpeningUpward ? options.length - 1 - optionIndex : optionIndex;
+    const index = isOpeningUpward
+      ? options.length - 1 - optionIndex
+      : optionIndex;
     const option = options[index];
     return option && this.props.selectedOption === option;
   };
 
-  isHighlightedOption = (optionIndex: number) => this.state.highlightedOptionIndex === optionIndex;
+  isHighlightedOption = (optionIndex: number) =>
+    this.state.highlightedOptionIndex === optionIndex;
 
   isDisabledOption = (optionIndex: number) => {
     const { options } = this.props;
@@ -284,14 +291,17 @@ class OptionsBase extends Component<Props, State> {
 
   _setMouseIsOverOptions = (isMouseOverOptions: boolean) => {
     const { toggleMouseLocation, setMouseIsOverOptions } = this.props;
-    if (this.state.isMouseOverOptions !== isMouseOverOptions && toggleMouseLocation) {
+    if (
+      this.state.isMouseOverOptions !== isMouseOverOptions &&
+      toggleMouseLocation
+    ) {
       toggleMouseLocation();
     }
     if (setMouseIsOverOptions) {
       setMouseIsOverOptions(isMouseOverOptions);
     }
     this.setState({
-      isMouseOverOptions,
+      isMouseOverOptions
     });
   };
 
diff --git a/source/components/ProgressBar.js b/source/components/ProgressBar.js
index ecdfcb9b..411e962e 100644
--- a/source/components/ProgressBar.js
+++ b/source/components/ProgressBar.js
@@ -50,19 +50,15 @@ class ProgressBarBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   render() {
     // destructuring props ensures only the "...rest" get passed down
-    const {
-      skin,
-      theme,
-      themeOverrides,
-      context,
-      ...rest
-    } = this.props;
+    const { skin, theme, themeOverrides, context, ...rest } = this.props;
 
     const ProgressBarSkin = skin || context.skins[IDENTIFIERS.PROGRESS_BAR];
 
diff --git a/source/components/Radio.js b/source/components/Radio.js
index 1bd7e60b..5b19bb36 100644
--- a/source/components/Radio.js
+++ b/source/components/Radio.js
@@ -53,19 +53,15 @@ class RadioBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   render() {
     // destructuring props ensures only the "...rest" get passed down
-    const {
-      skin,
-      theme,
-      themeOverrides,
-      context,
-      ...rest
-    } = this.props;
+    const { skin, theme, themeOverrides, context, ...rest } = this.props;
 
     const RadioSkin = skin || context.skins[IDENTIFIERS.RADIO];
 
diff --git a/source/components/ScrollBar.js b/source/components/ScrollBar.js
index 2ae3071d..114b5671 100644
--- a/source/components/ScrollBar.js
+++ b/source/components/ScrollBar.js
@@ -47,19 +47,15 @@ class ScrollBarBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   render() {
     // destructuring props ensures only the "...rest" get passed down
-    const {
-      skin,
-      theme,
-      themeOverrides,
-      context,
-      ...rest
-    } = this.props;
+    const { skin, theme, themeOverrides, context, ...rest } = this.props;
 
     const ScrollBarSkin = skin || context.skins[IDENTIFIERS.SCROLLBAR];
 
diff --git a/source/components/Select.js b/source/components/Select.js
index 3f15cecd..661d5132 100644
--- a/source/components/Select.js
+++ b/source/components/Select.js
@@ -34,13 +34,13 @@ type Props = {
   themeId: string,
   themeOverrides: Object,
   value: string,
-  optionHeight?: number,
+  optionHeight?: number
 };
 
 type State = {
   composedTheme: Object,
   isOpen: boolean,
-  mouseIsOverOptions: boolean,
+  mouseIsOverOptions: boolean
 };
 
 class SelectBase extends Component<Props, State> {
@@ -80,7 +80,7 @@ class SelectBase extends Component<Props, State> {
         context.ROOT_THEME_API
       ),
       isOpen: false,
-      mouseIsOverOptions: false,
+      mouseIsOverOptions: false
     };
   }
 
@@ -91,8 +91,10 @@ class SelectBase extends Component<Props, State> {
     }
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   // ========= PUBLIC SKIN API =========
@@ -102,23 +104,29 @@ class SelectBase extends Component<Props, State> {
   focus = () => this.toggleOpen();
 
   toggleOpen = () => {
-    if (this.state.isOpen && this.optionsElement && this.optionsElement.current) {
+    if (
+      this.state.isOpen &&
+      this.optionsElement &&
+      this.optionsElement.current
+    ) {
       // set Options scroll position to top on close
       this.optionsElement.current.scrollTop = 0;
     }
     this.setState({ isOpen: !this.state.isOpen });
   };
 
-  toggleMouseLocation = () => (
-    this.setState({ mouseIsOverOptions: !this.state.mouseIsOverOptions })
-  );
+  toggleMouseLocation = () =>
+    this.setState({ mouseIsOverOptions: !this.state.mouseIsOverOptions });
 
   handleInputClick = (event: SyntheticMouseEvent<>) => {
     event.stopPropagation();
     event.preventDefault();
 
     const { inputElement } = this;
-    if (inputElement.current && document.activeElement === inputElement.current) {
+    if (
+      inputElement.current &&
+      document.activeElement === inputElement.current
+    ) {
       inputElement.current.blur();
     }
     this.toggleOpen();
diff --git a/source/components/Stepper.js b/source/components/Stepper.js
index a8718cde..d053c86c 100644
--- a/source/components/Stepper.js
+++ b/source/components/Stepper.js
@@ -21,7 +21,7 @@ type Props = {
   steps: Array<string>,
   theme: ?Object, // will take precedence over theme in context if passed
   themeId: string,
-  themeOverrides: Object,
+  themeOverrides: Object
 };
 
 type State = {
@@ -52,19 +52,15 @@ class StepperBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   render() {
     // destructuring props ensures only the "...rest" get passed down
-    const {
-      skin,
-      theme,
-      themeOverrides,
-      context,
-      ...rest
-    } = this.props;
+    const { skin, theme, themeOverrides, context, ...rest } = this.props;
 
     const StepperSkin = skin || context.skins[this.props.themeId];
 
diff --git a/source/components/TextArea.js b/source/components/TextArea.js
index 8fd9ea39..1fd7bef6 100644
--- a/source/components/TextArea.js
+++ b/source/components/TextArea.js
@@ -83,21 +83,23 @@ class TextAreaBase extends Component<Props, State> {
       this._handleAutoresize();
     }
 
-    if (autoFocus) { this.focus(); }
-  }
-
-  componentWillReceiveProps(nextProps: Props) {
-    if (!this.props.autoResize && nextProps.autoResize) {
-      window.addEventListener('resize', this._handleAutoresize);
-    } else if (this.props.autoResize && !nextProps.autoResize) {
-      window.removeEventListener('resize', this._handleAutoresize);
+    if (autoFocus) {
+      this.focus();
     }
-
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: Props) {
     if (this.props.autoResize) this._handleAutoresize();
+
+    if (prevProps !== this.props) {
+      if (!prevProps.autoResize && this.props.autoResize) {
+        window.addEventListener('resize', this._handleAutoresize);
+      } else if (prevProps.autoResize && !this.props.autoResize) {
+        window.removeEventListener('resize', this._handleAutoresize);
+      }
+
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   componentWillUnmount() {
@@ -170,8 +172,9 @@ class TextAreaBase extends Component<Props, State> {
 
     // resize the input to its content size
     textareaElement.current.style.height = 'auto';
-    textareaElement.current.style.height = `${textareaElement.current.scrollHeight +
-      heightOffset}px`;
+    textareaElement.current.style.height = `${
+      textareaElement.current.scrollHeight + heightOffset
+    }px`;
   }
 
   render() {
diff --git a/source/components/ThemeProvider.js b/source/components/ThemeProvider.js
index 84d1efe5..e13df6df 100644
--- a/source/components/ThemeProvider.js
+++ b/source/components/ThemeProvider.js
@@ -24,7 +24,7 @@ type Props = {
 };
 
 type State = {
-  theme: Object,
+  theme: Object
 };
 
 export class ThemeProvider extends Component<Props, State> {
@@ -46,13 +46,16 @@ export class ThemeProvider extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentDidUpdate(prevProps: Props) {
+    const { theme: prevTheme, themeOverrides: prevThemeOverrides } = prevProps;
     const { theme, themeOverrides } = this.props;
-    const { theme: nextTheme, themeOverrides: nextOverrides } = nextProps;
 
-    if (!isEqual(theme, nextTheme) || !isEqual(themeOverrides, nextOverrides)) {
+    if (
+      !isEqual(prevTheme, theme) ||
+      !isEqual(prevThemeOverrides, themeOverrides)
+    ) {
       this.setState(() => ({
-        theme: this._composeLibraryTheme(nextTheme, nextOverrides)
+        theme: this._composeLibraryTheme(theme, themeOverrides)
       }));
     }
   }
@@ -70,7 +73,9 @@ export class ThemeProvider extends Component<Props, State> {
   //  }
   _composeLibraryTheme = (theme: Object, themeOverrides: Object) => {
     // if themeOverrides is empty, no need for composition
-    if (isEmpty(themeOverrides)) { return theme; }
+    if (isEmpty(themeOverrides)) {
+      return theme;
+    }
 
     // final object to be returned
     const composedTheme = {};
@@ -78,7 +83,6 @@ export class ThemeProvider extends Component<Props, State> {
     for (const componentName in ROOT_THEME_API) {
       // check if ROOT_THEME_API contains the key of componentName
       if (hasProperty(ROOT_THEME_API, componentName)) {
-
         // check if theme contains a key of componentName
         if (hasProperty(theme, componentName)) {
           // add componentName as a key to final return obj
@@ -105,7 +109,9 @@ export class ThemeProvider extends Component<Props, State> {
     componentThemeAPI: Object
   ) => {
     // Return componentTheme if there are no overrides provided
-    if (isEmpty(componentThemeOverrides)) { return componentTheme; }
+    if (isEmpty(componentThemeOverrides)) {
+      return componentTheme;
+    }
 
     // final composed theme obj to be returned at end
     const composedComponentTheme = cloneDeep(componentThemeAPI);
@@ -113,16 +119,24 @@ export class ThemeProvider extends Component<Props, State> {
     for (const className in componentThemeAPI) {
       if (hasProperty(componentThemeAPI, className)) {
         if (hasProperty(componentTheme, className)) {
-          appendToProperty(composedComponentTheme, className, componentTheme[className]);
+          appendToProperty(
+            composedComponentTheme,
+            className,
+            componentTheme[className]
+          );
         }
 
         if (hasProperty(componentThemeOverrides, className)) {
-          appendToProperty(composedComponentTheme, className, componentThemeOverrides[className]);
+          appendToProperty(
+            composedComponentTheme,
+            className,
+            componentThemeOverrides[className]
+          );
         }
       }
     }
     return composedComponentTheme;
-  }
+  };
 
   render() {
     const { theme } = this.state;
diff --git a/source/components/Tooltip.js b/source/components/Tooltip.js
index 88e62b16..6f01f472 100644
--- a/source/components/Tooltip.js
+++ b/source/components/Tooltip.js
@@ -62,8 +62,10 @@ class TooltipBase extends Component<TooltipProps, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: TooltipProps) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: TooltipProps) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   render() {
diff --git a/source/components/layout/Flex.js b/source/components/layout/Flex.js
index 0aac5550..d7464ad5 100644
--- a/source/components/layout/Flex.js
+++ b/source/components/layout/Flex.js
@@ -8,7 +8,11 @@ import { Base } from './Base';
 
 // utilities
 import { createEmptyContext, withTheme } from '../HOC/withTheme';
-import { composeTheme, addThemeId, didThemePropsChange } from '../../utils/themes';
+import {
+  composeTheme,
+  addThemeId,
+  didThemePropsChange
+} from '../../utils/themes';
 
 // constants
 import { IDENTIFIERS } from '..';
@@ -56,14 +60,22 @@ class FlexBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   _getActiveClasses = ({ center, column, columnReverse, row, rowReverse }) => {
     const activeClasses = ['container'];
-    const activeProps = pickBy({ center, column, columnReverse, row, rowReverse });
-    return [...activeClasses, ...Object.keys(activeProps)].filter(val => val);
+    const activeProps = pickBy({
+      center,
+      column,
+      columnReverse,
+      row,
+      rowReverse
+    });
+    return [...activeClasses, ...Object.keys(activeProps)].filter((val) => val);
   };
 
   _assembleFlexTheme = (activeClasses: Array<string>) => {
@@ -78,7 +90,7 @@ class FlexBase extends Component<Props, State> {
   };
 
   renderChildren(theme: Object) {
-    return React.Children.map(this.props.children, child => {
+    return React.Children.map(this.props.children, (child) => {
       if (child.type.displayName === 'FlexItem') {
         return React.cloneElement(child, { theme });
       }
@@ -87,7 +99,13 @@ class FlexBase extends Component<Props, State> {
   }
 
   render() {
-    const { alignItems, className, justifyContent, themeId, ...directionProps } = this.props;
+    const {
+      alignItems,
+      className,
+      justifyContent,
+      themeId,
+      ...directionProps
+    } = this.props;
 
     const inlineStyles = pickBy({ alignItems, justifyContent });
     const activeClasses = this._getActiveClasses(directionProps);
diff --git a/source/components/layout/Grid.js b/source/components/layout/Grid.js
index a511c7b5..92740404 100644
--- a/source/components/layout/Grid.js
+++ b/source/components/layout/Grid.js
@@ -10,7 +10,11 @@ import { Base } from './Base';
 import { createEmptyContext, withTheme } from '../HOC/withTheme';
 import { numberToPx } from '../../utils/props';
 import { formatTemplateAreas } from '../../utils/layout';
-import { composeTheme, addThemeId, didThemePropsChange } from '../../utils/themes';
+import {
+  composeTheme,
+  addThemeId,
+  didThemePropsChange
+} from '../../utils/themes';
 
 // constants
 import { IDENTIFIERS } from '..';
@@ -67,8 +71,10 @@ class GridBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   // creates obj passed Base component's inline styles (see render)
@@ -76,7 +82,9 @@ class GridBase extends Component<Props, State> {
     const { className, ...gridProps } = this.props;
 
     // return early if gridProps are empty
-    if (isEmpty(pickBy({ ...gridProps }))) { return; }
+    if (isEmpty(pickBy({ ...gridProps }))) {
+      return;
+    }
 
     const {
       alignItems,
@@ -110,10 +118,10 @@ class GridBase extends Component<Props, State> {
 
     // filters out keys with false(sy) values
     return pickBy(inlineClasses);
-  }
+  };
 
   renderChildren(theme: Object) {
-    return React.Children.map(this.props.children, child => {
+    return React.Children.map(this.props.children, (child) => {
       if (child.type.displayName === 'GridItem') {
         return React.cloneElement(child, { theme });
       }
diff --git a/source/components/layout/Gutter.js b/source/components/layout/Gutter.js
index 2293632f..3f0ee53d 100644
--- a/source/components/layout/Gutter.js
+++ b/source/components/layout/Gutter.js
@@ -7,7 +7,11 @@ import { Base } from './Base';
 
 // utility functions
 import { createEmptyContext, withTheme } from '../HOC/withTheme';
-import { composeTheme, addThemeId, didThemePropsChange } from '../../utils/themes';
+import {
+  composeTheme,
+  addThemeId,
+  didThemePropsChange
+} from '../../utils/themes';
 import { numberToPx } from '../../utils/props';
 
 // constants
@@ -50,8 +54,10 @@ class GutterBase extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    didThemePropsChange(this.props, nextProps, this.setState.bind(this));
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps !== this.props) {
+      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
+    }
   }
 
   render() {
diff --git a/source/utils/themes.js b/source/utils/themes.js
index e23e1a24..6403be42 100644
--- a/source/utils/themes.js
+++ b/source/utils/themes.js
@@ -7,7 +7,10 @@ export const appendToProperty = (dest: {}, name: string, value: string) => {
   dest[name] === '' ? (dest[name] = value) : (dest[name] += ' ' + value);
 };
 
-export const composeComponentStyles = (componentStyles: {}, componentTheme: {}) => {
+export const composeComponentStyles = (
+  componentStyles: {},
+  componentTheme: {}
+) => {
   if (!componentTheme) return;
   for (const property in componentStyles) {
     if (hasProperty(componentStyles, property)) {
@@ -26,7 +29,7 @@ export const addThemeId = (theme: Object = {}, themeId: string): Object => {
   if (theme && !isEmpty(theme) && themeId) {
     const themeIdExists = hasProperty(theme, themeId);
     const themeIdIsObj = typeof theme[themeId] === 'object';
-    return (themeIdExists && themeIdIsObj) ? theme : { [themeId]: theme };
+    return themeIdExists && themeIdIsObj ? theme : { [themeId]: theme };
   }
   return theme;
 };
@@ -69,16 +72,11 @@ type ThemeProps = Object & {
   themeOverrides: Object
 };
 
-// Used in componentWillReceiveProps, this function compares the current
+// Used in componentDidUpdate, this function compares the current
 // set of theme related props against the next set to see if any have changed.
 // If true, a component's theme is recomposed and local state is updated
 export const didThemePropsChange = (
-  {
-    context,
-    themeId,
-    theme,
-    themeOverrides
-  }: ThemeProps,
+  { context, themeId, theme, themeOverrides }: ThemeProps,
   {
     context: nextContext,
     themeId: nextThemeId,

From 16f546600a91bc5eb7eece9eee0116b4994ff2bc Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 1 Jun 2020 10:40:28 +0200
Subject: [PATCH 042/244] [DDW-733] Refactor jest setup (#139)

Co-authored-by: Nikola Glumac <niglumac@gmail.com>
---
 .npmignore                    |  2 +-
 jest.config.js                | 18 ++++++++++++++++++
 jestSetup.js => jest.setup.js |  0
 package.json                  | 26 --------------------------
 4 files changed, 19 insertions(+), 27 deletions(-)
 create mode 100644 jest.config.js
 rename jestSetup.js => jest.setup.js (100%)

diff --git a/.npmignore b/.npmignore
index d1ccc0ad..83d01ad4 100644
--- a/.npmignore
+++ b/.npmignore
@@ -5,7 +5,7 @@ __tests__
 .flowconfig
 .travis.yaml
 dist
-jestSetup.js
+jest.setup.js
 source
 stories
 storybook
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 00000000..81c1fa06
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,18 @@
+module.exports = {
+  verbose: false,
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  moduleFileExtensions: ['js', 'jsx'],
+  moduleDirectories: ['node_modules'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__tests__/__mocks__/fileMock.js',
+    '\\.(css|scss|sass)$': 'identity-obj-proxy',
+  },
+  testPathIgnorePatterns: [
+    '<rootDir>/__tests__/__snapshots__',
+    '<rootDir>/__tests__/__mocks__',
+    '<rootDir>/__tests__/helpers',
+  ],
+  testEnvironment: 'jsdom',
+  setupFiles: ['<rootDir>/jest.setup.js'],
+};
diff --git a/jestSetup.js b/jest.setup.js
similarity index 100%
rename from jestSetup.js
rename to jest.setup.js
diff --git a/package.json b/package.json
index 008d48bd..872da28a 100644
--- a/package.json
+++ b/package.json
@@ -81,32 +81,6 @@
     "style-loader": "1.0.1",
     "url-loader": "3.0.0"
   },
-  "jest": {
-    "verbose": false,
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "jsx"
-    ],
-    "moduleDirectories": [
-      "node_modules"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__tests__/__mocks__/fileMock.js",
-      "\\.(css|scss|sass)$": "identity-obj-proxy"
-    },
-    "testPathIgnorePatterns": [
-      "<rootDir>/__tests__/__snapshots__",
-      "<rootDir>/__tests__/__mocks__",
-      "<rootDir>/__tests__/helpers"
-    ],
-    "testEnvironment": "jsdom",
-    "setupFiles": [
-      "<rootDir>/jestSetup.js"
-    ]
-  },
   "babel": {
     "presets": [
       "@babel/preset-env",

From a0dc8957a3c07c51d0facdebda834d5b063ed578 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 5 Jun 2020 11:59:23 +0200
Subject: [PATCH 043/244] [DDW-170] Improved Password input (#140)

* [DDW-733] Refactor jest setup

* [DDW-733] Implement advanced password input

* [DDW-733] Refactor jest setup

* [DDW-733] Implement advanced password input

* [DDW-733] Center password input asteriks vertically

* [DDW-733] Refine indicator and tooltip styles

* [DDW-733] Add theme var for tooltip font-family

* [DDW-733] Fix tooltip default font-family

Co-authored-by: Nikola Glumac <niglumac@gmail.com>
---
 .prettierrc                                   |   2 +-
 __tests__/PasswordInput.test.js               |  27 ++
 __tests__/__snapshots__/Tooltip.test.js.snap  |  22 +-
 package.json                                  |   5 +-
 source/components/Input.js                    |  19 +-
 source/components/PasswordInput.js            | 191 +++++----
 source/components/Tooltip.js                  |  12 +-
 source/skins/simple/CheckboxSkin.js           |  12 +-
 source/skins/simple/InputSkin.js              |  25 +-
 source/skins/simple/PasswordInputSkin.js      |  82 ++--
 source/skins/simple/TooltipSkin.js            |   5 +-
 source/themes/API/tooltip.js                  |   4 +-
 source/themes/simple/SimpleInput.scss         |   4 +
 source/themes/simple/SimplePasswordInput.scss |  43 +-
 source/themes/simple/SimpleTooltip.scss       |  22 +-
 source/utils/hooks.js                         |  25 ++
 stories/PasswordInput.stories.js              | 220 ++++++++--
 stories/ThemeProvider.stories.js              | 391 +++++++++--------
 stories/Tooltip.stories.js                    |  32 +-
 yarn.lock                                     | 402 +++++++++++++++---
 20 files changed, 1102 insertions(+), 443 deletions(-)
 create mode 100644 __tests__/PasswordInput.test.js
 create mode 100644 source/utils/hooks.js

diff --git a/.prettierrc b/.prettierrc
index e9c0f50f..c6a1376d 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,4 @@
 {
-  "trailingComma": "none",
+  "trailingComma": "es5",
   "singleQuote": true
 }
diff --git a/__tests__/PasswordInput.test.js b/__tests__/PasswordInput.test.js
new file mode 100644
index 00000000..a6096e77
--- /dev/null
+++ b/__tests__/PasswordInput.test.js
@@ -0,0 +1,27 @@
+import { calculatePasswordScore } from '../source/components/PasswordInput';
+
+describe('PasswordInput', () => {
+  describe('calculatePasswordScore', () => {
+    it('returns 0 for empty string', () => {
+      expect(calculatePasswordScore('')).toEqual(0);
+    });
+    it('returns ~0.25 for a insecure password', () => {
+      expect(calculatePasswordScore('darko')).toEqual(0.24);
+    });
+    it('returns ~0.5 for a weak password', () => {
+      expect(calculatePasswordScore('darkodarko')).toEqual(0.47);
+    });
+    it('returns ~0.75 for a good password', () => {
+      expect(calculatePasswordScore('Darko_Darko1')).toEqual(0.79);
+    });
+    it('returns ~1 for a really strong password', () => {
+      expect(calculatePasswordScore('Darko_123_Darko#')).toEqual(1);
+    });
+
+    describe('entropy factor', () => {
+      it('can be used to configure the score strength', () => {
+        expect(calculatePasswordScore('darko', 0.02)).toEqual(0.48);
+      });
+    });
+  });
+});
diff --git a/__tests__/__snapshots__/Tooltip.test.js.snap b/__tests__/__snapshots__/Tooltip.test.js.snap
index 8c573d47..797c610f 100644
--- a/__tests__/__snapshots__/Tooltip.test.js.snap
+++ b/__tests__/__snapshots__/Tooltip.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`tooltip arrowRelativeToTip (below) 1`] = `
 <span
-  class="root"
+  class="root isShowingOnHover"
 >
   <div
     class="bubble alignLeft nowrap root transparent"
@@ -24,7 +24,7 @@ exports[`tooltip arrowRelativeToTip (below) 1`] = `
 
 exports[`tooltip arrowRelativeToTip 1`] = `
 <span
-  class="root"
+  class="root isShowingOnHover"
 >
   <div
     class="bubble alignLeft nowrap root openUpward transparent"
@@ -46,7 +46,7 @@ exports[`tooltip arrowRelativeToTip 1`] = `
 
 exports[`tooltip isAligningRight 1`] = `
 <span
-  class="root"
+  class="root isShowingOnHover"
 >
   <div
     class="bubble alignRight nowrap root openUpward transparent"
@@ -68,7 +68,7 @@ exports[`tooltip isAligningRight 1`] = `
 
 exports[`tooltip isBounded 1`] = `
 <span
-  class="root"
+  class="root isShowingOnHover"
 >
   <div
     class="bubble alignLeft root openUpward transparent"
@@ -90,7 +90,7 @@ exports[`tooltip isBounded 1`] = `
 
 exports[`tooltip isCentered (below) 1`] = `
 <span
-  class="root isCentered"
+  class="root isShowingOnHover isCentered"
 >
   <div
     class="bubble alignLeft nowrap root isCentered transparent"
@@ -112,7 +112,7 @@ exports[`tooltip isCentered (below) 1`] = `
 
 exports[`tooltip isCentered (below) 2`] = `
 <span
-  class="root isCentered"
+  class="root isShowingOnHover isCentered"
 >
   <div
     class="bubble alignLeft nowrap root isCentered transparent"
@@ -134,7 +134,7 @@ exports[`tooltip isCentered (below) 2`] = `
 
 exports[`tooltip isCentered 1`] = `
 <span
-  class="root isCentered"
+  class="root isShowingOnHover isCentered"
 >
   <div
     class="bubble alignLeft nowrap root openUpward isCentered transparent"
@@ -156,7 +156,7 @@ exports[`tooltip isCentered 1`] = `
 
 exports[`tooltip isOpeningUpward={false} 1`] = `
 <span
-  class="root"
+  class="root isShowingOnHover"
 >
   <div
     class="bubble alignLeft nowrap root transparent"
@@ -178,7 +178,7 @@ exports[`tooltip isOpeningUpward={false} 1`] = `
 
 exports[`tooltip plain 1`] = `
 <span
-  class="root isVisible"
+  class="root isVisible isShowingOnHover"
 >
   <div
     class="bubble alignLeft nowrap root openUpward transparent"
@@ -200,7 +200,7 @@ exports[`tooltip plain 1`] = `
 
 exports[`tooltip with custom class 1`] = `
 <span
-  class="customTooltip root"
+  class="customTooltip root isShowingOnHover"
 >
   <div
     class="bubble alignLeft nowrap root openUpward transparent"
@@ -222,7 +222,7 @@ exports[`tooltip with custom class 1`] = `
 
 exports[`tooltip with html 1`] = `
 <span
-  class="root isVisible"
+  class="root isVisible isShowingOnHover"
 >
   <div
     class="bubble alignLeft nowrap root openUpward transparent"
diff --git a/package.json b/package.json
index 872da28a..7198dbb4 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "create-react-context": "0.2.2",
     "create-react-ref": "0.1.0",
+    "fast-password-entropy": "1.1.1",
     "filter-react-dom-props": "0.0.2",
     "postinstall-build": "5.0.1",
     "react-modal": "3.1.12",
@@ -49,6 +50,7 @@
     "babel-loader": "8.0.6",
     "babel-plugin-lodash": "3.3.4",
     "classnames": "2.2.5",
+    "concurrently": "5.2.0",
     "cpy": "8.0.0",
     "cross-env": "5.2.0",
     "css-loader": "3.2.0",
@@ -73,7 +75,8 @@
     "lodash": "4.17.15",
     "node-sass": "4.13.0",
     "nodemon": "1.12.1",
-    "prettier-eslint": "8.8.1",
+    "prettier": "2.0.5",
+    "prettier-eslint": "9.0.1",
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "rimraf": "2.6.2",
diff --git a/source/components/Input.js b/source/components/Input.js
index 59e5d473..fa7a8583 100644
--- a/source/components/Input.js
+++ b/source/components/Input.js
@@ -15,12 +15,13 @@ import { composeTheme, addThemeId, didThemePropsChange } from '../utils/themes';
 import { IDENTIFIERS } from '.';
 import type { ThemeContextProp } from './HOC/withTheme';
 
-type Props = {
+export type InputProps = {
   autoFocus: boolean,
   className?: ?string,
   context: ThemeContextProp,
   disabled?: boolean,
-  error: string | Element<any>,
+  error?: string | Element<any>,
+  showErrorState?: boolean,
   label?: string | Element<any>,
   maxLength?: number,
   minLength?: number,
@@ -37,15 +38,15 @@ type Props = {
   theme: ?Object, // will take precedence over theme in context if passed
   themeId: string,
   themeOverrides: Object,
-  value: string
+  value: string,
 };
 
 type State = {
   error: string,
-  composedTheme: Object
+  composedTheme: Object,
 };
 
-class InputBase extends Component<Props, State> {
+class InputBase extends Component<InputProps, State> {
   // declare ref types
   inputElement: Element<'input'>;
 
@@ -59,10 +60,10 @@ class InputBase extends Component<Props, State> {
     theme: null,
     themeId: IDENTIFIERS.INPUT,
     themeOverrides: {},
-    value: ''
+    value: '',
   };
 
-  constructor(props: Props) {
+  constructor(props: InputProps) {
     super(props);
 
     // define ref
@@ -76,7 +77,7 @@ class InputBase extends Component<Props, State> {
         addThemeId(themeOverrides, themeId),
         context.ROOT_THEME_API
       ),
-      error: ''
+      error: '',
     };
   }
 
@@ -118,7 +119,7 @@ class InputBase extends Component<Props, State> {
     return flow([
       this._enforceStringValue,
       this._enforceMaxLength,
-      this._enforceMinLength
+      this._enforceMinLength,
     ]).call(this, value);
   }
 
diff --git a/source/components/PasswordInput.js b/source/components/PasswordInput.js
index 0ff9a5ab..5a9c417e 100644
--- a/source/components/PasswordInput.js
+++ b/source/components/PasswordInput.js
@@ -1,98 +1,133 @@
 // @flow
-import React, { Component } from 'react';
-// $FlowFixMe
-import type { ComponentType, Element } from 'react';
+import stringEntropy from 'fast-password-entropy';
+import React, { StatelessFunctionalComponent, useContext } from 'react';
+import { ThemeContext } from './HOC/ThemeContext';
 
 // internal utility functions
-import { createEmptyContext, withTheme } from './HOC/withTheme';
 import { composeTheme, addThemeId } from '../utils/themes';
 
 // import constants
 import { IDENTIFIERS } from '.';
-import type { ThemeContextProp } from './HOC/withTheme';
+import type { InputProps } from './Input';
 
-export type PasswordInputProps = {
-  autoFocus?: boolean,
-  className?: string,
-  context: ThemeContextProp,
-  disabled?: boolean,
-  error?: string,
-  label?: string | Element<any>,
-  isTooltipOpen: boolean,
-  onBlur?: Function,
-  onChange?: Function,
-  onFocus?: Function,
-  placeholder?: string,
-  readOnly?: boolean,
-  skin?: ComponentType<any>,
-  theme: ?Object,
-  themeId: string,
-  themeOverrides: Object,
-  value: ?string,
-  tooltip?: string,
-  score?: number,
-  state?: $Values<typeof PasswordInputBase.STATE>,
+export const calculatePasswordScore = (
+  password: string,
+  entropyFactor: number = 0.01
+): number => Math.min((stringEntropy(password) * entropyFactor).toFixed(2), 1);
+
+const STATE = {
+  DEFAULT: 'default',
+  ERROR: 'error',
+  INSECURE: 'insecure',
+  WEAK: 'weak',
+  STRONG: 'strong',
 };
 
-type State = {
-  composedTheme: Object,
+export type PasswordInputProps = InputProps & {
+  entropyFactor?: number,
+  debounceDelay?: number,
+  strengthFeedbacks?: {
+    insecure: string,
+    weak: string,
+    strong: string,
+  },
+  isTooltipOpen: boolean,
+  isShowingTooltipOnFocus: boolean,
+  isShowingTooltipOnHover: boolean,
+  minLength?: number,
+  minStrongScore?: number,
+  tooltip?: string | boolean,
+  state?: $Values<typeof STATE>,
+  useDebounce?: boolean,
 };
 
-class PasswordInputBase extends Component<PasswordInputProps, State> {
+export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
+  props
+) => {
+  const {
+    context,
+    strengthFeedbacks,
+    entropyFactor,
+    error,
+    minLength,
+    minStrongScore,
+    skin,
+    state,
+    theme,
+    themeOverrides,
+    tooltip,
+    ...rest
+  } = props;
 
-  static displayName = 'PasswordInput';
-  static STATE = {
-    DEFAULT: 'default',
-    ERROR: 'error',
-    WARNING: 'warning',
-    SUCCESS: 'success',
-  };
+  // Theme
+  const themeContext = context || useContext(ThemeContext);
+  const composedTheme = composeTheme(
+    addThemeId(theme || themeContext.theme, props.themeId),
+    addThemeId(props.themeOverrides, props.themeId),
+    themeContext.ROOT_THEME_API
+  );
+  // Skin
+  const PasswordInputSkin =
+    skin || themeContext.skins[IDENTIFIERS.PASSWORD_INPUT];
 
-  static defaultProps = {
-    context: createEmptyContext(),
-    isTooltipOpen: false,
-    readOnly: false,
-    theme: null,
-    themeId: IDENTIFIERS.PASSWORD_INPUT,
-    themeOverrides: {},
-    value: null,
-    score: 0,
-    state: PasswordInputBase.STATE.DEFAULT,
-  };
+  // Logic
+  let dynamicState = PasswordInput.STATE.DEFAULT;
+  let passwordFeedback = null;
+  const password = props.value;
+  const score = calculatePasswordScore(password, entropyFactor);
+  const isValidPassword = password.length >= minLength;
+  const isNotEmpty = password.length > 0;
 
-  constructor(props: PasswordInputProps) {
-    super(props);
-    const { context, themeId, theme, themeOverrides } = props;
-    this.state = {
-      composedTheme: composeTheme(
-        addThemeId(theme || context.theme, themeId),
-        addThemeId(themeOverrides, themeId),
-        context.ROOT_THEME_API
-      ),
-    };
+  if (error) {
+    dynamicState = PasswordInput.STATE.ERROR;
+    passwordFeedback = error;
+  } else if (isValidPassword) {
+    if (score < minStrongScore) {
+      dynamicState = PasswordInput.STATE.WEAK;
+      passwordFeedback = strengthFeedbacks[PasswordInput.STATE.WEAK];
+    } else {
+      dynamicState = PasswordInput.STATE.STRONG;
+      passwordFeedback = strengthFeedbacks[PasswordInput.STATE.STRONG];
+    }
+  } else if (isNotEmpty) {
+    dynamicState = PasswordInput.STATE.INSECURE;
+    passwordFeedback = strengthFeedbacks[PasswordInput.STATE.INSECURE];
   }
+  return (
+    <PasswordInputSkin
+      error={error}
+      theme={composedTheme}
+      score={score}
+      state={state || dynamicState}
+      tooltip={error || tooltip === false ? null : tooltip || passwordFeedback}
+      {...rest}
+    />
+  );
+};
 
-  render() {
-    // destructuring props ensures only the "...rest" get passed down
-    const {
-      context,
-      skin,
-      theme,
-      themeOverrides,
-      ...rest
-    } = this.props;
-
-    const PasswordInputSkin = skin || context.skins[IDENTIFIERS.PASSWORD_INPUT];
+// Static Properties
 
-    return (
-      <PasswordInputSkin
-        theme={this.state.composedTheme}
-        {...rest}
-      />
-    );
-  }
-}
+PasswordInput.STATE = STATE;
 
-export const PasswordInput = withTheme(PasswordInputBase);
+PasswordInput.displayName = 'PasswordInput';
 
-PasswordInput.STATE = PasswordInputBase.STATE;
+PasswordInput.defaultProps = {
+  debounceDelay: 1000,
+  entropyFactor: 0.01,
+  strengthFeedbacks: {
+    insecure: 'insecure',
+    weak: 'weak',
+    strong: 'strong',
+  },
+  isTooltipOpen: false,
+  isShowingTooltipOnFocus: true,
+  isShowingTooltipOnHover: true,
+  minLength: 10,
+  minStrongScore: 0.75,
+  readOnly: false,
+  theme: null,
+  themeId: IDENTIFIERS.PASSWORD_INPUT,
+  themeOverrides: {},
+  useDebounce: true,
+  value: '',
+};
diff --git a/source/components/Tooltip.js b/source/components/Tooltip.js
index 6f01f472..7dbc00c6 100644
--- a/source/components/Tooltip.js
+++ b/source/components/Tooltip.js
@@ -18,6 +18,7 @@ export type TooltipProps = {
   isBounded: boolean,
   isCentered: boolean,
   isOpeningUpward: boolean,
+  isShowingOnHover: boolean,
   isTransparent: boolean,
   isVisible: boolean,
   arrowRelativeToTip: boolean,
@@ -25,11 +26,11 @@ export type TooltipProps = {
   theme: ?Object, // will take precedence over theme in context if passed
   themeOverrides: Object, // custom css/scss from user that adheres to component's theme API
   themeId: string,
-  tip?: string | Element<any>
+  tip?: string | Element<any>,
 };
 
 type State = {
-  composedTheme: Object
+  composedTheme: Object,
 };
 
 class TooltipBase extends Component<TooltipProps, State> {
@@ -39,13 +40,14 @@ class TooltipBase extends Component<TooltipProps, State> {
     context: createEmptyContext(),
     isBounded: false,
     isCentered: false,
-    isVisible: false,
     isOpeningUpward: true,
+    isShowingOnHover: true,
     isTransparent: true,
+    isVisible: false,
     arrowRelativeToTip: false,
     theme: null,
     themeId: IDENTIFIERS.TOOLTIP,
-    themeOverrides: {}
+    themeOverrides: {},
   };
 
   constructor(props: TooltipProps) {
@@ -58,7 +60,7 @@ class TooltipBase extends Component<TooltipProps, State> {
         addThemeId(theme || context.theme, themeId),
         addThemeId(themeOverrides, themeId),
         context.ROOT_THEME_API
-      )
+      ),
     };
   }
 
diff --git a/source/skins/simple/CheckboxSkin.js b/source/skins/simple/CheckboxSkin.js
index 961f264b..196f7ce4 100644
--- a/source/skins/simple/CheckboxSkin.js
+++ b/source/skins/simple/CheckboxSkin.js
@@ -14,7 +14,7 @@ type Props = {
   onChange: Function,
   label: string | Element<any>,
   theme: Object,
-  themeId: string
+  themeId: string,
 };
 
 export const CheckboxSkin = (props: Props) => (
@@ -25,9 +25,9 @@ export const CheckboxSkin = (props: Props) => (
       props.className,
       props.theme[props.themeId].root,
       props.disabled ? props.theme[props.themeId].disabled : null,
-      props.checked ? props.theme[props.themeId].checked : null
+      props.checked ? props.theme[props.themeId].checked : null,
     ])}
-    onClick={event => {
+    onClick={(event) => {
       if (!props.disabled && props.onChange) {
         props.onChange(!props.checked, event);
       }
@@ -41,13 +41,11 @@ export const CheckboxSkin = (props: Props) => (
     <div
       className={classnames([
         props.theme[props.themeId].check,
-        props.checked ? props.theme[props.themeId].checked : null
+        props.checked ? props.theme[props.themeId].checked : null,
       ])}
     />
     {props.label && (
-      <label className={props.theme[props.themeId].label}>
-        {props.label}
-      </label>
+      <label className={props.theme[props.themeId].label}>{props.label}</label>
     )}
   </div>
 );
diff --git a/source/skins/simple/InputSkin.js b/source/skins/simple/InputSkin.js
index 5da87372..a907c6e7 100644
--- a/source/skins/simple/InputSkin.js
+++ b/source/skins/simple/InputSkin.js
@@ -8,6 +8,7 @@ import { isFunction } from 'lodash';
 
 // components
 import { FormField } from '../../components/FormField';
+import type { InputProps } from '../../components/Input';
 
 // skins
 import { FormFieldSkin } from './FormFieldSkin';
@@ -15,23 +16,10 @@ import { FormFieldSkin } from './FormFieldSkin';
 // internal utility functions
 import { pickDOMProps } from '../../utils/props';
 
-type Props = {
-  className?: ?string,
-  disabled?: boolean,
-  error?: string,
-  label?: string | Element<any>,
+type Props = InputProps & {
   inputRef: ElementRef<'input'>,
-  onBlur?: Function,
-  onChange?: Function,
-  onFocus?: Function,
-  onKeyPress?: Function,
-  placeholder?: string,
-  readOnly?: boolean,
-  selectedOption?: any,
   theme: Object,
   themeId: string,
-  value: string,
-  selectionRenderer?: Function,
 };
 
 export const InputSkin = (props: Props) => {
@@ -42,13 +30,15 @@ export const InputSkin = (props: Props) => {
       className={classnames([
         props.theme[props.themeId].input,
         props.disabled ? props.theme[props.themeId].disabled : null,
-        props.error ? props.theme[props.themeId].errored : null,
+        props.error || props.showErrorState
+          ? props.theme[props.themeId].errored
+          : null,
       ])}
       readOnly={props.readOnly}
     />
   );
 
-  const useSelectionRenderer = option => (
+  const useSelectionRenderer = (option) => (
     <div className={props.theme[props.themeId].customValueWrapper}>
       {renderInput()}
       <div className={props.theme[props.themeId].customValueBlock}>
@@ -59,7 +49,8 @@ export const InputSkin = (props: Props) => {
 
   const render = () => {
     // check if user has passed render prop "selectionRenderer"
-    const hasSelectionRenderer = props.selectionRenderer && isFunction(props.selectionRenderer);
+    const hasSelectionRenderer =
+      props.selectionRenderer && isFunction(props.selectionRenderer);
     if (hasSelectionRenderer) {
       return useSelectionRenderer(props.selectedOption);
     }
diff --git a/source/skins/simple/PasswordInputSkin.js b/source/skins/simple/PasswordInputSkin.js
index a4df0d0f..d4c209cd 100644
--- a/source/skins/simple/PasswordInputSkin.js
+++ b/source/skins/simple/PasswordInputSkin.js
@@ -1,44 +1,74 @@
 // @flow
 import classnames from 'classnames';
-import React from 'react';
-import type { ElementRef } from 'react';
+import React, { useState } from 'react';
 
 import { Input } from '../../components/Input';
+import { PasswordInput } from '../../components/PasswordInput';
 import { Tooltip } from '../../components/Tooltip';
 import type { PasswordInputProps } from '../../components/PasswordInput';
-import { PasswordInput } from '../../components/PasswordInput';
+import useDebouncedValueChangeIndicator from '../../utils/hooks';
 
 type Props = PasswordInputProps & {
-  inputRef: ElementRef<'input'>,
+  score: number,
   theme: Object,
 };
 
 export const PasswordInputSkin = (props: Props) => {
-  const { isTooltipOpen, theme, themeId, tooltip, score, state, ...inputProps } = props;
-  const input = (
-    <Input
-      {...inputProps}
-      type="password"
-    />
-  );
-  const stateClass = state ? theme[themeId][state] : theme[themeId][PasswordInput.STATE.DEFAULT];
+  const [hasInputFocus, setHasInputFocus] = useState(false);
+  const {
+    error,
+    debounceDelay,
+    isShowingTooltipOnFocus,
+    isShowingTooltipOnHover,
+    isTooltipOpen,
+    score,
+    state,
+    theme,
+    themeId,
+    tooltip,
+    useDebounce,
+    value,
+    ...inputProps
+  } = props;
+  const hasInitialValueChanged = useDebounce
+    ? useDebouncedValueChangeIndicator(value, debounceDelay)
+    : true;
+  const hasTooltip = hasInitialValueChanged && tooltip != null;
   return (
-    <div className={classnames([theme[themeId].root, stateClass])}>
-      {tooltip ? (
-        <Tooltip
-          arrowRelativeToTip
-          isCentered
-          isOpeningUpward={false}
-          isVisible={isTooltipOpen}
-          tip={tooltip}
-          theme={props.theme}
-        >
-          {input}
-        </Tooltip>
-      ) : input}
+    <div className={classnames([theme[themeId].root, theme[themeId][state]])}>
+      <Tooltip
+        arrowRelativeToTip
+        isCentered
+        isOpeningUpward={false}
+        isShowingOnHover={hasTooltip && isShowingTooltipOnHover}
+        isVisible={
+          hasTooltip &&
+          (isTooltipOpen || (isShowingTooltipOnFocus && hasInputFocus))
+        }
+        tip={tooltip}
+        theme={props.theme}
+      >
+        <Input
+          {...inputProps}
+          showErrorState={
+            hasInitialValueChanged && state === PasswordInput.STATE.ERROR
+          }
+          value={value}
+          type="password"
+          onBlur={() => setHasInputFocus(false)}
+          onFocus={() => setHasInputFocus(true)}
+        />
+      </Tooltip>
       <div className={theme[themeId].indicator}>
-        <div className={theme[themeId].score} style={{ width: `${(score || 0) * 100}%` }} />
+        <div
+          className={theme[themeId].score}
+          style={{ width: `${(score || 0) * 100}%` }}
+        />
       </div>
     </div>
   );
 };
+
+// Static Properties
+
+PasswordInputSkin.displayName = 'PasswordInputSkin';
diff --git a/source/skins/simple/TooltipSkin.js b/source/skins/simple/TooltipSkin.js
index 49bce19f..8071b54d 100644
--- a/source/skins/simple/TooltipSkin.js
+++ b/source/skins/simple/TooltipSkin.js
@@ -21,13 +21,16 @@ type Props = TooltipProps & {
 
 export const TooltipSkin = (props: Props) => {
   const { theme, themeId } = props;
+  const isEmpty = props.tip == null || props.tip === '';
   return (
     <span
       {...pickDOMProps(props)}
       className={classnames([
         props.className,
         theme[themeId].root,
+        isEmpty ? theme[themeId].isEmpty : null,
         props.isVisible ? theme[themeId].isVisible : null,
+        props.isShowingOnHover ? theme[themeId].isShowingOnHover : null,
         props.isCentered ? theme[themeId].isCentered : null,
       ])}
     >
@@ -37,7 +40,7 @@ export const TooltipSkin = (props: Props) => {
           props.isAligningRight
             ? theme[themeId].alignRight
             : theme[themeId].alignLeft,
-          props.isBounded ? null : theme[themeId].nowrap
+          props.isBounded ? null : theme[themeId].nowrap,
         ])}
         theme={theme}
         isCentered={props.isCentered}
diff --git a/source/themes/API/tooltip.js b/source/themes/API/tooltip.js
index 28e47329..ac99f83e 100644
--- a/source/themes/API/tooltip.js
+++ b/source/themes/API/tooltip.js
@@ -5,6 +5,8 @@ export const TOOLTIP_THEME_API = {
   alignRight: '',
   alignLeft: '',
   isCentered: '',
+  isEmpty: '',
+  isShowingOnHover: '',
   isVisible: '',
-  nowrap: ''
+  nowrap: '',
 };
diff --git a/source/themes/simple/SimpleInput.scss b/source/themes/simple/SimpleInput.scss
index f5ee5736..ae2ea61d 100644
--- a/source/themes/simple/SimpleInput.scss
+++ b/source/themes/simple/SimpleInput.scss
@@ -47,6 +47,10 @@ $input-placeholder-font-family: var(--rp-input-placeholder-font-family, $theme-f
     color: $input-placeholder-color;
     font-family: $input-placeholder-font-family;
   }
+
+  &[type="password"] {
+    padding-top: 16px;
+  }
 }
 
 // BEGIN SPECIAL STATES ---------- //
diff --git a/source/themes/simple/SimplePasswordInput.scss b/source/themes/simple/SimplePasswordInput.scss
index 9d4b744b..294e7cf3 100644
--- a/source/themes/simple/SimplePasswordInput.scss
+++ b/source/themes/simple/SimplePasswordInput.scss
@@ -2,6 +2,8 @@
 
 // OVERRIDABLE CONFIGURATION VARIABLES
 
+$password-input-tooltip-font-family: var(--rp-password-input-tooltip-font-family, $theme-font-medium), sans-serif !default;
+
 // error
 $password-input-error-bg-color: var(--rp-password-input-error-bg-color, #f4b5bc) !default;
 $password-input-error-score-color: var(--rp-password-input-error-score-color, #ea4c5b) !default;
@@ -14,7 +16,7 @@ $password-input-warning-score-color: var(--rp-password-input-warning-score-color
 $password-input-success-bg-color: var(--rp-password-input-success-bg-color, #a8e4c3) !default;
 $password-input-success-score-color: var(--rp-password-input-success-score-color, #2dc06c) !default;
 
-@mixin bubbleColor($color) {
+@mixin tooltipBubble($color) {
   :global {
     .SimpleTooltip_bubble.SimpleBubble_root [data-bubble-arrow] {
       &:before, &:after {
@@ -28,47 +30,62 @@ $password-input-success-score-color: var(--rp-password-input-success-score-color
 }
 
 .root {
-  // Remove bottom input border for any state but the default
-  // to make room for the score indicator
-  &:not(.default) {
-    :global {
-      .SimpleInput_input {
-        border-bottom: none;
-      }
+  margin-bottom: 20px;
+  :global {
+    .SimpleTooltip_bubble {
+      font-family: $password-input-tooltip-font-family;
     }
   }
 }
 
+.indicator {
+  position: relative;
+  top: -2px;
+  left: 1px;
+  width: calc(100% - 2px);
+}
+
 .indicator, .score {
+  border-radius: 1px;
   height: 2px;
+  transition: width 400ms ease;
 }
 
 .error {
+  :global {
+    .SimpleFormField_error {
+      display: none;
+    }
+  }
+  @include tooltipBubble($password-input-error-score-color);
+}
+
+.insecure {
   .indicator {
     background-color: $password-input-error-bg-color;
   }
   .score {
     background-color: $password-input-error-score-color;
   }
-  @include bubbleColor($password-input-error-score-color);
+  @include tooltipBubble($password-input-error-score-color);
 }
 
-.warning {
+.weak {
   .indicator {
     background-color: $password-input-warning-bg-color;
   }
   .score {
     background-color: $password-input-warning-score-color;
   }
-  @include bubbleColor($password-input-warning-score-color);
+  @include tooltipBubble($password-input-warning-score-color);
 }
 
-.success {
+.strong {
   .indicator {
     background-color: $password-input-success-bg-color;
   }
   .score {
     background-color: $password-input-success-score-color;
   }
-  @include bubbleColor($password-input-success-score-color);
+  @include tooltipBubble($password-input-success-score-color);
 }
diff --git a/source/themes/simple/SimpleTooltip.scss b/source/themes/simple/SimpleTooltip.scss
index 0c48df90..63bacaaf 100644
--- a/source/themes/simple/SimpleTooltip.scss
+++ b/source/themes/simple/SimpleTooltip.scss
@@ -3,24 +3,27 @@
 
 // OVERRIDABLE CONFIGURATION VARIABLES
 
-$tooltip-font-family: var(--rp-tooltip-font-family, $theme-font-light, sans-serif) !default;
+$tooltip-font-family: var(--rp-tooltip-font-family, $theme-font-light), sans-serif !default;
 $tooltip-text-color: var(--rp-tooltip-text-color, white) !default;
 
 .root {
   position: relative;
 
   // ======= SPECIAL STATES =======
-  &:hover {
+  &.isShowingOnHover:hover {
     .bubble {
-      display: block;
+      opacity: 1;
     }
   }
 }
 
 .bubble {
   font-family: $tooltip-font-family;
+  font-size: 12px;
   color: $tooltip-text-color;
-  display: none;
+  display: inline-block;
+  opacity: 0;
+  transition: opacity 400ms ease;
 }
 
 .alignRight [data-bubble-container] {
@@ -38,7 +41,7 @@ $tooltip-text-color: var(--rp-tooltip-text-color, white) !default;
 .isCentered {
   display: block;
 
-  &:hover .bubble {
+  &.isShowingOnHover:hover .bubble {
     display: inline-block;
   }
 
@@ -49,6 +52,13 @@ $tooltip-text-color: var(--rp-tooltip-text-color, white) !default;
 
 .isVisible {
   .bubble {
-    display: inline-block;
+    opacity: 1;
+  }
+}
+
+.isEmpty {
+  .bubble {
+    transition: none;
+    display: none;
   }
 }
diff --git a/source/utils/hooks.js b/source/utils/hooks.js
new file mode 100644
index 00000000..85ebc24b
--- /dev/null
+++ b/source/utils/hooks.js
@@ -0,0 +1,25 @@
+// @flow
+import { useEffect, useState } from 'react';
+
+export default function useDebouncedValueChangedIndicator(
+  value: any,
+  delay: number
+) {
+  const [isDirty, setIsDirty] = useState(false);
+  useEffect(() => {
+    if (value === '') {
+      setIsDirty(false);
+    }
+    // Set debouncedValue to value (passed in) after the specified delay
+    const handler = setTimeout(() => {
+      if (value !== '') {
+        setIsDirty(true);
+      }
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value]);
+
+  return isDirty;
+}
diff --git a/stories/PasswordInput.stories.js b/stories/PasswordInput.stories.js
index 1e18115d..5fa752e0 100644
--- a/stories/PasswordInput.stories.js
+++ b/stories/PasswordInput.stories.js
@@ -6,6 +6,7 @@ import { storiesOf } from '@storybook/react';
 import { withState } from '@dump247/storybook-state';
 
 // components
+import { Input } from '../source/components/Input';
 import { PasswordInput } from '../source/components/PasswordInput';
 
 // helpers
@@ -14,66 +15,237 @@ import { decorateWithSimpleTheme } from './helpers/theming';
 // custom styles & theme overrides
 import styles from './PasswordInput.stories.scss';
 
-storiesOf('PasswordInput', module)
+storiesOf('PasswordInput | Logic', module)
+  .addDecorator(decorateWithSimpleTheme)
+
+  // ====== Stories ======
+  .add(
+    'Default',
+    withState({ value: '' }, (store) => (
+      <div className={styles.container}>
+        <PasswordInput
+          label="Default password input"
+          value={store.state.value}
+          placeholder="Enter your password …"
+          onChange={(value) => store.set({ value })}
+        />
+      </div>
+    ))
+  )
+  .add(
+    'Hard',
+    withState({ value: '' }, (store) => (
+      <div className={styles.container}>
+        <PasswordInput
+          minLength={12}
+          entropyFactor={0.005}
+          label="Hard password input"
+          value={store.state.value}
+          placeholder="Enter 12 character password …"
+          onChange={(value) => store.set({ value })}
+        />
+      </div>
+    ))
+  )
+  .add(
+    'Easy',
+    withState({ value: '' }, (store) => (
+      <div className={styles.container}>
+        <PasswordInput
+          minLength={8}
+          entropyFactor={0.015}
+          label="Easy password input"
+          value={store.state.value}
+          placeholder="Enter 8 character password …"
+          onChange={(value) => store.set({ value })}
+        />
+      </div>
+    ))
+  );
 
+storiesOf('PasswordInput | Skin', module)
   .addDecorator(decorateWithSimpleTheme)
 
   // ====== Stories ======
-  .add('empty',
-    withState({ value: '' }, store => (
+  .add(
+    'custom tooltip',
+    withState({ value: '' }, (store) => (
       <div className={styles.container}>
         <PasswordInput
           isTooltipOpen
           label="Label"
           value={store.state.value}
           placeholder="Hint"
-          onChange={value => store.set({ value })}
+          onChange={(value) => store.set({ value })}
           tooltip="Regular tooltip"
+          useDebounce={false}
         />
       </div>
     ))
   )
-  .add('error',
-    withState({ value: 'test' }, store => (
+  .add(
+    'custom strength feedbacks',
+    withState({ value: '' }, (store) => (
       <div className={styles.container}>
         <PasswordInput
-          isTooltipOpen
+          strengthFeedbacks={{
+            insecure: 'unsicher!',
+            weak: 'schwach',
+            strong: 'genial!',
+          }}
           label="Label"
           value={store.state.value}
-          onChange={value => store.set({ value })}
-          tooltip="Password doesn't match"
-          score={0.1}
-          state={PasswordInput.STATE.ERROR}
+          placeholder="Passwort eingeben"
+          onChange={(value) => store.set({ value })}
         />
       </div>
     ))
   )
-  .add('warning',
-    withState({ value: 'test' }, store => (
+  .add(
+    'fixed default state',
+    withState({ value: '' }, (store) => (
       <div className={styles.container}>
         <PasswordInput
           isTooltipOpen
           label="Label"
           value={store.state.value}
-          onChange={value => store.set({ value })}
-          tooltip="Warning message"
-          score={0.5}
-          state={PasswordInput.STATE.WARNING}
+          placeholder="Entery anything"
+          onChange={(value) => store.set({ value })}
+          tooltip="Always default!"
+          state={PasswordInput.STATE.DEFAULT}
+          useDebounce={false}
         />
       </div>
     ))
   )
-  .add('success',
-    withState({ value: 'test' }, store => (
+  .add(
+    'tooltip only on hover',
+    withState({ value: '' }, (store) => (
       <div className={styles.container}>
         <PasswordInput
-          isTooltipOpen
+          isShowingTooltipOnFocus={false}
+          isShowingTooltipOnHover
+          isTooltipOpen={false}
+          label="Label"
+          value={store.state.value}
+          placeholder="Hint"
+          onChange={(value) => store.set({ value })}
+          tooltip="Regular tooltip"
+        />
+      </div>
+    ))
+  )
+  .add(
+    'tooltip only on focus',
+    withState({ value: '' }, (store) => (
+      <div className={styles.container}>
+        <PasswordInput
+          isShowingTooltipOnFocus
+          isShowingTooltipOnHover={false}
+          isTooltipOpen={false}
           label="Label"
           value={store.state.value}
-          onChange={value => store.set({ value })}
-          tooltip="Excellent"
-          score={0.8}
-          state={PasswordInput.STATE.SUCCESS}
+          placeholder="Hint"
+          onChange={(value) => store.set({ value })}
+          tooltip="Regular tooltip"
+        />
+      </div>
+    ))
+  )
+  .add(
+    'tooltip on focus or hover',
+    withState({ value: '' }, (store) => (
+      <div className={styles.container}>
+        <PasswordInput
+          isShowingTooltipOnFocus
+          isShowingTooltipOnHover
+          isTooltipOpen={false}
+          label="Label"
+          value={store.state.value}
+          placeholder="Hint"
+          onChange={(value) => store.set({ value })}
+          tooltip="Regular tooltip"
+        />
+      </div>
+    ))
+  )
+  .add(
+    'custom error',
+    withState({ value: '' }, (store) => (
+      <div className={styles.container}>
+        <PasswordInput
+          error="Password doesnt match"
+          label="Custom Error"
+          isTooltipOpen
+          onChange={(value) => store.set({ value })}
+          useDebounce={false}
+          value={store.state.value}
+        />
+      </div>
+    ))
+  )
+  .add('insecure', () => (
+    <div className={styles.container}>
+      <PasswordInput
+        isTooltipOpen
+        label="Insecure Password"
+        useDebounce={false}
+        value="darko"
+      />
+    </div>
+  ))
+  .add('weak', () => (
+    <div className={styles.container}>
+      <PasswordInput
+        isTooltipOpen
+        label="Weak Password"
+        useDebounce={false}
+        value="darkodarko"
+      />
+    </div>
+  ))
+  .add('excellent', () => (
+    <div className={styles.container}>
+      <PasswordInput
+        isTooltipOpen
+        label="Excellent Password"
+        useDebounce={false}
+        value="very$trongPassw0rd"
+      />
+    </div>
+  ));
+
+storiesOf('PasswordInput | Integration', module)
+  .addDecorator(decorateWithSimpleTheme)
+
+  // ====== Stories ======
+  .add(
+    'Password Repeat',
+    withState({ password: '', repeat: '' }, (store) => (
+      <div className={styles.container}>
+        <PasswordInput
+          label="New Password"
+          value={store.state.password}
+          placeholder="Enter your password …"
+          onChange={(value) => store.set({ password: value })}
+        />
+        <PasswordInput
+          label="Repeat Password"
+          value={store.state.repeat}
+          placeholder="Repeat your password …"
+          type="password"
+          onChange={(value) => store.set({ repeat: value })}
+          state={
+            // eslint-disable-next-line no-nested-ternary
+            store.state.password === store.state.repeat
+              ? PasswordInput.STATE.DEFAULT
+              : PasswordInput.STATE.ERROR
+          }
+          tooltip={
+            store.state.password === store.state.repeat
+              ? false
+              : 'Passwords must match'
+          }
         />
       </div>
     ))
diff --git a/stories/ThemeProvider.stories.js b/stories/ThemeProvider.stories.js
index 13da1145..96514646 100644
--- a/stories/ThemeProvider.stories.js
+++ b/stories/ThemeProvider.stories.js
@@ -18,6 +18,7 @@ import { ProgressBar } from '../source/components/ProgressBar';
 import { Flex } from '../source/components/layout/Flex';
 import { FlexItem } from '../source/components/layout/FlexItem';
 import { Gutter } from '../source/components/layout/Gutter';
+import { SimpleSkins } from '../source/skins/simple';
 
 // skins
 import { InputSkin } from '../source/skins/simple/InputSkin';
@@ -54,7 +55,20 @@ import progressBarOverrides2 from './theme-overrides/customProgressBar.scss';
 // constants
 import { IDENTIFIERS } from '../source/components';
 
-const MNEMONICS = ['home', 'cat', 'dog', 'fish', 'home', 'cat', 'dog', 'fish', 'home', 'cat', 'dog', 'fish'];
+const MNEMONICS = [
+  'home',
+  'cat',
+  'dog',
+  'fish',
+  'home',
+  'cat',
+  'dog',
+  'fish',
+  'home',
+  'cat',
+  'dog',
+  'fish',
+];
 
 const {
   AUTOCOMPLETE,
@@ -68,9 +82,10 @@ const {
   OPTIONS,
   PROGRESS_BAR,
   RADIO,
+  SCROLLBAR,
   SWITCH,
   TEXT_AREA,
-  TOGGLER
+  TOGGLER,
 } = IDENTIFIERS;
 
 const CUSTOM_THEME = {
@@ -86,198 +101,224 @@ const CUSTOM_THEME = {
   [CHECKBOX]: CustomCheckboxTheme,
   [AUTOCOMPLETE]: CustomAutocompleteTheme,
   [BUBBLE]: SimpleTheme[BUBBLE],
-  [FORM_FIELD]: SimpleTheme[FORM_FIELD]
+  [FORM_FIELD]: SimpleTheme[FORM_FIELD],
+  [SCROLLBAR]: SimpleTheme[SCROLLBAR],
 };
 
 storiesOf('ThemeProvider', module)
   // ====== ThemeProvider Stories ======
 
-  .add('custom theme',
-    withState({
-      textAreaValue: '',
-      numericInputValue: '',
-      togglerChecked: false,
-      switchChecked: false,
-      radioSelected: false,
-      modalIsOpen: false
-    }, store => (
-      <ThemeProvider theme={CUSTOM_THEME}>
-        <div style={{ margin: '100px' }}>
-          <TextArea
-            value={store.state.textAreaValue}
-            onChange={textAreaValue => store.set({ textAreaValue })}
-            placeholder="type here..."
-            skin={TextAreaSkin}
-          />
-        </div>
+  .add(
+    'custom theme',
+    withState(
+      {
+        textAreaValue: '',
+        numericInputValue: '',
+        togglerChecked: false,
+        switchChecked: false,
+        radioSelected: false,
+        modalIsOpen: false,
+      },
+      (store) => (
+        <ThemeProvider theme={CUSTOM_THEME} skins={SimpleSkins}>
+          <div style={{ margin: '100px' }}>
+            <TextArea
+              value={store.state.textAreaValue}
+              onChange={(textAreaValue) => store.set({ textAreaValue })}
+              placeholder="type here..."
+              skin={TextAreaSkin}
+            />
+          </div>
 
-        <div style={{ margin: '100px' }}>
-          <Checkbox
-            checked={store.state.togglerChecked}
-            onChange={() => store.set({ togglerChecked: !store.state.togglerChecked })}
-            themeId={IDENTIFIERS.TOGGLER}
-            labelLeft="Included"
-            labelRight="Excluded"
-            skin={TogglerSkin}
-          />
-        </div>
+          <div style={{ margin: '100px' }}>
+            <Checkbox
+              checked={store.state.togglerChecked}
+              onChange={() =>
+                store.set({ togglerChecked: !store.state.togglerChecked })
+              }
+              themeId={IDENTIFIERS.TOGGLER}
+              labelLeft="Included"
+              labelRight="Excluded"
+              skin={TogglerSkin}
+            />
+          </div>
 
-        <div style={{ margin: '100px' }}>
-          <Checkbox
-            label="Switch with custom theme"
-            themeId={IDENTIFIERS.SWITCH}
-            checked={store.state.switchChecked}
-            onChange={() => store.set({ switchChecked: !store.state.switchChecked })}
-            skin={SwitchSkin}
-          />
-        </div>
+          <div style={{ margin: '100px' }}>
+            <Checkbox
+              label="Switch with custom theme"
+              themeId={IDENTIFIERS.SWITCH}
+              checked={store.state.switchChecked}
+              onChange={() =>
+                store.set({ switchChecked: !store.state.switchChecked })
+              }
+              skin={SwitchSkin}
+            />
+          </div>
 
-        <div style={{ margin: '100px' }}>
-          <Radio
-            label="Radio with custom theme"
-            selected={store.state.radioSelected}
-            onChange={() => store.set({ radioSelected: !store.state.radioSelected })}
-            skin={RadioSkin}
-          />
-        </div>
+          <div style={{ margin: '100px' }}>
+            <Radio
+              label="Radio with custom theme"
+              selected={store.state.radioSelected}
+              onChange={() =>
+                store.set({ radioSelected: !store.state.radioSelected })
+              }
+              skin={RadioSkin}
+            />
+          </div>
 
-        <div style={{ margin: '100px' }}>
-          <NumericInput
-            label="NumericInput with custom theme"
-            value={store.state.numericInputValue}
-            placeholder="0.000000"
-            maxAfterDot={6}
-            onChange={numericInputValue => store.set({ numericInputValue })}
-            skin={InputSkin}
-          />
-        </div>
+          <div style={{ margin: '100px' }}>
+            <NumericInput
+              label="NumericInput with custom theme"
+              value={store.state.numericInputValue}
+              placeholder="0.000000"
+              maxAfterDot={6}
+              onChange={(numericInputValue) => store.set({ numericInputValue })}
+              skin={InputSkin}
+            />
+          </div>
 
-        <div style={{ margin: '100px' }}>
-          <Button
-            label="click here to open modal"
-            onClick={() => store.set({ modalIsOpen: true })}
-            skin={ButtonSkin}
-          />
-          <Modal
-            isOpen={store.state.modalIsOpen}
-            triggerCloseOnOverlayClick
-            onClose={() => store.set({ modalIsOpen: !store.state.modalIsOpen })}
-            skin={ModalSkin}
-          >
-            <h1>Click outside of modal to close</h1>
-          </Modal>
-        </div>
+          <div style={{ margin: '100px' }}>
+            <Button
+              label="click here to open modal"
+              onClick={() => store.set({ modalIsOpen: true })}
+              skin={ButtonSkin}
+            />
+            <Modal
+              isOpen={store.state.modalIsOpen}
+              triggerCloseOnOverlayClick
+              onClose={() =>
+                store.set({ modalIsOpen: !store.state.modalIsOpen })
+              }
+              skin={ModalSkin}
+            >
+              <h1>Click outside of modal to close</h1>
+            </Modal>
+          </div>
 
-        <div style={{ margin: '100px' }}>
-          <Checkbox
-            label="Checkbox with custom theme"
-            checked={store.state.checkboxChecked}
-            onChange={() => store.set({ checkboxChecked: !store.state.checkboxChecked })}
-            skin={CheckboxSkin}
-          />
-        </div>
+          <div style={{ margin: '100px' }}>
+            <Checkbox
+              label="Checkbox with custom theme"
+              checked={store.state.checkboxChecked}
+              onChange={() =>
+                store.set({ checkboxChecked: !store.state.checkboxChecked })
+              }
+              skin={CheckboxSkin}
+            />
+          </div>
 
-        <div style={{ margin: '100px', height: '225px' }}>
-          <Autocomplete
-            label="Autocomplete opening upward"
-            options={MNEMONICS}
-            placeholder="Enter mnemonic..."
-            maxSelections={12}
-            maxVisibleOptions={20}
-            invalidCharsRegex={/[^a-zA-Z]/g}
-            skin={AutocompleteSkin}
-            isOpeningUpward
-          />
-        </div>
+          <div style={{ margin: '100px', height: '225px' }}>
+            <Autocomplete
+              label="Autocomplete opening upward"
+              options={MNEMONICS}
+              placeholder="Enter mnemonic..."
+              maxSelections={12}
+              maxVisibleOptions={20}
+              invalidCharsRegex={/[^a-zA-Z]/g}
+              skin={AutocompleteSkin}
+              isOpeningUpward
+            />
+          </div>
 
-        <div style={{ margin: '0 100px 400px 100px', height: '225px' }}>
-          <Autocomplete
-            label="Autocomplete opening downward"
-            options={MNEMONICS}
-            placeholder="Enter mnemonic..."
-            maxSelections={12}
-            maxVisibleOptions={20}
-            invalidCharsRegex={/[^a-zA-Z]/g}
-            skin={AutocompleteSkin}
-          />
-        </div>
-      </ThemeProvider>
-    ))
+          <div style={{ margin: '0 100px 400px 100px', height: '225px' }}>
+            <Autocomplete
+              label="Autocomplete opening downward"
+              options={MNEMONICS}
+              placeholder="Enter mnemonic..."
+              maxSelections={12}
+              maxVisibleOptions={20}
+              invalidCharsRegex={/[^a-zA-Z]/g}
+              skin={AutocompleteSkin}
+            />
+          </div>
+        </ThemeProvider>
+      )
+    )
   )
 
-  .add('themeOverrides',
-    withState({
-      checked: false,
-      progress: 0,
-      previousOverrides: {
-        [BUTTON]: buttonOverrides,
-        [CHECKBOX]: checkboxOverrides,
-        [PROGRESS_BAR]: progressBarOverrides2
+  .add(
+    'themeOverrides',
+    withState(
+      {
+        checked: false,
+        progress: 0,
+        previousOverrides: {
+          [BUTTON]: buttonOverrides,
+          [CHECKBOX]: checkboxOverrides,
+          [PROGRESS_BAR]: progressBarOverrides2,
+        },
+        themeOverrides: {
+          [BUTTON]: buttonOverrides,
+          [CHECKBOX]: checkboxOverrides,
+          [PROGRESS_BAR]: progressBarOverrides1,
+        },
       },
-      themeOverrides: {
-        [BUTTON]: buttonOverrides,
-        [CHECKBOX]: checkboxOverrides,
-        [PROGRESS_BAR]: progressBarOverrides1
-      }
-    }, store => {
-      const switchOverrides = () => {
-        const { previousOverrides, themeOverrides } = store.state;
-        store.set({
-          previousOverrides: themeOverrides,
-          themeOverrides: previousOverrides
-        });
-      };
+      (store) => {
+        const switchOverrides = () => {
+          const { previousOverrides, themeOverrides } = store.state;
+          store.set({
+            previousOverrides: themeOverrides,
+            themeOverrides: previousOverrides,
+          });
+        };
 
-      return (
-        <ThemeProvider theme={SimpleTheme} themeOverrides={store.state.themeOverrides}>
-          <Gutter padding="30vh 20vw">
-            <Flex row justifyContent="space-around" alignItems="center">
-              <FlexItem>
-                <Button
-                  label="Switch ProgressBar's Theme"
-                  onClick={switchOverrides}
-                  skin={ButtonSkin}
-                />
-              </FlexItem>
+        return (
+          <ThemeProvider
+            theme={SimpleTheme}
+            themeOverrides={store.state.themeOverrides}
+          >
+            <Gutter padding="30vh 20vw">
+              <Flex row justifyContent="space-around" alignItems="center">
+                <FlexItem>
+                  <Button
+                    label="Switch ProgressBar's Theme"
+                    onClick={switchOverrides}
+                    skin={ButtonSkin}
+                  />
+                </FlexItem>
 
-              <FlexItem>
-                <Button
-                  label="+ 10%"
-                  onClick={() => store.set({ progress: store.state.progress + 10 })}
-                  skin={ButtonSkin}
-                />
-              </FlexItem>
+                <FlexItem>
+                  <Button
+                    label="+ 10%"
+                    onClick={() =>
+                      store.set({ progress: store.state.progress + 10 })
+                    }
+                    skin={ButtonSkin}
+                  />
+                </FlexItem>
 
-              <FlexItem>
-                <Button
-                  label="- 10%"
-                  onClick={() => store.set({ progress: store.state.progress - 10 })}
-                  skin={ButtonSkin}
-                />
-              </FlexItem>
+                <FlexItem>
+                  <Button
+                    label="- 10%"
+                    onClick={() =>
+                      store.set({ progress: store.state.progress - 10 })
+                    }
+                    skin={ButtonSkin}
+                  />
+                </FlexItem>
 
-              <FlexItem>
-                <Checkbox
-                  label="Reset"
-                  checked={store.state.checked}
-                  onChange={() => {
-                    store.set({ checked: true, progress: 0 });
-                    setTimeout(() => store.set({ checked: false }), 2000);
-                  }}
-                  skin={CheckboxSkin}
-                />
-              </FlexItem>
-            </Flex>
+                <FlexItem>
+                  <Checkbox
+                    label="Reset"
+                    checked={store.state.checked}
+                    onChange={() => {
+                      store.set({ checked: true, progress: 0 });
+                      setTimeout(() => store.set({ checked: false }), 2000);
+                    }}
+                    skin={CheckboxSkin}
+                  />
+                </FlexItem>
+              </Flex>
 
-            <div style={{ margin: '50px' }}>
-              <ProgressBar
-                label="100% Complete"
-                progress={store.state.progress}
-                skin={ProgressBarSkin}
-              />
-            </div>
-          </Gutter>
-        </ThemeProvider>
-      );
-    })
+              <div style={{ margin: '50px' }}>
+                <ProgressBar
+                  label="100% Complete"
+                  progress={store.state.progress}
+                  skin={ProgressBarSkin}
+                />
+              </div>
+            </Gutter>
+          </ThemeProvider>
+        );
+      }
+    )
   );
diff --git a/stories/Tooltip.stories.js b/stories/Tooltip.stories.js
index b5676d74..08593084 100644
--- a/stories/Tooltip.stories.js
+++ b/stories/Tooltip.stories.js
@@ -20,7 +20,6 @@ import { IDENTIFIERS } from '../source/components';
 import { decorateWithSimpleTheme } from './helpers/theming';
 
 storiesOf('Tooltip', module)
-
   .addDecorator(decorateWithSimpleTheme)
 
   // ====== Stories ======
@@ -57,10 +56,7 @@ storiesOf('Tooltip', module)
 
   .add('isBounded', () => (
     <div className={styles.container}>
-      <Tooltip
-        isBounded
-        tip="Help, I am stuck in this small box"
-      >
+      <Tooltip isBounded tip="Help, I am stuck in this small box">
         hover over me
       </Tooltip>
     </div>
@@ -79,10 +75,7 @@ storiesOf('Tooltip', module)
 
   .add('isOpeningUpward={false}', () => (
     <div className={styles.container}>
-      <Tooltip
-        isOpeningUpward={false}
-        tip="I come from a land down under"
-      >
+      <Tooltip isOpeningUpward={false} tip="I come from a land down under">
         hover over me
       </Tooltip>
     </div>
@@ -90,10 +83,7 @@ storiesOf('Tooltip', module)
 
   .add('arrowRelativeToTip', () => (
     <div className={styles.fitToSize}>
-      <Tooltip
-        arrowRelativeToTip
-        tip="small tip"
-      >
+      <Tooltip arrowRelativeToTip tip="small tip">
         {'this is a really long string for demonstration purposes'}
       </Tooltip>
     </div>
@@ -113,11 +103,7 @@ storiesOf('Tooltip', module)
 
   .add('centered', () => (
     <div className={styles.fitToSize}>
-      <Tooltip
-        arrowRelativeToTip
-        isCentered
-        tip="centered above"
-      >
+      <Tooltip arrowRelativeToTip isCentered tip="centered above">
         {'this is a really long string for demonstration purposes'}
       </Tooltip>
     </div>
@@ -136,12 +122,20 @@ storiesOf('Tooltip', module)
     </div>
   ))
 
+  .add('hidden', () => (
+    <div className={styles.fitToSize}>
+      <Tooltip isShowingOnHover={false} isVisible={false} tip="never shown">
+        Tooltip should not be shown on hover!
+      </Tooltip>
+    </div>
+  ))
+
   .add('theme overrides', () => (
     <div className={styles.container}>
       <Tooltip
         themeOverrides={{
           ...SimpleTheme,
-          [IDENTIFIERS.BUBBLE]: themeOverrides
+          [IDENTIFIERS.BUBBLE]: themeOverrides,
         }}
         isOpeningUpward
         isTransparent={false}
diff --git a/yarn.lock b/yarn.lock
index 936fc6ef..7f887e99 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1980,6 +1980,11 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/eslint-visitor-keys@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
+  integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -2024,6 +2029,11 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
+"@types/json-schema@^7.0.3":
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
+  integrity sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -2108,6 +2118,33 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@typescript-eslint/experimental-utils@1.13.0":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-1.13.0.tgz#b08c60d780c0067de2fb44b04b432f540138301e"
+  integrity sha512-zmpS6SyqG4ZF64ffaJ6uah6tWWWgZ8m+c54XXgwFtUv0jNz8aJAVx8chMCvnk7yl6xwn8d+d96+tWp7fXzTuDg==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    "@typescript-eslint/typescript-estree" "1.13.0"
+    eslint-scope "^4.0.0"
+
+"@typescript-eslint/parser@^1.10.2":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-1.13.0.tgz#61ac7811ea52791c47dc9fd4dd4a184fae9ac355"
+  integrity sha512-ITMBs52PCPgLb2nGPoeT4iU3HdQZHcPaZVw+7CsFagRJHUhyeTgorEwHXhFf3e7Evzi8oujKNpHc8TONth8AdQ==
+  dependencies:
+    "@types/eslint-visitor-keys" "^1.0.0"
+    "@typescript-eslint/experimental-utils" "1.13.0"
+    "@typescript-eslint/typescript-estree" "1.13.0"
+    eslint-visitor-keys "^1.0.0"
+
+"@typescript-eslint/typescript-estree@1.13.0":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-1.13.0.tgz#8140f17d0f60c03619798f1d628b8434913dc32e"
+  integrity sha512-b5rCmd2e6DCC6tCTN9GSUAuxdYwCM/k/2wdjHGrIRGPSJotWMCe/dGpi66u42bhuh8q3QBzqM4TMA1GUUCJvdw==
+  dependencies:
+    lodash.unescape "4.0.1"
+    semver "5.5.0"
+
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@@ -2309,6 +2346,11 @@ acorn-jsx@^3.0.0:
   dependencies:
     acorn "^3.0.4"
 
+acorn-jsx@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
+  integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
+
 acorn-walk@^6.0.1:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
@@ -2329,6 +2371,11 @@ acorn@^6.0.1, acorn@^6.2.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.0.tgz#b659d2ffbafa24baf5db1cdbb2c94a983ecd2784"
   integrity sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==
 
+acorn@^6.0.7:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
+  integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
+
 acorn@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
@@ -2438,6 +2485,16 @@ ajv@^6.5.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^6.9.1:
+  version "6.12.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.2.tgz#c629c5eced17baf314437918d2da88c99d5958cd"
+  integrity sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
@@ -3927,6 +3984,15 @@ cliui@^3.2.0:
     strip-ansi "^3.0.1"
     wrap-ansi "^2.0.0"
 
+cliui@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
+  integrity sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==
+  dependencies:
+    string-width "^3.1.0"
+    strip-ansi "^5.2.0"
+    wrap-ansi "^5.1.0"
+
 cliui@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
@@ -4098,6 +4164,21 @@ concat-stream@^1.5.0, concat-stream@^1.6.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concurrently@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.2.0.tgz#ead55121d08a0fc817085584c123cedec2e08975"
+  integrity sha512-XxcDbQ4/43d6CxR7+iV8IZXhur4KbmEJk1CetVMUqCy34z9l0DkszbY+/9wvmSnToTej0SYomc2WSRH+L0zVJw==
+  dependencies:
+    chalk "^2.4.2"
+    date-fns "^2.0.1"
+    lodash "^4.17.15"
+    read-pkg "^4.0.1"
+    rxjs "^6.5.2"
+    spawn-command "^0.0.2-1"
+    supports-color "^6.1.0"
+    tree-kill "^1.2.2"
+    yargs "^13.3.0"
+
 configstore@^3.0.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.2.tgz#c6f25defaeef26df12dd33414b001fe81a543f8f"
@@ -4218,6 +4299,11 @@ core-js@^3.0.1, core-js@^3.0.4:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.5.tgz#3dda65611d95699b5eb7742ea451ea052d37aa65"
   integrity sha512-OuvejWH6vIaUo59Ndlh89purNm4DCIy/v3QoYlcGnn+PkYI8BhNHfCuAESrWX+ZPfq9JccVJ+XXgOMy77PJexg==
 
+core-js@^3.1.4:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
+  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4565,6 +4651,11 @@ data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@^2.0.1:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.13.0.tgz#d7b8a0a2d392e8d88a8024d0a46b980bbfdbd708"
+  integrity sha512-xm0c61mevGF7f0XpCGtDTGpzEFC/1fpLXHbmFpxZZQJuvByIK2ozm6cSYuU+nxFYOPh2EuCfzUwlTEFwKG+h5w==
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@@ -4591,7 +4682,7 @@ debug@^3.2.5, debug@^3.2.6:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.1.0, debug@^4.1.1:
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
   integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
@@ -5380,7 +5471,7 @@ eslint-scope@^3.7.1:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-scope@^4.0.3:
+eslint-scope@^4.0.0, eslint-scope@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
   integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==
@@ -5388,12 +5479,24 @@ eslint-scope@^4.0.3:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
+eslint-utils@^1.3.1:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
+  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
 eslint-visitor-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
   integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
 
-eslint@4.19.1, eslint@^4.0.0:
+eslint-visitor-keys@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
+  integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
+
+eslint@4.19.1:
   version "4.19.1"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.19.1.tgz#32d1d653e1d90408854bfb296f076ec7e186a300"
   integrity sha512-bT3/1x1EbZB7phzYu7vCr1v3ONuzDtX8WjuM9c0iYxe+cq+pwcKEoQjl7zd3RpC6YOLgnSy3cTN58M2jcoPDIQ==
@@ -5437,7 +5540,49 @@ eslint@4.19.1, eslint@^4.0.0:
     table "4.0.2"
     text-table "~0.2.0"
 
-espree@^3.5.4:
+eslint@^5.0.0:
+  version "5.16.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.16.0.tgz#a1e3ac1aae4a3fbd8296fcf8f7ab7314cbb6abea"
+  integrity sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    ajv "^6.9.1"
+    chalk "^2.1.0"
+    cross-spawn "^6.0.5"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    eslint-scope "^4.0.3"
+    eslint-utils "^1.3.1"
+    eslint-visitor-keys "^1.0.0"
+    espree "^5.0.1"
+    esquery "^1.0.1"
+    esutils "^2.0.2"
+    file-entry-cache "^5.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob "^7.1.2"
+    globals "^11.7.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    inquirer "^6.2.2"
+    js-yaml "^3.13.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.11"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    optionator "^0.8.2"
+    path-is-inside "^1.0.2"
+    progress "^2.0.0"
+    regexpp "^2.0.1"
+    semver "^5.5.1"
+    strip-ansi "^4.0.0"
+    strip-json-comments "^2.0.1"
+    table "^5.2.3"
+    text-table "^0.2.0"
+
+espree@^3.5.2, espree@^3.5.4:
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
   integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
@@ -5445,6 +5590,15 @@ espree@^3.5.4:
     acorn "^5.5.0"
     acorn-jsx "^3.0.0"
 
+espree@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-5.0.1.tgz#5d6526fa4fc7f0788a5cf75b15f30323e2f81f7a"
+  integrity sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==
+  dependencies:
+    acorn "^6.0.7"
+    acorn-jsx "^5.0.0"
+    eslint-visitor-keys "^1.0.0"
+
 esprima@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
@@ -5467,6 +5621,13 @@ esquery@^1.0.0:
   dependencies:
     estraverse "^4.0.0"
 
+esquery@^1.0.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
+  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
+  dependencies:
+    estraverse "^5.1.0"
+
 esrecurse@^4.1.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
@@ -5479,6 +5640,11 @@ estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
   integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=
 
+estraverse@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.1.0.tgz#374309d39fd935ae500e7b92e8a6b4c720e59642"
+  integrity sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==
+
 esutils@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -5758,6 +5924,11 @@ fast-deep-equal@^2.0.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=
 
+fast-deep-equal@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
+  integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
+
 fast-glob@^2.0.2, fast-glob@^2.2.6:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -5780,6 +5951,11 @@ fast-levenshtein@~2.0.4:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fast-password-entropy@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/fast-password-entropy/-/fast-password-entropy-1.1.1.tgz#47ba9933095fd5a32fb184915fc8e76ee19cf429"
+  integrity sha512-dxm29/BPFrNgyEDygg/lf9c2xQR0vnQhG7+hZjAI39M/3um9fD4xiqG6F0ZjW6bya5m9CI0u6YryHGRtxCGCiw==
+
 fault@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.3.tgz#4da88cf979b6b792b4e13c7ec836767725170b7e"
@@ -5841,6 +6017,13 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
+file-entry-cache@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
+  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
+  dependencies:
+    flat-cache "^2.0.1"
+
 file-loader@5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-5.0.2.tgz#7f3d8b4ac85a5e8df61338cfec95d7405f971caa"
@@ -5985,6 +6168,20 @@ flat-cache@^1.2.1:
     graceful-fs "^4.1.2"
     write "^0.2.1"
 
+flat-cache@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
+  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
+  dependencies:
+    flatted "^2.0.0"
+    rimraf "2.6.3"
+    write "1.0.3"
+
+flatted@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
+  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
+
 flow-bin@0.60.1:
   version "0.60.1"
   resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.60.1.tgz#0f4fa7b49be2a916f18cd946fc4a51e32ffe4b48"
@@ -6389,6 +6586,11 @@ globals@^11.0.1, globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.5.0.tgz#6bc840de6771173b191f13d3a9c94d441ee92642"
   integrity sha512-hYyf+kI8dm3nORsiiXUQigOU62hDLfJ9G01uyGMxhc6BKsircrUhC4uJPQPUSuq2GrTmiiEt7ewxlMdBewfmKQ==
 
+globals@^11.7.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
 globalthis@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.0.tgz#c5fb98213a9b4595f59cf3e7074f141b4169daae"
@@ -6838,7 +7040,7 @@ ignore@^3.3.5:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
   integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
-ignore@^4.0.3:
+ignore@^4.0.3, ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
@@ -6863,7 +7065,7 @@ import-fresh@^2.0.0:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
-import-fresh@^3.1.0:
+import-fresh@^3.0.0, import-fresh@^3.1.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
   integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
@@ -6908,10 +7110,10 @@ indent-string@^2.1.0:
   dependencies:
     repeating "^2.0.0"
 
-indent-string@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
-  integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
 indexes-of@^1.0.1:
   version "1.0.1"
@@ -6990,7 +7192,7 @@ inquirer@^3.0.6:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
-inquirer@^6.2.0:
+inquirer@^6.2.0, inquirer@^6.2.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca"
   integrity sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==
@@ -8066,7 +8268,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@^3.13.1:
+js-yaml@^3.13.0, js-yaml@^3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -8589,7 +8791,7 @@ lodash.unescape@4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
   integrity sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=
 
-lodash@4.17.15, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.15:
+lodash@4.17.15, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -10262,23 +10464,29 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
   integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
 
-prettier-eslint@8.8.1:
-  version "8.8.1"
-  resolved "https://registry.yarnpkg.com/prettier-eslint/-/prettier-eslint-8.8.1.tgz#38505163274742f2a0b31653c39e40f37ebd07da"
-  integrity sha512-8YMkJZnA+XVfEW6fPet05jpNmSQbD+Htbh/QyOxQcVf2GIUEZsnGP7ZScaM9Mq2Ra2261eCu60E7/TRIy9coXQ==
+prettier-eslint@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/prettier-eslint/-/prettier-eslint-9.0.1.tgz#fbf507cde7329141cd368c6aeb54a70715d02cf4"
+  integrity sha512-KZT65QTosSAqBBqmrC+RpXbsMRe7Os2YSR9cAfFbDlyPAopzA/S5bioiZ3rpziNQNSJaOxmtXSx07EQ+o2Dlug==
   dependencies:
-    babel-runtime "^6.26.0"
+    "@typescript-eslint/parser" "^1.10.2"
     common-tags "^1.4.0"
+    core-js "^3.1.4"
     dlv "^1.1.0"
-    eslint "^4.0.0"
-    indent-string "^3.2.0"
+    eslint "^5.0.0"
+    indent-string "^4.0.0"
     lodash.merge "^4.6.0"
     loglevel-colored-level-prefix "^1.0.0"
     prettier "^1.7.0"
-    pretty-format "^22.0.3"
+    pretty-format "^23.0.1"
     require-relative "^0.8.7"
-    typescript "^2.5.1"
-    typescript-eslint-parser "^11.0.0"
+    typescript "^3.2.1"
+    vue-eslint-parser "^2.0.2"
+
+prettier@2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
+  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
 
 prettier@^1.7.0:
   version "1.12.1"
@@ -10293,10 +10501,10 @@ pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^22.0.3:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-22.4.3.tgz#f873d780839a9c02e9664c8a082e9ee79eaac16f"
-  integrity sha512-S4oT9/sT6MN7/3COoOy+ZJeA92VmOnveLHgrwBE3Z1W5N9S2A1QGNYiE1z75DAENbJrXXUb+OWXhpJcg05QKQQ==
+pretty-format@^23.0.1:
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"
+  integrity sha512-zf9NV1NSlDLDjycnwm6hpFATCGl/K1lt0R/GdkAK2O5LN/rwJoB+Mh93gGJjut4YbmecbfgLWVGSTCr0Ewvvbw==
   dependencies:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
@@ -10956,6 +11164,15 @@ read-pkg@^3.0.0:
     normalize-package-data "^2.3.2"
     path-type "^3.0.0"
 
+read-pkg@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-4.0.1.tgz#963625378f3e1c4d48c85872b5a6ec7d5d093237"
+  integrity sha1-ljYlN48+HE1IyFhytabsfV0JMjc=
+  dependencies:
+    normalize-package-data "^2.3.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
@@ -11122,6 +11339,11 @@ regexpp@^1.0.1:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.1.0.tgz#0e3516dd0b7904f413d2d4193dce4618c3a689ab"
   integrity sha512-LOPw8FpgdQF9etWMaAfG/WRthIdXJGYp4mJ2Jgn/2lpkbod9jPn0t9UqN7AxBOKNfzRbYyVfgc7Vk4t/MpnXgw==
 
+regexpp@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
+  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
+
 regexpu-core@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.6.0.tgz#2037c18b327cfce8a6fea2a4ec441f2432afb8b6"
@@ -11397,6 +11619,13 @@ rimraf@2, rimraf@2.6.2, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1:
   dependencies:
     glob "^7.0.5"
 
+rimraf@2.6.3:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
+  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@@ -11465,6 +11694,13 @@ rxjs@^6.4.0:
   dependencies:
     tslib "^1.9.0"
 
+rxjs@^6.5.2:
+  version "6.5.5"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.5.tgz#c5c884e3094c8cfee31bf27eb87e54ccfc87f9ec"
+  integrity sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==
+  dependencies:
+    tslib "^1.9.0"
+
 safe-buffer@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
@@ -11592,16 +11828,11 @@ semver-diff@^2.0.0:
   dependencies:
     semver "^5.0.3"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
+"semver@2 || 3 || 4 || 5", semver@5.5.0, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
   integrity sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==
 
-semver@5.4.1:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
-  integrity sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg==
-
 semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -11837,6 +12068,15 @@ slice-ansi@1.0.0:
   dependencies:
     is-fullwidth-code-point "^2.0.0"
 
+slice-ansi@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
+  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
+  dependencies:
+    ansi-styles "^3.2.0"
+    astral-regex "^1.0.0"
+    is-fullwidth-code-point "^2.0.0"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -11950,6 +12190,11 @@ space-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.4.tgz#27910835ae00d0adfcdbd0ad7e611fb9544351fa"
   integrity sha512-UyhMSmeIqZrQn2UdjYpxEkwY9JUrn8pP+7L4f91zRzOQuI8MF1FGLfYU9DKCYeLdo7LXMxwrX5zKFy7eeeVHuA==
 
+spawn-command@^0.0.2-1:
+  version "0.0.2-1"
+  resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0"
+  integrity sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=
+
 spdx-correct@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.0.tgz#05a5b4d7153a195bc92c3c425b69f3b2a9524c82"
@@ -12126,7 +12371,7 @@ string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^3.0.0:
+string-width@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
   integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
@@ -12226,7 +12471,7 @@ string_decoder@~0.10.x:
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
   integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
 
-strip-ansi@5.2.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+strip-ansi@5.2.0, strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
   integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
@@ -12288,7 +12533,7 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
-strip-json-comments@~2.0.1:
+strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
@@ -12391,6 +12636,16 @@ table@4.0.2:
     slice-ansi "1.0.0"
     string-width "^2.1.1"
 
+table@^5.2.3:
+  version "5.4.6"
+  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
+  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
+  dependencies:
+    ajv "^6.10.2"
+    lodash "^4.17.14"
+    slice-ansi "^2.1.0"
+    string-width "^3.0.0"
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -12490,7 +12745,7 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
-text-table@0.2.0, text-table@~0.2.0:
+text-table@0.2.0, text-table@^0.2.0, text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
@@ -12637,6 +12892,11 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
+tree-kill@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
@@ -12723,18 +12983,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript-eslint-parser@^11.0.0:
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/typescript-eslint-parser/-/typescript-eslint-parser-11.0.0.tgz#37dba6a0130dd307504aa4b4b21b0d3dc7d4e9f2"
-  integrity sha512-/fBHTBRBSorWQGKWOOjeMPkzd3o8cOPtFjTRwU5JLNGgVtmMa3KDkiw0R2n+H6ovo9y3OX30/5usm6YTqY44PQ==
-  dependencies:
-    lodash.unescape "4.0.1"
-    semver "5.4.1"
-
-typescript@^2.5.1:
-  version "2.8.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.8.3.tgz#5d817f9b6f31bb871835f4edf0089f21abe6c170"
-  integrity sha512-K7g15Bb6Ra4lKf7Iq2l/I5/En+hLIHmxWZGq3D4DIRNFxMNV6j2SHSvDOqs2tGd4UvD/fJvrwopzQXjLrT7Itw==
+typescript@^3.2.1:
+  version "3.8.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
+  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
 
 ua-parser-js@^0.7.9:
   version "0.7.18"
@@ -13029,6 +13281,18 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-eslint-parser@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
+  integrity sha512-ZezcU71Owm84xVF6gfurBQUGg8WQ+WZGxgDEQu1IHFBZNx7BFZg3L1yHxrCBNNwbwFtE1GuvfJKMtb6Xuwc/Bw==
+  dependencies:
+    debug "^3.1.0"
+    eslint-scope "^3.7.1"
+    eslint-visitor-keys "^1.0.0"
+    espree "^3.5.2"
+    esquery "^1.0.0"
+    lodash "^4.17.4"
+
 w3c-hr-time@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
@@ -13287,6 +13551,15 @@ wrap-ansi@^2.0.0:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
 
+wrap-ansi@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
+  integrity sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==
+  dependencies:
+    ansi-styles "^3.2.0"
+    string-width "^3.0.0"
+    strip-ansi "^5.0.0"
+
 wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
@@ -13329,6 +13602,13 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
+write@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
+  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
+  dependencies:
+    mkdirp "^0.5.1"
+
 write@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
@@ -13401,6 +13681,14 @@ yaml@^1.7.2:
   dependencies:
     "@babel/runtime" "^7.6.3"
 
+yargs-parser@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
+  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^16.1.0:
   version "16.1.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-16.1.0.tgz#73747d53ae187e7b8dbe333f95714c76ea00ecf1"
@@ -13416,6 +13704,22 @@ yargs-parser@^5.0.0:
   dependencies:
     camelcase "^3.0.0"
 
+yargs@^13.3.0:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
+  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
+  dependencies:
+    cliui "^5.0.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^13.1.2"
+
 yargs@^15.0.0:
   version "15.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.1.0.tgz#e111381f5830e863a89550bd4b136bb6a5f37219"

From e87ff82cda72c91aef6eafbd53d436391a82fb42 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 11 Jun 2020 13:58:00 +0200
Subject: [PATCH 044/244] [DDW-170] Improve password repeat feature

---
 source/components/PasswordInput.js | 39 ++++++++++++++++++++----------
 stories/PasswordInput.stories.js   | 16 +++---------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/source/components/PasswordInput.js b/source/components/PasswordInput.js
index 5a9c417e..cd9cee4c 100644
--- a/source/components/PasswordInput.js
+++ b/source/components/PasswordInput.js
@@ -24,20 +24,22 @@ const STATE = {
 };
 
 export type PasswordInputProps = InputProps & {
-  entropyFactor?: number,
   debounceDelay?: number,
-  strengthFeedbacks?: {
-    insecure: string,
-    weak: string,
-    strong: string,
-  },
-  isTooltipOpen: boolean,
+  entropyFactor?: number,
   isShowingTooltipOnFocus: boolean,
   isShowingTooltipOnHover: boolean,
+  isTooltipOpen: boolean,
   minLength?: number,
   minStrongScore?: number,
-  tooltip?: string | boolean,
+  repeatPassword?: string,
   state?: $Values<typeof STATE>,
+  passwordFeedbacks?: {
+    insecure: string,
+    weak: string,
+    strong: string,
+    noMatch: string,
+  },
+  tooltip?: string | boolean,
   useDebounce?: boolean,
 };
 
@@ -46,11 +48,12 @@ export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
 ) => {
   const {
     context,
-    strengthFeedbacks,
+    passwordFeedbacks,
     entropyFactor,
     error,
     minLength,
     minStrongScore,
+    repeatPassword,
     skin,
     state,
     theme,
@@ -77,21 +80,30 @@ export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
   const score = calculatePasswordScore(password, entropyFactor);
   const isValidPassword = password.length >= minLength;
   const isNotEmpty = password.length > 0;
+  const isRepeat = !!repeatPassword;
 
   if (error) {
     dynamicState = PasswordInput.STATE.ERROR;
     passwordFeedback = error;
+  } else if (isRepeat) {
+    if (repeatPassword === props.value) {
+      dynamicState = PasswordInput.STATE.DEFAULT;
+      passwordFeedback = null;
+    } else {
+      dynamicState = PasswordInput.STATE.ERROR;
+      passwordFeedback = passwordFeedbacks.noMatch;
+    }
   } else if (isValidPassword) {
     if (score < minStrongScore) {
       dynamicState = PasswordInput.STATE.WEAK;
-      passwordFeedback = strengthFeedbacks[PasswordInput.STATE.WEAK];
+      passwordFeedback = passwordFeedbacks[PasswordInput.STATE.WEAK];
     } else {
       dynamicState = PasswordInput.STATE.STRONG;
-      passwordFeedback = strengthFeedbacks[PasswordInput.STATE.STRONG];
+      passwordFeedback = passwordFeedbacks[PasswordInput.STATE.STRONG];
     }
   } else if (isNotEmpty) {
     dynamicState = PasswordInput.STATE.INSECURE;
-    passwordFeedback = strengthFeedbacks[PasswordInput.STATE.INSECURE];
+    passwordFeedback = passwordFeedbacks[PasswordInput.STATE.INSECURE];
   }
   return (
     <PasswordInputSkin
@@ -114,10 +126,11 @@ PasswordInput.displayName = 'PasswordInput';
 PasswordInput.defaultProps = {
   debounceDelay: 1000,
   entropyFactor: 0.01,
-  strengthFeedbacks: {
+  passwordFeedbacks: {
     insecure: 'insecure',
     weak: 'weak',
     strong: 'strong',
+    noMatch: "doesn't match",
   },
   isTooltipOpen: false,
   isShowingTooltipOnFocus: true,
diff --git a/stories/PasswordInput.stories.js b/stories/PasswordInput.stories.js
index 5fa752e0..430cb34d 100644
--- a/stories/PasswordInput.stories.js
+++ b/stories/PasswordInput.stories.js
@@ -6,7 +6,6 @@ import { storiesOf } from '@storybook/react';
 import { withState } from '@dump247/storybook-state';
 
 // components
-import { Input } from '../source/components/Input';
 import { PasswordInput } from '../source/components/PasswordInput';
 
 // helpers
@@ -88,10 +87,11 @@ storiesOf('PasswordInput | Skin', module)
     withState({ value: '' }, (store) => (
       <div className={styles.container}>
         <PasswordInput
-          strengthFeedbacks={{
+          passwordFeedbacks={{
             insecure: 'unsicher!',
             weak: 'schwach',
             strong: 'genial!',
+            noMatch: 'Stimmt nicht überein',
           }}
           label="Label"
           value={store.state.value}
@@ -235,17 +235,7 @@ storiesOf('PasswordInput | Integration', module)
           placeholder="Repeat your password …"
           type="password"
           onChange={(value) => store.set({ repeat: value })}
-          state={
-            // eslint-disable-next-line no-nested-ternary
-            store.state.password === store.state.repeat
-              ? PasswordInput.STATE.DEFAULT
-              : PasswordInput.STATE.ERROR
-          }
-          tooltip={
-            store.state.password === store.state.repeat
-              ? false
-              : 'Passwords must match'
-          }
+          repeatPassword={store.state.password}
         />
       </div>
     ))

From bfccf296367a51653416c9cde09db303cdb91920 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 11 Jun 2020 14:01:55 +0200
Subject: [PATCH 045/244] [DDW-170] Update changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 492e4fd5..123e718a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,7 @@ vNext
 
 ### Features
 
-- Adds new `PasswordInput` component [PR 134](https://github.com/input-output-hk/react-polymorph/pull/134)
+- Adds new `PasswordInput` component ([PR 134](https://github.com/input-output-hk/react-polymorph/pull/134), [PR 140](https://github.com/input-output-hk/react-polymorph/pull/140), [PR 141](https://github.com/input-output-hk/react-polymorph/pull/141))
 
 ### Fixes
 

From cbd1151860ddd6a748c7e128209fee7e3b543ad1 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 16 Jun 2020 13:01:42 +0200
Subject: [PATCH 046/244] [DDW-170] Prepare changelog for vNext

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 123e718a..788ee8d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,12 +6,14 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
+- Improved `PasswordInput` component ([PR 140](https://github.com/input-output-hk/react-polymorph/pull/140), [PR 141](https://github.com/input-output-hk/react-polymorph/pull/141))
+
 0.9.3
 =====
 
 ### Features
 
-- Adds new `PasswordInput` component ([PR 134](https://github.com/input-output-hk/react-polymorph/pull/134), [PR 140](https://github.com/input-output-hk/react-polymorph/pull/140), [PR 141](https://github.com/input-output-hk/react-polymorph/pull/141))
+- Adds new `PasswordInput` component ([PR 134](https://github.com/input-output-hk/react-polymorph/pull/134))
 
 ### Fixes
 

From e22648af59c6faed555c221f604f50904131b7e4 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 16 Jun 2020 13:01:46 +0200
Subject: [PATCH 047/244] 0.9.4-rc.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7198dbb4..2f4742c3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.3",
+  "version": "0.9.4-rc.1",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 51a737a12365d7b9063cd2cfa5c14e91bafda40c Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 16 Jun 2020 19:48:09 +0200
Subject: [PATCH 048/244] [DDW-170] Add className prop to password input

---
 source/skins/simple/PasswordInputSkin.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/source/skins/simple/PasswordInputSkin.js b/source/skins/simple/PasswordInputSkin.js
index d4c209cd..cf32d40f 100644
--- a/source/skins/simple/PasswordInputSkin.js
+++ b/source/skins/simple/PasswordInputSkin.js
@@ -16,6 +16,7 @@ type Props = PasswordInputProps & {
 export const PasswordInputSkin = (props: Props) => {
   const [hasInputFocus, setHasInputFocus] = useState(false);
   const {
+    className,
     error,
     debounceDelay,
     isShowingTooltipOnFocus,
@@ -35,7 +36,13 @@ export const PasswordInputSkin = (props: Props) => {
     : true;
   const hasTooltip = hasInitialValueChanged && tooltip != null;
   return (
-    <div className={classnames([theme[themeId].root, theme[themeId][state]])}>
+    <div
+      className={classnames([
+        theme[themeId].root,
+        theme[themeId][state],
+        className,
+      ])}
+    >
       <Tooltip
         arrowRelativeToTip
         isCentered

From e9138adb63dffc55ea9daf67a7b6fd30e047ac66 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 16 Jun 2020 19:48:32 +0200
Subject: [PATCH 049/244] 0.9.4-rc.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2f4742c3..fc9d73b3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.4-rc.1",
+  "version": "0.9.4-rc.2",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From e6ff12a3e0530fca52712a259d76d8e2ce1b982c Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 16 Jun 2020 21:22:57 +0200
Subject: [PATCH 050/244] [DDW-170] Fix tooltip regression on hover

---
 source/themes/simple/SimpleTooltip.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/source/themes/simple/SimpleTooltip.scss b/source/themes/simple/SimpleTooltip.scss
index 63bacaaf..6e6e62db 100644
--- a/source/themes/simple/SimpleTooltip.scss
+++ b/source/themes/simple/SimpleTooltip.scss
@@ -13,6 +13,7 @@ $tooltip-text-color: var(--rp-tooltip-text-color, white) !default;
   &.isShowingOnHover:hover {
     .bubble {
       opacity: 1;
+      visibility: inherit;
     }
   }
 }
@@ -23,6 +24,7 @@ $tooltip-text-color: var(--rp-tooltip-text-color, white) !default;
   color: $tooltip-text-color;
   display: inline-block;
   opacity: 0;
+  visibility: hidden;
   transition: opacity 400ms ease;
 }
 

From f3619b5a3ab79aaebe715c01b909be8841265d86 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 16 Jun 2020 21:23:18 +0200
Subject: [PATCH 051/244] 0.9.4-rc.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fc9d73b3..37f9096a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.4-rc.2",
+  "version": "0.9.4-rc.3",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 461513eddee33114e9a14040d19f36a08757ca9d Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Jun 2020 14:12:12 +0200
Subject: [PATCH 052/244] [DDW-170] Fixes show on focus feature

---
 source/themes/simple/SimpleTooltip.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/themes/simple/SimpleTooltip.scss b/source/themes/simple/SimpleTooltip.scss
index 6e6e62db..2a458234 100644
--- a/source/themes/simple/SimpleTooltip.scss
+++ b/source/themes/simple/SimpleTooltip.scss
@@ -55,6 +55,7 @@ $tooltip-text-color: var(--rp-tooltip-text-color, white) !default;
 .isVisible {
   .bubble {
     opacity: 1;
+    visibility: inherit;
   }
 }
 

From 0b7d7a3ea1c808d7f5fc765584a8b56d4d4176af Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Jun 2020 14:12:36 +0200
Subject: [PATCH 053/244] 0.9.4-rc.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 37f9096a..28515bf1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.4-rc.3",
+  "version": "0.9.4-rc.4",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 197dd77f1a6ff916854f328d9033fbb5b0ccd980 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Jun 2020 16:13:21 +0200
Subject: [PATCH 054/244] [DDW-170] Make tooltip border-radius configurable

---
 source/themes/simple/SimplePasswordInput.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/source/themes/simple/SimplePasswordInput.scss b/source/themes/simple/SimplePasswordInput.scss
index 294e7cf3..3ed3f65f 100644
--- a/source/themes/simple/SimplePasswordInput.scss
+++ b/source/themes/simple/SimplePasswordInput.scss
@@ -3,6 +3,7 @@
 // OVERRIDABLE CONFIGURATION VARIABLES
 
 $password-input-tooltip-font-family: var(--rp-password-input-tooltip-font-family, $theme-font-medium), sans-serif !default;
+$password-input-tooltip-border-radius: var(--rp-password-input-tooltip-border-radius, 5px) !default;
 
 // error
 $password-input-error-bg-color: var(--rp-password-input-error-bg-color, #f4b5bc) !default;
@@ -25,6 +26,7 @@ $password-input-success-score-color: var(--rp-password-input-success-score-color
     }
     .SimpleTooltip_bubble .SimpleBubble_bubble {
       background-color: $color;
+      border-radius: $password-input-tooltip-border-radius;
     }
   }
 }

From c4780522cc777dadd9bcf651cbe6de4aa5132b81 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Jun 2020 16:13:43 +0200
Subject: [PATCH 055/244] 0.9.4-rc.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 28515bf1..3d04843e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.4-rc.4",
+  "version": "0.9.4-rc.5",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From e2c551c3a50a25fd7730e8c2e19d5c1d4d094a5d Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Jun 2020 16:42:35 +0200
Subject: [PATCH 056/244] [DDW-170] Remove margin from password input

---
 source/themes/simple/SimplePasswordInput.scss | 1 -
 stories/PasswordInput.stories.js              | 1 +
 stories/PasswordInput.stories.scss            | 4 ++++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/source/themes/simple/SimplePasswordInput.scss b/source/themes/simple/SimplePasswordInput.scss
index 3ed3f65f..da663a63 100644
--- a/source/themes/simple/SimplePasswordInput.scss
+++ b/source/themes/simple/SimplePasswordInput.scss
@@ -32,7 +32,6 @@ $password-input-success-score-color: var(--rp-password-input-success-score-color
 }
 
 .root {
-  margin-bottom: 20px;
   :global {
     .SimpleTooltip_bubble {
       font-family: $password-input-tooltip-font-family;
diff --git a/stories/PasswordInput.stories.js b/stories/PasswordInput.stories.js
index 430cb34d..a90f465f 100644
--- a/stories/PasswordInput.stories.js
+++ b/stories/PasswordInput.stories.js
@@ -224,6 +224,7 @@ storiesOf('PasswordInput | Integration', module)
     withState({ password: '', repeat: '' }, (store) => (
       <div className={styles.container}>
         <PasswordInput
+          className={styles.firstField}
           label="New Password"
           value={store.state.password}
           placeholder="Enter your password …"
diff --git a/stories/PasswordInput.stories.scss b/stories/PasswordInput.stories.scss
index bc4cb86a..7b7a6f63 100644
--- a/stories/PasswordInput.stories.scss
+++ b/stories/PasswordInput.stories.scss
@@ -1,3 +1,7 @@
 .container {
   padding: 20px;
 }
+
+.firstField {
+  margin-bottom: 20px;
+}

From d4fed25853f55facf056015e98f54f5749d94a1a Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Jun 2020 16:42:46 +0200
Subject: [PATCH 057/244] [DDW-170] Fix custom error logic

---
 source/components/PasswordInput.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/source/components/PasswordInput.js b/source/components/PasswordInput.js
index cd9cee4c..acceb341 100644
--- a/source/components/PasswordInput.js
+++ b/source/components/PasswordInput.js
@@ -85,6 +85,8 @@ export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
   if (error) {
     dynamicState = PasswordInput.STATE.ERROR;
     passwordFeedback = error;
+  } else if (tooltip) {
+    passwordFeedback = tooltip;
   } else if (isRepeat) {
     if (repeatPassword === props.value) {
       dynamicState = PasswordInput.STATE.DEFAULT;
@@ -111,7 +113,7 @@ export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
       theme={composedTheme}
       score={score}
       state={state || dynamicState}
-      tooltip={error || tooltip === false ? null : tooltip || passwordFeedback}
+      tooltip={passwordFeedback}
       {...rest}
     />
   );

From 3de12d4a215b401c180258d7351bf5aaa11322af Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Jun 2020 16:43:05 +0200
Subject: [PATCH 058/244] 0.9.4-rc.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3d04843e..cbb88082 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.4-rc.5",
+  "version": "0.9.4-rc.6",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 1e6e315a27b563f5572e0401a90d9a1326937660 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Jun 2020 18:08:31 +0200
Subject: [PATCH 059/244] [DDW-170] Fix pw input bg colors

---
 source/themes/simple/SimplePasswordInput.scss | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/source/themes/simple/SimplePasswordInput.scss b/source/themes/simple/SimplePasswordInput.scss
index da663a63..18cb80bd 100644
--- a/source/themes/simple/SimplePasswordInput.scss
+++ b/source/themes/simple/SimplePasswordInput.scss
@@ -6,15 +6,15 @@ $password-input-tooltip-font-family: var(--rp-password-input-tooltip-font-family
 $password-input-tooltip-border-radius: var(--rp-password-input-tooltip-border-radius, 5px) !default;
 
 // error
-$password-input-error-bg-color: var(--rp-password-input-error-bg-color, #f4b5bc) !default;
+$password-input-error-bg-color: var(--rp-password-input-error-bg-color, rgba(234, 76, 91, 0.4)) !default;
 $password-input-error-score-color: var(--rp-password-input-error-score-color, #ea4c5b) !default;
 
 // warning
-$password-input-warning-bg-color: var(--rp-password-input-warning-bg-color, #f7d8a1) !default;
+$password-input-warning-bg-color: var(--rp-password-input-warning-bg-color, rgba(242, 162, 24, 0.4)) !default;
 $password-input-warning-score-color: var(--rp-password-input-warning-score-color, #f2a218) !default;
 
 // success
-$password-input-success-bg-color: var(--rp-password-input-success-bg-color, #a8e4c3) !default;
+$password-input-success-bg-color: var(--rp-password-input-success-bg-color, rgba(45, 192, 108, 0.4)) !default;
 $password-input-success-score-color: var(--rp-password-input-success-score-color, #2dc06c) !default;
 
 @mixin tooltipBubble($color) {
@@ -61,6 +61,14 @@ $password-input-success-score-color: var(--rp-password-input-success-score-color
   @include tooltipBubble($password-input-error-score-color);
 }
 
+.insecure, .weak, .strong {
+  :global {
+    .SimpleInput_input {
+      border-bottom-color: transparent;
+    }
+  }
+}
+
 .insecure {
   .indicator {
     background-color: $password-input-error-bg-color;

From bb0aba5280ab4e97d171144175e507cd72c64e83 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Jun 2020 18:08:44 +0200
Subject: [PATCH 060/244] 0.9.4-rc.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cbb88082..1d1cf829 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.4-rc.6",
+  "version": "0.9.4-rc.7",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From e5bccd6707413ebf36ccfb320239a30a3d6ddae6 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 23 Jun 2020 14:39:36 +0200
Subject: [PATCH 061/244] [DDW-170] Add dedicated flag for password repeats

---
 source/components/PasswordInput.js | 6 ++++--
 stories/PasswordInput.stories.js   | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/source/components/PasswordInput.js b/source/components/PasswordInput.js
index acceb341..343c6762 100644
--- a/source/components/PasswordInput.js
+++ b/source/components/PasswordInput.js
@@ -26,6 +26,7 @@ const STATE = {
 export type PasswordInputProps = InputProps & {
   debounceDelay?: number,
   entropyFactor?: number,
+  isPasswordRepeat?: boolean,
   isShowingTooltipOnFocus: boolean,
   isShowingTooltipOnHover: boolean,
   isTooltipOpen: boolean,
@@ -53,6 +54,7 @@ export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
     error,
     minLength,
     minStrongScore,
+    isPasswordRepeat,
     repeatPassword,
     skin,
     state,
@@ -80,14 +82,13 @@ export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
   const score = calculatePasswordScore(password, entropyFactor);
   const isValidPassword = password.length >= minLength;
   const isNotEmpty = password.length > 0;
-  const isRepeat = !!repeatPassword;
 
   if (error) {
     dynamicState = PasswordInput.STATE.ERROR;
     passwordFeedback = error;
   } else if (tooltip) {
     passwordFeedback = tooltip;
-  } else if (isRepeat) {
+  } else if (isPasswordRepeat) {
     if (repeatPassword === props.value) {
       dynamicState = PasswordInput.STATE.DEFAULT;
       passwordFeedback = null;
@@ -134,6 +135,7 @@ PasswordInput.defaultProps = {
     strong: 'strong',
     noMatch: "doesn't match",
   },
+  isPasswordRepeat: false,
   isTooltipOpen: false,
   isShowingTooltipOnFocus: true,
   isShowingTooltipOnHover: true,
diff --git a/stories/PasswordInput.stories.js b/stories/PasswordInput.stories.js
index a90f465f..15a3801a 100644
--- a/stories/PasswordInput.stories.js
+++ b/stories/PasswordInput.stories.js
@@ -237,6 +237,7 @@ storiesOf('PasswordInput | Integration', module)
           type="password"
           onChange={(value) => store.set({ repeat: value })}
           repeatPassword={store.state.password}
+          isPasswordRepeat
         />
       </div>
     ))

From 0816dc44e8ff853a528b0170388f57b27e7df462 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 23 Jun 2020 14:39:56 +0200
Subject: [PATCH 062/244] 0.9.4-rc.8

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1d1cf829..50f73c9b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.4-rc.7",
+  "version": "0.9.4-rc.8",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 7a8de17a41f1b0c6832ff8739f4cb87bbd4d36a2 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 25 Jun 2020 11:49:36 +0200
Subject: [PATCH 063/244] [DDW-170] Improve password repeat feature (#141)

* [DDW-170] Improve password repeat feature

* [DDW-170] Update changelog

* [DDW-170] Prepare changelog for vNext

* 0.9.4-rc.1

* [DDW-170] Add className prop to password input

* 0.9.4-rc.2

* [DDW-170] Fix tooltip regression on hover

* 0.9.4-rc.3

* [DDW-170] Fixes show on focus feature

* 0.9.4-rc.4

* [DDW-170] Make tooltip border-radius configurable

* 0.9.4-rc.5

* [DDW-170] Remove margin from password input

* [DDW-170] Fix custom error logic

* 0.9.4-rc.6

* [DDW-170] Fix pw input bg colors

* 0.9.4-rc.7
---
 CHANGELOG.md                                  |  4 +-
 package.json                                  |  2 +-
 source/components/PasswordInput.js            | 43 +++++++++++++------
 source/skins/simple/PasswordInputSkin.js      |  9 +++-
 source/themes/simple/SimplePasswordInput.scss | 17 ++++++--
 source/themes/simple/SimpleTooltip.scss       |  3 ++
 stories/PasswordInput.stories.js              | 17 ++------
 stories/PasswordInput.stories.scss            |  4 ++
 8 files changed, 65 insertions(+), 34 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 492e4fd5..788ee8d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,12 +6,14 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
+- Improved `PasswordInput` component ([PR 140](https://github.com/input-output-hk/react-polymorph/pull/140), [PR 141](https://github.com/input-output-hk/react-polymorph/pull/141))
+
 0.9.3
 =====
 
 ### Features
 
-- Adds new `PasswordInput` component [PR 134](https://github.com/input-output-hk/react-polymorph/pull/134)
+- Adds new `PasswordInput` component ([PR 134](https://github.com/input-output-hk/react-polymorph/pull/134))
 
 ### Fixes
 
diff --git a/package.json b/package.json
index 7198dbb4..1d1cf829 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.3",
+  "version": "0.9.4-rc.7",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",
diff --git a/source/components/PasswordInput.js b/source/components/PasswordInput.js
index 5a9c417e..acceb341 100644
--- a/source/components/PasswordInput.js
+++ b/source/components/PasswordInput.js
@@ -24,20 +24,22 @@ const STATE = {
 };
 
 export type PasswordInputProps = InputProps & {
-  entropyFactor?: number,
   debounceDelay?: number,
-  strengthFeedbacks?: {
-    insecure: string,
-    weak: string,
-    strong: string,
-  },
-  isTooltipOpen: boolean,
+  entropyFactor?: number,
   isShowingTooltipOnFocus: boolean,
   isShowingTooltipOnHover: boolean,
+  isTooltipOpen: boolean,
   minLength?: number,
   minStrongScore?: number,
-  tooltip?: string | boolean,
+  repeatPassword?: string,
   state?: $Values<typeof STATE>,
+  passwordFeedbacks?: {
+    insecure: string,
+    weak: string,
+    strong: string,
+    noMatch: string,
+  },
+  tooltip?: string | boolean,
   useDebounce?: boolean,
 };
 
@@ -46,11 +48,12 @@ export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
 ) => {
   const {
     context,
-    strengthFeedbacks,
+    passwordFeedbacks,
     entropyFactor,
     error,
     minLength,
     minStrongScore,
+    repeatPassword,
     skin,
     state,
     theme,
@@ -77,21 +80,32 @@ export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
   const score = calculatePasswordScore(password, entropyFactor);
   const isValidPassword = password.length >= minLength;
   const isNotEmpty = password.length > 0;
+  const isRepeat = !!repeatPassword;
 
   if (error) {
     dynamicState = PasswordInput.STATE.ERROR;
     passwordFeedback = error;
+  } else if (tooltip) {
+    passwordFeedback = tooltip;
+  } else if (isRepeat) {
+    if (repeatPassword === props.value) {
+      dynamicState = PasswordInput.STATE.DEFAULT;
+      passwordFeedback = null;
+    } else {
+      dynamicState = PasswordInput.STATE.ERROR;
+      passwordFeedback = passwordFeedbacks.noMatch;
+    }
   } else if (isValidPassword) {
     if (score < minStrongScore) {
       dynamicState = PasswordInput.STATE.WEAK;
-      passwordFeedback = strengthFeedbacks[PasswordInput.STATE.WEAK];
+      passwordFeedback = passwordFeedbacks[PasswordInput.STATE.WEAK];
     } else {
       dynamicState = PasswordInput.STATE.STRONG;
-      passwordFeedback = strengthFeedbacks[PasswordInput.STATE.STRONG];
+      passwordFeedback = passwordFeedbacks[PasswordInput.STATE.STRONG];
     }
   } else if (isNotEmpty) {
     dynamicState = PasswordInput.STATE.INSECURE;
-    passwordFeedback = strengthFeedbacks[PasswordInput.STATE.INSECURE];
+    passwordFeedback = passwordFeedbacks[PasswordInput.STATE.INSECURE];
   }
   return (
     <PasswordInputSkin
@@ -99,7 +113,7 @@ export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
       theme={composedTheme}
       score={score}
       state={state || dynamicState}
-      tooltip={error || tooltip === false ? null : tooltip || passwordFeedback}
+      tooltip={passwordFeedback}
       {...rest}
     />
   );
@@ -114,10 +128,11 @@ PasswordInput.displayName = 'PasswordInput';
 PasswordInput.defaultProps = {
   debounceDelay: 1000,
   entropyFactor: 0.01,
-  strengthFeedbacks: {
+  passwordFeedbacks: {
     insecure: 'insecure',
     weak: 'weak',
     strong: 'strong',
+    noMatch: "doesn't match",
   },
   isTooltipOpen: false,
   isShowingTooltipOnFocus: true,
diff --git a/source/skins/simple/PasswordInputSkin.js b/source/skins/simple/PasswordInputSkin.js
index d4c209cd..cf32d40f 100644
--- a/source/skins/simple/PasswordInputSkin.js
+++ b/source/skins/simple/PasswordInputSkin.js
@@ -16,6 +16,7 @@ type Props = PasswordInputProps & {
 export const PasswordInputSkin = (props: Props) => {
   const [hasInputFocus, setHasInputFocus] = useState(false);
   const {
+    className,
     error,
     debounceDelay,
     isShowingTooltipOnFocus,
@@ -35,7 +36,13 @@ export const PasswordInputSkin = (props: Props) => {
     : true;
   const hasTooltip = hasInitialValueChanged && tooltip != null;
   return (
-    <div className={classnames([theme[themeId].root, theme[themeId][state]])}>
+    <div
+      className={classnames([
+        theme[themeId].root,
+        theme[themeId][state],
+        className,
+      ])}
+    >
       <Tooltip
         arrowRelativeToTip
         isCentered
diff --git a/source/themes/simple/SimplePasswordInput.scss b/source/themes/simple/SimplePasswordInput.scss
index 294e7cf3..18cb80bd 100644
--- a/source/themes/simple/SimplePasswordInput.scss
+++ b/source/themes/simple/SimplePasswordInput.scss
@@ -3,17 +3,18 @@
 // OVERRIDABLE CONFIGURATION VARIABLES
 
 $password-input-tooltip-font-family: var(--rp-password-input-tooltip-font-family, $theme-font-medium), sans-serif !default;
+$password-input-tooltip-border-radius: var(--rp-password-input-tooltip-border-radius, 5px) !default;
 
 // error
-$password-input-error-bg-color: var(--rp-password-input-error-bg-color, #f4b5bc) !default;
+$password-input-error-bg-color: var(--rp-password-input-error-bg-color, rgba(234, 76, 91, 0.4)) !default;
 $password-input-error-score-color: var(--rp-password-input-error-score-color, #ea4c5b) !default;
 
 // warning
-$password-input-warning-bg-color: var(--rp-password-input-warning-bg-color, #f7d8a1) !default;
+$password-input-warning-bg-color: var(--rp-password-input-warning-bg-color, rgba(242, 162, 24, 0.4)) !default;
 $password-input-warning-score-color: var(--rp-password-input-warning-score-color, #f2a218) !default;
 
 // success
-$password-input-success-bg-color: var(--rp-password-input-success-bg-color, #a8e4c3) !default;
+$password-input-success-bg-color: var(--rp-password-input-success-bg-color, rgba(45, 192, 108, 0.4)) !default;
 $password-input-success-score-color: var(--rp-password-input-success-score-color, #2dc06c) !default;
 
 @mixin tooltipBubble($color) {
@@ -25,12 +26,12 @@ $password-input-success-score-color: var(--rp-password-input-success-score-color
     }
     .SimpleTooltip_bubble .SimpleBubble_bubble {
       background-color: $color;
+      border-radius: $password-input-tooltip-border-radius;
     }
   }
 }
 
 .root {
-  margin-bottom: 20px;
   :global {
     .SimpleTooltip_bubble {
       font-family: $password-input-tooltip-font-family;
@@ -60,6 +61,14 @@ $password-input-success-score-color: var(--rp-password-input-success-score-color
   @include tooltipBubble($password-input-error-score-color);
 }
 
+.insecure, .weak, .strong {
+  :global {
+    .SimpleInput_input {
+      border-bottom-color: transparent;
+    }
+  }
+}
+
 .insecure {
   .indicator {
     background-color: $password-input-error-bg-color;
diff --git a/source/themes/simple/SimpleTooltip.scss b/source/themes/simple/SimpleTooltip.scss
index 63bacaaf..2a458234 100644
--- a/source/themes/simple/SimpleTooltip.scss
+++ b/source/themes/simple/SimpleTooltip.scss
@@ -13,6 +13,7 @@ $tooltip-text-color: var(--rp-tooltip-text-color, white) !default;
   &.isShowingOnHover:hover {
     .bubble {
       opacity: 1;
+      visibility: inherit;
     }
   }
 }
@@ -23,6 +24,7 @@ $tooltip-text-color: var(--rp-tooltip-text-color, white) !default;
   color: $tooltip-text-color;
   display: inline-block;
   opacity: 0;
+  visibility: hidden;
   transition: opacity 400ms ease;
 }
 
@@ -53,6 +55,7 @@ $tooltip-text-color: var(--rp-tooltip-text-color, white) !default;
 .isVisible {
   .bubble {
     opacity: 1;
+    visibility: inherit;
   }
 }
 
diff --git a/stories/PasswordInput.stories.js b/stories/PasswordInput.stories.js
index 5fa752e0..a90f465f 100644
--- a/stories/PasswordInput.stories.js
+++ b/stories/PasswordInput.stories.js
@@ -6,7 +6,6 @@ import { storiesOf } from '@storybook/react';
 import { withState } from '@dump247/storybook-state';
 
 // components
-import { Input } from '../source/components/Input';
 import { PasswordInput } from '../source/components/PasswordInput';
 
 // helpers
@@ -88,10 +87,11 @@ storiesOf('PasswordInput | Skin', module)
     withState({ value: '' }, (store) => (
       <div className={styles.container}>
         <PasswordInput
-          strengthFeedbacks={{
+          passwordFeedbacks={{
             insecure: 'unsicher!',
             weak: 'schwach',
             strong: 'genial!',
+            noMatch: 'Stimmt nicht überein',
           }}
           label="Label"
           value={store.state.value}
@@ -224,6 +224,7 @@ storiesOf('PasswordInput | Integration', module)
     withState({ password: '', repeat: '' }, (store) => (
       <div className={styles.container}>
         <PasswordInput
+          className={styles.firstField}
           label="New Password"
           value={store.state.password}
           placeholder="Enter your password …"
@@ -235,17 +236,7 @@ storiesOf('PasswordInput | Integration', module)
           placeholder="Repeat your password …"
           type="password"
           onChange={(value) => store.set({ repeat: value })}
-          state={
-            // eslint-disable-next-line no-nested-ternary
-            store.state.password === store.state.repeat
-              ? PasswordInput.STATE.DEFAULT
-              : PasswordInput.STATE.ERROR
-          }
-          tooltip={
-            store.state.password === store.state.repeat
-              ? false
-              : 'Passwords must match'
-          }
+          repeatPassword={store.state.password}
         />
       </div>
     ))
diff --git a/stories/PasswordInput.stories.scss b/stories/PasswordInput.stories.scss
index bc4cb86a..7b7a6f63 100644
--- a/stories/PasswordInput.stories.scss
+++ b/stories/PasswordInput.stories.scss
@@ -1,3 +1,7 @@
 .container {
   padding: 20px;
 }
+
+.firstField {
+  margin-bottom: 20px;
+}

From c2ce29a02cc6b58bc0c49dcbe4cd4c8b3ad51263 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 16 Jul 2020 00:53:29 +0000
Subject: [PATCH 064/244] Bump lodash from 4.17.15 to 4.17.19

Bumps [lodash](https://github.com/lodash/lodash) from 4.17.15 to 4.17.19.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](https://github.com/lodash/lodash/compare/4.17.15...4.17.19)

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json |  2 +-
 yarn.lock    | 13 ++++---------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 05363264..c9883bd0 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "identity-obj-proxy": "3.0.0",
     "jest": "25.1.0",
     "jest-enzyme": "7.1.2",
-    "lodash": "4.17.15",
+    "lodash": "4.17.19",
     "node-sass": "4.13.0",
     "nodemon": "1.12.1",
     "prettier": "2.0.5",
diff --git a/yarn.lock b/yarn.lock
index 7f887e99..72431a8b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8791,15 +8791,10 @@ lodash.unescape@4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
   integrity sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=
 
-lodash@4.17.15, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
-lodash@^4.0.0, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.3.0, lodash@~4.17.4:
-  version "4.17.13"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.13.tgz#0bdc3a6adc873d2f4e0c4bac285df91b64fc7b93"
-  integrity sha512-vm3/XWXfWtRua0FkUyEHBZy8kCPjErNBT9fJx8Zvs+U6zjqPbTUOpkaoum3O5uiA8sm+yNMHXfYkTUHFoMxFNA==
+lodash@4.17.19, lodash@^4.0.0, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.3.0, lodash@~4.17.4:
+  version "4.17.19"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
+  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
 log-symbols@^2.0.0:
   version "2.2.0"

From 975e7c2d67f3f951999a35fb5a79f00b15d2218a Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 19 Aug 2020 12:37:52 +0200
Subject: [PATCH 065/244] Bump elliptic from 6.4.0 to 6.5.3 (#144)

Bumps [elliptic](https://github.com/indutny/elliptic) from 6.4.0 to 6.5.3.
- [Release notes](https://github.com/indutny/elliptic/releases)
- [Commits](https://github.com/indutny/elliptic/compare/v6.4.0...v6.5.3)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 72431a8b..7aa020f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3368,9 +3368,9 @@ bluebird@^3.3.5, bluebird@^3.5.5:
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
+  version "4.11.9"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
+  integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==
 
 body-parser@1.19.0:
   version "1.19.0"
@@ -5061,9 +5061,9 @@ element-resize-detector@^1.1.15:
     batch-processor "^1.0.0"
 
 elliptic@^6.0.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
-  integrity sha1-ysmvh2LIWDYYcAPI3+GT5eLq5d8=
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
+  integrity sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==
   dependencies:
     bn.js "^4.4.0"
     brorand "^1.0.1"
@@ -6812,12 +6812,12 @@ hash-base@^3.0.0:
     safe-buffer "^5.0.1"
 
 hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
-  integrity sha512-/UETyP0W22QILqS+6HowevwhEFJ3MBJnwTf75Qob9Wz9t0DPuisL8kW8YZMK62dHAKE1c1p+gY1TtOLY+USEHA==
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
   dependencies:
     inherits "^2.0.3"
-    minimalistic-assert "^1.0.0"
+    minimalistic-assert "^1.0.1"
 
 hast-util-parse-selector@^2.0.0:
   version "2.2.3"
@@ -7133,20 +7133,20 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
   integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
 
-inherits@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+inherits@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
 ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
   version "1.3.5"
@@ -9170,7 +9170,7 @@ mini-css-extract-plugin@^0.7.0:
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
-minimalistic-assert@^1.0.0:
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==

From 735a8933de28ec42e154f6ff3d3fc039bd7c38f1 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 21 Sep 2020 12:06:52 +0200
Subject: [PATCH 066/244] [issue-145] Remove deprecated postinstall-build
 package (#146)

* [issue-145] Remove deprecated postinstall-build package

* [issue-145] Update changelog

* 0.9.5-rc.1
---
 CHANGELOG.md | 6 ++++++
 package.json | 4 +---
 yarn.lock    | 5 -----
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 22d04a14..83115d1c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,12 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
+0.9.5
+=====
+
+### Fixes
+- Replaced deprecated postinstall-build package with npm `prepare` lifecycle [PR 146](https://github.com/input-output-hk/react-polymorph/pull/146) 
+
 0.9.4
 =====
 
diff --git a/package.json b/package.json
index c9883bd0..243d00b2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.4",
+  "version": "0.9.5-rc.1",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",
@@ -11,7 +11,6 @@
     "js:watch": "yarn js --watch",
     "lint": "eslint --format=node_modules/eslint-formatter-pretty source stories *.js",
     "prepare": "yarn clean && yarn build",
-    "postinstall": "postinstall-build lib --only-as-dependency",
     "sass": "node 'scripts/prepare-sass-files-for-publishing.js'",
     "sass:watch": "nodemon -e scss --watch source/themes --exec 'yarn sass'",
     "storybook": "start-storybook -p 6543 -c storybook --ci",
@@ -25,7 +24,6 @@
     "create-react-ref": "0.1.0",
     "fast-password-entropy": "1.1.1",
     "filter-react-dom-props": "0.0.2",
-    "postinstall-build": "5.0.1",
     "react-modal": "3.1.12",
     "react-scrollbars-custom": "4.0.21"
   },
diff --git a/yarn.lock b/yarn.lock
index 7aa020f6..e215845a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10439,11 +10439,6 @@ postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postinstall-build@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/postinstall-build/-/postinstall-build-5.0.1.tgz#b917a9079b26178d9a24af5a5cd8cb4a991d11b9"
-  integrity sha1-uRepB5smF42aJK9aXNjLSpkdEbk=
-
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"

From 9b052b529dbbb17c3cd786df04a5040715bd6a04 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 21 Sep 2020 12:08:12 +0200
Subject: [PATCH 067/244] Bump lodash.merge from 4.6.1 to 4.6.2 (#148)

Bumps [lodash.merge](https://github.com/lodash/lodash) from 4.6.1 to 4.6.2.
- [Release notes](https://github.com/lodash/lodash/releases)
- [Commits](https://github.com/lodash/lodash/commits)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index e215845a..3571218b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8767,9 +8767,9 @@ lodash.memoize@^4.1.2:
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
 lodash.merge@^4.6.0:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
-  integrity sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
 lodash.restparam@^3.0.0:
   version "3.6.1"

From 903c02a8e0f963fca905a2c258a07f5f8afc6ecc Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 21 Sep 2020 12:08:58 +0200
Subject: [PATCH 068/244] Bump node-sass from 4.13.0 to 4.13.1 (#147)

Bumps [node-sass](https://github.com/sass/node-sass) from 4.13.0 to 4.13.1.
- [Release notes](https://github.com/sass/node-sass/releases)
- [Changelog](https://github.com/sass/node-sass/blob/master/CHANGELOG.md)
- [Commits](https://github.com/sass/node-sass/compare/v4.13.0...v4.13.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Dominik Guzei <dominik.guzei@gmail.com>
---
 package.json |   2 +-
 yarn.lock    | 120 ++++++---------------------------------------------
 2 files changed, 13 insertions(+), 109 deletions(-)

diff --git a/package.json b/package.json
index 243d00b2..78ed3c42 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "jest": "25.1.0",
     "jest-enzyme": "7.1.2",
     "lodash": "4.17.19",
-    "node-sass": "4.13.0",
+    "node-sass": "4.13.1",
     "nodemon": "1.12.1",
     "prettier": "2.0.5",
     "prettier-eslint": "9.0.1",
diff --git a/yarn.lock b/yarn.lock
index 3571218b..feba1346 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2445,7 +2445,7 @@ ajv-keywords@^3.4.1:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
   integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
 
-ajv@^5.0.0, ajv@^5.1.0, ajv@^5.2.3, ajv@^5.3.0:
+ajv@^5.0.0, ajv@^5.2.3, ajv@^5.3.0:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   integrity sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=
@@ -2864,11 +2864,6 @@ aws-sign2@~0.7.0:
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
   integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
 
-aws4@^1.6.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.7.0.tgz#d4d0e9b9dbfca77bf08eeb0a8a471550fe39e289"
-  integrity sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==
-
 aws4@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
@@ -3739,7 +3734,7 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-chalk@2.4.2, chalk@^2.4.2:
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -3759,15 +3754,6 @@ chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
-  integrity sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
 chalk@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
@@ -4093,13 +4079,6 @@ colors@^1.1.2:
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
   integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
 
-combined-stream@1.0.6, combined-stream@~1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
-  integrity sha1-cj599ugBrFYTETp+RFqbactjKBg=
-  dependencies:
-    delayed-stream "~1.0.0"
-
 combined-stream@^1.0.6, combined-stream@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828"
@@ -5845,11 +5824,6 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@~3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
-  integrity sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=
-
 extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -6249,15 +6223,6 @@ fork-ts-checker-webpack-plugin@1.5.0:
     tapable "^1.0.0"
     worker-rpc "^0.1.0"
 
-form-data@~2.3.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.2.tgz#4970498be604c20c005d4f5c23aecd21d6b49099"
-  integrity sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "1.0.6"
-    mime-types "^2.1.12"
-
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -6518,19 +6483,7 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@~7.1.1:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
-  integrity sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@^7.1.3, glob@^7.1.4:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@~7.1.1:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -6705,14 +6658,6 @@ har-schema@^2.0.0:
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
   integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
 
-har-validator@~5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.0.3.tgz#ba402c266194f15956ef15e0fcf242993f6a7dfd"
-  integrity sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=
-  dependencies:
-    ajv "^5.1.0"
-    har-schema "^2.0.0"
-
 har-validator@~5.1.0:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
@@ -9112,7 +9057,7 @@ mime-db@~1.38.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.38.0.tgz#1a2aab16da9eb167b49c6e4df2d9c68d63d8e2ad"
   integrity sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg==
 
-mime-types@^2.1.12, mime-types@~2.1.17:
+mime-types@^2.1.12:
   version "2.1.18"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
   integrity sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==
@@ -9283,16 +9228,11 @@ mute-stream@0.0.7:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
   integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
-nan@^2.12.1, nan@^2.13.2:
+nan@^2.12.1, nan@^2.13.2, nan@^2.9.2:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
-nan@^2.9.2:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
-  integrity sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==
-
 nanomatch@^1.2.9:
   version "1.2.9"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.9.tgz#879f7150cb2dab7a471259066c104eee6e0fa7c2"
@@ -9498,10 +9438,10 @@ node-releases@^1.1.29, node-releases@^1.1.41:
   dependencies:
     semver "^6.3.0"
 
-node-sass@4.13.0:
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.13.0.tgz#b647288babdd6a1cb726de4545516b31f90da066"
-  integrity sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==
+node-sass@4.13.1:
+  version "4.13.1"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.13.1.tgz#9db5689696bb2eec2c32b98bfea4c7a2e992d0a3"
+  integrity sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -9675,11 +9615,6 @@ nwsapi@^2.2.0:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
   integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
 
-oauth-sign@~0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
-  integrity sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=
-
 oauth-sign@~0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
@@ -10732,7 +10667,7 @@ qs@^6.6.0:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.1.tgz#20082c65cb78223635ab1a9eaca8875a29bf8ec9"
   integrity sha512-Cxm7/SS/y/Z3MHWSxXb8lIFqgqBowP5JMlTUFyJN88y0SGQhVmZnqFK/PeuMX9LzUyWsqqhNxIyg0jlzq946yA==
 
-qs@~6.5.1, qs@~6.5.2:
+qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
@@ -11443,33 +11378,7 @@ request-promise-native@^1.0.7:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-request@^2.83.0:
-  version "2.87.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.87.0.tgz#32f00235cd08d482b4d0d68db93a829c0ed5756e"
-  integrity sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==
-  dependencies:
-    aws-sign2 "~0.7.0"
-    aws4 "^1.6.0"
-    caseless "~0.12.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.1"
-    forever-agent "~0.6.1"
-    form-data "~2.3.1"
-    har-validator "~5.0.3"
-    http-signature "~1.2.0"
-    is-typedarray "~1.0.0"
-    isstream "~0.1.2"
-    json-stringify-safe "~5.0.1"
-    mime-types "~2.1.17"
-    oauth-sign "~0.8.2"
-    performance-now "^2.1.0"
-    qs "~6.5.1"
-    safe-buffer "^5.1.1"
-    tough-cookie "~2.3.3"
-    tunnel-agent "^0.6.0"
-    uuid "^3.1.0"
-
-request@^2.87.0, request@^2.88.0:
+request@^2.83.0, request@^2.87.0, request@^2.88.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
   integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
@@ -12851,7 +12760,7 @@ touch@^3.1.0:
   dependencies:
     nopt "~1.0.10"
 
-tough-cookie@>=2.3.3, tough-cookie@^2.3.3, tough-cookie@~2.3.3:
+tough-cookie@>=2.3.3, tough-cookie@^2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
   integrity sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==
@@ -13225,11 +13134,6 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
-uuid@^3.1.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14"
-  integrity sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==
-
 uuid@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"

From a0226ae221e35e1c5705ecf3476cfd64f45220be Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 19 Oct 2020 16:15:04 +0200
Subject: [PATCH 069/244] [DDW-291] Add PopOver component (smarter tootips)

---
 .eslintrc                               |    3 +
 package.json                            |   30 +-
 source/components/HOC/withTheme.js      |   18 +-
 source/components/PopOver.js            |   71 +
 source/components/ThemeVariables.js     |   11 +
 source/components/index.js              |    3 +-
 source/skins/simple/PopOverSkin.js      |   85 +
 source/skins/simple/index.js            |    4 +-
 source/themes/API/index.js              |    4 +-
 source/themes/API/pop-over.js           |    5 +
 source/themes/simple/SimplePopOver.scss |  131 ++
 source/themes/simple/index.js           |    4 +-
 stories/PopOver.stories.js              |   72 +
 stories/PopOver.stories.scss            |    3 +
 stories/Tooltip.stories.js              |    2 +-
 stories/index.js                        |    1 +
 yarn.lock                               | 2058 ++++++++++++++++++-----
 17 files changed, 2072 insertions(+), 433 deletions(-)
 create mode 100644 source/components/PopOver.js
 create mode 100644 source/components/ThemeVariables.js
 create mode 100644 source/skins/simple/PopOverSkin.js
 create mode 100644 source/themes/API/pop-over.js
 create mode 100644 source/themes/simple/SimplePopOver.scss
 create mode 100644 stories/PopOver.stories.js
 create mode 100644 stories/PopOver.stories.scss

diff --git a/.eslintrc b/.eslintrc
index 587a4b9f..4f1bf731 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -31,16 +31,19 @@
       },
       "allowChildren": true
     }],
+    "react/destructuring-assignment": "off",
     "react/no-did-mount-set-state": "off",
     "react/jsx-no-bind": "off",
     "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
     "react/jsx-closing-bracket-location": 1,
+    "react/jsx-props-no-spreading": "off",
     "react/prefer-stateless-function": "off",
     "react/no-unused-prop-types": "off",
     "react/prop-types": 0,
     "react/require-default-props": "off",
     "react/sort-comp": 0,
     "react/display-name": ["off", { "ignoreTranspilerName": false }],
+    "react/default-props-match-prop-types": ["error", { "allowRequiredDefaults": true }],
     "class-methods-use-this": 0,
     "no-duplicate-imports": 0,
     "no-param-reassign": 0,
diff --git a/package.json b/package.json
index 78ed3c42..d682386d 100644
--- a/package.json
+++ b/package.json
@@ -20,10 +20,12 @@
     "test:watch": "yarn test --watchAll"
   },
   "dependencies": {
+    "@tippyjs/react": "4.2.0",
     "create-react-context": "0.2.2",
     "create-react-ref": "0.1.0",
     "fast-password-entropy": "1.1.1",
     "filter-react-dom-props": "0.0.2",
+    "popper.js": "1.16.1",
     "react-modal": "3.1.12",
     "react-scrollbars-custom": "4.0.21"
   },
@@ -37,9 +39,9 @@
     "@babel/cli": "7.7.4",
     "@babel/core": "7.7.4",
     "@babel/plugin-proposal-class-properties": "7.7.4",
-    "@babel/preset-env": "7.7.4",
-    "@babel/preset-flow": "7.7.4",
-    "@babel/preset-react": "7.7.4",
+    "@babel/preset-env": "7.11.5",
+    "@babel/preset-flow": "7.10.4",
+    "@babel/preset-react": "7.10.4",
     "@dump247/storybook-state": "1.6.1",
     "@storybook/addon-actions": "5.2.8",
     "@storybook/react": "5.2.8",
@@ -55,18 +57,18 @@
     "enzyme": "3.7.0",
     "enzyme-adapter-react-16": "1.15.2",
     "enzyme-to-json": "3.3.4",
-    "eslint": "4.19.1",
-    "eslint-config-airbnb": "16.1.0",
-    "eslint-formatter-pretty": "1.3.0",
-    "eslint-plugin-flowtype": "3.0.0",
-    "eslint-plugin-flowtype-errors": "3.3.6",
-    "eslint-plugin-import": "2.11.0",
-    "eslint-plugin-jsx-a11y": "6.0.2",
-    "eslint-plugin-promise": "3.7.0",
-    "eslint-plugin-react": "7.5.1",
-    "extract-text-webpack-plugin": "2.1.2",
+    "eslint": "7.9.0",
+    "eslint-config-airbnb": "18.2.0",
+    "eslint-formatter-pretty": "4.0.0",
+    "eslint-plugin-flowtype": "5.2.0",
+    "eslint-plugin-flowtype-errors": "4.3.0",
+    "eslint-plugin-import": "2.22.0",
+    "eslint-plugin-jsx-a11y": "6.3.1",
+    "eslint-plugin-promise": "4.2.1",
+    "eslint-plugin-react": "7.21.2",
+    "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "5.0.2",
-    "flow-bin": "0.60.1",
+    "flow-bin": "0.134.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "25.1.0",
     "jest-enzyme": "7.1.2",
diff --git a/source/components/HOC/withTheme.js b/source/components/HOC/withTheme.js
index 6b1aa329..2a90373f 100644
--- a/source/components/HOC/withTheme.js
+++ b/source/components/HOC/withTheme.js
@@ -8,14 +8,16 @@ import { getDisplayName } from '../../utils/props';
 export type ThemeContextProp = {
   skins: Object,
   theme: Object,
-  ROOT_THEME_API: Object
+  ROOT_THEME_API: Object,
 };
 
-export const createEmptyContext = (): ThemeContextProp => ({
-  skins: {},
-  theme: {},
-  ROOT_THEME_API: {}
-});
+export function createEmptyContext(): ThemeContextProp {
+  return {
+    skins: {},
+    theme: {},
+    ROOT_THEME_API: {},
+  };
+}
 
 // withTheme is a HOC that takes a Component as a parameter
 // and returns that Component wrapped within ThemeContext.Consumer.
@@ -27,14 +29,14 @@ export function withTheme<C: ComponentType<any>>(Component: C): C {
     // wraps component in context only
     WrappedComponent = (props: {}) => (
       <ThemeContext.Consumer>
-        {context => <Component context={context} {...props} />}
+        {(context) => <Component context={context} {...props} />}
       </ThemeContext.Consumer>
     );
   } else {
     // wraps component in context AND forwardRef
     WrappedComponent = forwardRef((props: {}, ref: Ref<any>) => (
       <ThemeContext.Consumer>
-        {context => <Component context={context} ref={ref} {...props} />}
+        {(context) => <Component context={context} ref={ref} {...props} />}
       </ThemeContext.Consumer>
     ));
   }
diff --git a/source/components/PopOver.js b/source/components/PopOver.js
new file mode 100644
index 00000000..53a032d6
--- /dev/null
+++ b/source/components/PopOver.js
@@ -0,0 +1,71 @@
+// @flow
+import React, {
+  ComponentType,
+  ReactElement,
+  ReactNode,
+  StatelessFunctionalComponent,
+  useContext,
+} from 'react';
+import { addThemeId, composeTheme } from '../utils/themes';
+import { ThemeContext } from './HOC/ThemeContext';
+import type { ThemeContextProp } from './HOC/withTheme';
+import { IDENTIFIERS } from './index';
+
+/**
+ * PopOver UI component
+ * Use cases: Tooltips, Menus, Flyovers, Bubbles etc.
+ *
+ * Based on https://github.com/atomiks/tippyjs-react
+ * which is based on https://popper.js.org/
+ *
+ * Supports all props as listed here:
+ * https://atomiks.github.io/tippyjs/v6/all-props/
+ *
+ * Known limitations:
+ * Translucent backgrounds cannot be combined with borders because popper.js
+ * handles the main box and arrow as two separate elements and thus the border
+ * of the main box shines through the arrow bg
+ */
+
+export type PopOverProps = {
+  allowHTML?: boolean,
+  children: ReactElement<any>,
+  contentClassName?: string,
+  content: ReactNode,
+  context?: ThemeContextProp,
+  isVisible?: boolean,
+  skin?: ComponentType<any>,
+  theme?: ?Object,
+  themeId?: string,
+  themeOverrides?: { [index: string]: string },
+  themeVariables?: { [index: string]: string },
+};
+
+export function PopOver(
+  props: PopOverProps
+): StatelessFunctionalComponent<PopOverProps> {
+  const { context, skin, theme, themeId, themeOverrides } = props;
+
+  // Theme
+  const themeContext = context || useContext(ThemeContext);
+  if (!themeContext) {
+    throw new Error('No theming context provided.');
+  }
+  const composedTheme = composeTheme(
+    addThemeId(theme || themeContext.theme, themeId),
+    addThemeId(themeOverrides, themeId),
+    themeContext.ROOT_THEME_API
+  );
+
+  // Skin
+  const PopOverSkin = skin || themeContext.skins[IDENTIFIERS.POP_OVER];
+  return <PopOverSkin {...props} theme={composedTheme} />;
+}
+
+PopOver.defaultProps = {
+  allowHTML: false,
+  theme: null,
+  themeId: IDENTIFIERS.POP_OVER,
+  themeOverrides: {},
+  themeVariables: {},
+};
diff --git a/source/components/ThemeVariables.js b/source/components/ThemeVariables.js
new file mode 100644
index 00000000..7cdd261c
--- /dev/null
+++ b/source/components/ThemeVariables.js
@@ -0,0 +1,11 @@
+// @flow
+import React from 'react';
+
+type ThemeVariablesProps = {
+  children: Node,
+  vars: { [index: string]: string },
+};
+
+export function ThemeVariables(props: ThemeVariablesProps) {
+  return <div style={props.vars}>{props.children}</div>;
+}
diff --git a/source/components/index.js b/source/components/index.js
index dd44a57d..feb3c18c 100644
--- a/source/components/index.js
+++ b/source/components/index.js
@@ -17,6 +17,7 @@ export const IDENTIFIERS = {
   MODAL: 'modal',
   OPTIONS: 'options',
   PASSWORD_INPUT: 'passwordInput',
+  POP_OVER: 'popOver',
   PROGRESS_BAR: 'progressbar',
   RADIO: 'radio',
   SCROLLBAR: 'scrollbar',
@@ -25,5 +26,5 @@ export const IDENTIFIERS = {
   SWITCH: 'switch',
   TEXT_AREA: 'textarea',
   TOGGLER: 'toggler',
-  TOOLTIP: 'tooltip'
+  TOOLTIP: 'tooltip',
 };
diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
new file mode 100644
index 00000000..975780db
--- /dev/null
+++ b/source/skins/simple/PopOverSkin.js
@@ -0,0 +1,85 @@
+// @flow
+import Tippy from '@tippyjs/react';
+import { isString } from 'lodash';
+import classnames from 'classnames';
+import Popper from 'popper.js';
+import React, { forwardRef, Node } from 'react';
+import type { PopOverProps } from '../../components/PopOver';
+
+const PopOverWrapper = forwardRef(
+  (
+    props: {
+      children?: ?Node,
+      className?: string,
+    },
+    ref
+  ) => {
+    return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      <span className={props.className} tabIndex="0" ref={ref}>
+        {props.children}
+      </span>
+    );
+  }
+);
+
+export function PopOverSkin(props: PopOverProps) {
+  const {
+    allowHTML,
+    children,
+    content,
+    contentClassName,
+    isVisible,
+    theme,
+    themeId,
+    themeOverrides,
+    themeVariables,
+    ...tippyProps
+  } = props;
+  return (
+    <Tippy
+      {...tippyProps}
+      visible={isVisible}
+      content={
+        isString(content) && allowHTML ? (
+          <span dangerouslySetInnerHTML={{ __html: content }} />
+        ) : (
+          content
+        )
+      }
+      className={classnames([theme[themeId].root])}
+      theme="polymorph"
+      plugins={[
+        {
+          // Makes it possible to pass themeVariables props to PopOvers
+          name: 'cssVariables',
+          defaultValue: {},
+          fn(instance: Popper) {
+            return {
+              onCreate() {
+                const { cssVariables } = instance.props;
+                Object.keys(cssVariables).forEach((key) => {
+                  instance.popper.style.setProperty(key, cssVariables[key]);
+                });
+              },
+            };
+          },
+        },
+      ]}
+      popperOptions={{
+        modifiers: [
+          {
+            name: 'computeStyles',
+            options: {
+              // Necessary to avoid sub-pixel rendering issues with arrows
+              gpuAcceleration: false, // true by default
+            },
+          },
+        ],
+      }}
+      cssVariables={themeVariables}
+    >
+      <PopOverWrapper className={contentClassName}>{children}</PopOverWrapper>
+    </Tippy>
+  );
+}
diff --git a/source/skins/simple/index.js b/source/skins/simple/index.js
index 3439761c..f74323c3 100644
--- a/source/skins/simple/index.js
+++ b/source/skins/simple/index.js
@@ -14,6 +14,7 @@ import { LoadingSpinnerSkin } from './LoadingSpinnerSkin';
 import { ModalSkin } from './ModalSkin';
 import { OptionsSkin } from './OptionsSkin';
 import { PasswordInputSkin } from './PasswordInputSkin';
+import { PopOverSkin } from './PopOverSkin';
 import { ProgressBarSkin } from './ProgressBarSkin';
 import { RadioSkin } from './RadioSkin';
 import { ScrollBarSkin } from './ScrollBarSkin';
@@ -39,6 +40,7 @@ export const SimpleSkins = {
   [IDENTIFIERS.MODAL]: ModalSkin,
   [IDENTIFIERS.OPTIONS]: OptionsSkin,
   [IDENTIFIERS.PASSWORD_INPUT]: PasswordInputSkin,
+  [IDENTIFIERS.POP_OVER]: PopOverSkin,
   [IDENTIFIERS.PROGRESS_BAR]: ProgressBarSkin,
   [IDENTIFIERS.RADIO]: RadioSkin,
   [IDENTIFIERS.SCROLLBAR]: ScrollBarSkin,
@@ -47,5 +49,5 @@ export const SimpleSkins = {
   [IDENTIFIERS.SWITCH]: SwitchSkin,
   [IDENTIFIERS.TEXT_AREA]: TextAreaSkin,
   [IDENTIFIERS.TOGGLER]: TogglerSkin,
-  [IDENTIFIERS.TOOLTIP]: TooltipSkin
+  [IDENTIFIERS.TOOLTIP]: TooltipSkin,
 };
diff --git a/source/themes/API/index.js b/source/themes/API/index.js
index d41dc724..7e79a7db 100644
--- a/source/themes/API/index.js
+++ b/source/themes/API/index.js
@@ -17,6 +17,7 @@ import { LOADING_SPINNER_API } from './loadingspinner';
 import { MODAL_THEME_API } from './modal';
 import { OPTIONS_THEME_API } from './options';
 import { PASSWORD_INPUT_THEME_API } from './password-input';
+import { POP_OVER_THEME_API } from './pop-over';
 import { PROGRESS_BAR_THEME_API } from './progressbar';
 import { RADIO_THEME_API } from './radio';
 import { SCROLLBAR_THEME_API } from './scrollbar';
@@ -45,6 +46,7 @@ export const ROOT_THEME_API = {
   [IDENTIFIERS.MODAL]: MODAL_THEME_API,
   [IDENTIFIERS.OPTIONS]: OPTIONS_THEME_API,
   [IDENTIFIERS.PASSWORD_INPUT]: PASSWORD_INPUT_THEME_API,
+  [IDENTIFIERS.POP_OVER]: POP_OVER_THEME_API,
   [IDENTIFIERS.PROGRESS_BAR]: PROGRESS_BAR_THEME_API,
   [IDENTIFIERS.RADIO]: RADIO_THEME_API,
   [IDENTIFIERS.SCROLLBAR]: SCROLLBAR_THEME_API,
@@ -53,7 +55,7 @@ export const ROOT_THEME_API = {
   [IDENTIFIERS.SWITCH]: SWITCH_THEME_API,
   [IDENTIFIERS.TEXT_AREA]: TEXT_AREA_THEME_API,
   [IDENTIFIERS.TOGGLER]: TOGGLER_THEME_API,
-  [IDENTIFIERS.TOOLTIP]: TOOLTIP_THEME_API
+  [IDENTIFIERS.TOOLTIP]: TOOLTIP_THEME_API,
 };
 
 export { IDENTIFIERS };
diff --git a/source/themes/API/pop-over.js b/source/themes/API/pop-over.js
new file mode 100644
index 00000000..14c3879f
--- /dev/null
+++ b/source/themes/API/pop-over.js
@@ -0,0 +1,5 @@
+// @flow
+export const POP_OVER_THEME_API = {
+  root: '',
+  isOpaque: '',
+};
diff --git a/source/themes/simple/SimplePopOver.scss b/source/themes/simple/SimplePopOver.scss
new file mode 100644
index 00000000..6c7d3165
--- /dev/null
+++ b/source/themes/simple/SimplePopOver.scss
@@ -0,0 +1,131 @@
+@import "theme";
+
+// OVERRIDABLE CONFIGURATION VARIABLES
+
+// General styles
+$pop-over-box-shadow: var(--rp-pop-over-box-shadow, 0 1.5px 5px 0 rgba(0, 0, 0, 0.18)) !default;
+$pop-over-font-family: var(--rp-pop-over-font-family, $theme-font-light), sans-serif !default;
+$pop-over-font-size: var(--rp-pop-over-font-size, 14px) !default;
+$pop-over-padding: var(--rp-bubble-padding, 6px 12px) !default;
+
+// Arrow
+
+$pop-over-arrow-size: var(--rp-pop-over-arrow-size, 16px) !default;
+
+// Transparent style
+
+$pop-over-bg-color: var(--rp-pop-over-bg-color, rgba(94, 96, 102, 0.9)) !default;
+$pop-over-text-color: var(--rp-pop-over-text-color, white) !default;
+$pop-over-border-width: var(--rp-pop-over-border-width, 1px) !default;
+$pop-over-border-radius: var(--rp-pop-over-border-radius, 4px) !default;
+$pop-over-border-style: var(--rp-pop-over-border-style, none) !default;
+$pop-over-border-color: var(--rp-pop-over-border-color, transparent) !default;
+
+// Include Tippy.js Stylesheets directly here because we are not pre-processing our SASS files
+// and Webpack doesn't resolve global css includes within node_modules automatically
+
+:global {
+  // Necessary contents from: tippy.js/dist/tippy.css
+  .tippy-box[data-animation=fade][data-state=hidden] {
+    opacity: 0
+  }
+
+  [data-tippy-root] {
+    max-width: calc(100vw - 10px)
+  }
+
+  .tippy-box {
+    position: relative;
+    transition-property: transform, visibility, opacity
+  }
+
+  .tippy-box[data-inertia][data-state=visible] {
+    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11)
+  }
+
+  .tippy-content {
+    position: relative;
+    z-index: 1
+  }
+}
+
+.root {
+  &:global(.tippy-box[data-theme~=polymorph]) {
+    font-family: $pop-over-font-family;
+    font-size: $pop-over-font-size;
+    color: $pop-over-text-color;
+    background-color: $pop-over-bg-color;
+    border-width: $pop-over-border-width;
+    border-style: $pop-over-border-style;
+    border-radius: $pop-over-border-radius;
+    border-color: $pop-over-border-color;
+    box-shadow: $pop-over-box-shadow;
+
+    :global(.tippy-content) {
+      padding: $pop-over-padding;
+    }
+
+    :global(.tippy-arrow) {
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      width: calc(#{$pop-over-arrow-size} * 1.5);
+      height: calc(#{$pop-over-arrow-size} * 1.5);
+      &:before {
+        content: "";
+        display: block;
+        width: $pop-over-arrow-size;
+        height: $pop-over-arrow-size;
+        background-color: $pop-over-bg-color;
+        border-width: $pop-over-border-width;
+        border-color: $pop-over-border-color;
+        border-style: $pop-over-border-style;
+        transform: rotate(45deg);
+      }
+    }
+
+    &[data-placement^='top'] > :global(.tippy-arrow) {
+      top: 100%;
+      justify-content: center;
+      align-items: flex-start;
+      &:before {
+        margin-top: calc(-1 * #{$pop-over-arrow-size} / 2 - #{$pop-over-border-width} * 2);
+      }
+    }
+
+    &[data-placement^='bottom'] > :global(.tippy-arrow) {
+      justify-content: center;
+      align-items: flex-end;
+      bottom: 100%;
+      &:before {
+        margin-bottom: calc(-1 * #{$pop-over-arrow-size} / 2 - #{$pop-over-border-width} * 2);
+      }
+    }
+
+    &[data-placement^='left'] > :global(.tippy-arrow) {
+      justify-content: flex-start;
+      align-items: center;
+      left: 100%;
+      &:before {
+        margin-left: calc(-1 * #{$pop-over-arrow-size} / 2 - #{$pop-over-border-width} * 2);
+      }
+    }
+
+    &[data-placement^='right'] > :global(.tippy-arrow) {
+      justify-content: flex-end;
+      align-items: center;
+      right: 100%;
+      &:before {
+        margin-right: calc(-1 * #{$pop-over-arrow-size} / 2 - #{$pop-over-border-width} * 2);
+      }
+    }
+  }
+
+  i {
+    font-style: italic;
+  }
+
+  b {
+    font-weight: bold;
+  }
+}
diff --git a/source/themes/simple/index.js b/source/themes/simple/index.js
index 3af17b39..ea3e5b96 100644
--- a/source/themes/simple/index.js
+++ b/source/themes/simple/index.js
@@ -20,6 +20,7 @@ import SimpleLoadingSpinner from './SimpleLoadingSpinner.scss';
 import SimpleModal from './SimpleModal.scss';
 import SimpleOptions from './SimpleOptions.scss';
 import SimplePasswordInput from './SimplePasswordInput.scss';
+import SimplePopOver from './SimplePopOver.scss';
 import SimpleProgressBar from './SimpleProgressBar.scss';
 import SimpleRadio from './SimpleRadio.scss';
 import SimpleScrollBar from './SimpleScrollBar.scss';
@@ -52,6 +53,7 @@ export const SimpleTheme = {
   [IDENTIFIERS.MODAL]: SimpleModal,
   [IDENTIFIERS.OPTIONS]: SimpleOptions,
   [IDENTIFIERS.PASSWORD_INPUT]: SimplePasswordInput,
+  [IDENTIFIERS.POP_OVER]: SimplePopOver,
   [IDENTIFIERS.PROGRESS_BAR]: SimpleProgressBar,
   [IDENTIFIERS.RADIO]: SimpleRadio,
   [IDENTIFIERS.SCROLLBAR]: SimpleScrollBar,
@@ -60,5 +62,5 @@ export const SimpleTheme = {
   [IDENTIFIERS.SWITCH]: SimpleSwitch,
   [IDENTIFIERS.TEXT_AREA]: SimpleTextArea,
   [IDENTIFIERS.TOGGLER]: SimpleToggler,
-  [IDENTIFIERS.TOOLTIP]: SimpleTooltip
+  [IDENTIFIERS.TOOLTIP]: SimpleTooltip,
 };
diff --git a/stories/PopOver.stories.js b/stories/PopOver.stories.js
new file mode 100644
index 00000000..c20a7af9
--- /dev/null
+++ b/stories/PopOver.stories.js
@@ -0,0 +1,72 @@
+// @flow
+import React from 'react';
+
+// storybook
+import { storiesOf } from '@storybook/react';
+
+// components
+import { PopOver } from '../source/components/PopOver';
+
+// helpers
+import { decorateWithSimpleTheme } from './helpers/theming';
+
+// custom styles & theme overrides
+import styles from './PopOver.stories.scss';
+
+storiesOf('PopOver', module)
+  .addDecorator(decorateWithSimpleTheme)
+
+  // ====== Stories ======
+  .add('default', () => (
+    <div className={styles.container}>
+      <PopOver content="opens downward because no space above">
+        hover me
+      </PopOver>
+      <div style={{ marginTop: 20 }}>
+        <PopOver content="opens upward because enough space above">
+          Target with enough space above
+        </PopOver>
+      </div>
+      <div style={{ marginTop: 20 }}>
+        <PopOver placement="right" allowHTML content="right side<br/>multiline">
+          Prefer placement on the right side
+        </PopOver>
+      </div>
+      <div style={{ textAlign: 'right' }}>
+        <PopOver placement="left" allowHTML content="left side<br/>multiline">
+          Prefer placement on the left side
+        </PopOver>
+      </div>
+    </div>
+  ))
+
+  .add('allowHTML', () => (
+    <div className={styles.container}>
+      <PopOver
+        isVisible
+        allowHTML
+        content="this is a tip containing <b>HTML</b>"
+      >
+        HTML tip
+      </PopOver>
+    </div>
+  ))
+  .add('theme variables', () => (
+    <div className={styles.container}>
+      <PopOver
+        allowHTML
+        content="this is a special tip with huge arrow and offset"
+        offset={[0, 20]}
+        themeVariables={{
+          '--rp-pop-over-arrow-size': '20px',
+          '--rp-pop-over-bg-color': 'white',
+          '--rp-pop-over-border-style': 'solid',
+          '--rp-pop-over-border-color': '#c6cdd6',
+          '--rp-pop-over-border-radius': '5px',
+          '--rp-pop-over-text-color': 'black',
+        }}
+      >
+        HTML tip
+      </PopOver>
+    </div>
+  ));
diff --git a/stories/PopOver.stories.scss b/stories/PopOver.stories.scss
new file mode 100644
index 00000000..bc4cb86a
--- /dev/null
+++ b/stories/PopOver.stories.scss
@@ -0,0 +1,3 @@
+.container {
+  padding: 20px;
+}
diff --git a/stories/Tooltip.stories.js b/stories/Tooltip.stories.js
index 08593084..c4801b64 100644
--- a/stories/Tooltip.stories.js
+++ b/stories/Tooltip.stories.js
@@ -26,7 +26,7 @@ storiesOf('Tooltip', module)
 
   .add('plain', () => (
     <div className={styles.container}>
-      <Tooltip tip="plain tooltip, nothing special about me">
+      <Tooltip isVisible tip="plain tooltip, nothing special about me">
         hover over me
       </Tooltip>
     </div>
diff --git a/stories/index.js b/stories/index.js
index 1d5fdace..2e7bc137 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -15,6 +15,7 @@ import './Modal.stories';
 import './NumericInput.stories';
 import './Options.stories';
 import './PasswordInput.stories';
+import './PopOver.stories';
 import './ProgressBar.stories';
 import './Radio.stories';
 import './ScrollBar.stories';
diff --git a/yarn.lock b/yarn.lock
index feba1346..5f792a99 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25,6 +25,13 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
+"@babel/code-frame@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
 "@babel/code-frame@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
@@ -32,6 +39,15 @@
   dependencies:
     "@babel/highlight" "^7.8.3"
 
+"@babel/compat-data@^7.10.4", "@babel/compat-data@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.11.0.tgz#e9f73efe09af1355b723a7f39b11bad637d7c99c"
+  integrity sha512-TPSvJfv73ng0pfnEOh17bYMPQbI95+nGWc71Ss4vZdRBHTDqmM9Z8ZV4rYz8Ks7sfzc95n30k6ODIq5UGnXcYQ==
+  dependencies:
+    browserslist "^4.12.0"
+    invariant "^2.2.4"
+    semver "^5.5.0"
+
 "@babel/core@7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.0.tgz#9b00f73554edd67bebc86df8303ef678be3d7b48"
@@ -93,6 +109,15 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.11.5":
+  version "7.11.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.11.6.tgz#b868900f81b163b4d464ea24545c61cbac4dc620"
+  integrity sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==
+  dependencies:
+    "@babel/types" "^7.11.5"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.4.0", "@babel/generator@^7.6.0", "@babel/generator@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
@@ -113,6 +138,13 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/helper-annotate-as-pure@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
+  integrity sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-annotate-as-pure@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce"
@@ -120,6 +152,14 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz#bb0b75f31bf98cbf9ff143c1ae578b87274ae1a3"
+  integrity sha512-L0zGlFrGWZK4PbT8AszSfLTM5sDU1+Az/En9VrdT8/LmEiJt4zXt+Jve9DCAnQcbqDhCI+29y/L93mrDzddCcg==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.7.4.tgz#5f73f2b28580e224b5b9bd03146a4015d6217f5f"
@@ -128,6 +168,23 @@
     "@babel/helper-explode-assignable-expression" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-builder-react-jsx-experimental@^7.10.4", "@babel/helper-builder-react-jsx-experimental@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.11.5.tgz#4ea43dd63857b0a35cd1f1b161dc29b43414e79f"
+  integrity sha512-Vc4aPJnRZKWfzeCBsqTBnzulVNjABVdahSPhtdMD3Vs80ykx4a87jTHtF/VR+alSrDmNvat7l13yrRHauGcHVw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/types" "^7.11.5"
+
+"@babel/helper-builder-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.4.tgz#8095cddbff858e6fa9c326daee54a2f2732c1d5d"
+  integrity sha512-5nPcIZ7+KKDxT1427oBivl9V9YTal7qk0diccnh7RrcgrT/pGFOjgGw1dgryyx1GvHEpXVfoDF6Ak3rTiWh8Rg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-builder-react-jsx@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.7.4.tgz#da188d247508b65375b2c30cf59de187be6b0c66"
@@ -145,6 +202,29 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-compilation-targets@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz#804ae8e3f04376607cc791b9d47d540276332bd2"
+  integrity sha512-a3rYhlsGV0UHNDvrtOXBg8/OpfV0OKTkxKPzIplS1zpx7CygDcWWxckxZeDd3gzPzC4kUT0A4nVFDK0wGMh4MQ==
+  dependencies:
+    "@babel/compat-data" "^7.10.4"
+    browserslist "^4.12.0"
+    invariant "^2.2.4"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
+"@babel/helper-create-class-features-plugin@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz#9f61446ba80e8240b0a5c85c6fdac8459d6f259d"
+  integrity sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-member-expression-to-functions" "^7.10.5"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+
 "@babel/helper-create-class-features-plugin@^7.5.5", "@babel/helper-create-class-features-plugin@^7.6.0", "@babel/helper-create-class-features-plugin@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.7.4.tgz#fce60939fd50618610942320a8d951b3b639da2d"
@@ -157,6 +237,15 @@
     "@babel/helper-replace-supers" "^7.7.4"
     "@babel/helper-split-export-declaration" "^7.7.4"
 
+"@babel/helper-create-regexp-features-plugin@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.4.tgz#fdd60d88524659a0b6959c0579925e425714f3b8"
+  integrity sha512-2/hu58IEPKeoLF45DBwx3XFqsbCXmkdAay4spVr2x0jYgRxrSNp+ePwvSsy9g6YSaNDcKIQVPXk1Ov8S2edk2g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-regex" "^7.10.4"
+    regexpu-core "^4.7.0"
+
 "@babel/helper-create-regexp-features-plugin@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.7.4.tgz#6d5762359fd34f4da1500e4cff9955b5299aaf59"
@@ -165,6 +254,15 @@
     "@babel/helper-regex" "^7.4.4"
     regexpu-core "^4.6.0"
 
+"@babel/helper-define-map@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.10.5.tgz#b53c10db78a640800152692b13393147acb9bb30"
+  integrity sha512-fMw4kgFB720aQFXSVaXr79pjjcW5puTCM16+rECJ/plGS+zByelE8l9nCpV1GibxTnFVmUuYG9U8wYfQHdzOEQ==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/types" "^7.10.5"
+    lodash "^4.17.19"
+
 "@babel/helper-define-map@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.7.4.tgz#2841bf92eb8bd9c906851546fe6b9d45e162f176"
@@ -174,6 +272,13 @@
     "@babel/types" "^7.7.4"
     lodash "^4.17.13"
 
+"@babel/helper-explode-assignable-expression@^7.10.4":
+  version "7.11.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.11.4.tgz#2d8e3470252cc17aba917ede7803d4a7a276a41b"
+  integrity sha512-ux9hm3zR4WV1Y3xXxXkdG/0gxF9nvI0YVmKVhvK9AfMoaQkemL3sJpXw+Xbz65azo8qJiEz2XVDUpK3KYhH3ZQ==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-explode-assignable-expression@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.7.4.tgz#fa700878e008d85dc51ba43e9fb835cddfe05c84"
@@ -182,6 +287,15 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-function-name@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e"
@@ -200,6 +314,13 @@
     "@babel/template" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-get-function-arity@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-get-function-arity@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
@@ -214,6 +335,13 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-hoist-variables@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz#d49b001d1d5a68ca5e6604dda01a6297f7c9381e"
+  integrity sha512-wljroF5PgCk2juF69kanHVs6vrLwIPNp6DLD+Lrl3hoQ3PpPPikaDRNFA+0t81NOoMt2DL6WW/mdU8k4k6ZzuA==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-hoist-variables@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.7.4.tgz#612384e3d823fdfaaf9fce31550fe5d4db0f3d12"
@@ -221,6 +349,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-member-expression-to-functions@^7.10.4", "@babel/helper-member-expression-to-functions@^7.10.5":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz#ae69c83d84ee82f4b42f96e2a09410935a8f26df"
+  integrity sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
 "@babel/helper-member-expression-to-functions@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.7.4.tgz#356438e2569df7321a8326644d4b790d2122cb74"
@@ -242,6 +377,26 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@babel/helper-module-imports@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
+  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.10.5":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz#b16f250229e47211abdd84b34b64737c2ab2d359"
+  integrity sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-simple-access" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.11.0"
+    lodash "^4.17.19"
+
 "@babel/helper-module-transforms@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.7.4.tgz#8d7cdb1e1f8ea3d8c38b067345924ac4f8e0879a"
@@ -254,6 +409,13 @@
     "@babel/types" "^7.7.4"
     lodash "^4.17.13"
 
+"@babel/helper-optimise-call-expression@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz#50dc96413d594f995a77905905b05893cd779673"
+  integrity sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-optimise-call-expression@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.7.4.tgz#034af31370d2995242aa4df402c3b7794b2dcdf2"
@@ -266,6 +428,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
   integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA==
 
+"@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
 "@babel/helper-plugin-utils@^7.8.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
@@ -278,6 +445,23 @@
   dependencies:
     lodash "^4.17.13"
 
+"@babel/helper-regex@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.5.tgz#32dfbb79899073c415557053a19bd055aae50ae0"
+  integrity sha512-68kdUAzDrljqBrio7DYAEgCoJHxppJOERHOgOrDN7WjOzP0ZQ1LsSDRXcemzVZaLvjaJsJEESb6qt+znNuENDg==
+  dependencies:
+    lodash "^4.17.19"
+
+"@babel/helper-remap-async-to-generator@^7.10.4":
+  version "7.11.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.11.4.tgz#4474ea9f7438f18575e30b0cac784045b402a12d"
+  integrity sha512-tR5vJ/vBa9wFy3m5LLv2faapJLnDFxNWff2SAYkSE4rLUdbp7CdObYFgI7wK4T/Mj4UzpjPwzR8Pzmr5m7MHGA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-wrap-function" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-remap-async-to-generator@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.7.4.tgz#c68c2407350d9af0e061ed6726afb4fff16d0234"
@@ -289,6 +473,16 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-replace-supers@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz#d585cd9388ea06e6031e4cd44b6713cbead9e6cf"
+  integrity sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.10.4"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-replace-supers@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.7.4.tgz#3c881a6a6a7571275a72d82e6107126ec9e2cdd2"
@@ -299,6 +493,14 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-simple-access@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz#0f5ccda2945277a2a7a2d3a821e15395edcf3461"
+  integrity sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==
+  dependencies:
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-simple-access@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.7.4.tgz#a169a0adb1b5f418cfc19f22586b2ebf58a9a294"
@@ -307,6 +509,20 @@
     "@babel/template" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-skip-transparent-expression-wrappers@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.11.0.tgz#eec162f112c2f58d3af0af125e3bb57665146729"
+  integrity sha512-0XIdiQln4Elglgjbwo9wuJpL/K7AGCY26kmEt0+pRP0TAj4jjyNq1MjoRvikrTVqKcx4Gysxt4cXvVFXP/JO2Q==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-split-export-declaration@^7.10.4", "@babel/helper-split-export-declaration@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz#f8a491244acf6a676158ac42072911ba83ad099f"
+  integrity sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
 "@babel/helper-split-export-declaration@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8"
@@ -321,6 +537,21 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
+"@babel/helper-wrap-function@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz#8a6f701eab0ff39f765b5a1cfef409990e624b87"
+  integrity sha512-6py45WvEF0MhiLrdxtRjKjufwLL1/ob2qDJgg5JgNdojBAZSAKnAjkyOCNug6n+OBl4VW76XjvgSFTdaMcW0Ug==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-wrap-function@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace"
@@ -358,6 +589,15 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/highlight@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.3.tgz#28f173d04223eaaa59bc1d439a3836e6d1265797"
@@ -372,11 +612,25 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.4.tgz#75ab2d7110c2cf2fa949959afb05fa346d2231bb"
   integrity sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==
 
+"@babel/parser@^7.10.4", "@babel/parser@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
+  integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
+
 "@babel/parser@^7.7.5", "@babel/parser@^7.8.3", "@babel/parser@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.4.tgz#d1dbe64691d60358a974295fa53da074dd2ce8e8"
   integrity sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==
 
+"@babel/plugin-proposal-async-generator-functions@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.5.tgz#3491cabf2f7c179ab820606cec27fed15e0e8558"
+  integrity sha512-cNMCVezQbrRGvXJwm9fu/1sJj9bHdGAgKodZdLqOQIpfoH3raqmRPBM17+lh7CzhiKRRBrGtZL9WcjxSoGYUSg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-remap-async-to-generator" "^7.10.4"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+
 "@babel/plugin-proposal-async-generator-functions@^7.2.0", "@babel/plugin-proposal-async-generator-functions@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz#0351c5ac0a9e927845fffd5b82af476947b7ce6d"
@@ -402,6 +656,14 @@
     "@babel/helper-create-class-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-proposal-class-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz#a33bf632da390a59c7a8c570045d1115cd778807"
+  integrity sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-proposal-decorators@7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.6.0.tgz#6659d2572a17d70abd68123e89a12a43d90aa30c"
@@ -411,6 +673,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-decorators" "^7.2.0"
 
+"@babel/plugin-proposal-dynamic-import@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.4.tgz#ba57a26cb98b37741e9d5bca1b8b0ddf8291f17e"
+  integrity sha512-up6oID1LeidOOASNXgv/CFbgBqTuKJ0cJjz6An5tWD+NVBNlp3VNSBxv2ZdU7SYl3NxJC7agAQDApZusV6uFwQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+
 "@babel/plugin-proposal-dynamic-import@^7.5.0", "@babel/plugin-proposal-dynamic-import@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.7.4.tgz#dde64a7f127691758cbfed6cf70de0fa5879d52d"
@@ -419,6 +689,22 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-dynamic-import" "^7.7.4"
 
+"@babel/plugin-proposal-export-namespace-from@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.10.4.tgz#570d883b91031637b3e2958eea3c438e62c05f54"
+  integrity sha512-aNdf0LY6/3WXkhh0Fdb6Zk9j1NMD8ovj3F6r0+3j837Pn1S1PdNtcwJ5EG9WkVPNHPxyJDaxMaAOVq4eki0qbg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
+"@babel/plugin-proposal-json-strings@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz#593e59c63528160233bd321b1aebe0820c2341db"
+  integrity sha512-fCL7QF0Jo83uy1K0P2YXrfX11tj3lkpN7l4dMv9Y9VkowkhkQDwFHFd8IiwyK5MZjE8UpbgokkgtcReH88Abaw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+
 "@babel/plugin-proposal-json-strings@^7.2.0", "@babel/plugin-proposal-json-strings@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.7.4.tgz#7700a6bfda771d8dc81973249eac416c6b4c697d"
@@ -427,6 +713,30 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-json-strings" "^7.7.4"
 
+"@babel/plugin-proposal-logical-assignment-operators@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.11.0.tgz#9f80e482c03083c87125dee10026b58527ea20c8"
+  integrity sha512-/f8p4z+Auz0Uaf+i8Ekf1iM7wUNLcViFUGiPxKeXvxTSl63B875YPiVdUDdem7hREcI0E0kSpEhS8tF5RphK7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a"
+  integrity sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
+"@babel/plugin-proposal-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz#ce1590ff0a65ad12970a609d78855e9a4c1aef06"
+  integrity sha512-73/G7QoRoeNkLZFxsoCCvlg4ezE4eM+57PnOqgaPOozd5myfj7p0muD1mRVJvbUWbOzD+q3No2bWbaKy+DJ8DA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
 "@babel/plugin-proposal-object-rest-spread@7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.5.tgz#61939744f71ba76a3ae46b5eea18a54c16d22e58"
@@ -435,6 +745,15 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
 
+"@babel/plugin-proposal-object-rest-spread@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.11.0.tgz#bd81f95a1f746760ea43b6c2d3d62b11790ad0af"
+  integrity sha512-wzch41N4yztwoRw0ak+37wxwJM2oiIiy6huGCoqkvSTA9acYWcPfn9Y4aJqmFFJ70KTJUu29f3DQ43uJ9HXzEA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-transform-parameters" "^7.10.4"
+
 "@babel/plugin-proposal-object-rest-spread@^7.5.5", "@babel/plugin-proposal-object-rest-spread@^7.6.2", "@babel/plugin-proposal-object-rest-spread@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.4.tgz#cc57849894a5c774214178c8ab64f6334ec8af71"
@@ -443,6 +762,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.7.4"
 
+"@babel/plugin-proposal-optional-catch-binding@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.4.tgz#31c938309d24a78a49d68fdabffaa863758554dd"
+  integrity sha512-LflT6nPh+GK2MnFiKDyLiqSqVHkQnVf7hdoAvyTnnKj9xB3docGRsdPuxp6qqqW19ifK3xgc9U5/FwrSaCNX5g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+
 "@babel/plugin-proposal-optional-catch-binding@^7.2.0", "@babel/plugin-proposal-optional-catch-binding@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.7.4.tgz#ec21e8aeb09ec6711bc0a39ca49520abee1de379"
@@ -451,6 +778,31 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.7.4"
 
+"@babel/plugin-proposal-optional-chaining@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.11.0.tgz#de5866d0646f6afdaab8a566382fe3a221755076"
+  integrity sha512-v9fZIu3Y8562RRwhm1BbMRxtqZNFmFA2EG+pT2diuU8PT3H6T/KXoZ54KgYisfOFZHV6PfvAiBIZ9Rcz+/JCxA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
+"@babel/plugin-proposal-private-methods@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.4.tgz#b160d972b8fdba5c7d111a145fc8c421fc2a6909"
+  integrity sha512-wh5GJleuI8k3emgTg5KkJK6kHNsGEr0uBTDBuQUBJwckk9xs1ez79ioheEVVxMLyPscB0LfkbVHslQqIzWV6Bw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz#4483cda53041ce3413b7fe2f00022665ddfaa75d"
+  integrity sha512-H+3fOgPnEXFL9zGYtKQe4IDOPKYlZdF1kqFDQRRb8PK4B8af1vAGK04tF5iQAAsui+mHNBQSAtd2/ndEDe9wuA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.4.4", "@babel/plugin-proposal-unicode-property-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.4.tgz#7c239ccaf09470dbe1d453d50057460e84517ebb"
@@ -466,6 +818,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-async-generators@^7.8.0":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-bigint@^7.0.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
@@ -473,6 +832,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-class-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.4.tgz#6644e6a0baa55a61f9e3231f6c9eeb6ee46c124c"
+  integrity sha512-GCSBF7iUle6rNugfURwNmCGG3Z/2+opxAMLs1nND4bhEG5PuxTIggDBoeYYSujAlLtsupzOHYJQgPS3pivwXIA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-decorators@^7.2.0":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.7.4.tgz#3c91cfee2a111663ff3ac21b851140f5a52a4e0b"
@@ -494,6 +860,27 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-dynamic-import@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
+"@babel/plugin-syntax-flow@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.10.4.tgz#53351dd7ae01995e567d04ce42af1a6e0ba846a6"
+  integrity sha512-yxQsX1dJixF4qEEdzVbst3SZQ58Nrooz8NV9Z9GL4byTE25BvJgl5lf0RECUf0fh28rZBb/RYTWn/eeKwCMrZQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-flow@^7.2.0", "@babel/plugin-syntax-flow@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.7.4.tgz#6d91b59e1a0e4c17f36af2e10dd64ef220919d7b"
@@ -508,6 +895,20 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-json-strings@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c"
+  integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-jsx@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.7.4.tgz#dab2b56a36fb6c3c222a1fbc71f7bf97f327a9ec"
@@ -515,6 +916,27 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0", "@babel/plugin-syntax-object-rest-spread@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.7.4.tgz#47cf220d19d6d0d7b154304701f468fc1cc6ff46"
@@ -522,6 +944,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-object-rest-spread@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
 "@babel/plugin-syntax-optional-catch-binding@^7.2.0", "@babel/plugin-syntax-optional-catch-binding@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.7.4.tgz#a3e38f59f4b6233867b4a92dcb0ee05b2c334aa6"
@@ -529,6 +958,27 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-optional-catch-binding@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-top-level-await@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.4.tgz#4bbeb8917b54fcf768364e0a81f560e33a3ef57d"
+  integrity sha512-ni1brg4lXEmWyafKr0ccFWkJG0CeMt4WV1oyeBW6EFObF4oOHclbkj5cARxAPQyAQ2UTuplJyK4nfkXIMMFvsQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-top-level-await@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.7.4.tgz#bd7d8fa7b9fee793a36e4027fd6dd1aa32f946da"
@@ -543,6 +993,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-arrow-functions@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.4.tgz#e22960d77e697c74f41c501d44d73dbf8a6a64cd"
+  integrity sha512-9J/oD1jV0ZCBcgnoFWFq1vJd4msoKb/TCpGNFyyLt0zABdcvgK3aYikZ8HjzB14c26bc7E3Q1yugpwGy2aTPNA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-arrow-functions@^7.2.0", "@babel/plugin-transform-arrow-functions@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.7.4.tgz#76309bd578addd8aee3b379d809c802305a98a12"
@@ -550,6 +1007,15 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-async-to-generator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.4.tgz#41a5017e49eb6f3cda9392a51eef29405b245a37"
+  integrity sha512-F6nREOan7J5UXTLsDsZG3DXmZSVofr2tGNwfdrVwkDWHfQckbQXnXSPfD7iO+c/2HGqycwyLST3DnZ16n+cBJQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-remap-async-to-generator" "^7.10.4"
+
 "@babel/plugin-transform-async-to-generator@^7.5.0", "@babel/plugin-transform-async-to-generator@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.7.4.tgz#694cbeae6d613a34ef0292713fa42fb45c4470ba"
@@ -559,6 +1025,13 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-remap-async-to-generator" "^7.7.4"
 
+"@babel/plugin-transform-block-scoped-functions@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.4.tgz#1afa595744f75e43a91af73b0d998ecfe4ebc2e8"
+  integrity sha512-WzXDarQXYYfjaV1szJvN3AD7rZgZzC1JtjJZ8dMHUyiK8mxPRahynp14zzNjU3VkPqPsO38CzxiWO1c9ARZ8JA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-block-scoped-functions@^7.2.0", "@babel/plugin-transform-block-scoped-functions@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.7.4.tgz#d0d9d5c269c78eaea76227ace214b8d01e4d837b"
@@ -566,6 +1039,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-block-scoping@^7.10.4":
+  version "7.11.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.11.1.tgz#5b7efe98852bef8d652c0b28144cd93a9e4b5215"
+  integrity sha512-00dYeDE0EVEHuuM+26+0w/SCL0BH2Qy7LwHuI4Hi4MH5gkC8/AqMN5uWFJIsoXZrAphiMm1iXzBw6L2T+eA0ew==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-block-scoping@^7.6.0", "@babel/plugin-transform-block-scoping@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.7.4.tgz#200aad0dcd6bb80372f94d9e628ea062c58bf224"
@@ -574,6 +1054,20 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     lodash "^4.17.13"
 
+"@babel/plugin-transform-classes@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.4.tgz#405136af2b3e218bc4a1926228bc917ab1a0adc7"
+  integrity sha512-2oZ9qLjt161dn1ZE0Ms66xBncQH4In8Sqw1YWgBUZuGVJJS5c0OFZXL6dP2MRHrkU/eKhWg8CzFJhRQl50rQxA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-define-map" "^7.10.4"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+    globals "^11.1.0"
+
 "@babel/plugin-transform-classes@^7.5.5", "@babel/plugin-transform-classes@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.7.4.tgz#c92c14be0a1399e15df72667067a8f510c9400ec"
@@ -588,6 +1082,13 @@
     "@babel/helper-split-export-declaration" "^7.7.4"
     globals "^11.1.0"
 
+"@babel/plugin-transform-computed-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.4.tgz#9ded83a816e82ded28d52d4b4ecbdd810cdfc0eb"
+  integrity sha512-JFwVDXcP/hM/TbyzGq3l/XWGut7p46Z3QvqFMXTfk6/09m7xZHJUN9xHfsv7vqqD4YnfI5ueYdSJtXqqBLyjBw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-computed-properties@^7.2.0", "@babel/plugin-transform-computed-properties@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.7.4.tgz#e856c1628d3238ffe12d668eb42559f79a81910d"
@@ -602,6 +1103,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-destructuring@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.4.tgz#70ddd2b3d1bea83d01509e9bb25ddb3a74fc85e5"
+  integrity sha512-+WmfvyfsyF603iPa6825mq6Qrb7uLjTOsa3XOFzlYcYDHSS4QmpOWOL0NNBY5qMbvrcf3tq0Cw+v4lxswOBpgA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-destructuring@^7.6.0", "@babel/plugin-transform-destructuring@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.7.4.tgz#2b713729e5054a1135097b6a67da1b6fe8789267"
@@ -609,6 +1117,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-dotall-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.4.tgz#469c2062105c1eb6a040eaf4fac4b488078395ee"
+  integrity sha512-ZEAVvUTCMlMFAbASYSVQoxIbHm2OkG2MseW6bV2JjIygOjdVv8tuxrCTzj1+Rynh7ODb8GivUy7dzEXzEhuPaA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-dotall-regex@^7.4.4", "@babel/plugin-transform-dotall-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.4.tgz#f7ccda61118c5b7a2599a72d5e3210884a021e96"
@@ -617,6 +1133,13 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-duplicate-keys@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.4.tgz#697e50c9fee14380fe843d1f306b295617431e47"
+  integrity sha512-GL0/fJnmgMclHiBTTWXNlYjYsA7rDrtsazHG6mglaGSTh0KsrW04qml+Bbz9FL0LcJIRwBWL5ZqlNHKTkU3xAA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-duplicate-keys@^7.5.0", "@babel/plugin-transform-duplicate-keys@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.7.4.tgz#3d21731a42e3f598a73835299dd0169c3b90ac91"
@@ -624,6 +1147,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-exponentiation-operator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.4.tgz#5ae338c57f8cf4001bdb35607ae66b92d665af2e"
+  integrity sha512-S5HgLVgkBcRdyQAHbKj+7KyuWx8C6t5oETmUuwz1pt3WTWJhsUV0WIIXuVvfXMxl/QQyHKlSCNNtaIamG8fysw==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-exponentiation-operator@^7.2.0", "@babel/plugin-transform-exponentiation-operator@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.7.4.tgz#dd30c0191e3a1ba19bcc7e389bdfddc0729d5db9"
@@ -640,6 +1171,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-flow" "^7.2.0"
 
+"@babel/plugin-transform-flow-strip-types@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.10.4.tgz#c497957f09e86e3df7296271e9eb642876bf7788"
+  integrity sha512-XTadyuqNst88UWBTdLjM+wEY7BFnY2sYtPyAidfC7M/QaZnSuIZpMvLxqGT7phAcnGyWh/XQFLKcGf04CnvxSQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-flow" "^7.10.4"
+
 "@babel/plugin-transform-flow-strip-types@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.7.4.tgz#cc73f85944782df1d77d80977bc097920a8bf31a"
@@ -648,6 +1187,13 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-flow" "^7.7.4"
 
+"@babel/plugin-transform-for-of@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.4.tgz#c08892e8819d3a5db29031b115af511dbbfebae9"
+  integrity sha512-ItdQfAzu9AlEqmusA/65TqJ79eRcgGmpPPFvBnGILXZH975G0LNjP1yjHvGgfuCxqrPPueXOPe+FsvxmxKiHHQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-for-of@^7.4.4", "@babel/plugin-transform-for-of@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.7.4.tgz#248800e3a5e507b1f103d8b4ca998e77c63932bc"
@@ -655,6 +1201,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.4.tgz#6a467880e0fc9638514ba369111811ddbe2644b7"
+  integrity sha512-OcDCq2y5+E0dVD5MagT5X+yTRbcvFjDI2ZVAottGH6tzqjx/LKpgkUepu3hp/u4tZBzxxpNGwLsAvGBvQ2mJzg==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-function-name@^7.4.4", "@babel/plugin-transform-function-name@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.7.4.tgz#75a6d3303d50db638ff8b5385d12451c865025b1"
@@ -663,6 +1217,13 @@
     "@babel/helper-function-name" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-literals@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.4.tgz#9f42ba0841100a135f22712d0e391c462f571f3c"
+  integrity sha512-Xd/dFSTEVuUWnyZiMu76/InZxLTYilOSr1UlHV+p115Z/Le2Fi1KXkJUYz0b42DfndostYlPub3m8ZTQlMaiqQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-literals@^7.2.0", "@babel/plugin-transform-literals@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.7.4.tgz#27fe87d2b5017a2a5a34d1c41a6b9f6a6262643e"
@@ -670,6 +1231,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-member-expression-literals@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.4.tgz#b1ec44fcf195afcb8db2c62cd8e551c881baf8b7"
+  integrity sha512-0bFOvPyAoTBhtcJLr9VcwZqKmSjFml1iVxvPL0ReomGU53CX53HsM4h2SzckNdkQcHox1bpAqzxBI1Y09LlBSw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-member-expression-literals@^7.2.0", "@babel/plugin-transform-member-expression-literals@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.7.4.tgz#aee127f2f3339fc34ce5e3055d7ffbf7aa26f19a"
@@ -677,6 +1245,15 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-modules-amd@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.5.tgz#1b9cddaf05d9e88b3aad339cb3e445c4f020a9b1"
+  integrity sha512-elm5uruNio7CTLFItVC/rIzKLfQ17+fX7EVz5W0TMgIHFo1zY0Ozzx+lgwhL4plzl8OzVn6Qasx5DeEFyoNiRw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.10.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-amd@^7.5.0", "@babel/plugin-transform-modules-amd@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.7.4.tgz#276b3845ca2b228f2995e453adc2e6f54d72fb71"
@@ -686,6 +1263,16 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-commonjs@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.4.tgz#66667c3eeda1ebf7896d41f1f16b17105a2fbca0"
+  integrity sha512-Xj7Uq5o80HDLlW64rVfDBhao6OX89HKUmb+9vWYaLXBZOma4gA6tw4Ni1O5qVDoZWUV0fxMYA0aYzOawz0l+1w==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-simple-access" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-commonjs@^7.6.0", "@babel/plugin-transform-modules-commonjs@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.7.4.tgz#bee4386e550446343dd52a571eda47851ff857a3"
@@ -696,6 +1283,16 @@
     "@babel/helper-simple-access" "^7.7.4"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-systemjs@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.5.tgz#6270099c854066681bae9e05f87e1b9cadbe8c85"
+  integrity sha512-f4RLO/OL14/FP1AEbcsWMzpbUz6tssRaeQg11RH1BP/XnPpRoVwgeYViMFacnkaw4k4wjRSjn3ip1Uw9TaXuMw==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.10.4"
+    "@babel/helper-module-transforms" "^7.10.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-systemjs@^7.5.0", "@babel/plugin-transform-modules-systemjs@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.7.4.tgz#cd98152339d3e763dfe838b7d4273edaf520bb30"
@@ -705,6 +1302,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-umd@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.4.tgz#9a8481fe81b824654b3a0b65da3df89f3d21839e"
+  integrity sha512-mohW5q3uAEt8T45YT7Qc5ws6mWgJAaL/8BfWD9Dodo1A3RKWli8wTS+WiQ/knF+tXlPirW/1/MqzzGfCExKECA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-modules-umd@^7.2.0", "@babel/plugin-transform-modules-umd@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.7.4.tgz#1027c355a118de0aae9fee00ad7813c584d9061f"
@@ -713,6 +1318,13 @@
     "@babel/helper-module-transforms" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-named-capturing-groups-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.10.4.tgz#78b4d978810b6f3bcf03f9e318f2fc0ed41aecb6"
+  integrity sha512-V6LuOnD31kTkxQPhKiVYzYC/Jgdq53irJC/xBSmqcNcqFGV+PER4l6rU5SH2Vl7bH9mLDHcc0+l9HUOe4RNGKA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+
 "@babel/plugin-transform-named-capturing-groups-regex@^7.6.0", "@babel/plugin-transform-named-capturing-groups-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.7.4.tgz#fb3bcc4ee4198e7385805007373d6b6f42c98220"
@@ -720,6 +1332,13 @@
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
 
+"@babel/plugin-transform-new-target@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.4.tgz#9097d753cb7b024cb7381a3b2e52e9513a9c6888"
+  integrity sha512-YXwWUDAH/J6dlfwqlWsztI2Puz1NtUAubXhOPLQ5gjR/qmQ5U96DY4FQO8At33JN4XPBhrjB8I4eMmLROjjLjw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-new-target@^7.4.4", "@babel/plugin-transform-new-target@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.7.4.tgz#4a0753d2d60639437be07b592a9e58ee00720167"
@@ -727,6 +1346,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-object-super@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.4.tgz#d7146c4d139433e7a6526f888c667e314a093894"
+  integrity sha512-5iTw0JkdRdJvr7sY0vHqTpnruUpTea32JHmq/atIWqsnNussbRzjEDyWep8UNztt1B5IusBYg8Irb0bLbiEBCQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+
 "@babel/plugin-transform-object-super@^7.5.5", "@babel/plugin-transform-object-super@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.7.4.tgz#48488937a2d586c0148451bf51af9d7dda567262"
@@ -735,6 +1362,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-replace-supers" "^7.7.4"
 
+"@babel/plugin-transform-parameters@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.5.tgz#59d339d58d0b1950435f4043e74e2510005e2c4a"
+  integrity sha512-xPHwUj5RdFV8l1wuYiu5S9fqWGM2DrYc24TMvUiRrPVm+SM3XeqU9BcokQX/kEUe+p2RBwy+yoiR1w/Blq6ubw==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-parameters@^7.4.4", "@babel/plugin-transform-parameters@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.7.4.tgz#da4555c97f39b51ac089d31c7380f03bca4075ce"
@@ -744,6 +1379,13 @@
     "@babel/helper-get-function-arity" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-property-literals@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.4.tgz#f6fe54b6590352298785b83edd815d214c42e3c0"
+  integrity sha512-ofsAcKiUxQ8TY4sScgsGeR2vJIsfrzqvFb9GvJ5UdXDzl+MyYCaBj/FGzXuv7qE0aJcjWMILny1epqelnFlz8g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-property-literals@^7.2.0", "@babel/plugin-transform-property-literals@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.7.4.tgz#2388d6505ef89b266103f450f9167e6bd73f98c2"
@@ -773,6 +1415,22 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-react-display-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.10.4.tgz#b5795f4e3e3140419c3611b7a2a3832b9aef328d"
+  integrity sha512-Zd4X54Mu9SBfPGnEcaGcOrVAYOtjT2on8QZkLKEq1S/tHexG39d9XXGZv19VfRrDjPJzFmPfTAqOQS1pfFOujw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-react-jsx-development@^7.10.4":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.11.5.tgz#e1439e6a57ee3d43e9f54ace363fb29cefe5d7b6"
+  integrity sha512-cImAmIlKJ84sDmpQzm4/0q/2xrXlDezQoixy3qoz1NJeZL/8PRon6xZtluvr4H4FzwlDGI5tCcFupMnXGtr+qw==
+  dependencies:
+    "@babel/helper-builder-react-jsx-experimental" "^7.11.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
 "@babel/plugin-transform-react-jsx-self@^7.0.0", "@babel/plugin-transform-react-jsx-self@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.7.4.tgz#81b8fbfd14b2215e8f1c2c3adfba266127b0231c"
@@ -781,6 +1439,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
+"@babel/plugin-transform-react-jsx-self@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.4.tgz#cd301a5fed8988c182ed0b9d55e9bd6db0bd9369"
+  integrity sha512-yOvxY2pDiVJi0axdTWHSMi5T0DILN+H+SaeJeACHKjQLezEzhLx9nEF9xgpBLPtkZsks9cnb5P9iBEi21En3gg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
 "@babel/plugin-transform-react-jsx-source@^7.0.0", "@babel/plugin-transform-react-jsx-source@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.7.4.tgz#8994b1bf6014b133f5a46d3b7d1ee5f5e3e72c10"
@@ -789,6 +1455,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
+"@babel/plugin-transform-react-jsx-source@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.5.tgz#34f1779117520a779c054f2cdd9680435b9222b4"
+  integrity sha512-wTeqHVkN1lfPLubRiZH3o73f4rfon42HpgxUSs86Nc+8QIcm/B9s8NNVXu/gwGcOyd7yDib9ikxoDLxJP0UiDA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
 "@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.7.4.tgz#d91205717fae4e2f84d020cd3057ec02a10f11da"
@@ -798,6 +1472,31 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
+"@babel/plugin-transform-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.4.tgz#673c9f913948764a4421683b2bef2936968fddf2"
+  integrity sha512-L+MfRhWjX0eI7Js093MM6MacKU4M6dnCRa/QPDwYMxjljzSCzzlzKzj9Pk4P3OtrPcxr2N3znR419nr3Xw+65A==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.10.4"
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
+"@babel/plugin-transform-react-pure-annotations@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.4.tgz#3eefbb73db94afbc075f097523e445354a1c6501"
+  integrity sha512-+njZkqcOuS8RaPakrnR9KvxjoG1ASJWpoIv/doyWngId88JoFlPlISenGXjrVacZUIALGUr6eodRs1vmPnF23A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-regenerator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.4.tgz#2015e59d839074e76838de2159db421966fd8b63"
+  integrity sha512-3thAHwtor39A7C04XucbMg17RcZ3Qppfxr22wYzZNcVIkPHfpM9J0SO8zuCV6SZa265kxBJSrfKTvDCYqBFXGw==
+  dependencies:
+    regenerator-transform "^0.14.2"
+
 "@babel/plugin-transform-regenerator@^7.4.5", "@babel/plugin-transform-regenerator@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.7.4.tgz#d18eac0312a70152d7d914cbed2dc3999601cfc0"
@@ -805,6 +1504,13 @@
   dependencies:
     regenerator-transform "^0.14.0"
 
+"@babel/plugin-transform-reserved-words@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.4.tgz#8f2682bcdcef9ed327e1b0861585d7013f8a54dd"
+  integrity sha512-hGsw1O6Rew1fkFbDImZIEqA8GoidwTAilwCyWqLBM9f+e/u/sQMQu7uX6dyokfOayRuuVfKOW4O7HvaBWM+JlQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-reserved-words@^7.2.0", "@babel/plugin-transform-reserved-words@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.7.4.tgz#6a7cf123ad175bb5c69aec8f6f0770387ed3f1eb"
@@ -822,6 +1528,13 @@
     resolve "^1.8.1"
     semver "^5.5.1"
 
+"@babel/plugin-transform-shorthand-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.4.tgz#9fd25ec5cdd555bb7f473e5e6ee1c971eede4dd6"
+  integrity sha512-AC2K/t7o07KeTIxMoHneyX90v3zkm5cjHJEokrPEAGEy3UCp8sLKfnfOIGdZ194fyN4wfX/zZUWT9trJZ0qc+Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-shorthand-properties@^7.2.0", "@babel/plugin-transform-shorthand-properties@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.7.4.tgz#74a0a9b2f6d67a684c6fbfd5f0458eb7ba99891e"
@@ -829,6 +1542,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-spread@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.11.0.tgz#fa84d300f5e4f57752fe41a6d1b3c554f13f17cc"
+  integrity sha512-UwQYGOqIdQJe4aWNyS7noqAnN2VbaczPLiEtln+zPowRNlD+79w3oi2TWfYe0eZgd+gjZCbsydN7lzWysDt+gw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
+
 "@babel/plugin-transform-spread@^7.2.0", "@babel/plugin-transform-spread@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.7.4.tgz#aa673b356fe6b7e70d69b6e33a17fef641008578"
@@ -836,6 +1557,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-sticky-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.4.tgz#8f3889ee8657581130a29d9cc91d7c73b7c4a28d"
+  integrity sha512-Ddy3QZfIbEV0VYcVtFDCjeE4xwVTJWTmUtorAJkn6u/92Z/nWJNV+mILyqHKrUxXYKA2EoCilgoPePymKL4DvQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-regex" "^7.10.4"
+
 "@babel/plugin-transform-sticky-regex@^7.2.0", "@babel/plugin-transform-sticky-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.7.4.tgz#ffb68c05090c30732076b1285dc1401b404a123c"
@@ -844,6 +1573,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-regex" "^7.0.0"
 
+"@babel/plugin-transform-template-literals@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.5.tgz#78bc5d626a6642db3312d9d0f001f5e7639fde8c"
+  integrity sha512-V/lnPGIb+KT12OQikDvgSuesRX14ck5FfJXt6+tXhdkJ+Vsd0lDCVtF6jcB4rNClYFzaB2jusZ+lNISDk2mMMw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-template-literals@^7.4.4", "@babel/plugin-transform-template-literals@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.7.4.tgz#1eb6411736dd3fe87dbd20cc6668e5121c17d604"
@@ -852,6 +1589,13 @@
     "@babel/helper-annotate-as-pure" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-typeof-symbol@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.4.tgz#9509f1a7eec31c4edbffe137c16cc33ff0bc5bfc"
+  integrity sha512-QqNgYwuuW0y0H+kUE/GWSR45t/ccRhe14Fs/4ZRouNNQsyd4o3PG4OtHiIrepbM2WKUBDAXKCAK/Lk4VhzTaGA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-typeof-symbol@^7.2.0", "@babel/plugin-transform-typeof-symbol@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.7.4.tgz#3174626214f2d6de322882e498a38e8371b2140e"
@@ -868,6 +1612,21 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-typescript" "^7.7.4"
 
+"@babel/plugin-transform-unicode-escapes@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.4.tgz#feae523391c7651ddac115dae0a9d06857892007"
+  integrity sha512-y5XJ9waMti2J+e7ij20e+aH+fho7Wb7W8rNuu72aKRwCHFqQdhkdU2lo3uZ9tQuboEJcUFayXdARhcxLQ3+6Fg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-unicode-regex@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.4.tgz#e56d71f9282fac6db09c82742055576d5e6d80a8"
+  integrity sha512-wNfsc4s8N2qnIwpO/WP2ZiSyjfpTamT2C9V9FDH/Ljub9zw6P3SjkXcFmc0RQUt96k2fmIvtla2MMjgTwIAC+A==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-transform-unicode-regex@^7.4.4", "@babel/plugin-transform-unicode-regex@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.4.tgz#a3c0f65b117c4c81c5b6484f2a5e7b95346b83ae"
@@ -876,6 +1635,80 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/preset-env@7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.11.5.tgz#18cb4b9379e3e92ffea92c07471a99a2914e4272"
+  integrity sha512-kXqmW1jVcnB2cdueV+fyBM8estd5mlNfaQi6lwLgRwCby4edpavgbFhiBNjmWA3JpB/yZGSISa7Srf+TwxDQoA==
+  dependencies:
+    "@babel/compat-data" "^7.11.0"
+    "@babel/helper-compilation-targets" "^7.10.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-proposal-async-generator-functions" "^7.10.4"
+    "@babel/plugin-proposal-class-properties" "^7.10.4"
+    "@babel/plugin-proposal-dynamic-import" "^7.10.4"
+    "@babel/plugin-proposal-export-namespace-from" "^7.10.4"
+    "@babel/plugin-proposal-json-strings" "^7.10.4"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.11.0"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.4"
+    "@babel/plugin-proposal-numeric-separator" "^7.10.4"
+    "@babel/plugin-proposal-object-rest-spread" "^7.11.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.10.4"
+    "@babel/plugin-proposal-optional-chaining" "^7.11.0"
+    "@babel/plugin-proposal-private-methods" "^7.10.4"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.10.4"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-class-properties" "^7.10.4"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.10.4"
+    "@babel/plugin-transform-arrow-functions" "^7.10.4"
+    "@babel/plugin-transform-async-to-generator" "^7.10.4"
+    "@babel/plugin-transform-block-scoped-functions" "^7.10.4"
+    "@babel/plugin-transform-block-scoping" "^7.10.4"
+    "@babel/plugin-transform-classes" "^7.10.4"
+    "@babel/plugin-transform-computed-properties" "^7.10.4"
+    "@babel/plugin-transform-destructuring" "^7.10.4"
+    "@babel/plugin-transform-dotall-regex" "^7.10.4"
+    "@babel/plugin-transform-duplicate-keys" "^7.10.4"
+    "@babel/plugin-transform-exponentiation-operator" "^7.10.4"
+    "@babel/plugin-transform-for-of" "^7.10.4"
+    "@babel/plugin-transform-function-name" "^7.10.4"
+    "@babel/plugin-transform-literals" "^7.10.4"
+    "@babel/plugin-transform-member-expression-literals" "^7.10.4"
+    "@babel/plugin-transform-modules-amd" "^7.10.4"
+    "@babel/plugin-transform-modules-commonjs" "^7.10.4"
+    "@babel/plugin-transform-modules-systemjs" "^7.10.4"
+    "@babel/plugin-transform-modules-umd" "^7.10.4"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.10.4"
+    "@babel/plugin-transform-new-target" "^7.10.4"
+    "@babel/plugin-transform-object-super" "^7.10.4"
+    "@babel/plugin-transform-parameters" "^7.10.4"
+    "@babel/plugin-transform-property-literals" "^7.10.4"
+    "@babel/plugin-transform-regenerator" "^7.10.4"
+    "@babel/plugin-transform-reserved-words" "^7.10.4"
+    "@babel/plugin-transform-shorthand-properties" "^7.10.4"
+    "@babel/plugin-transform-spread" "^7.11.0"
+    "@babel/plugin-transform-sticky-regex" "^7.10.4"
+    "@babel/plugin-transform-template-literals" "^7.10.4"
+    "@babel/plugin-transform-typeof-symbol" "^7.10.4"
+    "@babel/plugin-transform-unicode-escapes" "^7.10.4"
+    "@babel/plugin-transform-unicode-regex" "^7.10.4"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.11.5"
+    browserslist "^4.12.0"
+    core-js-compat "^3.6.2"
+    invariant "^2.2.2"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
 "@babel/preset-env@7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.6.0.tgz#aae4141c506100bb2bfaa4ac2a5c12b395619e50"
@@ -932,7 +1765,7 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
-"@babel/preset-env@7.7.4", "@babel/preset-env@^7.4.5", "@babel/preset-env@^7.7.1":
+"@babel/preset-env@^7.4.5", "@babel/preset-env@^7.7.1":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.4.tgz#ccaf309ae8d1ee2409c85a4e2b5e280ceee830f8"
   integrity sha512-Dg+ciGJjwvC1NIe/DGblMbcGq1HOtKbw8RLl4nIjlfcILKEOkWT/vRqPpumswABEBVudii6dnVwrBtzD7ibm4g==
@@ -989,7 +1822,15 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
-"@babel/preset-flow@7.7.4", "@babel/preset-flow@^7.0.0":
+"@babel/preset-flow@7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.10.4.tgz#e0d9c72f8cb02d1633f6a5b7b16763aa2edf659f"
+  integrity sha512-XI6l1CptQCOBv+ZKYwynyswhtOKwpZZp5n0LG1QKCo8erRhqjoQV6nvx61Eg30JHpysWQSBwA2AWRU3pBbSY5g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-flow-strip-types" "^7.10.4"
+
+"@babel/preset-flow@^7.0.0":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.7.4.tgz#99c1349b6fd7132783196de181e6b32d0949427e"
   integrity sha512-6LbUqcHD8BcRtXMOp5bc5nJeU8RlKh6q5U8TgZeCrf9ebBdW8Wyy5ujAUnbJfmzQ56Kkq5XtwErC/5+5RHyFYA==
@@ -997,6 +1838,17 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-flow-strip-types" "^7.7.4"
 
+"@babel/preset-modules@^0.1.3":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.4.tgz#362f2b68c662842970fdb5e254ffc8fc1c2e415e"
+  integrity sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
 "@babel/preset-react@7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.0.0.tgz#e86b4b3d99433c7b3e9e91747e2653958bc6b3c0"
@@ -1008,7 +1860,20 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
-"@babel/preset-react@7.7.4", "@babel/preset-react@^7.0.0", "@babel/preset-react@^7.7.0":
+"@babel/preset-react@7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.10.4.tgz#92e8a66d816f9911d11d4cc935be67adfc82dbcf"
+  integrity sha512-BrHp4TgOIy4M19JAfO1LhycVXOPWdDbTRep7eVyatf174Hff+6Uk53sDyajqZPu8W1qXRBiYOfIamek6jA7YVw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-react-display-name" "^7.10.4"
+    "@babel/plugin-transform-react-jsx" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-development" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-self" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-source" "^7.10.4"
+    "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
+
+"@babel/preset-react@^7.0.0", "@babel/preset-react@^7.7.0":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.7.4.tgz#3fe2ea698d8fb536d8e7881a592c3c1ee8bf5707"
   integrity sha512-j+vZtg0/8pQr1H8wKoaJyGL2IEk3rG/GIvua7Sec7meXVIvGycihlGMx5xcU00kqCJbwzHs18xTu3YfREOqQ+g==
@@ -1027,6 +1892,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.6.0"
 
+"@babel/runtime-corejs3@^7.10.2":
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.11.2.tgz#02c3029743150188edeb66541195f54600278419"
+  integrity sha512-qh5IR+8VgFz83VBa6OkaET6uN/mJOhHONuy3m1sgF0CV6mXdPSEBdA7e1eUbVvyNtANjMbg22JUv71BaDXLY6A==
+  dependencies:
+    core-js-pure "^3.0.0"
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205"
@@ -1041,6 +1914,22 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.6":
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
+  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
+  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/template@^7.4.0", "@babel/template@^7.6.0", "@babel/template@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
@@ -1074,6 +1963,21 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
+"@babel/traverse@^7.10.4":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.5.tgz#be777b93b518eb6d76ee2e1ea1d143daa11e61c3"
+  integrity sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.11.5"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/parser" "^7.11.5"
+    "@babel/types" "^7.11.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
 "@babel/traverse@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.4.tgz#f0845822365f9d5b0e312ed3959d3f827f869e3c"
@@ -1098,6 +2002,15 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
+  integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.6.0", "@babel/types@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193"
@@ -1239,6 +2152,22 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
   integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==
 
+"@eslint/eslintrc@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.1.3.tgz#7d1a2b2358552cc04834c0979bd4275362e37085"
+  integrity sha512-4YVwPkANLeNtRjMekzux1ci8hIaH5eGKktGqR0d3LWsKNn5B2X/1Z6Trxy7jQXl9EBGE6Yj02O+t09FMeRllaA==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.1.1"
+    espree "^7.3.0"
+    globals "^12.1.0"
+    ignore "^4.0.6"
+    import-fresh "^3.2.1"
+    js-yaml "^3.13.1"
+    lodash "^4.17.19"
+    minimatch "^3.0.4"
+    strip-json-comments "^3.1.1"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz#10602de5570baea82f8afbfa2630b24e7a8cfe5b"
@@ -1503,6 +2432,11 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@popperjs/core@^2.4.4":
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.5.2.tgz#d3217d5f630766c0c92fbd55cf285ba64de0578b"
+  integrity sha512-tVkIU9JQw5fYPxLQgok/a7I6J1eEZ79svwQGpe2mb3jlVsPADOleefOnQBiS/takK7jQuNeswCUicMH1VWVziA==
+
 "@reach/router@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"
@@ -1942,6 +2876,13 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
+"@tippyjs/react@4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.0.tgz#a1cb369d0051099e8a7e4ceb59f809abd9955283"
+  integrity sha512-T6UcHtwtGkvgsBQ4bNp8BtXGxa2ujfOkWUogYkRtN4UVJ2QRgDdFoJeaPxdndnVYFEa2uTVxSFxs8QkSkZ2Gdw==
+  dependencies:
+    tippy.js "^6.2.0"
+
 "@types/babel__core@^7.1.0":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.3.tgz#e441ea7df63cd080dfcd02ab199e6d16a735fc30"
@@ -2034,6 +2975,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
   integrity sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==
 
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
+
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -2351,6 +3297,11 @@ acorn-jsx@^5.0.0:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
   integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
 
+acorn-jsx@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
+  integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
+
 acorn-walk@^6.0.1:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
@@ -2381,6 +3332,11 @@ acorn@^7.1.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
   integrity sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==
 
+acorn@^7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.0.tgz#e1ad486e6c54501634c6c397c5c121daa383607c"
+  integrity sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==
+
 address@1.1.2, address@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -2430,11 +3386,6 @@ ajv-errors@^1.0.0:
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
   integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
-ajv-keywords@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
-  integrity sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=
-
 ajv-keywords@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
@@ -2445,7 +3396,7 @@ ajv-keywords@^3.4.1:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
   integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
 
-ajv@^5.0.0, ajv@^5.2.3, ajv@^5.3.0:
+ajv@^5.0.0:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   integrity sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=
@@ -2465,6 +3416,16 @@ ajv@^6.1.0:
     json-schema-traverse "^0.3.0"
     uri-js "^4.2.1"
 
+ajv@^6.10.0, ajv@^6.12.4:
+  version "6.12.5"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.5.tgz#19b0e8bae8f476e5ba666300387775fb1a00a4da"
+  integrity sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 ajv@^6.10.2:
   version "6.10.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.2.tgz#d3cea04d6b017b2894ad69040fec8b623eb4bd52"
@@ -2519,15 +3480,10 @@ ansi-colors@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
-ansi-escapes@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
-  integrity sha1-W65SvkJIeN2Xg+iRDj/Cki6DyBs=
-
-ansi-escapes@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
-  integrity sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw==
+ansi-colors@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
 
 ansi-escapes@^3.2.0:
   version "3.2.0"
@@ -2642,13 +3598,13 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-aria-query@^0.7.0:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.1.tgz#26cbb5aff64144b0a825be1846e0b16cfa00b11e"
-  integrity sha1-Jsu1r/ZBRLCoJb4YRuCxbPoAsR4=
+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:
-    ast-types-flow "0.0.7"
-    commander "^2.11.0"
+    "@babel/runtime" "^7.10.2"
+    "@babel/runtime-corejs3" "^7.10.2"
 
 arr-diff@^2.0.0:
   version "2.0.0"
@@ -2695,6 +3651,15 @@ array-includes@^3.0.3:
     define-properties "^1.1.2"
     es-abstract "^1.7.0"
 
+array-includes@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.1.tgz#cdd67e6852bdf9c1215460786732255ed2459348"
+  integrity sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0"
+    is-string "^1.0.5"
+
 array-union@^1.0.1, array-union@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -2734,6 +3699,14 @@ array.prototype.flat@^1.2.1:
     es-abstract "^1.10.0"
     function-bind "^1.1.1"
 
+array.prototype.flat@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b"
+  integrity sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
 array.prototype.flatmap@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.1.tgz#3103cd4826ef90019c9b0a4839b2535fa6faf4e9"
@@ -2743,7 +3716,16 @@ array.prototype.flatmap@^1.2.1:
     es-abstract "^1.10.0"
     function-bind "^1.1.1"
 
-arrify@^1.0.0, arrify@^1.0.1:
+array.prototype.flatmap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz#1c13f84a178566042dd63de4414440db9222e443"
+  integrity sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+
+arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
@@ -2789,7 +3771,7 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
-ast-types-flow@0.0.7:
+ast-types-flow@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
   integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
@@ -2829,13 +3811,20 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
   integrity sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==
 
-async@^2.1.2, async@^2.1.4:
+async@^2.1.4:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
   integrity sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==
   dependencies:
     lodash "^4.17.10"
 
+async@^2.4.1:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
+  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  dependencies:
+    lodash "^4.17.14"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -2869,12 +3858,15 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
-axobject-query@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0"
-  integrity sha1-YvWdvFnJ+SQnWco0mWDnov48NsA=
-  dependencies:
-    ast-types-flow "0.0.7"
+axe-core@^3.5.4:
+  version "3.5.5"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.5.tgz#84315073b53fa3c0c51676c588d59da09a192227"
+  integrity sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q==
+
+axobject-query@^2.1.2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
+  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
 babel-code-frame@^6.22.0:
   version "6.26.0"
@@ -2980,6 +3972,13 @@ babel-plugin-dynamic-import-node@2.3.0, babel-plugin-dynamic-import-node@^2.3.0:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
+  dependencies:
+    object.assign "^4.1.0"
+
 babel-plugin-emotion@^10.0.14, babel-plugin-emotion@^10.0.22, babel-plugin-emotion@^10.0.23:
   version "10.0.23"
   resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz#040d40bf61dcab6d31dd6043d10e180240b8515b"
@@ -3539,6 +4538,16 @@ browserslist@4.7.0:
     electron-to-chromium "^1.3.247"
     node-releases "^1.1.29"
 
+browserslist@^4.12.0, browserslist@^4.8.5:
+  version "4.14.5"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.5.tgz#1c751461a102ddc60e40993639b709be7f2c4015"
+  integrity sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==
+  dependencies:
+    caniuse-lite "^1.0.30001135"
+    electron-to-chromium "^1.3.571"
+    escalade "^3.1.0"
+    node-releases "^1.1.61"
+
 browserslist@^4.6.0, browserslist@^4.7.3, browserslist@^4.8.0:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.0.tgz#6f06b0f974a7cc3a84babc2ccc56493668e3c789"
@@ -3637,13 +4646,6 @@ caller-callsite@^2.0.0:
   dependencies:
     callsites "^2.0.0"
 
-caller-path@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
-  integrity sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=
-  dependencies:
-    callsites "^0.2.0"
-
 caller-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
@@ -3651,11 +4653,6 @@ caller-path@^2.0.0:
   dependencies:
     caller-callsite "^2.0.0"
 
-callsites@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
-  integrity sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=
-
 callsites@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
@@ -3712,6 +4709,11 @@ caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001012:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001013.tgz#da2440d4d266a17d40eb79bd19c0c8cc1d029c72"
   integrity sha512-hOAXaWKuq/UVFgYawxIOdPdyMQdYcwOCDOjnZcKn7wCgFUrhP7smuNZjGLuJlPSgE6aRA4cRJ+bGSrhtEt7ZAg==
 
+caniuse-lite@^1.0.30001135:
+  version "1.0.30001137"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001137.tgz#6f0127b1d3788742561a25af3607a17fc778b803"
+  integrity sha512-54xKQZTqZrKVHmVz0+UvdZR6kQc7pJDgfhsMYDG19ID1BWoNnDMFm5Q3uSBSU401pBvKYMsHAt9qhEDcxmk8aw==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -3762,6 +4764,14 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^4.0.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"
+
 character-entities-legacy@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.3.tgz#3c729991d9293da0ede6dddcaf1f2ce1009ee8b4"
@@ -3777,11 +4787,6 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.3.tgz#1647f4f726638d3ea4a750cf5d1975c1c7919a85"
   integrity sha512-VOq6PRzQBam/8Jm6XBGk2fNEnHXAdGd6go0rtd4weAGECBamHDwwCQSOT12TACIYUZegUXnV6xBXqUssijtxIg==
 
-chardet@^0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
-  integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
-
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -3893,11 +4898,6 @@ circular-json-es6@^2.0.1:
   resolved "https://registry.yarnpkg.com/circular-json-es6/-/circular-json-es6-2.0.2.tgz#e4f4a093e49fb4b6aba1157365746112a78bd344"
   integrity sha512-ODYONMMNb3p658Zv+Pp+/XPa5s6q7afhz3Tzyvo+VRh9WIrJ64J76ZC4GQxnlye/NesTn09jvOiuE8+xxfpwhQ==
 
-circular-json@^0.3.1:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
-  integrity sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==
-
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -4091,11 +5091,6 @@ comma-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.7.tgz#419cd7fb3258b1ed838dc0953167a25e152f5b59"
   integrity sha512-Jrx3xsP4pPv4AwJUDWY9wOXGtwPXARej6Xd99h4TUGotmf8APuquKMpK+dnD3UgyxK7OEWaisjZz+3b5jtL6xQ==
 
-commander@^2.11.0:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
-  integrity sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==
-
 commander@^2.19.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -4133,7 +5128,7 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@^1.5.0, concat-stream@^1.6.0:
+concat-stream@^1.5.0:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
   integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
@@ -4170,6 +5165,11 @@ configstore@^3.0.0:
     write-file-atomic "^2.0.0"
     xdg-basedir "^3.0.0"
 
+confusing-browser-globals@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.9.tgz#72bc13b483c0276801681871d4898516f8f54fdd"
+  integrity sha512-KbS1Y0jMtyPgIxjO7ZzMAuUpAKMt1SzCL9fsrKsX6b0zJPTaT0SiSPmewwVZg9UAO83HVIlEhZF84LIjZ0lmAw==
+
 console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@@ -4258,11 +5258,29 @@ core-js-compat@^3.1.1:
     browserslist "^4.7.3"
     semver "^6.3.0"
 
+core-js-compat@^3.6.2:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.5.tgz#2a51d9a4e25dfd6e690251aa81f99e3c05481f1c"
+  integrity sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng==
+  dependencies:
+    browserslist "^4.8.5"
+    semver "7.0.0"
+
+core-js-pure@^3.0.0:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813"
+  integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==
+
 core-js-pure@^3.0.1:
   version "3.4.5"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.4.5.tgz#284474cb48d134e26e6e314cb89986c6c59480fb"
   integrity sha512-v3BoUOhmBvs4Z17jG/oM7qyv+tEEMvD1FYDDfxa6uD5W2rA/DpKvhvmyrBzxuMQTa/91UQKisaiqe0+0GuL2oA==
 
+core-js@3.6.5, core-js@^3.1.4:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
+  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
+
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@@ -4278,11 +5296,6 @@ core-js@^3.0.1, core-js@^3.0.4:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.5.tgz#3dda65611d95699b5eb7742ea451ea052d37aa65"
   integrity sha512-OuvejWH6vIaUo59Ndlh89purNm4DCIy/v3QoYlcGnn+PkYI8BhNHfCuAESrWX+ZPfq9JccVJ+XXgOMy77PJexg==
 
-core-js@^3.1.4:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
-  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4436,7 +5449,7 @@ cross-spawn@^3.0.0:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
-cross-spawn@^5.0.1, cross-spawn@^5.1.0:
+cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
   integrity sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=
@@ -4454,6 +5467,15 @@ cross-spawn@^7.0.0:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+cross-spawn@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -4600,10 +5622,10 @@ cyclist@~0.2.2:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
   integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=
 
-damerau-levenshtein@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
-  integrity sha1-AxkcQyy27qFou3fzpV/9zLiXhRQ=
+damerau-levenshtein@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz#143c1641cb3d85c60c32329e26899adea8701791"
+  integrity sha512-JVrozIeElnj3QzfUIt8tB8YMluBJom4Vw9qTPpjGYQ9fYlB3D/rb6OordUxf3xeFB35LKWs0xqcO5U6ySvBtug==
 
 dashdash@^1.12.0:
   version "1.14.1"
@@ -4695,7 +5717,7 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
-deep-is@~0.1.3:
+deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
@@ -4742,19 +5764,6 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
-del@^2.0.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
-  integrity sha1-wSyYHQZ4RshLyvhiz/kw2Qf/0ag=
-  dependencies:
-    globby "^5.0.0"
-    is-path-cwd "^1.0.0"
-    is-path-in-cwd "^1.0.0"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-    rimraf "^2.2.8"
-
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -4861,7 +5870,7 @@ doctrine@1.5.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
-doctrine@^2.0.0, doctrine@^2.1.0:
+doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
   integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
@@ -5032,6 +6041,11 @@ electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.317:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.321.tgz#913869f5ec85daabba0e75c9c314b4bf26cdb01e"
   integrity sha512-jJy/BZK2s2eAjMPXVMSaCmo7/pSY2aKkfQ+LoAb5Wk39qAhyP9r8KU74c4qTgr9cD/lPUhJgReZxxqU0n5puog==
 
+electron-to-chromium@^1.3.571:
+  version "1.3.572"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.572.tgz#62d87dfe32ca1f6b9a0f76917d24f66e94e19c01"
+  integrity sha512-TKqdEukCCl7JC20SwEoWTbtnGt4YjfHWAv4tcNky0a9qGo0WdM+Lrd60tps+nkaJCmktKBJjr99fLtEBU1ipWQ==
+
 element-resize-detector@^1.1.15:
   version "1.1.15"
   resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.15.tgz#48eba1a2eaa26969a4c998d972171128c971d8d2"
@@ -5052,11 +6066,6 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-emoji-regex@^6.1.0:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
-  integrity sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ==
-
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
@@ -5067,6 +6076,11 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
+emoji-regex@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.0.0.tgz#48a2309cc8a1d2e9d23bc6a67c39b63032e76ea4"
+  integrity sha512-6p1NII1Vm62wni/VR/cUMauVQoxmLVb9csqQlvLz+hO2gk8U2UYDfXHQSUYIBKmZwAKz867IDqG7B+u0mj+M6w==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -5109,6 +6123,13 @@ enhanced-resolve@^4.1.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
+enquirer@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
+  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
+  dependencies:
+    ansi-colors "^4.1.1"
+
 entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
@@ -5242,6 +6263,23 @@ es-abstract@^1.12.0, es-abstract@^1.13.0, es-abstract@^1.15.0:
     string.prototype.trimleft "^2.1.0"
     string.prototype.trimright "^2.1.0"
 
+es-abstract@^1.17.0, es-abstract@^1.17.5:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
 es-abstract@^1.17.0-next.1:
   version "1.17.4"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.4.tgz#e3aedf19706b20e7c2594c35fc0d57605a79e184"
@@ -5259,6 +6297,24 @@ es-abstract@^1.17.0-next.1:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
+es-abstract@^1.18.0-next.0:
+  version "1.18.0-next.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
+  integrity sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-negative-zero "^2.0.0"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
 es-abstract@^1.5.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
@@ -5303,6 +6359,11 @@ es6-shim@^0.35.5:
   resolved "https://registry.yarnpkg.com/es6-shim/-/es6-shim-0.35.5.tgz#46f59dc0a84a1c5029e8ff1166ca0a902077a9ab"
   integrity sha512-E9kK/bjtCQRpN1K28Xh4BlmP8egvZBGJJ+9GtnzOwt7mdqtrjHFuVGr7QJfdjBIKqrlU5duPf3pCBoDrkjVYFg==
 
+escalade@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.0.tgz#e8e2d7c7a8b76f6ee64c2181d6b8151441602d4e"
+  integrity sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -5337,110 +6398,133 @@ escodegen@^1.9.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-airbnb-base@^12.1.0:
-  version "12.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-12.1.0.tgz#386441e54a12ccd957b0a92564a4bafebd747944"
-  integrity sha512-/vjm0Px5ZCpmJqnjIzcFb9TKZrKWz0gnuG/7Gfkt0Db1ELJR51xkZth+t14rYdqWgX836XbuxtArbIHlVhbLBA==
+eslint-config-airbnb-base@^14.2.0:
+  version "14.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.0.tgz#fe89c24b3f9dc8008c9c0d0d88c28f95ed65e9c4"
+  integrity sha512-Snswd5oC6nJaevs3nZoLSTvGJBvzTfnBqOIArkf3cbyTyq9UD79wOk8s+RiL6bhca0p/eRO6veczhf6A/7Jy8Q==
   dependencies:
-    eslint-restricted-globals "^0.1.1"
+    confusing-browser-globals "^1.0.9"
+    object.assign "^4.1.0"
+    object.entries "^1.1.2"
 
-eslint-config-airbnb@16.1.0:
-  version "16.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-16.1.0.tgz#2546bfb02cc9fe92284bf1723ccf2e87bc45ca46"
-  integrity sha512-zLyOhVWhzB/jwbz7IPSbkUuj7X2ox4PHXTcZkEmDqTvd0baJmJyuxlFPDlZOE/Y5bC+HQRaEkT3FoHo9wIdRiw==
+eslint-config-airbnb@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.0.tgz#8a82168713effce8fc08e10896a63f1235499dcd"
+  integrity sha512-Fz4JIUKkrhO0du2cg5opdyPKQXOI2MvF8KUvN2710nJMT6jaRUpRE2swrJftAjVGL7T1otLM5ieo5RqS1v9Udg==
   dependencies:
-    eslint-config-airbnb-base "^12.1.0"
+    eslint-config-airbnb-base "^14.2.0"
+    object.assign "^4.1.0"
+    object.entries "^1.1.2"
 
-eslint-formatter-pretty@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-formatter-pretty/-/eslint-formatter-pretty-1.3.0.tgz#985d9e41c1f8475f4a090c5dbd2dfcf2821d607e"
-  integrity sha512-5DY64Y1rYCm7cfFDHEGUn54bvCnK+wSUVF07N8oXeqUJFSd+gnYOTXbzelQ1HurESluY6gnEQPmXOIkB4Wa+gA==
+eslint-formatter-pretty@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-formatter-pretty/-/eslint-formatter-pretty-4.0.0.tgz#dc15f3bf4fb51b7ba5fbedb77f57ba8841140ce2"
+  integrity sha512-QgdeZxQwWcN0TcXXNZJiS6BizhAANFhCzkE7Yl9HKB7WjElzwED6+FbbZB2gji8ofgJTGPqKm6VRCNT3OGCeEw==
   dependencies:
-    ansi-escapes "^2.0.0"
-    chalk "^2.1.0"
-    log-symbols "^2.0.0"
-    plur "^2.1.2"
-    string-width "^2.0.0"
+    ansi-escapes "^4.2.1"
+    chalk "^4.1.0"
+    eslint-rule-docs "^1.1.5"
+    log-symbols "^4.0.0"
+    plur "^4.0.0"
+    string-width "^4.2.0"
+    supports-hyperlinks "^2.0.0"
 
-eslint-import-resolver-node@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a"
-  integrity sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==
+eslint-import-resolver-node@^0.3.3:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"
+  integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==
   dependencies:
     debug "^2.6.9"
-    resolve "^1.5.0"
+    resolve "^1.13.1"
 
-eslint-module-utils@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.2.0.tgz#b270362cd88b1a48ad308976ce7fa54e98411746"
-  integrity sha1-snA2LNiLGkitMIl2zn+lTphBF0Y=
+eslint-module-utils@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz#579ebd094f56af7797d19c9866c9c9486629bfa6"
+  integrity sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==
   dependencies:
-    debug "^2.6.8"
-    pkg-dir "^1.0.0"
+    debug "^2.6.9"
+    pkg-dir "^2.0.0"
 
-eslint-plugin-flowtype-errors@3.3.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype-errors/-/eslint-plugin-flowtype-errors-3.3.6.tgz#e9fc9aed13df6615240b6c28faea40768a4d37ec"
-  integrity sha512-2BWsF7NFHK1vfgMvQyhLJdRSrJO6sTdy2w4ZxRNVL/3w2aN+X4gNEG+hvFTcVZrBDTj5SlP5u/8GHMB2YNQD3g==
+eslint-plugin-flowtype-errors@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype-errors/-/eslint-plugin-flowtype-errors-4.3.0.tgz#332f0975f494ccd73900f7ba18b1dbb906164c13"
+  integrity sha512-EMZjrufOZEDgLhXcnggRRvW2rDkPIFPCZp4ium9xptpdayFptt0Nl00AqGtsJlbzZUnzpUD+DTKJLDv99CxETA==
   dependencies:
-    babel-runtime "^6.26.0"
-    slash "^1.0.0"
+    "@babel/runtime" "^7.9.6"
+    core-js "3.6.5"
+    find-up "^4.1.0"
+    slash "^3.0.0"
 
-eslint-plugin-flowtype@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-3.0.0.tgz#4b72588d8a5a5c836439752fe52e8e0f4b9954df"
-  integrity sha512-84utjHfQeykSyNuhO885pp18yGKYuK2S03EFbhl/BpXR9jk0TABnDP/KhUAqDjjkB43mxK2WZjJesrhnncvR9Q==
+eslint-plugin-flowtype@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.2.0.tgz#a4bef5dc18f9b2bdb41569a4ab05d73805a3d261"
+  integrity sha512-z7ULdTxuhlRJcEe1MVljePXricuPOrsWfScRXFhNzVD5dmTHWjIF57AxD0e7AbEoLSbjSsaA5S+hCg43WvpXJQ==
   dependencies:
-    lodash "^4.17.10"
+    lodash "^4.17.15"
+    string-natural-compare "^3.0.1"
 
-eslint-plugin-import@2.11.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.11.0.tgz#15aeea37a67499d848e8e981806d4627b5503816"
-  integrity sha1-Fa7qN6Z0mdhI6OmBgG1GJ7VQOBY=
+eslint-plugin-import@2.22.0:
+  version "2.22.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.0.tgz#92f7736fe1fde3e2de77623c838dd992ff5ffb7e"
+  integrity sha512-66Fpf1Ln6aIS5Gr/55ts19eUuoDhAbZgnr6UxK5hbDx6l/QgQgx61AePq+BV4PP2uXQFClgMVzep5zZ94qqsxg==
   dependencies:
+    array-includes "^3.1.1"
+    array.prototype.flat "^1.2.3"
     contains-path "^0.1.0"
-    debug "^2.6.8"
+    debug "^2.6.9"
     doctrine "1.5.0"
-    eslint-import-resolver-node "^0.3.1"
-    eslint-module-utils "^2.2.0"
-    has "^1.0.1"
-    lodash "^4.17.4"
-    minimatch "^3.0.3"
+    eslint-import-resolver-node "^0.3.3"
+    eslint-module-utils "^2.6.0"
+    has "^1.0.3"
+    minimatch "^3.0.4"
+    object.values "^1.1.1"
     read-pkg-up "^2.0.0"
-    resolve "^1.6.0"
-
-eslint-plugin-jsx-a11y@6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.0.2.tgz#659277a758b036c305a7e4a13057c301cd3be73f"
-  integrity sha1-ZZJ3p1iwNsMFp+ShMFfDAc075z8=
-  dependencies:
-    aria-query "^0.7.0"
-    array-includes "^3.0.3"
-    ast-types-flow "0.0.7"
-    axobject-query "^0.1.0"
-    damerau-levenshtein "^1.0.0"
-    emoji-regex "^6.1.0"
-    jsx-ast-utils "^1.4.0"
+    resolve "^1.17.0"
+    tsconfig-paths "^3.9.0"
+
+eslint-plugin-jsx-a11y@6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.3.1.tgz#99ef7e97f567cc6a5b8dd5ab95a94a67058a2660"
+  integrity sha512-i1S+P+c3HOlBJzMFORRbC58tHa65Kbo8b52/TwCwSKLohwvpfT5rm2GjGWzOHTEuq4xxf2aRlHHTtmExDQOP+g==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    aria-query "^4.2.2"
+    array-includes "^3.1.1"
+    ast-types-flow "^0.0.7"
+    axe-core "^3.5.4"
+    axobject-query "^2.1.2"
+    damerau-levenshtein "^1.0.6"
+    emoji-regex "^9.0.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.4.1"
+    language-tags "^1.0.5"
 
-eslint-plugin-promise@3.7.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.7.0.tgz#f4bde5c2c77cdd69557a8f69a24d1ad3cfc9e67e"
-  integrity sha512-2WO+ZFh7vxUKRfR0cOIMrWgYKdR6S1AlOezw6pC52B6oYpd5WFghN+QHxvrRdZMtbo8h3dfUZ2o1rWb0UPbKtg==
+eslint-plugin-promise@4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz#845fd8b2260ad8f82564c1222fce44ad71d9418a"
+  integrity sha512-VoM09vT7bfA7D+upt+FjeBO5eHIJQBUWki1aPvB+vbNiHS3+oGIJGIeyBtKQTME6UPXXy3vV07OL1tHd3ANuDw==
 
-eslint-plugin-react@7.5.1:
-  version "7.5.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.5.1.tgz#52e56e8d80c810de158859ef07b880d2f56ee30b"
-  integrity sha512-YGSjB9Qu6QbVTroUZi66pYky3DfoIPLdHQ/wmrBGyBRnwxQsBXAov9j2rpXt/55i8nyMv6IRWJv2s4d4YnduzQ==
-  dependencies:
-    doctrine "^2.0.0"
-    has "^1.0.1"
-    jsx-ast-utils "^2.0.0"
-    prop-types "^15.6.0"
+eslint-plugin-react@7.21.2:
+  version "7.21.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.21.2.tgz#3bd5d2c4c36d5a0428d0d6dda301ac9a84d681b2"
+  integrity sha512-j3XKvrK3rpBzveKFbgAeGsWb9uz6iUOrR0jixRfjwdFeGSRsXvVTFtHDQYCjsd1/6Z/xvb8Vy3LiI5Reo7fDrg==
+  dependencies:
+    array-includes "^3.1.1"
+    array.prototype.flatmap "^1.2.3"
+    doctrine "^2.1.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.4.1"
+    object.entries "^1.1.2"
+    object.fromentries "^2.0.2"
+    object.values "^1.1.1"
+    prop-types "^15.7.2"
+    resolve "^1.17.0"
+    string.prototype.matchall "^4.0.2"
 
-eslint-restricted-globals@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz#35f0d5cbc64c2e3ed62e93b4b1a7af05ba7ed4d7"
-  integrity sha1-NfDVy8ZMLj7WLpO0saevBbp+1Nc=
+eslint-rule-docs@^1.1.5:
+  version "1.1.208"
+  resolved "https://registry.yarnpkg.com/eslint-rule-docs/-/eslint-rule-docs-1.1.208.tgz#1b4929270bcc08ecabef72657332b4fd6388107c"
+  integrity sha512-ynDZiU5BZ4lligcEFby+hebqdM+esbHDkbvu59anIzVoMiU+axexUfPaP0dwGASEodHDQBVZbk62ImMluvXBsA==
 
 eslint-scope@^3.7.1:
   version "3.7.1"
@@ -5458,6 +6542,14 @@ eslint-scope@^4.0.0, eslint-scope@^4.0.3:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
+eslint-scope@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
 eslint-utils@^1.3.1:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
@@ -5465,6 +6557,13 @@ eslint-utils@^1.3.1:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
+eslint-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
 eslint-visitor-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
@@ -5475,49 +6574,53 @@ eslint-visitor-keys@^1.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
   integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
-eslint@4.19.1:
-  version "4.19.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.19.1.tgz#32d1d653e1d90408854bfb296f076ec7e186a300"
-  integrity sha512-bT3/1x1EbZB7phzYu7vCr1v3ONuzDtX8WjuM9c0iYxe+cq+pwcKEoQjl7zd3RpC6YOLgnSy3cTN58M2jcoPDIQ==
+eslint-visitor-keys@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint@7.9.0:
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.9.0.tgz#522aeccc5c3a19017cf0cb46ebfd660a79acf337"
+  integrity sha512-V6QyhX21+uXp4T+3nrNfI3hQNBDa/P8ga7LoQOenwrlEFXrEnUEE+ok1dMtaS3b6rmLXhT1TkTIsG75HMLbknA==
   dependencies:
-    ajv "^5.3.0"
-    babel-code-frame "^6.22.0"
-    chalk "^2.1.0"
-    concat-stream "^1.6.0"
-    cross-spawn "^5.1.0"
-    debug "^3.1.0"
-    doctrine "^2.1.0"
-    eslint-scope "^3.7.1"
-    eslint-visitor-keys "^1.0.0"
-    espree "^3.5.4"
-    esquery "^1.0.0"
+    "@babel/code-frame" "^7.0.0"
+    "@eslint/eslintrc" "^0.1.3"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    enquirer "^2.3.5"
+    eslint-scope "^5.1.0"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^1.3.0"
+    espree "^7.3.0"
+    esquery "^1.2.0"
     esutils "^2.0.2"
-    file-entry-cache "^2.0.0"
+    file-entry-cache "^5.0.1"
     functional-red-black-tree "^1.0.1"
-    glob "^7.1.2"
-    globals "^11.0.1"
-    ignore "^3.3.3"
+    glob-parent "^5.0.0"
+    globals "^12.1.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
-    inquirer "^3.0.6"
-    is-resolvable "^1.0.0"
-    js-yaml "^3.9.1"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
     json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.3.0"
-    lodash "^4.17.4"
-    minimatch "^3.0.2"
-    mkdirp "^0.5.1"
+    levn "^0.4.1"
+    lodash "^4.17.19"
+    minimatch "^3.0.4"
     natural-compare "^1.4.0"
-    optionator "^0.8.2"
-    path-is-inside "^1.0.2"
-    pluralize "^7.0.0"
+    optionator "^0.9.1"
     progress "^2.0.0"
-    regexpp "^1.0.1"
-    require-uncached "^1.0.3"
-    semver "^5.3.0"
-    strip-ansi "^4.0.0"
-    strip-json-comments "~2.0.1"
-    table "4.0.2"
-    text-table "~0.2.0"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
+    table "^5.2.3"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
 
 eslint@^5.0.0:
   version "5.16.0"
@@ -5561,7 +6664,7 @@ eslint@^5.0.0:
     table "^5.2.3"
     text-table "^0.2.0"
 
-espree@^3.5.2, espree@^3.5.4:
+espree@^3.5.2:
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
   integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
@@ -5578,6 +6681,15 @@ espree@^5.0.1:
     acorn-jsx "^5.0.0"
     eslint-visitor-keys "^1.0.0"
 
+espree@^7.3.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.0.tgz#dc30437cf67947cf576121ebd780f15eeac72348"
+  integrity sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw==
+  dependencies:
+    acorn "^7.4.0"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.3.0"
+
 esprima@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
@@ -5600,7 +6712,7 @@ esquery@^1.0.0:
   dependencies:
     estraverse "^4.0.0"
 
-esquery@^1.0.1:
+esquery@^1.0.1, esquery@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
   integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
@@ -5614,6 +6726,13 @@ esrecurse@^4.1.0:
   dependencies:
     estraverse "^4.1.0"
 
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
 estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
@@ -5624,6 +6743,11 @@ estraverse@^5.1.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.1.0.tgz#374309d39fd935ae500e7b92e8a6b4c720e59642"
   integrity sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==
 
+estraverse@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
+
 esutils@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -5829,15 +6953,6 @@ extend@~3.0.2:
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
-external-editor@^2.0.4:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
-  integrity sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==
-  dependencies:
-    chardet "^0.4.0"
-    iconv-lite "^0.4.17"
-    tmp "^0.0.33"
-
 external-editor@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
@@ -5868,13 +6983,13 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extract-text-webpack-plugin@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.1.2.tgz#756ef4efa8155c3681833fbc34da53b941746d6c"
-  integrity sha1-dW7076gVXDaBgz+8NNpTuUF0bWw=
+extract-text-webpack-plugin@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz#5f043eaa02f9750a9258b78c0a6e0dc1408fb2f7"
+  integrity sha512-bt/LZ4m5Rqt/Crl2HiKuAl/oqg0psx1tsTLkvWbJen1CtD+fftkZhMaQ9HOtY2gWsl2Wq+sABmMVi9z3DhKWQQ==
   dependencies:
-    async "^2.1.2"
-    loader-utils "^1.0.2"
+    async "^2.4.1"
+    loader-utils "^1.1.0"
     schema-utils "^0.3.0"
     webpack-sources "^1.0.1"
 
@@ -5920,7 +7035,7 @@ fast-json-stable-stringify@^2.0.0:
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
   integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
 
-fast-levenshtein@~2.0.4:
+fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
@@ -5983,14 +7098,6 @@ figures@^2.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
-file-entry-cache@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-2.0.0.tgz#c392990c3e684783d838b8c84a45d8a048458361"
-  integrity sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=
-  dependencies:
-    flat-cache "^1.2.1"
-    object-assign "^4.0.1"
-
 file-entry-cache@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
@@ -6132,16 +7239,6 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
-flat-cache@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.0.tgz#d3030b32b38154f4e3b7e9c709f490f7ef97c481"
-  integrity sha1-0wMLMrOBVPTjt+nHCfSQ9++XxIE=
-  dependencies:
-    circular-json "^0.3.1"
-    del "^2.0.2"
-    graceful-fs "^4.1.2"
-    write "^0.2.1"
-
 flat-cache@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
@@ -6156,10 +7253,10 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flow-bin@0.60.1:
-  version "0.60.1"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.60.1.tgz#0f4fa7b49be2a916f18cd946fc4a51e32ffe4b48"
-  integrity sha512-n31idUasUQVqOYl8Tvig7kfmdcAdRC+J1Gt88J435DZm0saNfwqeYOMoZrehRD6JgaAGQ0PaJfoxWuL9lKZXpA==
+flow-bin@0.134.0:
+  version "0.134.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.134.0.tgz#e98e5724f6ed5a1265cf904bbb5e4c096ea3a026"
+  integrity sha512-j5aCugO3jmwDsUKc+7KReArgnL6aVjHLo6DlozKhxKYN+TaP8BY+mintPSISjSQtKZFJyvoNAc1oXA79X5WjIA==
 
 flush-write-stream@^1.0.0:
   version "1.0.3"
@@ -6478,6 +7575,13 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+glob-parent@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob-to-regexp@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
@@ -6534,7 +7638,7 @@ global@^4.4.0:
     min-document "^2.19.0"
     process "^0.11.10"
 
-globals@^11.0.1, globals@^11.1.0:
+globals@^11.1.0:
   version "11.5.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.5.0.tgz#6bc840de6771173b191f13d3a9c94d441ee92642"
   integrity sha512-hYyf+kI8dm3nORsiiXUQigOU62hDLfJ9G01uyGMxhc6BKsircrUhC4uJPQPUSuq2GrTmiiEt7ewxlMdBewfmKQ==
@@ -6544,6 +7648,13 @@ globals@^11.7.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
+globals@^12.1.0:
+  version "12.4.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
+  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
+  dependencies:
+    type-fest "^0.8.1"
+
 globalthis@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.0.tgz#c5fb98213a9b4595f59cf3e7074f141b4169daae"
@@ -6566,18 +7677,6 @@ globby@8.0.2:
     pify "^3.0.0"
     slash "^1.0.0"
 
-globby@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-5.0.0.tgz#ebd84667ca0dbb330b99bcfc68eac2bc54370e0d"
-  integrity sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=
-  dependencies:
-    array-union "^1.0.1"
-    arrify "^1.0.0"
-    glob "^7.0.3"
-    object-assign "^4.0.1"
-    pify "^2.0.0"
-    pinkie-promise "^2.0.0"
-
 globby@^9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-9.2.0.tgz#fd029a706c703d29bdd170f4b6db3a3f7a7cb63d"
@@ -6932,7 +8031,7 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@^0.4.17, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   version "0.4.23"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
   integrity sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==
@@ -6975,11 +8074,6 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
-ignore@^3.3.3:
-  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.8.tgz#3f8e9c35d38708a3a7e0e9abb6c73e7ee7707b2b"
-  integrity sha512-pUh+xUQQhQzevjRHHFqqcTy0/dP/kS9I8HSrUydhihjuD09W6ldVWFtIrwhXdUJHis3i2rZNqEHpZH/cbinFbg==
-
 ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
@@ -7010,7 +8104,7 @@ import-fresh@^2.0.0:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
-import-fresh@^3.0.0, import-fresh@^3.1.0:
+import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
   integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
@@ -7117,26 +8211,6 @@ inquirer@6.5.0:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-inquirer@^3.0.6:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
-  integrity sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==
-  dependencies:
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.0"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^2.0.4"
-    figures "^2.0.0"
-    lodash "^4.3.0"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rx-lite "^4.0.8"
-    rx-lite-aggregates "^4.0.8"
-    string-width "^2.1.0"
-    strip-ansi "^4.0.0"
-    through "^2.3.6"
-
 inquirer@^6.2.0, inquirer@^6.2.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca"
@@ -7156,6 +8230,15 @@ inquirer@^6.2.0, inquirer@^6.2.2:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
+internal-slot@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.2.tgz#9c2e9fb3cd8e5e4256c6f45fe310067fcfa378a3"
+  integrity sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==
+  dependencies:
+    es-abstract "^1.17.0-next.1"
+    has "^1.0.3"
+    side-channel "^1.0.2"
+
 interpret@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
@@ -7193,10 +8276,10 @@ ipaddr.js@1.9.0:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
   integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
 
-irregular-plurals@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/irregular-plurals/-/irregular-plurals-1.4.0.tgz#2ca9b033651111855412f16be5d77c62a458a766"
-  integrity sha1-LKmwM2UREYVUEvFr5dd8YqRYp2Y=
+irregular-plurals@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/irregular-plurals/-/irregular-plurals-3.2.0.tgz#b19c490a0723798db51b235d7e39add44dab0822"
+  integrity sha512-YqTdPLfwP7YFN0SsD3QUVCkm9ZG2VzOXv3DOrw5G5mkMbVwptTwVcFv7/C0vOpBmgTxAeTG19XpUs1E522LW9Q==
 
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"
@@ -7269,6 +8352,11 @@ is-callable@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
   integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
 
+is-callable@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
+  integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==
+
 is-ci@^1.0.10:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
@@ -7444,6 +8532,11 @@ is-installed-globally@^0.1.0:
     global-dirs "^0.1.0"
     is-path-inside "^1.0.0"
 
+is-negative-zero@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
+  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
+
 is-npm@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
@@ -7490,18 +8583,6 @@ is-odd@^2.0.0:
   dependencies:
     is-number "^4.0.0"
 
-is-path-cwd@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
-  integrity sha1-0iXsIxMuie3Tj9p2dHLmLmXxEG0=
-
-is-path-in-cwd@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz#5ac48b345ef675339bd6c7a48a912110b241cf52"
-  integrity sha512-FjV1RTW48E7CWM7eE/J2NJvAEEVektecDBVBE5Hh3nM1Jd0kvhHtX68Pr3xsDf857xt3Y4AkwVULK1Vku62aaQ==
-  dependencies:
-    is-path-inside "^1.0.0"
-
 is-path-inside@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
@@ -7562,10 +8643,12 @@ is-regex@^1.0.5:
   dependencies:
     has "^1.0.3"
 
-is-resolvable@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
-  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
+is-regex@^1.1.0, is-regex@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
+  dependencies:
+    has-symbols "^1.0.1"
 
 is-retry-allowed@^1.0.0:
   version "1.1.0"
@@ -7592,6 +8675,11 @@ is-string@^1.0.4:
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
   integrity sha1-zDqbaYV9Yh6WNyWiTK7shzuCbmQ=
 
+is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
 is-subset@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
@@ -8221,14 +9309,6 @@ js-yaml@^3.13.0, js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-js-yaml@^3.9.1:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
-  integrity sha512-saJstZWv7oNeOyBh3+Dx1qWzhW0+e6/8eDzo7p5rDFqxntSztloLtuKu+Ejhtq82jsilwOIZYsCz+lIjthg1Hw==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -8386,17 +9466,13 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-jsx-ast-utils@^1.4.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
-  integrity sha1-OGchPo3Xm/Ho8jAMDPwe+xgsDfE=
-
-jsx-ast-utils@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
-  integrity sha1-6AGxs5mF4g//yHtA43SAgOLcrH8=
+jsx-ast-utils@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
+  integrity sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==
   dependencies:
-    array-includes "^3.0.3"
+    array-includes "^3.1.1"
+    object.assign "^4.1.0"
 
 junk@^3.1.0:
   version "3.1.0"
@@ -8446,6 +9522,18 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
+language-subtag-registry@~0.3.2:
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.20.tgz#a00a37121894f224f763268e431c55556b0c0755"
+  integrity sha512-KPMwROklF4tEx283Xw0pNKtfTj1gZ4UByp4EsIFWLgBavJltF4TiYPc39k06zSTsLzxTVXXDSpbwaQXaFB4Qeg==
+
+language-tags@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
+  integrity sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=
+  dependencies:
+    language-subtag-registry "~0.3.2"
+
 latest-version@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
@@ -8491,6 +9579,13 @@ leven@^3.1.0:
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
+levenary@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
+  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
+  dependencies:
+    leven "^3.1.0"
+
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -8499,6 +9594,14 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -8736,17 +9839,22 @@ lodash.unescape@4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
   integrity sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=
 
-lodash@4.17.19, lodash@^4.0.0, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@^4.3.0, lodash@~4.17.4:
+lodash@4.17.19, lodash@^4.0.0, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4, lodash@~4.17.4:
   version "4.17.19"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
-log-symbols@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
-  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
+lodash@^4.17.19:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
+log-symbols@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
+  integrity sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==
   dependencies:
-    chalk "^2.0.1"
+    chalk "^4.0.0"
 
 loglevel-colored-level-prefix@^1.0.0:
   version "1.0.0"
@@ -9125,7 +10233,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatch@~3.0.2:
+minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@~3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -9438,6 +10546,11 @@ node-releases@^1.1.29, node-releases@^1.1.41:
   dependencies:
     semver "^6.3.0"
 
+node-releases@^1.1.61:
+  version "1.1.61"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.61.tgz#707b0fca9ce4e11783612ba4a2fcba09047af16e"
+  integrity sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==
+
 node-sass@4.13.1:
   version "4.13.1"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.13.1.tgz#9db5689696bb2eec2c32b98bfea4c7a2e992d0a3"
@@ -9644,6 +10757,11 @@ object-inspect@^1.7.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
   integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
 
+object-inspect@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
+  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
+
 object-is@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
@@ -9701,6 +10819,15 @@ object.entries@^1.1.0:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+object.entries@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.2.tgz#bc73f00acb6b6bb16c203434b10f9a7e797d3add"
+  integrity sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+    has "^1.0.3"
+
 "object.fromentries@^2.0.0 || ^1.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.1.tgz#050f077855c7af8ae6649f45c80b16ee2d31e704"
@@ -9821,6 +10948,18 @@ optionator@^0.8.1, optionator@^0.8.2:
     type-check "~0.3.2"
     wordwrap "~1.0.0"
 
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
 original@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
@@ -10224,12 +11363,12 @@ pirates@^4.0.1:
   dependencies:
     node-modules-regexp "^1.0.0"
 
-pkg-dir@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
-  integrity sha1-ektQio1bstYp1EcFb/TpyTFM89Q=
+pkg-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
   dependencies:
-    find-up "^1.0.0"
+    find-up "^2.1.0"
 
 pkg-dir@^3.0.0:
   version "3.0.0"
@@ -10252,17 +11391,12 @@ pkg-up@2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-plur@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/plur/-/plur-2.1.2.tgz#7482452c1a0f508e3e344eaec312c91c29dc655a"
-  integrity sha1-dIJFLBoPUI4+NE6uwxLJHCncZVo=
+plur@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/plur/-/plur-4.0.0.tgz#729aedb08f452645fe8c58ef115bf16b0a73ef84"
+  integrity sha512-4UGewrYgqDFw9vV6zNV+ADmPAUAfJPKtGvb/VdpQAx25X5f3xXdGdyOEVFwkl8Hl/tl7+xbeHqSEM+D5/TirUg==
   dependencies:
-    irregular-plurals "^1.0.0"
-
-pluralize@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
-  integrity sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==
+    irregular-plurals "^3.2.0"
 
 pn@^1.1.0:
   version "1.1.0"
@@ -10283,6 +11417,11 @@ polished@^3.3.1:
   dependencies:
     "@babel/runtime" "^7.6.3"
 
+popper.js@1.16.1:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 popper.js@^1.14.4, popper.js@^1.14.7:
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.0.tgz#2e1816bcbbaa518ea6c2e15a466f4cb9c6e2fbb3"
@@ -10374,6 +11513,11 @@ postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -11210,6 +12354,13 @@ regenerate-unicode-properties@^8.1.0:
   dependencies:
     regenerate "^1.4.0"
 
+regenerate-unicode-properties@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
+  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
+  dependencies:
+    regenerate "^1.4.0"
+
 regenerate@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
@@ -11230,6 +12381,11 @@ regenerator-runtime@^0.13.2:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
   integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
 
+regenerator-runtime@^0.13.4:
+  version "0.13.7"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+
 regenerator-transform@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
@@ -11237,6 +12393,13 @@ regenerator-transform@^0.14.0:
   dependencies:
     private "^0.1.6"
 
+regenerator-transform@^0.14.2:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
+  integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+
 regex-cache@^0.4.2:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
@@ -11259,16 +12422,24 @@ regexp.prototype.flags@^1.2.0:
   dependencies:
     define-properties "^1.1.2"
 
-regexpp@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.1.0.tgz#0e3516dd0b7904f413d2d4193dce4618c3a689ab"
-  integrity sha512-LOPw8FpgdQF9etWMaAfG/WRthIdXJGYp4mJ2Jgn/2lpkbod9jPn0t9UqN7AxBOKNfzRbYyVfgc7Vk4t/MpnXgw==
+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
   integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
 
+regexpp@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
+  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
+
 regexpu-core@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.6.0.tgz#2037c18b327cfce8a6fea2a4ec441f2432afb8b6"
@@ -11281,6 +12452,18 @@ regexpu-core@^4.6.0:
     unicode-match-property-ecmascript "^1.0.4"
     unicode-match-property-value-ecmascript "^1.1.0"
 
+regexpu-core@^4.7.0:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
+  integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
+  dependencies:
+    regenerate "^1.4.0"
+    regenerate-unicode-properties "^8.2.0"
+    regjsgen "^0.5.1"
+    regjsparser "^0.6.4"
+    unicode-match-property-ecmascript "^1.0.4"
+    unicode-match-property-value-ecmascript "^1.2.0"
+
 registry-auth-token@^3.0.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.2.tgz#851fd49038eecb586911115af845260eec983f20"
@@ -11301,6 +12484,11 @@ regjsgen@^0.5.0:
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.1.tgz#48f0bf1a5ea205196929c0d9798b42d1ed98443c"
   integrity sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg==
 
+regjsgen@^0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
+  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
+
 regjsparser@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.0.tgz#f1e6ae8b7da2bae96c99399b868cd6c933a2ba9c"
@@ -11308,6 +12496,13 @@ regjsparser@^0.6.0:
   dependencies:
     jsesc "~0.5.0"
 
+regjsparser@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.4.tgz#a769f8684308401a66e9b529d2436ff4d0666272"
+  integrity sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==
+  dependencies:
+    jsesc "~0.5.0"
+
 relateurl@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
@@ -11429,14 +12624,6 @@ require-relative@^0.8.7:
   resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
   integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
 
-require-uncached@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
-  integrity sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=
-  dependencies:
-    caller-path "^0.1.0"
-    resolve-from "^1.0.0"
-
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
@@ -11454,11 +12641,6 @@ resolve-cwd@^3.0.0:
   dependencies:
     resolve-from "^5.0.0"
 
-resolve-from@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"
-  integrity sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=
-
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
@@ -11484,7 +12666,7 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.6, resolve@^1.5.0, resolve@^1.6.0:
+resolve@^1.1.6:
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
   integrity sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==
@@ -11498,6 +12680,13 @@ resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.8.
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.13.1, resolve@^1.17.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
+  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
+  dependencies:
+    path-parse "^1.0.6"
+
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -11574,18 +12763,6 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rx-lite-aggregates@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
-  integrity sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=
-  dependencies:
-    rx-lite "*"
-
-rx-lite@*, rx-lite@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
-  integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
-
 rxjs@^6.4.0:
   version "6.5.3"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a"
@@ -11732,6 +12909,11 @@ semver-diff@^2.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
   integrity sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==
 
+semver@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
 semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -11747,6 +12929,11 @@ semver@^7.1.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.2.tgz#847bae5bce68c5d08889824f02667199b70e3d87"
   integrity sha512-BJs9T/H8sEVHbeigqzIEo57Iu/3DG6c4QoqTfbQB3BPA4zgzAomh/Fk9E7QtjWQ8mx2dgA9YCfSF4y9k9bHNpQ==
 
+semver@^7.2.1:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@@ -11915,6 +13102,14 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+side-channel@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
+  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
+  dependencies:
+    es-abstract "^1.18.0-next.0"
+    object-inspect "^1.8.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -11960,13 +13155,6 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-slice-ansi@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
-  integrity sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==
-  dependencies:
-    is-fullwidth-code-point "^2.0.0"
-
 slice-ansi@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
@@ -12253,6 +13441,11 @@ string-length@^3.1.0:
     astral-regex "^1.0.0"
     strip-ansi "^5.2.0"
 
+string-natural-compare@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
+  integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
+
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -12299,6 +13492,18 @@ string-width@^4.1.0, string-width@^4.2.0:
     has-symbols "^1.0.0"
     regexp.prototype.flags "^1.2.0"
 
+string.prototype.matchall@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz#48bb510326fb9fdeb6a33ceaa81a6ea04ef7648e"
+  integrity sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0"
+    has-symbols "^1.0.1"
+    internal-slot "^1.0.2"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+
 string.prototype.padend@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.0.0.tgz#f3aaef7c1719f170c5eab1c32bf780d96e21f2f0"
@@ -12326,6 +13531,14 @@ string.prototype.trim@^1.1.2:
     es-abstract "^1.5.0"
     function-bind "^1.0.2"
 
+string.prototype.trimend@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
+  integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 string.prototype.trimleft@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
@@ -12358,6 +13571,14 @@ string.prototype.trimright@^2.1.1:
     define-properties "^1.1.3"
     function-bind "^1.1.1"
 
+string.prototype.trimstart@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
+  integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 string_decoder@^1.0.0, string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -12437,6 +13658,11 @@ strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
 style-loader@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.0.1.tgz#aec6d4c61d0ed8d0a442faed741d4dfc6573888a"
@@ -12523,18 +13749,6 @@ symbol.prototype.description@^1.0.0:
   dependencies:
     has-symbols "^1.0.0"
 
-table@4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
-  integrity sha512-UUkEAPdSGxtRpiV9ozJ5cMTtYiqz7Ni1OGqLXRCynrvzdtR1p+cfOWe2RJLwvUG8hNanaSRjecIqwOjqeatDsA==
-  dependencies:
-    ajv "^5.2.3"
-    ajv-keywords "^2.1.0"
-    chalk "^2.1.0"
-    lodash "^4.17.4"
-    slice-ansi "1.0.0"
-    string-width "^2.1.1"
-
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@@ -12644,7 +13858,7 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
-text-table@0.2.0, text-table@^0.2.0, text-table@~0.2.0:
+text-table@0.2.0, text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
@@ -12689,6 +13903,13 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tippy.js@^6.2.0:
+  version "6.2.6"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.2.6.tgz#4991bbe8f75e741fb92b5ccfeebcd072d71f8345"
+  integrity sha512-0tTL3WQNT0nWmpslhDryRahoBm6PT9fh1xXyDfOsvZpDzq52by2rF2nvsW0WX2j9nUZP/jSGDqfKJGjCtoGFKg==
+  dependencies:
+    "@popperjs/core" "^2.4.4"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -12813,6 +14034,16 @@ ts-pnp@^1.1.2:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec"
   integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA==
 
+tsconfig-paths@^3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
+  integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.0"
+    strip-bom "^3.0.0"
+
 tslib@^1.9.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
@@ -12835,6 +14066,13 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
   integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
@@ -12925,6 +14163,11 @@ unicode-match-property-value-ecmascript@^1.1.0:
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz#5b4b426e08d13a80365e0d657ac7a6c1ec46a277"
   integrity sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g==
 
+unicode-match-property-value-ecmascript@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
+  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
+
 unicode-property-aliases-ecmascript@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz#a9cc6cc7ce63a0a3023fc99e341b94431d405a57"
@@ -13139,6 +14382,11 @@ uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
   integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
+v8-compile-cache@^2.0.3:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"
+  integrity sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==
+
 v8-to-istanbul@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-4.0.1.tgz#d6a2a3823b8ff49bdf2167ff2a45d82dff81d02f"
@@ -13418,6 +14666,11 @@ widest-line@^2.0.0:
   dependencies:
     string-width "^2.1.1"
 
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
 wordwrap@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
@@ -13503,13 +14756,6 @@ write@1.0.3:
   dependencies:
     mkdirp "^0.5.1"
 
-write@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"
-  integrity sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=
-  dependencies:
-    mkdirp "^0.5.1"
-
 ws@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-4.1.0.tgz#a979b5d7d4da68bf54efe0408967c324869a7289"

From 371fc445ab2267ab3b7043d4090fdb6ad4f53562 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 19 Oct 2020 20:02:13 +0200
Subject: [PATCH 070/244] Prepare release candidate 0.9.6-rc.1

---
 CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 83115d1c..48d40096 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,13 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
+0.9.6-rc.1
+=====
+
+### Features
+
+- Added `PopOver` component (aka Smart Tooltips) ([PR 150](https://github.com/input-output-hk/react-polymorph/pull/150)
+
 0.9.5
 =====
 

From f5d8f6d01931ce3729c96ce8033c2ecce24706b4 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 19 Oct 2020 20:02:17 +0200
Subject: [PATCH 071/244] 0.9.6-rc.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d682386d..df65a9f8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.5-rc.1",
+  "version": "0.9.6-rc.1",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 4593f3e4560a83633216a037ec3853d426147505 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 27 Oct 2020 19:16:30 +0100
Subject: [PATCH 072/244] [DDW-291] Allow popper options overrides

---
 source/components/PopOver.js       |  3 +++
 source/skins/simple/PopOverSkin.js | 14 ++++++++++++--
 stories/PopOver.stories.js         | 25 ++++++++++++++++++++-----
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/source/components/PopOver.js b/source/components/PopOver.js
index 53a032d6..8994cf07 100644
--- a/source/components/PopOver.js
+++ b/source/components/PopOver.js
@@ -1,4 +1,5 @@
 // @flow
+import { PopperOptions } from 'popper.js';
 import React, {
   ComponentType,
   ReactElement,
@@ -34,6 +35,7 @@ export type PopOverProps = {
   content: ReactNode,
   context?: ThemeContextProp,
   isVisible?: boolean,
+  popperOptions: PopperOptions,
   skin?: ComponentType<any>,
   theme?: ?Object,
   themeId?: string,
@@ -68,4 +70,5 @@ PopOver.defaultProps = {
   themeId: IDENTIFIERS.POP_OVER,
   themeOverrides: {},
   themeVariables: {},
+  popperOptions: {},
 };
diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index 975780db..282ddb5b 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -1,6 +1,6 @@
 // @flow
 import Tippy from '@tippyjs/react';
-import { isString } from 'lodash';
+import { isString, merge } from 'lodash';
 import classnames from 'classnames';
 import Popper from 'popper.js';
 import React, { forwardRef, Node } from 'react';
@@ -30,6 +30,7 @@ export function PopOverSkin(props: PopOverProps) {
     content,
     contentClassName,
     isVisible,
+    popperOptions,
     theme,
     themeId,
     themeOverrides,
@@ -38,6 +39,7 @@ export function PopOverSkin(props: PopOverProps) {
   } = props;
   return (
     <Tippy
+      offset={[0, 14]}
       {...tippyProps}
       visible={isVisible}
       content={
@@ -67,6 +69,7 @@ export function PopOverSkin(props: PopOverProps) {
         },
       ]}
       popperOptions={{
+        ...popperOptions,
         modifiers: [
           {
             name: 'computeStyles',
@@ -75,7 +78,14 @@ export function PopOverSkin(props: PopOverProps) {
               gpuAcceleration: false, // true by default
             },
           },
-        ],
+          {
+            name: 'preventOverflow',
+            options: {
+              // Keep a 4px distance from the viewport edges
+              padding: 4,
+            },
+          },
+        ].concat(popperOptions.modifiers ?? []),
       }}
       cssVariables={themeVariables}
     >
diff --git a/stories/PopOver.stories.js b/stories/PopOver.stories.js
index c20a7af9..a360a860 100644
--- a/stories/PopOver.stories.js
+++ b/stories/PopOver.stories.js
@@ -42,11 +42,7 @@ storiesOf('PopOver', module)
 
   .add('allowHTML', () => (
     <div className={styles.container}>
-      <PopOver
-        isVisible
-        allowHTML
-        content="this is a tip containing <b>HTML</b>"
-      >
+      <PopOver allowHTML content="this is a tip containing <b>HTML</b>">
         HTML tip
       </PopOver>
     </div>
@@ -69,4 +65,23 @@ storiesOf('PopOver', module)
         HTML tip
       </PopOver>
     </div>
+  ))
+  .add('popperOptions', () => (
+    <div className={styles.container}>
+      <PopOver
+        popperOptions={{
+          modifiers: [
+            {
+              name: 'preventOverflow',
+              options: {
+                padding: 20,
+              },
+            },
+          ],
+        }}
+        content="This tip should keep a 20px distance from the viewport edges"
+      >
+        distanced tip
+      </PopOver>
+    </div>
   ));

From b4e67e621348bbea29812ca5d0517e53c634a5cf Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 27 Oct 2020 19:16:59 +0100
Subject: [PATCH 073/244] 0.9.6-rc.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index df65a9f8..d5f4c9a1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.6-rc.1",
+  "version": "0.9.6-rc.2",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From e3855a3e910967530948762dd25c9cbd53fc414b Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 29 Oct 2020 12:43:41 +0100
Subject: [PATCH 074/244] [DDW-291] Set PopOver default font to regular

---
 source/themes/simple/SimplePopOver.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/themes/simple/SimplePopOver.scss b/source/themes/simple/SimplePopOver.scss
index 6c7d3165..03cf8493 100644
--- a/source/themes/simple/SimplePopOver.scss
+++ b/source/themes/simple/SimplePopOver.scss
@@ -4,7 +4,7 @@
 
 // General styles
 $pop-over-box-shadow: var(--rp-pop-over-box-shadow, 0 1.5px 5px 0 rgba(0, 0, 0, 0.18)) !default;
-$pop-over-font-family: var(--rp-pop-over-font-family, $theme-font-light), sans-serif !default;
+$pop-over-font-family: var(--rp-pop-over-font-family, $theme-font-regular), sans-serif !default;
 $pop-over-font-size: var(--rp-pop-over-font-size, 14px) !default;
 $pop-over-padding: var(--rp-bubble-padding, 6px 12px) !default;
 

From 811119a86edcc99940f28aee6af83d2e7fe63b44 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 29 Oct 2020 12:44:10 +0100
Subject: [PATCH 075/244] [DDW-291] Cleanup PopOver stylesheet comments

---
 source/themes/simple/SimplePopOver.scss | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/source/themes/simple/SimplePopOver.scss b/source/themes/simple/SimplePopOver.scss
index 03cf8493..09286170 100644
--- a/source/themes/simple/SimplePopOver.scss
+++ b/source/themes/simple/SimplePopOver.scss
@@ -2,18 +2,11 @@
 
 // OVERRIDABLE CONFIGURATION VARIABLES
 
-// General styles
 $pop-over-box-shadow: var(--rp-pop-over-box-shadow, 0 1.5px 5px 0 rgba(0, 0, 0, 0.18)) !default;
 $pop-over-font-family: var(--rp-pop-over-font-family, $theme-font-regular), sans-serif !default;
 $pop-over-font-size: var(--rp-pop-over-font-size, 14px) !default;
 $pop-over-padding: var(--rp-bubble-padding, 6px 12px) !default;
-
-// Arrow
-
 $pop-over-arrow-size: var(--rp-pop-over-arrow-size, 16px) !default;
-
-// Transparent style
-
 $pop-over-bg-color: var(--rp-pop-over-bg-color, rgba(94, 96, 102, 0.9)) !default;
 $pop-over-text-color: var(--rp-pop-over-text-color, white) !default;
 $pop-over-border-width: var(--rp-pop-over-border-width, 1px) !default;
@@ -21,11 +14,8 @@ $pop-over-border-radius: var(--rp-pop-over-border-radius, 4px) !default;
 $pop-over-border-style: var(--rp-pop-over-border-style, none) !default;
 $pop-over-border-color: var(--rp-pop-over-border-color, transparent) !default;
 
-// Include Tippy.js Stylesheets directly here because we are not pre-processing our SASS files
-// and Webpack doesn't resolve global css includes within node_modules automatically
-
 :global {
-  // Necessary contents from: tippy.js/dist/tippy.css
+  // Only necessary contents from: tippy.js/dist/tippy.css
   .tippy-box[data-animation=fade][data-state=hidden] {
     opacity: 0
   }

From e95b870367186b4562207c40e7b5469081b1dfcf Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 29 Oct 2020 12:44:43 +0100
Subject: [PATCH 076/244] [DDW-291] update changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 48d40096..1b94b4d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
-0.9.6-rc.1
+0.9.6
 =====
 
 ### Features

From b0b382b9442ae6effab13545961ed22a71e394cc Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 29 Oct 2020 12:45:02 +0100
Subject: [PATCH 077/244] 0.9.6-rc.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d5f4c9a1..f0a7d6bf 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.6-rc.2",
+  "version": "0.9.6-rc.3",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From c44f6ef82dd8ad2e63a2637799b8528d37a4bb39 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 3 Nov 2020 20:15:52 +0100
Subject: [PATCH 078/244] 0.9.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f0a7d6bf..12b178e9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.6-rc.3",
+  "version": "0.9.6",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From f10f5f8b35ca4ad9cd96a6614c2e7f3e04e60a67 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 3 Nov 2020 22:39:48 +0100
Subject: [PATCH 079/244] [DDW-192] Add show-on-hover feature to pop over

---
 source/components/PopOver.js       |  2 ++
 source/skins/simple/PopOverSkin.js | 28 ++++++++++++++++++++++------
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/source/components/PopOver.js b/source/components/PopOver.js
index 8994cf07..7fc31a31 100644
--- a/source/components/PopOver.js
+++ b/source/components/PopOver.js
@@ -34,6 +34,7 @@ export type PopOverProps = {
   contentClassName?: string,
   content: ReactNode,
   context?: ThemeContextProp,
+  isShowingOnHover?: boolean,
   isVisible?: boolean,
   popperOptions: PopperOptions,
   skin?: ComponentType<any>,
@@ -66,6 +67,7 @@ export function PopOver(
 
 PopOver.defaultProps = {
   allowHTML: false,
+  isShowingOnHover: false,
   theme: null,
   themeId: IDENTIFIERS.POP_OVER,
   themeOverrides: {},
diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index 282ddb5b..8f3aaf8b 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -1,9 +1,9 @@
 // @flow
 import Tippy from '@tippyjs/react';
-import { isString, merge } from 'lodash';
+import { isString } from 'lodash';
 import classnames from 'classnames';
 import Popper from 'popper.js';
-import React, { forwardRef, Node } from 'react';
+import React, { forwardRef, Node, useState } from 'react';
 import type { PopOverProps } from '../../components/PopOver';
 
 const PopOverWrapper = forwardRef(
@@ -11,12 +11,20 @@ const PopOverWrapper = forwardRef(
     props: {
       children?: ?Node,
       className?: string,
+      onMouseEnter: () => void,
+      onMouseLeave: () => void,
     },
     ref
   ) => {
     return (
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      <span className={props.className} tabIndex="0" ref={ref}>
+      <span
+        onMouseEnter={props.onMouseEnter}
+        onMouseLeave={props.onMouseLeave}
+        className={props.className}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex="0"
+        ref={ref}
+      >
         {props.children}
       </span>
     );
@@ -29,6 +37,7 @@ export function PopOverSkin(props: PopOverProps) {
     children,
     content,
     contentClassName,
+    isShowingOnHover,
     isVisible,
     popperOptions,
     theme,
@@ -37,11 +46,12 @@ export function PopOverSkin(props: PopOverProps) {
     themeVariables,
     ...tippyProps
   } = props;
+  const [isHovered, setIsHovered] = useState(false);
   return (
     <Tippy
       offset={[0, 14]}
       {...tippyProps}
-      visible={isVisible}
+      visible={isVisible || (isShowingOnHover && isHovered)}
       content={
         isString(content) && allowHTML ? (
           <span dangerouslySetInnerHTML={{ __html: content }} />
@@ -89,7 +99,13 @@ export function PopOverSkin(props: PopOverProps) {
       }}
       cssVariables={themeVariables}
     >
-      <PopOverWrapper className={contentClassName}>{children}</PopOverWrapper>
+      <PopOverWrapper
+        className={contentClassName}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {children}
+      </PopOverWrapper>
     </Tippy>
   );
 }

From c67b9f64e79f0b9295fc8a53adb024df34c7b5d9 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 4 Nov 2020 20:08:11 +0100
Subject: [PATCH 080/244] [DDW-192] Use PopOver for password input tooltips

This also introduces a more flexible way of using css variables to customize the theme of sub-components (e.g: coloring the tooltip bg depending on the password input state). The SASS variables have been replaced by simple references to css variables, which are set to their theme defaults by the ThemeProvider now (optional).
---
 .eslintrc                                     |  1 +
 source/components/Input.js                    | 13 ++---
 source/components/PasswordInput.js            |  1 -
 source/components/PopOver.js                  |  2 +-
 source/components/ThemeProvider.js            | 37 +++++++------
 source/components/ThemeVariables.js           | 11 ----
 source/components/ThemeVariablesProvider.js   | 23 ++++++++
 source/skins/simple/PasswordInputSkin.js      | 34 +++++++++---
 source/skins/simple/PopOverSkin.js            |  2 +-
 source/themes/simple/SimplePasswordInput.js   | 20 +++++++
 source/themes/simple/SimplePasswordInput.scss | 55 ++-----------------
 source/themes/simple/index.js                 |  5 ++
 stories/helpers/theming.js                    |  8 ++-
 13 files changed, 114 insertions(+), 98 deletions(-)
 delete mode 100644 source/components/ThemeVariables.js
 create mode 100644 source/components/ThemeVariablesProvider.js
 create mode 100644 source/themes/simple/SimplePasswordInput.js

diff --git a/.eslintrc b/.eslintrc
index 4f1bf731..7a205fe6 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -44,6 +44,7 @@
     "react/sort-comp": 0,
     "react/display-name": ["off", { "ignoreTranspilerName": false }],
     "react/default-props-match-prop-types": ["error", { "allowRequiredDefaults": true }],
+    "react/static-property-placement": 0,
     "class-methods-use-this": 0,
     "no-duplicate-imports": 0,
     "no-param-reassign": 0,
diff --git a/source/components/Input.js b/source/components/Input.js
index fa7a8583..3cc8b9e2 100644
--- a/source/components/Input.js
+++ b/source/components/Input.js
@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react';
+import React, { Component, RefObject } from 'react';
 // $FlowFixMe
 import type { ComponentType, Element, SyntheticInputEvent } from 'react';
 
@@ -21,6 +21,7 @@ export type InputProps = {
   context: ThemeContextProp,
   disabled?: boolean,
   error?: string | Element<any>,
+  inputRef?: RefObject,
   showErrorState?: boolean,
   label?: string | Element<any>,
   maxLength?: number,
@@ -47,11 +48,10 @@ type State = {
 };
 
 class InputBase extends Component<InputProps, State> {
-  // declare ref types
-  inputElement: Element<'input'>;
+  inputElement: RefObject;
 
-  // define static properties
   static displayName = 'Input';
+
   static defaultProps = {
     autoFocus: false,
     context: createEmptyContext(),
@@ -65,10 +65,7 @@ class InputBase extends Component<InputProps, State> {
 
   constructor(props: InputProps) {
     super(props);
-
-    // define ref
-    this.inputElement = createRef();
-
+    this.inputElement = props.inputRef ?? createRef();
     const { context, themeId, theme, themeOverrides } = props;
 
     this.state = {
diff --git a/source/components/PasswordInput.js b/source/components/PasswordInput.js
index 89fbc71f..343c6762 100644
--- a/source/components/PasswordInput.js
+++ b/source/components/PasswordInput.js
@@ -82,7 +82,6 @@ export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
   const score = calculatePasswordScore(password, entropyFactor);
   const isValidPassword = password.length >= minLength;
   const isNotEmpty = password.length > 0;
-  const isRepeat = !!repeatPassword;
 
   if (error) {
     dynamicState = PasswordInput.STATE.ERROR;
diff --git a/source/components/PopOver.js b/source/components/PopOver.js
index 7fc31a31..69d2f949 100644
--- a/source/components/PopOver.js
+++ b/source/components/PopOver.js
@@ -30,7 +30,7 @@ import { IDENTIFIERS } from './index';
 
 export type PopOverProps = {
   allowHTML?: boolean,
-  children: ReactElement<any>,
+  children?: ReactElement<any>,
   contentClassName?: string,
   content: ReactNode,
   context?: ThemeContextProp,
diff --git a/source/components/ThemeProvider.js b/source/components/ThemeProvider.js
index e13df6df..0b6bf10b 100644
--- a/source/components/ThemeProvider.js
+++ b/source/components/ThemeProvider.js
@@ -15,34 +15,28 @@ import { ROOT_THEME_API } from '../themes/API';
 // internal utility functions
 import { appendToProperty } from '../utils/themes';
 import { hasProperty } from '../utils/props';
+import { ThemeVariablesProvider } from './ThemeVariablesProvider';
+import type { ThemeVariables } from './ThemeVariablesProvider';
 
 type Props = {
   children?: ?Node,
   skins: Object,
   theme: Object,
-  themeOverrides: Object // custom css/scss from user that adheres to shape of ROOT_THEME_API
+  variables: ThemeVariables,
+  isRoot: boolean,
+  themeOverrides: Object, // custom css/scss from user that adheres to shape of ROOT_THEME_API
 };
 
 type State = {
-  theme: Object
+  theme: Object,
 };
 
 export class ThemeProvider extends Component<Props, State> {
-  // define static properties
-  static displayName = 'ThemeProvider';
-  static defaultProps = {
-    skins: {},
-    theme: {},
-    themeOverrides: {}
-  };
-
   constructor(props: Props) {
     super(props);
-
     const { theme, themeOverrides } = props;
-
     this.state = {
-      theme: this._composeLibraryTheme(theme, themeOverrides)
+      theme: this._composeLibraryTheme(theme, themeOverrides),
     };
   }
 
@@ -55,7 +49,7 @@ export class ThemeProvider extends Component<Props, State> {
       !isEqual(prevThemeOverrides, themeOverrides)
     ) {
       this.setState(() => ({
-        theme: this._composeLibraryTheme(theme, themeOverrides)
+        theme: this._composeLibraryTheme(theme, themeOverrides),
       }));
     }
   }
@@ -140,13 +134,22 @@ export class ThemeProvider extends Component<Props, State> {
 
   render() {
     const { theme } = this.state;
-    const { skins } = this.props;
+    const { isRoot, skins, variables } = this.props;
     const providerState = { skins, theme, ROOT_THEME_API };
-
     return (
       <ThemeContext.Provider value={providerState}>
-        {this.props.children}
+        <ThemeVariablesProvider isRoot={isRoot} variables={variables}>
+          {this.props.children}
+        </ThemeVariablesProvider>
       </ThemeContext.Provider>
     );
   }
 }
+
+ThemeProvider.defaultProps = {
+  isRoot: true,
+  skins: {},
+  theme: {},
+  variables: {},
+  themeOverrides: {},
+};
diff --git a/source/components/ThemeVariables.js b/source/components/ThemeVariables.js
deleted file mode 100644
index 7cdd261c..00000000
--- a/source/components/ThemeVariables.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// @flow
-import React from 'react';
-
-type ThemeVariablesProps = {
-  children: Node,
-  vars: { [index: string]: string },
-};
-
-export function ThemeVariables(props: ThemeVariablesProps) {
-  return <div style={props.vars}>{props.children}</div>;
-}
diff --git a/source/components/ThemeVariablesProvider.js b/source/components/ThemeVariablesProvider.js
new file mode 100644
index 00000000..7a8016d2
--- /dev/null
+++ b/source/components/ThemeVariablesProvider.js
@@ -0,0 +1,23 @@
+// @flow
+import React, { useEffect } from 'react';
+
+export type ThemeVariables = { [index: string]: string };
+
+type ThemeVariablesProps = {
+  children: Node,
+  isRoot?: boolean,
+  variables: ThemeVariables,
+};
+
+export function ThemeVariablesProvider(props: ThemeVariablesProps) {
+  const { isRoot, variables } = props;
+  useEffect(() => {
+    if (isRoot) {
+      // Set css variables on document root
+      Object.keys(variables).forEach((key) => {
+        document.documentElement.style.setProperty(key, variables[key]);
+      });
+    }
+  });
+  return <div style={isRoot ? {} : props.variables}>{props.children}</div>;
+}
diff --git a/source/skins/simple/PasswordInputSkin.js b/source/skins/simple/PasswordInputSkin.js
index cf32d40f..9772e9fa 100644
--- a/source/skins/simple/PasswordInputSkin.js
+++ b/source/skins/simple/PasswordInputSkin.js
@@ -4,8 +4,9 @@ import React, { useState } from 'react';
 
 import { Input } from '../../components/Input';
 import { PasswordInput } from '../../components/PasswordInput';
-import { Tooltip } from '../../components/Tooltip';
+import { PopOver } from '../../components/PopOver';
 import type { PasswordInputProps } from '../../components/PasswordInput';
+import { SimplePasswordInputVariables } from '../../themes/simple/SimplePasswordInput';
 import useDebouncedValueChangeIndicator from '../../utils/hooks';
 
 type Props = PasswordInputProps & {
@@ -13,6 +14,21 @@ type Props = PasswordInputProps & {
   theme: Object,
 };
 
+function getPopOverBgColorForState(state: PasswordInput.STATE): string {
+  switch (state) {
+    case PasswordInput.STATE.ERROR:
+    case PasswordInput.STATE.INSECURE:
+      return `var(${SimplePasswordInputVariables.errorColor})`;
+    case PasswordInput.STATE.WEAK:
+      return `var(${SimplePasswordInputVariables.warningColor})`;
+    case PasswordInput.STATE.STRONG:
+      return `var(${SimplePasswordInputVariables.successColor})`;
+    case PasswordInput.STATE.DEFAULT:
+    default:
+      return 'var(--rp-pop-over-bg-color)';
+  }
+}
+
 export const PasswordInputSkin = (props: Props) => {
   const [hasInputFocus, setHasInputFocus] = useState(false);
   const {
@@ -43,17 +59,19 @@ export const PasswordInputSkin = (props: Props) => {
         className,
       ])}
     >
-      <Tooltip
-        arrowRelativeToTip
-        isCentered
-        isOpeningUpward={false}
+      <PopOver
         isShowingOnHover={hasTooltip && isShowingTooltipOnHover}
         isVisible={
           hasTooltip &&
           (isTooltipOpen || (isShowingTooltipOnFocus && hasInputFocus))
         }
-        tip={tooltip}
-        theme={props.theme}
+        content={tooltip}
+        themeVariables={{
+          '--rp-pop-over-bg-color': getPopOverBgColorForState(state),
+        }}
+        placement="bottom"
+        popperOptions={{ modifiers: [{ name: 'flip', enabled: false }] }}
+        duration={[300, 0]}
       >
         <Input
           {...inputProps}
@@ -65,7 +83,7 @@ export const PasswordInputSkin = (props: Props) => {
           onBlur={() => setHasInputFocus(false)}
           onFocus={() => setHasInputFocus(true)}
         />
-      </Tooltip>
+      </PopOver>
       <div className={theme[themeId].indicator}>
         <div
           className={theme[themeId].score}
diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index 8f3aaf8b..74c34a64 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -68,7 +68,7 @@ export function PopOverSkin(props: PopOverProps) {
           defaultValue: {},
           fn(instance: Popper) {
             return {
-              onCreate() {
+              onAfterUpdate() {
                 const { cssVariables } = instance.props;
                 Object.keys(cssVariables).forEach((key) => {
                   instance.popper.style.setProperty(key, cssVariables[key]);
diff --git a/source/themes/simple/SimplePasswordInput.js b/source/themes/simple/SimplePasswordInput.js
new file mode 100644
index 00000000..5d0b976b
--- /dev/null
+++ b/source/themes/simple/SimplePasswordInput.js
@@ -0,0 +1,20 @@
+// @flow
+export const SimplePasswordInputVariables = {
+  errorColor: '--rp-password-input-error-color',
+  errorColorLight: '--rp-password-input-error-color-light',
+  warningColor: '--rp-password-input-warning-color',
+  warningColorLight: '--rp-password-input-warning-color-light',
+  successColor: '--rp-password-input-success-color',
+  successColorLight: '--rp-password-input-success-color-light',
+};
+
+const Vars = SimplePasswordInputVariables;
+
+export const SimplePasswordInputDefaults = {
+  [Vars.errorColor]: '#ea4c5b',
+  [Vars.errorColorLight]: 'rgba(234, 76, 91, 0.4)',
+  [Vars.warningColor]: '#f2a218',
+  [Vars.warningColorLight]: 'rgba(242, 162, 24, 0.4)',
+  [Vars.successColor]: '#2dc06c',
+  [Vars.successColorLight]: 'rgba(45, 192, 108, 0.4)',
+};
diff --git a/source/themes/simple/SimplePasswordInput.scss b/source/themes/simple/SimplePasswordInput.scss
index 18cb80bd..0970e466 100644
--- a/source/themes/simple/SimplePasswordInput.scss
+++ b/source/themes/simple/SimplePasswordInput.scss
@@ -1,44 +1,5 @@
 @import "theme";
 
-// OVERRIDABLE CONFIGURATION VARIABLES
-
-$password-input-tooltip-font-family: var(--rp-password-input-tooltip-font-family, $theme-font-medium), sans-serif !default;
-$password-input-tooltip-border-radius: var(--rp-password-input-tooltip-border-radius, 5px) !default;
-
-// error
-$password-input-error-bg-color: var(--rp-password-input-error-bg-color, rgba(234, 76, 91, 0.4)) !default;
-$password-input-error-score-color: var(--rp-password-input-error-score-color, #ea4c5b) !default;
-
-// warning
-$password-input-warning-bg-color: var(--rp-password-input-warning-bg-color, rgba(242, 162, 24, 0.4)) !default;
-$password-input-warning-score-color: var(--rp-password-input-warning-score-color, #f2a218) !default;
-
-// success
-$password-input-success-bg-color: var(--rp-password-input-success-bg-color, rgba(45, 192, 108, 0.4)) !default;
-$password-input-success-score-color: var(--rp-password-input-success-score-color, #2dc06c) !default;
-
-@mixin tooltipBubble($color) {
-  :global {
-    .SimpleTooltip_bubble.SimpleBubble_root [data-bubble-arrow] {
-      &:before, &:after {
-        border-bottom-color: $color;
-      }
-    }
-    .SimpleTooltip_bubble .SimpleBubble_bubble {
-      background-color: $color;
-      border-radius: $password-input-tooltip-border-radius;
-    }
-  }
-}
-
-.root {
-  :global {
-    .SimpleTooltip_bubble {
-      font-family: $password-input-tooltip-font-family;
-    }
-  }
-}
-
 .indicator {
   position: relative;
   top: -2px;
@@ -58,7 +19,6 @@ $password-input-success-score-color: var(--rp-password-input-success-score-color
       display: none;
     }
   }
-  @include tooltipBubble($password-input-error-score-color);
 }
 
 .insecure, .weak, .strong {
@@ -71,30 +31,27 @@ $password-input-success-score-color: var(--rp-password-input-success-score-color
 
 .insecure {
   .indicator {
-    background-color: $password-input-error-bg-color;
+    background-color: var(--rp-password-input-error-color-light);
   }
   .score {
-    background-color: $password-input-error-score-color;
+    background-color: var(--rp-password-input-error-color);
   }
-  @include tooltipBubble($password-input-error-score-color);
 }
 
 .weak {
   .indicator {
-    background-color: $password-input-warning-bg-color;
+    background-color: var(--rp-password-input-warning-color-light);
   }
   .score {
-    background-color: $password-input-warning-score-color;
+    background-color: var(--rp-password-input-warning-color);
   }
-  @include tooltipBubble($password-input-warning-score-color);
 }
 
 .strong {
   .indicator {
-    background-color: $password-input-success-bg-color;
+    background-color: var(--rp-password-input-success-color-light);
   }
   .score {
-    background-color: $password-input-success-score-color;
+    background-color: var(--rp-password-input-success-color);
   }
-  @include tooltipBubble($password-input-success-score-color);
 }
diff --git a/source/themes/simple/index.js b/source/themes/simple/index.js
index ea3e5b96..c1e8502e 100644
--- a/source/themes/simple/index.js
+++ b/source/themes/simple/index.js
@@ -19,6 +19,7 @@ import SimpleLink from './SimpleLink.scss';
 import SimpleLoadingSpinner from './SimpleLoadingSpinner.scss';
 import SimpleModal from './SimpleModal.scss';
 import SimpleOptions from './SimpleOptions.scss';
+import { SimplePasswordInputDefaults } from './SimplePasswordInput';
 import SimplePasswordInput from './SimplePasswordInput.scss';
 import SimplePopOver from './SimplePopOver.scss';
 import SimpleProgressBar from './SimpleProgressBar.scss';
@@ -64,3 +65,7 @@ export const SimpleTheme = {
   [IDENTIFIERS.TOGGLER]: SimpleToggler,
   [IDENTIFIERS.TOOLTIP]: SimpleTooltip,
 };
+
+export const SimpleDefaults = {
+  ...SimplePasswordInputDefaults,
+};
diff --git a/stories/helpers/theming.js b/stories/helpers/theming.js
index 4cc4d7f5..5873d65b 100644
--- a/stories/helpers/theming.js
+++ b/stories/helpers/theming.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import { ThemeProvider } from '../../source/components/ThemeProvider';
-import { SimpleTheme } from '../../source/themes/simple';
+import { SimpleTheme, SimpleDefaults } from '../../source/themes/simple';
 import { SimpleSkins } from '../../source/skins/simple';
 
 export const decorateWithSimpleTheme = (story) => (
-  <ThemeProvider theme={SimpleTheme} skins={SimpleSkins}>
+  <ThemeProvider
+    skins={SimpleSkins}
+    theme={SimpleTheme}
+    variables={SimpleDefaults}
+  >
     {story()}
   </ThemeProvider>
 );

From f1c22075b923a07b1f8399a9ba9534870705373c Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 10 Nov 2020 12:44:03 +0100
Subject: [PATCH 081/244] [DDW-192] Match react peer dependency with Daedalus

---
 package.json |  8 ++++----
 yarn.lock    | 31 +++++++++++++++++++++++++++++--
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 12b178e9..3a74d960 100644
--- a/package.json
+++ b/package.json
@@ -32,8 +32,8 @@
   "peerDependencies": {
     "classnames": ">=2",
     "lodash": ">=4.17.11",
-    "react": ">=15.0.0 || <=16.8.6",
-    "react-dom": ">=15.0.0 || <=16.8.6"
+    "react": ">=16.8.6",
+    "react-dom": ">=16.8.6"
   },
   "devDependencies": {
     "@babel/cli": "7.7.4",
@@ -77,8 +77,8 @@
     "nodemon": "1.12.1",
     "prettier": "2.0.5",
     "prettier-eslint": "9.0.1",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
     "rimraf": "2.6.2",
     "sass-loader": "8.0.0",
     "style-loader": "1.0.1",
diff --git a/yarn.lock b/yarn.lock
index 5f792a99..dd713e3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11992,7 +11992,17 @@ react-docgen@^4.1.1:
     node-dir "^0.1.10"
     recast "^0.17.3"
 
-react-dom@16.12.0, react-dom@^16.8.3:
+react-dom@16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
+  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.19.1"
+
+react-dom@^16.8.3:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
   integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==
@@ -12173,7 +12183,16 @@ react-textarea-autosize@^7.1.0:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.0"
 
-react@16.12.0, react@^16.6.0, react@^16.8.3:
+react@16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
+react@^16.6.0, react@^16.8.3:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
   integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
@@ -12860,6 +12879,14 @@ scheduler@^0.18.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"

From 46b4d58064b0e1878428a4779b70240e486cb5a1 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 10 Nov 2020 12:51:45 +0100
Subject: [PATCH 082/244] [DDW-192] Improve form fields ux with pop overs

By using pop overs to show errors, always for the focused field and on hover for any other form fields with errors.
---
 CHANGELOG.md                              |  7 +++
 source/components/FormField.js            | 14 +++--
 source/components/PopOver.js              |  2 +-
 source/skins/simple/FormFieldSkin.js      | 73 ++++++++++++++---------
 source/skins/simple/InputSkin.js          | 18 ++++--
 source/skins/simple/PopOverSkin.js        |  3 +-
 source/skins/simple/TextAreaSkin.js       | 16 ++++-
 source/themes/simple/SimpleFormField.js   | 10 ++++
 source/themes/simple/SimpleFormField.scss | 17 ------
 source/themes/simple/index.js             |  2 +
 10 files changed, 101 insertions(+), 61 deletions(-)
 create mode 100644 source/themes/simple/SimpleFormField.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b94b4d1..d832bb71 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,13 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
+0.9.7
+=====
+
+### Features
+
+- Improve `FormField` UX by using pop overs to show errors ([PR 151](https://github.com/input-output-hk/react-polymorph/pull/151)
+
 0.9.6
 =====
 
diff --git a/source/components/FormField.js b/source/components/FormField.js
index e99950ae..a69f2d41 100644
--- a/source/components/FormField.js
+++ b/source/components/FormField.js
@@ -15,28 +15,31 @@ type Props = {
   context: ThemeContextProp,
   disabled?: boolean,
   error?: string | Element<any>,
+  errorDebounceDelay?: number,
   inputRef?: ElementRef<*>,
   label?: string | Element<any>,
   render: Function,
   skin?: ComponentType<any>,
   theme: ?Object, // will take precedence over theme in context if passed
   themeId: string,
-  themeOverrides: Object
+  themeOverrides: Object,
 };
 
 type State = {
   error: string,
-  composedTheme: Object
+  composedTheme: Object,
 };
 
 class FormFieldBase extends Component<Props, State> {
   // define static properties
   static displayName = 'FormField';
+
   static defaultProps = {
     context: createEmptyContext(),
+    errorDebounceDelay: 1000,
     theme: null,
     themeId: IDENTIFIERS.FORM_FIELD,
-    themeOverrides: {}
+    themeOverrides: {},
   };
 
   constructor(props: Props) {
@@ -50,7 +53,7 @@ class FormFieldBase extends Component<Props, State> {
         addThemeId(theme || context.theme, themeId),
         addThemeId(themeOverrides, themeId),
         context.ROOT_THEME_API
-      )
+      ),
     };
   }
 
@@ -65,8 +68,9 @@ class FormFieldBase extends Component<Props, State> {
   focusChild = () => {
     const { inputRef } = this.props;
     if (inputRef && inputRef.current) {
-      if (typeof inputRef.current.focus === 'function')
+      if (typeof inputRef.current.focus === 'function') {
         inputRef.current.focus();
+      }
     }
   };
 
diff --git a/source/components/PopOver.js b/source/components/PopOver.js
index 69d2f949..ad330b13 100644
--- a/source/components/PopOver.js
+++ b/source/components/PopOver.js
@@ -67,7 +67,7 @@ export function PopOver(
 
 PopOver.defaultProps = {
   allowHTML: false,
-  isShowingOnHover: false,
+  isShowingOnHover: true,
   theme: null,
   themeId: IDENTIFIERS.POP_OVER,
   themeOverrides: {},
diff --git a/source/skins/simple/FormFieldSkin.js b/source/skins/simple/FormFieldSkin.js
index e649cf08..ec0b8d26 100644
--- a/source/skins/simple/FormFieldSkin.js
+++ b/source/skins/simple/FormFieldSkin.js
@@ -1,46 +1,65 @@
 // @flow
 import React from 'react';
 import type { Element } from 'react';
-import { omit } from 'lodash';
 import classnames from 'classnames';
+import { PopOver } from '../../components/PopOver';
+import { SimpleFormFieldVariables } from '../../themes/simple/SimpleFormField';
+import useDebouncedValueChangeIndicator from '../../utils/hooks';
 
 type Props = {
   className: string,
   disabled: boolean,
   error: string | Element<any>,
+  hasFocus?: boolean,
   focusChild: Function,
   label: string | Element<any>,
   onChange: Function,
   render: Function,
   setError: Function,
   theme: Object,
-  themeId: string
+  themeId: string,
 };
 
-export const FormFieldSkin = (props: Props) => (
-  <div
-    className={classnames([
-      props.className,
-      props.theme[props.themeId].root,
-      props.disabled ? props.theme[props.themeId].disabled : null,
-      props.error ? props.theme[props.themeId].errored : null
-    ])}
-  >
-    {props.error && (
-      <div className={props.theme[props.themeId].error}>{props.error}</div>
-    )}
-    {props.label && (
-      <label
-        role="presentation"
-        aria-hidden
-        className={props.theme[props.themeId].label}
-        onClick={props.focusChild}
+export function FormFieldSkin(props: Props) {
+  const hasErrorChanged = useDebouncedValueChangeIndicator(
+    props.error,
+    props.errorDebounceDelay
+  );
+  const hasError = hasErrorChanged && props.error != null;
+  return (
+    <div
+      className={classnames([
+        props.className,
+        props.theme[props.themeId].root,
+        props.disabled ? props.theme[props.themeId].disabled : null,
+        props.error ? props.theme[props.themeId].errored : null,
+      ])}
+    >
+      {props.label && (
+        <label
+          role="presentation"
+          aria-hidden
+          className={props.theme[props.themeId].label}
+          onClick={props.focusChild}
+        >
+          {props.label}
+        </label>
+      )}
+      <PopOver
+        isShowingOnHover={hasError}
+        isVisible={hasError && props.hasFocus}
+        content={props.error}
+        themeVariables={{
+          '--rp-pop-over-bg-color': `var(${SimpleFormFieldVariables.errorColor}`,
+        }}
+        placement="bottom"
+        popperOptions={{ modifiers: [{ name: 'flip', enabled: false }] }}
+        duration={[300, 0]}
       >
-        {props.label}
-      </label>
-    )}
-    <div className={props.theme[props.themeId].inputWrapper}>
-      {props.render(omit(props, ['themeId']))}
+        <div className={props.theme[props.themeId].inputWrapper}>
+          {props.render()}
+        </div>
+      </PopOver>
     </div>
-  </div>
-);
+  );
+}
diff --git a/source/skins/simple/InputSkin.js b/source/skins/simple/InputSkin.js
index a907c6e7..d1319c24 100644
--- a/source/skins/simple/InputSkin.js
+++ b/source/skins/simple/InputSkin.js
@@ -1,6 +1,6 @@
 // @flow
-import React from 'react';
-import type { ElementRef, Element } from 'react';
+import React, { useState } from 'react';
+import type { ElementRef } from 'react';
 
 // external libraries
 import classnames from 'classnames';
@@ -10,9 +10,6 @@ import { isFunction } from 'lodash';
 import { FormField } from '../../components/FormField';
 import type { InputProps } from '../../components/Input';
 
-// skins
-import { FormFieldSkin } from './FormFieldSkin';
-
 // internal utility functions
 import { pickDOMProps } from '../../utils/props';
 
@@ -23,10 +20,19 @@ type Props = InputProps & {
 };
 
 export const InputSkin = (props: Props) => {
+  const [hasInputFocus, setHasInputFocus] = useState(false);
   const renderInput = () => (
     <input
       ref={props.inputRef}
       {...pickDOMProps(props)}
+      onBlur={(event) => {
+        setHasInputFocus(false);
+        props.onBlur?.(event);
+      }}
+      onFocus={(event) => {
+        setHasInputFocus(true);
+        props.onFocus?.(event);
+      }}
       className={classnames([
         props.theme[props.themeId].input,
         props.disabled ? props.theme[props.themeId].disabled : null,
@@ -62,9 +68,9 @@ export const InputSkin = (props: Props) => {
       className={props.className}
       disabled={props.disabled}
       label={props.label}
+      hasFocus={hasInputFocus}
       error={props.error}
       inputRef={props.inputRef}
-      skin={FormFieldSkin}
       theme={props.theme}
       render={render}
     />
diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index 74c34a64..074d57eb 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -21,8 +21,6 @@ const PopOverWrapper = forwardRef(
         onMouseEnter={props.onMouseEnter}
         onMouseLeave={props.onMouseLeave}
         className={props.className}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex="0"
         ref={ref}
       >
         {props.children}
@@ -50,6 +48,7 @@ export function PopOverSkin(props: PopOverProps) {
   return (
     <Tippy
       offset={[0, 14]}
+      maxWidth="none"
       {...tippyProps}
       visible={isVisible || (isShowingOnHover && isHovered)}
       content={
diff --git a/source/skins/simple/TextAreaSkin.js b/source/skins/simple/TextAreaSkin.js
index 7737f233..df1c5d6a 100644
--- a/source/skins/simple/TextAreaSkin.js
+++ b/source/skins/simple/TextAreaSkin.js
@@ -1,5 +1,5 @@
 // @flow
-import React from 'react';
+import React, { useState } from 'react';
 import type { ElementRef, Element } from 'react';
 
 // external libraries
@@ -27,16 +27,18 @@ type Props = {
   textareaRef?: ElementRef<'textarea'>,
   theme: Object,
   themeId: string,
-  value: string
+  value: string,
 };
 
 export const TextAreaSkin = (props: Props) => {
   const { theme, themeId } = props;
+  const [hasFocus, setHasFocus] = useState(false);
   return (
     <FormField
       className={props.className}
       disabled={props.disabled}
       label={props.label}
+      hasFocus={hasFocus}
       error={props.error}
       inputRef={props.textareaRef}
       skin={FormFieldSkin}
@@ -44,10 +46,18 @@ export const TextAreaSkin = (props: Props) => {
         <textarea
           ref={props.textareaRef}
           {...pickDOMProps(props)}
+          onBlur={(event) => {
+            setHasFocus(false);
+            props.onBlur?.(event);
+          }}
+          onFocus={(event) => {
+            setHasFocus(true);
+            props.onFocus?.(event);
+          }}
           className={classnames([
             theme[themeId].textarea,
             props.disabled ? theme[themeId].disabled : null,
-            props.error ? theme[themeId].errored : null
+            props.error ? theme[themeId].errored : null,
           ])}
         />
       )}
diff --git a/source/themes/simple/SimpleFormField.js b/source/themes/simple/SimpleFormField.js
new file mode 100644
index 00000000..1aec3c35
--- /dev/null
+++ b/source/themes/simple/SimpleFormField.js
@@ -0,0 +1,10 @@
+// @flow
+export const SimpleFormFieldVariables = {
+  errorColor: '--rp-form-field-error-color',
+};
+
+const Vars = SimpleFormFieldVariables;
+
+export const SimpleFormFieldDefaults = {
+  [Vars.errorColor]: '#ea4c5b',
+};
diff --git a/source/themes/simple/SimpleFormField.scss b/source/themes/simple/SimpleFormField.scss
index 1a0c1617..167f62de 100644
--- a/source/themes/simple/SimpleFormField.scss
+++ b/source/themes/simple/SimpleFormField.scss
@@ -13,13 +13,6 @@ $formfield-label-text-color: var(--rp-formfield-label-text-color, #5e6066) !defa
 $formfield-label-text-color-disabled: var(--rp-formfield-label-text-color-disabled, $theme-color-disabled) !default;
 $formfield-label-margin: var(--rp-formfield-label-margin, 0 0 10px 0) !default;
 
-// error
-$formfield-error-text-color: var(--rp-formfield-error-text-color, rgba(#de3226, 0.5)) !default;
-$formfield-error-text-opacity: var(--rp-formfield-error-text-opacity, 1) !default;
-$formfield-error-font-family: var(--rp-formfield-error-font-family, $theme-font-regular) !default;
-$formfield-error-font-size: var(--rp-formfield-error-font-size, 14px) !default;
-$formfield-error-margin: var(--rp-formfield-error-margin, 1.5px 0 11.5px 0) !default;
-
 .root {
   background-color: $formfield-bg-color;
   position: relative;
@@ -34,16 +27,6 @@ $formfield-error-margin: var(--rp-formfield-error-margin, 1.5px 0 11.5px 0) !def
   margin: $formfield-label-margin;
 }
 
-.error {
-  color: $formfield-error-text-color;
-  float: right;
-  font-family: $formfield-error-font-family, sans-serif;
-  font-size: $formfield-error-font-size;
-  line-height: 1.36;
-  margin: $formfield-error-margin;
-  opacity: $formfield-error-text-opacity;
-}
-
 .inputWrapper {
   position: relative;
 }
diff --git a/source/themes/simple/index.js b/source/themes/simple/index.js
index c1e8502e..febc377a 100644
--- a/source/themes/simple/index.js
+++ b/source/themes/simple/index.js
@@ -9,6 +9,7 @@ import SimpleButton from './SimpleButton.scss';
 import SimpleCheckbox from './SimpleCheckbox.scss';
 import SimpleDropdown from './SimpleDropdown.scss';
 import SimpleFlex from './SimpleFlex.scss';
+import { SimpleFormFieldDefaults } from './SimpleFormField';
 import SimpleFormField from './SimpleFormField.scss';
 import SimpleGrid from './SimpleGrid.scss';
 import SimpleGutter from './SimpleGutter.scss';
@@ -68,4 +69,5 @@ export const SimpleTheme = {
 
 export const SimpleDefaults = {
   ...SimplePasswordInputDefaults,
+  ...SimpleFormFieldDefaults,
 };

From d03e3cdd1e0b5fc01f1fa035d6d0b0c67217755b Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 10 Nov 2020 12:54:42 +0100
Subject: [PATCH 083/244] 0.9.7-rc.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3a74d960..6ddcf681 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.6",
+  "version": "0.9.7-rc.1",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 8a7471fc3a6ebe67a2b86bb907154388cdee597b Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 10 Nov 2020 15:54:11 +0100
Subject: [PATCH 084/244] [DDW-192] hide root theme variables provider from
 markup

---
 source/components/ThemeVariablesProvider.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/source/components/ThemeVariablesProvider.js b/source/components/ThemeVariablesProvider.js
index 7a8016d2..e01f6a6c 100644
--- a/source/components/ThemeVariablesProvider.js
+++ b/source/components/ThemeVariablesProvider.js
@@ -19,5 +19,9 @@ export function ThemeVariablesProvider(props: ThemeVariablesProps) {
       });
     }
   });
-  return <div style={isRoot ? {} : props.variables}>{props.children}</div>;
+  return isRoot ? (
+    <>{props.children}</>
+  ) : (
+    <div style={props.variables}>{props.children}</div>
+  );
 }

From 5389ee2a335f27a8880f15ae86fbe35367db4a6f Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 10 Nov 2020 15:54:24 +0100
Subject: [PATCH 085/244] 0.9.7-rc.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6ddcf681..4262a2e7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.1",
+  "version": "0.9.7-rc.2",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From ea9d2443d64cb2bff2b9294623d2805bb2b95632 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 12 Nov 2020 18:49:50 +0100
Subject: [PATCH 086/244] [DDW-192] Make password inputs full width by default

---
 source/themes/simple/SimplePasswordInput.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/source/themes/simple/SimplePasswordInput.scss b/source/themes/simple/SimplePasswordInput.scss
index 0970e466..9339066d 100644
--- a/source/themes/simple/SimplePasswordInput.scss
+++ b/source/themes/simple/SimplePasswordInput.scss
@@ -1,5 +1,9 @@
 @import "theme";
 
+.root {
+  width: 100%;
+}
+
 .indicator {
   position: relative;
   top: -2px;

From 094d48efcc09aad62842709787a8f265cac2cc35 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 12 Nov 2020 19:35:37 +0100
Subject: [PATCH 087/244] [DDW-192] Do not display empty pop overs

---
 source/skins/simple/PopOverSkin.js | 3 ++-
 stories/PopOver.stories.js         | 7 +++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index 074d57eb..5720798d 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -45,12 +45,13 @@ export function PopOverSkin(props: PopOverProps) {
     ...tippyProps
   } = props;
   const [isHovered, setIsHovered] = useState(false);
+  const hasContent = !!content && content !== '';
   return (
     <Tippy
       offset={[0, 14]}
       maxWidth="none"
       {...tippyProps}
-      visible={isVisible || (isShowingOnHover && isHovered)}
+      visible={hasContent && (isVisible || (isShowingOnHover && isHovered))}
       content={
         isString(content) && allowHTML ? (
           <span dangerouslySetInnerHTML={{ __html: content }} />
diff --git a/stories/PopOver.stories.js b/stories/PopOver.stories.js
index a360a860..6aeee8a7 100644
--- a/stories/PopOver.stories.js
+++ b/stories/PopOver.stories.js
@@ -47,6 +47,13 @@ storiesOf('PopOver', module)
       </PopOver>
     </div>
   ))
+
+  .add('empty', () => (
+    <div className={styles.container}>
+      <PopOver content="">Empty tooltips should not display</PopOver>
+    </div>
+  ))
+
   .add('theme variables', () => (
     <div className={styles.container}>
       <PopOver

From eba06ac633de705484a6fd1b9c90f4606a3700a2 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 13 Nov 2020 17:35:51 +0100
Subject: [PATCH 088/244] [DDW-192] Improve form field input ref focus handling

---
 source/components/FormField.js           | 19 +++++-----------
 source/skins/simple/AutocompleteSkin.js  |  8 ++-----
 source/skins/simple/FormFieldSkin.js     | 23 ++++++++-----------
 source/skins/simple/InputSkin.js         | 10 ---------
 source/skins/simple/PasswordInputSkin.js |  4 ++--
 source/skins/simple/TextAreaSkin.js      | 10 ---------
 source/utils/hooks.js                    | 28 +++++++++++++++++++-----
 7 files changed, 42 insertions(+), 60 deletions(-)

diff --git a/source/components/FormField.js b/source/components/FormField.js
index a69f2d41..bf9220b1 100644
--- a/source/components/FormField.js
+++ b/source/components/FormField.js
@@ -10,7 +10,7 @@ import { composeTheme, addThemeId, didThemePropsChange } from '../utils/themes';
 import { IDENTIFIERS } from '.';
 import type { ThemeContextProp } from './HOC/withTheme';
 
-type Props = {
+export type FormFieldProps = {
   className?: ?string,
   context: ThemeContextProp,
   disabled?: boolean,
@@ -18,6 +18,7 @@ type Props = {
   errorDebounceDelay?: number,
   inputRef?: ElementRef<*>,
   label?: string | Element<any>,
+  onChange: Function,
   render: Function,
   skin?: ComponentType<any>,
   theme: ?Object, // will take precedence over theme in context if passed
@@ -30,7 +31,7 @@ type State = {
   composedTheme: Object,
 };
 
-class FormFieldBase extends Component<Props, State> {
+class FormFieldBase extends Component<FormFieldProps, State> {
   // define static properties
   static displayName = 'FormField';
 
@@ -42,7 +43,7 @@ class FormFieldBase extends Component<Props, State> {
     themeOverrides: {},
   };
 
-  constructor(props: Props) {
+  constructor(props: FormFieldProps) {
     super(props);
 
     const { context, themeId, theme, themeOverrides } = props;
@@ -57,7 +58,7 @@ class FormFieldBase extends Component<Props, State> {
     };
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: FormFieldProps) {
     if (prevProps !== this.props) {
       didThemePropsChange(prevProps, this.props, this.setState.bind(this));
     }
@@ -76,15 +77,7 @@ class FormFieldBase extends Component<Props, State> {
 
   render() {
     // destructuring props ensures only the "...rest" get passed down
-    const {
-      skin,
-      theme,
-      themeOverrides,
-      error,
-      context,
-      inputRef,
-      ...rest
-    } = this.props;
+    const { skin, theme, themeOverrides, error, context, ...rest } = this.props;
 
     const FormFieldSkin = skin || context.skins[IDENTIFIERS.FORM_FIELD];
 
diff --git a/source/skins/simple/AutocompleteSkin.js b/source/skins/simple/AutocompleteSkin.js
index 0bbe2aa8..0aba2172 100644
--- a/source/skins/simple/AutocompleteSkin.js
+++ b/source/skins/simple/AutocompleteSkin.js
@@ -95,16 +95,13 @@ export const AutocompleteSkin = (props: Props) => {
       error={props.error}
       inputRef={props.inputRef}
       label={props.label}
-      skin={FormFieldSkin}
       render={() => (
         <div
           className={classnames([
             theme.autocompleteContent,
             props.isOpen ? theme.opened : null,
-            props.selectedOptions.length
-              ? theme.hasSelectedWords
-              : null,
-            props.error ? theme.errored : null
+            props.selectedOptions.length ? theme.hasSelectedWords : null,
+            props.error ? theme.errored : null,
           ])}
           ref={props.suggestionsRef}
         >
@@ -131,7 +128,6 @@ export const AutocompleteSkin = (props: Props) => {
       ref={props.rootRef}
       role="presentation"
     >
-
       {renderContent()}
 
       <Options
diff --git a/source/skins/simple/FormFieldSkin.js b/source/skins/simple/FormFieldSkin.js
index ec0b8d26..5462b548 100644
--- a/source/skins/simple/FormFieldSkin.js
+++ b/source/skins/simple/FormFieldSkin.js
@@ -1,31 +1,26 @@
 // @flow
 import React from 'react';
-import type { Element } from 'react';
 import classnames from 'classnames';
+import type { FormFieldProps } from '../../components/FormField';
 import { PopOver } from '../../components/PopOver';
 import { SimpleFormFieldVariables } from '../../themes/simple/SimpleFormField';
-import useDebouncedValueChangeIndicator from '../../utils/hooks';
+import {
+  isRefFocused,
+  useDebouncedValueChangedIndicator,
+} from '../../utils/hooks';
 
-type Props = {
-  className: string,
-  disabled: boolean,
-  error: string | Element<any>,
-  hasFocus?: boolean,
+type Props = FormFieldProps & {
   focusChild: Function,
-  label: string | Element<any>,
-  onChange: Function,
-  render: Function,
   setError: Function,
-  theme: Object,
-  themeId: string,
 };
 
 export function FormFieldSkin(props: Props) {
-  const hasErrorChanged = useDebouncedValueChangeIndicator(
+  const hasErrorChanged = useDebouncedValueChangedIndicator(
     props.error,
     props.errorDebounceDelay
   );
   const hasError = hasErrorChanged && props.error != null;
+  const isInputFocused = isRefFocused(props.inputRef);
   return (
     <div
       className={classnames([
@@ -47,7 +42,7 @@ export function FormFieldSkin(props: Props) {
       )}
       <PopOver
         isShowingOnHover={hasError}
-        isVisible={hasError && props.hasFocus}
+        isVisible={hasError && isInputFocused}
         content={props.error}
         themeVariables={{
           '--rp-pop-over-bg-color': `var(${SimpleFormFieldVariables.errorColor}`,
diff --git a/source/skins/simple/InputSkin.js b/source/skins/simple/InputSkin.js
index d1319c24..8e145c71 100644
--- a/source/skins/simple/InputSkin.js
+++ b/source/skins/simple/InputSkin.js
@@ -20,19 +20,10 @@ type Props = InputProps & {
 };
 
 export const InputSkin = (props: Props) => {
-  const [hasInputFocus, setHasInputFocus] = useState(false);
   const renderInput = () => (
     <input
       ref={props.inputRef}
       {...pickDOMProps(props)}
-      onBlur={(event) => {
-        setHasInputFocus(false);
-        props.onBlur?.(event);
-      }}
-      onFocus={(event) => {
-        setHasInputFocus(true);
-        props.onFocus?.(event);
-      }}
       className={classnames([
         props.theme[props.themeId].input,
         props.disabled ? props.theme[props.themeId].disabled : null,
@@ -68,7 +59,6 @@ export const InputSkin = (props: Props) => {
       className={props.className}
       disabled={props.disabled}
       label={props.label}
-      hasFocus={hasInputFocus}
       error={props.error}
       inputRef={props.inputRef}
       theme={props.theme}
diff --git a/source/skins/simple/PasswordInputSkin.js b/source/skins/simple/PasswordInputSkin.js
index 9772e9fa..f7547ae6 100644
--- a/source/skins/simple/PasswordInputSkin.js
+++ b/source/skins/simple/PasswordInputSkin.js
@@ -7,7 +7,7 @@ import { PasswordInput } from '../../components/PasswordInput';
 import { PopOver } from '../../components/PopOver';
 import type { PasswordInputProps } from '../../components/PasswordInput';
 import { SimplePasswordInputVariables } from '../../themes/simple/SimplePasswordInput';
-import useDebouncedValueChangeIndicator from '../../utils/hooks';
+import { useDebouncedValueChangedIndicator } from '../../utils/hooks';
 
 type Props = PasswordInputProps & {
   score: number,
@@ -48,7 +48,7 @@ export const PasswordInputSkin = (props: Props) => {
     ...inputProps
   } = props;
   const hasInitialValueChanged = useDebounce
-    ? useDebouncedValueChangeIndicator(value, debounceDelay)
+    ? useDebouncedValueChangedIndicator(value, debounceDelay)
     : true;
   const hasTooltip = hasInitialValueChanged && tooltip != null;
   return (
diff --git a/source/skins/simple/TextAreaSkin.js b/source/skins/simple/TextAreaSkin.js
index df1c5d6a..c98ef1a3 100644
--- a/source/skins/simple/TextAreaSkin.js
+++ b/source/skins/simple/TextAreaSkin.js
@@ -32,13 +32,11 @@ type Props = {
 
 export const TextAreaSkin = (props: Props) => {
   const { theme, themeId } = props;
-  const [hasFocus, setHasFocus] = useState(false);
   return (
     <FormField
       className={props.className}
       disabled={props.disabled}
       label={props.label}
-      hasFocus={hasFocus}
       error={props.error}
       inputRef={props.textareaRef}
       skin={FormFieldSkin}
@@ -46,14 +44,6 @@ export const TextAreaSkin = (props: Props) => {
         <textarea
           ref={props.textareaRef}
           {...pickDOMProps(props)}
-          onBlur={(event) => {
-            setHasFocus(false);
-            props.onBlur?.(event);
-          }}
-          onFocus={(event) => {
-            setHasFocus(true);
-            props.onFocus?.(event);
-          }}
           className={classnames([
             theme[themeId].textarea,
             props.disabled ? theme[themeId].disabled : null,
diff --git a/source/utils/hooks.js b/source/utils/hooks.js
index 85ebc24b..df74ce18 100644
--- a/source/utils/hooks.js
+++ b/source/utils/hooks.js
@@ -1,10 +1,7 @@
 // @flow
-import { useEffect, useState } from 'react';
+import { useEffect, useState, Ref } from 'react';
 
-export default function useDebouncedValueChangedIndicator(
-  value: any,
-  delay: number
-) {
+export function useDebouncedValueChangedIndicator(value: any, delay: number) {
   const [isDirty, setIsDirty] = useState(false);
   useEffect(() => {
     if (value === '') {
@@ -23,3 +20,24 @@ export default function useDebouncedValueChangedIndicator(
 
   return isDirty;
 }
+
+export function isRefFocused(ref: Ref<*>) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || !element.addEventListener) {
+      return;
+    }
+    const focusListener = () => setIsFocused(true);
+    const blurListener = () => setIsFocused(false);
+    element.addEventListener('focus', focusListener);
+    element.addEventListener('blur', blurListener);
+    return () => {
+      element.removeEventListener('focus', focusListener);
+      element.removeEventListener('blur', blurListener);
+    };
+  }, [ref.current]);
+
+  return isFocused;
+}

From edde029e42e1b334ca97fa41cd694884874fa67d Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 13 Nov 2020 17:46:16 +0100
Subject: [PATCH 089/244] [DDW-192] Hide error tooltip on autocomplete open

---
 source/components/FormField.js          | 1 +
 source/skins/simple/AutocompleteSkin.js | 1 +
 source/skins/simple/FormFieldSkin.js    | 4 ++--
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/source/components/FormField.js b/source/components/FormField.js
index bf9220b1..ea692d21 100644
--- a/source/components/FormField.js
+++ b/source/components/FormField.js
@@ -16,6 +16,7 @@ export type FormFieldProps = {
   disabled?: boolean,
   error?: string | Element<any>,
   errorDebounceDelay?: number,
+  isErrorHidden?: boolean,
   inputRef?: ElementRef<*>,
   label?: string | Element<any>,
   onChange: Function,
diff --git a/source/skins/simple/AutocompleteSkin.js b/source/skins/simple/AutocompleteSkin.js
index 0aba2172..f1b377eb 100644
--- a/source/skins/simple/AutocompleteSkin.js
+++ b/source/skins/simple/AutocompleteSkin.js
@@ -95,6 +95,7 @@ export const AutocompleteSkin = (props: Props) => {
       error={props.error}
       inputRef={props.inputRef}
       label={props.label}
+      isErrorHidden={props.isOpen}
       render={() => (
         <div
           className={classnames([
diff --git a/source/skins/simple/FormFieldSkin.js b/source/skins/simple/FormFieldSkin.js
index 5462b548..c75f45ca 100644
--- a/source/skins/simple/FormFieldSkin.js
+++ b/source/skins/simple/FormFieldSkin.js
@@ -41,8 +41,8 @@ export function FormFieldSkin(props: Props) {
         </label>
       )}
       <PopOver
-        isShowingOnHover={hasError}
-        isVisible={hasError && isInputFocused}
+        isShowingOnHover={hasError && !props.isErrorHidden}
+        isVisible={hasError && isInputFocused && !props.isErrorHidden}
         content={props.error}
         themeVariables={{
           '--rp-pop-over-bg-color': `var(${SimpleFormFieldVariables.errorColor}`,

From c78ed1f22e806449ea926e2fdc15dc2f61589ddd Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 13 Nov 2020 18:45:51 +0100
Subject: [PATCH 090/244] [DDW-192] Add eslint prettier config

---
 .eslintrc    |  6 +++++-
 package.json |  1 +
 yarn.lock    | 12 ++++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/.eslintrc b/.eslintrc
index 7a205fe6..2ad270ea 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,7 +3,11 @@
   "extends": [
     "airbnb",
     "plugin:flowtype/recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "prettier",
+    "prettier/babel",
+    "prettier/flowtype",
+    "prettier/react"
   ],
   "env": {
     "browser": true,
diff --git a/package.json b/package.json
index 4262a2e7..d098092c 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "enzyme-to-json": "3.3.4",
     "eslint": "7.9.0",
     "eslint-config-airbnb": "18.2.0",
+    "eslint-config-prettier": "6.15.0",
     "eslint-formatter-pretty": "4.0.0",
     "eslint-plugin-flowtype": "5.2.0",
     "eslint-plugin-flowtype-errors": "4.3.0",
diff --git a/yarn.lock b/yarn.lock
index dd713e3e..4ad41e1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6416,6 +6416,13 @@ eslint-config-airbnb@18.2.0:
     object.assign "^4.1.0"
     object.entries "^1.1.2"
 
+eslint-config-prettier@6.15.0:
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.15.0.tgz#7f93f6cb7d45a92f1537a70ecc06366e1ac6fed9"
+  integrity sha512-a1+kOYLR8wMGustcgAjdydMsQ2A/2ipRPwRKUmfYaSxc9ZPcrku080Ctl6zrZzZNs/U82MjSv+qKREkoq3bJaw==
+  dependencies:
+    get-stdin "^6.0.0"
+
 eslint-formatter-pretty@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/eslint-formatter-pretty/-/eslint-formatter-pretty-4.0.0.tgz#dc15f3bf4fb51b7ba5fbedb77f57ba8841140ce2"
@@ -7521,6 +7528,11 @@ get-stdin@^4.0.1:
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
   integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
 
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
+
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"

From d5d3bca2129d0f05868311d07ca6754ab917bcda Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 13 Nov 2020 18:47:40 +0100
Subject: [PATCH 091/244] [DDW-192] Add requiredSelections option to
 autocomplete
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

requiredSelections is an option that makes it possible to set the number selections that need to be made before showing an error. This is e.g useful in Daedalus when entering mnemonics, since it’s not very friendly to show an error while the user is still typing in the mnemonic
---
 source/components/Autocomplete.js       | 26 ++++----
 source/skins/simple/AutocompleteSkin.js | 80 +++++++++++--------------
 2 files changed, 48 insertions(+), 58 deletions(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index 8673909d..ce0a0184 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -17,7 +17,7 @@ import { composeFunctions } from '../utils/props';
 import { IDENTIFIERS } from '.';
 import type { ThemeContextProp } from './HOC/withTheme';
 
-type Props = {
+export type AutocompleteProps = {
   className?: string,
   context: ThemeContextProp,
   error: ?string,
@@ -25,6 +25,7 @@ type Props = {
   isOpeningUpward: boolean,
   label?: string | Element<any>,
   maxSelections?: number,
+  requiredSelections?: number,
   maxVisibleOptions: number,
   multipleSameSelections: boolean,
   onChange?: Function,
@@ -37,7 +38,7 @@ type Props = {
   sortAlphabetically: boolean,
   theme: ?Object, // will take precedence over theme in context if passed
   themeId: string,
-  themeOverrides: Object
+  themeOverrides: Object,
 };
 
 type State = {
@@ -47,10 +48,10 @@ type State = {
   isOpen: boolean,
   inputValue: string,
   mouseIsOverOptions: boolean,
-  selectedOptions: Array<any>
+  selectedOptions: Array<any>,
 };
 
-class AutocompleteBase extends Component<Props, State> {
+class AutocompleteBase extends Component<AutocompleteProps, State> {
   // declare ref types
   rootElement: ?Element<any>;
   inputElement: ?Element<'input'>;
@@ -67,13 +68,14 @@ class AutocompleteBase extends Component<Props, State> {
     maxVisibleOptions: 10, // max number of visible options
     multipleSameSelections: true, // if true then same word can be selected multiple times
     options: [],
+    requiredSelections: 0,
     sortAlphabetically: true, // options are sorted alphabetically by default
     theme: null,
     themeId: IDENTIFIERS.AUTOCOMPLETE,
-    themeOverrides: {}
+    themeOverrides: {},
   };
 
-  constructor(props: Props) {
+  constructor(props: AutocompleteProps) {
     super(props);
 
     // define refs
@@ -89,7 +91,7 @@ class AutocompleteBase extends Component<Props, State> {
       themeOverrides,
       sortAlphabetically,
       options,
-      preselectedOptions
+      preselectedOptions,
     } = props;
 
     this.state = {
@@ -104,11 +106,11 @@ class AutocompleteBase extends Component<Props, State> {
         addThemeId(theme || context.theme, themeId),
         addThemeId(themeOverrides, themeId),
         context.ROOT_THEME_API
-      )
+      ),
     };
   }
 
-  componentDidUpdate(prevProps: Props) {
+  componentDidUpdate(prevProps: AutocompleteProps) {
     if (prevProps !== this.props) {
       didThemePropsChange(prevProps, this.props, this.setState.bind(this));
     }
@@ -223,7 +225,7 @@ class AutocompleteBase extends Component<Props, State> {
   // associated with rendering this.state.selectedOptions, the user can call
   // this in the body of the renderSelections function
   getSelectionProps = ({
-    removeSelection
+    removeSelection,
   }: { removeSelection: Function } = {}) => {
     const { themeId } = this.props;
     const { inputValue, isOpen, selectedOptions, composedTheme } = this.state;
@@ -235,7 +237,7 @@ class AutocompleteBase extends Component<Props, State> {
       removeSelection: (index: number, event: SyntheticEvent<>) =>
         // the user's custom removeSelection event handler is composed with
         // the internal functionality of Autocomplete (this.removeOption)
-        composeFunctions(removeSelection, this.removeOption)(index, event)
+        composeFunctions(removeSelection, this.removeOption)(index, event),
     };
   };
 
@@ -336,7 +338,7 @@ class AutocompleteBase extends Component<Props, State> {
     this.setState({
       isOpen: true,
       inputValue: filteredValue,
-      filteredOptions
+      filteredOptions,
     });
   };
 }
diff --git a/source/skins/simple/AutocompleteSkin.js b/source/skins/simple/AutocompleteSkin.js
index f1b377eb..32922380 100644
--- a/source/skins/simple/AutocompleteSkin.js
+++ b/source/skins/simple/AutocompleteSkin.js
@@ -5,18 +5,16 @@ import type { ElementRef, Element } from 'react';
 // external libraries
 import _ from 'lodash';
 import classnames from 'classnames';
+import type { AutocompleteProps } from '../../components/Autocomplete';
 
 // components
 import { FormField } from '../../components/FormField';
 import { Options } from '../../components/Options';
 
 // skins
-import { FormFieldSkin } from './FormFieldSkin';
 import { OptionsSkin } from './OptionsSkin';
 
-type Props = {
-  className: string,
-  error: string,
+type Props = AutocompleteProps & {
   filteredOptions: Array<any>,
   getSelectionProps: Function,
   handleAutocompleteClick: Function,
@@ -24,24 +22,14 @@ type Props = {
   handleInputChange: Function,
   inputRef: ElementRef<any>,
   inputValue: string,
-  isOpeningUpward: boolean,
   isOpen: boolean,
-  label: string | Element<any>,
-  maxSelections: number,
-  maxVisibleOptions: number,
   onKeyDown: Function,
-  options: Array<any>,
   optionsRef: ElementRef<any>,
   optionsMaxHeight: number,
-  placeholder: string,
   removeOption: Function,
-  renderSelections: Function,
-  renderOptions: Function,
   rootRef: ElementRef<any>,
   selectedOptions: Array<any>,
   suggestionsRef: ElementRef<any>,
-  theme: Object,
-  themeId: string,
   toggleMouseLocation: Function,
   toggleOpen: Function,
   optionHeight: ?number,
@@ -89,37 +77,10 @@ export const AutocompleteSkin = (props: Props) => {
     return null;
   };
 
-  // A label, input, and selected words are the content
-  const renderContent = () => (
-    <FormField
-      error={props.error}
-      inputRef={props.inputRef}
-      label={props.label}
-      isErrorHidden={props.isOpen}
-      render={() => (
-        <div
-          className={classnames([
-            theme.autocompleteContent,
-            props.isOpen ? theme.opened : null,
-            props.selectedOptions.length ? theme.hasSelectedWords : null,
-            props.error ? theme.errored : null,
-          ])}
-          ref={props.suggestionsRef}
-        >
-          <div className={theme.selectedWords}>
-            {renderSelectedOptions()}
-            <input
-              ref={props.inputRef}
-              placeholder={placeholder}
-              value={props.inputValue}
-              onChange={props.handleInputChange}
-              onKeyDown={props.onKeyDown}
-            />
-          </div>
-        </div>
-      )}
-    />
-  );
+  const selectedOptionsCount = props.selectedOptions.length;
+  const hasSelectedRequiredNumberOfOptions =
+    selectedOptionsCount >= props.requiredSelections;
+  const error = hasSelectedRequiredNumberOfOptions ? props.error : null;
 
   return (
     <div
@@ -129,7 +90,34 @@ export const AutocompleteSkin = (props: Props) => {
       ref={props.rootRef}
       role="presentation"
     >
-      {renderContent()}
+      <FormField
+        error={error}
+        inputRef={props.inputRef}
+        label={props.label}
+        isErrorHidden={props.isOpen}
+        render={() => (
+          <div
+            className={classnames([
+              theme.autocompleteContent,
+              props.isOpen ? theme.opened : null,
+              props.selectedOptions.length ? theme.hasSelectedWords : null,
+              error ? theme.errored : null,
+            ])}
+            ref={props.suggestionsRef}
+          >
+            <div className={theme.selectedWords}>
+              {renderSelectedOptions()}
+              <input
+                ref={props.inputRef}
+                placeholder={placeholder}
+                value={props.inputValue}
+                onChange={props.handleInputChange}
+                onKeyDown={props.onKeyDown}
+              />
+            </div>
+          </div>
+        )}
+      />
 
       <Options
         isOpen={props.isOpen}

From 9626a0742a35149b5c7a2b85b5c5b900aef7fe28 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 13 Nov 2020 18:53:50 +0100
Subject: [PATCH 092/244] 0.9.7-rc.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d098092c..331fab20 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.2",
+  "version": "0.9.7-rc.3",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From a2e5d9bdafe30c1e5b4eb25cc0928435bf1c5e70 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 16 Nov 2020 12:54:15 +0100
Subject: [PATCH 093/244] [DDW-192] Improve emptiness check for tooltip content

---
 source/skins/simple/PopOverSkin.js |  4 +++-
 stories/PopOver.stories.js         | 15 +++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index 5720798d..9ec00531 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -45,7 +45,9 @@ export function PopOverSkin(props: PopOverProps) {
     ...tippyProps
   } = props;
   const [isHovered, setIsHovered] = useState(false);
-  const hasContent = !!content && content !== '';
+  console.log(content);
+  const hasContent =
+    React.isValidElement(content) || (isString(content) && content !== '');
   return (
     <Tippy
       offset={[0, 14]}
diff --git a/stories/PopOver.stories.js b/stories/PopOver.stories.js
index 6aeee8a7..5be64f37 100644
--- a/stories/PopOver.stories.js
+++ b/stories/PopOver.stories.js
@@ -48,6 +48,21 @@ storiesOf('PopOver', module)
     </div>
   ))
 
+  .add('content element', () => (
+    <div className={styles.container}>
+      <PopOver
+        isVisible
+        content={
+          <div style={{ border: '1px solid red' }}>
+            This is tooltip is a react component
+          </div>
+        }
+      >
+        Empty tooltips should not display
+      </PopOver>
+    </div>
+  ))
+
   .add('empty', () => (
     <div className={styles.container}>
       <PopOver content="">Empty tooltips should not display</PopOver>

From dbc38c0a90ba0e60d60671fcb728b7c9f60f9c78 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 16 Nov 2020 12:54:37 +0100
Subject: [PATCH 094/244] 0.9.7-rc.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 331fab20..73f890d9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.3",
+  "version": "0.9.7-rc.4",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 6cce22e86d3e041a17240510d1644195289c2d25 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 17 Nov 2020 19:01:48 +0100
Subject: [PATCH 095/244] [DDW-192] Remove form field error debouncing logic

---
 source/components/FormField.js       |  2 --
 source/skins/simple/FormFieldSkin.js | 11 ++-------
 source/skins/simple/PopOverSkin.js   |  1 -
 stories/FormField.stories.js         | 34 ++++++++++++++++++++++++++++
 stories/FormField.stories.scss       |  3 +++
 stories/index.js                     |  1 +
 6 files changed, 40 insertions(+), 12 deletions(-)
 create mode 100644 stories/FormField.stories.js
 create mode 100644 stories/FormField.stories.scss

diff --git a/source/components/FormField.js b/source/components/FormField.js
index ea692d21..f5ae09c6 100644
--- a/source/components/FormField.js
+++ b/source/components/FormField.js
@@ -15,7 +15,6 @@ export type FormFieldProps = {
   context: ThemeContextProp,
   disabled?: boolean,
   error?: string | Element<any>,
-  errorDebounceDelay?: number,
   isErrorHidden?: boolean,
   inputRef?: ElementRef<*>,
   label?: string | Element<any>,
@@ -38,7 +37,6 @@ class FormFieldBase extends Component<FormFieldProps, State> {
 
   static defaultProps = {
     context: createEmptyContext(),
-    errorDebounceDelay: 1000,
     theme: null,
     themeId: IDENTIFIERS.FORM_FIELD,
     themeOverrides: {},
diff --git a/source/skins/simple/FormFieldSkin.js b/source/skins/simple/FormFieldSkin.js
index c75f45ca..2643447c 100644
--- a/source/skins/simple/FormFieldSkin.js
+++ b/source/skins/simple/FormFieldSkin.js
@@ -4,10 +4,7 @@ import classnames from 'classnames';
 import type { FormFieldProps } from '../../components/FormField';
 import { PopOver } from '../../components/PopOver';
 import { SimpleFormFieldVariables } from '../../themes/simple/SimpleFormField';
-import {
-  isRefFocused,
-  useDebouncedValueChangedIndicator,
-} from '../../utils/hooks';
+import { isRefFocused } from '../../utils/hooks';
 
 type Props = FormFieldProps & {
   focusChild: Function,
@@ -15,12 +12,8 @@ type Props = FormFieldProps & {
 };
 
 export function FormFieldSkin(props: Props) {
-  const hasErrorChanged = useDebouncedValueChangedIndicator(
-    props.error,
-    props.errorDebounceDelay
-  );
-  const hasError = hasErrorChanged && props.error != null;
   const isInputFocused = isRefFocused(props.inputRef);
+  const hasError = props.error != null;
   return (
     <div
       className={classnames([
diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index 9ec00531..1509555f 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -45,7 +45,6 @@ export function PopOverSkin(props: PopOverProps) {
     ...tippyProps
   } = props;
   const [isHovered, setIsHovered] = useState(false);
-  console.log(content);
   const hasContent =
     React.isValidElement(content) || (isString(content) && content !== '');
   return (
diff --git a/stories/FormField.stories.js b/stories/FormField.stories.js
new file mode 100644
index 00000000..5fddcb1a
--- /dev/null
+++ b/stories/FormField.stories.js
@@ -0,0 +1,34 @@
+// @flow
+import { withState } from '@dump247/storybook-state';
+import React from 'react';
+
+// storybook
+import { storiesOf } from '@storybook/react';
+import { Input } from '../source/components/Input';
+
+// components
+
+// helpers
+import { decorateWithSimpleTheme } from './helpers/theming';
+
+// custom styles & theme overrides
+import styles from './FormField.stories.scss';
+
+storiesOf('FormField', module)
+  .addDecorator(decorateWithSimpleTheme)
+
+  // ====== Stories ======
+
+  .add(
+    'input error',
+    withState({ value: '' }, (store) => (
+      <div className={styles.container}>
+        <Input
+          label="Enter 'error':"
+          value={store.state.value}
+          onChange={(value) => store.set({ value })}
+          error={store.state.value === 'error' ? 'wrong value' : null}
+        />
+      </div>
+    ))
+  );
diff --git a/stories/FormField.stories.scss b/stories/FormField.stories.scss
new file mode 100644
index 00000000..bc4cb86a
--- /dev/null
+++ b/stories/FormField.stories.scss
@@ -0,0 +1,3 @@
+.container {
+  padding: 20px;
+}
diff --git a/stories/index.js b/stories/index.js
index 2e7bc137..798d253a 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -26,3 +26,4 @@ import './TextArea.stories';
 import './Toggler.stories';
 import './Tooltip.stories';
 import './ThemeProvider.stories';
+import './FormField.stories';

From 757faeb3f65c5ac95d302ada7e01487200c20215 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 17 Nov 2020 19:02:34 +0100
Subject: [PATCH 096/244] 0.9.7-rc.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 73f890d9..b61ec7db 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.4",
+  "version": "0.9.7-rc.5",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From b66520e073c461b0b5a99fc3f6431d480fba4c7d Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 24 Nov 2020 13:05:45 +0100
Subject: [PATCH 097/244] [DDW-192] Use default maxWidth of 350 pixels

---
 source/skins/simple/PopOverSkin.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index 1509555f..33a08ab6 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -50,7 +50,6 @@ export function PopOverSkin(props: PopOverProps) {
   return (
     <Tippy
       offset={[0, 14]}
-      maxWidth="none"
       {...tippyProps}
       visible={hasContent && (isVisible || (isShowingOnHover && isHovered))}
       content={

From 282cdfc72d3fa421656038853d9d53f24f97b06d Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 24 Nov 2020 13:06:16 +0100
Subject: [PATCH 098/244] [DDW-192] Add default for popover content line-height

---
 source/themes/simple/SimplePopOver.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/source/themes/simple/SimplePopOver.scss b/source/themes/simple/SimplePopOver.scss
index 09286170..46d67ec4 100644
--- a/source/themes/simple/SimplePopOver.scss
+++ b/source/themes/simple/SimplePopOver.scss
@@ -9,6 +9,7 @@ $pop-over-padding: var(--rp-bubble-padding, 6px 12px) !default;
 $pop-over-arrow-size: var(--rp-pop-over-arrow-size, 16px) !default;
 $pop-over-bg-color: var(--rp-pop-over-bg-color, rgba(94, 96, 102, 0.9)) !default;
 $pop-over-text-color: var(--rp-pop-over-text-color, white) !default;
+$pop-over-line-height: var(--rp-pop-over-line-height, 19px) !default;
 $pop-over-border-width: var(--rp-pop-over-border-width, 1px) !default;
 $pop-over-border-radius: var(--rp-pop-over-border-radius, 4px) !default;
 $pop-over-border-style: var(--rp-pop-over-border-style, none) !default;
@@ -35,6 +36,7 @@ $pop-over-border-color: var(--rp-pop-over-border-color, transparent) !default;
 
   .tippy-content {
     position: relative;
+    line-height: $pop-over-line-height;
     z-index: 1
   }
 }

From eb1399b4ca42f4a7e927574355fb204d4599dbae Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 24 Nov 2020 13:17:00 +0100
Subject: [PATCH 099/244] 0.9.7-rc.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b61ec7db..7fdadd3f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.5",
+  "version": "0.9.7-rc.6",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 093906c0d1ff2bba0c54c5b5871e41219ac58b96 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 9 Dec 2020 21:51:23 +0100
Subject: [PATCH 100/244] [DDW-497] Improve autocomplete required selections ux

---
 source/components/Autocomplete.js            |   1 +
 source/skins/simple/AutocompleteSkin.js      |  11 +-
 source/themes/API/autocomplete.js            |   3 +-
 source/themes/simple/SimpleAutocomplete.scss |  13 ++
 stories/Autocomplete.stories.js              | 199 +++++++++++--------
 5 files changed, 137 insertions(+), 90 deletions(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index ce0a0184..16415ee2 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -26,6 +26,7 @@ export type AutocompleteProps = {
   label?: string | Element<any>,
   maxSelections?: number,
   requiredSelections?: number,
+  requiredSelectionsInfo?: (required: number, actual: number) => string,
   maxVisibleOptions: number,
   multipleSameSelections: boolean,
   onChange?: Function,
diff --git a/source/skins/simple/AutocompleteSkin.js b/source/skins/simple/AutocompleteSkin.js
index 32922380..88b2533c 100644
--- a/source/skins/simple/AutocompleteSkin.js
+++ b/source/skins/simple/AutocompleteSkin.js
@@ -56,7 +56,8 @@ export const AutocompleteSkin = (props: Props) => {
     if (props.selectedOptions && props.renderSelections) {
       // call custom renderSelections function
       return props.renderSelections(props.getSelectionProps);
-    } else if (props.selectedOptions && !props.renderSelections) {
+    }
+    if (props.selectedOptions && !props.renderSelections) {
       // render default skin
       return props.selectedOptions.map((selectedOption, index) => (
         <span className={theme.selectedWordBox} key={index}>
@@ -90,6 +91,14 @@ export const AutocompleteSkin = (props: Props) => {
       ref={props.rootRef}
       role="presentation"
     >
+      {props.requiredSelections > 0 && props.requiredSelectionsInfo != null && (
+        <div className={theme.requiredWordsInfo}>
+          {props.requiredSelectionsInfo(
+            props.requiredSelections,
+            selectedOptionsCount
+          )}
+        </div>
+      )}
       <FormField
         error={error}
         inputRef={props.inputRef}
diff --git a/source/themes/API/autocomplete.js b/source/themes/API/autocomplete.js
index 818bd84d..4339cfcb 100644
--- a/source/themes/API/autocomplete.js
+++ b/source/themes/API/autocomplete.js
@@ -8,5 +8,6 @@ export const AUTOCOMPLETE_THEME_API = {
   selectedWordRemoveButton: '',
   hasSelectedWords: '',
   opened: '',
-  errored: ''
+  errored: '',
+  requiredWordsInfo: '',
 };
diff --git a/source/themes/simple/SimpleAutocomplete.scss b/source/themes/simple/SimpleAutocomplete.scss
index d800d0a2..c5e0875f 100644
--- a/source/themes/simple/SimpleAutocomplete.scss
+++ b/source/themes/simple/SimpleAutocomplete.scss
@@ -11,6 +11,9 @@ $autocomplete-border-color-errored: var(--rp-autocomplete-border-color-errored,
 $autocomplete-min-height: var(--rp-autocomplete-min-height, 90px) !default;
 $autocomplete-padding: var(--rp-autocomplete-padding, 5px 20px) !default;
 $autocomplete-width: var(--rp-autocomplete-width, 100%) !default;
+$autocomplete-required-words-font-family: var(--rp-autocomplete-required-words-font-family, $theme-font-regular, sans-serif) !default;
+$autocomplete-required-words-font-size: var(--rp-autocomplete-required-words-color, 14px) !default;
+$autocomplete-required-words-color: var(--rp-autocomplete-required-words-color, rgba(94, 96, 102, 0.5)) !default;
 
 // input
 $autocomplete-input-bg-color: var(--rp-autocomplete-input-bg-color, transparent) !default;
@@ -49,6 +52,7 @@ $autocomplete-selected-words-font-family: var(
 $autocomplete-selected-words-min-height: var(--rp-autocomplete-selected-words-min-height, 28px) !default;
 
 .autocompleteWrapper {
+  position: relative;
 }
 
 .autocompleteContent {
@@ -117,6 +121,15 @@ $autocomplete-selected-words-min-height: var(--rp-autocomplete-selected-words-mi
   color: inherit;
 }
 
+.requiredWordsInfo {
+  position: absolute;
+  right: 0;
+  top: 9px;
+  font-family: $autocomplete-required-words-font-family;
+  font-size: $autocomplete-required-words-font-size;
+  color: $autocomplete-required-words-color;
+}
+
 // BEGIN SPECIAL STATES ---------- //
 
 .hasSelectedWords {
diff --git a/stories/Autocomplete.stories.js b/stories/Autocomplete.stories.js
index e8311f1d..3e886375 100644
--- a/stories/Autocomplete.stories.js
+++ b/stories/Autocomplete.stories.js
@@ -35,28 +35,22 @@ const OPTIONS = [
   'join',
   'paper',
   'box',
-  'tab'
+  'tab',
 ];
 
 storiesOf('Autocomplete', module)
-
   .addDecorator(decorateWithSimpleTheme)
 
   // ====== Stories ======
 
-  .add('Enter mnemonics - plain', () => (
-    <Autocomplete />
-  ))
+  .add('Enter mnemonics - plain', () => <Autocomplete />)
 
   .add('Enter mnemonics - label', () => (
     <Autocomplete label="Recovery phrase" />
   ))
 
   .add('Enter mnemonics - placeholder', () => (
-    <Autocomplete
-      label="Recovery phrase"
-      placeholder="Enter recovery phrase"
-    />
+    <Autocomplete label="Recovery phrase" placeholder="Enter recovery phrase" />
   ))
 
   .add('Enter mnemonics - error', () => (
@@ -67,8 +61,9 @@ storiesOf('Autocomplete', module)
     />
   ))
 
-  .add('(9-word mnemonic) - not sorted',
-    withState({ selectedOpts: [] }, store => (
+  .add(
+    '(9-word mnemonic) - not sorted',
+    withState({ selectedOpts: [] }, (store) => (
       <Autocomplete
         label="Recovery phrase"
         options={OPTIONS}
@@ -76,38 +71,41 @@ storiesOf('Autocomplete', module)
         sortAlphabetically={false}
         multipleSameSelections={false}
         maxSelections={9}
-        onChange={selectedOpts => store.set({ selectedOpts })}
+        onChange={(selectedOpts) => store.set({ selectedOpts })}
       />
     ))
   )
 
-  .add('(9-word mnemonic) - sorted with multiple same selections',
-    withState({ selectedOpts: [] }, store => (
+  .add(
+    '(9-word mnemonic) - sorted with multiple same selections',
+    withState({ selectedOpts: [] }, (store) => (
       <Autocomplete
         label="Recovery phrase"
         options={OPTIONS}
         placeholder="Enter mnemonic..."
         maxSelections={9}
-        onChange={selectedOpts => store.set({ selectedOpts })}
+        onChange={(selectedOpts) => store.set({ selectedOpts })}
       />
     ))
   )
 
-  .add('(12-word mnemonic) 5 suggestions',
-    withState({ selectedOpts: [] }, store => (
+  .add(
+    '(12-word mnemonic) 5 suggestions',
+    withState({ selectedOpts: [] }, (store) => (
       <Autocomplete
         label="Recovery phrase"
         options={OPTIONS}
         placeholder="Enter mnemonic..."
         maxSelections={12}
         maxVisibleOptions={5}
-        onChange={selectedOpts => store.set({ selectedOpts })}
+        onChange={(selectedOpts) => store.set({ selectedOpts })}
       />
     ))
   )
 
-  .add('(12-word mnemonic) 5 suggestions - isOpeningUpward',
-    withState({ selectedOpts: [] }, store => (
+  .add(
+    '(12-word mnemonic) 5 suggestions - isOpeningUpward',
+    withState({ selectedOpts: [] }, (store) => (
       <Autocomplete
         className={styles.customMargin}
         isOpeningUpward
@@ -116,13 +114,14 @@ storiesOf('Autocomplete', module)
         placeholder="Enter mnemonic..."
         maxSelections={12}
         maxVisibleOptions={5}
-        onChange={selectedOpts => store.set({ selectedOpts })}
+        onChange={(selectedOpts) => store.set({ selectedOpts })}
       />
     ))
   )
 
-  .add('(12-word mnemonic) 5 suggestions and regex that allows only letters',
-    withState({ selectedOpts: [] }, store => (
+  .add(
+    '(12-word mnemonic) 5 suggestions and regex that allows only letters',
+    withState({ selectedOpts: [] }, (store) => (
       <Autocomplete
         label="Recovery phrase"
         options={OPTIONS}
@@ -130,54 +129,53 @@ storiesOf('Autocomplete', module)
         maxSelections={12}
         maxVisibleOptions={5}
         invalidCharsRegex={/[^a-zA-Z]/g}
-        onChange={selectedOpts => store.set({ selectedOpts })}
+        onChange={(selectedOpts) => store.set({ selectedOpts })}
       />
     ))
   )
 
-  .add('Enter mnemonics in Modal',
-    withState({ isOpen: true, selectedOpts: [] }, store => (
-      store.state.isOpen
-        ? (
-          <Modal
-            isOpen={store.state.isOpen}
-            triggerCloseOnOverlayClick={false}
-            onClose={() => store.set({ isOpen: false })}
-          >
-            <div className={styles.dialogWrapper}>
-              <div className={styles.title}>
-                <h1>Autocomplete in Modal</h1>
-              </div>
-              <div className={styles.content}>
-                <Autocomplete
-                  label="Recovery phrase"
-                  placeholder="Enter recovery phrase"
-                  options={OPTIONS}
-                  maxSelections={12}
-                  maxVisibleOptions={5}
-                  invalidCharsRegex={/[^a-zA-Z]/g}
-                  onChange={selectedOpts => store.set({ selectedOpts })}
-                />
-              </div>
-              <div className={styles.actions}>
-                <Button
-                  onClick={() => store.set({ isOpen: false })}
-                  className="primary"
-                  label="Submit"
-                />
-              </div>
+  .add(
+    'Enter mnemonics in Modal',
+    withState({ isOpen: true, selectedOpts: [] }, (store) =>
+      store.state.isOpen ? (
+        <Modal
+          isOpen={store.state.isOpen}
+          triggerCloseOnOverlayClick={false}
+          onClose={() => store.set({ isOpen: false })}
+        >
+          <div className={styles.dialogWrapper}>
+            <div className={styles.title}>
+              <h1>Autocomplete in Modal</h1>
             </div>
-          </Modal>
-        )
-        : (
-          <button
-            className={styles.reopenModal}
-            onClick={() => store.set({ isOpen: !store.state.isOpen })}
-          >
-            Reopen modal
-          </button>
-        )
-    ))
+            <div className={styles.content}>
+              <Autocomplete
+                label="Recovery phrase"
+                placeholder="Enter recovery phrase"
+                options={OPTIONS}
+                maxSelections={12}
+                maxVisibleOptions={5}
+                invalidCharsRegex={/[^a-zA-Z]/g}
+                onChange={(selectedOpts) => store.set({ selectedOpts })}
+              />
+            </div>
+            <div className={styles.actions}>
+              <Button
+                onClick={() => store.set({ isOpen: false })}
+                className="primary"
+                label="Submit"
+              />
+            </div>
+          </div>
+        </Modal>
+      ) : (
+        <button
+          className={styles.reopenModal}
+          onClick={() => store.set({ isOpen: !store.state.isOpen })}
+        >
+          Reopen modal
+        </button>
+      )
+    )
   )
 
   .add('Clear value on click', () => {
@@ -195,9 +193,31 @@ storiesOf('Autocomplete', module)
       </div>
     );
   })
+
+  .add(
+    'requiredSelections',
+    withState({ error: null }, (store) => (
+      <Autocomplete
+        label="Required Selections"
+        options={OPTIONS}
+        placeholder="Enter mnemonic..."
+        requiredSelections={3}
+        requiredSelectionsInfo={(required, actual) =>
+          `${Math.min(actual, required)} of ${required} words selected`
+        }
+        maxSelections={3}
+        error={store.state.error}
+        onChange={(options) =>
+          store.set({ error: options.length === 3 ? 'invalid mnemonic' : null })
+        }
+      />
+    ))
+  )
+
   /*eslint-disable */
-  .add('render prop - renderSelections',
-    withState({ selectedOpts: [] }, store => (
+  .add(
+    'render prop - renderSelections',
+    withState({ selectedOpts: [] }, (store) => (
       <Autocomplete
         label="Recovery phrase"
         options={OPTIONS}
@@ -206,17 +226,17 @@ storiesOf('Autocomplete', module)
         multipleSameSelections={false}
         maxSelections={7}
         maxVisibleOptions={7}
-        onChange={selectedOpts => store.set({ selectedOpts })}
-        renderSelections={getSelectionProps => {
+        onChange={(selectedOpts) => store.set({ selectedOpts })}
+        renderSelections={(getSelectionProps) => {
           const {
             inputValue,
             isOpen,
             selectedOptions,
             theme,
-            removeSelection
+            removeSelection,
           } = getSelectionProps({
-            removeSelection: index =>
-              console.log(`You removed: ${selectedOptions[index]}`)
+            removeSelection: (index) =>
+              console.log(`You removed: ${selectedOptions[index]}`),
           });
 
           return selectedOptions.map((option, index) => (
@@ -240,8 +260,9 @@ storiesOf('Autocomplete', module)
     ))
   )
 
-  .add('Render prop - renderOptions',
-    withState({ selectedOpts: [] }, store => (
+  .add(
+    'Render prop - renderOptions',
+    withState({ selectedOpts: [] }, (store) => (
       <Autocomplete
         label="Select an Option Multiple Times"
         options={OPTIONS}
@@ -250,8 +271,8 @@ storiesOf('Autocomplete', module)
         multipleSameSelections
         maxSelections={10}
         maxVisibleOptions={7}
-        onChange={selectedOpts => store.set({ selectedOpts })}
-        renderOptions={getOptionProps => {
+        onChange={(selectedOpts) => store.set({ selectedOpts })}
+        renderOptions={(getOptionProps) => {
           const {
             options,
             selectedOptions,
@@ -260,18 +281,18 @@ storiesOf('Autocomplete', module)
             isDisabledOption,
             theme,
             onClick,
-            onMouseEnter
+            onMouseEnter,
           } = getOptionProps({
             onClick: (option, event) => console.log(`You clicked "${option}"`),
             onMouseEnter: (index, event) =>
-              console.log(`Mouse is on "${options[index]}"`)
+              console.log(`Mouse is on "${options[index]}"`),
           });
 
           return options.map((option, index) => {
             // calculates number of times the option
             // has been selected already
             const timesSelected = selectedOptions.filter(
-              selectedOpt => selectedOpt === option
+              (selectedOpt) => selectedOpt === option
             ).length;
 
             return (
@@ -284,7 +305,7 @@ storiesOf('Autocomplete', module)
                   isHighlightedOption(index)
                     ? themeOverrides.customHighlight
                     : null,
-                  option.isDisabled ? theme.disabledOption : null
+                  option.isDisabled ? theme.disabledOption : null,
                 ])}
                 onMouseEnter={onMouseEnter.bind(null, index)}
                 onClick={onClick.bind(null, option)}
@@ -295,7 +316,7 @@ storiesOf('Autocomplete', module)
                     style={{
                       fontStyle: 'italic',
                       fontSize: '12px',
-                      marginLeft: '1rem'
+                      marginLeft: '1rem',
                     }}
                   >
                     {`times selected: ${timesSelected}`}
@@ -309,8 +330,9 @@ storiesOf('Autocomplete', module)
     ))
   )
   /*eslint-disable */
-  .add('theme overrides',
-    withState({ selectedOpts: [] }, store => (
+  .add(
+    'theme overrides',
+    withState({ selectedOpts: [] }, (store) => (
       <Autocomplete
         themeOverrides={themeOverrides}
         label="Recovery phrase"
@@ -319,13 +341,14 @@ storiesOf('Autocomplete', module)
         maxSelections={12}
         maxVisibleOptions={5}
         invalidCharsRegex={/[^a-zA-Z]/g}
-        onChange={selectedOpts => store.set({ selectedOpts })}
+        onChange={(selectedOpts) => store.set({ selectedOpts })}
       />
     ))
   )
 
-  .add('custom theme',
-    withState({ selectedOpts: [] }, store => (
+  .add(
+    'custom theme',
+    withState({ selectedOpts: [] }, (store) => (
       <Autocomplete
         theme={CustomAutocompleteTheme}
         label="Custom Autocomplete theme"
@@ -334,7 +357,7 @@ storiesOf('Autocomplete', module)
         maxSelections={12}
         maxVisibleOptions={5}
         invalidCharsRegex={/[^a-zA-Z]/g}
-        onChange={selectedOpts => store.set({ selectedOpts })}
+        onChange={(selectedOpts) => store.set({ selectedOpts })}
       />
     ))
   );

From a45f48584ce3ed8831fea7efb1d553dc09429493 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 14 Dec 2020 17:55:25 +0100
Subject: [PATCH 101/244] [DDW-497] Allow multiple required selection counts

---
 source/components/Autocomplete.js       |  4 ++--
 source/skins/simple/AutocompleteSkin.js | 29 +++++++++++++-----------
 stories/Autocomplete.stories.js         | 30 +++++++++++++++++++++++--
 3 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index 16415ee2..8162bd1e 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -25,7 +25,7 @@ export type AutocompleteProps = {
   isOpeningUpward: boolean,
   label?: string | Element<any>,
   maxSelections?: number,
-  requiredSelections?: number,
+  requiredSelections: [number],
   requiredSelectionsInfo?: (required: number, actual: number) => string,
   maxVisibleOptions: number,
   multipleSameSelections: boolean,
@@ -69,7 +69,7 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
     maxVisibleOptions: 10, // max number of visible options
     multipleSameSelections: true, // if true then same word can be selected multiple times
     options: [],
-    requiredSelections: 0,
+    requiredSelections: [],
     sortAlphabetically: true, // options are sorted alphabetically by default
     theme: null,
     themeId: IDENTIFIERS.AUTOCOMPLETE,
diff --git a/source/skins/simple/AutocompleteSkin.js b/source/skins/simple/AutocompleteSkin.js
index 88b2533c..8593873d 100644
--- a/source/skins/simple/AutocompleteSkin.js
+++ b/source/skins/simple/AutocompleteSkin.js
@@ -1,9 +1,9 @@
 // @flow
 import React from 'react';
-import type { ElementRef, Element } from 'react';
+import type { ElementRef } from 'react';
 
 // external libraries
-import _ from 'lodash';
+import { slice, some } from 'lodash';
 import classnames from 'classnames';
 import type { AutocompleteProps } from '../../components/Autocomplete';
 
@@ -38,7 +38,7 @@ type Props = AutocompleteProps & {
 export const AutocompleteSkin = (props: Props) => {
   const theme = props.theme[props.themeId];
 
-  const filteredAndLimitedOptions = _.slice(
+  const filteredAndLimitedOptions = slice(
     props.filteredOptions,
     0,
     props.maxVisibleOptions
@@ -79,8 +79,10 @@ export const AutocompleteSkin = (props: Props) => {
   };
 
   const selectedOptionsCount = props.selectedOptions.length;
-  const hasSelectedRequiredNumberOfOptions =
-    selectedOptionsCount >= props.requiredSelections;
+  const hasSelectedRequiredNumberOfOptions = some(
+    props.requiredSelections,
+    (requiredCount) => selectedOptionsCount === requiredCount
+  );
   const error = hasSelectedRequiredNumberOfOptions ? props.error : null;
 
   return (
@@ -91,14 +93,15 @@ export const AutocompleteSkin = (props: Props) => {
       ref={props.rootRef}
       role="presentation"
     >
-      {props.requiredSelections > 0 && props.requiredSelectionsInfo != null && (
-        <div className={theme.requiredWordsInfo}>
-          {props.requiredSelectionsInfo(
-            props.requiredSelections,
-            selectedOptionsCount
-          )}
-        </div>
-      )}
+      {props.requiredSelections.length > 0 &&
+        props.requiredSelectionsInfo != null && (
+          <div className={theme.requiredWordsInfo}>
+            {props.requiredSelectionsInfo(
+              props.requiredSelections,
+              selectedOptionsCount
+            )}
+          </div>
+        )}
       <FormField
         error={error}
         inputRef={props.inputRef}
diff --git a/stories/Autocomplete.stories.js b/stories/Autocomplete.stories.js
index 3e886375..c6a34eb5 100644
--- a/stories/Autocomplete.stories.js
+++ b/stories/Autocomplete.stories.js
@@ -1,4 +1,5 @@
 // @flow
+import { some } from 'lodash';
 import React from 'react';
 import createRef from 'create-react-ref/lib/createRef';
 import classnames from 'classnames';
@@ -195,13 +196,13 @@ storiesOf('Autocomplete', module)
   })
 
   .add(
-    'requiredSelections',
+    'requiredSelections [3]',
     withState({ error: null }, (store) => (
       <Autocomplete
         label="Required Selections"
         options={OPTIONS}
         placeholder="Enter mnemonic..."
-        requiredSelections={3}
+        requiredSelections={[3]}
         requiredSelectionsInfo={(required, actual) =>
           `${Math.min(actual, required)} of ${required} words selected`
         }
@@ -214,6 +215,31 @@ storiesOf('Autocomplete', module)
     ))
   )
 
+  .add(
+    'requiredSelections [3, 5, 7]',
+    withState({ error: null }, (store) => (
+      <Autocomplete
+        label="Required Selections"
+        options={OPTIONS}
+        placeholder="Enter mnemonic..."
+        requiredSelections={[3, 5, 7]}
+        requiredSelectionsInfo={(required, actual) => `${actual} words entered`}
+        maxSelections={7}
+        error={store.state.error}
+        onChange={(options) =>
+          store.set({
+            error: some(
+              [3, 5, 7],
+              (requiredCount) => options.length === requiredCount
+            )
+              ? 'invalid mnemonic'
+              : null,
+          })
+        }
+      />
+    ))
+  )
+
   /*eslint-disable */
   .add(
     'render prop - renderSelections',

From f6b0a2a74fb982c8bca309eae79b2c2c74a271cf Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 16 Dec 2020 20:22:28 +0100
Subject: [PATCH 102/244] [DDW-497] Add changelog entry

---
 CHANGELOG.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d832bb71..1ad8d6df 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,11 +6,9 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
-0.9.7
-=====
-
 ### Features
 
+- Improve autocomplete required selections ux ([PR 154](https://github.com/input-output-hk/react-polymorph/pull/154))
 - Improve `FormField` UX by using pop overs to show errors ([PR 151](https://github.com/input-output-hk/react-polymorph/pull/151)
 
 0.9.6

From b5b2ab41716a07c190ed9f6a6f89375415629184 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 16 Dec 2020 20:22:43 +0100
Subject: [PATCH 103/244] 0.9.7-rc.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7fdadd3f..cf605b9d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.6",
+  "version": "0.9.7-rc.7",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From a26d0b7c5c5db1bc7e1a28d063ff4558b6c01bde Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 4 Jan 2021 23:18:45 +0100
Subject: [PATCH 104/244] [DDW-497] add default max length for password input

---
 source/components/PasswordInput.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/components/PasswordInput.js b/source/components/PasswordInput.js
index 343c6762..ae498e68 100644
--- a/source/components/PasswordInput.js
+++ b/source/components/PasswordInput.js
@@ -140,6 +140,7 @@ PasswordInput.defaultProps = {
   isShowingTooltipOnFocus: true,
   isShowingTooltipOnHover: true,
   minLength: 10,
+  maxLength: 255,
   minStrongScore: 0.75,
   readOnly: false,
   theme: null,

From 9315fbe00a6c74ac257950ead9c3095c2b522ca3 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 4 Jan 2021 23:19:09 +0100
Subject: [PATCH 105/244] 0.9.7-rc.8

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cf605b9d..f23c1852 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.7",
+  "version": "0.9.7-rc.8",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 5be4a37466e712d1fa5e47494fe9e3daad5d6dfe Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 6 Jan 2021 12:26:11 +0100
Subject: [PATCH 106/244] [DDW-497] Fix typo in themes variable

---
 source/themes/simple/SimpleAutocomplete.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/themes/simple/SimpleAutocomplete.scss b/source/themes/simple/SimpleAutocomplete.scss
index c5e0875f..f8d15fbd 100644
--- a/source/themes/simple/SimpleAutocomplete.scss
+++ b/source/themes/simple/SimpleAutocomplete.scss
@@ -12,7 +12,7 @@ $autocomplete-min-height: var(--rp-autocomplete-min-height, 90px) !default;
 $autocomplete-padding: var(--rp-autocomplete-padding, 5px 20px) !default;
 $autocomplete-width: var(--rp-autocomplete-width, 100%) !default;
 $autocomplete-required-words-font-family: var(--rp-autocomplete-required-words-font-family, $theme-font-regular, sans-serif) !default;
-$autocomplete-required-words-font-size: var(--rp-autocomplete-required-words-color, 14px) !default;
+$autocomplete-required-words-font-size: var(--rp-autocomplete-required-words-font-size, 14px) !default;
 $autocomplete-required-words-color: var(--rp-autocomplete-required-words-color, rgba(94, 96, 102, 0.5)) !default;
 
 // input

From 1dea5fc2f3cc75d305a3e250d0bee6bed3066a53 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 6 Jan 2021 12:26:35 +0100
Subject: [PATCH 107/244] 0.9.7-rc.9

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f23c1852..b98f2e5c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.8",
+  "version": "0.9.7-rc.9",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From a50eed2ef975700d65ddd3390d5733117ec6ab51 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 6 Jan 2021 12:43:22 +0100
Subject: [PATCH 108/244] [DDW-497] Add theme var for label top offset

---
 source/themes/simple/SimpleAutocomplete.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/source/themes/simple/SimpleAutocomplete.scss b/source/themes/simple/SimpleAutocomplete.scss
index f8d15fbd..0eee68cd 100644
--- a/source/themes/simple/SimpleAutocomplete.scss
+++ b/source/themes/simple/SimpleAutocomplete.scss
@@ -14,6 +14,7 @@ $autocomplete-width: var(--rp-autocomplete-width, 100%) !default;
 $autocomplete-required-words-font-family: var(--rp-autocomplete-required-words-font-family, $theme-font-regular, sans-serif) !default;
 $autocomplete-required-words-font-size: var(--rp-autocomplete-required-words-font-size, 14px) !default;
 $autocomplete-required-words-color: var(--rp-autocomplete-required-words-color, rgba(94, 96, 102, 0.5)) !default;
+$autocomplete-required-words-offset-top: var(--rp-autocomplete-required-words-offset-top, 9px) !default;
 
 // input
 $autocomplete-input-bg-color: var(--rp-autocomplete-input-bg-color, transparent) !default;
@@ -124,7 +125,7 @@ $autocomplete-selected-words-min-height: var(--rp-autocomplete-selected-words-mi
 .requiredWordsInfo {
   position: absolute;
   right: 0;
-  top: 9px;
+  top: $autocomplete-required-words-offset-top;
   font-family: $autocomplete-required-words-font-family;
   font-size: $autocomplete-required-words-font-size;
   color: $autocomplete-required-words-color;

From e715aeffeb9a078704b0979cd7adfad5d37c3eb7 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 6 Jan 2021 12:43:27 +0100
Subject: [PATCH 109/244] 0.9.7-rc.10

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b98f2e5c..ce873285 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.9",
+  "version": "0.9.7-rc.10",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 919eb9fa7786443fb329cd4631b1e4e908a4649d Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 8 Jan 2021 19:26:35 +0100
Subject: [PATCH 110/244] [DDW-497] Invalidate passwords longer than max length

---
 source/components/PasswordInput.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/source/components/PasswordInput.js b/source/components/PasswordInput.js
index ae498e68..90ae5a5c 100644
--- a/source/components/PasswordInput.js
+++ b/source/components/PasswordInput.js
@@ -53,6 +53,7 @@ export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
     entropyFactor,
     error,
     minLength,
+    maxLength,
     minStrongScore,
     isPasswordRepeat,
     repeatPassword,
@@ -80,7 +81,8 @@ export const PasswordInput: StatelessFunctionalComponent<PasswordInputProps> = (
   let passwordFeedback = null;
   const password = props.value;
   const score = calculatePasswordScore(password, entropyFactor);
-  const isValidPassword = password.length >= minLength;
+  const isValidPassword =
+    password.length >= minLength && password.length <= maxLength;
   const isNotEmpty = password.length > 0;
 
   if (error) {

From d20ea7d6ae67d96da629f5068515765d4cba307e Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 8 Jan 2021 19:27:01 +0100
Subject: [PATCH 111/244] 0.9.7-rc.11

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ce873285..0e8b6339 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.10",
+  "version": "0.9.7-rc.11",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 51642de25b4e2a6b10bccd5f0e01bb267990930e Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 22 Jan 2021 14:04:25 +0100
Subject: [PATCH 112/244] [DDW-543] Refactor Numeric Input to use bignumber.js

---
 .eslintrc                         |   1 +
 CHANGELOG.md                      |   1 +
 package.json                      |   1 +
 source/components/NumericInput.js | 380 ++++++++++--------------------
 source/utils/strings.js           |   5 +-
 stories/NumericInput.stories.js   | 110 +++++----
 yarn.lock                         |   5 +
 7 files changed, 194 insertions(+), 309 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 2ad270ea..bc26b3e9 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -35,6 +35,7 @@
       },
       "allowChildren": true
     }],
+    "lines-between-class-members": "off",
     "react/destructuring-assignment": "off",
     "react/no-did-mount-set-state": "off",
     "react/jsx-no-bind": "off",
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d832bb71..c476acb2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ vNext
 
 ### Features
 
+- Imporve `NumericInput` component to support big numbers ([PR 152](https://github.com/input-output-hk/react-polymorph/pull/152))
 - Improve `FormField` UX by using pop overs to show errors ([PR 151](https://github.com/input-output-hk/react-polymorph/pull/151)
 
 0.9.6
diff --git a/package.json b/package.json
index 7fdadd3f..1e7db289 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "babel-jest": "24.9.0",
     "babel-loader": "8.0.6",
     "babel-plugin-lodash": "3.3.4",
+    "bignumber.js": "9.0.1",
     "classnames": "2.2.5",
     "concurrently": "5.2.0",
     "cpy": "8.0.0",
diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 6ad41432..8ad327ce 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -1,11 +1,14 @@
 // @flow
+import { escapeRegExp } from 'lodash/string';
 import React, { Component } from 'react';
+import BigNumber from 'bignumber.js';
+
 // $FlowFixMe
 import type {
   ComponentType,
   SyntheticInputEvent,
   Element,
-  ElementRef
+  ElementRef,
 } from 'react';
 
 // external libraries
@@ -21,26 +24,17 @@ import type { ThemeContextProp } from './HOC/withTheme';
 import { removeCharAtPosition } from '../utils/strings';
 import type { InputEvent } from '../utils/types';
 
-type NumberFormatOptions = {
-  groupSeparator: string,
-  decimalSeparator: string
-};
-
-const DEFAULT_NUMBER_FORMAT = {
-  groupSeparator: ',',
-  decimalSeparator: '.'
-};
-
 export type NumericInputProps = {
   allowSigns?: boolean,
   autoFocus?: boolean,
+  bigNumberFormat?: BigNumber.Format,
+  decimalPlaces?: number,
+  roundingMode?: BigNumber.RoundingMode,
   className?: string,
   context: ThemeContextProp,
   disabled?: boolean,
   error?: string,
   label?: string | Element<any>,
-  numberFormat: NumberFormatOptions,
-  numberLocaleOptions?: Number$LocaleOptions,
   onBlur?: Function,
   onChange?: Function,
   onFocus?: Function,
@@ -50,19 +44,15 @@ export type NumericInputProps = {
   theme: ?Object,
   themeId: string,
   themeOverrides: Object,
-  value: ?number
+  value: ?BigNumber.Instance,
 };
 
 type State = {
   composedTheme: Object,
-  minimumFractionDigits: number,
   inputCaretPosition: number,
-  fallbackInputValue: ?string
+  fallbackInputValue: ?string,
 };
 
-// Always use known number format and transform it where necessary
-const LOCALE = 'en-US';
-
 class NumericInputBase extends Component<NumericInputProps, State> {
   inputElement: { current: null | ElementRef<'input'> };
   _hasInputBeenChanged: boolean = false;
@@ -72,36 +62,25 @@ class NumericInputBase extends Component<NumericInputProps, State> {
   static defaultProps = {
     allowSigns: true,
     context: createEmptyContext(),
-    numberFormat: DEFAULT_NUMBER_FORMAT,
     readOnly: false,
     theme: null,
     themeId: IDENTIFIERS.INPUT,
     themeOverrides: {},
-    value: null
+    value: null,
   };
 
   constructor(props: NumericInputProps) {
     super(props);
-    const {
-      context,
-      numberLocaleOptions,
-      themeId,
-      theme,
-      themeOverrides
-    } = props;
+    const { context, themeId, theme, themeOverrides } = props;
     this.inputElement = createRef();
-    const minimumFractionDigits = numberLocaleOptions
-      ? numberLocaleOptions.minimumFractionDigits
-      : 0;
     this.state = {
       composedTheme: composeTheme(
         addThemeId(theme || context.theme, themeId),
         addThemeId(themeOverrides, themeId),
         context.ROOT_THEME_API
       ),
-      minimumFractionDigits: minimumFractionDigits || 0,
       inputCaretPosition: 0,
-      fallbackInputValue: null
+      fallbackInputValue: null,
     };
   }
 
@@ -112,7 +91,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       this.focus();
       if (inputElement && inputElement.current) {
         this.setState({
-          inputCaretPosition: inputElement.current.selectionStart
+          inputCaretPosition: inputElement.current.selectionStart,
         });
       }
     }
@@ -152,8 +131,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       }
       this.setState({
         inputCaretPosition: result.caretPosition,
-        minimumFractionDigits: result.minimumFractionDigits,
-        fallbackInputValue: result.fallbackInputValue
+        fallbackInputValue: result.fallbackInputValue,
       });
     }
   };
@@ -166,27 +144,27 @@ class NumericInputBase extends Component<NumericInputProps, State> {
   processValueChange(
     event: InputEvent
   ): ?{
-    value: ?number,
+    value: ?BigNumber.Instance,
     caretPosition: number,
     fallbackInputValue?: ?string,
-    minimumFractionDigits: number
   } {
-    const { numberFormat, value, allowSigns } = this.props;
-    const changedCaretPosition = event.target.selectionStart;
-    const valueToProcess = transformNumberFormat(
-      event.target.value,
-      numberFormat,
-      DEFAULT_NUMBER_FORMAT
-    );
-    const { inputType } = event;
+    const { allowSigns, decimalPlaces, value } = this.props;
+    const { inputType, target } = event;
+    const { decimalSeparator, groupSeparator } = this.getBigNumberFormat();
+    const changedCaretPosition = target.selectionStart;
+    const valueToProcess = target.value;
     const fallbackInputValue = this.state.fallbackInputValue || '';
     const isBackwardDelete = inputType === 'deleteContentBackward';
     const isForwardDelete = inputType === 'deleteContentForward';
     const isDeletion = isForwardDelete || isBackwardDelete;
     const isInsert = inputType === 'insertText';
     const deleteCaretCorrection = isBackwardDelete ? 0 : 1;
-    const validInputSignsRegExp = new RegExp(`^([-])?([0-9,.]+)?$`); // eslint-disable-line
-    const validInputNoSignsRegExp = new RegExp(`^([0-9,.]+)?$`); // eslint-disable-line
+    const validInputSignsRegExp = new RegExp(
+      `^([-])?([0-9${decimalSeparator}${groupSeparator}]+)?$`
+    );
+    const validInputNoSignsRegExp = new RegExp(
+      `^([0-9${decimalSeparator}${groupSeparator}]+)?$`
+    );
     const validInputRegex = allowSigns
       ? validInputSignsRegExp
       : validInputNoSignsRegExp;
@@ -200,8 +178,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       return {
         caretPosition: changedCaretPosition - 1,
         fallbackInputValue,
-        minimumFractionDigits: this.state.minimumFractionDigits,
-        value
+        value,
       };
     }
 
@@ -211,7 +188,6 @@ class NumericInputBase extends Component<NumericInputProps, State> {
         value: null,
         caretPosition: 0,
         fallbackInputValue: null,
-        minimumFractionDigits: 0
       };
     }
 
@@ -224,7 +200,6 @@ class NumericInputBase extends Component<NumericInputProps, State> {
         value: null,
         caretPosition: 1,
         fallbackInputValue: '-',
-        minimumFractionDigits: 0
       };
     }
 
@@ -232,68 +207,60 @@ class NumericInputBase extends Component<NumericInputProps, State> {
      * ========= CLEAN THE INPUT =============
      */
 
-    // Options
-    const propsMinimumFractionDigits = this.getMinimumFractionDigits();
-    const maximumFractionDigits = this.getMaximumFractionDigits();
-    const numberLocaleOptions = this.getDynamicLocaleOptions();
-
-    // Current value
     const currentNumber = value;
     const currentValue =
-      value != null
-        ? value.toLocaleString(LOCALE, numberLocaleOptions)
+      currentNumber != null
+        ? this.bigNumberToFormattedString(currentNumber)
         : fallbackInputValue;
-    const currentNumberOfDots = getNumberOfDots(currentValue);
-    const hadDotBefore = currentNumberOfDots > 0;
+
+    const currentNumberOfDecimalSeparators = this.getNumberOfDecimalSeparators(
+      currentValue
+    );
+    const hadDecimalSeparatorBefore = currentNumberOfDecimalSeparators > 0;
 
     // New Value
     let newValue = valueToProcess;
     let newCaretPosition = changedCaretPosition;
-    const newNumberOfDots = getNumberOfDots(newValue);
+    const newNumberOfDecimalSeparators = this.getNumberOfDecimalSeparators(
+      newValue
+    );
 
-    // Case: A second decimal point was added somewhere
-    if (hadDotBefore && newNumberOfDots === 2) {
-      const oldFirstDotIndex = currentValue.indexOf('.');
-      const newFirstDotIndex = newValue.indexOf('.');
-      const wasDotAddedBeforeOldOne = newFirstDotIndex < oldFirstDotIndex;
+    // Case: A second decimal separator was added somewhere
+    if (hadDecimalSeparatorBefore && newNumberOfDecimalSeparators === 2) {
+      const oldFirstIndex = currentValue.indexOf(decimalSeparator);
+      const newFirstIndex = newValue.indexOf(decimalSeparator);
+      const wasSeparatorAddedBeforeOldOne = newFirstIndex < oldFirstIndex;
       // Remove the second decimal point and set caret position
       newValue = removeCharAtPosition(
         newValue,
-        wasDotAddedBeforeOldOne ? newValue.lastIndexOf('.') : oldFirstDotIndex
+        wasSeparatorAddedBeforeOldOne
+          ? newValue.lastIndexOf(decimalSeparator)
+          : oldFirstIndex
       );
-      newCaretPosition = newValue.indexOf('.') + 1;
+      newCaretPosition = newValue.indexOf(decimalSeparator) + 1;
     }
 
-    newValue = truncateToPrecision(newValue, maximumFractionDigits);
-
     /**
      * ========= PROCESS CLEANED INPUT =============
      */
-    const numberOfFractionDigits = getFractionDigits(newValue).length;
-    const dynamicMinimumFractionDigits = Math.min(
-      Math.max(propsMinimumFractionDigits, numberOfFractionDigits),
-      maximumFractionDigits
-    );
-    const newNumber = getValueAsNumber(newValue, maximumFractionDigits);
+    const newNumber =
+      newValue === '' ? null : this.formattedValueToBigNumber(newValue);
 
-    // Case: Just a dot was entered
-    if (valueToProcess === '.') {
-      const hasMinFractions = dynamicMinimumFractionDigits > 0;
+    // Case: Just a decimal separator was entered
+    if (valueToProcess === decimalSeparator) {
       return {
-        value: 0,
+        value: new BigNumber(0),
         caretPosition: 2,
-        fallbackInputValue: hasMinFractions ? null : '0.',
-        minimumFractionDigits: dynamicMinimumFractionDigits
+        fallbackInputValue: decimalPlaces > 0 ? null : `0${decimalSeparator}`,
       };
     }
 
-    // Case: Dot was added at the beginning of number
-    if (newValue.charAt(0) === '.') {
+    // Case: Decimal separator was added at the beginning of number
+    if (newValue.charAt(0) === decimalSeparator) {
       const newCaretPos = isInsert ? 2 : 1;
       return {
         value: newNumber,
         caretPosition: newCaretPos,
-        minimumFractionDigits: dynamicMinimumFractionDigits
       };
     }
 
@@ -306,99 +273,58 @@ class NumericInputBase extends Component<NumericInputProps, State> {
           changedCaretPosition +
           (isDeletion ? deleteAdjustment : insertAdjustment),
         fallbackInputValue,
-        minimumFractionDigits: dynamicMinimumFractionDigits,
-        value: currentNumber
+        value: currentNumber,
       };
     }
 
-    const localizedNewNumber = newNumber.toLocaleString(LOCALE, {
-      minimumFractionDigits: dynamicMinimumFractionDigits
-    });
+    const formattedNewNumber = this.bigNumberToFormattedString(newNumber);
 
     // Case: Dot was added at the end of number
-    if (!isDeletion && newValue.charAt(newValue.length - 1) === '.') {
+    if (
+      !isDeletion &&
+      newValue.charAt(newValue.length - 1) === decimalSeparator
+    ) {
       return {
         value: newNumber,
         caretPosition: changedCaretPosition,
         fallbackInputValue:
-          propsMinimumFractionDigits > 0 ? null : localizedNewNumber + '.',
-        minimumFractionDigits: 0
+          decimalPlaces > 0 ? null : formattedNewNumber + decimalSeparator,
+        minimumFractionDigits: 0,
       };
     }
 
     // Case: Dot was deleted with minimum fraction digits constrain defined
-    const hasFractions = this.getMinimumFractionDigitsProp() != null;
-    const wasDotRemoved = hadDotBefore && !newNumberOfDots;
-    if (wasDotRemoved && hasFractions && !isInsert) {
+    const hasDecimalPlaces = decimalPlaces != null;
+    const wasDecimalSeparatorRemoved =
+      hadDecimalSeparatorBefore && !newNumberOfDecimalSeparators;
+    if (wasDecimalSeparatorRemoved && hasDecimalPlaces && !isInsert) {
       return {
         caretPosition: newCaretPosition + deleteCaretCorrection,
         fallbackInputValue: null,
-        minimumFractionDigits: dynamicMinimumFractionDigits,
-        value: currentNumber
+        value: currentNumber,
       };
     }
 
     // Case: Valid change has been made
-    const hasNumberChanged = value !== newNumber;
-    const commasDiff =
-      getNumberOfCommas(localizedNewNumber) - getNumberOfCommas(newValue);
-    const haveCommasChanged = commasDiff > 0;
-    const onlyCommasChanged = !hasNumberChanged && haveCommasChanged;
+    const hasNumberChanged = this.isDifferentValue(currentNumber, newNumber);
+    const groupSeparatorsDiff =
+      this.getNumberOfGroupSeparators(formattedNewNumber) -
+      this.getNumberOfGroupSeparators(newValue);
+    const hasNumberOfGroupSeparatorsChanged = groupSeparatorsDiff > 0;
+    const onlyNumberOfGroupSeparatorsChanged =
+      !hasNumberChanged && hasNumberOfGroupSeparatorsChanged;
     const leadingZeroCorrection = valueHasLeadingZero ? -1 : 0;
     const caretCorrection =
-      (onlyCommasChanged ? deleteCaretCorrection : commasDiff) +
-      leadingZeroCorrection;
+      (onlyNumberOfGroupSeparatorsChanged
+        ? deleteCaretCorrection
+        : groupSeparatorsDiff) + leadingZeroCorrection;
     return {
       caretPosition: Math.max(newCaretPosition + caretCorrection, 0),
       fallbackInputValue: null,
-      minimumFractionDigits: dynamicMinimumFractionDigits,
-      value: newNumber
+      value: newNumber,
     };
   }
 
-  getMinimumFractionDigitsProp(): number | null {
-    const { numberLocaleOptions } = this.props;
-    if (!numberLocaleOptions) return null;
-    const { minimumFractionDigits } = numberLocaleOptions;
-    return minimumFractionDigits || null;
-  }
-
-  getMinimumFractionDigits(): number {
-    return this.getMinimumFractionDigitsProp() || 0;
-  }
-
-  getDynamicMinimumFractionDigits(): number {
-    const minimumFractionDigitsProp = this.getMinimumFractionDigits();
-    return Math.max(
-      this.state.minimumFractionDigits,
-      minimumFractionDigitsProp || 0
-    );
-  }
-
-  getMaximumFractionDigits(): number {
-    const { numberLocaleOptions } = this.props;
-    const minimumFractionDigits = this.getDynamicMinimumFractionDigits();
-    const maximumFractionDigits =
-      numberLocaleOptions && numberLocaleOptions.maximumFractionDigits != null
-        ? numberLocaleOptions.maximumFractionDigits
-        : 3;
-    return Math.max(minimumFractionDigits, maximumFractionDigits);
-  }
-
-  getDynamicLocaleOptions(): Number$LocaleOptions {
-    return Object.assign({}, this.props.numberLocaleOptions, {
-      minimumFractionDigits: this.getDynamicMinimumFractionDigits()
-    });
-  }
-
-  getLocalizedNumber(value: ?number) {
-    return convertNumberToLocalizedString(
-      value,
-      LOCALE,
-      this.getDynamicLocaleOptions()
-    );
-  }
-
   setInputCaretPosition = (position: number) => {
     const { inputElement } = this;
     if (!inputElement.current) return;
@@ -415,10 +341,51 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
   onBlur = () => {
     this.setState({
-      fallbackInputValue: null
+      fallbackInputValue: null,
     });
   };
 
+  getBigNumberFormat(): BigNumber.Config {
+    return this.props.bigNumberFormat ?? BigNumber.config().FORMAT;
+  }
+
+  bigNumberToFormattedString(number: ?BigNumber.Instance) {
+    const { bigNumberFormat, decimalPlaces, roundingMode } = this.props;
+    return number === null
+      ? ''
+      : number.toFormat(decimalPlaces, roundingMode, {
+          ...BigNumber.config().FORMAT, // defaults
+          ...bigNumberFormat, // custom overrides
+        });
+  }
+
+  formattedValueToBigNumber(value: string) {
+    const { decimalSeparator, groupSeparator } = this.getBigNumberFormat();
+    return new BigNumber(
+      value
+        .replace(new RegExp(escapeRegExp(groupSeparator), 'g'), '')
+        .replace(new RegExp(escapeRegExp(decimalSeparator), 'g'), '.')
+    );
+  }
+
+  getNumberOfGroupSeparators(value: string): number {
+    const { groupSeparator } = this.getBigNumberFormat();
+    return (value.match(new RegExp(escapeRegExp(groupSeparator), 'g')) || [])
+      .length;
+  }
+
+  getNumberOfDecimalSeparators(value: string): number {
+    const { decimalSeparator } = this.getBigNumberFormat();
+    return (value.match(new RegExp(escapeRegExp(decimalSeparator), 'g')) || [])
+      .length;
+  }
+
+  isDifferentValue(first: ?BigNumber.Instance, second: ?BigNumber.Instance) {
+    return BigNumber.isBigNumber(first)
+      ? first.isEqualTo(second)
+      : first === second;
+  }
+
   render() {
     // destructuring props ensures only the "...rest" get passed down
     const {
@@ -433,12 +400,15 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       ...rest
     } = this.props;
 
+    if (value != null && !BigNumber.isBigNumber(value)) {
+      throw new Error('Prop "value" must be of type BigNumber or null.');
+    }
+
     const InputSkin = skin || context.skins[IDENTIFIERS.INPUT];
 
-    const localizedInput = value != null ? this.getLocalizedNumber(value) : '';
     const inputValue = this.state.fallbackInputValue
       ? this.state.fallbackInputValue
-      : localizedInput;
+      : this.bigNumberToFormattedString(value);
 
     return (
       <InputSkin
@@ -446,11 +416,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
         inputRef={this.inputElement}
         onChange={this.onChange}
         theme={this.state.composedTheme}
-        value={transformNumberFormat(
-          inputValue,
-          DEFAULT_NUMBER_FORMAT,
-          this.props.numberFormat
-        )}
+        value={inputValue}
         onBlur={this.onBlur}
         {...rest}
       />
@@ -459,97 +425,3 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 }
 
 export const NumericInput = withTheme(NumericInputBase);
-
-// ========= HELPERS ==========
-
-const NUMERIC_INPUT_REGEX = /^([-])?([0-9,]+)?(\.([0-9]+)?)?$/;
-
-const isValidNumericInput = (value: string): boolean =>
-  NUMERIC_INPUT_REGEX.test(value);
-
-const isParsableNumberString = (
-  value: string,
-  requiredPrecision: number
-): boolean =>
-  // The number of digits is limited in Javascript - so the required precision influence
-  // the possible number of integer digits (only 15 digits can be safely represented in total)
-  parseFloat(value) >=
-    Number.MIN_SAFE_INTEGER / 10 ** (requiredPrecision + 1) &&
-  parseFloat(value) <=
-    Number.MAX_SAFE_INTEGER / 10 ** (requiredPrecision + 1) &&
-  !isNaN(parseFloat(value)) &&
-  isFinite(value);
-
-const removeCommas = (value: string): string => value.replace(/,/g, '');
-
-function parseStringToNumber(
-  value: string,
-  requiredPrecision: number
-): ?number {
-  const cleanedValue = removeCommas(value);
-  if (!isValidNumericInput(cleanedValue)) return null;
-  if (!isParsableNumberString(cleanedValue, requiredPrecision)) return null;
-  return parseFloat(cleanedValue);
-}
-
-function convertNumberToLocalizedString(
-  num: ?number,
-  locale: string,
-  options?: Number$LocaleOptions
-): string {
-  return num != null ? num.toLocaleString(locale, options) : '';
-}
-
-function getValueAsNumber(
-  value: string | number,
-  requiredPrecision: number
-): ?number {
-  return typeof value === 'string'
-    ? parseStringToNumber(value, requiredPrecision)
-    : value;
-}
-
-function getNumberOfCommas(value: string): number {
-  return (value.match(/,/g) || []).length;
-}
-
-function getNumberOfDots(value: string): number {
-  return (value.match(/\./g) || []).length;
-}
-
-function getIntegerDigits(
-  value: string,
-  decimalSeparator: string = '.'
-): string {
-  const fractionSeparatorIndex = value.indexOf(decimalSeparator);
-  if (fractionSeparatorIndex === -1) return value;
-  return value.substring(0, fractionSeparatorIndex);
-}
-
-function getFractionDigits(
-  value: string,
-  decimalSeparator: string = '.'
-): string {
-  const fractionSeparatorIndex = value.indexOf(decimalSeparator);
-  if (fractionSeparatorIndex === -1) return '';
-  return value.substring(fractionSeparatorIndex + 1);
-}
-
-function truncateToPrecision(value: string, precision: number): string {
-  const decimalPointIndex = value.indexOf('.');
-  if (decimalPointIndex === -1) return value;
-  const fractionDigits = removeCommas(getFractionDigits(value));
-  return getIntegerDigits(value) + '.' + fractionDigits.substring(0, precision);
-}
-
-function transformNumberFormat(
-  value: string,
-  inputFormat: NumberFormatOptions,
-  outputFormat: NumberFormatOptions
-) {
-  return value
-    .replace(new RegExp('\\' + inputFormat.groupSeparator, 'g'), '#')
-    .replace(new RegExp('\\' + inputFormat.decimalSeparator, 'g'), '@')
-    .replace(new RegExp('#', 'g'), outputFormat.groupSeparator)
-    .replace(new RegExp('@', 'g'), outputFormat.decimalSeparator);
-}
diff --git a/source/utils/strings.js b/source/utils/strings.js
index ebf54255..bc461166 100644
--- a/source/utils/strings.js
+++ b/source/utils/strings.js
@@ -1,4 +1,3 @@
 // @flow
-export const removeCharAtPosition = (str: string, pos: number) => (
-  str.substring(0, pos) + str.substring(pos + 1, str.length)
-);
+export const removeCharAtPosition = (str: string, pos: number) =>
+  str.substring(0, pos) + str.substring(pos + 1, str.length);
diff --git a/stories/NumericInput.stories.js b/stories/NumericInput.stories.js
index d9e47e36..9bab5575 100644
--- a/stories/NumericInput.stories.js
+++ b/stories/NumericInput.stories.js
@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import BigNumber from 'bignumber.js';
 
 // storybook
 import { storiesOf } from '@storybook/react';
@@ -18,149 +19,154 @@ import themeOverrides from './theme-overrides/customInput.scss';
 import { decorateWithSimpleTheme } from './helpers/theming';
 
 storiesOf('NumericInput', module)
-
   .addDecorator(decorateWithSimpleTheme)
 
   // ====== Stories ======
 
-  .add('plain',
-    withState({ value: null }, store => (
-      <NumericInput
-        onChange={value => store.set({ value })}
-        value={store.state.value}
-      />
-    ))
-  )
-  .add('value (9999.99)',
-    withState({ value: 9999.99 }, store => (
+  .add(
+    'plain',
+    withState({ value: null }, (store) => (
       <NumericInput
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
         value={store.state.value}
       />
     ))
   )
-  .add('minimumFractionDigits (6)',
-    withState({ value: 0 }, store => (
+  .add(
+    'value (9999.99)',
+    withState({ value: new BigNumber(9999.99) }, (store) => (
       <NumericInput
-        onChange={value => store.set({ value })}
-        numberLocaleOptions={{ minimumFractionDigits: 6 }}
+        onChange={(value) => store.set({ value })}
         value={store.state.value}
       />
     ))
   )
-  .add('maximumFractionDigits (6)',
-    withState({ value: 0 }, store => (
+  .add(
+    'decimalPlaces (6)',
+    withState({ value: new BigNumber(0) }, (store) => (
       <NumericInput
-        onChange={value => store.set({ value })}
-        numberLocaleOptions={{ maximumFractionDigits: 6 }}
+        onChange={(value) => store.set({ value })}
+        decimalPlaces={6}
         value={store.state.value}
       />
     ))
   )
-  .add('format: group (dot) fraction (comma)',
-    withState({ value: 0 }, store => (
+  .add(
+    'format: decimal (comma) group (dot)',
+    withState({ value: new BigNumber(0) }, (store) => (
       <NumericInput
-        onChange={value => store.set({ value })}
-        numberFormat={{
+        onChange={(value) => store.set({ value })}
+        bigNumberFormat={{
           decimalSeparator: ',',
           groupSeparator: '.',
         }}
+        decimalPlaces={2}
         value={store.state.value}
       />
     ))
   )
-  .add('format: group (space) fraction (dot)',
-    withState({ value: 0 }, store => (
+  .add(
+    'format: decimal (dot) group (space)',
+    withState({ value: new BigNumber(0) }, (store) => (
       <NumericInput
-        onChange={value => store.set({ value })}
-        numberFormat={{
+        onChange={(value) => store.set({ value })}
+        bigNumberFormat={{
           decimalSeparator: '.',
           groupSeparator: ' ',
         }}
+        decimalPlaces={2}
         value={store.state.value}
       />
     ))
   )
-  .add('autoFocus',
-    withState({ value: null }, store => (
+  .add(
+    'autoFocus',
+    withState({ value: null }, (store) => (
       <NumericInput
         autoFocus
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
         value={store.state.value}
       />
     ))
   )
-  .add('label',
-    withState({ value: null }, store => (
+  .add(
+    'label',
+    withState({ value: null }, (store) => (
       <NumericInput
         label="Amount"
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
         value={store.state.value}
       />
     ))
   )
-  .add('placeholder',
-    withState({ value: null }, store => (
+  .add(
+    'placeholder',
+    withState({ value: null }, (store) => (
       <NumericInput
         value={store.state.value}
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
         placeholder="18.000000"
       />
     ))
   )
-  .add('allowSigns = false',
-    withState({ value: null }, store => (
+  .add(
+    'allowSigns = false',
+    withState({ value: null }, (store) => (
       <NumericInput
         value={store.state.value}
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
         allowSigns={false}
       />
     ))
   )
-  .add('onFocus / onBlur',
-    withState({ value: null, focused: false, blurred: false }, store => (
+  .add(
+    'onFocus / onBlur',
+    withState({ value: null, focused: false, blurred: false }, (store) => (
       <NumericInput
         value={store.state.value}
         placeholder="onFocus / onBlur"
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
         onFocus={() => store.set({ focused: true, blurred: false })}
         onBlur={() => store.set({ blurred: true, focused: false })}
       />
     ))
   )
 
-  .add('with error',
-    withState({ value: null }, store => (
+  .add(
+    'with error',
+    withState({ value: null }, (store) => (
       <NumericInput
         label="Amount"
         error="Please enter a valid amount"
         value={store.state.value}
         placeholder="0.000000"
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   )
 
-  .add('theme overrides',
-    withState({ value: null }, store => (
+  .add(
+    'theme overrides',
+    withState({ value: null }, (store) => (
       <NumericInput
         label="Composed Theme"
         themeOverrides={themeOverrides}
         value={store.state.value}
         placeholder="0.000000"
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   )
 
-  .add('Custom Theme',
-    withState({ value: null }, store => (
+  .add(
+    'Custom Theme',
+    withState({ value: null }, (store) => (
       <NumericInput
         label="Amount"
         theme={CustomInputTheme}
         value={store.state.value}
         placeholder="0.000000"
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   );
diff --git a/yarn.lock b/yarn.lock
index 4ad41e1e..63629840 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4344,6 +4344,11 @@ big.js@^5.2.2:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
+bignumber.js@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.0.1.tgz#8d7ba124c882bfd8e43260c67475518d0689e4e5"
+  integrity sha512-IdZR9mh6ahOBv/hYGiXyVuyCetmGJhtYkqLBpTStdhEGjegpPlUawydyaF3pbIOFynJTpllEs+NP+CS9jKFLjA==
+
 binary-extensions@^1.0.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"

From 88fc6d2d0b38aeaebcb84ffc49cdda687ac14eba Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 25 Jan 2021 13:07:31 +0100
Subject: [PATCH 113/244] [DDW-543] Fixes multiple decimal separators bug

---
 source/components/NumericInput.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 8ad327ce..f6d9a0cb 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -153,7 +153,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     const { decimalSeparator, groupSeparator } = this.getBigNumberFormat();
     const changedCaretPosition = target.selectionStart;
     const valueToProcess = target.value;
-    const fallbackInputValue = this.state.fallbackInputValue || '';
+    const fallbackInputValue = this.state.fallbackInputValue;
     const isBackwardDelete = inputType === 'deleteContentBackward';
     const isForwardDelete = inputType === 'deleteContentForward';
     const isDeletion = isForwardDelete || isBackwardDelete;
@@ -209,9 +209,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
     const currentNumber = value;
     const currentValue =
-      currentNumber != null
-        ? this.bigNumberToFormattedString(currentNumber)
-        : fallbackInputValue;
+      fallbackInputValue ?? this.bigNumberToFormattedString(currentNumber);
 
     const currentNumberOfDecimalSeparators = this.getNumberOfDecimalSeparators(
       currentValue
@@ -261,6 +259,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       return {
         value: newNumber,
         caretPosition: newCaretPos,
+        fallbackInputValue: null,
       };
     }
 
@@ -363,21 +362,19 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     const { decimalSeparator, groupSeparator } = this.getBigNumberFormat();
     return new BigNumber(
       value
-        .replace(new RegExp(escapeRegExp(groupSeparator), 'g'), '')
-        .replace(new RegExp(escapeRegExp(decimalSeparator), 'g'), '.')
+        .replace(escapedGlobalRegExp(groupSeparator), '')
+        .replace(escapedGlobalRegExp(decimalSeparator), '.')
     );
   }
 
   getNumberOfGroupSeparators(value: string): number {
     const { groupSeparator } = this.getBigNumberFormat();
-    return (value.match(new RegExp(escapeRegExp(groupSeparator), 'g')) || [])
-      .length;
+    return (value.match(escapedGlobalRegExp(groupSeparator)) || []).length;
   }
 
   getNumberOfDecimalSeparators(value: string): number {
     const { decimalSeparator } = this.getBigNumberFormat();
-    return (value.match(new RegExp(escapeRegExp(decimalSeparator), 'g')) || [])
-      .length;
+    return (value.match(escapedGlobalRegExp(decimalSeparator)) || []).length;
   }
 
   isDifferentValue(first: ?BigNumber.Instance, second: ?BigNumber.Instance) {
@@ -425,3 +422,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 }
 
 export const NumericInput = withTheme(NumericInputBase);
+
+function escapedGlobalRegExp(regex) {
+  return new RegExp(escapeRegExp(regex), 'g');
+}

From b82d8035b3123f731f543367642f99784c86d8fc Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 25 Jan 2021 13:14:09 +0100
Subject: [PATCH 114/244] [DDW-543] Add descriptive labels to Numeric Input
 stories

---
 stories/NumericInput.stories.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/stories/NumericInput.stories.js b/stories/NumericInput.stories.js
index 9bab5575..8d09f087 100644
--- a/stories/NumericInput.stories.js
+++ b/stories/NumericInput.stories.js
@@ -62,6 +62,7 @@ storiesOf('NumericInput', module)
         }}
         decimalPlaces={2}
         value={store.state.value}
+        label="Numeric Input (2 decimal places, ',' as decimal separator, '.' as group separator)"
       />
     ))
   )
@@ -76,6 +77,7 @@ storiesOf('NumericInput', module)
         }}
         decimalPlaces={2}
         value={store.state.value}
+        label="Numeric Input (2 decimal places, '.' as decimal separator, space as group separator)"
       />
     ))
   )

From 3bcaa36b240266f78eab3e92d3964c027628ea23 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 25 Jan 2021 16:07:52 +0100
Subject: [PATCH 115/244] [DDW-543] Fix bug with BACKSPACE skipping group
 separators

---
 source/components/NumericInput.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index f6d9a0cb..602bc3df 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -292,7 +292,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       };
     }
 
-    // Case: Dot was deleted with minimum fraction digits constrain defined
+    // Case: Decimal separator was deleted while number of decimal places specified
     const hasDecimalPlaces = decimalPlaces != null;
     const wasDecimalSeparatorRemoved =
       hadDecimalSeparatorBefore && !newNumberOfDecimalSeparators;
@@ -305,7 +305,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     }
 
     // Case: Valid change has been made
-    const hasNumberChanged = this.isDifferentValue(currentNumber, newNumber);
+    const hasNumberChanged = !this.isSameValue(currentNumber, newNumber);
     const groupSeparatorsDiff =
       this.getNumberOfGroupSeparators(formattedNewNumber) -
       this.getNumberOfGroupSeparators(newValue);
@@ -377,7 +377,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     return (value.match(escapedGlobalRegExp(decimalSeparator)) || []).length;
   }
 
-  isDifferentValue(first: ?BigNumber.Instance, second: ?BigNumber.Instance) {
+  isSameValue(first: ?BigNumber.Instance, second: ?BigNumber.Instance) {
     return BigNumber.isBigNumber(first)
       ? first.isEqualTo(second)
       : first === second;

From 3b7f024ff3e2327abd9248117e70bffbf32e98b9 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 25 Jan 2021 18:17:33 +0100
Subject: [PATCH 116/244] [DDW-543] Fix tests and cleanup a bit

---
 __tests__/FormField.test.js                   |  50 +++--
 __tests__/NumericInput.behavior.test.js       |  56 +++---
 __tests__/NumericInput.test.js                |  31 ++--
 __tests__/TextArea.test.js                    |  26 +--
 .../__snapshots__/Autocomplete.test.js.snap   | 127 +++++++------
 .../__snapshots__/FormField.test.js.snap      |  79 ++++----
 __tests__/__snapshots__/Input.test.js.snap    |  76 ++++----
 .../__snapshots__/NumericInput.test.js.snap   | 119 ++++++------
 __tests__/__snapshots__/Select.test.js.snap   | 173 ++++++++++--------
 __tests__/__snapshots__/TextArea.test.js.snap |  91 ++++-----
 jest.setup.js                                 |   6 +
 source/components/FormField.js                |   1 +
 source/components/Input.js                    |   5 +-
 source/components/NumericInput.js             |  45 +----
 source/skins/simple/FormFieldSkin.js          |   7 +-
 source/utils/hooks.js                         |   6 +-
 stories/FormField.stories.js                  |  10 +
 stories/NumericInput.stories.js               |  10 +
 18 files changed, 467 insertions(+), 451 deletions(-)

diff --git a/__tests__/FormField.test.js b/__tests__/FormField.test.js
index 16abbbff..aed4ac5e 100644
--- a/__tests__/FormField.test.js
+++ b/__tests__/FormField.test.js
@@ -6,42 +6,34 @@ import { renderInSimpleTheme } from './helpers/theming';
 const renderFormField = () => <div className="render-prop" />;
 
 test('FormField renders correctly', () => {
-  expect(renderInSimpleTheme(
-    <FormField render={renderFormField} />
-  )).toMatchSnapshot();
+  expect(
+    renderInSimpleTheme(<FormField render={renderFormField} />)
+  ).toMatchSnapshot();
 });
 
 test('FormField renders with label', () => {
-  expect(renderInSimpleTheme(
-    <FormField
-      label="Add a Label"
-      render={renderFormField}
-    />
-  )).toMatchSnapshot();
-});
-
-test('FormField renders with an error', () => {
-  expect(renderInSimpleTheme(
-    <FormField
-      error="Add an Error"
-      render={renderFormField}
-    />
-  )).toMatchSnapshot();
+  expect(
+    renderInSimpleTheme(
+      <FormField label="Add a Label" render={renderFormField} />
+    )
+  ).toMatchSnapshot();
 });
 
 test('FormField is disabled', () => {
-  expect(renderInSimpleTheme(
-    <FormField
-      disabled
-      render={({ disabled }) => <span>{disabled.toString()}</span>}
-    />
-  )).toMatchSnapshot();
+  expect(
+    renderInSimpleTheme(
+      <FormField
+        disabled
+        render={({ disabled }) => <span>{disabled.toString()}</span>}
+      />
+    )
+  ).toMatchSnapshot();
 });
 
 test('FormField renders an input element', () => {
-  expect(renderInSimpleTheme(
-    <FormField
-      render={() => <input className="render-prop" />}
-    />
-  )).toMatchSnapshot();
+  expect(
+    renderInSimpleTheme(
+      <FormField render={() => <input className="render-prop" />} />
+    )
+  ).toMatchSnapshot();
 });
diff --git a/__tests__/NumericInput.behavior.test.js b/__tests__/NumericInput.behavior.test.js
index a606f973..8a10bf94 100644
--- a/__tests__/NumericInput.behavior.test.js
+++ b/__tests__/NumericInput.behavior.test.js
@@ -1,13 +1,15 @@
+import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import { NumericInput } from '../source/components/NumericInput';
 import { mountInSimpleTheme } from './helpers/theming';
 
 describe('NumericInput onChange simulations', () => {
-
   const mountNumericInputWithProps = (props) => {
     const onChangeMock = jest.fn();
-    const wrapper = mountInSimpleTheme(<NumericInput {...props} onChange={onChangeMock} />);
+    const wrapper = mountInSimpleTheme(
+      <NumericInput {...props} onChange={onChangeMock} />
+    );
     const input = wrapper.find('input');
     return {
       input,
@@ -20,7 +22,9 @@ describe('NumericInput onChange simulations', () => {
     test('valid input triggers onChange listener', () => {
       const { input, onChangeMock } = mountNumericInputWithProps();
       input.simulate('change', { nativeEvent: { target: { value: '19.00' } } });
-      expect(onChangeMock.mock.calls[0][0]).toBe(19.00);
+      const onChangeValue = onChangeMock.mock.calls[0][0];
+      expect(BigNumber.isBigNumber(onChangeValue)).toBe(true);
+      expect(onChangeValue.toNumber()).toBe(19);
     });
     test('invalid input does not trigger onChange listener', () => {
       const { input, onChangeMock } = mountNumericInputWithProps();
@@ -30,47 +34,37 @@ describe('NumericInput onChange simulations', () => {
   });
 
   describe('configurable number formats', () => {
-    test('handles commas as thousand separators by default', () => {
+    test('handles commas as group separators by default', () => {
       const { input, onChangeMock } = mountNumericInputWithProps();
-      input.simulate('change', { nativeEvent: { target: { value: '9,999,999.00' } } });
-      expect(onChangeMock.mock.calls[0][0]).toBe(9999999.00);
+      input.simulate('change', {
+        nativeEvent: { target: { value: '9,999,999.00' } },
+      });
+      const onChangeValue = onChangeMock.mock.calls[0][0];
+      expect(onChangeValue.toNumber()).toBe(9999999.0);
     });
     test('can be configured to handle dots as thousand separators', () => {
       const { input, onChangeMock } = mountNumericInputWithProps({
-        numberFormat: {
+        bigNumberFormat: {
           groupSeparator: '.',
           decimalSeparator: ',',
-        }
+        },
+      });
+      input.simulate('change', {
+        nativeEvent: { target: { value: '9.999.999,00' } },
       });
-      input.simulate('change', { nativeEvent: { target: { value: '9.999.999,00' } } });
-      expect(onChangeMock.mock.calls[0][0]).toBe(9999999.00);
+      expect(onChangeMock.mock.calls[0][0].toNumber()).toBe(9999999);
     });
     test('can be configured to handle spaces as thousand separators', () => {
       const { input, onChangeMock } = mountNumericInputWithProps({
-        numberFormat: {
+        bigNumberFormat: {
           groupSeparator: ' ',
           decimalSeparator: '.',
-        }
+        },
       });
-      input.simulate('change', { nativeEvent: { target: { value: '9 999 999.00' } } });
-      expect(onChangeMock.mock.calls[0][0]).toBe(9999999.00);
-    });
-  });
-
-  test('enforces given minimumFractionDigits', () => {
-    const { input } = mountNumericInputWithProps({
-      numberLocaleOptions: { minimumFractionDigits: 6 },
-      value: 0,
-    });
-    expect(input.getDOMNode().value).toBe('0.000000');
-  });
-
-  test('enforces given maximumFractionDigits', () => {
-    const { input } = mountNumericInputWithProps({
-      numberLocaleOptions: { maximumFractionDigits: 2 },
-      value: 0.123,
+      input.simulate('change', {
+        nativeEvent: { target: { value: '9 999 999.00' } },
+      });
+      expect(onChangeMock.mock.calls[0][0].toNumber()).toBe(9999999);
     });
-    expect(input.getDOMNode().value).toBe('0.12');
   });
-
 });
diff --git a/__tests__/NumericInput.test.js b/__tests__/NumericInput.test.js
index ef835c0c..b05f2c06 100644
--- a/__tests__/NumericInput.test.js
+++ b/__tests__/NumericInput.test.js
@@ -1,40 +1,35 @@
+import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import { NumericInput } from '../source/components/NumericInput';
 import { renderInSimpleTheme } from './helpers/theming';
 
 test('NumericInput renders correctly', () => {
-  expect(renderInSimpleTheme(
-    <NumericInput />
-  )).toMatchSnapshot();
+  expect(renderInSimpleTheme(<NumericInput />)).toMatchSnapshot();
 });
 
 test('NumericInput renders with placeholder', () => {
-  expect(renderInSimpleTheme(
-    <NumericInput placeholder="0.0000" />
-  )).toMatchSnapshot();
+  expect(
+    renderInSimpleTheme(<NumericInput placeholder="0.0000" />)
+  ).toMatchSnapshot();
 });
 
 test('NumericInput is disabled', () => {
-  expect(renderInSimpleTheme(
-    <NumericInput disabled />
-  )).toMatchSnapshot();
+  expect(renderInSimpleTheme(<NumericInput disabled />)).toMatchSnapshot();
 });
 
 test('NumericInput is readOnly', () => {
-  expect(renderInSimpleTheme(
-    <NumericInput readOnly />
-  )).toMatchSnapshot();
+  expect(renderInSimpleTheme(<NumericInput readOnly />)).toMatchSnapshot();
 });
 
 test('NumericInput renders with an error', () => {
-  expect(renderInSimpleTheme(
-    <NumericInput error="Invalid Amount" />
-  )).toMatchSnapshot();
+  expect(
+    renderInSimpleTheme(<NumericInput error="Invalid Amount" />)
+  ).toMatchSnapshot();
 });
 
 test('NumericInput renders with a value', () => {
-  expect(renderInSimpleTheme(
-    <NumericInput value="555.333" />
-  )).toMatchSnapshot();
+  expect(
+    renderInSimpleTheme(<NumericInput value={new BigNumber(555.333)} />)
+  ).toMatchSnapshot();
 });
diff --git a/__tests__/TextArea.test.js b/__tests__/TextArea.test.js
index d2dee8d5..3e1760da 100644
--- a/__tests__/TextArea.test.js
+++ b/__tests__/TextArea.test.js
@@ -4,31 +4,21 @@ import { TextArea } from '../source/components/TextArea';
 import { renderInSimpleTheme } from './helpers/theming';
 
 test('TextArea renders correctly', () => {
-  expect(renderInSimpleTheme(
-    <TextArea />
-  )).toMatchSnapshot();
+  expect(renderInSimpleTheme(<TextArea />)).toMatchSnapshot();
 });
 
 test('TextArea renders with placeholder', () => {
-  expect(renderInSimpleTheme(
-    <TextArea placeholder="0.0000" />
-  )).toMatchSnapshot();
-});
-
-test('TextArea renders with an error', () => {
-  expect(renderInSimpleTheme(
-    <TextArea error="Please enter valid input" />
-  )).toMatchSnapshot();
+  expect(
+    renderInSimpleTheme(<TextArea placeholder="0.0000" />)
+  ).toMatchSnapshot();
 });
 
 test('TextArea renders with a value', () => {
-  expect(renderInSimpleTheme(
-    <TextArea value="this one has a value" />
-  )).toMatchSnapshot();
+  expect(
+    renderInSimpleTheme(<TextArea value="this one has a value" />)
+  ).toMatchSnapshot();
 });
 
 test('TextArea renders with 5 rows', () => {
-  expect(renderInSimpleTheme(
-    <TextArea rows={5} />
-  )).toMatchSnapshot();
+  expect(renderInSimpleTheme(<TextArea rows={5} />)).toMatchSnapshot();
 });
diff --git a/__tests__/__snapshots__/Autocomplete.test.js.snap b/__tests__/__snapshots__/Autocomplete.test.js.snap
index deedf443..98e22ab6 100644
--- a/__tests__/__snapshots__/Autocomplete.test.js.snap
+++ b/__tests__/__snapshots__/Autocomplete.test.js.snap
@@ -9,21 +9,23 @@ exports[`Autocomplete renders correctly 1`] = `
   <div
     class="root"
   >
-    <div
-      class="inputWrapper"
-    >
+    <span>
       <div
-        class="autocompleteContent"
+        class="inputWrapper"
       >
         <div
-          class="selectedWords"
+          class="autocompleteContent"
         >
-          <input
-            value=""
-          />
+          <div
+            class="selectedWords"
+          >
+            <input
+              value=""
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </span>
   </div>
   <div
     class="options firstOptionHighlighted root isFloating isHidden"
@@ -125,22 +127,24 @@ exports[`Autocomplete renders with a placeholder 1`] = `
   <div
     class="root"
   >
-    <div
-      class="inputWrapper"
-    >
+    <span>
       <div
-        class="autocompleteContent"
+        class="inputWrapper"
       >
         <div
-          class="selectedWords"
+          class="autocompleteContent"
         >
-          <input
-            placeholder="Enter recovery phrase"
-            value=""
-          />
+          <div
+            class="selectedWords"
+          >
+            <input
+              placeholder="Enter recovery phrase"
+              value=""
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </span>
   </div>
   <div
     class="options firstOptionHighlighted root isFloating isHidden"
@@ -242,26 +246,23 @@ exports[`Autocomplete renders with an error 1`] = `
   <div
     class="root errored"
   >
-    <div
-      class="error"
-    >
-      Your mnemonic phrase is incorrect
-    </div>
-    <div
-      class="inputWrapper"
-    >
+    <span>
       <div
-        class="autocompleteContent errored"
+        class="inputWrapper"
       >
         <div
-          class="selectedWords"
+          class="autocompleteContent errored"
         >
-          <input
-            value=""
-          />
+          <div
+            class="selectedWords"
+          >
+            <input
+              value=""
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </span>
   </div>
   <div
     class="options firstOptionHighlighted root isFloating isHidden"
@@ -370,21 +371,23 @@ exports[`Autocomplete renders with label 1`] = `
     >
       Enter your recovery phrase below
     </label>
-    <div
-      class="inputWrapper"
-    >
+    <span>
       <div
-        class="autocompleteContent"
+        class="inputWrapper"
       >
         <div
-          class="selectedWords"
+          class="autocompleteContent"
         >
-          <input
-            value=""
-          />
+          <div
+            class="selectedWords"
+          >
+            <input
+              value=""
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </span>
   </div>
   <div
     class="options firstOptionHighlighted root isFloating isHidden"
@@ -486,21 +489,23 @@ exports[`Autocomplete uses render prop - renderOptions 1`] = `
   <div
     class="root"
   >
-    <div
-      class="inputWrapper"
-    >
+    <span>
       <div
-        class="autocompleteContent"
+        class="inputWrapper"
       >
         <div
-          class="selectedWords"
+          class="autocompleteContent"
         >
-          <input
-            value=""
-          />
+          <div
+            class="selectedWords"
+          >
+            <input
+              value=""
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </span>
   </div>
   <div
     class="options firstOptionHighlighted root isFloating isHidden"
@@ -594,21 +599,23 @@ exports[`Autocomplete uses render prop - renderSelections 1`] = `
   <div
     class="root"
   >
-    <div
-      class="inputWrapper"
-    >
+    <span>
       <div
-        class="autocompleteContent"
+        class="inputWrapper"
       >
         <div
-          class="selectedWords"
+          class="autocompleteContent"
         >
-          <input
-            value=""
-          />
+          <div
+            class="selectedWords"
+          >
+            <input
+              value=""
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </span>
   </div>
   <div
     class="options firstOptionHighlighted root isFloating isHidden"
diff --git a/__tests__/__snapshots__/FormField.test.js.snap b/__tests__/__snapshots__/FormField.test.js.snap
index 6a214063..cb60ada7 100644
--- a/__tests__/__snapshots__/FormField.test.js.snap
+++ b/__tests__/__snapshots__/FormField.test.js.snap
@@ -4,13 +4,15 @@ exports[`FormField is disabled 1`] = `
 <div
   class="root disabled"
 >
-  <div
-    class="inputWrapper"
-  >
-    <span>
-      true
-    </span>
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <span>
+        true
+      </span>
+    </div>
+  </span>
 </div>
 `;
 
@@ -18,13 +20,15 @@ exports[`FormField renders an input element 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <input
-      class="render-prop"
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <input
+        class="render-prop"
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -32,13 +36,15 @@ exports[`FormField renders correctly 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
+  <span>
     <div
-      class="render-prop"
-    />
-  </div>
+      class="inputWrapper"
+    >
+      <div
+        class="render-prop"
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -46,18 +52,15 @@ exports[`FormField renders with an error 1`] = `
 <div
   class="root errored"
 >
-  <div
-    class="error"
-  >
-    Add an Error
-  </div>
-  <div
-    class="inputWrapper"
-  >
+  <span>
     <div
-      class="render-prop"
-    />
-  </div>
+      class="inputWrapper"
+    >
+      <div
+        class="render-prop"
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -72,12 +75,14 @@ exports[`FormField renders with label 1`] = `
   >
     Add a Label
   </label>
-  <div
-    class="inputWrapper"
-  >
+  <span>
     <div
-      class="render-prop"
-    />
-  </div>
+      class="inputWrapper"
+    >
+      <div
+        class="render-prop"
+      />
+    </div>
+  </span>
 </div>
 `;
diff --git a/__tests__/__snapshots__/Input.test.js.snap b/__tests__/__snapshots__/Input.test.js.snap
index 1bc4c7ff..433a02bd 100644
--- a/__tests__/__snapshots__/Input.test.js.snap
+++ b/__tests__/__snapshots__/Input.test.js.snap
@@ -4,15 +4,17 @@ exports[`Input is readOnly 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <input
-      class="input"
-      readonly=""
-      value=""
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <input
+        class="input"
+        readonly=""
+        value=""
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -20,14 +22,16 @@ exports[`Input renders correctly 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <input
-      class="input"
-      value=""
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <input
+        class="input"
+        value=""
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -35,14 +39,16 @@ exports[`Input renders with a value 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <input
-      class="input"
-      value="there is value"
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <input
+        class="input"
+        value="there is value"
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -50,14 +56,16 @@ exports[`Input renders with placeholder 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <input
-      class="input"
-      placeholder="0.0000"
-      value=""
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <input
+        class="input"
+        placeholder="0.0000"
+        value=""
+      />
+    </div>
+  </span>
 </div>
 `;
diff --git a/__tests__/__snapshots__/NumericInput.test.js.snap b/__tests__/__snapshots__/NumericInput.test.js.snap
index b4770640..78f25708 100644
--- a/__tests__/__snapshots__/NumericInput.test.js.snap
+++ b/__tests__/__snapshots__/NumericInput.test.js.snap
@@ -4,15 +4,17 @@ exports[`NumericInput is disabled 1`] = `
 <div
   class="root disabled"
 >
-  <div
-    class="inputWrapper"
-  >
-    <input
-      class="input disabled"
-      disabled=""
-      value=""
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <input
+        class="input disabled"
+        disabled=""
+        value=""
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -20,15 +22,17 @@ exports[`NumericInput is readOnly 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <input
-      class="input"
-      readonly=""
-      value=""
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <input
+        class="input"
+        readonly=""
+        value=""
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -36,14 +40,16 @@ exports[`NumericInput renders correctly 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <input
-      class="input"
-      value=""
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <input
+        class="input"
+        value=""
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -51,14 +57,16 @@ exports[`NumericInput renders with a value 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <input
-      class="input"
-      value="555.333"
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <input
+        class="input"
+        value="555.333"
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -66,19 +74,16 @@ exports[`NumericInput renders with an error 1`] = `
 <div
   class="root errored"
 >
-  <div
-    class="error"
-  >
-    Invalid Amount
-  </div>
-  <div
-    class="inputWrapper"
-  >
-    <input
-      class="input errored"
-      value=""
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <input
+        class="input errored"
+        value=""
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -86,14 +91,16 @@ exports[`NumericInput renders with placeholder 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <input
-      class="input"
-      placeholder="0.0000"
-      value=""
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <input
+        class="input"
+        placeholder="0.0000"
+        value=""
+      />
+    </div>
+  </span>
 </div>
 `;
diff --git a/__tests__/__snapshots__/Select.test.js.snap b/__tests__/__snapshots__/Select.test.js.snap
index 69dd2f28..00a5acde 100644
--- a/__tests__/__snapshots__/Select.test.js.snap
+++ b/__tests__/__snapshots__/Select.test.js.snap
@@ -10,15 +10,17 @@ exports[`Select isOpen={true} 1`] = `
     <div
       class="root"
     >
-      <div
-        class="inputWrapper"
-      >
-        <input
-          class="input"
-          readonly=""
-          value=""
-        />
-      </div>
+      <span>
+        <div
+          class="inputWrapper"
+        >
+          <input
+            class="input"
+            readonly=""
+            value=""
+          />
+        </div>
+      </span>
     </div>
   </div>
   <div
@@ -149,15 +151,17 @@ exports[`Select isOpeningUpward={true} 1`] = `
     <div
       class="root"
     >
-      <div
-        class="inputWrapper"
-      >
-        <input
-          class="input"
-          readonly=""
-          value=""
-        />
-      </div>
+      <span>
+        <div
+          class="inputWrapper"
+        >
+          <input
+            class="input"
+            readonly=""
+            value=""
+          />
+        </div>
+      </span>
     </div>
   </div>
   <div
@@ -288,15 +292,17 @@ exports[`Select renders correctly 1`] = `
     <div
       class="root"
     >
-      <div
-        class="inputWrapper"
-      >
-        <input
-          class="input"
-          readonly=""
-          value=""
-        />
-      </div>
+      <span>
+        <div
+          class="inputWrapper"
+        >
+          <input
+            class="input"
+            readonly=""
+            value=""
+          />
+        </div>
+      </span>
     </div>
   </div>
   <div
@@ -427,20 +433,17 @@ exports[`Select renders with an error 1`] = `
     <div
       class="root errored"
     >
-      <div
-        class="error"
-      >
-        Please select a different option
-      </div>
-      <div
-        class="inputWrapper"
-      >
-        <input
-          class="input errored"
-          readonly=""
-          value=""
-        />
-      </div>
+      <span>
+        <div
+          class="inputWrapper"
+        >
+          <input
+            class="input errored"
+            readonly=""
+            value=""
+          />
+        </div>
+      </span>
     </div>
   </div>
   <div
@@ -571,15 +574,17 @@ exports[`Select renders with disabled options 1`] = `
     <div
       class="root"
     >
-      <div
-        class="inputWrapper"
-      >
-        <input
-          class="input"
-          readonly=""
-          value=""
-        />
-      </div>
+      <span>
+        <div
+          class="inputWrapper"
+        >
+          <input
+            class="input"
+            readonly=""
+            value=""
+          />
+        </div>
+      </span>
     </div>
   </div>
   <div
@@ -699,16 +704,18 @@ exports[`Select renders with placeholder 1`] = `
     <div
       class="root"
     >
-      <div
-        class="inputWrapper"
-      >
-        <input
-          class="input"
-          placeholder="Select your country …"
-          readonly=""
-          value=""
-        />
-      </div>
+      <span>
+        <div
+          class="inputWrapper"
+        >
+          <input
+            class="input"
+            placeholder="Select your country …"
+            readonly=""
+            value=""
+          />
+        </div>
+      </span>
     </div>
   </div>
   <div
@@ -839,15 +846,17 @@ exports[`Select uses render prop - optionRenderer 1`] = `
     <div
       class="root"
     >
-      <div
-        class="inputWrapper"
-      >
-        <input
-          class="input"
-          readonly=""
-          value=""
-        />
-      </div>
+      <span>
+        <div
+          class="inputWrapper"
+        >
+          <input
+            class="input"
+            readonly=""
+            value=""
+          />
+        </div>
+      </span>
     </div>
   </div>
   <div
@@ -993,22 +1002,24 @@ exports[`Select uses render prop - valueRenderer 1`] = `
     <div
       class="root"
     >
-      <div
-        class="inputWrapper"
-      >
+      <span>
         <div
-          class="customValueWrapper"
+          class="inputWrapper"
         >
-          <input
-            class="input"
-            readonly=""
-            value=""
-          />
           <div
-            class="customValueBlock"
-          />
+            class="customValueWrapper"
+          >
+            <input
+              class="input"
+              readonly=""
+              value=""
+            />
+            <div
+              class="customValueBlock"
+            />
+          </div>
         </div>
-      </div>
+      </span>
     </div>
   </div>
   <div
diff --git a/__tests__/__snapshots__/TextArea.test.js.snap b/__tests__/__snapshots__/TextArea.test.js.snap
index 15ef58ed..4fa3debf 100644
--- a/__tests__/__snapshots__/TextArea.test.js.snap
+++ b/__tests__/__snapshots__/TextArea.test.js.snap
@@ -4,13 +4,15 @@ exports[`TextArea renders correctly 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <textarea
-      class="textarea"
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <textarea
+        class="textarea"
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -18,14 +20,16 @@ exports[`TextArea renders with 5 rows 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <textarea
-      class="textarea"
-      rows="5"
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <textarea
+        class="textarea"
+        rows="5"
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -33,15 +37,17 @@ exports[`TextArea renders with a value 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <textarea
-      class="textarea"
+  <span>
+    <div
+      class="inputWrapper"
     >
-      this one has a value
-    </textarea>
-  </div>
+      <textarea
+        class="textarea"
+      >
+        this one has a value
+      </textarea>
+    </div>
+  </span>
 </div>
 `;
 
@@ -49,18 +55,15 @@ exports[`TextArea renders with an error 1`] = `
 <div
   class="root errored"
 >
-  <div
-    class="error"
-  >
-    Please enter valid input
-  </div>
-  <div
-    class="inputWrapper"
-  >
-    <textarea
-      class="textarea errored"
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <textarea
+        class="textarea errored"
+      />
+    </div>
+  </span>
 </div>
 `;
 
@@ -68,13 +71,15 @@ exports[`TextArea renders with placeholder 1`] = `
 <div
   class="root"
 >
-  <div
-    class="inputWrapper"
-  >
-    <textarea
-      class="textarea"
-      placeholder="0.0000"
-    />
-  </div>
+  <span>
+    <div
+      class="inputWrapper"
+    >
+      <textarea
+        class="textarea"
+        placeholder="0.0000"
+      />
+    </div>
+  </span>
 </div>
 `;
diff --git a/jest.setup.js b/jest.setup.js
index f3435b66..25951324 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -2,4 +2,10 @@ import 'raf/polyfill';
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
+// Suppress react warning about using useLayoutEffect hook on server
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useLayoutEffect: jest.requireActual('react').useEffect,
+}));
+
 configure({ adapter: new Adapter() });
diff --git a/source/components/FormField.js b/source/components/FormField.js
index f5ae09c6..15b139e0 100644
--- a/source/components/FormField.js
+++ b/source/components/FormField.js
@@ -16,6 +16,7 @@ export type FormFieldProps = {
   disabled?: boolean,
   error?: string | Element<any>,
   isErrorHidden?: boolean,
+  isErrorShown?: boolean,
   inputRef?: ElementRef<*>,
   label?: string | Element<any>,
   onChange: Function,
diff --git a/source/components/Input.js b/source/components/Input.js
index 3cc8b9e2..fb9183ca 100644
--- a/source/components/Input.js
+++ b/source/components/Input.js
@@ -89,9 +89,8 @@ class InputBase extends Component<InputProps, State> {
   }
 
   onChange = (event: SyntheticInputEvent<Element<'input'>>) => {
-    const { onChange, disabled } = this.props;
-    if (disabled) return;
-
+    const { onChange, disabled, readOnly } = this.props;
+    if (disabled || readOnly) return;
     if (onChange) onChange(this._processValue(event.target.value), event);
   };
 
diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 602bc3df..8b1bbdb0 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -4,12 +4,7 @@ import React, { Component } from 'react';
 import BigNumber from 'bignumber.js';
 
 // $FlowFixMe
-import type {
-  ComponentType,
-  SyntheticInputEvent,
-  Element,
-  ElementRef,
-} from 'react';
+import type { SyntheticInputEvent, Element, ElementRef } from 'react';
 
 // external libraries
 import createRef from 'create-react-ref/lib/createRef';
@@ -20,30 +15,16 @@ import { composeTheme, addThemeId, didThemePropsChange } from '../utils/themes';
 
 // import constants
 import { IDENTIFIERS } from '.';
-import type { ThemeContextProp } from './HOC/withTheme';
 import { removeCharAtPosition } from '../utils/strings';
 import type { InputEvent } from '../utils/types';
+import { Input } from './Input';
+import type { InputProps } from './Input';
 
-export type NumericInputProps = {
+export type NumericInputProps = InputProps & {
   allowSigns?: boolean,
-  autoFocus?: boolean,
   bigNumberFormat?: BigNumber.Format,
   decimalPlaces?: number,
   roundingMode?: BigNumber.RoundingMode,
-  className?: string,
-  context: ThemeContextProp,
-  disabled?: boolean,
-  error?: string,
-  label?: string | Element<any>,
-  onBlur?: Function,
-  onChange?: Function,
-  onFocus?: Function,
-  placeholder?: string,
-  readOnly?: boolean,
-  skin?: ComponentType<any>,
-  theme: ?Object,
-  themeId: string,
-  themeOverrides: Object,
   value: ?BigNumber.Instance,
 };
 
@@ -116,12 +97,8 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     }
   }
 
-  onChange = (event: SyntheticInputEvent<Element<'input'>>) => {
-    event.preventDefault();
-    const { value, onChange, disabled } = this.props;
-    if (disabled) {
-      return;
-    }
+  onChange = (newValue, event: SyntheticInputEvent<Element<'input'>>) => {
+    const { value, onChange } = this.props;
     const result = this.processValueChange(event.nativeEvent);
     if (result) {
       this._hasInputBeenChanged = true;
@@ -338,10 +315,11 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     inputElement.current.focus();
   };
 
-  onBlur = () => {
+  onBlur = (event) => {
     this.setState({
       fallbackInputValue: null,
     });
+    this.props.onBlur?.(event);
   };
 
   getBigNumberFormat(): BigNumber.Config {
@@ -387,8 +365,6 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     // destructuring props ensures only the "...rest" get passed down
     const {
       context,
-      error,
-      numberLocaleOptions,
       onChange,
       skin,
       theme,
@@ -401,15 +377,12 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       throw new Error('Prop "value" must be of type BigNumber or null.');
     }
 
-    const InputSkin = skin || context.skins[IDENTIFIERS.INPUT];
-
     const inputValue = this.state.fallbackInputValue
       ? this.state.fallbackInputValue
       : this.bigNumberToFormattedString(value);
 
     return (
-      <InputSkin
-        error={error}
+      <Input
         inputRef={this.inputElement}
         onChange={this.onChange}
         theme={this.state.composedTheme}
diff --git a/source/skins/simple/FormFieldSkin.js b/source/skins/simple/FormFieldSkin.js
index 2643447c..c9e53420 100644
--- a/source/skins/simple/FormFieldSkin.js
+++ b/source/skins/simple/FormFieldSkin.js
@@ -35,7 +35,10 @@ export function FormFieldSkin(props: Props) {
       )}
       <PopOver
         isShowingOnHover={hasError && !props.isErrorHidden}
-        isVisible={hasError && isInputFocused && !props.isErrorHidden}
+        isVisible={
+          props.isErrorShown ||
+          (hasError && isInputFocused && !props.isErrorHidden)
+        }
         content={props.error}
         themeVariables={{
           '--rp-pop-over-bg-color': `var(${SimpleFormFieldVariables.errorColor}`,
@@ -45,7 +48,7 @@ export function FormFieldSkin(props: Props) {
         duration={[300, 0]}
       >
         <div className={props.theme[props.themeId].inputWrapper}>
-          {props.render()}
+          {props.render(props)}
         </div>
       </PopOver>
     </div>
diff --git a/source/utils/hooks.js b/source/utils/hooks.js
index df74ce18..753a68ef 100644
--- a/source/utils/hooks.js
+++ b/source/utils/hooks.js
@@ -25,10 +25,10 @@ export function isRefFocused(ref: Ref<*>) {
   const [isFocused, setIsFocused] = useState(false);
 
   useEffect(() => {
-    const element = ref.current;
-    if (!element || !element.addEventListener) {
+    if (!ref || ref.current || !ref.current.addEventListener) {
       return;
     }
+    const element = ref.current;
     const focusListener = () => setIsFocused(true);
     const blurListener = () => setIsFocused(false);
     element.addEventListener('focus', focusListener);
@@ -37,7 +37,7 @@ export function isRefFocused(ref: Ref<*>) {
       element.removeEventListener('focus', focusListener);
       element.removeEventListener('blur', blurListener);
     };
-  }, [ref.current]);
+  }, [ref]);
 
   return isFocused;
 }
diff --git a/stories/FormField.stories.js b/stories/FormField.stories.js
index 5fddcb1a..33fb919b 100644
--- a/stories/FormField.stories.js
+++ b/stories/FormField.stories.js
@@ -4,6 +4,7 @@ import React from 'react';
 
 // storybook
 import { storiesOf } from '@storybook/react';
+import { FormField } from '../source/components/FormField';
 import { Input } from '../source/components/Input';
 
 // components
@@ -19,6 +20,15 @@ storiesOf('FormField', module)
 
   // ====== Stories ======
 
+  .add('error', () => (
+    <div style={{ width: '100px', border: '1px solid black', padding: '10px' }}>
+      <FormField
+        error="An error is shown"
+        render={() => <span>simple form field test</span>}
+        isErrorShown
+      />
+    </div>
+  ))
   .add(
     'input error',
     withState({ value: '' }, (store) => (
diff --git a/stories/NumericInput.stories.js b/stories/NumericInput.stories.js
index 8d09f087..9023ae95 100644
--- a/stories/NumericInput.stories.js
+++ b/stories/NumericInput.stories.js
@@ -111,6 +111,16 @@ storiesOf('NumericInput', module)
       />
     ))
   )
+  .add(
+    'readOnly',
+    withState({ value: new BigNumber(2) }, (store) => (
+      <NumericInput
+        value={store.state.value}
+        onChange={(value) => store.set({ value })}
+        readOnly
+      />
+    ))
+  )
   .add(
     'allowSigns = false',
     withState({ value: null }, (store) => (

From 0738bbe8c9a19cc3e72e266c50c6684571fde1e6 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 25 Jan 2021 18:27:25 +0100
Subject: [PATCH 117/244] [DDW-543] Update README and CHANGELOG

---
 CHANGELOG.md |  2 +-
 README.md    | 70 +++++++++++++++++++++++++---------------------------
 2 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c476acb2..e5f61717 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,7 @@ vNext
 
 ### Features
 
-- Imporve `NumericInput` component to support big numbers ([PR 152](https://github.com/input-output-hk/react-polymorph/pull/152))
+- Improve `NumericInput` component to support big numbers ([PR 152](https://github.com/input-output-hk/react-polymorph/pull/152))
 - Improve `FormField` UX by using pop overs to show errors ([PR 151](https://github.com/input-output-hk/react-polymorph/pull/151)
 
 0.9.6
diff --git a/README.md b/README.md
index e9b793ef..7223cfec 100644
--- a/README.md
+++ b/README.md
@@ -166,51 +166,39 @@ import { NumericInput } from "react-polymorph/lib/components";
 import { InputSkin } from "react-polymorph/lib/skins/simple";
 
 const MyNumericInput = () => (
-  <NumericInput // notice the different logic component!
-    skin={InputSkin} // but the same skin!
+  <NumericInput
     label="Amount"
     placeholder="0.000000"
-    numberLocaleOptions={{ maximumFractionDigits: 6 }}
+    decimalPlaces={6}
+    bigNumberFormat={{ decimalSeparator: '.', groupSeparator: ',' }}
   />
 );
 ```
 
-
-_Side Note: this shows how you can make/use specialized versions of basic components by composition 
-(reusing the `InputSkin` with a specialized logic component) - a core idea of react-polymorph!_
-
-##### Expected Behavior & Limitations:
+##### Expected Behavior:
 
 Since there is no web standard on how to build numeric input components, here is the specification we
 came up with that serves our purposes in the best way: 
 
-- Only numeric inputs that are representable by Javascript numbers are valid. This is guarded by `Number.MIN_SAFE_INTEGER` 
-  (-9007199254740991) and `Number.MAX_SAFE_INTEGER` (9007199254740991) but since also fractions need to 
-  represented, the calculation for the maximum integer part goes like this:
-  `Number.MAX_SAFE_INTEGER / 10 ** (maximumFractionDigits + 1)` (which basically means that one integer digit is lost for
-  each supported fraction digit). For `maximumFractionDigits == 3` this results in 
-  `9007199254740991 / 10 ** 4 == 900719925474.099` being the biggest number that can be entered.
-- Only numeric digits `[0-9]` and dots `.` can be entered.
+- Only numeric digits `[0-9]` and decimal separators (configurable via `bigNumberFormat` prop) can be entered.
 - When invalid characters are pasted as input, nothing happens
-- When a second dot is entered it replaces the existing one and updates the fraction part accordingly
-- Commas cannot be deleted but the cursor should jump over them when DEL or BACKSPACE keys are used
-- The fraction dot can only be deleted if `minimumFractionDigits` is not defined or
-  if the resulting number does not exceed the numeric limits!
-- It's possible to replace the whole number or parts of it (even the dot) by inserting another number.
-- If the fraction dot is deleted but the resulting number is too big the cursor jumps over the dot without deletion
-- If you insert a digit but the resulting number would exceed the numeric limit, nothing happens
+- When a second decimal separators is entered it replaces the existing one and updates the fraction part accordingly
+- Group separators cannot be deleted but the cursor should jump over them when DEL or BACKSPACE keys are used
+- It's possible to replace the whole number or parts of it (even the decimal separator) by inserting another number.
 
 ##### Props:
 
+The `NumericInput` is based on the `Input` component and extends it's functionality:
+
 ```js
 type NumericInputProps = {
+  // Input props:
   autoFocus?: boolean,
   className?: string,
   context: ThemeContextProp,
   disabled?: boolean,
   error?: string,
   label?: string | Element<any>,
-  numberLocaleOptions?: Number$LocaleOptions,
   onBlur?: Function,
   onChange?: Function,
   onFocus?: Function,
@@ -220,26 +208,36 @@ type NumericInputProps = {
   theme: ?Object,
   themeId: string,
   themeOverrides: Object,
-  useDynamicDigitCalculation: boolean,
-  value: ?number,
+  // Numeric input specific props:
+  allowSigns?: boolean,
+  bigNumberFormat?: BigNumber.Format,
+  decimalPlaces?: number,
+  roundingMode?: BigNumber.RoundingMode,
+  value: ?BigNumber.Instance,
 };
 ```
 
-###### `numberLocaleOptions`
+###### `value`
+
+Must be an instance of [BigNumber](https://mikemcl.github.io/bignumber.js)
+`onChange` also returns an instance of `BigNumber` after any user changes.
+
+###### `allowSigns`
+
+Is `true` by default, if `false` the user cannot enter negative numbers.
+
+###### `decimalPlaces`
+
+No restriction by default (any number of decimal places allowed).
+Can be set to fix the decimal places to a specific amount.
 
-`Number.toLocaleString()` is used internally to localize the given number value. This method takes options
-explained in greater detail in the 
-[MDN web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) 
+###### `bigNumberFormat`
 
-The most important parts are `maximumFractionDigits` (defaults to 3 as per web standard) and `minimumFractionDigits`
-which dictate the handling of fraction digits. 
+You can configure the number format by passing in any valid [bignumber.js FORMAT option](https://mikemcl.github.io/bignumber.js/#format)
 
-###### `useDynamicDigitCalculation`
+###### `roundingMode`
 
-This is an optional mode that "sacrifices" simple, clear UX in favor of being able to enter bigger numbers.
-Basically it works the same way but it dynamically calculates how large the integer part of the number can
-be based on the actual fraction digits entered. The less fraction digits, the more integer digits are possible
-and vice versa.
+You can configure the rounding mode by passing in any valid [bignumber.js ROUNDING_MODE option](https://mikemcl.github.io/bignumber.js/#rounding-mode)
 
 ---
 

From 26684e0fabc7a982f8215e8d7358e1e634d85322 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 25 Jan 2021 18:30:10 +0100
Subject: [PATCH 118/244] 0.9.7-rc.12

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d2f58fe0..9fff0f43 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.11",
+  "version": "0.9.7-rc.12",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 83c89376bd7b3016e53c8e6cd3a2c024c186d4d8 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 27 Jan 2021 23:54:16 +0100
Subject: [PATCH 119/244] [DDW-543] Improve handling of empty values

---
 source/components/NumericInput.js | 19 +++++++------------
 stories/NumericInput.stories.js   | 12 +++++++++++-
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 8b1bbdb0..3c661a78 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -326,14 +326,13 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     return this.props.bigNumberFormat ?? BigNumber.config().FORMAT;
   }
 
-  bigNumberToFormattedString(number: ?BigNumber.Instance) {
+  bigNumberToFormattedString(number: BigNumber.Instance) {
     const { bigNumberFormat, decimalPlaces, roundingMode } = this.props;
-    return number === null
-      ? ''
-      : number.toFormat(decimalPlaces, roundingMode, {
-          ...BigNumber.config().FORMAT, // defaults
-          ...bigNumberFormat, // custom overrides
-        });
+    const result = number.toFormat(decimalPlaces, roundingMode, {
+      ...BigNumber.config().FORMAT, // defaults
+      ...bigNumberFormat, // custom overrides
+    });
+    return result === 'NaN' ? null : result;
   }
 
   formattedValueToBigNumber(value: string) {
@@ -373,13 +372,9 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       ...rest
     } = this.props;
 
-    if (value != null && !BigNumber.isBigNumber(value)) {
-      throw new Error('Prop "value" must be of type BigNumber or null.');
-    }
-
     const inputValue = this.state.fallbackInputValue
       ? this.state.fallbackInputValue
-      : this.bigNumberToFormattedString(value);
+      : this.bigNumberToFormattedString(new BigNumber(value));
 
     return (
       <Input
diff --git a/stories/NumericInput.stories.js b/stories/NumericInput.stories.js
index 9023ae95..1f153877 100644
--- a/stories/NumericInput.stories.js
+++ b/stories/NumericInput.stories.js
@@ -143,7 +143,17 @@ storiesOf('NumericInput', module)
       />
     ))
   )
-
+  .add(
+    'invalid value',
+    withState({ value: '' }, (store) => (
+      <NumericInput
+        value={store.state.value}
+        onChange={(value) => store.set({ value })}
+        placeholder="placeholder …"
+        label="Invalid values are ignored"
+      />
+    ))
+  )
   .add(
     'with error',
     withState({ value: null }, (store) => (

From 8b3ef68b258ec12121a1627904f5a6b1e3438bb8 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 27 Jan 2021 23:54:42 +0100
Subject: [PATCH 120/244] 0.9.7-rc.13

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9fff0f43..97250989 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.12",
+  "version": "0.9.7-rc.13",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 489b2555ea2e56f8691ce3d287bf3809093b25dc Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 28 Jan 2021 00:09:33 +0100
Subject: [PATCH 121/244] [DDW-543] Fix rounding mode bug

---
 source/components/NumericInput.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 3c661a78..22f0e594 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -44,6 +44,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     allowSigns: true,
     context: createEmptyContext(),
     readOnly: false,
+    roundingMode: BigNumber.ROUND_FLOOR,
     theme: null,
     themeId: IDENTIFIERS.INPUT,
     themeOverrides: {},
@@ -326,13 +327,13 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     return this.props.bigNumberFormat ?? BigNumber.config().FORMAT;
   }
 
-  bigNumberToFormattedString(number: BigNumber.Instance) {
+  bigNumberToFormattedString(number: ?BigNumber.Instance) {
     const { bigNumberFormat, decimalPlaces, roundingMode } = this.props;
-    const result = number.toFormat(decimalPlaces, roundingMode, {
+    const result = new BigNumber(number).toFormat(decimalPlaces, roundingMode, {
       ...BigNumber.config().FORMAT, // defaults
       ...bigNumberFormat, // custom overrides
     });
-    return result === 'NaN' ? null : result;
+    return result === 'NaN' ? '' : result;
   }
 
   formattedValueToBigNumber(value: string) {

From f447ca94aec0231b82c840c528f9b4dec60a7e1f Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 28 Jan 2021 00:09:42 +0100
Subject: [PATCH 122/244] 0.9.7-rc.14

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 97250989..3327e382 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.13",
+  "version": "0.9.7-rc.14",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From add79caa546ccd41219e6ddec4a0dc7fd159bf62 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 28 Jan 2021 00:36:11 +0100
Subject: [PATCH 123/244] [DDW-543] Correctly extend Input component

---
 source/components/NumericInput.js | 30 +++---------------------------
 1 file changed, 3 insertions(+), 27 deletions(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 22f0e594..41fdc5e4 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -10,11 +10,9 @@ import type { SyntheticInputEvent, Element, ElementRef } from 'react';
 import createRef from 'create-react-ref/lib/createRef';
 
 // internal utility functions
-import { createEmptyContext, withTheme } from './HOC/withTheme';
-import { composeTheme, addThemeId, didThemePropsChange } from '../utils/themes';
+import { withTheme } from './HOC/withTheme';
 
 // import constants
-import { IDENTIFIERS } from '.';
 import { removeCharAtPosition } from '../utils/strings';
 import type { InputEvent } from '../utils/types';
 import { Input } from './Input';
@@ -42,25 +40,15 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
   static defaultProps = {
     allowSigns: true,
-    context: createEmptyContext(),
     readOnly: false,
     roundingMode: BigNumber.ROUND_FLOOR,
-    theme: null,
-    themeId: IDENTIFIERS.INPUT,
-    themeOverrides: {},
     value: null,
   };
 
   constructor(props: NumericInputProps) {
     super(props);
-    const { context, themeId, theme, themeOverrides } = props;
     this.inputElement = createRef();
     this.state = {
-      composedTheme: composeTheme(
-        addThemeId(theme || context.theme, themeId),
-        addThemeId(themeOverrides, themeId),
-        context.ROOT_THEME_API
-      ),
       inputCaretPosition: 0,
       fallbackInputValue: null,
     };
@@ -93,9 +81,6 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       this.setInputCaretPosition(inputCaretPosition);
     }
     this._hasInputBeenChanged = false;
-    if (prevProps !== this.props) {
-      didThemePropsChange(prevProps, this.props, this.setState.bind(this));
-    }
   }
 
   onChange = (newValue, event: SyntheticInputEvent<Element<'input'>>) => {
@@ -363,15 +348,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
   render() {
     // destructuring props ensures only the "...rest" get passed down
-    const {
-      context,
-      onChange,
-      skin,
-      theme,
-      themeOverrides,
-      value,
-      ...rest
-    } = this.props;
+    const { onChange, value, ...rest } = this.props;
 
     const inputValue = this.state.fallbackInputValue
       ? this.state.fallbackInputValue
@@ -381,9 +358,8 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       <Input
         inputRef={this.inputElement}
         onChange={this.onChange}
-        theme={this.state.composedTheme}
-        value={inputValue}
         onBlur={this.onBlur}
+        value={inputValue}
         {...rest}
       />
     );

From ca178e1376f5302c78e5691034e352a9c1b1d51b Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 28 Jan 2021 00:36:19 +0100
Subject: [PATCH 124/244] 0.9.7-rc.15

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3327e382..d0cd805f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.14",
+  "version": "0.9.7-rc.15",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From a71dc44fb99cb817cb3638102f63c073a913dd67 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 28 Jan 2021 12:13:07 +0100
Subject: [PATCH 125/244] [DDW-543] Fix bug with form field refs and hooks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It’s not possible to useEffect in combination with a ref object that should come from a component inside a render function:
https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
---
 source/components/FormField.js          | 14 +++++----
 source/skins/simple/AutocompleteSkin.js | 14 +++++----
 source/skins/simple/FormFieldSkin.js    | 16 +++++++----
 source/skins/simple/InputSkin.js        | 15 +++++-----
 source/skins/simple/TextAreaSkin.js     |  6 ++--
 source/utils/hooks.js                   | 38 +++++++++++++------------
 6 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/source/components/FormField.js b/source/components/FormField.js
index 15b139e0..e2bb63b5 100644
--- a/source/components/FormField.js
+++ b/source/components/FormField.js
@@ -17,10 +17,9 @@ export type FormFieldProps = {
   error?: string | Element<any>,
   isErrorHidden?: boolean,
   isErrorShown?: boolean,
-  inputRef?: ElementRef<*>,
   label?: string | Element<any>,
   onChange: Function,
-  render: Function,
+  render: (setFormFieldRef: (ElementRef<*>) => void) => React$Node,
   skin?: ComponentType<any>,
   theme: ?Object, // will take precedence over theme in context if passed
   themeId: string,
@@ -43,6 +42,8 @@ class FormFieldBase extends Component<FormFieldProps, State> {
     themeOverrides: {},
   };
 
+  formFieldRef: ElementRef<*> = React.createRef;
+
   constructor(props: FormFieldProps) {
     super(props);
 
@@ -67,10 +68,10 @@ class FormFieldBase extends Component<FormFieldProps, State> {
   setError = (error: string) => this.setState({ error });
 
   focusChild = () => {
-    const { inputRef } = this.props;
-    if (inputRef && inputRef.current) {
-      if (typeof inputRef.current.focus === 'function') {
-        inputRef.current.focus();
+    const { formFieldRef } = this;
+    if (formFieldRef && formFieldRef.current) {
+      if (typeof formFieldRef.current.focus === 'function') {
+        formFieldRef.current.focus();
       }
     }
   };
@@ -86,6 +87,7 @@ class FormFieldBase extends Component<FormFieldProps, State> {
         error={error || this.state.error}
         setError={this.setError}
         theme={this.state.composedTheme}
+        formFieldRef={this.formFieldRef}
         focusChild={this.focusChild}
         {...rest}
       />
diff --git a/source/skins/simple/AutocompleteSkin.js b/source/skins/simple/AutocompleteSkin.js
index 8593873d..0ee8dfb1 100644
--- a/source/skins/simple/AutocompleteSkin.js
+++ b/source/skins/simple/AutocompleteSkin.js
@@ -79,10 +79,12 @@ export const AutocompleteSkin = (props: Props) => {
   };
 
   const selectedOptionsCount = props.selectedOptions.length;
-  const hasSelectedRequiredNumberOfOptions = some(
-    props.requiredSelections,
-    (requiredCount) => selectedOptionsCount === requiredCount
-  );
+  const hasSelectedRequiredNumberOfOptions =
+    props.requiredSelections.length === 0 ||
+    some(
+      props.requiredSelections,
+      (requiredCount) => selectedOptionsCount === requiredCount
+    );
   const error = hasSelectedRequiredNumberOfOptions ? props.error : null;
 
   return (
@@ -107,7 +109,7 @@ export const AutocompleteSkin = (props: Props) => {
         inputRef={props.inputRef}
         label={props.label}
         isErrorHidden={props.isOpen}
-        render={() => (
+        render={(setFormFieldRef) => (
           <div
             className={classnames([
               theme.autocompleteContent,
@@ -120,7 +122,7 @@ export const AutocompleteSkin = (props: Props) => {
             <div className={theme.selectedWords}>
               {renderSelectedOptions()}
               <input
-                ref={props.inputRef}
+                ref={setFormFieldRef}
                 placeholder={placeholder}
                 value={props.inputValue}
                 onChange={props.handleInputChange}
diff --git a/source/skins/simple/FormFieldSkin.js b/source/skins/simple/FormFieldSkin.js
index c9e53420..cfa5573c 100644
--- a/source/skins/simple/FormFieldSkin.js
+++ b/source/skins/simple/FormFieldSkin.js
@@ -1,18 +1,24 @@
 // @flow
-import React from 'react';
+import type { ElementRef } from 'react';
+import React, { useState } from 'react';
 import classnames from 'classnames';
 import type { FormFieldProps } from '../../components/FormField';
 import { PopOver } from '../../components/PopOver';
 import { SimpleFormFieldVariables } from '../../themes/simple/SimpleFormField';
-import { isRefFocused } from '../../utils/hooks';
+import { handleRefFocusState } from '../../utils/hooks';
 
 type Props = FormFieldProps & {
+  formFieldRef: ElementRef<*>,
   focusChild: Function,
   setError: Function,
 };
 
 export function FormFieldSkin(props: Props) {
-  const isInputFocused = isRefFocused(props.inputRef);
+  const [isFormFieldFocused, setIsFormFieldFocused] = useState(false);
+  const setFormFieldRef = handleRefFocusState(
+    props.formFieldRef,
+    setIsFormFieldFocused
+  );
   const hasError = props.error != null;
   return (
     <div
@@ -37,7 +43,7 @@ export function FormFieldSkin(props: Props) {
         isShowingOnHover={hasError && !props.isErrorHidden}
         isVisible={
           props.isErrorShown ||
-          (hasError && isInputFocused && !props.isErrorHidden)
+          (hasError && isFormFieldFocused && !props.isErrorHidden)
         }
         content={props.error}
         themeVariables={{
@@ -48,7 +54,7 @@ export function FormFieldSkin(props: Props) {
         duration={[300, 0]}
       >
         <div className={props.theme[props.themeId].inputWrapper}>
-          {props.render(props)}
+          {props.render(setFormFieldRef)}
         </div>
       </PopOver>
     </div>
diff --git a/source/skins/simple/InputSkin.js b/source/skins/simple/InputSkin.js
index 8e145c71..7b6d51e6 100644
--- a/source/skins/simple/InputSkin.js
+++ b/source/skins/simple/InputSkin.js
@@ -14,15 +14,14 @@ import type { InputProps } from '../../components/Input';
 import { pickDOMProps } from '../../utils/props';
 
 type Props = InputProps & {
-  inputRef: ElementRef<'input'>,
   theme: Object,
   themeId: string,
 };
 
 export const InputSkin = (props: Props) => {
-  const renderInput = () => (
+  const renderInput = (setFormFieldRef) => (
     <input
-      ref={props.inputRef}
+      ref={setFormFieldRef}
       {...pickDOMProps(props)}
       className={classnames([
         props.theme[props.themeId].input,
@@ -35,23 +34,23 @@ export const InputSkin = (props: Props) => {
     />
   );
 
-  const useSelectionRenderer = (option) => (
+  const useSelectionRenderer = (setFormFieldRef, option) => (
     <div className={props.theme[props.themeId].customValueWrapper}>
-      {renderInput()}
+      {renderInput(setFormFieldRef)}
       <div className={props.theme[props.themeId].customValueBlock}>
         {option && props.selectionRenderer && props.selectionRenderer(option)}
       </div>
     </div>
   );
 
-  const render = () => {
+  const render = (setFormFieldRef) => {
     // check if user has passed render prop "selectionRenderer"
     const hasSelectionRenderer =
       props.selectionRenderer && isFunction(props.selectionRenderer);
     if (hasSelectionRenderer) {
-      return useSelectionRenderer(props.selectedOption);
+      return useSelectionRenderer(setFormFieldRef, props.selectedOption);
     }
-    return renderInput();
+    return renderInput(setFormFieldRef);
   };
 
   return (
diff --git a/source/skins/simple/TextAreaSkin.js b/source/skins/simple/TextAreaSkin.js
index c98ef1a3..f837732d 100644
--- a/source/skins/simple/TextAreaSkin.js
+++ b/source/skins/simple/TextAreaSkin.js
@@ -1,5 +1,5 @@
 // @flow
-import React, { useState } from 'react';
+import React from 'react';
 import type { ElementRef, Element } from 'react';
 
 // external libraries
@@ -40,9 +40,9 @@ export const TextAreaSkin = (props: Props) => {
       error={props.error}
       inputRef={props.textareaRef}
       skin={FormFieldSkin}
-      render={() => (
+      render={(setFormFieldRef) => (
         <textarea
-          ref={props.textareaRef}
+          ref={setFormFieldRef}
           {...pickDOMProps(props)}
           className={classnames([
             theme[themeId].textarea,
diff --git a/source/utils/hooks.js b/source/utils/hooks.js
index 753a68ef..fefa99e1 100644
--- a/source/utils/hooks.js
+++ b/source/utils/hooks.js
@@ -1,5 +1,6 @@
 // @flow
-import { useEffect, useState, Ref } from 'react';
+import type { ElementRef } from 'react';
+import { useEffect, useState, Ref, useCallback } from 'react';
 
 export function useDebouncedValueChangedIndicator(value: any, delay: number) {
   const [isDirty, setIsDirty] = useState(false);
@@ -21,23 +22,24 @@ export function useDebouncedValueChangedIndicator(value: any, delay: number) {
   return isDirty;
 }
 
-export function isRefFocused(ref: Ref<*>) {
-  const [isFocused, setIsFocused] = useState(false);
+// Inspired by https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
+export function handleRefFocusState(
+  ref: ElementRef<*>,
+  setIsFocused: React.SetStateAction
+) {
+  const focusListener = () => setIsFocused(true);
+  const blurListener = () => setIsFocused(false);
 
-  useEffect(() => {
-    if (!ref || ref.current || !ref.current.addEventListener) {
-      return;
+  return useCallback((node) => {
+    if (ref.current) {
+      const { current } = ref;
+      current.removeEventListener('focus', focusListener);
+      current.removeEventListener('blur', blurListener);
     }
-    const element = ref.current;
-    const focusListener = () => setIsFocused(true);
-    const blurListener = () => setIsFocused(false);
-    element.addEventListener('focus', focusListener);
-    element.addEventListener('blur', blurListener);
-    return () => {
-      element.removeEventListener('focus', focusListener);
-      element.removeEventListener('blur', blurListener);
-    };
-  }, [ref]);
-
-  return isFocused;
+    if (node) {
+      node.addEventListener('focus', focusListener);
+      node.addEventListener('blur', blurListener);
+    }
+    ref.current = node;
+  }, []);
 }

From 96991dd911bc5a7bd33c39054f73ba6e236f3a60 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 28 Jan 2021 12:13:28 +0100
Subject: [PATCH 126/244] 0.9.7-rc.16

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d0cd805f..8b123947 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.15",
+  "version": "0.9.7-rc.16",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From b5c36b64596904e1699edb48d1a6c333c4cc517d Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 28 Jan 2021 13:22:01 +0100
Subject: [PATCH 127/244] [DDW-543] Fix ref issue and numeric input IO

---
 source/components/FormField.js          |  5 ++++-
 source/components/NumericInput.js       | 29 +++++++++++++++----------
 source/skins/simple/AutocompleteSkin.js |  2 +-
 source/skins/simple/InputSkin.js        |  2 +-
 source/skins/simple/TextAreaSkin.js     |  2 +-
 stories/NumericInput.stories.js         | 10 ++++-----
 6 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/source/components/FormField.js b/source/components/FormField.js
index e2bb63b5..c9aaec6d 100644
--- a/source/components/FormField.js
+++ b/source/components/FormField.js
@@ -15,6 +15,7 @@ export type FormFieldProps = {
   context: ThemeContextProp,
   disabled?: boolean,
   error?: string | Element<any>,
+  formFieldRef: ElementRef<*>,
   isErrorHidden?: boolean,
   isErrorShown?: boolean,
   label?: string | Element<any>,
@@ -42,13 +43,15 @@ class FormFieldBase extends Component<FormFieldProps, State> {
     themeOverrides: {},
   };
 
-  formFieldRef: ElementRef<*> = React.createRef;
+  formFieldRef: ElementRef<*>;
 
   constructor(props: FormFieldProps) {
     super(props);
 
     const { context, themeId, theme, themeOverrides } = props;
 
+    this.formFieldRef = props.formFieldRef ?? React.createRef();
+
     this.state = {
       error: '',
       composedTheme: composeTheme(
diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 41fdc5e4..d23ed987 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -18,12 +18,14 @@ import type { InputEvent } from '../utils/types';
 import { Input } from './Input';
 import type { InputProps } from './Input';
 
+type NumericInputValue = null | number | string | BigNumber.Instance;
+
 export type NumericInputProps = InputProps & {
   allowSigns?: boolean,
   bigNumberFormat?: BigNumber.Format,
   decimalPlaces?: number,
   roundingMode?: BigNumber.RoundingMode,
-  value: ?BigNumber.Instance,
+  value: NumericInputValue,
 };
 
 type State = {
@@ -107,7 +109,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
   processValueChange(
     event: InputEvent
   ): ?{
-    value: ?BigNumber.Instance,
+    value: NumericInputValue,
     caretPosition: number,
     fallbackInputValue?: ?string,
   } {
@@ -148,7 +150,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     // Case: Everything was deleted -> reset state
     if (valueToProcess === '') {
       return {
-        value: null,
+        value: '',
         caretPosition: 0,
         fallbackInputValue: null,
       };
@@ -160,7 +162,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     // Case: Just minus sign was entered
     if (valueToProcess === '-') {
       return {
-        value: null,
+        value: '',
         caretPosition: 1,
         fallbackInputValue: '-',
       };
@@ -170,7 +172,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
      * ========= CLEAN THE INPUT =============
      */
 
-    const currentNumber = value;
+    const currentNumber = new BigNumber(value);
     const currentValue =
       fallbackInputValue ?? this.bigNumberToFormattedString(currentNumber);
 
@@ -210,7 +212,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     // Case: Just a decimal separator was entered
     if (valueToProcess === decimalSeparator) {
       return {
-        value: new BigNumber(0),
+        value: '0',
         caretPosition: 2,
         fallbackInputValue: decimalPlaces > 0 ? null : `0${decimalSeparator}`,
       };
@@ -220,7 +222,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     if (newValue.charAt(0) === decimalSeparator) {
       const newCaretPos = isInsert ? 2 : 1;
       return {
-        value: newNumber,
+        value: this.bigNumberToFixed(newNumber),
         caretPosition: newCaretPos,
         fallbackInputValue: null,
       };
@@ -235,7 +237,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
           changedCaretPosition +
           (isDeletion ? deleteAdjustment : insertAdjustment),
         fallbackInputValue,
-        value: currentNumber,
+        value: this.bigNumberToFixed(currentNumber),
       };
     }
 
@@ -247,7 +249,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       newValue.charAt(newValue.length - 1) === decimalSeparator
     ) {
       return {
-        value: newNumber,
+        value: this.bigNumberToFixed(newNumber),
         caretPosition: changedCaretPosition,
         fallbackInputValue:
           decimalPlaces > 0 ? null : formattedNewNumber + decimalSeparator,
@@ -263,7 +265,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       return {
         caretPosition: newCaretPosition + deleteCaretCorrection,
         fallbackInputValue: null,
-        value: currentNumber,
+        value: this.bigNumberToFixed(currentNumber),
       };
     }
 
@@ -283,7 +285,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     return {
       caretPosition: Math.max(newCaretPosition + caretCorrection, 0),
       fallbackInputValue: null,
-      value: newNumber,
+      value: this.bigNumberToFixed(newNumber),
     };
   }
 
@@ -321,6 +323,11 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     return result === 'NaN' ? '' : result;
   }
 
+  bigNumberToFixed(number: BigNumber.Instance) {
+    const { decimalPlaces, roundingMode } = this.props;
+    return number.toFixed(decimalPlaces, roundingMode);
+  }
+
   formattedValueToBigNumber(value: string) {
     const { decimalSeparator, groupSeparator } = this.getBigNumberFormat();
     return new BigNumber(
diff --git a/source/skins/simple/AutocompleteSkin.js b/source/skins/simple/AutocompleteSkin.js
index 0ee8dfb1..f8ddc90b 100644
--- a/source/skins/simple/AutocompleteSkin.js
+++ b/source/skins/simple/AutocompleteSkin.js
@@ -106,7 +106,7 @@ export const AutocompleteSkin = (props: Props) => {
         )}
       <FormField
         error={error}
-        inputRef={props.inputRef}
+        formFieldRef={props.inputRef}
         label={props.label}
         isErrorHidden={props.isOpen}
         render={(setFormFieldRef) => (
diff --git a/source/skins/simple/InputSkin.js b/source/skins/simple/InputSkin.js
index 7b6d51e6..eebf5177 100644
--- a/source/skins/simple/InputSkin.js
+++ b/source/skins/simple/InputSkin.js
@@ -59,7 +59,7 @@ export const InputSkin = (props: Props) => {
       disabled={props.disabled}
       label={props.label}
       error={props.error}
-      inputRef={props.inputRef}
+      formFieldRef={props.inputRef}
       theme={props.theme}
       render={render}
     />
diff --git a/source/skins/simple/TextAreaSkin.js b/source/skins/simple/TextAreaSkin.js
index f837732d..7c4eb87d 100644
--- a/source/skins/simple/TextAreaSkin.js
+++ b/source/skins/simple/TextAreaSkin.js
@@ -38,7 +38,7 @@ export const TextAreaSkin = (props: Props) => {
       disabled={props.disabled}
       label={props.label}
       error={props.error}
-      inputRef={props.textareaRef}
+      formFieldRef={props.textareaRef}
       skin={FormFieldSkin}
       render={(setFormFieldRef) => (
         <textarea
diff --git a/stories/NumericInput.stories.js b/stories/NumericInput.stories.js
index 1f153877..d0d85ef4 100644
--- a/stories/NumericInput.stories.js
+++ b/stories/NumericInput.stories.js
@@ -34,7 +34,7 @@ storiesOf('NumericInput', module)
   )
   .add(
     'value (9999.99)',
-    withState({ value: new BigNumber(9999.99) }, (store) => (
+    withState({ value: 9999.99 }, (store) => (
       <NumericInput
         onChange={(value) => store.set({ value })}
         value={store.state.value}
@@ -43,7 +43,7 @@ storiesOf('NumericInput', module)
   )
   .add(
     'decimalPlaces (6)',
-    withState({ value: new BigNumber(0) }, (store) => (
+    withState({ value: 0 }, (store) => (
       <NumericInput
         onChange={(value) => store.set({ value })}
         decimalPlaces={6}
@@ -53,7 +53,7 @@ storiesOf('NumericInput', module)
   )
   .add(
     'format: decimal (comma) group (dot)',
-    withState({ value: new BigNumber(0) }, (store) => (
+    withState({ value: 0 }, (store) => (
       <NumericInput
         onChange={(value) => store.set({ value })}
         bigNumberFormat={{
@@ -68,7 +68,7 @@ storiesOf('NumericInput', module)
   )
   .add(
     'format: decimal (dot) group (space)',
-    withState({ value: new BigNumber(0) }, (store) => (
+    withState({ value: 0 }, (store) => (
       <NumericInput
         onChange={(value) => store.set({ value })}
         bigNumberFormat={{
@@ -113,7 +113,7 @@ storiesOf('NumericInput', module)
   )
   .add(
     'readOnly',
-    withState({ value: new BigNumber(2) }, (store) => (
+    withState({ value: 2 }, (store) => (
       <NumericInput
         value={store.state.value}
         onChange={(value) => store.set({ value })}

From 693f82fefe67898ea4c1d6060bf98ac654cb9c9f Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 28 Jan 2021 13:22:24 +0100
Subject: [PATCH 128/244] 0.9.7-rc.17

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8b123947..77e6e3bc 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.16",
+  "version": "0.9.7-rc.17",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 68c265e119d2c9b5f5b7b9fb9baff7dd3fc7e3a8 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 29 Jan 2021 15:37:03 +0100
Subject: [PATCH 129/244] Prepare release/0.9.7

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b104e639..c43dbd52 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
+0.9.7
+=====
+
 ### Features
 
 - Improve `NumericInput` component to support big numbers ([PR 152](https://github.com/input-output-hk/react-polymorph/pull/152))

From a0b7640eaf3bf85ea83cd7ba84583c2beeea1bf9 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 29 Jan 2021 15:38:28 +0100
Subject: [PATCH 130/244] 0.9.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 77e6e3bc..4a34da12 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-rc.17",
+  "version": "0.9.7",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From b52fed45460f0e7163ec75c9f4a188002c096f62 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 29 Jan 2021 14:41:01 +0000
Subject: [PATCH 131/244] Bump ini from 1.3.5 to 1.3.8

Bumps [ini](https://github.com/isaacs/ini) from 1.3.5 to 1.3.8.
- [Release notes](https://github.com/isaacs/ini/releases)
- [Commits](https://github.com/isaacs/ini/compare/v1.3.5...v1.3.8)

Signed-off-by: dependabot[bot] <support@github.com>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 63629840..4a67111b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8205,9 +8205,9 @@ inherits@2.0.3:
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
 ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
 inquirer@6.5.0:
   version "6.5.0"

From 713608adc357a0debc12d8d6b39f6734f162ef80 Mon Sep 17 00:00:00 2001
From: Sebastien Guillemot <sebastiengllmt@gmail.com>
Date: Tue, 16 Feb 2021 00:02:57 +0900
Subject: [PATCH 132/244] Fix NumericInput on BigNumber.DEBUG

---
 source/components/NumericInput.js | 8 ++++++--
 stories/NumericInput.stories.js   | 2 ++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index d23ed987..cd7b2019 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -172,7 +172,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
      * ========= CLEAN THE INPUT =============
      */
 
-    const currentNumber = new BigNumber(value);
+    const currentNumber = value == null ? new BigNumber('0') : new BigNumber(value);
     const currentValue =
       fallbackInputValue ?? this.bigNumberToFormattedString(currentNumber);
 
@@ -316,6 +316,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
   bigNumberToFormattedString(number: ?BigNumber.Instance) {
     const { bigNumberFormat, decimalPlaces, roundingMode } = this.props;
+    if (number == null) return '';
     const result = new BigNumber(number).toFormat(decimalPlaces, roundingMode, {
       ...BigNumber.config().FORMAT, // defaults
       ...bigNumberFormat, // custom overrides
@@ -359,7 +360,10 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
     const inputValue = this.state.fallbackInputValue
       ? this.state.fallbackInputValue
-      : this.bigNumberToFormattedString(new BigNumber(value));
+      : this.bigNumberToFormattedString(value == null
+        ? null
+        : new BigNumber(value)
+      );
 
     return (
       <Input
diff --git a/stories/NumericInput.stories.js b/stories/NumericInput.stories.js
index d0d85ef4..66f6f38e 100644
--- a/stories/NumericInput.stories.js
+++ b/stories/NumericInput.stories.js
@@ -18,6 +18,8 @@ import themeOverrides from './theme-overrides/customInput.scss';
 // helpers
 import { decorateWithSimpleTheme } from './helpers/theming';
 
+BigNumber.DEBUG = true;
+
 storiesOf('NumericInput', module)
   .addDecorator(decorateWithSimpleTheme)
 

From 93dfc4cedf4a916ee31ffd4b96227635b554fa89 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 15 Feb 2021 20:53:50 +0100
Subject: [PATCH 133/244] Fix numeric input bug introduced in #159

---
 source/components/NumericInput.js | 40 ++++++++++++++++---------------
 stories/NumericInput.stories.js   |  2 --
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index cd7b2019..06ed7609 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -19,6 +19,7 @@ import { Input } from './Input';
 import type { InputProps } from './Input';
 
 type NumericInputValue = null | number | string | BigNumber.Instance;
+BigNumber.DEBUG = true;
 
 export type NumericInputProps = InputProps & {
   allowSigns?: boolean,
@@ -150,7 +151,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     // Case: Everything was deleted -> reset state
     if (valueToProcess === '') {
       return {
-        value: '',
+        value: null,
         caretPosition: 0,
         fallbackInputValue: null,
       };
@@ -162,7 +163,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     // Case: Just minus sign was entered
     if (valueToProcess === '-') {
       return {
-        value: '',
+        value: null,
         caretPosition: 1,
         fallbackInputValue: '-',
       };
@@ -172,9 +173,10 @@ class NumericInputBase extends Component<NumericInputProps, State> {
      * ========= CLEAN THE INPUT =============
      */
 
-    const currentNumber = value == null ? new BigNumber('0') : new BigNumber(value);
+    const currentNumber =
+      value == null ? new BigNumber('0') : new BigNumber(value);
     const currentValue =
-      fallbackInputValue ?? this.bigNumberToFormattedString(currentNumber);
+      fallbackInputValue ?? this.valueToFormattedString(currentNumber);
 
     const currentNumberOfDecimalSeparators = this.getNumberOfDecimalSeparators(
       currentValue
@@ -206,11 +208,9 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     /**
      * ========= PROCESS CLEANED INPUT =============
      */
-    const newNumber =
-      newValue === '' ? null : this.formattedValueToBigNumber(newValue);
 
     // Case: Just a decimal separator was entered
-    if (valueToProcess === decimalSeparator) {
+    if (newValue === decimalSeparator) {
       return {
         value: '0',
         caretPosition: 2,
@@ -228,6 +228,9 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       };
     }
 
+    const newNumber =
+      newValue === '' ? null : this.formattedValueToBigNumber(newValue);
+
     // Case: Invalid change has been made -> ignore it
     if (newNumber == null) {
       const deleteAdjustment = isBackwardDelete ? 0 : 1; // special cases when deleting dot
@@ -241,7 +244,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       };
     }
 
-    const formattedNewNumber = this.bigNumberToFormattedString(newNumber);
+    const formattedNewNumber = this.valueToFormattedString(newNumber);
 
     // Case: Dot was added at the end of number
     if (
@@ -314,14 +317,16 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     return this.props.bigNumberFormat ?? BigNumber.config().FORMAT;
   }
 
-  bigNumberToFormattedString(number: ?BigNumber.Instance) {
+  valueToFormattedString(number: NumericInputValue) {
     const { bigNumberFormat, decimalPlaces, roundingMode } = this.props;
-    if (number == null) return '';
-    const result = new BigNumber(number).toFormat(decimalPlaces, roundingMode, {
-      ...BigNumber.config().FORMAT, // defaults
-      ...bigNumberFormat, // custom overrides
-    });
-    return result === 'NaN' ? '' : result;
+    try {
+      return new BigNumber(number).toFormat(decimalPlaces, roundingMode, {
+        ...BigNumber.config().FORMAT, // defaults
+        ...bigNumberFormat, // custom overrides
+      });
+    } catch (e) {
+      return '';
+    }
   }
 
   bigNumberToFixed(number: BigNumber.Instance) {
@@ -360,10 +365,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
     const inputValue = this.state.fallbackInputValue
       ? this.state.fallbackInputValue
-      : this.bigNumberToFormattedString(value == null
-        ? null
-        : new BigNumber(value)
-      );
+      : this.valueToFormattedString(value);
 
     return (
       <Input
diff --git a/stories/NumericInput.stories.js b/stories/NumericInput.stories.js
index 66f6f38e..d0d85ef4 100644
--- a/stories/NumericInput.stories.js
+++ b/stories/NumericInput.stories.js
@@ -18,8 +18,6 @@ import themeOverrides from './theme-overrides/customInput.scss';
 // helpers
 import { decorateWithSimpleTheme } from './helpers/theming';
 
-BigNumber.DEBUG = true;
-
 storiesOf('NumericInput', module)
   .addDecorator(decorateWithSimpleTheme)
 

From d93624328c9a4d462e1ca5370dcab4a2aaeafd03 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Fri, 19 Feb 2021 10:32:24 -0500
Subject: [PATCH 134/244] [DDW-550] Add className prop

---
 source/components/PopOver.js       | 1 +
 source/skins/simple/PopOverSkin.js | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/source/components/PopOver.js b/source/components/PopOver.js
index ad330b13..a0ddce58 100644
--- a/source/components/PopOver.js
+++ b/source/components/PopOver.js
@@ -31,6 +31,7 @@ import { IDENTIFIERS } from './index';
 export type PopOverProps = {
   allowHTML?: boolean,
   children?: ReactElement<any>,
+  className?: string,
   contentClassName?: string,
   content: ReactNode,
   context?: ThemeContextProp,
diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index 33a08ab6..aedb22c7 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -33,6 +33,7 @@ export function PopOverSkin(props: PopOverProps) {
   const {
     allowHTML,
     children,
+    className,
     content,
     contentClassName,
     isShowingOnHover,
@@ -59,7 +60,7 @@ export function PopOverSkin(props: PopOverProps) {
           content
         )
       }
-      className={classnames([theme[themeId].root])}
+      className={classnames([theme[themeId].root, className])}
       theme="polymorph"
       plugins={[
         {

From 77bd24779eda446991c1e35ed390cc84c855b0f3 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 11 Feb 2021 22:22:58 +0100
Subject: [PATCH 135/244] [DDW-544] Use tippy props for handling hover/click

---
 source/skins/simple/PopOverSkin.js | 24 +++---------------------
 stories/PopOver.stories.js         |  8 ++++++++
 2 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index aedb22c7..457d44e0 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -3,7 +3,7 @@ import Tippy from '@tippyjs/react';
 import { isString } from 'lodash';
 import classnames from 'classnames';
 import Popper from 'popper.js';
-import React, { forwardRef, Node, useState } from 'react';
+import React, { forwardRef, Node } from 'react';
 import type { PopOverProps } from '../../components/PopOver';
 
 const PopOverWrapper = forwardRef(
@@ -11,18 +11,11 @@ const PopOverWrapper = forwardRef(
     props: {
       children?: ?Node,
       className?: string,
-      onMouseEnter: () => void,
-      onMouseLeave: () => void,
     },
     ref
   ) => {
     return (
-      <span
-        onMouseEnter={props.onMouseEnter}
-        onMouseLeave={props.onMouseLeave}
-        className={props.className}
-        ref={ref}
-      >
+      <span className={props.className} ref={ref}>
         {props.children}
       </span>
     );
@@ -36,7 +29,6 @@ export function PopOverSkin(props: PopOverProps) {
     className,
     content,
     contentClassName,
-    isShowingOnHover,
     isVisible,
     popperOptions,
     theme,
@@ -45,14 +37,10 @@ export function PopOverSkin(props: PopOverProps) {
     themeVariables,
     ...tippyProps
   } = props;
-  const [isHovered, setIsHovered] = useState(false);
-  const hasContent =
-    React.isValidElement(content) || (isString(content) && content !== '');
   return (
     <Tippy
       offset={[0, 14]}
       {...tippyProps}
-      visible={hasContent && (isVisible || (isShowingOnHover && isHovered))}
       content={
         isString(content) && allowHTML ? (
           <span dangerouslySetInnerHTML={{ __html: content }} />
@@ -100,13 +88,7 @@ export function PopOverSkin(props: PopOverProps) {
       }}
       cssVariables={themeVariables}
     >
-      <PopOverWrapper
-        className={contentClassName}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        {children}
-      </PopOverWrapper>
+      <PopOverWrapper className={contentClassName}>{children}</PopOverWrapper>
     </Tippy>
   );
 }
diff --git a/stories/PopOver.stories.js b/stories/PopOver.stories.js
index 5be64f37..8f8d4484 100644
--- a/stories/PopOver.stories.js
+++ b/stories/PopOver.stories.js
@@ -40,6 +40,14 @@ storiesOf('PopOver', module)
     </div>
   ))
 
+  .add('trigger: click', () => (
+    <div className={styles.container}>
+      <PopOver trigger="click" content="click again to hide me">
+        click me
+      </PopOver>
+    </div>
+  ))
+
   .add('allowHTML', () => (
     <div className={styles.container}>
       <PopOver allowHTML content="this is a tip containing <b>HTML</b>">

From 2489ea64f0de128fb9d51d43289398efbf6cc6a5 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 11 Feb 2021 22:23:59 +0100
Subject: [PATCH 136/244] 0.9.8-rc.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4a34da12..49e2434a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7",
+  "version": "0.9.8-rc.1",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 5b8f20a2a880f210457b3b79114d755b79d5f796 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Sat, 13 Feb 2021 21:49:53 +0100
Subject: [PATCH 137/244] [DDW-544] Avoid showing empty pop overs

---
 source/skins/simple/PopOverSkin.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index 457d44e0..343288f8 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -37,10 +37,13 @@ export function PopOverSkin(props: PopOverProps) {
     themeVariables,
     ...tippyProps
   } = props;
+  const hasContent =
+    React.isValidElement(content) || (isString(content) && content !== '');
   return (
     <Tippy
       offset={[0, 14]}
       {...tippyProps}
+      visible={hasContent ? undefined : false}
       content={
         isString(content) && allowHTML ? (
           <span dangerouslySetInnerHTML={{ __html: content }} />

From 11e2d963851d7211c894b43b9f1371c6a3015e05 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Sat, 13 Feb 2021 21:50:13 +0100
Subject: [PATCH 138/244] 0.9.8-rc.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 49e2434a..3dc73e65 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.1",
+  "version": "0.9.8-rc.2",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 40a5cf1dc585330f0875ad8aa5baa08b7d709067 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 15 Feb 2021 20:57:48 +0100
Subject: [PATCH 139/244] [DDW-544] Remove unused showing on hover prop

---
 source/components/PopOver.js       | 2 --
 source/skins/simple/PopOverSkin.js | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/source/components/PopOver.js b/source/components/PopOver.js
index a0ddce58..11b915b3 100644
--- a/source/components/PopOver.js
+++ b/source/components/PopOver.js
@@ -35,7 +35,6 @@ export type PopOverProps = {
   contentClassName?: string,
   content: ReactNode,
   context?: ThemeContextProp,
-  isShowingOnHover?: boolean,
   isVisible?: boolean,
   popperOptions: PopperOptions,
   skin?: ComponentType<any>,
@@ -68,7 +67,6 @@ export function PopOver(
 
 PopOver.defaultProps = {
   allowHTML: false,
-  isShowingOnHover: true,
   theme: null,
   themeId: IDENTIFIERS.POP_OVER,
   themeOverrides: {},
diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index 343288f8..0d85c7fc 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -42,8 +42,8 @@ export function PopOverSkin(props: PopOverProps) {
   return (
     <Tippy
       offset={[0, 14]}
-      {...tippyProps}
       visible={hasContent ? undefined : false}
+      {...tippyProps}
       content={
         isString(content) && allowHTML ? (
           <span dangerouslySetInnerHTML={{ __html: content }} />

From 160c8f57edc7de5844c86f8dd29556de518c678c Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 15 Feb 2021 20:58:11 +0100
Subject: [PATCH 140/244] 0.9.8-rc.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3dc73e65..d4094b99 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.2",
+  "version": "0.9.8-rc.3",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From bf98fc4ac2f4b5401fe3c49e5f2bb427f7f350e7 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 16 Feb 2021 20:15:22 +0100
Subject: [PATCH 141/244] [DDW-544] Refactor PopOver to controlled visibility

---
 source/components/Input.js               |  3 ---
 source/components/PopOver.js             |  1 -
 source/skins/simple/FormFieldSkin.js     |  3 +--
 source/skins/simple/InputSkin.js         |  1 -
 source/skins/simple/PasswordInputSkin.js | 10 +++++++---
 source/skins/simple/PopOverSkin.js       |  4 ++--
 stories/PasswordInput.stories.js         |  1 -
 stories/PopOver.stories.js               |  4 ++--
 8 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/source/components/Input.js b/source/components/Input.js
index fb9183ca..019061a7 100644
--- a/source/components/Input.js
+++ b/source/components/Input.js
@@ -26,10 +26,7 @@ export type InputProps = {
   label?: string | Element<any>,
   maxLength?: number,
   minLength?: number,
-  onBlur?: Function,
   onChange?: Function,
-  onFocus?: Function,
-  onKeyPress?: Function,
   placeholder?: string,
   readOnly: boolean,
   setError?: Function,
diff --git a/source/components/PopOver.js b/source/components/PopOver.js
index 11b915b3..445a8cba 100644
--- a/source/components/PopOver.js
+++ b/source/components/PopOver.js
@@ -35,7 +35,6 @@ export type PopOverProps = {
   contentClassName?: string,
   content: ReactNode,
   context?: ThemeContextProp,
-  isVisible?: boolean,
   popperOptions: PopperOptions,
   skin?: ComponentType<any>,
   theme?: ?Object,
diff --git a/source/skins/simple/FormFieldSkin.js b/source/skins/simple/FormFieldSkin.js
index cfa5573c..08fc6914 100644
--- a/source/skins/simple/FormFieldSkin.js
+++ b/source/skins/simple/FormFieldSkin.js
@@ -40,8 +40,7 @@ export function FormFieldSkin(props: Props) {
         </label>
       )}
       <PopOver
-        isShowingOnHover={hasError && !props.isErrorHidden}
-        isVisible={
+        visible={
           props.isErrorShown ||
           (hasError && isFormFieldFocused && !props.isErrorHidden)
         }
diff --git a/source/skins/simple/InputSkin.js b/source/skins/simple/InputSkin.js
index eebf5177..5568dcd3 100644
--- a/source/skins/simple/InputSkin.js
+++ b/source/skins/simple/InputSkin.js
@@ -30,7 +30,6 @@ export const InputSkin = (props: Props) => {
           ? props.theme[props.themeId].errored
           : null,
       ])}
-      readOnly={props.readOnly}
     />
   );
 
diff --git a/source/skins/simple/PasswordInputSkin.js b/source/skins/simple/PasswordInputSkin.js
index f7547ae6..36fa7fcd 100644
--- a/source/skins/simple/PasswordInputSkin.js
+++ b/source/skins/simple/PasswordInputSkin.js
@@ -31,6 +31,7 @@ function getPopOverBgColorForState(state: PasswordInput.STATE): string {
 
 export const PasswordInputSkin = (props: Props) => {
   const [hasInputFocus, setHasInputFocus] = useState(false);
+  const [isInputHovered, setIsInputHovered] = useState(false);
   const {
     className,
     error,
@@ -60,10 +61,11 @@ export const PasswordInputSkin = (props: Props) => {
       ])}
     >
       <PopOver
-        isShowingOnHover={hasTooltip && isShowingTooltipOnHover}
-        isVisible={
+        visible={
           hasTooltip &&
-          (isTooltipOpen || (isShowingTooltipOnFocus && hasInputFocus))
+          (isTooltipOpen ||
+            (isShowingTooltipOnHover && isInputHovered) ||
+            (isShowingTooltipOnFocus && hasInputFocus))
         }
         content={tooltip}
         themeVariables={{
@@ -82,6 +84,8 @@ export const PasswordInputSkin = (props: Props) => {
           type="password"
           onBlur={() => setHasInputFocus(false)}
           onFocus={() => setHasInputFocus(true)}
+          onMouseEnter={() => setIsInputHovered(true)}
+          onMouseOut={() => setIsInputHovered(false)}
         />
       </PopOver>
       <div className={theme[themeId].indicator}>
diff --git a/source/skins/simple/PopOverSkin.js b/source/skins/simple/PopOverSkin.js
index 0d85c7fc..98007f04 100644
--- a/source/skins/simple/PopOverSkin.js
+++ b/source/skins/simple/PopOverSkin.js
@@ -29,12 +29,12 @@ export function PopOverSkin(props: PopOverProps) {
     className,
     content,
     contentClassName,
-    isVisible,
     popperOptions,
     theme,
     themeId,
     themeOverrides,
     themeVariables,
+    visible,
     ...tippyProps
   } = props;
   const hasContent =
@@ -42,8 +42,8 @@ export function PopOverSkin(props: PopOverProps) {
   return (
     <Tippy
       offset={[0, 14]}
-      visible={hasContent ? undefined : false}
       {...tippyProps}
+      visible={hasContent ? visible : false}
       content={
         isString(content) && allowHTML ? (
           <span dangerouslySetInnerHTML={{ __html: content }} />
diff --git a/stories/PasswordInput.stories.js b/stories/PasswordInput.stories.js
index 15a3801a..f76d6ef8 100644
--- a/stories/PasswordInput.stories.js
+++ b/stories/PasswordInput.stories.js
@@ -159,7 +159,6 @@ storiesOf('PasswordInput | Skin', module)
         <PasswordInput
           isShowingTooltipOnFocus
           isShowingTooltipOnHover
-          isTooltipOpen={false}
           label="Label"
           value={store.state.value}
           placeholder="Hint"
diff --git a/stories/PopOver.stories.js b/stories/PopOver.stories.js
index 8f8d4484..7c41d85f 100644
--- a/stories/PopOver.stories.js
+++ b/stories/PopOver.stories.js
@@ -59,14 +59,14 @@ storiesOf('PopOver', module)
   .add('content element', () => (
     <div className={styles.container}>
       <PopOver
-        isVisible
+        visible
         content={
           <div style={{ border: '1px solid red' }}>
             This is tooltip is a react component
           </div>
         }
       >
-        Empty tooltips should not display
+        always visible with styled content element
       </PopOver>
     </div>
   ))

From b799b93f3426cdf2466782143925621a0178be77 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 16 Feb 2021 20:16:59 +0100
Subject: [PATCH 142/244] 0.9.8-rc.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d4094b99..e3a61705 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.3",
+  "version": "0.9.8-rc.4",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 5edfd4de0836c8d5da68dd750f710d5050f09605 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 17 Feb 2021 12:28:20 +0100
Subject: [PATCH 143/244] [DDW-544] Use BigNumber debug mode more carefully

---
 source/components/NumericInput.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 06ed7609..ac27c5e8 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -19,7 +19,6 @@ import { Input } from './Input';
 import type { InputProps } from './Input';
 
 type NumericInputValue = null | number | string | BigNumber.Instance;
-BigNumber.DEBUG = true;
 
 export type NumericInputProps = InputProps & {
   allowSigns?: boolean,
@@ -319,13 +318,17 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
   valueToFormattedString(number: NumericInputValue) {
     const { bigNumberFormat, decimalPlaces, roundingMode } = this.props;
+    const debugSetting = BigNumber.DEBUG;
     try {
+      BigNumber.DEBUG = true;
       return new BigNumber(number).toFormat(decimalPlaces, roundingMode, {
         ...BigNumber.config().FORMAT, // defaults
         ...bigNumberFormat, // custom overrides
       });
     } catch (e) {
       return '';
+    } finally {
+      BigNumber.DEBUG = debugSetting;
     }
   }
 

From 052ac4e0e068d45e411d2ad396b12407f667710a Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 17 Feb 2021 12:28:38 +0100
Subject: [PATCH 144/244] [DDW-544] Add pop over delay story

---
 stories/PopOver.stories.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/stories/PopOver.stories.js b/stories/PopOver.stories.js
index 7c41d85f..8a4aeb61 100644
--- a/stories/PopOver.stories.js
+++ b/stories/PopOver.stories.js
@@ -77,6 +77,14 @@ storiesOf('PopOver', module)
     </div>
   ))
 
+  .add('delay', () => (
+    <div className={styles.container}>
+      <PopOver delay="500" content="This tooltip should be delayed by 500ms">
+        Hover me
+      </PopOver>
+    </div>
+  ))
+
   .add('theme variables', () => (
     <div className={styles.container}>
       <PopOver

From bc8cdd6c14bcc07fbfff9056ebe0d53b45b8a50c Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 17 Feb 2021 12:36:38 +0100
Subject: [PATCH 145/244] [DDW-544] Add changelog entry

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c43dbd52..7524a804 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
+### Fixes
+
+- Fixed issues related to controlled/uncontrolled Tippy state ([PR 160](https://github.com/input-output-hk/react-polymorph/pull/160))
+- Fixed `NumericInput` to support DEBUG mode ([PR 159](https://github.com/input-output-hk/react-polymorph/pull/159))
+
 0.9.7
 =====
 

From 1971bc3f0ca2d875cfda91a3476bedd952603497 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 17 Feb 2021 12:36:59 +0100
Subject: [PATCH 146/244] 0.9.8-rc.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e3a61705..0b2c2cf2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.4",
+  "version": "0.9.8-rc.5",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From b223d6e5726bafd21407810af131722d19fd94b1 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 17 Feb 2021 20:00:56 +0100
Subject: [PATCH 147/244] [DDW-544] Fix css var for pop over padding

---
 source/themes/simple/SimplePopOver.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/themes/simple/SimplePopOver.scss b/source/themes/simple/SimplePopOver.scss
index 46d67ec4..146eb46e 100644
--- a/source/themes/simple/SimplePopOver.scss
+++ b/source/themes/simple/SimplePopOver.scss
@@ -5,7 +5,7 @@
 $pop-over-box-shadow: var(--rp-pop-over-box-shadow, 0 1.5px 5px 0 rgba(0, 0, 0, 0.18)) !default;
 $pop-over-font-family: var(--rp-pop-over-font-family, $theme-font-regular), sans-serif !default;
 $pop-over-font-size: var(--rp-pop-over-font-size, 14px) !default;
-$pop-over-padding: var(--rp-bubble-padding, 6px 12px) !default;
+$pop-over-padding: var(--rp-pop-over-padding, 6px 12px) !default;
 $pop-over-arrow-size: var(--rp-pop-over-arrow-size, 16px) !default;
 $pop-over-bg-color: var(--rp-pop-over-bg-color, rgba(94, 96, 102, 0.9)) !default;
 $pop-over-text-color: var(--rp-pop-over-text-color, white) !default;

From d6b33575450e6fab7b9bc0f35648504ed9fdb8de Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 17 Feb 2021 20:01:22 +0100
Subject: [PATCH 148/244] 0.9.8-rc.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0b2c2cf2..fa12c4a1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.5",
+  "version": "0.9.8-rc.6",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From c628110432107cd24bacd0994ebdb549bc4a0a06 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Feb 2021 20:52:32 +0100
Subject: [PATCH 149/244] [DDW-544] Fix bug with decimal separator handling

---
 source/components/NumericInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index ac27c5e8..32610f37 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -221,7 +221,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     if (newValue.charAt(0) === decimalSeparator) {
       const newCaretPos = isInsert ? 2 : 1;
       return {
-        value: this.bigNumberToFixed(newNumber),
+        value: this.bigNumberToFixed(new BigNumber(`0.${newValue.substr(1)}`)),
         caretPosition: newCaretPos,
         fallbackInputValue: null,
       };

From 0c3de8b0359d99732e238ec237112625d110da2e Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Feb 2021 20:52:57 +0100
Subject: [PATCH 150/244] 0.9.8-rc.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fa12c4a1..6c0cfadb 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.6",
+  "version": "0.9.8-rc.7",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 866c2a322e87c662a58a6d523848179a8f24d4e4 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Feb 2021 23:17:54 +0100
Subject: [PATCH 151/244] [DDW-544] Handle invalid BigNumbers in NumericInput

---
 source/components/NumericInput.js |  1 +
 stories/NumericInput.stories.js   | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 32610f37..a41e922d 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -319,6 +319,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
   valueToFormattedString(number: NumericInputValue) {
     const { bigNumberFormat, decimalPlaces, roundingMode } = this.props;
     const debugSetting = BigNumber.DEBUG;
+    if (BigNumber.isBigNumber(number) && number.isNaN()) return '';
     try {
       BigNumber.DEBUG = true;
       return new BigNumber(number).toFormat(decimalPlaces, roundingMode, {
diff --git a/stories/NumericInput.stories.js b/stories/NumericInput.stories.js
index d0d85ef4..3852445d 100644
--- a/stories/NumericInput.stories.js
+++ b/stories/NumericInput.stories.js
@@ -1,6 +1,6 @@
 // @flow
-import React from 'react';
 import BigNumber from 'bignumber.js';
+import React from 'react';
 
 // storybook
 import { storiesOf } from '@storybook/react';
@@ -34,7 +34,7 @@ storiesOf('NumericInput', module)
   )
   .add(
     'value (9999.99)',
-    withState({ value: 9999.99 }, (store) => (
+    withState({ value: '9999.99' }, (store) => (
       <NumericInput
         onChange={(value) => store.set({ value })}
         value={store.state.value}
@@ -51,6 +51,16 @@ storiesOf('NumericInput', module)
       />
     ))
   )
+  .add(
+    'invalid BigNumber value',
+    withState({ value: new BigNumber('') }, (store) => (
+      <NumericInput
+        onChange={(value) => store.set({ value })}
+        decimalPlaces={6}
+        value={store.state.value}
+      />
+    ))
+  )
   .add(
     'format: decimal (comma) group (dot)',
     withState({ value: 0 }, (store) => (

From a118073a611e4b2f30cff814ffb61deb51f74996 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 18 Feb 2021 23:22:26 +0100
Subject: [PATCH 152/244] 0.9.8-rc.8

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6c0cfadb..0cd44f5e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.7",
+  "version": "0.9.8-rc.8",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 8caa56abf68a70cb9a7fef7341cc1a52485fbc10 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 19 Feb 2021 17:08:49 +0100
Subject: [PATCH 153/244] 0.9.8-rc.9

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0cd44f5e..9d83045b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.8",
+  "version": "0.9.8-rc.9",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From a4f1f802dce172601436d5fb57e4d26a34f44195 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 25 Feb 2021 13:40:20 +0100
Subject: [PATCH 154/244] [DDW-544] Update tippyjs-react to 4.2.1

---
 package.json |  2 +-
 yarn.lock    | 28 ++++++++++++++--------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 9d83045b..a2f82a36 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "test:watch": "yarn test --watchAll"
   },
   "dependencies": {
-    "@tippyjs/react": "4.2.0",
+    "@tippyjs/react": "4.2.1",
     "create-react-context": "0.2.2",
     "create-react-ref": "0.1.0",
     "fast-password-entropy": "1.1.1",
diff --git a/yarn.lock b/yarn.lock
index 4a67111b..616fde56 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2432,10 +2432,10 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
-"@popperjs/core@^2.4.4":
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.5.2.tgz#d3217d5f630766c0c92fbd55cf285ba64de0578b"
-  integrity sha512-tVkIU9JQw5fYPxLQgok/a7I6J1eEZ79svwQGpe2mb3jlVsPADOleefOnQBiS/takK7jQuNeswCUicMH1VWVziA==
+"@popperjs/core@^2.8.3":
+  version "2.8.4"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.8.4.tgz#6f1744b0f69f507a433f42874cc3b2eb4b11b337"
+  integrity sha512-h0lY7g36rhjNV8KVHKS3/BEOgfsxu0AiRI8+ry5IFBGEsQFkpjxtcpVc9ndN8zrKUeMZXAWMc7eQMepfgykpxQ==
 
 "@reach/router@^1.2.1":
   version "1.2.1"
@@ -2876,12 +2876,12 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
-"@tippyjs/react@4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.0.tgz#a1cb369d0051099e8a7e4ceb59f809abd9955283"
-  integrity sha512-T6UcHtwtGkvgsBQ4bNp8BtXGxa2ujfOkWUogYkRtN4UVJ2QRgDdFoJeaPxdndnVYFEa2uTVxSFxs8QkSkZ2Gdw==
+"@tippyjs/react@4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.1.tgz#c26aebdcaa84528618e0b360a69eee7d75fba209"
+  integrity sha512-AewTIG9jojsNwMtiQNj2TshKGg4dQvOlxzw1Kkd4eu6oiOfuy5jwpXokyjf7bybgHi9W4Z7zWwj4ZXJVm6sGZw==
   dependencies:
-    tippy.js "^6.2.0"
+    tippy.js "^6.3.0"
 
 "@types/babel__core@^7.1.0":
   version "7.1.3"
@@ -13947,12 +13947,12 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
-tippy.js@^6.2.0:
-  version "6.2.6"
-  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.2.6.tgz#4991bbe8f75e741fb92b5ccfeebcd072d71f8345"
-  integrity sha512-0tTL3WQNT0nWmpslhDryRahoBm6PT9fh1xXyDfOsvZpDzq52by2rF2nvsW0WX2j9nUZP/jSGDqfKJGjCtoGFKg==
+tippy.js@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.0.tgz#1cabf492b3afb1a82cf28e5a62859f6aeb253688"
+  integrity sha512-7YhkZS7HbvEGiahGGU4QHLEnzaEWEOh/s4W1YN/ktgqm9LJHV0Bw9GV+hwGbvIAAjqgSps/FWWZBzWEiV8ojmA==
   dependencies:
-    "@popperjs/core" "^2.4.4"
+    "@popperjs/core" "^2.8.3"
 
 tmp@^0.0.33:
   version "0.0.33"

From c2afb7aa3841de56b682a0f8e86be3396f205ec5 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 25 Feb 2021 13:40:24 +0100
Subject: [PATCH 155/244] 0.9.8-rc.10

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a2f82a36..bd7f3fd2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.9",
+  "version": "0.9.8-rc.10",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 06583083dab894e3389684e56010aaa8db66b04f Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 25 Feb 2021 16:42:06 +0100
Subject: [PATCH 156/244] [DDW-544] Handle lonely group separator in
 NumericInput

---
 source/components/NumericInput.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index a41e922d..477ae149 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -168,6 +168,15 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       };
     }
 
+    // Case: Just minus sign was entered
+    if (valueToProcess === groupSeparator) {
+      return {
+        value: null,
+        caretPosition: 0,
+        fallbackInputValue: null,
+      };
+    }
+
     /**
      * ========= CLEAN THE INPUT =============
      */

From 849b5d66eaff6a8a6675aedcff798bf4f50b1b66 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 25 Feb 2021 16:42:29 +0100
Subject: [PATCH 157/244] 0.9.8-rc.11

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bd7f3fd2..b0fb1164 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.10",
+  "version": "0.9.8-rc.11",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From af6b023dabb2bcae8f0feff4fb5e8739bcec1211 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Wed, 17 Mar 2021 05:15:21 -0600
Subject: [PATCH 158/244] DDW-603 - Enable pasting of wallet recovery phrase -
 updating logic for parsing multiple strings

---
 source/components/Autocomplete.js | 66 ++++++++++++++++++++++---------
 stories/Autocomplete.stories.js   |  8 ++--
 stories/Options.stories.js        |  2 +-
 stories/ThemeProvider.stories.js  |  4 +-
 4 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index 8162bd1e..05a6baa1 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -64,7 +64,7 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
   static defaultProps = {
     context: createEmptyContext(),
     error: null,
-    invalidCharsRegex: /[^a-zA-Z0-9]/g, // only allow letters and numbers by default
+    invalidCharsRegex: /[^a-zA-Z0-9\s]/g, // only allow letters and numbers by default
     isOpeningUpward: false,
     maxVisibleOptions: 10, // max number of visible options
     multipleSameSelections: true, // if true then same word can be selected multiple times
@@ -170,6 +170,10 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
   // onChange handler for input element in AutocompleteSkin
   handleInputChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
     this._setInputValue(event.target.value);
+    const multipleValues = event.target.value.split(' ');
+    if (multipleValues && multipleValues.length) {
+      this.updateSelectedOptions(event, multipleValues);
+    }
   };
 
   // passed to Options onChange handler in AutocompleteSkin
@@ -192,17 +196,29 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
       !maxSelections ||
       (canMoreOptionsBeSelected && areFilteredOptionsAvailable)
     ) {
-      if (!selectedOption) return;
-      const option = selectedOption.trim();
-      const optionCanBeSelected =
-        (selectedOptions.indexOf(option) < 0 && !multipleSameSelections) ||
-        multipleSameSelections;
-
-      if (option && optionCanBeSelected && isOpen) {
-        const newSelectedOptions = _.concat(selectedOptions, option);
-        this.selectionChanged(newSelectedOptions, event);
-        this.setState({ selectedOptions: newSelectedOptions, isOpen: false });
+      if (!selectedOption || !selectedOption.length) return;
+      const option = _.isString(selectedOption) ? selectedOption.trim() : selectedOption;
+      let newSelectedOptions = [];
+      if (option && Array.isArray(option)) {
+        newSelectedOptions = selectedOptions;
+        option.forEach(item => {
+          const optionCanBeSelected =
+            (selectedOptions.indexOf(item) < 0 && !multipleSameSelections) ||
+            multipleSameSelections;
+          if (item && optionCanBeSelected && isOpen) {
+            newSelectedOptions = _.concat(newSelectedOptions, item);
+          }
+        });
+      } else {
+        const optionCanBeSelected =
+          (selectedOptions.indexOf(option) < 0 && !multipleSameSelections) ||
+          multipleSameSelections;
+        if (option && optionCanBeSelected && isOpen) {
+          newSelectedOptions = _.concat(selectedOptions, option);
+        }
       }
+      this.selectionChanged(newSelectedOptions, event);
+      this.setState({ selectedOptions: newSelectedOptions, isOpen: false });
     }
 
     this._setInputValue('');
@@ -334,13 +350,27 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
   };
 
   _setInputValue = (value: string) => {
-    const filteredValue = this._filterInvalidChars(value);
-    const filteredOptions = this._filterOptions(filteredValue);
-    this.setState({
-      isOpen: true,
-      inputValue: filteredValue,
-      filteredOptions,
-    });
+    const multipleValues = value.split(' ');
+    if (multipleValues && multipleValues.length > 1) {
+      let filteredOptions = [];
+      multipleValues.forEach(itemValue => {
+        const filteredValue = this._filterInvalidChars(itemValue);
+        filteredOptions = _.concat(filteredOptions, this._filterOptions(filteredValue));
+      });
+      this.setState({
+        isOpen: true,
+        inputValue: '',
+        filteredOptions,
+      });
+    } else {
+      const filteredValue = this._filterInvalidChars(value);
+      const filteredOptions = this._filterOptions(filteredValue);
+      this.setState({
+        isOpen: true,
+        inputValue: filteredValue,
+        filteredOptions,
+      });
+    }
   };
 }
 
diff --git a/stories/Autocomplete.stories.js b/stories/Autocomplete.stories.js
index c6a34eb5..d97316b7 100644
--- a/stories/Autocomplete.stories.js
+++ b/stories/Autocomplete.stories.js
@@ -129,7 +129,7 @@ storiesOf('Autocomplete', module)
         placeholder="Enter mnemonic..."
         maxSelections={12}
         maxVisibleOptions={5}
-        invalidCharsRegex={/[^a-zA-Z]/g}
+        invalidCharsRegex={/[^a-zA-Z\s]/g}
         onChange={(selectedOpts) => store.set({ selectedOpts })}
       />
     ))
@@ -155,7 +155,7 @@ storiesOf('Autocomplete', module)
                 options={OPTIONS}
                 maxSelections={12}
                 maxVisibleOptions={5}
-                invalidCharsRegex={/[^a-zA-Z]/g}
+                invalidCharsRegex={/[^a-zA-Z\s]/g}
                 onChange={(selectedOpts) => store.set({ selectedOpts })}
               />
             </div>
@@ -366,7 +366,7 @@ storiesOf('Autocomplete', module)
         placeholder="Enter mnemonic..."
         maxSelections={12}
         maxVisibleOptions={5}
-        invalidCharsRegex={/[^a-zA-Z]/g}
+        invalidCharsRegex={/[^a-zA-Z\s]/g}
         onChange={(selectedOpts) => store.set({ selectedOpts })}
       />
     ))
@@ -382,7 +382,7 @@ storiesOf('Autocomplete', module)
         placeholder="Enter mnemonic..."
         maxSelections={12}
         maxVisibleOptions={5}
-        invalidCharsRegex={/[^a-zA-Z]/g}
+        invalidCharsRegex={/[^a-zA-Z\s]/g}
         onChange={(selectedOpts) => store.set({ selectedOpts })}
       />
     ))
diff --git a/stories/Options.stories.js b/stories/Options.stories.js
index bc97b86b..8ff1b9f6 100644
--- a/stories/Options.stories.js
+++ b/stories/Options.stories.js
@@ -253,7 +253,7 @@ storiesOf('Options', module)
         placeholder="Enter mnemonic..."
         maxSelections={9}
         maxVisibleOptions={5}
-        invalidCharsRegex={/[^a-zA-Z]/g}
+        invalidCharsRegex={/[^a-zA-Z\s]/g}
         onChange={selectedOpts => store.set({ selectedOpts })}
       />
     ))
diff --git a/stories/ThemeProvider.stories.js b/stories/ThemeProvider.stories.js
index 96514646..494babc8 100644
--- a/stories/ThemeProvider.stories.js
+++ b/stories/ThemeProvider.stories.js
@@ -213,7 +213,7 @@ storiesOf('ThemeProvider', module)
               placeholder="Enter mnemonic..."
               maxSelections={12}
               maxVisibleOptions={20}
-              invalidCharsRegex={/[^a-zA-Z]/g}
+              invalidCharsRegex={/[^a-zA-Z\s]/g}
               skin={AutocompleteSkin}
               isOpeningUpward
             />
@@ -226,7 +226,7 @@ storiesOf('ThemeProvider', module)
               placeholder="Enter mnemonic..."
               maxSelections={12}
               maxVisibleOptions={20}
-              invalidCharsRegex={/[^a-zA-Z]/g}
+              invalidCharsRegex={/[^a-zA-Z\s]/g}
               skin={AutocompleteSkin}
             />
           </div>

From 14351d4dabfa367641cd389997d5191164f011f2 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Wed, 17 Mar 2021 05:24:17 -0600
Subject: [PATCH 159/244] DDW-603 - Enable pasting of wallet recovery phrase -
 improving parsing to handle only multiple values

---
 source/components/Autocomplete.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index 05a6baa1..7b395fa8 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -171,7 +171,7 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
   handleInputChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
     this._setInputValue(event.target.value);
     const multipleValues = event.target.value.split(' ');
-    if (multipleValues && multipleValues.length) {
+    if (multipleValues && multipleValues.length > 1) {
       this.updateSelectedOptions(event, multipleValues);
     }
   };

From 3549c742d86bd1df70c8d1d5412e534ff1b5150a Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Wed, 17 Mar 2021 05:43:34 -0600
Subject: [PATCH 160/244] DDW-603 - Enable pasting of wallet recovery phrase -
 skipping all values after false value

---
 source/components/Autocomplete.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index 7b395fa8..3df915de 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -199,13 +199,21 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
       if (!selectedOption || !selectedOption.length) return;
       const option = _.isString(selectedOption) ? selectedOption.trim() : selectedOption;
       let newSelectedOptions = [];
+      let skipValuesSelection = false;
       if (option && Array.isArray(option)) {
         newSelectedOptions = selectedOptions;
         option.forEach(item => {
           const optionCanBeSelected =
-            (selectedOptions.indexOf(item) < 0 && !multipleSameSelections) ||
+            (selectedOptions.indexOf(item) < 0 &&
+              newSelectedOptions.indexOf(item) < 0 &&
+              filteredOptions.indexOf(item) &&
+              !multipleSameSelections) ||
             multipleSameSelections;
-          if (item && optionCanBeSelected && isOpen) {
+          if (filteredOptions.indexOf(item) < 0) {
+            skipValuesSelection = true;
+            return;
+          }
+          if (item && optionCanBeSelected && isOpen && !skipValuesSelection) {
             newSelectedOptions = _.concat(newSelectedOptions, item);
           }
         });

From b5d9c2e67ca5c9a7ab5916a37c0013aeefd49c2d Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Wed, 17 Mar 2021 05:47:10 -0600
Subject: [PATCH 161/244] DDW-603 - Enable pasting of wallet recovery phrase -
 liner fixes

---
 source/components/Autocomplete.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index 3df915de..48a843db 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -134,11 +134,11 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
       // set Options scroll position to top on close
       this.optionsElement.current.scrollTop = 0;
     }
-    this.setState({ isOpen: !this.state.isOpen });
+    this.setState((prevState) => ({ isOpen: !prevState.isOpen }));
   };
 
   toggleMouseLocation = () =>
-    this.setState({ mouseIsOverOptions: !this.state.mouseIsOverOptions });
+    this.setState((prevState) => ({ mouseIsOverOptions: !prevState.mouseIsOverOptions }));
 
   handleAutocompleteClick = () => {
     const { inputElement } = this;
@@ -233,7 +233,7 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
   };
 
   removeOption = (index: number, event: SyntheticEvent<>) => {
-    const selectedOptions = this.state.selectedOptions;
+    const { selectedOptions } = this.state;
     _.pullAt(selectedOptions, index);
     this.selectionChanged(selectedOptions, event);
     this.setState({ selectedOptions });

From a459148615ddc05c2566a07f6be37e48ffe451c7 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Thu, 18 Mar 2021 03:29:44 -0600
Subject: [PATCH 162/244] DDW-603 - Enable pasting of wallet recovery phrase -
 fixes for recovery phase focus + review updates

---
 source/components/Autocomplete.js | 46 +++++++++++++++----------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index 48a843db..3b8dfd56 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -191,45 +191,42 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
       maxSelections != null ? selectedOptions.length < maxSelections : true;
     const areFilteredOptionsAvailable =
       filteredOptions && filteredOptions.length > 0;
-
+    let skipValueSelection = false;
     if (
       !maxSelections ||
       (canMoreOptionsBeSelected && areFilteredOptionsAvailable)
     ) {
       if (!selectedOption || !selectedOption.length) return;
       const option = _.isString(selectedOption) ? selectedOption.trim() : selectedOption;
-      let newSelectedOptions = [];
-      let skipValuesSelection = false;
+      let newSelectedOptions: Array<any> = [];
       if (option && Array.isArray(option)) {
-        newSelectedOptions = selectedOptions;
+        newSelectedOptions = [...selectedOptions];
         option.forEach(item => {
-          const optionCanBeSelected =
-            (selectedOptions.indexOf(item) < 0 &&
-              newSelectedOptions.indexOf(item) < 0 &&
-              filteredOptions.indexOf(item) &&
-              !multipleSameSelections) ||
-            multipleSameSelections;
-          if (filteredOptions.indexOf(item) < 0) {
-            skipValuesSelection = true;
+          const optionCanBeSelected = filteredOptions.includes(item) &&
+            !selectedOptions.includes(item) &&
+            !newSelectedOptions.includes(item);
+          if (!optionCanBeSelected && !skipValueSelection) {
+            this._setInputValue(item, true);
+            skipValueSelection = true;
             return;
           }
-          if (item && optionCanBeSelected && isOpen && !skipValuesSelection) {
-            newSelectedOptions = _.concat(newSelectedOptions, item);
+          if (item && optionCanBeSelected && isOpen && !skipValueSelection) {
+            newSelectedOptions.push(item);
           }
         });
       } else {
-        const optionCanBeSelected =
-          (selectedOptions.indexOf(option) < 0 && !multipleSameSelections) ||
-          multipleSameSelections;
+        const optionCanBeSelected = multipleSameSelections ||
+          !selectedOptions.includes(option);
         if (option && optionCanBeSelected && isOpen) {
-          newSelectedOptions = _.concat(selectedOptions, option);
+          newSelectedOptions.push(option);
         }
       }
       this.selectionChanged(newSelectedOptions, event);
       this.setState({ selectedOptions: newSelectedOptions, isOpen: false });
     }
-
-    this._setInputValue('');
+    if (!skipValueSelection) {
+      this._setInputValue('');
+    }
   };
 
   removeOption = (index: number, event: SyntheticEvent<>) => {
@@ -357,13 +354,13 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
     return filteredValue;
   };
 
-  _setInputValue = (value: string) => {
+  _setInputValue = (value: string, shouldFocus?: boolean) => {
     const multipleValues = value.split(' ');
     if (multipleValues && multipleValues.length > 1) {
-      let filteredOptions = [];
+      const filteredOptions = [];
       multipleValues.forEach(itemValue => {
         const filteredValue = this._filterInvalidChars(itemValue);
-        filteredOptions = _.concat(filteredOptions, this._filterOptions(filteredValue));
+        filteredOptions.push(this._filterOptions(filteredValue));
       });
       this.setState({
         isOpen: true,
@@ -378,6 +375,9 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
         inputValue: filteredValue,
         filteredOptions,
       });
+      setTimeout(() => {
+        if (shouldFocus) this.focus();
+      }, 0);
     }
   };
 }

From 11bc0b6f1c70c3d13b4137b549df437284518334 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Thu, 18 Mar 2021 15:41:12 -0600
Subject: [PATCH 163/244] DDW-603 - Enable pasting of wallet recovery phrase -
 review updates

---
 source/components/Autocomplete.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index 3b8dfd56..f9cd6cd0 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -198,11 +198,12 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
     ) {
       if (!selectedOption || !selectedOption.length) return;
       const option = _.isString(selectedOption) ? selectedOption.trim() : selectedOption;
-      let newSelectedOptions: Array<any> = [];
+      let newSelectedOptions: Array<string> = [];
       if (option && Array.isArray(option)) {
         newSelectedOptions = [...selectedOptions];
         option.forEach(item => {
-          const optionCanBeSelected = filteredOptions.includes(item) &&
+          const optionCanBeSelected = multipleSameSelections ||
+            filteredOptions.includes(item) &&
             !selectedOptions.includes(item) &&
             !newSelectedOptions.includes(item);
           if (!optionCanBeSelected && !skipValueSelection) {

From 4e160bacd0b40f3bc60a21b1db1b1e18ddd3eff8 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Thu, 18 Mar 2021 16:04:03 -0600
Subject: [PATCH 164/244] DDW-603 - Enable pasting of wallet recovery phrase -
 fixing single selection of words

---
 source/components/Autocomplete.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index f9cd6cd0..3ecd57f0 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -198,14 +198,14 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
     ) {
       if (!selectedOption || !selectedOption.length) return;
       const option = _.isString(selectedOption) ? selectedOption.trim() : selectedOption;
-      let newSelectedOptions: Array<string> = [];
+      const newSelectedOptions: Array<string> = [...selectedOptions];
       if (option && Array.isArray(option)) {
-        newSelectedOptions = [...selectedOptions];
         option.forEach(item => {
-          const optionCanBeSelected = multipleSameSelections ||
-            filteredOptions.includes(item) &&
+          const optionCanBeSelected = multipleSameSelections &&
+            filteredOptions.includes(item) ||
+            (filteredOptions.includes(item) &&
             !selectedOptions.includes(item) &&
-            !newSelectedOptions.includes(item);
+            !newSelectedOptions.includes(item));
           if (!optionCanBeSelected && !skipValueSelection) {
             this._setInputValue(item, true);
             skipValueSelection = true;

From 0e6f2ac296a28f36c812f20dcc349b87b7d67a28 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 19 Mar 2021 21:25:35 +0100
Subject: [PATCH 165/244] [DDW-603] Add changelog entry

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7524a804..66b8a539 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
+### Features
+
+- Enabled pasting of multiple words into Autocomplete ([PR 163](https://github.com/input-output-hk/react-polymorph/pull/163))
+
 ### Fixes
 
 - Fixed issues related to controlled/uncontrolled Tippy state ([PR 160](https://github.com/input-output-hk/react-polymorph/pull/160))

From 5dbc0f3449c5bdc85739a4fb1861af99f330b478 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 19 Mar 2021 21:26:37 +0100
Subject: [PATCH 166/244] 0.9.8-rc.12

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b0fb1164..70e4b5c1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.11",
+  "version": "0.9.8-rc.12",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 2e53b5b70556219a4908c7d2fbeda62b18326afe Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Fri, 19 Mar 2021 20:55:05 -0600
Subject: [PATCH 167/244] DDW-603 - Enable pasting of wallet recovery phrase -
 fixing multiple pasting of words

---
 source/components/Autocomplete.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index 3ecd57f0..c54b3fa2 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -169,9 +169,12 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
 
   // onChange handler for input element in AutocompleteSkin
   handleInputChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
-    this._setInputValue(event.target.value);
-    const multipleValues = event.target.value.split(' ');
-    if (multipleValues && multipleValues.length > 1) {
+    const { value } = event.target;
+    const multipleValues = value.split(' ');
+    const hasMultipleValues = multipleValues.length > 1;
+    this._setInputValue(value);
+    if (hasMultipleValues) {
+      this.open();
       this.updateSelectedOptions(event, multipleValues);
     }
   };
@@ -185,8 +188,9 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
     event: SyntheticEvent<>,
     selectedOption: any = null
   ) => {
-    const { maxSelections, multipleSameSelections } = this.props;
-    const { selectedOptions, filteredOptions, isOpen } = this.state;
+    const { maxSelections, multipleSameSelections, options } = this.props;
+    const { selectedOptions, isOpen } = this.state;
+    let { filteredOptions } = this.state;
     const canMoreOptionsBeSelected =
       maxSelections != null ? selectedOptions.length < maxSelections : true;
     const areFilteredOptionsAvailable =
@@ -200,6 +204,7 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
       const option = _.isString(selectedOption) ? selectedOption.trim() : selectedOption;
       const newSelectedOptions: Array<string> = [...selectedOptions];
       if (option && Array.isArray(option)) {
+        filteredOptions = options;
         option.forEach(item => {
           const optionCanBeSelected = multipleSameSelections &&
             filteredOptions.includes(item) ||
@@ -361,7 +366,7 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
       const filteredOptions = [];
       multipleValues.forEach(itemValue => {
         const filteredValue = this._filterInvalidChars(itemValue);
-        filteredOptions.push(this._filterOptions(filteredValue));
+        filteredOptions.push(...this._filterOptions(filteredValue));
       });
       this.setState({
         isOpen: true,

From 4f021fde68fd4dd7fd2460b80a473bb3bdf00381 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Tue, 23 Mar 2021 10:09:09 -0600
Subject: [PATCH 168/244] DDW-603 - Enable pasting of wallet recovery phrase -
 fixing multiple pasting of words - when there is not results

---
 source/components/Autocomplete.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index c54b3fa2..a50cb2a5 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -175,7 +175,9 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
     this._setInputValue(value);
     if (hasMultipleValues) {
       this.open();
-      this.updateSelectedOptions(event, multipleValues);
+      setTimeout(() => {
+        this.updateSelectedOptions(event, multipleValues);
+      }, 0);
     }
   };
 
@@ -363,15 +365,15 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
   _setInputValue = (value: string, shouldFocus?: boolean) => {
     const multipleValues = value.split(' ');
     if (multipleValues && multipleValues.length > 1) {
-      const filteredOptions = [];
+      let selectedOptions = [];
       multipleValues.forEach(itemValue => {
         const filteredValue = this._filterInvalidChars(itemValue);
-        filteredOptions.push(...this._filterOptions(filteredValue));
+        selectedOptions = [...selectedOptions, ...this._filterOptions(filteredValue)];
       });
       this.setState({
         isOpen: true,
         inputValue: '',
-        filteredOptions,
+        filteredOptions: Array.from(new Set(selectedOptions)),
       });
     } else {
       const filteredValue = this._filterInvalidChars(value);

From 7bd7a443e987ad4061ce77198e2973ea09c86592 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Wed, 24 Mar 2021 22:52:34 -0700
Subject: [PATCH 169/244] DDW-603 - Enable pasting of wallet recovery phrase -
 updates for max limit of words

---
 source/components/Autocomplete.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index a50cb2a5..bb790883 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -218,7 +218,10 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
             skipValueSelection = true;
             return;
           }
-          if (item && optionCanBeSelected && isOpen && !skipValueSelection) {
+          if (item &&
+            optionCanBeSelected &&
+            isOpen && !skipValueSelection &&
+            newSelectedOptions.length < maxSelections) {
             newSelectedOptions.push(item);
           }
         });

From f1852f7641b80cdcfcc51c749ee7f45cb5766c47 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Wed, 24 Mar 2021 22:57:59 -0700
Subject: [PATCH 170/244] DDW-603 - Enable pasting of wallet recovery phrase -
 updates for empty spaces between words

---
 source/components/Autocomplete.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index bb790883..e12f51e7 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -203,7 +203,8 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
       (canMoreOptionsBeSelected && areFilteredOptionsAvailable)
     ) {
       if (!selectedOption || !selectedOption.length) return;
-      const option = _.isString(selectedOption) ? selectedOption.trim() : selectedOption;
+      const option = _.isString(selectedOption) ?
+        selectedOption.trim() : selectedOption.filter(item => item);
       const newSelectedOptions: Array<string> = [...selectedOptions];
       if (option && Array.isArray(option)) {
         filteredOptions = options;

From 18336292634dd022260ff130515f348e675532a7 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Sun, 28 Mar 2021 21:33:18 -0700
Subject: [PATCH 171/244] DDW-603 - Enable pasting of wallet recovery phrase -
 updates for empty spaces between words

---
 source/components/Autocomplete.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index e12f51e7..07bd3be7 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -383,7 +383,7 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
       const filteredValue = this._filterInvalidChars(value);
       const filteredOptions = this._filterOptions(filteredValue);
       this.setState({
-        isOpen: true,
+        isOpen: !!value,
         inputValue: filteredValue,
         filteredOptions,
       });

From c49c6c4759fba5511325ee8b7c3d6d8bdac7e718 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Tue, 30 Mar 2021 17:47:27 -0300
Subject: [PATCH 172/244] [DDW-620] search props for Input component

---
 source/components/Input.js       | 13 +++++++++++--
 source/skins/simple/InputSkin.js | 10 ++++++++++
 stories/Input.stories.js         | 30 ++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/source/components/Input.js b/source/components/Input.js
index 019061a7..da614323 100644
--- a/source/components/Input.js
+++ b/source/components/Input.js
@@ -21,17 +21,20 @@ export type InputProps = {
   context: ThemeContextProp,
   disabled?: boolean,
   error?: string | Element<any>,
+  hasSearch?: boolean,
   inputRef?: RefObject,
-  showErrorState?: boolean,
   label?: string | Element<any>,
   maxLength?: number,
   minLength?: number,
   onChange?: Function,
+  onSearch?: Function,
   placeholder?: string,
   readOnly: boolean,
-  setError?: Function,
+  searchList: Array<string>,
   selectedOption?: any,
   selectionRenderer?: Function,
+  setError?: Function,
+  showErrorState?: boolean,
   skin?: ComponentType<any>,
   theme: ?Object, // will take precedence over theme in context if passed
   themeId: string,
@@ -91,6 +94,10 @@ class InputBase extends Component<InputProps, State> {
     if (onChange) onChange(this._processValue(event.target.value), event);
   };
 
+  onSearch = (value: string) => {
+    console.log('search: ', value);
+  };
+
   focus = () => {
     const { inputElement } = this;
     if (!inputElement.current) return;
@@ -150,6 +157,7 @@ class InputBase extends Component<InputProps, State> {
       theme,
       themeOverrides,
       onChange,
+      onSearch,
       error,
       maxLength,
       minLength,
@@ -164,6 +172,7 @@ class InputBase extends Component<InputProps, State> {
       <InputSkin
         error={error || this.state.error}
         onChange={this.onChange}
+        onSearch={this.onSearch}
         inputRef={this.inputElement}
         theme={this.state.composedTheme}
         {...rest}
diff --git a/source/skins/simple/InputSkin.js b/source/skins/simple/InputSkin.js
index 5568dcd3..62dc7cf7 100644
--- a/source/skins/simple/InputSkin.js
+++ b/source/skins/simple/InputSkin.js
@@ -33,6 +33,11 @@ export const InputSkin = (props: Props) => {
     />
   );
 
+  const renderInputWithSearch = (setFormFieldRef) => (
+    <div>COMING SOON</div>
+  );
+
+
   const useSelectionRenderer = (setFormFieldRef, option) => (
     <div className={props.theme[props.themeId].customValueWrapper}>
       {renderInput(setFormFieldRef)}
@@ -49,6 +54,11 @@ export const InputSkin = (props: Props) => {
     if (hasSelectionRenderer) {
       return useSelectionRenderer(setFormFieldRef, props.selectedOption);
     }
+    // check if user has passed the `hasSearch` prop
+    const { hasSearch} = props;
+    if (hasSearch) {
+      return renderInputWithSearch(setFormFieldRef);
+    }
     return renderInput(setFormFieldRef);
   };
 
diff --git a/stories/Input.stories.js b/stories/Input.stories.js
index 1eaa4dcb..50f944e2 100644
--- a/stories/Input.stories.js
+++ b/stories/Input.stories.js
@@ -65,6 +65,36 @@ storiesOf('Input', module)
     ))
   )
 
+  .add('with search',
+    withState({ value: '' }, store => (
+      <Input
+        autoFocus
+        label="With autoFocus"
+        value={store.state.value}
+        placeholder="autoFocus"
+        onChange={value => store.set({ value })}
+        hasSearch
+      />
+    ))
+  )
+
+  .add('with search - custom search',
+    withState({ value: '' }, store => (
+      <Input
+        autoFocus
+        label="With autoFocus"
+        value={store.state.value}
+        placeholder="autoFocus"
+        onChange={value => store.set({ value })}
+        hasSearch
+        onSearch={(value) => {
+          console.log('onSearch');
+          console.log('value', value);
+        }}
+      />
+    ))
+  )
+
   .add('disabled', () => (
     <Input
       disabled

From df724b8e6034ead5eeeb4fa3861ec3701b8d0a26 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 31 Mar 2021 14:11:44 -0300
Subject: [PATCH 173/244] [DDW-620] search props for Select component

---
 source/components/Input.js        | 13 ++-----------
 source/components/Select.js       |  2 ++
 source/skins/simple/InputSkin.js  | 10 ----------
 source/skins/simple/SelectSkin.js |  2 ++
 stories/Input.stories.js          | 30 ------------------------------
 stories/Select.stories.js         | 20 ++++++++++++++++++++
 6 files changed, 26 insertions(+), 51 deletions(-)

diff --git a/source/components/Input.js b/source/components/Input.js
index da614323..019061a7 100644
--- a/source/components/Input.js
+++ b/source/components/Input.js
@@ -21,20 +21,17 @@ export type InputProps = {
   context: ThemeContextProp,
   disabled?: boolean,
   error?: string | Element<any>,
-  hasSearch?: boolean,
   inputRef?: RefObject,
+  showErrorState?: boolean,
   label?: string | Element<any>,
   maxLength?: number,
   minLength?: number,
   onChange?: Function,
-  onSearch?: Function,
   placeholder?: string,
   readOnly: boolean,
-  searchList: Array<string>,
+  setError?: Function,
   selectedOption?: any,
   selectionRenderer?: Function,
-  setError?: Function,
-  showErrorState?: boolean,
   skin?: ComponentType<any>,
   theme: ?Object, // will take precedence over theme in context if passed
   themeId: string,
@@ -94,10 +91,6 @@ class InputBase extends Component<InputProps, State> {
     if (onChange) onChange(this._processValue(event.target.value), event);
   };
 
-  onSearch = (value: string) => {
-    console.log('search: ', value);
-  };
-
   focus = () => {
     const { inputElement } = this;
     if (!inputElement.current) return;
@@ -157,7 +150,6 @@ class InputBase extends Component<InputProps, State> {
       theme,
       themeOverrides,
       onChange,
-      onSearch,
       error,
       maxLength,
       minLength,
@@ -172,7 +164,6 @@ class InputBase extends Component<InputProps, State> {
       <InputSkin
         error={error || this.state.error}
         onChange={this.onChange}
-        onSearch={this.onSearch}
         inputRef={this.inputElement}
         theme={this.state.composedTheme}
         {...rest}
diff --git a/source/components/Select.js b/source/components/Select.js
index 661d5132..c5d2d0e9 100644
--- a/source/components/Select.js
+++ b/source/components/Select.js
@@ -20,11 +20,13 @@ type Props = {
   className?: string,
   context: ThemeContextProp,
   error?: string | Element<any>,
+  hasSearch?: boolean,
   label?: string | Element<any>,
   isOpeningUpward: boolean,
   onBlur?: Function,
   onChange?: Function,
   onFocus?: Function,
+  onSearch?: Function,
   optionRenderer?: Function,
   options: Array<any>,
   placeholder?: string,
diff --git a/source/skins/simple/InputSkin.js b/source/skins/simple/InputSkin.js
index 62dc7cf7..5568dcd3 100644
--- a/source/skins/simple/InputSkin.js
+++ b/source/skins/simple/InputSkin.js
@@ -33,11 +33,6 @@ export const InputSkin = (props: Props) => {
     />
   );
 
-  const renderInputWithSearch = (setFormFieldRef) => (
-    <div>COMING SOON</div>
-  );
-
-
   const useSelectionRenderer = (setFormFieldRef, option) => (
     <div className={props.theme[props.themeId].customValueWrapper}>
       {renderInput(setFormFieldRef)}
@@ -54,11 +49,6 @@ export const InputSkin = (props: Props) => {
     if (hasSelectionRenderer) {
       return useSelectionRenderer(setFormFieldRef, props.selectedOption);
     }
-    // check if user has passed the `hasSearch` prop
-    const { hasSearch} = props;
-    if (hasSearch) {
-      return renderInputWithSearch(setFormFieldRef);
-    }
     return renderInput(setFormFieldRef);
   };
 
diff --git a/source/skins/simple/SelectSkin.js b/source/skins/simple/SelectSkin.js
index a7d4b6fe..64b7436d 100644
--- a/source/skins/simple/SelectSkin.js
+++ b/source/skins/simple/SelectSkin.js
@@ -20,6 +20,7 @@ type Props = {
   getSelectedOption: Function,
   handleChange: Function,
   handleInputClick: Function,
+  hasSearch?: boolean,
   inputRef: ElementRef<'input'>,
   isOpen: boolean,
   isOpeningUpward: boolean,
@@ -27,6 +28,7 @@ type Props = {
   onBlur: Function,
   onChange: Function,
   onFocus: Function,
+  onSearch?: Function,
   options: Array<{
     isDisabled: boolean,
     value: any
diff --git a/stories/Input.stories.js b/stories/Input.stories.js
index 50f944e2..1eaa4dcb 100644
--- a/stories/Input.stories.js
+++ b/stories/Input.stories.js
@@ -65,36 +65,6 @@ storiesOf('Input', module)
     ))
   )
 
-  .add('with search',
-    withState({ value: '' }, store => (
-      <Input
-        autoFocus
-        label="With autoFocus"
-        value={store.state.value}
-        placeholder="autoFocus"
-        onChange={value => store.set({ value })}
-        hasSearch
-      />
-    ))
-  )
-
-  .add('with search - custom search',
-    withState({ value: '' }, store => (
-      <Input
-        autoFocus
-        label="With autoFocus"
-        value={store.state.value}
-        placeholder="autoFocus"
-        onChange={value => store.set({ value })}
-        hasSearch
-        onSearch={(value) => {
-          console.log('onSearch');
-          console.log('value', value);
-        }}
-      />
-    ))
-  )
-
   .add('disabled', () => (
     <Input
       disabled
diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index 2bf390c0..d24f426a 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -104,6 +104,26 @@ storiesOf('Select', module)
     ))
   )
 
+  .add('with search',
+    withState({ value: '' }, store => (
+      <Select
+        value={store.state.value}
+        onChange={value => store.set({ value })}
+        options={COUNTRIES}
+      />
+    ))
+  )
+
+  .add('with custom search',
+    withState({ value: '' }, store => (
+      <Select
+        value={store.state.value}
+        onChange={value => store.set({ value })}
+        options={COUNTRIES}
+      />
+    ))
+  )
+
   .add('with error',
     withState({ value: COUNTRIES[0].value }, store => (
       <Select

From 8d64d7f15347d055d7e9b407db62a502ea068b30 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 31 Mar 2021 14:15:07 -0300
Subject: [PATCH 174/244] [DDW-620] CHANGELOG entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66b8a539..431ddb3f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ vNext
 
 ### Features
 
+- Implemented the search functionality to the Dropdown component ([PR 165](https://github.com/input-output-hk/daedalus/pull/165))
 - Enabled pasting of multiple words into Autocomplete ([PR 163](https://github.com/input-output-hk/react-polymorph/pull/163))
 
 ### Fixes

From 0da029ba1d1d2090498a9b5910cc366fc41e6c3c Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 31 Mar 2021 17:44:24 -0300
Subject: [PATCH 175/244] [DDW-620] Basic filtering

---
 source/components/Options.js            | 39 +++++++++++++++++++++++--
 source/components/Select.js             |  7 +++--
 source/skins/simple/OptionsSkin.js      | 36 ++++++++++++++++++++---
 source/skins/simple/SelectSkin.js       |  4 +++
 source/themes/simple/SimpleOptions.scss | 14 +++++++++
 stories/Select.stories.js               | 15 ++++++++++
 6 files changed, 107 insertions(+), 8 deletions(-)

diff --git a/source/components/Options.js b/source/components/Options.js
index 024a6aa6..fec4aca8 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -12,6 +12,9 @@ import type {
   ElementRef
 } from 'react';
 
+// external libraries
+import { isFunction } from 'lodash';
+
 // internal utility functions
 import { createEmptyContext, withTheme } from './HOC/withTheme';
 import { composeTheme, addThemeId, didThemePropsChange } from '../utils/themes';
@@ -24,6 +27,7 @@ import type { ThemeContextProp } from './HOC/withTheme';
 type Props = {
   className?: String,
   context: ThemeContextProp,
+  hasSearch?: boolean,
   isOpen: boolean,
   isOpeningUpward: boolean,
   noOptionsArrow?: boolean,
@@ -33,6 +37,7 @@ type Props = {
   onBlur?: Function,
   onChange?: Function,
   onClose?: Function,
+  onSearch?: Function,
   optionHeight: ?number,
   options: Array<any>,
   optionRenderer?: Function,
@@ -40,6 +45,7 @@ type Props = {
   optionsMaxHeight?: number,
   render?: Function,
   resetOnClose: boolean,
+  searchHeight: ?number,
   // TODO: Why do we have two separate props for selection?
   selectedOption?: any,
   selectedOptions?: Array<any>,
@@ -56,7 +62,8 @@ type Props = {
 type State = {
   composedTheme: Object,
   highlightedOptionIndex: number,
-  isMouseOverOptions: boolean
+  isMouseOverOptions: boolean,
+  searchValue: string,
 };
 
 class OptionsBase extends Component<Props, State> {
@@ -75,6 +82,7 @@ class OptionsBase extends Component<Props, State> {
     optionHeight: 46,
     options: [],
     resetOnClose: false,
+    searchHeight: 52,
     theme: null,
     themeId: IDENTIFIERS.OPTIONS,
     themeOverrides: {},
@@ -180,6 +188,28 @@ class OptionsBase extends Component<Props, State> {
     this.close();
   };
 
+  handleSearch = (searchValue: string) => {
+    this.setState({
+      searchValue
+    });
+  }
+
+  getFilteredOptions = () => {
+    const { hasSearch, onSearch, options } = this.props;
+    const { searchValue } = this.state;
+    if (!hasSearch || !searchValue) {
+      return options;
+    }
+    if (hasSearch && isFunction(onSearch)) {
+      return onSearch(searchValue, options);
+    }
+    return options.filter((option) => {
+      const { label } = option;
+      const regex = new RegExp(searchValue, "i");
+      return regex.test(label);
+    });
+  }
+
   // returns an object containing props, theme, and method handlers
   // associated with rendering this.props.options, the user can call
   // this in the body of the renderOptions function
@@ -314,13 +344,15 @@ class OptionsBase extends Component<Props, State> {
       themeOverrides,
       toggleMouseLocation,
       onChange,
+      onSearch,
+      options,
       context,
       optionsRef,
       isOpen,
       ...rest
     } = this.props;
 
-    const { composedTheme, highlightedOptionIndex } = this.state;
+    const { composedTheme, highlightedOptionIndex, searchValue } = this.state;
 
     const OptionsSkin = skin || context.skins[IDENTIFIERS.OPTIONS];
 
@@ -333,11 +365,14 @@ class OptionsBase extends Component<Props, State> {
         isHighlightedOption={this.isHighlightedOption}
         isOpen={isOpen}
         isSelectedOption={this.isSelectedOption}
+        options={this.getFilteredOptions()}
         optionsRef={optionsRef}
+        searchValue={searchValue}
         setHighlightedOptionIndex={this.setHighlightedOptionIndex}
         targetRef={targetRef}
         theme={composedTheme}
         setMouseIsOverOptions={this._setMouseIsOverOptions}
+        onSearch={this.handleSearch}
         {...rest}
       />
     );
diff --git a/source/components/Select.js b/source/components/Select.js
index c5d2d0e9..a3f2ab0b 100644
--- a/source/components/Select.js
+++ b/source/components/Select.js
@@ -21,22 +21,23 @@ type Props = {
   context: ThemeContextProp,
   error?: string | Element<any>,
   hasSearch?: boolean,
-  label?: string | Element<any>,
   isOpeningUpward: boolean,
+  label?: string | Element<any>,
   onBlur?: Function,
   onChange?: Function,
   onFocus?: Function,
   onSearch?: Function,
+  optionHeight?: number,
   optionRenderer?: Function,
   options: Array<any>,
   placeholder?: string,
   selectionRenderer?: Function,
+  searchHeight?: number,
   skin?: ComponentType<any>,
   theme: ?Object, // will take precedence over theme in context if passed
   themeId: string,
   themeOverrides: Object,
   value: string,
-  optionHeight?: number
 };
 
 type State = {
@@ -159,6 +160,7 @@ class SelectBase extends Component<Props, State> {
       context,
       allowBlank,
       optionHeight,
+      searchHeight,
       ...rest
     } = this.props;
 
@@ -187,6 +189,7 @@ class SelectBase extends Component<Props, State> {
             toggleOpen={this.toggleOpen}
             toggleMouseLocation={this.toggleMouseLocation}
             optionHeight={optionHeight}
+            searchHeight={searchHeight}
             {...rest}
           />
         )}
diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index db5d7261..c7aa9905 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -8,15 +8,18 @@ import { isFunction, isObject } from 'lodash';
 
 // components
 import { Bubble } from '../../components/Bubble';
+import { Input } from '../../components/Input';
 import { ScrollBar } from '../../components/ScrollBar';
 
 // skins
 import { BubbleSkin } from './BubbleSkin';
+import { InputSkin } from './InputSkin';
 
 type Props = {
   getOptionProps: Function,
   getHighlightedOptionIndex: Function,
   handleClickOnOption: Function,
+  hasSearch?: boolean,
   isHighlightedOption: Function,
   isOpen: boolean,
   isOpeningUpward: boolean,
@@ -25,12 +28,15 @@ type Props = {
   noResults: boolean,
   noResultsMessage: string | Element<any>,
   noSelectedOptionCheckmark?: boolean,
+  onSearch: Function,
   optionHeight: number,
   optionRenderer: Function,
   options: Array<any>,
   optionsRef: ElementRef<*>,
   optionsMaxHeight: number,
   render: Function,
+  searchHeight: number,
+  searchValue: string,
   selectedOption: any,
   setHighlightedOptionIndex: Function,
   setMouseIsOverOptions?: (boolean) => void,
@@ -44,6 +50,7 @@ export const OptionsSkin = (props: Props) => {
     getOptionProps,
     getHighlightedOptionIndex,
     handleClickOnOption,
+    hasSearch,
     isHighlightedOption,
     isOpen,
     isOpeningUpward,
@@ -58,6 +65,7 @@ export const OptionsSkin = (props: Props) => {
     options,
     optionsRef,
     render,
+    searchHeight,
     setHighlightedOptionIndex,
     setMouseIsOverOptions,
     targetRef,
@@ -119,12 +127,31 @@ export const OptionsSkin = (props: Props) => {
     return option;
   };
 
+  const renderSearch = () => {
+    return (
+      <div className={theme[themeId].search}>
+        <Input
+          skin={InputSkin}
+          theme={theme}
+          value={props.searchValue}
+          onChange={props.onSearch}
+          autoFocus={true}
+        />
+      </div>
+    )
+  }
+
   const getScrollBarHeight = (): number => {
-    if (!options.length) return optionHeight;
-    if (optionsMaxHeight < options.length * optionHeight) {
-      return optionsMaxHeight;
+    let height = options.length
+      ? options.length * optionHeight
+      : optionHeight;
+    if (height > optionsMaxHeight) {
+      height = optionsMaxHeight;
+    }
+    if (hasSearch) {
+      height += searchHeight;
     }
-    return options.length * optionHeight;
+    return height;
   };
 
   // Enforce max height of options dropdown if necessary
@@ -158,6 +185,7 @@ export const OptionsSkin = (props: Props) => {
         onMouseLeave={() => setMouseIsOverOptions && setMouseIsOverOptions(false)}
       >
         <ScrollBar style={{ height: `${getScrollBarHeight()}px` }}>
+          {hasSearch && renderSearch()}
           {renderOptions()}
         </ScrollBar>
       </ul>
diff --git a/source/skins/simple/SelectSkin.js b/source/skins/simple/SelectSkin.js
index 64b7436d..322c333e 100644
--- a/source/skins/simple/SelectSkin.js
+++ b/source/skins/simple/SelectSkin.js
@@ -45,6 +45,7 @@ type Props = {
   toggleMouseLocation: Function,
   value: string,
   optionHeight: ?number,
+  searchHeight: ?number,
 };
 
 export const SelectSkin = (props: Props) => {
@@ -80,12 +81,14 @@ export const SelectSkin = (props: Props) => {
       <Options
         skin={OptionsSkin}
         theme={theme}
+        hasSearch={props.hasSearch}
         isOpen={props.isOpen}
         optionsRef={props.optionsRef}
         optionsMaxHeight={props.optionsMaxHeight}
         options={props.options}
         isOpeningUpward={props.isOpeningUpward}
         onChange={props.handleChange}
+        onSearch={props.onSearch}
         optionRenderer={props.optionRenderer}
         selectedOption={selectedOption}
         noResults={!props.options.length}
@@ -93,6 +96,7 @@ export const SelectSkin = (props: Props) => {
         toggleMouseLocation={props.toggleMouseLocation}
         toggleOpen={props.toggleOpen}
         optionHeight={props.optionHeight}
+        searchHeight={props.searchHeight}
       />
     </div>
   );
diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index fac507b3..6b148c06 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -21,6 +21,11 @@ $option-line-height: var(--rp-option-line-height, normal) !default;
 $option-padding: var(--rp-option-padding, 14px 20px) !default;
 $option-text-color: var(--rp-option-text-color, #5e6066) !default;
 $option-text-color-disabled: var(--rp-option-text-color-disabled, rgba(#5e6066, 0.5)) !default;
+$option-search-border-radius: var(--rp-option-search-border-radius, 0) !default;
+$option-search-border: var(--rp-option-search-border, none) !default;
+$option-search-box-shadow: var(--rp-option-search-box-shadow, 0 10px 10px -5px rgba(0, 0, 0, 0.12)) !default;
+$option-search-height: var(--rp-option-search-height, 50px) !default;
+
 
 // checkmark
 $option-checkmark-color: var(--rp-option-checkmark-color, #5e6066) !default;
@@ -125,6 +130,15 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
   }
 }
 
+.search {
+  input {
+    border-radius: $option-search-border-radius;
+    border: $option-search-border;
+    box-shadow: $option-search-box-shadow;
+    height: $option-search-height;
+  }
+}
+
 // BEGIN SPECIAL STATES ---------- //
 
 @if calc(#{$options-arrow} == true) {
diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index d24f426a..43ca5b63 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -110,6 +110,7 @@ storiesOf('Select', module)
         value={store.state.value}
         onChange={value => store.set({ value })}
         options={COUNTRIES}
+        hasSearch
       />
     ))
   )
@@ -120,6 +121,20 @@ storiesOf('Select', module)
         value={store.state.value}
         onChange={value => store.set({ value })}
         options={COUNTRIES}
+        hasSearch
+        onSearch={(searchValue: string) => {
+          const regex = new RegExp(searchValue, "i");
+          return COUNTRIES
+            .filter((option) => {
+              const { label, value } = option;
+              const regex = new RegExp(searchValue, "i");
+              return regex.test(label) || regex.test(value);
+            })
+            .map((option) => {
+              const { label, value } = option;
+              return `${label} (${value})`
+            })
+        }}
       />
     ))
   )

From c3ba6cfa4f40ef737b58e89bd564e66cd456fd75 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 31 Mar 2021 17:47:04 -0300
Subject: [PATCH 176/244] [DDW-620] Correct custom search function

---
 stories/Select.stories.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index 43ca5b63..95f08c31 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -132,7 +132,10 @@ storiesOf('Select', module)
             })
             .map((option) => {
               const { label, value } = option;
-              return `${label} (${value})`
+              return {
+                value,
+                label: `${label} (${value})`,
+              }
             })
         }}
       />

From eddf99b34d52c400b2cfbe72bcf1e1dc7d62834b Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 31 Mar 2021 17:49:18 -0300
Subject: [PATCH 177/244] [DDW-620] Includes important country, for testing
 purposes

---
 stories/Select.stories.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index 95f08c31..1b3c1078 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -30,10 +30,12 @@ import { IDENTIFIERS } from '../source/components';
 import { decorateWithSimpleTheme } from './helpers/theming';
 
 const COUNTRIES = [
+  { value: 'PT-br', label: 'Brazil' },
   { value: 'EN-gb', label: 'England' },
+  { value: 'PT-pt', label: 'Portugal' },
   { value: 'ES-es', label: 'Spain' },
   { value: 'TH-th', label: 'Thailand' },
-  { value: 'EN-en', label: 'USA' }
+  { value: 'EN-en', label: 'USA' },
 ];
 
 const COUNTRIES_WITH_FLAGS = [

From c3573d7725f5875bb3fdcc4740cb84fa8faac279 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 31 Mar 2021 18:03:13 -0300
Subject: [PATCH 178/244] [DDW-620] Integrate with `optionRenderer`

---
 stories/Select.stories.js | 52 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index 1b3c1078..cb2febe1 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -173,6 +173,58 @@ storiesOf('Select', module)
     ))
   )
 
+  .add('custom options template and search',
+    withState({ value: '' }, store => (
+      <Select
+        value={store.state.value}
+        onChange={value => store.set({ value })}
+        options={COUNTRIES_WITH_FLAGS}
+        optionRenderer={option => (
+          <div className={styles.customOption}>
+            <img src={option.flag} />
+            <span>{option.label}</span>
+          </div>
+          )}
+        optionHeight={56}
+        hasSearch
+      />
+    ))
+  )
+  .add('custom options template and custom search',
+    withState({ value: '' }, store => (
+      <Select
+        value={store.state.value}
+        onChange={value => store.set({ value })}
+        options={COUNTRIES_WITH_FLAGS}
+        optionRenderer={option => (
+          <div className={styles.customOption}>
+            <img src={option.flag} />
+            <span>{option.label}</span>
+          </div>
+        )}
+        optionHeight={56}
+        hasSearch
+        onSearch={(searchValue: string) => {
+          const regex = new RegExp(searchValue, "i");
+          return COUNTRIES_WITH_FLAGS
+            .filter((option) => {
+              const { label, value } = option;
+              const regex = new RegExp(searchValue, "i");
+              return regex.test(label) || regex.test(value);
+            })
+            .map((option) => {
+              const { label, value, ...rest } = option;
+              return {
+                ...rest,
+                value,
+                label: `${label} (${value})`,
+              }
+            })
+        }}
+      />
+    ))
+  )
+
   .add('isOpeningUpward',
     withState({ value: '' }, store => (
       <Select

From 66ffc6119e494cfbae03c1238c1dd4f82b8139e0 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Thu, 1 Apr 2021 12:32:10 -0300
Subject: [PATCH 179/244] [DDW-620] Magnifier icon

---
 .DS_Store                                     | Bin 0 -> 8196 bytes
 source/.DS_Store                              | Bin 0 -> 6148 bytes
 source/themes/.DS_Store                       | Bin 0 -> 10244 bytes
 source/themes/simple/SimpleOptions.scss       |  31 ++++++++++++++++--
 source/themes/simple/assets/cross.svg         |  17 ++++++++++
 source/themes/simple/assets/search.svg        |  15 +++++++++
 stories/Select.stories.js                     |   1 +
 stories/theme-customizations/.DS_Store        | Bin 0 -> 6148 bytes
 .../theme-customizations/Options.custom.scss  |   1 +
 stories/theme-customizations/assets/cross.svg |  17 ++++++++++
 .../theme-customizations/assets/search.svg    |  15 +++++++++
 11 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 source/.DS_Store
 create mode 100644 source/themes/.DS_Store
 create mode 100644 source/themes/simple/assets/cross.svg
 create mode 100644 source/themes/simple/assets/search.svg
 create mode 100644 stories/theme-customizations/.DS_Store
 create mode 100644 stories/theme-customizations/assets/cross.svg
 create mode 100644 stories/theme-customizations/assets/search.svg

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..7abf060de7487a9f1f1a8118ca72f5757d02033f
GIT binary patch
literal 8196
zcmeHMPiqrF6n~p++uhb`4uw__*@NPxXi{3GNFj~!P*4yeidadr+0X`)-H_cFYmDX-
z_~)cvMA4HUKoEKmMDXZE+KY(d7w}*YJ^AKO(wQV1Jc+b3W#`S#dvD%ves4O{*#dx;
zsyPXODF86=Au=|GRi8ri<mo99-g5$_hW=1mO=R+3xzb~)Iurwn0mXn~Krx^g_+J>n
zGn*76<lJXkRVxM*1N)KzvOie(5Siq%#U$N2u%cH0lsb0Pg6$Y-ptQJ5a@k@MHCQy}
zijui%{EDG5ckH*gU6RWdlgu47e)-UNWR2fYG#VYpx2QR2NhVdT7*GuKGC=O`I-G=6
zC_*6J-_L%$DC){yI&GIc8~cpW->=}|=!ZpF?+nye)`V{ZOD%K-6SDXdKmmNLeexzD
z&|co|ZzW>M&1?;AniNZ)@ygyVs=<~LzG$4_)4>4`^59FT^yO_)Ct~@z(81F26%q8)
zOL6u0ByJQ+m<?NsdhqCvU5yy?%ZvKfS2lm{Cr0emO7W)XZg~J)oTr0%$U>R6YKQ={
zA|g0)|L|Kx5Na!8+Su5B^nk680rtC@`5Su?_o<oBgr^Z)GkK^YR~52;M6`G^UFfwC
zF+Ts*$yL`lB7fmlA|8I`4I>^8YKSNg1-tH7`0vXnyHYCpK|H>xMWXu9@Q7g;W5&2~
zBeUk!GeIt>`Kes>I(fU43)XDjzU+CWPCI8`DHiJ4*u*){4RS@dP^HdAr+_BQSBtLW
z)l**0b$mKbhAB+bG|X&lveB47b9&l}H>a(}{Os(sm59&HHJhd}c|5VOv{GKb)41Eb
z_mq%|M<+jG;ShW8)X%Ub&C&7mB^yx^2T38NLZ92|){BW4e|>C+FBWMGF%4lhQW8cj
z3?t*Xm8rTV&t1iSf{`RTz!Z@s)3v-I^7u)wg^2UoyKn7{rfVD#X}Fbybp&IP4X}-8
z9c;wq!A*%d(BJg85^-%$EEd1FH^83pL~MgCC44|PKnhY-dzFDGo7fb&|DO;4{=ZkJ
zujZu~Pz)dgnx4+2Q=}0>M+EyVd{*!wh1j*2q%K$y6Vgww<0w1-FvPaSbxAH;Ori$M
VzyA=R&i}rDd8qTBuE+gS{Q)<g#P9$B

literal 0
HcmV?d00001

diff --git a/source/.DS_Store b/source/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..df6c5307858fac2fece484e3039bc484aaf07bef
GIT binary patch
literal 6148
zcmeHK!AiqG5S?vPsTHK&Jm%sD^yD>`c=9AYcr9(k78AD+d(Q`m{(|@i{(;~}h=L$U
z{RP33Z+6!<+cw}yRAyl2ZFXjMCXZ&fOGK(Y8MKI+L{x_|1`U`M!hY5zskoUfpfYP{
zI-_IgIb}=HG9e5I1HX*{{&pMGCrv4hVQ1fOa?<MbbviZ;tLaTyT&m-^m*^h+^@F#^
z+Qa(&UU}@`+p*(ep?)>Ql2pU4a!Mogn0ejN?bP=cd%D_u`s%5WpXzxht0TPn>W=HL
zVP6|!e@mg+AnPYRtrKi~zQb!xbuSkE#pd3Rc0Vo~hA?mOVtZvVUW36k%7CB=S{zZb
zNYKu!?=AN5a`-$aXqI2>V0DC7pK`7*@~0T!pDv`nVNt9wAPfitGX{8n2%(IT!`!0T
zI$$bzWPiZOf-&DE7(<7V!`vb~5M@(=HdVPRhO+6H4_#d3Ft=#aNtw!6$5mGDhN4V$
z%!ekNRAf=CFdz*03{>r7lh6PC^83G^Bu~PCFz~M!P(j>@+ju2+wl2LKpS2;h3uWQB
m+@eW=amTS4@KL-CH3DDA17PGZw}=^t{1GrTh!F;Ulz~q(#g^;<

literal 0
HcmV?d00001

diff --git a/source/themes/.DS_Store b/source/themes/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..22cf9415757ca71d126142b11286c54c2cc9b108
GIT binary patch
literal 10244
zcmeHMTWl0n82<lhp)*q|Qv}*sZW|hGQ;K#=0E?*G8@2(Yy1h}*vb!_T(b<`0XLbve
zVl_Vapb)Q#nkX?bMosYYB>G}BJm`Za*aQghV2Hl>;)@1+@;~RymTpUp`k-QFk~#l5
z|7FfO-+cd>J!b&`+w(>YAPN97-ArnWsJO|+?ChR%Nr9%CBvL%Y5@|P+o#PiOLIgqt
zLIgqtLIgqt{yPZJH=A8@rI2A6A`l`FA~1~rTOXoyGZ_!$q>y~+pn`7!NS2eDUsTsv
zg=934@jy-rNfx?Lgpw4Y7;G_6gp)oR_{9S`DWnJo3^pGa^o+p{1$poE{3v$^j0+i-
zAp#)+a}i*B_cCaMUg)t8&fLG(EV*IHxSgFT+f9*1KApR?;Jor>+f1wR2iEN9jHlw~
z6b2PA3MSZ)r7{OzX}|E|T#uRkYsaShpY@!Kdt)5)dzFkwEH(?l0}C=V9vjTmn3oOa
z`c*1xTb|$Cd>*B;@&yYkWLd71tK>%#qwZM3Px^VUJ(=6fTD?hsG!@kQT-TniCsPBK
zIX0p#?Qk7GX*p(&2U~_oF8c;8$8g8m-MnLX{5c6>P!vU0Mzq@T@lCPKP0_nIO*BQv
zW6iA_sov5$F`>vc>tgrz?9UuII(}^8_^S+6TJwUn5f+Q~bom<9N+xM|X*)&3WC10H
zl6Qg8t8?sLp+lfkR#rskLJ=KBt<?Jm2GtR5Nr5K4JL_An;|-WOkK~B9*dw5N(yr5+
zGnsub?b`W_<Be$5>7<>`+ezPSv+aa+)bxgY^RUlq!=9V-JGkSJMX^jbqG@^0eAuJ_
zt6+9gn5Us~deO2~YwuX!ylLzG9S`j6ovONRu~xlARfh>u$F~kxX0CtCGW^j!NiS_W
zhUFX_ELfhEvdumxnK7&Js-jFSuc@ulBl^msX?BRL)yYHolyxX?`A2vktJmo2K7$6a
z%QaXphW56sa7*19UEj+r9XXRqLzcO^zCl;}Jer4=3>=#_sA}Ki#0AZxA+UkRT2#H?
zPNqy-GZYcFd5fwK76h2ujzD?OHdP;@L$?e~(W}O$Kpm%^A7wr7OnUzAtm*L1`P|m%
z+hutVv$Yw9X-rks)GqJt(e+_(G?_DZj}b$)b8Muf-$i=<-pIn9)MZ${n+uE&aieBA
z1&dOF-mu6B%8|NwgP<PAwJzQ)S_*yQb-0s$N_4|MO8qPxfoI_aoP;;v9rzeNfiK`|
z_!iE=cQ6H4;0O2#et}=%8eB&SE3p<MxB^$=I*efpZp3Zah8@_6UHBj-upb9-5clH&
z97PKsLl4Js0*~Vp_zXUeFX7Ah3ciV_@dNx2&)}!{8J@*&@FHHq%XkHU#A|pRf0N3j
z<x-7QE9uf&sa^^OE*0}?kC;fYl;{9;R{D5_VDXTKZ<ZdB&aUnMQhHomBogBGrOQ^=
zHEd|1G?^xjU|Nw}Gbzh?TEcG5Q~qLS5samd9$BHTnlE+wiQwj8nXy!>5Z+OBtxN>h
z7Kr9LwO%G_YYRoQG14ScGHDWTs&_?V3Z;xzCYp^AS|mkvi`uGC>S*PnxlO%KVcDz!
zZ$}y<?Xs->4PL$l@54uM2F?;M&%<T-9)2b+B358E)({^V8&_jJHee&J#|^j{w_q!7
zC1!TvcI?I;+<|?>%t0K&VN9ceCOYWiA<UuA+4&?sg-_#icmhunOJBg(@f5x*_%+SC
z?jqlW#P?>iZszB)Dt+L>36+1IOBVK-AIJH8N<NL!Db`)dGYW~EW4q2l(iby=`Gi-9
zK!`wyK!`wyK#0ICgg}`XYm}Y;cg_F*|1C75aHt^yAp(CD0W9xKbhcB}e81}1S$mZ3
z{dBX7`ArJRL#SXbOwW(wslkrp`6&SDf^9Un#{<7fA$d5(@o<v=(4PU}{y*IR|A}*{
I|MUL;cltKjE&u=k

literal 0
HcmV?d00001

diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index 6b148c06..b77fd188 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -21,11 +21,15 @@ $option-line-height: var(--rp-option-line-height, normal) !default;
 $option-padding: var(--rp-option-padding, 14px 20px) !default;
 $option-text-color: var(--rp-option-text-color, #5e6066) !default;
 $option-text-color-disabled: var(--rp-option-text-color-disabled, rgba(#5e6066, 0.5)) !default;
+
+// search
 $option-search-border-radius: var(--rp-option-search-border-radius, 0) !default;
 $option-search-border: var(--rp-option-search-border, none) !default;
 $option-search-box-shadow: var(--rp-option-search-box-shadow, 0 10px 10px -5px rgba(0, 0, 0, 0.12)) !default;
 $option-search-height: var(--rp-option-search-height, 50px) !default;
-
+$option-search-icon-margin: var(--rp-option-icon-size, 19px) !default;
+$option-search-icon-size: var(--rp-option-icon-size, 15px) !default;
+$option-search-icon-url: var(--rp-option-icon-url, url("#{$theme-assets-path}/search.svg")) !default;
 
 // checkmark
 $option-checkmark-color: var(--rp-option-checkmark-color, #5e6066) !default;
@@ -134,8 +138,31 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
   input {
     border-radius: $option-search-border-radius;
     border: $option-search-border;
-    box-shadow: $option-search-box-shadow;
     height: $option-search-height;
+    padding-left: 55px;
+  }
+  :global {
+    .SimpleFormField_root {
+      box-shadow: $option-search-box-shadow;
+    }
+  }
+  &:before {
+    -webkit-mask: $option-search-icon-url;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: $option-search-icon-size $option-search-icon-size;
+    background-color: transparent;
+    background: black;
+    content: "";
+    display: inline-flex;
+    height: $option-search-icon-size;
+    margin: $option-search-icon-margin 0 0 $option-search-icon-margin;
+    mask: $option-search-icon-url;
+    mask-repeat: no-repeat;
+    mask-size: $option-search-icon-size $option-search-icon-size;
+    position: absolute;
+    vertical-align: middle;
+    width: $option-search-icon-size;
+    z-index: 1;
   }
 }
 
diff --git a/source/themes/simple/assets/cross.svg b/source/themes/simple/assets/cross.svg
new file mode 100644
index 00000000..81f30021
--- /dev/null
+++ b/source/themes/simple/assets/cross.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd">
+        <g stroke="#5E6066" stroke-width="4">
+            <g>
+                <g>
+                    <g>
+                        <g>
+                            <g>
+                                <path d="M0 0L16 16M16 0L0 16" transform="translate(-1096 -792) translate(40 564) translate(0 184) translate(2 2) translate(38 24) translate(1018 20)"/>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/source/themes/simple/assets/search.svg b/source/themes/simple/assets/search.svg
new file mode 100644
index 00000000..5f69edb1
--- /dev/null
+++ b/source/themes/simple/assets/search.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+    <g fill="none" fill-rule="evenodd" opacity=".65">
+        <g fill="#5E6066">
+            <g>
+                <g>
+                    <g>
+                        <g>
+                            <path d="M21.506 31.714c3.298-4.627 2.871-11.093-1.28-15.244-4.627-4.627-12.129-4.627-16.756 0-4.627 4.627-4.627 12.129 0 16.756 4.151 4.151 10.617 4.578 15.244 1.28L27.207 43 30 40.207l-8.494-8.493zm-4.073-1.28c3.085-3.085 3.085-8.087 0-11.171-3.084-3.085-8.086-3.085-11.17 0-3.085 3.084-3.085 8.086 0 11.17 3.084 3.085 8.086 3.085 11.17 0z" transform="translate(-80 -787) translate(40 564) translate(0 184) translate(2 2) translate(38 24)"/>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index cb2febe1..bd67b49e 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -190,6 +190,7 @@ storiesOf('Select', module)
       />
     ))
   )
+
   .add('custom options template and custom search',
     withState({ value: '' }, store => (
       <Select
diff --git a/stories/theme-customizations/.DS_Store b/stories/theme-customizations/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..4743f02e67d3e96d10b9294380c06b79dba33663
GIT binary patch
literal 6148
zcmeHK!AiqG5Z!HS-5_EQf<5lVTZI%_r3WF@dhjMh^q|rvwAesQN|RbNR`MJAM}C37
z<IL{1P^t$nB6cRszS-HCUG^pHWEo?;J?YmOt1!j{C}P2a<_p1b)D<Zh4<c7{q%85L
z$;c05e<hk6e~|%vcV*_W1fBs~et+-&C=8O+wm*2GSlTFW3L&<{wzzeN@zhPdbdt2a
z@iq3&y>#ds`y!6Rh3)y5!C>00?4HC?>IKnYtdfKN077oAf~X%)+wmmoCu$y74_KBZ
ztZt>6Wv!#bnmn*)HJP;<jhd|6&E{-oiM{>$@mcTw@hN+ry}W8>Iedglb_~wp4UDBt
zKDgs3jH5g7&vWLngv0<bKn$z_1Lo)xTWhda+9EMP4E&4%JRc+|qGK@EsE!V3@b?kN
zONc07<6Qz#8gvZi8es&4>r_CU%FPvn>vZr-6XzJrHR^Q6)ygoBS(%#~3RkOxU#f7%
z9gWly1H`~G14Z4fVEsS+{{Fw5L_K1F82DEV@KVR^v|&r8wytarYpn$Bfudksu5pn9
jhAPDni>0^<ss#KJ4M4|Wt`R&S^dq2XpoSRuRR%r*JDF0N

literal 0
HcmV?d00001

diff --git a/stories/theme-customizations/Options.custom.scss b/stories/theme-customizations/Options.custom.scss
index 3940dcac..da996cde 100644
--- a/stories/theme-customizations/Options.custom.scss
+++ b/stories/theme-customizations/Options.custom.scss
@@ -12,6 +12,7 @@ $option-bg-color: #d3fccc;
 $option-bg-color-highlighted: #94cff3;
 $option-padding: 14px 20px;
 $option-text-color: #204f66;
+$option-search-icon-url: url("./assets/search.svg");
 
 // arrow
 $options-arrow: true;
diff --git a/stories/theme-customizations/assets/cross.svg b/stories/theme-customizations/assets/cross.svg
new file mode 100644
index 00000000..81f30021
--- /dev/null
+++ b/stories/theme-customizations/assets/cross.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <g fill="none" fill-rule="evenodd">
+        <g stroke="#5E6066" stroke-width="4">
+            <g>
+                <g>
+                    <g>
+                        <g>
+                            <g>
+                                <path d="M0 0L16 16M16 0L0 16" transform="translate(-1096 -792) translate(40 564) translate(0 184) translate(2 2) translate(38 24) translate(1018 20)"/>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/stories/theme-customizations/assets/search.svg b/stories/theme-customizations/assets/search.svg
new file mode 100644
index 00000000..5f69edb1
--- /dev/null
+++ b/stories/theme-customizations/assets/search.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+    <g fill="none" fill-rule="evenodd" opacity=".65">
+        <g fill="#5E6066">
+            <g>
+                <g>
+                    <g>
+                        <g>
+                            <path d="M21.506 31.714c3.298-4.627 2.871-11.093-1.28-15.244-4.627-4.627-12.129-4.627-16.756 0-4.627 4.627-4.627 12.129 0 16.756 4.151 4.151 10.617 4.578 15.244 1.28L27.207 43 30 40.207l-8.494-8.493zm-4.073-1.28c3.085-3.085 3.085-8.087 0-11.171-3.084-3.085-8.086-3.085-11.17 0-3.085 3.084-3.085 8.086 0 11.17 3.084 3.085 8.086 3.085 11.17 0z" transform="translate(-80 -787) translate(40 564) translate(0 184) translate(2 2) translate(38 24)"/>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

From a8579906ec66eaff2c4bb72b6acf335894fc2c67 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Thu, 1 Apr 2021 10:28:08 -0700
Subject: [PATCH 180/244] DDW-602 - Improve PIN entry component UX

---
 source/components/NumericInput.js | 12 ++++++++++--
 stories/NumericInput.stories.js   | 11 +++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 477ae149..c282f579 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -22,6 +22,7 @@ type NumericInputValue = null | number | string | BigNumber.Instance;
 
 export type NumericInputProps = InputProps & {
   allowSigns?: boolean,
+  pinCodeSigns?: boolean,
   bigNumberFormat?: BigNumber.Format,
   decimalPlaces?: number,
   roundingMode?: BigNumber.RoundingMode,
@@ -42,6 +43,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
   static defaultProps = {
     allowSigns: true,
+    pinCodeSigns: true,
     readOnly: false,
     roundingMode: BigNumber.ROUND_FLOOR,
     value: null,
@@ -113,7 +115,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     caretPosition: number,
     fallbackInputValue?: ?string,
   } {
-    const { allowSigns, decimalPlaces, value } = this.props;
+    const { allowSigns, pinCodeSigns, decimalPlaces, value } = this.props;
     const { inputType, target } = event;
     const { decimalSeparator, groupSeparator } = this.getBigNumberFormat();
     const changedCaretPosition = target.selectionStart;
@@ -130,9 +132,15 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     const validInputNoSignsRegExp = new RegExp(
       `^([0-9${decimalSeparator}${groupSeparator}]+)?$`
     );
-    const validInputRegex = allowSigns
+    const validPinInputNoSignsRegExp = new RegExp(
+      `^([0-9]+)?$`
+    );
+    let validInputRegex = allowSigns
       ? validInputSignsRegExp
       : validInputNoSignsRegExp;
+    validInputRegex = pinCodeSigns
+        ? validInputRegex
+        : validPinInputNoSignsRegExp;
     const valueHasLeadingZero = /^0[1-9]/.test(valueToProcess);
 
     /**
diff --git a/stories/NumericInput.stories.js b/stories/NumericInput.stories.js
index 3852445d..f78f8434 100644
--- a/stories/NumericInput.stories.js
+++ b/stories/NumericInput.stories.js
@@ -141,6 +141,17 @@ storiesOf('NumericInput', module)
       />
     ))
   )
+  .add(
+    'allowSigns = false | PinCode',
+    withState({ value: null }, (store) => (
+      <NumericInput
+        value={store.state.value}
+        onChange={(value) => store.set({ value })}
+        allowSigns={false}
+        pinCodeSigns={false}
+      />
+    ))
+  )
   .add(
     'onFocus / onBlur',
     withState({ value: null, focused: false, blurred: false }, (store) => (

From 0c26bfd0e9f367ec1053406642825d389915159d Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Thu, 1 Apr 2021 10:43:23 -0700
Subject: [PATCH 181/244] DDW-602 - Improve PIN entry component UX - adding
 changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66b8a539..7ad93129 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ vNext
 
 ### Features
 
+- Improved PIN entry component UX ([PR 166](https://github.com/input-output-hk/react-polymorph/pull/166))
 - Enabled pasting of multiple words into Autocomplete ([PR 163](https://github.com/input-output-hk/react-polymorph/pull/163))
 
 ### Fixes

From fdf4b11a04da3dfaf0f71786d85933d2357a66c1 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Thu, 1 Apr 2021 15:23:06 -0300
Subject: [PATCH 182/244] [DDW-620] More specific CHANGELOG entry

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 431ddb3f..c5ea6f7f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ vNext
 
 ### Features
 
-- Implemented the search functionality to the Dropdown component ([PR 165](https://github.com/input-output-hk/daedalus/pull/165))
+- Implemented the search functionality to the Options component ([PR 165](https://github.com/input-output-hk/daedalus/pull/165))
 - Enabled pasting of multiple words into Autocomplete ([PR 163](https://github.com/input-output-hk/react-polymorph/pull/163))
 
 ### Fixes

From d75a8f1ff6570f6fde4b55c8b7b726066f4ad863 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Thu, 1 Apr 2021 15:23:17 -0300
Subject: [PATCH 183/244] [DDW-620] Remove DS_Store files

---
 .DS_Store                              | Bin 8196 -> 0 bytes
 source/.DS_Store                       | Bin 6148 -> 0 bytes
 source/themes/.DS_Store                | Bin 10244 -> 0 bytes
 stories/theme-customizations/.DS_Store | Bin 6148 -> 0 bytes
 4 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 .DS_Store
 delete mode 100644 source/.DS_Store
 delete mode 100644 source/themes/.DS_Store
 delete mode 100644 stories/theme-customizations/.DS_Store

diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index 7abf060de7487a9f1f1a8118ca72f5757d02033f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 8196
zcmeHMPiqrF6n~p++uhb`4uw__*@NPxXi{3GNFj~!P*4yeidadr+0X`)-H_cFYmDX-
z_~)cvMA4HUKoEKmMDXZE+KY(d7w}*YJ^AKO(wQV1Jc+b3W#`S#dvD%ves4O{*#dx;
zsyPXODF86=Au=|GRi8ri<mo99-g5$_hW=1mO=R+3xzb~)Iurwn0mXn~Krx^g_+J>n
zGn*76<lJXkRVxM*1N)KzvOie(5Siq%#U$N2u%cH0lsb0Pg6$Y-ptQJ5a@k@MHCQy}
zijui%{EDG5ckH*gU6RWdlgu47e)-UNWR2fYG#VYpx2QR2NhVdT7*GuKGC=O`I-G=6
zC_*6J-_L%$DC){yI&GIc8~cpW->=}|=!ZpF?+nye)`V{ZOD%K-6SDXdKmmNLeexzD
z&|co|ZzW>M&1?;AniNZ)@ygyVs=<~LzG$4_)4>4`^59FT^yO_)Ct~@z(81F26%q8)
zOL6u0ByJQ+m<?NsdhqCvU5yy?%ZvKfS2lm{Cr0emO7W)XZg~J)oTr0%$U>R6YKQ={
zA|g0)|L|Kx5Na!8+Su5B^nk680rtC@`5Su?_o<oBgr^Z)GkK^YR~52;M6`G^UFfwC
zF+Ts*$yL`lB7fmlA|8I`4I>^8YKSNg1-tH7`0vXnyHYCpK|H>xMWXu9@Q7g;W5&2~
zBeUk!GeIt>`Kes>I(fU43)XDjzU+CWPCI8`DHiJ4*u*){4RS@dP^HdAr+_BQSBtLW
z)l**0b$mKbhAB+bG|X&lveB47b9&l}H>a(}{Os(sm59&HHJhd}c|5VOv{GKb)41Eb
z_mq%|M<+jG;ShW8)X%Ub&C&7mB^yx^2T38NLZ92|){BW4e|>C+FBWMGF%4lhQW8cj
z3?t*Xm8rTV&t1iSf{`RTz!Z@s)3v-I^7u)wg^2UoyKn7{rfVD#X}Fbybp&IP4X}-8
z9c;wq!A*%d(BJg85^-%$EEd1FH^83pL~MgCC44|PKnhY-dzFDGo7fb&|DO;4{=ZkJ
zujZu~Pz)dgnx4+2Q=}0>M+EyVd{*!wh1j*2q%K$y6Vgww<0w1-FvPaSbxAH;Ori$M
VzyA=R&i}rDd8qTBuE+gS{Q)<g#P9$B

diff --git a/source/.DS_Store b/source/.DS_Store
deleted file mode 100644
index df6c5307858fac2fece484e3039bc484aaf07bef..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHK!AiqG5S?vPsTHK&Jm%sD^yD>`c=9AYcr9(k78AD+d(Q`m{(|@i{(;~}h=L$U
z{RP33Z+6!<+cw}yRAyl2ZFXjMCXZ&fOGK(Y8MKI+L{x_|1`U`M!hY5zskoUfpfYP{
zI-_IgIb}=HG9e5I1HX*{{&pMGCrv4hVQ1fOa?<MbbviZ;tLaTyT&m-^m*^h+^@F#^
z+Qa(&UU}@`+p*(ep?)>Ql2pU4a!Mogn0ejN?bP=cd%D_u`s%5WpXzxht0TPn>W=HL
zVP6|!e@mg+AnPYRtrKi~zQb!xbuSkE#pd3Rc0Vo~hA?mOVtZvVUW36k%7CB=S{zZb
zNYKu!?=AN5a`-$aXqI2>V0DC7pK`7*@~0T!pDv`nVNt9wAPfitGX{8n2%(IT!`!0T
zI$$bzWPiZOf-&DE7(<7V!`vb~5M@(=HdVPRhO+6H4_#d3Ft=#aNtw!6$5mGDhN4V$
z%!ekNRAf=CFdz*03{>r7lh6PC^83G^Bu~PCFz~M!P(j>@+ju2+wl2LKpS2;h3uWQB
m+@eW=amTS4@KL-CH3DDA17PGZw}=^t{1GrTh!F;Ulz~q(#g^;<

diff --git a/source/themes/.DS_Store b/source/themes/.DS_Store
deleted file mode 100644
index 22cf9415757ca71d126142b11286c54c2cc9b108..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 10244
zcmeHMTWl0n82<lhp)*q|Qv}*sZW|hGQ;K#=0E?*G8@2(Yy1h}*vb!_T(b<`0XLbve
zVl_Vapb)Q#nkX?bMosYYB>G}BJm`Za*aQghV2Hl>;)@1+@;~RymTpUp`k-QFk~#l5
z|7FfO-+cd>J!b&`+w(>YAPN97-ArnWsJO|+?ChR%Nr9%CBvL%Y5@|P+o#PiOLIgqt
zLIgqtLIgqt{yPZJH=A8@rI2A6A`l`FA~1~rTOXoyGZ_!$q>y~+pn`7!NS2eDUsTsv
zg=934@jy-rNfx?Lgpw4Y7;G_6gp)oR_{9S`DWnJo3^pGa^o+p{1$poE{3v$^j0+i-
zAp#)+a}i*B_cCaMUg)t8&fLG(EV*IHxSgFT+f9*1KApR?;Jor>+f1wR2iEN9jHlw~
z6b2PA3MSZ)r7{OzX}|E|T#uRkYsaShpY@!Kdt)5)dzFkwEH(?l0}C=V9vjTmn3oOa
z`c*1xTb|$Cd>*B;@&yYkWLd71tK>%#qwZM3Px^VUJ(=6fTD?hsG!@kQT-TniCsPBK
zIX0p#?Qk7GX*p(&2U~_oF8c;8$8g8m-MnLX{5c6>P!vU0Mzq@T@lCPKP0_nIO*BQv
zW6iA_sov5$F`>vc>tgrz?9UuII(}^8_^S+6TJwUn5f+Q~bom<9N+xM|X*)&3WC10H
zl6Qg8t8?sLp+lfkR#rskLJ=KBt<?Jm2GtR5Nr5K4JL_An;|-WOkK~B9*dw5N(yr5+
zGnsub?b`W_<Be$5>7<>`+ezPSv+aa+)bxgY^RUlq!=9V-JGkSJMX^jbqG@^0eAuJ_
zt6+9gn5Us~deO2~YwuX!ylLzG9S`j6ovONRu~xlARfh>u$F~kxX0CtCGW^j!NiS_W
zhUFX_ELfhEvdumxnK7&Js-jFSuc@ulBl^msX?BRL)yYHolyxX?`A2vktJmo2K7$6a
z%QaXphW56sa7*19UEj+r9XXRqLzcO^zCl;}Jer4=3>=#_sA}Ki#0AZxA+UkRT2#H?
zPNqy-GZYcFd5fwK76h2ujzD?OHdP;@L$?e~(W}O$Kpm%^A7wr7OnUzAtm*L1`P|m%
z+hutVv$Yw9X-rks)GqJt(e+_(G?_DZj}b$)b8Muf-$i=<-pIn9)MZ${n+uE&aieBA
z1&dOF-mu6B%8|NwgP<PAwJzQ)S_*yQb-0s$N_4|MO8qPxfoI_aoP;;v9rzeNfiK`|
z_!iE=cQ6H4;0O2#et}=%8eB&SE3p<MxB^$=I*efpZp3Zah8@_6UHBj-upb9-5clH&
z97PKsLl4Js0*~Vp_zXUeFX7Ah3ciV_@dNx2&)}!{8J@*&@FHHq%XkHU#A|pRf0N3j
z<x-7QE9uf&sa^^OE*0}?kC;fYl;{9;R{D5_VDXTKZ<ZdB&aUnMQhHomBogBGrOQ^=
zHEd|1G?^xjU|Nw}Gbzh?TEcG5Q~qLS5samd9$BHTnlE+wiQwj8nXy!>5Z+OBtxN>h
z7Kr9LwO%G_YYRoQG14ScGHDWTs&_?V3Z;xzCYp^AS|mkvi`uGC>S*PnxlO%KVcDz!
zZ$}y<?Xs->4PL$l@54uM2F?;M&%<T-9)2b+B358E)({^V8&_jJHee&J#|^j{w_q!7
zC1!TvcI?I;+<|?>%t0K&VN9ceCOYWiA<UuA+4&?sg-_#icmhunOJBg(@f5x*_%+SC
z?jqlW#P?>iZszB)Dt+L>36+1IOBVK-AIJH8N<NL!Db`)dGYW~EW4q2l(iby=`Gi-9
zK!`wyK!`wyK#0ICgg}`XYm}Y;cg_F*|1C75aHt^yAp(CD0W9xKbhcB}e81}1S$mZ3
z{dBX7`ArJRL#SXbOwW(wslkrp`6&SDf^9Un#{<7fA$d5(@o<v=(4PU}{y*IR|A}*{
I|MUL;cltKjE&u=k

diff --git a/stories/theme-customizations/.DS_Store b/stories/theme-customizations/.DS_Store
deleted file mode 100644
index 4743f02e67d3e96d10b9294380c06b79dba33663..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHK!AiqG5Z!HS-5_EQf<5lVTZI%_r3WF@dhjMh^q|rvwAesQN|RbNR`MJAM}C37
z<IL{1P^t$nB6cRszS-HCUG^pHWEo?;J?YmOt1!j{C}P2a<_p1b)D<Zh4<c7{q%85L
z$;c05e<hk6e~|%vcV*_W1fBs~et+-&C=8O+wm*2GSlTFW3L&<{wzzeN@zhPdbdt2a
z@iq3&y>#ds`y!6Rh3)y5!C>00?4HC?>IKnYtdfKN077oAf~X%)+wmmoCu$y74_KBZ
ztZt>6Wv!#bnmn*)HJP;<jhd|6&E{-oiM{>$@mcTw@hN+ry}W8>Iedglb_~wp4UDBt
zKDgs3jH5g7&vWLngv0<bKn$z_1Lo)xTWhda+9EMP4E&4%JRc+|qGK@EsE!V3@b?kN
zONc07<6Qz#8gvZi8es&4>r_CU%FPvn>vZr-6XzJrHR^Q6)ygoBS(%#~3RkOxU#f7%
z9gWly1H`~G14Z4fVEsS+{{Fw5L_K1F82DEV@KVR^v|&r8wytarYpn$Bfudksu5pn9
jhAPDni>0^<ss#KJ4M4|Wt`R&S^dq2XpoSRuRR%r*JDF0N


From 90d371d575c028b4d29679ad5c751e26d2211c0e Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Thu, 1 Apr 2021 11:53:41 -0700
Subject: [PATCH 184/244] DDW-602 - Improve PIN entry component UX - updating
 param name and regex

---
 source/components/NumericInput.js | 16 ++++++++--------
 stories/NumericInput.stories.js   |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index c282f579..62cb00b1 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -22,7 +22,7 @@ type NumericInputValue = null | number | string | BigNumber.Instance;
 
 export type NumericInputProps = InputProps & {
   allowSigns?: boolean,
-  pinCodeSigns?: boolean,
+  allowOnlyIntegers?: boolean,
   bigNumberFormat?: BigNumber.Format,
   decimalPlaces?: number,
   roundingMode?: BigNumber.RoundingMode,
@@ -43,7 +43,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
   static defaultProps = {
     allowSigns: true,
-    pinCodeSigns: true,
+    allowOnlyIntegers: false,
     readOnly: false,
     roundingMode: BigNumber.ROUND_FLOOR,
     value: null,
@@ -115,7 +115,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     caretPosition: number,
     fallbackInputValue?: ?string,
   } {
-    const { allowSigns, pinCodeSigns, decimalPlaces, value } = this.props;
+    const { allowSigns, allowOnlyIntegers, decimalPlaces, value } = this.props;
     const { inputType, target } = event;
     const { decimalSeparator, groupSeparator } = this.getBigNumberFormat();
     const changedCaretPosition = target.selectionStart;
@@ -132,15 +132,15 @@ class NumericInputBase extends Component<NumericInputProps, State> {
     const validInputNoSignsRegExp = new RegExp(
       `^([0-9${decimalSeparator}${groupSeparator}]+)?$`
     );
-    const validPinInputNoSignsRegExp = new RegExp(
-      `^([0-9]+)?$`
+    const validInputOnlyIntegersRegExp = new RegExp(
+      `^[0-9]*$`
     );
     let validInputRegex = allowSigns
       ? validInputSignsRegExp
       : validInputNoSignsRegExp;
-    validInputRegex = pinCodeSigns
-        ? validInputRegex
-        : validPinInputNoSignsRegExp;
+    validInputRegex = allowOnlyIntegers
+        ? validInputOnlyIntegersRegExp
+        : validInputRegex;
     const valueHasLeadingZero = /^0[1-9]/.test(valueToProcess);
 
     /**
diff --git a/stories/NumericInput.stories.js b/stories/NumericInput.stories.js
index f78f8434..43a3fecc 100644
--- a/stories/NumericInput.stories.js
+++ b/stories/NumericInput.stories.js
@@ -142,13 +142,13 @@ storiesOf('NumericInput', module)
     ))
   )
   .add(
-    'allowSigns = false | PinCode',
+    'allowOnlyIntegers',
     withState({ value: null }, (store) => (
       <NumericInput
         value={store.state.value}
         onChange={(value) => store.set({ value })}
         allowSigns={false}
-        pinCodeSigns={false}
+        allowOnlyIntegers
       />
     ))
   )

From 91f0b827c77ca824bb68eff9f26717fa22a65d8b Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Thu, 1 Apr 2021 11:58:44 -0700
Subject: [PATCH 185/244] DDW-602 - Improve PIN entry component UX - updating
 param name and regex

---
 source/components/NumericInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 62cb00b1..f6960244 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -133,7 +133,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       `^([0-9${decimalSeparator}${groupSeparator}]+)?$`
     );
     const validInputOnlyIntegersRegExp = new RegExp(
-      `^[0-9]*$`
+      `^([-])?([0-9]+)?$`
     );
     let validInputRegex = allowSigns
       ? validInputSignsRegExp

From 5dad67d2bf80239759c773b1423fae57f0839e71 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Thu, 1 Apr 2021 17:47:51 -0300
Subject: [PATCH 186/244] [DDW-620] Highlight search

---
 source/components/Options.js            | 10 +++++++---
 source/components/Select.js             |  1 +
 source/skins/simple/OptionsSkin.js      | 18 ++++++++++++++++--
 source/skins/simple/SelectSkin.js       |  5 ++++-
 source/themes/simple/SimpleOptions.scss |  9 +++++++--
 stories/Select.stories.js               | 14 +++++++++++---
 6 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/source/components/Options.js b/source/components/Options.js
index fec4aca8..d4f8bdca 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -28,6 +28,7 @@ type Props = {
   className?: String,
   context: ThemeContextProp,
   hasSearch?: boolean,
+  highlightSearch?: boolean,
   isOpen: boolean,
   isOpeningUpward: boolean,
   noOptionsArrow?: boolean,
@@ -195,7 +196,7 @@ class OptionsBase extends Component<Props, State> {
   }
 
   getFilteredOptions = () => {
-    const { hasSearch, onSearch, options } = this.props;
+    const { hasSearch, onSearch, options, highlightSearch, optionRenderer } = this.props;
     const { searchValue } = this.state;
     if (!hasSearch || !searchValue) {
       return options;
@@ -203,11 +204,12 @@ class OptionsBase extends Component<Props, State> {
     if (hasSearch && isFunction(onSearch)) {
       return onSearch(searchValue, options);
     }
-    return options.filter((option) => {
+    const filteredOptions = options.filter((option) => {
       const { label } = option;
-      const regex = new RegExp(searchValue, "i");
+      const regex = new RegExp(searchValue, 'i');
       return regex.test(label);
     });
+    return filteredOptions;
   }
 
   // returns an object containing props, theme, and method handlers
@@ -338,6 +340,7 @@ class OptionsBase extends Component<Props, State> {
   render() {
     // destructuring props ensures only the "...rest" get passed down
     const {
+      highlightSearch,
       skin,
       targetRef,
       theme,
@@ -361,6 +364,7 @@ class OptionsBase extends Component<Props, State> {
         getHighlightedOptionIndex={this.getHighlightedOptionIndex}
         getOptionProps={this.getOptionProps}
         handleClickOnOption={this.handleClickOnOption}
+        highlightSearch={highlightSearch}
         highlightedOptionIndex={highlightedOptionIndex}
         isHighlightedOption={this.isHighlightedOption}
         isOpen={isOpen}
diff --git a/source/components/Select.js b/source/components/Select.js
index a3f2ab0b..1249db68 100644
--- a/source/components/Select.js
+++ b/source/components/Select.js
@@ -21,6 +21,7 @@ type Props = {
   context: ThemeContextProp,
   error?: string | Element<any>,
   hasSearch?: boolean,
+  highlightSearch?: boolean,
   isOpeningUpward: boolean,
   label?: string | Element<any>,
   onBlur?: Function,
diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index c7aa9905..f0638872 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -20,6 +20,7 @@ type Props = {
   getHighlightedOptionIndex: Function,
   handleClickOnOption: Function,
   hasSearch?: boolean,
+  highlightSearch?: boolean,
   isHighlightedOption: Function,
   isOpen: boolean,
   isOpeningUpward: boolean,
@@ -51,6 +52,7 @@ export const OptionsSkin = (props: Props) => {
     getHighlightedOptionIndex,
     handleClickOnOption,
     hasSearch,
+    highlightSearch,
     isHighlightedOption,
     isOpen,
     isOpeningUpward,
@@ -66,6 +68,7 @@ export const OptionsSkin = (props: Props) => {
     optionsRef,
     render,
     searchHeight,
+    searchValue,
     setHighlightedOptionIndex,
     setMouseIsOverOptions,
     targetRef,
@@ -122,7 +125,18 @@ export const OptionsSkin = (props: Props) => {
       // call user's custom rendering logic
       return optionRenderer(option);
     } else if (isObject(option)) {
-      return <span className={theme[themeId].label}>{option.label}</span>;
+      let { label } = option;
+      // in case `highlightSearch` then `searchValue` is wrapped in an `em` tag
+      if (highlightSearch) {
+        const splitter = new RegExp(`(${searchValue})`,'i');
+        const parts = label.split(splitter);
+        for (let i = 1; i < parts.length; i += 2) {
+          if (parts[i].toLowerCase() === searchValue.toLowerCase())
+            parts[i] = <em>{parts[i]}</em>;
+          label = parts;
+        }
+      }
+      return <span className={theme[themeId].label}>{label}</span>;
     }
     return option;
   };
@@ -133,7 +147,7 @@ export const OptionsSkin = (props: Props) => {
         <Input
           skin={InputSkin}
           theme={theme}
-          value={props.searchValue}
+          value={searchValue}
           onChange={props.onSearch}
           autoFocus={true}
         />
diff --git a/source/skins/simple/SelectSkin.js b/source/skins/simple/SelectSkin.js
index 322c333e..9f8aac2c 100644
--- a/source/skins/simple/SelectSkin.js
+++ b/source/skins/simple/SelectSkin.js
@@ -21,6 +21,7 @@ type Props = {
   handleChange: Function,
   handleInputClick: Function,
   hasSearch?: boolean,
+  highlightSearch?: boolean,
   inputRef: ElementRef<'input'>,
   isOpen: boolean,
   isOpeningUpward: boolean,
@@ -82,7 +83,9 @@ export const SelectSkin = (props: Props) => {
         skin={OptionsSkin}
         theme={theme}
         hasSearch={props.hasSearch}
-        isOpen={props.isOpen}
+        highlightSearch={props.highlightSearch}
+        isOpen1={props.isOpen}
+        isOpen
         optionsRef={props.optionsRef}
         optionsMaxHeight={props.optionsMaxHeight}
         options={props.options}
diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index b77fd188..94d39115 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -30,6 +30,8 @@ $option-search-height: var(--rp-option-search-height, 50px) !default;
 $option-search-icon-margin: var(--rp-option-icon-size, 19px) !default;
 $option-search-icon-size: var(--rp-option-icon-size, 15px) !default;
 $option-search-icon-url: var(--rp-option-icon-url, url("#{$theme-assets-path}/search.svg")) !default;
+$option-search-icon-color: var(--rp-option-icon-url, rgba(94, 96, 102, 65%)) !default;
+$option-search-highlight-background-color: var(--rp-option-icon-url, #f2a218) !default;
 
 // checkmark
 $option-checkmark-color: var(--rp-option-checkmark-color, #5e6066) !default;
@@ -132,6 +134,10 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
     color: $option-text-color-disabled;
     cursor: $option-cursor-disabled;
   }
+
+  em {
+    background-color: $option-search-highlight-background-color;
+  }
 }
 
 .search {
@@ -150,8 +156,7 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
     -webkit-mask: $option-search-icon-url;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: $option-search-icon-size $option-search-icon-size;
-    background-color: transparent;
-    background: black;
+    background: $option-search-icon-color;
     content: "";
     display: inline-flex;
     height: $option-search-icon-size;
diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index bd67b49e..078cf653 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -111,8 +111,16 @@ storiesOf('Select', module)
       <Select
         value={store.state.value}
         onChange={value => store.set({ value })}
-        options={COUNTRIES}
+        options={[
+          ...COUNTRIES.slice(0,1),
+          {
+            ...COUNTRIES[2],
+            label: 'The United Kingdom of Great Britain',
+          },
+          ...COUNTRIES.slice(2)
+        ]}
         hasSearch
+        highlightSearch
       />
     ))
   )
@@ -137,8 +145,8 @@ storiesOf('Select', module)
               return {
                 value,
                 label: `${label} (${value})`,
-              }
-            })
+              };
+            });
         }}
       />
     ))

From a4852d2a815c1cdbfd9a67d17507032bc9c3f064 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Thu, 1 Apr 2021 17:53:34 -0300
Subject: [PATCH 187/244] [DDW-620] Highlight search - small adjustments

---
 source/skins/simple/OptionsSkin.js | 2 +-
 source/skins/simple/SelectSkin.js  | 3 +--
 stories/Select.stories.js          | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index f0638872..d3d05776 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -127,7 +127,7 @@ export const OptionsSkin = (props: Props) => {
     } else if (isObject(option)) {
       let { label } = option;
       // in case `highlightSearch` then `searchValue` is wrapped in an `em` tag
-      if (highlightSearch) {
+      if (highlightSearch !== false) {
         const splitter = new RegExp(`(${searchValue})`,'i');
         const parts = label.split(splitter);
         for (let i = 1; i < parts.length; i += 2) {
diff --git a/source/skins/simple/SelectSkin.js b/source/skins/simple/SelectSkin.js
index 9f8aac2c..f9945b4c 100644
--- a/source/skins/simple/SelectSkin.js
+++ b/source/skins/simple/SelectSkin.js
@@ -84,8 +84,7 @@ export const SelectSkin = (props: Props) => {
         theme={theme}
         hasSearch={props.hasSearch}
         highlightSearch={props.highlightSearch}
-        isOpen1={props.isOpen}
-        isOpen
+        isOpen={props.isOpen}
         optionsRef={props.optionsRef}
         optionsMaxHeight={props.optionsMaxHeight}
         options={props.options}
diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index 078cf653..fee2104e 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -120,7 +120,6 @@ storiesOf('Select', module)
           ...COUNTRIES.slice(2)
         ]}
         hasSearch
-        highlightSearch
       />
     ))
   )

From 974206c381673b5e614df6b2ca59bee97ba862dd Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Fri, 2 Apr 2021 00:22:26 -0700
Subject: [PATCH 188/244] DDW-602 - Improve PIN entry component UX - updating
 stories

---
 stories/NumericInput.stories.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/stories/NumericInput.stories.js b/stories/NumericInput.stories.js
index 43a3fecc..633dfcbd 100644
--- a/stories/NumericInput.stories.js
+++ b/stories/NumericInput.stories.js
@@ -132,7 +132,7 @@ storiesOf('NumericInput', module)
     ))
   )
   .add(
-    'allowSigns = false',
+    'allowSigns = false | allowOnlyIntegers = false',
     withState({ value: null }, (store) => (
       <NumericInput
         value={store.state.value}
@@ -142,7 +142,17 @@ storiesOf('NumericInput', module)
     ))
   )
   .add(
-    'allowOnlyIntegers',
+    'allowSigns = true | allowOnlyIntegers = false',
+    withState({ value: null }, (store) => (
+      <NumericInput
+        value={store.state.value}
+        onChange={(value) => store.set({ value })}
+        allowOnlyIntegers={false}
+      />
+    ))
+  )
+  .add(
+    'allowSigns = false | allowOnlyIntegers = true',
     withState({ value: null }, (store) => (
       <NumericInput
         value={store.state.value}

From 8dea597540ed65faa01e75c358907324c39e6f6b Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Fri, 2 Apr 2021 00:46:42 -0700
Subject: [PATCH 189/244] DDW-602 - Improve PIN entry component UX - updating
 integer formatting logic

---
 source/components/NumericInput.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index f6960244..dac76d7d 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -334,14 +334,16 @@ class NumericInputBase extends Component<NumericInputProps, State> {
   }
 
   valueToFormattedString(number: NumericInputValue) {
-    const { bigNumberFormat, decimalPlaces, roundingMode } = this.props;
+    const { bigNumberFormat, decimalPlaces, roundingMode, allowOnlyIntegers } = this.props;
     const debugSetting = BigNumber.DEBUG;
     if (BigNumber.isBigNumber(number) && number.isNaN()) return '';
     try {
       BigNumber.DEBUG = true;
-      return new BigNumber(number).toFormat(decimalPlaces, roundingMode, {
+      return allowOnlyIntegers ?
+        new BigNumber(number).toString()
+        : new BigNumber(number).toFormat(decimalPlaces, roundingMode, {
         ...BigNumber.config().FORMAT, // defaults
-        ...bigNumberFormat, // custom overrides
+        ...bigNumberFormat, // custom overrides;
       });
     } catch (e) {
       return '';

From 4d17913b873ee9af03c4ffbfba6bff61a015f830 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 2 Apr 2021 17:11:15 +0200
Subject: [PATCH 190/244] [DDW-588] Refuse inserts over decimal separator

---
 source/components/NumericInput.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 477ae149..53e7c5ee 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -213,6 +213,19 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       newCaretPosition = newValue.indexOf(decimalSeparator) + 1;
     }
 
+    // Case: Decimal separator was replaced with a number
+    if (
+      hadDecimalSeparatorBefore &&
+      newNumberOfDecimalSeparators === 0 &&
+      isInsert
+    ) {
+      return {
+        caretPosition: changedCaretPosition - 1,
+        fallbackInputValue,
+        value,
+      };
+    }
+
     /**
      * ========= PROCESS CLEANED INPUT =============
      */

From 8e513d02a28f9a1cfd9849d6a50401a5162c7d51 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 2 Apr 2021 17:19:17 +0200
Subject: [PATCH 191/244] [DDW-588] Add changelog entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66b8a539..c46e5e1d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ vNext
 
 ### Fixes
 
+- Fixed an issue related to Numeric Input when entering numbers after having selected the decimal separator ([PR 167](https://github.com/input-output-hk/react-polymorph/pull/167))
 - Fixed issues related to controlled/uncontrolled Tippy state ([PR 160](https://github.com/input-output-hk/react-polymorph/pull/160))
 - Fixed `NumericInput` to support DEBUG mode ([PR 159](https://github.com/input-output-hk/react-polymorph/pull/159))
 

From 93174b229349cff31755cd1491aef1a9e1328f66 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Sun, 4 Apr 2021 11:04:35 -0700
Subject: [PATCH 192/244] DDW-602 - Improve PIN entry component UX - updating
 integer formatting logic

---
 source/components/NumericInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index dac76d7d..a347640f 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -133,7 +133,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
       `^([0-9${decimalSeparator}${groupSeparator}]+)?$`
     );
     const validInputOnlyIntegersRegExp = new RegExp(
-      `^([-])?([0-9]+)?$`
+      `^([0-9]+)?$`
     );
     let validInputRegex = allowSigns
       ? validInputSignsRegExp

From 61c4426185091a950aa425e6a625030b6d459fbf Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 5 Apr 2021 10:57:20 +0200
Subject: [PATCH 193/244] 0.9.8-rc.13

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 70e4b5c1..2f86cd7c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.12",
+  "version": "0.9.8-rc.13",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From c3e94a0f6eb871f7c5606e65e6830ef3535f447f Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 5 Apr 2021 11:00:55 +0200
Subject: [PATCH 194/244] 0.9.8-rc.14

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2f86cd7c..1d8eff7f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.13",
+  "version": "0.9.8-rc.14",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 1d85aca2f111c28c31490b73c15e03f76af03806 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Mon, 5 Apr 2021 15:03:26 -0300
Subject: [PATCH 195/244] [DDW-620] Ignores DS_Store files

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index 4abfade2..92b003a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,3 +42,6 @@ jspm_packages
 
 # Editors
 .idea
+
+# OSX
+.DS_Store

From 1d245b6ce19771cc5b2253e0942c251a2df5c2cd Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Mon, 5 Apr 2021 15:05:34 -0300
Subject: [PATCH 196/244] [DDW-620] Remove incorrect tip color when search is
 active

---
 source/skins/simple/OptionsSkin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index d3d05776..333ca1fe 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -77,7 +77,7 @@ export const OptionsSkin = (props: Props) => {
   } = props;
 
   const highlightedOptionIndex = getHighlightedOptionIndex();
-  const isFirstOptionHighlighted = highlightedOptionIndex === 0;
+  const isFirstOptionHighlighted = !hasSearch && highlightedOptionIndex === 0;
   const sortedOptions = isOpeningUpward ? options.slice().reverse() : options;
 
   const renderOptions = () => {

From c7e055cccb98e6fd5ae27066be31848ab6919808 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Mon, 5 Apr 2021 20:15:30 +0200
Subject: [PATCH 197/244] [DDW-588] Re-enable typing after clearing numeric
 input

---
 source/components/NumericInput.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index 53e7c5ee..491e8dbb 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -215,6 +215,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
     // Case: Decimal separator was replaced with a number
     if (
+      value != null &&
       hadDecimalSeparatorBefore &&
       newNumberOfDecimalSeparators === 0 &&
       isInsert

From 2bc171e7bc4791f76285dbda1a66ff730d5184ab Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Mon, 5 Apr 2021 15:51:38 -0300
Subject: [PATCH 198/244] [DDW-620] Focus search input on open

---
 source/components/Options.js       | 20 +++++++++++++++++---
 source/skins/simple/OptionsSkin.js |  4 +++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/source/components/Options.js b/source/components/Options.js
index d4f8bdca..dfa67059 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -14,6 +14,7 @@ import type {
 
 // external libraries
 import { isFunction } from 'lodash';
+import createRef from 'create-react-ref/lib/createRef';
 
 // internal utility functions
 import { createEmptyContext, withTheme } from './HOC/withTheme';
@@ -95,6 +96,8 @@ class OptionsBase extends Component<Props, State> {
 
     const { context, themeId, theme, themeOverrides } = props;
 
+    this.searchInputRef = createRef();
+
     this.state = {
       composedTheme: composeTheme(
         addThemeId(theme || context.theme, themeId),
@@ -115,9 +118,9 @@ class OptionsBase extends Component<Props, State> {
   componentDidUpdate(prevProps: Props) {
     if (prevProps !== this.props) {
       if (!prevProps.isOpen && this.props.isOpen) {
-        document.addEventListener('keydown', this._handleKeyDown, false);
+        this.onOpen();
       } else if (prevProps.isOpen && !this.props.isOpen) {
-        document.removeEventListener('keydown', this._handleKeyDown, false);
+        this.onClose();
       }
       didThemePropsChange(prevProps, this.props, this.setState.bind(this));
     }
@@ -127,6 +130,16 @@ class OptionsBase extends Component<Props, State> {
     document.removeEventListener('keydown', this._handleKeyDown, false);
   }
 
+  onOpen = () => {
+    document.addEventListener('keydown', this._handleKeyDown, false);
+    const { current: input } = this.searchInputRef;
+    if (input && input.focus) input.focus();
+  }
+
+  onClose = () => {
+    document.removeEventListener('keydown', this._handleKeyDown, false);
+  }
+
   close = () => {
     const { isOpen, onClose, resetOnClose, toggleOpen } = this.props;
     if (isOpen && toggleOpen) toggleOpen();
@@ -250,7 +263,7 @@ class OptionsBase extends Component<Props, State> {
   // ========= PRIVATE HELPERS =========
 
   _handleSelectionOnKeyDown = (event: SyntheticKeyboardEvent<>) => {
-    const { options } = this.props;
+    const options = this.getFilteredOptions();
     if (options.length) {
       const { isOpeningUpward } = this.props;
       const currentIndex = this.state.highlightedOptionIndex;
@@ -371,6 +384,7 @@ class OptionsBase extends Component<Props, State> {
         isSelectedOption={this.isSelectedOption}
         options={this.getFilteredOptions()}
         optionsRef={optionsRef}
+        searchInputRef={this.searchInputRef}
         searchValue={searchValue}
         setHighlightedOptionIndex={this.setHighlightedOptionIndex}
         targetRef={targetRef}
diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index 333ca1fe..a25b27f6 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import type { Element, ElementRef } from 'react';
+import type { Element, ElementRef, RefObject } from 'react';
 
 // external libraries
 import classnames from 'classnames';
@@ -37,6 +37,7 @@ type Props = {
   optionsMaxHeight: number,
   render: Function,
   searchHeight: number,
+  searchInputRef?: RefObject,
   searchValue: string,
   selectedOption: any,
   setHighlightedOptionIndex: Function,
@@ -150,6 +151,7 @@ export const OptionsSkin = (props: Props) => {
           value={searchValue}
           onChange={props.onSearch}
           autoFocus={true}
+          inputRef={props.searchInputRef || null}
         />
       </div>
     )

From 41a3769d3b5f5c0c57c5ed01727b2d3cea93f7a8 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Mon, 5 Apr 2021 16:16:23 -0300
Subject: [PATCH 199/244] [DDW-620] Selects search input text on open

---
 source/components/Options.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/source/components/Options.js b/source/components/Options.js
index dfa67059..1cf753bf 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -133,8 +133,11 @@ class OptionsBase extends Component<Props, State> {
   onOpen = () => {
     document.addEventListener('keydown', this._handleKeyDown, false);
     const { current: input } = this.searchInputRef;
-    if (input && input.focus) input.focus();
-  }
+    if (input) {
+      input.focus && input.focus();
+      input.select && input.select();
+    }
+  };
 
   onClose = () => {
     document.removeEventListener('keydown', this._handleKeyDown, false);

From 58ae43054476ca2f4e218dba256c8811a40c1463 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Mon, 5 Apr 2021 17:25:17 -0300
Subject: [PATCH 200/244] `rtl` support

---
 source/themes/simple/SimpleOptions.scss | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index 94d39115..1a02c87e 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -27,11 +27,12 @@ $option-search-border-radius: var(--rp-option-search-border-radius, 0) !default;
 $option-search-border: var(--rp-option-search-border, none) !default;
 $option-search-box-shadow: var(--rp-option-search-box-shadow, 0 10px 10px -5px rgba(0, 0, 0, 0.12)) !default;
 $option-search-height: var(--rp-option-search-height, 50px) !default;
-$option-search-icon-margin: var(--rp-option-icon-size, 19px) !default;
-$option-search-icon-size: var(--rp-option-icon-size, 15px) !default;
-$option-search-icon-url: var(--rp-option-icon-url, url("#{$theme-assets-path}/search.svg")) !default;
-$option-search-icon-color: var(--rp-option-icon-url, rgba(94, 96, 102, 65%)) !default;
-$option-search-highlight-background-color: var(--rp-option-icon-url, #f2a218) !default;
+$option-search-padding: var(--rp-option-search-padding, 55px) !default;
+$option-search-icon-margin: var(--rp-option-search-icon-size, 19px) !default;
+$option-search-icon-size: var(--rp-option-search-icon-size, 15px) !default;
+$option-search-icon-url: var(--rp-option-search-icon-url, url("#{$theme-assets-path}/search.svg")) !default;
+$option-search-icon-color: var(--rp-option-search-icon-url, rgba(94, 96, 102, 65%)) !default;
+$option-search-highlight-background-color: var(--rp-option-search-icon-url, #f2a218) !default;
 
 // checkmark
 $option-checkmark-color: var(--rp-option-checkmark-color, #5e6066) !default;
@@ -145,7 +146,6 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
     border-radius: $option-search-border-radius;
     border: $option-search-border;
     height: $option-search-height;
-    padding-left: 55px;
   }
   :global {
     .SimpleFormField_root {
@@ -160,7 +160,7 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
     content: "";
     display: inline-flex;
     height: $option-search-icon-size;
-    margin: $option-search-icon-margin 0 0 $option-search-icon-margin;
+    margin: $option-search-icon-margin $option-search-icon-margin 0 $option-search-icon-margin;
     mask: $option-search-icon-url;
     mask-repeat: no-repeat;
     mask-size: $option-search-icon-size $option-search-icon-size;
@@ -169,6 +169,16 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
     width: $option-search-icon-size;
     z-index: 1;
   }
+  :not([dir='rtl']) & {
+    input {
+      padding-left: $option-search-padding;
+    }
+  }
+  [dir='rtl'] & {
+    input {
+      padding-right: $option-search-padding;
+    }
+  }
 }
 
 // BEGIN SPECIAL STATES ---------- //

From e1a1982efe0762907aacb1761096a18e75dbdf9a Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Tue, 6 Apr 2021 15:21:31 -0300
Subject: [PATCH 201/244] [DDW-620] Implement Clear button

---
 source/components/Options.js            |  8 +++
 source/components/Select.js             |  1 +
 source/skins/simple/OptionsSkin.js      |  8 +++
 source/skins/simple/SelectSkin.js       |  2 +
 source/themes/simple/SimpleOptions.scss | 65 +++++++++++++++++++++----
 stories/Select.stories.js               |  1 +
 6 files changed, 76 insertions(+), 9 deletions(-)

diff --git a/source/components/Options.js b/source/components/Options.js
index 1cf753bf..ff24db86 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -29,6 +29,7 @@ type Props = {
   className?: String,
   context: ThemeContextProp,
   hasSearch?: boolean,
+  hideSearchClearButton?: boolean,
   highlightSearch?: boolean,
   isOpen: boolean,
   isOpeningUpward: boolean,
@@ -211,6 +212,12 @@ class OptionsBase extends Component<Props, State> {
     });
   }
 
+  handleClearSearchValue = () => {
+    this.setState({
+      searchValue: '',
+    });
+  }
+
   getFilteredOptions = () => {
     const { hasSearch, onSearch, options, highlightSearch, optionRenderer } = this.props;
     const { searchValue } = this.state;
@@ -387,6 +394,7 @@ class OptionsBase extends Component<Props, State> {
         isSelectedOption={this.isSelectedOption}
         options={this.getFilteredOptions()}
         optionsRef={optionsRef}
+        onClearSearchValue={this.handleClearSearchValue}
         searchInputRef={this.searchInputRef}
         searchValue={searchValue}
         setHighlightedOptionIndex={this.setHighlightedOptionIndex}
diff --git a/source/components/Select.js b/source/components/Select.js
index 1249db68..a776d195 100644
--- a/source/components/Select.js
+++ b/source/components/Select.js
@@ -21,6 +21,7 @@ type Props = {
   context: ThemeContextProp,
   error?: string | Element<any>,
   hasSearch?: boolean,
+  hideSearchClearButton?: boolean,
   highlightSearch?: boolean,
   isOpeningUpward: boolean,
   label?: string | Element<any>,
diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index a25b27f6..03a31d61 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -20,6 +20,7 @@ type Props = {
   getHighlightedOptionIndex: Function,
   handleClickOnOption: Function,
   hasSearch?: boolean,
+  hideSearchClearButton?: boolean,
   highlightSearch?: boolean,
   isHighlightedOption: Function,
   isOpen: boolean,
@@ -29,6 +30,7 @@ type Props = {
   noResults: boolean,
   noResultsMessage: string | Element<any>,
   noSelectedOptionCheckmark?: boolean,
+  onClearSearchValue: Function,
   onSearch: Function,
   optionHeight: number,
   optionRenderer: Function,
@@ -153,6 +155,12 @@ export const OptionsSkin = (props: Props) => {
           autoFocus={true}
           inputRef={props.searchInputRef || null}
         />
+        {!props.hideSearchClearButton && (
+          <button
+            className={searchValue ? theme[themeId].active : null}
+            onClick={props.onClearSearchValue}
+          />
+        )}
       </div>
     )
   }
diff --git a/source/skins/simple/SelectSkin.js b/source/skins/simple/SelectSkin.js
index f9945b4c..3474f2fe 100644
--- a/source/skins/simple/SelectSkin.js
+++ b/source/skins/simple/SelectSkin.js
@@ -21,6 +21,7 @@ type Props = {
   handleChange: Function,
   handleInputClick: Function,
   hasSearch?: boolean,
+  hideSearchClearButton?: boolean,
   highlightSearch?: boolean,
   inputRef: ElementRef<'input'>,
   isOpen: boolean,
@@ -83,6 +84,7 @@ export const SelectSkin = (props: Props) => {
         skin={OptionsSkin}
         theme={theme}
         hasSearch={props.hasSearch}
+        hideSearchClearButton={props.hideSearchClearButton}
         highlightSearch={props.highlightSearch}
         isOpen={props.isOpen}
         optionsRef={props.optionsRef}
diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index 1a02c87e..d4f42341 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -26,13 +26,19 @@ $option-text-color-disabled: var(--rp-option-text-color-disabled, rgba(#5e6066,
 $option-search-border-radius: var(--rp-option-search-border-radius, 0) !default;
 $option-search-border: var(--rp-option-search-border, none) !default;
 $option-search-box-shadow: var(--rp-option-search-box-shadow, 0 10px 10px -5px rgba(0, 0, 0, 0.12)) !default;
+$option-search-clear-button-bg-color: var(--rp-option-bg-color-highlighted, rgba(68, 91, 124, 0.1)) !default;
+$option-search-clear-icon-color: var(--rp-input-text-color, #5e6066) !default;
+$option-search-clear-icon-size: var(--rp-option-search-clear-icon-size, 8px) !default;
+$option-search-clear-icon-url: var(--rp-option-search-clear-icon-url, url("#{$theme-assets-path}/cross.svg")) !default;
 $option-search-height: var(--rp-option-search-height, 50px) !default;
-$option-search-padding: var(--rp-option-search-padding, 55px) !default;
-$option-search-icon-margin: var(--rp-option-search-icon-size, 19px) !default;
+$option-search-highlight-background-color: var(--rp-option-search-icon-url, #f2a218) !default;
+$option-search-icon-color: var(--rp-input-text-color, #5e6066) !default;
+$option-search-icon-margin: var(--rp-option-search-icon-size, 18.5px) !default;
+$option-search-icon-opacity: var(--rp-option-search-icon-opacity, 0.65) !default;
 $option-search-icon-size: var(--rp-option-search-icon-size, 15px) !default;
 $option-search-icon-url: var(--rp-option-search-icon-url, url("#{$theme-assets-path}/search.svg")) !default;
-$option-search-icon-color: var(--rp-option-search-icon-url, rgba(94, 96, 102, 65%)) !default;
-$option-search-highlight-background-color: var(--rp-option-search-icon-url, #f2a218) !default;
+$option-search-padding-clear-btn: var(--rp-option-search-padding-clear-btn, 60px) !default;
+$option-search-padding-magnifier: var(--rp-option-search-padding-magnifier, 43px) !default;
 
 // checkmark
 $option-checkmark-color: var(--rp-option-checkmark-color, #5e6066) !default;
@@ -142,28 +148,60 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
 }
 
 .search {
+  position: relative;
   input {
     border-radius: $option-search-border-radius;
     border: $option-search-border;
     height: $option-search-height;
   }
+  button {
+    background-color: $option-search-clear-button-bg-color;
+    border-radius: 3px;
+    cursor: pointer;
+    height: 28px;
+    opacity: 0;
+    padding: 10px;
+    position: absolute;
+    top: 12px;
+    transition: opacity .25s ease-out;
+    width: 28px;
+    z-index: 1;
+
+    &.active {
+      opacity: 1;
+    }
+    &:before {
+      -webkit-mask-image: $option-search-clear-icon-url;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-size: $option-search-clear-icon-size $option-search-clear-icon-size;
+      background-color: $option-search-clear-icon-color;
+      content: "";
+      display: block;
+      height: $option-search-clear-icon-size;
+      mask-image:$option-search-clear-icon-url;
+      mask-repeat: no-repeat;
+      mask-size: $option-search-clear-icon-size $option-search-clear-icon-size;
+      width: $option-search-clear-icon-size;
+    }
+
+  }
   :global {
     .SimpleFormField_root {
       box-shadow: $option-search-box-shadow;
     }
   }
   &:before {
-    -webkit-mask: $option-search-icon-url;
+    -webkit-mask-image: $option-search-icon-url;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: $option-search-icon-size $option-search-icon-size;
     background: $option-search-icon-color;
     content: "";
-    display: inline-flex;
     height: $option-search-icon-size;
     margin: $option-search-icon-margin $option-search-icon-margin 0 $option-search-icon-margin;
-    mask: $option-search-icon-url;
+    mask-image: $option-search-icon-url;
     mask-repeat: no-repeat;
     mask-size: $option-search-icon-size $option-search-icon-size;
+    opacity: $option-search-icon-opacity;
     position: absolute;
     vertical-align: middle;
     width: $option-search-icon-size;
@@ -171,12 +209,21 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
   }
   :not([dir='rtl']) & {
     input {
-      padding-left: $option-search-padding;
+      padding-left: $option-search-padding-magnifier;
+      padding-right: $option-search-padding-clear-btn;
+    }
+    button {
+      right: 12px;
     }
   }
   [dir='rtl'] & {
     input {
-      padding-right: $option-search-padding;
+      padding-left: $option-search-padding-clear-btn;
+      padding-right: $option-search-padding-magnifier;
+    }
+    button {
+      left: 12px;
+      right: auto;
     }
   }
 }
diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index fee2104e..5cd6b039 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -266,6 +266,7 @@ storiesOf('Select', module)
           value={store.state.value}
           onChange={value => store.set({ value })}
           options={COUNTRIES}
+          hasSearch
         />
       </div>
     ))

From 64e6373fd18f99a7c973bf0c8376ddffcc1ed904 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Tue, 6 Apr 2021 16:43:06 -0300
Subject: [PATCH 202/244] [DDW-620] Fix no-result height

---
 source/skins/simple/OptionsSkin.js | 6 +++++-
 source/skins/simple/SelectSkin.js  | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index 03a31d61..b9823765 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -173,7 +173,11 @@ export const OptionsSkin = (props: Props) => {
       height = optionsMaxHeight;
     }
     if (hasSearch) {
-      height += searchHeight;
+      if (options.length) {
+        height += searchHeight;
+      } else {
+        height = searchHeight;
+      }
     }
     return height;
   };
diff --git a/source/skins/simple/SelectSkin.js b/source/skins/simple/SelectSkin.js
index 3474f2fe..54ba0e4c 100644
--- a/source/skins/simple/SelectSkin.js
+++ b/source/skins/simple/SelectSkin.js
@@ -86,7 +86,8 @@ export const SelectSkin = (props: Props) => {
         hasSearch={props.hasSearch}
         hideSearchClearButton={props.hideSearchClearButton}
         highlightSearch={props.highlightSearch}
-        isOpen={props.isOpen}
+        isOpen1={props.isOpen}
+        isOpen
         optionsRef={props.optionsRef}
         optionsMaxHeight={props.optionsMaxHeight}
         options={props.options}

From a257bd47f5076afeb9a00ef1a9fe6d034c91f534 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Tue, 6 Apr 2021 16:43:27 -0300
Subject: [PATCH 203/244] [DDW-620] Remove hard-coded open Select

---
 source/skins/simple/SelectSkin.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/source/skins/simple/SelectSkin.js b/source/skins/simple/SelectSkin.js
index 54ba0e4c..3474f2fe 100644
--- a/source/skins/simple/SelectSkin.js
+++ b/source/skins/simple/SelectSkin.js
@@ -86,8 +86,7 @@ export const SelectSkin = (props: Props) => {
         hasSearch={props.hasSearch}
         hideSearchClearButton={props.hideSearchClearButton}
         highlightSearch={props.highlightSearch}
-        isOpen1={props.isOpen}
-        isOpen
+        isOpen={props.isOpen}
         optionsRef={props.optionsRef}
         optionsMaxHeight={props.optionsMaxHeight}
         options={props.options}

From 769e8795f67e243480319ec72300071618ff313b Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Tue, 6 Apr 2021 16:55:42 -0300
Subject: [PATCH 204/244] [DDW-620] Fix error that prevented space in the
 search

---
 source/components/Options.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/source/components/Options.js b/source/components/Options.js
index ff24db86..b3bb159a 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -13,7 +13,7 @@ import type {
 } from 'react';
 
 // external libraries
-import { isFunction } from 'lodash';
+import { isFunction, get } from 'lodash';
 import createRef from 'create-react-ref/lib/createRef';
 
 // internal utility functions
@@ -206,7 +206,11 @@ class OptionsBase extends Component<Props, State> {
     this.close();
   };
 
-  handleSearch = (searchValue: string) => {
+// handleSearch = (event: SyntheticKeyboardEvent<>, test) => {
+
+  handleSearch = (searchValue: string, event: SyntheticKeyboardEvent<>) => {
+    event.preventDefault();
+    event.stopPropagation();
     this.setState({
       searchValue
     });
@@ -314,6 +318,7 @@ class OptionsBase extends Component<Props, State> {
 
   // this needs to get passed to OptionsSkin and attached to each Option Li
   _handleKeyDown = (event: SyntheticKeyboardEvent<>) => {
+    const targetTagName = get(event, 'target.tagName');
     const highlightOptionIndex = this.state.highlightedOptionIndex;
     switch (event.keyCode) {
       case 9: // Tab key: selects currently highlighted option
@@ -325,8 +330,10 @@ class OptionsBase extends Component<Props, State> {
         this._handleSelectionOnKeyDown(event);
         break;
       case 32: // Space key: selects currently highlighted option
-        event.preventDefault();
-        this._handleSelectionOnKeyDown(event);
+        if (targetTagName !== 'INPUT') {
+          event.preventDefault();
+          this._handleSelectionOnKeyDown(event);
+        }
         break;
       case 27: // Escape key: closes options if open
         this.close();

From 511611333543e24bd93e13c4b2070ce56ed12cc6 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Tue, 6 Apr 2021 16:57:02 -0300
Subject: [PATCH 205/244] [DDW-620] Fix error that prevented space in the
 search

---
 source/components/Options.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/source/components/Options.js b/source/components/Options.js
index b3bb159a..af11d876 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -206,11 +206,7 @@ class OptionsBase extends Component<Props, State> {
     this.close();
   };
 
-// handleSearch = (event: SyntheticKeyboardEvent<>, test) => {
-
-  handleSearch = (searchValue: string, event: SyntheticKeyboardEvent<>) => {
-    event.preventDefault();
-    event.stopPropagation();
+  handleSearch = (searchValue: string) => {
     this.setState({
       searchValue
     });

From 72f71403be2cf6990fd1a113b32d0a417d1e0e39 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 7 Apr 2021 09:47:59 -0300
Subject: [PATCH 206/244] [DDW-620] Remove the search box from the scrollable
 area

---
 source/skins/simple/OptionsSkin.js |  19 +-
 stories/Select.stories.js          |  12 +
 stories/helpers/countries.json     | 974 +++++++++++++++++++++++++++++
 3 files changed, 991 insertions(+), 14 deletions(-)
 create mode 100644 stories/helpers/countries.json

diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index b9823765..118ed564 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -166,20 +166,11 @@ export const OptionsSkin = (props: Props) => {
   }
 
   const getScrollBarHeight = (): number => {
-    let height = options.length
-      ? options.length * optionHeight
-      : optionHeight;
-    if (height > optionsMaxHeight) {
-      height = optionsMaxHeight;
+    if (!options.length) return optionHeight;
+    if (optionsMaxHeight < options.length * optionHeight) {
+      return optionsMaxHeight;
     }
-    if (hasSearch) {
-      if (options.length) {
-        height += searchHeight;
-      } else {
-        height = searchHeight;
-      }
-    }
-    return height;
+    return options.length * optionHeight;
   };
 
   // Enforce max height of options dropdown if necessary
@@ -212,8 +203,8 @@ export const OptionsSkin = (props: Props) => {
         onMouseEnter={() => setMouseIsOverOptions && setMouseIsOverOptions(true)}
         onMouseLeave={() => setMouseIsOverOptions && setMouseIsOverOptions(false)}
       >
+        {hasSearch && renderSearch()}
         <ScrollBar style={{ height: `${getScrollBarHeight()}px` }}>
-          {hasSearch && renderSearch()}
           {renderOptions()}
         </ScrollBar>
       </ul>
diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index 5cd6b039..4addb614 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -28,6 +28,7 @@ import { IDENTIFIERS } from '../source/components';
 
 // helpers
 import { decorateWithSimpleTheme } from './helpers/theming';
+import countries from './helpers/countries.json'
 
 const COUNTRIES = [
   { value: 'PT-br', label: 'Brazil' },
@@ -124,6 +125,17 @@ storiesOf('Select', module)
     ))
   )
 
+  .add('with search and long list',
+    withState({ value: '' }, store => (
+      <Select
+        value={store.state.value}
+        onChange={value => store.set({ value })}
+        options={countries}
+        hasSearch
+      />
+    ))
+  )
+
   .add('with custom search',
     withState({ value: '' }, store => (
       <Select
diff --git a/stories/helpers/countries.json b/stories/helpers/countries.json
new file mode 100644
index 00000000..08f9d7d9
--- /dev/null
+++ b/stories/helpers/countries.json
@@ -0,0 +1,974 @@
+[
+  {
+    "label": "Afghanistan",
+    "value": "AF"
+  },
+  {
+    "label": "Åland Islands",
+    "value": "AX"
+  },
+  {
+    "label": "Albania",
+    "value": "AL"
+  },
+  {
+    "label": "Algeria",
+    "value": "DZ"
+  },
+  {
+    "label": "American Samoa",
+    "value": "AS"
+  },
+  {
+    "label": "AndorrA",
+    "value": "AD"
+  },
+  {
+    "label": "Angola",
+    "value": "AO"
+  },
+  {
+    "label": "Anguilla",
+    "value": "AI"
+  },
+  {
+    "label": "Antarctica",
+    "value": "AQ"
+  },
+  {
+    "label": "Antigua and Barbuda",
+    "value": "AG"
+  },
+  {
+    "label": "Argentina",
+    "value": "AR"
+  },
+  {
+    "label": "Armenia",
+    "value": "AM"
+  },
+  {
+    "label": "Aruba",
+    "value": "AW"
+  },
+  {
+    "label": "Australia",
+    "value": "AU"
+  },
+  {
+    "label": "Austria",
+    "value": "AT"
+  },
+  {
+    "label": "Azerbaijan",
+    "value": "AZ"
+  },
+  {
+    "label": "Bahamas",
+    "value": "BS"
+  },
+  {
+    "label": "Bahrain",
+    "value": "BH"
+  },
+  {
+    "label": "Bangladesh",
+    "value": "BD"
+  },
+  {
+    "label": "Barbados",
+    "value": "BB"
+  },
+  {
+    "label": "Belarus",
+    "value": "BY"
+  },
+  {
+    "label": "Belgium",
+    "value": "BE"
+  },
+  {
+    "label": "Belize",
+    "value": "BZ"
+  },
+  {
+    "label": "Benin",
+    "value": "BJ"
+  },
+  {
+    "label": "Bermuda",
+    "value": "BM"
+  },
+  {
+    "label": "Bhutan",
+    "value": "BT"
+  },
+  {
+    "label": "Bolivia",
+    "value": "BO"
+  },
+  {
+    "label": "Bosnia and Herzegovina",
+    "value": "BA"
+  },
+  {
+    "label": "Botswana",
+    "value": "BW"
+  },
+  {
+    "label": "Bouvet Island",
+    "value": "BV"
+  },
+  {
+    "label": "Brazil",
+    "value": "BR"
+  },
+  {
+    "label": "British Indian Ocean Territory",
+    "value": "IO"
+  },
+  {
+    "label": "Brunei Darussalam",
+    "value": "BN"
+  },
+  {
+    "label": "Bulgaria",
+    "value": "BG"
+  },
+  {
+    "label": "Burkina Faso",
+    "value": "BF"
+  },
+  {
+    "label": "Burundi",
+    "value": "BI"
+  },
+  {
+    "label": "Cambodia",
+    "value": "KH"
+  },
+  {
+    "label": "Cameroon",
+    "value": "CM"
+  },
+  {
+    "label": "Canada",
+    "value": "CA"
+  },
+  {
+    "label": "Cape Verde",
+    "value": "CV"
+  },
+  {
+    "label": "Cayman Islands",
+    "value": "KY"
+  },
+  {
+    "label": "Central African Republic",
+    "value": "CF"
+  },
+  {
+    "label": "Chad",
+    "value": "TD"
+  },
+  {
+    "label": "Chile",
+    "value": "CL"
+  },
+  {
+    "label": "China",
+    "value": "CN"
+  },
+  {
+    "label": "Christmas Island",
+    "value": "CX"
+  },
+  {
+    "label": "Cocos (Keeling) Islands",
+    "value": "CC"
+  },
+  {
+    "label": "Colombia",
+    "value": "CO"
+  },
+  {
+    "label": "Comoros",
+    "value": "KM"
+  },
+  {
+    "label": "Congo",
+    "value": "CG"
+  },
+  {
+    "label": "Congo, The Democratic Republic of the",
+    "value": "CD"
+  },
+  {
+    "label": "Cook Islands",
+    "value": "CK"
+  },
+  {
+    "label": "Costa Rica",
+    "value": "CR"
+  },
+  {
+    "label": "Cote D'Ivoire",
+    "value": "CI"
+  },
+  {
+    "label": "Croatia",
+    "value": "HR"
+  },
+  {
+    "label": "Cuba",
+    "value": "CU"
+  },
+  {
+    "label": "Cyprus",
+    "value": "CY"
+  },
+  {
+    "label": "Czech Republic",
+    "value": "CZ"
+  },
+  {
+    "label": "Denmark",
+    "value": "DK"
+  },
+  {
+    "label": "Djibouti",
+    "value": "DJ"
+  },
+  {
+    "label": "Dominica",
+    "value": "DM"
+  },
+  {
+    "label": "Dominican Republic",
+    "value": "DO"
+  },
+  {
+    "label": "Ecuador",
+    "value": "EC"
+  },
+  {
+    "label": "Egypt",
+    "value": "EG"
+  },
+  {
+    "label": "El Salvador",
+    "value": "SV"
+  },
+  {
+    "label": "Equatorial Guinea",
+    "value": "GQ"
+  },
+  {
+    "label": "Eritrea",
+    "value": "ER"
+  },
+  {
+    "label": "Estonia",
+    "value": "EE"
+  },
+  {
+    "label": "Ethiopia",
+    "value": "ET"
+  },
+  {
+    "label": "Falkland Islands (Malvinas)",
+    "value": "FK"
+  },
+  {
+    "label": "Faroe Islands",
+    "value": "FO"
+  },
+  {
+    "label": "Fiji",
+    "value": "FJ"
+  },
+  {
+    "label": "Finland",
+    "value": "FI"
+  },
+  {
+    "label": "France",
+    "value": "FR"
+  },
+  {
+    "label": "French Guiana",
+    "value": "GF"
+  },
+  {
+    "label": "French Polynesia",
+    "value": "PF"
+  },
+  {
+    "label": "French Southern Territories",
+    "value": "TF"
+  },
+  {
+    "label": "Gabon",
+    "value": "GA"
+  },
+  {
+    "label": "Gambia",
+    "value": "GM"
+  },
+  {
+    "label": "Georgia",
+    "value": "GE"
+  },
+  {
+    "label": "Germany",
+    "value": "DE"
+  },
+  {
+    "label": "Ghana",
+    "value": "GH"
+  },
+  {
+    "label": "Gibraltar",
+    "value": "GI"
+  },
+  {
+    "label": "Greece",
+    "value": "GR"
+  },
+  {
+    "label": "Greenland",
+    "value": "GL"
+  },
+  {
+    "label": "Grenada",
+    "value": "GD"
+  },
+  {
+    "label": "Guadeloupe",
+    "value": "GP"
+  },
+  {
+    "label": "Guam",
+    "value": "GU"
+  },
+  {
+    "label": "Guatemala",
+    "value": "GT"
+  },
+  {
+    "label": "Guernsey",
+    "value": "GG"
+  },
+  {
+    "label": "Guinea",
+    "value": "GN"
+  },
+  {
+    "label": "Guinea-Bissau",
+    "value": "GW"
+  },
+  {
+    "label": "Guyana",
+    "value": "GY"
+  },
+  {
+    "label": "Haiti",
+    "value": "HT"
+  },
+  {
+    "label": "Heard Island and Mcdonald Islands",
+    "value": "HM"
+  },
+  {
+    "label": "Holy See (Vatican City State)",
+    "value": "VA"
+  },
+  {
+    "label": "Honduras",
+    "value": "HN"
+  },
+  {
+    "label": "Hong Kong",
+    "value": "HK"
+  },
+  {
+    "label": "Hungary",
+    "value": "HU"
+  },
+  {
+    "label": "Iceland",
+    "value": "IS"
+  },
+  {
+    "label": "India",
+    "value": "IN"
+  },
+  {
+    "label": "Indonesia",
+    "value": "ID"
+  },
+  {
+    "label": "Iran, Islamic Republic Of",
+    "value": "IR"
+  },
+  {
+    "label": "Iraq",
+    "value": "IQ"
+  },
+  {
+    "label": "Ireland",
+    "value": "IE"
+  },
+  {
+    "label": "Isle of Man",
+    "value": "IM"
+  },
+  {
+    "label": "Israel",
+    "value": "IL"
+  },
+  {
+    "label": "Italy",
+    "value": "IT"
+  },
+  {
+    "label": "Jamaica",
+    "value": "JM"
+  },
+  {
+    "label": "Japan",
+    "value": "JP"
+  },
+  {
+    "label": "Jersey",
+    "value": "JE"
+  },
+  {
+    "label": "Jordan",
+    "value": "JO"
+  },
+  {
+    "label": "Kazakhstan",
+    "value": "KZ"
+  },
+  {
+    "label": "Kenya",
+    "value": "KE"
+  },
+  {
+    "label": "Kiribati",
+    "value": "KI"
+  },
+  {
+    "label": "Korea, Democratic People'S Republic of",
+    "value": "KP"
+  },
+  {
+    "label": "Korea, Republic of",
+    "value": "KR"
+  },
+  {
+    "label": "Kuwait",
+    "value": "KW"
+  },
+  {
+    "label": "Kyrgyzstan",
+    "value": "KG"
+  },
+  {
+    "label": "Lao People'S Democratic Republic",
+    "value": "LA"
+  },
+  {
+    "label": "Latvia",
+    "value": "LV"
+  },
+  {
+    "label": "Lebanon",
+    "value": "LB"
+  },
+  {
+    "label": "Lesotho",
+    "value": "LS"
+  },
+  {
+    "label": "Liberia",
+    "value": "LR"
+  },
+  {
+    "label": "Libyan Arab Jamahiriya",
+    "value": "LY"
+  },
+  {
+    "label": "Liechtenstein",
+    "value": "LI"
+  },
+  {
+    "label": "Lithuania",
+    "value": "LT"
+  },
+  {
+    "label": "Luxembourg",
+    "value": "LU"
+  },
+  {
+    "label": "Macao",
+    "value": "MO"
+  },
+  {
+    "label": "Macedonia, The Former Yugoslav Republic of",
+    "value": "MK"
+  },
+  {
+    "label": "Madagascar",
+    "value": "MG"
+  },
+  {
+    "label": "Malawi",
+    "value": "MW"
+  },
+  {
+    "label": "Malaysia",
+    "value": "MY"
+  },
+  {
+    "label": "Maldives",
+    "value": "MV"
+  },
+  {
+    "label": "Mali",
+    "value": "ML"
+  },
+  {
+    "label": "Malta",
+    "value": "MT"
+  },
+  {
+    "label": "Marshall Islands",
+    "value": "MH"
+  },
+  {
+    "label": "Martinique",
+    "value": "MQ"
+  },
+  {
+    "label": "Mauritania",
+    "value": "MR"
+  },
+  {
+    "label": "Mauritius",
+    "value": "MU"
+  },
+  {
+    "label": "Mayotte",
+    "value": "YT"
+  },
+  {
+    "label": "Mexico",
+    "value": "MX"
+  },
+  {
+    "label": "Micronesia, Federated States of",
+    "value": "FM"
+  },
+  {
+    "label": "Moldova, Republic of",
+    "value": "MD"
+  },
+  {
+    "label": "Monaco",
+    "value": "MC"
+  },
+  {
+    "label": "Mongolia",
+    "value": "MN"
+  },
+  {
+    "label": "Montserrat",
+    "value": "MS"
+  },
+  {
+    "label": "Morocco",
+    "value": "MA"
+  },
+  {
+    "label": "Mozambique",
+    "value": "MZ"
+  },
+  {
+    "label": "Myanmar",
+    "value": "MM"
+  },
+  {
+    "label": "Namibia",
+    "value": "NA"
+  },
+  {
+    "label": "Nauru",
+    "value": "NR"
+  },
+  {
+    "label": "Nepal",
+    "value": "NP"
+  },
+  {
+    "label": "Netherlands",
+    "value": "NL"
+  },
+  {
+    "label": "Netherlands Antilles",
+    "value": "AN"
+  },
+  {
+    "label": "New Caledonia",
+    "value": "NC"
+  },
+  {
+    "label": "New Zealand",
+    "value": "NZ"
+  },
+  {
+    "label": "Nicaragua",
+    "value": "NI"
+  },
+  {
+    "label": "Niger",
+    "value": "NE"
+  },
+  {
+    "label": "Nigeria",
+    "value": "NG"
+  },
+  {
+    "label": "Niue",
+    "value": "NU"
+  },
+  {
+    "label": "Norfolk Island",
+    "value": "NF"
+  },
+  {
+    "label": "Northern Mariana Islands",
+    "value": "MP"
+  },
+  {
+    "label": "Norway",
+    "value": "NO"
+  },
+  {
+    "label": "Oman",
+    "value": "OM"
+  },
+  {
+    "label": "Pakistan",
+    "value": "PK"
+  },
+  {
+    "label": "Palau",
+    "value": "PW"
+  },
+  {
+    "label": "Palestinian Territory, Occupied",
+    "value": "PS"
+  },
+  {
+    "label": "Panama",
+    "value": "PA"
+  },
+  {
+    "label": "Papua New Guinea",
+    "value": "PG"
+  },
+  {
+    "label": "Paraguay",
+    "value": "PY"
+  },
+  {
+    "label": "Peru",
+    "value": "PE"
+  },
+  {
+    "label": "Philippines",
+    "value": "PH"
+  },
+  {
+    "label": "Pitcairn",
+    "value": "PN"
+  },
+  {
+    "label": "Poland",
+    "value": "PL"
+  },
+  {
+    "label": "Portugal",
+    "value": "PT"
+  },
+  {
+    "label": "Puerto Rico",
+    "value": "PR"
+  },
+  {
+    "label": "Qatar",
+    "value": "QA"
+  },
+  {
+    "label": "Reunion",
+    "value": "RE"
+  },
+  {
+    "label": "Romania",
+    "value": "RO"
+  },
+  {
+    "label": "Russian Federation",
+    "value": "RU"
+  },
+  {
+    "label": "RWANDA",
+    "value": "RW"
+  },
+  {
+    "label": "Saint Helena",
+    "value": "SH"
+  },
+  {
+    "label": "Saint Kitts and Nevis",
+    "value": "KN"
+  },
+  {
+    "label": "Saint Lucia",
+    "value": "LC"
+  },
+  {
+    "label": "Saint Pierre and Miquelon",
+    "value": "PM"
+  },
+  {
+    "label": "Saint Vincent and the Grenadines",
+    "value": "VC"
+  },
+  {
+    "label": "Samoa",
+    "value": "WS"
+  },
+  {
+    "label": "San Marino",
+    "value": "SM"
+  },
+  {
+    "label": "Sao Tome and Principe",
+    "value": "ST"
+  },
+  {
+    "label": "Saudi Arabia",
+    "value": "SA"
+  },
+  {
+    "label": "Senegal",
+    "value": "SN"
+  },
+  {
+    "label": "Serbia and Montenegro",
+    "value": "CS"
+  },
+  {
+    "label": "Seychelles",
+    "value": "SC"
+  },
+  {
+    "label": "Sierra Leone",
+    "value": "SL"
+  },
+  {
+    "label": "Singapore",
+    "value": "SG"
+  },
+  {
+    "label": "Slovakia",
+    "value": "SK"
+  },
+  {
+    "label": "Slovenia",
+    "value": "SI"
+  },
+  {
+    "label": "Solomon Islands",
+    "value": "SB"
+  },
+  {
+    "label": "Somalia",
+    "value": "SO"
+  },
+  {
+    "label": "South Africa",
+    "value": "ZA"
+  },
+  {
+    "label": "South Georgia and the South Sandwich Islands",
+    "value": "GS"
+  },
+  {
+    "label": "Spain",
+    "value": "ES"
+  },
+  {
+    "label": "Sri Lanka",
+    "value": "LK"
+  },
+  {
+    "label": "Sudan",
+    "value": "SD"
+  },
+  {
+    "label": "Suriname",
+    "value": "SR"
+  },
+  {
+    "label": "Svalbard and Jan Mayen",
+    "value": "SJ"
+  },
+  {
+    "label": "Swaziland",
+    "value": "SZ"
+  },
+  {
+    "label": "Sweden",
+    "value": "SE"
+  },
+  {
+    "label": "Switzerland",
+    "value": "CH"
+  },
+  {
+    "label": "Syrian Arab Republic",
+    "value": "SY"
+  },
+  {
+    "label": "Taiwan, Province of China",
+    "value": "TW"
+  },
+  {
+    "label": "Tajikistan",
+    "value": "TJ"
+  },
+  {
+    "label": "Tanzania, United Republic of",
+    "value": "TZ"
+  },
+  {
+    "label": "Thailand",
+    "value": "TH"
+  },
+  {
+    "label": "Timor-Leste",
+    "value": "TL"
+  },
+  {
+    "label": "Togo",
+    "value": "TG"
+  },
+  {
+    "label": "Tokelau",
+    "value": "TK"
+  },
+  {
+    "label": "Tonga",
+    "value": "TO"
+  },
+  {
+    "label": "Trinidad and Tobago",
+    "value": "TT"
+  },
+  {
+    "label": "Tunisia",
+    "value": "TN"
+  },
+  {
+    "label": "Turkey",
+    "value": "TR"
+  },
+  {
+    "label": "Turkmenistan",
+    "value": "TM"
+  },
+  {
+    "label": "Turks and Caicos Islands",
+    "value": "TC"
+  },
+  {
+    "label": "Tuvalu",
+    "value": "TV"
+  },
+  {
+    "label": "Uganda",
+    "value": "UG"
+  },
+  {
+    "label": "Ukraine",
+    "value": "UA"
+  },
+  {
+    "label": "United Arab Emirates",
+    "value": "AE"
+  },
+  {
+    "label": "United Kingdom",
+    "value": "GB"
+  },
+  {
+    "label": "United States",
+    "value": "US"
+  },
+  {
+    "label": "United States Minor Outlying Islands",
+    "value": "UM"
+  },
+  {
+    "label": "Uruguay",
+    "value": "UY"
+  },
+  {
+    "label": "Uzbekistan",
+    "value": "UZ"
+  },
+  {
+    "label": "Vanuatu",
+    "value": "VU"
+  },
+  {
+    "label": "Venezuela",
+    "value": "VE"
+  },
+  {
+    "label": "Viet Nam",
+    "value": "VN"
+  },
+  {
+    "label": "Virgin Islands, British",
+    "value": "VG"
+  },
+  {
+    "label": "Virgin Islands, U.S.",
+    "value": "VI"
+  },
+  {
+    "label": "Wallis and Futuna",
+    "value": "WF"
+  },
+  {
+    "label": "Western Sahara",
+    "value": "EH"
+  },
+  {
+    "label": "Yemen",
+    "value": "YE"
+  },
+  {
+    "label": "Zambia",
+    "value": "ZM"
+  },
+  {
+    "label": "Zimbabwe",
+    "value": "ZW"
+  }
+]

From f3c3243471d8dfde1712e77b74a6473575a8dc17 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 7 Apr 2021 10:57:08 -0300
Subject: [PATCH 207/244] [DDW-620] Remove create-react-ref pkg

---
 package.json                        | 1 -
 source/components/Autocomplete.js   | 9 ++++-----
 source/components/Bubble.js         | 3 +--
 source/components/Dropdown.js       | 5 ++---
 source/components/HOC/withTheme.js  | 3 +--
 source/components/InfiniteScroll.js | 3 +--
 source/components/Input.js          | 1 -
 source/components/NumericInput.js   | 3 +--
 source/components/Options.js        | 3 +--
 source/components/Select.js         | 7 +++----
 source/components/TextArea.js       | 3 +--
 stories/Autocomplete.stories.js     | 3 +--
 yarn.lock                           | 7 -------
 13 files changed, 16 insertions(+), 35 deletions(-)

diff --git a/package.json b/package.json
index 1d8eff7f..2d3d1c8b 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
   "dependencies": {
     "@tippyjs/react": "4.2.1",
     "create-react-context": "0.2.2",
-    "create-react-ref": "0.1.0",
     "fast-password-entropy": "1.1.1",
     "filter-react-dom-props": "0.0.2",
     "popper.js": "1.16.1",
diff --git a/source/components/Autocomplete.js b/source/components/Autocomplete.js
index 07bd3be7..e3724487 100644
--- a/source/components/Autocomplete.js
+++ b/source/components/Autocomplete.js
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import type { ComponentType, Element } from 'react';
 
 // external libraries
-import createRef from 'create-react-ref/lib/createRef';
 import _ from 'lodash';
 
 // interal components
@@ -80,10 +79,10 @@ class AutocompleteBase extends Component<AutocompleteProps, State> {
     super(props);
 
     // define refs
-    this.rootElement = createRef();
-    this.inputElement = createRef();
-    this.suggestionsElement = createRef();
-    this.optionsElement = createRef();
+    this.rootElement = React.createRef();
+    this.inputElement = React.createRef();
+    this.suggestionsElement = React.createRef();
+    this.optionsElement = React.createRef();
 
     const {
       context,
diff --git a/source/components/Bubble.js b/source/components/Bubble.js
index d8c4f9fe..cfdef6cd 100644
--- a/source/components/Bubble.js
+++ b/source/components/Bubble.js
@@ -1,7 +1,6 @@
 // @flow
 import React, { Component } from 'react';
 import type { ComponentType, Element, ElementRef } from 'react';
-import createRef from 'create-react-ref/lib/createRef';
 
 // internal utility functions
 import { createEmptyContext, withTheme } from './HOC/withTheme';
@@ -64,7 +63,7 @@ class BubbleBase extends Component<BubbleProps, State> {
     super(props);
 
     // define ref
-    this.rootElement = createRef();
+    this.rootElement = React.createRef();
 
     const { context, themeId, theme, themeOverrides } = props;
 
diff --git a/source/components/Dropdown.js b/source/components/Dropdown.js
index d123c40c..8e08aac8 100644
--- a/source/components/Dropdown.js
+++ b/source/components/Dropdown.js
@@ -1,7 +1,6 @@
 // @flow
 import React, { Component } from 'react';
 import type { ComponentType, Element } from 'react';
-import createRef from 'create-react-ref/lib/createRef';
 
 // internal utility functions
 import { createEmptyContext, withTheme } from './HOC/withTheme';
@@ -58,8 +57,8 @@ class DropdownBase extends Component<Props, State> {
     super(props);
 
     // define ref
-    this.rootElement = createRef();
-    this.optionsElement = createRef();
+    this.rootElement = React.createRef();
+    this.optionsElement = React.createRef();
 
     const { context, themeId, theme, themeOverrides } = props;
     this.state = {
diff --git a/source/components/HOC/withTheme.js b/source/components/HOC/withTheme.js
index 2a90373f..b690c1ad 100644
--- a/source/components/HOC/withTheme.js
+++ b/source/components/HOC/withTheme.js
@@ -1,7 +1,6 @@
 // @flow
 import React from 'react';
 import type { ComponentType, Ref } from 'react';
-import forwardRef from 'create-react-ref/lib/forwardRef';
 import { ThemeContext } from './ThemeContext';
 import { getDisplayName } from '../../utils/props';
 
@@ -34,7 +33,7 @@ export function withTheme<C: ComponentType<any>>(Component: C): C {
     );
   } else {
     // wraps component in context AND forwardRef
-    WrappedComponent = forwardRef((props: {}, ref: Ref<any>) => (
+    WrappedComponent = React.forwardRef((props: {}, ref: Ref<any>) => (
       <ThemeContext.Consumer>
         {(context) => <Component context={context} ref={ref} {...props} />}
       </ThemeContext.Consumer>
diff --git a/source/components/InfiniteScroll.js b/source/components/InfiniteScroll.js
index ef9e7b92..891fdfe6 100644
--- a/source/components/InfiniteScroll.js
+++ b/source/components/InfiniteScroll.js
@@ -2,7 +2,6 @@
 import React, { Component } from 'react';
 import type { ComponentType, Node } from 'react';
 // $FlowFixMe
-import createRef from 'create-react-ref/lib/createRef';
 
 // utilities
 import { createEmptyContext, withTheme } from './HOC/withTheme';
@@ -53,7 +52,7 @@ class InfiniteScrollBase extends Component<Props, State> {
     const { context, themeId, theme, themeOverrides } = props;
 
     // refs
-    this.scrollContainer = createRef();
+    this.scrollContainer = React.createRef();
 
     this.state = {
       composedTheme: composeTheme(
diff --git a/source/components/Input.js b/source/components/Input.js
index 019061a7..f19f2df6 100644
--- a/source/components/Input.js
+++ b/source/components/Input.js
@@ -4,7 +4,6 @@ import React, { Component, RefObject } from 'react';
 import type { ComponentType, Element, SyntheticInputEvent } from 'react';
 
 // external libraries
-import createRef from 'create-react-ref/lib/createRef';
 import { isString, flow } from 'lodash';
 
 // utilities
diff --git a/source/components/NumericInput.js b/source/components/NumericInput.js
index a347640f..8e903c7c 100644
--- a/source/components/NumericInput.js
+++ b/source/components/NumericInput.js
@@ -7,7 +7,6 @@ import BigNumber from 'bignumber.js';
 import type { SyntheticInputEvent, Element, ElementRef } from 'react';
 
 // external libraries
-import createRef from 'create-react-ref/lib/createRef';
 
 // internal utility functions
 import { withTheme } from './HOC/withTheme';
@@ -51,7 +50,7 @@ class NumericInputBase extends Component<NumericInputProps, State> {
 
   constructor(props: NumericInputProps) {
     super(props);
-    this.inputElement = createRef();
+    this.inputElement = React.createRef();
     this.state = {
       inputCaretPosition: 0,
       fallbackInputValue: null,
diff --git a/source/components/Options.js b/source/components/Options.js
index af11d876..0e29925a 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -14,7 +14,6 @@ import type {
 
 // external libraries
 import { isFunction, get } from 'lodash';
-import createRef from 'create-react-ref/lib/createRef';
 
 // internal utility functions
 import { createEmptyContext, withTheme } from './HOC/withTheme';
@@ -97,7 +96,7 @@ class OptionsBase extends Component<Props, State> {
 
     const { context, themeId, theme, themeOverrides } = props;
 
-    this.searchInputRef = createRef();
+    this.searchInputRef = React.createRef();
 
     this.state = {
       composedTheme: composeTheme(
diff --git a/source/components/Select.js b/source/components/Select.js
index a776d195..40d9b15c 100644
--- a/source/components/Select.js
+++ b/source/components/Select.js
@@ -1,7 +1,6 @@
 // @flow
 import React, { Component } from 'react';
 import type { ComponentType, Element } from 'react';
-import createRef from 'create-react-ref/lib/createRef';
 
 // internal components
 import { GlobalListeners } from './HOC/GlobalListeners';
@@ -72,9 +71,9 @@ class SelectBase extends Component<Props, State> {
     super(props);
 
     // define ref
-    this.rootElement = createRef();
-    this.inputElement = createRef();
-    this.optionsElement = createRef();
+    this.rootElement = React.createRef();
+    this.inputElement = React.createRef();
+    this.optionsElement = React.createRef();
 
     const { context, themeId, theme, themeOverrides } = props;
 
diff --git a/source/components/TextArea.js b/source/components/TextArea.js
index 1fd7bef6..2c74cd85 100644
--- a/source/components/TextArea.js
+++ b/source/components/TextArea.js
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import type { ComponentType, Node, Element } from 'react';
 
 // external libraries
-import createRef from 'create-react-ref/lib/createRef';
 import { isString, flow } from 'lodash';
 
 // internal utility functions
@@ -61,7 +60,7 @@ class TextAreaBase extends Component<Props, State> {
     super(props);
 
     // define ref
-    this.textareaElement = createRef();
+    this.textareaElement = React.createRef();
 
     const { context, themeId, theme, themeOverrides } = props;
 
diff --git a/stories/Autocomplete.stories.js b/stories/Autocomplete.stories.js
index d97316b7..7734b1d1 100644
--- a/stories/Autocomplete.stories.js
+++ b/stories/Autocomplete.stories.js
@@ -1,7 +1,6 @@
 // @flow
 import { some } from 'lodash';
 import React from 'react';
-import createRef from 'create-react-ref/lib/createRef';
 import classnames from 'classnames';
 
 // storybook
@@ -181,7 +180,7 @@ storiesOf('Autocomplete', module)
 
   .add('Clear value on click', () => {
     // $FlowFixMe
-    const autocompleteRef = createRef();
+    const autocompleteRef = React.createRef();
     return (
       <div>
         <Autocomplete
diff --git a/yarn.lock b/yarn.lock
index 616fde56..939711a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5420,13 +5420,6 @@ create-react-context@^0.3.0:
     gud "^1.0.0"
     warning "^4.0.3"
 
-create-react-ref@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/create-react-ref/-/create-react-ref-0.1.0.tgz#0aa42aae4e66d8b164207ac8c468c35ce7bbd8eb"
-  integrity sha512-w/DDeTaFSaDVtlfLs4q9FVFcFq1jPZ62dBUAV24OKXrobtDlnXeJ5EsnK+z98Kmh9Zyxv24Edc26z8f7APVUYg==
-  dependencies:
-    fbjs "^0.8.16"
-
 cross-env@5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.0.tgz#6ecd4c015d5773e614039ee529076669b9d126f2"

From d8583f6fcb2b0c7a32da3f6db1fc939c17686b44 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 7 Apr 2021 10:58:24 -0300
Subject: [PATCH 208/244] [DDW-620] Better function naming

---
 source/components/Options.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/source/components/Options.js b/source/components/Options.js
index 0e29925a..bd6174cb 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -118,9 +118,9 @@ class OptionsBase extends Component<Props, State> {
   componentDidUpdate(prevProps: Props) {
     if (prevProps !== this.props) {
       if (!prevProps.isOpen && this.props.isOpen) {
-        this.onOpen();
+        this.setupOnOpenListeners();
       } else if (prevProps.isOpen && !this.props.isOpen) {
-        this.onClose();
+        this.setupOnCloseListeners();
       }
       didThemePropsChange(prevProps, this.props, this.setState.bind(this));
     }
@@ -130,7 +130,7 @@ class OptionsBase extends Component<Props, State> {
     document.removeEventListener('keydown', this._handleKeyDown, false);
   }
 
-  onOpen = () => {
+  setupOnOpenListeners = () => {
     document.addEventListener('keydown', this._handleKeyDown, false);
     const { current: input } = this.searchInputRef;
     if (input) {
@@ -139,7 +139,7 @@ class OptionsBase extends Component<Props, State> {
     }
   };
 
-  onClose = () => {
+  setupOnCloseListeners = () => {
     document.removeEventListener('keydown', this._handleKeyDown, false);
   }
 

From e258e186fb8ee4392875abe308925470838eff21 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 7 Apr 2021 10:59:29 -0300
Subject: [PATCH 209/244] [DDW-620] Remove unecessary Skin

---
 source/skins/simple/OptionsSkin.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index 118ed564..73cb574c 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -13,7 +13,6 @@ import { ScrollBar } from '../../components/ScrollBar';
 
 // skins
 import { BubbleSkin } from './BubbleSkin';
-import { InputSkin } from './InputSkin';
 
 type Props = {
   getOptionProps: Function,
@@ -148,7 +147,6 @@ export const OptionsSkin = (props: Props) => {
     return (
       <div className={theme[themeId].search}>
         <Input
-          skin={InputSkin}
           theme={theme}
           value={searchValue}
           onChange={props.onSearch}

From ec2df6a3a02a1093e8da72e1c498f33432079959 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 7 Apr 2021 12:35:12 -0300
Subject: [PATCH 210/244] [DDW-620] Many adjustments

---
 package.json                             |   1 +
 source/components/HOC/GlobalListeners.js |  14 +-
 source/components/Select.js              |   2 +
 source/skins/simple/OptionsSkin.js       |   7 +-
 source/themes/simple/SimpleOptions.scss  |  17 +-
 stories/Select.stories.js                | 131 +--
 stories/helpers/countries.json           | 974 -----------------------
 stories/helpers/dummyData.js             | 282 +++++++
 storybook/addons.js                      |   1 +
 yarn.lock                                | 738 ++++++++++++++++-
 10 files changed, 1053 insertions(+), 1114 deletions(-)
 delete mode 100644 stories/helpers/countries.json
 create mode 100644 stories/helpers/dummyData.js

diff --git a/package.json b/package.json
index 2d3d1c8b..62f36141 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "test:watch": "yarn test --watchAll"
   },
   "dependencies": {
+    "@storybook/addon-knobs": "^6.2.5",
     "@tippyjs/react": "4.2.1",
     "create-react-context": "0.2.2",
     "fast-password-entropy": "1.1.1",
diff --git a/source/components/HOC/GlobalListeners.js b/source/components/HOC/GlobalListeners.js
index 35c25f43..40a46150 100644
--- a/source/components/HOC/GlobalListeners.js
+++ b/source/components/HOC/GlobalListeners.js
@@ -20,8 +20,10 @@ type Props = {
   optionsIsOpeningUpward: boolean,
   optionsRef?: ElementRef<*>,
   optionRenderer?: Function,
+  optionsLength?: number,
   rootRef?: ElementRef<*>,
   toggleOpen: Function,
+  hasSearch?: boolean,
 };
 
 type State = {
@@ -54,7 +56,7 @@ export class GlobalListeners extends Component<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    const { optionsIsOpen } = this.props;
+    const { optionsIsOpen, hasSearch, optionsLength } = this.props;
 
     // if Options is transferring from closed to open, add listeners
     // if Options is transferring from open to closed, remove listeners
@@ -70,6 +72,11 @@ export class GlobalListeners extends Component<Props, State> {
       this._removeGlobalListeners();
       this._addCalculateMaxHeightListeners();
     }
+
+    // if hasSearch prop or options.length  changed, re-calculates max-height
+    if (prevProps.hasSearch !== hasSearch || prevProps.optionsLength !== optionsLength) {
+      this._calculateOptionsMaxHeight();
+    }
   }
 
   // before unmounting, remove all global listeners
@@ -143,6 +150,7 @@ export class GlobalListeners extends Component<Props, State> {
   // calculates max-height for Options, max-height shouldn't be greater than distance
   // from Options rootRef to edge of window (up or down) else Options run off page
   _calculateOptionsMaxHeight = () => {
+    console.log('_calculateOptionsMaxHeight');
     const { documentElement } = document;
     const {
       rootRef,
@@ -152,6 +160,7 @@ export class GlobalListeners extends Component<Props, State> {
       toggleOpen,
       mouseIsOverOptions,
       mouseIsOverRoot,
+      hasSearch,
     } = this.props;
 
     // checks if Options are open & being scrolled upon via mouse position prior to toggling closed
@@ -167,6 +176,7 @@ export class GlobalListeners extends Component<Props, State> {
     }
     optionsIsOpen && !mouseIsOverOptions && !mouseIsOverRoot && toggleOpen();
     const { height, top } = rootRef.current.getBoundingClientRect();
+    const searchHeight = hasSearch ? 52 : 0;
     // opening upwards case
     if (optionsIsOpeningUpward && top < window.innerHeight) {
       this.setState({ optionsMaxHeight: top - 20 });
@@ -174,7 +184,7 @@ export class GlobalListeners extends Component<Props, State> {
     }
 
     // opening downwards case
-    const optionsMaxHeight = window.innerHeight - top - height - 30;
+    const optionsMaxHeight = window.innerHeight - top - height - 30 - searchHeight;
     if (!optionsIsOpeningUpward && optionsMaxHeight > 0) {
       this.setState({ optionsMaxHeight });
     }
diff --git a/source/components/Select.js b/source/components/Select.js
index 40d9b15c..ec3a08e3 100644
--- a/source/components/Select.js
+++ b/source/components/Select.js
@@ -175,6 +175,8 @@ class SelectBase extends Component<Props, State> {
         optionsRef={this.optionsElement}
         rootRef={this.rootElement}
         toggleOpen={this.toggleOpen}
+        hasSearch={this.props.hasSearch}
+        optionsLength={this.props.options.length}
       >
         {({ optionsMaxHeight }) => (
           <SelectSkin
diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index 73cb574c..49a2f8d8 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -184,16 +184,18 @@ export const OptionsSkin = (props: Props) => {
         isOpeningUpward ? theme[themeId].openUpward : null,
         isFirstOptionHighlighted && !noResults
           ? theme[themeId].firstOptionHighlighted
-          : null
+          : null,
+        hasSearch ? theme[themeId].hasSearch : null,
       ])}
       isTransparent={false}
       skin={BubbleSkin}
       isOpeningUpward={isOpeningUpward}
       isHidden={!isOpen}
       isFloating
-      noArrow={noOptionsArrow}
+      noArrow={noOptionsArrow || hasSearch}
       targetRef={targetRef}
     >
+      {hasSearch && renderSearch()}
       <ul
         style={optionsStyle}
         ref={optionsRef}
@@ -201,7 +203,6 @@ export const OptionsSkin = (props: Props) => {
         onMouseEnter={() => setMouseIsOverOptions && setMouseIsOverOptions(true)}
         onMouseLeave={() => setMouseIsOverOptions && setMouseIsOverOptions(false)}
       >
-        {hasSearch && renderSearch()}
         <ScrollBar style={{ height: `${getScrollBarHeight()}px` }}>
           {renderOptions()}
         </ScrollBar>
diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index d4f42341..197dbe84 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -33,7 +33,8 @@ $option-search-clear-icon-url: var(--rp-option-search-clear-icon-url, url("#{$th
 $option-search-height: var(--rp-option-search-height, 50px) !default;
 $option-search-highlight-background-color: var(--rp-option-search-icon-url, #f2a218) !default;
 $option-search-icon-color: var(--rp-input-text-color, #5e6066) !default;
-$option-search-icon-margin: var(--rp-option-search-icon-size, 18.5px) !default;
+$option-search-icon-top-margin: var(--rp-option-search-icon-size, 16.5px) !default;
+$option-search-icon-side-margin: var(--rp-option-search-icon-size, 18.5px) !default;
 $option-search-icon-opacity: var(--rp-option-search-icon-opacity, 0.65) !default;
 $option-search-icon-size: var(--rp-option-search-icon-size, 15px) !default;
 $option-search-icon-url: var(--rp-option-search-icon-url, url("#{$theme-assets-path}/search.svg")) !default;
@@ -59,6 +60,10 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
     padding: 0;
   }
 
+  &.hasSearch {
+    margin-top: 10px;
+  }
+
   @if ($options-arrow) {
     [data-bubble-arrow] {
       @include arrow(
@@ -148,7 +153,9 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
 }
 
 .search {
+  box-shadow: $option-search-box-shadow;
   position: relative;
+  z-index: 1;
   input {
     border-radius: $option-search-border-radius;
     border: $option-search-border;
@@ -183,12 +190,6 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
       mask-size: $option-search-clear-icon-size $option-search-clear-icon-size;
       width: $option-search-clear-icon-size;
     }
-
-  }
-  :global {
-    .SimpleFormField_root {
-      box-shadow: $option-search-box-shadow;
-    }
   }
   &:before {
     -webkit-mask-image: $option-search-icon-url;
@@ -197,7 +198,7 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
     background: $option-search-icon-color;
     content: "";
     height: $option-search-icon-size;
-    margin: $option-search-icon-margin $option-search-icon-margin 0 $option-search-icon-margin;
+    margin: $option-search-icon-top-margin $option-search-icon-side-margin 0 $option-search-icon-side-margin;
     mask-image: $option-search-icon-url;
     mask-repeat: no-repeat;
     mask-size: $option-search-icon-size $option-search-icon-size;
diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index 4addb614..e69a7ff4 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -4,7 +4,7 @@ import React from 'react';
 // storybook
 import { storiesOf } from '@storybook/react';
 import { withState } from '@dump247/storybook-state';
-
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 // components
 import { Select } from '../source/components/Select';
 import { Modal } from '../source/components/Modal';
@@ -28,40 +28,19 @@ import { IDENTIFIERS } from '../source/components';
 
 // helpers
 import { decorateWithSimpleTheme } from './helpers/theming';
-import countries from './helpers/countries.json'
-
-const COUNTRIES = [
-  { value: 'PT-br', label: 'Brazil' },
-  { value: 'EN-gb', label: 'England' },
-  { value: 'PT-pt', label: 'Portugal' },
-  { value: 'ES-es', label: 'Spain' },
-  { value: 'TH-th', label: 'Thailand' },
-  { value: 'EN-en', label: 'USA' },
-];
-
-const COUNTRIES_WITH_FLAGS = [
-  { value: 'EN-gb', label: 'England', flag: flagEngland },
-  { value: 'ES-es', label: 'Spain', flag: flagSpain },
-  { value: 'TH-th', label: 'Thailand', flag: flagThailand },
-  { value: 'EN-en', label: 'USA', flag: flagUSA }
-];
-
-const COUNTRIES_WITH_DISABLED_OPTIONS = [
-  { value: 'EN-gb', label: 'England' },
-  { value: 'ES-es', label: 'Spain' },
-  { value: 'TH-th', label: 'Thailand', isDisabled: true },
-  { value: 'EN-en', label: 'USA' }
-];
+import {
+  WALLETS,
+  COUNTRIES,
+  COUNTRIES_WITH_FLAGS,
+  COUNTRIES_WITH_DISABLED_OPTIONS,
+  COUNTRIES_LONG_LIST,
+} from './helpers/dummyData';
 
-const WALLETS = [
-  { value: '100,100 ADA', label: 'Main wallet' },
-  { value: '10,100.2 ADA', label: 'Spending money' },
-  { value: '500,1000 ADA', label: 'Savings' },
-];
 
 storiesOf('Select', module)
 
   .addDecorator(decorateWithSimpleTheme)
+  .addDecorator(withKnobs)
 
   // ====== Stories ======
 
@@ -71,6 +50,7 @@ storiesOf('Select', module)
         value={store.state.value}
         onChange={value => store.set({ value })}
         options={COUNTRIES}
+        hasSearch={boolean('hasSearch', true)}
       />
     ))
   )
@@ -81,7 +61,8 @@ storiesOf('Select', module)
         label="Select a country"
         value={store.state.value}
         onChange={value => store.set({ value })}
-        options={COUNTRIES}
+        options={boolean('Long list?') ? COUNTRIES_LONG_LIST : COUNTRIES}
+        hasSearch={boolean('hasSearch')}
       />
     ))
   )
@@ -93,6 +74,7 @@ storiesOf('Select', module)
         onChange={value => store.set({ value })}
         options={COUNTRIES}
         placeholder="Select your country …"
+        hasSearch={boolean('hasSearch')}
       />
     ))
   )
@@ -103,24 +85,7 @@ storiesOf('Select', module)
         value={store.state.value}
         onChange={value => store.set({ value })}
         options={COUNTRIES}
-      />
-    ))
-  )
-
-  .add('with search',
-    withState({ value: '' }, store => (
-      <Select
-        value={store.state.value}
-        onChange={value => store.set({ value })}
-        options={[
-          ...COUNTRIES.slice(0,1),
-          {
-            ...COUNTRIES[2],
-            label: 'The United Kingdom of Great Britain',
-          },
-          ...COUNTRIES.slice(2)
-        ]}
-        hasSearch
+        hasSearch={boolean('hasSearch')}
       />
     ))
   )
@@ -130,8 +95,8 @@ storiesOf('Select', module)
       <Select
         value={store.state.value}
         onChange={value => store.set({ value })}
-        options={countries}
-        hasSearch
+        options={COUNTRIES_LONG_LIST}
+        hasS earch
       />
     ))
   )
@@ -171,6 +136,7 @@ storiesOf('Select', module)
         value={store.state.value}
         onChange={value => store.set({ value })}
         options={COUNTRIES}
+        hasSearch={boolean('hasSearch')}
       />
     ))
   )
@@ -188,59 +154,7 @@ storiesOf('Select', module)
           </div>
           )}
         optionHeight={56}
-      />
-    ))
-  )
-
-  .add('custom options template and search',
-    withState({ value: '' }, store => (
-      <Select
-        value={store.state.value}
-        onChange={value => store.set({ value })}
-        options={COUNTRIES_WITH_FLAGS}
-        optionRenderer={option => (
-          <div className={styles.customOption}>
-            <img src={option.flag} />
-            <span>{option.label}</span>
-          </div>
-          )}
-        optionHeight={56}
-        hasSearch
-      />
-    ))
-  )
-
-  .add('custom options template and custom search',
-    withState({ value: '' }, store => (
-      <Select
-        value={store.state.value}
-        onChange={value => store.set({ value })}
-        options={COUNTRIES_WITH_FLAGS}
-        optionRenderer={option => (
-          <div className={styles.customOption}>
-            <img src={option.flag} />
-            <span>{option.label}</span>
-          </div>
-        )}
-        optionHeight={56}
-        hasSearch
-        onSearch={(searchValue: string) => {
-          const regex = new RegExp(searchValue, "i");
-          return COUNTRIES_WITH_FLAGS
-            .filter((option) => {
-              const { label, value } = option;
-              const regex = new RegExp(searchValue, "i");
-              return regex.test(label) || regex.test(value);
-            })
-            .map((option) => {
-              const { label, value, ...rest } = option;
-              return {
-                ...rest,
-                value,
-                label: `${label} (${value})`,
-              }
-            })
-        }}
+        hasSearch={boolean('hasSearch')}
       />
     ))
   )
@@ -255,6 +169,7 @@ storiesOf('Select', module)
         value={store.state.value}
         onChange={value => store.set({ value })}
         options={COUNTRIES}
+        hasSearch={boolean('hasSearch')}
       />
     ))
   )
@@ -267,6 +182,7 @@ storiesOf('Select', module)
         label="Countries (has disabled options)"
         options={COUNTRIES_WITH_DISABLED_OPTIONS}
         placeholder="Select your country …"
+        hasSearch={boolean('hasSearch')}
       />
     ))
   )
@@ -278,7 +194,7 @@ storiesOf('Select', module)
           value={store.state.value}
           onChange={value => store.set({ value })}
           options={COUNTRIES}
-          hasSearch
+          hasSearch={boolean('hasSearch')}
         />
       </div>
     ))
@@ -293,6 +209,7 @@ storiesOf('Select', module)
         label="Countries (has disabled options)"
         options={COUNTRIES_WITH_DISABLED_OPTIONS}
         placeholder="Select your country …"
+        hasSearch={boolean('hasSearch')}
       />
     ))
   )
@@ -314,7 +231,8 @@ storiesOf('Select', module)
                 <Select
                   value={store.state.value}
                   onChange={value => store.set({ value })}
-                  options={COUNTRIES}
+                  options={COUNTRIES_LONG_LIST}
+                  hasSearch={boolean('hasSearch')}
                 />
               </div>
               <div className={styles.actions}>
@@ -361,6 +279,7 @@ storiesOf('Select', module)
           </div>
         )}
         optionHeight={63}
+        hasSearch={boolean('hasSearch')}
       />
     ))
   );
diff --git a/stories/helpers/countries.json b/stories/helpers/countries.json
deleted file mode 100644
index 08f9d7d9..00000000
--- a/stories/helpers/countries.json
+++ /dev/null
@@ -1,974 +0,0 @@
-[
-  {
-    "label": "Afghanistan",
-    "value": "AF"
-  },
-  {
-    "label": "Åland Islands",
-    "value": "AX"
-  },
-  {
-    "label": "Albania",
-    "value": "AL"
-  },
-  {
-    "label": "Algeria",
-    "value": "DZ"
-  },
-  {
-    "label": "American Samoa",
-    "value": "AS"
-  },
-  {
-    "label": "AndorrA",
-    "value": "AD"
-  },
-  {
-    "label": "Angola",
-    "value": "AO"
-  },
-  {
-    "label": "Anguilla",
-    "value": "AI"
-  },
-  {
-    "label": "Antarctica",
-    "value": "AQ"
-  },
-  {
-    "label": "Antigua and Barbuda",
-    "value": "AG"
-  },
-  {
-    "label": "Argentina",
-    "value": "AR"
-  },
-  {
-    "label": "Armenia",
-    "value": "AM"
-  },
-  {
-    "label": "Aruba",
-    "value": "AW"
-  },
-  {
-    "label": "Australia",
-    "value": "AU"
-  },
-  {
-    "label": "Austria",
-    "value": "AT"
-  },
-  {
-    "label": "Azerbaijan",
-    "value": "AZ"
-  },
-  {
-    "label": "Bahamas",
-    "value": "BS"
-  },
-  {
-    "label": "Bahrain",
-    "value": "BH"
-  },
-  {
-    "label": "Bangladesh",
-    "value": "BD"
-  },
-  {
-    "label": "Barbados",
-    "value": "BB"
-  },
-  {
-    "label": "Belarus",
-    "value": "BY"
-  },
-  {
-    "label": "Belgium",
-    "value": "BE"
-  },
-  {
-    "label": "Belize",
-    "value": "BZ"
-  },
-  {
-    "label": "Benin",
-    "value": "BJ"
-  },
-  {
-    "label": "Bermuda",
-    "value": "BM"
-  },
-  {
-    "label": "Bhutan",
-    "value": "BT"
-  },
-  {
-    "label": "Bolivia",
-    "value": "BO"
-  },
-  {
-    "label": "Bosnia and Herzegovina",
-    "value": "BA"
-  },
-  {
-    "label": "Botswana",
-    "value": "BW"
-  },
-  {
-    "label": "Bouvet Island",
-    "value": "BV"
-  },
-  {
-    "label": "Brazil",
-    "value": "BR"
-  },
-  {
-    "label": "British Indian Ocean Territory",
-    "value": "IO"
-  },
-  {
-    "label": "Brunei Darussalam",
-    "value": "BN"
-  },
-  {
-    "label": "Bulgaria",
-    "value": "BG"
-  },
-  {
-    "label": "Burkina Faso",
-    "value": "BF"
-  },
-  {
-    "label": "Burundi",
-    "value": "BI"
-  },
-  {
-    "label": "Cambodia",
-    "value": "KH"
-  },
-  {
-    "label": "Cameroon",
-    "value": "CM"
-  },
-  {
-    "label": "Canada",
-    "value": "CA"
-  },
-  {
-    "label": "Cape Verde",
-    "value": "CV"
-  },
-  {
-    "label": "Cayman Islands",
-    "value": "KY"
-  },
-  {
-    "label": "Central African Republic",
-    "value": "CF"
-  },
-  {
-    "label": "Chad",
-    "value": "TD"
-  },
-  {
-    "label": "Chile",
-    "value": "CL"
-  },
-  {
-    "label": "China",
-    "value": "CN"
-  },
-  {
-    "label": "Christmas Island",
-    "value": "CX"
-  },
-  {
-    "label": "Cocos (Keeling) Islands",
-    "value": "CC"
-  },
-  {
-    "label": "Colombia",
-    "value": "CO"
-  },
-  {
-    "label": "Comoros",
-    "value": "KM"
-  },
-  {
-    "label": "Congo",
-    "value": "CG"
-  },
-  {
-    "label": "Congo, The Democratic Republic of the",
-    "value": "CD"
-  },
-  {
-    "label": "Cook Islands",
-    "value": "CK"
-  },
-  {
-    "label": "Costa Rica",
-    "value": "CR"
-  },
-  {
-    "label": "Cote D'Ivoire",
-    "value": "CI"
-  },
-  {
-    "label": "Croatia",
-    "value": "HR"
-  },
-  {
-    "label": "Cuba",
-    "value": "CU"
-  },
-  {
-    "label": "Cyprus",
-    "value": "CY"
-  },
-  {
-    "label": "Czech Republic",
-    "value": "CZ"
-  },
-  {
-    "label": "Denmark",
-    "value": "DK"
-  },
-  {
-    "label": "Djibouti",
-    "value": "DJ"
-  },
-  {
-    "label": "Dominica",
-    "value": "DM"
-  },
-  {
-    "label": "Dominican Republic",
-    "value": "DO"
-  },
-  {
-    "label": "Ecuador",
-    "value": "EC"
-  },
-  {
-    "label": "Egypt",
-    "value": "EG"
-  },
-  {
-    "label": "El Salvador",
-    "value": "SV"
-  },
-  {
-    "label": "Equatorial Guinea",
-    "value": "GQ"
-  },
-  {
-    "label": "Eritrea",
-    "value": "ER"
-  },
-  {
-    "label": "Estonia",
-    "value": "EE"
-  },
-  {
-    "label": "Ethiopia",
-    "value": "ET"
-  },
-  {
-    "label": "Falkland Islands (Malvinas)",
-    "value": "FK"
-  },
-  {
-    "label": "Faroe Islands",
-    "value": "FO"
-  },
-  {
-    "label": "Fiji",
-    "value": "FJ"
-  },
-  {
-    "label": "Finland",
-    "value": "FI"
-  },
-  {
-    "label": "France",
-    "value": "FR"
-  },
-  {
-    "label": "French Guiana",
-    "value": "GF"
-  },
-  {
-    "label": "French Polynesia",
-    "value": "PF"
-  },
-  {
-    "label": "French Southern Territories",
-    "value": "TF"
-  },
-  {
-    "label": "Gabon",
-    "value": "GA"
-  },
-  {
-    "label": "Gambia",
-    "value": "GM"
-  },
-  {
-    "label": "Georgia",
-    "value": "GE"
-  },
-  {
-    "label": "Germany",
-    "value": "DE"
-  },
-  {
-    "label": "Ghana",
-    "value": "GH"
-  },
-  {
-    "label": "Gibraltar",
-    "value": "GI"
-  },
-  {
-    "label": "Greece",
-    "value": "GR"
-  },
-  {
-    "label": "Greenland",
-    "value": "GL"
-  },
-  {
-    "label": "Grenada",
-    "value": "GD"
-  },
-  {
-    "label": "Guadeloupe",
-    "value": "GP"
-  },
-  {
-    "label": "Guam",
-    "value": "GU"
-  },
-  {
-    "label": "Guatemala",
-    "value": "GT"
-  },
-  {
-    "label": "Guernsey",
-    "value": "GG"
-  },
-  {
-    "label": "Guinea",
-    "value": "GN"
-  },
-  {
-    "label": "Guinea-Bissau",
-    "value": "GW"
-  },
-  {
-    "label": "Guyana",
-    "value": "GY"
-  },
-  {
-    "label": "Haiti",
-    "value": "HT"
-  },
-  {
-    "label": "Heard Island and Mcdonald Islands",
-    "value": "HM"
-  },
-  {
-    "label": "Holy See (Vatican City State)",
-    "value": "VA"
-  },
-  {
-    "label": "Honduras",
-    "value": "HN"
-  },
-  {
-    "label": "Hong Kong",
-    "value": "HK"
-  },
-  {
-    "label": "Hungary",
-    "value": "HU"
-  },
-  {
-    "label": "Iceland",
-    "value": "IS"
-  },
-  {
-    "label": "India",
-    "value": "IN"
-  },
-  {
-    "label": "Indonesia",
-    "value": "ID"
-  },
-  {
-    "label": "Iran, Islamic Republic Of",
-    "value": "IR"
-  },
-  {
-    "label": "Iraq",
-    "value": "IQ"
-  },
-  {
-    "label": "Ireland",
-    "value": "IE"
-  },
-  {
-    "label": "Isle of Man",
-    "value": "IM"
-  },
-  {
-    "label": "Israel",
-    "value": "IL"
-  },
-  {
-    "label": "Italy",
-    "value": "IT"
-  },
-  {
-    "label": "Jamaica",
-    "value": "JM"
-  },
-  {
-    "label": "Japan",
-    "value": "JP"
-  },
-  {
-    "label": "Jersey",
-    "value": "JE"
-  },
-  {
-    "label": "Jordan",
-    "value": "JO"
-  },
-  {
-    "label": "Kazakhstan",
-    "value": "KZ"
-  },
-  {
-    "label": "Kenya",
-    "value": "KE"
-  },
-  {
-    "label": "Kiribati",
-    "value": "KI"
-  },
-  {
-    "label": "Korea, Democratic People'S Republic of",
-    "value": "KP"
-  },
-  {
-    "label": "Korea, Republic of",
-    "value": "KR"
-  },
-  {
-    "label": "Kuwait",
-    "value": "KW"
-  },
-  {
-    "label": "Kyrgyzstan",
-    "value": "KG"
-  },
-  {
-    "label": "Lao People'S Democratic Republic",
-    "value": "LA"
-  },
-  {
-    "label": "Latvia",
-    "value": "LV"
-  },
-  {
-    "label": "Lebanon",
-    "value": "LB"
-  },
-  {
-    "label": "Lesotho",
-    "value": "LS"
-  },
-  {
-    "label": "Liberia",
-    "value": "LR"
-  },
-  {
-    "label": "Libyan Arab Jamahiriya",
-    "value": "LY"
-  },
-  {
-    "label": "Liechtenstein",
-    "value": "LI"
-  },
-  {
-    "label": "Lithuania",
-    "value": "LT"
-  },
-  {
-    "label": "Luxembourg",
-    "value": "LU"
-  },
-  {
-    "label": "Macao",
-    "value": "MO"
-  },
-  {
-    "label": "Macedonia, The Former Yugoslav Republic of",
-    "value": "MK"
-  },
-  {
-    "label": "Madagascar",
-    "value": "MG"
-  },
-  {
-    "label": "Malawi",
-    "value": "MW"
-  },
-  {
-    "label": "Malaysia",
-    "value": "MY"
-  },
-  {
-    "label": "Maldives",
-    "value": "MV"
-  },
-  {
-    "label": "Mali",
-    "value": "ML"
-  },
-  {
-    "label": "Malta",
-    "value": "MT"
-  },
-  {
-    "label": "Marshall Islands",
-    "value": "MH"
-  },
-  {
-    "label": "Martinique",
-    "value": "MQ"
-  },
-  {
-    "label": "Mauritania",
-    "value": "MR"
-  },
-  {
-    "label": "Mauritius",
-    "value": "MU"
-  },
-  {
-    "label": "Mayotte",
-    "value": "YT"
-  },
-  {
-    "label": "Mexico",
-    "value": "MX"
-  },
-  {
-    "label": "Micronesia, Federated States of",
-    "value": "FM"
-  },
-  {
-    "label": "Moldova, Republic of",
-    "value": "MD"
-  },
-  {
-    "label": "Monaco",
-    "value": "MC"
-  },
-  {
-    "label": "Mongolia",
-    "value": "MN"
-  },
-  {
-    "label": "Montserrat",
-    "value": "MS"
-  },
-  {
-    "label": "Morocco",
-    "value": "MA"
-  },
-  {
-    "label": "Mozambique",
-    "value": "MZ"
-  },
-  {
-    "label": "Myanmar",
-    "value": "MM"
-  },
-  {
-    "label": "Namibia",
-    "value": "NA"
-  },
-  {
-    "label": "Nauru",
-    "value": "NR"
-  },
-  {
-    "label": "Nepal",
-    "value": "NP"
-  },
-  {
-    "label": "Netherlands",
-    "value": "NL"
-  },
-  {
-    "label": "Netherlands Antilles",
-    "value": "AN"
-  },
-  {
-    "label": "New Caledonia",
-    "value": "NC"
-  },
-  {
-    "label": "New Zealand",
-    "value": "NZ"
-  },
-  {
-    "label": "Nicaragua",
-    "value": "NI"
-  },
-  {
-    "label": "Niger",
-    "value": "NE"
-  },
-  {
-    "label": "Nigeria",
-    "value": "NG"
-  },
-  {
-    "label": "Niue",
-    "value": "NU"
-  },
-  {
-    "label": "Norfolk Island",
-    "value": "NF"
-  },
-  {
-    "label": "Northern Mariana Islands",
-    "value": "MP"
-  },
-  {
-    "label": "Norway",
-    "value": "NO"
-  },
-  {
-    "label": "Oman",
-    "value": "OM"
-  },
-  {
-    "label": "Pakistan",
-    "value": "PK"
-  },
-  {
-    "label": "Palau",
-    "value": "PW"
-  },
-  {
-    "label": "Palestinian Territory, Occupied",
-    "value": "PS"
-  },
-  {
-    "label": "Panama",
-    "value": "PA"
-  },
-  {
-    "label": "Papua New Guinea",
-    "value": "PG"
-  },
-  {
-    "label": "Paraguay",
-    "value": "PY"
-  },
-  {
-    "label": "Peru",
-    "value": "PE"
-  },
-  {
-    "label": "Philippines",
-    "value": "PH"
-  },
-  {
-    "label": "Pitcairn",
-    "value": "PN"
-  },
-  {
-    "label": "Poland",
-    "value": "PL"
-  },
-  {
-    "label": "Portugal",
-    "value": "PT"
-  },
-  {
-    "label": "Puerto Rico",
-    "value": "PR"
-  },
-  {
-    "label": "Qatar",
-    "value": "QA"
-  },
-  {
-    "label": "Reunion",
-    "value": "RE"
-  },
-  {
-    "label": "Romania",
-    "value": "RO"
-  },
-  {
-    "label": "Russian Federation",
-    "value": "RU"
-  },
-  {
-    "label": "RWANDA",
-    "value": "RW"
-  },
-  {
-    "label": "Saint Helena",
-    "value": "SH"
-  },
-  {
-    "label": "Saint Kitts and Nevis",
-    "value": "KN"
-  },
-  {
-    "label": "Saint Lucia",
-    "value": "LC"
-  },
-  {
-    "label": "Saint Pierre and Miquelon",
-    "value": "PM"
-  },
-  {
-    "label": "Saint Vincent and the Grenadines",
-    "value": "VC"
-  },
-  {
-    "label": "Samoa",
-    "value": "WS"
-  },
-  {
-    "label": "San Marino",
-    "value": "SM"
-  },
-  {
-    "label": "Sao Tome and Principe",
-    "value": "ST"
-  },
-  {
-    "label": "Saudi Arabia",
-    "value": "SA"
-  },
-  {
-    "label": "Senegal",
-    "value": "SN"
-  },
-  {
-    "label": "Serbia and Montenegro",
-    "value": "CS"
-  },
-  {
-    "label": "Seychelles",
-    "value": "SC"
-  },
-  {
-    "label": "Sierra Leone",
-    "value": "SL"
-  },
-  {
-    "label": "Singapore",
-    "value": "SG"
-  },
-  {
-    "label": "Slovakia",
-    "value": "SK"
-  },
-  {
-    "label": "Slovenia",
-    "value": "SI"
-  },
-  {
-    "label": "Solomon Islands",
-    "value": "SB"
-  },
-  {
-    "label": "Somalia",
-    "value": "SO"
-  },
-  {
-    "label": "South Africa",
-    "value": "ZA"
-  },
-  {
-    "label": "South Georgia and the South Sandwich Islands",
-    "value": "GS"
-  },
-  {
-    "label": "Spain",
-    "value": "ES"
-  },
-  {
-    "label": "Sri Lanka",
-    "value": "LK"
-  },
-  {
-    "label": "Sudan",
-    "value": "SD"
-  },
-  {
-    "label": "Suriname",
-    "value": "SR"
-  },
-  {
-    "label": "Svalbard and Jan Mayen",
-    "value": "SJ"
-  },
-  {
-    "label": "Swaziland",
-    "value": "SZ"
-  },
-  {
-    "label": "Sweden",
-    "value": "SE"
-  },
-  {
-    "label": "Switzerland",
-    "value": "CH"
-  },
-  {
-    "label": "Syrian Arab Republic",
-    "value": "SY"
-  },
-  {
-    "label": "Taiwan, Province of China",
-    "value": "TW"
-  },
-  {
-    "label": "Tajikistan",
-    "value": "TJ"
-  },
-  {
-    "label": "Tanzania, United Republic of",
-    "value": "TZ"
-  },
-  {
-    "label": "Thailand",
-    "value": "TH"
-  },
-  {
-    "label": "Timor-Leste",
-    "value": "TL"
-  },
-  {
-    "label": "Togo",
-    "value": "TG"
-  },
-  {
-    "label": "Tokelau",
-    "value": "TK"
-  },
-  {
-    "label": "Tonga",
-    "value": "TO"
-  },
-  {
-    "label": "Trinidad and Tobago",
-    "value": "TT"
-  },
-  {
-    "label": "Tunisia",
-    "value": "TN"
-  },
-  {
-    "label": "Turkey",
-    "value": "TR"
-  },
-  {
-    "label": "Turkmenistan",
-    "value": "TM"
-  },
-  {
-    "label": "Turks and Caicos Islands",
-    "value": "TC"
-  },
-  {
-    "label": "Tuvalu",
-    "value": "TV"
-  },
-  {
-    "label": "Uganda",
-    "value": "UG"
-  },
-  {
-    "label": "Ukraine",
-    "value": "UA"
-  },
-  {
-    "label": "United Arab Emirates",
-    "value": "AE"
-  },
-  {
-    "label": "United Kingdom",
-    "value": "GB"
-  },
-  {
-    "label": "United States",
-    "value": "US"
-  },
-  {
-    "label": "United States Minor Outlying Islands",
-    "value": "UM"
-  },
-  {
-    "label": "Uruguay",
-    "value": "UY"
-  },
-  {
-    "label": "Uzbekistan",
-    "value": "UZ"
-  },
-  {
-    "label": "Vanuatu",
-    "value": "VU"
-  },
-  {
-    "label": "Venezuela",
-    "value": "VE"
-  },
-  {
-    "label": "Viet Nam",
-    "value": "VN"
-  },
-  {
-    "label": "Virgin Islands, British",
-    "value": "VG"
-  },
-  {
-    "label": "Virgin Islands, U.S.",
-    "value": "VI"
-  },
-  {
-    "label": "Wallis and Futuna",
-    "value": "WF"
-  },
-  {
-    "label": "Western Sahara",
-    "value": "EH"
-  },
-  {
-    "label": "Yemen",
-    "value": "YE"
-  },
-  {
-    "label": "Zambia",
-    "value": "ZM"
-  },
-  {
-    "label": "Zimbabwe",
-    "value": "ZW"
-  }
-]
diff --git a/stories/helpers/dummyData.js b/stories/helpers/dummyData.js
new file mode 100644
index 00000000..c9d2bb40
--- /dev/null
+++ b/stories/helpers/dummyData.js
@@ -0,0 +1,282 @@
+// @flow
+
+// images
+import flagEngland from '../images/gb.png';
+import flagSpain from '../images/es.png';
+import flagThailand from '../images/th.png';
+import flagUSA from '../images/us.png';
+
+export const WALLETS = [
+  { value: '100,100 ADA', label: 'Main wallet' },
+  { value: '10,100.2 ADA', label: 'Spending money' },
+  { value: '500,1000 ADA', label: 'Savings' },
+];
+
+export const COUNTRIES = [
+  { value: 'PT-br', label: 'Brazil' },
+  { value: 'EN-gb', label: 'England' },
+  { value: 'PT-pt', label: 'Portugal' },
+  { value: 'ES-es', label: 'Spain' },
+  { value: 'TH-th', label: 'Thailand' },
+  { value: 'EN-en', label: 'USA' },
+];
+
+export const COUNTRIES_WITH_FLAGS = [
+  { value: 'EN-gb', label: 'England', flag: flagEngland },
+  { value: 'ES-es', label: 'Spain', flag: flagSpain },
+  { value: 'TH-th', label: 'Thailand', flag: flagThailand },
+  { value: 'EN-en', label: 'USA', flag: flagUSA },
+];
+
+export const COUNTRIES_WITH_DISABLED_OPTIONS = [
+  { value: 'EN-gb', label: 'England' },
+  { value: 'ES-es', label: 'Spain' },
+  { value: 'TH-th', label: 'Thailand', isDisabled: true },
+  { value: 'EN-en', label: 'USA' },
+];
+
+export const COUNTRIES_LONG_LIST = [
+  { label: 'Afghanistan', value: 'AF' },
+  { label: 'Åland Islands', value: 'AX' },
+  { label: 'Albania', value: 'AL' },
+  { label: 'Algeria', value: 'DZ' },
+  { label: 'American Samoa', value: 'AS' },
+  { label: 'AndorrA', value: 'AD' },
+  { label: 'Angola', value: 'AO' },
+  { label: 'Anguilla', value: 'AI' },
+  { label: 'Antarctica', value: 'AQ' },
+  { label: 'Antigua and Barbuda', value: 'AG' },
+  { label: 'Argentina', value: 'AR' },
+  { label: 'Armenia', value: 'AM' },
+  { label: 'Aruba', value: 'AW' },
+  { label: 'Australia', value: 'AU' },
+  { label: 'Austria', value: 'AT' },
+  { label: 'Azerbaijan', value: 'AZ' },
+  { label: 'Bahamas', value: 'BS' },
+  { label: 'Bahrain', value: 'BH' },
+  { label: 'Bangladesh', value: 'BD' },
+  { label: 'Barbados', value: 'BB' },
+  { label: 'Belarus', value: 'BY' },
+  { label: 'Belgium', value: 'BE' },
+  { label: 'Belize', value: 'BZ' },
+  { label: 'Benin', value: 'BJ' },
+  { label: 'Bermuda', value: 'BM' },
+  { label: 'Bhutan', value: 'BT' },
+  { label: 'Bolivia', value: 'BO' },
+  { label: 'Bosnia and Herzegovina', value: 'BA' },
+  { label: 'Botswana', value: 'BW' },
+  { label: 'Bouvet Island', value: 'BV' },
+  { label: 'Brazil', value: 'BR' },
+  // { label: 'British Indian Ocean Territory', value: 'IO' },
+  // { label: 'Brunei Darussalam', value: 'BN' },
+  // { label: 'Bulgaria', value: 'BG' },
+  // { label: 'Burkina Faso', value: 'BF' },
+  // { label: 'Burundi', value: 'BI' },
+  // { label: 'Cambodia', value: 'KH' },
+  // { label: 'Cameroon', value: 'CM' },
+  // { label: 'Canada', value: 'CA' },
+  // { label: 'Cape Verde', value: 'CV' },
+  // { label: 'Cayman Islands', value: 'KY' },
+  // { label: 'Central African Republic', value: 'CF' },
+  // { label: 'Chad', value: 'TD' },
+  // { label: 'Chile', value: 'CL' },
+  // { label: 'China', value: 'CN' },
+  // { label: 'Christmas Island', value: 'CX' },
+  // { label: 'Cocos (Keeling) Islands', value: 'CC' },
+  // { label: 'Colombia', value: 'CO' },
+  // { label: 'Comoros', value: 'KM' },
+  // { label: 'Congo', value: 'CG' },
+  // { label: 'Congo, The Democratic Republic of the', value: 'CD' },
+  // { label: 'Cook Islands', value: 'CK' },
+  // { label: 'Costa Rica', value: 'CR' },
+  // { label: "Cote D'Ivoire", value: 'CI' },
+  // { label: 'Croatia', value: 'HR' },
+  // { label: 'Cuba', value: 'CU' },
+  // { label: 'Cyprus', value: 'CY' },
+  // { label: 'Czech Republic', value: 'CZ' },
+  // { label: 'Denmark', value: 'DK' },
+  // { label: 'Djibouti', value: 'DJ' },
+  // { label: 'Dominica', value: 'DM' },
+  // { label: 'Dominican Republic', value: 'DO' },
+  // { label: 'Ecuador', value: 'EC' },
+  // { label: 'Egypt', value: 'EG' },
+  // { label: 'El Salvador', value: 'SV' },
+  // { label: 'Equatorial Guinea', value: 'GQ' },
+  // { label: 'Eritrea', value: 'ER' },
+  // { label: 'Estonia', value: 'EE' },
+  // { label: 'Ethiopia', value: 'ET' },
+  // { label: 'Falkland Islands (Malvinas)', value: 'FK' },
+  // { label: 'Faroe Islands', value: 'FO' },
+  // { label: 'Fiji', value: 'FJ' },
+  // { label: 'Finland', value: 'FI' },
+  // { label: 'France', value: 'FR' },
+  // { label: 'French Guiana', value: 'GF' },
+  // { label: 'French Polynesia', value: 'PF' },
+  // { label: 'French Southern Territories', value: 'TF' },
+  // { label: 'Gabon', value: 'GA' },
+  // { label: 'Gambia', value: 'GM' },
+  // { label: 'Georgia', value: 'GE' },
+  // { label: 'Germany', value: 'DE' },
+  // { label: 'Ghana', value: 'GH' },
+  // { label: 'Gibraltar', value: 'GI' },
+  // { label: 'Greece', value: 'GR' },
+  // { label: 'Greenland', value: 'GL' },
+  // { label: 'Grenada', value: 'GD' },
+  // { label: 'Guadeloupe', value: 'GP' },
+  // { label: 'Guam', value: 'GU' },
+  // { label: 'Guatemala', value: 'GT' },
+  // { label: 'Guernsey', value: 'GG' },
+  // { label: 'Guinea', value: 'GN' },
+  // { label: 'Guinea-Bissau', value: 'GW' },
+  // { label: 'Guyana', value: 'GY' },
+  // { label: 'Haiti', value: 'HT' },
+  // { label: 'Heard Island and Mcdonald Islands', value: 'HM' },
+  // { label: 'Holy See (Vatican City State)', value: 'VA' },
+  // { label: 'Honduras', value: 'HN' },
+  // { label: 'Hong Kong', value: 'HK' },
+  // { label: 'Hungary', value: 'HU' },
+  // { label: 'Iceland', value: 'IS' },
+  // { label: 'India', value: 'IN' },
+  // { label: 'Indonesia', value: 'ID' },
+  // { label: 'Iran, Islamic Republic Of', value: 'IR' },
+  // { label: 'Iraq', value: 'IQ' },
+  // { label: 'Ireland', value: 'IE' },
+  // { label: 'Isle of Man', value: 'IM' },
+  // { label: 'Israel', value: 'IL' },
+  // { label: 'Italy', value: 'IT' },
+  // { label: 'Jamaica', value: 'JM' },
+  // { label: 'Japan', value: 'JP' },
+  // { label: 'Jersey', value: 'JE' },
+  // { label: 'Jordan', value: 'JO' },
+  // { label: 'Kazakhstan', value: 'KZ' },
+  // { label: 'Kenya', value: 'KE' },
+  // { label: 'Kiribati', value: 'KI' },
+  // { label: "Korea, Democratic People'S Republic of", value: 'KP' },
+  // { label: 'Korea, Republic of', value: 'KR' },
+  // { label: 'Kuwait', value: 'KW' },
+  // { label: 'Kyrgyzstan', value: 'KG' },
+  // { label: "Lao People'S Democratic Republic", value: 'LA' },
+  // { label: 'Latvia', value: 'LV' },
+  // { label: 'Lebanon', value: 'LB' },
+  // { label: 'Lesotho', value: 'LS' },
+  // { label: 'Liberia', value: 'LR' },
+  // { label: 'Libyan Arab Jamahiriya', value: 'LY' },
+  // { label: 'Liechtenstein', value: 'LI' },
+  // { label: 'Lithuania', value: 'LT' },
+  // { label: 'Luxembourg', value: 'LU' },
+  // { label: 'Macao', value: 'MO' },
+  // { label: 'Macedonia, The Former Yugoslav Republic of', value: 'MK' },
+  // { label: 'Madagascar', value: 'MG' },
+  // { label: 'Malawi', value: 'MW' },
+  // { label: 'Malaysia', value: 'MY' },
+  // { label: 'Maldives', value: 'MV' },
+  // { label: 'Mali', value: 'ML' },
+  // { label: 'Malta', value: 'MT' },
+  // { label: 'Marshall Islands', value: 'MH' },
+  // { label: 'Martinique', value: 'MQ' },
+  // { label: 'Mauritania', value: 'MR' },
+  // { label: 'Mauritius', value: 'MU' },
+  // { label: 'Mayotte', value: 'YT' },
+  // { label: 'Mexico', value: 'MX' },
+  // { label: 'Micronesia, Federated States of', value: 'FM' },
+  // { label: 'Moldova, Republic of', value: 'MD' },
+  // { label: 'Monaco', value: 'MC' },
+  // { label: 'Mongolia', value: 'MN' },
+  // { label: 'Montserrat', value: 'MS' },
+  // { label: 'Morocco', value: 'MA' },
+  // { label: 'Mozambique', value: 'MZ' },
+  // { label: 'Myanmar', value: 'MM' },
+  // { label: 'Namibia', value: 'NA' },
+  // { label: 'Nauru', value: 'NR' },
+  // { label: 'Nepal', value: 'NP' },
+  // { label: 'Netherlands', value: 'NL' },
+  // { label: 'Netherlands Antilles', value: 'AN' },
+  // { label: 'New Caledonia', value: 'NC' },
+  // { label: 'New Zealand', value: 'NZ' },
+  // { label: 'Nicaragua', value: 'NI' },
+  // { label: 'Niger', value: 'NE' },
+  // { label: 'Nigeria', value: 'NG' },
+  // { label: 'Niue', value: 'NU' },
+  // { label: 'Norfolk Island', value: 'NF' },
+  // { label: 'Northern Mariana Islands', value: 'MP' },
+  // { label: 'Norway', value: 'NO' },
+  // { label: 'Oman', value: 'OM' },
+  // { label: 'Pakistan', value: 'PK' },
+  // { label: 'Palau', value: 'PW' },
+  // { label: 'Palestinian Territory, Occupied', value: 'PS' },
+  // { label: 'Panama', value: 'PA' },
+  // { label: 'Papua New Guinea', value: 'PG' },
+  // { label: 'Paraguay', value: 'PY' },
+  // { label: 'Peru', value: 'PE' },
+  // { label: 'Philippines', value: 'PH' },
+  // { label: 'Pitcairn', value: 'PN' },
+  // { label: 'Poland', value: 'PL' },
+  // { label: 'Portugal', value: 'PT' },
+  // { label: 'Puerto Rico', value: 'PR' },
+  // { label: 'Qatar', value: 'QA' },
+  // { label: 'Reunion', value: 'RE' },
+  // { label: 'Romania', value: 'RO' },
+  // { label: 'Russian Federation', value: 'RU' },
+  // { label: 'RWANDA', value: 'RW' },
+  // { label: 'Saint Helena', value: 'SH' },
+  // { label: 'Saint Kitts and Nevis', value: 'KN' },
+  // { label: 'Saint Lucia', value: 'LC' },
+  // { label: 'Saint Pierre and Miquelon', value: 'PM' },
+  // { label: 'Saint Vincent and the Grenadines', value: 'VC' },
+  // { label: 'Samoa', value: 'WS' },
+  // { label: 'San Marino', value: 'SM' },
+  // { label: 'Sao Tome and Principe', value: 'ST' },
+  // { label: 'Saudi Arabia', value: 'SA' },
+  // { label: 'Senegal', value: 'SN' },
+  // { label: 'Serbia and Montenegro', value: 'CS' },
+  // { label: 'Seychelles', value: 'SC' },
+  // { label: 'Sierra Leone', value: 'SL' },
+  // { label: 'Singapore', value: 'SG' },
+  // { label: 'Slovakia', value: 'SK' },
+  // { label: 'Slovenia', value: 'SI' },
+  // { label: 'Solomon Islands', value: 'SB' },
+  // { label: 'Somalia', value: 'SO' },
+  // { label: 'South Africa', value: 'ZA' },
+  // { label: 'South Georgia and the South Sandwich Islands', value: 'GS' },
+  // { label: 'Spain', value: 'ES' },
+  // { label: 'Sri Lanka', value: 'LK' },
+  // { label: 'Sudan', value: 'SD' },
+  // { label: 'Suriname', value: 'SR' },
+  // { label: 'Svalbard and Jan Mayen', value: 'SJ' },
+  // { label: 'Swaziland', value: 'SZ' },
+  // { label: 'Sweden', value: 'SE' },
+  // { label: 'Switzerland', value: 'CH' },
+  // { label: 'Syrian Arab Republic', value: 'SY' },
+  // { label: 'Taiwan, Province of China', value: 'TW' },
+  // { label: 'Tajikistan', value: 'TJ' },
+  // { label: 'Tanzania, United Republic of', value: 'TZ' },
+  // { label: 'Thailand', value: 'TH' },
+  // { label: 'Timor-Leste', value: 'TL' },
+  // { label: 'Togo', value: 'TG' },
+  // { label: 'Tokelau', value: 'TK' },
+  // { label: 'Tonga', value: 'TO' },
+  // { label: 'Trinidad and Tobago', value: 'TT' },
+  // { label: 'Tunisia', value: 'TN' },
+  // { label: 'Turkey', value: 'TR' },
+  // { label: 'Turkmenistan', value: 'TM' },
+  // { label: 'Turks and Caicos Islands', value: 'TC' },
+  // { label: 'Tuvalu', value: 'TV' },
+  // { label: 'Uganda', value: 'UG' },
+  // { label: 'Ukraine', value: 'UA' },
+  // { label: 'United Arab Emirates', value: 'AE' },
+  // { label: 'United Kingdom', value: 'GB' },
+  // { label: 'United States', value: 'US' },
+  // { label: 'United States Minor Outlying Islands', value: 'UM' },
+  // { label: 'Uruguay', value: 'UY' },
+  // { label: 'Uzbekistan', value: 'UZ' },
+  // { label: 'Vanuatu', value: 'VU' },
+  // { label: 'Venezuela', value: 'VE' },
+  // { label: 'Viet Nam', value: 'VN' },
+  // { label: 'Virgin Islands, British', value: 'VG' },
+  // { label: 'Virgin Islands, U.S.', value: 'VI' },
+  // { label: 'Wallis and Futuna', value: 'WF' },
+  // { label: 'Western Sahara', value: 'EH' },
+  // { label: 'Yemen', value: 'YE' },
+  // { label: 'Zambia', value: 'ZM' },
+  // { label: 'Zimbabwe', value: 'ZW' },
+];
diff --git a/storybook/addons.js b/storybook/addons.js
index f3da8a96..b3c5c37a 100644
--- a/storybook/addons.js
+++ b/storybook/addons.js
@@ -1,3 +1,4 @@
 // @flow
 import '@storybook/addon-actions/register';
 import '@dump247/storybook-state/register';
+import '@storybook/addon-knobs/register';
diff --git a/yarn.lock b/yarn.lock
index 939711a6..b8da3d6d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1921,6 +1921,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.7":
+  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/template@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -2060,6 +2067,16 @@
     "@emotion/utils" "0.11.2"
     "@emotion/weak-memoize" "0.2.4"
 
+"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
+  version "10.0.29"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
+  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
+  dependencies:
+    "@emotion/sheet" "0.9.4"
+    "@emotion/stylis" "0.8.5"
+    "@emotion/utils" "0.11.3"
+    "@emotion/weak-memoize" "0.2.5"
+
 "@emotion/core@^10.0.14":
   version "10.0.22"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.22.tgz#2ac7bcf9b99a1979ab5b0a876fbf37ab0688b177"
@@ -2072,6 +2089,18 @@
     "@emotion/sheet" "0.9.3"
     "@emotion/utils" "0.11.2"
 
+"@emotion/core@^10.0.9", "@emotion/core@^10.1.1":
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3"
+  integrity sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/cache" "^10.0.27"
+    "@emotion/css" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
 "@emotion/css@^10.0.22":
   version "10.0.22"
   resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.22.tgz#37b1abb6826759fe8ac0af0ac0034d27de6d1793"
@@ -2081,11 +2110,25 @@
     "@emotion/utils" "0.11.2"
     babel-plugin-emotion "^10.0.22"
 
+"@emotion/css@^10.0.27", "@emotion/css@^10.0.9":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
+  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
+  dependencies:
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+    babel-plugin-emotion "^10.0.27"
+
 "@emotion/hash@0.7.3":
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
   integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==
 
+"@emotion/hash@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
 "@emotion/is-prop-valid@0.8.5":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz#2dda0791f0eafa12b7a0a5b39858405cc7bde983"
@@ -2093,11 +2136,23 @@
   dependencies:
     "@emotion/memoize" "0.7.3"
 
+"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
 "@emotion/memoize@0.7.3":
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78"
   integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==
 
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/serialize@^0.11.12", "@emotion/serialize@^0.11.14":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.14.tgz#56a6d8d04d837cc5b0126788b2134c51353c6488"
@@ -2109,11 +2164,27 @@
     "@emotion/utils" "0.11.2"
     csstype "^2.5.7"
 
+"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
+  version "0.11.16"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
+  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
+  dependencies:
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/unitless" "0.7.5"
+    "@emotion/utils" "0.11.3"
+    csstype "^2.5.7"
+
 "@emotion/sheet@0.9.3":
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a"
   integrity sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==
 
+"@emotion/sheet@0.9.4":
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
+  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+
 "@emotion/styled-base@^10.0.23":
   version "10.0.24"
   resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.24.tgz#9497efd8902dfeddee89d24b0eeb26b0665bfe8b"
@@ -2124,6 +2195,16 @@
     "@emotion/serialize" "^0.11.14"
     "@emotion/utils" "0.11.2"
 
+"@emotion/styled-base@^10.0.27":
+  version "10.0.31"
+  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
+  integrity sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/is-prop-valid" "0.8.8"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+
 "@emotion/styled@^10.0.14":
   version "10.0.23"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.23.tgz#2f8279bd59b99d82deade76d1046249ddfab7c1b"
@@ -2132,26 +2213,54 @@
     "@emotion/styled-base" "^10.0.23"
     babel-plugin-emotion "^10.0.23"
 
+"@emotion/styled@^10.0.27":
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
+  integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
+  dependencies:
+    "@emotion/styled-base" "^10.0.27"
+    babel-plugin-emotion "^10.0.27"
+
 "@emotion/stylis@0.8.4":
   version "0.8.4"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c"
   integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==
 
+"@emotion/stylis@0.8.5":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
 "@emotion/unitless@0.7.4":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
   integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
 
+"@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==
+
 "@emotion/utils@0.11.2":
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.2.tgz#713056bfdffb396b0a14f1c8f18e7b4d0d200183"
   integrity sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==
 
+"@emotion/utils@0.11.3":
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
+  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+
 "@emotion/weak-memoize@0.2.4":
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
   integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==
 
+"@emotion/weak-memoize@0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@eslint/eslintrc@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.1.3.tgz#7d1a2b2358552cc04834c0979bd4275362e37085"
@@ -2432,6 +2541,11 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
+  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
+
 "@popperjs/core@^2.8.3":
   version "2.8.4"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.8.4.tgz#6f1744b0f69f507a433f42874cc3b2eb4b11b337"
@@ -2448,6 +2562,16 @@
     react-lifecycles-compat "^3.0.4"
     warning "^3.0.0"
 
+"@reach/router@^1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.4.tgz#d2574b19370a70c80480ed91f3da840136d10f8c"
+  integrity sha512-+mtn9wjlB9NN2CNnnC/BRYtwdKBfSyyasPYraNAyvaV1occr/5NnB4CVzjEZipNHwYebQwcndGUmpFzxAUoqSA==
+  dependencies:
+    create-react-context "0.3.0"
+    invariant "^2.2.3"
+    prop-types "^15.6.1"
+    react-lifecycles-compat "^3.0.4"
+
 "@sinonjs/commons@^1.7.0":
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.0.tgz#f90ffc52a2e519f018b13b6c4da03cbff36ebed6"
@@ -2475,6 +2599,31 @@
     react-inspector "^3.0.2"
     uuid "^3.3.2"
 
+"@storybook/addon-knobs@^6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-6.2.5.tgz#ec883f20bdb5940c061789e84134fb76ec32fc01"
+  integrity sha512-QaZQZaz8qB5TxeWnXKP0yDwvLgClCf2nfFjo0BEBcio6fZCZ1vXUz9v/ELu/vdGL0G03vkoYjGXYUXmcw+94+A==
+  dependencies:
+    "@storybook/addons" "6.2.5"
+    "@storybook/api" "6.2.5"
+    "@storybook/channels" "6.2.5"
+    "@storybook/client-api" "6.2.5"
+    "@storybook/components" "6.2.5"
+    "@storybook/core-events" "6.2.5"
+    "@storybook/theming" "6.2.5"
+    copy-to-clipboard "^3.3.1"
+    core-js "^3.8.2"
+    escape-html "^1.0.3"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    prop-types "^15.7.2"
+    qs "^6.10.0"
+    react-colorful "^5.0.1"
+    react-lifecycles-compat "^3.0.4"
+    react-select "^3.2.0"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/addons@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.2.8.tgz#f8bf8bd555b7a69fb1e9a52ab8cdb96384d931ff"
@@ -2488,6 +2637,21 @@
     global "^4.3.2"
     util-deprecate "^1.0.2"
 
+"@storybook/addons@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.2.5.tgz#28370a547b8d2f69a34c29520aa841961bac6b27"
+  integrity sha512-tRZYTxJ6FlOCoWG7mVJAzH4BIBPWyvryGprawdkWHUaVYQRMH58pU3ma7gxdYdgvV80eZe2BfEOLzvZJeV/GgA==
+  dependencies:
+    "@storybook/api" "6.2.5"
+    "@storybook/channels" "6.2.5"
+    "@storybook/client-logger" "6.2.5"
+    "@storybook/core-events" "6.2.5"
+    "@storybook/router" "6.2.5"
+    "@storybook/theming" "6.2.5"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/api@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.2.8.tgz#21f03df8041114eb929bd10b570a17f266568b7f"
@@ -2511,6 +2675,32 @@
     telejson "^3.0.2"
     util-deprecate "^1.0.2"
 
+"@storybook/api@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.2.5.tgz#fb22363c87c5e9dfb779d01513b8013bbdf2f560"
+  integrity sha512-iVRCPZ+QRAQs6ukBTiBEvEHhAQJJ3lxRz096grTZ5LZpY+89GcKlwaS1kAJ903+rFOxLDezJpHhS1cwSW2Kc8g==
+  dependencies:
+    "@reach/router" "^1.3.4"
+    "@storybook/channels" "6.2.5"
+    "@storybook/client-logger" "6.2.5"
+    "@storybook/core-events" "6.2.5"
+    "@storybook/csf" "0.0.1"
+    "@storybook/router" "6.2.5"
+    "@storybook/semver" "^7.3.2"
+    "@storybook/theming" "6.2.5"
+    "@types/reach__router" "^1.3.7"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+    store2 "^2.12.0"
+    telejson "^5.1.0"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/channel-postmessage@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-5.2.8.tgz#7a84869ce0fc270c3b5dcd7fa4ed798b6055816f"
@@ -2522,6 +2712,19 @@
     global "^4.3.2"
     telejson "^3.0.2"
 
+"@storybook/channel-postmessage@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.2.5.tgz#22b7069fe8961c23d4dbdb2a25d627f619ab90df"
+  integrity sha512-OK9xTWc13p9VwyA7t/fW8mJ2nhSpA08STFoe3aFH34v/r6LF+inLd+8Wg08S0XLaxd6lMjVoUapA24xUtGK9jw==
+  dependencies:
+    "@storybook/channels" "6.2.5"
+    "@storybook/client-logger" "6.2.5"
+    "@storybook/core-events" "6.2.5"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    qs "^6.10.0"
+    telejson "^5.1.0"
+
 "@storybook/channels@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.2.8.tgz#79a99ad85dcacb688073c22340c5b7d16b801202"
@@ -2529,6 +2732,15 @@
   dependencies:
     core-js "^3.0.1"
 
+"@storybook/channels@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.2.5.tgz#08814f20e6027afc091d3187c2984ae790bff17c"
+  integrity sha512-vjWALSurfPtc56Vc2E4N0mKniMA6axU0gH8LYEgUBmmicrzzwYX9fCPfEe0NT2GNW83HpU1h2UH/ojuty/NtMg==
+  dependencies:
+    core-js "^3.8.2"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/client-api@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-5.2.8.tgz#1de791f7888442287f848e5f544eb883c5edc0da"
@@ -2551,6 +2763,30 @@
     stable "^0.1.8"
     util-deprecate "^1.0.2"
 
+"@storybook/client-api@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.2.5.tgz#886f5cf2be59a7fcdbd49df5d9ead9b6ae4c22cb"
+  integrity sha512-p2T+WwiiNmn1xQDSha2fnDDDoOqvjKRUanyrozy9B9LhJefMFlJgpgm/N/0FYN/nsyKfDbJAXYqc0zY8DSDfxQ==
+  dependencies:
+    "@storybook/addons" "6.2.5"
+    "@storybook/channel-postmessage" "6.2.5"
+    "@storybook/channels" "6.2.5"
+    "@storybook/client-logger" "6.2.5"
+    "@storybook/core-events" "6.2.5"
+    "@storybook/csf" "0.0.1"
+    "@types/qs" "^6.9.5"
+    "@types/webpack-env" "^1.16.0"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+    stable "^0.1.8"
+    store2 "^2.12.0"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/client-logger@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.8.tgz#5affe2f9dbbee374721fd2e8729116f5ac39c779"
@@ -2558,6 +2794,14 @@
   dependencies:
     core-js "^3.0.1"
 
+"@storybook/client-logger@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.2.5.tgz#1cedc94dafce95c0388c0e643ab0743bf22160df"
+  integrity sha512-3sM2nCpa9ZYTLhOOpcWA2LfpV37TLJQG1XnJW+63IyBPJWn05thnJ3PVeazlit7JnY9o+i2VzjoHoPPk6TKpKQ==
+  dependencies:
+    core-js "^3.8.2"
+    global "^4.4.0"
+
 "@storybook/components@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.8.tgz#f5d4a06ba4ba8c700b2d962deae182105b72fb99"
@@ -2583,6 +2827,36 @@
     react-textarea-autosize "^7.1.0"
     simplebar-react "^1.0.0-alpha.6"
 
+"@storybook/components@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.2.5.tgz#e495a1095a99f81b94da7ee3a4cd73255f7216fa"
+  integrity sha512-wL5cUAkYAHXJ+mhfQUl1FTZYsu0iaRT6uvawiainGsp/ccFw42l49fUuSOtRIdU77IwNU+WfK8l3Vu4MJOVJLA==
+  dependencies:
+    "@popperjs/core" "^2.6.0"
+    "@storybook/client-logger" "6.2.5"
+    "@storybook/csf" "0.0.1"
+    "@storybook/theming" "6.2.5"
+    "@types/color-convert" "^2.0.0"
+    "@types/overlayscrollbars" "^1.12.0"
+    "@types/react-syntax-highlighter" "11.0.5"
+    color-convert "^2.0.1"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    markdown-to-jsx "^7.1.0"
+    memoizerific "^1.11.3"
+    overlayscrollbars "^1.13.1"
+    polished "^4.0.5"
+    prop-types "^15.7.2"
+    react-colorful "^5.0.1"
+    react-popper-tooltip "^3.1.1"
+    react-syntax-highlighter "^13.5.3"
+    react-textarea-autosize "^8.3.0"
+    regenerator-runtime "^0.13.7"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/core-events@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.2.8.tgz#93fc458ea0820ff1409d268b0fe51abba200f5a4"
@@ -2590,6 +2864,13 @@
   dependencies:
     core-js "^3.0.1"
 
+"@storybook/core-events@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.2.5.tgz#67a30feff3893efb78ef5ecf7bee242a3252d348"
+  integrity sha512-cEFUrhnd9fgsfqwFHS+eXL6AQQ7Z9ZCa2r79QFJf0cEmQ53BY8ay0x8TzHpF9REGzX/TlqAhEAVo2iQn7ngFiw==
+  dependencies:
+    core-js "^3.8.2"
+
 "@storybook/core@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/core/-/core-5.2.8.tgz#3f6ddbacc705c1893deb15582c3a0a1ecd882cd1"
@@ -2664,6 +2945,13 @@
     webpack-dev-middleware "^3.7.0"
     webpack-hot-middleware "^2.25.0"
 
+"@storybook/csf@0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6"
+  integrity sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==
+  dependencies:
+    lodash "^4.17.15"
+
 "@storybook/node-logger@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-5.2.8.tgz#4a3df21d731014d54b9ca53d5b9a72dd350bb075"
@@ -2716,6 +3004,30 @@
     memoizerific "^1.11.3"
     qs "^6.6.0"
 
+"@storybook/router@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.2.5.tgz#51b2f8786d7b08c77e1453998605082a1b7d4437"
+  integrity sha512-Cs6t3eSZ1Pqbld+cKx8K7YFVyrXvJtOcqG9NMCmx9NZjWRfMlorstWSDdTnk4uTHenXH99Y/uUNZCHRgf+Jt/A==
+  dependencies:
+    "@reach/router" "^1.3.4"
+    "@storybook/client-logger" "6.2.5"
+    "@types/reach__router" "^1.3.7"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.20"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    ts-dedent "^2.0.0"
+
+"@storybook/semver@^7.3.2":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0"
+  integrity sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==
+  dependencies:
+    core-js "^3.6.5"
+    find-up "^4.1.0"
+
 "@storybook/theming@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.8.tgz#a4c9e0e9a5789c1aa71e4fcb7a8ee86efe3dadcf"
@@ -2734,6 +3046,24 @@
     prop-types "^15.7.2"
     resolve-from "^5.0.0"
 
+"@storybook/theming@6.2.5":
+  version "6.2.5"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.2.5.tgz#c72ea11e307440e49b4b8ff86916bac8998e0c88"
+  integrity sha512-DXLYggY6XUYD3cuFFas+7JZZP54a3MkKgQbxm3hYzS0D1mbG2gbjukuXtuN9WMoBEXgdRtYfySHX45NF29ZxzA==
+  dependencies:
+    "@emotion/core" "^10.1.1"
+    "@emotion/is-prop-valid" "^0.8.6"
+    "@emotion/styled" "^10.0.27"
+    "@storybook/client-logger" "6.2.5"
+    core-js "^3.8.2"
+    deep-object-diff "^1.1.0"
+    emotion-theming "^10.0.27"
+    global "^4.4.0"
+    memoizerific "^1.11.3"
+    polished "^4.0.5"
+    resolve-from "^5.0.0"
+    ts-dedent "^2.0.0"
+
 "@storybook/ui@5.2.8":
   version "5.2.8"
   resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-5.2.8.tgz#da8afca9eb29a40ef3ddc6a9f6e76d7a3344f2ef"
@@ -2916,7 +3246,14 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
-"@types/color-name@^1.1.1":
+"@types/color-convert@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.0.tgz#8f5ee6b9e863dcbee5703f5a517ffb13d3ea4e22"
+  integrity sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==
+  dependencies:
+    "@types/color-name" "*"
+
+"@types/color-name@*", "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
@@ -2940,6 +3277,13 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/hast@^2.0.0":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.1.tgz#b16872f2a6144c7025f296fb9636a667ebb79cd9"
+  integrity sha512-viwwrB+6xGzw+G1eWpF9geV3fnsDgXqHG+cqgiHrvQfDUW5hzhCyV7Sy3UJxhfRFBsgky2SSW33qi/YrIkjX5Q==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/history@*":
   version "4.7.3"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"
@@ -2990,6 +3334,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.1.2.tgz#1b928a0baa408fc8ae3ac012cc81375addc147c6"
   integrity sha512-bjk1RIeZBCe/WukrFToIVegOf91Pebr8cXYBwLBIsfiGWVQ+ifwWsT59H3RxrWzWrzd1l/Amk1/ioY5Fq3/bpA==
 
+"@types/overlayscrollbars@^1.12.0":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/@types/overlayscrollbars/-/overlayscrollbars-1.12.0.tgz#98456caceca8ad73bd5bb572632a585074e70764"
+  integrity sha512-h/pScHNKi4mb+TrJGDon8Yb06ujFG0mSg12wIO0sWMUF3dQIe2ExRRdNRviaNt9IjxIiOfnRr7FsQAdHwK4sMg==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -3005,6 +3354,11 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
+"@types/qs@^6.9.5":
+  version "6.9.6"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.6.tgz#df9c3c8b31a247ec315e6996566be3171df4b3b1"
+  integrity sha512-0/HnwIfW4ki2D8L8c9GVcG5I72s9jP5GSLVF0VIXDW00kmIpA6O33G7a8n59Tmh7Nz0WUC3rSb7PTY/sdW2JzA==
+
 "@types/reach__router@^1.2.3":
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.2.6.tgz#b14cf1adbd1a365d204bbf6605cd9dd7b8816c87"
@@ -3013,6 +3367,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/reach__router@^1.3.7":
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.3.7.tgz#de8ab374259ae7f7499fc1373b9697a5f3cd6428"
+  integrity sha512-cyBEb8Ef3SJNH5NYEIDGPoMMmYUxROatuxbICusVRQIqZUB85UCt6R2Ok60tKS/TABJsJYaHyNTW3kqbpxlMjg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-syntax-highlighter@10.1.0":
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-10.1.0.tgz#9c534e29bbe05dba9beae1234f3ae944836685d4"
@@ -3020,6 +3381,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-syntax-highlighter@11.0.5":
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087"
+  integrity sha512-VIOi9i2Oj5XsmWWoB72p3KlZoEbdRAcechJa8Ztebw7bDl2YmR+odxIqhtJGp1q2EozHs02US+gzxJ9nuf56qg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-textarea-autosize@^4.3.3":
   version "4.3.5"
   resolved "https://registry.yarnpkg.com/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.5.tgz#6c4d2753fa1864c98c0b2b517f67bb1f6e4c46de"
@@ -3040,11 +3408,21 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/unist@*":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
+  integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
+
 "@types/webpack-env@^1.13.7":
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.14.1.tgz#0d8a53f308f017c53a5ddc3d07f4d6fa76b790d7"
   integrity sha512-0Ki9jAAhKDSuLDXOIMADg54Hu60SuBTEsWaJGGy5cV+SSUQ63J2a+RrYYGrErzz39fXzTibhKrAQJAb8M7PNcA==
 
+"@types/webpack-env@^1.16.0":
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.0.tgz#8c0a9435dfa7b3b1be76562f3070efb3f92637b4"
+  integrity sha512-Fx+NpfOO0CpeYX2g9bkvX8O5qh9wrU1sOF4g8sft4Mu7z+qfe387YlyY8w8daDyDsKY5vUxM0yxkAYnbkRbZEw==
+
 "@types/yargs-parser@*":
   version "13.1.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
@@ -3995,6 +4373,22 @@ babel-plugin-emotion@^10.0.14, babel-plugin-emotion@^10.0.22, babel-plugin-emoti
     find-root "^1.1.0"
     source-map "^0.5.7"
 
+babel-plugin-emotion@^10.0.27:
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz#a1fe3503cff80abfd0bdda14abd2e8e57a79d17d"
+  integrity sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/serialize" "^0.11.16"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
 babel-plugin-istanbul@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
@@ -4639,6 +5033,14 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
 call-me-maybe@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
@@ -5255,6 +5657,13 @@ copy-to-clipboard@^3.0.8:
   dependencies:
     toggle-selection "^1.0.6"
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.1.1:
   version "3.4.5"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.4.5.tgz#f072059c0b98ad490eacac082296cfe241af1b58"
@@ -5301,6 +5710,11 @@ core-js@^3.0.1, core-js@^3.0.4:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.5.tgz#3dda65611d95699b5eb7742ea451ea052d37aa65"
   integrity sha512-OuvejWH6vIaUo59Ndlh89purNm4DCIy/v3QoYlcGnn+PkYI8BhNHfCuAESrWX+ZPfq9JccVJ+XXgOMy77PJexg==
 
+core-js@^3.6.5, core-js@^3.8.2:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.10.0.tgz#9a020547c8b6879f929306949e31496bbe2ae9b3"
+  integrity sha512-MQx/7TLgmmDVamSyfE+O+5BHvG1aUGj/gHhLn1wVtm2B5u1eVIPvh7vkfjwWKNCjrTJB8+He99IntSQ1qP+vYQ==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -5404,6 +5818,14 @@ create-react-context@0.2.2:
     fbjs "^0.8.0"
     gud "^1.0.0"
 
+create-react-context@0.3.0, create-react-context@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
+  integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
+  dependencies:
+    gud "^1.0.0"
+    warning "^4.0.3"
+
 create-react-context@^0.2.1:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
@@ -5412,14 +5834,6 @@ create-react-context@^0.2.1:
     fbjs "^0.8.0"
     gud "^1.0.0"
 
-create-react-context@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
-  integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
-  dependencies:
-    gud "^1.0.0"
-    warning "^4.0.3"
-
 cross-env@5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.0.tgz#6ecd4c015d5773e614039ee529076669b9d126f2"
@@ -5608,6 +6022,11 @@ csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
   integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==
 
+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"
@@ -5889,6 +6308,14 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
+dom-helpers@^5.0.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
+  integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@@ -6093,6 +6520,15 @@ emotion-theming@^10.0.14:
     "@emotion/weak-memoize" "0.2.4"
     hoist-non-react-statics "^3.3.0"
 
+emotion-theming@^10.0.27:
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10"
+  integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/weak-memoize" "0.2.5"
+    hoist-non-react-statics "^3.3.0"
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -6362,7 +6798,7 @@ escalade@^3.1.0:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.0.tgz#e8e2d7c7a8b76f6ee64c2181d6b8151441602d4e"
   integrity sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==
 
-escape-html@~1.0.3:
+escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
@@ -7023,6 +7459,11 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
   integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
 
+fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
 fast-glob@^2.0.2, fast-glob@^2.2.6:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -7050,6 +7491,13 @@ fast-password-entropy@1.1.1:
   resolved "https://registry.yarnpkg.com/fast-password-entropy/-/fast-password-entropy-1.1.1.tgz#47ba9933095fd5a32fb184915fc8e76ee19cf429"
   integrity sha512-dxm29/BPFrNgyEDygg/lf9c2xQR0vnQhG7+hZjAI39M/3um9fD4xiqG6F0ZjW6bya5m9CI0u6YryHGRtxCGCiw==
 
+fault@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
+  dependencies:
+    format "^0.2.0"
+
 fault@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.3.tgz#4da88cf979b6b792b4e13c7ec836767725170b7e"
@@ -7334,7 +7782,7 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
-format@^0.2.2:
+format@^0.2.0, format@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
@@ -7521,6 +7969,15 @@ get-caller-file@^2.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-intrinsic@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@@ -7888,11 +8345,27 @@ hastscript@^5.0.0:
     property-information "^5.0.0"
     space-separated-tokens "^1.0.0"
 
+hastscript@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
+  integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
 he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+highlight.js@^10.1.1, highlight.js@~10.7.0:
+  version "10.7.2"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.2.tgz#89319b861edc66c48854ed1e6da21ea89f847360"
+  integrity sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg==
+
 highlight.js@~9.12.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
@@ -8496,6 +8969,11 @@ is-function@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
   integrity sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=
 
+is-function@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
+  integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
+
 is-generator-fn@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
@@ -8660,6 +9138,14 @@ is-regex@^1.1.0, is-regex@^1.1.1:
   dependencies:
     has-symbols "^1.0.1"
 
+is-regex@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.2.tgz#81c8ebde4db142f2cf1c53fc86d6a45788266251"
+  integrity sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-symbols "^1.0.1"
+
 is-retry-allowed@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
@@ -9859,6 +10345,11 @@ lodash@^4.17.19:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.17.20, lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-symbols@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
@@ -9918,6 +10409,14 @@ lowercase-keys@^1.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
   integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
 
+lowlight@^1.14.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
+  integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
+  dependencies:
+    fault "^1.0.0"
+    highlight.js "~10.7.0"
+
 lowlight@~1.9.1:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.9.2.tgz#0b9127e3cec2c3021b7795dd81005c709a42fdd1"
@@ -10010,6 +10509,11 @@ markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
+markdown-to-jsx@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.1.2.tgz#19d3da4cd8864045cdd13a0d179147fbd6a088d4"
+  integrity sha512-O8DMCl32V34RrD+ZHxcAPc2+kYytuDIoQYjY36RVdsLK7uHjgNVvFec4yv0X6LgB4YEZgSvK5QtFi5YVqEpoMA==
+
 math-random@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
@@ -10033,6 +10537,11 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
+memoize-one@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
 memoizerific@^1.11.3:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -10772,6 +11281,11 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
+object-inspect@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
+  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
+
 object-is@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
@@ -11007,6 +11521,11 @@ osenv@0, osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
+overlayscrollbars@^1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/overlayscrollbars/-/overlayscrollbars-1.13.1.tgz#0b840a88737f43a946b9d87875a2f9e421d0338a"
+  integrity sha512-gIQfzgGgu1wy80EB4/6DaJGHMEGmizq27xHIESrzXq0Y/J0Ay1P3DWk6tuVmEPIZH15zaBlxeEJOqdJKmowHCQ==
+
 p-all@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-all/-/p-all-2.1.0.tgz#91419be56b7dee8fe4c5db875d55e0da084244a0"
@@ -11154,6 +11673,18 @@ parse-entities@^1.1.2:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-glob@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
@@ -11427,6 +11958,13 @@ polished@^3.3.1:
   dependencies:
     "@babel/runtime" "^7.6.3"
 
+polished@^4.0.5:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-4.1.1.tgz#40442cc973348e466f2918cdf647531bb6c29bfb"
+  integrity sha512-4MZTrfPMPRLD7ac8b+2JZxei58zw6N1hFkdBDERif5Tlj19y3vPoPusrLG+mJIlPTGnUlKw3+yWz0BazvMx1vg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 popper.js@1.16.1:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
@@ -11603,6 +12141,13 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
+prismjs@^1.21.0, prismjs@~1.23.0:
+  version "1.23.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
+  integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 prismjs@^1.8.4, prismjs@~1.17.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
@@ -11691,15 +12236,7 @@ prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.6.2:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
-  integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
-  dependencies:
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
-prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11708,6 +12245,14 @@ prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 property-information@^5.0.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.3.0.tgz#bc87ac82dc4e72a31bb62040544b1bf9653da039"
@@ -11816,6 +12361,13 @@ qs@6.7.0:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
+qs@^6.10.0:
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
+  integrity sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==
+  dependencies:
+    side-channel "^1.0.4"
+
 qs@^6.6.0:
   version "6.9.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.1.tgz#20082c65cb78223635ab1a9eaca8875a29bf8ec9"
@@ -11958,6 +12510,11 @@ react-clientside-effect@^1.2.0:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
+react-colorful@^5.0.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.1.1.tgz#b242a3a59dc2e740fef9ee072c1d8b49d3465b62"
+  integrity sha512-CNnpzPOMDUors/WcN23IUkBvdHuzJfr5UuZxW02TyVW5hCmFME3cbxucF26EujKyTt4ageBrLDyQ6JAtjGIzgQ==
+
 react-dev-utils@^9.0.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
@@ -12048,6 +12605,11 @@ react-fast-compare@^2.0.4:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-fast-compare@^3.0.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-focus-lock@^1.18.3:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.19.1.tgz#2f3429793edaefe2d077121f973ce5a3c7a0651a"
@@ -12076,6 +12638,13 @@ react-hotkeys@2.0.0-pre4:
   dependencies:
     prop-types "^15.6.1"
 
+react-input-autosize@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
+  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-inspector@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-3.0.2.tgz#c530a06101f562475537e47df428e1d7aff16ed8"
@@ -12126,6 +12695,15 @@ react-popper-tooltip@^2.8.3:
     "@babel/runtime" "^7.7.4"
     react-popper "^1.3.6"
 
+react-popper-tooltip@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz#329569eb7b287008f04fcbddb6370452ad3f9eac"
+  integrity sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@popperjs/core" "^2.5.4"
+    react-popper "^2.2.4"
+
 react-popper@^1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.6.tgz#32122f83af8fda01bdd4f86625ddacaf64fdd06d"
@@ -12138,6 +12716,14 @@ react-popper@^1.3.6:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-popper@^2.2.4:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96"
+  integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-scrollbars-custom@4.0.21:
   version "4.0.21"
   resolved "https://registry.yarnpkg.com/react-scrollbars-custom/-/react-scrollbars-custom-4.0.21.tgz#daab3104b9707033a5be29fdc5b7408dee41a5ad"
@@ -12147,6 +12733,20 @@ react-scrollbars-custom@4.0.21:
     react-draggable "^3.3.2"
     zoom-level "^1.2.4"
 
+react-select@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.2.0.tgz#de9284700196f5f9b5277c5d850a9ce85f5c72fe"
+  integrity sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@emotion/cache" "^10.0.9"
+    "@emotion/core" "^10.0.9"
+    "@emotion/css" "^10.0.9"
+    memoize-one "^5.0.0"
+    prop-types "^15.6.0"
+    react-input-autosize "^3.0.0"
+    react-transition-group "^4.3.0"
+
 react-sizeme@^2.6.7:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.10.tgz#9993dcb5e67fab94a8e5d078a0d3820609010f17"
@@ -12157,6 +12757,17 @@ react-sizeme@^2.6.7:
     shallowequal "^1.1.0"
     throttle-debounce "^2.1.0"
 
+react-syntax-highlighter@^13.5.3:
+  version "13.5.3"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz#9712850f883a3e19eb858cf93fad7bb357eea9c6"
+  integrity sha512-crPaF+QGPeHNIblxxCdf2Lg936NAHKhNhuMzRL3F9ct6aYXL3NcZtCL0Rms9+qVo6Y1EQLdXGypBNSbPL/r+qg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "^10.1.1"
+    lowlight "^1.14.0"
+    prismjs "^1.21.0"
+    refractor "^3.1.0"
+
 react-syntax-highlighter@^8.0.1:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz#59103ff17a828a27ed7c8f035ae2558f09b6b78c"
@@ -12193,6 +12804,25 @@ react-textarea-autosize@^7.1.0:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.0"
 
+react-textarea-autosize@^8.3.0:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.2.tgz#4f9374d357b0a6f6469956726722549124a1b2db"
+  integrity sha512-JrMWVgQSaExQByP3ggI1eA8zF4mF0+ddVuX7acUeK2V7bmrpjVOY72vmLz2IXFJSAXoY3D80nEzrn0GWajWK3Q==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    use-composed-ref "^1.0.0"
+    use-latest "^1.0.0"
+
+react-transition-group@^4.3.0:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -12376,6 +13006,15 @@ refractor@^2.4.1:
     parse-entities "^1.1.2"
     prismjs "~1.17.0"
 
+refractor@^3.1.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.3.1.tgz#ebbc04b427ea81dc25ad333f7f67a0b5f4f0be3a"
+  integrity sha512-vaN6R56kLMuBszHSWlwTpcZ8KTMG6aUCok4GrxYDT20UIOXxOc5o6oDc8tNTzSlH3m2sI+Eu9Jo2kVdDcUTWYw==
+  dependencies:
+    hastscript "^6.0.0"
+    parse-entities "^2.0.0"
+    prismjs "~1.23.0"
+
 regenerate-unicode-properties@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
@@ -12410,7 +13049,7 @@ regenerator-runtime@^0.13.2:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
   integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
 
-regenerator-runtime@^0.13.4:
+regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
@@ -13147,6 +13786,15 @@ side-channel@^1.0.2:
     es-abstract "^1.18.0-next.0"
     object-inspect "^1.8.0"
 
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -13421,6 +14069,11 @@ stealthy-require@^1.1.0, stealthy-require@^1.1.1:
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
   integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
 
+store2@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/store2/-/store2-2.12.0.tgz#e1f1b7e1a59b6083b2596a8d067f6ee88fd4d3cf"
+  integrity sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==
+
 store2@^2.7.1:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.10.0.tgz#46b82bb91878daf1b0d56dec2f1d41e54d5103cf"
@@ -13837,6 +14490,20 @@ telejson@^3.0.2:
     lodash "^4.17.15"
     memoizerific "^1.11.3"
 
+telejson@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/telejson/-/telejson-5.1.1.tgz#fd83b594ebddfaeb9a5c4b9660c302fc07c9a65c"
+  integrity sha512-aU7x+nwodmODJPXhU9sC/REOcX/dx1tNbyeOFV1PCTh6e9Mj+bnyfQ7sr13zfJYya9BtpGwnUNn9Fd76Ybj2eg==
+  dependencies:
+    "@types/is-function" "^1.0.0"
+    global "^4.4.0"
+    is-function "^1.0.2"
+    is-regex "^1.1.2"
+    is-symbol "^1.0.3"
+    isobject "^4.0.0"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
@@ -14066,6 +14733,16 @@ trim-newlines@^1.0.0:
   dependencies:
     glob "^7.1.2"
 
+ts-dedent@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.1.1.tgz#6dd56870bb5493895171334fa5d7e929107e5bbc"
+  integrity sha512-riHuwnzAUCfdIeTBNUq7+Yj+ANnrMXo/7+Z74dIdudS7ys2k8aSGMzpJRMFDF7CLwUTbtvi1ZZff/Wl+XxmqIA==
+
+ts-essentials@^2.0.3:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-2.0.12.tgz#c9303f3d74f75fa7528c3d49b80e089ab09d8745"
+  integrity sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==
+
 ts-pnp@^1.1.2:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec"
@@ -14365,6 +15042,25 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-composed-ref@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.1.0.tgz#9220e4e94a97b7b02d7d27eaeab0b37034438bbc"
+  integrity sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==
+  dependencies:
+    ts-essentials "^2.0.3"
+
+use-isomorphic-layout-effect@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz#7bb6589170cd2987a152042f9084f9effb75c225"
+  integrity sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==
+
+use-latest@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.0.tgz#a44f6572b8288e0972ec411bdd0840ada366f232"
+  integrity sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==
+  dependencies:
+    use-isomorphic-layout-effect "^1.0.0"
+
 use@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.0.tgz#14716bf03fdfefd03040aef58d8b4b85f3a7c544"

From b14deff023ed225b3c77436e08aeba018c78d5e1 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 7 Apr 2021 15:24:07 -0300
Subject: [PATCH 211/244] [DDW-620] Protect search input styling

---
 source/themes/simple/SimpleOptions.scss | 32 ++++++++++++++-----------
 source/themes/simple/SimpleSelect.scss  |  6 +++--
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index 197dbe84..f94d5619 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -23,23 +23,24 @@ $option-text-color: var(--rp-option-text-color, #5e6066) !default;
 $option-text-color-disabled: var(--rp-option-text-color-disabled, rgba(#5e6066, 0.5)) !default;
 
 // search
-$option-search-border-radius: var(--rp-option-search-border-radius, 0) !default;
-$option-search-border: var(--rp-option-search-border, none) !default;
 $option-search-box-shadow: var(--rp-option-search-box-shadow, 0 10px 10px -5px rgba(0, 0, 0, 0.12)) !default;
 $option-search-clear-button-bg-color: var(--rp-option-bg-color-highlighted, rgba(68, 91, 124, 0.1)) !default;
 $option-search-clear-icon-color: var(--rp-input-text-color, #5e6066) !default;
 $option-search-clear-icon-size: var(--rp-option-search-clear-icon-size, 8px) !default;
 $option-search-clear-icon-url: var(--rp-option-search-clear-icon-url, url("#{$theme-assets-path}/cross.svg")) !default;
-$option-search-height: var(--rp-option-search-height, 50px) !default;
 $option-search-highlight-background-color: var(--rp-option-search-icon-url, #f2a218) !default;
 $option-search-icon-color: var(--rp-input-text-color, #5e6066) !default;
-$option-search-icon-top-margin: var(--rp-option-search-icon-size, 16.5px) !default;
-$option-search-icon-side-margin: var(--rp-option-search-icon-size, 18.5px) !default;
 $option-search-icon-opacity: var(--rp-option-search-icon-opacity, 0.65) !default;
+$option-search-icon-side-margin: var(--rp-option-search-icon-size, 18.5px) !default;
 $option-search-icon-size: var(--rp-option-search-icon-size, 15px) !default;
+$option-search-icon-top-margin: var(--rp-option-search-icon-size, 16.5px) !default;
 $option-search-icon-url: var(--rp-option-search-icon-url, url("#{$theme-assets-path}/search.svg")) !default;
-$option-search-padding-clear-btn: var(--rp-option-search-padding-clear-btn, 60px) !default;
-$option-search-padding-magnifier: var(--rp-option-search-padding-magnifier, 43px) !default;
+$option-search-input-background-color: var(--rp-option-search-input-bg-color, #fafbfc);
+$option-search-input-border-radius: var(--rp-option-search-input-border-radius, 1px);
+$option-search-input-border: var(--rp-option-search-input-border, none);
+$option-search-input-height: var(--rp-option-search-height, 50px) !default;
+$option-search-input-padding-clear-btn: var(--rp-option-search-input-padding-clear-btn, 60px) !default;
+$option-search-input-padding-magnifier: var(--rp-option-search-input-padding-magnifier, 43px) !default;
 
 // checkmark
 $option-checkmark-color: var(--rp-option-checkmark-color, #5e6066) !default;
@@ -157,9 +158,12 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
   position: relative;
   z-index: 1;
   input {
-    border-radius: $option-search-border-radius;
-    border: $option-search-border;
-    height: $option-search-height;
+    border-radius: $option-search-input-border-radius;
+    border: $option-search-input-border;
+    height: $option-search-input-height;
+    background-color: $option-search-input-background-color;
+    border:  $option-search-input-border;
+    border-radius:  $option-search-input-border-radius;
   }
   button {
     background-color: $option-search-clear-button-bg-color;
@@ -210,8 +214,8 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
   }
   :not([dir='rtl']) & {
     input {
-      padding-left: $option-search-padding-magnifier;
-      padding-right: $option-search-padding-clear-btn;
+      padding-left: $option-search-input-padding-magnifier;
+      padding-right: $option-search-input-padding-clear-btn;
     }
     button {
       right: 12px;
@@ -219,8 +223,8 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
   }
   [dir='rtl'] & {
     input {
-      padding-left: $option-search-padding-clear-btn;
-      padding-right: $option-search-padding-magnifier;
+      padding-left: $option-search-input-padding-clear-btn;
+      padding-right: $option-search-input-padding-magnifier;
     }
     button {
       left: 12px;
diff --git a/source/themes/simple/SimpleSelect.scss b/source/themes/simple/SimpleSelect.scss
index 46955ef5..14ecfd39 100644
--- a/source/themes/simple/SimpleSelect.scss
+++ b/source/themes/simple/SimpleSelect.scss
@@ -70,8 +70,10 @@ $select-arrow-url-open: var(--rp-select-arrow-url-open, url("#{$theme-assets-pat
 
 // ==== STATE: isOpen ====
 .isOpen {
-  input {
-    border-color: $select-input-border-color-focus;
+  .selectInput {
+    input {
+      border-color: $select-input-border-color-focus;
+    }
   }
 
   .selectInput:after {

From 64b186e2d6ac3e6434ebfe884d4ef7065e6e0d46 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 7 Apr 2021 15:38:46 -0300
Subject: [PATCH 212/244] [DDW-620] Remove duplicated CSS rules

---
 source/themes/simple/SimpleOptions.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index f94d5619..93cf5954 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -158,12 +158,10 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
   position: relative;
   z-index: 1;
   input {
-    border-radius: $option-search-input-border-radius;
-    border: $option-search-input-border;
-    height: $option-search-input-height;
     background-color: $option-search-input-background-color;
-    border:  $option-search-input-border;
     border-radius:  $option-search-input-border-radius;
+    border: $option-search-input-border;
+    height: $option-search-input-height;
   }
   button {
     background-color: $option-search-clear-button-bg-color;

From d95437d95f902eb76bdec6659840752507513966 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 7 Apr 2021 16:04:17 -0300
Subject: [PATCH 213/244] Remove console log

---
 source/components/HOC/GlobalListeners.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/source/components/HOC/GlobalListeners.js b/source/components/HOC/GlobalListeners.js
index 40a46150..8947f5b3 100644
--- a/source/components/HOC/GlobalListeners.js
+++ b/source/components/HOC/GlobalListeners.js
@@ -150,7 +150,6 @@ export class GlobalListeners extends Component<Props, State> {
   // calculates max-height for Options, max-height shouldn't be greater than distance
   // from Options rootRef to edge of window (up or down) else Options run off page
   _calculateOptionsMaxHeight = () => {
-    console.log('_calculateOptionsMaxHeight');
     const { documentElement } = document;
     const {
       rootRef,

From 6d5d4513ff0fd0e8acde84ab32cba4aaf0cf8a0f Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Wed, 7 Apr 2021 16:07:00 -0300
Subject: [PATCH 214/244] [DDW-620] Implement no-results

---
 source/components/Options.js      | 8 ++++++++
 source/components/Select.js       | 1 +
 source/skins/simple/SelectSkin.js | 1 +
 3 files changed, 10 insertions(+)

diff --git a/source/components/Options.js b/source/components/Options.js
index bd6174cb..4666449f 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -269,6 +269,12 @@ class OptionsBase extends Component<Props, State> {
     };
   };
 
+  getNoResults = () => {
+    const { noResults, hasSearch } = this.props;
+    const options = this.getFilteredOptions();
+    return noResults || (hasSearch && !options.length);
+  }
+
   // ========= PRIVATE HELPERS =========
 
   _handleSelectionOnKeyDown = (event: SyntheticKeyboardEvent<>) => {
@@ -371,6 +377,7 @@ class OptionsBase extends Component<Props, State> {
       theme,
       themeOverrides,
       toggleMouseLocation,
+      noResults,
       onChange,
       onSearch,
       options,
@@ -404,6 +411,7 @@ class OptionsBase extends Component<Props, State> {
         theme={composedTheme}
         setMouseIsOverOptions={this._setMouseIsOverOptions}
         onSearch={this.handleSearch}
+        noResults={this.getNoResults()}
         {...rest}
       />
     );
diff --git a/source/components/Select.js b/source/components/Select.js
index ec3a08e3..ceb24d8b 100644
--- a/source/components/Select.js
+++ b/source/components/Select.js
@@ -24,6 +24,7 @@ type Props = {
   highlightSearch?: boolean,
   isOpeningUpward: boolean,
   label?: string | Element<any>,
+  noResultsMessage?: string,
   onBlur?: Function,
   onChange?: Function,
   onFocus?: Function,
diff --git a/source/skins/simple/SelectSkin.js b/source/skins/simple/SelectSkin.js
index 3474f2fe..6e126e18 100644
--- a/source/skins/simple/SelectSkin.js
+++ b/source/skins/simple/SelectSkin.js
@@ -27,6 +27,7 @@ type Props = {
   isOpen: boolean,
   isOpeningUpward: boolean,
   label: string | Element<any>,
+  noResultsMessage?: string,
   onBlur: Function,
   onChange: Function,
   onFocus: Function,

From c33be141d021f90a99c8b4580f2acb0aad63dad9 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Thu, 8 Apr 2021 11:21:29 -0300
Subject: [PATCH 215/244] [DDW-620] Search input default bg color

---
 source/themes/simple/SimpleOptions.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index 93cf5954..27e82477 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -35,7 +35,7 @@ $option-search-icon-side-margin: var(--rp-option-search-icon-size, 18.5px) !defa
 $option-search-icon-size: var(--rp-option-search-icon-size, 15px) !default;
 $option-search-icon-top-margin: var(--rp-option-search-icon-size, 16.5px) !default;
 $option-search-icon-url: var(--rp-option-search-icon-url, url("#{$theme-assets-path}/search.svg")) !default;
-$option-search-input-background-color: var(--rp-option-search-input-bg-color, #fafbfc);
+$option-search-input-background-color: var(--rp-select-input-text-color, #fafbfc);
 $option-search-input-border-radius: var(--rp-option-search-input-border-radius, 1px);
 $option-search-input-border: var(--rp-option-search-input-border, none);
 $option-search-input-height: var(--rp-option-search-height, 50px) !default;

From 52716fc3c2c241a2ac3e12dec8b835c3a95daf32 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Thu, 8 Apr 2021 11:48:16 -0300
Subject: [PATCH 216/244] [DDW-620] Add CSS variables to the API

---
 source/skins/simple/OptionsSkin.js      | 3 ++-
 source/themes/API/options.js            | 2 ++
 source/themes/simple/SimpleOptions.scss | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index 49a2f8d8..efb33908 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -145,9 +145,10 @@ export const OptionsSkin = (props: Props) => {
 
   const renderSearch = () => {
     return (
-      <div className={theme[themeId].search}>
+      <div className={classnames([theme[themeId].search, 'test'])}>
         <Input
           theme={theme}
+          value1={searchValue}
           value={searchValue}
           onChange={props.onSearch}
           autoFocus={true}
diff --git a/source/themes/API/options.js b/source/themes/API/options.js
index 903bc660..c5778dd6 100644
--- a/source/themes/API/options.js
+++ b/source/themes/API/options.js
@@ -3,11 +3,13 @@ export const OPTIONS_THEME_API = {
   disabledOption: '',
   firstOptionHighlighted: '',
   hasNoSelectedOptionCheckmark: '',
+  hasSearch: '',
   highlightedOption: '',
   isOpen: '',
   openUpward: '',
   option: '',
   options: '',
+  search: '',
   selectedOption: '',
   ul: ''
 };
diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index 27e82477..c3277eb9 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -35,7 +35,7 @@ $option-search-icon-side-margin: var(--rp-option-search-icon-size, 18.5px) !defa
 $option-search-icon-size: var(--rp-option-search-icon-size, 15px) !default;
 $option-search-icon-top-margin: var(--rp-option-search-icon-size, 16.5px) !default;
 $option-search-icon-url: var(--rp-option-search-icon-url, url("#{$theme-assets-path}/search.svg")) !default;
-$option-search-input-background-color: var(--rp-select-input-text-color, #fafbfc);
+$option-search-input-background-color: var(--rp-select-input-bg-color, #fafbfc);
 $option-search-input-border-radius: var(--rp-option-search-input-border-radius, 1px);
 $option-search-input-border: var(--rp-option-search-input-border, none);
 $option-search-input-height: var(--rp-option-search-height, 50px) !default;

From 717f60cecb90eb8df4dea9f8d7fd06d624aafba3 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Thu, 8 Apr 2021 12:01:15 -0300
Subject: [PATCH 217/244] [DDW-620] Add new CSS variables to the API and
 adjustments

---
 source/themes/API/options.js            | 1 +
 source/themes/simple/SimpleOptions.scss | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/themes/API/options.js b/source/themes/API/options.js
index c5778dd6..bc7e8bf6 100644
--- a/source/themes/API/options.js
+++ b/source/themes/API/options.js
@@ -1,5 +1,6 @@
 // @flow
 export const OPTIONS_THEME_API = {
+  active: '',
   disabledOption: '',
   firstOptionHighlighted: '',
   hasNoSelectedOptionCheckmark: '',
diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index c3277eb9..092a45ea 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -175,7 +175,6 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
     transition: opacity .25s ease-out;
     width: 28px;
     z-index: 1;
-
     &.active {
       opacity: 1;
     }

From a661d8dbb013967d863c5bcefc8e70754b3f41c8 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Thu, 8 Apr 2021 12:36:26 -0300
Subject: [PATCH 218/244] [DDW-620] Escaped characters

---
 source/components/Options.js       |  4 ++--
 source/skins/simple/OptionsSkin.js |  9 +++++----
 stories/Select.stories.js          | 15 ++++++++++-----
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/source/components/Options.js b/source/components/Options.js
index 4666449f..1d4a8c41 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -13,7 +13,7 @@ import type {
 } from 'react';
 
 // external libraries
-import { isFunction, get } from 'lodash';
+import { isFunction, get, escapeRegExp } from 'lodash';
 
 // internal utility functions
 import { createEmptyContext, withTheme } from './HOC/withTheme';
@@ -228,7 +228,7 @@ class OptionsBase extends Component<Props, State> {
     }
     const filteredOptions = options.filter((option) => {
       const { label } = option;
-      const regex = new RegExp(searchValue, 'i');
+      const regex = new RegExp(escapeRegExp(searchValue), 'i');
       return regex.test(label);
     });
     return filteredOptions;
diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index efb33908..8c8e3c48 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -4,7 +4,7 @@ import type { Element, ElementRef, RefObject } from 'react';
 
 // external libraries
 import classnames from 'classnames';
-import { isFunction, isObject } from 'lodash';
+import { isFunction, isObject, escapeRegExp } from 'lodash';
 
 // components
 import { Bubble } from '../../components/Bubble';
@@ -122,6 +122,8 @@ export const OptionsSkin = (props: Props) => {
   };
 
   const renderOption = option => {
+    const escapedSearchValue = escapeRegExp(searchValue) || '';
+    console.log('escapedSearchValue', escapedSearchValue);
     // check if user has passed render prop "optionRenderer"
     if (optionRenderer && isFunction(optionRenderer)) {
       // call user's custom rendering logic
@@ -130,10 +132,10 @@ export const OptionsSkin = (props: Props) => {
       let { label } = option;
       // in case `highlightSearch` then `searchValue` is wrapped in an `em` tag
       if (highlightSearch !== false) {
-        const splitter = new RegExp(`(${searchValue})`,'i');
+        const splitter = new RegExp(`(${escapedSearchValue})`,'i');
         const parts = label.split(splitter);
         for (let i = 1; i < parts.length; i += 2) {
-          if (parts[i].toLowerCase() === searchValue.toLowerCase())
+          if (parts[i].toLowerCase() === `${escapedSearchValue}`.toLowerCase())
             parts[i] = <em>{parts[i]}</em>;
           label = parts;
         }
@@ -148,7 +150,6 @@ export const OptionsSkin = (props: Props) => {
       <div className={classnames([theme[themeId].search, 'test'])}>
         <Input
           theme={theme}
-          value1={searchValue}
           value={searchValue}
           onChange={props.onSearch}
           autoFocus={true}
diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index e69a7ff4..143b5a4b 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -96,21 +96,26 @@ storiesOf('Select', module)
         value={store.state.value}
         onChange={value => store.set({ value })}
         options={COUNTRIES_LONG_LIST}
-        hasS earch
+        hasSearch
       />
     ))
   )
 
-  .add('with custom search',
+  .add('with custom search and escaped value',
     withState({ value: '' }, store => (
       <Select
         value={store.state.value}
         onChange={value => store.set({ value })}
-        options={COUNTRIES}
+        options={[
+          {
+            label: 'Escaped values: /.*+?|,()[]{}\\'
+          },
+          ...COUNTRIES
+        ]}
         hasSearch
-        onSearch={(searchValue: string) => {
+        onSearch={(searchValue: string, list: Array<any>) => {
           const regex = new RegExp(searchValue, "i");
-          return COUNTRIES
+          return list
             .filter((option) => {
               const { label, value } = option;
               const regex = new RegExp(searchValue, "i");

From 87069fc348571ecb9b8fa72337ad4ccbf3725c7c Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Thu, 8 Apr 2021 13:00:02 -0300
Subject: [PATCH 219/244] [DDW-620] Filter escaped valeus

---
 source/skins/simple/OptionsSkin.js | 1 -
 stories/Select.stories.js          | 7 +++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index 8c8e3c48..36cdf009 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -123,7 +123,6 @@ export const OptionsSkin = (props: Props) => {
 
   const renderOption = option => {
     const escapedSearchValue = escapeRegExp(searchValue) || '';
-    console.log('escapedSearchValue', escapedSearchValue);
     // check if user has passed render prop "optionRenderer"
     if (optionRenderer && isFunction(optionRenderer)) {
       // call user's custom rendering logic
diff --git a/stories/Select.stories.js b/stories/Select.stories.js
index 143b5a4b..73d37be4 100644
--- a/stories/Select.stories.js
+++ b/stories/Select.stories.js
@@ -1,10 +1,14 @@
 // @flow
 import React from 'react';
 
+// Pkgs
+import { escapeRegExp } from 'lodash';
+
 // storybook
 import { storiesOf } from '@storybook/react';
 import { withState } from '@dump247/storybook-state';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
+
 // components
 import { Select } from '../source/components/Select';
 import { Modal } from '../source/components/Modal';
@@ -114,11 +118,10 @@ storiesOf('Select', module)
         ]}
         hasSearch
         onSearch={(searchValue: string, list: Array<any>) => {
-          const regex = new RegExp(searchValue, "i");
+          const regex = new RegExp(escapeRegExp(searchValue), "i");
           return list
             .filter((option) => {
               const { label, value } = option;
-              const regex = new RegExp(searchValue, "i");
               return regex.test(label) || regex.test(value);
             })
             .map((option) => {

From f87ba7bfc437371fbf954f233cc4d5d9c97a2a99 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 8 Apr 2021 19:35:13 +0200
Subject: [PATCH 220/244] 0.9.8-rc.15

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 62f36141..25944382 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.14",
+  "version": "0.9.8-rc.15",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From f3240b16641e0b2ba9d7bd7a8b818098ce90fe8d Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Thu, 8 Apr 2021 15:45:17 -0300
Subject: [PATCH 221/244] Fixes broken createRef without React.

---
 source/components/Input.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/components/Input.js b/source/components/Input.js
index f19f2df6..22abfdb4 100644
--- a/source/components/Input.js
+++ b/source/components/Input.js
@@ -61,7 +61,7 @@ class InputBase extends Component<InputProps, State> {
 
   constructor(props: InputProps) {
     super(props);
-    this.inputElement = props.inputRef ?? createRef();
+    this.inputElement = props.inputRef ?? React.createRef();
     const { context, themeId, theme, themeOverrides } = props;
 
     this.state = {

From 6b60c51d185798ff1a0c62a0853a54ab3468ad39 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 8 Apr 2021 22:09:24 +0200
Subject: [PATCH 222/244] 0.9.8-rc.16

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 25944382..f080e68a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.15",
+  "version": "0.9.8-rc.16",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 1b7dab0370f6953600c4e79fecb4f215bf1dfa67 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Fri, 9 Apr 2021 16:42:44 -0300
Subject: [PATCH 223/244] [DDW-646] Fixes Select search highlight color
 variable

---
 source/themes/simple/SimpleOptions.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index 092a45ea..5bfbb267 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -28,7 +28,7 @@ $option-search-clear-button-bg-color: var(--rp-option-bg-color-highlighted, rgba
 $option-search-clear-icon-color: var(--rp-input-text-color, #5e6066) !default;
 $option-search-clear-icon-size: var(--rp-option-search-clear-icon-size, 8px) !default;
 $option-search-clear-icon-url: var(--rp-option-search-clear-icon-url, url("#{$theme-assets-path}/cross.svg")) !default;
-$option-search-highlight-background-color: var(--rp-option-search-icon-url, #f2a218) !default;
+$option-search-highlight-background-color: var(--rp-option-search-highlight-background-color, #f2a218) !default;
 $option-search-icon-color: var(--rp-input-text-color, #5e6066) !default;
 $option-search-icon-opacity: var(--rp-option-search-icon-opacity, 0.65) !default;
 $option-search-icon-side-margin: var(--rp-option-search-icon-size, 18.5px) !default;

From c155e43f8ca6076db026efa2a1cd2e5236df7f3d Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Fri, 9 Apr 2021 16:44:36 -0300
Subject: [PATCH 224/244] [DDW-646] CHANGELOG

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e716e4ed..98109e49 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ vNext
 
 ### Fixes
 
+- Fixed a wrong variable name for the select search highlight color ([PR 170](https://github.com/input-output-hk/react-polymorph/pull/170))
 - Fixed an issue related to Numeric Input when entering numbers after having selected the decimal separator ([PR 167](https://github.com/input-output-hk/react-polymorph/pull/167))
 - Fixed issues related to controlled/uncontrolled Tippy state ([PR 160](https://github.com/input-output-hk/react-polymorph/pull/160))
 - Fixed `NumericInput` to support DEBUG mode ([PR 159](https://github.com/input-output-hk/react-polymorph/pull/159))

From f3b5cf6a665860b3bf29eb2ffaf41da36aed3674 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Wed, 14 Apr 2021 12:27:42 -0700
Subject: [PATCH 225/244] DDW-645 - Update react-polymorph and implement the
 search style variables - fixing lint issues

---
 source/skins/simple/OptionsSkin.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index 36cdf009..d5b94b21 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -89,7 +89,7 @@ export const OptionsSkin = (props: Props) => {
     if (!noResults && render) {
       // call user's custom render function
       return render(getOptionProps);
-    } else if (!noResults && !render) {
+    } if (!noResults && !render) {
       // render default simple skin
       return sortedOptions.map((option, index) => {
         // set reference of event handlers in memory to prevent excess re-renders
@@ -127,12 +127,12 @@ export const OptionsSkin = (props: Props) => {
     if (optionRenderer && isFunction(optionRenderer)) {
       // call user's custom rendering logic
       return optionRenderer(option);
-    } else if (isObject(option)) {
+    } if (isObject(option)) {
       let { label } = option;
       // in case `highlightSearch` then `searchValue` is wrapped in an `em` tag
       if (highlightSearch !== false) {
         const splitter = new RegExp(`(${escapedSearchValue})`,'i');
-        const parts = label.split(splitter);
+        const parts = typeof label === 'string' ? label.split(splitter) : label;
         for (let i = 1; i < parts.length; i += 2) {
           if (parts[i].toLowerCase() === `${escapedSearchValue}`.toLowerCase())
             parts[i] = <em>{parts[i]}</em>;
@@ -151,7 +151,7 @@ export const OptionsSkin = (props: Props) => {
           theme={theme}
           value={searchValue}
           onChange={props.onSearch}
-          autoFocus={true}
+          autoFocus
           inputRef={props.searchInputRef || null}
         />
         {!props.hideSearchClearButton && (

From e0fbba0180f809018f90ecf5c278b12f00e88a78 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
Date: Wed, 14 Apr 2021 13:00:13 -0700
Subject: [PATCH 226/244] DDW-645 - Update react-polymorph and implement the
 search style variables - fixing dot search

---
 source/skins/simple/OptionsSkin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index d5b94b21..55d8dc4d 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -134,7 +134,7 @@ export const OptionsSkin = (props: Props) => {
         const splitter = new RegExp(`(${escapedSearchValue})`,'i');
         const parts = typeof label === 'string' ? label.split(splitter) : label;
         for (let i = 1; i < parts.length; i += 2) {
-          if (parts[i].toLowerCase() === `${escapedSearchValue}`.toLowerCase())
+          if (escapeRegExp(parts[i].toLowerCase()) === `${escapedSearchValue}`.toLowerCase())
             parts[i] = <em>{parts[i]}</em>;
           label = parts;
         }

From ae885aeb23d0f7140ff47464718b6c34186f9e97 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 15 Apr 2021 12:47:20 +0200
Subject: [PATCH 227/244] 0.9.8-rc.17

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f080e68a..95f2ed92 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.16",
+  "version": "0.9.8-rc.17",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 68ebb9999689f302b9c995aecbb096414ed580b6 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 16 Apr 2021 14:43:13 +0200
Subject: [PATCH 228/244] Move storybook knobs addon to dev dependencies

---
 .yarnrc      |   1 +
 package.json |   2 +-
 yarn.lock    | 756 ++++++++++++++++++++-------------------------------
 3 files changed, 291 insertions(+), 468 deletions(-)
 create mode 100644 .yarnrc

diff --git a/.yarnrc b/.yarnrc
new file mode 100644
index 00000000..bf833b62
--- /dev/null
+++ b/.yarnrc
@@ -0,0 +1 @@
+registry https://registry.yarnpkg.com
diff --git a/package.json b/package.json
index 95f2ed92..f48610fc 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
     "test:watch": "yarn test --watchAll"
   },
   "dependencies": {
-    "@storybook/addon-knobs": "^6.2.5",
     "@tippyjs/react": "4.2.1",
     "create-react-context": "0.2.2",
     "fast-password-entropy": "1.1.1",
@@ -44,6 +43,7 @@
     "@babel/preset-react": "7.10.4",
     "@dump247/storybook-state": "1.6.1",
     "@storybook/addon-actions": "5.2.8",
+    "@storybook/addon-knobs": "5.3.14",
     "@storybook/react": "5.2.8",
     "babel-eslint": "10.0.3",
     "babel-jest": "24.9.0",
diff --git a/yarn.lock b/yarn.lock
index b8da3d6d..8b2da2ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1921,7 +1921,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.12.13", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.7":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
   integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
@@ -2089,7 +2089,7 @@
     "@emotion/sheet" "0.9.3"
     "@emotion/utils" "0.11.2"
 
-"@emotion/core@^10.0.9", "@emotion/core@^10.1.1":
+"@emotion/core@^10.0.20", "@emotion/core@^10.0.9":
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3"
   integrity sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==
@@ -2136,7 +2136,7 @@
   dependencies:
     "@emotion/memoize" "0.7.3"
 
-"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6":
+"@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==
@@ -2213,7 +2213,7 @@
     "@emotion/styled-base" "^10.0.23"
     babel-plugin-emotion "^10.0.23"
 
-"@emotion/styled@^10.0.27":
+"@emotion/styled@^10.0.17":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
   integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
@@ -2277,6 +2277,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.0.0.tgz#10602de5570baea82f8afbfa2630b24e7a8cfe5b"
@@ -2541,11 +2546,6 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
-"@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0":
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
-  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
-
 "@popperjs/core@^2.8.3":
   version "2.8.4"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.8.4.tgz#6f1744b0f69f507a433f42874cc3b2eb4b11b337"
@@ -2562,16 +2562,6 @@
     react-lifecycles-compat "^3.0.4"
     warning "^3.0.0"
 
-"@reach/router@^1.3.4":
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.4.tgz#d2574b19370a70c80480ed91f3da840136d10f8c"
-  integrity sha512-+mtn9wjlB9NN2CNnnC/BRYtwdKBfSyyasPYraNAyvaV1occr/5NnB4CVzjEZipNHwYebQwcndGUmpFzxAUoqSA==
-  dependencies:
-    create-react-context "0.3.0"
-    invariant "^2.2.3"
-    prop-types "^15.6.1"
-    react-lifecycles-compat "^3.0.4"
-
 "@sinonjs/commons@^1.7.0":
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.0.tgz#f90ffc52a2e519f018b13b6c4da03cbff36ebed6"
@@ -2599,30 +2589,29 @@
     react-inspector "^3.0.2"
     uuid "^3.3.2"
 
-"@storybook/addon-knobs@^6.2.5":
-  version "6.2.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-6.2.5.tgz#ec883f20bdb5940c061789e84134fb76ec32fc01"
-  integrity sha512-QaZQZaz8qB5TxeWnXKP0yDwvLgClCf2nfFjo0BEBcio6fZCZ1vXUz9v/ELu/vdGL0G03vkoYjGXYUXmcw+94+A==
-  dependencies:
-    "@storybook/addons" "6.2.5"
-    "@storybook/api" "6.2.5"
-    "@storybook/channels" "6.2.5"
-    "@storybook/client-api" "6.2.5"
-    "@storybook/components" "6.2.5"
-    "@storybook/core-events" "6.2.5"
-    "@storybook/theming" "6.2.5"
-    copy-to-clipboard "^3.3.1"
-    core-js "^3.8.2"
+"@storybook/addon-knobs@5.3.14":
+  version "5.3.14"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-5.3.14.tgz#b8b753c7e64f7087668396d66aee253a51717a2d"
+  integrity sha512-pBpFOdeCR8n8w6QHK1adABt6YKf+Q4itfX0+AtZRGLvbGum9O+paihvP9EVYPlKiG+0T7Zv2vFCl6q6qFjF/Mw==
+  dependencies:
+    "@storybook/addons" "5.3.14"
+    "@storybook/api" "5.3.14"
+    "@storybook/client-api" "5.3.14"
+    "@storybook/components" "5.3.14"
+    "@storybook/core-events" "5.3.14"
+    "@storybook/theming" "5.3.14"
+    "@types/react-color" "^3.0.1"
+    copy-to-clipboard "^3.0.8"
+    core-js "^3.0.1"
     escape-html "^1.0.3"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.20"
+    fast-deep-equal "^2.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
     prop-types "^15.7.2"
-    qs "^6.10.0"
-    react-colorful "^5.0.1"
+    qs "^6.6.0"
+    react-color "^2.17.0"
     react-lifecycles-compat "^3.0.4"
-    react-select "^3.2.0"
-    regenerator-runtime "^0.13.7"
+    react-select "^3.0.8"
 
 "@storybook/addons@5.2.8":
   version "5.2.8"
@@ -2637,20 +2626,18 @@
     global "^4.3.2"
     util-deprecate "^1.0.2"
 
-"@storybook/addons@6.2.5":
-  version "6.2.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.2.5.tgz#28370a547b8d2f69a34c29520aa841961bac6b27"
-  integrity sha512-tRZYTxJ6FlOCoWG7mVJAzH4BIBPWyvryGprawdkWHUaVYQRMH58pU3ma7gxdYdgvV80eZe2BfEOLzvZJeV/GgA==
-  dependencies:
-    "@storybook/api" "6.2.5"
-    "@storybook/channels" "6.2.5"
-    "@storybook/client-logger" "6.2.5"
-    "@storybook/core-events" "6.2.5"
-    "@storybook/router" "6.2.5"
-    "@storybook/theming" "6.2.5"
-    core-js "^3.8.2"
-    global "^4.4.0"
-    regenerator-runtime "^0.13.7"
+"@storybook/addons@5.3.14":
+  version "5.3.14"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.3.14.tgz#ff96c2c46a617f777c3660395017d2aef5319f19"
+  integrity sha512-zoN1MYlArdThp93i+Ogil/pihyx8n7nkrdSO0j9HUh6jUsGeFFEluPQZdRFte9NIoY6ZWSWwuEMDgrv2Pw9r2Q==
+  dependencies:
+    "@storybook/api" "5.3.14"
+    "@storybook/channels" "5.3.14"
+    "@storybook/client-logger" "5.3.14"
+    "@storybook/core-events" "5.3.14"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    util-deprecate "^1.0.2"
 
 "@storybook/api@5.2.8":
   version "5.2.8"
@@ -2675,30 +2662,30 @@
     telejson "^3.0.2"
     util-deprecate "^1.0.2"
 
-"@storybook/api@6.2.5":
-  version "6.2.5"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.2.5.tgz#fb22363c87c5e9dfb779d01513b8013bbdf2f560"
-  integrity sha512-iVRCPZ+QRAQs6ukBTiBEvEHhAQJJ3lxRz096grTZ5LZpY+89GcKlwaS1kAJ903+rFOxLDezJpHhS1cwSW2Kc8g==
+"@storybook/api@5.3.14":
+  version "5.3.14"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.3.14.tgz#8c2bb226a4a5de7974ee2ccce36986b72f462f1b"
+  integrity sha512-ANWRMTLEoAfu0IsXqbxmbTpxS8xTByZgLj20tH96bxgH1rJo9KAZnJ8A9kGYr+zklU8QnYvVIgmV3HESXII9zg==
   dependencies:
-    "@reach/router" "^1.3.4"
-    "@storybook/channels" "6.2.5"
-    "@storybook/client-logger" "6.2.5"
-    "@storybook/core-events" "6.2.5"
+    "@reach/router" "^1.2.1"
+    "@storybook/channels" "5.3.14"
+    "@storybook/client-logger" "5.3.14"
+    "@storybook/core-events" "5.3.14"
     "@storybook/csf" "0.0.1"
-    "@storybook/router" "6.2.5"
-    "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.2.5"
-    "@types/reach__router" "^1.3.7"
-    core-js "^3.8.2"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.20"
+    "@storybook/router" "5.3.14"
+    "@storybook/theming" "5.3.14"
+    "@types/reach__router" "^1.2.3"
+    core-js "^3.0.1"
+    fast-deep-equal "^2.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
     memoizerific "^1.11.3"
-    qs "^6.10.0"
-    regenerator-runtime "^0.13.7"
-    store2 "^2.12.0"
-    telejson "^5.1.0"
-    ts-dedent "^2.0.0"
+    prop-types "^15.6.2"
+    react "^16.8.3"
+    semver "^6.0.0"
+    shallow-equal "^1.1.0"
+    store2 "^2.7.1"
+    telejson "^3.2.0"
     util-deprecate "^1.0.2"
 
 "@storybook/channel-postmessage@5.2.8":
@@ -2712,18 +2699,16 @@
     global "^4.3.2"
     telejson "^3.0.2"
 
-"@storybook/channel-postmessage@6.2.5":
-  version "6.2.5"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.2.5.tgz#22b7069fe8961c23d4dbdb2a25d627f619ab90df"
-  integrity sha512-OK9xTWc13p9VwyA7t/fW8mJ2nhSpA08STFoe3aFH34v/r6LF+inLd+8Wg08S0XLaxd6lMjVoUapA24xUtGK9jw==
+"@storybook/channel-postmessage@5.3.14":
+  version "5.3.14"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-5.3.14.tgz#768c87411d98caf09fdd92539b9edaaed26d5965"
+  integrity sha512-XKHxMSwW3movfTDOashuYlVCX3Hp7+X+amXc/xhDDzbiYjy3/CVm3LlkkM6v451IVEdK6pue4ewqZQWJAYAAEQ==
   dependencies:
-    "@storybook/channels" "6.2.5"
-    "@storybook/client-logger" "6.2.5"
-    "@storybook/core-events" "6.2.5"
-    core-js "^3.8.2"
-    global "^4.4.0"
-    qs "^6.10.0"
-    telejson "^5.1.0"
+    "@storybook/channels" "5.3.14"
+    "@storybook/client-logger" "5.3.14"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    telejson "^3.2.0"
 
 "@storybook/channels@5.2.8":
   version "5.2.8"
@@ -2732,14 +2717,12 @@
   dependencies:
     core-js "^3.0.1"
 
-"@storybook/channels@6.2.5":
-  version "6.2.5"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.2.5.tgz#08814f20e6027afc091d3187c2984ae790bff17c"
-  integrity sha512-vjWALSurfPtc56Vc2E4N0mKniMA6axU0gH8LYEgUBmmicrzzwYX9fCPfEe0NT2GNW83HpU1h2UH/ojuty/NtMg==
+"@storybook/channels@5.3.14":
+  version "5.3.14"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.3.14.tgz#9969e27761a80afb495bc1475f0173f9b6ef5a76"
+  integrity sha512-k9QBf9Kwe+iGmdEK/kW5xprqem2SPfBVwET6LWvJkWOl9UQ9VoMuCHgV55p0tzjcugaqWWKoF9+FRMWxWRfsQg==
   dependencies:
-    core-js "^3.8.2"
-    ts-dedent "^2.0.0"
-    util-deprecate "^1.0.2"
+    core-js "^3.0.1"
 
 "@storybook/client-api@5.2.8":
   version "5.2.8"
@@ -2763,28 +2746,27 @@
     stable "^0.1.8"
     util-deprecate "^1.0.2"
 
-"@storybook/client-api@6.2.5":
-  version "6.2.5"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.2.5.tgz#886f5cf2be59a7fcdbd49df5d9ead9b6ae4c22cb"
-  integrity sha512-p2T+WwiiNmn1xQDSha2fnDDDoOqvjKRUanyrozy9B9LhJefMFlJgpgm/N/0FYN/nsyKfDbJAXYqc0zY8DSDfxQ==
+"@storybook/client-api@5.3.14":
+  version "5.3.14"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-5.3.14.tgz#5f4b199d2f2b193f9f5a856c5eb8be43a9113d12"
+  integrity sha512-1qx1NIwto5F9N24Fb6VzKyDzeaZHtWTZ7afPrg56e1tUu7jbog7rELdRezk8+YAujveyMDJu4MxnOSP01sv7YQ==
   dependencies:
-    "@storybook/addons" "6.2.5"
-    "@storybook/channel-postmessage" "6.2.5"
-    "@storybook/channels" "6.2.5"
-    "@storybook/client-logger" "6.2.5"
-    "@storybook/core-events" "6.2.5"
+    "@storybook/addons" "5.3.14"
+    "@storybook/channel-postmessage" "5.3.14"
+    "@storybook/channels" "5.3.14"
+    "@storybook/client-logger" "5.3.14"
+    "@storybook/core-events" "5.3.14"
     "@storybook/csf" "0.0.1"
-    "@types/qs" "^6.9.5"
-    "@types/webpack-env" "^1.16.0"
-    core-js "^3.8.2"
-    global "^4.4.0"
-    lodash "^4.17.20"
+    "@types/webpack-env" "^1.15.0"
+    core-js "^3.0.1"
+    eventemitter3 "^4.0.0"
+    global "^4.3.2"
+    is-plain-object "^3.0.0"
+    lodash "^4.17.15"
     memoizerific "^1.11.3"
-    qs "^6.10.0"
-    regenerator-runtime "^0.13.7"
+    qs "^6.6.0"
     stable "^0.1.8"
-    store2 "^2.12.0"
-    ts-dedent "^2.0.0"
+    ts-dedent "^1.1.0"
     util-deprecate "^1.0.2"
 
 "@storybook/client-logger@5.2.8":
@@ -2794,13 +2776,12 @@
   dependencies:
     core-js "^3.0.1"
 
-"@storybook/client-logger@6.2.5":
-  version "6.2.5"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.2.5.tgz#1cedc94dafce95c0388c0e643ab0743bf22160df"
-  integrity sha512-3sM2nCpa9ZYTLhOOpcWA2LfpV37TLJQG1XnJW+63IyBPJWn05thnJ3PVeazlit7JnY9o+i2VzjoHoPPk6TKpKQ==
+"@storybook/client-logger@5.3.14":
+  version "5.3.14"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.3.14.tgz#85068f1b665a52163191eb5976f1581bce6df0e4"
+  integrity sha512-YCHEsOvo6zPb4udlyAwqr5W0Kv9mAEQmcX73w9IDvAxbjR00T7empW7qmbjvviftKB/5MEgDdiYbj64ccs3aqg==
   dependencies:
-    core-js "^3.8.2"
-    global "^4.4.0"
+    core-js "^3.0.1"
 
 "@storybook/components@5.2.8":
   version "5.2.8"
@@ -2827,35 +2808,32 @@
     react-textarea-autosize "^7.1.0"
     simplebar-react "^1.0.0-alpha.6"
 
-"@storybook/components@6.2.5":
-  version "6.2.5"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.2.5.tgz#e495a1095a99f81b94da7ee3a4cd73255f7216fa"
-  integrity sha512-wL5cUAkYAHXJ+mhfQUl1FTZYsu0iaRT6uvawiainGsp/ccFw42l49fUuSOtRIdU77IwNU+WfK8l3Vu4MJOVJLA==
+"@storybook/components@5.3.14":
+  version "5.3.14"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.3.14.tgz#0f2f90113674e14ee74d5d16d6b3b1220cb0fa16"
+  integrity sha512-AsjkIFBrrqcBDLxGdmUHiauZo5gOL65eXx8WA7/yJDF8s45VVZX5Z0buOnjFyEhGVus02gwTov8da2irjL862A==
   dependencies:
-    "@popperjs/core" "^2.6.0"
-    "@storybook/client-logger" "6.2.5"
-    "@storybook/csf" "0.0.1"
-    "@storybook/theming" "6.2.5"
-    "@types/color-convert" "^2.0.0"
-    "@types/overlayscrollbars" "^1.12.0"
-    "@types/react-syntax-highlighter" "11.0.5"
-    color-convert "^2.0.1"
-    core-js "^3.8.2"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.20"
-    markdown-to-jsx "^7.1.0"
+    "@storybook/client-logger" "5.3.14"
+    "@storybook/theming" "5.3.14"
+    "@types/react-syntax-highlighter" "11.0.2"
+    "@types/react-textarea-autosize" "^4.3.3"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    markdown-to-jsx "^6.9.1"
     memoizerific "^1.11.3"
-    overlayscrollbars "^1.13.1"
-    polished "^4.0.5"
+    polished "^3.3.1"
+    popper.js "^1.14.7"
     prop-types "^15.7.2"
-    react-colorful "^5.0.1"
-    react-popper-tooltip "^3.1.1"
-    react-syntax-highlighter "^13.5.3"
-    react-textarea-autosize "^8.3.0"
-    regenerator-runtime "^0.13.7"
-    ts-dedent "^2.0.0"
-    util-deprecate "^1.0.2"
+    react "^16.8.3"
+    react-dom "^16.8.3"
+    react-focus-lock "^2.1.0"
+    react-helmet-async "^1.0.2"
+    react-popper-tooltip "^2.8.3"
+    react-syntax-highlighter "^11.0.2"
+    react-textarea-autosize "^7.1.0"
+    simplebar-react "^1.0.0-alpha.6"
+    ts-dedent "^1.1.0"
 
 "@storybook/core-events@5.2.8":
   version "5.2.8"
@@ -2864,12 +2842,12 @@
   dependencies:
     core-js "^3.0.1"
 
-"@storybook/core-events@6.2.5":
-  version "6.2.5"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.2.5.tgz#67a30feff3893efb78ef5ecf7bee242a3252d348"
-  integrity sha512-cEFUrhnd9fgsfqwFHS+eXL6AQQ7Z9ZCa2r79QFJf0cEmQ53BY8ay0x8TzHpF9REGzX/TlqAhEAVo2iQn7ngFiw==
+"@storybook/core-events@5.3.14":
+  version "5.3.14"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.3.14.tgz#d476eea7032670db1a84bef7e5baadb04c2de529"
+  integrity sha512-VCPLKqRugsOSx/smMJiJOvRgAzTrMpsbRuFw48kBGkQMP9TEV82Qe/341dv+f4GllPyBZyANG0p0m5+w7ZCURQ==
   dependencies:
-    core-js "^3.8.2"
+    core-js "^3.0.1"
 
 "@storybook/core@5.2.8":
   version "5.2.8"
@@ -3004,29 +2982,20 @@
     memoizerific "^1.11.3"
     qs "^6.6.0"
 
-"@storybook/router@6.2.5":
-  version "6.2.5"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.2.5.tgz#51b2f8786d7b08c77e1453998605082a1b7d4437"
-  integrity sha512-Cs6t3eSZ1Pqbld+cKx8K7YFVyrXvJtOcqG9NMCmx9NZjWRfMlorstWSDdTnk4uTHenXH99Y/uUNZCHRgf+Jt/A==
+"@storybook/router@5.3.14":
+  version "5.3.14"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.3.14.tgz#6535267624da5f54971c37e497df1c161f65be8f"
+  integrity sha512-O0KwQFncdBeq+O2Aq8UAFBVWjWmP5rtqoacUOFSGkXgObOnyniEraLiPH7rPtq2dAlSpgYI9+srQAZfo52Hz2A==
   dependencies:
-    "@reach/router" "^1.3.4"
-    "@storybook/client-logger" "6.2.5"
-    "@types/reach__router" "^1.3.7"
-    core-js "^3.8.2"
-    fast-deep-equal "^3.1.3"
-    global "^4.4.0"
-    lodash "^4.17.20"
+    "@reach/router" "^1.2.1"
+    "@storybook/csf" "0.0.1"
+    "@types/reach__router" "^1.2.3"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
     memoizerific "^1.11.3"
-    qs "^6.10.0"
-    ts-dedent "^2.0.0"
-
-"@storybook/semver@^7.3.2":
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0"
-  integrity sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==
-  dependencies:
-    core-js "^3.6.5"
-    find-up "^4.1.0"
+    qs "^6.6.0"
+    util-deprecate "^1.0.2"
 
 "@storybook/theming@5.2.8":
   version "5.2.8"
@@ -3046,23 +3015,23 @@
     prop-types "^15.7.2"
     resolve-from "^5.0.0"
 
-"@storybook/theming@6.2.5":
-  version "6.2.5"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.2.5.tgz#c72ea11e307440e49b4b8ff86916bac8998e0c88"
-  integrity sha512-DXLYggY6XUYD3cuFFas+7JZZP54a3MkKgQbxm3hYzS0D1mbG2gbjukuXtuN9WMoBEXgdRtYfySHX45NF29ZxzA==
+"@storybook/theming@5.3.14":
+  version "5.3.14"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.3.14.tgz#4923739ad0d7d673b7844f27da8a3c6cf118790f"
+  integrity sha512-raqXC3yJycEt1CrCAfnBYUA6pyJI80E9M26EeQl3UfytJOL6euprOi+D17QvxqBn7jmmf9ZDw5XRkvJhQ17Y7Q==
   dependencies:
-    "@emotion/core" "^10.1.1"
-    "@emotion/is-prop-valid" "^0.8.6"
-    "@emotion/styled" "^10.0.27"
-    "@storybook/client-logger" "6.2.5"
-    core-js "^3.8.2"
+    "@emotion/core" "^10.0.20"
+    "@emotion/styled" "^10.0.17"
+    "@storybook/client-logger" "5.3.14"
+    core-js "^3.0.1"
     deep-object-diff "^1.1.0"
-    emotion-theming "^10.0.27"
-    global "^4.4.0"
+    emotion-theming "^10.0.19"
+    global "^4.3.2"
     memoizerific "^1.11.3"
-    polished "^4.0.5"
+    polished "^3.3.1"
+    prop-types "^15.7.2"
     resolve-from "^5.0.0"
-    ts-dedent "^2.0.0"
+    ts-dedent "^1.1.0"
 
 "@storybook/ui@5.2.8":
   version "5.2.8"
@@ -3246,14 +3215,7 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
-"@types/color-convert@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.0.tgz#8f5ee6b9e863dcbee5703f5a517ffb13d3ea4e22"
-  integrity sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==
-  dependencies:
-    "@types/color-name" "*"
-
-"@types/color-name@*", "@types/color-name@^1.1.1":
+"@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
@@ -3277,13 +3239,6 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/hast@^2.0.0":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.1.tgz#b16872f2a6144c7025f296fb9636a667ebb79cd9"
-  integrity sha512-viwwrB+6xGzw+G1eWpF9geV3fnsDgXqHG+cqgiHrvQfDUW5hzhCyV7Sy3UJxhfRFBsgky2SSW33qi/YrIkjX5Q==
-  dependencies:
-    "@types/unist" "*"
-
 "@types/history@*":
   version "4.7.3"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"
@@ -3334,11 +3289,6 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.1.2.tgz#1b928a0baa408fc8ae3ac012cc81375addc147c6"
   integrity sha512-bjk1RIeZBCe/WukrFToIVegOf91Pebr8cXYBwLBIsfiGWVQ+ifwWsT59H3RxrWzWrzd1l/Amk1/ioY5Fq3/bpA==
 
-"@types/overlayscrollbars@^1.12.0":
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/@types/overlayscrollbars/-/overlayscrollbars-1.12.0.tgz#98456caceca8ad73bd5bb572632a585074e70764"
-  integrity sha512-h/pScHNKi4mb+TrJGDon8Yb06ujFG0mSg12wIO0sWMUF3dQIe2ExRRdNRviaNt9IjxIiOfnRr7FsQAdHwK4sMg==
-
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@@ -3354,11 +3304,6 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
-"@types/qs@^6.9.5":
-  version "6.9.6"
-  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.6.tgz#df9c3c8b31a247ec315e6996566be3171df4b3b1"
-  integrity sha512-0/HnwIfW4ki2D8L8c9GVcG5I72s9jP5GSLVF0VIXDW00kmIpA6O33G7a8n59Tmh7Nz0WUC3rSb7PTY/sdW2JzA==
-
 "@types/reach__router@^1.2.3":
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.2.6.tgz#b14cf1adbd1a365d204bbf6605cd9dd7b8816c87"
@@ -3367,12 +3312,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/reach__router@^1.3.7":
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.3.7.tgz#de8ab374259ae7f7499fc1373b9697a5f3cd6428"
-  integrity sha512-cyBEb8Ef3SJNH5NYEIDGPoMMmYUxROatuxbICusVRQIqZUB85UCt6R2Ok60tKS/TABJsJYaHyNTW3kqbpxlMjg==
+"@types/react-color@^3.0.1":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.4.tgz#c63daf012ad067ac0127bdd86725f079d02082bd"
+  integrity sha512-EswbYJDF1kkrx93/YU+BbBtb46CCtDMvTiGmcOa/c5PETnwTiSWoseJ1oSWeRl/4rUXkhME9bVURvvPg0W5YQw==
   dependencies:
     "@types/react" "*"
+    "@types/reactcss" "*"
 
 "@types/react-syntax-highlighter@10.1.0":
   version "10.1.0"
@@ -3381,10 +3327,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-syntax-highlighter@11.0.5":
-  version "11.0.5"
-  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087"
-  integrity sha512-VIOi9i2Oj5XsmWWoB72p3KlZoEbdRAcechJa8Ztebw7bDl2YmR+odxIqhtJGp1q2EozHs02US+gzxJ9nuf56qg==
+"@types/react-syntax-highlighter@11.0.2":
+  version "11.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#a2e3ff657d7c47813f80ca930f3d959c31ec51e3"
+  integrity sha512-iMNcixH8330f2dq0RY+VOXCP8JFehgmOhLOtnO85Ty+qu0fHXJNEqWx5VuFv8v0aEq0U/N9d/k1yvA+c6PEmPw==
   dependencies:
     "@types/react" "*"
 
@@ -3403,22 +3349,24 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/reactcss@*":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.3.tgz#af28ae11bbb277978b99d04d1eedfd068ca71834"
+  integrity sha512-d2gQQ0IL6hXLnoRfVYZukQNWHuVsE75DzFTLPUuyyEhJS8G2VvlE+qfQQ91SJjaMqlURRCNIsX7Jcsw6cEuJlA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
-"@types/unist@*":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
-  integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
-
 "@types/webpack-env@^1.13.7":
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.14.1.tgz#0d8a53f308f017c53a5ddc3d07f4d6fa76b790d7"
   integrity sha512-0Ki9jAAhKDSuLDXOIMADg54Hu60SuBTEsWaJGGy5cV+SSUQ63J2a+RrYYGrErzz39fXzTibhKrAQJAb8M7PNcA==
 
-"@types/webpack-env@^1.16.0":
+"@types/webpack-env@^1.15.0":
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.0.tgz#8c0a9435dfa7b3b1be76562f3070efb3f92637b4"
   integrity sha512-Fx+NpfOO0CpeYX2g9bkvX8O5qh9wrU1sOF4g8sft4Mu7z+qfe387YlyY8w8daDyDsKY5vUxM0yxkAYnbkRbZEw==
@@ -5033,14 +4981,6 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
-call-bind@^1.0.0, call-bind@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
-  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
-  dependencies:
-    function-bind "^1.1.1"
-    get-intrinsic "^1.0.2"
-
 call-me-maybe@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
@@ -5657,13 +5597,6 @@ copy-to-clipboard@^3.0.8:
   dependencies:
     toggle-selection "^1.0.6"
 
-copy-to-clipboard@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
-  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
-  dependencies:
-    toggle-selection "^1.0.6"
-
 core-js-compat@^3.1.1:
   version "3.4.5"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.4.5.tgz#f072059c0b98ad490eacac082296cfe241af1b58"
@@ -5710,11 +5643,6 @@ core-js@^3.0.1, core-js@^3.0.4:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.5.tgz#3dda65611d95699b5eb7742ea451ea052d37aa65"
   integrity sha512-OuvejWH6vIaUo59Ndlh89purNm4DCIy/v3QoYlcGnn+PkYI8BhNHfCuAESrWX+ZPfq9JccVJ+XXgOMy77PJexg==
 
-core-js@^3.6.5, core-js@^3.8.2:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.10.0.tgz#9a020547c8b6879f929306949e31496bbe2ae9b3"
-  integrity sha512-MQx/7TLgmmDVamSyfE+O+5BHvG1aUGj/gHhLn1wVtm2B5u1eVIPvh7vkfjwWKNCjrTJB8+He99IntSQ1qP+vYQ==
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -5818,14 +5746,6 @@ create-react-context@0.2.2:
     fbjs "^0.8.0"
     gud "^1.0.0"
 
-create-react-context@0.3.0, create-react-context@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
-  integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
-  dependencies:
-    gud "^1.0.0"
-    warning "^4.0.3"
-
 create-react-context@^0.2.1:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
@@ -5834,6 +5754,14 @@ create-react-context@^0.2.1:
     fbjs "^0.8.0"
     gud "^1.0.0"
 
+create-react-context@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
+  integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
+  dependencies:
+    gud "^1.0.0"
+    warning "^4.0.3"
+
 cross-env@5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.0.tgz#6ecd4c015d5773e614039ee529076669b9d126f2"
@@ -6224,6 +6152,11 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detect-port-alt@1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.6.tgz#24707deabe932d4a3cf621302027c2b266568275"
@@ -6520,7 +6453,7 @@ emotion-theming@^10.0.14:
     "@emotion/weak-memoize" "0.2.4"
     hoist-non-react-statics "^3.3.0"
 
-emotion-theming@^10.0.27:
+emotion-theming@^10.0.19:
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10"
   integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==
@@ -7459,11 +7392,6 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
   integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
 
-fast-deep-equal@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
-  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
-
 fast-glob@^2.0.2, fast-glob@^2.2.6:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -7491,13 +7419,6 @@ fast-password-entropy@1.1.1:
   resolved "https://registry.yarnpkg.com/fast-password-entropy/-/fast-password-entropy-1.1.1.tgz#47ba9933095fd5a32fb184915fc8e76ee19cf429"
   integrity sha512-dxm29/BPFrNgyEDygg/lf9c2xQR0vnQhG7+hZjAI39M/3um9fD4xiqG6F0ZjW6bya5m9CI0u6YryHGRtxCGCiw==
 
-fault@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
-  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
-  dependencies:
-    format "^0.2.0"
-
 fault@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.3.tgz#4da88cf979b6b792b4e13c7ec836767725170b7e"
@@ -7732,6 +7653,13 @@ focus-lock@^0.6.3:
   resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7"
   integrity sha512-Dx69IXGCq1qsUExWuG+5wkiMqVM/zGx/reXSJSLogECwp3x6KeNQZ+NAetgxEFpnC41rD8U3+jRCW68+LNzdtw==
 
+focus-lock@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.8.1.tgz#bb36968abf77a2063fa173cb6c47b12ac8599d33"
+  integrity sha512-/LFZOIo82WDsyyv7h7oc0MJF9ACOvDRdx9rWPZ2pgMfNWu/z8hQDBtOchuB/0BVLmuFOZjV02YwUVzNsWx/EzA==
+  dependencies:
+    tslib "^1.9.3"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -7782,7 +7710,7 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
-format@^0.2.0, format@^0.2.2:
+format@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
@@ -7969,15 +7897,6 @@ get-caller-file@^2.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.2:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
-  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@@ -8345,32 +8264,21 @@ hastscript@^5.0.0:
     property-information "^5.0.0"
     space-separated-tokens "^1.0.0"
 
-hastscript@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
-  integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==
-  dependencies:
-    "@types/hast" "^2.0.0"
-    comma-separated-tokens "^1.0.0"
-    hast-util-parse-selector "^2.0.0"
-    property-information "^5.0.0"
-    space-separated-tokens "^1.0.0"
-
 he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-highlight.js@^10.1.1, highlight.js@~10.7.0:
-  version "10.7.2"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.2.tgz#89319b861edc66c48854ed1e6da21ea89f847360"
-  integrity sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg==
-
 highlight.js@~9.12.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
   integrity sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=
 
+highlight.js@~9.13.0:
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
+  integrity sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -8969,11 +8877,6 @@ is-function@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
   integrity sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=
 
-is-function@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
-  integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
-
 is-generator-fn@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
@@ -9138,14 +9041,6 @@ is-regex@^1.1.0, is-regex@^1.1.1:
   dependencies:
     has-symbols "^1.0.1"
 
-is-regex@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.2.tgz#81c8ebde4db142f2cf1c53fc86d6a45788266251"
-  integrity sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==
-  dependencies:
-    call-bind "^1.0.2"
-    has-symbols "^1.0.1"
-
 is-retry-allowed@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
@@ -10180,6 +10075,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash._baseassign@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
@@ -10340,16 +10240,16 @@ lodash@4.17.19, lodash@^4.0.0, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10,
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
   integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
+lodash@^4.0.1:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 lodash@^4.17.19:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
-lodash@^4.17.20, lodash@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
 log-symbols@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
@@ -10409,13 +10309,13 @@ lowercase-keys@^1.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
   integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
 
-lowlight@^1.14.0:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
-  integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
+lowlight@~1.11.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.11.0.tgz#1304d83005126d4e8b1dc0f07981e9b689ec2efc"
+  integrity sha512-xrGGN6XLL7MbTMdPD6NfWPwY43SNkjf/d0mecSx/CW36fUZTjRHEq0/Cdug3TWKtRXLWi7iMl1eP0olYxj/a4A==
   dependencies:
-    fault "^1.0.0"
-    highlight.js "~10.7.0"
+    fault "^1.0.2"
+    highlight.js "~9.13.0"
 
 lowlight@~1.9.1:
   version "1.9.2"
@@ -10509,10 +10409,10 @@ markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
-markdown-to-jsx@^7.1.0:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.1.2.tgz#19d3da4cd8864045cdd13a0d179147fbd6a088d4"
-  integrity sha512-O8DMCl32V34RrD+ZHxcAPc2+kYytuDIoQYjY36RVdsLK7uHjgNVvFec4yv0X6LgB4YEZgSvK5QtFi5YVqEpoMA==
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
 
 math-random@^1.0.1:
   version "1.0.1"
@@ -11281,11 +11181,6 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
-object-inspect@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
-  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
-
 object-is@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
@@ -11521,11 +11416,6 @@ osenv@0, osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
-overlayscrollbars@^1.13.1:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/overlayscrollbars/-/overlayscrollbars-1.13.1.tgz#0b840a88737f43a946b9d87875a2f9e421d0338a"
-  integrity sha512-gIQfzgGgu1wy80EB4/6DaJGHMEGmizq27xHIESrzXq0Y/J0Ay1P3DWk6tuVmEPIZH15zaBlxeEJOqdJKmowHCQ==
-
 p-all@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-all/-/p-all-2.1.0.tgz#91419be56b7dee8fe4c5db875d55e0da084244a0"
@@ -11673,18 +11563,6 @@ parse-entities@^1.1.2:
     is-decimal "^1.0.0"
     is-hexadecimal "^1.0.0"
 
-parse-entities@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
-  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
-  dependencies:
-    character-entities "^1.0.0"
-    character-entities-legacy "^1.0.0"
-    character-reference-invalid "^1.0.0"
-    is-alphanumerical "^1.0.0"
-    is-decimal "^1.0.0"
-    is-hexadecimal "^1.0.0"
-
 parse-glob@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/parse-glob/-/parse-glob-3.0.4.tgz#b2c376cfb11f35513badd173ef0bb6e3a388391c"
@@ -11958,13 +11836,6 @@ polished@^3.3.1:
   dependencies:
     "@babel/runtime" "^7.6.3"
 
-polished@^4.0.5:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-4.1.1.tgz#40442cc973348e466f2918cdf647531bb6c29bfb"
-  integrity sha512-4MZTrfPMPRLD7ac8b+2JZxei58zw6N1hFkdBDERif5Tlj19y3vPoPusrLG+mJIlPTGnUlKw3+yWz0BazvMx1vg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
 popper.js@1.16.1:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
@@ -12141,13 +12012,6 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
-prismjs@^1.21.0, prismjs@~1.23.0:
-  version "1.23.0"
-  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
-  integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
-  optionalDependencies:
-    clipboard "^2.0.0"
-
 prismjs@^1.8.4, prismjs@~1.17.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.17.1.tgz#e669fcbd4cdd873c35102881c33b14d0d68519be"
@@ -12361,13 +12225,6 @@ qs@6.7.0:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
-qs@^6.10.0:
-  version "6.10.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
-  integrity sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==
-  dependencies:
-    side-channel "^1.0.4"
-
 qs@^6.6.0:
   version "6.9.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.1.tgz#20082c65cb78223635ab1a9eaca8875a29bf8ec9"
@@ -12510,10 +12367,25 @@ react-clientside-effect@^1.2.0:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
-react-colorful@^5.0.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.1.1.tgz#b242a3a59dc2e740fef9ee072c1d8b49d3465b62"
-  integrity sha512-CNnpzPOMDUors/WcN23IUkBvdHuzJfr5UuZxW02TyVW5hCmFME3cbxucF26EujKyTt4ageBrLDyQ6JAtjGIzgQ==
+react-clientside-effect@^1.2.2:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz#e2c4dc3c9ee109f642fac4f5b6e9bf5bcd2219a3"
+  integrity sha512-2bL8qFW1TGBHozGGbVeyvnggRpMjibeZM2536AKNENLECutp2yfs44IL8Hmpn8qjFQ2K7A9PnYf3vc7aQq/cPA==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+
+react-color@^2.17.0:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
 
 react-dev-utils@^9.0.0:
   version "9.1.0"
@@ -12605,11 +12477,6 @@ react-fast-compare@^2.0.4:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-fast-compare@^3.0.1:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
-  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
-
 react-focus-lock@^1.18.3:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.19.1.tgz#2f3429793edaefe2d077121f973ce5a3c7a0651a"
@@ -12620,6 +12487,18 @@ react-focus-lock@^1.18.3:
     prop-types "^15.6.2"
     react-clientside-effect "^1.2.0"
 
+react-focus-lock@^2.1.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.5.0.tgz#12e3a3940e897c26e2c2a0408cd25ea3c99b3709"
+  integrity sha512-XLxj6uTXgz0US8TmqNU2jMfnXwZG0mH2r/afQqvPEaX6nyEll5LHVcEXk2XDUQ34RVeLPkO/xK5x6c/qiuSq/A==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    focus-lock "^0.8.1"
+    prop-types "^15.6.2"
+    react-clientside-effect "^1.2.2"
+    use-callback-ref "^1.2.1"
+    use-sidecar "^1.0.1"
+
 react-helmet-async@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.4.tgz#079ef10b7fefcaee6240fefd150711e62463cc97"
@@ -12695,15 +12574,6 @@ react-popper-tooltip@^2.8.3:
     "@babel/runtime" "^7.7.4"
     react-popper "^1.3.6"
 
-react-popper-tooltip@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz#329569eb7b287008f04fcbddb6370452ad3f9eac"
-  integrity sha512-EnERAnnKRptQBJyaee5GJScWNUKQPDD2ywvzZyUjst/wj5U64C8/CnSYLNEmP2hG0IJ3ZhtDxE8oDN+KOyavXQ==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@popperjs/core" "^2.5.4"
-    react-popper "^2.2.4"
-
 react-popper@^1.3.6:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.6.tgz#32122f83af8fda01bdd4f86625ddacaf64fdd06d"
@@ -12716,14 +12586,6 @@ react-popper@^1.3.6:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
-react-popper@^2.2.4:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96"
-  integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==
-  dependencies:
-    react-fast-compare "^3.0.1"
-    warning "^4.0.2"
-
 react-scrollbars-custom@4.0.21:
   version "4.0.21"
   resolved "https://registry.yarnpkg.com/react-scrollbars-custom/-/react-scrollbars-custom-4.0.21.tgz#daab3104b9707033a5be29fdc5b7408dee41a5ad"
@@ -12733,7 +12595,7 @@ react-scrollbars-custom@4.0.21:
     react-draggable "^3.3.2"
     zoom-level "^1.2.4"
 
-react-select@^3.2.0:
+react-select@^3.0.8:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.2.0.tgz#de9284700196f5f9b5277c5d850a9ce85f5c72fe"
   integrity sha512-B/q3TnCZXEKItO0fFN/I0tWOX3WJvi/X2wtdffmwSQVRwg5BpValScTO1vdic9AxlUgmeSzib2hAZAwIUQUZGQ==
@@ -12757,16 +12619,16 @@ react-sizeme@^2.6.7:
     shallowequal "^1.1.0"
     throttle-debounce "^2.1.0"
 
-react-syntax-highlighter@^13.5.3:
-  version "13.5.3"
-  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-13.5.3.tgz#9712850f883a3e19eb858cf93fad7bb357eea9c6"
-  integrity sha512-crPaF+QGPeHNIblxxCdf2Lg936NAHKhNhuMzRL3F9ct6aYXL3NcZtCL0Rms9+qVo6Y1EQLdXGypBNSbPL/r+qg==
+react-syntax-highlighter@^11.0.2:
+  version "11.0.2"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.2.tgz#4e3f376e752b20d2f54e4c55652fd663149e4029"
+  integrity sha512-kqmpM2OH5OodInbEADKARwccwSQWBfZi0970l5Jhp4h39q9Q65C4frNcnd6uHE5pR00W8pOWj9HDRntj2G4Rww==
   dependencies:
     "@babel/runtime" "^7.3.1"
-    highlight.js "^10.1.1"
-    lowlight "^1.14.0"
-    prismjs "^1.21.0"
-    refractor "^3.1.0"
+    highlight.js "~9.13.0"
+    lowlight "~1.11.0"
+    prismjs "^1.8.4"
+    refractor "^2.4.1"
 
 react-syntax-highlighter@^8.0.1:
   version "8.1.0"
@@ -12804,15 +12666,6 @@ react-textarea-autosize@^7.1.0:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.0"
 
-react-textarea-autosize@^8.3.0:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.2.tgz#4f9374d357b0a6f6469956726722549124a1b2db"
-  integrity sha512-JrMWVgQSaExQByP3ggI1eA8zF4mF0+ddVuX7acUeK2V7bmrpjVOY72vmLz2IXFJSAXoY3D80nEzrn0GWajWK3Q==
-  dependencies:
-    "@babel/runtime" "^7.10.2"
-    use-composed-ref "^1.0.0"
-    use-latest "^1.0.0"
-
 react-transition-group@^4.3.0:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
@@ -12841,6 +12694,13 @@ react@^16.6.0, react@^16.8.3:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -13006,15 +12866,6 @@ refractor@^2.4.1:
     parse-entities "^1.1.2"
     prismjs "~1.17.0"
 
-refractor@^3.1.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.3.1.tgz#ebbc04b427ea81dc25ad333f7f67a0b5f4f0be3a"
-  integrity sha512-vaN6R56kLMuBszHSWlwTpcZ8KTMG6aUCok4GrxYDT20UIOXxOc5o6oDc8tNTzSlH3m2sI+Eu9Jo2kVdDcUTWYw==
-  dependencies:
-    hastscript "^6.0.0"
-    parse-entities "^2.0.0"
-    prismjs "~1.23.0"
-
 regenerate-unicode-properties@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
@@ -13049,7 +12900,7 @@ regenerator-runtime@^0.13.2:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
   integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
 
-regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
+regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
@@ -13786,15 +13637,6 @@ side-channel@^1.0.2:
     es-abstract "^1.18.0-next.0"
     object-inspect "^1.8.0"
 
-side-channel@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
-  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
-  dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.2"
-    object-inspect "^1.9.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -14069,11 +13911,6 @@ stealthy-require@^1.1.0, stealthy-require@^1.1.1:
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
   integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
 
-store2@^2.12.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/store2/-/store2-2.12.0.tgz#e1f1b7e1a59b6083b2596a8d067f6ee88fd4d3cf"
-  integrity sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==
-
 store2@^2.7.1:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.10.0.tgz#46b82bb91878daf1b0d56dec2f1d41e54d5103cf"
@@ -14476,7 +14313,7 @@ tar@^4:
     safe-buffer "^5.1.2"
     yallist "^3.0.2"
 
-telejson@^3.0.2:
+telejson@^3.0.2, telejson@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/telejson/-/telejson-3.3.0.tgz#6d814f3c0d254d5c4770085aad063e266b56ad03"
   integrity sha512-er08AylQ+LEbDLp1GRezORZu5wKOHaBczF6oYJtgC3Idv10qZ8A3p6ffT+J5BzDKkV9MqBvu8HAKiIIOp6KJ2w==
@@ -14490,20 +14327,6 @@ telejson@^3.0.2:
     lodash "^4.17.15"
     memoizerific "^1.11.3"
 
-telejson@^5.1.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/telejson/-/telejson-5.1.1.tgz#fd83b594ebddfaeb9a5c4b9660c302fc07c9a65c"
-  integrity sha512-aU7x+nwodmODJPXhU9sC/REOcX/dx1tNbyeOFV1PCTh6e9Mj+bnyfQ7sr13zfJYya9BtpGwnUNn9Fd76Ybj2eg==
-  dependencies:
-    "@types/is-function" "^1.0.0"
-    global "^4.4.0"
-    is-function "^1.0.2"
-    is-regex "^1.1.2"
-    is-symbol "^1.0.3"
-    isobject "^4.0.0"
-    lodash "^4.17.21"
-    memoizerific "^1.11.3"
-
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
@@ -14607,6 +14430,11 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tinycolor2@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
 tippy.js@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.0.tgz#1cabf492b3afb1a82cf28e5a62859f6aeb253688"
@@ -14733,15 +14561,10 @@ trim-newlines@^1.0.0:
   dependencies:
     glob "^7.1.2"
 
-ts-dedent@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.1.1.tgz#6dd56870bb5493895171334fa5d7e929107e5bbc"
-  integrity sha512-riHuwnzAUCfdIeTBNUq7+Yj+ANnrMXo/7+Z74dIdudS7ys2k8aSGMzpJRMFDF7CLwUTbtvi1ZZff/Wl+XxmqIA==
-
-ts-essentials@^2.0.3:
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-2.0.12.tgz#c9303f3d74f75fa7528c3d49b80e089ab09d8745"
-  integrity sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==
+ts-dedent@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.2.0.tgz#6aa2229d837159bb6d635b6b233002423b91e0b0"
+  integrity sha512-6zSJp23uQI+Txyz5LlXMXAHpUhY4Hi0oluXny0OgIR7g/Cromq4vDBnhtbBdyIV34g0pgwxUvnvg+jLJe4c1NA==
 
 ts-pnp@^1.1.2:
   version "1.1.5"
@@ -14763,6 +14586,11 @@ tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
 
+tslib@^1.9.3:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -15042,24 +14870,18 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-composed-ref@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.1.0.tgz#9220e4e94a97b7b02d7d27eaeab0b37034438bbc"
-  integrity sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==
-  dependencies:
-    ts-essentials "^2.0.3"
-
-use-isomorphic-layout-effect@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz#7bb6589170cd2987a152042f9084f9effb75c225"
-  integrity sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==
+use-callback-ref@^1.2.1:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
+  integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
 
-use-latest@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.0.tgz#a44f6572b8288e0972ec411bdd0840ada366f232"
-  integrity sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==
+use-sidecar@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.5.tgz#ffff2a17c1df42e348624b699ba6e5c220527f2b"
+  integrity sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==
   dependencies:
-    use-isomorphic-layout-effect "^1.0.0"
+    detect-node-es "^1.1.0"
+    tslib "^1.9.3"
 
 use@^3.1.0:
   version "3.1.0"

From 93e3ecbbc2eb38f295de5765edaa11fc1271589f Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 16 Apr 2021 14:43:27 +0200
Subject: [PATCH 229/244] 0.9.8-rc.18

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f48610fc..48a94ce1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.17",
+  "version": "0.9.8-rc.18",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 58f382a08837822dd2f3e847bebdb29808ac1185 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 16 Apr 2021 17:58:40 +0200
Subject: [PATCH 230/244] [DDW-595] Improve configurability of Input error
 handling

---
 source/components/FormField.js                |   5 +
 source/components/Input.js                    |   6 +
 source/skins/simple/FormFieldSkin.js          |  27 ++--
 source/skins/simple/InputSkin.js              |   8 +-
 source/skins/simple/PasswordInputSkin.js      |  42 ++----
 source/themes/simple/SimplePasswordInput.scss |   8 --
 source/utils/hooks.js                         |  49 ++++---
 stories/Input.stories.js                      | 123 ++++++++++++------
 8 files changed, 159 insertions(+), 109 deletions(-)

diff --git a/source/components/FormField.js b/source/components/FormField.js
index c9aaec6d..c1d68c55 100644
--- a/source/components/FormField.js
+++ b/source/components/FormField.js
@@ -18,6 +18,8 @@ export type FormFieldProps = {
   formFieldRef: ElementRef<*>,
   isErrorHidden?: boolean,
   isErrorShown?: boolean,
+  isShowingErrorOnFocus: boolean,
+  isShowingErrorOnHover: boolean,
   label?: string | Element<any>,
   onChange: Function,
   render: (setFormFieldRef: (ElementRef<*>) => void) => React$Node,
@@ -25,6 +27,7 @@ export type FormFieldProps = {
   theme: ?Object, // will take precedence over theme in context if passed
   themeId: string,
   themeOverrides: Object,
+  themeVariables?: Object,
 };
 
 type State = {
@@ -38,6 +41,8 @@ class FormFieldBase extends Component<FormFieldProps, State> {
 
   static defaultProps = {
     context: createEmptyContext(),
+    isShowingErrorOnFocus: true,
+    isShowingErrorOnHover: true,
     theme: null,
     themeId: IDENTIFIERS.FORM_FIELD,
     themeOverrides: {},
diff --git a/source/components/Input.js b/source/components/Input.js
index 22abfdb4..48375971 100644
--- a/source/components/Input.js
+++ b/source/components/Input.js
@@ -22,6 +22,9 @@ export type InputProps = {
   error?: string | Element<any>,
   inputRef?: RefObject,
   showErrorState?: boolean,
+  hideErrorState?: boolean,
+  isShowingErrorOnFocus: boolean,
+  isShowingErrorOnHover: boolean,
   label?: string | Element<any>,
   maxLength?: number,
   minLength?: number,
@@ -35,6 +38,7 @@ export type InputProps = {
   theme: ?Object, // will take precedence over theme in context if passed
   themeId: string,
   themeOverrides: Object,
+  themeVariables?: Object,
   value: string,
 };
 
@@ -52,6 +56,8 @@ class InputBase extends Component<InputProps, State> {
     autoFocus: false,
     context: createEmptyContext(),
     error: '',
+    isShowingErrorOnFocus: true,
+    isShowingErrorOnHover: true,
     readOnly: false,
     theme: null,
     themeId: IDENTIFIERS.INPUT,
diff --git a/source/skins/simple/FormFieldSkin.js b/source/skins/simple/FormFieldSkin.js
index 08fc6914..e7aa9e87 100644
--- a/source/skins/simple/FormFieldSkin.js
+++ b/source/skins/simple/FormFieldSkin.js
@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import type { FormFieldProps } from '../../components/FormField';
 import { PopOver } from '../../components/PopOver';
 import { SimpleFormFieldVariables } from '../../themes/simple/SimpleFormField';
-import { handleRefFocusState } from '../../utils/hooks';
+import { handleRefState, manageRef } from '../../utils/hooks';
 
 type Props = FormFieldProps & {
   formFieldRef: ElementRef<*>,
@@ -14,11 +14,15 @@ type Props = FormFieldProps & {
 };
 
 export function FormFieldSkin(props: Props) {
-  const [isFormFieldFocused, setIsFormFieldFocused] = useState(false);
-  const setFormFieldRef = handleRefFocusState(
-    props.formFieldRef,
-    setIsFormFieldFocused
-  );
+  const updateOnRefChanges = manageRef(props.formFieldRef);
+  const isFormFieldFocused = handleRefState(props.formFieldRef, {
+    on: 'focus',
+    off: 'blur',
+  });
+  const isFormFieldHovered = handleRefState(props.formFieldRef, {
+    on: 'mouseenter',
+    off: 'mouseleave',
+  });
   const hasError = props.error != null;
   return (
     <div
@@ -28,6 +32,7 @@ export function FormFieldSkin(props: Props) {
         props.disabled ? props.theme[props.themeId].disabled : null,
         props.error ? props.theme[props.themeId].errored : null,
       ])}
+      style={props.themeVariables}
     >
       {props.label && (
         <label
@@ -41,19 +46,23 @@ export function FormFieldSkin(props: Props) {
       )}
       <PopOver
         visible={
-          props.isErrorShown ||
-          (hasError && isFormFieldFocused && !props.isErrorHidden)
+          props.isErrorShown === true ||
+          (props.isErrorHidden !== true &&
+            hasError &&
+            ((props.isShowingErrorOnFocus && isFormFieldFocused) ||
+              (props.isShowingErrorOnHover && isFormFieldHovered)))
         }
         content={props.error}
         themeVariables={{
           '--rp-pop-over-bg-color': `var(${SimpleFormFieldVariables.errorColor}`,
+          ...props.themeVariables,
         }}
         placement="bottom"
         popperOptions={{ modifiers: [{ name: 'flip', enabled: false }] }}
         duration={[300, 0]}
       >
         <div className={props.theme[props.themeId].inputWrapper}>
-          {props.render(setFormFieldRef)}
+          {props.render(updateOnRefChanges)}
         </div>
       </PopOver>
     </div>
diff --git a/source/skins/simple/InputSkin.js b/source/skins/simple/InputSkin.js
index 5568dcd3..42777618 100644
--- a/source/skins/simple/InputSkin.js
+++ b/source/skins/simple/InputSkin.js
@@ -1,6 +1,5 @@
 // @flow
-import React, { useState } from 'react';
-import type { ElementRef } from 'react';
+import React from 'react';
 
 // external libraries
 import classnames from 'classnames';
@@ -26,7 +25,7 @@ export const InputSkin = (props: Props) => {
       className={classnames([
         props.theme[props.themeId].input,
         props.disabled ? props.theme[props.themeId].disabled : null,
-        props.error || props.showErrorState
+        !props.hideErrorState && (props.error || props.showErrorState)
           ? props.theme[props.themeId].errored
           : null,
       ])}
@@ -58,9 +57,12 @@ export const InputSkin = (props: Props) => {
       disabled={props.disabled}
       label={props.label}
       error={props.error}
+      isShowingErrorOnHover={props.isShowingErrorOnHover}
+      isShowingErrorOnFocus={props.isShowingErrorOnFocus}
       formFieldRef={props.inputRef}
       theme={props.theme}
       render={render}
+      themeVariables={props.themeVariables}
     />
   );
 };
diff --git a/source/skins/simple/PasswordInputSkin.js b/source/skins/simple/PasswordInputSkin.js
index 36fa7fcd..07981af1 100644
--- a/source/skins/simple/PasswordInputSkin.js
+++ b/source/skins/simple/PasswordInputSkin.js
@@ -1,10 +1,9 @@
 // @flow
 import classnames from 'classnames';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { Input } from '../../components/Input';
 import { PasswordInput } from '../../components/PasswordInput';
-import { PopOver } from '../../components/PopOver';
 import type { PasswordInputProps } from '../../components/PasswordInput';
 import { SimplePasswordInputVariables } from '../../themes/simple/SimplePasswordInput';
 import { useDebouncedValueChangedIndicator } from '../../utils/hooks';
@@ -30,8 +29,6 @@ function getPopOverBgColorForState(state: PasswordInput.STATE): string {
 }
 
 export const PasswordInputSkin = (props: Props) => {
-  const [hasInputFocus, setHasInputFocus] = useState(false);
-  const [isInputHovered, setIsInputHovered] = useState(false);
   const {
     className,
     error,
@@ -52,6 +49,8 @@ export const PasswordInputSkin = (props: Props) => {
     ? useDebouncedValueChangedIndicator(value, debounceDelay)
     : true;
   const hasTooltip = hasInitialValueChanged && tooltip != null;
+  const stateColor = getPopOverBgColorForState(state);
+  const isErrorState = state === PasswordInput.STATE.ERROR;
   return (
     <div
       className={classnames([
@@ -60,34 +59,17 @@ export const PasswordInputSkin = (props: Props) => {
         className,
       ])}
     >
-      <PopOver
-        visible={
-          hasTooltip &&
-          (isTooltipOpen ||
-            (isShowingTooltipOnHover && isInputHovered) ||
-            (isShowingTooltipOnFocus && hasInputFocus))
-        }
-        content={tooltip}
+      <Input
+        {...inputProps}
+        error={hasTooltip ? tooltip : null}
+        showErrorState={hasTooltip && isErrorState}
+        hideErrorState={!isErrorState}
+        value={value}
+        type="password"
         themeVariables={{
-          '--rp-pop-over-bg-color': getPopOverBgColorForState(state),
+          '--rp-pop-over-bg-color': stateColor,
         }}
-        placement="bottom"
-        popperOptions={{ modifiers: [{ name: 'flip', enabled: false }] }}
-        duration={[300, 0]}
-      >
-        <Input
-          {...inputProps}
-          showErrorState={
-            hasInitialValueChanged && state === PasswordInput.STATE.ERROR
-          }
-          value={value}
-          type="password"
-          onBlur={() => setHasInputFocus(false)}
-          onFocus={() => setHasInputFocus(true)}
-          onMouseEnter={() => setIsInputHovered(true)}
-          onMouseOut={() => setIsInputHovered(false)}
-        />
-      </PopOver>
+      />
       <div className={theme[themeId].indicator}>
         <div
           className={theme[themeId].score}
diff --git a/source/themes/simple/SimplePasswordInput.scss b/source/themes/simple/SimplePasswordInput.scss
index 9339066d..94a2c118 100644
--- a/source/themes/simple/SimplePasswordInput.scss
+++ b/source/themes/simple/SimplePasswordInput.scss
@@ -17,14 +17,6 @@
   transition: width 400ms ease;
 }
 
-.error {
-  :global {
-    .SimpleFormField_error {
-      display: none;
-    }
-  }
-}
-
 .insecure, .weak, .strong {
   :global {
     .SimpleInput_input {
diff --git a/source/utils/hooks.js b/source/utils/hooks.js
index fefa99e1..c05256f2 100644
--- a/source/utils/hooks.js
+++ b/source/utils/hooks.js
@@ -1,6 +1,6 @@
 // @flow
 import type { ElementRef } from 'react';
-import { useEffect, useState, Ref, useCallback } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 
 export function useDebouncedValueChangedIndicator(value: any, delay: number) {
   const [isDirty, setIsDirty] = useState(false);
@@ -22,24 +22,41 @@ export function useDebouncedValueChangedIndicator(value: any, delay: number) {
   return isDirty;
 }
 
-// Inspired by https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
-export function handleRefFocusState(
+/**
+ * Hook for setting a ref and re-rendering when the value changes
+ * Inspired by https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780
+ */
+export function manageRef(ref: ElementRef<*>) {
+  return useCallback((node) => {
+    ref.current = node;
+  }, []);
+}
+
+/**
+ * Hook for handling the on/off state of events that
+ * are toggle-able like "hovered" or "focused"
+ */
+export function handleRefState(
   ref: ElementRef<*>,
-  setIsFocused: React.SetStateAction
+  events: { on: string, off: string }
 ) {
-  const focusListener = () => setIsFocused(true);
-  const blurListener = () => setIsFocused(false);
-
-  return useCallback((node) => {
+  const [isOn, setIsOn] = useState(false);
+  const onListener = () => setIsOn(true);
+  const offListener = () => setIsOn(false);
+  useEffect(() => {
     if (ref.current) {
       const { current } = ref;
-      current.removeEventListener('focus', focusListener);
-      current.removeEventListener('blur', blurListener);
-    }
-    if (node) {
-      node.addEventListener('focus', focusListener);
-      node.addEventListener('blur', blurListener);
+      current.addEventListener(events.on, onListener);
+      current.addEventListener(events.off, offListener);
     }
-    ref.current = node;
-  }, []);
+    // Remove event listeners on component unmount
+    return () => {
+      if (ref.current) {
+        const { current } = ref;
+        current.removeEventListener(events.on, onListener);
+        current.removeEventListener(events.off, offListener);
+      }
+    };
+  });
+  return isOn;
 }
diff --git a/stories/Input.stories.js b/stories/Input.stories.js
index 1eaa4dcb..828dd8f7 100644
--- a/stories/Input.stories.js
+++ b/stories/Input.stories.js
@@ -19,153 +19,190 @@ import themeOverrides from './theme-overrides/customInput.scss';
 import { decorateWithSimpleTheme } from './helpers/theming';
 
 storiesOf('Input', module)
-
   .addDecorator(decorateWithSimpleTheme)
 
   // ====== Stories ======
 
-  .add('plain',
-    withState({ value: '' }, store => (
+  .add(
+    'plain',
+    withState({ value: '' }, (store) => (
       <Input
         value={store.state.value}
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   )
 
-  .add('label',
-    withState({ value: '' }, store => (
+  .add(
+    'label',
+    withState({ value: '' }, (store) => (
       <Input
         label="Click Me to Focus"
         value={store.state.value}
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   )
 
-  .add('placeholder',
-    withState({ value: '' }, store => (
+  .add(
+    'placeholder',
+    withState({ value: '' }, (store) => (
       <Input
         value={store.state.value}
         placeholder="user name"
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   )
 
-  .add('autoFocus',
-    withState({ value: '' }, store => (
+  .add(
+    'autoFocus',
+    withState({ value: '' }, (store) => (
       <Input
         autoFocus
         label="With autoFocus"
         value={store.state.value}
         placeholder="autoFocus"
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   )
 
   .add('disabled', () => (
-    <Input
-      disabled
-      label="Disabled Input"
-      placeholder="user name"
-    />
+    <Input disabled label="Disabled Input" placeholder="user name" />
   ))
 
-  .add('with error',
-    withState({ value: '' }, store => (
+  .add(
+    'error (on focus & hover)',
+    withState({ value: '' }, (store) => (
+      <Input
+        label="With Error on focus & hover"
+        error="Something went wrong"
+        value={store.state.value}
+        onChange={(value) => store.set({ value })}
+      />
+    ))
+  )
+
+  .add(
+    'custom error (only on focus)',
+    withState({ value: '' }, (store) => (
+      <Input
+        label="Custom Error only on focus"
+        error="Something went wrong"
+        value={store.state.value}
+        onChange={(value) => store.set({ value })}
+        isShowingErrorOnHover={false}
+        themeVariables={{
+          '--rp-input-border-color-errored': 'orange',
+          '--rp-pop-over-bg-color': 'orange',
+        }}
+      />
+    ))
+  )
+
+  .add(
+    'error (only on hover)',
+    withState({ value: '' }, (store) => (
       <Input
-        label="With Error"
+        label="With Error only on focus"
         error="Something went wrong"
         value={store.state.value}
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
+        isShowingErrorOnFocus={false}
       />
     ))
   )
 
-  .add('minLength(8)',
-    withState({ value: '' }, store => (
+  .add(
+    'minLength(8)',
+    withState({ value: '' }, (store) => (
       <Input
         label="Minimum 8 Characters"
         value={store.state.value}
         placeholder="min length"
         minLength={8}
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   )
 
-  .add('maxLength(5)',
-    withState({ value: '' }, store => (
+  .add(
+    'maxLength(5)',
+    withState({ value: '' }, (store) => (
       <Input
         label="Maximum 5 Characters"
         value={store.state.value}
         placeholder="max length"
         maxLength={5}
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   )
 
-  .add('type=password',
-    withState({ value: '' }, store => (
+  .add(
+    'type=password',
+    withState({ value: '' }, (store) => (
       <Input
         value={store.state.value}
         type="password"
         placeholder="password"
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   )
 
-  .add('onFocus / onBlur',
-    withState({ value: '', focused: false, blurred: false }, store => (
+  .add(
+    'onFocus / onBlur',
+    withState({ value: '', focused: false, blurred: false }, (store) => (
       <Input
         label="See the State Tab Below"
         value={store.state.value}
         placeholder="onFocus / onBlur"
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
         onFocus={() => store.set({ focused: true, blurred: false })}
         onBlur={() => store.set({ blurred: true, focused: false })}
       />
     ))
   )
 
-  .add('onKeyPress',
-    withState({ value: '' }, store => (
+  .add(
+    'onKeyPress',
+    withState({ value: '' }, (store) => (
       <Input
         label="Type to See Events Logged"
         value={store.state.value}
         placeholder="max 5 characters"
         maxLength={5}
         onKeyPress={action('onKeyPress')}
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   )
 
-  .add('theme overrides, minLength(8)',
-    withState({ value: '' }, store => (
+  .add(
+    'theme overrides, minLength(8)',
+    withState({ value: '' }, (store) => (
       <Input
         label="Composed Theme"
         minLength={8}
         themeOverrides={themeOverrides}
         value={store.state.value}
         placeholder="type here..."
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   )
 
-  .add('custom theme',
-    withState({ value: '' }, store => (
+  .add(
+    'custom theme',
+    withState({ value: '' }, (store) => (
       <Input
         label="Custom Theme"
         theme={CustomInputTheme}
         value={store.state.value}
         placeholder="type here..."
-        onChange={value => store.set({ value })}
+        onChange={(value) => store.set({ value })}
       />
     ))
   );

From d45535ef5cea6702189de3949cfbf4258db3872a Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 16 Apr 2021 20:18:21 +0200
Subject: [PATCH 231/244] 0.9.8-rc.19

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 48a94ce1..8d843fd8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.18",
+  "version": "0.9.8-rc.19",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 5fd08e13ca0754c107f98c5f90c2addc11feb46e Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Mon, 19 Apr 2021 18:45:24 -0300
Subject: [PATCH 232/244] [DDW-645] Add key prop to highlight element

---
 source/skins/simple/OptionsSkin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index 55d8dc4d..378f6937 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -135,7 +135,7 @@ export const OptionsSkin = (props: Props) => {
         const parts = typeof label === 'string' ? label.split(splitter) : label;
         for (let i = 1; i < parts.length; i += 2) {
           if (escapeRegExp(parts[i].toLowerCase()) === `${escapedSearchValue}`.toLowerCase())
-            parts[i] = <em>{parts[i]}</em>;
+            parts[i] = <em key={i}>{parts[i]}</em>;
           label = parts;
         }
       }

From 6c206a4e7ef8a13a5d145e9e5aa7c942cc2d8b9e Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Mon, 19 Apr 2021 18:50:55 -0300
Subject: [PATCH 233/244] [DDW-645] Styling fixes

---
 source/themes/simple/SimpleOptions.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/themes/simple/SimpleOptions.scss b/source/themes/simple/SimpleOptions.scss
index 5bfbb267..d5909e4f 100644
--- a/source/themes/simple/SimpleOptions.scss
+++ b/source/themes/simple/SimpleOptions.scss
@@ -26,7 +26,7 @@ $option-text-color-disabled: var(--rp-option-text-color-disabled, rgba(#5e6066,
 $option-search-box-shadow: var(--rp-option-search-box-shadow, 0 10px 10px -5px rgba(0, 0, 0, 0.12)) !default;
 $option-search-clear-button-bg-color: var(--rp-option-bg-color-highlighted, rgba(68, 91, 124, 0.1)) !default;
 $option-search-clear-icon-color: var(--rp-input-text-color, #5e6066) !default;
-$option-search-clear-icon-size: var(--rp-option-search-clear-icon-size, 8px) !default;
+$option-search-clear-icon-size: var(--rp-option-search-clear-icon-size, 10px) !default;
 $option-search-clear-icon-url: var(--rp-option-search-clear-icon-url, url("#{$theme-assets-path}/cross.svg")) !default;
 $option-search-highlight-background-color: var(--rp-option-search-highlight-background-color, #f2a218) !default;
 $option-search-icon-color: var(--rp-input-text-color, #5e6066) !default;
@@ -169,9 +169,9 @@ $options-arrow-height: var(--rp-options-arrow-height, $options-arrow-size) !defa
     cursor: pointer;
     height: 28px;
     opacity: 0;
-    padding: 10px;
+    padding: 9px;
     position: absolute;
-    top: 12px;
+    top: 11px;
     transition: opacity .25s ease-out;
     width: 28px;
     z-index: 1;

From ca76f01a202f691caaf9b9c1b59ccf0fbe8be91a Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Mon, 19 Apr 2021 18:53:47 -0300
Subject: [PATCH 234/244] [DDW-645] CHANGELOG entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 98109e49..0d383f34 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ vNext
 
 ### Fixes
 
+- Fixed Select Search styles and minor code issues ([PR 175](https://github.com/input-output-hk/react-polymorph/pull/175))
 - Fixed a wrong variable name for the select search highlight color ([PR 170](https://github.com/input-output-hk/react-polymorph/pull/170))
 - Fixed an issue related to Numeric Input when entering numbers after having selected the decimal separator ([PR 167](https://github.com/input-output-hk/react-polymorph/pull/167))
 - Fixed issues related to controlled/uncontrolled Tippy state ([PR 160](https://github.com/input-output-hk/react-polymorph/pull/160))

From 772e120d887bf882ddaa2f70be2f60b9f5cc9f53 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Tue, 20 Apr 2021 11:54:47 +0200
Subject: [PATCH 235/244] [DDW-645] Remove yarnrc file as it makes trouble on
 netlify

---
 .yarnrc | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 .yarnrc

diff --git a/.yarnrc b/.yarnrc
deleted file mode 100644
index bf833b62..00000000
--- a/.yarnrc
+++ /dev/null
@@ -1 +0,0 @@
-registry https://registry.yarnpkg.com

From 6543f3a9e298e178f338c63c551b4efd9dda675f Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 22 Apr 2021 21:40:54 +0200
Subject: [PATCH 236/244] Document new release management

---
 README.md    | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 package.json |  4 +++-
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7223cfec..ef5354ce 100644
--- a/README.md
+++ b/README.md
@@ -93,6 +93,55 @@ const SimpleFormApp = () => (
 );
 ```
 
+## Release Managament
+
+- Starting with `1.0.0` all future releases will follow semver semantics:
+  - `patch` (eg: 1.0.x) for **API compatible bug fixes**
+  - `minor` (eg.: 1.x.0) for **API compatible new features**
+  - `major` (eg: 2.0.0) for **API breaking changes**
+  
+- For early integration of upcoming release changes we use the following conventions:
+  
+  - `[current version]-next.x` to tag changes for upcoming releases (as we cannot know the necessary 
+    semver for the final release including all the changes). `x` in this case is simply a number that 
+    is increased and can be thought of like "slots" for temporary releases
+    
+  - All temporary releases should be published with the `next` npm dist tag via: `npm publish --tag next` 
+    so that they are not automatically tagged with the default `latest` npm tag.
+    
+- The `stable` branch only includes commits of final releases
+  
+- `release/x.x.x` branches are created as soon as we cut a release and know the correct semver - they 
+  are always targeting the `stable` branch + should be well documented. They can include many release
+  candidates which should be tagged like `[next releaes]-rc.X` where you increment X per release candidate
+  until we are confident that the release is ready to be published under its normal version.
+
+### How to publish a temporary release
+
+Temporary releases are useful for testing specific changes in your project PRs without making public
+releases that might confuse others and are not following semver.
+
+1. Create a dedicated branch for your bug/feature/chore
+2. Run `npm:view:next` to see the latest release version the `next` npm dist-tag is currently pointing to
+   (this will look something like this: `1.0.0-next.1`)
+3. Increase the `next.X` number by one (e.g: `npm version 1.0.0-next.2`) to create a new git tag via.
+4. Publish the release candidate with `npm:publish:next` (this automatically assigns the `next` dist-tag)
+5. Reference your release candidate version in your project PR
+
+### How to publish a stable release
+
+Stable releases are the next public version change of react-polymorph combining all previous temporary
+releases into a semver based release:
+
+1. Create a new `release/x.x.x` branch based on `develop` (following semver based on changelog)
+2. Update the version in `package.json` to the planned release version (do not tag it)
+3. Update the `CHANGELOG.md` to assign the new release version to the last changes and upcoming changes
+3. Setup a PR targetting `stable` for the relase branch on Github and document the changes since last release
+4. Publish a release candidate to npm (e.g: `1.0.1-rc.1`)
+5. Integrate and test the release candidate
+6. Iterate on the release via release candidates until its ready to be merged
+7. Merge the release PR into `stable` on Github and then `stable` back into `develop`
+
 ### Components and Skins
 
 React-polymorph comes with simple themes & skins out of the box, but anything is customizable.
diff --git a/package.json b/package.json
index 48a94ce1..8f932f90 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,9 @@
     "storybook:build": "build-storybook -c storybook -o dist/storybook",
     "test": "cross-env NODE_ENV=test jest",
     "test:update": "yarn test -u",
-    "test:watch": "yarn test --watchAll"
+    "test:watch": "yarn test --watchAll",
+    "npm:view:next": "npm view react-polymorph dist-tags.next",
+    "npm:publish:next": "npm publish --tag next"
   },
   "dependencies": {
     "@tippyjs/react": "4.2.1",

From a6a0df2001dfaf2cc989adc9893db645c4259b61 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Thu, 22 Apr 2021 22:02:04 +0200
Subject: [PATCH 237/244] [DDW-595] Add changelog entry

---
 CHANGELOG.md | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d383f34..f3527bf0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,13 +6,23 @@ The history of all changes to react-polymorph.
 vNext
 =====
 
-### Features
+### Breaking Changes :boom:
+
+- `Input` now shows errors on hover and focus by default which can be configured via two new props:
+
+```ts
+  isShowingErrorOnFocus: boolean,
+  isShowingErrorOnHover: boolean,
+```
 
+### Features :sparkles:
+
+- `Input` now accepts a new prop `themeVariables` which can be used to override css variables ([PR 173](https://github.com/input-output-hk/react-polymorph/pull/173))
 - Implemented the search functionality to the Options component ([PR 165](https://github.com/input-output-hk/daedalus/pull/165))
 - Improved PIN entry component UX ([PR 166](https://github.com/input-output-hk/react-polymorph/pull/166))
 - Enabled pasting of multiple words into Autocomplete ([PR 163](https://github.com/input-output-hk/react-polymorph/pull/163))
 
-### Fixes
+### Fixes :muscle:
 
 - Fixed Select Search styles and minor code issues ([PR 175](https://github.com/input-output-hk/react-polymorph/pull/175))
 - Fixed a wrong variable name for the select search highlight color ([PR 170](https://github.com/input-output-hk/react-polymorph/pull/170))

From 1006e1bf228bd0a7cda60dddc2da68c00b908f77 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 23 Apr 2021 11:37:07 +0200
Subject: [PATCH 238/244] Use master as stable branch for releases

---
 README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index ef5354ce..ee5109dc 100644
--- a/README.md
+++ b/README.md
@@ -109,10 +109,10 @@ const SimpleFormApp = () => (
   - All temporary releases should be published with the `next` npm dist tag via: `npm publish --tag next` 
     so that they are not automatically tagged with the default `latest` npm tag.
     
-- The `stable` branch only includes commits of final releases
+- The `master` branch only includes commits of final releases
   
 - `release/x.x.x` branches are created as soon as we cut a release and know the correct semver - they 
-  are always targeting the `stable` branch + should be well documented. They can include many release
+  are always targeting the `master` branch + should be well documented. They can include many release
   candidates which should be tagged like `[next releaes]-rc.X` where you increment X per release candidate
   until we are confident that the release is ready to be published under its normal version.
 
@@ -136,13 +136,13 @@ releases into a semver based release:
 1. Create a new `release/x.x.x` branch based on `develop` (following semver based on changelog)
 2. Update the version in `package.json` to the planned release version (do not tag it)
 3. Update the `CHANGELOG.md` to assign the new release version to the last changes and upcoming changes
-3. Setup a PR targetting `stable` for the relase branch on Github and document the changes since last release
+3. Setup a PR targetting `master` for the relase branch on Github and document the changes since last release
 4. Publish a release candidate to npm (e.g: `1.0.1-rc.1`)
 5. Integrate and test the release candidate
 6. Iterate on the release via release candidates until its ready to be merged
-7. Merge the release PR into `stable` on Github and then `stable` back into `develop`
+7. Merge the release PR into `master` on Github and then `master` back into `develop`
 
-### Components and Skins
+## Components and Skins
 
 React-polymorph comes with simple themes & skins out of the box, but anything is customizable.
 

From c3438c987e5d3bab5c7e7e71d275e6e3fca13bb6 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 23 Apr 2021 12:35:18 +0200
Subject: [PATCH 239/244] [DDW-595] Fix failing tests

---
 __tests__/FormField.test.js                   | 11 ----
 __tests__/NumericInput.behavior.test.js       |  9 ++--
 .../__snapshots__/FormField.test.js.snap      | 32 ------------
 __tests__/__snapshots__/TextArea.test.js.snap | 16 ------
 source/skins/simple/OptionsSkin.js            | 51 +++++++++++++------
 5 files changed, 39 insertions(+), 80 deletions(-)

diff --git a/__tests__/FormField.test.js b/__tests__/FormField.test.js
index aed4ac5e..fa24bf95 100644
--- a/__tests__/FormField.test.js
+++ b/__tests__/FormField.test.js
@@ -19,17 +19,6 @@ test('FormField renders with label', () => {
   ).toMatchSnapshot();
 });
 
-test('FormField is disabled', () => {
-  expect(
-    renderInSimpleTheme(
-      <FormField
-        disabled
-        render={({ disabled }) => <span>{disabled.toString()}</span>}
-      />
-    )
-  ).toMatchSnapshot();
-});
-
 test('FormField renders an input element', () => {
   expect(
     renderInSimpleTheme(
diff --git a/__tests__/NumericInput.behavior.test.js b/__tests__/NumericInput.behavior.test.js
index 8a10bf94..31af0336 100644
--- a/__tests__/NumericInput.behavior.test.js
+++ b/__tests__/NumericInput.behavior.test.js
@@ -23,8 +23,7 @@ describe('NumericInput onChange simulations', () => {
       const { input, onChangeMock } = mountNumericInputWithProps();
       input.simulate('change', { nativeEvent: { target: { value: '19.00' } } });
       const onChangeValue = onChangeMock.mock.calls[0][0];
-      expect(BigNumber.isBigNumber(onChangeValue)).toBe(true);
-      expect(onChangeValue.toNumber()).toBe(19);
+      expect(onChangeValue).toEqual('19');
     });
     test('invalid input does not trigger onChange listener', () => {
       const { input, onChangeMock } = mountNumericInputWithProps();
@@ -40,7 +39,7 @@ describe('NumericInput onChange simulations', () => {
         nativeEvent: { target: { value: '9,999,999.00' } },
       });
       const onChangeValue = onChangeMock.mock.calls[0][0];
-      expect(onChangeValue.toNumber()).toBe(9999999.0);
+      expect(onChangeValue).toBe('9999999');
     });
     test('can be configured to handle dots as thousand separators', () => {
       const { input, onChangeMock } = mountNumericInputWithProps({
@@ -52,7 +51,7 @@ describe('NumericInput onChange simulations', () => {
       input.simulate('change', {
         nativeEvent: { target: { value: '9.999.999,00' } },
       });
-      expect(onChangeMock.mock.calls[0][0].toNumber()).toBe(9999999);
+      expect(onChangeMock.mock.calls[0][0]).toBe('9999999');
     });
     test('can be configured to handle spaces as thousand separators', () => {
       const { input, onChangeMock } = mountNumericInputWithProps({
@@ -64,7 +63,7 @@ describe('NumericInput onChange simulations', () => {
       input.simulate('change', {
         nativeEvent: { target: { value: '9 999 999.00' } },
       });
-      expect(onChangeMock.mock.calls[0][0].toNumber()).toBe(9999999);
+      expect(onChangeMock.mock.calls[0][0]).toBe('9999999');
     });
   });
 });
diff --git a/__tests__/__snapshots__/FormField.test.js.snap b/__tests__/__snapshots__/FormField.test.js.snap
index cb60ada7..c1ae1bc1 100644
--- a/__tests__/__snapshots__/FormField.test.js.snap
+++ b/__tests__/__snapshots__/FormField.test.js.snap
@@ -1,21 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FormField is disabled 1`] = `
-<div
-  class="root disabled"
->
-  <span>
-    <div
-      class="inputWrapper"
-    >
-      <span>
-        true
-      </span>
-    </div>
-  </span>
-</div>
-`;
-
 exports[`FormField renders an input element 1`] = `
 <div
   class="root"
@@ -48,22 +32,6 @@ exports[`FormField renders correctly 1`] = `
 </div>
 `;
 
-exports[`FormField renders with an error 1`] = `
-<div
-  class="root errored"
->
-  <span>
-    <div
-      class="inputWrapper"
-    >
-      <div
-        class="render-prop"
-      />
-    </div>
-  </span>
-</div>
-`;
-
 exports[`FormField renders with label 1`] = `
 <div
   class="root"
diff --git a/__tests__/__snapshots__/TextArea.test.js.snap b/__tests__/__snapshots__/TextArea.test.js.snap
index 4fa3debf..79540610 100644
--- a/__tests__/__snapshots__/TextArea.test.js.snap
+++ b/__tests__/__snapshots__/TextArea.test.js.snap
@@ -51,22 +51,6 @@ exports[`TextArea renders with a value 1`] = `
 </div>
 `;
 
-exports[`TextArea renders with an error 1`] = `
-<div
-  class="root errored"
->
-  <span>
-    <div
-      class="inputWrapper"
-    >
-      <textarea
-        class="textarea errored"
-      />
-    </div>
-  </span>
-</div>
-`;
-
 exports[`TextArea renders with placeholder 1`] = `
 <div
   class="root"
diff --git a/source/skins/simple/OptionsSkin.js b/source/skins/simple/OptionsSkin.js
index 378f6937..f3cca8e2 100644
--- a/source/skins/simple/OptionsSkin.js
+++ b/source/skins/simple/OptionsSkin.js
@@ -89,11 +89,15 @@ export const OptionsSkin = (props: Props) => {
     if (!noResults && render) {
       // call user's custom render function
       return render(getOptionProps);
-    } if (!noResults && !render) {
+    }
+    if (!noResults && !render) {
       // render default simple skin
       return sortedOptions.map((option, index) => {
         // set reference of event handlers in memory to prevent excess re-renders
-        const boundSetHighlightedOptionIndex = setHighlightedOptionIndex.bind(null, index);
+        const boundSetHighlightedOptionIndex = setHighlightedOptionIndex.bind(
+          null,
+          index
+        );
         const boundHandleClickOnOption = handleClickOnOption.bind(null, option);
 
         return (
@@ -104,10 +108,14 @@ export const OptionsSkin = (props: Props) => {
             className={classnames([
               option.className ? option.className : null,
               theme[themeId].option,
-              isHighlightedOption(index) ? theme[themeId].highlightedOption : null,
+              isHighlightedOption(index)
+                ? theme[themeId].highlightedOption
+                : null,
               isSelectedOption(index) ? theme[themeId].selectedOption : null,
               option.isDisabled ? theme[themeId].disabledOption : null,
-              noSelectedOptionCheckmark ? theme[themeId].hasNoSelectedOptionCheckmark : null,
+              noSelectedOptionCheckmark
+                ? theme[themeId].hasNoSelectedOptionCheckmark
+                : null,
             ])}
             onClick={boundHandleClickOnOption}
             onMouseEnter={boundSetHighlightedOptionIndex}
@@ -121,20 +129,24 @@ export const OptionsSkin = (props: Props) => {
     return <li className={theme[themeId].option}>{noResultsMessage}</li>;
   };
 
-  const renderOption = option => {
+  const renderOption = (option) => {
     const escapedSearchValue = escapeRegExp(searchValue) || '';
     // check if user has passed render prop "optionRenderer"
     if (optionRenderer && isFunction(optionRenderer)) {
       // call user's custom rendering logic
       return optionRenderer(option);
-    } if (isObject(option)) {
+    }
+    if (isObject(option)) {
       let { label } = option;
       // in case `highlightSearch` then `searchValue` is wrapped in an `em` tag
-      if (highlightSearch !== false) {
-        const splitter = new RegExp(`(${escapedSearchValue})`,'i');
+      if (highlightSearch !== false && escapedSearchValue !== '') {
+        const splitter = new RegExp(`(${escapedSearchValue})`, 'i');
         const parts = typeof label === 'string' ? label.split(splitter) : label;
         for (let i = 1; i < parts.length; i += 2) {
-          if (escapeRegExp(parts[i].toLowerCase()) === `${escapedSearchValue}`.toLowerCase())
+          if (
+            escapeRegExp(parts[i].toLowerCase()) ===
+            `${escapedSearchValue}`.toLowerCase()
+          )
             parts[i] = <em key={i}>{parts[i]}</em>;
           label = parts;
         }
@@ -161,8 +173,8 @@ export const OptionsSkin = (props: Props) => {
           />
         )}
       </div>
-    )
-  }
+    );
+  };
 
   const getScrollBarHeight = (): number => {
     if (!options.length) return optionHeight;
@@ -173,9 +185,12 @@ export const OptionsSkin = (props: Props) => {
   };
 
   // Enforce max height of options dropdown if necessary
-  const optionsStyle = optionsMaxHeight == null ? null : {
-    maxHeight: `${optionsMaxHeight}px`
-  };
+  const optionsStyle =
+    optionsMaxHeight == null
+      ? null
+      : {
+          maxHeight: `${optionsMaxHeight}px`,
+        };
 
   return (
     <Bubble
@@ -201,8 +216,12 @@ export const OptionsSkin = (props: Props) => {
         style={optionsStyle}
         ref={optionsRef}
         className={theme[themeId].ul}
-        onMouseEnter={() => setMouseIsOverOptions && setMouseIsOverOptions(true)}
-        onMouseLeave={() => setMouseIsOverOptions && setMouseIsOverOptions(false)}
+        onMouseEnter={() =>
+          setMouseIsOverOptions && setMouseIsOverOptions(true)
+        }
+        onMouseLeave={() =>
+          setMouseIsOverOptions && setMouseIsOverOptions(false)
+        }
       >
         <ScrollBar style={{ height: `${getScrollBarHeight()}px` }}>
           {renderOptions()}

From 864129767db6549fe76d1b76035ee4622fd7c394 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Fri, 23 Apr 2021 13:22:29 +0200
Subject: [PATCH 240/244] [DDW-595] Add Github workflow for automated testing

---
 .github/workflows/test.yml | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 .github/workflows/test.yml

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 00000000..dd53e28c
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,11 @@
+name: test
+on: [push]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: install modules
+        run: yarn
+      - name: run tests
+        run: yarn test

From 418853b779fe4eb5e064df56f895b4ef9c43e1d0 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Sat, 24 Apr 2021 12:54:39 +0200
Subject: [PATCH 241/244] 0.9.7-next.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 25816b34..a635daa5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.8-rc.19",
+  "version": "0.9.7-next.1",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From dcdac9339860586aabade45fb384f96e80f2e1c4 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Sat, 24 Apr 2021 12:59:02 +0200
Subject: [PATCH 242/244] [DDW-595] Improve npm release instructions

---
 README.md    | 4 ++--
 package.json | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index ee5109dc..e932ae48 100644
--- a/README.md
+++ b/README.md
@@ -122,10 +122,10 @@ Temporary releases are useful for testing specific changes in your project PRs w
 releases that might confuse others and are not following semver.
 
 1. Create a dedicated branch for your bug/feature/chore
-2. Run `npm:view:next` to see the latest release version the `next` npm dist-tag is currently pointing to
+2. Run `npm view react-polymorph dist-tags.next` to see the latest release version the `next` npm dist-tag is currently pointing to
    (this will look something like this: `1.0.0-next.1`)
 3. Increase the `next.X` number by one (e.g: `npm version 1.0.0-next.2`) to create a new git tag via.
-4. Publish the release candidate with `npm:publish:next` (this automatically assigns the `next` dist-tag)
+4. Publish the release candidate with `npm publish --tag next` (to assign the `next` dist-tag instead of `latest`)
 5. Reference your release candidate version in your project PR
 
 ### How to publish a stable release
diff --git a/package.json b/package.json
index a635daa5..7186721c 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,7 @@
     "storybook:build": "build-storybook -c storybook -o dist/storybook",
     "test": "cross-env NODE_ENV=test jest",
     "test:update": "yarn test -u",
-    "test:watch": "yarn test --watchAll",
-    "npm:view:next": "npm view react-polymorph dist-tags.next",
-    "npm:publish:next": "npm publish --tag next"
+    "test:watch": "yarn test --watchAll"
   },
   "dependencies": {
     "@tippyjs/react": "4.2.1",

From 62247308df61c2ec65ca59c0f1037d6209538488 Mon Sep 17 00:00:00 2001
From: Dominik Guzei <dominik.guzei@gmail.com>
Date: Wed, 28 Apr 2021 22:42:36 +0200
Subject: [PATCH 243/244] 1.0.0-rc.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7186721c..47e759bb 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-polymorph",
   "description": "React components with highly customizable logic, markup and styles.",
-  "version": "0.9.7-next.1",
+  "version": "1.0.0-rc.1",
   "scripts": {
     "build": "cross-env yarn clean && yarn sass && yarn js",
     "build:watch": "concurrently 'yarn js:watch' 'yarn sass:watch'",

From 2cfeb62681e0b47f7ad3246463ff1440fc0a6ef3 Mon Sep 17 00:00:00 2001
From: Danilo Prates <daniloprates@gmail.com>
Date: Tue, 4 May 2021 11:00:32 -0300
Subject: [PATCH 244/244] Merge branch
 'fix/ddw-662-fix-react-polymorph-select-search-issues' into release/1.0.0

---
 CHANGELOG.md                 |  1 +
 source/components/Options.js | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3527bf0..d1d82b32 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ vNext
 
 ### Fixes :muscle:
 
+- Fixed Select search issues([PR 179](https://github.com/input-output-hk/react-polymorph/pull/179))
 - Fixed Select Search styles and minor code issues ([PR 175](https://github.com/input-output-hk/react-polymorph/pull/175))
 - Fixed a wrong variable name for the select search highlight color ([PR 170](https://github.com/input-output-hk/react-polymorph/pull/170))
 - Fixed an issue related to Numeric Input when entering numbers after having selected the decimal separator ([PR 167](https://github.com/input-output-hk/react-polymorph/pull/167))
diff --git a/source/components/Options.js b/source/components/Options.js
index 1d4a8c41..3571d76d 100644
--- a/source/components/Options.js
+++ b/source/components/Options.js
@@ -45,6 +45,7 @@ type Props = {
   optionRenderer?: Function,
   optionsRef?: ElementRef<any>,
   optionsMaxHeight?: number,
+  persistSearchValue?: boolean,
   render?: Function,
   resetOnClose: boolean,
   searchHeight: ?number,
@@ -179,7 +180,8 @@ class OptionsBase extends Component<Props, State> {
   };
 
   isSelectedOption = (optionIndex: number) => {
-    const { options, isOpeningUpward } = this.props;
+    const { isOpeningUpward } = this.props;
+    const options = this.getFilteredOptions() || []
     const index = isOpeningUpward
       ? options.length - 1 - optionIndex
       : optionIndex;
@@ -197,11 +199,15 @@ class OptionsBase extends Component<Props, State> {
   };
 
   handleClickOnOption = (option: ?Object, event: SyntheticEvent<>) => {
+    const { onChange, onBlur, persistSearchValue } = this.props;
     if (option) {
       if (option.isDisabled) return;
-      if (this.props.onChange) this.props.onChange(option, event);
+      if (onChange) onChange(option, event);
+    }
+    if (onBlur) onBlur(event);
+    if (!persistSearchValue) {
+      this.handleClearSearchValue();
     }
-    if (this.props.onBlur) this.props.onBlur(event);
     this.close();
   };
 
@@ -209,13 +215,13 @@ class OptionsBase extends Component<Props, State> {
     this.setState({
       searchValue
     });
-  }
+  };
 
   handleClearSearchValue = () => {
     this.setState({
       searchValue: '',
     });
-  }
+  };
 
   getFilteredOptions = () => {
     const { hasSearch, onSearch, options, highlightSearch, optionRenderer } = this.props;
@@ -232,7 +238,7 @@ class OptionsBase extends Component<Props, State> {
       return regex.test(label);
     });
     return filteredOptions;
-  }
+  };
 
   // returns an object containing props, theme, and method handlers
   // associated with rendering this.props.options, the user can call