diff --git a/.storybook/addons.js b/.storybook/addons.js
index 6aed412d..699e7717 100644
--- a/.storybook/addons.js
+++ b/.storybook/addons.js
@@ -1,2 +1,3 @@
+import '@storybook/addon-knobs/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
diff --git a/package.json b/package.json
index b039f644..e3a992d4 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
   "devDependencies": {
     "@babel/core": "7.9.6",
     "@storybook/addon-actions": "5.3.19",
+    "@storybook/addon-knobs": "5.3.19",
     "@storybook/addon-links": "5.3.19",
     "@storybook/addons": "5.3.19",
     "@storybook/react": "5.3.19",
diff --git a/stories/basic.stories.tsx b/stories/basic.stories.tsx
deleted file mode 100644
index 1c63444e..00000000
--- a/stories/basic.stories.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { Form } from 'semantic-ui-react';
-import 'semantic-ui-css/semantic.min.css';
-import SemanticDatepicker from '../src';
-import { Content } from './common';
-import { parseISO } from 'date-fns';
-
-const isWeekday = (date: Date) => {
-  const day = date.getDay();
-
-  return day !== 0 && day !== 6;
-};
-
-export default {
-  title: 'Basic datepicker',
-};
-
-export const simple = () => (
-  <Content>
-    <SemanticDatepicker onChange={action('selected date')} />
-  </Content>
-);
-
-export const withReadOnly = () => (
-  <Content>
-    <SemanticDatepicker onChange={action('selected date')} readOnly />
-  </Content>
-);
-
-export const withDatePickerOnly = () => (
-  <Content>
-    <SemanticDatepicker onChange={action('selected date')} datePickerOnly />
-  </Content>
-);
-
-export const withoutClearOnSameDateClick = () => (
-  <Content>
-    <SemanticDatepicker
-      onChange={action('selected date')}
-      clearOnSameDateClick={false}
-    />
-  </Content>
-);
-
-export const withAllowOnlyNumbers = () => (
-  <Content>
-    <SemanticDatepicker allowOnlyNumbers onChange={action('selected date')} />
-  </Content>
-);
-
-export const withFirstDayOfWeek = () => (
-  <Content>
-    <SemanticDatepicker firstDayOfWeek={3} onChange={action('selected date')} />
-  </Content>
-);
-
-export const withOutsideDays = () => (
-  <Content>
-    <SemanticDatepicker showOutsideDays onChange={action('selected date')} />
-  </Content>
-);
-
-export const withFormatProp = () => (
-  <Content>
-    <SemanticDatepicker
-      format="DD/MM/YYYY"
-      onChange={action('selected date')}
-    />
-  </Content>
-);
-
-export const withBrazilianPortugueseLocale = () => (
-  <Content>
-    <SemanticDatepicker
-      onChange={action('selected date')}
-      format="DD/MM/YYYY"
-      locale="pt-BR"
-      value={parseISO('2018-10-01')}
-    />
-  </Content>
-);
-
-export const withKeepOpenOnSelect = () => (
-  <Content>
-    <SemanticDatepicker keepOpenOnSelect onChange={action('selected date')} />
-  </Content>
-);
-
-export const asFormComponent = () => (
-  <Content>
-    <Form>
-      <Form.Group width="equals">
-        <SemanticDatepicker
-          label="Birth date"
-          id="birthDate"
-          onChange={action('selected date')}
-          required
-        />
-        <SemanticDatepicker
-          label="Start date"
-          id="startDate"
-          onChange={action('selected date')}
-        />
-      </Form.Group>
-    </Form>
-  </Content>
-);
-
-export const withLeftPointing = () => (
-  <Content>
-    <SemanticDatepicker pointing="left" onChange={action('selected date')} />
-  </Content>
-);
-
-export const withRightPointing = () => (
-  <Content>
-    <SemanticDatepicker pointing="right" onChange={action('selected date')} />
-  </Content>
-);
-
-export const withTopLeftPointing = () => (
-  <Content
-    style={{
-      alignItems: 'flex-end',
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      top: 0,
-    }}
-  >
-    <SemanticDatepicker
-      pointing="top left"
-      onChange={action('selected date')}
-    />
-  </Content>
-);
-
-export const withTopRightPointing = () => (
-  <Content
-    style={{
-      alignItems: 'flex-end',
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      top: 0,
-    }}
-  >
-    <SemanticDatepicker
-      pointing="top right"
-      onChange={action('selected date')}
-    />
-  </Content>
-);
-
-export const withFilterDate = () => (
-  <Content>
-    <SemanticDatepicker
-      filterDate={isWeekday}
-      onChange={action('selected date')}
-      showOutsideDays
-    />
-  </Content>
-);
-
-export const withFilterDateSettingMaxDate = () => (
-  <Content>
-    <SemanticDatepicker
-      filterDate={isWeekday}
-      maxDate={new Date('2019-01-01')}
-      onChange={action('selected date')}
-      showOutsideDays
-    />
-  </Content>
-);
diff --git a/stories/common.tsx b/stories/common.tsx
index 758ecb7e..4bc5b471 100644
--- a/stories/common.tsx
+++ b/stories/common.tsx
@@ -5,7 +5,24 @@ type ContentProps = {
 };
 
 export const Content: React.FC<ContentProps> = ({ children, style }) => (
-  <div style={{ display: 'flex', flex: 1, justifyContent: 'center', ...style }}>
+  <div
+    style={{
+      display: 'flex',
+      position: 'absolute',
+      height: '100%',
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...style,
+    }}
+  >
     {children}
   </div>
 );
+
+export const onChange = (_: any, data: any) =>
+  console.log('[react-semantic-ui-datepickers]\n', data);
+
+export const isWeekday = (date: Date) => ![0, 6].includes(date.getDay());
+
+export * from './data';
diff --git a/stories/data.ts b/stories/data.ts
new file mode 100644
index 00000000..f1c063c5
--- /dev/null
+++ b/stories/data.ts
@@ -0,0 +1,37 @@
+const types = <const>['basic', 'range'];
+const pointing = <const>['left', 'right', 'top left', 'top right'];
+const locale = <const>[
+  'bg-BG',
+  'ca-ES',
+  'cs-CZ',
+  'de-DE',
+  'en-US',
+  'es-ES',
+  'fi-FL',
+  'fr-FR',
+  'he-IL',
+  'it-IT',
+  'ja-JP',
+  'nb-NO',
+  'pl-PL',
+  'pt-BR',
+  'ru-RU',
+  'sv-SE',
+  'tr-TR',
+  'zh-CN',
+];
+
+function arrayToMap<T extends string>(
+  arr: readonly T[]
+): { [key in typeof arr[number]]: typeof arr[number] } {
+  return arr.reduce(
+    (acc, cur) => ({ ...acc, [cur]: cur }),
+    {} as { [key in T]: T }
+  );
+}
+
+export const typeMap = arrayToMap(types);
+
+export const pointingMap = arrayToMap(pointing);
+
+export const localeMap = arrayToMap([...locale].sort());
diff --git a/stories/index.stories.tsx b/stories/index.stories.tsx
new file mode 100644
index 00000000..84580dec
--- /dev/null
+++ b/stories/index.stories.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import {
+  withKnobs,
+  boolean,
+  date,
+  number,
+  select,
+  text,
+} from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/react';
+import { Form } from 'semantic-ui-react';
+import 'semantic-ui-css/semantic.min.css';
+import SemanticDatepicker from '../src';
+import {
+  Content,
+  isWeekday,
+  localeMap,
+  onChange,
+  pointingMap,
+  typeMap,
+} from './common';
+// import { parseISO } from 'date-fns';
+
+const stories = storiesOf('Datepickers', module);
+
+stories.addDecorator(withKnobs);
+stories.addParameters({
+  info: {
+    disable: true,
+  },
+  options: {
+    panelPosition: 'right',
+  },
+});
+
+stories.add('Basic usage', () => {
+  const type = select('Type', typeMap, typeMap.basic);
+  const allowOnlyNumbers = boolean('Allow only numbers', false);
+  const clearOnSameDateClick = boolean('Clear on same date click', true);
+  const datePickerOnly = boolean('Datepicker only', false);
+  const firstDayOfWeek = number('First day of week', 0, { max: 6, min: 0 });
+  const format = text('Format', 'YYYY-MM-DD');
+  const keepOpenOnClear = boolean('Keep open on clear', false);
+  const keepOpenOnSelect = boolean('Keep open on select', false);
+  const locale = select('Locale', localeMap, localeMap['en-US']);
+  const pointing = select('Pointing', pointingMap, pointingMap.left);
+  const clearable = boolean('Clearable', true);
+  const readOnly = boolean('Read-only', false);
+  const showOutsideDays = boolean('Show outside days', false);
+  const minDate = new Date(date('Min date', new Date('2018-01-01')));
+  const maxDate = new Date(date('Max date', new Date('2030-01-01')));
+  const onlyWeekdays = boolean('Only weekdays (filterDate example)', false);
+  const controlValue = boolean('Control value', false);
+  const initialValue = controlValue
+    ? type === 'basic'
+      ? new Date(date('Initial value'))
+      : [new Date(date('Initial value')), new Date(date('Final value'))]
+    : undefined;
+  const filterDate = onlyWeekdays ? isWeekday : undefined;
+  const key = type + format + readOnly;
+
+  return (
+    <Content>
+      <SemanticDatepicker
+        key={key}
+        allowOnlyNumbers={allowOnlyNumbers}
+        clearOnSameDateClick={clearOnSameDateClick}
+        clearable={clearable}
+        datePickerOnly={datePickerOnly}
+        filterDate={filterDate}
+        firstDayOfWeek={firstDayOfWeek}
+        format={format}
+        keepOpenOnClear={keepOpenOnClear}
+        keepOpenOnSelect={keepOpenOnSelect}
+        locale={locale}
+        maxDate={maxDate}
+        minDate={minDate}
+        onChange={onChange}
+        pointing={pointing}
+        readOnly={readOnly}
+        showOutsideDays={showOutsideDays}
+        type={type}
+        value={initialValue}
+      />
+    </Content>
+  );
+});
+
+stories.add('Usage with Form', () => {
+  return (
+    <Content>
+      <Form>
+        <Form.Group width="equals">
+          <SemanticDatepicker
+            label="Initial date"
+            id="initialDate"
+            onChange={onChange}
+            required
+          />
+          <SemanticDatepicker
+            label="Final date"
+            id="finalDate"
+            onChange={onChange}
+          />
+        </Form.Group>
+      </Form>
+    </Content>
+  );
+});
diff --git a/stories/range.stories.tsx b/stories/range.stories.tsx
deleted file mode 100644
index 00855290..00000000
--- a/stories/range.stories.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import 'semantic-ui-css/semantic.min.css';
-import SemanticDatepicker from '../src';
-import { Content } from './common';
-
-export default {
-  title: 'Range datepicker',
-};
-
-export const simple = () => (
-  <Content>
-    <SemanticDatepicker type="range" onChange={action('selected date')} />
-  </Content>
-);
-
-export const withRightPointing = () => (
-  <Content>
-    <SemanticDatepicker
-      type="range"
-      pointing="right"
-      onChange={action('selected date')}
-    />
-  </Content>
-);
-
-export const withFirstDayOfWeek = () => (
-  <Content>
-    <SemanticDatepicker
-      type="range"
-      firstDayOfWeek={6}
-      onChange={action('selected date')}
-    />
-  </Content>
-);
-
-export const withOutsideDays = () => (
-  <Content>
-    <SemanticDatepicker
-      type="range"
-      showOutsideDays
-      onChange={action('selected date')}
-    />
-  </Content>
-);
-
-export const withFormatProp = () => (
-  <Content>
-    <SemanticDatepicker
-      type="range"
-      format="DD/MM/YYYY"
-      onChange={action('selected date')}
-    />
-  </Content>
-);
-
-export const withPolishLocale = () => (
-  <Content>
-    <SemanticDatepicker
-      type="range"
-      onChange={action('selected date')}
-      locale="pl-PL"
-    />
-  </Content>
-);
diff --git a/yarn.lock b/yarn.lock
index 1cabfdf4..0b0f1f0c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -921,6 +921,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.4.4", "@babel/runtime@^7.8.7":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.1.tgz#b6eb75cac279588d3100baecd1b9894ea2840822"
+  integrity sha512-nQbbCbQc9u/rpg1XCxoMYQTbSMVZjCDxErQ1ClCn9Pvcmv1lGads19ep0a2VsEiIJeHqjZley6EQGEC3Yo1xMA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.7.4", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
@@ -989,6 +996,16 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
+"@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.20":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.27.tgz#7c3f78be681ab2273f3bf11ca3e2edc4a9dd1fdc"
@@ -1001,7 +1018,19 @@
     "@emotion/sheet" "0.9.4"
     "@emotion/utils" "0.11.3"
 
-"@emotion/css@^10.0.27":
+"@emotion/core@^10.0.9":
+  version "10.0.28"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.28.tgz#bb65af7262a234593a9e952c041d0f1c9b9bef3d"
+  integrity sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==
+  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.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==
@@ -1081,6 +1110,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@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==
+
 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
@@ -1375,6 +1409,30 @@
     react-inspector "^4.0.0"
     uuid "^3.3.2"
 
+"@storybook/addon-knobs@5.3.19":
+  version "5.3.19"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-5.3.19.tgz#b2483e401e2dca6390e1c0a81801130a0b515efb"
+  integrity sha512-e7z6KhvVOUGjygK4VL5Un1U3t0XG0jkb/BOHVWQMtH5dWNn3zofD3LrZZy24eAsyre/ej/LGo/BzwDSXkKLTog==
+  dependencies:
+    "@storybook/addons" "5.3.19"
+    "@storybook/api" "5.3.19"
+    "@storybook/client-api" "5.3.19"
+    "@storybook/components" "5.3.19"
+    "@storybook/core-events" "5.3.19"
+    "@storybook/theming" "5.3.19"
+    "@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 "^2.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    prop-types "^15.7.2"
+    qs "^6.6.0"
+    react-color "^2.17.0"
+    react-lifecycles-compat "^3.0.4"
+    react-select "^3.0.8"
+
 "@storybook/addon-links@5.3.19":
   version "5.3.19"
   resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-5.3.19.tgz#3c23e886d44b56978ae254fed3bf8be54c877178"
@@ -1391,19 +1449,6 @@
     qs "^6.6.0"
     ts-dedent "^1.1.0"
 
-"@storybook/addons@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.3.18.tgz#5cbba6407ef7a802041c5ee831473bc3bed61f64"
-  integrity sha512-ZQjDgTUDFRLvAiBg2d8FgPgghfQ+9uFyXQbtiGlTBLinrPCeQd7J86qiUES0fcGoohCCw0wWKtvB0WF2z1XNDg==
-  dependencies:
-    "@storybook/api" "5.3.18"
-    "@storybook/channels" "5.3.18"
-    "@storybook/client-logger" "5.3.18"
-    "@storybook/core-events" "5.3.18"
-    core-js "^3.0.1"
-    global "^4.3.2"
-    util-deprecate "^1.0.2"
-
 "@storybook/addons@5.3.19":
   version "5.3.19"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.3.19.tgz#3a7010697afd6df9a41b8c8a7351d9a06ff490a4"
@@ -1417,32 +1462,6 @@
     global "^4.3.2"
     util-deprecate "^1.0.2"
 
-"@storybook/api@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.3.18.tgz#95582ab90d947065e0e34ed603650a3630dcbd16"
-  integrity sha512-QXaccNCARHzPWOuxYndiebGWBZmwiUvRgB9ji0XTJBS3y8K0ZPb5QyuqiKPaEWUj8dBA8rzdDtkW3Yt95Namaw==
-  dependencies:
-    "@reach/router" "^1.2.1"
-    "@storybook/channels" "5.3.18"
-    "@storybook/client-logger" "5.3.18"
-    "@storybook/core-events" "5.3.18"
-    "@storybook/csf" "0.0.1"
-    "@storybook/router" "5.3.18"
-    "@storybook/theming" "5.3.18"
-    "@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"
-    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/api@5.3.19":
   version "5.3.19"
   resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.3.19.tgz#77f15e9e2eee59fe1ddeaba1ef39bc34713a6297"
@@ -1480,13 +1499,6 @@
     global "^4.3.2"
     telejson "^3.2.0"
 
-"@storybook/channels@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.3.18.tgz#490c9eaa8292b0571c0f665052b12addf7c35f21"
-  integrity sha512-scP/6td/BJSEOgfN+qaYGDf3E793xye7tIw6W+sYqwg+xdMFO39wVXgVZNpQL6sLEwpJZTaPywCjC6p6ksErqQ==
-  dependencies:
-    core-js "^3.0.1"
-
 "@storybook/channels@5.3.19":
   version "5.3.19"
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.3.19.tgz#65ad7cd19d70aa5eabbb2e5e39ceef5e510bcb7f"
@@ -1517,13 +1529,6 @@
     ts-dedent "^1.1.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-logger@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.3.18.tgz#27c9d09d788965db0164be6e168bc3f03adbf88f"
-  integrity sha512-RZjxw4uqZX3Yk27IirbB/pQG+wRsQSSRlKqYa8KQ5bSanm4IrcV9VA1OQbuySW9njE+CexAnakQJ/fENdmurNg==
-  dependencies:
-    core-js "^3.0.1"
-
 "@storybook/client-logger@5.3.19":
   version "5.3.19"
   resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.3.19.tgz#fbbd186e82102eaca1d6a5cca640271cae862921"
@@ -1558,13 +1563,6 @@
     simplebar-react "^1.0.0-alpha.6"
     ts-dedent "^1.1.0"
 
-"@storybook/core-events@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.3.18.tgz#e5d335f8a2c7dd46502b8f505006f1e111b46d49"
-  integrity sha512-uQ6NYJ5WODXK8DJ7m8y3yUAtWB3n+6XtYztjY+tdkCsLYvTYDXNS+epV+f5Hu9+gB+/Dm+b5Su4jDD+LZB2QWA==
-  dependencies:
-    core-js "^3.0.1"
-
 "@storybook/core-events@5.3.19":
   version "5.3.19"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.3.19.tgz#18020cd52e0d8ef0973a8e9622a10d5f99796f79"
@@ -1697,21 +1695,6 @@
     ts-dedent "^1.1.0"
     webpack "^4.33.0"
 
-"@storybook/router@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.3.18.tgz#8ab22f1f2f7f957e78baf992030707a62289076e"
-  integrity sha512-6B2U2C75KTSVaCuYYgcubeJGcCSnwsXuEf50hEd5mGqWgHZfojCtGvB7Ko4X+0h8rEC+eNA4p7YBOhlUv9WNrQ==
-  dependencies:
-    "@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.6.0"
-    util-deprecate "^1.0.2"
-
 "@storybook/router@5.3.19":
   version "5.3.19"
   resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.3.19.tgz#0f783b85658f99e4007f74347ad7ef17dbf7fc3a"
@@ -1727,24 +1710,6 @@
     qs "^6.6.0"
     util-deprecate "^1.0.2"
 
-"@storybook/theming@5.3.18":
-  version "5.3.18"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.3.18.tgz#35e78de79d9cf8f1248af0dd1c7fa60555761312"
-  integrity sha512-lfFTeLoYwLMKg96N3gn0umghMdAHgJBGuk2OM8Ll84yWtdl9RGnzfiI1Fl7Cr5k95dCF7drLJlJCao1VxUkFSA==
-  dependencies:
-    "@emotion/core" "^10.0.20"
-    "@emotion/styled" "^10.0.17"
-    "@storybook/client-logger" "5.3.18"
-    core-js "^3.0.1"
-    deep-object-diff "^1.1.0"
-    emotion-theming "^10.0.19"
-    global "^4.3.2"
-    memoizerific "^1.11.3"
-    polished "^3.3.1"
-    prop-types "^15.7.2"
-    resolve-from "^5.0.0"
-    ts-dedent "^1.1.0"
-
 "@storybook/theming@5.3.19":
   version "5.3.19"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.3.19.tgz#177d9819bd64f7a1a6ea2f1920ffa5baf9a5f467"
@@ -2083,6 +2048,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-color@^3.0.1":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.2.tgz#41bc40f564eb058fb0822c1742438bcd0b823249"
+  integrity sha512-FhrRy0xEYEpysl1iKL11ynJc79H6ztyYc4xD1pliZyygEChleTlHGohb/bClTYPN8XeSw6yaz45l3YW5SGYftQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@*":
   version "16.9.1"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.1.tgz#79206237cba9532a9f870b1cd5428bef6b66378c"
@@ -4490,6 +4462,11 @@ csstype@^2.2.0, csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
   integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
 
+csstype@^2.6.7:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
+  integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -4768,6 +4745,14 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.4.tgz#4609680ab5c79a45f2531441f1949b79d6587f4b"
+  integrity sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^2.6.7"
+
 dom-serializer@0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.1.tgz#13650c850daffea35d8b626a4cfc4d3a17643fdb"
@@ -5108,7 +5093,7 @@ es6-symbol@^3.1.1, es6-symbol@~3.1.1:
     d "^1.0.1"
     es5-ext "^0.10.51"
 
-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=
@@ -8040,7 +8025,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-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.5:
+lodash@^4.0.1, 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.5:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -8160,6 +8145,11 @@ markdown-to-jsx@^6.11.4:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
+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==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -8184,6 +8174,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"
@@ -9981,7 +9976,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@15.7.2, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, 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==
@@ -10185,6 +10180,18 @@ react-clientside-effect@^1.2.2:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
+react-color@^2.17.0:
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.18.1.tgz#2cda8cc8e06a9e2c52ad391a30ddad31972472f4"
+  integrity sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.11"
+    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"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
@@ -10293,6 +10300,13 @@ react-hotkeys@2.0.0:
   dependencies:
     prop-types "^15.6.1"
 
+react-input-autosize@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
+  integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-inspector@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-4.0.0.tgz#ad73200ca18452aff333df2e2791be4544c422a9"
@@ -10343,6 +10357,20 @@ react-popper@^1.3.3, react-popper@^1.3.4:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-select@^3.0.8:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.1.0.tgz#ab098720b2e9fe275047c993f0d0caf5ded17c27"
+  integrity sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==
+  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 "^2.2.2"
+    react-transition-group "^4.3.0"
+
 react-sizeme@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.7.tgz#231339ce8821ac2c26424c791e0027f89dae3e90"
@@ -10372,6 +10400,16 @@ react-textarea-autosize@^7.1.0:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.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, react@^16.8.3:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -10381,6 +10419,13 @@ react@16.13.1, 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"
@@ -12052,6 +12097,11 @@ tiny-glob@^0.2.6:
     globalyzer "^0.1.0"
     globrex "^0.1.1"
 
+tinycolor2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"